/* =============================================================
   ARK LABS — HOMEPAGE STYLES
   Section-specific styles for the home page only:
   hero, trust bar, EU AI Act countdown, problem, capabilities,
   connectors, comparison, benchmarks, density, use cases,
   pricing, sovereign CTA.
   ============================================================= */

/* ===== HERO ===== */
.hero {
  padding: 72px 60px 60px; background: var(--white);
  display: flex; align-items: center; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -120px; right: -120px;
  width: 680px; height: 680px;
  background: radial-gradient(circle, rgba(0,174,232,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: -160px; left: -120px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(13,138,106,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content {
  max-width: 1280px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: 56px;
  position: relative; z-index: 2;
}
.hero-text { flex: 1; min-width: 480px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 20px; font-size: 0.78em; font-weight: 600;
  background: var(--cyan-light); color: var(--cyan-dark); border: 1px solid rgba(0,174,232,0.15);
  margin-bottom: 22px;
}
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.hero h1 {
  font-size: 3.8em; font-weight: 800; line-height: 1.05;
  color: var(--navy); margin-bottom: 22px; letter-spacing: -1.8px;
}
.hero h1 .accent { color: var(--cyan); }
.hero h1 .underline { position: relative; display: inline-block; }
.hero h1 .underline::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 10px; background: rgba(0,174,232,0.18); z-index: -1; border-radius: 2px;
}

/* Hero rolling deployment phrase — cycles through On-prem / In your cloud / At the edge / In your country */
.hero h1 .hero-roll {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  height: 1.05em;
  line-height: 1.05;
  color: var(--cyan);
  position: relative;
}
.hero h1 .hero-roll-list {
  display: block;
  animation: heroRoll 9s infinite;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.hero h1 .hero-roll-item {
  display: block;
  height: 1.20em;         /* taller than the 1.05em clip — extra 0.15em below each word absorbs the 'p' descender in "chip" so it can't bleed into the next word */
  line-height: 1.05;
  white-space: nowrap;
}
@keyframes heroRoll {
  /* translateY is a % of the list's own height, so percentages remain
     valid when each item grows from 1.05em → 1.20em. -25% still equals one item. */
  0%,   28%  { transform: translateY(0%); }
  33%,  61%  { transform: translateY(-25%); }
  66%,  94%  { transform: translateY(-50%); }
  100%       { transform: translateY(-75%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .hero-roll-list { animation: none; }
}

.hero .subtitle {
  font-size: 1.18em; color: var(--steel); line-height: 1.65;
  max-width: 540px; margin-bottom: 32px;
}
.hero-ctas { display: flex; gap: 14px; margin-bottom: 10px; }
.hero-free-note { font-size: 0.82em; color: var(--steel); margin-bottom: 38px; }
.hero-free-note strong { color: var(--green); }
.hero-proof {
  display: flex; align-items: center; gap: 22px;
  padding-top: 24px; border-top: 1px solid var(--border-light);
}
.hero-proof-item { text-align: left; }
.hero-proof-item .number { font-size: 1.45em; font-weight: 800; color: var(--cyan); }
.hero-proof-item .label { font-size: 0.7em; color: var(--steel); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.8px; line-height: 1.4; }
.hero-proof-divider { width: 1px; height: 36px; background: var(--border-light); }

/* Hero dashboard mock */
.hero-visual { flex: 1; min-width: 460px; position: relative; }
.dashboard-mock {
  background: white; border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(12,35,64,0.10), 0 2px 8px rgba(12,35,64,0.04);
  position: relative; z-index: 2;
}
.dash-header {
  padding: 14px 18px; background: var(--bg-warm);
  border-bottom: 1px solid var(--border-light);
  display: flex; justify-content: space-between; align-items: center;
}
.dash-header-left { display: flex; align-items: center; gap: 7px; }
.dash-dot { width: 10px; height: 10px; border-radius: 50%; }
.dash-dot.red { background: #ff5f57; }
.dash-dot.yellow { background: #febc2e; }
.dash-dot.green { background: #28c840; }
.dash-title { font-size: 0.78em; color: var(--steel); margin-left: 8px; font-weight: 500; }
.dash-region-pill { font-size: 0.68em; color: var(--green); font-weight: 700; background: var(--green-light); padding: 3px 8px; border-radius: 10px; display: inline-flex; align-items: center; gap: 5px; }
.dash-body { padding: 18px; }
.dash-topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-light); }
.dash-topline-left { display: flex; align-items: center; gap: 8px; }
.dash-topline-title { font-size: 0.82em; font-weight: 700; color: var(--navy); }
.dash-topline-sub { font-size: 0.7em; color: var(--steel); }
.dash-topline-right { display: flex; align-items: center; gap: 10px; }
.dash-live { font-size: 0.68em; color: var(--green); font-weight: 700; display: flex; align-items: center; gap: 5px; }
.dash-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
.model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.model-card { background: var(--bg-warm); border: 1px solid var(--border-light); border-radius: 10px; padding: 13px; }
.model-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.model-name { font-size: 0.8em; font-weight: 700; color: var(--navy); }
.model-status { font-size: 0.62em; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.model-status.running { background: var(--green-light); color: var(--green); }
.model-status.scaling { background: var(--cyan-light); color: var(--cyan-dark); }
.model-card-meta { font-size: 0.7em; color: var(--steel); }
.model-card-meta span { margin-right: 10px; }
.model-card-bar { height: 4px; border-radius: 2px; background: var(--border-light); margin-top: 8px; overflow: hidden; }
.model-card-bar-fill { height: 100%; border-radius: 2px; animation: bar-fill 2.5s ease-out; }
@keyframes bar-fill { from { width: 0; } }
.dash-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash-metric { background: var(--bg-warm); border: 1px solid var(--border-light); border-radius: 10px; padding: 11px 13px; text-align: center; }
.dash-metric .val { font-size: 1.2em; font-weight: 800; color: var(--cyan); }
.dash-metric .lbl { font-size: 0.65em; color: var(--steel); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ===== HERO FLEET ANIMATION v4 =====
   Right side of hero: Agents → ARK API Gateway (+ Supervisor Node) → heterogeneous
   compute fleet. Shows live session lifecycle, dynamic routing, warm-up / shard swaps,
   and multi-vendor nodes. Scoped under `.hero-fleet-v4` to prevent collision with
   the rest of the site. Mirrors /preview/hero-animations/b.html.
*/
.hero-fleet-v4 {
  --navy: #0a1f3c;
  --navy-2: #142f52;
  --navy-deep: #060f1f;
  --cyan: #00c2d1;
  --cyan-2: #7cf2ff;
  --cyan-glow: rgba(0,194,209,0.45);
  --amber: #f5a623;
  --amber-glow: rgba(245,166,35,0.5);
  --violet: #a78bfa;
  --mint: #4ade80;
  --green: #10b981;
  --red: #ef4444;
  --steel: #5a7189;
  --bg: #f5f2ed;
  --bg-2: #ffffff;
  --border: #e2ddd5;
  --border-light: #ebe6dd;

  container-type: inline-size;
  width: 100%;
  max-width: 780px;
  aspect-ratio: 780 / 660;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  font-family: 'Inter', sans-serif;
  color: var(--navy);
}
.hero-fleet-v4 * { box-sizing: border-box; }

/* Inner stage is a fixed 780×660 canvas; scale it to fit the container's inline size. */
.hero-fleet-v4 .stage {
  position: absolute;
  top: 0; left: 0;
  width: 780px;
  height: 660px;
  transform-origin: top left;
  transform: scale(calc(100cqi / 780px));
}
/* Fallback for browsers without container queries — use fixed scale steps. */
@supports not (container-type: inline-size) {
  .hero-fleet-v4 { aspect-ratio: auto; height: auto; max-width: 100%; }
  .hero-fleet-v4 .stage { transform: scale(0.8); transform-origin: top center; position: relative; margin: 0 auto; }
  @media (max-width: 1120px) { .hero-fleet-v4 .stage { transform: scale(0.62); margin-bottom: -250px; } }
  @media (max-width: 960px)  { .hero-fleet-v4 .stage { transform: scale(0.52); margin-bottom: -315px; } }
}

/* ---- Agents (left column, vertically aligned with gateway body) ---- */
.hero-fleet-v4 .agents {
  position: absolute; left: 0; top: 90px;
  width: 150px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 2;
}
.hero-fleet-v4 .agent {
  position: relative;
  height: 36px;
  padding: 0 10px 0 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px; font-weight: 600; color: var(--navy);
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 1px 3px rgba(10,31,60,0.04);
}
.hero-fleet-v4 .agent::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; background: var(--cyan); border-radius: 0 2px 2px 0;
}
.hero-fleet-v4 .agent.c-mint::before   { background: var(--mint); }
.hero-fleet-v4 .agent.c-violet::before { background: var(--violet); }
.hero-fleet-v4 .agent.c-amber::before  { background: var(--amber); }
.hero-fleet-v4 .agent-icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cyan) 0%, #0095a1 100%);
  position: relative;
}
.hero-fleet-v4 .agent.c-mint   .agent-icon { background: linear-gradient(135deg, var(--mint)   0%, #059669 100%); }
.hero-fleet-v4 .agent.c-violet .agent-icon { background: linear-gradient(135deg, var(--violet) 0%, #6d28d9 100%); }
.hero-fleet-v4 .agent.c-amber  .agent-icon { background: linear-gradient(135deg, var(--amber)  0%, #b45309 100%); }
.hero-fleet-v4 .agent-icon::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, transparent 60%);
  opacity: 0.3;
}
.hero-fleet-v4 .agent-text { line-height: 1.25; }
.hero-fleet-v4 .agent-name { font-weight: 700; font-size: 11px; }
.hero-fleet-v4 .agent-meta { font-size: 9px; color: var(--steel); font-weight: 500; letter-spacing: 0.3px; }
.hero-fleet-v4 .agent-pulse {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  right: 10px; top: 50%; transform: translateY(-50%);
  background: var(--cyan);
  animation: v4-agent-pulse 2.4s infinite;
}
.hero-fleet-v4 .agent.c-mint   .agent-pulse { background: var(--mint); }
.hero-fleet-v4 .agent.c-violet .agent-pulse { background: var(--violet); }
.hero-fleet-v4 .agent.c-amber  .agent-pulse { background: var(--amber); }
@keyframes v4-agent-pulse {
  0%, 80%, 100% { opacity: 0.3; box-shadow: none; }
  40% { opacity: 1; box-shadow: 0 0 8px currentColor; }
}
.hero-fleet-v4 .agent:nth-child(1) .agent-pulse { animation-delay: 0s; }
.hero-fleet-v4 .agent:nth-child(2) .agent-pulse { animation-delay: 0.3s; }
.hero-fleet-v4 .agent:nth-child(3) .agent-pulse { animation-delay: 0.6s; }
.hero-fleet-v4 .agent:nth-child(4) .agent-pulse { animation-delay: 0.9s; }

/* ---- Hardware rack units (supervisor + gateway) ---- */
.hero-fleet-v4 .hw-unit {
  position: absolute;
  background: linear-gradient(180deg, #1a2e4d 0%, var(--navy) 60%, #051229 100%);
  border: 1px solid #2d4268;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 10px 14px;
  color: white;
  z-index: 5;
  box-shadow:
    0 6px 24px rgba(10,31,60,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.4);
}
.hero-fleet-v4 .hw-unit::before,
.hero-fleet-v4 .hw-unit::after {
  content: ''; position: absolute;
  top: 10%; bottom: 10%; width: 7px;
  background: linear-gradient(180deg, #2d4268 0%, #1a2e4d 100%);
  border-radius: 2px;
}
.hero-fleet-v4 .hw-unit::before { left: -3px; }
.hero-fleet-v4 .hw-unit::after  { right: -3px; }

.hero-fleet-v4 .hw-supervisor {
  top: 10px; left: 230px;
  width: 360px; min-height: 58px;
  padding: 7px 10px;
}
.hero-fleet-v4 .hw-supervisor .hw-bezel { gap: 6px; }
.hero-fleet-v4 .hw-supervisor .hw-body {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 5px;
}
.hero-fleet-v4 .sidecar-tag {
  position: absolute; top: -10px; right: 14px;
  background: var(--bg-2);
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 9px; font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: ui-monospace, monospace;
  box-shadow: 0 0 10px var(--amber-glow);
}
.hero-fleet-v4 .hw-gateway {
  top: 78px; left: 200px;
  width: 400px; min-height: 195px;
  padding: 8px 12px;
}
.hero-fleet-v4 .hw-bezel { display: flex; align-items: center; gap: 10px; }
.hero-fleet-v4 .hw-brand {
  font-size: 10px; font-weight: 800;
  letter-spacing: 2px; color: var(--cyan);
  padding: 3px 8px;
  background: linear-gradient(180deg, rgba(0,194,209,0.15) 0%, rgba(0,194,209,0.05) 100%);
  border: 1px solid rgba(0,194,209,0.3);
  border-radius: 3px;
  text-shadow: 0 0 8px rgba(0,194,209,0.6);
}
.hero-fleet-v4 .hw-supervisor .hw-brand {
  color: var(--amber);
  background: linear-gradient(180deg, rgba(245,166,35,0.15) 0%, rgba(245,166,35,0.05) 100%);
  border-color: rgba(245,166,35,0.3);
  text-shadow: 0 0 8px rgba(245,166,35,0.6);
}
.hero-fleet-v4 .hw-title {
  font-size: 12px; font-weight: 800;
  letter-spacing: 2px; color: white;
  text-transform: uppercase;
}
.hero-fleet-v4 .hw-supervisor .hw-title { font-size: 11px; letter-spacing: 1.6px; }
.hero-fleet-v4 .hw-id {
  font-size: 10px; color: rgba(255,255,255,0.35);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.hero-fleet-v4 .hw-leds {
  display: flex; gap: 5px; margin-left: auto;
  align-items: center; padding: 4px 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.03);
}
.hero-fleet-v4 .hw-led {
  width: 6px; height: 6px; border-radius: 50%;
  background: #1a2742;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
}
.hero-fleet-v4 .hw-led.on-green { background: var(--green); box-shadow: 0 0 6px var(--green), inset 0 0 1px rgba(255,255,255,0.5); }
.hero-fleet-v4 .hw-led.on-amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.hero-fleet-v4 .hw-led.on-red   { background: var(--red);   box-shadow: 0 0 6px var(--red); }
.hero-fleet-v4 .hw-led.blink-slow { animation: v4-blink-slow 2s infinite; }
.hero-fleet-v4 .hw-led.blink-fast { animation: v4-blink-fast 0.8s infinite; }
@keyframes v4-blink-slow { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0.15; } 100% { opacity: 1; } }
@keyframes v4-blink-fast { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0.2; } 100% { opacity: 1; } }
.hero-fleet-v4 .led-label {
  font-size: 8px; color: rgba(255,255,255,0.4);
  font-family: ui-monospace, monospace;
  letter-spacing: 0.5px; margin-right: 2px;
}
.hero-fleet-v4 .hw-body {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 10px;
  margin-top: 8px;
  align-items: stretch;
}
.hero-fleet-v4 .hw-lcd {
  background: linear-gradient(180deg, #020814 0%, #030d1c 100%);
  border: 1px solid rgba(0,194,209,0.15);
  border-radius: 3px;
  padding: 7px 10px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  color: var(--cyan-2);
  text-shadow: 0 0 4px rgba(124,242,255,0.5);
  box-shadow: inset 0 0 20px rgba(0,194,209,0.08), inset 0 0 1px rgba(0,194,209,0.3);
  position: relative;
  overflow: hidden;
}
.hero-fleet-v4 .hw-supervisor .hw-lcd {
  color: #ffd68a;
  text-shadow: 0 0 4px rgba(255,214,138,0.5);
  border-color: rgba(245,166,35,0.15);
  box-shadow: inset 0 0 20px rgba(245,166,35,0.08), inset 0 0 1px rgba(245,166,35,0.3);
  padding: 5px 7px;
}
.hero-fleet-v4 .hw-lcd::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 3px
  );
  pointer-events: none;
}
.hero-fleet-v4 .lcd-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 2px;
}
.hero-fleet-v4 .lcd-label {
  font-size: 8px; color: rgba(124,242,255,0.5);
  letter-spacing: 1.2px; text-transform: uppercase;
}
.hero-fleet-v4 .hw-supervisor .lcd-label { color: rgba(255,214,138,0.55); font-size: 7.5px; }
.hero-fleet-v4 .lcd-value { font-weight: 700; font-size: 11px; }
.hero-fleet-v4 .hw-supervisor .lcd-value { font-size: 10px; }
.hero-fleet-v4 .lcd-spark {
  display: flex; align-items: flex-end; gap: 1.5px;
  height: 22px; margin-top: 4px;
}
.hero-fleet-v4 .lcd-spark span {
  flex: 1; background: var(--cyan);
  border-radius: 1px; opacity: 0.85;
  box-shadow: 0 0 3px var(--cyan);
  animation: v4-spark 1.4s infinite ease-in-out;
}
/* 16 spark bars — staggered .1s offsets so the waveform doesn't tick in lockstep.
   Cleaner than per-element style="" attributes (was: 16x inline animation-delay). */
.hero-fleet-v4 .lcd-spark span:nth-child(1)  { animation-delay: 0s;   }
.hero-fleet-v4 .lcd-spark span:nth-child(2)  { animation-delay: .1s;  }
.hero-fleet-v4 .lcd-spark span:nth-child(3)  { animation-delay: .2s;  }
.hero-fleet-v4 .lcd-spark span:nth-child(4)  { animation-delay: .3s;  }
.hero-fleet-v4 .lcd-spark span:nth-child(5)  { animation-delay: .4s;  }
.hero-fleet-v4 .lcd-spark span:nth-child(6)  { animation-delay: .5s;  }
.hero-fleet-v4 .lcd-spark span:nth-child(7)  { animation-delay: .6s;  }
.hero-fleet-v4 .lcd-spark span:nth-child(8)  { animation-delay: .7s;  }
.hero-fleet-v4 .lcd-spark span:nth-child(9)  { animation-delay: .8s;  }
.hero-fleet-v4 .lcd-spark span:nth-child(10) { animation-delay: .9s;  }
.hero-fleet-v4 .lcd-spark span:nth-child(11) { animation-delay: 1s;   }
.hero-fleet-v4 .lcd-spark span:nth-child(12) { animation-delay: 1.1s; }
.hero-fleet-v4 .lcd-spark span:nth-child(13) { animation-delay: 1.2s; }
.hero-fleet-v4 .lcd-spark span:nth-child(14) { animation-delay: 1.3s; }
.hero-fleet-v4 .lcd-spark span:nth-child(15) { animation-delay: 1.4s; }
.hero-fleet-v4 .lcd-spark span:nth-child(16) { animation-delay: 1.5s; }
/* Spacing for the lcd-row that immediately follows the spark (Active sessions row). */
.hero-fleet-v4 .lcd-spark + .lcd-row { margin-top: 6px; }
@keyframes v4-spark {
  0%, 100% { height: 20%; }
  25% { height: 75%; }
  50% { height: 45%; }
  75% { height: 90%; }
}
.hero-fleet-v4 .lcd-mini {
  font-size: 9px; display: flex; justify-content: space-between;
  margin-top: 4px; opacity: 0.75;
}
.hero-fleet-v4 .hw-ports {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 10px;
  gap: 4px 3px;
  background: #030a18;
  padding: 6px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.04);
  align-content: center;
}
.hero-fleet-v4 .hw-port {
  background: linear-gradient(180deg, #0e1d38 0%, #091429 100%);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 1px;
  height: 100%;
}
.hero-fleet-v4 .hw-port.active {
  background: linear-gradient(180deg, var(--cyan) 0%, #008591 100%);
  box-shadow: 0 0 4px var(--cyan), inset 0 0 2px rgba(255,255,255,0.3);
  animation: v4-port-flicker 1.2s infinite;
}
@keyframes v4-port-flicker {
  0%, 100% { opacity: 1; }
  20%, 80% { opacity: 0.6; }
}
.hero-fleet-v4 .hw-port:nth-child(1).active { animation-delay: 0s; }
.hero-fleet-v4 .hw-port:nth-child(2).active { animation-delay: 0.2s; }
.hero-fleet-v4 .hw-port:nth-child(3).active { animation-delay: 0.4s; }
.hero-fleet-v4 .hw-port:nth-child(4).active { animation-delay: 0.6s; }
.hero-fleet-v4 .hw-port:nth-child(5).active { animation-delay: 0.8s; }

/* ---- Supervisor mini-cards ---- */
.hero-fleet-v4 .sv-card {
  background: #020814;
  border: 1px solid rgba(245,166,35,0.18);
  border-radius: 3px;
  padding: 4px 7px;
  position: relative;
  overflow: hidden;
}
.hero-fleet-v4 .sv-card::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(245,166,35,0.06) 2px, rgba(245,166,35,0.06) 3px
  );
  pointer-events: none;
}
.hero-fleet-v4 .sv-card .k {
  font-size: 7.5px;
  color: rgba(255,214,138,0.55);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-family: ui-monospace, monospace;
}
.hero-fleet-v4 .sv-card .v {
  font-size: 12px; font-weight: 800;
  color: #ffd68a;
  text-shadow: 0 0 4px rgba(255,214,138,0.5);
  font-family: ui-monospace, monospace;
}

/* ---- Compute nodes — 3×2 heterogeneous fleet (6 GPUs).
       Spans full hero canvas (x=20 → x=760); 3 narrower cards per row for a denser rack floor. ---- */
.hero-fleet-v4 .compute-grid {
  position: absolute;
  top: 300px; left: 20px; right: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 173px 173px;
  column-gap: 14px;
  row-gap: 14px;
}
.hero-fleet-v4 .compute {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 1px 3px rgba(10,31,60,0.03);
  position: relative;
  z-index: 2; /* above SVG trunk lines (z:1) so the central spine runs behind cards */
  display: flex; flex-direction: column; gap: 4px;
}
.hero-fleet-v4 .compute-label {
  font-size: 8.5px; letter-spacing: 1.3px; font-weight: 800;
  color: var(--cyan);
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-fleet-v4 .compute-label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  animation: v4-node-blink 2s infinite;
}
@keyframes v4-node-blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.hero-fleet-v4 .compute-label .vendor {
  margin-left: auto;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  color: white;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.1;
}
.hero-fleet-v4 .compute-label .vendor.nvidia { background: #76b900; }
.hero-fleet-v4 .compute-label .vendor.amd    { background: #ed1c24; }
.hero-fleet-v4 .compute-label .vendor.intel  { background: #0068b5; }

/* ---- GPU card (physical card + fans) ---- */
.hero-fleet-v4 .gpu-card {
  position: relative;
  height: 60px;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 1px solid #333;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 4px 32px 4px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -2px 4px rgba(0,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.15);
  overflow: hidden;
}
.hero-fleet-v4 .gpu-card::before {
  content: '';
  position: absolute; right: 0; top: 4px; bottom: 4px;
  width: 26px;
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  border-left: 1px solid #333;
  border-radius: 0 3px 3px 0;
}
.hero-fleet-v4 .gpu-card::after {
  content: '';
  position: absolute; right: 6px; top: 12px; bottom: 12px;
  width: 14px;
  background: repeating-linear-gradient(180deg,
    transparent 0px, transparent 2px,
    #0a0a0a 2px, #0a0a0a 5px);
  border-radius: 1px;
}
.hero-fleet-v4 .gpu-rgb {
  position: absolute; top: 0; left: 10px; right: 38px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(0,194,209,0.2) 0%, var(--cyan) 25%, var(--cyan-2) 50%, var(--cyan) 75%,
    rgba(0,194,209,0.2) 100%);
  border-radius: 0 0 1px 1px;
  box-shadow: 0 0 6px var(--cyan);
  animation: v4-rgb-pulse 3s infinite;
}
.hero-fleet-v4 .compute.vendor-nv    .gpu-rgb { background: linear-gradient(90deg, rgba(118,185,0,0.2), #76b900, #a0ff00, #76b900, rgba(118,185,0,0.2)); box-shadow: 0 0 6px #76b900; }
.hero-fleet-v4 .compute.vendor-amd   .gpu-rgb { background: linear-gradient(90deg, rgba(237,28,36,0.2), #ed1c24, #ff4d5c, #ed1c24, rgba(237,28,36,0.2)); box-shadow: 0 0 6px #ed1c24; }
.hero-fleet-v4 .compute.vendor-intel .gpu-rgb { background: linear-gradient(90deg, rgba(0,104,181,0.2), #0068b5, #3ba0ff, #0068b5, rgba(0,104,181,0.2)); box-shadow: 0 0 6px #0068b5; }
@keyframes v4-rgb-pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }

.hero-fleet-v4 .fan {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a3a3a 0%, #1a1a1a 50%, #050505 100%);
  border: 1.5px solid #2a2a2a;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; flex-shrink: 0;
}
.hero-fleet-v4 .fan-blades {
  position: absolute; inset: 4px; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(80,80,80,0.95) 0deg, rgba(20,20,20,0.95) 18deg,
    rgba(80,80,80,0.95) 36deg, rgba(20,20,20,0.95) 54deg,
    rgba(80,80,80,0.95) 72deg, rgba(20,20,20,0.95) 90deg,
    rgba(80,80,80,0.95) 108deg, rgba(20,20,20,0.95) 126deg,
    rgba(80,80,80,0.95) 144deg, rgba(20,20,20,0.95) 162deg,
    rgba(80,80,80,0.95) 180deg, rgba(20,20,20,0.95) 198deg,
    rgba(80,80,80,0.95) 216deg, rgba(20,20,20,0.95) 234deg,
    rgba(80,80,80,0.95) 252deg, rgba(20,20,20,0.95) 270deg,
    rgba(80,80,80,0.95) 288deg, rgba(20,20,20,0.95) 306deg,
    rgba(80,80,80,0.95) 324deg, rgba(20,20,20,0.95) 342deg,
    rgba(80,80,80,0.95) 360deg);
  animation: v4-fan-spin 0.55s linear infinite;
  filter: blur(0.4px);
}
.hero-fleet-v4 .compute:nth-child(1) .fan:nth-of-type(1) .fan-blades { animation-duration: 0.50s; }
.hero-fleet-v4 .compute:nth-child(1) .fan:nth-of-type(2) .fan-blades { animation-duration: 0.62s; animation-direction: reverse; }
.hero-fleet-v4 .compute:nth-child(2) .fan:nth-of-type(1) .fan-blades { animation-duration: 0.55s; }
.hero-fleet-v4 .compute:nth-child(2) .fan:nth-of-type(2) .fan-blades { animation-duration: 0.48s; animation-direction: reverse; }
.hero-fleet-v4 .compute:nth-child(3) .fan:nth-of-type(1) .fan-blades { animation-duration: 0.58s; }
.hero-fleet-v4 .compute:nth-child(3) .fan:nth-of-type(2) .fan-blades { animation-duration: 0.65s; animation-direction: reverse; }
.hero-fleet-v4 .compute:nth-child(4) .fan:nth-of-type(1) .fan-blades { animation-duration: 0.52s; }
.hero-fleet-v4 .compute:nth-child(4) .fan:nth-of-type(2) .fan-blades { animation-duration: 0.68s; animation-direction: reverse; }
.hero-fleet-v4 .compute:nth-child(5) .fan:nth-of-type(1) .fan-blades { animation-duration: 0.60s; }
.hero-fleet-v4 .compute:nth-child(5) .fan:nth-of-type(2) .fan-blades { animation-duration: 0.45s; animation-direction: reverse; }
.hero-fleet-v4 .compute:nth-child(6) .fan:nth-of-type(1) .fan-blades { animation-duration: 0.47s; }
.hero-fleet-v4 .compute:nth-child(6) .fan:nth-of-type(2) .fan-blades { animation-duration: 0.63s; animation-direction: reverse; }
.hero-fleet-v4 .fan-hub {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 13px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, #444 0%, #1a1a1a 80%);
  border: 1px solid #333;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  z-index: 2;
}
.hero-fleet-v4 .fan-hub::after {
  content: ''; position: absolute; inset: 35%; border-radius: 50%;
  background: var(--cyan); opacity: 0.5;
  box-shadow: 0 0 3px var(--cyan);
  animation: v4-hub-glow 2s infinite;
}
.hero-fleet-v4 .compute.vendor-nv    .fan-hub::after { background: #a0ff00; box-shadow: 0 0 3px #76b900; }
.hero-fleet-v4 .compute.vendor-amd   .fan-hub::after { background: #ff4d5c; box-shadow: 0 0 3px #ed1c24; }
.hero-fleet-v4 .compute.vendor-intel .fan-hub::after { background: #3ba0ff; box-shadow: 0 0 3px #0068b5; }
@keyframes v4-hub-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }
@keyframes v4-fan-spin { to { transform: rotate(360deg); } }

.hero-fleet-v4 .gpu-brand {
  position: absolute;
  right: 32px; top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: 7px; font-weight: 800;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  font-family: ui-monospace, monospace;
  pointer-events: none;
  white-space: nowrap;
}
.hero-fleet-v4 .compute.vendor-nv    .gpu-brand { color: rgba(160,255,0,0.65); }
.hero-fleet-v4 .compute.vendor-amd   .gpu-brand { color: rgba(255,100,110,0.65); }
.hero-fleet-v4 .compute.vendor-intel .gpu-brand { color: rgba(95,180,255,0.65); }

/* ---- Shards: per-GPU session lifecycle ---- */
.hero-fleet-v4 .shards {
  display: flex; flex-direction: column; gap: 2px; margin-top: 1px;
}
.hero-fleet-v4 .shard {
  display: flex; align-items: center; gap: 6px;
  font-size: 9px;
  line-height: 1.25;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.3px;
}
.hero-fleet-v4 .shard-id    { color: var(--steel); width: 16px; font-weight: 700; font-size: 8.5px; }
.hero-fleet-v4 .shard-model {
  color: var(--navy); font-weight: 700;
  width: 74px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 8.5px;
  letter-spacing: 0.1px;
  transition: color 0.2s;
}
.hero-fleet-v4 .shard-bar {
  flex: 1; height: 6px;
  background: var(--border-light);
  border-radius: 2px;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.hero-fleet-v4 .shard-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--cyan) 0%, #0095a1 100%);
  box-shadow: 0 0 4px var(--cyan-glow);
  transform-origin: left;
  transform: scaleX(0);
}
.hero-fleet-v4 .shard-fill.c-mint   { background: linear-gradient(90deg, var(--mint)   0%, #059669 100%); box-shadow: 0 0 4px rgba(74,222,128,0.4); }
.hero-fleet-v4 .shard-fill.c-violet { background: linear-gradient(90deg, var(--violet) 0%, #7c3aed 100%); box-shadow: 0 0 4px rgba(167,139,250,0.4); }
.hero-fleet-v4 .shard-fill.c-amber  { background: linear-gradient(90deg, var(--amber)  0%, #d97706 100%); box-shadow: 0 0 4px var(--amber-glow); }

@keyframes v4-session {
  0%   { transform: scaleX(0);   opacity: 0; }
  6%   { transform: scaleX(0.15);opacity: 1; }
  18%  { transform: scaleX(0.95);opacity: 1; }
  62%  { transform: scaleX(1);   opacity: 1; }
  78%  { transform: scaleX(0.55);opacity: 1; }
  92%  { transform: scaleX(0.05);opacity: 0.6; }
  100% { transform: scaleX(0);   opacity: 0; }
}
.hero-fleet-v4 .shard-fill.live { animation: v4-session 5.6s ease-in-out infinite; }

/* Per-shard timing offsets — staggers the session animation across the fleet
   so no two bars beat in sync. Negative delays start each bar mid-cycle. */
.hero-fleet-v4 .shards[data-node="1"] .shard:nth-child(1) .shard-fill.live { animation-delay: -1.2s; }
.hero-fleet-v4 .shards[data-node="1"] .shard:nth-child(2) .shard-fill.live { animation-delay: -3.4s; }
.hero-fleet-v4 .shards[data-node="1"] .shard:nth-child(3) .shard-fill.live { animation-delay: -0.4s; animation-duration: 6.2s; }

.hero-fleet-v4 .shards[data-node="2"] .shard:nth-child(1) .shard-fill.live { animation-delay: -2.8s; animation-duration: 5.2s; }
.hero-fleet-v4 .shards[data-node="2"] .shard:nth-child(2) .shard-fill.live { animation-delay: -4.6s; }
.hero-fleet-v4 .shards[data-node="2"] .shard:nth-child(3) .shard-fill.live { animation-delay: -1.6s; animation-duration: 6.4s; }
.hero-fleet-v4 .shards[data-node="2"] .shard:nth-child(4) .shard-fill.live { animation-delay: -3.2s; }

.hero-fleet-v4 .shards[data-node="3"] .shard:nth-child(1) .shard-fill.live { animation-delay: -0.8s; animation-duration: 4.8s; }
.hero-fleet-v4 .shards[data-node="3"] .shard:nth-child(2) .shard-fill.live { animation-delay: -2.2s; }
.hero-fleet-v4 .shards[data-node="3"] .shard:nth-child(4) .shard-fill.live { animation-delay: -3.8s; animation-duration: 5.4s; }

.hero-fleet-v4 .shards[data-node="4"] .shard:nth-child(1) .shard-fill.live { animation-delay: -2.0s; animation-duration: 5.8s; }
.hero-fleet-v4 .shards[data-node="4"] .shard:nth-child(2) .shard-fill.live { animation-delay: -4.0s; }
.hero-fleet-v4 .shards[data-node="4"] .shard:nth-child(4) .shard-fill.live { animation-delay: -1.0s; animation-duration: 5.0s; }

.hero-fleet-v4 .shards[data-node="5"] .shard:nth-child(1) .shard-fill.live { animation-delay: -1.8s; animation-duration: 5.6s; }
.hero-fleet-v4 .shards[data-node="5"] .shard:nth-child(2) .shard-fill.live { animation-delay: -3.0s; }
.hero-fleet-v4 .shards[data-node="5"] .shard:nth-child(4) .shard-fill.live { animation-delay: -0.6s; animation-duration: 5.2s; }

.hero-fleet-v4 .shards[data-node="6"] .shard:nth-child(1) .shard-fill.live { animation-delay: -2.4s; }
.hero-fleet-v4 .shards[data-node="6"] .shard:nth-child(2) .shard-fill.live { animation-delay: -4.2s; animation-duration: 6.0s; }
.hero-fleet-v4 .shards[data-node="6"] .shard:nth-child(3) .shard-fill.live { animation-delay: -1.4s; }
.hero-fleet-v4 .shards[data-node="6"] .shard:nth-child(4) .shard-fill.live { animation-delay: -3.6s; animation-duration: 5.4s; }

.hero-fleet-v4 .shard-state {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.3s;
}
.hero-fleet-v4 .shard-state.on          { background: var(--cyan);   box-shadow: 0 0 4px var(--cyan); }
.hero-fleet-v4 .shard-state.on.c-mint   { background: var(--mint);   box-shadow: 0 0 4px var(--mint); }
.hero-fleet-v4 .shard-state.on.c-violet { background: var(--violet); box-shadow: 0 0 4px var(--violet); }
.hero-fleet-v4 .shard-state.on.c-amber  { background: var(--amber);  box-shadow: 0 0 4px var(--amber); }

.hero-fleet-v4 .shard.warming .shard-model { color: var(--amber); animation: v4-warming-blink 1s infinite; }
.hero-fleet-v4 .shard.warming .shard-fill {
  animation: none !important;
  transform: scaleX(0.4);
  background: repeating-linear-gradient(-45deg,
    var(--amber) 0px, var(--amber) 4px,
    rgba(245,166,35,0.4) 4px, rgba(245,166,35,0.4) 8px) !important;
  background-size: 12px 12px !important;
  animation: v4-warm-stripes 0.7s linear infinite !important;
}
@keyframes v4-warming-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes v4-warm-stripes  { to { background-position: 12px 0; } }

.hero-fleet-v4 .gpu-foot {
  display: flex; justify-content: space-between;
  font-size: 9.5px;
  line-height: 1.2;
  color: var(--steel);
  padding-top: 4px;
  margin-top: auto;
  border-top: 1px dashed var(--border);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.2px;
}
.hero-fleet-v4 .gpu-foot b { color: var(--navy); font-weight: 700; }

/* ---- SVG lines & packets ---- */
.hero-fleet-v4 .lines {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-fleet-v4 .line-static { stroke: #c8c2b7; stroke-width: 1.2; stroke-dasharray: 3 4; fill: none; opacity: 0.7; }
.hero-fleet-v4 .line-trunk  { stroke: #c8c2b7; stroke-width: 1.4; fill: none; opacity: 0.5; }
.hero-fleet-v4 .line-query  {
  stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 3 3; fill: none;
  opacity: 0;
  animation: v4-query-flash 4.2s infinite;
}
@keyframes v4-query-flash {
  0%, 12% { opacity: 0; }
  14%, 24% { opacity: 0.85; }
  26%, 100% { opacity: 0; }
}
.hero-fleet-v4 .packet          { fill: var(--cyan);   filter: drop-shadow(0 0 4px var(--cyan)); }
.hero-fleet-v4 .packet.m        { fill: var(--mint);   filter: drop-shadow(0 0 4px var(--mint)); }
.hero-fleet-v4 .packet.v        { fill: var(--violet); filter: drop-shadow(0 0 4px var(--violet)); }
.hero-fleet-v4 .packet.a        { fill: var(--amber);  filter: drop-shadow(0 0 4px var(--amber)); }
.hero-fleet-v4 .packet-return   { fill: var(--mint);   filter: drop-shadow(0 0 4px var(--mint)); }

@keyframes v4-fly {
  0%   { offset-distance: 0%;   opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Request packet routing — agent ➜ gateway ➜ trunk ➜ target compute node.
   Each packet rides its own SVG path with a unique start delay so the four
   streams don't overlap. Durations differ between top-row (4s) and
   bottom-row (4.6s, longer trunk). */
.hero-fleet-v4 .packet--p1 {
  offset-path: path('M 160 108 L 200 108 L 300 108 L 400 108 L 400 285 L 138 285 L 138 300');
  offset-rotate: 0deg;
  animation: v4-fly 4s 0s infinite linear;
}
.hero-fleet-v4 .packet--p2 {
  offset-path: path('M 160 152 L 200 152 L 300 152 L 400 152 L 400 285 L 390 285 L 390 300');
  offset-rotate: 0deg;
  animation: v4-fly 4s 0.9s infinite linear;
}
.hero-fleet-v4 .packet--p3 {
  offset-path: path('M 160 196 L 200 196 L 300 196 L 400 196 L 400 285 L 390 285 L 390 480 L 138 480 L 138 487');
  offset-rotate: 0deg;
  animation: v4-fly 4.6s 1.8s infinite linear;
}
.hero-fleet-v4 .packet--p4 {
  offset-path: path('M 160 240 L 200 240 L 300 240 L 400 240 L 400 285 L 390 285 L 390 480 L 642 480 L 642 487');
  offset-rotate: 0deg;
  animation: v4-fly 4.6s 2.7s infinite linear;
}

/* Response packet routing — compute node ➜ trunk ➜ gateway ➜ agent. */
.hero-fleet-v4 .packet-return--r1 {
  offset-path: path('M 642 300 L 642 285 L 400 285 L 400 108 L 200 108 L 160 108');
  offset-rotate: 0deg;
  animation: v4-fly 4s 1.5s infinite linear;
}
.hero-fleet-v4 .packet-return--r2 {
  offset-path: path('M 390 487 L 390 480 L 390 285 L 400 285 L 400 152 L 200 152 L 160 152');
  offset-rotate: 0deg;
  animation: v4-fly 4.6s 3.6s infinite linear;
}
.hero-fleet-v4 .packet-return--r3 {
  offset-path: path('M 390 300 L 390 285 L 400 285 L 400 196 L 200 196 L 160 196');
  offset-rotate: 0deg;
  animation: v4-fly 4s 3.0s infinite linear;
}
.hero-fleet-v4 .packet-return--r4 {
  offset-path: path('M 138 487 L 138 480 L 390 480 L 390 285 L 400 285 L 400 240 L 200 240 L 160 240');
  offset-rotate: 0deg;
  animation: v4-fly 4.6s 2.4s infinite linear;
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-fleet-v4 .agent-pulse,
  .hero-fleet-v4 .hw-led,
  .hero-fleet-v4 .hw-port.active,
  .hero-fleet-v4 .lcd-spark span,
  .hero-fleet-v4 .compute-label::before,
  .hero-fleet-v4 .gpu-rgb,
  .hero-fleet-v4 .fan-blades,
  .hero-fleet-v4 .fan-hub::after,
  .hero-fleet-v4 .shard-fill.live,
  .hero-fleet-v4 .shard.warming .shard-fill,
  .hero-fleet-v4 .shard.warming .shard-model,
  .hero-fleet-v4 .line-query,
  .hero-fleet-v4 .packet,
  .hero-fleet-v4 .packet-return {
    animation: none !important;
  }
  .hero-fleet-v4 .shard-fill.live { transform: scaleX(0.6); opacity: 0.9; }
  .hero-fleet-v4 .packet,
  .hero-fleet-v4 .packet-return { opacity: 0; }
}
/* Floating hero callouts */
.hero-callout {
  position: absolute; background: white;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; font-size: 0.78em; font-weight: 600; color: var(--navy);
  box-shadow: 0 8px 24px rgba(12,35,64,0.08);
  display: flex; align-items: center; gap: 8px; z-index: 3;
}
.hero-callout.is-sovereign { top: -18px; left: -16px; border-color: rgba(13,138,106,0.3); }
.hero-callout.is-sovereign .ico { color: var(--green); font-size: 1.1em; }
.hero-callout.is-aiact { bottom: -14px; right: -20px; border-color: rgba(0,174,232,0.3); }
.hero-callout.is-aiact .ico { color: var(--cyan); font-size: 1.1em; }

/* ===== TRUST BAR ===== */
.trust-bar { background: var(--bg-warm); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: 36px 60px; text-align: center; }
.trust-label { font-size: 0.75em; color: var(--steel); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; font-weight: 600; }
.trust-logos { display: flex; justify-content: center; align-items: center; gap: 48px; flex-wrap: wrap; }
.trust-logo { font-size: 1.05em; font-weight: 700; color: #B0BEC5; letter-spacing: 1px; }

/* =============================================================
   THE REAL PROBLEM — Pilot-to-production gap (Gap-band layout)
   Full-width gap diagram: Pilot anchor → chasm with Deloitte stat
   callouts → Production anchor. Narrative and 3 outcome cards sit
   below. All tokens come from base.css; no new custom colors.
   ============================================================= */
.problem {
  background: var(--bg-warm);
  padding: 80px 60px 88px;
  position: relative;
}
.problem-inner { max-width: 1280px; margin: 0 auto; }

.problem-head { text-align: center; margin-bottom: 40px; }
.problem-head .section-tag { justify-content: center; margin: 0 auto 16px; }
.problem-title {
  font-size: 2.6em; font-weight: 800; color: var(--navy);
  line-height: 1.14; letter-spacing: -0.5px;
  max-width: 820px; margin: 0 auto;
}
.problem-title .accent { color: var(--cyan); }

/* ---- Gap band: 3-column flex row (pilot → chasm → production) ---- */
.gap-band {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  align-items: stretch;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #1E3A5A; /* match the chasm top — cohesive but lifts the whole band */
  box-shadow: 0 18px 44px -32px rgba(8,24,43,0.28);
  min-height: 280px;
}

/* ---- Anchor cards (Pilot / Production) ---- */
.gap-anchor {
  /* Lighter anchor gradient — navy-alt top, medium navy bottom. Keeps white
     text readable while lifting the overall weight of the band. */
  background: linear-gradient(180deg, #274A70 0%, #163558 100%);
  color: white;
  padding: 28px 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  position: relative;
  border-right: 1px solid rgba(0,174,232,0.14);
}
.gap-anchor--prod { border-right: 0; border-left: 1px solid rgba(0,174,232,0.14); }
.gap-anchor-kicker {
  font-size: 0.72em; font-weight: 700; color: var(--cyan);
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 6px;
}
.gap-anchor-title { font-size: 1.15em; font-weight: 700; color: white; line-height: 1.25; }
.gap-anchor-meta { font-size: 0.92em; color: rgba(255,255,255,0.72); margin-top: 2px; }
.gap-anchor-meta strong { color: white; font-weight: 700; }
.gap-anchor-badge {
  position: absolute; top: 16px; right: 16px;
  font-size: 0.68em; font-weight: 700; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(13,138,106,0.18); color: var(--green);
  text-transform: uppercase;
}
.gap-anchor-badge--warn { background: rgba(217,119,6,0.2); color: var(--amber); }

/* ---- Central chasm ---- */
/* Softer vertical gradient: lighter at the top (sky-into-gap) → deeper toward
   the amber hazard at the bottom. Still dark enough for the hazard glow to
   read, but the top no longer feels like a slab. */
.gap-chasm {
  position: relative;
  background: linear-gradient(180deg, #1E3A5A 0%, #183150 55%, #112949 100%);
  overflow: hidden;
}
.gap-chasm-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
.gap-chasm-label {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-size: 0.72em; font-weight: 700; letter-spacing: 3px;
  color: var(--amber); text-transform: uppercase;
  background: rgba(217,119,6,0.12);
  border: 1px solid rgba(217,119,6,0.3);
  padding: 5px 14px; border-radius: 999px;
  z-index: 3;
}

/* Deloitte stat callouts — four chips on a single baseline along the chasm */
.gap-stats {
  position: absolute; inset: 0; z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  padding: 60px 18px 28px;
  gap: 14px;
}
.gap-stat {
  /* Chip background tuned to read clearly against the lighter chasm —
     translucent navy that picks up the gradient through the backdrop blur. */
  background: linear-gradient(180deg, rgba(20,38,58,0.78), rgba(14,28,46,0.72));
  border: 1px solid rgba(0,174,232,0.28);
  border-radius: 10px;
  padding: 12px 12px 11px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 4px;
  /* Equal height so the row of chips sits on a clean baseline */
  min-height: 96px;
}

.gap-stat-num {
  font-size: 1.9em; font-weight: 800; color: var(--cyan);
  line-height: 1; letter-spacing: -1px;
}
.gap-stat-num .pct {
  font-size: 0.55em; font-weight: 700; color: var(--cyan);
  margin-left: 1px; vertical-align: top; letter-spacing: 0;
}
.gap-stat-text {
  font-size: 0.78em; color: rgba(255,255,255,0.78);
  line-height: 1.35;
}

/* Source stripe under the band */
.gap-source {
  margin-top: 14px; text-align: center;
  font-size: 0.78em; color: var(--steel);
  letter-spacing: 0.3px;
}

/* ---- Narrative + outcome cards below the band ---- */
.problem-grid {
  margin-top: 44px;
  display: grid;
  /* Narrative column gets enough room for the lede; outcomes column gets the
     extra width so each proof line fits on a single row. */
  grid-template-columns: minmax(360px, 0.9fr) 1.7fr;
  gap: 48px;
  align-items: start;
}
.problem-copy .problem-lede {
  font-size: 1.18em; color: var(--navy); font-weight: 500;
  line-height: 1.55; margin-bottom: 16px;
  max-width: 480px;
}
.problem-copy .problem-body {
  font-size: 1em; color: var(--steel); line-height: 1.65;
  max-width: 480px;
}

.outcome-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.outcome-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 10px;
  padding: 14px 22px;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 16px;
  row-gap: 2px;
  align-items: baseline;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.outcome-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -12px rgba(8,24,43,0.2);
}
.outcome-num {
  grid-row: 1 / span 2;
  align-self: start;
  font-size: 1em; font-weight: 800; color: var(--cyan);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.outcome-label {
  font-size: 1.02em; font-weight: 700; color: var(--navy);
  line-height: 1.3;
}
.outcome-proof {
  grid-column: 2;
  font-size: 0.92em; color: var(--steel);
  line-height: 1.55;
}

/* ===== EU AI ACT COUNTDOWN ===== */
.aiact {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: white; padding: 80px 60px; position: relative; overflow: hidden;
}
.aiact::before {
  content: ''; position: absolute; top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,174,232,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.aiact-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
.aiact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.aiact-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.76em; font-weight: 700; color: var(--cyan); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px; }
.aiact-label .bar { width: 20px; height: 2px; background: var(--cyan); }
.aiact h2 { font-size: 2.4em; font-weight: 800; color: white; line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 16px; }
.aiact h2 .accent { color: var(--cyan); }
.aiact p { font-size: 1.02em; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 24px; max-width: 520px; }
.aiact-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 24px; }
.aiact-check { display: flex; align-items: center; gap: 10px; font-size: 0.88em; color: rgba(255,255,255,0.85); }
.aiact-check .c-ico { width: 22px; height: 22px; border-radius: 50%; background: rgba(13,138,106,0.2); display: flex; align-items: center; justify-content: center; color: var(--green); font-weight: 700; font-size: 0.8em; flex-shrink: 0; }

.countdown-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px; padding: 32px; text-align: center;
  backdrop-filter: blur(12px);
}
.countdown-kicker { font-size: 0.72em; color: var(--cyan); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
.countdown-title { font-size: 1.1em; font-weight: 700; color: white; margin-bottom: 22px; }
.countdown-blocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.countdown-block {
  background: rgba(0,174,232,0.08);
  border: 1px solid rgba(0,174,232,0.2);
  border-radius: 12px; padding: 18px 8px;
}
.countdown-num { font-size: 2.4em; font-weight: 800; color: white; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown-lbl { font-size: 0.68em; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 6px; font-weight: 600; }
.countdown-deadline { font-size: 0.82em; color: rgba(255,255,255,0.7); border-top: 1px solid rgba(255,255,255,0.1); padding-top: 18px; }
.countdown-deadline strong { color: var(--cyan); font-weight: 700; }

/* ===== PROBLEM ===== */
/* ===== WHY ARK ===== */
.why-ark { padding: 72px 60px; background: var(--bg-warm); }
.why-ark-inner { max-width: 1120px; margin: 0 auto; }
.why-ark-head { text-align: center; margin-bottom: 36px; }
.why-ark-head .section-tag { justify-content: center; margin: 0 auto 14px; display: inline-flex; align-items: center; gap: 8px; }
.why-ark-title { font-size: 2.8em; font-weight: 800; color: var(--navy); letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 12px; }
.why-ark-sub { font-size: 1.05em; color: var(--steel); line-height: 1.6; max-width: 640px; margin: 0 auto; }
.why-ark-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.why-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.why-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(12,35,64,0.07);
  border-color: rgba(0,174,232,0.3);
}
.why-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.why-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cyan); flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(0,174,232,0.15);
}
.why-card h3 { font-size: 1.05em; font-weight: 700; color: var(--navy); letter-spacing: -0.1px; }
.why-card p { font-size: 0.92em; color: var(--steel); line-height: 1.7; }

/* ===== CAPABILITIES ===== */
.capabilities { padding: 100px 60px; background: var(--light-blue); }
.capabilities-inner { max-width: 1280px; margin: 0 auto; }
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.cap-card { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 30px; transition: transform 0.2s, box-shadow 0.2s; }
.cap-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(12,35,64,0.06); }
.cap-icon { width: 44px; height: 44px; border-radius: 11px; background: var(--cyan); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 1.2em; color: white; }
.cap-card h4 { font-size: 1.05em; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.cap-card p { font-size: 0.85em; color: var(--steel); line-height: 1.65; }
.cap-highlight { display: inline-block; margin-top: 12px; font-size: 0.78em; font-weight: 700; color: var(--cyan-dark); padding: 3px 10px; border-radius: 6px; background: var(--cyan-light); border: 1px solid rgba(0,174,232,0.12); }

/* ===== CONNECTORS ===== */
.connectors { padding: 100px 60px; background: var(--white); overflow: hidden; }
.connectors-inner { max-width: 1280px; margin: 0 auto; }
.connectors-head { text-align: center; margin-bottom: 48px; }
.connectors-head .section-tag { justify-content: center; }
.connectors-head .section-subtitle { margin-left: auto; margin-right: auto; }
.connector-stage {
  position: relative; height: 460px;
  background: radial-gradient(circle at center, var(--light-blue) 0%, transparent 60%);
  display: flex; align-items: center; justify-content: center;
}
.connector-center {
  width: 140px; height: 140px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-alt) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: white; z-index: 5; position: relative;
  box-shadow: 0 16px 48px rgba(12,35,64,0.2), 0 0 0 12px rgba(0,174,232,0.08), 0 0 0 26px rgba(0,174,232,0.04);
}
.connector-center .ark-mark-big {
  width: 50px; height: 50px; background: var(--cyan);
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px; color: white; margin-bottom: 8px;
}
.connector-center .label { font-size: 0.75em; font-weight: 700; letter-spacing: 1.5px; }
.connector-center .sub { font-size: 0.62em; color: rgba(255,255,255,0.6); margin-top: 2px; }
.connector-ring {
  position: absolute; top: 50%; left: 50%;
  width: 380px; height: 380px; border-radius: 50%;
  border: 1.5px dashed rgba(0,174,232,0.3);
  transform: translate(-50%, -50%);
  animation: spin 60s linear infinite;
}
.connector-ring-outer {
  width: 620px; height: 620px;
  border: 1px dashed rgba(0,174,232,0.15);
  animation: spin 120s linear infinite reverse;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.connector-node {
  position: absolute;
  width: 72px; height: 72px; border-radius: 16px;
  background: white; border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(12,35,64,0.06);
  z-index: 4; font-size: 0.62em; font-weight: 700; color: var(--navy);
  transition: transform 0.3s;
}
.connector-node:hover { transform: scale(1.1); border-color: var(--cyan); }
.connector-node .brand-abbr { font-size: 1.05em; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 3px; }
.connector-node .brand-name { font-size: 0.62em; font-weight: 600; color: var(--steel); letter-spacing: 0.3px; }
.node-sap { top: 10%; left: 20%; }
.node-sap .brand-abbr { color: #0FAAFF; }
.node-sf { top: 8%; right: 22%; }
.node-sf .brand-abbr { color: #00A1E0; }
.node-sp { top: 48%; left: 6%; }
.node-sp .brand-abbr { color: #1E88E5; }
.node-sn { top: 48%; right: 6%; }
.node-sn .brand-abbr { color: #62D84E; }
.node-ms { bottom: 10%; left: 20%; }
.node-ms .brand-abbr { color: #F25022; }
.node-ad { bottom: 8%; right: 22%; }
.node-ad .brand-abbr { color: #003D7C; }
.connector-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.connector-line { fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.4; }
.connector-dot { fill: var(--cyan); }
.connector-flow {
  stroke: var(--cyan); stroke-width: 2; fill: none;
  stroke-dasharray: 3 5;
  animation: flow 2s linear infinite;
}
@keyframes flow { to { stroke-dashoffset: -16; } }
.connector-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--border-light); }
.connector-stat { text-align: center; }
.connector-stat .val { font-size: 1.6em; font-weight: 800; color: var(--cyan); }
.connector-stat .lbl { font-size: 0.78em; color: var(--steel); margin-top: 4px; }

/* ===== COMPARISON TABLE ===== */
.comparison { padding: 100px 60px; background: var(--light-blue); }
.comparison-inner { max-width: 1100px; margin: 0 auto; }
.comp-table-wrap { margin-top: 44px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comp-table-wrap .comp-table { margin-top: 0; min-width: 640px; }
.comp-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 44px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: white; }
.comp-table th { padding: 16px 18px; text-align: left; font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; background: var(--navy); color: rgba(255,255,255,0.6); }
.comp-table th:first-child { color: white; }
.comp-table th.ark-col { color: var(--cyan); }
.comp-table td { padding: 14px 18px; font-size: 0.88em; border-bottom: 1px solid var(--border-light); color: var(--steel); }
.comp-table td:first-child { font-weight: 600; color: var(--navy); }
.comp-table td.ark-col { background: var(--cyan-light); color: var(--navy); font-weight: 600; }
.comp-table tr:last-child td { border-bottom: none; }
.check { color: var(--green); font-weight: 700; }
.cross { color: var(--coral); font-weight: 700; }

/* ===== BENCHMARKS ===== */
.benchmarks { padding: 100px 60px; background: var(--white); }
.benchmarks-inner { max-width: 1280px; margin: 0 auto; }
.bench-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.bench-card { background: white; border-radius: 14px; padding: 28px; text-align: center; border: 1px solid var(--border); position: relative; overflow: hidden; }
.bench-card .border-top { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.bench-card .val { font-size: 2.6em; font-weight: 800; color: var(--cyan); line-height: 1; }
.bench-card .unit { font-size: 0.85em; font-weight: 700; color: var(--cyan); }
.bench-card .desc { font-size: 0.88em; font-weight: 600; color: var(--navy); margin-top: 6px; }
.bench-card .context { font-size: 0.72em; color: var(--steel); margin-top: 6px; line-height: 1.4; }

/* ===== DENSITY ===== */
.density { padding: 100px 60px; background: var(--light-blue); }
.density-inner { max-width: 1180px; margin: 0 auto; }
.density-head { text-align: center; margin-bottom: 36px; }
.density-head .section-tag { justify-content: center; }
.density-head .section-subtitle { margin-left: auto; margin-right: auto; }
.density-card {
  background: white; border: 1px solid var(--border);
  border-radius: 18px; padding: 40px;
  box-shadow: 0 8px 28px rgba(12,35,64,0.04);
}
.density-context {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 32px; padding-bottom: 22px; border-bottom: 1px solid var(--border-light);
  gap: 24px; flex-wrap: wrap;
}
.density-context-left { flex: 1; min-width: 300px; }
.density-context h3 { font-size: 1.3em; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.density-context p { font-size: 0.9em; color: var(--steel); line-height: 1.6; }
.density-context-meta { font-size: 0.78em; color: var(--steel); text-align: right; }
.density-context-meta strong { color: var(--navy); display: block; font-weight: 700; font-size: 1.05em; }
.density-chart { display: grid; grid-template-columns: 120px 1fr 140px; gap: 14px; align-items: center; }
.density-row { display: contents; }
.density-label { font-size: 0.92em; font-weight: 700; color: var(--navy); }
.density-label .sub { display: block; font-size: 0.72em; color: var(--steel); font-weight: 500; margin-top: 2px; }
.density-bar-wrap { height: 36px; background: var(--bg-warm); border-radius: 8px; position: relative; overflow: hidden; border: 1px solid var(--border-light); }
.density-bar {
  height: 100%; display: flex; align-items: center; padding: 0 12px;
  border-radius: 7px; color: white; font-size: 0.8em; font-weight: 700;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.density-bar.ark { background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan-dark) 100%); }
.density-bar.vllm { background: linear-gradient(90deg, #8EA5B8 0%, #6B8299 100%); }
.density-bar.trt { background: linear-gradient(90deg, #A0AEC0 0%, #7C8CA0 100%); }
.density-value { font-size: 1em; font-weight: 800; color: var(--navy); text-align: right; }
.density-value .mult { color: var(--cyan); font-size: 1.2em; }
.density-footer {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border-light);
}
.density-foot-card { text-align: center; }
.density-foot-card .big { font-size: 2em; font-weight: 800; color: var(--cyan); }
.density-foot-card .small { font-size: 0.84em; font-weight: 600; color: var(--navy); margin-top: 2px; }
.density-foot-card .context { font-size: 0.76em; color: var(--steel); margin-top: 4px; }

/* ===== USE CASES (Dossier) ===== */
.usecases { padding: 100px 60px; background: var(--white); }
.usecases-inner { max-width: 1280px; margin: 0 auto; }

.dossier {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 28px;
  margin-top: 44px;
  align-items: stretch;
}

/* Left rail: industry tabs */
.dossier-rail { display: flex; flex-direction: column; gap: 10px; }
.dossier-tab {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 18px 16px;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s;
  color: var(--navy);
}
.dossier-tab:hover { border-color: var(--cyan); box-shadow: 0 6px 20px rgba(12,35,64,0.05); }
.dossier-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.dossier-tab.is-active {
  border-color: var(--cyan);
  background: linear-gradient(180deg, #FFFFFF 0%, #F5FBFE 100%);
  box-shadow: 0 10px 28px rgba(0,174,232,0.08), inset 3px 0 0 0 var(--cyan);
}
.dossier-tab.is-active .dossier-tab-chev { color: var(--cyan); transform: translateX(2px); }

.dossier-viz {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--cyan-light);
  color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, color 0.25s;
}
.dossier-tab.is-active .dossier-viz { background: var(--cyan); color: white; }
.dossier-viz svg { width: 100%; height: 100%; display: block; }

.dossier-tab-meta { min-width: 0; }
.dossier-tab-label {
  font-size: 0.68em; font-weight: 700; color: var(--cyan);
  text-transform: uppercase; letter-spacing: 1.4px;
  margin-bottom: 4px;
}
.dossier-tab-title {
  font-size: 1em; font-weight: 700; color: var(--navy);
  line-height: 1.25;
}
.dossier-tab-chev {
  color: var(--steel); font-weight: 700; font-size: 1.1em;
  transition: color 0.2s, transform 0.2s;
}

/* Right pane: dossier content */
.dossier-pane {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px 40px;
  position: relative;
  overflow: hidden;
  min-height: 520px;
}
.dossier-pane::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 260px; height: 260px;
  background: radial-gradient(circle at top right, rgba(0,174,232,0.08), transparent 70%);
  pointer-events: none;
}

.dossier-panel { display: none; position: relative; z-index: 1; animation: dossierFade 0.35s ease; }
.dossier-panel.is-active { display: block; }
.dossier-panel[hidden] { display: none !important; }

@keyframes dossierFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.dossier-panel-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.dossier-kicker {
  font-size: 0.7em; font-weight: 700; color: var(--steel);
  text-transform: uppercase; letter-spacing: 1.6px;
  padding-right: 10px;
  border-right: 1px solid var(--border);
}
.dossier-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.reg-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--border);
  font-size: 0.74em; font-weight: 600;
  color: var(--navy); letter-spacing: 0.2px;
}

.dossier-headline {
  font-size: 1.8em; font-weight: 800; color: var(--navy);
  line-height: 1.15; letter-spacing: -0.4px;
  margin-bottom: 14px;
}
.dossier-summary {
  font-size: 1em; color: var(--steel); line-height: 1.65;
  margin-bottom: 26px; max-width: 640px;
}

.dossier-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 26px;
}
.dossier-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
.dossier-block-label {
  font-size: 0.7em; font-weight: 700; color: var(--cyan);
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-bottom: 8px;
}
.dossier-block-value {
  font-size: 0.92em; color: var(--navy); line-height: 1.55; font-weight: 500;
}

.dossier-proof {
  display: flex; align-items: stretch; gap: 28px;
  padding: 18px 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 22px;
}
.dossier-proof-stat { flex: 1; }
.dossier-proof-num {
  font-size: 1.9em; font-weight: 800; color: var(--navy);
  letter-spacing: -0.5px; line-height: 1;
  margin-bottom: 6px;
}
.dossier-proof-lbl {
  font-size: 0.78em; color: var(--steel); line-height: 1.5;
}
.dossier-proof-divider { width: 1px; background: var(--border); }

.dossier-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.95em; font-weight: 700;
  color: var(--cyan); text-decoration: none;
  transition: gap 0.2s, color 0.2s;
}
.dossier-link:hover { color: var(--cyan-dark); gap: 12px; }
.dossier-link .arrow { transition: transform 0.2s; }
.dossier-link:hover .arrow { transform: translateX(2px); }

/* ---------- Micro-visual animations ---------- */

/* Lanes (FinServ): dots traverse isolated lanes */
@keyframes laneRun {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(56px); opacity: 0; }
}
.dossier-tab.is-active .lane-dot { animation: laneRun 2.4s linear infinite; }
.dossier-tab.is-active .lane-dot-1 { animation-delay: 0s; }
.dossier-tab.is-active .lane-dot-2 { animation-delay: 0.8s; }
.dossier-tab.is-active .lane-dot-3 { animation-delay: 1.6s; }

/* Boundary (Health): ring pulse + dots wander inside */
@keyframes boundaryPulse {
  0%   { transform: scale(0.9); opacity: 0.5; }
  70%  { transform: scale(1.1); opacity: 0; }
  100% { transform: scale(1.1); opacity: 0; }
}
.dossier-tab.is-active .bd-pulse {
  transform-origin: 36px 36px;
  animation: boundaryPulse 2.2s ease-out infinite;
}
@keyframes bdDrift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(6px,4px); } }
@keyframes bdDrift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-5px,-3px); } }
@keyframes bdDrift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(3px,-5px); } }
.dossier-tab.is-active .bd-dot-1 { animation: bdDrift1 2.8s ease-in-out infinite; }
.dossier-tab.is-active .bd-dot-2 { animation: bdDrift2 3.2s ease-in-out infinite; }
.dossier-tab.is-active .bd-dot-3 { animation: bdDrift3 2.5s ease-in-out infinite; }

/* Air-gap (Gov): node pulses, cuts blink */
@keyframes agBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes agPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(0.94); } }
.dossier-tab.is-active .ag-cut { animation: agBlink 1.8s ease-in-out infinite; }
.dossier-tab.is-active .ag-cut-right { animation-delay: 0.6s; }
.dossier-tab.is-active .ag-node {
  transform-origin: 36px 36px;
  animation: agPulse 2.4s ease-in-out infinite;
}

/* Bars (Agentic): without-bar collapses, arrow slides */
@keyframes barCollapse {
  0%,15%   { height: 44px; y: 16; }
  55%,100% { height: 4px; y: 56; }
}
@keyframes barGrowArrow {
  0%,15%   { opacity: 0.35; }
  55%,100% { opacity: 1; }
}
.dossier-tab.is-active .bar-without { animation: barCollapse 2.6s ease-in-out infinite; }
.dossier-tab.is-active .bar-arrow,
.dossier-tab.is-active .bar-arrow-head { animation: barGrowArrow 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .dossier-tab .lane-dot,
  .dossier-tab .bd-pulse,
  .dossier-tab .bd-dot,
  .dossier-tab .ag-cut,
  .dossier-tab .ag-node,
  .dossier-tab .bar-without,
  .dossier-tab .bar-arrow,
  .dossier-tab .bar-arrow-head { animation: none !important; }
  .dossier-panel { animation: none !important; }
}

/* ===== PRICING ===== */
.pricing { padding: 100px 60px; background: var(--light-blue); }
.pricing-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.pricing-card { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 36px; text-align: left; position: relative; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
.pricing-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(12,35,64,0.08); }
.pricing-card.featured { border-color: var(--cyan); border-width: 2px; }
.pricing-card.featured::before { content: 'MOST POPULAR'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--cyan); color: white; font-size: 0.68em; font-weight: 800; padding: 4px 16px; border-radius: 10px; letter-spacing: 1px; }
.pricing-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 1.4em; }
.pricing-icon.cloud { background: var(--cyan-light); color: var(--cyan); }
.pricing-icon.tailored { background: var(--green-light); color: var(--green); }
.pricing-icon.core { background: var(--card-blue); color: var(--navy); }
.pricing-label { font-size: 0.75em; font-weight: 700; color: var(--cyan); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
.pricing-name { font-size: 1.4em; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.pricing-desc { font-size: 0.88em; color: var(--steel); line-height: 1.6; margin-bottom: 20px; min-height: 48px; }
.pricing-price { font-size: 1.05em; font-weight: 700; color: var(--navy); margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-light); }
.pricing-price .free { color: var(--green); }
.pricing-features { list-style: none; margin-bottom: 28px; }
.pricing-features li { padding: 8px 0; font-size: 0.88em; color: var(--steel); display: flex; align-items: flex-start; gap: 10px; }
.pricing-features li::before { content: '\2713'; color: var(--green); font-weight: 700; font-size: 1em; flex-shrink: 0; }
.pricing-cta { width: 100%; padding: 12px; border-radius: 10px; font-size: 0.92em; font-weight: 700; cursor: pointer; transition: all 0.2s; text-align: center; text-decoration: none; display: block; margin-top: auto; }
.pricing-cta.primary { background: var(--cyan); color: white; border: none; }
.pricing-cta.primary:hover { background: var(--cyan-dark); }
.pricing-cta.secondary { background: white; color: var(--navy); border: 2px solid var(--border); }
.pricing-cta.secondary:hover { border-color: var(--cyan); color: var(--cyan); }

/* ===== SOVEREIGN CTA ===== */
.sovereign-cta { padding: 72px 60px; background: var(--navy); text-align: center; position: relative; overflow: hidden; }
.sovereign-cta::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(0,174,232,0.1) 0%, transparent 70%); pointer-events: none; }
/* Wider inner box so the headline breaks on the intended <br> line only,
   not into 4 lines as it did at 680px. */
.sovereign-inner { max-width: 1040px; margin: 0 auto; position: relative; z-index: 2; }
.sovereign-cta h2 { font-size: 2.4em; font-weight: 800; color: white; margin-bottom: 14px; line-height: 1.15; }
.sovereign-cta h2 .accent { color: var(--cyan); }
.sovereign-cta p { font-size: 1.05em; color: rgba(255,255,255,0.62); line-height: 1.65; margin: 0 auto 28px; max-width: 720px; }
.sovereign-cta .cta-group { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.btn-w { padding: 14px 32px; border-radius: 10px; font-size: 1em; font-weight: 700; background: white; color: var(--navy); border: none; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn-w:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(255,255,255,0.15); }
.btn-od { padding: 14px 32px; border-radius: 10px; font-size: 1em; font-weight: 600; border: 2px solid rgba(255,255,255,0.2); color: white; background: transparent; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn-od:hover { border-color: var(--cyan); color: var(--cyan); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero { padding: 56px 24px; }
  .hero-content { flex-direction: column; }
  .hero-text, .hero-visual { min-width: 100%; }
  .hero h1 { font-size: 2.6em; }
  .aiact { padding: 56px 24px; }
  .aiact-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Problem section — tablet/mobile collapse */
  .problem { padding: 72px 24px 84px; }
  .problem-title { font-size: 2.1em; }
  .gap-band {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .gap-anchor {
    border-right: 0 !important; border-left: 0 !important;
    border-bottom: 1px solid rgba(0,174,232,0.18);
    padding: 22px 20px;
  }
  .gap-anchor--prod { border-bottom: 0; border-top: 1px solid rgba(0,174,232,0.18); }
  .gap-chasm { min-height: 240px; padding: 0; }
  .gap-stats {
    position: relative;
    grid-template-columns: repeat(2, 1fr);
    padding: 48px 16px 20px;
    gap: 10px;
  }
  .gap-stat { transform: none !important; }
  .gap-chasm-svg { position: absolute; }
  .problem-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  .outcome-card { padding: 16px 18px; }
  .why-ark, .capabilities, .connectors, .comparison, .benchmarks, .density, .usecases, .pricing, .sovereign-cta { padding-left: 24px; padding-right: 24px; }
  .why-ark { padding-top: 72px; padding-bottom: 72px; }
  .why-ark-title { font-size: 2.2em; }
  .why-ark-grid { grid-template-columns: 1fr; gap: 16px; }
  .why-card { padding: 22px 24px; }
  .cap-grid, .bench-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; }
  .dossier { grid-template-columns: 1fr; gap: 20px; }
  .dossier-rail { flex-direction: row; overflow-x: auto; gap: 10px; padding-bottom: 6px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .dossier-tab { min-width: 260px; flex: 0 0 auto; scroll-snap-align: start; grid-template-columns: 48px 1fr; }
  .dossier-tab .dossier-tab-chev { display: none; }
  .dossier-viz { width: 48px; height: 48px; }
  .dossier-pane { padding: 28px 24px; min-height: 0; }
  .dossier-headline { font-size: 1.5em; }
  .dossier-grid { grid-template-columns: 1fr; gap: 10px; }
  .dossier-proof { flex-direction: column; gap: 14px; }
  .dossier-proof-divider { width: 100%; height: 1px; }
  .connector-stats { grid-template-columns: repeat(2, 1fr); }
  .trust-bar { padding-left: 24px; padding-right: 24px; }
  .trust-logos { gap: 28px; }
  .stateful-advantage { padding: 64px 24px; }
  .stateful-advantage .section-title { font-size: 1.8em; }
  .stateful-advantage .chart-figure { margin-top: 32px; }
  .research-hero { padding: 56px 24px 40px; }
  .research-hero-inner { grid-template-columns: 1fr; gap: 20px; }
  .research-hero h1 { font-size: 2.1em; }
  .research-hero .hero-stack { display: none; }
  .bench-runs, .research-papers, .bench-method, .bench-reproduce, .bench-models, .research-products-cta { padding: 64px 24px; }
  .bench-runs-grid, .paper-grid, .method-grid, .reproduce-row, .product-cta-grid { grid-template-columns: 1fr; }
  .bench-facts { grid-template-columns: repeat(2, 1fr); }
  .bench-models-table { font-size: 0.85em; min-width: 640px; }
  .bench-models-table th, .bench-models-table td { padding: 12px 10px; }
  .bench-models-table .col-speedup { padding-right: 10px; padding-left: 6px; }
}

/* ============================================================
   RESEARCH HUB + BENCHMARK DETAIL PAGES
   ============================================================ */

/* Accent span used inside rich-hero h1s */
.research-hero h1 .accent,
.page-hero h1 .accent {
  color: var(--cyan);
  font-weight: 800;
}

/* ---------- Research hub hero (blog-hero style, split with chip stack) ---------- */
.research-hero {
  padding: 92px 60px 72px;
  background: var(--light-blue);
  position: relative;
  overflow: hidden;
}
.research-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--coral);
}
.research-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.research-hero .section-tag { color: var(--cyan); margin-bottom: 18px; }
.research-hero .section-tag .bar { background: var(--cyan); }
.research-hero h1 {
  font-size: 3em;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--navy);
  margin: 0 0 18px 0;
}
.research-hero h1 .accent { color: var(--cyan); font-weight: 800; }
.research-hero .lede {
  font-size: 1.1em;
  line-height: 1.55;
  color: var(--steel);
  max-width: 540px;
  margin: 0 0 24px 0;
}
.research-hero .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 0.88em;
  color: var(--steel);
}
.research-hero .hero-meta b { color: var(--cyan); font-weight: 700; }
.research-hero .hero-stack {
  position: relative;
  min-height: 260px;
}
.research-hero .hero-stack .chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: white;
  border: 1px solid rgba(0,174,232,0.25);
  box-shadow: 0 4px 18px rgba(12,35,64,0.08);
  font-size: 0.85em;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  animation:
    chip-float 7s ease-in-out infinite var(--chip-delay, 0s),
    chip-opacity 6s ease-in-out infinite var(--chip-delay, 0s);
  will-change: transform, opacity;
}
.research-hero .hero-stack .chip b {
  color: var(--cyan);
  font-weight: 800;
  font-size: 1.05em;
  letter-spacing: -0.3px;
}
.research-hero .hero-stack .chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
  animation: dot-pulse 2.4s ease-in-out infinite var(--chip-delay, 0s);
}
.research-hero .hero-stack .chip-1 { --rot: -2deg; --chip-delay: 0s;   top: 0;      right: 8%;  transform: rotate(var(--rot)); }
.research-hero .hero-stack .chip-2 { --rot: 1deg;  --chip-delay: 1.6s; top: 70px;   right: 38%; transform: rotate(var(--rot)); background: rgba(0,174,232,0.1); border-color: rgba(0,174,232,0.3); }
.research-hero .hero-stack .chip-3 { --rot: -1deg; --chip-delay: 3.2s; top: 150px;  right: 4%;  transform: rotate(var(--rot)); }
.research-hero .hero-stack .chip-4 { --rot: 2deg;  --chip-delay: 4.8s; bottom: 10px; right: 28%; transform: rotate(var(--rot)); background: rgba(0,174,232,0.08); border-color: rgba(0,174,232,0.25); }

@keyframes chip-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-8px) rotate(var(--rot, 0deg)); }
}
@keyframes chip-opacity {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.82; }
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 10px var(--cyan); transform: scale(1); }
  50%      { box-shadow: 0 0 22px var(--cyan), 0 0 8px rgba(0,174,232,0.6); transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .research-hero .hero-stack .chip,
  .research-hero .hero-stack .chip .dot {
    animation: none;
  }
}

/* ---------- Benchmark run cards on the hub ---------- */
.bench-runs {
  padding: 100px 60px;
  background: var(--white);
}
.bench-runs-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.bench-runs .section-title { margin-top: 6px; }
.bench-runs .section-subtitle { max-width: 720px; margin-bottom: 48px; }
.bench-runs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.bench-run-card {
  display: block;
  padding: 36px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: white;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.bench-run-card:not(.is-upcoming):hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(12,35,64,0.08);
}
.bench-run-card.is-upcoming {
  background: var(--bg-warm);
  border-style: dashed;
  cursor: default;
}
.bench-run-date {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
}
.bench-run-card.is-upcoming .bench-run-date { color: var(--steel); }
.bench-run-card h3 {
  font-size: 1.5em;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 12px 0;
  line-height: 1.15;
}
.bench-run-card p {
  font-size: 0.95em;
  color: var(--steel);
  line-height: 1.5;
  margin: 0 0 24px 0;
}
.bench-run-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  padding: 18px;
  background: var(--bg-warm);
  border-radius: 10px;
}
.bench-run-stat .n {
  font-size: 1.4em;
  font-weight: 800;
  color: var(--cyan);
  line-height: 1;
}
.bench-run-stat .l {
  font-size: 0.72em;
  color: var(--steel);
  margin-top: 4px;
  line-height: 1.3;
}
.bench-run-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--cyan);
}
.bench-run-card.is-upcoming .bench-run-link { color: var(--steel); }
.bench-run-link .arrow { transition: transform 0.2s; }
.bench-run-card:hover .bench-run-link .arrow { transform: translateX(3px); }

/* ---------- Papers & notes cards ---------- */
.research-papers {
  padding: 100px 60px;
  background: var(--bg-warm);
}
.research-papers-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.research-papers .section-subtitle { max-width: 720px; margin-bottom: 48px; }
.paper-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.paper-card {
  padding: 32px;
  border-radius: 14px;
  background: white;
  border: 1px solid var(--border);
}
.paper-card.is-upcoming {
  border-style: dashed;
  background: var(--bg-warm);
}
.paper-kind {
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--cyan);
  margin-bottom: 12px;
}
.paper-card h3 {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 10px 0;
}
.paper-card p {
  font-size: 0.88em;
  color: var(--steel);
  line-height: 1.5;
  margin: 0 0 18px 0;
}
.paper-status {
  font-size: 0.78em;
  font-weight: 600;
  color: var(--steel);
  padding: 6px 12px;
  background: var(--border);
  border-radius: 999px;
  display: inline-block;
}

/* ---------- Products CTA at the bottom of the research hub ---------- */
.research-products-cta {
  padding: 100px 60px;
  background: var(--white);
}
.research-products-cta-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.research-products-cta .section-subtitle { max-width: 720px; margin-bottom: 48px; }
.product-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.product-cta-card {
  display: block;
  padding: 32px;
  border-radius: 14px;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.product-cta-card:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(12, 35, 64, 0.08);
}
.product-cta-kind {
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--cyan);
  margin-bottom: 12px;
}
.product-cta-card h3 {
  font-size: 1.25em;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 10px 0;
}
.product-cta-card p {
  font-size: 0.92em;
  color: var(--steel);
  line-height: 1.5;
  margin: 0 0 20px 0;
}
.product-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--cyan);
}
.product-cta-link .arrow { transition: transform 0.2s; }
.product-cta-card:hover .product-cta-link .arrow { transform: translateX(3px); }

/* ---------- Benchmark detail page: breadcrumb + facts row ---------- */
.bench-breadcrumb {
  font-size: 0.85em;
  color: var(--steel);
  margin-bottom: 18px;
}
.bench-breadcrumb a { color: var(--cyan); text-decoration: none; font-weight: 600; }
.bench-breadcrumb a:hover { text-decoration: underline; }
.bench-breadcrumb .sep { margin: 0 8px; opacity: 0.5; }
.bench-breadcrumb .here { color: var(--navy); font-weight: 600; }
.bench-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 720px;
  margin-top: 32px;
  padding: 20px 24px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.bench-fact .k {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 4px;
}
.bench-fact .v {
  font-size: 0.95em;
  font-weight: 700;
  color: var(--navy);
}

/* ---------- Methodology grid on detail page ---------- */
.bench-method {
  padding: 100px 60px;
  background: var(--bg-warm);
}
.bench-method-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.bench-method .section-title { margin-top: 6px; margin-bottom: 40px; }
.method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.method-card {
  padding: 28px;
  background: white;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.method-card .method-k {
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--cyan);
  margin-bottom: 10px;
}
.method-card .method-v {
  font-size: 0.95em;
  color: var(--navy);
  line-height: 1.55;
}
.method-card code {
  background: var(--bg-warm);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: 'Monaco', 'Menlo', monospace;
  color: var(--cyan-dark);
}

/* ---------- Models-tested table on detail page ---------- */
.bench-models {
  padding: 100px 60px;
  background: var(--white);
}
.bench-models-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.bench-models .section-subtitle { max-width: 780px; margin-bottom: 40px; }
.bench-models-table-wrap {
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  /* scroll shadow: subtle cue that table is horizontally scrollable */
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(12,35,64,0.12), rgba(12,35,64,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(12,35,64,0.12), rgba(12,35,64,0)) 100% 0;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.bench-models-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
  min-width: 720px;
}
.bench-models-table thead {
  background: var(--navy);
  color: white;
}
.bench-models-table th {
  text-align: left;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 0.78em;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.bench-models-table td {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  color: var(--navy);
}
.bench-models-table tbody tr:first-child td { border-top: none; }
.bench-models-table tbody tr.is-featured td {
  background: rgba(0, 174, 232, 0.06);
}
.bench-models-table tbody tr.is-featured td:first-child {
  box-shadow: inset 3px 0 0 var(--cyan);
}
.bench-models-table .yes { color: var(--cyan); font-weight: 800; margin-right: 4px; }
.bench-models-table .na { color: var(--steel); opacity: 0.5; margin-right: 4px; }
.bench-models-table .col-stateful { white-space: nowrap; }
.bench-models-table .v-on { color: var(--cyan-dark); font-weight: 800; }
.bench-models-table .v-sep { color: var(--steel); opacity: 0.45; margin: 0 4px; }
.bench-models-table .v-off { color: var(--steel); }
.bench-models-table tbody tr.is-stateless-only td { background: var(--bg-warm); }
.bench-models-table tbody tr.is-featured .v-on { color: var(--cyan); }
.bench-models-table .col-speedup {
  text-align: right;
  white-space: nowrap;
  padding-right: 14px;
  padding-left: 8px;
}
.bench-models-table .speedup {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 174, 232, 0.12);
  color: var(--cyan-dark);
  font-weight: 800;
  font-size: 1em;
  letter-spacing: -0.5px;
}
.bench-models-table tbody tr.is-featured .speedup {
  background: var(--cyan);
  color: white;
}
.bench-models-table .model-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cyan);
  color: white;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  vertical-align: middle;
}
.bench-models-note .v-on { color: var(--cyan-dark); font-weight: 700; }
.bench-models-note .v-off { color: var(--steel); }
.bench-models-note .v-sep { color: var(--steel); opacity: 0.45; margin: 0 4px; }
.bench-models-note {
  font-size: 0.88em;
  color: var(--steel);
  margin-top: 20px;
  line-height: 1.5;
}
.bench-models-note a { color: var(--cyan); text-decoration: none; font-weight: 600; }
.bench-models-note a:hover { text-decoration: underline; }

