/* CRM Avalanche V2 — base: paleta MIDNIGHT ACID, reset, tipografia, botões, nav absoluta, reveals, footer, modal */
:root{
  --bg0:#0b0b10;
  --bg1:#12121a;
  --bg2:#181822;
  --surface:#1e1e2b;
  --ink:#0b0b10;
  --text:#f2f2ea;
  --mute:#a3a39a;
  --faint:#6f6f68;
  --acid:#d4ff4a;
  --acid-soft:#e4ff85;
  --magenta:#ff0000;
  --magenta-soft:#ff6b6b;
  --line:rgba(242,242,234,.12);
  --line-soft:rgba(242,242,234,.07);
  --font-display:"Cormorant Garamond",Georgia,serif;
  --font-body:"DM Sans",-apple-system,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --container:1360px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
*,*::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;}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.06;letter-spacing:-.01em;}
.serif{font-style:italic;color:var(--acid);}
.section-dark .serif,#hero .serif{color:var(--acid-soft);}
.dot{color:var(--acid);}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
figure{margin:0;}
::selection{background:var(--acid);color:var(--ink);}

.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;}

/* cursor: ponto + anel que reage a hover em links/botões */
.cursor,.cursor-ring{
  position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:700;
  transform:translate(-50%,-50%);opacity:0;
}
.cursor{width:9px;height:9px;background:var(--acid);}
.cursor-ring{
  width:34px;height:34px;border:1.5px solid var(--acid);opacity:0;
  transition:width .3s var(--ease-out),height .3s var(--ease-out),border-color .3s,opacity .3s;
}
.cursor.on,.cursor-ring.on{opacity:.85;}
.cursor-ring.on{opacity:.45;}
body.link-hover .cursor-ring{width:56px;height:56px;opacity:.9;border-color:var(--magenta);}
@media (hover:none),(pointer:coarse){.cursor,.cursor-ring{display:none;}}

.container{width:min(var(--container),100% - 48px);margin-inline:auto;}
section .container{position:relative;z-index:1;}

.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);}

/* botões */
.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{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;}

/* nav — absoluta no topo, rola junto com a página */
.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);}

/* reveals one-shot à prova de falha:
   estado padrão = VISÍVEL. O JS adiciona .pre (esconde) só quando o IO existe
   e vai animar de fato; sem JS ou sem IO, nada fica escondido. */
.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;}

/* sec-rule editorial — numeral monumental + hairline */
.sec-rule{
  display:flex;align-items:center;gap:18px;margin-bottom:36px;
  font:500 10.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}
.sec-rule::after{content:"";flex:1;height:1px;background:var(--line);order:3;}
.sec-rule .rom{font:600 italic 32px/1 var(--font-display);color:var(--acid);letter-spacing:0;text-transform:none;}
.sec-rule .mid{order:2;}
.sec-rule span:last-child{order:4;}

/* canvases de cenário por seção */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0;}

/* footer — megaword cropado */
.footer{background:#08080c;color:var(--text);padding:90px 0 32px;overflow:hidden;}
.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);}}

/* modal — overlay absolute (sem fixed), trava scroll do body ao abrir */
.modal-ov{
  position:absolute;inset:0;z-index:500;background:rgba(11,11,16,.8);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out);
}
.modal-ov.open{opacity:1;pointer-events:auto;}
.modal{
  position:absolute;left:50%;transform:translateX(-50%);
  background:var(--text);color:var(--ink);border-radius:22px;padding:44px;width:min(520px,100% - 40px);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.8);
}
.modal .x{position:absolute;top:16px;right:18px;font-size:26px;line-height:1;color:#5a5a52;transition:color .3s,transform .3s;}
.modal .x:hover{color:var(--magenta);transform:rotate(90deg);}
.modal h3{font-size:30px;margin:14px 0 10px;color:var(--ink);}
.msub{color:#5a5a52;font-size:15px;margin-bottom:22px;}
.msub b{color:var(--ink);}
.fld{margin-bottom:16px;}
.fld label{display:block;font:500 11px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:#5a5a52;margin-bottom:7px;}
.fld input,.fld select{
  width:100%;padding:14px 16px;border:1px solid rgba(11,11,16,.2);border-radius:12px;background:#e9e9dd;
  font:400 15px var(--font-body);color:var(--ink);transition:border-color .3s,box-shadow .3s;
}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(255,0,0,.2);}
.modal .btn{width:100%;justify-content:center;margin-top:6px;}
.modal-ok{text-align:center;padding:20px 0;}
.modal-ok .glyph{font:600 64px var(--font-display);color:var(--magenta);}
.modal .eyebrow{color:#5a5a52;}
body.modal-open{overflow:hidden;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .pulse{animation:none;}
  .cursor,.cursor-ring{display:none;}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;}
}