/* =====================================================================
   SolarMarket 2.0 — Landing V4 (scroll)
   Refaz a V2 (deck/apresentação) como página de SCROLL LONGO, vanilla.
   Mesma arquitetura da V3 (reveal por IntersectionObserver, sem React),
   mas mantém a IDENTIDADE DARK da V2. As animações disparam conforme o
   usuário rola — nada de autoplay/PPT. Boa em desktop e mobile.

   Os tokens base (fontes, --ease-out, --font-display/mono, semânticos
   claros) vêm de assets/colors_and_type.css; aqui re-bindamos as
   superfícies semânticas pro tema escuro (igual a V2 fazia no index.html).
   ===================================================================== */

:root{
  /* ---- Re-bind das superfícies semânticas para DARK (da V2) ---- */
  --bg:        #050B0D;
  --bg-deep:   #02060A;
  --bg-2:      #0A1518;
  --surface:   #0E1A1D;
  --surface-2: #102429;
  --fg-1:      #F2F9FB;
  --fg-2:      #C4CCD0;
  --fg-3:      #96A2A8;
  --fg-4:      #6B7A80;
  --border:    rgba(196,230,236,.10);
  --border-strong: rgba(196,230,236,.22);
  --border-brand:  rgba(78,179,196,.55);

  --brand:     #006173;
  --brand-2:   #0B7689;
  --brand-3:   #1A8EA2;
  --brand-4:   #4EB3C4;

  --accent:    #FBB03B;
  --success:   #2FB46B;
  --success-soft: #6AD49A;

  --radius:    18px;
  --radius-sm: 12px;
  --maxw:      1200px;
  --shadow-cinematic: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(196,230,236,.06) inset;
  --shadow-card: 0 16px 40px -22px rgba(0,0,0,.7);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg-1);
  font-family:var(--font-sans); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--brand-3); color:#fff; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(196,230,236,.14); border-radius:5px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(196,230,236,.26); }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section{ padding-block:clamp(64px,10vw,128px); position:relative; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:clamp(.66rem,1.6vw,.74rem); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:99px; background:var(--brand-4); box-shadow:0 0 10px var(--brand-4); }
.eyebrow.accent{ color:var(--accent); }
.eyebrow .dot.acc{ background:var(--accent); box-shadow:0 0 10px var(--accent); }

h1,h2,h3{ margin:0; line-height:1.06; letter-spacing:-.025em; font-weight:600; font-family:var(--font-display); }
.h-xl{ font-size:clamp(2.6rem,8vw,5rem); }
.h-lg{ font-size:clamp(2rem,5.4vw,3.6rem); }
.h-md{ font-size:clamp(1.5rem,3.4vw,2.2rem); }
.lede{ font-size:clamp(1.08rem,2.2vw,1.38rem); color:var(--fg-2); font-weight:400; line-height:1.55; }
.teal{ background:linear-gradient(180deg,#FFFFFF 0%,#4EB3C4 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.accent{ background:linear-gradient(180deg,#FFE3A8 0%,#FBB03B 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.10s; } .reveal.d2{ transition-delay:.20s; }
.reveal.d3{ transition-delay:.30s; } .reveal.d4{ transition-delay:.40s; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-sans); font-weight:700; letter-spacing:.01em;
  border:0; border-radius:99px; padding:15px 28px; font-size:clamp(.92rem,2vw,1.02rem);
  transition:transform .15s var(--ease-out), box-shadow .2s, background .2s, filter .2s, color .2s;
}
.btn svg{ width:18px; height:18px; }
.btn--block{ width:100%; }
.btn--accent{
  color:#1A0E00;
  background:linear-gradient(180deg,#FFD27A 0%,#FBB03B 60%,#E69100 100%);
  box-shadow:0 14px 34px -12px rgba(251,176,59,.6);
}
.btn--accent:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 18px 40px -12px rgba(251,176,59,.75); }
.btn--accent:active{ transform:translateY(0) scale(.99); }
.btn--teal{ color:#02060A; background:var(--brand-4); box-shadow:0 14px 30px -12px rgba(78,179,196,.6); }
.btn--teal:hover{ background:#6AC4D2; transform:translateY(-2px); }

/* =====================================================================
   HERO — estático: identidade da intro (logo + selo 2.0 + headline)
   ===================================================================== */
/* Fase "inscricoes abertas": a hero deixou de ser um palco centralizado e
   passou a ser copy + countdown a ESQUERDA e o formulario a DIREITA. Com 7
   campos nao ha como caber em 100svh, entao a altura minima virou auto e o
   alinhamento subiu pro topo. */
.hero{
  position:relative; display:flex; align-items:flex-start;
  padding-block:clamp(40px,7vw,80px); overflow:hidden; text-align:left;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0,49,58,.55) 0%, transparent 62%),
    radial-gradient(ellipse at 50% 100%, rgba(11,118,137,.18) 0%, transparent 60%);
}
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__grid-tex{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(78,179,196,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,179,196,.05) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at 50% 45%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%, #000 0%, transparent 70%);
}
.hero__bloom{
  position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  width:min(680px,90vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(26,142,162,.22), transparent 62%);
}
.hero__brackets{ position:absolute; inset:clamp(20px,5vw,48px); }
.hero__brackets::before,.hero__brackets::after,
.hero__brackets>span::before,.hero__brackets>span::after{
  content:''; position:absolute; width:30px; height:30px; border:1px solid rgba(196,230,236,.22);
}
.hero__brackets::before{ top:0; left:0; border-right:none; border-bottom:none; }
.hero__brackets::after{ top:0; right:0; border-left:none; border-bottom:none; }
.hero__brackets>span::before{ bottom:0; left:0; border-right:none; border-top:none; }
.hero__brackets>span::after{ bottom:0; right:0; border-left:none; border-top:none; }

.hero .wrap{ position:relative; z-index:1; }
/* Duas colunas: a copy respira e o card do form fica no campo de visao inicial.
   1.05fr/.95fr e a mesma proporcao da secao de waitlist, pra hero e rodape
   terem o mesmo ritmo. */
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,56px); align-items:start;
}
.hero__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.hero__mark{ width:56px; height:56px; filter:drop-shadow(0 0 26px rgba(78,179,196,.6)); }
.hero h1{ margin-top:2px; color:var(--fg-1); }
.hero__sub{ max-width:44ch; font-size:clamp(1.02rem,1.6vw,1.22rem); color:var(--fg-2); }
.hero__sub b{ color:var(--fg-1); font-weight:700; }

