/* Шрифти Inter і Inter Tight (SIL Open Font License) — самохостинг, без запитів до Google (26.09).
 * Файли: site/fonts/*.woff2, змінна вага; підмножини cyrillic, cyrillic-ext, latin, latin-ext.
 * Згенеровано скриптом зі стилю Google Fonts; вручну не правити. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2"); 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: "Inter Tight"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/fonts/inter-tight-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/fonts/inter-tight-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/fonts/inter-tight-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/fonts/inter-tight-latin.woff2) format("woff2"); 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; }

/* Розкладка сайту krokul.com — пачки 1–3 виконавця (site/дизайн/site.css) без блоку @font-face
 * (шрифти — сусідній шрифти.css, змінна вага, свої підмножини). Перенесено в генератор 26.09;
 * джерело істини для класів-ролей — README пачки. Нижче, після розмітки виконавця, —
 * три службові класи генератора (примітка й посилання під секцією, тіло текстової секції). */
:root {
  --ba-surface: #FFFFFF;
  --ba-canvas: #E7ECF3;
  --ba-surface-sunken: #EAF1FA;
  --ba-line: #CFD9E6;
  --ba-line-soft: #E1E8F1;
  --ba-line-strong: #9DAEC4;
  --ba-ink: #0A1523;
  --ba-ink-2: #33415A;
  --ba-ink-3: #57677F;
  --ba-on-accent: #FFFFFF;
  --ba-accent: #2C5C95;
  --ba-accent-strong: #1F4677;
  --ba-accent-press: #17355B;
  --ba-accent-soft: #DBE7F5;
  --ba-accent-soft-2: #C3D8EF;
  --ba-fill-hover: #F1F5FB;
  --ba-ok: #027F58;
  --ba-warn: #AA5C03;
  --ba-danger: #D41A1E;
  --ba-danger-soft: #FBE9E7;
  --ba-danger-line: #E0BFBC;
  --ba-ok-soft: #E7F6EF;
  --ba-ok-line: #B6D2C5;
  --ba-warn-soft: #FEF3E2;
  --ba-warn-line: #DECAAA;
  --ba-info: #197091;
  --ba-info-soft: #E4F1F6;
  --ba-info-line: #B4CCD5;
  --ba-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ba-font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --ba-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --ba-fw-normal: 400;
  --ba-fw-medium: 500;
  --ba-fw-semi: 600;
  --ba-ls-tight: -.02em;
  --ba-ls-wide: .05em;
  --ba-lh-tight: 1.2;
  --ba-lh-base: 1.5;
  --ba-num: tabular-nums;
  --ba-sp-4: 4px;
  --ba-sp-8: 8px;
  --ba-sp-12: 12px;
  --ba-sp-16: 16px;
  --ba-sp-24: 24px;
  --ba-sp-32: 32px;
  --ba-radius: 4px;
  --ba-radius-card: 6px;
  --ba-radius-pill: 999px;
  --ba-ring: 0 0 0 3px var(--ba-accent-soft-2);
  --ba-marker-w: 2px;
  --ba-icon-stroke: 1.5;
  --ba-dur-fast: .12s;
  --ba-dur-base: .16s;
  --ba-ease-out: cubic-bezier(.22,.61,.36,1);

  --site-w: 1200px;
  --site-w-text: 720px;
  --site-gutter: clamp(20px, 4vw, 40px);
  --site-sec: clamp(64px, 7.5vw, 104px);
  --site-sp-48: 48px;
  --site-sp-64: 64px;
  --site-gap: clamp(24px, 3vw, 40px);
  --site-fs-hero: clamp(34px, 4.6vw, 58px);
  --site-fs-h2: clamp(26px, 2.9vw, 36px);
  --site-fs-h3: 18px;
  --site-fs-price: clamp(32px, 3vw, 40px);
  --site-fs-lead: clamp(15px, 1.2vw, 17px);
  --site-fs-body: 14px;
  --site-fs-small: 13px;
  --site-fs-kicker: 12px;
  --site-fs-logo: 22px;
  --site-ls-hero: -.028em;
  --site-fs-hero-long: clamp(30px, 3.6vw, 46px);
  --site-lh-hero-long: 1.08;
  --site-lh-hero: 1.02;
  --site-measure: 36ch;
  --site-header-h: 64px;
  --site-header-bg: rgb(255 255 255 / .92);
  --site-btn-h: 48px;
  --site-btn-px: 22px;
  --site-logo-h: 26px;
  --site-icon: 18px;
  --site-node: 14px;
  --site-node-lg: 18px;
  --site-rule: 2px;
  --site-brace-h: 14px;
  --site-sh-strip: 0 1px 3px 0 rgb(10 21 35 / .10), 0 1px 2px -1px rgb(10 21 35 / .08);
  --site-shot-shadow: 0 32px 64px -28px rgb(10 21 35 / .30), 0 0 0 1px var(--ba-line);
  --site-chain-step: .14s;
  --site-chain-fill: .4s;
  --site-bar-h: 32px;
  --site-shot-w: 560px;
  --ba-sh-2: 0 6px 22px -8px rgb(10 21 35 / .14), 0 1px 2px -1px rgb(10 21 35 / .08);
  --site-rail: 44px;
  --site-card-min: 240px;
  --site-dot: 8px;
  --site-fs-result: clamp(18px, 1.7vw, 22px);
  --site-icon-result: 28px;
  --site-fs-pain: 14px;
  --site-drop-max: calc(100vh - var(--site-header-h));
  --site-hero-bg: #F3F7FC;
  --site-foot-bg: #0F2340;
  --site-foot-ink: #C9D6E8;
  --site-foot-line: #2A4466;
  --site-og-w: 1200px;
  --site-og-h: 630px;
  --site-fs-og: 64px;
  --site-fs-og-logo: 36px;
  --site-fs-og-chain: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--site-header-h) + var(--ba-sp-16)); }
body {
  margin: 0;
  background: var(--ba-surface);
  color: var(--ba-ink);
  font-family: var(--ba-font);
  font-size: var(--site-fs-body);
  line-height: var(--ba-lh-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ba-accent-strong); text-decoration: none; }
