/* ============================================================
   Vrexolu — "Neon Grid"
   Dark cyberpunk design system (pt-BR, LTR)

   One canvas, two lights:
     · the navy night       (body, cards, splits)
     · cyan + magenta neon  (accents, glows, the featured "neon glass")
   Cyan is sampled from the logo mark (#02d0f8) and pushed brighter for
   glow work; magenta is its complement and only ever appears as light —
   gradients, glows, hover states — never as a flat fill behind text.
   ============================================================ */

:root {
  /* base — navy night */
  --vx-bg: #060a1c;
  --vx-bg-2: #0a1030;
  --vx-navy-1: #0c1440;
  --vx-navy-2: #111b52;

  /* neon */
  --vx-cyan: #22e4ff;
  --vx-cyan-logo: #02d0f8;
  --vx-cyan-hi: #8ff4ff;
  --vx-magenta: #ff2bd6;
  --vx-magenta-hi: #ff7ae6;
  --vx-violet: #7b5cff;
  --vx-grad: linear-gradient(135deg, #22e4ff 0%, #7b5cff 52%, #ff2bd6 100%);
  --vx-ink: #050816; /* text that sits on a neon fill */

  /* text on the navy canvas — every level clears 4.5:1 on the glass cards */
  --vx-tx: rgba(222, 234, 255, .8);
  --vx-tx-strong: #eef5ff;
  --vx-muted: #a9b8de;
  --vx-dim: #8494c2;

  /* lines / glass */
  --vx-line: rgba(143, 244, 255, .14);
  --vx-line-soft: rgba(143, 244, 255, .07);
  --vx-glass: rgba(120, 160, 255, .035);
  --vx-glass-2: rgba(120, 160, 255, .065);

  /* the featured surface: deep navy fill inside a cyan→magenta border */
  --vx-feat-fill: linear-gradient(160deg, rgba(19, 30, 92, .96), rgba(8, 12, 40, .98));

  /* radii — kept tight; soft pills read as consumer-app, not terminal */
  --vxr-sm: 6px;
  --vxr-md: 10px;
  --vxr-lg: 14px;
  --vxr-xl: 20px;
  --vxr-pill: 9999px;

  /* shadow / glow */
  --vxs-sh: 0 30px 80px -30px rgba(0, 0, 0, .9);
  --vxs-glow: 0 0 28px -4px rgba(34, 228, 255, .55);
  --vxs-glow-mg: 0 0 34px -4px rgba(255, 43, 214, .6);
  --vxs-neon: 0 0 0 1px rgba(34, 228, 255, .08), 0 0 46px -12px rgba(34, 228, 255, .5), 0 24px 70px -30px rgba(255, 43, 214, .45);

  /* fonts — all three carry the full Portuguese diacritic set */
  --vxf-disp: 'Chakra Petch', 'Segoe UI', sans-serif;
  --vxf-body: 'Exo 2', 'Segoe UI', sans-serif;
  --vxf-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --vx-mw: 1240px;
  --vx-nav-h: 74px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--vxf-body);
  background: var(--vx-bg);
  color: var(--vx-tx);
  line-height: 1.7;
  padding-block-start: var(--vx-nav-h);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

::selection { background: rgba(255, 43, 214, .38); color: #fff; }

/* ---- navy night: cyan bloom top-left, magenta bloom bottom-right ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(70% 55% at 8% -5%, rgba(34, 228, 255, .16), transparent 60%),
    radial-gradient(60% 50% at 100% 105%, rgba(255, 43, 214, .16), transparent 62%),
    radial-gradient(50% 40% at 70% 30%, rgba(123, 92, 255, .08), transparent 70%),
    linear-gradient(180deg, #080d26 0%, #060a1c 45%, #04071a 100%);
}
/* perspective neon floor — fixed, faded out long before it reaches the copy */
body::after {
  content: "";
  position: fixed;
  inset-inline: -50%;
  bottom: -12vh;
  height: 62vh;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(34, 228, 255, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 43, 214, .16) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 80%);
  mask-image: linear-gradient(to top, #000 0%, transparent 80%);
  opacity: .32;
}

/* scanlines */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .55) 0 1px, transparent 1px 3px);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--vx-cyan-hi); outline-offset: 3px; }

.wrap { max-width: var(--vx-mw); margin-inline: auto; padding-inline: 24px; }

/* a11y helpers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-block-start: -60px; inset-inline-start: 16px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: 0 0 var(--vxr-sm) var(--vxr-sm);
  background: var(--vx-cyan); color: var(--vx-ink);
  font-family: var(--vxf-disp); font-weight: 600; font-size: .9rem;
  transition: inset-block-start .2s;
}
.skip-link:focus { inset-block-start: 0; }

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: var(--vxf-disp);
  color: var(--vx-tx-strong);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
}
.display {
  font-family: var(--vxf-disp);
  font-weight: 400;
  line-height: 1.18;
  color: var(--vx-tx-strong);
}
/* Emphasis is light, not weight alone: the bold run takes the neon gradient,
   the .hi run glows cyan. Both stay above 4.5:1 against the navy. */
