/* ============================================================
   FluenticOS marketing preview: design tokens mirror the product's
   own oklch palette (navy / teal / iris) from fluenticos-ui/src/index.css
   ============================================================ */

@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Inter');
}

:root {
  --c-bg:        #0a0d18;
  --c-bg-1:      #0d1120;
  --c-bg-2:      #10152a;
  --c-surface:   #131a30;
  --c-surface-2: #171f3a;
  --c-line:      rgba(255,255,255,0.09);
  --c-line-2:    rgba(255,255,255,0.16);

  --c-ink:   #f3f5fc;
  --c-ink-2: #c2c8de;
  --c-ink-3: #9298b5;
  --c-ink-4: #6b7191;

  --c-navy:  #7166f2;
  --c-navy-soft: #948bf5;
  --c-teal:  #2fe0c9;
  --c-teal-soft: #6ee9d8;
  --c-iris:  #c158f0;
  --c-iris-soft: #d283f5;
  --c-amber: #f0b33e;
  --c-rose:  #f0616f;

  --grad-brand: linear-gradient(135deg, #7166f2 0%, #4f9df0 100%);
  --grad-intel: linear-gradient(120deg, #c158f0 0%, #7166f2 45%, #2fe0c9 100%);
  --grad-text:  linear-gradient(100deg, #cfd3ff 0%, #9bd9ff 45%, #7bf0d8 100%);

  --shadow-md: 0 12px 32px -12px rgba(3, 5, 15, 0.55);
  --shadow-lg: 0 30px 70px -20px rgba(3, 5, 15, 0.65);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,0.06), 0 20px 60px -20px rgba(113, 102, 242, 0.45);

  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;

  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --ease: cubic-bezier(.16,.8,.24,1);
  --dur: 0.6s;

  color-scheme: dark;
}

/* ---------- reset ---------- */
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: 'Inter var', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p { margin: 0; }
::selection { background: rgba(113,102,242,0.35); color: #fff; }

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- background field: instrument-console schematic ---------- */
.bg-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(120% 55% at 50% -10%, rgba(113,102,242,0.10), transparent 60%),
    var(--c-bg);
}
.bg-field::before {
  content: '';
  position: absolute;
  inset: -64px;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(85% 75% at 50% 0%, black, transparent 85%);
  animation: gridDrift 50s linear infinite;
}

/* signal pulses: small telemetry dots traveling across the schematic grid */
.bg-signal {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  filter: drop-shadow(0 0 5px currentColor);
  will-change: transform;
}
.bg-signal.s1 { top: 16%; color: var(--c-teal); animation: signalTravel 15s linear infinite; }
.bg-signal.s2 { top: 46%; color: var(--c-navy-soft); animation: signalTravel 19s linear infinite 4s; }
.bg-signal.s3 { top: 72%; color: var(--c-iris-soft); animation: signalTravel 23s linear infinite 9s; }
@keyframes signalTravel {
  0%   { transform: translateX(-4vw); opacity: 0; }
  6%   { opacity: 0.85; }
  94%  { opacity: 0.85; }
  100% { transform: translateX(104vw); opacity: 0; }
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 64px 64px, 64px 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-signal, .bg-field::before, .hero h1 .grad, .flow-connector .dot, .bar, .hero::before, .hero-visual::before, .ic-live::after, .schedule-now, .now-dot, .dv-plate, .dv-head, .dv-lens-glow, .dv-pipette, .dv-drop, .dv-beam, .dv-arm-unit, .dv-dot { animation: none !important; transition: none !important; }
}

/* subtle film-grain texture for depth */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- scroll progress ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 300; pointer-events: none; }
.scroll-progress-bar {
  height: 100%; width: 0%;
  background: var(--grad-text);
  box-shadow: 0 0 10px rgba(47,224,201,0.5);
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: padding var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  padding: 11px 0;
  background: rgba(10,13,24,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--c-line);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.02em;
  margin-right: auto;
}
.brand svg { flex-shrink: 0; }
/* .wordmark keeps "Fluentic"+"OS" glued together as one word: it, not the two
   colour spans inside it, is the flex child that .brand's gap separates
   from the mark icon. Exact colours match the product's FluenticWordmark
   component (src/components/FluenticOSLogo.tsx): "Fluentic" in --navy, "OS" in
   --teal-strong, flat (no gradient text), resolved from the app's
   dark-theme tokens. */
.brand .wordmark { white-space: nowrap; }
.brand .word-fl { color: #5b79f7; }
.brand .word-os { color: #00c1b9; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-ink-2);
  transition: color 0.2s;
  position: relative;
}
.nav-links a:hover { color: var(--c-ink); }

.nav-cta { display: flex; align-items: center; gap: 10px; }

[id] { scroll-margin-top: 90px; }

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--c-line-2);
  color: var(--c-ink);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, box-shadow 0.25s;
  white-space: nowrap;
}
.btn:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.28); transform: translateY(-1px); }
.btn-primary {
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 10px 24px -8px rgba(113,102,242,0.55);
}
.btn-primary:hover { box-shadow: 0 14px 32px -8px rgba(113,102,242,0.7); transform: translateY(-1px); }
.btn-lg { padding: 13px 24px; font-size: 14.5px; border-radius: var(--r-lg); }
.btn-ghost { background: transparent; border-color: var(--c-line-2); }
.btn svg { width: 15px; height: 15px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 178px 0 90px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -20%; left: -60%;
  width: 55%; height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 60%, transparent);
  transform: skewX(-18deg);
  animation: heroSweep 2.4s ease-out 0.5s 1 both;
  pointer-events: none;
}
@keyframes heroSweep {
  0% { left: -60%; opacity: 0; }
  18% { opacity: 1; }
  55% { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}
.hero-inner {
  text-align: center;
  max-width: 840px;
  margin: 0 auto;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line-2);
  background: rgba(255,255,255,0.03);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--c-ink-2);
  margin-bottom: 26px;
}
.eyebrow::before { content: '['; color: var(--c-ink-4); }
.eyebrow::after { content: ']'; color: var(--c-ink-4); }
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(47,224,201,0.18);
  animation: pulse 2.2s ease-in-out infinite;
}
.eyebrow b { color: var(--c-ink); font-weight: 700; }