a:hover { color: var(--ba-accent-press); }
:focus-visible { outline: none; box-shadow: var(--ba-ring); border-radius: var(--ba-radius); }
h1, h2, h3 { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { max-width: calc(var(--site-w) + 2 * var(--site-gutter)); margin: 0 auto; padding: 0 var(--site-gutter); }
.section { padding: var(--site-sec) 0; }
.section--tint { background: var(--ba-surface-sunken); }
.section__head { max-width: var(--site-w-text); margin-bottom: var(--site-sp-64); }
.section__title { font-size: var(--site-fs-h2); line-height: 1.08; letter-spacing: var(--site-ls-hero); }
.section__lead { margin-top: var(--ba-sp-16); font-size: var(--site-fs-lead); color: var(--ba-ink-2); }
.kicker {
  display: inline-flex; align-items: center; gap: var(--ba-sp-8);
  font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi);
  letter-spacing: var(--ba-ls-wide); text-transform: uppercase; color: var(--ba-accent-strong);
}
.kicker::before { content: ""; width: var(--ba-sp-16); height: var(--site-rule); background: var(--ba-accent); }

/* Логотип */
.logo { display: inline-flex; align-items: baseline; gap: var(--ba-sp-8); color: var(--ba-ink); }
.logo:hover { color: var(--ba-ink); }
.logo__mark { width: var(--site-logo-h); height: var(--site-logo-h); flex: none; color: var(--ba-accent); transform: translateY(12.5%); }
.logo__word { font-family: var(--ba-font); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-logo); letter-spacing: var(--ba-ls-tight); line-height: 1; white-space: nowrap; }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ba-sp-8);
  min-height: var(--site-btn-h); padding: 0 var(--site-btn-px);
  border: 1px solid transparent; border-radius: var(--ba-radius);
  font: var(--ba-fw-semi) var(--site-fs-body)/1 var(--ba-font);
  transition: background var(--ba-dur-base) var(--ba-ease-out), border-color var(--ba-dur-base) var(--ba-ease-out);
}
.btn--primary { background: var(--ba-accent); color: var(--ba-on-accent); }
.btn--primary:hover { background: var(--ba-accent-strong); color: var(--ba-on-accent); }
.btn--primary:active { background: var(--ba-accent-press); }
.btn--outline { background: var(--ba-surface); color: var(--ba-ink); border-color: var(--ba-line-strong); }
.btn--outline:hover { background: var(--ba-fill-hover); color: var(--ba-ink); border-color: var(--ba-ink-3); }
.btn--sm { min-height: calc(var(--site-btn-h) - var(--ba-sp-8)); padding: 0 var(--ba-sp-16); font-size: var(--site-fs-small); }
.actions { display: flex; flex-wrap: wrap; gap: var(--ba-sp-12); }
.more { display: inline-flex; align-items: center; gap: var(--ba-sp-4); font-weight: var(--ba-fw-semi); }
.more::after { content: "→"; transition: transform var(--ba-dur-base) var(--ba-ease-out); }
.more:hover::after { transform: translateX(var(--ba-sp-4)); }

/* Шапка */
.header { position: sticky; top: 0; z-index: 10; background: var(--site-header-bg); backdrop-filter: blur(var(--ba-sp-12)); border-bottom: 1px solid var(--ba-line-soft); }
.header__bar { display: flex; align-items: center; gap: var(--ba-sp-32); min-height: var(--site-header-h); }
.nav { display: flex; gap: var(--ba-sp-4); margin-right: auto; }
.nav__link { padding: var(--ba-sp-8) var(--ba-sp-12); border-radius: var(--ba-radius); color: var(--ba-ink-2); font-size: var(--site-fs-small); font-weight: var(--ba-fw-medium); white-space: nowrap; }
.nav__link:hover { background: var(--ba-fill-hover); color: var(--ba-ink); }
.nav__link[aria-current="page"] { color: var(--ba-ink); box-shadow: inset 0 calc(-1 * var(--ba-marker-w)) 0 var(--ba-accent); border-radius: 0; }

/* Герой */
.hero { padding: var(--site-sp-64) 0 var(--site-sec); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--site-sp-64); align-items: center; }
.hero__title { margin-top: var(--ba-sp-24); font-size: var(--site-fs-hero); line-height: var(--site-lh-hero); letter-spacing: var(--site-ls-hero); }
.hero__lead { margin-top: var(--ba-sp-24); font-size: var(--site-fs-lead); color: var(--ba-ink-2); max-width: var(--site-measure); }
.hero .actions { margin-top: var(--ba-sp-32); }
.hero__micro { margin-top: var(--ba-sp-16); font-size: var(--site-fs-small); color: var(--ba-ink-3); max-width: var(--site-measure); }
.hero__shot { position: relative; }
.hero__shot img { border-radius: var(--ba-radius-card); box-shadow: var(--site-shot-shadow); }
.hero--center { text-align: center; }
.hero--center .hero__title { max-width: 16ch; margin-left: auto; margin-right: auto; }
.hero--center .hero__title--long { max-width: 22ch; }
.hero__title--long { font-size: var(--site-fs-hero-long); line-height: var(--site-lh-hero-long); }
.hero--center .hero__lead, .hero--center .hero__micro { margin-left: auto; margin-right: auto; max-width: 52ch; }
.hero--center .actions { justify-content: center; }
.hero__chain { margin-top: var(--site-sp-64); text-align: left; }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--site-gap); margin-top: var(--site-sp-64); padding-top: var(--ba-sp-24); border-top: 1px solid var(--ba-line); text-align: left; }
.facts__item { display: flex; gap: var(--ba-sp-8); align-items: flex-start; font-size: var(--site-fs-small); font-weight: var(--ba-fw-medium); color: var(--ba-ink-2); }
.facts__item svg { flex: none; width: var(--site-icon); height: var(--site-icon); color: var(--ba-accent); margin-top: calc(var(--ba-sp-4) / 2); }