.display b {
  font-weight: 700;
  background: var(--vx-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.display .hi { font-weight: 500; color: var(--vx-cyan-hi); text-shadow: 0 0 22px rgba(34, 228, 255, .55); }
h1.display { font-size: clamp(2.15rem, 4.6vw, 3.5rem); }
h2.display { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

.eyebrow {
  font-family: var(--vxf-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vx-muted);
}
.eyebrow.acc { color: var(--vx-cyan-hi); }
.eyebrow.acc::before { content: "// "; color: var(--vx-magenta-hi); }

.lede { color: var(--vx-muted); font-size: 1.04rem; max-width: 50ch; }

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--vxf-disp);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .03em;
  padding: 13px 26px;
  border-radius: var(--vxr-sm);
  border: 1px solid transparent;
  transition: transform .25s, box-shadow .25s, background .25s, color .25s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--vx-cyan); color: var(--vx-ink); box-shadow: var(--vxs-glow); }
.btn-primary:hover { transform: translateY(-2px); background: var(--vx-magenta-hi); box-shadow: var(--vxs-glow-mg); }
.btn-ghost {
  background: var(--vx-glass-2);
  color: var(--vx-tx-strong);
  border-color: var(--vx-line);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--vx-cyan); background: rgba(34, 228, 255, .12); }

/* ---- the featured surface: "neon glass" ----
   Applied by .hero-right, .form-card.solo, .cap.feat, .gcard.mid, .cta-band
   and .calc-results__final. The border is the gradient itself (padding-box /
   border-box double background), so it follows the radius exactly. */
.hero-right,
.form-card.solo,
.cap.feat,
.gcard.mid,
.cta-band,
.calc-results__final {
  border: 1px solid transparent;
  background: var(--vx-feat-fill) padding-box, var(--vx-grad) border-box;
  box-shadow: var(--vxs-neon);
}

/* ---- HUD corner brackets on the standard cards ---- */
.cap::before,
.voice::before,
.step::before,
.gcard::before,
.post::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(var(--vx-cyan), var(--vx-cyan)) top left / 16px 2px no-repeat,
    linear-gradient(var(--vx-cyan), var(--vx-cyan)) top left / 2px 16px no-repeat,
    linear-gradient(var(--vx-magenta), var(--vx-magenta)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--vx-magenta), var(--vx-magenta)) bottom right / 2px 16px no-repeat;
  opacity: .75;
  transition: opacity .3s;
}
.cap:hover::before, .voice:hover::before, .gcard:hover::before, .post:hover::before { opacity: 1; }

section { position: relative; }
.sect { padding-block: 84px; }
.sect-head { max-width: 680px; margin-inline: auto; margin-block-end: 46px; text-align: center; }
.sect-head .eyebrow { display: block; margin-block-end: 14px; }
.sect-head p { color: var(--vx-muted); margin-block-start: 14px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--vx-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(6, 10, 28, .72);
  backdrop-filter: blur(18px);
  border-block-end: 1px solid var(--vx-line-soft);
}
.nav::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 228, 255, .6), rgba(255, 43, 214, .6), transparent);
  opacity: .6;
}
.nav-in {
  width: 100%;
  max-width: var(--vx-mw);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Brand: one word, one colour, one weight. Never split "Vrexolu". */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--vxf-disp);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vx-tx-strong);
}
/* The mark is 1.31:1, not square — fix the height and let the width follow,
   or it gets squeezed. */
.brand img { height: 32px; width: auto; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(34, 228, 255, .55)); }
.brand-name { white-space: nowrap; }

