/* ==========================================================
   APEX LABS · v2 · iCLAW × cyber-future-2055
   BlackRock institutional · JARVIS portal · cyan command-OS
   ========================================================== */

:root {
  color-scheme: dark;
  --void: #000000;
  --bg: #050507;
  --bg-2: #0a0a10;
  --bg-3: #12121c;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.14);
  --fg: #ffffff;
  --fg-2: #d6d8de;
  --muted: #9ca3af;
  --cyan: #00f0ff;
  --cyan-2: #00aaff;
  --cyan-soft: rgba(0, 240, 255, 0.18);
  --cyan-glow: rgba(0, 240, 255, 0.45);
  --cyan-line: rgba(0, 240, 255, 0.25);
  --magenta: #ff00aa;
  --green: #00ff88;
  --amber: #ffb800;
  --grad-cyan: linear-gradient(135deg, #00f0ff 0%, #00aaff 100%);
  --grad-cm: linear-gradient(135deg, #00f0ff 0%, #ff00aa 100%);
  --shadow-glow: 0 0 24px var(--cyan-glow), 0 0 64px rgba(0, 240, 255, 0.18);
  --font-display: "Big Shoulders Display", "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --font-display-2: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --font-body: "Inter", -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--void); color: var(--fg); }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none;
}
@media (hover: none) {
  body { cursor: auto; }
  a, button, [role="button"], select,
  .bpanel, .reel, .agent-card, .faq-q,
  .alice-chip, .nav-cta, .alice-fab,
  .fab, .hamburger, .btn, .form-submit,
  .lm-tab, .ms-tab, .ic-agent, .ic-surf,
  .ic-row, .gch, .cmdk-item, .alice-close,
  .drawer-close, .modal-close, .kbd-hint-close,
  .ai-mic, .ai-send, .ai-book {
    cursor: pointer;
  }
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--cyan); color: var(--void); }

/* ==========================================================
   BOOT SEQUENCE
   ========================================================== */

.boot {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--void);
  display: grid; place-items: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-inner { width: min(560px, 92vw); padding: 0 24px; text-align: left; }
.boot-logo {
  color: var(--cyan); margin-bottom: 22px;
  filter: drop-shadow(0 0 16px var(--cyan-glow));
  animation: bootBob 1.6s ease-in-out infinite alternate;
}
@keyframes bootBob {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-4px) rotate(2deg); }
}
.boot-title {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 4px; color: var(--cyan); margin-bottom: 18px;
  text-shadow: 0 0 8px var(--cyan-glow);
}
.boot-bar {
  height: 2px; background: rgba(0, 240, 255, 0.12);
  border-radius: 2px; overflow: hidden;
  margin-bottom: 22px;
}
.boot-fill {
  height: 100%; width: 0%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
  transition: width 0.4s ease;
}
.boot-log {
  font-family: var(--font-mono); font-size: 11px;
  list-style: none; color: var(--fg-2);
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 18px;
}
.boot-log li {
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s;
  display: flex; align-items: center; gap: 10px;
  letter-spacing: 1px;
}
.boot-log li.in { opacity: 1; transform: translateX(0); }
.boot-log li::before {
  content: "[ OK ]"; color: var(--green);
  font-size: 10px;
}
.boot-hash {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted); letter-spacing: 2px;
}

/* ==========================================================
   SCROLL PROGRESS
   ========================================================== */

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 96;
  background: linear-gradient(90deg, var(--cyan) var(--p, 0%), transparent var(--p, 0%));
  box-shadow: 0 0 8px var(--cyan-glow);
}

/* ==========================================================
   TICKER (top, just above nav)
   ========================================================== */

.ticker {
  position: fixed; top: 0; left: 0; right: 0; z-index: 95;
  height: 26px; overflow: hidden;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
}
.ticker-track {
  display: flex; gap: 48px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 3px; color: var(--cyan);
  white-space: nowrap;
  animation: tickerScroll 80s linear infinite;
  will-change: transform;
}
.ticker-track span { flex-shrink: 0; }
.ticker-track span:nth-child(odd) { color: var(--fg-2); }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================
   FX OVERLAYS
   ========================================================== */

.overlay-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 200;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.overlay-scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 199;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  opacity: 0.7;
}
.overlay-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 198;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.45) 100%);
}
.overlay-mouse {
  position: fixed; inset: 0; pointer-events: none; z-index: 197;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(0,240,255,0.08), transparent 70%);
  transition: background 0.06s linear;
  mix-blend-mode: screen;
}

/* ==========================================================
   GRID BG
   ========================================================== */

.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(0,240,255,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(255,0,170,0.05) 0%, transparent 60%),
    var(--void);
}
.bg-grid-inner {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  animation: gridDrift 60s linear infinite;
}
@keyframes gridDrift { from { background-position: 0 0; } to { background-position: 64px 64px; } }

/* ==========================================================
   CUSTOM CURSOR
   ========================================================== */

.cursor {
  position: fixed; top: 0; left: 0; width: 32px; height: 32px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.18s, height 0.18s, border-color 0.18s, background 0.18s;
  mix-blend-mode: screen;
}
.cursor.hover { width: 56px; height: 56px; border-color: var(--magenta); background: rgba(255,0,170,0.06); }
.cursor.click { width: 20px; height: 20px; }
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 4px; height: 4px;
  background: var(--cyan); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--cyan);
}
@media (hover: none) { .cursor, .cursor-dot { display: none; } }

/* ==========================================================
   HUD
   ========================================================== */

.hud {
  position: fixed; top: 36px; right: 18px; z-index: 50;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1px; color: var(--cyan);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.hud-row { display: flex; align-items: center; gap: 6px; }
.hud-meta { color: var(--muted); }
.hud-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 0.4; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.4); }
}

/* ==========================================================
   DOT NAV (right edge)
   ========================================================== */

.dot-nav {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 60;
  display: flex; flex-direction: column; gap: 14px;
}
.dot-nav a {
  display: flex; align-items: center; gap: 10px;
  flex-direction: row-reverse; cursor: none;
  position: relative;
}
.dot-nav .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-strong);
  border: 1px solid transparent;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.dot-nav .lbl {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 2px; color: var(--cyan);
  opacity: 0; transform: translateX(8px);
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}
.dot-nav a:hover .dot,
.dot-nav a.active .dot {
  background: var(--cyan); transform: scale(1.4);
  box-shadow: 0 0 10px var(--cyan-glow);
}
.dot-nav a:hover .lbl { opacity: 1; transform: translateX(0); }
@media (max-width: 900px) { .dot-nav { display: none; } }

/* ==========================================================
   NAV
   ========================================================== */

.nav {
  position: fixed; top: 26px; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(5, 5, 7, 0.6);
  border-bottom: 1px solid var(--line);
}
.nav-logo {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 2px; font-size: 14px; color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan-glow);
  flex-shrink: 0;
  white-space: nowrap;
}
.nav-logo svg { color: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan-glow)); }
.nav-logo img {
  width: auto !important; height: 28px !important;
  object-fit: contain;
  filter: drop-shadow(0 0 8px var(--cyan-glow));
}
.boot-logo img { object-fit: contain; }
.nav-logo img {
  width: 28px; height: 28px;
  filter: drop-shadow(0 0 10px var(--cyan-glow));
  flex-shrink: 0;
}
.nav-logo span { letter-spacing: 3px; }
.nav-links { display: flex; gap: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; }
.nav-links a {
  color: var(--fg-2); transition: color 0.2s, text-shadow 0.2s;
  cursor: none;
}
.nav-links a:hover { color: var(--cyan); text-shadow: 0 0 8px var(--cyan-glow); }
.nav-cta {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px;
  padding: 10px 18px; border: 1px solid var(--cyan);
  color: var(--cyan); border-radius: 4px;
  transition: all 0.25s ease;
  position: relative; overflow: hidden;
  cursor: none;
  z-index: 1;
}
.nav-cta::before {
  content: ""; position: absolute; inset: 0;
  background: var(--cyan); transform: translateX(-101%);
  transition: transform 0.25s ease;
  z-index: -1;
}
.nav-cta:hover { color: var(--void); }
.nav-cta:hover::before { transform: translateX(0); }
@media (max-width: 768px) {
  .nav { padding: 12px 18px; top: 26px; }
  .nav-links { display: none; }
}

/* ==========================================================
   HERO + scroll-reveal + iCLAW HUD
   ========================================================== */

.hero { position: relative; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
.hero-stage { min-height: 62vh; position: relative; }
.hero-sticky {
  position: relative; height: 62vh; width: 100%;
  display: grid; place-items: center; overflow: hidden;
}
@media (max-width: 720px) {
  .hero-stage, .hero-sticky { min-height: 56vh; height: 56vh; }
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: brightness(0.92) contrast(1.05) saturate(1.2);
  z-index: 1;
}
.hero-bleed-grad {
  position: absolute; inset: 0; z-index: 2;
  background:
    /* very light vignette top + bottom for legibility, NO dark bottom-bleed */
    linear-gradient(180deg, rgba(0,0,0,0.28) 0%, transparent 22%, transparent 100%),
    linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 38%, transparent 65%);
  pointer-events: none;
}
.dot-live {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulse 1.4s infinite;
}
.particle-field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 3; pointer-events: none; mix-blend-mode: screen;
  opacity: 0.55;
}

/* iCLAW 5-RING HUD */
.iclaw-rings {
  position: absolute; right: 4vw; bottom: 12vh;
  width: clamp(160px, 18vw, 240px); aspect-ratio: 1;
  z-index: 4; pointer-events: none;
  filter: drop-shadow(0 0 20px var(--cyan-glow));
  opacity: 0.85;
}
.ring {
  position: absolute; inset: 0;
  border: 1px solid var(--cyan-line);
  border-radius: 50%;
  border-top-color: var(--cyan);
}
.ring.r1 { animation: ringSpin 12s linear infinite; }
.ring.r2 { inset: 8%; border-right-color: var(--cyan); animation: ringSpin 18s linear reverse infinite; opacity: 0.6; }
.ring.r3 { inset: 18%; border-bottom-color: var(--cyan); animation: ringSpin 22s linear infinite; opacity: 0.5; }
.ring.r4 { inset: 28%; border-left-color: var(--cyan); animation: ringSpin 8s linear reverse infinite; opacity: 0.45; border-style: dashed; }
.ring.r5 { inset: 38%; border-color: var(--cyan-line); animation: ringSpin 30s linear infinite; opacity: 0.3; }
@keyframes ringSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.ring-tick {
  position: absolute; left: 50%; top: -3px;
  width: 2px; height: 12px; background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  transform-origin: 50% calc(50% + 12px);
  animation: tickPulse 2s ease-in-out infinite;
}
.ring-tick.t2 { left: auto; right: -3px; top: 50%; width: 12px; height: 2px; transform-origin: calc(50% - 12px) 50%; }
.ring-tick.t3 { left: 50%; top: auto; bottom: -3px; transform-origin: 50% calc(50% - 12px); }
.ring-tick.t4 { left: -3px; top: 50%; width: 12px; height: 2px; transform-origin: calc(50% + 12px) 50%; }
@keyframes tickPulse {
  0%,100% { opacity: 0.4; box-shadow: 0 0 4px var(--cyan); }
  50%     { opacity: 1; box-shadow: 0 0 16px var(--cyan); }
}
.ring-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan), 0 0 4px var(--cyan), inset 0 0 4px rgba(255,255,255,0.6);
  animation: pulse 1.6s ease-in-out infinite;
}

/* iCLAW NERVE WAVEFORM */
.nerve-wave {
  position: absolute; left: 8vw; bottom: 12vh; z-index: 4;
  display: flex; align-items: flex-end; gap: 3px;
  height: 56px;
  pointer-events: none;
}
.nerve-bar {
  width: 3px; background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan-glow);
  animation: waveBeat 1.4s ease-in-out infinite;
}
.nerve-bar:nth-child(1)  { height: 10%; animation-delay: 0.0s; }
.nerve-bar:nth-child(2)  { height: 20%; animation-delay: 0.05s; }
.nerve-bar:nth-child(3)  { height: 35%; animation-delay: 0.10s; }
.nerve-bar:nth-child(4)  { height: 70%; animation-delay: 0.15s; }
.nerve-bar:nth-child(5)  { height: 50%; animation-delay: 0.20s; }
.nerve-bar:nth-child(6)  { height: 30%; animation-delay: 0.25s; }
.nerve-bar:nth-child(7)  { height: 90%; animation-delay: 0.30s; }
.nerve-bar:nth-child(8)  { height: 60%; animation-delay: 0.35s; }
.nerve-bar:nth-child(9)  { height: 25%; animation-delay: 0.40s; }
.nerve-bar:nth-child(10) { height: 80%; animation-delay: 0.45s; }
.nerve-bar:nth-child(11) { height: 40%; animation-delay: 0.50s; }
.nerve-bar:nth-child(12) { height: 100%; animation-delay: 0.55s; }
.nerve-bar:nth-child(13) { height: 30%; animation-delay: 0.60s; }
.nerve-bar:nth-child(14) { height: 55%; animation-delay: 0.65s; }
.nerve-bar:nth-child(15) { height: 75%; animation-delay: 0.70s; }
.nerve-bar:nth-child(16) { height: 20%; animation-delay: 0.75s; }
.nerve-bar:nth-child(17) { height: 85%; animation-delay: 0.80s; }
.nerve-bar:nth-child(18) { height: 45%; animation-delay: 0.85s; }
.nerve-bar:nth-child(19) { height: 65%; animation-delay: 0.90s; }
.nerve-bar:nth-child(20) { height: 95%; animation-delay: 0.95s; }
.nerve-bar:nth-child(21) { height: 50%; animation-delay: 1.0s; }
.nerve-bar:nth-child(22) { height: 30%; animation-delay: 1.05s; }
.nerve-bar:nth-child(23) { height: 70%; animation-delay: 1.10s; }
.nerve-bar:nth-child(24) { height: 25%; animation-delay: 1.15s; }
.nerve-bar:nth-child(25) { height: 60%; animation-delay: 1.20s; }
.nerve-bar:nth-child(26) { height: 85%; animation-delay: 1.25s; }
.nerve-bar:nth-child(27) { height: 35%; animation-delay: 1.30s; }
.nerve-bar:nth-child(28) { height: 50%; animation-delay: 1.35s; }
.nerve-bar:nth-child(29) { height: 75%; animation-delay: 1.40s; }
.nerve-bar:nth-child(30) { height: 20%; animation-delay: 1.45s; }
@keyframes waveBeat {
  0%,100% { transform: scaleY(0.6); opacity: 0.5; }
  50%     { transform: scaleY(1); opacity: 1; }
}

.hero-overlay {
  position: absolute; z-index: 12;
  left: 0; right: 0; bottom: 4vh;
  padding: 0 32px;
  max-width: 1280px;
  width: 100%;
  text-align: left;
  margin-right: auto;
}
.hero-overlay::before {
  content: ""; position: absolute; inset: -6% -8% -10% -6%;
  background:
    radial-gradient(ellipse at 28% 70%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 35%, transparent 70%);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 800px) {
  .hero-overlay { bottom: 5vh; padding: 0 20px; }
  .hero-overlay::before { inset: -6% -6% -10% -6%; }
}
/* Kill any gap between hero section and marquee */
.hero { padding-top: 0 !important; margin-bottom: 0 !important; }
.hero + .band-marquee, .band-marquee { margin-top: 0 !important; }
.hero-overlay > * { max-width: 700px; }
.hero-overlay .hero-h1 { max-width: 760px; }
@media (min-width: 1100px) {
  .hero-h1 { font-size: clamp(56px, 7vw, 108px) !important; }
}
.hero-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 4px;
  color: var(--cyan); margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0, 240, 255, 0.06);
  padding: 8px 14px; border: 1px solid rgba(0, 240, 255, 0.3); border-radius: 4px;
  backdrop-filter: blur(8px);
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow);
  animation: pulse 1.4s infinite;
}
.hero-h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(56px, 9.5vw, 156px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  text-transform: none;
  margin-bottom: 32px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.85), 0 2px 6px rgba(0,0,0,0.7), 0 0 32px rgba(0,240,255,0.18);
}
.hero-h1 em, .hero-h1 .line.accent em {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 400; text-transform: none;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #fff 0%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px var(--cyan-glow));
  padding-right: 0.05em;
}
.hero-h1 .line { display: block; }
.hero-h1 .line:nth-child(1) { color: var(--fg); }
.hero-h1 .line.accent {
  background: var(--grad-cyan);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px var(--cyan-glow));
}
.hero-h1 .line.glitch {
  position: relative;
  color: var(--fg);
}
.hero-h1 .line.glitch::before,
.hero-h1 .line.glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%;
  pointer-events: none;
}
.hero-h1 .line.glitch::before { color: var(--cyan); transform: translate(-2px, 0); mix-blend-mode: screen; opacity: 0.7; }
.hero-h1 .line.glitch::after  { color: var(--magenta); transform: translate(2px, 0); mix-blend-mode: screen; opacity: 0.5; }

/* word reveal animation */
.word-up { overflow: hidden; }
.word-up > span {
  display: inline-block;
  animation: wordUp 1s cubic-bezier(.2,.8,.2,1) both;
}
/* Fallback: ensure hero h1 is always visible even if animation breaks (J reported invisible h1 in incognito) */
.hero-h1 .line.word-up > span { opacity: 1; }
.word-up > span:nth-child(1) { animation-delay: 0.4s; }
.word-up > span:nth-child(2) { animation-delay: 0.55s; }
.hero-h1 .line:nth-child(2) > span:nth-child(1) { animation-delay: 0.7s; }
.hero-h1 .line:nth-child(2) > span:nth-child(2) { animation-delay: 0.85s; }
.hero-h1 .line:nth-child(3) > span:nth-child(1) { animation-delay: 1.0s; }
@keyframes wordUp { from { transform: translateY(110%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.hero-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--fg-2); max-width: 620px; margin-bottom: 32px;
  line-height: 1.55;
}
.hero-sub .hi {
  color: var(--fg);
  background: linear-gradient(180deg, transparent 60%, var(--cyan-soft) 60%);
  padding: 0 4px;
}
.hero-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.meta-pill {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  padding: 8px 14px; border: 1px solid var(--line-strong);
  background: rgba(0,0,0,0.45); backdrop-filter: blur(8px);
  border-radius: 4px; color: var(--fg-2);
  min-height: 36px; display: inline-flex; align-items: center;
}
.meta-pill .ok { color: var(--green); }
.hero-hint {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 4px;
  color: var(--muted); z-index: 10;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
  50%     { transform: translateX(-50%) translateY(8px); opacity: 1; }
}
@media (max-width: 900px) {
  .iclaw-rings { right: 4vw; width: 200px; opacity: 0.5; }
  .nerve-wave { display: none; }
}

/* ==========================================================
   BAND · MARQUEE
   ========================================================== */

.band-marquee {
  height: 80px; overflow: hidden;
  display: flex; align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.6);
  position: relative; z-index: 2;
}
.marquee-track {
  display: flex; align-items: center; gap: 36px;
  white-space: nowrap;
  width: max-content; /* prevent flex from collapsing track to container width */
  flex-shrink: 0;     /* track itself must never shrink */
  animation: marquee 36s linear infinite;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 2.8vw, 38px);
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--fg);
  will-change: transform;
}
.marquee-track span {
  flex-shrink: 0;        /* prevent any span from collapsing / stacking */
  display: inline-flex;  /* keeps text on one line, GPU-composited */
}
.marquee-track i {
  display: inline-flex; width: 8px; height: 8px;
  border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  flex-shrink: 0;
}
.marquee-track span:nth-child(4n+1) { color: hsl(195 100% 65%); }
.marquee-track span:nth-child(4n+2) { color: hsl(50 100% 70%); }
.marquee-track span:nth-child(4n+3) { color: hsl(280 100% 75%); }
.marquee-track span:nth-child(4n+0) { color: hsl(175 100% 70%); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================
   SECTION HEADERS (shared)
   ========================================================== */

.section-head { padding: 60px 32px 56px; max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
.section-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 4px;
  color: var(--cyan); margin-bottom: 16px;
}
.section-h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(44px, 7.5vw, 124px); line-height: 0.88;
  letter-spacing: -0.025em; text-transform: none;
}
.section-h2 em, .hero-h1 em, h1 em, h2 em, h3 em {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em; text-transform: none;
}
.section-h2 .grad em, .hero-h1 .accent em {
  background: linear-gradient(135deg, #fff 0%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.section-sub {
  margin-top: 18px; font-size: 17px; color: var(--fg-2); max-width: 720px;
}

/* ==========================================================
   STATS
   ========================================================== */

.stats { padding: 60px 32px; position: relative; z-index: 2; border-bottom: 1px solid var(--line); }
.stats-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.kpi {
  border-left: 2px solid var(--cyan);
  padding: 12px 0 12px 24px;
  position: relative;
}
.kpi::before {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-glow);
}
.kpi-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 5vw, 72px); line-height: 1;
  letter-spacing: -0.03em; color: var(--fg);
}
.kpi-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: var(--muted); margin-top: 8px;
}
@media (max-width: 768px) { .stats-inner { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================
   MANIFESTO
   ========================================================== */

.manifesto {
  padding: 60px 32px 100px;
  position: relative; z-index: 2;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,240,255,0.06) 0%, transparent 60%);
}
.manifesto-inner { max-width: 1280px; margin: 0 auto; }
.manifesto-h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 4.4vw, 64px); line-height: 1.12;
  letter-spacing: -0.02em;
  margin-top: 20px; max-width: 1100px;
  color: var(--fg-2);
}
.manifesto-h2 .accent { color: var(--fg); position: relative; }
.manifesto-h2 .accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4%;
  height: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow);
  opacity: 0.7;
}
.manifesto-h2 .green { color: var(--green); }
.manifesto-pills {
  margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
}
.manifesto-pills span {
  padding: 8px 14px; border: 1px solid var(--line-strong);
  border-radius: 999px; color: var(--fg-2);
  background: rgba(255,255,255,0.02);
  transition: border-color 0.2s, color 0.2s;
}
.manifesto-pills span:hover { border-color: var(--cyan); color: var(--cyan); }

/* ==========================================================
   TYPO BANDS (between sections)
   ========================================================== */

.typo-band { padding: 28px 32px; background: var(--void); }
.typo-line { line-height: 0.95; margin: 0; padding: 4px 0; }
.typo-line .t { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 10vw, 160px); line-height: 0.88; letter-spacing: -0.04em; }
.typo-line .t.outline {
  -webkit-text-stroke: 2px var(--fg);
  color: transparent;
}
.typo-line .t.accent {
  background: var(--grad-cyan);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px var(--cyan-glow));
}

/* ==========================================================
   BRAND PANELS · cinematic full-bleed
   ========================================================== */

.brands { position: relative; z-index: 2; padding-bottom: 60px; }
.bpanel {
  position: relative; min-height: 92vh;
  display: grid; place-items: center;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.bpanel-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.85) saturate(1.2);
  z-index: 1;
}
.bpanel-mask {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 55%, transparent 100%),
    radial-gradient(ellipse at 100% 50%, hsl(var(--brand-hue) 100% 50% / 0.12), transparent 60%);
}
.bpanel-content {
  position: relative; z-index: 3;
  max-width: 1280px; width: 100%;
  padding: 56px 32px;
  margin: 0 auto;
}
.bpanel-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 4px;
  color: hsl(var(--brand-hue) 100% 70%);
  margin-bottom: 18px;
  display: inline-block;
  padding: 8px 14px; border: 1px solid hsl(var(--brand-hue) 100% 50% / 0.4);
  background: hsl(var(--brand-hue) 100% 50% / 0.06);
  border-radius: 4px; backdrop-filter: blur(8px);
}
.bpanel-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.88; letter-spacing: -0.04em;
  text-transform: uppercase;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #fff 0%, hsl(var(--brand-hue) 100% 70%) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px hsl(var(--brand-hue) 100% 50% / 0.35));
}
.bpanel-name em {
  font-style: normal;
  -webkit-text-stroke: 2px hsl(var(--brand-hue) 100% 70%);
  -webkit-text-fill-color: transparent;
  background: none;
  filter: drop-shadow(0 0 14px hsl(var(--brand-hue) 100% 60% / 0.5));
}
.bpanel-desc {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--fg-2); max-width: 580px;
  margin-bottom: 36px;
  line-height: 1.6;
}
.bpanel-stats {
  display: grid; grid-template-columns: repeat(2, max-content);
  gap: 14px 32px;
  font-family: var(--font-mono); font-size: 11px;
  max-width: 700px;
}
.bpanel-stats > div {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  background: rgba(0,0,0,0.4); backdrop-filter: blur(8px);
  border-radius: 6px;
}
.bpanel-stats .l { color: hsl(var(--brand-hue) 100% 70%); letter-spacing: 2px; }
.bpanel-stats .v { color: var(--fg); letter-spacing: 1px; }
.bpanel-stats .v.green { color: var(--green); }
.bpanel-stats .v.amber { color: var(--amber); }
@media (max-width: 768px) {
  .bpanel-stats { grid-template-columns: 1fr; }
  .bpanel-content { padding: 60px 18px; }
}

/* ==========================================================
   REEL WALL
   ========================================================== */

