/* ============================================================
   it-sov.ru — стили главной страницы
   Палитра, типографика, сетка и компоненты — по «визуальная-концепция.md»
   Разделы 2 (палитра), 3 (типографика), 4 (сетка), 5 (компоненты),
   6 (иконки и язык схем), 7 (первый экран), 10 (кейсы), 12 (доступность)
   ============================================================ */

/* ---------- Шрифт (локально, без внешних CDN) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

/* ============================================================
   1. Токены
   ============================================================ */
:root {
  /* Основные цвета */
  --c-deep:        #17324D;
  --c-text:        #17212B;
  --c-text-2:      #4B5968;
  --c-bg:          #F7F8FA;
  --c-surface:     #FFFFFF;
  --c-evidence:    #EEF3F7;
  --c-border:      #D7DEE6;
  --c-field:       #7B8794;
  --c-on-dark:     #D9E2EA;

  /* Акцент и состояния */
  --c-accent:      #F2C94C;
  --c-accent-h:    #E2B93B;
  --c-accent-a:    #C99B16;
  --c-accent-soft: #FFF7D6;
  --c-link:        #0B5CAD;
  --c-link-h:      #084B8A;
  --c-link-a:      #063A6B;
  --c-neutral-h:   #EDF3F7;
  --c-neutral-a:   #E1EAF0;
  --c-error:       #B42318;
  --c-success:     #1F6F4A;

  /* Типографика — десктоп */
  --fs-h1: 56px;   --lh-h1: 60px;
  --fs-h2: 40px;   --lh-h2: 46px;
  --fs-h3: 24px;   --lh-h3: 30px;
  --fs-lead: 20px; --lh-lead: 31px;
  --fs-body: 18px; --lh-body: 29px;
  --fs-card: 16px; --lh-card: 25px;
  --fs-cap: 14px;  --lh-cap: 20px;
  --fs-big: 64px;  --lh-big: 68px;
  --fs-step: 20px; --lh-step: 24px;

  /* Отступы — базовый шаг 8 px */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px; --s-6: 48px; --s-7: 64px; --s-8: 80px;
  --s-9: 96px; --s-10: 112px;

  /* Вертикальный ритм секций */
  --sec-heavy: 112px;
  --sec-medium: 96px;
  --sec-light: 72px;

  /* Прочее */
  --radius-node: 12px;
  --radius-card: 14px;
  --radius-btn: 10px;
  --header-h: 72px;
  --measure: 760px;   /* текстовая колонка */
  --gap: 24px;
}

@media (max-width: 1199px) {
  :root { --sec-heavy: 96px; --sec-medium: 80px; --sec-light: 64px; }
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 36px;   --lh-h1: 40px;
    --fs-h2: 28px;   --lh-h2: 34px;
    --fs-h3: 20px;   --lh-h3: 26px;
    --fs-lead: 18px; --lh-lead: 28px;
    --fs-body: 17px; --lh-body: 27px;
    --fs-card: 16px; --lh-card: 24px;
    --fs-big: 40px;  --lh-big: 44px;
    --fs-step: 18px; --lh-step: 22px;
    --sec-heavy: 76px; --sec-medium: 68px; --sec-light: 60px;
    --gap: 16px;
  }
}

/* ============================================================
   2. База
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

/* фон холста совпадает с реквизитной зоной — за пределами страницы не мигает */
html { scroll-behavior: smooth; background: var(--c-evidence); }

body {
  margin: 0;
  font-family: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 680;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 600;
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { color: var(--c-link); }
a:hover { color: var(--c-link-h); }
a:active { color: var(--c-link-a); }

/* Клавиатурный фокус виден всегда — раздел 12, п. 3 */
:focus-visible {
  outline: 2px solid var(--c-link);
  outline-offset: 3px;
  border-radius: 4px;
}

img, svg { max-width: 100%; }

::selection { background: var(--c-accent-soft); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Служебное ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--s-3); top: -100px; z-index: 100;
  background: var(--c-surface); color: var(--c-text);
  padding: 12px 20px; border-radius: var(--radius-btn);
  border: 2px solid var(--c-link); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: 40px;
}

@media (max-width: 1199px) { .container { padding-inline: 32px; } }
@media (max-width: 767px)  { .container { padding-inline: 20px; } }
@media (max-width: 359px)  { .container { padding-inline: 16px; } }

.section { padding-block: var(--sec-medium); }
.section--heavy { padding-block: var(--sec-heavy); }
.section--light { padding-block: var(--sec-light); }
.section--surface  { background: var(--c-surface); }
.section--page     { background: var(--c-bg); }
.section--evidence { background: var(--c-evidence); }

