/* ============ Design tokens ============ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,18..72,400;0,18..72,500;0,18..72,600;1,18..72,400;1,18..72,500;1,18..72,600&display=swap');

:root {
  --fnd-ink: #18191B;
  --fnd-indigo-400: #818CF8;
  --fnd-indigo-500: #6366F1;
  --fnd-indigo-600: #4F46E5;
  --fnd-indigo-700: #4338CA;
  --fnd-indigo-50:  #EEF2FF;
  --fnd-indigo-100: #E0E7FF;

  --fnd-white:      #FFFFFF;
  --fnd-slate-50:   #F8FAFC;
  --fnd-slate-100:  #F1F5F9;
  --fnd-slate-200:  #E2E8F0;
  --fnd-slate-300:  #CBD5E1;
  --fnd-slate-400:  #94A3B8;
  --fnd-slate-500:  #64748B;
  --fnd-slate-600:  #475569;
  --fnd-slate-700:  #334155;
  --fnd-slate-800:  #1E293B;
  --fnd-slate-900:  #0F172A;
  --fnd-black:      #050A12;

  --fnd-positive:        #10B981;
  --fnd-positive-bg:     #ECFDF5;
  --fnd-positive-border: #A7F3D0;
  --fnd-warning:         #F59E0B;
  --fnd-warning-bg:      #FEF3C7;
  --fnd-warning-border:  #FDE68A;
  --fnd-danger:          #EF4444;
  --fnd-danger-bg:       #FEE2E2;
  --fnd-danger-border:   #FECACA;

  --fg-1: var(--fnd-slate-900);
  --fg-2: var(--fnd-slate-700);
  --fg-3: var(--fnd-slate-500);
  --fg-4: var(--fnd-slate-400);
  --fg-inverse: var(--fnd-white);

  --bg-0: var(--fnd-white);
  --bg-1: var(--fnd-slate-50);
  --bg-2: var(--fnd-slate-100);
  --bg-tint: var(--fnd-indigo-50);
  --bg-dark: var(--fnd-black);

  --border-1: var(--fnd-slate-200);
  --border-2: var(--fnd-slate-300);
  --border-accent: var(--fnd-indigo-100);

  --accent: var(--fnd-indigo-500);
  --accent-hover: var(--fnd-indigo-600);
  --accent-soft: var(--fnd-indigo-400);
  --accent-bg: var(--fnd-indigo-50);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'DM Sans', 'Inter', system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fw-reg: 400; --fw-med: 500; --fw-sem: 600; --fw-bold: 700; --fw-black: 800;

  --fs-xs: 12px;  --lh-xs: 16px;
  --fs-sm: 14px;  --lh-sm: 20px;
  --fs-base: 16px; --lh-base: 24px;
  --fs-md: 18px;  --lh-md: 28px;
  --fs-lg: 20px;  --lh-lg: 30px;
  --fs-xl: 24px;  --lh-xl: 32px;
  --fs-2xl: 30px; --lh-2xl: 38px;
  --fs-3xl: 36px; --lh-3xl: 44px;
  --fs-4xl: 48px; --lh-4xl: 56px;

  --track-tight: -0.03em;
  --track-snug:  -0.02em;
  --track-normal: -0.01em;
  --track-caps:   0.12em;

  --sp-0: 0;    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
  --sp-24: 96px; --sp-32: 128px;

  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 20px; --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-indigo: 0 8px 24px rgba(99, 102, 241, 0.22);
  --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.22);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============ Reset / Base ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-0);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(36px, 5vw, 64px); line-height: 1.08; letter-spacing: var(--track-tight); color: var(--fg-1); margin: 0; }
h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.15; letter-spacing: var(--track-snug); color: var(--fg-1); margin: 0; }
h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(20px, 2vw, 24px); line-height: 1.3; letter-spacing: var(--track-normal); color: var(--fg-1); margin: 0; }
h4 { font-family: var(--font-sans); font-weight: var(--fw-sem); font-size: var(--fs-md); line-height: var(--lh-md); color: var(--fg-1); margin: 0; }
p  { font-size: var(--fs-base); line-height: 1.6; color: var(--fg-2); margin: 0; }
a  { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.fnd-eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-sem); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); }
.fnd-highlight { background: linear-gradient(transparent 60%, var(--accent-bg) 60%); }

/* ============ Layout ============ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6); }
section { padding: var(--sp-20) 0; }
@media (max-width: 768px) { section { padding: var(--sp-16) 0; } }
.bg-tinted { background: var(--bg-1); }

/* ============ Nav ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-1);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  height: 72px;
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
}
.nav-brand { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; padding-right: var(--sp-4); }
.nav-brand .word { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-lg); color: var(--fnd-ink); letter-spacing: var(--track-snug); }
.nav-brand .word .ai { color: var(--accent-soft); }

.nav-links { display: flex; gap: 0; align-items: stretch; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-trigger {
  color: var(--fg-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  text-decoration: none;
  padding: 0 var(--sp-4);
  height: 72px;
  display: flex; align-items: center; gap: 6px;
  transition: color var(--dur-fast) var(--ease-standard);
  position: relative;
}
.nav-trigger::after {
  content: '';
  position: absolute;
  bottom: 0; left: var(--sp-4); right: var(--sp-4);
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-base) var(--ease-standard);
}
.nav-trigger:hover { color: var(--fg-1); }
.nav-trigger.active { color: var(--fg-1); }
.nav-trigger.active::after { transform: scaleX(1); }
.nav-trigger .chev {
  display: inline-block; width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-fast) var(--ease-standard);
  opacity: 0.6;
}
.nav-item:hover .nav-trigger .chev { transform: rotate(225deg) translate(-2px, -2px); }

.nav-dropdown {
  position: absolute;
  top: 100%; left: 0;
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
  min-width: 320px;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-standard),
              visibility var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
  z-index: 100;
}
.nav-dropdown-wide {
  min-width: 760px;
  left: 50%; transform: translate(-50%, 8px);
}
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-item:hover .nav-dropdown-wide { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.dropdown-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.dropdown-col { min-width: 0; }
.dropdown-header {
  display: block;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--fg-1);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  margin-bottom: 2px;
}
.dropdown-header:hover { background: var(--accent-bg); color: var(--accent); }
.dropdown-header .dh-name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--track-snug);
  margin-bottom: 2px;
}
.dropdown-header .dh-desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--fg-3);
  font-weight: var(--fw-reg);
  line-height: 1.4;
}
.dropdown-services {
  list-style: none;
  padding: var(--sp-3) var(--sp-3) 0;
  margin: 0;
  border-top: 1px solid var(--border-1);
  margin-top: var(--sp-2);
}
.dropdown-services li {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  padding: 3px 0;
}

.dropdown-list { display: flex; flex-direction: column; gap: 0; }
.dropdown-link {
  display: block;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--fg-1);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.dropdown-link:hover { background: var(--accent-bg); color: var(--accent); }
.dropdown-link .dl-name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--track-snug);
  margin-bottom: 2px;
}
.dropdown-link .dl-desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--fg-3);
  font-weight: var(--fw-reg);
  line-height: 1.4;
}
.dropdown-link:hover .dl-desc { color: var(--accent); opacity: 0.85; }

.nav-cta { margin-left: auto; align-self: center; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 12px 22px;
  border-radius: var(--r-md);
  font-family: var(--font-sans); font-weight: var(--fw-sem); font-size: var(--fs-sm);
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--dur-base) var(--ease-standard);
}
.btn-primary { background: var(--accent); color: var(--fnd-white); box-shadow: var(--shadow-indigo); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); color: var(--fnd-white); }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary { background: var(--fnd-white); color: var(--fg-1); border-color: var(--border-2); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-arrow::after { content: '→'; transition: transform var(--dur-base) var(--ease-standard); }
.btn-arrow:hover::after { transform: translateX(3px); }

/* ============ Sub-page hero (smaller than home hero) ============ */
.subhero {
  position: relative;
  padding: var(--sp-20) 0 var(--sp-12);
  overflow: hidden;
  background: var(--bg-0);
}
.subhero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(148,163,184,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,0.10) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at top, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at top, black 30%, transparent 80%);
}
.subhero-glow {
  position: absolute; top: -200px; right: -200px;
  width: 600px; height: 600px; pointer-events: none;
  background: radial-gradient(circle, rgba(99,102,241,0.14) 0%, transparent 60%);
}
.subhero-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6); }
.subhero .crumbs { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); color: var(--fg-3); margin-bottom: var(--sp-5); }
.subhero .crumbs a { color: var(--fg-3); text-decoration: none; }
.subhero .crumbs a:hover { color: var(--accent); }
.subhero .crumbs .sep { color: var(--fg-4); }
.subhero h1 { font-size: clamp(36px, 4.8vw, 60px); line-height: 1.05; max-width: 880px; margin-bottom: var(--sp-5); }
.subhero h1 .hl { background: linear-gradient(transparent 60%, var(--accent-bg) 60%); }
.subhero .lead { font-size: clamp(18px, 1.3vw, 21px); line-height: 1.55; color: var(--fg-2); max-width: 760px; text-wrap: pretty; }
.subhero .eyebrow-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 14px;
  border: 1px solid var(--border-accent);
  border-radius: var(--r-pill);
  background: var(--accent-bg);
  font-size: var(--fs-xs); font-weight: var(--fw-sem); color: var(--accent);
  margin-bottom: var(--sp-6); letter-spacing: 0.02em;
}
.subhero .eyebrow-pill .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 999px; }