.hero h1 {
  font-size: clamp(38px, 5.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 680;
  color: var(--c-ink);
}
.hero h1 .grad {
  background: var(--grad-text);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  animation: shimmer 7s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero p.lead {
  margin: 22px auto 0;
  max-width: 620px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--c-ink-3);
}
.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.hero-note {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--c-ink-4);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(47,224,201,0.18); }
  50% { box-shadow: 0 0 0 6px rgba(47,224,201,0.06); }
}

/* ---------- section shell ---------- */
.section { padding: 130px 0; position: relative; }
.section-head { max-width: 640px; margin: 0 auto 64px; text-align: center; }
.section-head.left { margin: 0 0 56px; text-align: left; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-teal-soft);
  margin-bottom: 14px;
}
.kicker::before { content: '['; color: var(--c-ink-4); font-weight: 400; }
.kicker::after { content: ']'; color: var(--c-ink-4); font-weight: 400; }
.section-head h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 650;
  color: var(--c-ink);
}
.section-head p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink-3);
}

.tour-media {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line-2);
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: var(--shadow-md);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tour-media:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.tour-media img { width: 100%; height: auto; display: block; aspect-ratio: 1800 / 1071; object-fit: cover; }

/* ---------- feature grid (small cards) ---------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.grid-cards.bento .card-feature { grid-column: span 2; }
.grid-cards.bento .card-feature p { max-width: 70%; }
.card-feature .lineage-deco { position: absolute; right: -6px; bottom: -4px; opacity: 0.4; }
.card {
  position: relative;
  overflow: hidden;
  padding: 26px 24px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s;
}
.card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(113,102,242,0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.card:hover::before { opacity: 1; }
.card:hover::after { transform: scaleX(1); }
.card > * { position: relative; }
.card:hover { transform: translateY(-2px); border-color: var(--c-line-2); background: var(--c-surface-2); }
.card .ic {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-line-2);
  color: var(--c-iris-soft);
  margin-bottom: 16px;
}
.card .ic svg { width: 18px; height: 18px; }
.ic-live { position: relative; }
.ic-live::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-teal);
  animation: faintPulse 3.6s ease-in-out infinite;
}
@keyframes faintPulse {
  0%, 100% { opacity: 0.35; box-shadow: 0 0 0 0 rgba(47,224,201,0.16); }
  50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(47,224,201,0.07); }
}
.card h4 { font-size: 15.5px; font-weight: 620; margin-bottom: 8px; letter-spacing: -0.01em; }
.card p { font-size: 13.5px; line-height: 1.6; color: var(--c-ink-3); }

/* ---------- paper-to-plate morph card (agentic protocol authoring) ---------- */
/* One card, three layers crossfading in place: paper excerpt -> protocol
   graph -> live schedule. The schedule layer reuses the hero's exact
   .schedule-mock markup, so it's driven by the same sweep loop in main.js
   and always matches the hero visually and behaviourally. */
