/* ============================================================
   IMPROVING · Landing Page Premium
   Cinematic dark — purple brand — orange CTA
   ============================================================ */

:root{
  /* Brand palette */
  --c-primary:   #6a13e8;
  --c-primary-2: #391277;
  --c-primary-3: #c39afc;
  --c-light:     #e4e7ee;
  --c-bg:        #09011c;
  --c-bg-2:      #0f0327;
  --c-bg-3:      #160740;
  --c-cta:       #D85A30;
  --c-cta-2:     #f07a4c;

  /* Tints */
  --c-line:      rgba(228,231,238,.10);
  --c-line-2:    rgba(228,231,238,.18);
  --c-muted:     rgba(228,231,238,.62);
  --c-glass:     rgba(20,8,45,.55);

  /* Sizing */
  --container: 1200px;
  --radius-lg: 22px;
  --radius:    14px;
  --radius-sm: 10px;

  /* Easing */
  --ease-cine: cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* scroll-behavior handled by Lenis (smooth scroll); keep auto so they don't fight. */
html{scroll-behavior:auto; -webkit-text-size-adjust:100%;}
body{
  font-family:'Inter','Neue Montreal','Satoshi',system-ui,-apple-system,sans-serif;
  background:var(--c-bg);
  color:var(--c-light);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip (not hidden) so it doesn't create a scroll container —
     hidden would break position:sticky used by the .sec-2 wall. */
  overflow-x:clip;
  line-height:1.55;
  font-weight:400;
}
body.locked{ overflow:hidden; }

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit;}
input,textarea,select{font:inherit; color:inherit;}

/* Global texture overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 .35 0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity:.06;
  pointer-events:none;
  z-index:9000;
  mix-blend-mode:overlay;
}

.container{
  width:min(var(--container), 92vw);
  margin:0 auto;
}

/* ───────── Typography ───────── */
h1,h2,h3,h4{ margin:0; letter-spacing:-0.02em; line-height:1.05; font-weight:800; }
h2{ font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing:-0.025em; }
h3{ font-size: 1.15rem; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0; }

.h2{ font-weight:800; line-height:1.06; }
.sub{ color:var(--c-muted); font-size: clamp(1rem, 1.1vw, 1.075rem); max-width:60ch; }

.grad{
  background:linear-gradient(100deg, #c39afc 0%, #6a13e8 45%, #c39afc 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:200% 100%;
  animation: gradShift 6s linear infinite;
}
@keyframes gradShift{ to{ background-position:200% 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600;
  color: rgba(228,231,238,.78);
  padding:.45rem .85rem;
  border:1px solid var(--c-line);
  border-radius:999px;
  background: rgba(106,19,232,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pulse{
  width:7px; height:7px; border-radius:50%;
  background: var(--c-primary-3);
  box-shadow: 0 0 0 0 rgba(195,154,252,.7);
  animation: pulse 2.1s var(--ease-cine) infinite;
}
@keyframes pulse{
  0%  { box-shadow: 0 0 0 0 rgba(195,154,252,.55); }
  70% { box-shadow: 0 0 0 10px rgba(195,154,252,0); }
  100%{ box-shadow: 0 0 0 0 rgba(195,154,252,0); }
}

/* ───────── Reveal ───────── */
.reveal{ opacity:0; transform: translateY(28px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal-mask .line{
  display:block;
  overflow:hidden;
  line-height:1.02;
}
.reveal-mask .line > *{ display:inline-block; }
.reveal-mask em{ font-style:normal; color:var(--c-primary-3); }

/* Mobile: unify hero title reveal with the other .reveal elements
   so eyebrow + title + sub + CTA + marks all fade in together. */
@media (max-width: 1023.98px){
  .reveal-mask{ opacity:0; transform: translateY(28px); }
  .reveal-mask.is-in{
    opacity:1; transform:none;
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  }
}

/* ───────── Buttons ───────── */
.btn{
  --bg: var(--c-cta);
  --bg2: var(--c-cta-2);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .85rem 1.25rem;
  border-radius: 999px;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:-.005em;
  color:#fff;
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  box-shadow:
    0 10px 30px -10px rgba(216,90,48,.55),
    inset 0 1px 0 rgba(255,255,255,.25),
    0 0 0 1px rgba(255,255,255,.08);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), filter .25s var(--ease-out);
  overflow:hidden;
  isolation:isolate;
  will-change: transform;
}
.btn::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.5) 40%, transparent 80%);
  transform: translateX(-130%);
  transition: transform .9s var(--ease-cine);
  z-index:1;
  pointer-events:none;
}
.btn:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 50px -10px rgba(216,90,48,.7),
    inset 0 1px 0 rgba(255,255,255,.35),
    0 0 0 1px rgba(255,255,255,.12);
  filter: saturate(1.1);
}
.btn:hover::before{ transform:translateX(130%); }
.btn:active{ transform: translateY(0) scale(.99); }
.btn > *{ position:relative; z-index:2; }

.btn--lg{ padding: 1.05rem 1.55rem; font-size:1rem; }
.btn--block{ width:100%; }
.btn--ghost{
  background: rgba(228,231,238,.04);
  box-shadow: inset 0 0 0 1px var(--c-line-2);
  color: var(--c-light);
}
.btn--ghost:hover{
  background: rgba(228,231,238,.07);
  box-shadow: inset 0 0 0 1px var(--c-line-2), 0 10px 30px -10px rgba(106,19,232,.5);
  filter:none;
}

/* ───────── Scroll Progress ───────── */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background: linear-gradient(90deg, var(--c-primary-3), var(--c-primary), var(--c-primary-3));
  z-index:9999;
  box-shadow: 0 0 14px rgba(106,19,232,.7);
  transition: width .08s linear;
}