/* якоря не уезжают под липкую шапку */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.measure { max-width: var(--measure); }

/* показатели не разрываются по тире: «2–3 часа», «5–15 минут» */
.nb, .compare__from, .compare__to { white-space: nowrap; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text-2);
}

.caption {
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  color: var(--c-text-2);
}

.section__head { margin-bottom: var(--s-6); }
.section__head h2 + .lead { margin-top: var(--s-3); }
.section__head .lead + .lead { margin-top: var(--s-2); }

/* ---------- Иконки ---------- */
.ico {
  width: 24px; height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--sm { width: 20px; height: 20px; }

/* ============================================================
   3. Кнопки и ссылки
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 52px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: var(--fs-card);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  background: var(--c-accent);
  color: var(--c-text);
}
.btn--primary:hover { background: var(--c-accent-h); color: var(--c-text); }
.btn--primary:active { background: var(--c-accent-a); color: var(--c-text); }

.btn--secondary {
  background: var(--c-surface);
  border-color: var(--c-deep);
  color: var(--c-deep);
}
.btn--secondary:hover { background: var(--c-neutral-h); color: var(--c-deep); }
.btn--secondary:active { background: var(--c-neutral-a); }

.btn--sm { min-height: 44px; padding: 10px 20px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.link-arrow:hover { text-decoration-thickness: 2px; }

/* ============================================================
   4. Липкая шапка
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
}

.logo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-deep);
  text-decoration: none;
  flex: none;
}
.logo em { font-style: normal; color: var(--c-accent-a); }

.nav { margin-inline: auto; }
.nav__list { display: flex; gap: var(--s-3); }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 6px;
  font-size: var(--fs-card);
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--c-deep); border-bottom-color: var(--c-border); }
.nav__link[aria-current="true"] { color: var(--c-deep); font-weight: 600; border-bottom-color: var(--c-deep); }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

.phone {
  font-size: var(--fs-card);
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}
.phone:hover { color: var(--c-deep); text-decoration: underline; text-underline-offset: 4px; }

/* Служебная подпись вместо неполученного номера */
.pending {
  font-size: var(--fs-card);
  font-weight: 500;
  color: var(--c-text-2);
  border-bottom: 1px dashed var(--c-field);
  padding-bottom: 2px;
  cursor: help;
}

.burger {
  display: none;
  align-items: center;
  gap: var(--s-1);
  min-height: 44px;
  padding: 10px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-btn);
  font: inherit;
  font-size: var(--fs-card);
  font-weight: 500;
  color: var(--c-deep);
  cursor: pointer;
}
.burger:hover { background: var(--c-neutral-h); }

@media (max-width: 1099px) {
  .burger { display: inline-flex; }
  .header__actions { margin-left: auto; }
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 8px 24px rgba(23, 50, 77, 0.08);
    padding: var(--s-2) 0;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; gap: 0; padding-inline: 40px; }
  .nav__link { min-height: 52px; border-bottom: 1px solid var(--c-border); }
  .nav__list li:last-child .nav__link { border-bottom: none; }
  .header__inner { position: relative; }
}

@media (max-width: 1199px) { .nav__list { padding-inline: 32px; } }

@media (max-width: 767px) {
  .header__actions { display: none; }
  .burger { margin-left: auto; }
  .nav__list { padding-inline: 20px; }
}

/* ============================================================
   5. Первый экран
   ============================================================ */
.hero { padding-block: var(--sec-medium); background: var(--c-bg); }

.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: center;
}

.hero__text { grid-column: 1 / span 6; }
.hero__visual { grid-column: 8 / span 5; }

.hero__marker {
  font-size: var(--fs-card);
  font-weight: 500;
  color: var(--c-deep);
  margin-bottom: var(--s-2);
}

/* Раздел 7: «Не мельчить заголовок ради одной строки». В шести колонках
   H1 56 px переносится на три строки — предпочтительный перенос из концепции
   требует ~800 px и здесь недостижим. Вопрос вынесен владельцу */
.hero h1 { margin-bottom: var(--s-3); }

.hero__sub {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text-2);
  max-width: 34em;
  margin-bottom: var(--s-4);
}

.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.hero__note { font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--c-text-2); max-width: 32em; }

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
}
.trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-card);
  line-height: 1.4;
  font-weight: 500;
  color: var(--c-text);
}
.trust__item .ico { color: var(--c-deep); }

/* панель схемы */
.scheme-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: var(--s-4);
}
.scheme-panel__group {
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-2);
  margin-bottom: var(--s-2);
}
.scheme-panel__caption {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  color: var(--c-text-2);
}