.morph-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line-2);
  background: var(--c-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.morph-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 18px 22px 0;
}
.morph-title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 650; color: var(--c-ink); }
.morph-tabs { display: flex; gap: 6px; }
.morph-tab {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--c-line-2);
  color: var(--c-ink-4);
  background: transparent;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.morph-tab:hover { color: var(--c-ink-2); }
.morph-tab.active { color: var(--c-ink); background: var(--c-surface-2); border-color: rgba(47,224,201,0.35); }
.morph-stage { position: relative; min-height: 330px; padding: 18px 22px 24px; }
.morph-layer {
  position: absolute; inset: 0;
  padding: 18px 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: scale(0.97) translateY(8px);
  filter: blur(3px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease);
  pointer-events: none;
}
.morph-layer.active { position: relative; opacity: 1; transform: scale(1) translateY(0); filter: blur(0); pointer-events: auto; }
.morph-layer .schedule-mock { border: none; box-shadow: none; background: none; padding: 0; }
.morph-layer .bar { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .morph-layer { transition: opacity 0.3s linear; transform: none; filter: none; }
}

/* paper excerpt */
.quote-block { font-size: 13px; line-height: 1.9; color: var(--c-ink-2); }
.quote-block .src { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--c-ink-4); margin-bottom: 12px; letter-spacing: 0.02em; }
.quote-block mark { background: none; padding: 1px 3px; border-radius: 3px; font-weight: 600; }
.quote-block mark.m-iris { color: var(--c-iris-soft); background: rgba(193,88,240,0.12); }
.quote-block mark.m-teal { color: var(--c-teal-soft); background: rgba(47,224,201,0.12); }
.quote-block mark.m-amber { color: var(--c-amber); background: rgba(240,179,62,0.12); }
.quote-block mark.m-navy { color: var(--c-navy-soft); background: rgba(113,102,242,0.14); }

/* step 2: assistant chat + tool calls */
.chat-turn { display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-start; }
.chat-turn:last-child { margin-bottom: 0; }
.chat-avatar {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  background: var(--c-surface-2); border: 1px solid var(--c-line-2); color: var(--c-ink-3);
}
.chat-turn.user .chat-avatar { color: var(--c-ink-2); }
.chat-turn.ai .chat-avatar { color: var(--c-teal-soft); border-color: rgba(47,224,201,0.3); }
.chat-bubble { font-size: 12.5px; line-height: 1.6; color: var(--c-ink-2); padding-top: 2px; }
.chat-turn.user .chat-bubble { color: var(--c-ink); }

/* protocol graph */
/* node-flow: every occurrence of a repeated step (another imaging day,
   another medium exchange) is its own chip, never collapsed into one
   node with a multiplier — so the row grows with the real protocol. */
.node-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; row-gap: 10px; }
.nf-node {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 9px 8px;
  border-radius: 8px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-2);
  min-width: 58px;
}
.nf-node .nf-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--c-ink-2); white-space: nowrap; }
.nf-node .nf-sub { font-family: var(--font-mono); font-size: 8.5px; color: var(--c-ink-4); white-space: nowrap; }
.nf-port { width: 6px; height: 6px; border-radius: 50%; margin-top: 1px; }
.nf-port.physical { background: var(--c-iris); }
.nf-port.data { background: var(--c-teal); }
.nf-port.variable { background: var(--c-amber); }
.nf-arrow { color: var(--c-line-2); flex-shrink: 0; width: 14px; height: 10px; }
.ng-legend { display: flex; gap: 16px; margin-top: 14px; font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-4); flex-wrap: wrap; }
.ng-legend span { display: flex; align-items: center; gap: 6px; }
.ng-legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

