/* ==========================================================================
   MÉTODO EDF — Landing Page
   ========================================================================== */

/* ---- Fontes auto-hospedadas (subset latin) — sem dependência do Google.
        O navegador baixa só os pesos realmente usados. display:swap. ---- */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/inter-400.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/inter-500.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/inter-600.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/inter-700.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/jetbrainsmono-400.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/jetbrainsmono-500.woff2') format('woff2'); }
@font-face{ font-family:'Sora'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/sora-400.woff2') format('woff2'); }
@font-face{ font-family:'Sora'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/sora-500.woff2') format('woff2'); }
@font-face{ font-family:'Sora'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/sora-600.woff2') format('woff2'); }
@font-face{ font-family:'Sora'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/sora-700.woff2') format('woff2'); }
@font-face{ font-family:'Sora'; font-style:normal; font-weight:800; font-display:swap; src:url('../assets/fonts/sora-800.woff2') format('woff2'); }

:root{
  --bg:            #06070d;
  --bg-soft:       #0a0c17;
  --bg-elevated:   #0e1122;
  --surface:       rgba(255,255,255,0.035);
  --surface-hover: rgba(255,255,255,0.06);
  --border:        rgba(255,255,255,0.09);
  --border-soft:   rgba(255,255,255,0.06);

  --text:          #f5f6fb;
  --text-dim:      #9aa1b8;
  --text-faint:    #666d87;

  --accent:        #2f6bff;
  --accent-2:      #22c4ff;
  --accent-3:      #ff5b6a;
  --accent-soft:   rgba(47,107,255,0.18);
  --accent-glow:   rgba(47,107,255,.55);

  --gradient:      linear-gradient(120deg, #1e56ea 0%, #2f6bff 38%, #3d9dff 68%, #22c4ff 100%);
  /* gradiente espelhado (começa e termina na mesma cor) para animar sem "emenda" */
  --gradient-btn:  linear-gradient(100deg, #1c4fe6 0%, #2f6bff 22%, #3d9dff 40%, #22c4ff 50%, #3d9dff 60%, #2f6bff 78%, #1c4fe6 100%);
  --gradient-text: linear-gradient(135deg, #ffffff 0%, #cfe2ff 100%);

  --font-head: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --container: 1180px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }

::selection{ background:var(--accent); color:#fff; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------- background texture ---------- */
.noise{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; z-index:1;
  pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, rgba(47,107,255,0.14) 0%, rgba(47,107,255,0) 70%);
  transform:translate(-50%,-50%);
  will-change:transform;
}
@media (max-width:900px){ .cursor-glow{ display:none; } }

.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:1000;
  background:var(--gradient);
  box-shadow:0 0 12px rgba(47,107,255,.6);
}

.grid-fade{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 90%);
}
.grid-fade--dark{ opacity:.5; }

/* ---------- typography helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-2);
  padding:8px 16px 8px 12px;
  border:1px solid var(--border);
  border-radius:100px;
  background:var(--surface);
  margin-bottom:22px;
}
.eyebrow--dark{ color:var(--accent); }
.eyebrow__dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent-2);
  box-shadow:0 0 8px var(--accent-2);
  animation:pulse-dot 1.8s ease-in-out infinite;
}
.eyebrow--dark .eyebrow__dot{ background:var(--accent); box-shadow:0 0 8px var(--accent); }
@keyframes pulse-dot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.7);} }

.section-head{ max-width:680px; margin-bottom:56px; }
.section-title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(28px, 4vw, 46px);
  line-height:1.15;
  letter-spacing:-.02em;
}
.section-lead{
  margin-top:18px;
  font-size:clamp(16px,1.4vw,18px);
  color:var(--text-dim);
  max-width:56ch;
}

section{ position:relative; padding:120px 0; }
@media (max-width:768px){ section{ padding:80px 0; } }

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:14px 24px;
  border-radius:100px;
  white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.btn svg{ width:18px; height:18px; transition:transform .3s var(--ease); }

.btn--primary{
  background-image:var(--gradient-btn);
  background-size:220% 100%;
  background-position:0% 50%;
  color:#fff;
  box-shadow:0 10px 30px -10px rgba(47,107,255,.6), inset 0 1px 0 rgba(255,255,255,.25);
  animation:btn-glow-pulse 3s ease-in-out infinite, btn-gradient-shift 7s ease-in-out infinite;
}
.btn--primary:hover{
  box-shadow:0 16px 46px -6px rgba(47,107,255,.9), inset 0 1px 0 rgba(255,255,255,.3);
}
@keyframes btn-glow-pulse{
  0%,100%{ box-shadow:0 10px 30px -10px rgba(47,107,255,.55), inset 0 1px 0 rgba(255,255,255,.25); }
  50%{ box-shadow:0 12px 44px -6px rgba(47,107,255,.95), inset 0 1px 0 rgba(255,255,255,.3); }
}
/* vai e volta suavemente — sem salto de cor no fim do loop */
@keyframes btn-gradient-shift{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
.btn--primary:hover svg{ transform:translateX(3px); }

.btn--lg{ padding:18px 32px; font-size:16px; }

.btn--nav{
  padding:11px 20px; font-size:13.5px;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
}
.btn--nav:hover{ background:var(--surface-hover); border-color:rgba(255,255,255,.18); }
@media (max-width:1020px){ .btn--nav{ display:none; } }

/* ================= NAV ================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  transition:padding .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  padding:12px 0;
  background:rgba(6,7,13,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--border-soft);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.logo{ display:flex; align-items:center; gap:10px; }
.logo__mark{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  background:var(--gradient);
  font-family:var(--font-head); font-weight:800; font-size:14px; color:#fff;
  box-shadow:0 6px 18px -6px rgba(47,107,255,.7);
}
.logo__text{ font-family:var(--font-head); font-weight:600; font-size:16px; letter-spacing:-.01em; }

.nav__links{ display:flex; align-items:center; gap:32px; font-size:14.5px; color:var(--text-dim); margin-inline:auto; }
.nav__links a{ position:relative; transition:color .25s; }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--accent-2);
  transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ width:100%; }
@media (max-width:1020px){ .nav__links{ display:none; } }

.nav__burger{
  display:none; flex-direction:column; gap:5px; width:34px; height:34px; align-items:center; justify-content:center;
}
.nav__burger span{ width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
@media (max-width:1020px){ .nav__burger{ display:flex; } }

.nav-mobile{
  position:fixed; inset:0; z-index:99;
  display:flex; flex-direction:column; gap:22px;
  padding:110px 28px 40px;
  background:rgba(8,9,17,.98);
  backdrop-filter:blur(20px);
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
  font-size:19px; font-family:var(--font-head); font-weight:500;
  overflow-y:auto;
}
.nav-mobile.is-open{ transform:translateY(0); }
.nav-mobile .btn{ margin-top:12px; width:100%; }

/* ================= HERO ================= */
.hero{
  position:relative;
  padding-top:180px;
  padding-bottom:0;
  overflow:hidden;
}
#particles{ position:absolute; inset:0; z-index:0; opacity:.55; }

/* banner de foto no topo — visível apenas no mobile (ver @media abaixo) */
.hero__mobile-photo{ display:none; }

.hero__glow{ position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; z-index:0; animation:glow-drift 12s ease-in-out infinite; }
.hero__glow--1{ width:600px; height:600px; top:-180px; right:-140px; background:rgba(47,107,255,.45); }
.hero__glow--2{ width:480px; height:480px; bottom:-120px; left:-160px; background:rgba(34,196,255,.32); animation-delay:-4s; }
.hero__glow--3{ width:680px; height:680px; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(47,107,255,.38); }
.hero__glow--4{ width:440px; height:440px; background:rgba(34,196,255,.28); animation-delay:-7s; }

@keyframes glow-drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(30px,-24px) scale(1.08); }
}
.hero__glow--3{ animation:glow-pulse-scale 7s ease-in-out infinite; }
@keyframes glow-pulse-scale{
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  50%{ transform:translate(-50%,-50%) scale(1.15); opacity:.75; }
}

.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
  padding-bottom:110px;
}
@media (max-width:980px){
  /* no mobile o banner ocupa o topo, então zeramos o padding do hero */
  .hero{ padding-top:0; }

  .hero__mobile-photo{
    display:block;
    position:relative;
    z-index:1;
    width:100%;
    /* altura menor -> o cover recorta menos as laterais e mostra mais da imagem */
    height:clamp(220px, 40vh, 330px);
    margin-bottom:-1px;
  }
  /* a PRÓPRIA imagem se dissolve: opaca no topo -> transparente embaixo,
     revelando o mesmo fundo (partículas/glow) que continua na seção.
     É isso que faz a foto se integrar de verdade, sem emenda. */
  .hero__mobile-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:52% 22%;
    display:block;
    -webkit-mask-image:linear-gradient(to bottom,
      #000 0%, #000 40%, rgba(0,0,0,.55) 66%, rgba(0,0,0,0) 92%);
            mask-image:linear-gradient(to bottom,
      #000 0%, #000 40%, rgba(0,0,0,.55) 66%, rgba(0,0,0,0) 92%);
  }
  /* leve escurecida no topo para o logo/menu se destacarem sobre a foto */
  .hero__mobile-photo::before{
    content:'';
    position:absolute; inset:0 0 auto 0; height:120px; z-index:1;
    pointer-events:none;
    background:linear-gradient(to bottom, rgba(6,7,13,.5), rgba(6,7,13,0));
  }

  .hero__inner{
    grid-template-columns:1fr; text-align:center; padding-bottom:70px;
    /* puxa o conteúdo para dentro da base já esmaecida da foto (blend contínuo) */
    margin-top:-72px;
    position:relative; z-index:3;
  }
  .hero__cta-group{ align-items:center; width:100%; }
  /* botão da primeira seção ocupa a largura toda no mobile e fica centralizado */
  .hero__cta-group .btn--primary{ width:100%; max-width:440px; margin-inline:auto; }
  .hero__proof{ justify-content:center; }
}

.hero__title{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(34px, 4.6vw, 58px);
  line-height:1.08; letter-spacing:-.03em;
  margin-bottom:24px;
  /* gradiente aplicado no título inteiro (sem depender de split via JS) */
  background:var(--gradient-text); background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px var(--accent-glow));
}
.text-glow-word,
.freedom__punch .word{
  display:inline-block;
  background:var(--gradient-text);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px var(--accent-glow));
  animation:text-shimmer 5s linear infinite;
  animation-delay:calc(var(--i, 0) * .1s);
}
@keyframes text-shimmer{
  0%{ background-position:0% 50%; }
  100%{ background-position:220% 50%; }
}

/* ---- entrada do HERO em CSS (renderiza na hora, sem esperar o GSAP) ---- */
.hero-fade{ opacity:0; animation:hero-in .75s var(--ease) var(--d, 0s) both; }
.hero__title.hero-fade{
  animation:hero-in .75s var(--ease) var(--d, 0s) both, text-shimmer 5s linear 1s infinite;
}
@keyframes hero-in{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-fade, .hero__title.hero-fade{ animation:none !important; opacity:1 !important; transform:none !important; }
}

.hero__subtitle{
  font-size:clamp(16px,1.6vw,19px);
  color:var(--text-dim);
  max-width:52ch;
  margin-bottom:36px;
}
.hero__subtitle strong{ color:var(--text); font-weight:600; }

.hero__cta-group{ display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
.hero__proof{ display:flex; flex-wrap:wrap; gap:18px; }
.hero__proof-item{
  display:flex; align-items:center; gap:7px;
  font-size:13.5px; color:var(--text-dim);
}
.hero__proof-item svg{ width:15px; height:15px; color:var(--accent-2); flex-shrink:0; }

/* ---- hero visual mockup ---- */
.hero__visual{ position:relative; }
.mockup{
  position:relative; z-index:2;
  background:linear-gradient(180deg, var(--bg-elevated), var(--bg-soft));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02);
  overflow:hidden;
}
.mockup__bar{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-bottom:1px solid var(--border-soft);
}
.mockup__dots{ display:flex; gap:6px; }
.mockup__dots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.15); }
.mockup__url{
  font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint);
  background:rgba(255,255,255,.04); padding:4px 12px; border-radius:100px;
}

