/* Efeitos de rolagem da landing. Só ativa quando scroll-fx.js adiciona .fx-on ao <html>. */
:root{--fx-ease:cubic-bezier(.16,1,.3,1)}

/* Cabeçalho de vidro fixo ao rolar */
.fx-on #landingScreen .exact-header.fx-stuck{position:fixed;top:0;left:0;right:0;z-index:50;padding:12px max(14px,calc((100vw - var(--fx-w,1180px))/2));background:color-mix(in srgb,var(--bg,#090a08) 70%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 1px 0 rgba(255,255,255,.06);animation:fx-fade .5s var(--fx-ease)}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}

/* Surgimento suave ao entrar na tela */
.fx-on [data-fx]{opacity:0;transform:translateY(16px);transition:opacity .9s var(--fx-ease),transform .9s var(--fx-ease);transition-delay:var(--fx-delay,0s)}
.fx-on [data-fx].fx-in{opacity:1;transform:none}

/* Palavras em destaque ganham um sublinhado fino */
.fx-on section h2 em{background:linear-gradient(var(--accent,#ddff37),var(--accent,#ddff37)) 0 100%/0 2px no-repeat;transition:background-size 1.2s var(--fx-ease) .3s;padding-bottom:2px}
.fx-on section h2:not([data-fx]) em,.fx-on section h2.fx-in em{background-size:100% 2px}

/* Cards levantam de leve no hover */
.fx-on .feature-card,.fx-on .landing-plan{transition:transform .5s var(--fx-ease),border-color .4s ease}
@media (hover:hover){
  .fx-on .feature-card:hover,.fx-on .landing-plan:hover{transform:translateY(-3px);border-color:rgba(221,255,55,.28)}
}