/* Vibe Metrix AI. Main stylesheet. Consumes tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--w-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--graphite-900);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-weight: var(--w-head); line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 2.5rem); }
.narrow { max-width: var(--maxw-narrow); }
section { position: relative; }

/* Background field */
.bg-field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 600px at 78% -5%, var(--blue-wash), transparent 60%),
    radial-gradient(700px 500px at 5% 18%, rgba(43,127,255,0.06), transparent 55%);
}
#page { position: relative; z-index: 1; }

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-eyebrow); font-weight: var(--w-mid);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-bright);
  margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--blue); display: inline-block; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.95rem 1.6rem; border-radius: 999px; font-weight: var(--w-mid);
  font-size: 1rem; border: 1px solid transparent; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 30px -8px var(--blue-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px var(--blue-glow); background: var(--blue-deep); }
.btn-ghost { background: rgba(255,255,255,0.04); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--blue); color: #fff; }
.btn-lg { padding: 1.1rem 2rem; font-size: 1.08rem; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); background: rgba(13,15,18,0.72);
  border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.3s;
}
.nav.scrolled { border-bottom-color: var(--line); background: rgba(13,15,18,0.9); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: var(--w-mid); font-size: 1.15rem; letter-spacing: -0.01em; }
.brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 14px var(--blue-glow); }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a { color: var(--ink-soft); font-size: 0.95rem; transition: color 0.2s; }
.nav-links a:hover { color: #fff; }
.nav-cta { display: inline-flex; }
.nav-burger { display: none; background: none; border: 0; color: var(--ink); font-size: 1.5rem; }

/* Hero */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 8vw, 6rem); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { font-size: var(--fs-mega); letter-spacing: -0.04em; font-weight: var(--w-display); line-height: 0.98; max-width: 15ch; }
.hero h1 .hl { color: var(--blue-bright); }
.hero-glow { position: absolute; right: -6%; top: -14%; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, var(--blue-wash), transparent 62%); filter: blur(10px); pointer-events: none; z-index: 0; }
.hero-trust { margin-top: 1.7rem; font-size: 0.86rem; color: var(--ink-mute); display: flex; align-items: center; gap: 0.55rem; }
.ht-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); flex: 0 0 auto; }
.hero-sub { font-size: var(--fs-lead); color: var(--ink-soft); margin: 1.6rem 0 2.2rem; max-width: 36ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero-eyebrow { margin-bottom: 1.6rem; }

/* Hero video card */
.hero-media { position: relative; }
.video-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--graphite-800);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(43,127,255,0.08);
  aspect-ratio: 864 / 1040; max-width: 420px; margin-left: auto;
}
.video-card video, .video-card img { width: 100%; height: 100%; object-fit: cover; }
.video-card .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(13,15,18,0.05), rgba(13,15,18,0.55));
  border: 0; color: #fff; transition: background 0.3s;
}
.video-card .play:hover { background: linear-gradient(180deg, rgba(13,15,18,0.02), rgba(13,15,18,0.4)); }
.play-ring {
  width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue); box-shadow: 0 0 0 10px rgba(43,127,255,0.18), 0 14px 30px -8px var(--blue-glow);
}
.play-ring svg { width: 24px; height: 24px; margin-left: 3px; fill: #fff; }
.video-caption {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  font-size: 0.82rem; color: var(--ink-soft); background: rgba(13,15,18,0.7);
  backdrop-filter: blur(6px); padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid var(--line);
}
.video-card .live-dot {
  position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  background: rgba(13,15,18,0.6); padding: 0.35rem 0.65rem; border-radius: 999px; border: 1px solid var(--line);
}
.video-card .live-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Section shell */
.section { padding: var(--sp-section) 0; }
.section-head { max-width: 760px; margin-bottom: 3rem; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { color: var(--ink-soft); font-size: var(--fs-lead); margin-top: 1.2rem; }
.divider { height: 1px; background: var(--line); }

/* The bleed */
.bleed { background: linear-gradient(180deg, var(--graphite-900), var(--graphite-850)); }
.bleed h2 { font-size: var(--fs-h2); max-width: 24ch; }
.bleed .lead { color: var(--ink-soft); font-size: var(--fs-lead); margin-top: 1.4rem; max-width: 52ch; }
.leak-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 3.2rem; }
.leak {
  padding: 1.6rem 1.4rem; border-radius: var(--radius); background: var(--graphite-800);
  border: 1px solid var(--line); position: relative; overflow: hidden; transition: border-color 0.3s, transform 0.3s var(--ease);
}
.leak::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); opacity: 0.0; transition: opacity 0.3s; }
.leak:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.leak:hover::after { opacity: 0.7; }
.leak .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--blue-wash); color: var(--blue-bright); margin-bottom: 1rem; }
.leak .ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.leak h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.leak p { color: var(--ink-mute); font-size: 0.95rem; }

/* SalesCPR section */
.salescpr { background: var(--graphite-850); }
.salescpr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.salescpr-copy h2 { font-size: var(--fs-h1); max-width: 16ch; }
.salescpr-copy .body { color: var(--ink-soft); font-size: var(--fs-lead); margin-top: 1.4rem; }
.guarantee {
  margin-top: 1.8rem; padding: 1.2rem 1.3rem; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--blue-wash), transparent); border: 1px solid rgba(43,127,255,0.25);
  display: flex; gap: 0.9rem; align-items: flex-start;
}
.guarantee .shield { color: var(--blue-bright); flex: 0 0 auto; }
.guarantee .shield svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.guarantee p { font-size: 0.98rem; color: var(--ink); }
.guarantee b { font-weight: var(--w-mid); }

/* Calculator */
.calc {
  background: var(--graphite-800); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem); box-shadow: 0 30px 70px -34px rgba(0,0,0,0.8); display: flex; flex-direction: column;
}
.calc h3 { font-size: var(--fs-h3); margin-bottom: 1.4rem; }
.calc-field { margin-bottom: 1.3rem; }
.calc-field label { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0.5rem; }
.calc-input { display: flex; align-items: center; gap: 0.6rem; }
.calc-input .pre { color: var(--ink-mute); font-size: 1.1rem; }
.calc input[type="number"] {
  width: 100%; background: var(--graphite-900); border: 1px solid var(--line-strong); color: var(--ink);
  font-family: inherit; font-size: 1.1rem; font-weight: var(--w-mid); padding: 0.7rem 0.9rem; border-radius: 10px; outline: none;
  transition: border-color 0.2s;
}
.calc input[type="number"]:focus { border-color: var(--blue); }
.calc input[type="range"] { width: 100%; accent-color: var(--blue); margin-top: 0.3rem; }
.range-row { display: flex; justify-content: space-between; align-items: baseline; }
.range-row .val { font-weight: var(--w-mid); color: var(--blue-bright); font-size: 1.05rem; }
.calc-note { font-size: 0.8rem; color: var(--ink-mute); margin-top: 0.4rem; }
.calc-result {
  margin-top: auto; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.calc-result .rlabel { font-size: 0.85rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.12em; }
.calc-result .rnum {
  font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: var(--w-display); letter-spacing: -0.03em; color: #fff;
  margin: 0.3rem 0 1.1rem; font-variant-numeric: tabular-nums;
}
.calc-result .rnum .cur { color: var(--blue-bright); }
.calc .btn { width: 100%; }

/* System / captures */
.system { background: var(--graphite-900); }
.capture-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 3rem; position: relative; }
.capture {
  padding: 1.8rem 1.5rem; border-radius: var(--radius); background: var(--graphite-850);
  border: 1px solid var(--line); position: relative; transition: transform 0.35s var(--ease), border-color 0.3s, background 0.3s;
}
.capture:hover { transform: translateY(-6px); border-color: rgba(43,127,255,0.35); background: var(--graphite-800); }
.capture .num { font-size: 0.85rem; font-weight: var(--w-mid); color: var(--blue-bright); letter-spacing: 0.1em; }
.capture h3 { font-size: 1.4rem; margin: 0.8rem 0 0.5rem; }
.capture p { color: var(--ink-mute); font-size: 0.95rem; }
.capture .arrow { position: absolute; right: -0.9rem; top: 50%; transform: translateY(-50%); color: var(--blue); z-index: 2; }
.capture:last-child .arrow { display: none; }
.capture .arrow svg { width: 20px; height: 20px; fill: currentColor; }

/* Pain-plug split rows */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split.reverse .split-visual { order: -1; }
.split h2 { font-size: var(--fs-h2); max-width: 16ch; }
.split .body { color: var(--ink-soft); font-size: var(--fs-lead); margin-top: 1.3rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.tag {
  font-size: 0.85rem; color: var(--ink-soft); padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03);
}
.split-visual { position: relative; }

/* Visual panels (inline-SVG dashboards) */
.panel {
  border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--graphite-850);
  padding: 1.6rem; box-shadow: 0 30px 70px -34px rgba(0,0,0,0.8); overflow: hidden;
}
.panel-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.panel-row:last-child { border-bottom: 0; }
.panel-row .pic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; }
.panel-row .pic.ok { background: rgba(47,208,126,0.14); color: var(--green); }
.panel-row .pic.bad { background: rgba(255,90,90,0.14); color: var(--red); }
.panel-row .pic.blue { background: var(--blue-wash); color: var(--blue-bright); }
.panel-row .pic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.panel-row .txt { flex: 1; }
.panel-row .txt .t1 { font-size: 0.95rem; color: var(--ink); }
.panel-row .txt .t2 { font-size: 0.82rem; color: var(--ink-mute); }
.panel-row .amt { font-weight: var(--w-mid); color: var(--ink); font-variant-numeric: tabular-nums; }
.panel-row .amt.up { color: var(--green); }

