@import url('shared/reset.css');

:root {
  /* Brand palette — sampled from the tetra logo SVGs */
  --brand-ink:    #241C4A;  /* deep indigo, stroke + headlines */
  --brand-purple: #534AB7;  /* primary brand purple (.ai wordmark) */
  --brand-mid:    #756EAC;  /* mid tetra face */
  --brand-lav:    #B1AAEA;  /* light tetra face */
  --brand-gray:   #8B879C;  /* subordinate wordmark gray */
  --brand-dark:   #28215C;  /* dark interpolation endpoint */
  --brand-light:  #B7B0F0;  /* light interpolation endpoint */

  /* Surfaces — warm cream with subtle purple tint */
  --bg: #F6F2EA;
  --bg-elev: #FFFBF2;
  --bg-deep: #ECE5D6;
  --bg-tint: #EFEAF7;        /* lavender-warmed band */
  --ink: #241C4A;
  --ink-soft: #3D3661;
  --ink-mute: #756EAC;
  --rule: rgba(36, 28, 74, 0.10);
  --rule-strong: rgba(36, 28, 74, 0.22);

  /* Aliases (layout continuity) */
  --copper: var(--brand-purple);
  --copper-deep: #3F378A;
  --copper-soft: rgba(83, 74, 183, 0.10);

  --sage: #5B7A65;
  --sage-deep: #3F5648;
  --sage-soft: rgba(91, 122, 101, 0.10);

  --amber: #B8853B;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(26, 31, 46, 0.06), 0 0 0 1px rgba(26, 31, 46, 0.04);
  --shadow: 0 4px 14px -2px rgba(26, 31, 46, 0.08), 0 0 0 1px rgba(26, 31, 46, 0.05);
  --shadow-lg: 0 24px 60px -20px rgba(26, 31, 46, 0.18), 0 0 0 1px rgba(26, 31, 46, 0.06);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'ss01' on, 'cv02' on;
  min-height: 100vh;
  overflow-x: hidden;
}

.serif { font-family: 'Newsreader', 'Source Serif 4', Georgia, serif; }
.mono  { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' on; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 980px; margin: 0 auto; padding: 0 32px; }

a { color: var(--ink); }
.link {
  color: var(--copper);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.link:hover { border-bottom-color: var(--copper); }

/* ---------- back link ---------- */
.back-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
  background: var(--ink);
  color: var(--bg-elev);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 600;
  opacity: 0.9;
  transition: opacity 0.2s, transform 0.2s;
}
.back-link:hover { opacity: 1; transform: translateY(-1px); }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 240, 0.85);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-row {
  display: flex;
  align-items: center;
  height: 72px;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.brand-wordmark {
  height: 38px;
  width: auto;
  display: block;
}
.brand-wordmark img,
.brand-wordmark object,
.brand-wordmark svg { height: 100%; width: auto; display: block; pointer-events: none; }

/* Compact stacked-mark variant for footer / small slots (static SVG + text) */
.brand-compact { display: inline-flex; align-items: center; gap: 10px; }
.brand-compact .mk { width: 28px; height: 28px; display: block; flex-shrink: 0; }
.brand-compact .mk img { width: 100%; height: 100%; display: block; }
.brand-compact .tx { display: inline-flex; align-items: baseline; font-size: 17px; letter-spacing: -0.025em; }
.brand-compact .tx strong { font-weight: 700; color: var(--ink); }
.brand-compact .tx .b { font-weight: 400; color: var(--brand-gray); }
.brand-compact .tx .a { font-weight: 700; color: var(--brand-purple); }

.nav-links { display: flex; gap: 28px; flex: 1; }
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }

.nav-ctas { display: flex; gap: 10px; align-items: center; }
.nav-ctas .sign-in {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav-ctas .sign-in:hover { color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 0.2s;
  letter-spacing: -0.005em;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg-elev);
}
.btn-primary:hover { background: var(--copper); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--bg-elev); }
.btn-text {
  color: var(--ink-soft);
  padding: 11px 4px;
}
.btn-text:hover { color: var(--copper); }
.btn-arrow { transition: transform 0.2s; display: inline-block; }
.btn:hover .btn-arrow { transform: translateX(2px); }