/* ---------- Reproduce section on detail page ---------- */
.bench-reproduce {
  padding: 100px 60px;
  background: var(--white);
}
.bench-reproduce-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.bench-reproduce .section-subtitle { max-width: 720px; margin-bottom: 40px; }
.reproduce-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.reproduce-item {
  padding: 24px;
  background: var(--bg-warm);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.reproduce-item .reproduce-k {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--cyan);
  margin-bottom: 10px;
}
.reproduce-item .reproduce-v {
  font-size: 0.98em;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.reproduce-item .reproduce-v code {
  background: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.88em;
  color: var(--cyan-dark);
  border: 1px solid var(--border);
}
.reproduce-item .reproduce-note {
  font-size: 0.85em;
  color: var(--steel);
  line-height: 1.5;
}
.reproduce-item .reproduce-note code {
  background: white;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.88em;
  color: var(--cyan-dark);
  border: 1px solid var(--border);
}
.reproduce-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- bench-facts inside dark RESULTS section (moved from hero) ---------- */
.stateful-advantage .bench-facts {
  margin: 8px 0 40px 0;
  background: rgba(0, 174, 232, 0.06);
  border: 1px solid rgba(0, 174, 232, 0.25);
  max-width: none;
  padding: 18px 24px;
}
.stateful-advantage .bench-fact .k {
  color: #6B8197;
}
.stateful-advantage .bench-fact .v {
  color: #F0F5FA;
}

/* ---------- "Coming soon" status pill next to a section-tag ---------- */
.section-tag-status {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(108, 121, 138, 0.2);
  color: var(--steel);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: none;
  vertical-align: middle;
}

/* ---------- Figure captions on detail page ---------- */
.stateful-advantage .chart-figure figcaption {
  color: #9CB3C7;
  font-size: 0.9em;
  line-height: 1.55;
  margin-top: 14px;
  max-width: 720px;
}

/* STATEFUL ADVANTAGE (dark section with embedded benchmark charts) */
.stateful-advantage {
  padding: 100px 60px;
  background: linear-gradient(180deg, #0C2340 0%, #050E1C 100%);
  color: #FFFFFF;
}
.stateful-advantage-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.stateful-advantage .section-tag {
  color: var(--cyan);
}
.stateful-advantage .section-tag .bar {
  background: var(--cyan);
}
.stateful-advantage .section-title {
  color: #FFFFFF;
  font-size: 2.4em;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-top: 6px;
}
.stateful-advantage .section-subtitle {
  color: #B4C6D6;
  font-size: 1em;
  line-height: 1.55;
  margin-top: 14px;
  max-width: 780px;
}
.stateful-advantage .chart-figure {
  margin: 48px 0 0 0;
  padding: 0;
}
.stateful-advantage .chart-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

/* =============================================================
   MOBILE — phones (<= 768px). Layered on top of the existing
   1024px tablet rules.
   ============================================================= */
@media (max-width: 768px) {
  /* Hero — h1 must fit small viewports without overflowing the
     flex column. Cap to clamp(2em, 8vw, 2.6em) and allow word-wrap. */
  .hero { padding: 48px 20px; }
  .hero-content { gap: 36px; }
  .hero h1 {
    font-size: clamp(1.95em, 7.5vw, 2.6em);
    letter-spacing: -0.8px;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .hero h1 .underline::after { height: 6px; bottom: 2px; }
  .hero .subtitle { font-size: 1em; }
  .hero-ctas { flex-direction: column; gap: 10px; align-items: stretch; }
  .hero-ctas > * { width: 100%; justify-content: center; text-align: center; }
  .hero-proof { flex-wrap: wrap; gap: 14px 24px; }
  .hero-proof-divider { display: none; }
  .hero-text { min-width: 0; }
  /* The hero fleet illustration (.hero-fleet-v4) is a fixed-width
     absolute-layout composition. With min-width:0 it collapsed to
     0x0 on phones; with min-width:100% it overflows. It's decorative
     — hide on phones and let the text breathe. */
  .hero-visual { display: none; }

  /* AI Act dark band */
  .aiact { padding: 56px 20px; }
  .aiact h2 { font-size: 1.9em; letter-spacing: -0.3px; overflow-wrap: anywhere; }
  .aiact p { font-size: 0.96em; }
  /* Allow grid items to shrink below intrinsic min-content. */
  .aiact-grid { grid-template-columns: minmax(0, 1fr); }
  .aiact-grid > * { min-width: 0; }
  .aiact-checks { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .aiact-check { font-size: 0.86em; min-width: 0; }
  .countdown-card { padding: 24px 18px; }
  .countdown-num { font-size: 1.85em; }
  .countdown-blocks { gap: 6px; }
  .countdown-lbl { font-size: 0.6em; letter-spacing: 1px; }
  .countdown-title { font-size: 1em; }

  /* Section padding pass — anything that wasn't already covered. */
  .why-ark, .capabilities, .connectors, .comparison, .benchmarks,
  .density, .usecases, .pricing, .sovereign-cta, .problem,
  .stateful-advantage {
    padding-left: 20px; padding-right: 20px;
  }
  .stateful-advantage { padding-top: 64px; padding-bottom: 64px; }
  .stateful-advantage .section-title { font-size: 1.7em; }

  /* Force any 2-column grid we haven't already collapsed to 1fr. */
  .cap-grid, .bench-grid, .connector-stats, .bench-facts {
    grid-template-columns: 1fr;
  }

  /* Section titles — universal scale-down. */
  .section-title, .why-ark-title, .problem-title { font-size: 1.85em; line-height: 1.18; }

  /* Trust bar — wrap and shrink logo gaps. */
  .trust-logos { gap: 18px; flex-wrap: wrap; justify-content: center; }
}

/* =============================================================
   MOBILE — small phones (<= 480px). Final tightening for 320–414px.
   ============================================================= */
@media (max-width: 480px) {
  .hero { padding: 36px 16px; }
  .hero h1 { font-size: clamp(1.7em, 8.5vw, 2em); }
  .hero .subtitle { font-size: 0.95em; }
  .hero-badge { font-size: 0.72em; }
  .hero-proof-item .number { font-size: 1.25em; }
  .hero-proof-item .label { font-size: 0.62em; }

  .aiact { padding: 48px 16px; }
  .aiact h2 { font-size: 1.6em; }
  .countdown-card { padding: 20px 14px; }
  .countdown-num { font-size: 1.55em; }
  .countdown-lbl { font-size: 0.55em; letter-spacing: 0.5px; }

  .why-ark, .capabilities, .connectors, .comparison, .benchmarks,
  .density, .usecases, .pricing, .sovereign-cta, .problem,
  .stateful-advantage {
    padding-left: 16px; padding-right: 16px;
  }
  .section-title, .why-ark-title, .problem-title { font-size: 1.55em; }
  .stateful-advantage .section-title { font-size: 1.5em; }
}