.reelwall { position: relative; z-index: 2; padding-bottom: 60px; }
.reel-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.reel {
  position: relative; aspect-ratio: 9 / 16;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  cursor: none;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s, box-shadow 0.3s;
}
.reel video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: filter 0.3s, transform 0.6s;
  filter: saturate(1.2) brightness(0.85);
}
.reel:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: hsl(var(--brand-hue) 100% 60% / 0.7);
  box-shadow: 0 24px 60px hsl(var(--brand-hue) 100% 60% / 0.22);
  z-index: 4;
}
.reel:hover video { filter: saturate(1.4) brightness(1); }
.reel-tag {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  color: hsl(var(--brand-hue) 100% 70%);
  padding: 5px 9px; border: 1px solid hsl(var(--brand-hue) 100% 50% / 0.5);
  border-radius: 4px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
}
.reel-meta {
  margin: 32px auto 0;
  max-width: 1280px; padding: 0 32px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.r-pill {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  padding: 8px 14px; border: 1px solid var(--line-strong);
  border-radius: 4px; color: var(--fg-2);
  background: rgba(255,255,255,0.02);
}
.r-pill .ok { color: var(--green); }
@media (max-width: 1100px) { .reel-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .reel-grid { grid-template-columns: repeat(2, 1fr); padding: 0 18px; } }

/* ==========================================================
   DEEP-DIVE SCROLL REVEALS (jetr/ond)
   ========================================================== */

/* ==========================================================
   ELITE CTA · dramatic upgrade
   ========================================================== */
.cta-elite { position: relative; padding: 60px 32px 180px; overflow: hidden; isolation: isolate; }
.cta-elite-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,240,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000, transparent 80%);
  z-index: 1;
}
.cta-orb {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}
.cta-orb-1 { background: radial-gradient(circle, var(--cyan, #00f0ff), transparent 70%); top: -200px; left: -200px; animation: orbDrift 18s ease-in-out infinite; }
.cta-orb-2 { background: radial-gradient(circle, var(--violet, #8b5cf6), transparent 70%); bottom: -200px; right: -200px; animation: orbDrift 22s ease-in-out infinite reverse; }
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(80px, 60px) scale(1.15); }
}
.cta-elite .cta-inner {
  position: relative;
  z-index: 5;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.cta-h2-xl {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(72px, 14vw, 220px);
  line-height: 0.86;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 24px 0 32px;
  text-transform: none;
  display: flex; flex-direction: column; align-items: center;
}
.cta-h-line { display: block; line-height: 0.86; }
.cta-h-line em {
  font-family: var(--font-serif, "Instrument Serif"), serif;
  font-style: italic;
  font-weight: 400;
  color: var(--cyan, #00f0ff);
  letter-spacing: 0.005em;
}
.cta-h-grad {
  background: linear-gradient(135deg, #fff 0%, var(--cyan, #00f0ff) 50%, var(--violet, #8b5cf6) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradFlow 6s ease-in-out infinite;
  background-size: 200% 200%;
}
@keyframes gradFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.cta-elite .cta-sub {
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 640px;
  margin: 0 auto 48px;
}
.cta-elite .cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.btn-mega {
  position: relative;
  padding: 22px 36px;
  font-size: 14px;
  letter-spacing: 0.18em;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.btn-mega.btn-primary {
  background: linear-gradient(135deg, var(--cyan, #00f0ff), var(--violet, #8b5cf6));
  color: #000;
  box-shadow: 0 20px 60px rgba(0, 240, 255, 0.35), 0 0 0 1px rgba(0, 240, 255, 0.4);
}
.btn-mega.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 30px 80px rgba(0, 240, 255, 0.5), 0 0 0 1px var(--cyan, #00f0ff);
}
.btn-mega.btn-ghost {
  background: rgba(255,255,255,0.04);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-mega.btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--cyan, #00f0ff);
  transform: translateY(-3px);
}
.btn-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.4), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.btn-mega:hover .btn-glow { opacity: 1; }
.btn-mic {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  height: 16px;
}
.btn-mic span {
  display: block; width: 2px; background: var(--cyan, #00f0ff);
  border-radius: 1px;
  animation: btnMic 0.9s ease-in-out infinite alternate;
}
.btn-mic span:nth-child(1) { height: 6px; }
.btn-mic span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.btn-mic span:nth-child(3) { height: 8px; animation-delay: 0.3s; }
@keyframes btnMic {
  from { transform: scaleY(0.6); opacity: 0.7; }
  to { transform: scaleY(1.2); opacity: 1; }
}
.cta-elite .cta-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.5);
}
.cta-mail {
  color: var(--cyan, #00f0ff);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,240,255,0.3);
  padding-bottom: 4px;
  transition: all 0.3s;
}
.cta-mail:hover { color: #fff; border-color: #fff; }

/* ==========================================================
   FRAMER-STYLE SCROLL FX · spring reveals on enter
   ========================================================== */
[data-fx] {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.85s cubic-bezier(0.2, 0.9, 0.25, 1),
              transform 0.85s cubic-bezier(0.2, 0.9, 0.25, 1),
              filter 0.85s cubic-bezier(0.2, 0.9, 0.25, 1);
}
[data-fx="fade-up"]    { transform: translate3d(0, 50px, 0); }
[data-fx="fade-down"]  { transform: translate3d(0, -50px, 0); }
[data-fx="fade-left"]  { transform: translate3d(-60px, 0, 0); }
[data-fx="fade-right"] { transform: translate3d(60px, 0, 0); }
[data-fx="zoom-in"]    { transform: scale(0.86); filter: blur(6px); }
[data-fx="zoom-out"]   { transform: scale(1.12); filter: blur(6px); }
[data-fx="rise-blur"]  { transform: translate3d(0, 70px, 0) scale(0.96); filter: blur(8px); }
[data-fx="tilt-3d"]    { transform: perspective(1200px) rotateX(14deg) translateY(60px); transform-origin: bottom; }
[data-fx="parallax-y"] { /* handled by JS for scroll-bound parallax */ }

[data-fx].fx-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
  filter: blur(0);
}

/* Stagger children · use --fx-i index */
[data-fx-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 0.7s cubic-bezier(0.2, 0.9, 0.25, 1),
              transform 0.7s cubic-bezier(0.2, 0.9, 0.25, 1);
  transition-delay: calc(var(--fx-i, 0) * 110ms);
}
[data-fx-stagger].fx-in > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Marquee accent · animated underline reveal */
[data-fx-line] { position: relative; }
[data-fx-line]::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--cyan, #00f0ff), var(--violet, #8b5cf6));
  transition: width 1.2s cubic-bezier(0.2, 0.9, 0.25, 1) 0.4s;
  border-radius: 2px;
  box-shadow: 0 0 12px var(--cyan, #00f0ff);
}
[data-fx-line].fx-in::after { width: 100%; }

/* Number count-up boost · slight scale on enter */
.fx-num {
  display: inline-block;
  transform-origin: bottom left;
  transition: transform 1.2s cubic-bezier(0.2, 0.9, 0.25, 1) 0.2s;
  transform: scale(0.7);
  opacity: 0;
}
.fx-num.fx-in {
  transform: scale(1);
  opacity: 1;
}

/* ==========================================================
   LEAD MANAGER · stats grid + campaign row + feed
   ========================================================== */
.lm-panel {
  margin: 28px 0 0;
  background: rgba(8,10,14,0.75);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.lm-panel .lm-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px; color: rgba(255,255,255,0.55);
}
.lm-panel .lm-bar em { font-family: var(--font-mono, monospace); font-style: normal; color: hsl(var(--dive-hue, 195) 100% 70%); margin-left: 4px; }
.lm-panel .lm-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.01);
}
.lm-panel .lm-tab {
  font-family: var(--font-mono, monospace); font-size: 11px;
  padding: 6px 10px; border-radius: 6px;
  background: transparent; border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65); cursor: pointer;
  transition: all 0.2s;
}
.lm-panel .lm-tab.active { background: hsl(var(--dive-hue, 195) 100% 50% / 0.10); border-color: hsl(var(--dive-hue, 195) 100% 50% / 0.4); color: hsl(var(--dive-hue, 195) 100% 80%); }
.lm-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: hsl(var(--dive-hue, 195) 100% 50% / 0.15);
  color: hsl(var(--dive-hue, 195) 100% 80%);
  font-size: 10px;
}
.lm-body { padding: 14px; }
.lm-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lm-st {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 10px;
}
.lm-stl { font-family: var(--font-mono, monospace); font-size: 9px; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.lm-stv { font-family: var(--font-display, sans-serif); font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.92); letter-spacing: -0.02em; line-height: 1; }
.lm-stv.ok { color: var(--green, #4ade80); }

.lm-campaign {
  margin-top: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.lm-camp-h {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono, monospace); font-size: 11px;
  margin-bottom: 12px;
}
.lm-prev, .lm-next { color: rgba(255,255,255,0.45); cursor: pointer; }
.lm-camp-name { color: hsl(var(--dive-hue, 195) 100% 80%); font-weight: 600; letter-spacing: 0.08em; }
.lm-pos { color: rgba(255,255,255,0.4); margin-left: 6px; }
.lm-camp-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
}
.lm-camp-img {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 9/16;
  background: #0a0a0a;
}
.lm-camp-img video {
  width: 100%; height: 100%; object-fit: cover;
}
.lm-camp-info {
  display: flex; flex-direction: column; gap: 12px;
}
.lm-score {
  background: rgba(0,255,136,0.04);
  border: 1px solid rgba(0,255,136,0.2);
  border-radius: 8px;
  padding: 10px 12px;
}
.lm-score-num {
  font-family: var(--font-display, sans-serif);
  font-size: 32px; font-weight: 800;
  color: var(--green, #4ade80);
  text-shadow: 0 0 18px rgba(0,255,136,0.4);
  line-height: 1;
}
.lm-score-l {
  font-family: var(--font-mono, monospace);
  font-size: 9px; letter-spacing: 0.2em; color: rgba(255,255,255,0.5);
  margin: 4px 0 8px;
}
.lm-score-bar {
  height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px;
  overflow: hidden;
}
.lm-score-bar > div {
  height: 100%; width: var(--w, 50%);
  background: linear-gradient(90deg, var(--green, #4ade80), hsl(var(--dive-hue, 195) 100% 70%));
  border-radius: 2px;
  box-shadow: 0 0 10px var(--green, #4ade80);
}
.lm-camp-rows { display: flex; flex-direction: column; gap: 4px; }
.lm-camp-rows .lm-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}
.lm-camp-rows .lm-row:last-child { border-bottom: none; }
.lm-camp-rows .ll { color: rgba(255,255,255,0.45); letter-spacing: 0.1em; text-transform: uppercase; font-size: 9px; }
.lm-camp-rows .lr { color: rgba(255,255,255,0.85); }
.lm-camp-rows .lr.green { color: var(--green, #4ade80); }

.lm-feed {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  font-family: var(--font-mono, monospace);
}
.lm-feed-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: hsl(var(--dive-hue, 195) 100% 75%);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 8px;
}
.lm-feed-h .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.lm-feed-line { font-size: 11px; color: rgba(255,255,255,0.78); padding: 4px 0; line-height: 1.5; }
.lm-feed-line .t { color: hsl(var(--dive-hue, 195) 100% 70%); margin-right: 8px; opacity: 0.8; }

@media (max-width: 800px) {
  .lm-stats { grid-template-columns: repeat(3, 1fr); }
  .lm-camp-body { grid-template-columns: 1fr; }
  .lm-camp-rows .lm-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================
   OPS SECTIONS · iCLAW + aOS + A2A with live snapshots
   ========================================================== */
.ops-section { padding: 48px 32px; max-width: 1480px; margin: 0 auto; } .ops-section + .ops-section { padding-top: 24px; }
.ops-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.ops-grid.reverse { grid-template-columns: 1.1fr 0.9fr; }
.ops-grid.reverse .ops-copy { order: 2; }
.ops-grid.reverse .ops-snapshot { order: 1; }
.ops-copy .section-h2 { margin: 14px 0 22px; }
.ops-copy .section-sub { margin: 0 0 28px; max-width: 540px; }
.ops-points { list-style: none; padding: 0; margin: 0 0 28px; }
.ops-points li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 13px; color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
}
.ops-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan, #00f0ff); box-shadow: 0 0 12px var(--cyan, #00f0ff); flex-shrink: 0; }
.ops-stat-row { display: flex; flex-wrap: wrap; gap: 10px; }
.r-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.7);
}
.r-pill .ok { color: var(--green, #4ade80); margin-left: 4px; }
.ops-snapshot {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,240,255,0.04), rgba(139,92,246,0.04));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,240,255,0.06);
}

/* iCLAW frame */
.ic-frame { background: #060708; border-radius: 18px; overflow: hidden; }
.ic-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px; color: rgba(255,255,255,0.55);
}
.t-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.t-dot.t-r { background: #ff5f57; } .t-dot.t-y { background: #ffbd2e; } .t-dot.t-g { background: #27c93f; }
.ic-title { margin-left: 8px; }
.ic-spacer { flex: 1; }
.ic-meta .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green, #4ade80); margin-right: 4px; box-shadow: 0 0 8px var(--green, #4ade80); }
.ic-body { display: grid; grid-template-columns: 200px 1fr; min-height: 360px; }
.ic-side { padding: 14px; border-right: 1px solid rgba(255,255,255,0.06); }
.ic-side-h { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 10px; color: rgba(0,240,255,0.7); letter-spacing: 0.14em; margin-bottom: 8px; }
.ic-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background 0.2s; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 11px; color: rgba(255,255,255,0.75); }
.ic-row:hover { background: rgba(255,255,255,0.04); }
.ic-row.active { background: rgba(0,240,255,0.08); color: var(--cyan, #00f0ff); }
.ic-av { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.ic-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ic-row .dot { margin-left: auto; width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 6px var(--green); }
.ic-row.sm { padding: 4px 8px; font-size: 10px; color: rgba(255,255,255,0.55); }
.ic-main {
  position: relative;
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.ic-rings {
  position: absolute; right: 24px; top: 24px;
  width: 120px; height: 120px;
  pointer-events: none;
}
.ic-rings span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(0,240,255,0.2);
  animation: icRing 3s linear infinite;
}
.ic-rings span:nth-child(2) { inset: 12px; border-color: rgba(0,240,255,0.3); animation-delay: 0.3s; }
.ic-rings span:nth-child(3) { inset: 24px; border-color: rgba(139,92,246,0.4); animation-delay: 0.6s; }
.ic-rings span:nth-child(4) { inset: 36px; border-color: rgba(0,240,255,0.5); animation-delay: 0.9s; }
.ic-rings span:nth-child(5) { inset: 50px; background: radial-gradient(circle, var(--cyan) 0%, transparent 60%); border: none; opacity: 0.4; animation: icPulse 2s ease-in-out infinite; }
@keyframes icRing { 0% { transform: rotate(0deg); opacity: 0.6; } 100% { transform: rotate(360deg); opacity: 1; } }
@keyframes icPulse { 50% { opacity: 0.7; transform: scale(1.1); } }
.ic-title-l { font-family: var(--font-display, sans-serif); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin-top: 60px; }
.ic-title-s { font-family: var(--font-mono, monospace); font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; }
.ic-vox { display: flex; flex-direction: column; gap: 6px; }
.ic-vox-bars { display: flex; gap: 3px; align-items: end; height: 32px; }
.ic-vox-bars span { width: 4px; background: var(--cyan, #00f0ff); border-radius: 2px; height: var(--h); animation: voxBar 0.8s ease-in-out infinite alternate; box-shadow: 0 0 6px var(--cyan, #00f0ff); }
.ic-vox-bars span:nth-child(2n) { animation-delay: 0.1s; }
.ic-vox-bars span:nth-child(3n) { animation-delay: 0.2s; }
@keyframes voxBar { from { opacity: 0.6; } to { opacity: 1; transform: scaleY(1.15); } }
.ic-vox-l { font-family: var(--font-mono, monospace); font-size: 10px; color: rgba(0,240,255,0.7); letter-spacing: 0.1em; }
.ic-cmd { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px; font-family: var(--font-mono, monospace); font-size: 11px; line-height: 1.5; }
.ic-cmd-l { color: rgba(255,255,255,0.45); }
.ic-cmd-v { color: rgba(255,255,255,0.85); }
.ic-cmd-v.ok { color: var(--green, #4ade80); }

/* aOS bar mockup */
.aos-bar { background: #060708; border-radius: 18px; overflow: hidden; }
.aos-mac-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.06); }
.aos-mac-t { font-family: var(--font-mono, monospace); font-size: 11px; color: rgba(255,255,255,0.55); margin-left: 8px; }
.aos-strip {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(90deg, rgba(0,240,255,0.04), rgba(139,92,246,0.04));
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.aos-cluster { display: flex; align-items: center; gap: 8px; }
.aos-cluster.sm { gap: 4px; }
.aos-icon { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(0,240,255,0.3); }
.aos-icon.sm { width: 22px; height: 22px; }
.aos-icon img { width: 100%; height: 100%; object-fit: cover; }
.aos-st { font-family: var(--font-mono, monospace); font-size: 11px; color: rgba(255,255,255,0.85); display: flex; align-items: center; gap: 6px; }
.aos-st .dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 8px var(--green); }
.aos-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.1); }
.aos-vox { display: flex; gap: 3px; align-items: end; height: 24px; }
.aos-vox-b { width: 3px; background: var(--cyan); height: var(--h); border-radius: 1px; animation: voxBar 0.6s ease-in-out infinite alternate; box-shadow: 0 0 4px var(--cyan); }
.aos-vox-b:nth-child(2n) { animation-delay: 0.1s; }
.aos-stat-cell { display: flex; flex-direction: column; gap: 1px; }
.aos-l { font-family: var(--font-mono, monospace); font-size: 9px; color: rgba(255,255,255,0.45); letter-spacing: 0.1em; }
.aos-v { font-family: var(--font-mono, monospace); font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9); }
.aos-v.ok { color: var(--green); }
.aos-v.cyan { color: var(--cyan); }
.aos-stream { padding: 16px 18px; }
.aos-stream-h { font-family: var(--font-mono, monospace); font-size: 10px; color: rgba(0,240,255,0.7); letter-spacing: 0.14em; margin-bottom: 12px; }
.aos-line { font-family: var(--font-mono, monospace); font-size: 11px; color: rgba(255,255,255,0.78); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.aos-line .t { color: rgba(0,240,255,0.6); margin-right: 10px; }

/* A2A frame */
.a2a-frame { background: #060708; border-radius: 18px; overflow: hidden; }
.a2a-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.06); font-family: var(--font-mono, monospace); font-size: 11px; color: rgba(255,255,255,0.55); }
.a2a-title { margin-left: 8px; }
.a2a-spacer { flex: 1; }
.a2a-meta .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); margin-right: 4px; }
.a2a-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 380px; }
.a2a-canvas { width: 100%; height: 100%; display: block; background: radial-gradient(ellipse at center, rgba(0,240,255,0.05), transparent 70%); }
.a2a-feed { padding: 16px; border-left: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.a2a-feed-h { font-family: var(--font-mono, monospace); font-size: 10px; color: rgba(0,240,255,0.7); letter-spacing: 0.14em; }
.a2a-msg { padding: 10px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; font-family: var(--font-mono, monospace); font-size: 11px; }
.a2a-from { display: inline-flex; align-items: center; gap: 6px; color: var(--cyan); font-weight: 600; }
.a2a-from img { width: 18px; height: 18px; border-radius: 50%; }
.a2a-arrow { color: rgba(255,255,255,0.4); margin: 0 6px; }
.a2a-to { color: rgba(139,92,246,0.95); }
.a2a-body-l { color: rgba(255,255,255,0.78); margin: 6px 0 4px; line-height: 1.5; }
.a2a-art { color: var(--green); font-size: 10px; opacity: 0.9; }

@media (max-width: 980px) {
  .ops-grid, .ops-grid.reverse { grid-template-columns: 1fr; gap: 36px; }
  .ops-grid.reverse .ops-copy, .ops-grid.reverse .ops-snapshot { order: initial; }
  .ic-body { grid-template-columns: 1fr; }
  .ic-side { display: none; }
  .a2a-body { grid-template-columns: 1fr; }
  .aos-strip { flex-wrap: wrap; }
}

/* ==========================================================
   3D HOVER TILT + SHINE SWEEP · S-tier card interactions
   ========================================================== */
.agent-card, .pipe-step, .ugc-cell, .bpanel, .pillar-card, .reel {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s, box-shadow 0.3s;
  position: relative;
  --shine-x: 50%;
  --shine-y: 50%;
}
.agent-card::before, .pipe-step::before, .bpanel::before, .pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--shine-x) var(--shine-y),
    rgba(0, 240, 255, 0.10),
    transparent 50%);
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}
.agent-card:hover::before, .pipe-step:hover::before, .bpanel:hover::before, .pillar-card:hover::before {
  opacity: 1;
}

/* Body scroll states · nav glass on scroll */
body.scrolled .nav {
  background: rgba(8, 8, 12, 0.72);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(0, 240, 255, 0.04), 0 12px 40px rgba(0, 0, 0, 0.4);
}
body.scrolled.scroll-down .nav {
  transform: translateY(-100%);
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.scrolled:not(.scroll-down) .nav {
  transform: translateY(0);
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav { transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s, transform 0.38s; }

.section-eyebrow, .scene-eyebrow, .ugc-eyebrow {
  transition: transform 0.06s linear;
  will-change: transform;
}

/* Magnetic buttons base */
.btn, .cta-btn, .nav-cta, .alice-fab, .ai-mic, .ai-send {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* ==========================================================
   UGC VIRAL WALL · 100x content engine proof
   ========================================================== */
.ugc-wall {
  margin: 90px auto 0;
  max-width: 1440px;
  padding: 0 32px;
}
.ugc-head { max-width: 760px; margin: 0 0 32px; }
.ugc-eyebrow {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px; letter-spacing: 0.18em; color: var(--cyan, #00f0ff);
  margin-bottom: 14px; text-transform: uppercase;
}
.ugc-h3 {
  font-family: var(--font-display, "Big Shoulders Display"), sans-serif;
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: 0.95; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 16px; color: #fff;
}
.ugc-h3 .x { color: var(--violet, #8b5cf6); font-style: italic; font-family: var(--font-serif, "Instrument Serif"), serif; font-weight: 400; }
.ugc-h3 em { font-family: var(--font-serif, "Instrument Serif"), serif; font-style: italic; font-weight: 400; color: var(--cyan, #00f0ff); }
.ugc-sub { color: rgba(255,255,255,0.65); font-size: 16px; line-height: 1.55; max-width: 600px; }
.ugc-marquee {
  position: relative;
  margin: 36px -32px 24px;
  padding: 0 32px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ugc-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: ugcScroll 90s linear infinite;
}
.ugc-marquee:hover .ugc-track { animation-play-state: paused; }
@keyframes ugcScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ugc-cell {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), border-color 0.3s, box-shadow 0.3s;
  cursor: pointer;
}
.ugc-cell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.7));
  pointer-events: none;
}
.ugc-cell video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ugc-cell:hover {
  transform: scale(1.04) translateY(-4px);
  border-color: var(--cyan, #00f0ff);
  box-shadow: 0 24px 60px rgba(0,240,255,0.15), 0 0 0 1px rgba(0,240,255,0.4);
  z-index: 5;
}
.ugc-tag {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px; letter-spacing: 0.12em; color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.55);
  padding: 4px 8px; border-radius: 4px;
  backdrop-filter: blur(8px);
}
.ugc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 28px;
}
.ugc-stat .ugc-num {
  font-family: var(--font-display, "Big Shoulders Display"), sans-serif;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--cyan, #00f0ff), var(--violet, #8b5cf6));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ugc-stat .ugc-l {
  margin-top: 8px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px; letter-spacing: 0.14em; color: rgba(255,255,255,0.55);
}
@media (max-width: 700px) {
  .ugc-cell { width: 150px; }
  .ugc-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================
   SCENES · scroll-driven landscape video background, multi-scene
   ========================================================== */
.scenes {
  position: relative;
  z-index: 2;
  height: 560vh;
  overflow: visible;
  isolation: isolate;
  background: var(--void);
}
.scenes-canvas {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  display: block;
  z-index: 1;
  filter: saturate(1.1) contrast(1.05);
}
.scenes-stage {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 1;
  background: #000;
}
.scene-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.05);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.scene-vid.active { opacity: 1; }
.scenes::before {
  /* darken + cyan grade overlay for legibility */
  content: "";
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  margin-top: -100vh;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.85));
  pointer-events: none;
}
.scenes-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.scene-block {
  position: absolute;
  left: 8vw;
  width: min(720px, 60vw);
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scene-1 { top: 60vh; }
.scene-2 { top: 175vh; right: 8vw; left: auto; text-align: right; }
.scene-3 { top: 290vh; }
.scene-4 { top: 405vh; right: 8vw; left: auto; text-align: right; }
.scene-block.in-view { opacity: 1; transform: translateY(0); }
.scene-eyebrow {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--cyan, #00f0ff);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.scene-h2 {
  font-family: var(--font-display, "Big Shoulders Display"), sans-serif;
  font-size: clamp(48px, 7vw, 110px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-transform: none;
  text-shadow: 0 4px 40px rgba(0,0,0,0.7);
}
.scene-h2 em {
  font-family: var(--font-serif, "Instrument Serif"), serif;
  font-style: italic;
  font-weight: 400;
  color: var(--cyan, #00f0ff);
  letter-spacing: 0.01em;
}
.scene-sub {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  max-width: 460px;
  margin-left: auto;
  margin-right: 0;
}
.scene-1 .scene-sub, .scene-3 .scene-sub { margin-left: 0; margin-right: auto; }
@media (max-width: 800px) {
  .scenes { height: 480vh; }
  .scene-block { left: 5vw; right: 5vw; width: auto; text-align: left !important; }
  .scene-1 { top: 60vh; } .scene-2 { top: 155vh; } .scene-3 { top: 250vh; } .scene-4 { top: 345vh; }
  .scene-h2 { font-size: clamp(36px, 10vw, 60px); }
  .scene-sub { margin: 0; max-width: none; }
}

.dive { position: relative; z-index: 2; overflow: hidden; clear: both; padding: 0; margin: 0; }
.dive-stage { height: 110vh; position: relative; overflow: visible; }
.dive-sticky {
  position: sticky; top: 0; height: 100vh; width: 100%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--void) 0%, hsl(var(--dive-hue) 50% 4%) 50%, var(--void) 100%);
  overflow: hidden;
}
.dive-sticky::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, hsl(var(--dive-hue) 100% 50% / 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 2;
}
/* Big background video — parallax */
.dive-bg-vid {
  position: absolute; left: 50%; top: 50%;
  width: 120%; height: 130%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(1.05) contrast(1.05);
  will-change: transform;
  z-index: 1;
  pointer-events: none;
}
.dive-sticky::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.75) 100%);
  z-index: 3;
  pointer-events: none;
}
/* Legacy canvas — hidden, redesign uses bg video */
.dive canvas {
  display: none;
}
.dive-overlay {
  position: relative; z-index: 5;
  padding: 32px 32px 24px;
  max-width: 1280px; width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  scrollbar-width: none;
  align-self: center;
}
.dive-overlay::-webkit-scrollbar { display: none; }
.dive-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 4px;
  color: hsl(var(--dive-hue) 100% 70%); margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid hsl(var(--dive-hue) 100% 50% / 0.4);
  background: hsl(var(--dive-hue) 100% 50% / 0.06);
  border-radius: 4px; backdrop-filter: blur(8px);
}
.dive-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: hsl(var(--dive-hue) 100% 70%);
  box-shadow: 0 0 10px hsl(var(--dive-hue) 100% 70%);
  animation: pulse 1.4s infinite;
}
.dive-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(56px, 10vw, 144px); line-height: 0.9;
  letter-spacing: -0.04em; text-transform: uppercase;
  margin-bottom: 14px; max-width: 60%;
  background: linear-gradient(135deg, #fff 0%, hsl(var(--dive-hue) 100% 70%) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px hsl(var(--dive-hue) 100% 50% / 0.3));
}
.dive-sub {
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--fg-2); margin-bottom: 32px;
  max-width: 60%;
}
.dive-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  max-width: 60%;
}
.dive-cell {
  border: 1px solid var(--line-strong);
  background: rgba(0,0,0,0.45); backdrop-filter: blur(10px);
  border-radius: 8px; padding: 16px;
}
.cell-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; color: hsl(var(--dive-hue) 100% 70%); margin-bottom: 6px; }
.cell-v { font-size: 14px; color: var(--fg-2); }

/* LEAD MANAGER DASHBOARD MOCKUP (in JETR dive) */
.lm-dash {
  margin: 30px 0 30px;
  max-width: 100%;
  width: min(900px, calc(100vw - 60px));
  background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.55));
  border: 1px solid hsl(var(--dive-hue) 100% 50% / 0.4);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px hsl(var(--dive-hue) 100% 50% / 0.15);
}
.lm-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  color: var(--muted);
}
.lm-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.lm-dot.r { background: #ff5f56; }
.lm-dot.y { background: #ffbd2e; }
.lm-dot.g { background: var(--green); box-shadow: 0 0 5px var(--green); }
.lm-title { margin-left: 8px; color: var(--fg-2); }
.lm-spacer { flex: 1; }
.lm-meta { color: hsl(var(--dive-hue) 100% 70%); display: flex; align-items: center; gap: 6px; }
.lm-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 1.6s infinite; }

.lm-tabs {
  display: flex; gap: 4px; padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  background: rgba(0,0,0,0.3);
}
.lm-tab {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  padding: 6px 12px; border-radius: 6px;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); cursor: none;
  white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.lm-tab.active { background: hsl(var(--dive-hue) 100% 50% / 0.10); border-color: hsl(var(--dive-hue) 100% 50% / 0.4); color: hsl(var(--dive-hue) 100% 70%); }
.lm-tab .badge {
  font-size: 9px; padding: 2px 5px; border-radius: 999px;
  background: var(--green); color: var(--void); font-weight: 700;
}

.lm-kpis {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.lm-kpi {
  padding: 10px 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
}
.lm-kpi .l { font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 4px; }
.lm-kpi .v { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--fg); letter-spacing: -0.02em; }
.lm-kpi .v.green { color: var(--green); }
.lm-kpi .v.cyan { color: hsl(var(--dive-hue) 100% 70%); }

.lm-board {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
.lm-camp, .lm-leads {
  padding: 14px 16px;
  background: var(--bg);
}
.lm-camp-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.lm-pill {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  padding: 4px 8px; border: 1px solid var(--line-strong);
  border-radius: 4px; color: var(--muted);
  background: rgba(255,255,255,0.02);
}
.lm-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.01em;
  color: hsl(var(--dive-hue) 100% 70%);
  text-shadow: 0 0 12px hsl(var(--dive-hue) 100% 50% / 0.3);
  flex: 1;
}
.lm-score {
  display: flex; flex-direction: column;
  text-align: right;
}
.lm-score .l { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; color: var(--muted); }
.lm-score .v { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--green); text-shadow: 0 0 8px rgba(0,255,136,0.4); }
.lm-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 12px;
  padding: 6px 0;
  font-family: var(--font-mono); font-size: 11px;
  border-bottom: 1px dashed var(--line);
}
.lm-row:last-child { border-bottom: none; }
.lm-row .l { color: hsl(var(--dive-hue) 100% 70%); letter-spacing: 1px; }
.lm-row .v { color: var(--fg); }

.lm-leads-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: hsl(var(--dive-hue) 100% 70%); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.lm-leads-h .green { color: var(--green); }
.lm-lead {
  display: grid; grid-template-columns: 30px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  background: rgba(255,255,255,0.01);
  margin-bottom: 4px;
  animation: leadIn 0.4s ease backwards;
}
.lm-lead:nth-child(2) { animation-delay: 0.1s; }
.lm-lead:nth-child(3) { animation-delay: 0.15s; }
.lm-lead:nth-child(4) { animation-delay: 0.2s; }
.lm-lead:nth-child(5) { animation-delay: 0.25s; }
.lm-lead:nth-child(6) { animation-delay: 0.3s; }
.lm-lead:nth-child(7) { animation-delay: 0.35s; }
@keyframes leadIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
.lm-av {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, hsl(var(--dive-hue) 100% 40%), hsl(var(--dive-hue) 100% 60%));
  font-size: 10px; font-weight: 700; color: var(--void);
  letter-spacing: 1px;
}
.lm-info { display: flex; flex-direction: column; gap: 2px; }
.lm-n { font-size: 12px; color: var(--fg); font-weight: 600; }
.lm-m { font-size: 9px; color: var(--muted); letter-spacing: 0.5px; }
.lm-tag {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.5px;
  padding: 4px 7px; border-radius: 999px;
  border: 1px solid currentColor;
}
.lm-tag.hot  { color: #ff4d6d; background: rgba(255,77,109,0.10); }
.lm-tag.warm { color: var(--amber); background: rgba(255,184,0,0.08); }
.lm-tag.cold { color: var(--muted); background: rgba(255,255,255,0.04); }

.lm-foot {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.4);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  color: var(--fg-2);
}
.lm-foot .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); margin-right: 6px; vertical-align: middle; }

@media (max-width: 1100px) {
  .lm-dash { max-width: 100%; }
  .lm-board { grid-template-columns: 1fr; }
  .lm-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .dive canvas { right: 50%; top: 18%; transform: translateX(50%); width: 60vw; }
  .dive-overlay { padding-top: 70vh; padding-left: 16px; padding-right: 16px; }
  .dive-h2, .dive-sub, .dive-grid { max-width: 100%; }
  .dive-grid { grid-template-columns: 1fr; gap: 10px; }
  .lm-panel { margin: 0; }
  .lm-stats { grid-template-columns: repeat(2, 1fr); }
  .lm-camp-body { grid-template-columns: 1fr; }
  .lm-camp-img { height: 160px; }
}
@media (max-width: 480px) {
  .dive-overlay { padding-top: 55vh; }
  .lm-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .lm-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* ==========================================================
   AGENT ROSTER · 3D TILT GLASS CARDS
   ========================================================== */

.agents { position: relative; z-index: 2; padding-bottom: 60px; }
.agent-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  perspective: 1200px;
}
.agent-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 32px 28px;
  cursor: none;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s, box-shadow 0.3s;
  will-change: transform;
  overflow: hidden;
}
.agent-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px;
  padding: 1px;
  background: conic-gradient(from var(--ang, 0deg), transparent 0%, var(--cyan-line) 50%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.agent-card:hover::before { opacity: 1; animation: angleSpin 6s linear infinite; }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes angleSpin { from { --ang: 0deg; } to { --ang: 360deg; } }

.agent-card:hover {
  border-color: var(--cyan-line);
  box-shadow: 0 30px 80px rgba(0,240,255,0.12);
}
.agent-glow {
  position: absolute; inset: 0; border-radius: 18px;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(0,240,255,0.18), transparent 60%);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.agent-card:hover .agent-glow { opacity: 1; }

.agent-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; }
.agent-id { color: var(--muted); }
.agent-status { display: flex; align-items: center; gap: 6px; color: var(--green); }
.agent-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.6s infinite; }
.agent-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 42px; letter-spacing: -0.02em;
  text-transform: uppercase; line-height: 1;
  margin-bottom: 6px;
  background: linear-gradient(135deg, var(--fg) 0%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px var(--cyan-soft));
}
.agent-role {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: var(--cyan); margin-bottom: 16px;
}
.agent-bio { font-size: 14px; color: var(--fg-2); margin-bottom: 18px; }
.agent-spec { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-spec span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  padding: 5px 10px; border: 1px solid var(--line-strong);
  border-radius: 4px; color: var(--muted);
  background: rgba(255,255,255,0.02);
}
@media (max-width: 900px) { .agent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .agent-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   LIVE OPS TERMINAL · iCLAW JARVIS portal
   ========================================================== */

.ops { padding-bottom: 60px; position: relative; z-index: 2; }
.terminal {
  max-width: 1280px; margin: 0 auto;
  padding: 0 32px;
  position: relative;
}
.terminal::before, .terminal::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--cyan); border-radius: 2px;
  box-shadow: 0 0 8px var(--cyan-glow);
}
.terminal::before { top: -2px; left: 22px; border-right: none; border-bottom: none; }
.terminal::after  { bottom: -2px; right: 22px; border-left: none; border-top: none; }

.terminal-bar {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--cyan-line);
  border-radius: 12px 12px 0 0;
  padding: 12px 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  color: var(--muted);
  position: relative;
}
.terminal-bar::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.6;
}
.t-dot { width: 10px; height: 10px; border-radius: 50%; }
.t-r { background: #ff5f56; } .t-y { background: #ffbd2e; } .t-g { background: var(--green); box-shadow: 0 0 6px var(--green); }
.terminal-title { margin-left: 12px; color: var(--fg-2); }
.terminal-spacer { flex: 1; }
.terminal-meta { color: var(--cyan); }
.terminal-body {
  background: var(--bg);
  border: 1px solid var(--cyan-line); border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 24px 22px;
  font-family: var(--font-mono); font-size: 12px;
  line-height: 1.75;
  color: var(--fg-2);
  white-space: pre-wrap; word-break: break-word;
  height: 380px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--cyan) transparent;
  position: relative;
}
.terminal-body::-webkit-scrollbar { width: 6px; }
.terminal-body::-webkit-scrollbar-thumb { background: var(--cyan); border-radius: 3px; }
.terminal-body::after {
  content: "█";
  display: inline-block;
  color: var(--cyan); animation: caretBlink 0.9s infinite;
}
@keyframes caretBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.terminal-body div { animation: lineIn 0.3s ease-out backwards; }
@keyframes lineIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
.terminal-body .t-time { color: var(--muted); }
.terminal-body .t-tag { color: var(--cyan); }
.terminal-body .t-ok { color: var(--green); }
.terminal-body .t-warn { color: var(--amber); }
.terminal-body .t-agent { color: var(--magenta); }

/* ==========================================================
   STACK GRID
   ========================================================== */

.stack { padding-bottom: 60px; position: relative; z-index: 2; }
.stack-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.stack-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.005));
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.3s, box-shadow 0.3s;
}
.stack-item::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(0,240,255,0.10), transparent 50%);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.stack-item::after {
  content: "";
  position: absolute; top: 0; left: 28px; right: 28px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0; transition: opacity 0.3s;
  box-shadow: 0 0 8px var(--cyan-glow);
}
.stack-item:hover {
  transform: translateY(-5px);
  border-color: var(--cyan);
  box-shadow: 0 30px 70px rgba(0,240,255,0.18);
}
.stack-item:hover::before { opacity: 1; }
.stack-item:hover::after { opacity: 1; }
.stack-item:hover .stack-no { color: var(--cyan); text-shadow: 0 0 12px var(--cyan-glow); }
.stack-no {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px;
  color: var(--muted); margin-bottom: 16px; display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  transition: color 0.3s, text-shadow 0.3s, border-color 0.3s;
}
.stack-item:hover .stack-no { border-color: var(--cyan); }
.stack-item h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.01em;
  margin-bottom: 12px; text-transform: uppercase;
  background: linear-gradient(135deg, var(--fg) 0%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.stack-item p { font-size: 14px; color: var(--fg-2); line-height: 1.6; position: relative; z-index: 1; }
.stack-item .stack-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--cyan-line);
  border-radius: 10px;
  background: rgba(0,240,255,0.06);
  color: var(--cyan);
  margin-bottom: 18px;
  box-shadow: 0 0 16px rgba(0,240,255,0.10) inset;
  transition: transform 0.3s;
}
.stack-item:hover .stack-icon { transform: scale(1.1); }
@media (max-width: 900px) { .stack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .stack-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   PROCESS TIMELINE
   ========================================================== */

.process { padding-bottom: 60px; position: relative; z-index: 2; }
.process-timeline {
  max-width: 1080px; margin: 0 auto; padding: 0 32px;
  display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.process-timeline::before {
  content: ""; position: absolute;
  left: calc(32px + 60px); top: 24px; bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan) 0%, transparent 100%);
  opacity: 0.4;
}
.proc-step { display: flex; gap: 32px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--line); position: relative; }
.proc-step:last-child { border-bottom: none; }
.proc-num {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px;
  color: var(--cyan); width: 100px; flex-shrink: 0;
  padding-top: 6px; position: relative; z-index: 2;
}
.proc-num::before {
  content: ""; position: absolute; left: 60px; top: 12px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan-glow);
}
.proc-body h4 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 24px; letter-spacing: -0.01em;
  margin-bottom: 8px; text-transform: uppercase;
}
.proc-body p { font-size: 15px; color: var(--fg-2); max-width: 600px; }
@media (max-width: 768px) {
  .process-timeline::before { display: none; }
  .proc-step { flex-direction: column; gap: 8px; }
  .proc-num { width: auto; }
  .proc-num::before { display: none; }
}

/* ==========================================================
   PROCESS · cinematic flow
   ========================================================== */
.proc-flow {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  position: relative;
}
.proc-rail {
  position: absolute;
  left: calc(32px + 50px); right: calc(32px + 50px);
  top: 56px; height: 2px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--violet) 100%);
  opacity: 0.4;
  z-index: 0;
}
.pf-step { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pf-time {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px;
  color: hsl(var(--ph) 100% 70%);
  margin-bottom: 4px;
}
.pf-marker {
  width: 12px; height: 12px; border-radius: 50%;
  background: hsl(var(--ph) 100% 60%);
  box-shadow: 0 0 16px hsl(var(--ph) 100% 60% / 0.6), 0 0 0 4px rgba(0,0,0,0.7);
  position: relative;
}
.pf-marker span {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid hsl(var(--ph) 100% 60% / 0.4);
  animation: markerPulse 1.8s ease-out infinite;
}
@keyframes markerPulse {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}
.pf-card {
  background: linear-gradient(180deg, hsl(var(--ph) 100% 50% / 0.06), transparent);
  border: 1px solid hsl(var(--ph) 100% 50% / 0.25);
  border-radius: 14px;
  padding: 22px 18px;
  width: 100%;
  position: relative;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.pf-card:hover {
  transform: translateY(-3px);
  border-color: hsl(var(--ph) 100% 60%);
  box-shadow: 0 18px 50px hsl(var(--ph) 100% 50% / 0.18);
}
.pf-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid hsl(var(--ph) 100% 50% / 0.4);
  background: hsl(var(--ph) 100% 50% / 0.06);
  color: hsl(var(--ph) 100% 75%);
  margin-bottom: 14px;
}
.pf-card h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.01em;
  margin-bottom: 8px; text-transform: uppercase;
  color: hsl(var(--ph) 100% 80%);
}
.pf-card p { font-size: 13px; color: var(--fg-2); margin-bottom: 14px; line-height: 1.55; }
.pf-meta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  color: var(--muted);
  display: flex; align-items: center; gap: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.pf-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: hsl(var(--ph) 100% 60%); box-shadow: 0 0 5px hsl(var(--ph) 100% 60%); animation: pulse 1.6s infinite; }
.proc-pills {
  margin: 32px auto 0;
  max-width: 1280px; padding: 0 32px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
@media (max-width: 1100px) {
  .proc-flow { grid-template-columns: repeat(2, 1fr); }
  .proc-rail { display: none; }
}
@media (max-width: 600px) { .proc-flow { grid-template-columns: 1fr; } }

/* ==========================================================
   CTA · ANIMATED GRADIENT MESH + AURA
   ========================================================== */

.cta {
  padding: 60px 32px;
  position: relative; z-index: 2; overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--void);
  min-height: 100vh; display: grid; place-items: center;
}
.cta-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.35) saturate(1.3);
  z-index: 0;
  opacity: 0.55;
}
.cta-vignette {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.cta-mesh {
  position: absolute; inset: -10%; z-index: 0;
  background:
    radial-gradient(ellipse 50% 40% at 30% 30%, rgba(0,240,255,0.40), transparent 60%),
    radial-gradient(ellipse 40% 30% at 70% 70%, rgba(255,0,170,0.30), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(139,92,246,0.30), transparent 60%);
  filter: blur(60px);
  animation: meshMove 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.cta-mesh.m2 {
  background: radial-gradient(ellipse 60% 50% at 20% 80%, rgba(0,255,136,0.18), transparent 60%);
  animation: meshMove 22s ease-in-out infinite alternate-reverse;
}
.cta-mesh.m3 {
  background: radial-gradient(ellipse 40% 30% at 50% 50%, rgba(0,240,255,0.20), transparent 70%);
  animation: meshMove 14s ease-in-out infinite alternate;
  filter: blur(40px);
}
@keyframes meshMove {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(4%, -3%) scale(1.18); }
}
.cta-rings {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 70vmin; height: 70vmin;
  z-index: 0; pointer-events: none;
  opacity: 0.6;
}
.cr {
  position: absolute; inset: 0; border: 1px solid var(--cyan-line);
  border-radius: 50%;
  border-top-color: var(--cyan);
  animation: ringSpin 28s linear infinite;
}
.cr.r2 { inset: 14%; animation: ringSpin 22s linear reverse infinite; border-right-color: var(--violet); border-top-color: transparent; }
.cr.r3 { inset: 28%; animation: ringSpin 36s linear infinite; border-bottom-color: var(--cyan); border-top-color: transparent; }
.cr.r4 { inset: 40%; animation: ringSpin 18s linear reverse infinite; border-left-color: var(--violet); border-top-color: transparent; border-style: dashed; }

.cta-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 36px auto 28px;
  max-width: 760px;
}
.cs {
  padding: 16px 18px;
  border: 1px solid var(--cyan-line);
  background: rgba(0,0,0,0.4); backdrop-filter: blur(10px);
  border-radius: 10px;
  text-align: center;
}
.csv {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3vw, 40px); line-height: 1;
  letter-spacing: -0.02em;
  background: var(--grad-cv);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.csl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--muted); margin-top: 6px; }