/* Ланцюг — один компонент: опори, ціни, шлях партнера */
.chain { display: grid; grid-template-columns: var(--chain-cols, 3fr 4fr 4fr); gap: var(--site-gap); }
.chain__seg { display: flex; flex-direction: column; min-width: 0; }
.chain__links { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.chain__link { position: relative; padding-top: calc(var(--site-node) + var(--ba-sp-12)); font-size: var(--site-fs-small); font-weight: var(--ba-fw-semi); color: var(--ba-ink-2); padding-right: var(--ba-sp-8); overflow-wrap: anywhere; }
.chain__link::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1;
  width: var(--site-node); height: var(--site-node); border-radius: var(--ba-radius-pill);
  background: var(--ba-accent); border: var(--site-rule) solid var(--ba-accent);
}
.chain__link::after {
  content: ""; position: absolute; left: var(--site-node); right: 0;
  top: calc((var(--site-node) - var(--site-rule)) / 2); height: var(--site-rule); background: var(--ba-accent-soft-2);
}
.chain__seg:not(:last-child) .chain__link:last-child::after { right: calc(-1 * var(--site-gap)); }
.chain__seg:last-child .chain__link:last-child::after { display: none; }
.chain__brace {
  position: relative; height: var(--site-brace-h); margin: var(--ba-sp-16) 0 var(--ba-sp-24);
  border: var(--site-rule) solid var(--ba-line-strong); border-top: 0;
  border-radius: 0 0 var(--ba-radius-card) var(--ba-radius-card);
}
.chain__brace::after { content: ""; position: absolute; left: 50%; top: 100%; width: var(--site-rule); height: var(--site-brace-h); background: var(--ba-line-strong); transform: translateX(-50%); }
.chain__body { display: flex; flex-direction: column; gap: var(--ba-sp-12); flex: 1; padding-top: var(--ba-sp-16); }
.chain__name { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.chain__text { color: var(--ba-ink-2); }
.chain__body .more, .chain__body .btn { margin-top: auto; align-self: flex-start; }
.chain__caption { margin-top: var(--site-sp-48); color: var(--ba-ink-3); font-size: var(--site-fs-small); max-width: var(--site-w-text); }

@media (prefers-reduced-motion: no-preference) {
  .js .chain--live .chain__link::before { background: var(--ba-surface); }
  .js .chain--live .chain__link::after { transform: scaleX(0); transform-origin: left; }
  .js .chain--live.is-on .chain__link::before { animation: chain-node var(--site-chain-fill) var(--ba-ease-out) forwards; animation-delay: calc(var(--i) * var(--site-chain-step)); }
  .js .chain--live.is-on .chain__link::after { animation: chain-line var(--site-chain-fill) var(--ba-ease-out) forwards; animation-delay: calc(var(--i) * var(--site-chain-step) + var(--site-chain-step) / 2); }
}
@keyframes chain-node { to { background: var(--ba-accent); } }
@keyframes chain-line { to { transform: scaleX(1); } }
.chain--lg { --site-node: var(--site-node-lg); }
.chain--lg .chain__link { font-size: var(--site-fs-body); }
.chain__tag { margin-top: var(--ba-sp-12); font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-h3); text-align: center; }
.chain--path { --chain-cols: 1fr; }

/* Ціна всередині ланцюга */
.depth { display: grid; grid-template-columns: 3fr 4fr 4fr; column-gap: var(--site-gap); row-gap: var(--ba-sp-4); margin: var(--ba-sp-24) 0 var(--site-sp-48); }
.depth__bar { display: flex; align-items: center; min-height: var(--site-bar-h); padding: 0 var(--ba-sp-12); border-radius: var(--ba-radius); font-size: var(--site-fs-small); font-weight: var(--ba-fw-semi); }
.depth__bar--1 { grid-column: 1 / 2; background: var(--ba-accent-soft); color: var(--ba-accent-strong); }
.depth__bar--2 { grid-column: 1 / 3; background: var(--ba-accent-soft-2); color: var(--ba-accent-press); }
.depth__bar--3 { grid-column: 1 / 4; background: var(--ba-accent); color: var(--ba-on-accent); }
.plans { display: grid; grid-template-columns: 3fr 4fr 4fr; gap: var(--site-gap); }
.plan { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding-top: var(--ba-sp-24); border-top: 1px solid var(--ba-line); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan__price { display: flex; align-items: baseline; gap: var(--ba-sp-8); flex-wrap: wrap; }
.plan__sum { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-price); letter-spacing: var(--ba-ls-tight); line-height: 1; font-variant-numeric: var(--ba-num); }
.plan__per { color: var(--ba-ink-3); font-size: var(--site-fs-small); }
.plan__limit { font-size: var(--site-fs-small); font-weight: var(--ba-fw-semi); color: var(--ba-accent-strong); }
.plan__limit abbr { text-decoration: underline dotted var(--ba-line-strong); text-underline-offset: var(--ba-sp-4); cursor: help; }
.plan__note { display: grid; gap: var(--ba-sp-16); margin-top: var(--site-sp-48); padding-top: var(--ba-sp-24); border-top: 1px solid var(--ba-line); color: var(--ba-ink-2); font-size: var(--site-fs-small); }

/* Опори з кадрами (герой Б) */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-gap); }
.pillar { display: flex; flex-direction: column; gap: var(--ba-sp-12); }
.pillar__shot { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ba-radius-card); box-shadow: var(--site-shot-shadow); background: var(--ba-canvas); margin-bottom: var(--ba-sp-12); }
.pillar__shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.pillar__shot--strip { display: flex; align-items: center; padding: var(--ba-sp-16); }
.pillar__shot--strip img { height: auto; object-fit: contain; border-radius: var(--ba-radius-card); box-shadow: var(--site-sh-strip); }
.pillar .more { margin-top: auto; }

/* Сценарії */
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--site-gap); row-gap: var(--site-sp-48); }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--site-gap); }
.split .section__head { margin-bottom: 0; position: sticky; top: calc(var(--site-header-h) + var(--ba-sp-32)); align-self: start; }
.split .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.job { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding-top: var(--ba-sp-24); border-top: 1px solid var(--ba-line); }
.job__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.job__text { color: var(--ba-ink-2); }

/* Для кого */
.audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-gap); }
.audience__item { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding: var(--ba-sp-32); background: var(--ba-surface); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); }
.audience__item--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--site-gap); align-items: center; border-color: var(--ba-accent-soft-2); }
.audience__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.audience__item--lead .audience__title { font-size: var(--site-fs-h2); line-height: 1.08; letter-spacing: var(--site-ls-hero); }
.audience__text { color: var(--ba-ink-2); }
.audience__item--lead .audience__text { margin-top: var(--ba-sp-16); font-size: var(--site-fs-lead); }
.audience__shot img { border-radius: var(--ba-radius-card); box-shadow: var(--site-shot-shadow); }
.audience__not { margin-top: var(--site-sp-48); color: var(--ba-ink-3); font-size: var(--site-fs-small); max-width: var(--site-w-text); }