.mockup__body{ padding:22px; }
.mockup__prompt{
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px; margin-bottom:18px;
  background:radial-gradient(circle at 0% 0%, rgba(47,107,255,.12), transparent 60%);
}
.mockup__prompt-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--accent-2); }
/* rotador de frases: altura fixa (todas do mesmo tamanho) e sem reflow.
   As frases ficam empilhadas no mesmo lugar (absolute); só uma visível por vez. */
.mockup__prompt-text{
  position:relative;
  height:3.2em;               /* comporta 2 linhas em qualquer largura, sem invadir o botão */
  margin:10px 0 16px;
  font-size:14px; color:var(--text-dim); line-height:1.55;
}
.mockup__phrase{
  position:absolute; left:0; top:0; right:0;
  margin:0;
  opacity:0; transform:translateY(9px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  will-change:opacity, transform;
}
.mockup__phrase.is-active{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .mockup__phrase{ transition:opacity .3s linear; transform:none; }
}

.mockup__generate{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gradient); color:#fff; font-size:13px; font-weight:600;
  padding:9px 16px; border-radius:100px;
}
.mockup__generate svg{ width:14px; height:14px; }

.mockup__dashboard{ display:grid; grid-template-columns:44px 1fr; gap:16px; }
.mockup__sidebar{ display:flex; flex-direction:column; gap:10px; }
.mockup__sidebar span{ width:100%; aspect-ratio:1; border-radius:9px; background:rgba(255,255,255,.05); }
.mockup__sidebar span.active{ background:var(--gradient); }