/* ---------- Modo da página: inscrição x fila ----------
   A MESMA landing serve as duas fases (ver src/app/page.tsx): "inscricao" com o
   acesso antecipado aberto e "fila" depois do fechamento, capturando para o
   grupo seguinte. O formulário é idêntico — só a copy em volta muda.

   Cada bloco de copy existe duas vezes no HTML, marcado com data-modo. O app.js
   põe data-modo no <body> a partir do ?modo= da query e o seletor abaixo mantém
   só o par correspondente.

   O default (sem data-modo no body, ex.: abrindo o index.html direto) é
   "inscricao": some só o que é exclusivo da fila, então a página nunca aparece
   com as duas copies ao mesmo tempo nem fica sem nenhuma.

   Os seletores são ancorados em `body ...` de propósito: o data-modo do próprio
   <body> é o SELETOR de modo, não um bloco de copy. Um `[data-modo="fila"]`
   solto casaria com o body e esconderia a página inteira — e nenhum
   display:revert nos filhos traria de volta, porque o ancestral continua
   oculto. */
body [data-modo="fila"]{ display:none; }
body[data-modo="fila"] [data-modo="inscricao"]{ display:none; }
body[data-modo="fila"] [data-modo="fila"]{ display:revert; }

/* ---------- Contagem regressiva para o fechamento ---------- */
.countdown{
  margin-top:4px; width:100%; max-width:460px;
  border:1px solid var(--border-strong); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(251,176,59,.10), rgba(2,6,10,.35));
  padding:16px 18px;
}
.countdown__lbl{
  display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--accent);
}
.countdown__row{ display:flex; align-items:flex-start; gap:6px; margin-top:8px; }
.countdown__unit{ display:flex; flex-direction:column; align-items:center; min-width:52px; }
.countdown__num{
  font-family:var(--font-display); font-weight:800; line-height:1;
  /* tabular-nums: os digitos nao "pulam" a cada segundo */
  font-variant-numeric:tabular-nums; font-size:clamp(30px,4.4vw,42px);
  color:var(--fg-1);
}
.countdown__cap{
  margin-top:5px; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
}
.countdown__sep{
  font-family:var(--font-display); font-weight:800; line-height:1;
  font-size:clamp(24px,3.4vw,34px); color:var(--fg-4); padding-top:2px;
}
.countdown__note{ margin-top:12px; font-size:.86rem; color:var(--fg-2); }
.countdown__note b{ color:var(--fg-1); }
/* Prazo zerado: o bloco de digitos perde a razao de ser, e a copy que promete
   "inscricoes abertas" passa a mentir — some junto. */
body.is-closed .countdown__row,
body.is-closed .countdown__note{ display:none; }
body.is-closed .hero__sub,
body.is-closed .hero .eyebrow,
body.is-closed .cta-back{ display:none; }

/* ---------- Status (modo fila) ----------
   Ocupa na hero o lugar que o countdown ocupa no modo inscrição: mesma caixa,
   mesma largura, mesmo peso — sem o buraco que sobraria ao só remover os
   dígitos. Conta o estado do lançamento em vez do tempo restante. */
.status-card{
  margin-top:4px; width:100%; max-width:460px;
  border:1px solid var(--border-strong); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(251,176,59,.10), rgba(2,6,10,.35));
  padding:16px 18px;
}
.status-card__lbl{
  display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--accent);
}
.status-card__list{ margin:10px 0 0; padding:0; list-style:none; display:grid; gap:9px; }
.status-card__list li{
  position:relative; padding-left:20px; font-size:.9rem; color:var(--fg-2); line-height:1.5;
}
/* Marcador próprio (o disc padrão não acompanha a cor de destaque). */
.status-card__list li::before{
  content:''; position:absolute; left:2px; top:.55em;
  width:6px; height:6px; border-radius:99px; background:var(--accent);
}
.status-card__list b{ color:var(--fg-1); font-weight:700; }

