/* ============================================================
   BG HERO INTELLIGENCE ENGINE — styles
   ============================================================ */

:root {
  --hi-bg: #02060d;
  --hi-bg-2: #050b16;
  --hi-line: rgba(255,255,255,0.08);
  --hi-line-2: rgba(255,255,255,0.14);
  --hi-text: #eaf2ff;
  --hi-text-2: rgba(234,242,255,0.66);
  --hi-text-3: rgba(234,242,255,0.42);
  --hi-cyan: #4FC8FF;
  --hi-cyan-2: #2A9CD8;
  --hi-mint: #22C55E;
  --hi-amber: #F59E0B;
  --hi-glow: 0 0 0 1px rgba(79,200,255,0.16), 0 18px 60px rgba(79,200,255,0.10);
}

/* ---------- HERO SECTION ---------- */
.bgh {
  position: relative;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(79,200,255,0.08), transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(34,197,94,0.05), transparent 50%),
    linear-gradient(180deg, var(--hi-bg) 0%, var(--hi-bg-2) 100%);
  color: var(--hi-text);
  padding: 96px 0 48px;
  overflow: hidden;
  font-family: var(--font-display, system-ui);
  border-bottom: 1px solid var(--hi-line);
}
.bgh::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(79,200,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,200,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
}
.bgh-wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
.bgh-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
@media (max-width: 1100px) { .bgh-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- HERO COPY ---------- */
.bgh-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono, ui-monospace);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hi-cyan); padding: 8px 14px;
  background: rgba(79,200,255,0.06);
  border: 1px solid rgba(79,200,255,0.22);
  border-radius: 100px;
}
.bgh-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hi-cyan); box-shadow: 0 0 10px var(--hi-cyan); }

.bgh-h1 {
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.04; letter-spacing: -0.02em; font-weight: 600;
  margin: 22px 0 0;
  text-wrap: balance;
}
.bgh-h1 .ac { color: transparent; background: linear-gradient(180deg, #4FC8FF, #2A9CD8); -webkit-background-clip: text; background-clip: text; }
.bgh-sub {
  font-size: 18px; line-height: 1.55; color: var(--hi-text-2);
  margin: 22px 0 0; max-width: 580px; text-wrap: pretty;
}

.bgh-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
.bgh-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 4px;
  font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 160ms, box-shadow 160ms, border-color 160ms, background 160ms;
}
.bgh-cta.primary {
  background: linear-gradient(180deg, #4FC8FF 0%, #2A9CD8 100%);
  color: #02101a; font-weight: 600;
  box-shadow: 0 8px 24px rgba(79,200,255,0.28);
}
.bgh-cta.primary:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(79,200,255,0.42); }
.bgh-cta.ghost { color: var(--hi-text); border-color: var(--hi-line-2); background: rgba(255,255,255,0.02); }
.bgh-cta.ghost:hover { border-color: var(--hi-cyan); color: var(--hi-cyan); }
.bgh-cta.link { color: var(--hi-text-2); padding: 14px 8px; }
.bgh-cta.link:hover { color: var(--hi-cyan); }
.bgh-cta svg { width: 14px; height: 14px; }

.bgh-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.bgh-badge {
  font-family: var(--font-mono, ui-monospace);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hi-text-2);
  padding: 6px 10px; border: 1px solid var(--hi-line); border-radius: 3px;
  background: rgba(255,255,255,0.02);
}

/* ---------- MANUAL SELECTOR ---------- */
.bgh-selector {
  margin-top: 36px; padding-top: 24px;
  border-top: 1px dashed var(--hi-line);
}
.bgh-selector-lbl {
  font-family: var(--font-mono, ui-monospace);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hi-text-3); margin-bottom: 12px;
}
.bgh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 880px) { .bgh-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .bgh-chips::-webkit-scrollbar { display: none; } }
.bgh-chip {
  flex-shrink: 0; padding: 8px 14px; border-radius: 100px; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid var(--hi-line);
  color: var(--hi-text-2); font-size: 13px; font-weight: 500;
  transition: all 160ms;
}
.bgh-chip:hover { color: var(--hi-text); border-color: var(--hi-line-2); }
.bgh-chip.active {
  background: rgba(79,200,255,0.10); border-color: var(--hi-cyan); color: var(--hi-cyan);
  box-shadow: 0 0 0 3px rgba(79,200,255,0.08);
}
.bgh-chip-clear {
  margin-left: 4px; padding: 8px 10px; border-radius: 100px; cursor: pointer;
  background: transparent; border: 1px dashed var(--hi-line);
  color: var(--hi-text-3); font-size: 12px;
}
.bgh-chip-clear:hover { color: var(--hi-amber); border-color: var(--hi-amber); }

