/* visual-bio-avalanche : CSS reutilizavel
   Extraido de css/base.css + css/sections.css + css/fluid.css de bio.denderson.ai.
   Todo valor (hex, px, easing, keyframe) veio do original.

   O QUE FICOU DE FORA de proposito:
     CSS morto do original: .metastrip, .sec-rule, .taxa-grid, .masonry,
     .feature-rows, .tile, .frame-edgy, .pricelab.
     Logica de produto: modal de lead, modal de dossie, formulario de
     agendamento (.fld, .sched-*, .tm-*), tabela de cargo (.rolecard/.rvs),
     .totalbar, .perk, .mstep, .app-stage.

   O QUE MUDOU em relacao ao original (so isto, valores intactos):
     1. FIX do bug do rodape: .footer .container ganhou position/z-index,
        senao a palavra gigante fica atras do canvas do fluido.
     2. Seletores de id viraram id + classe (#hero,.hero) e a lista fixa de
        ids com fundo fumee virou a classe .section-glass, pra o kit servir
        em pagina nova sem herdar os ids do Squad Naia.
     3. Nomes presos a seccao do produto ganharam nome neutro, mantendo o
        antigo como alias: .nucleo-figure virou .figframe, .stage-coral
        virou .stage-acid e .stage-mustard virou .stage-red.
     4. .strike virou classe generica (no original so existia dentro de
        .totalbar .tnum .strike, que ficou de fora do kit).
     5. FIX da colisao entre .ctag e a seta .arr no card do bento.

   Depende de tokens.css. Carregue tokens.css ANTES deste arquivo. */

/* ============================================================
   1. RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg0);color:var(--text);
  font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;position:relative;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
figure{margin:0;}
::selection{background:var(--acid);color:var(--ink);}

/* ============================================================
   2. TIPOGRAFIA
   Serifada nos titulos, sans no corpo, mono nos rotulos tecnicos.
   ============================================================ */
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.06;letter-spacing:-.01em;}

/* .serif e o recurso central do visual: 1 a 3 palavras da headline trocadas
   por italico serifado colorido no meio de uma frase sans-serif. */
.serif{font-style:italic;color:var(--acid);}
.section-dark .serif,.hero .serif,#hero .serif{color:var(--acid-soft);}

/* ponto final acido no fim de titulo e de nome */
.dot{color:var(--acid);}

/* FORA DO PADRAO ATUAL (decisao do Chefe, 2026-07-29). O eyebrow, aquela
   linha curta em mono antes do titulo, NAO entra mais em pagina nova:
   a seccao comeca direto no titulo. A classe continua declarada aqui so
   pra nao quebrar pagina antiga que ja a usa. Nao use em coisa nova. */
.eyebrow{font:500 11px/1.5 var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);}
.lead{font-size:17px;color:var(--mute);}
.lead.muted{color:var(--mute);}
.lead b{color:var(--text);}
.biglead{font-size:18.5px;line-height:1.6;color:var(--mute);}
.biglead b{color:var(--text);}
.display{font-size:clamp(32px,4vw,60px);}
h3.sub{font-size:clamp(24px,2.6vw,36px);}

/* preco ou numero cancelado */
.strike{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--magenta);}

/* link de acessibilidade, so aparece no foco por teclado */
.skip{position:absolute;top:-60px;left:16px;z-index:600;background:var(--acid);color:var(--ink);padding:10px 16px;border-radius:8px;font:500 13px var(--font-mono);transition:top .3s var(--ease-out);}
.skip:focus{top:12px;}

/* ============================================================
   3. CONTAINER E SECCOES
   ============================================================ */
.container{width:min(var(--container),100% - 48px);margin-inline:auto;}
/* eleva o conteudo acima do canvas de fundo da seccao */
section .container{position:relative;z-index:1;}

section{padding:clamp(64px,7vw,96px) 0;position:relative;overflow:hidden;}
.row-sec{padding:clamp(56px,6vw,80px) 0;}
.section-dark{background:var(--bg2);}
.section-bone{background:var(--bg1);}

/* ============================================================
   4. NAV FLUTUANTE
   Absoluta no topo (rola junto com a pagina, nao gruda).
   Unico lugar do projeto que usa backdrop-filter.
   ============================================================ */