/* =====================================================================
   §1 CONVERGÊNCIA — cena scatter -> converge DIRIGIDA PELO SCROLL.
   A seção (.conv) é alta; .conv__track segura um palco sticky que ocupa a
   tela. O app.js mede o quanto a seção já rolou e seta --p (0 -> 1) na .conv.
   Tudo abaixo interpola contra --p via calc(): no começo (p=0) os apps ficam
   ESPALHADOS (a pergunta); rolando, convergem pro símbolo e o texto vira.
   Fallback (sem JS / reduced-motion): a regra .conv.is-static entrega o
   estado final (símbolo + "tudo um só") sem depender do scroll.
   ===================================================================== */
.conv{
  --p: 0;             /* progresso do scroll 0..1 (setado pelo app.js) */
  position:relative; padding:0;
  height:220vh;       /* "trilho": dá espaço de scroll pra cena acontecer */
  background:
    radial-gradient(ellipse at 80% 20%, rgba(0,49,58,.42), transparent 60%),
    radial-gradient(ellipse at 10% 90%, rgba(0,49,58,.26), transparent 60%);
}
.conv__track{ position:relative; height:100%; }
.conv__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.conv__scene{ position:relative; width:100%; height:100%; }

/* símbolo central: cresce/aparece na 2ª metade do scroll (p .45 -> 1) */
.conv__core{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(calc(.4 + .6 * clamp(0, (var(--p) - .45) / .45, 1)));
  width:clamp(96px,14vh,150px); height:clamp(96px,14vh,150px);
  display:flex; align-items:center; justify-content:center;
  opacity:clamp(0, (var(--p) - .45) / .25, 1);
  z-index:3; pointer-events:none;
}
.conv__core img{ width:64%; height:64%; object-fit:contain; filter:drop-shadow(0 0 30px rgba(78,179,196,.8)); }
.conv__ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(78,179,196,.35); }
.conv__ring.r2{ inset:-18%; border-color:rgba(78,179,196,.18); }
/* anéis pulsam só quando o símbolo já está formado (p alto) */
.conv.is-converged .conv__ring{ animation:corePulse 2.6s var(--ease-in-out) infinite; }
.conv.is-converged .conv__ring.r2{ animation:corePulse 2.6s var(--ease-in-out) infinite .2s; }
@keyframes corePulse{ 0%,100%{ transform:scale(1); opacity:.5; } 50%{ transform:scale(1.08); opacity:1; } }

/* campo de cards espalhados (preenchido por app.js) */
.conv__field{ position:absolute; inset:0; z-index:2; }
.chip{
  position:absolute;
  /* interpola da posição espalhada (--x/--y) até o centro (50%) conforme --p */
  left:calc(var(--x) + (50% - var(--x)) * var(--p));
  top:calc(var(--y) + (50% - var(--y)) * var(--p));
  /* gira de --rot até 0 e encolhe ao convergir */
  transform:translate(-50%,-50%)
            rotate(calc(var(--rot) * (1 - var(--p))))
            scale(calc(1 - .7 * var(--p)));
  background:rgba(14,26,29,.78); border:1px solid var(--border); border-radius:12px;
  padding:10px 14px; display:flex; flex-direction:column; gap:3px; white-space:nowrap;
  backdrop-filter:blur(6px); box-shadow:0 8px 24px rgba(0,0,0,.35);
  /* visíveis no começo; somem ao chegar perto do centro (p .55 -> .9) */
  opacity:calc(1 - clamp(0, (var(--p) - .55) / .35, 1));
  filter:blur(calc(2px * clamp(0, (var(--p) - .55) / .35, 1)));
}
.chip .chip-name{ font-weight:600; color:var(--fg-1); font-size:14px; letter-spacing:-.005em; }
.chip .chip-cat{ font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-4); }

/* texto da cena (pergunta -> virada), centralizado e sobreposto */
.conv__copy{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,760px); text-align:center; z-index:4; pointer-events:none;
}
.conv__copy::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:130%; height:220%; z-index:-1;
  background:radial-gradient(ellipse at 50% 50%, rgba(2,6,10,.82) 0%, rgba(2,6,10,.55) 42%, rgba(2,6,10,0) 72%);
}
.conv__txt{
  position:absolute; left:50%; top:50%; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:clamp(12px,2vh,20px);
}
.conv__txt .eyebrow{ justify-content:center; }
/* a pergunta domina no começo; some na primeira metade (p .1 -> .4) */
.conv__txt.ask{
  transform:translate(-50%,calc(-50% - 28px * var(--p)));
  opacity:calc(1 - clamp(0, (var(--p) - .1) / .3, 1));
}
/* a virada nasce ABAIXO do símbolo central e aparece na 2ª metade (p .55 -> .8) */
.conv__txt.turn{
  margin-top:clamp(120px,22vh,210px);
  transform:translate(-50%,calc(-50% + 20px * (1 - clamp(0, (var(--p) - .55) / .25, 1))));
  opacity:clamp(0, (var(--p) - .55) / .25, 1);
}

