/* ---------- tokens ----------
   nomeados a partir do proprio conceito da marca (drop diario, ticket, urgencia):
   --bg          "breu"        fundo base, quase preto
   --card        "concreto"    superficie dos cards/tickets
   --accent      "chama"       laranja-vermelho de urgencia, unico driver de CTA
   --accent-2    "faisca"      amarelo-ambar, só em gradientes/realces do accent
   --ink         "papel"       texto principal, off-white (nunca #fff puro)
*/
:root{
  --bg: #0a0a0c;
  --bg-soft: #111114;
  --card: #16161a;
  --card-border: #2a2a30;
  --ink: #f3f2ef;
  --ink-dim: #a7a6ad;
  /* Era #6f6e76 e reprovava no WCAG AA em todo fundo do site (3,58:1 a
     3,93:1, contra o mínimo de 4,5). Isso derrubava, entre outras
     coisas, o aviso de afiliado do rodapé — que é exigência dos termos
     da Amazon Associates e não pode ser ilegível. #8a8992 é o tom mais
     escuro que ainda passa nos três fundos (pior caso 5,22:1), então
     mantém a hierarquia de "texto secundário" sem reprovar. */
  --ink-faint: #8a8992;
  --accent: #ff4b2b;
  --accent-2: #ffb020;
  --accent-ink: #0a0a0c;
  --radius: 18px;
  --maxw: 1180px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', -apple-system, sans-serif;
  overflow-x:hidden;
  line-height:1.5;
  position:relative;
}
/* graos sutis — quebra a chapada digital, da textura de "papel" ao fundo */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
h1,h2,h3{
  font-family:'Space Grotesk', 'Inter', sans-serif;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.05;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img,video{max-width:100%; display:block;}
::selection{background:var(--accent); color:var(--accent-ink);}

.accent{color:var(--accent);}

.eyebrow{
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.18em;
  font-weight:700;
  color:var(--accent);
  margin-bottom:14px;
}

/* ---------- progress bar ---------- */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index:1000;
  transition:width .05s linear;
}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:18px 0;
  transition:background .3s var(--ease), padding .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,10,12,.75);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:12px 0;
  border-bottom:1px solid var(--card-border);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:1.25rem; letter-spacing:-0.02em;
}
.logo span{color:var(--accent);}
.nav-links{display:flex; gap:32px;}
.nav-links a{
  font-size:.9rem; color:var(--ink-dim); font-weight:500;
  transition:color .2s;
}
.nav-links a:hover{color:var(--ink);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border-radius:999px;
  font-weight:600; font-size:.92rem;
  cursor:pointer; border:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#0a0a0c;
  box-shadow:0 8px 30px -8px rgba(255,75,43,.6);
}
.btn-primary:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 14px 40px -10px rgba(255,75,43,.75);}
.btn-nav{padding:10px 20px; font-size:.85rem;}
.btn-outline{
  background:transparent; color:var(--ink);
  border:1px solid var(--card-border);
}
.btn-outline:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}
.btn-big{padding:20px 44px; font-size:1.05rem;}

/* ==================================================================
   HERO — airdrop. Não tem mais altura de 340vh no CSS: o espaço de
   rolagem é criado pelo ScrollTrigger (pin + end:'+=100%'), o que
   mantém a duração do pin num lugar só (js/hero3d.js) em vez de
   dividida entre CSS e JS.
   ================================================================== */
.hero{
  position:relative;
  height:100vh; width:100%;
  overflow:hidden;
  display:grid; place-items:center;
  /* zera o padding da regra genérica `section` (120px em cima e embaixo):
     o hero é full-bleed e tem altura fixa de 100vh — com box-sizing
     border-box aquele padding comia 240px da área útil e cortava a barra
     "Renda Extra!" pra fora da tela. O respiro interno fica no
     .hero-conteudo, que é quem deve tê-lo. */
  padding:0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 18%, rgba(255,75,43,.16), transparent 68%),
    radial-gradient(ellipse 45% 40% at 82% 78%, rgba(255,176,32,.08), transparent 62%),
    radial-gradient(ellipse 70% 60% at 18% 82%, rgba(255,75,43,.06), transparent 70%),
    linear-gradient(178deg, var(--bg), var(--bg-soft));
}
/* grão: tira a chapada digital do mesh de radiais acima */
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:4; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* camada 3D — atrás de tudo; a caixa é o mensageiro, não a mensagem */
.cena3d{position:absolute; inset:0; z-index:0; pointer-events:none;}
.cena3d canvas{width:100%; height:100%;}