/* ---------- VARIANT REASON STRIP ---------- */
.bgh-reason {
  margin-top: 14px; font-family: var(--font-mono, ui-monospace);
  font-size: 11px; letter-spacing: 0.06em; color: var(--hi-text-3);
  display: flex; align-items: center; gap: 10px;
}
.bgh-reason b { color: var(--hi-mint); font-weight: 500; }
.bgh-reason .sep { color: var(--hi-line-2); }

/* ---------- HERO VISUAL CHROME ---------- */
.bgh-vis-wrap {
  position: relative;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(79,200,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--hi-line-2);
  padding: 14px;
  box-shadow: var(--hi-glow);
  min-height: 460px;
}

.hv-chrome { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.hv-chrome-bar {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono, ui-monospace);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hi-text-3);
  padding: 6px 4px; border-bottom: 1px solid var(--hi-line);
}
.hv-chrome-tag { color: var(--hi-cyan); }
.hv-chrome-status { display: flex; align-items: center; gap: 6px; color: var(--hi-mint); }
.hv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hi-mint); box-shadow: 0 0 8px var(--hi-mint); animation: hv-pulse 1.6s ease-in-out infinite; }
@keyframes hv-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.hv-chrome-body { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.hv-mint { color: var(--hi-mint); }
.hv-cyan { color: var(--hi-cyan); }
.hv-amber { color: var(--hi-amber); }
.hv-acc-mint .hv-chrome-tag { color: var(--hi-mint); }
.hv-acc-amber .hv-chrome-tag { color: var(--hi-amber); }

/* SYSTEMS */
.hv-sys-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hv-sys-mod {
  background: rgba(255,255,255,0.025); border: 1px solid var(--hi-line);
  border-radius: 6px; padding: 12px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.hv-sys-mod.hv-c-mint { border-color: rgba(34,197,94,0.28); }
.hv-sys-mod.hv-c-cyan { border-color: rgba(79,200,255,0.28); }
.hv-sys-mod.hv-c-amber { border-color: rgba(245,158,11,0.28); }
.hv-sys-k { font-family: var(--font-mono, ui-monospace); font-size: 10px; letter-spacing: 0.18em; color: var(--hi-text-3); }
.hv-sys-n { font-size: 12px; color: var(--hi-text-2); }
.hv-sys-v { font-size: 22px; font-weight: 600; color: var(--hi-text); margin-top: 4px; letter-spacing: -0.01em; }
.hv-sys-d { font-family: var(--font-mono, ui-monospace); font-size: 10px; letter-spacing: 0.1em; color: var(--hi-text-3); }
.hv-sys-foot {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono, ui-monospace); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--hi-text-3); padding: 10px 4px 0; border-top: 1px solid var(--hi-line);
}
.hv-tick { width: 6px; height: 6px; border-radius: 50%; background: var(--hi-mint); box-shadow: 0 0 6px var(--hi-mint); }

/* AGENTS */
.hv-agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hv-agent {
  position: relative; padding: 10px 12px; border-radius: 6px;
  background: rgba(255,255,255,0.025); border: 1px solid var(--hi-line);
}
.hv-agent.hv-c-mint { border-color: rgba(34,197,94,0.28); }
.hv-agent.hv-c-cyan { border-color: rgba(79,200,255,0.28); }
.hv-agent.hv-c-amber { border-color: rgba(245,158,11,0.28); }
.hv-agent-k { font-family: var(--font-mono, ui-monospace); font-size: 10px; letter-spacing: 0.18em; color: var(--hi-cyan); }
.hv-agent-n { font-size: 13px; color: var(--hi-text); margin-top: 2px; }
.hv-agent-t { font-size: 11px; color: var(--hi-text-3); margin-top: 4px; }
.hv-agent-pulse { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--hi-mint); box-shadow: 0 0 6px var(--hi-mint); animation: hv-pulse 1.4s infinite; }
.hv-feed { background: rgba(0,0,0,0.3); border: 1px solid var(--hi-line); border-radius: 6px; padding: 10px 12px; font-family: var(--font-mono, ui-monospace); font-size: 11px; line-height: 1.7; color: var(--hi-text-2); }
.hv-feed-t { color: var(--hi-cyan); margin-right: 8px; }

