:root{
    --bg: #050505;
    --bg-alt: #0d0d0d;
    --card: #121212;
    --card-border: #232323;
    --white: #f5f5f3;
    --muted: #9a9a97;
    --muted-dim: #6f6f6c;
    --accent: #f5f5f3;
    --radius: 18px;
    --max: 1180px;
    --font-head: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  section[id]{scroll-margin-top:100px;}
  body{
    background:var(--bg);
    color:var(--white);
    font-family:var(--font-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}
  .eyebrow{
    display:flex;align-items:center;gap:10px;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);font-weight:600;margin-bottom:20px;
  }
  .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--white);flex-shrink:0;}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 24px;border-radius:999px;font-weight:600;font-size:14px;
    font-family:var(--font-body);cursor:pointer;border:1px solid transparent;
    transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--white);color:#060606;}
  .btn-primary:hover{background:#e2e2df;}
  .btn-outline{border-color:#3a3a38;color:var(--white);}
  .btn-outline:hover{border-color:var(--white);}
  .btn-icon{
    width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.08);
  }
  .btn-primary .btn-icon{background:#060606;}
  .btn-primary .btn-icon svg{stroke:var(--white);}
  .btn-outline .btn-icon{background:transparent;border:1px solid #3a3a38;}
  section{position:relative;}

  /* ---------- HEADER ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    padding:22px 0;
    background:linear-gradient(to bottom, rgba(5,5,5,.92), rgba(5,5,5,0));
    backdrop-filter:blur(6px);
  }
  header .wrap{display:flex;align-items:center;justify-content:space-between;}
  .brand{display:flex;align-items:center;gap:12px;}
  .brand img{width:34px;height:34px;}
  .brand-text{display:flex;flex-direction:column;line-height:1.1;}
  .brand-text .tag{font-size:9px;letter-spacing:.18em;color:var(--muted);font-weight:600;}
  .brand-text .name{font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.02em;}
  nav.main-nav{display:flex;align-items:center;gap:34px;}
  nav.main-nav a{
    font-size:13.5px;color:var(--muted);font-weight:500;position:relative;padding-bottom:4px;
    transition:color .25s ease;
  }
  nav.main-nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
    background:var(--white);
    opacity:0;
    transition:opacity .35s ease;
  }
  nav.main-nav a:hover{color:var(--white);}
  nav.main-nav a.active{color:var(--white);}
  nav.main-nav a:hover::after,
  nav.main-nav a.active::after{opacity:1;}

  /* Each section's underline gets its own color, on hover and while active */
  nav.main-nav a[href="#inicial"]::after{background:#ffffff;}
  nav.main-nav a[href="#clientes"]::after{background:#fceb30;}
  nav.main-nav a[href="#quem-somos"]::after{background:#a800ff;}
  nav.main-nav a[href="#servicos"]::after{background:#306afc;}
  nav.main-nav a[href="#seja-um-monstro"]::after{background:#00f0ff;}
  nav.main-nav a[href="#depoimentos"]::after{background:#ff006c;}
  nav.main-nav a[href="#cases"]::after{background:#bfff00;}
  .header-icon{
    width:40px;height:40px;border:1px solid #2c2c2a;border-radius:50%;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:border-color .2s ease, transform .2s ease;
  }
  .header-icon:hover{border-color:var(--white);transform:rotate(90deg);}
  .header-icon img{width:14px;height:14px;}
  .nav-toggle{display:none;background:none;border:1px solid #2c2c2a;border-radius:10px;width:42px;height:42px;
    align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;}
  .nav-toggle span{width:18px;height:2px;background:var(--white);display:block;transition:.25s;}

  /* ---------- HERO ---------- */
  .hero{
    padding:168px 0 90px;
    position:relative;
    overflow:hidden;
  }
  .hero .wrap{
    display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;position:relative;
  }
  .hero-plus{position:absolute;top:150px;left:32px;font-size:20px;color:var(--muted-dim);}
  .hero h1{
    font-family:var(--font-head);
    font-weight:700;
    font-size:clamp(42px, 5.4vw, 68px);
    line-height:1.04;
    letter-spacing:-.01em;
    margin-bottom:26px;
  }
  .hero h1 .on{
    background:linear-gradient(90deg,#fff,#fff);
    -webkit-background-clip:text;background-clip:text;color:#fff;
    position:relative;
  }
  .hero p.lead{
    color:var(--muted);
    font-size:16px;
    max-width:400px;
    margin-bottom:36px;
  }
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px;}
  .role-tag{
    display:inline-flex;align-items:center;gap:10px;
    font-size:11px;letter-spacing:.18em;color:var(--muted-dim);font-weight:600;
  }
  .role-tag .dot{width:5px;height:5px;border-radius:50%;background:var(--muted-dim);}
  .role-tag .line{width:34px;height:1px;background:#2c2c2a;}

  .hero-visual{position:relative;display:flex;align-items:center;justify-content:center;height:460px;}
  .hero-eye-img{
    width:100%;max-width:640px;max-height:100%;
    object-fit:contain;object-position:center;
    filter:drop-shadow(0 0 60px rgba(255,255,255,.06));
    pointer-events:none;user-select:none;
  }
  /* On wider screens, let the eye run bigger and bleed toward the left,
     instead of just growing centered in its column. */
  @media (min-width: 861px){
    .hero-visual{justify-content:flex-end;overflow:visible;}
    .hero-eye-img{width:130%;max-width:840px;}
  }
  .hero-badge{
    position:absolute;top:-6px;right:8%;width:118px;height:118px;
  }
  .hero-badge svg{width:100%;height:100%;}
  .hero-badge .badge-core{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:34px;height:34px;border:1px solid #3a3a38;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
  }
  .hero-badge .badge-core span{width:8px;height:8px;background:var(--white);border-radius:50%;}
  .hero-dots{position:absolute;right:0;top:36%;display:flex;flex-direction:column;align-items:center;gap:14px;}
  .hero-dots i{width:4px;height:4px;border-radius:50%;background:#3a3a38;display:block;}
  .hero-dots .line{width:1px;height:70px;background:#232321;}

  /* ---------- CLIENTS ---------- */
  .clients{padding:64px 0;border-top:1px solid #1b1b19;border-bottom:1px solid #1b1b19;}
  .clients .wrap{display:flex;flex-direction:column;gap:48px;}
  .clients-current .eyebrow, .clients-past .eyebrow{margin:0 0 22px;}

  .client-current-grid{display:flex;gap:36px;flex-wrap:wrap;}
  .client-current-card{
    display:flex;flex-direction:column;align-items:center;gap:14px;width:150px;
  }
  .client-logo{
    /* Fixed box (not tied to one logo's aspect ratio) so portrait and
       landscape client logos both sit at a consistent, aligned size. */
    position:relative;width:100%;height:130px;
  }
  .client-logo img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
    transition:opacity .35s ease;
  }
  .client-logo-on{opacity:0;}
  .client-current-card:hover .client-logo-off{opacity:0;}
  .client-current-card:hover .client-logo-on{opacity:1;}
  .client-name{
    font-family:var(--font-head);font-weight:600;font-size:13px;color:#d8d8d5;
    text-align:center;letter-spacing:.02em;
  }


  /* ---------- QUEM SOMOS ---------- */
  .about{padding:120px 0;}
  .about .wrap{display:grid;grid-template-columns:.85fr 1fr .8fr;gap:56px;align-items:center;}
  .about-visual{
    width:100%;
    display:flex;align-items:center;justify-content:center;
    position:relative;overflow:visible;
  }
  .about-visual-img{
    width:100%;max-width:480px;height:auto;
    object-fit:contain;object-position:center;
    filter:drop-shadow(0 0 50px rgba(255,255,255,.05));
    pointer-events:none;user-select:none;
  }
  /* On wider screens, double the visual's size (100% bigger) so it reads
     as a real presence rather than being squeezed into its grid column. */
  @media (min-width: 1025px){
    .about-visual-img{width:200%;max-width:960px;}
  }
  .about h2{
    font-family:var(--font-head);font-weight:700;
    font-size:clamp(28px,3vw,38px);line-height:1.18;margin-bottom:20px;letter-spacing:-.01em;
  }
  .about p.body-copy{color:var(--muted);font-size:15px;margin-bottom:22px;max-width:440px;}
  .about .link-arrow{
    display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;
    border-bottom:1px solid var(--white);padding-bottom:4px;width:fit-content;
  }
  .about-features{display:flex;flex-direction:column;gap:26px;}
  .about-feature{display:flex;align-items:flex-start;gap:14px;}
  .feature-icon{
    width:38px;height:38px;border-radius:10px;border:1px solid #232321;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .feature-icon svg{width:16px;height:16px;}
  .about-feature p{font-size:14.5px;font-weight:500;padding-top:9px;}

  /* ---------- SERVICES ---------- */
  .services{padding:0 0 120px;}
  .services .eyebrow{margin-bottom:34px;}
  .service-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
  .service-card{
    background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
    padding:26px 20px;display:flex;flex-direction:column;gap:34px;min-height:210px;
    transition:border-color .25s ease, background .25s ease, transform .25s ease;
  }
  .service-card:hover{border-color:#3a3a38;background:#161616;transform:translateY(-4px);}
  .service-icon{
    width:42px;height:42px;border-radius:12px;background:#1c1c1a;
    display:flex;align-items:center;justify-content:center;
  }
  .service-icon svg{width:19px;height:19px;}
  .service-card h3{font-family:var(--font-head);font-size:16px;font-weight:600;margin-bottom:6px;}
  .service-card p{font-size:12.5px;color:var(--muted);line-height:1.45;margin-bottom:14px;}
  .service-arrow{
    width:30px;height:30px;border-radius:50%;border:1px solid #2c2c2a;
    display:flex;align-items:center;justify-content:center;margin-top:auto;
    transition:background .2s ease, border-color .2s ease;
  }
  .service-card:hover .service-arrow{background:var(--white);border-color:var(--white);}
  .service-card:hover .service-arrow svg{stroke:#060606;}

  /* ---------- CTA MONSTRO ---------- */
  .cta-monstro{
    margin:0 0 120px;padding:90px 0;
    border-radius:28px;
    position:relative;overflow:hidden;
  }
  .cta-bg{
    position:absolute;inset:-10% -5%;
    background:
      radial-gradient(circle at 12% 50%, rgba(255,255,255,.14), transparent 32%),
      repeating-conic-gradient(from 10deg, #0a0a0a 0deg 3deg, #121212 3deg 6deg);
    z-index:0;
  }
  .cta-monstro .cta-inner{
    display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;
    position:relative;z-index:1;
  }
  .cta-monstro h2{
    font-family:var(--font-head);font-weight:700;font-size:clamp(28px,3.4vw,40px);
    line-height:1.15;letter-spacing:-.01em;margin-bottom:14px;
    /* Sits above the rocket art where the two slightly overlap. */
    position:relative;z-index:1;
  }
  .cta-monstro-text p{color:var(--muted);font-size:15px;max-width:400px;}

  /* Rocket monster visual above the CTA headline: starts on the calm/mono
     art (voa1) and crossfades to the fiery, engine-lit art (voa2) the
     moment someone clicks into any field of the contact form. The headline
     right below is pulled up slightly (negative margin) so it rests just
     over the bottom edge of the artwork. */
  .cta-rocket{
    position:relative;width:100%;max-width:286px;aspect-ratio:1/1;margin:0 0 -22px;
  }
  .cta-rocket-img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;
    transition:opacity .6s ease, transform .85s cubic-bezier(.5,-.05,.7,.25);
  }
  .cta-rocket-on{opacity:0;}
  .cta-rocket.ignited .cta-rocket-off{opacity:0;}
  .cta-rocket.ignited .cta-rocket-on{opacity:1;}

  /* Launch: on submit, the rocket art rockets off toward the top-right
     corner and fades out, while the "sent" message fades in over the
     same spot it just vacated. */
  .cta-rocket.launching .cta-rocket-img,
  .cta-rocket.launched .cta-rocket-img{
    transform:translate(160%,-140%) rotate(28deg) scale(.5);
    opacity:0;
  }
  .cta-rocket-msg{
    position:absolute;inset:0;display:flex;align-items:center;
    font-family:var(--font-head);font-weight:700;color:var(--white);
    font-size:clamp(17px,1.7vw,20px);line-height:1.3;
    opacity:0;transform:translateY(12px);pointer-events:none;
    transition:opacity .6s ease .35s, transform .6s ease .35s;
  }
  .cta-rocket.launching .cta-rocket-msg,
  .cta-rocket.launched .cta-rocket-msg{opacity:1;transform:translateY(0);}

  /* Contact form inside the CTA */
  .cta-form{
    background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
    padding:30px;display:flex;flex-direction:column;gap:16px;
  }
  .form-field{display:flex;flex-direction:column;gap:6px;}
  .form-field label{font-size:12px;color:var(--muted);}
  .form-field input{
    width:100%;background:#0a0a0a;border:1px solid #232321;border-radius:10px;
    padding:12px 14px;color:var(--white);font-family:var(--font-body);font-size:14px;
    transition:border-color .2s ease;
  }
  .form-field input:focus{outline:none;border-color:#5a5a57;}
  .cta-form .btn{width:fit-content;margin-top:4px;}
  .cta-form .form-note{font-size:12px;color:var(--muted-dim);line-height:1.5;margin:0;}
  .cta-form button[disabled]{opacity:.7;cursor:default;transform:none;}

  /* Honeypot: kept in the DOM and reachable by scrapers, but invisible and
     unreachable by real visitors (off-screen, not display:none/visibility). */
  .hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

  .form-status{
    font-size:13px;font-weight:600;padding:12px 14px;border-radius:10px;margin:0;
  }
  .form-status.success{color:#bdf7c8;background:rgba(80,220,120,.1);border:1px solid rgba(80,220,120,.25);}
  .form-status.error{color:#ffc4c4;background:rgba(255,90,90,.08);border:1px solid rgba(255,90,90,.25);}

  /* ---------- TESTIMONIALS ---------- */
  .testimonials{padding:0 0 120px;}
  .testimonials .head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px;}
  .carousel-controls{display:flex;gap:10px;}
  .carousel-controls button{
    width:38px;height:38px;border-radius:50%;border:1px solid #2c2c2a;background:transparent;
    display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--white);
    transition:border-color .2s ease, background .2s ease;
  }
  .carousel-controls button:hover{border-color:var(--white);background:#151515;}
  .carousel-controls button:disabled{opacity:.35;cursor:default;}
  .carousel-controls button:disabled:hover{border-color:#2c2c2a;background:transparent;}
  /* Sliding carousel: the track shows a fixed number of cards at a time
     (3 on desktop, 1 on mobile) and translateX's to reveal the rest as
     the person clicks the prev/next arrows — extra testimonials slide in
     from the side instead of wrapping to a new row. */
  .testimonials .carousel-viewport{overflow:hidden;}
  .testi-track{display:flex;gap:18px;transition:transform .45s ease;}
  .testi-card{
    flex:0 0 calc((100% - 36px)/3);min-width:0;
    background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
    padding:28px 26px;display:flex;flex-direction:column;gap:22px;
  }
  .testi-card .quote-mark{font-family:var(--font-head);font-size:34px;color:#3a3a38;line-height:1;}
  .testi-card p.quote{font-size:14px;color:#d8d8d5;line-height:1.6;}
  .testi-person{display:flex;align-items:center;gap:12px;margin-top:auto;}
  .avatar{
    width:42px;height:42px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-head);font-weight:700;font-size:13px;color:#060606;
    background:linear-gradient(135deg,#f5f5f3,#b9b9b5);
  }
  /* Real testimonial photo instead of initials — same size/shape as .avatar. */
  .avatar-photo{
    width:42px;height:42px;border-radius:50%;flex-shrink:0;
    object-fit:cover;display:block;
  }
  .testi-person .who .n{font-size:13.5px;font-weight:600;}
  .testi-person .who .r{font-size:12px;color:var(--muted);}

  /* ---------- CASES ---------- */
  .cases{padding:0 0 100px;}
  .cases .eyebrow{margin-bottom:34px;}
  .case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px;}
  .case-card{
    border-radius:var(--radius);overflow:hidden;position:relative;aspect-ratio:3/3.6;
    border:1px solid var(--card-border);
    display:flex;flex-direction:column;justify-content:flex-end;
  }
  .case-card .case-bg{
    position:absolute;inset:0;
  }
  .case-card::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.88) 10%, rgba(0,0,0,.15) 60%, transparent 100%);
    z-index:1;
  }
  .case-card .case-content{position:relative;z-index:2;padding:20px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;}
  .case-card h4{font-family:var(--font-head);font-size:15px;font-weight:600;margin-bottom:5px;}
  .case-card p{font-size:11.5px;color:var(--muted);}
  .case-card .service-arrow{flex-shrink:0;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);}
  .case-card:hover .service-arrow{background:var(--white);}
  .case-card:hover .service-arrow svg{stroke:#060606;}
  .case1 .case-bg{background:radial-gradient(circle at 30% 20%, #3a3a38, #0a0a0a 70%);}
  .case2 .case-bg{background:radial-gradient(circle at 70% 20%, #2c2c2a, #050505 70%);}
  .case3 .case-bg{background:radial-gradient(circle at 40% 70%, #333, #050505 70%);}
  .case4 .case-bg{background:radial-gradient(circle at 60% 30%, #2a2a28, #050505 70%);}
  .cases-more{display:flex;justify-content:center;}
  .cases-more .btn-outline{width:100%;max-width:100%;justify-content:center;}

  /* ---------- CASE DETAIL PAGE (case.php) ---------- */
  .case-detail{padding:150px 0 90px;}
  .case-back{
    display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
    margin-bottom:30px;transition:color .2s ease;
  }
  .case-back:hover{color:var(--white);}
  .case-hero{
    position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--card-border);
    min-height:280px;display:flex;align-items:flex-end;margin-bottom:36px;
  }
  .case-hero .case-bg{position:absolute;inset:0;}
  .case-hero::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.9) 15%, rgba(0,0,0,.25) 65%, transparent 100%);
    z-index:1;
  }
  .case-hero-content{position:relative;z-index:2;padding:34px;}
  .case-hero-content h1{font-family:var(--font-head);font-size:clamp(26px,4vw,42px);font-weight:700;margin:10px 0 10px;line-height:1.1;}
  .case-client{font-size:13.5px;color:var(--muted);}
  .case-summary{font-size:16px;color:#d8d8d5;line-height:1.7;max-width:760px;margin-bottom:44px;}
  .case-blocks{display:flex;flex-direction:column;gap:34px;margin-bottom:50px;}
  .case-block-text h3{font-family:var(--font-head);font-size:18px;font-weight:600;margin-bottom:12px;}
  .case-block-text p{font-size:14.5px;color:#d8d8d5;line-height:1.75;max-width:760px;white-space:pre-line;}
  .case-block-image img{border-radius:var(--radius);border:1px solid var(--card-border);width:100%;}
  .case-block-image figcaption{margin-top:10px;font-size:12px;color:var(--muted);}
  .case-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
  .case-gallery img{border-radius:var(--radius);border:1px solid var(--card-border);aspect-ratio:4/3;object-fit:cover;width:100%;}
  .case-video{border-radius:var(--radius);overflow:hidden;border:1px solid var(--card-border);aspect-ratio:16/9;background:#000;}
  .case-video video, .case-video iframe{width:100%;height:100%;display:block;border:0;object-fit:cover;}
  .case-testimonial{
    background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
    padding:30px 28px;display:flex;flex-direction:column;gap:20px;margin-bottom:50px;max-width:640px;
  }
  .case-testimonial .quote-mark{font-family:var(--font-head);font-size:34px;color:#3a3a38;line-height:1;}
  .case-testimonial .quote{font-size:14px;color:#d8d8d5;line-height:1.6;}
  .case-cta{
    border-top:1px solid #1b1b19;padding-top:40px;margin-bottom:40px;
    display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  }
  .case-cta h3{font-family:var(--font-head);font-size:19px;font-weight:600;max-width:420px;}
  .case-nav{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #1b1b19;padding-top:26px;flex-wrap:wrap;}
  .case-nav-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);transition:color .2s ease;}
  .case-nav-link:hover{color:var(--white);}

  /* ---------- FOOTER ---------- */
  footer{border-top:1px solid #1b1b19;padding:56px 0 34px;}
  footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;}
  .footer-brand{display:flex;align-items:center;gap:12px;max-width:340px;}
  .footer-brand img{width:34px;height:34px;flex-shrink:0;}
  .footer-brand p{font-size:12.5px;color:var(--muted);margin-top:4px;}
  .footer-social{display:flex;flex-direction:column;gap:12px;align-items:flex-end;}
  .footer-social .label{font-size:12px;color:var(--muted);}
  .footer-social .icons{display:flex;gap:10px;}
  .footer-social .icons a{
    width:34px;height:34px;border-radius:50%;border:1px solid #232321;
    display:flex;align-items:center;justify-content:center;transition:border-color .2s ease, transform .2s ease;
  }
  .footer-social .icons a:hover{border-color:var(--white);transform:translateY(-2px);}
  .footer-bottom{
    max-width:var(--max);margin:40px auto 0;padding:22px 32px 0;
    border-top:1px solid #1b1b19;display:flex;justify-content:space-between;align-items:center;
    font-size:12px;color:var(--muted-dim);
  }
  .to-top{
    width:38px;height:38px;border-radius:50%;border:1px solid #232321;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:border-color .2s ease, transform .2s ease;
  }
  .to-top:hover{border-color:var(--white);transform:translateY(-3px);}

  /* Small devotion note tucked in the footer's bottom-right corner. */
  .footer-bottom-right{display:flex;align-items:center;gap:18px;}
  .footer-devotion{
    display:flex;align-items:center;gap:7px;
    color:var(--muted-dim);font-size:11px;font-style:italic;white-space:nowrap;
  }
  .footer-devotion img{width:15px;height:auto;opacity:.55;flex-shrink:0;}

  /* ---------- REVEAL ANIM ---------- */
  .reveal{
    opacity:0;transform:translateY(38px) scale(.98);
    transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  }
  .reveal.in{opacity:1;transform:translateY(0) scale(1);}

  /* Individually-revealed text lines (eyebrow/heading/paragraph/link/button),
     used where a section's texts should cascade in one after another rather
     than move as a single glued block. */
  .reveal-line{
    opacity:0;transform:translateY(30px);
    transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
  }
  .reveal-line.in{opacity:1;transform:translateY(0);}

  /* Headlines get the biggest, most impactful entrance on the page */
  .reveal-line-headline{
    transform:translateY(58px) scale(1.035);
    transition-duration:.95s;
  }
  .reveal-line-headline.in{transform:translateY(0) scale(1);}

  .hero-copy > h1{transform:translateY(50px) scale(1.03);}
  .hero-copy.in > h1{transform:translateY(0) scale(1);}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 1024px){
    .service-grid{grid-template-columns:repeat(3,1fr);}
    .case-grid{grid-template-columns:repeat(2,1fr);}
    .about .wrap{grid-template-columns:1fr 1.2fr;}
    .about-features{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:20px;}
    .about-feature{flex:1 1 240px;}
  }
  @media (max-width: 860px){
    nav.main-nav{
      position:fixed;top:0;right:0;height:100vh;width:78%;max-width:320px;
      background:#0a0a0a;border-left:1px solid #1e1e1c;
      flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;padding:40px;
      transform:translateX(100%);transition:transform .35s ease;
    }
    nav.main-nav.open{transform:translateX(0);}
    nav.main-nav a{font-size:16px;}
    .nav-toggle{display:flex;}
    .hero{padding-top:130px;}
    .hero .wrap{grid-template-columns:1fr;}
    .hero-visual{height:320px;order:-1;}
    .hero-cta{margin-bottom:20px;}
    .about .wrap{grid-template-columns:1fr;}
    .about-visual{max-width:280px;margin:0 auto;}
    .cta-monstro .cta-inner{grid-template-columns:1fr;text-align:left;}
    .service-grid{grid-template-columns:repeat(2,1fr);}
    .testi-card{flex-basis:100%;}
    .case-grid{grid-template-columns:1fr 1fr;}
    footer .wrap{flex-direction:column;}
    .footer-social{align-items:flex-start;}
    .case-detail{padding-top:120px;}
    .case-gallery{grid-template-columns:1fr;}
    .case-cta{flex-direction:column;align-items:flex-start;}
  }
  @media (max-width: 520px){
    .wrap{padding:0 20px;}
    .service-grid{grid-template-columns:1fr 1fr;}
    .case-grid{grid-template-columns:1fr;}
    .clients .wrap{gap:20px;}
    .footer-bottom{flex-direction:column;gap:14px;text-align:center;}
    .footer-bottom-right{flex-direction:column;gap:12px;}
    .footer-devotion{white-space:normal;justify-content:center;}
  }

  /* ---------- ENTRANCE / STAGGER / PARALLAX ---------- */
  .hero-copy > *{
    opacity:0;transform:translateY(26px);
    transition:opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);
  }
  .hero-copy.in > *{opacity:1;transform:translateY(0);}
  .hero-copy > *:nth-child(1){transition-delay:.05s;}
  .hero-copy > *:nth-child(2){transition-delay:.18s;}
  .hero-copy > *:nth-child(3){transition-delay:.30s;}
  .hero-copy > *:nth-child(4){transition-delay:.42s;}

  .hero-visual{
    opacity:0;transform:translateY(18px) scale(.97);
    transition:opacity 1s cubic-bezier(.16,.8,.24,1) .12s, transform 1s cubic-bezier(.16,.8,.24,1) .12s;
  }
  .hero-visual.in{opacity:1;transform:translateY(0) scale(1);}

  [data-parallax]{will-change:transform;}

  /* Staggered reveal for grids so cards cascade in rather than pop together */
  .service-grid .service-card:nth-child(1){transition-delay:.02s;}
  .service-grid .service-card:nth-child(2){transition-delay:.09s;}
  .service-grid .service-card:nth-child(3){transition-delay:.16s;}
  .service-grid .service-card:nth-child(4){transition-delay:.23s;}
  .service-grid .service-card:nth-child(5){transition-delay:.30s;}
  .service-grid .service-card:nth-child(6){transition-delay:.37s;}

  .testi-track .testi-card:nth-child(1){transition-delay:.02s;}
  .testi-track .testi-card:nth-child(2){transition-delay:.12s;}
  .testi-track .testi-card:nth-child(3){transition-delay:.22s;}

  .case-grid .case-card:nth-child(1){transition-delay:.02s;}
  .case-grid .case-card:nth-child(2){transition-delay:.1s;}
  .case-grid .case-card:nth-child(3){transition-delay:.18s;}
  .case-grid .case-card:nth-child(4){transition-delay:.26s;}

  .about-features .about-feature:nth-child(1){transition-delay:.02s;}
  .about-features .about-feature:nth-child(2){transition-delay:.1s;}
  .about-features .about-feature:nth-child(3){transition-delay:.18s;}

  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-line, .hero-copy > *, .hero-visual{
      transition:none !important; opacity:1 !important; transform:none !important;
    }
    [data-parallax]{transform:none !important;}
    .cta-rocket-img{transition:opacity .3s ease !important; transform:none !important;}
    .cta-rocket-msg{transition:opacity .3s ease !important; transform:none !important;}
    .testi-track{transition:none !important;}
  }

  /* Stagger the individual text lines within each text block so headline,
     paragraph and button/link cascade in one after another. */
  .about-main > .reveal-line:nth-of-type(1){transition-delay:.03s;}
  .about-main > .reveal-line:nth-of-type(2){transition-delay:.14s;}
  .about-main > .reveal-line:nth-of-type(3){transition-delay:.26s;}
  .about-main > .reveal-line:nth-of-type(4){transition-delay:.38s;}

  .cta-monstro-text > .reveal-line:nth-of-type(1){transition-delay:.03s;}
  .cta-monstro-text > .reveal-line:nth-of-type(2){transition-delay:.14s;}
  .cta-monstro-text > .reveal-line:nth-of-type(3){transition-delay:.25s;}
  .cta-form.reveal-line{transition-delay:.18s;}