:root{
      --accent:#0077b6;
      --dark:#0f1724;
      --muted:#6b7280;
      --glass: rgba(255,255,255,0.06);
      --card: rgba(255,255,255,0.03);
      --max-width:1200px;
      --whatsapp:#25D366;
      --ff-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:var(--ff-sans);background:linear-gradient(180deg,#0b1220 0%, #0f1a2a 100%);color:#eef2ff}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;height:auto;display:block}

    /* =========================
       Container + header
       ========================= */
    .wrap{max-width:var(--max-width);margin:0 auto;padding:20px}
    header{display:flex;flex-direction:column;align-items:center;gap:12px}

    /* Animated logo above title */
    .logo-assembly{width:120px;height:120px;border-radius:16px;background:linear-gradient(135deg,var(--accent),#00b4d8);display:grid;place-items:center;position:relative;overflow:hidden}
    .logo-piece{width:36px;height:36px;background:white;border-radius:6px;position:absolute;transform-origin:center;animation:assemble 5s infinite ease-in-out}
    .logo-piece.p1{top:10%;left:10%;animation-delay:0s}
    .logo-piece.p2{top:10%;right:10%;animation-delay:.3s}
    .logo-piece.p3{bottom:10%;left:10%;animation-delay:.6s}
    .logo-piece.p4{bottom:10%;right:10%;animation-delay:.9s}
    .logo-piece.p5{top:45%;left:45%;width:28px;height:28px;background:var(--accent);border-radius:50%;animation-delay:1.2s}
    @keyframes assemble{
      0%{transform:translateY(-40px) scale(.6) rotate(-20deg);opacity:0}
      40%{transform:translateY(0) scale(1) rotate(0);opacity:1}
      60%{transform:translateY(0) scale(1) rotate(0)}
      100%{transform:translateY(-30px) scale(.8) rotate(18deg);opacity:.6}
    }

    h1{font-size:clamp(20px,3.6vw,36px);margin:0;text-align:center}
    .subtitle{color:var(--muted);font-size:14px}

    /* Navigation under the title */
    nav{margin-top:8px;width:100%;display:flex;justify-content:center}
    nav ul{display:flex;gap:12px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
    nav a{background:var(--card);padding:10px 14px;border-radius:10px;font-weight:600}

    /* Presentation hero */
    .hero{display:flex;flex-direction:column;align-items:center;gap:12px;margin:22px 0}
    .hero .preview-img{width:90%;max-width:900px;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(2,6,23,0.6)}
    .hero img{width:100%;height:auto;display:block}

    /* Grid sections */
    section{margin:28px 0;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px}
    section h2{margin:0 0 12px 0}
    .photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
    .photo-grid button{background:transparent;border:0;padding:0;cursor:pointer;overflow:hidden;border-radius:10px}
    .photo-grid img{width:100%;height:110px;object-fit:cover;transition:transform .25s ease}
    .photo-grid button:focus img,.photo-grid button:hover img{transform:scale(1.04)}

    /* Lightbox full-screen view (100%) */
    .lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(3,6,12,0.86);z-index:1200}
    .lightbox.active{display:flex}
    .lightbox img{max-width:100%;max-height:100%;object-fit:contain}
    .lightbox .close{position:absolute;top:18px;right:18px;background:rgba(255,255,255,0.08);border-radius:8px;padding:8px;backdrop-filter:blur(4px);cursor:pointer}

    /* Videos */
    .videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
    .videos video, .videos iframe{width:100%;height:220px;border-radius:8px}

    /* Floating WhatsApp */
    .whatsapp-btn{position:fixed;right:18px;bottom:18px;background:var(--whatsapp);width:64px;height:64px;border-radius:50%;display:grid;place-items:center;z-index:1300;box-shadow:0 10px 30px rgba(2,6,23,0.6)}
    .whatsapp-btn a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#062018;font-weight:700}

    /* Contact form */
    .contact-grid{display:grid;grid-template-columns:1fr;gap:12px}
    .form-control{display:flex;flex-direction:column;gap:6px}
    input,textarea{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
    .btn-send{background:var(--accent);border:0;padding:10px 14px;border-radius:8px;color:white;font-weight:700;cursor:pointer}
    .robotic-note{font-size:13px;color:var(--muted)}

    footer{text-align:center;padding:18px 6px;margin-top:18px;color:var(--muted);font-size:14px}

    /* Responsive tweaks */
    @media(min-width:900px){
      header{flex-direction:row;justify-content:space-between;align-items:center}
      .hero{flex-direction:row;gap:20px}
      .hero .preview-img{width:60%}
      .contact-grid{grid-template-columns:1fr 360px}
    }

    /* Accessibility focus */
    button:focus, a:focus, input:focus, textarea:focus{outline:3px solid rgba(0,132,255,0.22);outline-offset:2px}

    h1, h2, h3, h4, h5, h6, p, a, li, label, input, textarea, button { color: white; font-size: 1.1em; }