/* PIPELINE */
.hv-pipe { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.hv-pipe-step {
  padding: 12px 6px; text-align: center;
  background: rgba(255,255,255,0.02); border: 1px solid var(--hi-line);
  border-radius: 4px; transition: all 240ms;
}
.hv-pipe-step.done { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.06); }
.hv-pipe-step.on { border-color: var(--hi-cyan); background: rgba(79,200,255,0.10); box-shadow: 0 0 0 3px rgba(79,200,255,0.12); }
.hv-pipe-num { font-family: var(--font-mono, ui-monospace); font-size: 10px; letter-spacing: 0.16em; color: var(--hi-text-3); }
.hv-pipe-step.on .hv-pipe-num { color: var(--hi-cyan); }
.hv-pipe-step.done .hv-pipe-num { color: var(--hi-mint); }
.hv-pipe-lbl { font-size: 12px; margin-top: 4px; color: var(--hi-text); }
.hv-pipe-detail { padding: 12px 14px; background: rgba(0,0,0,0.3); border: 1px solid var(--hi-line); border-radius: 6px; }
.hv-pipe-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; border-bottom: 1px dashed var(--hi-line); }
.hv-pipe-row:last-child { border-bottom: none; }
.hv-pipe-row span { color: var(--hi-text-3); font-family: var(--font-mono, ui-monospace); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.hv-pipe-row b { color: var(--hi-text); font-weight: 500; }

/* SURVEILLANCE */
.hv-surv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.hv-surv-cam {
  position: relative; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden;
  background: linear-gradient(135deg, #0a1420, #0f1a2a);
  border: 1px solid var(--hi-line);
}
.hv-surv-noise { position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.04) 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 8px 8px, 12px 12px; opacity: 0.6; }
.hv-surv-box {
  position: absolute; top: 28%; left: 32%; width: 40%; height: 44%;
  border: 2px solid var(--hi-amber); border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 0 12px rgba(245,158,11,0.4);
  animation: hv-surv-scan 2.4s ease-in-out infinite alternate;
}
@keyframes hv-surv-scan { from { transform: translate(0, 0); } to { transform: translate(6%, -4%); } }
.hv-surv-label { position: absolute; bottom: 4px; left: 6px; font-family: var(--font-mono, ui-monospace); font-size: 9px; letter-spacing: 0.16em; color: var(--hi-text-3); }
.hv-surv-events { display: flex; flex-direction: column; gap: 4px; }
.hv-surv-evt {
  display: grid; grid-template-columns: 60px 60px 1fr 50px; gap: 8px; align-items: center;
  padding: 6px 10px; font-family: var(--font-mono, ui-monospace); font-size: 11px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--hi-line); border-radius: 4px;
}
.hv-surv-t { color: var(--hi-text-3); }
.hv-surv-c { color: var(--hi-cyan); }
.hv-surv-e { color: var(--hi-text); font-family: var(--font-display, system-ui); font-size: 12px; }
.hv-surv-s { text-align: right; font-weight: 600; letter-spacing: 0.1em; font-size: 10px; }
.hv-sev-low .hv-surv-s { color: var(--hi-text-3); }
.hv-sev-med .hv-surv-s { color: var(--hi-amber); }
.hv-sev-high .hv-surv-s { color: #ef4444; }

/* VOICECHAT */
.hv-vc { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.hv-vc-call {
  padding: 14px; border-radius: 6px; background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.3); display: flex; flex-direction: column; gap: 10px;
}
.hv-vc-label { font-family: var(--font-mono, ui-monospace); font-size: 10px; letter-spacing: 0.16em; color: var(--hi-mint); }
.hv-vc-wave { display: flex; gap: 3px; align-items: center; height: 36px; }
.hv-vc-wave span { display: block; width: 3px; background: var(--hi-mint); border-radius: 2px; animation: hv-wave 1.2s ease-in-out infinite; }
@keyframes hv-wave { 0%, 100% { height: 20%; } 50% { height: 90%; } }
.hv-vc-meta { font-family: var(--font-mono, ui-monospace); font-size: 10.5px; letter-spacing: 0.08em; color: var(--hi-text-3); }
.hv-vc-chat { padding: 12px; border-radius: 6px; background: rgba(0,0,0,0.3); border: 1px solid var(--hi-line); display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.hv-vc-msg { padding: 6px 10px; border-radius: 8px; max-width: 90%; }
.hv-vc-msg.them { background: rgba(255,255,255,0.05); align-self: flex-start; color: var(--hi-text-2); }
.hv-vc-msg.us { background: rgba(79,200,255,0.12); border: 1px solid rgba(79,200,255,0.3); align-self: flex-end; color: var(--hi-text); }
.hv-vc-chans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; background: rgba(0,0,0,0.3); border: 1px solid var(--hi-line); border-radius: 6px; font-family: var(--font-mono, ui-monospace); font-size: 10.5px; letter-spacing: 0.08em; color: var(--hi-text-2); }
.hv-vc-chans > div { display: flex; align-items: center; gap: 6px; }

/* PRODUCTIVITY */
.hv-prod { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.hv-prod-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--hi-line); border-radius: 6px; }
.hv-prod-seat { aspect-ratio: 1; position: relative; border: 1px solid var(--hi-line); border-radius: 3px; background: rgba(255,255,255,0.02); display: flex; align-items: flex-end; padding: 2px; overflow: hidden; }
.hv-prod-seat span { position: absolute; bottom: 2px; left: 2px; font-family: var(--font-mono, ui-monospace); font-size: 7px; color: var(--hi-text-3); letter-spacing: 0.04em; }
.hv-prod-bar { width: 100%; border-radius: 1px; background: var(--hi-mint); opacity: 0.5; }
.hv-seat-a .hv-prod-bar { background: var(--hi-mint); opacity: 0.6; }
.hv-seat-b .hv-prod-bar { background: var(--hi-cyan); opacity: 0.55; }
.hv-seat-p .hv-prod-bar { background: var(--hi-text-3); opacity: 0.4; }
.hv-prod-stats { display: grid; grid-template-rows: repeat(4, 1fr); gap: 4px; }
.hv-prod-stats > div { padding: 8px 10px; background: rgba(255,255,255,0.025); border: 1px solid var(--hi-line); border-radius: 4px; }
.hv-prod-stats b { font-size: 18px; font-weight: 600; color: var(--hi-mint); display: block; }
.hv-prod-stats span { font-family: var(--font-mono, ui-monospace); font-size: 10px; letter-spacing: 0.1em; color: var(--hi-text-3); text-transform: uppercase; }