/* ───────── Spotlight cursor ───────── */
.spotlight{
  position:fixed;
  width:520px; height:520px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(106,19,232,.22), rgba(106,19,232,0) 60%);
  pointer-events:none;
  z-index:1;
  mix-blend-mode:screen;
  transform: translate(-50%,-50%);
  filter: blur(20px);
  transition: opacity .4s;
  opacity:0;
}
@media (hover:hover){ .spotlight{ opacity:1; } }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  /* env(safe-area-inset-top) pushes the bar below the notch / status bar on
     real phones (iPhone notch/Dynamic Island, Android punch-hole). It is 0 on
     devices without a notch, so desktop/most phones are unaffected. */
  padding: calc(18px + env(safe-area-inset-top, 0px)) 0 18px;
  transition: padding .4s var(--ease-out), background .4s, backdrop-filter .4s;
}
.nav.scrolled{
  padding: 10px 0;
  background: rgba(9,1,28,.7);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom:1px solid var(--c-line);
}
.nav__inner{
  width:min(var(--container), 92vw);
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
}
.nav__logo{ display:flex; align-items:center; flex:0 0 auto; line-height:0; }
/* display:block + line-height:0 kill the inline-image baseline gap that pushed
   the wordmark up out of its box (clipped the logo's top on mobile). */