/* dica "role para juntar tudo": só no começo, some assim que a cena começa */
.conv__cue{
  position:absolute; left:50%; bottom:clamp(20px,5vh,48px); transform:translateX(-50%);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-4);
  z-index:4; pointer-events:none; white-space:nowrap;
  opacity:calc(1 - clamp(0, var(--p) / .15, 1));
  animation:hintFloat 2.4s var(--ease-in-out) infinite;
}

/* No mobile os cards encolhem e perdem o blur pesado, pra encostar menos no
   texto central e não pesar a rolagem. */
@media (max-width:760px){
  .chip{ padding:7px 10px; backdrop-filter:none; }
  .chip .chip-name{ font-size:12px; }
  .chip .chip-cat{ font-size:8px; }
}

/* Fallback sem scroll-driver (JS off / reduced-motion): entrega o estado final */
.conv.is-static .conv__core{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.conv.is-static .conv__field{ display:none; }
.conv.is-static .conv__txt.ask{ display:none; }
.conv.is-static .conv__txt.turn{ opacity:1; transform:translate(-50%,-50%); margin-top:0; }
.conv.is-static .conv__cue{ display:none; }
@media (prefers-reduced-motion: reduce){
  .conv{ height:100svh; }
  .conv.is-converged .conv__ring,
  .conv.is-converged .conv__ring.r2{ animation:none; }
}

/* =====================================================================
   §2 ECOSSISTEMA — grade de módulos (dark)
   ===================================================================== */
.systems{ background:radial-gradient(ellipse at 20% 25%, rgba(0,97,115,.22), transparent 55%), radial-gradient(ellipse at 85% 80%, rgba(0,49,58,.3), transparent 55%); }
.systems__head{ text-align:center; max-width:760px; margin-inline:auto; }
.systems__head .eyebrow{ justify-content:center; }
.systems__head h2{ margin-top:16px; }
.systems__head .lede{ margin-top:16px; }

.mod-grid{
  margin-top:clamp(36px,5vw,56px);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,16px);
}
.mod{
  background:linear-gradient(180deg, rgba(14,26,29,.85), rgba(14,26,29,.6));
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:16px; display:flex; gap:13px; align-items:center; min-width:0;
  transition:transform .2s, border-color .2s, background .2s;
}
.mod>div{ min-width:0; }
.mod:hover{ transform:translateY(-3px); border-color:var(--border-strong); background:linear-gradient(180deg, rgba(16,36,41,.95), rgba(14,26,29,.7)); }
.mod__ic{
  flex:0 0 auto; width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center; color:var(--brand-4);
  background:rgba(11,118,137,.2); border:1px solid var(--border-brand);
}
.mod__ic svg{ width:20px; height:20px; }
.mod__name{ font-weight:600; font-size:clamp(1rem,1.4vw,1.1rem); color:var(--fg-1); overflow-wrap:anywhere; }
.mod__desc{ margin-top:3px; font-size:clamp(.84rem,1.2vw,.92rem); color:var(--fg-3); line-height:1.45; }

/* =====================================================================
   §3 DESTAQUES — 4 spotlights empilhados, linhas alternadas
   ===================================================================== */
.spots{ background:radial-gradient(ellipse at 50% 0%, rgba(0,49,58,.4), transparent 50%); }
.spots__head{ text-align:center; max-width:680px; margin-inline:auto; }
.spots__head .eyebrow{ justify-content:center; }
.spots__head h2{ margin-top:14px; }

.spotlight{
  margin-top:clamp(40px,6vw,80px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center;
}
.spotlight--reverse .spotlight__copy{ order:2; }
.spotlight__copy .eyebrow{ color:var(--brand-4); }
.spotlight__copy h3{ margin-top:12px; }
.spotlight__copy .lede{ margin-top:14px; max-width:42ch; }

/* moldura escura compartilhada dos mockups */
.spotlight__vis{ min-width:0; }
.vis-3d,.vis-monitor,.vis-ai,.vis-fin{
  position:relative; min-width:0;
  background:linear-gradient(180deg, rgba(14,26,29,.7), rgba(2,6,10,.85));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px); overflow:hidden;
  box-shadow:var(--shadow-cinematic);
  display:flex; flex-direction:column;
}