/* GEM */
.hv-gem-top { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; }
.hv-gem-wallet, .hv-gem-launch { padding: 12px; background: rgba(255,255,255,0.025); border: 1px solid var(--hi-line); border-radius: 6px; }
.hv-gem-wallet span, .hv-gem-launch span { font-family: var(--font-mono, ui-monospace); font-size: 10px; letter-spacing: 0.14em; color: var(--hi-text-3); display: block; }
.hv-gem-wallet b, .hv-gem-launch b { font-size: 18px; font-weight: 600; color: var(--hi-text); display: block; margin-top: 4px; }
.hv-gem-wallet i { font-style: normal; font-family: var(--font-mono, ui-monospace); font-size: 10.5px; color: var(--hi-mint); display: block; margin-top: 2px; }
.hv-gem-mix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; background: rgba(0,0,0,0.3); border: 1px solid var(--hi-line); border-radius: 6px; }
.hv-gem-bar { height: 10px; background: rgba(255,255,255,0.06); border-radius: 100px; overflow: hidden; }
.hv-gem-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--hi-cyan), var(--hi-cyan-2)); }
.hv-gem-recs { padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--hi-line); border-radius: 6px; font-size: 12px; line-height: 1.8; color: var(--hi-text-2); }
.hv-gem-recs > div { display: flex; gap: 8px; align-items: center; }

/* STABLECOIN */
.hv-stc-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hv-stc-tile { padding: 12px; background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.28); border-radius: 6px; }
.hv-stc-tile span { font-family: var(--font-mono, ui-monospace); font-size: 10px; letter-spacing: 0.14em; color: var(--hi-text-3); display: block; }
.hv-stc-tile b { font-size: 17px; font-weight: 600; color: var(--hi-text); display: block; margin-top: 4px; }
.hv-stc-flows { display: flex; flex-direction: column; gap: 6px; }
.hv-stc-flow { display: grid; grid-template-columns: 90px 1fr 140px; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.025); border: 1px solid var(--hi-line); border-radius: 4px; }
.hv-stc-flow span { font-family: var(--font-mono, ui-monospace); font-size: 10.5px; letter-spacing: 0.14em; color: var(--hi-text-3); }
.hv-stc-flow b { color: var(--hi-text); font-weight: 500; }
.hv-stc-flow i { font-style: normal; font-family: var(--font-mono, ui-monospace); font-size: 10.5px; color: var(--hi-mint); text-align: right; }
.hv-stc-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--hi-line); border-radius: 6px; font-family: var(--font-mono, ui-monospace); font-size: 11px; color: var(--hi-text-2); letter-spacing: 0.06em; }
.hv-stc-foot b { color: var(--hi-mint); font-weight: 500; }

/* DATA */
.hv-data-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hv-data-tile { padding: 10px 12px; background: rgba(255,255,255,0.025); border: 1px solid var(--hi-line); border-radius: 5px; }
.hv-data-tile span { font-family: var(--font-mono, ui-monospace); font-size: 10px; letter-spacing: 0.12em; color: var(--hi-text-3); display: block; }
.hv-data-tile b { font-size: 17px; font-weight: 600; color: var(--hi-text); display: block; margin-top: 2px; }
.hv-data-chart { padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--hi-line); border-radius: 6px; height: 120px; }
.hv-data-chart svg { width: 100%; height: 100%; }
.hv-data-insights { padding: 10px 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--hi-line); border-radius: 6px; font-size: 12px; line-height: 1.8; color: var(--hi-text-2); }
.hv-data-insights > div { display: flex; gap: 8px; align-items: center; }

