/* ════════════════════════════════════════════════════════════
   Vanguard CNC — Landing (Clean Brutalism)
   Rules: 0px radius · no shadows · no gradients · mono labels
   ════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; }

:root {
  --bg:      #050505;
  --bg-1:    #0a0a0c;
  --bg-2:    #111114;
  --b:       #1c1c20;   /* border */
  --b-hi:    #28282e;   /* border highlight */
  --accent:  #2563eb;
  --ok:      #22c55e;
  --warn:    #f59e0b;
  --crit:    #ef4444;
  --t1:      #e8e8ed;
  --t2:      #8a8a96;
  --t3:      #6e6e7e;
  --mono:    'JetBrains Mono', 'Courier New', monospace;
  --sans:    'Inter', system-ui, sans-serif;
  --display: 'Space Grotesk', 'Inter', sans-serif;
}

html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--t1);
  letter-spacing: -0.025em;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Shared util ─────────────────────────────────────────── */

.vg-tag {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--t3);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ════════════════════════════════════════════════════════════
   ENTRY — 50/50 SPLIT SCREEN
   ════════════════════════════════════════════════════════════ */

.vg-entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  min-height: 680px;
  max-height: 1000px;
  margin-top: 52px;
}

/* ── LEFT: Brand ─────────────────────────────────────────── */

.vg-brand {
  position: relative;
  background: var(--bg);
  border-right: 1px solid var(--b);
  overflow: hidden;
}

.vg-cnc-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ── Orbiting data readouts ─────────────────────────────────── */
.vg-orbit {
  transform-origin: 320px 370px;
  transform-box: view-box;
  animation: diagramRotate 55s linear infinite;
}
.vg-orbit-inner {
  transform-box: fill-box;
  transform-origin: center;
  animation: diagramRotateReverse 55s linear infinite;
}
@keyframes diagramRotateReverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ── Background Terminal (behind SVG) ───────────────────────── */

.vg-bg-term {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 32px 36px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  pointer-events: none;
}

.vg-bt-line {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 2;
  letter-spacing: 0.04em;
  white-space: pre;
  opacity: 0.22;
}