/* Картки умов (партнери) */
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ba-line); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); overflow: hidden; }
.term { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding: var(--ba-sp-32); background: var(--ba-surface); }
.term__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.term--lead { grid-column: span 2; grid-row: span 2; justify-content: flex-end; background: var(--ba-accent-soft); }
.term--lead .term__title { font-size: var(--site-fs-hero); line-height: var(--site-lh-hero); letter-spacing: var(--site-ls-hero); color: var(--ba-accent-strong); }
.term--lead .term__text { font-size: var(--site-fs-lead); color: var(--ba-ink); max-width: var(--site-measure); }
.term__text { color: var(--ba-ink-2); }
.work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-gap); }
.work__item { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding-top: var(--ba-sp-24); border-top: var(--site-rule) solid var(--ba-accent); }
.work__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.work__text { color: var(--ba-ink-2); }
.work__tags { display: flex; flex-wrap: wrap; gap: var(--ba-sp-8); margin-top: var(--ba-sp-8); }
.work__tag { padding: var(--ba-sp-4) var(--ba-sp-12); border-radius: var(--ba-radius); background: var(--ba-accent-soft); color: var(--ba-accent-strong); font-size: var(--site-fs-small); font-weight: var(--ba-fw-medium); }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--site-gap); }
.faq .section__head { margin-bottom: 0; }
.faq__list { border-top: 1px solid var(--ba-line); }
.faq__item { border-bottom: 1px solid var(--ba-line); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: var(--ba-sp-24);
  padding: var(--ba-sp-24) 0; cursor: pointer; list-style: none;
  font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--ba-accent-strong); }
.faq__q svg { flex: none; width: var(--site-icon); height: var(--site-icon); color: var(--ba-ink-3); transition: transform var(--ba-dur-base) var(--ba-ease-out); }
.faq__item[open] .faq__q svg { transform: rotate(45deg); }
.faq__a { padding: 0 var(--site-sp-48) var(--ba-sp-24) 0; color: var(--ba-ink-2); max-width: var(--site-w-text); }
.faq__all { margin-top: var(--ba-sp-32); }

/* Заклики */
.cta { background: var(--ba-canvas); text-align: center; }
.cta__title { font-size: var(--site-fs-h2); line-height: 1.08; letter-spacing: var(--site-ls-hero); }
.cta__text { margin: var(--ba-sp-16) auto 0; max-width: 52ch; font-size: var(--site-fs-lead); color: var(--ba-ink-2); }
.cta .actions { justify-content: center; margin-top: var(--ba-sp-32); }

/* Підвал */
.footer { padding: var(--site-sp-48) 0; border-top: 1px solid var(--ba-line); background: var(--ba-surface); }
.footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ba-sp-24); align-items: flex-start; }
.footer__brand { display: grid; gap: var(--ba-sp-12); max-width: 34ch; color: var(--ba-ink-2); font-size: var(--site-fs-small); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--ba-sp-8) var(--ba-sp-24); font-size: var(--site-fs-small); }
.footer__links a { color: var(--ba-ink-2); }
.footer__links a:hover { color: var(--ba-ink); }
.footer__copy { margin-top: var(--ba-sp-32); color: var(--ba-ink-3); font-size: var(--site-fs-small); }

@media (max-width: 960px) {
  .hero__grid, .audience__item--lead, .faq, .split { grid-template-columns: minmax(0, 1fr); }
  .split .section__head { position: static; }
  .depth { display: none; }
  .plans { grid-template-columns: minmax(0, 1fr); row-gap: var(--site-sp-48); }
  .term--lead { grid-row: auto; }
  .hero__shot { max-width: var(--site-shot-w); }
  .hero__shot { margin-right: 0; }
  .facts, .jobs, .audience, .terms, .work, .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain { grid-template-columns: minmax(0, 1fr); row-gap: var(--site-sp-48); }
  .chain__seg:not(:last-child) .chain__link:last-child::after { display: none; }
  .chain__tag { text-align: left; }
}
@media (max-width: 720px) {
  .header__bar { flex-wrap: wrap; gap: 0 var(--ba-sp-16); justify-content: space-between; }
  .nav { order: 3; flex-basis: 100%; margin: 0 calc(-1 * var(--site-gutter)); padding: 0 var(--site-gutter) var(--ba-sp-8); overflow-x: auto; scrollbar-width: none; }
  .header__bar { padding-top: var(--ba-sp-8); }
  .facts, .jobs, .audience, .terms, .work, .pillars, .split .jobs { grid-template-columns: minmax(0, 1fr); }
  .term--lead { grid-column: auto; }
  .audience__item, .term { padding: var(--ba-sp-24); }
  .faq__a { padding-right: 0; }
  .hero { padding-top: var(--site-sp-48); }
  .actions .btn { flex: 1 1 auto; }
  .chain--path .chain__links { grid-template-columns: minmax(0, 1fr); row-gap: var(--ba-sp-24); }
  .chain--path .chain__link { padding: 0 0 0 calc(var(--site-node) + var(--ba-sp-12)); }
  .chain--path .chain__link::before { top: var(--ba-sp-4); }
  .chain--path .chain__link::after { left: calc((var(--site-node) - var(--site-rule)) / 2); top: calc(var(--site-node) + var(--ba-sp-4)); bottom: calc(-1 * var(--ba-sp-24) - var(--ba-sp-4)); width: var(--site-rule); height: auto; right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Кадр для соцмереж — лише og.html */
body.og-page { overflow: auto; }
.og { width: var(--site-og-w); height: var(--site-og-h); padding: var(--site-sp-64); display: flex; flex-direction: column; justify-content: space-between; background: var(--ba-surface); border-top: var(--ba-sp-12) solid var(--ba-accent); }
.og .logo__mark { width: var(--site-fs-og-logo); height: var(--site-fs-og-logo); }
.og__top { display: flex; justify-content: space-between; align-items: baseline; }
.og__domain { color: var(--ba-ink-3); font-size: var(--site-fs-og-chain); font-weight: var(--ba-fw-medium); }
.og .logo__word { font-size: var(--site-fs-og-logo); }
.og__title { margin-top: var(--site-sp-48); max-width: 16ch; font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-og); line-height: var(--site-lh-hero); letter-spacing: var(--site-ls-hero); }
.og .og__chain { --site-node: var(--site-node-lg); grid-template-columns: 3fr 4fr 4fr; gap: var(--ba-sp-24); }
.og .og__chain .chain__seg:not(:last-child) .chain__link:last-child::after { display: block; right: calc(-1 * var(--ba-sp-24)); }
.og .og__chain .chain__link { font-size: var(--site-fs-og-chain); }

/* Меню «Рішення» */
.header { position: sticky; }
.navdrop { display: flex; }
.navdrop__toggle { display: inline-flex; align-items: center; gap: var(--ba-sp-4); }
.navdrop__toggle svg { width: var(--ba-sp-12); height: var(--ba-sp-12); transition: transform var(--ba-dur-base) var(--ba-ease-out); }
.navdrop.is-open .navdrop__toggle { color: var(--ba-ink); background: var(--ba-fill-hover); }
.navdrop.is-open .navdrop__toggle svg { transform: rotate(180deg); }
.navdrop__panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--ba-surface); border-bottom: 1px solid var(--ba-line); box-shadow: var(--ba-sh-2); max-height: var(--site-drop-max); overflow-y: auto; }
.navdrop.is-open .navdrop__panel { display: block; }
.navdrop__inner { padding-top: var(--ba-sp-32); padding-bottom: var(--ba-sp-32); }
.navdrop__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--site-gap); }
.navdrop__head {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0 var(--ba-sp-12); margin: 0 0 var(--ba-sp-8);
  border: 0; border-bottom: var(--site-rule) solid var(--ba-accent); background: none; text-align: left; cursor: default;
  font: var(--ba-fw-semi) var(--site-fs-kicker)/1.2 var(--ba-font); letter-spacing: var(--ba-ls-wide); text-transform: uppercase; color: var(--ba-accent-strong);
}
.navdrop__head svg { display: none; width: var(--ba-sp-16); height: var(--ba-sp-16); }
.navdrop__group--common .navdrop__head { border-bottom-color: var(--ba-line-strong); color: var(--ba-ink-2); }
.navdrop__list { display: grid; }
.navdrop__list a { display: block; padding: var(--ba-sp-8) 0; color: var(--ba-ink); font-size: var(--site-fs-small); }
.navdrop__list a:hover { color: var(--ba-accent-strong); }
.navdrop__list a[aria-current="page"] { color: var(--ba-accent-strong); font-weight: var(--ba-fw-semi); }
.navdrop__foot { display: flex; flex-wrap: wrap; gap: var(--ba-sp-24); margin-top: var(--ba-sp-24); padding-top: var(--ba-sp-16); border-top: 1px solid var(--ba-line-soft); font-size: var(--site-fs-small); }