/* piso de luz sob a caixa: dá "chão" ao objeto no momento do pouso */
.piso-luz{
  position:absolute; left:50%; top:50%; z-index:1;
  width:min(70vw,44rem); height:min(30vh,16rem);
  transform:translate(-50%,-20%);
  pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center, rgba(255,75,43,.22), transparent 70%);
  filter:blur(8px);
}

.hero-conteudo{
  position:relative; z-index:2;
  width:min(92vw,72rem);
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:clamp(16px,4vh,32px) 24px;
}
/* ------------------------------------------------------------------
   RITMO VERTICAL AMARRADO À ALTURA DA JANELA
   O hero é 100vh e NÃO rola por dentro (é pinado), então tudo aqui
   precisa caber. O custo fixo (título, subtítulo, barra) não encolhia
   junto com os cards, e num laptop 1366x610 a barra saía 70px pra fora.
   Usar `min(vw, vh)` em vez de só `vw` faz o bloco inteiro respirar
   junto quando a tela é baixa, em vez de só o card.
   ------------------------------------------------------------------ */
.hero h1{
  font-size:clamp(1.5rem, min(5.2vw, 6.5vh), 3.9rem);
  line-height:1.04; letter-spacing:-.025em;
  max-width:20ch; margin-bottom:clamp(8px,1.6vh,16px);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero-sub{
  margin:0 auto clamp(16px,5vh,48px); max-width:44ch;
  color:var(--ink-dim); font-size:clamp(.95rem,1.6vw,1.1rem);
}
/* ponto pulsante do "ao vivo" — sinal de que o drop é de hoje */
.eyebrow-vivo{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-bottom:clamp(8px,1.5vh,16px);
}
.eyebrow-vivo::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  animation:ping 2s ease-out infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(255,75,43,.7);}
  70%{box-shadow:0 0 0 10px rgba(255,75,43,0);}
  100%{box-shadow:0 0 0 0 rgba(255,75,43,0);}
}

/* ---------- cards de loja ----------
   tile sólido na cor da marca + logo real em ESCALA como marca d'água.
   Véu escuro na base garante contraste AA do texto branco mesmo sobre
   o amarelo do Mercado Livre (branco puro sobre #ffe600 dá ~1,25:1). */
/* estado inicial da coreografia — ver o script inline no <head>.
   Fica aqui pra valer já na primeira pintura, antes de qualquer JS. */
.pre-anim .loja,
.pre-anim .barra-cta{ opacity:0; }

.lojas{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(.75rem,1.6vw,24px);
  width:100%;
  /* `128vh` amarra o tamanho do card à ALTURA da janela, não só à
     largura: os cards são quadrados, então numa tela baixa e larga eles
     cresceriam pela largura e empurrariam a barra pra fora do hero (que
     é 100vh e não rola). Com o min(), a tela baixa manda. */
  max-width:min(100%, 52rem, 95vh);
  margin-inline:auto;
}
.loja{
  position:relative;
  grid-column:span var(--span,4);
  aspect-ratio:1/1;
  border-radius:1.1rem; overflow:hidden;
  padding:clamp(.9rem,1.8vw,24px);
  display:flex; flex-direction:column;
  justify-content:flex-end; align-items:flex-start;
  text-align:left;
  background:var(--marca);
  color:#fff;
  isolation:isolate;
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.8);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change:transform;
}
.loja:hover,.loja:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.9),
             0 0 0 2px var(--marca);
}
.loja-marca{
  position:absolute;
  top:var(--mtop,-6%); right:var(--mright,-8%); width:var(--mw,58%);
  z-index:0; opacity:.22;
  filter:brightness(0) saturate(0) invert(1);
  pointer-events:none;
}
.loja-marca--cor{filter:none; opacity:.38;}
/* VÉU — o que torna o texto branco legível sobre tile de cor clara.
   Os pontos do degradê são medidos, não estimados: o bloco de texto vai
   da base até 40,4% da altura do card, e o véu antigo já tinha caído
   pra 28% de opacidade nessa faixa. Resultado medido: branco sobre o
   amarelo do Mercado Livre dava 2,47:1 (mínimo do WCAG é 4,5) — o nome
   da loja ficava quase invisível.
   Segurando ≥58% até os 45%, o pior caso (amarelo) passa a 6,2:1, e a
   cor da marca continua vibrante na metade de cima do card. */