.menu { display: flex; align-items: center; gap: 26px; list-style: none; }
.menu a { font-size: .9rem; color: var(--vx-muted); transition: color .2s, text-shadow .2s; }
.menu a:hover, .menu a.on { color: var(--vx-tx-strong); text-shadow: 0 0 14px rgba(34, 228, 255, .6); }
.menu .btn { padding: 9px 20px; font-size: .84rem; }
.menu a.btn-primary { color: var(--vx-ink); text-shadow: none; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.burger span { width: 22px; height: 2px; background: var(--vx-cyan-hi); border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .burger span:nth-child(2) { opacity: 0; }
.nav.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  border-block: 1px solid var(--vx-line-soft);
  background: rgba(10, 16, 48, .55);
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track { display: inline-flex; gap: 46px; padding-block: 11px; will-change: transform; }
.tk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--vxf-mono);
  font-size: .74rem;
  color: var(--vx-muted);
}
.tk b { color: var(--vx-tx-strong); font-weight: 500; }
.tk .px { color: var(--vx-tx); }
.tk .up { color: #4ef0a6; }
.tk .down { color: #ff6b9a; }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vx-cyan);
  box-shadow: 0 0 10px var(--vx-cyan);
  animation: vxPulse 1.8s ease-in-out infinite;
}
@keyframes vxPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   HERO — navy terminal | neon-glass form
   ============================================================ */
.hero { padding-block: 56px 60px; }
.hero-panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: var(--vxr-xl);
  overflow: hidden;
  border: 1px solid var(--vx-line);
  box-shadow: var(--vxs-sh), 0 0 60px -24px rgba(34, 228, 255, .45);
  position: relative;
}
.hero-left {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(34, 228, 255, .14), transparent 58%),
    linear-gradient(150deg, var(--vx-navy-2), var(--vx-navy-1) 65%, #070c2a);
  padding: 54px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--vxf-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vx-cyan-hi);
  padding: 7px 14px;
  border: 1px solid rgba(34, 228, 255, .35);
  border-radius: var(--vxr-sm);
  background: rgba(34, 228, 255, .08);
  box-shadow: inset 0 0 14px rgba(34, 228, 255, .12);
  margin-block-end: 24px;
}
.hero-chip svg { width: 13px; height: 13px; color: var(--vx-magenta-hi); animation: vxFlicker 4s linear infinite; }
@keyframes vxFlicker {
  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
  20%, 63% { opacity: .25; }
}
.hero h1 { margin-block-end: 20px; }
.hero-left .lede { margin-block-end: 32px; font-size: 1.06rem; }

.stat-rows { display: flex; flex-direction: column; }
.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  border-block-start: 1px solid var(--vx-line-soft);
}
.stat-row:last-child { border-block-end: 1px solid var(--vx-line-soft); }
.stat-row .val {
  font-family: var(--vxf-disp);
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--vx-tx-strong);
  text-shadow: 0 0 20px rgba(34, 228, 255, .35);
  white-space: nowrap; /* "R$ 12,4 bi" must never break before the unit */
}
.stat-row .lbl {
  font-family: var(--vxf-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vx-dim);
  text-align: end;
}

/* hero right — the neon-glass form inset (fill + border from the shared rule) */
.hero-right {
  border-radius: 0;
  padding: 40px 40px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.hero-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(34, 228, 255, .14) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
  pointer-events: none;
}
.hero-right > * { position: relative; }

/* ---- registration form (lives on the neon glass) ---- */
.form-card h2 { font-weight: 600; font-size: 1.32rem; color: var(--vx-tx-strong); }
.form-card .note {
  font-family: var(--vxf-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vx-cyan-hi);
  margin-block: 5px 16px;
}
.reg input[type="text"],
.reg input[type="email"],
.reg input[type="tel"] {
  width: 100%;
  background: rgba(4, 7, 24, .85);
  border: 1px solid rgba(143, 244, 255, .24);
  border-radius: var(--vxr-sm);
  padding: 12px 14px;
  color: var(--vx-tx-strong);
  font-family: var(--vxf-body);
  font-size: .95rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.reg input::placeholder { color: rgba(169, 184, 222, .72); }
.reg input:focus { border-color: var(--vx-cyan); box-shadow: 0 0 0 3px rgba(34, 228, 255, .16), 0 0 18px -2px rgba(34, 228, 255, .45); }
.reg form > div { margin-block-end: 10px; }

/* ---- phone field (intl-tel-input v25) ----------------------------------
   Laid out as a flex row where the country selector is a real item, so
   nothing depends on the padding the library measures in JS (its stylesheet
   loads async, and a width measured before it applies is never redone).
   The field chrome moves off the input and onto .iti so the selector and
   the digits read as one control.

   The library declares its colours as custom properties on :root. Declaring
   them again on .iti wins by inheritance whatever order the two stylesheets
   land in — and also reaches the mobile fullscreen popup, which carries the
   .iti class too. */
.iti {
  --iti-hover-color: rgba(34, 228, 255, .12);
  --iti-border-color: rgba(143, 244, 255, .28);
  --iti-dialcode-color: #a9b8de;
  --iti-dropdown-bg: #0a1030;
  --iti-search-icon-color: #8ff4ff;
  --iti-arrow-color: #8ff4ff;
}
.reg .iti {
  width: 100%;
  display: flex;
  align-items: stretch;
  background: rgba(4, 7, 24, .85);
  border: 1px solid rgba(143, 244, 255, .24);
  border-radius: var(--vxr-sm);
  transition: border-color .2s, box-shadow .2s;
}
.reg .iti:focus-within { border-color: var(--vx-cyan); box-shadow: 0 0 0 3px rgba(34, 228, 255, .16), 0 0 18px -2px rgba(34, 228, 255, .45); }

.iti__country-container {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  border-inline-end: 1px solid rgba(143, 244, 255, .18);
}
.iti__selected-dial-code { color: var(--vx-tx-strong); }

/* !important is load-bearing: it overrides the inline padding-left the
   library writes on init and on every country change. */
.iti > input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  padding-inline: 14px !important;
}
.iti > input[type="tel"]:focus { box-shadow: none; }

