/* IntegraXmais — topo "Ignição": fundo escuro, partículas de luz, texto à esquerda */

/* tela de carregamento: só a faísca laranja, no mesmo ponto onde a explosão começa */
#preloader{gap:0}
.pre-spark{position:relative;width:12px;height:12px;border-radius:50%;background:#FFD9BF;box-shadow:0 0 0 3px rgba(255,107,44,.9),0 0 34px 10px rgba(255,107,44,.55);animation:sparkPulse 1s ease-in-out infinite}
@keyframes sparkPulse{50%{transform:scale(1.5);box-shadow:0 0 0 3px rgba(255,107,44,.9),0 0 54px 18px rgba(255,107,44,.5)}}

.hx{position:relative;display:flex;flex-direction:column;min-height:max(100svh,740px);padding-top:76px;background:#061330;overflow:clip;isolation:isolate}
.hx::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 58% 72% at 74% 47%,rgba(21,94,239,.2),transparent 64%),
    radial-gradient(ellipse 46% 60% at 80% 58%,rgba(6,199,193,.1),transparent 62%),
    radial-gradient(ellipse 70% 46% at 8% 100%,rgba(21,94,239,.12),transparent 62%)}
.hx__stage{position:absolute;inset:0;z-index:-1;transform-origin:50% 50%}
.hx__stage canvas{position:absolute;inset:0;width:100%;height:100%}
.hx.is-burst .hx__stage{animation:hxPunch 1.1s var(--ease)}
@keyframes hxPunch{0%{transform:scale(1.045)}100%{transform:none}}

.hx__inner{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3.4vh,34px);padding-top:clamp(28px,5vh,60px);padding-bottom:clamp(8px,2vh,24px);position:relative;z-index:1}
.hx h1{font-size:clamp(2.55rem,4.7vw,5rem);font-weight:680;font-stretch:84%;letter-spacing:-.005em;line-height:.96;max-width:9.2em;color:#fff}
.hx .lead{font-size:clamp(1rem,1.1vw,1.1rem);line-height:1.55;color:#A9B8D6;max-width:48ch;text-wrap:pretty}
.hx__aside{max-width:48ch}
.hx__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
#site .hx .btn--primary{background:#fff;color:#061330;box-shadow:0 12px 30px -14px rgba(120,170,255,.55)}
#site .hx .btn--primary:hover{background:#DCE8FF;transform:translateY(-1px)}
.hx .btn--ghost{color:#fff;border-color:rgba(255,255,255,.28)}
#site .hx .btn--ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}

.hx__stats{display:flex;flex-wrap:wrap;gap:10px clamp(24px,5vw,72px);margin:clamp(30px,4.4vw,52px) 0 0;padding:20px 0;border-top:1px solid rgba(255,255,255,.14);position:relative;z-index:1}
.hx__stats>div{display:flex;align-items:baseline;gap:12px}
.hx__stats dt{color:#93A3C4;font-size:.92rem;order:2}
.hx__stats dd{margin:0;order:1}
.hx__stats b{font-family:var(--f-display);font-stretch:80%;font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:700;letter-spacing:-.02em;color:#fff}
.hx .ticker{background:rgba(255,255,255,.035);border-top:1px solid rgba(255,255,255,.1);position:relative;z-index:1}
.hx .ticker__track{color:#93A3C4}

/* entrada do texto: só depois que o símbolo se forma */
.hx.is-armed h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.hx.is-armed h1 .w>span{display:inline-block;transform:translateY(112%)}
.hx.is-text h1 .w>span{transform:none;transition:transform 1s var(--ease) calc(var(--i)*.07s)}
.hx.is-armed .rv{opacity:0;transform:translateY(16px)}
.hx.is-text .rv{opacity:1;transform:none;transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}

/* barra superior sobre o topo escuro */
.topbar{transition:background .3s,border-color .3s}
.topbar.on-dark{--text:#EAF0FC;--muted:#A9B8D6;--line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.24);background:rgba(6,19,48,0);-webkit-backdrop-filter:none;backdrop-filter:none}
.topbar.on-dark.is-solid{background:rgba(6,19,48,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.topbar.on-dark .btn--primary{background:#fff;color:#061330}
.topbar.on-dark .btn--primary:hover{background:#DCE8FF}

@media (max-width:980px){
  .hx__inner{padding-top:var(--hx-sym,300px);gap:22px;justify-content:flex-start}
}
@media (max-width:560px){
  .hx__stats>div{flex-direction:column;gap:2px}
  .hx__stats{gap:14px 28px}
}
@media (prefers-reduced-motion:reduce){
  .hx.is-armed h1 .w>span,.hx.is-armed .rv{transform:none!important;opacity:1!important;transition:none!important}
  .hx.is-burst .hx__stage{animation:none}
}