/* ============ Section headers (in-page) ============ */
.sect-head { margin-bottom: var(--sp-10); max-width: 760px; }
.sect-head .fnd-eyebrow { display: block; margin-bottom: var(--sp-3); }
.sect-head h2 { margin-bottom: var(--sp-3); }
.sect-head p { font-size: var(--fs-md); color: var(--fg-2); }

/* ============ Cards (generic) ============ */
.card {
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: all var(--dur-base) var(--ease-standard);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
}
a.card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ============ Product preview block ============ */
.product-preview {
  background: var(--bg-1);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  padding: var(--sp-20) 0;
}
.product-preview .sect-head { text-align: left; margin-bottom: var(--sp-8); }
.product-shell {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-indigo), var(--shadow-lg);
  background: var(--bg-0);
  padding-top: 38px;
}
.product-shell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 38px;
  background:
    radial-gradient(circle at 18px 19px, #FF5F57 5.5px, transparent 6.5px),
    radial-gradient(circle at 38px 19px, #FEBC2E 5.5px, transparent 6.5px),
    radial-gradient(circle at 58px 19px, #28C840 5.5px, transparent 6.5px),
    linear-gradient(180deg, #F8F9FB, #EEF1F5);
  border-bottom: 1px solid var(--border-1);
  z-index: 1;
}
.product-shell .label {
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-pill);
  padding: 3px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-med);
  color: var(--fg-2);
  letter-spacing: 0.02em;
  text-transform: none;
  z-index: 2;
  white-space: nowrap;
  max-width: calc(100% - 200px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-shell img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.94;
}

/* ============ CTA Band ============ */
.cta-band {
  background: var(--fg-1);
  color: var(--fg-inverse);
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute; bottom: -300px; left: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(99,102,241,0.30) 0%, transparent 60%);
  pointer-events: none;
}
.cta-inner {
  position: relative; max-width: 880px; margin: 0 auto;
  padding: var(--sp-20) var(--sp-6); text-align: center;
}
.cta-band h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: var(--track-tight);
  color: var(--fg-inverse); margin-bottom: var(--sp-3);
}
.cta-band p { font-size: var(--fs-md); color: var(--fnd-slate-300); margin-bottom: var(--sp-8); }