@media (max-width: 640px) {
  .morph-stage { min-height: 480px; }
  .morph-head { padding: 16px 16px 0; }
  .morph-layer { padding: 14px 16px 18px; }
}

/* ---------- integration / agentic control panels ---------- */
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.panel {
  position: relative;
  padding: 30px 28px;
  border-radius: var(--r-xl);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: border-color 0.3s, background 0.3s;
}
.panel:hover { border-color: var(--c-line-2); background: var(--c-surface-2); }
.panel .ic { width: 38px; height: 38px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid var(--c-line-2); color: var(--c-iris-soft); margin-bottom: 18px; }
.panel .ic svg { width: 18px; height: 18px; }
.panel h4 { font-size: 17px; font-weight: 640; letter-spacing: -0.01em; margin-bottom: 10px; }
.panel p { font-size: 13.5px; line-height: 1.65; color: var(--c-ink-3); }
.panel .tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.panel .tag { font-family: var(--font-mono); font-size: 10.5px; padding: 4px 8px; border-radius: 5px; border: 1px solid var(--c-line-2); color: var(--c-ink-3); background: rgba(255,255,255,0.03); }
.code-mock {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--c-bg-1);
  border: 1px solid var(--c-line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.85;
  overflow-x: auto;
  white-space: pre;
}
.code-mock .k { color: var(--c-teal-soft); }
.code-mock .v { color: var(--c-ink-2); }
.code-mock .m { color: var(--c-iris-soft); }
.code-mock .c { color: var(--c-ink-4); }
@media (max-width: 860px) {
  .panel-grid { grid-template-columns: 1fr; }
}

/* ---------- pipeline diagram (how it works) ---------- */
.flow-diagram {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  margin-top: 10px;
}
.flow-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 14px;
  position: relative;
}
.flow-step .num {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-2);
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  color: var(--c-teal-soft);
  margin-bottom: 16px;
}
.flow-step h5 { font-size: 14px; font-weight: 640; margin-bottom: 8px; }
.flow-step p { font-size: 12.5px; color: var(--c-ink-3); line-height: 1.55; }
.flow-connector {
  flex: 0 0 auto;
  width: 60px;
  display: flex;
  align-items: flex-start;
  padding-top: 17px;
  position: relative;
}
.flow-connector svg { width: 100%; height: 20px; overflow: visible; }
.flow-connector .dash { stroke: var(--c-line-2); stroke-width: 1.5; stroke-dasharray: 4 5; fill: none; }
.flow-connector .dot { fill: var(--c-teal); animation: travelDot 2.4s ease-in-out infinite; }
@keyframes travelDot {
  0% { transform: translateX(-22px); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(22px); opacity: 0; }
}

/* ---------- positioning statement panel ---------- */
.statement-panel {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 54px 48px;
  border-radius: var(--r-xl);
  border: 1px solid var(--c-line-2);
  background: linear-gradient(160deg, rgba(113,102,242,0.10), rgba(47,224,201,0.05) 60%, transparent);
}
.statement-text {
  margin-top: 6px;
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.55;
  font-weight: 580;
  letter-spacing: -0.015em;
  color: var(--c-ink);
}

/* ---------- inline check list (used inside cards) ---------- */
.check-list { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.check-list li { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.6; color: var(--c-ink-2); align-items: flex-start; }
.check-list li svg { width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; color: var(--c-teal-soft); }
.check-list li b { color: var(--c-ink); font-weight: 650; }
.check-list.muted li svg { color: var(--c-ink-4); }

/* ---------- schedule mock (hero visual) ---------- */
.schedule-mock { padding: 24px 26px 20px; }
.schedule-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.schedule-title { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 650; color: var(--c-ink); }
.schedule-legend { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--c-ink-4); }
.schedule-legend span { display: flex; align-items: center; gap: 6px; }
.schedule-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.schedule-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-4); padding-left: 118px; margin-bottom: 8px; }
.schedule-lanes { display: flex; flex-direction: column; gap: 10px; position: relative; }
/* left uses calc(118px + (100% - 118px) * f) rather than calc(118px + f%):
   the bars' left/width percentages resolve against the track only (the
   lane minus the 118px label column), so the sweep has to be computed
   against that same reduced width, not the full lane, or the line drifts
   out of alignment with where a bar's edge actually is. */
