/* ============================================================
   CYBER by Weli — Deck de vendas premium (tema preto)
   Linguagem visual herdada do produto (cyber.css)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* superfícies */
  --bg:#05070A; --card:#0C0F15; --card2:#10141C;
  --ink:#F3F5F8; --mut:#9AA3B2; --faint:#5B6373;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --surf:rgba(255,255,255,.04); --surf2:rgba(255,255,255,.06);
  /* cor com significado */
  --acid:#C2EC2B; --teal:#3BD4A6; --amber:#F2B53C; --red:#F0506E; --iris:#9A8CFF;
  --t-acid:rgba(194,236,43,.12); --t-teal:rgba(59,212,166,.12);
  --t-amber:rgba(242,181,60,.12); --t-red:rgba(240,80,110,.12); --t-iris:rgba(154,140,255,.12);
  --radius:20px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  overflow:hidden; -webkit-font-smoothing:antialiased;
  font-weight:400; line-height:1.35;
}

/* mono utilitário */
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums}

/* ---------- moldura viva: aurora + halftone ---------- */
.aurora{position:fixed; inset:-20vmax; z-index:0; filter:blur(60px); opacity:.55; pointer-events:none}
.aurora i{position:absolute; border-radius:50%; mix-blend-mode:screen; animation:drift 22s var(--ease) infinite alternate}
.aurora i:nth-child(1){width:52vmax;height:52vmax; left:-8vmax; top:-10vmax;
  background:radial-gradient(circle at 30% 30%, #1f6feb88, transparent 60%); animation-delay:0s}
.aurora i:nth-child(2){width:46vmax;height:46vmax; right:-10vmax; top:-6vmax;
  background:radial-gradient(circle at 60% 40%, #9A8CFF77, transparent 60%); animation-delay:-6s}
.aurora i:nth-child(3){width:44vmax;height:44vmax; right:-6vmax; bottom:-14vmax;
  background:radial-gradient(circle at 50% 50%, #3BD4A666, transparent 62%); animation-delay:-11s}
.aurora i:nth-child(4){width:38vmax;height:38vmax; left:-4vmax; bottom:-12vmax;
  background:radial-gradient(circle at 50% 50%, #C2EC2B44, transparent 60%); animation-delay:-16s}
@keyframes drift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(3vmax,2vmax) scale(1.08)}
  100%{transform:translate(-2vmax,3vmax) scale(1.03)}
}
.dots{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(60% 60% at 100% 100%, #000, transparent 70%);
  mask-image:radial-gradient(60% 60% at 100% 100%, #000, transparent 70%);}
.vignette{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55));}

/* ---------- deck / slides ---------- */
.deck{position:fixed; inset:0; z-index:2}
.slide{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; padding:6vh 8vw; gap:22px;
  opacity:0; transform:translateY(14px) scale(.995);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none; visibility:hidden;
  max-width:1500px; margin:0 auto;
}
.slide.active{opacity:1; transform:none; pointer-events:auto; visibility:visible}
.slide.leaving{opacity:0; transform:translateY(-12px) scale(.995)}
.slide.center{align-items:center; text-align:center}

/* ---------- tipografia ---------- */
.kicker{font-family:'JetBrains Mono',monospace; font-size:clamp(10px,1vw,13px);
  letter-spacing:.22em; text-transform:uppercase; color:var(--faint); font-weight:500;
  display:flex; align-items:center; gap:10px}
.kicker::before{content:""; width:22px; height:1px; background:var(--line2)}
.slide.center .kicker{justify-content:center}
.slide.center .kicker::before{display:none}

h1.head{font-size:clamp(30px,5.4vw,78px); font-weight:500; line-height:1.03;
  letter-spacing:-.02em}
h2.head{font-size:clamp(26px,3.8vw,52px); font-weight:500; line-height:1.08;
  letter-spacing:-.015em}
.lead{font-size:clamp(16px,1.7vw,25px); color:var(--mut); max-width:52ch; font-weight:400}
.slide.center .lead{margin-inline:auto}
.big-quote{font-size:clamp(24px,4.2vw,60px); font-weight:500; line-height:1.12;
  letter-spacing:-.02em; max-width:20ch}
.slide.center .big-quote{margin-inline:auto}
.tiny{font-size:clamp(11px,1vw,14px); color:var(--faint)}

em{font-style:normal}
.acid{color:var(--acid)} .teal{color:var(--teal)} .amber{color:var(--amber)}
.red{color:var(--red)} .iris{color:var(--iris)} .mut{color:var(--mut)} .ink{color:var(--ink)}
.u{ text-decoration:none; box-shadow:inset 0 -.34em 0 var(--t-acid)}

/* ---------- fragmentos ---------- */
.frag{opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.frag.on{opacity:1; transform:none}
.frag.blur{filter:blur(6px)} .frag.blur.on{filter:blur(0)}

/* ---------- wordmark ---------- */
.wordmark{font-weight:500; letter-spacing:.42em; font-size:clamp(30px,6vw,86px);
  padding-left:.42em}
.byweli{font-family:'JetBrains Mono',monospace; letter-spacing:.34em; font-size:clamp(11px,1.2vw,15px);
  color:var(--mut); text-transform:none}
.eco{font-family:'JetBrains Mono',monospace; letter-spacing:.3em; font-size:11px; color:var(--faint);
  text-transform:uppercase; display:inline-flex; gap:9px; align-items:center}
.eco .dot{width:7px;height:7px;border-radius:50%;background:var(--acid);
  box-shadow:0 0 12px var(--acid); animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- métricas ---------- */
.metric{font-family:'JetBrains Mono',monospace; font-weight:500; line-height:1;
  font-size:clamp(44px,8vw,116px); letter-spacing:-.03em}
.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; width:100%; margin-top:8px}
.mcard{background:var(--surf); border:1px solid var(--line); border-radius:18px; padding:30px 26px;
  display:flex; flex-direction:column; gap:12px}
.mcard .label{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut)}
.mcard .metric{font-size:clamp(38px,5.4vw,76px)}

/* ---------- dois mundos (tabela) ---------- */
.worlds{width:100%; border-collapse:separate; border-spacing:0; font-size:clamp(13px,1.35vw,19px)}
.worlds th,.worlds td{padding:14px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.worlds thead th{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mut); font-weight:500; border-bottom:1px solid var(--line2)}
.worlds .axis{font-family:'JetBrains Mono',monospace; color:var(--faint); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; width:20%}
.worlds .w1{color:var(--mut)}
.worlds .w2{color:var(--ink)}
.worlds thead .h1{color:var(--amber)}
.worlds thead .h2{color:var(--teal)}
.worlds tr.on-row td,.worlds tr.on-row th{}
.col2{background:linear-gradient(180deg, rgba(59,212,166,.06), transparent)}

/* ---------- listas / pilares ---------- */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; width:100%}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; width:100%}
.point{display:flex; gap:14px; align-items:flex-start; font-size:clamp(14px,1.4vw,20px)}
.point .mk{flex:none; width:26px;height:26px;border-radius:8px; display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--bg); font-weight:500; margin-top:2px}
.point .mk.teal{background:var(--teal)} .point .mk.iris{background:var(--iris)}
.point .mk.acid{background:var(--acid)} .point .mk.amber{background:var(--amber)}
.point b{font-weight:500}
.point .d{color:var(--mut); font-weight:400}

.card{background:var(--surf); border:1px solid var(--line); border-radius:16px; padding:22px}
.card .t{font-size:clamp(15px,1.5vw,21px); font-weight:500; margin-bottom:6px}
.card .s{color:var(--mut); font-size:clamp(13px,1.2vw,16px)}
.card .k{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-bottom:14px; display:flex; gap:8px; align-items:center}

/* pílulas / chips */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.04em;
  padding:8px 14px; border-radius:999px; border:1px solid var(--line2); color:var(--mut);
  background:var(--surf)}
.chip.iris{color:var(--iris); border-color:rgba(154,140,255,.4); background:var(--t-iris)}
.chip.teal{color:var(--teal); border-color:rgba(59,212,166,.4); background:var(--t-teal)}
.chip.acid{color:var(--acid); border-color:rgba(194,236,43,.4); background:var(--t-acid)}

/* bot glyph (agente IA) */
.bot{width:16px;height:16px;flex:none}
.bot rect{fill:none;stroke:var(--iris);stroke-width:1.5} .bot circle{fill:var(--iris)}

/* jornada (2 pontos humanos) */
.flow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%}
.node{font-family:'JetBrains Mono',monospace; font-size:clamp(11px,1.05vw,14px); padding:12px 14px;
  border-radius:12px; border:1px solid var(--line); background:var(--surf); color:var(--mut); white-space:nowrap}
.node.ai{border-color:rgba(154,140,255,.45); color:var(--iris); background:var(--t-iris)}
.node.human{border-color:rgba(194,236,43,.5); color:var(--acid); background:var(--t-acid); font-weight:500}
.arrow{color:var(--faint)}

/* dor: whatsapp bolhas */
.wa{display:flex; flex-direction:column; gap:10px; width:100%; max-width:560px}
.bubble{align-self:flex-start; background:var(--card2); border:1px solid var(--line);
  padding:12px 16px; border-radius:16px 16px 16px 4px; font-size:clamp(13px,1.3vw,17px); color:var(--mut);
  max-width:80%}
.bubble .who{font-size:11px; color:var(--faint); font-family:'JetBrains Mono',monospace; margin-bottom:3px}

/* placar novo */
.score{display:flex; flex-direction:column; gap:14px; width:100%}
.srow{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:20px;
  padding:16px 20px; border-radius:14px; border:1px solid var(--line); background:var(--surf)}
.srow .q{font-size:clamp(14px,1.5vw,21px)}
.srow .v1{font-family:'JetBrains Mono',monospace; color:var(--faint); font-size:13px; text-align:right}
.srow .v2{font-family:'JetBrains Mono',monospace; color:var(--teal); font-size:13px; text-align:right; font-weight:500}
.srow .v1 .x{color:var(--red)}

/* ---------- HUD: progresso, contador, notas ---------- */
.hud{position:fixed; z-index:20; left:0; right:0; bottom:0; height:3px; background:transparent}
.hud .bar{height:100%; width:0; background:linear-gradient(90deg,var(--teal),var(--acid));
  transition:width .5s var(--ease); box-shadow:0 0 12px var(--acid)}
.counter{position:fixed; z-index:20; right:22px; bottom:16px; font-family:'JetBrains Mono',monospace;
  font-size:12px; color:var(--faint); letter-spacing:.1em}
.brandmini{position:fixed; z-index:20; left:24px; bottom:14px; font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.28em; color:var(--faint); text-transform:uppercase}
.live{position:fixed; z-index:20; right:22px; top:18px; font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--faint); display:flex; gap:8px; align-items:center; letter-spacing:.1em}
.live .d{width:7px;height:7px;border-radius:50%;background:var(--acid); box-shadow:0 0 10px var(--acid);
  animation:pulse 2s infinite}

/* teleprompter de notas */
.notes{position:fixed; z-index:30; left:50%; transform:translateX(-50%) translateY(110%);
  bottom:26px; width:min(880px,86vw); background:rgba(10,13,20,.94); border:1px solid var(--line2);
  border-radius:14px; padding:16px 20px; color:var(--mut); font-size:15px; line-height:1.5;
  transition:transform .3s var(--ease); backdrop-filter:blur(10px); box-shadow:0 20px 60px rgba(0,0,0,.5)}
.notes.on{transform:translateX(-50%) translateY(0)}
.notes .lbl{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); margin-bottom:6px}