.loja::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to top,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.58) 45%,
    rgba(0,0,0,.22) 66%,
    transparent 82%);
}
.loja-nome,.loja-contagem,.loja-cta{position:relative; z-index:1;}
.loja-nome{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(1.05rem,2.4vw,1.7rem); line-height:1.1;
}
.loja-contagem{
  font-family:'Space Mono',monospace;
  font-size:clamp(.68rem,1.1vw,.8rem); opacity:.85; margin-top:2px;
}
.loja-cta{
  display:flex; align-items:center; gap:6px;
  font-size:clamp(.72rem,1.2vw,.85rem); font-weight:600;
  margin-top:12px;
}
.loja-cta svg{width:.9em; height:.9em; transition:transform .3s var(--ease);}
.loja:hover .loja-cta svg{transform:translateX(4px);}

/* ---------- barra "Renda Extra!" ---------- */
.barra-cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-top:clamp(12px,2.5vh,24px);
  padding:clamp(12px,2.2vh,18px) 24px; border-radius:999px;
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  color:#0a0a0c; font-weight:800;
  font-size:clamp(1rem,2.2vw,1.35rem);
  box-shadow:0 8px 30px -8px rgba(255,75,43,.6);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.barra-cta:hover,.barra-cta:focus-visible{
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 14px 40px -10px rgba(255,75,43,.75);
}

@media (max-width:760px){
  .loja{grid-column:span 12; aspect-ratio:auto; min-height:6.5rem;}
  /* `right` não pode ser negativo cegamente: no tile da Amazon isso
     cortaria o "m" do wordmark. Cada loja mantém seu próprio --mright. */
  .loja-marca{width:26%; top:50%; transform:translateY(-50%); right:var(--mright,-3%);}
  /* abre espaço embaixo pra dica de scroll não encostar na barra
     "Renda Extra!" — no celular o conteúdo chega perto do rodapé */
  .hero-conteudo{padding-bottom:4.5rem;}
  .scroll-hint{bottom:14px;}
}

.scroll-hint{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  /* z-index 3: acima do .hero-conteudo (2). No celular o bloco de
     conteúdo ocupa quase a tela toda e cobria a dica — ela existia,
     só estava atrás dos cards. */
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--ink-faint); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:1; transition:opacity .3s;
  pointer-events:none;   /* nunca rouba o toque de um card que esteja embaixo */
  text-shadow:0 2px 8px rgba(10,10,12,.9);
}
.scroll-hint-line{width:1px; height:46px; background:var(--card-border); position:relative; overflow:hidden;}
.scroll-hint-line i{
  position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:linear-gradient(180deg, transparent, var(--accent));
  animation:scrollhint 1.6s ease-in-out infinite;
}
@keyframes scrollhint{
  0%{top:-100%;} 60%{top:100%;} 100%{top:100%;}
}

/* ---------- marquee ---------- */
.marquee{
  background:var(--accent);
  color:var(--accent-ink);
  padding:12px 0;
  overflow:hidden;
  white-space:nowrap;
}
/* A faixa desloca EXATAMENTE a largura de uma cópia do texto (medida em
   px pelo JS e escrita em --marquee-unidade). Quando reinicia, a cópia
   seguinte está no lugar exato da anterior — o laço é imperceptível.
   Antes deslocava 50% de duas cópias fixas: se uma cópia fosse mais
   estreita que a tela, o fim do texto entrava em quadro e abria um vão
   vermelho. --marquee-dur também vem do JS, pra velocidade ficar igual
   independente de quantas cópias couberam. */