.vg-bt-cmd  { color: #93c5fd; opacity: 0.28; }
.vg-bt-ok   { color: #4ade80; opacity: 0.20; }
.vg-bt-warn { color: #fbbf24; opacity: 0.22; }
.vg-bt-dim  { color: #8a8a96; opacity: 0.18; }

/* ── Diagram ring rotation + hue cycle ──────────────────── */
.vg-diagram-ring {
  transform-origin: 320px 370px;
  transform-box: view-box;
  animation:
    diagramRotate 55s linear infinite,
    hueShift      18s ease-in-out infinite;
}
@keyframes diagramRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes hueShift {
  0%   { filter: hue-rotate(0deg);   }   /* blue      */
  20%  { filter: hue-rotate(80deg);  }   /* teal/cyan */
  40%  { filter: hue-rotate(150deg); }   /* green     */
  60%  { filter: hue-rotate(260deg); }   /* purple    */
  80%  { filter: hue-rotate(320deg); }   /* magenta   */
  100% { filter: hue-rotate(360deg); }   /* back to blue */
}

/* ── Shape cycle: circle → hexagon → octagon (12 s) ─────── */
.vg-sh-a {
  animation: shapeA 12s ease-in-out infinite;
}
.vg-sh-b {
  animation: shapeB 12s ease-in-out infinite;
  opacity: 0;
}
.vg-sh-c {
  animation: shapeC 12s ease-in-out infinite;
  opacity: 0;
}
@keyframes shapeA {
  0%,  33% { opacity: 1; }
  42%       { opacity: 0; }
  91%       { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes shapeB {
  0%,  33% { opacity: 0; }
  42%       { opacity: 1; }
  66%       { opacity: 1; }
  75%       { opacity: 0; }
  100%      { opacity: 0; }
}
@keyframes shapeC {
  0%,  66% { opacity: 0; }
  75%       { opacity: 1; }
  91%       { opacity: 1; }
  100%      { opacity: 0; }
}

/* Scanning line */
.vg-scan {
  animation: scan 5s linear infinite;
  transform-origin: 0 0;
}
@keyframes scan {
  0%   { transform: translateY(80px);  opacity: 0; }
  8%   { opacity: 0.7; }
  85%  { opacity: 0.4; }
  100% { transform: translateY(700px); opacity: 0; }
}

/* ── Main drive gear — spins CW on its own axis ─────────── */
.vg-gear-spin {
  transform-box: view-box;
  transform-origin: 430px 305px;
  animation: gearSpinCW 8s linear infinite;
}
@keyframes gearSpinCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Drill tip hot-spot pulse ────────────────────────────── */
.vg-tip-dot {
  animation: tipPulse 1.6s ease-in-out infinite;
}
@keyframes tipPulse {
  0%, 100% { opacity: 0.92; }
  50%       { opacity: 0.15; }
}

/* ── Contact sparks flicker ──────────────────────────────── */
.vg-spark {
  animation: sparkFlicker 0.35s ease-in-out infinite alternate;
}
.vg-spark:nth-of-type(2) { animation-delay: 0.11s; }
.vg-spark:nth-of-type(3) { animation-delay: 0.22s; }
@keyframes sparkFlicker {
  from { opacity: 0.80; }
  to   { opacity: 0.05; }
}

.vg-brand__text {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 36px 40px;
  background: linear-gradient(180deg, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.6) 70%, transparent 100%);
  border-bottom: 1px solid var(--b);
  z-index: 2;
}

.vg-headline {
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.12;
  color: var(--t1);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.vg-brand__sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--t2);
}

/* ── RIGHT: Auth ─────────────────────────────────────────── */

.vg-auth {
  background: var(--bg-1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  overflow-y: auto;
}

.vg-auth__panel {
  width: 100%;
  max-width: 360px;
}

.vg-auth__head { margin-bottom: 32px; }

.vg-logo {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vg-logo__name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--t1);
}

.vg-logo__sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--t3);
}

.vg-logo__tagline {
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  color: #2563eb;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

/* Tabs */
.vg-tabs {
  display: flex;
  border: 1px solid var(--b-hi);
  margin-bottom: 28px;
}

.vg-tab {
  flex: 1;
  padding: 11px 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--t3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.vg-tab:first-child { border-right: 1px solid var(--b-hi); }

.vg-tab--on {
  color: var(--t1);
  background: var(--b);
}

/* Form */
.vg-form {
  display: none;
  flex-direction: column;
  gap: 16px;
}

.vg-form--on { display: flex; }

.vg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vg-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--t3);
  text-transform: uppercase;
}

.vg-input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  background: var(--bg);
  border: 1px solid var(--b-hi);
  border-radius: 0;
  color: var(--t1);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.vg-input::placeholder { color: var(--t3); }
.vg-input:focus        { border-color: var(--accent); }

.vg-submit {
  width: 100%;
  height: 44px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}

.vg-submit:hover    { background: #1d4ed8; }
.vg-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* Auth error message */
.vg-auth-error {
  display: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--crit);
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.25);
  padding: 8px 10px;
}
.vg-auth-error.vg-auth-error--on { display: block; }

.vg-auth-success {
  display: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #4ade80;
  background: rgba(74,222,128,0.07);
  border: 1px solid rgba(74,222,128,0.25);
  padding: 8px 10px;
  margin-bottom: 8px;
}

.vg-auth__forgot-head {
  margin-bottom: 1.25rem;
}

.vg-hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t3);
  text-align: center;
}

.vg-switch {
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vg-auth__compliance {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--b);
}

/* ════════════════════════════════════════════════════════════
   TICKER
   ════════════════════════════════════════════════════════════ */

.vg-ticker {
  height: 44px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg-1);
  border-top: 1px solid var(--b);
  border-bottom: 1px solid var(--b);
}