/* ---------- hero ---------- */
.hero { padding: 56px 0 64px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--copper);
  background: var(--copper-soft);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--copper);
}
.hero h1 {
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 22px;
}
.hero h1 .alt {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--copper);
}
.hero-sub {
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 32px;
  max-width: 540px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-trust {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-mute);
  flex-wrap: wrap;
}
.hero-trust .check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-trust .check::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sage-soft);
  background-image: radial-gradient(circle at center, var(--sage) 35%, transparent 36%);
}

/* ---------- product mock — Location P&L card ---------- */
.product-mock {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.product-mock::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  pointer-events: none;
  background: linear-gradient(135deg, rgba(184, 83, 10, 0.04), transparent 30%);
}
.mock-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
}
.mock-dots { display: flex; gap: 6px; }
.mock-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg-deep);
}
.mock-tab {
  font-size: 12.5px;
  color: var(--ink-mute);
  background: var(--bg);
  padding: 5px 12px;
  border-radius: 6px;
  margin-left: auto;
  font-weight: 500;
}
.mock-body { padding: 20px 24px 24px; }
.mock-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.mock-meta {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-bottom: 16px;
}
.mock-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--bg-deep);
  color: var(--ink-soft);
}
.chip.active {
  background: var(--ink);
  color: var(--bg-elev);
}
.chip .check::before {
  content: '\2713';
  margin-right: 4px;
  color: var(--sage);
}
.chip.active .check::before { color: var(--bg-elev); }

.report-table {
  width: 100%;
  font-size: 13.5px;
}
.report-table th, .report-table td {
  padding: 8px 6px;
  text-align: right;
}
.report-table th:first-child, .report-table td:first-child { text-align: left; }
.report-table thead th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--rule);
}
.report-table td { border-bottom: 1px solid var(--rule); }
.report-table tbody tr:last-child td { border-bottom: none; }
.report-table .child td:first-child { padding-left: 18px; color: var(--ink-soft); }
.report-table .rollup td {
  font-weight: 700;
  color: var(--ink);
  background: var(--copper-soft);
  border-top: 1px solid var(--copper);
  border-bottom: 1px solid var(--copper);
}
.report-table .rollup td:first-child::before {
  content: '\25B8';
  color: var(--copper);
  margin-right: 6px;
  font-size: 11px;
}
.report-table .num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.delta-up   { color: var(--sage); font-size: 11.5px; font-weight: 600; }
.delta-down { color: var(--copper-deep); font-size: 11.5px; font-weight: 600; }

/* ---------- trust strip / logos ---------- */
.trust-strip {
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.trust-strip-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  text-align: center;
  margin-bottom: 18px;
}
.trust-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-mute);
  opacity: 0.7;
}
.trust-logos span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.trust-logos .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.5; }

/* ---------- section primitives ---------- */
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 14px;
}
.section-title {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
  max-width: 740px;
}
.section-title .alt {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--copper);
}
.section-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
  margin-bottom: 48px;
}

/* ---------- ROI stats ---------- */
.roi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.roi-card {
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.roi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 32px;
  width: 32px; height: 3px;
  background: var(--copper);
  border-radius: 0 0 3px 3px;
}
.roi-value {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.roi-value .unit {
  font-size: 22px;
  font-weight: 500;
  color: var(--copper);
  margin-left: 4px;
}
.roi-label {
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 14px;
  line-height: 1.5;
  font-weight: 500;
}
.roi-card .roi-sub {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 8px;
}

/* ---------- multi-location story ---------- */
.story-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.story-narrative h3 {
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-bottom: 18px;
}
.story-narrative p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 14px; }
.story-narrative .bullets {
  list-style: none;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule);
  margin-top: 24px;
}
.story-narrative .bullets li {
  position: relative;
  padding: 8px 0 8px 28px;
  font-size: 15px;
  color: var(--ink-soft);
}
.story-narrative .bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 14px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--sage-soft);
  background-image: radial-gradient(circle at center, var(--sage) 35%, transparent 36%);
}