/* ============ Footer ============ */
.footer { background: var(--bg-0); border-top: 1px solid var(--border-1); padding: var(--sp-16) 0 var(--sp-8); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-8); margin-bottom: var(--sp-12); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-col h4 { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-sem); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--fg-3); margin-bottom: var(--sp-4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--sp-2); }
.footer-col a { color: var(--fg-2); font-size: var(--fs-sm); transition: color var(--dur-fast) var(--ease-standard); }
.footer-col a:hover { color: var(--accent); }
.footer-brand-block .nav-brand { margin-bottom: var(--sp-4); }
.footer-brand-block p { font-size: var(--fs-sm); color: var(--fg-3); line-height: 1.55; max-width: 320px; }
.footer-bottom { padding-top: var(--sp-6); border-top: 1px solid var(--border-1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--fg-3); }
.footer-disclaimer { max-width: 720px; line-height: 1.55; }

/* ============ Section header ============ */
.bg-tinted { background: var(--bg-1); }

/* ============ Foundation statement (dark band) ============ */
.stats { background: var(--fg-1); color: var(--fg-inverse); padding: var(--sp-12) 0; }
.foundation { max-width: 880px; }
.foundation .fnd-eyebrow { display: block; margin-bottom: var(--sp-3); color: var(--accent-soft); }
.foundation h2 { color: var(--fg-inverse); font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 var(--sp-4); }
.foundation p { color: var(--fnd-slate-300); font-size: var(--fs-md); line-height: 1.6; max-width: 780px; margin: 0; }

/* ============ Status pills (agent stack) ============ */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: var(--fw-med);
  letter-spacing: 0.02em;
  border: 1px solid transparent; white-space: nowrap;
}
.status-pill .sdot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.status-pill--production { background: var(--fnd-positive-bg); color: #047857; border-color: var(--fnd-positive-border); }
.status-pill--build { background: var(--fnd-warning-bg); color: #B45309; border-color: var(--fnd-warning-border); }
.status-pill--roadmap { background: var(--bg-2); color: var(--fg-3); border-color: var(--border-2); }

/* ============ Agent stack ============ */
.agent-band { margin-top: var(--sp-12); }
.agent-band:first-of-type { margin-top: 0; }
.agent-band-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.agent-band-head .ab-label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--accent); font-weight: var(--fw-sem); white-space: nowrap; }
.agent-band-head .ab-rule { flex: 1; height: 1px; background: var(--border-1); }
.agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .agent-grid { grid-template-columns: 1fr; } }
.agent-card { background: var(--bg-0); border: 1px solid var(--border-1); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.agent-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-1); }
.agent-card .ac-num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3); }
.agent-card .ac-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: var(--track-snug); color: var(--fg-1); margin: 0; }
.agent-card .ac-desc { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.6; margin: 0; }
.agents-foot { margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid var(--border-1); font-size: var(--fs-sm); color: var(--fg-3); max-width: 720px; }