.vg-ticker__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker 32s linear infinite;
  will-change: transform;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.vg-ticker__item {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--t3);
  padding: 0 32px;
}

.vg-ticker__sep {
  font-size: 6px;
  color: var(--b-hi);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   SECTIONS
   ════════════════════════════════════════════════════════════ */

.vg-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 40px;
  border-bottom: 1px solid var(--b);
}

.vg-section__head { margin-bottom: 56px; }

.vg-section__title {
  font-family: var(--display);
  font-size: clamp(26px, 3.8vw, 52px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.06;
  color: var(--t1);
  text-transform: uppercase;
}

/* ── Capabilities Section — Background Image ────────────── */

.vg-section.vg-reveal--cap {
  max-width: none;
  padding: 96px 40px;
  background-image: url('/static/img/reference_bg.png');
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Dark overlay — ensures text stays legible over any bg image */
.vg-section.vg-reveal--cap::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(5,5,8,0.88) 0%, rgba(5,5,8,0.70) 100%);
  pointer-events: none;
  z-index: 0;
}

.vg-section.vg-reveal--cap .vg-section__head {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

/* Boost title legibility against bg */
.vg-section.vg-reveal--cap .vg-section__title {
  text-shadow: 0 2px 24px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.9);
}

.vg-section.vg-reveal--cap .vg-tag {
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}

/* ── Capability Ticker ───────────────────────────────────── */

.vg-cap-ticker {
  width: 100%;
  overflow: hidden;
  background: var(--bg-1);
  border-top: 1px solid var(--b);
  border-bottom: 1px solid var(--b);
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.15s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.vg-cap-ticker.vg-cap-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scan-line overlay */
.vg-cap-ticker::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.006) 3px,
    rgba(255,255,255,0.006) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* Left/right gradient fade edges */
.vg-cap-ticker::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 6%),
    linear-gradient(270deg, var(--bg) 0%, transparent 6%);
  pointer-events: none;
  z-index: 2;
}

.vg-cap-ticker__track {
  display: flex;
  align-items: stretch;
  white-space: nowrap;
  animation: capTicker 55s linear infinite;
  will-change: transform;
}

@keyframes capTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.vg-cap-item {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 40px;
  border-right: 1px solid var(--b);
  flex-shrink: 0;
  min-width: 240px;
  position: relative;
  cursor: default;
  transition: background 0.2s;
}

.vg-cap-item:hover {
  background: rgba(37, 99, 235, 0.05);
}

.vg-cap-item__tag {
  display: block;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 7px;
  text-transform: uppercase;
  opacity: 0.8;
}

.vg-cap-item__title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--t1);
  text-transform: uppercase;
}

/* Stat variant */
.vg-cap-item--stat {
  min-width: 180px;
  align-items: flex-start;
}

.vg-cap-item--stat .vg-cap-item__val {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--t1);
  line-height: 1;
  margin-bottom: 4px;
}

.vg-cap-item--stat .vg-cap-item__tag {
  margin-bottom: 2px;
}

.vg-cap-item--stat .vg-cap-item__title {
  font-size: 9px;
  color: var(--t3);
  letter-spacing: 0.12em;
}

.vg-cap-sep {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 7px;
  color: var(--b-hi);
  flex-shrink: 0;
  align-self: center;
  opacity: 0.5;
}

/* ── Section Tag Reveal ──────────────────────────────────── */

.vg-section__head .vg-tag {
  display: inline-block;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s;
}

.vg-revealed .vg-section__head .vg-tag {
  opacity: 1;
  transform: translateX(0);
}

/* ── Title Clip-Path Wipe ────────────────────────────────── */

.vg-title-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
}

.vg-revealed .vg-title-wipe {
  clip-path: inset(0 0% 0 0);
}

/* ── Pricing card stagger with scale ────────────────────── */

.vg-plans .vg-child {
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.15, 0.64, 1);
}

