/* Sales Upgrade — light only. Open «sales system» layout: cool paper, indigo ink, one cobalt accent.
   Content sits on the page, divided by whitespace and hairlines; frames only for tools (form, calculator, explorer, interface samples).
   3D glass icons are product identity: each icon = one service. */

@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(fonts/unbounded-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(fonts/unbounded-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(fonts/unbounded-cyrillic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/onest-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/onest-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/onest-cyrillic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 500;
  src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 500;
  src: url(fonts/jetbrains-mono-cyrillic-500-normal.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

:root {
  --paper: #F3F4F8;
  --paper-2: #E9EBF2;
  --surface: #FFFFFF;
  --ink: #0D1330;
  --ink-2: #474F6E;
  --ink-3: #6A7191;
  --line: #D8DCE7;
  --line-2: #E8EAF1;
  --cobalt: #2243D6;
  --cobalt-2: #1A33A8;
  --cobalt-soft: #E9EDFF;
  --on-cobalt: #FFFFFF;
  --good: #1B7F4E;
  --good-soft: #E2F3E9;
  --bad: #C8215F;
  --warn: #E39A12;
  --band: #0D1330;
  --band-ink: #E9ECF6;
  --band-ink-2: #A7AFCB;
  --band-line: #283057;
  --shadow: 0 1px 2px rgba(13,19,48,.05), 0 14px 36px -16px rgba(13,19,48,.22);
  --f-display: "Unbounded", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --f-body: "Onest", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* ikat lives only in the logo mark and the Sotuv Radar avatar (canvas texture from site.js) */
  --ikat-solid: repeating-linear-gradient(90deg, #2243D6 0 9px, #C8215F 9px 14px, #E39A12 14px 18px, #2243D6 18px 26px);
  --radius: 20px;
  --wrap: 1240px;
  --gut: 20px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--f-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cobalt); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(1.8rem, 3.9vw, 3.3rem); line-height: 1.06; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.45rem, 2.7vw, 2.35rem); }
h3 { font-size: 1.08rem; line-height: 1.28; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }
@media (max-width: 640px) { :root { --gut: 16px; } body { font-size: 1rem; } }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
.mark { color: var(--cobalt); }

/* ---------- design language: open layout. Content sits on the page, separated by whitespace and hairlines.
   Boxes only where something is a tool or an object: form, calculator, explorer, interface samples, dropdown. ---------- */

/* eyebrow */
.eb { font: 500 .72rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .13em; color: var(--ink-2); display: inline-flex; align-items: center; gap: 10px; }
.eb::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--cobalt); flex: none; }
.eb.free { color: var(--good); } .eb.free::before { background: var(--good); }

/* buttons */
.btn { --b: var(--cobalt); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--b); background: var(--b); color: var(--on-cobalt); font: 600 1rem/1.2 var(--f-body); text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; text-align: center; max-width: 100%; }
.btn.sm, .mbar .btn, .hdr .btn { white-space: nowrap; }
.btn:hover { color: var(--on-cobalt); background: var(--cobalt-2); border-color: var(--cobalt-2); transform: translateY(-1px); }
.btn .ar { display: inline-flex; transition: transform .2s ease; }
.btn:hover .ar { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn.sm { min-height: 42px; padding: 0 18px; font-size: .95rem; }
.btn.free { --b: var(--good); }
.btn.free:hover { background: var(--good); border-color: var(--good); filter: brightness(1.08); }
.btn.free-t { color: var(--good); }

/* icons: 3D glass objects = product identity */
.ic { width: 52px; height: 52px; flex: none; border-radius: 14px; overflow: hidden; background: #E4E6EC; }
.ic img { width: 100%; height: 100%; object-fit: cover; }
.ic.sm { width: 34px; height: 34px; border-radius: 10px; }
.ic.lg { width: 64px; height: 64px; border-radius: 18px; }
.ic.glyph { display: grid; place-items: center; background: var(--cobalt-soft); color: var(--cobalt); font: 700 1.1rem/1 var(--f-display); letter-spacing: -0.04em; }
.go { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: inline-grid; place-items: center; color: var(--ink-2); flex: none; transition: background .15s ease, color .15s ease, border-color .15s ease; }
a:hover > .go, a:hover .top .go { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }

/* header */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.hdr.scrolled { border-bottom-color: var(--line); }
.hdr .wrap { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 800 1.06rem/1 var(--f-display); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.logo:hover { color: var(--ink); }
.logo i { display: block; width: 22px; height: 22px; flex: none; transform: rotate(45deg); border-radius: 4px; background: var(--ikat-solid); background-size: 40px 40px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.nav { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.nav > a, .nav summary { display: block; padding: 10px 12px; border-radius: 10px; font-weight: 500; font-size: .96rem; text-decoration: none; cursor: pointer; list-style: none; color: var(--ink); white-space: nowrap; }
.nav > a.free { color: var(--good); }
.nav summary::-webkit-details-marker { display: none; }
.nav > a:hover, .nav summary:hover, .dd[open] summary { background: var(--paper-2); color: var(--ink); }
.nav summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.dd { position: relative; }
.dd-panel { position: absolute; top: calc(100% + 10px); left: 0; width: min(760px, 92vw); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.dd-panel a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; text-decoration: none; }
.dd-panel a:hover { background: var(--paper); color: var(--ink); }
.dd-panel a > span:last-child { display: grid; gap: 3px; }
.dd-panel b { font: 600 .96rem/1.25 var(--f-body); }
.dd-panel small { font-size: .84rem; line-height: 1.4; color: var(--ink-2); }
.dd-panel .free b { color: var(--good); }
.hdr-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hphone { display: inline-flex; align-items: center; gap: 8px; padding: 10px; border-radius: 10px; font: 600 .95rem/1 var(--f-body); text-decoration: none; white-space: nowrap; color: var(--ink); }
.hphone:hover { background: var(--paper-2); }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; font: 500 .78rem/1 var(--f-mono); letter-spacing: .06em; background: var(--surface); }
.lang a, .lang span { display: inline-grid; place-items: center; min-width: 36px; min-height: 34px; padding: 0 8px; border-radius: 999px; text-decoration: none; }
.lang span { background: var(--ink); color: var(--paper); }
.burger { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.burger svg { width: 22px; height: 22px; }
.mnav { display: none; }
@media (max-width: 1260px) { .hphone span { display: none; } }
@media (max-width: 1080px) {
  .nav, .hdr-r .btn, .hphone { display: none; }
  .burger { display: inline-flex; }
  .mnav[data-open="true"] { display: block; position: fixed; inset: calc(68px + env(safe-area-inset-top, 0px)) 0 0; z-index: 49; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  .mnav .wrap { display: grid; gap: 0; }
  .mnav .lbl { font: 500 .7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); padding: 18px 0 6px; }
  .m-svc { display: grid; }
  .m-svc a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 54px; padding: 6px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; font-weight: 600; }
  .m-svc a small { font: 500 .74rem/1.2 var(--f-mono); color: var(--ink-3); white-space: nowrap; }
  .m-links { display: grid; margin-top: 10px; }
  .m-links a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line-2); text-decoration: none; font: 700 1.15rem/1.2 var(--f-display); letter-spacing: -0.01em; }
  .m-links a.free { color: var(--good); }
  .m-end { display: grid; gap: 10px; margin-top: 22px; }
  .m-phone { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); text-decoration: none; font: 600 1.05rem/1 var(--f-body); }
}

/* bottom action bar (phones) */
.mbar { display: none; }
@media (max-width: 960px) {
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .25s ease; }
  .mbar[data-show="true"] { transform: none; }
  .mbar .btn { min-height: 48px; padding: 0 12px; font-size: .96rem; }
  .mbar .btn.ghost { background: var(--surface); }
  .ftr { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* sections */
.sec { padding-block: clamp(56px, 8vw, 112px); }
.sec.tight { padding-block: clamp(40px, 5vw, 72px); }
.sec-hd { display: grid; gap: 14px; max-width: 820px; margin-bottom: clamp(26px, 3.6vw, 44px); }
.sec-hd p { color: var(--ink-2); font-size: 1.06rem; max-width: 62ch; }
.alt { background: var(--surface); }
.band { background: var(--band); color: var(--band-ink); }
.band .eb { color: var(--band-ink-2); }
.band .eb::before { background: #7F95FF; }
@media (max-width: 640px) {
  .sec { padding-block: 48px; } .sec.tight { padding-block: 36px; }
  .sec-hd { margin-bottom: 22px; gap: 10px; } .sec-hd p { font-size: 1rem; }
  .sec-hd > .eb { display: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; padding-block: clamp(26px, 4.4vw, 60px) clamp(44px, 6vw, 84px); }
.home-hero::before, .shero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 1px 1px, rgba(13,19,48,.10) 1px, transparent 0); background-size: 24px 24px; -webkit-mask-image: linear-gradient(#000 30%, transparent 92%); mask-image: linear-gradient(#000 30%, transparent 92%); }
.hero-copy { display: grid; gap: 20px; min-width: 0; align-content: start; }
.hero-copy .lead { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--ink-2); max-width: 54ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.home-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.home-hero h1 { font-size: clamp(1.9rem, 3.5vw, 3.15rem); }
.trust-line { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-2); font-size: .93rem; font-weight: 500; }
.trust-line li { display: inline-flex; align-items: center; gap: 8px; }
.trust-line li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* hero visual: what a working system looks like (samples) */
.hero-vis { position: relative; aspect-ratio: 1 / .84; max-width: 600px; width: 100%; justify-self: end; }
.hero-vis::before { content: ""; position: absolute; inset: 8% 6%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--cobalt) 16%, transparent), transparent 70%); }
.hero-vis .sample { position: absolute; top: 0; right: 0; font: 500 .66rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px; border-radius: 6px; background: var(--ink); color: var(--paper); z-index: 4; }
.hv { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px; box-shadow: 0 1px 2px rgba(13,19,48,.05), 0 22px 48px -22px rgba(13,19,48,.35); display: grid; gap: 8px; font-size: .8rem; }
.hv > .ic { position: absolute; top: -14px; left: -14px; width: 40px; height: 40px; border-radius: 12px; border: 3px solid var(--paper); }
.hv-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-left: 26px; font: 700 .9rem/1.2 var(--f-display); }
.hv-h small { font: 500 .7rem/1 var(--f-mono); color: var(--ink-3); }
.hv-crm { left: 0; top: 7%; width: 53%; z-index: 1; }
.hv-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--paper); }
.hv-row b { display: block; font-size: .82rem; }
.hv-row small { font: 500 .68rem/1.2 var(--f-mono); color: var(--ink-3); }
.hv-row .t { flex: none; font: 500 .64rem/1 var(--f-mono); padding: 5px 6px; border-radius: 6px; color: #fff; }
.hv-rep { right: 0; top: 15%; width: 44%; z-index: 2; }
.hv-bar { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 2px 8px; align-items: center; font-size: .72rem; font-weight: 600; }
.hv-bar i { grid-column: 1 / -1; grid-row: 2; height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--cobalt) var(--w), var(--paper-2) var(--w)); }
.hv-bar b { font: 600 .7rem/1 var(--f-mono); text-align: right; }
.hv-bar.win i { background: linear-gradient(90deg, var(--good) var(--w), var(--paper-2) var(--w)); }
.hv-loss { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--band); color: var(--band-ink); font: 500 .66rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.hv-loss b { font: 700 .82rem/1 var(--f-display); text-transform: none; letter-spacing: 0; color: #FF8DB4; }
.hv-tg { left: 12%; bottom: 0; width: 56%; z-index: 3; }
.hv-msg { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: #EEF2FF; }
.hv-msg b { font-size: .86rem; }
.hv-msg span { color: var(--ink-2); line-height: 1.4; }
@media (max-width: 960px) {
  .home-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-vis { justify-self: center; max-width: 560px; }
}
@media (max-width: 640px) {
  .hero-vis { aspect-ratio: auto; display: grid; padding: 14px 0 0 14px; }
  .hero-vis .sample { top: 0; }
  .hv { position: relative; inset: auto; }
  .hv-crm { width: 88%; }
  .hv-rep { display: none; }
  .hv-tg { width: 86%; justify-self: end; margin-top: -34px; }
}

/* ---------- result: before / after ---------- */
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); }
.cmp thead th, .cmp thead td { padding-top: 0; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font: 500 .72rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cmp thead th.a { color: var(--cobalt); }
.cmp tbody th { width: 16%; font: 700 1rem/1.35 var(--f-display); letter-spacing: -0.01em; }
.cmp td { font-size: 1.04rem; line-height: 1.5; }
.cmp td.b { width: 38%; color: var(--ink-3); }
.cmp td.a { font-weight: 500; padding-left: 20px; background: linear-gradient(90deg, color-mix(in srgb, var(--cobalt) 6%, transparent), transparent); }
.cmp td.b::before, .cmp td.a::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; vertical-align: 2px; background: var(--bad); }
.cmp td.a::before { background: var(--good); }
@media (max-width: 760px) {
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto !important; }
  .cmp tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .cmp tbody th, .cmp td { border: 0; padding: 0; }
  .cmp tbody th { margin-bottom: 8px; }
  .cmp td { font-size: .98rem; }
  .cmp td.a { background: none; padding: 6px 0 0; }
  .cmp td::after { content: none; }
}
.proof { list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof li { display: grid; gap: 8px; align-content: start; padding: 0 22px 0 0; }
.proof li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.proof b { font: 700 clamp(2.4rem, 4.6vw, 3.6rem)/.9 var(--f-display); letter-spacing: -0.05em; color: var(--cobalt); }
.proof span { color: var(--ink-2); font-size: .95rem; line-height: 1.4; }
@media (max-width: 760px) {
  .proof { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .proof li:nth-child(3) { border-left: 0; padding-left: 0; }
  .proof b { font-size: 2.4rem; }
  .proof span { font-size: .9rem; }
}
.cases-h { margin-top: 56px; font-size: 1.3rem; }
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; margin-top: 18px; }
.case { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.case p { color: var(--ink-2); font-size: .95rem; }
.case-res { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; }
.case-res b { display: block; font: 700 1.5rem/1 var(--f-display); color: var(--cobalt); letter-spacing: -0.03em; }
.case-res span { font-size: .88rem; color: var(--ink-2); }
@media (max-width: 860px) { .cases { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- problem → solution explorer ---------- */
.ex-tabs { display: flex; gap: 0 28px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: clamp(26px, 3.6vw, 40px); scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); padding-right: 40px; }
.ex-tabs::-webkit-scrollbar { display: none; }
.ex-t { flex: none; display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 0 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; text-decoration: none; color: var(--ink-2); font: 600 1rem/1.2 var(--f-body); white-space: nowrap; scroll-snap-align: start; }
.ex-t .n { font: 500 .72rem/1 var(--f-mono); color: var(--ink-3); }
.ex-t:hover { color: var(--ink); }
.ex-t[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--cobalt); }
.ex-t[aria-selected="true"] .n { color: var(--cobalt); }
.ex-p { display: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
.ex-p.on, .ex-p:target { display: grid; }
.ex-panels:has(.ex-p:target) .ex-p.on:not(:target) { display: none; }
.ex.js .ex-p:target:not(.on) { display: none; }
.ex.js .ex-panels:has(.ex-p:target) .ex-p.on { display: grid; }
.ex-c { position: relative; display: grid; gap: 14px; align-content: start; padding-right: 32px; }
.ex-c + .ex-c { padding-left: 32px; border-left: 1px solid var(--line); }
.ex-c + .ex-c::before { content: "→"; position: absolute; left: -15px; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); font-size: .9rem; color: var(--cobalt); }
.ex-c .lbl { font: 500 .7rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ex-c.prob h3 { font: 700 clamp(1.3rem, 2.2vw, 1.7rem)/1.2 var(--f-display); letter-spacing: -0.02em; }
.ex-c.prob p, .ex-c.sol p { color: var(--ink-2); }
.ex-prod { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); }
.ex-prod b { display: block; font: 700 1.15rem/1.2 var(--f-display); letter-spacing: -0.01em; }
.ex-prod small { display: block; margin-top: 4px; font: 500 .78rem/1 var(--f-mono); color: var(--cobalt); }
.sol.free .ex-prod small { color: var(--good); }
.ex-prod:hover b { color: var(--cobalt); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-weight: 500; line-height: 1.4; }
.ticks li::before { content: ""; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ex-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }
.ex-alt { color: var(--good); font-weight: 500; text-decoration: none; font-size: .94rem; }
.ex-alt:hover { color: var(--good); text-decoration: underline; }
@media (max-width: 860px) {
  .ex-tabs { gap: 0 20px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut) 40px; scroll-padding-inline: var(--gut); }
  .ex-t { font-size: .95rem; }
  .ex-p { grid-template-columns: minmax(0, 1fr); }
  .ex-c { padding-right: 0; }
  .ex-c + .ex-c { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 26px; margin-top: 22px; }
  .ex-c + .ex-c::before { left: 0; top: -15px; content: "↓"; }
  .ex-go .btn { flex: 1 1 100%; }
}

/* industries as one typographic line */
.ilinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; }
.ilinks li { display: inline-flex; align-items: baseline; }
.ilinks li:not(:last-child)::after { content: "·"; margin: 0 12px; color: var(--ink-3); }
.ilinks a { text-decoration: none; font-weight: 500; color: var(--ink); }
.ilinks a:hover { color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 2px; }
.ilinks.big a { font: 700 clamp(1.35rem, 3vw, 2.3rem)/1.35 var(--f-display); letter-spacing: -0.02em; }
.ilinks.big li:not(:last-child)::after { content: "/"; margin: 0 .5em; color: var(--line); font: 400 clamp(1.35rem, 3vw, 2.3rem)/1.35 var(--f-display); }
.inds-line .more { display: inline-block; margin-top: 24px; font-weight: 600; color: var(--cobalt); text-decoration: none; padding: 6px 0; }
.ind-chips { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 12px; }