/* ============ Proof / metric strip ============ */
.proof-nums { display: flex; flex-wrap: wrap; gap: var(--sp-10); margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid var(--border-1); }
.proof-num { display: flex; flex-direction: column; gap: 2px; }
.proof-num .pv { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-2xl); color: var(--accent); letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; }
.proof-num .pl { font-size: var(--fs-sm); color: var(--fg-3); max-width: 200px; }

/* ============ Roles / proof cards ============ */
.roles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 1024px) { .roles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .roles-grid { grid-template-columns: 1fr; } }
.role-card { background: var(--bg-0); border: 1px solid var(--border-1); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; }
.role-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); letter-spacing: var(--track-snug); margin-bottom: var(--sp-2); }
.role-pain { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.55; flex: 1; }

/* ============ Deploy / who-it's-for cards ============ */
.deploy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) { .deploy-grid { grid-template-columns: 1fr; } }
.deploy-card { background: var(--bg-0); border: 1px solid var(--border-1); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); transition: all var(--dur-base) var(--ease-standard); }
.deploy-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.deploy-icon { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--accent-bg); border: 1px solid var(--border-accent); display: grid; place-items: center; margin-bottom: var(--sp-2); }
.deploy-icon svg { width: 22px; height: 22px; color: var(--accent); }
.deploy-card h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: var(--track-snug); margin: 0; color: var(--fg-1); }
.deploy-card p { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.6; margin: 0; flex: 1; }
.deploy-bullets { list-style: none; padding: var(--sp-3) 0 0; margin: var(--sp-3) 0 0; border-top: 1px solid var(--border-1); display: flex; flex-direction: column; gap: var(--sp-1); }
.deploy-bullets li { font-size: var(--fs-xs); color: var(--fg-3); padding: 3px 0; display: flex; align-items: center; gap: var(--sp-2); }
.deploy-bullets li::before { content: ''; width: 4px; height: 4px; background: var(--accent); border-radius: 999px; flex-shrink: 0; }