/* Proof */
.proof { background: linear-gradient(180deg, var(--graphite-850), var(--graphite-900)); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.6rem; }
.proof-card { padding: 1.7rem; border-radius: var(--radius); background: var(--graphite-800); border: 1px solid var(--line); }
.proof-card .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--blue-wash); color: var(--blue-bright); display: grid; place-items: center; margin-bottom: 1rem; }
.proof-card .ic svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.proof-card h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.proof-card p { color: var(--ink-mute); font-size: 0.95rem; }

/* How it works */
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 3rem; }
.how-step { position: relative; padding-top: 2.6rem; }
.how-step .n {
  position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-weight: var(--w-mid); color: #fff;
  background: var(--blue); box-shadow: 0 10px 24px -8px var(--blue-glow);
}
.how-step h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.how-step p { color: var(--ink-mute); font-size: 0.95rem; }

/* FAQ */
.faq-list { margin-top: 2.4rem; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; color: var(--ink);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: var(--w-mid); padding: 1.4rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-q .pm { color: var(--blue-bright); transition: transform 0.3s var(--ease); flex: 0 0 auto; font-size: 1.4rem; }
.faq-item.open .faq-q .pm { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq-a p { color: var(--ink-soft); padding: 0 0 1.4rem; max-width: 60ch; }

/* Final CTA */
.finalcta { text-align: center; }
.finalcta-inner {
  background: radial-gradient(700px 300px at 50% 0%, var(--blue-wash), transparent 70%), var(--graphite-850);
  border: 1px solid var(--line-strong); border-radius: 28px; padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 3rem);
}
.finalcta h2 { font-size: var(--fs-h1); max-width: 20ch; margin: 0 auto; }
.finalcta p { color: var(--ink-soft); font-size: var(--fs-lead); margin: 1.4rem auto 2.4rem; max-width: 50ch; }
.finalcta .hero-ctas { justify-content: center; }

/* Inline booking block (GHL voice + chat embeds) */
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; margin-top: 2.6rem; text-align: left; align-items: stretch; }
.book-card { background: var(--graphite-800); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1.4rem; box-shadow: 0 24px 60px -34px rgba(0,0,0,0.8); min-width: 0; }
.book-label { display: flex; align-items: center; gap: 0.55rem; font-weight: var(--w-mid); font-size: 1.02rem; color: var(--ink); margin-bottom: 1.1rem; }
.book-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); flex: 0 0 auto; }
.book-embed { min-height: 440px; }
.book-embed > * { width: 100%; }

/* Voice embed (booking card) */
.book-card.voice { display: flex; flex-direction: column; }
.book-card.voice .book-embed { min-height: 0; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; }
.book-headshot { width: 180px; height: 180px; object-fit: contain; display: block; }
.book-alt { display: inline-block; margin-top: 1.9rem; color: var(--ink-soft); font-size: 0.95rem; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; }
.book-alt:hover { color: #fff; border-color: var(--blue); }
@media (max-width: 760px) { .book-grid { grid-template-columns: 1fr; } }

/* Payoff */
.payoff { text-align: center; background: var(--graphite-900); }
.payoff h2 { font-size: var(--fs-h2); max-width: 22ch; margin: 0 auto; }
.payoff p { color: var(--ink-soft); font-size: var(--fs-lead); margin: 1.3rem auto 0; max-width: 52ch; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 4.5rem 0 2.5rem; background: var(--graphite-900); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; }
.footer .brand { margin-bottom: 1rem; }
.footer .ftag { color: var(--ink-mute); max-width: 38ch; line-height: 1.6; }
.footer-cta { display: inline-flex; margin-top: 1.4rem; }
.footer-email { display: block; margin-top: 1.1rem; color: var(--ink-soft); font-size: 0.92rem; transition: color 0.2s; }
.footer-email:hover { color: var(--blue-bright); }
.footer-col { display: flex; flex-direction: column; gap: 0.85rem; }
.footer-h { font-size: var(--fs-eyebrow); font-weight: var(--w-mid); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); margin: 0 0 0.3rem; }
.footer-col a { color: var(--ink-soft); font-size: 0.95rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--blue-bright); }
.footer-bottom { margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--ink-mute); font-size: 0.85rem; }