/* Крихти */
.crumbs { padding-top: var(--ba-sp-24); }
.crumbs__list { display: flex; flex-wrap: wrap; gap: var(--ba-sp-4) var(--ba-sp-8); font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.crumbs__list li { display: flex; gap: var(--ba-sp-8); }
.crumbs__list li + li::before { content: "›"; color: var(--ba-line-strong); }
.crumbs__list a { color: var(--ba-ink-2); }
.crumbs__list a:hover { color: var(--ba-accent-strong); }
.crumbs__list [aria-current="page"] { color: var(--ba-ink); font-weight: var(--ba-fw-medium); }

/* Кадр на полотні — один вигляд для всіх кадрів шаблону */
.shot { margin: 0; padding: var(--ba-sp-24); background: var(--ba-canvas); border-radius: var(--ba-radius-card); }
.shot img { width: 100%; border-radius: var(--ba-radius-card); box-shadow: var(--site-sh-strip); }
.shot--tall { padding: var(--ba-sp-24) var(--ba-sp-24) 0; overflow: hidden; }
.shot--tall img { border-radius: var(--ba-radius-card) var(--ba-radius-card) 0 0; }

/* Герой рішення */
.hero--solution { padding-top: var(--site-sp-48); }
.hero--solution .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
.hero--solution .hero__title { font-size: var(--site-fs-hero-long); line-height: var(--site-lh-hero-long); }

/* Тариф — підсвічений відрізок ланцюга */
.tier { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ba-sp-8) var(--ba-sp-12); margin-top: var(--ba-sp-24); font-size: var(--site-fs-small); color: var(--ba-ink-2); }
.tier__chain { display: inline-flex; gap: var(--ba-sp-8); }
.tier__seg { display: inline-flex; gap: var(--ba-sp-4); }
.tier__dot { width: var(--site-dot); height: var(--site-dot); border-radius: var(--ba-radius-pill); background: var(--ba-line); }
.tier__seg--on .tier__dot { background: var(--ba-accent); }
.cta .tier { justify-content: center; }

/* Біль */
.pain__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--site-card-min), 1fr)); gap: var(--site-gap); counter-reset: pain; }
.pain__item { counter-increment: pain; display: grid; gap: var(--ba-sp-16); padding-top: var(--ba-sp-24); border-top: 1px solid var(--ba-line-strong); font-size: var(--site-fs-pain); color: var(--ba-ink); }
.pain__item::before { content: counter(pain, decimal-leading-zero); font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi); letter-spacing: var(--ba-ls-wide); color: var(--ba-ink-3); font-variant-numeric: var(--ba-num); }

/* Що робить Krokul */
.solution__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--site-card-min), 1fr)); gap: var(--site-gap); }
.solution__item { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding-top: var(--ba-sp-24); border-top: var(--site-rule) solid var(--ba-accent); }
.solution__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.solution__text { color: var(--ba-ink-2); }

/* Як це працює */
.steps { counter-reset: step; display: grid; }
.step { counter-increment: step; position: relative; display: grid; grid-template-columns: var(--site-rail) minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--site-gap); padding-bottom: var(--site-sp-64); }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: counter(step); grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center;
  width: var(--site-rail); height: var(--site-rail); border-radius: var(--ba-radius-pill);
  background: var(--ba-accent); color: var(--ba-on-accent); font: var(--ba-fw-semi) var(--site-fs-h3)/1 var(--ba-font-display); position: relative; z-index: 1;
}
.step::after { content: ""; position: absolute; left: calc((var(--site-rail) - var(--site-rule)) / 2); top: var(--site-rail); bottom: 0; width: var(--site-rule); background: var(--ba-accent-soft-2); }
.step:last-child::after { display: none; }
.step__text { grid-column: 2; display: flex; flex-direction: column; gap: var(--ba-sp-12); padding-top: var(--ba-sp-8); }
.step__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.step__body { color: var(--ba-ink-2); }
.step .shot { grid-column: 3; grid-row: 1 / span 2; align-self: start; }
.step--text .step__text { grid-column: 2 / 4; max-width: var(--site-w-text); }