/* LLM */
.hv-llm { padding: 14px; background: rgba(0,0,0,0.3); border: 1px solid var(--hi-line); border-radius: 6px; display: flex; flex-direction: column; gap: 12px; }
.hv-llm-q { font-family: var(--font-mono, ui-monospace); font-size: 12px; color: var(--hi-cyan); padding-bottom: 8px; border-bottom: 1px solid var(--hi-line); }
.hv-llm-a { font-size: 13px; line-height: 1.6; color: var(--hi-text); }
.hv-llm-a b { color: var(--hi-cyan); font-weight: 500; }
.hv-llm-src { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px dashed var(--hi-line); font-family: var(--font-mono, ui-monospace); font-size: 10.5px; color: var(--hi-text-3); letter-spacing: 0.04em; }
.hv-llm-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 12px; background: rgba(255,255,255,0.025); border: 1px solid var(--hi-line); border-radius: 6px; font-family: var(--font-mono, ui-monospace); font-size: 10.5px; color: var(--hi-text-2); letter-spacing: 0.06em; }
.hv-llm-foot b { color: var(--hi-cyan); font-weight: 500; }

/* VISION */
.hv-vis { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.hv-vis-frame { position: relative; aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #1a2440, #0a1420); border: 1px solid var(--hi-line); }
.hv-vis-noise { position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 6px 6px; }
.hv-vis-bbox { position: absolute; border: 2px solid var(--hi-cyan); border-radius: 2px; font-family: var(--font-mono, ui-monospace); font-size: 9px; padding: 2px 4px; color: var(--hi-cyan); background: rgba(0,0,0,0.5); }
.hv-vis-bbox.amber { border-color: var(--hi-amber); color: var(--hi-amber); }
.hv-vis-side { display: flex; flex-direction: column; gap: 6px; }
.hv-vis-row { display: flex; justify-content: space-between; padding: 8px 12px; background: rgba(255,255,255,0.025); border: 1px solid var(--hi-line); border-radius: 4px; }
.hv-vis-row span { font-family: var(--font-mono, ui-monospace); font-size: 10.5px; letter-spacing: 0.14em; color: var(--hi-text-3); }
.hv-vis-row b { color: var(--hi-text); font-weight: 500; font-size: 12px; }

/* CUSTOM */
.hv-cus { display: flex; flex-direction: column; gap: 4px; }
.hv-cus-phase { display: grid; grid-template-columns: 24px 1fr 32px; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--hi-line); border-radius: 4px; background: rgba(255,255,255,0.02); }
.hv-cus-phase.hv-cus-done { border-color: rgba(34,197,94,0.3); }
.hv-cus-phase.hv-cus-now { border-color: var(--hi-cyan); background: rgba(79,200,255,0.06); }
.hv-cus-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hi-text-3); margin: 0 auto; }
.hv-cus-done .hv-cus-dot { background: var(--hi-mint); box-shadow: 0 0 8px var(--hi-mint); }
.hv-cus-now .hv-cus-dot { background: var(--hi-cyan); box-shadow: 0 0 10px var(--hi-cyan); animation: hv-pulse 1.4s infinite; }
.hv-cus-n { font-size: 13px; color: var(--hi-text); }
.hv-cus-st { font-family: var(--font-mono, ui-monospace); font-size: 13px; text-align: right; color: var(--hi-text-3); }
.hv-cus-done .hv-cus-st { color: var(--hi-mint); }
.hv-cus-now .hv-cus-st { color: var(--hi-cyan); }
.hv-cus-foot { padding: 10px 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--hi-line); border-radius: 6px; font-family: var(--font-mono, ui-monospace); font-size: 10.5px; color: var(--hi-text-2); letter-spacing: 0.04em; }
.hv-cus-foot div { padding: 3px 0; }
.hv-cus-foot b { color: var(--hi-cyan); font-weight: 500; }

/* TEAMS */
.hv-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hv-team-role { position: relative; padding: 12px 8px; text-align: center; background: rgba(34,197,94,0.04); border: 1px solid rgba(34,197,94,0.22); border-radius: 5px; }
.hv-team-k { font-family: var(--font-mono, ui-monospace); font-size: 11px; letter-spacing: 0.16em; color: var(--hi-mint); }
.hv-team-n { font-size: 11px; color: var(--hi-text-2); margin-top: 4px; }
.hv-team-pulse { position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--hi-mint); }
.hv-team-foot { padding: 10px 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--hi-line); border-radius: 6px; font-family: var(--font-mono, ui-monospace); font-size: 10.5px; color: var(--hi-text-2); letter-spacing: 0.04em; line-height: 1.7; }
.hv-team-foot b { color: var(--hi-mint); font-weight: 500; }