.mockup__panels{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mockup__stat{
  grid-column:1 / -1;
  border:1px solid var(--border-soft); border-radius:14px; padding:16px;
  background:rgba(255,255,255,.02);
}
.mockup__stat small{ font-size:11px; color:var(--text-faint); }
.mockup__stat strong{ display:block; font-family:var(--font-head); font-size:22px; margin:4px 0 12px; }
.mockup__stat--sm{ grid-column:span 1; }
.mockup__stat--sm strong{ margin-bottom:0; color:var(--accent-2); }
.mockup__chart{ display:flex; align-items:flex-end; gap:5px; height:44px; }
.mockup__chart i{ flex:1; height:var(--h); background:var(--gradient); border-radius:3px 3px 0 0; opacity:.85; }
.mockup__rows{ grid-column:1/-1; display:flex; flex-direction:column; gap:8px; }
.mockup__rows span{ height:10px; border-radius:6px; background:rgba(255,255,255,.05); }
.mockup__rows span:nth-child(2){ width:80%; }
.mockup__rows span:nth-child(3){ width:60%; }

.floating-chip{
  position:absolute; z-index:3;
  display:flex; flex-direction:column; gap:2px;
  padding:10px 16px;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:12px;
  font-size:12.5px; font-weight:600;
  box-shadow:0 16px 30px -12px rgba(0,0,0,.6);
}
.floating-chip__status{
  font-size:10.5px; font-weight:500; color:var(--accent-3);
  text-decoration:line-through; text-decoration-color:var(--accent-3);
}
.floating-chip--1{ top:-6%; right:-8%; }
.floating-chip--2{ bottom:14%; left:-12%; }
.floating-chip--3{ bottom:-8%; right:6%; }
@media (max-width:980px){
  .floating-chip{ display:none; }
}

.grid-fade{ z-index:0; }

/* marquee */
.marquee{
  position:relative; z-index:2;
  border-top:1px solid var(--border-soft);
  padding:22px 0;
  overflow:hidden;
  background:rgba(255,255,255,.015);
}
.marquee__track{
  display:flex; gap:14px; white-space:nowrap; width:max-content;
  font-family:var(--font-mono); font-size:13px; color:var(--text-faint);
  letter-spacing:.03em;
  animation:marquee 32s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee__caption{
  text-align:center; margin-top:14px; font-size:12px; color:var(--text-faint);
  letter-spacing:.04em;
}

/* ================= VSL / VÍDEO DE VENDAS ================= */
.vsl{ background:var(--bg-soft); overflow:hidden; }
.vsl__inner{
  /* z-index bem acima de qualquer outro wrapper de seção (que usam 0-3):
     .vsl__inner cria seu próprio contexto de empilhamento, e o mini-player
     (position:fixed, z-index:1200) fica PRESO dentro dele — sem isso, as
     seções seguintes (que vêm depois no DOM) pintam por cima do mini ao
     rolar a página. Continua bem abaixo da UI fixa (nav/sticky/progress:90-1000). */
  position:relative; z-index:50;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.vsl__head{ text-align:center; margin-inline:auto; margin-bottom:40px; }
.vsl__head .section-lead{ margin-inline:auto; }

.vsl__stage{
  position:relative;
  margin:0 auto 36px;
  padding:14px;
  border-radius:calc(var(--radius-lg) + 14px);
  background:linear-gradient(160deg, rgba(47,107,255,.20), rgba(34,196,255,.05));
  border:1px solid rgba(47,107,255,.3);
  box-shadow:0 40px 100px -34px rgba(47,107,255,.55);
}
.vsl__stage::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(160deg, rgba(47,107,255,.6), transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

.vsl__frame{
  position:relative;
  width:min(340px, 76vw);
  aspect-ratio:9 / 16;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#02030a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
/* o YT.Player substitui #vslPlayer por um iframe (mantendo o id).
   crop vertical (~9% topo/base) empurra o título e o logo do YouTube
   pra fora da área visível — player fica realmente "limpo". */
#vslPlayer{ position:absolute; left:0; top:-11%; width:100%; height:122%; border:0; }
.vsl__viewport{ position:absolute; inset:0; }

.vsl__poster{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  cursor:pointer;
  background:
    radial-gradient(circle at 50% 40%, rgba(47,107,255,.35), transparent 62%),
    linear-gradient(180deg, #0b1430 0%, #05070f 100%);
}
.vsl__poster::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  opacity:.5;
}
.vsl__play{
  position:relative; z-index:1;
  width:80px; height:80px; border-radius:50%;
  display:grid; place-items:center;
  background-image:var(--gradient-btn); background-size:220% 100%;
  color:#fff;
  box-shadow:0 0 0 10px rgba(47,107,255,.12), 0 16px 44px -6px rgba(47,107,255,.75);
  transition:transform .3s var(--ease);
  animation:vsl-play-pulse 2.6s ease-in-out infinite, btn-gradient-shift 7s ease-in-out infinite;
}
.vsl__play svg{ width:34px; height:34px; margin-left:5px; }
.vsl__play:hover{ transform:scale(1.09); }
@keyframes vsl-play-pulse{
  0%,100%{ box-shadow:0 0 0 8px rgba(47,107,255,.14), 0 16px 44px -6px rgba(47,107,255,.7); }
  50%{ box-shadow:0 0 0 18px rgba(47,107,255,.04), 0 20px 54px -6px rgba(47,107,255,.95); }
}
.vsl__poster-label{
  position:relative; z-index:1;
  font-size:13.5px; color:var(--text-dim); font-weight:500; letter-spacing:.02em;
  max-width:80%; text-align:center;
}
.vsl__cta{ margin-top:2px; }

/* ---- player customizado (controles próprios) ---- */
.vsl__shield{ position:absolute; inset:0; z-index:2; cursor:pointer; background:transparent; }

.vsl__center{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  display:grid; place-items:center;
  opacity:0; transition:opacity .25s var(--ease);
}
.vsl__center svg{
  width:34px; height:34px; color:#fff;
  padding:22px; box-sizing:content-box; border-radius:50%;
  background:rgba(10,14,30,.55); backdrop-filter:blur(6px);
  box-shadow:0 12px 34px -8px rgba(0,0,0,.65);
}
.vsl__center-pause{ display:none; }
.vsl__center-sound{ display:none; }
.vsl__center-label{
  display:none;
  pointer-events:none;
  font-size:12.5px; color:#fff; white-space:nowrap; font-weight:500;
  background:rgba(10,14,30,.6); backdrop-filter:blur(6px);
  padding:7px 14px; border-radius:100px; margin-top:14px;
}
.vsl__frame.is-paused .vsl__center{ opacity:1; }

/* pré-visualização muda (autoplay, antes do clique): mostra "toque para
   ativar o som" em vez do ícone de play/pause, mesmo com o vídeo tocando */
.vsl__frame.is-active:not(.is-engaged) .vsl__center{ opacity:1; }
.vsl__frame.is-active:not(.is-engaged) .vsl__center-play,
.vsl__frame.is-active:not(.is-engaged) .vsl__center-pause{ display:none; }
.vsl__frame.is-active:not(.is-engaged) .vsl__center-sound,
.vsl__frame.is-active:not(.is-engaged) .vsl__center-label{ display:block; }

/* poster some após o play */
.vsl__poster{ z-index:5; transition:opacity .4s var(--ease); }
.vsl__poster.is-loading .vsl__play{ opacity:.55; }
.vsl__poster.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }

/* barra de controles — só depois de engajar (com som). Durante a
   pré-visualização muda ela fica escondida de propósito. */
.vsl__controls{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; gap:9px;
  padding:22px 12px 12px;
  background:linear-gradient(0deg, rgba(4,6,14,.92), rgba(4,6,14,.5) 62%, transparent);
  transform:translateY(115%); opacity:0;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.vsl__frame.is-engaged.controls-visible .vsl__controls,
.vsl__frame.is-engaged.is-paused .vsl__controls,
.vsl__frame.is-mini .vsl__controls{ transform:none; opacity:1; }

.vsl__ctrl{
  flex-shrink:0; display:grid; place-items:center;
  width:34px; height:34px; border-radius:10px;
  color:#fff; background:rgba(255,255,255,.08);
  transition:background .2s var(--ease);
}
.vsl__ctrl:hover{ background:rgba(47,107,255,.55); }
.vsl__ctrl svg{ width:18px; height:18px; }
.vsl__ctrl--speed{ width:auto; padding:0 11px; font-family:var(--font-mono); font-size:12px; font-weight:500; }

/* troca de ícones */
.ic-pause, .ic-muted{ display:none; }
.vsl__frame.is-playing .ic-play{ display:none; }
.vsl__frame.is-playing .ic-pause{ display:block; }
.vsl__frame.is-muted .ic-vol{ display:none; }
.vsl__frame.is-muted .ic-muted{ display:block; }

/* progresso — travado (só indicador, sem seek) */
.vsl__progress{ flex:1; height:5px; border-radius:100px; overflow:hidden; background:rgba(255,255,255,.14); }
.vsl__progress-fill{ height:100%; width:0%; border-radius:100px; background:var(--gradient); box-shadow:0 0 10px var(--accent-glow); transition:width .25s linear; }
.vsl__time{ flex-shrink:0; font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); min-width:34px; text-align:center; }

.vsl__vol{ position:relative; display:flex; align-items:center; }
.vsl__volume{
  width:0; opacity:0; padding:0;
  accent-color:var(--accent-2); cursor:pointer;
  transition:width .25s var(--ease), opacity .25s var(--ease), margin .25s var(--ease);
}
.vsl__vol:hover .vsl__volume, .vsl__volume:focus-visible{ width:62px; opacity:1; margin-left:6px; }

/* ações e estado do mini-player */
.vsl__mini-actions{ position:absolute; top:8px; right:8px; z-index:6; display:none; gap:6px; }
.vsl__mini-btn{
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  color:#fff; background:rgba(4,6,14,.7); backdrop-filter:blur(4px);
  transition:background .2s var(--ease);
}
.vsl__mini-btn svg{ width:15px; height:15px; }
.vsl__mini-btn:hover{ background:rgba(47,107,255,.7); }

.vsl__frame.is-mini .vsl__viewport{
  position:fixed; inset:auto 24px auto auto; top:86px;
  width:clamp(140px, 44vw, 168px); aspect-ratio:9 / 16;
  border-radius:18px; overflow:hidden; background:#02030a;
  /* z-index disputado direto na RAIZ da página (ver bloco abaixo):
     acima de todas as seções (0-3) e da barra fixa (90), abaixo do
     nav (100), do menu mobile (99) e da barra de progresso (1000) */
  z-index:95;
  box-shadow:0 26px 60px -16px rgba(0,0,0,.72), 0 0 0 1px rgba(47,107,255,.45);
  animation:vsl-mini-in .4s var(--ease), vsl-mini-float 5s ease-in-out .4s infinite;
  /* camada própria explícita: no iOS a ordem de camadas compostas
     "por heurística" é justamente o que quebrava a sobreposição */
  will-change:transform;
}
/* translate3d (e não translateY) para a promoção da camada ser explícita no iOS */
@keyframes vsl-mini-in{ from{ opacity:0; transform:translate3d(0,-14px,0) scale(.9); } to{ opacity:1; transform:translate3d(0,0,0); } }
@keyframes vsl-mini-float{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(0,-6px,0); } }

/* ---- miniatura: imunidade a interferência dos ancestrais ----
   Causa raiz do vídeo flutuante ficar ATRÁS das seções no celular:
   o mini (position:fixed) ficava PRESO no contexto de empilhamento do
   .vsl__inner (z-index:50), aninhado dentro de .vsl e .vsl__frame, ambos
   com overflow:hidden. No iPhone o vídeo em reprodução vira uma camada
   composta por hardware, e uma camada composta presa num contexto aninhado
   acaba pintada atrás das seções seguintes — por isso só acontecia no
   mobile (navegador de desktop e emulador não compõem do mesmo jeito).
   Enquanto a miniatura está ativa, nenhum ancestral prende nem recorta:
   o mini disputa a ordem direto na raiz da página. */
.vsl.is-mini-active{ overflow:visible; }
.vsl.is-mini-active .vsl__inner{ z-index:auto; }
.vsl__frame.is-mini{ overflow:visible; }
/* o glow decorativo (440px de largura) só era contido pelo overflow:hidden
   acima; solto, ele vaza na horizontal e cria rolagem lateral — que já
   quebrou o posicionamento do mini uma vez. Como a miniatura só existe
   quando o usuário está longe desta seção, escondê-lo aqui é invisível. */
.vsl.is-mini-active .hero__glow{ display:none; }
/* no mini o título/logo do YT ficam proporcionalmente maiores: crop mais forte */
.vsl__frame.is-mini #vslPlayer{ top:-15%; height:130%; }
.vsl__frame.is-mini .vsl__mini-actions{ display:flex; }
.vsl__frame.is-mini .vsl__controls{ padding:8px; gap:6px; }
.vsl__frame.is-mini .vsl__time,
.vsl__frame.is-mini .vsl__ctrl--speed,
.vsl__frame.is-mini .vsl__vol{ display:none; }

/* dica no frame vazio enquanto toca na miniatura */
.vsl__frame.is-mini::after{
  content:'Tocando na miniatura ↗';
  position:absolute; inset:0; z-index:1; display:grid; place-items:center;
  font-size:12.5px; color:var(--text-faint); letter-spacing:.02em; background:#02030a;
}

@media (max-width:600px){
  .vsl__frame.is-mini .vsl__viewport{ inset:auto 12px auto auto; top:74px; width:104px; border-radius:14px; }
  .vsl__frame.is-mini::after{ font-size:11px; }
}
@media (prefers-reduced-motion: reduce){
  .vsl__frame.is-mini .vsl__viewport{ animation:vsl-mini-in .3s var(--ease); }
}

/* ================= TRAP SECTION ================= */
.trap{ background:var(--bg-soft); }
.trap__grid{
  display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start;
  margin-bottom:56px;
}
@media (max-width:860px){ .trap__grid{ grid-template-columns:1fr; } }

.trap__stack{ display:flex; flex-direction:column; gap:10px; }
.trap__stack li{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  opacity:0; transform:translateX(-24px);
}
.trap__name{ font-weight:600; font-size:15px; }
.trap__price{ font-family:var(--font-mono); color:var(--accent-3); font-size:14px; }
.trap__price small{ color:var(--text-faint); font-size:11px; margin-left:2px; }

.trap__total{
  position:sticky; top:110px;
  background:linear-gradient(160deg, var(--bg-elevated), var(--bg-soft));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.trap__total-label{ font-size:13px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; }
.trap__total-value{
  font-family:var(--font-head); font-weight:800; font-size:clamp(38px,5vw,52px);
  color:var(--accent-3); line-height:1.1; margin:6px 0;
}
.trap__total-year{ font-size:14px; color:var(--text-dim); }
.trap__total-note{ font-size:11.5px; color:var(--text-faint); margin-top:14px; }

.trap__punch{
  max-width:760px;
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(19px,2.4vw,26px);
  line-height:1.5;
  color:var(--text-dim);
  display:flex; flex-direction:column; gap:14px;
}
.trap__punch-strong{ color:var(--text); font-weight:700; }
.trap__punch span{ color:var(--accent-3); }
.trap__punch strong{ color:var(--text); }

/* ================= OPTIONS ================= */
.options__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:44px; }
@media (max-width:900px){ .options__grid{ grid-template-columns:1fr; } }

.option-card{
  position:relative;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:32px 26px;
  background:var(--surface);
  overflow:hidden;
}
.option-card__num{
  font-family:var(--font-head); font-weight:800; font-size:13px; color:var(--text-faint);
  display:block; margin-bottom:18px;
}
.option-card h3{ font-family:var(--font-head); font-size:22px; margin-bottom:10px; }
.option-card p{ color:var(--text-dim); font-size:15px; line-height:1.6; }
.option-card p strong{ color:var(--text); }

.option-card__stamp{
  position:absolute; top:22px; right:-34px;
  transform:rotate(35deg);
  background:var(--accent-3); color:#fff;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 40px;
}
.option-card--highlight{
  background:linear-gradient(160deg, rgba(47,107,255,.14), rgba(34,196,255,.06));
  border-color:rgba(47,107,255,.4);
  box-shadow:0 0 0 1px rgba(47,107,255,.15), 0 30px 60px -30px rgba(47,107,255,.5);
}
.option-card__stamp--new{ background:var(--gradient); }

.options__closing{
  max-width:640px; font-size:17px; color:var(--text-dim);
  border-left:2px solid var(--accent); padding-left:20px;
}

/* ================= BIG IDEA ================= */
.bigidea{ background:linear-gradient(180deg, var(--bg-soft), var(--bg)); text-align:center; }
.bigidea .container{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.bigidea__title{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(30px,5vw,56px); line-height:1.12; letter-spacing:-.03em;
  max-width:920px; margin:18px 0 20px;
}
.bigidea__title .word{ display:inline-block; }
.bigidea__sub{ font-size:clamp(16px,1.6vw,19px); color:var(--text-dim); max-width:56ch; margin-bottom:70px; }
.bigidea__sub strong{ color:var(--text); }

.pipeline{
  position:relative;
  display:grid; grid-template-columns:repeat(6,1fr); gap:10px;
  width:100%; max-width:1080px; margin-bottom:60px;
}
.pipeline__line{ position:absolute; top:26px; left:0; width:100%; height:4px; color:var(--accent); z-index:0; }
.pipeline__step{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.pipeline__icon{
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%;
  background:var(--bg-elevated); border:1px solid var(--border);
  font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--accent-2);
}
.pipeline__step p{ font-size:13.5px; color:var(--text-dim); font-weight:500; }
@media (max-width:860px){
  .pipeline{ grid-template-columns:repeat(2,1fr); gap:28px 10px; }
  .pipeline__line{ display:none; }
}
@media (min-width:861px) and (max-width:1080px){
  .pipeline{ grid-template-columns:repeat(3,1fr); gap:28px 10px; }
  .pipeline__line{ display:none; }
}

.bigidea__banner{
  position:relative;
  width:100%; max-width:900px;
  margin:8px auto 60px;
  padding:12px;
  border-radius:calc(var(--radius-lg) + 10px);
  background:linear-gradient(160deg, rgba(47,107,255,.16), rgba(34,196,255,.05));
  border:1px solid rgba(47,107,255,.28);
  box-shadow:0 40px 90px -34px rgba(47,107,255,.5);
}
.bigidea__banner img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius-lg);
}

.bigidea__closing{
  max-width:680px; font-family:var(--font-head); font-weight:500;
  font-size:clamp(18px,2vw,22px); line-height:1.5; color:var(--text);
}

/* ================= METHOD ================= */
.method__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:980px){ .method__grid{ grid-template-columns:1fr; } }

.method-card{
  position:relative;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:36px 30px;
  background:linear-gradient(160deg, var(--surface), transparent);
  overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.method-card:hover{ border-color:rgba(47,107,255,.4); transform:translateY(-6px); }
.method-card__media{
  position:relative; z-index:2;
  margin:-36px -30px 26px;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#070b18;
  border-bottom:1px solid var(--border);
}
/* cards com proporção fixa no container: a imagem preenche (cover) */
.method-card__media picture,
.system-card__media picture{ display:block; width:100%; height:100%; }
/* banner e liberdade: a proporção vem da própria imagem (sem corte) */
.bigidea__banner picture,
.freedom__media picture{ display:block; width:100%; }
.method-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease);
}
.method-card:hover .method-card__media img{ transform:scale(1.05); }
.method-card__letter{
  position:absolute; top:auto; bottom:-26px; right:-4px;
  font-family:var(--font-head); font-weight:800; font-size:132px; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.06);
  pointer-events:none; user-select:none;
}
.method-card__head{ position:relative; z-index:1; margin-bottom:16px; }
.method-card__tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--accent-2); text-transform:uppercase; }
.method-card h3{ font-family:var(--font-head); font-size:26px; margin-top:8px; }
.method-card > p{ position:relative; z-index:1; color:var(--text-dim); font-size:15px; line-height:1.65; margin-bottom:22px; }
.method-card__chips{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; }
.method-card__chips li{
  font-size:12.5px; padding:7px 13px; border-radius:100px;
  background:rgba(255,255,255,.045); border:1px solid var(--border-soft); color:var(--text-dim);
}