/* ---- 3D ---- */
.vis-3d{ align-items:center; justify-content:center; min-height:300px; perspective:1000px; }
.iso-grid{
  position:absolute; inset:12% 8% 24% 8%;
  background-image:
    linear-gradient(rgba(78,179,196,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,179,196,.12) 1px, transparent 1px);
  background-size:22px 22px;
  transform:rotateX(60deg) rotateZ(-12deg) scale(1.2);
  mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
}
.roof{
  position:relative; width:360px; max-width:100%; height:230px;
  transform:rotateX(58deg) rotateZ(-12deg);
  display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(4,1fr);
  gap:4px; z-index:1;
}
.roof .panel{
  background:linear-gradient(135deg, rgba(11,118,137,.85), rgba(0,49,58,.95));
  border:1px solid rgba(78,179,196,.4); border-radius:2px;
  box-shadow:inset 0 0 8px rgba(78,179,196,.3);
  opacity:0;
}
/* anima quando a spotlight entra no view (não no load) */
.reveal.in .roof .panel{ animation:panelDrop .6s var(--ease-out) forwards; animation-delay:var(--delay); }
@keyframes panelDrop{ 0%{ opacity:0; transform:translateZ(40px) scale(1.1); } 100%{ opacity:1; transform:translateZ(0) scale(1); } }
.vis-label{ position:absolute; bottom:14px; left:20px; display:flex; flex-direction:column; gap:2px; z-index:2; }
.vis-label .lab{ font-size:11px; color:var(--fg-3); letter-spacing:.1em; }
.vis-label .lab.num{ color:var(--brand-4); font-family:var(--font-mono); }

/* ---- Monitor ---- */
.vis-monitor{ gap:12px; min-height:300px; }
.mon-head{ display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; }
.mon-stat{ display:inline-flex; align-items:baseline; gap:6px; }
.mon-stat .num{ font-family:var(--font-display); font-size:38px; font-weight:700; letter-spacing:-.02em; color:var(--fg-1); }
.mon-stat .u{ font-size:12px; color:var(--fg-3); letter-spacing:.12em; text-transform:uppercase; }
.mon-stat.sub .num{ font-size:18px; color:var(--brand-4); }
.mon-live{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
  padding:4px 10px; background:rgba(47,180,107,.1); border:1px solid rgba(47,180,107,.3); border-radius:999px;
}
.mon-live .pulse{ width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 0 0 rgba(47,180,107,.7); animation:livePulse 1.6s var(--ease-out) infinite; }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(47,180,107,.7); } 100%{ box-shadow:0 0 0 10px rgba(47,180,107,0); } }

.mon-plot{ position:relative; }
.mon-base{ position:absolute; left:0; right:0; top:38%; border-top:1.5px dashed var(--accent); opacity:.8; z-index:2; pointer-events:none; }
.mon-chart{ flex:0 0 auto; min-height:96px; height:104px; display:flex; align-items:flex-end; gap:4px; }
.mon-chart .bar{
  flex:1; background:linear-gradient(180deg, rgba(78,179,196,.95), rgba(0,97,115,.4));
  border-radius:2px 2px 0 0; height:0%;
}
.reveal.in .mon-chart .bar{ animation:barRise .7s var(--ease-out) forwards; animation-delay:calc(var(--i) * 30ms + 200ms); }
@keyframes barRise{ to{ height:calc(var(--v) * 100%); } }

.mon-legend{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:10px; color:var(--fg-3); letter-spacing:.1em; text-transform:uppercase; }
.mon-legend .leg{ display:inline-flex; align-items:center; gap:6px; }
.mon-legend .leg .sw{ width:14px; height:3px; border-radius:2px; display:inline-block; }
.mon-legend .leg.gen .sw{ background:var(--brand-4); }
.mon-legend .leg.con .sw{ background:transparent; border-top:2px dashed var(--accent); height:0; }
.mon-legend .mon-foot{ margin-left:auto; gap:10px; display:inline-flex; font-family:var(--font-mono); color:var(--fg-4); }

.mon-bill{ border-top:1px solid var(--border); padding-top:12px; }
.mb-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mb-lbl{ font-size:11px; color:var(--fg-3); letter-spacing:.06em; flex:1 1 auto; min-width:0; }
.mb-vals{ display:inline-flex; align-items:center; gap:8px; color:var(--fg-1); }
.mb-vals s{ color:var(--fg-4); font-family:var(--font-mono); font-size:14px; }
.mb-vals svg{ color:var(--brand-4); }
.mb-vals b{ font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.01em; }
.mb-cut{ font-size:12px; font-weight:700; letter-spacing:.04em; font-family:var(--font-mono); color:var(--success); padding:3px 9px; border-radius:999px; background:rgba(47,180,107,.12); border:1px solid rgba(47,180,107,.32); }

