/* ═══════════════════════════════════════════════
   CURTIFY LANDING PAGE — style.css
   Dark theme · #3BA9FF accent · Glass + Grain
   "Precision Engineering" aesthetic — V3 Dramatic
   ═══════════════════════════════════════════════ */

/* ─── VARIABLES ─── */
:root {
  --bg: #07070c;
  --bg-elevated: #0c0c14;
  --bg-card: rgba(255, 255, 255, 0.025);
  --bg-card-hover: rgba(59, 169, 255, 0.04);
  --accent: #3BA9FF;
  --accent-light: #7dd3fc;
  --accent-glow: rgba(59, 169, 255, 0.12);
  --accent-glow-strong: rgba(59, 169, 255, 0.25);
  --accent-dark: #2a7bc8;
  --text-primary: #e8e8f0;
  --text-secondary: rgba(232, 232, 240, 0.55);
  --text-muted: rgba(232, 232, 240, 0.52);
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(59, 169, 255, 0.15);
  --red: #ff4d4d;
  --green: #2cb463;
  --yellow: #f5c542;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  /* Tracking scale — letter-spacing treated as a token ramp, not ad-hoc
     values. Explore with landing/scrim-grid-playground.html. */
  --track-fitted: -1.5px;   /* optical tightening for the nowrap hero line */
  --track-display: 0.01em;  /* display headings */
  --track-caps: 0.12em;     /* uppercase UI text */
  --track-label: 0.16em;    /* eyebrow + micro-labels */
  --track-wide: 0.2em;      /* engraved/panel labels */
  --label-size: 11px;
  /* Layer stack — one place to reason about what sits over the cube.
     orbs/glow 0 · tech grid 1 · .bb-fixed cube 2 · scrims 4 · copy 5 · hotspots 6 */
  --z-atmosphere: 0;
  --z-grid: 1;
  --z-box: 2;
  --z-scrim: 4;
  --z-copy: 5;
  --z-hotspot: 6;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  /* clip (not hidden): clips horizontal overflow without creating a scroll
     container, so position:sticky descendants (Drive Mode showcase) still work */
  overflow-x: clip;
  position: relative;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ─── NOISE GRAIN OVERLAY ─── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
}

/* ─── ANIMATED GRID BACKGROUND — REMOVED ───
   This was a fourth grid (60px, accent 0.03). Its background was already
   dead, overridden by the later body::after rule, but its mask-image was
   NOT: it survived the cascade and clipped that rule's vignette to a top
   ellipse. Grid duty now belongs solely to .tech-grid; see LAYER STACK. */

/* ─── CONTAINER ─── */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

section > .container,
.demo-video-wrap,
.demo-stage {
  position: relative;
  z-index: 2;
}

/* ─── UTILITIES ─── */
.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 40%, #e0f0ff 60%, var(--accent) 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 300% center; }
}

/* Scroll-reveal base state */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.24s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.36s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.48s; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.88rem;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn-sm { padding: 9px 20px; font-size: 0.82rem; }
.btn-lg { padding: 16px 32px; font-size: 0.95rem; }

/* Sheen sweep on hover */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 45%, rgba(255,255,255,0.15) 55%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out-expo);
}
.btn:hover::after { transform: translateX(100%); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 0 30px var(--accent-glow), 0 2px 8px rgba(0,0,0,0.4);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #4fb8ff, var(--accent));
  box-shadow: 0 0 50px var(--accent-glow-strong), 0 8px 32px rgba(59, 169, 255, 0.15), 0 4px 16px rgba(0,0,0,0.3);
  transform: translateY(-3px);
}
.btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: rgba(255,255,255,0.07);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-hover);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
  transform: translateY(-2px);
}

/* ─── NAVIGATION ─── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: all 0.4s var(--ease-out-expo);
}
.nav.scrolled {
  background: rgba(7, 7, 12, 0.85);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Michroma', sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: #f5f7fa;
  text-transform: uppercase;
  transition: all 0.3s;
}
.nav-logo:hover { opacity: 0.8; filter: drop-shadow(0 0 8px rgba(59,169,255,0.3)); }
.nav-logo-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  font-size: 0.88rem;
  color: var(--text-secondary);
  transition: color 0.2s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  transition: width 0.3s var(--ease-out-expo);
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a:hover::after { width: 100%; }
.nav-badge { display: inline-flex; align-items: center; gap: 6px; }
.badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-glow);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nav-actions { display: flex; align-items: center; gap: 12px; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  width: 22px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: all 0.3s var(--ease-out-expo);
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 28px 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out-expo);
}
.mobile-menu.open { max-height: 300px; }
.mobile-menu a {
  padding: 10px 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

/* ─── HERO ─── */
.hero {
  position: relative;
  min-height: 100svh;
  padding: clamp(104px, 12vh, 132px) 0 clamp(44px, 7vh, 72px);
  overflow-x: clip;
  overflow-y: visible;
  display: flex;
  align-items: center;
  /* Rich atmospheric gradient — top-lit like Cluely's sky */
  background:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(59, 169, 255, 0.13) 0%, transparent 100%),
    radial-gradient(ellipse 60% 35% at 50% 0%, rgba(80, 140, 220, 0.08) 0%, transparent 100%),
    radial-gradient(ellipse 40% 30% at 25% 10%, rgba(59, 169, 255, 0.05) 0%, transparent 100%),
    radial-gradient(ellipse 40% 30% at 75% 10%, rgba(59, 169, 255, 0.05) 0%, transparent 100%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(7, 7, 12, 1) 0%, transparent 100%),
    linear-gradient(180deg, #0d1220 0%, #0a0d18 30%, var(--bg) 70%);
}

/* Perspective grid floor — RETIRED. The page carried three separate grids
   (this 80px hero floor, a 56px body::after blueprint wash, and now the
   64px .tech-grid). Three cell sizes stacked produce moire, so .tech-grid
   is the single source. Kept as a comment: restoring is a paste-back. */

/* Floating gradient orbs — atmosphere layer, always below the grid */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
  z-index: var(--z-atmosphere);
}
.hero-orb-1 {
  width: 700px;
  height: 500px;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(59, 169, 255, 0.2) 0%, rgba(30, 100, 200, 0.08) 40%, transparent 70%);
  animation: orbFloat1 8s ease-in-out infinite alternate;
}
.hero-orb-2 {
  width: 400px;
  height: 400px;
  top: 100px;
  left: 5%;
  background: radial-gradient(circle, rgba(80, 130, 255, 0.1) 0%, rgba(100, 80, 255, 0.04) 50%, transparent 70%);
  animation: orbFloat2 10s ease-in-out infinite alternate;
}
.hero-orb-3 {
  width: 350px;
  height: 350px;
  top: 50px;
  right: 5%;
  background: radial-gradient(circle, rgba(59, 200, 255, 0.08) 0%, rgba(0, 150, 255, 0.03) 50%, transparent 70%);
  animation: orbFloat3 12s ease-in-out infinite alternate;
}
@keyframes orbFloat1 {
  0% { transform: translateX(-50%) translateY(0) scale(1); }
  100% { transform: translateX(-50%) translateY(20px) scale(1.08); }
}
@keyframes orbFloat2 {
  0% { transform: translateY(0) translateX(0); opacity: 0.6; }
  100% { transform: translateY(-30px) translateX(15px); opacity: 1; }
}
@keyframes orbFloat3 {
  0% { transform: translateY(0) translateX(0); opacity: 0.5; }
  100% { transform: translateY(20px) translateX(-20px); opacity: 0.9; }
}

/* Central glow — adds the "light source from above" feel */
.hero-glow {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1600px;
  height: 800px;
  background:
    radial-gradient(ellipse 50% 40% at 50% 20%, rgba(59, 169, 255, 0.15) 0%, transparent 100%),
    radial-gradient(ellipse 80% 50% at 50% 10%, rgba(59, 169, 255, 0.06) 0%, transparent 100%);
  pointer-events: none;
  z-index: var(--z-atmosphere);
  animation: heroGlowPulse 6s ease-in-out infinite alternate;
}
@keyframes heroGlowPulse {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}
.hero .container {
  position: relative;
  z-index: var(--z-copy);
  width: 100%;
  max-width: 1320px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 3vw, 48px);
}

/* Hero entrance */
.hero-content.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.2s var(--ease-out-expo), transform 1.2s var(--ease-out-expo);
}
.hero-content.visible {
  opacity: 1;
  transform: translateY(0);
}
.hero-image.reveal {
  opacity: 0;
  transform: translateX(40px) scale(0.95);
  transition: opacity 1.4s var(--ease-out-expo) 0.3s, transform 1.4s var(--ease-out-expo) 0.3s;
}
.hero-image.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.hero-subtitle {
  max-width: 540px;
}
.hero-content {
  text-align: left;
  max-width: 620px;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 2; /* above the fixed box — copy is never occluded */
}

/* Serif display font for hero — sized to match the bold sans */
.hero-serif {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
  color: var(--accent-light);
  -webkit-text-fill-color: var(--accent-light);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  filter: drop-shadow(0 0 30px rgba(59,169,255,0.2));
}

.hero-title {
  margin-bottom: clamp(18px, 2.5vh, 28px);
}
.hero-title-line {
  display: block;
  /* Sized so the longest line ("THE DIGITAL BLACK BOX") fits the 620px
     content column on one row — nowrap must never overflow the column */
  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.5px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .hero-title-line { white-space: normal; }
}
.hero-title-line:last-child {
  background: linear-gradient(135deg, #fff 0%, var(--accent-light) 50%, var(--accent) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s ease-in-out infinite;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 0 clamp(24px, 3.5vh, 36px);
}
.hero-subtitle-bold {
  font-size: clamp(1.08rem, 1.35vw, 1.3rem);
  color: rgba(232, 232, 240, 0.8);
  font-weight: 500;
  line-height: 1.58;
  max-width: 570px;
}
.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
}
/* Glossy 3D pill button — Cluely-style depth */
.btn-hero {
  padding: 20px 48px;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 16px;
  background: linear-gradient(180deg, #5bbfff 0%, #3BA9FF 40%, #2a8ee0 100%);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow:
    0 0 40px rgba(59,169,255,0.25),
    0 6px 20px rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 4px rgba(0,0,0,0.15);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  letter-spacing: 0.2px;
}
.btn-hero:hover {
  background: linear-gradient(180deg, #6ec8ff 0%, #4fb8ff 40%, #3BA9FF 100%);
  box-shadow:
    0 0 60px rgba(59,169,255,0.35),
    0 10px 32px rgba(0,0,0,0.35),
    0 2px 4px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -2px 4px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}
.hero-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  margin: 0;
}


/* Industry label transition */
#hero-industry-label {
  display: inline-block;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hero right side — 3D black box */
.hero-image {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-image-glow {
  position: absolute;
  inset: -80px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(59,169,255,0.25) 0%, rgba(59,169,255,0.08) 35%, transparent 60%),
    radial-gradient(ellipse at 50% 80%, rgba(59,169,255,0.18) 0%, transparent 50%);
  opacity: 1;
  pointer-events: none;
  filter: blur(30px);
  animation: heroImageGlow 5s ease-in-out infinite alternate;
}
@keyframes heroImageGlow {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}



/* ═══ LAYER STACK ═══════════════════════════════════════════════════════
   Bottom to top: atmosphere 0 · tech grid 1 · cube 2 · scrims 4 · copy 5 ·
   hotspots 6. The grid MUST stay below the cube — above it, the lines read
   as a screen door across the product. The scrims are the middle layer the
   page was missing: hero copy previously sat directly on the cube.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · Technical grid — instrumentation, not decoration. If you can plainly
   see it, it is too strong. Inset -8% so parallax never exposes an edge. */
.tech-grid {
  position: fixed;
  inset: -8%;
  z-index: var(--z-grid);
  pointer-events: none;
  opacity: 0.08;
  transition: opacity 300ms var(--ease-out-expo);
  will-change: opacity, transform;
  background-image:
    repeating-linear-gradient(to right,  rgba(232,232,240,0.85) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, rgba(232,232,240,0.85) 0 1px, transparent 1px 64px);
}
.tech-grid.is-active { opacity: 0.14; }

/* 4 · Scrim stack — the --bg colour at reduced alpha fading to nothing.
   Never a new colour; a tint here would muddy the cube's additive glow. */
.scrim {
  position: fixed;
  z-index: var(--z-scrim);
  pointer-events: none;
}
.scrim--top {
  top: 0; left: 0; right: 0; height: 160px;
  background-image: linear-gradient(180deg, rgba(7,7,12,0.45), rgba(7,7,12,0));
}
.scrim--bottom {
  bottom: 0; left: 0; right: 0; height: 160px;
  background-image: linear-gradient(0deg, rgba(7,7,12,0.45), rgba(7,7,12,0));
}
.scrim--left {
  top: 0; bottom: 0; left: 0; width: 160px;
  background-image: linear-gradient(90deg, rgba(7,7,12,0.45), rgba(7,7,12,0));
}

/* 5 · Content layer: every section's container sits above the scroll-tracked
   box AND above the scrims, so copy is never occluded or dimmed */
section .container,
.hero .container {
  position: relative;
  z-index: var(--z-copy);
}

/* ─── FIXED 3D BLACK BOX (scroll-tracked) ─── */
.bb-fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  z-index: var(--z-box);
  pointer-events: none;
  transition:
    opacity 1s ease,
    left 1.2s cubic-bezier(0.16,1,0.3,1),
    top 1.2s cubic-bezier(0.16,1,0.3,1),
    transform 1.2s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, left, top, transform;
}
.bb-fixed__halo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,169,255,0.1) 0%, rgba(59,169,255,0.03) 40%, transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  transition: opacity 1s, width 1s, height 1s;
}
.bb-fixed__particles {
  position: absolute;
  inset: 0;
}
.bb-fixed .bb-particle {
  position: absolute;
}
@media (prefers-reduced-motion: reduce) {
  .bb-fixed { transition: opacity 1s ease; }
}
.bb-fixed .bb-particle:nth-child(1) { top: 20%; left: 5%; }
.bb-fixed .bb-particle:nth-child(2) { top: 50%; right: 5%; animation-delay: 1.5s; }
.bb-fixed .bb-particle:nth-child(3) { bottom: 25%; left: 8%; animation-delay: 3s; }