.iti__dropdown-content { color: var(--vx-tx-strong); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8), 0 0 24px -8px rgba(34, 228, 255, .4); }
.iti__search-input { background: transparent; color: var(--vx-tx-strong); padding-block: 10px; font-family: var(--vxf-body); outline: none; }
.iti__search-input::placeholder { color: var(--vx-dim); }

/* Digits are LTR in every locale. */
#phone { direction: ltr; text-align: left; }

.phone-error {
  display: none;
  margin-block-start: 6px;
  font-size: .8rem;
  line-height: 1.6;
  color: #ff8fb4;
}
.phone-error.on { display: block; }

#submit-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--vxr-sm);
  background: var(--vx-cyan);
  color: var(--vx-ink);
  font-family: var(--vxf-disp);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-block-start: 4px;
  transition: transform .2s, box-shadow .2s, background .2s;
  box-shadow: var(--vxs-glow);
}
#submit-btn:hover { transform: translateY(-2px); background: var(--vx-magenta-hi); box-shadow: var(--vxs-glow-mg); }
.form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--vx-muted);
  margin-block-start: 14px;
}
.form-tip svg { width: 16px; height: 16px; color: var(--vx-cyan); flex-shrink: 0; }

.form-card .trust { margin-block-start: 22px; border-block-start: 1px solid var(--vx-line); }
.trust-item { display: flex; align-items: center; gap: 13px; padding-block: 14px; border-block-end: 1px solid var(--vx-line-soft); }
.trust-item:last-child { border-block-end: none; }
.trust-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--vxr-sm);
  background: rgba(34, 228, 255, .1);
  border: 1px solid rgba(34, 228, 255, .3);
}
.trust-ico svg { width: 18px; height: 18px; color: var(--vx-cyan-hi); }
.trust-item b { display: block; font-family: var(--vxf-disp); font-weight: 600; font-size: .96rem; color: var(--vx-tx-strong); line-height: 1.4; }
.trust-item span { font-size: .78rem; color: var(--vx-muted); }

/* ============================================================
   VOICES (text testimonials)
   ============================================================ */
.voices-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.voice {
  display: flex;
  flex-direction: column;
  border-radius: var(--vxr-lg);
  border: 1px solid var(--vx-line);
  background: linear-gradient(180deg, var(--vx-glass-2), var(--vx-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.voice:hover { transform: translateY(-5px); border-color: rgba(34, 228, 255, .45); box-shadow: 0 0 40px -16px rgba(34, 228, 255, .5); }
.voice::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--vx-grad);
  opacity: .75;
}
.voice-mark { width: 34px; height: 34px; color: var(--vx-magenta); opacity: .5; margin-block-end: 14px; }
.voice-mark svg { width: 100%; height: 100%; }
.voice .stars { margin-block-end: 14px; }
.voice-qt {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--vx-tx-strong);
  font-weight: 300;
  flex: 1;
  margin-block-end: 20px;
}
.voice-who { display: flex; align-items: center; gap: 13px; padding-block-start: 18px; border-block-start: 1px solid var(--vx-line-soft); }
.voice-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--vxf-disp); font-weight: 700; font-size: .84rem;
  color: var(--vx-ink); background: var(--vx-grad);
}
.voice-name { font-family: var(--vxf-disp); font-weight: 600; font-size: .98rem; color: var(--vx-tx-strong); }
.voice-loc { font-family: var(--vxf-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-cyan-hi); }

.stars { display: flex; gap: 3px; }
.stars svg { width: 15px; height: 15px; color: var(--vx-cyan); filter: drop-shadow(0 0 4px rgba(34, 228, 255, .6)); }

/* ============================================================
   SPLIT (image + copy)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--vxr-xl);
  overflow: hidden;
  border: 1px solid var(--vx-line);
  box-shadow: var(--vxs-sh);
}
.split-media { position: relative; min-height: 380px; overflow: hidden; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(34, 228, 255, .06), transparent 40%, rgba(255, 43, 214, .22));
  pointer-events: none;
}
.split-copy {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(255, 43, 214, .09), transparent 60%),
    linear-gradient(160deg, var(--vx-navy-2), var(--vx-navy-1));
}
.split-copy .eyebrow { margin-block-end: 14px; }
.split-copy h2 { margin-block-end: 18px; }
.split-copy p { color: var(--vx-muted); margin-block-end: 14px; }
.split-copy p:last-child { margin-block-end: 0; }
.split.reverse .split-media { order: 2; }

/* ============================================================
   CAPABILITY CARDS
   ============================================================ */
.caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cap {
  border-radius: var(--vxr-lg);
  border: 1px solid var(--vx-line);
  background: linear-gradient(180deg, var(--vx-glass-2), var(--vx-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  position: relative;
}
.cap:hover { transform: translateY(-4px); border-color: rgba(34, 228, 255, .45); box-shadow: 0 0 40px -16px rgba(34, 228, 255, .5); }
.cap.feat:hover { box-shadow: var(--vxs-neon), 0 0 50px -10px rgba(255, 43, 214, .45); }
.cap-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--vxr-md);
  border: 1px solid rgba(34, 228, 255, .3);
  background: rgba(34, 228, 255, .1);
  box-shadow: inset 0 0 16px rgba(34, 228, 255, .15);
  margin-block-end: 18px;
}
.cap-ico svg { width: 22px; height: 22px; color: var(--vx-cyan-hi); }
.cap.feat .cap-ico { border-color: rgba(255, 43, 214, .45); background: rgba(255, 43, 214, .12); box-shadow: inset 0 0 16px rgba(255, 43, 214, .2); }
.cap.feat .cap-ico svg { color: var(--vx-magenta-hi); }
.cap h3 { font-size: 1.12rem; font-weight: 600; margin-block-end: 10px; }
.cap p { color: var(--vx-muted); font-size: .94rem; line-height: 1.75; }

/* ============================================================
   METRICS
   ============================================================ */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--vx-line);
  border-radius: var(--vxr-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--vx-glass-2), var(--vx-glass));
  box-shadow: 0 0 50px -24px rgba(34, 228, 255, .45);
}
.metric { padding: 34px 26px; text-align: center; border-inline-end: 1px solid var(--vx-line-soft); }
.metric:last-child { border-inline-end: none; }
.metric .val {
  font-family: var(--vxf-disp);
  font-weight: 500;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  color: var(--vx-tx-strong);
  text-shadow: 0 0 22px rgba(34, 228, 255, .35);
}
.metric .val b { font-weight: 500; color: var(--vx-magenta-hi); text-shadow: 0 0 18px rgba(255, 43, 214, .5); }
.metric .lbl { font-family: var(--vxf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vx-dim); margin-block-start: 8px; }

.agg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-block-end: 30px; }
.agg { border: 1px solid var(--vx-line); border-radius: var(--vxr-md); padding: 26px 24px; background: var(--vx-glass); }
.agg .v { font-family: var(--vxf-disp); font-weight: 500; font-size: 2.2rem; color: var(--vx-tx-strong); }
.agg .v b { color: var(--vx-cyan-hi); font-weight: 500; text-shadow: 0 0 16px rgba(34, 228, 255, .5); }
.agg .l { color: var(--vx-muted); font-size: .9rem; margin-block-start: 6px; }

/* ============================================================
   STEPS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.step {
  border: 1px solid var(--vx-line);
  border-radius: var(--vxr-lg);
  padding: 28px 26px;
  background: linear-gradient(180deg, var(--vx-glass-2), var(--vx-glass));
  position: relative;
}
.step-dot {
  position: absolute;
  inset-block-start: 28px;
  inset-inline-end: 26px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--vx-grad); box-shadow: var(--vxs-glow);
}
.step .num { font-family: var(--vxf-mono); font-size: .74rem; letter-spacing: .1em; color: var(--vx-cyan-hi); }
.step h3 { font-size: 1.08rem; font-weight: 600; margin-block: 8px; }
.step p { color: var(--vx-muted); font-size: .92rem; }

/* ============================================================
   RESULTS CAROUSEL
   ============================================================ */
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; padding-block: 8px; }
.carousel-track { display: flex; gap: 20px; transition: transform .5s cubic-bezier(.6, .05, .1, 1); }
.gcard {
  flex: 0 0 calc((100% - 40px) / 3);
  border-radius: var(--vxr-lg);
  border: 1px solid var(--vx-line);
  background: linear-gradient(180deg, var(--vx-glass-2), var(--vx-glass));
  padding: 30px 28px;
  transition: border-color .3s, transform .3s;
  position: relative;
}
.gcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 16px; }
.gbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--vxf-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vx-cyan-hi);
  padding: 5px 10px;
  border-radius: var(--vxr-sm);
  border: 1px solid rgba(34, 228, 255, .3);
  background: rgba(34, 228, 255, .1);
}
.gbadge svg { width: 11px; height: 11px; }
.gcard .tagline { font-family: var(--vxf-mono); font-size: .64rem; color: var(--vx-dim); }
.gsum { font-family: var(--vxf-disp); font-weight: 500; font-size: 2.5rem; color: var(--vx-tx-strong); text-shadow: 0 0 22px rgba(34, 228, 255, .4); }
.gper { font-family: var(--vxf-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--vx-cyan-hi); margin-block-end: 14px; }
.gcard.mid .gper { color: var(--vx-magenta-hi); }
.gspark { width: 100%; height: 40px; display: block; margin-block-end: 16px; overflow: visible; }
.gspark .ln { fill: none; stroke: var(--vx-cyan); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(34, 228, 255, .8)); }
.gcard.mid .gspark .ln { stroke: var(--vx-magenta); filter: drop-shadow(0 0 4px rgba(255, 43, 214, .8)); }
.gqt { font-size: .94rem; color: var(--vx-muted); line-height: 1.75; margin-block-end: 18px; }
.gwho { display: flex; align-items: center; gap: 12px; }
.gav {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--vxf-disp); font-weight: 700; font-size: .82rem;
  color: var(--vx-ink); background: var(--vx-grad);
}
.gnm { font-family: var(--vxf-disp); font-weight: 600; font-size: .96rem; color: var(--vx-tx-strong); }
.gcity { font-family: var(--vxf-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--vx-dim); }