/* Результат */
.result { background: var(--ba-surface); border-top: 1px solid var(--ba-line); }
.result__list { display: grid; border-top: var(--site-rule) solid var(--ba-accent); }
.result__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ba-sp-24); align-items: start; padding: var(--ba-sp-32) 0; border-bottom: 1px solid var(--ba-line); font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-result); line-height: 1.3; letter-spacing: var(--ba-ls-tight); text-wrap: pretty; }
.result__item svg { width: var(--site-icon-result); height: var(--site-icon-result); padding: var(--ba-sp-4); border-radius: var(--ba-radius); background: var(--ba-accent); color: var(--ba-on-accent); margin-top: var(--ba-sp-4); }

/* Межі */
.limits__box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ba-sp-24); padding: var(--ba-sp-32); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); font-size: var(--site-fs-lead); color: var(--ba-ink); }
.limits__box svg { width: var(--ba-sp-24); height: var(--ba-sp-24); color: var(--ba-ink-3); margin-top: var(--ba-sp-4); }
.limits__box p + p { margin-top: var(--ba-sp-12); }

/* Далі в ланцюзі */
.related__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--site-gap); }
.related__card { display: grid; gap: var(--ba-sp-8); padding: var(--ba-sp-32); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); background: var(--ba-surface); color: var(--ba-ink); transition: border-color var(--ba-dur-base) var(--ba-ease-out), background var(--ba-dur-base) var(--ba-ease-out); }
.related__card:hover { color: var(--ba-ink); border-color: var(--ba-accent); background: var(--ba-fill-hover); }
.related__card--next { text-align: right; }
.related__dir { font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi); letter-spacing: var(--ba-ls-wide); text-transform: uppercase; color: var(--ba-accent-strong); }
.related__title { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.related__also { display: flex; flex-wrap: wrap; gap: var(--ba-sp-8) var(--ba-sp-24); margin-top: var(--ba-sp-24); font-size: var(--site-fs-small); color: var(--ba-ink-3); }

/* Хаб */
.hub .chain__body { padding-top: 0; }
.hub__list { display: grid; gap: var(--ba-sp-24); }
.hub__item { display: grid; gap: var(--ba-sp-4); }
.hub__title { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-body); line-height: var(--ba-lh-tight); }
.hub__title a { color: var(--ba-ink); }
.hub__title a:hover { color: var(--ba-accent-strong); }
.hub__pain { color: var(--ba-ink-2); font-size: var(--site-fs-small); }
.hub__tag { justify-self: start; margin-top: var(--ba-sp-4); padding: 0 var(--ba-sp-8); border-radius: var(--ba-radius); background: var(--ba-accent-soft); color: var(--ba-accent-strong); font-size: var(--ba-sp-12); font-weight: var(--ba-fw-semi); line-height: 1.6; }
.hub__common { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ba-sp-32) var(--site-gap); }
.hub__common .hub__item { padding-top: var(--ba-sp-16); border-top: 1px solid var(--ba-line); }
.job__more { margin-top: auto; font-size: var(--site-fs-small); }

/* Підвал: колонки */
.footer__cols { display: flex; flex-wrap: wrap; gap: var(--site-sp-48); }
.footer__col { display: grid; gap: var(--ba-sp-8); align-content: start; font-size: var(--site-fs-small); }
.footer__head { font-weight: var(--ba-fw-semi); color: var(--ba-ink); }
.footer__col a { color: var(--ba-ink-2); }
.footer__col a:hover { color: var(--ba-ink); }

@media (max-width: 960px) {
  .navdrop__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero--solution .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: var(--site-rail) minmax(0, 1fr); }
  .step .shot, .step--text .step__text { grid-column: 2; }
  .step .shot { grid-row: auto; margin-top: var(--ba-sp-24); }
  .hub__common { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .navdrop { position: static; }
  .navdrop__inner { padding-top: var(--ba-sp-8); padding-bottom: var(--ba-sp-24); }
  .navdrop__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .navdrop__head { cursor: pointer; padding: var(--ba-sp-16) 0; margin: 0; border-bottom: 1px solid var(--ba-line-soft); font-size: var(--site-fs-small); }
  .navdrop__group--common .navdrop__head { border-bottom-color: var(--ba-line-soft); }
  .navdrop__head svg { display: block; transition: transform var(--ba-dur-base) var(--ba-ease-out); }
  .navdrop__group .navdrop__list { display: none; padding: var(--ba-sp-4) 0 var(--ba-sp-12); }
  .navdrop__group.is-open .navdrop__list { display: grid; }
  .navdrop__group.is-open .navdrop__head svg { transform: rotate(180deg); }
  .step { column-gap: var(--ba-sp-16); }
  .shot { padding: var(--ba-sp-12); }
  .related__pair, .hub__common { grid-template-columns: minmax(0, 1fr); }
  .related__card--next { text-align: left; }
  .limits__box { grid-template-columns: minmax(0, 1fr); padding: var(--ba-sp-24); }
}

/* Далі в ланцюзі — всередині заклику */
.cta .related { max-width: var(--site-w); margin: var(--site-sp-64) auto 0; padding-top: var(--site-sp-48); border-top: 1px solid var(--ba-line-strong); text-align: left; }
.related__head { margin-bottom: var(--ba-sp-24); font-size: var(--site-fs-h3); }
.tier__seg { cursor: help; }

.shot--narrow { display: flex; justify-content: center; }
.shot--narrow img { width: auto; max-width: 100%; }
.path__shot { margin-top: var(--site-sp-48); }

