/* =================================================================
   Papiro, by Mentoris  ·  Landing page
   CSS puro, dark mode. Tokens herdados do app (globals.css).
   ================================================================= */

/* ----------------------------- TOKENS ---------------------------- */
:root{
  --bg:            #080A0F;
  --bg-soft:       #0C0F16;
  --bg-subtle:     #11151E;
  --surface:       #141924;
  --surface-2:     #1B212F;
  --surface-3:     #212838;
  --border:        #262D3E;
  --border-strong: #374157;

  --content:       #E9EDF5;
  --muted:         #9CA6BB;
  --subtle:        #6D788E;

  --brand:         #818CF8;
  --brand-deep:    #4338CA;
  --brand-ink:     #FFFFFF;

  --success:       #34D399;
  --danger:        #FB7185;
  --warning:       #FBBF24;
  --info:          #38BDF8;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;

  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.35), 0 24px 60px -24px rgba(0,0,0,.75);
  --shadow-glow: 0 0 0 1px rgba(129,140,248,.30), 0 8px 30px -8px rgba(129,140,248,.35);

  --ease: cubic-bezier(.16,1,.3,1);
  --wrap: 1200px;
  --head-h: 68px;
}

/* ----------------------------- RESET ----------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + 16px);
}
body{
  background:var(--bg);
  color:var(--content);
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16px;
  line-height:1.6;
  font-feature-settings:"cv02","cv03","cv04","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  color-scheme:dark;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }
mark{ background:none; color:inherit; }
::selection{ background:rgba(129,140,248,.35); color:#fff; }

/* brilho ambiente, igual ao do app */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 12% -12%, rgba(129,140,248,.10), transparent 60%),
    radial-gradient(52rem 40rem at 112% 6%,  rgba(56,189,248,.07),  transparent 55%);
}

/* barra de rolagem */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:#48536b; }

/* foco visível */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:6px;
}
.skip-link{
  position:absolute; left:-9999px; top:12px; z-index:200;
  background:var(--brand); color:#fff; padding:10px 16px; border-radius:var(--r-md); font-weight:600;
}
.skip-link:focus{ left:12px; }

/* ---------------------------- LAYOUT ----------------------------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}

/* --------------------------- TIPOGRAFIA -------------------------- */
.grad{
  background:linear-gradient(100deg,#A5B4FC 0%,#818CF8 42%,#38BDF8 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------------------------- BOTÕES ----------------------------- */
.btn{
  --btn-py:12px; --btn-px:20px; --btn-fs:15px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:var(--btn-py) var(--btn-px);
  font-size:var(--btn-fs); font-weight:600; letter-spacing:-.01em;
  border-radius:var(--r-md);
  border:1px solid transparent;
  white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease),
             background-color .2s var(--ease), border-color .2s var(--ease), filter .2s var(--ease);
}
.btn svg{ width:18px; height:18px; flex:none; transition:transform .25s var(--ease); }
.btn-sm{ --btn-py:9px; --btn-px:16px; --btn-fs:14px; }
.btn-lg{ --btn-py:15px; --btn-px:28px; --btn-fs:16.5px; }
.btn-block{ width:100%; }

.btn-brand{
  position:relative;
  overflow:hidden; /* sem isso, o brilho de ::after descansa visível à esquerda do botão */
  background:linear-gradient(180deg,#8B95F9 0%,#6D78F0 100%);
  color:var(--brand-ink);
  box-shadow:0 4px 20px -6px rgba(129,140,248,.7), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-brand::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.28) 48%,transparent 62%);
  transform:translateX(-120%);
}
.btn-brand:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
  box-shadow:0 10px 34px -8px rgba(129,140,248,.85), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-brand:hover::after{ animation:sheen .85s var(--ease); }
.btn-brand:hover svg{ transform:translateX(3px); }
.btn-brand:active{ transform:translateY(0) scale(.985); }
@keyframes sheen{ to{ transform:translateX(120%); } }

.btn-ghost{
  background:rgba(255,255,255,.03);
  border-color:var(--border);
  color:var(--content);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.06);
  border-color:var(--border-strong);
  transform:translateY(-2px);
}
.btn-ghost:active{ transform:translateY(0) scale(.985); }

.link-quiet{
  font-size:14.5px; font-weight:500; color:var(--muted);
  transition:color .2s var(--ease);
}
.link-quiet:hover{ color:var(--content); }

/* ---------------------------- HEADER ----------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--head-h);
  display:flex; align-items:center;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck,
.site-header.menu-open{
  background:rgba(8,10,15,.72);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom-color:var(--border);
}
/* com o menu mobile aberto, funde visualmente com o painel abaixo:
   mesmo tom sólido do menu, sem a transição/blur "revelando" a mudança */
.site-header.menu-open{
  background:rgba(8,10,15,.97);
  transition:none;
}
.header-inner{
  display:flex; align-items:center; gap:28px;
}

.brand{ display:flex; flex-direction:column; gap:1px; flex:none; }
.brand-mark{ height:24px; width:auto; object-fit:contain; }
.brand-sig{
  font-size:8.5px; font-weight:600; letter-spacing:.26em;
  text-transform:uppercase; color:var(--subtle); padding-left:2px;
}

.nav-desk{ display:flex; align-items:center; gap:4px; margin-inline:auto; }
.nav-desk a{
  position:relative;
  padding:8px 14px; border-radius:var(--r-sm);
  font-size:14.5px; font-weight:500; color:var(--muted);
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav-desk a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px; height:1.5px;
  background:var(--brand); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-desk a:hover{ color:var(--content); }
.nav-desk a:hover::after{ transform:scaleX(1); }

.header-cta{ display:flex; align-items:center; gap:16px; flex:none; }

.burger{
  display:none; width:40px; height:40px; margin-left:auto;
  border-radius:var(--r-sm); border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  flex-direction:column; align-items:center; justify-content:center; gap:4.5px;
}
.burger span{
  display:block; width:17px; height:1.8px; border-radius:2px; background:var(--content);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.3px) rotate(-45deg); }

/* menu mobile */
.menu-mobile{
  position:fixed; inset:var(--head-h) 0 0; z-index:99;
  background:rgba(8,10,15,.97);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  padding:24px; display:flex; flex-direction:column; gap:8px;
  animation:menuIn .28s var(--ease);
}
.menu-mobile[hidden]{ display:none; }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-10px);} to{ opacity:1; transform:none;} }
.menu-mobile nav{ display:flex; flex-direction:column; }
.menu-mobile nav a{
  padding:16px 4px; font-size:19px; font-weight:600; letter-spacing:-.02em;
  border-bottom:1px solid var(--border);
}
.menu-mobile-foot{ margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-bottom:20px; }

/* ============================= HERO ============================== */
.hero{
  position:relative;
  padding-top:calc(var(--head-h) + 60px);
  padding-bottom:40px;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-180px; left:50%; transform:translateX(-50%);
  width:min(1100px,140vw); height:640px;
  background:radial-gradient(ellipse at center, rgba(129,140,248,.16), transparent 68%);
  filter:blur(20px);
}

/* linhas de fundo: traços finos parados (camada base) + um brilho curto
   que percorre cada um de vez em quando (camada -glow). Decorativo, atrás
   de tudo. pathLength="1" nos traços de brilho normaliza o dasharray para
   0..1, então o mesmo padrão funciona igual em curvas de comprimentos
   bem diferentes. */
.hero-lines{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  opacity:.9;
  /* dissolve antes da borda do hero, em vez de ser cortada em cheio ali */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
}
.hero-lines path{ fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; }

.hero-lines-base path{ stroke:url(#heroLineGrad); }
.hero-lines-base path:nth-child(1) { opacity:.20; }
.hero-lines-base path:nth-child(2) { opacity:.11; }
.hero-lines-base path:nth-child(3) { opacity:.24; }
.hero-lines-base path:nth-child(4) { opacity:.08; }
.hero-lines-base path:nth-child(5) { opacity:.17; }
.hero-lines-base path:nth-child(6) { opacity:.14; }
.hero-lines-base path:nth-child(7) { opacity:.22; }
.hero-lines-base path:nth-child(8) { opacity:.08; }
.hero-lines-base path:nth-child(9) { opacity:.18; }
.hero-lines-base path:nth-child(10){ opacity:.11; }
.hero-lines-base path:nth-child(11){ opacity:.15; }
.hero-lines-base path:nth-child(12){ opacity:.21; }

/* ondulação bem sutil de cada traço base: desloca só os pontos internos
   da curva (as pontas continuam fora do viewBox, fixas), cada linha com
   duração e fase próprias pra nunca ondularem em sincronia. Gerado por
   scripts/gen_wave_paths.py; troque as curvas lá, não aqui. */
#hl0  { animation: hlWave0  22.1s ease-in-out infinite; animation-delay: -18.4s; }
#hl1  { animation: hlWave1  41.2s ease-in-out infinite; animation-delay: -9.4s;  }
#hl2  { animation: hlWave2  41.1s ease-in-out infinite; animation-delay: -22.4s; }
#hl3  { animation: hlWave3  39.0s ease-in-out infinite; animation-delay: -14.5s; }
#hl4  { animation: hlWave4  40.0s ease-in-out infinite; animation-delay: -14.1s; }
#hl5  { animation: hlWave5  36.6s ease-in-out infinite; animation-delay: -27.4s; }
#hl6  { animation: hlWave6  37.1s ease-in-out infinite; animation-delay: -28.3s; }
#hl7  { animation: hlWave7  37.5s ease-in-out infinite; animation-delay: -20.0s; }
#hl8  { animation: hlWave8  35.4s ease-in-out infinite; animation-delay: -34.3s; }
#hl9  { animation: hlWave9  34.7s ease-in-out infinite; animation-delay: -5.0s;  }
#hl10 { animation: hlWave10 34.5s ease-in-out infinite; animation-delay: -27.2s; }
#hl11 { animation: hlWave11 30.5s ease-in-out infinite; animation-delay: -28.4s; }

@keyframes hlWave0 {
  0%   { d: path("M-100,60 C300,-40 600,220 900,140 C1200,60 1350,260 1600,180"); }
  25%  { d: path("M-100,60 C300,-58.9 600,206.5 900,154.6 C1200,50.2 1350,273.1 1600,180"); }
  50%  { d: path("M-100,60 C300,-40 600,220 900,140 C1200,60 1350,260 1600,180"); }
  75%  { d: path("M-100,60 C300,-18.3 600,231.2 900,150.6 C1200,70.0 1350,242.3 1600,180"); }
  100% { d: path("M-100,60 C300,-40 600,220 900,140 C1200,60 1350,260 1600,180"); }
}
@keyframes hlWave1 {
  0%   { d: path("M-100,140 C280,40 620,320 920,240 C1220,160 1360,340 1600,260"); }
  25%  { d: path("M-100,140 C280,20.0 620,299.6 920,228.9 C1220,143.1 1360,354.2 1600,260"); }
  50%  { d: path("M-100,140 C280,40 620,320 920,240 C1220,160 1360,340 1600,260"); }
  75%  { d: path("M-100,140 C280,21.8 620,311.5 920,228.6 C1220,150.3 1360,360.5 1600,260"); }
  100% { d: path("M-100,140 C280,40 620,320 920,240 C1220,160 1360,340 1600,260"); }
}
@keyframes hlWave2 {
  0%   { d: path("M-100,220 C260,120 640,400 940,320 C1240,240 1380,420 1600,340"); }
  25%  { d: path("M-100,220 C260,104.8 640,411.6 940,306.0 C1240,254.5 1380,431.5 1600,340"); }
  50%  { d: path("M-100,220 C260,120 640,400 940,320 C1240,240 1380,420 1600,340"); }
  75%  { d: path("M-100,220 C260,103.8 640,391.9 940,301.5 C1240,228.5 1380,433.2 1600,340"); }
  100% { d: path("M-100,220 C260,120 640,400 940,320 C1240,240 1380,420 1600,340"); }
}
@keyframes hlWave3 {
  0%   { d: path("M-100,10 C340,150 560,-60 880,80 C1180,200 1300,20 1600,120"); }
  25%  { d: path("M-100,10 C340,134.6 560,-44.1 880,95.5 C1180,217.5 1300,29.5 1600,120"); }
  50%  { d: path("M-100,10 C340,150 560,-60 880,80 C1180,200 1300,20 1600,120"); }
  75%  { d: path("M-100,10 C340,161.6 560,-80.2 880,67.5 C1180,211.2 1300,7.1 1600,120"); }
  100% { d: path("M-100,10 C340,150 560,-60 880,80 C1180,200 1300,20 1600,120"); }
}
@keyframes hlWave4 {
  0%   { d: path("M-100,300 C300,200 660,460 960,380 C1240,310 1400,480 1600,420"); }
  25%  { d: path("M-100,300 C300,214.5 660,480.1 960,361.1 C1240,324.5 1400,460.1 1600,420"); }
  50%  { d: path("M-100,300 C300,200 660,460 960,380 C1240,310 1400,480 1600,420"); }
  75%  { d: path("M-100,300 C300,191.6 660,439.8 960,364.0 C1240,327.6 1400,458.4 1600,420"); }
  100% { d: path("M-100,300 C300,200 660,460 960,380 C1240,310 1400,480 1600,420"); }
}
@keyframes hlWave5 {
  0%   { d: path("M-100,380 C320,280 640,520 940,460 C1240,400 1420,540 1600,500"); }
  25%  { d: path("M-100,380 C320,298.6 640,510.0 940,469.0 C1240,391.7 1420,528.5 1600,500"); }
  50%  { d: path("M-100,380 C320,280 640,520 940,460 C1240,400 1420,540 1600,500"); }
  75%  { d: path("M-100,380 C320,292.8 640,539.0 940,448.7 C1240,413.4 1420,525.1 1600,500"); }
  100% { d: path("M-100,380 C320,280 640,520 940,460 C1240,400 1420,540 1600,500"); }
}
@keyframes hlWave6 {
  0%   { d: path("M-100,-20 C380,120 520,-100 860,40 C1160,160 1320,-40 1600,80"); }
  25%  { d: path("M-100,-20 C380,131.5 520,-91.2 860,60.4 C1160,173.5 1320,-21.4 1600,80"); }
  50%  { d: path("M-100,-20 C380,120 520,-100 860,40 C1160,160 1320,-40 1600,80"); }
  75%  { d: path("M-100,-20 C380,134.6 520,-83.2 860,28.1 C1160,173.0 1320,-20.1 1600,80"); }
  100% { d: path("M-100,-20 C380,120 520,-100 860,40 C1160,160 1320,-40 1600,80"); }
}
@keyframes hlWave7 {
  0%   { d: path("M-100,460 C340,360 600,580 920,520 C1220,470 1440,600 1600,560"); }
  25%  { d: path("M-100,460 C340,382.0 600,560.9 920,531.3 C1220,490.6 1440,583.9 1600,560"); }
  50%  { d: path("M-100,460 C340,360 600,580 920,520 C1220,470 1440,600 1600,560"); }
  75%  { d: path("M-100,460 C340,351.8 600,558.8 920,509.3 C1220,478.3 1440,583.2 1600,560"); }
  100% { d: path("M-100,460 C340,360 600,580 920,520 C1220,470 1440,600 1600,560"); }
}
@keyframes hlWave8 {
  0%   { d: path("M-100,200 C250,80 700,340 1000,260 C1300,180 1400,300 1600,240"); }
  25%  { d: path("M-100,200 C250,89.6 700,361.7 1000,245.0 C1300,196.4 1400,308.9 1600,240"); }
  50%  { d: path("M-100,200 C250,80 700,340 1000,260 C1300,180 1400,300 1600,240"); }
  75%  { d: path("M-100,200 C250,70.6 700,360.7 1000,277.4 C1300,164.8 1400,287.6 1600,240"); }
  100% { d: path("M-100,200 C250,80 700,340 1000,260 C1300,180 1400,300 1600,240"); }
}
@keyframes hlWave9 {
  0%   { d: path("M-100,540 C360,440 620,620 940,580 C1240,540 1420,640 1600,600"); }
  25%  { d: path("M-100,540 C360,450.8 620,601.5 940,596.4 C1240,552.5 1420,627.2 1600,600"); }
  50%  { d: path("M-100,540 C360,440 620,620 940,580 C1240,540 1420,640 1600,600"); }
  75%  { d: path("M-100,540 C360,419.7 620,641.0 940,599.8 C1240,557.7 1420,624.2 1600,600"); }
  100% { d: path("M-100,540 C360,440 620,620 940,580 C1240,540 1420,640 1600,600"); }
}
@keyframes hlWave10 {
  0%   { d: path("M-100,80 C420,220 500,-20 840,100 C1140,220 1300,20 1600,140"); }
  25%  { d: path("M-100,80 C420,207.1 500,-5.3 840,78.7 C1140,209.2 1300,31.1 1600,140"); }
  50%  { d: path("M-100,80 C420,220 500,-20 840,100 C1140,220 1300,20 1600,140"); }
  75%  { d: path("M-100,80 C420,231.7 500,-30.0 840,85.3 C1140,199.2 1300,-1.7 1600,140"); }
  100% { d: path("M-100,80 C420,220 500,-20 840,100 C1140,220 1300,20 1600,140"); }
}
@keyframes hlWave11 {
  0%   { d: path("M-100,600 C380,500 640,660 960,620 C1260,580 1440,660 1600,630"); }
  25%  { d: path("M-100,600 C380,482.6 640,672.8 960,631.1 C1260,563.8 1440,673.3 1600,630"); }
  50%  { d: path("M-100,600 C380,500 640,660 960,620 C1260,580 1440,660 1600,630"); }
  75%  { d: path("M-100,600 C380,519.5 640,675.2 960,631.9 C1260,560.7 1440,648.2 1600,630"); }
  100% { d: path("M-100,600 C380,500 640,660 960,620 C1260,580 1440,660 1600,630"); }
}

/* o brilho não roda mais sozinho em loop: js/main.js sorteia quando cada
   traço acende (no máx. 3 ao mesmo tempo, intervalos irregulares) e só
   liga a classe .is-sweeping por uma passada. Parado = invisível. */
.hero-lines-glow path{
  stroke:#E4E8FF;
  stroke-dasharray:.1 999;
  stroke-dashoffset:.15;
  opacity:0;
  filter:drop-shadow(0 0 4px rgba(165,180,252,.85));
}
.hero-lines-glow path.is-sweeping{
  animation:heroGlowSweep var(--sweep-dur, 3.2s) cubic-bezier(.4,.05,.35,1) both;
}
@keyframes heroGlowSweep{
  0%   { stroke-dashoffset:.15;   opacity:0; }
  8%   { opacity:.95; }
  90%  { opacity:.95; }
  100% { stroke-dashoffset:-1.15; opacity:0; }
}
.hero-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  grid-template-rows:auto auto;
  column-gap:56px; row-gap:0;
  align-items:center;
}
/* desktop: texto principal em cima, "funciona com prova de..." embaixo,
   a animação ocupa as duas linhas da coluna ao lado, centralizada */
.hero-copy{ grid-column:1; grid-row:1; }
.hero-stage{ grid-column:2; grid-row:1 / 3; align-self:center; }
.hero-areas{ grid-column:1; grid-row:2; }

/* ---- coluna de texto ---- */
.badge-pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 12px; border-radius:99px;
  background:rgba(129,140,248,.09);
  border:1px solid rgba(129,140,248,.26);
  font-size:12.8px; font-weight:600; letter-spacing:.01em; color:#BFC6FC;
}
.badge-dot{
  width:7px; height:7px; border-radius:50%; background:var(--brand); flex:none;
  box-shadow:0 0 0 0 rgba(129,140,248,.6);
  animation:pulseDot 2.4s ease-out infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(129,140,248,.55); }
  70%{ box-shadow:0 0 0 9px rgba(129,140,248,0); }
  100%{ box-shadow:0 0 0 0 rgba(129,140,248,0); }
}