.scheme { display: block; width: 100%; height: auto; margin-inline: auto; }
.scheme--wide { max-width: 480px; }
.scheme--narrow { display: none; max-width: 340px; }

/* единый язык схем — раздел 6 */
.n-fill-source { fill: #FFFFFF; }
.n-fill-auto   { fill: var(--c-evidence); }
.n-fill-change { fill: var(--c-accent); }
.n-fill-result { fill: var(--c-deep); }
.n-stroke-soft { stroke: var(--c-border); stroke-width: 1; }
.n-stroke-deep { stroke: var(--c-deep); stroke-width: 1.5; }
.s-label  { font-size: 14px; font-weight: 500; fill: var(--c-text); font-family: inherit; }
.s-flow   { stroke: var(--c-field); stroke-width: 1.5; fill: none; }

@media (max-width: 1199px) {
  .hero__text { grid-column: 1 / -1; }
  .hero__visual { grid-column: 1 / -1; margin-top: var(--s-6); }
  .hero__sub { max-width: 44em; }
}

@media (max-width: 767px) {
  .hero__grid { display: block; }
  .hero__visual { margin-top: var(--s-6); }
  .scheme--wide { display: none; }
  .scheme--narrow { display: block; max-width: 340px; margin-inline: auto; }
  .hero__actions .btn { width: 100%; }
  .trust { flex-direction: column; gap: var(--s-2); }
  .scheme-panel { padding: var(--s-3); }
}

/* ============================================================
   6. Блок 2. Кому и в каких процессах
   ============================================================ */
.audience__strip {
  display: grid;
  grid-template-columns: minmax(240px, 4fr) 7fr;
  gap: var(--s-6);
  background: var(--c-bg);
  border-radius: var(--radius-card);
  padding: var(--s-4);
  margin-bottom: var(--s-6);
}

.minihead {
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-2);
  margin-bottom: var(--s-2);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.chips li {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: var(--fs-card);
  line-height: 1.4;
  font-weight: 500;
}

.proclist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px var(--s-4);
}
.proclist li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-card);
  line-height: var(--lh-card);
}
.proclist li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 12px; height: 2px;
  background: var(--c-deep);
}

.audience__map { max-width: var(--measure); color: var(--c-text-2); }
.audience__closing {
  max-width: var(--measure);
  margin-top: var(--s-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 500;
  color: var(--c-text);
}

@media (max-width: 767px) {
  .audience__strip { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-3); }
  .proclist { grid-template-columns: 1fr; }
}

/* ============================================================
   7. Блок 3. Карточки задач
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: var(--s-4);
}

.card__num {
  font-size: var(--fs-cap);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-2);
  margin-bottom: var(--s-2);
}

.card__title {
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  margin-bottom: var(--s-3);
}

.card__body dt {
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-2);
  margin-bottom: 4px;
}
.card__body dd {
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  margin-bottom: var(--s-3);
}
.card__body dd:last-child { margin-bottom: 0; }
.card__body dd + dt { padding-top: var(--s-1); border-top: 1px solid var(--c-border); }

.tasks__more { display: none; margin-top: var(--s-3); width: 100%; }
.tasks__note {
  max-width: var(--measure);
  margin-top: var(--s-6);
  padding-left: var(--s-3);
  border-left: 3px solid var(--c-accent);
  color: var(--c-text-2);
}

@media (max-width: 1199px) { .cards { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 767px) {
  .cards { grid-template-columns: 1fr; }
  .card { padding: var(--s-3); }
  .tasks--collapsed .card--extra { display: none; }
  .tasks__more { display: inline-flex; }
}

/* ============================================================
   8. Маркер реального кейса
   ============================================================ */
.marker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1);
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.marker::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-accent);
  flex: none;
}
.marker__note { font-weight: 400; color: var(--c-text-2); }

/* ============================================================
   9. Блок 4. Кейс переноса платежей
   ============================================================ */
.case__title { max-width: 20ch; }
.case__title--wide { max-width: 24em; }

.case__panel {
  background: var(--c-surface);
  border-radius: 16px;
  padding: var(--s-6);
  margin-top: var(--s-6);
}

.zone + .zone { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--c-border); }

.zone__label {
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-2);
  margin-bottom: var(--s-2);
}

.zone__text { max-width: var(--measure); }
.zone__text p + p { margin-top: var(--s-2); }

/* две системы */
.systems {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.system {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-node);
  padding: var(--s-3);
}
.system__name { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 600; }
.system__role { font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--c-text-2); margin-top: 4px; }
.systems__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-width: 180px;
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  color: var(--c-text-2);
  text-align: center;
}
.systems__line { width: 100%; height: 1px; background: var(--c-field); }