/* Можливості: групи */
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--site-gap); row-gap: var(--site-sp-64); }
.group { display: flex; flex-direction: column; gap: var(--ba-sp-16); padding-top: var(--ba-sp-24); border-top: var(--site-rule) solid var(--ba-accent); scroll-margin-top: calc(var(--site-header-h) + var(--ba-sp-32)); }
.group__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.group__list { display: grid; list-style: none; }
.group__list li { padding: var(--ba-sp-12) 0; border-bottom: 1px solid var(--ba-line); color: var(--ba-ink-2); text-wrap: pretty; }
.group__more { align-self: flex-start; }

/* Порівняння */
.cmp { overflow-x: auto; border: 1px solid var(--ba-line); border-radius: var(--ba-radius); background: var(--ba-surface); }
.cmp__table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: var(--site-fs-small); }
.cmp__table th, .cmp__table td { padding: var(--ba-sp-16); text-align: left; vertical-align: top; border-bottom: 1px solid var(--ba-line); color: var(--ba-ink-2); text-wrap: pretty; }
.cmp__table thead th { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); color: var(--ba-ink); border-bottom: var(--site-rule) solid var(--ba-line); }
.cmp__table tbody th { font-weight: var(--ba-fw-medium); color: var(--ba-ink); width: 22%; }
.cmp__table tbody tr:last-child > * { border-bottom: 0; }
.cmp__table .cmp__us { background: var(--ba-accent-soft); color: var(--ba-ink); font-weight: var(--ba-fw-medium); }
.cmp__table thead .cmp__us { background: var(--ba-accent); color: var(--ba-on-accent); }
.cmp__yes { display: inline-flex; color: var(--ba-accent); }
.cmp__yes svg { width: var(--site-icon); height: var(--site-icon); }
.cmp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cmp__no { color: var(--ba-ink-3); }

/* Ціни: обсяг */
.volume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-gap); }
.volume__item { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding: var(--ba-sp-24); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); background: var(--ba-surface); }
.volume__item--lead { border-color: var(--ba-accent); }
.volume__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.volume__sum { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-result); color: var(--ba-accent-strong); font-variant-numeric: tabular-nums; }
.volume__text { color: var(--ba-ink-2); }
.volume + .chain__caption { margin-top: var(--ba-sp-24); }
.facts:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .groups, .volume { grid-template-columns: minmax(0, 1fr); }
}

/* Колір: герой, заклик, підвал */
.hero { background: var(--site-hero-bg); border-bottom: 1px solid var(--ba-line-soft); }
.cta { background: var(--ba-accent); color: var(--ba-on-accent); }
.cta .cta__text { color: var(--ba-on-accent); }
.cta .btn--primary { background: var(--ba-surface); color: var(--ba-accent-strong); }
.cta .btn--primary:hover { background: var(--ba-accent-soft); color: var(--ba-accent-press); }
.cta .btn--outline { background: transparent; color: var(--ba-on-accent); border-color: var(--ba-on-accent); }
.cta .btn--outline:hover { background: var(--ba-accent-strong); color: var(--ba-on-accent); }
.cta .related { border-top-color: var(--ba-accent-soft-2); }
.cta .related__head, .cta .related__also, .cta .related__also a, .cta .related__also .more { color: var(--ba-on-accent); }
.footer { background: var(--site-foot-bg); border-top: 0; color: var(--site-foot-ink); }
.footer .footer__brand, .footer .footer__copy, .footer .footer__col a, .footer .footer__links a { color: var(--site-foot-ink); }
.footer .footer__head, .footer .footer__col a:hover, .footer .footer__links a:hover, .footer .logo { color: var(--ba-on-accent); }
.kicker { color: var(--ba-accent-strong); }

