/* ==========================================================================
   WorkGenesis — AI Automation for Business
   Design system. Premium B2B / enterprise. White background.
   ========================================================================== */

:root {
  /* Surface */
  --bg: #ffffff;
  --soft: #f7f9fc;
  --soft-2: #eef2f8;

  /* Ink */
  --ink: #0b1220;
  --ink-2: #333c52;
  --muted: #626c82;
  --faint: #8b94a7;

  /* Lines */
  --line: #e4e8f0;
  --line-2: #eef1f6;

  /* Brand — one confident blue, used sparingly */
  --brand: #2547f0;
  --brand-dark: #1a34c4;
  --brand-soft: #edf1fe;

  /* Functional accents (data states only, never decoration) */
  --teal: #0f9e8e;
  --teal-soft: #e6f6f3;
  --amber: #b8760a;
  --amber-soft: #fdf3e3;
  --rose: #d6455c;
  --rose-soft: #fdecef;
  --slate: #64748b;
  --slate-soft: #f1f5f9;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --sh-1: 0 1px 2px rgba(11, 18, 32, .05), 0 2px 8px rgba(11, 18, 32, .04);
  --sh-2: 0 2px 6px rgba(11, 18, 32, .05), 0 12px 32px rgba(11, 18, 32, .07);
  --sh-3: 0 24px 64px rgba(11, 18, 32, .12);

  --max: 1200px;
  --nav-h: 70px;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--ink); letter-spacing: -.03em; line-height: 1.1; }
h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); }
h3 { font-size: 1.16rem; letter-spacing: -.018em; line-height: 1.3; }
h4 { font-size: 1rem; letter-spacing: -.01em; }
p  { margin: 0; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 840px; }

.section { padding: 92px 0; }
.section--tight { padding: 62px 0; }
.section--soft { background: var(--soft); }
.section--line { border-top: 1px solid var(--line); }

.eyebrow {
  display: block; font-size: .76rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 16px;
}
.eyebrow--muted { color: var(--faint); }

.lead { color: var(--muted); font-size: 1.09rem; line-height: 1.62; }
.small { font-size: .88rem; color: var(--muted); }

.head { max-width: 720px; margin-bottom: 48px; }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.head h2 + .lead { margin-top: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: .96rem; letter-spacing: -.01em; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(37,71,240,.3); }
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--sh-1); }
.btn--ghost:hover { border-color: #c9d0de; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #1b2436; }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: #eef2f8; }
.btn--outline-white { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--outline-white:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn--lg { padding: 15px 28px; font-size: 1rem; }
.btn--block { width: 100%; }

.tlink {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--brand); font-weight: 600; font-size: .95rem;
}
.tlink svg { transition: transform .16s ease; }
.tlink:hover svg { transform: translateX(3px); }

/* ---------- Nav bar + mega menu ---------- */
.nav-bar {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease;
}
.nav-bar.is-stuck { border-color: var(--line); }
.nav-bar__inner { height: var(--nav-h); display: flex; align-items: center; gap: 30px; }

.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.09rem; letter-spacing: -.035em; }
.logo__mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--ink);
  display: grid; place-items: center; color: #fff;
}
.logo__dot { color: var(--brand); font-weight: 600; }

