/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  --black:  #06120b;
  --black2: #09170e;
  --black3: #0d2016;
  --black4: #17351f;
  --black5: #214729;

  --green:      #1fdf78;
  --green2:     #18c867;
  --green3:     #136f3d;
  --green-dim:  rgba(31,223,120,0.10);
  --green-bdr:  rgba(31,223,120,0.28);

  --lime:       #baf315;
  --lime2:      #d9ff4f;
  --lime3:      #8ec90f;
  --lime-dim:   rgba(186,243,21,0.14);
  --lime-bdr:   rgba(186,243,21,0.32);

  --yellow:     #ffb547;
  --yellow2:    #ffd36a;
  --yellow3:    #d48318;
  --yellow-dim: rgba(255,181,71,0.12);
  --yellow-bdr: rgba(255,181,71,0.30);

  --white:     #ffffff;
  --off-white: #f7fbef;
  --cream:     #f5faee;
  --cream2:    #edf7df;
  --mist:      #e6edf7;
  --ink:       #08170f;
  --ink2:      #142b1d;
  --gray:      #536579;
  --gray2:     #738498;
  --gray3:     #8795a8;

  --bdr:  rgba(13,38,24,0.14);
  --bdr2: rgba(13,38,24,0.08);

  --display: 'Bebas Neue', sans-serif;
  --serif:   'Playfair Display', Georgia, serif;
  --body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:    'JetBrains Mono', monospace;

  --r6: 6px; --r10: 10px; --r14: 14px; --r20: 20px; --r28: 28px;
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  font-family: var(--body);
  background: var(--black);
  color: var(--off-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "rlig" 1;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 54% at 6% 0%, rgba(25,230,121,0.18), transparent 62%),
    radial-gradient(ellipse 60% 48% at 96% 10%, rgba(240,196,75,0.14), transparent 60%),
    radial-gradient(ellipse 55% 42% at 54% 100%, rgba(88,166,255,0.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.015), transparent 34%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* ═══════════════════════════════════════════
   CONTAINER & SECTION UTILITIES
═══════════════════════════════════════════ */
section { position: relative; z-index: 1; }
section[id] { scroll-margin-top: 96px; }
.container {
  width: min(1560px, calc(100% - 72px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--green);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.eyebrow-gold { color: var(--yellow); }

.section-title {
  font-family: var(--body);
  font-weight: 700;
  font-size: 52px;
  letter-spacing: -0.030em;
  line-height: 1.08;
  color: var(--white);
}
.section-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--green);
  letter-spacing: -0.008em;
}

.section-body {
  font-size: 17.5px;
  color: var(--gray);
  line-height: 1.78;
  font-weight: 400;
  max-width: 680px;
  margin-top: 20px;
}

/* SCROLL REVEAL */
.reveal       { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(.23,1,.32,1), transform 0.65s cubic-bezier(.23,1,.32,1); }
.reveal-left  { opacity: 0; transform: translateX(-36px); transition: opacity 0.65s cubic-bezier(.23,1,.32,1), transform 0.65s cubic-bezier(.23,1,.32,1); }
.reveal-right { opacity: 0; transform: translateX(36px);  transition: opacity 0.65s cubic-bezier(.23,1,.32,1), transform 0.65s cubic-bezier(.23,1,.32,1); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 46px;
  background: rgba(4,7,10,0.84);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: padding 0.3s, background 0.3s;
}
nav.scrolled { padding: 12px 46px; background: rgba(4,7,10,0.97); }

.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo-mark {
  width: 32px; height: 32px; border-radius: 7px;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 17px; color: var(--black);
  letter-spacing: 0;
}
.nav-logo-text {
  font-family: var(--display);
  font-size: 22px; letter-spacing: 2px; color: var(--white);
}
.nav-logo-text span { color: var(--green); }

.nav-links { display: flex; align-items: center; gap: 20px; list-style: none; }
.nav-links a {
  color: var(--gray2); text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  transition: color 0.2s; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px; background: var(--green); transition: width 0.25s;
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(186,243,21,0.16);
}

.nav-cta {
  background: var(--green); color: var(--black);
  padding: 10px 22px; border-radius: 6px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.03em;
  text-decoration: none; text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
}
.nav-cta:hover { background: var(--green2); transform: translateY(-1px); }

/* Hamburger */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--off-white); border-radius: 2px;
  transition: all 0.25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-menu {
  display: none; position: fixed; top: 64px; left: 0; right: 0;
  background: rgba(4,7,10,0.98);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--bdr);
  padding: 24px 32px 32px; z-index: 499;
  flex-direction: column; gap: 4px;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a {
  color: var(--gray); text-decoration: none; font-size: 16px; font-weight: 500;
  padding: 12px 0; border-bottom: 1px solid var(--bdr2); transition: color 0.2s;
}
.nav-mobile-menu a:hover { color: var(--green); }
.nav-mobile-menu .nav-mobile-cta {
  margin-top: 16px; background: var(--green); color: var(--black);
  padding: 13px 24px; border-radius: 8px; text-align: center;
  font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em;
  border: none; border-bottom: none;
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: var(--black);
  padding: 15px 34px; border-radius: 8px;
  font-size: 14px; font-weight: 800; letter-spacing: 0.02em;
  text-decoration: none; text-transform: uppercase;
  border: none; cursor: pointer; font-family: var(--body);
  transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--green2); transform: translateY(-2px); }
.btn-primary.btn-gold { background: var(--yellow); }
.btn-primary.btn-gold:hover { background: var(--yellow3); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--off-white);
  padding: 15px 34px; border-radius: 8px;
  font-size: 14px; font-weight: 650;
  text-decoration: none; border: 1px solid var(--bdr);
  cursor: pointer; transition: all 0.2s; font-family: var(--body);
}
.btn-ghost:hover { border-color: var(--green-bdr); background: var(--green-dim); color: var(--white); }

.btn-sm { padding: 10px 22px; font-size: 12.5px; }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 128px 0 84px;
  position: relative; overflow: hidden;
}

.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,229,102,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,102,0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 40%, black 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 80% at 30% 40%, black 0%, transparent 100%);
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(500px, 1.05fr);
  gap: 72px;
  align-items: center;
}

.hero-left { max-width: 720px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--green-bdr);
  background: var(--green-dim);
  padding: 7px 18px; border-radius: 100px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--green); letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 36px;
  animation: fadeSlideUp 0.6s cubic-bezier(.23,1,.32,1) both;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.6); } }

.hero-h1 {
  font-family: var(--body);
  font-weight: 700;
  font-size: 92px;
  letter-spacing: -0.035em;
  line-height: 0.96;
  color: var(--white);
  margin-bottom: 28px;
  animation: fadeSlideUp 0.6s 0.08s cubic-bezier(.23,1,.32,1) both;
}
.hero-h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(125deg, var(--green) 15%, var(--yellow2) 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.01em;
}

.hero-sub {
  font-size: 19.5px;
  color: rgba(220,235,225,0.72);
  line-height: 1.76;
  font-weight: 400;
  max-width: 680px;
  margin-bottom: 40px;
  letter-spacing: -0.003em;
  animation: fadeSlideUp 0.6s 0.16s cubic-bezier(.23,1,.32,1) both;
}

.hero-ctas {
  display: flex; gap: 12px;
  margin-bottom: 32px;
  animation: fadeSlideUp 0.6s 0.22s cubic-bezier(.23,1,.32,1) both;
  flex-wrap: wrap;
}

.hero-cite {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--gray3);
  letter-spacing: 0.03em;
  animation: fadeSlideUp 0.6s 0.28s cubic-bezier(.23,1,.32,1) both;
}
.hero-cite strong {
  color: var(--green);
  font-size: 15px;
}
.hero-cite span { color: var(--gray3); white-space: nowrap; }

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

/* ── Hero Data Panel ── */
.hero-right {
  animation: fadeSlideUp 0.7s 0.3s cubic-bezier(.23,1,.32,1) both;
}

.hero-data-panel {
  background: var(--black3);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  padding: 30px 34px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
  position: relative; overflow: hidden;
}
.hero-data-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,102,0.3), transparent);
}

.hdp-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.hdp-title {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--gray2); text-transform: uppercase; letter-spacing: 0.12em;
}
.hdp-live {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--green);
}
.hdp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); animation: pulse 2s infinite; flex-shrink: 0;
}
.hdp-study {
  font-family: var(--mono); font-size: 11px; color: var(--gray3);
  margin-bottom: 20px; letter-spacing: 0.04em;
}

.hdp-rows { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.hdp-row { display: grid; grid-template-columns: 46px 1fr 1.25fr; gap: 14px; align-items: center; }
.hdp-count {
  font-family: var(--display); font-size: 28px; color: var(--off-white);
  line-height: 1; letter-spacing: 0.5px;
}
.hdp-count.hdp-green { color: var(--green); }
.hdp-stage {
  font-size: 14px; color: var(--gray); font-weight: 650;
}
.hdp-track {
  height: 5px; background: rgba(255,255,255,0.06);
  border-radius: 3px; overflow: hidden;
}
.hdp-fill {
  height: 100%; border-radius: 3px;
  background: rgba(255,255,255,0.22);
  transition: width 1.2s cubic-bezier(.23,1,.32,1);
}
.hdp-fill.hdp-fill-green { background: var(--green); }

/* Bar widths via nth-child — no inline styles needed */
.hdp-row:nth-child(1) .hdp-fill { width: 100%; }
.hdp-row:nth-child(2) .hdp-fill { width: 72%; }
.hdp-row:nth-child(3) .hdp-fill { width: 55%; }
.hdp-row:nth-child(4) .hdp-fill { width: 22%; }
.hdp-row:nth-child(5) .hdp-fill { width: 12%; }

.hdp-divider {
  height: 1px; background: var(--bdr); margin-bottom: 18px;
}
.hdp-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px;
}
.hdp-metric { text-align: center; }
.hdp-mval {
  display: block;
  font-family: var(--display); font-size: 30px; color: var(--white);
  line-height: 1; letter-spacing: 0.5px;
}
.hdp-mval.hdp-mval-warn { color: var(--yellow); }
.hdp-mlabel {
  display: block;
  font-family: var(--mono); font-size: 10.5px; color: var(--gray3);
  margin-top: 5px; text-transform: uppercase; letter-spacing: 0.06em;
}
.hdp-footer {
  font-family: var(--mono); font-size: 10.5px; color: var(--gray3);
  text-align: center; letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════
   TICKER
═══════════════════════════════════════════ */
.ticker-wrap {
  border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr);
  overflow: hidden; padding: 15px 0;
  background: rgba(0,229,102,0.015);
  position: relative; z-index: 2;
  contain: layout paint;
}
.ticker-track {
  display: flex; gap: 56px; width: max-content;
  animation: ticker 60s linear infinite; white-space: nowrap;
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--gray2); letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0;
}
.ticker-item::before { content: '▸'; color: var(--green); font-size: 8px; opacity: 0.6; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ═══════════════════════════════════════════
   PROOF STRIP
═══════════════════════════════════════════ */
.proof-strip {
  padding: 72px 0 86px;
  background:
    radial-gradient(ellipse 100% 100% at 50% 0%, rgba(0,229,102,0.10) 0%, transparent 60%),
    var(--black2);
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bdr);
  border: 1px solid var(--bdr);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,0.45);
}
.proof-stat {
  min-height: 210px;
  padding: 34px 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008)),
    var(--black2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.proof-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 0%, rgba(0,229,102,0.12), transparent 42%);
  opacity: 0;
  transition: opacity 0.2s;
}
.proof-stat:hover::before { opacity: 1; }
.proof-value {
  font-family: var(--display);
  font-size: 80px;
  line-height: 0.86;
  letter-spacing: 0;
  color: var(--white);
  position: relative;
}
.proof-stat:nth-child(1) .proof-value,
.proof-stat:nth-child(4) .proof-value { color: var(--green); }
.proof-stat:nth-child(2) .proof-value { color: var(--yellow); }
.proof-stat:nth-child(3) .proof-value { color: #60a5fa; }
.proof-label {
  display: block;
  color: var(--gray);
  font-size: 15px;
  line-height: 1.58;
  max-width: 260px;
  position: relative;
}
.proof-source {
  display: block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--gray3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
}
.proof-questions {
  margin-top: 18px;
  padding: 22px 26px;
  border: 1px solid var(--green-bdr);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(0,229,102,0.09), rgba(216,176,16,0.04), rgba(96,165,250,0.04)),
    rgba(255,255,255,0.018);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: center;
}
.proof-kicker {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--green);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.proof-questions p {
  color: var(--off-white);
  font-size: 16.5px;
  line-height: 1.72;
}

/* ═══════════════════════════════════════════
   PROBLEM SECTION
═══════════════════════════════════════════ */
.problem-section {
  padding: 140px 0;
  background:
    radial-gradient(ellipse 70% 60% at 95% 50%, rgba(216,176,16,0.07), transparent),
    var(--black);
}

.problem-intro {
  max-width: 820px;
  margin-bottom: 80px;
}
.problem-lead {
  font-size: 20px;
  color: var(--gray);
  line-height: 1.75;
  margin-top: 20px;
}

.problem-blocks { display: flex; flex-direction: column; }
.problem-block {
  display: grid;
  grid-template-columns: minmax(280px, 0.36fr) minmax(0, 0.64fr);
  gap: 84px;
  padding: 58px 0;
  border-top: 1px solid var(--bdr);
}
.problem-block:last-child { border-bottom: 1px solid var(--bdr); }

.problem-block-left { display: flex; flex-direction: column; gap: 14px; }
.problem-num {
  font-family: var(--display);
  font-size: 96px;
  letter-spacing: 0;
  line-height: 1;
  color: rgba(255,255,255,0.05);
  display: block;
  margin-bottom: -12px;
}
.problem-heading {
  font-family: var(--body);
  font-weight: 600;
  font-size: 23px;
  color: var(--white);
  line-height: 1.24;
  letter-spacing: -0.018em;
}
.problem-source {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--green);
  letter-spacing: 0.06em;
  margin-top: auto;
}

.problem-block-right {
  display: flex; flex-direction: column; gap: 16px; padding-top: 6px;
}
.problem-block-right p {
  font-size: 18px; color: var(--gray); line-height: 1.82;
}
.problem-block-right p strong { color: var(--white); }

/* ═══════════════════════════════════════════
   PLATFORM SECTION
═══════════════════════════════════════════ */
.platform-section {
  padding: 140px 0;
  background:
    radial-gradient(ellipse 75% 55% at 20% 50%, rgba(0,229,102,0.07), transparent),
    var(--black2);
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
}
.platform-header { margin-bottom: 58px; max-width: 840px; }
.platform-header .section-body { margin-top: 16px; }

.platform-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 28px;
}
.ptab {
  padding: 11px 22px; border-radius: 100px;
  font-size: 14px; font-weight: 650;
  cursor: pointer; border: 1px solid var(--bdr);
  color: var(--gray2); background: transparent;
  transition: all 0.2s; font-family: var(--body);
  letter-spacing: 0;
}
.ptab:hover { border-color: var(--green-bdr); color: var(--green); }
.ptab.active { border-color: var(--green); color: var(--green); background: var(--green-dim); }

.platform-panel { display: none; }
.platform-panel.active { display: block; animation: panelIn 0.3s cubic-bezier(.23,1,.32,1) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* App Mockup */
.app-mockup {
  background: var(--black3); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
  position: relative;
}
.app-mockup::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,102,0.3), transparent);
}

.app-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--bdr);
  background: rgba(255,255,255,0.01);
}
.app-dots { display: flex; gap: 5px; }
.app-dot { width: 10px; height: 10px; border-radius: 50%; }
.app-dot:nth-child(1) { background: #ff5f57; }
.app-dot:nth-child(2) { background: #febc2e; }
.app-dot:nth-child(3) { background: #28c840; }
.app-url { font-family: var(--mono); font-size: 11.5px; color: var(--gray2); }
.app-live {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--green);
}
.app-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); animation: pulse 2s infinite;
}

.app-body { display: grid; grid-template-columns: 238px 1fr; min-height: 600px; }
.app-sidebar { border-right: 1px solid var(--bdr); padding: 18px 14px; background: rgba(255,255,255,0.006); }
.app-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; padding: 0 6px; }
.app-brand-mark {
  width: 24px; height: 24px; border-radius: 5px; flex-shrink: 0;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 13px; color: var(--black);
}
.app-brand-name { font-family: var(--display); font-size: 18px; letter-spacing: 1px; color: var(--white); }
.app-brand-name span { color: var(--green); }
.sb-section {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--gray3); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0 8px; margin: 16px 0 5px;
}
.sb-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 9px; border-radius: 7px;
  font-size: 13.5px; color: var(--gray2); margin-bottom: 3px;
  cursor: default; transition: all 0.15s;
}
.sb-item:hover, .sb-item.on { background: rgba(255,255,255,0.04); color: var(--off-white); }
.sb-item.on { background: var(--green-dim); color: var(--green); border-left: 2px solid var(--green); margin-left: -2px; }
.sb-icon { font-size: 11px; width: 16px; text-align: center; flex-shrink: 0; font-style: normal; }
.sb-badge {
  margin-left: auto; background: var(--yellow-dim); border: 1px solid var(--yellow-bdr);
  color: var(--yellow); font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 100px; font-family: var(--mono);
}

.app-main { padding: 28px 32px; overflow: auto; }
.app-page-title { font-family: var(--display); font-size: 28px; letter-spacing: 1px; color: var(--white); margin-bottom: 4px; }
.app-page-sub { font-family: var(--mono); font-size: 10.5px; color: var(--gray2); margin-bottom: 24px; }

.kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 18px; }
.kpi-card {
  background: rgba(255,255,255,0.02); border: 1px solid var(--bdr);
  border-radius: 9px; padding: 16px 18px; position: relative; overflow: hidden;
}
.kpi-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.kpi-card:nth-child(1)::after { background: var(--green); }
.kpi-card:nth-child(2)::after { background: var(--yellow); }
.kpi-card:nth-child(3)::after { background: #60a5fa; }
.kpi-card:nth-child(4)::after { background: #f472b6; }
.kpi-label { font-size: 10.5px; font-weight: 700; color: var(--gray2); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; }
.kpi-value { font-family: var(--display); font-size: 34px; letter-spacing: 0.5px; color: var(--white); line-height: 1; }
.kpi-delta { font-size: 11px; margin-top: 6px; }
.delta-up { color: var(--green); }
.delta-dn { color: #f87171; }

.main-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr); gap: 14px; }
.panel { background: rgba(255,255,255,0.012); border: 1px solid var(--bdr); border-radius: 9px; padding: 18px; }
.panel-title { font-size: 12.5px; font-weight: 700; color: var(--off-white); margin-bottom: 16px; letter-spacing: 0; }

/* Funnel bars — widths and colors set by nth-child, no inline styles */
.funnel-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.funnel-label { font-size: 12px; color: var(--gray2); width: 104px; flex-shrink: 0; }
.funnel-track { flex: 1; background: rgba(255,255,255,0.05); border-radius: 3px; height: 5px; overflow: hidden; }
.funnel-fill { height: 100%; border-radius: 3px; transition: width 1.4s cubic-bezier(.23,1,.32,1); }
.funnel-bar:nth-child(1) .funnel-fill { width: 100%; background: var(--yellow); }
.funnel-bar:nth-child(2) .funnel-fill { width: 72%;  background: #a78bfa; }
.funnel-bar:nth-child(3) .funnel-fill { width: 55%;  background: #60a5fa; }
.funnel-bar:nth-child(4) .funnel-fill { width: 38%;  background: #f472b6; }
.funnel-bar:nth-child(5) .funnel-fill { width: 22%;  background: var(--yellow); }
.funnel-bar:nth-child(6) .funnel-fill { width: 12%;  background: var(--green); }
.funnel-num { font-size: 12px; color: var(--off-white); font-family: var(--mono); width: 32px; text-align: right; flex-shrink: 0; }

.conv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.conv-cell { background: rgba(255,255,255,0.02); border-radius: 7px; padding: 10px; text-align: center; }
.conv-val { font-family: var(--display); font-size: 27px; color: var(--green); }
.conv-val.conv-yellow { color: var(--yellow); }
.conv-lbl { font-size: 11px; color: var(--gray2); margin-top: 4px; }

.patient-hdr {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--bdr);
}
.patient-av {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--green-dim), rgba(240,192,0,0.08));
  border: 1.5px solid var(--green-bdr);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 17px; color: var(--green);
}
.patient-name { font-family: var(--serif); font-size: 20px; color: var(--white); margin-bottom: 5px; }
.patient-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.ptag { padding: 4px 9px; border-radius: 100px; font-size: 11px; border: 1px solid var(--bdr); color: var(--gray2); }
.ptag.ptag-green { background: var(--green-dim); border-color: var(--green-bdr); color: var(--green); }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.info-card { background: rgba(255,255,255,0.012); border: 1px solid var(--bdr); border-radius: 8px; padding: 16px; }
.info-card-title { font-size: 10.5px; font-weight: 700; color: var(--gray2); text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 11px; }
.info-row { display: flex; justify-content: space-between; margin-bottom: 6px; }
.info-key { font-size: 12px; color: var(--gray2); }
.info-val { font-size: 12px; color: var(--off-white); font-weight: 600; }

.study-row {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.012); border: 1px solid var(--bdr);
  border-radius: 7px; padding: 11px 13px; margin-bottom: 7px;
}
.study-info { display: flex; align-items: center; gap: 9px; }
.study-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.study-dot.study-dot-green  { background: var(--green); }
.study-dot.study-dot-yellow { background: var(--yellow); }
.study-dot.study-dot-gray   { background: var(--gray2); }
.study-name { font-size: 13.5px; color: var(--white); font-weight: 650; }
.study-meta { font-size: 10.5px; color: var(--gray2); font-family: var(--mono); }
.status-pill { padding: 4px 10px; border-radius: 100px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.sp-green  { background: rgba(0,229,102,0.1); color: var(--green); border: 1px solid var(--green-bdr); }
.sp-yellow { background: var(--yellow-dim); color: var(--yellow); border: 1px solid var(--yellow-bdr); }
.sp-gray   { background: rgba(255,255,255,0.04); color: var(--gray2); border: 1px solid var(--bdr); }

.timeline-item { display: flex; gap: 10px; margin-bottom: 12px; }
.tl-dot-col { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.tl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.tl-dot.tl-dot-yellow { background: var(--yellow); }
.tl-dot.tl-dot-blue   { background: #60a5fa; }
.tl-line { flex: 1; width: 1px; background: var(--bdr); margin-top: 4px; }
.tl-action { font-size: 13px; color: var(--white); font-weight: 650; margin-bottom: 2px; }
.tl-time { font-family: var(--mono); font-size: 10.5px; color: var(--gray2); }

.screener-study {
  background: var(--green-dim); border: 1px solid var(--green-bdr);
  border-radius: 9px; padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
}
.ss-name { font-family: var(--serif); font-size: 16px; color: var(--white); }
.ss-sub { font-size: 11px; color: var(--green); margin-top: 3px; }
.progress-bar { margin-bottom: 16px; }
.progress-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--gray2); margin-bottom: 7px; }
.progress-track { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--green), var(--yellow)); width: 43%; }
.question-text { font-size: 15px; color: var(--white); font-weight: 650; margin-bottom: 13px; line-height: 1.5; }
.option-list { display: flex; flex-direction: column; gap: 6px; }
.option-item {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--bdr);
  border-radius: 7px; padding: 10px 12px; cursor: default; transition: all 0.15s;
}
.option-item.selected { border-color: var(--green-bdr); background: var(--green-dim); }
.option-radio { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--gray2); flex-shrink: 0; }
.option-item.selected .option-radio { border-color: var(--green); background: var(--green); }
.option-text { font-size: 13px; color: var(--off-white); }
.result-box {
  background: rgba(0,229,102,0.05); border: 1px solid var(--green-bdr);
  border-radius: 9px; padding: 13px; text-align: center; margin-top: 12px;
}
.result-icon { font-size: 18px; color: var(--green); margin-bottom: 4px; }
.result-title { font-size: 14.5px; color: var(--green); font-weight: 800; margin-bottom: 4px; }
.result-sub { font-size: 12px; color: var(--gray2); }

.predictor-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.pinput-label { font-family: var(--mono); font-size: 10.5px; color: var(--gray2); text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 5px; }
.pinput-val {
  background: rgba(255,255,255,0.03); border: 1px solid var(--bdr);
  border-radius: 6px; padding: 7px 10px;
  font-size: 13px; color: var(--white); font-family: var(--mono);
}
.predictor-result {
  background: linear-gradient(135deg, rgba(0,229,102,0.05), rgba(240,192,0,0.02));
  border: 1px solid var(--green-bdr); border-radius: 10px; padding: 18px; margin-bottom: 10px;
}
.pred-title {
  font-family: var(--mono); font-size: 10.5px; color: var(--green);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 12px;
}
.pred-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.pred-label { font-size: 13px; color: var(--gray2); }
.pred-val { font-family: var(--display); font-size: 24px; color: var(--white); }
.pred-val.pred-ok   { color: var(--green); }
.pred-val.pred-warn { color: var(--yellow); }
.pred-val.pred-bad  { color: #f87171; }
.pred-warning {
  background: rgba(240,192,0,0.04); border: 1px solid rgba(240,192,0,0.18);
  border-radius: 7px; padding: 10px 12px; margin-bottom: 10px;
}
.pred-warn-text { font-size: 12.5px; color: var(--off-white); line-height: 1.65; }
.pred-warn-text strong { color: var(--white); }
.pred-chart { display: flex; gap: 4px; align-items: flex-end; height: 52px; margin-top: 10px; }
.pred-bar { flex: 1; border-radius: 3px 3px 0 0; min-height: 6px; }
/* Predictor bar heights and colors via nth-child */
.pred-bar:nth-child(1)  { height: 30%; background: var(--yellow); opacity: 0.6; }
.pred-bar:nth-child(2)  { height: 45%; background: var(--yellow); opacity: 0.7; }
.pred-bar:nth-child(3)  { height: 35%; background: var(--yellow); opacity: 0.75; }
.pred-bar:nth-child(4)  { height: 55%; background: var(--yellow); }
.pred-bar:nth-child(5)  { height: 40%; background: var(--yellow); }
.pred-bar:nth-child(6)  { height: 62%; background: var(--green); }
.pred-bar:nth-child(7)  { height: 50%; background: var(--green); opacity: 0.8; }
.pred-bar:nth-child(8)  { height: 46%; background: rgba(255,255,255,0.06); border: 1px dashed rgba(255,255,255,0.15); }
.pred-bar:nth-child(9)  { height: 58%; background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.15); }
.pred-bar:nth-child(10) { height: 72%; background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.15); }

.ref-header { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 8px; padding: 6px 10px; }
.ref-th { font-size: 10px; font-weight: 700; color: var(--gray2); text-transform: uppercase; letter-spacing: 0.07em; }
.ref-row {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 8px;
  padding: 9px 10px; border-radius: 7px; margin-bottom: 5px;
  background: rgba(255,255,255,0.012); border: 1px solid var(--bdr); align-items: center;
}
.ref-source { font-size: 13px; color: var(--white); font-weight: 650; display: flex; align-items: center; gap: 8px; }
.ref-source-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ref-source-dot.ref-dot-green  { background: var(--green); }
.ref-source-dot.ref-dot-blue   { background: #60a5fa; }
.ref-source-dot.ref-dot-yellow { background: var(--yellow); }
.ref-source-dot.ref-dot-purple { background: #a78bfa; }
.ref-source-dot.ref-dot-red    { background: #f87171; }
.ref-num { font-size: 12px; color: var(--off-white); font-family: var(--mono); }
.ref-rate { font-size: 12px; font-family: var(--mono); font-weight: 700; }
.ref-rate.ref-rate-green  { color: var(--green); }
.ref-rate.ref-rate-blue   { color: #60a5fa; }
.ref-rate.ref-rate-yellow { color: var(--yellow); }
.ref-rate.ref-rate-purple { color: #a78bfa; }
.ref-rate.ref-rate-red    { color: #f87171; }
.ref-bar-col { display: flex; align-items: center; }
.ref-bar { height: 5px; border-radius: 3px; }
/* Referral bar widths and colors via nth-child */
.ref-row:nth-child(1) .ref-bar { width: 72px; background: var(--green); }
.ref-row:nth-child(2) .ref-bar { width: 52px; background: #60a5fa; }
.ref-row:nth-child(3) .ref-bar { width: 42px; background: var(--yellow); }
.ref-row:nth-child(4) .ref-bar { width: 12px; background: #a78bfa; }
.ref-row:nth-child(5) .ref-bar { width: 8px;  background: #f87171; }
.ai-insight {
  background: rgba(0,229,102,0.04); border: 1px solid var(--green-bdr);
  border-radius: 8px; padding: 11px 13px; margin-top: 10px;
}
.ai-insight-title { font-family: var(--mono); font-size: 10.5px; color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 5px; }
.ai-insight-body { font-size: 12.5px; color: var(--off-white); line-height: 1.65; }
.ai-insight-body strong { color: var(--green); }

/* ═══════════════════════════════════════════
   ARCHITECTURE
═══════════════════════════════════════════ */
.architecture-section {
  padding: 140px 0;
  background:
    radial-gradient(ellipse 110% 80% at 50% 0%, rgba(0,229,102,0.15) 0%, rgba(11,13,26,0.80) 36%, rgba(7,8,15,1) 70%),
    var(--black);
  overflow: hidden;
}
.arch-header {
  max-width: 900px;
  margin-bottom: 64px;
}
.arch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(420px, 0.88fr);
  gap: 44px;
  align-items: start;
}
.arch-layers {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.arch-layer {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--green-bdr);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(0,229,102,0.09), rgba(255,255,255,0.018)),
    rgba(8,12,14,0.82);
  position: relative;
  overflow: hidden;
}
.arch-layer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,102,0.5), transparent);
}
.arch-layer-gold {
  border-color: var(--yellow-bdr);
  background:
    linear-gradient(135deg, rgba(216,176,16,0.1), rgba(255,255,255,0.018)),
    rgba(8,12,14,0.82);
}
.arch-layer-gold::after { background: linear-gradient(90deg, transparent, rgba(216,176,16,0.55), transparent); }
.arch-layer-blue {
  border-color: rgba(96,165,250,0.25);
  background:
    linear-gradient(135deg, rgba(96,165,250,0.1), rgba(255,255,255,0.018)),
    rgba(8,12,14,0.82);
}
.arch-layer-blue::after { background: linear-gradient(90deg, transparent, rgba(96,165,250,0.55), transparent); }
.arch-layer-pink {
  border-color: rgba(244,114,182,0.24);
  background:
    linear-gradient(135deg, rgba(244,114,182,0.08), rgba(255,255,255,0.018)),
    rgba(8,12,14,0.82);
}
.arch-layer-pink::after { background: linear-gradient(90deg, transparent, rgba(244,114,182,0.48), transparent); }
.arch-layer-index {
  font-family: var(--display);
  font-size: 72px;
  line-height: 0.86;
  color: rgba(255,255,255,0.11);
}
.arch-layer-tag {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.arch-layer-gold .arch-layer-tag { color: var(--yellow); }
.arch-layer-blue .arch-layer-tag { color: #60a5fa; }
.arch-layer-pink .arch-layer-tag { color: #f472b6; }
.arch-layer-body h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0;
  line-height: 1.2;
  margin-bottom: 10px;
}
.arch-layer-body p {
  color: var(--gray);
  font-size: 16px;
  line-height: 1.75;
  max-width: 660px;
}
.arch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}
.arch-chips span {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--gray);
  border: 1px solid var(--bdr);
  background: rgba(255,255,255,0.035);
  border-radius: 100px;
  padding: 5px 9px;
}
.arch-diagram {
  position: sticky;
  top: 96px;
  border: 1px solid var(--bdr);
  border-radius: 20px;
  padding: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
    rgba(13,19,23,0.88);
  box-shadow: 0 36px 90px rgba(0,0,0,0.5);
}
.diagram-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.diagram-heading span {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--gray3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.diagram-heading strong {
  color: var(--white);
  font-size: 21px;
  letter-spacing: 0;
}
.diagram-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.diagram-node {
  padding: 16px 18px;
  border: 1px solid var(--green-bdr);
  border-radius: 12px;
  background: rgba(0,229,102,0.06);
}
.diagram-node span {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 5px;
}
.diagram-node small {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--gray2);
  line-height: 1.55;
}
.diagram-node-gold { border-color: var(--yellow-bdr); background: var(--yellow-dim); }
.diagram-node-core {
  border-color: rgba(255,255,255,0.2);
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,229,102,0.04));
}
.diagram-node-blue { border-color: rgba(96,165,250,0.25); background: rgba(96,165,250,0.07); }
.diagram-node-muted { border-color: var(--bdr); background: rgba(255,255,255,0.025); }
.diagram-arrow {
  font-family: var(--mono);
  color: var(--gray3);
  text-align: center;
  padding: 8px 0;
}
.ai-vision {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--bdr);
}
.ai-vision span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--yellow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 9px;
}
.ai-vision p {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════════ */
.how-section {
  padding: 140px 0;
  background:
    radial-gradient(ellipse 65% 55% at 5% 50%, rgba(0,229,102,0.08), transparent),
    var(--black2);
}

.how-intro {
  max-width: 820px; margin-bottom: 72px;
}
.how-intro .section-body { margin-top: 16px; }

.how-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--bdr);
  border-radius: 16px;
  overflow: hidden;
}
.how-col {
  padding: 56px 48px;
  border-right: 1px solid var(--bdr);
  position: relative;
}
.how-col:last-child { border-right: none; }

.how-num {
  font-family: var(--display);
  font-size: 80px;
  letter-spacing: 0;
  line-height: 1;
  color: rgba(255,255,255,0.04);
  display: block;
  margin-bottom: -8px;
}
.how-rule {
  width: 32px; height: 2px; background: var(--green);
  margin-bottom: 20px;
}
.how-label {
  display: block;
  font-family: var(--mono); font-size: 11px;
  color: var(--green); letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600;
  margin-bottom: 14px;
}
.how-head {
  font-family: var(--body);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.018em;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.26;
}
.how-body {
  font-size: 17px; color: var(--gray); line-height: 1.82;
}

/* ═══════════════════════════════════════════
   ROLES SECTION
═══════════════════════════════════════════ */
.roles-section {
  padding: 140px 0;
  background:
    radial-gradient(ellipse 70% 55% at 85% 50%, rgba(216,176,16,0.07), transparent),
    var(--black);
}
.roles-intro { margin-bottom: 64px; }
.roles-intro .section-body { margin-top: 16px; }

.roles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bdr);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--bdr);
}
.role-card {
  background: var(--black);
  padding: 38px 30px;
  transition: background 0.2s;
  cursor: default;
}
.role-card:hover { background: var(--black3); }

.role-top {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 24px;
}
.role-mark {
  font-family: var(--mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--green);
  background: var(--green-dim);
  border: 1px solid var(--green-bdr);
  padding: 8px 10px;
  border-radius: 8px;
  flex-shrink: 0;
  line-height: 1;
}
.role-mark.role-mark-gold  { color: var(--yellow); background: var(--yellow-dim); border-color: var(--yellow-bdr); }
.role-mark.role-mark-blue  { color: #60a5fa; background: rgba(96,165,250,0.07); border-color: rgba(96,165,250,0.22); }
.role-mark.role-mark-pink  { color: #f472b6; background: rgba(244,114,182,0.07); border-color: rgba(244,114,182,0.22); }

.role-name {
  font-family: var(--body); font-weight: 600;
  font-size: 17px; letter-spacing: -0.014em;
  color: var(--white); margin-bottom: 3px;
}
.role-sub {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--gray2); text-transform: uppercase; letter-spacing: 0.08em;
}
.role-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.role-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--gray); line-height: 1.6;
}
.role-list li::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--green); flex-shrink: 0; margin-top: 6px;
}
.role-card:nth-child(2) .role-list li::before { background: var(--yellow); }
.role-card:nth-child(3) .role-list li::before { background: #60a5fa; }
.role-card:nth-child(4) .role-list li::before { background: #f472b6; }

/* ═══════════════════════════════════════════
   FEATURES SECTION
═══════════════════════════════════════════ */
.features-section {
  padding: 140px 0;
  background:
    radial-gradient(ellipse 65% 55% at 95% 50%, rgba(96,165,250,0.08), transparent),
    var(--black2);
}
.features-intro { margin-bottom: 48px; }

.features-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
}
.features-group { display: flex; flex-direction: column; gap: 0; }
.fg-title {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--green); letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 32px; padding-bottom: 16px;
  border-bottom: 1px solid var(--bdr);
}

.feature-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--bdr2);
  transition: padding-left 0.2s;
}
.feature-item:hover { padding-left: 8px; }
.fi-name {
  font-size: 16px; font-weight: 600;
  color: var(--white); letter-spacing: -0.014em;
  margin-bottom: 7px;
}
.fi-desc {
  font-size: 14px; color: var(--gray); line-height: 1.72;
}

/* ═══════════════════════════════════════════
   INTEGRATIONS
═══════════════════════════════════════════ */
.integrations-section {
  padding: 140px 0;
  background:
    radial-gradient(ellipse 65% 55% at 50% 100%, rgba(216,176,16,0.08), transparent),
    var(--black);
  border-top: 1px solid var(--bdr);
}
.integrations-header {
  max-width: 900px;
  margin-bottom: 34px;
}
.integrations-header .section-body { margin-top: 16px; }
.integration-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 0 28px;
  border-top: 1px solid var(--bdr);
}
.integration-legend span,
.integration-legend a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.integration-legend a {
  color: var(--green);
  margin-left: auto;
}
.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.legend-green { background: var(--green); }
.legend-gray { background: var(--gray3); }
.integration-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.integration-card {
  min-height: 232px;
  border: 1px solid var(--bdr);
  border-radius: 16px;
  padding: 28px 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.008)),
    var(--black2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.integration-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.15);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    var(--black3);
}
.integration-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.12);
}
.integration-card.integration-launch {
  border-color: var(--green-bdr);
}
.integration-card.integration-launch::before {
  background: linear-gradient(90deg, var(--green), rgba(0,229,102,0.15));
}
.integration-abbr {
  width: 44px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--bdr);
  background: rgba(255,255,255,0.04);
  color: var(--gray);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.integration-launch .integration-abbr {
  color: var(--green);
  border-color: var(--green-bdr);
  background: var(--green-dim);
}
.integration-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.014em;
  margin-bottom: 9px;
}
.integration-card p {
  font-size: 13.5px;
  color: var(--gray);
  line-height: 1.68;
}
.integration-note {
  margin-top: 18px;
  padding: 26px 30px;
  border: 1px solid var(--yellow-bdr);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(216,176,16,0.08), rgba(0,229,102,0.035)),
    rgba(255,255,255,0.016);
}
.integration-note span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--yellow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}
.integration-note p {
  color: var(--off-white);
  font-size: 16px;
  line-height: 1.7;
  max-width: 760px;
}

/* ═══════════════════════════════════════════
   TEAM / ABOUT
═══════════════════════════════════════════ */
.team-section {
  padding: 140px 0;
  background:
    radial-gradient(ellipse 75% 55% at 0% 50%, rgba(216,176,16,0.08), transparent),
    var(--black2);
  border-top: 1px solid var(--bdr);
}
.team-intro { margin-bottom: 64px; }
.team-lead {
  font-size: 18px; color: var(--gray); line-height: 1.82; max-width: 860px;
  margin-top: 20px;
}

.founder-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.founder-card {
  border: 1px solid var(--bdr); border-radius: 20px;
  padding: 42px 38px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));
  display: flex; flex-direction: column; gap: 22px;
}
.founder-card.founder-card-gold { border-color: var(--yellow-bdr); }

.founder-head { display: flex; align-items: flex-start; gap: 18px; }
.founder-av {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(0,229,102,0.1), rgba(240,192,0,0.08));
  border: 1.5px solid var(--green-bdr);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 26px; color: var(--green);
}
.founder-av.founder-av-gold {
  border-color: var(--yellow-bdr); color: var(--yellow);
  background: linear-gradient(135deg, rgba(240,192,0,0.1), rgba(0,229,102,0.06));
}
.founder-name { font-weight: 700; font-size: 20px; color: var(--white); letter-spacing: 0; margin-bottom: 4px; }
.founder-role { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.founder-role.founder-role-green { color: var(--green); }
.founder-role.founder-role-gold  { color: var(--yellow); }
.founder-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.founder-tag {
  background: rgba(255,255,255,0.04); border: 1px solid var(--bdr);
  padding: 5px 10px; border-radius: 100px; font-size: 11px; color: var(--gray2);
}

.founder-quote {
  font-family: var(--serif); font-size: 19px; font-style: italic;
  color: var(--white); line-height: 1.7;
  border-left: 2px solid var(--green); padding-left: 18px;
}
.founder-quote.founder-quote-gold { border-left-color: var(--yellow); }

.founder-bio { font-size: 15.5px; color: var(--gray); line-height: 1.82; }
.founder-bio p { margin-bottom: 12px; }

.founder-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }

/* ═══════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════ */
.cta-section {
  padding: 140px 0; position: relative; overflow: hidden;
}
.cta-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,229,102,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,102,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent);
}

.cta-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.cta-title {
  font-family: var(--body);
  font-weight: 700;
  font-size: 78px;
  letter-spacing: -0.032em;
  line-height: 1.0;
  color: var(--white);
  margin: 8px 0 24px;
}
.cta-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(125deg, var(--green) 15%, var(--yellow2) 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.01em;
}

.cta-sub {
  font-size: 18px;
  color: rgba(220,235,225,0.68);
  max-width: 620px;
  line-height: 1.80;
  letter-spacing: -0.003em;
  margin-bottom: 40px;
}
.cta-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto 20px; flex-wrap: wrap; justify-content: center; }
.cta-input {
  flex: 1; min-width: 200px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--bdr);
  border-radius: 9px; padding: 14px 18px;
  font-size: 14px; color: var(--white); font-family: var(--body);
  outline: none; transition: border-color 0.2s;
}
.cta-input::placeholder { color: var(--gray3); }
.cta-input:focus { border-color: var(--green-bdr); background: rgba(0,229,102,0.03); }
.cta-submit {
  background: var(--green); color: var(--black);
  padding: 14px 28px; border-radius: 9px; font-size: 13.5px;
  font-weight: 700; border: none; cursor: pointer; font-family: var(--body);
  text-transform: uppercase; letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.15s;
}
.cta-submit:hover { background: var(--green2); transform: translateY(-1px); }
.cta-note { font-size: 11px; color: var(--gray3); font-family: var(--mono); }

/* ═══════════════════════════════════════════
   BENEFIT PILLARS
═══════════════════════════════════════════ */
.pillars-section {
  padding: 128px 0;
  position: relative;
  background: var(--black);
}
.pillars-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31,223,120,0.25), transparent);
}
.pillars-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 72px;
}
.pillars-intro .section-title { margin-bottom: 0; }

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.pillar-card {
  background: var(--black4);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  padding: 44px 38px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform 0.3s cubic-bezier(.23,1,.32,1), border-color 0.3s;
}
.pillar-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green) 40%, transparent);
  opacity: 0.75;
}
.pillar-card::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31,223,120,0.08), transparent 70%);
  pointer-events: none;
}
.pillar-card:hover {
  transform: translateY(-5px);
  border-color: rgba(31,223,120,0.22);
}

.pillar-card-gold::before {
  background: linear-gradient(90deg, transparent, var(--yellow) 40%, transparent);
}
.pillar-card-gold::after {
  background: radial-gradient(circle, rgba(255,181,71,0.10), transparent 70%);
}
.pillar-card-gold:hover { border-color: rgba(255,181,71,0.28); }

.pillar-card-blue::before {
  background: linear-gradient(90deg, transparent, #58a6ff 40%, transparent);
}
.pillar-card-blue::after {
  background: radial-gradient(circle, rgba(88,166,255,0.10), transparent 70%);
}
.pillar-card-blue:hover { border-color: rgba(88,166,255,0.28); }

.pillar-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.pillar-num {
  font-family: var(--display);
  font-size: 52px;
  line-height: 1;
  letter-spacing: 1px;
  color: rgba(31,223,120,0.22);
}
.pillar-num-gold { color: rgba(255,181,71,0.25); }
.pillar-num-blue { color: rgba(88,166,255,0.22); }

.pillar-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--green-dim);
  border: 1px solid var(--green-bdr);
  padding: 5px 12px;
  border-radius: 100px;
}
.pillar-tag-gold { color: var(--yellow); background: var(--yellow-dim); border-color: var(--yellow-bdr); }
.pillar-tag-blue { color: #58a6ff; background: rgba(88,166,255,0.10); border-color: rgba(88,166,255,0.28); }

.pillar-head {
  font-family: var(--body);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.023em;
  color: var(--white);
  margin-bottom: 16px;
}
.pillar-body {
  font-size: 15px;
  color: var(--gray2);
  line-height: 1.78;
  flex: 1;
  margin-bottom: 32px;
}
.pillar-accent {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: auto;
}
.pa-value {
  font-family: var(--display);
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--green);
}
.pa-gold { color: var(--yellow); }
.pa-blue { color: #58a6ff; }
.pa-label {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--gray3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer {
  border-top: 1px solid rgba(31,223,120,0.12);
  padding: 64px 0 40px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 56px 48px;
  margin-bottom: 52px;
  align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
.footer-logo {
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1;
}
.footer-logo span { color: var(--green); }
.footer-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.44);
  line-height: 1.65;
  max-width: 260px;
  margin-bottom: 24px;
}
.footer-col-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 16px;
}
.footer-col-links { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col-links a {
  font-size: 14px;
  color: rgba(255,255,255,0.52);
  text-decoration: none;
  transition: color 0.18s;
  line-height: 1.3;
}
.footer-col-links a:hover { color: var(--white); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.24); }
.footer-status {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; color: var(--green);
}
.footer-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); animation: pulse 2s infinite;
}

/* ═══════════════════════════════════════════
   PRODUCT THEME ALIGNMENT
═══════════════════════════════════════════ */
body {
  background: var(--mist);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  background:
    radial-gradient(ellipse 58% 42% at 4% 8%, rgba(31,223,120,0.10), transparent 64%),
    radial-gradient(ellipse 42% 34% at 92% 6%, rgba(186,243,21,0.14), transparent 62%),
    radial-gradient(ellipse 70% 48% at 72% 100%, rgba(255,255,255,0.70), transparent 58%),
    linear-gradient(180deg, #e6edf7 0%, #eef5e9 72%, #e6edf7 100%);
}
body::after { opacity: 0.012; }

.container {
  width: min(1900px, calc(100% - 64px));
}

nav {
  background: rgba(6,18,11,0.82);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 40px rgba(2,12,7,0.18);
}
nav.scrolled {
  background: rgba(6,18,11,0.96);
}
.nav-logo-mark,
.app-brand-mark {
  background: linear-gradient(135deg, #77cc5b, var(--lime));
  color: var(--black);
  box-shadow: 0 10px 28px rgba(186,243,21,0.18);
}
.nav-logo-text,
.app-brand-name {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--white);
  text-transform: none;
}
.nav-logo-text span,
.app-brand-name span {
  color: var(--white);
}
.nav-links a {
  color: rgba(231,239,229,0.72);
  font-weight: 650;
}
.nav-links a:hover {
  color: var(--white);
}
.nav-links a::after {
  background: var(--lime);
}
.nav-cta,
.nav-mobile-menu .nav-mobile-cta,
.btn-primary,
.cta-submit {
  background: var(--lime);
  color: var(--ink);
  border: 1px solid rgba(8,23,15,0.14);
  box-shadow: 0 12px 32px rgba(186,243,21,0.18);
}
.nav-cta:hover,
.nav-mobile-menu .nav-mobile-cta:hover,
.btn-primary:hover,
.cta-submit:hover {
  background: var(--lime2);
}
.btn-primary.btn-gold,
.btn-primary.btn-gold:hover {
  background: var(--lime);
  color: var(--ink);
}
.btn-ghost {
  border-color: rgba(255,255,255,0.16);
  color: rgba(244,250,241,0.92);
  background: rgba(255,255,255,0.03);
}
.btn-ghost:hover {
  border-color: rgba(186,243,21,0.34);
  background: rgba(186,243,21,0.08);
  color: var(--white);
}
.nav-mobile-menu {
  background: rgba(6,18,11,0.98);
  border-bottom-color: rgba(255,255,255,0.10);
}
.nav-mobile-menu a {
  border-bottom-color: rgba(255,255,255,0.07);
}

.hero {
  background:
    radial-gradient(ellipse 48% 42% at 9% 11%, rgba(31,223,120,0.18), transparent 68%),
    radial-gradient(ellipse 36% 38% at 88% 8%, rgba(255,181,71,0.12), transparent 64%),
    linear-gradient(135deg, #06120b 0%, #08170f 42%, #10120b 100%);
}
.hero .container {
  position: relative;
  z-index: 1;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background: linear-gradient(180deg, transparent, rgba(6,18,11,0.62));
  pointer-events: none;
  z-index: 0;
}
.hero-grid-bg {
  background-image:
    linear-gradient(rgba(186,243,21,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(186,243,21,0.055) 1px, transparent 1px);
}
.hero-badge {
  border-color: rgba(186,243,21,0.28);
  background: rgba(186,243,21,0.10);
  color: var(--lime2);
}
.hero-badge-dot {
  background: var(--lime);
}
.hero-h1 {
  font-size: 104px;
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.038em;
  max-width: 780px;
}
.hero-h1 em {
  background: linear-gradient(125deg, #c8ff2d 0%, #f5ffe5 42%, #ffcf67 100%);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -0.012em;
}
.hero-sub {
  max-width: 720px;
  color: rgba(228,240,232,0.78);
  font-size: 20px;
  line-height: 1.76;
  font-weight: 400;
  letter-spacing: -0.003em;
}
.hero-data-panel {
  border-radius: 24px;
  border: 1px solid rgba(131,158,158,0.22);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008)),
    #081922;
  box-shadow: 0 40px 110px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.04);
}
.hero-data-panel::before {
  background: linear-gradient(90deg, transparent, rgba(186,243,21,0.38), transparent);
}
.hdp-title,
.hdp-study,
.hdp-mlabel,
.hdp-footer {
  color: #7f929d;
}
.hdp-live,
.hdp-green {
  color: var(--green);
}
.hdp-count,
.hdp-mval,
.proof-value,
.pm-value,
.kpi-value,
.conv-val,
.problem-num,
.arch-layer-index,
.how-num {
  font-family: var(--body);
  font-weight: 900;
}
.hdp-stage,
.hdp-mval,
.hdp-count {
  color: #edf6f3;
}
.hdp-track,
.progress-track,
.funnel-track {
  background: rgba(255,255,255,0.08);
}
.hdp-fill {
  background: rgba(223,235,235,0.38);
}
.hdp-fill.hdp-fill-green {
  background: var(--green);
}
.hdp-divider {
  background: rgba(255,255,255,0.10);
}
.hdp-mval.hdp-mval-warn {
  color: var(--yellow2);
}

.ticker-wrap {
  background: #06120b;
  border-top-color: rgba(255,255,255,0.08);
  border-bottom-color: rgba(255,255,255,0.08);
}
.ticker-item {
  color: rgba(211,226,224,0.70);
  font-size: 12px;
}
.ticker-item::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.75;
}

.problem-section,
.platform-section,
.architecture-section,
.workflow-section,
.features-section,
.integrations-section,
.team-section {
  background:
    radial-gradient(ellipse 42% 32% at 86% 6%, rgba(186,243,21,0.16), transparent 62%),
    radial-gradient(ellipse 46% 34% at 5% 18%, rgba(31,223,120,0.08), transparent 66%),
    linear-gradient(180deg, #e6edf7 0%, #eef5e9 100%);
  border-top: 1px solid rgba(13,38,24,0.07);
  color: var(--ink);
}
.problem-section,
.platform-section,
.architecture-section,
.workflow-section,
.features-section,
.integrations-section,
.team-section,
.cta-section {
  padding: 128px 0;
}

.eyebrow,
.eyebrow-gold,
.fg-title,
.how-label,
.arch-layer-tag,
.ai-vision span,
.integration-note span,
.founder-role.founder-role-green,
.founder-role.founder-role-gold {
  color: var(--green3);
}
.section-title,
.problem-heading,
.how-head,
.role-name,
.fi-name,
.integration-card h3,
.founder-name,
.panel-title,
.patient-name,
.study-name,
.question-text,
.diagram-heading strong {
  color: var(--ink);
}
/* ── SECTION TITLE: REFINED SIZE ON LIGHT BG ── */
.section-title {
  font-size: 48px;
  line-height: 1.10;
  letter-spacing: -0.030em;
  font-weight: 700;
}

/* ── SECTION INTRO BLOCKS: CENTERED ── */
.platform-header,
.how-intro,
.roles-intro,
.features-intro,
.integrations-header,
.roadmap-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.platform-header .section-body,
.how-intro .section-body,
.roles-intro .section-body,
.integrations-header .section-body,
.roadmap-header .section-body {
  margin-left: auto;
  margin-right: auto;
}

/* ── SUB-HEADINGS ── */
.problem-heading {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.how-head {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.fi-name {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

/* ── BODY TEXT ── */
.section-body,
.problem-block-right p,
.how-body,
.role-list li,
.fi-desc,
.integration-card p,
.integration-note p,
.team-lead,
.founder-bio,
.ai-vision p {
  color: #253c2d;
}
.section-body {
  font-size: 17px;
  line-height: 1.80;
  letter-spacing: -0.003em;
  max-width: 620px;
  font-weight: 400;
}
.how-body {
  font-size: 14.5px;
  line-height: 1.80;
  letter-spacing: -0.002em;
}
.role-list li {
  font-size: 13.5px;
  line-height: 1.62;
  letter-spacing: -0.002em;
}
.problem-block-right p {
  font-size: 16px;
  line-height: 1.80;
  letter-spacing: -0.002em;
}

.problem-intro {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.problem-intro .problem-lead {
  margin-left: auto;
  margin-right: auto;
}
.problem-lead {
  max-width: 600px;
  font-size: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink2);
  line-height: 1.70;
  letter-spacing: 0.002em;
  margin-top: 18px;
}
.problem-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.problem-metric {
  min-height: 190px;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid rgba(13,38,24,0.12);
  background:
    radial-gradient(circle at 92% 8%, rgba(186,243,21,0.18), transparent 44%),
    linear-gradient(135deg, rgba(255,255,255,0.76), rgba(245,250,238,0.88));
  box-shadow: 0 24px 70px rgba(24,35,48,0.10);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pm-value {
  font-size: 46px;
  line-height: 1;
  color: var(--green3);
  white-space: nowrap;
  letter-spacing: -0.025em;
}
.problem-metric:nth-child(2) .pm-value {
  color: var(--yellow3);
}
.pm-label {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  margin-top: 14px;
}
.pm-source {
  display: block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  color: #4e6b5a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.problem-blocks {
  gap: 18px;
}
.problem-block {
  padding: 34px;
  gap: 48px;
  border: 1px solid rgba(13,38,24,0.12);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.72), rgba(245,250,238,0.90)),
    var(--cream);
  box-shadow: 0 18px 60px rgba(24,35,48,0.08);
}
.problem-block:last-child {
  border-bottom: 1px solid rgba(13,38,24,0.12);
}
.problem-num {
  color: rgba(19,111,61,0.30);
  font-size: 74px;
}
.problem-source {
  color: var(--green3);
}

.platform-header,
.arch-header,
.how-intro,
.roles-intro,
.features-intro,
.integrations-header,
.team-intro {
  max-width: 980px;
}
.platform-tabs {
  gap: 10px;
}
.ptab {
  background: rgba(255,255,255,0.62);
  border-color: rgba(13,38,24,0.12);
  color: var(--gray);
  box-shadow: 0 12px 36px rgba(24,35,48,0.06);
}
.ptab:hover {
  border-color: rgba(19,111,61,0.24);
  color: var(--green3);
}
.ptab.active {
  background: var(--lime);
  border-color: rgba(8,23,15,0.16);
  color: var(--ink);
}
.app-mockup {
  border-radius: 28px;
  border: 1px solid rgba(13,38,24,0.18);
  background: var(--cream);
  box-shadow: 0 34px 90px rgba(24,35,48,0.16);
}
.app-mockup::before {
  background: linear-gradient(90deg, transparent, rgba(19,111,61,0.24), transparent);
}
.app-topbar {
  background: rgba(255,255,255,0.66);
  border-bottom-color: rgba(13,38,24,0.10);
}
.app-url {
  color: var(--gray);
}
.app-live {
  color: var(--green3);
}
.app-body {
  background: linear-gradient(135deg, #f8fbf1 0%, #eef8df 100%);
}
.app-sidebar {
  background: #09170e;
  border-right-color: rgba(255,255,255,0.08);
}
.app-main {
  background:
    radial-gradient(ellipse 44% 36% at 78% 8%, rgba(186,243,21,0.16), transparent 66%),
    linear-gradient(135deg, #f8fbf1 0%, #eef8df 100%);
}
.app-page-title {
  font-family: var(--body);
  font-weight: 850;
  color: var(--ink);
}
.app-page-sub,
.kpi-label,
.funnel-label,
.conv-lbl,
.info-card-title,
.info-key,
.study-meta,
.tl-time,
.progress-meta,
.pinput-label,
.pred-title,
.pred-label,
.ref-th {
  color: var(--gray);
}
.kpi-card,
.panel,
.info-card,
.study-row,
.option-item,
.predictor-result,
.pred-warning,
.ai-insight,
.screener-study,
.result-box,
.conv-cell {
  border: 1px solid rgba(13,38,24,0.12);
  background: rgba(255,255,255,0.62);
  box-shadow: 0 14px 38px rgba(24,35,48,0.06);
}
.kpi-card::after {
  height: 3px;
}
.kpi-card:nth-child(1)::after,
.kpi-card:nth-child(4)::after {
  background: var(--green3);
}
.kpi-card:nth-child(2)::after {
  background: var(--lime);
}
.kpi-card:nth-child(3)::after {
  background: #16a2c8;
}
.kpi-value,
.funnel-num,
.info-val,
.tl-action,
.question-text,
.option-text,
.pred-val,
.ref-source,
.ref-num {
  color: var(--ink);
}
.conv-val,
.result-title,
.pred-val.pred-ok,
.ref-rate.ref-rate-green,
.ai-insight-title {
  color: var(--green3);
}
.conv-val.conv-yellow,
.pred-val.pred-warn,
.ref-rate.ref-rate-yellow {
  color: var(--yellow3);
}
.sb-item:hover,
.sb-item.on {
  background: rgba(186,243,21,0.12);
  color: #f6ffe8;
}
.sb-item.on {
  border-left-color: var(--lime);
}
.sb-badge {
  background: var(--lime);
  border-color: transparent;
  color: var(--ink);
}
.ptag,
.arch-chips span,
.founder-tag {
  border-color: rgba(13,38,24,0.12);
  background: rgba(255,255,255,0.56);
  color: var(--gray);
}
.patient-av {
  color: var(--green3);
  border-color: rgba(19,111,61,0.22);
  background: var(--lime-dim);
}
.status-pill,
.ptag.ptag-green {
  border-color: rgba(19,111,61,0.22);
  background: rgba(31,223,120,0.10);
  color: var(--green3);
}
.sp-yellow {
  border-color: rgba(255,181,71,0.28);
  background: rgba(255,181,71,0.12);
  color: var(--yellow3);
}
.sp-gray {
  border-color: rgba(13,38,24,0.12);
  background: rgba(13,38,24,0.04);
  color: var(--gray);
}
.tl-line {
  background: rgba(13,38,24,0.12);
}
.progress-fill {
  background: linear-gradient(90deg, var(--green3), var(--lime));
}
.option-radio {
  border-color: var(--gray2);
}
.option-item.selected {
  border-color: rgba(19,111,61,0.26);
  background: rgba(31,223,120,0.09);
}
.option-item.selected .option-radio {
  border-color: var(--green3);
  background: var(--green3);
}
.pred-bar:nth-child(8),
.pred-bar:nth-child(9),
.pred-bar:nth-child(10) {
  background: rgba(13,38,24,0.05);
  border-color: rgba(13,38,24,0.16);
}
.ref-row {
  border-color: rgba(13,38,24,0.10);
  background: rgba(255,255,255,0.54);
}
.ai-insight-body,
.pred-warn-text,
.result-sub {
  color: var(--gray);
}
.ai-insight-body strong,
.pred-warn-text strong {
  color: var(--ink);
}

.arch-layout {
  gap: 28px;
}
.arch-layer,
.arch-layer-gold,
.arch-layer-blue,
.arch-layer-pink {
  border-color: rgba(13,38,24,0.12);
  background:
    radial-gradient(circle at 90% 10%, rgba(186,243,21,0.16), transparent 46%),
    linear-gradient(135deg, rgba(255,255,255,0.76), rgba(245,250,238,0.90));
  box-shadow: 0 20px 64px rgba(24,35,48,0.10);
}
.arch-layer::after,
.arch-layer-gold::after,
.arch-layer-blue::after,
.arch-layer-pink::after {
  display: none;
}
.arch-layer-index {
  color: rgba(19,111,61,0.30);
}
.arch-layer-gold .arch-layer-tag,
.arch-layer-blue .arch-layer-tag,
.arch-layer-pink .arch-layer-tag {
  color: var(--green3);
}
.arch-layer-body h3 {
  color: var(--ink);
}
.arch-layer-body p {
  color: var(--gray);
}
.arch-diagram {
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(circle at 90% 4%, rgba(186,243,21,0.14), transparent 44%),
    linear-gradient(135deg, #09170e 0%, #0a2317 54%, #06120b 100%);
  box-shadow: 0 30px 90px rgba(24,35,48,0.20);
}
.arch-diagram .diagram-heading strong,
.arch-diagram .diagram-node span {
  color: var(--white);
}
.diagram-heading span,
.diagram-node small,
.diagram-arrow {
  color: rgba(224,238,232,0.68);
}
.diagram-node,
.diagram-node-gold,
.diagram-node-blue,
.diagram-node-core,
.diagram-node-muted {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}
.ai-vision {
  border-top-color: rgba(255,255,255,0.12);
}
.arch-diagram .ai-vision span {
  color: var(--lime);
}
.arch-diagram .ai-vision p {
  color: rgba(229,239,233,0.74);
}

.how-cols,
.roles-grid {
  border: 0;
  background: transparent;
  gap: 18px;
  overflow: visible;
}
.how-col,
.role-card,
.feature-item,
.integration-card,
.founder-card {
  border: 1px solid rgba(13,38,24,0.12);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.72), rgba(245,250,238,0.90)),
    var(--cream);
  box-shadow: 0 18px 60px rgba(24,35,48,0.08);
}
.how-col {
  padding: 42px;
}
.how-col,
.how-col:last-child {
  border-right: 1px solid rgba(13,38,24,0.12);
}
.how-rule {
  background: var(--lime);
}
.how-num {
  color: rgba(19,111,61,0.28);
  font-size: 58px;
}
.role-card {
  background:
    radial-gradient(circle at 86% 10%, rgba(186,243,21,0.15), transparent 42%),
    rgba(255,255,255,0.70);
}
.role-card:hover {
  background:
    radial-gradient(circle at 86% 10%, rgba(186,243,21,0.20), transparent 42%),
    rgba(255,255,255,0.82);
}
.role-mark,
.role-mark.role-mark-gold,
.role-mark.role-mark-blue,
.role-mark.role-mark-pink {
  color: var(--green3);
  background: rgba(31,223,120,0.10);
  border-color: rgba(19,111,61,0.20);
}
.role-sub {
  color: #4e6b5a;
}
.role-list li::before,
.role-card:nth-child(2) .role-list li::before,
.role-card:nth-child(3) .role-list li::before,
.role-card:nth-child(4) .role-list li::before {
  background: var(--lime);
}
.features-2col {
  gap: 40px;
}
.features-group {
  gap: 12px;
}
.fg-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  color: var(--green3);
  border-bottom: 1.5px solid rgba(13,38,24,0.10);
  padding-bottom: 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fg-title::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--lime);
  flex-shrink: 0;
}
.features-group:last-child .fg-title::before {
  background: var(--green3);
}
.feature-item {
  padding: 22px 24px;
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
.feature-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, rgba(186,243,21,0.70), rgba(186,243,21,0.10));
  border-radius: 24px 24px 0 0;
}
.features-group:last-child .feature-item::before {
  background: linear-gradient(90deg, rgba(19,111,61,0.50), rgba(19,111,61,0.05));
}
.feature-item:hover {
  padding-left: 24px;
  transform: translateY(-3px);
  box-shadow: 0 24px 64px rgba(24,35,48,0.12);
}
.fi-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fi-name::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime3);
  flex-shrink: 0;
  margin-top: 1px;
}
.features-group:last-child .fi-name::before {
  background: var(--green3);
}

.integration-legend {
  border-top-color: rgba(13,38,24,0.10);
}
.integration-legend span,
.integration-legend a {
  color: var(--gray);
}
.integration-legend a {
  color: var(--green3);
}
.legend-green {
  background: var(--green3);
}
.legend-gray {
  background: var(--gray2);
}
.integration-card {
  min-height: 220px;
}
.integration-card:hover {
  background:
    radial-gradient(circle at 90% 10%, rgba(186,243,21,0.18), transparent 44%),
    rgba(255,255,255,0.82);
  border-color: rgba(13,38,24,0.16);
}
.integration-card::before {
  background: rgba(13,38,24,0.12);
}
.integration-card.integration-launch {
  border-color: rgba(19,111,61,0.24);
}
.integration-card.integration-launch::before {
  background: linear-gradient(90deg, var(--green3), var(--lime));
}
.integration-abbr,
.integration-launch .integration-abbr {
  color: var(--green3);
  border-color: rgba(19,111,61,0.20);
  background: rgba(31,223,120,0.10);
}
.integration-note {
  border-color: rgba(255,181,71,0.24);
  background:
    radial-gradient(circle at 88% 8%, rgba(255,181,71,0.12), transparent 40%),
    rgba(255,255,255,0.70);
  box-shadow: 0 18px 58px rgba(24,35,48,0.08);
}
.integration-note span {
  color: var(--yellow3);
}

.team-lead {
  max-width: 920px;
}
.founder-card.founder-card-gold {
  border-color: rgba(13,38,24,0.12);
}
.founder-av,
.founder-av.founder-av-gold {
  color: var(--ink);
  border-color: rgba(19,111,61,0.18);
  background: linear-gradient(135deg, #77cc5b, var(--lime));
}
.founder-quote,
.founder-quote.founder-quote-gold {
  border-left-color: var(--lime);
  color: var(--ink);
}

.cta-section,
footer {
  background:
    radial-gradient(ellipse 38% 34% at 16% 8%, rgba(31,223,120,0.15), transparent 62%),
    radial-gradient(ellipse 36% 32% at 86% 12%, rgba(186,243,21,0.10), transparent 62%),
    #06120b;
  color: var(--white);
}
.cta-title {
  color: var(--white);
}
.cta-sub {
  color: rgba(231,239,229,0.76);
}
.cta-input {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--white);
}
.cta-input:focus {
  border-color: rgba(186,243,21,0.38);
  background: rgba(186,243,21,0.07);
}
.cta-note,
.footer-copy {
  color: rgba(231,239,229,0.42);
}
.footer-status {
  color: var(--green);
}

/* ── PIPELINE DIAGRAM ── */
.pipeline-diagram {
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(13,38,24,0.10);
  border-radius: 20px;
  padding: 36px 40px 28px;
  margin-bottom: 28px;
  box-shadow: 0 12px 40px rgba(24,35,48,0.06);
}
.pipeline-label {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--gray2);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 28px;
}
.pipeline-stages {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.ps-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 88px;
  flex-shrink: 0;
}
.ps-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(13,38,24,0.22);
  flex-shrink: 0;
}
.ps-dot.ps-dot-blue   { background: #3b82f6; }
.ps-dot.ps-dot-yellow { background: var(--yellow); }
.ps-dot.ps-dot-green  { background: var(--green3); }
.ps-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gray);
  text-align: center;
  white-space: nowrap;
}
.ps-count {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  font-weight: 400;
}
.ps-stage.ps-stage-active .ps-name { color: var(--green3); font-weight: 700; }
.ps-count.ps-count-green { color: var(--green3); }
.ps-connector {
  flex: 1;
  height: 1px;
  background: rgba(13,38,24,0.15);
  margin-bottom: 22px;
  min-width: 20px;
}
.ps-connector.ps-connector-green { background: var(--green3); }
.pipeline-record-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gray2);
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(13,38,24,0.08);
}
.prn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

/* ── CAPABILITY GRID ── */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cap-card {
  background:
    radial-gradient(circle at 88% 12%, rgba(186,243,21,0.13), transparent 48%),
    rgba(255,255,255,0.68);
  border: 1px solid rgba(13,38,24,0.10);
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 12px 36px rgba(24,35,48,0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cap-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 52px rgba(24,35,48,0.10);
}
.cap-visual {
  height: 72px;
  display: flex;
  align-items: flex-end;
}
.cap-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.cap-desc {
  font-size: 14.5px;
  color: #253c2d;
  line-height: 1.68;
  letter-spacing: -0.003em;
}

/* Cap visual: funnel bars */
.cv-funnel {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.cv-bar {
  height: 7px;
  border-radius: 4px;
  background: rgba(13,38,24,0.15);
  transition: width 1s ease;
}
.cv-bar.cv-bar-green { background: var(--green3); }
.cv-w-full { width: 100%; }
.cv-w-72   { width: 72%; }
.cv-w-55   { width: 55%; }
.cv-w-38   { width: 38%; }
.cv-w-24   { width: 24%; }

/* Cap visual: timeline */
.cv-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  justify-content: flex-end;
}
.cv-tl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gray);
}
.cv-tl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cv-tl-green .cv-tl-dot { background: var(--green3); }
.cv-tl-yellow .cv-tl-dot { background: var(--yellow); }
.cv-tl-gray .cv-tl-dot { background: var(--gray2); }
.cv-tl-green { color: var(--green3); }
.cv-tl-yellow { color: var(--yellow3); }

/* Cap visual: forecast bars */
.cv-forecast {
  position: relative;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: flex-end;
}
.cv-fc-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 100%;
  width: 100%;
}
.cv-fc-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
}
.cv-fc-done { background: var(--green3); opacity: 0.7; }
.cv-fc-proj { background: var(--lime3); opacity: 0.55; border: 1px dashed var(--green3); }
.cv-fc-h4 { height: 40%; }
.cv-fc-h5 { height: 55%; }
.cv-fc-h6 { height: 62%; }
.cv-fc-h7 { height: 72%; }
.cv-fc-h8 { height: 82%; }
.cv-fc-h9 { height: 92%; }

/* Cap visual: referral source bars */
.cv-sources {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  justify-content: flex-end;
}
.cv-src-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cv-src-name {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--gray);
  min-width: 54px;
}
.cv-src-track {
  flex: 1;
  height: 6px;
  background: rgba(13,38,24,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.cv-src-bar {
  height: 100%;
  border-radius: 3px;
}
.cv-src-green  { background: var(--green3); }
.cv-src-blue   { background: #3b82f6; }
.cv-src-yellow { background: var(--yellow3); }
.cv-src-w90  { width: 90%; }
.cv-src-w60  { width: 60%; }
.cv-src-w55  { width: 55%; }
.cv-src-w38  { width: 38%; }
.cv-src-w18  { width: 18%; }
.cv-src-pct {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--gray);
  min-width: 26px;
  text-align: right;
}
.cv-src-pct.cv-pct-green { color: var(--green3); }
.cv-src-pct.cv-pct-warn  { color: var(--yellow3); }

/* ── HERO H1 FLUID ── */
.hero-h1 {
  font-size: clamp(52px, 6.2vw, 104px) !important;
}

/* ── CTA TITLE FLUID ── */
.cta-title {
  font-size: clamp(42px, 5.4vw, 88px) !important;
}

/* ── ARCHITECTURE SECTION: DARK ── */
.architecture-section {
  background:
    radial-gradient(ellipse 52% 42% at 88% 8%, rgba(186,243,21,0.12), transparent 62%),
    radial-gradient(ellipse 44% 38% at 5% 22%, rgba(31,223,120,0.08), transparent 64%),
    linear-gradient(180deg, #09170e 0%, #06120b 60%, #0a1d12 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  color: var(--white) !important;
}
.architecture-section .eyebrow {
  color: var(--lime) !important;
}
.architecture-section .section-title {
  color: #e2f0db !important;
}
.architecture-section .section-body {
  color: rgba(210,232,218,0.70) !important;
}
.architecture-section .arch-layer,
.architecture-section .arch-layer-gold,
.architecture-section .arch-layer-blue,
.architecture-section .arch-layer-pink {
  border-color: rgba(255,255,255,0.10) !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(186,243,21,0.08), transparent 50%),
    rgba(255,255,255,0.05) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,0.28) !important;
}
.architecture-section .arch-layer-tag,
.architecture-section .arch-layer-gold .arch-layer-tag,
.architecture-section .arch-layer-blue .arch-layer-tag,
.architecture-section .arch-layer-pink .arch-layer-tag {
  color: var(--lime) !important;
}
.architecture-section .arch-layer-body h3 {
  color: #e2f0db !important;
}
.architecture-section .arch-layer-body p {
  color: rgba(210,232,218,0.68) !important;
}
.architecture-section .arch-layer-index {
  color: rgba(186,243,21,0.24) !important;
}
.architecture-section .arch-chips span {
  border-color: rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.05) !important;
  color: rgba(210,232,218,0.68) !important;
}

/* ── SECTION TITLE EM: PLAYFAIR SERIF ON LIGHT BACKGROUNDS ── */
.section-title em {
  font-family: var(--serif) !important;
  font-style: italic;
  font-weight: 700;
  background: none !important;
  -webkit-text-fill-color: var(--green3) !important;
  color: var(--green3) !important;
  letter-spacing: -0.01em;
}

/* ── FOOTER Z-INDEX FIX ── */
footer {
  position: relative;
  z-index: 1;
}

/* ── HERO: SINGLE COLUMN CENTERED ── */
.hero {
  min-height: auto;
  display: block;
  align-items: initial;
  padding: 150px 0 96px;
}
.hero-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-inner .hero-h1 {
  max-width: 820px;
}
.hero-inner .hero-sub {
  max-width: 680px;
  text-align: center;
}
.hero-inner .hero-ctas {
  justify-content: center;
}
.hero-proof-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.10);
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.hpr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 40px;
}
.hpr-num {
  font-family: var(--display);
  font-size: 52px;
  line-height: 1;
  color: var(--white);
  font-weight: 400;
}
.hpr-num.hpr-num-yellow { color: var(--yellow2); }
.hpr-label {
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(200,220,210,0.62);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  max-width: 160px;
  text-align: center;
  line-height: 1.5;
}
.hpr-divider {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* ── SITE BG MATCH APP PALETTE ── */
body::before {
  background:
    radial-gradient(ellipse 58% 42% at 4% 8%, rgba(31,223,120,0.08), transparent 64%),
    radial-gradient(ellipse 42% 34% at 92% 6%, rgba(186,243,21,0.10), transparent 62%),
    radial-gradient(ellipse 70% 48% at 72% 100%, rgba(255,255,255,0.60), transparent 58%),
    linear-gradient(180deg, #eef4e8 0%, #e8f2e0 72%, #eef4e8 100%) !important;
}
body {
  background: #eef4e8 !important;
}
.problem-section,
.platform-section,
.how-section,
.roles-section,
.features-section,
.integrations-section,
.team-section {
  background:
    radial-gradient(ellipse 42% 32% at 86% 6%, rgba(186,243,21,0.12), transparent 62%),
    radial-gradient(ellipse 46% 34% at 5% 18%, rgba(31,223,120,0.06), transparent 66%),
    linear-gradient(180deg, #eef4e8 0%, #e8f2e0 100%) !important;
}


/* ═══════════════════════════════════════════
   ROADMAP SECTION
═══════════════════════════════════════════ */
.roadmap-section {
  padding: 128px 0;
  background:
    radial-gradient(ellipse 42% 32% at 86% 6%, rgba(186,243,21,0.12), transparent 62%),
    radial-gradient(ellipse 46% 34% at 5% 18%, rgba(31,223,120,0.06), transparent 66%),
    linear-gradient(180deg, #eef4e8 0%, #e8f2e0 100%);
  border-top: 1px solid rgba(13,38,24,0.07);
  color: var(--ink);
}
.roadmap-header {
  max-width: 860px;
  margin-bottom: 56px;
}
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.phase-card {
  border-radius: 24px;
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.phase-active {
  background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(245,250,238,0.96));
  border: 1.5px solid rgba(19,111,61,0.24);
  box-shadow: 0 22px 68px rgba(24,35,48,0.11);
}
.phase-next {
  background: linear-gradient(135deg, rgba(255,255,255,0.74), rgba(245,250,238,0.90));
  border: 1px solid rgba(13,38,24,0.12);
  box-shadow: 0 18px 56px rgba(24,35,48,0.08);
}
.phase-future {
  background: linear-gradient(135deg, rgba(255,255,255,0.50), rgba(245,250,238,0.66));
  border: 1px solid rgba(13,38,24,0.08);
  box-shadow: 0 14px 44px rgba(24,35,48,0.05);
  opacity: 0.88;
}
.phase-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.phase-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
}
.phase-pill-active {
  background: rgba(31,223,120,0.14);
  color: var(--green3);
  border: 1px solid rgba(19,111,61,0.24);
}
.phase-pill-next {
  background: rgba(142,201,15,0.12);
  color: var(--lime3);
  border: 1px solid rgba(142,201,15,0.28);
}
.phase-pill-future {
  background: rgba(13,38,24,0.05);
  color: var(--gray);
  border: 1px solid rgba(13,38,24,0.12);
}
.phase-num {
  font-family: var(--display);
  font-size: 64px;
  line-height: 0.9;
  color: rgba(19,111,61,0.14);
}
.phase-title {
  font-size: 23px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.phase-desc {
  font-size: 14.5px;
  color: #253c2d;
  line-height: 1.70;
}
.phase-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phase-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #253c2d;
  line-height: 1.55;
}
.phase-list li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--green3);
  flex-shrink: 0;
  margin-top: 7px;
}
.phase-next .phase-list li::before { background: var(--lime3); }
.phase-future .phase-list li::before { background: var(--gray2); }
.phase-ai-note {
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(186,243,21,0.10);
  border: 1px solid rgba(142,201,15,0.24);
  margin-top: 4px;
}
.pan-label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--lime3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.pan-text {
  font-size: 13px;
  color: #253c2d;
  line-height: 1.65;
}

/* ── HOW-HEAD SERIF EM ── */
.how-head em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--green3);
}

/* ── PLATFORM INSIGHT STRIP ── */
.platform-insight-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(13,38,24,0.10);
  border-radius: 22px;
  padding: 44px 48px;
  margin-top: 28px;
  box-shadow: 0 14px 44px rgba(24,35,48,0.07);
}
.pis-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pis-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green3);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.pis-head {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.2;
}
.pis-desc {
  font-size: 14.5px;
  color: #253c2d;
  line-height: 1.68;
}
.pis-divider {
  width: 1px;
  height: 80px;
  background: rgba(13,38,24,0.12);
  margin: 0 44px;
  flex-shrink: 0;
}

/* ── VISUAL COPY SYSTEM ── */
.problem-block-right {
  justify-content: center;
}
.problem-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.problem-path span {
  position: relative;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(19,111,61,0.16);
  background:
    radial-gradient(circle at 85% 12%, rgba(186,243,21,0.16), transparent 44%),
    rgba(255,255,255,0.62);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}
.problem-path span:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -9px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: rgba(19,111,61,0.26);
}
.problem-path .path-muted {
  color: var(--gray2);
  border-color: rgba(13,38,24,0.10);
  background: rgba(13,38,24,0.04);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.problem-path .path-alert {
  color: var(--yellow3);
  border-color: rgba(255,181,71,0.28);
  background: rgba(255,181,71,0.12);
}
.problem-path .path-live {
  color: var(--green3);
  border-color: rgba(19,111,61,0.24);
  background: rgba(31,223,120,0.11);
}
.problem-path-split span:nth-child(2)::after {
  transform: rotate(12deg);
}

.how-col {
  display: flex;
  flex-direction: column;
}
.how-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
}
.how-flow span {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(19,111,61,0.15);
  background: rgba(255,255,255,0.58);
  color: var(--green3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.role-list li {
  min-height: 42px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid rgba(13,38,24,0.09);
  border-radius: 12px;
  background: rgba(255,255,255,0.42);
}
.role-list li::before {
  margin-top: 0;
}

.phase-card {
  position: relative;
  overflow: hidden;
}
.phase-card::after {
  content: '';
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--green3), var(--lime), rgba(19,111,61,0.10));
}
.phase-next::after {
  background: linear-gradient(90deg, var(--lime3), rgba(142,201,15,0.12));
}
.phase-future::after {
  background: linear-gradient(90deg, var(--gray2), rgba(13,38,24,0.08));
}
.phase-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.phase-list li {
  min-height: 38px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(13,38,24,0.08);
}
.phase-list li::before {
  margin-top: 0;
}

.feature-item {
  min-height: 112px;
}
.fi-desc {
  max-width: 42ch;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  nav { padding: 16px 28px; }
  nav.scrolled { padding: 12px 28px; }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }

  .container { width: calc(100% - 48px); padding: 0; }

  .section-title { font-size: 38px; }
  .cta-title { font-size: 56px; }

  .pillars-grid { grid-template-columns: 1fr; gap: 16px; }
  .pillar-card { padding: 36px 30px; }

  .cap-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .platform-insight-strip { grid-template-columns: 1fr; padding: 32px 28px; }
  .pis-divider { width: 100%; height: 1px; margin: 20px 0; }
  .pipeline-diagram { padding: 24px 20px 20px; }
  .pipeline-stages { gap: 0; }
  .ps-stage { min-width: 72px; }
  .ps-count { font-size: 20px; }

  .hpr-item { padding: 0 24px; }
  .hpr-num { font-size: 40px; }
  .hero-inner .hero-h1 { font-size: clamp(40px, 5.5vw, 82px); }

  .hero-split { grid-template-columns: 1fr; gap: 48px; }
  .hero-left { max-width: 100%; }

  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-questions { grid-template-columns: 1fr; gap: 10px; }

  .problem-block { grid-template-columns: 1fr; gap: 32px; }
  .problem-num { font-size: 64px; }

  .arch-layout { grid-template-columns: 1fr; }
  .arch-diagram { position: relative; top: auto; }

  .how-cols { grid-template-columns: 1fr; }
  .how-col { border-right: none; border-bottom: 1px solid var(--bdr); }
  .how-col:last-child { border-bottom: none; }

  .roles-grid { grid-template-columns: 1fr 1fr; }

  .features-2col { grid-template-columns: 1fr; gap: 48px; }

  .integration-grid { grid-template-columns: 1fr 1fr; }
  .integration-legend a { margin-left: 0; }

  .founder-grid { grid-template-columns: 1fr; gap: 20px; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-tagline { max-width: 100%; }

  .roadmap-grid { grid-template-columns: 1fr; }
  .phase-list { grid-template-columns: repeat(3, 1fr); }

  .app-sidebar { display: none; }
  .app-body { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .predictor-inputs { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .reveal-left,
  .reveal-right { transform: translateY(28px); }

  .section-title { font-size: 32px; }
  .hero-sub { font-size: 17px; }

  .pillars-grid { grid-template-columns: 1fr; }
  .pillar-card { padding: 32px 26px; }
  .pillar-head { font-size: 20px; }
  .pillar-num { font-size: 42px; }
  .pa-value { font-size: 32px; }

  .cap-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cap-card { padding: 22px 18px; }
  .cap-visual { height: 54px; }
  .problem-metrics { grid-template-columns: 1fr 1fr; }
  .problem-path { grid-template-columns: 1fr 1fr; }
  .problem-path span:not(:last-child)::after { display: none; }
  .phase-list { grid-template-columns: 1fr 1fr; }

  .hero-proof-row { gap: 0; padding-top: 28px; }
  .hpr-item { padding: 0 16px; }
  .hpr-num { font-size: 34px; }
  .hpr-label { font-size: 9.5px; max-width: 120px; }
  .hpr-divider { height: 36px; }
  .proof-value { font-size: 60px; }
  .problem-heading { font-size: 19px; }

  .hero { padding: 100px 0 64px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost { width: 100%; justify-content: center; }

  .problem-section,
  .proof-strip,
  .platform-section,
  .architecture-section,
  .how-section,
  .roles-section,
  .features-section,
  .integrations-section,
  .roadmap-section,
  .team-section,
  .cta-section { padding: 80px 0; }

  .how-col { padding: 36px 28px; }

  .roles-grid { grid-template-columns: 1fr; }

  .proof-grid { grid-template-columns: 1fr; }
  .proof-stat { min-height: 158px; }
  .arch-layer { grid-template-columns: 1fr; }
  .arch-layer-index { font-size: 56px; }
  .integration-grid { grid-template-columns: 1fr; }

  .cta-form { flex-direction: column; }
  .cta-input { min-width: auto; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  .main-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .container { width: calc(100% - 28px); padding: 0; }
  nav { padding: 14px 20px; }
  .section-title { font-size: 27px; letter-spacing: -0.022em; }

  /* Tighter section padding on small screens */
  .problem-section,
  .proof-strip,
  .pillars-section,
  .platform-section,
  .architecture-section,
  .how-section,
  .roles-section,
  .features-section,
  .integrations-section,
  .roadmap-section,
  .team-section,
  .cta-section { padding: 60px 0; }

  .hero { padding: 80px 0 40px; }
  .hero-sub { font-size: 15.5px; line-height: 1.70; }
  .hero-inner { gap: 20px; }

  .hero-data-panel { padding: 18px 20px; }
  .hdp-row { grid-template-columns: 34px 1fr; }
  .hdp-track { display: none; }
  .hdp-metrics { grid-template-columns: repeat(3, 1fr); }

  .cap-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Hero app preview: simplified on very small screens */

  /* Problem metrics: single column on very small screens */
  .problem-metrics { grid-template-columns: 1fr; }
  .problem-metric { min-height: 140px; padding: 20px; }
  .pm-value { font-size: 44px; }
  .problem-path,
  .how-flow,
  .phase-list { grid-template-columns: 1fr; }

  .pipeline-stages { flex-wrap: wrap; gap: 8px; justify-content: center; }
  .ps-connector { display: none; }
  .ps-stage { min-width: 80px; background: rgba(255,255,255,0.5); border-radius: 10px; padding: 10px 12px; border: 1px solid rgba(13,38,24,0.10); }

  .hero-proof-row { flex-direction: column; gap: 20px; border-top: none; padding-top: 20px; }
  .hpr-divider { display: none; }
  .hpr-item { padding: 0; }
  .hpr-num { font-size: 40px; }

  .roles-grid { grid-template-columns: 1fr; }
  .role-card { padding: 24px 20px; }

  .how-col { padding: 28px 20px; }

  /* Feature items: auto height + tighter padding on mobile */
  .feature-item { min-height: 0; padding: 18px 20px; }
  .features-group { gap: 10px; }
  .fi-desc { max-width: none; }

  /* Roadmap */
  .roadmap-header { margin-bottom: 32px; }
  .phase-card { padding: 28px 24px; }

  .proof-questions,
  .arch-layer,
  .arch-diagram,
  .integration-card,
  .integration-note { border-radius: 12px; }
  .proof-questions { padding: 20px; }
  .integration-legend { flex-direction: column; align-items: flex-start; }

  .founder-card { padding: 28px 24px; }

  /* CTA section */
  .cta-title { font-size: 36px; letter-spacing: -0.028em; }

  /* Pillars */
  .pillars-grid { grid-template-columns: 1fr; gap: 16px; }
  .pillar-card { padding: 32px 24px; }
  .pillar-head { font-size: 19px; }
}

/* ═══════════════════════════════════════════
   PLATFORM BLUEPRINT
═══════════════════════════════════════════ */
.blueprint-section {
  padding: 120px 0;
  background:
    radial-gradient(ellipse 38% 30% at 14% 12%, rgba(31,223,120,0.12), transparent 64%),
    radial-gradient(ellipse 34% 30% at 88% 15%, rgba(255,181,71,0.14), transparent 66%),
    radial-gradient(ellipse 50% 36% at 52% 88%, rgba(96,165,250,0.10), transparent 68%),
    linear-gradient(180deg, #eef5e9 0%, #e8f1f7 100%);
  border-top: 1px solid rgba(13,38,24,0.07);
}
.blueprint-header {
  max-width: 900px;
  margin: 0 auto 58px;
  text-align: center;
}
.blueprint-header .section-title { color: var(--ink); }
.blueprint-header .section-body {
  margin-left: auto;
  margin-right: auto;
  color: rgba(13,38,24,0.58);
}
.blueprint-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.18fr 0.92fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "access  events  pipeline"
    "tasks   events  pipeline"
    "analytics analytics analytics";
  gap: 18px;
  align-items: stretch;
}
.bp-access    { grid-area: access; }
.bp-graph     { grid-area: events; }
.bp-lifecycle { grid-area: pipeline; }
.bp-tasks     { grid-area: tasks; }
.bp-output    { grid-area: analytics; }
.bp-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(13,38,24,0.10);
  border-radius: 18px;
  padding: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.80), rgba(255,255,255,0.54)),
    radial-gradient(circle at 18% 0%, rgba(31,223,120,0.08), transparent 46%);
  box-shadow: 0 24px 70px rgba(13,38,24,0.08);
}
.bp-panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0.72;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.58), transparent) -70% 0 / 42% 100% no-repeat;
}
.bp-panel-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.bp-panel-kicker {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(13,38,24,0.38);
}
.bp-panel h3 {
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
}

/* ── ROLE LANES ── */
.bp-role-lanes {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-role-lane {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid rgba(13,38,24,0.09);
  background: rgba(255,255,255,0.62);
  transform-origin: left center;
}
.bp-role-code {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--ink);
  background: rgba(13,38,24,0.06);
}
.bp-role-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bp-role-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.bp-role-caps {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(13,38,24,0.38);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-scope-pill {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bp-scope-full { background: rgba(31,223,120,0.14); color: #0d5c34; }
.bp-scope-net  { background: rgba(96,165,250,0.14); color: #1e40af; }
.bp-scope-site { background: rgba(99,102,241,0.12); color: #3730a3; }
.bp-scope-work { background: rgba(255,181,71,0.16); color: #92400e; }
.bp-scope-view { background: rgba(13,38,24,0.07);   color: rgba(13,38,24,0.44); }
.bp-lane-full {
  border-color: rgba(31,223,120,0.24);
  background: rgba(237,255,244,0.74);
}
.bp-lane-full .bp-role-code { background: rgba(31,223,120,0.14); color: #11663c; }
.bp-lane-net {
  border-color: rgba(96,165,250,0.22);
  background: rgba(239,247,255,0.76);
}
.bp-lane-net .bp-role-code { background: rgba(96,165,250,0.14); color: #1d4ed8; }
.bp-lane-site {
  border-color: rgba(99,102,241,0.20);
  background: rgba(243,240,255,0.72);
}
.bp-lane-site .bp-role-code { background: rgba(99,102,241,0.12); color: #3730a3; }
.bp-lane-work {
  border-color: rgba(255,181,71,0.28);
  background: rgba(255,248,232,0.78);
}
.bp-lane-work .bp-role-code { background: rgba(255,181,71,0.18); color: #92400e; }
.bp-lane-view {
  opacity: 0.82;
  background: rgba(255,255,255,0.48);
}

/* ── EVENT STORE DIAGRAM ── */
.bp-event-diagram {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  gap: 8px;
  align-items: start;
  margin-top: 6px;
}
.bp-event-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-ev-col-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(13,38,24,0.36);
  margin-bottom: 5px;
}
.bp-event-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(13,38,24,0.08);
  background: rgba(255,255,255,0.62);
  font-size: 11px;
  font-weight: 700;
  color: rgba(13,38,24,0.70);
}
.bp-ev-out {
  background: rgba(237,255,244,0.62);
  border-color: rgba(31,223,120,0.18);
}
.bp-ev-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.bp-ev-green  { background: #1fdf78; box-shadow: 0 0 0 3px rgba(31,223,120,0.18); }
.bp-ev-blue   { background: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,0.18); }
.bp-ev-amber  { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,0.18); }
.bp-ev-purple { background: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,0.18); }
.bp-ev-teal   { background: #2dd4bf; box-shadow: 0 0 0 3px rgba(45,212,191,0.18); }
.bp-ev-rose   { background: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,0.18); }
.bp-ev-arrow {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 900;
  color: #1fdf78;
}
.bp-event-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 30px;
}
.bp-event-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(31,223,120,0.40);
  background: radial-gradient(circle, rgba(31,223,120,0.22), rgba(31,223,120,0.04));
  box-shadow: 0 0 0 8px rgba(31,223,120,0.07), 0 12px 28px rgba(31,223,120,0.14);
  text-align: center;
}
.bp-ec-title {
  font-size: 8.5px;
  font-weight: 900;
  line-height: 1.1;
  color: #0d5c34;
  font-family: var(--mono);
}
.bp-ec-sub {
  display: block;
  margin-top: 3px;
  font-size: 7px;
  font-weight: 700;
  color: rgba(13,38,24,0.42);
  line-height: 1.3;
  text-align: center;
}
.bp-event-stats {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(13,38,24,0.07);
}
.bp-event-stats span {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(13,38,24,0.50);
}
.bp-event-stats b { font-weight: 900; color: var(--ink); }

/* ── PATIENT GRAPH (center panel) ── */
.bp-graph-map {
  position: relative;
  z-index: 2;
  min-height: 572px;
  margin-top: 10px;
  border-radius: 16px;
  background:
    linear-gradient(rgba(13,38,24,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,38,24,0.04) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(31,223,120,0.14), transparent 34%);
  background-size: 34px 34px, 34px 34px, 100% 100%;
  border: 1px solid rgba(13,38,24,0.075);
}
.bp-graph-node {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 126px;
  min-height: 68px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(13,38,24,0.12);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 16px 34px rgba(13,38,24,0.10);
  text-align: center;
  transition: transform 0.20s ease, box-shadow 0.20s ease;
}
.bp-graph-node:hover {
  transform: scale(1.06);
  z-index: 10;
}
.bp-graph-node span {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bp-graph-node small {
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.28;
  color: rgba(13,38,24,0.42);
}
.bp-nd {
  display: block;
  margin-top: 4px;
  font-size: 8.5px;
  font-weight: 700;
  font-style: normal;
  color: rgba(13,38,24,0.34);
  line-height: 1.3;
}
.bp-node-patient {
  top: 50%;
  left: 50%;
  width: 154px;
  min-height: 96px;
  transform: translate(-50%, -50%);
  border-color: rgba(31,223,120,0.44);
  background:
    radial-gradient(circle at 50% 0%, rgba(31,223,120,0.18), transparent 62%),
    rgba(255,255,255,0.94);
  box-shadow: 0 22px 48px rgba(31,223,120,0.18);
  isolation: isolate;
}
.bp-node-patient span { font-size: 17px; letter-spacing: -0.03em; }
.bp-node-patient:hover { transform: translate(-50%, -50%) scale(1.04) !important; box-shadow: 0 28px 56px rgba(31,223,120,0.26) !important; }
.bp-node-study   { top: 38px;   left: 50%; transform: translateX(-50%); }
.bp-node-history { top: 130px;  right: 24px; }
.bp-node-visit   { right: 28px; bottom: 118px; }
.bp-node-note    { left: 28px;  bottom: 118px; }
.bp-node-assign  { top: 130px;  left: 24px; }
.bp-node-lot     { bottom: 30px; left: 50%; transform: translateX(-50%); }
.bp-link {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(13,38,24,0.09);
}
.bp-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(31,223,120,0.82), transparent);
  transform: translateX(-100%);
}
.bp-link-1 { left: calc(50% - 1px); top: 116px; width: 2px; height: 165px; }
.bp-link-1::after,
.bp-link-6::after {
  background: linear-gradient(180deg, transparent, rgba(31,223,120,0.82), transparent);
  transform: translateY(-100%);
}
.bp-link-2 { left: 50%; top: 266px; width: 158px; height: 2px; transform: rotate(-32deg); transform-origin: left center; }
.bp-link-3 { left: 50%; top: 324px; width: 164px; height: 2px; transform: rotate(34deg);  transform-origin: left center; }
.bp-link-4 { right: 50%; top: 324px; width: 164px; height: 2px; transform: rotate(-34deg); transform-origin: right center; }
.bp-link-5 { right: 50%; top: 266px; width: 158px; height: 2px; transform: rotate(32deg);  transform-origin: right center; }
.bp-link-6 { left: calc(50% - 1px); top: 326px; width: 2px; height: 166px; }

@keyframes bpRouteY {
  0%   { transform: translateY(-100%); opacity: 0; }
  15%, 70% { opacity: 1; }
  100% { transform: translateY(100%);  opacity: 0; }
}
@keyframes bpRouteX {
  0%   { transform: translateX(-100%); opacity: 0; }
  15%, 70% { opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; }
}
@keyframes bpPatientPulse {
  0%, 100% { box-shadow: 0 22px 48px rgba(31,223,120,0.15); }
  50%       { box-shadow: 0 28px 64px rgba(31,223,120,0.28); }
}
@media (prefers-reduced-motion: no-preference) {
  .bp-node-patient { animation: bpPatientPulse 3.6s ease-in-out infinite; }
  .bp-link::after  { animation: bpRouteX 2.6s linear infinite; }
  .bp-link-1::after,
  .bp-link-6::after { animation-name: bpRouteY; }
  .bp-link-2::after { animation-delay: 0.15s; }
  .bp-link-3::after { animation-delay: 0.35s; }
  .bp-link-4::after { animation-delay: 0.55s; }
  .bp-link-5::after { animation-delay: 0.75s; }
  .bp-link-6::after { animation-delay: 0.95s; }
}

/* ── PATIENT PIPELINE ── */
.bp-pipeline-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bp-pipe-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 16px;
  border-radius: 13px;
  text-align: center;
  border: 1px solid rgba(13,38,24,0.10);
  background: rgba(255,255,255,0.68);
  width: 130px;
  margin: 0 auto;
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(31,223,120,0.09);
}
.bp-pipe-start small {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(13,38,24,0.40);
}
.bp-pipe-split-line {
  width: 2px;
  height: 18px;
  background: rgba(13,38,24,0.14);
  margin: 0 auto;
}
.bp-pipe-fork {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}
.bp-fork-tag {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.bp-fork-match { background: rgba(237,255,244,0.84); color: #0d5c34; border: 1px solid rgba(31,223,120,0.28); }
.bp-fork-park  { background: rgba(255,248,232,0.84); color: #92400e; border: 1px solid rgba(255,181,71,0.28); }
.bp-pipe-lot-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(255,248,232,0.76);
  border: 1px dashed rgba(255,181,71,0.36);
}
.bp-pipe-lot-badge { flex: 1; }
.bp-pipe-lot-badge span { display: block; font-size: 12px; font-weight: 900; color: #92400e; }
.bp-pipe-lot-badge small { font-size: 9.5px; font-weight: 700; color: rgba(146,64,14,0.64); }
.bp-pipe-lot-arrow {
  font-size: 10px;
  font-weight: 800;
  color: #0d5c34;
  white-space: nowrap;
}
.bp-pipe-connector {
  width: 2px;
  height: 12px;
  background: linear-gradient(180deg, rgba(13,38,24,0.14), #1fdf78);
  margin: 0 auto 6px;
}
.bp-pipe-stages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 22px;
  position: relative;
}
.bp-pipe-stages::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #60a5fa, #22d3ee, #1fdf78, #baf315);
}
.bp-ps {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(13,38,24,0.08);
  background: rgba(255,255,255,0.62);
  position: relative;
}
.bp-ps-n {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 900;
  background: rgba(13,38,24,0.07);
  color: rgba(13,38,24,0.58);
}
.bp-ps strong { font-size: 12px; font-weight: 900; color: var(--ink); display: block; }
.bp-ps small  { font-size: 9.5px; font-weight: 700; color: rgba(13,38,24,0.40); display: block; margin-top: 1px; }
.bp-ps-6 { background: rgba(237,255,244,0.76); border-color: rgba(31,223,120,0.28); }
.bp-ps-6 .bp-ps-n { background: rgba(31,223,120,0.16); color: #0d5c34; }
.bp-ps-7 { background: rgba(237,255,244,0.54); border-color: rgba(186,243,21,0.28); }
.bp-ps-7 .bp-ps-n { background: rgba(186,243,21,0.20); color: #3a5200; }
.bp-pipe-exits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-left: 22px;
}
.bp-exit-pill {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.bp-exit-fail { background: rgba(254,226,226,0.72); color: #991b1b; border: 1px solid rgba(239,68,68,0.18); }
.bp-exit-wd   { background: rgba(241,245,249,0.76); color: rgba(13,38,24,0.46); border: 1px solid rgba(13,38,24,0.10); }
.bp-exit-park { background: rgba(255,248,232,0.72); color: #92400e; border: 1px solid rgba(255,181,71,0.24); }

/* ── COORDINATOR QUEUE ── */
.bp-coord-queue {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-qt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid rgba(13,38,24,0.09);
  background: rgba(255,255,255,0.62);
}
.bp-qt-badge {
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-top: 1px;
}
.bp-qt-red   { background: rgba(254,226,226,0.80); color: #991b1b; }
.bp-qt-amber { background: rgba(255,248,232,0.90); color: #92400e; }
.bp-qt-blue  { background: rgba(239,247,255,0.90); color: #1e40af; }
.bp-qt-green { background: rgba(237,255,244,0.86); color: #0d5c34; }
.bp-qt-body strong { display: block; font-size: 11.5px; font-weight: 900; color: var(--ink); }
.bp-qt-body small  { display: block; margin-top: 2px; font-size: 9.5px; font-weight: 700; color: rgba(13,38,24,0.40); }
.bp-qt-urgent { border-color: rgba(239,68,68,0.16); background: rgba(254,242,242,0.70); }
.bp-qt-today  { border-color: rgba(255,181,71,0.22); }
.bp-qt-match  { border-color: rgba(96,165,250,0.20); background: rgba(239,247,255,0.60); }
.bp-coord-stats {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(13,38,24,0.07);
}
.bp-coord-stats span { font-size: 10.5px; font-weight: 700; color: rgba(13,38,24,0.48); }
.bp-coord-stats b { font-weight: 900; color: var(--ink); }

/* ── ANALYTICS ROW ── */
.bp-analytics-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.bp-analytic-card {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(13,38,24,0.09);
  background: rgba(255,255,255,0.62);
}
.bp-ac-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 14px;
}
.bp-ac-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 24px;
  border-radius: 7px;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.bp-aci-green { background: rgba(31,223,120,0.14); color: #0d5c34; }
.bp-aci-blue  { background: rgba(96,165,250,0.14); color: #1e40af; }
.bp-aci-amber { background: rgba(255,181,71,0.16); color: #92400e; }
.bp-aci-rose  { background: rgba(244,63,94,0.12);  color: #9f1239; }
.bp-ac-head strong { font-size: 13px; font-weight: 900; color: var(--ink); }
.bp-ac-head small  { font-size: 9.5px; font-weight: 700; color: rgba(13,38,24,0.40); }
/* ROI bars */
.bp-ac-bars { display: flex; flex-direction: column; gap: 8px; }
.bp-ac-bar-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px;
}
.bp-bar-label { font-size: 10px; font-weight: 700; color: rgba(13,38,24,0.54); }
.bp-bar-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(13,38,24,0.08);
  overflow: hidden;
  min-width: 40px;
}
.bp-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1fdf78, #baf315);
}
.bp-bar-f78 { width: 78%; }
.bp-bar-f54 { width: 54%; }
.bp-bar-f31 { width: 31%; }
.bp-bar-pct {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
  color: var(--ink);
  width: 28px;
  text-align: right;
}
/* Enrollment predictor */
.bp-ac-predict {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bp-predict-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid rgba(96,165,250,0.36);
  background: radial-gradient(circle, rgba(96,165,250,0.14), transparent 70%);
}
.bp-pd-num {
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  font-family: var(--mono);
  line-height: 1;
}
.bp-predict-donut small {
  font-size: 9px;
  font-weight: 700;
  color: rgba(13,38,24,0.40);
}
.bp-predict-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bp-predict-info span { font-size: 10.5px; font-weight: 700; color: rgba(13,38,24,0.56); }
.bp-predict-info b { font-weight: 900; color: var(--ink); }
.bp-predict-warn { color: #92400e !important; font-size: 10px !important; }
/* Site rankings */
.bp-ac-sites { display: flex; flex-direction: column; gap: 7px; }
.bp-site-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(13,38,24,0.07);
  background: rgba(255,255,255,0.50);
}
.bp-site-1st { border-color: rgba(255,181,71,0.28); background: rgba(255,248,232,0.70); }
.bp-site-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  background: rgba(13,38,24,0.07);
  color: rgba(13,38,24,0.50);
}
.bp-site-1st .bp-site-badge { background: rgba(255,181,71,0.22); color: #92400e; }
.bp-site-nm  { font-size: 11px; font-weight: 800; color: var(--ink); }
.bp-site-pct { font-family: var(--mono); font-size: 11px; font-weight: 900; color: #0d5c34; }
/* Screen-fail analysis */
.bp-ac-fails { display: flex; flex-direction: column; gap: 10px; }
.bp-fail-big { display: flex; align-items: baseline; gap: 6px; }
.bp-fail-big strong {
  font-size: 32px;
  font-weight: 900;
  color: var(--ink);
  font-family: var(--mono);
  line-height: 1;
}
.bp-fail-big span { font-size: 11px; font-weight: 700; color: rgba(13,38,24,0.46); }
.bp-fail-list { display: flex; flex-direction: column; gap: 5px; }
.bp-fail-list span { font-size: 10.5px; font-weight: 700; color: rgba(13,38,24,0.56); }
.bp-fail-list b { font-weight: 900; color: var(--ink); }

/* ── KEYFRAMES ── */
@keyframes bpSheen {
  0%, 42% { background-position: -70% 0; }
  100% { background-position: 170% 0; }
}
@keyframes bpLaneIn {
  0%   { opacity: 0; transform: translateX(-12px) scaleX(0.96); }
  100% { opacity: 1; transform: translateX(0) scaleX(1); }
}
@keyframes bpEventCorePulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(31,223,120,0.07), 0 12px 28px rgba(31,223,120,0.14); }
  50%       { box-shadow: 0 0 0 12px rgba(31,223,120,0.12), 0 16px 36px rgba(31,223,120,0.22); }
}
@keyframes bpPsGlow {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: inset 0 0 0 1px rgba(31,223,120,0.24); }
}
@media (prefers-reduced-motion: no-preference) {
  .bp-panel::before { animation: bpSheen 6.8s ease-in-out infinite; }
  .bp-role-lane { animation: bpLaneIn 0.55s cubic-bezier(.23,1,.32,1) both; }
  .bp-role-lane:nth-child(2) { animation-delay: 0.08s; }
  .bp-role-lane:nth-child(3) { animation-delay: 0.16s; }
  .bp-role-lane:nth-child(4) { animation-delay: 0.24s; }
  .bp-role-lane:nth-child(5) { animation-delay: 0.32s; }
  .bp-event-core { animation: bpEventCorePulse 3.4s ease-in-out infinite; }
  .bp-ps-6, .bp-ps-7 { animation: bpPsGlow 2.8s ease-in-out infinite; }
}

/* ── RESPONSIVE ── */
@media (max-width: 1180px) {
  .blueprint-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "access   events"
      "pipeline events"
      "tasks    tasks"
      "analytics analytics";
  }
}
@media (max-width: 760px) {
  .blueprint-section { padding: 88px 0; }
  .blueprint-header { margin-bottom: 36px; text-align: left; }
  .blueprint-header .section-body { margin-left: 0; }
  .blueprint-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "access"
      "events"
      "pipeline"
      "tasks"
      "analytics";
  }
  .bp-panel { padding: 22px; border-radius: 14px; }
  .bp-analytics-row { grid-template-columns: 1fr 1fr; }
  .bp-panel h3 { font-size: 19px; }
}
@media (max-width: 480px) {
  .bp-analytics-row { grid-template-columns: 1fr; }
  .bp-role-lane { grid-template-columns: 30px 1fr; }
  .bp-scope-pill { display: none; }
}

/* ═══════════════════════════════════════════
   WORKFLOW SECTION
═══════════════════════════════════════════ */
.workflow-section {
  padding: 120px 0;
  background:
    radial-gradient(ellipse 42% 32% at 86% 6%, rgba(186,243,21,0.16), transparent 62%),
    radial-gradient(ellipse 46% 34% at 5% 18%, rgba(31,223,120,0.08), transparent 66%),
    linear-gradient(180deg, #e6edf7 0%, #eef5e9 100%);
  border-top: 1px solid rgba(13,38,24,0.07);
}
.workflow-header { max-width: 760px; margin-bottom: 64px; }
.workflow-header .section-body { margin-top: 16px; }

/* Journey flow */
.wf-journey {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: 64px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.wf-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 90px;
  text-align: center;
}
.wf-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(13,38,24,0.12);
  background: rgba(255,255,255,0.60);
  color: rgba(13,38,24,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wf-step-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(13,38,24,0.40);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.wf-step-sub {
  font-size: 9.5px;
  color: rgba(13,38,24,0.30);
  line-height: 1.4;
}
.wf-connector {
  flex: 1;
  height: 2px;
  border-top: 2px dashed rgba(13,38,24,0.12);
  margin-top: 26px;
  min-width: 20px;
}
/* Done state */
.wf-step-done .wf-icon {
  background: rgba(31,223,120,0.12);
  border-color: rgba(31,223,120,0.45);
  color: #1a7a50;
}
.wf-step-done .wf-step-label { color: var(--ink); }
.wf-step-done .wf-step-sub { color: rgba(13,38,24,0.50); }
.wf-step-done + .wf-connector { border-color: rgba(31,223,120,0.40); }
/* Active state */
.wf-step-active .wf-icon {
  background: rgba(142,201,15,0.15);
  border-color: var(--lime3);
  color: var(--lime3);
  box-shadow: 0 0 0 6px rgba(142,201,15,0.10);
}
.wf-step-active .wf-step-label { color: var(--lime3); font-weight: 800; }
.wf-step-active .wf-step-sub { color: var(--lime3); opacity: 0.7; }
/* Enrolled state */
.wf-step-enrolled .wf-icon {
  background: rgba(31,223,120,0.18);
  border-color: #1a7a50;
  color: #1a7a50;
  box-shadow: 0 0 0 6px rgba(31,223,120,0.10);
}
.wf-step-enrolled .wf-step-label { color: #1a7a50; font-weight: 800; }
.wf-step-enrolled .wf-step-sub { color: #1a7a50; opacity: 0.70; }

/* Role panels */
.wf-roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.wf-role-card {
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(13,38,24,0.10);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wf-role-card-center {
  border-color: rgba(142,201,15,0.45);
  background: rgba(255,255,255,0.80);
}
.wf-role-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wf-role-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.wf-rm-coord   { background: rgba(96,165,250,0.15); color: #1d4ed8; border: 1.5px solid rgba(96,165,250,0.30); }
.wf-rm-director{ background: rgba(142,201,15,0.15); color: var(--lime3); border: 1.5px solid rgba(142,201,15,0.30); }
.wf-rm-sponsor { background: rgba(251,191,36,0.15); color: #92400e; border: 1.5px solid rgba(251,191,36,0.30); }
.wf-role-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.wf-role-sees { font-size: 10.5px; color: rgba(13,38,24,0.42); font-weight: 500; }
.wf-role-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wf-role-items li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: rgba(13,38,24,0.65);
  line-height: 1.45;
}
.wf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.wf-dot-green  { background: #1a7a50; }
.wf-dot-lime   { background: var(--lime3); }
.wf-dot-yellow { background: #d97706; }

/* Mini patient list (coordinator card) */
.wf-mini-list {
  background: rgba(13,38,24,0.04);
  border: 1px solid rgba(13,38,24,0.08);
  border-radius: 10px;
  overflow: hidden;
  margin-top: auto;
}
.wf-mini-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(13,38,24,0.06);
}
.wf-mini-row:last-child { border-bottom: none; }
.wf-mini-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}
.wf-av-1 { background: rgba(96,165,250,0.18); color: #1d4ed8; }
.wf-av-2 { background: rgba(251,146,60,0.18); color: #c2410c; }
.wf-av-3 { background: rgba(52,211,153,0.18); color: #065f46; }
.wf-mini-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wf-mini-name { font-size: 11px; font-weight: 700; color: var(--ink); }
.wf-mini-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 20px;
  display: inline-block;
  width: fit-content;
}
.wf-status-sched  { background: rgba(96,165,250,0.14); color: #1d4ed8; }
.wf-status-lot    { background: rgba(251,191,36,0.14); color: #92400e; }
.wf-status-screen { background: rgba(142,201,15,0.14); color: var(--lime3); }
.wf-mini-action {
  font-size: 10px;
  font-weight: 600;
  color: rgba(13,38,24,0.40);
  white-space: nowrap;
}

/* Mini funnel (director card) */
.wf-mini-funnel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(13,38,24,0.04);
  border: 1px solid rgba(13,38,24,0.08);
  border-radius: 10px;
  padding: 14px;
  margin-top: auto;
}
.wf-mf-row {
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  align-items: center;
  gap: 7px;
}
.wf-mf-label { font-size: 9.5px; font-weight: 600; color: rgba(13,38,24,0.45); }
.wf-mf-track {
  height: 5px;
  background: rgba(13,38,24,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.wf-mf-bar { height: 100%; background: rgba(13,38,24,0.25); border-radius: 3px; }
.wf-mf-bar-lime { background: var(--lime3) !important; }
.wf-mf-w100 { width: 100%; }
.wf-mf-w69  { width: 69%; }
.wf-mf-w49  { width: 49%; }
.wf-mf-w32  { width: 32%; }
.wf-mf-w12  { width: 12%; }
.wf-mf-num { font-family: var(--mono); font-size: 9px; font-weight: 700; color: rgba(13,38,24,0.50); text-align: right; }
.wf-mf-num-lime { color: var(--lime3) !important; }

/* Mini KPIs (sponsor card) */
.wf-mini-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}
.wf-mini-kpi {
  background: rgba(13,38,24,0.04);
  border: 1px solid rgba(13,38,24,0.09);
  border-radius: 8px;
  padding: 10px 12px;
}
.wf-kpi-warn { background: rgba(251,191,36,0.09); border-color: rgba(251,191,36,0.22); }
.wf-kpi-alert { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.18); }
.wf-kpi-val {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.wf-kpi-warn .wf-kpi-val { color: #92400e; }
.wf-kpi-alert .wf-kpi-val { color: #b91c1c; }
.wf-kpi-lbl {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13,38,24,0.40);
  margin-top: 3px;
}

/* Responsive */
@media (max-width: 860px) {
  .wf-roles { grid-template-columns: 1fr; }
  .wf-journey { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════
   FEATURES ICON GRID
═══════════════════════════════════════════ */
.features-icon-layout { }
.fil-group { margin-bottom: 52px; }
.fil-group:last-child { margin-bottom: 0; }
.fil-group-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(13,38,24,0.38);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(13,38,24,0.08);
}
.fil-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.fil-grid-4 { grid-template-columns: repeat(4, 1fr); }
.feat-card {
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(13,38,24,0.09);
  border-radius: 12px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.feat-card:hover {
  border-color: rgba(31,223,120,0.40);
  box-shadow: 0 8px 28px rgba(13,38,24,0.08);
  transform: translateY(-2px);
}
.feat-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(13,38,24,0.07);
  color: #1a5c3a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feat-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.feat-desc {
  font-size: 11.5px;
  color: rgba(13,38,24,0.52);
  line-height: 1.55;
}
@media (max-width: 900px) { .fil-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fil-grid, .fil-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .fil-grid, .fil-grid-4 { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════
   JOURNEY FLOW DIAGRAM (wfj-*)
═══════════════════════════════════════════ */
.wfj-wrap {
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(13,38,24,0.10);
  border-radius: 20px;
  padding: 32px 40px 26px;
  margin: 52px 0;
  overflow-x: auto;
}
.wfj-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(13,38,24,0.42);
  margin-bottom: 30px;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.wfj-sep { opacity: 0.35; }
.wfj-enroll-val { color: #1a7a47; font-weight: 700; }
.wfj-live-badge {
  margin-left: auto;
  color: #1a7a47;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.wfj-flow {
  display: flex;
  align-items: flex-start;
  min-width: 680px;
}
.wfj-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  width: 92px;
}
.wfj-bubble {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: rgba(13,38,24,0.06);
  border: 1.5px solid rgba(13,38,24,0.13);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: rgba(13,38,24,0.40);
  transition: box-shadow 0.2s;
}
.wfj-s-done .wfj-bubble {
  background: rgba(31,223,120,0.09);
  border-color: rgba(31,223,120,0.32);
  color: #1a5c3a;
}
.wfj-b-blue  { background: rgba(59,130,246,0.09) !important; border-color: rgba(59,130,246,0.30) !important; color: #1d4ed8 !important; }
.wfj-b-yellow{ background: rgba(251,191,36,0.11) !important; border-color: rgba(251,191,36,0.38) !important; color: #78350f  !important; }
.wfj-b-green {
  background: rgba(31,223,120,0.16) !important;
  border-color: rgba(31,223,120,0.55) !important;
  color: #0d5c2e !important;
  box-shadow: 0 0 22px rgba(31,223,120,0.20);
}
.wfj-count {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: inherit;
}
.wfj-lbl {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.wfj-sub {
  font-size: 9.5px;
  color: rgba(13,38,24,0.38);
  text-align: center;
  white-space: nowrap;
  line-height: 1.3;
}
.wfj-edge {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 22px;
  min-width: 28px;
}
.wfj-edge-bar {
  width: 100%;
  height: 3px;
  background: rgba(13,38,24,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.wfj-eb-green { background: rgba(31,223,120,0.14) !important; }
.wfj-edge-fill {
  height: 100%;
  width: 100%;
  background: rgba(31,223,120,0.45);
  border-radius: 2px;
}
.wfj-ef-blue   { background: rgba(59,130,246,0.50) !important; }
.wfj-ef-yellow { background: rgba(251,191,36,0.60) !important; }
.wfj-ef-green  { background: rgba(31,223,120,0.80) !important; }
.wfj-drop {
  font-size: 9px;
  font-family: var(--mono);
  color: rgba(13,38,24,0.30);
  margin-top: 5px;
  white-space: nowrap;
}
.wfj-drop-final {
  color: #1a7a47;
  font-weight: 700;
  font-size: 9.5px;
}
.wfj-footer-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: rgba(13,38,24,0.36);
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(13,38,24,0.07);
  font-family: var(--mono);
  letter-spacing: 0.01em;
}
.wfj-fn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(31,223,120,0.65);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   ARCHITECTURE LAYERED DIAGRAM (asd-*)
═══════════════════════════════════════════ */
.asd-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 18px 0;
}
.asd-row {
  border-radius: 12px;
  padding: 12px 16px;
  border: 1.5px solid transparent;
  display: flex;
  align-items: center;
  gap: 14px;
}
.asd-consumers    { background: rgba(13,38,24,0.05);   border-color: rgba(13,38,24,0.10); }
.asd-intel        { background: rgba(251,191,36,0.09); border-color: rgba(251,191,36,0.28); }
.asd-core         { background: rgba(31,223,120,0.09); border-color: rgba(31,223,120,0.32); }
.asd-workflow     { background: rgba(59,130,246,0.07); border-color: rgba(59,130,246,0.22); }
.asd-integrations { background: rgba(13,38,24,0.03);  border-color: rgba(13,38,24,0.08); }
.asd-layer-tag {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(13,38,24,0.28);
  min-width: 72px;
  flex-shrink: 0;
  font-family: var(--mono);
}
.asd-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.asd-pills span {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(13,38,24,0.10);
  border-radius: 6px;
  padding: 4px 10px;
  white-space: nowrap;
}
.asd-intel .asd-pills span        { background: rgba(255,251,235,0.85); }
.asd-core .asd-pills span         { background: rgba(240,255,246,0.85); }
.asd-workflow .asd-pills span     { background: rgba(235,244,255,0.85); }
.asd-connector {
  text-align: center;
  font-size: 9.5px;
  color: rgba(13,38,24,0.26);
  padding: 5px 0;
  font-family: var(--mono);
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY REFINEMENTS
═══════════════════════════════════════════ */

/* Section title italic part — better serif rendering */
.section-title em {
  font-style: italic;
  letter-spacing: -0.02em;
}

/* Capability cards: tighter sizing for 4-col grid */
.cap-title {
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cap-desc {
  font-size: 13px !important;
  line-height: 1.60 !important;
}
.cap-visual {
  height: 88px !important;
}

/* Feature cards: readable body text */
.feat-desc {
  font-size: 13px !important;
  line-height: 1.58 !important;
}
.feat-name {
  font-size: 14px !important;
}

/* Workflow role sees label */
.wf-role-sees {
  font-size: 10.5px;
  color: rgba(13,38,24,0.40);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--mono);
}

/* ═══════════════════════════════════════════
   PILLAR CARD VISUALS (pv-*)
═══════════════════════════════════════════ */
.pillar-visual {
  margin: 20px 0 26px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 14px 16px;
  background: rgba(0,0,0,0.20);
}

/* Live-feed visual (Pillar 1) */
.pv-feed { display: flex; flex-direction: column; gap: 10px; }
.pv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-family: var(--mono);
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pv-g   { background: var(--green); }
.pv-b   { background: #60a5fa; }
.pv-dim { background: rgba(255,255,255,0.22); }
.pv-pulse { animation: pulse 2s ease-in-out infinite; }

/* Risk-forecast visual (Pillar 2) */
.pv-risk { display: flex; flex-direction: column; gap: 10px; }
.pv-risk-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
}
.pv-risk-flag {
  color: var(--yellow);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.pv-risk-bar {
  height: 10px;
  background: rgba(255,255,255,0.07);
  border-radius: 5px;
  overflow: hidden;
}
.pv-risk-fill {
  width: 57%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--green) 60%, rgba(31,223,120,0.45));
}
.pv-risk-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-family: var(--mono);
  color: rgba(255,255,255,0.38);
}
.pv-risk-val { color: rgba(255,255,255,0.65); font-weight: 700; }

/* Auto-efficiency visual (Pillar 3) */
.pv-auto {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: stretch;
}
.pv-auto-step {
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 10.5px;
  font-family: var(--mono);
  color: rgba(255,255,255,0.55);
  text-align: center;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.05);
}
.pv-auto-result {
  background: rgba(59,130,246,0.12);
  border-color: rgba(59,130,246,0.25);
  color: #93c5fd;
}
.pv-auto-arrow {
  text-align: center;
  font-size: 9.5px;
  font-family: var(--mono);
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   CAP-CARD VISUAL IMPROVEMENTS
═══════════════════════════════════════════ */
.cv-bar {
  height: 9px !important;
  border-radius: 5px !important;
}
.cv-tl-item {
  font-size: 10.5px !important;
}
.cv-fc-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 64px;
}

/* ═══════════════════════════════════════════
   REVEAL — SCALE + FADE (POLISHED)
═══════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.984);
  transition: opacity 0.72s cubic-bezier(.23,1,.32,1), transform 0.72s cubic-bezier(.23,1,.32,1);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-32px) scale(0.988);
  transition: opacity 0.72s cubic-bezier(.23,1,.32,1), transform 0.72s cubic-bezier(.23,1,.32,1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(32px) scale(0.988);
  transition: opacity 0.72s cubic-bezier(.23,1,.32,1), transform 0.72s cubic-bezier(.23,1,.32,1);
}
.reveal.visible, .reveal-left.visible, .reveal-right.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ═══════════════════════════════════════════
   PHASE CARD — STAGGER & GLOW
═══════════════════════════════════════════ */

/* Stagger roadmap cards as they enter */
.roadmap-grid .phase-card:nth-child(1).reveal { transition-delay: 0s; }
.roadmap-grid .phase-card:nth-child(2).reveal { transition-delay: 0.13s; }
.roadmap-grid .phase-card:nth-child(3).reveal { transition-delay: 0.26s; }

/* Phase 1 live card — glow ring using opacity on ::before (compositor-safe) */
.phase-active {
  position: relative;
  overflow: visible !important;
}
.phase-active::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 27px;
  border: 2px solid rgba(31,223,120,0.30);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  animation: liveRing 4s ease-in-out infinite;
  z-index: 0;
}
@keyframes liveRing {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}

/* Live dot in phase-1 pill */
.pill-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green3);
  margin-right: 5px;
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   PHASE 2 — BUILDING NOW (AMBER)
═══════════════════════════════════════════ */
.phase-building {
  background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,248,226,0.92));
  border: 1.5px solid rgba(255,181,71,0.30);
  box-shadow: 0 18px 56px rgba(24,35,48,0.10);
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep — suggests active construction */
.phase-building::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,181,71,0.07) 50%, transparent 60%);
  will-change: transform;
  animation: buildShimmer 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes buildShimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(200%); }
  100% { transform: translateX(200%); }
}

/* Bottom accent bar */
.phase-building::after {
  background: linear-gradient(90deg, var(--yellow), rgba(255,181,71,0.15));
}

.phase-pill-building {
  display: inline-flex;
  align-items: center;
  background: rgba(255,181,71,0.15);
  color: #8a5200;
  border: 1px solid rgba(255,181,71,0.40);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
}

.pill-build-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  margin-right: 5px;
  animation: pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

.phase-building .phase-num  { color: rgba(180,100,0,0.13); }
.phase-building .phase-desc { color: rgba(8,23,15,0.68); }
.phase-building .phase-list li::before { background: var(--yellow); }
.phase-building .phase-list li { color: rgba(8,23,15,0.78); }

/* Early-access CTA inside Phase 2 card */
.phase-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(255,181,71,0.18), rgba(255,181,71,0.09));
  border: 1.5px solid rgba(255,181,71,0.48);
  color: #7a4800;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 8px;
  align-self: flex-start;
  transition: all 0.24s cubic-bezier(.23,1,.32,1);
  position: relative;
  z-index: 1;
}
.phase-cta-btn:hover {
  background: linear-gradient(135deg, rgba(255,181,71,0.30), rgba(255,181,71,0.18));
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255,181,71,0.22);
  color: #5a3200;
}

/* ═══════════════════════════════════════════
   TEXT COLOR IMPROVEMENTS — LIGHT SECTIONS
═══════════════════════════════════════════ */

/* Section body on light green backgrounds — warm ink instead of cool blue-gray */
.problem-section .section-body,
.platform-section .section-body,
.architecture-section .section-body,
.blueprint-section .section-body,
.workflow-section .section-body,
.features-section .section-body,
.integrations-section .section-body,
.team-section .section-body,
.roadmap-section .section-body {
  color: rgba(8,23,15,0.62);
}

/* Eyebrow on light backgrounds — richer tone */
.problem-section .eyebrow,
.platform-section .eyebrow,
.architecture-section .eyebrow,
.blueprint-section .eyebrow,
.workflow-section .eyebrow,
.features-section .eyebrow,
.integrations-section .eyebrow,
.team-section .eyebrow {
  color: var(--green3);
  background: rgba(19,111,61,0.09);
  border-color: rgba(19,111,61,0.22);
}

/* Stronger em italic in section headings */
.problem-section .section-title em,
.platform-section .section-title em,
.architecture-section .section-title em,
.blueprint-section .section-title em,
.workflow-section .section-title em,
.features-section .section-title em,
.roadmap-section .section-title em {
  color: var(--green3);
}

/* Phase 1 list items — cleaner contrast */
.phase-active .phase-list li { color: rgba(8,23,15,0.82); }
.phase-active .phase-desc    { color: rgba(8,23,15,0.70); }

/* Phase 3 future — elegant dim */
.phase-future .phase-desc { color: rgba(8,23,15,0.50); }
.phase-future .phase-list li { color: rgba(8,23,15,0.50); }
.phase-future .phase-title { color: rgba(8,23,15,0.60); }

/* Integration card text on light background */
.integration-card h3  { color: var(--ink); }
.integration-card p   { color: rgba(8,23,15,0.60); }
.integration-abbr     { color: var(--green3) !important; }
.integration-launch .integration-abbr { color: var(--green3) !important; }

/* Roadmap section eyebrow gold stays yellow */
.roadmap-section .eyebrow-gold { color: var(--yellow); background: rgba(255,181,71,0.10); border-color: rgba(255,181,71,0.28); }
.roadmap-section .section-title em { color: var(--yellow3); }
.roadmap-section .section-body { color: rgba(8,23,15,0.58); }

/* ═══════════════════════════════════════════
   SINGLE SOURCE OF TRUTH SECTION
═══════════════════════════════════════════ */
.sst-section {
  background: var(--black4);
  padding: 80px 0;
  border-top: 1px solid rgba(31,223,120,0.08);
  border-bottom: 1px solid rgba(31,223,120,0.08);
  overflow: hidden;
  position: relative;
}


/* ── Section header ── */
.sst-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 64px;
}
.sst-header .section-title { color: #fff !important; }
.sst-header .section-title em {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}
.sst-section .eyebrow { color: var(--green) !important; }
.sst-lead {
  color: rgba(255,255,255,0.52);
  margin-top: 16px;
}

/* Pillars section: dark bg — force all text to white/green */
.pillars-intro .section-title { color: #fff !important; }
.pillars-intro .section-title em {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}
.pillars-section .eyebrow { color: var(--green) !important; }

/* ── Hub diagram grid ── */
.sst-diagram {
  display: grid;
  grid-template-columns: 1fr 96px auto 96px 1fr;
  align-items: center;
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
}

/* Source / output columns */
.sst-sources,
.sst-outputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sst-sources { align-items: flex-end; }
.sst-outputs { align-items: flex-start; }

.sst-col-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sst-sources .sst-col-label { color: rgba(255,255,255,0.22); text-align: right; }
.sst-outputs .sst-col-label { color: rgba(31,223,120,0.40); }

/* Data chips */
.sst-chip {
  padding: 9px 15px;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.sst-chip-src {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.46);
}
.sst-chip-out {
  background: rgba(31,223,120,0.08);
  border: 1px solid rgba(31,223,120,0.20);
  color: rgba(31,223,120,0.82);
}

/* ── Flow connector rays ── */
.sst-connector {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  min-height: 230px;
}

.sst-ray {
  height: 1.5px;
  border-radius: 2px;
  background: rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}
.sst-ray::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(31,223,120,0.85), transparent);
  will-change: transform;
  animation: rayFlow 2.4s linear infinite;
}

/* nth-child delays — conn-in (left→right) */
.sst-conn-in .sst-ray:nth-child(1)::after { animation-delay: 0.00s; }
.sst-conn-in .sst-ray:nth-child(2)::after { animation-delay: 0.30s; }
.sst-conn-in .sst-ray:nth-child(3)::after { animation-delay: 0.60s; }
.sst-conn-in .sst-ray:nth-child(4)::after { animation-delay: 0.90s; }
.sst-conn-in .sst-ray:nth-child(5)::after { animation-delay: 1.20s; }
.sst-conn-in .sst-ray:nth-child(6)::after { animation-delay: 1.50s; }

/* nth-child delays — conn-out (left→right, offset) */
.sst-conn-out .sst-ray:nth-child(1)::after { animation-delay: 0.15s; }
.sst-conn-out .sst-ray:nth-child(2)::after { animation-delay: 0.45s; }
.sst-conn-out .sst-ray:nth-child(3)::after { animation-delay: 0.75s; }
.sst-conn-out .sst-ray:nth-child(4)::after { animation-delay: 1.05s; }
.sst-conn-out .sst-ray:nth-child(5)::after { animation-delay: 1.35s; }
.sst-conn-out .sst-ray:nth-child(6)::after { animation-delay: 1.65s; }

@keyframes rayFlow {
  from { transform: translateX(-150%); }
  to   { transform: translateX(400%); }
}

/* ── Center hub ── */
.sst-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 2;
  padding: 8px 0;
}

.sst-hub-outer-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 184px;
  height: 184px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(31,223,120,0.14);
  will-change: opacity, transform;
  animation: hubPing 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hubPing {
  0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.15; transform: translate(-50%, -50%) scale(1.10); }
}

.sst-hub-ring {
  width: 144px;
  height: 144px;
  border-radius: 50%;
  border: 1.5px solid rgba(31,223,120,0.30);
  background: rgba(31,223,120,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sst-hub-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(31,223,120,0.11), transparent 68%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.sst-hub-inner {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(31,223,120,0.16), rgba(31,223,120,0.04));
  border: 1.5px solid rgba(31,223,120,0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative; z-index: 1;
}

.sst-hub-logo {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.05em;
  color: var(--green);
  line-height: 1;
}
.sst-hub-logo span { color: var(--lime); }

/* Live KPI mini-grid inside hub */
.sst-hub-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 10px;
}
.sst-hub-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.sst-hub-kv {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,0.80);
}
.sst-hub-kv-green  { color: var(--green); }
.sst-hub-kv-yellow { color: var(--yellow); font-size: 10px; }
.sst-hub-kv-red    { color: #f87171; font-size: 10px; }
.sst-hub-kl {
  font-family: var(--mono);
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}

.sst-hub-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(31,223,120,0.10);
  border: 1px solid rgba(31,223,120,0.24);
  padding: 5px 14px;
  border-radius: 100px;
}

.sst-hub-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}


/* ── Responsive ── */
@media (max-width: 900px) {
  .sst-diagram {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px 16px;
    max-width: 480px;
  }
  .sst-sources    { grid-column: 1; grid-row: 1; align-items: center; }
  .sst-conn-in    { display: none; }
  .sst-hub        { grid-column: 1 / -1; grid-row: 2; }
  .sst-conn-out   { display: none; }
  .sst-outputs    { grid-column: 2; grid-row: 1; align-items: center; }
}

/* ═══════════════════════════════════════════
   DEMO REQUEST MODAL
═══════════════════════════════════════════ */
.demo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,18,11,0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.26s cubic-bezier(.23,1,.32,1);
}
.demo-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.demo-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 44px 40px 36px;
  max-width: 548px;
  width: 100%;
  position: relative;
  transform: translateY(24px) scale(0.96);
  transition: transform 0.30s cubic-bezier(.23,1,.32,1);
  box-shadow: 0 48px 140px rgba(0,0,0,0.32), 0 0 0 1px rgba(13,38,24,0.06);
  max-height: 92vh;
  overflow-y: auto;
}
.demo-overlay.open .demo-card {
  transform: translateY(0) scale(1);
}

.demo-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(13,38,24,0.07);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s;
  flex-shrink: 0;
}
.demo-close:hover { background: rgba(13,38,24,0.14); }

/* Modal header */
.demo-head { margin-bottom: 28px; }

.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--green3);
  background: rgba(19,111,61,0.09);
  border: 1px solid rgba(19,111,61,0.22);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.demo-title {
  font-size: 30px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.demo-sub {
  font-size: 14px;
  color: rgba(8,23,15,0.52);
  line-height: 1.65;
}

/* Form */
.demo-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.demo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.demo-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.demo-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(8,23,15,0.48);
}
.demo-input {
  padding: 12px 15px;
  border-radius: 12px;
  border: 1.5px solid rgba(13,38,24,0.13);
  background: rgba(13,38,24,0.025);
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  width: 100%;
  transition: border-color 0.18s, background 0.18s;
}
.demo-input:focus {
  border-color: var(--green3);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(19,111,61,0.08);
}
.demo-input::placeholder { color: rgba(8,23,15,0.28); }
.demo-textarea {
  resize: vertical;
  min-height: 92px;
  font-family: var(--body);
}

.demo-submit-btn {
  padding: 15px 28px;
  border-radius: 100px;
  background: var(--green3);
  color: #fff;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.22s, transform 0.18s, box-shadow 0.22s;
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.demo-submit-btn:hover {
  background: var(--green2);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(19,111,61,0.22);
}
.demo-submit-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.demo-note {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(8,23,15,0.35);
  text-align: center;
  letter-spacing: 0.03em;
}

/* Success state */
.demo-success {
  text-align: center;
  padding: 32px 0 16px;
}
.demo-success-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(19,111,61,0.10);
  border: 1.5px solid rgba(19,111,61,0.22);
  color: var(--green3);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.demo-success-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 10px;
}
.demo-success-body {
  font-size: 15px;
  color: rgba(8,23,15,0.52);
  line-height: 1.65;
}

/* Responsive */
@media (max-width: 560px) {
  .demo-card    { padding: 32px 22px 28px; border-radius: 20px; }
  .demo-row     { grid-template-columns: 1fr; }
  .demo-title   { font-size: 24px; }
}

/* ═══════════════════════════════════════════
   TEAM SECTION — LEADERSHIP REDESIGN
═══════════════════════════════════════════ */

/* Override section title for this section */
.team-section .section-title {
  font-size: 52px;
  letter-spacing: -0.025em;
}
.team-section .section-title em {
  color: var(--green3);
}
.team-section .section-body {
  color: rgba(8,23,15,0.60);
  max-width: 720px;
}
.team-section .eyebrow-gold {
  color: var(--yellow3);
  background: rgba(212,131,24,0.10);
  border-color: rgba(212,131,24,0.26);
}

/* Collective mission strip */
.team-mission {
  background: var(--black);
  border-radius: 20px;
  padding: 44px 52px;
  margin-bottom: 56px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(31,223,120,0.10);
}
.team-mission::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 10% 50%, rgba(31,223,120,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.tm-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tm-mark {
  font-family: var(--serif);
  font-size: 72px;
  line-height: 0.6;
  color: rgba(31,223,120,0.22);
  display: block;
  margin-bottom: 4px;
}
.tm-quote {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  color: rgba(255,255,255,0.88);
  line-height: 1.65;
  font-weight: 400;
  max-width: 820px;
}
.tm-attr {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(31,223,120,0.55);
}
.tm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green3);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

/* Leadership card overrides */
.team-section .founder-card {
  background: #fff;
  border: 1.5px solid rgba(13,38,24,0.10);
  border-radius: 22px;
  padding: 44px 40px;
  box-shadow: 0 4px 24px rgba(8,23,15,0.07), 0 1px 3px rgba(8,23,15,0.04);
  transition: box-shadow 0.28s, transform 0.28s;
}
.team-section .founder-card:hover {
  box-shadow: 0 12px 44px rgba(8,23,15,0.12), 0 1px 3px rgba(8,23,15,0.04);
  transform: translateY(-3px);
}
.team-section .founder-card-gold {
  border-color: rgba(212,131,24,0.20);
}

.team-section .founder-av {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(19,111,61,0.12), rgba(19,111,61,0.04));
  border: 2px solid rgba(19,111,61,0.30);
  font-family: var(--display);
  font-size: 30px;
  color: var(--green3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.team-section .founder-av-gold {
  background: linear-gradient(135deg, rgba(212,131,24,0.12), rgba(212,131,24,0.04));
  border-color: rgba(212,131,24,0.30);
  color: var(--yellow3);
}

.team-section .founder-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.team-section .founder-role {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 14px;
}
.team-section .founder-role-green { color: var(--green3); }
.team-section .founder-role-gold  { color: var(--yellow3); }

.team-section .founder-tag {
  background: rgba(8,23,15,0.05);
  border: 1px solid rgba(8,23,15,0.10);
  color: rgba(8,23,15,0.60);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 100px;
}

.team-section .founder-quote {
  font-family: var(--serif);
  font-size: 18.5px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.72;
  border-left: 3px solid var(--green3);
  padding-left: 18px;
}
.team-section .founder-quote-gold {
  border-left-color: var(--yellow3);
}

.team-section .founder-bio {
  font-size: 15px;
  color: rgba(8,23,15,0.62);
  line-height: 1.82;
}
.team-section .founder-bio p { margin-bottom: 0; }

.team-section .btn-ghost {
  border-color: rgba(8,23,15,0.16);
  color: rgba(8,23,15,0.65);
}
.team-section .btn-ghost:hover {
  border-color: rgba(8,23,15,0.30);
  color: var(--ink);
}

/* Team breadth footer */
.team-footer {
  margin-top: 60px;
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid rgba(8,23,15,0.07);
}
.tf-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(8,23,15,0.35);
  margin-bottom: 16px;
}
.tf-areas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 0;
}
.tf-area {
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(8,23,15,0.68);
  letter-spacing: -0.005em;
}
.tf-sep {
  color: rgba(8,23,15,0.20);
  margin: 0 12px;
  font-size: 16px;
}

/* ═══════════════════════════════════════════
   SST SECTION — VISUAL IMPROVEMENTS
═══════════════════════════════════════════ */

/* Brighter, thicker rays */
.sst-ray {
  height: 2px !important;
  background: rgba(31,223,120,0.08) !important;
}
.sst-ray::after {
  width: 30% !important;
  background: linear-gradient(90deg, transparent, rgba(31,223,120,1), transparent) !important;
}

/* Glowing hub ring */
.sst-hub-ring {
  box-shadow: 0 0 28px rgba(31,223,120,0.16), 0 0 56px rgba(31,223,120,0.06);
}
.sst-hub-inner {
  box-shadow: 0 0 16px rgba(31,223,120,0.12) inset;
}

/* Source chips — more visible on dark */
.sst-chip-src {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.65) !important;
}

/* Output chips — brighter */
.sst-chip-out {
  background: rgba(31,223,120,0.14) !important;
  border: 1px solid rgba(31,223,120,0.30) !important;
  color: rgba(31,223,120,0.92) !important;
  font-weight: 700 !important;
}

/* Hub label */
.sst-hub-badge {
  letter-spacing: 0.08em !important;
  font-size: 10.5px !important;
}

/* Stat values more prominent */
.sst-stat-val {
  font-size: 64px !important;
  background: linear-gradient(135deg, var(--green), var(--lime));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sst-stat-lbl {
  font-size: 12px !important;
  color: rgba(255,255,255,0.42) !important;
}

/* Section title — display font impact */
.sst-title {
  font-size: 54px !important;
  background: linear-gradient(135deg, #fff 40%, rgba(255,255,255,0.72));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════
   GLOBAL FONT ENHANCEMENTS
═══════════════════════════════════════════ */

/* Hero heading — tighter and bigger on large screens */
@media (min-width: 1200px) {
  .hero-h1 { font-size: 78px; }
  .cta-title { font-size: 72px; }
}

/* Section title em — sharper italic */
.section-title em {
  font-style: italic;
  letter-spacing: -0.025em;
}

/* Eyebrow — more refined spacing */
.eyebrow {
  letter-spacing: 0.13em;
  font-size: 10px;
  font-weight: 700;
}

/* Better paragraph spacing in bio/body blocks */
.founder-bio p + p { margin-top: 10px; }

/* Blueprint section card title polish */
.bp-panel-title {
  letter-spacing: -0.01em;
}

/* Roadmap phase title — tighter */
.phase-title {
  letter-spacing: -0.018em !important;
}

/* Integration abbr — stronger */
.integration-abbr {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

@media (max-width: 768px) {
  .team-section .section-title { font-size: 38px; }
  .team-mission { padding: 32px 28px; }
  .tm-quote { font-size: 18px; }
  .tm-mark { font-size: 52px; }
  .tf-areas { gap: 6px 0; }
  .tf-sep { margin: 0 8px; }
  .sst-title { font-size: 36px !important; }
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY HIERARCHY — SECTION-LEVEL
═══════════════════════════════════════════ */

/* Section title sizes — largest for problem/pillars, slightly smaller deeper in */
.problem-section .section-title     { font-size: 58px; }
.pillars-section .section-title     { font-size: 54px; }
.platform-section .section-title    { font-size: 52px; }
.architecture-section .section-title { font-size: 52px; }
.blueprint-section .section-title   { font-size: 52px; }
.workflow-section .section-title    { font-size: 52px; }
.features-section .section-title    { font-size: 52px; }
.roadmap-section .section-title     { font-size: 52px; }
.integrations-section .section-title { font-size: 50px; }

@media (max-width: 900px) {
  .problem-section .section-title     { font-size: 40px; }
  .pillars-section .section-title     { font-size: 38px; }
  .platform-section .section-title,
  .architecture-section .section-title,
  .blueprint-section .section-title,
  .workflow-section .section-title,
  .features-section .section-title,
  .roadmap-section .section-title     { font-size: 36px; }
  .integrations-section .section-title { font-size: 34px; }
}

/* Pillar card heading — bigger, tighter */
.pillar-head {
  font-size: 22px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
}

/* Architecture layer headings — letter-spacing only; colors stay white (dark section) */
.arch-layer-body h3 {
  letter-spacing: -0.015em;
}
.arch-layer-body p {
  line-height: 1.75;
}

/* Capability card hierarchy */
.cap-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
}
.cap-desc {
  font-size: 13.5px !important;
  color: rgba(8,23,15,0.58) !important;
  line-height: 1.72 !important;
}

/* Feature card hierarchy */
.feat-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}
.feat-desc {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: rgba(8,23,15,0.56) !important;
}

/* Blueprint panel head h3 */
.bp-panel-head h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* Integration card headings */
.integration-card h3 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 5px;
}
.integration-card p {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(8,23,15,0.58);
}

/* Roadmap phase description */
.phase-desc {
  font-size: 14.5px !important;
  line-height: 1.70 !important;
  color: rgba(8,23,15,0.58) !important;
}
.phase-building .phase-desc { color: rgba(212,131,24,0.72) !important; }
.phase-future .phase-desc   { color: rgba(8,23,15,0.42) !important; }

/* Section body text — warmer, not blue-gray */
.section-body {
  color: rgba(8,23,15,0.60);
}

/* CTA sub — slightly bigger on desktop */
@media (min-width: 1000px) {
  .cta-sub { font-size: 18px; line-height: 1.70; }
}

/* ═══════════════════════════════════════════
   FEATURE SHOWCASE — GROUP BLOCKS
═══════════════════════════════════════════ */

.fg-block {
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(13,38,24,0.09);
  border-radius: 24px;
  padding: 40px 40px 44px;
  margin-bottom: 24px;
}
.fg-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(13,38,24,0.07);
}
.fg-num {
  font-family: var(--display);
  font-size: 56px;
  line-height: 1;
  color: rgba(19,111,61,0.14);
  flex-shrink: 0;
  margin-top: 4px;
}
.fg-num-gold { color: rgba(212,131,24,0.18); }
.fg-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.fg-sub {
  font-size: 14px;
  color: rgba(8,23,15,0.52);
  line-height: 1.68;
  max-width: 560px;
}
.fg-body {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: start;
}
.fg-block-rev .fg-body {
  grid-template-columns: 1fr 1fr;
}
.fg-block-rev .fg-mockup { order: 2; }
.fg-block-rev .fg-features { order: 1; }

/* ── Mockup shell ── */
.fg-mockup {
  background: #081810;
  border: 1px solid rgba(31,223,120,0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 52px rgba(8,23,15,0.22), 0 0 0 1px rgba(31,223,120,0.05);
}
.fgm-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(31,223,120,0.07);
}
.fgm-dots { display: flex; gap: 5px; margin-right: 4px; }
.fgm-dots i {
  width: 9px; height: 9px; border-radius: 50%; display: block;
}
.fgm-dots i:nth-child(1) { background: rgba(255,95,87,0.8); }
.fgm-dots i:nth-child(2) { background: rgba(255,189,46,0.8); }
.fgm-dots i:nth-child(3) { background: rgba(40,200,64,0.8); }
.fgm-addr {
  font-family: var(--mono);
  font-size: 9.5px;
  color: rgba(255,255,255,0.24);
  flex: 1;
  letter-spacing: 0.02em;
}
.fgm-live {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.08em;
}
.fgm-live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green);
  animation: pulse 2s ease-in-out infinite;
}
.fgm-content { padding: 16px 18px 20px; }
.fgm-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.fgm-section-label {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.24);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.fgm-section-label-mt { margin-top: 14px; }
.fgm-badge-count {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--green);
  background: rgba(31,223,120,0.10);
  border: 1px solid rgba(31,223,120,0.18);
  padding: 2px 9px;
  border-radius: 100px;
}

/* ── Task rows ── */
.fgm-task {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.038);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 10px;
  margin-bottom: 6px;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.fgm-task.fgm-in { opacity: 1; transform: translateX(0); }
.fgm-av {
  width: 30px; height: 30px; border-radius: 50%;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fgm-av-g { background: rgba(31,223,120,0.12); color: var(--green); border: 1px solid rgba(31,223,120,0.22); }
.fgm-av-b { background: rgba(96,165,250,0.12); color: #93c5fd; border: 1px solid rgba(96,165,250,0.22); }
.fgm-av-y { background: rgba(255,181,71,0.12); color: var(--yellow); border: 1px solid rgba(255,181,71,0.22); }
.fgm-task-info { flex: 1; min-width: 0; }
.fgm-task-name {
  font-size: 11.5px; font-weight: 700;
  color: rgba(255,255,255,0.86);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fgm-task-study {
  font-family: var(--mono); font-size: 9px;
  color: rgba(255,255,255,0.27);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fgm-task-pill {
  font-size: 8.5px; font-weight: 700; font-family: var(--mono);
  padding: 2px 7px; border-radius: 100px; flex-shrink: 0;
}
.fgm-pill-screen { background: rgba(186,243,21,0.09); color: var(--lime); border: 1px solid rgba(186,243,21,0.20); }
.fgm-pill-lot    { background: rgba(96,165,250,0.09); color: #93c5fd;    border: 1px solid rgba(96,165,250,0.20); }
.fgm-pill-visit  { background: rgba(255,181,71,0.09); color: var(--yellow); border: 1px solid rgba(255,181,71,0.20); }
.fgm-task-arrow { color: rgba(255,255,255,0.18); font-size: 12px; flex-shrink: 0; }

.fgm-sep {
  height: 1px;
  background: rgba(255,255,255,0.055);
  margin: 12px 0 10px;
}

/* ── Pre-screener rows ── */
.fgm-sq {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  margin-bottom: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.62);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.fgm-sq.fgm-in { opacity: 1; transform: translateX(0); }
.fgm-sq-pass { background: rgba(31,223,120,0.055); }
.fgm-sq-pend { background: rgba(255,181,71,0.055); }
.fgm-sq-icon {
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; flex-shrink: 0;
}
.fgm-sq-pass-icon { background: rgba(31,223,120,0.16); color: var(--green); }
.fgm-sq-pend-icon { background: rgba(255,181,71,0.16); color: var(--yellow); font-size: 12px; }
.fgm-sq-res {
  margin-left: auto;
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 4px;
}
.fgm-sq-yes     { background: rgba(31,223,120,0.11); color: var(--green); }
.fgm-sq-pending { background: rgba(255,181,71,0.11); color: var(--yellow); }

/* ── Analytics mockup internals ── */
.fgm-analytics-content { padding: 14px 16px 18px; }
.fga-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 4px;
}
.fga-kpi {
  background: rgba(255,255,255,0.038);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}
.fga-kval {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: rgba(255,255,255,0.78); letter-spacing: -0.02em;
}
.fga-g { color: var(--green) !important; }
.fga-y { color: var(--yellow) !important; }
.fga-klbl {
  font-family: var(--mono); font-size: 7.5px; font-weight: 600;
  color: rgba(255,255,255,0.26); letter-spacing: 0.04em;
  margin-top: 2px;
}
.fga-funnel { margin-bottom: 10px; }
.fga-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.fga-lbl {
  font-family: var(--mono); font-size: 9px;
  color: rgba(255,255,255,0.36);
  width: 55px; flex-shrink: 0;
}
.fga-track {
  flex: 1; height: 5px;
  background: rgba(255,255,255,0.055);
  border-radius: 3px; overflow: hidden;
}
.fga-fill {
  height: 100%;
  background: rgba(255,255,255,0.20);
  border-radius: 3px;
  width: 0;
  transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.fga-fill-green  { background: var(--green) !important; }
.fga-fill-yellow { background: var(--yellow) !important; }
.fga-num {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,0.38);
  width: 28px; text-align: right; flex-shrink: 0;
}
.fga-num.fga-g { color: var(--green); }
.fga-num.fga-y { color: var(--yellow); }
.fga-insight {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 10px;
  background: rgba(31,223,120,0.055);
  border: 1px solid rgba(31,223,120,0.11);
  border-radius: 8px;
  margin-top: 10px;
  font-size: 10px;
  color: rgba(31,223,120,0.78);
  line-height: 1.55;
}
.fga-insight-icon { color: var(--green); font-size: 10px; flex-shrink: 0; margin-top: 1px; }

/* ── Feature list ── */
.fg-features { display: flex; flex-direction: column; gap: 3px; }
.fg-features-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 14px;
  align-content: start;
}
.fg-feat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid transparent;
  cursor: default;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.fg-feat:hover {
  background: rgba(19,111,61,0.055);
  border-color: rgba(19,111,61,0.12);
  transform: translateX(3px);
}
.fg-block-rev .fg-feat:hover {
  background: rgba(212,131,24,0.055);
  border-color: rgba(212,131,24,0.12);
  transform: translateX(-3px);
}
.fg-fi {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(19,111,61,0.09);
  color: var(--green3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s, background 0.18s;
}
.fg-feat:hover .fg-fi { transform: scale(1.1); background: rgba(19,111,61,0.14); }
.fg-fi-gold { background: rgba(212,131,24,0.09); color: var(--yellow3); }
.fg-feat:hover .fg-fi-gold { background: rgba(212,131,24,0.15); }
.fg-ft { min-width: 0; }
.fg-fn {
  font-size: 13.5px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.01em;
  margin-bottom: 3px; line-height: 1.3;
  transition: color 0.18s;
}
.fg-feat:hover .fg-fn { color: var(--green3); }
.fg-block-rev .fg-feat:hover .fg-fn { color: var(--yellow3); }
.fg-fd {
  font-size: 12px;
  color: rgba(8,23,15,0.50);
  line-height: 1.60;
}

/* Responsive */
@media (max-width: 960px) {
  .fg-body,
  .fg-block-rev .fg-body { grid-template-columns: 1fr; }
  .fg-block-rev .fg-mockup { order: 0; }
  .fg-block-rev .fg-features { order: 0; }
  .fg-features-2col { grid-template-columns: 1fr; }
  .fga-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .fg-block { padding: 28px 22px 32px; border-radius: 18px; }
  .fg-num { font-size: 40px; }
  .fg-title { font-size: 19px; }
}

/* ════════════════════════════════════════════════════
   INTERACTIVE FEATURE SHOWCASE  (fp-* / feat-* classes)
════════════════════════════════════════════════════ */

.feat-showcase {
  background: #081410;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 48px;
  box-shadow: 0 28px 80px rgba(1, 12, 8, 0.18);
}

/* ── Group tab bar ── */
.feat-group-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.18);
}
.fgt-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 15px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.54);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.fgt-tab:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.74); }
.fgt-tab.fgt-active {
  background: rgba(31,223,120,0.08);
  color: var(--green);
  border-color: rgba(31,223,120,0.18);
}
.fgt-num {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--green); opacity: 0.65; letter-spacing: 0.04em;
}
.fgt-num-gold { color: var(--yellow); }
.fgt-tab.fgt-active .fgt-num { opacity: 1; }

/* ── Showcase body: nav + panel ── */
.feat-showcase-body {
  display: flex;
  height: clamp(500px, 48vw, 620px);
}

/* Left nav column */
.feat-nav-col {
  position: relative;
  inset: auto;
  z-index: 1;
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.08);
  padding: 10px 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
  box-shadow: none;
}
.feat-nav-col::-webkit-scrollbar { width: 3px; }
.feat-nav-col::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 2px; }

.feat-nav-group { display: none; flex-direction: column; gap: 2px; }
.feat-nav-group.fng-active { display: flex; }

.feat-nav-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.18s, border-color 0.18s;
}
.feat-nav-item:hover { background: rgba(255,255,255,0.04); }
.feat-nav-item.fni-active {
  background: rgba(31,223,120,0.07);
  border-color: rgba(31,223,120,0.14);
}
.feat-nav-group[data-group="analytics"] .feat-nav-item.fni-active {
  background: rgba(255,181,71,0.07);
  border-color: rgba(255,181,71,0.14);
}

.fni-ico {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.30);
  transition: background 0.18s;
}
.fni-ico-g    { background: rgba(31,223,120,0.09); color: var(--green); }
.fni-ico-gold { background: rgba(255,181,71,0.09); color: var(--yellow); }
.feat-nav-item.fni-active .fni-ico-g    { background: rgba(31,223,120,0.16); }
.feat-nav-item.fni-active .fni-ico-gold { background: rgba(255,181,71,0.16); }

.fni-text { min-width: 0; }
.fni-name {
  display: block;
  font-size: 11.5px; font-weight: 700;
  color: rgba(255,255,255,0.68);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.18s;
}
.feat-nav-item:hover .fni-name,
.feat-nav-item.fni-active .fni-name { color: rgba(255,255,255,0.94); }
.fni-desc {
  display: block;
  font-family: var(--mono); font-size: 8.5px;
  color: rgba(255,255,255,0.36);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Right panel column */
.feat-panel-col {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* Individual panel — absolutely fills panel-col so content never pushes layout */
.feat-panel {
  display: none;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  flex-direction: column;
}
.feat-panel.fp-active {
  display: flex;
  animation: panelFadeIn 0.26s ease;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Browser chrome ── */
.fp-chrome {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.22);
  border-bottom: 1px solid rgba(255,255,255,0.065);
  flex-shrink: 0;
}
.fp-dots { display: flex; gap: 5px; flex-shrink: 0; }
.fp-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; }
.fp-dots i:nth-child(1) { background: rgba(255,95,87,0.42); }
.fp-dots i:nth-child(2) { background: rgba(255,189,46,0.42); }
.fp-dots i:nth-child(3) { background: rgba(40,200,64,0.42); }
.fp-addr {
  flex: 1;
  font-family: var(--mono); font-size: 9px;
  color: rgba(255,255,255,0.24);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-live {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  color: var(--green);
}
.fp-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  animation: fp-live-pulse 2s ease-in-out infinite;
}
@keyframes fp-live-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── Panel body ── */
.fp-body {
  flex: 1;
  padding: 15px 17px 18px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.fp-body::-webkit-scrollbar { width: 4px; }
.fp-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.09); border-radius: 2px; }

/* ── Shared atoms ── */
.fp-slabel {
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.09em; color: rgba(255,255,255,0.20);
  margin: 11px 0 6px;
  text-transform: uppercase;
}
.fp-sep { height: 1px; background: rgba(255,255,255,0.07); margin: 11px 0; }
.fp-append-note {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px;
  background: rgba(31,223,120,0.04);
  border: 1px solid rgba(31,223,120,0.08);
  border-radius: 7px;
  font-family: var(--mono); font-size: 8px;
  color: rgba(31,223,120,0.50);
  margin-top: 11px;
}
.fp-an-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); opacity: 0.55; flex-shrink: 0;
}
.fp-insight {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px;
  background: rgba(31,223,120,0.045);
  border: 1px solid rgba(31,223,120,0.09);
  border-radius: 9px;
  font-size: 10.5px; color: rgba(31,223,120,0.72); line-height: 1.5;
  margin-top: 10px;
}
.fp-insight-ico { color: var(--green); flex-shrink: 0; font-size: 10px; margin-top: 1px; }

/* Avatars */
.fp-av {
  width: 32px; height: 32px; border-radius: 50%;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fp-av-sm { width: 24px; height: 24px; font-size: 8.5px; }
.fp-av-g   { background: rgba(31,223,120,0.12); color: var(--green);   border: 1px solid rgba(31,223,120,0.22); }
.fp-av-b   { background: rgba(96,165,250,0.12); color: #93c5fd;        border: 1px solid rgba(96,165,250,0.22); }
.fp-av-r   { background: rgba(248,113,113,0.12); color: #fca5a5;       border: 1px solid rgba(248,113,113,0.22); }
.fp-av-y   { background: rgba(255,181,71,0.12);  color: var(--yellow); border: 1px solid rgba(255,181,71,0.22); }
.fp-av-dim { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.28); border: 1px solid rgba(255,255,255,0.09); }

/* Pills */
.fp-pill {
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 100px; flex-shrink: 0;
}
.fp-pill-enrolled { background: rgba(31,223,120,0.10); color: var(--green);   border: 1px solid rgba(31,223,120,0.20); }
.fp-pill-screen   { background: rgba(186,243,21,0.08); color: var(--lime);    border: 1px solid rgba(186,243,21,0.16); }
.fp-pill-noshow   { background: rgba(248,113,113,0.08); color: #fca5a5;       border: 1px solid rgba(248,113,113,0.18); }
.fp-pill-lot      { background: rgba(96,165,250,0.08);  color: #93c5fd;       border: 1px solid rgba(96,165,250,0.18); }
.fp-pill-visit    { background: rgba(255,181,71,0.08);  color: var(--yellow); border: 1px solid rgba(255,181,71,0.18); }
.fp-pill-contact  { background: rgba(167,139,250,0.08); color: #c4b5fd;       border: 1px solid rgba(167,139,250,0.18); }
.fp-pill-count    { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.11); }

/* ─── PATIENT PROFILE PANEL ─── */
.fp-pat-head {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.fp-ph-info { flex: 1; min-width: 0; }
.fp-ph-name { font-size: 14.5px; font-weight: 700; color: rgba(255,255,255,0.86); letter-spacing: -0.02em; }
.fp-ph-meta { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.26); margin-top: 2px; }

.fp-contact-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 9px 0; }
.fp-ci { font-family: var(--mono); font-size: 9.5px; color: rgba(255,255,255,0.32); }

/* Timeline */
.fp-timeline { display: flex; flex-direction: column; }
.fp-tl-item {
  display: grid;
  grid-template-columns: 10px 16px 1fr;
  align-items: flex-start;
  gap: 0 8px;
  padding-bottom: 11px;
}
.fp-tl-dot {
  width: 10px; height: 10px; border-radius: 50%; margin-top: 2px; flex-shrink: 0;
}
.fp-tld-g   { background: var(--green); box-shadow: 0 0 0 3px rgba(31,223,120,0.11); }
.fp-tld-b   { background: #60a5fa;      box-shadow: 0 0 0 3px rgba(96,165,250,0.11); }
.fp-tld-dim { background: rgba(255,255,255,0.18); }
.fp-tl-bar {
  width: 1px; background: rgba(255,255,255,0.09);
  margin-left: 4px; margin-top: 12px;
  align-self: stretch;
}
.fp-tl-item:last-child .fp-tl-bar { background: transparent; }
.fp-tl-content { min-width: 0; }
.fp-tl-ev { display: block; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.62); }
.fp-tl-ev-g { color: var(--green); }
.fp-tl-ev-b { color: #93c5fd; }
.fp-tl-ts { display: block; font-family: var(--mono); font-size: 8.5px; color: rgba(255,255,255,0.22); margin-top: 2px; }

/* ─── PRESCREENER PANEL ─── */
.fp-pre-head { margin-bottom: 11px; }
.fp-pre-study { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.80); letter-spacing: -0.015em; }
.fp-pre-patient { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.25); margin-top: 3px; }

.fp-sq {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; margin-bottom: 4px;
  border: 1px solid rgba(255,255,255,0.06);
}
.fp-sq-pass { background: rgba(31,223,120,0.04); border-color: rgba(31,223,120,0.09); }
.fp-sq-pend { background: rgba(255,181,71,0.04);  border-color: rgba(255,181,71,0.09); }
.fp-sq-num { font-family: var(--mono); font-size: 8.5px; font-weight: 700; color: rgba(255,255,255,0.20); width: 16px; flex-shrink: 0; }
.fp-sq-q { flex: 1; font-size: 11px; color: rgba(255,255,255,0.58); }
.fp-sq-res {
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 5px; flex-shrink: 0;
}
.fp-sqr-pass { background: rgba(31,223,120,0.11); color: var(--green); }
.fp-sqr-pend { background: rgba(255,181,71,0.11); color: var(--yellow); }
.fp-sq-note {
  display: flex; gap: 7px; align-items: flex-start;
  padding: 7px 10px;
  background: rgba(255,181,71,0.04); border: 1px solid rgba(255,181,71,0.09);
  border-radius: 7px; margin: 7px 0;
  font-size: 10px; color: rgba(255,181,71,0.62); line-height: 1.5;
}
.fp-ol-row { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.fp-ol-ts { font-family: var(--mono); font-size: 8.5px; color: rgba(255,255,255,0.22); width: 80px; flex-shrink: 0; }
.fp-ol-ev { font-size: 10.5px; color: rgba(255,255,255,0.46); }
.fp-ol-pend .fp-ol-ts { color: rgba(255,181,71,0.45); }
.fp-ol-pend .fp-ol-ev { color: rgba(255,181,71,0.50); }

/* ─── SCHEDULING PANEL ─── */
.fp-vis-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 4px;
}
.fp-visit {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px; margin-bottom: 4px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.fp-vis-done     { background: rgba(31,223,120,0.04); border-color: rgba(31,223,120,0.09); }
.fp-vis-upcoming { background: rgba(255,181,71,0.04); border-color: rgba(255,181,71,0.09); }
.fp-vi-icon {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
}
.fp-vi-g   { background: rgba(31,223,120,0.12); color: var(--green); }
.fp-vi-y   { background: rgba(255,181,71,0.12); color: var(--yellow); }
.fp-vi-dim { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.28); }
.fp-vi-info { flex: 1; min-width: 0; }
.fp-vi-name { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.70); }
.fp-vi-meta { font-family: var(--mono); font-size: 8.5px; color: rgba(255,255,255,0.24); margin-top: 1px; }
.fp-vis-pill { font-family: var(--mono); font-size: 8px; font-weight: 700; padding: 2px 7px; border-radius: 100px; flex-shrink: 0; }
.fp-vp-done  { background: rgba(31,223,120,0.10); color: var(--green); }
.fp-vp-soon  { background: rgba(255,181,71,0.10); color: var(--yellow); }
.fp-vp-sched { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.32); }

/* ─── COMMS PANEL ─── */
.fp-comms-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 10px;
}
.fp-msg-thread { display: flex; flex-direction: column; gap: 6px; }
.fp-msg { display: flex; flex-direction: column; }
.fp-msg-out { align-items: flex-end; }
.fp-msg-in  { align-items: flex-start; }
.fp-msg-bubble {
  max-width: 82%; padding: 8px 11px; font-size: 11px; line-height: 1.5;
}
.fp-mb-out      { background: rgba(31,223,120,0.09); color: rgba(255,255,255,0.70); border-radius: 12px 12px 3px 12px; }
.fp-mb-in       { background: rgba(255,255,255,0.055); color: rgba(255,255,255,0.58); border-radius: 12px 12px 12px 3px; }
.fp-mb-reminder { background: rgba(255,181,71,0.07); color: rgba(255,181,71,0.72); border-radius: 12px 12px 3px 12px; font-family: var(--mono); font-size: 9.5px; }
.fp-msg-ts { font-family: var(--mono); font-size: 8px; color: rgba(255,255,255,0.20); margin-top: 3px; padding: 0 4px; }
.fp-mt-out { text-align: right; }

/* ─── TASKS PANEL ─── */
.fp-tasks-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 4px;
}
.fp-task-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02);
  margin-bottom: 4px;
}
.fp-tr-hi { background: rgba(248,113,113,0.04); border-color: rgba(248,113,113,0.09); }
.fp-tr-pri { font-size: 13px; font-weight: 900; width: 13px; flex-shrink: 0; text-align: center; }
.fp-pri-hi  { color: #f87171; }
.fp-pri-med { color: rgba(255,255,255,0.28); font-size: 18px; }
.fp-pri-lo  { color: rgba(255,255,255,0.16); }
.fp-tr-info { flex: 1; min-width: 0; }
.fp-tr-name   { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.68); }
.fp-tr-detail { font-family: var(--mono); font-size: 8.5px; color: rgba(255,255,255,0.24); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── PARKING LOT PANEL ─── */
.fp-lot-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02);
  margin-bottom: 4px;
}
.fp-lot-match { background: rgba(31,223,120,0.04); border-color: rgba(31,223,120,0.09); }
.fp-lot-match-badge {
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  color: var(--green); padding: 2px 7px; border-radius: 5px;
  background: rgba(31,223,120,0.08); border: 1px solid rgba(31,223,120,0.14);
  white-space: nowrap; flex-shrink: 0;
}

/* ─── ANALYTICS PANELS ─── */
.fp-an-head { margin-bottom: 10px; }
.fp-an-title { font-size: 14.5px; font-weight: 700; color: rgba(255,255,255,0.84); letter-spacing: -0.02em; }
.fp-an-meta  { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.26); margin-top: 3px; }

.fp-an-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 4px; }
.fp-ank {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 9px; padding: 8px 6px; text-align: center;
}
.fp-ank-v { font-family: var(--mono); font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.70); letter-spacing: -0.02em; }
.fp-ank-g  { color: var(--green); }
.fp-ank-y  { color: var(--yellow); }
.fp-ank-l  { font-family: var(--mono); font-size: 7.5px; font-weight: 600; color: rgba(255,255,255,0.22); letter-spacing: 0.04em; margin-top: 2px; }

/* Funnel bars */
.fp-funnel { display: flex; flex-direction: column; gap: 4px; }
.fp-fn-row { display: flex; align-items: center; gap: 7px; }
.fp-fn-s { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.33); width: 76px; flex-shrink: 0; }
.fp-fn-track { flex: 1; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
.fp-fn-fill {
  height: 100%; width: 0;
  background: rgba(255,255,255,0.20); border-radius: 3px;
  transition: width 0.80s cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-fn-fill-b { background: #60a5fa; }
.fp-fn-fill-g { background: var(--green); }
.fp-fn-fill-y { background: var(--yellow); }
.fp-fn-n { font-family: var(--mono); font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.38); width: 26px; text-align: right; flex-shrink: 0; }
.fp-fn-ng { color: var(--green) !important; }
.fp-fn-c  { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.24); width: 30px; text-align: right; flex-shrink: 0; }
.fp-fn-cg { color: var(--green) !important; }

/* Site strip */
.fp-site-strip { display: flex; gap: 14px; margin-top: 2px; }
.fp-ss-item { display: flex; align-items: center; gap: 5px; }
.fp-ss-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.fp-ss-g { background: var(--green); }
.fp-ss-b { background: #60a5fa; }
.fp-ss-y { background: var(--yellow); }
.fp-ss-item span { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.35); }
.fp-ss-v { color: rgba(255,255,255,0.52) !important; font-weight: 700; }

/* Bar chart */
.fp-chart { position: relative; padding-bottom: 20px; }
.fp-chart-inner {
  display: flex; align-items: flex-end; gap: 4px;
  height: 80px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 9px;
  padding: 10px 10px 0;
  overflow: hidden;
}
.fp-cb {
  flex: 1; border-radius: 3px 3px 0 0;
  height: 0;
  transition: height 0.70s cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-cb-done { background: var(--green); opacity: 0.70; }
.fp-cb-proj { background: rgba(255,255,255,0.16); }
.fp-chart-target {
  position: absolute; left: 10px; right: 10px;
  bottom: 21px;
  height: 1px;
  border-top: 1px dashed rgba(255,181,71,0.32);
}
.fp-chart-lbls { display: flex; gap: 4px; padding: 5px 10px 0; }
.fp-chart-lbls span { flex: 1; font-family: var(--mono); font-size: 7px; color: rgba(255,255,255,0.20); text-align: center; }
.fp-fc-legend { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.28); }
.fp-fcl-done, .fp-fcl-proj { width: 14px; height: 5px; border-radius: 2px; flex-shrink: 0; }
.fp-fcl-done { background: var(--green); opacity: 0.70; }
.fp-fcl-proj { background: rgba(255,255,255,0.16); }

/* ROI panel */
.fp-roi-block { margin-bottom: 10px; }
.fp-roi-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.fp-roi-src  { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.66); }
.fp-roi-cost { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.28); }
.fp-roi-cost-g { color: var(--green); }
.fp-roi-cost-y { color: var(--yellow); }
.fp-roi-bar-row { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.fp-roi-bl { font-family: var(--mono); font-size: 8.5px; color: rgba(255,255,255,0.26); width: 42px; flex-shrink: 0; }
.fp-roi-track { flex: 1; height: 5px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
.fp-roi-fill {
  height: 100%; width: 0; border-radius: 3px;
  background: rgba(255,255,255,0.18);
  transition: width 0.80s cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-roi-fg { background: var(--green); }
.fp-roi-fb { background: #60a5fa; }
.fp-roi-fy { background: var(--yellow); }
.fp-roi-bv { font-family: var(--mono); font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.38); width: 26px; text-align: right; flex-shrink: 0; }
.fp-roi-g  { color: var(--green); }
.fp-roi-y  { color: var(--yellow); }

/* Screen fail */
.fp-sf-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.fp-sf-top .fp-sf-crit { font-weight: 700; color: rgba(255,255,255,0.72); }
.fp-sf-rank { font-family: var(--mono); font-size: 8.5px; font-weight: 700; color: rgba(255,255,255,0.20); width: 16px; flex-shrink: 0; }
.fp-sf-crit { font-size: 11px; color: rgba(255,255,255,0.55); width: 126px; flex-shrink: 0; }
.fp-sf-track { flex: 1; height: 5px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
.fp-sf-fill {
  height: 100%; width: 0; border-radius: 3px;
  background: rgba(255,255,255,0.18);
  transition: width 0.80s cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-sf-fill-r { background: #f87171; }
.fp-sf-fill-y { background: var(--yellow); }
.fp-sf-n { font-family: var(--mono); font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.38); width: 18px; text-align: right; flex-shrink: 0; }
.fp-sf-p { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.26); width: 28px; text-align: right; flex-shrink: 0; }
.fp-sf-p-r { color: #f87171; }

/* Audit trail */
.fp-aud-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.fp-aud-ts  { font-family: var(--mono); font-size: 8px; color: rgba(255,255,255,0.20); width: 66px; flex-shrink: 0; padding-top: 1px; }
.fp-aud-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.fp-aud-g   { background: var(--green); }
.fp-aud-b   { background: #60a5fa; }
.fp-aud-dim { background: rgba(255,255,255,0.18); }
.fp-aud-ev  { flex: 1; font-size: 10.5px; color: rgba(255,255,255,0.52); line-height: 1.45; }
.fp-aud-act { font-weight: 700; color: rgba(255,255,255,0.58); }
.fp-aud-act-g { color: var(--green); }
.fp-aud-act-b { color: #93c5fd; }
.fp-aud-arr { color: rgba(255,255,255,0.22); }
.fp-aud-by  { font-family: var(--mono); font-size: 8px; color: rgba(255,255,255,0.20); white-space: nowrap; flex-shrink: 0; }

/* Study insights / KPI grid */
.fp-ik-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
.fp-ik { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; padding: 8px 7px; text-align: center; }
.fp-ik-v { font-family: var(--mono); font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.70); letter-spacing: -0.02em; }
.fp-ik-g { color: var(--green); }
.fp-ik-y { color: var(--yellow); }
.fp-ik-l { font-family: var(--mono); font-size: 7.5px; font-weight: 600; color: rgba(255,255,255,0.22); letter-spacing: 0.04em; margin-top: 2px; }

/* Coordinator performance bars */
.fp-coord-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.fp-coord-name { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.58); width: 52px; flex-shrink: 0; }
.fp-coord-track { flex: 1; height: 5px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
.fp-coord-fill {
  height: 100%; width: 0;
  background: rgba(255,255,255,0.18); border-radius: 3px;
  transition: width 0.80s cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-cf-g { background: var(--green); }
.fp-coord-v { font-family: var(--mono); font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.36); width: 58px; text-align: right; flex-shrink: 0; }

/* Report builder */
.fp-rpt-filters { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 11px; }
.fp-rf { display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
.fp-rf-l { font-family: var(--mono); font-size: 8px; color: rgba(255,255,255,0.20); }
.fp-rf-v { font-family: var(--mono); font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.52); }

.fp-rpt-table { border-radius: 9px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); margin-bottom: 10px; }
.fp-rth {
  display: grid; grid-template-columns: 1fr 88px 76px 36px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  color: rgba(255,255,255,0.22); letter-spacing: 0.04em;
}
.fp-rtr {
  display: grid; grid-template-columns: 1fr 88px 76px 36px;
  padding: 7px 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 10.5px; color: rgba(255,255,255,0.56);
}
.fp-rtr-dim { opacity: 0.42; }
.fp-rts-enrolled { color: var(--green); font-weight: 700; }
.fp-rts-contact  { color: #93c5fd; }
.fp-rts-screen   { color: var(--yellow); }
.fp-rts-fail     { color: #f87171; }

.fp-rpt-actions { display: flex; gap: 6px; }
.fp-btn {
  padding: 5px 13px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.04);
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  color: rgba(255,255,255,0.42); cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.fp-btn:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.62); }
.fp-btn-g { background: rgba(31,223,120,0.08); color: var(--green); border-color: rgba(31,223,120,0.16); }
.fp-btn-g:hover { background: rgba(31,223,120,0.13); }
.fp-btn-lg { font-size: 11px; padding: 8px 18px; }

/* Export panel */
.fp-exp-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 11px; }
.fp-exp-row { display: flex; align-items: center; gap: 10px; }
.fp-exp-l { font-family: var(--mono); font-size: 8.5px; color: rgba(255,255,255,0.24); width: 46px; flex-shrink: 0; }
.fp-exp-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.fp-ep {
  padding: 3px 9px; border-radius: 6px;
  font-family: var(--mono); font-size: 8.5px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.28);
}
.fp-ep-on { background: rgba(31,223,120,0.08); border-color: rgba(31,223,120,0.15); color: var(--green); font-weight: 700; }

.fp-col-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fp-cc {
  padding: 3px 9px; border-radius: 6px;
  font-family: var(--mono); font-size: 8.5px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.28);
}
.fp-cc-on { background: rgba(31,223,120,0.06); border-color: rgba(31,223,120,0.13); color: rgba(31,223,120,0.72); }

.fp-exp-action {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.fp-ea-meta { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.26); }

/* ─── RESPONSIVE ─── */
@media (max-width: 860px) {
  .feat-showcase-body { flex-direction: column; height: auto; }
  .feat-nav-col {
    width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 8px; overflow-x: auto; overflow-y: hidden;
    flex-direction: row;
  }
  .feat-nav-group.fng-active { flex-direction: row; flex-wrap: nowrap; }
  .feat-nav-item { min-width: 150px; }
  .fni-desc { display: none; }
  .feat-panel-col { height: 420px; }
  .fp-an-kpis { grid-template-columns: repeat(2, 1fr); }
  .fp-ik-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .fgt-tab { font-size: 11.5px; padding: 7px 11px; }
  .feat-nav-item { min-width: 130px; }
  .fp-fn-s   { width: 60px; }
  .fp-sf-crit { width: 90px; font-size: 10px; }
  .fp-rth, .fp-rtr { grid-template-columns: 1fr 78px 60px; }
  .fp-rth span:last-child, .fp-rtr span:last-child { display: none; }
}

/* ════════════════════════════════════════════════════
   DIAGRAM DIAGRAM CLASSES  (fgd-* and fga-fill-red)
════════════════════════════════════════════════════ */

/* Header row: label + live badge */
.fgd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* Pipeline funnel */
.fgd-funnel { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.fgd-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fgd-stage {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  color: rgba(255,255,255,0.40);
  width: 84px; flex-shrink: 0;
}
.fgd-stage-g { color: var(--green); }
.fgd-row-enrolled .fga-track { height: 7px; }
.fgd-n {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  color: rgba(255,255,255,0.45);
  width: 28px; text-align: right; flex-shrink: 0;
}
.fgd-c {
  font-family: var(--mono); font-size: 8.5px;
  color: rgba(255,255,255,0.22);
  width: 30px; text-align: right; flex-shrink: 0;
}

/* Prescreener criteria grid */
.fgd-criteria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.fgd-crit {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 7px;
  font-family: var(--mono); font-size: 9.5px;
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
}
.fgd-pass { background: rgba(31,223,120,0.06); border-color: rgba(31,223,120,0.12); color: rgba(31,223,120,0.75); }
.fgd-pend { background: rgba(255,181,71,0.06); border-color: rgba(255,181,71,0.12); color: rgba(255,181,71,0.65); }
.fgd-ci { font-size: 11px; font-weight: 900; flex-shrink: 0; }

/* Red fill and labels for screen fail chart */
.fga-fill-red    { background: rgba(248,113,113,0.75) !important; }
.fga-lbl-red     { color: rgba(248,113,113,0.65) !important; }
.fga-num-red     { color: rgba(248,113,113,0.75) !important; }

/* ════════════════════════════════════════════════════
   FEATURES SECTION — cap-card layout (fgr-head, cap-grid-3, cv-*)
════════════════════════════════════════════════════ */

/* Group separator row between feature groups */
.fgr-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 24px;
  margin-bottom: 20px;
  margin-top: 56px;
  border-bottom: 1px solid rgba(13,38,24,0.09);
}
.fgr-head:first-of-type { margin-top: 0; }

/* 3-column cap-grid variant */
.cap-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ── cv-linechart: SVG enrollment projection line chart ── */
.cv-linechart {
  width: 100%;
  height: 58px;
  display: flex;
  align-items: flex-end;
}
.cv-linechart svg { display: block; overflow: visible; }

/* ── cv-screener: eligibility checklist ── */
.cv-screener {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  justify-content: flex-end;
}
.cv-scr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  color: rgba(8,23,15,0.50);
}
.cv-scr-icon { font-size: 11px; font-weight: 700; flex-shrink: 0; }
.cv-scr-pass {
  background: rgba(19,111,61,0.07);
  border-color: rgba(19,111,61,0.14);
  color: var(--green3);
}
.cv-scr-pend {
  background: rgba(212,131,24,0.07);
  border-color: rgba(212,131,24,0.14);
  color: var(--yellow3);
}

/* ── cv-visits: protocol visit windows ── */
.cv-visits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  justify-content: flex-end;
}
.cv-vis-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cv-vis-label {
  font-family: var(--mono);
  font-size: 9.5px;
  color: rgba(8,23,15,0.42);
  min-width: 70px;
  flex-shrink: 0;
}
.cv-vis-track {
  flex: 1;
  height: 5px;
  background: rgba(13,38,24,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.cv-vis-fill {
  height: 100%;
  border-radius: 3px;
}
.cv-vis-done   { width: 100%; background: var(--green3); }
.cv-vis-soon   { width: 55%;  background: var(--yellow3); opacity: 0.8; }
.cv-vis-future { width: 15%;  background: rgba(13,38,24,0.18); }
.cv-vis-status {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(8,23,15,0.38);
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
}
.cv-vis-complete { color: var(--green3); font-weight: 700; }
.cv-vis-upcoming { color: var(--yellow3); font-weight: 700; }

/* ── cv-comms: message thread ── */
.cv-comms {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  justify-content: flex-end;
}
.cv-msg { display: flex; }
.cv-msg-out  { justify-content: flex-end; }
.cv-msg-in   { justify-content: flex-start; }
.cv-msg-auto { justify-content: center; }
.cv-msg-bubble {
  font-family: var(--mono);
  font-size: 9px;
  padding: 5px 9px;
  border-radius: 10px;
  line-height: 1.4;
  max-width: 88%;
}
.cv-msg-out  .cv-msg-bubble { background: var(--green3); color: #fff; border-radius: 10px 10px 2px 10px; }
.cv-msg-in   .cv-msg-bubble { background: rgba(13,38,24,0.08); color: rgba(8,23,15,0.70); border-radius: 10px 10px 10px 2px; }
.cv-msg-auto .cv-msg-bubble {
  background: rgba(212,131,24,0.09);
  border: 1px dashed rgba(212,131,24,0.30);
  color: rgba(212,131,24,0.80);
  border-radius: 8px;
  font-size: 8.5px;
}

/* ── cv-tasks: prioritized task queue ── */
.cv-tasks {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  justify-content: flex-end;
}
.cv-task-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 9px;
  border: 1px solid transparent;
  color: rgba(8,23,15,0.50);
}
.cv-task-hi  { background: rgba(220,38,38,0.06);  border-color: rgba(220,38,38,0.12); }
.cv-task-mid { background: rgba(212,131,24,0.07); border-color: rgba(212,131,24,0.14); }
.cv-task-pri { flex-shrink: 0; font-weight: 900; font-size: 11px; color: rgba(8,23,15,0.28); }
.cv-task-hi  .cv-task-pri { color: rgba(220,38,38,0.60); }
.cv-task-mid .cv-task-pri { color: rgba(212,131,24,0.70); }
.cv-task-name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cv-task-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(13,38,24,0.07);
  color: rgba(8,23,15,0.40);
}
.cv-tbadge-r { background: rgba(220,38,38,0.10);  color: rgba(185,28,28,0.85); }
.cv-tbadge-y { background: rgba(212,131,24,0.12); color: rgba(161,98,7,0.85); }

/* ── cv-lot: parking lot patient queue ── */
.cv-lot {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  justify-content: flex-end;
}
.cv-lot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: rgba(8,23,15,0.50);
}
.cv-lot-match { color: var(--green3); }
.cv-lot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(13,38,24,0.20);
}
.cv-lot-g    { background: var(--green3); }
.cv-lot-gray { background: rgba(13,38,24,0.18); }
.cv-lot-name { font-weight: 700; flex-shrink: 0; }
.cv-lot-tag  {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 9px;
  color: rgba(8,23,15,0.36);
  text-align: right;
}
.cv-lot-match .cv-lot-tag { color: rgba(19,111,61,0.65); }
.cv-lot-wait { color: rgba(8,23,15,0.28) !important; }

/* ── cv-screenfail: screen fail by criterion ── */
.cv-screenfail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  justify-content: flex-end;
}
.cv-sf-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.cv-sf-rank {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  color: rgba(8,23,15,0.22);
  flex-shrink: 0;
  width: 14px;
}
.cv-sf-crit {
  font-family: var(--mono);
  font-size: 9.5px;
  color: rgba(8,23,15,0.50);
  min-width: 64px;
  flex-shrink: 0;
}
.cv-sf-track {
  flex: 1;
  height: 5px;
  background: rgba(13,38,24,0.07);
  border-radius: 3px;
  overflow: hidden;
}
.cv-sf-fill {
  height: 100%;
  border-radius: 3px;
  background: rgba(13,38,24,0.18);
}
.cv-sf-red    { background: rgba(220,38,38,0.55); }
.cv-sf-yellow { background: rgba(212,131,24,0.55); }
.cv-sf-w88 { width: 88%; }
.cv-sf-w72 { width: 72%; }
.cv-sf-w44 { width: 44%; }
.cv-sf-w34 { width: 34%; }
.cv-sf-pct {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(8,23,15,0.38);
  min-width: 26px;
  text-align: right;
  flex-shrink: 0;
}
.cv-pct-red { color: rgba(185,28,28,0.75); font-weight: 700; }

/* ── cv-insights: study KPI grid ── */
.cv-insights {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  justify-content: flex-end;
}
.cv-ins-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.cv-ins-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 4px;
  background: rgba(13,38,24,0.04);
  border-radius: 7px;
  border: 1px solid rgba(13,38,24,0.06);
}
.cv-ins-v {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.cv-ins-g { color: var(--green3); }
.cv-ins-y { color: var(--yellow3); }
.cv-ins-l {
  font-family: var(--mono);
  font-size: 7.5px;
  color: rgba(8,23,15,0.38);
  text-align: center;
  line-height: 1.2;
}

/* Width utility classes for cv-tplperf fills */
.cv-tpl-w73 { width: 73%; }
.cv-tpl-w59 { width: 59%; }
.cv-tpl-w55 { width: 55%; }
.cv-tpl-w42 { width: 42%; }
.cv-tpl-w31 { width: 31%; }
.cv-tpl-w9  { width: 9%; }

/* Height utility classes for cv-rep-bar */
.cv-rh96 { height: 96%; }
.cv-rh88 { height: 88%; }
.cv-rh76 { height: 76%; }
.cv-rh72 { height: 72%; }
.cv-rh64 { height: 64%; }
.cv-rh58 { height: 58%; }
.cv-rh52 { height: 52%; }
.cv-rh46 { height: 46%; }
.cv-rh44 { height: 44%; }
.cv-rh40 { height: 40%; }
.cv-rh32 { height: 32%; }
.cv-rh22 { height: 22%; }
.cv-rh20 { height: 20%; }
.cv-rh18 { height: 18%; }
.cv-rh16 { height: 16%; }
.cv-rh14 { height: 14%; }

/* ── cv-tplperf: pre-screener template performance ── */
.cv-tplperf {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  justify-content: flex-end;
}
.cv-tpl-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.cv-tpl-name {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(8,23,15,0.50);
  min-width: 72px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-tpl-tracks {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cv-tpl-track {
  height: 4px;
  background: rgba(13,38,24,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.cv-tpl-fill-pass   { height: 100%; border-radius: 2px; background: var(--green3); }
.cv-tpl-fill-enroll { height: 100%; border-radius: 2px; background: var(--lime3); opacity: 0.7; }
.cv-tpl-pct {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--green3);
  min-width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* ── cv-report: report builder preview ── */
.cv-report {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.cv-rep-kpis {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cv-rep-kpi {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--mono);
  font-size: 8.5px;
  color: rgba(8,23,15,0.42);
}
.cv-rep-kn { font-size: 12px; font-weight: 800; color: var(--ink); }
.cv-rep-kn-s { color: #3b82f6; }
.cv-rep-kn-e { color: var(--green3); }
.cv-rep-export {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 700;
  color: var(--green3);
  padding: 2px 6px;
  border: 1px solid rgba(19,111,61,0.25);
  border-radius: 4px;
  white-space: nowrap;
}
.cv-rep-svg { display: block; width: 100%; }

@media (min-width: 1025px) {
  .cap-grid-3 > .cap-card-wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(340px, 0.9fr) minmax(420px, 1.1fr);
    align-items: center;
    gap: 28px;
    min-height: 190px;
  }

  .cap-grid-3 > .cap-card-wide .cap-visual {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 132px;
    height: auto;
    margin-bottom: 0;
    align-items: center;
  }

  .cap-grid-3 > .cap-card-wide .cap-title,
  .cap-grid-3 > .cap-card-wide .cap-desc {
    grid-column: 1;
    max-width: 44ch;
  }

  .cap-grid-3 > .cap-card-wide .cap-title {
    align-self: end;
  }

  .cap-grid-3 > .cap-card-wide .cap-desc {
    align-self: start;
  }

  .cap-card-wide .cv-report {
    gap: 10px;
    justify-content: center;
  }
  .cap-card-wide .cv-rep-kn { font-size: 15px; }
  .cap-card-wide .cv-rep-kpi { font-size: 10px; gap: 4px; }
  .cap-card-wide .cv-rep-export { font-size: 9px; padding: 3px 8px; }
  .cap-card-wide .cv-rep-svg { height: 80px; }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .cap-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .cap-grid-3 > .cap-card-wide { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .cap-grid-3 { grid-template-columns: 1fr; }
  .fgr-head { margin-top: 40px; }
}

@media (min-width: 901px) {
  .blueprint-section,
  .workflow-section,
  .features-section,
  .roadmap-section,
  .integrations-section,
  .team-section {
    padding-top: 112px;
    padding-bottom: 112px;
  }
}

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

  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════
   WHY + SINGLE SOURCE REPAIR
   Brings the middle story back into the lighter product theme.
═══════════════════════════════════════════ */
.pillars-section {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(31,223,120,0.09), transparent 65%),
    var(--black) !important;
  border-top: 1px solid rgba(31,223,120,0.08) !important;
  border-bottom: none !important;
}
.sst-section {
  background:
    radial-gradient(ellipse 80% 60% at 50% -8%, rgba(31,223,120,0.16), transparent 65%),
    radial-gradient(ellipse 40% 35% at 85% 100%, rgba(31,223,120,0.07), transparent 60%),
    linear-gradient(180deg, #0d2016 0%, #17351f 55%, #0d2016 100%) !important;
  border-top: 1px solid rgba(31,223,120,0.10) !important;
  border-bottom: 1px solid rgba(31,223,120,0.06) !important;
}
.pillars-section {
  padding: 108px 0 94px !important;
}
.sst-section {
  padding: 104px 0 118px !important;
}
.pillars-section::before {
  background: linear-gradient(90deg, transparent, rgba(19,111,61,0.20), transparent) !important;
}
.pillars-intro,
.sst-header {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.pillars-intro {
  margin-bottom: 44px !important;
}
.sst-header {
  margin-bottom: 48px !important;
}
.pillars-section h2.section-title,
.sst-section h2.section-title { color: #ffffff !important; }
.pillars-section h2.section-title em,
.sst-section h2.section-title em {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
  background: none !important;
}
.pillars-section span.eyebrow,
.sst-section span.eyebrow { color: var(--green) !important; }
.sst-section .section-body,
.sst-lead { color: rgba(255,255,255,0.58) !important; }
.pillars-section .reveal,
.sst-section .reveal {
  opacity: 1 !important;
  transform: none !important;
}

.pillars-grid {
  max-width: 1260px;
  margin: 0 auto;
  gap: 20px !important;
}
.pillar-card {
  background: linear-gradient(160deg, #ffffff 0%, #f5fbf7 100%) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 20px !important;
  padding: 30px 28px !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.08) inset,
    0 6px 24px rgba(0,0,0,0.36),
    0 24px 64px rgba(0,0,0,0.32) !important;
}
.pillar-card::before {
  height: 3px !important;
  left: 28px !important;
  right: 28px !important;
  top: 0 !important;
  background: linear-gradient(90deg, var(--green3), rgba(19,111,61,0.10)) !important;
  border-radius: 0 0 3px 3px !important;
}
.pillar-card-gold::before {
  background: linear-gradient(90deg, var(--yellow3), rgba(212,131,24,0.10)) !important;
}
.pillar-card-blue::before {
  background: linear-gradient(90deg, #2f7dc8, rgba(47,125,200,0.10)) !important;
}
.pillar-card::after {
  display: none !important;
}
.pillar-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.10) inset,
    0 10px 40px rgba(0,0,0,0.44),
    0 32px 80px rgba(0,0,0,0.36) !important;
}
.pillar-top {
  margin-bottom: 18px !important;
  gap: 12px !important;
}
.pillar-num {
  font-family: var(--body) !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  color: rgba(19,111,61,0.28) !important;
}
.pillar-num-gold { color: rgba(212,131,24,0.30) !important; }
.pillar-num-blue { color: rgba(47,125,200,0.30) !important; }
.pillar-tag {
  color: var(--green3) !important;
  background: rgba(19,111,61,0.08) !important;
  border-color: rgba(19,111,61,0.20) !important;
  letter-spacing: 0.13em !important;
}
.pillar-tag-gold {
  color: var(--yellow3) !important;
  background: rgba(212,131,24,0.09) !important;
  border-color: rgba(212,131,24,0.22) !important;
}
.pillar-tag-blue {
  color: #2f7dc8 !important;
  background: rgba(47,125,200,0.08) !important;
  border-color: rgba(47,125,200,0.20) !important;
}
.pillar-visual {
  min-height: 96px !important;
  margin: 4px 0 22px !important;
  border: 1px solid rgba(13,38,24,0.09) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.64), rgba(234,244,226,0.44)) !important;
}
.pv-row,
.pv-risk-head,
.pv-risk-meta,
.pv-auto-step {
  color: rgba(8,23,15,0.56) !important;
}
.pv-risk-bar,
.pv-auto-step {
  background: rgba(13,38,24,0.06) !important;
}
.pv-auto-result {
  background: rgba(47,125,200,0.08) !important;
  border-color: rgba(47,125,200,0.20) !important;
  color: #2f7dc8 !important;
}
.pv-auto-arrow {
  color: rgba(8,23,15,0.34) !important;
}
.pv-risk-val {
  color: rgba(8,23,15,0.74) !important;
}
.pv-risk-flag {
  color: var(--yellow3) !important;
}
.pillar-head {
  color: var(--ink) !important;
  font-size: 20px !important;
  letter-spacing: -0.020em !important;
  margin-bottom: 10px !important;
}
.pillar-body {
  color: rgba(8,23,15,0.62) !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
  margin-bottom: 26px !important;
}
.pillar-accent {
  border-top-color: rgba(13,38,24,0.10) !important;
  padding-top: 18px !important;
}
.pa-value {
  font-family: var(--body) !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  text-transform: none !important;
  color: var(--green3) !important;
}
.pa-gold { color: var(--yellow3) !important; }
.pa-blue { color: #2f7dc8 !important; }
.pa-label {
  color: rgba(8,23,15,0.44) !important;
  letter-spacing: 0.055em !important;
}

.sst-diagram {
  max-width: 1120px !important;
  grid-template-columns: minmax(180px, 1fr) 92px minmax(190px, auto) 92px minmax(180px, 1fr) !important;
  padding: 38px 42px !important;
  border: 1px solid rgba(13,38,24,0.10) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248,253,243,0.60)) !important;
  box-shadow: 0 22px 70px rgba(24,35,48,0.08) !important;
}
.sst-sources .sst-col-label,
.sst-outputs .sst-col-label {
  color: rgba(8,23,15,0.42) !important;
}
.sst-chip {
  border-radius: 9px !important;
  font-size: 10.5px !important;
}
.sst-chip-src {
  background: rgba(255,255,255,0.74) !important;
  border-color: rgba(13,38,24,0.12) !important;
  color: rgba(8,23,15,0.58) !important;
}
.sst-chip-out {
  background: rgba(19,111,61,0.08) !important;
  border-color: rgba(19,111,61,0.20) !important;
  color: var(--green3) !important;
}
.sst-ray {
  height: 2px !important;
  background: rgba(19,111,61,0.10) !important;
}
.sst-ray::after {
  background: linear-gradient(90deg, transparent, rgba(19,111,61,0.85), transparent) !important;
}
.sst-hub-glow {
  display: none !important;
}
.sst-hub-outer-ring {
  border-color: rgba(19,111,61,0.13) !important;
}
.sst-hub-ring {
  width: 164px !important;
  height: 164px !important;
  background: rgba(19,111,61,0.05) !important;
  border-color: rgba(19,111,61,0.22) !important;
  box-shadow: 0 18px 46px rgba(19,111,61,0.12) !important;
}
.sst-hub-inner {
  width: 132px !important;
  height: 132px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(234,244,226,0.66)) !important;
  border-color: rgba(19,111,61,0.20) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72) !important;
}
.sst-hub-logo {
  color: var(--green3) !important;
}
.sst-hub-logo span {
  color: var(--green3) !important;
}
.sst-hub-kv {
  color: var(--ink) !important;
}
.sst-hub-kv-green { color: var(--green3) !important; }
.sst-hub-kv-yellow { color: var(--yellow3) !important; }
.sst-hub-kv-red { color: #c14848 !important; }
.sst-hub-kl {
  color: rgba(8,23,15,0.38) !important;
}
.sst-hub-badge {
  background: rgba(19,111,61,0.08) !important;
  border-color: rgba(19,111,61,0.20) !important;
  color: var(--green3) !important;
}
.sst-hub-dot {
  background: var(--green3) !important;
}

@media (max-width: 980px) {
  .pillars-grid {
    grid-template-columns: 1fr !important;
    max-width: 640px !important;
  }
  .sst-diagram {
    grid-template-columns: 1fr 1fr !important;
    padding: 28px !important;
  }
}
@media (max-width: 620px) {
  .pillars-section,
  .sst-section {
    padding: 78px 0 !important;
  }
  .pillar-card {
    padding: 26px 22px !important;
  }
  .sst-diagram {
    grid-template-columns: 1fr !important;
    max-width: 420px !important;
  }
  .sst-sources,
  .sst-outputs {
    grid-column: 1 !important;
    align-items: stretch !important;
  }
  .sst-hub {
    grid-column: 1 !important;
  }
}

/* READABILITY + ALIGNMENT FINISHING PASS
   Keeps the visual direction intact while making support copy easier to scan. */
.hero .hero-badge,
.hero .hero-h1,
.hero .hero-sub,
.hero .hero-ctas {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

.reveal,
.reveal-left,
.reveal-right {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.problem-intro,
.platform-header,
.arch-header,
.blueprint-header,
.workflow-header,
.features-intro,
.roadmap-header,
.integrations-header,
.team-intro,
.pillars-intro,
.sst-header {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.problem-section .section-body,
.platform-section .section-body,
.architecture-section .section-body,
.blueprint-section .section-body,
.workflow-section .section-body,
.features-section .section-body,
.roadmap-section .section-body,
.integrations-section .section-body,
.team-section .section-body {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: rgba(8,23,15,0.76) !important;
  font-size: 18px !important;
  line-height: 1.76 !important;
  letter-spacing: -0.004em !important;
  text-wrap: pretty;
}

.problem-section .problem-block-right p,
.platform-section .cap-desc,
.features-section .cap-desc,
.features-section .fg-sub,
.roadmap-section .phase-desc,
.integrations-section .integration-card p,
.integrations-section .integration-note p,
.team-section .team-lead,
.team-section .founder-bio,
.workflow-section .how-body,
.roles-section .role-list li,
.feature-item .fi-desc {
  color: rgba(8,23,15,0.72) !important;
  font-size: 15.5px !important;
  line-height: 1.72 !important;
  letter-spacing: -0.003em !important;
  text-wrap: pretty;
}

.platform-section .cap-desc,
.features-section .cap-desc,
.roadmap-section .phase-desc,
.integrations-section .integration-card p {
  max-width: 62ch !important;
}

.problem-section .problem-block,
.platform-section .cap-card,
.features-section .cap-card,
.roadmap-section .phase-card,
.integrations-section .integration-card,
.pillars-section .pillar-card,
.team-section .founder-card {
  text-align: left !important;
}

.platform-section .cap-title,
.features-section .cap-title,
.roadmap-section .phase-title,
.integrations-section .integration-card h3,
.pillars-section .pillar-head {
  text-wrap: balance;
}

.features-section .fgr-head {
  align-items: flex-start !important;
  gap: 18px !important;
}

.features-section .fg-meta {
  max-width: 760px !important;
}

.features-section .fg-sub {
  max-width: 680px !important;
  margin-top: 6px !important;
}

.team-section .founder-bio {
  font-size: 16px !important;
  line-height: 1.78 !important;
}

.team-section .team-lead {
  font-size: 17px !important;
  line-height: 1.74 !important;
}

.integrations-section .integration-card {
  align-items: flex-start !important;
}

.integrations-section .integration-card p {
  margin-top: 4px !important;
}

@media (max-width: 760px) {
  .problem-section .section-body,
  .platform-section .section-body,
  .architecture-section .section-body,
  .blueprint-section .section-body,
  .workflow-section .section-body,
  .features-section .section-body,
  .roadmap-section .section-body,
  .integrations-section .section-body,
  .team-section .section-body,
  .pillars-section .section-body,
  .sst-section .section-body {
    font-size: 16.5px !important;
    line-height: 1.70 !important;
  }

  .problem-section .problem-block-right p,
  .platform-section .cap-desc,
  .features-section .cap-desc,
  .features-section .fg-sub,
  .roadmap-section .phase-desc,
  .integrations-section .integration-card p,
  .integrations-section .integration-note p,
  .team-section .team-lead,
  .team-section .founder-bio,
  .workflow-section .how-body,
  .roles-section .role-list li,
  .feature-item .fi-desc,
  .pillars-section .pillar-body,
  .sst-section .sst-lead {
    font-size: 14.75px !important;
    line-height: 1.68 !important;
  }

  .features-section .fgr-head {
    gap: 14px !important;
  }
}

.architecture-section .section-body {
  color: rgba(210,232,218,0.74) !important;
}

/* ═══════════════════════════════════════════
   DARK SECTION BODY TEXT — correct colors
   (removed from ink-forcing block above)
═══════════════════════════════════════════ */
.pillars-section .pillar-body {
  color: var(--gray2) !important;
  font-size: 15px !important;
  line-height: 1.74 !important;
}
.sst-section .section-body,
.sst-section .sst-lead {
  color: rgba(255,255,255,0.58) !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 17px !important;
  line-height: 1.74 !important;
}

/* ═══════════════════════════════════════════
   MOBILE — COMPLETE FIX
   Covers all gaps for seamless ≤768px layout
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Dark sections: reduce oversized desktop padding */
  .pillars-section { padding: 72px 0 !important; }
  .sst-section     { padding: 60px 0 !important; }

  /* SST header: tighter bottom margin */
  .sst-header { margin-bottom: 40px !important; }

  /* Hero: tighter on tablets */
  .hero { padding: 100px 0 52px; }
  .hero-inner { gap: 16px; }

  /* Pillar intro max-width */
  .pillars-intro { max-width: 560px; }
}

@media (max-width: 480px) {
  /* Hero: tightest */
  .hero { padding: 86px 0 40px !important; }
  .hero-badge { font-size: 9.5px !important; padding: 5px 14px !important; margin-bottom: 20px !important; }
  .hero-sub   { font-size: 15.5px !important; line-height: 1.68 !important; margin-bottom: 28px !important; }

  /* SST section: very small screens */
  .sst-section  { padding: 48px 0 !important; }
  .sst-header   { margin-bottom: 28px !important; }
  .sst-lead     { font-size: 14.5px !important; }

  /* SST chips: wrap horizontally instead of column */
  .sst-sources,
  .sst-outputs {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .sst-col-label { width: 100%; text-align: center; }
  .sst-chip      { font-size: 10px !important; padding: 6px 10px !important; }

  /* Pillars: smallest padding */
  .pillars-section { padding: 52px 0 !important; }
  .pillar-card     { padding: 26px 20px !important; }
  .pillar-head     { font-size: 18px !important; }
  .pa-value        { font-size: 28px !important; }

  /* Problem metrics: single col */
  .problem-metrics { grid-template-columns: 1fr !important; }

  /* Ticker: slightly smaller text */
  .ticker-item { font-size: 11px; }

  /* Section title: smallest screens */
  .section-title   { font-size: 25px !important; letter-spacing: -0.020em !important; }
  .hero-inner .hero-h1 { font-size: clamp(38px, 9.5vw, 60px) !important; }

  /* Proof strip */
  .hero-proof-row  { gap: 0; }
  .hpr-item        { padding: 0; }
}

/* ═══════════════════════════════════════════
   FINAL OVERRIDES — highest cascade position
═══════════════════════════════════════════ */

/* ── PROBLEM SECTION — clean white, above body overlay ── */
.problem-section {
  position: relative !important;
  z-index: 1 !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(13,38,24,0.07) !important;
}
.problem-section .section-title { color: #09180f !important; }
.problem-section .section-title em {
  color: #136f3d !important;
  -webkit-text-fill-color: #136f3d !important;
}
.problem-section .eyebrow { color: #136f3d !important; }
.problem-section .problem-lead,
.problem-section .section-body { color: rgba(8,23,15,0.62) !important; }

/* Stat cards — separate, distinct boxes */
.problem-metrics {
  gap: 20px !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.problem-metric {
  background: #ffffff !important;
  border: 1px solid rgba(13,38,24,0.10) !important;
  border-right: 1px solid rgba(13,38,24,0.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(13,38,24,0.05), 0 12px 40px rgba(13,38,24,0.07) !important;
}
.problem-metric:last-child {
  border-right: 1px solid rgba(13,38,24,0.10) !important;
}

/* ── PILLARS SECTION — clean white ── */
.pillars-section {
  background: #ffffff !important;
  border-top: 1px solid rgba(13,38,24,0.08) !important;
  border-bottom: none !important;
}
.pillars-section h2.section-title,
.pillars-intro .section-title { color: #09180f !important; }
.pillars-section h2.section-title em,
.pillars-intro .section-title em {
  color: #136f3d !important;
  -webkit-text-fill-color: #136f3d !important;
  background: none !important;
}
.pillars-section span.eyebrow,
.pillars-section .eyebrow {
  color: #136f3d !important;
  background: rgba(19,111,61,0.07) !important;
  border-color: rgba(19,111,61,0.16) !important;
}
.pillars-section .pillar-body { color: rgba(8,23,15,0.60) !important; }

/* Pillar cards */
.pillar-card {
  background: #f5fbf7 !important;
  border: 1px solid rgba(13,38,24,0.09) !important;
  box-shadow: 0 1px 3px rgba(13,38,24,0.06), 0 8px 28px rgba(13,38,24,0.07) !important;
}
.pillar-card:hover {
  background: #eef8f2 !important;
  border-color: rgba(19,111,61,0.18) !important;
  box-shadow: 0 2px 6px rgba(13,38,24,0.08), 0 16px 48px rgba(13,38,24,0.10) !important;
  transform: translateY(-3px) !important;
}
.pillar-num { color: rgba(19,111,61,0.22) !important; }
.pillar-num-gold { color: rgba(212,131,24,0.24) !important; }
.pillar-num-blue { color: rgba(47,125,200,0.24) !important; }
.pillar-head { color: #09180f !important; }

/* ── SST SECTION — warm white ── */
.sst-section {
  background: #f8fcf9 !important;
  border-top: 1px solid rgba(13,38,24,0.07) !important;
  border-bottom: 1px solid rgba(13,38,24,0.06) !important;
}

/* SST headings — dark and visible */
.sst-section .sst-header .section-title,
.sst-section h2.section-title,
.sst-header .section-title {
  color: #09180f !important;
  -webkit-text-fill-color: #09180f !important;
}
.sst-section .sst-header .section-title em,
.sst-section h2.section-title em,
.sst-header .section-title em {
  color: #136f3d !important;
  -webkit-text-fill-color: #136f3d !important;
  background: none !important;
}
.sst-section span.eyebrow,
.sst-section .eyebrow {
  color: #136f3d !important;
  background: rgba(19,111,61,0.07) !important;
  border-color: rgba(19,111,61,0.16) !important;
}
.sst-section .sst-lead,
.sst-section .section-body,
.sst-lead { color: rgba(8,23,15,0.58) !important; }

/* SST diagram card */
.sst-diagram {
  background: #ffffff !important;
  border: 1px solid rgba(13,38,24,0.10) !important;
  border-top: 3px solid #136f3d !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(13,38,24,0.06), 0 16px 56px rgba(13,38,24,0.09) !important;
  padding: 40px 48px !important;
}

/* Column labels */
.sst-sources .sst-col-label { color: rgba(8,23,15,0.35) !important; }
.sst-outputs .sst-col-label { color: #136f3d !important; }

/* Source chips — white, refined */
.sst-chip-src {
  background: #ffffff !important;
  border: 1px solid rgba(13,38,24,0.12) !important;
  color: rgba(8,23,15,0.70) !important;
  box-shadow: 0 1px 4px rgba(13,38,24,0.06) !important;
}

/* Output chips — solid forest green, white text */
.sst-chip-out {
  background: #136f3d !important;
  border: 1px solid #0f5c32 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(19,111,61,0.22) !important;
}

/* Connector rays */
.sst-ray { background: rgba(13,38,24,0.07) !important; }
.sst-ray::after {
  background: linear-gradient(90deg, transparent, #1fdf78, transparent) !important;
}

/* Hub — solid green gradient */
.sst-hub-outer-ring { border-color: rgba(31,223,120,0.20) !important; }
.sst-hub-ring {
  background: rgba(19,111,61,0.05) !important;
  border-color: rgba(19,111,61,0.24) !important;
}
.sst-hub-inner {
  background: linear-gradient(135deg, #1fdf78 0%, #136f3d 100%) !important;
  border-color: #136f3d !important;
  box-shadow: 0 6px 28px rgba(19,111,61,0.28) !important;
}
.sst-hub-logo { color: #ffffff !important; }
.sst-hub-logo span { color: rgba(255,255,255,0.78) !important; }
.sst-hub-glow {
  background: radial-gradient(circle, rgba(31,223,120,0.16), transparent 68%) !important;
}
.sst-hub-kv { color: #ffffff !important; }
.sst-hub-kv-green { color: #baffd6 !important; }
.sst-hub-kv-yellow { color: #ffd36a !important; }
.sst-hub-kv-red { color: #fca5a5 !important; }
.sst-hub-kl { color: rgba(255,255,255,0.50) !important; }
.sst-hub-badge {
  background: rgba(19,111,61,0.08) !important;
  border-color: rgba(19,111,61,0.20) !important;
  color: #136f3d !important;
}

/* ── CTA — centered ── */
.cta-inner {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.cta-sub {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* MANUAL VISUAL DIRECTION PASS
   Final cascade layer: restores a premium EnrollIQ feel without changing content. */
:root {
  --ei-dark: #06120b;
  --ei-dark-2: #0a1a10;
  --ei-forest: #0f6f3d;
  --ei-green: #1fdf78;
  --ei-lime: #baff15;
  --ei-gold: #d98a1a;
  --ei-blue: #2f82d7;
  --ei-paper: #f6fbf3;
  --ei-paper-2: #edf7ea;
  --ei-line: rgba(13,38,24,0.12);
  --ei-shadow: 0 22px 70px rgba(13,38,24,0.10);
  --ei-shadow-strong: 0 34px 110px rgba(13,38,24,0.16);
  --ei-gutter: clamp(30px, 5vw, 92px);
  --ei-gap: clamp(20px, 1.65vw, 34px);
}

html {
  scroll-padding-top: 88px;
}

section[id] {
  scroll-margin-top: 88px !important;
}

body {
  background: var(--ei-dark) !important;
}

body::before {
  opacity: 1 !important;
  background:
    radial-gradient(ellipse 58% 44% at 6% 0%, rgba(31,223,120,0.17), transparent 64%),
    radial-gradient(ellipse 44% 34% at 92% 4%, rgba(186,255,21,0.13), transparent 64%),
    radial-gradient(ellipse 60% 44% at 50% 100%, rgba(47,130,215,0.10), transparent 66%),
    linear-gradient(180deg, #06120b 0%, #09170e 42%, #06120b 100%) !important;
}

.container {
  width: min(1760px, calc(100% - var(--ei-gutter))) !important;
}

nav,
nav.scrolled {
  min-height: 72px !important;
  padding: 12px clamp(24px, 3.2vw, 54px) !important;
  background:
    linear-gradient(180deg, rgba(6,18,11,0.985), rgba(7,20,12,0.965)) !important;
  border-bottom: 1px solid rgba(186,255,21,0.12) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,0.30) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
}

nav::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 1px !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent, rgba(186,255,21,0.34), transparent) !important;
}

.nav-logo-mark {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #d9ff4f 0%, #89ef39 45%, #1fdf78 100%) !important;
  box-shadow: 0 14px 34px rgba(31,223,120,0.22), inset 0 0 0 1px rgba(255,255,255,0.34) !important;
}

.nav-logo-text,
.nav-logo-text span {
  color: #f8fff0 !important;
  -webkit-text-fill-color: #f8fff0 !important;
}

.nav-links {
  gap: 2px !important;
  padding: 5px !important;
  border: 1px solid rgba(255,255,255,0.075) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.035) !important;
}

nav .nav-links a,
nav .nav-links a:link,
nav .nav-links a:visited,
.nav-mobile-menu a,
.nav-mobile-menu a:link,
.nav-mobile-menu a:visited {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  color: rgba(241,250,235,0.76) !important;
  -webkit-text-fill-color: rgba(241,250,235,0.76) !important;
  text-decoration: none !important;
}

nav .nav-links a:hover,
nav .nav-links a:focus-visible,
nav .nav-links a.is-active {
  background: rgba(186,255,21,0.11) !important;
  color: #fbfff1 !important;
  -webkit-text-fill-color: #fbfff1 !important;
}

nav .nav-links a::after {
  display: none !important;
}

.nav-cta,
.nav-cta:link,
.nav-cta:visited,
.nav-mobile-menu .nav-mobile-cta,
.nav-mobile-menu .nav-mobile-cta:link,
.nav-mobile-menu .nav-mobile-cta:visited {
  border-radius: 8px !important;
  background: linear-gradient(135deg, #d8ff25, #aef400) !important;
  border: 1px solid rgba(244,255,189,0.55) !important;
  color: #07120b !important;
  -webkit-text-fill-color: #07120b !important;
  box-shadow: 0 14px 38px rgba(186,243,21,0.24) !important;
}

.ticker-wrap {
  background: #06120b !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(186,255,21,0.10) !important;
}

.problem-section,
.platform-section,
.features-section,
.roadmap-section,
.integrations-section,
.team-section {
  background:
    radial-gradient(ellipse 42% 30% at 7% 14%, rgba(31,223,120,0.10), transparent 70%),
    radial-gradient(ellipse 42% 28% at 92% 7%, rgba(186,255,21,0.12), transparent 68%),
    linear-gradient(180deg, var(--ei-paper) 0%, var(--ei-paper-2) 100%) !important;
}

.pillars-section {
  background:
    linear-gradient(180deg, #fafff8 0%, #f3faf1 55%, #edf7ea 100%) !important;
  border-top: 1px solid rgba(13,38,24,0.08) !important;
  border-bottom: 1px solid rgba(13,38,24,0.08) !important;
}

.sst-section {
  background:
    radial-gradient(ellipse 44% 34% at 5% 18%, rgba(31,223,120,0.08), transparent 72%),
    radial-gradient(ellipse 44% 34% at 92% 16%, rgba(186,255,21,0.10), transparent 70%),
    linear-gradient(180deg, #f4fbf2 0%, #eef8ec 100%) !important;
}

.architecture-section {
  background:
    radial-gradient(ellipse 50% 42% at 4% 8%, rgba(31,223,120,0.18), transparent 64%),
    radial-gradient(ellipse 46% 38% at 94% 10%, rgba(186,255,21,0.12), transparent 62%),
    linear-gradient(180deg, #06120b 0%, #07190f 56%, #06120b 100%) !important;
}

.section-title {
  font-size: clamp(42px, 4.65vw, 78px) !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
}

.hero-inner .hero-h1 {
  font-size: clamp(68px, 7vw, 122px) !important;
  line-height: 0.88 !important;
}

.section-body,
.hero-sub,
.problem-section .problem-block-right p,
.platform-section .cap-desc,
.features-section .cap-desc,
.roadmap-section .phase-desc,
.integrations-section .integration-card p,
.pillars-section .pillar-body,
.sst-section .sst-lead,
.team-section .founder-bio {
  font-size: clamp(16px, 1.02vw, 18.5px) !important;
  line-height: 1.72 !important;
}

.problem-metrics,
.cap-grid,
.cap-grid-3,
.pillars-grid,
.roadmap-grid,
.integration-grid,
.founder-grid {
  gap: var(--ei-gap) !important;
}

.problem-metrics {
  max-width: min(1180px, 100%) !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(250px, 22vw, 360px)), 1fr)) !important;
}

.cap-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(270px, 21vw, 390px)), 1fr)) !important;
}

.cap-grid-3,
.pillars-grid,
.roadmap-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(320px, 28vw, 500px)), 1fr)) !important;
}

.integration-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(280px, 22vw, 390px)), 1fr)) !important;
}

.problem-metric,
.cap-card,
.pillar-card,
.phase-card,
.integration-card,
.founder-card {
  border-radius: 16px !important;
  border-color: rgba(13,38,24,0.12) !important;
  box-shadow: var(--ei-shadow) !important;
}

.problem-metric,
.cap-card,
.pillar-card,
.phase-card {
  min-height: clamp(320px, 25vw, 500px) !important;
}

.problem-metric {
  min-height: clamp(180px, 14vw, 235px) !important;
}

.platform-section .cap-card {
  min-height: clamp(290px, 22vw, 430px) !important;
}

.features-section .cap-card {
  min-height: clamp(390px, 31vw, 570px) !important;
}

.pillar-card {
  background:
    radial-gradient(circle at 86% 0%, rgba(31,223,120,0.10), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f1f9f4 100%) !important;
  border-top: 4px solid var(--ei-forest) !important;
}

.pillar-card-gold {
  background:
    radial-gradient(circle at 88% 0%, rgba(255,181,71,0.20), transparent 40%),
    linear-gradient(180deg, #fffdf8 0%, #fbf3df 100%) !important;
  border-top-color: var(--ei-gold) !important;
}

.pillar-card-blue {
  background:
    radial-gradient(circle at 88% 0%, rgba(47,130,215,0.17), transparent 40%),
    linear-gradient(180deg, #fbfdff 0%, #eef6ff 100%) !important;
  border-top-color: var(--ei-blue) !important;
}

.pillar-card:hover,
.cap-card:hover,
.phase-card:hover,
.integration-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ei-shadow-strong) !important;
}

.cap-card::before,
.phase-card::before,
.founder-card::before {
  height: 4px !important;
  background: linear-gradient(90deg, var(--ei-forest), var(--ei-lime)) !important;
}

.platform-section .cap-card:nth-child(3)::before,
.features-section .cap-card:nth-child(2)::before,
.features-section .cap-card:nth-child(8)::before,
.phase-building::before {
  background: linear-gradient(90deg, var(--ei-gold), rgba(255,181,71,0.34)) !important;
}

.platform-section .cap-card:nth-child(4)::before,
.features-section .cap-card:nth-child(4)::before,
.features-section .cap-card:nth-child(10)::before {
  background: linear-gradient(90deg, var(--ei-blue), rgba(96,165,250,0.28)) !important;
}

.cap-visual,
.platform-section .cap-visual {
  min-height: clamp(120px, 8.5vw, 170px) !important;
  height: clamp(120px, 8.5vw, 170px) !important;
}

.sst-diagram {
  width: min(1320px, 100%) !important;
  max-width: none !important;
  border-radius: 20px !important;
  padding: clamp(38px, 4vw, 68px) clamp(36px, 4.3vw, 76px) !important;
  grid-template-columns: minmax(210px, 1fr) minmax(70px, 0.38fr) minmax(210px, auto) minmax(70px, 0.38fr) minmax(210px, 1fr) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(31,223,120,0.07), transparent 35%),
    #ffffff !important;
  border: 1px solid rgba(13,38,24,0.11) !important;
  border-top: 4px solid var(--ei-forest) !important;
  box-shadow: 0 30px 95px rgba(13,38,24,0.13) !important;
}

.sst-chip {
  font-size: clamp(10.5px, 0.75vw, 13px) !important;
  padding: clamp(8px, 0.75vw, 12px) clamp(12px, 0.95vw, 18px) !important;
}

.sst-hub-ring {
  width: clamp(170px, 12vw, 230px) !important;
  height: clamp(170px, 12vw, 230px) !important;
}

.sst-hub-inner {
  width: clamp(132px, 9vw, 172px) !important;
  height: clamp(132px, 9vw, 172px) !important;
}

.footer,
footer {
  background:
    radial-gradient(ellipse 44% 35% at 9% 0%, rgba(31,223,120,0.12), transparent 64%),
    linear-gradient(180deg, #06120b 0%, #040c07 100%) !important;
  border-top: 1px solid rgba(186,255,21,0.12) !important;
}

@media (min-width: 1500px) {
  .cap-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .cap-grid-3,
  .pillars-grid,
  .roadmap-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .container {
    width: min(calc(100% - 42px), 920px) !important;
  }
  .cap-grid,
  .cap-grid-3,
  .pillars-grid,
  .roadmap-grid,
  .integration-grid,
  .founder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .sst-diagram {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(calc(100% - 30px), 620px) !important;
  }
  nav,
  nav.scrolled {
    min-height: 64px !important;
  }
  .nav-links,
  .nav-cta {
    display: none !important;
  }
  .section-title {
    font-size: clamp(34px, 9vw, 48px) !important;
  }
  .hero-inner .hero-h1 {
    font-size: clamp(42px, 14vw, 68px) !important;
  }
  .cap-grid,
  .cap-grid-3,
  .pillars-grid,
  .roadmap-grid,
  .integration-grid,
  .founder-grid,
  .problem-metrics {
    grid-template-columns: 1fr !important;
  }
  .problem-metric,
  .cap-card,
  .pillar-card,
  .phase-card,
  .integration-card,
  .founder-card {
    min-height: auto !important;
    border-radius: 14px !important;
  }
}

/* Problem section correction: keep the opening evidence together. */
.problem-section {
  padding: clamp(96px, 8vw, 150px) 0 clamp(108px, 8vw, 156px) !important;
}

.problem-intro {
  width: 100% !important;
  max-width: min(1340px, 100%) !important;
  margin: 0 auto clamp(70px, 6vw, 104px) !important;
  text-align: center !important;
}

.problem-section .section-title {
  max-width: 1120px !important;
  margin: 0 auto !important;
  font-size: clamp(54px, 5.15vw, 96px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.036em !important;
  text-wrap: balance;
}

.problem-section .section-title em {
  display: block !important;
  margin-top: 0.06em !important;
  color: #0f7a3e !important;
  letter-spacing: -0.018em !important;
}

.problem-section .problem-lead,
.problem-section .section-body.problem-lead {
  max-width: 890px !important;
  margin-top: clamp(22px, 2vw, 32px) !important;
  font-family: var(--body) !important;
  font-style: normal !important;
  font-size: clamp(17px, 1.12vw, 21px) !important;
  line-height: 1.58 !important;
  color: rgba(8,23,15,0.68) !important;
}

.problem-metrics {
  width: min(1240px, 100%) !important;
  max-width: none !important;
  margin: clamp(38px, 4vw, 62px) auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.6vw, 28px) !important;
  overflow: visible !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.problem-metric {
  min-height: clamp(150px, 10vw, 210px) !important;
  padding: clamp(20px, 2vw, 32px) clamp(20px, 2vw, 32px) !important;
  border: 1px solid rgba(13,38,24,0.10) !important;
  border-right: 1px solid rgba(13,38,24,0.10) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(13,38,24,0.06), 0 16px 48px rgba(13,38,24,0.08) !important;
  text-align: left !important;
  justify-content: flex-start !important;
  gap: clamp(10px, 1vw, 16px) !important;
  position: relative !important;
}

.problem-metric:last-child {
  border-right: 1px solid rgba(13,38,24,0.10) !important;
}

.problem-metric::before {
  content: "";
  position: absolute;
  left: clamp(20px, 2vw, 32px);
  top: clamp(16px, 1.6vw, 24px);
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ei-forest), var(--ei-lime));
}

.problem-metric:nth-child(2)::before {
  background: linear-gradient(90deg, var(--ei-gold), rgba(255,181,71,0.42));
}

.pm-value {
  display: block !important;
  margin-top: clamp(18px, 1.6vw, 28px) !important;
  font-size: clamp(44px, 3.8vw, 70px) !important;
  letter-spacing: -0.045em !important;
}

.pm-label {
  max-width: 21ch !important;
  margin-top: 0 !important;
  color: rgba(8,23,15,0.82) !important;
  font-size: clamp(14px, 0.9vw, 16px) !important;
  line-height: 1.42 !important;
}

.pm-source {
  margin-top: auto !important;
  color: rgba(8,23,15,0.48) !important;
  font-size: clamp(9px, 0.65vw, 11px) !important;
  letter-spacing: 0.18em !important;
}

@media (max-width: 980px) {
  .problem-metrics {
    grid-template-columns: 1fr !important;
  }

  .problem-metric {
    min-height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(13,38,24,0.10) !important;
  }

  .problem-metric:last-child {
    border-bottom: 0 !important;
  }
}

@media (max-width: 620px) {
  .problem-section .section-title {
    font-size: clamp(40px, 12vw, 58px) !important;
  }

  .problem-metrics {
    border-radius: 16px !important;
  }

  .pm-value {
    font-size: clamp(54px, 18vw, 78px) !important;
  }
}

/* ═══════════════════════════════════════════════
   BLUEPRINT — colour & detail pass (non-destructive)
   ═══════════════════════════════════════════════ */

/* Richer section background */
.blueprint-section {
  background:
    radial-gradient(ellipse 44% 36% at 10% 8%, rgba(31,223,120,0.18), transparent 58%),
    radial-gradient(ellipse 38% 32% at 90% 12%, rgba(255,181,71,0.16), transparent 60%),
    radial-gradient(ellipse 54% 40% at 50% 92%, rgba(96,165,250,0.13), transparent 64%),
    linear-gradient(180deg, #e8f3ec 0%, #e4eff8 55%, #edf3f9 100%) !important;
}

/* Stronger glass panels */
.bp-panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.68)),
    radial-gradient(circle at 18% 0%, rgba(31,223,120,0.10), transparent 48%) !important;
  border: 1px solid rgba(13,38,24,0.11) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.90) inset,
    0 28px 80px rgba(13,38,24,0.10) !important;
}

/* Kicker with colour accent */
.bp-panel-kicker {
  color: #136f3d !important;
  letter-spacing: 0.14em !important;
}

/* ── GRAPH NODES — distinct accent per entity ── */

/* Central Patient node: stronger green glow */
.bp-node-patient {
  border-color: rgba(31,223,120,0.50) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(31,223,120,0.22), transparent 58%),
    #ffffff !important;
  box-shadow: 0 0 0 4px rgba(31,223,120,0.10), 0 22px 52px rgba(31,223,120,0.20) !important;
}

.bp-node-patient span { color: #0e5c33 !important; }

/* PatientStudy — blue */
.bp-node-study {
  border-top: 3px solid #3b82f6 !important;
  border-color: rgba(59,130,246,0.28) !important;
  background: linear-gradient(180deg, rgba(239,246,255,0.92), rgba(255,255,255,0.86)) !important;
}
.bp-node-study span { color: #1e40af !important; }
.bp-node-study small { color: rgba(30,64,175,0.55) !important; }

/* StatusHistory — amber */
.bp-node-history {
  border-top: 3px solid #f59e0b !important;
  border-color: rgba(245,158,11,0.28) !important;
  background: linear-gradient(180deg, rgba(255,251,235,0.92), rgba(255,255,255,0.86)) !important;
}
.bp-node-history span { color: #92400e !important; }
.bp-node-history small { color: rgba(146,64,14,0.55) !important; }

/* ScheduledVisit — teal */
.bp-node-visit {
  border-top: 3px solid #14b8a6 !important;
  border-color: rgba(20,184,166,0.28) !important;
  background: linear-gradient(180deg, rgba(240,253,252,0.92), rgba(255,255,255,0.86)) !important;
}
.bp-node-visit span { color: #0f766e !important; }
.bp-node-visit small { color: rgba(15,118,110,0.55) !important; }

/* PatientNote — violet */
.bp-node-note {
  border-top: 3px solid #8b5cf6 !important;
  border-color: rgba(139,92,246,0.26) !important;
  background: linear-gradient(180deg, rgba(245,243,255,0.92), rgba(255,255,255,0.86)) !important;
}
.bp-node-note span { color: #5b21b6 !important; }
.bp-node-note small { color: rgba(91,33,182,0.55) !important; }

/* Assignment — orange */
.bp-node-assign {
  border-top: 3px solid #f97316 !important;
  border-color: rgba(249,115,22,0.26) !important;
  background: linear-gradient(180deg, rgba(255,247,237,0.92), rgba(255,255,255,0.86)) !important;
}
.bp-node-assign span { color: #9a3412 !important; }
.bp-node-assign small { color: rgba(154,52,18,0.55) !important; }

/* ParkingLot — slate */
.bp-node-lot {
  border-top: 3px solid #64748b !important;
  border-color: rgba(100,116,139,0.26) !important;
  background: linear-gradient(180deg, rgba(248,250,252,0.92), rgba(255,255,255,0.86)) !important;
}
.bp-node-lot span { color: #334155 !important; }
.bp-node-lot small { color: rgba(51,65,85,0.55) !important; }

/* Connecting lines — slightly more visible */
.bp-link { background: rgba(13,38,24,0.12) !important; }

/* ── STATUS RAIL — per-stage colours ── */
.bp-status-rail span:nth-child(1)::before { border-color: #3b82f6 !important; box-shadow: 0 0 0 4px rgba(59,130,246,0.14) !important; }
.bp-status-rail span:nth-child(2)::before { border-color: #14b8a6 !important; box-shadow: 0 0 0 4px rgba(20,184,166,0.14) !important; }
.bp-status-rail span:nth-child(3)::before { border-color: #f59e0b !important; box-shadow: 0 0 0 4px rgba(245,158,11,0.14) !important; }
.bp-status-rail span:nth-child(4)::before { border-color: #1fdf78 !important; box-shadow: 0 0 0 4px rgba(31,223,120,0.18) !important; }
.bp-status-rail span:nth-child(5)::before { border-color: #0e5c33 !important; box-shadow: 0 0 0 4px rgba(14,92,51,0.16) !important; }

/* Rail line: richer gradient matching the stages */
.bp-status-rail::before {
  background: linear-gradient(180deg, #3b82f6, #14b8a6, #f59e0b, #1fdf78, #0e5c33) !important;
  opacity: 0.72;
}

/* Status chips slightly bolder */
.bp-status-rail span {
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(13,38,24,0.08) !important;
  font-size: 12px !important;
}

/* ── LIFECYCLE ROUTES — more vivid ── */
.bp-life-start {
  border-top: 3px solid #1fdf78 !important;
  background: rgba(237,255,244,0.82) !important;
  border-color: rgba(31,223,120,0.30) !important;
  color: #0e5c33 !important;
}

.bp-life-route {
  background: rgba(237,255,244,0.80) !important;
  border-color: rgba(31,223,120,0.28) !important;
}
.bp-life-route-alt {
  background: rgba(255,248,232,0.82) !important;
  border-color: rgba(255,181,71,0.30) !important;
}

/* ── TASK ENGINE — clearer source tags ── */
.bp-task-sources span {
  background: rgba(239,246,255,0.82) !important;
  border-color: rgba(59,130,246,0.18) !important;
  color: #1e40af !important;
}

.bp-task-core {
  border-color: rgba(31,223,120,0.44) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(31,223,120,0.26), transparent 54%),
    rgba(255,255,255,0.90) !important;
  box-shadow: 0 18px 44px rgba(31,223,120,0.16) !important;
}

/* ── OUTPUT CARDS — icon colours per card ── */
.bp-output-card:nth-child(1) .bp-output-icon {
  background: linear-gradient(135deg, rgba(31,223,120,0.20), rgba(31,223,120,0.10)) !important;
  color: #0e5c33 !important;
  border: 1px solid rgba(31,223,120,0.22) !important;
}

.bp-output-card:nth-child(2) .bp-output-icon {
  background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(59,130,246,0.09)) !important;
  color: #1e40af !important;
  border: 1px solid rgba(59,130,246,0.20) !important;
}

.bp-output-card:nth-child(3) .bp-output-icon {
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(245,158,11,0.09)) !important;
  color: #92400e !important;
  border: 1px solid rgba(245,158,11,0.22) !important;
}

.bp-output-card {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(13,38,24,0.09) !important;
  transition: box-shadow 0.2s ease !important;
}

/* Format tags with matching colours */
.bp-output-strip span:nth-child(1) { background: rgba(31,223,120,0.10) !important; color: #0e5c33 !important; border: 1px solid rgba(31,223,120,0.18) !important; }
.bp-output-strip span:nth-child(2) { background: rgba(59,130,246,0.09) !important; color: #1e40af !important; border: 1px solid rgba(59,130,246,0.16) !important; }
.bp-output-strip span:nth-child(3) { background: rgba(245,158,11,0.09) !important; color: #92400e !important; border: 1px solid rgba(245,158,11,0.18) !important; }
.bp-output-strip span:nth-child(4) { background: rgba(139,92,246,0.09) !important; color: #5b21b6 !important; border: 1px solid rgba(139,92,246,0.16) !important; }
.bp-output-strip span {
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

/* ── GRAPH NODE — third detail line ── */
.bp-nd {
  display: block;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 600;
  color: rgba(13,38,24,0.30);
  margin-top: 5px;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.01em;
}

/* Satellite nodes: slightly taller to hold 3 lines */
.bp-graph-node { min-height: 82px !important; }
.bp-node-patient { min-height: 112px !important; }

/* Per-node detail colour matching its accent */
.bp-node-patient  .bp-nd { color: rgba(14,92,51,0.40); }
.bp-node-study    .bp-nd { color: rgba(30,64,175,0.42); }
.bp-node-history  .bp-nd { color: rgba(146,64,14,0.42); }
.bp-node-visit    .bp-nd { color: rgba(15,118,110,0.42); }
.bp-node-note     .bp-nd { color: rgba(91,33,182,0.42); }
.bp-node-assign   .bp-nd { color: rgba(154,52,18,0.42); }
.bp-node-lot      .bp-nd { color: rgba(51,65,85,0.40); }

/* Graph map a touch taller to breathe */
.bp-graph-map { min-height: 620px !important; }
.bp-graph { min-height: 720px !important; }

/* ── WORKFLOW JOURNEY — colour & font improvement ── */

/* Container: richer card with top green accent */
.wfj-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(249,253,250,0.94)) !important;
  border: 1px solid rgba(13,38,24,0.10) !important;
  border-top: 3px solid #1fdf78 !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(13,38,24,0.04), 0 24px 72px rgba(13,38,24,0.09) !important;
  padding: 32px 44px 28px !important;
}

/* Meta bar: stronger mono readability */
.wfj-meta {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(13,38,24,0.44) !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 32px !important;
}

.wfj-enroll-val {
  color: #0e5c33 !important;
  font-weight: 800 !important;
}

.wfj-live-badge {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #0e5c33 !important;
  letter-spacing: 0.08em !important;
}

/* Bubbles: larger, richer */
.wfj-bubble {
  width: 70px !important;
  height: 70px !important;
  border-radius: 18px !important;
  border-width: 1.5px !important;
  background: rgba(13,38,24,0.05) !important;
  border-color: rgba(13,38,24,0.12) !important;
  box-shadow: 0 2px 8px rgba(13,38,24,0.06) !important;
}

.wfj-s-done .wfj-bubble {
  background: linear-gradient(145deg, rgba(31,223,120,0.13), rgba(31,223,120,0.07)) !important;
  border-color: rgba(31,223,120,0.36) !important;
  color: #0e5c33 !important;
  box-shadow: 0 2px 12px rgba(31,223,120,0.12) !important;
}

.wfj-b-blue {
  background: linear-gradient(145deg, rgba(59,130,246,0.13), rgba(59,130,246,0.07)) !important;
  border-color: rgba(59,130,246,0.34) !important;
  color: #1e40af !important;
  box-shadow: 0 2px 12px rgba(59,130,246,0.12) !important;
}

.wfj-b-yellow {
  background: linear-gradient(145deg, rgba(251,191,36,0.15), rgba(251,191,36,0.08)) !important;
  border-color: rgba(251,191,36,0.42) !important;
  color: #92400e !important;
  box-shadow: 0 2px 12px rgba(251,191,36,0.14) !important;
}

.wfj-b-green {
  background: linear-gradient(145deg, rgba(31,223,120,0.22), rgba(31,223,120,0.12)) !important;
  border-color: rgba(31,223,120,0.60) !important;
  color: #0a4f2a !important;
  box-shadow: 0 4px 20px rgba(31,223,120,0.24) !important;
}

/* Count: switch to body font, larger */
.wfj-count {
  font-family: var(--body) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

/* Stage labels: more prominent */
.wfj-lbl {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #09180f !important;
  letter-spacing: -0.015em !important;
}

/* Sub-text: slightly larger, warmer */
.wfj-sub {
  font-size: 10px !important;
  color: rgba(13,38,24,0.44) !important;
  font-weight: 600 !important;
}

/* Connector bars: thicker, cleaner */
.wfj-edge-bar {
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(13,38,24,0.07) !important;
}

.wfj-edge-fill {
  background: linear-gradient(90deg, rgba(31,223,120,0.55), rgba(31,223,120,0.30)) !important;
}

.wfj-ef-blue   { background: linear-gradient(90deg, rgba(59,130,246,0.60), rgba(59,130,246,0.32)) !important; }
.wfj-ef-yellow { background: linear-gradient(90deg, rgba(251,191,36,0.70), rgba(251,191,36,0.38)) !important; }
.wfj-ef-green  { background: linear-gradient(90deg, #1fdf78, rgba(31,223,120,0.60)) !important; }

/* Drop % labels: stronger */
.wfj-drop {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(13,38,24,0.35) !important;
  margin-top: 6px !important;
}

.wfj-drop-final {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #0e5c33 !important;
}

/* Footer note: richer */
.wfj-footer-note {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(13,38,24,0.40) !important;
  letter-spacing: 0.02em !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(13,38,24,0.08) !important;
}

.wfj-fn-dot {
  width: 8px !important;
  height: 8px !important;
  background: #1fdf78 !important;
  box-shadow: 0 0 6px rgba(31,223,120,0.50) !important;
}

/* ── LIFECYCLE PANEL — enriched detail pass ── */

/* New Lead entry box: now has sub-text */
.bp-life-start {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 12px 16px !important;
}

.bp-life-start strong {
  display: block;
  font-size: 12.5px;
  font-weight: 900;
  color: #0e5c33;
}

.bp-life-start small {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: rgba(14,92,51,0.55);
  letter-spacing: 0.04em;
}

/* Route cards: taller to hold description */
.bp-life-route {
  min-height: 96px !important;
  padding: 14px 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
}

.bp-life-route small {
  display: block;
  margin-top: 6px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(13,38,24,0.42);
}

.bp-life-route-alt small {
  color: rgba(92,64,14,0.48);
}

/* Parking lot → pipeline rejoin indicator */
.bp-life-rejoin {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
  position: relative;
  z-index: 2;
}

.bp-life-rejoin-line {
  flex: 1;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255,181,71,0.50), rgba(31,223,120,0.50));
}

.bp-life-rejoin-tag {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(13,38,24,0.36);
  white-space: nowrap;
  background: rgba(255,255,255,0.70);
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(13,38,24,0.09);
}

/* Status rail: column layout with detail sub-text */
.bp-status-rail span {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-height: 40px !important;
  gap: 2px !important;
  padding: 7px 10px !important;
}

.bp-status-rail span b {
  font-size: 11.5px;
  font-weight: 800;
  color: rgba(13,38,24,0.74);
  font-style: normal;
}

.bp-status-rail span small {
  font-size: 9px;
  font-weight: 600;
  color: rgba(13,38,24,0.38);
  line-height: 1.3;
}

/* ═══════════════════════════════════════════
   PILLAR CARDS — detail bullets + new elements
═══════════════════════════════════════════ */

.pillar-details {
  list-style: none !important;
  margin: 10px 0 14px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.pillar-details li {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(13,38,24,0.52) !important;
  line-height: 1.4 !important;
  padding-left: 14px !important;
  position: relative !important;
}

.pillar-details li::before {
  content: "—" !important;
  position: absolute !important;
  left: 0 !important;
  color: rgba(13,38,24,0.25) !important;
  font-size: 10px !important;
}

.pillar-card-gold .pillar-details li { color: rgba(92,64,14,0.52) !important; }
.pillar-card-gold .pillar-details li::before { color: rgba(92,64,14,0.25) !important; }
.pillar-card-blue .pillar-details li { color: rgba(14,36,92,0.50) !important; }
.pillar-card-blue .pillar-details li::before { color: rgba(14,36,92,0.20) !important; }

/* Warning dot for screen-fail rows */
.pv-dot.pv-warn {
  background: #f59e0b !important;
  opacity: 0.7 !important;
}

/* Risk stats row inside pv-risk panel */
.pv-risk-stats {
  display: flex !important;
  gap: 8px !important;
  margin-top: 10px !important;
  border-top: 1px solid rgba(251,191,36,0.20) !important;
  padding-top: 8px !important;
}

.pv-rs-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
  flex: 1 !important;
}

.pv-rs-item b {
  font-family: var(--mono) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(92,64,14,0.82) !important;
  font-style: normal !important;
}

.pv-rs-item.pv-rs-warn b {
  color: #c2410c !important;
}

.pv-rs-item small {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: rgba(92,64,14,0.46) !important;
  letter-spacing: 0.03em !important;
}

/* Efficiency card: 3-step auto chain */
.pv-auto {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* ═══════════════════════════════════════════
   ARCHITECTURE DIAGRAM — blend with dark section
═══════════════════════════════════════════ */

/* Replace near-black card with green-tinted dark that matches the section */
.arch-diagram {
  background:
    radial-gradient(circle at 80% 0%, rgba(31,223,120,0.10) 0%, transparent 55%),
    linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
    rgba(10,27,16,0.82) !important;
  border-color: rgba(31,223,120,0.16) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.32), 0 1px 0 rgba(31,223,120,0.12) inset !important;
}

/* Layer rows: dark-appropriate tinted bands */
.asd-consumers    { background: rgba(255,255,255,0.04)  !important; border-color: rgba(255,255,255,0.08)  !important; }
.asd-intel        { background: rgba(251,191,36,0.11)   !important; border-color: rgba(251,191,36,0.28)   !important; }
.asd-core         { background: rgba(31,223,120,0.11)   !important; border-color: rgba(31,223,120,0.30)   !important; }
.asd-workflow     { background: rgba(59,130,246,0.11)   !important; border-color: rgba(59,130,246,0.28)   !important; }
.asd-integrations { background: rgba(255,255,255,0.025) !important; border-color: rgba(255,255,255,0.06)  !important; }

/* Layer tag labels: visible on dark green */
.asd-layer-tag {
  color: rgba(255,255,255,0.38) !important;
}

/* Pill defaults: semi-transparent white chips readable on dark */
.asd-pills span {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.88) !important;
}

/* Per-layer pill tints */
.asd-intel .asd-pills span     { background: rgba(251,191,36,0.18) !important; border-color: rgba(251,191,36,0.32) !important; color: #fde68a !important; }
.asd-core .asd-pills span      { background: rgba(31,223,120,0.16) !important; border-color: rgba(31,223,120,0.30) !important; color: #6ee7a9 !important; }
.asd-workflow .asd-pills span  { background: rgba(59,130,246,0.18) !important; border-color: rgba(59,130,246,0.30) !important; color: #93c5fd !important; }

/* Connector arrows: visible on dark */
.asd-connector {
  color: rgba(255,255,255,0.22) !important;
}

/* Diagram heading text on dark bg */
.arch-diagram .diagram-heading strong,
.arch-diagram .diagram-node span {
  color: rgba(255,255,255,0.90) !important;
}

.arch-diagram .diagram-heading span {
  color: rgba(31,223,120,0.70) !important;
}

/* ═══════════════════════════════════════════
   BLUEPRINT PANEL HEADINGS — font upgrade
═══════════════════════════════════════════ */

/* Kicker labels — bolder mono, more visible */
.bp-panel-kicker {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: rgba(13,38,24,0.52) !important;
}

/* Panel h3 — Playfair Display, editorial weight */
.bp-panel h3,
.bp-panel-head h3 {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
}

/* ═══════════════════════════════════════════
   SST DIAGRAM — mobile fix (single-column stack)
═══════════════════════════════════════════ */
@media (max-width: 720px) {
  .sst-diagram {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 28px 20px !important;
  }

  /* Hide animated rays — too distracting stacked */
  .sst-conn-in,
  .sst-conn-out {
    display: none !important;
  }

  /* Sources: Data In — top, full width, centred chips */
  .sst-sources {
    width: 100% !important;
    align-items: center !important;
    grid-column: unset !important;
    grid-row: unset !important;
    order: 1 !important;
  }

  /* Hub — centred middle */
  .sst-hub {
    grid-column: unset !important;
    grid-row: unset !important;
    order: 2 !important;
    align-self: center !important;
  }

  /* Outputs: Intelligence Out — bottom, full width, centred chips */
  .sst-outputs {
    width: 100% !important;
    align-items: center !important;
    grid-column: unset !important;
    grid-row: unset !important;
    order: 3 !important;
  }

  /* Chips: wrap centred */
  .sst-sources .sst-chip,
  .sst-outputs .sst-chip {
    text-align: center !important;
  }

  /* Column labels centred */
  .sst-col-label {
    text-align: center !important;
  }

  /* Hub badge readable */
  .sst-hub-badge {
    font-size: 9px !important;
    padding: 4px 10px !important;
  }
}


/* ═══════════════════════════════════════════
   ANIMATION ENHANCEMENTS
═══════════════════════════════════════════ */

/* ── Hero grid: subtle floating ── */
.hero-grid-bg {
  animation: heroFloat 20s ease-in-out infinite !important;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-14px) scale(1.012); }
}

/* ── SST hub outer ring: slow rotation ── */
.sst-hub-outer-ring {
  animation: ringRotate 36s linear infinite !important;
}
@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Button primary: shimmer on hover ── */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: none;
}
.btn-primary:hover::after {
  animation: btnShimmer 0.55s ease forwards;
}
@keyframes btnShimmer {
  to { transform: translateX(200%); }
}

/* ── Stat card hovers ── */
.problem-metric {
  transition: transform 0.32s cubic-bezier(.23,1,.32,1), box-shadow 0.32s cubic-bezier(.23,1,.32,1) !important;
}
.problem-metric:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 8px 32px rgba(13,38,24,0.11), 0 2px 8px rgba(13,38,24,0.06) !important;
}

/* ── Pillar card hovers ── */
.pillar-card {
  transition: transform 0.36s cubic-bezier(.23,1,.32,1), box-shadow 0.36s cubic-bezier(.23,1,.32,1) !important;
}
.pillar-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 28px 64px rgba(13,38,24,0.13), 0 4px 16px rgba(13,38,24,0.07) !important;
}

/* ── Pillar card: stagger via CSS transition-delay ── */
.pillars-grid .pillar-card.visible:nth-child(1) { transition-delay: 0.00s; }
.pillars-grid .pillar-card.visible:nth-child(2) { transition-delay: 0.13s; }
.pillars-grid .pillar-card.visible:nth-child(3) { transition-delay: 0.26s; }

/* ── Capability card hovers ── */
.cap-card {
  transition: transform 0.30s cubic-bezier(.23,1,.32,1), box-shadow 0.30s, border-color 0.30s !important;
}
.cap-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 48px rgba(13,38,24,0.10) !important;
  border-color: rgba(31,223,120,0.32) !important;
}

/* ── Cap-grid: stagger ── */
.cap-grid .cap-card.visible:nth-child(1) { transition-delay: 0.00s; }
.cap-grid .cap-card.visible:nth-child(2) { transition-delay: 0.09s; }
.cap-grid .cap-card.visible:nth-child(3) { transition-delay: 0.18s; }
.cap-grid .cap-card.visible:nth-child(4) { transition-delay: 0.27s; }
.cap-grid-3 .cap-card.visible:nth-child(1) { transition-delay: 0.00s; }
.cap-grid-3 .cap-card.visible:nth-child(2) { transition-delay: 0.07s; }
.cap-grid-3 .cap-card.visible:nth-child(3) { transition-delay: 0.14s; }
.cap-grid-3 .cap-card.visible:nth-child(4) { transition-delay: 0.21s; }
.cap-grid-3 .cap-card.visible:nth-child(5) { transition-delay: 0.28s; }
.cap-grid-3 .cap-card.visible:nth-child(6) { transition-delay: 0.35s; }
.cap-grid-3 .cap-card.visible:nth-child(7) { transition-delay: 0.42s; }

/* ── Blueprint panels: hover lift ── */
.bp-panel {
  transition: transform 0.30s cubic-bezier(.23,1,.32,1), box-shadow 0.30s !important;
}
.bp-panel:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 22px 58px rgba(13,38,24,0.12) !important;
}

/* ── Blueprint graph nodes: enhanced hover ── */
.bp-graph-node {
  transition: transform 0.22s cubic-bezier(.23,1,.32,1), box-shadow 0.22s, border-color 0.22s !important;
}
.bp-graph-node:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 6px 18px rgba(13,38,24,0.13) !important;
  border-color: rgba(31,223,120,0.45) !important;
  z-index: 10 !important;
}

/* ── Phase card hovers ── */
.phase-card {
  transition: transform 0.30s cubic-bezier(.23,1,.32,1), box-shadow 0.30s !important;
}
.phase-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 56px rgba(13,38,24,0.12) !important;
}
.roadmap-grid .phase-card.visible:nth-child(1) { transition-delay: 0.00s; }
.roadmap-grid .phase-card.visible:nth-child(2) { transition-delay: 0.13s; }
.roadmap-grid .phase-card.visible:nth-child(3) { transition-delay: 0.26s; }

/* ── Integration card hovers ── */
.integration-card {
  transition: transform 0.26s cubic-bezier(.23,1,.32,1), box-shadow 0.26s, border-color 0.26s !important;
}
.integration-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(31,223,120,0.30) !important;
  box-shadow: 0 12px 36px rgba(13,38,24,0.09) !important;
}
.integration-grid .integration-card.visible:nth-child(n) { transition-delay: 0.00s; }
.integration-grid .integration-card.visible:nth-child(1) { transition-delay: 0.00s; }
.integration-grid .integration-card.visible:nth-child(2) { transition-delay: 0.06s; }
.integration-grid .integration-card.visible:nth-child(3) { transition-delay: 0.12s; }
.integration-grid .integration-card.visible:nth-child(4) { transition-delay: 0.18s; }
.integration-grid .integration-card.visible:nth-child(5) { transition-delay: 0.24s; }
.integration-grid .integration-card.visible:nth-child(6) { transition-delay: 0.30s; }
.integration-grid .integration-card.visible:nth-child(7) { transition-delay: 0.36s; }
.integration-grid .integration-card.visible:nth-child(8) { transition-delay: 0.42s; }

/* ── Workflow role cards ── */
.wf-role-card {
  transition: transform 0.30s cubic-bezier(.23,1,.32,1), box-shadow 0.30s !important;
}
.wf-role-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 52px rgba(13,38,24,0.11) !important;
}

/* ── Founder cards ── */
.founder-card {
  transition: transform 0.30s cubic-bezier(.23,1,.32,1), box-shadow 0.30s !important;
}
.founder-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 56px rgba(13,38,24,0.10) !important;
}

/* ── Workflow journey: stage stagger on .wfj-animated ── */
.wfj-stage {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.48s cubic-bezier(.23,1,.32,1), transform 0.48s cubic-bezier(.23,1,.32,1) !important;
}
.wfj-wrap.wfj-animated .wfj-stage { opacity: 1 !important; transform: translateY(0) !important; }
.wfj-wrap.wfj-animated .wfj-flow > .wfj-stage:nth-child(1)  { transition-delay: 0.00s !important; }
.wfj-wrap.wfj-animated .wfj-flow > .wfj-stage:nth-child(3)  { transition-delay: 0.14s !important; }
.wfj-wrap.wfj-animated .wfj-flow > .wfj-stage:nth-child(5)  { transition-delay: 0.28s !important; }
.wfj-wrap.wfj-animated .wfj-flow > .wfj-stage:nth-child(7)  { transition-delay: 0.42s !important; }
.wfj-wrap.wfj-animated .wfj-flow > .wfj-stage:nth-child(9)  { transition-delay: 0.56s !important; }
.wfj-wrap.wfj-animated .wfj-flow > .wfj-stage:nth-child(11) { transition-delay: 0.70s !important; }
.wfj-wrap.wfj-animated .wfj-flow > .wfj-stage:nth-child(13) { transition-delay: 0.84s !important; }

/* Edge fills: animate left→right on trigger */
.wfj-edge-fill {
  width: 0 !important;
  transition: width 1.1s cubic-bezier(.23,1,.32,1) !important;
}
.wfj-wrap.wfj-animated .wfj-edge-fill                                   { width: 100% !important; }
.wfj-wrap.wfj-animated .wfj-flow > :nth-child(2)  .wfj-edge-fill { transition-delay: 0.20s !important; }
.wfj-wrap.wfj-animated .wfj-flow > :nth-child(4)  .wfj-edge-fill { transition-delay: 0.38s !important; }
.wfj-wrap.wfj-animated .wfj-flow > :nth-child(6)  .wfj-edge-fill { transition-delay: 0.56s !important; }
.wfj-wrap.wfj-animated .wfj-flow > :nth-child(8)  .wfj-edge-fill { transition-delay: 0.74s !important; }
.wfj-wrap.wfj-animated .wfj-flow > :nth-child(10) .wfj-edge-fill { transition-delay: 0.92s !important; }
.wfj-wrap.wfj-animated .wfj-flow > :nth-child(12) .wfj-edge-fill { transition-delay: 1.10s !important; }

/* Wfj bubble hover: scale */
.wfj-bubble {
  transition: transform 0.22s cubic-bezier(.23,1,.32,1), box-shadow 0.22s !important;
}
.wfj-stage:hover .wfj-bubble {
  transform: scale(1.10) !important;
  box-shadow: 0 8px 24px rgba(13,38,24,0.14) !important;
}

/* ── Cap-card bar animations ── */
.cap-card .cv-bar,
.cap-card .cv-src-bar,
.cap-card .cv-sf-fill,
.cap-card .cv-vis-fill,
.cap-card .cv-tpl-fill-pass,
.cap-card .cv-tpl-fill-enroll,
.cap-card .wf-mf-bar {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(.23,1,.32,1) !important;
}
.cap-card.bar-animated .cv-bar,
.cap-card.bar-animated .cv-src-bar,
.cap-card.bar-animated .cv-sf-fill,
.cap-card.bar-animated .cv-vis-fill,
.cap-card.bar-animated .cv-tpl-fill-pass,
.cap-card.bar-animated .cv-tpl-fill-enroll,
.cap-card.bar-animated .wf-mf-bar {
  transform: scaleX(1) !important;
}
/* stagger bars within a card */
.cap-card.bar-animated .cv-bar:nth-child(2)           { transition-delay: 0.10s !important; }
.cap-card.bar-animated .cv-bar:nth-child(3)           { transition-delay: 0.20s !important; }
.cap-card.bar-animated .cv-bar:nth-child(4)           { transition-delay: 0.30s !important; }
.cap-card.bar-animated .cv-bar:nth-child(5)           { transition-delay: 0.40s !important; }
.cap-card.bar-animated .cv-src-bar:nth-of-type(1)     { transition-delay: 0.10s !important; }
.cap-card.bar-animated .cv-src-bar:nth-of-type(2)     { transition-delay: 0.22s !important; }
.cap-card.bar-animated .cv-src-bar:nth-of-type(3)     { transition-delay: 0.34s !important; }
.cap-card.bar-animated .cv-sf-fill:nth-of-type(1)     { transition-delay: 0.10s !important; }
.cap-card.bar-animated .cv-sf-fill:nth-of-type(2)     { transition-delay: 0.24s !important; }
.cap-card.bar-animated .cv-sf-fill:nth-of-type(3)     { transition-delay: 0.38s !important; }
.cap-card.bar-animated .cv-tpl-fill-pass:nth-of-type(2)   { transition-delay: 0.15s !important; }
.cap-card.bar-animated .cv-tpl-fill-enroll:nth-of-type(2) { transition-delay: 0.25s !important; }
.cap-card.bar-animated .cv-tpl-fill-pass:nth-of-type(3)   { transition-delay: 0.30s !important; }
.cap-card.bar-animated .cv-tpl-fill-enroll:nth-of-type(3) { transition-delay: 0.40s !important; }

/* ── pv-feed rows: slide in stagger ── */
.pv-feed .pv-row {
  opacity: 0;
  transform: translateX(-10px);
  animation: pvRowIn 0.40s cubic-bezier(.23,1,.32,1) forwards;
}
.pv-feed .pv-row:nth-child(1) { animation-delay: 0.10s; }
.pv-feed .pv-row:nth-child(2) { animation-delay: 0.25s; }
.pv-feed .pv-row:nth-child(3) { animation-delay: 0.40s; }
.pv-feed .pv-row:nth-child(4) { animation-delay: 0.55s; }
@keyframes pvRowIn {
  to { opacity: 1; transform: translateX(0); }
}

/* ── Auto-chain steps stagger ── */
.pv-auto .pv-auto-step,
.pv-auto .pv-auto-arrow {
  opacity: 0;
  animation: pvAutoIn 0.38s cubic-bezier(.23,1,.32,1) forwards;
}
.pv-auto .pv-auto-step:nth-child(1) { animation-delay: 0.10s; }
.pv-auto .pv-auto-arrow:nth-child(2) { animation-delay: 0.24s; }
.pv-auto .pv-auto-step:nth-child(3) { animation-delay: 0.36s; }
.pv-auto .pv-auto-arrow:nth-child(4) { animation-delay: 0.50s; }
.pv-auto .pv-auto-step:nth-child(5) { animation-delay: 0.62s; }
@keyframes pvAutoIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── ASD pill hover ── */
.asd-pills span {
  transition: transform 0.15s, filter 0.15s !important;
  cursor: default !important;
}
.asd-pills span:hover {
  transform: scale(1.07) !important;
  filter: brightness(1.12) !important;
}

/* ── ASD row hover ── */
.asd-row {
  transition: background 0.22s !important;
}
.asd-row:hover {
  filter: brightness(1.06) !important;
}

/* ── Architecture layer cards ── */
.arch-layer {
  transition: transform 0.28s cubic-bezier(.23,1,.32,1), box-shadow 0.28s !important;
}
.arch-layer:hover {
  transform: translateX(6px) !important;
  box-shadow: 0 8px 28px rgba(13,38,24,0.09) !important;
}

/* ── Hero h1: widen container so "Recruitment intelligence" and "for clinical trials." each fit on one line ── */
.hero-inner .hero-h1 {
  max-width: 1100px !important;
}

/* ── Contrast boost: sub-text and body copy darker ── */

/* Hero sub (dark bg) */
.hero .hero-sub,
.hero-sub {
  color: rgba(230,242,234,0.92) !important;
}

/* Section body intros (light bg) */
.problem-section .section-body,
.platform-section .section-body,
.blueprint-section .section-body,
.workflow-section .section-body,
.features-section .section-body,
.roadmap-section .section-body,
.integrations-section .section-body,
.team-section .section-body,
.pillars-section .section-body,
.sst-section .section-body,
.cta-section .section-body,
.section-body {
  color: rgba(8,23,15,0.88) !important;
}

/* Card body / desc / bio text (light bg) */
.problem-section .problem-block-right p,
.platform-section .cap-desc,
.features-section .cap-desc,
.features-section .fg-sub,
.roadmap-section .phase-desc,
.integrations-section .integration-card p,
.integrations-section .integration-note p,
.team-section .team-lead,
.team-section .founder-bio,
.workflow-section .how-body,
.roles-section .role-list li,
.feature-item .fi-desc,
.pillar-body,
.phase-desc,
.cap-desc {
  color: rgba(8,23,15,0.84) !important;
}

/* ═══════════════════════════════════════════
   WORKFLOW SECTION: enhanced visual polish
═══════════════════════════════════════════ */

/* ── Funnel wrapper ── */
.wfj-wrap {
  background: linear-gradient(140deg, #ffffff 0%, rgba(236,252,244,0.92) 100%) !important;
  border: 1px solid rgba(31,223,120,0.20) !important;
  border-radius: 24px !important;
  padding: 36px 44px 30px !important;
  box-shadow: 0 4px 32px rgba(13,38,24,0.06), 0 1px 4px rgba(13,38,24,0.03) !important;
}

/* Meta bar */
.wfj-meta {
  font-size: 12px !important;
  color: rgba(13,38,24,0.55) !important;
  margin-bottom: 36px !important;
}
.wfj-enroll-val { color: #0e6637 !important; font-weight: 800 !important; }
.wfj-live-badge {
  background: rgba(31,223,120,0.12) !important;
  border: 1px solid rgba(31,223,120,0.30) !important;
  border-radius: 20px !important;
  padding: 3px 11px !important;
  color: #0e6637 !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
}

/* Stage nodes */
.wfj-stage { width: 104px !important; }
.wfj-bubble {
  width: 70px !important;
  height: 70px !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 10px rgba(13,38,24,0.07) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.wfj-bubble:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 22px rgba(13,38,24,0.11) !important;
}
.wfj-s-done .wfj-bubble {
  background: rgba(31,223,120,0.11) !important;
  border-color: rgba(31,223,120,0.36) !important;
}
.wfj-b-green {
  box-shadow: 0 0 30px rgba(31,223,120,0.26) !important;
}
.wfj-count { font-size: 18px !important; }
.wfj-lbl   { font-size: 12px !important; color: rgba(13,38,24,0.90) !important; }
.wfj-sub   { font-size: 10px !important; color: rgba(13,38,24,0.52) !important; }

/* Edge connectors */
.wfj-edge-bar { height: 4px !important; }
.wfj-drop { font-size: 9.5px !important; color: rgba(13,38,24,0.42) !important; }
.wfj-drop-final { color: #0e6637 !important; font-size: 10px !important; font-weight: 800 !important; }

/* Footer note */
.wfj-footer-note {
  color: rgba(13,38,24,0.52) !important;
  font-size: 11px !important;
}
.wfj-fn-dot {
  background: #1fdf78 !important;
  box-shadow: 0 0 8px rgba(31,223,120,0.55) !important;
}

/* ── Role cards ── */
.wf-roles { gap: 20px !important; }

.wf-role-card {
  background: #ffffff !important;
  border: 1px solid rgba(13,38,24,0.08) !important;
  border-radius: 20px !important;
  padding: 30px 26px 26px !important;
  box-shadow: 0 2px 18px rgba(13,38,24,0.05), 0 1px 3px rgba(13,38,24,0.03) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Per-role top accent stripe */
.wf-role-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: rgba(96,165,250,0.60) !important;
  border-radius: 20px 20px 0 0 !important;
}
.wf-role-card:nth-child(2)::before {
  background: linear-gradient(90deg, #8ec90f, #baf315) !important;
}
.wf-role-card:nth-child(3)::before {
  background: rgba(251,191,36,0.80) !important;
}

/* Center card highlight */
.wf-role-card-center {
  border-color: rgba(142,201,15,0.28) !important;
  box-shadow: 0 4px 28px rgba(142,201,15,0.10), 0 1px 3px rgba(13,38,24,0.03) !important;
}

/* Avatar mark: rounded square, larger */
.wf-role-mark {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
}

/* Role name & sub-label */
.wf-role-name { font-size: 16px !important; letter-spacing: -0.02em !important; }
.wf-role-sees {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: rgba(13,38,24,0.36) !important;
}

/* List items */
.wf-role-items li {
  font-size: 13px !important;
  color: rgba(13,38,24,0.76) !important;
  gap: 10px !important;
  line-height: 1.5 !important;
}
.wf-dot { width: 7px !important; height: 7px !important; }

/* ── Mini patient list (coordinator) ── */
.wf-mini-list {
  background: rgba(245,250,247,0.80) !important;
  border: 1px solid rgba(13,38,24,0.07) !important;
  border-radius: 12px !important;
}
.wf-mini-row { padding: 10px 14px !important; }
.wf-mini-name { font-size: 12px !important; font-weight: 700 !important; }
.wf-mini-action {
  font-size: 10.5px !important;
  color: rgba(13,38,24,0.48) !important;
  font-weight: 600 !important;
}

/* ── Mini funnel bars (site director) ── */
.wf-mini-funnel {
  background: rgba(245,250,247,0.80) !important;
  border: 1px solid rgba(13,38,24,0.07) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  gap: 8px !important;
}
.wf-mf-track {
  height: 6px !important;
  background: rgba(13,38,24,0.07) !important;
  border-radius: 4px !important;
}
.wf-mf-bar { background: rgba(13,38,24,0.18) !important; border-radius: 4px !important; }
.wf-mf-label { font-size: 10px !important; color: rgba(13,38,24,0.55) !important; }
.wf-mf-num   { font-size: 10px !important; color: rgba(13,38,24,0.60) !important; }

/* ── Mini KPI tiles (sponsor) ── */
.wf-mini-kpis { gap: 10px !important; }
.wf-mini-kpi {
  background: rgba(245,250,247,0.80) !important;
  border: 1px solid rgba(13,38,24,0.07) !important;
  border-radius: 12px !important;
  padding: 14px 14px !important;
}
.wf-kpi-val { font-size: 22px !important; letter-spacing: -0.03em !important; }
.wf-kpi-lbl { font-size: 9px !important; color: rgba(13,38,24,0.46) !important; margin-top: 4px !important; }
.wf-kpi-warn  { background: rgba(251,191,36,0.08) !important; border-color: rgba(251,191,36,0.22) !important; }
.wf-kpi-alert { background: rgba(239,68,68,0.06) !important; border-color: rgba(239,68,68,0.16) !important; }




/* ═══════════════════════════════════════════
   APPLE-QUALITY REVEAL SYSTEM — v3
   ─ Trigger fires 160 px BEFORE element is
     visible so animation is mid-play on entry.
   ─ Spring easing + scale depth + wave stagger.
═══════════════════════════════════════════ */

/* ── Hidden state ── */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 0 !important;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── Base reveal: rise + scale ── */
.reveal {
  transform: translateY(80px) scale(0.92) !important;
  transition:
    opacity   1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── Slide from left ── */
.reveal-left {
  transform: translateX(-70px) scale(0.95) !important;
  transition:
    opacity   1.0s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.0s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── Slide from right ── */
.reveal-right {
  transform: translateX(70px) scale(0.95) !important;
  transition:
    opacity   1.0s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.0s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── Visible ── */
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Section titles: biggest lift, longest duration ── */
.section-title.reveal {
  transform: translateY(110px) scale(0.87) !important;
  transition-duration: 1.25s !important;
}

/* ── Eyebrows lead the title (faster, less travel) ── */
.eyebrow.reveal {
  transform: translateY(48px) scale(0.97) !important;
  transition-duration: 0.85s !important;
}

/* ── Hero inner: parallax managed by JS ── */
.hero-inner {
  will-change: transform, opacity;
}

/* ──────────────────────────────────────────
   WAVE STAGGER — each child fires 0.12-0.18 s
   after the previous one so grids cascade
   left-to-right like a ripple.
─────────────────────────────────────────── */

/* Pillars (3-col) */
.pillars-grid .pillar-card.reveal:nth-child(1) { transition-delay: 0.00s !important; }
.pillars-grid .pillar-card.reveal:nth-child(2) { transition-delay: 0.16s !important; }
.pillars-grid .pillar-card.reveal:nth-child(3) { transition-delay: 0.32s !important; }

/* Capabilities 4-col */
.cap-grid .cap-card.reveal:nth-child(1) { transition-delay: 0.00s !important; }
.cap-grid .cap-card.reveal:nth-child(2) { transition-delay: 0.12s !important; }
.cap-grid .cap-card.reveal:nth-child(3) { transition-delay: 0.24s !important; }
.cap-grid .cap-card.reveal:nth-child(4) { transition-delay: 0.36s !important; }

/* Capabilities 3-col */
.cap-grid-3 .cap-card.reveal:nth-child(1) { transition-delay: 0.00s !important; }
.cap-grid-3 .cap-card.reveal:nth-child(2) { transition-delay: 0.10s !important; }
.cap-grid-3 .cap-card.reveal:nth-child(3) { transition-delay: 0.20s !important; }
.cap-grid-3 .cap-card.reveal:nth-child(4) { transition-delay: 0.30s !important; }
.cap-grid-3 .cap-card.reveal:nth-child(5) { transition-delay: 0.40s !important; }
.cap-grid-3 .cap-card.reveal:nth-child(6) { transition-delay: 0.50s !important; }

/* Roadmap */
.roadmap-grid .phase-card.reveal:nth-child(1) { transition-delay: 0.00s !important; }
.roadmap-grid .phase-card.reveal:nth-child(2) { transition-delay: 0.18s !important; }
.roadmap-grid .phase-card.reveal:nth-child(3) { transition-delay: 0.36s !important; }

/* Integrations */
.integration-grid .integration-card.reveal:nth-child(1) { transition-delay: 0.00s !important; }
.integration-grid .integration-card.reveal:nth-child(2) { transition-delay: 0.08s !important; }
.integration-grid .integration-card.reveal:nth-child(3) { transition-delay: 0.16s !important; }
.integration-grid .integration-card.reveal:nth-child(4) { transition-delay: 0.24s !important; }
.integration-grid .integration-card.reveal:nth-child(5) { transition-delay: 0.32s !important; }
.integration-grid .integration-card.reveal:nth-child(6) { transition-delay: 0.40s !important; }
.integration-grid .integration-card.reveal:nth-child(7) { transition-delay: 0.48s !important; }
.integration-grid .integration-card.reveal:nth-child(8) { transition-delay: 0.56s !important; }

/* Team / Founders */
.founder-grid .founder-card.reveal:nth-child(1) { transition-delay: 0.00s !important; }
.founder-grid .founder-card.reveal:nth-child(2) { transition-delay: 0.20s !important; }

/* ═══════════════════════════════════════════
   POLISHED INTERACTION EFFECTS
   scroll progress · hero blobs · magnetic btns
   3D card tilt · cursor spotlight · nav active
   metric glow
═══════════════════════════════════════════ */

/* ── Scroll progress bar ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, #baf315, #1fdf78);
  z-index: 10000;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(186,243,21,0.45);
  will-change: width;
}

/* ── Hero ambient blobs ── */
.hero { overflow: hidden; }
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  will-change: transform;
  animation: blob-drift linear infinite;
}
.hero-blob-1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(186,243,21,0.18), transparent 70%);
  top: -160px; left: -60px;
  animation-duration: 20s;
}
.hero-blob-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(31,223,120,0.14), transparent 70%);
  top: 40px; right: -80px;
  animation-duration: 26s;
  animation-delay: -8s;
}
.hero-blob-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(186,243,21,0.08), transparent 70%);
  bottom: -30px; left: 40%;
  animation-duration: 32s;
  animation-delay: -16s;
}
@keyframes blob-drift {
  0%   { transform: translate(0, 0)   scale(1);    }
  25%  { transform: translate(34px, -22px) scale(1.06); }
  50%  { transform: translate(-16px, 24px) scale(0.95); }
  75%  { transform: translate(22px,  10px) scale(1.03); }
  100% { transform: translate(0, 0)   scale(1);    }
}

/* ── Cursor spotlight div (injected by JS) ── */
.card-spotlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* ── Card isolation so z-index:-1 spotlight sits above card bg ── */
.pillar-card  { isolation: isolate; }
.cap-card     { position: relative; isolation: isolate; }
.arch-layer   { position: relative; isolation: isolate; }

/* ── Nav active underline ── */
.nav-links a { position: relative; }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1.5px;
  background: #baf315;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(.23,1,.32,1);
}
.nav-links a.nav-active::after { transform: scaleX(1); }

/* ── Problem metric glow pulse ── */
@keyframes metric-glow {
  0%   { text-shadow: none; }
  28%  { text-shadow: 0 0 20px rgba(186,243,21,0.65), 0 0 40px rgba(186,243,21,0.22); }
  100% { text-shadow: 0 0 6px rgba(186,243,21,0.12); }
}
.pm-value.glow-done {
  animation: metric-glow 1.8s cubic-bezier(.23,1,.32,1) forwards;
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-blob    { animation: none; }
  .card-spotlight { display: none; }
}

/* ── LOTTIE INTEGRATION ── */
.hero-product-visual {
  margin: 56px auto 0;
  width: 100%;
  max-width: 760px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(186,243,21,0.10);
  background: rgba(4,12,8,0.85);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.10),
    0 20px 56px rgba(0,0,0,0.45),
    0 0 0 1px rgba(186,243,21,0.06),
    inset 0 1px 0 rgba(255,255,255,0.03);
}
.hero-lottie-canvas {
  width: 100%;
  height: auto;
  display: block;
  max-height: 400px;
  /* Rotate blue palette → green/lime, heavily desaturate, darken to match dark theme */
  filter: hue-rotate(-120deg) saturate(0.38) brightness(0.68) contrast(1.15);
}
.cap-visual-lottie {
  padding: 0;
  height: 148px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.cap-lottie {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  filter: hue-rotate(-120deg) saturate(0.42) brightness(0.72) contrast(1.1);
}
.cap-card-wide .cap-visual-lottie {
  height: auto !important;
  min-height: 148px;
}
.demo-success-lottie {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 8px;
}
@media (max-width: 640px) {
  .hero-product-visual { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   POLISHED DESIGN & TRANSITIONS v2  — 2026-05-17
   Restores scroll reveals + elevates all interactive effects.
   Uses body.js-reveals prefix (added by JS) so content is
   always visible without JavaScript.
═══════════════════════════════════════════════════════════ */

/* ── 1. SCROLL REVEAL: restored with blur + spring easing ── */
/* These override the blanket opacity:1!important at line ~8147 via higher specificity */
body.js-reveals .reveal {
  opacity: 0 !important;
  transform: translateY(34px) !important;
  filter: blur(6px) !important;
  transition:
    opacity   0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.90s cubic-bezier(0.16, 1, 0.3, 1),
    filter    0.72s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform, filter;
}
body.js-reveals .reveal-left {
  opacity: 0 !important;
  transform: translateX(-46px) !important;
  filter: blur(6px) !important;
  transition:
    opacity   0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.90s cubic-bezier(0.16, 1, 0.3, 1),
    filter    0.72s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform, filter;
}
body.js-reveals .reveal-right {
  opacity: 0 !important;
  transform: translateX(46px) !important;
  filter: blur(6px) !important;
  transition:
    opacity   0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.90s cubic-bezier(0.16, 1, 0.3, 1),
    filter    0.72s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform, filter;
}
body.js-reveals .reveal.visible,
body.js-reveals .reveal-left.visible,
body.js-reveals .reveal-right.visible {
  opacity: 1 !important;
  transform: none !important;
  filter: blur(0) !important;
}

/* ── 2. CAP-GRID STAGGER — cards cascade in 100 ms apart ── */
body.js-reveals .cap-grid .cap-card.reveal:nth-child(1) { transition-delay: 0.00s !important; }
body.js-reveals .cap-grid .cap-card.reveal:nth-child(2) { transition-delay: 0.10s !important; }
body.js-reveals .cap-grid .cap-card.reveal:nth-child(3) { transition-delay: 0.20s !important; }
body.js-reveals .cap-grid .cap-card.reveal:nth-child(4) { transition-delay: 0.30s !important; }
body.js-reveals .cap-grid .cap-card.reveal:nth-child(5) { transition-delay: 0.40s !important; }
body.js-reveals .cap-grid .cap-card.reveal:nth-child(6) { transition-delay: 0.50s !important; }

/* ── 3. HERO ENTRANCE — staggered slide-fade on load ── */
/* Overrides the animation:none!important at line ~8141 via body.js-reveals prefix */
body.js-reveals .hero .hero-badge,
body.js-reveals .hero .hero-h1,
body.js-reveals .hero .hero-sub,
body.js-reveals .hero .hero-ctas {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition:
    opacity   0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: none !important;
}
body.js-reveals .hero .hero-badge { transition-delay: 0.00s !important; }
body.js-reveals .hero .hero-h1    { transition-delay: 0.10s !important; }
body.js-reveals .hero .hero-sub   { transition-delay: 0.20s !important; }
body.js-reveals .hero .hero-ctas  { transition-delay: 0.30s !important; }

body.js-reveals.hero-ready .hero .hero-badge,
body.js-reveals.hero-ready .hero .hero-h1,
body.js-reveals.hero-ready .hero .hero-sub,
body.js-reveals.hero-ready .hero .hero-ctas {
  opacity: 1 !important;
  transform: none !important;
}

/* ── 4. BUTTON: shimmer sweep + glow on hover ── */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-primary:hover::before { left: 160%; }
.btn-primary:hover {
  background: var(--green2);
  box-shadow: 0 0 22px rgba(31,223,120,0.38), 0 4px 16px rgba(0,0,0,0.22);
  transform: translateY(-2px);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 0 8px rgba(31,223,120,0.2) !important;
  transition-duration: 0.1s !important;
}
.btn-ghost:hover {
  box-shadow: 0 0 16px rgba(0,229,102,0.12), 0 4px 16px rgba(0,0,0,0.2);
}

/* ── 5. SECTION TITLE: animated hue-shift on the italic em ── */
/* Uses filter:hue-rotate (compositor-only, no repaint) instead of background-position */
.section-title em {
  background: linear-gradient(115deg, var(--green) 0%, var(--lime) 40%, var(--yellow2) 80%, var(--green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: hueShift 7s ease-in-out infinite;
}
@keyframes hueShift {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); }
  50%       { filter: hue-rotate(18deg) brightness(1.08); }
}

/* ── 6. EYEBROW: left accent line ── */
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 1px;
  flex-shrink: 0;
  margin-right: 2px;
}

/* ── 7. PILLAR & CAP CARD hover glow ── */
.pillar-card {
  transition: border-color 0.3s ease, box-shadow 0.35s ease !important;
}
.pillar-card:hover {
  border-color: rgba(186,243,21,0.28) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,0.52), 0 0 28px rgba(186,243,21,0.07) !important;
}
.cap-card {
  transition: border-color 0.3s ease, box-shadow 0.35s ease !important;
}
.cap-card:hover {
  border-color: rgba(31,223,120,0.22) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,0.48), 0 0 20px rgba(31,223,120,0.06) !important;
}

/* ── 8. ARCH LAYER hover polish ── */
.arch-layer {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.arch-layer:hover {
  border-color: rgba(186,243,21,0.2) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4), 0 0 20px rgba(186,243,21,0.06) !important;
  transform: translateX(8px) !important;
}

/* ── 9. HERO PRODUCT VISUAL: pulsing lime glow via ::after opacity (compositor-only) ── */
.hero-product-visual {
  position: relative;
  overflow: visible;           /* allow ::after glow to bleed outside border-radius */
}
.hero-lottie-canvas {
  border-radius: 19px;         /* clip canvas corners since overflow is now visible */
}
.hero-product-visual::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  box-shadow: 0 0 56px rgba(186,243,21,0.16), 0 0 0 1px rgba(186,243,21,0.14);
  opacity: 0;
  pointer-events: none;
  animation: glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.25; }
  50%       { opacity: 1; }
}

/* ── 10. NAV LOGO: subtle scale hover ── */
.nav-logo {
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-logo:hover {
  opacity: 0.88;
  transform: scale(1.03);
}

/* ── 11. TICKER: slightly faster, subtle fade edges ── */
.ticker-wrap {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* ── 12. PROBLEM METRICS: subtle lift on hover ── */
.problem-metric {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.problem-metric:hover {
  transform: translateY(-3px);
}

/* ── 13. NAV CTA glow ── */
.nav-cta:hover {
  box-shadow: 0 0 14px rgba(31,223,120,0.35);
}

/* ── 14. Reduced motion safety net ── */
@media (prefers-reduced-motion: reduce) {
  body.js-reveals .reveal,
  body.js-reveals .reveal-left,
  body.js-reveals .reveal-right,
  body.js-reveals .hero .hero-badge,
  body.js-reveals .hero .hero-h1,
  body.js-reveals .hero .hero-sub,
  body.js-reveals .hero .hero-ctas {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .section-title em,
  .hero-product-visual { animation: none !important; }
  .btn-primary::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   BLUEPRINT SECTION — visual polish + animations
   Keeps the original light background; improves panel depth,
   node styling, icons, and adds scroll-triggered animations.
═══════════════════════════════════════════════════════════ */

/* ── Panel: deeper shadow + crisper border ── */
.bp-panel {
  box-shadow:
    0 2px 0 rgba(255,255,255,0.9) inset,
    0 24px 72px rgba(13,38,24,0.11),
    0 4px  14px rgba(13,38,24,0.06) !important;
  border-color: rgba(13,38,24,0.09) !important;
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.bp-panel:hover {
  box-shadow:
    0 2px 0 rgba(255,255,255,0.9) inset,
    0 32px 88px rgba(13,38,24,0.14),
    0 6px  18px rgba(13,38,24,0.08) !important;
  transform: translateY(-3px);
}

/* ── Panel kicker: stronger green accent ── */
.bp-panel-kicker {
  color: var(--green3) !important;
  font-weight: 900 !important;
  letter-spacing: 0.20em !important;
}

/* ── Graph nodes: colored top-stripe per node type ── */
.bp-graph-node {
  box-shadow: 0 12px 32px rgba(13,38,24,0.12), 0 2px 6px rgba(13,38,24,0.07) !important;
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.bp-graph-node::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: rgba(31,223,120,0.5);
}
.bp-node-study::before  { background: linear-gradient(90deg, var(--green), var(--lime)); }
.bp-node-history::before { background: linear-gradient(90deg, #60a5fa, #93c5fd); }
.bp-node-visit::before   { background: linear-gradient(90deg, #a78bfa, #c4b5fd); }
.bp-node-note::before    { background: linear-gradient(90deg, var(--yellow), var(--yellow2)); }
.bp-node-assign::before  { background: linear-gradient(90deg, #f472b6, #fb7185); }
.bp-node-lot::before     { background: linear-gradient(90deg, var(--gray2), var(--gray3)); }
.bp-node-patient::before { background: linear-gradient(90deg, var(--green), var(--lime)); height: 4px; }

/* ── bp-nd (node detail text) ── */
.bp-nd {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: 8.5px;
  font-family: var(--mono);
  color: rgba(13,38,24,0.36);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* ── Status rail: b/small sub-labels ── */
.bp-status-rail span b     { color: var(--ink); font-size: 12px; }
.bp-status-rail span small { display: block; font-size: 9.5px; font-weight: 400; color: rgba(13,38,24,0.44); margin-top: 1px; }

/* ── Output cards: colored left border accent ── */
.bp-output-card {
  border-left-width: 3px !important;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
}
.bp-output-card:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(13,38,24,0.10);
}
.bp-output-card:nth-child(1) { border-left-color: var(--green)  !important; }
.bp-output-card:nth-child(2) { border-left-color: #60a5fa       !important; }
.bp-output-card:nth-child(3) { border-left-color: var(--yellow) !important; }
.bp-output-card:nth-child(1) .bp-output-icon { background: rgba(31,223,120,0.14)  !important; color: #116540 !important; }
.bp-output-card:nth-child(2) .bp-output-icon { background: rgba(96,165,250,0.14)  !important; color: #1d4ed8 !important; }
.bp-output-card:nth-child(3) .bp-output-icon { background: rgba(255,181,71,0.18)  !important; color: #92400e !important; }

/* ── Output strip: pill tags ── */
.bp-output-strip span {
  font-size: 9.5px !important;
  border: 1px solid rgba(13,38,24,0.10) !important;
  background: rgba(255,255,255,0.72) !important;
  letter-spacing: 0.05em;
}

/* ── Role lane: stronger scope alignment bar ── */
.bp-role-lane {
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease !important;
}
.bp-role-lane:hover {
  transform: translateX(5px) !important;
  box-shadow: 0 4px 14px rgba(13,38,24,0.09) !important;
}

/* ════════════════════════════════════════════
   BLUEPRINT ANIMATIONS
════════════════════════════════════════════ */

/* Graph nodes: organic floating (transform only = GPU compositor) */
@keyframes bpFloatC  { 0%,100%{transform:translate(-50%,-50%);}         50%{transform:translate(-50%,calc(-50% - 8px));} }
@keyframes bpFloatCX { 0%,100%{transform:translateX(-50%);}             50%{transform:translate(-50%,-7px);} }
@keyframes bpFloatY  { 0%,100%{transform:translateY(0);}                50%{transform:translateY(-6px);} }

/* Status rail: glowing particle travels down the rail */
@keyframes bpRailTravel {
  0%   { top: 4px;  opacity: 0; }
  6%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: calc(100% - 20px); opacity: 0; }
}

/* Task chips + output cards: slide in when section enters view */
@keyframes bpChipL { from{opacity:0;transform:translateX(-14px);} to{opacity:1;transform:none;} }
@keyframes bpChipR { from{opacity:0;transform:translateX( 14px);} to{opacity:1;transform:none;} }
@keyframes bpCardU { from{opacity:0;transform:translateY( 14px);} to{opacity:1;transform:none;} }

/* Output icon: pulsing glow ring */
@keyframes bpIconRing {
  0%,100% { box-shadow: 0 0 0 0 rgba(31,223,120,0.0); }
  50%      { box-shadow: 0 0 0 5px rgba(31,223,120,0.12); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Floating graph nodes — replace bpPatientPulse with transform float */
  .bp-node-patient { animation: bpFloatC  5.5s ease-in-out infinite !important; }
  .bp-node-study   { animation: bpFloatCX 4.8s 0.5s  ease-in-out infinite; }
  .bp-node-lot     { animation: bpFloatCX 5.2s 1.0s  ease-in-out infinite; }
  .bp-node-history { animation: bpFloatY  4.6s 0.3s  ease-in-out infinite; }
  .bp-node-visit   { animation: bpFloatY  5.0s 0.8s  ease-in-out infinite; }
  .bp-node-note    { animation: bpFloatY  4.9s 1.3s  ease-in-out infinite; }
  .bp-node-assign  { animation: bpFloatY  5.3s 0.6s  ease-in-out infinite; }

  /* Status rail traveling glow particle */
  .bp-status-rail::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 4px;
    width: 10px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(31,223,120,0.9), transparent);
    filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    animation: bpRailTravel 3.5s 0.8s linear infinite;
  }

  /* Task core: scale pulse (no box-shadow in keyframes) */
  .bp-task-core { animation: bpCoreScale 3.4s ease-in-out infinite !important; }

  /* Output icon rings — staggered */
  .bp-output-icon { animation: bpIconRing 2.8s ease-in-out infinite !important; }
  .bp-output-card:nth-child(2) .bp-output-icon { animation-delay: 0.9s !important; }
  .bp-output-card:nth-child(3) .bp-output-icon { animation-delay: 1.8s !important; }
}

/* ── Scroll-triggered stagger: fires when .bp-animated is added by JS ── */
.blueprint-section.bp-animated .bp-task-sources span:nth-child(1) { animation: bpChipL 0.5s 0.00s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-task-sources span:nth-child(2) { animation: bpChipL 0.5s 0.08s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-task-sources span:nth-child(3) { animation: bpChipL 0.5s 0.16s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-task-sources span:nth-child(4) { animation: bpChipL 0.5s 0.24s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-task-sources span:nth-child(5) { animation: bpChipL 0.5s 0.32s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-task-priorities span:nth-child(1) { animation: bpChipR 0.5s 0.40s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-task-priorities span:nth-child(2) { animation: bpChipR 0.5s 0.50s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-task-priorities span:nth-child(3) { animation: bpChipR 0.5s 0.60s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-output-card:nth-child(1) { animation: bpCardU 0.6s 0.00s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-output-card:nth-child(2) { animation: bpCardU 0.6s 0.12s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-output-card:nth-child(3) { animation: bpCardU 0.6s 0.24s cubic-bezier(0.16,1,0.3,1) both; }

/* ═══════════════════════════════════════════════════════════
   BLUEPRINT SECTION — LEVEL-UP PASS v2
   Animated connection lines, panel accent borders, status
   timeline, and overall visual depth improvements.
═══════════════════════════════════════════════════════════ */

/* ── Animated connection-line traveler (horizontal / diagonal links) ── */
@keyframes bpLinkH { from{transform:translateX(-102%);} to{transform:translateX(102%);} }
@keyframes bpLinkV { from{transform:translateY(-102%);} to{transform:translateY(102%);} }

.bp-link {
  background: rgba(13,38,24,0.11) !important;
  overflow: hidden;
}
.bp-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(31,223,120,0.9) 50%, transparent 100%);
  animation: bpLinkH 3.0s 1.4s ease-in-out infinite;
}
.bp-link-1::after,
.bp-link-6::after {
  background: linear-gradient(180deg, transparent 0%, rgba(31,223,120,0.9) 50%, transparent 100%);
  animation: bpLinkV 3.0s 0.6s ease-in-out infinite;
}
.bp-link-2::after { animation-delay: 1.0s; }
.bp-link-3::after { animation-delay: 1.6s; }
.bp-link-4::after { animation-delay: 2.2s; }
.bp-link-5::after { animation-delay: 2.8s; }
.bp-link-6::after { animation-delay: 3.4s; }

/* Make lines slightly thicker and glow faintly */
.bp-link-1, .bp-link-6 { width: 3px !important; }
.bp-link-2, .bp-link-3, .bp-link-4, .bp-link-5 { height: 3px !important; }

/* ── Panel colored top-accent by role ── */
.bp-panel::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--green), var(--lime));
  opacity: 0.70;
}
.bp-graph::after      { background: linear-gradient(90deg, var(--green), #34d399); }
.bp-lifecycle::after  { background: linear-gradient(90deg, #60a5fa, #a78bfa); }
.bp-tasks::after      { background: linear-gradient(90deg, var(--yellow), #fbbf24); }
.bp-output::after     { background: linear-gradient(90deg, #f472b6, #fb923c); }

/* ── Patient node: pulsing halo via ::after opacity (compositor-only) ── */
.bp-node-patient {
  isolation: isolate;
}
.bp-node-patient::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 24px;
  box-shadow: 0 0 0 10px rgba(31,223,120,0.10), 0 24px 52px rgba(31,223,120,0.20);
  opacity: 0;
  pointer-events: none;
}
@keyframes bpPatientHalo { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .bp-node-patient::after { animation: bpPatientHalo 3.5s ease-in-out infinite; }
}

/* ── Graph map: sharper dot-grid + center glow ── */
.bp-graph-map {
  background:
    linear-gradient(rgba(13,38,24,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,38,24,0.055) 1px, transparent 1px),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(31,223,120,0.13), transparent 68%),
    rgba(252,255,252,0.72) !important;
  background-size: 30px 30px, 30px 30px, 100% 100%, 100% 100% !important;
  border: 1px solid rgba(31,223,120,0.16) !important;
}

/* ── Status rail: vertical timeline with step circles ── */
.bp-status-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 30px !important;
  border-left: none !important;
}
.bp-status-rail::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, rgba(31,223,120,0.50), rgba(31,223,120,0.10));
  border-radius: 99px;
}
.bp-status-rail span {
  position: relative;
  padding: 9px 12px 9px 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(13,38,24,0.08);
  padding-left: 12px;
  margin-bottom: 4px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.bp-status-rail span:hover {
  background: rgba(255,255,255,0.88);
  transform: translateX(3px);
}
.bp-status-rail span::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  border: 2px solid rgba(31,223,120,0.50);
  box-sizing: border-box;
}
.bp-status-rail span:last-child::before {
  background: var(--green);
  border-color: var(--green);
}
.bp-status-rail span:nth-child(4)::before { background: rgba(31,223,120,0.4); border-color: var(--green); }

/* ── Role lane: visual scope progress bar ── */
.bp-role-lane {
  position: relative; /* required for ::after scope bar */
}
.bp-role-lane::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 99px;
  background: rgba(13,38,24,0.08);
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}
.bp-lane-full::after  { width: 48px; background: rgba(31,223,120,0.55); }
.bp-lane-site::after  { width: 32px; background: rgba(96,165,250,0.55); }
.bp-lane-work::after  { width: 22px; background: rgba(255,181,71,0.65); }
.bp-lane-view::after  { width: 14px; background: rgba(13,38,24,0.18); }
/* Adjust scope text to leave space for bar */
.bp-role-scope { margin-right: 60px; }

/* ── Graph node: hover lift with colored shadow ── */
.bp-graph-node:hover {
  transform: scale(1.06) !important;
  z-index: 10;
}
.bp-node-patient:hover  { box-shadow: 0 28px 56px rgba(31,223,120,0.24) !important; }
.bp-node-history:hover  { box-shadow: 0 20px 40px rgba(96,165,250,0.22) !important; }
.bp-node-visit:hover    { box-shadow: 0 20px 40px rgba(167,139,250,0.22) !important; }
.bp-node-note:hover     { box-shadow: 0 20px 40px rgba(255,181,71,0.22) !important; }
.bp-node-assign:hover   { box-shadow: 0 20px 40px rgba(244,114,182,0.22) !important; }

/* ── Task core: scale pulse (compositor-only transform) ── */
@keyframes bpCoreScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion: no-preference) {
  .bp-task-core { animation: bpCoreScale 3.4s ease-in-out infinite !important; }
}

/* ── Role lane: stagger-in on scroll ── */
.blueprint-section.bp-animated .bp-role-lane:nth-child(1) { animation: bpCardU 0.5s 0.00s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-role-lane:nth-child(2) { animation: bpCardU 0.5s 0.08s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-role-lane:nth-child(3) { animation: bpCardU 0.5s 0.16s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-role-lane:nth-child(4) { animation: bpCardU 0.5s 0.24s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-role-lane:nth-child(5) { animation: bpCardU 0.5s 0.32s cubic-bezier(0.16,1,0.3,1) both; }

/* ═══════════════════════════════════════════════════════════
   INTEGRATION BADGES — blueprint-style colored square icons
═══════════════════════════════════════════════════════════ */

.integration-abbr {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  flex-shrink: 0;
  align-self: flex-start;
}

/* Live integrations — distinct color per type */
.ia-green  { background: rgba(31,223,120,0.14)  !important; color: #0d6e40  !important; border-color: rgba(31,223,120,0.35) !important; }
.ia-blue   { background: rgba(96,165,250,0.14)  !important; color: #1d4ed8  !important; border-color: rgba(96,165,250,0.32) !important; }
.ia-purple { background: rgba(167,139,250,0.14) !important; color: #6d28d9  !important; border-color: rgba(167,139,250,0.32) !important; }
.ia-amber  { background: rgba(251,191,36,0.14)  !important; color: #92400e  !important; border-color: rgba(251,191,36,0.35) !important; }

/* Roadmap integrations — muted versions */
.ia-teal   { background: rgba(45,212,191,0.10)  !important; color: #0f766e  !important; border-color: rgba(45,212,191,0.25) !important; }
.ia-yellow { background: rgba(253,224,71,0.12)  !important; color: #854d0e  !important; border-color: rgba(253,224,71,0.28) !important; }
.ia-pink   { background: rgba(244,114,182,0.12) !important; color: #9d174d  !important; border-color: rgba(244,114,182,0.28) !important; }
.ia-indigo { background: rgba(129,140,248,0.12) !important; color: #3730a3  !important; border-color: rgba(129,140,248,0.28) !important; }

/* ═══════════════════════════════════════════════════════════
   PHASE LIST ICONS — blueprint-style colored square badges
═══════════════════════════════════════════════════════════ */

/* Remove old tiny-dot pseudo-element */
.phase-list li::before { display: none !important; }

.phase-list li {
  align-items: center !important;
  gap: 10px !important;
}

.ph-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  line-height: 1;
}

/* Phase 1 — live green */
.ph-icon-green {
  background: rgba(31,223,120,0.12);
  color: #0d6e40;
  border-color: rgba(31,223,120,0.32);
}

/* Phase 2 — building lime/amber */
.ph-icon-lime {
  background: rgba(186,243,21,0.12);
  color: #5a7200;
  border-color: rgba(186,243,21,0.36);
}

/* Phase 3 — future gray */
.ph-icon-gray {
  background: rgba(13,38,24,0.055);
  color: rgba(13,38,24,0.40);
  border-color: rgba(13,38,24,0.14);
}

/* Hover lift on phase cards reveals icon glow */
.phase-active:hover  .ph-icon-green { background: rgba(31,223,120,0.20); border-color: rgba(31,223,120,0.50); }
.phase-building:hover .ph-icon-lime { background: rgba(186,243,21,0.20); border-color: rgba(186,243,21,0.52); }

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — fixes for all new elements
   Covers cap-visual-lottie, blueprint upgrades, phase icons,
   integration badges across all breakpoints.
═══════════════════════════════════════════════════════════ */

/* ── Lottie cap-visuals: override the blanket height resets ── */
.cap-visual-lottie {
  height: 140px !important;
  min-height: 140px;
}
/* Wide Lottie card (Report Builder) needs auto height */
.cap-card-wide .cap-visual-lottie {
  height: auto !important;
  min-height: 130px;
}

@media (max-width: 620px) {
  /* Single-column cards: give Lottie a bit less height */
  .cap-visual-lottie { height: 130px !important; min-height: 130px; }

  /* Integration badges: slightly smaller on phone */
  .integration-abbr {
    width: 40px !important;
    height: 40px !important;
    font-size: 9px !important;
    border-radius: 10px !important;
  }

  /* Phase list icons: smaller on phone */
  .ph-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 7.5px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  /* Phase list: full width single column */
  .phase-list {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .phase-list li {
    gap: 8px !important;
    font-size: 13px !important;
  }

  /* Blueprint: hide scope bar on mobile to avoid layout overflow */
  .bp-role-lane::after { display: none !important; }
  .bp-role-scope { margin-right: 0 !important; }

  /* Blueprint status rail: tighter padding on mobile */
  .bp-status-rail {
    padding-left: 26px !important;
  }
  .bp-status-rail::before { left: 8px; }
  .bp-status-rail span::before { left: -22px; width: 10px; height: 10px; }
  .bp-status-rail span { padding: 7px 10px 7px 10px; }

  /* Blueprint panel top accent: ensure visible */
  .bp-panel::after {
    height: 3px !important;
    opacity: 0.80 !important;
  }

  /* Role lanes: tighter on mobile */
  .bp-role-lane { padding: 8px 10px !important; min-height: 40px !important; }
  .bp-role-code { width: 26px !important; height: 26px !important; font-size: 9px !important; }
  .bp-role-name { font-size: 11.5px !important; }

  /* Output icons on mobile */
  .bp-output-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 760px) {
  /* Tablet: hide scope bar too */
  .bp-role-lane::after { display: none; }
  .bp-role-scope { margin-right: 0; }

  /* Phase list: 1 column on tablet for icon readability */
  .phase-list {
    grid-template-columns: 1fr !important;
  }

  /* Status rail on tablet */
  .bp-status-rail { padding-left: 28px !important; }
}

@media (max-width: 480px) {
  /* Very small phones */
  .cap-visual-lottie { height: 120px !important; min-height: 120px; }

  /* Integration grid: ensure single column */
  .integration-grid { grid-template-columns: 1fr !important; }

  /* Phase icons: minimal */
  .ph-icon { width: 22px !important; height: 22px !important; font-size: 7px !important; }
}

/* ── MOTION TEMPLATE VISUALS ── */

/* Problem section: medical animation accent */
.problem-visual {
  margin: 22px 0 26px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.025);
}
.problem-lottie {
  width: 100%;
  height: 160px;
  display: block;
  filter: hue-rotate(-120deg) saturate(0.42) brightness(0.72) contrast(1.1);
}

/* Architecture section: data-flow animation */
.arch-motion {
  margin: 32px auto 0;
  max-width: 540px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.025);
}
.arch-lottie {
  width: 100%;
  height: 220px;
  display: block;
  filter: hue-rotate(-120deg) saturate(0.45) brightness(0.68) contrast(1.1);
}

/* Roadmap Phase 2: AI animation */
.phase-motion {
  margin: 14px 0 18px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.phase-lottie {
  width: 100%;
  height: 120px;
  display: block;
  filter: hue-rotate(-120deg) saturate(0.42) brightness(0.72) contrast(1.1);
}

/* Motion template responsive */
@media (max-width: 620px) {
  .problem-lottie { height: 130px; }
  .arch-lottie { height: 170px; }
  .phase-lottie { height: 100px; }
}
@media (max-width: 480px) {
  .problem-lottie { height: 110px; }
  .arch-lottie { height: 140px; }
  .phase-lottie { height: 90px; }
}

/* ── UI/UX TRANSITIONS ── */

/* Hero scroll-down indicator */
.hero-scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 48px;
  z-index: 8;
  display: block;
  text-decoration: none;
  animation: heroScrollCueFade 0.7s 2.4s both;
}
@keyframes heroScrollCueFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 0.80; transform: translateY(0); }
}
.hero-scroll-cue:hover { opacity: 1 !important; }
.hero-scroll-lottie {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 10px;
  pointer-events: none;
}
/* Fade out scroll cue once user scrolls */
@media (max-width: 480px) {
  .hero-scroll-cue { bottom: 18px; }
  .hero-scroll-lottie { width: 40px; height: 40px; }
}

/* Demo modal — add opacity to card open/close */
.demo-card {
  opacity: 0;
  transition:
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.demo-overlay.open .demo-card {
  opacity: 1 !important;
}

/* Success Lottie: sized correctly and no filter (white bg matches modal) */
.demo-success-lottie {
  border-radius: 12px;
}

/* ── SST DIAGRAM REFRESH ── */

/* Column labels — more prominent with colored dot prefix */
.sst-col-label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: rgba(8,23,15,0.50) !important;
}
.sst-sources .sst-col-label { justify-content: flex-end !important; }
.sst-label-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.sst-label-dot-in  { background: rgba(59,130,246,0.60); }
.sst-label-dot-out { background: rgba(19,111,61,0.60); }

/* Chips: flex row with icon badge */
.sst-chip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px 8px 8px !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
  cursor: default !important;
}
.sst-chip:hover {
  box-shadow: 0 4px 16px rgba(13,38,24,0.10) !important;
  transform: translateY(-1px) !important;
}

/* Letter-badge icons on chips */
.sst-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

/* Source chip badge colors */
.sst-ic-teal   { background: rgba(20,184,166,0.12); color: #0e6e6e; border-color: rgba(20,184,166,0.28); }
.sst-ic-blue   { background: rgba(59,130,246,0.12); color: #1e40af; border-color: rgba(59,130,246,0.26); }
.sst-ic-indigo { background: rgba(99,102,241,0.12); color: #3730a3; border-color: rgba(99,102,241,0.24); }
.sst-ic-amber  { background: rgba(245,158,11,0.12); color: #92400e; border-color: rgba(245,158,11,0.28); }
.sst-ic-purple { background: rgba(168,85,247,0.12); color: #6b21a8; border-color: rgba(168,85,247,0.24); }
.sst-ic-rose   { background: rgba(244,63,94,0.10);  color: #9f1239; border-color: rgba(244,63,94,0.22); }

/* Output chip badge colors */
.sst-ic-out      { background: rgba(19,111,61,0.14); color: #0a4d2b; border-color: rgba(19,111,61,0.30); }
.sst-ic-out-lime { background: rgba(186,243,21,0.18); color: #3a5200; border-color: rgba(186,243,21,0.38); }

/* Output chip: slightly richer style */
.sst-chip-out {
  background: rgba(19,111,61,0.07) !important;
  border-color: rgba(19,111,61,0.18) !important;
  color: rgba(8,23,15,0.70) !important;
  font-weight: 700 !important;
}

/* Source chip: cleaner appearance */
.sst-chip-src {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(13,38,24,0.10) !important;
  color: rgba(8,23,15,0.65) !important;
}

/* Diagram card — subtle layered look */
.sst-diagram {
  background:
    radial-gradient(ellipse 55% 50% at 50% 50%, rgba(31,223,120,0.04), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.90), rgba(245,252,244,0.72)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.90) inset,
    0 28px 80px rgba(13,38,24,0.09),
    0 0 0 1px rgba(13,38,24,0.08) !important;
}

/* Mobile: ensure badges don't overflow */
@media (max-width: 640px) {
  .sst-ic { width: 22px !important; height: 22px !important; font-size: 7.5px !important; }
  .sst-chip { gap: 6px !important; }
}

/* ── BLUEPRINT REDESIGN — v20260517-54 ── */

/* Remove old scope-bar pseudo from role lanes (we now have .bp-scope-pill) */
.bp-role-lane::after { display: none !important; }

/* Top-accent for the new Events panel (replaced .bp-graph) */
.bp-events::after { background: linear-gradient(90deg, var(--green), #34d399) !important; }

/* Stagger-in animations for new panel elements on scroll */
.blueprint-section.bp-animated .bp-event-row:nth-child(1) { animation: bpCardU 0.45s 0.05s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-event-row:nth-child(2) { animation: bpCardU 0.45s 0.10s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-event-row:nth-child(3) { animation: bpCardU 0.45s 0.15s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-event-row:nth-child(4) { animation: bpCardU 0.45s 0.20s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-event-row:nth-child(5) { animation: bpCardU 0.45s 0.25s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-event-row:nth-child(6) { animation: bpCardU 0.45s 0.30s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-qt:nth-child(1) { animation: bpCardU 0.5s 0.00s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-qt:nth-child(2) { animation: bpCardU 0.5s 0.10s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-qt:nth-child(3) { animation: bpCardU 0.5s 0.20s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-qt:nth-child(4) { animation: bpCardU 0.5s 0.30s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-analytic-card:nth-child(1) { animation: bpCardU 0.55s 0.00s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-analytic-card:nth-child(2) { animation: bpCardU 0.55s 0.12s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-analytic-card:nth-child(3) { animation: bpCardU 0.55s 0.24s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-analytic-card:nth-child(4) { animation: bpCardU 0.55s 0.36s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-ps:nth-child(1) { animation: bpCardU 0.45s 0.05s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-ps:nth-child(2) { animation: bpCardU 0.45s 0.10s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-ps:nth-child(3) { animation: bpCardU 0.45s 0.15s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-ps:nth-child(4) { animation: bpCardU 0.45s 0.20s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-ps:nth-child(5) { animation: bpCardU 0.45s 0.25s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-ps:nth-child(6) { animation: bpCardU 0.45s 0.30s cubic-bezier(0.16,1,0.3,1) both; }
.blueprint-section.bp-animated .bp-ps:nth-child(7) { animation: bpCardU 0.45s 0.35s cubic-bezier(0.16,1,0.3,1) both; }

/* ═══════════════════════════════════════════════════════════
   BLUEPRINT — VISUAL POLISH PASS v20260517-55
   Match the richness of every other section on the site
═══════════════════════════════════════════════════════════ */

/* ── GAP CARDS (Panel 4 — What We Fix) ── */
.bp-gap-cards {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bp-gap-card {
  padding: 14px 16px;
  border-radius: 13px;
  border: 1px solid rgba(13,38,24,0.09);
  background: rgba(255,255,255,0.62);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bp-gap-card:hover {
  transform: translateX(3px);
  box-shadow: 0 6px 20px rgba(13,38,24,0.09);
}
.bp-gap-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bp-gap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.bp-gic-amber  { background: rgba(255,181,71,0.16);  color: #92400e; border: 1px solid rgba(255,181,71,0.30); }
.bp-gic-blue   { background: rgba(96,165,250,0.14);  color: #1e40af; border: 1px solid rgba(96,165,250,0.28); }
.bp-gic-green  { background: rgba(31,223,120,0.14);  color: #0d5c34; border: 1px solid rgba(31,223,120,0.28); }
.bp-gap-head strong {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
}
.bp-gap-card p {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
  color: rgba(13,38,24,0.56);
}
.bp-gap-lead   { border-color: rgba(255,181,71,0.22);  background: rgba(255,248,232,0.60); }
.bp-gap-coord  { border-color: rgba(96,165,250,0.20);  background: rgba(239,247,255,0.60); }
.bp-gap-vis    { border-color: rgba(31,223,120,0.22);  background: rgba(237,255,244,0.60); }

/* ── OUTCOME CARDS (Panel 5 — Platform Outcomes) ── */
.bp-outcomes-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.bp-outcome-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  border-radius: 14px;
  border: 1px solid rgba(13,38,24,0.09);
  background: rgba(255,255,255,0.64);
  position: relative;
  overflow: hidden;
  transition: transform 0.20s ease, box-shadow 0.20s ease;
}
.bp-outcome-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}
.bp-outcome-card:nth-child(1)::before { background: linear-gradient(90deg, #fbbf24, #f97316); }
.bp-outcome-card:nth-child(2)::before { background: linear-gradient(90deg, #60a5fa, #818cf8); }
.bp-outcome-card:nth-child(3)::before { background: linear-gradient(90deg, #818cf8, #a78bfa); }
.bp-outcome-card:nth-child(4)::before { background: linear-gradient(90deg, #1fdf78, #baf315); }
.bp-outcome-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(13,38,24,0.10);
}
.bp-oc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.bp-oci-amber  { background: rgba(255,181,71,0.16);  color: #92400e; border: 1px solid rgba(255,181,71,0.30); }
.bp-oci-blue   { background: rgba(96,165,250,0.14);  color: #1e40af; border: 1px solid rgba(96,165,250,0.28); }
.bp-oci-indigo { background: rgba(99,102,241,0.12);  color: #3730a3; border: 1px solid rgba(99,102,241,0.24); }
.bp-oci-green  { background: rgba(31,223,120,0.14);  color: #0d5c34; border: 1px solid rgba(31,223,120,0.28); }
.bp-outcome-card strong {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.bp-outcome-card p {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.60;
  color: rgba(13,38,24,0.54);
  flex: 1;
}
/* Tinted card backgrounds per role */
.bp-outcome-card:nth-child(1) { background: rgba(255,248,232,0.60) !important; border-color: rgba(255,181,71,0.20) !important; }
.bp-outcome-card:nth-child(2) { background: rgba(239,247,255,0.60) !important; border-color: rgba(96,165,250,0.18) !important; }
.bp-outcome-card:nth-child(3) { background: rgba(243,240,255,0.60) !important; border-color: rgba(99,102,241,0.18) !important; }
.bp-outcome-card:nth-child(4) { background: rgba(237,255,244,0.60) !important; border-color: rgba(31,223,120,0.18) !important; }
/* Responsive */
@media (max-width: 1180px) {
  .bp-outcomes-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .bp-outcomes-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .bp-outcomes-row { grid-template-columns: 1fr; }
}

/* ── Panel-level backgrounds: themed tints per section ── */
.bp-access {
  background:
    linear-gradient(135deg, rgba(237,255,244,0.80), rgba(255,255,255,0.58)),
    radial-gradient(circle at 0% 0%, rgba(31,223,120,0.14), transparent 52%) !important;
}
.bp-events {
  background:
    linear-gradient(155deg, rgba(255,255,255,0.86), rgba(237,255,244,0.50)),
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(31,223,120,0.10), transparent 70%) !important;
}
.bp-lifecycle {
  background:
    linear-gradient(135deg, rgba(239,247,255,0.78), rgba(255,255,255,0.58)),
    radial-gradient(circle at 100% 0%, rgba(96,165,250,0.12), transparent 52%) !important;
}
.bp-tasks {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.84), rgba(255,248,232,0.50)),
    radial-gradient(circle at 0% 100%, rgba(255,181,71,0.10), transparent 50%) !important;
}
.bp-output {
  background:
    linear-gradient(155deg, rgba(255,255,255,0.86), rgba(243,244,255,0.52)),
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(31,223,120,0.08), transparent 60%) !important;
}

/* ── Event store: widen spine column, bigger glowing core ── */
.bp-event-diagram {
  grid-template-columns: 1fr 90px 1fr !important;
  gap: 6px !important;
}
.bp-event-spine {
  position: relative;
}
.bp-event-spine::before,
.bp-event-spine::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(180deg, rgba(31,223,120,0.22), rgba(31,223,120,0.52), rgba(31,223,120,0.22));
  border-radius: 99px;
}
.bp-event-spine::before { top: 30px; height: calc(50% - 52px); }
.bp-event-spine::after  { bottom: 0;   height: calc(50% - 52px); }
.bp-event-core {
  width: 84px !important;
  height: 84px !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 8px rgba(31,223,120,0.07), 0 0 0 16px rgba(31,223,120,0.04), 0 14px 32px rgba(31,223,120,0.18) !important;
}
.bp-ec-title { font-size: 10px !important; }
.bp-ec-sub   { font-size: 7.5px !important; margin-top: 4px !important; }

/* Event rows: left-border color accent matching dot color */
.bp-event-in .bp-event-row:nth-child(2) { border-left: 3px solid rgba(31,223,120,0.65); }
.bp-event-in .bp-event-row:nth-child(3) { border-left: 3px solid rgba(96,165,250,0.65); }
.bp-event-in .bp-event-row:nth-child(4) { border-left: 3px solid rgba(251,191,36,0.65); }
.bp-event-in .bp-event-row:nth-child(5) { border-left: 3px solid rgba(167,139,250,0.65); }
.bp-event-in .bp-event-row:nth-child(6) { border-left: 3px solid rgba(45,212,191,0.65); }
.bp-event-in .bp-event-row:nth-child(7) { border-left: 3px solid rgba(248,113,113,0.65); }
/* Output rows: right green accent, green-tinted bg */
.bp-ev-out {
  border-right: 3px solid rgba(31,223,120,0.42) !important;
  background: rgba(237,255,244,0.70) !important;
}
.bp-ev-arrow {
  font-size: 15px !important;
  font-weight: 900 !important;
}
/* Hover on event rows */
.bp-event-row { transition: background 0.16s, transform 0.16s; }
.bp-event-in .bp-event-row:hover  { background: rgba(255,255,255,0.94) !important; transform: translateX(3px); }
.bp-ev-out:hover { background: rgba(237,255,244,0.90) !important; transform: translateX(-3px); }

/* ── Pipeline: thicker glowing spine, colored stage numbers ── */
.bp-pipe-stages::before {
  width: 3px !important;
  left: 9px !important;
  box-shadow: 0 0 10px rgba(31,223,120,0.30);
}
.bp-ps-1 .bp-ps-n { background: rgba(96,165,250,0.20);  color: #1d4ed8; border: 1px solid rgba(96,165,250,0.36); }
.bp-ps-2 .bp-ps-n { background: rgba(99,102,241,0.16);  color: #4338ca; border: 1px solid rgba(99,102,241,0.32); }
.bp-ps-3 .bp-ps-n { background: rgba(34,211,238,0.18);  color: #0e7490; border: 1px solid rgba(34,211,238,0.34); }
.bp-ps-4 .bp-ps-n { background: rgba(251,191,36,0.18);  color: #92400e; border: 1px solid rgba(251,191,36,0.36); }
.bp-ps-5 .bp-ps-n { background: rgba(167,139,250,0.18); color: #6d28d9; border: 1px solid rgba(167,139,250,0.34); }
/* 6 & 7 already green — keep */
/* Hover lift on pipeline stages */
.bp-ps { transition: background 0.18s, transform 0.18s, box-shadow 0.18s; }
.bp-ps:hover {
  background: rgba(255,255,255,0.92) !important;
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(13,38,24,0.08);
}
/* Pipe start node: stronger styling */
.bp-pipe-start {
  border-color: rgba(31,223,120,0.32) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(31,223,120,0.14), transparent 70%),
    rgba(255,255,255,0.84) !important;
  box-shadow: 0 14px 34px rgba(31,223,120,0.13) !important;
}

/* ── Coordinator tasks: colored left border by type ── */
.bp-qt { transition: background 0.18s, box-shadow 0.18s, transform 0.18s; }
.bp-qt-urgent { border-left: 3px solid rgba(239,68,68,0.60) !important; }
.bp-qt-today  { border-left: 3px solid rgba(255,181,71,0.60) !important; }
.bp-qt-match  { border-left: 3px solid rgba(96,165,250,0.60) !important; }
.bp-qt-visit  { border-left: 3px solid rgba(31,223,120,0.60) !important; }
.bp-qt:hover {
  box-shadow: 0 4px 18px rgba(13,38,24,0.09);
  transform: translateX(2px);
}
/* Badge sizing */
.bp-qt-badge {
  font-size: 9.5px !important;
  padding: 4px 9px !important;
  border-radius: 7px !important;
}

/* ── Role lanes: stronger scope pills + hover ── */
.bp-scope-pill {
  padding: 4px 10px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
}
.bp-role-lane { transition: transform 0.18s, box-shadow 0.18s; }
.bp-role-lane:hover {
  transform: translateX(3px);
  box-shadow: 0 4px 14px rgba(13,38,24,0.09);
}

/* ── Analytics: card top-accent bar + bigger icons + hover ── */
.bp-analytic-card {
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.20s, box-shadow 0.20s !important;
  padding-top: 20px !important;
}
.bp-analytic-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}
.bp-analytic-card:nth-child(1)::before { background: linear-gradient(90deg, #1fdf78, #baf315); }
.bp-analytic-card:nth-child(2)::before { background: linear-gradient(90deg, #60a5fa, #a78bfa); }
.bp-analytic-card:nth-child(3)::before { background: linear-gradient(90deg, #fbbf24, #f97316); }
.bp-analytic-card:nth-child(4)::before { background: linear-gradient(90deg, #f87171, #f472b6); }
.bp-analytic-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(13,38,24,0.11) !important;
}
/* Bigger, more prominent analytics icon badges */
.bp-ac-icon {
  width: 48px !important;
  height: 28px !important;
  font-size: 10px !important;
  border-radius: 8px !important;
  letter-spacing: 0.09em !important;
  font-weight: 900 !important;
  margin-bottom: 8px !important;
}
.bp-aci-green { border: 1px solid rgba(31,223,120,0.28) !important; }
.bp-aci-blue  { border: 1px solid rgba(96,165,250,0.28) !important; }
.bp-aci-amber { border: 1px solid rgba(255,181,71,0.30) !important; }
.bp-aci-rose  { border: 1px solid rgba(244,63,94,0.24) !important; }
/* Analytics panel: inner sub-card tinted bg */
.bp-analytic-card:nth-child(1) { background: rgba(237,255,244,0.54) !important; border-color: rgba(31,223,120,0.18) !important; }
.bp-analytic-card:nth-child(2) { background: rgba(239,246,255,0.54) !important; border-color: rgba(96,165,250,0.18) !important; }
.bp-analytic-card:nth-child(3) { background: rgba(255,248,232,0.54) !important; border-color: rgba(255,181,71,0.20) !important; }
.bp-analytic-card:nth-child(4) { background: rgba(255,242,242,0.54) !important; border-color: rgba(244,63,94,0.16) !important; }
/* Bar fill: green gradient already, just punch it up */
.bp-bar-fill { background: linear-gradient(90deg, #1fdf78, #baf315) !important; height: 8px !important; }
.bp-bar-track { height: 8px !important; border-radius: 999px !important; }
/* Enrollment predictor: blue ring more prominent */
.bp-predict-donut {
  border-width: 4px !important;
  border-color: rgba(96,165,250,0.50) !important;
  box-shadow: 0 0 0 6px rgba(96,165,250,0.10) !important;
  width: 66px !important;
  height: 66px !important;
}
/* Screen-fail big number: brand red */
.bp-fail-big strong { color: #c0392b !important; }

/* ── HOW IT WORKS: 4-step operational mechanism ── */
.wf-how-steps {
  display: grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr;
  align-items: start;
  gap: 0;
  margin-top: 48px;
}

.wf-how-step {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(13,38,24,0.10);
  border-radius: 18px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(8px);
  transition: transform 0.20s, box-shadow 0.20s;
}
.wf-how-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(13,38,24,0.10);
}

.wf-how-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.wf-how-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: rgba(13,38,24,0.30);
  background: rgba(13,38,24,0.05);
  border-radius: 7px;
  padding: 4px 9px;
}

.wf-how-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wf-hi-green {
  background: rgba(31,223,120,0.14);
  color: #0d5c34;
  border: 1px solid rgba(31,223,120,0.22);
}
.wf-hi-blue {
  background: rgba(96,165,250,0.14);
  color: #1e40af;
  border: 1px solid rgba(96,165,250,0.22);
}
.wf-hi-amber {
  background: rgba(255,181,71,0.16);
  color: #92400e;
  border: 1px solid rgba(255,181,71,0.24);
}
.wf-hi-lime {
  background: rgba(186,243,21,0.14);
  color: #3a5500;
  border: 1px solid rgba(186,243,21,0.24);
}

.wf-how-step strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
}
.wf-how-step p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.wf-how-auto {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(13,38,24,0.48);
  background: rgba(13,38,24,0.04);
  border-radius: 8px;
  padding: 7px 10px;
  margin-top: 4px;
  letter-spacing: 0.01em;
  line-height: 1.45;
}

.wf-auto-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wf-ad-green { background: #1fdf78; }
.wf-ad-blue  { background: #60a5fa; }
.wf-ad-amber { background: #ffb547; }
.wf-ad-lime  { background: #baf315; }

/* Connector arrow between steps */
.wf-how-conn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  align-self: center;
  color: rgba(13,38,24,0.22);
  font-size: 18px;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}
.wf-how-conn::after {
  content: '→';
  font-size: 16px;
  color: rgba(13,38,24,0.24);
}

/* Step color top-accent bars */
.wf-how-step:nth-child(1) { border-top: 3px solid rgba(31,223,120,0.50); }
.wf-how-step:nth-child(3) { border-top: 3px solid rgba(96,165,250,0.50); }
.wf-how-step:nth-child(5) { border-top: 3px solid rgba(255,181,71,0.50); }
.wf-how-step:nth-child(7) { border-top: 3px solid rgba(186,243,21,0.60); }

@media (max-width: 900px) {
  .wf-how-steps {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 16px;
  }
  .wf-how-conn { display: none; }
}

@media (max-width: 560px) {
  .wf-how-steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE VISIBILITY PASS — keep every product feature usable
   on phones while preserving the desktop presentation.
═══════════════════════════════════════════════════════════ */
@keyframes ringRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 768px) {
  body.js-reveals .reveal,
  body.js-reveals .reveal-left,
  body.js-reveals .reveal-right,
  body.js-reveals .hero .hero-badge,
  body.js-reveals .hero .hero-h1,
  body.js-reveals .hero .hero-sub,
  body.js-reveals .hero .hero-ctas {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .hero {
    min-height: auto !important;
    padding-bottom: 54px !important;
  }

  .hero-product-visual {
    display: block !important;
    max-width: 100% !important;
    margin-top: 28px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .hero-lottie-canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    border-radius: 15px !important;
  }

  .hero-scroll-cue,
  .hero-blob {
    display: none !important;
  }

  .problem-metrics,
  .problem-metric,
  .cap-grid,
  .cap-grid-3,
  .pillars-grid,
  .roadmap-grid,
  .integration-grid,
  .founder-grid,
  .arch-layout,
  .arch-layers,
  .blueprint-grid,
  .bp-panel,
  .bp-outcomes-row,
  .wf-how-steps {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .problem-metrics {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .problem-metric {
    min-width: 0 !important;
    padding: 22px 20px !important;
  }

  .pm-value,
  .pm-label,
  .pm-source {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .pm-value {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    font-size: clamp(42px, 15vw, 66px) !important;
    letter-spacing: -0.035em !important;
  }

  .pv-row,
  .pv-risk-head,
  .pv-risk-meta {
    align-items: flex-start !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .pv-row > span:last-child,
  .pv-risk-head > span,
  .pv-risk-meta > span,
  .pv-auto-step,
  .pv-rs-item small {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .pv-risk-stats {
    flex-wrap: wrap !important;
  }

  .pv-rs-item {
    min-width: 92px !important;
  }

  .sst-diagram {
    overflow: hidden !important;
  }

  .sst-hub,
  .sst-hub-ring,
  .sst-hub-inner {
    max-width: 100% !important;
  }

  .sst-hub-outer-ring,
  .sst-hub-glow {
    display: none !important;
  }

  .sst-sources .sst-col-label {
    justify-content: center !important;
  }

  .sst-chip {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }

  .arch-layer,
  .arch-diagram,
  .asd-stack,
  .asd-row,
  .asd-pills,
  .bp-role-lane,
  .bp-event-row,
  .bp-pipe-start,
  .bp-pipe-lot-badge,
  .bp-ps,
  .bp-outcome-card,
  .phase-card,
  .integration-card,
  .founder-card {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .arch-layer:hover,
  .bp-role-lane:hover,
  .bp-ps:hover,
  .bp-event-row:hover,
  .bp-ev-out:hover,
  .founder-card:hover {
    transform: none !important;
  }

  .arch-diagram {
    padding: 22px 18px !important;
  }

  .asd-row,
  .asd-pills {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .asd-pills span,
  .arch-chips span,
  .founder-tag,
  .phase-list li,
  .integration-card p {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .bp-role-lane {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px 10px !important;
  }

  .bp-scope-pill {
    display: inline-flex !important;
    grid-column: 2 !important;
    justify-self: start !important;
    margin-top: 2px !important;
    max-width: 100% !important;
  }

  .bp-role-caps {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .demo-overlay {
    padding: 14px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }

  .demo-card {
    width: min(100%, 460px) !important;
    max-height: none !important;
    margin: 14px auto !important;
    padding: 28px 20px 22px !important;
  }

  .demo-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  .container {
    width: min(calc(100% - 28px), 420px) !important;
  }

  .btn-primary,
  .btn-ghost,
  .nav-mobile-menu .nav-mobile-cta,
  .demo-submit-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .problem-section .section-title,
  .hero-inner .hero-h1,
  .section-title {
    overflow-wrap: anywhere !important;
  }

  .pillar-card,
  .cap-card,
  .phase-card,
  .integration-card,
  .founder-card,
  .bp-panel {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* Brand asset integration - EnrollIQ logo variants */
.nav-logo {
  gap: 10px !important;
  min-width: 0;
}

.nav-logo-mark-img {
  display: none;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 9px;
  background: #06120b;
  box-shadow:
    0 14px 34px rgba(31,223,120,0.24),
    0 0 0 1px rgba(186,255,21,0.18);
}

.nav-logo-wordmark {
  display: block;
  width: clamp(136px, 11vw, 174px);
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: contain;
  object-position: left center;
  border-radius: 5px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.28));
}

.hero-product-visual.hero-brand-visual {
  width: 100% !important;
  max-width: min(1120px, 100%) !important;
  aspect-ratio: 3 / 1;
  margin-top: clamp(36px, 4.5vw, 68px) !important;
  border-radius: 22px !important;
  background: #020704 !important;
  border: 1px solid rgba(186,255,21,0.16) !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.12),
    0 28px 80px rgba(0,0,0,0.48),
    0 0 0 1px rgba(31,223,120,0.08),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.hero-brand-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 21px;
}

.sst-hub-mark {
  display: block;
  width: clamp(44px, 3.8vw, 64px);
  height: clamp(44px, 3.8vw, 64px);
  object-fit: cover;
  border-radius: 15px;
  margin-bottom: 3px;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.20),
    0 0 0 1px rgba(255,255,255,0.24);
}

.sst-hub-inner {
  gap: 6px !important;
  padding: 12px !important;
}

.sst-hub-kpi-grid {
  width: min(110px, 100%);
}

.footer-logo-img {
  display: block;
  width: min(284px, 100%);
  height: auto;
  margin: 0 0 16px;
  border-radius: 10px;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.24));
}

.demo-brand-mark {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 13px;
  margin: 0 auto 14px;
  box-shadow:
    0 12px 28px rgba(31,223,120,0.18),
    0 0 0 1px rgba(13,38,24,0.10);
}

@media (max-width: 768px) {
  .hero-product-visual.hero-brand-visual {
    display: block !important;
    max-width: 100% !important;
    margin-top: 30px !important;
    border-radius: 17px !important;
    overflow: visible !important;
  }

  .hero-brand-image {
    min-height: 156px;
    border-radius: 16px;
    object-position: 35% center;
  }

  .sst-hub-mark {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 620px) {
  .nav-logo-wordmark {
    width: 124px;
  }

  .nav-logo-mark-img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px;
  }
}

@media (max-width: 420px) {
  .nav-logo-wordmark {
    display: none;
  }

  .nav-logo-mark-img {
    display: block;
  }

  .hero-brand-image {
    min-height: 138px;
    object-position: 31% center;
  }
}