/* Demo modal */
.modal-root { position: fixed; inset: 0; z-index: 100; display: none; }
.modal-root.open { display: block; }
.modal-overlay { position: absolute; inset: 0; background: rgba(5,7,10,0.7); backdrop-filter: blur(6px); }
.modal {
  position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 4vw, 3rem);
  width: min(420px, calc(100vw - 2rem)); background: var(--graphite-800); border: 1px solid var(--line-strong);
  border-radius: 20px; overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0,0,0,0.9);
}
.modal-head { display: flex; align-items: center; gap: 0.8rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); background: var(--graphite-850); }
.modal-head .av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-strong); }
.modal-head .who { flex: 1; }
.modal-head .who .n { font-weight: var(--w-mid); font-size: 0.98rem; }
.modal-head .who .s { font-size: 0.78rem; color: var(--green); display: flex; align-items: center; gap: 0.35rem; }
.modal-head .who .s i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }
.modal-close { background: none; border: 0; color: var(--ink-mute); font-size: 1.4rem; }
.modal-tabs { display: flex; gap: 0.4rem; padding: 0.8rem 1rem 0; }
.modal-tab { flex: 1; padding: 0.6rem; text-align: center; font-size: 0.9rem; color: var(--ink-soft); background: var(--graphite-900); border: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.modal-tab.active { color: #fff; border-color: var(--line-strong); border-bottom-color: transparent; background: var(--graphite-850); }
.modal-body { padding: 1.2rem; min-height: 220px; }
.modal-pane { display: none; }
.modal-pane.active { display: block; }
.chat-log { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem; max-height: 230px; overflow-y: auto; }
.msg { padding: 0.7rem 0.95rem; border-radius: 14px; font-size: 0.95rem; max-width: 85%; }
.msg.ai { background: var(--graphite-850); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.me { background: var(--blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-input { display: flex; gap: 0.5rem; }
.chat-input input { flex: 1; background: var(--graphite-900); border: 1px solid var(--line-strong); color: var(--ink); padding: 0.7rem 0.9rem; border-radius: 12px; font-family: inherit; outline: none; }
.chat-input input:focus { border-color: var(--blue); }
.chat-input button { background: var(--blue); color: #fff; border: 0; border-radius: 12px; width: 44px; display: grid; place-items: center; }
.chat-input button svg { width: 18px; height: 18px; fill: #fff; }
.form-field { margin-bottom: 0.9rem; }
.form-field label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.4rem; }
.form-field input { width: 100%; background: var(--graphite-900); border: 1px solid var(--line-strong); color: var(--ink); padding: 0.7rem 0.9rem; border-radius: 10px; font-family: inherit; outline: none; }
.form-field input:focus { border-color: var(--blue); }
.consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.78rem; color: var(--ink-mute); margin: 0.9rem 0; }
.consent input { margin-top: 0.2rem; accent-color: var(--blue); flex: 0 0 auto; }
.voice-orb { width: 96px; height: 96px; border-radius: 50%; margin: 0.6rem auto 1.2rem; background: var(--blue); display: grid; place-items: center; box-shadow: 0 0 0 0 var(--blue-glow); animation: orb 2.2s infinite; }
.voice-orb svg { width: 36px; height: 36px; fill: #fff; }
@keyframes orb { 0% { box-shadow: 0 0 0 0 rgba(43,127,255,0.5); } 70% { box-shadow: 0 0 0 24px rgba(43,127,255,0); } 100% { box-shadow: 0 0 0 0 rgba(43,127,255,0); } }

/* Floating launcher */
.ai-launcher {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 60;
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.2rem 0.8rem 0.8rem;
  background: var(--blue); color: #fff; border: 0; border-radius: 999px; font-weight: var(--w-mid);
  box-shadow: 0 16px 40px -10px var(--blue-glow); transition: transform 0.25s var(--ease);
}
.ai-launcher:hover { transform: translateY(-3px); }
.ai-launcher img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* Scroll reveal (gated on .js so content is always visible without JS) */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1 !important; transform: none !important; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

/* Responsive */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .video-card { margin: 0 auto; max-width: 320px; }
  .salescpr-grid, .split { grid-template-columns: 1fr; }
  .split.reverse .split-visual { order: 0; }
  .leak-grid, .capture-track, .proof-grid, .how-steps { grid-template-columns: repeat(2, 1fr); }
  .capture .arrow { display: none; }
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .nav.open .nav-links {
    display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 1.2rem;
    padding: 1.5rem; background: var(--graphite-850); border-bottom: 1px solid var(--line);
  }
  .nav.open .nav-links .nav-cta { display: inline-flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .leak-grid, .capture-track, .proof-grid, .how-steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============ $50k polish layer ============ */

/* Logo */
.brand-logo { height: 26px; width: auto; display: block; }
.footer .brand .brand-logo { height: 32px; }

/* Grain texture */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Mouse-follow spotlight */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 440px; height: 440px; margin: -220px 0 0 -220px;
  border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(circle, rgba(18,38,92,0.38), rgba(18,38,92,0) 62%);
  transition: opacity 0.5s ease; will-change: transform;
}

/* Tilt cards */
[data-tilt] { transition: transform 0.4s var(--ease); transform-style: preserve-3d; will-change: transform; }

/* Stat band */
.statband { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--graphite-850); padding: clamp(2.4rem, 5vw, 3.4rem) 0; }
.statband-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.statband-head .eyebrow { margin-bottom: 0; }
.statband-note { color: var(--ink-mute); font-size: 0.84rem; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.stat { position: relative; padding-left: 1.4rem; }
.stat::before { content: ""; position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; width: 3px; border-radius: 3px; background: linear-gradient(var(--blue-bright), transparent); }
.stat-num { font-size: clamp(2.6rem, 5vw, 3.7rem); font-weight: var(--w-display); letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.stat p { color: var(--ink-soft); margin-top: 0.7rem; max-width: 34ch; font-size: 0.97rem; }

/* Mini bar chart */
.minichart { margin-top: 1.8rem; padding: 1.2rem 1.3rem; border-radius: var(--radius-sm); background: var(--graphite-800); border: 1px solid var(--line); }
.minichart-head { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 1rem; }
.mc-sub { color: var(--blue-bright); }
.bars { display: flex; align-items: flex-end; gap: 1.1rem; height: 110px; }
.bar { flex: 1; max-width: 58px; border-radius: 8px 8px 0 0; background: linear-gradient(var(--blue-bright), var(--blue-deep)); height: 0; transition: height 1s var(--ease); }
.bars.in .bar { height: var(--h); }
.bars.in .bar:nth-child(2) { transition-delay: 0.12s; }
.bars.in .bar:nth-child(3) { transition-delay: 0.24s; }
.bar.peak { background: linear-gradient(var(--blue-bright), var(--blue)); box-shadow: 0 0 26px -6px var(--blue-glow); }
.bar-labels { display: flex; gap: 1.1rem; margin-top: 0.55rem; }
.bar-labels span { flex: 1; max-width: 58px; text-align: center; font-size: 0.77rem; color: var(--ink-mute); }

/* Line chart panel */
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.1rem; }
.ph-title { font-weight: 500; font-size: 1.02rem; }
.ph-sub { font-size: 0.82rem; color: var(--ink-mute); margin-top: 0.1rem; }
.ph-badge { font-size: 0.78rem; color: var(--green); background: rgba(47,208,126,0.12); padding: 0.32rem 0.64rem; border-radius: 999px; white-space: nowrap; }
.up-arrow { font-size: 0.62rem; }
.linechart { width: 100%; height: 150px; display: block; overflow: visible; }
.linechart .grid { stroke: var(--line); stroke-width: 1; }
.lc-area { opacity: 0; transition: opacity 1s ease 0.4s; }
.chart-panel.in .lc-area { opacity: 1; }
.lc-line { fill: none; stroke: var(--blue-bright); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 700; stroke-dashoffset: 700; }
.chart-panel.in .lc-line { transition: stroke-dashoffset 1.5s var(--ease); stroke-dashoffset: 0; }
.lc-dot { fill: #fff; opacity: 0; transition: opacity 0.3s ease 1.3s; }
.chart-panel.in .lc-dot { opacity: 1; filter: drop-shadow(0 0 6px var(--blue)); }
.chart-foot { display: flex; gap: 1.5rem; margin-top: 0.9rem; font-size: 0.8rem; color: var(--ink-mute); flex-wrap: wrap; }
.cf-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 0.4rem; }
.cf-dot.blue { background: var(--blue-bright); }
.cf-dot.green { background: var(--green); }

/* Donut */
.proof-split { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.donut-wrap { position: relative; max-width: 300px; margin: 0 auto; width: 100%; }
.donut { width: 100%; transform: rotate(-90deg); }
.donut-track { fill: none; stroke: var(--graphite-700); stroke-width: 15; }
.donut-val { fill: none; stroke: var(--blue); stroke-width: 15; stroke-linecap: round; stroke-dasharray: 515; stroke-dashoffset: 515; filter: drop-shadow(0 0 8px var(--blue-glow)); }
.donut-wrap.in .donut-val { transition: stroke-dashoffset 1.6s var(--ease); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.2rem; }
.donut-num { font-size: clamp(2.6rem, 6vw, 3.2rem); font-weight: var(--w-display); color: #fff; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.donut-cap { font-size: 0.8rem; color: var(--ink-mute); margin-top: 0.6rem; max-width: 19ch; line-height: 1.4; }

/* Proof rows */
.proof-rows { display: flex; flex-direction: column; gap: 1rem; }
.proof-row { display: flex; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--graphite-800); border: 1px solid var(--line); transition: transform 0.3s var(--ease), border-color 0.3s; }
.proof-row:hover { transform: translateX(4px); border-color: var(--line-strong); }
.proof-row .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--blue-wash); color: var(--blue-bright); display: grid; place-items: center; flex: 0 0 auto; }
.proof-row .ic svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.proof-row h3 { font-size: 1.1rem; margin-bottom: 0.2rem; }
.proof-row p { color: var(--ink-mute); font-size: 0.93rem; }

/* Capture flow */
.capture-track { position: relative; }
.flow-line { position: absolute; top: 46%; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, transparent, var(--blue), transparent); transform: scaleX(0); transform-origin: left; opacity: 0.55; z-index: 0; }
.capture-track.in .flow-line { transition: transform 1.5s var(--ease); transform: scaleX(1); }
.capture { z-index: 1; }
.capture .cap-step { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--blue-wash); color: var(--blue-bright); font-size: 0.95rem; font-weight: 500; }
.capture h3 { font-size: 1.3rem; margin: 0.9rem 0 0.5rem; }

@media (max-width: 960px) {
  .stat-grid, .proof-split { grid-template-columns: 1fr; }
  .flow-line { display: none; }
  .donut-wrap { max-width: 240px; }
}
@media (max-width: 560px) {
  .stat-grid { gap: 1.8rem; }
}

/* ============ DR pass: agitate, desire flip, timeline ============ */

/* Agitate (cost of inaction) */
.agitate { margin-top: 3rem; display: flex; align-items: stretch; gap: 1.2rem; }
.agitate-bar { width: 4px; border-radius: 4px; background: linear-gradient(var(--red), transparent); flex: 0 0 auto; }
.agitate p { font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: var(--w-display); letter-spacing: -0.02em; color: #fff; line-height: 1.2; max-width: 26ch; }

/* Desire flip */
.desire { background: var(--graphite-850); }
.flip { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: stretch; }
.flip-card { padding: 1.8rem 1.6rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--graphite-800); }
.flip-card.before { background: linear-gradient(180deg, rgba(255,90,90,0.06), var(--graphite-800)); border-color: rgba(255,90,90,0.18); }
.flip-card.after { background: linear-gradient(180deg, rgba(43,127,255,0.08), var(--graphite-800)); border-color: rgba(43,127,255,0.28); box-shadow: 0 24px 60px -34px var(--blue-glow); }
.flip-head { font-size: 1.05rem; font-weight: var(--w-mid); color: var(--ink-soft); margin-bottom: 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; }
.flip-tag { align-self: flex-start; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; font-weight: var(--w-mid); }
.flip-tag.bad { background: rgba(255,90,90,0.14); color: #ff8c8c; }
.flip-tag.good { background: rgba(43,127,255,0.16); color: var(--blue-bright); }
.ticklist { display: flex; flex-direction: column; gap: 0.9rem; }
.ticklist li { display: flex; align-items: center; gap: 0.8rem; font-size: 1.02rem; color: var(--ink); }
.ticklist .tk { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto; }
.ticklist .tk svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.ticklist.bad li { color: var(--ink-mute); }
.ticklist.bad .tk { background: rgba(255,90,90,0.12); color: #ff8c8c; }
.ticklist.good .tk { background: rgba(47,208,126,0.14); color: var(--green); }
.flip-arrow { display: flex; align-items: center; justify-content: center; }
.fa-ring { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 0 0 8px var(--blue-wash), 0 12px 28px -8px var(--blue-glow); }
.fa-ring svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Timeline (how it works) */
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 3.4rem; }
.tl-rail { position: absolute; top: 26px; left: calc(12.5% - 0.525rem); right: calc(12.5% - 0.525rem + 27px); height: 2px; background: var(--graphite-700); border-radius: 2px; z-index: 0; }
.tl-fill { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, var(--blue-deep), var(--blue-bright)); border-radius: 2px; box-shadow: 0 0 12px var(--blue-glow); }
.timeline.in .tl-fill { width: 100%; transition: width 1.8s var(--ease); }
.tl-step { position: relative; z-index: 1; text-align: center; }
.tl-node { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--graphite-850); border: 2px solid var(--graphite-600); margin: 0 auto 1.3rem; transition: border-color 0.4s, transform 0.4s var(--ease), box-shadow 0.4s; }
.tl-num { font-size: 1.1rem; font-weight: var(--w-display); color: var(--ink-soft); }
.timeline.in .tl-step .tl-node { animation: nodepop 0.5s var(--ease) forwards; }
.timeline.in .tl-step:nth-child(2) .tl-node { animation-delay: 0.3s; }
.timeline.in .tl-step:nth-child(3) .tl-node { animation-delay: 0.7s; }
.timeline.in .tl-step:nth-child(4) .tl-node { animation-delay: 1.1s; }
.timeline.in .tl-step:nth-child(5) .tl-node { animation-delay: 1.5s; }
@keyframes nodepop { 0% {} 60% { transform: scale(1.12); } 100% { border-color: var(--blue); box-shadow: 0 0 0 6px var(--blue-wash), 0 0 22px -4px var(--blue-glow); } }
.timeline.in .tl-step .tl-num { transition: color 0.4s 0.5s; }
.timeline.in .tl-step:nth-child(n) .tl-node .tl-num { color: #fff; }
.tl-body h3 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.tl-body p { color: var(--ink-mute); font-size: 0.94rem; }

@media (max-width: 960px) {
  .flip { grid-template-columns: 1fr; }
  .flip-arrow { transform: rotate(90deg); margin: -0.4rem 0; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .tl-rail { display: none; }
}
@media (max-width: 560px) {
  .timeline { grid-template-columns: 1fr; }
  .agitate p { font-size: 1.2rem; }
}

/* ============ Premium pass: offer band, three moves, polish ============ */

/* Hero offer line */
.hero-offer {
  margin-top: 1.7rem; font-size: 0.9rem; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1rem; border-radius: 999px;
  background: linear-gradient(180deg, var(--blue-wash), transparent);
  border: 1px solid rgba(43,127,255,0.22);
}

/* Three-leak grid */
.leak-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .leak-grid-3 { grid-template-columns: 1fr; } }

/* Primary button: subtle premium gradient + inner highlight */
.btn-primary {
  background: linear-gradient(180deg, var(--blue-bright), var(--blue));
  box-shadow: 0 10px 30px -8px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--blue), var(--blue-deep)); }

/* THE OFFER band */
.offer { background: var(--graphite-900); }
.offer-inner {
  position: relative; overflow: hidden;
  border-radius: 28px; padding: clamp(2.4rem, 5vw, 4rem) clamp(1.6rem, 4vw, 3.4rem);
  background:
    radial-gradient(900px 360px at 50% -20%, rgba(43,127,255,0.16), transparent 70%),
    linear-gradient(180deg, var(--graphite-850), var(--graphite-900));
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 110px -50px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.05);
}
.offer-glow {
  position: absolute; left: 50%; top: -40%; width: 620px; height: 620px; transform: translateX(-50%);
  background: radial-gradient(circle, var(--blue-wash), transparent 62%); filter: blur(8px); pointer-events: none;
}
.offer-head { position: relative; max-width: 640px; }
.offer-head .eyebrow { justify-content: flex-start; }
.offer-head h2 { font-size: var(--fs-h1); max-width: 18ch; }
.offer-head p { color: var(--ink-soft); font-size: var(--fs-lead); margin-top: 1.3rem; max-width: 56ch; }
.offer-steps {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 2.6rem 0 2rem;
}
.offer-step {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.4rem 1.4rem; border-radius: var(--radius);
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
}
.offer-step-n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-weight: var(--w-display); color: #fff; font-size: 1rem;
  background: linear-gradient(180deg, var(--blue-bright), var(--blue)); box-shadow: 0 8px 20px -8px var(--blue-glow);
}
.offer-step h3 { font-size: 1.06rem; margin-bottom: 0.3rem; }
.offer-step p { color: var(--ink-mute); font-size: 0.92rem; line-height: 1.5; }
.offer-guarantee { position: relative; margin-top: 0; }
@media (max-width: 860px) { .offer-steps { grid-template-columns: 1fr; } }