/* процессные полосы */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s-2);
  border-radius: var(--radius-card);
  padding: var(--s-3);
}
.flow--was { background: var(--c-bg); }
.flow--now { background: var(--c-evidence); }
.zone__text + .flow { margin-top: var(--s-3); }

.flow li { display: flex; align-items: stretch; gap: var(--s-2); flex: 1 1 180px; }
.flow__arrow { color: var(--c-field); flex: none; align-self: center; }
.flow li:first-child .flow__arrow { display: none; }

.node {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  border-radius: var(--radius-node);
  padding: 14px 16px;
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  font-weight: 500;
}
.node--source { background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text-2); }
.node--human  { background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text-2); }
.node--now    { background: var(--c-surface); border: 1.5px solid var(--c-deep); color: var(--c-text); }

/* факты «Было» */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: var(--gap); margin-top: var(--s-4); }
.fact {
  border-left: 3px solid var(--c-border);
  padding-left: var(--s-3);
}
.fact__value { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; font-variant-numeric: tabular-nums; }
.fact__label { font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--c-text-2); margin-top: 4px; }

/* точка изменения */
.change { text-align: center; margin-top: var(--s-5); }
.change__node {
  display: inline-block;
  background: var(--c-accent);
  color: var(--c-text);
  border-radius: var(--radius-node);
  padding: 16px 28px;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
}
.change__stem { display: block; width: 1.5px; height: 24px; background: var(--c-field); margin: 0 auto; }
.change__parts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  text-align: left;
}
.change__parts li {
  background: var(--c-accent-soft);
  border-radius: var(--radius-node);
  padding: 12px 14px;
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  font-weight: 500;
}

/* «Стало» — список и панель контроля */
.result-grid {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 340px);
  gap: var(--s-6);
  margin-top: var(--s-4);
  align-items: start;
}
.result-list li {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
}
.result-list li:first-child { padding-top: 0; }
.result-list li:last-child { border-bottom: none; }
.result-list b { font-weight: 600; }

.control {
  background: var(--c-deep);
  color: var(--c-surface);
  border-radius: var(--radius-node);
  padding: var(--s-3);
}
.control__title {
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-on-dark);
  margin-bottom: var(--s-2);
}
.control li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  border-top: 1px solid rgba(217, 226, 234, 0.25);
}
.control li::before {
  content: "";
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--c-accent);
  transform: translateY(-2px);
}

/* сравнение */
.compare { margin-top: var(--s-4); }
.compare__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  font-size: var(--fs-big);
  line-height: var(--lh-big);
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.compare__from { color: var(--c-text); }
.compare__to { color: var(--c-deep); }
.compare__arrow { color: var(--c-accent-a); font-weight: 500; }
.compare__caption { margin-top: var(--s-2); max-width: 46em; }

.case__limits {
  margin-top: var(--s-5);
  max-width: var(--measure);
  background: var(--c-bg);
  border-radius: var(--radius-card);
  padding: var(--s-3) var(--s-4);
}
.case__limits .minihead { margin-bottom: var(--s-1); }

.case__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-6);
}
.case__cta-text { max-width: var(--measure); flex: 1 1 420px; }

@media (max-width: 1023px) {
  .case__panel { padding: var(--s-4); }
  .change__parts { grid-template-columns: repeat(2, 1fr); }
  .result-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}

@media (max-width: 767px) {
  .case__title { max-width: none; }
  .case__panel { padding: var(--s-3); border-radius: var(--radius-card); }
  .zone + .zone { margin-top: var(--s-6); padding-top: var(--s-6); }
  .systems { grid-template-columns: 1fr; }
  .systems__link { min-width: 0; padding-block: var(--s-1); }
  .systems__line { width: 1px; height: 20px; }
  .flow { flex-direction: column; }
  .flow li { flex-direction: column; align-items: stretch; gap: var(--s-1); flex: none; }
  .flow__arrow { transform: rotate(90deg); align-self: center; }
  .facts { grid-template-columns: 1fr; gap: var(--s-2); }
  .change__parts { grid-template-columns: 1fr; }
  .compare__row { font-size: var(--fs-big); line-height: var(--lh-big); }
  .case__cta .btn { width: 100%; }
}

/* ============================================================
   10. Блок 5. Три уровня решения задачи
   ============================================================ */
.levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6) var(--gap);
}

.level { border-top: 2px solid var(--c-deep); padding-top: var(--s-2); }
.level__num {
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-2);
}
.level__title { margin: var(--s-1) 0 var(--s-2); }
.level__text { font-size: var(--fs-card); line-height: var(--lh-card); }