.hero-title{
  margin-top:22px;
  font-size:clamp(2.15rem, 4.6vw, 3.65rem);
  line-height:1.06;
  letter-spacing:-.034em;
  font-weight:800;
}
.hero-sub{
  margin-top:22px;
  max-width:37em;
  font-size:clamp(1rem, 1.22vw, 1.1rem);
  line-height:1.65;
  color:var(--muted);
}
.hero-actions{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }

.hero-trust{
  margin-top:24px; display:flex; flex-wrap:wrap; gap:8px 22px;
}
.hero-trust li{
  display:flex; align-items:center; gap:7px;
  font-size:13.6px; font-weight:500; color:var(--subtle);
}
.hero-trust svg{ width:16px; height:16px; color:var(--success); flex:none; }

.hero-areas{
  margin-top:26px; padding-top:22px;
  border-top:1px solid var(--border);
  font-size:14px; line-height:1.6; color:var(--subtle); max-width:34em;
}
.hero-areas b{ color:var(--muted); font-weight:600; }

/* ================= ANIMAÇÃO DO HERO (PDF -> QUESTÃO) ============== */
.hero-stage{
  position:relative;
  height:520px;
  display:flex; align-items:center; justify-content:center;
}
.stage-halo{
  position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(129,140,248,.20), transparent 66%);
  filter:blur(28px);
  animation:halo 7s ease-in-out infinite;
}
@keyframes halo{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%    { transform:scale(1.1); opacity:1; }
}

/* --- a página de PDF --- */
.hs-doc{
  position:absolute; z-index:1;
  width:262px; padding:16px 15px 18px;
  border-radius:var(--r-md);
  background:linear-gradient(180deg,#161B27 0%,#10141D 100%);
  border:1px solid var(--border);
  box-shadow:var(--shadow-lift);
  overflow:hidden;
  opacity:0;
  animation:hsDoc 12s var(--ease) infinite;
}
.hs-doc-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:11px; margin-bottom:13px;
  border-bottom:1px solid var(--border);
}
.hs-doc-tag{
  font-size:9.5px; font-weight:700; letter-spacing:.14em; color:var(--danger);
  padding:3px 7px; border-radius:5px; background:rgba(251,113,133,.11);
}
.hs-doc-pages{ font-size:9.5px; font-weight:600; color:var(--subtle); letter-spacing:.04em; }

.hs-l{
  height:6px; border-radius:99px; margin-bottom:8px;
  background:linear-gradient(90deg,#2A3145,#222839);
}
.hs-l.w90{ width:90%; } .hs-l.w88{ width:88%; } .hs-l.w82{ width:82%; }
.hs-l.w80{ width:80%; } .hs-l.w75{ width:75%; } .hs-l.w68{ width:68%; }

.hs-block{
  margin:12px 0 13px; border-radius:8px;
  border:1px dashed var(--border-strong);
  background:rgba(255,255,255,.016);
}
.hs-table{
  display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:8px;
}
.hs-table span{ height:5px; border-radius:99px; background:#2E3549; }
.hs-table span:nth-child(1),
.hs-table span:nth-child(2),
.hs-table span:nth-child(3){ background:#3B4359; }
.hs-fig{
  height:52px; display:grid; place-items:center; color:var(--info); opacity:.62;
}
.hs-fig svg{ width:78px; }

/* feixe de leitura */
.hs-scan{
  position:absolute; left:0; right:0; top:0; height:64px; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(129,140,248,0) 0%,
    rgba(129,140,248,.13) 55%,
    rgba(165,180,252,.55) 92%,
    rgba(224,231,255,.95) 100%);
  box-shadow:0 0 22px 4px rgba(129,140,248,.42);
  opacity:0;
  animation:hsScan 12s cubic-bezier(.5,.05,.5,.95) infinite;
}

@keyframes hsDoc{
  0%   { opacity:0; transform:translate3d(0,14px,0) scale(.95) rotate(-2deg); }
  5%   { opacity:1; transform:translate3d(0,0,0)   scale(1)   rotate(-2deg); }
  26%  { opacity:1; transform:translate3d(0,0,0)   scale(1)   rotate(-2deg); }
  36%  { opacity:.26; transform:translate3d(-56%,-16%,0) scale(.74) rotate(-9deg); }
  86%  { opacity:.26; transform:translate3d(-56%,-16%,0) scale(.74) rotate(-9deg); }
  93%  { opacity:0; transform:translate3d(-56%,-16%,0) scale(.72) rotate(-9deg); }
  100% { opacity:0; transform:translate3d(0,14px,0) scale(.95) rotate(-2deg); }
}
@keyframes hsScan{
  0%,5%  { opacity:0; transform:translateY(-70px); }
  8%     { opacity:1; }
  24%    { opacity:1; transform:translateY(330px); }
  27%    { opacity:0; transform:translateY(330px); }
  100%   { opacity:0; transform:translateY(-70px); }
}

/* --- etiquetas flutuantes --- */
.hs-chip{
  position:absolute; z-index:4;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:99px;
  background:rgba(20,25,36,.92);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(8px);
  font-size:11.6px; font-weight:600; letter-spacing:-.005em; color:var(--content);
  white-space:nowrap;
  opacity:0;
  animation:hsChip 12s var(--ease) infinite;
}
.hs-chip svg{ width:13px; height:13px; flex:none; }
.hs-chip-1{ top:8%;  left:-2%;  animation-delay:1.7s; }
.hs-chip-1 svg{ color:var(--warning); }
.hs-chip-2{ top:30%; left:-8%;  animation-delay:2.1s; }
.hs-chip-2 svg{ color:var(--info); }
.hs-chip-3{ top:52%; left:-4%;  animation-delay:2.5s; }
.hs-chip-3 svg{ color:var(--success); }

@keyframes hsChip{
  0%   { opacity:0; transform:translate3d(-10px,6px,0) scale(.9); }
  4%   { opacity:1; transform:translate3d(0,0,0) scale(1); }
  74%  { opacity:1; transform:translate3d(0,0,0) scale(1); }
  80%  { opacity:0; transform:translate3d(0,-8px,0) scale(.96); }
  100% { opacity:0; transform:translate3d(-10px,6px,0) scale(.9); }
}

/* --- o card da questão pronta --- */
.hs-card{
  position:absolute; z-index:5;
  width:min(340px,100%);
  transform-origin:center;
  padding:15px 16px 16px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(24,29,42,.97) 0%,rgba(17,21,30,.97) 100%);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lift), 0 0 0 1px rgba(129,140,248,.14), 0 0 60px -18px rgba(129,140,248,.5);
  backdrop-filter:blur(10px);
  opacity:0;
  animation:hsCard 12s var(--ease) infinite;
  animation-delay:3.2s;
}
@keyframes hsCard{
  0%   { opacity:0; transform:translate3d(24px,26px,0) scale(.94); }
  6%   { opacity:1; transform:translate3d(0,0,0) scale(1); }
  66%  { opacity:1; transform:translate3d(0,0,0) scale(1); }
  72%  { opacity:0; transform:translate3d(0,-14px,0) scale(.98); }
  100% { opacity:0; transform:translate3d(24px,26px,0) scale(.94); }
}

.hs-card-top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12px; margin-bottom:13px; border-bottom:1px solid var(--border);
}
.hs-q{ font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--content); }
.hs-q i{ font-style:normal; font-weight:500; color:var(--subtle); }
.hs-timer{
  font-size:11px; font-weight:700; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  padding:4px 9px; border-radius:99px;
  background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--muted);
}

.hs-statement{ overflow:hidden; }
.hs-statement p{
  font-size:12.4px; line-height:1.62; color:#D7DDEA;
  opacity:0;
  animation:hsText 12s var(--ease) infinite;
  animation-delay:3.6s;
}
@keyframes hsText{
  0%   { opacity:0; transform:translateY(8px); }
  5%   { opacity:1; transform:translateY(0); }
  63%  { opacity:1; transform:translateY(0); }
  69%,100%{ opacity:0; transform:translateY(0); }
}