@media (max-width: 600px) { .cta-stats { grid-template-columns: repeat(2, 1fr); } }
.cta .cta-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--cyan-line);
  background: rgba(0,240,255,0.06);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.cta .cta-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: pulse 1.4s infinite; }
.cta .cta-h2 .grad {
  background: var(--grad-cv);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px var(--cyan-glow));
}
.cta-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; text-align: center; }
.cta-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 4px; color: var(--cyan); margin-bottom: 24px; }
.cta-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 7vw, 96px); line-height: 0.95;
  letter-spacing: -0.03em; text-transform: uppercase;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #fff 0%, #888 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.cta-sub { font-size: 18px; color: var(--fg-2); margin-bottom: 36px; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 28px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px;
  border-radius: 6px; transition: all 0.3s ease; min-height: 44px;
  position: relative; overflow: hidden;
  cursor: none;
}
.btn-primary {
  background: var(--grad-cyan); color: var(--void); font-weight: 700;
  box-shadow: 0 12px 40px rgba(0,240,255,0.28), 0 0 0 1px rgba(0,240,255,0.6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 50px rgba(0,240,255,0.4), 0 0 0 1px rgba(0,240,255,1); }
.btn-ghost { color: var(--fg); border: 1px solid var(--line-strong); background: var(--glass); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-arrow { transition: transform 0.3s; }
.btn:hover .btn-arrow { transform: translateX(4px); }
.cta-foot { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; color: var(--muted); display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================
   FOOTER · TERMINAL
   ========================================================== */

.foot { padding: 60px 32px 24px; position: relative; z-index: 2; border-top: 1px solid var(--line); }
.foot-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.foot-block { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 12px; }
.foot-h { color: var(--cyan); margin-bottom: 8px; letter-spacing: 2px; }
.foot-block a { color: var(--fg-2); transition: color 0.2s; cursor: none; }
.foot-block a:hover { color: var(--cyan); }
.foot-block .green { color: var(--green); }
.foot-block .muted { color: var(--muted); }
.foot-bar {
  max-width: 1280px; margin: 40px auto 0; padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: var(--muted);
}
@media (max-width: 768px) {
  .foot-inner { grid-template-columns: repeat(2, 1fr); }
  .foot-bar { font-size: 10px; }
}

/* ==========================================================
   REVEAL ANIMATIONS
   ========================================================== */

.reveal-up {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(.2,.8,.2,1), transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.reveal-up.in { opacity: 1; transform: translateY(0); }

/* ==========================================================
   VIOLET ACCENT (extension)
   ========================================================== */
:root {
  --violet: #8b5cf6;
  --violet-2: #b794f4;
  --violet-glow: rgba(139, 92, 246, 0.45);
  --violet-soft: rgba(139, 92, 246, 0.18);
  --grad-cv: linear-gradient(135deg, #00f0ff 0%, #8b5cf6 100%);
}

/* ==========================================================
   AGENT AVATAR (added to existing card)
   ========================================================== */
.agent-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--cyan-line);
  overflow: hidden;
  margin-bottom: 18px;
  position: relative;
  box-shadow: 0 0 0 4px rgba(0,240,255,0.05), 0 8px 24px rgba(0,240,255,0.15);
}
.agent-avatar::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(from var(--ag, 0deg), var(--cyan), transparent, var(--violet), transparent, var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s;
  animation: ringSpin 6s linear infinite;
}
.agent-card:hover .agent-avatar::after { opacity: 1; }
.agent-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================
   TOKENIZATION GRID
   ========================================================== */
.tokenize { padding-bottom: 60px; position: relative; z-index: 2; }
.tk-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.tk-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 28px 26px;
  position: relative; overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.tk-card.cyan { border-color: rgba(0,240,255,0.20); }
.tk-card.violet { border-color: rgba(139,92,246,0.20); }
.tk-card.cyan:hover {
  border-color: var(--cyan); transform: translateY(-3px);
  box-shadow: 0 28px 70px rgba(0,240,255,0.18);
}
.tk-card.violet:hover {
  border-color: var(--violet); transform: translateY(-3px);
  box-shadow: 0 28px 70px rgba(139,92,246,0.20);
}
.tk-card::before {
  content: ""; position: absolute; top: -2px; left: 24px;
  width: 12px; height: 12px;
  border: 1px solid currentColor; border-right: none; border-bottom: none;
  opacity: 0.5;
}
.tk-card.cyan::before { color: var(--cyan); }
.tk-card.violet::before { color: var(--violet); }
.tk-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  margin-bottom: 18px;
  border: 1px solid currentColor;
}
.tk-card.cyan .tk-icon { color: var(--cyan); background: rgba(0,240,255,0.06); box-shadow: 0 0 16px rgba(0,240,255,0.15) inset; }
.tk-card.violet .tk-icon { color: var(--violet); background: rgba(139,92,246,0.06); box-shadow: 0 0 16px rgba(139,92,246,0.15) inset; }
.tk-no { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--muted); margin-bottom: 8px; }
.tk-card h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: -0.01em;
  margin-bottom: 10px; text-transform: uppercase;
}
.tk-card.cyan h4 { color: var(--cyan); }
.tk-card.violet h4 { color: var(--violet-2); }
.tk-card p { font-size: 14px; color: var(--fg-2); line-height: 1.55; }
@media (max-width: 900px) { .tk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tk-grid { grid-template-columns: 1fr; padding: 0 18px; } }

/* ==========================================================
   FOUR PILLARS OF EXECUTION
   ========================================================== */
.four-pillars { padding-bottom: 60px; position: relative; z-index: 2; }
.section-h2 .grad {
  background: var(--grad-cv);
  -webkit-background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px var(--cyan-glow));
}
.fp-row {
  max-width: 1280px; margin: 0 auto 60px;
  padding: 0 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center;
}
.fp-row.reverse > .fp-text { order: 2; }
.fp-row.reverse > .fp-vid  { order: 1; }
.fp-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(96px, 11vw, 180px); line-height: 0.9;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--fp-stroke, var(--cyan));
  filter: drop-shadow(0 0 30px var(--fp-glow, var(--cyan-glow)));
  margin-bottom: 8px;
}
.fp-row:nth-child(2) { --fp-stroke: var(--cyan); --fp-glow: rgba(0,240,255,0.45); }
.fp-row:nth-child(3) { --fp-stroke: #ff4d6d; --fp-glow: rgba(255,77,109,0.45); }
.fp-row:nth-child(4) { --fp-stroke: var(--violet); --fp-glow: rgba(139,92,246,0.45); }
.fp-row:nth-child(5) { --fp-stroke: var(--green); --fp-glow: rgba(0,255,136,0.45); }
.fp-vid-progress {
  position: absolute; left: 18px; right: 18px; bottom: 10px;
  height: 2px; background: rgba(255,255,255,0.08); border-radius: 2px;
  overflow: hidden; z-index: 3;
}
.fp-vid-progress > div {
  height: 100%; width: var(--p, 0%);
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
  transition: width 0.05s linear;
}
.fp-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 5vw, 64px); line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #fff 0%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.fp-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px; color: var(--cyan); margin-bottom: 20px; text-transform: uppercase; }
.fp-desc { font-size: 16px; color: var(--fg-2); margin-bottom: 24px; line-height: 1.65; max-width: 520px; }
.fp-meta { display: flex; gap: 28px; margin-bottom: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; }
.fp-meta .l { color: var(--muted); margin-right: 6px; }
.fp-meta .v { color: var(--fg); }
.fp-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 24px; border: 1px solid var(--cyan-line);
  border-radius: 8px; color: var(--cyan);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  cursor: none;
}
.fp-cta:hover { background: var(--cyan); color: var(--void); }
.fp-cta .arr { transition: transform 0.25s; }
.fp-cta:hover .arr { transform: translate(3px, -3px); }
.fp-vid {
  position: relative;
  aspect-ratio: 5 / 4;
  width: 100%;
  max-width: 540px;
  max-height: 460px;
  margin-inline: auto;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--cyan-line);
  box-shadow: 0 50px 120px rgba(0,240,255,0.16);
}
.fp-vid video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.9) saturate(1.2);
}
.fp-vid::after {
  content: ""; position: absolute; inset: 14px; border-radius: 18px;
  border: 1px solid rgba(0,240,255,0.2);
  pointer-events: none;
}
.fp-vid-tag {
  position: absolute; top: 22px; left: 22px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(8px);
  border: 1px solid var(--cyan-line);
  border-radius: 4px; color: var(--cyan);
  z-index: 2;
}
.fp-vid-status {
  position: absolute; bottom: 22px; right: 22px;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  border-radius: 4px; color: var(--green);
  z-index: 2;
}
.fp-vid-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 1.6s infinite; }
@media (max-width: 900px) {
  .fp-row { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; padding: 0 20px; }
  .fp-row.reverse > .fp-text, .fp-row.reverse > .fp-vid { order: initial; }
  .fp-vid { aspect-ratio: 16 / 10; max-height: 56vh; max-width: 100%; }
  .fp-num { font-size: clamp(72px, 18vw, 120px); }
  .fp-h { font-size: clamp(32px, 8vw, 48px); }
}

/* ==========================================================
   ALICE PARTICLE MORPH
   ========================================================== */
.morph {
  position: relative; min-height: 100vh;
  padding: 100px 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,240,255,0.08), transparent 70%);
  overflow: hidden;
  z-index: 2;
}
.morph-inner {
  max-width: 1400px; margin: 0 auto;
  position: relative; min-height: 80vh;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 40px;
  padding: 0 32px;
}
.morph-canvas {
  width: 100%; height: 600px;
  display: block;
}
.morph-overlay {
  position: relative; z-index: 5;
}
.morph-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 4px;
  color: var(--cyan); margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--cyan-line);
  background: rgba(0,240,255,0.05);
  border-radius: 999px;
}
.morph-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: pulse 1.4s infinite; }
.morph-h {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(56px, 9vw, 132px); line-height: 0.92;
  letter-spacing: -0.04em; text-transform: uppercase;
  margin-bottom: 24px;
  color: var(--fg);
}
.morph-h em {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 400; text-transform: none;
  background: linear-gradient(135deg, #fff 0%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px var(--cyan-glow));
}
.morph-sub {
  font-size: 17px; color: var(--fg-2);
  margin-bottom: 28px;
  max-width: 480px; line-height: 1.6;
}
.morph-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.m-pill {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  padding: 8px 14px; border: 1px solid var(--line-strong);
  background: rgba(0,0,0,0.4); backdrop-filter: blur(8px);
  border-radius: 4px; color: var(--fg-2);
}
.m-pill .ok { color: var(--green); }
@media (max-width: 900px) { .morph-inner { grid-template-columns: 1fr; gap: 30px; } .morph-canvas { height: 420px; } }

/* ==========================================================
   APEX GENESIS · The Story of A.L.I.C.E.
   ========================================================== */
.genesis {
  padding: 60px 32px;
  position: relative; z-index: 2;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(139,92,246,0.10), transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(0,240,255,0.08), transparent 60%);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.genesis-eyebrow {
  text-align: center; margin-bottom: 48px;
}
.genesis-eyebrow span {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--cyan-line);
  background: rgba(0, 240, 255, 0.06);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 4px;
  color: var(--cyan);
  backdrop-filter: blur(8px);
}
.genesis-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow);
  animation: pulse 1.4s infinite;
}
.genesis-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.15fr); gap: 56px;
  align-items: start;
  padding-inline: 6px;
}
.genesis-card {
  position: relative; aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--violet);
  background: var(--bg-2);
  box-shadow: 0 40px 100px rgba(139,92,246,0.20), 0 0 0 1px rgba(139,92,246,0.4) inset;
  z-index: 1;
}
.genesis-text { position: relative; z-index: 2; min-width: 0; }
.genesis-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.95) saturate(1.2); }
.genesis-frame { position: absolute; inset: 14px; border: 1px solid rgba(139,92,246,0.45); border-radius: 18px; pointer-events: none; }
.genesis-frame::before, .genesis-frame::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--cyan); box-shadow: 0 0 12px var(--cyan-glow);
}
.genesis-frame::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.genesis-frame::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.genesis-tag {
  position: absolute; top: 26px; left: 26px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px;
  padding: 7px 14px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  border: 1px solid var(--cyan-line);
  border-radius: 4px; color: var(--cyan);
  z-index: 2;
}
.genesis-pager {
  position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 2;
}
.genesis-pager .gp {
  width: 22px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.18);
  transition: background 0.3s, width 0.3s;
}
.genesis-pager .gp.active { background: var(--cyan); width: 32px; box-shadow: 0 0 8px var(--cyan-glow); }
.genesis-vid-meta {
  position: absolute; bottom: 22px; left: 22px; right: 22px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(10px);
  border: 1px solid var(--cyan-line);
  border-radius: 12px;
  z-index: 2;
}
.genesis-vid-meta .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--cyan); margin-bottom: 2px; }
.genesis-vid-meta .v { font-family: var(--font-display); font-size: 16px; color: var(--fg); }
.genesis-vid-meta .r { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--fg-2); }
.genesis-eyebrow-2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 4px; color: var(--cyan); margin-bottom: 18px; }
.genesis-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 6vw, 80px); line-height: 0.95;
  letter-spacing: -0.03em; text-transform: none;
  margin-bottom: 24px;
  color: var(--fg);
}
.genesis-desc { font-size: 16px; color: var(--fg-2); margin-bottom: 30px; line-height: 1.7; max-width: 580px; }
.genesis-chapters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 30px; }
.gch {
  display: grid; grid-template-columns: 56px 1fr auto;
  align-items: center; gap: 16px;
  padding: 16px 20px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px;
  color: var(--fg-2); cursor: none;
  text-align: left;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.gch:hover { background: rgba(0,240,255,0.04); border-color: var(--cyan-line); color: var(--fg); }
.gch.active {
  background: rgba(0,240,255,0.08);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 20px rgba(0,240,255,0.15);
}
.gch .gn { font-weight: 700; color: var(--muted); }
.gch.active .gn { color: var(--cyan); }
.gch .gt { font-weight: 700; }
.gch .gd { font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.genesis-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.genesis-foot {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  color: var(--muted);
}
.genesis-foot span { display: flex; align-items: center; gap: 6px; }
.genesis-foot .dot.v { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 6px var(--violet-glow); }
@media (max-width: 1100px) { .genesis-grid { grid-template-columns: 1fr; gap: 40px; max-width: 760px; } .genesis-card { max-width: 520px; margin: 0 auto; } }
@media (max-width: 900px) { .genesis-grid { grid-template-columns: 1fr; gap: 32px; } .genesis-card { aspect-ratio: 4/5; max-width: 100%; } }

/* ==========================================================
   3 PILLARS (Voice / Web / Blockchain)
   ========================================================== */
.pillars { padding-bottom: 60px; position: relative; z-index: 2; }
.pillar-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.pillar {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 36px 28px;
  overflow: hidden;
}
.pillar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--grad-cv);
  box-shadow: 0 0 12px var(--cyan-glow);
}
.pillar-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--muted); margin-bottom: 12px; }
.pillar-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1; letter-spacing: -0.03em;
  margin-bottom: 14px; text-transform: uppercase;
  background: var(--grad-cv);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px var(--cyan-glow));
}
.pillar-desc { font-size: 14px; color: var(--fg-2); margin-bottom: 18px; line-height: 1.6; }
.pillar-tech { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.pillar-tech span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  padding: 5px 10px; border: 1px solid var(--line-strong);
  border-radius: 4px; color: var(--fg-2);
  background: rgba(0,240,255,0.04);
}
.pillar-pulse {
  display: flex; align-items: flex-end; gap: 3px;
  height: 28px;
}
.pillar-pulse i {
  width: 4px; background: var(--cyan); flex-shrink: 0;
  box-shadow: 0 0 4px var(--cyan-glow);
  animation: waveBeat 1.2s ease-in-out infinite;
}
.pillar-pulse i:nth-child(1)  { height: 30%; animation-delay: 0.0s; }
.pillar-pulse i:nth-child(2)  { height: 60%; animation-delay: 0.08s; }
.pillar-pulse i:nth-child(3)  { height: 80%; animation-delay: 0.16s; }
.pillar-pulse i:nth-child(4)  { height: 40%; animation-delay: 0.24s; }
.pillar-pulse i:nth-child(5)  { height: 90%; animation-delay: 0.32s; }
.pillar-pulse i:nth-child(6)  { height: 55%; animation-delay: 0.40s; }
.pillar-pulse i:nth-child(7)  { height: 70%; animation-delay: 0.48s; }
.pillar-pulse i:nth-child(8)  { height: 25%; animation-delay: 0.56s; }
.pillar-pulse i:nth-child(9)  { height: 85%; animation-delay: 0.64s; }
.pillar-pulse i:nth-child(10) { height: 45%; animation-delay: 0.72s; }
.pillar-pulse i:nth-child(11) { height: 65%; animation-delay: 0.80s; }
.pillar-pulse i:nth-child(12) { height: 35%; animation-delay: 0.88s; }
@media (max-width: 900px) { .pillar-grid { grid-template-columns: 1fr; padding: 0 18px; } }

/* ==========================================================
   ALICE STORY
   ========================================================== */
.alice-story { padding: 60px 32px 100px; position: relative; z-index: 2; }
.alice-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px;
  align-items: center;
}
.alice-vid-wrap {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--cyan-line);
  background: var(--bg-2);
}
.alice-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.92) saturate(1.15);
}
.alice-vid-mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.65) 100%);
}
.alice-vid-frame {
  position: absolute; inset: 14px; border-radius: 18px;
  border: 1px solid rgba(0,240,255,0.3);
  pointer-events: none;
}
.alice-vid-frame::before, .alice-vid-frame::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid var(--cyan); box-shadow: 0 0 12px var(--cyan-glow);
}
.alice-vid-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.alice-vid-frame::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.alice-vid-meta {
  position: absolute; left: 24px; bottom: 24px; right: 24px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: var(--cyan);
}
.alice-vid-meta .green { color: var(--green); }
.alice-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 6.4vw, 84px); line-height: 0.95;
  letter-spacing: -0.025em; text-transform: none;
  margin: 18px 0 24px;
  background: linear-gradient(135deg, #fff 0%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.alice-h em {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 400; letter-spacing: 0.005em;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, var(--cyan) 0%, #fff 100%);
  -webkit-background-clip: text;
}
.alice-sub { font-size: 16px; color: var(--fg-2); margin-bottom: 14px; line-height: 1.65; }
.alice-points {
  list-style: none; margin: 22px 0 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.alice-points li {
  display: grid; grid-template-columns: 110px 1fr; gap: 18px;
  padding: 14px 16px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: rgba(255,255,255,0.02);
  font-size: 13px;
}
.alice-points .ap-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--cyan); }
.alice-points .ap-v { color: var(--fg-2); }
.alice-story .btn { cursor: none; }
@media (max-width: 900px) { .alice-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ==========================================================
   SHOW THE MACHINE BAND
   ========================================================== */
.show-machine {
  padding: 60px 32px;
  position: relative; z-index: 2;
  background: radial-gradient(ellipse at 50% 50%, rgba(139,92,246,0.10) 0%, transparent 70%);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.sm-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.sm-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 4px; color: var(--violet); margin-bottom: 22px; }
.sm-h {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.8vw, 56px); line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.sm-cite { margin-top: 28px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; color: var(--muted); }

/* ==========================================================
   ICLAW SHOWCASE
   ========================================================== */
.iclaw { padding-bottom: 60px; position: relative; z-index: 2; }
.iclaw-frame {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  position: relative;
}
.iclaw-bar {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--cyan-line);
  border-radius: 14px 14px 0 0;
  padding: 14px 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  color: var(--muted);
}
.iclaw-title { margin-left: 12px; color: var(--fg-2); }
.iclaw-spacer { flex: 1; }
.iclaw-meta { color: var(--green); display: flex; align-items: center; gap: 6px; }
.iclaw-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 1.6s infinite; }
.iclaw-body {
  display: grid; grid-template-columns: 220px 1fr 220px;
  background: var(--bg);
  border: 1px solid var(--cyan-line); border-top: none;
  border-radius: 0 0 14px 14px;
  min-height: 520px;
}
.iclaw-sidebar {
  border-right: 1px solid var(--line);
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.iclaw-vault {
  border-left: 1px solid var(--line);
  padding: 20px 16px;
  display: flex; flex-direction: column;
}
.ic-section {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px;
  color: var(--cyan); margin: 8px 0 12px;
}
.ic-agent {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px; border-radius: 8px; background: transparent;
  border: 1px solid transparent;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  color: var(--fg-2); cursor: none;
  transition: background 0.2s, border-color 0.2s;
}
.ic-agent:hover { background: rgba(0,240,255,0.04); border-color: var(--cyan-line); }
.ic-agent.active { background: rgba(0,240,255,0.08); border-color: var(--cyan); color: var(--cyan); }
.ic-agent img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ic-agent .n { font-weight: 700; }
.ic-agent .r { font-size: 9px; color: var(--muted); }
.ic-surf {
  text-align: left; padding: 8px 12px; background: transparent;
  border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  color: var(--fg-2); cursor: none;
  margin-bottom: 4px;
  transition: border-color 0.2s, color 0.2s;
}
.ic-surf:hover { border-color: var(--cyan-line); color: var(--cyan); }
.iclaw-main { padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.ic-pane {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.4);
}
.ic-pane-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--cyan); margin-bottom: 10px; }
.ic-pane-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--fg-2); margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.ic-pane-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 1.6s infinite; }
.ic-nerve { display: flex; align-items: flex-end; gap: 2px; height: 60px; }
.ic-nerve i {
  width: 3px; background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan-glow);
  animation: waveBeat 1.4s ease-in-out infinite;
}
.ic-nerve i:nth-child(odd)  { height: 30%; animation-delay: calc(var(--i, 0) * 0.07s); }
.ic-nerve i:nth-child(even) { height: 70%; animation-delay: calc(var(--i, 0) * 0.05s); }
.ic-nerve i:nth-child(3n)   { height: 90%; }
.ic-nerve i:nth-child(5n)   { height: 50%; }
.ic-nerve i:nth-child(7n)   { height: 25%; }
.ic-nerve i:nth-child(11n)  { height: 100%; }
.ic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ic-cell {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; background: rgba(0,0,0,0.4);
}
.ic-cell-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--muted); margin-bottom: 8px; }
.ic-cell-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; letter-spacing: -0.02em; line-height: 1;
  color: var(--fg);
}
.ic-cell-num.green { color: var(--green); text-shadow: 0 0 10px rgba(0,255,136,0.4); }
.ic-cell-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.ic-cell-bar > div { height: 100%; width: var(--w, 50%); background: var(--cyan); box-shadow: 0 0 6px var(--cyan-glow); }
.ic-input { font-family: var(--font-mono); font-size: 13px; color: var(--fg); display: flex; align-items: center; gap: 8px; }
.ic-prompt { color: var(--cyan); }
.ic-typed { color: var(--fg); }
.ic-caret { display: inline-block; width: 8px; height: 14px; background: var(--cyan); animation: caretBlink 0.9s infinite; box-shadow: 0 0 4px var(--cyan); }
.ic-vault-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); font-family: var(--font-mono); font-size: 11px; }
.ic-vault-row .l { color: var(--muted); letter-spacing: 1px; }
.ic-vault-row .v { color: var(--fg); }
.ic-vault-row .v.cyan { color: var(--cyan); }
.ic-score { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ic-score-ring { position: relative; width: 88px; height: 88px; }
.ic-score-ring svg { width: 100%; height: 100%; }
.ic-score-ring .n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--cyan); text-shadow: 0 0 10px var(--cyan-glow); }
.ic-score .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--muted); }
@media (max-width: 900px) {
  .iclaw-body { grid-template-columns: 1fr; }
  .iclaw-sidebar, .iclaw-vault { border: none; border-bottom: 1px solid var(--line); }
  .ic-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================
   TOKENOMICS FLOW
   ========================================================== */
.tk-flow { padding-bottom: 60px; position: relative; z-index: 2; }
.tkf-rail {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; justify-content: center;
  position: relative;
}
.tkf-line {
  position: absolute; left: 60px; right: 60px; top: 50%;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet) 50%, var(--magenta));
  opacity: 0.3; z-index: 0;
}
.tkf-step {
  flex: 1 1 140px; min-width: 150px; max-width: 180px;
  padding: 22px 18px;
  border: 1px solid var(--cyan-line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,240,255,0.04), transparent);
  position: relative; z-index: 2;
  text-align: center;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.tkf-step:hover { transform: translateY(-4px); border-color: var(--cyan); box-shadow: 0 24px 60px rgba(0,240,255,0.18); }
.tkf-step:nth-child(2n) { border-color: rgba(139,92,246,0.4); background: linear-gradient(180deg, rgba(139,92,246,0.05), transparent); }
.tkf-step:nth-child(2n):hover { border-color: var(--violet); box-shadow: 0 24px 60px rgba(139,92,246,0.18); }
.tkf-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px;
  color: var(--muted); display: block; margin-bottom: 8px;
}
.tkf-step h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: -0.01em; text-transform: uppercase;
  margin-bottom: 8px;
  background: var(--grad-cv);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.tkf-step p { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); line-height: 1.5; }
.tkf-arr { color: var(--cyan); align-self: center; font-size: 22px; }
.tkf-meta {
  margin: 32px auto 0;
  max-width: 1280px; padding: 0 32px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
@media (max-width: 1100px) { .tkf-arr { transform: rotate(90deg); width: 100%; text-align: center; } .tkf-rail { flex-direction: column; align-items: center; } .tkf-line { display: none; } .tkf-step { max-width: 420px; width: 100%; } }

/* ==========================================================
   FAQ
   ========================================================== */
.faq { padding-bottom: 60px; position: relative; z-index: 2; }
.faq-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(0,240,255,0.04), transparent 60%);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; letter-spacing: -0.005em;
  color: var(--fg);
  text-align: left;
  cursor: none;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.faq-q:hover {
  background: linear-gradient(135deg, rgba(0,240,255,0.10), transparent 60%);
  border-color: var(--cyan);
  transform: translateX(4px);
}
.faq-a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: var(--cyan); flex-shrink: 0; margin-left: 12px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.faq-q:hover .faq-a { opacity: 1; }
@media (max-width: 700px) { .faq-grid { grid-template-columns: 1fr; } .faq-q { font-size: 15px; padding: 18px 20px; } }

/* ==========================================================
   QUOTES / OPERATOR VOICES
   ========================================================== */
.quotes { padding-bottom: 60px; position: relative; z-index: 2; }
.q-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.q-card {
  padding: 26px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.005));
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.q-card:hover { transform: translateY(-3px); border-color: var(--cyan-line); box-shadow: 0 18px 50px rgba(0,240,255,0.10); }
.q-h { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.q-h img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--cyan-line); }
.q-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 1px; color: var(--cyan); }
.q-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--muted); margin-top: 2px; }
.q-text {
  font-family: var(--font-display); font-weight: 500;
  font-size: 16px; line-height: 1.55;
  color: var(--fg-2);
  font-style: italic;
  border-left: 3px solid var(--cyan);
  padding: 4px 14px;
  margin: 0;
}
@media (max-width: 900px) { .q-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   AVA LEAD MANAGER
   ========================================================== */
.ava-mgr {
  padding: 60px 0 100px;
  position: relative; z-index: 2;
  background: var(--bg);
  border-top: 1px solid var(--line);
  clear: both; width: 100%;
}
code { font-family: var(--font-mono); color: var(--cyan); background: rgba(0,240,255,0.06); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.mgr-frame {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  position: relative;
}
.mgr-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--cyan-line);
  border-radius: 14px 14px 0 0;
  padding: 12px 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  color: var(--muted);
}
.mgr-title { margin-left: 12px; color: var(--fg-2); }
.mgr-title .ver { color: var(--violet); margin-left: 6px; }
.mgr-spacer { flex: 1; }
.mgr-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--fg-2); }
.mgr-pill.ok { color: var(--green); border-color: rgba(0,255,136,0.4); }
.mgr-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; animation: pulse 1.6s infinite; }
.mgr-body {
  display: grid; grid-template-columns: 240px 1fr 280px;
  background: var(--bg);
  border: 1px solid var(--cyan-line); border-top: none;
  min-height: 540px;
  width: 100%; overflow: hidden;
}
@media (max-width: 1100px) { .mgr-body { grid-template-columns: 220px 1fr; } }
.mgr-side { border-right: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); }
.ms-section { font-size: 9px; letter-spacing: 3px; color: var(--cyan); margin: 10px 0 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.ms-section:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.ms-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 10px; align-items: center; }
.ms-row .l { color: var(--muted); white-space: nowrap; }
.ms-row .v { color: var(--fg); text-align: right; white-space: nowrap; font-weight: 700; }
.ms-row .l { color: var(--muted); }
.ms-row .v { color: var(--fg); }
.ms-row .v.green { color: var(--green); }
.ms-row .v.amber { color: var(--amber); }
.ms-row .v.cyan { color: var(--cyan); }
.ms-tab { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--fg-2); cursor: none; text-align: left; transition: border-color 0.2s, color 0.2s; margin-bottom: 3px; }
.ms-tab:hover { border-color: var(--cyan); color: var(--cyan); }
.ms-tab.active { background: rgba(0,240,255,0.08); border-color: var(--cyan); color: var(--cyan); }
.mgr-main { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.mgr-page-head { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mph-nav { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; }
.mph-nav button { background: transparent; border: 1px solid var(--line-strong); padding: 4px 9px; border-radius: 4px; color: var(--fg-2); cursor: none; font-family: var(--font-mono); font-size: 10px; }
.mph-nav button:hover { border-color: var(--cyan); color: var(--cyan); }
.mph-c { color: var(--muted); }
.mph-active { display: flex; flex-direction: column; gap: 2px; }
.mph-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--cyan); }
.mph-v { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 1px; color: var(--fg); }
.mph-score { display: flex; flex-direction: column; gap: 2px; margin-left: auto; align-items: flex-end; }
.mphs-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--muted); }
.mphs-v { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; color: var(--green); text-shadow: 0 0 14px rgba(0,255,136,0.4); }
.mgr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mg-card { padding: 14px; background: rgba(0,0,0,0.45); border: 1px solid var(--line); border-radius: 10px; }
.mgc-h { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--cyan); margin-bottom: 6px; }
.mgc-num { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--fg); }
.mgc-num .u { font-size: 14px; color: var(--muted); margin-left: 2px; }
.mgc-spark { display: flex; align-items: flex-end; gap: 2px; height: 24px; margin: 8px 0 6px; }
.mgc-spark i { flex: 1; background: var(--cyan); height: var(--h, 50%); border-radius: 1px; box-shadow: 0 0 4px rgba(0,240,255,0.4); }
.mgc-d { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; color: var(--muted); }
.mgr-rows { display: flex; flex-direction: column; gap: 4px; }
.mgr-row { display: grid; grid-template-columns: 140px 1fr 110px; align-items: center; gap: 14px; padding: 12px 14px; background: rgba(0,0,0,0.3); border: 1px solid var(--line); border-radius: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; transition: border-color 0.2s, background 0.2s; }
.mgr-row:hover { border-color: var(--cyan-line); background: rgba(0,240,255,0.04); }
.mr-l { color: var(--cyan); }
.mr-v { color: var(--fg-2); }
.mr-stat { text-align: right; font-weight: 700; }
.mr-stat.green { color: var(--green); }
.mr-stat.amber { color: var(--amber); }
.mgr-foot { padding: 12px 18px; background: var(--bg-3); border: 1px solid var(--cyan-line); border-top: none; border-radius: 0 0 14px 14px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--muted); }
@media (max-width: 900px) {
  .mgr-body { grid-template-columns: 1fr; }
  .mgr-side { border-right: none; border-bottom: 1px solid var(--line); }
  .mgr-grid { grid-template-columns: repeat(2, 1fr); }
  .mgr-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ==========================================================
   ENGAGEMENT TIERS
   ========================================================== */
.tiers { padding-bottom: 60px; position: relative; z-index: 2; }
.tiers-grid { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tier {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.005));
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 32px 28px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  display: flex; flex-direction: column;
}
.tier:hover { transform: translateY(-4px); border-color: var(--cyan-line); box-shadow: 0 30px 80px rgba(0,240,255,0.16); }
.tier.featured { border-color: var(--cyan); background: linear-gradient(180deg, rgba(0,240,255,0.08), transparent); box-shadow: 0 0 0 1px rgba(0,240,255,0.4) inset, 0 30px 80px rgba(0,240,255,0.18); transform: translateY(-6px); }
.tier-flag { position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; padding: 4px 8px; background: var(--cyan); color: var(--void); border-radius: 4px; font-weight: 700; }
.tier-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; color: var(--muted); margin-bottom: 12px; }
.tier-name { font-family: var(--font-display); font-weight: 700; font-size: 42px; letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; background: linear-gradient(135deg, #fff 0%, var(--cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.tier.featured .tier-name { filter: drop-shadow(0 0 24px var(--cyan-glow)); }
.tier-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--cyan); margin-bottom: 18px; }
.tier-desc { font-size: 14px; color: var(--fg-2); margin-bottom: 22px; line-height: 1.6; }
.tier-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; flex: 1; }
.tier-list li { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); padding-left: 18px; position: relative; line-height: 1.5; }
.tier-list li::before { content: "→"; position: absolute; left: 0; color: var(--cyan); }
.tier-stat { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; border-top: 1px dashed var(--line); }
.ts-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--muted); }
.ts-v { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--fg); }
.tier.featured .ts-v { color: var(--cyan); }
@media (max-width: 900px) { .tiers-grid { grid-template-columns: 1fr; } .tier.featured { transform: none; } }

/* ==========================================================
   VS TRADITIONAL AGENCY
   ========================================================== */
.versus { padding-bottom: 60px; position: relative; z-index: 2; }
.vs-table { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.vs-h, .vs-r { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.vs-h {
  background: var(--bg-3);
  border: 1px solid var(--cyan-line);
  border-radius: 12px 12px 0 0;
}
.vs-h > div { padding: 16px 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; }
.vs-hl { color: var(--muted); }
.vs-old { color: var(--amber); }
.vs-new { color: var(--cyan); border-left: 1px solid var(--line); }
.vs-r {
  border: 1px solid var(--cyan-line); border-top: none;
  background: var(--bg);
  transition: background 0.2s ease;
}
.vs-r:hover { background: rgba(0,240,255,0.045); }
.vs-r:last-child { border-radius: 0 0 12px 12px; }
.vs-r > div { padding: 16px 20px; font-size: 13px; }
.vs-r .vs-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--fg); }
.vs-r .vs-old { color: var(--muted); text-decoration: line-through; }
.vs-r .vs-new { color: var(--green); border-left: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-weight: 600; }
.vs-r .vs-new .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 1.6s infinite; }
@media (max-width: 700px) {
  .vs-h, .vs-r { grid-template-columns: 1fr; }
  .vs-r .vs-new { border-left: none; border-top: 1px solid var(--line); }
  .vs-old { display: none; }
  .vs-h .vs-old { display: none; }
}

/* ==========================================================
   VAULT
   ========================================================== */