.mon-conn{ border-top:1px solid var(--border); padding-top:12px; display:flex; flex-direction:column; gap:8px; }
.conn-row{ display:flex; align-items:center; gap:10px; }
.conn-lbl{ flex:0 0 96px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-4); font-weight:600; }
.conn-chips{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.conn-chip{ font-size:11px; color:var(--fg-2); font-family:var(--font-mono); letter-spacing:.02em; padding:3px 9px; border-radius:999px; background:rgba(14,26,29,.6); border:1px solid var(--border); }

/* ---- AI ---- */
.vis-ai{ gap:12px; min-height:300px; }
.ai-msg{
  background:rgba(14,26,29,.75); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; display:flex; flex-direction:column; gap:6px; max-width:80%; opacity:0;
}
.reveal.in .ai-msg{ animation:msgIn .5s var(--ease-out) forwards; }
.ai-msg .who{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-4); font-weight:600; }
.ai-msg .txt{ color:var(--fg-1); font-size:14px; line-height:1.5; }
.ai-msg.agent{ background:rgba(11,118,137,.18); border-color:var(--border-brand); align-self:flex-end; }
.ai-msg.agent .who{ color:var(--brand-4); }
.ai-msg.small .txt{ font-size:12px; color:var(--fg-2); }
.reveal.in .ai-msg.user{ animation-delay:.1s; }
.reveal.in .ai-msg.agent:nth-of-type(2){ animation-delay:.7s; }
.reveal.in .ai-msg.agent.small{ animation-delay:1.5s; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; } }
.ai-think{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:11px; color:var(--fg-4); font-style:italic; }
.ai-think .dots{ display:inline-flex; gap:2px; }
.ai-think .dots span{ width:4px; height:4px; border-radius:50%; background:var(--brand-4); animation:tdot 1.2s ease-in-out infinite; }
.ai-think .dots span:nth-child(2){ animation-delay:.2s; }
.ai-think .dots span:nth-child(3){ animation-delay:.4s; }
@keyframes tdot{ 0%,80%,100%{ opacity:.2; } 40%{ opacity:1; } }
.ai-chip{
  align-self:flex-start; margin-top:auto;
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background:rgba(47,180,107,.15); border:1px solid rgba(47,180,107,.3);
  color:var(--success-soft); font-size:11px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; opacity:0;
}
.reveal.in .ai-chip{ animation:msgIn .5s var(--ease-out) 1.9s forwards; }
.ai-chip span{ width:6px; height:6px; border-radius:50%; background:var(--success); animation:livePulse 1.6s var(--ease-out) infinite; }

/* ---- Financeiro + Banco ---- */
.vis-fin{ gap:14px; min-height:300px; }
.fin-card{ background:linear-gradient(135deg, rgba(11,118,137,.25), rgba(2,6,10,.6)); border:1px solid var(--border-brand); border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:4px; }
.fin-label{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-3); }
.fin-value{ font-family:var(--font-display); font-size:34px; font-weight:700; letter-spacing:-.02em; color:var(--fg-1); }
.fin-value .num{ font-variant-numeric:tabular-nums; }
.fin-delta{ font-size:12px; color:var(--success-soft); }
.fin-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.fin-mini{ background:rgba(14,26,29,.7); border:1px solid var(--border); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--fg-3); min-width:0; }
.fin-mini b{ color:var(--fg-1); font-family:var(--font-display); font-size:15px; font-weight:600; }