/* ============ Convergence diagram ============ */
.convergence { position: relative; width: 100%; max-width: 1060px; margin: var(--sp-12) auto 0; aspect-ratio: 1120 / 600; }
@media (max-width: 768px) { .convergence { aspect-ratio: 1 / 1.2; margin-top: var(--sp-10); } }
.conv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.conv-line { fill: none; stroke: var(--fnd-slate-300); stroke-width: 1.1; vector-effect: non-scaling-stroke; opacity: .55; }
.conv-flow { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 2.5 11; stroke-linecap: round; opacity: .9; animation: convFlow 2.6s linear infinite; }
@keyframes convFlow { to { stroke-dashoffset: -135; } }
.conv-chip { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; background: var(--bg-0); border: 1px solid var(--border-1); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); font-size: 12.5px; font-weight: var(--fw-med); color: var(--fg-2); white-space: nowrap; animation: chipFloat 6s ease-in-out infinite; }
.conv-chip svg { width: 13px; height: 13px; color: var(--fg-4); flex-shrink: 0; }
@keyframes chipFloat { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 5px)); } }
.conv-slab { position: absolute; left: 3%; right: 3%; bottom: 1%; height: 18%; min-height: 78px; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--fnd-indigo-600), var(--fnd-indigo-500)); box-shadow: var(--shadow-indigo), var(--shadow-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #fff; text-align: center; padding: 0 var(--sp-6); overflow: hidden; }
.conv-slab::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); opacity: .55; }
.conv-slab .cs-label { position: relative; font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(17px, 2vw, 24px); letter-spacing: var(--track-snug); }
.conv-slab .cs-sub { position: relative; font-size: 11.5px; color: #DDE3FF; font-weight: var(--fw-sem); letter-spacing: .12em; text-transform: uppercase; }

/* ============ Lifecycle spine ============ */
.lifecycle { position: relative; max-width: 900px; margin: var(--sp-12) auto 0; }
.ssot-bar { position: relative; z-index: 2; max-width: 540px; margin: 0 auto; padding: var(--sp-4) var(--sp-6); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--fnd-indigo-600), var(--fnd-indigo-500)); color: #fff; text-align: center; box-shadow: var(--shadow-indigo); }
.ssot-bar .ssb-t { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-lg); letter-spacing: var(--track-snug); }
.ssot-bar .ssb-s { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: #DDE3FF; margin-top: 3px; font-weight: var(--fw-sem); }
.lifecycle::before { content: ''; position: absolute; top: 76px; bottom: 52px; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(var(--accent), var(--accent-soft) 70%, var(--border-2)); }
.lifecycle::after { content: ''; position: absolute; top: 76px; bottom: 52px; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, var(--accent), transparent); background-size: 2px 26px; background-repeat: no-repeat; animation: spineFlow 2.8s linear infinite; }
@keyframes spineFlow { 0% { background-position: 50% -30px; } 100% { background-position: 50% calc(100% + 30px); } }
.life-band-label { position: relative; z-index: 2; width: max-content; margin: var(--sp-8) auto var(--sp-3); padding: 4px 14px; background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--accent); font-weight: var(--fw-sem); }
.life-stage { position: relative; display: flex; align-items: center; margin: var(--sp-4) 0; min-height: 78px; }
.life-stage.left { justify-content: flex-start; }
.life-stage.right { justify-content: flex-end; }
.life-node { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--bg-0); border: 2px solid var(--accent); z-index: 2; box-shadow: 0 0 0 5px var(--bg-1); }
.lc-connector { position: absolute; top: 50%; height: 2px; width: 42px; background: var(--border-2); }
.life-stage.left .lc-connector { left: calc(50% - 42px); }
.life-stage.right .lc-connector { right: calc(50% - 42px); }
.lc-card { width: calc(50% - 48px); background: var(--bg-0); border: 1px solid var(--border-1); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.lc-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.lc-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: var(--track-snug); color: var(--fg-1); margin: 0; }
.lc-desc { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.55; margin: 0; }
.life-end { position: relative; z-index: 2; width: max-content; max-width: 90%; margin: var(--sp-5) auto 0; padding: 9px 18px; border-radius: var(--r-pill); background: var(--fnd-positive-bg); color: #047857; border: 1px solid var(--fnd-positive-border); font-size: var(--fs-sm); font-weight: var(--fw-sem); text-align: center; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 768px) {
  .lifecycle::before, .lifecycle::after { left: 21px; }
  .life-stage { justify-content: flex-end !important; }
  .lc-card { width: calc(100% - 54px); }
  .life-node { left: 21px; }
  .lc-connector { width: 32px; left: 21px !important; right: auto !important; }
  .conv-chip { font-size: 11px; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .conv-flow, .conv-chip, .lifecycle::after, .fchip { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============ Hero showcase (product UI + floating chips) ============ */
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.showcase { position: relative; max-width: 1040px; margin: var(--sp-12) auto 0; }
.showcase-frame { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-1); box-shadow: var(--shadow-indigo), var(--shadow-lg); background: var(--bg-0); padding-top: 38px; }
.showcase-frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 38px; background: radial-gradient(circle at 18px 19px, #FF5F57 5.5px, transparent 6.5px), radial-gradient(circle at 38px 19px, #FEBC2E 5.5px, transparent 6.5px), radial-gradient(circle at 58px 19px, #28C840 5.5px, transparent 6.5px), linear-gradient(180deg, #F8F9FB, #EEF1F5); border-bottom: 1px solid var(--border-1); z-index: 1; }
.showcase-frame .sf-label { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); background: var(--bg-0); border: 1px solid var(--border-1); border-radius: var(--r-pill); padding: 3px 14px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); z-index: 2; white-space: nowrap; }
.showcase-frame img { display: block; width: 100%; height: auto; }
.fchip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-0); border: 1px solid var(--border-1); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); max-width: 240px; animation: floatY 5s ease-in-out infinite; }
.fchip .fc-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.fchip .fc-ic svg { width: 16px; height: 16px; }
.fchip .fc-ic.ok { background: var(--fnd-positive-bg); color: #047857; }
.fchip .fc-ic.warn { background: var(--fnd-warning-bg); color: #B45309; }
.fchip .fc-ic.idx { background: var(--accent-bg); color: var(--accent); }
.fchip .fc-t { font-size: 13px; font-weight: var(--fw-sem); color: var(--fg-1); line-height: 1.25; }
.fchip .fc-s { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.fchip-tl { top: 9%; left: -4%; } .fchip-tr { top: 20%; right: -5%; } .fchip-bl { bottom: 16%; left: -5%; } .fchip-br { bottom: 8%; right: -3%; }
@media (max-width: 1100px) { .fchip-tl { left: 0; } .fchip-tr { right: 0; } .fchip-bl { left: 0; } .fchip-br { right: 0; } }
@media (max-width: 760px) { .fchip { max-width: 175px; padding: 8px 10px; } .fchip-tr, .fchip-bl { display: none; } }

/* ============ Pinned-scroll storytelling ============ */
.pinned-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: start; }
@media (max-width: 900px) { .pinned-grid { grid-template-columns: 1fr; gap: var(--sp-8); } }
.pinned-media { position: sticky; top: 100px; }
@media (max-width: 900px) { .pinned-media { position: relative; top: 0; } }
.pinned-stage { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-1); box-shadow: var(--shadow-indigo), var(--shadow-lg); background: var(--bg-0); aspect-ratio: 16 / 10; }
.pinned-vis { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease-standard); }
.pinned-vis.active { opacity: 1; }
.pinned-vis img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pinned-cap { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--border-1); border-radius: var(--r-pill); padding: 6px 13px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-1); }
.pinned-steps { display: flex; flex-direction: column; }
.pstep { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .4s var(--ease-standard); }
@media (max-width: 900px) { .pstep { min-height: 0; opacity: 1; padding: var(--sp-6) 0; } }
.pstep.active { opacity: 1; }
.pstep .ps-band { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--accent); font-weight: var(--fw-sem); margin-bottom: var(--sp-3); }
.pstep h3 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(26px, 3vw, 38px); letter-spacing: var(--track-tight); margin: 0 0 var(--sp-3); color: var(--fg-1); }
.pstep p { font-size: var(--fs-md); color: var(--fg-2); line-height: 1.6; max-width: 460px; margin: 0; }