/* ================= SISTEMAS QUE VOCÊ PODE CRIAR ================= */
.systems{ background:var(--bg-soft); }
.systems .section-head{ max-width:720px; margin-inline:auto; text-align:center; }
.systems .section-head .section-lead{ margin-inline:auto; }
.systems__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
@media (max-width:920px){ .systems__grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (max-width:400px){ .system-card__label{ padding:13px 14px 15px; } .system-card__label span{ font-size:15px; } }

.system-card{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:linear-gradient(160deg, var(--surface), transparent);
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.system-card:hover{
  border-color:rgba(47,107,255,.45); transform:translateY(-6px);
  box-shadow:0 30px 60px -28px rgba(47,107,255,.5);
}
.system-card__media{
  aspect-ratio:4 / 3; overflow:hidden; background:#070b18;
  border-bottom:1px solid var(--border-soft);
}
.system-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.system-card:hover .system-card__media img{ transform:scale(1.06); }
.system-card__label{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:3px; }
.system-card__label span{ font-family:var(--font-head); font-weight:600; font-size:16px; }
.system-card__label small{ font-size:12.5px; color:var(--text-faint); }

/* ================= FREEDOM ================= */
.freedom{ background:var(--bg); }
.freedom__grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:900px){ .freedom__grid{ grid-template-columns:1fr; gap:50px; } }

.freedom__media{
  position:relative;
  width:100%; max-width:420px; margin:0 auto 28px;
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(47,107,255,.28);
  box-shadow:0 30px 70px -30px rgba(47,107,255,.45);
}
.freedom__media img{ width:100%; height:auto; display:block; }
.freedom__col--punch{ text-align:center; }
@media (min-width:901px){
  .freedom__col--punch{ text-align:left; }
  .freedom__media{ margin-left:0; }
}

.freedom__list{ display:flex; flex-direction:column; gap:20px; margin-top:36px; }
.strike-text{
  position:relative; display:inline-block;
  font-size:clamp(16px,1.8vw,19px); color:var(--text-dim);
}
.strike-text::after{
  content:''; position:absolute; left:0; top:50%; width:0; height:2px;
  background:var(--accent-3); transform:translateY(-50%);
}
.strike-text.is-struck::after{ width:100%; transition:width .6s var(--ease); }

.freedom__col--punch{ text-align:left; }
.freedom__punch{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(26px,3.4vw,38px); line-height:1.25; letter-spacing:-.02em;
  color:var(--text);
  margin-bottom:16px;
}
.freedom__punch .word{
  display:inline-block;
  background:var(--gradient-text);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px var(--accent-glow));
  animation:text-shimmer 5s linear infinite;
  animation-delay:calc(var(--i, 0) * .1s);
}
.freedom__punch-sub{ font-size:17px; color:var(--text-dim); }