.vg-plans .vg-child:nth-child(1) { transition-delay: 0.00s; }
.vg-plans .vg-child:nth-child(2) { transition-delay: 0.08s; }
.vg-plans .vg-child:nth-child(3) { transition-delay: 0.16s; }
.vg-plans .vg-child:nth-child(4) { transition-delay: 0.24s; }

.vg-child {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.38s ease, transform 0.38s ease;
}

.vg-revealed .vg-child { opacity: 1; transform: translateY(0) scale(1); }


/* ── Pricing Wall ────────────────────────────────────────── */

.vg-plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--b);
  border-left: 1px solid var(--b);
}

.vg-plan {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-right: 1px solid var(--b);
  border-bottom: 1px solid var(--b);
  position: relative;
  background: transparent;
}

.vg-plan--hi {
  border-color: var(--accent);
  background: rgba(37,99,235,0.03);
}

.vg-plan__badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 3px 8px;
  margin-bottom: 16px;
  width: fit-content;
}

.vg-plan__tier {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--t3);
  margin-bottom: 16px;
}

.vg-plan__price {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--t1);
  margin-bottom: 4px;
}

.vg-plan__price span {
  font-size: 14px;
  font-weight: 400;
  color: var(--t3);
  letter-spacing: 0;
}

.vg-plan__cycle {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--t3);
  margin-bottom: 24px;
}

.vg-plan__quota {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  margin-bottom: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--b);
  border-radius: 2px;
}

.vg-plan__quota-val {
  font-family: var(--display);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--t1);
  margin-bottom: 4px;
}

.vg-plan__quota--unlimited .vg-plan__quota-val {
  color: var(--accent);
}

.vg-plan__quota-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--t3);
  text-transform: uppercase;
}

.vg-plan--hi .vg-plan__quota {
  border-color: rgba(37,99,235,0.35);
  background: rgba(37,99,235,0.06);
}

.vg-plan__rule {
  height: 1px;
  background: var(--b);
  margin-bottom: 24px;
}

.vg-plan--hi .vg-plan__rule { background: rgba(37,99,235,0.3); }

.vg-plan__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  margin-bottom: 28px;
}

.vg-plan__list li {
  font-family: var(--mono);
  font-size: 11px;
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.vg-plan__list li::before {
  position: absolute;
  left: 0;
}

.vg-plan__list li.on         { color: var(--t1); }
.vg-plan__list li.on::before { content: "✓"; color: var(--ok); }
.vg-plan__list li.off        { color: var(--t3); }
.vg-plan__list li.off::before { content: "—"; color: var(--b-hi); }

.vg-plan__cta {
  display: block;
  text-align: center;
  padding: 11px 8px;
  border: 1px solid var(--b-hi);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--t1);
  transition: border-color 0.15s;
}

.vg-plan__cta:hover { border-color: var(--t2); }

.vg-plan__cta--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.vg-plan__cta--accent:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* ════════════════════════════════════════════════════════════
   FOOTER — Terminal
   ════════════════════════════════════════════════════════════ */

.vg-footer {
  background: var(--bg-1);
  border-top: 1px solid var(--b);
}

.vg-terminal {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 40px;
  border-bottom: 1px solid var(--b);
}

.vg-terminal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.vg-online {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ok);
}

.vg-terminal__out {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--t3);
  line-height: 1.9;
  min-height: 72px;
}

.vg-t-line { display: block; }
.vg-t-ok   { color: var(--ok); }
.vg-t-info { color: #60a5fa; }
.vg-t-warn { color: var(--warn); }

.vg-footer__bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vg-footer__copy {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--t3);
}

.vg-footer__links {
  display: flex;
  gap: 24px;
}

.vg-footer__links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--t3);
  transition: color 0.15s;
}

.vg-footer__links a:hover { color: var(--t1); }

