/* ==========================================================================
   Exys — camada 136 · refinamento de superfície
   Baseada na skill design-motion-principles (audit + create):
   - gradiente azul→turquesa é o tell mais reconhecível de UI gerada
   - entrada uniforme em todo bloco (rv) é slop: conteúdo aparece, não desfila
   - rótulo monoespaçado em caixa alta com tracking largo é datado
   Aplicar no FIM de assets/css/styles.css
   ========================================================================== */

:root{
  /* a marca tem uma cor. O acento turquesa deixa de ser gradiente. */
  --grad:linear-gradient(135deg,#4C5BFF 0%,#3B49E0 100%);
  --grad-soft:linear-gradient(135deg,rgba(76,91,255,.14),rgba(76,91,255,.05));
  --accent:#4C5BFF; --accentd:#3244D6; --accentl:rgba(76,91,255,.10);
  --glow:rgba(76,91,255,.18);
  --radius:14px; --radius-sm:10px; --radius-lg:18px;
  --shadow:0 18px 44px -30px rgba(4,7,18,.9);
  --shadow-sm:0 8px 22px -18px rgba(4,7,18,.85);
  --dur:160ms; --ease:cubic-bezier(.2,.8,.2,1);
}

/* 1. Conteúdo não desfila: o que existe, aparece. Movimento fica para o que responde ao usuário. */
.rv,.rv-in,.reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}

/* 2. Rótulo: sai o monoespaçado em caixa alta com 0.18em de tracking */
.eyebrow{
  font-family:var(--ft);font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:none;color:var(--muted);
}
.eyebrow::before{content:"";display:inline-block;width:14px;height:1px;background:var(--brandm);margin-right:8px;vertical-align:middle}

/* 3. Hierarquia tipográfica: contraste real entre título, subtítulo e corpo */
h1{letter-spacing:-.032em;line-height:1.04}
h2,.h2{letter-spacing:-.026em;line-height:1.1}
h3,h4{letter-spacing:-.018em}
.lead{font-size:clamp(16px,1.15vw,18px);line-height:1.62;color:var(--ink2);max-width:62ch}

/* 4. Superfície: borda de 1px no lugar de sombra colorida e brilho */
.card,.shot{
  border:1px solid var(--line);
  box-shadow:none;
  background:var(--card);
}
.card:hover,.shot:hover{
  border-color:rgba(76,91,255,.38);
  box-shadow:var(--shadow-sm);
  transform:none;                       /* sem scale: o card não é brinquedo */
}

/* 4b. Rótulo de estágio e barra de CTA não são superfícies:
   são texto e divisória — caixa em volta vira ruído visual */
.stage{
  display:inline-flex;align-items:center;gap:7px;
  border:0;background:none;padding:0;box-shadow:none;
  font-size:10.5px;letter-spacing:.1em;
}
.stage::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9;flex:0 0 auto}
.stage.on::before{box-shadow:0 0 0 3px rgba(31,169,113,.16)}
.card-cta{border:0;border-top:1px solid var(--line2);background:none;box-shadow:none}
.card-cta:hover{box-shadow:none}

/* 5. Botões: um primário por tela, sem gradiente, sem brilho */
.btn{transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn.pri{background:var(--brand);background-image:none;box-shadow:none;color:var(--onbrand)}
.btn.pri:hover{background:var(--brandh);box-shadow:none}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--brandm);background:var(--brandl)}

/* 6. Link e foco: teclado precisa ver onde está */
a{text-underline-offset:3px}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

/* 7. Densidade: respiro consistente em vez de margens improvisadas */
.sec{padding-block:clamp(56px,7vw,96px)}
.sec + .sec{padding-top:0}

/* 8. Acessibilidade: quem pediu menos movimento recebe menos movimento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}