/* ---------- reports gallery ---------- */
.reports-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.report-card {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.2s, transform 0.2s;
}
.report-card:hover { border-color: var(--copper); transform: translateY(-1px); }
.report-card.featured {
  background: var(--ink);
  color: var(--bg-elev);
  border-color: var(--ink);
}
.report-card .icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.report-card.featured .icon { background: rgba(255, 252, 245, 0.1); }
.report-card .icon::before {
  content: '';
  width: 14px;
  height: 12px;
  background:
    linear-gradient(var(--ink-soft), var(--ink-soft)) 0 0/100% 1.5px no-repeat,
    linear-gradient(var(--ink-soft), var(--ink-soft)) 0 50%/70% 1.5px no-repeat,
    linear-gradient(var(--ink-soft), var(--ink-soft)) 0 100%/85% 1.5px no-repeat;
}
.report-card.featured .icon::before { background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) 0 0/100% 1.5px no-repeat,
    linear-gradient(var(--bg-elev), var(--bg-elev)) 0 50%/70% 1.5px no-repeat,
    linear-gradient(var(--bg-elev), var(--bg-elev)) 0 100%/85% 1.5px no-repeat;
}
.report-card .name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.report-card .badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--copper);
  color: var(--bg-elev);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
}

/* ---------- integrations rail ---------- */
.integrations-list {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.integration-row {
  display: grid;
  grid-template-columns: 56px 1fr 180px 100px;
  gap: 20px;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid var(--rule);
  transition: background 0.15s;
}
.integration-row:last-child { border-bottom: none; }
.integration-row:hover { background: var(--bg-deep); }
.integration-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.04em;
  color: var(--bg-elev);
}
.icon-plaid { background: linear-gradient(140deg, #000, #1a1a1a); }
.icon-intacct { background: linear-gradient(140deg, #C8102E, #8C0B20); }
.icon-fx { background: linear-gradient(140deg, var(--copper), var(--copper-deep)); }
.icon-mcp { background: linear-gradient(140deg, var(--brand-purple), var(--brand-ink)); }
.icon-translate { background: linear-gradient(140deg, var(--sage), var(--sage-deep)); }
.icon-csv { background: linear-gradient(140deg, var(--ink), var(--ink-soft)); }
.integration-name { font-weight: 700; font-size: 17px; letter-spacing: -0.015em; }
.integration-desc { font-size: 13.5px; color: var(--ink-mute); margin-top: 2px; }
.integration-meta { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
.integration-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
}
.status-live { color: var(--sage); }
.status-roadmap { color: var(--copper); }

/* ---------- AI roadmap timeline ---------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rule);
  z-index: 0;
}
.timeline-card {
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 1;
}
.timeline-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--copper);
  border: 4px solid var(--bg);
  margin: -36px auto 16px;
  position: relative;
  z-index: 2;
}
.timeline-quarter {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper);
  text-align: center;
  margin-bottom: 8px;
}
.timeline-title {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-align: center;
  margin-bottom: 8px;
}
.timeline-desc {
  font-size: 13px;
  color: var(--ink-mute);
  text-align: center;
  line-height: 1.5;
}

/* ---------- customer scenarios ---------- */
.scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.scenario {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.scenario-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 14px;
}
.scenario-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.scenario-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 20px;
  flex: 1;
}
.scenario-quote {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.scenario-quote-by {
  margin-top: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- open source band ---------- */
.os-band {
  background: var(--ink);
  color: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.os-band::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 60%; height: 180%;
  background: radial-gradient(ellipse, var(--copper), transparent 60%);
  opacity: 0.15;
  pointer-events: none;
}
.os-content { position: relative; z-index: 1; }
.os-content h3 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-bottom: 14px;
}
.os-content h3 .alt { font-family: 'Newsreader', serif; font-style: italic; color: var(--copper); font-weight: 500; }
.os-content p { font-size: 16.5px; color: rgba(250, 247, 240, 0.75); max-width: 540px; }
.os-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.os-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(250, 247, 240, 0.08);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.os-badge .badge-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  background: var(--copper);
  color: var(--bg-elev);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ---------- FAQ ---------- */
.faq-list {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q .icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--copper);
  transition: background 0.2s, transform 0.2s;
}
.faq-item[open] .faq-q .icon { background: var(--copper); color: var(--bg-elev); transform: rotate(45deg); }
.faq-a {
  padding: 0 28px 24px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.faq-a .strong { color: var(--ink); font-weight: 600; }

/* ---------- MCP snapshots ---------- */
.mcp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.mcp-card {
  background: #14122B;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -22px rgba(36, 28, 74, 0.45), 0 0 0 1px rgba(36, 28, 74, 0.18);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  line-height: 1.65;
  overflow: hidden;
  position: relative;
}
.mcp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-lav), transparent);
}
.mcp-head {
  background: #1B1638;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid rgba(177, 170, 234, 0.12);
  font-size: 12px;
  color: #B7B0E0;
}
.mcp-head .d { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; flex-shrink: 0; }
.mcp-head .d.y { background: #FEBC2E; }
.mcp-head .d.g { background: #28C840; }
.mcp-head .t {
  margin-left: auto;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  color: #E4DFFF;
  letter-spacing: -0.005em;
}
.mcp-head .t .badge {
  background: var(--brand-purple);
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mcp-body { padding: 20px 22px 22px; color: #DCD8F0; }
.mcp-user {
  background: rgba(83, 74, 183, 0.18);
  border-left: 2px solid var(--brand-purple);
  padding: 10px 14px;
  margin-bottom: 16px;
  border-radius: 0 8px 8px 0;
  color: #F2EFFF;
}
.mcp-user .u {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-lav);
  margin-bottom: 4px;
  font-weight: 700;
}
.mcp-tool {
  background: rgba(177, 170, 234, 0.06);
  border: 1px solid rgba(177, 170, 234, 0.14);
  padding: 9px 13px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.6;
}
.mcp-tool .h { color: #C5BFE0; font-size: 11px; margin-bottom: 4px; }
.mcp-tool .h::before { content: '⚡  '; color: #F4C242; }
.mcp-tool code { color: #B7B0F0; font-size: 11.5px; word-break: break-word; }
.mcp-assistant {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  color: #F2EFFF;
  line-height: 1.55;
}
.mcp-assistant .num {
  font-family: 'JetBrains Mono', monospace;
  color: #7DD3A8;
  font-variant-numeric: tabular-nums;
}
.mcp-assistant em {
  color: var(--brand-lav);
  font-style: normal;
  font-weight: 600;
}
.mcp-assistant .delta-up { color: #7DD3A8; font-family: 'JetBrains Mono', monospace; font-weight: 600; }

/* ---------- final CTA ---------- */
.cta-band {
  text-align: center;
  padding: 112px 0;
}
.cta-band h2 {
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin-bottom: 18px;
}
.cta-band h2 .alt {
  font-family: 'Newsreader', serif;
  font-style: italic;
  color: var(--copper);
  font-weight: 500;
}
.cta-band p {
  font-size: 17.5px;
  color: var(--ink-soft);
  margin-bottom: 36px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.cta-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elev);
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 14px;
  color: var(--ink-mute);
}
.cta-actions .label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.005em;
}
.cta-actions .label .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-purple);
  box-shadow: 0 0 0 4px rgba(83, 74, 183, 0.14);
}
.cta-fine {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--ink-mute);
}

/* ---------- footer ---------- */
.footer {
  background: var(--bg-deep);
  padding: 64px 0 32px;
  border-top: 1px solid var(--rule);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 36px;
  margin-bottom: 48px;
}
.footer-bio { font-size: 14px; color: var(--ink-soft); max-width: 320px; margin-top: 14px; }
.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.footer-col li { padding: 4px 0; font-size: 14px; }
.footer-col a { color: var(--ink-soft); transition: color 0.2s; }
.footer-col a:hover { color: var(--copper); }
.footer-fine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--ink-mute);
}

/* ---------- reveal animation ---------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; }
.reveal.in { animation: fade-up 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; gap: 36px; }
  .roi-grid, .reports-gallery, .scenarios { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline::before { display: none; }
  .timeline-marker { margin-top: 0; }
  .integration-row { grid-template-columns: 48px 1fr 100px; gap: 14px; }
  .integration-meta { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .mcp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .container, .container-narrow { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-ctas .sign-in { display: none; }
  .roi-grid, .reports-gallery, .scenarios, .timeline { grid-template-columns: 1fr; }
  .hero { padding: 40px 0; }
  .section { padding: 64px 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .integration-row { grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 20px; }
  .integration-row > :nth-child(3), .integration-row > :nth-child(4) { display: none; }
  .roi-value { font-size: 44px; }
  .brand-wordmark { height: 32px; }
  .cta-actions { flex-direction: column; padding: 8px; gap: 8px; }
  .cta-actions .label { padding: 4px 8px; }
}