/* ============================================================
   DEV OVERLAY (intent score panel)
   ============================================================ */
.bgh-dev {
  position: fixed; right: 20px; bottom: 96px; width: 340px; z-index: 50;
  background: rgba(2,6,13,0.96); border: 1px solid var(--hi-line-2); border-radius: 8px;
  font-family: var(--font-mono, ui-monospace); font-size: 11px; color: var(--hi-text-2);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(79,200,255,0.1);
  backdrop-filter: blur(8px);
}
.bgh-dev-h { padding: 12px 14px; border-bottom: 1px solid var(--hi-line); display: flex; justify-content: space-between; align-items: center; }
.bgh-dev-h b { color: var(--hi-cyan); font-weight: 500; letter-spacing: 0.14em; }
.bgh-dev-h button { background: transparent; border: 1px solid var(--hi-line); border-radius: 3px; color: var(--hi-text-3); padding: 4px 8px; cursor: pointer; font-family: inherit; font-size: 10px; }
.bgh-dev-h button:hover { border-color: var(--hi-amber); color: var(--hi-amber); }
.bgh-dev-body { max-height: 420px; overflow-y: auto; padding: 10px 14px; }
.bgh-dev-section { margin-bottom: 12px; }
.bgh-dev-lbl { color: var(--hi-text-3); letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; margin-bottom: 4px; }
.bgh-dev-row { display: flex; justify-content: space-between; padding: 3px 0; gap: 8px; }
.bgh-dev-row b { color: var(--hi-text); font-weight: 400; }
.bgh-dev-rank { display: flex; flex-direction: column; gap: 4px; }
.bgh-dev-rank-row { display: grid; grid-template-columns: 1fr 60px 30px; gap: 8px; align-items: center; padding: 4px 8px; border: 1px solid var(--hi-line); border-radius: 3px; background: rgba(255,255,255,0.02); }
.bgh-dev-rank-row.top { border-color: var(--hi-cyan); background: rgba(79,200,255,0.06); color: var(--hi-cyan); }
.bgh-dev-rank-bar { height: 4px; background: rgba(255,255,255,0.08); border-radius: 100px; overflow: hidden; }
.bgh-dev-rank-bar span { display: block; height: 100%; background: var(--hi-cyan); }
.bgh-dev-reasons { padding: 8px 10px; background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.22); border-radius: 4px; }
.bgh-dev-reasons div { padding: 2px 0; color: var(--hi-mint); font-size: 10.5px; }

/* ============================================================
   UTM SIMULATOR
   ============================================================ */
.bgh-sim {
  position: fixed; left: 20px; bottom: 20px; z-index: 50; width: 320px;
  background: rgba(2,6,13,0.96); border: 1px solid var(--hi-line-2); border-radius: 8px;
  font-family: var(--font-mono, ui-monospace); font-size: 11px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
}
.bgh-sim-h { padding: 10px 14px; border-bottom: 1px solid var(--hi-line); color: var(--hi-cyan); letter-spacing: 0.14em; display: flex; justify-content: space-between; align-items: center; }
.bgh-sim-h button { background: transparent; border: none; color: var(--hi-text-3); cursor: pointer; font-family: inherit; }
.bgh-sim-body { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.bgh-sim-body button {
  text-align: left; padding: 8px 10px; font-family: inherit; font-size: 10.5px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--hi-line); border-radius: 3px;
  color: var(--hi-text-2); cursor: pointer; transition: all 160ms;
}
.bgh-sim-body button:hover { border-color: var(--hi-cyan); color: var(--hi-cyan); }

/* ============================================================
   PRODUCT DISCOVERY GRID
   ============================================================ */
