/* ══════════════════════════════════════════════
   HERO v2 — left column inspired by 21st.dev "Glassmorphism Trust Hero" (@jahed),
   ported to vanilla CSS + Veox brand tokens. Right column = original orbit/character.
   ══════════════════════════════════════════════ */
#hero.vx-hero{overflow-x:clip !important}
.vx-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.vx-hero-bg::before{z-index:1;content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(250,243,225,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(250,243,225,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 100%)}
/* Hero background — Beams Background (Kokonut UI): neutral-950 base, blurred canvas beams, pulsing veil */
#hero.vx-hero{background:#0a0a0a}
.vx-hero-bg::before{display:none}
.vx-beams{position:absolute;inset:0;width:100%;height:100%}
/* perf: the legacy full-screen scanline animation isn't needed under the beams */
#hero.vx-hero::after{display:none;animation:none}
.vx-bg-fade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 45% 55% at 25% 52%,rgba(10,10,10,.45) 0%,transparent 75%),linear-gradient(180deg,transparent 80%,rgba(10,10,10,.85) 100%)}

.vx-hero-inner>*{min-width:0}

/* entrance */
.vx-fade{opacity:0;animation:vx-fade-up .8s cubic-bezier(.22,1,.36,1) forwards}
.vx-d1{animation-delay:.1s}.vx-d3{animation-delay:.9s}.vx-d4{animation-delay:1.05s}.vx-d5{animation-delay:1.2s}.vx-d6{animation-delay:1.35s}
@keyframes vx-fade-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* left */
.vx-hero-left{display:flex;flex-direction:column;gap:1.7rem}
.vx-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(250,243,225,.12);background:rgba(250,243,225,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:.72rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:rgba(250,243,225,.85)}
.vx-badge-dot{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--orange);animation:vx-ping 1.8s infinite}
.vx-badge-stars{color:#ffc857;letter-spacing:1px}
@keyframes vx-ping{0%{box-shadow:0 0 0 0 rgba(255,85,85,.6)}70%{box-shadow:0 0 0 8px rgba(255,85,85,0)}100%{box-shadow:0 0 0 0 rgba(255,85,85,0)}}

.vx-title{font-family:var(--font-display);font-weight:800;font-size:clamp(2.3rem,4.2vw,3.9rem);line-height:1.02;letter-spacing:-.035em;color:var(--cream);margin:0}
/* paused while the cinematic intro overlay is up (see vxReady in hero-v2.js) */
.vx-wait .vx-c,.vx-wait .vx-fade{animation-play-state:paused !important}

/* Heading: masked letter reveal — each word is a mask, letters rise + untilt into place one by one */
.vx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .14em;margin:-.04em -.02em -.14em}
.vx-w.vx-grad{white-space:nowrap;color:#ff6f5e}
.vx-c{display:inline-block;transform:translateY(110%) rotate(9deg);transform-origin:0 100%;animation:vx-char .9s cubic-bezier(.2,.9,.25,1) forwards;animation-delay:calc(.15s + var(--ci) * 32ms)}
@keyframes vx-char{to{transform:none}}
.vx-grad .vx-c{animation:vx-char .9s cubic-bezier(.2,.9,.25,1) forwards,vx-glint 5s ease-in-out infinite;animation-delay:calc(.15s + var(--ci) * 32ms),calc(1.8s + var(--gi) * 60ms)}
@keyframes vx-glint{0%,8%,100%{filter:none}4%{filter:brightness(1.6) drop-shadow(0 0 14px rgba(255,120,100,.7))}}

.vx-sub{max-width:540px;font-size:1.08rem;line-height:1.7;color:rgba(250,243,225,.62);margin:0}
.vx-sub strong{color:var(--cream);font-weight:700}
.vx-typed{display:block;margin-top:.35rem;min-height:1.7em;color:var(--orange);font-weight:700}
.vx-typed #typewriter-cursor{color:var(--orange);animation:vx-blink 1s steps(1) infinite}
@keyframes vx-blink{50%{opacity:0}}

.vx-ctas{display:flex;flex-wrap:wrap;gap:1rem}
.vx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem 1.9rem;border-radius:999px;font-family:var(--font-body);font-size:.95rem;font-weight:700;transition:transform .25s ease,background .25s ease,box-shadow .25s ease,border-color .25s ease}
.vx-btn svg{width:16px;height:16px;transition:transform .25s ease}
.vx-btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 36px -8px rgba(255,85,85,.65),inset 0 1px 0 rgba(255,255,255,.25)}
.vx-btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 44px -8px rgba(255,85,85,.8),inset 0 1px 0 rgba(255,255,255,.25)}
.vx-btn-primary:hover svg{transform:translateX(4px)}
.vx-btn-ghost{color:var(--cream);border:1px solid rgba(250,243,225,.14);background:rgba(250,243,225,.05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vx-btn-ghost:hover{background:rgba(250,243,225,.1);border-color:rgba(250,243,225,.28)}

.vx-proof{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.vx-avatars{display:flex}
.vx-avatars span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;border:2px solid #0a0507;margin-left:-10px}
.vx-avatars span:first-child{margin-left:0}
.vx-avatars span:nth-child(1){background:linear-gradient(135deg,#ff5555,#ff8a5c)}
.vx-avatars span:nth-child(2){background:linear-gradient(135deg,#7c5cff,#b18cff)}
.vx-avatars span:nth-child(3){background:linear-gradient(135deg,#1fa971,#a3d78a)}
.vx-avatars span:nth-child(4){background:linear-gradient(135deg,#2d7ff9,#64b5ff)}
.vx-avatars span:nth-child(5){background:#2a1a1c;color:var(--cream)}
.vx-proof-text{font-size:.85rem;line-height:1.4;color:rgba(250,243,225,.55);text-align:left}
.vx-proof-text b{color:var(--cream)}
.vx-proof-text .vx-stars{color:#ffc857;letter-spacing:1px}


/* Text Rotate pill (21st.dev · danielpetho) */
.vx-rot-line{display:flex;flex-wrap:wrap;align-items:center;gap:.25em .4em;margin-top:-.4rem;font-family:var(--font-display);font-weight:800;font-size:clamp(1.4rem,2.3vw,2.05rem);letter-spacing:-.03em;line-height:1.1;color:rgba(250,243,225,.55)}
.vx-rot{position:relative;display:inline-flex;overflow:hidden;padding:.12em .42em .18em;border-radius:.34em;background:linear-gradient(135deg,#ff5555 0%,#ff6b5a 55%,#ff8a5c 100%);color:#fff;white-space:nowrap;box-shadow:0 14px 40px -12px rgba(255,85,85,.75),inset 0 1px 0 rgba(255,255,255,.3);transition:width .6s cubic-bezier(.34,1.35,.64,1)}
.vx-rot::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-100%);animation:vx-sweep 3s 1.6s ease-in-out infinite;pointer-events:none}
@keyframes vx-sweep{60%,100%{transform:translateX(100%)}}
.vx-rot-word{display:inline-flex}
.vx-rot .ch{display:inline-block;transform:translateY(110%);opacity:0;transition:transform .6s cubic-bezier(.34,1.5,.64,1),opacity .3s ease}
.vx-rot .ch.in{transform:none;opacity:1}
.vx-rot .ch.out{transform:translateY(-125%);opacity:0;transition:transform .38s cubic-bezier(.55,0,.75,.2),opacity .3s ease}
.vx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* Sub-copy: word-by-word "text generate" reveal + keyword underline draw */
.vx-gen .vx-tw{display:inline;opacity:0;filter:blur(8px);transition:opacity .5s ease,filter .5s ease;transition-delay:calc(var(--i) * 45ms)}
.vx-gen.go .vx-tw{opacity:1;filter:blur(0)}
.vx-gen strong{background:linear-gradient(90deg,#ff5555,#ff8a5c) no-repeat 0 100%/0 2px;padding-bottom:2px;transition:background-size .6s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--u) * 180ms + var(--d, 0ms))}
.vx-gen.go strong{background-size:100% 2px}

/* desktop: pill stays on the same line, right column (character/orbit) scaled down to make room */
@media (min-width:1025px){
  .vx-hero-inner{grid-template-columns:1.2fr .8fr;gap:2rem}
  .vx-rot-line{flex-wrap:nowrap;white-space:nowrap}
  .vx-hero .hero-char-wrap{max-width:460px}
}

/* ── responsive (old .hero-inner stacks + centers at 900px) ── */
@media (max-width:900px){
  .vx-badge{align-self:center}
  .vx-sub{margin:0 auto}
  .vx-ctas,.vx-proof{justify-content:center}
}
@media (max-width:767px){
  .vx-hero-left{gap:1.2rem;align-items:flex-start}
  .vx-badge{align-self:flex-start}
  .vx-sub{margin:0}
  .vx-ctas,.vx-proof{justify-content:flex-start}
  .vx-ctas{width:100%}
  .vx-title{font-size:clamp(2rem,9vw,2.9rem);font-family:"Unbounded",system-ui,-apple-system,sans-serif}
  .vx-sub{font-size:.98rem;transform:none}
    .vx-rot-line{font-size:clamp(1.35rem,6.4vw,1.9rem);margin-top:-.2rem;font-family:"Unbounded",system-ui,-apple-system,sans-serif}
}
@media (max-width:480px){
  .vx-badge{font-size:.58rem;letter-spacing:.8px;padding:.45rem .8rem}
  .vx-ctas{flex-direction:column}
  .vx-btn{width:100%;padding:.95rem 1.4rem}
}
@media (prefers-reduced-motion:reduce){
  .vx-fade{opacity:1;transform:none;animation:none}
  .vx-c,.vx-grad .vx-c{animation:none;transform:none}
  .vx-badge-dot,.vx-rot::after,  .vx-rot,.vx-rot .ch{transition:none}
  .vx-gen .vx-tw{opacity:1;filter:none;transition:none}
  .vx-gen strong{background-size:100% 2px;transition:none}
}

/* top ticker bar: match the hero background so no cream strip shows behind the nav */
.ticker-wrap{background:#0a0a0a !important;border-top:0 !important;border-bottom:0 !important}