.levels__note {
  max-width: var(--measure);
  margin-top: var(--s-6);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 500;
}

@media (max-width: 1199px) { .levels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px)  { .levels { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ============================================================
   11. Блок 6. Решения 1С
   ============================================================ */
.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.product {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: var(--s-4);
}

/* название занимает одинаковую зону минимум в три строки — раздел 5 */
.product__name {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  min-height: 84px;
  margin-bottom: var(--s-1);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}

.product__row p:last-child,
.product__tasks p {
  font-size: var(--fs-card);
  line-height: var(--lh-card);
}

.product__tasks > summary {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin-bottom: var(--s-2);
}
.product__tasks > summary::-webkit-details-marker { display: none; }
.product__tasks > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--c-text-2);
  border-bottom: 2px solid var(--c-text-2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}
.product__tasks[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.solutions__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-7);
}
.solutions__help { flex: 1 1 480px; max-width: var(--measure); }

/* на десктопе перечень задач раскрыт и не сворачивается */
@media (min-width: 768px) {
  .product__tasks > summary { pointer-events: none; }
  .product__tasks > summary::after { display: none; }
}

@media (max-width: 1199px) { .products { grid-template-columns: 1fr 1fr; } }

@media (max-width: 767px) {
  .products { grid-template-columns: 1fr; }
  .product { padding: var(--s-3); }
  .product__name { min-height: 0; font-size: 19px; line-height: 26px; }
  .product__tasks > summary { min-height: 44px; cursor: pointer; }
  .solutions__foot .btn { width: 100%; }
}

/* ============================================================
   12. Блок 7. Кейс телефонного робота (тёмная секция)
   ============================================================ */
.section--dark {
  background: var(--c-deep);
  color: var(--c-surface);
}
.section--dark .minihead,
.section--dark .caption,
.section--dark .marker__note { color: var(--c-on-dark); }
.section--dark .link-arrow { color: var(--c-surface); }
.section--dark .link-arrow:hover { color: var(--c-accent); }
/* синяя обводка фокуса на тёмном фоне неразличима — раздел 12, п. 3 */
.section--dark :focus-visible { outline-color: var(--c-accent); }

.section--dark .case__title--wide { margin-bottom: var(--s-6); }

/* цепочка процесса */
.chain {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-7);
}
/* размеры узла цепочки общие, цвет зависит от фона секции */
.chain .node {
  gap: 10px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  padding: 18px 20px;
}
.chain .node--dark {
  background: transparent;
  border: 1px solid rgba(217, 226, 234, 0.45);
  color: var(--c-surface);
}
.chain .node--active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-text);
  font-weight: 600;
}
/* автоматизированное действие на светлом фоне — раздел 6 */
.node--auto {
  background: var(--c-evidence);
  border: 1.5px solid var(--c-deep);
  color: var(--c-text);
}
.chain__arrow { color: var(--c-field); align-self: center; justify-self: center; transform: rotate(90deg); }
.chain__sub {
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  color: var(--c-text-2);
  padding-left: 20px;
}
.section--dark .chain__arrow { color: var(--c-on-dark); }
.section--dark .chain__sub { color: var(--c-on-dark); }

@media (min-width: 768px) {
  .chain {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--s-2) var(--s-3);
    align-items: stretch;
  }
  .chain__n1 { grid-column: 1; grid-row: 1; }
  .chain__a1 { grid-column: 2; grid-row: 1; transform: none; }
  .chain__n2 { grid-column: 3; grid-row: 1; }
  .chain__sub { grid-column: 3; grid-row: 2; padding-left: 0; text-align: center; }
  .chain__a2 { grid-column: 4; grid-row: 1; transform: none; }
  .chain__n3 { grid-column: 5; grid-row: 1; }
}

/* показатель и текст */
.robot {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-6);
  align-items: start;
}

.bignum {
  font-size: var(--fs-big);
  line-height: var(--lh-big);
  font-weight: 680;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.bignum__cap {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-on-dark);
  margin-top: var(--s-1);
}
.robot__result {
  margin-top: var(--s-3);
  padding-left: var(--s-2);
  border-left: 3px solid var(--c-on-dark);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  font-weight: 600;
}

.robot__text p + p { margin-top: var(--s-2); }

.robot__limits {
  max-width: var(--measure);
  margin-top: var(--s-7);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-card);
  padding: var(--s-3) var(--s-4);
}
.robot__limits .minihead { margin-bottom: var(--s-1); }
.robot__limits p { font-size: var(--fs-card); line-height: var(--lh-card); color: var(--c-on-dark); }