/* ─── 3D BLACK BOX (cube styles) ─── */
.hero-black-box {
  width: min(480px, 100%);
  height: 480px;
  perspective: 1000px;
  perspective-origin: 60% 42%;
  position: relative;
  margin: 0 auto;
}
.hero-black-box::before {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 120px;
  background: radial-gradient(ellipse, rgba(59, 169, 255, 0.28) 0%, transparent 65%);
  filter: blur(25px);
  pointer-events: none;
}
/* Ambient halo behind the cube */
.hero-black-box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,169,255,0.12) 0%, rgba(59,169,255,0.04) 40%, transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  animation: haloBreath 6s ease-in-out infinite alternate;
}
@keyframes haloBreath {
  0% { opacity: 0.6; transform: translate(-50%, -55%) scale(0.95); }
  100% { opacity: 1; transform: translate(-50%, -55%) scale(1.05); }
}
.bb-wrapper {
  width: 325px;
  height: 325px;
  position: absolute;
  top: 44%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(-15deg) rotateY(-38deg);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Float animation disabled — JS handles transform for scroll tracking */
.bb-face {
  position: absolute;
  width: 325px;
  height: 325px;
  backface-visibility: hidden;
  border-radius: 5px;
}
.bb-front {
  transform: translateZ(162.5px);
  background: linear-gradient(145deg, #1e1e36 0%, #101026 50%, #0b0b18 100%);
  border: 1px solid rgba(59, 169, 255, 0.18);
  box-shadow: 0 0 50px rgba(59, 169, 255, 0.12), 0 0 100px rgba(59, 169, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.bb-right {
  transform: rotateY(90deg) translateZ(162.5px);
  background: linear-gradient(145deg, #161630 0%, #0c0c20 50%, #090914 100%);
  border: 1px solid rgba(59, 169, 255, 0.10);
  box-shadow: 0 0 30px rgba(59, 169, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.bb-top {
  transform: rotateX(90deg) translateZ(162.5px);
  background: linear-gradient(145deg, #222240 0%, #161632 50%, #101025 100%);
  border: 1px solid rgba(59, 169, 255, 0.22);
  box-shadow: 0 0 60px rgba(59, 169, 255, 0.15), 0 0 120px rgba(59, 169, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.bb-back { transform: translateZ(-162.5px) rotateY(180deg); background: #080812; }
.bb-left { transform: rotateY(-90deg) translateZ(162.5px); background: #0a0a15; }
.bb-bottom { transform: rotateX(-90deg) translateZ(162.5px); background: #080810; }

/* Edge glow borders */
.bb-front::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 5px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(59,169,255,0.55) 0%, rgba(59,169,255,0.14) 30%, transparent 50%, rgba(59,169,255,0.14) 70%, rgba(59,169,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.bb-top::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 5px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(59,169,255,0.45) 0%, rgba(59,169,255,0.10) 40%, transparent 60%, rgba(59,169,255,0.30) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.bb-right::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 5px;
  padding: 1px;
  background: linear-gradient(180deg, rgba(59,169,255,0.18) 0%, transparent 40%, rgba(59,169,255,0.12) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Metal texture */
.bb-front::after, .bb-top::after, .bb-right::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  opacity: 0.04;
  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)'/%3E%3C/svg%3E");
  background-size: 150px;
  pointer-events: none;
}

/* Icon grids */
.bb-grid {
  position: absolute;
  inset: 0;
  display: grid;
  padding: 36px;
  gap: 18px;
  z-index: 2;
}
.bb-grid-2x2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.bb-grid-3x1 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; padding: 36px 44px; }

/* Etched icon cells */
.bb-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 -1px 2px rgba(255, 255, 255, 0.02), 0 1px 0 rgba(255, 255, 255, 0.02);
}
.bb-cell svg {
  width: 53px;
  height: 53px;
  stroke: rgba(59, 169, 255, 0.28);
  fill: none;
  stroke-width: 1.2;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.05));
}
.bb-right .bb-cell svg { width: 43px; height: 43px; stroke: rgba(59, 169, 255, 0.20); }
.bb-right .bb-cell { background: rgba(0, 0, 0, 0.2); }
.bb-top .bb-cell svg { stroke: rgba(59, 169, 255, 0.33); }

/* Rivets */
.bb-rivet {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 5;
}
.bb-rivet-tl { top: 12px; left: 12px; }
.bb-rivet-tr { top: 12px; right: 12px; }
.bb-rivet-bl { bottom: 12px; left: 12px; }
.bb-rivet-br { bottom: 12px; right: 12px; }

/* Status LED */
.bb-led {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 20px rgba(59, 169, 255, 0.3);
  animation: bbLedPulse 3s ease-in-out infinite;
  z-index: 5;
}
@keyframes bbLedPulse {
  0%, 100% { opacity: 0.6; box-shadow: 0 0 6px var(--accent), 0 0 15px rgba(59, 169, 255, 0.2); }
  50% { opacity: 1; box-shadow: 0 0 10px var(--accent), 0 0 30px rgba(59, 169, 255, 0.4); }
}

/* Etched label */
.bb-label {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Michroma', monospace;
  font-size: 7px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(59, 169, 255, 0.2);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  z-index: 5;
  white-space: nowrap;
}

/* Scan line */
.bb-scan {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(59, 169, 255, 0.15) 30%, rgba(59, 169, 255, 0.25) 50%, rgba(59, 169, 255, 0.15) 70%, transparent 100%);
  z-index: 10;
  animation: bbScanDown 6s linear infinite;
  opacity: 0;
}
@keyframes bbScanDown {
  0% { top: 0; opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Specular highlight */
.bb-specular {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 40%, transparent 100%);
  pointer-events: none;
  z-index: 3;
}

/* Particles */
.bb-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: bbParticle 4s ease-in-out infinite;
}
.bb-particle:nth-child(1) { top: 20%; left: -20px; animation-delay: 0s; }
.bb-particle:nth-child(2) { top: 50%; right: -25px; animation-delay: 1.5s; }
.bb-particle:nth-child(3) { bottom: 30%; left: -15px; animation-delay: 3s; }
.bb-particle:nth-child(4) { top: 10%; right: -18px; animation-delay: 0.8s; }
.bb-particle:nth-child(5) { bottom: 15%; right: -22px; animation-delay: 2.2s; }
@keyframes bbParticle {
  0% { opacity: 0; transform: translateY(10px) scale(0.5); }
  30% { opacity: 0.6; }
  70% { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-30px) scale(1.2); }
}











/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }

/* ─── SELECTION ─── */
::selection {
  background: rgba(59, 169, 255, 0.25);
  color: #fff;
}

/* ─── SHARED KEYFRAMES ─── */
@keyframes recPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes waveBar {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ─── RESPONSIVE — Navigation & Hero ─── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }

  .hero { min-height: auto; padding: 130px 0 60px; }
  .hero .container { flex-direction: column; text-align: center; position: relative; }
  .hero-content { text-align: center; max-width: 100%; position: relative; z-index: 2; }
  .hero-subtitle { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
  .hero-image {
    position: absolute;
    inset: 0;
    min-width: unset;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.18;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-image-glow { display: none; }
  .bb-fixed {
    width: 300px;
    height: 300px;
  }
  .hero-black-box { margin: 0 auto; width: 340px; height: 340px; }
  .hero-title-line { font-size: 2.6rem; letter-spacing: -1px; }
  .hero-orb-2, .hero-orb-3 { display: none; }
}

@media (max-width: 480px) {
  .bb-fixed {
    width: 260px;
    height: 260px;
  }
  .hero-title-line { font-size: 2rem; letter-spacing: -0.5px; }
  .hero-subtitle { font-size: 0.92rem; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════
   NEW SECTIONS — Extracted from inline styles
   ═══════════════════════════════════════════════ */

    /* ── Section shared ── */
    .section-pad { padding: 120px 0; position: relative; }
    .section-pad-sm { padding: 80px 0; position: relative; }
    .section-header { text-align: center; margin-bottom: 64px; }
    .section-label {
      display: inline-block;
      font-family: 'Michroma', monospace;
      font-size: 0.62rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--accent);
      background: var(--accent-glow);
      border: 1px solid rgba(59,169,255,0.15);
      padding: 6px 16px;
      border-radius: 100px;
      margin-bottom: 20px;
    }
    .section-title {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      letter-spacing: -1.5px;
      line-height: 1.15;
      margin-bottom: 16px;
    }
    .section-subtitle {
      font-size: 1.05rem;
      color: var(--text-secondary);
      max-width: 620px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* ── Hero Demo Section ── */
    .hero-demo {
      padding: 80px 0 100px;
      position: relative;
      overflow: hidden;
    }
    .hero-demo__intro {
      font-family: 'Michroma', monospace;
      font-size: 0.65rem;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 12px;
      text-align: center;
    }
    .hero-demo__value {
      font-size: 1rem;
      color: var(--text-secondary);
      text-align: center;
      max-width: 600px;
      margin: 16px auto 0;
      line-height: 1.7;
    }

    /* ── Demo Video Player ── */
    .demo-video-wrap {
      max-width: 1000px;
      margin: 50px auto 0;
      padding: 0 28px;
    }
    .demo-video-frame {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(59,169,255,0.12);
      box-shadow:
        0 0 100px rgba(59,169,255,0.08),
        0 40px 80px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.04);
      background: #0a0a14;
      aspect-ratio: 16 / 9;
    }
    .demo-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .demo-video-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      background: rgba(7,7,12,0.5);
      cursor: pointer;
      transition: background 0.3s;
    }
    .demo-video-overlay:hover {
      background: rgba(7,7,12,0.3);
    }
    .demo-video-overlay.hidden {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s;
    }
    .demo-video-play {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: rgba(59,169,255,0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 40px rgba(59,169,255,0.4), 0 8px 24px rgba(0,0,0,0.3);
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .demo-video-overlay:hover .demo-video-play {
      transform: scale(1.08);
      box-shadow: 0 0 60px rgba(59,169,255,0.5), 0 12px 32px rgba(0,0,0,0.3);
    }
    .demo-video-play svg {
      margin-left: 3px;
    }
    .demo-video-play-text {
      font-size: 0.85rem;
      font-weight: 600;
      color: rgba(255,255,255,0.7);
      letter-spacing: 0.3px;
    }

    .demo-stage {
      max-width: 900px;
      margin: 60px auto 0;
      padding: 0 28px;
      position: relative;
    }

    /* The computer screen frame */
    .demo-screen {
      position: relative;
      border-radius: 16px;
      border: 1px solid rgba(59,169,255,0.15);
      background: #0a0a14;
      min-height: 520px;
      overflow: hidden;
      box-shadow:
        0 0 120px rgba(59,169,255,0.1),
        0 0 60px rgba(59,169,255,0.05),
        0 60px 120px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.06);
      opacity: 0;
      transform: translateY(40px) scale(0.95);
      transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
    }
    .demo-active .demo-screen {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Monitor chrome bar */
    .demo-screen__chrome {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      background: rgba(0,0,0,0.4);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      position: relative;
      z-index: 1;
    }
    .demo-screen__dots { display: flex; gap: 6px; }
    .demo-screen__chrome-title {
      font-size: 0.62rem;
      color: var(--text-muted);
      margin-left: 4px;
    }

    /* Screenshot-based content area */
    .demo-screen__content {
      position: relative;
      min-height: 480px;
      overflow: hidden;
    }
    .demo-screen__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      opacity: 0;
      transition: opacity 0.8s var(--ease-out-expo);
    }
    .demo-step-email .demo-screen__img {
      opacity: 1;
    }
    /* Hide fallback when image loads */
    .demo-screen__img:not([src=""]):not([src="#"]) + .demo-screen__fallback {
      display: none;
    }
    /* Fallback shown when no image file yet */
    .demo-screen__fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .demo-screen__bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 50% at 60% 45%, rgba(59,169,255,0.25) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 35% 30%, rgba(40,100,200,0.15) 0%, transparent 50%),
        linear-gradient(135deg, #0f1e38 0%, #142a4e 30%, #0f1e38 60%, #0c1628 100%);
    }
    .demo-fallback__msg {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      text-align: center;
      font-size: 0.78rem;
      color: var(--text-muted);
      line-height: 1.6;
    }
    .demo-fallback__msg code {
      font-family: 'Michroma', monospace;
      font-size: 0.6rem;
      color: var(--accent);
      background: rgba(59,169,255,0.08);
      padding: 3px 8px;
      border-radius: 4px;
    }

    /* Screen grab highlight */
    .demo-grab {
      position: absolute;
      top: 15%; left: 10%;
      width: 50%;
      height: 55%;
      z-index: 5;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s;
    }
    .demo-step-grab .demo-grab { opacity: 1; }
    .demo-step-grab-done .demo-grab { opacity: 0; transition: opacity 0.6s 0.3s; }
    .demo-grab__border {
      position: absolute;
      inset: 0;
      border: 2px solid var(--accent);
      border-radius: 8px;
      box-shadow: 0 0 20px rgba(59,169,255,0.3), inset 0 0 20px rgba(59,169,255,0.05);
      animation: demoGrabPulse 0.6s ease-in-out 2;
    }
    @keyframes demoGrabPulse {
      0%, 100% { box-shadow: 0 0 20px rgba(59,169,255,0.3); }
      50% { box-shadow: 0 0 40px rgba(59,169,255,0.5), 0 0 80px rgba(59,169,255,0.2); }
    }
    .demo-grab__label {
      position: absolute;
      top: -28px; right: 0;
      display: flex; align-items: center; gap: 5px;
      font-size: 0.65rem; font-weight: 600;
      color: #fff;
      background: var(--accent);
      padding: 4px 10px;
      border-radius: 4px;
    }

    /* Curtify floating widget */
    .demo-widget {
      position: absolute;
      top: 50px; bottom: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(30px) scale(0.9);
      width: 340px;
      border-radius: 20px;
      background: rgba(14,14,26,0.97);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(59,169,255,0.08);
      backdrop-filter: blur(20px);
      z-index: 10;
      opacity: 0;
      transform: translateY(30px) scale(0.9);
      transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .demo-step-widget .demo-widget {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
    }
    .demo-widget__topbar {
      display: flex; align-items: center;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      background: rgba(0,0,0,0.3);
    }
    .demo-widget__topbar-left,
    .demo-widget__topbar-right {
      display: flex; align-items: center; gap: 8px;
      flex-shrink: 0;
    }
    /* Capsule toggle — mirrors SessionControlCapsule.tsx */
    .capsule {
      position: relative;
      display: flex;
      align-items: center;
      border-radius: 100px;
      border: 1px solid #3A404C;
      background: rgba(47,52,62,0.8);
      backdrop-filter: blur(12px);
      margin: 0 auto;
      padding: 3px;
    }
    .capsule__pill {
      position: absolute;
      top: 3px; bottom: 3px;
      left: 3px;
      width: calc(50% - 3px);
      border-radius: 100px;
      background: linear-gradient(to bottom, #2D9CDB, #238BB8);
      transition: left 0.4s var(--ease-out-expo);
      z-index: 0;
    }
    .demo-step-session .capsule__pill {
      left: 50%;
    }
    .capsule__left,
    .capsule__right {
      position: relative;
      z-index: 1;
      font-size: 0.62rem;
      font-weight: 600;
      padding: 6px 14px;
      white-space: nowrap;
      transition: color 0.3s;
    }
    .capsule__left { color: #fff; }
    .capsule__right { color: rgba(255,255,255,0.5); }
    .demo-step-session .capsule__left { color: rgba(255,255,255,0.5); }
    .demo-step-session .capsule__right { color: #fff; }

    /* Preview */
    .demo-widget__preview {
      display: flex; gap: 10px; padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      opacity: 0; transform: translateY(8px);
      transition: opacity 0.5s, transform 0.5s;
    }
    .demo-step-preview .demo-widget__preview {
      opacity: 1; transform: translateY(0);
    }
    .demo-widget__thumb {
      width: 44px; height: 44px;
      border-radius: 8px;
      background: linear-gradient(135deg, #c8c8c8, #a0a0a0);
      flex-shrink: 0;
    }
    .demo-widget__thumb-name { font-size: 0.72rem; font-weight: 600; color: var(--text-primary); }
    .demo-widget__thumb-meta { font-size: 0.58rem; color: var(--text-muted); display: block; margin-bottom: 4px; }
    .demo-widget__thumb-badges { display: flex; gap: 4px; }
    .demo-wbadge {
      font-size: 0.5rem; font-weight: 700;
      padding: 1px 6px; border-radius: 3px; letter-spacing: 0.5px;
    }
    .demo-wbadge--blue { background: rgba(59,169,255,0.15); color: var(--accent); }
    .demo-wbadge--green { background: rgba(44,180,99,0.15); color: var(--green); }

    /* Question */
    .demo-widget__question {
      padding: 12px 16px;
      font-size: 0.82rem; font-weight: 500;
      color: var(--text-primary);
      opacity: 0; transform: translateY(8px);
      transition: opacity 0.5s, transform 0.5s;
    }
    .demo-step-question .demo-widget__question {
      opacity: 1; transform: translateY(0);
    }

    /* Answer */
    .demo-widget__answer {
      margin: 0 16px 12px;
      padding: 14px 16px;
      border-radius: 12px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      opacity: 0; transform: translateY(8px);
      transition: opacity 0.6s, transform 0.6s;
    }
    .demo-step-answer .demo-widget__answer {
      opacity: 1; transform: translateY(0);
    }
    .demo-widget__answer-title {
      font-size: 0.82rem; font-weight: 700;
      color: var(--text-primary); margin-bottom: 10px;
    }
    .demo-widget__answer-row {
      font-size: 0.72rem; color: var(--text-secondary);
      padding: 3px 0; line-height: 1.4;
    }
    .demo-akey { font-weight: 700; color: var(--text-primary); }
    .demo-aval { color: var(--text-secondary); }

    /* Action bar */
    .demo-widget__actions {
      display: flex; gap: 6px;
      padding: 10px 16px 14px;
      border-top: 1px solid var(--border);
      opacity: 0; transform: translateY(8px);
      transition: opacity 0.5s, transform 0.5s;
    }
    .demo-step-actions .demo-widget__actions {
      opacity: 1; transform: translateY(0);
    }
    .demo-wact {
      display: inline-flex; align-items: center; gap: 5px;
      font-family: var(--font); font-size: 0.65rem; font-weight: 500;
      padding: 6px 12px; border-radius: var(--radius-sm);
      border: 1px solid rgba(255,255,255,0.08);
      background: transparent; color: var(--text-muted); cursor: default;
    }
    .demo-wact--active {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(59,169,255,0.06);
    }

    /* ── Phase 2: Session Conversation ── */
    .demo-phase2 {
      display: none;
      flex-direction: column;
      height: 100%;
    }
    /* When session step triggers: hide phase 1 content, show phase 2, swap tab */
    .demo-step-session .demo-widget__preview,
    .demo-step-session .demo-widget__question,
    .demo-step-session .demo-widget__answer,
    .demo-step-session .demo-widget__actions {
      display: none;
    }
    .demo-step-session .demo-phase2 {
      display: flex;
    }
    /* (capsule swap handled by .capsule CSS above) */

    /* Recording indicator */
    .demo-p2__rec {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      font-size: 0.68rem;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border);
    }
    .demo-p2__rec-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--red);
      animation: recBlink 1.2s ease-in-out infinite;
    }
    @keyframes recBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }
    .demo-p2__rec-time {
      margin-left: auto;
      font-family: 'Michroma', monospace;
      font-size: 0.6rem;
      color: var(--text-muted);
    }

    /* Chat messages */
    .demo-p2__chat {
      flex: 1;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow-y: auto;
      min-height: 0;
    }
    .demo-p2__msg {
      display: flex;
      gap: 8px;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
    }
    .demo-step-msg1 #demoMsg1 { opacity: 1; transform: translateY(0); }
    .demo-step-msg2 #demoMsg2 { opacity: 1; transform: translateY(0); }
    .demo-step-msg3 #demoMsg3 { opacity: 1; transform: translateY(0); }
    .demo-step-msg4 #demoMsg4 { opacity: 1; transform: translateY(0); }
    .demo-step-msg5 #demoMsg5 { opacity: 1; transform: translateY(0); }

    .demo-p2__avatar {
      width: 24px; height: 24px;
      border-radius: 50%;
      background: rgba(59,169,255,0.15);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.5rem; font-weight: 700;
      color: var(--accent);
      flex-shrink: 0;
      margin-top: 2px;
    }
    .demo-p2__avatar--customer {
      background: rgba(245,197,66,0.15);
      color: var(--yellow);
    }
    .demo-p2__bubble {
      font-size: 0.68rem;
      line-height: 1.5;
      color: var(--text-secondary);
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px 12px 12px 4px;
      padding: 8px 12px;
      max-width: 220px;
    }
    .demo-p2__bubble--customer {
      background: rgba(59,169,255,0.04);
      border-color: rgba(59,169,255,0.1);
      border-radius: 12px 12px 4px 12px;
    }
    .demo-p2__msg--customer {
      flex-direction: row-reverse;
    }
    .demo-p2__name {
      display: block;
      font-size: 0.55rem;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 3px;
    }
    .demo-p2__msg--customer .demo-p2__name {
      color: var(--yellow);
      text-align: right;
    }

    /* Recorded footer */
    .demo-p2__footer {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-top: 1px solid var(--border);
      font-size: 0.62rem;
      color: var(--green);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.6s, transform 0.6s;
    }
    .demo-step-recorded .demo-p2__footer {
      opacity: 1;
      transform: translateY(0);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .demo-screen { min-height: 420px; }
      .demo-email { width: 70%; top: 50px; left: 15px; }
      .demo-widget { width: 260px; }
      .demo-grab { width: 60%; top: 60px; left: 20px; }
      .demo-ecu__pn { font-size: 0.75rem; }
      .demo-widget__topbar-left, .demo-widget__topbar-right { display: none; }
    }
    @media (max-width: 480px) {
      .demo-screen { min-height: 380px; }
      .demo-email { width: 85%; top: 45px; left: 10px; }
      .demo-widget { width: 220px; }
      .demo-widget__answer { padding: 8px 10px; }
    }

    /* ── Outputs Section — "What you get back" ──────────────────────
       The hero cube shows four INPUTS (mic, screen grab, DTCs, VIN). Without
       this the pitch stops at "we ingest things" and never answers "…and then
       what?" — the recording, not the sensors, is what nobody else has.
       Prototyped in landing/callout-square-playground.html. */
    .outputs { background: var(--bg); }
    /* Divider: hairline fading at both ends with a rotated diamond at centre,
       so the capture story and the payoff story read as two places. */
    .outputs__divider {
      position: relative;
      height: 1px;
      max-width: 1180px;
      margin: 0 auto;
      background: linear-gradient(90deg, transparent, var(--border-accent) 18%, var(--border-accent) 82%, transparent);
    }
    .outputs__divider::after {
      content: "";
      position: absolute;
      left: 50%; top: 50%;
      width: 7px; height: 7px;
      transform: translate(-50%, -50%) rotate(45deg);
      background: var(--bg);
      border: 1px solid rgba(59, 169, 255, 0.45);
    }
    .outputs__body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 268px;
      gap: 32px;
      align-items: start;
      margin-top: 48px;
    }
    /* Schedule layout, adapted from the Orano reference (teardown:
       landing/scrim-grid-playground.html, tuned in
       public/outputs-schedule-playground.html).

       The signature move is the number box STRADDLING the rule — half above,
       half below. Both derive from --out-boxh so they can never drift apart
       when the type changes. Rules and numbers replace card borders: four
       facts, not four containers. */
    .outputs__grid {
      --out-boxw: 56px;
      --out-boxh: 52px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 64px;
      row-gap: 52px;
    }
    .out-row {
      position: relative;
      padding-top: calc(var(--out-boxh) / 2 + 20px);
    }
    .out-row::before {
      content: "";
      position: absolute;
      left: 0; right: 0;
      top: calc(var(--out-boxh) / 2);
      height: 1px;
      background: var(--accent);
      opacity: 0.55;
    }
    .out-row__num {
      position: absolute;
      right: 0; top: 0;
      width: var(--out-boxw);
      height: var(--out-boxh);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--accent);
      color: var(--accent);
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 17px;
      font-weight: 500;
      line-height: 1;
      /* Opaque so the rule reads as passing BEHIND the box, not through it. */
      background: var(--bg);
      transition: background 0.3s;
    }
    .out-row:hover .out-row__num { background: var(--accent-glow); }
    .out-row__label {
      font-size: 17px;
      font-weight: 400;
      /* Deliberately wider than --track-display. The tracking is what does the
         "technical schedule" work; the display scale would read as a heading. */
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #fff;
      line-height: 1.2;
    }
    .out-row__desc {
      margin-top: 14px;
      font-size: 0.88rem;
      color: var(--text-secondary);
      line-height: 1.75;
      max-width: 34ch;
    }
    /* Hover reveal — Curtify's addition; the Orano original is inert.
       The animated element stays BARE (see .out-rail__more note below). */
    .out-row__more,
    .out-rail__more {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      transition: grid-template-rows 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
    }
    .out-row__more > span,
    .out-rail__more > span {
      overflow: hidden;
      min-height: 0;
      display: block;
      margin: 0; padding: 0; border: 0;
    }
    .out-row__more em,
    .out-rail__more em {
      display: block;
      font-style: normal;
      color: var(--accent-light);
      border-top: 1px solid var(--border-accent);
      margin-top: 16px;
      padding-top: 13px;
      line-height: 1.65;
    }
    .out-row__more em { font-size: 0.8rem; }
    .out-rail__more em { font-size: 0.78rem; margin-top: 10px; padding-top: 9px; }
    .out-row:hover .out-row__more,
    .out-rail__item:hover .out-rail__more { grid-template-rows: 1fr; opacity: 1; }


    /* Side rail — capabilities that ride along, secondary to the main four. */
    .out-rail {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-left: 32px;
      border-left: 1px solid var(--border);
    }
    .out-rail__label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .out-rail__item {
      display: flex;
      gap: 13px;
      align-items: flex-start;
      padding: 14px 15px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.015);
      transition: border-color 0.4s, background 0.4s, transform 0.4s;
    }
    .out-rail__item:hover {
      border-color: rgba(59, 169, 255, 0.3);
      background: var(--bg-card-hover);
      transform: translateX(4px);
    }
    .out-rail__icon {
      width: 30px; height: 30px;
      flex: none;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      background: var(--accent-glow);
      color: var(--accent);
      transition: background 0.4s;
    }
    .out-rail__item:hover .out-rail__icon { background: var(--accent-glow-strong); }
    .out-rail__title { font-size: 0.9rem; font-weight: 650; letter-spacing: -0.2px; }
    .out-rail__desc {
      font-size: 0.78rem;
      color: var(--text-secondary);
      margin-top: 4px;
      line-height: 1.55;
    }
    @media (max-width: 1024px) {
      .outputs__body { grid-template-columns: 1fr; gap: 36px; }
      .out-rail {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--border);
        padding-top: 28px;
        flex-direction: row;
        flex-wrap: wrap;
      }
      .out-rail__label { flex: 1 0 100%; }
      .out-rail__item { flex: 1 1 220px; }
    }
    @media (max-width: 620px) {
      .outputs__grid { grid-template-columns: 1fr; }
    }

    /* ── Problem Section ── */
    .problem { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 50%, var(--bg) 100%); }
    .problem-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 48px;
    }
    .problem-card {
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 32px 28px;
      background: var(--bg-card);
      backdrop-filter: blur(12px);
      transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .problem-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }
    .problem-card--red { border-color: rgba(255,77,77,0.15); }
    .problem-card--red:hover { border-color: rgba(255,77,77,0.3); box-shadow: 0 0 40px rgba(255,77,77,0.06), 0 20px 60px rgba(0,0,0,0.3); }
    .problem-card--red .problem-card__icon { background: rgba(255,77,77,0.1); color: var(--red); }
    .problem-card--yellow { border-color: rgba(245,197,66,0.15); }
    .problem-card--yellow:hover { border-color: rgba(245,197,66,0.3); box-shadow: 0 0 40px rgba(245,197,66,0.06), 0 20px 60px rgba(0,0,0,0.3); }
    .problem-card--yellow .problem-card__icon { background: rgba(245,197,66,0.1); color: var(--yellow); }
    .problem-card--blue { border-color: rgba(59,169,255,0.15); }
    .problem-card--blue:hover { border-color: rgba(59,169,255,0.3); box-shadow: 0 0 40px rgba(59,169,255,0.06), 0 20px 60px rgba(0,0,0,0.3); }
    .problem-card--blue .problem-card__icon { background: var(--accent-glow); color: var(--accent); }
    .problem-card__icon {
      width: 40px; height: 40px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
    }
    .problem-card__title {
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: -0.3px;
    }
    .problem-card__desc {
      font-size: 0.88rem;
      color: var(--text-secondary);
      line-height: 1.65;
    }
    .problem-card__quote {
      font-family: 'DM Serif Display', Georgia, serif;
      font-style: italic;
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.6;
      padding: 16px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.015);
      border-left: 2px solid var(--border);
      margin-top: auto;
    }
    .problem-card--red .problem-card__quote { border-left-color: rgba(255,77,77,0.3); }
    .problem-card--yellow .problem-card__quote { border-left-color: rgba(245,197,66,0.3); }
    .problem-card--blue .problem-card__quote { border-left-color: rgba(59,169,255,0.3); }

    /* ── The Shift ── */
    .shift {
      padding: 100px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
    }
    .shift::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(59,169,255,0.06) 0%, transparent 70%);
      pointer-events: none;
    }
    .shift__text {
      font-family: 'DM Serif Display', Georgia, serif;
      font-style: italic;
      font-size: clamp(1.6rem, 3.5vw, 2.8rem);
      line-height: 1.45;
      max-width: 820px;
      background: linear-gradient(135deg, var(--accent-light) 0%, #e0f0ff 40%, var(--accent) 80%);
      background-size: 300% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 5s ease-in-out infinite;
    }

    /* ── Real Report Showcase ── */
    .report-showcase {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      padding-block: 42px;
      background: #090d14;
    }
    .report-showcase > .container {
      max-width: 1520px;
      padding-inline: clamp(28px, 4vw, 64px);
    }
    .report-showcase::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0.4;
      background-image:
        linear-gradient(rgba(112,160,205,0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(112,160,205,0.12) 1px, transparent 1px);
      background-size: 96px 96px;
      mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent);
    }
    .report-showcase__stage {
      position: relative;
      display: grid;
      grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.28fr);
      align-items: center;
      gap: clamp(28px, 3vw, 54px);
      min-height: 420px;
    }
    .report-showcase .reveal {
      opacity: 1;
      transform: none;
    }
    .report-showcase__copy {
      position: relative;
      z-index: 5;
      max-width: 500px;
    }
    .report-showcase__title {
      margin: 0 0 26px;
      max-width: 520px;
      font-family: var(--font-display);
      font-size: clamp(2rem, 2.45vw, 3.2rem);
      font-weight: 600;
      letter-spacing: -0.035em;
      line-height: 1.05;
      color: #f5f8fc;
    }
    .report-showcase__body {
      max-width: 530px;
      margin: 0 0 32px;
      font-size: clamp(1rem, 1.12vw, 1.12rem);
      line-height: 1.7;
      color: #aeb9c8;
    }
    .report-showcase__cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 58px;
      padding: 0 28px;
      border: 1px solid var(--accent);
      border-radius: 7px;
      background: rgba(59,169,255,0.05);
      color: var(--accent-light);
      font-family: var(--font-stencil);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: background-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out;
    }
    .report-showcase__cta svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .report-showcase__cta:hover {
      background: var(--accent);
      color: #06101a;
      transform: translateY(-2px);
    }
    .report-showcase__cta:focus-visible {
      outline: 3px solid rgba(114,199,255,0.55);
      outline-offset: 4px;
    }
    .report-showcase__visual {
      position: relative;
      z-index: 2;
      display: block;
      min-height: 420px;
      margin-right: min(-10vw, -100px);
      perspective: 1400px;
    }
    .report-showcase__visual:focus-visible {
      outline: 3px solid rgba(114,199,255,0.55);
      outline-offset: 8px;
    }
    .report-showcase__page {
      position: absolute;
      top: 0;
      margin: 0;
      overflow: hidden;
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 30px 70px rgba(0,0,0,0.42);
      opacity: 1;
      color: #122a42;
    }
    .report-showcase__page--cover {
      left: 2%;
      z-index: 3;
      width: min(410px, 32vw);
      height: min(430px, 36vw);
      opacity: var(--report-cover-opacity, 1);
      transform: translate3d(var(--report-cover-x, 0), var(--report-cover-y, 0), 0) rotate(var(--report-cover-rotation, -1deg)) scale(var(--report-cover-scale, 1));
    }
    .report-showcase__page--timeline-one {
      top: 30px;
      left: 42%;
      z-index: 2;
      width: min(270px, 21vw);
      height: min(390px, 31vw);
      opacity: var(--report-timeline-opacity, 1);
      transform: translate3d(var(--report-timeline-x, 0), var(--report-timeline-y, 0), 0) rotate(var(--report-timeline-rotation, 3deg)) scale(var(--report-timeline-scale, 1));
    }
    .report-showcase__page--timeline-two {
      top: 58px;
      left: 60%;
      z-index: 1;
      width: min(250px, 19vw);
      height: min(350px, 28vw);
      opacity: var(--report-evidence-opacity, 1);
      transform: translate3d(var(--report-evidence-x, 0), var(--report-evidence-y, 0), 0) rotate(var(--report-evidence-rotation, 7deg)) scale(var(--report-evidence-scale, 1));
    }
    .report-sheet {
      box-sizing: border-box;
      height: 100%;
      padding: 20px;
      background: #fff;
      font-family: Inter, Arial, sans-serif;
    }
    .report-sheet__brand {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 10px;
      border-bottom: 1px solid #dbe5ed;
      color: #142a41;
      font-size: 0.58rem;
      font-weight: 800;
      letter-spacing: 0.14em;
    }
    .report-sheet__brand > b {
      display: grid;
      width: 24px;
      height: 24px;
      place-items: center;
      border-radius: 5px;
      background: #154c78;
      color: #fff;
      font-size: 0.7rem;
    }
    .report-sheet__brand span { display: grid; gap: 1px; }
    .report-sheet__brand small { color: #8090a0; font-size: 0.38rem; letter-spacing: 0.12em; text-transform: uppercase; }
    .report-sheet__brand em {
      margin-left: auto;
      padding: 5px 7px;
      border: 1px solid #bcd9eb;
      border-radius: 4px;
      color: #287eb7;
      font-size: 0.38rem;
      font-style: normal;
      letter-spacing: 0.08em;
    }
    .report-sheet__kicker {
      display: block;
      margin-top: 14px;
      color: #287eb7;
      font-size: 0.45rem;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }
    .report-sheet__vehicle {
      display: block;
      margin-top: 5px;
      font-size: clamp(0.82rem, 1.08vw, 1.06rem);
      letter-spacing: -0.025em;
    }
    .report-sheet__issue {
      display: block;
      margin-top: 4px;
      color: #536779;
      font-size: clamp(0.5rem, 0.66vw, 0.66rem);
    }
    .report-sheet__facts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 12px;
      padding-block: 9px;
      border-block: 1px solid #dbe5ed;
      color: #778a9b;
      font-size: 0.4rem;
      text-transform: uppercase;
    }
    .report-sheet__facts span { display: grid; gap: 2px; }
    .report-sheet__facts b { color: #1a344d; font-size: 0.62rem; text-transform: none; }
    .report-sheet__snapshot {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }
    .report-sheet__reported {
      display: grid;
      grid-template-columns: 88px 22px 1fr 22px;
      align-items: center;
      min-height: 52px;
      padding-block: 8px;
      border-block: 1px solid #dbe5ed;
      color: #1a344d;
    }
    .report-sheet__reported strong {
      font-size: 0.37rem;
      line-height: 1.35;
      letter-spacing: 0.12em;
    }
    .report-sheet__reported span {
      color: #368bc5;
      font-family: Georgia, serif;
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 0.6;
    }
    .report-sheet__reported p {
      margin: 0;
      color: #1a2f44;
      font-size: clamp(0.52rem, 0.66vw, 0.66rem);
    }
    .report-sheet__diagnostic > strong {
      display: block;
      margin-bottom: 7px;
      color: #334b63;
      font-size: 0.42rem;
      letter-spacing: 0.12em;
    }
    .report-sheet__diagnostic-card {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 9px;
      align-items: start;
      width: 82%;
      padding: 9px 11px;
      border: 1px solid #d5e1ea;
      border-radius: 7px;
      background: #fbfdff;
    }
    .report-sheet__diagnostic-card i {
      position: relative;
      display: block;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: #e8f4fb;
    }
    .report-sheet__diagnostic-card i::after {
      content: '';
      position: absolute;
      top: 7px;
      left: 10px;
      width: 6px;
      height: 11px;
      border-right: 2px solid #328bc6;
      border-bottom: 2px solid #328bc6;
      transform: rotate(40deg);
    }
    .report-sheet__diagnostic-card span { display: grid; gap: 3px; }
    .report-sheet__diagnostic-card small { color: #74889c; font-size: 0.34rem; letter-spacing: 0.09em; }
    .report-sheet__diagnostic-card b { color: #19324a; font-size: clamp(0.43rem, 0.55vw, 0.55rem); line-height: 1.4; }
    .report-sheet__section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid #dbe5ed;
      color: #17334e;
      font-size: 0.58rem;
      letter-spacing: 0.1em;
    }
    .report-sheet__section-head span {
      padding: 4px 6px;
      border-radius: 4px;
      background: #e8f4fb;
      color: #247fbb;
      font-size: 0.42rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    .report-sheet--timeline > small {
      display: block;
      margin-top: 10px;
      color: #718496;
      font-size: 0.4rem;
      font-weight: 700;
      letter-spacing: 0.08em;
    }
    .report-sheet__timeline-list {
      position: relative;
      display: grid;
      gap: 7px;
      margin-top: 9px;
      padding-left: 12px;
    }
    .report-sheet__timeline-list::before {
      content: '';
      position: absolute;
      top: 5px;
      bottom: 5px;
      left: 3px;
      width: 1px;
      background: #8dcaf0;
    }
    .report-sheet__timeline-list div {
      position: relative;
      display: grid;
      gap: 2px;
      padding: 7px 8px;
      border: 1px solid #dbe5ed;
      border-radius: 5px;
      background: #fbfdff;
    }
    .report-sheet__timeline-list div::before {
      content: '';
      position: absolute;
      top: 13px;
      left: -13px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #3ba9ff;
    }
    .report-sheet__timeline-list i { color: #b87a20; font-size: 0.38rem; font-style: normal; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
    .report-sheet__timeline-list strong { color: #1a344d; font-size: 0.51rem; }
    .report-sheet__timeline-list span { color: #708295; font-size: 0.42rem; }
    .report-sheet--gallery { padding: 16px; }
    .report-sheet__photo-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(3, 1fr);
      gap: 6px;
      height: calc(100% - 74px);
      margin-top: 10px;
    }
    .report-sheet__photo-grid img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
      border-radius: 4px;
      object-fit: cover;
    }
    .report-sheet__photo-grid img:last-child { object-position: 50% 50%; }
    .report-sheet__photo-grid .report-sheet__photo-detail {
      object-position: 63% 42%;
    }
    .report-sheet__gallery-note {
      display: block;
      margin-top: 7px;
      color: #65798b;
      font-size: 0.38rem;
      letter-spacing: 0.03em;
    }
    .report-showcase__ledger {
      position: relative;
      z-index: 7;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: 40px;
      margin-top: 24px;
      padding: 16px 24px;
      border: 1px solid rgba(140,170,205,0.25);
      border-radius: 14px;
      background: #0b111b;
      box-shadow: 0 20px 60px rgba(0,0,0,0.25);
      opacity: var(--report-ledger-opacity, 1);
      transform: translate3d(0, var(--report-ledger-y, 0), 0) scale(var(--report-ledger-scale, 1));
    }
    .report-showcase__ledger-item {
      position: relative;
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
      min-height: 72px;
      color: #8390a2;
    }
    .report-showcase__ledger-item:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 50%;
      right: -31px;
      z-index: 3;
      width: 22px;
      border-top: 1px dashed var(--accent);
    }
    .report-showcase__ledger-item:not(:last-child)::before {
      content: '';
      position: absolute;
      top: calc(50% - 4px);
      right: -31px;
      z-index: 4;
      width: 7px;
      height: 7px;
      border-top: 1px solid var(--accent);
      border-right: 1px solid var(--accent);
      transform: rotate(45deg);
    }
    .report-showcase__ledger-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      flex: 0 0 54px;
      border: 1px solid rgba(59,169,255,0.35);
      border-radius: 10px;
      background: rgba(59,169,255,0.11);
      color: var(--accent);
    }
    .report-showcase__ledger-icon svg {
      width: 25px;
      height: 25px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .report-showcase__ledger-item strong {
      color: #f1f6fb;
      font-size: clamp(1.05rem, 1.45vw, 1.5rem);
      letter-spacing: -0.03em;
      white-space: nowrap;
    }
    .report-showcase__ledger-copy {
      display: flex;
      min-width: 0;
      align-items: baseline;
      gap: 8px;
    }
    .report-showcase__ledger-copy > span {
      font-size: 0.9rem;
      white-space: nowrap;
    }
    .report-showcase__ledger-item--result strong {
      font-size: clamp(0.95rem, 1.25vw, 1.2rem);
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .report-showcase.is-scroll-motion .report-showcase__page,
    .report-showcase.is-scroll-motion .report-showcase__ledger { will-change: transform, opacity; }

    @media (max-width: 840px) {
      .report-showcase__stage {
        grid-template-columns: 1fr;
        min-height: auto;
      }
      .report-showcase__copy { max-width: 760px; }
      .report-showcase__visual {
        min-height: 440px;
        margin-right: -120px;
      }
      .report-showcase__page--cover { width: min(420px, 58vw); height: min(430px, 62vw); }
      .report-showcase__page--timeline-one { left: 40%; width: min(280px, 36vw); height: min(390px, 54vw); }
      .report-showcase__page--timeline-two { left: 58%; width: min(260px, 32vw); height: min(350px, 49vw); }
      .report-showcase__ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; margin-top: 18px; }
      .report-showcase__ledger-item:nth-child(2)::after,
      .report-showcase__ledger-item:nth-child(2)::before { display: none; }
    }
    @media (max-width: 680px) {
      .report-showcase { padding-block: 84px; }
      .report-showcase::before { background-size: 64px 64px; }
      .report-showcase__stage { gap: 42px; }
      .report-showcase__title { font-size: clamp(2.25rem, 11vw, 3.35rem); }
      .report-showcase__body { font-size: 1rem; }
      .report-showcase__cta { width: 100%; padding-inline: 18px; }
      .report-showcase__visual {
        min-height: 350px;
        margin-right: -90px;
      }
      .report-showcase__page { top: 12px; }
      .report-showcase__page--cover { width: 68vw; height: 82vw; }
      .report-showcase__page--timeline-one { top: 34px; left: 56%; width: 43vw; height: 74vw; }
      .report-showcase__page--timeline-two { display: none; }
      .report-showcase__ledger { grid-template-columns: 1fr; gap: 0; margin-top: 16px; padding: 10px 18px; }
      .report-showcase__ledger-item { min-height: 88px; }
      .report-showcase__ledger-item::after,
      .report-showcase__ledger-item::before { display: none !important; }
    }
    @media (prefers-reduced-motion: reduce) {
      .report-showcase__page,
      .report-showcase__ledger { will-change: auto; }
    }

    /* ── Features — Alternating Full-Width ── */
    .feat-section {
      padding: 60px 0 0;
    }
    .feat-section__sub {
      font-size: 1.05rem;
      color: var(--text-secondary);
      margin-top: 16px;
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }
    .feat-eyebrow {
      font-family: 'Michroma', monospace;
      font-size: 0.7rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 20px;
      font-weight: 400;
    }
    .feat-row {
      display: flex;
      align-items: center;
      gap: 80px;
      max-width: 1180px;
      margin: 0 auto;
      padding: 100px 28px;
      position: relative;
    }
    .feat-row--reverse {
      flex-direction: row-reverse;
    }
    .feat-text {
      flex: 1;
      min-width: 0;
    }
    .feat-visual {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .feat-label {
      display: inline-block;
      font-family: 'Michroma', monospace;
      font-size: 0.65rem;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--accent);
      padding: 5px 14px;
      border: 1px solid rgba(59,169,255,0.2);
      border-radius: 100px;
      margin-bottom: 24px;
    }
    .feat-pain {
      font-family: 'DM Serif Display', Georgia, serif;
      font-style: italic;
      font-size: 1rem;
      color: var(--text-secondary);
      line-height: 1.65;
      padding: 18px 22px;
      border-radius: var(--radius-md);
      background: rgba(255,77,77,0.03);
      border-left: 3px solid rgba(255,77,77,0.3);
      margin-bottom: 28px;
    }
    .feat-heading {
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 800;
      letter-spacing: -1px;
      color: var(--text-primary);
      margin-bottom: 16px;
      line-height: 1.15;
    }
    .feat-desc {
      font-size: 1rem;
      color: var(--text-secondary);
      line-height: 1.75;
      margin-bottom: 24px;
      max-width: 480px;
    }
    .feat-benefit {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 0.9rem;
      color: rgba(232,232,240,0.75);
      line-height: 1.65;
      padding: 16px 20px;
      border-radius: var(--radius-md);
      background: rgba(59,169,255,0.04);
      border: 1px solid rgba(59,169,255,0.1);
    }
    .feat-benefit svg {
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* Divider between feature rows */
    .feat-row + .feat-row::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(59,169,255,0.2), transparent);
    }

    /* ── Feature Grid Visual (inspired by reference) ── */
    .feat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 440px;
      aspect-ratio: 4 / 3;
      position: relative;
    }
    .feat-grid__cell {
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.05);
      background: rgba(255,255,255,0.015);
      transition: border-color 0.5s, background 0.5s, box-shadow 0.5s;
    }
    .feat-grid__cell--active {
      border-color: rgba(59,169,255,0.35);
      background: rgba(59,169,255,0.06);
      box-shadow:
        0 0 40px rgba(59,169,255,0.15),
        0 0 80px rgba(59,169,255,0.08),
        inset 0 0 30px rgba(59,169,255,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
    }
    .feat-grid__cell--active svg {
      width: 36px;
      height: 36px;
      opacity: 0.8;
      filter: drop-shadow(0 0 12px rgba(59,169,255,0.4));
    }
    /* Radial glow behind active cell */
    .feat-grid__cell--active::before {
      content: '';
      position: absolute;
      inset: -40px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(59,169,255,0.2) 0%, transparent 70%);
      z-index: -1;
      animation: featGlowPulse 4s ease-in-out infinite alternate;
    }
    @keyframes featGlowPulse {
      0% { opacity: 0.5; transform: scale(0.9); }
      100% { opacity: 1; transform: scale(1.1); }
    }

    /* Overlays positioned over the grid */
    .feat-grid__route,
    .feat-grid__timeline,
    .feat-grid__summary,
    .feat-grid__photos {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 3;
    }

    /* Drive Mode: GPS route */
    .feat-grid__route svg {
      width: 100%;
      height: 100%;
    }

    /* Session Recording: Timeline dots */
    .feat-grid__timeline {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 20px 0 20px 24px;
    }
    .feat-tl__line {
      position: absolute;
      left: 35px;
      top: 20px;
      bottom: 20px;
      width: 2px;
      background: linear-gradient(180deg, transparent, rgba(59,169,255,0.3), transparent);
    }
    .feat-tl__dot {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .feat-tl__dot::before {
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 10px rgba(59,169,255,0.4);
      flex-shrink: 0;
    }
    .feat-tl__dot span {
      font-family: 'Michroma', monospace;
      font-size: 0.65rem;
      color: var(--accent);
      letter-spacing: 1px;
      opacity: 0.6;
    }
    .feat-tl__dot--1 { animation: featTlFade 3s ease-in-out infinite; }
    .feat-tl__dot--2 { animation: featTlFade 3s ease-in-out 0.5s infinite; }
    .feat-tl__dot--3 { animation: featTlFade 3s ease-in-out 1s infinite; }
    .feat-tl__dot--4 { animation: featTlFade 3s ease-in-out 1.5s infinite; }
    @keyframes featTlFade {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 1; }
    }

    /* Customer Summary: Card overlay */
    .feat-grid__summary {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding: 20px;
    }
    .feat-summary__card {
      background: rgba(10,10,18,0.9);
      border: 1px solid rgba(59,169,255,0.15);
      border-radius: var(--radius-md);
      padding: 16px 20px;
      width: 200px;
      backdrop-filter: blur(12px);
      box-shadow: 0 0 40px rgba(59,169,255,0.08);
    }
    .feat-summary__header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--accent);
      margin-bottom: 12px;
      letter-spacing: 0.5px;
    }
    .feat-summary__line {
      height: 6px;
      border-radius: 3px;
      background: rgba(255,255,255,0.06);
      margin-bottom: 8px;
      animation: featSummaryShimmer 3s ease-in-out infinite;
    }
    .feat-summary__line--w80 { width: 80%; animation-delay: 0s; }
    .feat-summary__line--w100 { width: 100%; animation-delay: 0.3s; }
    .feat-summary__line--w60 { width: 60%; animation-delay: 0.6s; }
    .feat-summary__line--w90 { width: 90%; animation-delay: 0.9s; }
    @keyframes featSummaryShimmer {
      0%, 100% { background: rgba(255,255,255,0.06); }
      50% { background: rgba(59,169,255,0.12); }
    }

    /* Photo Evidence: Photo grid */
    .feat-grid__photos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 8px;
      padding: 16px;
    }
    .feat-photo {
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(10,10,18,0.8);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      backdrop-filter: blur(8px);
    }
    .feat-photo__img {
      flex: 1;
      min-height: 50px;
      background: linear-gradient(135deg, rgba(59,169,255,0.08) 0%, rgba(59,169,255,0.02) 100%);
    }
    .feat-photo__img--b { background: linear-gradient(135deg, rgba(255,77,77,0.08) 0%, rgba(255,77,77,0.02) 100%); }
    .feat-photo__img--c { background: linear-gradient(135deg, rgba(245,197,66,0.08) 0%, rgba(245,197,66,0.02) 100%); }
    .feat-photo__img--d { background: linear-gradient(135deg, rgba(44,180,99,0.08) 0%, rgba(44,180,99,0.02) 100%); }
    .feat-photo__label {
      display: block;
      font-size: 0.62rem;
      font-weight: 600;
      color: var(--text-secondary);
      padding: 6px 8px 0;
      letter-spacing: 0.3px;
    }
    .feat-photo__time {
      display: block;
      font-family: 'Michroma', monospace;
      font-size: 0.55rem;
      color: var(--accent);
      padding: 2px 8px 6px;
      opacity: 0.6;
    }

    /* ── Drive Routes Card (real app rendition) ── */
    .drive-card {
      width: 100%;
      max-width: 480px;
      border-radius: 20px;
      background: linear-gradient(145deg, #141420 0%, #0e0e1a 50%, #0a0a14 100%);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow:
        0 0 80px rgba(59,169,255,0.06),
        0 40px 80px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.04);
      overflow: hidden;
    }
    .drive-card__header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 18px 22px 12px;
    }
    .drive-card__title {
      font-family: 'Michroma', monospace;
      font-size: 0.7rem;
      letter-spacing: 2px;
      color: var(--text-primary);
    }
    .drive-card__count {
      font-size: 0.72rem;
      color: var(--text-muted);
    }
    .drive-card__tabs {
      display: flex;
      gap: 6px;
      padding: 0 22px 14px;
      border-bottom: 1px solid var(--border);
    }
    .drive-tab {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 100px;
      border: 1px solid rgba(255,255,255,0.06);
      background: transparent;
      color: var(--text-muted);
      font-size: 0.7rem;
      font-family: var(--font);
      cursor: default;
      transition: all 0.3s;
      flex-wrap: wrap;
    }
    .drive-tab--active {
      border-color: rgba(59,169,255,0.25);
      background: rgba(59,169,255,0.06);
      color: var(--text-primary);
    }
    .drive-tab__dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
    }
    .drive-tab__dot--white { background: var(--text-muted); }
    .drive-tab__dot--accent { background: var(--accent); }
    .drive-tab__meta {
      font-size: 0.6rem;
      color: var(--text-muted);
      width: 100%;
    }
    .drive-card__info {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 22px;
      flex-wrap: wrap;
    }
    .drive-card__info-label {
      font-family: 'Michroma', monospace;
      font-size: 0.58rem;
      color: var(--text-muted);
      letter-spacing: 1.5px;
    }
    .drive-card__info-text {
      font-size: 0.78rem;
      font-style: italic;
      color: var(--text-secondary);
      flex: 1;
    }
    .drive-card__badge {
      font-family: 'Michroma', monospace;
      font-size: 0.55rem;
      letter-spacing: 1.5px;
      padding: 5px 12px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 4px;
      color: var(--text-primary);
    }

    /* Map area */
    .drive-card__map {
      position: relative;
      height: 220px;
      margin: 0 22px;
      border-radius: var(--radius-md);
      background: linear-gradient(145deg, #0c0c18 0%, #080812 100%);
      border: 1px solid rgba(255,255,255,0.04);
      overflow: hidden;
    }
    .drive-map__roads {
      position: absolute;
      inset: 0;
    }
    .drive-map__road {
      position: absolute;
      background: rgba(255,255,255,0.04);
    }
    .drive-map__road--h1 { top: 35%; left: 0; right: 0; height: 1px; }
    .drive-map__road--h2 { top: 65%; left: 0; right: 0; height: 1px; }
    .drive-map__road--v1 { left: 40%; top: 0; bottom: 0; width: 1px; }
    .drive-map__road--v2 { left: 70%; top: 0; bottom: 0; width: 1px; }
    .drive-map__road--d1 {
      top: 0; left: 20%; width: 1px; height: 141%;
      transform: rotate(30deg);
      transform-origin: top left;
    }
    .drive-map__route {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .drive-map__legend {
      position: absolute;
      bottom: 10px;
      left: 12px;
      display: flex;
      gap: 14px;
      font-size: 0.6rem;
      color: var(--text-muted);
    }
    .drive-map__legend span {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .drive-map__legend-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
    .drive-map__legend-dot--green { background: var(--green); }
    .drive-map__legend-dot--red { background: var(--red); }
    .drive-map__legend-line {
      width: 16px;
      height: 2px;
      background: var(--accent);
      border-radius: 1px;
    }

    /* Stats bar */
    .drive-card__stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      padding: 18px 22px 20px;
    }
    .drive-stat {
      text-align: center;
      padding: 12px 8px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.05);
      background: rgba(255,255,255,0.015);
    }
    .drive-stat__num {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .drive-stat__label {
      display: block;
      font-family: 'Michroma', monospace;
      font-size: 0.5rem;
      letter-spacing: 1.5px;
      color: var(--text-muted);
    }

    /* ── Knowledge Base Card (real app rendition) ── */
    .kb-card {
      width: 100%;
      max-width: 480px;
      border-radius: 20px;
      background: linear-gradient(145deg, #141420 0%, #0e0e1a 50%, #0a0a14 100%);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow:
        0 0 80px rgba(59,169,255,0.06),
        0 40px 80px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.04);
      overflow: hidden;
    }
    .kb-card__header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 22px;
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
    }
    .kb-card__header-icon {
      width: 20px; height: 20px;
      border-radius: 50%;
      background: rgba(59,169,255,0.15);
      display: flex; align-items: center; justify-content: center;
    }
    .kb-card__header-title {
      font-family: 'Michroma', monospace;
      font-size: 0.65rem;
      letter-spacing: 1.5px;
      color: var(--text-secondary);
    }
    .kb-badge {
      font-size: 0.58rem;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 100px;
      letter-spacing: 0.3px;
    }
    .kb-badge--resolved { background: rgba(44,180,99,0.12); color: var(--green); }
    .kb-badge--level { background: rgba(245,197,66,0.12); color: var(--yellow); }
    .kb-badge--time { background: rgba(59,169,255,0.1); color: var(--accent); }

    .kb-card__category {
      display: inline-block;
      margin: 16px 22px 8px;
      font-size: 0.68rem;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 100px;
      background: rgba(44,180,99,0.1);
      color: var(--green);
      border: 1px solid rgba(44,180,99,0.2);
    }
    .kb-card__title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
      padding: 0 22px;
      line-height: 1.4;
      margin-bottom: 4px;
    }
    .kb-card__meta {
      font-size: 0.68rem;
      color: var(--text-muted);
      padding: 0 22px 14px;
    }

    /* Context table */
    .kb-card__context {
      padding: 0 22px 14px;
    }
    .kb-card__context-label {
      font-family: 'Michroma', monospace;
      font-size: 0.55rem;
      letter-spacing: 1.5px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    .kb-context-row {
      display: flex;
      gap: 16px;
      padding: 3px 0;
      font-size: 0.75rem;
    }
    .kb-context-row__key {
      color: var(--text-muted);
      min-width: 80px;
    }
    .kb-context-row__val {
      color: var(--text-primary);
      font-weight: 600;
    }

    /* Steps */
    .kb-card__steps {
      padding: 0 22px 16px;
    }
    .kb-card__steps-label {
      font-family: 'Michroma', monospace;
      font-size: 0.55rem;
      letter-spacing: 1.5px;
      color: var(--text-muted);
      margin-bottom: 10px;
    }
    .kb-step {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 5px 0;
      font-size: 0.73rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    .kb-step__check {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(44,180,99,0.12);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .kb-step__check svg { width: 10px; height: 10px; }

    /* Resolved banner */
    .kb-card__resolved {
      margin: 8px 22px;
      padding: 12px 16px;
      border-radius: var(--radius-sm);
      background: rgba(44,180,99,0.06);
      border-left: 3px solid var(--green);
    }
    .kb-card__resolved-title {
      font-family: 'Michroma', monospace;
      font-size: 0.6rem;
      letter-spacing: 1.5px;
      color: var(--green);
      font-weight: 700;
      margin-bottom: 4px;
    }
    .kb-card__resolved-text {
      font-size: 0.75rem;
      color: var(--text-secondary);
    }

    /* Tags */
    .kb-card__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 14px 22px 18px;
    }
    .kb-tag {
      font-size: 0.62rem;
      font-weight: 500;
      padding: 4px 10px;
      border-radius: 100px;
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--text-muted);
      background: rgba(255,255,255,0.02);
    }
    .kb-tag--highlight {
      border-color: rgba(245,197,66,0.2);
      background: rgba(245,197,66,0.06);
      color: var(--yellow);
    }
    .kb-tag--accent {
      border-color: rgba(59,169,255,0.2);
      background: rgba(59,169,255,0.06);
      color: var(--accent);
    }

    /* ── Timeline Card (real app rendition) ── */
    .tl-card {
      width: 100%;
      max-width: 520px;
      border-radius: 20px;
      background: linear-gradient(145deg, #141420 0%, #0e0e1a 50%, #0a0a14 100%);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 0 80px rgba(59,169,255,0.06), 0 40px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
      overflow: hidden;
    }
    .tl-card__header {
      padding: 14px 22px;
      border-bottom: 1px solid var(--accent);
      background: rgba(59,169,255,0.04);
    }
    .tl-card__header-label {
      font-family: 'Michroma', monospace;
      font-size: 0.65rem;
      letter-spacing: 2px;
      color: var(--text-primary);
    }
    .tl-card__title-bar {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 22px;
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
    }
    .tl-card__badge-diag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--accent);
      padding: 5px 12px;
      border-radius: 100px;
      border: 1px solid rgba(59,169,255,0.25);
      background: rgba(59,169,255,0.06);
      white-space: nowrap;
    }
    .tl-card__session-title {
      font-size: 0.82rem;
      color: var(--text-primary);
      font-weight: 500;
    }
    .tl-entries { padding: 8px 0; }
    .tl-entry {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 22px;
      position: relative;
      transition: background 0.2s;
    }
    .tl-entry:hover { background: rgba(255,255,255,0.015); }
    .tl-entry__bar {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      border-radius: 0 2px 2px 0;
    }
    .tl-entry__bar--gray { background: rgba(255,255,255,0.1); }
    .tl-entry__bar--yellow { background: var(--yellow); }
    .tl-entry__bar--green { background: var(--green); }
    .tl-entry__bar--accent { background: var(--accent); }
    .tl-entry__icon {
      width: 32px; height: 32px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 2px;
    }
    .tl-entry__icon--gray { background: rgba(255,255,255,0.05); color: var(--text-muted); }
    .tl-entry__icon--yellow { background: rgba(245,197,66,0.1); color: var(--yellow); }
    .tl-entry__icon--green { background: rgba(44,180,99,0.1); color: var(--green); }
    .tl-entry__icon--teal { background: rgba(44,180,150,0.1); color: #2cb4a0; }
    .tl-entry__icon--accent { background: rgba(59,169,255,0.1); color: var(--accent); }
    .tl-entry__content { flex: 1; min-width: 0; }
    .tl-entry__title {
      font-size: 0.82rem; font-weight: 700;
      color: var(--text-primary); margin-bottom: 3px;
    }
    .tl-entry__desc {
      font-size: 0.72rem; color: var(--text-muted); line-height: 1.5;
    }
    .tl-entry__time { font-size: 0.62rem; color: var(--text-muted); margin-top: 3px; }
    .tl-entry__tags {
      display: flex; gap: 6px; flex-shrink: 0;
      align-items: center; margin-top: 4px;
    }
    .tl-etag {
      font-size: 0.58rem; font-weight: 500;
      padding: 3px 8px; border-radius: 4px; color: var(--text-muted);
    }
    .tl-etag--info { background: rgba(59,169,255,0.1); color: var(--accent); }
    .tl-etag--pass { background: rgba(44,180,99,0.1); color: var(--green); }
    .tl-etag--confirmed { background: rgba(44,180,99,0.15); color: var(--green); font-weight: 700; }
    .tl-card__root {
      margin: 8px 22px 18px; padding: 14px 16px;
      border-top: 2px solid var(--yellow);
    }
    .tl-card__root-label {
      font-family: 'Michroma', monospace;
      font-size: 0.55rem; letter-spacing: 1.5px;
      color: var(--text-muted); margin-bottom: 6px;
    }
    .tl-card__root-text {
      font-size: 0.78rem; color: var(--text-secondary); line-height: 1.6;
    }

    /* ── Customer Summary Card (real app rendition) ── */
    .cs-card {
      width: 100%; max-width: 480px;
      border-radius: 20px;
      background: linear-gradient(145deg, #141420 0%, #0e0e1a 50%, #0a0a14 100%);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 0 80px rgba(59,169,255,0.06), 0 40px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
      overflow: hidden;
    }
    .cs-card__header {
      display: flex; align-items: center; gap: 14px;
      padding: 20px 22px; border-bottom: 1px solid var(--border);
    }
    .cs-card__header-icon {
      width: 36px; height: 36px; border-radius: 10px;
      background: rgba(59,169,255,0.1);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .cs-card__header-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
    .cs-card__header-date { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }
    .cs-card__sections { padding: 8px 0; }
    .cs-section { padding: 12px 22px; }
    .cs-section__label {
      font-family: 'Michroma', monospace;
      font-size: 0.55rem; letter-spacing: 1.5px;
      color: var(--accent); margin-bottom: 8px;
      display: flex; align-items: center; gap: 8px;
    }
    .cs-section__label::before {
      content: ''; width: 5px; height: 5px;
      border-radius: 50%; background: var(--accent);
    }
    .cs-section__text { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.65; }
    .cs-recommend {
      display: flex; gap: 12px; padding: 14px 16px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
    }
    .cs-recommend__icon { flex-shrink: 0; margin-top: 2px; }
    .cs-recommend__title { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
    .cs-recommend__text { font-size: 0.75rem; color: var(--text-muted); line-height: 1.6; }
    .cs-card__actions {
      display: flex; justify-content: center; gap: 10px;
      padding: 16px 22px 20px; border-top: 1px solid var(--border);
    }
    .cs-action {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font); font-size: 0.75rem;
      padding: 8px 16px; border-radius: var(--radius-sm);
      border: 1px solid rgba(255,255,255,0.08);
      background: transparent; color: var(--text-secondary); cursor: default;
    }
    .cs-action--primary {
      background: var(--accent); border-color: var(--accent);
      color: #fff; font-weight: 600;
    }

    /* ── Evidence Card (real app rendition) ── */
    /* Interactive 360-degree vehicle evidence map */
    .e360 {
      --e360-accent: #38a9ff;
      --e360-warning: #ffad4d;
      width: min(100%, 720px);
      overflow: hidden;
      border: 1px solid rgba(56,169,255,0.25);
      border-radius: 18px;
      background:
        radial-gradient(circle at 24% 35%, rgba(56,169,255,0.1), transparent 35%),
        linear-gradient(145deg, rgba(8,15,26,0.98), rgba(4,8,14,0.98));
      box-shadow: 0 28px 80px rgba(0,0,0,0.52), inset 0 0 0 1px rgba(255,255,255,0.02);
      color: var(--text-primary);
      text-align: left;
    }
    .e360 button { font: inherit; }
    .e360__topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 15px 17px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .e360__topbar > div:first-child {
      display: grid;
      gap: 3px;
    }
    .e360__overline {
      color: var(--e360-accent);
      font: 700 0.58rem/1 var(--mono);
      letter-spacing: 0.16em;
    }
    .e360__topbar strong {
      color: rgba(238,246,255,0.9);
      font-size: 0.78rem;
      font-weight: 600;
    }
    .e360__complete {
      display: grid;
      justify-items: end;
      gap: 3px;
      color: var(--text-muted);
      font-size: 0.58rem;
      white-space: nowrap;
    }
    .e360__complete b {
      color: var(--green);
      font: 700 0.76rem/1 var(--mono);
    }
    .e360__phases {
      display: flex;
      gap: 5px;
      padding: 9px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.012);
    }
    .e360__phase {
      padding: 6px 12px;
      border: 1px solid transparent;
      border-radius: 7px;
      background: transparent;
      color: var(--text-muted);
      font-size: 0.64rem;
      font-weight: 650;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      transition: 0.2s ease;
    }
    .e360__phase:hover { color: var(--text-primary); background: rgba(255,255,255,0.035); }
    .e360__phase.is-active {
      border-color: rgba(56,169,255,0.3);
      background: rgba(56,169,255,0.11);
      color: #bfe5ff;
    }
    .e360[data-phase="during"] .e360__phase.is-active {
      border-color: rgba(255,173,77,0.36);
      background: rgba(255,173,77,0.1);
      color: #ffd59e;
    }
    .e360[data-phase="after"] .e360__phase.is-active {
      border-color: rgba(67,214,139,0.34);
      background: rgba(67,214,139,0.1);
      color: #a7f2ce;
    }
    .e360__workspace {
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(220px, 0.96fr);
      min-height: 350px;
    }
    .e360__viewer {
      position: relative;
      min-width: 0;
      overflow: hidden;
      border-right: 1px solid rgba(255,255,255,0.07);
      background:
        linear-gradient(rgba(56,169,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,169,255,0.04) 1px, transparent 1px),
        radial-gradient(circle at 50% 46%, rgba(56,169,255,0.1), transparent 48%);
      background-size: 26px 26px, 26px 26px, auto;
      cursor: grab;
      touch-action: pan-y;
      user-select: none;
      outline: none;
    }
    .e360__viewer:active { cursor: grabbing; }
    .e360__viewer:focus-visible {
      box-shadow: inset 0 0 0 2px var(--e360-accent);
    }
    .e360__orbit {
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: 14%;
      height: 22%;
      border: 1px solid rgba(56,169,255,0.24);
      border-radius: 50%;
      box-shadow: 0 0 22px rgba(56,169,255,0.08);
      transform: perspective(280px) rotateX(67deg);
    }
    .e360__orbit::before,
    .e360__orbit::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--e360-accent);
      box-shadow: 0 0 10px var(--e360-accent);
    }
    .e360__orbit::before { left: -3px; }
    .e360__orbit::after { right: -3px; }
    .e360__vehicle {
      position: absolute;
      left: 3%;
      right: 3%;
      top: 13%;
      height: 64%;
      background-image: url("assets/evidence-vehicle-turntable-v1.png");
      background-repeat: no-repeat;
      background-size: 300% 200%;
      background-position: 0% 0%;
      filter: saturate(1.12) contrast(1.08) brightness(1.05);
      transition: filter 0.25s ease;
      pointer-events: none;
    }
    .e360__viewer.is-dragging .e360__vehicle {
      filter: saturate(1.22) contrast(1.12) brightness(1.08) drop-shadow(0 0 10px rgba(56,169,255,0.16));
    }
    .e360__hotspot {
      position: absolute;
      left: 70%;
      top: 48%;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 1px solid rgba(255,173,77,0.82);
      border-radius: 50%;
      background: rgba(255,173,77,0.17);
      cursor: pointer;
      box-shadow: 0 0 20px rgba(255,173,77,0.42);
      transform: translate(-50%,-50%);
      transition: left 0.22s ease, top 0.22s ease, opacity 0.18s ease, transform 0.18s ease;
      animation: e360HotspotPulse 1.8s ease-in-out infinite;
    }
    .e360__hotspot:hover { transform: translate(-50%,-50%) scale(1.12); }
    .e360__hotspot span {
      position: absolute;
      inset: 7px;
      border-radius: 50%;
      background: var(--e360-warning);
      box-shadow: 0 0 9px var(--e360-warning);
    }
    .e360[data-phase="after"] .e360__hotspot {
      border-color: rgba(67,214,139,0.8);
      background: rgba(67,214,139,0.14);
      box-shadow: 0 0 20px rgba(67,214,139,0.36);
    }
    .e360[data-phase="after"] .e360__hotspot span {
      background: var(--green);
      box-shadow: 0 0 9px var(--green);
    }
    .e360__angle {
      position: absolute;
      top: 12px;
      left: 13px;
      display: grid;
      gap: 3px;
      color: rgba(213,228,244,0.42);
      font: 600 0.5rem/1 var(--mono);
      letter-spacing: 0.13em;
    }
    .e360__angle b { color: var(--e360-accent); font-size: 0.72rem; }
    .e360__drag-hint {
      position: absolute;
      left: 50%;
      bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(205,221,238,0.45);
      font: 600 0.52rem/1 var(--mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transform: translateX(-50%);
      white-space: nowrap;
    }
    .e360__drag-hint span { color: var(--e360-accent); }
    .e360__evidence {
      min-width: 0;
      background: rgba(5,9,15,0.78);
    }
    .e360__photo-wrap {
      position: relative;
      height: 205px;
      overflow: hidden;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      background: #0a0e14;
    }
    .e360__photo {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.9) contrast(1.04) brightness(0.88);
      transition: opacity 0.18s ease, filter 0.25s ease;
    }
    .e360[data-phase="after"] .e360__photo {
      filter: saturate(0.8) contrast(1.02) brightness(0.82);
    }
    .e360__photo-phase {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 4px 7px;
      border: 1px solid rgba(56,169,255,0.34);
      border-radius: 5px;
      background: rgba(4,9,16,0.78);
      color: #bfe5ff;
      font: 700 0.5rem/1 var(--mono);
      letter-spacing: 0.12em;
      backdrop-filter: blur(6px);
    }
    .e360__marker {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 3px 6px 3px 4px;
      border: 1px solid rgba(255,173,77,0.48);
      border-radius: 999px;
      background: rgba(7,10,15,0.76);
      color: #ffe0b5;
      font-size: 0.48rem;
      cursor: pointer;
      backdrop-filter: blur(6px);
    }
    .e360__marker i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--e360-warning);
      box-shadow: 0 0 8px var(--e360-warning);
    }
    .e360__marker--lens { left: 54%; top: 57%; }
    .e360__marker--tab { left: 55%; top: 19%; }
    .e360__marker--gap { left: 8%; bottom: 15%; }
    .e360--markers-off .e360__marker,
    .e360[data-phase="after"] .e360__marker { display: none; }
    .e360__evidence-body { padding: 13px 14px 12px; }
    .e360__evidence-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }
    .e360__evidence-head > div {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .e360__evidence-head span:first-child {
      color: var(--e360-accent);
      font: 700 0.48rem/1 var(--mono);
      letter-spacing: 0.11em;
    }
    .e360__evidence-title {
      color: #eaf2fb;
      font-size: 0.76rem;
      line-height: 1.2;
    }
    .e360__severity {
      flex: 0 0 auto;
      padding: 4px 6px;
      border-radius: 4px;
      background: rgba(255,173,77,0.12);
      color: #ffc776;
      font: 700 0.45rem/1 var(--mono);
      letter-spacing: 0.08em;
    }
    .e360[data-phase="after"] .e360__severity {
      background: rgba(67,214,139,0.12);
      color: #8ce9bb;
    }
    .e360__note {
      margin: 10px 0;
      color: var(--text-secondary);
      font-size: 0.64rem;
      font-style: italic;
      line-height: 1.45;
    }
    .e360__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .e360__meta span {
      padding: 4px 6px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 4px;
      color: var(--text-muted);
      font: 600 0.46rem/1 var(--mono);
    }
    .e360__timeline {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: 12px 11px 14px;
      border-top: 1px solid rgba(255,255,255,0.07);
      background: rgba(255,255,255,0.012);
    }
    .e360__timeline::before {
      content: "";
      position: absolute;
      left: 12.5%;
      right: 12.5%;
      top: 19px;
      height: 1px;
      background: rgba(255,255,255,0.1);
    }
    .e360__event {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      gap: 8px;
      padding: 0 3px;
      border: 0;
      background: transparent;
      color: var(--text-muted);
      font-size: 0.48rem;
      cursor: pointer;
    }
    .e360__event i {
      width: 9px;
      height: 9px;
      border: 2px solid #0a1019;
      border-radius: 50%;
      background: #394556;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
    }
    .e360__event span { display: grid; justify-items: center; gap: 3px; text-align: center; }
    .e360__event b { color: rgba(219,231,245,0.68); font-family: var(--mono); }
    .e360__event.is-active { color: #d8eaff; }
    .e360__event.is-active i {
      background: var(--e360-accent);
      box-shadow: 0 0 12px var(--e360-accent);
    }
    .e360[data-phase="during"] .e360__event.is-active i {
      background: var(--e360-warning);
      box-shadow: 0 0 12px var(--e360-warning);
    }
    .e360[data-phase="after"] .e360__event.is-active i {
      background: var(--green);
      box-shadow: 0 0 12px var(--green);
    }
    .ev-card--legacy { display: none !important; }

    @keyframes e360HotspotPulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(255,173,77,0.34), 0 0 18px rgba(255,173,77,0.36); }
      50% { box-shadow: 0 0 0 8px rgba(255,173,77,0), 0 0 24px rgba(255,173,77,0.48); }
    }

    @media (max-width: 1100px) {
      .e360__workspace { grid-template-columns: 1fr; }
      .e360__viewer {
        min-height: 310px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.07);
      }
      .e360__photo-wrap { height: 240px; }
    }
    @media (max-width: 640px) {
      .e360__topbar { align-items: flex-start; }
      .e360__complete span { display: none; }
      .e360__viewer { min-height: 260px; }
      .e360__photo-wrap { height: 210px; }
      .e360__timeline { overflow-x: auto; grid-template-columns: repeat(4, minmax(90px,1fr)); }
      .e360__marker span { display: none; }
      .e360__marker { padding: 5px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .e360__hotspot,
      .e360__vehicle { animation: none; transition: none; }
    }

    /* Voice-labelled evidence: faithful web rendition of LabelModal.tsx */
    .feat-row--voice {
      --voice-blue: #58aaf5;
      max-width: 1440px;
      align-items: flex-start;
      gap: 48px;
    }
    .feat-row--voice .feat-text { flex: 0.9; }
    .feat-row--voice .feat-visual { flex: 1.35; padding-top: 42px; }
    .feat-row--voice .feat-heading { max-width: 520px; }
    .feat-row--voice .feat-desc { margin-top: 24px; }
    .voice-proof {
      margin-top: 26px;
      color: rgba(208,225,241,0.7);
      font-size: 0.84rem;
      font-weight: 600;
      line-height: 1.55;
    }
    .voice-evidence {
      position: relative;
      width: min(100%, 900px);
      aspect-ratio: 15 / 11;
      overflow: hidden;
      border-radius: 16px;
      background:
        radial-gradient(circle at 72% 56%, rgba(56,169,255,0.12), transparent 36%),
        linear-gradient(145deg, #07111e, #03070d 74%);
      box-shadow: 0 30px 80px rgba(0,0,0,0.46);
      color: #f4f6f8;
      text-align: left;
      isolation: isolate;
    }
    .voice-evidence::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image:
        linear-gradient(rgba(56,169,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,169,255,0.045) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
    }
    .voice-evidence button { font: inherit; }
    .voice-evidence__scene { position: absolute; inset: 0; overflow: hidden; }
    .voice-evidence__orbit {
      position: absolute;
      right: -4%;
      bottom: 2%;
      width: 102%;
      height: 30%;
      border: 1px solid rgba(56,169,255,0.24);
      border-radius: 50%;
      transform: perspective(320px) rotateX(67deg);
      box-shadow: 0 0 28px rgba(56,169,255,0.08);
    }
    .voice-evidence__vehicle {
      position: absolute;
      right: -10%;
      bottom: 0;
      width: 112%;
      height: 86%;
      background: url("assets/evidence-vehicle-turntable-v1.png") 50% 0% / 300% 200% no-repeat;
      filter: saturate(1.18) contrast(1.08) brightness(1.06) drop-shadow(0 16px 22px rgba(0,0,0,0.34));
      transition: filter 300ms cubic-bezier(0.16,1,0.3,1);
    }
    .voice-evidence__hotspot {
      position: absolute;
      z-index: 5;
      right: 27%;
      top: 46%;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 1px solid rgba(88,170,245,0.92);
      border-radius: 50%;
      background: rgba(32,116,191,0.28);
      box-shadow: 0 0 0 7px rgba(56,169,255,0.08), 0 0 24px rgba(56,169,255,0.44);
      cursor: pointer;
      transition: transform 180ms ease, background 180ms ease;
      animation: voiceHotspot 1.9s ease-in-out infinite;
    }
    .voice-evidence__hotspot:hover { transform: scale(1.1); background: rgba(56,169,255,0.38); }
    .voice-evidence__hotspot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
    .voice-evidence__hotspot span {
      position: absolute;
      inset: 14px;
      border-radius: 50%;
      background: #9ed5ff;
      box-shadow: 0 0 10px #58aaf5;
    }
    .voice-evidence__hint {
      position: absolute;
      right: 8%;
      bottom: 8%;
      color: rgba(197,220,241,0.66);
      font: 600 0.58rem/1 var(--font-mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: opacity 180ms ease;
    }
    .voice-demo:not([data-state="idle"]) .voice-evidence__hint { opacity: 0; }
    .label-sheet {
      position: relative;
      z-index: 2;
      width: min(100%, 500px);
      margin-top: 28px;
      overflow: hidden;
      border: 1px solid #373b45;
      border-radius: 24px;
      background: #181a20;
      box-shadow: 0 18px 46px rgba(0,0,0,0.46);
      transition: border-color 220ms ease, box-shadow 380ms cubic-bezier(0.16,1,0.3,1);
    }
    .voice-demo[data-state="listening"] .label-sheet { border-color: rgba(88,170,245,0.54); box-shadow: 0 22px 54px rgba(0,0,0,0.52); }
    .label-sheet__handle {
      width: 38px;
      height: 4px;
      margin: 10px auto 14px;
      border-radius: 2px;
      background: #515661;
    }
    .label-sheet__header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 18px;
      padding-bottom: 15px;
      border-bottom: 1px solid #343841;
    }
    .label-sheet__photo-column { flex: 0 0 64px; display: grid; justify-items: center; gap: 5px; }
    .label-sheet__preview {
      position: relative;
      width: 64px;
      height: 64px;
      overflow: hidden;
      border: 1px solid #3b404a;
      border-radius: 11px;
      background: #22262d;
    }
    .label-sheet__preview img { width: 100%; height: 100%; object-fit: cover; }
    .label-sheet__expand {
      position: absolute;
      right: 5px;
      bottom: 5px;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: rgba(0,0,0,0.68);
    }
    .label-sheet__expand::before,
    .label-sheet__expand::after {
      content: "";
      position: absolute;
      width: 5px;
      height: 5px;
      border-style: solid;
      border-color: #fff;
    }
    .label-sheet__expand::before { top: 3px; right: 3px; border-width: 1px 1px 0 0; }
    .label-sheet__expand::after { left: 3px; bottom: 3px; border-width: 0 0 1px 1px; }
    .label-sheet__retake {
      min-width: 48px;
      min-height: 44px;
      padding: 0 6px;
      border: 0;
      background: transparent;
      color: var(--voice-blue);
      font-size: 0.66rem;
      font-weight: 700;
      cursor: pointer;
    }
    .label-sheet__header-copy { flex: 1; min-width: 0; }
    .label-sheet__header-copy h3 {
      margin: 0;
      color: #f4f6f8;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .label-sheet__header-copy p {
      margin: 5px 0 0;
      color: rgba(235,239,244,0.64);
      font-size: 0.68rem;
      line-height: 1.4;
    }
    .label-sheet__close {
      position: relative;
      align-self: flex-start;
      flex: 0 0 44px;
      width: 44px;
      height: 44px;
      margin-top: -2px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: rgba(255,255,255,0.58);
      cursor: pointer;
    }
    .label-sheet__close::before,
    .label-sheet__close::after {
      content: "";
      position: absolute;
      top: 21px;
      left: 13px;
      width: 18px;
      height: 1.5px;
      border-radius: 1px;
      background: currentColor;
    }
    .label-sheet__close::before { transform: rotate(45deg); }
    .label-sheet__close::after { transform: rotate(-45deg); }
    .label-sheet__close:focus-visible,
    .label-sheet__retake:focus-visible,
    .label-sheet__mic:focus-visible,
    .label-sheet__save:focus-visible { outline: 2px solid var(--voice-blue); outline-offset: 2px; }
    .label-sheet__form { padding: 16px 18px 17px; }
    .label-sheet__label-row { display: flex; align-items: baseline; gap: 5px; margin-bottom: 7px; font-size: 0.68rem; }
    .label-sheet__label-row strong { color: #d8dce3; }
    .label-sheet__label-row span { color: rgba(235,239,244,0.44); }
    .label-sheet__input {
      display: flex;
      align-items: center;
      min-height: 51px;
      overflow: hidden;
      border: 1px solid #494e59;
      border-radius: 12px;
      background: #1b1e24;
      transition: border-color 180ms ease, background 180ms ease;
    }
    .label-sheet__typed {
      flex: 1;
      min-width: 0;
      padding: 12px 13px;
      overflow: hidden;
      color: rgba(255,255,255,0.42);
      font-size: 0.7rem;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .label-sheet__caret {
      display: none;
      width: 1px;
      height: 18px;
      margin-left: -12px;
      background: #fff;
      animation: voiceCaret 0.8s steps(1) infinite;
    }
    .label-sheet__mic {
      align-self: stretch;
      display: grid;
      place-items: center;
      width: 49px;
      padding: 0;
      border: 0;
      border-left: 1px solid #3a3e47;
      background: transparent;
      color: rgba(255,255,255,0.74);
      cursor: pointer;
      transition: background 180ms ease, color 180ms ease;
    }
    .label-sheet__status {
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 35px;
      padding: 7px 2px 0;
      color: rgba(235,239,244,0.6);
      font-size: 0.62rem;
      line-height: 1.35;
    }
    .label-sheet__live-dot {
      display: none;
      flex: 0 0 auto;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #e25b60;
      box-shadow: 0 0 0 4px rgba(226,91,96,0.1);
    }
    .label-sheet__wave { display: none; align-items: center; gap: 2px; height: 18px; margin-left: auto; }
    .label-sheet__wave i {
      width: 2px;
      height: 5px;
      border-radius: 2px;
      background: var(--voice-blue);
      animation: voiceWave 720ms ease-in-out infinite alternate;
    }
    .label-sheet__wave i:nth-child(2n) { animation-delay: -260ms; }
    .label-sheet__wave i:nth-child(3n) { animation-delay: -480ms; }
    .label-sheet__save {
      width: 100%;
      min-height: 50px;
      margin-top: 8px;
      border: 0;
      border-radius: 13px;
      background: #2f75ad;
      color: #fff;
      font-size: 0.76rem;
      font-weight: 700;
      cursor: pointer;
      transition: background 180ms ease, transform 120ms ease;
    }
    .label-sheet__save:hover { background: #3886c4; }
    .label-sheet__save:active { transform: scale(0.99); }
    .label-sheet__save:disabled { cursor: default; }
    .label-sheet__privacy {
      margin: 9px 10px 0;
      color: rgba(235,239,244,0.4);
      font-size: 0.55rem;
      line-height: 1.4;
      text-align: center;
    }
    .voice-demo[data-state="listening"] .label-sheet__input {
      border-color: rgba(88,170,245,0.72);
      background: rgba(36,74,106,0.18);
    }
    .voice-demo[data-state="listening"] .label-sheet__typed { color: #f4f6f8; }
    .voice-demo[data-state="listening"] .label-sheet__caret { display: block; }
    .voice-demo[data-state="listening"] .label-sheet__live-dot,
    .voice-demo[data-state="listening"] .label-sheet__wave { display: flex; }
    .voice-demo[data-state="listening"] .label-sheet__mic {
      border-left-color: #d85157;
      background: #d85157;
      color: #fff;
    }
    .voice-demo[data-state="ready"] .label-sheet__typed,
    .voice-demo[data-state="synced"] .label-sheet__typed { color: #f4f6f8; }
    .voice-demo[data-state="synced"] .label-sheet__save { background: #2f75ad; }
    .voice-evidence__synced {
      position: absolute;
      z-index: 10;
      right: 18px;
      bottom: 18px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 14px;
      border-radius: 13px;
      border: 1px solid rgba(88,170,245,0.32);
      background: #0d1b2a;
      color: #eaf5ff;
      box-shadow: 0 14px 34px rgba(0,0,0,0.34);
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 220ms ease, transform 380ms cubic-bezier(0.16,1,0.3,1);
      pointer-events: none;
    }
    .voice-evidence__synced > span { position: relative; width: 22px; height: 22px; border: 1px solid var(--voice-blue); border-radius: 50%; }
    .voice-evidence__synced > span::after {
      content: "";
      position: absolute;
      left: 6px;
      top: 5px;
      width: 7px;
      height: 4px;
      border: solid var(--voice-blue);
      border-width: 0 0 2px 2px;
      transform: rotate(-45deg);
    }
    .voice-evidence__synced div { display: grid; gap: 2px; }
    .voice-evidence__synced strong { font-size: 0.67rem; }
    .voice-evidence__synced small { color: rgba(196,224,247,0.68); font-size: 0.58rem; }
    .voice-demo[data-state="synced"] .voice-evidence__synced { opacity: 1; transform: translateY(0); }

    @keyframes voiceHotspot {
      0%,100% { box-shadow: 0 0 0 4px rgba(56,169,255,0.08), 0 0 20px rgba(56,169,255,0.38); }
      50% { box-shadow: 0 0 0 11px rgba(56,169,255,0), 0 0 28px rgba(56,169,255,0.54); }
    }
    @keyframes voiceWave { from { height: 4px; opacity: 0.54; } to { height: 16px; opacity: 1; } }
    @keyframes voiceCaret { 50% { opacity: 0; } }

    @media (max-width: 1100px) {
      .feat-row--voice { gap: 40px; }
      .feat-row--voice .feat-text { flex: 1; }
      .feat-row--voice .feat-visual { flex: 1.2; padding-top: 60px; }
      .voice-evidence { aspect-ratio: 13 / 11; }
    }
    @media (max-width: 768px) {
      .feat-row--voice .feat-text,
      .feat-row--voice .feat-visual { flex: 1; }
      .feat-row--voice .feat-visual { padding-top: 0; }
      .voice-evidence { aspect-ratio: 4 / 3; min-height: 0; }
      .voice-evidence__vehicle { right: -16%; bottom: 0; width: 122%; height: 90%; }
      .voice-evidence__orbit { right: -12%; bottom: 1%; width: 118%; }
      .voice-evidence__hotspot { right: 24%; top: 44%; }
      .voice-evidence__hint { top: 22px; right: 22px; bottom: auto; }
      .label-sheet { width: 100%; }
      .voice-evidence__synced { right: 16px; bottom: 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .voice-demo *,
      .voice-demo *::before,
      .voice-demo *::after { animation: none !important; transition-duration: 0.01ms !important; }
    }

    .ev-card {
      width: 100%; max-width: 480px;
      border-radius: 20px;
      background: linear-gradient(145deg, #141420 0%, #0e0e1a 50%, #0a0a14 100%);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 0 80px rgba(59,169,255,0.06), 0 40px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
      overflow: hidden;
    }
    .ev-card__header {
      display: flex; align-items: center; gap: 10px;
      padding: 16px 22px; border-bottom: 1px solid var(--border);
    }
    .ev-card__header-label {
      font-family: 'Michroma', monospace;
      font-size: 0.65rem; letter-spacing: 1.5px; color: var(--text-primary);
    }
    .ev-card__header-count { font-size: 0.72rem; color: var(--text-muted); }
    .ev-card__upload {
      margin: 16px 22px; padding: 16px;
      border: 1px dashed rgba(255,255,255,0.1);
      border-radius: var(--radius-sm);
      text-align: center; font-size: 0.8rem; color: var(--text-muted);
    }
    .ev-card__list-label {
      font-family: 'Michroma', monospace;
      font-size: 0.55rem; letter-spacing: 1.5px;
      color: var(--red); padding: 0 22px; margin-bottom: 8px;
    }
    .ev-card__list {
      padding: 0 22px 18px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .ev-item {
      display: flex; align-items: center; gap: 14px;
      padding: 12px 16px; border-radius: var(--radius-sm);
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.015);
      transition: border-color 0.3s;
    }
    .ev-item:hover { border-color: rgba(255,255,255,0.1); }
    .ev-item__thumb {
      width: 44px; height: 44px; border-radius: 8px;
      background: linear-gradient(135deg, rgba(59,169,255,0.12) 0%, rgba(59,169,255,0.04) 100%);
      flex-shrink: 0;
    }
    .ev-item__thumb--b { background: linear-gradient(135deg, rgba(245,197,66,0.12) 0%, rgba(245,197,66,0.04) 100%); }
    .ev-item__thumb--c { background: linear-gradient(135deg, rgba(44,180,99,0.12) 0%, rgba(44,180,99,0.04) 100%); }
    .ev-item__thumb--d { background: linear-gradient(135deg, rgba(255,77,77,0.12) 0%, rgba(255,77,77,0.04) 100%); }
    .ev-item__info { flex: 1; min-width: 0; }
    .ev-item__name { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
    .ev-item__meta { font-size: 0.68rem; color: var(--text-muted); }
    .ev-item__time { font-size: 0.65rem; color: var(--text-muted); }
    .ev-item__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .ev-item__remove { font-size: 0.7rem; color: var(--red); opacity: 0.6; }

    /* ── Chat + YouTube Card (real app rendition) ── */
    .chat-card {
      width: 100%; max-width: 380px;
      border-radius: 24px;
      background: linear-gradient(145deg, #141420 0%, #0e0e1a 50%, #0a0a14 100%);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 0 80px rgba(59,169,255,0.06), 0 40px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .chat-card__topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
    }
    .chat-card__topbar-left,
    .chat-card__topbar-right {
      display: flex; align-items: center; gap: 10px;
    }
    .chat-card__tabs {
      display: flex;
      border-radius: 100px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .chat-tab {
      font-size: 0.72rem;
      font-weight: 600;
      padding: 7px 16px;
      color: var(--text-muted);
      cursor: default;
    }
    .chat-tab--active {
      background: var(--accent);
      color: #fff;
      border-radius: 100px;
    }

    /* User message */
    .chat-card__msg { padding: 18px 18px 12px; }
    .chat-card__bubble {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px 16px 16px 4px;
      padding: 14px 18px;
      font-size: 0.82rem;
      color: var(--text-primary);
      line-height: 1.55;
    }

    /* YouTube result */
    .chat-card__yt {
      padding: 0 18px 14px;
    }
    .chat-card__yt-search {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 100px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      margin-bottom: 10px;
    }
    .chat-card__yt-query {
      flex: 1;
      font-size: 0.72rem;
      color: var(--text-muted);
    }
    .chat-card__yt-result {
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.02);
      overflow: hidden;
      position: relative;
    }
    .chat-card__yt-rank {
      position: absolute;
      top: 12px; left: 12px;
      font-size: 0.6rem;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      background: rgba(0,0,0,0.7);
      color: #fff;
      z-index: 2;
    }
    .chat-card__yt-best {
      position: absolute;
      top: 12px; right: 12px;
      font-size: 0.6rem;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      background: rgba(44,180,99,0.8);
      color: #fff;
      z-index: 2;
    }
    .chat-card__yt-thumb {
      width: 100%;
      height: 160px;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .chat-card__yt-play {
      width: 48px; height: 48px;
      border-radius: 50%;
      background: rgba(255,0,0,0.9);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 20px rgba(255,0,0,0.3);
    }
    .chat-card__yt-duration {
      position: absolute;
      bottom: 8px; right: 8px;
      font-size: 0.65rem;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(0,0,0,0.8);
      color: #fff;
    }
    .chat-card__yt-info {
      padding: 12px 14px;
    }
    .chat-card__yt-title {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.4;
      margin-bottom: 4px;
    }
    .chat-card__yt-channel {
      font-size: 0.65rem;
      color: var(--text-muted);
    }

    /* Input bar */
    .chat-card__input {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 18px;
      border-top: 1px solid var(--border);
    }
    .chat-card__input-plus {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: rgba(59,169,255,0.1);
      color: var(--accent);
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; font-weight: 300;
      flex-shrink: 0;
    }
    .chat-card__input-text {
      flex: 1;
      font-size: 0.78rem;
      color: var(--text-muted);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 100px;
      padding: 8px 14px;
    }
    .chat-card__input-icons {
      display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    }

    /* ── Dashboard Rendition (Desktop mockup) ── */
    .dash-layout {
      display: flex;
      height: 100%;
      min-height: 320px;
    }
    .dash-sidebar {
      width: 220px;
      border-right: 1px solid var(--border);
      padding: 10px 8px;
      flex-shrink: 0;
      overflow: hidden;
    }
    .dash-search {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 10px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.02);
      margin-bottom: 10px;
      font-size: 0.62rem; color: var(--text-muted);
    }
    .dash-search__badge {
      font-size: 0.52rem; font-weight: 600;
      padding: 2px 6px; border-radius: 4px;
      background: rgba(59,169,255,0.1); color: var(--accent);
      margin-left: auto;
    }
    .dash-session {
      display: flex; gap: 8px;
      padding: 8px;
      border-radius: var(--radius-sm);
      margin-bottom: 4px;
      cursor: default;
      border: 1px solid transparent;
    }
    .dash-session--active {
      background: rgba(59,169,255,0.04);
      border-color: rgba(59,169,255,0.12);
    }
    .dash-session__icon {
      width: 24px; height: 24px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 2px;
    }
    .dash-session__icon--blue { background: rgba(59,169,255,0.1); color: var(--accent); }
    .dash-session__icon--purple { background: rgba(160,100,255,0.1); color: #a064ff; }
    .dash-session__icon--gray { background: rgba(255,255,255,0.05); color: var(--text-muted); }
    .dash-session__info { flex: 1; min-width: 0; }
    .dash-session__title {
      font-size: 0.65rem; font-weight: 600;
      color: var(--text-primary); line-height: 1.3;
      margin-bottom: 2px;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .dash-session__meta { font-size: 0.55rem; color: var(--text-muted); margin-bottom: 4px; }
    .dash-session__tags { display: flex; gap: 3px; flex-wrap: wrap; }
    .dash-tag {
      font-size: 0.48rem; font-weight: 500;
      padding: 1px 5px; border-radius: 3px;
    }
    .dash-tag--blue { background: rgba(59,169,255,0.12); color: var(--accent); }
    .dash-tag--green { background: rgba(44,180,99,0.12); color: var(--green); }
    .dash-tag--yellow { background: rgba(245,197,66,0.12); color: var(--yellow); }
    .dash-session__status { flex-shrink: 0; }
    .dash-status {
      font-size: 0.5rem; font-weight: 600;
      padding: 2px 6px; border-radius: 100px;
      display: inline-flex; align-items: center; gap: 3px;
    }
    .dash-status::before {
      content: ''; width: 4px; height: 4px;
      border-radius: 50%;
    }
    .dash-status--green { color: var(--green); }
    .dash-status--green::before { background: var(--green); }
    .dash-status--yellow { color: var(--yellow); }
    .dash-status--yellow::before { background: var(--yellow); }

    /* Main panel */
    .dash-main {
      flex: 1; padding: 14px 16px;
      overflow: hidden;
    }
    .dash-main__header { margin-bottom: 12px; }
    .dash-main__title {
      font-size: 0.82rem; font-weight: 700;
      color: var(--text-primary); margin-bottom: 2px;
    }
    .dash-main__vehicle { font-size: 0.65rem; color: var(--text-muted); }
    .dash-main__meta {
      display: flex; gap: 8px;
      font-size: 0.55rem; color: var(--text-muted);
      margin-top: 6px; align-items: center;
    }
    .dash-meta-badge {
      font-size: 0.55rem; font-weight: 700;
      color: var(--accent);
    }
    .dash-main__section {
      margin-bottom: 12px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    .dash-main__section-label {
      font-family: 'Michroma', monospace;
      font-size: 0.5rem; letter-spacing: 1.5px;
      color: var(--text-muted); margin-bottom: 8px;
    }
    .dash-detail-row {
      display: flex; gap: 12px;
      font-size: 0.65rem;
    }
    .dash-detail-key { color: var(--text-muted); min-width: 100px; font-size: 0.55rem; }
    .dash-detail-val { color: var(--text-primary); }
    .dash-main__summary {
      font-size: 0.68rem; font-style: italic;
      color: var(--text-secondary); line-height: 1.55;
      margin-bottom: 8px;
    }
    .dash-main__tags-row {
      display: flex; gap: 4px; flex-wrap: wrap;
    }
    .dash-action {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 0;
      font-size: 0.65rem; color: var(--text-secondary);
    }

    /* ── Devices Section ── */
    /* Capture-to-action immersive story */
    .curtify-story {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 24%, rgba(59,169,255,0.08), transparent 42%),
        linear-gradient(180deg, var(--bg) 0%, #070b12 50%, var(--bg) 100%);
    }
    .curtify-story__frame {
      position: relative;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(59,169,255,0.16);
      border-radius: 18px;
      background: #020711;
      box-shadow: 0 34px 100px rgba(0,0,0,0.58), inset 0 0 0 1px rgba(255,255,255,0.018);
    }
    .curtify-story__workshop {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      opacity: 0.92;
      filter: saturate(1.04) contrast(1.08) brightness(0.82);
      transform: scale(1.01);
      animation: curtifyWorkshopIn 1.4s cubic-bezier(.2,.75,.2,1) both;
    }
    .curtify-story__atmosphere {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(1,5,12,0.04) 0%, rgba(1,5,12,0.03) 33%, rgba(1,5,12,0.6) 49%, rgba(1,5,12,0.08) 100%),
        linear-gradient(180deg, rgba(2,7,15,0.22) 0%, transparent 32%, rgba(2,6,13,0.08) 68%, rgba(1,4,10,0.84) 100%),
        radial-gradient(circle at 30% 61%, rgba(56,169,255,0.12), transparent 23%);
    }
    .curtify-story__atmosphere::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.15;
      background-image:
        linear-gradient(rgba(56,169,255,0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,169,255,0.15) 1px, transparent 1px);
      background-size: 42px 42px;
      -webkit-mask-image: linear-gradient(to right, #000, transparent 69%);
      mask-image: linear-gradient(to right, #000, transparent 69%);
    }
    .curtify-story__copy {
      position: absolute;
      top: 8%;
      left: 4.6%;
      z-index: 7;
      width: 61%;
      pointer-events: none;
    }
    .curtify-story__eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      color: var(--accent);
      font-size: clamp(0.58rem, 0.78vw, 0.76rem);
      font-weight: 700;
      letter-spacing: 0.17em;
      text-transform: uppercase;
    }
    .curtify-story__eyebrow::before {
      content: "";
      width: 34px;
      height: 1px;
      background: var(--accent);
      box-shadow: 0 0 10px var(--accent);
    }
    .curtify-story__headline {
      max-width: 14.4em;
      margin: 0;
      color: var(--text-primary);
      font-family: var(--font);
      font-size: clamp(2rem, 4.05vw, 4.15rem);
      font-weight: 650;
      line-height: 0.98;
      letter-spacing: -0.055em;
      text-wrap: balance;
      text-shadow: 0 4px 24px rgba(0,0,0,0.4);
    }
    .curtify-story__headline span {
      color: var(--accent);
      text-shadow: 0 0 26px rgba(59,169,255,0.3);
    }
    .curtify-story__subhead {
      width: 48%;
      min-width: 320px;
      margin: 14px 0 0;
      color: rgba(220,230,242,0.7);
      font-size: clamp(0.72rem, 1vw, 1rem);
      line-height: 1.5;
    }
    .curtify-story__capture {
      position: absolute;
      left: 27.5%;
      top: 57.5%;
      z-index: 6;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 11px;
      border: 1px solid rgba(56,169,255,0.36);
      border-radius: 999px;
      background: rgba(4,11,20,0.74);
      color: #cbeaff;
      font: 600 clamp(0.5rem, 0.6vw, 0.64rem)/1 var(--mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      backdrop-filter: blur(8px);
      box-shadow: 0 0 25px rgba(56,169,255,0.12);
    }
    .curtify-story__capture b {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #ff5b66;
      box-shadow: 0 0 10px #ff5b66;
      animation: curtifyStoryPulse 1.25s ease-in-out infinite;
    }
    .curtify-story__data-link {
      position: absolute;
      left: 32.5%;
      top: 60.2%;
      z-index: 5;
      width: 12%;
      height: 1px;
      background: linear-gradient(90deg, var(--accent), rgba(56,169,255,0.16), var(--accent));
      box-shadow: 0 0 12px rgba(56,169,255,0.7);
      transform: rotate(-3deg);
      transform-origin: left center;
    }
    .curtify-story__data-link i {
      position: absolute;
      top: -3px;
      left: 0;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #e9f8ff;
      box-shadow: 0 0 14px 3px var(--accent);
      animation: curtifyStoryTransmit 2.25s linear infinite;
    }
    .curtify-story__data-link i:nth-child(2) { animation-delay: -0.75s; }
    .curtify-story__data-link i:nth-child(3) { animation-delay: -1.5s; }
    .curtify-story__dashboard {
      position: absolute;
      right: 3.2%;
      bottom: 11.8%;
      z-index: 5;
      width: 55%;
      aspect-ratio: 1.684 / 1;
      overflow: hidden;
      margin: 0;
      border: 1px solid rgba(56,169,255,0.36);
      border-radius: 10px;
      background: #080c12;
      box-shadow: 0 32px 65px rgba(0,0,0,0.56), 0 0 52px rgba(56,169,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.025);
      transform: perspective(1200px) rotateY(-1.5deg);
      transform-origin: right center;
      animation: curtifyDashboardIn 1.15s 0.18s cubic-bezier(.16,.82,.28,1) both;
    }
    .curtify-story__dashboard img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.105);
      filter: contrast(1.04) brightness(0.98);
    }
    .curtify-story__dashboard::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(115deg, rgba(56,169,255,0.07), transparent 22%), linear-gradient(0deg, rgba(4,8,14,0.18), transparent 25%);
    }
    .curtify-story__workflow {
      position: absolute;
      left: 5%;
      right: 5%;
      bottom: 4.8%;
      z-index: 8;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }
    .curtify-story__workflow::before {
      content: "";
      position: absolute;
      left: 12.5%;
      right: 12.5%;
      top: 5px;
      height: 1px;
      background: linear-gradient(90deg, rgba(56,169,255,0.18), var(--accent), rgba(56,169,255,0.18));
      box-shadow: 0 0 12px rgba(56,169,255,0.38);
    }
    .curtify-story__workflow::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 12.5%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #eaf8ff;
      box-shadow: 0 0 14px 3px var(--accent);
      animation: curtifyStoryWorkflow 4.2s linear infinite;
    }
    .curtify-story__step {
      position: relative;
      display: grid;
      justify-items: center;
      gap: 10px;
      color: rgba(210,224,240,0.62);
      font-size: clamp(0.52rem, 0.66vw, 0.7rem);
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .curtify-story__step i {
      position: relative;
      z-index: 2;
      width: 11px;
      height: 11px;
      border: 2px solid #07101a;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 13px rgba(56,169,255,0.72);
    }
    .curtify-story__step:last-child i {
      background: var(--green);
      box-shadow: 0 0 13px rgba(89,217,162,0.68);
    }

    .devices-legacy { display: none !important; }

    @keyframes curtifyWorkshopIn {
      from { opacity: 0; transform: scale(1.045); }
      to { opacity: 0.92; transform: scale(1.01); }
    }
    @keyframes curtifyDashboardIn {
      from { opacity: 0; filter: blur(5px); transform: perspective(1200px) translateX(7%) rotateY(-4deg) scale(0.96); }
      to { opacity: 1; filter: blur(0); transform: perspective(1200px) translateX(0) rotateY(-1.5deg) scale(1); }
    }
    @keyframes curtifyStoryTransmit {
      from { left: 0; opacity: 0; }
      12%, 86% { opacity: 1; }
      to { left: calc(100% - 7px); opacity: 0; }
    }
    @keyframes curtifyStoryWorkflow {
      from { left: 12.5%; }
      to { left: calc(87.5% - 7px); }
    }
    @keyframes curtifyStoryPulse {
      0%, 100% { opacity: 0.55; transform: scale(0.82); }
      50% { opacity: 1; transform: scale(1); }
    }

    .devices {
      background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 50%, var(--bg) 100%);
      overflow: hidden;
    }
    .devices-grid {
      display: grid;
      grid-template-columns: 1fr 80px 1fr;
      gap: 0;
      align-items: center;
      margin-top: 48px;
    }
    .device-col { text-align: center; }
    .device-mockup {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: rgba(10,10,18,0.95);
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(59,169,255,0.06);
    }
    .device-mockup--phone {
      max-width: 280px;
      margin: 0 auto;
      border-radius: 28px;
      border: 2px solid rgba(255,255,255,0.08);
    }
    .device-mockup--desktop {
      max-width: 520px;
      margin: 0 auto;
    }
    .device-chrome {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: rgba(255,255,255,0.02);
      border-bottom: 1px solid var(--border);
    }
    .device-chrome .dot { width: 8px; height: 8px; border-radius: 50%; }
    .device-chrome .dot-red { background: #ff5f57; }
    .device-chrome .dot-yellow { background: #febc2e; }
    .device-chrome .dot-green { background: #28c840; }
    .device-body {
      padding: 16px;
      min-height: 280px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .device-body--phone { min-height: 380px; }
    .mock-rec-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px;
      border-radius: 10px;
      background: rgba(255,77,77,0.06);
      border: 1px solid rgba(255,77,77,0.12);
    }
    .mock-rec-bar__left { display: flex; align-items: center; gap: 8px; }
    .mock-rec-dot {
      width: 8px; height: 8px; border-radius: 50%; background: #ff4444;
      animation: recPulse 1.2s ease-in-out infinite;
    }
    .mock-rec-label { font-size: 10px; font-weight: 700; color: #ff6b6b; text-transform: uppercase; letter-spacing: 1px; }
    .mock-rec-time { font-size: 11px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
    .mock-wave {
      display: flex; align-items: center; justify-content: center; gap: 2px; height: 28px;
    }
    .mock-wave span {
      width: 2px; border-radius: 2px; background: var(--accent);
      animation: waveBar 1.2s ease-in-out infinite;
    }
    .mock-wave span:nth-child(1) { height: 6px; animation-delay: 0s; }
    .mock-wave span:nth-child(2) { height: 14px; animation-delay: 0.08s; }
    .mock-wave span:nth-child(3) { height: 20px; animation-delay: 0.16s; }
    .mock-wave span:nth-child(4) { height: 10px; animation-delay: 0.24s; }
    .mock-wave span:nth-child(5) { height: 24px; animation-delay: 0.32s; }
    .mock-wave span:nth-child(6) { height: 16px; animation-delay: 0.4s; }
    .mock-wave span:nth-child(7) { height: 8px; animation-delay: 0.48s; }
    .mock-wave span:nth-child(8) { height: 22px; animation-delay: 0.56s; }
    .mock-wave span:nth-child(9) { height: 12px; animation-delay: 0.64s; }
    .mock-wave span:nth-child(10) { height: 18px; animation-delay: 0.72s; }
    .mock-transcript-line {
      font-size: 10px;
      color: var(--text-secondary);
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(255,255,255,0.03);
      border-left: 2px solid rgba(59,169,255,0.15);
      line-height: 1.5;
    }
    .mock-transcript-line strong { color: var(--accent); font-weight: 600; }
    .mock-drive-badge {
      display: flex; align-items: center; gap: 6px;
      padding: 8px 12px;
      border-radius: 8px;
      background: rgba(44,180,99,0.06);
      border: 1px solid rgba(44,180,99,0.12);
      font-size: 10px; color: var(--green); font-weight: 600;
    }
    .mock-photo-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    }
    .mock-photo-thumb {
      aspect-ratio: 4/3;
      border-radius: 6px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
    }
    .mock-photo-thumb svg { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; stroke-width: 1.5; }
    /* Desktop body specific */
    .mock-desktop-layout {
      display: flex; gap: 12px; min-height: 240px;
    }
    .mock-desktop-sidebar {
      width: 140px; flex-shrink: 0;
      border-right: 1px solid var(--border);
      padding-right: 12px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .mock-desktop-item {
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 9px;
      color: var(--text-muted);
      display: flex; align-items: center; gap: 6px;
    }
    .mock-desktop-item.active {
      background: var(--accent-glow);
      color: var(--accent);
    }
    .mock-desktop-item .dot-sm {
      width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4;
    }
    .mock-desktop-main {
      flex: 1;
      display: flex; flex-direction: column; gap: 10px;
    }
    .mock-timeline-entry {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--border);
    }
    .mock-tl-time {
      font-size: 8px; font-weight: 600; color: var(--text-muted);
      font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 2px;
    }
    .mock-tl-content {
      font-size: 9px; color: var(--text-secondary); line-height: 1.5;
    }
    .mock-tl-content strong { color: var(--text-primary); }
    .mock-summary-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 16px;
      border-radius: 8px;
      background: rgba(59,169,255,0.1);
      border: 1px solid rgba(59,169,255,0.2);
      font-size: 9px; font-weight: 600; color: var(--accent);
      margin-top: auto;
      align-self: flex-start;
    }
    .mock-summary-btn svg { width: 12px; height: 12px; stroke: var(--accent); fill: none; stroke-width: 2; }

    /* Connection line */
    .device-connector {
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .connector-line {
      width: 2px;
      height: 120px;
      background: linear-gradient(180deg, transparent, var(--accent), transparent);
      position: relative;
      opacity: 0.4;
    }
    .connector-line::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 40px; height: 40px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(59,169,255,0.3) 0%, transparent 70%);
      animation: connectorPulse 2s ease-in-out infinite;
    }
    @keyframes connectorPulse {
      0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.4; }
      50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    }
    .connector-dots {
      position: absolute;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .connector-dot {
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--accent);
      animation: dotFlow 2s ease-in-out infinite;
    }
    .connector-dot:nth-child(2) { animation-delay: 0.4s; }
    .connector-dot:nth-child(3) { animation-delay: 0.8s; }
    @keyframes dotFlow {
      0% { opacity: 0; transform: translateY(-20px); }
      50% { opacity: 1; }
      100% { opacity: 0; transform: translateY(20px); }
    }
    .device-caption {
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-top: 20px;
      line-height: 1.6;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
    }

    /* ── Comparison ── */
    .comparison { }
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      margin-top: 48px;
    }
    .comparison-col {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 36px 32px;
      background: var(--bg-card);
      backdrop-filter: blur(12px);
    }
    .comparison-col--before {
      border-color: rgba(255,77,77,0.12);
    }
    .comparison-col--after {
      border-color: rgba(59,169,255,0.12);
    }
    .comparison-col__title {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 24px;
      letter-spacing: -0.2px;
    }
    .comparison-col--before .comparison-col__title { color: var(--red); }
    .comparison-col--after .comparison-col__title { color: var(--accent); }
    .comparison-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
      font-size: 0.88rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }
    .comparison-item:last-child { border-bottom: none; }
    .comparison-item svg { flex-shrink: 0; margin-top: 2px; }

    /* ── Stats ── */
    .stats {
      background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 50%, var(--bg) 100%);
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .stat-card {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 40px 32px;
      background: var(--bg-card);
      backdrop-filter: blur(12px);
      text-align: center;
      transition: border-color 0.4s, box-shadow 0.4s;
      position: relative;
      overflow: hidden;
    }
    .stat-card::before {
      content: '';
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 120px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      opacity: 0.4;
    }
    .stat-card:hover {
      border-color: rgba(59,169,255,0.15);
      box-shadow: 0 0 40px rgba(59,169,255,0.04);
    }
    .stat-card__num {
      font-family: 'Michroma', monospace;
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 400;
      color: var(--accent);
      letter-spacing: -2px;
      line-height: 1;
      margin-bottom: 8px;
      text-shadow: 0 0 40px rgba(59,169,255,0.3);
    }
    .stat-card__num span { font-size: 0.6em; }
    .stat-card__label {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .stat-card__desc {
      font-size: 0.84rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    /* ── FAQ ── */
    .faq { }
    .faq-list {
      max-width: 720px;
      margin: 48px auto 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .faq-item {
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--bg-card);
      backdrop-filter: blur(8px);
      overflow: hidden;
      transition: border-color 0.3s;
    }
    .faq-item.open { border-color: rgba(59,169,255,0.15); }
    .faq-q {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      cursor: pointer;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-primary);
      transition: color 0.2s;
      user-select: none;
    }
    .faq-q:hover { color: var(--accent-light); }
    .faq-q svg {
      flex-shrink: 0;
      width: 18px; height: 18px;
      stroke: var(--text-muted);
      fill: none;
      stroke-width: 2;
      transition: transform 0.3s var(--ease-out-expo), stroke 0.3s;
    }
    .faq-item.open .faq-q svg {
      transform: rotate(45deg);
      stroke: var(--accent);
    }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s var(--ease-out-expo);
    }
    .faq-a__inner {
      padding: 0 24px 20px;
      font-size: 0.88rem;
      color: var(--text-secondary);
      line-height: 1.7;
    }

    /* ── Final CTA ── */
    .final-cta {
      padding: 280px 0 120px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .final-cta__glow {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 600px; height: 400px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(59,169,255,0.15) 0%, rgba(59,169,255,0.04) 40%, transparent 70%);
      filter: blur(60px);
      animation: ctaGlowPulse 4s ease-in-out infinite alternate;
      pointer-events: none;
    }
    @keyframes ctaGlowPulse {
      0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
      100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    }
    .final-cta .container { position: relative; z-index: 1; }
    .final-cta__title {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      letter-spacing: -1.5px;
      margin-bottom: 16px;
    }
    .final-cta__subtitle {
      font-size: 1.1rem;
      color: var(--text-secondary);
      margin-bottom: 36px;
      line-height: 1.7;
    }
    .final-cta__note {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-top: 16px;
      letter-spacing: 0.3px;
    }

    /* ── Footer ── */
    .footer {
      border-top: 1px solid var(--border);
      padding: 60px 0 32px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 48px;
    }
    .footer-brand__logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Michroma', sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.22em;
      color: #f5f7fa;
      margin-bottom: 12px;
    }
    .footer-brand__logo img { width: 28px; height: 28px; object-fit: contain; }
    .footer-brand__tagline {
      font-size: 0.84rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 20px;
    }
    .footer-socials {
      display: flex;
      gap: 12px;
    }
    .footer-social {
      width: 36px; height: 36px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.02);
      display: flex; align-items: center; justify-content: center;
      transition: all 0.3s;
    }
    .footer-social:hover {
      border-color: var(--accent);
      background: var(--accent-glow);
    }
    .footer-social svg { width: 16px; height: 16px; fill: var(--text-secondary); }
    .footer-social:hover svg { fill: var(--accent); }
    .footer-col__title {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--text-muted);
      margin-bottom: 16px;
    }
    .footer-col a {
      display: block;
      font-size: 0.85rem;
      color: var(--text-secondary);
      padding: 4px 0;
      transition: color 0.2s;
    }
    .footer-col a:hover { color: var(--accent-light); }
    .footer-bottom {
      border-top: 1px solid var(--border);
      padding-top: 24px;
      text-align: center;
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
      .problem-cards { grid-template-columns: 1fr; }
      .feat-row { gap: 48px; padding: 80px 28px; }
      .devices-grid { grid-template-columns: 1fr; gap: 32px; }
      .device-connector { display: none; }
      .comparison-grid { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .feat-row,
      .feat-row--reverse { flex-direction: column; gap: 40px; padding: 60px 28px; }
      /* .feat-row is a column here, so .feat-visual is sized on the cross axis.
         A definite width:100%
         makes it track the row's content box instead. `flex: 1` on .feat-visual
         sets flex-basis:0, so this width is ignored in the desktop row layout. */
      .feat-visual { width: 100%; }
      .feat-visual > * { max-width: 100%; }
      .feat-grid { max-width: 340px; }
      .feat-heading { font-size: 1.5rem; }
      .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    }

/* ═══════════════════════════════════════════════
   REVAMP LAYER — "Flight Recorder" design language
   Instrument-panel details: industrial type, live
   readouts, viewfinder brackets, hairline rules.
   Appended override layer — later rules win.
   ═══════════════════════════════════════════════ */

:root {
  --font-display: 'Barlow', 'Inter', sans-serif;
  --font-stencil: 'Barlow Condensed', 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Cascadia Code', monospace;
}

/* ── Typography: industrial display for headings ── */
.hero-title-line,
.section-title,
.feat-heading,
.final-cta__title {
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
}
/* Display weight unified at 600 — the lighter register the playground settled
   on. The hero keeps its own fitted tracking (see .hero-title-line below). */
.hero-title-line,
.section-title,
.feat-heading,
.final-cta__title { font-weight: 600; }

/* The hero h1 is the one display element that CANNOT take --track-display.
   It is white-space:nowrap and its clamp() is tuned so "THE DIGITAL BLACK
   BOX" fits the 620px column on one row (see .hero-title-line above). Going
   from -1.5px to +0.01em adds ~40px across 21 characters and overflows the
   column. Positive tracking here requires letting the line wrap first. */
.hero-title-line { letter-spacing: var(--track-fitted); }

/* Stencil micro-labels — wide-tracked condensed caps, like panel engraving */
.section-label,
.feat-eyebrow,
.nav-badge .badge {
  font-family: var(--font-stencil);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
}
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-label::before {
  content: '';
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* ── Blueprint atmosphere — grid duty handed to .tech-grid (see LAYER STACK).
   This rule now carries only the vignette, which the grid never provided. ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-atmosphere);
  pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 50% 40%, transparent 45%, rgba(7,7,12,0.35) 100%);
}

/* ═══ 6 · HOTSPOT MARKERS ════════════════════════════════════════════════
   Names what the Black Box actually captures, turning the cube from an
   ornament into a diagram. Deliberately NOT children of .bb-fixed: that
   element is scaled 0.46–0.88 and faded to 0.10 opacity by the scroll
   spine, which would shrink this text to illegibility and hide it. This
   layer only borrows the cube's left/top, and only shows in the hero.
   ════════════════════════════════════════════════════════════════════════ */
.bb-hotspots {
  position: fixed;
  z-index: var(--z-hotspot);
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease-out-expo);
}
.bb-hotspots.is-visible {
  opacity: 1;
  transition-delay: 0.6s; /* arrive after the box settles, never with it */
}
.bb-hotspot {
  position: absolute;
  left: var(--hx);
  top: var(--hy);
}
.bb-hs-dot,
.bb-hs-ring-s,
.bb-hs-ring-l {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  transform-origin: center;
}
.bb-hs-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--accent);
  box-shadow: 0 0 12px 2px rgba(59,169,255,0.55);
}
.bb-hs-ring-s {
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border: 1px solid rgba(59,169,255,0.75);
  animation: bbHsPulse 2.8s var(--ease-out-expo) infinite;
}
.bb-hs-ring-l {
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid rgba(59,169,255,0.28);
  /* staggered, not synchronised — the rings should breathe, not blink */
  animation: bbHsPulse 2.8s var(--ease-out-expo) 0.45s infinite;
}
@keyframes bbHsPulse {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%      { transform: scale(1.28); opacity: 0.35; }
}
/* Connector and label are sized to the gutter, not to taste: the cube sits
   in roughly 200px of clear space between the 620px copy column and the
   viewport edge. A 64px connector plus a nowrap label needed ~244px and
   overran both — into the headline on the left, off-screen on the right. */
.bb-hs-stroke {
  position: absolute;
  left: 0; top: 0;
  height: 1px;
  width: 28px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(59,169,255,0.9), rgba(59,169,255,0.15));
}
.bb-hs-text {
  position: absolute;
  left: 38px;
  top: -14px;
  max-width: 130px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-light);
}
.bb-hs-text b {
  display: block;
  margin-top: 3px;
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-primary);
}
/* Left-side markers mirror the connector and hang the label to the left */
.bb-hotspot--left .bb-hs-stroke { transform: scaleX(-1); }
.bb-hotspot--left .bb-hs-text {
  left: auto;
  right: 38px;
  text-align: right;
}
@media (prefers-reduced-motion: reduce) {
  .bb-hs-ring-s, .bb-hs-ring-l { animation: none; }
}
/* Below this width the gutter either side of the cube is narrower than a
   label, so the markers stand down entirely rather than collide. Measured,
   not guessed: at 1300px the tighter (right) gutter clears by ~30px. */