/* grifos, iguais aos do app */
.hs-hl{
  color:#F2E6C8;
  background-image:linear-gradient(rgba(251,191,36,.24),rgba(251,191,36,.24));
  background-repeat:no-repeat;
  background-size:0% 100%;
  border-radius:3px;
  padding:1px 2px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
  animation:hsHl 12s var(--ease) infinite;
}
@keyframes hsHl{
  0%   { background-size:0% 100%; }
  6%   { background-size:100% 100%; }
  57%  { background-size:100% 100%; }
  63%,100%{ background-size:0% 100%; }
}
.hs-hl-1{ animation-delay:4.4s; }
.hs-hl-2{ animation-delay:4.75s; }

/* alternativas */
.hs-alts{ margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.hs-alt{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:11px;
  background:rgba(255,255,255,.022);
  border:1px solid var(--border);
  opacity:0;
  animation:hsAlt 12s var(--ease) infinite;
}
.hs-letter{
  width:21px; height:21px; flex:none;
  display:grid; place-items:center;
  border-radius:6px;
  background:rgba(255,255,255,.05); border:1px solid var(--border-strong);
  font-size:10.5px; font-weight:700; color:var(--muted);
  transition:none;
}
.hs-alt-txt{
  height:5px; border-radius:99px; flex:1;
  background:linear-gradient(90deg,#2C3346,#232A3B);
}
.hs-alt-1{ animation-delay:5.4s; }
.hs-alt-2{ animation-delay:5.62s; }
.hs-alt-3{ animation-delay:5.84s; }
.hs-alt-4{ animation-delay:6.06s; }
.hs-alt-1 .hs-alt-txt{ width:82%; }
.hs-alt-2 .hs-alt-txt{ max-width:74%; }
.hs-alt-4 .hs-alt-txt{ max-width:68%; }

@keyframes hsAlt{
  0%   { opacity:0; transform:translate3d(10px,0,0); }
  3.5% { opacity:1; transform:translate3d(0,0,0); }
  50%  { opacity:1; transform:translate3d(0,0,0); }
  56%,100%{ opacity:0; transform:translate3d(0,0,0); }
}

/* a correta acendendo */
.hs-alt.is-correct{
  position:relative;
  animation:hsAltRight 12s var(--ease) infinite;
  animation-delay:5.84s;
}
@keyframes hsAltRight{
  0%   { opacity:0; transform:translate3d(10px,0,0);
         background:rgba(255,255,255,.022); border-color:var(--border); box-shadow:none; }
  3.5% { opacity:1; transform:translate3d(0,0,0);
         background:rgba(255,255,255,.022); border-color:var(--border); box-shadow:none; }
  17%  { background:rgba(255,255,255,.022); border-color:var(--border); box-shadow:none; }
  21%  { background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.55);
         box-shadow:0 0 0 3px rgba(52,211,153,.09), 0 6px 22px -8px rgba(52,211,153,.5); }
  50%  { opacity:1; background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.55);
         box-shadow:0 0 0 3px rgba(52,211,153,.09), 0 6px 22px -8px rgba(52,211,153,.5); }
  56%,100%{ opacity:0; background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.55); box-shadow:none; }
}
.hs-alt.is-correct .hs-letter{
  animation:hsLetterRight 12s var(--ease) infinite;
  animation-delay:5.84s;
}
@keyframes hsLetterRight{
  0%,17%{ background:rgba(255,255,255,.05); border-color:var(--border-strong); color:var(--muted); transform:scale(1); }
  21%   { background:var(--success); border-color:var(--success); color:#07281D; transform:scale(1.14); }
  25%   { transform:scale(1); }
  56%,100%{ background:var(--success); border-color:var(--success); color:#07281D; }
}
.hs-check{
  width:16px; height:16px; flex:none; color:var(--success);
  opacity:0;
  animation:hsCheck 12s var(--ease) infinite;
  animation-delay:5.84s;
}
@keyframes hsCheck{
  0%,18%{ opacity:0; transform:scale(.4) rotate(-25deg); }
  23%   { opacity:1; transform:scale(1.12) rotate(0deg); }
  26%   { transform:scale(1); }
  50%   { opacity:1; }
  56%,100%{ opacity:0; }
}

/* botão de IA */
.hs-ai{
  margin-top:13px;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:10px;
  background:rgba(129,140,248,.11); border:1px solid rgba(129,140,248,.32);
  font-size:11.6px; font-weight:600; color:#BFC6FC;
  opacity:0;
  animation:hsAi 12s var(--ease) infinite;
  animation-delay:6.6s;
}
.hs-ai svg{ width:14px; height:14px; color:var(--brand); }
@keyframes hsAi{
  0%   { opacity:0; transform:translateY(6px); box-shadow:none; }
  4%   { opacity:1; transform:translateY(0); }
  10%  { box-shadow:0 0 0 0 rgba(129,140,248,.5); }
  16%  { box-shadow:0 0 0 10px rgba(129,140,248,0); }
  22%  { box-shadow:0 0 0 0 rgba(129,140,248,.45); }
  28%  { box-shadow:0 0 0 10px rgba(129,140,248,0); }
  44%  { opacity:1; }
  50%,100%{ opacity:0; }
}

/* ===================== UTILITÁRIOS DE SEÇÃO ======================== */
/* reaproveitados a partir daqui em todas as seções seguintes */
.section{ padding-block:112px; }

.section-eyebrow{
  display:inline-block;
  font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--subtle);
}
.section-title{
  margin-top:10px;
  font-size:clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight:800; letter-spacing:-.025em; line-height:1.15;
  text-wrap:balance;
}
.section-sub{
  margin-top:14px; max-width:38em;
  font-size:16px; line-height:1.6; color:var(--muted);
}

/* revelação suave ao rolar (ativada por main.js via IntersectionObserver);
   sem JS ou com "reduzir movimento" ligado, o .is-in já entra direto */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:600; color:var(--brand);
}
.link-arrow svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
a.pain-next:hover .link-arrow svg{ transform:translateX(3px); }

/* ============================== DOR ================================ */
.pain{ position:relative; overflow:hidden; padding-top:52px; padding-bottom:64px; }

/* fundo em duas camadas: um brilho quente (o desconforto) que esfria e
   vira indigo (o produto) perto da faixa final, mais uma textura de
   folha pautada, bem de leve, puxando o "papiro" pro fundo da seção.
   TUDO nasce do transparente no topo (via máscara) pra não existir
   nenhuma borda entre o hero e esta seção: só o mesmo fundo escuro,
   com o brilho aparecendo aos poucos conforme você entra na seção. */
.pain::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:0;
  background:
    radial-gradient(52rem 32rem at 20% 10%,  rgba(251,113,133,.10), transparent 60%),
    radial-gradient(60rem 40rem at 88% 96%,  rgba(129,140,248,.14), transparent 60%);
  /* dissolve no topo E no fundo: sem borda em cima (emenda com o hero) e
     sem borda embaixo (o brilho indigo escorre pra dentro da seção 3) */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 88%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 88%, transparent 100%);
}
.pain::after{
  content:""; position:absolute; z-index:0; pointer-events:none; inset:0;
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 38px),
    linear-gradient(90deg, transparent 63px, rgba(251,113,133,.14) 64px, rgba(251,113,133,.14) 65px, transparent 66px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 82%, transparent);
          mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 82%, transparent);
  opacity:.7;
}
.pain > .wrap{ position:relative; z-index:1; }

.pain-head{ max-width:30em; margin-inline:auto; text-align:center; }
.pain-sub{ margin-inline:auto; font-size:17px; }

/* o "grifo" por trás da palavra: o mesmo gesto de marcar texto que o
   Papiro faz na prova, aplicado na própria pergunta que abre a seção */
.pain-title{
  position:relative;
  font-size:clamp(2.1rem, 4.4vw, 3.1rem);
}
.pain-hl{ position:relative; display:inline-block; }
.pain-hl-mark{
  position:absolute; z-index:-1; left:-5%; right:-5%; bottom:-8%; top:auto;
  width:110%; height:.52em;
  overflow:visible; pointer-events:none;
}
.pain-hl-mark path{
  fill:none; stroke:#FBBF24; stroke-width:13; stroke-linecap:round;
  opacity:.36;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .9s var(--ease) .25s;
}
.pain-head.is-in .pain-hl-mark path{ stroke-dashoffset:0; }

.pain-grid{
  margin-top:52px;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.pain-grid > [data-reveal]:nth-child(1){ transition-delay:.02s; }
.pain-grid > [data-reveal]:nth-child(2){ transition-delay:.08s; }
.pain-grid > [data-reveal]:nth-child(3){ transition-delay:.14s; }
.pain-grid > [data-reveal]:nth-child(4){ transition-delay:.08s; }
.pain-grid > [data-reveal]:nth-child(5){ transition-delay:.14s; }
.pain-grid > [data-reveal]:nth-child(6){ transition-delay:.20s; }

.pain-card{
  position:relative; z-index:0;
  padding:28px 24px;
  border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(255,255,255,.05), rgba(20,25,36,.6) 40%);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-card);
  backdrop-filter:blur(8px);
  transform-style:preserve-3d;
  transition:transform .4s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
/* halo de cor própria de cada dor, borrado por trás do cartão */
.pain-card::before{
  content:""; position:absolute; z-index:-1; inset:-24% -18%;
  border-radius:inherit; filter:blur(22px); opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
.pain-grid > .pain-card:nth-child(1)::before{ background:radial-gradient(closest-side, rgba(251,191,36,.24), transparent 72%); }
.pain-grid > .pain-card:nth-child(2)::before{ background:radial-gradient(closest-side, rgba(251,113,133,.22), transparent 72%); }
.pain-grid > .pain-card:nth-child(3)::before{ background:radial-gradient(closest-side, rgba(56,189,248,.22), transparent 72%); }
.pain-grid > .pain-card:nth-child(4)::before{ background:radial-gradient(closest-side, rgba(167,139,250,.22), transparent 72%); }
.pain-grid > .pain-card:nth-child(5)::before{ background:radial-gradient(closest-side, rgba(251,191,36,.22), transparent 72%); }
.pain-grid > .pain-card:nth-child(6)::before{ background:radial-gradient(closest-side, rgba(56,189,248,.2), transparent 72%); }
.pain-card:hover{
  transform:perspective(900px) rotateX(2.5deg) translateY(-5px);
  border-color:var(--border-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 26px 50px -28px rgba(0,0,0,.65);
}
.pain-card:hover::before{ opacity:.75; }
.pain-card h3{
  margin-top:18px;
  font-size:16.5px; font-weight:700; letter-spacing:-.01em; line-height:1.35;
}
.pain-card p{
  margin-top:8px;
  font-size:14px; line-height:1.6; color:var(--subtle);
}

.pain-icon{
  display:grid; place-items:center;
  width:52px; height:52px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--muted);
}
.pain-icon svg{ width:28px; height:28px; }

/* traço 1: a seta cai e assenta, num ritmo de "abandonado" mas visível
   com clareza a cada poucos segundos (não só um tremor de 1 frame) */
@keyframes piDrop{
  0%,60%  { transform:translateY(0);   opacity:1; }
  72%     { transform:translateY(4px); opacity:.5; }
  80%     { transform:translateY(0);   opacity:1; }
  88%     { transform:translateY(2px); opacity:.7; }
  100%    { transform:translateY(0);   opacity:1; }
}
.pi-drop{ transform-origin:center; animation:piDrop 5s ease-in-out infinite; }

/* traço 2: os vistos vão sendo desenhados um a um, sem nunca "terminar".
   dashoffset precisa ficar travado (não só a opacidade) durante o "cheio"
   e o "desbotando", senão o navegador interpola ele sozinho por baixo
   e o risco parece estar sumindo em vez de só apagando */
.pi-check{ stroke-dasharray:1; opacity:.3; }
@keyframes piCheckDraw{
  0%    { stroke-dashoffset:1; opacity:.3; }
  4%    { stroke-dashoffset:1; opacity:.3; }
  20%   { stroke-dashoffset:0; opacity:1; color:var(--danger); }
  42%   { stroke-dashoffset:0; opacity:1; color:var(--danger); }
  58%   { stroke-dashoffset:0; opacity:.3; color:var(--muted); }
  100%  { stroke-dashoffset:1; opacity:.3; color:var(--muted); }
}
.pi-check-1{ animation:piCheckDraw 4.5s ease-in-out infinite; animation-delay:0s; }
.pi-check-2{ animation:piCheckDraw 4.5s ease-in-out infinite; animation-delay:.5s; }
.pi-check-3{ animation:piCheckDraw 4.5s ease-in-out infinite; animation-delay:1s; }

/* traço 3: toques tentando grifar, sempre errando o alvo por um triz */
@keyframes piTapRipple{
  0%   { transform:scale(.35); opacity:0; }
  18%  { opacity:.85; }
  60%  { transform:scale(1.25); opacity:0; }
  100% { transform:scale(.35); opacity:0; }
}
.pi-tap{
  transform-box:fill-box; transform-origin:center;
  color:var(--info); opacity:0;
  animation:piTapRipple 2.6s ease-out infinite;
}
.pi-tap-2{ animation-delay:1.3s; }

/* traço 4: a curva do esquecimento desbota e volta, em loop */
@keyframes piCurveFade{
  0%,55%{ opacity:1; }
  85%   { opacity:.15; }
  100%  { opacity:1; }
}
.pi-curve{ color:#A78BFA; animation:piCurveFade 5s ease-in-out infinite; }
@keyframes piDotPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.45; transform:scale(1.3); }
}
.pi-dot{ color:#A78BFA; transform-origin:6px 8px; animation:piDotPulse 5s ease-in-out infinite; }

/* traço 6: a lupa procura entre as barras e nunca acha a certa */
@keyframes piSearchDrift{
  0%,100%{ transform:translateX(0) translateY(0); opacity:.85; }
  30%    { transform:translateX(-4.5px) translateY(1px); opacity:1; }
  65%    { transform:translateX(3px) translateY(-1.5px); opacity:.7; }
}
.pi-search{ color:var(--info); transform-box:fill-box; transform-origin:center; animation:piSearchDrift 4.2s ease-in-out infinite; }

/* traço 5: areia caindo sem parar, tempo escorrendo */
@keyframes piSandFall{
  0%   { transform:translateY(0);   opacity:.9; }
  70%  { transform:translateY(6px); opacity:0; }
  71%  { transform:translateY(-1px); opacity:0; }
  100% { transform:translateY(0);   opacity:.9; }
}
.pi-sand{ color:var(--warning); animation:piSandFall 1.7s linear infinite; }

/* a faixa final: a única coisa colorida de indigo nessa seção inteira,
   de propósito, pra ela puxar o olho como "a saída" depois de 5 cartões
   apagados. as linhas reaproveitam o motivo do hero, quietas aqui. */
.pain-next{
  position:relative; z-index:0; overflow:hidden;
  display:flex; align-items:center;
  margin-top:22px; padding:38px 44px;
  border-radius:var(--r-xl);
  background:linear-gradient(120deg, rgba(129,140,248,.16), rgba(56,189,248,.07) 60%, rgba(129,140,248,.1));
  border:1px solid rgba(129,140,248,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -34px rgba(129,140,248,.55);
  transition:transform .35s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.pain-next:hover{
  transform:translateY(-4px);
  border-color:rgba(129,140,248,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 34px 70px -30px rgba(129,140,248,.65);
}
.pain-next-lines{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  opacity:.55; pointer-events:none;
}
.pain-next-lines path{
  fill:none; stroke:url(#painNextGrad); vector-effect:non-scaling-stroke;
  stroke-linecap:round; opacity:.5;
  animation:painNextDrift 16s ease-in-out infinite;
}
.pain-next-lines path:nth-child(2){ animation-duration:20s; animation-delay:-6s; opacity:.35; }
.pain-next-lines path:nth-child(3){ animation-duration:23s; animation-delay:-11s; opacity:.42; }
@keyframes painNextDrift{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-10px); }
}
.pain-next-body{ position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; }
.pain-next .section-eyebrow{ color:#C7CDFB; }
.pain-next p{ font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1.4; color:var(--content); max-width:22em; }
.pain-next .link-arrow{ font-size:15px; }

/* ========================== COMO FUNCIONA ========================= */
.how{ position:relative; overflow:hidden; padding-top:56px; }

/* aurora que se move devagar ao fundo; toda a camada nasce e some no
   transparente (máscara) pra emendar sem borda com a seção acima e a
   de baixo. o topo aparece cedo (fade-in curto) pra o brilho da seção
   anterior escorrer direto pra cá, sem vão escuro no meio */
.how-aurora{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 7%, #000 86%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 7%, #000 86%, transparent 100%);
}
.how-blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.5;
  will-change:transform;
}
.how-blob-1{ width:42rem; height:32rem; left:-8rem; top:-6rem;
  background:radial-gradient(circle, rgba(129,140,248,.28), transparent 68%);
  animation:howDrift1 26s ease-in-out infinite; }
.how-blob-2{ width:38rem; height:36rem; right:-12rem; top:26%;
  background:radial-gradient(circle, rgba(56,189,248,.22), transparent 68%);
  animation:howDrift2 32s ease-in-out infinite; }
.how-blob-3{ width:34rem; height:30rem; left:32%; bottom:-8rem;
  background:radial-gradient(circle, rgba(167,139,250,.20), transparent 68%);
  animation:howDrift3 29s ease-in-out infinite; }
@keyframes howDrift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(6rem,3rem) scale(1.12); } }
@keyframes howDrift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-5rem,4rem) scale(1.08); } }
@keyframes howDrift3{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(4rem,-3rem) scale(1.1); } }