.bgpd { padding: 96px 0; background: var(--hi-bg-2); border-bottom: 1px solid var(--hi-line); }
.bgpd-wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.bgpd-h {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 36px; gap: 24px; flex-wrap: wrap;
}
.bgpd-h h2 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.02em; margin: 0; color: var(--hi-text); font-weight: 600; }
.bgpd-h h2 .ac { color: var(--hi-cyan); }
.bgpd-h p { color: var(--hi-text-2); margin: 6px 0 0; font-size: 16px; max-width: 480px; }
.bgpd-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.bgpd-filter {
  font-family: var(--font-mono, ui-monospace); font-size: 11px; letter-spacing: 0.1em;
  padding: 6px 12px; border-radius: 100px; cursor: pointer; text-transform: uppercase;
  background: rgba(255,255,255,0.03); border: 1px solid var(--hi-line); color: var(--hi-text-2);
}
.bgpd-filter.active { background: rgba(79,200,255,0.10); border-color: var(--hi-cyan); color: var(--hi-cyan); }
.bgpd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.bgpd-card {
  position: relative; padding: 0 0 24px 0; border-radius: 10px; cursor: pointer; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid var(--hi-line); color: inherit; text-decoration: none;
  transition: all 200ms; display: flex; flex-direction: column; gap: 10px; min-height: 220px;
}
.bgpd-card:hover { border-color: var(--hi-cyan); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(79,200,255,0.18); }
.bgpd-card:hover .bgpd-card-img img { transform: scale(1.06); }
.bgpd-card-img { position: relative; height: 120px; overflow: hidden; background: rgba(0,0,0,0.4); }
.bgpd-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.bgpd-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,12,28,0.15) 0%, rgba(0,12,28,0.55) 70%, rgba(0,12,28,0.85) 100%); }