/* dica de teclado (some) */
.help{position:fixed; z-index:20; left:50%; transform:translateX(-50%); bottom:40px;
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--faint); letter-spacing:.08em;
  background:var(--surf); border:1px solid var(--line); padding:9px 16px; border-radius:999px;
  transition:opacity .6s; opacity:1}
.help.hide{opacity:0}
.help b{color:var(--mut); font-weight:500}

/* intro reveal (quadrados) */
.intro{position:fixed; inset:0; z-index:40; display:grid; pointer-events:none;
  grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(5,1fr)}
.intro i{background:var(--bg); border:.5px solid rgba(255,255,255,.03);
  transition:transform .9s var(--ease), opacity .9s var(--ease)}
.intro.go i{transform:translate(40px,-40px); opacity:0}

/* CTA */
.cta-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px}
.btn{font-family:'Space Grotesk',sans-serif; font-size:clamp(14px,1.4vw,18px); font-weight:500;
  padding:15px 26px; border-radius:12px; border:1px solid var(--line2); color:var(--ink);
  background:var(--surf)}
.btn.primary{background:var(--acid); color:#0A0C05; border-color:var(--acid)}

.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; width:100%}
.stack{display:flex; flex-direction:column; gap:20px}
.rule{height:1px; background:var(--line); width:100%}