.gcta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-block-start: 20px;
  padding: 12px 20px;
  font-family: var(--vxf-disp); font-weight: 600; font-size: .92rem; letter-spacing: .03em;
  border-radius: var(--vxr-sm);
  border: 1px solid transparent;
  background: var(--vx-cyan);
  color: var(--vx-ink);
  box-shadow: var(--vxs-glow);
  transition: transform .25s, box-shadow .25s, background .25s;
}
.gcta svg { width: 15px; height: 15px; }
.gcta:hover { transform: translateY(-2px); background: var(--vx-magenta-hi); box-shadow: var(--vxs-glow-mg); }

.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-block-start: 32px; }
.cbtn {
  width: 46px; height: 46px; border-radius: var(--vxr-sm);
  display: grid; place-items: center;
  background: var(--vx-glass-2);
  border: 1px solid var(--vx-line);
  color: var(--vx-tx-strong);
  transition: .25s;
}
.cbtn:hover { border-color: var(--vx-cyan); background: rgba(34, 228, 255, .14); box-shadow: var(--vxs-glow); }
.cbtn svg { width: 18px; height: 18px; }
.dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vx-line); border: none; transition: .25s; padding: 0; }
.dot.on { width: 26px; border-radius: var(--vxr-pill); background: var(--vx-grad); box-shadow: var(--vxs-glow); }

.disclaimer { font-size: .8rem; color: var(--vx-dim); text-align: center; max-width: 780px; margin-inline: auto; margin-block-start: 30px; line-height: 1.75; }

/* ============================================================
   CTA
   ============================================================ */