/* team */
.team { display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "ph tm" "ph tx"; column-gap: clamp(24px, 4vw, 64px); row-gap: 20px; align-items: start; }
.team .ph { grid-area: ph; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: var(--paper-2); }
.team .ph img { width: 100%; height: 100%; object-fit: cover; }
.team .tm { grid-area: tm; display: grid; gap: 12px; align-self: end; }
.team .role { font: 600 1.06rem/1.35 var(--f-body); }
.team .tx { grid-area: tx; display: grid; gap: 22px; }
.ttext { font-size: 1.12rem; max-width: 54ch; }
.ttext a { color: var(--cobalt); text-decoration-color: color-mix(in srgb, var(--cobalt) 40%, transparent); }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rules li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-weight: 500; }
.rules li::before { content: ""; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 860px) {
  .team { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "ph tm" "tx tx"; column-gap: 16px; row-gap: 20px; align-items: center; }
  .team .ph { border-radius: 18px; }
  .team .tm { gap: 6px; align-self: center; }
  .team .tm .eb { display: none; }
  .team h2 { font-size: 1.35rem; }
  .team .role { font-size: .95rem; }
  .ttext { font-size: 1.02rem; }
  .rules li { font-size: .95rem; }
}

/* faq */
.faq { display: grid; border-top: 1px solid var(--line); max-width: 920px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 48px 20px 0; position: relative; font: 600 1.08rem/1.38 var(--f-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: linear-gradient(var(--ink), var(--ink)) center / 16px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 16px no-repeat; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 22px; color: var(--ink-2); max-width: 70ch; font-size: 1.02rem; }
.faq .a a { color: var(--cobalt); font-weight: 500; }
@media (max-width: 640px) { .faq summary { font-size: 1rem; padding: 16px 40px 16px 0; } .faq .a { font-size: .97rem; } }

/* contact form */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.contact-copy { display: grid; gap: 18px; }
.contact-copy p { color: var(--band-ink-2); font-size: 1.06rem; max-width: 46ch; }
.direct { display: grid; gap: 10px; }
.direct small { font: 500 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--band-ink-2); }
.direct a { display: inline-flex; align-items: center; gap: 10px; font: 700 clamp(1.2rem, 2.2vw, 1.5rem)/1.2 var(--f-display); letter-spacing: -0.01em; text-decoration: none; color: var(--band-ink); }
.direct a:hover { color: #9FB1FF; }
.next { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 12px; counter-reset: nx; }
.next li { counter-increment: nx; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; color: var(--band-ink); font-size: .98rem; }
.next li::before { content: counter(nx); width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--band-line); display: grid; place-items: center; font: 600 .85rem/1 var(--f-mono); color: #9FB1FF; }
.form { background: var(--surface); color: var(--ink); border-radius: 26px; padding: clamp(20px, 3.4vw, 40px); display: grid; gap: 16px; box-shadow: var(--shadow); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 8px; font-weight: 600; font-size: .92rem; }
.form input, .form select, .form textarea { width: 100%; min-height: 52px; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 16px; font: 400 1rem/1.4 var(--f-body); color: var(--ink); background: var(--paper); }
.form textarea { min-height: 84px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--cobalt); outline: none; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form .consent { font-size: .8rem; color: var(--ink-2); }
.form .status { font-weight: 600; min-height: 1.4em; }
.form .status.ok { color: var(--good); }
.form .status.err { color: var(--bad); }
.form .btn { width: 100%; }
@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; gap: 14px; }
  .contact-copy { display: contents; }
  .contact-copy .eb, .contact-copy .next { display: none; }
  .contact-copy h2 { order: 1; } .contact-copy > p { order: 2; font-size: 1rem; } .contact .form { order: 3; margin-top: 6px; } .contact-copy .direct { order: 4; margin-top: 10px; }
}
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } .form { border-radius: 22px; gap: 14px; } }