/* ================= ASSET ================= */
.asset__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:860px){ .asset__grid{ grid-template-columns:1fr; } }
.asset-card{
  border-radius:var(--radius-lg); padding:34px 30px; border:1px solid var(--border);
}
.asset-card__tag{
  display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 14px; border-radius:100px; margin-bottom:22px;
}
.asset-card li{
  position:relative; padding-left:26px; margin-bottom:14px; font-size:15px; line-height:1.55;
  color:var(--text-dim);
}
.asset-card li::before{ position:absolute; left:0; top:0; font-weight:700; }

.asset-card--bad{ background:rgba(255,91,106,.05); }
.asset-card--bad .asset-card__tag{ background:rgba(255,91,106,.14); color:var(--accent-3); }
.asset-card--bad li::before{ content:'×'; color:var(--accent-3); }

.asset-card--good{ background:rgba(34,196,255,.05); border-color:rgba(34,196,255,.25); }
.asset-card--good .asset-card__tag{ background:rgba(34,196,255,.14); color:var(--accent-2); }
.asset-card--good li::before{ content:'✓'; color:var(--accent-2); }
.asset-card--good li{ color:var(--text); }

/* ================= TESTIMONIALS / DEPOIMENTOS ================= */
.testimonials{ background:var(--bg-soft); overflow:hidden; }
.testimonials .container{ position:relative; z-index:1; }