/* ── General child stagger ─────────────────────────────── */
.vg-revealed .vg-child:nth-child(1) { transition-delay: 0.00s; }
.vg-revealed .vg-child:nth-child(2) { transition-delay: 0.06s; }
.vg-revealed .vg-child:nth-child(3) { transition-delay: 0.12s; }
.vg-revealed .vg-child:nth-child(4) { transition-delay: 0.18s; }
.vg-revealed .vg-child:nth-child(5) { transition-delay: 0.24s; }
.vg-revealed .vg-child:nth-child(6) { transition-delay: 0.30s; }

/* ── Features section: longer/smoother reveal for list items ─ */
.vg-features-left.vg-child {
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
              transform 0.65s cubic-bezier(0.22,1,0.36,1);
  transition-delay: 0.05s;
}

.vg-feat-item.vg-child {
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1),
              transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.vg-revealed .vg-feat-item.vg-child:nth-child(1) { transition-delay: 0.12s; }
.vg-revealed .vg-feat-item.vg-child:nth-child(2) { transition-delay: 0.20s; }
.vg-revealed .vg-feat-item.vg-child:nth-child(3) { transition-delay: 0.28s; }
.vg-revealed .vg-feat-item.vg-child:nth-child(4) { transition-delay: 0.36s; }
.vg-revealed .vg-feat-item.vg-child:nth-child(5) { transition-delay: 0.44s; }
.vg-revealed .vg-feat-item.vg-child:nth-child(6) { transition-delay: 0.52s; }

/* ════════════════════════════════════════════════════════════
   FEATURES SECTION — Split layout with bg image
   ════════════════════════════════════════════════════════════ */

.vg-features-section {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--b);
  height: 400px;
}

/* Background image */
.vg-features-bg {
  position: absolute;
  inset: 0;
  background: url('/static/img/reference_bg.png') center center / cover no-repeat;
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}

/* Dark overlay gradient over bg image */
.vg-features-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(5,5,5,0.72) 0%,
    rgba(5,5,5,0.30) 50%,
    rgba(5,5,5,0.55) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Split layout */
.vg-features-split {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  gap: 80px;
  align-items: center;
  height: 100%;
}

/* Left side */
.vg-features-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vg-features-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}

.vg-features-title {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #ffffff;
  text-transform: uppercase;
}

.vg-features-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.50);
  line-height: 1.65;
  max-width: 360px;
}

/* Right side — feature list */
.vg-features-right {
  display: flex;
  flex-direction: column;
}

.vg-feat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.vg-feat-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.vg-feat-item:first-child {
  border-top: 1px solid rgba(255,255,255,0.06);
}

.vg-feat-item__num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  opacity: 0.7;
  flex-shrink: 0;
  padding-top: 3px;
  min-width: 28px;
}

