/* =====================================================================
   SHARP LEADS · "mais vida" (tendências 2026, sem mudar o layout)
   1) fundo gelo em vez de branco puro + aurora navy/verde no topo
   2) faixas navy (vídeo da ferramenta e CTA final) para dar ritmo
   3) cantos orgânicos nas faixas, título com revelação por palavra,
      check animado no envio do formulário
   ===================================================================== */
:root{ --ice:#F6F8FB; --ice-2:#EDF2F7; --glow-blue:rgba(11,26,58,.10); --glow-violet:rgba(0,196,106,.16); --glow-teal:rgba(0,196,106,.10); }
body,main{background:var(--ice)}
main section{background:var(--ice)}
main section.alt{background:var(--ice-2)}
main section.alt .card,main section.alt .step,main section.alt .crit,main section.alt .metric{background:#fff}
.card,.step{background:#fff}
.nav{background:rgba(246,248,251,.82)}

/* aurora do topo: as luzes do design original, agora em navy e verde */
.atmos{display:block;position:absolute;top:0;left:0;right:0;height:min(1100px,130vh);z-index:0}
.atmos i{filter:blur(90px)}
.atmos .grid{opacity:1;background-image:linear-gradient(rgba(11,26,58,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,26,58,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%)}
.hero{background:transparent!important;position:relative;z-index:1}
main{position:relative;z-index:1}

/* faixas navy */
#ferramenta,#fim{background:var(--navy)!important;color:#fff;border-radius:40px 40px 0 0;position:relative}
#ferramenta + section,#fim + *{margin-top:-40px;padding-top:calc(clamp(72px,10vw,120px) + 40px)!important;border-radius:40px 40px 0 0;position:relative}
#ferramenta h2,#fim h2{color:#fff}
#ferramenta .lead-p,#fim .lead-p{color:#C9D3E6}
#ferramenta .small-print,#fim .small-print{color:#A9B6CE}
#ferramenta .vid-steps li{border-top-color:rgba(255,255,255,.14)}
#ferramenta .vid-steps li::before{color:var(--green)}
#ferramenta .vid-steps span{color:#C9D3E6}
#ferramenta .vid-box{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,196,106,.35)}
#ferramenta::before,#fim::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(50% 60% at 85% 20%,rgba(0,196,106,.16),transparent 70%),radial-gradient(40% 50% at 10% 90%,rgba(0,196,106,.08),transparent 70%)}
#ferramenta .wrap,#fim .wrap{position:relative}
#fim .final-card{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.10)}
#fim .contact-line a{color:#fff}
#fim .btn-primary{background:#fff;color:var(--navy)}
#fim .btn-primary:hover{background:#E6ECF5}
footer{background:var(--navy);color:#A9B6CE;border-top:1px solid rgba(255,255,255,.08);margin-top:-1px}
footer a{color:#C9D3E6}
footer .brand-word b{color:#fff}
#fim + *{margin-top:0;padding-top:40px!important;border-radius:0}

/* celular: o original força tudo branco; aqui mantém o gelo e as faixas */
@media (max-width:820px){
  body,main,main section,main section.alt,.hero{background:var(--ice)!important}
  #ferramenta,#fim{background:var(--navy)!important;border-radius:28px 28px 0 0}
  #ferramenta + section{margin-top:-28px;border-radius:28px 28px 0 0}
  .nav{background:rgba(246,248,251,.94)}
  .mcta{background:rgba(246,248,251,.96)}
  #fim .final-card{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.10)!important}
}

/* título com revelação por palavra (tipografia cinética, só no título principal) */
.kw{display:inline-block;opacity:0;transform:translateY(.35em);animation:kw .7s var(--ease) forwards}
@keyframes kw{to{opacity:1;transform:none}}

/* check animado ao enviar o formulário */
.ok-check{width:56px;height:56px;display:block;margin-bottom:6px}
.ok-check circle{fill:none;stroke:var(--green);stroke-width:3;stroke-dasharray:166;stroke-dashoffset:166;animation:ck .6s var(--ease) forwards}
.ok-check path{fill:none;stroke:var(--green);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:ck .4s .5s var(--ease) forwards}
@keyframes ck{to{stroke-dashoffset:0}}

/* botões: leve elevação ao passar o mouse */
.btn-primary,.btn-wa{transition:transform .2s var(--ease),background .2s}
@media (hover:hover){.btn-primary:hover,.btn-wa:hover{transform:translateY(-1px)}}

@media (prefers-reduced-motion:reduce){ .kw{opacity:1;transform:none;animation:none} .ok-check *{animation:none;stroke-dashoffset:0} .atmos i{animation:none} }
:root{ --glow-blue:rgba(11,26,58,.16); --glow-violet:rgba(0,196,106,.26); --glow-teal:rgba(0,196,106,.18); }
.vid-box.wide .vid-play{background:linear-gradient(0deg,rgba(11,26,58,.45),transparent 45%)!important}
main{background:transparent!important}
main section.hero{background:transparent!important}
@media (max-width:820px){ main{background:transparent!important} main section.hero{background:transparent!important} }
/* desempenho: luzes paradas no celular (o desfoque animado pesa no processador) */
@media (max-width:820px), (hover:none){ .atmos i{animation:none;filter:blur(60px)} }