:root {
  --ink: #080b0f;
  --ink-2: #11161d;
  --muted: #5f6874;
  --muted-2: #66707c;
  --paper: #ffffff;
  --soft: #f5f6f8;
  --soft-2: #eef1f5;
  --line: #e3e6ea;
  --blue: #0669d8;
  --blue-dark: #0459b7;
  --blue-soft: #eaf3ff;
  --ocean: #0e3a5c;
  --success: #1f8a58;
  --warning: #b76b00;
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 36px;
  --shadow-sm: 0 10px 28px rgba(12, 20, 32, .06);
  --shadow: 0 28px 80px rgba(12, 20, 32, .13);
  --container: 1180px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
::selection { background: #cfe5ff; color: #07101c; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(6,105,216,.35);
  outline-offset: 3px;
}


.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  z-index: 9999;
  background: var(--ink);
  color: white;
  padding: 10px 14px;
  border-radius: 10px;
}
.skip-link:focus { transform: translateY(0); }

.container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}
.narrow { width: min(calc(100% - 40px), 820px); margin-inline: auto; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-color: rgba(16,20,26,.08);
  box-shadow: 0 4px 18px rgba(8,12,18,.03);
}
.nav {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.brand img { width: 34px; height: 27px; object-fit: contain; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  font-size: 14px;
  color: #353c45;
}
.nav-links a { position: relative; padding: 9px 0; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 2px;
  height: 1.5px;
  background: var(--ink);
  transition: left .2s ease, right .2s ease;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { left: 0; right: 0; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-menu-btn span,
.nav-menu-btn span::before,
.nav-menu-btn span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-menu-btn span { position: relative; }
.nav-menu-btn span::before,
.nav-menu-btn span::after { content: ""; position: absolute; left: 0; }
.nav-menu-btn span::before { top: -5px; }
.nav-menu-btn span::after { top: 5px; }
body.nav-open .nav-menu-btn span { background: transparent; }
body.nav-open .nav-menu-btn span::before { transform: translateY(5px) rotate(45deg); }
body.nav-open .nav-menu-btn span::after { transform: translateY(-5px) rotate(-45deg); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 21px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease), background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { color: white; background: var(--blue); box-shadow: 0 10px 26px rgba(6,105,216,.18); }
.btn-primary:hover { background: var(--blue-dark); box-shadow: 0 14px 30px rgba(6,105,216,.25); }
.btn-dark { color: white; background: var(--ink); }
.btn-dark:hover { background: #1a2028; }
.btn-light { color: var(--ink); background: white; border-color: var(--line); }
.btn-light:hover { border-color: #c9ced5; }
.btn-ghost { color: var(--ink); background: transparent; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn svg { width: 17px; height: 17px; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-weight: 600;
  font-size: 16px;
}
.text-link svg { width: 17px; height: 17px; transition: transform .2s ease; }
.text-link:hover svg { transform: translateX(4px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .095em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.display {
  margin: 0;
  font-size: clamp(58px, 8.2vw, 112px);
  line-height: .92;
  letter-spacing: -.072em;
  font-weight: 690;
}
.page-display {
  margin: 0;
  font-size: clamp(50px, 6.6vw, 88px);
  line-height: .96;
  letter-spacing: -.064em;
  font-weight: 680;
}
.section-title {
  margin: 0;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 670;
}
.card-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 650;
}
.lead {
  max-width: 760px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.45;
  letter-spacing: -.018em;
}
.body-lg { color: var(--muted); font-size: 19px; line-height: 1.65; }
.muted { color: var(--muted); }
.kicker { color: var(--blue); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }

.hero {
  position: relative;
  padding: 168px 0 88px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  right: -280px;
  top: -270px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(60,145,238,.14), rgba(60,145,238,0) 70%);
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 2; text-align: center; }
.hero-copy .lead { margin-inline: auto; }
.hero-actions { margin-top: 36px; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-note { margin: 18px 0 0; color: var(--muted-2); font-size: 14px; }

.hero-stage {
  position: relative;
  width: min(100%, 1100px);
  margin: 76px auto 0;
  min-height: 690px;
}
.hero-stage::before,
.hero-stage::after {
  content: "";
  position: absolute;
  left: 50%; top: 49%;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(6,105,216,.12);
  border-radius: 50%;
  pointer-events: none;
}
.hero-stage::before { width: 760px; height: 760px; }
.hero-stage::after { width: 980px; height: 980px; }
.orca-float {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  width: 148px;
  filter: drop-shadow(0 20px 24px rgba(8,12,18,.12));
  z-index: 4;
}
.command-shell {
  position: absolute;
  z-index: 3;
  inset: 48px 60px 0;
  padding: 14px;
  border-radius: 38px;
  background: linear-gradient(145deg, #242a33, #090b0f 55%);
  box-shadow: 0 48px 100px rgba(6,11,18,.25), inset 0 0 0 1px rgba(255,255,255,.09);
}
.command-window {
  height: 100%;
  overflow: hidden;
  border-radius: 27px;
  background: #0d1117;
  color: white;
  border: 1px solid rgba(255,255,255,.08);
}
.command-topbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #b8c0cb;
  font-size: 13px;
}
.window-dots { display: flex; gap: 7px; }
.window-dots i { width: 9px; height: 9px; display: block; border-radius: 50%; background: #303741; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; color: #c9d2dd; }
.live-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #43c488; box-shadow: 0 0 0 5px rgba(67,196,136,.12); }
.command-grid { display: grid; grid-template-columns: 1.3fr .72fr; min-height: 602px; }
.command-main { padding: 30px; border-right: 1px solid rgba(255,255,255,.08); }
.command-side { padding: 24px; background: rgba(255,255,255,.02); }
.ui-label { color: #778290; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.goal-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-top: 12px; }
.goal-row h3 { margin: 0; max-width: 550px; font-size: 27px; line-height: 1.16; letter-spacing: -.035em; }
.status-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 999px; background: rgba(67,196,136,.12); color: #7ae1ae; font-size: 12px; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.progress-track { height: 4px; margin: 26px 0 28px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.progress-track span { display: block; width: 76%; height: 100%; background: linear-gradient(90deg, #277ce7, #7cb6ff); border-radius: inherit; }
.run-list { display: grid; gap: 11px; }
.run-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(255,255,255,.025); }
.run-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.06); color: #b8c4d1; }
.run-icon.done { background: rgba(67,196,136,.12); color: #72d8a6; }
.run-icon.active { background: rgba(39,124,231,.16); color: #78b7ff; }
.run-item strong { display: block; font-size: 13px; font-weight: 600; }
.run-item small { display: block; margin-top: 3px; color: #76808d; font-size: 11px; }
.run-time { color: #697481; font-size: 11px; }
.approval-box { margin-top: 18px; padding: 17px; border: 1px solid rgba(108,170,255,.22); border-radius: 16px; background: rgba(20,91,173,.12); }
.approval-box-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.approval-box h4 { margin: 0; font-size: 14px; }
.approval-box p { margin: 8px 0 14px; color: #9ea9b7; font-size: 12px; line-height: 1.45; }
.approval-actions { display: flex; gap: 8px; }
.ui-btn { border: 0; border-radius: 9px; padding: 8px 11px; background: #277ce7; color: white; font-size: 11px; font-weight: 650; }
.ui-btn.secondary { background: rgba(255,255,255,.07); color: #c8d0da; }
.side-section + .side-section { margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); }
.agent-stack { display: grid; gap: 10px; margin-top: 13px; }
.agent-row { display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #1b2430; color: #b9c7d8; font-size: 11px; font-weight: 700; }
.avatar.blue { background: #123c69; color: #9acaff; }
.avatar.gold { background: #513c19; color: #f1cd8c; }
.agent-row strong { display: block; font-size: 12px; }
.agent-row small { display: block; color: #727d89; font-size: 10px; margin-top: 3px; }
.memory-card { margin-top: 13px; padding: 15px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.memory-card p { margin: 0; color: #a8b2bf; font-size: 12px; line-height: 1.5; }
.memory-card .memory-tag { display: inline-block; margin-bottom: 9px; color: #7eb8fa; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.tool-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.tool-chip { padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.05); color: #9fa9b5; font-size: 10px; }
.floating-card {
  position: absolute;
  z-index: 5;
  min-width: 220px;
  padding: 15px;
  border: 1px solid rgba(16,22,30,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 48px rgba(17,29,44,.12);
}
.floating-card strong { display: block; font-size: 13px; }
.floating-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.floating-card.one { left: 0; top: 184px; }
.floating-card.two { right: 0; bottom: 80px; }
.float-row { display: flex; align-items: center; gap: 10px; }
.float-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: var(--blue-soft); color: var(--blue); }
.float-icon svg { width: 17px; height: 17px; }

.logo-rail { padding: 24px 0 86px; }
.logo-rail p { text-align: center; margin: 0 0 24px; color: var(--muted-2); font-size: 12px; letter-spacing: .075em; text-transform: uppercase; font-weight: 700; }
.logo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.logo-chip { padding: 12px 17px; border: 1px solid var(--line); border-radius: 999px; background: white; color: #464f5a; font-size: 13px; font-weight: 600; }

.section { padding: 118px 0; }
.section-soft { background: var(--soft); }
.section-dark { background: var(--ink); color: white; }
.section-head { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 80px; margin-bottom: 62px; }
.section-head p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.section-dark .section-head p { color: #9ea7b3; }
.statement { padding: 130px 0; text-align: center; }
.statement h2 { max-width: 1050px; margin: 0 auto; font-size: clamp(48px, 7vw, 96px); line-height: .98; letter-spacing: -.065em; font-weight: 670; }
.statement h2 span { color: #a3abb5; }
.product-proof {
  padding-top: 98px;
  background: linear-gradient(180deg,#fff,#f6f9fc);
}
.product-shot {
  margin: 0;
  padding: 12px;
  border: 1px solid #dce5ef;
  border-radius: 34px;
  background: white;
  box-shadow: 0 34px 100px rgba(12, 28, 48, .13);
}
.product-shot img {
  width: 100%;
  height: auto;
  border-radius: 24px;
}
.product-shot figcaption {
  margin: 12px 10px 6px;
  color: var(--muted-2);
  font-size: 11px;
  text-align: center;
}
.what-is { padding-top: 96px; }
.os-strip {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}
.os-strip > div {
  min-height: 230px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: white;
}
.os-strip span,
.pain-grid strong {
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.os-strip strong {
  display: block;
  margin-top: 84px;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.os-strip p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.pain-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  margin-top: 54px;
  text-align: left;
}
.pain-grid article {
  min-height: 220px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: white;
}
.pain-grid p {
  margin: 54px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.pillar-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.pillar-card { min-height: 340px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; box-shadow: 0 1px 0 rgba(0,0,0,.02); overflow: hidden; position: relative; }
.pillar-card:hover { box-shadow: var(--shadow-sm); }
.icon-box { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--soft); color: var(--ink); }
.icon-box.blue { background: var(--blue-soft); color: var(--blue); }
.icon-box svg { width: 22px; height: 22px; }
.pillar-card h3 { margin: 84px 0 12px; font-size: 31px; line-height: 1.05; letter-spacing: -.045em; }
.pillar-card p { max-width: 470px; margin: 0; color: var(--muted); line-height: 1.65; font-size: 16px; }
.pillar-number { position: absolute; right: 30px; top: 30px; color: #c3c8cf; font-size: 12px; font-weight: 700; letter-spacing: .1em; }

.system-showcase { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; align-items: stretch; }
.system-copy { padding: 54px; border-radius: var(--radius-lg); background: var(--ink); color: white; }
.system-copy h3 { margin: 0; font-size: 49px; line-height: 1; letter-spacing: -.055em; }
.system-copy p { margin: 22px 0 0; color: #a8b0bb; font-size: 17px; line-height: 1.65; }
.system-copy .text-link { margin-top: 32px; color: #8bc2ff; }
.system-map { padding: 38px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; min-height: 520px; display: flex; flex-direction: column; justify-content: center; }
.map-label { margin-bottom: 16px; color: var(--muted-2); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.map-flow { display: grid; grid-template-columns: 1fr 42px 1.2fr 42px 1fr; align-items: center; gap: 4px; }
.map-node { min-height: 128px; padding: 22px; border: 1px solid var(--line); border-radius: 21px; background: var(--soft); }
.map-node.primary { background: var(--ink); color: white; border-color: var(--ink); }
.map-node small { color: var(--muted-2); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.map-node strong { display: block; margin-top: 10px; font-size: 19px; letter-spacing: -.02em; }
.map-node p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.map-node.primary p { color: #9ca6b4; }
.map-arrow { color: #abb2bb; display: grid; place-items: center; }
.map-arrow svg { width: 22px; height: 22px; }
.map-agents { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }
.map-agent { padding: 9px; border-radius: 11px; background: rgba(255,255,255,.06); text-align: center; font-size: 10px; color: #c2cad4; }
.map-caption { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

.tabs-shell { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: white; }
.tabs-nav { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--line); background: #fafbfc; }
.tab-btn { border: 0; background: transparent; padding: 21px 16px; color: var(--muted); font-weight: 600; cursor: pointer; border-right: 1px solid var(--line); }
.tab-btn:last-child { border-right: 0; }
.tab-btn[aria-selected="true"] { color: var(--ink); background: white; box-shadow: inset 0 -2px 0 var(--blue); }
.tab-panel { display: none; grid-template-columns: .9fr 1.1fr; min-height: 480px; }
.tab-panel.active { display: grid; }
.tab-copy { padding: 54px; display: flex; flex-direction: column; justify-content: center; }
.tab-copy .kicker { margin-bottom: 16px; }
.tab-copy h3 { margin: 0; font-size: 44px; line-height: 1.03; letter-spacing: -.05em; }
.tab-copy p { margin: 20px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.tab-copy ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.tab-copy li { display: flex; align-items: center; gap: 10px; color: #39414b; font-size: 14px; }
.tab-copy li::before { content: "✓"; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 800; }
.tab-visual { position: relative; overflow: hidden; background: var(--soft); padding: 36px; display: grid; place-items: center; }
.work-card { width: min(100%, 470px); border: 1px solid #dfe3e9; border-radius: 24px; background: white; box-shadow: var(--shadow-sm); overflow: hidden; }
.work-card-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.work-card-head strong { font-size: 14px; }
.work-card-head span { font-size: 11px; color: var(--success); background: #e9f7f0; padding: 6px 8px; border-radius: 999px; }
.work-card-body { padding: 20px; display: grid; gap: 10px; }
.work-step { display: grid; grid-template-columns: 30px 1fr auto; gap: 11px; align-items: center; padding: 11px; border-radius: 12px; background: var(--soft); }
.work-step i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: white; color: var(--blue); font-style: normal; font-size: 12px; font-weight: 700; }
.work-step strong { display: block; font-size: 12px; }
.work-step small { display: block; margin-top: 2px; color: var(--muted-2); font-size: 10px; }
.work-step b { color: var(--success); font-size: 10px; font-weight: 700; }

.steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.steps-grid.three { grid-template-columns: repeat(3,1fr); margin-top: 44px; }
.step-card { position: relative; padding: 28px; border-radius: var(--radius); background: white; border: 1px solid var(--line); min-height: 285px; }
.step-no { color: var(--blue); font-size: 12px; font-weight: 750; letter-spacing: .1em; }
.step-card h3 { margin: 70px 0 12px; font-size: 24px; letter-spacing: -.035em; }
.step-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.security-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
.security-copy { position: sticky; top: 120px; }
.security-copy p { color: #9ea8b6; }
.security-list { display: grid; gap: 12px; }
.security-item { padding: 26px; border: 1px solid rgba(255,255,255,.09); border-radius: 21px; background: rgba(255,255,255,.035); }
.security-item-head { display: flex; align-items: center; gap: 14px; }
.security-item .icon-box { background: rgba(255,255,255,.07); color: white; }
.security-item h3 { margin: 0; font-size: 21px; letter-spacing: -.03em; }
.security-item p { margin: 12px 0 0 62px; color: #9ba5b2; font-size: 14px; line-height: 1.6; }

.integrations-panel { padding: 52px; border-radius: var(--radius-lg); background: var(--soft); }
.integrations-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-top: 38px; }
.integration { min-height: 92px; display: grid; place-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: white; color: #343c46; font-weight: 650; font-size: 14px; text-align: center; }
.integrations-note { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 14px; }

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { width: 100%; min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.faq-question svg { flex: 0 0 auto; width: 20px; height: 20px; transition: transform .25s ease; }
.faq-question[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.faq-answer > div { overflow: hidden; }
.faq-question[aria-expanded="true"] + .faq-answer { grid-template-rows: 1fr; }
.faq-answer p { max-width: 830px; margin: 0; padding: 0 0 28px; color: var(--muted); font-size: 16px; line-height: 1.65; }

.cta-band { padding: 110px 0; }
.cta-card { position: relative; overflow: hidden; padding: 80px 54px; border-radius: 42px; background: var(--ink); color: white; text-align: center; }
.cta-card::before,
.cta-card::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(127,190,255,.14); border-radius: 50%; }
.cta-card::before { width: 620px; height: 620px; }
.cta-card::after { width: 880px; height: 880px; }
.cta-card > * { position: relative; z-index: 2; }
.cta-card img { width: 100px; margin: 0 auto 28px; filter: drop-shadow(0 15px 20px rgba(0,0,0,.25)); }
.cta-card h2 { max-width: 850px; margin: 0 auto; font-size: clamp(44px, 6vw, 76px); line-height: .98; letter-spacing: -.06em; }
.cta-card p { max-width: 650px; margin: 24px auto 0; color: #a9b2be; font-size: 18px; line-height: 1.6; }
.cta-card .hero-actions { margin-top: 32px; }

.site-footer { padding: 64px 0 30px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.45fr repeat(3,1fr); gap: 60px; }
.footer-brand p { max-width: 330px; margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.footer-col h3 { margin: 0 0 18px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.footer-col a { display: block; width: fit-content; margin: 11px 0; color: #343b44; font-size: 14px; }
.footer-col a:hover { color: var(--blue); }
.footer-bottom { margin-top: 58px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; color: var(--muted-2); font-size: 12px; }

/* Interior pages */
.page-hero { position: relative; padding: 176px 0 94px; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; width: 600px; height: 600px; left: 50%; bottom: -430px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(29,127,235,.15), rgba(29,127,235,0) 70%); }
.page-hero .lead { max-width: 760px; }
.page-hero.center { text-align: center; }
.page-hero.center .lead { margin-inline: auto; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page-hero.center .page-hero-actions { justify-content: center; }

.product-hero-stage { margin-top: 72px; padding: 22px; border-radius: 36px; background: var(--ink); box-shadow: var(--shadow); }
.product-diagram { min-height: 420px; padding: 50px; border-radius: 24px; border: 1px solid rgba(255,255,255,.08); background: #0d1117; color: white; display: grid; grid-template-columns: 1fr 56px 1.4fr 56px 1fr; align-items: center; gap: 6px; }
.product-diagram .node { min-height: 190px; padding: 24px; border-radius: 20px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); }
.product-diagram .node.primary { background: #0b5fbe; border-color: #1b74ce; }
.product-diagram .node small { color: #7f8b99; font-weight: 700; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.product-diagram .node.primary small { color: #a9d0fb; }
.product-diagram .node h3 { margin: 12px 0 0; font-size: 22px; letter-spacing: -.03em; }
.product-diagram .node p { margin: 10px 0 0; color: #929daa; font-size: 12px; line-height: 1.5; }
.product-diagram .node.primary p { color: #c4ddf7; }
.product-diagram .arrow { display: grid; place-items: center; color: #53606e; }
.product-diagram .arrow svg { width: 24px; }
.micro-nodes { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 18px; }
.micro-node { padding: 10px; border-radius: 10px; background: rgba(255,255,255,.07); color: #c2cad3; font-size: 10px; text-align: center; }

.module-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.module-card { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); min-height: 285px; background: white; }
.module-card h3 { margin: 64px 0 11px; font-size: 25px; letter-spacing: -.035em; }
.module-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.module-card .icon-box { background: var(--blue-soft); color: var(--blue); }

.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.feature-copy { padding: 58px; border-radius: var(--radius-lg); background: var(--soft); }
.feature-copy h3 { margin: 0; font-size: 49px; line-height: 1; letter-spacing: -.055em; }
.feature-copy p { margin: 22px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.feature-copy ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.feature-copy li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.feature-copy li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-top: 7px; flex: 0 0 auto; }
.feature-visual { border-radius: var(--radius-lg); border: 1px solid var(--line); background: white; padding: 34px; min-height: 500px; display: grid; place-items: center; }
.memory-visual { width: min(100%, 460px); display: grid; gap: 11px; }
.memory-entry { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.memory-entry span { display: inline-block; margin-bottom: 9px; color: var(--blue); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.memory-entry strong { display: block; font-size: 14px; }
.memory-entry p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.memory-entry:nth-child(2) { margin-left: 44px; }
.memory-entry:nth-child(3) { margin-right: 32px; }

/* Solutions */
.solution-index { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 44px; }
.solution-index a { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.solution-index a:hover { border-color: #b8c9dd; box-shadow: var(--shadow-sm); }
.solution-index svg { width: 17px; }
.solution-row { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; padding: 88px 0; border-top: 1px solid var(--line); }
.solution-row:first-child { border-top: 0; }
.solution-side { position: sticky; top: 120px; align-self: start; }
.solution-side h2 { margin: 0; font-size: 44px; line-height: 1; letter-spacing: -.05em; }
.solution-side p { margin: 18px 0 0; color: var(--muted); line-height: 1.6; }
.workflow-stack { display: grid; gap: 14px; }
.workflow-card { padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.workflow-card-top { display: flex; justify-content: space-between; gap: 20px; }
.workflow-card h3 { margin: 0; font-size: 23px; letter-spacing: -.035em; }
.workflow-badge { flex: 0 0 auto; color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 7px 10px; font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.workflow-card > p { margin: 11px 0 0; color: var(--muted); line-height: 1.6; font-size: 14px; }
.workflow-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 22px; }
.workflow-meta div { padding: 14px; border-radius: 13px; background: var(--soft); }
.workflow-meta small { color: var(--muted-2); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.workflow-meta strong { display: block; margin-top: 6px; font-size: 11px; line-height: 1.4; }
.industry-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.industry-card { min-height: 260px; padding: 28px; border-radius: var(--radius); background: white; border: 1px solid var(--line); }
.industry-card h3 { margin: 80px 0 10px; font-size: 25px; letter-spacing: -.035em; }
.industry-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Security */
.principles-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.principle-card { padding: 36px; min-height: 330px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; }
.principle-card h3 { margin: 78px 0 12px; font-size: 29px; letter-spacing: -.04em; }
.principle-card p { margin: 0; color: var(--muted); line-height: 1.65; }
.audit-table { overflow: hidden; border: 1px solid var(--line); border-radius: 24px; }
.audit-row { display: grid; grid-template-columns: 1.1fr 1fr .8fr .7fr; gap: 0; border-bottom: 1px solid var(--line); }
.audit-row:last-child { border-bottom: 0; }
.audit-row > div { padding: 17px 19px; border-right: 1px solid var(--line); font-size: 12px; }
.audit-row > div:last-child { border-right: 0; }
.audit-row.header { background: var(--soft); color: var(--muted-2); font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.audit-status { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-weight: 700; }
.audit-status.review { color: var(--warning); }
.audit-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.policy-flow { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; align-items: center; }
.policy-node { min-height: 145px; padding: 19px; border: 1px solid var(--line); border-radius: 18px; background: white; display: flex; flex-direction: column; justify-content: space-between; }
.policy-node small { color: var(--blue); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.policy-node strong { font-size: 15px; line-height: 1.3; }
.policy-node.primary { background: var(--ink); color: white; border-color: var(--ink); }
.policy-node.primary small { color: #84c1ff; }

/* Contact */
.contact-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: start; }
.contact-copy { position: sticky; top: 120px; }
.contact-copy h1 { font-size: clamp(49px, 6vw, 76px); }
.contact-points { margin-top: 38px; display: grid; gap: 15px; }
.contact-point { display: flex; gap: 13px; align-items: flex-start; }
.contact-point .icon-box { width: 40px; height: 40px; flex: 0 0 auto; }
.contact-point strong { display: block; font-size: 14px; }
.contact-point p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.form-card { padding: 40px; border: 1px solid var(--line); border-radius: 32px; background: white; box-shadow: var(--shadow-sm); }
.form-card h2 { margin: 0 0 8px; font-size: 30px; letter-spacing: -.04em; }
.form-card > p { margin: 0 0 28px; color: var(--muted); font-size: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 700; color: #343b45; }
.optional-label { color: var(--muted-2); font-weight: 500; font-size: 12px; }
.field input,
.field select,
.field textarea { width: 100%; border: 1px solid #d9dde3; border-radius: 12px; background: #fbfcfd; color: var(--ink); padding: 13px 14px; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.field textarea { min-height: 126px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: #7cb4f1; box-shadow: 0 0 0 4px rgba(6,105,216,.10); background: white; }
.form-consent { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 11px; line-height: 1.5; }
.form-consent input { margin-top: 2px; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.form-status { color: var(--success); font-size: 13px; font-weight: 600; }

.legal-wrap { padding: 158px 0 90px; }
.legal-wrap h1 { font-size: 56px; letter-spacing: -.05em; margin: 0; }
.legal-meta { margin: 13px 0 52px; color: var(--muted-2); font-size: 13px; }
.legal-content { color: #3e4650; font-size: 16px; line-height: 1.75; }
.legal-content h2 { margin: 42px 0 12px; color: var(--ink); font-size: 26px; letter-spacing: -.03em; }
.legal-content p { margin: 12px 0; }
.legal-note { padding: 18px; border-radius: 14px; background: #fff8e7; color: #72500c; border: 1px solid #f2dfad; font-size: 13px; }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.js .reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1020px) {
  .nav-links { gap: 18px; }
  .section-head { grid-template-columns: 1fr; gap: 24px; }
  .hero-stage { min-height: 620px; }
  .command-shell { inset-inline: 22px; }
  .floating-card.one { left: 8px; }
  .floating-card.two { right: 8px; }
  .system-showcase,
  .security-layout,
  .contact-layout { grid-template-columns: 1fr; }
  .security-copy,
  .contact-copy,
  .solution-side { position: static; }
  .module-grid { grid-template-columns: repeat(2,1fr); }
  .steps-grid { grid-template-columns: repeat(2,1fr); }
  .steps-grid.three { grid-template-columns: repeat(2,1fr); }
  .integrations-grid { grid-template-columns: repeat(4,1fr); }
  .solution-row { grid-template-columns: 1fr; gap: 34px; }
  .policy-flow { grid-template-columns: 1fr 1fr; }
  .product-diagram { grid-template-columns: 1fr; gap: 10px; }
  .product-diagram .arrow { transform: rotate(90deg); }
}

@media (max-width: 820px) {
  .site-header { background: rgba(255,255,255,.9); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
  .nav { height: 66px; }
  .nav-menu-btn { display: inline-flex; }
  .nav-actions .btn { display: none; }
  .nav-links {
    position: fixed;
    inset: 66px 0 0;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 28px 20px 50px;
    transform: translateX(100%);
    transition: transform .32s var(--ease);
  }
  body.nav-open .nav-links { transform: translateX(0); }
  .nav-links a { width: 100%; padding: 18px 4px; border-bottom: 1px solid var(--line); font-size: 20px; font-weight: 600; }
  .nav-links a::after { display: none; }
  .hero { padding-top: 132px; }
  .hero-stage { min-height: 575px; margin-top: 54px; }
  .command-shell { inset: 36px 0 0; border-radius: 28px; padding: 10px; }
  .command-window { border-radius: 20px; }
  .command-grid { grid-template-columns: 1fr; }
  .command-side { display: none; }
  .command-main { border-right: 0; padding: 22px; }
  .floating-card { display: none; }
  .orca-float { width: 112px; top: -22px; }
  .pillar-grid,
  .feature-split,
  .principles-grid { grid-template-columns: 1fr; }
  .tabs-nav { overflow-x: auto; display: flex; }
  .tab-btn { min-width: 150px; }
  .tab-panel.active { grid-template-columns: 1fr; }
  .tab-visual { min-height: 400px; }
  .integrations-grid { grid-template-columns: repeat(3,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .audit-table { overflow-x: auto; }
  .audit-row { min-width: 760px; }
  .solution-index { grid-template-columns: repeat(2,1fr); }
  .industry-grid { grid-template-columns: 1fr 1fr; }
  .workflow-meta { grid-template-columns: 1fr; }
  .system-map { min-height: auto; }
  .map-flow { grid-template-columns: 1fr; }
  .map-arrow { transform: rotate(90deg); padding: 6px; }
}

@media (max-width: 620px) {
  .container, .narrow { width: min(calc(100% - 28px), var(--container)); }
  .display { font-size: clamp(50px, 16vw, 72px); }
  .page-display { font-size: clamp(46px, 14vw, 65px); }
  .lead { font-size: 18px; }
  .hero-actions, .page-hero-actions { align-items: stretch; }
  .hero-actions .btn, .page-hero-actions .btn { width: 100%; }
  .hero-stage { min-height: 530px; }
  .command-shell { top: 34px; }
  .goal-row { display: block; }
  .goal-row h3 { font-size: 22px; }
  .status-pill { margin-top: 12px; }
  .run-item:nth-child(n+5) { display: none; }
  .approval-box { margin-top: 12px; }
  .section { padding: 86px 0; }
  .statement { padding: 95px 0; }
  .pillar-card { min-height: 300px; padding: 26px; }
  .pillar-card h3 { margin-top: 60px; }
  .system-copy, .tab-copy, .feature-copy { padding: 36px 26px; }
  .system-copy h3, .feature-copy h3 { font-size: 39px; }
  .system-map, .feature-visual { padding: 22px; }
  .steps-grid,
  .steps-grid.three,
  .module-grid,
  .integrations-grid,
  .industry-grid,
  .solution-index { grid-template-columns: 1fr; }
  .integrations-panel { padding: 30px 20px; }
  .integrations-note { align-items: flex-start; flex-direction: column; }
  .security-item p { margin-left: 0; }
  .cta-card { padding: 64px 24px; border-radius: 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
  .product-hero-stage { padding: 10px; }
  .product-diagram { padding: 28px 18px; }
  .form-card { padding: 28px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full, .form-consent, .form-actions { grid-column: auto; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .btn { width: 100%; }
  .policy-flow { grid-template-columns: 1fr; }
  .page-hero { padding-top: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}


/* ── Worka SOTA 2026 additions ───────────────────────────────────────────── */
.nav-links { gap: 23px; }
.mobile-only { display: none !important; }
.btn-invert { color: var(--ink); background: white; border-color: white; }
.btn-invert:hover { background: #f1f3f6; }
.eyebrow.light { color: #83bfff; }
.center { text-align: center; }
.center-link { margin-top: 36px; display: flex; justify-content: center; }
.scenario-label { margin: 18px 0 0; text-align: center; color: var(--muted-2); font-size: 11px; letter-spacing: .01em; }
.scenario-label.dark { color: #7f8996; }
.hero-home { padding-bottom: 0; }
.hero-home .hero-stage { margin-bottom: 30px; }
.approval-box.positive { border-color: rgba(67,196,136,.20); background: rgba(67,196,136,.08); }
.stack-rail { padding: 34px 0 78px; }
.stack-rail p { text-align: center; margin: 0 0 24px; color: var(--muted-2); font-size: 12px; letter-spacing: .075em; text-transform: uppercase; font-weight: 700; }
.stack-rail small { display: block; margin-top: 18px; text-align: center; color: #929aa4; font-size: 10px; }
.outcomes-grid { grid-template-columns: repeat(2,1fr); }

.action-story { overflow: hidden; }
.story-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; position: relative; }
.story-grid::before { content:""; position:absolute; left:8%; right:8%; top:29px; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(97,167,247,.35),rgba(255,255,255,.08)); }
.story-time { position: relative; min-height: 250px; padding: 26px; border: 1px solid rgba(255,255,255,.09); border-radius: 24px; background: rgba(255,255,255,.035); }
.story-time::before { content:""; width:9px; height:9px; position:absolute; top:25px; right:25px; border-radius:50%; background:#52606f; box-shadow:0 0 0 7px rgba(255,255,255,.035); }
.story-time.highlight { background: linear-gradient(145deg,rgba(16,102,205,.30),rgba(255,255,255,.035)); border-color:rgba(99,172,255,.28); }
.story-time.highlight::before { background:#67adff; box-shadow:0 0 0 7px rgba(83,157,244,.13); }
.story-time span { color:#79b9ff; font-size:12px; font-weight:750; letter-spacing:.08em; }
.story-time strong { display:block; margin-top:74px; font-size:21px; line-height:1.12; letter-spacing:-.03em; }
.story-time p { margin:11px 0 0; color:#909ba8; font-size:13px; line-height:1.6; }

.flow-preview-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.flow-preview-card { position:relative; min-height:330px; padding:34px; border:1px solid var(--line); border-radius:30px; background:white; transition:transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease; }
.flow-preview-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:#c8d5e4; }
.flow-preview-card > svg { position:absolute; right:30px; bottom:30px; width:22px; color:var(--blue); transition:transform .2s ease; }
.flow-preview-card:hover > svg { transform:translateX(5px); }
.flow-kicker { display:inline-flex; padding:7px 10px; border-radius:999px; background:var(--blue-soft); color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.flow-preview-card h3 { max-width:440px; margin:72px 0 12px; font-size:32px; line-height:1; letter-spacing:-.045em; }
.flow-preview-card p { max-width:500px; margin:0; color:var(--muted); line-height:1.65; }
.flow-result { display:block; margin-top:28px; color:#303740; font-size:12px; font-weight:700; }
.wedge-card {
  display: block;
  min-height: 360px;
  margin-bottom: 16px;
  border-color: rgba(6,105,216,.34);
  background:
    linear-gradient(135deg, rgba(6,105,216,.11), rgba(255,255,255,.92) 42%),
    white;
  box-shadow: 0 18px 46px rgba(6,105,216,.08);
}
.wedge-card h3 {
  max-width: 760px;
  margin-top: 88px;
  font-size: clamp(34px,4.6vw,58px);
  line-height: .98;
}
.wedge-card p { max-width: 760px; font-size: 17px; }
.secondary-flows { grid-template-columns: repeat(3,1fr); }
.secondary-flows .flow-preview-card { min-height: 300px; }
.human-section { background: linear-gradient(180deg,#fff,#f7f9fc); }
.people-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
}
.role-card {
  min-height: 300px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: white;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.role-avatar {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .03em;
}
.role-avatar.finance { background: linear-gradient(145deg,#0669d8,#0e3a5c); }
.role-avatar.ops { background: linear-gradient(145deg,#1f8a58,#0e3a5c); }
.role-avatar.sales { background: linear-gradient(145deg,#7a5cff,#0e3a5c); }
.role-avatar.control { background: linear-gradient(145deg,#11161d,#4a5565); }
.role-card h3 {
  margin: 92px 0 12px;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.04em;
}
.role-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.midmarket-panel { display:grid; grid-template-columns:.92fr 1.08fr; gap:40px; align-items:center; padding:65px; border-radius:42px; background:var(--ink); color:white; overflow:hidden; }
.midmarket-copy h2 { margin:0; max-width:590px; font-size:clamp(44px,5vw,70px); line-height:.98; letter-spacing:-.06em; }
.midmarket-copy > p:not(.eyebrow) { margin:24px 0 28px; max-width:580px; color:#9fa9b5; font-size:17px; line-height:1.65; }
.midmarket-copy .text-link { color:#8dc5ff; }
.complexity-map { position:relative; min-height:480px; }
.complexity-map::before,.complexity-map::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(111,179,255,.14); border-radius:50%; }
.complexity-map::before { width:300px; height:300px; }
.complexity-map::after { width:470px; height:470px; }
.complexity-core { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); width:180px; height:180px; display:grid; place-items:center; align-content:center; border-radius:50%; background:#075fbf; box-shadow:0 24px 80px rgba(0,0,0,.35); text-align:center; }
.complexity-core img { margin-bottom:12px; }
.complexity-core strong { font-size:17px; }
.complexity-core small { margin-top:6px; color:#b9d7f7; font-size:10px; }
.complexity-node { position:absolute; z-index:3; padding:11px 14px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:#171d25; color:#c9d1db; font-size:11px; box-shadow:0 12px 30px rgba(0,0,0,.2); }
.complexity-node.n1 { left:4%; top:14%; }.complexity-node.n2 { right:3%; top:16%; }.complexity-node.n3 { left:0; top:48%; }.complexity-node.n4 { right:0; top:48%; }.complexity-node.n5 { left:12%; bottom:12%; }.complexity-node.n6 { right:8%; bottom:12%; }

.section-soft .security-copy { position:static; }
.section-soft .security-copy p { color:var(--muted); }
.section-soft .security-item { border-color:var(--line); background:white; }
.section-soft .security-item .icon-box { background:var(--blue-soft); color:var(--blue); }
.section-soft .security-item p { color:var(--muted); }

.product-modules { grid-template-columns:repeat(3,1fr); }
.agent-orbit { position:relative; min-height:620px; border:1px solid rgba(255,255,255,.08); border-radius:38px; background:radial-gradient(circle at center,rgba(31,117,215,.2),transparent 45%); }
.agent-orbit::before,.agent-orbit::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.1); border-radius:50%; }
.agent-orbit::before { width:350px; height:350px; }.agent-orbit::after { width:540px; height:540px; }
.orbit-core { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); width:210px; height:210px; border-radius:50%; background:#0865ca; display:grid; place-items:center; align-content:center; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.3); }
.orbit-core img { margin-bottom:13px; }.orbit-core strong { font-size:17px; }.orbit-core small { margin-top:5px; color:#bad9f9; font-size:11px; }
.orbit-card { position:absolute; z-index:4; min-width:180px; padding:17px; border:1px solid rgba(255,255,255,.10); border-radius:17px; background:#161c24; box-shadow:0 16px 36px rgba(0,0,0,.25); }
.orbit-card span { color:#75b7ff; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.orbit-card strong { display:block; margin-top:6px; font-size:13px; }
.orbit-card.o1 { left:7%; top:16%; }.orbit-card.o2 { right:7%; top:16%; }.orbit-card.o3 { right:3%; bottom:17%; }.orbit-card.o4 { left:3%; bottom:17%; }.orbit-card.o5 { left:50%; bottom:4%; transform:translateX(-50%); }
.comparison-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.comparison-card { min-height:390px; padding:44px; border:1px solid var(--line); border-radius:34px; background:white; }
.comparison-label { display:inline-block; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.comparison-card h3 { margin:110px 0 15px; max-width:500px; font-size:38px; line-height:1.03; letter-spacing:-.05em; }
.comparison-card p { color:var(--muted); line-height:1.65; }.comparison-card .text-link { margin-top:22px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.metric-card { min-height:250px; padding:28px; border:1px solid var(--line); border-radius:24px; background:white; }
.metric-card small { color:var(--blue); font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.metric-card strong { display:block; margin-top:72px; font-size:24px; letter-spacing:-.035em; }
.metric-card p { margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }

.flow-catalog { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.flow-detail-card { padding:36px; border:1px solid var(--line); border-radius:32px; background:white; }
.flow-detail-head { display:flex; justify-content:space-between; align-items:center; }.flow-index { color:#bec4cc; font-size:12px; font-weight:800; letter-spacing:.1em; }
.flow-detail-card h3 { margin:56px 0 10px; font-size:34px; line-height:1; letter-spacing:-.045em; }
.flow-promise { min-height:50px; margin:0; color:var(--muted); font-size:16px; line-height:1.55; }
.flow-detail-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:22px; margin:28px 0; padding-top:24px; border-top:1px solid var(--line); }
.flow-detail-grid small { color:var(--muted-2); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.flow-detail-grid ul { margin:10px 0 0; padding:0; list-style:none; display:grid; gap:8px; }.flow-detail-grid li { position:relative; padding-left:14px; color:#39414a; font-size:12px; line-height:1.45; }.flow-detail-grid li::before { content:""; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--blue); }.flow-detail-grid p { margin:8px 0 18px; color:#39414a; font-size:12px; line-height:1.5; }
.selection-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.selection-grid.six { grid-template-columns:repeat(3,1fr); }
.selection-card { min-height:240px; padding:28px; border:1px solid var(--line); border-radius:24px; background:white; }.selection-card strong { display:block; margin-top:100px; font-size:20px; letter-spacing:-.025em; }.selection-card p { margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }

.solution-hub-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.solution-hub-card { position:relative; min-height:470px; padding:42px; border:1px solid var(--line); border-radius:36px; background:white; transition:transform .25s var(--ease), box-shadow .25s ease; }
.solution-hub-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-sm); }
.solution-hub-card > span:not(.icon-box) { display:block; margin-top:34px; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.solution-hub-card h2 { max-width:500px; margin:70px 0 16px; font-size:42px; line-height:1; letter-spacing:-.055em; }
.solution-hub-card p { max-width:510px; color:var(--muted); line-height:1.65; }
.solution-hub-card > strong { position:absolute; left:42px; bottom:36px; display:flex; align-items:center; gap:8px; color:var(--blue); font-size:14px; }.solution-hub-card > strong svg { width:17px; }
.handoff-chain { display:grid; grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr; align-items:center; gap:8px; padding:48px; border:1px solid var(--line); border-radius:32px; background:white; }
.handoff-chain > div { min-height:150px; padding:24px; border-radius:20px; background:var(--soft); }.handoff-chain span { color:var(--blue); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.handoff-chain strong { display:block; margin-top:60px; font-size:17px; }.handoff-chain i { color:#8d97a3; }.handoff-chain i svg { width:22px; }

.moment-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.moment-card { min-height:330px; padding:28px; border:1px solid var(--line); border-radius:26px; background:white; }
.moment-card > span { color:#b7bec7; font-size:11px; font-weight:800; letter-spacing:.1em; }.moment-card h3 { margin:80px 0 12px; font-size:25px; line-height:1.04; letter-spacing:-.04em; }.moment-card p { color:var(--muted); font-size:13px; line-height:1.6; }.moment-card strong { display:block; margin-top:24px; color:var(--blue); font-size:11px; }
.function-demo { display:grid; grid-template-columns:.75fr 1.25fr; gap:28px; align-items:center; }.function-demo-copy { padding-right:30px; }.function-demo-copy h2 { margin:0; font-size:clamp(42px,5vw,66px); line-height:.98; letter-spacing:-.06em; }.function-demo-copy > p:not(.eyebrow) { color:var(--muted); font-size:16px; line-height:1.65; }.demo-result { margin-top:36px; padding:20px; border-left:3px solid var(--blue); background:white; }.demo-result span { color:var(--muted-2); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.demo-result strong { display:block; margin-top:8px; font-size:16px; }
.command-window.compact { height:auto; box-shadow:var(--shadow); }.command-window.compact .command-main { border-right:0; padding:30px; }.command-window.compact .run-item { padding:17px; }
.dark-system-row { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }.dark-system-row span { padding:30px 16px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(255,255,255,.035); color:#bdc6d0; text-align:center; font-size:12px; font-weight:650; }.section-dark .center-link .text-link { color:#83bfff; }

.integration-category-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.integration-category { min-height:390px; padding:38px; border:1px solid var(--line); border-radius:32px; background:white; }.integration-category h3 { margin:62px 0 10px; font-size:31px; letter-spacing:-.045em; }.integration-category > p { color:var(--muted); line-height:1.6; }.integration-category > div:last-child { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }.integration-category > div span { padding:8px 10px; border-radius:9px; background:var(--soft); color:#424b56; font-size:11px; font-weight:650; }.integration-disclaimer { margin:20px 0 0; color:var(--muted-2); font-size:10px; text-align:center; }
.tool-router { display:grid; grid-template-columns:1fr 60px 1fr 60px 1.2fr; align-items:center; gap:8px; padding:45px; border:1px solid rgba(255,255,255,.09); border-radius:32px; background:rgba(255,255,255,.03); }.tool-router > i { color:#647282; text-align:center; }.tool-router > i svg { width:24px; }.tool-intent,.tool-policy,.tool-set { min-height:180px; padding:24px; border:1px solid rgba(255,255,255,.09); border-radius:20px; background:#151b23; }.tool-router span { color:#76b8ff; font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }.tool-router strong { display:block; margin-top:60px; font-size:16px; line-height:1.4; }.tool-set > div { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin-top:34px; }.tool-set b { padding:9px; border-radius:9px; background:rgba(255,255,255,.05); color:#aeb8c4; font-size:10px; font-weight:600; }

.autonomy-table { overflow:hidden; border:1px solid var(--line); border-radius:24px; }.autonomy-row { display:grid; grid-template-columns:.65fr 1fr 1.2fr 1fr; border-bottom:1px solid var(--line); }.autonomy-row:last-child { border-bottom:0; }.autonomy-row > div { padding:20px; border-right:1px solid var(--line); font-size:13px; line-height:1.45; }.autonomy-row > div:last-child { border-right:0; }.autonomy-row.header { background:var(--soft); color:var(--muted-2); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.level-dot { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; }.level-dot.green { background:#2fb374; }.level-dot.blue { background:#267fdc; }.level-dot.gold { background:#d99b32; }
.sandbox-diagram { display:grid; grid-template-columns:1fr 55px 1.5fr 55px 1fr; align-items:center; gap:8px; padding:50px; border:1px solid rgba(255,255,255,.09); border-radius:34px; }.sandbox-diagram > div { min-height:180px; padding:26px; border:1px solid rgba(255,255,255,.09); border-radius:20px; background:rgba(255,255,255,.035); }.sandbox-diagram > div span { color:#78b9ff; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }.sandbox-diagram > div strong { display:block; margin-top:70px; font-size:16px; }.sandbox-diagram > i { text-align:center; color:#687583; }.sandbox-diagram > i svg { width:24px; }.sandbox-core { background:linear-gradient(145deg,rgba(12,103,207,.35),rgba(255,255,255,.035))!important; }.sandbox-core small { display:block; margin-top:8px; color:#8e9aa7; font-size:10px; }

.implementation-roadmap { display:grid; gap:0; }.implementation-phase { position:relative; display:grid; grid-template-columns:90px 1fr 300px; gap:45px; padding:70px 0; border-top:1px solid var(--line); }.implementation-phase:first-child { border-top:0; }.phase-number { color:#b9c0c8; font-size:13px; font-weight:800; letter-spacing:.1em; }.implementation-phase h2 { margin:0; font-size:48px; line-height:1; letter-spacing:-.055em; }.implementation-phase > div > p:not(.eyebrow) { max-width:660px; color:var(--muted); line-height:1.65; }.implementation-phase ul { list-style:none; padding:0; margin:25px 0 0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.implementation-phase li { position:relative; padding-left:15px; color:#3a424c; font-size:13px; }.implementation-phase li::before { content:""; position:absolute; left:0; top:6px; width:6px; height:6px; border-radius:50%; background:var(--blue); }.implementation-phase aside { align-self:start; padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--soft); }.implementation-phase aside small { color:var(--blue); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.implementation-phase aside strong { display:block; margin-top:44px; font-size:17px; }.implementation-phase aside p { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.role-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.role-card { min-height:280px; padding:28px; border:1px solid var(--line); border-radius:25px; background:white; }.role-card.dark { background:var(--ink); color:white; }.role-card span { color:var(--blue); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }.role-card h3 { margin:85px 0 10px; font-size:23px; letter-spacing:-.035em; }.role-card p { color:var(--muted); font-size:13px; line-height:1.55; }.role-card.dark p { color:#929daa; }
.business-case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.business-case-card { padding:34px; border:1px solid var(--line); border-radius:30px; }.business-case-card > span { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }.business-case-card h3 { margin:75px 0 22px; font-size:28px; letter-spacing:-.04em; }.business-case-card ul { margin:0; padding:0; list-style:none; display:grid; gap:11px; }.business-case-card li { position:relative; padding-left:15px; color:var(--muted); font-size:13px; }.business-case-card li::before { content:""; position:absolute; left:0; top:6px; width:6px; height:6px; border-radius:50%; background:var(--blue); }
.readiness-list { list-style:none; padding:0; margin:0; border-top:1px solid rgba(255,255,255,.1); }.readiness-list li { display:grid; grid-template-columns:80px 1fr; gap:25px; padding:28px 0; border-bottom:1px solid rgba(255,255,255,.1); }.readiness-list span { color:#78b9ff; font-size:11px; font-weight:800; letter-spacing:.1em; }.readiness-list p { margin:0; color:#9aa5b2; line-height:1.6; }.readiness-list strong { color:white; }

.featured-resource { display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; padding:65px; border-radius:40px; background:var(--soft); }.featured-resource h2 { margin:0; max-width:690px; font-size:clamp(44px,5vw,70px); line-height:.98; letter-spacing:-.06em; }.featured-resource > div:first-child > p:not(.eyebrow) { max-width:600px; color:var(--muted); font-size:17px; line-height:1.65; }.featured-resource .btn { margin-top:20px; }.resource-cover { min-height:440px; padding:40px; border-radius:30px; background:linear-gradient(145deg,#0c1016,#12395f); color:white; display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--shadow); }.resource-cover span,.resource-cover small { color:#9db2c8; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.resource-cover strong { font-size:42px; line-height:.98; letter-spacing:-.055em; }
.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.resource-card { position:relative; min-height:410px; padding:34px; border:1px solid var(--line); border-radius:30px; background:white; transition:transform .25s var(--ease), box-shadow .25s ease; }.resource-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-sm); }.resource-card > span { color:var(--blue); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.resource-card h3 { margin:100px 0 13px; font-size:30px; line-height:1.02; letter-spacing:-.045em; }.resource-card p { color:var(--muted); font-size:14px; line-height:1.6; }.resource-card > strong { position:absolute; left:34px; bottom:30px; color:var(--blue); display:flex; align-items:center; gap:7px; font-size:13px; }.resource-card > strong svg { width:16px; }
.decision-tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.decision-tool { min-height:420px; padding:34px; border:1px solid var(--line); border-radius:30px; }.decision-tool > span { color:var(--blue); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }.decision-tool h3 { margin:72px 0 24px; font-size:28px; line-height:1.04; letter-spacing:-.04em; }.decision-tool ul { list-style:none; padding:0; margin:0; display:grid; gap:12px; }.decision-tool li { padding-bottom:12px; border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; }
.glossary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.glossary-item { min-height:250px; padding:28px; border:1px solid rgba(255,255,255,.09); border-radius:24px; background:rgba(255,255,255,.035); }.glossary-item h3 { margin:75px 0 10px; font-size:22px; letter-spacing:-.035em; }.glossary-item p { color:#96a1ae; font-size:13px; line-height:1.6; }

.article-hero { padding:170px 0 80px; background:linear-gradient(180deg,#fff,#f7f8fa); }.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:50px; color:var(--muted-2); font-size:12px; }.breadcrumbs a:hover { color:var(--blue); }.article-hero h1 { margin:0; font-size:clamp(48px,6.7vw,84px); line-height:.98; letter-spacing:-.064em; }.article-hero .lead { margin-top:30px; max-width:800px; }.article-meta { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:34px; color:var(--muted-2); font-size:11px; }.article-section { padding:90px 0 120px; }.article-layout { width:min(calc(100% - 40px),1060px); margin-inline:auto; display:grid; grid-template-columns:minmax(0,740px) 250px; gap:70px; align-items:start; }.article-body { min-width:0; color:#303842; font-size:17px; line-height:1.76; }.article-body h2 { scroll-margin-top:100px; margin:70px 0 18px; color:var(--ink); font-size:34px; line-height:1.1; letter-spacing:-.045em; }.article-body h3 { color:var(--ink); }.article-body p { margin:16px 0; }.article-body ol,.article-body ul { padding-left:23px; }.article-body li { margin:10px 0; }.answer-box { padding:28px; border-radius:22px; background:var(--ink); color:white; }.answer-box strong { color:#82c0ff; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }.answer-box p { margin:10px 0 0; color:#ccd4dd; font-size:18px; line-height:1.65; }.article-callout { margin:34px 0; padding:26px; border-left:3px solid var(--blue); background:var(--blue-soft); border-radius:0 18px 18px 0; }.article-callout h3 { margin:0; font-size:18px; }.article-callout p { margin:8px 0 0; color:#405064; }.article-checklist { list-style:none; padding:0!important; }.article-checklist li { position:relative; padding:14px 16px 14px 46px; border:1px solid var(--line); border-radius:14px; }.article-checklist li::before { content:"✓"; position:absolute; left:17px; top:14px; color:var(--blue); font-weight:800; }.article-table { overflow-x:auto; margin:28px 0; border:1px solid var(--line); border-radius:18px; }.article-table table { width:100%; border-collapse:collapse; min-width:620px; font-size:14px; }.article-table th,.article-table td { padding:15px 17px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }.article-table th { background:var(--soft); color:#4b5561; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }.article-table tr:last-child td { border-bottom:0; }.article-card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:26px 0; }.article-card-grid > div { padding:22px; border:1px solid var(--line); border-radius:18px; }.article-card-grid strong { color:var(--ink); }.article-card-grid p { margin:7px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }.article-toc { position:sticky; top:110px; padding:22px; border:1px solid var(--line); border-radius:18px; background:white; }.article-toc > strong { font-size:12px; }.article-toc ol { margin:14px 0 0; padding-left:20px; color:var(--muted); font-size:12px; line-height:1.5; }.article-toc li { margin:9px 0; }.article-toc a:hover { color:var(--blue); }.article-inline-cta { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; margin-top:70px; padding:34px; border-radius:26px; background:var(--soft); }.article-inline-cta span { color:var(--blue); font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }.article-inline-cta h2 { margin:14px 0 8px; font-size:28px; }.article-inline-cta p { margin:0; color:var(--muted); font-size:14px; }.scorecard { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:28px 0; }.scorecard > div { padding:18px; border:1px solid var(--line); border-radius:16px; }.scorecard span { color:var(--blue); font-size:10px; font-weight:800; }.scorecard strong { display:block; margin-top:30px; color:var(--ink); font-size:14px; }.scorecard p { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }

.contact-hero { padding:160px 0 100px; }.contact-prep { margin-top:38px; padding:24px; border-radius:20px; background:var(--soft); }.contact-prep strong { font-size:13px; }.contact-prep ol { margin:14px 0 0; padding-left:20px; color:var(--muted); font-size:13px; line-height:1.7; }.form-kicker { color:var(--blue)!important; font-size:10px!important; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }.honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }.form-consent a { color:var(--blue); text-decoration:underline; }.form-fallback { margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }.form-fallback span { color:var(--muted-2); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.form-fallback p { margin:7px 0 0; color:var(--muted); font-size:12px; }.form-fallback a { color:var(--blue); }.thank-you { min-height:86vh; padding:170px 0 100px; display:grid; place-items:center; }.thank-you img { margin:0 auto 22px; }.thank-you .lead { margin-inline:auto; }
.footer-grid { grid-template-columns:1.55fr repeat(4,1fr); gap:42px; }.footer-latam { display:block; margin-top:20px; color:var(--blue); font-size:11px; font-weight:700; }

@media (max-width: 1100px) {
  .nav-links { gap:16px; font-size:13px; }
  .story-grid,.moment-grid,.metric-grid,.role-grid,.pain-grid,.people-grid { grid-template-columns:repeat(2,1fr); }
  .story-grid::before { display:none; }
  .selection-grid { grid-template-columns:repeat(2,1fr); }
  .dark-system-row { grid-template-columns:repeat(3,1fr); }
  .implementation-phase { grid-template-columns:65px 1fr; }.implementation-phase aside { grid-column:2; }
  .footer-grid { grid-template-columns:1.3fr repeat(2,1fr); }.footer-brand { grid-row:span 2; }
  .scorecard { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 900px) {
  .midmarket-panel,.featured-resource,.function-demo { grid-template-columns:1fr; }
  .complexity-map { min-height:500px; }
  .product-modules,.resource-grid,.decision-tool-grid,.glossary-grid,.selection-grid.six,.secondary-flows { grid-template-columns:repeat(2,1fr); }
  .agent-orbit { min-height:700px; }.orbit-card.o1 { left:4%; top:8%; }.orbit-card.o2 { right:4%; top:8%; }.orbit-card.o3 { right:3%; bottom:15%; }.orbit-card.o4 { left:3%; bottom:15%; }
  .flow-catalog,.solution-hub-grid,.integration-category-grid,.comparison-grid { grid-template-columns:1fr; }
  .handoff-chain { grid-template-columns:1fr; }.handoff-chain > i { transform:rotate(90deg); text-align:center; }
  .tool-router,.sandbox-diagram { grid-template-columns:1fr; }.tool-router > i,.sandbox-diagram > i { transform:rotate(90deg); }.tool-router strong { margin-top:35px; }
  .autonomy-table { overflow-x:auto; }.autonomy-row { min-width:760px; }
  .business-case-grid { grid-template-columns:1fr; }
  .article-layout { grid-template-columns:1fr; }.article-toc { position:static; order:-1; }.article-toc ol { columns:2; }
}
@media (max-width: 820px) {
  .mobile-only { display:block!important; color:var(--blue)!important; }
  .story-time { min-height:220px; }
  .flow-preview-grid,.outcomes-grid,.os-strip { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }.footer-brand { grid-column:1/-1; grid-row:auto; }
}
@media (max-width: 680px) {
  .story-grid,.moment-grid,.metric-grid,.role-grid,.selection-grid,.product-modules,.resource-grid,.decision-tool-grid,.glossary-grid,.pain-grid,.people-grid,.secondary-flows { grid-template-columns:1fr; }
  .midmarket-panel,.featured-resource { padding:38px 24px; border-radius:30px; }.complexity-map { min-height:430px; }.complexity-map::after { width:390px; height:390px; }.complexity-node { font-size:9px; padding:9px 10px; }
  .agent-orbit { min-height:800px; }.agent-orbit::before { width:270px; height:270px; }.agent-orbit::after { width:390px; height:390px; }.orbit-card { min-width:150px; }.orbit-card.o1 { left:4%; top:5%; }.orbit-card.o2 { right:4%; top:22%; }.orbit-card.o3 { right:4%; bottom:21%; }.orbit-card.o4 { left:4%; bottom:5%; }.orbit-card.o5 { bottom:39%; left:3%; transform:none; }
  .flow-detail-grid { grid-template-columns:1fr; }.flow-detail-card { padding:27px; }.flow-detail-card h3 { font-size:30px; }
  .function-demo-copy { padding-right:0; }
  .implementation-phase { grid-template-columns:1fr; gap:20px; padding:55px 0; }.implementation-phase aside { grid-column:auto; }.implementation-phase ul { grid-template-columns:1fr; }
  .resource-cover { min-height:370px; }.resource-cover strong { font-size:36px; }
  .article-layout { width:min(calc(100% - 28px),1060px); }.article-hero { padding-top:135px; }.article-body { font-size:16px; }.article-body h2 { font-size:29px; }.article-card-grid { grid-template-columns:1fr; }.article-inline-cta { grid-template-columns:1fr; }.article-inline-cta .btn { width:100%; }.scorecard { grid-template-columns:1fr; }.article-toc ol { columns:1; }
  .footer-grid { grid-template-columns:1fr; }.footer-brand { grid-column:auto; }
  .dark-system-row { grid-template-columns:repeat(2,1fr); }
  .tool-router,.sandbox-diagram { padding:24px; }
  .form-card { border-radius:26px; }
}

/* Final 2026 polish: clarity, restraint, accessibility and responsive precision. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .18s;
  animation-timing-function: var(--ease);
}

html { scroll-padding-top: 92px; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #0a6fe8;
  outline-offset: 3px;
}

.hero { padding-top: 148px; }
.hero-stage { margin-top: 62px; }
.command-shell { top: 0; }
.hero-home .hero-stage { margin-bottom: 0; }
.hero-home + .scenario-label,
.hero-home .scenario-label { width: min(calc(100% - 40px), 760px); margin: 18px auto 0; }

/* Entrance effects never hide content or delay understanding. */
.reveal,
.js .reveal,
.js .reveal.visible { opacity: 1; transform: none; transition: none; }

.article-table:focus-visible { outline: 3px solid #0a6fe8; outline-offset: 4px; }
.faq-answer[hidden] { display: none; }
textarea { resize: vertical; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}

@media (max-width: 820px) {
  .nav-links { visibility: hidden; pointer-events: none; }
  body.nav-open .nav-links { visibility: visible; pointer-events: auto; }
  .hero-stage::before, .hero-stage::after { display: none; }
  .hero-stage { margin-top: 44px; }
  .command-shell { top: 0; }
  .hero-home + .scenario-label,
  .hero-home .scenario-label { width: min(calc(100% - 28px), 600px); }
}

@media (max-width: 620px) {
  .hero { padding-top: 122px; }
  .hero-note { max-width: 340px; margin-inline: auto; }
  .hero-stage { min-height: 510px; }
  .command-topbar { padding-inline: 16px; font-size: 11px; }
  .command-main { padding: 20px; }
  .scenario-label { font-size: 10px; line-height: 1.45; }
}

@media (prefers-contrast: more) {
  :root { --muted-2: #5f6874; --line: #c9ced5; }
  .btn-light, .module-card, .pillar-card, .step-card, .faq-item { border-color: #aeb6c0; }
}

@media (forced-colors: active) {
  .btn, .nav-menu-btn, .icon-box, .status-pill, .live-pill { forced-color-adjust: auto; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01ms; }
}


/* Final 2026 QA — contrast, legibility and interaction clarity */
.stack-rail small { color: #66707c; font-size: 11px; }
.statement h2 span { color: #7f8995; }
.pillar-number { color: #66707c; }
.midmarket-copy .eyebrow { color: #83bfff; }
.complexity-core small { color: #e1efff; font-size: 11px; }
.product-diagram .node.primary small { color: #edf6ff; font-size: 11px; }
.product-diagram .node.primary p { color: #e1efff; }
.product-diagram .node.primary .micro-node { color: #f4f8fc; font-size: 11px; }
.orbit-core small { color: #e8f3ff; }
.form-fallback a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
}