@media (max-width: 767px) {
  .robot { grid-template-columns: 1fr; gap: var(--s-4); }
  .chain { margin-bottom: var(--s-6); }
  .chain .node--dark { font-size: var(--fs-body); line-height: var(--lh-body); }
  .robot__limits { padding: var(--s-3); }
}

/* ============================================================
   13. Блок 8. С кем вы будете работать
   ============================================================ */
.expert {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--s-7);
  align-items: start;
}

/* Раздел 8: фотографии нет — законченный типографический модуль,
   после съёмки заменяется портретом без перестройки блока */
.expert__card {
  background: var(--c-bg);
  border-radius: var(--radius-card);
  padding: var(--s-4);
}
.expert__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border: 1.5px solid var(--c-deep);
  border-radius: var(--radius-node);
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-deep);
  margin-bottom: var(--s-3);
}
.expert__name { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
.expert__role {
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  color: var(--c-text-2);
  margin-top: 4px;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}

.expert__path { margin-top: var(--s-3); }
.expert__path li {
  position: relative;
  padding-left: var(--s-3);
  padding-bottom: var(--s-2);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  font-weight: 500;
}
.expert__path li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 9px; height: 9px;
  border: 1.5px solid var(--c-deep);
  border-radius: 50%;
  background: var(--c-bg);
}
.expert__path li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 4px; top: 17px; bottom: 0;
  width: 1px;
  background: var(--c-border);
}
.expert__path li:last-child { padding-bottom: 0; }

.expert__text > p + p { margin-top: var(--s-3); }

.proofs {
  display: grid;
  gap: var(--s-1);
  margin: var(--s-4) 0;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.proofs li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  font-weight: 500;
}
.proofs .ico { color: var(--c-deep); }

@media (max-width: 767px) {
  .expert { grid-template-columns: 1fr; gap: var(--s-4); }
  .expert__card { padding: var(--s-3); }
}

/* ============================================================
   14. Блок 9. Как начинается работа
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6) var(--gap);
}

.step { position: relative; }
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1.5px solid var(--c-deep);
  border-radius: 50%;
  font-size: var(--fs-step);
  line-height: var(--lh-step);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--c-bg);
  position: relative;
  z-index: 1;
}
/* жёлтым отмечен один смысловой переход — от разбора к возможному варианту */
.step--key .step__num { background: var(--c-accent); border-color: var(--c-accent); }

.step__title { font-size: var(--fs-h3); line-height: var(--lh-h3); margin: var(--s-2) 0 var(--s-1); }
.step__text { font-size: var(--fs-card); line-height: var(--lh-card); color: var(--c-text-2); }

/* соединение шагов по порядку внутри строки */
.step:not(:nth-child(3n))::after {
  content: "";
  position: absolute;
  left: 48px;
  right: calc(-1 * var(--gap));
  top: 20px;
  height: 1px;
  background: var(--c-border);
}

.steps__after { margin-top: var(--s-7); }
.steps__barrier {
  max-width: var(--measure);
  margin: var(--s-3) 0 var(--s-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 500;
}

@media (max-width: 1199px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step:not(:nth-child(3n))::after { content: none; }
  .step:not(:nth-child(2n))::after {
    content: "";
    left: 48px;
    right: calc(-1 * var(--gap));
    top: 20px;
    height: 1px;
    width: auto;
    bottom: auto;
    background: var(--c-border);
  }
}

/* мобильный: вертикальный маршрут, номера слева, текст справа */
@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: var(--s-2);
    padding-bottom: var(--s-4);
  }
  .step::after { content: none; }
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 20px; right: auto; top: 44px; bottom: 4px;
    width: 1px; height: auto;
    background: var(--c-border);
  }
  .step__num { grid-row: 1 / span 2; }
  .step__title { margin-top: 6px; }
  .steps__after .btn { width: 100%; }
}

/* ============================================================
   15. Блок 10. Частые вопросы
   ============================================================ */
.faq__head { max-width: 840px; }
.faq { max-width: 840px; }

.faq__item { border-bottom: 1px solid var(--c-border); }
.faq__item:first-child { border-top: 1px solid var(--c-border); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 500;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  margin-right: 6px;
  border-right: 2px solid var(--c-deep);
  border-bottom: 2px solid var(--c-deep);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}
/* раскрытие показано и поворотом знака, и насыщенностью подложки */
.faq__item[open] { background: var(--c-bg); }
.faq__item[open] .faq__q { font-weight: 600; }
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__q:hover { background: var(--c-neutral-h); }

.faq__a { padding: 0 var(--s-6) var(--s-3) 0; }
.faq__a p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text-2); }