.nav{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:300;
  width:min(1140px,100% - 28px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px 14px 12px 26px;border-radius:100px;
  background:rgba(18,18,26,.55);border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.brand{font:600 clamp(17px,2.4vw,21px) var(--font-display);letter-spacing:.01em;color:var(--text);}

/* ============================================================
   5. BOTOES
   Pilula 100px. Primario acido vira vermelho no hover.
   A seta e o caractere unicode em .arrow, nunca um icone de biblioteca.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font:700 15px/1 var(--font-body);letter-spacing:.01em;
  padding:18px 30px;border-radius:100px;border:1px solid transparent;
  transition:transform .35s var(--ease-out),background-color .3s,color .3s,border-color .3s,box-shadow .35s var(--ease-out);
  will-change:transform;
}
.btn .arrow{transition:transform .35s var(--ease-out);display:inline-block;}
.btn:hover .arrow{transform:translate(3px,-3px);}
.btn-primary{background:var(--acid);color:var(--ink);box-shadow:0 14px 34px -14px rgba(212,255,74,.45);}
.btn-primary:hover{background:var(--magenta);color:var(--text);box-shadow:0 18px 40px -16px rgba(255,0,0,.5);}
/* .btn-coral e o botao de dentro de um bloco acido: fundo escuro, texto acido */
.btn-coral{background:var(--ink);color:var(--acid);}
.btn-coral:hover{background:var(--bg2);color:var(--acid-soft);}
.btn-ghost{border-color:var(--text);color:var(--text);background:transparent;}
.btn-ghost:hover{background:var(--text);color:var(--ink);}
.btn-ghost-light{border-color:var(--text);color:var(--text);background:transparent;}
.btn-ghost-light:hover{background:var(--text);color:var(--ink);}
.btn-sm{padding:13px 22px;font-size:13px;}
.actions{display:flex;flex-wrap:wrap;gap:14px;}

/* ============================================================
   6. CHIPS
   Tres variantes de pilula pequena. Todas em mono.
   .chan (hero) . .badge (apoio de secao) . .pill (faixa levemente torta)
   ============================================================ */
.channels{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px;}
.chan{
  font:500 12px var(--font-mono);letter-spacing:.06em;padding:9px 15px;border-radius:100px;
  border:1px solid var(--line);color:var(--text);
  transition:border-color .3s,transform .3s var(--ease-out),background-color .3s,color .3s;
}
.chan b{color:var(--acid);}
.chan:hover{border-color:var(--acid);transform:translateY(-3px);background:rgba(212,255,74,.1);color:var(--acid-soft);}

.badge-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;}
.badge{
  font:500 11.5px var(--font-mono);letter-spacing:.05em;padding:9px 16px;border-radius:100px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  transition:border-color .3s,transform .3s var(--ease-out),color .3s;
}
.badge:hover{border-color:var(--acid);transform:translateY(-3px);color:var(--acid-soft);}

.pillstrip{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.pillstrip .pill{
  font:500 11px var(--font-mono);letter-spacing:.02em;color:var(--mute);
  border:1px solid var(--line);border-radius:100px;padding:8px 14px;background:var(--surface);
}
.pillstrip .pill:nth-child(odd){transform:rotate(-1deg);}
.pillstrip .pill:nth-child(even){transform:rotate(1deg);}
.pillstrip .pill b{color:var(--acid);}

/* ============================================================
   7. REVEAL (aparece ao rolar)
   A prova de falha: o estado PADRAO e visivel. O JS so adiciona .pre
   (esconde) quando o IntersectionObserver existe e vai mesmo animar.
   Sem JS, sem IO ou com reduced motion, nada some.
   ============================================================ */
.pre{opacity:0 !important;transform:translateY(24px) !important;}
.reveal,.stagger>*{transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);}
.is-in{opacity:1 !important;transform:none !important;}
.stagger.is-in>*:nth-child(1){transition-delay:.04s;}
.stagger.is-in>*:nth-child(2){transition-delay:.12s;}
.stagger.is-in>*:nth-child(3){transition-delay:.2s;}
.stagger.is-in>*:nth-child(4){transition-delay:.28s;}
.stagger.is-in>*:nth-child(5){transition-delay:.36s;}
.stagger.is-in>*:nth-child(6){transition-delay:.44s;}
.stagger.is-in>*:nth-child(7){transition-delay:.52s;}
.stagger.is-in>*:nth-child(8){transition-delay:.6s;}
.reveal.d2{transition-delay:.12s;}
.reveal.d3{transition-delay:.22s;}
.reveal.d4{transition-delay:.32s;}
.reveal.d5{transition-delay:.42s;}

/* ============================================================
   8. HERO
   Duas colunas, texto na esquerda e colagem de fotos rotacionadas
   na direita. Ocupa a tela toda e ancora o conteudo embaixo.
   ============================================================ */
#hero,.hero{
  background:var(--bg0);
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;padding:0;
}
.hero-wrap{
  position:relative;z-index:2;flex:1;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding-top:120px;padding-bottom:56px;
}
.hero-title{font-size:clamp(44px,6.4vw,120px);line-height:1.02;margin:20px 0 22px;}
.hero-copy .lead{max-width:520px;}
.hero-actions{margin-top:30px;}