/* Ціни: картки */
.section--plans { padding-top: var(--site-sp-64); }
.plans--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.plans--cards .plan { gap: var(--ba-sp-16); padding: var(--ba-sp-32); border: 1px solid var(--ba-line); border-top: 4px solid var(--ba-accent-soft-2); border-radius: var(--ba-radius-card); background: var(--ba-surface); }
.plans--cards .plan--2 { border-color: var(--ba-accent); border-top-color: var(--ba-accent); box-shadow: var(--ba-sh-2); }
.plans--cards .plan--3 { border-top-color: var(--ba-accent-press); }
.plans--cards .plan .btn { margin-top: 0; align-self: stretch; justify-content: center; }
.plan__name { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.plan__inc { font-size: var(--site-fs-small); font-weight: var(--ba-fw-semi); color: var(--ba-ink); padding-top: var(--ba-sp-16); border-top: 1px solid var(--ba-line-soft); }
.plan--1 .plan__list { padding-top: var(--ba-sp-16); border-top: 1px solid var(--ba-line-soft); }
.plan__list { display: grid; gap: var(--ba-sp-8); font-size: var(--site-fs-small); color: var(--ba-ink-2); }
.plan__list li { display: flex; gap: var(--ba-sp-8); align-items: flex-start; }
.plan__list svg { flex: none; width: var(--site-icon); height: var(--site-icon); color: var(--ba-ok); margin-top: 1px; }
.plans--cards + .plan__note { display: grid; gap: var(--ba-sp-8); margin-top: var(--site-sp-48); font-size: var(--site-fs-small); color: var(--ba-ink-3); max-width: var(--site-w-text); }
@media (max-width: 900px) { .plans--cards { grid-template-columns: minmax(0, 1fr); } }
.hero--compact { padding: var(--site-sp-48) 0; }
.plans--cards .plan .btn { text-align: center; }
.plans--cards .plan__limit { min-height: calc(3em * var(--ba-lh-base)); }
@media (max-width: 900px) { .plans--cards .plan__limit { min-height: 0; } }
.cta .tier { color: var(--ba-on-accent); }
.cta .tier__dot { background: var(--ba-accent-strong); }
.cta .tier__seg--on .tier__dot { background: var(--ba-on-accent); }

/* Кольори етапів: продати — синій, гроші — зелений, маржа — бурштин */
:root { --st-1: var(--ba-accent); --st-1s: var(--ba-accent-soft); --st-2: var(--ba-ok); --st-2s: var(--ba-ok-soft); --st-3: var(--ba-warn); --st-3s: var(--ba-warn-soft); }
.chain__seg:nth-child(1) { --st: var(--st-1); --sts: var(--st-1s); }
.chain__seg:nth-child(2) { --st: var(--st-2); --sts: var(--st-2s); }
.chain__seg:nth-child(3) { --st: var(--st-3); --sts: var(--st-3s); }
.chain__seg .chain__link::before { background: var(--st, var(--ba-accent)); border-color: var(--st, var(--ba-accent)); }
.chain__seg .chain__link::after { background: var(--st, var(--ba-accent-soft-2)); opacity: .35; }
.chain__seg .chain__name { color: var(--st); }
.chain__seg .chain__tag { color: var(--st); }
@media (prefers-reduced-motion: no-preference) {
  .js .chain--live .chain__seg .chain__link::before { background: var(--ba-surface); }
  .js .chain--live.is-on .chain__seg .chain__link::before { animation-name: chain-node-st; }
}
@keyframes chain-node-st { to { background: var(--st, var(--ba-accent)); } }
.depth__bar--1 { background: var(--st-1s); color: var(--ba-accent-strong); }
.depth__bar--2 { background: var(--st-2s); color: var(--ba-ok); }
.depth__bar--3 { background: var(--st-3s); color: var(--ba-warn); }
.plans--cards .plan--1 { border-top-color: var(--st-1); }
.plans--cards .plan--2 { border-top-color: var(--st-2); border-color: var(--ba-ok-line); border-top-color: var(--st-2); }
.plans--cards .plan--3 { border-top-color: var(--st-3); }
.plans--cards .plan--1 .plan__limit { color: var(--ba-accent-strong); }
.plans--cards .plan--2 .plan__limit { color: var(--ba-ok); }
.plans--cards .plan--3 .plan__limit { color: var(--ba-warn); }
.plans--cards .plan--2 .btn--primary { background: var(--ba-ok); border-color: var(--ba-ok); }
.plans--cards .plan--2 .btn--primary:hover { background: var(--ba-accent-strong); border-color: var(--ba-accent-strong); }
.tier__seg--on:nth-child(1) .tier__dot { background: var(--st-1); }
.tier__seg--on:nth-child(2) .tier__dot { background: var(--st-2); }
.tier__seg--on:nth-child(3) .tier__dot { background: var(--st-3); }
.cta .tier__seg--on .tier__dot { background: var(--ba-on-accent); }
/* Акценти секцій */
.section--tint { background: var(--ba-info-soft); }
.pain__item { border-top-color: var(--ba-danger-line); }
.pain__item::before { color: var(--ba-danger); }
.solution__item:nth-child(3n+2) { border-top-color: var(--st-2); }
.solution__item:nth-child(3n) { border-top-color: var(--st-3); }
.group:nth-child(4n+2) { border-top-color: var(--st-2); }
.group:nth-child(4n+3) { border-top-color: var(--st-3); }
.group:nth-child(4n) { border-top-color: var(--ba-info); }
.facts__item svg, .plan__list svg { color: var(--ba-ok); }
.result__item svg { background: var(--ba-ok); }
.result__list { border-top-color: var(--ba-ok); }
.cmp__yes { color: var(--ba-ok); }
.kicker { color: var(--ba-info); }
.work__tag { background: var(--ba-info-soft); color: var(--ba-info); }
/* Логотип у темному підвалі */
.footer .logo__mark { color: var(--ba-accent-soft-2); }

/* Мобільне меню */
.burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: calc(-1 * var(--ba-sp-8)); padding: 0; border: 0; border-radius: var(--ba-radius); background: none; color: var(--ba-ink); cursor: pointer; }
.burger:hover { background: var(--ba-fill-hover); }
.burger svg { width: var(--ba-sp-24); height: var(--ba-sp-24); }
.burger__close { display: none; }
.header.is-menu .burger__open { display: none; }
.header.is-menu .burger__close { display: inline; }
.nav__cta { display: none; }
@media (max-width: 720px) {
  .header__bar { flex-wrap: nowrap; padding-top: 0; gap: var(--ba-sp-12); }
  .header .logo { margin-right: auto; }
  .burger { display: inline-flex; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - var(--site-header-h)); flex-direction: column; flex-basis: auto; order: 0; gap: 0; margin: 0; padding: var(--ba-sp-8) var(--site-gutter) var(--ba-sp-32); background: var(--ba-surface); border-top: 1px solid var(--ba-line-soft); overflow-y: auto; }
  .header.is-menu { background: var(--ba-surface); backdrop-filter: none; }
  .header.is-menu .nav { display: flex; }
  .nav > .nav__link, .nav .navdrop__toggle { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0; border-radius: 0; border-bottom: 1px solid var(--ba-line-soft); font-size: var(--site-fs-lead); font-weight: var(--ba-fw-semi); color: var(--ba-ink); box-shadow: none; }
  .nav > .nav__link:hover, .nav .navdrop__toggle:hover, .navdrop.is-open .navdrop__toggle { background: none; }
  .nav .nav__link[aria-current="page"] { color: var(--ba-accent-strong); box-shadow: none; }
  .nav .navdrop__toggle svg { width: var(--ba-sp-16); height: var(--ba-sp-16); }
  .navdrop { flex-direction: column; }
  .navdrop__panel { position: static; max-height: none; overflow: visible; box-shadow: none; border-bottom: 1px solid var(--ba-line-soft); }
  .navdrop__panel > .wrap { padding-left: 0; padding-right: 0; }
  .navdrop__head { font-size: var(--site-fs-body); text-transform: none; letter-spacing: 0; color: var(--ba-ink-2); }
  .navdrop__list a { min-height: 44px; display: flex; align-items: center; padding: 0 0 0 var(--ba-sp-12); font-size: var(--site-fs-body); }
  .nav__cta { display: inline-flex; justify-content: center; margin-top: var(--ba-sp-24); flex: none; }
  body.menu-open { overflow: hidden; }
}

/* ---- Службові класи генератора (не з пачки): примітка під секцією, посилання «ще» під секцією,
 * тіло текстової секції. Ті самі токени. ---- */
.section__note { margin-top: var(--site-sp-48); color: var(--ba-ink-3); font-size: var(--site-fs-small); max-width: var(--site-w-text); }
.section__more { margin-top: var(--ba-sp-32); }
.text__body { max-width: var(--site-w-text); color: var(--ba-ink-2); font-size: var(--site-fs-lead); }
/* OG на сторінку (генератор, --og): довгий H1 у картці 1200×630 — менший кегль, ширша колонка. */
.og__title--long { font-size: 44px; max-width: 24ch; line-height: 1.12; }