@media (max-width: 1299px) {
  .bb-hotspots { display: none; }
}

/* ── Hero REC eyebrow — the live readout ── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  margin-bottom: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
}
.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px rgba(255,77,77,0.8);
  animation: recPulse 1.6s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.rec-label {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-primary);
}
.rec-timer {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent-light);
  font-variant-numeric: tabular-nums;
}
.rec-sep {
  width: 1px;
  height: 14px;
  background: var(--border-hover);
}
.rec-caption {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .rec-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-dot { animation: none; }
}

/* ── Viewfinder brackets: the capture metaphor on every card ── */
.problem-card, .stat-card, .drive-card, .ev-card, .cs-card, .tl-card {
  position: relative;
}
.problem-card::before, .stat-card::before, .drive-card::before,
.ev-card::before, .cs-card::before, .tl-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out-expo), inset 0.35s var(--ease-out-expo);
  background:
    linear-gradient(to right, var(--accent) 14px, transparent 14px) top left / 14px 1.5px no-repeat,
    linear-gradient(to bottom, var(--accent) 14px, transparent 14px) top left / 1.5px 14px no-repeat,
    linear-gradient(to left, var(--accent) 14px, transparent 14px) top right / 14px 1.5px no-repeat,
    linear-gradient(to bottom, var(--accent) 14px, transparent 14px) top right / 1.5px 14px no-repeat,
    linear-gradient(to right, var(--accent) 14px, transparent 14px) bottom left / 14px 1.5px no-repeat,
    linear-gradient(to top, var(--accent) 14px, transparent 14px) bottom left / 1.5px 14px no-repeat,
    linear-gradient(to left, var(--accent) 14px, transparent 14px) bottom right / 14px 1.5px no-repeat,
    linear-gradient(to top, var(--accent) 14px, transparent 14px) bottom right / 1.5px 14px no-repeat;
}
.problem-card:hover::before, .stat-card:hover::before, .drive-card:hover::before,
.ev-card:hover::before, .cs-card:hover::before, .tl-card:hover::before {
  opacity: 0.85;
  inset: 6px;
}