.testimonials__carousel{
  position:relative; z-index:1;
  margin-top:20px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.testimonials__track{
  display:flex; gap:24px; width:max-content;
  padding:8px 24px 24px;
}

.testimonial-card{
  width:240px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  transition:transform .4s var(--ease);
}
.testimonial-card:hover{ transform:translateY(-8px); }

.testimonial-card__frame{
  width:100%; aspect-ratio:853/1844; /* proporção real dos prints de WhatsApp */
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:radial-gradient(circle at 50% 0%, rgba(47,107,255,.1), var(--bg-elevated) 70%);
  overflow:hidden;
  box-shadow:0 30px 50px -26px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.02);
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.testimonial-card:hover .testimonial-card__frame{
  border-color:rgba(47,107,255,.5);
  box-shadow:0 30px 60px -20px rgba(47,107,255,.45), 0 0 0 1px rgba(255,255,255,.03);
}
.testimonial-card__frame picture{ display:block; width:100%; height:100%; }
.testimonial-card__frame img{ width:100%; height:100%; object-fit:cover; object-position:top; }

.testimonial-card__stars{
  color:#ffb020; font-size:15px; letter-spacing:3px;
  text-shadow:0 0 14px rgba(255,176,32,.5);
}

.testimonials__controls{
  display:flex; justify-content:center; gap:14px; margin-top:36px;
}
.carousel-btn{
  display:grid; place-items:center;
  width:48px; height:48px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.carousel-btn svg{ width:20px; height:20px; }
.carousel-btn:hover{
  background:var(--accent-soft); border-color:rgba(47,107,255,.5);
  box-shadow:0 0 24px -4px var(--accent-glow); transform:translateY(-2px);
}

/* ================= PROFESSOR ================= */
.professor{ overflow:hidden; }
.professor__inner{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center;
  position:relative; z-index:1;
}
@media (max-width:900px){
  .professor__inner{ grid-template-columns:1fr; gap:44px; text-align:center; }
  .professor__tags{ justify-content:center; }
}

.professor__visual{ position:relative; max-width:380px; margin-inline:auto; }
.professor__photo-frame{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.02);
}
.professor__photo-frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(5,7,13,.5) 100%);
  pointer-events:none;
}
.professor__photo-frame picture{ display:block; }
.professor__photo-frame img{ width:100%; height:auto; display:block; aspect-ratio:800 / 1202; object-fit:cover; }

.professor__badge{
  position:absolute; bottom:-18px; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:13px;
}

.professor__content p{ color:var(--text-dim); font-size:16px; line-height:1.75; margin-bottom:16px; max-width:58ch; }
.professor__content p strong{ color:var(--text); }
.professor__content .section-title{ margin-bottom:20px; }

.professor__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.professor__tags li{
  font-size:12.5px; font-weight:600; padding:8px 15px; border-radius:100px;
  background:var(--accent-soft); border:1px solid rgba(47,107,255,.3); color:var(--accent-2);
}

/* ================= O QUE VOCÊ RECEBE ================= */
#entregaveis{ background:var(--bg-soft); }
#entregaveis .section-head{ max-width:720px; margin-inline:auto; text-align:center; }

/* ================= OFERTA ================= */
.offer{ text-align:center; overflow:hidden; }
.offer__inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.offer__head{ margin-inline:auto; text-align:center; }
.offer__head .section-lead{ margin-inline:auto; }

.offer-card{
  position:relative;
  width:100%; max-width:440px;
  padding:44px 36px 40px;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--bg-elevated), var(--bg-soft));
  border:1px solid rgba(47,107,255,.35);
  box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 40px 90px -30px rgba(47,107,255,.5);
  display:flex; flex-direction:column; align-items:center;
}

.offer-card__badge{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-2); background:var(--accent-soft); border:1px solid rgba(47,107,255,.35);
  padding:7px 16px; border-radius:100px; margin-bottom:26px;
}

.offer-card__price{
  display:flex; align-items:flex-start; gap:4px; line-height:1;
  filter:drop-shadow(0 0 30px var(--accent-glow));
}
.offer-card__currency{
  font-family:var(--font-head); font-weight:700; font-size:28px; margin-top:10px;
  background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.offer-card__value{
  font-family:var(--font-head); font-weight:800; font-size:clamp(64px,10vw,96px);
  background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.offer-card__cycle{ font-size:13.5px; color:var(--text-dim); margin-top:8px; margin-bottom:30px; }

.offer-card__list{ width:100%; display:flex; flex-direction:column; gap:14px; margin-bottom:34px; }
.offer-card__list li{
  display:flex; align-items:flex-start; gap:10px; text-align:left;
  font-size:14.5px; color:var(--text-dim); line-height:1.5;
}
.offer-card__list li::before{
  content:'✓'; flex-shrink:0; width:20px; height:20px; margin-top:1px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-2); font-size:11px; font-weight:700;
}

.offer-card__cta{ width:100%; }
.offer-card__secure{
  display:flex; align-items:center; gap:7px;
  margin-top:18px; font-size:12.5px; color:var(--text-faint);
}
.offer-card__secure svg{ width:14px; height:14px; }

/* ================= GARANTIA ================= */
.guarantee{ text-align:center; overflow:hidden; position:relative; }
.guarantee__inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.guarantee__head{ margin-inline:auto; text-align:center; }
.guarantee__head .section-lead{ margin-inline:auto; }

.guarantee-card{
  position:relative;
  width:100%; max-width:720px;
  padding:52px 40px 40px;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--bg-elevated), var(--bg-soft));
  border:1px solid rgba(34,196,255,.3);
  box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 40px 90px -30px rgba(34,196,255,.35);
  display:flex; flex-direction:column; align-items:center;
}
@media (max-width:600px){ .guarantee-card{ padding:44px 22px 32px; } }