.cta-band {
  border-radius: var(--vxr-xl);
  padding: 64px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34, 228, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 228, 255, .08) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(90% 90% at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(90% 90% at 50% 0%, #000, transparent 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { margin-block-end: 14px; }
.cta-band p { color: var(--vx-muted); margin-inline: auto; margin-block-end: 28px; max-width: 50ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-block-start: 1px solid var(--vx-line-soft); padding-block-start: 68px; margin-block-start: 40px; background: linear-gradient(180deg, transparent, rgba(4, 7, 22, .7)); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.footer-brand .brand { margin-block-end: 16px; }
.footer-brand p { color: var(--vx-muted); font-size: .92rem; max-width: 40ch; }
.footer-col h2 { font-family: var(--vxf-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--vx-dim); font-weight: 500; margin-block-end: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: var(--vx-muted); font-size: .92rem; transition: color .2s, text-shadow .2s; }
.footer-col a:hover { color: var(--vx-cyan-hi); text-shadow: 0 0 12px rgba(34, 228, 255, .6); }
.footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-block-start: 1px solid var(--vx-line-soft);
  margin-block-start: 48px; padding-block: 22px;
  font-size: .84rem; color: var(--vx-dim);
}
.footer-bar .lnk { display: flex; gap: 20px; }
.footer-bar a:hover { color: var(--vx-cyan-hi); }

.risk { background: rgba(4, 7, 22, .85); border-block-start: 1px solid var(--vx-line-soft); padding-block: 22px; }
.risk p { font-size: .78rem; color: var(--vx-dim); line-height: 1.75; max-width: var(--vx-mw); }

/* ============================================================
   REVEAL
   ============================================================ */
/* Uses the standalone `translate` property, not `transform`, so the reveal
   never fights the cards' hover lift; the hover transitions are restated
   here because this rule's `transition` replaces theirs. */
.vx-surge {
  opacity: 0;
  translate: 0 22px;
  filter: blur(4px);
  transition: opacity .7s ease, translate .75s cubic-bezier(.2, .7, .2, 1), filter .6s ease,
    transform .3s, border-color .3s, box-shadow .3s;
}
.vx-surge.on { opacity: 1; translate: none; filter: none; animation: vxSurge .9s ease-out 1; }
/* neon "ignition": a card's own glow holds off, then powers up to its value */
@keyframes vxSurge {
  0%, 30% { box-shadow: 0 0 0 0 rgba(34, 228, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .vx-surge, .vx-surge.on { opacity: 1; translate: none; filter: none; transition: none; animation: none; }
  .dot-live, .hero-chip svg { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   INNER PAGE COMPONENTS
   ============================================================ */
.page-head { text-align: center; max-width: 800px; margin-inline: auto; padding-block: 20px 8px; }
.page-head .eyebrow { display: block; margin-block-end: 14px; }
.page-head p { color: var(--vx-muted); margin-inline: auto; margin-block-start: 16px; max-width: 64ch; }
.page-head .updated { font-family: var(--vxf-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vx-dim); margin-block-start: 14px; }

/* Capped at the photos' intrinsic 800px width so the image fills the frame
   exactly; height follows the image, so nothing is ever stretched. */
.media-frame { max-width: 800px; margin-inline: auto; border-radius: var(--vxr-xl); overflow: hidden; border: 1px solid var(--vx-line); box-shadow: var(--vxs-sh), 0 0 60px -26px rgba(34, 228, 255, .5); position: relative; }
.media-frame img { width: 100%; height: auto; }
.media-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(34, 228, 255, .06), transparent 45%, rgba(255, 43, 214, .18)); pointer-events: none; }

.city-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.city-chip { font-family: var(--vxf-mono); font-size: .76rem; letter-spacing: .06em; color: var(--vx-tx-strong); padding: 9px 20px; border-radius: var(--vxr-sm); border: 1px solid rgba(34, 228, 255, .3); background: rgba(34, 228, 255, .06); box-shadow: inset 0 0 14px rgba(34, 228, 255, .08); }

.cap.team { text-align: center; }
.cap.team .role { font-family: var(--vxf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vx-cyan-hi); display: block; margin-block-end: 10px; }
.cap.team .av {
  width: 58px; height: 58px; border-radius: 50%;
  margin-inline: auto; margin-block-end: 16px;
  display: grid; place-items: center;
  font-family: var(--vxf-disp); font-weight: 700; color: var(--vx-ink);
  background: var(--vx-grad); box-shadow: var(--vxs-glow);
}

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.post { display: flex; flex-direction: column; border-radius: var(--vxr-lg); border: 1px solid var(--vx-line); background: linear-gradient(180deg, var(--vx-glass-2), var(--vx-glass)); padding: 28px 26px; transition: transform .3s, border-color .3s, box-shadow .3s; position: relative; }
.post:hover { transform: translateY(-4px); border-color: rgba(34, 228, 255, .45); box-shadow: 0 0 40px -16px rgba(34, 228, 255, .5); }
.post-tag { align-self: flex-start; font-family: var(--vxf-mono); font-size: .6rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--vxr-sm); margin-block-end: 14px; border: 1px solid var(--vx-line); }
.post-tag.ai { color: var(--vx-magenta-hi); background: rgba(255, 43, 214, .1); border-color: rgba(255, 43, 214, .32); }
.post-tag.crypto { color: var(--vx-cyan-hi); background: rgba(34, 228, 255, .1); border-color: rgba(34, 228, 255, .3); }
.post h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.45; margin-block-end: 10px; }
.post p { color: var(--vx-muted); font-size: .94rem; line-height: 1.75; flex: 1; }
.post-meta { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--vx-line-soft); font-family: var(--vxf-mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--vx-dim); }

/* FAQ accordion — WAI-ARIA APG pattern: the button lives INSIDE the heading,
   so the document outline and the disclosure semantics are both correct. */
.faq-list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--vx-line); border-radius: var(--vxr-md); background: linear-gradient(180deg, var(--vx-glass-2), var(--vx-glass)); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq-item:hover { border-color: rgba(34, 228, 255, .4); }
.faq-item.open { border-color: rgba(34, 228, 255, .5); box-shadow: 0 0 36px -16px rgba(34, 228, 255, .55); }
.faq-h { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%;
  padding: 20px 24px;
  background: none; border: none;
  font-family: var(--vxf-disp); font-size: 1.02rem; font-weight: 500;
  color: var(--vx-tx-strong);
  text-align: start;
  line-height: 1.5;
}
.faq-q:focus-visible { outline: 2px solid var(--vx-cyan-hi); outline-offset: -3px; }
.faq-q svg { width: 18px; height: 18px; color: var(--vx-cyan-hi); flex-shrink: 0; transition: transform .3s; }
.faq-item.open .faq-q svg { transform: rotate(180deg); color: var(--vx-magenta-hi); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-item.open .faq-a { max-height: 520px; }
.faq-a p { padding: 0 24px 20px; color: var(--vx-muted); font-size: .96rem; line-height: 1.85; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.info-col { display: flex; flex-direction: column; gap: 20px; }
.info-media { border-radius: var(--vxr-lg); overflow: hidden; border: 1px solid var(--vx-line); box-shadow: 0 0 50px -24px rgba(34, 228, 255, .45); }
.info-row { display: flex; align-items: flex-start; gap: 14px; }
.info-ico { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--vxr-md); border: 1px solid rgba(34, 228, 255, .3); background: rgba(34, 228, 255, .1); }
.info-ico svg { width: 20px; height: 20px; color: var(--vx-cyan-hi); }
.info-row h3 { font-size: 1rem; font-weight: 600; margin-block-end: 3px; }
.info-row p { color: var(--vx-muted); font-size: .92rem; }
.info-col > p { color: var(--vx-muted); }
.reg-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.reg-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--vx-muted); font-size: .97rem; }
.reg-list svg { width: 20px; height: 20px; color: var(--vx-cyan); flex-shrink: 0; margin-block-start: 3px; filter: drop-shadow(0 0 4px rgba(34, 228, 255, .6)); }