/* ── Buttons: engraved caps, tighter geometry ── */
.btn {
  font-family: var(--font-stencil);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-weight: 700;
  border-radius: 10px;
}
.btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 0 30px var(--accent-glow),
    0 2px 8px rgba(0,0,0,0.4);
}

/* ── Section titles: instrument hairline under the heading ── */
.section-title {
  position: relative;
}

/* ── Nav: harder edge ── */
.nav {
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  letter-spacing: 4px;
}

/* ── Selection + focus + scrollbar (rounded, always) ── */
::selection {
  background: rgba(59,169,255,0.3);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); }

/* ── Footer: closing hairline with tick marks ── */
.footer {
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, var(--border-hover) 15%, var(--border-hover) 85%, transparent),
    repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 120px);
  opacity: 0.5;
}

/* ── Evidence demo panel: voice-labeled files + phase tags ── */
.ev-item__name--file {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: -0.2px;
}
.ev-phase {
  display: inline-block;
  font-family: var(--font-stencil);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 1px 7px;
  border-radius: 999px;
  vertical-align: 1px;
}
.ev-phase--before { color: #7dd3fc; background: rgba(59,169,255,0.1); border: 1px solid rgba(59,169,255,0.25); }
.ev-phase--during { color: #f5c542; background: rgba(245,197,66,0.08); border: 1px solid rgba(245,197,66,0.25); }
.ev-phase--after  { color: #4ade80; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.25); }

/* ── Evidence thumbs: real capture imagery (order matches the file rows) ── */
.ev-item__thumb--a, .ev-item__thumb--b, .ev-item__thumb--c, .ev-item__thumb--d {
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border-hover);
}
.ev-item__thumb--a { background-image: url('assets/evidence/front-bumper-teardown.jpg'); }
.ev-item__thumb--b { background-image: url('assets/evidence/frame-rail-damage.jpg'); }
.ev-item__thumb--c { background-image: url('assets/evidence/weld-seam-closeup.jpg'); }
.ev-item__thumb--d { background-image: url('assets/evidence/panel-alignment-check.jpg'); }

/* ═══════════════════════════════════════════════
   DE-SLOP PASS — replace generic AI-era patterns
   with the flight-recorder editorial language
   ═══════════════════════════════════════════════ */

/* 1) Gradient-clipped keywords → serif italic accent (editorial mixed type,
      matching the hero's "BODY SHOP." treatment). The gradient-text-on-
      every-heading pattern is the most recognizable AI-site tell there is. */
.gradient-text {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: var(--accent-light);
  color: var(--accent-light);
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  animation: none;
  filter: drop-shadow(0 0 24px rgba(59,169,255,0.18));
}

/* 2) Left-stripe quote blocks → editorial pull-quotes with a hanging
      quotation mark. (Left-edge color stripes are a banned tell.) */
.feat-pain,
.problem-card__quote {
  border-left: none !important;
  background: transparent;
  position: relative;
  padding-left: 40px;
  padding-right: 0;
  border-radius: 0;
}
.feat-pain::before,
.problem-card__quote::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -6px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 3.2rem;
  line-height: 1;
  color: rgba(59,169,255,0.35);
}
.problem-card--red .problem-card__quote::before { color: rgba(255,77,77,0.4); }
.problem-card--yellow .problem-card__quote::before { color: rgba(245,197,66,0.4); }

/* 3) Green-striped benefit callouts → stamped record-plates: full hairline
      frame with an engraved ON THE RECORD tag breaking the border. */
.feat-benefit {
  border-left: none;
  border: 1px solid rgba(44,180,99,0.25);
  background: rgba(44,180,99,0.03);
  border-radius: var(--radius-sm);
  position: relative;
  margin-top: 18px;
  padding: 18px 18px 14px;
}
.feat-benefit::before {
  content: 'ON THE RECORD';
  position: absolute;
  top: -9px;
  left: 14px;
  font-family: var(--font-stencil);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--green);
  background: var(--bg);
  padding: 1px 8px;
}