.schedule-now {
  position: absolute; left: calc(118px + (100% - 118px) * 0.44); top: -4px; bottom: -4px; width: 1px;
  background: repeating-linear-gradient(to bottom, var(--c-line-2) 0 3px, transparent 3px 6px);
  z-index: 1;
  animation: nowSweep 46s linear infinite;
}
@keyframes nowSweep {
  0%   { left: calc(118px + (100% - 118px) * 0.04); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { left: calc(118px + (100% - 118px) * 0.92); opacity: 0; }
}
.lane { display: flex; align-items: center; gap: 10px; }
.lane-label { width: 108px; flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-2); font-weight: 400; }
.lane-track { position: relative; flex: 1; height: 22px; background: rgba(255,255,255,0.035); border-radius: 6px; }
.bar {
  position: absolute; top: 0; bottom: 0; border-radius: 5px;
  transform: scaleX(0); transform-origin: left;
  border: 1.4px solid transparent;
  background: var(--c-line-2);
  transition: transform 0.9s var(--ease), background-color 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}
.bar.executing { background: var(--c-teal); box-shadow: 0 0 0 1px rgba(47,224,201,0.3); border-color: transparent; }
.bar.planned { border-color: var(--c-amber); border-style: dashed; background: rgba(240,179,62,0.12); }
.bar.completed { background: var(--c-line-2); border-color: transparent; }
.hero-visual.in .bar { transform: scaleX(1); }
.lane:nth-child(2) .bar { transition-delay: 0.05s; }
.lane:nth-child(3) .bar { transition-delay: 0.15s; }
.lane:nth-child(4) .bar { transition-delay: 0.25s; }
.lane:nth-child(5) .bar { transition-delay: 0.35s; }
.lane:nth-child(6) .bar { transition-delay: 0.45s; }
.now-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%; background: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(47,224,201,0.18);
  animation: pulse 2.2s ease-in-out infinite;
}
.hero-visual::before {
  content: '';
  position: absolute;
  inset: -40px;
  z-index: -1;
  background: radial-gradient(60% 60% at 50% 40%, rgba(47,224,201,0.16), transparent 70%);
  filter: blur(40px);
  animation: glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
/* ---------- device row (hero visual: instrument icons synced to the schedule) ---------- */
.device-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.device-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink-4);
  transition: color 0.5s ease, border-color 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
}
.device-card.active {
  color: var(--c-teal-soft);
  border-color: rgba(47,224,201,0.35);
  background: linear-gradient(180deg, rgba(47,224,201,0.07), var(--c-surface) 70%);
  box-shadow: 0 0 0 1px rgba(47,224,201,0.12), 0 10px 26px -14px rgba(47,224,201,0.35);
}
.device-ic { width: 40px; height: 34px; overflow: visible; }
.device-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.01em;
  color: inherit;
  white-space: nowrap;
}
.dv-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-ink-4);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.device-card.active .dv-dot { background: var(--c-teal); box-shadow: 0 0 0 3px rgba(47,224,201,0.18); animation: pulse 2.2s ease-in-out infinite; }

/* devices are idle (static, dim) until the now-line is over their lane's
   executing bar, at which point .active gates each icon's own motion so
   the row visually reads as "what's actually running right now" */
.dv-plate, .dv-head, .dv-lens-glow, .dv-pipette, .dv-drop, .dv-beam, .dv-arm-unit { animation: none; }

.device-card.active .dv-plate { animation: plateLift 2.6s ease-in-out infinite; }
@keyframes plateLift {
  0%, 14%   { transform: translateY(0); opacity: 1; }
  42%       { transform: translateY(-9px); opacity: 1; }
  58%       { transform: translateY(-9px); opacity: 0; }
  59%       { transform: translateY(0); opacity: 0; }
  86%, 100% { transform: translateY(0); opacity: 1; }
}

.device-card.active .dv-head { animation: microscopeFocus 1.7s ease-in-out infinite; transform-origin: 24px 33px; }
@keyframes microscopeFocus {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.device-card.active .dv-lens-glow { animation: lensPulse 1.7s ease-in-out infinite; }
@keyframes lensPulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.9; }
}