.fin-bank{ margin-top:4px; display:flex; flex-direction:column; gap:10px; }
.bank-card{
  position:relative;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(78,179,196,.30), transparent 60%),
    linear-gradient(135deg, rgba(11,118,137,.55), rgba(2,6,10,.85));
  border:1px solid var(--border-brand); border-radius:14px; padding:16px 18px;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:inset 0 0 0 1px rgba(196,230,236,.05);
}
.bank-top{ display:flex; align-items:center; justify-content:space-between; }
.bank-brand{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--fg-1); }
.bank-brand .bk-dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-4); box-shadow:0 0 8px rgba(78,179,196,.7); }
.bank-chip{ width:30px; height:22px; border-radius:5px; background:linear-gradient(135deg,#F4D58A,#C9A14A); box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
.bank-num{ font-family:var(--font-mono); font-size:14px; letter-spacing:.18em; color:var(--fg-2); }
.bank-bot{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.bank-bal{ display:inline-flex; flex-direction:column; gap:2px; }
.bank-bal .u{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.bank-bal b{ font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--fg-1); letter-spacing:-.01em; }
.bank-pays{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.bank-pays .pay{ font-size:11px; color:var(--fg-2); letter-spacing:.02em; padding:3px 10px; border-radius:999px; background:rgba(2,6,10,.45); border:1px solid var(--border); }
.bank-recon{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.recon-badge{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2); padding:4px 10px; border-radius:999px; background:rgba(47,180,107,.1); border:1px solid rgba(47,180,107,.3); }
.recon-badge .pulse{ width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 0 0 rgba(47,180,107,.7); animation:livePulse 1.6s var(--ease-out) infinite; }
.recon-txt{ font-size:11px; color:var(--fg-3); }

/* =====================================================================
   §4 ESPERE MAIS — respiro
   ===================================================================== */
.more{ background:radial-gradient(ellipse at 50% 45%, rgba(251,176,59,.10), transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(0,49,58,.4), transparent 60%); }
.more__inner{ text-align:center; max-width:640px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:14px; }
.more-plus-big{ position:relative; width:clamp(96px,16vh,150px); height:clamp(96px,16vh,150px); display:flex; align-items:center; justify-content:center; }
.more-plus-big .mp-core{ font-family:var(--font-display); font-weight:700; font-size:clamp(48px,9vh,84px); line-height:1; color:var(--accent); text-shadow:0 0 40px rgba(251,176,59,.55); animation:morePulse 2.6s var(--ease-in-out) infinite; }
.more-plus-big .mp-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(251,176,59,.35); animation:corePulse 2.8s var(--ease-in-out) infinite .2s; }
.more-plus-big .mp-ring.r2{ inset:-22%; border-color:rgba(251,176,59,.18); animation-delay:.4s; }
@keyframes morePulse{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
.more__inner h2{ margin-top:4px; }

/* =====================================================================
   §5 AVISE-ME — copy + formulário
   ===================================================================== */
.waitlist-sec{ background:radial-gradient(ellipse at 50% 100%, rgba(251,176,59,.1), transparent 60%), radial-gradient(ellipse at 50% 40%, rgba(0,49,58,.5), transparent 70%); }
.waitlist-sec__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center; }
.waitlist-sec__copy h2{ margin-top:14px; }
.waitlist-sec__copy .lede{ margin-top:16px; max-width:46ch; }
.waitlist-sec__foot{ margin-top:24px; display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px; color:var(--fg-4); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.waitlist-sec__foot .d{ color:var(--brand-4); }

.form-card{
  position:relative; background:linear-gradient(180deg, rgba(14,26,29,.92), rgba(10,21,24,.92));
  border:1px solid var(--border-strong); border-radius:var(--radius);
  padding:clamp(22px,2.6vw,30px); box-shadow:var(--shadow-cinematic);
  max-width:480px; width:100%; margin-left:auto;
}
.form-card h3{ margin-top:10px; font-size:clamp(1.3rem,2.8vw,1.6rem); color:var(--fg-1); }
.form-card .sub{ margin-top:8px; font-size:.9rem; color:var(--fg-3); line-height:1.5; }

.field{ margin-top:16px; }
.field label{ display:block; font-size:.8rem; font-weight:600; color:var(--fg-2); margin-bottom:6px; }
.field label .req{ color:var(--accent); }
.field input[type=email],
.field input[type=tel],
.field input[type=text]{
  width:100%; padding:13px 14px; border-radius:11px; font-size:1rem; font-family:var(--font-sans);
  border:1.5px solid var(--border-strong); background:rgba(2,6,10,.5); color:var(--fg-1);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.field input::placeholder{ color:var(--fg-4); }
.field input:focus{ outline:0; border-color:var(--brand-4); background:rgba(2,6,10,.7); box-shadow:0 0 0 4px rgba(78,179,196,.15); }
.field.err input{ border-color:var(--sm-danger-500); background:rgba(40,10,12,.4); }
.field .hint{ margin-top:5px; font-size:.74rem; color:var(--sm-danger-500); display:none; }
.field.err .hint{ display:block; }

/* ---------- <select> (colaboradores, tempo de mercado) ----------
   Nao havia estilo de select em lugar nenhum do projeto: o seletor de input
   acima so casa email|tel|text. Reproduz a caixa dos inputs e desenha a seta
   propria (appearance:none tira a nativa, que vem clara demais no dark).
   font-size 1rem e obrigatorio: abaixo de 16px o iOS Safari da zoom sozinho. */
.field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; padding:13px 38px 13px 14px; border-radius:11px;
  border:1.5px solid var(--border-strong); background-color:rgba(2,6,10,.5);
  color:var(--fg-1); font:inherit; font-size:1rem; line-height:1.2;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2396A2A8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:17px;
}
.field select:focus{ outline:0; border-color:var(--brand-4); background-color:rgba(2,6,10,.7); box-shadow:0 0 0 4px rgba(78,179,196,.15); }
.field.err select{ border-color:var(--sm-danger-500); background-color:rgba(40,10,12,.4); }
/* Sem isto o dropdown ABERTO (renderizado pelo SO) sai texto claro sobre
   branco no Windows/Chrome — ilegivel. */
.field select option{ background:#0E1A1D; color:#F2F9FB; }
.field select:invalid,
.field select option[value=""]{ color:var(--fg-4); }

/* ---------- "Ja e cliente?" — radios como pills ----------
   Dois radios nativos (acessiveis e navegaveis por teclado de graca) com a
   aparencia de botoes. Radio em vez de toggle: nao ha default, a escolha e
   sempre consciente. */
.field--radio{ border:0; padding:0; margin:16px 0 0; min-width:0; }
.field--radio legend{ padding:0; font-size:.8rem; font-weight:600; color:var(--fg-2); margin-bottom:6px; }
.field--radio legend .req{ color:var(--accent); }
.radio-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.radio-pill{ position:relative; display:block; cursor:pointer; }
.radio-pill input{ position:absolute; opacity:0; width:0; height:0; }
.radio-pill span{
  display:block; text-align:center; padding:12px 10px; border-radius:11px;
  border:1.5px solid var(--border-strong); background:rgba(2,6,10,.5);
  color:var(--fg-2); font-size:.95rem; font-weight:600;
  transition:border-color .16s var(--ease-out), background .16s var(--ease-out), color .16s var(--ease-out);
}
.radio-pill:hover span{ border-color:var(--border-brand); color:var(--fg-1); }
.radio-pill input:checked + span{
  border-color:var(--brand-4); background:rgba(78,179,196,.14); color:var(--fg-1);
}
/* Foco visivel pelo teclado (o input real esta escondido). */
.radio-pill input:focus-visible + span{ box-shadow:0 0 0 4px rgba(78,179,196,.22); }
.field--radio.err .radio-pill span{ border-color:var(--sm-danger-500); }

.form-card .submit{ margin-top:20px; }
.form-meta{ margin-top:12px; font-size:.76rem; color:var(--fg-4); text-align:center; }
.form-meta.error{ color:var(--sm-danger-500); font-weight:600; }

/* honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* sucesso */
.form-ok{ text-align:center; padding:10px 0; }
.form-ok .mark{ width:62px; height:62px; border-radius:99px; margin:0 auto 16px; display:grid; place-items:center; color:#1A0E00; background:var(--accent); box-shadow:0 0 0 8px rgba(251,176,59,.16), 0 0 40px rgba(251,176,59,.5); }
.form-ok .mark svg{ width:32px; height:32px; }
.form-ok h3{ color:var(--fg-1); }
.form-ok p{ margin-top:10px; color:var(--fg-2); font-size:.95rem; }
.form-ok b{ color:var(--fg-1); }

/* Prazo virou com a aba aberta: o form sai do ar na hora, sem esperar reload.
   A virada definitiva e server-side (a fase da landing), isto e so a rede de
   seguranca de quem ja estava com a pagina carregada as 23:59. */
/* "Já cadastrado" reaproveita o layout da confirmação (.form-ok) e troca só a
   cor do selo: é uma informação neutra, não uma nova conversão. */
.form-dup .mark{
  color:var(--brand-4); background:transparent;
  border:2px solid var(--brand-4);
  box-shadow:0 0 0 8px rgba(45,166,178,.10), 0 0 40px rgba(45,166,178,.28);
}

.form-closed{ display:none; text-align:center; padding:10px 0; }
body.is-closed #lead-form{ display:none; }
/* O prazo tem precedência sobre qualquer resposta do formulário: se virou com a
   aba aberta, nem a confirmação nem o aviso de duplicado seguem no ar. */
body.is-closed #form-ok,
body.is-closed #form-dup{ display:none !important; }
body.is-closed .form-closed{ display:block; }
.form-closed h3{ color:var(--fg-1); font-size:clamp(1.2rem,2.6vw,1.45rem); }
.form-closed p{ margin-top:10px; color:var(--fg-2); font-size:.95rem; }
.form-closed .btn{ margin-top:18px; }

/* CTA do rodape que devolve o usuario ao formulario do topo. */
.cta-back{ margin-top:18px; }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width:980px){
  .spotlight{ grid-template-columns:1fr; gap:clamp(20px,5vw,32px); }
  /* no mobile o texto sempre vem ANTES do visual (mesmo nas linhas alternadas) */
  .spotlight--reverse .spotlight__copy{ order:0; }
  .mod-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .waitlist-sec__grid{ grid-template-columns:1fr; }
  .waitlist-sec__copy{ text-align:center; }
  .waitlist-sec__copy .eyebrow{ justify-content:center; }
  .waitlist-sec__copy .lede{ margin-inline:auto; }
  .waitlist-sec__foot{ justify-content:center; }
  .form-card{ order:2; margin-inline:auto; }
  /* Hero em coluna unica: a copy e o countdown vem primeiro, o form logo
     abaixo — ainda acima de todo o storytelling. */
  .hero__grid{ grid-template-columns:1fr; }
  .hero{ text-align:center; }
  .hero__copy{ align-items:center; }
  .hero__sub{ margin-inline:auto; }
  .countdown{ margin-inline:auto; }
  /* A hero centraliza no mobile, mas a lista do status tem marcador à esquerda:
     centralizar o texto desalinharia os bullets. Centraliza o CARD, não o texto. */
  .status-card{ margin-inline:auto; text-align:left; }
  .hero .form-card{ order:0; }
}
@media (max-width:680px){
  .mod-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* mockups com medidas de desktop encolhem pra caber */
  .roof{ transform:rotateX(58deg) rotateZ(-12deg) scale(.78); }
  .iso-grid{ inset:16% 4% 24% 4%; }
  .mon-stat .num{ font-size:30px; }
  .mon-head{ gap:14px; }
  .ai-msg{ max-width:92%; }
  .conn-row{ flex-direction:column; align-items:flex-start; gap:5px; }
  .conn-lbl{ flex:none; }
}
@media (max-width:430px){
  .mod{ padding:13px; gap:11px; }
  .mod__ic{ width:36px; height:36px; }
  .fin-value{ font-size:clamp(26px,9vw,32px); }
  /* Telas estreitas: os 4 blocos do countdown nao cabem lado a lado com os
     separadores, entao viram uma grade 4x1 sem os ":". */
  .countdown{ padding:14px; }
  .countdown__sep{ display:none; }
  .countdown__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
  .countdown__unit{ min-width:0; }
  .countdown__num{ font-size:26px; }
  .countdown__cap{ font-size:.58rem; letter-spacing:.1em; }
  .form-card{ padding:18px 16px; }
}