.how > .wrap{ position:relative; z-index:1; }
.how-head{ max-width:34em; margin-inline:auto; text-align:center; }
.how-head .section-sub{ margin-inline:auto; }

.how-steps{ position:relative; margin-top:60px; display:flex; flex-direction:column; gap:40px; }

/* linha central que "flui" pra baixo, ligando os 3 passos (desktop) */
.how-spine{
  position:absolute; z-index:0; top:40px; bottom:40px; left:50%; width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(129,140,248,.5) 12%, rgba(56,189,248,.5) 88%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  overflow:hidden;
}
.how-spine::after{
  content:""; position:absolute; left:-1px; right:-1px; height:34%;
  background:linear-gradient(180deg, transparent, rgba(199,205,251,.9), transparent);
  animation:howSpineFlow 5.5s ease-in-out infinite;
}
@keyframes howSpineFlow{ 0%{ top:-34%; } 100%{ top:100%; } }

.how-step{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:44px;
}
.how-step:nth-child(even) .how-art{ order:2; }

/* painel de vidro que abriga cada arte */
.how-art{
  position:relative; height:340px;
  border-radius:var(--r-xl);
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(20,25,36,.55) 46%);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-lift);
  backdrop-filter:blur(8px);
  overflow:hidden;
}
.how-art::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 40%, rgba(129,140,248,.1), transparent 70%);
}
.art{ position:absolute; inset:0; }

.how-text{ position:relative; }
.how-num{
  display:block; font-size:clamp(3rem,5vw,4.2rem); font-weight:800; line-height:1;
  letter-spacing:-.04em;
  background:linear-gradient(160deg, rgba(129,140,248,.9), rgba(56,189,248,.5));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  opacity:.9;
}
.how-text h3{
  margin-top:12px;
  font-size:clamp(1.35rem,2.4vw,1.85rem); font-weight:800; letter-spacing:-.02em; line-height:1.2;
  text-wrap:balance;
}
.how-text p{ margin-top:14px; font-size:16px; line-height:1.65; color:var(--muted); max-width:30em; }
.how-tag{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  padding:8px 14px; border-radius:99px;
  background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.28);
  font-size:13.5px; font-weight:600; color:#8FE9C4;
}
.how-tag svg{ width:16px; height:16px; color:var(--success); flex:none; }

/* ---------- PASSO 1: upload ---------- */
.a1-zone{
  position:absolute; left:50%; top:60%; transform:translate(-50%,-50%);
  width:148px; height:148px; display:grid; place-items:center;
  border-radius:20px; border:2px dashed var(--border-strong);
  color:var(--brand);
  animation:a1ZonePulse 5s ease-in-out infinite;
}
@keyframes a1ZonePulse{ 0%,100%{ border-color:var(--border-strong); } 50%{ border-color:rgba(129,140,248,.6); } }
.a1-cloud{ width:52px; height:44px; color:var(--brand); }
.a1-arrow{ animation:a1Arrow 5s ease-in-out infinite; }
@keyframes a1Arrow{ 0%,60%,100%{ transform:translateY(0); opacity:1; } 78%{ transform:translateY(-4px); opacity:.5; } }
.a1-ring{ position:absolute; inset:-1px; width:auto; height:auto; color:var(--brand); }
.a1-ring-fill{
  stroke-dasharray:1; stroke-dashoffset:1; transform:rotate(-90deg); transform-origin:center;
  animation:a1Ring 5s ease-in-out infinite;
}
@keyframes a1Ring{ 0%,18%{ stroke-dashoffset:1; } 60%{ stroke-dashoffset:0; } 82%,100%{ stroke-dashoffset:0; opacity:0; } 83%{ stroke-dashoffset:1; opacity:1; } }