/* footer */
.ftr { background: var(--band); color: var(--band-ink); padding-block: 56px calc(32px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--band-line); }
.ftr .grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.ftr .logo { display: inline-flex; padding: 0; color: var(--band-ink); font-size: 1.06rem; }
.ftr p { color: var(--band-ink-2); margin-top: 14px; max-width: 32ch; font-size: .95rem; }
.fphone { display: inline-block; margin-top: 18px; font: 700 1.3rem/1.2 var(--f-display); letter-spacing: -0.01em; text-decoration: none; color: var(--band-ink); }
.ftr h4 { font: 500 .72rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--band-ink-2); margin: 0 0 12px; }
.ftr h4.mt { margin-top: 28px; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ftr li { color: var(--band-ink-2); font-size: .95rem; }
.ftr a { display: inline-block; padding: 5px 0; color: var(--band-ink); text-decoration: none; font-size: .95rem; line-height: 1.35; }
.ftr a:hover { color: #9FB1FF; }
.ftr .bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--band-line); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; color: var(--band-ink-2); font-size: .86rem; }
@media (max-width: 960px) { .ftr .grid { grid-template-columns: 1fr 1fr; } .ftr .fb { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ftr { padding-top: 44px; } .ftr .grid { gap: 26px 16px; } .ftr a, .ftr li { font-size: .9rem; } }

/* ---------- inner pages ---------- */
.crumbs { font: 500 .76rem/1.4 var(--f-mono); color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0; margin: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; min-height: 30px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.crumbs a { text-decoration: none; }
.phero .wrap { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(28px, 4.5vw, 68px); align-items: center; }
.phero .hero-copy { gap: 18px; }
.phero h1, .shero h1 { font-size: clamp(1.75rem, 3.4vw, 2.9rem); }
.shero { padding-bottom: clamp(16px, 2.4vw, 28px); }
.shero .hero-copy { max-width: 860px; }
@media (max-width: 960px) { .phero .wrap { grid-template-columns: minmax(0, 1fr); gap: 30px; } .hero-copy { gap: 14px; } }
@media (max-width: 640px) { .phero .ctas .btn.ghost, .shero .ctas .btn.ghost { display: none; } }

/* facts: numbers in a row, hairlines between */
.facts { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts li { padding: 16px 16px 0 0; display: grid; gap: 6px; align-content: start; }
.facts li + li { padding-left: 16px; border-left: 1px solid var(--line); }
.facts .n { font: 700 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--f-display); letter-spacing: -0.04em; color: var(--cobalt); font-variant-numeric: tabular-nums; }
.facts span { font-size: .9rem; line-height: 1.35; color: var(--ink-2); }
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  .facts li, .facts li + li { grid-template-columns: 4.4rem 1fr; align-items: baseline; padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--line-2); }
  .facts .n { font-size: 1.5rem; }
  .facts span { font-size: .93rem; }
}