/* trilhos verticais de revista nas laterais, so em tela muito larga */
.hero-rail{
  position:absolute;top:50%;z-index:2;pointer-events:none;
  font:500 10px var(--font-mono);letter-spacing:.3em;text-transform:uppercase;color:rgba(242,242,234,.35);
}
.hero-rail span{display:block;writing-mode:vertical-rl;transform:translateY(-50%);}
.hero-rail.left{left:16px;}
.hero-rail.right{right:16px;}
.hero-rail.right span{transform:translateY(-50%) rotate(180deg);}

/* colagem: uma foto grande girada 2 graus com borda acida e um recorte
   vertical girado 5 graus ao contrario, vazando pra fora da coluna */
.hero-collage{position:relative;min-height:420px;}
.hc-main{
  width:78%;margin-left:auto;overflow:hidden;
  border:2px solid var(--acid);border-radius:26px;
  box-shadow:0 60px 110px -46px rgba(0,0,0,.85);
  transform:rotate(2deg);transition:transform .3s var(--ease-out);
}
.hc-main img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.hc-cut{
  position:absolute;overflow:hidden;background:var(--bg1);
  transition:transform .3s var(--ease-out);
}
.hc-cut img{width:100%;height:100%;object-fit:cover;}
.hc-cut-a{
  left:-2%;bottom:10%;width:38%;aspect-ratio:3/4;
  border:2px solid var(--text);border-radius:18px;transform:rotate(-5deg);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.8);
}

/* ============================================================
   9. MARQUEE
   Faixa acida solida, texto serifado italico rolando pra esquerda.
   O track precisa do conteudo DUPLICADO pro loop de -50% fechar.
   ============================================================ */
.marquee{background:var(--acid);color:var(--ink);overflow:hidden;padding:16px 0;}
.marquee-track{display:flex;white-space:nowrap;width:max-content;animation:marquee 24s linear infinite;}
.marquee-track span{font:500 clamp(17px,2.2vw,28px) var(--font-display);font-style:italic;letter-spacing:.05em;padding-right:12vw;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ============================================================
   10. BENTO E CARDS
   Grade de 12 colunas com cards de largura desigual.
   No hover o card INTEIRO vira acido e o texto inverte pra escuro.
   ============================================================ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.plat-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-bottom:40px;}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;}
.bento .b1{grid-column:span 7;}
.bento .b2{grid-column:span 5;}
.bento .b3{grid-column:span 4;}
.bento .b4{grid-column:span 8;}
.card{
  position:relative;background:var(--surface);border:1px solid var(--line-soft);border-radius:18px;padding:26px 24px 30px;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s,background-color .35s;
}
.card:hover{transform:translateY(-7px);box-shadow:0 40px 70px -40px rgba(0,0,0,.6);border-color:var(--acid);background:var(--acid);}
.card:hover h4,.card:hover p{color:var(--ink);}
.card:hover .ctag{color:rgba(11,11,16,.65);}
.card:hover .cnum,.card:hover .arr{color:var(--ink);}
/* FIX. No original a .ctag corre por baixo da seta .arr (que e absoluta em
   right:20px) e come a ultima letra: "VENDA" vira "VENDA" com a seta em cima
   do S. Este padding-right reserva a faixa da seta. Nao remova. */
.card .crow{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-right:16px;}
.card .cnum{font:500 12px var(--font-mono);color:var(--acid);letter-spacing:.18em;transition:color .3s;}
.card .ctag{font:500 10px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);transition:color .3s;}
.card h4{font-size:23px;margin-bottom:10px;transition:color .3s;}
.bento .b1 h4{font-size:clamp(26px,2.6vw,38px);}
.card p{color:var(--mute);font-size:14.5px;transition:color .3s;}
.card .arr{position:absolute;right:20px;top:22px;color:var(--acid);transition:transform .35s var(--ease-out),color .3s;}
.card:hover .arr{transform:translate(3px,-3px);}