.vg-feat-item__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vg-feat-item__title {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.90);
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.vg-feat-item__body {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   NUMBERS SECTION — Redesigned
   ════════════════════════════════════════════════════════════ */

.vg-numbers-section {
  padding: 80px 40px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.vg-numbers-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vg-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 0 40px;
}

.vg-stat__plus {
  display: block;
  font-family: var(--display);
  font-size: 40px;
  font-weight: 800;
  color: var(--accent);
  line-height: 0.6;
  margin-bottom: -4px;
}

.vg-stat__val {
  font-family: var(--display);
  font-size: 72px;
  font-weight: 800;
  color: var(--t1);
  letter-spacing: -0.04em;
  line-height: 1;
}

.vg-stat__label {
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  max-width: 200px;
  line-height: 1.5;
}

.vg-stat-sep {
  width: 1px;
  height: 80px;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .vg-plans { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .vg-features-section { height: auto; }
  .vg-features-split { grid-template-columns: 1fr; gap: 40px; padding: 60px 32px; }
  .vg-features-sub { max-width: 100%; }
}

@media (max-width: 768px) {
  .vg-entry     { grid-template-columns: 1fr; height: auto; max-height: none; }
  .vg-brand     { height: 52vh; min-height: 340px; }
  .vg-auth      { padding: 36px 24px; }
  .vg-section   { padding: 64px 24px; }
  .vg-plans     { grid-template-columns: 1fr; }
  .vg-cap-item  { padding: 20px 28px; min-width: 200px; }
  .vg-cap-item--stat .vg-cap-item__val { font-size: 30px; }
  .vg-terminal  { padding: 20px 24px; }
  .vg-footer__bar { padding: 16px 24px; }
  .vg-brand__text { padding: 24px; }
  .vg-features-split { padding: 64px 24px; gap: 40px; }
  .vg-numbers-section { padding: 60px 24px; }
  .vg-numbers-grid { flex-direction: column; gap: 40px; }
  .vg-stat-sep { width: 60px; height: 1px; }
  .vg-stat__val { font-size: 52px; }
}

@media (max-width: 480px) {
  .vg-auth__panel { max-width: 100%; }
  .vg-section__title { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════
   LANDING v2 — UX fixes
   ══════════════════════════════════════════════════════ */

/* ── Hero height ── */
.vg-entry {
  height: 82vh;
  max-height: 820px;
}

/* ── Scroll chevron ── */
.vg-scroll-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  opacity: 0.55;
  animation: hintFade 1s ease 1.5s both;
}
.vg-scroll-hint__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--t2);
  text-transform: uppercase;
}
.vg-scroll-hint__chevron {
  color: var(--t2);
  animation: bounce 1.8s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%       { transform: translateY(6px); opacity: .9; }
}
@keyframes hintFade {
  from { opacity: 0; }
  to   { opacity: .55; }
}

/* ── Auth labels — uppercase via CSS ── */
.vg-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10.5px;
}

/* ── Password show/hide wrapper ── */
.vg-pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.vg-pw-wrap .vg-input {
  padding-right: 40px;
}
.vg-pw-eye {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--t3);
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.vg-pw-eye:hover { color: var(--t2); }