.device-card.active .dv-pipette { animation: pipetteDip 2.2s ease-in-out infinite; transform-origin: 24px 7px; }
@keyframes pipetteDip {
  0%, 20%, 100% { transform: translateY(0); }
  48%           { transform: translateY(7px); }
}
.device-card.active .dv-drop { animation: dropFall 2.2s ease-in-out infinite; }
@keyframes dropFall {
  0%, 52%  { transform: translateY(0); opacity: 0; }
  60%      { opacity: 1; }
  78%      { transform: translateY(7px); opacity: 0; }
  100%     { transform: translateY(0); opacity: 0; }
}

.device-card.active .dv-beam { animation: beamSweep 2.4s ease-in-out infinite; }
@keyframes beamSweep {
  0%, 100% { transform: translateX(0); opacity: 0.9; }
  50%      { transform: translateX(29px); opacity: 0.9; }
}

.device-card.active .dv-arm-unit { animation: armShuttle 3.2s ease-in-out infinite; }
@keyframes armShuttle {
  0%       { transform: translate(0, 0); opacity: 1; }
  8%       { transform: translate(0, -4px); }
  42%      { transform: translate(26px, -4px); }
  50%, 62% { transform: translate(26px, 0); opacity: 1; }
  70%      { transform: translate(26px, 0); opacity: 0; }
  71%      { transform: translate(0, 0); opacity: 0; }
  82%, 100% { transform: translate(0, 0); opacity: 1; }
}

/* ---------- CTA ---------- */
.cta {
  border-radius: var(--r-xl);
  padding: 74px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-line-2);
  background: linear-gradient(160deg, rgba(113,102,242,0.16), rgba(47,224,201,0.08));
}
.cta::before {
  content: '';
  position: absolute; inset: -2px;
  background: var(--grad-intel);
  opacity: 0.12;
  filter: blur(50px);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 650; letter-spacing: -0.025em; }
.cta p { margin: 16px auto 0; max-width: 520px; color: var(--c-ink-3); font-size: 15.5px; line-height: 1.6; }
.cta .hero-ctas { margin-top: 30px; }

/* ---------- footer ---------- */
.footer { padding: 60px 0 40px; border-top: 1px solid var(--c-line); }
.footer-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 40px; flex-wrap: wrap;
  padding-bottom: 40px;
}
.footer-brand { max-width: 300px; }
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p { font-size: 13px; color: var(--c-ink-4); line-height: 1.6; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col h5 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-ink-4); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 13.5px; color: var(--c-ink-2); transition: color 0.2s; }
.footer-col a:hover { color: var(--c-ink); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px; border-top: 1px solid var(--c-line);
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--c-ink-4);
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom .disclaimer { max-width: 640px; line-height: 1.6; }

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger.in .stagger-child {
  opacity: 1;
  transform: translateY(0);
}
.stagger-child {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .grid-cards.bento .card-feature p { max-width: 100%; }
  .flow-diagram { flex-direction: column; }
  .flow-connector { width: auto; height: 34px; padding: 0; align-items: center; justify-content: center; }
  .flow-connector svg { width: 20px; height: 100%; transform: rotate(90deg); }
}

@media (max-width: 680px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .menu-toggle { display: flex; }
  .hero { padding-top: 130px; }
  .eyebrow { border-radius: var(--r-lg); text-align: left; font-size: 12px; line-height: 1.5; }
  .section { padding: 84px 0; }
  .grid-cards { grid-template-columns: 1fr; }
  .grid-cards.bento .card-feature { grid-column: span 1; }
  .lineage-deco { opacity: 0.25; transform: scale(0.85); }
  .cta { padding: 50px 26px; }
  .footer-top { flex-direction: column; }
  .lane-label { width: 78px; font-size: 10.5px; }
  .schedule-axis { padding-left: 88px; }
  .schedule-legend { display: none; }
  .device-row { flex-wrap: wrap; }
  .device-card { flex: 1 1 calc(33.33% - 7px); }
  .device-label { font-size: 9px; }
}

/* mobile nav sheet */
.mobile-sheet {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,10,20,0.92);
  backdrop-filter: blur(14px);
  display: flex; flex-direction: column;
  padding: 22px 24px;
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease);
}
.mobile-sheet.open { transform: translateY(0); }
.mobile-sheet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.mobile-sheet a { font-size: 22px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.mobile-sheet .btn { margin-top: 24px; justify-content: center; }