/* ============================================================
   11. FILEIRA TEXTO E IMAGEM
   45/55 alternando lado a cada bloco (.rev inverte).
   ============================================================ */
.prow{display:grid;grid-template-columns:45fr 55fr;gap:56px;align-items:center;}
.prow.rev{grid-template-columns:55fr 45fr;}
.prow.rev .prow-txt{order:-1;}
.prow-img{min-width:0;}
.prow-txt .display{font-size:clamp(27px,3.2vw,48px);margin:14px 0 16px;}

/* molduras. A blob e a assinatura da casa: border-radius de 8 valores. */
.imgframe{
  overflow:hidden;background:var(--bg2);
  transition:transform .3s var(--ease-out);
}
.imgframe img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2.2;}
.frame-blob{border-radius:64% 36% 55% 45% / 42% 55% 45% 58%;box-shadow:0 50px 90px -44px rgba(0,0,0,.7);}
.frame-rot{border-radius:22px;transform:rotate(-2deg);box-shadow:0 50px 90px -44px rgba(0,0,0,.7);}
.frame-coral{border:2px solid var(--magenta);border-radius:22px;box-shadow:0 50px 90px -44px rgba(0,0,0,.8);}

/* palco: bloco de cor chapada atras da figura, deslocado pro canto */
.stage-acid,.stage-red,.stage-coral,.stage-mustard{position:relative;padding:0 9% 9% 0;}
.stage-acid::before,.stage-red::before,.stage-coral::before,.stage-mustard::before{
  content:"";position:absolute;top:9%;right:0;width:84%;height:84%;border-radius:22px;
}
.stage-acid::before,.stage-coral::before{background:var(--acid);}
.stage-red::before,.stage-mustard::before{background:var(--magenta);}

/* figura com legenda sobreposta na base */
.figframe,.nucleo-figure{
  position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg2);
  box-shadow:0 34px 60px -34px rgba(0,0,0,.6);
  transition:transform .3s var(--ease-out);
}
.figframe img,.nucleo-figure img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/4.4;}
.figframe .ntag,.nucleo-figure .ntag{
  position:absolute;left:14px;bottom:14px;right:14px;
  font:400 11px/1.5 var(--font-mono);letter-spacing:.04em;color:var(--text);
  background:rgba(11,11,16,.82);padding:14px;border-radius:10px;text-shadow:0 1px 8px rgba(0,0,0,.7);
}
.figframe .ntag b,.nucleo-figure .ntag b{color:var(--acid-soft);}

/* lista com marcador unicode. .mk.x e o marcador negativo. */
.vlist{margin-top:18px;}
.vlist li{position:relative;padding:8px 0 8px 26px;color:var(--mute);border-bottom:1px dashed var(--line-soft);font-size:15px;}
.vlist li:last-child{border-bottom:0;}
.vlist .mk{position:absolute;left:0;top:8px;color:var(--acid);font-weight:700;}
.vlist .mk.x{color:var(--faint);}
.vlist li b{color:var(--text);}

/* ============================================================
   12. TIME
   Card com avatar circular e borda acida. Grade de 6 colunas.
   ============================================================ */
.team-naia{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:22px;padding:30px;
  display:flex;gap:26px;align-items:center;
}
/* avatar principal usa border-radius de 8 valores (blob suave), nao circulo */
.team-naia img{
  width:110px;height:110px;object-fit:cover;flex:none;
  border-radius:58% 42% 50% 50% / 48% 52% 48% 52%;border:3px solid var(--acid);
}
.team-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.team-card{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:18px;padding:20px 12px;text-align:center;
  transition:transform .5s var(--ease-out),border-color .4s;
}
.team-card:hover{transform:translateY(-8px);border-color:var(--acid);}
.team-card img{width:76px;height:76px;border-radius:50%;object-fit:cover;margin:0 auto 12px;border:2px solid var(--acid);transition:transform .4s var(--ease-out);}
.team-card:hover img{transform:scale(1.06);}
.team-card b{display:block;font-size:14px;}
.team-card span{font:400 10.5px var(--font-mono);color:var(--mute);}