/* visual: icon badge + interface sample */
.pvis { position: relative; min-width: 0; padding-top: 26px; }
.pvis > .ic.xl { position: absolute; top: 0; right: -6px; z-index: 2; width: 104px; height: 104px; border-radius: 26px; border: 4px solid var(--paper); box-shadow: var(--shadow); }
.pvis .mock { padding-top: 70px; }
@media (max-width: 640px) { .pvis { padding-top: 18px; } .pvis > .ic.xl { width: 76px; height: 76px; border-radius: 20px; right: -2px; } .pvis .mock { padding-top: 56px; } }
.mock { position: relative; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); padding: clamp(16px, 2.4vw, 24px); box-shadow: var(--shadow); overflow: hidden; }
.mock .sample { position: absolute; top: 16px; left: 16px; font: 500 .66rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px; border-radius: 6px; background: var(--ink); color: var(--paper); z-index: 1; }
.mock h4 { margin: 0; }
.kb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kb-col { display: grid; gap: 8px; align-content: start; }
.kb-col h4 { font: 500 .68rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 8px; border-bottom: 2px solid var(--cobalt); margin-bottom: 2px; }
.kb-card { background: var(--paper); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px; display: grid; gap: 6px; font-size: .84rem; }
.kb-card b { font-size: .9rem; }
.kb-card .r { display: flex; justify-content: space-between; gap: 6px; color: var(--ink-2); font: 500 .7rem/1.2 var(--f-mono); }
.kb-card .t { justify-self: start; font: 500 .68rem/1 var(--f-mono); padding: 5px 7px; border-radius: 6px; color: #fff; }
.t.late { background: var(--bad); } .t.today { background: var(--warn); color: #0D1330 !important; } .t.later { background: var(--good); }
@media (max-width: 520px) { .kb { grid-template-columns: 1fr 1fr; } .kb-col:nth-child(3) { display: none; } }
.rep { display: grid; gap: 12px; }
.rep h4 { font: 700 1.05rem/1.2 var(--f-display); }
.rep .st { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: .84rem; font-weight: 600; }
.rep .bar, .wk .bar { height: 24px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line-2); position: relative; overflow: hidden; }
.rep .bar i, .wk .bar i { position: absolute; inset: 0 auto 0 0; background: var(--cobalt); border-radius: 7px; }
.rep .st.win .bar i { background: var(--good); }
.rep .st b, .wk-r b { font: 600 .88rem/1 var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
.rep .loss { margin-top: 4px; padding: 14px 16px; border-radius: 14px; background: var(--band); color: var(--band-ink); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rep .loss span { font: 500 .7rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--band-ink-2); }
.rep .loss b { font: 700 1.25rem/1 var(--f-display); color: #FF8DB4; }
@media (max-width: 420px) { .rep .st { grid-template-columns: minmax(0, 6.6rem) minmax(0, 1fr) 40px; font-size: .78rem; } }
.ck { display: grid; gap: 12px; }
.ck-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ck-h b { display: block; font: 700 1.05rem/1.2 var(--f-display); }
.ck-h .m { display: block; margin-top: 4px; font: 500 .74rem/1.2 var(--f-mono); color: var(--ink-3); }
.ck .score { font: 700 1.6rem/1 var(--f-display); color: var(--warn); letter-spacing: -0.03em; }
.ck ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ck li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--paper); font-size: .9rem; font-weight: 500; }
.ck li i { width: 22px; height: 22px; border-radius: 7px; display: block; }
.ck li.ok i { background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ck li.no i { background: var(--bad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ck li.no { color: var(--ink-2); }
.ck-n { padding: 12px 14px; border-radius: 12px; background: var(--cobalt-soft); color: var(--cobalt-2); font-size: .88rem; font-weight: 500; }
.wk { display: grid; gap: 10px; }
.wk-h { display: flex; justify-content: space-between; align-items: baseline; }
.wk-h b { font: 700 1.05rem/1.2 var(--f-display); }
.wk-h span { font: 500 .7rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.wk-r { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 48px; gap: 10px; align-items: center; font-size: .88rem; font-weight: 600; }
.wk-r b.hi { color: var(--good); } .wk-r b.lo { color: var(--bad); }
.wk-f { margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: var(--band); color: var(--band-ink); font: 500 .8rem/1.3 var(--f-mono); }
.dp-h { display: block; font: 700 1.05rem/1.2 var(--f-display); margin-bottom: 12px; }
.dp ol { list-style: none; margin: 0; padding: 0; display: grid; }
.dp li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; padding: 10px 0; font-size: .92rem; font-weight: 500; }
.dp li + li { border-top: 1px dashed var(--line); }
.dp time { font: 600 .82rem/1.5 var(--f-mono); color: var(--cobalt); }
.dp li:last-child time { color: var(--good); }
.sys-h { display: block; font: 700 1.05rem/1.2 var(--f-display); margin-bottom: 14px; }
.sys ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sys li { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line-2); font: 600 .9rem/1.2 var(--f-body); }
.sys li .i { font: 500 .7rem/1 var(--f-mono); color: var(--cobalt); }
.sys li:last-child { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.sys li:last-child .i { color: #C9D3FF; }
.mock.tgm { background: linear-gradient(160deg, #EEF1FA, #DDE3F3); display: grid; place-items: center; }
.tg { position: relative; width: min(380px, 100%); background: #FFFFFF; color: #0D1330; border-radius: 22px; padding: 16px; box-shadow: 0 18px 48px -18px rgba(13,19,48,.45); display: grid; gap: 10px; font-size: .93rem; }
.tg .tg-h { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.tg .tg-h i { width: 30px; height: 30px; border-radius: 50%; background: var(--ikat-solid); background-size: 40px 40px; }
.tg .tg-h small { margin-left: auto; font: 500 .72rem/1 var(--f-mono); color: #6A7290; }
.tg .bubble { background: #EEF2FF; border-radius: 16px 16px 16px 6px; padding: 12px 14px; display: grid; gap: 6px; }
.tg .bubble b { font-size: 1rem; }
.tg .bubble .m { font: 500 .76rem/1.3 var(--f-mono); color: #4A5376; }
.tg .bubble .tip { color: #1A6B44; font-weight: 500; }
.tg .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tg .btns span { text-align: center; padding: 9px 6px; border-radius: 10px; background: #E5EAFF; color: #1A33A8; font-weight: 600; font-size: .84rem; }

/* outcomes: open grid with hairlines */
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; padding: 0; margin: 0; list-style: none; }
.outcomes li { display: grid; gap: 8px; align-content: start; padding: 22px 0 28px; border-top: 1px solid var(--line); }
.outcomes li::before { content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: var(--cobalt); margin: 2px 0 6px 2px; }
.outcomes li.has-kpi::before, .outcomes.plain li::before { display: none; }
.outcomes .kpi { font: 700 clamp(1.8rem, 2.8vw, 2.4rem)/1 var(--f-display); letter-spacing: -0.04em; color: var(--cobalt); margin-bottom: 2px; }
.outcomes p { color: var(--ink-2); font-size: .97rem; }
.outcomes.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .outcomes { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
@media (max-width: 640px) {
  .outcomes, .outcomes.two { grid-template-columns: 1fr; }
  .outcomes li { padding: 16px 0 18px; gap: 6px; }
  .outcomes li::before { display: none; }
  .outcomes .kpi { font-size: 1.6rem; }
  .outcomes h3 { font: 600 1.02rem/1.3 var(--f-body); letter-spacing: 0; }
  .outcomes p { font-size: .94rem; }
}
.scen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; }
.scen div { padding-top: 18px; border-top: 2px solid var(--ink); display: grid; gap: 10px; align-content: start; }
.scen .ix { font: 500 .78rem/1 var(--f-mono); color: var(--cobalt); }
.scen p { color: var(--ink-2); }
@media (max-width: 900px) { .scen { grid-template-columns: 1fr; gap: 26px; } }
.incl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }
.incl li a, .incl li span { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; height: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 600; text-decoration: none; }
.incl li a { color: var(--cobalt-2); }
.incl li a::after { content: "→"; color: var(--cobalt); }
@media (max-width: 900px) { .incl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .incl { grid-template-columns: 1fr; } .incl li a, .incl li span { min-height: 50px; } }
.formats { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 0 36px; }
.formats div { padding-top: 20px; border-top: 2px solid var(--line); display: grid; gap: 10px; align-content: start; }
.formats .hl { border-top-color: var(--cobalt); }
.formats .tag { justify-self: start; font: 500 .7rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; background: var(--cobalt-soft); color: var(--cobalt); }
.formats p { color: var(--ink-2); }
@media (max-width: 860px) { .formats { grid-template-columns: 1fr; gap: 26px; } }

/* steps: horizontal on desktop, vertical timeline on phones */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 16px; counter-reset: st; }
.steps li { counter-increment: st; display: grid; gap: 8px; align-content: start; padding-top: 58px; position: relative; }
.steps li::before { content: counter(st, decimal-leading-zero); position: absolute; top: 0; left: 0; font: 700 1rem/1 var(--f-display); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); z-index: 1; }
.alt .steps li::before { background: var(--surface); }
.steps li::after { content: ""; position: absolute; top: 21px; left: 44px; right: -16px; height: 2px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps li > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.steps h3 { font-size: 1.02rem; }
.steps .tag { font: 500 .66rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px; border-radius: 6px; background: var(--cobalt-soft); color: var(--cobalt); }
.steps p { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 1020px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 720px; }
  .steps li { padding: 0 0 22px 60px; min-height: 64px; gap: 2px; }
  .steps li::after { top: 46px; bottom: 2px; left: 21px; right: auto; width: 2px; height: auto; }
  .steps li:last-child { padding-bottom: 0; }
  .steps li > div { min-height: 44px; }
}

/* criteria */
.crit { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(26px, 5vw, 72px); align-items: start; }
.big8 { display: block; font: 700 clamp(4rem, 9vw, 7.5rem)/.8 var(--f-display); letter-spacing: -0.06em; color: var(--cobalt); margin: 4px 0 -2px; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-top: 1px solid var(--line); }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 500; font-size: .98rem; line-height: 1.4; align-items: start; }
.checks li::before { content: ""; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.checks.one { grid-template-columns: 1fr; }
@media (max-width: 900px) { .crit { grid-template-columns: 1fr; } .big8 { font-size: 3.4rem; } }
@media (max-width: 560px) { .checks { grid-template-columns: 1fr; } .checks li { font-size: .95rem; } }
.fit { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(26px, 5vw, 72px); }
.fit ul { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid var(--line); }
.fit li { padding: 16px 0 16px 34px; border-bottom: 1px solid var(--line); position: relative; font-size: 1.05rem; font-weight: 500; }
.fit li::before { content: "→"; position: absolute; left: 0; color: var(--cobalt); font-weight: 700; }
@media (max-width: 860px) { .fit { grid-template-columns: 1fr; gap: 20px; } .fit li { font-size: 1rem; padding: 14px 0 14px 30px; } }

/* related services: open columns */
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; }
.pcard { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); min-width: 0; }
.pcard:hover { color: var(--ink); }
.pcard:hover h3 { color: var(--cobalt); }
.pcard .top { display: flex; justify-content: space-between; align-items: flex-start; }
.pcard h3 { font-size: 1.12rem; transition: color .15s ease; }
.pcard p { color: var(--ink-2); font-size: .95rem; margin-top: 6px; }
.pcard .meta { font: 500 .74rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.pcard .meta .mt { display: inline-flex; align-items: baseline; gap: 6px; }
.pcard .meta .n { font: 700 1.5rem/1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); text-transform: none; }
.pcard.free .meta .mt { color: var(--good); font-weight: 600; }
.pcard.free:hover h3 { color: var(--good); }
@media (max-width: 900px) {
  .related { grid-template-columns: 1fr; }
  .pcard { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; gap: 4px 16px; padding: 16px 0; align-items: start; }
  .pcard .top { grid-row: span 3; }
  .pcard .top .go { display: none; }
  .pcard .meta { grid-column: 2; margin-top: 4px; }
  .pcard p { font-size: .92rem; margin-top: 2px; }
}

/* problem → solution rows (industry pages, calculator, 404) */
.pslist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ps { display: grid; grid-template-columns: minmax(0, 1.3fr) 36px minmax(0, .7fr); gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ps-p h3 { font: 600 1.12rem/1.32 var(--f-body); letter-spacing: 0; }
.ps-p p { color: var(--ink-2); margin-top: 6px; font-size: .97rem; max-width: 62ch; }
.ps-ar { color: var(--ink-3); justify-self: center; display: inline-flex; }
.ps-s { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); }
.ps-s b { display: block; font: 600 1rem/1.25 var(--f-body); color: var(--cobalt); }
.ps-s small { display: block; margin-top: 3px; font: 500 .74rem/1 var(--f-mono); color: var(--ink-3); }
.ps.free .ps-s b { color: var(--good); }
.ps-s:hover b { text-decoration: underline; }
@media (max-width: 760px) {
  .ps { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 0; }
  .ps-ar { display: none; }
  .ps-p h3 { font-size: 1.04rem; }
  .ps-p p { font-size: .94rem; }
  .ps-s .ic { width: 40px; height: 40px; border-radius: 11px; }
}
.allin { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 30px; text-decoration: none; color: var(--ink); }
.allin > span:nth-child(2) { display: grid; gap: 4px; }
.allin b { font: 700 1.1rem/1.25 var(--f-display); }
.allin > span:nth-child(2) > span { color: var(--ink-2); }
.allin:hover { color: var(--ink); }
.allin:hover b { color: var(--cobalt); }
@media (max-width: 640px) { .allin { grid-template-columns: auto minmax(0, 1fr); gap: 14px; } .allin .go { display: none; } }

/* calculator (a tool, so it keeps its frame) */
.calc { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); background: var(--surface); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); }
.calc-in { padding: clamp(20px, 3.4vw, 40px); display: grid; gap: 20px; align-content: start; }
.field { display: grid; gap: 10px; }
.field label { font-weight: 600; font-size: .95rem; display: flex; justify-content: space-between; gap: 12px; }
.field output { font: 500 .95rem/1 var(--f-mono); color: var(--cobalt); }
.field .hint { font: 500 .8rem/1 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.field input[type=number] { width: 100%; min-height: 52px; border: 1.5px solid var(--line); border-radius: 14px; padding: 0 16px; font: 600 1.12rem/1 var(--f-mono); color: var(--ink); background: var(--paper); font-variant-numeric: tabular-nums; }
.field input[type=number]:focus { border-color: var(--cobalt); outline: none; }
input[type=range] { width: 100%; accent-color: var(--cobalt); height: 32px; }
.calc-out { background: var(--band); color: var(--band-ink); padding: clamp(20px, 3.4vw, 40px); display: grid; gap: 20px; align-content: center; }
.res { display: grid; gap: 6px; }
.res span { font: 500 .72rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--band-ink-2); }
.res b { font: 700 clamp(1.5rem, 3.2vw, 2.4rem)/1.05 var(--f-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.res.big b { font-size: clamp(2rem, 4.6vw, 3.4rem); color: #FFC24D; }
.calc-note { font-size: .88rem; color: var(--band-ink-2); max-width: 52ch; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; border-radius: 22px; } .calc-out .btn { width: 100%; white-space: normal; text-align: center; } }
.formula { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(22px, 5vw, 72px); align-items: start; }
.formula > div:first-child { display: grid; gap: 14px; }
.formula .fx { font: 600 clamp(1.05rem, 2vw, 1.35rem)/1.4 var(--f-mono); color: var(--cobalt-2); padding: 0 0 16px; margin-bottom: 16px; border-bottom: 2px solid var(--cobalt); }
.formula p { color: var(--ink-2); }
@media (max-width: 860px) { .formula { grid-template-columns: 1fr; } }

/* glossary */
.gloss { display: grid; margin: 0; border-top: 1px solid var(--line); }
.gl { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 10px 32px; padding: 22px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.gl:target { box-shadow: inset 3px 0 0 var(--cobalt); padding-left: 18px; }
.gl dt { display: grid; gap: 4px; align-content: start; }
.gl dt b { font: 700 1.3rem/1.15 var(--f-display); letter-spacing: -0.02em; }
.gl .full { font: 500 .76rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.gl dd { margin: 0; display: grid; gap: 10px; }
.gl dd p { color: var(--ink-2); }
.gl-go { justify-self: start; display: inline-block; font-size: .92rem; line-height: 1.5; color: var(--cobalt); text-decoration: none; padding: 4px 0; }
.gl-go svg { display: inline-block; vertical-align: -4px; margin-left: 4px; }
.gl-go span { color: var(--ink-3); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.chips a { display: inline-flex; align-items: center; min-height: 34px; font: 500 .84rem/1 var(--f-mono); text-decoration: none; color: var(--cobalt); border-bottom: 1px solid color-mix(in srgb, var(--cobalt) 30%, transparent); }
@media (max-width: 760px) { .gl { grid-template-columns: 1fr; padding: 18px 0; } .gl dt b { font-size: 1.15rem; } }

/* industries hub list */
.inds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
.inds a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 22px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); height: 100%; }
.inds a:hover b { color: var(--cobalt); }
.inds .ix { font: 500 .78rem/1.6 var(--f-mono); color: var(--cobalt); }
.inds .it { display: grid; gap: 8px; }
.inds b { font: 700 1.2rem/1.25 var(--f-display); letter-spacing: -0.01em; transition: color .15s ease; }
.inds .ip { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.inds .ip li { position: relative; padding-left: 16px; color: var(--ink-2); font-size: .93rem; line-height: 1.4; }
.inds .ip li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); }
@media (max-width: 760px) { .inds { grid-template-columns: 1fr; } .inds a { padding: 18px 0; } .inds .go { display: none; } .inds a { grid-template-columns: auto minmax(0, 1fr); } }

/* legal */
.legal { max-width: 760px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.legal h1 { font-size: clamp(1.5rem, 3.4vw, 2.6rem); hyphens: auto; overflow-wrap: anywhere; }
.legal h2 { font-size: 1.25rem; }
.legal p { color: var(--ink-2); }