.a1-doc{
  position:absolute; top:13%; left:50%; width:96px; padding:11px 12px 12px;
  border-radius:12px; background:linear-gradient(180deg,#1a2030,#121622);
  border:1px solid var(--border-strong); box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:7px;
}
.a1-tag{ align-self:flex-start; font-size:8.5px; font-weight:800; letter-spacing:.08em; padding:2px 6px; border-radius:5px; }
.a1-tag-prova{ color:var(--danger); background:rgba(251,113,133,.14); }
.a1-tag-gab{ color:var(--success); background:rgba(52,211,153,.16); }
.a1-lines{ display:flex; flex-direction:column; gap:4px; }
.a1-lines i{ height:3px; border-radius:99px; background:#2C3346; }
.a1-lines i:nth-child(1){ width:100%; } .a1-lines i:nth-child(2){ width:80%; } .a1-lines i:nth-child(3){ width:90%; }
.a1-name{ font-size:8.5px; font-weight:700; letter-spacing:.1em; color:var(--subtle); }
.a1-doc-1{ animation:a1Drop1 5s ease-in-out infinite; }
.a1-doc-2{ animation:a1Drop2 5s ease-in-out infinite; }
@keyframes a1Drop1{
  0%   { transform:translate(-110%,-190px) rotate(-10deg); opacity:0; }
  14%  { opacity:1; }
  34%  { transform:translate(-110%,0) rotate(-4deg); opacity:1; }
  70%  { transform:translate(-110%,0) rotate(-4deg); opacity:1; }
  84%,100%{ transform:translate(-110%,0) rotate(-4deg); opacity:0; }
}
@keyframes a1Drop2{
  0%,10%{ transform:translate(10%,-190px) rotate(10deg); opacity:0; }
  22%  { opacity:1; }
  42%  { transform:translate(10%,0) rotate(4deg); opacity:1; }
  70%  { transform:translate(10%,0) rotate(4deg); opacity:1; }
  84%,100%{ transform:translate(10%,0) rotate(4deg); opacity:0; }
}

/* ---------- PASSO 2: fragmentos caem no celular ---------- */
.art2{ display:grid; place-items:center; }
.a2-phone{
  position:relative; width:152px; height:290px; padding:10px;
  border-radius:28px;
  background:linear-gradient(180deg,#1b2030,#0f131c);
  border:1px solid var(--border-strong);
  animation:a2PhoneGlow 9s ease-in-out infinite;
}
@keyframes a2PhoneGlow{
  0%,26%  { box-shadow:var(--shadow-lift), 0 0 28px -16px rgba(129,140,248,.4); }
  38%     { box-shadow:var(--shadow-lift), 0 0 60px -8px rgba(129,140,248,.8); }
  60%,100%{ box-shadow:var(--shadow-lift), 0 0 34px -14px rgba(129,140,248,.5); }
}
.a2-notch{
  position:absolute; top:11px; left:50%; transform:translateX(-50%); z-index:2;
  width:44px; height:5px; border-radius:99px; background:#05070c;
}
.a2-screen{
  position:relative; width:100%; height:100%; border-radius:19px; overflow:hidden;
  background:linear-gradient(180deg,#0c101a,#0a0e16); border:1px solid var(--border);
}
.a2-view{ position:absolute; inset:0; padding:22px 12px 14px; display:flex; flex-direction:column; }

/* mapa de questões */
.a2-map{ opacity:0; animation:a2MapView 9s ease-in-out infinite; }
@keyframes a2MapView{ 0%,33%{ opacity:0; } 40%,58%{ opacity:1; } 64%,100%{ opacity:0; } }
.a2-map-top{ display:flex; gap:6px; margin-bottom:11px; }
.a2-map-top i{ height:6px; border-radius:99px; background:#2C3346; }
.a2-map-top i:nth-child(1){ width:46%; } .a2-map-top i:nth-child(2){ width:24%; }
.a2-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.a2-grid i{
  aspect-ratio:1; border-radius:5px; background:rgba(255,255,255,.05); border:1px solid var(--border);
  transform:scale(.4); animation:a2Cell 9s ease-in-out infinite;
}
.a2-grid i.hit{ background:rgba(129,140,248,.28); border-color:rgba(129,140,248,.6); }
.a2-grid i:nth-child(n+6){ animation-delay:.08s; }
.a2-grid i:nth-child(n+11){ animation-delay:.16s; }
.a2-grid i:nth-child(n+16){ animation-delay:.24s; }
@keyframes a2Cell{ 0%,34%{ transform:scale(.4); } 44%{ transform:scale(1); } 100%{ transform:scale(1); } }

/* questão com alternativas */
.a2-quiz{ gap:8px; opacity:0; animation:a2QuizView 9s ease-in-out infinite; }
@keyframes a2QuizView{ 0%,64%{ opacity:0; } 71%,93%{ opacity:1; } 99%,100%{ opacity:0; } }
.a2-quiz-head{ display:flex; flex-direction:column; gap:6px; margin-bottom:5px; }
.a2-quiz-head i{ height:6px; border-radius:99px; background:#2C3346; }
.a2-quiz-head i:nth-child(1){ width:100%; } .a2-quiz-head i:nth-child(2){ width:64%; }
.a2-quiz-alt{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px; background:rgba(255,255,255,.03); border:1px solid var(--border); }
.a2-quiz-alt b{ width:16px; height:16px; flex:none; display:grid; place-items:center; border-radius:5px; background:rgba(255,255,255,.05); border:1px solid var(--border-strong); font-size:8.5px; font-weight:700; color:var(--muted); }
.a2-quiz-alt i{ height:4px; flex:1; border-radius:99px; background:#2C3346; }
.a2-quiz-alt.a2-pick{ background:rgba(129,140,248,.14); border-color:rgba(129,140,248,.5); }
.a2-quiz-alt.a2-pick b{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* fragmentos convergindo pro celular */
.a2-frag{
  position:absolute; z-index:3; display:grid; place-items:center;
  padding:5px 10px; border-radius:8px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
  background:rgba(20,25,36,.96); border:1px solid var(--border-strong);
  box-shadow:var(--shadow-card); color:var(--muted);
}
.a2-frag-txt{ color:#BFC6FC; animation:a2FlyTL 9s ease-in-out infinite; }
.a2-frag-tbl{ color:#9FE0FB; animation:a2FlyTR 9s ease-in-out infinite; }
.a2-frag-img{ color:#C7B8FB; animation:a2FlyBL 9s ease-in-out infinite; }
.a2-frag-gab{ color:#8FE9C4; width:26px; height:26px; padding:0; border-radius:8px; animation:a2FlyBR 9s ease-in-out infinite; }
@keyframes a2FlyTL{
  0%   { top:6%;  left:1%;  opacity:0; transform:scale(.9); }
  8%   { opacity:1; transform:scale(1); }
  27%  { top:45%; left:42%; opacity:.85; transform:scale(.45); }
  33%,100%{ top:45%; left:42%; opacity:0; transform:scale(.3); }
}
@keyframes a2FlyTR{
  0%,4%{ top:9%;  right:1%; opacity:0; transform:scale(.9); }
  12%  { opacity:1; transform:scale(1); }
  30%  { top:45%; right:40%; opacity:.85; transform:scale(.45); }
  36%,100%{ top:45%; right:40%; opacity:0; transform:scale(.3); }
}
@keyframes a2FlyBL{
  0%,8%{ bottom:8%; left:2%; opacity:0; transform:scale(.9); }
  16%  { opacity:1; transform:scale(1); }
  31%  { bottom:46%; left:42%; opacity:.85; transform:scale(.45); }
  37%,100%{ bottom:46%; left:42%; opacity:0; transform:scale(.3); }
}
@keyframes a2FlyBR{
  0%,12%{ bottom:7%; right:3%; opacity:0; transform:scale(.8); }
  20%  { opacity:1; transform:scale(1); }
  32%  { bottom:46%; right:41%; opacity:.85; transform:scale(.4); }
  38%,100%{ bottom:46%; right:41%; opacity:0; transform:scale(.25); }
}

/* ---------- PASSO 3: professor de IA explicando ---------- */
.a3-card{
  position:absolute; top:20px; left:22px; right:22px; padding:12px 13px; border-radius:12px;
  background:linear-gradient(180deg,rgba(24,29,42,.96),rgba(17,21,30,.96));
  border:1px solid var(--border-strong); box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:7px;
}
.a3-q{ height:6px; width:70%; border-radius:99px; background:#2C3346; margin-bottom:2px; }
.a3-alt{
  position:relative; display:flex; align-items:center; gap:9px;
  padding:7px 9px; border-radius:9px;
  background:rgba(255,255,255,.02); border:1px solid var(--border);
}
.a3-alt b{
  width:17px; height:17px; flex:none; display:grid; place-items:center;
  border-radius:5px; background:rgba(255,255,255,.05); border:1px solid var(--border-strong);
  font-size:9px; font-weight:700; color:var(--muted);
}
.a3-alt i{ height:4px; flex:1; border-radius:99px; background:#2C3346; }
/* a alternativa certa fica marcada em verde (é a que está sendo explicada) */
.a3-alt.ok{ background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.5); }
.a3-alt.ok b{ background:var(--success); border-color:var(--success); color:#07281D; }
.a3-check{ position:absolute; right:9px; width:14px; height:14px; color:var(--success); }

.a3-ai{
  position:absolute; left:22px; right:22px; bottom:20px; padding:13px 14px 15px; border-radius:12px;
  background:linear-gradient(180deg, rgba(129,140,248,.12), rgba(20,25,36,.72));
  border:1px solid rgba(129,140,248,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  animation:a3AiGlow 7s ease-in-out infinite;
}
@keyframes a3AiGlow{
  0%,20%  { box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 0 rgba(129,140,248,0); }
  30%     { box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 34px -10px rgba(129,140,248,.7); }
  88%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 22px -12px rgba(129,140,248,.5); }
}
.a3-ai-head{
  display:flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:-.01em; color:#C7CDFB;
}
.a3-ai-head svg{ width:15px; height:15px; color:var(--brand); animation:a3Sparkle 7s ease-in-out infinite; }
@keyframes a3Sparkle{ 0%,100%{ transform:scale(1) rotate(0); opacity:.85; } 30%{ transform:scale(1.18) rotate(15deg); opacity:1; } }
.a3-ai-body{ margin-top:11px; display:flex; flex-direction:column; gap:7px; }
.a3-line{ height:5px; border-radius:99px; background:linear-gradient(90deg,#5b64a8,#3a4166); width:0; }
.a3-line-1{ animation:a3Type1 7s ease-in-out infinite; }
.a3-line-2{ animation:a3Type2 7s ease-in-out infinite; }
.a3-line-3{ animation:a3Type3 7s ease-in-out infinite; }
.a3-line-4{ position:relative; overflow:visible; animation:a3Type4 7s ease-in-out infinite; }
@keyframes a3Type1{ 0%,12%{ width:0; } 24%{ width:100%; } 90%{ width:100%; opacity:1; } 96%,100%{ width:100%; opacity:0; } }
@keyframes a3Type2{ 0%,24%{ width:0; } 36%{ width:92%; } 90%{ width:92%; opacity:1; } 96%,100%{ width:92%; opacity:0; } }
@keyframes a3Type3{ 0%,36%{ width:0; } 48%{ width:97%; } 90%{ width:97%; opacity:1; } 96%,100%{ width:97%; opacity:0; } }
@keyframes a3Type4{ 0%,48%{ width:0; } 60%{ width:54%; } 90%{ width:54%; opacity:1; } 96%,100%{ width:54%; opacity:0; } }
.a3-cursor{
  position:absolute; right:-7px; top:-3px; width:2px; height:11px; border-radius:2px;
  background:var(--brand); animation:a3Blink 1s steps(1) infinite;
}
@keyframes a3Blink{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }

/* ---------- PASSO 4: revisão espaçada ---------- */
.art4{ display:grid; place-items:center; }
.a4-wrong{
  position:absolute; top:14%; left:10%; z-index:3;
  display:flex; align-items:center; gap:9px;
  width:150px; padding:11px 12px; border-radius:12px;
  background:linear-gradient(180deg,rgba(30,20,24,.96),rgba(20,14,17,.96));
  border:1px solid rgba(251,113,133,.4); box-shadow:var(--shadow-card);
  animation:a4Wrong 8s ease-in-out infinite;
}
.a4-x{
  width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:7px;
  background:rgba(251,113,133,.16); color:var(--danger);
}
.a4-x svg{ width:15px; height:15px; }
.a4-wrong-lines{ display:flex; flex-direction:column; gap:5px; flex:1; }
.a4-wrong-lines i{ height:4px; border-radius:99px; background:#3a2a30; }
.a4-wrong-lines i:nth-child(1){ width:100%; } .a4-wrong-lines i:nth-child(2){ width:64%; }
@keyframes a4Wrong{
  0%   { top:14%; left:10%; opacity:0; transform:translateX(-12px) scale(.95); }
  8%   { opacity:1; transform:translateX(0) scale(1); }
  24%  { top:14%; left:10%; opacity:1; transform:translateX(0) scale(1); }
  40%  { top:40%; left:32%; opacity:0; transform:scale(.7); }
  100% { top:40%; left:32%; opacity:0; transform:scale(.7); }
}

.a4-hub{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:132px; height:132px; display:grid; place-items:center; }
.a4-loop{ position:absolute; inset:0; width:100%; height:100%; color:var(--brand); animation:a4Spin 14s linear infinite; }
@keyframes a4Spin{ to{ transform:rotate(360deg); } }
.a4-cal{
  position:relative; width:64px; height:64px; display:grid; place-items:center;
  border-radius:16px; background:rgba(129,140,248,.1); border:1px solid rgba(129,140,248,.34);
  color:#C7CDFB; animation:a4CalPulse 8s ease-in-out infinite;
}
.a4-cal svg{ width:30px; height:30px; }
@keyframes a4CalPulse{
  0%,32%{ box-shadow:0 0 0 0 rgba(129,140,248,0); }
  42%   { box-shadow:0 0 26px -6px rgba(129,140,248,.7); }
  60%,100%{ box-shadow:0 0 16px -8px rgba(129,140,248,.4); }
}
.a4-dot{ position:absolute; width:9px; height:9px; border-radius:50%; background:var(--brand); opacity:0; }
.a4-dot-1{ top:-4px; right:10px; animation:a4Dot 8s ease-in-out infinite; animation-delay:.0s; }
.a4-dot-2{ top:50%; right:-5px; animation:a4Dot 8s ease-in-out infinite; animation-delay:.18s; }
.a4-dot-3{ bottom:-4px; right:16px; animation:a4Dot 8s ease-in-out infinite; animation-delay:.36s; }
@keyframes a4Dot{
  0%,40%{ opacity:0; transform:scale(.4); }
  48%   { opacity:1; transform:scale(1); }
  66%   { opacity:.5; transform:scale(1); }
  78%,100%{ opacity:0; transform:scale(.4); }
}

.a4-back{
  position:absolute; bottom:14%; right:10%; z-index:3;
  display:flex; align-items:center; gap:9px;
  padding:11px 14px 11px 11px; border-radius:99px;
  background:linear-gradient(180deg,rgba(20,32,27,.96),rgba(14,22,19,.96));
  border:1px solid rgba(52,211,153,.45); box-shadow:var(--shadow-card);
  opacity:0; animation:a4Back 8s ease-in-out infinite;
}
.a4-check{ width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:7px; background:var(--success); color:#07281D; }
.a4-check svg{ width:15px; height:15px; }
.a4-back-txt{ font-size:12px; font-weight:700; letter-spacing:-.01em; color:#8FE9C4; }
@keyframes a4Back{
  0%,60%{ opacity:0; transform:translateY(10px) scale(.95); }
  70%   { opacity:1; transform:translateY(0) scale(1); }
  92%   { opacity:1; transform:translateY(0) scale(1); }
  100%  { opacity:0; transform:translateY(0) scale(1); }
}

/* ============================ RECURSOS ============================ */
.feats{ position:relative; }
.feats-head{ max-width:34em; margin-inline:auto; text-align:center; }
.feats-head .section-sub{ margin-inline:auto; }

.bento{
  margin-top:52px;
  display:grid; grid-template-columns:repeat(12,1fr); gap:18px;
  grid-auto-rows:224px;
}
.cell{
  position:relative; overflow:hidden;
  grid-column:span 6; grid-row:span 1;
  display:flex; flex-direction:column;
  border-radius:var(--r-xl);
  background:linear-gradient(165deg, rgba(255,255,255,.055), rgba(20,25,36,.55) 46%);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-card);
  backdrop-filter:blur(8px);
  transition:transform .35s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.cell:hover{
  transform:translateY(-4px);
  border-color:var(--border-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 26px 50px -30px rgba(0,0,0,.7);
}
.cell-lg{ grid-column:span 7; grid-row:span 2; }
.cell-stats,.cell-player{ grid-column:span 5; }
.cell-redo,.cell-app{ grid-column:span 6; }

/* a arte preenche o espaço acima da legenda (flex), sem altura fixa */
.cell-art{ position:relative; flex:1; min-height:0; overflow:hidden; }
.cell-cap{ position:relative; padding:0 22px 20px; }
.cell-cap h3{ font-size:16.5px; font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.cell-lg .cell-cap h3{ font-size:20px; }
.cell-cap p{ margin-top:7px; font-size:13.5px; line-height:1.55; color:var(--subtle); max-width:34em; }
/* leve véu pra separar a arte da legenda sem borda dura */
.cell-cap::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:44px;
  background:linear-gradient(180deg, transparent, rgba(10,13,20,.55));
  pointer-events:none;
}

/* ---------- R1: extração (célula grande) ---------- */
.art-r1{ display:grid; place-items:center; }
.r1-page{
  position:relative; width:190px; padding:16px 15px; border-radius:12px;
  background:linear-gradient(180deg,#161b27,#10141d); border:1px solid var(--border);
  box-shadow:var(--shadow-lift); overflow:hidden;
  display:flex; flex-direction:column; gap:9px;
}
.r1-l{ height:6px; border-radius:99px; background:#2a3145; }
.r1-l.w70{ width:70%; } .r1-l.w80{ width:80%; } .r1-l.w90{ width:90%; }
.r1-tbl{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:7px; border:1px dashed var(--border-strong); border-radius:7px; }
.r1-tbl i{ height:5px; border-radius:99px; background:#333c52; }
.r1-tbl i:nth-child(-n+3){ background:#414c66; }
.r1-fig{ display:grid; place-items:center; height:40px; color:var(--info); opacity:.7; }
.r1-fig svg{ width:100px; }
.r1-scan{
  position:absolute; left:0; right:0; top:0; height:40px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(165,180,252,.5) 88%, rgba(224,231,255,.9));
  box-shadow:0 0 20px 3px rgba(129,140,248,.4);
  animation:r1Scan 5.5s cubic-bezier(.5,.05,.5,.95) infinite;
}
@keyframes r1Scan{
  0%   { transform:translateY(-42px); opacity:0; }
  8%   { opacity:1; }
  55%  { transform:translateY(210px); opacity:1; }
  60%,100%{ transform:translateY(210px); opacity:0; }
}
.r1-chip{
  position:absolute; display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:99px;
  background:rgba(20,25,36,.92); border:1px solid var(--border-strong);
  box-shadow:var(--shadow-card); backdrop-filter:blur(8px);
  font-size:11.5px; font-weight:600; color:var(--content); white-space:nowrap;
  opacity:0;
}
.r1-chip svg{ width:14px; height:14px; flex:none; }
.r1-chip-1{ top:14%; right:6%; animation:r1Chip 5.5s ease-in-out infinite; animation-delay:.6s; }
.r1-chip-1 svg{ color:var(--warning); }
.r1-chip-2{ top:44%; right:2%; animation:r1Chip 5.5s ease-in-out infinite; animation-delay:1.4s; }
.r1-chip-2 svg{ color:var(--info); }
.r1-chip-3{ top:72%; right:8%; animation:r1Chip 5.5s ease-in-out infinite; animation-delay:2.2s; }
.r1-chip-3 svg{ color:var(--success); }
@keyframes r1Chip{
  0%   { opacity:0; transform:translateX(10px) scale(.9); }
  10%  { opacity:1; transform:translateX(0) scale(1); }
  74%  { opacity:1; transform:translateX(0) scale(1); }
  84%,100%{ opacity:0; transform:translateX(0) scale(.96); }
}

/* ---------- R2: estatísticas ---------- */
.art-r2{ display:flex; align-items:flex-end; justify-content:center; gap:12px; padding:24px 26px 0; }
.r2-bars{ display:flex; align-items:flex-end; gap:11px; height:100%; padding-bottom:16px; }
/* crescem UMA vez, quando a célula entra na tela, e ficam cheias (sem loop,
   por isso não tem o "pisca" de reiniciar do zero). o brilho da barra fraca
   respira de leve, num loop que começa e termina no mesmo ponto */
.r2-bar{
  position:relative; width:16px; border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg, var(--brand), rgba(129,140,248,.35));
  height:0; align-self:flex-end;
}
.cell.is-in .r2-bar{ animation:r2Grow 1.1s cubic-bezier(.16,1,.3,1) forwards; }
.cell.is-in .r2-bar:nth-child(2){ animation-delay:.08s; }
.cell.is-in .r2-bar:nth-child(3){ animation-delay:.16s; }
.cell.is-in .r2-bar:nth-child(4){ animation-delay:.24s; }
.cell.is-in .r2-bar:nth-child(5){ animation-delay:.32s; }
@keyframes r2Grow{ from{ height:0; } to{ height:var(--h); } }
.r2-weak{ background:linear-gradient(180deg, var(--danger), rgba(251,113,133,.35)); }
.r2-weak::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 rgba(251,113,133,0);
  animation:r2Breathe 2.8s ease-in-out .9s infinite;
}
@keyframes r2Breathe{ 0%,100%{ box-shadow:0 0 10px -2px rgba(251,113,133,.35); } 50%{ box-shadow:0 0 18px 0 rgba(251,113,133,.7); } }
.r2-weak em{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translate(-50%,5px);
  font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  padding:3px 7px; border-radius:99px; color:#fff; background:var(--danger);
  opacity:0;
}
.cell.is-in .r2-weak em{ animation:r2TagIn .5s ease-out .8s forwards; }
@keyframes r2TagIn{ from{ opacity:0; transform:translate(-50%,5px); } to{ opacity:1; transform:translate(-50%,0); } }
.r2-base{ position:absolute; left:26px; right:26px; bottom:16px; height:1px; background:var(--border); }

/* ---------- R3: player real ---------- */
.art-r3{ padding:16px 20px; display:flex; flex-direction:column; justify-content:center; }
.r3-mini{ display:flex; flex-direction:column; gap:6px; }
.r3-text{ font-size:11.5px; line-height:1.5; color:#D7DDEA; }
.r3-hl{
  color:#F2E6C8; background-image:linear-gradient(rgba(251,191,36,.28),rgba(251,191,36,.28));
  background-repeat:no-repeat; background-size:0% 100%; border-radius:3px; padding:0 2px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
  animation:r3Hl 6s ease-in-out infinite;
}
@keyframes r3Hl{ 0%,8%{ background-size:0% 100%; } 26%{ background-size:100% 100%; } 92%{ background-size:100% 100%; } 100%{ background-size:0% 100%; } }
.r3-alt{ position:relative; display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,.03); border:1px solid var(--border); }
.r3-alt b{ width:15px; height:15px; flex:none; display:grid; place-items:center; border-radius:4px; background:rgba(255,255,255,.05); border:1px solid var(--border-strong); font-size:8px; font-weight:700; color:var(--muted); }
.r3-alt i{ height:4px; flex:1; border-radius:99px; background:#2C3346; }
.r3-pick{ background:rgba(129,140,248,.14); border-color:rgba(129,140,248,.5); }
.r3-pick b{ background:var(--brand); border-color:var(--brand); color:#fff; }
.r3-strike i, .r3-strike b{ opacity:.4; }
.r3-strike::after{
  content:""; position:absolute; left:8px; right:8px; top:50%; height:1.5px; border-radius:2px;
  background:var(--danger); transform:scaleX(0); transform-origin:left;
  animation:r3Strike 6s ease-in-out infinite;
}
@keyframes r3Strike{ 0%,30%{ transform:scaleX(0); } 46%{ transform:scaleX(1); } 92%{ transform:scaleX(1); } 100%{ transform:scaleX(0); } }
.r3-timer{
  position:absolute; top:16px; right:18px; display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:99px; background:rgba(255,255,255,.05); border:1px solid var(--border);
  font-size:11px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums;
}
.r3-timer svg{ width:13px; height:13px; color:var(--brand); }

/* ---------- R4: refazer erradas ---------- */
.art-r4{ display:grid; place-items:center; }
.r4-dots{ display:grid; grid-template-columns:repeat(6,1fr); gap:9px; }
.r4-dot{ width:16px; height:16px; border-radius:5px; }
.r4-dot.ok{ background:rgba(52,211,153,.22); border:1px solid rgba(52,211,153,.45); animation:r4Fade 5.5s ease-in-out infinite; }
.r4-dot.err{ background:rgba(251,113,133,.28); border:1px solid rgba(251,113,133,.55); animation:r4Keep 5.5s ease-in-out infinite; }
@keyframes r4Fade{ 0%,36%{ opacity:1; transform:scale(1); } 52%{ opacity:.12; transform:scale(.8); } 90%{ opacity:.12; transform:scale(.8); } 100%{ opacity:1; transform:scale(1); } }
@keyframes r4Keep{ 0%,36%{ transform:scale(1); box-shadow:none; } 52%{ transform:scale(1.14); box-shadow:0 0 12px -2px rgba(251,113,133,.6); } 90%{ transform:scale(1.14); } 100%{ transform:scale(1); box-shadow:none; } }
.r4-btn{
  position:absolute; bottom:-2px; left:50%; transform:translate(-50%,10px);
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:99px;
  background:rgba(129,140,248,.14); border:1px solid rgba(129,140,248,.4);
  font-size:11.5px; font-weight:600; color:#C7CDFB; white-space:nowrap; opacity:0;
  animation:r4Btn 5.5s ease-in-out infinite;
}
.r4-btn svg{ width:14px; height:14px; color:var(--brand); }
@keyframes r4Btn{ 0%,54%{ opacity:0; transform:translate(-50%,10px); } 64%{ opacity:1; transform:translate(-50%,0); } 90%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,10px); } }

/* ---------- R5: instala no celular ---------- */
.art-r5{ display:grid; place-items:center; }
.r5-phone{
  position:relative; width:116px; height:130px; padding:7px; border-radius:20px 20px 0 0;
  background:linear-gradient(180deg,#1b2030,#0f131c); border:1px solid var(--border-strong); border-bottom:none;
  box-shadow:var(--shadow-lift); overflow:hidden;
}
.r5-notch{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:34px; height:4px; border-radius:99px; background:#05070c; z-index:3; }
.r5-home{ position:relative; width:100%; height:100%; border-radius:14px 14px 0 0; background:linear-gradient(180deg,#0c101a,#0a0e16); border:1px solid var(--border); border-bottom:none; padding:14px 12px 0; display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; }
.r5-app{ width:22px; height:22px; border-radius:7px; background:rgba(255,255,255,.06); border:1px solid var(--border); }
.r5-icon{
  width:22px; height:22px; border-radius:7px; object-fit:contain;
  background:linear-gradient(160deg,#141a29,#0a0e18); border:1px solid rgba(129,140,248,.4);
  box-shadow:0 0 0 0 rgba(129,140,248,.6);
  opacity:0; transform:scale(.3);
  animation:r5Icon 6s ease-in-out infinite;
}
@keyframes r5Icon{
  0%,58%{ opacity:0; transform:scale(.3); }
  68%   { opacity:1; transform:scale(1.15); box-shadow:0 0 18px -2px rgba(129,140,248,.7); }
  74%   { transform:scale(1); }
  92%   { opacity:1; }
  100%  { opacity:0; transform:scale(.3); }
}
.r5-prompt{
  position:absolute; left:8px; right:8px; bottom:8px; z-index:2;
  display:flex; align-items:center; gap:8px; padding:8px; border-radius:12px;
  background:rgba(24,29,42,.97); border:1px solid var(--border-strong); box-shadow:var(--shadow-lift);
  transform:translateY(140%); animation:r5Prompt 6s ease-in-out infinite;
}
.r5-prompt-icon{ width:22px; height:22px; border-radius:6px; flex:none; background:linear-gradient(160deg,#141a29,#0a0e18); border:1px solid rgba(129,140,248,.3); }
.r5-prompt-lines{ display:flex; flex-direction:column; gap:4px; flex:1; }
.r5-prompt-lines i{ height:4px; border-radius:99px; background:#2C3346; }
.r5-prompt-lines i:nth-child(1){ width:100%; } .r5-prompt-lines i:nth-child(2){ width:60%; }
.r5-prompt-btn{ width:26px; height:16px; border-radius:6px; background:var(--brand); flex:none; }
@keyframes r5Prompt{
  0%   { transform:translateY(140%); }
  12%  { transform:translateY(0); }
  46%  { transform:translateY(0); }
  56%  { transform:translateY(140%); }
  100% { transform:translateY(140%); }
}

/* =========================== POR DENTRO ========================== */
.inside{ position:relative; overflow:hidden; padding-bottom:80px; }
.inside::before{
  content:""; position:absolute; z-index:0; inset:0; pointer-events:none;
  background:radial-gradient(46rem 30rem at 78% 30%, rgba(129,140,248,.1), transparent 62%);
}
.inside > .wrap{ position:relative; z-index:1; }
.inside-head{ max-width:34em; margin-inline:auto; text-align:center; }
.inside-head .section-sub{ margin-inline:auto; }

.inside-grid{
  margin-top:52px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:56px; align-items:center;
}

/* abas */
.inside-tabs{ display:flex; flex-direction:column; gap:10px; }
.in-tab{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:15px 18px; border-radius:var(--r-lg); text-align:left;
  background:rgba(20,25,36,.5); border:1px solid var(--border);
  transition:transform .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.in-tab:hover{ transform:translateX(3px); border-color:var(--border-strong); background:rgba(20,25,36,.8); }
.in-tab-ic{
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--border);
  color:var(--muted); transition:color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.in-tab-ic svg{ width:22px; height:22px; }
.in-tab-tx{ display:flex; flex-direction:column; gap:2px; }
.in-tab-tx b{ font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--content); }
.in-tab-tx i{ font-style:normal; font-size:13px; color:var(--subtle); }
/* aba ativa: barra de acento + destaque */
.in-tab.is-active{
  background:linear-gradient(120deg, rgba(129,140,248,.14), rgba(56,189,248,.05));
  border-color:rgba(129,140,248,.4);
  box-shadow:0 14px 34px -22px rgba(129,140,248,.7);
}
.in-tab.is-active .in-tab-ic{ background:rgba(129,140,248,.18); border-color:rgba(129,140,248,.45); color:var(--brand); }
.in-tab.is-active .in-tab-tx i{ color:var(--muted); }
.in-tab::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%) scaleY(0);
  width:3px; height:56%; border-radius:0 3px 3px 0; background:var(--brand);
  transition:transform .3s var(--ease);
}
.in-tab.is-active::before{ transform:translateY(-50%) scaleY(1); }

/* palco do celular */
.inside-stage{ position:relative; display:flex; justify-content:center; }
.inside-glow{
  position:absolute; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(129,140,248,.22), transparent 66%);
  filter:blur(30px); animation:insideGlow 8s ease-in-out infinite;
}
@keyframes insideGlow{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.1); opacity:1; } }
.in-phone{
  position:relative; z-index:1; width:288px; padding:11px;
  border-radius:40px;
  background:linear-gradient(180deg,#20263a,#0e121b);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lift), 0 0 60px -20px rgba(129,140,248,.5);
}
.in-notch{
  position:absolute; top:22px; left:50%; transform:translateX(-50%); z-index:3;
  width:96px; height:24px; border-radius:99px; background:#05070c;
}
.in-screen{
  position:relative; width:100%; aspect-ratio:394 / 851; border-radius:30px; overflow:hidden;
  background:#0a0e16; border:1px solid rgba(0,0,0,.6);
}
.in-shot{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  opacity:0; transform:scale(1.015);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.in-shot.is-active{ opacity:1; transform:scale(1); }

/* ============================== ÁREAS ============================= */
.areas{ position:relative; overflow:hidden; padding-top:60px; }

/* fundo vivo: manchas de luz derivando devagar + um facho suave que
   cruza atrás dos chips. tudo nasce e some no transparente (máscara) pra
   emendar sem borda com a seção de cima e a de baixo */
.areas-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
}
.areas-blob{ position:absolute; border-radius:50%; filter:blur(64px); will-change:transform; }
.areas-blob-1{ width:40rem; height:30rem; left:-8rem; top:-4rem;
  background:radial-gradient(circle, rgba(129,140,248,.24), transparent 68%);
  animation:areasDrift1 30s ease-in-out infinite; }
.areas-blob-2{ width:38rem; height:30rem; right:-10rem; top:34%;
  background:radial-gradient(circle, rgba(56,189,248,.2), transparent 68%);
  animation:areasDrift2 36s ease-in-out infinite; }
.areas-blob-3{ width:34rem; height:26rem; left:38%; bottom:-6rem;
  background:radial-gradient(circle, rgba(167,139,250,.18), transparent 68%);
  animation:areasDrift3 33s ease-in-out infinite; }
@keyframes areasDrift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(5rem,3rem) scale(1.12); } }
@keyframes areasDrift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-5rem,-3rem) scale(1.08); } }
@keyframes areasDrift3{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(4rem,-3rem) scale(1.1); } }
/* facho diagonal bem tênue passando pela faixa central */
.areas-beam{
  position:absolute; top:38%; left:-30%; width:160%; height:34%;
  background:linear-gradient(100deg, transparent 30%, rgba(165,180,252,.1) 50%, transparent 70%);
  filter:blur(24px); transform:rotate(-4deg);
  animation:areasBeam 12s ease-in-out infinite;
}
@keyframes areasBeam{ 0%,100%{ opacity:.35; transform:rotate(-4deg) translateX(-4%); } 50%{ opacity:.8; transform:rotate(-4deg) translateX(4%); } }

.areas > .wrap, .areas > .marquee{ position:relative; z-index:1; }
.areas-head{ max-width:34em; margin-inline:auto; text-align:center; }
.areas-head .section-sub{ margin-inline:auto; }

.marquee{
  margin-top:48px; display:flex; flex-direction:column; gap:8px;
  /* desvanece nas duas pontas pra as faixas nascerem e sumirem no escuro */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* padding vertical dá folga pro chip não encostar na borda do clip
   (o overflow:hidden recorta as duas direções; sem isso a borda de baixo
   de alguns chips ficava raspada) */
.mq-row{ overflow:hidden; padding-block:5px; }
.mq-track{
  display:inline-flex; gap:14px; width:max-content; padding-right:14px;
  will-change:transform;
}
/* duas cópias iguais na track: mover 50% dá um loop sem emenda */
.mq-a{ animation:mqScroll 46s linear infinite; }
.mq-b{ animation:mqScroll 52s linear infinite reverse; }
.mq-c{ animation:mqScroll 40s linear infinite; }
@keyframes mqScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.mq-row:hover .mq-track{ animation-play-state:paused; }

.chip-area{
  flex:none;
  padding:12px 20px; border-radius:99px;
  background:rgba(20,25,36,.6); border:1px solid var(--border);
  font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--muted);
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.chip-area:hover{ color:var(--content); border-color:var(--border-strong); }
.chip-area.is-hot{
  color:#C7CDFB;
  background:linear-gradient(120deg, rgba(129,140,248,.16), rgba(56,189,248,.06));
  border-color:rgba(129,140,248,.4);
}

.areas-foot{ margin-top:44px; text-align:center; }
.areas-foot p{
  display:inline-block;
  font-size:clamp(1.05rem, 2vw, 1.35rem); font-weight:700; letter-spacing:-.015em;
  color:var(--content);
}
.areas-foot b{
  color:transparent;
  background:linear-gradient(100deg,#A5B4FC,#38BDF8);
  -webkit-background-clip:text; background-clip:text;
}

/* =========================== COMPARATIVO ========================= */
.compare{ position:relative; overflow:hidden; }
.compare::before{
  content:""; position:absolute; z-index:0; inset:0; pointer-events:none;
  background:radial-gradient(50rem 26rem at 72% 8%, rgba(129,140,248,.1), transparent 60%);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%);
          mask-image:linear-gradient(180deg, transparent, #000 18%);
}
.compare > .wrap{ position:relative; z-index:1; }
.cmp-head{ max-width:34em; margin-inline:auto; text-align:center; }
.cmp-head .section-sub{ margin-inline:auto; }

.cmp-grid{
  margin-top:48px;
  display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch;
}
.cmp-col{
  position:relative; padding:26px 24px;
  border-radius:var(--r-xl); border:1px solid var(--border);
  display:flex; flex-direction:column;
}
/* coluna "antes": apagada, dessaturada */
.cmp-old{ background:rgba(20,25,36,.4); }
.cmp-old .cmp-col-head b{ color:var(--muted); }
.cmp-old .cmp-list p{ color:var(--subtle); }
/* coluna "Papiro": em destaque, com brilho */
.cmp-new{
  background:linear-gradient(165deg, rgba(129,140,248,.12), rgba(20,25,36,.6) 55%);
  border-color:rgba(129,140,248,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -34px rgba(129,140,248,.6);
}
.cmp-tag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  padding:5px 14px; border-radius:99px; white-space:nowrap;
  background:linear-gradient(180deg,#8B95F9,#6D78F0); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.01em;
  box-shadow:0 8px 22px -8px rgba(129,140,248,.8);
}

.cmp-col-head{ display:flex; align-items:center; gap:13px; padding-bottom:18px; margin-bottom:6px; border-bottom:1px solid var(--border); }
.cmp-col-ic{ width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:12px; overflow:hidden; }
.cmp-old .cmp-col-ic{ background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--subtle); }
.cmp-old .cmp-col-ic svg{ width:24px; height:24px; }
.cmp-new .cmp-col-ic{ background:linear-gradient(160deg,#141a29,#0a0e18); border:1px solid rgba(129,140,248,.4); }
.cmp-new .cmp-col-ic img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.cmp-col-head b{ display:block; font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--content); }
.cmp-col-head i{ font-style:normal; font-size:13px; color:var(--subtle); }

.cmp-list{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.cmp-list li{ display:flex; align-items:center; gap:13px; min-height:64px; padding:8px 0; }
.cmp-list li + li{ border-top:1px solid rgba(255,255,255,.04); }
.cmp-ic{ width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:8px; }
.cmp-ic svg{ width:16px; height:16px; }
.cmp-x{ background:rgba(251,113,133,.12); color:var(--danger); }
.cmp-ok{ background:rgba(52,211,153,.14); color:var(--success); }
.cmp-list p{ font-size:14.5px; line-height:1.45; }
.cmp-new .cmp-list p{ color:var(--content); font-weight:500; }

/* ============================== PLANOS ============================ */
.plans{ position:relative; overflow:hidden; padding-bottom:76px; }

/* fundo premium: manchas derivando + um holofote que respira atrás do
   card do meio. tudo desvanece nas pontas pra emendar com as seções
   vizinhas sem borda */
.plans-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.plans-blob{ position:absolute; border-radius:50%; filter:blur(66px); will-change:transform; }
.plans-blob-1{ width:42rem; height:32rem; left:-10rem; top:2rem;
  background:radial-gradient(circle, rgba(129,140,248,.22), transparent 68%);
  animation:plansDrift1 32s ease-in-out infinite; }
.plans-blob-2{ width:40rem; height:32rem; right:-12rem; bottom:-4rem;
  background:radial-gradient(circle, rgba(56,189,248,.18), transparent 68%);
  animation:plansDrift2 38s ease-in-out infinite; }
@keyframes plansDrift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(6rem,3rem) scale(1.1); } }
@keyframes plansDrift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-5rem,-3rem) scale(1.08); } }
/* holofote central, atrás do card em destaque */
.plans-spot{
  position:absolute; top:44%; left:50%; transform:translate(-50%,-50%);
  width:640px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(129,140,248,.2), transparent 62%);
  filter:blur(24px); animation:plansSpot 7s ease-in-out infinite;
}
@keyframes plansSpot{ 0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.08); } }

.plans > .wrap{ position:relative; z-index:1; }
.plans-head{ max-width:34em; margin-inline:auto; text-align:center; }
.plans-head .section-sub{ margin-inline:auto; }

/* faixa de promoção + contador */
.promo{
  margin:32px auto 0; max-width:520px;
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  padding:14px 22px; border-radius:99px;
  background:rgba(20,25,36,.65); border:1px solid rgba(129,140,248,.3);
  box-shadow:0 16px 40px -28px rgba(129,140,248,.7); backdrop-filter:blur(8px);
}
.promo-flash{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; letter-spacing:.01em; color:#C7CDFB; }
.promo-flash svg{ width:16px; height:16px; color:var(--warning); }
.countdown{ display:inline-flex; align-items:center; gap:8px; }
.cd-unit{ display:inline-flex; flex-direction:column; align-items:center; gap:1px; }
.cd-unit b{ font-size:19px; font-weight:800; color:var(--content); font-variant-numeric:tabular-nums; line-height:1; }
.cd-unit i{ font-style:normal; font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--subtle); }
.cd-sep{ font-size:17px; font-weight:800; color:var(--border-strong); margin-top:-8px; }

/* grade de planos */
.plans-grid{
  margin-top:40px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:center;
}
.plan{
  position:relative; display:flex; flex-direction:column;
  padding:30px 26px; border-radius:var(--r-xl);
  background:rgba(20,25,36,.55); border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), var(--shadow-card);
  backdrop-filter:blur(8px);
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.plan:hover{ transform:translateY(-4px); border-color:var(--border-strong); }
/* card do meio: maior, com brilho, em destaque */
.plan-featured{
  transform:scale(1.05); z-index:2;
  background:linear-gradient(180deg, rgba(129,140,248,.14), rgba(20,25,36,.7) 46%);
  border-color:rgba(129,140,248,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 40px 80px -40px rgba(129,140,248,.75), var(--shadow-glow);
}
.plan-featured:hover{ transform:scale(1.05) translateY(-4px); }
.plan-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  padding:6px 16px; border-radius:99px; white-space:nowrap;
  background:linear-gradient(180deg,#8B95F9,#6D78F0); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.01em;
  box-shadow:0 10px 26px -8px rgba(129,140,248,.9);
}
.plan-name{ font-size:18px; font-weight:800; letter-spacing:-.01em; }
.plan-desc{ margin-top:6px; font-size:13.5px; line-height:1.45; color:var(--subtle); min-height:2.7em; }

.plan-price{ margin-top:20px; padding-bottom:22px; border-bottom:1px solid var(--border); }
.plan-was{ display:block; font-size:13px; font-weight:600; color:var(--subtle); text-decoration:line-through; text-decoration-color:rgba(251,113,133,.7); }
.plan-now{ display:inline-flex; align-items:baseline; margin-top:4px; font-size:46px; font-weight:800; letter-spacing:-.03em; color:var(--content); line-height:1; }
.plan-now em{ font-style:normal; font-size:20px; font-weight:700; margin-right:4px; color:var(--muted); align-self:flex-start; margin-top:6px; }
.plan-now b{ font-size:24px; font-weight:800; }
.plan-per{ margin-left:6px; font-size:14px; font-weight:600; color:var(--subtle); }

.plan-feats{ display:flex; flex-direction:column; gap:12px; margin:22px 0 26px; flex:1; }
.plan-feats li{ display:flex; align-items:flex-start; gap:11px; font-size:14px; line-height:1.4; color:var(--muted); }
.plan-feats li b{ color:var(--content); font-weight:700; }
/* linha de benefício com sublegenda (a equivalência em questões) */
.pf-tx{ display:flex; flex-direction:column; gap:3px; }
.pf-tx i{ font-style:normal; font-size:12px; line-height:1.35; color:var(--subtle); }
.plan-featured .pf-tx i{ color:var(--muted); }
.pf-ic{ width:20px; height:20px; flex:none; margin-top:1px; display:grid; place-items:center; border-radius:6px; background:rgba(52,211,153,.14); color:var(--success); }
.pf-ic svg{ width:13px; height:13px; }
.plan-featured .pf-ic{ background:rgba(129,140,248,.18); color:var(--brand); }

.plan-cta{ margin-top:auto; }

/* garantias */
.plans-guarantee{
  margin-top:40px; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 30px;
}
.guar-item{ display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
.guar-item b{ color:var(--content); font-weight:700; }
.guar-item svg{ width:20px; height:20px; flex:none; color:var(--success); }
.plans-note{ margin-top:22px; text-align:center; font-size:13px; color:var(--subtle); max-width:44em; margin-inline:auto; }

/* ============================ DEPOIMENTOS ========================= */
.tst{ position:relative; overflow:hidden; padding-bottom:72px; }
.tst-head{ max-width:34em; margin-inline:auto; text-align:center; }
.tst-head .section-sub{ margin-inline:auto; }
.tst-marquee{
  margin-top:44px; display:flex; flex-direction:column; gap:16px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tst-row{ overflow:hidden; padding-block:6px; }
.tst-track{ display:inline-flex; align-items:stretch; gap:16px; width:max-content; }
.tst-a{ animation:mqScroll 66s linear infinite; }
.tst-b{ animation:mqScroll 78s linear infinite reverse; }
.tst-row:hover .tst-track{ animation-play-state:paused; }

.tst-card{
  flex:none; width:355px; display:flex; flex-direction:column; gap:14px;
  padding:22px 22px 24px; border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(255,255,255,.05), rgba(20,25,36,.6) 46%);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-card);
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.tst-card:hover{ transform:translateY(-3px); border-color:var(--border-strong); }
.tst-top{ display:flex; align-items:center; gap:12px; }
.tst-avatar{
  width:46px; height:46px; flex:none; display:grid; place-items:center; overflow:hidden;
  border-radius:50%;
  background:linear-gradient(160deg, rgba(var(--c),.95), rgba(var(--c),.5));
  border:1.5px solid rgba(var(--c),.6); box-shadow:0 6px 16px -8px rgba(var(--c),.8);
}
.tst-avatar img{ width:100%; height:100%; object-fit:cover; }
.tst-who{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tst-who b{ font-size:14.5px; font-weight:700; letter-spacing:-.01em; color:var(--content); }
.tst-plat{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:500; color:var(--subtle); }
.tst-plat svg{ width:13px; height:13px; flex:none; }
.tst-stars{ align-self:flex-start; color:var(--warning); font-size:12.5px; letter-spacing:1.5px; }
.tst-card blockquote{ font-size:14px; line-height:1.62; color:var(--muted); }

/* =============================== FAQ ============================== */
.faq{ position:relative; overflow:hidden; padding-top:60px; padding-bottom:64px; }
.faq-glow{
  position:absolute; z-index:0; top:0; left:50%; transform:translateX(-50%);
  width:min(760px,120vw); height:340px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(129,140,248,.1), transparent 68%);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 40%);
          mask-image:linear-gradient(180deg, transparent, #000 40%);
}
.faq > .wrap{ position:relative; z-index:1; }
.faq-head{ max-width:34em; margin-inline:auto; text-align:center; }
.faq-head .section-sub{ margin-inline:auto; }

.faq-list{ margin-top:44px; max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  border-radius:var(--r-lg); border:1px solid var(--border);
  background:rgba(20,25,36,.5); backdrop-filter:blur(6px);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.faq-item.is-open{ border-color:rgba(129,140,248,.4); background:rgba(20,25,36,.75); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; text-align:left;
  font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--content);
}
.faq-item.is-open .faq-q{ color:#C7CDFB; }
.faq-chevron{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border-radius:8px; background:rgba(255,255,255,.04); border:1px solid var(--border);
  color:var(--muted); transition:transform .3s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.faq-chevron svg{ width:18px; height:18px; }
.faq-item.is-open .faq-chevron{ transform:rotate(180deg); background:rgba(129,140,248,.16); color:var(--brand); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .38s var(--ease); }
.faq-a-inner{ padding:0 22px 20px; }
.faq-a-inner p{ font-size:15px; line-height:1.6; color:var(--muted); max-width:60ch; }

/* =========================== CTA FINAL =========================== */
.cta-final{ position:relative; padding-top:44px; }
.cta-card{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-xl);
  padding:64px 40px;
  border:1px solid rgba(129,140,248,.32);
  background:linear-gradient(160deg, rgba(24,29,44,.9), rgba(12,15,22,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 40px 90px -50px rgba(129,140,248,.7);
  text-align:center;
}
.cta-canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:.9; }
/* holofote que segue o cursor (posição vem do JS via --mx/--my) */
.cta-spot{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(300px 300px at var(--mx,50%) var(--my,40%), rgba(129,140,248,.22), transparent 70%);
  opacity:0; transition:opacity .4s var(--ease);
}
.cta-card:hover .cta-spot{ opacity:1; }
.cta-inner{ position:relative; z-index:2; max-width:44rem; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.cta-mark{
  width:60px; height:60px; display:grid; place-items:center; margin-bottom:22px;
  border-radius:16px; background:linear-gradient(160deg,#141a29,#0a0e18);
  border:1px solid rgba(129,140,248,.4); box-shadow:var(--shadow-glow);
  animation:ctaMark 5s ease-in-out infinite;
}
.cta-mark img{ width:70%; height:70%; object-fit:contain; }
@keyframes ctaMark{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.cta-inner h2{
  font-size:clamp(1.9rem, 4vw, 2.9rem); font-weight:800; letter-spacing:-.03em; line-height:1.08;
  text-wrap:balance;
}
.cta-inner p{ margin-top:18px; font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.6; color:var(--muted); }
.cta-btn{ margin-top:30px; }
.cta-trust{ margin-top:26px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px; }
.cta-trust li{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--subtle); }
.cta-trust svg{ width:16px; height:16px; color:var(--success); flex:none; }

/* ============================= RODAPÉ ============================= */
.site-footer{ position:relative; margin-top:40px; padding:64px 0 40px; border-top:1px solid var(--border); }
.site-footer::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(40rem 16rem at 50% 0%, rgba(129,140,248,.07), transparent 70%);
}
.footer-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:40px;
}
.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.footer-mark{ height:26px; width:auto; object-fit:contain; }
.footer-sig{ font-size:9px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--subtle); }
.footer-tag{ margin-top:14px; font-size:14px; line-height:1.6; color:var(--subtle); max-width:26em; }
.footer-col{ display:flex; flex-direction:column; gap:11px; }
.footer-col h3{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--subtle); margin-bottom:4px; }
.footer-col a{ font-size:14.5px; color:var(--muted); transition:color .2s var(--ease); width:fit-content; }
.footer-col a:hover{ color:var(--content); }
.footer-bottom{
  position:relative; z-index:1;
  margin-top:48px; padding-top:24px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:13px; color:var(--subtle);
}

/* ========================== RESPONSIVO =========================== */
@media (max-width:1080px){
  .nav-desk{ gap:0; }
  .nav-desk a{ padding:8px 10px; font-size:14px; }
  .hero-grid{ column-gap:36px; }

  /* no tablet o card do meio não escala (senão encosta nos vizinhos) */
  .plans-grid{ gap:16px; }
  .plan{ padding:26px 20px; }
  .plan-featured{ transform:none; }
  .plan-featured:hover{ transform:translateY(-4px); }
}

@media (max-width:900px){
  :root{ --head-h:62px; }
  .nav-desk, .header-cta{ display:none; }
  .burger{ display:flex; }

  .section{ padding-block:76px; }

  .hero{ padding-top:calc(var(--head-h) + 40px); padding-bottom:64px; }

  /* empilha em coluna única, na ordem do HTML: texto principal, depois a
     animação do PDF, depois "funciona com prova de..." por último */
  .hero-grid{ grid-template-columns:1fr; grid-template-rows:none; row-gap:34px; }
  .hero-copy, .hero-stage, .hero-areas{ grid-column:auto; grid-row:auto; }

  .hero-copy{ text-align:center; }
  .hero-sub{ margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  .hero-trust{ justify-content:center; gap:8px 18px; }
  .hero-areas{ margin-inline:auto; margin-top:0; padding-top:20px; text-align:center; }
  /* width:100% é necessário aqui: todo filho de .hero-stage é position:absolute,
     então sem uma largura explícita o auto-margin de centralização colapsa a caixa a 0 */
  .hero-stage{ width:100%; height:452px; margin:0 auto; max-width:440px; align-self:start; }
  .hs-doc{ width:224px; }
  .hs-card{ width:min(324px,88vw); }
  .hs-chip-1{ left:auto; right:0; top:3%; }
  .hs-chip-2{ left:0; right:auto; top:27%; }
  .hs-chip-3{ left:auto; right:0; top:57%; }

  /* o documento sai menos de lado para não ser cortado pela borda da tela */
  @keyframes hsDoc{
    0%   { opacity:0; transform:translate3d(0,14px,0) scale(.95) rotate(-2deg); }
    5%   { opacity:1; transform:translate3d(0,0,0) scale(1) rotate(-2deg); }
    26%  { opacity:1; transform:translate3d(0,0,0) scale(1) rotate(-2deg); }
    36%  { opacity:.24; transform:translate3d(-26%,-22%,0) scale(.68) rotate(-9deg); }
    86%  { opacity:.24; transform:translate3d(-26%,-22%,0) scale(.68) rotate(-9deg); }
    93%  { opacity:0; transform:translate3d(-26%,-22%,0) scale(.66) rotate(-9deg); }
    100% { opacity:0; transform:translate3d(0,14px,0) scale(.95) rotate(-2deg); }
  }

  .pain-grid{ grid-template-columns:repeat(2, 1fr); }
  .pain-next{ padding:30px 28px; }
  .pain-card:hover{ transform:translateY(-3px); }

  /* passos empilham: arte em cima, texto embaixo; some a linha central */
  .how{ padding-top:64px; }
  .how-steps{ gap:48px; margin-top:44px; }
  .how-spine{ display:none; }
  .how-step{ grid-template-columns:1fr; gap:24px; }
  .how-step:nth-child(even) .how-art{ order:0; }
  .how-art{ height:300px; max-width:460px; width:100%; margin-inline:auto; }
  .how-text{ text-align:center; }
  .how-text p{ margin-inline:auto; }

  /* bento vira coluna única, cada célula com altura própria */
  .bento{ grid-template-columns:1fr; grid-auto-rows:auto; gap:16px; margin-top:40px; }
  .cell{ grid-column:auto; grid-row:auto; min-height:288px; }
  .cell-lg{ min-height:320px; }
  .cell-cap p{ max-width:36em; }

  /* por dentro: celular em cima, abas embaixo */
  .inside-grid{ grid-template-columns:1fr; gap:36px; margin-top:40px; }
  .inside-stage{ order:-1; }
  .inside-tabs{ max-width:520px; width:100%; margin-inline:auto; }

  /* comparativo empilha: antes em cima, Papiro embaixo */
  .cmp-grid{ grid-template-columns:1fr; gap:20px; max-width:520px; margin-inline:auto; }
  .cmp-list li{ min-height:0; }

  /* planos empilham numa coluna, destaque só pelo brilho */
  .plans-grid{ grid-template-columns:1fr; gap:18px; max-width:420px; margin-inline:auto; }
  .plan-featured{ order:-1; }
  .plans-guarantee{ flex-direction:column; align-items:center; gap:12px; }

  .cta-card{ padding:48px 28px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width:560px){
  .wrap{ padding-inline:18px; }
  .hero{ padding-bottom:52px; }
  .hero-title{ font-size:clamp(1.95rem,7.6vw,2.5rem); }
  .hero-sub{ font-size:15px; }
  .hero-actions .btn{ width:100%; }
  .brand-mark{ height:21px; }

  .hero-stage{ height:406px; }
  .hs-doc{ width:186px; padding:12px 11px 13px; }
  .hs-doc .hs-fig{ height:40px; }
  .hs-doc .hs-l{ height:5px; margin-bottom:7px; }

  .hs-card{ width:min(298px,92vw); padding:12px 13px 13px; border-radius:var(--r-md); }
  .hs-card-top{ padding-bottom:10px; margin-bottom:11px; }
  .hs-statement p{ font-size:11.6px; line-height:1.55; }
  .hs-alts{ margin-top:11px; gap:6px; }
  .hs-alt{ padding:7px 9px; }
  .hs-letter{ width:19px; height:19px; font-size:10px; }
  .hs-ai{ margin-top:11px; padding:7px 11px; font-size:11px; }

  .hs-chip{ font-size:10.4px; padding:5px 9px; gap:6px; }
  .hs-chip svg{ width:12px; height:12px; }

  .pain-grid{ grid-template-columns:1fr; gap:14px; }
  .pain-next{ padding:26px 22px; border-radius:var(--r-lg); }
  .pain-next p{ font-size:17px; }

  .how-art{ height:270px; }

  .cell{ min-height:266px; }
  .cell-cap{ padding:16px 18px 18px; }

  .in-phone{ width:248px; }
  .in-tab{ padding:13px 15px; gap:12px; }
  .in-tab-ic{ width:38px; height:38px; }
  .in-tab-ic svg{ width:20px; height:20px; }
  .in-tab-tx b{ font-size:14px; }
  .in-tab-tx i{ font-size:12px; }

  .marquee{ margin-top:36px; gap:4px; }
  .chip-area{ font-size:13.5px; padding:10px 16px; }
  .areas-foot{ margin-top:34px; }

  .tst-card{ width:290px; padding:18px 18px 20px; }
  .tst-marquee{ gap:12px; }

  .faq-q{ padding:17px 18px; font-size:15px; }
  .faq-a-inner{ padding:0 18px 18px; }
  .cta-card{ padding:40px 22px; }
  .cta-trust{ gap:8px 16px; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .footer-brand{ grid-column:auto; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:6px; }
}

/* ---------------- respeito a quem pediu menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hs-doc, .hs-scan, .hs-chip, .hs-card, .hs-statement p,
  .hs-alt, .hs-ai, .hs-check, .stage-halo{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
  .hs-scan{ display:none; }
  .hs-doc{ transform:translate3d(-56%,-16%,0) scale(.74) rotate(-9deg) !important; opacity:.26 !important; }
  .hs-hl{ background-size:100% 100% !important; animation:none !important; }
  .hs-alt.is-correct{
    background:rgba(52,211,153,.10) !important; border-color:rgba(52,211,153,.55) !important;
  }
  .hs-alt.is-correct .hs-letter{ background:var(--success) !important; border-color:var(--success) !important; color:#07281D !important; }

  /* sem o brilho correndo: some a camada -glow, fica só o traço base parado */
  .hero-lines-glow{ display:none !important; }

  /* seção 3: sem loops, cada arte descansa num quadro final legível */
  .how-spine::after{ display:none !important; }
  .a1-doc-1{ transform:translate(-110%,0) rotate(-4deg) !important; opacity:1 !important; }
  .a1-doc-2{ transform:translate(10%,0) rotate(4deg) !important; opacity:1 !important; }
  .a1-ring-fill{ stroke-dashoffset:0 !important; opacity:1 !important; }
  /* passo 2: some os fragmentos, mostra a questão pronta no celular */
  .a2-frag{ display:none !important; }
  .a2-map{ opacity:0 !important; }
  .a2-quiz{ opacity:1 !important; }
  .a2-grid i{ transform:none !important; }
  /* passo 3: linhas da explicação já preenchidas, sem cursor piscando */
  .a3-line{ width:88% !important; opacity:1 !important; }
  .a3-cursor{ display:none !important; }
  /* passo 4: mostra o fim do ciclo (dominada) */
  .a4-wrong{ opacity:1 !important; transform:none !important; top:14% !important; left:10% !important; }
  .a4-back{ opacity:1 !important; transform:none !important; }
  .a4-loop{ animation:none !important; }

  /* recursos: cada arte descansa num quadro final legível */
  .r1-scan{ display:none !important; }
  .r1-chip{ opacity:1 !important; transform:none !important; }
  .r2-bar{ height:var(--h) !important; }
  .r2-weak em{ opacity:1 !important; transform:translateX(-50%) !important; }
  .r3-hl{ background-size:100% 100% !important; }
  .r3-strike::after{ transform:scaleX(1) !important; }
  .r4-dot.ok{ opacity:.12 !important; }
  .r4-btn{ opacity:1 !important; transform:translate(-50%,0) !important; }
  .r5-icon{ opacity:1 !important; transform:none !important; }
  .r5-prompt{ transform:translateY(140%) !important; }

  /* áreas e depoimentos: faixas param, ficam estáticas e legíveis */
  .mq-track, .tst-track{ animation:none !important; transform:translateX(0) !important; }
}