/* OrgBOS сайт — стили главной (дорожка А, 01-SPEC.md §5 и «ИЗМЕНЕНИЕ ТЗ» И1, И5).
   Только переменные theme.css; размеры без цвета (ширины, высоты) — числами. */

/* Светлая область внутри любой темы — окно шага 2 заявки (И9.9 п.2).
   Копия светлой палитры theme.css:37–53, меняется только вместе с ней. */
.on-light {
  color-scheme: light;
  --bg: #f4f2ee;
  --bg-2: #ebe8e2;
  --card: #ffffff;
  --ink: #141414;
  --ink-2: #3a3733;
  --muted: #5e5952;
  --line: #d9d4cc;
  --accent: #5b42e4;
  --accent-hover: #4c35d0;
  --accent-ink: #4c35d0;
  --on-accent: #ffffff;
  --accent-soft: rgba(91, 66, 228, .10);
  --ok: #17724a;
  --bad: #c62f3a;
  --warn: #9c4d00;
  --frame: #e3dfd8;
  --shadow: 0 20px 50px rgba(40, 30, 20, .12);
}

/* Плавная прокрутка к якорям — только без reduced-motion (§5.12 п.2) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Пара «справа / ниже» для пульта модулей: граница 1024 px — панель справа только на ≥ 1024 (И8.5 п.2) */
.only-below { display: none; }
@media (max-width: 1023px) {
  .only-side { display: none; }
  .only-below { display: inline; }
}

/* ---------- Раздел: каркас ---------- */
/* И12: отступ раздела меньше канона theme.css (там clamp(64px, 10vw, 140px) — 280 px пустоты между
   разделами). theme.css — общий канон, переопределяем здесь, только для главной. */
:root { --section-y: clamp(48px, 6vw, 88px); }
.sec { padding: var(--section-y) 0; background: var(--bg); }
.sec--alt { background: var(--bg-2); }
.sec__head { max-width: 1000px; margin-bottom: var(--sp-6); }
.sec__head .kick { margin-bottom: var(--sp-4); }
.sec__head h2 { font-size: var(--fs-h2); }
.sec__sub { margin-top: var(--sp-5); font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 760px; }

/* ---------- 0. Первый экран ---------- */
/* И6.7: весь первый экран с полосой цифр помещается в 1366×800 — отступы 40/48, колонки по верху */
.hero { position: relative; overflow: hidden; padding: var(--sp-6) 0 calc(var(--sp-6) + var(--sp-2)); }
.hero::before {
  content: ""; position: absolute; top: -200px; right: -200px; width: 900px; height: 700px;
  background: radial-gradient(closest-side, var(--accent-soft), transparent 70%); pointer-events: none;
}
.hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
@media (min-width: 1024px) {
  .hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: calc(var(--sp-6) + var(--sp-2)); }
}
.hero__text { min-width: 0; container-type: inline-size; }
.hero__text .kick { margin-bottom: var(--sp-3); }

/* H1 из трёх фиксированных строк (И1 п.2). Размер — своё значение первого экрана (И6.7 п.2,
   единственное отступление от --fs-hero), но не шире колонки: «Одна оргсхема» не переносится. */
.hero__title { font-size: clamp(38px, 4.9vw, 62px); font-size: min(clamp(38px, 4.9vw, 62px), 13.6cqi); }
.hero__line { display: block; white-space: nowrap; }

/* Слот с крутящимся хвостом (И1 п.3–4) */
.hero__slot {
  position: relative; display: grid; align-items: center; width: 100%; height: 1.12em;
  padding-bottom: .08em; overflow: hidden; white-space: nowrap; cursor: pointer;
}
.hero__tail {
  grid-area: 1 / 1; justify-self: start; font-style: normal; color: var(--accent-ink); line-height: 1;
  white-space: nowrap; font-size: calc(1em * var(--s, 1)); letter-spacing: -.04em; transform-origin: 0 55%;
  opacity: 0; transform: translateY(.5em);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hero__tail.is-on { opacity: 1; transform: none; }
/* Без JS (theme.js не поставил data-theme) ужатие --s не работает — хвост переносится, а не обрезается */
html:not([data-theme]) .hero__slot { height: auto; overflow: visible; white-space: normal; }
html:not([data-theme]) .hero__tail { white-space: normal; line-height: var(--lh-tight); }
.hero__tail.is-out { opacity: 0; transform: translateY(-.5em); }

/* Полоска 3 px под слотом: заливка за 4,2 с; конец заливки — следующий пункт */
.hero__bar { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: var(--radius-pill); background: var(--accent-soft); overflow: hidden; }
.hero__bar b { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.hero--auto .hero__bar { display: block; }
.hero--auto .hero__bar b.is-run { animation: hero-fill 4.2s linear forwards; }
.hero--paused .hero__bar b.is-run { animation-play-state: paused; }
@keyframes hero-fill { to { transform: scaleX(1); } }

/* Таблетка «01 / 06 · расшифровка» (И1 п.6) */
.hero__pill {
  display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%;
  margin-top: var(--sp-4); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-size: var(--fs-small); line-height: 1.4;
}
.hero__cnt {
  flex: none; padding: 2px var(--sp-2); border-radius: var(--radius-pill);
  font: 600 var(--fs-kick)/1.4 var(--font-mono); color: var(--accent-ink); background: var(--accent-soft);
  font-variant-numeric: tabular-nums;
}
.hero__txt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); }