.guarantee-badge{
  position:relative;
  width:112px; height:112px;
  margin-bottom:22px;
  display:grid; place-items:center;
}
.guarantee-badge__shield{
  width:100%; height:100%;
  animation:guarantee-pulse 3.2s ease-in-out infinite;
}
@keyframes guarantee-pulse{
  0%,100%{ filter:drop-shadow(0 0 10px rgba(47,107,255,.45)); transform:scale(1); }
  50%{ filter:drop-shadow(0 0 24px rgba(34,196,255,.75)); transform:scale(1.03); }
}

.guarantee-card__tag{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-2); background:var(--accent-soft); border:1px solid rgba(47,107,255,.35);
  padding:7px 16px; border-radius:100px; margin-bottom:22px;
}

.guarantee-card__title{
  font-family:var(--font-head); font-weight:700; font-size:clamp(22px,3vw,30px);
  line-height:1.32; letter-spacing:-.01em; margin-bottom:16px; max-width:32ch;
}
.guarantee-card__body{
  color:var(--text-dim); font-size:15.5px; line-height:1.7; max-width:56ch; margin-bottom:34px;
}

.guarantee-grid{
  width:100%; display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  margin-bottom:32px;
}
@media (max-width:640px){ .guarantee-grid{ grid-template-columns:1fr; } }

.guarantee-item{
  display:flex; align-items:flex-start; gap:12px; text-align:left;
  padding:16px 18px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.03); border:1px solid var(--border-soft);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.guarantee-item:hover{ border-color:rgba(34,196,255,.35); background:rgba(34,196,255,.05); }
.guarantee-item svg{
  flex-shrink:0; width:20px; height:20px; margin-top:2px;
  padding:3px; box-sizing:content-box;
  border-radius:50%; background:var(--accent-soft); color:var(--accent-2);
}
.guarantee-item span{ font-size:14px; line-height:1.55; color:var(--text-dim); }
.guarantee-item strong{ color:var(--text); font-weight:600; }

.guarantee-card__footer{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding-top:26px; border-top:1px solid var(--border-soft);
  font-size:13.5px; color:var(--text-faint);
}
.guarantee-card__footer svg{ flex-shrink:0; width:18px; height:18px; color:var(--accent-2); }
.guarantee-card__footer strong{ color:var(--text-dim); font-weight:600; }
@media (max-width:520px){
  .guarantee-card__footer{ flex-direction:column; gap:8px; text-align:center; }
}

/* ================= FAQ ================= */
.faq__list{ display:flex; flex-direction:column; gap:12px; max-width:820px; }
.faq-item{ border:1px solid var(--border-soft); border-radius:var(--radius-sm); background:var(--surface); overflow:hidden; }
.faq-item__q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; font-family:var(--font-head); font-weight:600; font-size:16px; text-align:left;
}
.faq-item__q svg{ width:18px; height:18px; flex-shrink:0; margin-left:16px; transition:transform .35s var(--ease); color:var(--accent-2); }
.faq-item.is-open .faq-item__q svg{ transform:rotate(45deg); }
.faq-item__a{ height:0; overflow:hidden; }
.faq-item__a p{ padding:0 22px 20px; color:var(--text-dim); font-size:14.5px; line-height:1.65; max-width:64ch; }

/* ================= PATRIMÔNIO / VALOR ================= */
#patrimonio{
  position:relative; overflow:hidden; text-align:center;
  background:radial-gradient(ellipse 85% 55% at 50% 30%, rgba(47,107,255,.14), transparent), var(--bg);
}
.value__inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.value__head{ max-width:760px; margin-inline:auto; text-align:center; }
.value__head .section-lead{ margin-inline:auto; }

.value-punch{
  margin:34px auto 12px; text-align:center; align-items:center; color:var(--text-dim);
}

.value-grid{
  width:100%; margin-top:44px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
@media (max-width:860px){ .value-grid{ grid-template-columns:1fr; gap:18px; max-width:520px; } }

.value-card{
  position:relative; text-align:left;
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:32px 28px;
  background:linear-gradient(165deg, var(--surface), transparent);
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.value-card:hover{
  transform:translateY(-6px); border-color:rgba(47,107,255,.4);
  box-shadow:0 30px 60px -30px rgba(47,107,255,.55);
}
.value-card--featured{
  border-color:rgba(34,196,255,.4);
  background:linear-gradient(165deg, rgba(34,196,255,.09), transparent);
  box-shadow:0 0 0 1px rgba(34,196,255,.12), 0 34px 70px -34px rgba(34,196,255,.5);
}
.value-card__icon{
  display:grid; place-items:center;
  width:54px; height:54px; border-radius:15px; margin-bottom:20px;
  background:var(--gradient); color:#fff;
  box-shadow:0 12px 26px -10px var(--accent-glow);
}
.value-card__icon svg{ width:26px; height:26px; }
.value-card h3{ font-family:var(--font-head); font-weight:600; font-size:19px; margin-bottom:10px; letter-spacing:-.01em; }
.value-card p{ color:var(--text-dim); font-size:14.5px; line-height:1.65; }

.value-closing{
  max-width:640px; margin:44px auto 0;
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(17px,2vw,21px); line-height:1.55; color:var(--text-dim);
}
.value-closing strong{ color:var(--text); font-weight:700; }
.value__cta{ margin-top:34px; }

/* ================= FINAL CTA ================= */
.final-cta{
  position:relative; text-align:center; overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% 20%, rgba(47,107,255,.16), transparent), var(--bg);
  padding:150px 0;
}
.final-cta .container{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.final-cta__title{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(28px,4.6vw,50px); line-height:1.18; letter-spacing:-.02em;
  max-width:820px; margin-bottom:18px;
}
.final-cta__title .word{ display:inline-block; }
.final-cta__alt{
  font-family:var(--font-head); font-weight:600; font-size:clamp(18px,2vw,23px);
  background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:22px;
}
.final-cta__body{ color:var(--text-dim); font-size:16px; max-width:60ch; margin-bottom:40px; line-height:1.7; }
.final-cta__proof{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-top:30px; }

/* ================= FOOTER ================= */
.footer{ border-top:1px solid var(--border-soft); padding:60px 0 0; background:var(--bg-soft); }
.footer__inner{
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px;
  padding-bottom:44px; border-bottom:1px solid var(--border-soft);
}
@media (max-width:760px){ .footer__inner{ grid-template-columns:1fr; gap:28px; } }
.footer__brand p{ margin-top:14px; color:var(--text-faint); font-size:14px; max-width:32ch; line-height:1.6; }
.footer__links{ display:flex; flex-direction:column; gap:12px; font-size:14.5px; color:var(--text-dim); }
.footer__links a:hover{ color:var(--text); }
.footer__contact{ display:flex; flex-direction:column; gap:10px; font-size:14.5px; }
.footer__contact span{ color:var(--text-faint); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.footer__contact a:hover{ color:var(--accent-2); }
.footer__bottom{ padding:24px 0; font-size:13px; color:var(--text-faint); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; }

/* ================= STICKY CTA ================= */
.sticky-cta{
  position:fixed; bottom:20px; left:50%;
  transform:translate(-50%, 140%);
  z-index:90;
  display:flex; align-items:center; gap:18px;
  padding:14px 16px 14px 24px;
  background:rgba(10,12,23,.85);
  backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:100px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8);
  transition:transform .5s var(--ease);
}
.sticky-cta.is-visible{ transform:translate(-50%, 0); }
.sticky-cta p{ font-size:14px; font-weight:600; white-space:nowrap; }
@media (max-width:640px){
  .sticky-cta{ left:16px; right:16px; transform:translateY(140%); width:auto; }
  .sticky-cta.is-visible{ transform:translateY(0); }
  .sticky-cta p{ display:none; }
  .sticky-cta .btn{ width:100%; }
}

/* ================= PÁGINAS INTERNAS (/descontao, /kit-sistemas) ================= */
.page-hero{
  position:relative; overflow:hidden;
  padding:170px 0 90px;
}
@media (max-width:768px){ .page-hero{ padding:120px 0 64px; } }
.page-hero__inner{ position:relative; z-index:2; max-width:820px; }
.page-hero__title{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(32px, 4.4vw, 54px); line-height:1.1; letter-spacing:-.03em;
  margin-bottom:20px;
  background:var(--gradient-text); background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px var(--accent-glow));
}
.page-hero__lead{
  font-size:clamp(16px,1.6vw,19px); color:var(--text-dim);
  max-width:60ch; margin-bottom:34px;
}
.page-hero__lead strong{ color:var(--text); font-weight:600; }

/* marcador temporário — remover quando o conteúdo real entrar */
.page-placeholder{
  border:1px dashed rgba(47,107,255,.4);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg, rgba(47,107,255,.07), transparent);
  padding:48px 32px; text-align:center;
}
.page-placeholder h2{
  font-family:var(--font-head); font-size:clamp(20px,2.4vw,26px); margin-bottom:10px;
}
.page-placeholder p{ color:var(--text-dim); font-size:15px; max-width:52ch; margin-inline:auto; }
.page-placeholder__tag{
  display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-2); background:var(--accent-soft);
  border:1px solid rgba(47,107,255,.3); padding:6px 14px; border-radius:100px; margin-bottom:18px;
}