/* THE THREE MOVES */
.moves { background: var(--graphite-850); }
.moves-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3rem; }
.move {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 2rem 1.7rem 2.4rem; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--graphite-800), var(--graphite-850));
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px -40px rgba(0,0,0,0.8);
  transition: transform 0.4s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.move::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  opacity: 0; transition: opacity 0.35s;
}
.move:hover { border-color: rgba(43,127,255,0.4); box-shadow: 0 30px 70px -36px var(--blue-glow); }
.move:hover::before { opacity: 1; }
.move-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.move-num {
  font-size: 2.4rem; font-weight: var(--w-display); letter-spacing: -0.04em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong);
}
.move:hover .move-num { -webkit-text-stroke: 1px rgba(43,127,255,0.6); }
.move-tag {
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--w-mid);
  color: var(--blue-bright); padding: 0.36rem 0.7rem; border-radius: 999px;
  background: var(--blue-wash); border: 1px solid rgba(43,127,255,0.22);
}
.move h3 { font-size: 1.55rem; margin-bottom: 0.7rem; }
.move p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; }
.move-go {
  margin-top: 1.6rem; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-strong); color: var(--blue-bright);
  transition: background 0.3s, transform 0.3s var(--ease);
}
.move-go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.move:hover .move-go { background: var(--blue); color: #fff; transform: translateX(4px); }
@media (max-width: 860px) { .moves-grid { grid-template-columns: 1fr; } }

/* ============ Premium hero: centered + signature revenue curve ============ */
.hero { padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero-grid-tex {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 72%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 72%);
}
.hero-glow {
  position: absolute; left: 50%; top: -22%; width: 900px; height: 620px; transform: translateX(-50%);
  background: radial-gradient(circle, var(--blue-wash), transparent 60%); filter: blur(12px); pointer-events: none; z-index: 0;
}
.hero-center { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: var(--w-mid);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  padding: 0.5rem 1rem; border-radius: 999px; margin-bottom: 1.8rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-h1 {
  font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 0.98; letter-spacing: -0.045em; max-width: 16ch;
  background: linear-gradient(180deg, #ffffff 30%, #aeb7c4); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-accent { background: linear-gradient(110deg, var(--blue-bright), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .hero-sub { max-width: 56ch; margin: 1.7rem auto 2.4rem; color: var(--ink-soft); font-size: var(--fs-lead); }
.hero .hero-ctas { justify-content: center; }
.hero .hero-offer { margin-top: 1.9rem; }

/* Revenue curve */
.revcurve { position: relative; z-index: 1; margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.rc-svg { width: 100%; height: clamp(170px, 24vw, 290px); display: block; overflow: visible; }
.rc-line { fill: none; stroke: url(#rcStroke); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1700; stroke-dashoffset: 1700; filter: drop-shadow(0 4px 16px var(--blue-glow));
  animation: rcDraw 2.1s var(--ease) 0.25s forwards; }
.rc-area { opacity: 0; animation: rcFade 1.2s ease 1.1s forwards; }
.rc-dots circle { fill: #fff; filter: drop-shadow(0 0 7px var(--blue-bright)); opacity: 0; }
.rc-dots circle:nth-child(1) { animation: rcDot 0.4s ease 0.7s forwards; }
.rc-dots circle:nth-child(2) { animation: rcDot 0.4s ease 1.1s forwards; }
.rc-dots circle:nth-child(3) { animation: rcDot 0.4s ease 1.5s forwards; }
.rc-dots circle:nth-child(4) { animation: rcDot 0.4s ease 1.9s forwards; }
@keyframes rcDraw { to { stroke-dashoffset: 0; } }
@keyframes rcFade { to { opacity: 1; } }
@keyframes rcDot { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.rc-dots circle { transform-box: fill-box; transform-origin: center; }
.rc-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.4rem; }
.rc-step { display: flex; flex-direction: column; gap: 0.25rem; text-align: center; padding: 0 0.5rem; }
.rc-step-t { font-weight: var(--w-head); font-size: 1.05rem; color: var(--ink); }
.rc-step-s { font-size: 0.85rem; color: var(--ink-mute); }
@media (max-width: 680px) {
  .rc-svg { height: 150px; }
  .rc-labels { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1rem; }
}

/* Gradient section headings for premium hierarchy */
.section-head h2, .offer-head h2, .salescpr-copy h2, .split h2, .finalcta h2, .bleed h2 {
  background: linear-gradient(180deg, #ffffff 40%, #b3bcca); -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .rc-line { stroke-dashoffset: 0; animation: none; }
  .rc-area, .rc-dots circle { opacity: 1; animation: none; }
}

/* Booking embeds: keep them from overflowing on mobile */
.book-embed { max-width: 100%; }
.book-embed iframe, .book-embed > * { max-width: 100%; }
@media (max-width: 560px) {
  .book-card { padding: 1.1rem; }
  .book-embed { min-height: 0; }
}

/* ============================================================
   VM v4 — premium body redesign. HERO IS UNTOUCHED.
   Scope: everything below .hero. More air, editorial headings,
   elevated cards (not flat boxes), mono data system, refined
   bands. No fake data, brand locked (graphite + electric blue).
   ============================================================ */
:root{
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hairline: rgba(255,255,255,0.07);
  --hairline-2: rgba(255,255,255,0.12);
  --card: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014));
  --card-edge: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 50px -34px rgba(0,0,0,0.85);
}

/* ---- Air + section rhythm (hero excluded: it sets its own padding) ---- */
.section{ padding: clamp(6rem, 13vw, 10.5rem) 0; }
.section-head{ margin-bottom: clamp(3rem, 6vw, 4.6rem); max-width: 740px; }
.section-head h2{ font-size: clamp(2.05rem, 3.6vw, 3.05rem); letter-spacing: -0.038em; line-height: 1.02; }
.section-head p, .bleed .lead{ font-size: var(--fs-lead); color: var(--ink-soft); margin-top: 1.35rem; }

/* ---- Eyebrow → mono editorial label ---- */
.eyebrow{
  font-family: var(--mono); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.2em; color: var(--blue-bright); margin-bottom: 1.3rem;
}
.eyebrow::before{ width: 20px; opacity: 0.85; }

/* ---- Headings: clean near-white, drop the grey wash ---- */
.section-head h2, .offer-head h2, .salescpr-copy h2, .split h2, .finalcta h2, .bleed h2, .salescpr-copy h2{
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #f3f6fb;
}

/* ---- Elevated cards everywhere (no more flat black boxes) ---- */
.leak, .offer-step, .proof-row, .calc, .panel, .minichart, .book-card, .move{
  border: 1px solid var(--hairline);
}
.leak{
  background: var(--card); border-radius: 16px; padding: 2.1rem 1.85rem;
  box-shadow: var(--card-edge);
}
.leak:hover{ transform: translateY(-5px); border-color: rgba(43,127,255,0.32); }
.leak .ic{ width: 46px; height: 46px; border-radius: 13px; background: rgba(43,127,255,0.12); }
.leak h3{ font-size: 1.2rem; letter-spacing: -0.01em; }
.leak p{ color: var(--ink-soft); font-size: 0.97rem; }
.leak-grid{ gap: 1.5rem; margin-top: 3.6rem; }

/* ---- Agitate line: stronger editorial moment ---- */
.agitate{ margin-top: 3.6rem; }
.agitate p{ font-size: clamp(1.35rem, 2.4vw, 1.95rem); }

/* ---- Three Moves: premium cards ---- */
.moves-grid{ gap: 1.5rem; margin-top: 3.4rem; }
.move{ border-radius: 18px; padding: 2.4rem 2rem 2.7rem; background: var(--card); border-color: var(--hairline-2); box-shadow: var(--card-edge); }
.move h3{ font-size: 1.5rem; letter-spacing: -0.02em; }
.move p{ color: var(--ink-soft); }
.move-num{ font-family: var(--mono); font-size: 2.1rem; -webkit-text-stroke: 1px var(--hairline-2); }
.move-tag{ font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; }
.move:hover{ transform: translateY(-6px); }

/* ---- Offer band: showpiece ---- */
.offer-inner{ border-radius: 26px; border-color: var(--hairline-2); }
.offer-head h2{ font-size: clamp(2.1rem, 3.6vw, 3rem); }
.offer-steps{ gap: 1.5rem; margin: 3rem 0 2.2rem; }
.offer-step{ border-radius: 14px; background: rgba(255,255,255,0.035); padding: 1.6rem 1.5rem; }
.offer-step-n{ font-family: var(--mono); font-weight: 700; }
.offer-step h3{ font-size: 1.08rem; }

/* ---- Calculators: product-grade, mono numerics ---- */
.calc{ border-radius: 18px; background: var(--card); border-color: var(--hairline-2); box-shadow: var(--card-edge); padding: clamp(1.6rem, 3vw, 2.2rem); }
.calc h3{ font-size: var(--fs-h3); }
.calc input[type="number"]{ font-family: var(--mono); border-radius: 11px; border-color: var(--hairline-2); }
.calc-result{ padding-top: 1.6rem; }
.calc-result .rlabel{ font-family: var(--mono); letter-spacing: 0.14em; font-size: 0.78rem; }
.calc-result .rnum{ font-family: var(--mono); font-weight: 700; }
.range-row .val{ font-family: var(--mono); }
.calc-note{ font-size: 0.8rem; }

/* ---- Split sections: more breathing room + tags ---- */
.split h2{ font-size: clamp(2rem, 3.2vw, 2.7rem); }
.split .body{ color: var(--ink-soft); }
.tag{ font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; padding: 0.5rem 0.9rem; border-color: var(--hairline-2); }

/* ---- Visibility + proof viz: refine, keep real ---- */
.panel{ border-radius: 18px; background: var(--card); border-color: var(--hairline-2); box-shadow: var(--card-edge); }
.ph-title{ font-weight: 600; }
.ph-sub{ font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; }
.chart-foot{ font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.03em; }
.donut-num{ font-family: var(--mono); font-weight: 700; }
.donut-cap{ font-size: 0.82rem; }
.donut-val{ stroke: var(--blue); }
.proof-row{ border-radius: 14px; background: rgba(255,255,255,0.028); padding: 1.25rem 1.35rem; }
.proof-row h3{ font-size: 1.12rem; }
.stat-num{ font-family: var(--mono); font-weight: 700; }
.statband-note{ font-family: var(--mono); }

/* ---- Mini bar chart labels ---- */
.minichart{ border-radius: 14px; }
.minichart-head{ font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.04em; }
.bar-labels span{ font-family: var(--mono); font-size: 0.72rem; }

/* ---- Timeline: refined nodes ---- */
.timeline{ margin-top: 4rem; }
.tl-node{ width: 58px; height: 58px; background: #12161d; border-color: var(--hairline-2); }
.tl-num{ font-family: var(--mono); }
.tl-body h3{ font-size: 1.14rem; }

/* ---- FAQ: editorial ---- */
.faq-q{ font-size: clamp(1.12rem, 1.8vw, 1.32rem); padding: 1.55rem 0; }

/* ---- Final CTA: showpiece ---- */
.finalcta-inner{ border-radius: 30px; border-color: var(--hairline-2); padding: clamp(3.5rem, 8vw, 6rem) clamp(1.5rem, 5vw, 3.4rem); }
.finalcta h2{ font-size: clamp(2.1rem, 3.6vw, 3rem); }

/* ---- Footer ---- */
.footer{ border-top-color: var(--hairline); }
.footer-links a{ font-size: 0.92rem; }

/* ---- Section band rhythm so it reads designed, not flat black ---- */
.bleed{ background: linear-gradient(180deg, #0b0e13, #0c1016); }
.moves{ background: #0b0e13; }
.salescpr{ background: linear-gradient(180deg, #0c1016, #0a0d12); }
.proof{ background: linear-gradient(180deg, #0c1016, var(--graphite-900)); }
.statband{ background: #0c1016; }

/* ---- Focus visibility ---- */
a:focus-visible, button:focus-visible, input:focus-visible{ outline: 2px solid var(--blue-bright); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   VM v5 — BOLD body rebuild. Namespace .vmx-*. HERO UNTOUCHED.
   Editorial scale, giant numerals, electric-blue offer band,
   big numbered rows, dramatic rhythm. Brand: graphite + blue.
   ============================================================ */
:root{
  --vmx-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --vmx-bg: #0a0c10;
  --vmx-bg-2: #0c0f15;
  --vmx-card: #11151c;
  --vmx-hair: rgba(255,255,255,0.08);
  --vmx-hair-2: rgba(255,255,255,0.14);
}
body{ background: var(--vmx-bg); }

/* Shared */
.vmx-sec{ padding: clamp(6rem, 12vw, 10rem) 0; position: relative; }
.vmx-alt{ background: var(--vmx-bg-2); }
.vmx-narrow{ max-width: 860px; }
.vmx-ey{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family: var(--vmx-mono); font-weight:500; font-size:0.72rem; letter-spacing:0.22em;
  text-transform:uppercase; color: var(--blue-bright); margin-bottom:1.5rem;
}
.vmx-ey::before{ content:""; width:26px; height:2px; background: var(--blue); display:inline-block; border-radius:2px; }
.vmx-h2{
  font-family: var(--font); font-weight: 800; color:#f4f7fc;
  font-size: clamp(2.4rem, 5vw, 4.1rem); line-height:0.98; letter-spacing:-0.045em; margin:0;
}
.vmx-lead{ color: var(--ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height:1.55; margin-top:1.5rem; max-width: 60ch; }
.vmx-head{ max-width: 860px; margin-bottom: clamp(3rem, 6vw, 5rem); }

/* ===================== STATS BAND ===================== */
.vmx-stats{ border-top:1px solid var(--vmx-hair); border-bottom:1px solid var(--vmx-hair); background: linear-gradient(180deg, #0b0e14, #0a0c10); padding: clamp(3rem,6vw,4.6rem) 0; }
.vmx-stats-top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom: clamp(2rem,4vw,3rem); }
.vmx-stats-note{ font-family: var(--vmx-mono); font-size:0.74rem; letter-spacing:0.04em; color: var(--ink-mute); }
.vmx-stats-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.vmx-stat{ position:relative; padding-left: clamp(1.5rem, 3vw, 2.6rem); }
.vmx-stat + .vmx-stat::before{ content:""; position:absolute; left:0; top:0.4rem; bottom:0.4rem; width:1px; background: var(--vmx-hair); }
.vmx-stat-num{ font-family: var(--vmx-mono); font-weight:700; font-size: clamp(3.4rem, 8vw, 6rem); line-height:0.9; letter-spacing:-0.04em; color:#fff; font-variant-numeric: tabular-nums; display:flex; align-items:flex-start; }
.vmx-stat-suf{ color: var(--blue-bright); font-size:0.5em; margin-left:0.05em; }
.vmx-stat p{ color: var(--ink-soft); margin-top:1.1rem; max-width: 30ch; font-size:1rem; line-height:1.5; }
@media (max-width: 820px){ .vmx-stats-grid{ grid-template-columns:1fr; gap:2.4rem; } .vmx-stat{ padding-left:0; } .vmx-stat + .vmx-stat::before{ display:none; } }

/* ===================== BLEED — big numbered rows ===================== */
.vmx-bleed{ background: var(--vmx-bg); }
.vmx-leaks{ border-top:1px solid var(--vmx-hair); }
.vmx-leak{
  position:relative; display:grid; grid-template-columns: minmax(0,auto) 1fr; gap: clamp(1.5rem,4vw,3.5rem);
  align-items:start; padding: clamp(2rem,4vw,3rem) 0; border-bottom:1px solid var(--vmx-hair);
  transition: padding-left 0.4s var(--ease);
}
.vmx-leak:hover{ padding-left: 0.6rem; }
.vmx-leak-idx{ font-family: var(--vmx-mono); font-weight:700; font-size: clamp(2.6rem,6vw,4.4rem); line-height:1; color: transparent; -webkit-text-stroke:1.5px var(--vmx-hair-2); letter-spacing:-0.04em; }
.vmx-leak:hover .vmx-leak-idx{ -webkit-text-stroke:1.5px var(--blue); }
.vmx-leak-ic{ display:none; }
.vmx-leak h3{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight:700; color:#eef2f8; letter-spacing:-0.02em; margin:0; }
.vmx-leak p{ grid-column:2; color: var(--ink-mute); font-size:1.05rem; margin-top:0.7rem; max-width: 60ch; }
.vmx-leak-rule{ display:none; }
@media (max-width: 700px){ .vmx-leak{ grid-template-columns:1fr; gap:0.7rem; } .vmx-leak p{ grid-column:1; } }

/* Agitate */
.vmx-agitate{ margin-top: clamp(2.5rem,5vw,4rem); display:flex; gap:1.4rem; align-items:stretch; }
.vmx-agitate-bar{ width:5px; border-radius:5px; background: linear-gradient(var(--red), transparent); flex:0 0 auto; }
.vmx-agitate p{ font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight:800; letter-spacing:-0.03em; color:#fff; line-height:1.15; max-width: 24ch; }

/* ===================== OFFER — electric-blue full band ===================== */
.vmx-offer{ padding: clamp(5rem,10vw,8rem) 0; background: var(--vmx-bg); }
.vmx-offer-card{
  position:relative; overflow:hidden; border-radius: 32px; padding: clamp(2.6rem,6vw,5rem);
  background: linear-gradient(150deg, #1f6dff 0%, var(--blue) 42%, #0f4fd6 100%);
  box-shadow: 0 50px 120px -40px rgba(43,127,255,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}
.vmx-offer-glow{ position:absolute; right:-10%; top:-40%; width:600px; height:600px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 60%); pointer-events:none; }
.vmx-offer-head{ position:relative; max-width: 720px; }
.vmx-ey-on{ color: rgba(255,255,255,0.85); }
.vmx-ey-on::before{ background: rgba(255,255,255,0.85); }
.vmx-offer-head .vmx-h2{ color:#fff; font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
.vmx-offer-head p{ color: rgba(255,255,255,0.9); font-size: clamp(1.05rem,1.5vw,1.28rem); line-height:1.55; margin-top:1.4rem; }
.vmx-offer-steps{ position:relative; display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; margin: clamp(2.5rem,5vw,3.6rem) 0 2rem; }
.vmx-ostep{ background: rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); border-radius:18px; padding:1.8rem 1.6rem; backdrop-filter: blur(4px); }
.vmx-ostep-n{ font-family: var(--vmx-mono); font-weight:700; font-size:1.6rem; color:#fff; display:block; margin-bottom:0.8rem; opacity:0.85; }
.vmx-ostep h3{ color:#fff; font-size:1.18rem; font-weight:700; margin:0 0 0.4rem; }
.vmx-ostep p{ color: rgba(255,255,255,0.82); font-size:0.96rem; line-height:1.5; }
.vmx-guarantee-on{ position:relative; display:flex; gap:1rem; align-items:flex-start; background: rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.25); border-radius:16px; padding:1.4rem 1.5rem; }
.vmx-guarantee-on .vmx-shield{ color:#fff; flex:0 0 auto; }
.vmx-guarantee-on p{ color:#fff; font-size:1rem; line-height:1.5; }
.vmx-shield svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.7; }
@media (max-width:820px){ .vmx-offer-steps{ grid-template-columns:1fr; } }

/* ===================== THREE MOVES — big numbered rows ===================== */
.vmx-moves{ background: var(--vmx-bg-2); }
.vmx-moverows{ border-top:1px solid var(--vmx-hair); }
.vmx-move{
  display:grid; grid-template-columns: clamp(70px,9vw,140px) 1fr auto; gap: clamp(1.4rem,4vw,3.4rem);
  align-items:center; padding: clamp(2.2rem,4.5vw,3.4rem) 0; border-bottom:1px solid var(--vmx-hair);
  transition: padding-left 0.4s var(--ease), background 0.3s; color: inherit;
}
.vmx-move:hover{ padding-left:0.8rem; background: linear-gradient(90deg, rgba(43,127,255,0.06), transparent 60%); }
.vmx-move-num{ font-family: var(--vmx-mono); font-weight:700; font-size: clamp(2.6rem,6vw,5rem); line-height:0.9; color: transparent; -webkit-text-stroke:1.5px var(--vmx-hair-2); letter-spacing:-0.05em; }
.vmx-move:hover .vmx-move-num{ -webkit-text-stroke:1.5px var(--blue-bright); }
.vmx-move-tag{ font-family: var(--vmx-mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--blue-bright); background: var(--blue-wash); border:1px solid rgba(43,127,255,0.25); padding:0.34rem 0.7rem; border-radius:999px; display:inline-block; margin-bottom:0.9rem; }
.vmx-move h3{ font-size: clamp(1.6rem,3vw,2.4rem); font-weight:700; color:#eef2f8; letter-spacing:-0.025em; margin:0 0 0.6rem; }
.vmx-move p{ color: var(--ink-soft); font-size:1.05rem; max-width: 60ch; line-height:1.5; }
.vmx-move-go{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,0.04); border:1px solid var(--vmx-hair-2); color: var(--blue-bright); transition: background 0.3s, transform 0.3s var(--ease); flex:0 0 auto; }
.vmx-move-go svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; }
.vmx-move:hover .vmx-move-go{ background: var(--blue); color:#fff; transform: translateX(6px); }
@media (max-width:760px){ .vmx-move{ grid-template-columns: auto 1fr; gap:1.2rem; } .vmx-move-go{ display:none; } }

/* ===================== SPLIT (calculators / visibility) ===================== */
.vmx-split{ display:grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2.5rem,6vw,5rem); align-items:center; }
.vmx-split-rev .vmx-split-copy{ order:2; }
.vmx-split-copy .vmx-h2{ font-size: clamp(2.1rem,4vw,3.3rem); max-width: 16ch; }
.vmx-tags{ display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:2rem; }
.vmx-tag{ font-family: var(--vmx-mono); font-size:0.74rem; letter-spacing:0.05em; color: var(--ink-soft); padding:0.5rem 0.95rem; border-radius:999px; border:1px solid var(--vmx-hair-2); background: rgba(255,255,255,0.03); }
@media (max-width:900px){ .vmx-split{ grid-template-columns:1fr; gap:3rem; } .vmx-split-rev .vmx-split-copy{ order:0; } }

/* Guarantee (dark) */
.vmx-guarantee{ margin-top:2rem; padding:1.3rem 1.4rem; border-radius:14px; background: linear-gradient(180deg, var(--blue-wash), transparent); border:1px solid rgba(43,127,255,0.28); display:flex; gap:1rem; align-items:flex-start; }
.vmx-guarantee .vmx-shield{ color: var(--blue-bright); flex:0 0 auto; }
.vmx-guarantee p{ color: var(--ink); font-size:1rem; line-height:1.5; }

/* Mini bar chart */
.vmx-minichart{ margin-top:2rem; padding:1.4rem 1.5rem; border-radius:16px; background: var(--vmx-card); border:1px solid var(--vmx-hair); }
.vmx-minichart-head{ display:flex; justify-content:space-between; font-family: var(--vmx-mono); font-size:0.78rem; letter-spacing:0.04em; color: var(--ink-soft); margin-bottom:1.2rem; }
.vmx-mc-sub{ color: var(--blue-bright); }
.vmx-minichart .bars{ display:flex; align-items:flex-end; gap:1.2rem; height:130px; }
.vmx-minichart .bar{ flex:1; max-width:64px; border-radius:8px 8px 0 0; background: linear-gradient(var(--blue-bright), var(--blue-deep)); height:0; transition:height 1s var(--ease); }
.vmx-minichart .bars.in .bar{ height:var(--h); }
.vmx-minichart .bars.in .bar:nth-child(2){ transition-delay:0.12s; }
.vmx-minichart .bars.in .bar:nth-child(3){ transition-delay:0.24s; }
.vmx-minichart .bar.peak{ background: linear-gradient(var(--blue-bright), var(--blue)); box-shadow:0 0 28px -6px var(--blue-glow); }
.vmx-minichart .bar-labels{ display:flex; gap:1.2rem; margin-top:0.6rem; }
.vmx-minichart .bar-labels span{ flex:1; max-width:64px; text-align:center; font-family: var(--vmx-mono); font-size:0.72rem; color: var(--ink-mute); }

/* Calculator panel */
.vmx-calc{ background: var(--vmx-card); border:1px solid var(--vmx-hair-2); border-radius:22px; padding: clamp(1.8rem,3.5vw,2.6rem); box-shadow: 0 40px 90px -44px rgba(0,0,0,0.85); display:flex; flex-direction:column; }
.vmx-calc h3{ font-size:1.4rem; font-weight:700; color:#eef2f8; margin:0 0 1.6rem; }
.vmx-field{ margin-bottom:1.4rem; }
.vmx-field label{ display:block; font-size:0.92rem; color: var(--ink-soft); margin-bottom:0.55rem; }
.vmx-input{ display:flex; align-items:center; gap:0.6rem; }
.vmx-input .pre{ color: var(--ink-mute); font-size:1.1rem; font-family: var(--vmx-mono); }
.vmx-calc input[type="number"]{ width:100%; background: var(--vmx-bg); border:1px solid var(--vmx-hair-2); color: var(--ink); font-family: var(--vmx-mono); font-size:1.1rem; padding:0.75rem 0.95rem; border-radius:11px; outline:none; transition:border-color 0.2s; }
.vmx-calc input[type="number"]:focus{ border-color: var(--blue); }
.vmx-calc input[type="range"]{ width:100%; accent-color: var(--blue); margin-top:0.4rem; }
.vmx-range-row{ display:flex; justify-content:space-between; align-items:baseline; }
.vmx-range-row .val{ font-family: var(--vmx-mono); font-weight:500; color: var(--blue-bright); font-size:1.05rem; }
.vmx-note{ font-size:0.8rem; color: var(--ink-mute); margin-top:0.45rem; }
.vmx-result{ margin-top:auto; padding-top:1.6rem; border-top:1px solid var(--vmx-hair); }
.vmx-result .rlabel{ font-family: var(--vmx-mono); font-size:0.78rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:0.14em; }
.vmx-result .rnum{ font-family: var(--vmx-mono); font-size: clamp(2.6rem,6vw,3.8rem); font-weight:700; letter-spacing:-0.03em; color:#fff; margin:0.4rem 0 1.2rem; font-variant-numeric: tabular-nums; }
.vmx-result .rnum .cur{ color: var(--blue-bright); }
.vmx-result .btn{ width:100%; }

/* Visibility panel */
.vmx-vis{ background: var(--vmx-bg); }
.vmx-panel{ border-radius:22px; border:1px solid var(--vmx-hair-2); background: var(--vmx-card); padding:1.8rem; box-shadow: 0 40px 90px -44px rgba(0,0,0,0.85); }
.vmx-panel-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.2rem; }
.vmx-ph-title{ font-weight:600; font-size:1.05rem; color: var(--ink); }
.vmx-ph-sub{ font-family: var(--vmx-mono); font-size:0.75rem; letter-spacing:0.04em; color: var(--ink-mute); margin-top:0.15rem; }
.vmx-ph-badge{ font-family: var(--vmx-mono); font-size:0.72rem; color: var(--green); background: rgba(47,208,126,0.12); padding:0.34rem 0.66rem; border-radius:999px; white-space:nowrap; }
.up-arrow{ font-size:0.6rem; }
.vmx-linechart{ width:100%; height:170px; display:block; overflow:visible; }
.vmx-linechart .grid{ stroke: var(--vmx-hair); stroke-width:1; }
.vmx-linechart .lc-area{ opacity:0; transition: opacity 1s ease 0.4s; }
.vmx-panel.in .lc-area{ opacity:1; }
.vmx-linechart .lc-line{ fill:none; stroke: var(--blue-bright); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:700; stroke-dashoffset:700; }
.vmx-panel.in .lc-line{ transition: stroke-dashoffset 1.6s var(--ease); stroke-dashoffset:0; }
.vmx-linechart .lc-dot{ fill:#fff; opacity:0; transition: opacity 0.3s ease 1.3s; }
.vmx-panel.in .lc-dot{ opacity:1; filter: drop-shadow(0 0 7px var(--blue)); }
.vmx-chart-foot{ display:flex; gap:1.6rem; margin-top:1rem; font-family: var(--vmx-mono); font-size:0.74rem; color: var(--ink-mute); flex-wrap:wrap; }
.cf-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:0.4rem; }
.cf-dot.blue{ background: var(--blue-bright); }
.cf-dot.green{ background: var(--green); }

/* ===================== PROOF — donut + rows ===================== */
.vmx-proof-split{ display:grid; grid-template-columns: 0.85fr 1fr; gap: clamp(2.5rem,6vw,5rem); align-items:center; }
.vmx-donut{ position:relative; max-width:320px; margin:0 auto; width:100%; }
.vmx-donut .donut{ width:100%; transform: rotate(-90deg); }
.vmx-donut .donut-track{ fill:none; stroke: var(--graphite-700); stroke-width:14; }
.vmx-donut .donut-val{ fill:none; stroke: var(--blue); stroke-width:14; stroke-linecap:round; stroke-dasharray:515; stroke-dashoffset:515; filter: drop-shadow(0 0 10px var(--blue-glow)); }
.vmx-donut.in .donut-val{ transition: stroke-dashoffset 1.7s var(--ease); }
.vmx-donut-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2.4rem; }
.vmx-donut-num{ font-family: var(--vmx-mono); font-weight:700; font-size: clamp(3rem,7vw,4rem); color:#fff; letter-spacing:-0.03em; line-height:1; font-variant-numeric: tabular-nums; }
.vmx-donut-cap{ font-size:0.84rem; color: var(--ink-mute); margin-top:0.7rem; max-width:19ch; line-height:1.4; }
.vmx-proof-content .vmx-head{ margin-bottom:2rem; }
.vmx-proof-rows{ display:flex; flex-direction:column; gap:1rem; }
.vmx-prow{ display:flex; gap:1.1rem; padding:1.3rem 1.4rem; border-radius:14px; background: rgba(255,255,255,0.025); border:1px solid var(--vmx-hair); transition: transform 0.3s var(--ease), border-color 0.3s; }
.vmx-prow:hover{ transform: translateX(5px); border-color: var(--vmx-hair-2); }
.vmx-prow-ic{ width:44px; height:44px; border-radius:11px; background: var(--blue-wash); color: var(--blue-bright); display:grid; place-items:center; flex:0 0 auto; }
.vmx-prow-ic svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; }
.vmx-prow h3{ font-size:1.14rem; font-weight:700; color:#eef2f8; margin:0 0 0.25rem; }
.vmx-prow p{ color: var(--ink-mute); font-size:0.96rem; }
@media (max-width:900px){ .vmx-proof-split{ grid-template-columns:1fr; } .vmx-donut{ max-width:240px; } }

/* ===================== TIMELINE ===================== */
.vmx-timeline{ position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap:1.5rem; margin-top: clamp(3rem,6vw,4.5rem); }
.vmx-tl-rail{ position:absolute; top:30px; left:calc(12.5% - 0.6rem); right:calc(12.5% - 0.6rem); height:2px; background: var(--graphite-700); border-radius:2px; z-index:0; }
.vmx-tl-fill{ position:absolute; inset:0; width:0; background: linear-gradient(90deg, var(--blue-deep), var(--blue-bright)); border-radius:2px; box-shadow:0 0 12px var(--blue-glow); }
.vmx-timeline.in .vmx-tl-fill{ width:100%; transition: width 1.8s var(--ease); }
.vmx-tl-step{ position:relative; z-index:1; text-align:center; }
.vmx-tl-node{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background: var(--vmx-card); border:2px solid var(--vmx-hair-2); margin:0 auto 1.4rem; transition: border-color 0.4s, box-shadow 0.4s; }
.vmx-tl-num{ font-family: var(--vmx-mono); font-weight:700; font-size:1.2rem; color: var(--ink-soft); }
.vmx-timeline.in .vmx-tl-step:nth-child(2) .vmx-tl-node{ border-color: var(--blue); box-shadow:0 0 0 6px var(--blue-wash); }
.vmx-timeline.in .vmx-tl-step:nth-child(3) .vmx-tl-node{ border-color: var(--blue); box-shadow:0 0 0 6px var(--blue-wash); transition-delay:0.3s; }
.vmx-timeline.in .vmx-tl-step:nth-child(4) .vmx-tl-node{ border-color: var(--blue); box-shadow:0 0 0 6px var(--blue-wash); transition-delay:0.6s; }
.vmx-timeline.in .vmx-tl-step:nth-child(5) .vmx-tl-node{ border-color: var(--blue); box-shadow:0 0 0 6px var(--blue-wash); transition-delay:0.9s; }
.vmx-timeline.in .vmx-tl-num{ color:#fff; transition: color 0.4s 0.4s; }
.vmx-tl-body h3{ font-size:1.18rem; font-weight:700; color:#eef2f8; margin:0 0 0.5rem; }
.vmx-tl-body p{ color: var(--ink-mute); font-size:0.95rem; }
@media (max-width:900px){ .vmx-timeline{ grid-template-columns:1fr 1fr; } .vmx-tl-rail{ display:none; } }
@media (max-width:560px){ .vmx-timeline{ grid-template-columns:1fr; } }

/* ===================== FAQ ===================== */
.vmx-faq{ margin-top: clamp(2.5rem,5vw,3.5rem); border-top:1px solid var(--vmx-hair); }
.vmx-faq-item{ border-bottom:1px solid var(--vmx-hair); }
.vmx-faq-q{ width:100%; text-align:left; background:none; border:0; color:#eef2f8; font-family: var(--font); font-size: clamp(1.15rem,2vw,1.5rem); font-weight:600; padding:1.7rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; letter-spacing:-0.01em; }
.vmx-faq-q .pm{ color: var(--blue-bright); transition: transform 0.3s var(--ease); flex:0 0 auto; font-size:1.6rem; font-weight:400; }
.vmx-faq-item.open .vmx-faq-q .pm{ transform: rotate(45deg); }
.vmx-faq-a{ max-height:0; overflow:hidden; transition: max-height 0.4s var(--ease); }
.vmx-faq-a p{ color: var(--ink-soft); padding:0 0 1.7rem; max-width:64ch; font-size:1.05rem; line-height:1.6; }

/* ===================== FINAL CTA ===================== */
.vmx-finalcta{ padding: clamp(5rem,10vw,8rem) 0 clamp(4rem,8vw,6rem); text-align:center; background: var(--vmx-bg); }
.vmx-finalcta-inner{ background: radial-gradient(800px 360px at 50% 0%, var(--blue-wash), transparent 70%), var(--vmx-card); border:1px solid var(--vmx-hair-2); border-radius:32px; padding: clamp(3.5rem,8vw,6rem) clamp(1.5rem,5vw,3.5rem); }
.vmx-finalcta .vmx-h2{ font-size: clamp(2.3rem,4.6vw,3.7rem); max-width:20ch; margin:0 auto; }
.vmx-finalcta p{ color: var(--ink-soft); font-size: clamp(1.05rem,1.5vw,1.28rem); margin:1.5rem auto 2.8rem; max-width:50ch; }
.vmx-book-grid{ display:grid; grid-template-columns: minmax(0, 680px); justify-content:center; gap:1.5rem; margin-top:2.8rem; text-align:left; align-items:stretch; }
.vmx-book-card{ background: var(--vmx-bg); border:1px solid var(--vmx-hair-2); border-radius:20px; padding:1.5rem; box-shadow:0 30px 70px -40px rgba(0,0,0,0.85); min-width:0; }
.vmx-book-label{ display:flex; align-items:center; gap:0.6rem; font-weight:600; font-size:1.04rem; color:#eef2f8; margin-bottom:1.2rem; }
.vmx-book-card.voice{ display:flex; flex-direction:column; }
.vmx-book-card.voice .book-embed{ min-height:0; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; }
.vmx-book-card .book-embed{ min-height:440px; max-width:100%; }
.vmx-book-card .book-embed > *{ width:100%; max-width:100%; }
.book-headshot{ width:600px; max-width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; }
.book-dot{ width:8px; height:8px; border-radius:50%; background: var(--green); box-shadow:0 0 10px var(--green); flex:0 0 auto; display:inline-block; }
.vmx-book-alt{ display:inline-block; margin-top:2rem; color: var(--ink-soft); font-size:0.96rem; border-bottom:1px solid var(--vmx-hair-2); padding-bottom:2px; transition: color 0.2s, border-color 0.2s; }
.vmx-book-alt:hover{ color:#fff; border-color: var(--blue); }
@media (max-width:760px){ .vmx-book-grid{ grid-template-columns:1fr; } .book-headshot{ width:320px; } }

/* ============================================================
   VM v6 — fixes: hero CTAs left, numbers in Outfit (no dotted
   zero), Bleed as red problem-cards (distinct from Moves rows)
   ============================================================ */

/* Hero CTAs back to LEFT-aligned (two-column hero) */
.hero .hero-ctas{ justify-content: flex-start !important; }

/* All number displays use the brand font, not the dotted-zero mono */
.vmx-stat-num, .vmx-leak-idx, .vmx-ostep-n, .vmx-move-num,
.vmx-result .rnum, .vmx-donut-num, .vmx-tl-num,
.vmx-calc input[type="number"], .vmx-input .pre, .vmx-range-row .val{
  font-family: var(--font);
}
.vmx-stat-num, .vmx-result .rnum, .vmx-donut-num{ font-weight: 800; }

/* Bleed: red problem-cards (clearly different from blue Moves rows) */
.vmx-leakcards{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; margin-top: clamp(2.5rem,5vw,3.5rem); }
.vmx-leakcard{
  position:relative; overflow:hidden; padding:2.3rem 1.9rem 2rem;
  border-radius:18px; background: var(--vmx-card); border:1px solid var(--vmx-hair);
  box-shadow: 0 24px 50px -36px rgba(0,0,0,0.85);
  transition: transform 0.35s var(--ease), border-color 0.3s;
}
.vmx-leakcard::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--red); opacity:0; transition: opacity 0.3s; }
.vmx-leakcard:hover{ transform: translateY(-6px); border-color: var(--vmx-hair-2); }
.vmx-leakcard:hover::after{ opacity:0.75; }
.vmx-leakcard-ic{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background: rgba(255,90,90,0.10); color:#ff8c8c; margin-bottom:1.3rem; }
.vmx-leakcard-ic svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.7; }
.vmx-leakcard h3{ font-size:1.38rem; font-weight:700; color:#eef2f8; margin:0 0 0.6rem; letter-spacing:-0.02em; }
.vmx-leakcard p{ color: var(--ink-soft); font-size:1rem; line-height:1.55; }
.vmx-leakcard-tag{ display:inline-block; margin-top:1.5rem; font-family: var(--vmx-mono); font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:#ff8c8c; }
@media (max-width:820px){ .vmx-leakcards{ grid-template-columns:1fr; } }

/* ============================================================
   VM v7 — concept-rich brand pass. Serif display headings,
   animated aurora field, mono labels, glass cards, cyan/violet
   accents, 3px buttons. Matches concept-rich.html.
   ============================================================ */
:root{
  --vmx-bg: #06070a;
  --vmx-bg-2: rgba(10, 12, 17, 0.45);
  --vmx-card: rgba(20, 24, 32, 0.55);
}
body{ background: var(--graphite-900); }

/* ---- Animated aurora background ---- */
.bg-field{
  background:
    radial-gradient(46vw 46vw at 30% 110%, rgba(14,165,183,0.16), transparent 65%),
    radial-gradient(40vw 40vw at 88% 80%, rgba(43,127,255,0.13), transparent 65%);
}
/* Same aurora look, no 90px blur filter: the soft falloff is baked into the
   gradient stops so the GPU composites a cached layer instead of re-blurring. */
.bg-field::before, .bg-field::after{
  content: ""; position: absolute; border-radius: 50%;
  mix-blend-mode: screen; will-change: transform;
}
.bg-field::before{
  width: 60vw; height: 60vw; left: -10vw; top: -20vh; opacity: 0.5;
  background: radial-gradient(circle, rgba(29,78,216,0.85) 0%, rgba(29,78,216,0.45) 28%, rgba(29,78,216,0.16) 50%, transparent 72%);
  animation: vmxDrift1 22s ease-in-out infinite;
}
.bg-field::after{
  width: 50vw; height: 50vw; right: -12vw; top: -8vh; opacity: 0.32;
  background: radial-gradient(circle, rgba(124,58,237,0.85) 0%, rgba(124,58,237,0.45) 28%, rgba(124,58,237,0.16) 50%, transparent 72%);
  animation: vmxDrift2 26s ease-in-out infinite;
}
@keyframes vmxDrift1{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(8vw,6vh) scale(1.15); } }
@keyframes vmxDrift2{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-7vw,9vh) scale(1.1); } }

/* Veil so content stays readable over the aurora */
#page::before{
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(6,7,10,0.55) 100%),
    linear-gradient(180deg, rgba(6,7,10,0.2), rgba(6,7,10,0.7));
}

/* Opaque section bands become translucent so the aurora shows through */
.bleed, .moves, .salescpr, .proof, .statband, .vmx-stats, .vmx-bleed, .vmx-vis,
.vmx-moves, .vmx-offer, .vmx-finalcta, .desire, .system, .payoff, .footer{
  background: transparent;
}
.vmx-alt{ background: var(--vmx-bg-2); }

/* ---- Serif display headings (Playfair) ---- */
h1, h2, h3, h4,
.vmx-h2, .vmx-leak h3, .vmx-move h3, .vmx-prow h3, .vmx-tl-body h3,
.vmx-leakcard h3, .vmx-ostep h3, .vmx-calc h3, .vmx-faq-q{
  font-family: var(--font-serif); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em;
}
.hero-h1{
  font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.05;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink);
}
.grad-accent{
  font-style: italic;
  background: linear-gradient(100deg, var(--blue-bright), var(--cyan) 45%, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: vmxShift 8s ease-in-out infinite;
}
@keyframes vmxShift{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }
.section-head h2, .offer-head h2, .salescpr-copy h2, .split h2, .finalcta h2, .bleed h2{
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink);
}
.vmx-h2{ font-weight: 500; letter-spacing: -0.01em; line-height: 1.08; }
.vmx-faq-q{ font-weight: 500; }

/* ---- Mono kicker labels, cyan ---- */
.eyebrow, .vmx-ey, .badge{
  font-family: var(--mono); font-weight: 400; font-size: 0.74rem;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--cyan);
}
.eyebrow::before, .vmx-ey::before{
  height: 1px; background: linear-gradient(90deg, var(--cyan), transparent);
}
.badge{ background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.vmx-stats-note, .statband-note{ font-family: var(--mono); color: var(--ink-faint); }

/* ---- Nav: deep glass + mono links ---- */
.nav{ background: rgba(6,7,10,0.55); backdrop-filter: blur(20px) saturate(150%); }
.nav.scrolled{ background: rgba(6,7,10,0.75); }
.nav-links a:not(.btn){
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.nav-links a:not(.btn):hover{ color: var(--cyan); }

/* ---- Buttons: 3px radius, blue→cyan gradient, dark text ---- */
.btn{ border-radius: 3px; font-weight: 500; }
.btn-primary{
  background: linear-gradient(100deg, var(--blue), var(--cyan));
  color: #04121a; font-weight: 600;
  box-shadow: 0 10px 36px rgba(43,127,255,0.4);
}
.btn-primary:hover{
  background: linear-gradient(100deg, var(--blue), var(--cyan));
  transform: translateY(-2px); box-shadow: 0 16px 50px rgba(57,224,255,0.5); color: #04121a;
}
.btn-ghost{ background: rgba(255,255,255,0.04); border-color: var(--line-strong); backdrop-filter: blur(8px); }
.btn-ghost:hover{ border-color: var(--cyan); color: var(--ink); }
.ai-launcher{ border-radius: 999px; }

/* ---- Glass cards ---- */
.vmx-leakcard, .vmx-calc, .vmx-panel, .vmx-ostep, .vmx-prow, .vmx-minichart,
.vmx-book-card, .vmx-finalcta-inner, .vmx-tl-node, .calc, .panel, .book-card,
.leak, .move, .offer-step, .proof-row, .minichart, .video-card, .modal{
  background: var(--glass); backdrop-filter: blur(14px);
}
.vmx-leakcard, .vmx-calc, .vmx-panel{ border-radius: 14px; }
.vmx-offer-card{
  background: linear-gradient(150deg, rgba(31,109,255,0.92) 0%, rgba(43,127,255,0.88) 42%, rgba(15,79,214,0.92) 100%);
  backdrop-filter: blur(10px); border-radius: 14px;
}
.vmx-finalcta-inner{
  background: radial-gradient(800px 360px at 50% 0%, var(--blue-wash), transparent 70%), var(--glass);
  border-radius: 14px;
}

/* ---- Serif display numbers (concept-rich stat style) ---- */
.vmx-stat-num, .vmx-donut-num, .vmx-result .rnum, .calc-result .rnum, .stat-num, .donut-num{
  font-family: var(--font-serif); font-weight: 500;
}
.vmx-stat-suf{ color: var(--cyan); }

/* ---- Accent swaps: cyan where blue-bright carried the highlight ---- */
.vmx-move:hover .vmx-move-num{ -webkit-text-stroke: 1.5px var(--cyan); }
.vmx-leak:hover .vmx-leak-idx{ -webkit-text-stroke: 1.5px var(--cyan); }
.faq-q .pm, .vmx-faq-q .pm{ color: var(--cyan); }
.book-alt:hover, .vmx-book-alt:hover{ border-color: var(--cyan); }
.hero-trust, .hero-meta{ font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; }
.hero-offer{ font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.03em; border-radius: 3px; }

/* ---- Footer over aurora ---- */
.footer{ border-top: 1px solid var(--line); background: rgba(6,7,10,0.4); backdrop-filter: blur(10px); }

@media (prefers-reduced-motion: reduce){
  .bg-field::before, .bg-field::after, .grad-accent{ animation: none; }
}