.marquee-track{
  display:inline-flex;
  will-change:transform;
  animation:marquee var(--marquee-dur, 18s) linear infinite;
}
.marquee-track span{
  font-weight:700; font-size:.85rem; letter-spacing:.04em;
  white-space:nowrap;      /* uma cópia nunca quebra em duas linhas */
  flex:none;               /* e nunca é comprimida pelo flex */
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-1 * var(--marquee-unidade, 50%)));}
}

/* ---------- section shells ---------- */
section{padding:120px 24px;}
.section-head{max-width:var(--maxw); margin:0 auto 60px;}
.section-head h2{font-size:clamp(1.8rem, 3.4vw, 2.8rem);}

.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ---------- features ---------- */
.features{max-width:var(--maxw); margin:0 auto;}
.feature-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.feature-card{
  background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:38px 30px;
  transition:border-color .3s, transform .3s var(--ease);
}
.feature-card:hover{border-color:var(--accent); transform:translateY(-6px);}
.feature-num{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  color:var(--accent); font-size:1rem; margin-bottom:18px; opacity:.8;
}
.feature-card h3{font-size:1.25rem; margin-bottom:12px;}
.feature-card p{color:var(--ink-dim); font-size:.95rem;}

/* ---------- showcase ---------- */
.showcase{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center;
}
.showcase-media{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--card-border);
  aspect-ratio:4/5;
}
/* o media do showcase agora hospeda o canvas do cubo em loop (era um
   <video>); mesmo enquadramento, sem download de mp4 */
.showcase-media{
  background:
    radial-gradient(ellipse 65% 55% at 50% 45%, rgba(255,75,43,.13), transparent 70%),
    var(--bg-soft);
}
.showcase-media canvas{width:100%; height:100%; display:block;}
.showcase-copy h2{font-size:clamp(1.8rem,3vw,2.6rem); margin-bottom:20px;}
.showcase-text{color:var(--ink-dim); margin-bottom:26px; font-size:1.02rem;}
.showcase-list{margin-bottom:34px;}
.showcase-list li{
  color:var(--ink-dim); padding:10px 0 10px 28px; position:relative;
  border-top:1px solid var(--card-border);
  font-size:.95rem;
}
.showcase-list li:last-child{border-bottom:1px solid var(--card-border);}
.showcase-list li::before{
  content:"→"; position:absolute; left:0; color:var(--accent); font-weight:700;
}

/* ---------- stats ---------- */
.stats{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; text-align:center;
  border-top:1px solid var(--card-border);
  border-bottom:1px solid var(--card-border);
  padding-top:60px; padding-bottom:60px;
}
.stat-num, .stat-suffix{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size:clamp(2.2rem, 4vw, 3.2rem);
  color:var(--ink);
}
.stat-suffix{color:var(--accent);}
.stat p{color:var(--ink-faint); font-size:.85rem; margin-top:8px; text-transform:uppercase; letter-spacing:.08em;}

/* ---------- proof / testimonials ---------- */
.proof{max-width:var(--maxw); margin:0 auto;}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testi-card{
  background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:30px;
}
.testi-stars{color:var(--accent-2); letter-spacing:.1em; margin-bottom:16px;}
.testi-text{color:var(--ink-dim); font-size:.95rem; margin-bottom:20px;}
.testi-author{font-weight:600; font-size:.88rem;}

/* ---------- CTA block ---------- */
.cta-block{
  max-width:760px; margin:0 auto; text-align:center;
}
.cta-block h2{font-size:clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom:36px;}
.countdown{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-bottom:42px;
}
.cd-unit{
  background:var(--card); border:1px solid var(--card-border);
  border-radius:14px; padding:18px 22px; min-width:84px;
  display:flex; flex-direction:column; align-items:center;
}
.cd-unit span{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:2rem;
  color:var(--ink);
}
.cd-unit small{color:var(--ink-faint); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; margin-top:4px;}
.cd-sep{font-size:1.6rem; color:var(--ink-faint); font-weight:700;}
.cta-note{margin-top:20px; color:var(--ink-faint); font-size:.82rem;}