/* Чипы: точка + хвост; активный — точка акцента и тонкая рамка, без заливки и без сдвига */
.hero__chips { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-3); }
.hero__chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px;
  padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: transparent; color: var(--muted); font: 400 var(--fs-kick)/1.2 var(--font);
  white-space: nowrap; cursor: pointer;
}
.hero__chip i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.hero__chip:hover { color: var(--ink); }
.hero__chip[aria-pressed="true"] { color: var(--ink); border-color: var(--accent-ink); }
.hero__chip[aria-pressed="true"] i { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* И7: подзаголовок первого экрана — --fs-body (17 px, ближайший токен к 17,5 px эскиза), чтобы экран влез целиком */
.hero__lead { margin-top: var(--sp-4); font-size: var(--fs-body); line-height: 1.5; color: var(--ink-2); max-width: 600px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

.hero__side { min-width: 0; }
/* И8.4 п.2: объект по центру между строкой «OrgBOS · …» и полосой цифр */
@media (min-width: 1024px) { .hero__side { align-self: center; } }
.hero__side ob-orgchart { display: block; }
.hero__side .ob-orgchart__fallback { display: block; width: 100%; height: auto; }
.hero__cap { display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); }
.hero__cap .btn { flex: none; }
@media (max-width: 559px) { .hero__cap { flex-wrap: wrap; } }
.hero__note { font-size: var(--fs-small); color: var(--muted); }

/* И6.6 п.4: полоса цифр под обеими колонками, во всю ширину .container (вид полосы — виджет ob-stats) */
.hero__strip { position: relative; margin-top: calc(var(--sp-5) + var(--sp-3)); }
.hero__strip ob-stats { display: block; }

/* Низкие окна ноутбука (1280×720, 1366×657 …): первый экран вместе с полосой цифр помещается в окно
   (круг 4, находка состязательной проверки ОТК). H1 ограничен ещё и высотой окна, отступы плотнее. */
@media (min-width: 1024px) and (max-height: 799px) {
  .hero { padding-top: var(--sp-4); padding-bottom: var(--sp-5); }
  .hero__title { font-size: min(clamp(38px, 4.9vw, 62px), 13.6cqi, 7.2vh); }
  .hero__text .kick { margin-bottom: var(--sp-2); }
  .hero__pill { margin-top: var(--sp-3); }
  .hero__chips { margin-top: var(--sp-2); }
  .hero__chip { min-height: 28px; }
  .hero__lead { margin-top: var(--sp-3); line-height: 1.45; }
  .hero__cta { margin-top: var(--sp-4); }
  .hero__strip { margin-top: var(--sp-4); }
}
/* 1024–1199 × низкое окно (1168×650 …): колонка оргсхемы уже 536 px, виджет рисует более высокий
   холст, и ряд вырастает — полоса уходила за низ окна. Здесь оргсхема не шире 450 px (по центру
   колонки), H1 чуть ниже (круг 5, МЕЛКОЕ 1 03-REVIEW). */
@media (min-width: 1024px) and (max-width: 1199px) and (max-height: 799px) {
  .hero__side ob-orgchart { max-width: 450px; margin-left: auto; margin-right: auto; }
  .hero__title { font-size: min(clamp(38px, 4.9vw, 62px), 13.6cqi, 6.6vh); }
  /* Круг 7 (05-RELEASE п.1): на 1024×650 подпись под кнопкой демо шла в 4 строки и выталкивала полосу
     цифр за низ окна. Колонки ближе друг к другу, кнопка — размера .btn--sm, подпись стоит плотнее.
     Текст подписи не меняется (утверждён Юрием). */
  .hero__in { gap: var(--sp-5); }
  .hero__cap { margin-top: var(--sp-2); gap: var(--sp-2) var(--sp-3); }
  .hero__cap .btn { min-height: 40px; padding: 0 16px; font-size: 15px; }
}

/* ---------- 1. История «хаос → оргсхема» (§5.5) ---------- */
/* Без JS и при reduced-motion — обычная высота и собранная оргсхема (--p: 1, хаоса нет).
   site.js включает .story--live: трек 260vh (телефон 200vh), сцена залипает, --p пишется на сцену. */
.story { position: relative; }
.story__skip-first { position: absolute; left: var(--gutter); top: var(--sp-2); z-index: 5; margin: 0; }
.story__skip-first:not(:focus) { width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.story__skip { display: none; }

.story__stage { --p: 1; position: relative; }
.story__org { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }

.story__owner {
  position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent); text-align: center; line-height: 1.25;
}
.story__owner b { font-size: var(--fs-body); }
.story__count { display: none; font-size: var(--fs-small); }

/* Линии оргсхемы — псевдоэлементы, проявляются по --p */
.story__hub, .story__dept-name, .story__depts { position: relative; }
.story__hub::before, .story__dept-name::before, .story__depts::before {
  content: ""; position: absolute; background: var(--line); opacity: calc((var(--p) - .35) * 3);
}
.story__hub::before { left: 50%; bottom: 100%; width: 1px; height: var(--sp-5); }
.story__depts::before { left: calc(100% / 6); right: calc(100% / 6); top: calc(var(--sp-5) / -2); height: 1px; }
.story__depts::after {
  content: ""; position: absolute; left: 50%; top: calc(var(--sp-5) * -1); width: 1px; height: calc(var(--sp-5) / 2);
  background: var(--line); opacity: calc((var(--p) - .35) * 3);
}
.story__dept-name::before { left: 50%; bottom: 100%; width: 1px; height: calc(var(--sp-5) / 2 + 1px); }

.story__depts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); width: 100%; }
.story__dept { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); min-width: 0; }
.story__dept-name {
  align-self: center; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-size: var(--fs-kick); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: var(--bg); opacity: calc((var(--p) - .35) * 3);
}