@media (max-width:820px){
  .metrics,.grid2,.grid3{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr; gap:24px}
  .worlds .axis{width:auto}
}

@media (prefers-reduced-motion:reduce){
  .aurora i{animation:none}
  .slide,.frag,.notes,.intro i{transition:none}
}

/* ---------- mapa de slides (overview) ---------- */
.overview{position:fixed; inset:0; z-index:60; background:rgba(5,7,10,.93);
  backdrop-filter:blur(10px); display:none; padding:5vh 5vw; overflow:auto}
.overview.on{display:block}
.overview .ovhead{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); margin-bottom:22px;
  display:flex; justify-content:space-between; gap:20px}
.ovgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px}
.ovcard{background:var(--surf); border:1px solid var(--line); border-radius:12px;
  padding:15px 16px 17px; cursor:pointer; text-align:left; color:inherit; font-family:inherit;
  transition:border-color .15s var(--ease), transform .15s var(--ease), background .15s;
  min-height:100px; display:flex; flex-direction:column; gap:9px}
.ovcard:hover{border-color:var(--line2); transform:translateY(-2px); background:var(--surf2)}
.ovcard.cur{border-color:var(--acid); box-shadow:0 0 0 1px var(--acid)}
.ovcard .num{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--faint); letter-spacing:.14em}
.ovcard.cur .num{color:var(--acid)}
.ovcard .ttl{font-size:14px; color:var(--ink); font-weight:500; line-height:1.22}