/* ═══════════════════════════════════════════════
   DEPTH PASS — light behaving like space exists
   ═══════════════════════════════════════════════ */

/* 1) Aurora ambient layer: huge, faint light pools drifting glacially.
      Depth via lighting variation — a dark shop has pools of light. */
html::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 34% at 18% 22%, rgba(59,169,255,0.055), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 60%, rgba(43,102,246,0.045), transparent 70%),
    radial-gradient(ellipse 38% 30% at 40% 95%, rgba(125,211,252,0.035), transparent 70%);
  animation: auroraDrift 48s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(3%, -2.5%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  html::before { animation: none; }
}

/* 2) Ground shadow beneath the black box — gives the cube weight and the
      page a floor. Scales with the box since it lives inside .bb-fixed. */
.bb-fixed .hero-black-box::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -72px;
  transform: translateX(-50%);
  width: 120%;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.55) 0%,
    rgba(59,169,255,0.06) 45%,
    transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}

/* 3) The grid is a far layer: driven by --scrolled (set in JS), it trails the
      scroll at 6% speed instead of sticking to the glass. This moved off
      body::after when grid duty passed to .tech-grid — body::after now holds
      only the vignette, which must stay pinned or the darkening slides
      off-centre as you scroll.
      Uses the `translate` longhand deliberately: the mousemove parallax owns
      `transform` via inline style, and the two compose instead of clobbering. */