/* Карточка: вопрос (хаос) и блок должности (порядок) в одной ячейке; переход — только transform и opacity */
.story__card {
  --k: clamp(0, calc((var(--p) - var(--d0, 0)) / .4), 1);
  --e: calc(var(--k) * var(--k) * (3 - 2 * var(--k)));
  position: relative; z-index: 2; display: grid; min-width: 0;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--line);
  font-size: var(--fs-small); line-height: 1.35;
  transform: translate(calc(var(--dx, 0px) * (1 - var(--e))), calc(var(--dy, 0px) * (1 - var(--e)))) rotate(calc(var(--r, 0deg) * (1 - var(--e))));
}
.story__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--shadow);
  opacity: calc(1 - var(--e)); pointer-events: none;
}
.story__card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--accent-ink);
  opacity: calc(var(--e) * 2 - 1); pointer-events: none;
}
.story__card--hub { width: min(320px, 100%); text-align: center; }
.story__q, .story__pos { grid-area: 1 / 1; }
.story__q { align-self: center; font-weight: 600; color: var(--ink); opacity: calc(1 - var(--e) * 2); }
.story__pos { opacity: calc(var(--e) * 2 - 1); }
.story__pos b { display: block; color: var(--ink); }
.story__pos span { display: block; color: var(--muted); }
.story__card--ai .story__pos b { color: var(--accent-ink); }
.story__card[data-d="0"] { --d0: 0; }
.story__card[data-d="1"] { --d0: .03; }
.story__card[data-d="2"] { --d0: .06; }
.story__card[data-d="3"] { --d0: .09; }
.story__card[data-d="4"] { --d0: .12; }
.story__card[data-d="5"] { --d0: .15; }
.story__card[data-d="6"] { --d0: .18; }
.story__card[data-d="7"] { --d0: .21; }
.story__card[data-d="8"] { --d0: .24; }
.story__card[data-d="9"] { --d0: .27; }

.story__final {
  display: flex; flex-direction: column; align-items: center; align-self: center; text-align: center;
  margin-top: var(--sp-5); font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.02em; color: var(--ink);
}
/* И8.4 п.4: финал «Всё распределено…» — две строки, вторая зелёная, и строка итога */
.story__final em { font-style: normal; color: var(--ok); }
.story__final-k {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0 auto var(--sp-2); padding: var(--sp-1) var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); border-radius: var(--radius-pill);
  font-size: var(--fs-kick); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ok);
}
.story__final-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.story__final-s { display: block; margin-top: var(--sp-2); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; color: var(--muted); }

/* «Собственник» зеленеет, когда всё распределено (и сразу — при reduced-motion, конечное состояние) */
.story__owner { transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.story--done .story__owner {
  background: var(--ok);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 22%, transparent), 0 0 40px color-mix(in srgb, var(--ok) 45%, transparent);
}
.story--done .story__count { display: block; }

/* Крупная полупрозрачная надпись посреди хаоса (только в живом режиме) */
.story__big { display: none; }
.story__big-k {
  margin: 0; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  font-size: var(--fs-kick); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.story__big-t {
  margin: 0; font-size: var(--fs-hero); font-weight: 700; line-height: 1.02; letter-spacing: -.035em;
  color: color-mix(in srgb, var(--ink) 88%, transparent); text-shadow: 0 6px 40px var(--bg), 0 0 18px var(--bg);
}
.story__big-t em { font-style: normal; color: var(--bad); }
.story__big-s {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: var(--fs-small); color: var(--ink-2);
}
.story__big-s span { min-width: 0; }
.story__big-s i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.story__big-s b { color: var(--ink); }

/* Живой режим (включает site.js) */
.story--live { padding: 0; }
.story--live .story__track { height: 260vh; }
.story--live .story__sticky {
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h));
  display: flex; flex-direction: column; padding-top: var(--sp-6); padding-bottom: var(--sp-5);
}
@supports (height: 100svh) {
  .story--live .story__sticky { height: calc(100svh - var(--header-h)); }
}
/* Заголовок раздела в живом режиме остаётся только для экранного чтеца: вместо него — крупная надпись */
.story--live .sec__head { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); }
.story--live .story__stage {
  flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: var(--sp-3);
}
.story--live .story__card { opacity: clamp(.35, calc(.35 + var(--p) * 2.2), 1); }
.story--live .story__big {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: 0 var(--gutter); text-align: center; pointer-events: none;
  opacity: clamp(0, calc((.42 - var(--p)) * 6), 1); transform: scale(calc(1 - var(--p) * .12));
}
.story--live .story__owner {
  --ow: clamp(0, calc(var(--p) / .45), 1);
  --owe: calc(var(--ow) * var(--ow) * (3 - 2 * var(--ow)));
  transform: translate(calc(var(--dx, 0px) * (1 - var(--owe))), calc(var(--dy, 0px) * (1 - var(--owe))));
}
.story--live .story__count { display: block; }
.story--live .story__final { flex: none; margin-top: var(--sp-3); opacity: calc((var(--p) - .6) * 10); }
/* «Пропустить ↓» в живом режиме — общая плашка .pinbar внизу по центру (И8.4 п.8) */
.story--live .story__sticky { padding-bottom: calc(var(--sp-7) + var(--sp-4)); }
.story--measure .story__card, .story--measure .story__owner { transform: none !important; }

@media (max-width: 767px) {
  .story--live .story__track { height: 200vh; }
  .story__card[data-d="6"], .story__card[data-d="7"], .story__card[data-d="8"], .story__card[data-d="9"] { display: none; }
  .story__depts { gap: var(--sp-2); }
  .story__card { padding: var(--sp-2); font-size: var(--fs-kick); }
  .story__dept-name { padding: var(--sp-1) var(--sp-2); letter-spacing: .02em; }
  .story--live .story__sticky { padding-top: var(--sp-4); padding-bottom: calc(var(--sp-7) + var(--sp-4)); }
  .story__owner { padding: var(--sp-2) var(--sp-4); }
  .story__final { margin-top: var(--sp-3); font-size: var(--fs-body); }
  .story--live .sec__head { margin-bottom: var(--sp-3); }
  .story__org { gap: var(--sp-4); }
  .story__hub::before { height: var(--sp-4); }
  .story__depts::before { top: calc(var(--sp-4) / -2); }
  .story__depts::after { top: calc(var(--sp-4) * -1); height: calc(var(--sp-4) / 2); }
  .story__dept-name::before { height: calc(var(--sp-4) / 2 + 1px); }
}