/* ── Password strength meter ── */
.vg-strength {
  display: flex;
  gap: 4px;
  margin-top: -8px;
  margin-bottom: 4px;
}
.vg-strength__seg {
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: var(--b-hi);
  transition: background 0.25s ease;
}
.vg-strength__seg.s-weak   { background: #ef4444; }
.vg-strength__seg.s-fair   { background: #f59e0b; }
.vg-strength__seg.s-good   { background: #22c55e; }
.vg-strength__seg.s-strong { background: #2563eb; }
.vg-strength__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--t3);
  margin-top: -4px;
  margin-bottom: 4px;
  min-height: 14px;
  transition: color 0.2s;
}
.vg-confirm-status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  min-height: 14px;
  transition: color 0.2s;
  margin-top: -4px;
}
.vg-confirm-status.match    { color: var(--ok); }
.vg-confirm-status.no-match { color: var(--crit); }

/* ── Features section — fixed height removed ── */
.vg-features-section {
  height: auto !important;
  min-height: 0;
  padding: 72px 0;
}

/* ── Feature body text — visible (was display:none) ── */
.vg-feat-item__body {
  display: block !important;
  font-size: 12.5px;
  color: rgba(255,255,255,0.48);
  line-height: 1.65;
  margin-top: 2px;
}
.vg-feat-item {
  padding: 13px 0;
  cursor: default;
  transition: background 0.15s, padding 0.15s;
}
.vg-feat-item:hover {
  background: rgba(255,255,255,0.025);
  padding-left: 8px;
  padding-right: 8px;
  margin: 0 -8px;
}
.vg-feat-item:hover .vg-feat-item__body {
  color: rgba(255,255,255,0.62);
}

/* ── Demo CTA buttons ── */
.vg-demo .vg-submit {
  margin-top: 0 !important;
  width: auto !important;
  height: 44px !important;
}

/* ── Sticky nav ── */
#vg-sticky-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 52px;
  background: rgba(5,5,5,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transform: translateY(0);
  opacity: 1;
}
.vg-snav__inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 40px;
  gap: 32px;
}
.vg-snav__brand { display: flex; align-items: baseline; gap: 5px; flex-shrink: 0; }
.vg-snav__name  { font-family: var(--display); font-size: 14px; font-weight: 800; letter-spacing: 0.06em; color: var(--t1); }
.vg-snav__sub   { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--t3); }
.vg-snav__links { display: flex; align-items: center; gap: 4px; flex: 1; }
.vg-snav__link  {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  color: var(--t3); padding: 6px 12px; border-radius: 2px;
  transition: color 0.15s, background 0.15s; text-decoration: none;
}
.vg-snav__link:hover           { color: var(--t1); background: rgba(255,255,255,0.05); }
.vg-snav__link--active         { color: var(--t1); }
.vg-snav__cta                  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vg-snav__signin               { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: var(--t2); padding: 6px 12px; text-decoration: none; transition: color 0.15s; }
.vg-snav__signin:hover         { color: var(--t1); }
.vg-snav__register             { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: #fff; background: var(--accent); padding: 7px 16px; text-decoration: none; transition: background 0.15s; }
.vg-snav__register:hover       { background: #1d4ed8; }

/* ── Burger button ── */
.vg-snav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: none;
  border: 1px solid var(--b-hi);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
}
.vg-snav__burger span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--t2);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.vg-snav__burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vg-snav__burger.is-open span:nth-child(2) { opacity: 0; }
.vg-snav__burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Mobile nav panel ── */
.vg-mobile-nav {
  display: none;
  position: fixed;
  top: 52px; left: 0; right: 0;
  z-index: 199;
  background: rgba(5,5,5,0.97);
  border-bottom: 1px solid var(--b-hi);
  flex-direction: column;
  padding: 16px 20px 24px;
  gap: 4px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.vg-mobile-nav.is-open { display: flex; }
.vg-mobile-nav__link {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--t2);
  padding: 12px 4px;
  border-bottom: 1px solid var(--b);
  text-decoration: none;
  transition: color 0.15s;
}
.vg-mobile-nav__link:last-of-type { border-bottom: none; }
.vg-mobile-nav__link:hover { color: var(--t1); }
.vg-mobile-nav__cta {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.vg-mobile-nav__cta .vg-snav__register { flex: 1; text-align: center; }

@media (max-width: 768px) {
  .vg-snav__links { display: none; }
  .vg-snav__cta   { display: none; }
  .vg-snav__burger { display: flex; }
  .vg-snav__inner { padding: 0 20px; gap: 16px; }
  .vg-entry { margin-top: 52px; }
}

/* ════════════════════════════════════════════════════════════
   DIAGRAM STATS OVERLAY — bottom of hero diagram
   ════════════════════════════════════════════════════════════ */

.vg-diagram-stats {
  position: absolute;
  bottom: 48px;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background: rgba(5,5,5,0.78);
  border-top: 1px solid rgba(37,99,235,0.25);
  border-bottom: 1px solid rgba(37,99,235,0.25);
  padding: 18px 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.vg-dstat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 0 12px;
}

.vg-dstat__plus {
  display: block;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  color: #2563eb;
  line-height: 0.6;
  margin-bottom: -2px;
}

.vg-dstat__val {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  color: #2563eb;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: 0 0 20px rgba(37,99,235,0.4);
}

.vg-dstat__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

.vg-dstat-sep {
  width: 1px;
  height: 52px;
  background: rgba(37,99,235,0.3);
  flex-shrink: 0;
}

/* BUILT FOR TEAMS RUNNING — top-right of diagram */
.vg-diagram-brand-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #2563eb;
  text-transform: uppercase;
  background: rgba(5,5,5,0.75);
  padding: 5px 10px;
  border: 1px solid rgba(37,99,235,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 768px) {
  .vg-diagram-stats { bottom: 40px; padding: 12px 8px; }
  .vg-dstat__val    { font-size: 24px; }
  .vg-dstat__label  { font-size: 8px; }
  .vg-diagram-brand-tag { font-size: 8px; top: 14px; right: 14px; }
}