.vault { padding-bottom: 60px; position: relative; z-index: 2; }
.vault-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 140px;
  gap: 12px;
}
.vault-cell {
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(0,240,255,0.04), transparent);
  border: 1px solid var(--cyan-line);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  grid-column: span 2;
}
.vault-cell:hover { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 18px 50px rgba(0,240,255,0.18); }
.vault-cell.big { grid-column: span 3; grid-row: span 2; background: radial-gradient(ellipse at 70% 30%, rgba(0,240,255,0.10), transparent 70%), var(--bg-2); }
.vault-cell.wide { grid-column: span 6; grid-row: span 2; background: var(--bg-2); }
.vc-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; color: var(--cyan); }
.vc-n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -0.03em;
  background: var(--grad-cv);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.vault-cell.big .vc-n { font-size: clamp(56px, 7vw, 96px); }
.vc-n .u { font-size: 0.5em; color: var(--cyan); margin-left: 2px; }
.vc-x { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--muted); margin-top: auto; }
.vc-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.vc-list li {
  display: grid; grid-template-columns: 130px 1fr 110px;
  align-items: center; gap: 16px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px;
}
.vl-tag { color: var(--cyan); letter-spacing: 2px; }
.vl-t { color: var(--fg-2); }
.vl-s { text-align: right; color: var(--green); font-weight: 700; }
@media (max-width: 1100px) { .vault-grid { grid-template-columns: repeat(3, 1fr); } .vault-cell.big { grid-column: span 3; } .vault-cell.wide { grid-column: span 3; } }
@media (max-width: 600px) {
  .vault-grid { grid-template-columns: 1fr; }
  .vault-cell, .vault-cell.big, .vault-cell.wide { grid-column: span 1; }
  .vc-list li { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================
   100× CONTENT ENGINE
   ========================================================== */
.engine100 { padding-bottom: 60px; position: relative; z-index: 2; }
.e100-frame {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
}
.e100-rails {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 22px;
  background: linear-gradient(180deg, rgba(0,240,255,0.04), transparent);
  border: 1px solid var(--cyan-line);
  border-radius: 16px;
  margin-bottom: 24px;
}
.e100-rail {
  display: grid; grid-template-columns: 90px 1fr 110px;
  align-items: center; gap: 16px;
  padding: 8px 12px;
  border: 1px solid hsl(var(--rh) 100% 50% / 0.18);
  border-radius: 8px;
  background: hsl(var(--rh) 100% 50% / 0.04);
}
.e100-rail .r-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px;
  color: hsl(var(--rh) 100% 75%);
}
.e100-rail .r-flow {
  display: flex; align-items: center; gap: 5px; height: 26px;
  position: relative;
  overflow: hidden;
}
.e100-rail .r-flow i {
  width: 6px; height: 6px; border-radius: 50%;
  background: hsl(var(--rh) 100% 60%);
  box-shadow: 0 0 8px hsl(var(--rh) 100% 60%);
  animation: flowPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.e100-rail .r-flow i:nth-child(1) { animation-delay: 0s; }
.e100-rail .r-flow i:nth-child(2) { animation-delay: 0.05s; }
.e100-rail .r-flow i:nth-child(3) { animation-delay: 0.10s; }
.e100-rail .r-flow i:nth-child(4) { animation-delay: 0.15s; }
.e100-rail .r-flow i:nth-child(5) { animation-delay: 0.20s; }
.e100-rail .r-flow i:nth-child(6) { animation-delay: 0.25s; }
.e100-rail .r-flow i:nth-child(7) { animation-delay: 0.30s; }
.e100-rail .r-flow i:nth-child(8) { animation-delay: 0.35s; }
.e100-rail .r-flow i:nth-child(9) { animation-delay: 0.40s; }
.e100-rail .r-flow i:nth-child(10) { animation-delay: 0.45s; }
.e100-rail .r-flow i:nth-child(11) { animation-delay: 0.50s; }
.e100-rail .r-flow i:nth-child(12) { animation-delay: 0.55s; }
.e100-rail .r-flow i:nth-child(13) { animation-delay: 0.60s; }
.e100-rail .r-flow i:nth-child(14) { animation-delay: 0.65s; }
.e100-rail .r-flow i:nth-child(15) { animation-delay: 0.70s; }
.e100-rail .r-flow i:nth-child(16) { animation-delay: 0.75s; }
.e100-rail .r-flow i:nth-child(17) { animation-delay: 0.80s; }
.e100-rail .r-flow i:nth-child(18) { animation-delay: 0.85s; }
.e100-rail .r-flow i:nth-child(19) { animation-delay: 0.90s; }
.e100-rail .r-flow i:nth-child(20) { animation-delay: 0.95s; }
@keyframes flowPulse {
  0%,100% { opacity: 0.3; transform: translateX(0) scale(0.8); }
  50% { opacity: 1; transform: translateX(8px) scale(1.1); }
}
.e100-rail .r-stat {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  color: hsl(var(--rh) 100% 75%);
  text-align: right;
}
.e100-ticker {
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 24px;
}
.e100-ticker-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.e100-stat { text-align: center; }
.e100-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.5vw, 44px); line-height: 1;
  letter-spacing: -0.02em;
  background: var(--grad-cv);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px var(--cyan-glow));
}
.e100-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--muted); margin-top: 8px; }
.e100-stages {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  padding: 18px 22px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}
.es {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 18px;
  border: 1px solid var(--cyan-line);
  border-radius: 10px;
  background: rgba(0,240,255,0.04);
  min-width: 140px; text-align: center;
}
.esn { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--muted); }
.est { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 1px; color: var(--cyan); }
.esd { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--fg-2); }
.es-arr { color: var(--cyan); font-size: 22px; }
@media (max-width: 900px) {
  .e100-ticker-row { grid-template-columns: repeat(2, 1fr); }
  .e100-rail { grid-template-columns: 70px 1fr; }
  .e100-rail .r-stat { display: none; }
  .e100-stages { flex-direction: column; gap: 8px; }
  .es-arr { transform: rotate(90deg); }
}

/* ==========================================================
   AGENT SWARMS PARALLEL
   ========================================================== */
.swarms-parallel { padding-bottom: 60px; position: relative; z-index: 2; }

/* DAY_312 · build-day timeline (Sprint 6) */
.swp-timeline {
  max-width: 1280px; margin: 0 auto 32px; padding: 18px 32px 26px;
}
.swp-tl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; font-family: var(--font-mono); }
.swp-tl-tag { color: var(--cyan); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.swp-tl-meta { color: var(--fg-2); font-size: 11px; letter-spacing: 1.2px; }
.swp-tl-track {
  position: relative; height: 2px; background: linear-gradient(90deg, rgba(0,240,255,0.06), rgba(0,240,255,0.34) 50%, rgba(0,240,255,0.06));
  border-radius: 2px; margin: 24px 0 36px;
}
.swp-tl-tick {
  position: absolute; left: var(--tx); transform: translateX(-50%);
  top: -6px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding-top: 16px; font-family: var(--font-mono);
}
.swp-tl-tick::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--void); border: 1px solid var(--cyan-line);
}
.swp-tl-tick b { font-size: 10.5px; color: var(--fg); letter-spacing: 1.4px; font-weight: 700; }
.swp-tl-tick span { font-size: 9.5px; color: var(--fg-2); letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap; }
.swp-tl-tick.swp-tl-now::before { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px var(--cyan), 0 0 24px rgba(0,240,255,0.4); animation: pulse 1.6s infinite; }
.swp-tl-tick.swp-tl-now b { color: var(--cyan); }
.swp-tl-cursor {
  position: absolute; left: var(--tx); top: -10px; width: 1px; height: calc(100% + 80px);
  background: linear-gradient(180deg, transparent, rgba(0,240,255,0.25), transparent);
  pointer-events: none;
}
@media (max-width: 900px) {
  .swp-timeline { padding: 14px 18px 22px; }
  .swp-tl-track { margin: 20px 0 30px; }
  .swp-tl-tick:nth-child(2), .swp-tl-tick:nth-child(5) { display: none; }
  .swp-tl-tick span { font-size: 8.5px; }
}

.swp-frame {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
}
.swp-lanes {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.swp-lane {
  background: linear-gradient(180deg, hsl(var(--lh) 100% 50% / 0.06), transparent);
  border: 1px solid hsl(var(--lh) 100% 50% / 0.25);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.swp-lane:hover {
  border-color: hsl(var(--lh) 100% 60%);
  box-shadow: 0 18px 50px hsl(var(--lh) 100% 50% / 0.18);
}
.swp-lane.queen { border-color: var(--cyan); background: linear-gradient(180deg, rgba(0,240,255,0.08), transparent); box-shadow: 0 0 0 1px rgba(0,240,255,0.18); }
.swp-h { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line-strong); }
.swp-h img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.swp-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 1px; color: var(--fg); flex: 1; }
.swp-name .q { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; color: var(--cyan); margin-left: 4px; padding: 2px 4px; border: 1px solid var(--cyan); border-radius: 3px; }
.swp-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.5px;
  color: var(--green);
}
.swp-status .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); animation: pulse 1.4s infinite; }
.swp-tasks { display: flex; flex-direction: column; gap: 4px; }
.swp-task {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
}
.swp-task .t { color: var(--fg-2); flex: 1; }
.swp-task .g { font-size: 9px; letter-spacing: 1px; }
.swp-task.done .g { color: var(--muted); }
.swp-task.done { opacity: 0.6; }
.swp-task.done .t { text-decoration: line-through; }
.swp-task.active { background: rgba(0,240,255,0.08); border-color: var(--cyan-line); }
.swp-task.active .g { color: var(--cyan); }
.swp-task.active .t { color: var(--fg); }
.swp-task.active::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 6px var(--cyan-glow);
  margin-right: 6px;
  animation: pulse 1.2s infinite;
}
.swp-task.pending .g { color: var(--muted); }
.swp-task.pending { opacity: 0.55; }
.swp-bar { height: 3px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.swp-bar > div { height: 100%; width: var(--w, 50%); background: hsl(var(--lh) 100% 60%); box-shadow: 0 0 6px hsl(var(--lh) 100% 60% / 0.5); animation: barPulse 2s ease-in-out infinite alternate; }
.swp-lane.queen .swp-bar > div { background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
@keyframes barPulse { from { opacity: 0.7; } to { opacity: 1; } }
.swp-foot {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 6px;
}
@media (max-width: 1100px) { .swp-lanes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .swp-lanes { grid-template-columns: 1fr; } }

/* ==========================================================
   CONTENT PIPELINE
   ========================================================== */
.pipeline { padding-bottom: 60px; position: relative; z-index: 2; }
.pipe-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: stretch; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.pipe-step {
  flex: 1 1 200px; min-width: 200px; max-width: 240px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid hsl(var(--step-hue) 100% 50% / 0.25);
  border-radius: 14px;
  padding: 22px 20px;
  position: relative;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.pipe-step:hover {
  border-color: hsl(var(--step-hue) 100% 60%);
  box-shadow: 0 18px 60px hsl(var(--step-hue) 100% 50% / 0.18);
  transform: translateY(-3px);
}
.pipe-step::before {
  content: ""; position: absolute; top: 0; left: 22px; right: 22px;
  height: 2px; background: hsl(var(--step-hue) 100% 60%);
  box-shadow: 0 0 8px hsl(var(--step-hue) 100% 50% / 0.6);
}
.pipe-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--muted); margin-bottom: 8px; }
.pipe-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.01em;
  margin-bottom: 12px; text-transform: uppercase;
  color: hsl(var(--step-hue) 100% 75%);
}
.pipe-step p { font-size: 13px; color: var(--fg-2); margin-bottom: 14px; line-height: 1.55; }
.pipe-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.pipe-tools span {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  padding: 3px 7px; border: 1px solid hsl(var(--step-hue) 100% 50% / 0.3);
  border-radius: 4px; color: hsl(var(--step-hue) 100% 75%);
}
.pipe-arrow {
  align-self: center;
  font-family: var(--font-mono); font-size: 24px;
  color: var(--muted);
  opacity: 0.5;
}
.pipe-meta {
  margin: 32px auto 0;
  max-width: 1280px; padding: 0 32px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
@media (max-width: 1100px) {
  .pipe-grid { flex-direction: column; align-items: center; }
  .pipe-step { max-width: 420px; width: 100%; }
  .pipe-arrow { transform: rotate(90deg); }
}

/* ==========================================================
   SCALE_BRANDS GRAPH
   ========================================================== */
.scale { padding-bottom: 60px; position: relative; z-index: 2; }
.scale-graph {
  max-width: 1280px; margin: 0 auto; padding: 40px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 60px;
  position: relative;
}
.scale-graph::before {
  content: ""; position: absolute; top: 100px; bottom: 100px;
  left: 50%; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--cyan), transparent 60%);
  opacity: 0.3;
}
.scale-tier {
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: center;
  position: relative; z-index: 2;
}
.scale-node {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-2);
  min-width: 140px;
  position: relative;
}
.scale-node .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan-glow), 0 0 4px var(--cyan);
  margin-bottom: 4px;
}
.scale-node.n1 .dot { background: hsl(var(--hue) 100% 60%); box-shadow: 0 0 14px hsl(var(--hue) 100% 60% / 0.6); }
.scale-node.n2 .dot { background: var(--violet); box-shadow: 0 0 10px var(--violet-glow); opacity: 0.6; }
.scale-node .lbl {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 1px;
  color: var(--fg);
}
.scale-node .sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.scale-node.n0 { border-color: var(--cyan); background: linear-gradient(180deg, rgba(0,240,255,0.10), transparent); }
.scale-node.n0 .lbl { color: var(--cyan); }
.scale-node.future { opacity: 0.5; border-style: dashed; }
.scale-meta {
  margin: 24px auto 0;
  max-width: 1280px; padding: 0 32px;
  display: flex; flex-wrap: wrap; gap: 12px;
}

/* ==========================================================
   ⌘K COMMAND PALETTE
   ========================================================== */
.cmdk {
  position: fixed; inset: 0; z-index: 9990;
  visibility: hidden; opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
  display: grid; place-items: flex-start center;
  padding-top: 14vh;
}
.cmdk.open { visibility: visible; opacity: 1; }
.cmdk-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(12px);
}
.cmdk-panel {
  position: relative;
  width: min(640px, 92vw);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--cyan);
  box-shadow: 0 40px 100px rgba(0,240,255,0.18), 0 0 0 1px rgba(0,240,255,0.4) inset;
  border-radius: 16px;
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform 0.2s;
}
.cmdk.open .cmdk-panel { transform: translateY(0); }
.cmdk-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.cmdk-prompt { color: var(--cyan); font-family: var(--font-mono); font-size: 18px; }
.cmdk-bar input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--fg); font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.5px;
}
.cmdk-bar input::placeholder { color: var(--muted); }
.cmdk-kbd {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-strong);
  border-radius: 4px; color: var(--fg-2);
}
.cmdk-list {
  max-height: 50vh; overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin; scrollbar-color: var(--cyan) transparent;
}
.cmdk-item {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  cursor: none;
  transition: background 0.15s;
}
.cmdk-item:hover, .cmdk-item.active {
  background: rgba(0,240,255,0.08);
}
.cmdk-item.active { box-shadow: inset 0 0 0 1px var(--cyan-line); }
.cmdk-icon { color: var(--cyan); display: grid; place-items: center; }
.cmdk-text { display: flex; flex-direction: column; gap: 2px; }
.cmdk-title { font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px; color: var(--fg); }
.cmdk-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.cmdk-cat { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--cyan); }
.cmdk-foot {
  display: flex; gap: 16px; align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  color: var(--muted);
  background: rgba(0,0,0,0.5);
}
.cmdk-foot span { display: flex; align-items: center; gap: 6px; }

/* ==========================================================
   SLIDE-IN DRAWER (contact / mobile nav)
   ========================================================== */
.drawer, .m-drawer {
  position: fixed; inset: 0; z-index: 9985;
  visibility: hidden; opacity: 0;
  overflow: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.drawer.open, .m-drawer.open { visibility: visible; opacity: 1; }
.drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(10px);
}
.drawer-panel, .m-drawer-panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(480px, 92vw);
  background: linear-gradient(180deg, var(--bg-3), var(--bg));
  border-left: 1px solid var(--cyan);
  box-shadow: -40px 0 100px rgba(0,240,255,0.10);
  padding: 60px 36px 32px;
  overflow-y: auto;
  transform: translateX(20px);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.drawer.open .drawer-panel, .m-drawer.open .m-drawer-panel { transform: translateX(0); }
.drawer-close {
  position: absolute; top: 18px; right: 22px;
  width: 36px; height: 36px;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: 50%; cursor: none;
  font-size: 22px; line-height: 1;
  color: var(--fg-2);
  transition: border-color 0.2s, color 0.2s;
}
.drawer-close:hover { border-color: var(--cyan); color: var(--cyan); }
.drawer-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 4px; color: var(--cyan); margin-bottom: 12px; }
.drawer-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: 44px; line-height: 0.95;
  letter-spacing: -0.03em; text-transform: uppercase;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #fff 0%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.drawer-sub { font-size: 15px; color: var(--fg-2); margin-bottom: 32px; }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--cyan); }
.form-row input, .form-row select, .form-row textarea {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--fg);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,240,255,0.12);
}
.form-row select { color: var(--fg-2); }
.form-row option { background: var(--bg); color: var(--fg); }
.form-row textarea { resize: vertical; min-height: 100px; }
.form-submit {
  background: var(--grad-cyan); color: var(--void); font-weight: 700;
  border: none; padding: 16px 24px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px;
  border-radius: 6px; cursor: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 12px 40px rgba(0,240,255,0.25);
}
.form-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba(0,240,255,0.4); }
.form-status { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; color: var(--green); margin-top: 4px; min-height: 20px; }
.form-status.err { color: var(--amber); }

/* MOBILE DRAWER */
.m-drawer-panel { padding: 60px 28px 32px; }
.m-drawer-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 4px; color: var(--cyan); margin-bottom: 18px; }
.m-drawer-panel a {
  display: block; padding: 14px 0;
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 2px;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  transition: color 0.2s, padding 0.2s;
}
.m-drawer-panel a:hover { color: var(--cyan); padding-left: 6px; }
.m-drawer-cta {
  margin-top: 20px;
  width: 100%;
  background: var(--grad-cyan); color: var(--void); font-weight: 700;
  border: none; padding: 16px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px;
  border-radius: 6px; cursor: none;
}

/* ==========================================================
   BRAND MODAL
   ========================================================== */
.modal {
  position: fixed; inset: 0; z-index: 9988;
  visibility: hidden; opacity: 0;
  transition: opacity 0.25s, visibility 0.25s;
  display: grid; place-items: center;
  padding: 24px;
}
.modal.open { visibility: visible; opacity: 1; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(14px); }
.modal-panel {
  position: relative;
  width: min(900px, 96vw);
  aspect-ratio: 16 / 10;
  max-height: 86vh;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--cyan);
  box-shadow: 0 50px 120px rgba(0,240,255,0.18);
  transform: scale(0.96);
  transition: transform 0.25s;
}
.modal.open .modal-panel { transform: scale(1); }
.modal-close {
  position: absolute; top: 18px; right: 18px; z-index: 5;
  width: 36px; height: 36px;
  background: rgba(0,0,0,0.6); border: 1px solid var(--line-strong);
  border-radius: 50%; cursor: none;
  font-size: 22px; line-height: 1;
  color: var(--fg);
  backdrop-filter: blur(8px);
  transition: border-color 0.2s, background 0.2s;
}
.modal-close:hover { border-color: var(--cyan); }
.modal-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }
.modal-mask { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, transparent 50%, rgba(0,0,0,0.7) 100%); }
.modal-content {
  position: relative; z-index: 3;
  padding: 48px;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%;
}
.modal-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 4px; color: var(--cyan); margin-bottom: 12px; }
.modal-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 6vw, 80px); line-height: 0.95;
  letter-spacing: -0.03em; text-transform: uppercase;
  margin-bottom: 14px; color: var(--fg);
}
.modal-desc { font-size: 16px; color: var(--fg-2); margin-bottom: 22px; max-width: 620px; }
.modal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; max-width: 600px; }
.modal-grid > div { padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); }
.modal-grid .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--cyan); margin-bottom: 4px; display: block; }
.modal-grid .v { font-family: var(--font-mono); font-size: 12px; color: var(--fg); }
.modal-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px; border: 1px solid var(--cyan);
  border-radius: 6px; color: var(--cyan); font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 2px; align-self: flex-start;
  transition: background 0.2s, color 0.2s;
}
.modal-cta:hover { background: var(--cyan); color: var(--void); }

/* ==========================================================
   TOAST
   ========================================================== */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translate(-50%, 8px);
  z-index: 9999;
  background: var(--bg-3);
  border: 1px solid var(--cyan);
  padding: 14px 22px; border-radius: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
  color: var(--fg);
  box-shadow: 0 12px 40px rgba(0,240,255,0.18);
  visibility: hidden; opacity: 0;
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}
.toast.show { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.toast.err { border-color: var(--amber); box-shadow: 0 12px 40px rgba(255,184,0,0.18); }

/* ==========================================================
   FAB · scroll to top + audio toggle
   ========================================================== */
.fab {
  position: fixed; right: 22px; z-index: 90;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(10px);
  border: 1px solid var(--cyan-line);
  border-radius: 50%;
  color: var(--cyan); cursor: none;
  visibility: hidden; opacity: 0;
  transition: opacity 0.25s, visibility 0.25s, transform 0.2s, border-color 0.2s;
  box-shadow: 0 0 0 0 rgba(0,240,255,0);
}
.fab.show { visibility: visible; opacity: 1; }
.fab:hover { border-color: var(--cyan); transform: scale(1.08); box-shadow: 0 0 16px rgba(0,240,255,0.25); }
.fab-top { bottom: 86px; }
.fab-audio { bottom: 22px; opacity: 1; visibility: visible; }
.fab-audio .audio-on { display: none; }
.fab-audio .audio-off { display: block; }
.fab-audio[data-on="1"] .audio-on { display: block; color: var(--green); }
.fab-audio[data-on="1"] .audio-off { display: none; }
@media (max-width: 900px) { .fab-top { bottom: 80px; } .fab { right: 16px; } }

/* HAMBURGER button (mobile only) */
.nav .hamburger {
  display: none;
  background: transparent; border: 1px solid var(--cyan);
  width: 40px; height: 40px;
  border-radius: 6px;
  cursor: none;
  color: var(--cyan);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
}
.nav .hamburger span { width: 18px; height: 2px; background: currentColor; border-radius: 1px; }
@media (max-width: 768px) {
  .nav .hamburger { display: flex; }
  .nav-cta { display: none; }
}

/* ==========================================================
   ⌘K HINT PILL
   ========================================================== */
.kbd-hint {
  position: fixed; bottom: 22px; left: 22px; z-index: 90;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(10px);
  border: 1px solid var(--cyan-line);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  color: var(--fg-2);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  animation: kbdPulse 4s ease-in-out infinite;
}
.kbd-hint.hide { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; }
.kbd-hint .cmdk-kbd { font-size: 10px; padding: 3px 6px; }
.kbd-hint-close {
  background: transparent; border: none; color: var(--muted); cursor: none;
  font-size: 16px; line-height: 1; padding: 0 4px;
  margin-left: 4px;
}
.kbd-hint-close:hover { color: var(--cyan); }
@keyframes kbdPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,240,255,0); }
  50% { box-shadow: 0 0 0 6px rgba(0,240,255,0.08); }
}
@media (max-width: 600px) { .kbd-hint { display: none; } }

/* ==========================================================
   MOBILE LAYOUT — 390px (iPhone 14/15)
   ========================================================== */

@media (max-width: 420px) {
  .section-head { padding: 60px 18px 40px; }
  .section-h2 { font-size: clamp(36px, 9vw, 56px); }
  .section-sub { font-size: 15px; }
  .manifesto { padding: 60px 18px 60px; }
  .manifesto-h2 { font-size: clamp(22px, 6vw, 34px); }
  .four-steps { padding-bottom: 60px; }
  .reelwall .section-head { padding: 60px 18px 32px; }
  .swp-lanes { grid-template-columns: 1fr; }
  .ops-grid { grid-template-columns: 1fr !important; padding: 0 18px; }
  .ops-copy { padding: 60px 0 30px; }
  .arch-grid { padding: 0 18px; }
  .mgr-body { grid-template-columns: 1fr !important; }
  .mgr-side { display: none; }
  .mgr-frame { margin: 0 18px; }
  .vs-table { margin: 0 18px; }
  .engine100 .section-head { padding: 60px 18px 32px; }
  .e100-frame { margin: 0 18px; }
  .tkf-rail { padding: 0 18px; }
  .faq-grid { padding: 0 18px; }
  .foot-inner { grid-template-columns: 1fr; padding: 40px 18px; }
  .cta-elite { padding: 60px 18px 100px; }
  .cta-h2-xl { font-size: clamp(44px, 11vw, 72px); }
}

/* ==========================================================
   COMPACT NAV ON SCROLL
   ========================================================== */
.nav.scrolled {
  padding: 8px 32px;
  background: rgba(5, 5, 7, 0.85);
}
.nav.scrolled .nav-logo { font-size: 12px; }

/* ==========================================================
   FOUR STEPS · 1 2 3 4 visual
   ========================================================== */
.four-steps { padding-bottom: 60px; position: relative; z-index: 2; }
.four-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.four-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  border: 1px solid hsl(var(--four-hue) 100% 60% / 0.25);
  border-radius: 18px;
  padding: 38px 26px 30px;
  min-height: 280px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.four-card:hover {
  transform: translateY(-4px);
  border-color: hsl(var(--four-hue) 100% 60%);
  box-shadow: 0 30px 80px hsl(var(--four-hue) 100% 60% / 0.22);
}
.four-card::before {
  content: ""; position: absolute; top: 0; left: 26px; right: 26px;
  height: 2px; background: hsl(var(--four-hue) 100% 60%);
  box-shadow: 0 0 12px hsl(var(--four-hue) 100% 60% / 0.6);
}
.four-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(72px, 8vw, 128px); line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, hsl(var(--four-hue) 100% 70%), transparent 80%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px hsl(var(--four-hue) 100% 60% / 0.5));
  margin-bottom: 14px;
}
.four-shape {
  position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px;
  border-radius: 50%; opacity: 0.16;
  background: radial-gradient(circle, hsl(var(--four-hue) 100% 60%), transparent 70%);
  filter: blur(20px);
}
.four-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.01em; text-transform: uppercase;
  color: hsl(var(--four-hue) 100% 80%);
  margin-bottom: 10px;
}
.four-desc { font-size: 14px; color: var(--fg-2); margin-bottom: 18px; line-height: 1.55; }
.four-meta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  color: var(--fg-2); display: flex; align-items: center; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--line-strong);
}
.four-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--four-hue) 100% 60%); box-shadow: 0 0 8px hsl(var(--four-hue) 100% 60%); animation: pulse 1.6s infinite; }
@media (max-width: 1100px) { .four-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .four-grid { grid-template-columns: 1fr; padding: 0 18px; } }

/* ==========================================================
   BRAND PANEL COLLAGE (multi-video)
   ========================================================== */
.bpanel-collage {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 4px;
}
.bpanel-collage .b-main { grid-row: 1 / -1; grid-column: 1 / 2; }
.bpanel-collage .b-tile { grid-column: 2 / 3; }
.bpanel-collage .b-t1 { grid-row: 1 / 2; }
.bpanel-collage .b-t2 { grid-row: 2 / 3; }
.bpanel-vid {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.85) saturate(1.2);
  transition: filter 0.4s ease;
}
.bpanel:hover .bpanel-vid { filter: brightness(0.95) saturate(1.35); }
@media (max-width: 768px) {
  .bpanel-collage { grid-template-columns: 1fr; grid-template-rows: 1fr; gap: 0; }
  .bpanel-collage .b-tile { display: none; }
  .bpanel-collage .b-main { grid-row: auto; grid-column: auto; }
}

/* PROOF BADGE */
.bpanel-proof {
  margin: 0 0 22px;
  display: inline-flex; align-items: baseline; gap: 12px;
  padding: 12px 18px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px);
  border: 1px solid hsl(var(--brand-hue) 100% 60% / 0.5);
  box-shadow: 0 0 0 1px hsl(var(--brand-hue) 100% 60% / 0.2), 0 0 28px hsl(var(--brand-hue) 100% 60% / 0.18);
}
.proof-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px; letter-spacing: -0.02em; line-height: 1;
  background: linear-gradient(135deg, #fff 0%, hsl(var(--brand-hue) 100% 70%) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px hsl(var(--brand-hue) 100% 60% / 0.4));
}
.proof-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--fg-2); }

/* ==========================================================
   ALICE CHAT WIDGET
   ========================================================== */
.alice-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 91;
  width: 64px; height: 64px;
  border: none; padding: 0;
  background: var(--bg-2);
  border-radius: 50%; cursor: none;
  display: grid; place-items: center;
  transition: transform 0.3s;
  box-shadow: 0 0 0 1px var(--cyan-line), 0 12px 40px rgba(0,240,255,0.25);
}
.alice-fab:hover { transform: scale(1.05); }
.alice-fab img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.alice-fab-ring {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid transparent;
  background: conic-gradient(from 0deg, var(--cyan), transparent, var(--violet), transparent, var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ringSpin 6s linear infinite;
}
.alice-fab-status {
  position: absolute; bottom: 4px; right: 4px;
  width: 14px; height: 14px;
  background: var(--bg);
  border-radius: 50%;
  display: grid; place-items: center;
}
.alice-fab-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green);
  animation: pulse 1.6s infinite;
}
.alice-fab-bubble {
  position: absolute; right: 78px; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
  border: 1px solid var(--cyan-line);
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--cyan);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.25s;
}
.alice-fab:hover .alice-fab-bubble { opacity: 1; }
.alice-fab.hidden { transform: scale(0); opacity: 0; pointer-events: none; }

.alice-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 92;
  width: min(420px, 92vw);
  max-height: min(640px, 88vh);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--bg-3), var(--bg));
  border: 1px solid var(--cyan);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,240,255,0.20);
  transform: translateY(8px) scale(0.97);
  opacity: 0; visibility: hidden;
  transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
}
.alice-panel.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
.alice-h {
  display: grid; grid-template-columns: 56px 1fr 32px;
  align-items: flex-start; gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,240,255,0.06), transparent);
}
.alice-h-eye { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.alice-h-eye img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--cyan-line); }
.alice-h-ring {
  position: absolute; inset: -4px; border-radius: 50%;
  background: conic-gradient(from var(--ag, 0deg), var(--cyan), transparent 30%, var(--violet), transparent 80%, var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ringSpin 5s linear infinite;
}
.alice-meta { flex: 1; min-width: 0; overflow: hidden; }
.alice-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 2px; font-size: 18px; color: var(--cyan); text-shadow: 0 0 12px var(--cyan-glow); display: block; }
.alice-name .ver { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--muted); margin-left: 8px; }
.alice-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; color: var(--fg-2); margin: 2px 0 8px; }
.alice-status { display: flex; gap: 8px; flex-wrap: wrap; }
.alice-status .badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px;
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--cyan-line); color: var(--cyan);
  background: rgba(0,240,255,0.06);
}
.alice-status .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); animation: pulse 1.4s infinite; }
.alice-status .badge.live { border-color: rgba(0,255,136,0.5); color: var(--green); background: rgba(0,255,136,0.06); }
.alice-status .badge.live .dot { background: var(--green); box-shadow: 0 0 6px var(--green); }

.alice-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.4);
  position: relative;
}
.ak { text-align: left; }
.akv { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; color: var(--fg); letter-spacing: -0.02em; }
.akl { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; color: var(--muted); margin-top: 4px; }
.ak-brands {
  grid-column: 1 / -1;
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.bp {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  color: hsl(var(--bh) 100% 75%);
  padding: 3px 7px;
  border: 1px solid hsl(var(--bh) 100% 50% / 0.3);
  background: hsl(var(--bh) 100% 50% / 0.05);
  border-radius: 999px;
}
.bp .bd { width: 5px; height: 5px; border-radius: 50%; background: hsl(var(--bh) 100% 60%); box-shadow: 0 0 5px hsl(var(--bh) 100% 60%); }
.alice-close {
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--fg-2); cursor: none;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 18px; line-height: 1;
}
.alice-close:hover { border-color: var(--cyan); color: var(--cyan); }
.alice-body {
  flex: 1; overflow-y: auto; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: var(--cyan) transparent;
}
.alice-body::-webkit-scrollbar { width: 4px; }
.alice-body::-webkit-scrollbar-thumb { background: var(--cyan); border-radius: 2px; }
.msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px; line-height: 1.55;
  animation: msgIn 0.25s ease-out;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.msg.alice {
  align-self: flex-start;
  background: rgba(0,240,255,0.06);
  border: 1px solid var(--cyan-line);
  color: var(--fg);
  border-bottom-left-radius: 4px;
}
.msg.alice strong { color: var(--cyan); }
.cursor-blink { color: var(--cyan); animation: caretBlink 0.8s infinite; margin-left: 2px; }
.msg.you {
  align-self: flex-end;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
  border-bottom-right-radius: 4px;
}
.cursor-blink { color: var(--cyan); animation: caretBlink 0.7s infinite; margin-left: 2px; }
.msg-speak {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 8px;
  width: 26px; height: 26px;
  background: transparent; border: 1px solid var(--cyan-line);
  border-radius: 50%; cursor: none;
  color: var(--cyan);
  transition: background 0.2s, border-color 0.2s;
}
.msg-speak:hover { background: var(--cyan); color: var(--void); }
.msg-typing { display: inline-flex; gap: 4px; align-items: center; }
.msg-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); animation: typeBob 1.2s infinite; }
.msg-typing i:nth-child(2) { animation-delay: 0.2s; }
.msg-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes typeBob {
  0%,80%,100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-3px); opacity: 1; }
}
.alice-suggest {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.3);
}
.alice-chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  padding: 6px 10px; border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  color: var(--fg-2); cursor: none;
  transition: border-color 0.2s, color 0.2s;
}
.alice-chip:hover { border-color: var(--cyan); color: var(--cyan); }
.alice-input {
  display: flex; gap: 8px; padding: 12px 14px;
  align-items: center;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.5);
}
.ai-prompt { font-family: var(--font-mono); font-size: 13px; color: var(--cyan); padding-left: 4px; }
.alice-input input {
  flex: 1; background: transparent; border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--fg); outline: none;
}
.alice-input input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,240,255,0.12); }
.ai-mic {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--cyan-line);
  color: var(--cyan);
  border-radius: 8px; cursor: none;
  display: grid; place-items: center;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.ai-mic:hover { border-color: var(--cyan); box-shadow: 0 0 12px rgba(0,240,255,0.3); }