.mainnav { display: flex; align-items: center; gap: 2px; }
.mainnav__item { position: relative; }
.mainnav__link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border: 0; background: transparent; border-radius: 8px;
  font-size: .94rem; font-weight: 500; color: var(--ink-2);
  transition: color .14s ease, background .14s ease;
}
.mainnav__link:hover, .mainnav__item.is-open > .mainnav__link { color: var(--ink); background: var(--soft-2); }
.mainnav__link.is-active { color: var(--brand); }
.mainnav__link svg { transition: transform .18s ease; opacity: .55; }
.mainnav__item.is-open > .mainnav__link svg { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 12px); left: 0; transform: translateY(-6px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 10px; z-index: 100;
  max-width: calc(100vw - 32px);
  opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* Invisible bridge across the 12px gap between the nav item and the panel.
   Without it the pointer leaves the item on the way down and the menu shuts
   before you can reach it. */
.mega::before {
  content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.mainnav__item.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
/* Menus near the right edge of the bar open right-aligned */
.mega--narrow { left: auto; right: 0; }
.mega--wide { width: 760px; }
.mega--mid { width: 560px; }
.mega--narrow { width: 260px; }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega__grid--1 { grid-template-columns: 1fr; }

.mega__link { display: flex; gap: 12px; padding: 13px; border-radius: var(--r); transition: background .14s ease; }
.mega__link:hover { background: var(--soft); }
.mega__link i {
  width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.mega__link b { display: block; font-size: .92rem; font-weight: 600; letter-spacing: -.01em; }
.mega__link span { display: block; font-size: .81rem; color: var(--muted); line-height: 1.45; margin-top: 2px; }

.mega__foot {
  margin-top: 6px; padding: 14px 13px; border-top: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mega__foot span { font-size: .85rem; color: var(--muted); }

.nav-bar__cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-bar__cta .btn { padding: 10px 18px; }
.nav-login { font-size: .94rem; font-weight: 500; color: var(--ink-2); }
.nav-login:hover { color: var(--brand); }

.burger {
  display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; align-items: center; justify-content: center;
}
.burger span { display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .18s ease, top .18s ease;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { top: 0; transform: rotate(45deg); }
.burger.is-open span::after { top: 0; transform: rotate(-45deg); }

.drawer { display: none; border-top: 1px solid var(--line); background: #fff; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
.drawer.is-open { display: block; }
.drawer__inner { padding: 14px 24px 28px; }
.drawer__group + .drawer__group { margin-top: 6px; }
.drawer__title {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 2px; border: 0; background: transparent; border-bottom: 1px solid var(--line-2);
  font-size: 1rem; font-weight: 600; color: var(--ink);
}
.drawer__title svg { transition: transform .18s ease; opacity: .5; }
.drawer__group.is-open .drawer__title svg { transform: rotate(180deg); }
.drawer__list { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.drawer__list a { display: block; padding: 11px 2px 11px 14px; font-size: .94rem; color: var(--muted); }
.drawer__flat { display: block; padding: 14px 2px; border-bottom: 1px solid var(--line-2); font-weight: 600; }
.drawer .btn { margin-top: 20px; }

/* ---------- Hero ---------- */
.hero { padding: 76px 0 0; position: relative; }
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 560px; z-index: -1;
  background: radial-gradient(900px 420px at 50% -10%, rgba(37,71,240,.07), transparent 62%);
}
.hero__inner { max-width: 800px; }
.hero--center .hero__inner { margin: 0 auto; text-align: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lead { font-size: 1.19rem; max-width: 660px; }
.hero--center .lead { margin-left: auto; margin-right: auto; }
.hero__actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero--center .hero__actions { justify-content: center; }
.hero__sub { margin-top: 18px; font-size: .89rem; color: var(--faint); }

.tagline {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-1);
  font-size: .85rem; font-weight: 500; color: var(--ink-2);
}
.tagline b {
  background: var(--ink); color: #fff; padding: 3px 9px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
}

/* ---------- Trust bar ---------- */
.trustbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--soft); }
.trustbar__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trustbar__cell { padding: 26px 24px; border-left: 1px solid var(--line); }
.trustbar__cell:first-child { border-left: 0; }
.trustbar__cell b { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.trustbar__cell span { display: block; font-size: .85rem; color: var(--muted); margin-top: 3px; }

/* ---------- Product console (interactive demo) ---------- */
.console { border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--sh-3); overflow: hidden; }
.console__chrome {
  display: flex; align-items: center; gap: 8px; padding: 13px 18px;
  border-bottom: 1px solid var(--line); background: var(--soft);
}
.console__dot { width: 10px; height: 10px; border-radius: 50%; background: #d5dae5; }
.console__path {
  margin-left: 10px; font-family: var(--mono); font-size: .75rem; color: var(--muted);
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px 12px;
}
.console__live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600; color: var(--teal); }
.console__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.console__body { padding: 22px; overflow-x: auto; }
.console__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.console__head h3 { font-size: 1.02rem; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.tabs--center { justify-content: center; }
.tab {
  padding: 9px 16px; border-radius: 9px; border: 1px solid var(--line); background: #fff;
  font-size: .9rem; font-weight: 500; color: var(--ink-2); transition: all .14s ease;
}
.tab:hover { border-color: #c9d0de; }
.tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }

.pill-tag {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px; background: var(--slate-soft); color: var(--slate);
}
.pill-tag--brand { background: var(--brand-soft); color: var(--brand); }
.pill-tag--teal { background: var(--teal-soft); color: var(--teal); }

/* Data table */
.dt { width: 100%; border-collapse: collapse; min-width: 660px; font-size: .91rem; }
.dt th {
  text-align: left; font-size: .69rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; padding: 0 12px 11px;
}
.dt td { padding: 12px; border-top: 1px solid var(--line-2); vertical-align: middle; }
.dt tr td:first-child { font-weight: 600; }
.dt--right td:last-child, .dt--right th:last-child { text-align: right; }

.state { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: .78rem; font-weight: 600; }
.state--ok { background: var(--teal-soft); color: var(--teal); }
.state--run { background: var(--amber-soft); color: var(--amber); }
.state--stop { background: var(--rose-soft); color: var(--rose); }
.state--idle { background: var(--slate-soft); color: var(--slate); }
.state--brand { background: var(--brand-soft); color: var(--brand); }

.meter { display: block; height: 6px; border-radius: 99px; background: var(--soft-2); overflow: hidden; min-width: 88px; }
.meter i { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.meter--teal i { background: var(--teal); }

.face {
  width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: .68rem; font-weight: 700; color: #fff; background: var(--slate);
}

/* Call console */
.callbox { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-width: 620px; }
.callbox__panel { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.callbox__label { font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 12px; }
.callbox__row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line-2); font-size: .9rem; }
.callbox__row:first-of-type { border-top: 0; }
.callbox__row span { color: var(--muted); }
.callbox__row b { font-weight: 600; text-align: right; }
.wave { display: flex; align-items: center; gap: 3px; height: 40px; margin: 4px 0 14px; }
.wave i { flex: 1; background: var(--brand); border-radius: 2px; opacity: .8; }

.transcript { display: grid; gap: 9px; }
.bubble { max-width: 88%; padding: 10px 14px; border-radius: 12px; font-size: .87rem; line-height: 1.5; }
.bubble--them { background: var(--soft-2); border-bottom-left-radius: 3px; }
.bubble--ai { background: var(--brand); color: #fff; margin-left: auto; border-bottom-right-radius: 3px; }
.bubble__who { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: 3px; font-weight: 700; }

/* Workflow strip — the min-width only applies inside the horizontally
   scrollable console body, never inside a plain page column. */
.flow { display: grid; gap: 9px; }
.console__body .flow { min-width: 380px; }
.flow__node {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: .89rem;
}
.flow__node i {
  width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center;
  font-style: normal; font-size: .72rem; font-weight: 700; background: var(--brand-soft); color: var(--brand);
}
.flow__node b { font-weight: 600; }
.flow__node em { font-style: normal; color: var(--muted); margin-left: auto; font-size: .82rem; }
.flow__link { display: grid; place-items: center; color: #ccd3e0; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card--hover:hover { border-color: #ccd4e4; box-shadow: var(--sh-2); transform: translateY(-2px); }
.card p { color: var(--muted); font-size: .95rem; }
.card__ico {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); margin-bottom: 4px;
}
.card__ico--ink { background: var(--soft-2); color: var(--ink); }
.card__num {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ink); color: #fff; font-weight: 700; font-size: .9rem; margin-bottom: 6px;
}
.card__list { display: grid; gap: 8px; margin-top: 2px; }
.card__list li { font-size: .89rem; color: var(--ink-2); display: flex; gap: 9px; align-items: flex-start; }
.card__list li svg { flex: none; margin-top: 4px; color: var(--brand); }
.card__foot { margin-top: auto; padding-top: 16px; }

/* Solution family card */
.family { padding: 30px; }
.family__top { display: flex; align-items: center; gap: 12px; }
.family__top i { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--ink); color: #fff; flex: none; }
.family__kicker { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.family h3 { font-size: 1.32rem; margin-top: 4px; }
.family__caps { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.chipx {
  font-size: .79rem; padding: 5px 11px; border-radius: 7px;
  background: var(--soft); border: 1px solid var(--line-2); color: var(--ink-2);
}

/* Problem picker */
.picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.picker__item {
  display: flex; align-items: flex-start; gap: 14px; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.picker__item:hover { border-color: var(--brand); box-shadow: var(--sh-2); }
.picker__item i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.picker__item b { display: block; font-size: .98rem; font-weight: 600; letter-spacing: -.01em; }
.picker__item span { display: block; font-size: .86rem; color: var(--muted); margin-top: 3px; }
.picker__item em { display: block; font-style: normal; font-size: .78rem; color: var(--brand); font-weight: 600; margin-top: 9px; }

/* Ready-to-deploy list */
.deploy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.deploy__item {
  display: flex; flex-direction: column; gap: 6px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  transition: border-color .16s ease, background .16s ease;
}
.deploy__item:hover { border-color: #c9d0de; background: var(--soft); }
.deploy__item b { font-size: .94rem; font-weight: 600; letter-spacing: -.01em; }
.deploy__item span { font-size: .77rem; color: var(--faint); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* By business function */
.func { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.func__col { padding: 28px; border-left: 1px solid var(--line); }
.func__col:first-child { border-left: 0; }
.func__col h4 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.func__col li { padding: 9px 0; border-top: 1px solid var(--line-2); font-size: .92rem; }
.func__col li:first-child { border-top: 0; }
.func__col a:hover { color: var(--brand); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.step { padding-top: 22px; border-top: 2px solid var(--ink); }
.step b { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 9px; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: .93rem; color: var(--muted); }

/* Integrations */
.integrations { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.integration {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: 20px 12px; display: grid; place-items: center; gap: 8px; text-align: center;
  font-size: .83rem; font-weight: 600; color: var(--ink-2); transition: border-color .16s ease;
}
.integration:hover { border-color: #c9d0de; }
.integration i {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  background: var(--soft-2); color: var(--ink); font-size: .78rem; font-weight: 700; font-style: normal;
}

/* Proof / placeholders */
.proof-slot {
  border: 1px dashed var(--line); border-radius: var(--r-lg); padding: 34px 26px;
  background: var(--soft); text-align: center;
}
.proof-slot b { display: block; font-size: .95rem; font-weight: 600; }
.proof-slot span { display: block; font-size: .86rem; color: var(--muted); margin-top: 6px; }

.logo-strip { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; }
.logo-strip span { font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em; color: #9aa3b5; }

/* Quote */
.quote { border-left: 2px solid var(--brand); padding-left: 24px; }
.quote p { font-size: 1.12rem; line-height: 1.6; color: var(--ink-2); }
.quote__by { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.quote__by b { font-size: .92rem; display: block; }
.quote__by span { font-size: .84rem; color: var(--muted); }

/* Split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split > * { min-width: 0; }
.split--rev .split__media { order: -1; }
.split + .split { margin-top: 88px; }
.split__media { border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--sh-2); padding: 22px; }
.split__list { display: grid; gap: 12px; margin-top: 24px; }
.split__list li { display: flex; gap: 11px; align-items: flex-start; font-size: .98rem; color: var(--ink-2); }
.split__list li svg { flex: none; margin-top: 5px; color: var(--brand); }

.mediahead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mediahead h4 { font-size: .92rem; }
.mediahead em { font-style: normal; font-size: .78rem; color: var(--faint); }

/* Outcome stats */
.outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.outcome { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.outcome b { display: block; font-size: 1.9rem; font-weight: 700; letter-spacing: -.04em; color: var(--ink); }
.outcome span { display: block; font-size: .89rem; color: var(--muted); margin-top: 4px; }

/* ---------- Accessibility & friction ---------- */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 0 0 10px 10px;
  font-size: .92rem; font-weight: 600; transition: top .16s ease;
}
.skip:focus { top: 0; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px;
}

/* Persistent CTA on small screens */
.mobilebar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); gap: 10px;
}
.mobilebar .btn { flex: 1; }
.mobilebar__call {
  flex: none; width: 48px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px; color: var(--ink);
}

/* Back to top */
.totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); display: grid; place-items: center;
  box-shadow: var(--sh-2); opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.totop.is-on { opacity: 1; visibility: visible; }
.totop:hover { transform: translateY(-2px); }

/* ---------- Trust components ---------- */
.commit { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.commit__row { display: grid; grid-template-columns: 46px 1fr 210px; gap: 22px; padding: 24px 26px; border-top: 1px solid var(--line); align-items: start; }
.commit__row:first-child { border-top: 0; }
.commit__row > i {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--teal-soft); color: var(--teal); font-style: normal;
}
.commit__row h3 { font-size: 1.03rem; margin-bottom: 6px; }
.commit__row p { font-size: .94rem; color: var(--muted); }
.commit__where {
  font-size: .8rem; color: var(--ink-2); background: var(--soft);
  border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 12px;
}
.commit__where b { display: block; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }

.docs { display: grid; gap: 10px; }
.doc {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
.doc > svg { flex: none; color: var(--brand); }
.doc b { font-size: .95rem; font-weight: 600; }
.doc span { font-size: .85rem; color: var(--muted); display: block; margin-top: 2px; }
.doc em { margin-left: auto; font-style: normal; font-size: .8rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }

/* Values the client must supply before launch */
.fill {
  background: var(--amber-soft); color: var(--amber); border: 1px dashed rgba(184,118,10,.45);
  border-radius: 6px; padding: 1px 8px; font-size: .9em; font-weight: 600; font-style: normal;
}

.nope { display: grid; gap: 12px; }
.nope li { display: flex; gap: 13px; align-items: flex-start; font-size: .98rem; color: var(--ink-2); }
.nope li svg { flex: none; margin-top: 4px; color: var(--rose); }

/* ---------- Download band ---------- */
.download {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 30px; background: #fff;
}
.download__ico {
  width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center;
  background: var(--ink); color: #fff;
}
.download h3 { font-size: 1.18rem; margin-bottom: 6px; }
.download p { font-size: .95rem; color: var(--muted); }
.download__meta { font-size: .82rem; color: var(--faint); margin-top: 8px; }

/* ---------- Operating model strip ---------- */
.model { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.model__phase { padding: 30px 28px; border-left: 1px solid var(--line); position: relative; }
.model__phase:first-child { border-left: 0; }
.model__phase b {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}
.model__phase b i {
  width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-style: normal; font-size: .68rem;
}
.model__phase h3 { margin-bottom: 8px; }
.model__phase p { font-size: .93rem; color: var(--muted); }
.model__phase span.gate {
  display: inline-block; margin-top: 14px; padding: 5px 11px; border-radius: 6px;
  background: var(--soft); border: 1px solid var(--line-2); font-size: .8rem; color: var(--ink-2);
}

/* ---------- ROI estimator ---------- */
.calc { display: grid; grid-template-columns: 1fr 330px; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.calc__in { padding: 30px; display: grid; gap: 20px; align-content: start; }
.calc__row { display: grid; gap: 8px; }
.calc__row label { font-size: .9rem; font-weight: 600; color: var(--ink-2); display: flex; justify-content: space-between; gap: 12px; }
.calc__row label b { color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; }
.calc__row input[type=range] { width: 100%; accent-color: var(--brand); }
.calc__row small { font-size: .8rem; color: var(--faint); }
.calc__out { padding: 30px; background: var(--ink); color: #fff; display: grid; align-content: start; gap: 6px; }
.calc__out .k { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 700; }
.calc__out .big { font-size: 2.5rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.calc__out .sub { font-size: .9rem; color: rgba(255,255,255,.68); margin-bottom: 18px; }
.calc__line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: .87rem; }
.calc__line span { color: rgba(255,255,255,.6); }
.calc__line b { font-weight: 600; font-variant-numeric: tabular-nums; }
.calc__note { font-size: .78rem; color: rgba(255,255,255,.5); margin-top: 18px; line-height: 1.5; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.faq__item { border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.faq__q {
  width: 100%; border: 0; background: transparent; text-align: left; padding: 19px 22px;
  font-weight: 600; font-size: 1rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.faq__q svg { flex: none; color: var(--faint); transition: transform .2s ease; }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); color: var(--brand); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq__a p { padding: 0 22px 21px; color: var(--muted); font-size: .96rem; }

/* ---------- Pricing ---------- */
.pmodel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pmodel__card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.pmodel__card b.k { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.pmodel__card h3 { font-size: 1.2rem; }
.pmodel__card p { color: var(--muted); font-size: .94rem; }
.pmodel__card ul { display: grid; gap: 7px; margin-top: 4px; }
.pmodel__card li { font-size: .88rem; color: var(--ink-2); display: flex; gap: 8px; }
.pmodel__card li::before { content: '·'; color: var(--faint); }

.toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--soft-2); }
.toggle button { border: 0; background: transparent; padding: 8px 18px; border-radius: 7px; font-weight: 600; font-size: .88rem; color: var(--muted); }
.toggle button.is-active { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }

.tablecard { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.tablecard__head { padding: 20px 22px; border-bottom: 1px solid var(--line); background: var(--soft); }
.tablecard__head h3 { font-size: 1.05rem; }
.tablecard__head p { font-size: .88rem; color: var(--muted); margin-top: 4px; }
.tablecard__body { padding: 18px 22px 22px; overflow-x: auto; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: .96rem; color: var(--ink); background: #fff;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,71,240,.12);
}
.field textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: .82rem; color: var(--muted); }
.form-ok { display: none; padding: 14px 16px; border-radius: 10px; background: var(--teal-soft); color: #0a7d70; font-size: .92rem; font-weight: 600; }
.form-ok.is-visible { display: block; }
.field.has-err input, .field.has-err select, .field.has-err textarea { border-color: var(--rose); }
.field .err { display: none; font-size: .8rem; font-weight: 600; color: var(--rose); }
.field.has-err .err { display: block; }
.optional { font-weight: 500; color: var(--faint); }
/* Honeypot: reachable to bots, invisible and unfocusable for people. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.stepper { display: flex; gap: 8px; margin-bottom: 22px; }
.stepper__dot { flex: 1; height: 3px; border-radius: 99px; background: var(--soft-2); }
.stepper__dot.is-done { background: var(--brand); }
.step-label { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.fstep[hidden] { display: none; }

/* ---------- CTA band ---------- */
.cta {
  border-radius: var(--r-xl); padding: 62px 48px; text-align: center; color: #fff;
  background: var(--ink); position: relative; overflow: hidden;
}
.cta::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(700px 300px at 50% 0%, rgba(37,71,240,.35), transparent 65%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; max-width: 660px; margin: 0 auto 14px; }
.cta p { color: rgba(255,255,255,.72); max-width: 560px; margin: 0 auto 30px; font-size: 1.04rem; }
.cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Page hero (inner pages) ---------- */
.phero { padding: 64px 0 48px; border-bottom: 1px solid var(--line); background: var(--soft); }
.phero__inner { max-width: 800px; }
.phero h1 { font-size: clamp(2rem, 3.8vw, 3rem); margin: 14px 0 18px; }
.crumb { font-size: .84rem; color: var(--muted); }
.crumb a:hover { color: var(--brand); }
.phero__actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* Article (case study) */
.article { max-width: 760px; }
.article h2 { font-size: 1.5rem; margin: 40px 0 14px; }
.article h3 { margin: 28px 0 10px; }
.article p { color: var(--ink-2); margin-bottom: 14px; }
.article ul { display: grid; gap: 9px; margin: 14px 0 20px; }
.article ul li { display: flex; gap: 10px; color: var(--ink-2); font-size: .98rem; }
.article ul li svg { flex: none; margin-top: 5px; color: var(--brand); }
.metabar { display: flex; gap: 34px; flex-wrap: wrap; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metabar div b { display: block; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.metabar div span { font-size: .95rem; font-weight: 600; }

/* Sticky aside */
.withaside { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; }
.aside { position: sticky; top: 96px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; background: #fff; box-shadow: var(--sh-1); }
.aside h3 { font-size: 1.05rem; margin-bottom: 10px; }
.aside p { font-size: .92rem; color: var(--muted); margin-bottom: 18px; }
.aside ul { display: grid; gap: 9px; margin-bottom: 20px; }
.aside li { font-size: .88rem; color: var(--ink-2); display: flex; gap: 8px; }
.aside li svg { flex: none; margin-top: 4px; color: var(--teal); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 66px 0 30px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
.footer__about p { color: var(--muted); font-size: .92rem; margin-top: 16px; max-width: 300px; }
.footer h4 { font-size: .76rem; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); margin-bottom: 15px; }
.footer li { margin-bottom: 9px; }
.footer li a { color: var(--ink-2); font-size: .91rem; }
.footer li a:hover { color: var(--brand); }
.socials { display: flex; gap: 9px; margin-top: 20px; }
.socials a { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); }
.socials a:hover { border-color: var(--brand); color: var(--brand); }
.footer__bottom {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  color: var(--muted); font-size: .86rem;
}
.footer__bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav-login { display: none; }
  .mainnav__link { padding: 9px 10px; font-size: .91rem; }
  .mega--wide { width: 660px; }
}

@media (max-width: 1000px) {
  .commit__row { grid-template-columns: 40px 1fr; }
  .commit__where { grid-column: 2; }
  .model { grid-template-columns: 1fr; }
  .model__phase { border-left: 0; border-top: 1px solid var(--line); }
  .model__phase:first-child { border-top: 0; }
  .calc { grid-template-columns: 1fr; }
  .mainnav, .nav-bar__cta { display: none; }
  .burger { display: flex; }
  .grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split--rev .split__media { order: 0; }
  .split + .split { margin-top: 60px; }
  .func { grid-template-columns: repeat(2, 1fr); }
  .func__col:nth-child(3) { border-left: 0; }
  .func__col:nth-child(n+3) { border-top: 1px solid var(--line); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .integrations { grid-template-columns: repeat(4, 1fr); }
  .picker { grid-template-columns: repeat(2, 1fr); }
  .deploy { grid-template-columns: repeat(2, 1fr); }
  .withaside { grid-template-columns: 1fr; gap: 34px; }
  .aside { position: static; }
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__about { grid-column: 1 / -1; }
  .trustbar__grid { grid-template-columns: repeat(2, 1fr); }
  .trustbar__cell:nth-child(3) { border-left: 0; }
  .trustbar__cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .outcomes { grid-template-columns: repeat(2, 1fr); }
  .pmodel { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .section { padding: 58px 0; }
  .section--tight { padding: 42px 0; }
  .hero { padding-top: 44px; }
  .grid--2, .grid--3, .grid--4, .grid--5,
  .picker, .deploy, .steps, .form__row, .callbox { grid-template-columns: 1fr; }
  .callbox { min-width: 0; }
  .func { grid-template-columns: 1fr; }
  .func__col { border-left: 0; border-top: 1px solid var(--line); }
  .func__col:first-child { border-top: 0; }
  .integrations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outcome { padding: 18px; }
  .outcome b { font-size: 1.4rem; overflow-wrap: anywhere; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta { padding: 44px 22px; }
  .hero__actions .btn, .phero__actions .btn { width: 100%; }
  .metabar { gap: 20px; }
  .console__body { padding: 16px; }
  .quote { padding-left: 18px; }
  .commit__row { padding: 20px; gap: 16px; }
  .download { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .download .btn { width: 100%; }
  .doc { flex-wrap: wrap; }
  .doc em { margin-left: 0; width: 100%; }
  /* Persistent CTA sits above the footer on phones */
  .mobilebar { display: flex; }
  body { padding-bottom: 74px; }
  .totop { bottom: 82px; right: 14px; }
}