/* ---------- 2. Как внедряем (§5.6) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6) var(--sp-5); }
.step__num { display: block; font-size: var(--fs-stat); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -.04em; color: var(--accent-ink); }
.step h3 { margin: var(--sp-4) 0 var(--sp-2); }
.step p { color: var(--ink-2); }
.step .step__res { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
.step__res b { color: var(--ink); font-weight: 600; }
/* И8.4 п.6: четыре шага в ряд и кнопка «Обсудить внедрение» под ними */
@media (min-width: 900px) { .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps--4 .step { padding: var(--sp-5) var(--sp-4); }
/* Круг 7, п.42 правок Юрия: четыре карточки одной высоты и компактнее — итог «На выходе» прижат к низу,
   номер шага мельче; пояснение 8/24 — строкой под подзаголовком раздела (.how__824) */
.steps--4 .step { display: flex; flex-direction: column; }
.steps--4 .step__num { font-size: calc(var(--fs-stat) * .7); }
.steps--4 .step h3 { margin: var(--sp-3) 0 var(--sp-2); }
.steps--4 .step > p:not(.step__res) { margin-bottom: var(--sp-4); }
.steps--4 .step .step__res { margin-top: auto; }
.how__824 { margin-top: var(--sp-3); max-width: 760px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.how__824 b {
  display: inline-block; padding: 0 var(--sp-2); border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 700;
}
.how__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-6);
  font-size: var(--fs-small); color: var(--muted);
}

/* ---------- Залипающие разделы #layers, #modules (И8.4 п.8) ---------- */
/* site.js ставит .pin--live (окно ≥ 768 px шириной и ≥ 620 px высотой, нет reduced-motion), высоту трека
   и --p (0…1). Липкая часть ровно в окно под шапкой и от содержимого не зависит: смена модуля в пульте
   не меняет высоту страницы (круг 4, БЛОКЕР 1–2 03-REVIEW). */
.pin--live { padding-top: 0; padding-bottom: 0; }
.pin--live .pin__track { position: relative; }
.pin--live .pin__sticky {
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; padding-top: var(--sp-6); padding-bottom: var(--sp-6);
}
@supports (height: 100svh) {
  .pin--live .pin__sticky { height: calc(100svh - var(--header-h)); }
}
.pin--live .skip-link { display: none; }

/* ---------- 3. Как это устроено: пять этажей (И8.4 п.7) ---------- */
.fl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
@media (min-width: 960px) { .fl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pin--live .pin__sticky.fl { display: grid; }
.fl__text h2 { margin: var(--sp-2) 0 var(--sp-5); font-size: var(--fs-h2); }
@media (min-width: 960px) { .fl__text h2 { font-size: var(--fs-h3); } }
.fl__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fl__list li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line); transition: opacity var(--dur) var(--ease);
}
.pin--live .fl__list li { opacity: .32; }
@media (max-height: 820px) {
  .pin--live .pin__sticky.fl { padding-top: var(--sp-4); padding-bottom: calc(var(--sp-7) + var(--sp-2)); }
  .pin--live .fl__text h2 { margin-bottom: var(--sp-3); }
  .pin--live .fl__list li { padding: var(--sp-2) 0; }
  .pin--live .fl__list p { line-height: 1.35; }
  .pin--live .fl__scene { height: 100%; max-height: 440px; }
}
/* Круг 7 (п.46, мелкое ОТК): на окнах ниже 700 px пятый этаж задевал плашку «Пропустить ↓» —
   список плотнее, подписи этажей мельче, низ содержимого выше плашки */
@media (max-height: 700px) {
  .pin--live .pin__sticky.fl { padding-top: var(--sp-2); padding-bottom: calc(var(--sp-7) + var(--sp-4)); }
  .pin--live .fl__text h2 { margin: var(--sp-1) 0 var(--sp-2); }
  .pin--live .fl__list li { padding: 6px 0; }
  .pin--live .fl__list p { margin-top: 2px; font-size: var(--fs-kick); line-height: 1.3; }
}
.pin--live .fl__list li.on { opacity: 1; }
.fl__list li > span { padding-top: 3px; font-family: var(--font-mono); font-size: var(--fs-kick); color: var(--accent-ink); }
.fl__list b { display: block; font-size: var(--fs-body); color: var(--ink); }
.fl__list p { margin-top: var(--sp-1); font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }

/* Стопка плит: расслаивается по --p раздела; номер плиты — классом --i0…--i4, не style= */
.fl__scene { position: relative; height: 440px; perspective: 1600px; display: grid; place-items: center; }
.fl__stack { --plate-r: 34px; position: relative; width: 300px; height: 300px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-38deg); }
.fl__plate--i0 { --i: 0; }
.fl__plate--i1 { --i: 1; }
.fl__plate--i2 { --i: 2; }
.fl__plate--i3 { --i: 3; }
.fl__plate--i4 { --i: 4; }
.fl__plate {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start;
  padding: var(--sp-5); border-radius: var(--plate-r); transform-style: preserve-3d;
  transform: translateZ(calc((4 - var(--i)) * (8px + var(--p, 1) * 46px)));
  background: color-mix(in srgb, var(--card) 85%, var(--ink) calc(var(--i) * 3%));
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), var(--shadow);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fl__plate::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; transform: translateZ(-10px);
  background: color-mix(in srgb, var(--line) 70%, var(--bg));
}
.fl__plate span { font-size: var(--fs-small); font-weight: 700; letter-spacing: -.01em; color: var(--ink-2); }
.fl__plate--top { background: var(--accent); border-color: transparent; }
.fl__plate--top span, .fl__plate--top.on span { color: var(--on-accent); }
/* значок оргсхемы на верхней плите: три блока и линии цветом текста на акценте */
.fl__plate--top::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 110px; height: 82px; margin: -60px 0 0 -55px; opacity: .9;
  background:
    linear-gradient(var(--on-accent), var(--on-accent)) 50% 0 / 34px 22px no-repeat,
    linear-gradient(var(--on-accent), var(--on-accent)) 0 100% / 30px 20px no-repeat,
    linear-gradient(var(--on-accent), var(--on-accent)) 100% 100% / 30px 20px no-repeat,
    linear-gradient(var(--on-accent), var(--on-accent)) 50% 45% / 2px 26px no-repeat,
    linear-gradient(var(--on-accent), var(--on-accent)) 50% 62% / 80px 2px no-repeat;
}
.fl__plate.on:not(.fl__plate--top) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 40px var(--accent-soft), var(--shadow); }
.fl__plate.on span { color: var(--ink); }
@media (max-width: 959px) {
  .fl__scene { height: 340px; }
  .fl__stack { width: 200px; height: 200px; margin-top: var(--sp-7); }
  /* не залипает (телефон): плиты стоят раздвинутыми наполовину, чтобы не наезжать на текст */
  #layers:not(.pin--live) .fl__stack { --p: .45; }
  .fl__plate { padding: var(--sp-3) var(--sp-4); }
  .fl__plate span { font-size: var(--fs-kick); }
  /* закреплённые этажи на планшете (768–959): стопка — узкой колонкой справа, чтобы всё помещалось в окно */
  .pin--live .pin__sticky.fl { grid-template-columns: minmax(0, 1fr) 200px; gap: var(--sp-5); }
  .pin--live .fl__text h2 { font-size: var(--fs-h3); }
  .pin--live .fl__scene { height: 260px; }
  .pin--live .fl__stack { width: 150px; height: 150px; margin-top: var(--sp-6); }
  .pin--live .fl__plate { padding: var(--sp-2) var(--sp-3); }
}

/* ---------- 4. ИИ-сотрудники (§5.8) ---------- */
#ai ob-ai-cards { display: block; }
.ai__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); margin-top: var(--sp-5); align-items: start; }
@media (min-width: 900px) { .ai__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ai__row ob-shift-log { display: block; min-width: 0; }
.ai__note { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }
.ai__law { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ai__law li { padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--fs-small); color: var(--ink-2); }
/* И8.4 п.5: «чат-бот где-то сбоку» зачёркивается красной линией, когда заголовок вошёл в окно */
.ai__h2 em { font-style: normal; color: var(--accent-ink); }
.ai__strike { position: relative; color: var(--muted); }
.ai__strike::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: .09em; border-radius: var(--radius-pill); background: var(--bad);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s .3s cubic-bezier(.6, .1, .2, 1);
}
.ai__h2.is-in .ai__strike::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .ai__strike::after { transform: scaleX(1); transition: none; } }

/* ---------- 5. Контроль (§5.9) ---------- */
.ctrl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 900px) { .ctrl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ctrl__col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6) var(--sp-5); }
.ctrl__col h3 { margin-bottom: var(--sp-3); }
.ctrl__col ul { list-style: none; padding: 0; }
.ctrl__col li { position: relative; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); color: var(--ink-2); }
.ctrl__col li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.ctrl__fine { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--muted); max-width: 860px; }

/* ---------- 6. Модули, 7. Это уже работает (§5.10) ---------- */
#modules ob-modules { display: block; }
/* Пульт в залипающем разделе (круг 4, контракт с В): сверху компактный заголовок в одну строку,
   под ним <ob-modules layout="pin"> на всю оставшуюся высоту — виджет сам ужимается в неё.
   Снизу место под плашку «Пропустить ↓». На низком окне подзаголовок убирается. */
.pin--live#modules .pin__sticky { justify-content: flex-start; padding-top: var(--sp-4); padding-bottom: calc(var(--sp-7) + var(--sp-5)); }
/* круг 7 (п.46 и замечание В на 800×650): зазор между низом пульта и плашкой «Пропустить ↓» — 18 px, а не 6.
   Ниже 650 px высоты пульт на 768–1023 в окно с таким зазором не помещается — там прежний отступ. */
@media (max-height: 649px) {
  .pin--live#modules .pin__sticky { padding-bottom: calc(var(--sp-7) + var(--sp-3)); }
}
.pin--live#modules .sec__head { flex: none; margin-bottom: var(--sp-3); }
.pin--live#modules .sec__head .kick { margin-bottom: var(--sp-1); }
.pin--live#modules h2 { font-size: calc(var(--fs-h2) * .66); white-space: nowrap; }
.pin--live#modules .sec__sub { margin-top: var(--sp-1); }
.pin--live#modules ob-modules { flex: 1 1 auto; min-height: 0; }
@media (max-height: 760px) {
  .pin--live#modules .sec__sub { display: none; }
}

/* ---------- Плашка «Пропустить ↓» с полоской хода (И8.4 п.8; создаёт site.js) ---------- */
.pinbar {
  position: fixed; left: 50%; bottom: var(--sp-5); z-index: 40; display: flex; align-items: center; gap: var(--sp-3);
  padding: 6px 6px 6px var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transform: translate(-50%, 140%); opacity: 0; visibility: hidden;
  transition: transform .35s var(--ease), opacity .35s var(--ease), visibility 0s linear .35s;
}
.pinbar.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
.pinbar__track { width: 64px; height: 3px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.pinbar__fill { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--pp, 0)); }
.pinbar button {
  padding: 7px var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg);
  font: 600 var(--fs-kick)/1.2 var(--font); color: var(--ink); white-space: nowrap; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .pinbar { display: none; } }
.proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (min-width: 900px) { .proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.proof__case { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6) var(--sp-5); min-width: 0; }
.proof__who { font-size: var(--fs-kick); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.proof__case h3 { margin: var(--sp-3) 0 var(--sp-3); }
.proof__case > p:last-child { color: var(--ink-2); }
.proof__case ob-stats { margin-top: var(--sp-5); }

/* И12: плитка «infra asm» / «c1 c2» с клиентами (предпросмотр _preview-people.html, одобрен 22.10).
   Ниже 900 px — одна колонка: infra, asm, c1, c2. Цифры ASM — 4 в ряд (≤ 520 px — 2):
   селекторы на ступень сильнее stats.css, который подключается после site.css. */
#proof .sec__head { margin-bottom: var(--sp-5); }
@media (min-width: 900px) {
  .proof--bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "infra asm" "c1 c2"; align-items: stretch; }
}
@media (max-width: 899px) { .proof--bento { grid-template-areas: "infra" "asm" "c1" "c2"; } }
.proof--bento .pb-infra { grid-area: infra; }
.proof--bento .pb-asm { grid-area: asm; }
.proof--bento .pb-c1 { grid-area: c1; }
.proof--bento .pb-c2 { grid-area: c2; }
.proof--bento .proof__case { padding: var(--sp-5); }
.proof--bento h3 { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.25; }
.proof--bento .proof__case > p:not(.proof__who), .pcase__body > p:last-child { font-size: 15px; line-height: 1.5; }
.pb-asm { display: flex; flex-direction: column; }
.pb-asm ob-stats { margin-top: auto; padding-top: var(--sp-4); }
.proof--bento .pb-asm .ob-stats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.proof--bento .pb-asm .ob-stats__item { padding: var(--sp-3) var(--sp-3) 10px; min-height: 0; container-type: inline-size; }
/* И13: размер числа от ширины своей плитки, чтобы «2–3 дня» не выходило за рамку на любой ширине */
.proof--bento .pb-asm .ob-stats__num { font-size: clamp(16px, 23cqi, 30px); line-height: 1.1; white-space: nowrap; }
.proof--bento .pb-asm .ob-stats__label { font-size: 12px; line-height: 1.3; hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 520px) { .proof--bento .pb-asm .ob-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pcase { display: flex; gap: 20px; align-items: flex-start; }
.pcase__ph { width: 96px; height: 96px; border-radius: 20px; object-fit: cover; flex: none; box-shadow: 0 12px 28px rgba(60, 40, 160, .28); }
.pcase__body { min-width: 0; }
.pcase__name { font-size: var(--fs-small); color: var(--muted); margin: 6px 0 0; }
.pcase__name b { color: var(--ink); font-weight: 600; }
.pcase h3 { margin: var(--sp-2) 0 6px; }
.pcase__body > p:last-child { color: var(--ink-2); }
@media (max-width: 520px) { .pcase { flex-direction: column; } }

/* ---------- 8. Вопросы и заявка (§5.11) ---------- */
.qa { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
@media (min-width: 900px) { .qa { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } }
.qa__list details { border-bottom: 1px solid var(--line); padding: var(--sp-4) 0; }
.qa__list summary {
  display: flex; justify-content: space-between; gap: var(--sp-3); cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--fs-body);
}
.qa__list summary::-webkit-details-marker { display: none; }
.qa__list summary::after { content: "+"; flex: none; color: var(--accent-ink); font-size: var(--fs-h3); line-height: 1; }
.qa__list details[open] summary::after { content: "−"; }
.qa__list details p { margin-top: var(--sp-3); color: var(--ink-2); }

.leadform {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
}
@media (min-width: 900px) { .leadform { position: sticky; top: calc(var(--header-h) + var(--sp-5)); padding: var(--sp-6) var(--sp-5); } }
.leadform__intro { color: var(--ink-2); font-size: var(--fs-small); }
.leadform__row { display: flex; flex-direction: column; gap: var(--sp-3); }
.leadform input, .leadform textarea {
  width: 100%; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/1.4 var(--font);
}
.leadform input::placeholder, .leadform textarea::placeholder { color: var(--muted); opacity: 1; }
.leadform textarea { resize: vertical; min-height: 96px; }
.leadform .leadform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.leadform__send { width: 100%; }
.leadform__send:disabled { opacity: .6; cursor: default; }
.leadform__note { font-size: var(--fs-small); color: var(--muted); }
.leadform__msg { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.leadform__msg--ok { color: var(--ok); }
.leadform__msg--err { color: var(--bad); }
/* Заявка в два шага: части формы, вопросы шага 2 кнопками-вариантами (один клик) */
.leadform__step, .leadform__done { display: flex; flex-direction: column; gap: var(--sp-3); }
.leadform__step[hidden], .leadform__done[hidden] { display: none; }
.leadform h3:focus { outline: none; }
/* И9-1.2 (М-1): «Спасибо!» получает фокус программно, ради диктора, — рамку не рисует */
.leadform__done [data-lead-focus]:focus, .leadform__done [data-lead-focus]:focus-visible { outline: none; }
.leadform__q { margin: 0; padding: 0; border: 0; min-width: 0; }
.leadform__q legend { margin-bottom: var(--sp-2); padding: 0; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.leadform__opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.leadform__opt { position: relative; display: inline-flex; }
.leadform .leadform__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.leadform__opt span {
  display: inline-flex; align-items: center; min-height: 36px; padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg);
  font-size: var(--fs-small); line-height: 1.3; color: var(--ink-2);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.leadform__opt:hover span { border-color: var(--accent); color: var(--ink); }
.leadform__opt input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.leadform__opt input:focus-visible + span { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.leadform__q.is-missing legend { color: var(--bad); }
.leadform__need { display: none; font-weight: 400; }
.leadform__q.is-missing .leadform__need { display: inline; }
.leadform__opt-k { margin-top: var(--sp-1); font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.leadform__q.is-missing .leadform__opt span { border-color: var(--bad); }
.leadform__acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.leadform__acts .leadform__send { flex: 1 1 200px; width: auto; }
.leadform__skip:disabled { opacity: .6; cursor: default; }
.leadform__again { align-self: flex-start; margin-top: var(--sp-2); }   /* круг 7, п.46: ещё одна заявка из той же вкладки */

/* Круг 9 (И9.3): шаг 2 — окно посередине экрана, светлая карточка в обеих темах (.on-light) */
html.is-modal-open { overflow: hidden; }
.leadmodal {
  width: min(560px, calc(100% - 2 * var(--gutter))); max-height: calc(100dvh - 2 * var(--sp-5));
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--card); color: var(--ink); box-shadow: var(--shadow);
}
.leadmodal[open] { display: flex; flex-direction: column; animation: leadmodal-in var(--dur) var(--ease); }
.leadmodal::backdrop { background: rgba(12, 11, 10, .62); animation: leadmodal-fade var(--dur) var(--ease); }
@keyframes leadmodal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes leadmodal-fade { from { opacity: 0; } to { opacity: 1; } }
/* шапка: «Свяжемся…» и «Шаг 2 из 2» в один ряд, если помещаются, — тогда на 1440×900 вопросы без прокрутки (Т-25) */
.leadmodal__head {
  position: relative; flex: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
}
.leadmodal__head > .leadmodal__bar, .leadmodal__head > .leadmodal__intro { flex: 1 0 100%; }
.leadmodal__head > .leadmodal__title { flex: 1 0 calc(100% - 40px - var(--sp-2)); }   /* справа место под крестик */
.leadmodal__body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-5) var(--sp-4); }
.leadmodal__foot { flex: none; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); }
.leadmodal__title {
  display: flex; align-items: flex-start; gap: var(--sp-2); margin-right: calc(40px + var(--sp-2));
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; overflow-wrap: anywhere;
}
/* И9-1.2 (М-1): заголовок окна получает фокус программно, ради диктора, — рамку не рисует */
.leadmodal__title:focus, .leadmodal__title:focus-visible { outline: none; }
.leadmodal__title span { min-width: 0; }
.leadmodal__check { flex: none; margin-top: 2px; fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.leadmodal__x {
  position: absolute; top: var(--sp-3); right: var(--sp-3); display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer;
}
.leadmodal__x svg { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
.leadmodal__x:hover { background: var(--bg-2); }
.leadmodal__x:disabled { opacity: .6; cursor: default; }
.leadmodal__when { color: var(--ok); font-weight: 600; font-size: var(--fs-small); }
.leadmodal__step { color: var(--muted); font-size: var(--fs-small); }
.leadmodal__bar { height: calc(var(--sp-1) + 2px); background: var(--bg-2); border-radius: var(--radius-pill); overflow: hidden; }
.leadmodal__bar span { display: block; height: 100%; width: var(--lead-done, 50%); background: var(--accent); border-radius: var(--radius-pill); transition: width var(--dur) var(--ease); }
.leadmodal__intro { color: var(--ink-2); font-size: var(--fs-small); }
.leadmodal .leadform__opts { row-gap: var(--sp-1); }   /* вторая строка пилюль ближе — вопросы помещаются без прокрутки */
.leadmodal__opt-row { display: flex; flex-direction: column; gap: var(--sp-3); }
.leadmodal textarea { min-height: 64px; height: 64px; }   /* rows="2" сам даёт 74 px — держим 64 */
@media (max-width: 600px) {
  .leadmodal { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; }
  .leadmodal__foot { padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .leadmodal[open], .leadmodal::backdrop { animation: none; }
  .leadmodal__bar span { transition: none; }
}

/* Круг 9 (И9.5–И9.6): поле контакта — переключатель «Телефон · Telegram · Почта», телефон на intl-tel-input */
.leadcontact { margin: 0; padding: 0; border: 0; min-width: 0; }
.leadcontact[hidden] { display: none; }
.leadcontact__kinds { display: flex; padding: var(--sp-1); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.leadcontact__kind { position: relative; flex: 1; display: flex; min-width: 0; }
.leadform .leadcontact__kind input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.leadcontact__kind span {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 36px; padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 600; line-height: 1.2; color: var(--ink-2); white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.leadcontact__kind:hover span { color: var(--ink); }
.leadcontact__kind input:checked + span { background: var(--accent); color: var(--on-accent); }
.leadcontact__kind input:focus-visible + span { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.leadcontact__kind input:disabled { cursor: default; }
.leadform input[hidden], .leadcontact__iti[hidden] { display: none; }
.leadcontact__iti { width: 100%; }
.leadform [aria-invalid="true"] { border-color: var(--bad); }
.leadcontact__err { color: var(--bad); font-size: var(--fs-small); font-weight: 600; }
.leadcontact__hint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--ink-2); font-size: var(--fs-small); }
.leadcontact__err[hidden], .leadcontact__hint[hidden] { display: none; }
/* Библиотека в теме сайта: список на телефоне вставляется в body */
body {
  --iti-border-color: var(--line);
  --iti-country-selector-bg: var(--card);
  --iti-hover-color: var(--accent-soft);
  --iti-icon-color: var(--ink-2);
  --iti-strict-reject-flash-color: var(--accent-soft);
}
.iti__country-selector, .iti__country-list { color: var(--ink); }
.iti input.iti__search-input, .leadform .iti input.iti__search-input { background: var(--bg); color: var(--ink); }
/* поиск стран внутри формы: общий .leadform input не должен сбивать отступы под иконки библиотеки */
.leadform .iti input.iti__search-input {
  border: 0; border-radius: 0; min-height: 0;
  padding: var(--sp-2) calc(2 * var(--iti-spacer-horizontal) + var(--iti-clear-icon-size)) var(--sp-2) calc(2 * var(--iti-spacer-horizontal) + var(--iti-globe-icon-size));
}

/* ---------- Открытая платформа: ИИ-агенты клиента (круг 7–8, п.49 правок Юрия) ----------
   Круг 8 (решение Юрия): одна карточка простыми словами вместо двух; окна промта и кнопки копирования нет. */
.tech { margin-top: var(--sp-7); padding-top: var(--sp-7); border-top: 1px solid var(--line); }
.tech__card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); min-width: 0; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6) var(--sp-5);
}
@media (min-width: 900px) { .tech__card { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-6); } }
.tech__main { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.tech__main .kick { margin-bottom: var(--sp-1); }
.tech__h2 { font-size: calc(var(--fs-h2) * .7); }
.tech__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }
.tech__fine { font-size: var(--fs-small); color: var(--muted); }
.tech__nums { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin: 0; }
.tech__nums div {
  display: flex; align-items: center; gap: var(--sp-4); min-width: 0;
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
}
.tech__nums dt {
  flex: none; min-width: 72px; font-size: calc(var(--fs-stat) * .75); font-weight: 800; line-height: var(--lh-tight);
  letter-spacing: -.04em; color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.tech__nums dd { margin: 0; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }
.tech__perks {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5) var(--sp-4);
}
@media (min-width: 600px) { .tech__perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tech__perks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tech__perks li { min-width: 0; padding-top: var(--sp-3); border-top: 2px solid var(--accent); }
.tech__perks b { display: block; font-size: var(--fs-body); color: var(--ink); }
.tech__perks span { display: block; margin-top: var(--sp-1); font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }

/* ---------- Отклик статичных карточек при наведении (круг 7, п.41 правок Юрия) ----------
   Как на прежнем orgbos.com (assets/style.css: .grid > .card:hover): подъём, тень, рамка акцентом, плавно.
   Только там, где есть настоящее наведение мышью: на тач-экранах (hover: none) карточка не залипает
   поднятой после касания. reduced-motion — без движения и тени, только рамка. Карточки внутри виджетов
   (ИИ-сотрудники, модули) — дорожка В. */
.step, .ctrl__col, .proof__case, .tech__card {
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .step:hover, .ctrl__col:hover, .proof__case:hover, .tech__card:hover {
    transform: translateY(-5px); border-color: var(--accent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 12%, transparent), 0 18px 40px color-mix(in srgb, var(--accent) 22%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .step, .ctrl__col, .proof__case, .tech__card { transition: border-color .25s var(--ease); }
  .step:hover, .ctrl__col:hover, .proof__case:hover, .tech__card:hover { transform: none; box-shadow: none; }
}

/* ---------- Подвал: знак ASM Family (И12 п.3, вариант 1 mockups/asm-family.html) ----------
   Рамка — currentColor: тёмно-синяя на светлой теме, светло-голубая на тёмной; стрелка — в своих цветах. */
.site-footer__brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.asmf { --asmf-frame: #1d4d7a; display: block; flex: none; color: var(--asmf-frame); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .asmf { --asmf-frame: #8fc3ee; }
}
:root[data-theme="dark"] .asmf { --asmf-frame: #8fc3ee; }
.asmf__t { font-family: var(--font); fill: var(--ink); }
.asmf__r { fill: var(--asmf-frame); }

/* ---------- И15: согласие на обработку ПД у формы заявки ----------
   Галочка не наследует общий вид полей .leadform input (ширина 100 %, отступы, рамка). */
.leadagree { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-small); color: var(--ink-2); }
.leadagree__box { display: flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer; line-height: 1.4; }
.leadform .leadagree__box input {
  flex: none; width: 20px; height: 20px; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; accent-color: var(--accent); cursor: pointer;
}
.leadagree a { color: var(--accent-ink); }
.leadagree__doc { padding-left: calc(20px + var(--sp-2)); }
.leadagree__err { color: var(--bad); font-weight: 600; }
.leadagree__err[hidden] { display: none; }
.leadform .leadagree__box input[aria-invalid="true"] { outline: 2px solid var(--bad); outline-offset: 2px; }

/* ---------- И15: страницы документов /privacy/ и /consent/ ---------- */
.doc { --doc-w: 46rem; padding: var(--sp-6) 0 var(--sp-7); }
.doc__in { max-width: var(--doc-w); }
.doc h1 { font-size: calc(var(--fs-h2) * .75); }
.doc__date { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--muted); }
.doc__lead { margin-top: var(--sp-5); font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }
.doc__toc { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.doc__toc p { font-size: var(--fs-kick); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.doc__toc ol { margin-top: var(--sp-2); padding-left: var(--sp-5); columns: 2 16rem; column-gap: var(--sp-6); font-size: var(--fs-small); }
.doc__toc li { padding: 2px 0; break-inside: avoid; }
.doc section { margin-top: var(--sp-6); }   /* отступ под шапку при переходе по якорю — scroll-padding-top в theme.css */
.doc h2 { font-size: var(--fs-h3); letter-spacing: -.02em; line-height: 1.25; }
.doc h3 { margin-top: var(--sp-4); font-size: var(--fs-body); }
.doc section > p, .doc section > ul, .doc section > ol, .doc section > dl { margin-top: var(--sp-3); color: var(--ink-2); }
.doc ul, .doc ol { padding-left: var(--sp-5); }
.doc li + li { margin-top: var(--sp-2); }
.doc a { color: var(--accent-ink); overflow-wrap: anywhere; }
.doc strong { color: var(--ink); }
.doc code { font-family: var(--font-mono); font-size: .92em; }
.doc__card { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.doc__card dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1) var(--sp-5); margin: 0; }
@media (min-width: 600px) { .doc__card dl { grid-template-columns: max-content minmax(0, 1fr); } }
.doc__card dt { color: var(--muted); font-size: var(--fs-small); }
.doc__card dd { margin: 0 0 var(--sp-2); color: var(--ink); }
@media (min-width: 600px) { .doc__card dd { margin-bottom: 0; } }
.doc__note { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius-sm); color: var(--ink-2); }
.doc__acts { margin-top: var(--sp-4); }
.doc__acts .btn[hidden] { display: none; }