.ai-mic.listening {
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--void);
  animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(255,0,170,0.18), 0 0 20px var(--magenta); }
  50%     { box-shadow: 0 0 0 10px rgba(255,0,170,0.05), 0 0 28px var(--magenta); }
}
.ai-send {
  width: 36px; height: 36px;
  background: var(--grad-cyan); color: var(--void);
  border: none; border-radius: 8px; cursor: none;
  display: grid; place-items: center;
}
.ai-book {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: var(--grad-cv);
  color: var(--void); font-weight: 700;
  border-radius: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  cursor: none;
  transition: transform 0.2s;
}
.ai-book:hover { transform: translateY(-1px); }
.alice-foot {
  padding: 8px 14px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  color: var(--muted); text-align: center;
  border-top: 1px solid var(--line);
}
/* ALICE NEURAL · MOBILE / RESPONSIVE OPTIMIZATIONS */
@media (max-width: 768px) {
  .alice-panel {
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100vw; height: 100vh; max-height: 100vh;
    border-radius: 0;
    border-left: none; border-right: none;
  }
  .alice-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .alice-fab img { width: 48px; height: 48px; }
  .alice-fab-bubble { display: none; }
  .alice-h { padding: 14px 16px; }
  .alice-h-eye { width: 44px; height: 44px; }
  .alice-h-eye img { width: 44px; height: 44px; }
  .alice-name { font-size: 18px; }
  .alice-role { font-size: 9px; letter-spacing: 2px; }
  .alice-status .badge { font-size: 8px; padding: 3px 7px; }
  .alice-kpi { padding: 10px 12px; gap: 6px; grid-template-columns: repeat(4, 1fr); }
  .akv { font-size: 18px; }
  .akl { font-size: 7px; }
  .ak-brands { gap: 4px; }
  .bp { font-size: 8px; padding: 2px 6px; }
  .alice-body { padding: 14px 14px; gap: 10px; font-size: 14px; }
  .msg { font-size: 13px; padding: 10px 12px; max-width: 92%; }
  .alice-suggest { padding: 8px 12px; gap: 5px; }
  .alice-chip { font-size: 9px; padding: 5px 9px; }
  .alice-input { padding: 10px 12px; gap: 6px; }
  .alice-input input { font-size: 14px; padding: 12px; }
  .ai-send { width: 40px; height: 40px; }
  .ai-book { padding: 8px 10px; font-size: 10px; }
  .ai-prompt { display: none; }
  .alice-foot { padding: 6px 10px; font-size: 8px; }
}
@media (max-width: 380px) {
  .ak-brands { display: none; }
  .alice-kpi { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================
   ARCHITECTURE — queen + spawn + skills merged
   ========================================================== */
.architecture { padding-bottom: 60px; position: relative; z-index: 2; }
.arch-grid {
  max-width: 1400px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.arch-col {
  background: linear-gradient(180deg, rgba(0,240,255,0.04), rgba(255,255,255,0.005));
  border: 1px solid var(--cyan-line);
  border-radius: 18px;
  padding: 28px 24px;
  display: flex; flex-direction: column;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.4s;
}
.arch-col:hover {
  border-color: var(--cyan);
  box-shadow: 0 30px 80px rgba(0,240,255,0.16);
  transform: translateY(-3px);
}
.ac-h {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px;
  color: var(--cyan);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
}
.ac-tree { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1; }
.ac-node {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(0,0,0,0.3);
}
.ac-node img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--cyan-line); }
.ac-name { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 1px; color: var(--fg); }
.ac-role { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; color: var(--cyan); }
.ac-queen { border-color: var(--cyan); background: linear-gradient(180deg, rgba(0,240,255,0.10), transparent); box-shadow: 0 0 0 4px rgba(0,240,255,0.06); }
.ac-queen .ac-name { color: var(--cyan); }
.ac-rail { width: 60%; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: 0.5; }
.ac-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ac-ceo { padding: 8px 10px; min-width: 64px; }
.ac-ceo img { width: 30px; height: 30px; }
.ac-ceo .ac-name { font-size: 11px; color: hsl(var(--ah) 100% 75%); }
.ac-ceo { border-color: hsl(var(--ah) 100% 50% / 0.4); }
.ac-row-spec { gap: 6px; }
.ac-spec {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  padding: 5px 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 4px; color: var(--muted);
}
.ac-spec:hover { border-color: var(--cyan); color: var(--cyan); }

.ac-spawn { display: flex; flex-direction: column; gap: 12px; flex: 1; align-items: center; }
.ac-spawn-root, .ac-brand, .ac-future {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--cyan-line);
  border-radius: 10px;
  background: rgba(0,0,0,0.4);
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.5px;
  color: var(--cyan);
  position: relative;
}
.ac-spawn-root { background: linear-gradient(135deg, rgba(0,240,255,0.10), transparent); padding: 12px 22px; }
.ac-spawn-line { width: 2px; height: 20px; background: var(--cyan); opacity: 0.5; }
.ac-spawn-line.dim { opacity: 0.2; }
.ac-spawn-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ac-spawn-row.dim { opacity: 0.6; }
.ac-brand { padding: 8px 12px; border-color: hsl(var(--ah) 100% 50% / 0.4); color: hsl(var(--ah) 100% 75%); flex-direction: column; gap: 2px; min-width: 72px; }
.ac-brand .ac-dot { background: hsl(var(--ah) 100% 60%); box-shadow: 0 0 8px hsl(var(--ah) 100% 60%); }
.ac-dom { font-family: var(--font-mono); font-size: 9px; color: var(--muted); letter-spacing: 0.5px; font-weight: 400; }
.ac-future { font-family: var(--font-mono); font-size: 10px; color: var(--violet); border-color: rgba(139,92,246,0.3); border-style: dashed; padding: 6px 10px; }
.ac-future .ac-dot { background: var(--violet); box-shadow: 0 0 6px var(--violet); }
.ac-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); flex-shrink: 0; }
.ac-spawn-meta { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }

.ac-skills { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ask-row {
  display: grid; grid-template-columns: 28px 50px 1fr;
  gap: 10px; align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
  font-family: var(--font-mono); font-size: 10px;
  transition: border-color 0.2s, background 0.2s;
}
.ask-row:hover { border-color: var(--cyan-line); background: rgba(0,240,255,0.04); }
.ask-row img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ask-row > span:nth-child(2) { color: var(--cyan); font-weight: 700; letter-spacing: 1px; }
.ask-row .sk { color: var(--fg-2); letter-spacing: 0.3px; }
.ask-row.shared .sh { font-size: 16px; color: var(--cyan); text-align: center; }
.ac-skills-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* SKILL_LANES (replaces OS_SPAWN brand-tree column) */
.ac-lanes { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ac-lane {
  position: relative; padding: 10px 12px;
  border: 1px solid hsl(var(--lh) 100% 50% / 0.28);
  border-radius: 10px;
  background: linear-gradient(135deg, hsl(var(--lh) 100% 50% / 0.06), transparent 70%);
  transition: border-color 220ms cubic-bezier(0.4,0,0.2,1), background 220ms cubic-bezier(0.4,0,0.2,1), transform 220ms cubic-bezier(0.4,0,0.2,1);
}
.ac-lane:hover { border-color: hsl(var(--lh) 100% 60% / 0.6); background: linear-gradient(135deg, hsl(var(--lh) 100% 50% / 0.12), transparent 70%); transform: translateY(-1px); }
.ac-lane::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px;
  background: hsl(var(--lh) 100% 60%); border-radius: 2px;
  box-shadow: 0 0 8px hsl(var(--lh) 100% 60% / 0.6);
}
.ac-lane-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ac-lane-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: hsl(var(--lh) 100% 75%); text-transform: uppercase; }
.ac-lane-count { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); padding: 2px 8px; border: 1px solid var(--line); border-radius: 9999px; }
.ac-lane-skills { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-2); line-height: 1.5; letter-spacing: 0.2px; }
.ac-lanes-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

@media (max-width: 1100px) { .arch-grid { grid-template-columns: 1fr; gap: 14px; } }

/* ==========================================================
   MEMORY · merged nexus + mesh + vault (cinematic)
   ========================================================== */
.memory {
  position: relative; padding: 120px 0; z-index: 2;
  overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  contain: layout style;
}
.memory-bg-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.25) saturate(1.4) blur(2px);
  z-index: 0;
  opacity: 0.7;
}
.memory-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(0,240,255,0.20), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(139,92,246,0.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.85) 100%);
}
.memory .section-head { position: relative; z-index: 2; }
.memory-grid {
  max-width: 1400px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px;
  position: relative; z-index: 2;
}
.memory-stage {
  position: relative;
  border: 1px solid var(--cyan-line);
  background: rgba(5,5,8,0.6); backdrop-filter: blur(20px);
  border-radius: 18px;
  padding: 18px;
  min-height: 540px;
  display: flex; flex-direction: column;
}
.memory-stage .nexus-canvas {
  flex: 1; width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(0,240,255,0.06), transparent 70%), var(--bg);
}
.memory-stage-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
}
.memory-stage-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); animation: pulse 1.6s infinite; display: inline-block; margin-right: 6px; }
.memory-stage-foot .r { color: var(--green); }
.memory-aside { display: flex; flex-direction: column; gap: 16px; }
.m-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.m-stat {
  padding: 14px 16px;
  border: 1px solid var(--cyan-line);
  background: rgba(5,5,8,0.6); backdrop-filter: blur(12px);
  border-radius: 12px;
}
.ml { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--muted); margin-bottom: 6px; }
.mv {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; line-height: 1; letter-spacing: -0.02em;
  background: var(--grad-cv);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.m-a2a {
  border: 1px solid var(--cyan-line);
  background: rgba(5,5,8,0.6); backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 14px;
}
.m-a2a-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--cyan); margin-bottom: 10px; }
.m-a2a canvas {
  width: 100%; height: 200px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0,0,0,0.3);
}
.m-a2a-foot { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.m-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--fg-2);
}
.m-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); animation: pulse 1.6s infinite; }
.m-recent {
  border: 1px solid var(--cyan-line);
  background: rgba(5,5,8,0.6); backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 14px 16px;
}
.m-recent-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--cyan); margin-bottom: 10px; }
.m-recent ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.m-recent li {
  display: grid; grid-template-columns: 100px 1fr auto;
  gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--line);
  font-family: var(--font-mono); font-size: 10px;
  align-items: center;
}
.m-recent li:last-child { border-bottom: none; }
.rk { color: var(--cyan); letter-spacing: 1px; }
.rt { color: var(--fg-2); }
.rs { color: var(--green); font-weight: 700; text-align: right; }
@media (max-width: 900px) { .memory-grid { grid-template-columns: 1fr; } .m-recent li { grid-template-columns: 1fr; gap: 4px; } }

/* ==========================================================
   NEXUS BRAIN (legacy — kept as fallback)
   ========================================================== */
.nexus { padding-bottom: 60px; position: relative; z-index: 2; }
.nexus-stage {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  position: relative;
  display: grid; grid-template-columns: 1fr 380px; gap: 24px;
  min-height: 520px;
}
.nexus-canvas {
  width: 100%; height: 520px;
  border: 1px solid var(--cyan-line);
  border-radius: 16px;
  background: radial-gradient(ellipse at center, rgba(0,240,255,0.06), transparent 70%), var(--bg);
}
.nexus-overlay { display: flex; flex-direction: column; gap: 16px; }
.nexus-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.nx-stat {
  background: linear-gradient(180deg, rgba(0,240,255,0.04), transparent);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 14px;
}
.nx-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--muted); margin-bottom: 6px; }
.nx-v {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em; line-height: 1;
  color: var(--fg);
}
.nx-v.cyan { color: var(--cyan); text-shadow: 0 0 10px var(--cyan-glow); }
.nx-v.green { color: var(--green); }
.nexus-layers {
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.nx-layer {
  display: grid; grid-template-columns: 4px 130px 1fr; gap: 10px;
  align-items: center;
  padding: 8px 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  border-bottom: 1px dashed var(--line);
}
.nx-layer:last-child { border-bottom: none; }
.nx-bar { display: block; height: 16px; background: var(--cyan); border-radius: 2px; box-shadow: 0 0 6px var(--cyan-glow); animation: nxBar 1.6s ease-in-out infinite; }
.nx-layer:nth-child(1) .nx-bar { animation-delay: 0s; }
.nx-layer:nth-child(2) .nx-bar { animation-delay: 0.1s; background: var(--violet); box-shadow: 0 0 6px var(--violet-glow); }
.nx-layer:nth-child(3) .nx-bar { animation-delay: 0.2s; }
.nx-layer:nth-child(4) .nx-bar { animation-delay: 0.3s; background: var(--violet); box-shadow: 0 0 6px var(--violet-glow); }
.nx-layer:nth-child(5) .nx-bar { animation-delay: 0.4s; }
.nx-layer:nth-child(6) .nx-bar { animation-delay: 0.5s; background: var(--violet); box-shadow: 0 0 6px var(--violet-glow); }
@keyframes nxBar { 0%,100% { opacity: 0.4; transform: scaleY(0.5); } 50% { opacity: 1; transform: scaleY(1); } }
.nx-name { color: var(--cyan); }
.nx-meta { color: var(--muted); }
@media (max-width: 900px) { .nexus-stage { grid-template-columns: 1fr; } .nexus-canvas { height: 400px; } }

/* ==========================================================
   A2A LIVE MESH
   ========================================================== */
.mesh { padding-bottom: 60px; position: relative; z-index: 2; }
.mesh-frame {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  position: relative;
}
#a2a-mesh {
  width: 100%; height: 480px;
  border: 1px solid var(--cyan-line);
  border-radius: 16px;
  background: radial-gradient(ellipse at center, rgba(0,240,255,0.06), transparent 70%), var(--bg);
  display: block;
}
.mesh-meta {
  margin-top: 18px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.mesh-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  padding: 8px 14px; border: 1px solid var(--cyan-line);
  border-radius: 999px; color: var(--fg-2);
  background: rgba(0,0,0,0.4); backdrop-filter: blur(8px);
}
.mesh-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 1.6s infinite; }

/* ==========================================================
   SWARM TREE
   ========================================================== */
.swarm { padding-bottom: 60px; position: relative; z-index: 2; }
.swarm-tree {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: flex; flex-direction: column; align-items: center; gap: 36px;
  position: relative;
}
.swarm-tier { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: stretch; }
.swarm-edges {
  height: 2px; width: 60%;
  background: linear-gradient(90deg, transparent 0%, var(--cyan) 20%, var(--cyan) 80%, transparent 100%);
  opacity: 0.3;
}
.swarm-node {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 18px; border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--bg-2);
  min-width: 140px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.swarm-node img { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--cyan-line); object-fit: cover; }
.swarm-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 1px; color: var(--fg); }
.swarm-role { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--cyan); }
.swarm-node.n-queen {
  border-color: var(--cyan); padding: 22px 28px;
  box-shadow: 0 0 0 4px rgba(0,240,255,0.05), 0 30px 70px rgba(0,240,255,0.20);
  background: linear-gradient(180deg, rgba(0,240,255,0.10), transparent);
}
.swarm-node.n-queen .swarm-name { font-size: 18px; color: var(--cyan); }
.swarm-node.n-ceo { border-color: hsl(var(--hue) 100% 50% / 0.4); }
.swarm-node.n-ceo:hover { border-color: hsl(var(--hue) 100% 60%); transform: translateY(-3px); box-shadow: 0 18px 50px hsl(var(--hue) 100% 50% / 0.20); }
.swarm-node.n-ceo .swarm-name { color: hsl(var(--hue) 100% 80%); }
.swarm-node.n-ceo .swarm-role { color: hsl(var(--hue) 100% 70%); }
.swarm-node.n-spec {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  padding: 8px 14px; min-width: auto;
  color: var(--fg-2); border-style: dashed;
  background: rgba(255,255,255,0.02);
}
.swarm-node.n-spec:hover { border-color: var(--cyan); color: var(--cyan); }
.swarm-legend {
  margin: 32px auto 0;
  max-width: 1280px; padding: 0 32px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.leg-pill {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  padding: 8px 14px; border: 1px solid var(--line-strong);
  border-radius: 4px; color: var(--fg-2);
  background: rgba(255,255,255,0.02);
}
.leg-pill .ok { color: var(--green); }

/* ==========================================================
   SKILLS ARCHITECTURE
   ========================================================== */
.skills-arch { padding-bottom: 60px; position: relative; z-index: 2; overflow: hidden; }
.skills-arch::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,240,255,0.06), transparent 60%);
  pointer-events: none;
}
.skills-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  position: relative; z-index: 1;
}
.skill-col {
  background: linear-gradient(180deg, rgba(0,240,255,0.05), rgba(0,240,255,0.005));
  border: 1px solid var(--cyan-line);
  border-radius: 14px;
  padding: 18px 14px;
  position: relative;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.skill-col:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow: 0 24px 60px rgba(0,240,255,0.20);
}
.skill-col::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 2px;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow);
  opacity: 0.5;
}
.skill-col:hover::before { opacity: 1; }
.skill-h {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--cyan-line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: var(--cyan);
}
.skill-h img {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--cyan-line);
  box-shadow: 0 0 8px rgba(0,240,255,0.2);
}
.skill-h .sk-icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--cyan); font-size: 16px; border: 1px solid var(--cyan-line); border-radius: 50%; }
.skill-col ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.skill-col li {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.3px;
  color: var(--fg-2);
  padding: 6px 8px;
  border-radius: 6px;
  position: relative;
  transition: color 0.2s, background 0.2s, padding 0.2s;
  cursor: none;
}
.skill-col li::before { content: "/"; color: var(--cyan); margin-right: 4px; opacity: 0.6; }
.skill-col li:hover { color: var(--cyan); background: rgba(0,240,255,0.06); padding-left: 12px; }
.skill-col li:hover::before { opacity: 1; }
.skills-meta {
  margin: 32px auto 0;
  max-width: 1280px; padding: 0 32px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
@media (max-width: 1100px) { .skills-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .skills-grid { grid-template-columns: repeat(2, 1fr); padding: 0 18px; } }

/* ==========================================================
   BRAND IDENTITY MATRIX
   ========================================================== */
.brand-id { padding-bottom: 60px; position: relative; z-index: 2; }
.bid-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.bid-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.005));
  border: 1px solid hsl(var(--bid-hue) 100% 50% / 0.25);
  border-radius: 16px;
  padding: 28px 26px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.bid-card:hover {
  border-color: hsl(var(--bid-hue) 100% 60%);
  box-shadow: 0 30px 80px hsl(var(--bid-hue) 100% 50% / 0.18);
}
.bid-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line-strong); flex-wrap: wrap; }
.bid-tag {
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px; letter-spacing: -0.02em;
  color: hsl(var(--bid-hue) 100% 75%);
  filter: drop-shadow(0 0 16px hsl(var(--bid-hue) 100% 60% / 0.4));
}
.bid-tagline { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; color: var(--fg-2); }
.bid-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  align-items: center;
}
.bid-row:last-child { border-bottom: none; }
.bid-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: hsl(var(--bid-hue) 100% 70%); }
.bid-v { font-size: 13px; color: var(--fg-2); }
.bid-swatches { display: flex; gap: 6px; }
.bid-swatches span {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
@media (max-width: 768px) { .bid-grid { grid-template-columns: 1fr; padding: 0 18px; } }
.ops-stack { padding-bottom: 60px; position: relative; z-index: 2; }
.opsk-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.opsk {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(0,240,255,0.04), rgba(0,240,255,0.005));
  border: 1px solid var(--cyan-line);
  border-radius: 16px;
  padding: 32px 28px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.opsk:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow: 0 32px 80px rgba(0,240,255,0.20);
}
.opsk::before {
  content: ""; position: absolute; top: 0; left: 24px; width: 60px; height: 2px;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow);
}
.opsk-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; color: var(--muted); margin-bottom: 14px; }
.opsk-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 1px solid var(--cyan-line);
  border-radius: 12px;
  color: var(--cyan);
  background: rgba(0,240,255,0.04);
  margin-bottom: 18px;
  box-shadow: 0 0 16px rgba(0,240,255,0.12) inset;
}
.opsk-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px; letter-spacing: -0.02em;
  margin-bottom: 6px; text-transform: uppercase;
  background: linear-gradient(135deg, var(--fg) 0%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.opsk-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--cyan); margin-bottom: 16px; }
.opsk-desc { font-size: 14px; color: var(--fg-2); margin-bottom: 18px; line-height: 1.6; }
.opsk-points { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.opsk-points li {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  color: var(--fg-2); padding-left: 16px; position: relative;
}
.opsk-points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan-glow);
}
.opsk-stat {
  display: flex; justify-content: space-between; padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
}
.opsk-stat .l { color: var(--muted); }
.opsk-stat .v.green { color: var(--green); }
.opsk-stat .v.cyan { color: var(--cyan); }
@media (max-width: 900px) { .opsk-grid { grid-template-columns: 1fr; padding: 0 18px; } }

/* ==========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track { animation: none; }
  .marquee-track { animation: none; }
  .bg-grid-inner { animation: none; }
  .ring, .ring.r1, .ring.r2, .ring.r3, .ring.r4, .ring.r5 { animation: none; }
  .nerve-bar { animation: none; }
  .word-up > span { animation: none; transform: none; opacity: 1; }
  .boot-logo { animation: none; }
  .bootBob { animation: none; }
  .hero-hint { animation: none; opacity: 0.7; }
  canvas { display: none; }
}

/* ==========================================================
   FOCUS VISIBLE — KEYBOARD NAVIGATION
   ========================================================== */

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(0, 240, 255, 0.15);
}

/* ==========================================================
   SKIP LINK (keyboard accessibility)
   ========================================================== */

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--cyan);
  color: var(--void);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 4px;
  z-index: 10000;
  letter-spacing: 2px;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 16px;
}


/* ==========================================================
   PROOF MERGE · vs old way + live ops · two-column unified
   ========================================================== */
.proof-merge { padding: 60px 32px; max-width: 1480px; margin: 0 auto; }
.proof-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
  margin-top: 36px;
}
.proof-col {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(8,10,14,0.7), rgba(4,5,7,0.85));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.proof-col-h {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px; letter-spacing: 0.16em;
  color: rgba(0,240,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.proof-col-h .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green, #4ade80);
  box-shadow: 0 0 10px var(--green, #4ade80);
}
.proof-col-h .dot.pulse { animation: pulse 1.4s infinite; }
.proof-col-vs .vs-table { margin: 0; padding: 8px 14px 14px; }
.proof-col-ops .terminal { margin: 0; border: none; border-radius: 0; }
.proof-col-ops .terminal-body { min-height: 540px; max-height: 640px; }

@media (max-width: 980px) {
  .proof-grid { grid-template-columns: 1fr; }
  .proof-col-ops .terminal-body { min-height: 360px; max-height: 460px; }
}


section { padding-block: 48px; }


/* ==========================================================
   10X POLISH LAYER · easing, micro-interactions, scroll snap
   ========================================================== */

/* Premium easing curve everywhere */
:root {
  --ease-apex: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
}

/* Smooth-scroll with reduced-motion guard */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Body — gpu-anchored for crisp transforms (removed transform — was breaking position:fixed for FAB descendants) */
body { -webkit-font-smoothing: antialiased; }

/* Apex easing on every transition that uses default */
.btn, .cta-btn, .nav-cta,
.brand-card, .agent-card, .pillar-card, .reel,
.bpanel, .stack-item, .four-card, .lm-tab,
.dive-cell, .ugc-cell, .opsk, .tk-card,
.faq-q, .alice-chip, .pillar {
  transition: transform 0.5s var(--ease-apex),
              box-shadow 0.5s var(--ease-apex),
              border-color 0.3s var(--ease-out-quart),
              background-color 0.3s var(--ease-out-quart),
              opacity 0.3s var(--ease-out-quart) !important;
}

/* Scene block in/out — softer */
.scene-block {
  transition: opacity 0.7s var(--ease-apex),
              transform 0.9s var(--ease-apex),
              filter 0.7s var(--ease-apex) !important;
}
.scene-block:not(.in-view) {
  filter: blur(8px);
}

/* Button hover — magnetic press feel */
.btn:hover, .cta-btn:hover, .nav-cta:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 18px 40px rgba(0,240,255,0.18);
}
.btn:active, .cta-btn:active, .nav-cta:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.12s !important;
}

/* Card hover — clean lift, no rotation jitter */
.bpanel:hover, .agent-card:hover, .pillar-card:hover, .four-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0,240,255,0.10), 0 0 0 1px rgba(0,240,255,0.20);
}

/* Brand panel — color-aware hover glow */
.bpanel { position: relative; overflow: hidden; }
.bpanel::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              hsl(var(--brand-hue, 195) 100% 60% / 0.18) 0%,
              transparent 40%);
  opacity: 0; transition: opacity 0.4s var(--ease-out-quart);
  pointer-events: none; z-index: 4;
}
.bpanel:hover::after { opacity: 1; }

/* Eyebrow micro-shimmer on intersection */
.section-eyebrow {
  position: relative;
  display: inline-block;
}
.section-eyebrow::before {
  content: ""; position: absolute; left: -8px; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(0,240,255,0.8);
  box-shadow: 0 0 8px rgba(0,240,255,0.8);
  transform: translateY(-50%);
  animation: eyebrow-pulse 2.4s var(--ease-apex) infinite;
}
@keyframes eyebrow-pulse {
  0%, 100% { opacity: 0.4; transform: translateY(-50%) scale(0.85); }
  50%      { opacity: 1.0; transform: translateY(-50%) scale(1.15); }
}

/* Proof-merge cards — premium hover */
.proof-col {
  transition: border-color 0.4s var(--ease-apex),
              box-shadow 0.6s var(--ease-apex),
              transform 0.6s var(--ease-apex);
}
.proof-col:hover {
  border-color: rgba(0,240,255,0.20);
  box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,240,255,0.18);
}

/* Terminal — scanline shimmer */
.terminal { position: relative; }
.terminal::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, rgba(0,240,255,0.025) 0px, rgba(0,240,255,0.025) 1px,
    transparent 1px, transparent 3px);
  pointer-events: none; z-index: 2;
  animation: scanline-drift 8s linear infinite;
}
@keyframes scanline-drift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(3px); }
}

/* FAB hover — subtle bounce */
.fab, .alice-fab, #fab-top, #fab-audio {
  transition: transform 0.3s var(--ease-apex), box-shadow 0.3s var(--ease-apex);
}
.fab:hover, .alice-fab:hover, #fab-top:hover, #fab-audio:hover {
  transform: scale(1.08) translateY(-2px);
}

/* Hero text — first-paint shine sweep */
.hero h1, .hero-h1, .scene-h2, .section-h2 {
  position: relative;
  background-size: 200% 100%;
}
@keyframes shine-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* Image lazy fade-in when loaded */
img { transition: opacity 0.5s var(--ease-apex); }
img[loading="lazy"]:not([src]) { opacity: 0; }

/* Selection color — branded */
::selection { background: rgba(0,240,255,0.30); color: #fff; }

/* Focus-visible — keyboard hero */
:focus-visible {
  outline: 2px solid rgba(0,240,255,0.8);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Smooth-snap on the proof-merge two-col */
.proof-grid { scroll-snap-type: y proximity; }


/* Scene blocks · cinematic crossfade + subtle parallax (synced to video quarters) */
.scene-block {
  position: absolute; left: 7vw; right: 7vw;
  width: auto; max-width: 760px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s var(--ease-apex, cubic-bezier(0.16,1,0.3,1)),
              transform 1s var(--ease-apex, cubic-bezier(0.16,1,0.3,1)),
              filter 0.85s var(--ease-apex, cubic-bezier(0.16,1,0.3,1));
  filter: blur(10px);
  z-index: 5;
  pointer-events: none;
}
.scene-block.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}


/* Merged Genesis · spacing of alice-points block inside genesis-text */
.genesis-text .alice-points {
  margin: 22px 0 24px;
  padding: 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.genesis-text .alice-points li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  align-items: baseline;
}
.genesis-text .alice-points li:last-child { border-bottom: none; }
.genesis-card .green-d {
  color: var(--green, #4ade80);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  display: inline-flex; align-items: center; gap: 6px;
}
.genesis-card .green-d .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green, #4ade80);
  box-shadow: 0 0 8px var(--green, #4ade80);
  animation: pulse 1.4s infinite;
}

@media (max-width: 720px) {
  .genesis-text .alice-points li { grid-template-columns: 1fr; gap: 4px; }
}


/* Visibility lift · stats ribbon + thesis legibility (J: "hard to see") */
.kpi-num { color: rgba(255,255,255,0.96) !important; text-shadow: 0 0 24px rgba(0,240,255,0.18); }
.kpi-label { color: rgba(255,255,255,0.62) !important; }
.kpi { border-color: rgba(0,240,255,0.22) !important; }

/* Thesis section text — bump from gray to bright */
.thesis, .thesis-text, .thesis-block, .thesis-h, .thesis-body, .thesis-p,
section.thesis p, section.thesis .body { color: rgba(255,255,255,0.92) !important; }
.thesis em, .thesis u, .thesis-h em, .thesis-h u { color: rgba(0,240,255,0.95) !important; }

/* Generic dim-text rescue: any paragraph that previously rendered at <0.55 opacity gets lifted */
.section-sub, p.section-sub { color: rgba(255,255,255,0.78) !important; }

/* meta-pill / r-pill / live_stream chips — ensure label readability */
.meta-pill, .r-pill { color: rgba(255,255,255,0.82) !important; }
.meta-pill .ok, .r-pill .ok { color: var(--green, #4ade80) !important; }


/* HERO · keep ALICE in near-full color, minimal scrim only for text legibility (J directive) */
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.18) 50%,
    rgba(0,0,0,0.55) 80%,
    rgba(0,0,0,0.85) 100%
  ) !important;
}
.hero-video {
  opacity: 1 !important;
  filter: saturate(1.08) contrast(1.04) !important;
  /* Position so Alice's face is in the upper-mid frame, not at the very top */
  object-position: center 30% !important;
}
/* Hero stage hard-clip — no bleed into scenes section */
.hero-stage { overflow: hidden !important; contain: layout paint !important; }
.hero { overflow: hidden !important; }
/* Suppress the redundant hero-bleed-grad which was creating the visible seam */
.hero-bleed-grad { background: none !important; }
.hero h1, .hero-h1, .hero-sub {
  text-shadow: 0 2px 24px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.6);
}
.hero-eyebrow {
  background: rgba(0,0,0,0.55);
  padding: 6px 12px;
  border-radius: 4px;
  backdrop-filter: blur(6px);
  display: inline-flex;
}


/* ============================================================
   APEX NEXUS — cyberpunk brain visualization
   Appended block — DO NOT modify existing rules above
   ============================================================ */

.nexus-section {
  position: relative;
  padding: 140px 0 100px;
  overflow: hidden;
  background: #000;
}

/* Receding grid floor */
.nexus-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,240,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(800px) rotateX(55deg) translateY(40%);
  transform-origin: center bottom;
  pointer-events: none;
}

/* Noise overlay */
.nexus-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Headline */
.nexus-headline {
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff 0%, #00f0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0.5rem 0 1rem;
}

.nexus-headline em {
  font-style: normal;
  -webkit-text-fill-color: transparent;
}

.nexus-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.55);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Canvas wrapper */
.nexus-nucleus-wrap {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 60px auto 0;
  padding: 0 24px;
}

/* Higher specificity to defeat legacy .nexus-canvas (line ~4721) */
.nexus-nucleus-wrap .nexus-canvas {
  display: block;
  width: 100%;
  height: 620px;
  border: none;
  border-radius: 2px;
  background: transparent;
  cursor: default;
}

/* Tooltip — node hover */
.nexus-tooltip {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -100%);
  background: rgba(0, 12, 18, 0.92);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 5px 9px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 5;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.18);
}
.nexus-tooltip.visible { opacity: 1; }

.nexus-canvas-label {
  display: flex;
  justify-content: space-between;
  padding: 10px 4px 0;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.68rem;
  color: rgba(0,240,255,0.45);
  letter-spacing: 0.08em;
}

.nexus-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00f0ff;
  margin-right: 6px;
  animation: nexus-dot-pulse 2.4s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes nexus-dot-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 4px #00f0ff; }
  50%      { opacity: 0.4; box-shadow: none; }
}

/* Stat cards */
.nexus-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 0 24px;
}

.nexus-stat-card {
  background: rgba(8,10,14,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 8px;
  padding: 28px 24px 24px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.nexus-stat-card:hover {
  border-color: rgba(0,240,255,0.22);
  box-shadow: 0 0 24px rgba(0,240,255,0.07);
}

.nexus-stat-label {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: rgba(0,240,255,0.6);
  margin-bottom: 12px;
}

.nexus-stat-val {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Ticker */
.nexus-ticker-wrap {
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 0 24px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.nexus-ticker-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: nexus-ticker-scroll 36s linear infinite;
  will-change: transform;
}

@keyframes nexus-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ntick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px 0 0;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.ntick-key {
  color: #00f0ff;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.ntick-sep {
  color: rgba(255,255,255,0.2);
}

.ntick-body {
  color: rgba(255,255,255,0.5);
}

.ntick-lift {
  color: #10f08a;
  font-weight: 600;
  padding-right: 32px;
  border-right: 1px solid rgba(255,255,255,0.08);
}

/* Reduced motion — pause ticker, keep canvas static */
@media (prefers-reduced-motion: reduce) {
  .nexus-ticker-track { animation: none; }
}

@media (max-width: 768px) {
  .nexus-section { padding: 100px 0 80px; }
  .nexus-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .nexus-nucleus-wrap .nexus-canvas { height: 460px; }
  .nexus-nucleus-wrap { margin-top: 40px; padding: 0 16px; }
  .nexus-stats { padding: 0 16px; gap: 12px; }
  .nexus-stat-card { padding: 20px 16px 18px; }
  .nexus-stat-val { font-size: 1.7rem; }
  .nexus-ticker-wrap { padding: 0 16px; }
}

@media (max-width: 480px) {
  .nexus-section { padding: 80px 0 64px; overflow-x: hidden; }
  .nexus-nucleus-wrap { max-width: 100vw; padding: 0 12px; margin-top: 32px; }
  .nexus-nucleus-wrap .nexus-canvas { height: 360px; max-height: 100vw; }
  .nexus-stats { padding: 0 12px; gap: 10px; margin-top: 28px; }
  .nexus-stat-card { padding: 16px 14px 14px; border-radius: 6px; }
  .nexus-stat-label { font-size: 0.58rem; margin-bottom: 8px; }
  .nexus-stat-val { font-size: 1.4rem; }
  .nexus-canvas-label { font-size: 0.58rem; padding: 8px 4px 0; gap: 8px; flex-wrap: wrap; }
  .nexus-ticker-wrap { padding: 0 12px; margin-top: 28px; }
  .ntick { font-size: 0.65rem; padding: 0 22px 0 0; }
  .ntick-lift { padding-right: 22px; }
}


/* SCENES · keep frames in near-full color, only minimal scrim for text legibility (J directive) */
.scenes-canvas {
  filter: saturate(1.1) contrast(1.05) brightness(1.05) !important;
  opacity: 1 !important;
}
.scenes::before {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.50) 0%, transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.30) 75%, rgba(0,0,0,0.65) 100%) !important;
}
/* Ensure scene-block text remains readable on bright bg */
.scene-h2, .scene-sub, .scene-eyebrow {
  text-shadow: 0 2px 24px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.7);
}
.scene-block {
  background: linear-gradient(135deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 100%);
  padding: 18px 22px;
  border-radius: 12px;
  backdrop-filter: blur(2px);
}