/* ----- Vision card animated scene ----- */
.vca {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(245,181,68,0.10) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #0a1322 0%, #060a14 100%);
  overflow: hidden;
}
.vca-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(79,200,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,200,255,0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(80% 100% at 50% 50%, #000 30%, transparent 100%);
}
.vca-scan {
  position: absolute; left: 0; right: 0; top: -20%;
  height: 38%;
  background: linear-gradient(180deg, rgba(79,200,255,0) 0%, rgba(79,200,255,0.10) 50%, rgba(79,200,255,0) 100%);
  animation: vca-scan 3.4s cubic-bezier(.4,0,.6,1) infinite;
  pointer-events: none;
}
@keyframes vca-scan {
  0%   { transform: translateY(0%); }
  100% { transform: translateY(360%); }
}
.vca-box {
  position: absolute;
  border: 1px solid rgba(79,200,255,0.85);
  box-shadow: 0 0 0 1px rgba(79,200,255,0.10), inset 0 0 0 1px rgba(79,200,255,0.10);
  opacity: 0;
  animation: vca-box-pop 8s ease-in-out infinite;
}
.vca-box::before, .vca-box::after,
.vca-box > i::before, .vca-box > i::after {
  content: ''; position: absolute; width: 6px; height: 6px;
  border: 1.5px solid #4FC8FF;
}
.vca-box::before { top: -1.5px; left: -1.5px; border-right: 0; border-bottom: 0; }
.vca-box::after  { top: -1.5px; right: -1.5px; border-left: 0; border-bottom: 0; }
.vca-box > i { position: absolute; inset: 0; display: block; pointer-events: none; }
.vca-box > i::before { bottom: -1.5px; left: -1.5px; border-right: 0; border-top: 0; }
.vca-box > i::after  { bottom: -1.5px; right: -1.5px; border-left: 0; border-top: 0; }
.vca-box .vca-tag {
  position: absolute; top: -16px; left: 0;
  font-family: ui-monospace, monospace;
  font-size: 8.5px; letter-spacing: 0.06em;
  color: #0a1322; background: #4FC8FF;
  padding: 1px 5px; border-radius: 2px; white-space: nowrap;
}
.vca-box.b1 { left: 11%; top: 28%; width: 22%; height: 46%; animation-delay: 0s; }
.vca-box.b2 { left: 41%; top: 18%; width: 26%; height: 32%; animation-delay: 1.6s; }
.vca-box.b3 { left: 70%; top: 44%; width: 22%; height: 42%; animation-delay: 3.6s; }
.vca-box.b4 { left: 30%; top: 60%; width: 17%; height: 26%; animation-delay: 5.4s; }
@keyframes vca-box-pop {
  0%, 8%   { opacity: 0; transform: scale(0.92); }
  12%, 28% { opacity: 1; transform: scale(1); }
  32%, 100%{ opacity: 0; transform: scale(1); }
}
.vca-cursor {
  position: absolute; top: 0; left: 0;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  animation: vca-cursor-path 8s cubic-bezier(.6,.0,.4,1) infinite;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  pointer-events: none;
  z-index: 3;
}
.vca-cursor svg { display: block; width: 100%; height: 100%; }
.vca-cursor::after {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,200,255,0.45) 0%, rgba(79,200,255,0) 70%);
  opacity: 0; transform: scale(0.4);
  animation: vca-click 8s ease-in-out infinite;
}
@keyframes vca-cursor-path {
  0%    { top: 18%; left: 8%; }
  10%   { top: 50%; left: 22%; }   /* lands on box 1 */
  22%   { top: 50%; left: 22%; }
  30%   { top: 32%; left: 54%; }   /* box 2 */
  44%   { top: 32%; left: 54%; }
  54%   { top: 64%; left: 81%; }   /* box 3 */
  68%   { top: 64%; left: 81%; }
  78%   { top: 72%; left: 38%; }   /* box 4 */
  90%   { top: 72%; left: 38%; }
  100%  { top: 18%; left: 8%; }
}
@keyframes vca-click {
  0%,18%   { opacity: 0; transform: scale(0.4); }
  20%      { opacity: 0.9; transform: scale(1); }
  26%      { opacity: 0; transform: scale(1.6); }
  38%      { opacity: 0; transform: scale(0.4); }
  40%      { opacity: 0.9; transform: scale(1); }
  46%      { opacity: 0; transform: scale(1.6); }
  62%      { opacity: 0; transform: scale(0.4); }
  64%      { opacity: 0.9; transform: scale(1); }
  70%      { opacity: 0; transform: scale(1.6); }
  86%      { opacity: 0; transform: scale(0.4); }
  88%      { opacity: 0.9; transform: scale(1); }
  94%      { opacity: 0; transform: scale(1.6); }
  100%     { opacity: 0; transform: scale(0.4); }
}
.vca-chrome-tl, .vca-chrome-tr, .vca-chrome-br {
  position: absolute; font-family: ui-monospace, monospace;
  font-size: 8.5px; letter-spacing: 0.12em; color: rgba(234,242,255,0.6);
  z-index: 2;
}
.vca-chrome-tl { top: 8px; left: 10px; display: flex; align-items: center; gap: 5px; }
.vca-chrome-tl .vca-rec {
  width: 6px; height: 6px; border-radius: 50%; background: #ff4d57;
  box-shadow: 0 0 8px rgba(255,77,87,0.7);
  animation: vca-rec 1.2s ease-in-out infinite;
}
@keyframes vca-rec { 0%,100%{opacity:1}50%{opacity:0.25} }
.vca-chrome-tr { top: 8px; right: 10px; color: #4FC8FF; }
.vca-chrome-br { bottom: 8px; right: 10px; color: rgba(234,242,255,0.5); }
.bgpd-card:hover .vca-cursor { animation-duration: 6s; }
.bgpd-card:hover .vca-box { animation-duration: 6s; }
.bgpd-card > .bgpd-card-pill,
.bgpd-card > .bgpd-card-h,
.bgpd-card > .bgpd-card-s,
.bgpd-card > .bgpd-card-best,
.bgpd-card > .bgpd-card-cta { margin-left: 24px; margin-right: 24px; }
.bgpd-card > .bgpd-card-pill { margin-top: 16px; }
.bgpd-card-pill { font-family: var(--font-mono, ui-monospace); font-size: 10px; letter-spacing: 0.16em; color: var(--hi-cyan); text-transform: uppercase; }
.bgpd-card-h { font-size: 22px; font-weight: 600; color: var(--hi-text); letter-spacing: -0.01em; margin: 0; }
.bgpd-card-s { color: var(--hi-text-2); font-size: 14px; line-height: 1.5; flex: 1; }
.bgpd-card-best { font-family: var(--font-mono, ui-monospace); font-size: 10.5px; letter-spacing: 0.08em; color: var(--hi-text-3); border-top: 1px dashed var(--hi-line); padding-top: 10px; }
.bgpd-card-cta { color: var(--hi-cyan); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.bgpd-card-cta::after { content: '→'; transition: transform 160ms; }
.bgpd-card:hover .bgpd-card-cta::after { transform: translateX(4px); }

/* ============================================================
   ROTATION INDICATOR
   ============================================================ */
.bgh-rot {
  position: absolute; top: 24px; right: 32px; z-index: 2;
  display: flex; gap: 4px; align-items: center;
  font-family: var(--font-mono, ui-monospace); font-size: 10px; letter-spacing: 0.14em;
  color: var(--hi-text-3); text-transform: uppercase;
}
.bgh-rot-bar { width: 60px; height: 3px; background: rgba(255,255,255,0.08); border-radius: 100px; overflow: hidden; margin-left: 8px; }
.bgh-rot-bar span { display: block; height: 100%; background: var(--hi-cyan); transform-origin: left center; animation: bgh-rot-fill linear; animation-fill-mode: forwards; }
@keyframes bgh-rot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bgh-rot button { background: transparent; border: 1px solid var(--hi-line); border-radius: 3px; color: var(--hi-text-3); padding: 4px 8px; font-family: inherit; font-size: 9px; cursor: pointer; }
.bgh-rot button:hover { color: var(--hi-cyan); border-color: var(--hi-cyan); }
@media (max-width: 1100px) { .bgh-rot { display: none; } }