/* ============ Big stat callout + floating mini shots ============ */
.bigstat { position: relative; text-align: center; padding: var(--sp-16) 0; overflow: hidden; }
.bigstat .bs-line { font-family: var(--font-serif); font-weight: 600; font-size: clamp(30px, 4.6vw, 56px); letter-spacing: var(--track-tight); line-height: 1.06; color: var(--fg-1); max-width: 780px; margin: 0 auto; position: relative; z-index: 2; }
.bigstat .bs-line em { font-style: normal; color: var(--accent); }
.bigstat .bs-sub { margin: var(--sp-5) auto 0; max-width: 560px; color: var(--fg-2); font-size: var(--fs-md); position: relative; z-index: 2; }
.mini-shot { position: absolute; width: 190px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-1); box-shadow: var(--shadow-lg); z-index: 1; }
.mini-shot img { display: block; width: 100%; height: auto; }
.mini-shot.ms1 { top: 8%; left: 1%; transform: rotate(-5deg); }
.mini-shot.ms2 { bottom: 8%; right: 1%; transform: rotate(5deg); }
@media (max-width: 1000px) { .mini-shot { display: none; } }

/* ============ Data hub (sources → central layer) ============ */
.hub { position: relative; width: 100%; max-width: 920px; margin: var(--sp-12) auto 0; aspect-ratio: 1 / 0.74; }
@media (max-width: 768px) { .hub { aspect-ratio: 1 / 1.05; } }
.hub-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-line { fill: none; stroke: var(--fnd-slate-300); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .5; }
.hub-flow { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 2 10; stroke-linecap: round; opacity: .85; animation: convFlow 2.6s linear infinite; }
.hub-node { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: var(--bg-0); border: 1px solid var(--border-1); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); font-size: 12.5px; font-weight: var(--fw-med); color: var(--fg-2); white-space: nowrap; z-index: 2; animation: floatY 6s ease-in-out infinite; }
.hub-node svg { width: 13px; height: 13px; color: var(--fg-4); flex-shrink: 0; }
.hub-node.ext { border-style: dashed; color: var(--fg-3); }
.hub-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(40%, 320px); aspect-ratio: 1.7 / 1; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--fnd-indigo-600), var(--fnd-indigo-500)); box-shadow: var(--shadow-indigo), var(--shadow-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #fff; text-align: center; padding: 0 var(--sp-4); overflow: hidden; }
.hub-core::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size: 20px 20px; opacity: .5; }
.hub-core .hc-label { position: relative; font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(15px, 1.8vw, 21px); letter-spacing: var(--track-snug); line-height: 1.1; }
.hub-core .hc-sub { position: relative; font-size: 11px; color: #DDE3FF; font-weight: var(--fw-sem); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
@media (max-width: 768px) { .hub-node { font-size: 10.5px; padding: 5px 9px; gap: 5px; } .hub-core { width: 50%; } }
@media (prefers-reduced-motion: reduce) { .hub-flow, .hub-node { animation: none !important; } }

/* ============ Dark hero (Palantir-style) ============ */
.hero-dark { position: relative; overflow: hidden; background: #07080C; color: #F6F8FB; padding: 88px 0 64px; }
.hero-dark .hd-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 26%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 80% 60% at 50% 26%, #000 30%, transparent 78%); }
.hero-dark .hd-glow { position: absolute; top: -260px; left: 50%; transform: translateX(-50%); width: 1100px; height: 760px; pointer-events: none; background: radial-gradient(circle at 50% 40%, rgba(99,102,241,0.30), rgba(99,102,241,0.06) 38%, transparent 66%); filter: blur(8px); }
.hero-dark .hd-inner { position: relative; max-width: 1000px; margin: 0 auto; padding: 0 var(--sp-6); text-align: center; }
.hero-dark .crumbs { justify-content: center; color: var(--fnd-slate-500); margin-bottom: var(--sp-5); }
.hero-dark .crumbs a { color: var(--fnd-slate-500); }
.hero-dark .crumbs a:hover { color: var(--accent-soft); }
.hero-dark .hd-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-soft); border: 1px solid rgba(129,140,248,0.28); background: rgba(129,140,248,0.07); padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 30px; }
.hero-dark .hd-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent-soft); box-shadow: 0 0 10px var(--accent-soft); }
.hero-dark h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(46px, 7vw, 84px); line-height: 1.02; letter-spacing: -0.02em; color: #F6F8FB; max-width: 16ch; margin: 0 auto; }
.hero-dark h1 .gl, .hero-dark h1 .hl { color: var(--accent-soft); font-style: italic; font-weight: 500; background: none; }
.hero-dark .hd-sub { margin: 28px auto 0; max-width: 660px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: #9AA4B4; }
.hero-dark .hd-ctas { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.hero-dark .btn-ghost { color: #F6F8FB; border: 1px solid rgba(255,255,255,0.18); background: transparent; }
.hero-dark .btn-ghost:hover { border-color: var(--accent-soft); color: var(--accent-soft); }
.hero-dark .hd-stage { position: relative; max-width: 1040px; margin: 64px auto 0; padding: 0 var(--sp-6); perspective: 2000px; }
.hero-dark .hd-stage-glow { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); width: 80%; height: 80%; background: radial-gradient(ellipse at center, rgba(99,102,241,0.34), transparent 62%); filter: blur(30px); pointer-events: none; }
.hero-dark .hd-frame { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: #0E1018; box-shadow: 0 50px 120px rgba(0,0,0,0.6); transform: rotateX(7deg) scale(0.99); transform-origin: center top; }
.hero-dark .hd-frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 40px; z-index: 2; background: radial-gradient(circle at 20px 20px, #FF5F57 5px, transparent 6px), radial-gradient(circle at 40px 20px, #FEBC2E 5px, transparent 6px), radial-gradient(circle at 60px 20px, #28C840 5px, transparent 6px), linear-gradient(180deg, #1A1D27, #12141C); border-bottom: 1px solid rgba(255,255,255,0.08); }
.hero-dark .hd-frame .tab { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); z-index: 3; font-family: var(--font-mono); font-size: 11px; color: #6B7587; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 3px 14px; border-radius: var(--r-pill); }
.hero-dark .hd-frame img { display: block; width: 100%; height: auto; margin-top: 40px; }
.hero-dark .hd-frame .veil { position: absolute; inset: 40px 0 0; background: linear-gradient(180deg, transparent 60%, rgba(7,8,12,0.55)); pointer-events: none; }
.hero-dark .hd-sources { position: relative; max-width: 1040px; margin: 44px auto 0; padding: 0 var(--sp-6); text-align: center; }
.hero-dark .hd-sources .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #6B7587; margin-bottom: 16px; }
.hero-dark .hd-sources .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; font-family: var(--font-mono); font-size: 13px; color: #9AA4B4; }
.hero-dark .hd-sources .row .sep { color: var(--accent-soft); opacity: 0.7; }
@media (max-width: 768px) { .hero-dark .hd-frame { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-dark .hd-frame { transform: none; } }

/* Dark-hero pages: nav is dark over the hero, flips to solid light on scroll */
body.has-dark-hero .nav { background: #07080C; border-bottom-color: rgba(255,255,255,0.06); transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
body.has-dark-hero .nav .nav-brand .word { color: #fff; }
body.has-dark-hero .nav .nav-trigger { color: rgba(255,255,255,0.78); }
body.has-dark-hero .nav .nav-trigger:hover { color: #fff; }
body.has-dark-hero .nav.scrolled { background: rgba(255,255,255,0.92); border-bottom-color: var(--border-1); }
body.has-dark-hero .nav.scrolled .nav-brand .word { color: var(--fnd-ink); }
body.has-dark-hero .nav.scrolled .nav-trigger { color: var(--fg-2); }
body.has-dark-hero .nav.scrolled .nav-trigger:hover { color: var(--fg-1); }


/* ============ Data hub v2 (SVG, real logos) ============ */
.hx-wrap { max-width: 940px; margin: var(--sp-12) auto 0; }
.hx-svg { width: 100%; height: auto; overflow: visible; }
.hx-lk { fill: none; stroke: #CBD5E1; stroke-width: 1.2; opacity: .7; }
.hx-lk.ext { stroke: #C7D2FE; stroke-dasharray: 5 5; }
.hx-dot { fill: #6366F1; }
.hx-nt { font-family: var(--font-sans); font-size: 15px; font-weight: 500; fill: #334155; dominant-baseline: middle; }
.hx-node rect { filter: drop-shadow(0 2px 6px rgba(15,23,42,.07)); }
.hx-grp { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; fill: #94A3B8; text-anchor: middle; }
.hx-cl { font-family: var(--font-display); font-weight: 800; font-size: 20px; fill: #fff; text-anchor: middle; }
.hx-cs { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; fill: #DDE3FF; text-anchor: middle; }



/* ============ Hero live product motion ============ */
.pm{position:relative;padding:54px 22px 22px;color:#C7D0DD;background:radial-gradient(1100px 360px at 50% -8%,rgba(99,102,241,.12),transparent 60%),#0E1018;font-family:var(--font-sans)}
.pm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.pm-title{font-family:var(--font-display);font-weight:700;font-size:15px;color:#EAEEF5}
.pm-title small{display:block;font-family:var(--font-mono);font-weight:400;font-size:10.5px;color:#5C6577;letter-spacing:.04em;margin-top:3px}
.pm .live{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#C7D0DD;background:#14161F;border:1px solid rgba(255,255,255,.08);padding:6px 12px;border-radius:999px}
.pm .live .d{width:7px;height:7px;border-radius:999px;background:#34D399;animation:pmpulse 2.2s ease-out infinite}
@keyframes pmpulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.45)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.pm .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.pm .kpi{background:#14161F;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px 13px}
.pm .kpi .l{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5C6577}
.pm .kpi .v{font-family:var(--font-display);font-weight:800;font-size:21px;color:#EAEEF5;margin-top:6px;font-variant-numeric:tabular-nums}
.pm .kpi .v.flagv{color:#F59E0B}
.pm .kpi .dlt{font-size:11px;color:#34D399;margin-top:2px}
.pm .cols{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
.pm .panel{background:#14161F;border:1px solid rgba(255,255,255,.08);border-radius:10px;overflow:hidden}
.pm .ph{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-bottom:1px solid rgba(255,255,255,.08);font-size:11px;color:#8A93A5}
.pm .ph .mono{font-family:var(--font-mono);font-size:10px;color:#5C6577}
.pm table{width:100%;border-collapse:collapse;font-size:12px}
.pm th{font-family:var(--font-mono);font-weight:400;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#5C6577;text-align:left;padding:8px 13px}
.pm td{padding:9px 13px;border-top:1px solid rgba(255,255,255,.08);color:#C7D0DD;font-variant-numeric:tabular-nums}
.pm tr.row{transition:background .5s}
.pm tr.row.flag{background:rgba(248,113,113,.10)}
.pm .st{display:inline-flex;align-items:center;gap:6px;font-size:11px}
.pm .st .dot{width:6px;height:6px;border-radius:999px}
.pm .st.cur{color:#8A93A5}.pm .st.cur .dot{background:#8A93A5}
.pm .st.perf{color:#34D399}.pm .st.perf .dot{background:#34D399}
.pm .st.watch{color:#F59E0B}.pm .st.watch .dot{background:#F59E0B}
.pm .st.dng{color:#F87171}.pm .st.dng .dot{background:#F87171}
.pm .row .st-flag{display:none}
.pm .row.flag .st-cur{display:none}
.pm .row.flag .st-flag{display:inline-flex}
.pm .bid{padding:14px 13px}
.pm .bid .row1{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#C7D0DD;margin-bottom:10px}
.pm .bar{height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;position:relative}
.pm .bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,#818CF8,#A5B4FC);transition:width 2.2s cubic-bezier(.4,0,.2,1)}
.pm .bid.fill .bar i{width:100%}
.pm .bidready{display:none;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:#34D399}
.pm .bid.ready .bidready{display:flex}
.pm .bid.ready .barwrap{display:none}
.pm .bid .meta{font-family:var(--font-mono);font-size:10px;color:#5C6577;margin-top:10px}
.pm .chk{width:18px;height:18px;border-radius:999px;background:rgba(52,211,153,.15);display:grid;place-items:center}
.pm .chk svg{width:11px;height:11px;color:#34D399}
.hd-frame .toast{position:absolute;right:18px;top:58px;z-index:6;display:flex;align-items:center;gap:10px;background:#191b25;border:1px solid rgba(248,113,113,.4);border-radius:10px;padding:10px 13px;box-shadow:0 16px 40px rgba(0,0,0,.5);opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .4s,transform .4s;max-width:280px}
.hd-frame .toast.in{opacity:1;transform:translateY(0) scale(1)}
.hd-frame .toast .ic{width:28px;height:28px;border-radius:8px;background:rgba(248,113,113,.16);display:grid;place-items:center;flex-shrink:0}
.hd-frame .toast .ic svg{width:15px;height:15px;color:#F87171}
.hd-frame .toast .t{font-size:12.5px;font-weight:600;color:#EAEEF5;line-height:1.25}
.hd-frame .toast .s{font-size:11px;color:#8A93A5;margin-top:1px}
@media (max-width:768px){.pm .kpis{grid-template-columns:repeat(2,1fr)}.pm .cols{grid-template-columns:1fr}.hd-frame .toast{display:none}}
@media (prefers-reduced-motion: reduce){.pm .live .d{animation:none}.pm .bar i{transition:none}.hd-frame .toast{transition:none}}