/* faixa de resumo abaixo da grade */
.team-plus{
  margin-top:14px;background:var(--surface);border:1px dashed var(--line-soft);border-radius:18px;
  padding:18px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.tp-num{font:600 clamp(30px,3.4vw,42px)/1 var(--font-display);color:var(--acid);flex:none;}
.tp-txt{margin:0;font-size:14.5px;color:var(--mute);flex:1 1 260px;line-height:1.5;}
.tp-txt b{color:var(--text);}
.tp-chips{display:flex;flex-wrap:wrap;gap:7px;}
.tp-chips span{font:500 10.5px var(--font-mono);letter-spacing:.06em;border:1px solid var(--line-soft);border-radius:999px;padding:6px 12px;color:var(--mute);}

/* quando o card de time e um <button> que abre um detalhe */
.team-naia,.team-card{width:100%;font-family:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;position:relative;}
.team-naia{text-align:left;}
.team-naia:focus-visible,.team-card:focus-visible{outline:2px solid var(--acid);outline-offset:3px;}

/* ============================================================
   13. COMPARACAO (opcao ruim vs opcao boa)
   Duas colunas coladas com um "vs" serifado acido no meio.
   ============================================================ */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;border:1px solid var(--line);}
.vs-col{padding:28px 26px;}
.vs-col.bad{background:var(--surface);}
.vs-col.good{background:var(--magenta);color:var(--text);}
.vs-mid{
  align-self:stretch;display:flex;align-items:center;padding:0 18px;
  font:600 40px var(--font-display);font-style:italic;color:var(--acid);
  border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--bg1);
}
.vlabel{font:500 10.5px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);}
.vs-col.good .vlabel{color:rgba(242,242,234,.8);}
.vs-col h4{font-size:20px;margin:10px 0 12px;}
.vs-price{font:600 clamp(38px,4.4vw,72px)/1 var(--font-display);margin-bottom:16px;font-variant-numeric:tabular-nums;}
.vs-price small{font-size:16px;color:var(--faint);font-family:var(--font-body);font-weight:400;}
.vs-breakdown{font:400 13px/1.5 var(--font-body);color:var(--mute);margin:-6px 0 16px;}
.vs-col.good .vs-breakdown{color:rgba(242,242,234,.85);}
.vs-col.good .vs-price small{color:rgba(242,242,234,.75);}
.vs-col.good .vlist li{color:rgba(242,242,234,.94);border-bottom-color:rgba(242,242,234,.22);}
.vs-col.good .vlist li b{color:var(--text);}
/* faixa de fechamento logo abaixo da comparacao */
.save-strip{
  margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid var(--line);background:var(--surface);padding:18px 24px;
}
.save-strip b{font:600 clamp(17px,1.9vw,22px) var(--font-display);font-style:italic;}

/* ============================================================
   14. PAINEL DE OFERTA
   Metade escura com a lista de entregaveis, metade acida solida
   com o preco. Sem borda arredondada: o bloco e um retangulo seco.
   ============================================================ */
.offer{display:grid;grid-template-columns:1.05fr .95fr;background:var(--surface);border:1px solid var(--line);}
.offer .left{padding:clamp(30px,3.6vw,48px);}
.incl{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
.incl li{position:relative;padding:11px 0 11px 28px;border-bottom:1px dashed var(--line);color:var(--text);font-size:14.5px;}
.incl .mk{position:absolute;left:2px;top:11px;color:var(--acid);font-weight:700;}
.offer .right{
  position:relative;background:var(--acid);color:var(--ink);
  padding:clamp(32px,4vw,56px) clamp(26px,3vw,44px);
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
}
/* selo circular tracejado girando devagar no canto do painel acido */
.stamp{
  position:absolute;top:-28px;right:-28px;width:140px;height:140px;border-radius:50%;
  border:2px dashed rgba(11,11,16,.5);
  display:flex;align-items:center;justify-content:center;
  font:400 50px var(--font-display);color:rgba(11,11,16,.75);
  animation:spin 14s linear infinite;
}
@keyframes spin{to{transform:rotate(372deg);}}
.coord{font:500 10.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(11,11,16,.7);}
.price{font:600 clamp(48px,5.4vw,80px)/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink);}
.price-setup{font-size:clamp(32px,3.4vw,48px);}
.price small{font-size:17px;font-family:var(--font-body);font-weight:400;color:rgba(11,11,16,.7);}
.offer .right p{color:rgba(11,11,16,.8);}
.offer .right .btn{align-self:stretch;}

/* ============================================================
   15. CTA FINAL
   ============================================================ */