.tech-grid {
  translate: 0 calc(var(--scrolled, 0) * -0.06px);
}

/* ============================================================
   COMEBACK ENGINE — the money story
   ============================================================ */
.comeback { position: relative; }
.comeback-sub {
  max-width: 560px;
  margin: 14px auto 0;
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.65;
  text-align: center;
}
.comeback-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 48px;
}
@media (max-width: 860px) {
  .comeback-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Ledger card — engraved instrument, money in green */
.comeback-ledger {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: 26px 26px 20px;
  position: relative;
}
.comeback-ledger__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.comeback-ledger__amount {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--green);
  margin-top: 10px;
  text-shadow: 0 0 28px rgba(44, 180, 99, 0.25);
}
.comeback-ledger__period {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 2px;
}
.comeback-ledger__rows {
  margin-top: 20px;
  border-top: 1px solid var(--border);
}
.comeback-ledger__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.comeback-ledger__val {
  font-family: var(--font-mono);
  color: var(--text-primary);
}
.comeback-ledger__foot {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Steps — numbered beats, hairline spine */
.comeback-steps { display: flex; flex-direction: column; gap: 8px; }
.comeback-step {
  display: flex;
  gap: 20px;
  padding: 20px 4px;
}
.comeback-step + .comeback-step { border-top: 1px solid var(--border); }
.comeback-step__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  padding-top: 4px;
  flex-shrink: 0;
}
.comeback-step__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.comeback-step__desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* Trust plate — the human-makes-the-call promise */
.comeback-trust {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 640px;
  margin: 44px auto 0;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
}
.comeback-trust svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }

/* ============================================================
   FEATURE CHAPTERS — one job, three moments
   ============================================================ */
.feat-chapters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 860px;
  margin: 34px auto 0;
}
@media (max-width: 760px) {
  .feat-chapters { grid-template-columns: 1fr; }
}
.feat-chapter {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
  text-decoration: none;
  color: inherit;
}
.feat-chapter__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  padding-top: 2px;
}
.feat-chapter strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}
.feat-chapter span:last-child {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.5;
}
.feat-chapter--money { border-color: rgba(44, 180, 99, 0.3); transition: border-color 0.2s ease, background 0.2s ease; }
.feat-chapter--money:hover { border-color: rgba(44, 180, 99, 0.55); background: rgba(44, 180, 99, 0.04); }
.feat-chapter--money .feat-chapter__num { color: var(--green); }

/* Chapter kicker above each feature eyebrow */
.feat-kicker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ============================================================
   MOCK ROUTE CARD — live GPS drive inside the phone mock
   ============================================================ */
.mock-route-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #14161a;
  margin-top: 10px;
}
.mock-route-map { display: block; width: 100%; height: auto; }

.mock-route-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 12px;
  background: rgba(0, 0, 0, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 9.5px;
  color: var(--text-muted);
}
.mock-route-legend__item { display: flex; align-items: center; gap: 5px; }
.mock-route-legend__start {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(44, 180, 99, 0.7);
}
.mock-route-legend__end {
  width: 7px; height: 7px; border-radius: 2px;
  background: #ff6b6b;
  box-shadow: 0 0 6px rgba(255, 107, 107, 0.6);
}
.mock-route-legend__line { width: 16px; height: 2.5px; border-radius: 99px; background: var(--accent); }