.nav__logo img{ display:block; height:24px; max-height:24px; width:auto; vertical-align:middle; }
.nav__links{
  display:flex; align-items:center; gap:1.6rem;
  margin-left:auto;
}
.nav__links a{
  font-size:.93rem;
  color:rgba(228,231,238,.75);
  font-weight:500;
  position:relative;
  transition: color .25s;
}
.nav__links a:hover{ color:#fff; }
.nav__links a::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  height:2px; width:0;
  background: linear-gradient(90deg, var(--c-primary-3), var(--c-primary));
  transition: width .3s var(--ease-out);
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{ padding:.7rem 1.1rem; font-size:.88rem; }
.nav__burger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav__burger span{ width:22px; height:2px; background:#fff; border-radius:2px; transition: transform .3s, opacity .3s; }
.nav__burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  .nav__links{
    position:fixed; top:60px; left:0; right:0;
    background: rgba(9,1,28,.95);
    backdrop-filter: blur(20px);
    flex-direction:column;
    padding: 2rem;
    border-bottom: 1px solid var(--c-line);
    /* Hidden state must clear the viewport completely. The panel sits at
       top:60px, so -110% alone leaves its bottom ~30px on-screen (it was
       covering the logo — looked like a "cut" logo). Subtract the 60px top
       offset + margin so the whole panel parks above the fold. */
    transform: translateY(calc(-100% - 80px));
    transition: transform .45s var(--ease-cine);
  }
  .nav__links.is-open{ transform: translateY(0); }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
}

/* ============================================================
   PRELOADER · CLAPPERBOARD
   ============================================================ */
.preloader{
  position:fixed; inset:0;
  background: #000;
  z-index: 10000;
  display:flex; align-items:center; justify-content:center;
  perspective: 1200px;
  overflow:hidden;
  /* iris reveal — growing transparent hole at center */
  --hole: 0%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent var(--hole), #000 calc(var(--hole) + .5%));
          mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent var(--hole), #000 calc(var(--hole) + .5%));
  will-change: mask-image, -webkit-mask-image;
}
.preloader.is-done{ pointer-events:none; }
.preloader__flash{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, rgba(255,255,255,0) 60%);
  opacity:0;
  z-index:5;
  pointer-events:none;
}
.preloader__dust{
  position:absolute; inset:-10%;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(2px 2px at 50% 80%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 25%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(2px 2px at 30% 70%, rgba(255,255,255,.35), transparent 60%);
  opacity:.7;
  animation: dust 6s linear infinite;
  pointer-events:none;
}
@keyframes dust{
  0% { transform: translateY(0); }
  100% { transform: translateY(-40px); }
}

.clapper{
  position:relative;
  width: min(440px, 84vw);
  transform-style: preserve-3d;
  filter: drop-shadow(0 30px 60px rgba(106,19,232,.25));
  will-change: transform, filter;
}
.clapper__body{
  position:relative;
  transform-style: preserve-3d;
}
.clapper__top{
  position:relative;
  height: 64px;
  background: #0e0e10;
  border-radius: 10px 10px 4px 4px;
  border:1px solid rgba(255,255,255,.06);
  transform-origin: 6% 100%;
  transform: rotate(-22deg);
  z-index:3;
  box-shadow:
    inset 0 -10px 20px rgba(0,0,0,.5),
    0 8px 20px rgba(0,0,0,.5);
}
.clapper__stripes{
  position:absolute; inset:6px;
  display:flex; gap:0;
  overflow:hidden;
  border-radius: 4px;
}
.clapper__stripes span{
  flex:1;
  background:#fff;
  transform: skewX(-22deg);
}
.clapper__stripes span:nth-child(even){ background:#0e0e10; }

.clapper__board{
  position:relative;
  background: linear-gradient(180deg, #161618, #0c0c0e);
  border:1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 28px 26px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 30px 60px rgba(0,0,0,.5);
}
.clapper__row{
  display:flex; align-items:center; gap:14px;
  margin-bottom: 12px;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  font-weight:600;
}
.clapper__line{
  flex:1; height:1px; background: rgba(255,255,255,.15);
}
.clapper__label{ white-space:nowrap; }
.clapper__logo{
  margin-top: 12px;
  padding-top: 16px;
  border-top:1px dashed rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
}
.clapper__logo img{ height: 20px; opacity:.92; }

.preloader__meta{
  position:absolute;
  left:50%; bottom: 8%;
  transform: translateX(-50%);
  display:flex; align-items:center; gap:1.5rem;
  font-size:.72rem;
  letter-spacing: .3em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  font-weight:500;
}
.preloader__progress{ display:inline-flex; align-items:baseline; gap:.15rem; font-variant-numeric: tabular-nums; }
.preloader__progress i{ font-style:normal; color:#fff; font-size:1rem; letter-spacing:0; font-weight:600; }
.preloader__caption{ position:relative; }
.preloader__caption::before{
  content:"";
  position:absolute; left:-22px; top:50%;
  width:12px; height:1px; background: rgba(255,255,255,.4);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height: 100vh;
  padding: 140px 0 80px;
  /* overflow:hidden removed — was breaking ScrollTrigger pin.
     .hero__bg already clips the auroras with its own overflow:hidden. */
  isolation:isolate;
  background: var(--c-bg);
  /* z-index:10 keeps the hero (and its fixed-photo-covering background) above
     the wall's fixed photo layer. The video card lives inside the hero, so it
     can't be covered by the Stats section via z-index — instead the card
     shrinks + fades away in place after locking (see heroAnuncioScroll), so it
     never lingers on top of the next section. */
  z-index: 10;
}
.hero__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.aurora{
  position:absolute; border-radius:50%;
  filter: blur(80px);
  opacity:.55;
  will-change: transform;
}
.aurora--1{ width:680px; height:680px; left:-160px; top:-180px;
  background: radial-gradient(circle, rgba(106,19,232,.7), rgba(106,19,232,0) 60%);
  animation: floatA 22s var(--ease-cine) infinite alternate;
}
.aurora--2{ width:560px; height:560px; right:-140px; top:120px;
  background: radial-gradient(circle, rgba(57,18,119,.7), rgba(57,18,119,0) 60%);
  animation: floatB 26s var(--ease-cine) infinite alternate;
}
.aurora--3{ width:480px; height:480px; left:30%; bottom:-180px;
  background: radial-gradient(circle, rgba(195,154,252,.35), rgba(195,154,252,0) 60%);
  animation: floatC 30s var(--ease-cine) infinite alternate;
}
@keyframes floatA{ 0%{ transform: translate(0,0); } 100%{ transform: translate(80px,40px) scale(1.1); } }
@keyframes floatB{ 0%{ transform: translate(0,0); } 100%{ transform: translate(-80px,60px) scale(1.05); } }
@keyframes floatC{ 0%{ transform: translate(0,0); } 100%{ transform: translate(60px,-60px) scale(1.1); } }

.grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  opacity:.7;
}
.noise{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:.05;
  mix-blend-mode: overlay;
}

.hero__inner{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 5rem;
  align-items:center;
  min-height: calc(100vh - 220px);
}

.hero__title{
  font-size: clamp(2.6rem, 6.3vw, 5.6rem);
  letter-spacing: -0.035em;
  margin-bottom: 1.5rem;
  font-weight:800;
}
.hero__title em{ font-style:normal; color:var(--c-primary-3); }
.hero__sub{ color: rgba(228,231,238,.78); font-size: 1.075rem; max-width: 540px; margin-bottom: 2rem; }
.hero__sub strong{ color:#fff; font-weight:600; }
.hero__cta{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; margin-bottom: 2.4rem; }
.hero__hint{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.85rem; color:var(--c-muted);
}
.hero__hint svg{ color: var(--c-primary-3); }

.hero__marks{ font-size:.8rem; color:rgba(228,231,238,.45); display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.hero__marks-list{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.hero__marks-list em{ font-style:normal; color:rgba(228,231,238,.7); font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:.78rem; }

/* Hero composition right side */
.hero__right{ position:relative; min-height: 520px; }
.comp{
  position:relative;
  width:100%; height:100%;
  min-height: 520px;
}
.comp__glow{
  position:absolute;
  width:480px; height:480px;
  right:-80px; top:-40px;
  background: radial-gradient(circle, rgba(106,19,232,.4), transparent 60%);
  filter: blur(60px);
  z-index:-1;
}
.comp__card{
  position:absolute;
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: var(--c-glass);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .8s var(--ease-out);
  will-change: transform;
}
.comp__card--main{
  top: 18%; left: 10%;
  width: 80%;
  aspect-ratio: 16 / 9;     /* native YouTube aspect — peak zoom fits perfectly */
  z-index: 1;                /* sits BEHIND the small cards at rest */
  animation: floatMain 8s var(--ease-cine) infinite alternate;
}
.comp__card--sm{ width: 38%; aspect-ratio: 9/13; z-index:3; }
.comp__card--a{ bottom: 0; left: -2%; transform: rotate(-3deg); animation: floatA2 9s var(--ease-cine) infinite alternate; }
.comp__card--b{ top: 10%; right: -4%; transform: rotate(4deg); animation: floatB2 10s var(--ease-cine) infinite alternate; z-index:4; }

@keyframes floatMain{ to{ transform: translateY(-10px); } }
@keyframes floatA2{ to{ transform: translateY(8px) rotate(-2deg); } }
@keyframes floatB2{ to{ transform: translateY(-12px) rotate(5deg); } }

.comp__media{
  position:relative;
  width:100%; height:100%;
  overflow:hidden;
  /* Promote to its own GPU layer so the raster cover (poster--1) is rasterized
     once and merely GPU-scaled while the card grows on scroll — without this the
     JPEG repaints every frame and the hero scroll animation janks. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.comp__poster{
  position:absolute; inset:0;
  background-size: cover; background-position:center;
}
.comp__poster--1{
  /* Cover = a real frame from the hero video (YouTube maxresdefault). A soft
     dark gradient over the top/bottom keeps the chip + timecode + play button
     legible; the linear-gradient stays as a fallback if the image fails. */
  background:
    linear-gradient(180deg, rgba(9,1,28,.35) 0%, rgba(9,1,28,0) 30%, rgba(9,1,28,0) 65%, rgba(9,1,28,.5) 100%),
    url("images/scroll-imgs/video-cover.jpg") center / cover no-repeat,
    linear-gradient(135deg, #1c0a4d 0%, #390f78 40%, #6a13e8 100%);
}

/* YouTube iframe — cover-fit inside the card, no letterbox */
.comp__video{
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;
  min-width: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  z-index: 1;
}
/* Overlays above the video */
.comp__media > .play,
.comp__media > .comp__chip,
.comp__media > .comp__time,
.comp__media > .comp__unmute{
  z-index: 2;
}

/* Orange "Clique para ouvir" card — visible while video autoplays muted */
.comp__unmute{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1rem 1.6rem 1.05rem;
  min-width: 220px;
  border-radius: 14px;
  background: var(--c-cta);
  color: #fff;
  font-weight: 600;
  letter-spacing: -.005em;
  text-align: center;
  cursor: pointer;
  z-index: 6;
  box-shadow:
    0 18px 50px -12px rgba(216,90,48,.55),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 1px 0 rgba(255,255,255,.25) inset;
  transition:
    transform .35s var(--ease-out),
    box-shadow .35s var(--ease-out),
    opacity .35s var(--ease-out),
    filter .25s var(--ease-out);
}
.comp__unmute:hover{
  transform: translate(-50%, -50%) scale(1.035);
  box-shadow:
    0 22px 60px -10px rgba(216,90,48,.7),
    0 0 0 1px rgba(255,255,255,.2) inset,
    0 1px 0 rgba(255,255,255,.35) inset;
  filter: saturate(1.05);
}
.comp__unmute:active{ transform: translate(-50%, -50%) scale(.99); }
.comp__unmute-top,
.comp__unmute-bot{ font-size: .95rem; line-height: 1.2; }
.comp__unmute-icon{
  display: inline-flex;
  color: #fff;
  margin: .1rem 0 .15rem;
}
.comp__unmute.is-off{
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.92);
}
@media (max-width: 640px){
  .comp__unmute{ min-width: 0; padding: .85rem 1.2rem; }
  .comp__unmute-top, .comp__unmute-bot{ font-size: .85rem; }
  .comp__unmute-icon svg{ width: 34px; height: 34px; }
}
.comp__poster--2{
  background:
    url("images/scroll-imgs/reel.jpg") center / cover no-repeat,
    linear-gradient(150deg, #0c0224 0%, #2c0a5b 60%, #57128f 100%);
}
.comp__poster--3{
  background:
    url("assets/BG-3.png") center / cover no-repeat,
    linear-gradient(135deg, #1e0c4b 0%, #6a13e8 70%, #c39afc 110%);
}

.play{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: 56px; height:56px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: transform .35s var(--ease-out), background .35s;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.play svg{ margin-left:3px; }
.play:hover{ transform: translate(-50%,-50%) scale(1.08); background: rgba(255,255,255,.2); }
.play--lg{ width: 68px; height: 68px; }
.play::before{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  animation: ringPulse 2.4s var(--ease-cine) infinite;
}
@keyframes ringPulse{
  0%   { transform: scale(.95); opacity:.7; }
  100% { transform: scale(1.35); opacity:0; }
}

.comp__chip{
  position:absolute; top: 14px; left:14px;
  display:inline-flex; align-items:center; gap:.4rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600;
  border:1px solid rgba(255,255,255,.12);
}
.comp__chip .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--c-cta);
  box-shadow: 0 0 0 0 rgba(216,90,48,.6);
  animation: pulse 1.8s infinite;
}
.comp__time{
  position:absolute; right: 14px; bottom: 14px;
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.55);
  padding:.3rem .55rem;
  border-radius: 6px;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.05em;
}
.comp__tag{
  position:absolute; left: 12px; top: 12px;
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  background: rgba(0,0,0,.55);
  padding:.3rem .55rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
}

.comp__pill{
  position:absolute;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem;
  font-size:.78rem;
  font-weight:600;
  background: rgba(15,3,39,.7);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
  z-index:5;
}
.comp__pill svg{ color: var(--c-primary-3); }
.comp__pill--top{ top: -10px; right: 10%; animation: floatPill 7s var(--ease-cine) infinite alternate; }
.comp__pill--bot{ bottom: -10px; left: 8%; animation: floatPill2 8s var(--ease-cine) infinite alternate; }
@keyframes floatPill{ to{ transform: translateY(-8px); } }
@keyframes floatPill2{ to{ transform: translateY(6px); } }
.comp__pill .ring{
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(135deg, var(--c-primary-3), var(--c-primary));
  box-shadow: 0 0 12px rgba(195,154,252,.7);
}

/* Hero scroll cue */
.hero__scroll{
  position:absolute;
  bottom: 32px; left:50%;
  transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.7rem; letter-spacing:.3em; color: rgba(228,231,238,.5);
}
.hero__scroll span{
  width:1px; height:36px;
  background: linear-gradient(to bottom, transparent, var(--c-primary-3));
  position:relative;
}
.hero__scroll span::after{
  content:"";
  position:absolute; top:0; left:50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius:50%;
  background: var(--c-primary-3);
  animation: scrollCue 1.8s var(--ease-cine) infinite;
}
@keyframes scrollCue{
  0%   { top:0; opacity:1; }
  80%  { top:32px; opacity:0; }
  100% { top:32px; opacity:0; }
}

/* ============================================================
   STATS
   ============================================================ */
.stats{ padding: 100px 0; position:relative; }
.stats__head{ text-align:center; margin-bottom: 3.5rem; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.stats__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.stat-card{
  position:relative;
  padding: 2.5rem 2rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(20,8,45,.7), rgba(15,3,39,.6));
  border: 1px solid var(--c-line);
  overflow:hidden;
  text-align:left;
  transition: transform .5s var(--ease-out), border-color .4s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stat-card:hover{ transform: translateY(-6px); border-color: rgba(195,154,252,.3); }
.stat-card__num{
  font-size: clamp(2.5rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height:1;
  margin-bottom: 1rem;
  background: linear-gradient(180deg, #fff 0%, #c39afc 100%);
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
/* Explicit color + text-fill: the parent uses background-clip:text/color:transparent,
   and the em's own opacity puts it on a separate layer where the parent's clipped
   gradient doesn't paint — without this the "dias"/"sistema" text renders invisible. */
.stat-card__num em{ font-style:normal; font-size:.45em; opacity:.85; margin-left:.3em; letter-spacing:0; font-weight:600; color:#c39afc; -webkit-text-fill-color:#c39afc; }
.stat-card p{ color: rgba(228,231,238,.72); }
.stat-card p strong{ color:#fff; font-weight:600; }
.stat-card__glow{
  position:absolute; right:-80px; top:-80px;
  width:240px; height:240px;
  background: radial-gradient(circle, rgba(106,19,232,.45), transparent 60%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity .5s;
}
.stat-card:hover .stat-card__glow{ opacity:1; }

.stats__cta{ display:flex; justify-content:center; margin-top: 3rem; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{ padding: 120px 0; position:relative; }
.gallery::before{
  content:"";
  position:absolute; left:50%; top:0;
  width:60%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line-2), transparent);
  transform: translateX(-50%);
}

.section-head{
  text-align:center;
  margin: 0 auto 3.5rem;
  max-width: 720px;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.section-head .sub{ margin: 0 auto; }

.gallery__grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.vcard{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  cursor:pointer;
}
.vcard__media{
  position:relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: #0a0214;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .9s var(--ease-out);
}
.vcard:hover .vcard__media{ transform: scale(1.015); }

.vcard__poster{ position:absolute; inset:0; transition: transform 1.2s var(--ease-cine); }
.vcard[data-poster="1"] .vcard__poster{
  background:
    radial-gradient(70% 60% at 25% 30%, rgba(195,154,252,.5), transparent 70%),
    radial-gradient(60% 70% at 80% 80%, rgba(216,90,48,.45), transparent 70%),
    linear-gradient(135deg, #150634 0%, #6a13e8 100%);
}
.vcard[data-poster="2"] .vcard__poster{
  background:
    radial-gradient(70% 60% at 60% 35%, rgba(195,154,252,.5), transparent 70%),
    radial-gradient(60% 70% at 20% 80%, rgba(57,18,119,.7), transparent 70%),
    linear-gradient(135deg, #0a0220 0%, #391277 60%, #6a13e8 100%);
}
.vcard[data-poster="3"] .vcard__poster{
  background:
    radial-gradient(80% 60% at 30% 40%, rgba(216,90,48,.45), transparent 70%),
    radial-gradient(60% 60% at 80% 70%, rgba(106,19,232,.55), transparent 70%),
    linear-gradient(150deg, #0c0226 0%, #4c1490 100%);
}
.vcard[data-poster="4"] .vcard__poster{
  background:
    radial-gradient(70% 60% at 60% 30%, rgba(195,154,252,.5), transparent 70%),
    radial-gradient(70% 60% at 30% 70%, rgba(216,90,48,.35), transparent 70%),
    linear-gradient(135deg, #0a0220 0%, #1b0540 50%, #6a13e8 100%);
}
.vcard:hover .vcard__poster{ transform: scale(1.08); }

.vcard__shade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(0,0,0,.65) 100%),
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.08), transparent 50%);
  pointer-events:none;
  transition: opacity .4s;
}

.vcard__meta{
  display:flex; align-items:baseline; justify-content:space-between;
  padding: 1rem .35rem .25rem;
}
.vcard__meta h3{ font-size: 1.05rem; }
.vcard__meta span{ font-size:.8rem; color: var(--c-muted); letter-spacing:.05em; }

.vcard .play{ opacity:.9; }

/* ── REELS · 3D ARC (auto-playing vertical Shorts, scroll-driven) ── */
.reels{
  position:relative;
  height: clamp(440px, 62vh, 640px);
  margin-top: 2rem;
  perspective: 1700px;
  overflow:hidden;                       /* clip the arc's far edges */
  /* fade the left/right edges so cards dissolve instead of hard-cutting */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.reels__stage{ position:absolute; inset:0; transform-style: preserve-3d; }
.reel{
  position:absolute; top:50%; left:50%;
  width: clamp(190px, 19vw, 250px);
  will-change: transform, opacity;
  transform: translate(-50%, -50%);      /* JS arc layout overrides per-frame */
}
.reel__media{
  position:relative;
  width:100%; aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: linear-gradient(150deg, #1c0a4d 0%, #390f78 55%, #6a13e8 115%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 40px 90px -25px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.reel__vid{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  pointer-events:none;                   /* showcase only */
}
.reels__hint{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top: 1.75rem;
  font-size:.8rem; letter-spacing:.04em;
  color: rgba(228,231,238,.5);
  pointer-events:none;
}
.reels__hint svg{ color: var(--c-primary-3); }
@media (max-width: 640px){
  .reels{ height: clamp(420px, 68vh, 560px); }
  .reel{ width: clamp(170px, 52vw, 230px); }
}

/* Formats row */
.formats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
  margin-bottom: 3rem;
}
.format{
  padding: 2rem 1.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(20,8,45,.6), rgba(15,3,39,.4));
  border: 1px solid var(--c-line);
  transition: transform .5s var(--ease-out), border-color .4s, background .4s;
  position:relative;
  overflow:hidden;
}
.format::after{
  content:"";
  position:absolute; left:0; top:0;
  width:100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-primary-3), transparent);
  transform: translateX(-100%);
  transition: transform .8s var(--ease-cine);
}
.format:hover{ transform: translateY(-6px); border-color: rgba(195,154,252,.3); }
.format:hover::after{ transform: translateX(100%); }
.format__icon{
  width: 46px; height:46px;
  border-radius: 12px;
  background: rgba(106,19,232,.15);
  border: 1px solid rgba(195,154,252,.25);
  color: var(--c-primary-3);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 1.25rem;
}
.format h3{ margin-bottom:.4rem; font-size: 1.15rem; }
.format p{ color: var(--c-muted); font-size:.95rem; }

.section-cta{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top: 1rem; }

/* ============================================================
   PROBLEMS
   ============================================================ */
.problems{ padding: 100px 0; position:relative; }
.problems__list{
  list-style:none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
  display:flex; flex-direction:column;
  gap: 1rem;
}
.problems__list li{
  display:flex; align-items:flex-start; gap: 1rem;
  padding: 1.4rem 1.5rem;
  background: linear-gradient(180deg, rgba(20,8,45,.55), rgba(15,3,39,.35));
  border: 1px solid var(--c-line);
  border-radius: 14px;
  font-size: 1.05rem;
  color: rgba(228,231,238,.85);
  transition: transform .5s var(--ease-out), border-color .4s;
}
.problems__list li:hover{ transform: translateX(6px); border-color: rgba(216,90,48,.35); }
.problems__list li strong{ color:#fff; font-weight:600; }
.x{
  width: 26px; height:26px; flex-shrink:0;
  border-radius:50%;
  background: rgba(216,90,48,.12);
  color: var(--c-cta-2);
  display:inline-flex; align-items:center; justify-content:center;
  font-size: .85rem; line-height:1;
  border:1px solid rgba(216,90,48,.3);
}
.v{
  width: 26px; height:26px; flex-shrink:0;
  border-radius:50%;
  background: rgba(195,154,252,.14);
  color: var(--c-primary-3);
  display:inline-flex; align-items:center; justify-content:center;
  font-size: .85rem; line-height:1;
  border:1px solid rgba(195,154,252,.3);
}

/* ============================================================
   SOLUTION
   ============================================================ */
.solution{ padding: 120px 0; position:relative; }
.solution__inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items:center;
}
.solution__left .h2{ margin: 1rem 0 1.25rem; }
.solution__left .sub{ margin-bottom: 1.25rem; }
.solution__left .sub strong{ color:#fff; font-weight:600; }
.solution__left .btn{ margin-top: 1.5rem; }

.compare{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.compare__col{
  padding: 1.75rem 1.5rem;
  border-radius: var(--radius-lg);
  background: rgba(15,3,39,.55);
  border: 1px solid var(--c-line);
  position:relative;
  overflow:hidden;
}
.compare__col ul{ list-style:none; margin: 1.25rem 0 0; padding: 0; display:flex; flex-direction:column; gap:.7rem; }
.compare__col li{
  display:flex; gap:.6rem; align-items:center;
  font-size:.95rem;
  color: rgba(228,231,238,.78);
}
.compare__col .x, .compare__col .v{ width: 22px; height: 22px; font-size:.75rem; }
.compare__tag{
  display:inline-block;
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform: uppercase;
  font-weight:600;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: rgba(228,231,238,.06);
  border: 1px solid var(--c-line);
}
.compare__tag--brand{
  background: linear-gradient(135deg, rgba(106,19,232,.25), rgba(195,154,252,.15));
  border-color: rgba(195,154,252,.4);
  color: #fff;
}
.compare__col--new{
  background: linear-gradient(180deg, rgba(106,19,232,.16), rgba(57,18,119,.18));
  border-color: rgba(195,154,252,.25);
}
.compare__glow{
  position:absolute; right:-60px; bottom:-60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(106,19,232,.45), transparent 60%);
  filter: blur(40px);
  pointer-events:none;
}

/* ============================================================
   DELIVER
   ============================================================ */
.deliver{ padding: 120px 0; position:relative; }
.deliver__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.deliver__grid .dcard:nth-child(4),
.deliver__grid .dcard:nth-child(5){ grid-column: span 1; }

.dcard{
  padding: 2rem 1.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(20,8,45,.6), rgba(15,3,39,.45));
  border: 1px solid var(--c-line);
  position:relative;
  overflow:hidden;
  transition: transform .5s var(--ease-out), border-color .4s;
}
.dcard:hover{ transform: translateY(-6px); border-color: rgba(195,154,252,.3); }
.dcard__icon{
  width: 50px; height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(106,19,232,.3), rgba(195,154,252,.1));
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(195,154,252,.25);
}
.dcard h3{ font-size: 1.1rem; margin-bottom:.4rem; }
.dcard p{ color: var(--c-muted); font-size:.95rem; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how{ padding: 100px 0; position:relative; }
.how__list{
  list-style:none;
  margin: 0 auto; padding: 0;
  max-width: 880px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  counter-reset: step;
}
.how__list li{
  display:flex; gap: 1.25rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(20,8,45,.6), rgba(15,3,39,.4));
  border: 1px solid var(--c-line);
  position:relative;
  overflow:hidden;
  transition: transform .5s var(--ease-out), border-color .4s;
}
.how__list li::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width: 2px;
  background: linear-gradient(180deg, var(--c-primary-3), var(--c-primary));
  opacity:.4;
}
.how__list li:hover{ transform: translateY(-4px); border-color: rgba(195,154,252,.3); }
.how__num{
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #c39afc);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing: -.02em;
  line-height:1;
}
.how__list h3{ margin-bottom: .4rem; font-size: 1.1rem; }
.how__list p{ color: var(--c-muted); font-size:.95rem; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{ padding: 120px 0; position:relative; }
.testi__track{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.testi{
  padding: 2.25rem 2rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(20,8,45,.65), rgba(15,3,39,.45));
  border: 1px solid var(--c-line);
  display:flex; flex-direction:column; justify-content:space-between; gap: 1.5rem;
  position:relative;
  overflow:hidden;
  min-height: 280px;
  transition: transform .5s var(--ease-out), border-color .4s;
}
.testi::before{
  content:"\201C";
  position:absolute; top: -20px; right: 20px;
  font-size: 7rem;
  font-family: serif;
  color: rgba(195,154,252,.12);
  line-height:1;
}
.testi:hover{ transform: translateY(-6px); border-color: rgba(195,154,252,.3); }
.testi__quote{
  font-size: 1.075rem;
  line-height: 1.5;
  color: rgba(255,255,255,.92);
  font-weight: 500;
  position:relative;
  z-index:2;
}
.testi__author{ display:flex; align-items:center; gap:.85rem; }
.testi__avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  font-size: 1rem;
  color:#fff;
  border: 1px solid rgba(255,255,255,.1);
}
.testi__author strong{ display:block; font-weight:600; }
.testi__author span{ font-size:.82rem; color: var(--c-muted); }

/* ============================================================
   FOR WHO
   ============================================================ */
.forwho{ padding: 100px 0; position:relative; }
.forwho__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 0 auto 2.5rem;
  max-width: 920px;
}
.fwcard{
  padding: 2.25rem 2rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(20,8,45,.55), rgba(15,3,39,.35));
  border: 1px solid var(--c-line);
  transition: transform .5s var(--ease-out), border-color .4s;
}
.fwcard h3{ font-size: 1.25rem; margin-bottom: 1.25rem; }
.fwcard ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.85rem; }
.fwcard li{ display:flex; gap:.7rem; align-items:center; font-size:1rem; color: rgba(228,231,238,.85); }
.fwcard--yes{ background: linear-gradient(180deg, rgba(106,19,232,.18), rgba(57,18,119,.18)); border-color: rgba(195,154,252,.25); }
.fwcard--no{ background: linear-gradient(180deg, rgba(216,90,48,.08), rgba(15,3,39,.4)); border-color: rgba(216,90,48,.2); }
.fwcard:hover{ transform: translateY(-6px); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ padding: 120px 0; position:relative; }
.faq__list{
  max-width: 820px;
  margin: 0 auto;
  display:flex; flex-direction:column; gap: .75rem;
}
.faq__item{
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,8,45,.55), rgba(15,3,39,.35));
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: border-color .4s, box-shadow .4s;
}
.faq__item[open]{
  border-color: rgba(195,154,252,.35);
  box-shadow: 0 0 0 1px rgba(195,154,252,.15), 0 30px 60px -20px rgba(106,19,232,.35);
}
.faq__item summary{
  list-style:none;
  cursor:pointer;
  padding: 1.25rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  user-select:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__icon{
  width: 28px; height: 28px; flex-shrink:0;
  border-radius: 50%;
  background: rgba(195,154,252,.1);
  border: 1px solid rgba(195,154,252,.25);
  position: relative;
  transition: transform .35s var(--ease-out), background .35s;
}
.faq__icon::before, .faq__icon::after{
  content:"";
  position:absolute;
  left: 50%; top:50%;
  width: 10px; height: 2px;
  background: var(--c-primary-3);
  transform: translate(-50%,-50%);
  transition: transform .35s var(--ease-cine);
  border-radius:2px;
}
.faq__icon::after{ transform: translate(-50%,-50%) rotate(90deg); }
.faq__item[open] .faq__icon{ background: rgba(195,154,252,.25); }
.faq__item[open] .faq__icon::after{ transform: translate(-50%,-50%) rotate(0deg); }

.faq__body{
  padding: 0 1.5rem 1.5rem;
  color: var(--c-muted);
  font-size:.96rem;
  line-height:1.6;
  overflow:hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .5s var(--ease-cine), opacity .4s, padding .35s;
}
.faq__item[open] .faq__body{
  max-height: 400px;
  opacity: 1;
  padding-bottom: 1.5rem;
}

/* ============================================================
   FORM
   ============================================================ */
.formsec{ padding: 120px 0 100px; position:relative; }
.formsec__inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items:center;
}
.formsec__left .h2{ margin: 1rem 0 1.25rem; }
.formsec__bullets{ list-style:none; padding:0; margin: 1.75rem 0 0; display:flex; flex-direction:column; gap:.7rem; }
.formsec__bullets li{ display:flex; gap:.7rem; align-items:center; color: rgba(228,231,238,.85); }

.formcard{
  position:relative;
  padding: 2.25rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(28,11,68,.85), rgba(15,3,39,.85));
  border: 1px solid rgba(195,154,252,.18);
  box-shadow:
    0 50px 100px -30px rgba(106,19,232,.4),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow:hidden;
  isolation:isolate;
}
.formcard__glow{
  position:absolute; inset:-40%;
  background: conic-gradient(from 0deg at 50% 50%, rgba(106,19,232,.3), transparent 25%, transparent 75%, rgba(195,154,252,.3));
  filter: blur(40px);
  opacity:.4;
  z-index:-1;
  animation: spin 18s linear infinite;
  pointer-events:none;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.field{ position:relative; margin-bottom: 1rem; }
.field input,
.field textarea{
  width:100%;
  background: rgba(9,1,28,.55);
  border: 1px solid var(--c-line-2);
  border-radius: 12px;
  padding: 1.25rem 1rem .55rem;
  font-size:.95rem;
  color:#fff;
  transition: border-color .3s, box-shadow .3s, background .3s;
  outline: none;
  resize:vertical;
  font-family: inherit;
}
.field textarea{ padding-top: 1.5rem; min-height: 110px; }
.field label{
  position:absolute;
  left: 1rem;
  top: 1rem;
  font-size:.95rem;
  color: rgba(228,231,238,.55);
  pointer-events:none;
  transition: transform .3s var(--ease-out), color .3s, font-size .3s;
  background: transparent;
}
.field input:focus,
.field textarea:focus{
  border-color: rgba(195,154,252,.5);
  box-shadow: 0 0 0 3px rgba(106,19,232,.18), 0 0 30px rgba(106,19,232,.15);
  background: rgba(9,1,28,.75);
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{
  transform: translateY(-12px);
  font-size:.72rem;
  letter-spacing:.05em;
  color: var(--c-primary-3);
}

.field--select{ position:relative; }
.field--select select{
  width:100%;
  background: rgba(9,1,28,.55);
  border: 1px solid var(--c-line-2);
  border-radius: 12px;
  padding: 1rem 2.75rem 1rem 1rem;
  font-size:.95rem;
  color:#fff;
  font-family: inherit;
  transition: border-color .3s, box-shadow .3s, background .3s;
  outline: none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c39afc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px 18px;
  cursor:pointer;
}
.field--select select:focus{
  border-color: rgba(195,154,252,.5);
  box-shadow: 0 0 0 3px rgba(106,19,232,.18), 0 0 30px rgba(106,19,232,.15);
  background-color: rgba(9,1,28,.75);
}
.field--select select:invalid{ color: rgba(228,231,238,.55); }
.field--select select option{ background: #0f0327; color:#fff; }
.field--select select option[disabled]{ color: rgba(228,231,238,.55); }

.formcard__hint{
  display:flex; align-items:center; gap:.5rem;
  font-size:.8rem;
  color: var(--c-muted);
  margin-top: 1rem;
  justify-content:center;
}
.formcard__hint svg{ color: var(--c-primary-3); }

.formcard__success{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(28,11,68,.95), rgba(15,3,39,.95));
  backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:.85rem;
  text-align:center;
  padding: 2rem;
  opacity:0;
  pointer-events:none;
  transition: opacity .6s;
  z-index:10;
}
.formcard__success.is-on{ opacity:1; pointer-events:auto; }
.formcard__success-icon{
  width: 78px; height: 78px;
  border-radius:50%;
  background: linear-gradient(135deg, rgba(106,19,232,.35), rgba(195,154,252,.2));
  border:1px solid rgba(195,154,252,.4);
  color: var(--c-primary-3);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 60px rgba(106,19,232,.4);
}
.formcard__success h3{ font-size: 1.5rem; }
.formcard__success p{ color: var(--c-muted); max-width: 320px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative;
  padding: 80px 0 30px;
  border-top: 1px solid var(--c-line);
  background: linear-gradient(180deg, rgba(9,1,28,1) 0%, rgba(9,1,28,1) 100%);
}
.footer::before{
  content:"";
  position:absolute; left:50%; top: 0;
  transform: translate(-50%, -50%);
  width: 720px; max-width: 80%;
  height: 220px;
  background: radial-gradient(ellipse, rgba(106,19,232,.35), transparent 70%);
  filter: blur(40px);
  pointer-events:none;
}
.footer__inner{
  display:grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 4rem;
}
.footer__brand p{ color: var(--c-muted); margin-top: 1rem; max-width: 280px; }
.footer__logo{ height: 22px; }
.footer__cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.footer__cols h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.18em; color: rgba(228,231,238,.5); margin-bottom: 1rem; font-weight:600; }
.footer__cols a{
  display:block;
  font-size:.95rem;
  color: rgba(228,231,238,.78);
  padding:.3rem 0;
  transition: color .25s, transform .25s;
}
.footer__cols a:hover{ color: #fff; transform: translateX(4px); }
.footer__bottom{
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  display:flex; justify-content:space-between; align-items:center;
  gap: 1rem;
  font-size:.85rem;
  color: var(--c-muted);
}
.footer__bottom a{
  color: rgba(228,231,238,.65);
  transition: color .25s;
}
.footer__bottom a:hover{ color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .hero__inner,
  .solution__inner,
  .formsec__inner{ grid-template-columns: 1fr; gap: 3rem; }

  /* ── HERO MOBILE ──────────────────────────────────────────────
     No scroll/grow animation (the JS aborts < 1024). The desktop
     floating composition (absolute cards + pills) collapses into a
     single clean, full-width video card in normal flow, BELOW the
     hero copy. Decorative cards/pills/glow are hidden — they only
     make sense in the desktop parallax stack. */
  .hero__right{ min-height: 0; }
  .comp{ min-height: 0; height: auto; }
  .comp__glow{ display: none; }
  .comp__card--sm,
  .comp__pill{ display: none; }
  .comp__card--main{
    position: static;
    top: auto; left: auto;
    width: 100%;
    z-index: auto;
    animation: none;        /* kill floatMain */
    transform: none;
  }
  .gallery__grid{ grid-template-columns: 1fr; }
  .deliver__grid{ grid-template-columns: repeat(2, 1fr); }
  .stats__grid{ grid-template-columns: 1fr; }
  .formats{ grid-template-columns: 1fr; }
  .testi__track{ grid-template-columns: 1fr; }
  .forwho__grid, .compare{ grid-template-columns: 1fr; }
  .how__list{ grid-template-columns: 1fr; }
  .footer__inner{ grid-template-columns: 1fr; }
  .footer__cols{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px){
  .hero{ padding: 110px 0 60px; }
  .hero__title{ font-size: clamp(2.3rem, 9vw, 3.2rem); }
  h2.h2{ font-size: clamp(1.8rem, 6.5vw, 2.6rem); }
  .nav__logo img{ height: 20px; }
  .stats{ padding: 70px 0; }
  .gallery, .solution, .deliver, .testimonials, .formsec, .faq{ padding: 80px 0; }
  .problems, .how, .forwho{ padding: 70px 0; }
  .deliver__grid{ grid-template-columns: 1fr; }
  .footer__cols{ grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer__bottom{ flex-direction:column; gap:.5rem; }
  .formcard{ padding: 1.75rem 1.4rem; }
  /* hero video already full-width + static from the 1024 block */
  .preloader__meta{ font-size:.65rem; }
  .clapper{ width: 86vw; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .15s !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   WALL · Times-Event style section (portado de /teste)
   GSAP scrub timelines (see script.js timesEventScroll) + Lenis smooth
   scroll for the fluid feel. Faithful to teste's mechanism:
   - .name / .dark-overlay / .bg-imgs-ct are position:FIXED (glued to
     the viewport) so the photos/title stay put while you scroll.
   - Every other section is opaque + z-index:2 (see the coverage rule
     at the end of this block), so the previous/next section paints
     OVER the fixed wall layer → the next div "enters over the photos".
   - Original used html{font-size:1vw}; all rem here converted to vw so
     the scale matches regardless of root font-size.
   ============================================================ */
@font-face {
  font-family: "Archivo SemiExpanded";
  src: url("fonts/archivo-semiexpanded-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

main .sec-2 {
  pointer-events: none;
  position: relative;
  background-color: #212121;
}
main .sec-2 .sec-2-scroll-wrap {
  height: 135vh;
}
@media (min-width: 759px) {
  main .sec-2 .sec-2-scroll-wrap {
    height: 175vh;
  }
}
main .sec-2 .sec-2-scroll-wrap .sec-2-inner {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 0;
}
main .sec-2 .name {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  font-family: "Archivo SemiExpanded", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #F2F2F2;
  font-size: 10vw;
  z-index: 2;
  letter-spacing: 0em;
}
@media (min-width: 759px) {
  main .sec-2 .name {
    font-size: 7.4vw;
  }
}
main .sec-2 .dark-overlay {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, #141414 0%, #141414 50%, #141414 100%);
  z-index: 1;
  opacity: 0.5;
}
main .sec-2 .bg-imgs-ct {
  display: flex;
  gap: 4.92vw;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  transform: scale(1);
  transform-origin: center;
  z-index: -3;
}
@media (min-width: 759px) {
  main .sec-2 .bg-imgs-ct {
    gap: 0.94vw;
    width: calc(100% - 0.94vw * 2);
    margin-inline: auto;
  }
}
main .sec-2 .bg-imgs-ct .imgs-row {
  flex-grow: 1;
}
main .sec-2 .bg-imgs-ct .imgs-row .row-inner {
  display: flex;
  flex-flow: column;
  gap: 4.92vw;
}
@media (min-width: 759px) {
  main .sec-2 .bg-imgs-ct .imgs-row .row-inner {
    gap: 0.94vw;
  }
}
main .sec-2 .bg-imgs-ct .imgs-row.first {
  transform: translateY(20%);
}
main .sec-2 .bg-imgs-ct .imgs-row.second {
  transform: translateY(-20%);
}
main .sec-2 .bg-imgs-ct .imgs-row.third {
  transform: translateY(20%);
}
@media (max-width: 759px) {
  main .sec-2 .bg-imgs-ct .imgs-row.third {
    display: none;
  }
}
main .sec-2 .bg-imgs-ct .imgs-row picture {
  height: 33vh;
  width: 100%;
}
main .sec-2 .bg-imgs-ct .imgs-row picture img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* Coverage layer: every section except the hero (which already sits at
   z-index:10) gets an opaque background + z-index:2, so it paints OVER
   the fixed .sec-2 wall layer. Result: scrolling past the wall, the next
   section slides up and covers the photos (teste's signature effect),
   and the wall never bleeds onto other sections. Backgrounds use the
   page base colour, so nothing changes visually elsewhere. */
.stats, .gallery, .problems, .solution, .deliver, .how,
.testimonials, .forwho, .faq, .formsec, .footer {
  position: relative;
  z-index: 2;
  background: var(--c-bg);
}