/* LUNA REELS + SPM RAIL */
.spm-rail {
  margin: 24px 0 28px;
  padding: 18px;
  background: rgba(8,10,14,0.65);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.spm-rail-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: hsl(50 100% 70%);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.spm-rail-h .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: hsl(50 100% 60%);
  box-shadow: 0 0 10px hsl(50 100% 60% / 0.7);
  animation: pulse 1.4s infinite;
}
.spm-rail-track {
  display: flex; gap: 14px;
  animation: spmScroll 40s linear infinite;
  will-change: transform;
}
.spm-rail:hover .spm-rail-track { animation-play-state: paused; }
@keyframes spmScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 7px)); }
}
.spm-rail-card {
  flex: 0 0 200px; aspect-ratio: 4/5;
  position: relative; border-radius: 10px; overflow: hidden;
  border: 1px solid hsl(50 100% 50% / 0.25);
  box-shadow: 0 0 0 1px hsl(50 100% 50% / 0.12), 0 12px 32px rgba(0,0,0,0.45);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.spm-rail-card:hover { transform: translateY(-4px) scale(1.03); }
.spm-rail-card video { width: 100%; height: 100%; object-fit: cover; }
.srl-tag {
  position: absolute; bottom: 8px; left: 8px;
  font-family: var(--font-mono); font-size: 10px;
  padding: 4px 8px; border-radius: 4px;
  background: rgba(0,0,0,0.7); color: hsl(50 100% 80%);
  letter-spacing: 0.12em;
}
@media (prefers-reduced-motion: reduce) {
  .spm-rail-track { animation: none; }
}

/* ========================================================
   ICLAW V4 — sticky 4-chapter cinematic
   ======================================================== */

.iclaw-v4 {
  position: relative;
  background: #000;
  overflow: hidden;
  padding-bottom: 0;
}

/* ── Intro text above the scroll container ── */
.iv4-intro {
  max-width: 900px;
  margin: 0 auto;
  padding: 120px 48px 60px;
  text-align: center;
}

.iv4-headline {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff 0%, rgba(0,240,255,0.9) 60%, rgba(236,72,153,0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 18px 0 0;
}
.iv4-headline em {
  font-style: italic;
}

/* ── Scroll container (280vh) ── */
.iv4-scroll-container {
  position: relative;
  height: 280vh;
}

/* ── Sticky stage (100vh, pins while container scrolls) ── */
.iv4-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Particle canvas ── */
.iv4-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.7;
}

/* ── Grid floor ── */
.iv4-grid-floor {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,240,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 100%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 100%, black 0%, transparent 70%);
  pointer-events: none;
}

/* ── Chapter progress pips ── */
.iv4-progress-bar {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 20;
}
.iv4-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  padding: 0;
  transition: background 0.4s var(--ease-apex, cubic-bezier(0.16,1,0.3,1)),
              transform 0.4s var(--ease-apex, cubic-bezier(0.16,1,0.3,1)),
              box-shadow 0.4s var(--ease-apex, cubic-bezier(0.16,1,0.3,1));
}
.iv4-pip.active {
  background: var(--iv4-hue, #00f0ff);
  box-shadow: 0 0 8px var(--iv4-hue, #00f0ff);
  transform: scale(1.35);
}

/* ── Left copy panel ── */
.iv4-left-panel {
  position: absolute;
  left: max(40px, 4vw);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(200px, 22vw, 300px);
  z-index: 15;
}
.iv4-chapter-copy {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  pointer-events: none;
  transition:
    opacity 0.85s var(--ease-apex, cubic-bezier(0.16,1,0.3,1)),
    transform 0.85s var(--ease-apex, cubic-bezier(0.16,1,0.3,1)),
    filter 0.85s var(--ease-apex, cubic-bezier(0.16,1,0.3,1));
}
.iv4-chapter-copy.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}
.iv4-ch-label {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--iv4-hue, #00f0ff);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.iv4-chapter-copy p {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.62);
}

/* ── Device frame wrapper ── */
.iv4-device-wrap {
  position: relative;
  z-index: 10;
  width: min(820px, 72vw);
}

.iv4-device {
  position: relative;
  background: rgba(8,10,14,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--iv4-border, rgba(0,240,255,0.22));
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,240,255,0.06),
    0 40px 120px rgba(0,0,0,0.7),
    0 0 60px var(--iv4-glow, rgba(0,240,255,0.08));
  aspect-ratio: 16 / 10;
  transition: border-color 0.85s var(--ease-apex, cubic-bezier(0.16,1,0.3,1)),
              box-shadow 0.85s var(--ease-apex, cubic-bezier(0.16,1,0.3,1));
}

/* ── Scene cross-fade ── */
.iv4-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  pointer-events: none;
  transition:
    opacity 0.85s var(--ease-apex, cubic-bezier(0.16,1,0.3,1)),
    transform 0.85s var(--ease-apex, cubic-bezier(0.16,1,0.3,1)),
    filter 0.85s var(--ease-apex, cubic-bezier(0.16,1,0.3,1));
  display: flex;
  flex-direction: column;
}
.iv4-scene.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}

/* ── Shared window chrome ── */
.iv4-win-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.iv4-win-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
  flex: 1;
  text-align: center;
}
.iv4-win-spacer { flex: 1; }
.iv4-win-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: rgba(0,240,255,0.7);
  letter-spacing: 0.08em;
}
.iv4-meta-magenta { color: rgba(236,72,153,0.85); }
.dot-magenta { background: #ec4899; box-shadow: 0 0 5px #ec4899; }

/* ── CHAPTER 0 — iCLAW Desktop ── */
.iv4-c0-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.iv4-c0-side {
  width: 120px;
  padding: 12px 8px;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.iv4-c0-sh {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.1em;
  padding: 6px 4px 4px;
}
.iv4-c0-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
}
.iv4-c0-row img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.iv4-c0-row.active { background: rgba(0,240,255,0.08); color: #00f0ff; }
.iv4-c0-surf {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  color: rgba(255,255,255,0.28);
  padding: 3px 6px;
  letter-spacing: 0.06em;
}
.iv4-c0-main { flex: 1; display: flex; flex-direction: column; gap: 0; padding: 12px; overflow: hidden; }
.iv4-c0-pane {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.iv4-c0-ph {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  color: rgba(255,255,255,0.28);
  margin-bottom: 8px;
  letter-spacing: 0.08em;
}
.iv4-c0-nerve {
  display: flex;
  gap: 3px;
  height: 32px;
  align-items: flex-end;
}
.iv4-c0-nerve i {
  flex: 1;
  border-radius: 2px;
  background: rgba(0,240,255,0.35);
  min-height: 4px;
  animation: iv4-nerve-pulse 1.4s ease-in-out infinite;
}
.iv4-c0-nerve i:nth-child(2n) { animation-delay: 0.2s; }
.iv4-c0-nerve i:nth-child(3n) { animation-delay: 0.5s; background: rgba(0,240,255,0.55); }
.iv4-c0-nerve i:nth-child(4n) { animation-delay: 0.8s; }
@keyframes iv4-nerve-pulse {
  0%,100% { height: 20%; }
  50% { height: 90%; }
}
.iv4-c0-pm {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  color: rgba(0,240,255,0.55);
  margin-top: 6px;
  letter-spacing: 0.06em;
}
.iv4-c0-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.iv4-c0-cell {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 7px;
  padding: 8px 10px;
}
.iv4-c0-cell .l { font-family: 'JetBrains Mono', monospace; font-size: 0.52rem; color: rgba(255,255,255,0.28); letter-spacing: 0.08em; margin-bottom: 4px; }
.iv4-c0-cell .n { font-family: 'JetBrains Mono', monospace; font-size: 1.2rem; font-weight: 700; color: rgba(255,255,255,0.88); line-height: 1; }
.iv4-c0-cell .n.cyan { color: #00f0ff; }
.iv4-c0-cell .b { height: 3px; background: rgba(255,255,255,0.07); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.iv4-c0-cell .b div { height: 100%; background: rgba(0,240,255,0.6); border-radius: 2px; width: var(--w); }

/* ── CHAPTER 1 — Voice ── */
.iv4-c1-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  position: relative;
}
.iv4-c1-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.iv4-c1-rings span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,240,255,0.12);
  animation: iv4-ring-pulse 3s ease-out infinite;
}
.iv4-c1-rings span:nth-child(1) { width: 80px; height: 80px; animation-delay: 0s; }
.iv4-c1-rings span:nth-child(2) { width: 140px; height: 140px; animation-delay: 0.4s; }
.iv4-c1-rings span:nth-child(3) { width: 210px; height: 210px; animation-delay: 0.8s; }
.iv4-c1-rings span:nth-child(4) { width: 290px; height: 290px; animation-delay: 1.2s; }
.iv4-c1-rings span:nth-child(5) { width: 380px; height: 380px; animation-delay: 1.6s; }
@keyframes iv4-ring-pulse {
  0%   { transform: scale(0.7); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}
.iv4-c1-agent { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 2; }
.iv4-c1-agent img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(0,240,255,0.4); box-shadow: 0 0 20px rgba(0,240,255,0.25); object-fit: cover; }
.iv4-c1-name { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #00f0ff; letter-spacing: 0.1em; }
.iv4-c1-status { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: rgba(255,255,255,0.4); }
.iv4-c1-vox {
  display: flex;
  gap: 3px;
  align-items: center;
  height: 48px;
  position: relative;
  z-index: 2;
}
.iv4-c1-vox span {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(to top, rgba(0,240,255,0.3), #00f0ff);
  height: var(--h, 40%);
  animation: iv4-vox-wave 1.2s ease-in-out infinite alternate;
}
.iv4-c1-vox span:nth-child(2n) { animation-delay: 0.15s; }
.iv4-c1-vox span:nth-child(3n) { animation-delay: 0.3s; }
.iv4-c1-vox span:nth-child(4n) { animation-delay: 0.45s; }
@keyframes iv4-vox-wave {
  0%   { height: 15%; opacity: 0.5; }
  100% { height: 95%; opacity: 1; }
}
.iv4-c1-cmd {
  background: rgba(0,240,255,0.05);
  border: 1px solid rgba(0,240,255,0.12);
  border-radius: 8px;
  padding: 10px 14px;
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 2;
}
.iv4-c1-l { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: rgba(255,255,255,0.3); margin-bottom: 3px; }
.iv4-c1-v { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: rgba(255,255,255,0.75); margin-bottom: 8px; }
.iv4-c1-v.ok { color: #4ade80; margin-bottom: 0; }

/* ── CHAPTER 2 — aOS ── */
.iv4-win-bar--aos { justify-content: flex-start; }
.iv4-c2-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0,240,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.iv4-c2-cluster { display: flex; align-items: center; gap: 6px; }
.iv4-c2-cluster img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(0,240,255,0.25); }
.iv4-c2-name { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: rgba(255,255,255,0.55); letter-spacing: 0.06em; display: flex; align-items: center; gap: 4px; }
.iv4-c2-div { width: 1px; height: 20px; background: rgba(255,255,255,0.08); margin: 0 4px; }
.iv4-c2-stat { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: auto; }
.iv4-c2-stat .l { color: rgba(255,255,255,0.28); }
.iv4-c2-stat .v { color: rgba(255,255,255,0.72); font-weight: 700; }
.iv4-c2-stat .v.cyan { color: #00f0ff; }
.iv4-c2-log { flex: 1; overflow: hidden; padding: 12px 14px; display: flex; flex-direction: column; gap: 0; }
.iv4-c2-log-h { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: rgba(255,255,255,0.25); letter-spacing: 0.1em; margin-bottom: 8px; }
.iv4-c2-lines { display: flex; flex-direction: column; gap: 5px; }
.iv4-c2-line { display: flex; align-items: baseline; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; }
.iv4-c2-line .ts { color: rgba(255,255,255,0.22); flex-shrink: 0; }
.iv4-c2-line .ag { color: #00f0ff; flex-shrink: 0; width: 46px; font-weight: 600; }
.iv4-c2-line .msg { color: rgba(255,255,255,0.55); }
.iv4-c2-daemons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.iv4-c2-daemon { display: flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; color: rgba(255,255,255,0.38); }

/* ── CHAPTER 3 — A2A (THE HERO) ── */
.iv4-win-bar--a2a { background: rgba(236,72,153,0.06); border-bottom-color: rgba(236,72,153,0.15); }
.iv4-c3-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.iv4-c3-mesh {
  flex: 0 0 46%;
  height: 100%;
  display: block;
}
.iv4-c3-feed {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(236,72,153,0.12);
  overflow: hidden;
}
.iv4-c3-feed-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  color: rgba(236,72,153,0.6);
  letter-spacing: 0.1em;
  padding: 10px 14px 6px;
  border-bottom: 1px solid rgba(236,72,153,0.08);
  flex-shrink: 0;
}
.iv4-c3-msgs {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.iv4-msg {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  animation: iv4-msg-slide 0.4s var(--ease-apex, cubic-bezier(0.16,1,0.3,1)) both;
  flex-shrink: 0;
}
@keyframes iv4-msg-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.iv4-msg-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(236,72,153,0.35); flex-shrink: 0; margin-top: 2px; }
.iv4-msg-body { flex: 1; min-width: 0; }
.iv4-msg-route { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.iv4-msg-route .from { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: #00f0ff; font-weight: 700; }
.iv4-msg-route .arr { color: rgba(236,72,153,0.7); font-size: 0.7rem; }
.iv4-msg-route .to { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: rgba(255,255,255,0.45); }
.iv4-msg-text { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: rgba(255,255,255,0.7); margin-bottom: 5px; line-height: 1.4; }
.iv4-msg-art { display: flex; align-items: center; gap: 6px; }
.art-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  background: rgba(236,72,153,0.12);
  border: 1px solid rgba(236,72,153,0.25);
  color: #ec4899;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.iv4-msg-art {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  color: rgba(255,255,255,0.3);
}

/* ── Pills row + CTA ── */
.iv4-pills-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 48px 48px 100px;
}
.iv4-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s var(--ease-apex, cubic-bezier(0.16,1,0.3,1));
}
.iv4-pill:hover,
.iv4-pill.active {
  color: #00f0ff;
  border-color: rgba(0,240,255,0.3);
  background: rgba(0,240,255,0.06);
}
.iv4-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  text-decoration: none;
  padding-bottom: 2px;
  margin-left: 16px;
  transition: color 0.3s, border-color 0.3s;
}
.iv4-cta:hover { color: #fff; border-color: rgba(255,255,255,0.5); }

/* ── Reduced-motion overrides ── */
@media (prefers-reduced-motion: reduce) {
  .iv4-scene,
  .iv4-chapter-copy {
    transition: opacity 0.2s;
    filter: none !important;
    transform: none !important;
  }
  .iv4-c0-nerve i,
  .iv4-c1-vox span,
  .iv4-c1-rings span { animation: none; }
}


/* ==========================================================
   ALICE WIDGET V2
   ========================================================== */

/* --- Panel geometry --- */
.alice-panel {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  z-index: 9200 !important;
  width: clamp(380px, 32vw, 520px) !important;
  height: clamp(560px, 80vh, 720px) !important;
  max-height: clamp(560px, 80vh, 720px) !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(8, 10, 14, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(0, 240, 255, 0.30) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 1px rgba(0,240,255,0.07), 0 40px 100px rgba(0,240,255,0.18), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transform: translateY(10px) scale(0.97) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s cubic-bezier(0.16,1,0.3,1), visibility 0.35s !important;
}
.alice-panel.open {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- Header --- */
.alice-h {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  background: linear-gradient(180deg, rgba(0,240,255,0.07), transparent) !important;
  flex-shrink: 0 !important;
}
.alice-h-eye {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
}
.alice-h-eye img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1.5px solid rgba(0,240,255,0.45) !important;
  display: block !important;
}
.alice-h-ring {
  position: absolute !important;
  inset: -3px !important;
  border-radius: 50% !important;
  background: conic-gradient(from var(--ag, 0deg), var(--cyan), transparent 30%, #8b5cf6, transparent 80%, var(--cyan)) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  animation: ringSpin 5s linear infinite !important;
}
.alice-meta {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.alice-name {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 3px !important;
  color: var(--cyan) !important;
  text-shadow: 0 0 14px rgba(0,240,255,0.55) !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.alice-name .ver {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
}
.alice-role {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  color: rgba(214,216,222,0.6) !important;
  margin: 4px 0 6px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.alice-status {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
.alice-status .badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,240,255,0.30) !important;
  color: var(--cyan) !important;
  background: rgba(0,240,255,0.07) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
}
.alice-status .badge .dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--cyan) !important;
  box-shadow: 0 0 6px var(--cyan) !important;
  animation: pulse 1.4s infinite !important;
  flex-shrink: 0 !important;
}
.alice-status .badge.live {
  border-color: rgba(0,255,136,0.45) !important;
  color: var(--green) !important;
  background: rgba(0,255,136,0.07) !important;
}
.alice-status .badge.live .dot {
  background: var(--green) !important;
  box-shadow: 0 0 6px var(--green) !important;
}

/* Online indicator top right of header */
.alice-h-online {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.alice-h-online .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: pulse 1.4s infinite;
}
.alice-close {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(214,216,222,0.7) !important;
  cursor: pointer !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  transition: border-color 0.2s, color 0.2s !important;
}
.alice-close:hover {
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
}

/* --- KPI Stats bar --- */
.alice-kpi {
  display: flex !important;
  align-items: center !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(0,0,0,0.35) !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
  flex-direction: column !important;
}
.alice-kpi-stats {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 9px !important;
}
.ak {
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
}
.akv {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: #fff !important;
  letter-spacing: -0.02em !important;
}
.akl {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.alice-kpi-divider {
  width: 1px !important;
  height: 24px !important;
  background: rgba(255,255,255,0.09) !important;
  flex-shrink: 0 !important;
}

/* --- Brand pills row --- */
.ak-brands {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  width: 100% !important;
  padding-bottom: 2px !important;
}
.ak-brands::-webkit-scrollbar { display: none !important; }
.bp {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: hsl(var(--bh) 100% 78%) !important;
  padding: 4px 10px !important;
  border: 1px solid hsl(var(--bh) 100% 50% / 0.35) !important;
  background: hsl(var(--bh) 100% 50% / 0.06) !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.bp .bd {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: hsl(var(--bh) 100% 65%) !important;
  box-shadow: 0 0 5px hsl(var(--bh) 100% 65%) !important;
  flex-shrink: 0 !important;
}

/* --- Messages area --- */
.alice-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0,240,255,0.3) transparent !important;
  min-height: 0 !important;
}
.alice-body::-webkit-scrollbar { width: 3px !important; }
.alice-body::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.3) !important; border-radius: 2px !important; }

/* Message bubble row — with avatar */
.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.msg-row.you {
  flex-direction: row-reverse;
}
.msg-row-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(0,240,255,0.25);
}
.msg {
  max-width: 80% !important;
  padding: 10px 13px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  animation: msgIn 0.25s cubic-bezier(0.16,1,0.3,1) !important;
}
.msg.alice {
  align-self: flex-start !important;
  background: rgba(0,240,255,0.07) !important;
  border: 1px solid rgba(0,240,255,0.22) !important;
  color: #fff !important;
  border-bottom-left-radius: 4px !important;
}
.msg.alice strong { color: var(--cyan) !important; }
.msg.you {
  align-self: flex-end !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(214,216,222,0.9) !important;
  border-bottom-right-radius: 4px !important;
}
.msg-ts {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: 4px;
  align-self: flex-end;
  flex-shrink: 0;
}

/* --- Suggestion chips --- */
.alice-suggest {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 5px !important;
  padding: 10px 12px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(0,0,0,0.28) !important;
  flex-shrink: 0 !important;
}
.alice-chip {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.5px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.02) !important;
  color: rgba(214,216,222,0.8) !important;
  cursor: pointer !important;
  transition: border-color 0.2s, color 0.2s, background 0.2s !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}
.alice-chip:hover {
  border-color: rgba(0,240,255,0.45) !important;
  color: var(--cyan) !important;
  background: rgba(0,240,255,0.06) !important;
}

/* --- Input footer --- */
.alice-input {
  display: flex !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  align-items: center !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(0,0,0,0.5) !important;
  flex-shrink: 0 !important;
}
.ai-prompt { display: none !important; }
.alice-input input,
.alice-input textarea {
  flex: 1 !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  color: #fff !important;
  outline: none !important;
  resize: none !important;
  min-height: 38px !important;
  max-height: 90px !important;
  line-height: 1.4 !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.alice-input input:focus,
.alice-input textarea:focus {
  border-color: rgba(0,240,255,0.45) !important;
  box-shadow: 0 0 0 3px rgba(0,240,255,0.10) !important;
}
.ai-mic {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: transparent !important;
  border: 1px solid rgba(0,240,255,0.25) !important;
  color: var(--cyan) !important;
  border-radius: 9px !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
  flex-shrink: 0 !important;
}
.ai-mic:hover { border-color: var(--cyan) !important; box-shadow: 0 0 10px rgba(0,240,255,0.25) !important; }
.ai-mic.listening {
  background: #ff00aa !important;
  border-color: #ff00aa !important;
  color: #000 !important;
  animation: micPulse 1.2s ease-in-out infinite !important;
}
.ai-send {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: linear-gradient(135deg, #00f0ff, #00aaff) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 9px !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
}
.ai-send:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(0,240,255,0.35) !important; }
.ai-book {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 9px 11px !important;
  background: linear-gradient(135deg, #00f0ff 0%, #8b5cf6 100%) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: transform 0.18s !important;
  text-decoration: none !important;
}
.ai-book:hover { transform: translateY(-1px) !important; }

/* --- Footer status line --- */
.alice-foot {
  padding: 7px 14px !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  color: var(--muted) !important;
  text-align: center !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}
.alice-foot-latency {
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.alice-foot-model {
  color: rgba(106,114,128,0.9);
}

/* --- Typing indicator --- */
.msg-typing { display: inline-flex !important; gap: 4px !important; align-items: center !important; padding: 4px 2px !important; }
.msg-typing i { width: 5px !important; height: 5px !important; border-radius: 50% !important; background: var(--cyan) !important; animation: typeBob 1.2s infinite !important; }
.msg-typing i:nth-child(2) { animation-delay: 0.2s !important; }
.msg-typing i:nth-child(3) { animation-delay: 0.4s !important; }

/* --- Mobile: full-screen drawer --- */
@media (max-width: 768px) {
  .alice-panel {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  .alice-suggest {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   BART DASHBOARD — SPM Signal Desk (mirrors AVA mgr shape)
   Brand hue: 50 (Springfield yellow)
   ============================================================ */

.bart-mgr { padding: 64px 32px; max-width: 1480px; margin: 0 auto; }

/* Brand-hue override for BART frame */
.bart-mgr .mgr-frame { --brand-hue: 50; }

/* Pill accent + queue status in yellow */
.bart-mgr .mgr-pill.ok,
.bart-mgr .mgr-pill.ok .dot { color: hsl(50 100% 70%); }
.bart-mgr .ms-q .qs.ok {
  background: hsl(50 100% 50% / 0.12);
  color: hsl(50 100% 75%);
}

/* Score number — gradient adapts to --brand-hue on the frame */
.bart-mgr .mgr-score-num {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  background: linear-gradient(135deg, #fff 0%, hsl(var(--brand-hue, 50) 100% 70%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Edge score label */
.mgr-score-l {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
  text-transform: uppercase;
}

/* Edge score bar */
.mgr-score-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 8px;
}
.mgr-score-bar > div {
  height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(90deg,
    hsl(var(--brand-hue, 50) 100% 55%),
    hsl(var(--brand-hue, 50) 100% 72%));
  border-radius: 6px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Signal queue rows */
.ms-q {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.ms-q:last-child { border-bottom: none; }
.ms-q .qn  { width: 16px; color: rgba(255,255,255,0.35); flex-shrink: 0; }
.ms-q .qt  { flex: 1; color: rgba(255,255,255,0.82); letter-spacing: 0.08em; }
.ms-q .qs  {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Feed block — reused pattern from AVA */
.mgr-feed {
  margin-top: 20px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.mgr-feed-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mgr-feed-line {
  display: flex;
  gap: 12px;
  padding: 8px 16px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  line-height: 1.5;
}
.mgr-feed-line:last-child { border-bottom: none; }
.mgr-feed-line .t {
  color: hsl(50 100% 60% / 0.75);
  flex-shrink: 0;
  min-width: 38px;
}

/* Bar accent for BART — yellow glow on hover */
.bart-mgr .mgr-frame:hover {
  box-shadow: 0 0 60px hsl(50 100% 50% / 0.06), 0 0 0 1px rgba(255,221,0,0.10);
}

/* Responsive */
@media (max-width: 900px) {
  .bart-mgr { padding: 40px 16px; }
}


/* ALICE WIDGET V2 · P0 FIX (J directive) — wider, readable, no truncation */
.alice-panel {
  width: clamp(380px, 32vw, 520px) !important;
  max-width: calc(100vw - 32px) !important;
  height: clamp(560px, 80vh, 720px) !important;
  max-height: calc(100vh - 100px) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0,240,255,0.18) !important;
  background: rgba(8,10,14,0.94) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,240,255,0.10) !important;
  display: flex !important; flex-direction: column !important;
  overflow: hidden !important;
}

/* Header — compact, all elements visible */
.alice-panel .alice-h {
  display: grid !important;
  grid-template-columns: 48px 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.02) !important;
}
.alice-panel .alice-h-eye {
  width: 48px !important; height: 48px !important;
  flex: none !important;
}
.alice-panel .alice-h-eye img {
  width: 48px !important; height: 48px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(0,240,255,0.5) !important;
}
.alice-panel .alice-name {
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.96) !important;
  text-shadow: 0 0 12px rgba(0,240,255,0.3) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}
.alice-panel .alice-name .ver {
  font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
  font-size: 10px !important;
  color: rgba(0,240,255,0.7) !important;
  letter-spacing: 0.2em !important;
}
.alice-panel .alice-status {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin-top: 4px !important;
}
.alice-panel .alice-status .badge {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 3px 8px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,240,255,0.3) !important;
  color: rgba(0,240,255,0.85) !important;
  background: rgba(0,240,255,0.06) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.alice-panel .alice-status .badge.live {
  border-color: rgba(74,222,128,0.5) !important;
  color: #4ade80 !important;
  background: rgba(74,222,128,0.08) !important;
}
.alice-panel .alice-h .close,
.alice-panel .alice-h-close,
.alice-panel [data-close="alice-panel"] {
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.03) !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 16px !important;
  display: grid !important; place-items: center !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}
.alice-panel .alice-h .close:hover {
  border-color: rgba(0,240,255,0.4) !important;
  color: #00f0ff !important;
}

/* Stats row — horizontal flex, never cropped */
.alice-panel .alice-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.alice-panel .alice-stats > * {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  text-align: center !important;
}
.alice-panel .alice-stats .num,
.alice-panel .alice-stats .v,
.alice-panel .alice-stats strong {
  font-family: var(--font-display, sans-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.96) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
.alice-panel .alice-stats .lbl,
.alice-panel .alice-stats .l,
.alice-panel .alice-stats em,
.alice-panel .alice-stats span:not(.num):not(.v):not(strong) {
  font-family: var(--font-mono, monospace) !important;
  font-size: 8.5px !important;
  letter-spacing: 0.2em !important;
  color: rgba(255,255,255,0.5) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  font-style: normal !important;
}

/* Brand pills row — auto-fit no overflow */
.alice-panel .alice-pills,
.alice-panel .alice-brands {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.alice-panel .alice-pills > *,
.alice-panel .alice-brands > * {
  font-family: var(--font-mono, monospace) !important;
  font-size: 10px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.02) !important;
  color: rgba(255,255,255,0.7) !important;
  letter-spacing: 0.1em !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  white-space: nowrap !important;
}

/* Chips grid — 2 columns desktop, no truncation */
.alice-panel .alice-chips,
.alice-panel .alice-questions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  padding: 12px 16px !important;
  overflow-y: auto !important;
}
.alice-panel .alice-chip {
  text-align: left !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.04em !important;
  padding: 9px 11px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,0.78) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  min-height: 38px !important;
}
.alice-panel .alice-chip:hover {
  border-color: rgba(0,240,255,0.35) !important;
  background: rgba(0,240,255,0.06) !important;
  color: rgba(0,240,255,0.95) !important;
  transform: translateY(-1px) !important;
}

/* Messages area */
.alice-panel .alice-msgs {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.alice-panel .alice-msg,
.alice-panel .alice-bubble {
  max-width: 88% !important;
  padding: 10px 13px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.92) !important;
}
.alice-panel .alice-msg.alice,
.alice-panel .alice-bubble[data-from="alice"] {
  align-self: flex-start !important;
  background: rgba(0,240,255,0.08) !important;
  border: 1px solid rgba(0,240,255,0.2) !important;
}
.alice-panel .alice-msg.user,
.alice-panel .alice-bubble[data-from="user"] {
  align-self: flex-end !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.alice-panel .alice-msg strong { color: #00f0ff; }
.alice-panel .alice-msg em { font-style: italic; color: rgba(255,255,255,0.85); }

/* Footer input row */
.alice-panel .alice-footer,
.alice-panel .alice-input,
.alice-panel form {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 14px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(0,0,0,0.4) !important;
}
.alice-panel input[type="text"],
.alice-panel #alice-q,
.alice-panel textarea {
  flex: 1 !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  padding: 9px 14px !important;
  color: rgba(255,255,255,0.95) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 12px !important;
  outline: none !important;
}
.alice-panel input[type="text"]:focus,
.alice-panel #alice-q:focus {
  border-color: rgba(0,240,255,0.5) !important;
  background: rgba(0,240,255,0.04) !important;
}
.alice-panel .ai-mic,
.alice-panel .ai-send,
.alice-panel button[type="submit"] {
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,240,255,0.3) !important;
  background: rgba(0,240,255,0.08) !important;
  color: #00f0ff !important;
  display: grid !important; place-items: center !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
  flex: none !important;
}
.alice-panel .ai-mic:hover,
.alice-panel .ai-send:hover {
  background: rgba(0,240,255,0.18) !important;
  transform: scale(1.05) !important;
}
.alice-panel .alice-book {
  padding: 8px 14px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(0,240,255,0.2), rgba(139,92,246,0.2)) !important;
  border: 1px solid rgba(0,240,255,0.4) !important;
  color: #fff !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}
.alice-panel .alice-book:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(0,240,255,0.25) !important;
}
.alice-panel .alice-foot,
.alice-panel .alice-vetted,
.alice-panel .powered {
  text-align: center !important;
  padding: 6px 16px 10px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.35) !important;
  text-transform: uppercase !important;
}

/* Mobile fullscreen drawer */
@media (max-width: 600px) {
  .alice-panel {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    bottom: 0 !important;
    right: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .alice-panel .alice-chips { grid-template-columns: 1fr !important; }
}


/* BART DASHBOARD · cyan override (J directive: cyan not green) */
.bart-mgr .mgr-frame { --brand-hue: 195 !important; }
.bart-mgr .mgr-pill .dot,
.bart-mgr .ms-q .qs.ok,
.bart-mgr .mgr-feed-h .dot,
.bart-mgr .mgr-feed-line .t {
  color: #00f0ff !important;
  background: rgba(0,240,255,0.15) !important;
}
.bart-mgr .mgr-feed-line .t {
  background: transparent !important;
  color: rgba(0,240,255,0.85) !important;
}
.bart-mgr .mgr-pill.ok .dot,
.bart-mgr .lr.green {
  color: #00f0ff !important;
  background: transparent !important;
  text-shadow: 0 0 8px rgba(0,240,255,0.6);
}
.bart-mgr .ms-q .qs.ok {
  background: rgba(0,240,255,0.12) !important;
  color: rgba(0,240,255,0.95) !important;
  border: 1px solid rgba(0,240,255,0.3) !important;
}
.bart-mgr .mgr-score-num {
  background: linear-gradient(135deg, #fff 0%, #00f0ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.bart-mgr .mgr-score-bar > div {
  background: linear-gradient(90deg, #00f0ff, #8b5cf6) !important;
}


/* ============================================================
   AVA DASHBOARD V2
   Mirror of ava.flyjetr.app/manager — appended, overrides mgr-*
   ============================================================ */

:root {
  --ease-apex: cubic-bezier(0.16, 1, 0.3, 1);
  --jetr-cyan: hsl(195, 100%, 50%);
  --jetr-cyan-line: rgba(0, 220, 255, 0.18);
  --jetr-cyan-glow: rgba(0, 220, 255, 0.12);
}

/* WRAPPER */
.mgr-v2-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--jetr-cyan-line),
    0 32px 80px rgba(0,0,0,0.6),
    0 0 60px var(--jetr-cyan-glow);
}

/* CHROME BAR */
.mgr-v2-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: linear-gradient(180deg, rgba(18,18,24,0.98) 0%, rgba(12,12,16,0.98) 100%);
  border-bottom: 1px solid var(--jetr-cyan-line);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px 16px 0 0;
  flex-wrap: wrap;
  gap: 10px;
}

.mgr-v2-traffic {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.tv2 {
  width: 12px; height: 12px; border-radius: 50%;
  display: block; flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.tv2-r { background: #ff5f57; color: #ff5f57; }
.tv2-y { background: #febc2e; color: #febc2e; }
.tv2-g { background: #28c840; color: #28c840; }

.mgr-v2-wintitle {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
}
.mgr-v2-appname {
  font-size: 12px;
  font-weight: 800;
  color: var(--jetr-cyan);
  letter-spacing: 0.18em;
}
.mgr-v2-appsep { color: var(--muted); font-size: 10px; }
.mgr-v2-winlabel { font-size: 10px; color: var(--fg-2); letter-spacing: 0.08em; }
.mgr-v2-winver {
  font-size: 9px;
  color: var(--violet, #a855f7);
  letter-spacing: 0.12em;
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 4px;
  padding: 1px 6px;
}

.mgr-v2-statuspills {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
.mgr-v2-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--fg-2);
}
.v2pill-live {
  color: #00ff88;
  border-color: rgba(0,255,136,0.35);
  background: rgba(0,255,136,0.05);
}
.v2pill-dim { color: var(--muted); }
.v2pill-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
  flex-shrink: 0;
}
.v2dot-pulse {
  animation: v2dotPulse 1.6s ease-in-out infinite;
}
@keyframes v2dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}

/* TAB BAR */
.mgr-v2-tabbar {
  display: flex;
  background: rgba(8,8,12,0.95);
  border-bottom: 1px solid var(--jetr-cyan-line);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.mgr-v2-tabbar::-webkit-scrollbar { display: none; }

.mgr-v2-tab {
  flex-shrink: 0;
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 0.2s var(--ease-apex), border-color 0.2s var(--ease-apex);
  white-space: nowrap;
  position: relative;
}
.mgr-v2-tab:hover { color: var(--jetr-cyan); }
.v2tab-active {
  color: var(--jetr-cyan) !important;
  border-bottom-color: var(--jetr-cyan) !important;
}
.mgr-v2-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--jetr-cyan);
  color: #060608;
  font-size: 8px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: middle;
}

/* BODY 3-COLUMN */
.mgr-v2-body {
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  background: var(--bg, #0a0a0a);
  border-left: 1px solid var(--jetr-cyan-line);
  border-right: 1px solid var(--jetr-cyan-line);
  min-height: 600px;
}
@media (max-width: 1100px) {
  .mgr-v2-body { grid-template-columns: 200px 1fr; }
  .mgr-v2-queue { display: none; }
}
@media (max-width: 760px) {
  .mgr-v2-body { grid-template-columns: 1fr; }
  .mgr-v2-rail { border-right: none; border-bottom: 1px solid var(--jetr-cyan-line); }
}

/* LEFT RAIL */
.mgr-v2-rail {
  border-right: 1px solid var(--line, rgba(255,255,255,0.06));
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  overflow-y: auto;
}

.v2rail-section {
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.05));
}
.v2rail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.18s;
}
.v2rail-section-head:hover { background: rgba(0,220,255,0.04); }
.v2sec-label {
  font-size: 8.5px;
  letter-spacing: 0.2em;
  color: var(--jetr-cyan);
  text-transform: uppercase;
}
.v2sec-caret {
  font-size: 12px;
  color: var(--muted);
  transition: transform 0.22s var(--ease-apex);
  display: block;
}
.v2rail-open .v2sec-caret { transform: rotate(180deg); }

.v2rail-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-apex);
  padding: 0 14px;
}
.v2rail-open .v2rail-section-body {
  max-height: 300px;
  padding: 4px 14px 10px;
}

.v2ms-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
  font-size: 9.5px;
  align-items: center;
}
.v2ms-l { color: var(--muted); }
.v2ms-v { color: var(--fg, #f0f0f0); font-weight: 700; text-align: right; }
.v2-green { color: var(--cyan, #00f0ff) !important; }
.v2-amber { color: #f59e0b !important; }
.v2-cyan  { color: var(--jetr-cyan) !important; }

/* MAIN */
.mgr-v2-main {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* PAGE NAV */
.v2-pagehead {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.06));
  flex-wrap: wrap;
}
.v2-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.v2-navbtn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  padding: 4px 10px;
  color: var(--fg-2, #aaa);
  font-family: var(--font-mono);
  font-size: 9px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.v2-navbtn:hover { border-color: var(--jetr-cyan); color: var(--jetr-cyan); }
.v2-navcount { color: var(--muted); min-width: 36px; text-align: center; }

.v2-active-label { display: flex; flex-direction: column; gap: 2px; }
.v2-active-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--jetr-cyan);
}
.v2-active-name {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--fg, #f0f0f0);
}

/* HERO CARD */
.v2-hero-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--jetr-cyan-line);
  border-radius: 12px;
  padding: 16px;
  transition: border-color 0.2s var(--ease-apex), box-shadow 0.2s var(--ease-apex);
}
.v2-hero-card:hover {
  border-color: rgba(0,220,255,0.32);
  box-shadow: 0 0 24px var(--jetr-cyan-glow);
}

.v2-hero-media {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: rgba(255,255,255,0.03);
}
.v2-hero-vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2-hero-media-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 10px 8px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--font-mono);
}
.v2-hero-dest {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #fff;
}
.v2-hero-slides {
  font-size: 8px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
}

/* SCORE RING */
.v2-hero-analysis {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v2-score-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  align-self: flex-start;
}
.v2-score-ring {
  width: 110px;
  height: 110px;
  transform: rotate(-90deg);
}
.v2-ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 8;
}
.v2-ring-fill {
  fill: none;
  stroke: var(--jetr-cyan);
  stroke-width: 8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(0,220,255,0.6));
  transition: stroke-dashoffset 0.1s;
}
.v2-score-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.v2-score-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.v2-score-num {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 28px;
  font-weight: 900;
  color: var(--jetr-cyan);
  line-height: 1;
  text-shadow: 0 0 18px rgba(0,220,255,0.5);
}
.v2-score-denom {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
}