/* ================= KIT DE SISTEMAS ================= */
.kit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:920px){ .kit-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (max-width:600px){ .kit-grid{ grid-template-columns:1fr; } }

.kit-card{
  position:relative;
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:26px 22px;
  background:linear-gradient(160deg, var(--surface), transparent);
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.kit-card:hover{
  border-color:rgba(47,107,255,.45); transform:translateY(-5px);
  box-shadow:0 26px 50px -28px rgba(47,107,255,.5);
}
.kit-card__icon{
  display:grid; place-items:center;
  width:46px; height:46px; border-radius:13px; margin-bottom:16px;
  background:var(--accent-soft); border:1px solid rgba(47,107,255,.32);
  color:var(--accent-2);
}
.kit-card__icon svg{ width:22px; height:22px; }
.kit-card h3{ font-family:var(--font-head); font-weight:600; font-size:17px; margin-bottom:8px; }
.kit-card p{ color:var(--text-dim); font-size:14px; line-height:1.6; }

/* bônus / o que vem além */
.bonus-card{
  border:1px solid rgba(47,107,255,.28); border-radius:var(--radius-lg);
  background:linear-gradient(160deg, rgba(47,107,255,.09), transparent);
  padding:36px 32px;
}
@media (max-width:600px){ .bonus-card{ padding:28px 22px; } }
.bonus-list{ display:flex; flex-direction:column; gap:16px; }
.bonus-list li{
  display:flex; gap:13px; align-items:flex-start;
  font-size:15.5px; color:var(--text-dim); line-height:1.6;
}
.bonus-list li svg{ width:20px; height:20px; flex-shrink:0; margin-top:2px; color:var(--accent-2); }
.bonus-list li strong{ color:var(--text); font-weight:600; }

/* números de tempo de aplicação */
.kit-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:760px; }
@media (max-width:600px){ .kit-stats{ grid-template-columns:1fr; } }
.kit-stat{
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:30px 26px; background:var(--surface); text-align:center;
}
.kit-stat strong{
  display:block; font-family:var(--font-head); font-weight:800;
  font-size:clamp(30px,4.4vw,44px); line-height:1.1; margin-bottom:8px;
  background:var(--gradient-text); background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 20px var(--accent-glow));
}
.kit-stat span{ font-size:14.5px; color:var(--text-dim); }

/* preço comparativo (combo / descontão) */
.offer-card__compare{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px;
  margin-bottom:10px;
}
.offer-card__was{
  font-size:15px; color:var(--text-faint);
}
.offer-card__was s{
  font-size:21px; color:var(--text-dim); text-decoration-thickness:2px;
}
.offer-card__savings{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-2); background:rgba(34,196,255,.12); border:1px solid rgba(34,196,255,.28);
  padding:5px 12px; border-radius:100px;
}
.kit-card__time{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--accent-2); text-transform:uppercase;
}
.kit-stats--combo{ grid-template-columns:repeat(2,1fr); }
.kit-stats--combo .kit-stat:last-child{
  grid-column:1/-1; max-width:360px; margin-inline:auto; width:100%;
}

/* ================= REVEAL UTILS ================= */
/* só esconde para animar quando o JS está ativo — sem JS, tudo aparece normalmente */
.js [data-reveal], .js [data-split]{ opacity:0; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal], [data-split]{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none; }
}

/* ================= PÁGINAS LEGAIS ================= */
.legal-page .progress-bar,
.legal-page .cursor-glow,
.legal-page .sticky-cta{ display:none; }

.nav--legal{ background:rgba(6,7,13,.92); backdrop-filter:blur(16px); }

.legal{
  position:relative;
  padding:140px 0 80px;
}
@media (max-width:768px){ .legal{ padding:110px 0 56px; } }

.legal__inner{ max-width:760px; }

.legal__header{
  margin-bottom:48px;
  padding-bottom:32px;
  border-bottom:1px solid var(--border-soft);
}
.legal__title{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(28px, 3.6vw, 42px); line-height:1.15; letter-spacing:-.03em;
  margin:16px 0 12px;
  background:var(--gradient-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.legal__updated{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint);
}

.legal__body{
  color:var(--text-dim);
  font-size:15.5px;
  line-height:1.75;
}
.legal__body > p{ margin-bottom:18px; }
.legal__body h2{
  font-family:var(--font-head); font-weight:600; font-size:20px;
  color:var(--text); margin:40px 0 14px; letter-spacing:-.02em;
}
.legal__body h2:first-child{ margin-top:0; }
.legal__body ul{
  margin:0 0 18px; padding-left:1.25em;
  display:flex; flex-direction:column; gap:10px;
}
.legal__body li{ padding-left:4px; }
.legal__body li strong{ color:var(--text); font-weight:600; }
.legal__body a{
  color:var(--accent-2); text-decoration:underline;
  text-decoration-color:rgba(34,196,255,.35);
  text-underline-offset:3px;
  transition:color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.legal__body a:hover{
  color:var(--text);
  text-decoration-color:rgba(245,246,251,.45);
}

.footer__legal{
  display:flex; flex-wrap:wrap; gap:8px 20px;
  margin-top:8px; font-size:13px;
}
.footer__legal a{ color:var(--text-faint); transition:color .25s var(--ease); }
.footer__legal a:hover{ color:var(--text-dim); }
.footer__legal a[aria-current="page"]{ color:var(--text-dim); }