/* No overflow:hidden here — it would clip the country dropdown, which is
   absolutely positioned inside the form. The dot layer takes the corner
   radius itself instead. */
.form-card.solo {
  border-radius: var(--vxr-lg);
  color: var(--vx-tx);
  padding: 36px 34px;
  position: relative;
}
.form-card.solo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(34, 228, 255, .14) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
  pointer-events: none;
}
.form-card.solo > * { position: relative; }

.legal { max-width: 860px; margin-inline: auto; }
.legal h2 { font-family: var(--vxf-disp); font-size: 1.28rem; font-weight: 600; color: var(--vx-tx-strong); margin-block: 34px 12px; }
.legal h2:first-child { margin-block-start: 0; }
.legal p { color: var(--vx-muted); font-size: .97rem; line-height: 1.9; margin-block-end: 12px; }
.legal ul { color: var(--vx-muted); font-size: .97rem; line-height: 1.9; margin-block-end: 12px; margin-inline-start: 20px; }
.legal a { color: var(--vx-cyan-hi); }

/* standalone centred notice (thanks / 404) */
.notice { max-width: 640px; margin-inline: auto; text-align: center; padding-block: 60px; }
.notice .ico { width: 76px; height: 76px; margin-inline: auto; margin-block-end: 26px; display: grid; place-items: center; border-radius: var(--vxr-lg); background: rgba(34, 228, 255, .1); border: 1px solid rgba(34, 228, 255, .35); box-shadow: var(--vxs-glow); }
.notice .ico svg { width: 34px; height: 34px; color: var(--vx-cyan-hi); }
.notice p { color: var(--vx-muted); margin-block-start: 16px; }
.notice .btn { margin-block-start: 30px; }

/* scrollbar */
html { scrollbar-color: rgba(34, 228, 255, .45) var(--vx-bg); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--vx-bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--vx-cyan), var(--vx-magenta)); border-radius: 10px; border: 2px solid var(--vx-bg); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero-panel { grid-template-columns: 1fr; }
  .hero-left { padding: 44px 34px; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .split-media { min-height: 260px; }
  .voices-row { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .caps-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-inline-end: none; }
  .metric:nth-child(1), .metric:nth-child(2) { border-block-end: 1px solid var(--vx-line-soft); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .agg-row { grid-template-columns: 1fr; }
  .gcard { flex: 0 0 calc((100% - 20px) / 2); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .blog-grid { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  :root { --vx-nav-h: 66px; }
  .menu { display: none; }
  .burger { display: flex; }
  .nav.open .menu {
    display: flex;
    position: absolute;
    inset-block-start: var(--vx-nav-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 24px 24px;
    background: rgba(6, 10, 28, .97);
    backdrop-filter: blur(18px);
    border-block-end: 1px solid var(--vx-line);
    box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8);
  }
  .nav.open .menu a { padding-block: 10px; font-size: .98rem; }
  .nav.open .menu .btn { justify-content: center; margin-block-start: 8px; }
  .sect { padding-block: 60px; }
  .hero-left { padding: 38px 24px; }
  .hero-right { padding: 30px 24px; }
  .caps-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-inline-end: none; border-block-end: 1px solid var(--vx-line-soft); }
  .metric:last-child { border-block-end: none; }
  .steps { grid-template-columns: 1fr; }
  .gcard { flex: 0 0 100%; }
  .split-copy { padding: 38px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bar { flex-direction: column; gap: 12px; text-align: center; }
  .cta-band { padding: 48px 24px; }
  .form-card.solo { padding: 30px 22px; }
  .wrap { padding-inline: 16px; }
  .nav-in { padding-inline: 16px; }
}