.mock-route-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px 10px 10px;
  background: #101217;
}
.mock-route-stat {
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 6px 3px 5px;
  text-align: center;
}
.mock-route-stat b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.mock-route-stat span {
  display: block;
  font-size: 6.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Route records itself, loops every 10s */
.mock-route-line, .mock-route-glow {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: mockRouteDraw 10s linear infinite;
}
@keyframes mockRouteDraw {
  0% { stroke-dashoffset: 400; opacity: 1; }
  68% { stroke-dashoffset: 0; }
  90% { stroke-dashoffset: 0; opacity: 1; }
  95% { opacity: 0; }
  100% { stroke-dashoffset: 400; opacity: 0; }
}
.mock-route-end { opacity: 0; animation: mockRouteEndPop 10s linear infinite; }
@keyframes mockRouteEndPop {
  0%, 64% { opacity: 0; transform: scale(0.4); }
  68%, 90% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mock-route-line, .mock-route-glow { animation: none; stroke-dashoffset: 0; }
  .mock-route-end { animation: none; opacity: 1; }
}

/* ─── PRICING ─── */
.pricing { position: relative; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  margin-top: 3rem;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem 1.5rem 1.5rem;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.pricing-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  transform: translateY(-3px);
}
.pricing-card--hero {
  background: linear-gradient(180deg, rgba(59, 169, 255, 0.07), rgba(59, 169, 255, 0.02));
  border-color: rgba(59, 169, 255, 0.35);
  box-shadow: 0 0 40px var(--accent-glow);
}
.pricing-card--hero:hover { border-color: rgba(59, 169, 255, 0.55); }
.pricing-card__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #06121e;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing-card__name {
  font-family: 'Barlow', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-transform: uppercase;
}
.pricing-card__for {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.45;
  margin-top: 0.35rem;
  min-height: 2.5em;
}
.pricing-card__price {
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
  font-size: 2.9rem;
  line-height: 1;
  color: var(--text-primary);
  margin-top: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.pricing-card__cur { font-size: 1.4rem; font-weight: 700; vertical-align: 0.55em; margin-right: 0.1em; color: var(--text-secondary); }
.pricing-card__per { font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); margin-left: 0.15em; }
.pricing-card__meta { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.4rem; }
.pricing-card__cta { margin-top: 1.25rem; width: 100%; text-align: center; justify-content: center; }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-secondary:hover { border-color: var(--accent); background: var(--accent-glow); }
.pricing-card__includes {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}
.pricing-card__feats { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.pricing-card__feats li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.45;
  margin-bottom: 0.55rem;
}
.pricing-card__feats li b { color: var(--text-primary); font-weight: 600; }
.pricing-card__feats li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 0.85em;
  height: 0.85em;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pricing-fine {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2rem;
  margin-top: 2.25rem;
  color: var(--text-secondary);
  font-size: 0.83rem;
}
.pricing-fine span {
  position: relative;
  padding-left: 1.3rem;
}
.pricing-fine span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 0.8em;
  height: 0.8em;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pricing-glovebox {
  max-width: 620px;
  margin: 2rem auto 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.6;
  border: 1px dashed var(--border-hover);
  border-radius: 12px;
  padding: 1rem 1.4rem;
}
.pricing-glovebox b { color: var(--text-secondary); }
.sales-form {
  max-width: 860px;
  margin: 2rem auto 0;
  padding: 1.75rem;
  background: var(--bg-card);
  border: 1px solid rgba(59, 169, 255, 0.35);
  border-radius: 16px;
}
.sales-form__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1.5rem;
  align-items: end;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.sales-form__intro h3 {
  margin: 0;
  color: var(--text-primary);
  font-family: 'Barlow', sans-serif;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.08;
}
.sales-form__intro p,
.sales-form__actions p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
}
.sales-form form { margin-top: 1.4rem; }
.sales-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.sales-form label {
  display: grid;
  gap: 0.45rem;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.84rem;
}
.sales-form input,
.sales-form textarea {
  width: 100%;
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  background: rgba(6, 18, 30, 0.72);
  color: var(--text-primary);
  font: inherit;
  font-size: 1rem;
  padding: 0.78rem 0.9rem;
}
.sales-form input { min-height: 48px; }
.sales-form textarea { min-height: 118px; resize: vertical; line-height: 1.5; }
.sales-form input::placeholder,
.sales-form textarea::placeholder { color: var(--text-muted); }
.sales-form input:focus,
.sales-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: transparent;
}
.sales-form__wide { margin-top: 1rem; }
.sales-form__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.2rem;
}
.sales-form__actions .btn { min-height: 48px; white-space: nowrap; }
.sales-form__actions p { font-size: 0.78rem; }
.sales-form__honey {
  position: absolute !important;
  left: -9999px !important;
}
.sales-form__success {
  max-width: 860px;
  margin: 2rem auto 0;
  padding: 1rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 12px;
  color: #ccebd8;
}
.sales-form__success strong { color: #effff6; }
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .pricing-card--hero { order: -1; }
}
@media (max-width: 640px) {
  .sales-form { padding: 1.25rem; }
  .sales-form__intro,
  .sales-form__grid { grid-template-columns: 1fr; }
  .sales-form__intro { gap: 0.65rem; }
  .sales-form__actions { align-items: stretch; flex-direction: column; }
  .sales-form__actions .btn { width: 100%; justify-content: center; }
}

/* ─── Accessibility + performance hardening ─── */
[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-out-expo);
}

.skip-link:focus {
  transform: translateY(0);
}

.demo-video-overlay {
  width: 100%;
  border: 0;
  color: inherit;
  font: inherit;
}

.faq-q {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.hamburger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

@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;
    transition-delay: 0ms !important;
  }

  .reveal,
  .hero-content.reveal,
  .hero-image.reveal {
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BBX — self-contained black box cube (hero, index.html)
   Same component as black-box-cube.html. Face/cell/LED/rivet/hotspot
   styling is inherited from the unprefixed .bb-* rules above; this block
   only re-homes the cube into the hero column and adds the idle drift.
   ═══════════════════════════════════════════════════════════════════════ */
.bbx {
  position: relative;
  flex: none;
  width: 640px;           /* room for the cube + hotspot labels */
  height: 560px;
  pointer-events: none;
}
/* Re-home the camera: fill .bbx instead of the legacy 480px stage */
.bbx .hero-black-box {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
}
/* Idle drift replaces the retired scroll spine (JS block 12) */
.bbx .bb-wrapper {
  animation: bbDrift 12s ease-in-out infinite;
}
@keyframes bbDrift {
  0%, 100% { transform: translate(-50%, -50%)   rotateX(-15deg) rotateY(-38deg); }
  50%      { transform: translate(-50%, -53.5%) rotateX(-11deg) rotateY(-28deg); }
}
/* Hotspots: anchored to the cube's center inside .bbx. The legacy
   .bb-hotspots rule sets position:fixed + opacity:0 (scroll-spine wiring);
   both are overridden here. The ≤1299px hide rule above still applies. */
.bbx .bb-hotspots {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  opacity: 1;
  z-index: 10;
}
/* Ambient particles positioned for the .bbx stage */
.bbx .bb-particle:nth-child(1) { top: 20%;    left: 26%;  animation-delay: 0s; }
.bbx .bb-particle:nth-child(2) { top: 50%;    right: 24%; left: auto; animation-delay: 1.5s; }
.bbx .bb-particle:nth-child(3) { bottom: 25%; left: 27%;  top: auto; animation-delay: 3s; }

/* Mobile: .hero-image becomes a dimmed full-bleed backdrop (see RESPONSIVE
   above); the cube just needs to shrink to stay inside it. */
@media (max-width: 768px) {
  .bbx { transform: scale(0.7); }
}
@media (max-width: 480px) {
  .bbx { transform: scale(0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .bbx .bb-wrapper { animation: none; }
}

/* ── Floating reveal instance (#bbxFloat) ──
   Hidden by default; JS toggles is-shift / is-cta. Sits in the same z-layer
   the old scroll spine used (below scrims and copy). */
.bbx--float {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  z-index: var(--z-box);
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    top 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, top, transform;
}
/* Shift interstitial: re-materialize behind the quote, dim */
.bbx--float.is-shift {
  opacity: 0.3;
  transform: translate(-50%, -50%) scale(0.9);
}
/* Final CTA: bookend — near-full strength, smaller, parked above the
   headline (JS clamps `top`), slow continuous spin */
.bbx--float.is-cta {
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(0.55);
}
.bbx--float.is-cta .bb-wrapper {
  animation: bbSpin 28s linear infinite;
}
@keyframes bbSpin {
  from { transform: translate(-50%, -50%) rotateX(-15deg) rotateY(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(-15deg) rotateY(360deg); }
}
/* Below this width the gutters are too narrow for a background cameo —
   the hero backdrop treatment is enough cube for small screens. */
@media (max-width: 1100px) {
  .bbx--float { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bbx--float { transition: opacity 0.6s ease; }
  .bbx--float.is-cta .bb-wrapper { animation: none; }
}

/* Keep the complete hero composition above the fold on wide, short
   viewports (laptops and desktop browsers with UI chrome). */
@media (min-width: 769px) and (max-height: 900px) {
  .hero {
    padding: 96px 0 32px;
  }
  .hero .container {
    gap: 32px;
  }
  .hero-content {
    max-width: 590px;
  }
  .hero-eyebrow {
    margin-bottom: 16px;
    padding-block: 6px;
  }
  .hero-title {
    margin-bottom: 18px;
  }
  .hero-title-line {
    font-size: clamp(1.9rem, 3.15vw, 2.65rem);
  }
  .hero-subtitle-bold {
    max-width: 540px;
    font-size: 1.08rem;
    line-height: 1.5;
  }
  .hero-ctas {
    margin-bottom: 10px;
  }
  .btn-hero {
    padding: 16px 44px;
  }
  .bbx {
    width: min(560px, 40vw);
    height: 460px;
  }
}


/* ============================================================
   DRIVE MODE SHOWCASE — Orano-inspired scroll-scrubbed stage
   Default (no-JS / reduced-motion / mobile) = fully rendered
   final state. JS adds .dshow--armed on desktop to enable the
   tall sticky section and drives every value from scroll.
   ============================================================ */
.dshow { position: relative; }
.dshow--armed { height: 420vh; }

.dshow__sticky {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 62% 42%, rgba(59,169,255,0.06), transparent 65%),
    linear-gradient(180deg, #06060b 0%, #07070c 100%);
  border-top: 1px solid rgba(59,169,255,0.08);
  border-bottom: 1px solid rgba(59,169,255,0.08);
}
.dshow--armed .dshow__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
}

/* Terrain stage */
.dshow__terrain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.dshow__canvas {
  display: block;
  outline: none;
  cursor: crosshair;
}

.dshow__canvas:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(59,169,255,0.48);
}

/* Wireframe truck */
.dshow__trace {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dshow__trace--thin { stroke-width: 1.3; opacity: 0.8; }
.dshow__truck-float { animation: dshowFloat 6s ease-in-out infinite; }
@keyframes dshowFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.dshow__spokes { transform-box: fill-box; transform-origin: center; }

/* HUD chrome */
.dshow__hud { display: block; }
.dshow__hud-label {
  position: absolute;
  top: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: rgba(232,232,240,0.45);
  z-index: 4;
}
.dshow__hud-label--tl { left: 44px; }
.dshow__hud-label--tr { right: 44px; }
.dshow__hud-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(59,169,255,0.35);
  z-index: 4;
}
.dshow__hud-corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.dshow__hud-corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.dshow__hud-corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.dshow__hud-corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.dshow__hud-hint {
  position: absolute;
  right: 44px;
  bottom: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(232,232,240,0.4);
  z-index: 4;
  animation: dshowHintPulse 2.2s ease-in-out infinite;
}

.dshow__keys {
  position: absolute;
  right: 44px;
  bottom: 48px;
  width: 116px;
  display: grid;
  grid-template-columns: repeat(3, 34px);
  grid-template-rows: repeat(2, 34px);
  gap: 5px;
  z-index: 4;
  opacity: 0.58;
  transition: opacity 0.2s ease;
}

.dshow__sticky:hover .dshow__keys,
.dshow__canvas:focus ~ .dshow__hud .dshow__keys {
  opacity: 0.92;
}

.dshow__key {
  appearance: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  border: 1px solid rgba(194,225,244,0.24);
  border-radius: 6px;
  background: rgba(5,10,15,0.74);
  color: rgba(232,246,255,0.68);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
  backdrop-filter: blur(8px);
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease, transform 0.12s ease;
  user-select: none;
}
.dshow__key:hover {
  border-color: rgba(103,189,255,0.58);
  color: #fff;
  background: rgba(59,169,255,0.11);
}
.dshow__key:focus-visible {
  outline: 1px solid rgba(103,189,255,0.9);
  outline-offset: 2px;
}
.dshow__key.is-suggested {
  border-color: rgba(59,169,255,0.74);
  color: #fff;
  animation: dshowTurnPrompt 1.25s ease-in-out infinite;
}

.dshow__key.is-active {
  border-color: rgba(59,169,255,0.88);
  color: #fff;
  background: rgba(59,169,255,0.2);
  box-shadow: 0 0 18px rgba(59,169,255,0.24), inset 0 0 0 1px rgba(255,255,255,0.08);
  transform: translateY(1px);
}

.dshow__key--up { grid-column: 2; grid-row: 1; }
.dshow__key--left { grid-column: 1; grid-row: 2; }
.dshow__key--down { grid-column: 2; grid-row: 2; }
.dshow__key--right { grid-column: 3; grid-row: 2; }
@keyframes dshowHintPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}
@keyframes dshowTurnPrompt {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,169,255,0.06); }
  50% { box-shadow: 0 0 22px 3px rgba(59,169,255,0.22); }
}

/* Header */
.dshow__head {
  position: absolute;
  top: clamp(48px, 7vh, 76px);
  left: clamp(320px, 27vw, 520px);
  right: clamp(40px, 5vw, 96px);
  text-align: left;
  z-index: 3;
  width: auto;
}
.dshow__title {
  font-family: 'Barlow Condensed', sans-serif;
  max-width: 18ch;
  font-size: clamp(1.75rem, 2.7vw, 2.65rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-top: 8px;
}
.dshow__title span { color: var(--accent); }
.dshow__subtitle {
  max-width: 610px;
  margin: 12px auto 0;
  color: rgba(232,232,240,0.56);
  font-size: clamp(0.82rem, 1.1vw, 0.96rem);
  line-height: 1.55;
}

/* Phone (left) */
.dshow__phone {
  position: absolute;
  left: clamp(24px, 3vw, 52px);
  top: 52%;
  transform: translateY(-50%);
  width: clamp(220px, 16vw, 252px);
  z-index: 3;
  filter: drop-shadow(0 24px 46px rgba(0,0,0,0.42));
}
.dshow__phone-body { min-height: 0; }
.dshow__drive-badge { justify-content: space-between; }
.dshow__drive-badge > svg { margin-right: 5px; }
.dshow__rec-dot {
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: #ff6875;
  box-shadow: 0 0 9px rgba(255,104,117,0.72);
  animation: dshowRec 1.4s ease-in-out infinite;
}
@keyframes dshowRec {
  50% { opacity: 0.35; transform: scale(0.76); }
}
.dshow__map { height: 174px; }
.dshow__voice {
  min-height: 114px;
  margin: 9px;
  padding: 10px 11px;
  border: 1px solid rgba(59,169,255,0.15);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(59,169,255,0.08), rgba(59,169,255,0.015) 62%), rgba(6,10,15,0.72);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.dshow__voice.is-captured {
  border-color: rgba(67,211,156,0.34);
  background: linear-gradient(135deg, rgba(67,211,156,0.09), rgba(59,169,255,0.02) 68%), rgba(6,10,15,0.78);
  box-shadow: inset 0 0 24px rgba(67,211,156,0.025);
}
.dshow__voice-top {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(232,232,240,0.52);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.4px;
}
.dshow__voice-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 7px;
  color: var(--accent);
  background: rgba(59,169,255,0.11);
}
.dshow__voice-time {
  margin-left: auto;
  color: rgba(232,232,240,0.32);
  font-variant-numeric: tabular-nums;
}
.dshow__wave {
  height: 15px;
  margin: 7px 0 5px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.dshow__wave i {
  width: 2px;
  height: 4px;
  border-radius: 99px;
  background: var(--accent);
  opacity: 0.72;
  animation: dshowWave 0.92s ease-in-out infinite alternate;
}
.dshow__wave i:nth-child(2), .dshow__wave i:nth-child(7) { animation-delay: -0.38s; }
.dshow__wave i:nth-child(3), .dshow__wave i:nth-child(6) { animation-delay: -0.68s; }
.dshow__wave i:nth-child(4) { animation-delay: -0.18s; }
.dshow__wave i:nth-child(5) { animation-delay: -0.54s; }
@keyframes dshowWave {
  from { height: 3px; opacity: 0.35; }
  to { height: 14px; opacity: 0.95; }
}
.dshow__voice.is-captured .dshow__wave i {
  animation-play-state: paused;
  height: 3px;
  background: #43d39c;
}
.dshow__voice strong {
  display: block;
  min-height: 30px;
  color: rgba(245,249,252,0.92);
  font-size: 10px;
  line-height: 1.42;
}
.dshow__voice small {
  display: block;
  margin-top: 4px;
  color: rgba(232,232,240,0.34);
  font-size: 8px;
  line-height: 1.4;
}
.dshow__phone .mock-route-stats {
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.dshow__map-pin-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  font-weight: 700;
  fill: #071019;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Story status — one changing message replaces the old pile of explanatory copy. */
.dshow__story {
  position: absolute;
  right: clamp(20px, 4vw, 64px);
  bottom: clamp(26px, 5vh, 52px);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 3;
  min-width: 310px;
  padding: 13px 16px;
  border: 1px solid rgba(59,169,255,0.18);
  border-radius: 12px;
  background: rgba(5,9,14,0.68);
  box-shadow: 0 16px 44px rgba(0,0,0,0.26);
  backdrop-filter: blur(12px);
}
.dshow__story-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  padding-right: 14px;
  border-right: 1px solid rgba(255,255,255,0.09);
}
.dshow__story small {
  display: block;
  margin-bottom: 3px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(103,189,255,0.72);
}
.dshow__story strong {
  display: block;
  color: rgba(244,249,252,0.88);
  font-size: 12px;
  font-weight: 500;
}

/* Restored original supporting UI. */
.dshow__progress {
  position: absolute;
  left: clamp(20px, 4vw, 64px);
  bottom: clamp(26px, 5vh, 52px);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 3;
}
.dshow__progress-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 2px;
  color: rgba(232,232,240,0.45);
}
.dshow__progress-track {
  width: clamp(420px, 40vw, 540px);
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.dshow__progress-fill {
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(59,169,255,0.6);
}
.dshow__progress-pct {
  min-width: 44px;
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Mobile: normal flow, everything visible, no scrub */
@media (max-width: 960px) {
  .dshow, .dshow--armed { height: auto; }
  .dshow__sticky, .dshow--armed .dshow__sticky {
    position: relative;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 72px 20px 56px;
  }
  .dshow__head { position: static; width: 100%; text-align: center; }
  .dshow__phone { position: static; transform: none; width: 100%; max-width: 320px; margin: 0 auto; }
  .dshow__terrain { position: relative; inset: auto; width: 100%; height: min(70vw, 520px); order: 2; }
  .dshow__phone { order: 3; }
  .dshow__progress { position: static; order: 4; justify-content: center; }
  .dshow__progress-track { width: clamp(130px, 42vw, 220px); }
  .dshow__hud-corner, .dshow__hud-hint, .dshow__keys { display: none; }
  .dshow__hud-label { top: 16px; }
  .dshow__hud-label--tr { display: none; } /* avoid colliding with the tl label on narrow screens */
}

@media (prefers-reduced-motion: reduce) {
  .dshow__truck-float { animation: none; }
  .dshow__hud-hint { display: none; } /* no scrub to "drive" without motion */
}

/* Immersive story responsive treatment */
@media (max-width: 900px) {
  .curtify-story__frame {
    min-height: 680px;
    aspect-ratio: auto;
  }
  .curtify-story__workshop {
    object-position: 28% center;
    opacity: 0.58;
  }
  .curtify-story__copy {
    top: 7%;
    left: 7%;
    width: 86%;
  }
  .curtify-story__headline {
    max-width: 12em;
    font-size: clamp(2.2rem, 7vw, 3.6rem);
  }
  .curtify-story__subhead {
    width: 76%;
    min-width: 0;
  }
  .curtify-story__dashboard {
    right: 6%;
    bottom: 15%;
    width: 88%;
  }
  .curtify-story__capture,
  .curtify-story__data-link {
    display: none;
  }
}

@media (max-width: 560px) {
  .curtify-story.section-pad { padding-left: 12px; padding-right: 12px; }
  .curtify-story__frame {
    min-height: 620px;
    border-radius: 13px;
  }
  .curtify-story__headline {
    font-size: clamp(2rem, 10vw, 2.75rem);
    line-height: 1;
  }
  .curtify-story__subhead {
    width: 94%;
    font-size: 0.78rem;
  }
  .curtify-story__dashboard {
    right: 4%;
    bottom: 16%;
    width: 92%;
    border-radius: 7px;
  }
  .curtify-story__workflow {
    left: 2%;
    right: 2%;
    bottom: 5%;
  }
  .curtify-story__step {
    gap: 8px;
    font-size: 0.48rem;
    letter-spacing: 0.08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .curtify-story__workshop,
  .curtify-story__dashboard,
  .curtify-story__capture b,
  .curtify-story__data-link i,
  .curtify-story__workflow::after {
    animation: none;
  }
}