/* ---------- ticket stub (elemento de assinatura) ---------- */
.ticket{
  position:relative;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:20px;
  overflow:visible;
  margin:0 auto;
  max-width:640px;
}
.ticket-notch{
  position:absolute; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%;
  background:var(--bg);
  border:1px solid var(--card-border);
  z-index:2;
}
.ticket-notch-left{left:-14px;}
.ticket-notch-right{right:-14px;}
.ticket-main{
  padding:34px 30px; text-align:left;
  display:flex; flex-direction:column; justify-content:center;
}
.ticket-label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-faint); margin-bottom:14px;
}
.ticket-perforation{
  position:relative;
  width:0;
  border-left:2px dashed var(--card-border);
}
.ticket-stub{
  padding:34px 28px; text-align:left;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
}
.ticket-stub-label{
  font-family:'Space Mono', monospace;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-faint);
}
.ticket-stub-code{
  font-family:'Space Mono', monospace;
  font-size:1.1rem; color:var(--accent);
  margin-bottom:14px;
}
.cd-unit span, #cdH, #cdM, #cdS{font-family:'Space Mono', monospace;}

@media (max-width: 640px){
  .ticket{grid-template-columns:1fr;}
  .ticket-perforation{
    width:auto; height:0; border-left:none;
    border-top:2px dashed var(--card-border);
  }
  .ticket-notch-left{left:50%; top:-14px; transform:translate(-50%,0);}
  .ticket-notch-right{left:50%; right:auto; bottom:-14px; top:auto; transform:translate(-50%,0);}
}

/* ---------- accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{transition:none; opacity:1; transform:none;}
  .marquee-track{animation:none;}
  .scroll-hint-line i{animation:none;}
  .btn{transition:none;}
}

/* ---------- faq ---------- */
.faq{max-width:820px; margin:0 auto;}
.faq-list{display:flex; flex-direction:column; gap:12px;}
.faq-item{
  background:var(--card); border:1px solid var(--card-border);
  border-radius:14px; padding:6px 26px;
}
.faq-item summary{
  cursor:pointer; padding:20px 0; font-weight:600; font-size:1rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+"; color:var(--accent); font-size:1.4rem; font-weight:400;
  transition:transform .25s;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{color:var(--ink-dim); padding-bottom:22px; font-size:.92rem;}

/* ---------- footer ---------- */
.footer{
  max-width:var(--maxw); margin:0 auto; padding:60px 24px 40px;
  border-top:1px solid var(--card-border);
}
.footer-top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px; flex-wrap:wrap; gap:20px;
}
.footer-note{color:var(--ink-faint); font-size:.82rem;}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:28px; left:50%;
  /* esconde FORA da tela: `translateY(120%)` não bastava. 120% da
     altura do toast (~49px) = ~59px, mas ele está 28px acima da borda
     inferior — sobravam ~18px aparecendo como uma "aba" clara colada
     embaixo da tela. `100% + 28px` desce a altura inteira MAIS o
     deslocamento do bottom, então some de verdade em qualquer altura
     que o toast venha a ter. */
  transform:translateX(-50%) translateY(calc(100% + 28px));
  background:var(--ink); color:#0a0a0c;
  padding:14px 26px; border-radius:999px;
  font-weight:600; font-size:.88rem;
  z-index:1000;
  transition:transform .4s var(--ease);
}
.toast.show{transform:translateX(-50%) translateY(0);}

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .nav-links{display:none;}
  .feature-grid, .testi-grid{grid-template-columns:1fr;}
  .showcase{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr); row-gap:36px;}
  section{padding:80px 20px;}
  .cd-unit{min-width:64px; padding:14px 12px;}
  .cd-unit span{font-size:1.5rem;}
}