/* ANALYSIS ROWS */
.v2-analysis-rows { display: flex; flex-direction: column; gap: 5px; }
.v2-arow {
  display: grid;
  grid-template-columns: 130px 1fr 70px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  transition: border-color 0.18s var(--ease-apex), background 0.18s var(--ease-apex);
}
.v2-arow:hover {
  border-color: var(--jetr-cyan-line);
  background: rgba(0,220,255,0.04);
}
.v2-arow-key { color: var(--jetr-cyan); font-size: 9px; letter-spacing: 0.12em; }
.v2-arow-val { color: var(--fg-2, #aaa); }
.v2-arow-score { text-align: right; font-weight: 700; }

/* METRIC CARDS */
.v2-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 960px) { .v2-metrics-row { grid-template-columns: repeat(2, 1fr); } }

.v2-mg-card {
  padding: 13px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: border-color 0.2s var(--ease-apex);
}
.v2-mg-card:hover { border-color: var(--jetr-cyan-line); }
.v2-mg-card-score { border-color: rgba(0,220,255,0.15) !important; }

.v2mgc-h {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: var(--jetr-cyan);
  margin-bottom: 6px;
}
.v2mgc-num {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg, #f0f0f0);
}
.v2u { font-size: 13px; color: var(--muted); margin-left: 2px; }
.v2mgc-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  margin: 8px 0 5px;
}
.v2mgc-spark i {
  flex: 1;
  background: var(--jetr-cyan);
  height: var(--h, 50%);
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(0,220,255,0.4);
  display: block;
}
.v2mgc-d {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* RIGHT QUEUE RAIL */
.mgr-v2-queue {
  border-left: 1px solid var(--line, rgba(255,255,255,0.06));
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  overflow-y: auto;
}
.v2q-head {
  font-size: 8.5px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.v2q-card {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  transition: border-color 0.18s var(--ease-apex), transform 0.18s var(--ease-apex);
  cursor: pointer;
}
.v2q-card:hover {
  border-color: var(--jetr-cyan-line);
  transform: translateY(-1px);
}
.v2q-card-active { border-color: rgba(0,220,255,0.28) !important; }
.v2q-thumb { height: 72px; overflow: hidden; background: rgba(255,255,255,0.03); }
.v2q-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: linear-gradient(135deg, rgba(0,220,255,0.04), rgba(0,0,0,0.3));
}
.v2q-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
}
.v2q-name { font-size: 9px; letter-spacing: 0.14em; color: var(--fg-2); font-weight: 700; }
.v2q-score { font-size: 9px; color: var(--muted); font-weight: 700; }
.v2q-status {
  padding: 2px 8px 4px;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #00ff88;
  background: rgba(0,255,136,0.06);
  border-top: 1px solid rgba(0,255,136,0.12);
  text-align: center;
}
.v2q-status-building { color: var(--muted); background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.05); }

/* ACTIVITY LOG */
.v2-activity-head {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.v2ae-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 5px #00ff88;
  animation: v2dotPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.v2-activity-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
  max-height: 200px;
}
.v2-activity-entry {
  display: grid;
  grid-template-columns: 8px 62px 1fr;
  align-items: flex-start;
  gap: 5px;
  font-size: 8.5px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  opacity: 1;
  transition: opacity 0.4s;
}
.v2ae-fresh { opacity: 0; animation: v2fadeIn 0.5s var(--ease-apex) forwards; }
@keyframes v2fadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.v2ae-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--jetr-cyan);
  box-shadow: 0 0 4px rgba(0,220,255,0.5);
  margin-top: 2px;
  flex-shrink: 0;
}
.v2ae-time { color: rgba(255,255,255,0.28); letter-spacing: 0.04em; font-size: 8px; }
.v2ae-msg { color: rgba(255,255,255,0.6); line-height: 1.4; }

/* FOOTER */
.mgr-v2-foot {
  padding: 11px 18px;
  background: rgba(8,8,12,0.95);
  border: 1px solid var(--jetr-cyan-line);
  border-top: none;
  border-radius: 0 0 16px 16px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ava-score-ring class alias for verification grep */
.ava-score-ring { display: none; }



/* HERO · disable broken chromatic glitch on OS line (J fix) */
.hero-h1 .line.glitch::before,
.hero-h1 .line.glitch::after {
  display: none !important;
}
.hero-h1 .line.glitch {
  position: relative !important;
  text-shadow:
    0 0 30px rgba(0,240,255,0.35),
    0 2px 12px rgba(0,0,0,0.6) !important;
}
/* Make sure no other text-doubling is happening */
.hero-h1 .line {
  position: relative !important;
}
.hero-h1 .line::before,
.hero-h1 .line::after {
  display: none !important;
}
/* Tighter grad on accent line so it reads as one solid color, not a ghost */
.hero-h1 .line.accent {
  background: linear-gradient(135deg, #fff 0%, #00f0ff 60%, #8b5cf6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}


/* HERO H1 · NUCLEAR override — kill all chromatic ghosting (J P0) */
.hero-h1 .line.glitch::before,
.hero-h1 .line.glitch::after,
.hero h1 *::before,
.hero h1 *::after {
  content: none !important;
  display: none !important;
  background: none !important;
  text-shadow: none !important;
  visibility: hidden !important;
}
.hero-h1 .line.accent {
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 28px rgba(0,240,255,0.35) !important;
  filter: none !important;
}
.hero-h1 .line.accent em {
  background: linear-gradient(135deg, #fff 0%, #00f0ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 18px rgba(0,240,255,0.55)) !important;
}
.hero-h1 .line.glitch {
  text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 24px rgba(0,240,255,0.2) !important;
  filter: none !important;
}

/* AVA virality bar — full cyan gradient, no green */
.lm-score-bar > div,
.mgr-score-bar > div,
.mgr-camp .lm-score-bar > div {
  background: linear-gradient(90deg, #00f0ff 0%, #8b5cf6 100%) !important;
}
.lm-score-num,
.mgr-score-num {
  color: #00f0ff !important;
  background: linear-gradient(135deg, #fff 0%, #00f0ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.lr.green, .mgr .lr.green, .lm-row .lr.green {
  color: #00f0ff !important;
  text-shadow: 0 0 8px rgba(0,240,255,0.4);
}

/* AVA dashboard · JETR campaign thumbnails grid (J: more JETR content visible) */
.mgr-camp-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.mgr-camp-thumb {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(0,240,255,0.15);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  background: rgba(0,0,0,0.4);
}
.mgr-camp-thumb video,
.mgr-camp-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.mgr-camp-thumb.active {
  border-color: rgba(0,240,255,0.7);
  box-shadow: 0 0 0 1px rgba(0,240,255,0.5), 0 8px 24px rgba(0,240,255,0.2);
}
.mgr-camp-thumb:hover {
  transform: translateY(-2px);
  border-color: rgba(0,240,255,0.5);
}
.mgr-camp-thumb-label {
  position: absolute; bottom: 4px; left: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.65);
  padding: 2px 6px;
  border-radius: 3px;
}

/* GAP REDUCTION between scenes and four-pillars */
.scenes + section,
section.scenes + section,
.four-pillars { padding-top: 32px !important; }
.scenes { margin-bottom: 0 !important; }


/* ALICE WIDGET · ALWAYS VISIBLE DOCK (J P0 directive) */
.alice-panel {
  /* Pin always visible bottom-right, with collapse-to-header behavior */
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 9000 !important;
}
.alice-panel:not(.expanded) {
  /* Collapsed state — small dock showing avatar + ask bar only */
  width: 360px !important;
  height: 64px !important;
  cursor: pointer !important;
}
.alice-panel:not(.expanded) .alice-stats,
.alice-panel:not(.expanded) .alice-pills,
.alice-panel:not(.expanded) .alice-brands,
.alice-panel:not(.expanded) .alice-chips,
.alice-panel:not(.expanded) .alice-questions,
.alice-panel:not(.expanded) .alice-msgs,
.alice-panel:not(.expanded) .alice-foot,
.alice-panel:not(.expanded) .alice-vetted,
.alice-panel:not(.expanded) .powered {
  display: none !important;
}
.alice-panel:not(.expanded) .alice-h {
  display: grid !important;
  grid-template-columns: 40px 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  border: none !important;
  height: 100% !important;
}
.alice-panel:not(.expanded) .alice-h-eye img { width: 40px !important; height: 40px !important; }
.alice-panel:not(.expanded) .alice-input,
.alice-panel:not(.expanded) form,
.alice-panel:not(.expanded) .alice-footer { display: none !important; }
/* Removed legacy "Ask ALICE →" pseudo-CTA — superseded by tier-1 panel */
.alice-panel::after,
.alice-panel:not(.expanded)::after,
.alice-panel.expanded::after { content: none !important; display: none !important; }

/* ===== BRAND LINKS — clickable hero h2's that route to the live brand site ===== */
.brand-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  position: relative;
  cursor: pointer;
  transition: filter 0.25s ease;
}
.brand-link:hover { filter: brightness(1.15) drop-shadow(0 0 24px rgba(0,229,255,0.35)); }
.brand-link h2 { display: inline-flex; align-items: baseline; gap: 0.18em; flex-wrap: nowrap; }
.brand-link-arr {
  font-size: 0.42em;
  font-family: var(--font-mono, monospace);
  font-weight: 500;
  color: rgba(0,229,255,0.7);
  vertical-align: super;
  display: inline-block;
  transition: transform 0.25s ease, color 0.25s ease;
  margin-left: 0.05em;
}
.brand-link:hover .brand-link-arr {
  transform: translate(3px, -3px);
  color: #00f0ff;
}
.bpanel-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.bpanel-link .bpanel { transition: transform 0.4s ease, box-shadow 0.4s ease; }
.bpanel-link:hover .bpanel { transform: translateY(-4px); }
.alice-panel.expanded {
  width: clamp(380px, 32vw, 520px) !important;
  height: clamp(560px, 80vh, 720px) !important;
  cursor: default !important;
}
/* Hide the FAB since panel is always visible */
.alice-fab { display: none !important; }


/* SCENES · master video always visible — no active toggle needed with single vid */
.scene-vid.scene-master { opacity: 1; }

/* SCENES · NO OVERLAY (J directive) — kill the dark scrim on scene-block */
.scene-block {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.scene-block .scene-h2,
.scene-block .scene-sub,
.scene-block .scene-eyebrow {
  text-shadow: 0 2px 16px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.85) !important;
}
.scene-block.in-view {
  filter: none !important;
}
/* Scenes overlay scrim — even lighter */
.scenes::before {
  background:
    radial-gradient(ellipse at 25% 50%, rgba(0,0,0,0.45) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, transparent 60%, rgba(0,0,0,0.50) 100%) !important;
}

/* THESIS · ensure no half-rendered ghost glitch */
.thesis-block, .thesis-h, .thesis p {
  text-shadow: none !important;
}


/* HERO BLEND · only from BOTTOM, never from top (J directive) */
.hero-overlay {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 55%,
    rgba(0,0,0,0.30) 75%,
    rgba(0,0,0,0.78) 100%
  ) !important;
}
.hero-bleed-grad,
.hero-grad,
.hero::before,
.hero::after {
  background: none !important;
}
/* Nav bar should be transparent over hero, not creating top scrim */
.nav-bar, .nav-wrap, .nav, header.nav, .top-bar {
  background: transparent !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
/* Live-stream ticker top — kill its bg if it's overlapping hero top */
.live-stream-ticker, .ticker, .marquee-top {
  background: rgba(0,0,0,0.55) !important;
}


/* ==========================================================
   ALICE WIDGET V3 (3→10 rebuild) — APEX DESIGN SYSTEM
   All rules prefixed av3- to guarantee clean override.
   ========================================================== */

/* -- FAB (always-visible dock) -------------------------------- */
.av3-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9000;
  width: 56px;
  height: 56px;
  border: none;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  cursor: none;
  display: grid;
  place-items: center;
  transition: width 0.35s cubic-bezier(0.16,1,0.3,1),
              border-radius 0.35s cubic-bezier(0.16,1,0.3,1);
  overflow: visible;
}
.av3-fab:hover {
  /* hover pill expand handled by pill opacity only — no width shift on root */
}
.av3-fab img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 2;
  border: 2px solid rgba(0,240,255,0.55);
  box-shadow: 0 0 18px rgba(0,240,255,0.30), 0 4px 16px rgba(0,0,0,0.6);
}
.av3-fab-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #00f0ff, transparent 35%, rgba(168,85,247,0.8), transparent 75%, #00f0ff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  animation: av3RingSpin 5s linear infinite;
  z-index: 1;
}
@keyframes av3RingSpin {
  to { transform: rotate(360deg); }
}
.av3-fab-dot {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 10px;
  height: 10px;
  background: #00ff88;
  border-radius: 50%;
  border: 2px solid #060608;
  box-shadow: 0 0 7px #00ff88;
  z-index: 3;
  animation: av3Pulse 1.8s ease-in-out infinite;
}
@keyframes av3Pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.75; }
}
.av3-fab-pill {
  position: absolute;
  right: 62px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(6,6,8,0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,240,255,0.22);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #00f0ff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 0 14px rgba(0,240,255,0.15);
}
.av3-fab:hover .av3-fab-pill {
  opacity: 1;
}

/* -- PANEL ---------------------------------------------------- */
.av3-panel {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  z-index: 9100 !important;
  width: clamp(420px, 36vw, 560px) !important;
  max-height: clamp(580px, 78vh, 760px) !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(8,10,14,0.97) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border: 1px solid rgba(0,240,255,0.20) !important;
  border-radius: 20px !important;
  box-shadow:
    0 0 0 1px rgba(0,240,255,0.06) inset,
    0 0 48px rgba(0,240,255,0.10),
    0 32px 80px rgba(0,0,0,0.75) !important;
  overflow: hidden !important;
  /* closed state */
  transform: scale(0.92) translateY(12px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    transform 0.4s cubic-bezier(0.16,1,0.3,1),
    opacity 0.4s cubic-bezier(0.16,1,0.3,1),
    visibility 0.4s !important;
}
.av3-panel.av3-open {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* Hide the old V2 open class trigger */
.av3-panel.open {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* -- HEADER --------------------------------------------------- */
.av3-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(0,240,255,0.05) 0%, transparent 100%);
  flex-shrink: 0;
}
.av3-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.av3-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(0,240,255,0.5);
}
.av3-avatar-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #00f0ff, transparent 35%, rgba(168,85,247,0.7), transparent 75%, #00f0ff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: av3RingSpin 2.4s linear infinite;
}
.av3-header-meta {
  flex: 1;
  min-width: 0;
}
.av3-name {
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 2.5px;
  background: linear-gradient(90deg, #fff 30%, #00f0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.av3-ver {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.28) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.28) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  margin-left: 8px;
  vertical-align: middle;
}
.av3-subtitle {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 8.5px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.38);
  margin-top: 3px;
  text-transform: uppercase;
}
.av3-online-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 8.5px;
  letter-spacing: 1.5px;
  color: #00ff88;
  background: rgba(0,255,136,0.07);
  border: 1px solid rgba(0,255,136,0.22);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.av3-online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 6px #00ff88;
  animation: av3Pulse 1.6s ease-in-out infinite;
}
.av3-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: rgba(255,255,255,0.45);
  font-size: 17px;
  line-height: 1;
  cursor: none;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.av3-close:hover {
  border-color: rgba(0,240,255,0.45);
  color: #00f0ff;
  background: rgba(0,240,255,0.06);
}

/* -- STATS ROW ------------------------------------------------ */
.av3-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.30);
  flex-shrink: 0;
}
.av3-stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.av3-stat-n {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  letter-spacing: -0.02em;
}
.av3-stat-l {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}
.av3-stat-sep {
  color: rgba(255,255,255,0.15);
  font-size: 13px;
  line-height: 1;
}

/* -- SMART CARD GRID ------------------------------------------ */
.av3-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 12px 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,240,255,0.3) transparent;
  flex-shrink: 0;
  max-height: 220px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.av3-cards::-webkit-scrollbar { width: 3px; }
.av3-cards::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.25); border-radius: 2px; }
.av3-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  cursor: none;
  text-align: left;
  transition:
    border-color 0.22s cubic-bezier(0.16,1,0.3,1),
    background 0.22s cubic-bezier(0.16,1,0.3,1),
    transform 0.22s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.22s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  overflow: hidden;
}
.av3-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(0,240,255,0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.av3-card:hover {
  border-color: rgba(0,240,255,0.28);
  background: rgba(0,240,255,0.05);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(0,240,255,0.12);
}
.av3-card:hover::before { opacity: 1; }
.av3-card:active { transform: translateY(0) scale(0.98); }
.av3-card-cat {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 2px;
  color: #00f0ff;
  font-weight: 600;
}
.av3-card-title {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 12.5px;
  color: rgba(255,255,255,0.88);
  line-height: 1.3;
  font-weight: 500;
}
.av3-card-sub {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 10.5px;
  color: rgba(255,255,255,0.38);
  line-height: 1.3;
}
/* ripple effect */
.av3-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(0,240,255,0.25);
  pointer-events: none;
  animation: av3RippleAnim 0.5s ease-out forwards;
}
@keyframes av3RippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* -- CHAT BODY ------------------------------------------------ */
.av3-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0,240,255,0.25) transparent !important;
  min-height: 0;
}
.av3-body::-webkit-scrollbar { width: 3px; }
.av3-body::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.25); border-radius: 2px; }
/* V3 message bubbles */
.av3-body .msg {
  animation: av3MsgIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes av3MsgIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* typing indicator */
.av3-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 10px 14px;
}
.av3-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00f0ff;
  animation: av3TypingBob 1.2s ease-in-out infinite;
}
.av3-typing span:nth-child(2) { animation-delay: 0.18s; }
.av3-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes av3TypingBob {
  0%,80%,100% { transform: translateY(0); opacity: 0.4; }
  40%          { transform: translateY(-5px); opacity: 1; }
}

/* -- INPUT FOOTER --------------------------------------------- */
.av3-input-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 11px 13px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(0,0,0,0.45) !important;
  flex-shrink: 0;
}
.av3-mic {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,240,255,0.25) !important;
  background: transparent !important;
  color: rgba(0,240,255,0.75) !important;
  cursor: none !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
}
.av3-mic:hover {
  border-color: #00f0ff !important;
  box-shadow: 0 0 12px rgba(0,240,255,0.3) !important;
}
.av3-mic.av3-listening {
  background: rgba(0,240,255,0.12) !important;
  border-color: #00f0ff !important;
  color: #00f0ff !important;
  box-shadow: 0 0 0 4px rgba(0,240,255,0.12), 0 0 20px rgba(0,240,255,0.3) !important;
  animation: av3MicPulse 1.0s ease-in-out infinite !important;
}
@keyframes av3MicPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(0,240,255,0.14), 0 0 18px rgba(0,240,255,0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(0,240,255,0.05), 0 0 28px rgba(0,240,255,0.40); }
}
.av3-input {
  flex: 1 !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.88) !important;
  outline: none !important;
  resize: none !important;
  max-height: 90px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.av3-input:focus {
  border-color: rgba(0,240,255,0.40) !important;
  box-shadow: 0 0 0 3px rgba(0,240,255,0.09) !important;
}
.av3-input::placeholder { color: rgba(255,255,255,0.25); }
.av3-send {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: none !important;
  background: linear-gradient(135deg, #00f0ff 0%, #00c8d4 100%) !important;
  color: #060608 !important;
  cursor: none !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s !important;
}
.av3-send:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 0 16px rgba(0,240,255,0.45) !important;
}
.av3-send:active {
  transform: scale(0.95) !important;
}
.av3-book {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 13px !important;
  background: linear-gradient(135deg, rgba(0,240,255,0.9) 0%, rgba(168,85,247,0.9) 100%) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  cursor: none !important;
  text-decoration: none !important;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s !important;
}
.av3-book:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(0,240,255,0.30), 0 4px 14px rgba(168,85,247,0.30) !important;
}

/* -- STATUS LINE ---------------------------------------------- */
.av3-foot {
  padding: 7px 14px;
  border-top: 1px solid rgba(255,255,255,0.04);
  background: rgba(0,0,0,0.35);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.av3-foot-inner {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 8.5px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.22);
}

/* -- MOBILE (< 600px) ----------------------------------------- */
@media (max-width: 600px) {
  .av3-panel {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 16px 16px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }
  .av3-cards {
    grid-template-columns: 1fr !important;
    max-height: 200px !important;
  }
  .av3-book { display: none !important; }
  .av3-fab { right: 16px !important; bottom: 16px !important; }
}

/* -- REDUCED MOTION guard ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .av3-fab-ring,
  .av3-avatar-ring,
  .av3-fab-dot,
  .av3-online-dot { animation: none !important; }
  .av3-panel,
  .av3-card,
  .av3-send,
  .av3-book { transition: none !important; }
}

/* ==========================================================
   ALICE WIDGET V4 — always-visible docked shell
   New classes prefixed av4- ; panel reuses av3- internals.
   ========================================================== */

/* ── DOCK SHELL ──────────────────────────────────────────── */
.av4-dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  background: rgba(6, 6, 8, 0.88);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(0, 245, 255, 0.18);
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(0, 245, 255, 0.06) inset,
    0 0 40px rgba(0, 245, 255, 0.10),
    0 16px 48px rgba(0, 0, 0, 0.70);
  cursor: none;
  user-select: none;
  /* entrance animation */
  animation: av4DockIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both 0.8s;
}
@keyframes av4DockIn {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
/* scroll-triggered ambient pulse */
.av4-dock.av4-scrolled {
  animation: av4DockIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both 0s,
             av4AmbientPulse 3s ease-in-out infinite 0.6s;
}
@keyframes av4AmbientPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(0,245,255,0.06) inset, 0 0 40px rgba(0,245,255,0.10), 0 16px 48px rgba(0,0,0,0.70); }
  50%     { box-shadow: 0 0 0 1px rgba(0,245,255,0.12) inset, 0 0 60px rgba(0,245,255,0.22), 0 16px 48px rgba(0,0,0,0.70); }
}
/* when panel is open: glow the dock */
.av4-dock.av4-active {
  border-color: rgba(0, 245, 255, 0.36);
  box-shadow:
    0 0 0 1px rgba(0,245,255,0.12) inset,
    0 0 60px rgba(0,245,255,0.22),
    0 16px 48px rgba(0,0,0,0.75);
}

/* spinning conic ring around dock */
.av4-dock-ring {
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  background: conic-gradient(from 0deg, #00f5ff, transparent 30%, rgba(168,85,247,0.7), transparent 70%, #00f5ff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  animation: av4RingSpin 6s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes av4RingSpin { to { transform: rotate(360deg); } }

/* ── VIDEO AVATAR ─────────────────────────────────────────── */
.av4-dock-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.av4-dock-video {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(0,245,255,0.55);
  box-shadow: 0 0 14px rgba(0,245,255,0.30), 0 4px 12px rgba(0,0,0,0.55);
  display: block;
}
.av4-dock-live-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  background: #00ff88;
  border-radius: 50%;
  border: 2px solid #060608;
  box-shadow: 0 0 6px #00ff88;
  animation: av4LivePulse 1.8s ease-in-out infinite;
}
@keyframes av4LivePulse {
  0%,100% { transform: scale(1);    opacity: 1;    }
  50%     { transform: scale(1.28); opacity: 0.72; }
}

/* panel header video avatar */
.av4-panel-video {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(0,245,255,0.5);
  display: block;
}

/* ── INLINE DOCK INPUT ────────────────────────────────────── */
.av4-dock-form {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.av4-dock-input {
  flex: 1;
  min-width: 160px;
  max-width: 260px;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.3px;
  padding: 0;
}
.av4-dock-input::placeholder {
  color: rgba(255,255,255,0.30);
}
.av4-dock-send {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #00f5ff 0%, #00c8d4 100%);
  color: #060608;
  cursor: none;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s;
}
.av4-dock-send:hover {
  transform: scale(1.10);
  box-shadow: 0 0 14px rgba(0,245,255,0.50);
}
.av4-dock-send:active {
  transform: scale(0.92);
}

/* ── SUGGESTION CHIPS ─────────────────────────────────────── */
.av4-chips {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
  /* hidden on mobile until space allows */
}
.av4-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: rgba(0,245,255,0.06);
  border: 1px solid rgba(0,245,255,0.16);
  border-radius: 999px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.62);
  cursor: none;
  white-space: nowrap;
  transition:
    border-color 0.2s,
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.av4-chip:hover {
  border-color: rgba(0,245,255,0.40);
  background: rgba(0,245,255,0.12);
  color: #00f5ff;
  box-shadow: 0 0 10px rgba(0,245,255,0.16);
}
.av4-chip:active {
  transform: scale(0.96);
}

/* ── PANEL OVERRIDE — position above dock ─────────────────── */
.av4-panel {
  bottom: 100px !important; /* clears the dock height */
  right: 24px !important;
}

/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width: 700px) {
  .av4-dock {
    right: 50%;
    transform: translateX(50%);
    bottom: 16px;
    padding: 9px 12px 9px 9px;
    gap: 8px;
  }
  .av4-dock.av4-scrolled {
    animation: av4AmbientPulse 3s ease-in-out infinite;
  }
  .av4-chips {
    display: none; /* hidden on narrow screens */
  }
  .av4-dock-input {
    min-width: 130px;
    max-width: 170px;
  }
  .av4-panel {
    right: 0 !important;
    left: 0 !important;
    bottom: 80px !important;
    width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
  }
}

@media (max-width: 900px) and (min-width: 701px) {
  .av4-chips .av4-chip:nth-child(n+3) {
    display: none; /* show only first 2 chips on mid-size */
  }
}

/* ==========================================================
   SWARMS · 5 lanes running in parallel
   ========================================================== */
.swarms { position: relative; padding: 100px 6vw 140px; background: var(--void); overflow: hidden; }
.swarms::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 480px at 12% 25%, rgba(0,240,255,0.08), transparent 60%),
    radial-gradient(900px 480px at 88% 70%, rgba(255,0,170,0.06), transparent 60%),
    linear-gradient(180deg, transparent, rgba(0,240,255,0.025) 50%, transparent);
  pointer-events: none; z-index: 0;
}
.swarms .section-head { position: relative; z-index: 1; }
.swarms-stage {
  position: relative; z-index: 1;
  margin-top: 56px;
  border: 1px solid rgba(0, 240, 255, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(0,240,255,0.04), rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.85)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(0,240,255,0.025) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(0,240,255,0.025) 23px 24px);
  box-shadow: 0 40px 120px rgba(0,0,0,0.6), inset 0 0 80px rgba(0,240,255,0.04);
  backdrop-filter: blur(2px);
}
.swarms-meter {
  display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 1px solid rgba(0,240,255,0.12);
  font-family: var(--font-mono);
}
.swarms-meter .sm-cell {
  flex: 1 1 0; min-width: 140px;
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid rgba(0,240,255,0.08);
}
.swarms-meter .sm-cell:last-child { border-right: 0; }
.swarms-meter .sm-l { font-size: 9px; letter-spacing: 0.18em; color: var(--cyan); opacity: 0.7; text-transform: uppercase; }
.swarms-meter .sm-v { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: 0.04em; }
.swarms-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
}
.lane {
  position: relative;
  border-right: 1px solid rgba(0,240,255,0.08);
  padding: 22px 16px 18px;
  min-height: 480px;
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, hsla(var(--lane-hue), 90%, 56%, 0.04) 0%, transparent 60%);
}
.lane:last-child { border-right: 0; }
.lane::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, hsla(var(--lane-hue), 90%, 56%, 0.7), hsla(var(--lane-hue), 90%, 56%, 0));
  filter: drop-shadow(0 0 6px hsla(var(--lane-hue), 90%, 56%, 0.6));
}
.lane-head {
  display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "av id" "av name" "av role" "status status";
  gap: 4px 12px; padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.lane-avatar {
  grid-area: av; width: 44px; height: 44px; border-radius: 10px; object-fit: cover;
  border: 1px solid hsla(var(--lane-hue), 90%, 60%, 0.5);
  box-shadow: 0 0 16px hsla(var(--lane-hue), 90%, 60%, 0.25);
}
.lane-id { grid-area: id; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--muted); }
.lane-name { grid-area: name; font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1; color: #fff; letter-spacing: 0.02em; }
.lane-role { grid-area: role; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: hsla(var(--lane-hue), 90%, 70%, 1); text-transform: uppercase; }
.lane-status {
  grid-area: status; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--green);
  margin-top: 4px;
}
.lane-status .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 1.6s infinite;
}
.lane-subs {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
}
.lane-sub {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.78);
  position: relative; overflow: hidden;
}
.lane-sub.firing {
  border-color: hsla(var(--lane-hue), 90%, 60%, 0.5);
  box-shadow: inset 0 0 12px hsla(var(--lane-hue), 90%, 60%, 0.18), 0 0 12px hsla(var(--lane-hue), 90%, 60%, 0.18);
  background: hsla(var(--lane-hue), 90%, 50%, 0.06);
}
.lane-sub .sub-name { flex: 1; text-transform: lowercase; }
.lane-sub .sub-bar {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: hsla(var(--lane-hue), 90%, 60%, 0.85);
  filter: drop-shadow(0 0 4px hsla(var(--lane-hue), 90%, 60%, 0.7));
  width: 0; transition: width 0.6s linear;
}
.lane-sub .sub-tag {
  font-size: 8px; padding: 2px 6px; border-radius: 3px;
  background: hsla(var(--lane-hue), 90%, 50%, 0.18);
  color: hsla(var(--lane-hue), 90%, 80%, 1);
  letter-spacing: 0.16em;
}
.lane-stream {
  position: relative; height: 90px; margin-top: 4px;
  border: 1px solid rgba(0,240,255,0.06);
  border-radius: 6px;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
}
.lane-stream::before {
  content: "// LIVE_LOG"; position: absolute; top: 4px; left: 8px;
  color: var(--cyan); opacity: 0.6; font-size: 8px; letter-spacing: 0.18em;
}
.lane-stream-row {
  position: absolute; left: 8px; right: 8px;
  color: hsla(var(--lane-hue), 90%, 78%, 0.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: streamUp 4s linear forwards;
  opacity: 0;
}
@keyframes streamUp {
  0%   { opacity: 0; transform: translateY(86px); }
  10%  { opacity: 0.95; }
  100% { opacity: 0; transform: translateY(18px); }
}
.lane-out {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono);
}
.lane-out .lo-l { font-size: 9px; letter-spacing: 0.18em; color: var(--cyan); opacity: 0.7; }
.lane-out .lo-v {
  font-family: var(--font-display); font-size: 32px; font-weight: 800;
  color: hsla(var(--lane-hue), 90%, 75%, 1); letter-spacing: 0.02em; line-height: 1;
}
.lane-out .lo-v::before {
  content: attr(data-shipped) " ";
  color: #fff;
}
@media (max-width: 1100px) {
  .swarms-grid { grid-template-columns: repeat(2, 1fr); }
  .lane:nth-child(2) { border-right: 0; }
  .lane:nth-child(2n) { border-right: 0; }
  .lane:nth-child(2n+1) { border-right: 1px solid rgba(0,240,255,0.08); }
}
@media (max-width: 600px) {
  .swarms { padding: 70px 4vw 100px; }
  .swarms-grid { grid-template-columns: 1fr; }
  .lane { border-right: 0 !important; border-bottom: 1px solid rgba(0,240,255,0.08); min-height: auto; }
  .lane:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lane-stream-row { animation: none; opacity: 1; transform: none; position: static; }
  .lane-status .dot { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   APEX MOTION · site-wide upgrade layer (motion-kit v1)
   Adds card hover lift + magenta-rim glow to existing cards.
   Uses motion-kit tokens; never overrides site palette.
   ════════════════════════════════════════════════════════════ */
.kpi, .fp-vid, .reel, .agent-card, .opsk, .pillar, .tk-card,
.stack-item, .pipe-step, .ic-cell, .lane,
.scale-node, .alice-pt, .alice-points li,
.bpanel-content, .reel-tk-card {
  transition:
    transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .kpi:hover, .fp-vid:hover, .agent-card:hover, .opsk:hover,
  .pillar:hover, .tk-card:hover, .stack-item:hover, .pipe-step:hover,
  .ic-cell:hover, .scale-node:hover, .reel-tk-card:hover {
    transform: translateY(-1px);
    box-shadow:
      0 0 0 1px rgba(236, 72, 153, 0.35),
      0 8px 28px rgba(0, 240, 255, 0.12);
  }
  .reel:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow:
      0 0 0 1px rgba(236, 72, 153, 0.35),
      0 12px 32px rgba(0, 240, 255, 0.18);
  }
}
/* Mobile: no transform (touch devices) */
@media (hover: none) {
  .kpi:hover, .fp-vid:hover, .reel:hover, .agent-card:hover,
  .opsk:hover, .pillar:hover, .tk-card:hover, .stack-item:hover,
  .pipe-step:hover, .ic-cell:hover, .scale-node:hover { transform: none; }
}

/* Honor motion-kit reveal even when site has its own .reveal-up */
[data-apex-reveal] { will-change: opacity, transform; }
[data-apex-words] { will-change: opacity; }

/* HERO BOTTOM FADE — kill the visible video strip below "Efficiency." */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22vh;
  pointer-events: none;
  z-index: 6;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 35%,
    rgba(0, 0, 0, 0.85) 75%,
    #000 100%
  );
}
.hero-hint {
  z-index: 7 !important;
}