.finalcta{text-align:center;max-width:1050px;margin:0 auto;}
.finalcta h2{font-size:clamp(40px,5.8vw,92px);margin:20px 0 18px;}
.finalcta .lead{max-width:640px;margin:0 auto;color:var(--mute);}
.finalcta .actions{justify-content:center;margin-top:30px;}
.reassure{margin-top:28px;font:400 11.5px var(--font-mono);letter-spacing:.1em;color:var(--mute);}

/* ============================================================
   16. RODAPE
   Palavra gigante cropada na base + creditos em mono estilo revista.
   ============================================================ */
.footer{background:#08080c;color:var(--text);padding:90px 0 32px;overflow:hidden;}

/* FIX OBRIGATORIO. No original a regra de elevacao era "section .container",
   que NAO alcanca o <footer>, entao a palavra gigante ficava atras do canvas
   do fluido e sumia. Esta linha e a correcao. Nao remova. */
.footer .container{position:relative;z-index:1;}

.megaword{
  font:600 clamp(90px,23vw,400px)/0.78 var(--font-display);letter-spacing:-.03em;
  margin:0 0 -0.16em -0.04em;color:var(--text);pointer-events:none;
}
.megaword .dot{color:var(--acid);}
.footrow{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;border-top:1px solid var(--line);padding-top:26px;font:400 12px var(--font-mono);letter-spacing:.06em;color:var(--mute);margin-top:64px;}
.live{display:inline-flex;align-items:center;gap:9px;}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--acid);display:inline-block;animation:pulse 1.8s var(--ease-io) infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.7);}}

/* ============================================================
   17. CAMADA DE FUNDO
   Canvas 2D por seccao + canvas WebGL do fluido em tela cheia.
   Remova este bloco inteiro se a pagina NAO usar o fluido.
   ============================================================ */

/* canvas de cenario dentro de uma seccao (efeitos net, waves, orbs, grid) */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0;}

/* canvas do fluido: fixo, viewport inteiro, atras de tudo, sem capturar clique.
   O background solido e o fallback pra antes do WebGL subir ou se o JS falhar. */
#fluidCanvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
  background:var(--bg0);
}

/* pro fluido respirar por tras, os fundos solidos viram vidro fumee.
   O texto continua legivel porque a opacidade fica entre .40 e .50. */
#hero,.hero{background:transparent;}
.section-dark{background:rgba(24,24,34,.42);}
.section-bone{background:rgba(18,18,26,.42);}
.section-glass{background:rgba(11,11,16,.40);}
.footer{background:rgba(8,8,12,.72);}

/* a faixa do marquee e SOLIDA de proposito. Sem esta elevacao o canvas fixo
   pinta por cima dela e o verde escurece. */
.marquee{position:relative;z-index:1;}

/* ============================================================
   18. RESPONSIVO
   Um unico min-width (901) e o resto em max-width.
   ============================================================ */

/* desktop: hero compacto pra caber na primeira dobra. Mobile fica intacto. */
@media (min-width:901px){
  .hero-wrap{
    grid-template-columns:0.9fr 1.1fr;
    gap:44px;
    padding-top:96px;
    padding-bottom:44px;
  }
  .hero-title{font-size:40px;line-height:1.16;margin:0 0 16px;}
  .hero-copy .lead{font-size:16px;max-width:500px;}
  .channels{margin-top:16px;}
  .hero-actions{margin-top:20px;}
  .hc-main{width:92%;}
}
@media (max-width:1400px){
  .hero-rail{display:none;}
}
@media (max-width:1100px){
  .incl{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .hero-wrap{grid-template-columns:1fr;gap:36px;padding-top:110px;}
  .hero-collage{min-height:0;padding-bottom:20px;}
  .duo,.plat-intro{grid-template-columns:1fr;gap:22px;}
  .bento .b1,.bento .b2,.bento .b3,.bento .b4{grid-column:span 12;}
  .prow,.prow.rev{grid-template-columns:1fr;gap:32px;}
  .prow.rev .prow-txt{order:0;}
  .vs{grid-template-columns:1fr;}
  .vs-mid{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0;justify-content:center;}
  .team-naia{flex-direction:column;align-items:flex-start;}
  .offer{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .hero-title{font-size:clamp(38px,11vw,64px);}
}

/* ============================================================
   19. MOVIMENTO REDUZIDO
   Mata pulse, rolagem suave e encurta toda transicao.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .pulse{animation:none;}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;}
}