@media (max-width: 767px) {
  .faq__q { padding-left: var(--s-2); font-size: var(--fs-body); line-height: var(--lh-body); }
  .faq__a { padding: 0 var(--s-2) var(--s-3); }
}

/* ============================================================
   16. Блок 11. Финальный CTA, форма и контакты
   ============================================================ */
.final {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-7);
  align-items: start;
}

.final__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text-2);
  margin-top: var(--s-3);
}

.final__contacts { margin-top: var(--s-6); }
.channels { display: grid; gap: var(--s-1); margin-bottom: var(--s-3); }
.channels li { font-size: var(--fs-card); line-height: var(--lh-card); }
.final__geo { font-size: var(--fs-card); line-height: var(--lh-card); color: var(--c-text-2); }

.final__form {
  background: var(--c-surface);
  border-radius: var(--radius-card);
  padding: var(--s-5);
}
.form__hint {
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  color: var(--c-text-2);
  margin-bottom: var(--s-3);
}

.field { margin-bottom: var(--s-3); }
.field__label {
  display: block;
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  font-weight: 500;
  margin-bottom: var(--s-1);
}
.field__input {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-field);
  border-radius: 8px;
}
.field__input--area { min-height: 152px; resize: vertical; }
.field__input::placeholder { color: var(--c-text-2); }
.field__input:focus-visible { outline: 2px solid var(--c-link); outline-offset: 1px; border-color: var(--c-link); }

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  color: var(--c-error);
}
.field--invalid .field__input { border-color: var(--c-error); border-width: 2px; }

/* Согласие на обработку — отдельное действие, галочка не отмечена заранее */
.field--consent { margin-bottom: var(--s-3); }
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
}
.consent__box {
  flex: none;
  width: 22px; height: 22px;
  margin: 0;
  accent-color: var(--c-deep);
  cursor: pointer;
}
.consent__text {
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  color: var(--c-text-2);
}
.field--invalid .consent__box { outline: 2px solid var(--c-error); outline-offset: 2px; }

/* ловушка для роботов: поле скрыто от человека и от чтения с экрана */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__submit { width: 100%; margin-top: var(--s-1); }
.form__submit[disabled] { opacity: 0.7; cursor: default; }

.form__state {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: var(--s-2);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
}
.form__state--sending { background: var(--c-neutral-h); color: var(--c-text); }
.form__state--error { background: #FFF0EE; color: var(--c-error); }
.form__state--dev { background: var(--c-bg); border: 1px dashed var(--c-field); color: var(--c-text-2); }

.form__done {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--s-3);
  background: #EAF6EF;
  border-radius: var(--radius-card);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  color: var(--c-success);
}
.form__done .ico { color: var(--c-success); }

@media (max-width: 1199px) {
  .final { gap: var(--s-6); }
}

@media (max-width: 767px) {
  .final { grid-template-columns: 1fr; gap: var(--s-5); }
  .final__form { padding: var(--s-3); }
}

/* ============================================================
   17. Реквизитная зона
   ============================================================ */
.footer {
  background: var(--c-evidence);
  padding-bottom: var(--s-7);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
}
.footer__brand { font-weight: 700; letter-spacing: 0.04em; color: var(--c-deep); }
.footer__legal { font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--c-text-2); }

@media (max-width: 767px) {
  .footer__inner { flex-direction: column; gap: var(--s-1); }
}

/* ============================================================
   18. Липкая мобильная панель
   ============================================================ */
.mobilebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  gap: var(--s-1);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
}
/* главное действие визуально шире, звонок — вторичная кнопка */
.mobilebar .btn { flex: 1 1 auto; }
.mobilebar__call { flex: 0 0 auto; min-width: 132px; padding-inline: 16px; }

/* на 320–359 px остаются оба действия, подписи не прячутся — раздел 5 */
@media (max-width: 359px) {
  .mobilebar { gap: 6px; padding-inline: 12px; }
  .mobilebar .btn { padding-inline: 10px; }
  .mobilebar__call { min-width: 0; }
}

@media (max-width: 767px) {
  .mobilebar.is-visible { display: flex; }
  body.has-mobilebar { padding-bottom: 88px; }
  /* пока висит уведомление о cookie, нижняя панель не показывается */
  body.cookie-open .mobilebar { display: none; }
}

/* ============================================================
   19. Юридический документ (страница политики)
   ============================================================ */