/* ==========================================================
   ALICE PANEL · DEFINITIVE OPEN STATE OVERRIDE (P0 FIX 2026-04-30)
   Older V2/V3/V4 rules across alice-panel + av3-panel + av4-panel
   selectors fight each other, leaving the panel visibility:hidden
   even with class="open av3-open". This block wins the cascade
   by id + multiple class specificity AND last-source-order.
   ========================================================== */
#alice-panel.alice-panel,
#alice-panel.av3-panel,
#alice-panel.av4-panel {
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
  transition:
    transform 0.32s cubic-bezier(0.16,1,0.3,1),
    opacity 0.32s cubic-bezier(0.16,1,0.3,1),
    visibility 0.32s;
}
#alice-panel.alice-panel.open,
#alice-panel.alice-panel.av3-open,
#alice-panel.av3-panel.open,
#alice-panel.av3-panel.av3-open,
#alice-panel.av4-panel.open,
#alice-panel.av4-panel.av3-open,
#alice-panel.av4-panel.av5-open {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* ============================================================
   MANIFESTO · viral upgrade — cyan, bigger, longer (J directive)
   ============================================================ */
.manifesto-h2.manifesto-viral {
  font-size: clamp(44px, 7.5vw, 116px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 28px !important;
}
.manifesto-h2.manifesto-viral .cyan,
.manifesto-sub.manifesto-viral-sub .cyan {
  color: #00f0ff !important;
  background: linear-gradient(135deg, #00f0ff 0%, #5be8ff 60%, #00f0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(0,240,255,0.45));
  font-style: italic;
  font-weight: 700;
}
.manifesto-sub.manifesto-viral-sub {
  font-size: clamp(17px, 1.55vw, 22px) !important;
  line-height: 1.62 !important;
  max-width: 1080px !important;
  color: rgba(255,255,255,0.78) !important;
}
@media (max-width: 700px) {
  .manifesto-h2.manifesto-viral { font-size: clamp(34px, 9vw, 64px) !important; }
  .manifesto-sub.manifesto-viral-sub { font-size: 15px !important; line-height: 1.55 !important; }
}

/* Hero hint pinned absolute inside hero (kill block-level gap before marquee) */
.hero { padding-bottom: 0 !important; }
.hero .hero-hint {
  position: absolute !important;
  left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Welcome message styling — shown by default on first open */
#alice-body .alice-welcome {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(0,240,255,0.08), rgba(0,240,255,0.02));
  border: 1px solid rgba(0,240,255,0.14);
  border-radius: 12px;
  margin: 8px 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.1px;
}
#alice-body .alice-welcome strong { color: #00f0ff; font-weight: 600; }

/* ==========================================================
   ALICE PANEL · IN-PANEL SUGGESTION CHIPS (av3-chip)
   Previously unstyled → rendered as default gray buttons.
   Cyber theme: cyan border, hover pop, mono caps tracking.
   ========================================================== */
#alice-panel .av3-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 16px 4px; flex-shrink: 0;
}
#alice-panel .av3-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: rgba(0,240,255,0.05);
  border: 1px solid rgba(0,240,255,0.22);
  border-radius: 999px;
  color: rgba(0,240,255,0.92);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  appearance: none;
  -webkit-appearance: none;
}
#alice-panel .av3-chip:hover {
  background: rgba(0,240,255,0.14);
  border-color: rgba(0,240,255,0.55);
  color: #00f0ff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(0,240,255,0.45);
}
#alice-panel .av3-chip:active {
  transform: translateY(0) scale(0.98);
}
#alice-panel .av3-chip::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(0,240,255,0.6);
  box-shadow: 0 0 6px rgba(0,240,255,0.6);
}

/* Mobile: panel chips wrap nicely */
@media (max-width: 640px) {
  #alice-panel .av3-chips { padding: 10px 12px 4px; gap: 5px; }
  #alice-panel .av3-chip { font-size: 10.5px; padding: 6px 10px; }
}

/* User message bubble — right-aligned */
#alice-body .alice-msg-user,
#alice-body [data-role="user"] {
  align-self: flex-end;
  max-width: 78%;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px 12px 2px 12px;
  color: rgba(255,255,255,0.92);
  font-size: 13.5px;
  line-height: 1.45;
}
#alice-body .alice-msg-assistant,
#alice-body [data-role="assistant"] {
  align-self: flex-start;
  max-width: 92%;
  padding: 12px 14px;
  background: rgba(0,240,255,0.04);
  border: 1px solid rgba(0,240,255,0.18);
  border-radius: 12px 12px 12px 2px;
  color: rgba(255,255,255,0.92);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ==========================================================
   GLOBAL PERFORMANCE HARDENING
   Applied last — no specificity fights with component styles.
   ========================================================== */

/* 1. Font rendering */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. Smooth scroll */
html { scroll-behavior: smooth; }

/* 3. Overscroll lock — prevent rubber-band on desktop */
body { overscroll-behavior-y: none; }

/* 4. Off-screen media — lazy paint via content-visibility */
img, video { content-visibility: auto; }

/* 5. GPU compositing — force scroll containers onto own compositor layer.
      NOT applied to body (documented trap: breaks position:fixed for FAB). */
.reel-grid,
.swp-frame,
.jrow-scroll {
  transform: translateZ(0);
  image-rendering: -webkit-optimize-contrast;
}

/* 6. Mobile perf — strip expensive effects under 700px */
@media (max-width: 700px) {
  /* Kill heavy backdrop-filter blurs on glassmorphism cards */
  .glass-card,
  .reel,
  .fp-vid,
  .bpanel-vid,
  .kpi,
  .manifesto-inner,
  .swp-frame,
  .jrow-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Drop expensive hover box-shadows — no hover on touch anyway */
  .reel:hover,
  .fp-vid:hover {
    box-shadow: none !important;
  }

  /* Kill any remaining filter:blur() on non-critical elements */
  .bg-blur,
  .noise-overlay,
  .hero-bg-blur {
    filter: none !important;
  }
}

/* 7. Reduced-motion accessibility — kill ALL animations when OS preference set */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   ALICE CHAT · TIER-1 OVERRIDE BLOCK · v4.5
   Final cascade authority for #alice-panel.av4-panel.
   Wins over every prior alice-panel/av3/av4 rule (high specificity + !important).
   Layout: clean grid, predictable heights, mobile-first touch targets.
   ========================================================== */

/* Panel container — desktop 440×680 float, mobile near-fullscreen */
body #alice-panel.alice-panel.av4-panel {
  position: fixed !important;
  right: 24px !important;
  bottom: 96px !important;
  width: min(440px, calc(100vw - 32px)) !important;
  max-width: 440px !important;
  height: min(720px, calc(100dvh - 140px)) !important;
  max-height: 720px !important;
  background:
    linear-gradient(180deg, rgba(0,229,255,0.025), rgba(0,229,255,0) 240px),
    repeating-linear-gradient(0deg, rgba(0,229,255,0.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #04070b 0%, #02030a 100%) !important;
  border: 1px solid rgba(0,229,255,0.32) !important;
  border-radius: 14px !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.85),
    0 0 0 1px rgba(0,229,255,0.05) inset,
    0 0 80px rgba(0,229,255,0.10),
    0 0 1px rgba(0,229,255,0.5) !important;
  display: grid !important;
  grid-template-areas:
    "head"
    "body"
    "chips"
    "composer"
    "foot" !important;
  grid-template-rows: auto 1fr auto auto auto !important;
  overflow: hidden !important;
  z-index: 9998 !important;
  padding: 0 !important;
  transform: translateY(20px) scale(0.97) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.32s ease,
    visibility 0s 0.42s !important;
  font-family: var(--font-display, system-ui, sans-serif) !important;
}

/* Grid area assignment for re-ordered children */
body #alice-panel.av4-panel > .av3-header { grid-area: head !important; }
body #alice-panel.av4-panel > #alice-body,
body #alice-panel.av4-panel > .alice-body.av3-body { grid-area: body !important; }
body #alice-panel.av4-panel > .av3-chips { grid-area: chips !important; }
body #alice-panel.av4-panel > .av3-input-row { grid-area: composer !important; }
body #alice-panel.av4-panel > .av3-foot { grid-area: foot !important; }

/* HUD corner brackets */
body #alice-panel.av4-panel > .av3-header::after,
body #alice-panel.av4-panel .av3-foot::after {
  content: "" !important;
  position: absolute !important;
  width: 14px !important; height: 14px !important;
  border: 1px solid rgba(0,229,255,0.65) !important;
  pointer-events: none !important;
}
body #alice-panel.av4-panel > .av3-header::after {
  top: 8px !important; left: 8px !important;
  border-right: 0 !important; border-bottom: 0 !important;
}
body #alice-panel.av4-panel .av3-foot::after {
  bottom: 8px !important; right: 8px !important;
  border-left: 0 !important; border-top: 0 !important;
}
body #alice-panel.alice-panel.av4-panel.av3-open {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition:
    transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.28s ease,
    visibility 0s 0s !important;
}

/* Mobile: near-fullscreen sheet, more breathing room */
@media (max-width: 720px) {
  body #alice-panel.alice-panel.av4-panel {
    right: 6px !important;
    left: 6px !important;
    bottom: 70px !important;
    top: 60px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 18px !important;
  }
}

/* ── HEADER — compact single row + close × ─────────────── */
body #alice-panel.av4-panel .av3-header {
  display: grid !important;
  grid-template-columns: 40px 1fr auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  background: linear-gradient(180deg, rgba(0,229,255,0.05), rgba(0,229,255,0)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  flex-shrink: 0 !important;
  min-height: 64px !important;
}
body #alice-panel.av4-panel .av3-avatar-wrap {
  position: relative !important;
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,229,255,0.45) !important;
  box-shadow: 0 0 16px rgba(0,229,255,0.25) !important;
  flex-shrink: 0 !important;
}
body #alice-panel.av4-panel .av4-panel-video {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
body #alice-panel.av4-panel .av3-avatar-ring { display: none !important; }
body #alice-panel.av4-panel .av3-header-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
body #alice-panel.av4-panel .av3-name {
  font-family: var(--font-display, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #fff !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
}
body #alice-panel.av4-panel .av3-ver {
  font-family: var(--font-mono, monospace) !important;
  font-size: 9px !important;
  color: rgba(0,229,255,0.85) !important;
  background: rgba(0,229,255,0.10) !important;
  border: 1px solid rgba(0,229,255,0.3) !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  letter-spacing: 0.12em !important;
  font-weight: 500 !important;
}
body #alice-panel.av4-panel .av3-subtitle {
  font-family: var(--font-mono, monospace) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.2em !important;
  color: rgba(255,255,255,0.45) !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body #alice-panel.av4-panel .av3-online-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 9px !important;
  background: rgba(74,222,128,0.10) !important;
  border: 1px solid rgba(74,222,128,0.30) !important;
  border-radius: 999px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  color: #4ade80 !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
body #alice-panel.av4-panel .av3-online-dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: #4ade80 !important;
  box-shadow: 0 0 8px #4ade80 !important;
  animation: alicePulse 1.6s ease-in-out infinite !important;
}
@keyframes alicePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
body #alice-panel.av4-panel .av3-online-pill .av3-lat-label,
body #alice-panel.av4-panel #alice-latency::after { display: none !important; }

/* Visible close × — top-right of panel, 36×36 hit target */
body #alice-panel.av4-panel::before {
  content: "×" !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 32px !important; height: 32px !important;
  display: grid !important;
  place-items: center !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.55) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 50% !important;
  line-height: 1 !important;
  z-index: 5 !important;
  cursor: pointer !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
  pointer-events: auto !important;
}
body #alice-panel.av4-panel:not(.av3-open)::before { display: none !important; }
body #alice-panel.av4-panel.av3-open .av3-online-pill { margin-right: 40px !important; }

/* Hide any stray legacy header X buttons that may appear elsewhere */
body #alice-panel.av4-panel .av3-close,
body #alice-panel.av4-panel .alice-h-close,
body #alice-panel.av4-panel [data-close] { display: none !important; }

/* Mobile header tweaks */
@media (max-width: 480px) {
  body #alice-panel.av4-panel .av3-header {
    grid-template-columns: 36px 1fr auto !important;
    padding: 12px 14px !important;
    min-height: 60px !important;
  }
  body #alice-panel.av4-panel .av3-avatar-wrap { width: 36px !important; height: 36px !important; }
  body #alice-panel.av4-panel .av3-name { font-size: 13.5px !important; }
  body #alice-panel.av4-panel .av3-subtitle { font-size: 8.5px !important; letter-spacing: 0.18em !important; }
  body #alice-panel.av4-panel .av3-online-pill { padding: 4px 7px !important; font-size: 8.5px !important; gap: 4px !important; }
  body #alice-panel.av4-panel.av3-open .av3-online-pill { margin-right: 36px !important; }
}

/* ── CHIPS — single row horizontal scroll, sits ABOVE composer, fade edges ── */
body #alice-panel.av4-panel .av3-chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  padding: 8px 14px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  border-top: 1px solid rgba(0,229,255,0.10) !important;
  border-bottom: 0 !important;
  background:
    linear-gradient(180deg, rgba(0,229,255,0.025), rgba(0,229,255,0.01)) !important;
  flex-shrink: 0 !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%) !important;
  position: relative !important;
}
body #alice-panel.av4-panel .av3-chips::before {
  content: "▸ SUGGEST" !important;
  position: absolute !important;
  top: -7px !important; left: 14px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 7.5px !important;
  letter-spacing: 0.22em !important;
  color: rgba(0,229,255,0.5) !important;
  background: #04070b !important;
  padding: 0 6px !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
body #alice-panel.av4-panel .av3-chips::-webkit-scrollbar { display: none !important; }
body #alice-panel.av4-panel .av3-chip {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 13px !important;
  background: rgba(0,229,255,0.05) !important;
  border: 1px solid rgba(0,229,255,0.22) !important;
  border-radius: 999px !important;
  color: rgba(0,229,255,0.92) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  scroll-snap-align: start !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
  min-height: 32px !important;
}
body #alice-panel.av4-panel .av3-chip::before {
  content: "" !important;
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important;
  background: rgba(0,229,255,0.7) !important;
  box-shadow: 0 0 6px rgba(0,229,255,0.6) !important;
  flex-shrink: 0 !important;
}
body #alice-panel.av4-panel .av3-chip:hover {
  background: rgba(0,229,255,0.14) !important;
  border-color: rgba(0,229,255,0.55) !important;
  color: #00f0ff !important;
  transform: translateY(-1px) !important;
}
body #alice-panel.av4-panel .av3-chip:active { transform: translateY(0) scale(0.97) !important; }
@media (max-width: 480px) {
  body #alice-panel.av4-panel .av3-chips { padding: 10px 14px !important; gap: 6px !important; }
  body #alice-panel.av4-panel .av3-chip { font-size: 10.5px !important; padding: 7px 11px !important; }
}

/* ── BODY — messages container, scrollable, comfortable padding ── */
body #alice-panel.av4-panel .alice-body.av3-body,
body #alice-panel.av4-panel #alice-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 14px 16px 8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0,229,255,0.25) transparent !important;
  scroll-behavior: smooth !important;
}
body #alice-panel.av4-panel #alice-body::-webkit-scrollbar { width: 5px !important; }
body #alice-panel.av4-panel #alice-body::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.25) !important; border-radius: 3px !important; }

/* Welcome bubble */
body #alice-panel.av4-panel #alice-body .alice-welcome {
  margin: 0 !important;
  padding: 14px 16px !important;
  background: linear-gradient(135deg, rgba(0,229,255,0.08), rgba(0,229,255,0.02)) !important;
  border: 1px solid rgba(0,229,255,0.18) !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.86) !important;
}
body #alice-panel.av4-panel #alice-body .alice-welcome strong {
  color: #00f0ff !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* Cyber message bubbles — user (right plain) + alice (left HUD-card) */
body #alice-panel.av4-panel #alice-body .msg {
  max-width: 92% !important;
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  word-wrap: break-word !important;
  animation: aliceMsgIn 0.32s cubic-bezier(0.2,0.8,0.2,1) both !important;
  position: relative !important;
}
@keyframes aliceMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
body #alice-panel.av4-panel #alice-body .msg.you,
body #alice-panel.av4-panel #alice-body .msg.user {
  align-self: flex-end !important;
  max-width: 80% !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px 12px 2px 12px !important;
  color: rgba(255,255,255,0.95) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 12.5px !important;
}
body #alice-panel.av4-panel #alice-body .msg.alice,
body #alice-panel.av4-panel #alice-body .msg.assistant {
  align-self: flex-start !important;
  background:
    linear-gradient(180deg, rgba(0,229,255,0.06) 0%, rgba(0,229,255,0.02) 100%),
    repeating-linear-gradient(0deg, rgba(0,229,255,0.015) 0 1px, transparent 1px 4px) !important;
  border: 1px solid rgba(0,229,255,0.32) !important;
  border-radius: 4px !important;
  color: rgba(225,245,255,0.92) !important;
  font-family: var(--font-display, system-ui, sans-serif) !important;
  box-shadow:
    0 0 0 1px rgba(0,229,255,0.04) inset,
    0 4px 18px rgba(0,229,255,0.06),
    inset 2px 0 0 rgba(0,229,255,0.55) !important;
  letter-spacing: 0.005em !important;
}
/* Bold = neon cyan, slightly larger as terminal headers */
body #alice-panel.av4-panel #alice-body .msg.alice strong,
body #alice-panel.av4-panel #alice-body .msg.assistant strong {
  color: #4df0ff !important;
  font-weight: 700 !important;
  text-shadow: 0 0 12px rgba(0,229,255,0.45), 0 0 24px rgba(0,229,255,0.18) !important;
  letter-spacing: 0.04em !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
}
/* When the bold leads with ▸ it's a section header — extra spacing */
body #alice-panel.av4-panel #alice-body .msg.alice em,
body #alice-panel.av4-panel #alice-body .msg.assistant em {
  color: rgba(255,107,157,0.88) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}
/* Bullet character styling */
body #alice-panel.av4-panel #alice-body .msg.alice {
  white-space: normal !important;
}
/* Code-like metric tokens (numbers next to • bullets render with mono feel via line-break) */
body #alice-panel.av4-panel #alice-body .cursor-blink {
  display: inline-block !important;
  color: #00f0ff !important;
  animation: aliceCursor 0.85s steps(2) infinite !important;
  margin-left: 1px !important;
}
@keyframes aliceCursor { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* Typing indicator dots */
body #alice-panel.av4-panel #alice-body .av3-typing {
  display: inline-flex !important;
  gap: 4px !important;
  align-items: center !important;
}
body #alice-panel.av4-panel #alice-body .av3-typing span {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: rgba(0,229,255,0.7) !important;
  animation: aliceDot 1.2s ease-in-out infinite !important;
}
body #alice-panel.av4-panel #alice-body .av3-typing span:nth-child(2) { animation-delay: 0.15s !important; }
body #alice-panel.av4-panel #alice-body .av3-typing span:nth-child(3) { animation-delay: 0.30s !important; }
@keyframes aliceDot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ── COMPOSER — grid: mic | input | send (BOOK removed) ── */
body #alice-panel.av4-panel .av3-input-row {
  display: grid !important;
  grid-template-columns: 38px 1fr 44px !important;
  gap: 8px !important;
  padding: 12px 14px 14px !important;
  border-top: 1px solid rgba(0,229,255,0.14) !important;
  background:
    linear-gradient(180deg, rgba(0,229,255,0.025), rgba(0,229,255,0.005)),
    rgba(0,0,0,0.35) !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
body #alice-panel.av4-panel .av3-input-row::before {
  content: ">" !important;
  position: absolute !important;
  left: 60px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 12px !important;
  color: rgba(0,229,255,0.55) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
body #alice-panel.av4-panel .av3-mic,
body #alice-panel.av4-panel .av3-send {
  width: 38px !important; height: 38px !important;
  display: grid !important;
  place-items: center !important;
  background:
    linear-gradient(180deg, rgba(0,229,255,0.10), rgba(0,229,255,0.02)) !important;
  border: 1px solid rgba(0,229,255,0.42) !important;
  border-radius: 8px !important;
  color: #00f0ff !important;
  cursor: pointer !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 1px rgba(0,229,255,0.05) inset, 0 4px 14px rgba(0,229,255,0.10) !important;
}
body #alice-panel.av4-panel .av3-send {
  background: linear-gradient(135deg, #00f0ff 0%, #00aacc 100%) !important;
  color: #001218 !important;
  border-color: rgba(0,229,255,0.85) !important;
  box-shadow: 0 4px 18px rgba(0,229,255,0.45), inset 0 0 0 1px rgba(255,255,255,0.18) !important;
}
body #alice-panel.av4-panel .av3-send:hover {
  filter: brightness(1.12) !important;
  box-shadow: 0 6px 24px rgba(0,229,255,0.65), inset 0 0 0 1px rgba(255,255,255,0.25) !important;
}
body #alice-panel.av4-panel .av3-mic:hover,
body #alice-panel.av4-panel .av3-send:hover {
  background: rgba(0,229,255,0.16) !important;
  border-color: rgba(0,229,255,0.55) !important;
  transform: translateY(-1px) !important;
}
body #alice-panel.av4-panel .av3-mic:active,
body #alice-panel.av4-panel .av3-send:active { transform: scale(0.92) !important; }
body #alice-panel.av4-panel .av3-mic.listening {
  background: rgba(255,46,99,0.18) !important;
  border-color: rgba(255,107,157,0.55) !important;
  color: #ff6b9d !important;
  animation: aliceMicPulse 1.2s ease-in-out infinite !important;
}
@keyframes aliceMicPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,107,157,0.4); } 50% { box-shadow: 0 0 0 8px rgba(255,107,157,0); } }

body #alice-panel.av4-panel .av3-input,
body #alice-panel.av4-panel #alice-q {
  width: 100% !important;
  min-height: 38px !important;
  max-height: 100px !important;
  padding: 9px 14px 9px 28px !important;
  background:
    linear-gradient(180deg, rgba(0,229,255,0.02), rgba(0,0,0,0.55)) !important;
  border: 1px solid rgba(0,229,255,0.22) !important;
  border-radius: 8px !important;
  color: #e9fcff !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  resize: none !important;
  outline: none !important;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
  box-sizing: border-box !important;
}
body #alice-panel.av4-panel .av3-input::placeholder,
body #alice-panel.av4-panel #alice-q::placeholder {
  color: rgba(255,255,255,0.35) !important;
  letter-spacing: 0.04em !important;
}
body #alice-panel.av4-panel .av3-input:focus,
body #alice-panel.av4-panel #alice-q:focus {
  border-color: rgba(0,229,255,0.55) !important;
  background: rgba(0,0,0,0.6) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,0.10) !important;
}

/* BOOK CALL — removed per J directive (chat is the CTA) */
body #alice-panel.av4-panel .av3-book,
body #alice-panel.av4-panel .av3-book-arrow,
body #alice-panel.av4-panel .alice-book { display: none !important; }

/* Mobile composer — single row, mic|input|send only */
@media (max-width: 480px) {
  body #alice-panel.av4-panel .av3-input-row {
    grid-template-columns: 36px 1fr 40px !important;
    gap: 7px !important;
    padding: 10px 12px 12px !important;
  }
  body #alice-panel.av4-panel .av3-input-row::before { left: 56px !important; }
  body #alice-panel.av4-panel .av3-mic,
  body #alice-panel.av4-panel .av3-send { width: 36px !important; height: 36px !important; }
  body #alice-panel.av4-panel .av3-input,
  body #alice-panel.av4-panel #alice-q { font-size: 12.5px !important; padding: 8px 12px 8px 26px !important; min-height: 36px !important; }
}

/* ── FOOTER status line — single line, secondary color ── */
body #alice-panel.av4-panel .av3-foot {
  padding: 8px 16px 12px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.16em !important;
  color: rgba(255,255,255,0.32) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-top: 1px solid rgba(255,255,255,0.03) !important;
  background: rgba(0,0,0,0.25) !important;
  flex-shrink: 0 !important;
}
body #alice-panel.av4-panel .av3-foot-inner {
  display: inline-block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 480px) {
  body #alice-panel.av4-panel .av3-foot { font-size: 8.5px !important; letter-spacing: 0.14em !important; padding: 7px 12px 10px !important; }
}

/* ── KILL legacy duplication — hide old chat surface elements ── */
body #alice-panel.av4-panel .alice-stats,
body #alice-panel.av4-panel .alice-pills,
body #alice-panel.av4-panel .alice-brands,
body #alice-panel.av4-panel .alice-questions,
body #alice-panel.av4-panel .alice-vetted,
body #alice-panel.av4-panel .powered { display: none !important; }

/* When panel is OPEN, hide dock contents to prevent visual bleed-through.
   JS toggles `body.alice-panel-open` so we don't depend on sibling order. */
body.alice-panel-open #alice-fab .av4-dock-form,
body.alice-panel-open #alice-fab .av4-chips,
body.alice-panel-open #alice-fab .av4-dock-form input,
body.alice-panel-open #alice-fab .av4-dock-send {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: opacity 0.18s ease, visibility 0s 0.18s !important;
}
body.alice-panel-open #alice-fab {
  pointer-events: none !important;
}
body.alice-panel-open #alice-fab .av4-dock-avatar,
body.alice-panel-open #alice-fab .av4-dock-ring { display: none !important; }

/* ==========================================================
   JETR Campaign Manager — INNER carousel rail (lm-rail)
   Replaces single static lm-camp block with horizontal scroll
   of 6 dated reel-tiles; same visual language as jrow-scroll
   ========================================================== */
.lm-campaign-rail { padding: 14px; }
.lm-campaign-rail .lm-camp-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono, monospace);
}
.lm-campaign-rail .lm-camp-name {
  font-size: 11px;
  color: hsl(var(--dive-hue, 195) 100% 80%);
  letter-spacing: 0.14em; font-weight: 600;
}
.lm-campaign-rail .lm-pos {
  color: rgba(255,255,255,0.45);
  margin-left: 8px; font-weight: 400; letter-spacing: 0.08em;
}
.lm-rail-meta {
  font-size: 10px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5); text-transform: uppercase;
}
.lm-rail {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  padding: 14px 4px 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
  transform: translateZ(0);
}
.lm-rail::-webkit-scrollbar { height: 6px; }
.lm-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
.lm-rail-card {
  flex: 0 0 200px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.lm-rail-card:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--dive-hue, 195) 80% 55% / 0.45);
  box-shadow: 0 8px 24px hsl(var(--dive-hue, 195) 80% 50% / 0.18);
}
.lm-rail-card-active {
  border-color: hsl(var(--dive-hue, 195) 100% 60% / 0.55);
  box-shadow: 0 0 0 1px hsl(var(--dive-hue, 195) 100% 60% / 0.25), 0 8px 24px hsl(var(--dive-hue, 195) 80% 50% / 0.22);
}
.lm-rail-thumb {
  position: relative;
  aspect-ratio: 9/16;
  background: #0a0a0a;
  overflow: hidden;
}
.lm-rail-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lm-rail-pill {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 8px; letter-spacing: 0.2em;
  padding: 3px 7px; border-radius: 4px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: #fff; text-transform: uppercase; font-weight: 600;
}
.lm-rail-pill-ready { background: rgba(74,222,128,0.18); color: #4ade80; border: 1px solid rgba(74,222,128,0.4); }
.lm-rail-pill-render { background: rgba(255,200,0,0.18); color: #fcd34d; border: 1px solid rgba(252,211,77,0.4); }
.lm-rail-pill-sched { background: rgba(120,180,255,0.18); color: #93c5fd; border: 1px solid rgba(147,197,253,0.4); }
.lm-rail-body {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono, monospace);
}
.lm-rail-name {
  font-family: var(--font-display, sans-serif);
  font-size: 16px; font-weight: 700; letter-spacing: 0.04em;
  color: #fff;
}
.lm-rail-sub {
  font-size: 10px; color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.lm-rail-score-row {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.lm-rail-score {
  font-family: var(--font-display, sans-serif);
  font-size: 18px; font-weight: 800;
  color: var(--green, #4ade80);
  text-shadow: 0 0 10px rgba(74,222,128,0.4);
  line-height: 1;
}
.lm-rail-bar {
  flex: 1; height: 3px; background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden;
}
.lm-rail-bar > div {
  height: 100%; width: var(--w, 50%);
  background: linear-gradient(90deg, var(--green, #4ade80), hsl(var(--dive-hue, 195) 100% 70%));
  border-radius: 2px;
  box-shadow: 0 0 8px var(--green, #4ade80);
}
.lm-rail-foot {
  display: flex; justify-content: space-between;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 4px; padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.lm-rail-foot .green { color: var(--green, #4ade80); font-weight: 600; }
@media (max-width: 700px) {
  .lm-rail-card { flex: 0 0 160px; }
  .lm-rail-name { font-size: 14px; }
  .lm-rail-score { font-size: 16px; }
}

/* ==========================================================
   THE 100× ENGINE — Luna persona infinite reels horizontal scroll
   ========================================================== */
.engine100x {
  padding: 96px 32px 80px;
  max-width: 1480px;
  margin: 0 auto;
  position: relative;
}
.engine100x .section-head { max-width: 720px; margin-bottom: 36px; }
.e100-rail-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
}
.e100-rail-wrap::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(800px 200px at 20% -20%, rgba(0,229,255,0.06), transparent 70%);
  pointer-events: none;
}
.e100-rail-meta {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono, monospace);
  font-size: 11px; letter-spacing: 0.14em;
  margin-bottom: 16px; position: relative; z-index: 1;
}
.e100-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(0,229,255,0.85); text-transform: uppercase;
}
.e100-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 8px #4ade80;
  animation: e100Pulse 1.6s ease-in-out infinite;
}
@keyframes e100Pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.e100-stats { color: rgba(255,255,255,0.55); text-transform: uppercase; }
.e100-rail {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 4px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,0.25) transparent;
  transform: translateZ(0);
  position: relative; z-index: 1;
}
.e100-rail::-webkit-scrollbar { height: 6px; }
.e100-rail::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.25); border-radius: 3px; }
.e100-card {
  flex: 0 0 180px;
  border-radius: 12px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.08);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.e100-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,229,255,0.5);
  box-shadow: 0 10px 28px rgba(0,229,255,0.18);
}
.e100-thumb {
  position: relative;
  aspect-ratio: 9/16;
  overflow: hidden;
  background: #0a0a0a;
}
.e100-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.e100-pill {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 8px; letter-spacing: 0.2em;
  padding: 3px 7px; border-radius: 4px;
  text-transform: uppercase; font-weight: 700;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.e100-pill.live { background: rgba(255,46,99,0.22); color: #ff6b9d; border: 1px solid rgba(255,107,157,0.5); }
.e100-pill.ready { background: rgba(74,222,128,0.18); color: #4ade80; border: 1px solid rgba(74,222,128,0.4); }
.e100-pill.render { background: rgba(252,211,77,0.18); color: #fcd34d; border: 1px solid rgba(252,211,77,0.4); }
.e100-pill.sched { background: rgba(147,197,253,0.18); color: #93c5fd; border: 1px solid rgba(147,197,253,0.4); }
.e100-pill.queue { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.18); }
.e100-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px;
  font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: 0.14em;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.e100-num { color: rgba(255,255,255,0.55); text-transform: uppercase; }
.e100-score {
  color: var(--green, #4ade80);
  font-weight: 700; font-size: 12px;
  text-shadow: 0 0 6px rgba(74,222,128,0.4);
}
.e100-foot {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 14px; position: relative; z-index: 1;
}
.e100-foot .r-pill {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.7); text-transform: uppercase;
}
.e100-foot .r-pill .ok { color: var(--green, #4ade80); margin-left: 4px; font-weight: 700; }
@media (max-width: 700px) {
  .engine100x { padding: 64px 16px 56px; }
  .e100-rail-wrap { padding: 16px 14px 12px; }
  .e100-card { flex: 0 0 150px; }
  .e100-rail-meta { font-size: 10px; letter-spacing: 0.1em; }
}

/* ===========================================================
   MARQUEE PRO · S-tier pills + stats (2026-05-01 redesign)
   =========================================================== */
.band-marquee.band-marquee-pro {
  height: 64px;
  background: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(2,4,12,0.88) 50%, rgba(0,0,0,0.92) 100%);
  border-top: 1px solid rgba(0,229,255,0.15);
  border-bottom: 1px solid rgba(0,229,255,0.15);
}
.band-marquee-pro .marquee-track {
  gap: 22px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  color: rgba(255,255,255,0.85);
  animation-duration: 48s;
}
.band-marquee-pro .marquee-track .mq-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.band-marquee-pro .marquee-track .mq-pill.mq-live {
  color: #22ff88;
  border-color: rgba(34,255,136,0.35);
  background: rgba(34,255,136,0.08);
}
.band-marquee-pro .marquee-track .mq-pill.mq-cyan {
  color: #00e5ff;
  border-color: rgba(0,229,255,0.35);
  background: rgba(0,229,255,0.06);
}
.band-marquee-pro .marquee-track .mq-pill.mq-green {
  color: #34d399;
  border-color: rgba(52,211,153,0.32);
  background: rgba(52,211,153,0.07);
}
.band-marquee-pro .marquee-track .mq-pill.mq-magenta {
  color: #f472b6;
  border-color: rgba(244,114,182,0.32);
  background: rgba(244,114,182,0.07);
}
.band-marquee-pro .marquee-track .mq-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}
.band-marquee-pro .marquee-track .mq-dot-pulse { animation: mq-pulse 1.6s ease-in-out infinite; }
@keyframes mq-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.band-marquee-pro .marquee-track .mq-stat {
  color: rgba(255,255,255,0.62);
  font-size: 13px;
  font-weight: 400;
  flex-shrink: 0;
}
.band-marquee-pro .marquee-track .mq-stat b {
  color: #fff;
  font-weight: 700;
  font-feature-settings: "tnum";
}
.band-marquee-pro .marquee-track .mq-sep {
  color: rgba(0,229,255,0.35);
  font-weight: 400;
  flex-shrink: 0;
}
/* Override the rainbow-color rules from old marquee for this variant */
.band-marquee-pro .marquee-track span:nth-child(4n+1),
.band-marquee-pro .marquee-track span:nth-child(4n+2),
.band-marquee-pro .marquee-track span:nth-child(4n+3),
.band-marquee-pro .marquee-track span:nth-child(4n+4) { color: inherit; }
@media (max-width: 700px) {
  .band-marquee.band-marquee-pro { height: 56px; }
  .band-marquee-pro .marquee-track { font-size: 12px; gap: 16px; }
  .band-marquee-pro .marquee-track .mq-pill { font-size: 10.5px; padding: 4px 10px; }
  .band-marquee-pro .marquee-track .mq-stat { font-size: 11.5px; }
}

/* ============================================================
   GAP KILLER · 2026-05-01 — pull marquee up to overlap hero bottom
   ============================================================ */
.hero + .band-marquee.band-marquee-pro,
.hero + .band-marquee {
  margin-top: -42px !important;
  position: relative !important;
  z-index: 5 !important;
  box-shadow: 0 -12px 24px rgba(0,0,0,0.35);
}
/* Hide the redundant SCROLL_TO_REVEAL hint — gap source */
.hero .hero-hint { display: none !important; }