.doc { max-width: var(--measure); }
.doc__h1 { margin-bottom: var(--s-5); }
.doc__h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: var(--s-6) 0 var(--s-2);
}
.doc__h1 + .doc__p { color: var(--c-text-2); }
.doc__p { font-size: var(--fs-card); line-height: var(--lh-card); margin-bottom: var(--s-2); }
.doc__list { margin: 0 0 var(--s-2) var(--s-3); }
.doc__list li {
  position: relative;
  padding-left: var(--s-2);
  margin-bottom: 6px;
  font-size: var(--fs-card);
  line-height: var(--lh-card);
}
ul.doc__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 8px; height: 1px;
  background: var(--c-field);
}
ol.doc__list { counter-reset: doc; }
ol.doc__list li { counter-increment: doc; padding-left: var(--s-3); }
ol.doc__list li::before {
  content: counter(doc) ".";
  position: absolute;
  left: 0;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-2);
}

/* ============================================================
   20. Страница кейса
   ============================================================ */
.case-page { max-width: 840px; }
.case-page__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-card);
  font-weight: 500;
  margin-bottom: var(--s-3);
}
.case-page h1 { margin-bottom: var(--s-3); }
.case-page__summary {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  padding-left: var(--s-3);
  border-left: 3px solid var(--c-accent);
}

.case-page h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: var(--s-7) 0 var(--s-3);
}
.case-page h3 {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  margin: var(--s-5) 0 var(--s-2);
}
.case-page p { margin-bottom: var(--s-2); }
.case-page .flow { margin-block: var(--s-3); }

.case-page__list { margin-bottom: var(--s-3); }
.case-page__list li {
  position: relative;
  padding-left: var(--s-3);
  margin-bottom: var(--s-1);
}
.case-page__list--num { counter-reset: cs; }
.case-page__list--num li { counter-increment: cs; }
.case-page__list--num li::before {
  content: counter(cs) ".";
  position: absolute;
  left: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--c-deep);
}
.case-page__list--dash li::before {
  content: "";
  position: absolute;
  left: 0; top: 13px;
  width: 12px; height: 2px;
  background: var(--c-deep);
}

/* таблица «Было / Стало» */
.cmp {
  /* «зебра» с воздухом: таблица шире колонки текста на величину внутренних полей */
  width: calc(100% + 32px);
  margin-left: -16px;
  border-collapse: collapse;
  margin-block: var(--s-3);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
}
.cmp th, .cmp td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
}
.cmp thead th {
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-2);
  border-bottom-color: var(--c-field);
}
.cmp tbody th { font-weight: 600; width: 34%; }
.cmp tbody tr:nth-child(even) { background: var(--c-bg); }

/* мобильный: пары «Было / Стало» с повторёнными подписями, без прокрутки */
@media (max-width: 767px) {
  .cmp { width: 100%; margin-left: 0; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp thead { display: none; }
  .cmp tbody tr {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-card);
    padding: var(--s-2);
    margin-bottom: var(--s-2);
    background: var(--c-surface);
  }
  .cmp tbody tr:nth-child(even) { background: var(--c-surface); }
  .cmp th, .cmp td,
  .cmp tbody tr:nth-child(even) th,
  .cmp tbody tr:nth-child(even) td { border: none; padding: 0 0 var(--s-1); }
  .cmp tbody th { width: auto; margin-bottom: var(--s-1); }
  .cmp td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-cap);
    line-height: var(--lh-cap);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-2);
  }
  .cmp td:last-child { padding-bottom: 0; }
  .case-page h2 { margin-top: var(--s-6); }
}

.case-page__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
}
.case-page__cta p { flex: 1 1 380px; margin: 0; }

@media (max-width: 767px) {
  .case-page__cta .btn { width: 100%; }
}

/* ============================================================
   21. Страница «не найдено»
   ============================================================ */
.notfound { max-width: var(--measure); }
.notfound__code {
  font-size: var(--fs-big);
  line-height: var(--lh-big);
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--c-border);
  margin-bottom: var(--s-2);
}
.notfound h1 { margin-bottom: var(--s-3); }
.notfound__links {
  display: grid;
  gap: var(--s-1);
  margin: var(--s-5) 0;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.notfound__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}
.notfound__cta p { flex: 1 1 320px; }

@media (max-width: 767px) {
  .notfound__cta .btn { width: 100%; }
}

/* ============================================================
   22. Уведомление об использовании cookie
   ============================================================ */
.cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -8px 24px rgba(23, 50, 77, 0.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.cookie__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding-block: var(--s-3);
}
.cookie__text {
  flex: 1 1 auto;
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  color: var(--c-text-2);
}
.cookie__ok { flex: none; min-width: 160px; }

@media (max-width: 767px) {
  .cookie__inner { flex-direction: column; align-items: stretch; }
  .cookie__ok { width: 100%; }
}