/* css/variables.css */
/* ==========================================================================
   CSS Variables / Design Tokens — источник: макет Figma «АйТи-Баланс. Сайт»
   ========================================================================== */

/* ─── Шрифты (локальные, без внешних зависимостей) ─────────────────────── */

/* Manrope — вариативный (400–800), два subset'а */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono 700 — метки/бейджи */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Material Symbols Outlined — иконки интерфейса.
   Локальная копия: раньше тянулся с fonts.googleapis.com, что добавляло
   сторонний запрос в критический путь и передавало IP посетителя за рубеж
   (лишнее при остальной обвязке под 152-ФЗ). */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ─── Токены: темная тема (основная, по макету) ───────────────────────── */

:root {
  /* Шрифтовые семейства */
  --font-heading: 'Manrope', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Фоны */
  --bg-primary: #081121;      /* основной темный фон */
  --bg-secondary: #0b1524;    /* чередующиеся секции */
  --bg-card: #0e1a2c;         /* карточки */
  --bg-card-hover: #13233b;

  /* Текст */
  --text-primary: #ffffff;
  --text-secondary: #b7bcc3;  /* приглушенный (меню, подписи) */
  --text-muted: #8792a0;

  /* Акценты */
  --accent: #1d48e6;          /* основные кнопки / акцент */
  --accent-hover: #1a3fce;
  --accent-light: #526ccc;    /* выделение в заголовках */
  --accent-bg: rgba(29, 72, 230, 0.10);
  --accent-bg-strong: rgba(29, 72, 230, 0.16);

  /* Поверхности и границы */
  --surface-2: #374658;       /* вторичная кнопка */
  --surface-2-hover: #415268;
  --border-color: rgba(183, 188, 195, 0.14);
  --border-card: rgba(183, 188, 195, 0.16);
  --border-tag: rgba(183, 188, 195, 0.22);

  /* Hero */
  --hero-overlay: rgba(8, 17, 33, 0.5);

  /* Hero glow — цвет декоративного «кружка» свечения в hero.
     Переопределяется по разделам сайта в css/sections/00-hero-glow.css
     (маркер смены страницы). Базовое значение — главная (сине-фиолетовый).
     Оттенки строго в бренд-диапазоне: синий → индиго → фиолетовый. */
  --hero-glow-core: rgba(90, 116, 255, 0.55);  /* яркий центр */
  --hero-glow-mid:  rgba(120, 70, 220, 0.30);  /* средний перелив */

  /* Радиусы */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-full: 99px;

  /* Раскладка */
  --container-max: 1520px;
  --container-pad: 200px;     /* боковой отступ на широких экранах */
  --section-py: clamp(52px, 5.5vw, 76px);  /* вертикальный ритм секций (адаптивный) */

  /* Запас под шапку: она position:absolute и места в потоке не занимает.
     Замеренная высота — 76–98px, сверху добавлен воздух, чтобы заголовок
     не липнул к нижней кромке шапки. Используется шаблонами без hero. */
  --header-offset: clamp(104px, 4vw + 76px, 140px);
}

/* ─── Токены: светлая тема ─────────────────────────────────────────────── */

[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f6f8fb;
  --bg-card: #f6f8fb;
  --bg-card-hover: #eef2f7;

  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;

  --accent: #1d48e6;
  --accent-hover: #1a3fce;
  --accent-light: #3a58c0;
  --accent-bg: rgba(29, 72, 230, 0.06);
  --accent-bg-strong: rgba(29, 72, 230, 0.10);

  --surface-2: #e6ebf2;
  --surface-2-hover: #dbe2ec;
  --border-color: #e2e8f0;
  --border-card: #e2e8f0;
  --border-tag: #cbd5e1;

  --hero-overlay: rgba(255, 255, 255, 0.4);
}

/* css/base.css */
/* ==========================================================================
   Base / Reset
   Source: globals.css + resets
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* overflow-x держим ТОЛЬКО на body, не на html.

   Когда overflow-x: hidden стоит на обоих, браузер по спецификации
   вычисляет overflow-y как auto, и прокручиваемым контейнером становится
   body вместо окна. От этого ломается position: sticky во всей теме:
   липкий блок отсчитывается от body и не залипает вовсе (так не работало
   закрепление в треках услуги ЭТП).

   На одном body правило от горизонтального скролла спасает так же,
   а sticky продолжает работать. */
html {
  max-width: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.3s ease, color 0.3s ease;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
}

/* ==========================================================================
   Reveal Animations
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Cascade child reveals when parent has .stagger */
.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.08s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.16s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.24s; }
.stagger > .reveal:nth-child(5) { transition-delay: 0.32s; }
.stagger > .reveal:nth-child(6) { transition-delay: 0.40s; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.itb-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 10vw, var(--container-pad));
}

/* Вертикальный ритм секций */
.itb-section {
  padding-block: var(--section-py);
}

.itb-section--alt {
  background: var(--bg-secondary);
}

/* ==========================================================================
   Заголовок секции
   ========================================================================== */

.itb-section__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
  max-width: 720px;
}

.itb-section__eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.itb-section__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--text-primary);
}

.itb-section__subtitle {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ==========================================================================
   Кнопки
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1;
  padding: 16px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--accent-hover);
}

.btn--ghost {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.btn--ghost:hover {
  background: var(--surface-2-hover);
}

.btn--circle {
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-secondary);
}
.btn--circle:hover {
  color: var(--text-primary);
  border-color: var(--border-tag);
}

/* ==========================================================================
   Тег / метка
   ========================================================================== */

.itb-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--accent-bg);
  border: 1px solid var(--border-tag);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
}

/* css/header.css */
/* ==========================================================================
   Site Header — фиксированная шапка (по макету Figma)
   ========================================================================== */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  background: var(--hero-overlay);
  backdrop-filter: blur(2px);
}

/* Шапка вынута из потока (absolute) и места под себя не занимает. Секции с hero
   компенсируют это собственным padding-top, а «плоские» шаблоны (юр-документы,
   обычные страницы, статьи, лента, рубрика, поиск, 404) такого отступа не имели —
   заголовок уезжал под шапку (замеры: наезд 20–36px на юр-страницах).
   Отступ задаём точечно этим шаблонам, а не всему .site-main: страницы с hero
   и собственными паддингами (контакты, «О компании», «Отрасли», кейс) уже
   отбиты правильно, и глобальное правило добавило бы им лишний зазор.
   Фактическая высота шапки: 98px (десктоп), 92px (<900px), 76px (<600px). */
.site-main > .itb-legal,
.site-main > .itb-page,
.site-main > .itb-404,
.site-main > .itb-blog-hero,
.site-main > .itb-article,
.site-main > .itb-single {
  padding-top: var(--header-offset);
}

/* «О компании» начинается не с hero, а с интро-секции: своего запаса под
   шапку у нее нет (на узких экранах до заголовка оставалось 15px).
   padding-top тут больше базового, поэтому берем максимум из двух. */
.site-main > .itb-section--ab-intro {
  padding-top: max(var(--header-offset), clamp(48px, 7vw, 96px));
}

/* Переход по якорю «Обсудить проект» ставит секцию вплотную к верху окна,
   а шапка absolute — она накрыла бы заголовок формы. Отбиваем на её высоту. */
#cta {
  scroll-margin-top: var(--header-offset);
}

.site-header__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 24px clamp(20px, 10vw, var(--container-pad));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Логотип */
.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.site-header__logo-img {
  height: 28px;
  width: auto;
  display: block;
}
.site-header__logo-text {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.18px;
  color: var(--text-secondary);
}

/* Навигация — тянется на все свободное место, меню центрируется между
   логотипом и действиями (иначе space-between прижимает его вправо). */
.site-header__nav {
  display: flex;
  flex: 1;
  justify-content: center;
}
.site-header__menu {
  display: flex;
  align-items: center;
  gap: 26px;
}
.site-header__menu a,
.site-header__menu-text {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--text-secondary);
  white-space: nowrap; /* пункты меню не переносим на вторую строку */
  transition: color 0.2s ease;
}
.site-header__menu a:hover {
  color: var(--text-primary);
}
/* Пункты без ссылки (нет соответствующей сущности) — некликабельны. */
.site-header__menu-text {
  cursor: default;
  opacity: 0.55;
}

/* Действия справа */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Ряд соцсетей в шапке — отдельная группа, отбита от меню тонким разделителем */
.site-header__socials {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
[data-theme="light"] .site-header__socials {
  border-left-color: rgba(22, 24, 31, 0.12);
}
.site-header__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--text-secondary);
  transition: color 0.2s ease, background 0.2s ease;
}
.site-header__social:hover,
.site-header__social:focus-visible {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .site-header__social:hover,
[data-theme="light"] .site-header__social:focus-visible {
  color: #2233d6;
  background: rgba(34, 51, 214, 0.08);
}
.site-header__social:focus-visible { outline: 2px solid #2233d6; outline-offset: 2px; }
.site-header__social .itb-social__icon {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
/* «Тяжелые» заполненные глифы оптически крупнее — чуть ужимаем к общему весу */
.site-header__social[aria-label="Rutube"] .itb-social__icon,
.site-header__social[aria-label="MAX"] .itb-social__icon,
.site-header__social[aria-label="Дзен"] .itb-social__icon {
  width: 15px;
  height: 15px;
}

/* CTA-кнопка шапки — отбита от группы соцсетей */
.site-header__cta { margin-left: 10px; }

/* ==========================================================================
   Бургер — виден только там, где спрятано десктоп-меню (≤900px)
   ========================================================================== */

.site-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  color: var(--text-primary);
  cursor: pointer;
}
.site-header__burger:focus-visible { outline: 2px solid #2233d6; outline-offset: 2px; }

.site-header__burger-box {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}
.site-header__burger-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.site-header__burger-line:nth-child(1) { top: 0; }
.site-header__burger-line:nth-child(2) { top: 6px; }
.site-header__burger-line:nth-child(3) { top: 12px; }

/* Открыто — линии складываются в крестик */
.site-header__burger.is-active .site-header__burger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.site-header__burger.is-active .site-header__burger-line:nth-child(2) { opacity: 0; }
.site-header__burger.is-active .site-header__burger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   Мобильная панель навигации
   ========================================================================== */

.site-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6, 11, 22, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.site-nav-backdrop.is-open { opacity: 1; }
.site-nav-backdrop[hidden] { display: none; }

.site-nav-mobile {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 100;
  width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg-primary);
  border-left: 1px solid var(--border-color);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav-mobile.is-open { transform: translateX(0); }
.site-nav-mobile[hidden] { display: none; }

/* Скролл под панелью не должен уезжать. */
body.has-nav-open { overflow: hidden; }

.site-nav-mobile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-color);
}
.site-nav-mobile__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}
.site-nav-mobile__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-nav-mobile__close:hover { color: var(--text-primary); border-color: var(--border-tag); }
.site-nav-mobile__close:focus-visible { outline: 2px solid #2233d6; outline-offset: 2px; }

/* Пункты — крупные строки-тапзоны, а не сжатое десктопное меню. */
.site-nav-mobile__menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.site-nav-mobile__menu li { display: flex; }
.site-nav-mobile__menu a,
.site-nav-mobile__menu .site-header__menu-text {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 52px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  transition: color 0.2s ease;
}
.site-nav-mobile__menu a:hover { color: var(--accent-light); }
/* Пункты-заглушки без ссылки — приглушены, как и в десктопной строке. */
.site-nav-mobile__menu .site-header__menu-text {
  color: var(--text-secondary);
  opacity: 0.55;
  cursor: default;
}

.site-nav-mobile__footer {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.site-nav-mobile__cta {
  width: 100%;
  height: 54px;
}
.site-nav-mobile__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav-mobile__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-secondary);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-nav-mobile__social:hover { color: var(--text-primary); border-color: var(--border-tag); }
.site-nav-mobile__social:focus-visible { outline: 2px solid #2233d6; outline-offset: 2px; }
.site-nav-mobile__social .itb-social__icon {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-mobile,
  .site-nav-backdrop,
  .site-header__burger-line { transition: none; }
}

/* ==========================================================================
   Выпадающий каталог «Продукты»
   ========================================================================== */

/* Контейнер пункта — якорь для абсолютной панели. */
.itb-has-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

/* Триггер выглядит как обычный пункт меню + каретка. */
.itb-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}
.itb-dropdown-toggle:hover,
.itb-has-dropdown.is-open .itb-dropdown-toggle {
  color: var(--text-primary);
}
.itb-dropdown-toggle:focus-visible {
  outline: 2px solid #2233d6;
  outline-offset: 4px;
  border-radius: 4px;
}

.itb-dropdown-caret {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 0.25s ease;
  opacity: 0.75;
}
.itb-has-dropdown.is-open .itb-dropdown-caret {
  transform: translateY(1px) rotate(-135deg);
}

/* Панель-оверлей. По умолчанию скрыта; раскрывается на .is-open. */
.itb-products-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  transform: translateY(6px);
  width: min(440px, calc(100vw - 40px));
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px -20px rgba(3, 8, 20, 0.7), 0 2px 8px -4px rgba(3, 8, 20, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  z-index: 60;
}
[data-theme="light"] .itb-products-menu {
  box-shadow: 0 18px 44px -22px rgba(15, 27, 45, 0.28), 0 2px 8px -4px rgba(15, 27, 45, 0.14);
}
/* Мостик над разрывом кнопка↔панель, чтобы hover не «проваливался». */
.itb-products-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.itb-has-dropdown.is-open .itb-products-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Простое подменю (напр. «О компании»): короткий список без шапки и ссылки
   «все». Панель у́же — под 1–2 коротких пункта, а не под каталог. */
.itb-products-menu--simple {
  width: max-content;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 40px));
}

/* Заголовок панели: подпись экосистемы + счетчик продуктов моно-цифрой. */
.itb-products-menu__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.itb-products-menu__eyebrow-count {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--accent-bg);
  color: var(--accent-light);
  letter-spacing: 0.06em;
}

/* Список продуктов — ровные ряды, не плитки. */
.itb-products-menu__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
.itb-products-menu__item { min-width: 0; }

.itb-products-menu__link {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 11px;
  min-width: 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  transition: background 0.18s ease;
}
.itb-products-menu__link:hover,
.itb-products-menu__link:focus-visible {
  background: var(--bg-card-hover);
  outline: none;
}
.itb-products-menu__link:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent-light);
}

/* Маркер-точка: приглушенная по умолчанию, акцентная у ядра / при наведении. */
.itb-products-menu__marker {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.45;
  transition: background 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}
.itb-products-menu__link:hover .itb-products-menu__marker,
.itb-products-menu__link:focus-visible .itb-products-menu__marker {
  background: var(--accent);
  opacity: 1;
}

.itb-products-menu__name {
  min-width: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.15px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Роль-метка справа — моно-чип, задает иерархию без описаний. */
.itb-products-menu__role {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 3px 9px;
  border: 1px solid var(--border-tag);
  border-radius: var(--radius-full);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.itb-products-menu__link:hover .itb-products-menu__role,
.itb-products-menu__link:focus-visible .itb-products-menu__role {
  color: var(--text-secondary);
  border-color: var(--border-color);
}

/* Ядро контура — мягкая акцентная заливка, акцентный маркер и метка. */
.itb-products-menu__item.is-core .itb-products-menu__link {
  background: linear-gradient(100deg, var(--accent-bg), transparent 72%);
}
.itb-products-menu__item.is-core .itb-products-menu__link:hover,
.itb-products-menu__item.is-core .itb-products-menu__link:focus-visible {
  background: linear-gradient(100deg, var(--accent-bg-strong), transparent 68%);
}
.itb-products-menu__item.is-core .itb-products-menu__marker {
  background: var(--accent);
  opacity: 1;
}
.itb-products-menu__item.is-core .itb-products-menu__role {
  color: var(--accent-light);
  border-color: color-mix(in oklch, var(--accent-light) 42%, transparent);
}

/* Подвал панели — ссылка «Просмотреть все» как плашка-действие. */
.itb-products-menu__all {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 15px 14px 14px;
  border-top: 1px solid var(--border-color);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
  color: var(--accent-light);
  transition: color 0.18s ease, background 0.18s ease;
}
.itb-products-menu__all-label { display: inline-flex; align-items: center; }
.itb-products-menu__all:hover,
.itb-products-menu__all:focus-visible {
  color: var(--text-primary);
  outline: none;
}
.itb-products-menu__all:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.itb-products-menu__all-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  line-height: 1;
  color: var(--accent-light);
  transition: transform 0.18s ease, color 0.18s ease;
}
.itb-products-menu__all:hover .itb-products-menu__all-arrow {
  transform: translateX(4px);
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .itb-products-menu,
  .itb-products-menu__marker,
  .itb-dropdown-caret,
  .itb-products-menu__all,
  .itb-products-menu__all-arrow { transition: none; }
  .itb-has-dropdown.is-open .itb-products-menu { transform: translateY(0); }
}

/* ==========================================================================
   Адаптив шапки
   ========================================================================== */

/* Сначала ужимаем промежутки меню, чтобы пункты в одну строку помещались дольше */
@media (max-width: 1320px) {
  .site-header__menu { gap: 20px; }
}
@media (max-width: 1240px) {
  .site-header__socials { display: none; }
}
@media (max-width: 900px) {
  .site-header__nav { display: none; }
  .site-header__cta { display: none; }
  .site-header__burger { display: inline-flex; }
}

/* ─── Дропдаун внутри мобильной панели: аккордеон, а не оверлей ─────────── */
.site-nav-mobile__menu .itb-has-dropdown {
  flex-direction: column;
  align-items: stretch;
}
/* Триггер — такая же строка-тапзона, как обычные пункты мобильного меню. */
.site-nav-mobile__menu .itb-dropdown-toggle {
  flex: 1;
  justify-content: space-between;
  min-height: 52px;
  width: 100%;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}
.site-nav-mobile__menu .itb-dropdown-toggle:hover,
.site-nav-mobile__menu .itb-has-dropdown.is-open .itb-dropdown-toggle {
  color: var(--accent-light);
}

/* Панель раскрывается inline: снимаем все «оверлейное» позиционирование. */
.site-nav-mobile__menu .itb-products-menu {
  position: static;
  transform: none;
  width: 100%;
  max-width: none;
  /* Паддинг только на содержимом: на самой панели он переживает max-height: 0
     (overflow режет контент, но не отступы) и делает строки с дропдауном выше
     обычных пунктов меню. */
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, visibility 0s linear 0.28s;
}
.site-nav-mobile__menu .itb-products-menu::before { content: none; }
.site-nav-mobile__menu .itb-products-menu__list { padding-top: 4px; }
/* Нижний отступ — на последнем элементе панели: у «простых» дропдаунов
   (Услуги, О компании) ссылки «все» нет, отступ дал бы только __all. */
.site-nav-mobile__menu .itb-products-menu > :last-child { margin-bottom: 10px; }
.site-nav-mobile__menu .itb-has-dropdown.is-open .itb-products-menu {
  visibility: visible;
  pointer-events: auto;
  max-height: 1200px;
  transition: max-height 0.32s ease;
}
/* Заголовок-эйброу панели на мобилке избыточен — контекст и так ясен. */
.site-nav-mobile__menu .itb-products-menu__eyebrow { display: none; }
.site-nav-mobile__menu .itb-products-menu__link {
  padding: 12px 12px 12px 14px;
  min-height: 48px;
}
.site-nav-mobile__menu .itb-products-menu__name { font-size: 15.5px; }
/* Ядро на мобилке — тонкая рамка вместо градиента (аккордеон без hover). */
.site-nav-mobile__menu .itb-products-menu__item.is-core .itb-products-menu__link {
  background: var(--accent-bg);
}
.site-nav-mobile__menu .itb-products-menu__all {
  margin-top: 4px;
  padding: 13px 14px;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-mobile__menu .itb-products-menu { transition: visibility 0s; }
}
@media (max-width: 480px) {
  .site-header__inner { padding-block: 16px; }
  .site-header__logo-img { height: 24px; }
  .site-header__logo-text { font-size: 16px; }
}

/* css/hero.css */
/* ==========================================================================
   Hero (по макету Figma)
   ========================================================================== */

.itb-hero {
  position: relative;
  min-height: 820px;
  display: flex;
  align-items: center;
  padding-top: 120px;
  background-color: var(--bg-primary);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* С фото-фоном: картинка + затемняющий градиент слева (как было).
   Класс ставит шаблон, когда у записи задана своя картинка (--hero-bg). */
.itb-hero--photo {
  background-image:
    linear-gradient(90deg, rgba(8, 17, 33, 0.92) 0%, rgba(8, 17, 33, 0.55) 45%, rgba(8, 17, 33, 0.15) 100%),
    var(--hero-bg);
}

/* Без своей картинки: темный фон + сине-фиолетовый glow-круг справа
   (как в hero продукта SRM). Единый стиль для всех hero без фото. */
.itb-hero--glow {
  background-color: #060c18;
}
.itb-hero--glow::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -8%;
  width: min(900px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%,
      var(--hero-glow-core) 0%,
      var(--hero-glow-mid) 40%,
      rgba(29, 72, 230, 0.05) 65%,
      transparent 72%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

/* Плавное затухание к низу секции */
.itb-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--bg-primary));
  pointer-events: none;
}

.itb-hero .itb-container {
  position: relative;
  z-index: 1;
}

.itb-hero__badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(218, 220, 226, 0.12);
  border: 1px solid rgba(183, 188, 195, 0.2);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  margin-bottom: 24px;
}

.itb-hero__title {
  max-width: 980px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.04;
  letter-spacing: -1.74px;
  color: var(--text-primary);
  margin-bottom: 28px;
}
/* WYSIWYG оборачивает текст в <p> — убираем отступы */
.itb-hero__title p { margin: 0; }
/* Акцентное слово в заголовке (через <span class="accent"> в контенте) */
.itb-hero__title .accent,
.itb-hero__title em {
  color: var(--accent-light);
  font-style: normal;
}

.itb-hero__subtitle {
  max-width: 640px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 40px;
}

.itb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.itb-hero__actions .btn {
  height: 54px;
}

/* Мелкая строка-мета под кнопками (напр. «9 продуктов · ЭТП · SRM»). */
.itb-hero__meta {
  margin-top: 36px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

@media (max-width: 1024px) {
  .itb-hero {
    min-height: 0;
    /* Шапка абсолютная — hero сам держит под нее верхний отступ. */
    padding-block: 140px 80px;
  }
  .itb-hero__subtitle { margin-bottom: 32px; }
}

@media (max-width: 700px) {
  .itb-hero {
    padding-block: 120px 64px;
    /* Боковой градиент был рассчитан на широкий кадр: на узком текст ложится
       поверх светлой части фото. Затемняем сверху вниз. */
    background-image:
      linear-gradient(180deg, rgba(8, 17, 33, 0.6) 0%, rgba(8, 17, 33, 0.9) 100%),
      var(--hero-bg, url('../img/hero-bg.webp'));
  }
  .itb-hero::after { height: 100px; }
  .itb-hero__badge { margin-bottom: 20px; }
  .itb-hero__title {
    font-size: clamp(28px, 8vw, 38px);
    letter-spacing: -1px;
    margin-bottom: 20px;
  }
  .itb-hero__subtitle { font-size: 16px; margin-bottom: 28px; }
  .itb-hero__actions { flex-direction: column; align-items: stretch; }
  .itb-hero__actions .btn { width: 100%; }
  .itb-hero__meta { margin-top: 28px; font-size: 11px; letter-spacing: 1.1px; }
}

@media (max-width: 380px) {
  .itb-hero { padding-block: 108px 52px; }
  .itb-hero__badge { font-size: 11px; letter-spacing: 1.2px; padding: 7px 13px; }
}

/* css/footer.css */
/* ==========================================================================
   Footer — светлый бежевый (по макету Figma)
   ========================================================================== */

.site-footer {
  background: #efece4;
  color: #16181f;
  border-top: 1px solid #e2ddd1;
  padding-top: 64px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto auto;
  gap: 60px;
  padding-bottom: 48px;
}

/* Бренд-колонка */
.site-footer__brand {
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.4px;
  color: #16181f;
}
.site-footer__logo-img {
  height: 34px;
  width: auto;
  display: block;
}
.site-footer__tagline {
  font-size: 14.5px;
  line-height: 1.55;
  color: #565c6a;
}
.site-footer__brand .btn {
  align-self: flex-start;
  padding: 13px 22px;
  font-size: 14.5px;
  background: #152040;
  color: #fff;
  border-color: #152040;
}
.site-footer__brand .btn:hover { background: #1d2c58; }

/* Ряд иконок соцсетей — монохром, hover уводит в бренд-синий */
.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #ddd8cc;
  border-radius: 11px;
  color: #565c6a;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.site-footer__social:hover,
.site-footer__social:focus-visible {
  color: #2233d6;
  border-color: #2233d6;
  background: rgba(34, 51, 214, 0.06);
}
.site-footer__social:focus-visible { outline: 2px solid #2233d6; outline-offset: 2px; }
.site-footer__social .itb-social__icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Колонки ссылок */
.site-footer__columns {
  display: contents;
}
.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 150px;
}
.site-footer__heading {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8a8578;
  margin-bottom: 4px;
}
.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__links a {
  font-size: 15px;
  color: #3c4250;
  transition: color 0.2s ease;
}
.site-footer__links a:hover { color: #152040; }

/* Контакты */
.site-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 240px;
}
.site-footer__contacts > div { display: flex; flex-direction: column; gap: 3px; }
.site-footer__contacts .site-footer__phone,
.site-footer__contacts .site-footer__email a,
.site-footer__contacts .site-footer__address {
  font-size: 16px;
  color: #16181f;
}
.site-footer__contacts .site-footer__address {
  font-size: 14px;
  line-height: 1.5;
  color: #565c6a;
}

/* Телефонов может быть несколько — колонка задана на .site-footer__contacts > div,
   номера встают друг под другом. Ссылка наследует цвет: подчеркивание только
   по наведению, чтобы столбец номеров не превращался в частокол линий. */
.site-footer__contacts .site-footer__phone-link {
  font-size: 16px;
  color: #16181f;
  transition: color 0.2s ease;
}
.site-footer__contacts .site-footer__phone-link:hover { color: #2233d6; }

/* Подпись номера («отдел продаж») — под своим номером, тише основного текста. */
.site-footer__contacts .site-footer__phone-note {
  font-size: 13px;
  line-height: 1.4;
  color: #565c6a;
  margin-bottom: 4px;
}
/* Мелкие подписи над значениями контактов (Телефон / Email / Адрес) */
.site-footer__contacts .site-footer__label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #a8a396;
}

/* Юридические ссылки и виды деятельности (152-ФЗ) */
.site-footer__legal {
  padding-block: 24px;
  border-top: 1px solid #e2ddd1;
}
.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.site-footer__legal-links a {
  color: #6f6a5e;
  text-decoration: none;
}
.site-footer__legal-links a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Разделитель между ссылками, кроме последней. */
.site-footer__legal-links li:not(:last-child)::after {
  content: '·';
  margin-inline: 10px;
  color: #b8b3a6;
}
.site-footer__okved {
  margin: 0;
  max-width: 90ch;
  font-size: 12px;
  line-height: 1.6;
  color: #a8a396;
}

/* Нижняя строка. Граница сверху — на .site-footer__legal, который идет перед ней. */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-block: 0 28px;
  font-size: 13px;
  color: #8a8578;
}
.site-footer__req {
  display: inline-flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
}

@media (max-width: 1000px) {
  .site-footer { padding-top: 48px; }
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-bottom: 36px;
  }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer { padding-top: 40px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  /* min-width колонок ломал бы одноколоночную сетку на 320px. */
  .site-footer__column,
  .site-footer__contacts { min-width: 0; }
  .site-footer__brand { max-width: none; }
  .site-footer__brand .btn { align-self: stretch; }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-block: 0 22px;
  }
  .site-footer__req { gap: 6px 18px; }

  .site-footer__legal { padding-block: 20px; }
  /* В колонку: разделители-точки на узком экране только мешают. */
  .site-footer__legal-links {
    flex-direction: column;
    gap: 10px;
  }
  .site-footer__legal-links li:not(:last-child)::after { content: none; }
}

/* css/sections/00-hero-glow.css */
/* ==========================================================================
   Hero glow по разделам — цвет декоративного «кружка» свечения в hero
   меняется от страницы к странице (визуальный маркер смены раздела).

   Механика: переопределяем токены --hero-glow-core / --hero-glow-mid
   (объявлены в variables.css) на <body> по классам, которые WordPress
   выдает через body_class(). Сам градиент собран в css/hero.css
   (.itb-hero--glow) и css/sections/40-pp-hero.css (.itb-pp-hero__glow).

   Оттенки строго в бренд-диапазоне: синий (#1d48e6) → индиго → фиолетовый
   (#7846dc). Без «светофора» — никаких теплых/зеленых цветов.
   Значения по умолчанию (главная) остаются в variables.css.
   ========================================================================== */

/* Услуги — индиго. Витрина и карточка отдельной услуги светятся одинаково:
   переход из каталога в услугу не должен читаться как смена раздела. */
body.page-template-template-services,
body.single-service {
  --hero-glow-core: rgba(77, 92, 255, 0.55);
  --hero-glow-mid:  rgba(60, 80, 210, 0.30);
}

/* Решения — сине-стальной */
body.page-template-template-solutions {
  --hero-glow-core: rgba(70, 110, 200, 0.55);
  --hero-glow-mid:  rgba(50, 90, 180, 0.30);
}

/* Продукты — витрина и карточка продукта — фиолетово-пурпурный */
body.page-template-template-products,
body.single-product {
  --hero-glow-core: rgba(120, 70, 220, 0.55);
  --hero-glow-mid:  rgba(95, 55, 190, 0.30);
}

/* Кейсы — голубой */
body.page-template-template-cases {
  --hero-glow-core: rgba(63, 127, 230, 0.55);
  --hero-glow-mid:  rgba(45, 100, 205, 0.30);
}

/* Отрасли и клиенты — глубокий индиго-фиолет: раздел стоит между
   решениями и продуктами, оттенок это и отражает. */
body.page-template-template-industries {
  --hero-glow-core: rgba(96, 84, 232, 0.55);
  --hero-glow-mid:  rgba(76, 64, 200, 0.30);
}

/* О компании — базовый синий бренда: раздел рассказывает о самой компании,
   поэтому оттенок здесь не смещен в сторону, как у продуктовых разделов. */
body.page-template-template-about {
  --hero-glow-core: rgba(46, 92, 235, 0.55);
  --hero-glow-mid:  rgba(35, 70, 200, 0.30);
}

/* css/sections/01-expertise.css */
/* ==========================================================================
   Строка экспертизы (темная лента под hero)
   ========================================================================== */

.itb-expertise {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}

.itb-expertise__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 20px;
  flex-wrap: wrap;
}

.itb-expertise__label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--accent-light);
  flex-shrink: 0;
}

.itb-expertise__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.itb-expertise__item {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0 20px;
  position: relative;
}
/* Точка-разделитель между пунктами */
.itb-expertise__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -1.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
}
.itb-expertise__item:first-child { padding-left: 0; }

/* css/sections/02-tasks.css */
/* ==========================================================================
   Секция «Задачи» — светлая, карточки-лента (по макету)
   ========================================================================== */

.itb-section--tasks {
  background: #f4f5f8;
  color: #1f2025;
}
[data-theme="light"] .itb-section--tasks { background: #f4f5f8; }

/* Заголовок секции — темный текст на светлом фоне */
.itb-section--tasks .itb-section__title { color: #16181f; }
.itb-section--tasks .itb-section__subtitle { color: #565c6a; }

/* Топбар: заголовок слева, подзаголовок + стрелки справа */
.itb-tasks__topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 44px;
}
.itb-tasks__title {
  color: #16181f;
  max-width: 620px;
}
.itb-tasks__nav {
  display: flex;
  align-items: center;
  padding-top: 8px;
}
.itb-tasks__subtitle {
  max-width: 260px;
  font-size: 15px;
  line-height: 1.5;
  color: #565c6a;
  text-align: right;
}

/* Обертка карусели — страничная лента: показываем ровно 3 карточки,
   листаем целыми страницами. Никаких обрезков и градиентов по краям. */
.itb-tasks__carousel {
  position: relative;
}

/* Лента карточек: ширина ровно по контейнеру, ровно 3 карточки в ряд.
   Скролл по горизонтали со строгим snap по началу карточки;
   листание — страницами (шаг = ширина видимой области). */
.itb-cards--tasks {
  display: flex;
  gap: var(--tasks-gap, 24px);
  overflow-x: auto;
  /* Внутренний отступ под тень и hover-подъем карточек, чтобы область
     скролла их не срезала. Компенсируется отрицательными margin (по бокам)
     и вычитается в JS при расчете ширины карточки (--tasks-pad-x). */
  --tasks-pad-x: 16px;
  padding: 12px var(--tasks-pad-x) 22px;
  margin-inline: calc(-1 * var(--tasks-pad-x));
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--tasks-pad-x);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* старый Edge */
}
.itb-cards--tasks::-webkit-scrollbar { display: none; } /* WebKit/Blink */

/* Захват мышью (drag-to-scroll) */
.itb-cards--tasks { cursor: grab; }
.itb-cards--tasks.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
/* Во время драга гасим переходы у карточек, чтобы движение было «липким» к курсору */
.itb-cards--tasks.is-dragging a { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .itb-cards--tasks { scroll-behavior: auto; }
}

/* ── Навигация: стрелки + точки-страницы под лентой ── */
.itb-tasks__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 34px;
}
.itb-tasks__arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid #c9ccd8;
  background: #fff;
  color: #152040;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.itb-tasks__arrow:hover:not(:disabled) {
  border-color: #2233d6;
  color: #2233d6;
}
.itb-tasks__arrow:focus-visible {
  outline: 2px solid #2233d6;
  outline-offset: 3px;
}
.itb-tasks__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Точки-индикаторы страниц */
.itb-tasks__dots {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.itb-tasks__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c4c8d4;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, width 0.25s ease;
}
.itb-tasks__dot:hover { background: #9aa0b8; }
.itb-tasks__dot:focus-visible {
  outline: 2px solid #2233d6;
  outline-offset: 2px;
}
.itb-tasks__dot.is-active {
  width: 26px;
  border-radius: 99px;
  background: #2233d6;
}

@media (max-width: 1000px) {
  .itb-cards--tasks { --tasks-gap: 18px; }
}

@media (max-width: 760px) {
  .itb-tasks__topbar { flex-direction: column; gap: 20px; margin-bottom: 32px; }
  .itb-tasks__nav { width: 100%; justify-content: flex-start; padding-top: 0; }
  .itb-tasks__subtitle { max-width: none; text-align: left; }
  .itb-tasks__pager { gap: 16px; margin-top: 26px; }
  .itb-tasks__arrow { width: 44px; height: 44px; }
}

/* Карточка задачи.
   Ширина рассчитывается JS через CSS-переменную --tasks-card-w так, чтобы
   в видимую область помещалось ровно 3 карточки (учет gap). Высота
   адаптивная (min-height): растет под самый длинный текст, не короче базовой. */
.itb-card--task {
  flex: 0 0 var(--tasks-card-w, 400px);
  width: var(--tasks-card-w, 400px);
  min-height: 280px;
  background: #fff;
  border-radius: 14px;
  padding: 39px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-snap-align: start;
  /* Тень из макета: X0 Y1 Blur5 Spread0 #000 15% */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-card--task:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .itb-card--task { transition: box-shadow 0.3s ease; }
  .itb-card--task:hover { transform: none; }
}

.itb-card--task .itb-card__number {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  color: #152040;
}
.itb-card--task .itb-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.12;
  letter-spacing: -0.54px;
  color: #1f2025;
}
.itb-card--task .itb-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #444957;
}
.itb-card--task .itb-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: auto;
}
/* Теги внутри белой карточки */
.itb-card--task .itb-tag {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: #152040;
  background: #efeffb;
  border: none;
  border-radius: 99px;
  padding: 6px 14px;
}

/* Выделенная карточка (первая) — синяя (тень наследуется из .itb-card--task) */
.itb-card--highlighted {
  background: #2233d6;
}
.itb-card--highlighted .itb-card__number { color: rgba(255, 255, 255, 0.65); }
.itb-card--highlighted .itb-card__title { color: #fff; }
.itb-card--highlighted .itb-card__desc { color: rgba(255, 255, 255, 0.85); }
.itb-card--highlighted .itb-tag {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* CTA-карточка (последняя) — пунктирная рамка, заголовок + описание + кнопка */
.itb-card--cta {
  flex: 0 0 var(--tasks-card-w, 400px);
  width: var(--tasks-card-w, 400px);
  min-height: 280px;
  background: #d9dae2;
  border: 1.5px dashed #9aa0c4;
  border-radius: 14px;
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  transition: background 0.2s ease;
}
.itb-card--cta__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.12;
  letter-spacing: -0.54px;
  color: #16181f;
  margin-bottom: 14px;
}
.itb-card--cta__desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: #444957;
  margin-bottom: auto;
}
.itb-card--cta__btn {
  align-self: stretch;
  height: 54px;
  margin-top: 20px;
  background: #1d2fd6;
}
.itb-card--cta__btn:hover { background: #1626b8; }

/* ── Мобильный: карточка на всю ширину ленты, воздух и кегли ужаты ── */
@media (max-width: 640px) {
  .itb-card--task,
  .itb-card--cta {
    min-height: 0;
    padding: 28px 24px;
  }
  .itb-card--task { gap: 14px; }
  .itb-card--task .itb-card__title,
  .itb-card--cta__title { font-size: 23px; letter-spacing: -0.4px; }
  /* Теги прижимаются к левому краю — по колонке текста, а не «в никуда» справа. */
  .itb-card--task .itb-card__tags { justify-content: flex-start; padding-top: 4px; }
}

/* css/sections/03-solutions.css */
/* ==========================================================================
   Секция «Решения» — бежевая, две колонки (по макету).
   Активна панель, на которую нажали (.is-active), а не всегда первая.
   ========================================================================== */

.itb-section--solutions {
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  background: #efece4;
  border-top: 1px solid #eae6dd;
  border-bottom: 1px solid #eae6dd;
  color: #16181f;
}
[data-theme="light"] .itb-section--solutions { background: #efece4; }

.itb-solutions__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 80px;
  align-items: start;
}

/* Левая колонка — sticky */
.itb-solutions__aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
}
.itb-solutions__eyebrow {
  color: #2233d6;
  letter-spacing: 2px;
  margin-bottom: 24px;
  position: relative;
  padding-left: 38px;
}
.itb-solutions__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 2px;
  background: #2233d6;
  border-radius: 2px;
}
.itb-solutions__aside .itb-section__title {
  color: #2b3a6b;
  font-size: 54px;
  letter-spacing: -1.9px;
  line-height: 1;
  margin-bottom: 24px;
}
.itb-solutions__desc {
  font-size: 16px;
  line-height: 1.56;
  color: #565c6a;
  margin-bottom: 40px;
}
.itb-solutions__aside-footer {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.btn--dark {
  background: #152040;
  color: #fff;
  border-radius: 10px;
  height: 52px;
}
.btn--dark:hover { background: #1d2c58; }
.itb-solutions__count {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  color: #8a8f9c;
}

/* Правая колонка — список карточек.
   Никакого stroke сверху/снизу у группы — разделители живут только между карточками
   (border-top на самих .itb-card--solution). */

/* Карточка-строка решения (неактивная) */
.itb-card--solution {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) 1.4fr auto;
  gap: 30px;
  align-items: start;
  padding: 28px 30px;
  border-top: 1px solid #ddd8cc;
  cursor: pointer;
  transition:
    background 0.28s var(--ease-out-quint),
    transform 0.28s var(--ease-out-quint),
    box-shadow 0.36s var(--ease-out-quint),
    padding 0.36s var(--ease-out-quint);
}
.itb-solutions__list > .itb-card--solution:first-child { border-top: none; }
/* Наведение на неактивную карточку: теплый сдвиг вправо и легкий фон.
   Сдвигаем transform (не margin) — layout не дергается. */
.itb-card--solution:not(.is-active):hover {
  background: rgba(34, 51, 214, 0.04);
  transform: translateX(4px);
}
.itb-card--solution:focus-visible { outline: 2px solid #2233d6; outline-offset: -2px; }

/* Активная (нажатая) карточка — белая, раскрытая */
.itb-card--solution.is-active {
  border-top: none;
  background: #fff;
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: 0 26px 54px -32px rgba(21, 32, 64, 0.45);
  position: relative;
  cursor: default;
}
/* Синяя полоска у активной карточки — «прорастает» сверху вниз при выборе. */
.itb-card--solution.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #2233d6;
  transform-origin: top;
  animation: itb-solution-bar 0.45s var(--ease-out-quint) both;
}
@keyframes itb-solution-bar {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Категория + заголовок держатся единым блоком в 1-й колонке и прижаты к верху —
   так между меткой и заголовком нет «дыры», растянутой высотой описания/points. */
.itb-card--solution .itb-card__head {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: start;
}
/* Короткая метка-категория (SRM и т.п.) — акцентный синий. */
.itb-card--solution .itb-card__category {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #2233d6;
  margin-bottom: 8px;
}
.itb-card--solution .itb-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.44px;
  color: #16181f;
}

/* Описание (2-я колонка) */
.itb-card--solution .itb-card__desc {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  font-size: 14.5px;
  line-height: 1.52;
  color: #565c6a;
}

/* Ссылка «Подробнее» (3-я колонка) */
.itb-card--solution .itb-card__link {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: #2233d6;
  white-space: nowrap;
}
.itb-card--solution .itb-card__link:hover { text-decoration: underline; }

/* Без ссылки «Подробнее» (главная — страниц решений пока нет): третьей колонки
   нет, поэтому убираем ее из сетки, иначе остается висячий gap справа.
   Описание дотягивается до правого края строки. */
.itb-card--solution-nolink {
  grid-template-columns: minmax(220px, 1.1fr) 1.4fr;
}
.itb-card--solution-nolink .itb-card__points { grid-column: 1 / 3; }

/* Points — раскрываются только у активной карточки.
   Внешняя обертка схлопывается через grid-template-rows 0fr→1fr: так анимируется
   высота, а layout не дергается скачком display:none→flex. */
.itb-card--solution .itb-card__points {
  grid-column: 1 / 4;
  grid-row: 3;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  min-height: 0;
  transition: grid-template-rows 0.4s var(--ease-out-quint);
}
.itb-card--solution.is-active .itb-card__points {
  grid-template-rows: 1fr;
}
/* Внутренняя строка (ul) со списком: flex-раскладка тегов + fade-slide при появлении.
   min-height:0 обязателен, чтобы grid-строка могла схлопнуться до нуля. */
.itb-card--solution .itb-card__points-inner {
  min-height: 0;
  margin: 20px 0 0;
  padding: 18px 0 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  border-top: 1px solid #eae6dd;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.3s var(--ease-out-quint) 0.08s,
    transform 0.3s var(--ease-out-quint) 0.08s;
}
.itb-card--solution.is-active .itb-card__points-inner {
  opacity: 1;
  transform: translateY(0);
}
.itb-card--solution .itb-card__points li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  color: #3c4250;
}
.itb-card--solution .itb-card__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #2233d6;
}

@media (max-width: 1000px) {
  .itb-solutions__grid { grid-template-columns: 1fr; gap: 40px; }
  .itb-solutions__aside { position: static; }
  /* Заголовок ужимаем: 54px фиксировано переполняли бы узкую колонку. */
  .itb-solutions__aside .itb-section__title {
    font-size: clamp(30px, 6vw, 44px);
    letter-spacing: -1.2px;
  }
  .itb-solutions__desc { margin-bottom: 28px; }
  .itb-card--solution {
    grid-template-columns: 1fr;
    gap: 16px 20px;
  }
  .itb-card--solution .itb-card__head {
    grid-column: 1;
    grid-row: auto;
  }
  .itb-card--solution .itb-card__desc,
  .itb-card--solution .itb-card__link {
    grid-column: 1;
    grid-row: auto;
    margin-top: 8px;
  }
  .itb-card--solution .itb-card__points { grid-column: 1; }
  /* На узком экране горизонтальный сдвиг при наведении не нужен. */
  .itb-card--solution:not(.is-active):hover { transform: none; }
}

@media (max-width: 640px) {
  .itb-solutions__grid { gap: 32px; }
  /* Карточка тянется в край контейнера: боковые паддинги съедали бы ширину текста.
     Активная (белая, скругленная) — с воздухом, иначе тень липнет к краю. */
  .itb-card--solution { padding: 22px 0; gap: 12px; }
  .itb-card--solution.is-active { padding: 24px 20px; }
  /* Полоска активной карточки прижата к ее левому краю (padding, не 0). */
  .itb-card--solution.is-active::before { top: 14px; bottom: 14px; }
  .itb-card--solution .itb-card__title { font-size: 20px; }
  .itb-card--solution .itb-card__desc,
  .itb-card--solution .itb-card__link { margin-top: 0; }
  /* Points в столбик: 26px между колонками пустует, когда пункт один в строке. */
  .itb-card--solution .itb-card__points-inner {
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
  }
  .itb-solutions__aside-footer { gap: 14px; }
  .itb-solutions__aside-footer .btn--dark { flex: 1 1 auto; }
}

/* Уважаем настройку «меньше движения»: гасим сдвиги, пульс полоски и
   grid-раскрытие, но состояние (раскрытые points) остается мгновенным. */
@media (prefers-reduced-motion: reduce) {
  .itb-card--solution,
  .itb-card--solution .itb-card__points,
  .itb-card--solution .itb-card__points-inner {
    transition: background 0.01ms, color 0.01ms, border-color 0.01ms;
  }
  .itb-card--solution:not(.is-active):hover { transform: none; }
  .itb-card--solution.is-active::before { animation: none; }
  .itb-card--solution .itb-card__points-inner {
    opacity: 1;
    transform: none;
  }
}

/* css/sections/04-products.css */
/* ==========================================================================
   Секция «Связанный портфель» — диаграмма связей (по макету)
   Ядро в центре, модули-спутники по сторонам, бегущие пунктирные линии.
   ========================================================================== */

.itb-section--products {
  background: var(--bg-primary);
}

.itb-section--products .itb-section__header { max-width: 680px; }

/* Диаграмма чуть шире остальных секций, но схема собранная (не на весь экран) */
.itb-section--products .itb-container {
  max-width: 1600px;
  padding-inline: clamp(20px, 4vw, 48px);
}

/* ── Раскладка диаграммы: [левая колонка | ядро | правая колонка] ───────── */
.itb-diagram {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(440px, 540px) minmax(300px, 1fr);
  align-items: center;
  gap: 90px;
  margin-top: 48px;
}
.itb-diagram__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
/* Узлы уже колонки — между ними и ядром остается место под линии */
.itb-diagram__col--left { align-items: flex-start; }
.itb-diagram__col--right { align-items: flex-end; }
.itb-diagram__col .itb-node { width: 380px; max-width: 100%; }
.itb-diagram__core { min-width: 0; }
.itb-diagram__core .itb-card--core { width: 100%; }

/* SVG-слой с линиями: поверх сетки, но не перехватывает клики */
.itb-diagram__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.itb-diagram__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  animation: itb-dash-run 1s linear infinite;
}
@keyframes itb-dash-run {
  to { stroke-dashoffset: -24; }
}

/* Карточки/ядро должны лежать над линиями */
.itb-diagram__col,
.itb-diagram__core { position: relative; z-index: 2; }

/* ── Карточка-спутник (узел диаграммы) ─────────────────────────────────── */
.itb-node {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--border-color);
}
.itb-node:last-child { border-bottom: none; }
.itb-node__num {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(122, 160, 255, 0.30);
  border-radius: 12px;
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent-light);
}
.itb-node__body { min-width: 0; flex: 1 1 auto; }
.itb-node__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.itb-node__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}
.itb-node__link {
  color: inherit;
  transition: color 0.2s ease;
}
.itb-node__link:hover { color: var(--accent-light); }

/* ── Кликабелен весь узел ────────────────────────────────────────────────
   Стрелка одна мало кем читается как «здесь переход», поэтому ссылка
   заголовка растянута на всю строку (stretched link), а стрелка осталась
   декоративной. Фон подсветки рисуем псевдоэлементом с вылетом за паддинги
   узла: у .itb-node padding-inline всего 4px, без вылета заливка липнет
   к тексту. Модификатор --link обязателен: те же .itb-node на витрине услуг
   кликаются иначе (кнопки-поповеры). */
.itb-node--link { position: relative; cursor: pointer; }
.itb-node--link::before {
  content: '';
  position: absolute;
  inset: 0 -16px;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  pointer-events: none;
}
.itb-node--link .itb-node__link::after {
  content: '';
  position: absolute;
  inset: 0 -16px;
  border-radius: var(--radius-sm);
  z-index: 1;
}
/* Содержимое — над подложкой, но под кликабельным слоем ссылки */
.itb-node--link > * { position: relative; }

.itb-node--link:hover::before { background: var(--bg-card-hover); }
.itb-node--link:hover .itb-node__link { color: var(--accent-light); }
.itb-node--link:hover .itb-node__num {
  border-color: rgba(122, 160, 255, 0.55);
  color: var(--accent-light);
}
.itb-node--link:hover .itb-node__arrow {
  color: var(--accent-light);
  transform: translateX(3px);
}
.itb-diagram__col--right .itb-node--link:hover .itb-node__arrow {
  transform: scaleX(-1) translateX(3px);
}

/* Фокус с клавиатуры: та же подсветка + акцентная рамка (идиома темы —
   ср. .itb-products-menu__link в шапке). Свой outline убираем, иначе
   он обвёл бы невидимый растянутый слой ссылки, а не строку. */
.itb-node--link:focus-within::before {
  background: var(--bg-card-hover);
  box-shadow: inset 0 0 0 1px var(--accent-light);
}
.itb-node--link .itb-node__link:focus-visible { outline: none; }
.itb-node--link:focus-within .itb-node__arrow { color: var(--accent-light); }
.itb-node__role {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--accent);
}
.itb-node__desc {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
/* Стрелка у внутреннего края узла (обращенного к ядру), по центру по вертикали */
.itb-node__arrow {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  padding-right: 6px;
  font-size: 19px;
  line-height: 1;
  color: var(--text-muted);
  transition: color 0.2s ease, transform 0.2s ease;
}

/* Правая колонка: номер справа, текст выровнен к ядру */
.itb-diagram__col--right .itb-node { flex-direction: row-reverse; text-align: right; }
.itb-diagram__col--right .itb-node__head { justify-content: flex-end; }
.itb-diagram__col--right .itb-node__arrow {
  margin-left: 0;
  margin-right: auto;
  padding-right: 0;
  padding-left: 6px;
  transform: scaleX(-1);
}
.itb-diagram__col--right .itb-node__arrow:hover { transform: scaleX(-1) translateX(3px); }

/* ── Карточка-ядро (Баланс. Торги) — по макету peErV ───────────────────── */
.itb-card--core {
  width: 100%;
  background: linear-gradient(150deg, #16235a 0%, #0f1830 100%);
  border: 1px solid rgba(122, 160, 255, 0.30);
  border-radius: 22px;
  padding: 35px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #fff;
}
.itb-card--core .itb-card__img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 8px;
}
.itb-card--core .itb-card__head { display: flex; align-items: baseline; gap: 12px; }
/* Фирменный знак AVT — компактный белый лого в правом углу шапки ядра. */
.itb-card--core .itb-card__logo {
  margin-left: auto;
  align-self: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: #fff;
}
.itb-card--core .itb-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.85px;
  color: #fff;
}
.itb-card--core .itb-card__role {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.itb-card--core .itb-card__subtitle,
.itb-card--core .itb-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #aeb9d6;
}
.itb-card--core .itb-card__subtitle + .itb-card__desc { margin-top: -8px; }

/* Пункты — пилюли на полупрозрачном фоне с квадратным маркером */
.itb-card--core .itb-card__points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.itb-card--core .itb-card__points li {
  position: relative;
  padding: 13px 18px 13px 35px;
  font-size: 13.5px;
  color: #dbe2f2;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
}
.itb-card--core .itb-card__points li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #5a8bff;
}
.itb-card--core .itb-card__link {
  margin-top: 0;
  align-self: flex-start;
  background: #2233d6;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 12px 22px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  color: #fff;
  transition: background 0.2s ease;
}
.itb-card--core .itb-card__link:hover { background: #1a279f; }

/* ── Карточки-модули (список справа) ───────────────────────────────────── */
.itb-card--module {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 4px 22px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--border-color);
}
.itb-card--module:first-of-type { border-top: none; }
.itb-card--module .itb-card__img { display: none; }

.itb-card--module .itb-card__number {
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-tag);
  border-radius: 12px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-secondary);
}
.itb-card--module .itb-card__head {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.itb-card--module .itb-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}
.itb-card--module .itb-card__role {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.itb-card--module .itb-card__subtitle { display: none; }
.itb-card--module .itb-card__desc {
  grid-column: 2;
  grid-row: 2;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.itb-card--module .itb-card__points { display: none; }
.itb-card--module .itb-card__link {
  grid-column: 3;
  grid-row: 1 / 3;
  font-size: 22px;
  color: var(--text-secondary);
  transition: color 0.2s ease;
  /* показываем только стрелку */
  font-size: 0;
}
.itb-card--module .itb-card__link::after {
  content: "→";
  font-size: 22px;
}
.itb-card--module .itb-card__link:hover { color: var(--accent-light); }

/* ── Нижний блок «Проектная реализация» ────────────────────────────────── */
.itb-products__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 56px;
}
.itb-products__tags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.itb-products__tags-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-right: 4px;
}

@media (max-width: 1000px) {
  /* Диаграмма складывается в один столбец: ядро сверху, модули под ним */
  .itb-diagram {
    grid-template-columns: 1fr;
    gap: 24px;
    /* Столбец узлов не должен разъезжаться на всю ширину планшета. */
    max-width: 640px;
    margin-inline: auto;
  }
  .itb-diagram__core { order: -1; }
  .itb-diagram__lines { display: none; }         /* на узком линии нечитаемы */
  /* Обе колонки — обычный левый столбец: зеркальная правая теряет смысл без ядра сбоку. */
  .itb-diagram__col--left,
  .itb-diagram__col--right { align-items: stretch; }
  .itb-diagram__col .itb-node { width: 100%; }
  .itb-diagram__col--right .itb-node { flex-direction: row; text-align: left; }
  .itb-diagram__col--right .itb-node__head { justify-content: flex-start; }
  .itb-diagram__col--right .itb-node__arrow {
    margin-left: auto;
    margin-right: 0;
    padding-left: 0;
    padding-right: 6px;
    transform: none;
  }
  .itb-diagram__col--right .itb-node--link:hover .itb-node__arrow { transform: translateX(3px); }
}

@media (max-width: 640px) {
  .itb-card--core { padding: 26px 22px; border-radius: 18px; }
  .itb-card--core .itb-card__title { font-size: 27px; letter-spacing: -0.6px; }
  .itb-card--core .itb-card__logo { width: 28px; height: 28px; }
  .itb-card--core .itb-card__link { align-self: stretch; text-align: center; }
  .itb-card--core .itb-card__points li { padding: 12px 14px 12px 32px; }

  .itb-node { gap: 12px; padding: 16px 0; }
  .itb-node__num { flex-basis: 38px; width: 38px; height: 38px; border-radius: 10px; }
  .itb-node__title { font-size: 16px; }
  /* Стрелка дублирует ссылку заголовка — на узком экране отдаем ее место тексту. */
  .itb-node__arrow { padding-right: 0; font-size: 17px; }

  .itb-products__footer { margin-top: 40px; }
  .itb-products__tags { justify-content: flex-start; }
  .itb-products__tags-label { flex-basis: 100%; margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .itb-diagram__line { animation: none; }
}

/* css/sections/05-audience-why.css */
/* ==========================================================================
   «Почему АйТи-Баланс» (преимущества) и «С кем мы работаем» (аудитория) —
   две бежевые секции. Теплый бежевый фон и темный текст независимо от темы.
   ========================================================================== */

/* ── Общее для пары бежевых секций ── */
.itb-section--audience,
.itb-section--why {
  color: #16181f;
}
.itb-section--why { background: #efece4; }
.itb-section--audience { background: #f4f1ea; }
[data-theme="light"] .itb-section--why { background: #efece4; }
[data-theme="light"] .itb-section--audience { background: #f4f1ea; }

/* Текст шапки внутри бежевых секций — темный независимо от темы */
.itb-section--audience .itb-section__title,
.itb-section--why .itb-section__title {
  color: #16181f;
}
.itb-section--audience .itb-section__subtitle,
.itb-section--why .itb-section__subtitle {
  color: #565c6a;
}

/* ==========================================================================
   «Для кого» — сетка пунктов, 3 колонки на всю ширину
   ========================================================================== */
.itb-audience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 40px;
}
.itb-audience__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 0 26px 28px;
  border-top: 1px solid #ddd8cc;
}
/* Первый ряд без верхней линии (3 колонки — по умолчанию) */
.itb-audience__item:nth-child(-n+3) { border-top: none; }
.itb-audience__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 33px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #2233d6;
}
.itb-audience__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.3px;
  color: #16181f;
}
.itb-audience__desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: #565c6a;
}

/* ==========================================================================
   «Преимущества» — сетка раскрывающихся карточек, 3 колонки на всю ширину.
   Свернута = заголовок + «+»; клик раскрывает описание внутри карточки.
   ========================================================================== */
.itb-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start; /* каждая карточка по своему контенту: свернутые остаются компактными */
}
.itb-why__item {
  position: relative;
  background: #fff;
  border: 1px solid #eae6dd;
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
/* Акцентная полоска слева — выезжает при наведении и в раскрытом состоянии */
.itb-why__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #2233d6;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}
.itb-why__item:hover::before,
.itb-why__item.is-open::before {
  transform: scaleY(1);
}
.itb-why__item:hover {
  border-color: #cfd6f2;
  box-shadow: 0 22px 44px -26px rgba(29, 47, 214, 0.4);
}
.itb-why__item.is-open {
  border-color: #b9c4f0;
  box-shadow: 0 20px 40px -28px rgba(29, 47, 214, 0.35);
}

/* ── Шапка-кнопка ── */
.itb-why__head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 24px 24px 28px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.itb-why__title {
  flex: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: #16181f;
  transition: color 0.3s ease;
}
.itb-why__item:hover .itb-why__title,
.itb-why__item.is-open .itb-why__title {
  color: #1d2fd6;
}

/* Тоггл «+» → «×» (два штриха, вертикальный поворачивается) */
.itb-why__toggle {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid #d6d0c4;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.itb-why__toggle::before,
.itb-why__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.6px;
  background: #2233d6;
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-why__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.itb-why__item:hover .itb-why__toggle { border-color: #b9c4f0; }
.itb-why__item.is-open .itb-why__toggle {
  border-color: #2233d6;
  background: rgba(34, 51, 214, 0.08);
}
/* Раскрыто: вертикальный штрих ложится → знак «−» */
.itb-why__item.is-open .itb-why__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.itb-why__head:focus-visible {
  outline: 2px solid #2233d6;
  outline-offset: -3px;
  border-radius: 12px;
}

/* ── Раскрываемая панель ── */
.itb-why__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-why__item.is-open .itb-why__panel {
  grid-template-rows: 1fr;
}
.itb-why__panel > .itb-why__desc {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0 26px 0 28px;
  font-size: 14px;
  line-height: 1.55;
  color: #565c6a;
  opacity: 0;
  transition: opacity 0.3s ease, padding-bottom 0.4s ease;
}
.itb-why__item.is-open .itb-why__panel > .itb-why__desc {
  opacity: 1;
  padding-bottom: 26px;
}

@media (prefers-reduced-motion: reduce) {
  .itb-why__item,
  .itb-why__item::before,
  .itb-why__toggle,
  .itb-why__toggle::before,
  .itb-why__toggle::after,
  .itb-why__title,
  .itb-why__panel,
  .itb-why__panel > .itb-why__desc { transition: none; }
}

/* ── Адаптив: 3 → 2 → 1 колонка ── */
@media (max-width: 1000px) {
  .itb-audience__grid,
  .itb-why__grid { grid-template-columns: repeat(2, 1fr); }
  /* Первый ряд теперь из 2 пунктов */
  .itb-audience__item:nth-child(-n+3) { border-top: 1px solid #ddd8cc; }
  .itb-audience__item:nth-child(-n+2) { border-top: none; }
}
@media (max-width: 620px) {
  .itb-audience__grid,
  .itb-why__grid { grid-template-columns: 1fr; }
  .itb-audience__grid { gap: 0; }
  /* Первый ряд теперь из 1 пункта */
  .itb-audience__item:nth-child(-n+2) { border-top: 1px solid #ddd8cc; }
  .itb-audience__item:first-child { border-top: none; }
}

/* ── Акцентный «хвост» сетки аудитории ──
   Последний пункт занимает 2 колонки и выделен фирменным синим — тот же
   прием, что карточка-«хвост» на продуктовых страницах (itb-pp-audience).
   Блок стоит после медиазапросов: его правила должны побеждать каскадом. */
.itb-audience__grid .itb-audience__item--feature {
  grid-column: span 2;
  margin-top: 12px;
  padding: 30px 28px;
  border-top: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #2a54ea, #1738b4);
}
.itb-audience__grid .itb-audience__item--feature::before { display: none; }
.itb-audience__item--feature .itb-audience__title { color: #fff; }
.itb-audience__item--feature .itb-audience__desc { color: rgba(255, 255, 255, 0.82); }
@media (max-width: 620px) {
  .itb-audience__grid .itb-audience__item--feature { grid-column: auto; }
}

/* css/sections/06-clients.css */
/* ==========================================================================
   Секция «Нам доверяют» — логотипы клиентов бегущей лентой (marquee).
   Заголовок в контейнере, лента — на всю ширину экрана, крутится непрерывно,
   останавливается при наведении. Светлая в обеих темах, в ритме process/cases.
   ========================================================================== */

.itb-section--clients {
  background: #fbfbf9;
  color: #16181f;
}
[data-theme="light"] .itb-section--clients { background: #fbfbf9; }

.itb-section--clients .itb-section__header { align-items: flex-start; text-align: left; }
.itb-section--clients .itb-section__title { color: #16181f; }

/* ─── Лента на всю ширину экрана ──────────────────────────────────────── */

/* Внешний слой: обрезает ленту по ширине экрана + маска по краям. */
.itb-clients-marquee {
  margin-top: 32px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Внутренний слой: две дорожки в ряд, шире экрана — его и двигаем. */
.itb-clients-marquee__viewport {
  display: flex;
  width: max-content;
}
.itb-clients-marquee:hover .itb-clients-marquee__track {
  animation-play-state: paused;
}

/* Дорожка = один полный набор логотипов. Их две подряд в ряд; каждая едет
   влево на свою полную ширину (-100%) — в конце цикла вторая встает ровно
   на место первой, шов незаметен. */
.itb-clients-marquee__track {
  animation: itb-clients-scroll 60s linear infinite;
}
@keyframes itb-clients-scroll {
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  /* Прокрутка руками, без бесконечной анимации и без дубль-дорожки. */
  .itb-clients-marquee { overflow-x: auto; }
  .itb-clients-marquee__track { animation: none; }
  .itb-clients-marquee__track[aria-hidden="true"] { display: none; }
}

/* Один набор логотипов в ряд (без переноса — лента едет по горизонтали). */
.itb-clients {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 20px;
  flex: 0 0 auto;
  padding-inline: 10px;
}

.itb-clients__item {
  flex: 0 0 208px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 148px;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid #ecece6;
  border-radius: 16px;
  text-align: center;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.itb-clients__item:hover {
  border-color: #dcdccf;
  box-shadow: 0 18px 40px -28px rgba(21, 32, 64, 0.35);
  transform: translateY(-4px);
}

/* Зона логотипа фиксированной высоты — разнокалиберные лого встают ровно. */
.itb-clients__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 100%;
}
.itb-clients__img {
  max-height: 100%;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Спокойно в покое, оживает под курсором — прием logo-wall. */
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
.itb-clients__item:hover .itb-clients__img {
  filter: grayscale(0);
  opacity: 1;
}

/* Fallback без логотипа — монограмма в круге акцентного оттенка. */
.itb-clients__mono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eef0fc;
  color: #2233d6;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  transition: background 0.35s ease, color 0.35s ease;
}
.itb-clients__item:hover .itb-clients__mono {
  background: #2233d6;
  color: #fff;
}

.itb-clients__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: #565c6a;
  transition: color 0.35s ease;
}
.itb-clients__item:hover .itb-clients__name { color: #16181f; }

@media (prefers-reduced-motion: reduce) {
  .itb-clients__item,
  .itb-clients__img,
  .itb-clients__mono,
  .itb-clients__name { transition: none; }
  .itb-clients__item:hover { transform: none; }
}

@media (max-width: 560px) {
  .itb-clients { gap: 14px; }
  .itb-clients__item { flex-basis: 150px; min-height: 132px; padding: 22px 16px; }
}

/* css/sections/07-cases.css */
/* ==========================================================================
   Секция «Кейсы» — светлая, 3 карточки с картинкой (по макету)
   ========================================================================== */

.itb-section--cases {
  background: #fff;
  color: #16181f;
}
[data-theme="light"] .itb-section--cases { background: #fff; }

/* Топбар: заголовок слева, ссылка справа */
.itb-section--cases .itb-section__topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.itb-section--cases .itb-section__topbar .itb-section__header { margin-bottom: 0; }
.itb-section--cases .itb-section__title { color: #16181f; }
.itb-section--cases .itb-section__eyebrow { color: #2233d6; }
.itb-section__link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: #152040;
  white-space: nowrap;
}
.itb-section__link:hover { text-decoration: underline; }

/* Сетка карточек */
.itb-cards--cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.itb-card--case {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.itb-card--case:hover {
  border-color: #c9d0e6;
  box-shadow: 0 20px 44px -30px rgba(21, 32, 64, 0.4);
}

.itb-card--case .itb-card__media {
  display: block;
  aspect-ratio: 411 / 172;
  overflow: hidden;
}
.itb-card--case .itb-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.itb-card--case .itb-tag {
  margin: 22px 24px 0;
  align-self: flex-start;
  color: #2233d6;
  background: #eef0fc;
  border: 1px solid #dfe3f8;
}
.itb-card--case .itb-card__title {
  margin: 14px 24px 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #16181f;
}
.itb-card--case .itb-card__title a { color: inherit; }
.itb-card--case .itb-card__title a:hover { color: #2233d6; }
.itb-card--case .itb-card__desc {
  margin: 10px 24px 26px;
  font-size: 14px;
  line-height: 1.5;
  color: #565c6a;
}

@media (max-width: 900px) {
  .itb-cards--cases { grid-template-columns: 1fr; max-width: 460px; }
}

@media (max-width: 640px) {
  /* Ссылка «все кейсы» уходит под заголовок — рядом ей уже не хватает ширины. */
  .itb-section--cases .itb-section__topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
  }
  .itb-cards--cases { max-width: none; gap: 18px; }
  .itb-card--case .itb-tag { margin: 18px 20px 0; }
  .itb-card--case .itb-card__title { margin: 12px 20px 0; }
  .itb-card--case .itb-card__desc { margin: 10px 20px 22px; }
}

/* css/sections/08-process.css */
/* ==========================================================================
   Секция «Как мы работаем» — ряд шагов (номер + наименование).
   Клик по шагу открывает поповер с описанием под этим шагом. Теплый фон.
   ========================================================================== */

.itb-section--process {
  background: #f4f2ec;
  color: #16181f;
}
[data-theme="light"] .itb-section--process { background: #f4f2ec; }
.itb-section--process .itb-section__title { color: #16181f; }
.itb-section--process .itb-section__subtitle { color: #565c6a; }

/* ── Ряд шагов ── */
.itb-process {
  position: relative; /* контекст для поповера */
}

.itb-steps {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.itb-steps__item {
  position: relative;
}

/* Пунктирная соединительная линия — отдельный слой, НЕ зависит от цвета номера.
   Идет от правого края текущего круга к левому краю следующего. */
.itb-steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 24px; /* центр круга по вертикали */
  left: 48px; /* правый край круга */
  width: calc(100% - 48px + 16px); /* до следующего круга: остаток + gap */
  height: 0;
  border-top: 1.5px dashed #b9bfd6;
  transform: translateY(-50%);
  z-index: 0;
}
/* Последний шаг — линию не тянем */
.itb-steps__item:last-child::before { display: none; }

/* Шаг — кнопка (номер + наименование) */
.itb-steps__btn {
  position: relative;
  z-index: 1; /* поверх линии */
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.itb-steps__btn:disabled { cursor: default; }

/* Круг с номером */
.itb-steps__num {
  width: 48px;
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #2233d6;
  border-radius: 50%;
  background: #fff; /* непрозрачный — перекрывает конец линии под собой */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: #2233d6;
  transition: background-color 0.3s ease, color 0.3s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease;
}
.itb-steps__btn:not(:disabled):hover .itb-steps__num {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -14px rgba(34, 51, 214, 0.5);
}
/* Активный шаг — синяя заливка */
.itb-steps__btn.is-active .itb-steps__num {
  background: #2233d6;
  color: #fff;
  transform: none;
}
.itb-steps__btn:focus-visible {
  outline: 2px solid #2233d6;
  outline-offset: 4px;
  border-radius: 10px;
}

.itb-steps__text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.3;
  color: #444957;
  text-wrap: balance; /* равномерный перенос: строки одинаковой длины */
  transition: color 0.3s ease;
}
.itb-steps__btn:not(:disabled):hover .itb-steps__text,
.itb-steps__btn.is-active .itb-steps__text {
  color: #1d2fd6;
}

/* ── Поповер описания шага ── */
.itb-steps__pop {
  --pop-x: 26px; /* центр активного номера по горизонтали (задает JS) */
  position: absolute;
  z-index: 20;
  width: min(420px, calc(100% - 8px));
  background: #fff;
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 26px 54px -24px rgba(10, 14, 30, 0.4);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-steps__pop[hidden] { display: none; }
.itb-steps__pop.is-open {
  opacity: 1;
  transform: translateY(0);
}
/* Хвостик-стрелка вверх, острие смотрит на активный номер */
.itb-steps__pop::before {
  content: "";
  position: absolute;
  top: -8px;
  left: var(--pop-x);
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: #fff;
  border-radius: 3px 0 0 0;
  transform: rotate(45deg);
}
.itb-steps__pop-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: #16181f;
  margin-bottom: 10px;
}
.itb-steps__pop-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #565c6a;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .itb-steps__num,
  .itb-steps__text,
  .itb-steps__pop { transition: none; }
}

/* «Внедрение AI-разработки»: схема этапов крупнее и на всю ширину (5 шагов,
   а не 8) — по правкам страницы. Точечно по postid, чтобы не задеть схему
   «Как мы работаем» на главной и других услугах. */
@media (min-width: 1101px) {
  .postid-185 .itb-steps { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .postid-185 .itb-steps__num { width: 60px; height: 60px; font-size: 17px; }
  .postid-185 .itb-steps__text { font-size: 15.5px; }
  /* Линия завязана на диаметр круга — подтягиваем под 60px. */
  .postid-185 .itb-steps__item:not(:last-child)::before {
    top: 30px;
    left: 60px;
    width: calc(100% - 60px + 20px);
  }
}

/* ── Адаптив ── */
/* Планшет: 4 в ряд (8 шагов → 2 ряда). Появляется второй ряд — нужен верт. отступ. */
@media (max-width: 1100px) {
  .itb-steps { grid-template-columns: repeat(4, 1fr); gap: 36px 20px; }
  .itb-steps__item::before { display: block; }
  .itb-steps__item:nth-child(4n)::before { display: none; }
}
/* Узкий планшет: 3 в ряд */
@media (max-width: 760px) {
  .itb-steps { grid-template-columns: repeat(3, 1fr); }
  .itb-steps__item::before { display: block; }
  .itb-steps__item:nth-child(3n)::before { display: none; }
}
/* Мобильный: 2 в ряд */
@media (max-width: 520px) {
  .itb-steps { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .itb-steps__item::before { display: block; }
  .itb-steps__item:nth-child(2n)::before { display: none; }
  .itb-steps__pop { width: calc(100% - 8px); }
}

/* css/sections/09-materials.css */
/* ==========================================================================
   Секция «Экспертиза и полезные материалы» — центрированный призыв,
   три свежие записи блога и два действия.

   Секция светлая, как «Кейсы»: карточки статей (.itb-card--post) уже
   написаны под светлый фон и переиспользуются из ленты /press — так блок
   новостей на главной и сам блог выглядят одинаково.
   ========================================================================== */

.itb-section--materials {
  background: #fff;
  color: #16181f;
}
[data-theme="light"] .itb-section--materials { background: #fff; }

/* Заголовок и подзаголовок наследуют цвет секции, а не глобальные токены
   темной темы — иначе на белом фоне они становятся нечитаемыми. */
.itb-section--materials .itb-materials__title { color: #16181f; }
.itb-section--materials .itb-materials__subtitle { color: #565c6a; }

.itb-materials__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.itb-materials__title {
  max-width: 720px;
  margin-bottom: 16px;
}

.itb-materials__subtitle {
  max-width: 620px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 36px;
}

/* Сетка свежих записей: три в ряд, как карточки кейсов и лента блога.
   Текст внутри карточек выровнен влево — центрирование из .itb-materials__inner
   на них не распространяется. */
.itb-materials__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
  text-align: left;
}

.itb-materials__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Текстовая ссылка вместо пары кнопок: карточки выше — главное в секции,
   переход в ленту не должен с ними конкурировать по весу. */
.itb-materials__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.itb-materials__more::after {
  content: '→';
  transition: transform .18s ease;
}
.itb-materials__more:hover {
  color: var(--accent-hover);
  border-bottom-color: currentColor;
}
.itb-materials__more:hover::after {
  transform: translateX(3px);
}
.itb-materials__more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

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

@media (max-width: 640px) {
  /* Одна колонка: карточку ограничиваем по ширине и центрируем, иначе на
     узком экране она растягивается во всю строку и теряет пропорции. */
  .itb-materials__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
    gap: 18px;
  }
}

@media (max-width: 560px) {
  .itb-materials__actions { align-self: stretch; }
}

/* css/sections/10-cta.css */
/* ==========================================================================
   Секция CTA + форма (по макету; форма — placeholder под Bitrix24)
   ========================================================================== */

.itb-section--cta {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.itb-cta__inner {
  display: grid;
  grid-template-columns: 1fr 606px;
  gap: 80px;
  align-items: start;
}

/* Левая колонка — текст + кнопки */
.itb-cta__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--text-primary);
  margin-bottom: 20px;
  max-width: 600px;
}
.itb-cta__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 440px;
}
.itb-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 580px;
}
.itb-cta__buttons .btn {
  padding: 12px 20px;
  font-size: 14.5px;
  border-radius: var(--radius-sm);
}

/* Правая колонка — контейнер формы (визуал карточки — в cta-form.css) */
.itb-cta__form {
  position: relative;
}

@media (max-width: 1000px) {
  .itb-cta__inner { grid-template-columns: 1fr; gap: 40px; }
  .itb-cta__desc { max-width: none; }
  .itb-cta__buttons { max-width: none; }
}

@media (max-width: 640px) {
  .itb-cta__inner { gap: 32px; }
  .itb-cta__desc { margin-bottom: 24px; }
  /* Пресеты темы обращения: два в ряд, вместо ленты в одну строку. */
  .itb-cta__buttons { gap: 8px; }
  .itb-cta__buttons .btn {
    flex: 1 1 calc(50% - 4px);
    padding: 12px 14px;
    font-size: 13.5px;
    white-space: normal;
  }
}

/* css/sections/11-single-case.css */
/* ==========================================================================
   Одиночная страница кейса — структурированный разбор
   (Задача / Решение / Сложность / Результат).
   ========================================================================== */

/* Единая колонка чтения: контейнер темы очень широкий (до 1520px), поэтому
   контент кейса держим в центрированной колонке — иначе текст «прижат влево»,
   а обложка растягивается на всю ширину и выглядит огромной. */
.itb-single--case .itb-single__inner {
  max-width: 880px;
  margin-inline: auto;
}

.itb-single--case .itb-single__head {
  margin-bottom: 40px;
}
.itb-single--case .itb-single__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -1.4px;
  color: var(--text-primary);
  margin: 18px 0 20px;
}
.itb-single--case .itb-single__lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.itb-single--case .itb-single__media {
  margin-bottom: 48px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.itb-single--case .itb-single__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
}

/* ── Структурированные факты ── */
.itb-case-facts {
  display: grid;
  gap: 2px;
  margin: 0;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--border-card);
}
.itb-case-facts__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  padding: 26px 30px;
  background: var(--bg-card);
}
.itb-case-facts__label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 3px;
}
.itb-case-facts__value {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-primary);
}
/* «Результат» — акцентная строка */
.itb-case-facts__row--result {
  background: var(--accent-bg);
}
.itb-case-facts__row--result .itb-case-facts__label {
  color: var(--accent);
}

.itb-single--case .itb-single__content {
  margin-top: 40px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}
/* Типографика тела кейса (h2/p/списки из импортированного контента). */
.itb-single--case .itb-single__content > *:first-child { margin-top: 0; }
.itb-single--case .itb-single__content h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--text-primary);
  margin: 40px 0 16px;
}
.itb-single--case .itb-single__content h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 28px 0 12px;
}
.itb-single--case .itb-single__content p { margin: 0 0 18px; }
/* Глобально ul{list-style:none} (base.css) — в теле кейса возвращаем маркеры:
   у ul — акцентная точка, у ol — нумерация counter'ом. */
.itb-single--case .itb-single__content ul,
.itb-single--case .itb-single__content ol {
  margin: 0 0 18px;
  padding-left: 4px;
  list-style: none;
}
.itb-single--case .itb-single__content li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 26px;
}
.itb-single--case .itb-single__content ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-light);
}
.itb-single--case .itb-single__content ol { counter-reset: itb-li; }
.itb-single--case .itb-single__content ol > li { counter-increment: itb-li; }
.itb-single--case .itb-single__content ol > li::before {
  content: counter(itb-li) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--accent-light);
}
.itb-single--case .itb-single__content a {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.itb-single--case .itb-single__content strong { color: var(--text-primary); }

@media (max-width: 640px) {
  .itb-case-facts__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 22px;
  }
}

/* css/sections/12-cases-page.css */
/* ==========================================================================
   Страница «Кейсы»: витрина (светлая), лента итогов
   ========================================================================== */

/* ─── Витрина кейсов (светлая секция) ──────────────────────────────────── */

.itb-section--cases-showcase {
  background: #f2f4f8;
  color: #16181f;
}
[data-theme="light"] .itb-section--cases-showcase { background: #f2f4f8; }

.itb-cases-showcase__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  max-width: 820px;
}
.itb-section--cases-showcase .itb-section__eyebrow { color: #2233d6; }
.itb-section--cases-showcase .itb-section__title { color: #16181f; }

/* Фильтры-чипы по направлению. */
.itb-cases-showcase__controls {
  margin-bottom: 32px;
}

.itb-cases-showcase__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* .itb-chip описан в 13-sol-showcase.css — переиспользуем чипы витрины решений. */

.itb-cases-showcase__body { position: relative; }
.itb-cases-showcase__empty {
  padding: 40px 0;
  text-align: center;
  font-size: 16px;
  color: #565c6a;
}

/* Сетка карточек кейсов */
.itb-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.itb-case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.itb-case-card:hover {
  border-color: #b9c2e6;
  box-shadow: 0 26px 52px -30px rgba(21, 32, 64, 0.45);
  transform: translateY(-3px);
}
/* .itb-case-card перекрывает UA-стиль [hidden]{display:none} — скрываем явно при фильтре. */
.itb-case-card[hidden] { display: none; }

.itb-case-card__media {
  display: block;
  aspect-ratio: 411 / 200;
  overflow: hidden;
  background: #eef1f6;
}
.itb-case-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.itb-case-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 26px 24px;
  flex: 1;
}

.itb-case-card__cat {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #2233d6;
  margin-bottom: 14px;
}

.itb-case-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(19px, 1.4vw, 22px);
  line-height: 1.18;
  letter-spacing: -0.4px;
  color: #16181f;
  margin-bottom: 12px;
}
.itb-case-card__title a { color: inherit; }
/* Ссылка заголовка растянута на всю карточку — кликается вся плашка. */
.itb-case-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.itb-case-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #565c6a;
  margin-bottom: 18px;
}

.itb-case-card__tag {
  margin-top: auto;
  font-size: 13px;
  color: #45506b;
  background: #eef0fc;
  border: 1px solid #e0e4f8;
  border-radius: var(--radius-full);
  padding: 6px 13px;
}

/* Нижняя CTA-плашка витрины */
.itb-cases-showcase__prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 28px;
  padding: 40px 44px;
  background: #e9ebf1;
  border: 1px solid #dde1ea;
  border-radius: 22px;
}
.itb-cases-showcase__prompt-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: #16181f;
  margin-bottom: 10px;
}
.itb-cases-showcase__prompt-desc {
  font-size: 15.5px;
  line-height: 1.55;
  color: #565c6a;
  max-width: 640px;
}
.itb-cases-showcase__prompt .btn { white-space: nowrap; }

/* ─── Лента итогов (темная) ────────────────────────────────────────────── */

.itb-section--cases-stats {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.itb-cases-stats__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.6px;
  margin-bottom: 40px;
  max-width: 720px;
}
.itb-cases-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.itb-cases-stats__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.itb-cases-stats__grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }

.itb-cases-stats__item {
  padding: 28px 30px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
}
.itb-cases-stats__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -1px;
  color: #fff;
}
.itb-cases-stats__label {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* ─── Адаптив ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .itb-cases-grid { grid-template-columns: repeat(2, 1fr); }
  .itb-cases-stats__grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .itb-cases-showcase__prompt { flex-direction: column; align-items: flex-start; padding: 28px; }
  .itb-cases-showcase__prompt .btn { align-self: stretch; text-align: center; }
}
@media (max-width: 640px) {
  .itb-cases-grid { grid-template-columns: 1fr; }
  .itb-cases-stats__grid,
  .itb-cases-stats__grid[data-count="3"],
  .itb-cases-stats__grid[data-count="4"] { grid-template-columns: 1fr; }

  .itb-cases-showcase__header { margin-bottom: 24px; }
  .itb-cases-showcase__controls { margin-bottom: 26px; }
  /* Чипы — в горизонтальный скролл, а не в несколько рядов переносов. */
  .itb-cases-showcase__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * clamp(20px, 10vw, var(--container-pad)));
    padding-inline: clamp(20px, 10vw, var(--container-pad));
  }
  .itb-cases-showcase__filters::-webkit-scrollbar { display: none; }
  .itb-cases-showcase__filters .itb-chip { flex: none; }

  .itb-case-card__body { padding: 22px 20px 20px; }
  .itb-cases-showcase__prompt { padding: 24px 22px; gap: 22px; }
  .itb-cases-stats__item { padding: 24px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .itb-case-card { transition: none; }
  .itb-case-card:hover { transform: none; }
}

/* ─── Фраза-переход: тезис страницы между hero и витриной ────────────────
   Ни карточки, ни плашки: и то и другое читалось как «еще один блок» —
   а фраза здесь несет позицию компании. Работают только масштаб, воздух
   и несущая линия слева: метка вынесена на поля, линия 1px держит колонку
   текста (толще нельзя — правило про боковые полосы в DESIGN.md).
   Кегль — уровень headline, не display: второй Display-заголовок на
   страницу запрещен, его держит h1 hero. Синего в тексте нет, акцент
   весом и кеглем; единственный синий элемент блока — кнопка. */
/* Фон — тёплый бежевый секции «Наши решения» на главной (03-solutions.css).
   На var(--bg-primary) блок сливался с hero выше. Бежевый отделяет его и от
   hero, и от витрины ниже (холодный #f2f4f8): здесь разница не только
   в светлоте, но и в тоне, поэтому граница читается без линий и теней.
   Цвета текста заданы явно: секция светлая в обеих темах, как «Решения». */
.itb-section--cases-transition {
  background: #efece4;
  border-top: 1px solid #eae6dd;
  border-bottom: 1px solid #eae6dd;
  color: #16181f;
  /* Компактнее обычного ритма секций: блок-связка между hero и витриной,
     а не самостоятельный раздел — на прежних 64–128px он висел в пустоте. */
  padding-block: clamp(40px, 5vw, 72px);
}
[data-theme="light"] .itb-section--cases-transition { background: #efece4; }
/* Своего max-width нет: ширину держит .itb-container, как у остальных секций.
   Ограничитель 1080px остался от схемы с меткой на полях и теперь только
   сужал цитату относительно соседних блоков. */
.itb-cases-transition__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.itb-cases-transition__body {
  /* Несущая линия: единственная графика блока. Отделяет тезис от полей и
     задает ему вертикаль, продолжая ритм секций. Цвет фиксирован под бежевый
     фон — токен темы в тёмном режиме дал бы светлую линию на светлом. */
  border-left: 1px solid #dcd7ca;
  padding-left: clamp(20px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(28px, 3.5vw, 44px);
}
.itb-cases-transition__title {
  /* Та же причина, что у .__quote: в запасной ветке шаблона (нет фото
     гендиректора) заголовок — прямой ребёнок flex-контейнера __body. */
  align-self: stretch;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  /* Отрицательный трекинг обязателен на все крупнее 30px (DESIGN.md). */
  letter-spacing: -1px;
  margin: 0;
  color: #16181f;
  /* Ни max-width, ни text-wrap: balance — фраза короткая, и оба заставляли её
     переноситься раньше, чем кончается строка (balance выравнивает строки по
     длине, а не тянет их). Строка рвётся только по краю колонки; pretty
     оставлен, чтобы не висел одинокий хвост. */
  text-wrap: pretty;
}
/* Выделение слов из [[…]] — весом, а не цветом: синий в тексте убран,
   иначе он спорит с кнопкой и лезет за лимит 10% площади. Шаблон гонит
   текст через itb_highlight_accent, поэтому разметка .accent остается. */
.itb-cases-transition__title .accent {
  color: inherit;
  font-weight: 800;
}

/* ─── Цитата первого лица ───────────────────────────────────────────────── */
/* Фраза-тезис становится прямой речью гендиректора: подпись с фото и
   должностью превращает утверждение в позицию (принцип «доказывай»). Кегль
   не меняется — блок остается уровнем headline. */
.itb-cases-transition__quote {
  margin: 0;
  /* Растягиваем на всю колонку: родитель — flex с align-items: flex-start,
     иначе figure сжалась бы по контенту и цитата переносилась бы раньше
     края, сколько ни снимай с неё max-width. */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  /* Соразмерно уменьшенным внешним отступам блока: иначе снаружи стало
     тесно, а внутри осталось просторно. */
  gap: clamp(20px, 2.2vw, 28px);
}
/* Кавычки-елочки типографикой, а не крупной декоративной глифой во весь блок
   (это SaaS-клише). Ставим вокруг фразы, чтобы прямая речь читалась как речь. */
blockquote.itb-cases-transition__title {
  position: relative;
  quotes: '«' '»';
}
blockquote.itb-cases-transition__title::before { content: open-quote; }
blockquote.itb-cases-transition__title::after  { content: close-quote; }

/* Подпись слева, кнопка справа по краю колонки — на одной оптической линии.
   Кнопка стояла отдельным блоком под цитатой и уводила взгляд вниз, хотя
   ведёт вбок, на витрину.

   Обертка вокруг <figure> и кнопки: figcaption обязан быть прямым потомком
   figure, а после figcaption figure не принимает других элементов, поэтому
   кнопка лежит СНАРУЖИ. Сетка ставит их в одну строку: figure тянется на всю
   ширину, кнопка прижата к правому краю на уровне подписи. */
.itb-cases-transition__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.itb-cases-transition__footer > .itb-cases-transition__quote {
  flex: 1 1 320px;
}
.itb-cases-transition__cite {
  display: flex;
  align-items: center;
  gap: 16px;
}
.itb-cases-transition__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  overflow: hidden;
  /* Плоская поверхность: отделяем портрет тональным кольцом, не тенью
     (The Flat-At-Rest Rule). */
  background: #e6e2d8;
  box-shadow: inset 0 0 0 1px #dcd7ca;
}
.itb-cases-transition__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.itb-cases-transition__cite-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.itb-cases-transition__cite-name {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: #16181f;
}
/* Должность — служебная маркировка: моношрифт-метка, а не корпус текста
   (The Marking-Not-Prose Rule). */
.itb-cases-transition__cite-role {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #565c6a;
}
.itb-cases-transition__cta {
  flex: none;
  scroll-margin-top: 90px;
  white-space: nowrap;
}
/* Колонка под метку убрана вместе с самой меткой: без неё сетка 132px + текст
   оставляла слева пустой отступ. Блок теперь в один поток на всех ширинах. */
@media (max-width: 640px) {
  /* Места на строку не хватает: подпись и кнопка расходятся по вертикали,
     кнопка на всю ширину — как остальные CTA на узких экранах. */
  .itb-cases-transition__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .itb-cases-transition__cta {
    align-self: stretch;
    text-align: center;
  }
}

/* ─── Фолбэк-медиа кейса (нет обложки): геометрия + логотип-марка ───────── */
/* Светлая витрина: сдержанная сине-серая плашка, глубина шагом светлоты,
   тонкий геометрический паттерн, приглушенная марка по центру. */
.itb-media-fallback {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 120% at 50% 0%, #eef1f8 0%, #e2e7f1 55%, #d7dded 100%);
  overflow: hidden;
}
/* Точечная сетка + едва заметная диагональ в брендовом оттенке. */
.itb-media-fallback__grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(29, 72, 230, 0.14) 1.1px, transparent 1.2px),
    linear-gradient(125deg, transparent 46%, rgba(29, 72, 230, 0.05) 50%, transparent 54%);
  background-size: 18px 18px, 100% 100%;
  background-position: 0 0, 0 0;
}
.itb-media-fallback__mark {
  position: relative;
  width: clamp(56px, 22%, 96px);
  height: auto;
  opacity: 0.72;
  filter: saturate(0.9);
}

/* Карточка витрины: плашка держит тот же формат, что и обложка.
   Фолбэк используется ТОЛЬКО в карточках-обложках (витрина + главная).
   На странице кейса медиа выводится лишь при реальной обложке. */
.itb-case-card__media .itb-media-fallback,
.itb-card__media .itb-media-fallback {
  aspect-ratio: 411 / 200;
  height: auto;
}

/* css/sections/13-sol-showcase.css */
/* ==========================================================================
   Витрина решений — светлая секция: поиск, чипы, featured, сетка карточек
   ========================================================================== */

.itb-section--showcase {
  background: #f2f4f8;
  color: #16181f;
}
[data-theme="light"] .itb-section--showcase { background: #f2f4f8; }

.itb-showcase__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  max-width: 820px;
}
.itb-section--showcase .itb-section__eyebrow { color: #2233d6; }
.itb-section--showcase .itb-section__title { color: #16181f; }

/* ─── Чипы ────────────────────────────────────────────────────────────────
   Обёртки фильтра витрины (.itb-showcase__controls/__filters) удалены вместе
   с самим фильтром. Сам .itb-chip остаётся: он общий — на нём держатся чипы
   рубрик блога (51-blog.css) и фильтр кейсов (12-cases-page.css). */

.itb-chip {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  color: #3a4256;
  background: #fff;
  border: 1px solid #e2e6ee;
  border-radius: var(--radius-full);
  padding: 10px 20px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
/* Чип-ссылка (архив рубрики блога): у <a> нет button-сброса —
   гасим подчеркивание и выравниваем как кнопку. */
a.itb-chip {
  display: inline-block;
  text-decoration: none;
  line-height: 1.2;
}
.itb-chip:hover { border-color: #c4ccdd; }
a.itb-chip.is-active:hover { border-color: #1d2ec9; }
.itb-chip.is-active {
  background: #1d2ec9;
  border-color: #1d2ec9;
  color: #fff;
}

/* ─── Тело витрины ────────────────────────────────────────────────────── */

.itb-showcase__body { position: relative; }

/* ─── Featured-карточка (главное решение) ─────────────────────────────── */

.itb-sol-featured {
  display: grid;
  grid-template-columns: 1fr 44%;
  gap: 0;
  background: #0f1836;
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 28px;
  min-height: 380px;
}
/* См. .itb-sol-card[hidden]: класс перекрывает UA-стиль, скрываем при фильтре явно. */
.itb-sol-featured[hidden] { display: none; }

.itb-sol-featured__text {
  padding: 48px 48px 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.itb-sol-featured__badges {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.itb-sol-featured__badge {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: #2233d6;
  border-radius: var(--radius-sm);
  padding: 7px 13px;
}
.itb-sol-featured__cat {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8ea0d8;
}

.itb-sol-featured__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
  margin-bottom: 16px;
}
.itb-sol-featured__desc {
  font-size: 16px;
  line-height: 1.6;
  color: #b7c0d6;
  max-width: 460px;
  margin-bottom: 26px;
}
.itb-sol-featured__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}
.itb-sol-featured__tag {
  font-size: 13.5px;
  color: #c7cfe4;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  padding: 7px 15px;
}
/* Переход на связанный продукт — тот же чип, что в обычной карточке, но по
   тёмному фону: поверхность и рамка полупрозрачно-белые, как у тегов выше. */
.itb-sol-featured__product {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: -14px 0 30px; /* прижимаем к тегам/описанию, отступ до кнопок */
}
.itb-sol-featured__product-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #8f9ab6;
}
.itb-sol-featured__product-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  transition: background .2s cubic-bezier(0.22, 1, 0.36, 1),
              border-color .2s cubic-bezier(0.22, 1, 0.36, 1);
}
.itb-sol-featured__product-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.itb-sol-featured__product-arrow {
  flex: none;
  font-size: 18px;
  transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}
.itb-sol-featured__product-link:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
}
.itb-sol-featured__product-link:hover .itb-sol-featured__product-arrow {
  transform: translate(2px, -2px);
}
.itb-sol-featured__product-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .itb-sol-featured__product-link,
  .itb-sol-featured__product-arrow { transition: none; }
  .itb-sol-featured__product-link:hover .itb-sol-featured__product-arrow { transform: none; }
}

.itb-sol-featured__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}
.itb-sol-featured__actions .btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.itb-sol-featured__actions .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
}

.itb-sol-featured__media {
  background: #16224a center / cover no-repeat;
}

/* ─── Сетка карточек ──────────────────────────────────────────────────── */

.itb-sol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.itb-sol-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 18px;
  padding: 30px 30px 26px;
  /* Мягкий диагональный акцент из угла — «оживляет» плоскую карточку без рамок-полос. */
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(34, 51, 214, 0.045), transparent 46%);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.itb-sol-card:hover {
  border-color: #b9c2e6;
  box-shadow: 0 26px 52px -30px rgba(21, 32, 64, 0.45);
  transform: translateY(-3px);
}
/* Специфичность класса .itb-sol-card перекрывает UA-стиль [hidden]{display:none};
   восстанавливаем скрытие явно, иначе фильтр/поиск прячет карточку только логически. */
.itb-sol-card[hidden] { display: none; }

.itb-sol-card__cat {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #2233d6;
  margin-bottom: 16px;
}

.itb-sol-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(21px, 1.5vw, 24px);
  line-height: 1.16;
  letter-spacing: -0.5px;
  color: #16181f;
  margin-bottom: 14px;
}
.itb-sol-card__title a { color: inherit; }
/* Растягиваем ссылку заголовка на всю карточку — кликается вся плашка. */
.itb-sol-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.itb-sol-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #565c6a;
  margin-bottom: 20px;
}

.itb-sol-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.itb-sol-card__tag {
  font-size: 13px;
  color: #45506b;
  background: #eef0fc;
  border: 1px solid #e0e4f8;
  border-radius: var(--radius-full);
  padding: 6px 13px;
}

/* Маркер перехода в правом нижнем углу: подпись + стрелка «наружу». */
.itb-sol-card__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  color: #2233d6;
}
.itb-sol-card__go-arrow {
  font-size: 20px;
  transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}
.itb-sol-card:hover .itb-sol-card__go-arrow {
  transform: translate(3px, -3px);
}
@media (prefers-reduced-motion: reduce) {
  .itb-sol-card,
  .itb-sol-card__go-arrow { transition: none; }
  .itb-sol-card:hover { transform: none; }
}

/* ── Статичная карточка (страниц решений пока нет) ──
   Ссылок нет, но hover-отклик базовой .itb-sol-card (подъем, рамка, тень)
   оставлен намеренно — карточки должны «оживать» под курсором. */
/* Нижний отступ держал маркер «Подробнее» (margin-top:auto). Без него теги —
   последний элемент, снимаем их нижний margin, чтобы не было лишнего воздуха. */
.itb-sol-card--static .itb-sol-card__tags:last-child { margin-bottom: 0; }
.itb-sol-card--static .itb-sol-card__desc:last-child { margin-bottom: 0; }

/* Хвост сетки: последняя карточка неполного ряда растянута на 2 колонки. */
.itb-sol-card--wide { grid-column: span 2; }

/* Переход на связанный продукт в обычной карточке.
   Была строка «Связанный продукт: <ссылка>» — связь не читалась как переход:
   ссылка в хвосте фразы теряется. Теперь метка-подпись отвечает за смысл
   («что это за элемент»), а кнопка-чип — за действие. Чип плоский в покое,
   отделен тональной рамкой, а не тенью (The Flat-At-Rest Rule). */
.itb-sol-card__product {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
/* Служебная маркировка — моношрифт-метка, не корпус текста
   (The Marking-Not-Prose Rule). */
.itb-sol-card__product-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #7a8296;
}
.itb-sol-card__product-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid #d8dcea;
  border-radius: var(--radius-full);
  background: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.2;
  color: #2233d6;
  text-decoration: none;
  transition: background .2s cubic-bezier(0.22, 1, 0.36, 1),
              border-color .2s cubic-bezier(0.22, 1, 0.36, 1);
}
.itb-sol-card__product-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.itb-sol-card__product-arrow {
  flex: none;
  font-size: 18px;
  transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}
.itb-sol-card__product-link:hover {
  background: #eef0fc;
  border-color: #c3caea;
}
.itb-sol-card__product-link:hover .itb-sol-card__product-arrow {
  transform: translate(2px, -2px);
}
.itb-sol-card__product-link:focus-visible {
  outline: 2px solid #2233d6;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .itb-sol-card__product-link,
  .itb-sol-card__product-arrow { transition: none; }
  .itb-sol-card__product-link:hover .itb-sol-card__product-arrow { transform: none; }
}

/* ─── Нижняя CTA-плашка ───────────────────────────────────────────────── */

.itb-showcase__prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 28px;
  padding: 40px 44px;
  background: #e9ebf1;
  border: 1px solid #dde1ea;
  border-radius: 22px;
}
.itb-showcase__prompt-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: #16181f;
  margin-bottom: 10px;
}
.itb-showcase__prompt-desc {
  font-size: 15.5px;
  line-height: 1.55;
  color: #565c6a;
  max-width: 640px;
}
.itb-showcase__prompt .btn { white-space: nowrap; }

/* ─── Адаптив ─────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .itb-sol-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .itb-sol-featured { grid-template-columns: 1fr; }
  .itb-sol-featured__text { padding: 32px 28px; }
  .itb-sol-featured__media { min-height: 220px; order: -1; }
  .itb-showcase__prompt { flex-direction: column; align-items: flex-start; padding: 28px; }
  .itb-showcase__prompt .btn { align-self: stretch; }
}
@media (max-width: 640px) {
  .itb-sol-grid { grid-template-columns: 1fr; }
  .itb-sol-card--wide { grid-column: auto; }

  .itb-showcase__header { margin-bottom: 24px; }
  /* .itb-chip остаётся общим: мобильный размер нужен чипам блога и кейсов. */
  .itb-chip { flex: none; padding: 9px 16px; font-size: 13.5px; }

  .itb-sol-featured__text { padding: 26px 22px; }
  .itb-sol-featured__badges { gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
  .itb-sol-featured__desc { margin-bottom: 20px; font-size: 15px; }
  .itb-sol-featured__tags { margin-bottom: 26px; }
  .itb-sol-featured__actions { align-self: stretch; }
  .itb-sol-featured__actions .btn { flex: 1 1 100%; }

  .itb-sol-card { padding: 24px 22px 22px; }
  .itb-showcase__prompt { padding: 24px 22px; gap: 22px; }
}

/* css/sections/14-sol-constructor.css */
/* ==========================================================================
   Конструктор решения — светлая (бежевая) секция: центр + карточки-лучи
   ========================================================================== */

.itb-section--constructor {
  background: #e9e5da;
  color: #16181f;
}
[data-theme="light"] .itb-section--constructor { background: #e9e5da; }

.itb-constructor__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto 64px;
}
.itb-section--constructor .itb-section__eyebrow { color: #2233d6; }
.itb-section--constructor .itb-section__title { color: #16181f; }
.itb-section--constructor .itb-section__subtitle { color: #55606f; }

/* ─── Схема ───────────────────────────────────────────────────────────── */

.itb-constructor__scheme {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 300px) 1fr;
  align-items: center;
  gap: 40px 56px;
  position: relative;
}

.itb-constructor__col {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  z-index: 1;
}

/* Карточка-луч */
.itb-constructor__card {
  background: #fff;
  border: 1px solid #dfdbd0;
  border-radius: 16px;
  padding: 22px 24px 46px;
  box-shadow: 0 18px 40px -32px rgba(20, 25, 40, 0.5);
  position: relative;
}

.itb-constructor__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
/* Иконка без «квадрата»: в цвет текста, прижата к правому нижнему углу. */
.itb-constructor__icon {
  position: absolute;
  right: 20px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #16181f;
}
.itb-constructor__icon .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'wght' 500;
}
.itb-constructor__card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: #16181f;
}
.itb-constructor__card-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #5a6270;
}

/* ─── Лучи к центру (SVG рисуется в js/solutions-page.js) ─────────────── */

.itb-constructor__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
/* Линия-луч: акцентный «бегущий» пунктир (keyframes itb-dash-run — в 04-products.css).
   На этой светлой секции ведем линии акцентным синим. */
.itb-constructor__lines .itb-diagram__line {
  fill: none;
  stroke: #2233d6;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  animation: itb-dash-run 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .itb-constructor__lines .itb-diagram__line { animation: none; }
}

/* ─── Центральный узел ────────────────────────────────────────────────── */

.itb-constructor__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  min-height: 150px;
  padding: 32px 28px;
  background: #0f1836;
  border: 6px solid rgba(120, 130, 200, 0.28);
  border-radius: 20px;
  position: relative;
  z-index: 2;
}
.itb-constructor__center-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #7d8fce;
}
.itb-constructor__center-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #fff;
}

/* ─── Кнопки ──────────────────────────────────────────────────────────── */

.itb-constructor__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 64px;
}
.itb-section--constructor .itb-constructor__actions .btn--ghost {
  background: #fff;
  border-color: #d8d3c8;
  color: #16181f;
}
.itb-section--constructor .itb-constructor__actions .btn--ghost:hover {
  background: #f4f2ec;
}

/* ─── Адаптив: паутина сворачивается в столбец ────────────────────────── */

@media (max-width: 900px) {
  .itb-constructor__scheme {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 520px;
    margin-inline: auto;
  }
  .itb-constructor__center { order: -1; }
  .itb-constructor__col { gap: 20px; }
  /* В столбце лучи не нужны — прячем SVG-слой (JS тоже не рисует при offsetParent===null). */
  .itb-constructor__lines { display: none; }
  .itb-constructor__header { margin-bottom: 40px; }
  .itb-constructor__actions { margin-top: 44px; }
}

@media (max-width: 560px) {
  .itb-constructor__header { margin-bottom: 32px; }
  .itb-constructor__center {
    min-height: 0;
    padding: 24px 20px;
    border-width: 4px;
  }
  .itb-constructor__card { padding: 20px 20px 44px; }
  /* Кнопки в столбик: две в ряд ужимаются до нечитаемых. */
  .itb-constructor__actions {
    margin-top: 36px;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
  }
  .itb-constructor__actions .btn { width: 100%; }
}

/* css/sections/15-sol-journey.css */
/* ==========================================================================
   Как решение становится системой — темная секция, нумерованные шаги
   ========================================================================== */

.itb-section--journey {
  background: #0a1120;
  color: #fff;
}
[data-theme="light"] .itb-section--journey {
  background: #0a1120;
  color: #fff;
}

.itb-journey__header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  margin-bottom: 56px;
}
.itb-section--journey .itb-section__eyebrow { color: #5b7bff; }
.itb-section--journey .itb-section__title { color: #fff; }
.itb-section--journey .itb-section__subtitle { color: #9aa4b8; }

/* ─── Список шагов ────────────────────────────────────────────────────── */

.itb-journey__list {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.itb-journey__step {
  display: grid;
  grid-template-columns: 96px minmax(220px, 360px) 1fr;
  align-items: center;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.itb-journey__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 19px;
  color: #c3ccff;
  background: rgba(40, 56, 120, 0.30);
  border: 1px solid rgba(91, 123, 255, 0.28);
}
/* Последний шаг — залитый акцентом. */
.itb-journey__step.is-final .itb-journey__num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.itb-journey__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #fff;
}

.itb-journey__desc {
  font-size: 15.5px;
  line-height: 1.55;
  color: #9aa4b8;
}

/* ─── Ссылка-стрелка ──────────────────────────────────────────────────── */

.itb-journey__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: #5b7bff;
}
.itb-journey__link:hover { color: #7d97ff; }

/* ─── Адаптив ─────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .itb-journey__header { margin-bottom: 40px; }
  .itb-journey__step {
    grid-template-columns: 52px 1fr;
    grid-template-areas:
      "num title"
      "num desc";
    gap: 6px 20px;
    align-items: start;
  }
  .itb-journey__num {
    grid-area: num;
    width: 48px;
    height: 48px;
    font-size: 16px;
    align-self: center;
  }
  .itb-journey__title { grid-area: title; font-size: 18px; }
  .itb-journey__desc { grid-area: desc; margin-top: 6px; }
}

@media (max-width: 480px) {
  /* Номер уходит над заголовком: на 320px колонка текста иначе съедается. */
  .itb-journey__step {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "title"
      "desc";
    gap: 12px;
    padding: 22px 0;
  }
  .itb-journey__num {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 15px;
  }
  .itb-journey__desc { margin-top: 0; font-size: 14.5px; }
  .itb-journey__link { margin-top: 32px; font-size: 15px; }
}

/* css/sections/16-prod-advantages.css */
/* ==========================================================================
   «Ключевые преимущества» — светлая секция-пауза между темным hero и темной
   лентой продуктов. Пункты в ряд, разделены тонкими линиями: карточек нет,
   чтобы не добавлять еще один уровень фона.
   Секция светлая всегда, в обеих темах: локально переопределяем токены,
   поэтому правила ниже остаются на var(), а не на хардкоде цветов.
   ========================================================================== */

.itb-section--prod-adv {
  --bg-secondary: #f6f8fb;
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --accent: #1d48e6;
  --border-color: #e2e8f0;

  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.itb-prod-adv__label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 48px;
}
/* Короткая черта перед меткой — прием из остальных секций страницы. */
.itb-prod-adv__label::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

.itb-prod-adv__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 48px;
  row-gap: 44px;
}

/* Вертикальная линия слева — структурный разделитель колонок, не акцент.
   У первого элемента каждого ряда ее нет: правило перекрывается в @media. */
.itb-prod-adv__item {
  position: relative;
  padding-left: 32px;
}
.itb-prod-adv__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--border-color);
}
.itb-prod-adv__item:nth-child(4n + 1) {
  padding-left: 0;
}
.itb-prod-adv__item:nth-child(4n + 1)::before {
  display: none;
}

.itb-prod-adv__mark {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 20px;
  user-select: none;
}

.itb-prod-adv__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.itb-prod-adv__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 34ch;
}

/* ─── Адаптив ─────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .itb-prod-adv__list { grid-template-columns: repeat(2, 1fr); }

  /* Ряд стал двухколоночным: линия у каждого нечетного пункта лишняя. */
  .itb-prod-adv__item:nth-child(4n + 1) { padding-left: 32px; }
  .itb-prod-adv__item:nth-child(4n + 1)::before { display: block; }
  .itb-prod-adv__item:nth-child(2n + 1) { padding-left: 0; }
  .itb-prod-adv__item:nth-child(2n + 1)::before { display: none; }
}

@media (max-width: 640px) {
  .itb-prod-adv__list {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .itb-prod-adv__label { margin-bottom: 32px; }

  /* В столбец линии не нужны вовсе. */
  .itb-prod-adv__item { padding-left: 0; }
  .itb-prod-adv__item::before { display: none; }
  .itb-prod-adv__desc { max-width: none; }
}

/* css/sections/17-prod-ecosystem.css */
/* ==========================================================================
   Экосистема продуктов — темная секция: лента карточек с авто-прокруткой
   Лента бесшовна: два одинаковых трека, сдвиг на -50% ширины вьюпорта.
   ========================================================================== */

.itb-section--ecosystem {
  background: #0b1020;
  color: #fff;
  overflow: hidden;
}
[data-theme="light"] .itb-section--ecosystem { background: #0b1020; }

/* ─── Шапка ───────────────────────────────────────────────────────────── */

.itb-ecosystem__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}

.itb-ecosystem__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}
.itb-section--ecosystem .itb-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #7f97ff;
}
.itb-section--ecosystem .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: #2f4dff;
  flex: none;
}
.itb-section--ecosystem .itb-section__title { color: #fff; }
.itb-section--ecosystem .itb-section__subtitle { color: #98a2b8; }

.itb-ecosystem__hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8892a8;
  padding-bottom: 4px;
}
.itb-ecosystem__hint .material-symbols-outlined {
  font-size: 20px;
  color: #5b6ee8;
}

/* ─── Лента ───────────────────────────────────────────────────────────── */

/* Нескроллируемая обертка ленты. Градиентные маски краев живут именно здесь:
   на самой .itb-ecosystem__marquee они позиционировались бы от ее padding-box,
   который уезжает вместе с контентом, когда лента переходит в режим прокрутки
   (prefers-reduced-motion). Тогда левая маска всплывала бы серой полосой
   посреди ленты, поверх карточки. */
.itb-ecosystem__lane {
  position: relative;
  /* Полная ширина вьюпорта, вне container-паддингов. */
  width: 100%;
}
.itb-ecosystem__lane::before,
.itb-ecosystem__lane::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 160px);
  z-index: 2;
  pointer-events: none;
}
.itb-ecosystem__lane::before {
  left: 0;
  background: linear-gradient(90deg, #0b1020 0%, rgba(11, 16, 32, 0) 100%);
}
.itb-ecosystem__lane::after {
  right: 0;
  background: linear-gradient(270deg, #0b1020 0%, rgba(11, 16, 32, 0) 100%);
}

.itb-ecosystem__marquee {
  width: 100%;
  overflow: hidden;
  outline: none;
  /* JS выставляет: --marquee-duration по длине трека, --marquee-cycle —
     период ленты (трек + gap), --marquee-delay (отрицательный) — стартовое
     смещение, при котором первая карточка стоит по центру вьюпорта. */
  --marquee-duration: 60s;
  /* Точный период знает только JS (зависит от числа карточек). Без него лента
     стоит: съехавший шов заметнее, чем неподвижная лента. */
  --marquee-cycle: 0px;
  --marquee-delay: 0s;
}

.itb-ecosystem__viewport {
  display: flex;
  width: max-content;
  gap: 28px;
  padding: 8px 28px;
  animation: itb-marquee var(--marquee-duration) linear var(--marquee-delay) infinite;
  /* Лента стоит, пока секция не появилась на экране: иначе к моменту, когда
     до нее доскроллили, она успевает уехать на произвольную фазу.
     Класс снимает Intersection Observer (js/products-page.js). */
  animation-play-state: paused;
}
/* will-change поднимаем только когда лента реально едет. */
.itb-ecosystem__marquee.is-visible .itb-ecosystem__viewport {
  animation-play-state: running;
  will-change: transform;
}

.itb-prod-track {
  display: flex;
  gap: 28px;
  flex: none;
}

/* Период ленты — ширина одного трека плюс gap до его копии: пройдя его,
   второй трек встает ровно туда, где стоял первый. Значение дает JS. */
@keyframes itb-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--marquee-cycle)), 0, 0); }
}

/* Пауза: наведение, фокус с клавиатуры. */
.itb-ecosystem__marquee:hover .itb-ecosystem__viewport,
.itb-ecosystem__marquee:focus-within .itb-ecosystem__viewport {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .itb-ecosystem__viewport { animation: none; }
  .itb-ecosystem__marquee {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .itb-ecosystem__marquee::-webkit-scrollbar { display: none; }
}

/* ─── Карточка продукта ───────────────────────────────────────────────── */

.itb-prod-card {
  position: relative;
  flex: none;
  width: 430px;
  /* Высота ленты не должна зависеть от того, у какого продукта больше пунктов:
     иначе одна многословная карточка растягивает весь ряд, а без нее лента
     схлопывается. Держим ее явно; кнопка «Подробнее» прижата к низу. */
  min-height: 560px;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  padding: 34px 34px 30px;
  border: 1px solid transparent;
  overflow: hidden;
}

/* Декоративный 3D-объект в правом нижнем углу.
   Края смягчены в самом PNG (растушеванная альфа), поэтому CSS-маска не нужна:
   radial-маска обрезала бы композицию объектов, уходящих в край кадра. */
.itb-prod-card__object {
  position: absolute;
  /* Стоит над кнопкой (54px + нижний паддинг) и частично уходит за правый
     край карточки — так он не наезжает на список пунктов. */
  right: -30px;
  bottom: 92px;
  width: 168px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.4));
  /* Сдвиг влево на 20% собственной ширины: обычный и широкий объекты
     смещаются пропорционально, right-привязка и адаптив не ломаются. */
  transform: translateX(-20%);
}
/* Широкий объект (Linkbox) — лежит по низу, за кнопкой. */
.itb-prod-card__object--wide {
  right: -36px;
  bottom: 90px;
  width: 240px;
}

/* На светлых карточках тень мягче, на темных — глубже. */
.itb-prod-card--light .itb-prod-card__object {
  filter: drop-shadow(0 12px 20px rgba(20, 25, 40, 0.22));
}
.itb-prod-card--dark .itb-prod-card__object {
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.5));
}

/* Освобождаем объекту правый нижний угол: текст к нему не подходит. */
.itb-prod-card__points,
.itb-prod-card__desc {
  max-width: 300px;
}

/* Текст и кнопка — поверх объекта. */
.itb-prod-card > *:not(.itb-prod-card__object) {
  position: relative;
  z-index: 1;
}

.itb-prod-card--light {
  background: #fff;
  color: #16181f;
  border-color: #e6e8ee;
}
.itb-prod-card--dark {
  background: #101a33;
  color: #fff;
  border-color: rgba(148, 163, 208, 0.18);
}

/* Карточка-призыв замыкает ленту: не продукт, а приглашение к разговору.
   Пунктирная рамка и приглушенный фон выводят ее из ряда продуктов;
   контент прижат книзу — заголовок сверху, кнопка в подвале. */
.itb-prod-card--ghost {
  background: #d3d4dc;
  color: #16181f;
  border: 2px dashed #9aa0bb;
  padding-top: 44px;
}
.itb-prod-card--ghost .itb-prod-card__title {
  font-size: 32px;
  margin-bottom: 18px;
}
.itb-prod-card--ghost .itb-prod-card__desc {
  color: #4b5060;
  max-width: none;
  margin-bottom: 34px;
}
.itb-prod-card--ghost .itb-prod-card__go {
  background: #1c1ce0;
  color: #fff;
}
.itb-prod-card--ghost .itb-prod-card__go:hover { background: #1616bd; }

/* Шапка карточки: номер + роль */
.itb-prod-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.itb-prod-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
}
.itb-prod-card--light .itb-prod-card__num {
  background: #e7e9fb;
  color: #2233d6;
}
.itb-prod-card--dark .itb-prod-card__num {
  background: rgba(90, 116, 255, 0.16);
  color: #94a6ff;
}

.itb-prod-card__role {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.itb-prod-card--light .itb-prod-card__role { color: #6b7280; }
.itb-prod-card--dark .itb-prod-card__role { color: #94a6ff; }

.itb-prod-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.8px;
  margin-bottom: 14px;
}

.itb-prod-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  border-radius: var(--radius-full);
  padding: 7px 14px 7px 11px;
  margin-bottom: 16px;
}
.itb-prod-card__badge .material-symbols-outlined {
  font-size: 17px;
  flex: none;
}
.itb-prod-card--light .itb-prod-card__badge {
  background: #eef0fc;
  color: #2233d6;
}
.itb-prod-card--dark .itb-prod-card__badge {
  background: rgba(90, 116, 255, 0.14);
  color: #a3b2ff;
}

.itb-prod-card__desc {
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 22px;
}
.itb-prod-card--light .itb-prod-card__desc { color: #565c6a; }
.itb-prod-card--dark .itb-prod-card__desc { color: #9aa4bb; }

/* Пункты — маркер-точка акцентного цвета */
.itb-prod-card__points {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 28px;
}
.itb-prod-card__point {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.4;
}
.itb-prod-card__point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.itb-prod-card--light .itb-prod-card__point { color: #3d434f; }
.itb-prod-card--light .itb-prod-card__point::before { background: #2233d6; }
.itb-prod-card--dark .itb-prod-card__point { color: #c3cadb; }
.itb-prod-card--dark .itb-prod-card__point::before { background: #5a74ff; }

/* Кнопка «Подробнее» прижата к низу — карточки равной высоты. */
.itb-prod-card__go {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  transition: background .18s ease, color .18s ease;
}
.itb-prod-card--light .itb-prod-card__go {
  background: #101a33;
  color: #fff;
}
.itb-prod-card--light .itb-prod-card__go:hover { background: #1d2a4d; }
.itb-prod-card--dark .itb-prod-card__go {
  background: rgba(148, 163, 208, 0.12);
  color: #fff;
}
.itb-prod-card--dark .itb-prod-card__go:hover { background: rgba(148, 163, 208, 0.22); }

.itb-prod-card__go-arrow { font-size: 19px; }

/* ─── Адаптив ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .itb-ecosystem__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 36px;
  }
  .itb-ecosystem__viewport,
  .itb-prod-track { gap: 20px; }
  .itb-ecosystem__viewport { padding-inline: 20px; }
}

@media (max-width: 640px) {
  .itb-prod-card {
    /* Карточка чуть уже вьюпорта: сосед выглядывает и подсказывает, что лента едет. */
    width: min(300px, 82vw);
    /* Уже карточка — выше текст: фиксируем меньшую планку, дальше растет сама. */
    min-height: 520px;
    padding: 26px 24px 24px;
  }
  .itb-prod-card__head { margin-bottom: 20px; }
  .itb-prod-card__title { font-size: 25px; }
  .itb-prod-card--ghost .itb-prod-card__title { font-size: 27px; }
  /* Текст занимает всю ширину: max-width:300px оставлял место объекту,
     а на узкой карточке объект и так ужат. */
  .itb-prod-card__points,
  .itb-prod-card__desc { max-width: none; }
  .itb-prod-card__points { gap: 9px; margin-bottom: 22px; }
  /* Объект мельче и глубже в угол — иначе наезжает на список пунктов. */
  .itb-prod-card__object {
    width: 124px;
    right: -22px;
    bottom: 84px;
  }
  .itb-prod-card__object--wide { width: 168px; right: -26px; bottom: 82px; }
  .itb-prod-card__go { height: 50px; }
}

/* css/sections/18-prod-platform.css */
/* ==========================================================================
   Продукты → «Готовая база для развития платформы»
   Плашка-заявка + сетка карточек-преимуществ, в одной светлой секции.
   Плашка повторяет .itb-showcase__prompt витрины решений.
   ========================================================================== */

/* ─── Плашка-заявка ───────────────────────────────────────────────────── */

.itb-prod-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
  padding: 40px 44px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 22px;
}

.itb-prod-prompt__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.itb-prod-prompt__desc {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 640px;
}

.itb-prod-prompt .btn { white-space: nowrap; }

/* ─── Сетка преимуществ ───────────────────────────────────────────────── */

/* Секция светлая всегда, в обеих темах: локально переопределяем токены,
   поэтому правила ниже остаются на var(), а не на хардкоде цветов.
   Плашка-заявка .itb-prod-prompt лежит внутри секции и наследует их же.
   Фон теплый бежевый, карточки и плашка — белые: так они читаются как
   объекты поверх фона. Границы тоже теплые, холодный серо-голубой
   #e2e8f0 на бежевом выглядел бы грязным контуром. */
.itb-section--platform {
  --bg-secondary: #f5f1ea;
  --bg-card: #ffffff;
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --accent: #1d48e6;
  /* Кнопка .btn--primary внутри плашки берет hover-цвет отсюда. */
  --accent-hover: #1a3fce;
  --border-card: #e5ded2;

  background: var(--bg-secondary);
  color: var(--text-primary);
}

.itb-platform__header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 800px;
  margin-bottom: 56px;
}
.itb-section--platform .itb-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--accent);
}
.itb-section--platform .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}
.itb-section--platform .itb-section__title { color: var(--text-primary); }
.itb-section--platform .itb-section__subtitle { color: var(--text-secondary); }

.itb-platform__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.itb-platform__card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  /* Нижний правый угол занят иконкой — оставляем ей место. */
  padding: 30px 32px 56px;
  box-shadow: 0 18px 40px -34px rgba(20, 25, 40, 0.5);
  transition: transform .18s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow .18s cubic-bezier(0.25, 1, 0.5, 1);
}
.itb-platform__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 50px -34px rgba(20, 25, 40, 0.55);
}

.itb-platform__card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.itb-platform__card-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 42ch;
}

/* Иконка — без «квадрата», в правом нижнем углу (как в конструкторе решений). */
.itb-platform__icon {
  position: absolute;
  right: 24px;
  bottom: 20px;
  font-size: 24px;
  color: var(--text-primary);
  font-variation-settings: 'wght' 500;
  opacity: .85;
}

/* Последняя карточка — акцент завершения. Синяя, а не темная: темное пятно
   на темной теме слилось бы с фоном, а синий читается в обеих. */
.itb-platform__card.is-final {
  background: var(--accent);
  border-color: var(--accent);
}
.itb-platform__card.is-final .itb-platform__card-title { color: #fff; }
.itb-platform__card.is-final .itb-platform__card-desc { color: rgba(255, 255, 255, 0.82); }
.itb-platform__card.is-final .itb-platform__icon { color: #fff; }

/* ─── Адаптив ─────────────────────────────────────────────────────────── */

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

@media (max-width: 900px) {
  .itb-prod-prompt {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
    margin-bottom: 40px;
  }
  .itb-prod-prompt .btn { align-self: stretch; }
  .itb-platform__header { margin-bottom: 40px; }
}

@media (max-width: 640px) {
  .itb-platform__grid { grid-template-columns: 1fr; gap: 16px; }
  .itb-prod-prompt { padding: 24px 22px; gap: 22px; }
  .itb-prod-prompt__desc { max-width: none; }
  .itb-platform__card { padding: 24px 22px 52px; }
  .itb-platform__card-desc { max-width: none; }
  .itb-platform__icon { right: 20px; bottom: 18px; }
}

/* css/sections/19-prod-cta.css */
/* ==========================================================================
   Продукты → финальный CTA: темная секция, текст слева, форма справа.
   Раскладку (.itb-cta__inner / __title / __desc / __buttons / __form) дает
   10-cta.css — здесь только темный скоуп и надзаголовок, которого там нет.
   Секция темная в обеих темах, поэтому переопределяем токены в ее скоупе —
   форма (cta-form.css) наследует их без дублирования правил.
   ========================================================================== */

.itb-section--prod-cta {
  --bg-primary: #0b1020;
  --bg-card: #101a33;
  --text-primary: #ffffff;
  --text-secondary: #9aa4bb;
  --border-card: rgba(148, 163, 208, 0.18);
  --accent-bg: rgba(90, 116, 255, 0.14);
  --surface-2: rgba(148, 163, 208, 0.12);
  --surface-2-hover: rgba(148, 163, 208, 0.22);
  --border-color: rgba(148, 163, 208, 0.18);

  background: #0b1020;
  color: #fff;
}

/* Надзаголовок с чертой слева (в решениях его в CTA нет). */
.itb-section--prod-cta .itb-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #7f97ff;
  margin-bottom: 16px;
}
.itb-section--prod-cta .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: #2f4dff;
  flex: none;
}

/* css/sections/20-legal.css */
/* Юридические страницы: политики, согласия, сведения об организации. */

.itb-legal,
.itb-page {
    padding-block: var(--section-py);
}

.itb-legal__article,
.itb-page__article {
    max-width: 820px;
    margin-inline: auto;
}

.itb-legal__title,
.itb-page__title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
}

/* ─── Типографика длинного текста ─────────────────────────────────────────── */

.itb-legal__content {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.7;
}

.itb-legal__content h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 1.3;
    color: var(--text-primary);
    margin-block: 48px 16px;
}

.itb-legal__content h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: 1.4;
    color: var(--text-primary);
    margin-block: 32px 12px;
}

.itb-legal__content > h2:first-child {
    margin-top: 0;
}

.itb-legal__content p {
    margin-block: 0 16px;
}

.itb-legal__content a {
    color: var(--accent-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.itb-legal__content a:hover {
    color: var(--accent);
}

.itb-legal__content ul {
    margin-block: 0 20px;
    padding-left: 0;
    list-style: none;
}

.itb-legal__content li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
}

.itb-legal__content li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

/* ─── Реквизиты (dl) ──────────────────────────────────────────────────────── */

.legal-req {
    margin-block: 0 24px;
    padding: 20px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
}

.legal-req__row {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 8px 20px;
    padding-block: 8px;
}

.legal-req__row + .legal-req__row {
    border-top: 1px solid var(--border-color);
}

.legal-req dt {
    color: var(--text-muted);
    font-size: 14px;
}

.legal-req dd {
    margin: 0;
    color: var(--text-primary);
}

/* ─── Таблица видов деятельности ──────────────────────────────────────────── */

.legal-table__scroll {
    overflow-x: auto;
    margin-block: 0 24px;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.legal-table th,
.legal-table td {
    padding: 14px 20px;
    text-align: left;
    vertical-align: top;
}

.legal-table thead th {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.legal-table tbody tr + tr td {
    border-top: 1px solid var(--border-color);
}

.legal-table td:first-child {
    font-family: var(--font-mono);
    color: var(--accent-light);
    white-space: nowrap;
}

/* ─── Дата актуализации ───────────────────────────────────────────────────── */

.legal-date {
    color: var(--text-muted);
    font-size: 14px;
    margin-block: 4px 0 !important;
}

.legal-date + .legal-date {
    margin-top: 0;
}

.itb-legal__content > .legal-date:first-of-type {
    margin-top: 48px;
}

/* ─── Мобильные ───────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
    .itb-legal__title,
    .itb-page__title {
        margin-bottom: 28px;
    }

    .itb-legal__content h2 {
        margin-top: 36px;
        font-size: 21px;
    }

    .legal-req {
        padding: 16px 18px;
    }

    .legal-req__row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .legal-table th,
    .legal-table td {
        padding: 12px 14px;
    }
}

/* css/sections/21-cookie-banner.css */
/* Баннер согласия на использование cookie. */

.itb-cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Ниже мобильного меню (100) и его оверлея (90), выше хедера (50). */
    z-index: 80;
    padding: 16px clamp(16px, 4vw, 32px);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    background: var(--bg-card);
    border-top: 1px solid var(--border-card);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .18);

    transform: translateY(100%);
    transition: transform .28s ease-out;
}

.itb-cookie.is-visible {
    transform: translateY(0);
}

.itb-cookie__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.itb-cookie__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.itb-cookie__text a {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.itb-cookie__text a:hover {
    color: var(--accent-light);
}

.itb-cookie__accept {
    flex-shrink: 0;
    min-width: 160px;
}

@media (max-width: 720px) {
    .itb-cookie__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .itb-cookie__text {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .itb-cookie {
        transition: none;
    }
}

/* css/sections/22-svc-hero.css */
/* ==========================================================================
   Услуги → Hero: скругленные чипы-направления над кнопками.
   Базовый hero (badge/title/subtitle/actions) дает css/hero.css.
   ========================================================================== */

.itb-svc-hero__chips {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* Шире, чтобы 9 чипов укладывались в 2 ряда, а не переносились на 3-й. */
  max-width: 1120px;
}

.itb-svc-hero__chip {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-full);
  padding: 11px 18px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .itb-svc-hero__chips { gap: 8px; margin-bottom: 24px; }
  .itb-svc-hero__chip { font-size: 13px; padding: 9px 14px; }
}

/* css/sections/23-svc-catalog.css */
/* ==========================================================================
   Услуги → Каталог: заголовок со счетчиком, вводный абзац, крупная
   выделенная карточка (синяя, с картинкой) и строки-перечни с hover.
   ========================================================================== */

/* Секция светлая независимо от темы сайта (сайт по умолчанию темный):
   переопределяем токены на светлую палитру в скоупе секции. */
.itb-section--svc-catalog {
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-card-hover: #eef2f7;
  --border-card: #cbd3df;
  --accent-light: #3a58c0;

  background: #f2f4f8;
  color: #0f1b2d;
}

/* Каталог шире остальных секций — даем воздух перечням и featured-карточке.
   Поднимаем предел ширины и сокращаем боковые отступы только здесь. */
.itb-section--svc-catalog .itb-container {
  max-width: 1760px;
  padding-inline: clamp(20px, 6vw, 96px);
}

/* ─── Шапка секции ─────────────────────────────────────────────────────── */

.itb-svc-catalog__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.itb-svc-catalog__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Надзаголовок с синей чертой слева (как в остальных секциях услуг). */
.itb-section--svc-catalog .itb-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--accent-light);
}
.itb-section--svc-catalog .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

.itb-svc-catalog__count {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  padding-bottom: 8px;
}

.itb-svc-catalog__intro {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 40px;
}

/* ─── Список услуг ─────────────────────────────────────────────────────── */

.itb-svc-catalog__list {
  display: flex;
  flex-direction: column;
}

/* Общая ячейка «услуга»: слева описание, справа перечень пунктов в 2 колонки. */
.itb-svc-service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 32px 80px;
  padding: 48px 32px;
  border-top: 1px solid var(--border-card);
  transition: background 0.2s ease;
}
.itb-svc-service:last-child { border-bottom: 1px solid var(--border-card); }

/* ─── Аккордеон (обычные услуги) ───────────────────────────────────────── */

/* <details> — не grid: раскладку держат summary + reveal.
   Разделители-границы переезжают сюда с обычной строки. */
.itb-svc-service--acc {
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
}
.itb-svc-service--acc:last-child { border-bottom: 1px solid var(--border-card); }

/* Свернутая шапка: номер + заголовок слева, стрелка справа. */
.itb-svc-service__summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 40px 32px;
  cursor: pointer;
  list-style: none;
  transition: background 0.2s ease;
}
.itb-svc-service__summary::-webkit-details-marker { display: none; }
.itb-svc-service__summary:hover { background: var(--bg-card-hover); }
/* list-style:none снимает и штатный маркер фокуса — возвращаем свой. */
.itb-svc-service__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Заголовок занимает все свободное место, превью и кнопку прижимаем вправо. */
.itb-svc-service__summary .itb-svc-service__title {
  flex: 1 1 auto;
  margin-bottom: 0;
}

/* Порядковый номер строки — моноширинная метка (JetBrains Mono только на метках). */
.itb-svc-service__num {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.itb-svc-service--acc:hover .itb-svc-service__num,
.itb-svc-service--acc[open] .itb-svc-service__num { color: var(--accent-light); }

/* Превью содержимого: сообщает, что под строкой что-то есть. */
.itb-svc-service__preview {
  flex: none;
  font-size: 13.5px;
  color: var(--text-muted);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
/* Раскрыли — счетчик пунктов уже неинформативен, убираем. */
.itb-svc-service--acc[open] .itb-svc-service__preview { opacity: 0; }

/* Кнопка-плюс: круг с двумя штрихами, вертикальный исчезает при раскрытии. */
.itb-svc-service__toggle {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-card);
  border-radius: 50%;
  background: #fff;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
}
.itb-svc-service__toggle::before,
.itb-svc-service__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  border-radius: 1px;
  background: var(--text-secondary);
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, background 0.2s ease, opacity 0.2s ease;
}
.itb-svc-service__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }

.itb-svc-service--acc:hover .itb-svc-service__toggle {
  background: var(--accent);
  border-color: var(--accent);
}
.itb-svc-service--acc:hover .itb-svc-service__toggle::before,
.itb-svc-service--acc:hover .itb-svc-service__toggle::after { background: #fff; }

/* Открыто: плюс становится минусом, круг залит акцентом. */
.itb-svc-service--acc[open] .itb-svc-service__toggle {
  background: var(--accent);
  border-color: var(--accent);
}
.itb-svc-service--acc[open] .itb-svc-service__toggle::before,
.itb-svc-service--acc[open] .itb-svc-service__toggle::after { background: #fff; }
.itb-svc-service--acc[open] .itb-svc-service__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* Раскрываемое содержимое: плавная анимация высоты через grid-rows 0fr→1fr. */
.itb-svc-service__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.itb-svc-service--acc[open] .itb-svc-service__reveal {
  grid-template-rows: 1fr;
}

/* Внутренний контейнер: двухколоночный grid (описание / пункты), обрезаем на схлопывании. */
.itb-svc-service__reveal-inner {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 32px 80px;
  /* Верхний паддинг 0 — контент прилегает к шапке; боковые/нижний как у строки. */
  padding: 0 32px 44px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.itb-svc-service--acc[open] .itb-svc-service__reveal-inner { opacity: 1; }

.itb-svc-service__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.18;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  margin-bottom: 16px;
  text-wrap: balance;
}

.itb-svc-service__desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.itb-svc-service__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.itb-svc-service__cta:hover { gap: 12px; color: var(--accent-hover); }

/* Перечень пунктов — 2 колонки, маркер-точка. */
.itb-svc-service__points {
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 40px;
}
.itb-svc-service__point {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.itb-svc-service__point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Hover обычной строки: только мягкая подсветка фона, без сдвига текста. */
.itb-svc-service:not(.itb-svc-service--featured):hover {
  background: var(--bg-card-hover);
}

/* ─── Выделенная (синяя) карточка ──────────────────────────────────────── */

.itb-svc-service--featured {
  position: relative;
  grid-template-columns: 1fr;
  border: none;
  background: var(--accent);
  border-radius: var(--radius-lg);
  padding: 0;
  margin-bottom: 28px;
  overflow: hidden;
  color: #fff;
}
.itb-svc-service--featured:last-child { border-bottom: none; }

.itb-svc-service--featured .itb-svc-service__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 32px 48px;
  /* Правый отступ увеличен — освобождаем место под 3D-молоток в углу. */
  padding: 48px 220px 48px 52px;
  position: relative;
}

/* Главная колонка (номер/заголовок/описание/cta) в featured. */
.itb-svc-service--featured .itb-svc-service__main {
  grid-row: 1;
}
.itb-svc-service--featured .itb-svc-service__title { color: #fff; }
.itb-svc-service--featured .itb-svc-service__desc { color: rgba(255, 255, 255, 0.86); }
.itb-svc-service--featured .itb-svc-service__cta { color: #fff; }
.itb-svc-service--featured .itb-svc-service__cta:hover { color: #fff; }

/* Пункты featured — светлый маркер. */
.itb-svc-service--featured .itb-svc-service__point { color: rgba(255, 255, 255, 0.9); }
.itb-svc-service--featured .itb-svc-service__point::before { background: rgba(255, 255, 255, 0.85); }

/* 3D-молоток в правом нижнем углу карточки (как в блоке продуктов). */
.itb-svc-service__object {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 240px;
  max-width: 40%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 16px 28px rgba(8, 17, 33, 0.4));
}

/* ─── Адаптив ──────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .itb-svc-service,
  .itb-svc-service__reveal-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .itb-svc-service__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .itb-svc-service--featured .itb-svc-service__body {
    grid-template-columns: 1fr;
    padding: 32px;
  }
  /* На узких экранах молоток мешает — прячем. */
  .itb-svc-service__object { display: none; }
}

/* Превью-счетчик пунктов конкурирует с заголовком за ширину — на узких убираем. */
@media (max-width: 720px) {
  .itb-svc-service__preview { display: none; }
}

@media (max-width: 560px) {
  .itb-svc-catalog__header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .itb-svc-service__points { grid-template-columns: 1fr; gap: 12px; }
  .itb-svc-service:not(.itb-svc-service--featured):hover { padding-left: 12px; padding-right: 12px; }
  /* Отступы строки ниже — свернутый список не должен быть простыней. */
  .itb-svc-service__summary { padding: 26px 20px; gap: 14px; }
  .itb-svc-service__reveal-inner { padding-left: 20px; padding-right: 20px; }
  /* Номер и кнопка компактнее, заголовку остается больше места. */
  .itb-svc-service__num { font-size: 12px; }
  .itb-svc-service__toggle { width: 30px; height: 30px; }
  .itb-svc-service__toggle::before,
  .itb-svc-service__toggle::after { width: 11px; }
}

/* Уважаем отключенную анимацию: раскрытие мгновенно, без переходов. */
@media (prefers-reduced-motion: reduce) {
  .itb-svc-service__reveal,
  .itb-svc-service__reveal-inner,
  .itb-svc-service__toggle {
    transition: none;
  }
}

/* css/sections/24-svc-process.css */
/* ==========================================================================
   Услуги → Процесс: «Как строится работа». Сетка 3×2 шагов с крупными
   номерами и префиксом «Шаг». Разделительная линия над сеткой.
   Фон — приподнятая темная поверхность (светлее следующей секции Форматов),
   чтобы две темные секции подряд читались как разные плоскости.
   ========================================================================== */

.itb-section--svc-process {
  background: #0f1a2e;
}

.itb-svc-process__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin-bottom: 40px;
}

/* Надзаголовок с синей чертой. */
.itb-section--svc-process .itb-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--accent-light);
}
.itb-section--svc-process .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

.itb-svc-process__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--accent);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 40px;
  padding-top: 48px;
}

.itb-svc-process__step {
  display: flex;
  flex-direction: column;
}

.itb-svc-process__num {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 20px;
}
.itb-svc-process__step-label {
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.itb-svc-process__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.itb-svc-process__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .itb-svc-process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}
@media (max-width: 560px) {
  .itb-svc-process__list { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
}

/* css/sections/25-svc-formats.css */
/* ==========================================================================
   Услуги → Форматы сотрудничества: темная секция. Слева крупный заголовок,
   справа сетка темных карточек-кнопок (kicker, title, desc, чипы, стрелка).
   Секция темная всегда (в обеих темах): переопределяем токены в скоупе.
   ========================================================================== */

.itb-section--svc-formats {
  --text-primary: #ffffff;
  --text-secondary: #9aa4bb;
  --text-muted: #6f7c99;
  --accent-light: #7f97ff;

  /* Глубже, чем Процесс (#0f1a2e): стык двух темных секций читается сменой
     плоскости. Тонкая линия сверху делает границу четкой. */
  background: #0b1020;
  border-top: 1px solid rgba(127, 151, 255, 0.14);
  color: #ffffff;
}

.itb-svc-formats__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
  gap: 48px;
  align-items: start;
}

/* ─── Левая колонка ────────────────────────────────────────────────────── */

.itb-svc-formats__aside {
  position: sticky;
  top: 96px;
}

.itb-section--svc-formats .itb-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--accent-light);
  margin-bottom: 20px;
}
.itb-section--svc-formats .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

.itb-svc-formats__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.itb-svc-formats__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.itb-svc-formats__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.2s ease;
}
.itb-svc-formats__link:hover { gap: 14px; }

/* ─── Сетка карточек ───────────────────────────────────────────────────── */

.itb-svc-formats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.itb-svc-format {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 28px;
  border: 1px solid rgba(148, 163, 208, 0.16);
  border-radius: var(--radius-md);
  background: #101a33;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.itb-svc-format:hover {
  border-color: rgba(127, 151, 255, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(8, 17, 33, 0.18);
}

.itb-svc-format__kicker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #7f97ff;
  margin-bottom: 16px;
}

.itb-svc-format__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 12px;
}

.itb-svc-format__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #9aa4bb;
  margin-bottom: 24px;
}

.itb-svc-format__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.itb-svc-format__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.itb-svc-format__tag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: #9aa4bb;
  background: rgba(148, 163, 208, 0.12);
  border: 1px solid rgba(148, 163, 208, 0.2);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  white-space: nowrap;
}

.itb-svc-format__arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 208, 0.2);
  color: #fff;
  font-size: 16px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.itb-svc-format:hover .itb-svc-format__arrow {
  background: rgba(127, 151, 255, 0.16);
  transform: translateX(3px);
}

/* ─── Выделенная карточка «Рекомендуем» ─────────────────────────────────── */

.itb-svc-format--featured {
  border-color: rgba(127, 151, 255, 0.6);
  background: linear-gradient(160deg, #16234a 0%, #101a33 100%);
}
.itb-svc-format--featured .itb-svc-format__arrow {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
}
.itb-svc-format--featured:hover .itb-svc-format__arrow {
  background: #fff;
  transform: translateX(3px);
}

/* ─── Адаптив ──────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .itb-svc-formats__inner { grid-template-columns: 1fr; gap: 32px; }
  .itb-svc-formats__aside { position: static; }
  .itb-svc-formats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .itb-svc-formats__grid { grid-template-columns: 1fr; }
}

/* css/sections/26-svc-outcomes.css */
/* ==========================================================================
   Услуги → Что получает заказчик: сетка 3×2 светлых карточек (номер, заголовок,
   описание, круг с картинкой/иконкой) + темная широкая карточка «Отличие».
   ========================================================================== */

/* Секция светлая всегда (сайт по умолчанию темный): локально переопределяем
   токены на светлую палитру. Темная карточка «Отличие» ниже — на хардкоде. */
.itb-section--svc-outcomes {
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --accent-light: #3a58c0;
  --bg-card: #ffffff;
  --border-card: #e2e8f0;

  background: #f2f4f8;
  color: #0f1b2d;
}

.itb-svc-outcomes__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}

.itb-section--svc-outcomes .itb-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--accent-light);
}
.itb-section--svc-outcomes .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

.itb-svc-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

/* ─── Светлая карточка ─────────────────────────────────────────────────── */

.itb-svc-outcome {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  /* Нижний отступ увеличен — освобождаем место под логотип в углу. */
  padding: 32px 32px 68px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.itb-svc-outcome:hover {
  transform: translateY(-4px);
  border-color: rgba(29, 72, 230, 0.4);
  box-shadow: 0 16px 34px rgba(15, 27, 45, 0.10);
}
.itb-svc-outcome:hover .itb-svc-outcome__title {
  color: var(--accent);
}

/* Темный логотип вместо номера — в правом нижнем углу карточки. */
.itb-svc-outcome__logo {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: auto;
  height: 32px;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.itb-svc-outcome:hover .itb-svc-outcome__logo {
  opacity: 1;
  transform: translateY(-3px) scale(1.05);
}

.itb-svc-outcome__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 12px;
  transition: color 0.25s ease;
}

.itb-svc-outcome__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ─── Темная широкая карточка «Отличие» ────────────────────────────────── */

.itb-svc-outcome-feature {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 44px 48px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(127, 151, 255, 0.28);
  background: #17233f;
  color: #fff;
  overflow: hidden;
}

.itb-svc-outcome-feature__text {
  max-width: 720px;
}

/* Светлый логотип в правом нижнем углу темной карточки. */
.itb-svc-outcome-feature__logo {
  position: absolute;
  right: 40px;
  bottom: 32px;
  width: auto;
  height: 44px;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0.9;
  pointer-events: none;
}

.itb-svc-outcome-feature__kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #7f97ff;
  margin-bottom: 16px;
}

.itb-svc-outcome-feature__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: #fff;
  margin-bottom: 14px;
}

.itb-svc-outcome-feature__desc {
  font-size: 16px;
  line-height: 1.6;
  color: #9aa4bb;
}

/* ─── Адаптив ──────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .itb-svc-outcomes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .itb-svc-outcome-feature { flex-direction: column; align-items: flex-start; gap: 28px; padding: 32px; }
}
@media (max-width: 560px) {
  .itb-svc-outcomes__grid { grid-template-columns: 1fr; }
}

/* css/sections/27-bt-common.css */
/* ==========================================================================
   Баланс.Торги → Общее: eyebrow с синей чертой (как в услугах), О продукте, Для кого.
   Секции светлые/темные — фон задается индивидуально. Классы itb-bt-*.
   ========================================================================== */

/* Фоны секций заданы жестко (сайт по умолчанию темный): чередование
   светлый/темный не зависит от тумблера темы. Светлые секции локально
   переопределяют токены на светлую палитру (эталон — страница «Услуги»).
   Темные плашки-акценты внутри (#0a1120, is-dark) остаются на хардкоде. */
.itb-section--bt-about,
.itb-section--bt-impl,
.itb-section--bt-industries,
.itb-section--bt-cases {
  /* Светлый оттенок «А» (белый). О продукте / Внедрение / Отрасли / Кейсы. */
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-card: #f6f8fb;
  --bg-card-hover: #eef2f7;
  --border-card: #e2e8f0;
  --border-color: #e2e8f0;
  --accent-light: #3a58c0;
  --accent-bg: rgba(29, 72, 230, 0.06);
  background: #ffffff;
  color: #0f1b2d;
}
.itb-section--bt-audience,
.itb-section--bt-compare,
.itb-section--bt-pricing {
  /* Светлый оттенок «Б» (серо-голубой). Для кого / Сравнение / Стоимость. */
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-card: #ffffff;
  --bg-card-hover: #eef2f7;
  --border-card: #dbe2ec;
  --border-color: #dbe2ec;
  --accent-light: #3a58c0;
  --accent-bg: rgba(29, 72, 230, 0.06);
  background: #f2f4f8;
  /* Цвет краевых масок скроллируемой таблицы: должен совпадать с фоном секции
     (см. .itb-bt-compare__scroll в 29-bt-impl-compare.css). */
  --bt-table-mask: #f2f4f8;
  color: #0f1b2d;
}
.itb-section--bt-benefits {
  /* Темный. Преимущества для бизнеса. */
  --text-primary: #ffffff;
  --text-secondary: #b7bcc3;
  --bg-card: #0e1a2c;
  --border-card: rgba(183, 188, 195, 0.16);
  background: #060c18;
  color: #ffffff;
}

/* Надзаголовок с синей чертой — единый прием страницы. */
.itb-section--bt-about .itb-section__eyebrow,
.itb-section--bt-audience .itb-section__eyebrow,
.itb-section--bt-func .itb-section__eyebrow,
.itb-section--bt-impl .itb-section__eyebrow,
.itb-section--bt-compare .itb-section__eyebrow,
.itb-section--bt-benefits .itb-section__eyebrow,
.itb-section--bt-industries .itb-section__eyebrow,
.itb-section--bt-pricing .itb-section__eyebrow,
.itb-section--bt-faq .itb-section__eyebrow,
.itb-section--bt-cta .itb-section__eyebrow,
.itb-bt-func__label,
.itb-bt-deck__eyebrow,
.itb-bt-ecosystem__eyebrow,
.itb-bt-compliance__kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--accent-light);
}
.itb-section--bt-about .itb-section__eyebrow::before,
.itb-section--bt-audience .itb-section__eyebrow::before,
.itb-section--bt-func .itb-section__eyebrow::before,
.itb-section--bt-impl .itb-section__eyebrow::before,
.itb-section--bt-compare .itb-section__eyebrow::before,
.itb-section--bt-benefits .itb-section__eyebrow::before,
.itb-section--bt-industries .itb-section__eyebrow::before,
.itb-section--bt-pricing .itb-section__eyebrow::before,
.itb-section--bt-faq .itb-section__eyebrow::before,
.itb-section--bt-cta .itb-section__eyebrow::before,
.itb-bt-func__label::before,
.itb-bt-deck__eyebrow::before,
.itb-bt-ecosystem__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

/* ─── 2. О продукте ─── */
.itb-bt-about__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px 64px;
  margin-bottom: 48px;
}
.itb-bt-about__lead .itb-section__eyebrow { margin-bottom: 20px; }
.itb-bt-about__lead .itb-section__title { margin-bottom: 24px; }
.itb-bt-about__text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.itb-bt-about__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: center;
}
.itb-bt-about__points li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.itb-bt-about__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.itb-bt-about__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #0a1120;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 28px;
}
.itb-bt-about__card {
  background: #0a1120;
  padding: 44px 40px;
  position: relative;
}
/* Вертикальные разделители между колонками (кроме первой). */
.itb-bt-about__card + .itb-bt-about__card::before {
  content: "";
  position: absolute;
  top: 44px;
  bottom: 44px;
  left: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.itb-bt-about__card-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 26px;
  color: #fff;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}
.itb-bt-about__card-desc {
  font-size: 15px;
  line-height: 1.55;
  color: #aeb6c4;
}
.itb-bt-about__anchor {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.itb-bt-about__anchor:hover { color: var(--accent-hover); }

/* ─── 3. Для кого ─── */
.itb-bt-audience__grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 48px 64px;
  /* Правая колонка (реестр + CTA) короче левой — центрируем ее по вертикали. */
  align-items: center;
}
.itb-bt-audience__lead .itb-section__eyebrow { margin-bottom: 20px; }
.itb-bt-audience__lead .itb-section__title { margin-bottom: 24px; }
.itb-bt-audience__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 28px;
}
.itb-bt-audience__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.itb-bt-audience__points li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.itb-bt-audience__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Реестр сегментов: разлинованные строки [индекс | профиль+задача | маркер],
   без плиток. Крупный mono-индекс — акцент-якорь строки; ховер тянет строку
   вправо и подсвечивает направляющей линией слева (единый ledger-почерк). */
.itb-bt-audience__segments {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-top: 1px solid var(--border-color);
}
/* Строки перечня — статичны (не ссылки): без сдвига, направляющей и стрелки,
   чтобы не возникало ложного ощущения кликабельности. */
.itb-bt-audience__segment {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding: 26px 12px 26px 4px;
  border-bottom: 1px solid var(--border-color);
}

.itb-bt-audience__segment-index {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--border-card);
  font-variant-numeric: tabular-nums;
}

.itb-bt-audience__segment-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.itb-bt-audience__segment-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.25;
  color: var(--text-primary);
}
.itb-bt-audience__segment-task {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.itb-bt-audience__cta .btn { width: 100%; }

@media (max-width: 900px) {
  .itb-bt-about__grid,
  .itb-bt-audience__grid { grid-template-columns: 1fr; gap: 32px; }
  .itb-bt-about__cards { grid-template-columns: 1fr; }
  .itb-bt-audience__segment { gap: 20px; }
  /* В одну колонку — горизонтальные разделители сверху, а не вертикальные. */
  .itb-bt-about__card + .itb-bt-about__card::before {
    top: 0;
    bottom: auto;
    left: 40px;
    right: 40px;
    width: auto;
    height: 1px;
  }
}

/* css/sections/28-bt-func.css */
/* ==========================================================================
   Баланс.Торги → Функциональность (темная). Колода карточек, чипы, доп. модули.
   ========================================================================== */

.itb-section--bt-func {
  background: #060c18;
  color: #fff;
}
.itb-bt-func__header {
  max-width: 820px;
  margin-bottom: 44px;
}
.itb-bt-func__header .itb-section__eyebrow { margin-bottom: 20px; }
.itb-section--bt-func .itb-section__title { color: #fff; }
.itb-section--bt-func .itb-section__subtitle { color: #aeb6c4; margin-top: 16px; }

.itb-bt-func__label {
  margin-bottom: 20px;
}

/* ─── Функциональность: навигация-табы + одна крупная карточка ─── */
.itb-bt-deck {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 48px;
  margin-bottom: 56px;
  align-items: start;
}
/* Grid-ячейки по умолчанию min-width:auto → распираются широким контентом
   (лента табов, скриншот, сетка пунктов) и «съезжают» на узком экране.
   min-width:0 разрешает колонкам сжиматься; тогда overflow-x табов работает. */
.itb-bt-deck__aside,
.itb-bt-deck__stack {
  min-width: 0;
}
.itb-bt-deck__eyebrow { margin-bottom: 18px; }
.itb-bt-deck__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 16px;
}
.itb-bt-deck__text {
  font-size: 15px;
  line-height: 1.6;
  color: #9aa4b4;
  margin-bottom: 32px;
}

/* Навигация-табы: вертикальный список разделов. Активный подсвечен акцентной
   линией слева. Клик по пункту переключает карточку справа. */
.itb-bt-deck__tabs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.itb-bt-deck__tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 16px 16px 16px 18px;
  background: transparent;
  border: none;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  color: #aeb6c4;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.itb-bt-deck__tab:hover { color: #fff; background: rgba(255, 255, 255, 0.03); }
.itb-bt-deck__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.itb-bt-deck__tab.is-active {
  color: #fff;
  border-left-color: var(--accent);
  background: rgba(29, 72, 230, 0.10);
}
.itb-bt-deck__tab-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: #7d879a;
  transition: color 0.2s ease;
}
.itb-bt-deck__tab.is-active .itb-bt-deck__tab-num { color: var(--accent-light); }
.itb-bt-deck__tab-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

/* Область карточки: показываем одну активную (остальные [hidden]).
   Все карточки лежат в одной ячейке грида — высота стопки равна самой высокой
   карточке, поэтому переключение табов не дергает страницу (карточки со
   скриншотом и текстовые сильно разной высоты). */
.itb-bt-deck__stack {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.itb-bt-deck__card {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: #0d1626;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  padding: 32px;
  overflow: hidden;
  /* Плавное проявление при переключении таба. */
  animation: itb-bt-card-in 0.3s ease;
}
/* Скрытые карточки остаются в потоке грида (иначе высота стопки скачет),
   но выключены для мыши и фокуса. display:none тут нельзя — JS ставит
   card.hidden, а нам нужно сохранить вклад карточки в высоту ячейки. */
.itb-bt-deck__card[hidden] {
  display: flex;
  visibility: hidden;
  pointer-events: none;
}
@keyframes itb-bt-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .itb-bt-deck__card { animation: none; }
}

/* ── Крупный скриншот сверху: заполняет область (cover). Клик → лайтбокс целиком ── */
.itb-bt-deck__media {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  background: #060c18;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  cursor: zoom-in;
  transition: border-color 0.2s ease;
}
.itb-bt-deck__media:hover { border-color: rgba(58, 130, 255, 0.5); }
.itb-bt-deck__media:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Кнопка-подсказка «Увеличить» — проявляется на hover/focus. */
.itb-bt-deck__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(6, 12, 24, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(4px);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.itb-bt-deck__media:hover .itb-bt-deck__zoom,
.itb-bt-deck__media:focus-visible .itb-bt-deck__zoom { opacity: 1; transform: none; }
/* cover: скриншот заполняет область без полей (края могут срезаться —
   полный скрин доступен по клику в лайтбоксе). */
.itb-bt-deck__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}

/* ── Шапка карточки: название (над превью) ── */
.itb-bt-deck__head { display: flex; flex-direction: column; }
/* Без скриншота: место картинки ничем не заглушаем — карточка становится
   самостоятельной типографической композицией. Блоки разносим по высоте,
   чтобы контент не жался в середину пустой коробки. */
.itb-bt-deck__card:not(.has-media) {
  justify-content: space-between;
  min-height: 360px;
  padding: 40px;
}
.itb-bt-deck__body { display: flex; flex-direction: column; }
/* Тело текстовой карточки тянется, пункты прижимаются к низу. */
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__body {
  flex: 1;
  justify-content: space-between;
  gap: 32px;
}
.itb-bt-deck__card-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  color: #fff;
  margin: 0;
}
.itb-bt-deck__card-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #9aa4b4;
  margin-bottom: 24px;
}
/* Без скриншота описание — ведущий текст карточки, а не подпись к картинке:
   крупнее, светлее и в читаемой колонке (иначе строка на всю ширину карточки). */
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__card-desc {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  color: #c4ccd8;
  max-width: 58ch;
  margin-bottom: 0;
}
/* Пункты в две колонки — плотнее и весомее, особенно на текстовых карточках. */
.itb-bt-deck__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
}
/* Со скриншотом места меньше — пункты в один ряд. */
.itb-bt-deck__card.has-media .itb-bt-deck__points {
  grid-template-columns: 1fr;
  gap: 12px;
}
.itb-bt-deck__points li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #c4ccd8;
}
.itb-bt-deck__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
/* Номер пункта нужен только в текстовой ветке — со скриншотом остаются точки. */
.itb-bt-deck__point-num { display: none; }

/* ── Пункты текстовой карточки: нумерованная сетка вместо буллетов ──
   Номер-метка моноширинным (по DESIGN.md — JetBrains Mono для меток) плюс
   линия-разделитель сверху: ширина карточки заполняется структурой, а не воздухом. */
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__points { gap: 0 32px; }
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__points li {
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  margin-top: 16px;
  font-size: 15px;
  color: #c4ccd8;
}
/* Верхний ряд сетки — без отступа над линией. */
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__points li:nth-child(-n + 2) { margin-top: 0; }
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__points li::before { content: none; }
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__point-num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  /* Явный светлый синий, а не var(--accent-light): секция темная всегда, а токен
     в светлой теме становится #3a58c0 и на фоне #0d1626 почти не читается. */
  color: #6f96ff;
}

/* ─── Чипы процедур ─── */
.itb-bt-func__procedures { margin-bottom: 32px; }
.itb-bt-func__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.itb-bt-func__chip {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  color: #c4ccd8;
  background: rgba(29, 72, 230, 0.12);
  border: 1px solid rgba(29, 72, 230, 0.35);
  border-radius: var(--radius-full);
  padding: 9px 16px;
}
.itb-bt-func__note {
  max-width: 900px;
  font-size: 15px;
  line-height: 1.6;
  color: #9aa4b4;
  margin-bottom: 40px;
}

/* ─── Доп. модули ─── */
.itb-bt-func__modules { margin-bottom: 40px; }
.itb-bt-func__modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.itb-bt-func__module {
  background: #0d1626;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md);
  padding: 26px 24px;
}
.itb-bt-func__module-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  margin-bottom: 12px;
}
.itb-bt-func__module-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: #9aa4b4;
}

@media (max-width: 1000px) {
  .itb-bt-deck { grid-template-columns: 1fr; gap: 24px; }
  .itb-bt-func__modules-grid { grid-template-columns: repeat(2, 1fr); }
  /* Навигация из вертикального списка → горизонтальная лента чипов над карточкой. */
  .itb-bt-deck__tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .itb-bt-deck__tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    border-left: none;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 10px 16px;
  }
  .itb-bt-deck__tab.is-active {
    border-color: var(--accent);
    background: rgba(29, 72, 230, 0.16);
  }
}
@media (max-width: 720px) {
  .itb-bt-deck__card { padding: 24px; }
  .itb-bt-deck__card:not(.has-media) { padding: 24px; }
  /* Пункты в один столбец на узком экране. */
  .itb-bt-deck__points { grid-template-columns: 1fr; gap: 12px; }
  /* В одну колонку без отступа над линией остается только первый пункт
     (в две колонки это первые два — см. правило выше). */
  .itb-bt-deck__card:not(.has-media) .itb-bt-deck__points { gap: 0; }
  .itb-bt-deck__card:not(.has-media) .itb-bt-deck__points li:nth-child(-n + 2) { margin-top: 16px; }
  .itb-bt-deck__card:not(.has-media) .itb-bt-deck__points li:first-child { margin-top: 0; }
}
@media (max-width: 560px) {
  .itb-bt-func__modules-grid { grid-template-columns: 1fr; }
}

/* ─── Лайтбокс скриншотов ─── */
/* display:flex перебивает атрибут [hidden] — возвращаем скрытие явно,
   иначе прозрачный оверлей висит поверх страницы и ловит курсор zoom-out. */
.itb-bt-lightbox[hidden] { display: none; }
.itb-bt-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(4, 8, 16, 0.9);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.itb-bt-lightbox.is-open { opacity: 1; }
.itb-bt-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.95);
  transform: scale(0.97);
  transition: transform 0.25s ease;
}
.itb-bt-lightbox.is-open .itb-bt-lightbox__img { transform: none; }
.itb-bt-lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.itb-bt-lightbox__close:hover { background: rgba(255, 255, 255, 0.14); }
.itb-bt-lightbox__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .itb-bt-lightbox,
  .itb-bt-lightbox__img { transition: none; }
  .itb-bt-lightbox__img { transform: none; }
}

/* css/sections/29-bt-impl-compare.css */
/* ==========================================================================
   Баланс.Торги → Внедрение (карточки + путь 01–08 + тест-кабинет) и Сравнение.
   Путь переиспользует .itb-journey__* (из 15-sol-journey.css) внутри темной плашки.
   ========================================================================== */

/* ─── 5. Внедрение ─── */
.itb-bt-impl__header { max-width: 820px; margin-bottom: 40px; }
.itb-bt-impl__header .itb-section__eyebrow { margin-bottom: 18px; }

.itb-bt-impl__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}
.itb-bt-impl__card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 28px 26px;
}
.itb-bt-impl__card-kicker {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.itb-bt-impl__card-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ─── «Полный цикл проекта» — горизонтальный timeline-трек ───
   Темная плашка внутри светлой секции «Внедрение». Непрерывная линия-рельс
   с узлами-этапами, чередование над/под линией (зигзаг). Свои классы
   itb-bt-journey__* — НЕ путать с itb-journey__* (страница решений). */
.itb-bt-journey {
  --track-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --track-line: rgba(91, 123, 255, 0.28);
  --track-line-done: var(--accent);
  background: #0a1120;
  border-radius: var(--radius-lg);
  padding: 44px 48px 40px;
  margin-bottom: 40px;
}
.itb-bt-journey .itb-bt-func__label { color: #5b7bff; margin-bottom: 20px; }
.itb-bt-journey .itb-bt-func__label::before { background: var(--accent); }

/* Трек: две строки (над/под линией) × N колонок-этапов. Линия — по центру
   через ::before на всю ширину. Горизонтальный скролл, если узлов много. */
.itb-bt-journey__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Колонки сжимаются (minmax 0), чтобы все N этапов влезли в плашку без
     горизонтального скролла — путь виден целиком, включая финал. */
  grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
  /* Компактные ряды: ровно под заголовок этапа (до 2 строк) + усик, без
     лишнего воздуха сверху/снизу. Средний ряд — зона точки на линии. */
  grid-template-rows: minmax(84px, auto) 52px minmax(84px, auto);
  column-gap: 4px;
  position: relative;
}
/* Центральная линия-рельс: от центра первого узла до центра последнего
   (без торчащих концов). Половина колонки с каждого края = 50%/N. */
.itb-bt-journey__track::before {
  content: "";
  position: absolute;
  top: 50%;   /* ряды симметричны (min150·56·min150) → центр трека = центр линии */
  left: calc(50% / var(--steps));
  right: calc(50% / var(--steps));
  height: 2px;
  background: linear-gradient(90deg, var(--track-line-done), var(--track-line));
  transform: translateY(-1px);
  z-index: 0;
}

.itb-bt-journey__node {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / 4;
}
/* Узел-кнопка: раскидывает точку (ряд 2, на линии) и заголовок (ряд 1 над
   линией или ряд 3 под ней — зигзаг). Описание скрыто, живет в поповере. */
.itb-bt-journey__btn {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / 4;
  align-items: center;
  justify-items: center;
  gap: 0;
  width: 100%;
  padding: 0 8px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
}
.itb-bt-journey__btn:disabled { cursor: default; }

/* Точка-узел на центральной линии. */
.itb-bt-journey__dot {
  position: relative;
  grid-row: 2;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #131d38;
  border: 2px solid rgba(91, 123, 255, 0.45);
  box-shadow: 0 0 0 6px #0a1120;   /* «прорезает» линию */
  transition: border-color 0.3s var(--track-ease), background 0.3s var(--track-ease),
    transform 0.3s var(--track-ease), box-shadow 0.3s var(--track-ease);
}
.itb-bt-journey__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: #c3ccff;
  transition: color 0.3s var(--track-ease);
}
.itb-bt-journey__node.is-final .itb-bt-journey__dot {
  background: var(--accent);
  border-color: var(--accent);
}
.itb-bt-journey__node.is-final .itb-bt-journey__num { color: #fff; }

/* Заголовок этапа: над линией (ряд 1) или под ней (ряд 3), с усиком к точке. */
.itb-bt-journey__title {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: #fff;
  text-wrap: balance;
  transition: color 0.3s var(--track-ease);
}
.itb-bt-journey__node.is-above .itb-bt-journey__title { grid-row: 1; align-self: end; padding-bottom: 20px; }
.itb-bt-journey__node.is-below .itb-bt-journey__title { grid-row: 3; align-self: start; padding-top: 20px; }
.itb-bt-journey__title::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 20px;
  background: var(--track-line);
  transform: translateX(-0.5px);
}
.itb-bt-journey__node.is-above .itb-bt-journey__title::after { bottom: 0; }
.itb-bt-journey__node.is-below .itb-bt-journey__title::after { top: 0; }

/* Активное / hover-состояние узла. */
.itb-bt-journey__btn.is-active .itb-bt-journey__dot {
  border-color: #7d97ff;
  box-shadow: 0 0 0 6px #0a1120, 0 12px 30px -12px rgba(91, 123, 255, 0.7);
}
.itb-bt-journey__btn.is-active .itb-bt-journey__title { color: #9db3ff; }
.itb-bt-journey__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 12px;
}

/* Поповер описания этапа (язык — как «Как мы работаем» на главной). */
.itb-bt-journey__track-wrap { position: relative; }
.itb-bt-journey__pop {
  --pop-x: 26px;
  position: absolute;
  z-index: 20;
  width: min(340px, calc(100% - 8px));
  background: #131d38;
  border: 1px solid rgba(91, 123, 255, 0.28);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 26px 54px -22px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s var(--track-ease), transform 0.32s var(--track-ease);
}
.itb-bt-journey__pop[hidden] { display: none; }
.itb-bt-journey__pop.is-open { opacity: 1; transform: translateY(0); }
/* Хвостик. По умолчанию поповер снизу от узла → острие сверху. */
.itb-bt-journey__pop::before {
  content: "";
  position: absolute;
  top: -7px;
  bottom: auto;
  left: var(--pop-x);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: #131d38;
  border-left: 1px solid rgba(91, 123, 255, 0.28);
  border-top: 1px solid rgba(91, 123, 255, 0.28);
  transform: rotate(45deg);
}
/* Поповер сверху от узла (для нижнего ряда) → острие снизу. */
.itb-bt-journey__pop.is-up { transform: translateY(-6px); }
.itb-bt-journey__pop.is-up.is-open { transform: translateY(0); }
.itb-bt-journey__pop.is-up::before {
  top: auto;
  bottom: -7px;
  border-left: none;
  border-top: none;
  border-right: 1px solid rgba(91, 123, 255, 0.28);
  border-bottom: 1px solid rgba(91, 123, 255, 0.28);
}
.itb-bt-journey__pop-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: #fff;
  margin-bottom: 8px;
}
.itb-bt-journey__pop-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #9aa4b8;
  margin: 0;
}

.itb-bt-journey__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: #5b7bff;
  transition: color 0.2s var(--track-ease);
}
.itb-bt-journey__link:hover { color: #7d97ff; }
.itb-bt-journey__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Hover-подсветка узла (только там, где есть указатель с hover). */
@media (hover: hover) {
  .itb-bt-journey__btn:not(:disabled):hover .itb-bt-journey__dot {
    border-color: #7d97ff;
    transform: translateY(-3px);
  }
  .itb-bt-journey__btn:not(:disabled):hover .itb-bt-journey__title { color: #9db3ff; }
}

/* Reveal по треку: узлы проявляются по очереди слева направо. */
@media (prefers-reduced-motion: no-preference) {
  .itb-bt-journey__node {
    opacity: 0;
    transform: translateY(12px);
    animation: itb-bt-journey-in 0.6s var(--track-ease) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
}
@keyframes itb-bt-journey-in {
  to { opacity: 1; transform: translateY(0); }
}

.itb-bt-impl__outcome {
  max-width: 820px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

/* Темная карточка тест-кабинета. */
.itb-bt-impl__demo {
  background: #0a1120;
  border-radius: var(--radius-lg);
  padding: 32px 40px 40px;
  margin-bottom: 40px;
}
.itb-bt-impl__demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
/* Превью-медиа в «окне браузера»: chrome-полоса с точками + скриншот-гиф. */
.itb-bt-impl__demo-media {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0d1626;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.itb-bt-impl__demo-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.itb-bt-impl__demo-chrome span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.itb-bt-impl__demo-media img {
  display: block;
  width: 100%;
  height: auto;
}
.itb-bt-impl__demo-kicker {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 12px;
}
.itb-bt-impl__demo-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}
.itb-bt-impl__demo .btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.20);
  color: #fff;
}

.itb-bt-impl__actions,
.itb-bt-compare__actions,
.itb-bt-pricing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
/* Вторичная (ghost) CTA на СВЕТЛЫХ секциях (Внедрение/Сравнение/Стоимость).
   Базовый .btn--ghost берет глобальный темный --surface-2 → темный-на-темном.
   Переопределяем: темный текст на прозрачном фоне со светлой рамкой. */
.itb-bt-impl__actions .btn--ghost,
.itb-bt-compare__actions .btn--ghost,
.itb-bt-pricing__actions .btn--ghost {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-primary);
}
.itb-bt-impl__actions .btn--ghost:hover,
.itb-bt-compare__actions .btn--ghost:hover,
.itb-bt-pricing__actions .btn--ghost:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
}

/* ─── 6. Сравнение ─── */
.itb-bt-compare__header { max-width: 820px; margin-bottom: 40px; }
.itb-bt-compare__header .itb-section__eyebrow { margin-bottom: 18px; }
.itb-bt-compare__header .itb-section__subtitle { margin-top: 14px; }

.itb-bt-compare__scroll {
  overflow-x: auto;
  margin-bottom: 32px;
  border-radius: var(--radius-md);
  /* Скролл-подсказка: правый градиент-тень, пока таблицу есть куда листать.
     4 слоя — две «маски-затычки» (local, прижаты к краям, гасят тень у самого
     края) и две «тени» (scroll, проявляются при скролле). Работает без JS.

     Маска обязана повторять фон САМОЙ СЕКЦИИ, а не страницы: секция задает себе
     светлую подложку (--bt-compare в 27-bt-common.css), но --bg-primary остается
     темным из :root — на светлой теме он заливал края таблицы черным. */
  background:
    linear-gradient(to right, var(--bt-table-mask, #f2f4f8), rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--bt-table-mask, #f2f4f8), rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.16), rgba(255, 255, 255, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.16), rgba(255, 255, 255, 0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* Явная подсказка «листайте таблицу» — только там, где таблица не помещается.
   Брейкпоинт 1024px, а не 860px: таблица (min-width 820px + паддинги контейнера)
   начинает скроллиться уже около 1020px, и на 860–1020px она обрезалась молча. */
.itb-bt-compare__hint {
  display: none;
}
@media (max-width: 1024px) {
  .itb-bt-compare__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -8px 0 20px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.3px;
    color: var(--text-muted);
  }
  .itb-bt-compare__hint svg { flex: none; }
}
.itb-bt-compare__table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.itb-bt-compare__table th,
.itb-bt-compare__table td {
  text-align: left;
  padding: 16px 20px;
  vertical-align: top;
  line-height: 1.4;
}
/* Шапка выделена подложкой и темным жирным текстом — «якорь» большой таблицы.
   sticky: при прокрутке страницы прилипает к верху вьюпорта (длинная таблица). */
.itb-bt-compare__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--text-primary);
  background: var(--bg-card);
  border-bottom: 2px solid var(--text-primary);
}
.itb-bt-compare__table thead th.itb-bt-compare__col-torgi {
  color: #fff;
  background: var(--accent);
  border-bottom-color: var(--accent);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.itb-bt-compare__table tbody th {
  font-weight: 600;
  color: var(--text-primary);
}
.itb-bt-compare__table tbody td { color: var(--text-secondary); }
.itb-bt-compare__table tbody td.itb-bt-compare__col-torgi {
  font-weight: 600;
  color: var(--text-primary);
  background: var(--accent-bg);
}
.itb-bt-compare__table tbody tr { border-bottom: 1px solid var(--border-color); }
.itb-bt-compare__table tbody tr:last-child { border-bottom: none; }

.itb-bt-compare__outcome {
  max-width: 900px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 28px;
}
.itb-bt-compare__link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--accent);
  text-decoration: none;
}
.itb-bt-compare__link:hover { color: var(--accent-hover); }

@media (max-width: 1000px) {
  .itb-bt-impl__cards { grid-template-columns: repeat(2, 1fr); }
}

/* Мобильный: горизонтальный зигзаг → вертикальный рельс слева.
   Каждый узел — строка [точка | заголовок]; поповер JS кладет под строкой. */
@media (max-width: 640px) {
  .itb-bt-impl__cards { grid-template-columns: 1fr; }
  .itb-bt-journey { padding: 32px 24px; }
  .itb-bt-impl__demo { padding: 26px 24px; }

  .itb-bt-journey__track {
    grid-template-columns: 48px 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    column-gap: 18px;
    row-gap: 6px;
    position: relative;
  }
  /* Вертикальная линия через центр колонки точек. */
  .itb-bt-journey__track::before {
    top: 24px;
    bottom: 24px;
    left: 24px;
    right: auto;
    width: 2px;
    height: auto;
    transform: translateX(-1px);
    background: linear-gradient(180deg, var(--track-line-done), var(--track-line));
  }
  .itb-bt-journey__node {
    grid-template-rows: none;
    grid-row: auto;
    grid-column: 1 / -1;
  }
  .itb-bt-journey__btn {
    grid-template-columns: 48px 1fr;
    grid-template-rows: none;
    grid-row: auto;
    align-items: center;
    justify-items: start;
    column-gap: 18px;
    padding: 8px 0;
  }
  .itb-bt-journey__dot {
    grid-row: auto;
    grid-column: 1;
    width: 44px;
    height: 44px;
    box-shadow: 0 0 0 5px #0a1120;
  }
  .itb-bt-journey__num { font-size: 14px; }
  /* Заголовок всегда справа, зигзаг и усик сброшены. */
  .itb-bt-journey__node.is-above .itb-bt-journey__title,
  .itb-bt-journey__node.is-below .itb-bt-journey__title {
    grid-row: auto;
    grid-column: 2;
    align-self: center;
    text-align: left;
    padding: 0;
    font-size: 16px;
  }
  .itb-bt-journey__title::after { display: none; }
}

/* css/sections/30-bt-benefits-pricing.css */
/* ==========================================================================
   Баланс.Торги → Преимущества, Отрасли, Стоимость.
   ========================================================================== */

/* ─── 7. Преимущества ─── */
.itb-bt-benefits__header { margin-bottom: 40px; }
.itb-bt-benefits__header .itb-section__eyebrow { margin-bottom: 18px; }
/* Три оси ценности пластами: [индекс | ось] слева, пруфы-чипы справа.
   Не сетка-плитки, а разлинованный вертикальный ряд крупных строк. */
.itb-bt-benefits__axes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(183, 188, 195, 0.16);
}
.itb-bt-benefits__axis {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px 44px;
  padding: 28px 32px;
  border-bottom: 1px solid rgba(183, 188, 195, 0.16);
  transition: background 0.3s ease;
}
.itb-bt-benefits__axis:hover { background: rgba(29, 72, 230, 0.06); }

/* Иерархия осей: ключевые (is-key) крупнее и акцентны, второстепенные (is-muted)
   тише рангом — приглушенный текст, меньше кегль. */
.itb-bt-benefits__axis.is-key {
  background: linear-gradient(100deg, rgba(29, 72, 230, 0.09), rgba(29, 72, 230, 0.02));
}
.itb-bt-benefits__axis.is-key:hover {
  background: linear-gradient(100deg, rgba(29, 72, 230, 0.14), rgba(29, 72, 230, 0.04));
}
/* is-dark больше не выделяем в отдельный скругленный блок — иерархию несет is-key.
   Пласт остается в общем ряду; при желании подсветить он совпадает с is-key. */
.itb-bt-benefits__axis.is-dark.is-key {
  background: linear-gradient(100deg, rgba(29, 72, 230, 0.09), rgba(29, 72, 230, 0.02));
}
/* Второстепенная ось — нейтральная (белая, не синяя) подложка: читается как
   пласт того же ряда, но без акцентного ранга ключевых осей. */
.itb-bt-benefits__axis.is-muted {
  background: rgba(255, 255, 255, 0.03);
}
.itb-bt-benefits__axis.is-muted:hover {
  background: rgba(255, 255, 255, 0.05);
}

.itb-bt-benefits__axis-lead { min-width: 0; }
.itb-bt-benefits__axis-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
/* Ключевая и второстепенная оси — одинаковый крупный заголовок;
   иерархию у второстепенной несет приглушенный цвет, а не размер. */
.itb-bt-benefits__axis.is-key .itb-bt-benefits__axis-title,
.itb-bt-benefits__axis.is-muted .itb-bt-benefits__axis-title {
  font-size: clamp(24px, 2.4vw, 30px);
}
.itb-bt-benefits__axis.is-muted .itb-bt-benefits__axis-title {
  color: #aeb6c4;
}

/* Крупная цифра-принт под названием оси. Отступ сверху — воздух между
   заголовком и принтом (line-height принта мал, иначе визуально прижато). */
.itb-bt-benefits__metric {
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.itb-bt-benefits__metric-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.itb-bt-benefits__axis.is-key .itb-bt-benefits__metric-value { color: #7f97ff; }
/* Второстепенная ось — принт того же размера, но тусклее (иерархия цветом). */
.itb-bt-benefits__axis.is-muted .itb-bt-benefits__metric-value {
  color: #aeb6c4;
}
.itb-bt-benefits__metric-unit {
  font-size: 13.5px;
  line-height: 1.4;
  color: #9aa4b4;
  max-width: 220px;
}

/* Абзац-суть оси (когда крупной цифры-метрики нет): подпись под заголовком,
   заполняет левую колонку осмысленным текстом вместо пустоты. */
.itb-bt-benefits__axis-note {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #b7bcc3;
  max-width: 42ch;
}
.itb-bt-benefits__axis.is-muted .itb-bt-benefits__axis-note { color: #98a1af; }

/* Пруфы строкой-тегами (mono), а не буллет-столбцом: плотнее и «богаче». */
.itb-bt-benefits__proofs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-self: center;
}
.itb-bt-benefits__proof {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #c4ccd8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-full);
  padding: 8px 15px;
}
.itb-bt-benefits__axis.is-key .itb-bt-benefits__proof {
  color: #dfe6ff;
  background: rgba(90, 116, 255, 0.14);
  border-color: rgba(90, 116, 255, 0.32);
}
/* Второстепенная ось — пруфы тусклее. */
.itb-bt-benefits__axis.is-muted .itb-bt-benefits__proof {
  color: #98a1b0;
  background: rgba(255, 255, 255, 0.035);
}

/* ─── 8. Отрасли ─── */
.itb-bt-industries__header { max-width: 820px; margin-bottom: 40px; }
.itb-bt-industries__header .itb-section__eyebrow { margin-bottom: 18px; }
.itb-bt-industries__header .itb-section__subtitle { margin-top: 14px; }
.itb-bt-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}
.itb-bt-industries__card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.itb-bt-industries__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
  aspect-ratio: 16 / 9;
}
.itb-bt-industries__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.itb-bt-industries__card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.itb-bt-industries__card-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ─── 9. Стоимость ─── */
.itb-bt-pricing__header { margin-bottom: 36px; }
.itb-bt-pricing__header .itb-section__eyebrow { margin-bottom: 18px; }

.itb-bt-pricing__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background: #0a1120;
  border-radius: var(--radius-lg);
  padding: 44px 48px;
  margin-bottom: 24px;
}
.itb-bt-pricing__kicker {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 18px;
}
.itb-bt-pricing__price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1;
  color: #fff;
  margin-bottom: 16px;
}
.itb-bt-pricing__price-desc {
  max-width: 620px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #9aa4b4;
}

.itb-bt-pricing__models {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}
.itb-bt-pricing__model {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 32px 34px;
}
.itb-bt-pricing__model-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.itb-bt-pricing__model-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.itb-bt-pricing__note {
  max-width: 940px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 40px;
}

.itb-bt-pricing__support { margin-bottom: 40px; }
.itb-bt-pricing__support > .itb-bt-func__label { margin-bottom: 22px; }
/* Шкала эскалации: ступени в ряд, выравнены по низу и растут ВВЕРХ слева направо
   (padding-top нарастает по --step). Фон каждой следующей плотнее, «Премиум» —
   полная акцентная заливка и подъем. Читается как «выше = мощнее». */
.itb-bt-pricing__scale {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--levels, 3), 1fr);
  align-items: stretch;
  gap: 20px;
}
.itb-bt-pricing__step {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: var(--radius-lg);
  /* Заливка плотнеет со ступенью: подмешиваем акцент по --step. */
  background: color-mix(in srgb, var(--accent) calc(var(--step, 0) * 7%), #ffffff);
  border: 1px solid var(--border-card);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-bt-pricing__step:hover { transform: translateY(-4px); }
/* Кульминация: полный акцент, тень-подъем, приподнята над рядом. */
.itb-bt-pricing__step.is-accent {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 24px 48px -20px rgba(29, 72, 230, 0.55);
}
.itb-bt-pricing__step.is-accent:hover { transform: translateY(-8px); }

/* Штамп в правом нижнем углу — крупная штриховая иконка «водяным знаком»:
   частично уходит за край, едва заметная, добавляет характер без шума. */
.itb-bt-pricing__step-stamp {
  position: absolute;
  right: -18px;
  bottom: -18px;
  color: var(--accent);
  opacity: 0.07;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-bt-pricing__step-stamp svg {
  display: block;
  width: 120px;
  height: 120px;
}
.itb-bt-pricing__step:hover .itb-bt-pricing__step-stamp {
  opacity: 0.11;
  transform: translate(-4px, -4px) rotate(-4deg);
}
.itb-bt-pricing__step.is-accent .itb-bt-pricing__step-stamp {
  color: #fff;
  opacity: 0.12;
}
.itb-bt-pricing__step.is-accent:hover .itb-bt-pricing__step-stamp { opacity: 0.18; }

/* Ранг ступени — mono-метка на одной линии во всех ступенях (соразмерно). */
.itb-bt-pricing__step-rank {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--accent);
  opacity: 0.55;
}
.itb-bt-pricing__step.is-accent .itb-bt-pricing__step-rank { color: #fff; opacity: 0.7; }

.itb-bt-pricing__step-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0;
}
.itb-bt-pricing__step.is-accent .itb-bt-pricing__step-title { color: #fff; }

/* Параметры уровня чипами: реакция · обращения · мониторинг.
   Идут сразу под заголовком — структура ступеней одинаковая, соразмерная. */
.itb-bt-pricing__step-params {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.itb-bt-pricing__step-param {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
  background: rgba(15, 27, 45, 0.05);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-full);
  padding: 6px 13px;
}
.itb-bt-pricing__step.is-accent .itb-bt-pricing__step-param {
  color: #eef2ff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}
.itb-bt-pricing__support-note {
  font-size: 14px;
  color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .itb-bt-pricing__step,
  .itb-bt-pricing__step.is-accent { transition: box-shadow 0.2s ease; }
  .itb-bt-pricing__step:hover,
  .itb-bt-pricing__step.is-accent:hover { transform: none; }
  .itb-bt-pricing__step:hover .itb-bt-pricing__step-stamp { transform: none; }
}

@media (max-width: 1000px) {
  .itb-bt-industries__grid { grid-template-columns: repeat(2, 1fr); }
  .itb-bt-pricing__scale { grid-template-columns: repeat(2, 1fr); }
  /* Пласт: ось + цифра сверху, пруфы полной шириной снизу. */
  .itb-bt-benefits__axis {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 24px;
  }
}
@media (max-width: 700px) {
  .itb-bt-industries__grid,
  .itb-bt-pricing__models { grid-template-columns: 1fr; }
  .itb-bt-pricing__scale { grid-template-columns: 1fr; }
  .itb-bt-pricing__hero { padding: 32px 26px; }
  .itb-bt-benefits__axis { gap: 16px; }
}

/* css/sections/31-bt-compliance-cta.css */
/* ==========================================================================
   Баланс.Торги → Соответствие + Экосистема, Кейсы, FAQ, Финальный CTA.
   ========================================================================== */

/* ─── 10. Соответствие — «реестр-пруфы» (ledger вместо карточек) ───
   Раздел доверия/легитимности: не сетка плиток, а разлинованные строки
   [индекс | факт | пруф]. Реальные данные (реестровый №, стандарты,
   правообладатель) вынесены акцентом справа как доказательство. */
.itb-bt-compliance__header {
  max-width: 820px;
  margin-bottom: 48px;
}
.itb-bt-compliance__header .itb-section__eyebrow { margin-bottom: 18px; }

.itb-bt-compliance__ledger {
  border-top: 1px solid rgba(183, 188, 195, 0.16);
  margin-bottom: 72px;
}
.itb-bt-compliance__row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) minmax(0, 320px);
  align-items: start;
  gap: 32px 40px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(183, 188, 195, 0.16);
  transition: background 0.25s ease;
}
.itb-bt-compliance__row:hover { background: rgba(29, 72, 230, 0.05); }

/* Логотип-знак вместо цифры: Минцифры (Реестр) / ФСТЭК / наш лого.
   Выровнен по вертикальному центру строки (текст остается сверху). */
.itb-bt-compliance__logo {
  display: flex;
  align-items: center;
  align-self: center;
  min-height: 44px;
}
.itb-bt-compliance__logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
}
/* Минцифры — цветной леттеринг на светлой подложке (иначе тонет на темном фоне). */
.itb-bt-compliance__logo--0 img {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 7px 10px;
}
/* ФСТЭК — детальный герб, ограничиваем по высоте квадратной иконкой. */
.itb-bt-compliance__logo--1 img {
  width: auto;
  height: 56px;
  max-height: 56px;
}
/* Наш лого — белым через currentColor. */
.itb-bt-compliance__logo-mark {
  width: 40px;
  height: 40px;
  color: #fff;
}
.itb-bt-compliance__index {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--accent-light);
  padding-top: 4px;
}
.itb-bt-compliance__kicker {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(19px, 2vw, 23px);
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  margin-bottom: 12px;
}
.itb-bt-compliance__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 62ch;
}
/* Пруф — вынесенное доказательство как реестровый «штамп»: подпись сверху,
   крупное mono-значение снизу, акцентная рамка. Не карточка-контент, а якорь. */
.itb-bt-compliance__proof {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  justify-self: start;
  align-self: center;
  padding: 16px 20px;
  border: 1px solid rgba(29, 72, 230, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(29, 72, 230, 0.06);
}
.itb-bt-compliance__proof-label {
  order: -1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent-light);
}
.itb-bt-compliance__proof-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
}

/* Экосистема — «продуктовое окружение» тем же ledger-языком (не плитки,
   не вложенная плашка): подраздел на общем темном фоне секции. */
.itb-bt-ecosystem {
  padding-top: 8px;
  border-top: 1px solid rgba(183, 188, 195, 0.10);
}
.itb-bt-ecosystem__eyebrow { color: var(--accent-light); margin-bottom: 20px; }
.itb-bt-ecosystem__eyebrow::before { background: var(--accent); }
.itb-bt-ecosystem__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  color: #fff;
  margin-bottom: 36px;
  max-width: 820px;
}
.itb-bt-ecosystem__list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  border-top: 1px solid rgba(183, 188, 195, 0.14);
}
.itb-bt-ecosystem__row { border-bottom: 1px solid rgba(183, 188, 195, 0.14); }
.itb-bt-ecosystem__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px;
  align-items: baseline;
  gap: 24px;
  padding: 22px 8px 22px 4px;
  text-decoration: none;
  transition: padding 0.25s ease, background 0.25s ease;
}
.itb-bt-ecosystem__link:hover {
  background: rgba(29, 72, 230, 0.06);
  padding-left: 16px;
}
.itb-bt-ecosystem__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
}
.itb-bt-ecosystem__role {
  font-size: 14px;
  color: #8792a4;
}
.itb-bt-ecosystem__arrow {
  justify-self: end;
  font-size: 16px;
  color: var(--accent-light);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.itb-bt-ecosystem__link:hover .itb-bt-ecosystem__arrow {
  opacity: 1;
  transform: translateX(0);
}
.itb-bt-ecosystem__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ─── 11. Кейсы (раскладку карточек дает 07-cases.css) ─── */
.itb-bt-cases .itb-section__topbar { margin-bottom: 40px; }
.itb-bt-cases .itb-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--accent-light);
}
.itb-bt-cases .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

/* ─── 12. FAQ ─── */
.itb-bt-faq__header { margin-bottom: 40px; }
.itb-bt-faq__header .itb-section__eyebrow { margin-bottom: 18px; }
.itb-bt-faq__list {
  border-top: 1px solid var(--border-color);
}
.itb-bt-faq__item {
  border-bottom: 1px solid var(--border-color);
}
.itb-bt-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-primary);
}
.itb-bt-faq__question::-webkit-details-marker { display: none; }
.itb-bt-faq__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.itb-bt-faq__icon::before,
.itb-bt-faq__icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 0.2s, opacity 0.2s;
}
.itb-bt-faq__icon::before { left: 0; top: 7px; width: 16px; height: 2px; }
.itb-bt-faq__icon::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.itb-bt-faq__item[open] .itb-bt-faq__icon::after { opacity: 0; transform: scaleY(0); }
/* Верхний отступ отрицательный: подтягиваем ответ к своему вопросу, чтобы пара
   «вопрос+ответ» читалась плотнее, чем расстояние до соседнего вопроса. */
.itb-bt-faq__answer {
  padding: 0 4px 16px;
  margin-top: -2px;
  max-width: 72ch;
}
.itb-bt-faq__answer p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.itb-bt-faq__item[hidden] { display: none; }

/* Кнопка «Показать все вопросы» — раскрывает скрытые сверх лимита. */
.itb-bt-faq__more {
  margin-top: 24px;
  text-align: center;
}
.itb-bt-faq__more-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 13px 26px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-tag);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.itb-bt-faq__more-btn:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.itb-bt-faq__more-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.itb-bt-faq__more-count {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
}

/* ─── 13. Финальный CTA (темный, форма справа как в продуктах) ─── */
.itb-section--bt-cta {
  --bg-primary: #0b1020;
  --bg-card: #101a33;
  --text-primary: #ffffff;
  --text-secondary: #9aa4bb;
  --border-card: rgba(148, 163, 208, 0.18);
  --accent-bg: rgba(90, 116, 255, 0.14);
  --surface-2: rgba(148, 163, 208, 0.12);
  --surface-2-hover: rgba(148, 163, 208, 0.22);
  --border-color: rgba(148, 163, 208, 0.18);
  background: #0b1020;
  color: #fff;
}
.itb-section--bt-cta .itb-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #7f97ff;
  margin-bottom: 16px;
}
.itb-section--bt-cta .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: #2f4dff;
  flex: none;
}

@media (max-width: 900px) {
  /* Пруф уходит под текст, но остается акцентной колонкой-доказательством. */
  .itb-bt-compliance__row {
    grid-template-columns: 92px 1fr;
    gap: 20px 24px;
    padding: 30px 0;
  }
  .itb-bt-compliance__proof {
    grid-column: 2;
    margin-top: 4px;
  }
  /* Два ряда: [название | →] сверху, роль под названием. Все элементы
     размещены явно — иначе auto-placement конфликтует с «1fr auto» и строки
     съезжают (название убегает во 2-ю колонку, стрелка наезжает на роль). */
  .itb-bt-ecosystem__link {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 16px;
  }
  .itb-bt-ecosystem__name { grid-column: 1; grid-row: 1; }
  .itb-bt-ecosystem__role { grid-column: 1; grid-row: 2; }
  .itb-bt-ecosystem__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 560px) {
  .itb-bt-compliance__row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .itb-bt-compliance__index { padding-top: 0; }
  .itb-bt-compliance__proof { grid-column: 1; }
  /* На телефоне стрелка всегда видима (нет hover) — резервируем ей колонку,
     чтобы длинное название переносилось, а не толкало стрелку за край. */
  .itb-bt-ecosystem__arrow { opacity: 1; transform: none; }
}

/* css/sections/32-pp.css */
/* ==========================================================================
   Конструктор продуктовых страниц (pp_*) → новые паттерны:
   pains (боли), process (цепочка), split (текст+буллеты+выноска),
   twocol (модели+список), catalog (раскрывающийся перечень).
   Секции hero/features(колода)/benefits(оси)/faq/cta переиспользуют itb-bt-*.
   Почерк и палитры — как в 27-bt-common.css (светлые «А»/«Б», темная).
   ========================================================================== */

/* Фоны секций (сайт по умолчанию темный): светлые секции локально переопределяют
   токены на светлую палитру (эталон — «Услуги»/«Баланс.Торги»). */
.itb-section--pp-pains,
.itb-section--pp-twocol {
  /* Светлый «А» (белый). */
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-card: #f6f8fb;
  --bg-card-hover: #eef2f7;
  --border-card: #e2e8f0;
  --border-color: #e2e8f0;
  --accent-light: #3a58c0;
  --accent-bg: rgba(29, 72, 230, 0.06);
  background: #ffffff;
  color: #0f1b2d;
}
.itb-section--pp-process,
.itb-section--pp-split,
.itb-section--pp-pilot {
  /* Светлый «Б» (серо-голубой). */
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-card: #ffffff;
  --bg-card-hover: #eef2f7;
  --border-card: #dbe2ec;
  --border-color: #dbe2ec;
  --accent-light: #3a58c0;
  --accent-bg: rgba(29, 72, 230, 0.06);
  background: #f2f4f8;
  color: #0f1b2d;
}

/* Надзаголовок с синей чертой — единый прием (как у bt-*). */
.itb-section--pp-pains .itb-section__eyebrow,
.itb-section--pp-process .itb-section__eyebrow,
.itb-section--pp-split .itb-section__eyebrow,
.itb-section--pp-twocol .itb-section__eyebrow,
.itb-section--pp-pilot .itb-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--accent-light);
}
.itb-section--pp-pains .itb-section__eyebrow::before,
.itb-section--pp-process .itb-section__eyebrow::before,
.itb-section--pp-split .itb-section__eyebrow::before,
.itb-section--pp-twocol .itb-section__eyebrow::before,
.itb-section--pp-pilot .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

/* Общие шапки новых секций. */
.itb-pp-pains__header,
.itb-pp-process__header,
.itb-pp-split__header,
.itb-pp-twocol__header,
.itb-pp-pilot__header {
  max-width: 760px;
  margin-bottom: 48px;
}
.itb-pp-pains__header .itb-section__eyebrow,
.itb-pp-process__header .itb-section__eyebrow,
.itb-pp-split__header .itb-section__eyebrow,
.itb-pp-twocol__header .itb-section__eyebrow,
.itb-pp-pilot__header .itb-section__eyebrow { margin-bottom: 20px; }
.itb-pp-pains__header .itb-section__title,
.itb-pp-process__header .itb-section__title,
.itb-pp-split__header .itb-section__title,
.itb-pp-twocol__header .itb-section__title,
.itb-pp-pilot__header .itb-section__title { margin-bottom: 16px; }

/* ─────────────────────────── Боли (pains) ─────────────────────────── */
.itb-pp-pains__grid {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  /* Колонок столько же, сколько карточек (--pain-cols ставит шаблон, максимум 3).
     Фиксированные две колонки оставляли третью карточку одну в ряду. */
  grid-template-columns: repeat(var(--pain-cols, 2), minmax(0, 1fr));
  gap: 20px;
}
.itb-pp-pains__card {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 30px 30px 32px;
}
/* Маркер проблемы — сам номер (01/02/03), а не цветная полоса у края:
   боковая риска на карточке читается как декор, номер несёт смысл. */
/* Крупная иконка-водяной знак в правом-нижнем углу (как itb-bt-pricing__step-stamp). */
.itb-pp-pains__stamp {
  position: absolute;
  right: -14px;
  bottom: -14px;
  color: var(--accent);
  opacity: 0.08;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-pp-pains__stamp svg {
  display: block;
  width: 112px;
  height: 112px;
}
@media (hover: hover) {
  .itb-pp-pains__card:hover .itb-pp-pains__stamp {
    opacity: 0.13;
    transform: translate(-4px, -4px) rotate(-4deg);
  }
}
/* Контент над водяным знаком. */
.itb-pp-pains__index,
.itb-pp-pains__card-title,
.itb-pp-pains__card-desc { position: relative; z-index: 1; }
.itb-pp-pains__index {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--accent);
}
.itb-pp-pains__card-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 10px 0 10px;
}
.itb-pp-pains__card-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
/* Итог-вывод под сеткой — светлая плашка-акцент в тон карточек болей. */
.itb-pp-pains__outcome {
  background: var(--accent-bg);
  color: var(--text-primary);
  border: 1px solid rgba(29, 72, 230, 0.18);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  font-size: 17px;
  line-height: 1.55;
}

/* Лента «кому подходит» — короткие теги строкой вместо длинного абзаца.
   Прием секции «Экспертиза» на главной (itb-expertise), но на светлом фоне:
   моноширинный caps + точки-разделители между пунктами. */
.itb-pp-tagline {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 0 0;
  border-top: 1px solid rgba(29, 72, 230, 0.16);
}
.itb-pp-tagline__label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}
.itb-pp-tagline__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.itb-pp-tagline__item {
  position: relative;
  padding: 0 20px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* Точка-разделитель между пунктами (как в itb-expertise). */
.itb-pp-tagline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -1.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(29, 72, 230, 0.45);
}
.itb-pp-tagline__item:first-child { padding-left: 0; }

@media (max-width: 560px) {
  .itb-pp-tagline { gap: 12px; }
  .itb-pp-tagline__item { padding: 0 12px; font-size: 11px; letter-spacing: 0.8px; }
}

/* ─────────────────────────── Процесс (timeline-рельс) ───────────────────────────
   Тот же прием, что «Полный цикл проекта» в «Баланс.Торги» (itb-bt-journey), но
   на СВЕТЛОМ фоне секции и без темной плашки-обертки. Непрерывная линия с узлами-
   точками, зигзаг над/под линией. Шаги без описаний → без поповеров/JS. */
.itb-pp-rail {
  --rail-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rail-line: rgba(29, 72, 230, 0.22);
  --rail-line-done: var(--accent);
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
  grid-template-rows: minmax(72px, auto) 52px minmax(72px, auto);
  column-gap: 4px;
  position: relative;
}
/* Центральная линия — от центра первого узла до центра последнего. */
.itb-pp-rail::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% / var(--steps));
  right: calc(50% / var(--steps));
  height: 2px;
  background: linear-gradient(90deg, var(--rail-line-done), var(--rail-line));
  transform: translateY(-1px);
  z-index: 0;
}
.itb-pp-rail__node {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / 4;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: 0 8px;
}
/* Точка-узел на линии. */
.itb-pp-rail__dot {
  position: relative;
  grid-row: 2;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(29, 72, 230, 0.35);
  box-shadow: 0 0 0 6px var(--bg-secondary, #f2f4f8);   /* «прорезает» линию фоном секции */
}
.itb-section--pp-process .itb-pp-rail__dot { box-shadow: 0 0 0 6px #f2f4f8; }
.itb-pp-rail__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
}
.itb-pp-rail__node.is-final .itb-pp-rail__dot {
  background: var(--accent);
  border-color: var(--accent);
}
.itb-pp-rail__node.is-final .itb-pp-rail__num { color: #fff; }
/* Заголовок этапа: над линией (ряд 1) или под ней (ряд 3), с усиком к точке. */
.itb-pp-rail__title {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  text-wrap: balance;
}
.itb-pp-rail__node.is-above .itb-pp-rail__title { grid-row: 1; align-self: end; padding-bottom: 20px; }
.itb-pp-rail__node.is-below .itb-pp-rail__title { grid-row: 3; align-self: start; padding-top: 20px; }
.itb-pp-rail__title::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 20px;
  background: var(--rail-line);
  transform: translateX(-0.5px);
}
.itb-pp-rail__node.is-above .itb-pp-rail__title::after { bottom: 0; }
.itb-pp-rail__node.is-below .itb-pp-rail__title::after { top: 0; }

/* Reveal по треку: узлы проявляются по очереди слева направо. */
@media (prefers-reduced-motion: no-preference) {
  .itb-pp-rail__node {
    opacity: 0;
    transform: translateY(12px);
    animation: itb-pp-rail-in 0.6s var(--rail-ease) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
}
@keyframes itb-pp-rail-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Process с поповерами: точка-узел — кнопка, описание в поповере ───
   Расшифровка шага раскрывается в поповере при наведении/тапе (JS initRailPopover
   в balance-torgi.js), а не всегда-видимой подписью. Кнопка повторяет subgrid-раскладку
   узла (как itb-bt-journey__btn): точка на ряду 2, название над/под линией. */
.itb-pp-rail-wrap { position: relative; }
.itb-pp-rail__btn {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / 4;
  align-items: center;
  justify-items: center;
  gap: 0;
  width: 100%;
  padding: 0 8px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
}
.itb-pp-rail__btn:disabled { cursor: default; }
/* Точка и заголовок внутри кнопки берут ту же геометрию, что прямые дети узла. */
.itb-pp-rail__btn .itb-pp-rail__dot { grid-row: 2; }
.itb-pp-rail__node.is-above .itb-pp-rail__btn .itb-pp-rail__title { grid-row: 1; align-self: end; padding-bottom: 20px; }
.itb-pp-rail__node.is-below .itb-pp-rail__btn .itb-pp-rail__title { grid-row: 3; align-self: start; padding-top: 20px; }

/* Активное / hover-состояние узла с описанием. */
.itb-pp-rail__btn.is-active .itb-pp-rail__dot,
.itb-pp-rail__btn:not(:disabled):hover .itb-pp-rail__dot {
  border-color: var(--accent);
  box-shadow: 0 0 0 6px #f2f4f8, 0 12px 30px -14px rgba(29, 72, 230, 0.6);
}
.itb-pp-rail__btn.is-active .itb-pp-rail__title,
.itb-pp-rail__btn:not(:disabled):hover .itb-pp-rail__title { color: var(--accent-light); }
.itb-pp-rail__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 12px;
}

/* Поповер описания шага (светлая палитра секции, прием как у itb-bt-journey__pop). */
.itb-pp-rail__pop {
  --pop-x: 26px;
  position: absolute;
  z-index: 20;
  width: min(340px, calc(100% - 8px));
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 26px 54px -24px rgba(15, 27, 45, 0.35);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s var(--rail-ease), transform 0.32s var(--rail-ease);
}
.itb-pp-rail__pop[hidden] { display: none; }
.itb-pp-rail__pop.is-open { opacity: 1; transform: translateY(0); }
/* Хвостик. По умолчанию поповер снизу от узла → острие сверху. */
.itb-pp-rail__pop::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--pop-x);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: #ffffff;
  border-left: 1px solid var(--border-card);
  border-top: 1px solid var(--border-card);
  transform: rotate(45deg);
}
/* Поповер сверху от узла (нижний ряд) → острие снизу. */
.itb-pp-rail__pop.is-up { transform: translateY(-6px); }
.itb-pp-rail__pop.is-up.is-open { transform: translateY(0); }
.itb-pp-rail__pop.is-up::before {
  top: auto;
  bottom: -7px;
  border-left: none;
  border-top: none;
  border-right: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
}
.itb-pp-rail__pop-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.itb-pp-rail__pop-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
.itb-pp-rail__pop-desc[hidden] { display: none; }

/* ─── Пилот: тот же timeline-рельс, но с описанием под названием этапа ─── */
/* Секция pilot — светлый «Б» (#f2f4f8): точки-узлы прорезают линию этим фоном. */
.itb-section--pp-pilot .itb-pp-rail__dot { box-shadow: 0 0 0 6px #f2f4f8; }
/* Ряды под/над линией выше — вмещают название + описание. */
.itb-pp-rail--pilot {
  grid-template-rows: minmax(112px, auto) 52px minmax(112px, auto);
  margin-bottom: 40px;
}
.itb-pp-rail--pilot .itb-pp-rail__title { display: flex; flex-direction: column; gap: 7px; max-width: 260px; }
.itb-pp-rail__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.25;
  color: var(--text-primary);
}
.itb-pp-rail__desc {
  font-family: var(--font-body, var(--font-heading));
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--text-secondary);
}

/* ─────────────────────────── Split ─────────────────────────── */
.itb-pp-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 64px;
  margin-bottom: 32px;
}
.itb-pp-split__text p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.itb-pp-split__text p:last-child { margin-bottom: 0; }
.itb-pp-split__points-intro {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 18px;
}
.itb-pp-split__points ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.itb-pp-split__points li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.itb-pp-split__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
/* Акцентная выноска-плашка на всю ширину. */
.itb-pp-split__callout {
  background: var(--accent-bg);
  border: 1px solid rgba(29, 72, 230, 0.18);
  border-radius: var(--radius-md);
  padding: 20px 26px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.itb-pp-split__note {
  max-width: 820px;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Кнопка калькулятора ROI под секцией: отдельная строка, а не в ряд с
   выноской — это переход в инструмент, а не продолжение чтения. */
.itb-pp-split__action {
  margin: 24px 0 0;
}

/* ─────────────────────────── Two-col (модели + список) ─────────────────────────── */
.itb-pp-twocol__cards {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 44px;
}
/* Одна карточка — не растягиваем на всю ширину. */
.itb-pp-twocol__cards:has(.itb-pp-twocol__card:only-child) { grid-template-columns: minmax(0, 640px); }
.itb-pp-twocol__card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 36px 36px 40px;
}
.itb-pp-twocol__card-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  color: var(--text-primary);
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}
.itb-pp-twocol__card-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 22px;
}
.itb-pp-twocol__card-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.itb-pp-twocol__card-points li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.itb-pp-twocol__card-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.itb-pp-twocol__list-block { margin-bottom: 32px; }
.itb-pp-twocol__list-block .itb-bt-func__label { margin-bottom: 20px; display: inline-flex; }
.itb-pp-twocol__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-color);
}
.itb-pp-twocol__list-item {
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px 32px;
  align-items: baseline;
  padding: 20px 4px;
  border-bottom: 1px solid var(--border-color);
}
.itb-pp-twocol__list-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--text-primary);
}
.itb-pp-twocol__list-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.itb-pp-twocol__note {
  max-width: 820px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.itb-pp-twocol__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ─────────────────────────── Блок-хаб интеграций ───────────────────────────
   Темная плашка: слева крупный блок продукта (ядро контура) с крупной типографикой,
   справа — вертикальный перечень панелей-интеграций. Приоритетная (is-priority) —
   синяя, наверху; со ссылкой — кликабельна. Внутри светлой секции twocol. */
.itb-pp-hub {
  --hub-line: 91, 123, 255;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 120% at 6% 0%, rgba(29, 72, 230, 0.20), transparent 58%),
    #080f1d;
  border: 1px solid rgba(var(--hub-line), 0.14);
  border-radius: var(--radius-lg);
  padding: 52px 52px 52px 56px;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  align-items: center;
  gap: 40px 64px;
  overflow: hidden;
}

/* ── Левый блок: крупная типографика ── */
.itb-pp-hub__lead {
  position: relative;
  z-index: 1;
}
.itb-pp-hub__lead-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -1.5px;
  color: #fff;
  margin: 0;
}
.itb-pp-hub__lead-note {
  max-width: 34ch;
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #aeb8cc;
}

/* ── Правый блок: перечень панелей ── */
.itb-pp-hub__panels {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.itb-pp-hub__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  background: rgba(19, 29, 56, 0.55);
  border: 1px solid rgba(var(--hub-line), 0.18);
  border-radius: var(--radius-md);
  color: #d7ddf2;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-pp-hub__panel-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: #fff;
}
.itb-pp-hub__panel-desc {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: #9aa4b8;
}
.itb-pp-hub__panel-arrow {
  flex: none;
  font-size: 20px;
  line-height: 1;
  color: rgba(var(--hub-line), 0.8);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}
/* Приоритетная панель — сплошной синий, как кнопка (без свечения). */
.itb-pp-hub__panel.is-priority {
  background: var(--accent);
  border-color: var(--accent);
}
.itb-pp-hub__panel.is-priority .itb-pp-hub__panel-title { font-size: 19px; color: #fff; }
.itb-pp-hub__panel.is-priority .itb-pp-hub__panel-desc { color: rgba(255, 255, 255, 0.82); }
.itb-pp-hub__panel.is-priority .itb-pp-hub__panel-arrow { color: #fff; }
/* Кликабельные панели (со ссылкой). */
.itb-pp-hub__panel.is-link { cursor: pointer; }
@media (hover: hover) {
  .itb-pp-hub__panel.is-link:hover {
    border-color: #7d97ff;
    background: rgba(29, 72, 230, 0.22);
  }
  .itb-pp-hub__panel.is-link:hover .itb-pp-hub__panel-arrow { transform: translateX(4px); }
  .itb-pp-hub__panel.is-priority.is-link:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
  }
}
.itb-pp-hub__panel.is-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ─────────────────────────── Catalog (раскрывающийся перечень) ─────────────────────────── */
/* Живет внутри секции features (темная itb-section--bt-func). */
.itb-pp-catalog {
  margin-top: 36px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
}
/* Кнопка CTA под колодой/перечнем — отбить сверху, чтобы не липла к блоку. */
.itb-section--bt-func .itb-bt-func__cta { margin-top: 36px; }
.itb-pp-catalog__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 26px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}
.itb-pp-catalog__summary::-webkit-details-marker { display: none; }
.itb-pp-catalog__icon {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}
.itb-pp-catalog__icon::before,
.itb-pp-catalog__icon::after {
  content: "";
  position: absolute;
  background: var(--accent-light);
  transition: transform 0.2s ease;
}
.itb-pp-catalog__icon::before { left: 0; top: 8px; width: 18px; height: 2px; }
.itb-pp-catalog__icon::after { left: 8px; top: 0; width: 2px; height: 18px; }
.itb-pp-catalog[open] .itb-pp-catalog__icon::after { transform: scaleY(0); }
.itb-pp-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 40px;
  padding: 8px 26px 30px;
}
.itb-pp-catalog__group-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 14px;
}
.itb-pp-catalog__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.itb-pp-catalog__items li {
  font-size: 14.5px;
  line-height: 1.45;
  color: #aeb6c4;
  padding-left: 16px;
  position: relative;
}
.itb-pp-catalog__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ═══════════════════════════ Features: цифра-акцент + доп.возможности ═══════
   Живут внутри темной секции колоды (itb-section--bt-func) — темные токены. */
.itb-pp-feat-extra {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Баннер с крупной цифрой во всю ширину, синяя рамка-акцент. */
.itb-pp-stat {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
  padding: 34px 36px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, var(--accent-bg-strong), transparent 62%),
    var(--bg-card);
}
.itb-pp-stat__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 0;
}
.itb-pp-stat__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(38px, 6vw, 54px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.itb-pp-stat__label {
  font-size: 17px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.itb-pp-stat__caption {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-light);
}
/* Список «Дополнительные возможности». */
.itb-pp-feat-extra__items {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 28px;
}
.itb-pp-feat-extra__items li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.itb-pp-feat-extra__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent-bg-strong);
  box-shadow: inset 0 0 0 1.5px var(--accent-light);
}

/* ═══════════════════════════ Where used (audience) ═══════════════════════════
   Светлая секция «Б» (серо-голубой), сетка карточек-аудиторий с нумерацией. */
.itb-section--pp-audience {
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-card: #ffffff;
  --bg-card-hover: #f2f5fa;
  --border-card: #e2e8f0;
  --border-color: #e2e8f0;
  --accent-light: #3a58c0;
  --accent-bg: rgba(29, 72, 230, 0.06);
  background: #f4f7fb;
  color: #0f1b2d;
}
.itb-pp-audience__header { margin-bottom: 40px; }
.itb-pp-audience__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.itb-pp-audience__card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
@media (hover: hover) {
  .itb-pp-audience__card:hover {
    border-color: var(--accent);
    box-shadow: 0 18px 50px -34px rgba(29, 72, 230, 0.5);
    transform: translateY(-3px);
  }
}
.itb-pp-audience__index {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--accent-light);
}
.itb-pp-audience__card-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 12px 0 10px;
}
.itb-pp-audience__card-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Акцентная карточка-«хвост»: занимает пустую ячейку справа (2 колонки) и
   выделена фирменным синим — превращает пробел в сетке в осознанный акцент. */
.itb-pp-audience__card--feature {
  grid-column: span 2;
  background: linear-gradient(135deg, #2a54ea, #1738b4);
  border-color: transparent;
}
.itb-pp-audience__card--feature .itb-pp-audience__index { color: rgba(255, 255, 255, 0.72); }
.itb-pp-audience__card--feature .itb-pp-audience__card-title { color: #fff; }
.itb-pp-audience__card--feature .itb-pp-audience__card-desc { color: rgba(255, 255, 255, 0.82); }
@media (hover: hover) {
  .itb-pp-audience__card--feature:hover {
    border-color: transparent;
    box-shadow: 0 22px 60px -34px rgba(29, 72, 230, 0.7);
  }
}

/* Промо-карточка-призыв: синяя (наследует --feature-палитру), кнопка прижата вниз. */
.itb-pp-audience__card--promo {
  display: flex;
  flex-direction: column;
}
.itb-pp-audience__card--promo .itb-pp-audience__card-title { margin-top: 0; }
.itb-pp-audience__promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  transition: gap 0.2s ease;
}
.itb-pp-audience__promo-btn span { transition: transform 0.2s ease; }
.itb-pp-audience__promo-btn:hover span { transform: translateX(4px); }

/* Вторичная (ghost) CTA на светлых pp-секциях: базовый .btn--ghost берет
   глобальный темный --surface-2 → темный-на-светлом. Переопределяем на прозрачный
   фон со светлой рамкой (как 29-bt-impl-compare.css / 33-pp-pricing.css). */
.itb-section--pp-pains .btn--ghost,
.itb-section--pp-audience .btn--ghost,
.itb-section--pp-twocol .btn--ghost,
.itb-section--pp-split .btn--ghost {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-primary);
}
.itb-section--pp-pains .btn--ghost:hover,
.itb-section--pp-audience .btn--ghost:hover,
.itb-section--pp-twocol .btn--ghost:hover,
.itb-section--pp-split .btn--ghost:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
}

/* ─────────────────────────── Адаптив ─────────────────────────── */
@media (max-width: 1100px) {
  .itb-pp-audience__grid { grid-template-columns: repeat(2, 1fr); }
  /* Три и более twocol-карточки на планшете — в 2 колонки. */
  .itb-pp-twocol__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Три карточки болей в ряд на планшете уже тесны: не больше двух. */
  .itb-pp-pains__grid { grid-template-columns: repeat(min(var(--pain-cols, 2), 2), minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .itb-pp-pains__grid { grid-template-columns: 1fr; }
  .itb-pp-feat-extra__items { grid-template-columns: 1fr; }
  .itb-pp-split__grid { grid-template-columns: 1fr; gap: 32px; }
  .itb-pp-twocol__cards { grid-template-columns: 1fr; }
  .itb-pp-catalog__grid { grid-template-columns: repeat(2, 1fr); }
  .itb-pp-twocol__list-item { grid-template-columns: 1fr; gap: 6px; }

  /* Хаб → столбец: крупный блок сверху, панели под ним. */
  .itb-pp-hub {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 26px;
  }
}

/* Рельс процесса → вертикальный: точки слева, заголовки справа (зигзаг сброшен). */
@media (max-width: 640px) {
  .itb-pp-rail {
    grid-template-columns: 48px 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    column-gap: 18px;
    row-gap: 6px;
  }
  .itb-pp-rail::before {
    top: 24px;
    bottom: 24px;
    left: 24px;
    right: auto;
    width: 2px;
    height: auto;
    transform: translateX(-1px);
    background: linear-gradient(180deg, var(--rail-line-done), var(--rail-line));
  }
  .itb-pp-rail__node {
    grid-template-rows: none;
    grid-row: auto;
    grid-column: 1 / -1;
    grid-template-columns: 48px 1fr;
    justify-items: start;
    align-items: center;
    column-gap: 18px;
    padding: 8px 0;
  }
  /* Шаг с описанием: кнопка-обертка сама становится строкой-раскладкой (точка+название). */
  .itb-pp-rail__btn {
    grid-column: 1 / -1;
    grid-template-columns: 48px 1fr;
    grid-template-rows: none;
    grid-row: auto;
    align-items: center;
    justify-items: start;
    column-gap: 18px;
    padding: 8px 0;
  }
  .itb-pp-rail__btn .itb-pp-rail__dot { grid-column: 1; }
  .itb-pp-rail__node.is-above .itb-pp-rail__btn .itb-pp-rail__title,
  .itb-pp-rail__node.is-below .itb-pp-rail__btn .itb-pp-rail__title {
    grid-column: 2;
    align-self: center;
    text-align: left;
    padding: 0;
    font-size: 16px;
  }
  .itb-pp-rail__dot {
    grid-row: auto;
    grid-column: 1;
    width: 44px;
    height: 44px;
    box-shadow: 0 0 0 5px #f2f4f8;
  }
  .itb-pp-rail__num { font-size: 14px; }
  .itb-pp-rail__node.is-above .itb-pp-rail__title,
  .itb-pp-rail__node.is-below .itb-pp-rail__title {
    grid-row: auto;
    grid-column: 2;
    align-self: center;
    text-align: left;
    padding: 0;
    font-size: 16px;
  }
  .itb-pp-rail__title::after { display: none; }
  /* Пилот: на мобильном описание раскрывается на всю ширину строки. */
  .itb-pp-rail--pilot { grid-template-rows: none; }
  .itb-pp-rail--pilot .itb-pp-rail__title { max-width: none; align-items: flex-start; }
  .itb-pp-rail--pilot .itb-pp-rail__node { align-items: start; padding: 12px 0; }
  .itb-pp-rail--pilot .itb-pp-rail__dot { align-self: start; }
}

/* ─────────────────────────── Пилот (pilot) ─────────────────────────── */
.itb-pp-pilot__steps {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.itb-pp-pilot__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 28px 28px 30px;
}
.itb-pp-pilot__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0.5px;
}
.itb-pp-pilot__text {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-primary);
}
.itb-pp-pilot__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 900px) {
  .itb-pp-pilot__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .itb-pp-audience__grid { grid-template-columns: 1fr; }
  .itb-pp-audience__card--feature { grid-column: auto; }
  .itb-pp-stat { padding: 26px 24px; }
  .itb-pp-pilot__steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .itb-pp-catalog__grid { grid-template-columns: 1fr; }
}

/* css/sections/33-pp-pricing.css */
/* ==========================================================================
   Конструктор продуктовых страниц (pp_*) → Тарифы (pricing).
   Светлая секция «А» (белый): грид карточек-тарифов, выделенный тариф
   (is-featured) подсвечен синим + бейдж. Почерк — как 27-bt-common / 32-pp.
   ========================================================================== */
.itb-section--pp-pricing {
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-card: #ffffff;
  --bg-card-hover: #f2f5fa;
  --border-card: #e2e8f0;
  --border-color: #e2e8f0;
  --accent-light: #3a58c0;
  --accent-bg: rgba(29, 72, 230, 0.06);
  background: #ffffff;
  color: #0f1b2d;
}
.itb-pp-pricing__header { margin-bottom: 44px; }

.itb-pp-pricing__grid {
  display: grid;
  grid-template-columns: repeat(var(--plans, 3), 1fr);
  gap: 20px;
  align-items: stretch;
}

.itb-pp-pricing__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
@media (hover: hover) {
  .itb-pp-pricing__card:hover {
    border-color: #c9d3e2;
    box-shadow: 0 20px 54px -34px rgba(15, 27, 45, 0.35);
    transform: translateY(-3px);
  }
}
/* Выделенный тариф — синяя рамка-акцент, легкое свечение, приподнят. */
.itb-pp-pricing__card.is-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 26px 64px -34px rgba(29, 72, 230, 0.6);
  background: linear-gradient(180deg, rgba(29, 72, 230, 0.05), transparent 220px), var(--bg-card);
}
@media (hover: hover) {
  .itb-pp-pricing__card.is-featured:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 30px 70px -32px rgba(29, 72, 230, 0.7);
  }
}
.itb-pp-pricing__badge {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: var(--radius-full);
}

.itb-pp-pricing__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.itb-pp-pricing__audience {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 20px;
  min-height: 42px;
}
.itb-pp-pricing__price {
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-card);
}
.itb-pp-pricing__price-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.itb-pp-pricing__price-note {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.itb-pp-pricing__features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.itb-pp-pricing__features li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.itb-pp-pricing__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-bg);
  box-shadow: inset 0 0 0 1.5px var(--accent-light);
}

/* Кнопка тарифа — во всю ширину карточки. */
.itb-pp-pricing__card-cta { margin-top: auto; }
.itb-pp-pricing__card-cta .btn {
  display: block;
  width: 100%;
  text-align: center;
}

.itb-pp-pricing__note {
  margin: 28px auto 0;
  max-width: 900px;
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.itb-pp-pricing__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Вторичная (ghost) CTA на светлой секции: базовый .btn--ghost берет глобальный
   темный --surface-2 → темный-на-светлом. Переопределяем на прозрачный фон со
   светлой рамкой (тот же прием, что 29-bt-impl-compare.css). */
.itb-section--pp-pricing .btn--ghost {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-primary);
}
.itb-section--pp-pricing .btn--ghost:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
}

/* ─────────────────────────── Адаптив ─────────────────────────── */
@media (max-width: 960px) {
  .itb-pp-pricing__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .itb-pp-pricing__audience { min-height: 0; }
}

/* css/sections/34-pp-matrix.css */
/* ==========================================================================
   Конструктор продуктовых страниц (pp_*) → Таблица сравнения (matrix).
   «Что видит специалист по результатам проверки»: требования × поставщики,
   значение + статус-бейдж (Соответствует / Расхождение / Требует проверки).
   Светлая секция «А» (белая) — светлый «остров» в обеих темах, как pains/twocol.
   Широкий экран — таблица, узкий — карточки-стопки. Статус-цвета заданы локально
   (в variables.css семантики нет).
   ========================================================================== */
.itb-section--pp-matrix {
  /* Светлый «А» (белый) — как pains/twocol. */
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-card: #f6f8fb;
  --bg-card-hover: #eef2f7;
  --border-card: #e2e8f0;
  --border-color: #e2e8f0;
  --accent-light: #3a58c0;

  /* Семантика статусов (светлая). */
  --st-match-fg: #15803d;
  --st-match-bg: rgba(22, 163, 74, 0.12);
  --st-diff-fg: #b91c1c;
  --st-diff-bg: rgba(220, 38, 38, 0.12);
  --st-check-fg: #b45309;
  --st-check-bg: rgba(217, 119, 6, 0.14);

  background: #ffffff;
  color: #0f1b2d;
}

/* Шапка секции — единый почерк pp-*. */
.itb-pp-matrix__header {
  max-width: 760px;
  margin-bottom: 48px;
}
.itb-section--pp-matrix .itb-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--accent-light);
}
.itb-section--pp-matrix .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}
.itb-pp-matrix__header .itb-section__title { margin-bottom: 16px; }

/* Обертка со скроллом — таблица не роняет ширину body на планшете. */
.itb-pp-matrix__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-card);
  background: var(--bg-card);
}
.itb-pp-matrix__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.itb-pp-matrix__table th,
.itb-pp-matrix__table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-card);
}
.itb-pp-matrix__table tbody tr:last-child th,
.itb-pp-matrix__table tbody tr:last-child td { border-bottom: 0; }

.itb-pp-matrix__table thead th {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-card-hover);
  white-space: nowrap;
}
.itb-pp-matrix__th-sup { border-left: 1px solid var(--border-card); }

.itb-pp-matrix__req {
  font-weight: 600;
  color: var(--text-primary);
}
.itb-pp-matrix__value {
  color: var(--text-primary);
  border-left: 1px solid var(--border-card);
  white-space: nowrap;
}
.itb-pp-matrix__status { white-space: nowrap; }

/* Подпись поставщика внутри ячейки — только для узкого (карточного) режима. */
.itb-pp-matrix__sup-label { display: none; }

/* Бейдж статуса — точка + подпись. */
.itb-pp-matrix__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.itb-pp-matrix__badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.itb-pp-matrix__badge.is-match { color: var(--st-match-fg); background: var(--st-match-bg); }
.itb-pp-matrix__badge.is-diff  { color: var(--st-diff-fg);  background: var(--st-diff-bg); }
.itb-pp-matrix__badge.is-check { color: var(--st-check-fg); background: var(--st-check-bg); }

.itb-pp-matrix__note {
  margin: 22px 0 0;
  font-size: 15px;
  color: var(--text-muted);
}

/* Секции pp-* — светлые «острова» в обеих темах сайта (как pains/process/twocol):
   темного варианта намеренно нет. */

/* ── Узкий экран: таблица → карточки-стопки. Каждая строка = блок требования,
      поставщики выводятся парами «значение / статус» под подписью поставщика. ── */
@media (max-width: 720px) {
  .itb-pp-matrix__scroll {
    overflow-x: visible;
    border: 0;
    background: transparent;
    border-radius: 0;
  }
  .itb-pp-matrix__table,
  .itb-pp-matrix__table thead,
  .itb-pp-matrix__table tbody,
  .itb-pp-matrix__table tr,
  .itb-pp-matrix__table th,
  .itb-pp-matrix__table td { display: block; }

  .itb-pp-matrix__table thead { display: none; }

  .itb-pp-matrix__table tbody tr {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin-bottom: 16px;
  }
  .itb-pp-matrix__table th,
  .itb-pp-matrix__table td { border-bottom: 0; padding: 0; }

  .itb-pp-matrix__req {
    font-size: 17px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-card);
  }
  /* Значение + статус выстраиваются в строку «поставщик … статус». */
  .itb-pp-matrix__value {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-left: 0;
    white-space: normal;
    padding-top: 12px;
    font-weight: 600;
  }
  .itb-pp-matrix__sup-label {
    display: inline;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .itb-pp-matrix__status { padding: 6px 0 4px; }
}

/* css/sections/35-pp-grid.css */
/* ─────────────────────────────────────────────────────────────
   Продуктовая страница → «Реестр функций» (itb-pp-registry, слаг grid).
   Светлая секция. Плотный список-реестр: слева иконка + название,
   справа описание, тонкие разделители между строками. Намеренно НЕ
   карточки (это почерк pains) — деловой «инструментальный» вид.
   Первая строка (--key) выделена как ключевая функция.
   ───────────────────────────────────────────────────────────── */
/* Светлый «В» (тёплый песочный). Реестр идёт сразу после белой секции
   «болей», и обе были чисто белыми: граница между ними не читалась, две
   секции сливались в одно полотно. Тёплый тон разводит их и снимает
   клинический холод белого, оставаясь приглушённым (oklch 0.965 0.012 85 —
   chroma намеренно низкая: это нейтраль с тёплым подтоном, а не бежевый
   акцент). Волосяные разделители тоже уведены в тепло, иначе холодный
   серый на песочном читается как грязь. Контраст с текстом 15.6:1. */
.itb-section--pp-registry {
  --text-primary: #0f1b2d;
  --text-secondary: #576574;
  --accent-light: #3a58c0;
  --border-hair: #e6e0d7;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  background: #f7f3eb;
  color: #0f1b2d;
}

/* Синий eyebrow с чертой — единый прием страницы. */
.itb-section--pp-registry .itb-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 20px;
}
.itb-section--pp-registry .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}
.itb-pp-registry__header {
  max-width: 760px;
  margin-bottom: 40px;
}
.itb-pp-registry__header .itb-section__title { margin-bottom: 16px; }

.itb-pp-registry__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-hair);
}
.itb-pp-registry__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: baseline;
  padding: 26px 8px 26px 0;
  border-bottom: 1px solid var(--border-hair);
  transition: background 0.4s var(--ease-expo), padding-left 0.4s var(--ease-expo);
}
/* Тонкая акцентная кромка слева проявляется на hover (не постоянная полоса). */
.itb-pp-registry__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease-expo);
}
@media (hover: hover) {
  .itb-pp-registry__row:hover {
    background: linear-gradient(90deg, rgba(29, 72, 230, 0.04), transparent 60%);
    padding-left: 18px;
  }
  .itb-pp-registry__row:hover::before { transform: scaleY(1); }
  .itb-pp-registry__row:hover .itb-pp-registry__icon {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
}

/* Левая часть: иконка + название. */
.itb-pp-registry__lead {
  display: flex;
  align-items: center;
  gap: 16px;
}
.itb-pp-registry__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(29, 72, 230, 0.07);
  color: var(--accent);
  border: 1px solid rgba(29, 72, 230, 0.14);
  transition: background 0.4s var(--ease-expo), color 0.4s var(--ease-expo), border-color 0.4s var(--ease-expo);
}
.itb-pp-registry__icon svg { width: 21px; height: 21px; }

.itb-pp-registry__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0;
}
.itb-pp-registry__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: 60ch;
}

/* Ключевая (первая) строка — крупнее, легкая подложка, без hover-скачка. */
.itb-pp-registry__row--key {
  background: linear-gradient(90deg, rgba(29, 72, 230, 0.05), transparent 65%);
  padding: 30px 8px 30px 22px;
}
.itb-pp-registry__row--key::before { transform: scaleY(1); }
.itb-pp-registry__row--key .itb-pp-registry__icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.itb-pp-registry__row--key .itb-pp-registry__icon svg { width: 25px; height: 25px; }
.itb-pp-registry__row--key .itb-pp-registry__title { font-size: 21px; }
.itb-pp-registry__row--key .itb-pp-registry__desc { font-size: 16px; }

/* ─────────────────────────── Адаптив ─────────────────────────── */
@media (max-width: 820px) {
  .itb-pp-registry__row,
  .itb-pp-registry__row--key {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-left: 16px;
  }
  .itb-pp-registry__row--key::before { transform: scaleY(1); }
  .itb-pp-registry__desc { padding-left: 56px; }
}
@media (max-width: 480px) {
  .itb-pp-registry__desc { padding-left: 0; }
}

/* ─────────────────────────────────────────────────────────────
   Компактные плитки функций (pp_grid_compact). Сетка 2×N: видны
   только иконка и название, описание открывается поповером по
   клику (js/balance-torgi.js:initTilesPopover). Прием для секций,
   где функций много, а описания длинные и «шумят» в реестре.
   ───────────────────────────────────────────────────────────── */
.itb-pp-tiles {
  position: relative;
}
.itb-pp-tiles__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.itb-pp-tiles__cell { display: flex; }

.itb-pp-tiles__tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 46px 22px 22px;
  text-align: left;
  /* На песочном фоне секции чистый белый читается холодным пятном:
     плитка на тон светлее фона, но в том же тепле. */
  background: #fcfaf6;
  border: 1px solid var(--border-hair);
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.4s var(--ease-expo), background 0.4s var(--ease-expo),
              box-shadow 0.4s var(--ease-expo), transform 0.4s var(--ease-expo);
}
.itb-pp-tiles__tile.is-static { cursor: default; padding-right: 22px; }

.itb-pp-tiles__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(29, 72, 230, 0.07);
  color: var(--accent);
  border: 1px solid rgba(29, 72, 230, 0.14);
  transition: background 0.4s var(--ease-expo), color 0.4s var(--ease-expo),
              border-color 0.4s var(--ease-expo);
}
.itb-pp-tiles__icon svg { width: 22px; height: 22px; }

.itb-pp-tiles__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
  color: var(--text-primary);
}

/* Плюс справа — намек, что плитка раскрывается. В активном виде становится минусом. */
.itb-pp-tiles__more {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  flex: none;
}
.itb-pp-tiles__more::before,
.itb-pp-tiles__more::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 0.3s var(--ease-expo), opacity 0.3s var(--ease-expo);
}
.itb-pp-tiles__more::before { left: 0; top: 6px; width: 14px; height: 2px; }
.itb-pp-tiles__more::after  { left: 6px; top: 0; width: 2px; height: 14px; }
.itb-pp-tiles__tile.is-active .itb-pp-tiles__more::after { opacity: 0; transform: scaleY(0); }

@media (hover: hover) {
  .itb-pp-tiles__tile:not(.is-static):hover {
    border-color: rgba(29, 72, 230, 0.35);
    box-shadow: 0 10px 30px rgba(15, 27, 45, 0.07);
    transform: translateY(-2px);
  }
  .itb-pp-tiles__tile:not(.is-static):hover .itb-pp-tiles__icon {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
}
.itb-pp-tiles__tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.itb-pp-tiles__tile.is-active {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(29, 72, 230, 0.05), transparent);
}
.itb-pp-tiles__tile.is-active .itb-pp-tiles__icon {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Поповер с описанием — во всю ширину сетки, под рядом активной плитки. */
.itb-pp-tiles__pop {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 22px 52px 24px 24px;
  background: #fff;
  border: 1px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 27, 45, 0.13);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s var(--ease-expo), transform 0.3s var(--ease-expo);
}
.itb-pp-tiles__pop.is-open { opacity: 1; transform: translateY(0); }
/* Хвостик-острие к активной плитке. */
.itb-pp-tiles__pop::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--pop-x, 50%);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: #fff;
  border-left: 1px solid var(--accent);
  border-top: 1px solid var(--accent);
  transform: rotate(45deg);
}
.itb-pp-tiles__pop-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.itb-pp-tiles__pop-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 78ch;
}
.itb-pp-tiles__pop-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-hair);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.itb-pp-tiles__pop-close:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(29, 72, 230, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .itb-pp-tiles__tile,
  .itb-pp-tiles__pop { transition: none; }
}

@media (max-width: 720px) {
  .itb-pp-tiles__grid { grid-template-columns: 1fr; gap: 12px; }
  .itb-pp-tiles__tile { padding: 18px 42px 18px 18px; }
  .itb-pp-tiles__title { font-size: 16px; }
  .itb-pp-tiles__pop { padding: 20px 46px 20px 20px; }
}

/* css/sections/36-pp-modes.css */
/* ─────────────────────────────────────────────────────────────
   Продуктовая страница → «Варианты реализации» (itb-pp-modes, слаг grid2).
   Темная секция-контраст. Горизонтальные ряды-форматы: крупная mono-
   нумерация слева, вертикальная соединяющая линия, заголовок + описание.
   Не карточки — спектр форматов сверху вниз.
   ───────────────────────────────────────────────────────────── */
.itb-section--pp-modes {
  --text-primary: #ffffff;
  --text-secondary: #b7bcc3;
  --accent-light: #6f8bff;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  background: #060c18;
  color: #ffffff;
}

/* Синий eyebrow с чертой. */
.itb-section--pp-modes .itb-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 20px;
}
.itb-section--pp-modes .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}
.itb-pp-modes__header {
  max-width: 760px;
  margin-bottom: 44px;
}
.itb-pp-modes__header .itb-section__title { margin-bottom: 16px; color: #fff; }
.itb-pp-modes__header .itb-section__subtitle { color: var(--text-secondary); }

.itb-pp-modes__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Раскладка: [номер] [колонка-спектр с линией и узлом] [текст].
   Линия-спектр идет в ОТДЕЛЬНОЙ колонке между номером и текстом —
   не пересекает цифры. Ширина колонки-спектра = --rail (24px). */
.itb-pp-modes__row {
  --rail: 24px;
  position: relative;
  display: grid;
  grid-template-columns: auto var(--rail) 1fr;
  gap: 22px;
  align-items: start;
  padding: 32px 0;
  border-top: 1px solid rgba(183, 188, 195, 0.14);
  transition: transform 0.5s var(--ease-expo);
}
.itb-pp-modes__row:last-child { border-bottom: 1px solid rgba(183, 188, 195, 0.14); }

.itb-pp-modes__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
  color: var(--accent-light);
  letter-spacing: -1px;
  min-width: 62px;
}

/* Вертикальная линия-спектр в средней колонке + узел-точка на ней. */
.itb-pp-modes__row::before {
  content: "";
  position: absolute;
  left: calc(62px + 22px + var(--rail) / 2);
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(111, 139, 255, 0.30);
}
.itb-pp-modes__row:first-child::before { top: 50%; }
.itb-pp-modes__row:last-child::before { bottom: 50%; }
.itb-pp-modes__row::after {
  content: "";
  position: absolute;
  left: calc(62px + 22px + var(--rail) / 2);
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 5px #060c18, 0 0 0 6px rgba(111, 139, 255, 0.35);
  transition: transform 0.5s var(--ease-expo), box-shadow 0.5s var(--ease-expo);
  z-index: 1;
}

.itb-pp-modes__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.25;
  color: #fff;
  margin: 0 0 8px;
}
.itb-pp-modes__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 68ch;
}

@media (hover: hover) {
  .itb-pp-modes__row:hover .itb-pp-modes__title { color: var(--accent-light); }
  .itb-pp-modes__row:hover::after {
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow: 0 0 0 5px #060c18, 0 0 0 8px rgba(111, 139, 255, 0.5);
  }
}

/* ─────────────────────────── Адаптив ─────────────────────────── */
@media (max-width: 640px) {
  /* Мобильный: рельс-колонка и линия скрыты, номер над текстом. */
  .itb-pp-modes__row {
    grid-template-columns: auto 1fr;
    gap: 8px 18px;
    align-items: baseline;
    padding: 24px 0;
  }
  .itb-pp-modes__rail { display: none; }
  .itb-pp-modes__row::before,
  .itb-pp-modes__row::after { display: none; }
  .itb-pp-modes__num { font-size: 30px; min-width: 48px; }
}

/* css/sections/37-pp-why.css */
/* ─────────────────────────────────────────────────────────────
   Продуктовая страница → «Почему мы» (itb-pp-why). Светлая секция.
   Асимметрия: слева крупный заголовок-манифест (sticky на десктопе),
   справа нумерованный список причин с тонкими разделителями. Не карточки.
   ───────────────────────────────────────────────────────────── */
.itb-section--pp-why {
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --accent-light: #3a58c0;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  background: #f2f4f8;
  color: #0f1b2d;
}

.itb-pp-why__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* Левая колонка — заголовок-манифест. */
.itb-pp-why__aside {
  position: sticky;
  top: 120px;
}
.itb-pp-why__aside .itb-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 24px;
}
.itb-pp-why__aside .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}
.itb-pp-why__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}
.itb-pp-why__title .accent { color: var(--accent); }

/* Правая колонка — список причин. */
.itb-pp-why__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.itb-pp-why__item {
  display: grid;
  grid-template-columns: clamp(56px, 8vw, 88px) 1fr;
  gap: clamp(20px, 3vw, 36px);
  padding: 30px 0;
  border-top: 1px solid #dbe2ec;
}
.itb-pp-why__item:first-child { padding-top: 0; border-top: none; }
.itb-pp-why__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1;
  letter-spacing: -1px;
  color: var(--accent-light);
}
.itb-pp-why__item-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.28;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.itb-pp-why__item-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 62ch;
}

/* ─────────────────────────── Адаптив ─────────────────────────── */
@media (max-width: 900px) {
  .itb-pp-why__inner { grid-template-columns: 1fr; gap: 40px; }
  .itb-pp-why__aside { position: static; }
  .itb-pp-why__count { margin-top: 20px; }
}
@media (max-width: 520px) {
  .itb-pp-why__item { grid-template-columns: 1fr; gap: 6px; }
  .itb-pp-why__num { padding-top: 0; }
}

/* css/sections/38-pp-chat.css */
/* ─────────────────────────────────────────────────────────────
   Продуктовая страница → «Где применяются» как чат-демо (itb-pp-chat).
   Темная секция. Слева заголовок + темы-кнопки; справа макет iPhone с
   Telegram-подобным чатом: шапка чата, пузыри, время, «печатает…».
   Сообщения печатаются онлайн (js/balance-torgi.js:initChat).
   ───────────────────────────────────────────────────────────── */
.itb-section--pp-chat {
  --text-primary: #ffffff;
  --text-secondary: #b7bcc3;
  --accent-light: #7f97ff;
  --panel: #0e1a2c;
  --hair: rgba(183, 188, 195, 0.14);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* Telegram-палитра чата */
  --tg-bg: #0e1621;
  --tg-header: #17212b;
  --tg-in: #182533;
  --tg-out: #2b5278;
  --tg-text: #ffffff;
  --tg-muted: #7d8e9e;
  background:
    radial-gradient(1100px 500px at 88% 8%, rgba(29, 72, 230, 0.14), transparent 60%),
    #060c18;
  color: #fff;
}

.itb-pp-chat__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 420px);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  justify-content: center;
}

/* ── Левая часть: заголовок + темы ── */
.itb-pp-chat__header { margin-bottom: 32px; }
.itb-pp-chat__aside .itb-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 20px;
}
.itb-pp-chat__aside .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}
.itb-pp-chat__aside .itb-section__title { margin-bottom: 16px; color: #fff; }
.itb-pp-chat__aside .itb-section__subtitle { color: var(--text-secondary); }

.itb-pp-chat__topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.itb-pp-chat__topic {
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: block;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 16px 20px;
  color: var(--text-secondary);
  transition: background 0.4s var(--ease-expo), border-color 0.4s var(--ease-expo), transform 0.4s var(--ease-expo);
}
.itb-pp-chat__topic-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  color: #fff;
}
.itb-pp-chat__topic-desc {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #8a93a4;
}
@media (hover: hover) {
  .itb-pp-chat__topic:hover { border-color: rgba(127, 151, 255, 0.5); transform: translateX(3px); }
}
.itb-pp-chat__topic.is-active {
  background: linear-gradient(100deg, rgba(29, 72, 230, 0.22), rgba(29, 72, 230, 0.06));
  border-color: var(--accent);
}
.itb-pp-chat__topic.is-active .itb-pp-chat__topic-desc { color: #c7cede; }

/* ── Правая часть: макет iPhone ── */
.itb-pp-chat__phone {
  justify-self: center;
  width: 100%;
  max-width: 380px;
}
.itb-pp-chat__device {
  position: relative;
  aspect-ratio: 384 / 800;
  background: #05090f;
  border: 2px solid #222c3a;
  border-radius: 46px;
  padding: 12px;
  box-shadow:
    0 0 0 2px #0a0f17,
    0 50px 110px -40px rgba(0, 0, 0, 0.95),
    inset 0 1px 1px rgba(255, 255, 255, 0.06);
}
/* Dynamic Island */
.itb-pp-chat__island {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 30px;
  background: #05090f;
  border-radius: 16px;
  z-index: 3;
}

.itb-pp-chat__screen {
  position: relative;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: var(--tg-bg);
}

/* Панель диалога = один экран чата (шапка + лента + ввод). */
.itb-pp-chat__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.itb-pp-chat__panel[hidden] { display: none; }

/* Telegram-шапка чата. */
.itb-pp-chat__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 46px 14px 12px;   /* верхний отступ под island/статус-бар */
  background: var(--tg-header);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.itb-pp-chat__back {
  flex: none;
  color: #5aa7e8;
  display: inline-flex;
}
.itb-pp-chat__back svg { width: 22px; height: 22px; }
.itb-pp-chat__avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2d5bff, #6f4dff);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
}
.itb-pp-chat__agent-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.itb-pp-chat__agent-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.itb-pp-chat__agent-status {
  font-size: 12.5px;
  color: #5aa7e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.itb-pp-chat__menu { flex: none; color: var(--tg-muted); display: inline-flex; }
.itb-pp-chat__menu svg { width: 20px; height: 20px; }

/* Лента сообщений на «обойном» фоне Telegram. */
.itb-pp-chat__thread {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 12px;
  background:
    radial-gradient(circle at 20% 15%, rgba(43, 82, 120, 0.20), transparent 40%),
    radial-gradient(circle at 82% 70%, rgba(111, 77, 255, 0.14), transparent 45%),
    var(--tg-bg);
}

/* Сообщение скрыто до анимации (JS добавляет is-shown). */
.itb-pp-chat__msg {
  display: flex;
  max-width: 82%;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.35s var(--ease-expo), transform 0.35s var(--ease-expo);
}
.itb-pp-chat__msg.is-shown { opacity: 1; transform: none; }
.itb-pp-chat__msg--user { align-self: flex-end; }
.itb-pp-chat__msg--ai { align-self: flex-start; }

.itb-pp-chat__bubble {
  position: relative;
  padding: 8px 12px 7px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 14px;
  color: var(--tg-text);
}
.itb-pp-chat__bubble-text { display: inline; }

/* ── Вложение-документ внутри пузыря (request/response) ──
   Как в Telegram: слева круглая цветная иконка (цвет по расширению), справа
   имя файла и подпись (размер · тип). Декоративна (демо, реальных файлов нет).
   Когда есть текст — он идет подписью ниже. */
.itb-pp-chat__file {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 2px 6px 0;
}
.itb-pp-chat__bubble--has-file .itb-pp-chat__file:not(:last-child) {
  margin-bottom: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.itb-pp-chat__file-icon {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Цвет круга по расширению (--file-color задается модификатором). */
  background: var(--file-color, #7d8e9e);
  color: #fff;
}
.itb-pp-chat__file-icon svg { width: 20px; height: 20px; }
/* Расширение поверх круга (как в TG у документов). */
.itb-pp-chat__file-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.2px;
  line-height: 1;
  color: #fff;
}
.itb-pp-chat__file-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.itb-pp-chat__file-name {
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.25;
  color: #fff;
  word-break: break-word;
}
.itb-pp-chat__file-sub {
  font-size: 11.5px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.55);
}
/* На синем user-пузыре подпись чуть светлее для контраста. */
.itb-pp-chat__msg--user .itb-pp-chat__file-sub { color: rgba(255, 255, 255, 0.7); }

/* Цвета кружка по расширению — палитра Telegram/офисных форматов. */
.itb-pp-chat__file--pdf     { --file-color: #e0564f; }
.itb-pp-chat__file--xlsx    { --file-color: #21a366; }
.itb-pp-chat__file--docx    { --file-color: #2b7cd3; }
.itb-pp-chat__file--1c      { --file-color: #f2c94c; }
.itb-pp-chat__file--zip     { --file-color: #b06fd0; }
.itb-pp-chat__file--img     { --file-color: #4aa1e0; }
.itb-pp-chat__file--generic { --file-color: #7d8e9e; }
/* У 1С кружок светлый — метку делаем темной для контраста. */
.itb-pp-chat__file--1c .itb-pp-chat__file-badge { color: #2a2a2a; }

.itb-pp-chat__msg--user .itb-pp-chat__bubble {
  background: var(--tg-out);
  border-bottom-right-radius: 5px;
}
.itb-pp-chat__msg--ai .itb-pp-chat__bubble {
  background: var(--tg-in);
  border-bottom-left-radius: 5px;
}
.itb-pp-chat__bubble .accent { color: #8fb8ff; font-weight: 700; }

/* Время в правом-нижнем углу пузыря. */
.itb-pp-chat__time {
  float: right;
  margin: 6px 0 -2px 10px;
  font-size: 10.5px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  top: 4px;
}

/* Индикатор «печатает…». */
.itb-pp-chat__bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 11px 14px;
}
.itb-pp-chat__typing-label {
  font-size: 12.5px;
  color: var(--tg-muted);
  margin-right: 2px;
}
.itb-pp-chat__typing-label[hidden] { display: none; }
.itb-pp-chat__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tg-muted);
  animation: pp-chat-dot 1.2s infinite ease-in-out;
}
.itb-pp-chat__dot:nth-child(2) { animation-delay: 0.18s; }
.itb-pp-chat__dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes pp-chat-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Поле ввода (декоративное). */
.itb-pp-chat__input {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--tg-header);
  border-top: 1px solid rgba(0, 0, 0, 0.3);
}
.itb-pp-chat__input-text {
  flex: 1;
  font-size: 14px;
  color: var(--tg-muted);
}
.itb-pp-chat__send {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #5aa7e8;
  color: #fff;
}
.itb-pp-chat__send svg { width: 17px; height: 17px; }

/* reduce-motion: сообщения статичны. */
@media (prefers-reduced-motion: reduce) {
  .itb-pp-chat__msg { opacity: 1; transform: none; transition: none; }
  .itb-pp-chat__dot { animation: none; }
}

/* ─────────────────────────── Адаптив ─────────────────────────── */
@media (max-width: 900px) {
  .itb-pp-chat__inner { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
  .itb-pp-chat__aside { width: 100%; }
}
@media (max-width: 480px) {
  .itb-pp-chat__topic { padding: 14px 16px; }
  .itb-pp-chat__device { border-radius: 40px; }
  .itb-pp-chat__screen { border-radius: 30px; }
}

/* css/sections/39-pp-shot.css */
/* ==========================================================================
   Продуктовая страница → Скриншот интерфейса (itb-pp-shot, слаг shot).

   Тёмная секция: кадр здесь светлый, и на тёмном фоне он читается как экран
   в комнате, а не как картинка, наклеенная на лист. Заодно разводит соседние
   светлые секции, не добавляя ещё один оттенок в светлую часть страницы.
   ========================================================================== */

.itb-section--pp-shot {
  --text-primary: #ffffff;
  --text-secondary: #b7bcc3;
  --text-muted: #8792a0;
  --border-color: rgba(183, 188, 195, 0.16);
  /* На шаг светлее, чем идущая следом секция результатов (#060c18): две тёмные
     подряд с одинаковым фоном сливались в одно полотно. Ритм задаётся сменой
     плоскости, разделители не рисуются. */
  background: #0b1524;
  color: #ffffff;
}

/* Надзаголовок с синей чертой — единый прием страницы. */
.itb-section--pp-shot .itb-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--accent-light);
}
.itb-section--pp-shot .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

.itb-pp-shot__header {
  max-width: 760px;
  margin-bottom: 48px;
}
.itb-pp-shot__header .itb-section__eyebrow { margin-bottom: 20px; }
.itb-pp-shot__header .itb-section__title { margin-bottom: 18px; }
.itb-pp-shot__header .itb-section__subtitle {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Кадр во всю ширину, пояснения строкой под ним.
   Колонка сбоку сжимала кадр примерно до 770px: интерфейс снят в 2000px, и
   при таком масштабе его собственный текст падал до 5-6px, то есть скриншот
   переставал что-либо доказывать и работал как декорация. Ширина здесь важнее
   соседства с пояснениями. */
.itb-pp-shot__body {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}

/* Рамка-окно: тонкая «шапка» с точками, под ней кадр. */
.itb-pp-shot__window {
  margin: 0;
  border: 1px solid rgba(148, 163, 208, 0.18);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0b1220;
}
.itb-pp-shot__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  background: #0b1220;
  border-bottom: 1px solid rgba(148, 163, 208, 0.14);
}
.itb-pp-shot__chrome span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(148, 163, 208, 0.3);
}
.itb-pp-shot__chrome span:nth-child(1) { background: #ff5f57; }
.itb-pp-shot__chrome span:nth-child(2) { background: #febc2e; }
.itb-pp-shot__chrome span:nth-child(3) { background: #28c840; }

.itb-pp-shot__img {
  display: block;
  width: 100%;
  height: auto;
}
.itb-pp-shot__caption {
  padding: 14px 18px;
  border-top: 1px solid rgba(148, 163, 208, 0.14);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Пояснения сбоку: что именно видно на кадре. Не карточки — просто список,
   привязанный к кадру, поэтому маркер тонкий, а не заливка. */
.itb-pp-shot__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px 36px;
}
.itb-pp-shot__points li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.itb-pp-shot__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 620px) {
  .itb-pp-shot__header { margin-bottom: 32px; }
  .itb-pp-shot__points { grid-template-columns: 1fr; }
  .itb-pp-shot__chrome { padding: 10px 13px; }
  .itb-pp-shot__chrome span { width: 9px; height: 9px; }
}

/* css/sections/40-pp-hero.css */
/* ==========================================================================
   Продуктовая страница → Hero (GigaIDE-стиль со скриншотом) (темный, в духе GigaIDE).
   Контент слева, декоративное свечение, крупный скриншот снизу с обрезкой.
   ========================================================================== */

.itb-pp-hero {
  /* Темная секция: локально переопределяем токены (как в CTA), чтобы кнопки
     и текст читались на темном фоне. */
  --text-primary: #ffffff;
  --text-secondary: #aeb6c4;
  --surface-2: rgba(148, 163, 208, 0.12);
  --surface-2-hover: rgba(148, 163, 208, 0.22);
  --border-color: rgba(148, 163, 208, 0.20);

  position: relative;
  overflow: hidden;
  background: #060c18;
  padding-top: clamp(72px, 10vw, 130px);
  /* Низ секции без паддинга — скриншот сам «наезжает» и обрезается краем. */
  padding-bottom: 0;
  isolation: isolate;
}

/* Декоративное свечение справа-сверху — «планета» GigaIDE. */
.itb-pp-hero__glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: min(900px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%,
      var(--hero-glow-core) 0%,
      var(--hero-glow-mid) 40%,
      rgba(29, 72, 230, 0.05) 65%,
      transparent 72%);
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}

/* ── Контент слева ── */
.itb-pp-hero__lead {
  max-width: 900px;
}
.itb-pp-hero__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #9db0ff;
  background: rgba(90, 116, 255, 0.12);
  border: 1px solid rgba(90, 116, 255, 0.30);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  margin-bottom: 24px;
}
.itb-pp-hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
/* Выделение [[...]] через itb_highlight_accent — акцентный синий. */
.itb-pp-hero__title .accent { color: #7f97ff; }
.itb-pp-hero__subtitle {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: #aeb6c4;
  margin: 22px 0 0;
  max-width: 720px;
}
.itb-pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* ── Скриншот в рамке-окне, наезжает на низ секции ── */
.itb-pp-hero__shot {
  margin-top: clamp(48px, 6vw, 88px);
  /* Скриншот шире контейнера — центрируем и даем ему «наезжать» на низ.
     Нижняя часть окна уходит за край секции (обрезается), виден верх интерфейса. */
  padding: 0 clamp(16px, 4vw, 48px);
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}
.itb-pp-hero__window {
  border-radius: 14px 14px 0 0;
  border: 1px solid rgba(148, 163, 208, 0.22);
  border-bottom: none;
  overflow: hidden;
  background: #0d1626;
  box-shadow: 0 -10px 80px -30px rgba(90, 116, 255, 0.5),
              0 40px 100px -40px rgba(0, 0, 0, 0.9);
}
/* «Шапка» окна — три точки. */
.itb-pp-hero__window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: #0b1220;
  border-bottom: 1px solid rgba(148, 163, 208, 0.14);
}
.itb-pp-hero__window-bar span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(148, 163, 208, 0.35);
}
.itb-pp-hero__window-bar span:nth-child(1) { background: #ff5f57; }
.itb-pp-hero__window-bar span:nth-child(2) { background: #febc2e; }
.itb-pp-hero__window-bar span:nth-child(3) { background: #28c840; }
.itb-pp-hero__window-body {
  /* Ограничиваем видимую высоту скриншота: виден верх интерфейса, низ обрезан. */
  max-height: clamp(360px, 46vw, 560px);
  overflow: hidden;
}
.itb-pp-hero__shot-img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 720px) {
  .itb-pp-hero__window-body { max-height: 62vw; }
  .itb-pp-hero__actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Hero с панелью-потоком (itb-hero--split): текст слева, панель «этап →
   документ» справа. Включается заполненным репитером pp_hero_flow.

   Панель — опорная плоскость на шаг светлее корпуса (--bg-card), без тени:
   глубина шагом светлоты, как требует DESIGN.md. Чип результата моношрифтом —
   это маркировка артефакта, а не текст предложения.
   ========================================================================== */

.itb-hero--split .itb-hero__grid {
  display: grid;
  /* Текстовой колонке отдано заметно больше: при равных долях заголовок 58px
     ломался на четыре строки и первый экран читался как «комок». */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 88px);
  /* По верху, а не по центру: метка-надзаголовок и подпись панели — два начала
     одного чтения, они должны стоять на одной линии. */
  align-items: start;
}
/* Колонка текста уже не тянется на всю ширину — снимаем «широкие» максимумы. */
.itb-hero--split .itb-hero__lead { container-type: inline-size; }
.itb-hero--split .itb-hero__title { max-width: 100%; }
.itb-hero--split .itb-hero__subtitle { max-width: 100%; }

/* Кегль заголовка считается от ширины СВОЕЙ колонки, а не от вьюпорта:
   в две колонки места вдвое меньше, и общий clamp(38px, 5vw, 58px) ломал
   заголовок на четыре строки. Контейнерные единицы держат его в трёх.
   Только для двухколоночного режима (от 1025px): ниже колонка снова во всю
   ширину, и там работает базовый clamp, иначе заголовок скакал бы вверх. */
@media (min-width: 1025px) {
  @container (min-width: 1px) {
    .itb-hero--split .itb-hero__title { font-size: clamp(34px, 8.2cqi, 52px); }
  }
}

/* Ритм левой колонки. Шаги намеренно контрастные, а не одинаковые:
   тесная группа «метка → заголовок → текст», затем генеральный разрыв перед
   действием, затем метрики подпирают кнопки вплотную как их подпись. */
.itb-hero--split .itb-hero__badge { margin-bottom: 18px; }
.itb-hero--split .itb-hero__title { margin-bottom: 22px; }
.itb-hero--split .itb-hero__subtitle { margin-bottom: 44px; }
.itb-hero--split .itb-hero__actions { margin-bottom: 22px; }
.itb-hero--split .itb-svc-hero__chips { max-width: 100%; margin-bottom: 0; }

/* Чипы в hero продукта идут ПОСЛЕ кнопок (метрики подписывают действие,
   а не разрывают связку «текст → кнопка»), поэтому отступ нужен и без панели:
   у .itb-hero__actions своего нижнего margin нет, и чипы липли вплотную. */
.single-product .itb-hero__actions { margin-bottom: 22px; }
.single-product .itb-svc-hero__chips { margin-bottom: 0; }

.itb-pp-flow {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
}
.itb-pp-flow__label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.itb-pp-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Строка этапа: название+подпись слева, чип-результат справа.
   Разделители — ослабленный текст, а не самостоятельная линия. */
.itb-pp-flow__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-color);
}
.itb-pp-flow__row:last-child { border-bottom: 0; padding-bottom: 0; }

.itb-pp-flow__stage {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.itb-pp-flow__step {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text-primary);
}
.itb-pp-flow__note {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-muted);
}
.itb-pp-flow__doc {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: 0.4px;
  color: var(--accent-light);
  background: var(--accent-bg);
  border: 1px solid var(--border-tag);
  border-radius: var(--radius-sm);
  padding: 7px 11px;
  text-align: right;
}

/* Планшет: панель уезжает под текст, но остается в общем ритме. */
@media (max-width: 1024px) {
  .itb-hero--split .itb-hero__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .itb-hero--split .itb-hero__actions { margin-bottom: 28px; }
}

@media (max-width: 700px) {
  .itb-pp-flow { padding: 24px 20px; }
  .itb-pp-flow__row {
    /* Чип не влезает в строку рядом с длинным этапом — переносим под него. */
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 0;
  }
  .itb-pp-flow__doc { text-align: left; }
  .itb-hero--split .itb-hero__grid { gap: 36px; }
}

/* css/sections/41-contacts-hero.css */
/* ==========================================================================
   Контакты → Hero: лаконичный заголовок. Левое выравнивание, много воздуха.
   Строка каналов-ролей вынесена под карту (см. 42-contacts-info.css).
   ========================================================================== */

.itb-contacts-hero {
  padding-top: clamp(120px, 15vh, 200px);
  padding-bottom: clamp(40px, 6vw, 72px);
  background: var(--bg-primary);
}

.itb-contacts-hero__head {
  max-width: 900px;
}

.itb-contacts-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.itb-contacts-hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0;
}
.itb-contacts-hero__title p { margin: 0; }
.itb-contacts-hero__title .accent {
  color: var(--accent-light);
}

.itb-contacts-hero__subtitle {
  max-width: 620px;
  margin: 24px 0 0;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Мягкое появление при загрузке, без зависимости от JS-обсервера. */
@media (prefers-reduced-motion: no-preference) {
  .itb-contacts-hero__head {
    animation: itb-contacts-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes itb-contacts-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* css/sections/42-contacts-info.css */
/* ==========================================================================
   Контакты → Инфоблок: карта-виджет слева + единый блок «контакты и
   реквизиты» справа. Карта — крупный объект секции; панель справа собирает
   адрес, способы связи, соцсети и реквизиты в одну поверхность.

   Секция всегда СВЕТЛАЯ, независимо от темы сайта: переопределяем токены
   локально значениями светлой темы, чтобы дочерние элементы (карточки,
   текст, границы) читались на светлом фоне и в темном режиме.
   ========================================================================== */

.itb-contacts-info {
  --bg-primary: #ffffff;
  --bg-secondary: #f6f8fb;
  --bg-card: #ffffff;
  --bg-card-hover: #eef2f7;
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --accent-light: #1d48e6;
  --accent-bg: rgba(29, 72, 230, 0.06);
  --accent-bg-strong: rgba(29, 72, 230, 0.10);
  --border-color: #e2e8f0;
  --border-card: #e2e8f0;
  --border-tag: #cbd5e1;

  background: #f6f8fb;
  color: var(--text-primary);
}

.itb-contacts-info__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
}

/* ── Карта-виджет ─────────────────────────────────────────────────────── */

.itb-contacts-info__map {
  position: relative;
  min-height: clamp(380px, 46vw, 560px);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
}
.itb-contacts-info__map-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.itb-contacts-info__map-link {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-primary);
  border: 1px solid var(--border-card);
  box-shadow: 0 8px 24px rgba(6, 12, 24, 0.28);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
  transition: gap 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, color 0.2s ease;
}
.itb-contacts-info__map-link:hover {
  gap: 11px;
  color: var(--accent-light);
  border-color: var(--accent);
}

/* ── Панель: контакты + реквизиты ─────────────────────────────────────── */

.itb-contacts-info__panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--border-card);
  box-shadow: 0 18px 48px rgba(15, 27, 45, 0.06);
}

.itb-contacts-info__city {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.itb-contacts-info__tick {
  width: 30px;
  height: 3px;
  flex: none;
  border-radius: 2px;
  background: var(--accent);
}
.itb-contacts-info__address {
  margin: 0;
  font-style: normal;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 36ch;
}

.itb-contacts-info__rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-color);
}
.itb-contacts-info__row {
  display: grid;
  grid-template-columns: minmax(92px, 128px) 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-color);
  align-items: baseline;
}
.itb-contacts-info__row dt {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.itb-contacts-info__row dd {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.itb-contacts-info__row dd a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.itb-contacts-info__row dd a:hover { color: var(--accent-light); }

/* Несколько телефонов: каждый на своей строке, иначе номера склеиваются
   в одну и читаются как один длинный. Подпись («отдел продаж») — рядом,
   более мелкая и приглушенная, чтобы не спорить с самим номером. */
.itb-contacts-info__phone {
  display: block;
}
.itb-contacts-info__phone + .itb-contacts-info__phone {
  margin-top: 6px;
}
.itb-contacts-info__phone-note {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 8px;
}

/* Соцсети */
.itb-contacts-info__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.itb-contacts-info__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 11px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  border: 1px solid var(--border-card);
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13.5px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.itb-contacts-info__social:hover {
  background: var(--accent-bg-strong);
  border-color: var(--accent);
  color: var(--accent-light);
}
.itb-contacts-info__social .itb-social__icon {
  width: 17px;
  height: 17px;
  flex: none;
}

/* ── Строка каналов-ролей (под картой) ────────────────────────────────── */

.itb-contacts-info__roles {
  list-style: none;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: clamp(28px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--border-color);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.itb-contacts-info__role {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.itb-contacts-info__role-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.itb-contacts-info__role-value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.25;
  color: var(--text-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
a.itb-contacts-info__role-value:hover { color: var(--accent-light); }
.itb-contacts-info__role-value.is-static { color: var(--text-secondary); }

/* ── Адаптив ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .itb-contacts-info__grid {
    grid-template-columns: 1fr;
  }
  .itb-contacts-info__map {
    min-height: clamp(300px, 60vw, 400px);
  }
}

@media (max-width: 560px) {
  .itb-contacts-info__roles {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 480px) {
  .itb-contacts-info__row,
  .itb-contacts-info__req-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* css/sections/44-contacts-form.css */
/* ==========================================================================
   Контакты → Форма заявки: split «текст слева / форма справа».
   Сама форма (.itb-cta-form) стилизована в cta-form.css — здесь только раскладка
   секции. Вложенной карточки нет: панель формы уже своя поверхность.
   ========================================================================== */

.itb-contacts-form__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.itb-contacts-form__text {
  position: sticky;
  top: 120px;
  max-width: 30ch;
}

.itb-contacts-form__title {
  margin: 12px 0 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.itb-contacts-form__desc {
  margin: 20px 0 0;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.6;
  color: var(--text-secondary);
}

.itb-contacts-form__reassure {
  margin: 24px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Панель формы: на широком экране слегка приподнимаем радиус/паддинг. */
.itb-contacts-form__panel .itb-cta-form {
  padding: clamp(24px, 3vw, 36px);
}

@media (max-width: 860px) {
  .itb-contacts-form__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .itb-contacts-form__text {
    position: static;
    max-width: none;
  }
}

/* css/sections/45-srv-page.css */
/* ==========================================================================
   Страница отдельной услуги (CPT service, single-service.php).
   Секции: intro, when, scope, scenarios, cycle, stack, faq.
   CTA переиспользует 19-prod-cta.css.

   Общий принцип раздела: синий выдается ровно двум местам на странице —
   последней ступени шкалы сценариев и врезке в цикле работ (DESIGN.md,
   The Load-Bearing Rule). Все остальное держится на градациях фона,
   границах и типографике.
   ========================================================================== */

/* ─── Экран 1. Шапка ───────────────────────────────────────────────────── */

/* Hero нет: компактная шапка. Сверху отступ больше обычного (шапка сайта
   фиксированная), снизу меньше — лид должен «сцепляться» со следующей секцией. */
.itb-srv-intro {
  position: relative;
  overflow: hidden;
  padding-top: clamp(96px, 11vw, 150px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

/* Декоративное свечение — тот же прием, что в hero главной (css/hero.css,
   .itb-hero--glow): круг радиального градиента, уведенный за правый верхний
   угол. Цвет берется из токенов --hero-glow-* (variables.css, разделы
   переопределяют их в 00-hero-glow.css), так что услуга подсвечивается
   тем же индиго, что и витрина /services, — раздел читается как один.

   Круг меньше и мягче, чем на главной (min(720px, 62vw) против 900/70vw):
   там он держит полноэкранный hero, здесь — компактную шапку, и в прежнем
   размере он заливал бы весь первый экран, а синего по DESIGN.md
   отводится не больше 10%.

   overflow: hidden на секции обязателен — иначе круг вылезает за правый
   край и дает горизонтальный скролл на узких экранах. */
.itb-srv-intro::before {
  content: "";
  position: absolute;
  top: -32%;
  right: -10%;
  width: min(720px, 62vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%,
      var(--hero-glow-core) 0%,
      var(--hero-glow-mid) 40%,
      rgba(29, 72, 230, 0.05) 65%,
      transparent 72%);
  filter: blur(10px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* Содержимое — над свечением. */
.itb-srv-intro > .itb-container { position: relative; z-index: 1; }

/* В светлой теме тот же круг читается как грязное пятно: токены свечения
   рассчитаны на темный фон. Гасим до едва заметной подложки. */
[data-theme="light"] .itb-srv-intro::before { opacity: 0.22; }

/* Услуги со «страницей-лендингом» (россыпь марок справа) — свечение
   работает подложкой под марками, поэтому уводим его чуть ниже, к ним. */
.itb-srv-intro:has(.itb-srv-intro__marks)::before { top: -18%; }

.itb-srv-intro__main { min-width: 0; }

/* Шапка с россыпью логотипов: текст слева, марки справа. Без марок
   контейнер остается обычным блоком и заголовок занимает всю ширину. */
/* Колонка марок узкая: россыпь декоративна, а заголовок — главное на
   экране. При равных долях H1 начинал рваться переносами («техниче-ская»),
   поэтому текст забирает вдвое больше ширины. */
.itb-srv-intro__split {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
/* Лента направлений идет под обеими колонками. */
.itb-srv-intro__split > .itb-srv-intro__scope { grid-column: 1 / -1; }

/* Россыпь марок: инструменты, которыми мы работаем. Не «Trusted by» —
   там были бы чужие клиентские логотипы, а это наш инструментарий
   (см. img/tech/README.md).

   Позиции приходят инлайном из шаблона (--x/--y), масштаб — --s,
   глубина параллакса — --d. Пропорция задается aspect-ratio, чтобы
   область не схлопывалась: содержимое внутри абсолютное. */
.itb-srv-intro__marks {
  position: relative;
  aspect-ratio: 1 / 0.82;
  min-height: 240px;
}

/* Марки в фирменных цветах и крупные: логотип должен опознаваться сразу,
   а приглушенная мелкая марка читается как абстрактный шум. Цвет тут
   работает на узнавание, поэтому grayscale не накладываем.

   Прозрачность легкая (0.85, не 0.5): она сажает марки на задний план
   относительно заголовка, но не съедает фирменные цвета. */
.itb-srv-intro__mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(clamp(56px, 6.4vw, 92px) * var(--s));
  height: auto;
  opacity: 0.85;
}

.itb-srv-intro__title {
  font-family: var(--font-heading);
  font-weight: 800;
  /* Колонки справа больше нет — заголовок занимает всю ширину и может
     позволить себе крупнее. Ограничение по ch держит строку читаемой:
     на широком мониторе H1 во всю ширину распадается на ленту. */
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -2px;
  color: var(--text-primary);
  max-width: 20ch;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  text-wrap: balance;
  /* Длинные слова («Разработка», «Сопровождение») на узких экранах шире
     контейнера: разрешаем перенос, иначе заголовок вылезает за край экрана.

     Именно break-word, без hyphens: auto. Автоперенос рвал слова по слогам
     на любой ширине («управля-емой», «техничес-кая»), хотя строка помещалась
     целиком, — заголовок из-за этого читался как текст в газетной колонке.
     break-word срабатывает только при настоящем переполнении, то есть
     ровно в том случае, ради которого правило и стоит. */
  overflow-wrap: break-word;
}

/* Лид крупнее основного текста — это тезис услуги.

   Ширину задаем в пикселях, а не в ch: ch зависит от кегля, и прежние
   62ch лида (20px) с 68ch описания (16px) давали разную длину строки —
   текст обрывался заметно левее заголовка и «лесенкой» между собой.

   900px — с оглядкой на другие услуги: стили общие для всех девяти, и у
   четырех из них лид длиной 260–310 символов идет без дополнительного
   текста. Крупный кегль лида такую строку держит, но шире делать нельзя —
   она пойдет лентой. */
.itb-srv-intro__lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--text-primary);
  max-width: min(100%, 900px);
  margin-bottom: 18px;
}

/* Описание чуть уже лида: тот крупный и укладывается в пару строк, а это
   4–5 строк мелким кеглем. Шире 860px строка перевалила бы за 90 символов,
   и взгляд терял бы начало следующей. Правый край все равно уходит вправо,
   ближе к заголовку, но текст остается читаемым. */
.itb-srv-intro__text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: min(100%, 860px);
}

.itb-srv-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 3vw, 38px);
}

/* Направления: лента под лидом, по образцу строки экспертизы на главной
   (01-expertise.css) — моношрифт, caps, точки-разделители. Стили не
   переиспользуются классами: там лента отдельная секция со своим фоном,
   здесь она часть шапки. Общая только визуальная грамматика.

   Верхняя линия отбивает ленту от кнопок: без нее направления читаются
   как продолжение блока действий, а не как перечень охвата. */
.itb-srv-intro__scope {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--border-color);
  padding-top: clamp(18px, 2vw, 24px);
}

.itb-srv-intro__scope-label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--accent-light);
}

.itb-srv-intro__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  /* Промежуток между пунктами держит gap, а не паддинги: при переносе
     паддинг у первого элемента новой строки давал бы лишний отступ слева
     и строка не вставала бы в общую колонку. Зазор широкий — он один
     отделяет пункты друг от друга (разделителей нет, см. ниже). */
  gap: 10px 36px;
}

.itb-srv-intro__chip {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Разделителей-точек здесь нет намеренно. Лента переносится на вторую
   строку, а CSS не знает, какой пункт после переноса окажется первым:
   :first-child видит только первый в списке, поэтому точка неизбежно
   повисала бы в начале новой строки. Пункты набраны моноширинным в
   верхнем регистре и разделяются зазором — этого достаточно. */

/* ─── Светлые секции ───────────────────────────────────────────────────── */

/* Чередование темных и светлых секций, как на других страницах сайта
   (13-sol-showcase, 23-svc-catalog): светлая секция переопределяет токены
   в своем скоупе, а не красит элементы по одному.

   Что светлое: экраны с плотным текстом, который долго читают, — «когда
   нужна», «что разрабатываем», «технологии». Что темное: шкала сценариев
   и цикл работ, где живут синие акценты (на светлом фоне синий пришлось бы
   гасить, и градация ступеней шкалы развалилась бы).

   Порядок по странице: темная шапка → светлая (когда нужна) → светлая
   (что входит) → светлая (результат) → ТЕМНАЯ (шкала) → ТЕМНАЯ (цикл) →
   светлая (технологии) → ТЕМНАЯ (для старта) → светлая (FAQ) → темный CTA.

   «Для старта» темная намеренно: это единственная секция, где действие
   переходит к читателю, и смена плоскости отделяет ее от наших обещаний
   выше. Заодно она разбивает три светлых экрана подряд в конце страницы. */
.itb-srv-when,
.itb-srv-scope,
.itb-srv-out,
.itb-srv-stack,
.itb-srv-faq {
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-primary: #ffffff;
  --bg-card: #f6f8fb;
  --bg-card-hover: #eef2f7;
  --border-color: #e2e8f0;
  --border-card: #cbd3df;
  --border-tag: #cbd5e1;
  --accent-light: #3a58c0;

  background: #f2f4f8;
  color: #0f1b2d;
}

/* Соседние светлые секции разводим оттенком, иначе они сливаются в одно
   бесконечное полотно: «что разрабатываем» и FAQ — белые. */
.itb-srv-scope,
.itb-srv-faq {
  background: #ffffff;
}

/* Надзаголовок в светлых секциях: на темном он голубой, здесь — синий. */
.itb-srv-when .itb-section__eyebrow,
.itb-srv-scope .itb-section__eyebrow,
.itb-srv-out .itb-section__eyebrow,
.itb-srv-stack .itb-section__eyebrow,
.itb-srv-faq .itb-section__eyebrow,
.itb-srv-hub .itb-section__eyebrow,
.itb-srv-cases .itb-section__eyebrow {
  color: #2233d6;
}

/* ─── Экран 2. Когда нужна ─────────────────────────────────────────────── */

.itb-srv-when__header { margin-bottom: clamp(32px, 4vw, 52px); }

/* Пары «ситуация → что делаем». Разделители-границы вместо рамок карточек:
   читается как таблица соответствий, а не как плитка (анти-референс). */
.itb-srv-when__list {
  margin: 0;
  border-top: 1px solid var(--border-card);
}

/* Колонки равные, а не 0.85:1.15 как раньше: прежние пропорции отдавали
   ответу больше места, чем боли, и работали против акцента. */
.itb-srv-when__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px clamp(32px, 5vw, 72px);
  padding: clamp(30px, 3.6vw, 46px) 0;
  border-bottom: 1px solid var(--border-card);
  /* По центру, а не по верху: боль занимает одну-две строки, ответ — три-четыре,
     и при выравнивании по верху короткий заголовок «висел» над длинным текстом.
     Центрирование связывает пару в один ряд независимо от высоты половин. */
  align-items: center;
}

/* Боль крупная: контраст с ответом ~1.75×, заметно выше минимальных 1.25.
   Это единственное место на странице, где текст в теле секции конкурирует
   по весу с H2 — сюда и должен падать взгляд при сканировании. */
.itb-srv-when__situation {
  font-family: var(--font-heading);
  font-weight: 700;
  /* Нижняя граница 24px, а не 21: на планшете контраст с ответом (15.5px)
     проседал до 1.39× и боли снова начинали сливаться с текстом. */
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.16;
  letter-spacing: -0.8px;
  color: var(--text-primary);
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Ответ приглушен и уже по мере: он раскрытие, а не заголовок. */
.itb-srv-when__answer {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 52ch;
}

/* ─── Экран 3. Что разрабатываем ───────────────────────────────────────── */

.itb-srv-scope__header { margin-bottom: clamp(32px, 4vw, 52px); }

.itb-srv-scope__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-card);
  border: 1px solid var(--border-card);
}

/* Четыре клетки (три направления + замыкающая) — квадрат 2×2 вместо
   строки из трех и растянутой полосы под ней: строки равны по высоте,
   ни одна ячейка не тянется во всю ширину. Ставится из шаблона. */
.itb-srv-scope__grid--quad {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Ячейки без собственных рамок: сетку рисуют зазоры (gap на фоне-границе).
   Меньше линий, чем у набора карточек, — плотнее и спокойнее. */
.itb-srv-scope__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(26px, 2.8vw, 38px);
  background: var(--bg-primary);
  transition: background 0.2s ease;
}
.itb-srv-scope__item:hover { background: var(--bg-card); }

/* Номер задает точку входа в ячейку: без него сетка равных прямоугольников
   читается как одно серое поле, и глазу негде остановиться. Приглушен до
   размера метки — это ориентир, а не содержание. */
.itb-srv-scope__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--text-muted);
}

/* Ведущая ячейка и замыкающая темная: номер на своем фоне. */
.itb-srv-scope__item--lead .itb-srv-scope__num { color: var(--accent-light); }

/* На «Внедрении AI-разработки» блок «Оценка эффекта» без нумерации —
   по правкам страницы (номера в этой сетке не нужны). Точечно по postid. */
.postid-185 .itb-srv-scope__num { display: none; }

/* Ведущее направление (ЭТП): двойная ширина и другой фон. Оно единственное
   с продолжением — отдельной услугой, поэтому и получает вес. */
.itb-srv-scope__item--lead {
  grid-column: span 2;
  background: var(--bg-card);
}
.itb-srv-scope__item--lead:hover { background: var(--bg-card-hover); }

.itb-srv-scope__item--lead .itb-srv-scope__title {
  font-size: clamp(26px, 2.9vw, 38px);
  letter-spacing: -1px;
}

/* Заголовок направления заметно крупнее описания (контраст ~1.5×): раньше
   19px против 15px читались как один кегль, и вся сетка выглядела ровным
   текстом без входных точек. Название направления — то, что сканируют;
   описание читают только у того, что зацепило. */
.itb-srv-scope__title {
  font-family: var(--font-heading);
  font-weight: 700;
  /* Нижняя граница 21px: при 19px контраст с описанием падал до 1.27×
     и сетка снова читалась ровным полем без входных точек. */
  font-size: clamp(21px, 2vw, 23px);
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.itb-srv-scope__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 46ch;
}

/* У ведущей ячейки описание идет в две колонки: при двойной ширине строка
   в 46ch оставляет справа пустоту, а растянутая на всю ширину строка
   выходит за предел читаемой меры. */
.itb-srv-scope__item--lead .itb-srv-scope__desc {
  max-width: none;
  columns: 2;
  column-gap: clamp(24px, 3vw, 44px);
}

/* Замыкающая ячейка: забирает остаток сетки после ведущего направления
   (span 2), поэтому дыры справа внизу не остается. Темная, а не синяя:
   синий на странице уже занят шкалой сценариев и врезкой AI, третье
   акцентное пятно сломало бы правило ≤10%. */
.itb-srv-scope__outro {
  /* Ширина = остаток последней строки, считает шаблон (см. scope.php).
     Фиксированный span оставлял пустую клетку, и сквозь нее серым
     просвечивал фон-разделитель сетки. */
  grid-column: span var(--span, 2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(24px, 2.6vw, 34px);
  background: #0e1a2c;
  color: #fff;
}

.itb-srv-scope__outro-logo {
  height: 30px;
  width: auto;
  margin-bottom: 6px;
  /* Логотип светлый, фон темный — подложка не нужна. */
}

.itb-srv-scope__outro-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: #fff;
  text-wrap: balance;
}

.itb-srv-scope__outro-desc {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 52ch;
}

.itb-srv-scope__outro-cta {
  margin-top: auto;
  padding: 8px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  transition: gap 0.2s ease;
}
.itb-srv-scope__outro-cta:hover { gap: 14px; }
.itb-srv-scope__outro-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.itb-srv-scope__link {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-light);
  text-decoration: none;
  transition: color 0.2s ease;
}
.itb-srv-scope__link:hover { color: var(--accent); }
.itb-srv-scope__link-arrow { transition: transform 0.2s ease; }
.itb-srv-scope__link:hover .itb-srv-scope__link-arrow { transform: translateX(4px); }

.itb-srv-scope__intro {
  margin-top: 16px;
  max-width: 78ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Группы направлений («DevOps» / «Поддержка»). Метка набрана моношрифтом:
   это классификатор блока, а не заголовок предложения. Между группами
   воздух, а не линия — деление и так читается по сетке. */
.itb-srv-scope__group {
  margin: clamp(38px, 4vw, 56px) 0 clamp(16px, 1.8vw, 22px);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #2233d6;
}
/* Первая группа идет сразу за шапкой секции — ее отступ уже задан header'ом. */
.itb-srv-scope__header + .itb-srv-scope__group { margin-top: 0; }

/* ─── Экран 4. Сценарии реализации (шкала) ─────────────────────────────── */

.itb-srv-scen { background: var(--bg-secondary); }

.itb-srv-scen__header { margin-bottom: clamp(24px, 3vw, 34px); }

.itb-srv-scen__intro {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 70ch;
}

/* Подпись шкалы: объясняет, что порядок ступеней несет смысл. */
.itb-srv-scen__axis {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.itb-srv-scen__axis-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, var(--border-color), var(--accent));
}

/* Шкала: 4 ступени по нарастанию кастомизации. Насыщенность фона растет
   через --step (0…1), который проставляет PHP. Последняя ступень — синяя. */
.itb-srv-scen__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.itb-srv-scen__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-card);
  /* Фон интерполируется от поверхности карточки к синему по шкале. */
  background: color-mix(in oklch, var(--accent) calc(var(--step, 0) * 100%), var(--bg-card));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-srv-scen__item:hover { transform: translateY(-3px); }

/* Текст на последних ступенях ложится на синий — осветляем по той же шкале. */
.itb-srv-scen__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: color-mix(in oklch, #fff calc(var(--step, 0) * 100%), var(--text-muted));
}

.itb-srv-scen__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: color-mix(in oklch, #fff calc(var(--step, 0) * 100%), var(--text-primary));
  text-wrap: balance;
  overflow-wrap: break-word;
}

.itb-srv-scen__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: color-mix(in oklch, rgba(255, 255, 255, 0.88) calc(var(--step, 0) * 100%), var(--text-secondary));
}

/* Состав сценария: короткий список под описанием. Назывные пункты, не
   предложения, — их сравнивают между карточками по вертикали, поэтому
   набраны плотнее корпуса и без точек в конце.

   Маркер — точка на ::before, а не list-style: браузерный маркер нельзя
   покрасить отдельно от текста, а здесь и текст, и маркер обязаны ехать
   по шкале --step вместе с фоном карточки (иначе на синей ступени
   маркеры пропадут). */
.itb-srv-scen__points {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.itb-srv-scen__point {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.45;
  color: color-mix(in oklch, rgba(255, 255, 255, 0.82) calc(var(--step, 0) * 100%), var(--text-secondary));
}

/* Маркер повторяет цвет текста пункта, а не акцент. Синяя точка ехала бы
   по шкале ровно так же, как фон карточки (он тоже интерполируется к
   --accent), и на каждой ступени совпадала бы с подложкой: замер давал
   контраст 1.0–1.04, то есть маркера не видно вовсе. currentColor
   привязывает точку к тексту, который по шкале осветляется. */
.itb-srv-scen__point::before {
  content: "";
  position: absolute;
  left: 0;
  /* Половина line-height минус половина точки — маркер встает по центру
     первой строки и не съезжает, когда пункт переносится на вторую. */
  top: calc(0.725em - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

/* Равнозначные форматы подключения: без нумерации и без градации фона.
   Автозаполнение вместо жестких 4 колонок — форматов может быть 3 или 5,
   и ряд не должен рассыпаться на «3 + 1 растянутый». */
.itb-srv-scen__list--flat {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.itb-srv-scen__list--flat .itb-srv-scen__item { background: var(--bg-card); }

/* Примечание под карточками: условия, которые фиксируются в договоре.
   Служебная приписка, поэтому мельче корпуса и приглушена. */
.itb-srv-scen__note {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  max-width: 78ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.itb-srv-scen__actions { margin-top: clamp(28px, 3vw, 40px); }

/* ─── Экран 5. Полный цикл ─────────────────────────────────────────────── */

.itb-srv-cycle__header { margin-bottom: clamp(32px, 4vw, 52px); }

/* Схема этапов — тот же компонент, что «Как мы работаем» на главной
   (08-process.css): ряд номеров с пунктирной линией, описание в поповере.
   Базовые размеры и механика берутся оттуда, здесь только перекраска под
   темный фон секции: на главной компонент лежит на теплом светлом.

   Восемь колонок главной заменены на auto-fit: этапов в цикле шесть,
   в жесткой сетке из восьми последние две ячейки оставались бы пустыми,
   а линия уходила бы в никуда. */
.itb-srv-cycle .itb-steps {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(28px, 3vw, 40px) 16px;
}

/* Пунктирная линия на темном: светлее фона, но тише номеров. */
.itb-srv-cycle .itb-steps__item:not(:last-child)::before {
  border-top-color: rgba(255, 255, 255, 0.18);
}

/* Круг с номером: на темном фон непрозрачный (перекрывает конец линии),
   поэтому берем цвет самой секции, а не белый как на главной. */
.itb-srv-cycle .itb-steps__num {
  background: var(--bg-secondary);
  border-color: rgba(120, 145, 255, 0.45);
  color: #c3ccff;
}
.itb-srv-cycle .itb-steps__btn:not(:disabled):hover .itb-steps__num {
  box-shadow: 0 12px 24px -14px rgba(91, 123, 255, 0.6);
}
/* Активный этап — синяя заливка, как на главной. */
.itb-srv-cycle .itb-steps__btn.is-active .itb-steps__num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.itb-srv-cycle .itb-steps__btn:focus-visible {
  outline-color: #7d97ff;
}

.itb-srv-cycle .itb-steps__text {
  color: rgba(255, 255, 255, 0.72);
}
.itb-srv-cycle .itb-steps__btn:not(:disabled):hover .itb-steps__text,
.itb-srv-cycle .itb-steps__btn.is-active .itb-steps__text {
  color: #fff;
}

/* Поповер оставляем светлым: всплывающая карточка поверх темной секции
   читается лучше как отдельный слой, а не как ее продолжение. */

/* Врезка про AI: относится ко всему циклу, поэтому идет под схемой во всю
   ширину. Второе (и последнее) место синего на странице. */
.itb-srv-cycle__note {
  margin-top: clamp(32px, 4vw, 52px);
  position: relative;
  overflow: hidden; /* клеймо выходит за угол и обрезается по скруглению */
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: var(--radius-md);
  background: var(--accent-bg);
  border: 1px solid var(--accent-bg-strong);
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 8px clamp(24px, 3vw, 44px);
  align-items: baseline;
}

/* Клеймо «AI» водяным знаком в правом нижнем углу — тот же прием, что
   у itb-bt-pricing__step-stamp и itb-pp-pains__stamp: крупная форма на
   низкой непрозрачности, под контентом. Буквы вместо пиктограммы: врезка
   про AI в цикле, и клеймо называет предмет прямо.

   Непрозрачность 0.09 — врезка и так синяя (одно из двух акцентных пятен
   страницы), знак должен читаться фактурой, а не третьим слоем цвета. */
.itb-srv-cycle__note-stamp {
  position: absolute;
  right: -0.06em;
  bottom: -0.3em;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(96px, 13vw, 168px);
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--accent-light);
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
}

/* Контент над клеймом. */
.itb-srv-cycle__note-kicker,
.itb-srv-cycle__note-desc { position: relative; z-index: 1; }

.itb-srv-cycle__note-kicker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-light);
  white-space: nowrap;
}

.itb-srv-cycle__note-desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 78ch;
}

/* Форматы взаимодействия: строка под схемой, без раскрытия (подробности —
   в секции «Форматы» на витрине /services/). */
.itb-srv-cycle__formats {
  margin-top: clamp(24px, 2.6vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 20px;
}

.itb-srv-cycle__formats-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.itb-srv-cycle__formats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.itb-srv-cycle__format {
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-tag);
  font-size: 14px;
  color: var(--text-secondary);
}

/* ─── Экран 6. Технологии ──────────────────────────────────────────────── */

.itb-srv-stack__header { margin-bottom: clamp(24px, 3vw, 36px); }

.itb-srv-stack__intro {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 74ch;
}

.itb-srv-stack__list { border-top: 1px solid var(--border-card); }

.itb-srv-stack__item { border-bottom: 1px solid var(--border-card); }

/* Название слева, превью прижато вправо (margin-left:auto), стрелка последняя.
   space-between здесь не годится: элементов три, и превью уехало бы в центр. */
.itb-srv-stack__summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  transition: padding-inline 0.2s ease;
}
.itb-srv-stack__summary::-webkit-details-marker { display: none; }
.itb-srv-stack__summary:hover { padding-inline: 10px 4px; }
.itb-srv-stack__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Категория моно-шрифтом: это метка-классификатор, не заголовок предложения. */
.itb-srv-stack__name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* margin-left:auto — на случай категории без превью: стрелка все равно
   должна стоять у правого края, а не липнуть к названию. */
.itb-srv-stack__toggle {
  flex: none;
  margin-left: auto;
  position: relative;
  width: 13px;
  height: 13px;
}

/* Когда превью есть, оно уже отобрало свободное место — стрелка идет следом. */
.itb-srv-stack__preview + .itb-srv-stack__toggle { margin-left: 0; }
.itb-srv-stack__toggle::before,
.itb-srv-stack__toggle::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: var(--text-muted);
  transition: transform 0.25s ease;
}
.itb-srv-stack__toggle::after { transform: rotate(90deg); }
.itb-srv-stack__item[open] .itb-srv-stack__toggle::after { transform: rotate(0deg); }

/* Превью в свернутой строке: 2 технологии + счетчик остальных. Прижато
   вправо, к стрелке, чтобы не спорить с названием категории слева. */
.itb-srv-stack__preview {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}

.itb-srv-stack__preview-rest {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.75;
}

/* Раскрытая категория гаснет превью: то же содержимое ниже чипами. */
.itb-srv-stack__item[open] .itb-srv-stack__preview { display: none; }

.itb-srv-stack__reveal { padding: 0 4px 20px; }

/* Чипы технологий: перечисление, а не сетка карточек. Каждая метка —
   отдельная цель для глаза, поэтому строку через запятую заменили на них. */
.itb-srv-stack__tech {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.itb-srv-stack__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-tag);
  background: var(--bg-primary);
  font-size: 14px;
  line-height: 1.2;
  color: var(--text-secondary);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.itb-srv-stack__chip:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

/* Логотип есть не у всех технологий (лицензии, да и «защищенные
   дата-центры» логотипа не имеют). Метка без него — просто текст, поэтому
   слева паддинг меньше: иначе чипы с логотипом и без визуально разъезжаются. */
.itb-srv-stack__chip--logo { padding-left: 10px; }

.itb-srv-stack__logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: none;
}

.itb-srv-stack__desc {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 90ch;
}

/* ─── Результат для заказчика ──────────────────────────────────────────── */

/* Сплошной текст вместо карточек: секция про обязательство, а не про фичи.
   Единственная секция страницы, где абзацы идут подряд, — поэтому мера
   строки задана жестко (65ch), иначе на широком экране текст расползается
   и его перестают читать. */
.itb-srv-out__header { margin-bottom: clamp(28px, 3.4vw, 44px); }

/* Колонки центрируются по вертикали: схема справа выше текста, и при
   выравнивании по верху текст повисал в верхней трети, оставляя под собой
   пустоту в половину высоты схемы. */
.itb-srv-out__body--split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.itb-srv-out__text { max-width: 65ch; }

/* Без сплита текст остается одной колонкой: разбивка трех почти равных
   абзацев на колонки давала рваную лесенку вместо ровного блока. */
.itb-srv-out__body:not(.itb-srv-out__body--split) .itb-srv-out__text {
  max-width: 68ch;
}

/* ─── Схема «было / стало» ─────────────────────────────────────────────── */

/* Не декорация: схема рисует тезис абзацев слева (несколько подрядчиков →
   один контур). Поэтому она содержательная графика с title/desc, а не
   картинка-заполнитель — generic-иллюстрации PRODUCT.md запрещает. */
/* Выравнивание задает сетка (align-items: center) — здесь оно не дублируется. */
.itb-srv-out__scheme {
  margin: 0;
}

.itb-srv-out__scheme svg {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  /* Тонкие линии схемы не должны спорить с корпусом текста слева. */
  color: var(--text-secondary);
}

/* Метки «БЫЛО» / «СТАЛО»: моно, как все классификаторы на странице. */
.itb-srv-out__scheme-kicker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.6px;
  fill: var(--text-muted);
}

/* Верхняя половина приглушена целиком: состояние «до» не должно выглядеть
   таким же добротным, как контур ниже. Разница в весе делает половину
   работы схемы — глаз доходит до низа и там останавливается. */
.itb-srv-out__scheme-past { opacity: 0.62; }

.itb-srv-out__scheme-box {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.5;
}

/* Связи «до» штриховые: договор есть, но линия не сплошная. */
.itb-srv-out__scheme-link {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.55;
}
/* Ветви к подрядчикам обрываются, не доходя до узла: разрыв ответственности
   показан графикой, а не подписью под схемой. */
.itb-srv-out__scheme-link--torn {
  stroke-dasharray: 3 5;
  opacity: 0.4;
}
/* Единственная связь «после» — сплошная и плотнее остальных линий. */
.itb-srv-out__scheme-link--solid {
  stroke: var(--accent-light);
  stroke-width: 1.5;
  stroke-dasharray: none;
  opacity: 1;
}

/* Узлы: вверху полые (соединение, которое не держит), внизу залитый. */
.itb-srv-out__scheme-node {
  fill: var(--bg-primary);
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0.55;
}
.itb-srv-out__scheme-node--filled {
  fill: var(--accent);
  stroke: var(--accent);
  opacity: 1;
}

/* Стрелка перехода между состояниями. */
.itb-srv-out__scheme-turn,
.itb-srv-out__scheme-turn-head {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.4;
}
.itb-srv-out__scheme-turn-head { stroke-linejoin: round; }

.itb-srv-out__scheme-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  fill: var(--text-primary);
}

.itb-srv-out__scheme-sub {
  font-family: var(--font-heading);
  font-size: 11.5px;
  fill: var(--text-secondary);
}

/* Контур — единственное акцентное пятно секции: к нему и сводится взгляд
   после приглушенной верхней половины. Толще всех линий схемы. */
.itb-srv-out__scheme-contour {
  fill: var(--accent-bg);
  stroke: var(--accent-light);
  stroke-width: 1.5;
}

.itb-srv-out__scheme-contour-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.2px;
  fill: var(--accent-light);
}

.itb-srv-out__scheme-contour-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  fill: var(--accent-light);
  opacity: 0.75;
}

/* Линия между зонами внутри контура: сплошная, в отличие от штриховых
   вверху. Ответственность внутри контура не прерывается. */
.itb-srv-out__scheme-inner {
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 1;
  opacity: 0.45;
}

/* Зоны внутри контура: те же три, что вверху были порознь. */
.itb-srv-out__scheme-zone {
  fill: var(--bg-primary);
  stroke: var(--accent-bg-strong);
  stroke-width: 1;
}

.itb-srv-out__scheme-zone-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10.5px;
  fill: var(--text-primary);
}

/* ─── Дерево проектного контекста ──────────────────────────────────────── */

/* Не иллюстрация «документов», а сам артефакт: в SDD спецификация лежит в
   репозитории рядом с кодом и остается там после ухода подрядчика. Поэтому
   моноширинный шрифт и пути с расширениями — язык репозитория. Generic-
   иллюстрации в фирменном цвете PRODUCT.md запрещает, и правильно: рисунок
   папки сообщал бы меньше, чем настоящая структура.

   Карточка приподнята шагом светлоты (--bg-card), а не тенью, как требует
   DESIGN.md. */
.itb-srv-out__tree {
  margin: 0;
  padding: clamp(20px, 2.4vw, 28px) clamp(18px, 2.2vw, 26px);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  align-self: start;
}

/* Шапка карточки — как заголовок панели в IDE: сначала метка подхода,
   под ней его тезис. В строку они не встают: метка набрана моно в разрядку,
   а пояснение — обычное предложение, и по базовой линии рядом они читались
   бы как один сбитый заголовок. */
.itb-srv-out__tree-cap {
  display: grid;
  gap: 8px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

/* Метка синяя: это имя подхода, ради которого всю секцию читают. Второе
   и последнее акцентное пятно карточки — вместе с pilot/ ниже. */
.itb-srv-out__tree-cap-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  color: var(--accent-light);
}

.itb-srv-out__tree-cap-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.itb-srv-out__tree-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Отступ уровня и место под соединители. Строки узкие (1.75 от 13px) —
   дерево должно читаться как компактный блок, а не как разреженный список:
   плотность здесь и есть признак «настоящего» вывода. */
.itb-srv-out__tree-node {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding-left: calc(var(--lvl, 0) * 18px);
  line-height: 1.75;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}

/* Соединители рисуем псевдоэлементами, а не символами ├─ └─: символы
   зависят от метрик шрифта и на разных начертаниях расходятся с отступом,
   а линия в 1px всегда встает ровно по сетке уровня. */
.itb-srv-out__tree-node[data-lvl="1"]::before,
.itb-srv-out__tree-node[data-lvl="2"]::before {
  content: '';
  position: absolute;
  left: calc(var(--lvl, 0) * 18px - 11px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-tag);
}

/* У последнего потомка вертикаль обрывается на середине строки — так же,
   как в выводе `tree`: ветка закончилась, продолжения нет. */
.itb-srv-out__tree-node--last::before { bottom: auto; height: 0.875em; }

.itb-srv-out__tree-node[data-lvl="1"]::after,
.itb-srv-out__tree-node[data-lvl="2"]::after {
  content: '';
  position: absolute;
  left: calc(var(--lvl, 0) * 18px - 11px);
  top: 0.875em;
  width: 7px;
  height: 1px;
  background: var(--border-tag);
}

/* Папка и файл различаются весом и цветом, без иконок: в моноширинном
   наборе слэш на конце уже читается как папка, иконка была бы дублем. */
.itb-srv-out__tree-node--dir > .itb-srv-out__tree-name {
  color: var(--text-primary);
  font-weight: 700;
}

.itb-srv-out__tree-node--file > .itb-srv-out__tree-name {
  color: var(--text-secondary);
}

/* Единственное синее пятно секции — результаты пилота: то, что заказчик
   сделал сам, а ради этого и внедряют. Акцент держится в пределах строки,
   до 10% экрана из DESIGN.md далеко. */
.itb-srv-out__tree-node--mark > .itb-srv-out__tree-name {
  color: var(--accent-light);
}

.itb-srv-out__tree-node--mark::marker { content: none; }

/* Пояснения — не моно: это уже человеческая речь, а не путь. Отбиты
   вправо, чтобы колонка путей осталась ровной. */
.itb-srv-out__tree-note {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Единственный опорный пункт идет врезкой под текстом, а не колонкой сбоку:
   он сосед .itb-srv-out__text, поэтому просто отбивается сверху. */
.itb-srv-out__body--aside .itb-srv-out__points {
  margin-top: clamp(28px, 3vw, 40px);
  max-width: 68ch;
}

.itb-srv-out__para {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.itb-srv-out__para:last-child { margin-bottom: 0; }

/* Первый абзац несет тезис — крупнее и темнее остальных. */
.itb-srv-out__para--lead {
  font-size: clamp(17px, 1.7vw, 19.5px);
  line-height: 1.6;
  color: var(--text-primary);
}

/* Опорные пункты: столбец коротких итогов рядом с текстом. Разделители
   вместо рамок — тот же прием, что в «когда нужна». */
.itb-srv-out__points {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-card);
}

.itb-srv-out__point {
  padding: clamp(16px, 1.8vw, 22px) 0;
  border-bottom: 1px solid var(--border-card);
}

.itb-srv-out__point-title {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}

.itb-srv-out__point-desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ─── Вариант «сетка» ──────────────────────────────────────────────────── */

/* Раскладка как в «что разрабатываем» (itb-srv-scope выше): подводка на всю
   ширину в шапке, пункты — ячейки сетки, разделенные зазорами на фоне-границе.
   Включается шаблоном, когда абзац один, а пунктов много (см. outcome.php).

   Ячейки равны между собой — в отличие от scope, где ведущее направление
   получает двойную ширину. Здесь пункты — грани одной экспертизы, выделять
   среди них главный нечего. */
.itb-srv-out__points--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-card);
  border: 1px solid var(--border-card);
  /* Рамку рисует сетка, поэтому линии списка не нужны. */
  border-top: 1px solid var(--border-card);
}

.itb-srv-out__points--grid .itb-srv-out__point {
  position: relative; /* якорь для логотипа в замыкающей ячейке */
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Замыкающая ячейка добирает остаток строки — ширину считает шаблон. */
  grid-column: span var(--span, 1);
  padding: clamp(26px, 2.8vw, 38px);
  background: var(--bg-primary);
  border-bottom: 0;
  transition: background 0.2s ease;
}
.itb-srv-out__points--grid .itb-srv-out__point:hover { background: var(--bg-card); }

/* Замыкающая ячейка — единственное выделенное пятно блока. Не «еще один
   пункт»: остальные говорят, что мы умеем, эта — что все это делает одна
   команда, поэтому она и подписана логотипом.

   Темная, не синяя, и цвет тот же (#0e1a2c), что у замыкающей ячейки
   в «что разрабатываем» (.itb-srv-scope__outro): две сетки на одной
   странице закрываются одинаково, иначе это читается как два разных
   приема. Синим ячейка стала бы третьим акцентным пятном страницы после
   шкалы сценариев и ядра схемы — правило ≤10% (DESIGN.md).

   Ширины в две клетки ей намеренно не дают (ее добирает предыдущая, см.
   outcome.php): растянутая на треть блока заливка спорит с текстом.

   Селектор с обоими классами: правило фона обычной ячейки выше тоже
   двухклассовое, и одиночный .--accent проигрывал бы ему по весу —
   ячейка оставалась бы светлой с белым же текстом.

   Ховер-подсветки нет (то же значение фона): ячейка никуда не ведет,
   в отличие от ячеек scope со ссылкой на услугу. */
.itb-srv-out__points--grid .itb-srv-out__point--accent,
.itb-srv-out__points--grid .itb-srv-out__point--accent:hover {
  background: #0e1a2c;
}

.itb-srv-out__point--accent .itb-srv-out__point-title { color: #fff; }
/* Место под логотип в нижнем углу: он вынут из потока, и без резерва
   последняя строка описания заезжала бы под знак. */
.itb-srv-out__point--accent .itb-srv-out__point-desc {
  color: rgba(255, 255, 255, 0.72);
  padding-bottom: 42px;
}

/* Тот же кегль, что у логотипа в замыкающей ячейке scope: обе закрывают
   сетку и должны выглядеть одним приемом.

   Логотип вынут из потока и прижат к нижнему углу ячейки. В потоке он
   отодвигал заголовок на 46px вниз, и в строке с обычными ячейками темная
   выбивалась: у соседей заголовок начинался у верхней кромки, у нее —
   заметно ниже. Здесь логотип не «еще один элемент содержания», а подпись
   под ячейкой, и место у нижнего угла соответствует этой роли.

   Ячейка уже position: relative не является — задаем явно (см. правило
   .itb-srv-out__points--grid .itb-srv-out__point ниже по файлу). */
.itb-srv-out__point-logo {
  position: absolute;
  right: clamp(26px, 2.8vw, 38px);
  bottom: clamp(26px, 2.8vw, 38px);
  height: 30px;
  width: auto;
  opacity: 0.9;
  pointer-events: none;
  /* Логотип светлый, ячейка темная — подложка не нужна. */
}

/* В ячейке заголовок крупнее, чем в узком столбике сплита: там он делил
   ширину с текстом слева, здесь у него своя клетка. */
.itb-srv-out__points--grid .itb-srv-out__point-title {
  margin: 0;
  font-size: clamp(19px, 1.8vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.4px;
}

/* Подводка под заголовком секции — тот же прием, что itb-srv-scope__intro. */
.itb-srv-out__intro {
  margin-top: 16px;
  max-width: 78ch;
  font-size: clamp(17px, 1.7vw, 19.5px);
  line-height: 1.6;
  color: var(--text-primary);
}

/* ─── Что необходимо для старта ────────────────────────────────────────── */

/* Темная секция: здесь работа переходит к читателю (см. коммент о порядке
   секций выше). Список плотный, без описаний — это чек-лист готовности
   перед встречей, а не очередное перечисление наших возможностей. */
.itb-srv-check { background: var(--bg-secondary); }

.itb-srv-check__header { margin-bottom: clamp(26px, 3vw, 38px); }

.itb-srv-check__intro {
  margin-top: 16px;
  max-width: 70ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.itb-srv-check__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--border-card);
  border: 1px solid var(--border-card);
}

.itb-srv-check__item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 26px);
  background: var(--bg-card);
}

/* Номер — счет позиций, а не порядок выполнения: пункты собирают
   параллельно. Поэтому он приглушен и не претендует на роль шага. */
.itb-srv-check__num {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--accent-light);
}

.itb-srv-check__text {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-primary);
}

/* Замыкающая врезка: что заказчик получит, выполнив список. Возвращает
   баланс после перечня требований. */
.itb-srv-check__outro {
  margin-top: clamp(22px, 2.6vw, 32px);
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.itb-srv-check__outro-text {
  margin: 0;
  max-width: 78ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ─── Экран 7. FAQ ─────────────────────────────────────────────────────── */

/* Разметка и размеры один в один с FAQ остальных страниц (см.
   31-bt-compliance-cta.css → «12. FAQ»): тот же плюс-минус вместо шеврона,
   те же отступы и кегли. FAQ должен выглядеть одинаково на всем сайте. */
.itb-srv-faq__header { margin-bottom: 40px; }
.itb-srv-faq__header .itb-section__eyebrow { margin-bottom: 18px; }

.itb-srv-faq__list { border-top: 1px solid var(--border-color); }

.itb-srv-faq__item { border-bottom: 1px solid var(--border-color); }

.itb-srv-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-primary);
}
.itb-srv-faq__question::-webkit-details-marker { display: none; }
.itb-srv-faq__question:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Плюс превращается в минус при раскрытии. */
.itb-srv-faq__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.itb-srv-faq__icon::before,
.itb-srv-faq__icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 0.2s, opacity 0.2s;
}
.itb-srv-faq__icon::before { left: 0; top: 7px; width: 16px; height: 2px; }
.itb-srv-faq__icon::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.itb-srv-faq__item[open] .itb-srv-faq__icon::after { opacity: 0; transform: scaleY(0); }

/* Верхний отступ отрицательный: подтягиваем ответ к своему вопросу, чтобы пара
   «вопрос+ответ» читалась плотнее, чем расстояние до соседнего вопроса. */
.itb-srv-faq__answer {
  padding: 0 4px 16px;
  margin-top: -2px;
  max-width: 72ch;
}
.itb-srv-faq__answer p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ─── Адаптив ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .itb-srv-scen__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Сетка этапов на auto-fit — перекладывается сама, брейкпоинт не нужен. */
  .itb-srv-scope__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Две колонки текста в ведущей ячейке требуют ширины: на планшете она
     уже не двойная относительно экрана, и колонки становятся узкими. */
  .itb-srv-scope__item--lead .itb-srv-scope__desc { columns: 1; }
  /* --span посчитан под сетку в три колонки: здесь их две, и замыкающая
     ячейка занимает всю строку. Квадрат 2×2 — исключение: он уже сверстан
     под две колонки, растягивать в нем нечего. */
  .itb-srv-scope__grid:not(.itb-srv-scope__grid--quad) .itb-srv-scope__outro {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  /* Россыпь убирается: в одну колонку она превращается в полосу картинок
     между лидом и кнопками и разрывает чтение. Это декорация — на узком
     экране она не нужна, содержание от этого не теряется. */
  .itb-srv-intro__split { display: block; }
  .itb-srv-intro__marks { display: none; }


  /* В одну колонку ответ идет сразу под болью, центрировать нечего. */
  .itb-srv-when__item { grid-template-columns: 1fr; gap: 12px; align-items: start; }

  /* Опорные пункты уходят под текст, а не жмутся в узкую колонку. */
  .itb-srv-out__body--split { grid-template-columns: 1fr; gap: 32px; }
  .itb-srv-out__text { max-width: none; }

  /* Дерево остается блоком в свою ширину: растянутое на всю колонку, оно
     отрывает пояснения от путей (margin-left: auto уводит их к дальнему
     краю) и перестает читаться как вывод `tree`. */
  .itb-srv-out__tree { max-width: 460px; }
}

@media (max-width: 640px) {
  .itb-srv-scen__list,
  .itb-srv-scope__grid,
  /* Квадрат 2×2 задан классом-модификатором — он специфичнее базового
     правила и без явного сброса пережил бы схлопывание в одну колонку. */
  .itb-srv-scope__grid--quad { grid-template-columns: 1fr; }

  /* На телефоне лента переносится в три-четыре рваные строки, и точки
     повисают на краях. Разворачиваем в столбик: разделители не нужны,
     каждый пункт и так на своей строке. */
  .itb-srv-intro__scope { flex-direction: column; gap: 12px; }
  .itb-srv-intro__chips { flex-direction: column; gap: 8px; }
  .itb-srv-intro__chip { padding: 0; }
  .itb-srv-intro__chip:not(:last-child)::after { display: none; }

  /* Ведущая и замыкающая ячейки перестают быть широкими — span 2 в одной
     колонке ломает сетку. */
  .itb-srv-scope__item--lead,
  .itb-srv-scope__outro { grid-column: span 1; }

  /* То же для сетки «почему»: в одну колонку, замыкающая ячейка перестает
     добирать остаток строки (остатка нет). */
  .itb-srv-out__points--grid { grid-template-columns: 1fr; }
  .itb-srv-out__points--grid .itb-srv-out__point { grid-column: span 1; }

  /* Врезка в столбик: метка над текстом. */
  .itb-srv-cycle__note { grid-template-columns: 1fr; }

  /* Превью технологий на узком экране не помещается и обрезается на
     полуслове — убираем совсем, содержимое все равно в один тап. */
  .itb-srv-stack__preview { display: none; }

  .itb-srv-intro__actions .btn { width: 100%; justify-content: center; }
}

/* ─── Уважение к отключенной анимации ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .itb-srv-scen__item,
  .itb-srv-stack__summary,
  .itb-srv-stack__toggle::before,
  .itb-srv-stack__toggle::after,
  .itb-srv-faq__icon::before,
  .itb-srv-faq__icon::after,
  .itb-srv-scope__link,
  .itb-srv-scope__link-arrow,
  .itb-srv-out__points--grid .itb-srv-out__point {
    transition: none;
  }
  .itb-srv-scen__item:hover { transform: none; }
}

/* css/sections/46-contact-widget.css */
/* Виджет связи — плавающая кнопка в правом нижнем углу.
   Разметка: template-parts/contact-widget.php, логика: js/contact-widget.js. */

.itb-cw {
    position: fixed;
    right: clamp(16px, 3vw, 32px);
    bottom: clamp(16px, 3vw, 32px);
    bottom: max(clamp(16px, 3vw, 32px), env(safe-area-inset-bottom));
    /* Выше хедера (50), ниже cookie-баннера (80) и мобильного меню (100):
       согласие на cookie должно перекрывать виджет, а не наоборот. */
    z-index: 70;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* ─── FAB ──────────────────────────────────────────────────────────────── */

.itb-cw__fab {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 20px rgba(8, 17, 33, .28);
    transition: background .2s ease, transform .2s ease;
}

.itb-cw__fab:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

.itb-cw__fab:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 3px;
}

.itb-cw__fab-icon {
    grid-area: 1 / 1;
    width: 26px;
    height: 26px;
    transition: opacity .2s ease, transform .2s ease;
}

/* Иконка «сообщение» ↔ крестик: обе лежат в одной ячейке грида. */
.itb-cw__fab-icon--close {
    opacity: 0;
    transform: rotate(-90deg);
}

.itb-cw.is-open .itb-cw__fab-icon--open {
    opacity: 0;
    transform: rotate(90deg);
}

.itb-cw.is-open .itb-cw__fab-icon--close {
    opacity: 1;
    transform: rotate(0);
}

/* Разовая пульсация: расходящееся кольцо, 3 цикла и стоп.
   Запускается из JS через класс, если виджет еще ни разу не открывали. */
.itb-cw__fab::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
}

.itb-cw__fab.is-pulsing::after {
    animation: itb-cw-pulse 1.8s ease-out 3;
}

@keyframes itb-cw-pulse {
    0%   { opacity: .55; box-shadow: 0 0 0 0 var(--accent); }
    70%  { opacity: 0;   box-shadow: 0 0 0 18px var(--accent); }
    100% { opacity: 0;   box-shadow: 0 0 0 18px var(--accent); }
}

/* ─── Меню каналов ─────────────────────────────────────────────────────── */

.itb-cw__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.itb-cw__menu[hidden] {
    display: none;
}

.itb-cw__item {
    position: relative;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-full);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(8, 17, 33, .22);
    text-decoration: none;

    /* Стаггер выезда: --cw-i задан инлайн в шаблоне (порядковый номер). */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, background .2s ease, border-color .2s ease;
}

.itb-cw.is-open .itb-cw__item {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--cw-i, 0) * 40ms);
}

.itb-cw__item:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-tag);
}

.itb-cw__item:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 3px;
}

.itb-cw__item-icon,
.itb-cw__item .itb-social__icon {
    width: 22px;
    height: 22px;
    color: var(--text-primary);
}

/* Подпись слева от кнопки — появляется по наведению/фокусу. */
.itb-cw__item-tip {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.itb-cw__item:hover .itb-cw__item-tip,
.itb-cw__item:focus-visible .itb-cw__item-tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ─── Поповер звонка ───────────────────────────────────────────────────── */

.itb-cw__popover {
    width: 320px;
    max-width: calc(100vw - 32px);
    padding: 18px;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: 0 12px 40px rgba(8, 17, 33, .32);

    opacity: 0;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease;
}

.itb-cw__popover[hidden] {
    display: none;
}

.itb-cw__popover.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.itb-cw__popover-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.itb-cw__popover-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

.itb-cw__popover-close,
.itb-cw__greeting-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color .18s ease, background .18s ease;
}

.itb-cw__popover-close:hover,
.itb-cw__greeting-close:hover {
    color: var(--text-primary);
    background: var(--surface-2);
}

.itb-cw__popover-close svg,
.itb-cw__greeting-close svg {
    width: 16px;
    height: 16px;
}

/* ─── Форма поповера ───────────────────────────────────────────────────── */

.itb-cw-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Honeypot: убран из потока, но не display:none — часть ботов такие поля пропускает. */
.itb-cw-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.itb-cw-form__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.itb-cw-form__label {
    font-size: 12px;
    color: var(--text-muted);
}

.itb-cw-form__field input,
.itb-cw-form__field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    transition: border-color .18s ease;
}

.itb-cw-form__field textarea {
    resize: vertical;
    min-height: 56px;
}

.itb-cw-form__field input::placeholder,
.itb-cw-form__field textarea::placeholder {
    color: var(--text-muted);
}

.itb-cw-form__field input:focus,
.itb-cw-form__field textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.itb-cw-form__submit {
    width: 100%;
}

.itb-cw-form__submit.is-loading {
    opacity: .6;
    pointer-events: none;
}

.itb-cw-form__submit:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Сетку и сам чекбокс дает общий компонент .itb-consent (css/sections/cta-form.css) —
   здесь только ужимаем кегль под узкий поповер. */
.itb-cw-form__consent {
    margin: 0;
}

.itb-cw-form__consent .itb-consent__text {
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted);
}

.itb-cw-form__consent a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.itb-cw-form__consent a:hover {
    color: var(--accent-light);
}

.itb-cw-form__result {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.itb-cw-form__result.is-error {
    color: #ff8f8f;
}

[data-theme="light"] .itb-cw-form__result.is-error {
    color: #b42318;
}

/* ─── Приветственная плашка ────────────────────────────────────────────── */

.itb-cw__greeting {
    position: relative;
    width: 320px;
    max-width: calc(100vw - 32px);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: 0 12px 40px rgba(8, 17, 33, .32);

    opacity: 0;
    transform: translateY(8px);
    transition: opacity .28s ease, transform .28s ease;
}

.itb-cw__greeting[hidden] {
    display: none;
}

.itb-cw__greeting.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.itb-cw__greeting-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}

.itb-cw__greeting-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.itb-cw__greeting-body:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: -2px;
}

.itb-cw__greeting-photo {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
    object-position: center top;
}

.itb-cw__greeting-content {
    display: block;
    min-width: 0;
    /* Место под крестик в правом верхнем углу. */
    padding-right: 22px;
}

.itb-cw__greeting-name {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

.itb-cw__greeting-text {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Абзацы приветствия — span-ы, а не <p>: блок лежит внутри <button>,
   куда по спецификации нельзя вкладывать блочные элементы. */
.itb-cw__greeting-p {
    display: block;
    margin: 0 0 8px;
}

.itb-cw__greeting-p:last-child {
    margin-bottom: 0;
}

/* ─── Мобильные ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .itb-cw {
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
    }

    .itb-cw__fab {
        width: 52px;
        height: 52px;
    }

    .itb-cw__popover,
    .itb-cw__greeting {
        width: calc(100vw - 24px);
    }

    /* Подписи каналов на узких экранах не помещаются рядом с кнопкой. */
    .itb-cw__item-tip {
        display: none;
    }
}

/* ─── Уважение к настройке «меньше движения» ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .itb-cw__fab,
    .itb-cw__fab-icon,
    .itb-cw__item,
    .itb-cw__item-tip,
    .itb-cw__popover,
    .itb-cw__greeting {
        transition: none;
    }

    .itb-cw.is-open .itb-cw__item {
        transition-delay: 0s;
    }

    .itb-cw__fab:hover {
        transform: none;
    }

    .itb-cw__fab.is-pulsing::after {
        animation: none;
    }
}

/* css/sections/47-srv-etp.css */
/* ==========================================================================
   Страница услуги: треки реализации, схема возможностей, доп. продукты, кейсы.
   Экраны 3–7 и 10 ТЗ «Разработка и развитие ЭТП».

   Все на токенах из variables.css — светлая тема получается автоматически.
   Глубина задается шагом светлоты, не тенью (DESIGN.md).
   ========================================================================== */

/* ── Треки реализации (экраны 3–5) ────────────────────────────────────────
   Слева тезис трека, справа состав работ. Левая колонка залипает: пока
   читатель пролистывает длинный список этапов, ответ на «что это и зачем»
   остается перед глазами. Чистый CSS, без скролл-джекинга.
   ------------------------------------------------------------------------ */
.itb-srv-tracks {
  padding: 0;
  background: var(--bg-primary);
}
.itb-srv-tracks__header {
  max-width: 760px;
  padding-top: 96px;
}

/* Нижний отступ отдан сетке (padding-bottom на __inner), а не треку:
   sticky ограничен родителем-сеткой, и внешний padding трека оказывался
   вне зоны залипания — последние 96px левая колонка уезжала вместе со
   страницей, хотя карточки справа еще не кончились.

   Само залипание при этом долго не работало вовсе по внешней причине:
   overflow-x: hidden стоял на html и делал скроллящим контейнером body
   вместо окна. Починено в css/base.css — см. коммент там. */
.itb-srv-track {
  padding: 96px 0 0;
  border-top: 1px solid var(--border-color);
}
.itb-srv-track:first-child { border-top: 0; }

/* Треки чередуются: темный → светлый → темный. Подряд идущие одинаковые
   полосы сливаются, и граница между сценариями пропадает.

   Темный — на ступень темнее основного фона. */
.itb-srv-track--dark { background: var(--bg-secondary); }

/* Светлый — не оттенок темного, а полная смена плоскости: переопределяем
   токены в скоупе секции, как это делают светлые секции в 45-srv-page.css,
   а не красим элементы по одному. Иначе текст и карточки внутри остались
   бы рассчитанными на темный фон. */
.itb-srv-track:not(.itb-srv-track--dark) {
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-primary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f6f8fb;
  --border-color: #e2e8f0;
  --border-card: #dbe2ea;
  --accent-light: #3a58c0;

  background: #f2f4f8;
  color: #0f1b2d;
}

/* Левая колонка шире правой: в ней теперь и тезис, и «что это дает», и
   кнопки — то есть само предложение. Справа перечень работ, он подробность
   к нему. Раньше пропорция была обратной (4/7), пока «что это дает» лежало
   справа.

   Не 1:1: правая колонка с карточками требует ширины под две строки
   заголовка, а левая при равных долях начинала растягивать абзацы
   на 90+ символов. */
.itb-srv-track__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 5vw, 80px);
  /* Нижний отступ трека — здесь, внутри зоны залипания (см. коммент выше). */
  padding-bottom: 96px;
  /* stretch, а не start: ячейка левой колонки должна занимать всю высоту
     ряда (ее задает колонка с карточками) — это и есть зона, внутри
     которой ходит sticky. При start ячейка была бы высотой с содержимое,
     и залипать стало бы негде. Сам блок внутри ячейки высоту не тянет:
     у него height: fit-content, см. ниже. */
  align-items: stretch;
}

/* Залипает все предложение трека: заголовок, абзацы, «что это дает»
   и кнопки. Пока справа листается состав работ, ответ на «что это и что
   я получу» остается перед глазами.

   position: sticky не прокручивает то, что выше границы окна: если колонка
   перерастает экран, ее низ с кнопками становится недостижим. На ноутбучном
   окне (713px доступной высоты) она как раз перерастала.

   Привязка к низу тут не помогает: align-self: end схлопывает трек
   прокрутки, и залипание отключается вовсе. Поэтому колонку ужимаем —
   на невысоких окнах у пунктов «что это дает» прячутся описания
   (см. медиазапрос по max-height ниже), и она снова влезает.

   Ниже 1000px по ширине залипание снимается совсем (брейкпоинт в конце
   файла): в одну колонку залипать нечему. */
.itb-srv-track__aside {
  position: sticky;
  /* Отступ от шапки сайта, чтобы залипший блок не подлезал под нее. */
  top: 96px;
  /* Ячейка растянута на всю высоту ряда (align-items: stretch выше), но
     липнуть должно содержимое, а не растянутый блок: у блока во всю высоту
     ряда просто нет запаса хода, и sticky не сработал бы. Высота по
     содержимому возвращает запас, равный длине перечня справа. */
  height: fit-content;
}

.itb-srv-track__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-light);
}
.itb-srv-track__title {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.8px;
  color: var(--text-primary);
}
.itb-srv-track__para {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Список «что это дает» — в левой колонке, между абзацами и кнопками:
   сначала что это, потом что вы получите, потом действие. */
.itb-srv-track__points-label {
  margin: 26px 0 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.itb-srv-track__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.itb-srv-track__point {
  position: relative;
  padding-left: 20px;
}
/* Точка-маркер вместо буллета: строка начинается с сути, а не с символа. */
.itb-srv-track__point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.itb-srv-track__point-title {
  display: block;
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--text-primary);
}
.itb-srv-track__point-desc {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.itb-srv-track__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* Невысокое окно (ноутбук): колонка с тезисом, тремя пунктами и кнопками
   перерастает экран, и кнопки становятся недостижимы — sticky не
   прокручивает то, что выше границы окна.

   Ужимаем саму колонку, а не переносим содержимое: описания у пунктов
   прячутся, остаются заголовки — «Управляемость ключевых процессов»,
   «Глубокая кастомизация», «Масштабирование». Обещание трека читается
   и так, а колонка теряет ~150px и снова влезает.

   Условие по высоте, а не по ширине: проблема именно в высоте окна.
   Нижняя граница по ширине — 1000px, ниже нее колонок уже нет и
   залипание снято совсем. */
@media (max-height: 820px) and (min-width: 1001px) {
  .itb-srv-track__point-desc { display: none; }
  .itb-srv-track__points { gap: 10px; }
  .itb-srv-track__points-label { margin-top: 20px; }
  .itb-srv-track__title { margin-bottom: 16px; }
  .itb-srv-track__actions { margin-top: 22px; }
}

/* Правая колонка — состав работ */
.itb-srv-track__scope-label {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.itb-srv-track__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Карточки крупные: перечень должен давать заметный ход прокрутки —
   иначе залипание слева не успевает проявиться.

   Номеров нет (см. коммент в tracks.php). Вместо цифры точку входа дает
   короткая акцентная черта над заголовком: она же реагирует на курсор,
   поэтому карточка читается активной без подкраски рамки по периметру. */
.itb-srv-track__step {
  position: relative;
  padding: 30px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  /* Сдвиг вместо тени: глубина шагом светлоты — правило DESIGN.md. */
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-srv-track__step:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-light);
  transform: translateX(4px);
}

.itb-srv-track__step-title {
  /* Заголовок отбит короткой чертой — прием с референса; метка-акцент
     без цветной боковой полосы вдоль всей карточки (запрет DESIGN.md). */
  position: relative;
  display: block;
  padding-top: 16px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}
/* Черта растет под курсором — единственная анимация карточки, кроме сдвига.
   Ширину анимируем у ::before: transform: scaleX здесь дал бы размытие
   на скруглении в 2px. */
.itb-srv-track__step-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-srv-track__step:hover .itb-srv-track__step-title::before { width: 44px; }
.itb-srv-track__step-desc {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Ссылка «Подробнее» в карточке сценария — переход к соответствующему треку. */
.itb-srv-scen__more {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--accent-light);
  transition: color 0.2s ease;
}
.itb-srv-scen__more:hover { color: var(--accent); }

/* ── Схема функциональных возможностей (экран 6) ──────────────────────────
   Сетка, линии и мобильная деградация наследуются от .itb-diagram
   (04-products.css). Здесь — только центр, узлы и поповер с модулями.

   Секция светлая: переопределяем токены в ее скоупе, как это делают
   светлые секции в 45-srv-page.css, а не красим элементы по одному —
   иначе унаследованные от .itb-diagram/.itb-node цвета остались бы
   рассчитанными на темный фон.
   ------------------------------------------------------------------------ */
.itb-srv-hub {
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-primary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f6f8fb;
  --border-color: #e2e8f0;
  --border-card: #dbe2ea;
  --border-tag: #cbd5e1;
  --accent-light: #3a58c0;

  background: #f2f4f8;
  color: #0f1b2d;
}
.itb-srv-hub__header { max-width: 760px; }
.itb-srv-hub__intro {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Диаграмма шире контейнера секции: схеме нужен разлет под линии. */
.itb-srv-hub .itb-container {
  max-width: 1600px;
  padding-inline: clamp(20px, 4vw, 48px);
}
/* Узлы здесь текстовые и компактнее продуктовых — центру нужно меньше места.
   Минимумы колонок задаем через minmax(0, …): с жесткими minmax(280px, …)
   три колонки с зазорами не влезали в контейнер около 1024px и правый
   столбец уезжал за край экрана. */
.itb-hub {
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 90px);
  align-items: start;
}
.itb-hub .itb-diagram__core { align-self: center; }
.itb-hub .itb-diagram__col { gap: 12px; }
/* Продуктовые узлы фиксированы по ширине (04-products.css); текстовым группам
   нужна вся колонка. Селектор повторяет структуру источника, чтобы правило
   не зависело от алфавитного порядка загрузки секций. */
.itb-hub .itb-diagram__col .itb-node { width: 100%; }

/* Центр схемы */
.itb-hub__core {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 36px 30px;
  text-align: center;
  /* Ядро контура — светлая карточка с акцентной рамкой (не синяя заливка):
     остается смысловым центром диаграммы, но не давит цветом. */
  background: var(--bg-card);
  border: 1.5px solid var(--accent);
  border-radius: 20px;
}
.itb-hub__core-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

/* Узел-группа: карточка, по клику открывающая поповер с составом модулей.

   position: relative — система координат для поповера: он выведен из потока,
   чтобы открытие не меняло высоту карточки и не двигало соседей. */
.itb-hub__node {
  position: relative;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.itb-hub__node--has-items:hover,
.itb-hub__node.is-open { border-color: var(--accent-light); }
/* Открытый узел приподнимаем над соседями, иначе его поповер уходил бы
   под следующую карточку в колонке. */
.itb-hub__node.is-open { z-index: 5; }

/* …а вместе с ним и всю колонку — над ядром.

   Колонка и ядро (.itb-diagram__col / .itb-diagram__core в 04-products.css)
   оба имеют z-index: 2 и создают свои контексты наложения. Значит z-index
   поповера действует только ВНУТРИ колонки: на верхнем уровне она равна
   ядру, а ядро идет позже в разметке — и накрывало открытый список.
   Поднимаем колонку, в которой сейчас открыт поповер. Класс вешает JS:
   :has() решил бы это без него, но здесь цена его отсутствия — список
   под ядром, поэтому не полагаемся на поддержку. */
.itb-hub .itb-diagram__col.has-open-pop { z-index: 7; }
.itb-hub__node .itb-node__body { min-width: 0; flex: 1; }
.itb-hub__node .itb-node__title { margin: 0; }
.itb-hub__node .itb-node__desc { display: block; }
/* У узлов без модулей нет строки-обертки с ее отступами — задаем их телу
   карточки, иначе заголовок лег бы вплотную к рамке. */
.itb-hub__node:not(.itb-hub__node--has-items) .itb-node__body { padding: 18px 20px; }

/* Строка карточки: заголовок слева, счетчик-кнопка справа. Заголовок лежит
   снаружи кнопки (h3 не вкладывается в button), поэтому раскладку держит
   эта обертка, а не сама кнопка. */
.itb-hub__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
}
.itb-hub__head { min-width: 0; }

/* Кнопка визуально — только счетчик, но кликабельна вся карточка:
   растянутый псевдоэлемент перекрывает ее целиком. Цель нажатия
   получается крупной, а заголовок остается вне button. */
.itb-hub__trigger {
  flex: 0 0 auto;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.itb-hub__trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
}
/* Фокус ведем по карточке, а не по счетчику: обводка вокруг одной цифры
   не показывала бы, что именно выбрано. */
.itb-hub__trigger:focus-visible { outline: none; }
.itb-hub__trigger:focus-visible::after {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

/* Счетчик модулей вместо порядкового номера: число здесь несет смысл
   (сколько модулей в группе), в отличие от нумерации групп — порядка
   между ними нет. */
.itb-hub__count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
/* Ховер ловим по карточке: кликабельна вся плашка, подсветка счетчика
   должна следовать за этим, а не за наведением на саму цифру. */
.itb-hub__node--has-items:hover .itb-hub__count,
.itb-hub__node.is-open .itb-hub__count { color: var(--accent-light); }

/* Стрелка: вниз в покое, вверх у открытого узла. */
.itb-hub__count-caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.itb-hub__node.is-open .itb-hub__count-caret { transform: translateY(1px) rotate(-135deg); }

/* Поповер с составом модулей.

   Разворачивается ВНУТРЬ схемы — к ядру, а не от него. Снаружи колонок
   свободного места нет: диаграмма занимает контейнер целиком, и поповер
   левой колонки уезжал за край экрана. Внутри же лежит зазор сетки
   (до 90px) плюс поле вокруг ядра — там он помещается и попутно
   показывает связь группы с площадкой.

   Ширину ограничиваем зазором до центра (--pop-w из JS), иначе длинный
   список перекрыл бы ядро. */
.itb-hub__pop {
  position: absolute;
  top: -10px;
  z-index: 6;
  width: var(--pop-w, 340px);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 22px;
  background: var(--bg-primary);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  /* Единственное место в секции, где тень уместна: поповер физически лежит
     над схемой, и его надо отделить от карточек под ним. */
  box-shadow: 0 18px 44px rgba(15, 27, 45, 0.16);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.itb-hub__pop.is-open {
  opacity: 1;
  transform: translateY(0);
}
/* Левая колонка раскрывается вправо (к ядру), правая — влево. */
.itb-diagram__col--left .itb-hub__pop { left: calc(100% + 14px); }
.itb-diagram__col--right .itb-hub__pop { right: calc(100% + 14px); }

.itb-hub__pop-title {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text-primary);
}

/* Список модулей: в DOM всегда, скрыт только атрибутом hidden на поповере
   (индексация + a11y). */
.itb-hub__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.itb-hub__item {
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.itb-hub__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-light);
}

/* Правая колонка диаграммы зеркалит содержимое (04-products.css) — для
   узлов со списком это ломало бы чтение, выравниваем обратно. */
.itb-diagram__col--right .itb-hub__node { flex-direction: row; text-align: left; }

/* ── Дополнительные продукты (экран 7) ────────────────────────────────── */
.itb-srv-addons { background: var(--bg-secondary); }
.itb-srv-addons__header { max-width: 760px; }
.itb-srv-addons__intro {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.itb-srv-addons__list {
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.itb-srv-addons__card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  padding: 24px 26px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
a.itb-srv-addons__card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-light);
  transform: translateY(-2px);
}
.itb-srv-addons__num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--accent-light);
}
.itb-srv-addons__body { min-width: 0; flex: 1; }
.itb-srv-addons__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  color: var(--text-primary);
}
.itb-srv-addons__desc {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.itb-srv-addons__arrow {
  flex: 0 0 auto;
  align-self: center;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  transition: color 0.2s ease, transform 0.2s ease;
}
a.itb-srv-addons__card:hover .itb-srv-addons__arrow {
  color: var(--accent-light);
  transform: translateX(3px);
}

/* ── Кейсы услуги (экран 10) ──────────────────────────────────────────────
   Секция светлая — как и лента логотипов внутри нее: плитки клиентов
   (.itb-clients__item в 06-clients.css) заданы жестко белыми, вне токенов,
   и на темном фоне выглядели инородными белыми плашками. На главной лента
   тоже стоит в светлой секции.

   Токены переопределяем в скоупе секции, как в .itb-srv-hub выше, а не
   красим элементы по одному: карточки .itb-card--case из 07-cases.css
   рассчитаны как раз на светлый фон и подхватывают его сами.
   ------------------------------------------------------------------------ */
.itb-srv-cases {
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-primary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f6f8fb;
  --border-color: #e2e8f0;
  --border-card: #dbe2ea;
  --border-tag: #cbd5e1;
  --accent-light: #3a58c0;

  background: #fbfbf9;
  color: #0f1b2d;

  /* Следом идет стек (.itb-srv-stack) — тоже светлый, оттенки близкие
     (#fbfbf9 против #f2f4f8), и без границы секции слились бы в одно
     полотно. Разводим линией, а не контрастным фоном: фон здесь задан
     под ленту логотипов. */
  border-bottom: 1px solid #e6e8ee;
}
.itb-srv-cases .itb-section__topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.itb-srv-cases__header { max-width: 760px; }

/* Карточки кейсов, ссылку «все кейсы» и плитки клиентов здесь не красим:
   в 07-cases.css и 06-clients.css они заданы жесткими светлыми цветами,
   а не токенами, и на светлом фоне работают как есть. Прежние правила
   переводили их на токены — это было нужно только темной секции. */

/* Лента логотипов идет на всю ширину — гасим отступ контейнера секции. */
.itb-srv-cases .itb-clients-marquee { margin-top: 56px; }

/* ── Адаптив ─────────────────────────────────────────────────────────────
   Схема складывается раньше треков (1100px против 1000px): у нее три
   колонки против двух, и около 1024px боковые узлы становятся слишком
   узкими для списков модулей.

   Правило повторяет .itb-diagram из 04-products.css явно: там оно
   объявлено одним классом и проигрывает по специфичности собственному
   .itb-hub выше — без этого на узком экране остались бы три колонки.
   ------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .itb-hub {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 640px;
    margin-inline: auto;
  }
  .itb-hub .itb-diagram__lines { display: none; }
  .itb-hub .itb-diagram__core { order: -1; }
  .itb-hub .itb-diagram__col--left,
  .itb-hub .itb-diagram__col--right { align-items: stretch; }

  /* Колонок больше нет — вбок разворачивать некуда: поповер встает под
     карточкой, во всю ее ширину. Селекторы двухклассовые, чтобы перебить
     right/left из основной раскладки. */
  .itb-hub .itb-diagram__col--left .itb-hub__pop,
  .itb-hub .itb-diagram__col--right .itb-hub__pop {
    right: auto;
    left: 0;
    top: calc(100% + 8px);
    width: 100%;
  }
}

/* ------------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .itb-srv-track { padding: 64px 0 0; }
  .itb-srv-tracks__header { padding-top: 64px; }
  .itb-srv-track__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 64px;
  }
  /* Залипание в один столбец бессмысленно: блок занял бы весь экран. */
  .itb-srv-track__aside { position: static; }

  .itb-hub__core { min-height: 0; padding: 26px 24px; }
  .itb-srv-cases .itb-section__topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .itb-srv-track { padding: 48px 0 0; }
  .itb-srv-track__inner { padding-bottom: 48px; }
  .itb-srv-tracks__header { padding-top: 48px; }
  .itb-srv-track__step { padding: 18px; }
  .itb-srv-track__actions .btn { width: 100%; text-align: center; }
  .itb-hub__node { padding: 16px 18px; }
  .itb-srv-addons__list { grid-template-columns: 1fr; }
  .itb-srv-addons__card { padding: 20px; }
}

/* ─── Уважение к отключенной анимации ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .itb-srv-track__step,
  .itb-srv-track__step-title::before {
    transition: none;
  }
  .itb-srv-track__step:hover { transform: none; }
}

/* css/sections/48-srv-roles-compare.css */
/* ==========================================================================
   Страница услуги: «Роли и компетенции» (лента с прокруткой) и
   «Сравнение форматов» (таблица). Обе секции опциональные — появляются
   только там, где заполнены соответствующие поля (аутстаффинг).

   Синий по-прежнему держится на двух местах страницы (см. шапку
   45-srv-page.css): здесь его нет вовсе, глубина набирается светлотой.
   ========================================================================== */

/* ─── Роли и компетенции ──────────────────────────────────────────────── */

/* Темная секция: идет после светлой «Когда нужна» и разбивает череду
   светлых экранов. Карточки различаются светлотой, а не рамками. */
.itb-srv-roles {
  background: var(--bg-secondary);
  overflow: hidden;
}

/* Слева — неподвижная колонка с заголовком, справа лента. Колонка уже
   половины: лента должна доминировать, она и есть содержание секции. */
.itb-srv-roles__layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* Прилипает, пока листается лента: заголовок и кнопка остаются на виду.
   top учитывает фиксированную шапку сайта. */
.itb-srv-roles__aside {
  position: sticky;
  top: 108px;
}

.itb-srv-roles__aside .itb-section__title { margin-bottom: 0; }

.itb-srv-roles__intro {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.itb-srv-roles__actions { margin-top: 28px; }

/* Стрелки под лентой, у ее левого края (где начинается первая карточка).
   JS снимает hidden, если ленту есть куда листать. */
.itb-srv-roles__pager {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 20px;
}
.itb-srv-roles__pager[hidden] { display: none; }

/* Светлая заливка: секция темная, прозрачные кружки на ней терялись.
   Белый круг с темной стрелкой бросается в глаза — сигнал «здесь листается». */
.itb-srv-roles__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--radius-full);
  background: #fff;
  color: #16181f;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.itb-srv-roles__arrow:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.55);
}
.itb-srv-roles__arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.itb-srv-roles__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.itb-srv-roles__arrow .material-symbols-outlined { font-size: 20px; }

/* Лента выходит за правый край контейнера: обрезанная карточка на краю —
   и есть сигнал «здесь листается». Слева край держим по контейнеру. */
.itb-srv-roles__carousel {
  min-width: 0;
  /* Тот же расчет, что у .itb-container в base.css: фактический отступ —
     clamp, а не сам токен (он равен 200px и увел бы ленту далеко за экран). */
  margin-right: calc(-1 * clamp(20px, 10vw, var(--container-pad)));
}

.itb-srv-roles__lane {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 4px 0 20px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* старый Edge */
  cursor: grab;
}
.itb-srv-roles__lane::-webkit-scrollbar { display: none; } /* WebKit/Blink */

/* Во время захвата мышью snap мешает — лента должна идти липко за курсором. */
.itb-srv-roles__lane.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.itb-srv-roles__lane.is-dragging a { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .itb-srv-roles__lane { scroll-behavior: auto; }
}

.itb-srv-roles__card {
  flex: none;
  width: clamp(260px, 30vw, 320px);
  display: flex;
  flex-direction: column;
  padding: 28px 26px 30px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  scroll-snap-align: start;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.itb-srv-roles__card:hover {
  background: var(--bg-card-hover);
  border-color: var(--text-muted);
}

/* Номер — якорь для глаза при сканировании ленты, не порядок важности. */
.itb-srv-roles__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.itb-srv-roles__title {
  margin: 14px 0 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.itb-srv-roles__desc {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Стек — метки, а не предложение: JetBrains Mono здесь уместен (DESIGN.md).
   Прижаты к низу карточки, чтобы у соседних карточек метки шли по одной линии
   при разной длине описания. */
.itb-srv-roles__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.itb-srv-roles__card > .itb-srv-roles__tech { margin-top: auto; padding-top: 18px; }

.itb-srv-roles__tech-item {
  padding: 5px 10px;
  border: 1px solid var(--border-tag, var(--border-card));
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.2px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* На узких экранах колонка-заголовок встает над лентой: sticky там только
   мешал бы, а лента и так листается свайпом. */
@media (max-width: 900px) {
  .itb-srv-roles__layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .itb-srv-roles__aside { position: static; }
  /* Стрелки прячем: свайп на тач-экранах очевиднее и точнее. */
  .itb-srv-roles__pager { display: none; }
  .itb-srv-roles__carousel {
    margin-inline: calc(-1 * clamp(20px, 10vw, var(--container-pad)));
    padding-inline: clamp(20px, 10vw, var(--container-pad));
  }
}

/* ─── Сравнение форматов ──────────────────────────────────────────────── */

/* Светлая секция с собственной палитрой — тот же прием, что у соседних
   светлых экранов услуги (см. 45-srv-page.css). */
.itb-srv-cmp {
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-primary: #ffffff;
  --bg-card: #ffffff;
  --border-color: #dbe2ec;
  --border-card: #dbe2ec;
  --accent-light: #3a58c0;
  /* Цвет краевых масок таблицы: обязан совпадать с фоном секции, иначе на
     краях всплывают полосы чужого цвета (та же грабля, что на Баланс.Торги). */
  --srv-cmp-mask: #f2f4f8;

  background: #f2f4f8;
  color: #0f1b2d;
}
.itb-srv-cmp .itb-section__eyebrow { color: #2233d6; }

.itb-srv-cmp__header {
  max-width: 820px;
  margin-bottom: 40px;
}
.itb-srv-cmp__header .itb-section__eyebrow { margin-bottom: 18px; }
.itb-srv-cmp__header .itb-section__subtitle { margin-top: 14px; }

/* Скролл-подсказка по краям: 4 слоя — две маски-«затычки» (local, гасят тень
   у самого края) и две тени (scroll, проявляются при прокрутке). Без JS. */
.itb-srv-cmp__scroll {
  overflow-x: auto;
  margin-bottom: 28px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(to right, var(--srv-cmp-mask, #f2f4f8), rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--srv-cmp-mask, #f2f4f8), rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.16), rgba(255, 255, 255, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.16), rgba(255, 255, 255, 0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Подсказка «листайте» — там, где таблица перестает помещаться (min-width
   таблицы + паддинги контейнера), а не на произвольном брейкпоинте. */
.itb-srv-cmp__hint { display: none; }
@media (max-width: 1024px) {
  .itb-srv-cmp__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -8px 0 20px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.3px;
    color: var(--text-muted);
  }
  .itb-srv-cmp__hint svg { flex: none; }
}

.itb-srv-cmp__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.itb-srv-cmp__table th,
.itb-srv-cmp__table td {
  text-align: left;
  padding: 16px 20px;
  vertical-align: top;
  line-height: 1.45;
}

/* Шапка — «якорь» таблицы: подложка, темный жирный текст, sticky по вертикали. */
.itb-srv-cmp__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--text-primary);
  background: var(--bg-card);
  border-bottom: 2px solid var(--text-primary);
}
/* Колонка A — наш формат. Единственное акцентное пятно секции. */
.itb-srv-cmp__table thead th.itb-srv-cmp__col-a {
  color: #fff;
  background: var(--accent);
  border-bottom-color: var(--accent);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.itb-srv-cmp__table tbody th {
  font-weight: 600;
  color: var(--text-primary);
}
.itb-srv-cmp__table tbody td { color: var(--text-secondary); }
.itb-srv-cmp__table tbody td.itb-srv-cmp__col-a {
  font-weight: 600;
  color: var(--text-primary);
  background: var(--accent-bg);
}
.itb-srv-cmp__table tbody tr { border-bottom: 1px solid var(--border-color); }
.itb-srv-cmp__table tbody tr:last-child { border-bottom: none; }

.itb-srv-cmp__outro {
  max-width: 900px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.itb-srv-cmp__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 24px;
}
.itb-srv-cmp__link {
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-light);
  text-decoration: none;
  transition: color 0.2s ease;
}
.itb-srv-cmp__link:hover { color: var(--accent); }
.itb-srv-cmp__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* css/sections/49-industries.css */
/* ==========================================================================
   Страница «Отрасли и клиенты» (templates/template-industries.php).

   Ритм страницы строится чередованием плоскостей, а не рамками:
   интро (#081121) → специфика (--alt) → типы клиентов (#081121) →
   сценарии (темная врезка) → клиенты (светлая лента) → опыт (--alt) →
   FAQ (#081121) → CTA.
   ========================================================================== */

/* ─── Экран 1. Интро-блок ──────────────────────────────────────────────── */

.itb-section--ind-intro {
  position: relative;
  /* Шапка абсолютная — секция сама держит под нее верхний отступ. */
  padding-block: 168px 88px;
  background: var(--bg-primary);
  overflow: hidden;
}

/* Тот же glow, что у hero остальных разделов, но приглушенный и уведенный
   вправо, за схему: интро компактный, полноэкранное свечение перевесило бы. */
.itb-section--ind-intro::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -6%;
  width: min(760px, 60vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
    var(--hero-glow-core) 0%,
    var(--hero-glow-mid) 42%,
    rgba(29, 72, 230, 0.04) 66%,
    transparent 73%);
  opacity: 0.55;
  filter: blur(12px);
  pointer-events: none;
}

.itb-ind-intro__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
}
.itb-ind-intro__inner--solo { grid-template-columns: minmax(0, 1fr); }

.itb-ind-intro__badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--accent-bg);
  border: 1px solid var(--border-tag);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  margin-bottom: 24px;
}

/* Display-кегль — один на страницу, здесь. Ниже только Headline. */
.itb-ind-intro__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(36px, 4.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -1.74px;
  color: var(--text-primary);
  margin: 0 0 28px;
}
.itb-ind-intro__title .accent {
  color: var(--accent-light);
  font-style: normal;
}

.itb-ind-intro__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 620px;
  margin-bottom: 36px;
}
.itb-ind-intro__lead p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.itb-ind-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.itb-ind-intro__actions .btn { height: 54px; }

/* ─── Экран 1. Схема платформы ─────────────────────────────────────────── */

/* Рисованный SVG (img/industries-scheme.svg), инлайнится в разметку.
   Цвета берутся из currentColor и переменных ниже, поэтому один файл
   обслуживает обе темы. */

.itb-ind-scheme {
  --itb-scheme-accent: var(--accent);

  display: flex;
  justify-content: center;
  color: var(--text-secondary);
}

.itb-ind-svg {
  width: 100%;
  max-width: 560px;
  height: auto;
}

/* Разметка чертежа: направляющие и линейки слоев. */
.itb-ind-svg__grid { opacity: 0.5; }

.itb-ind-svg__layer-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  fill: var(--text-muted);
}

.itb-ind-svg__layer-rule {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.32;
}

/* Потоки между слоями. */
.itb-ind-svg__flow { stroke-width: 1.25; }

/* Нисходящий поток окрашен акцентом: от ядра нагрузка идет в IT-контур. */
.itb-ind-svg__stop--near { stop-color: var(--accent); stop-opacity: 0.5; }
.itb-ind-svg__stop--far  { stop-color: var(--accent); stop-opacity: 0.1; }

/* Узлы отраслей и систем: плоскость на шаг светлее корпуса. */
.itb-ind-svg__nodes rect {
  fill: var(--bg-card);
  stroke: var(--border-card);
  stroke-width: 1;
}
.itb-ind-svg__nodes text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  text-anchor: middle;
  fill: var(--text-primary);
}

/* Нижний ряд — маркировка систем, поэтому моношрифт. */
.itb-ind-svg__nodes--system text {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  fill: var(--text-secondary);
}

/* ЕИС — единственный государственный контур в ряду, держит акцент. */
.itb-ind-svg__node--accent rect {
  fill: var(--accent-bg-strong);
  stroke: var(--itb-scheme-accent);
}
.itb-ind-svg__node--accent text { fill: var(--accent-light); }

/* Последний узел обрезан краем кадра: список интеграций не закрыт. */
.itb-ind-svg__node--cut { opacity: 0.42; }

/* Ядро — единственная крупная синяя плоскость схемы. Фактура внутри
   (сетка платы, направленный блик, диагональная грань) задана прямо в SVG
   белыми прозрачностями: она работает поверх любого значения акцента. */
.itb-ind-svg__core-plate {
  fill: var(--itb-scheme-accent);
  stroke: none;
}
.itb-ind-svg__core-kicker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.4px;
  fill: rgba(255, 255, 255, 0.7);
}
.itb-ind-svg__core-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.4px;
  fill: #ffffff;
}

/* Модули внутри ядра — на синем, поэтому обводка светлая. */
.itb-ind-svg__module rect {
  fill: rgba(255, 255, 255, 0.12);
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
}
.itb-ind-svg__module text {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-anchor: middle;
  fill: #ffffff;
}

/* Вынесенная плашка процедур: перекрывает край ядра — глубина наложением. */
.itb-ind-svg__aside rect {
  fill: var(--bg-card);
  stroke: var(--border-card);
  stroke-width: 1;
}
.itb-ind-svg__aside-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  fill: var(--text-primary);
}
.itb-ind-svg__aside-meta {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 1px;
  fill: var(--text-muted);
}

.itb-ind-svg__footnote {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 12px;
  fill: var(--text-muted);
}

/* ─── Экран 1. Отраслевые теги ─────────────────────────────────────────── */

.itb-ind-intro__tags {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: clamp(44px, 5vw, 64px) 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.itb-ind-intro__tag {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-full);
  padding: 11px 18px;
}

/* ─── Экран 2. Отраслевая специфика ────────────────────────────────────── */

/* Светлая секция в обеих темах: разбивает темный интро и темный экран 3,
   задает ритм страницы сменой плоскости. Токены переопределены в скоупе —
   тот же прием, что у светлых экранов страницы услуги (45-srv-page.css). */
.itb-section--ind-spec {
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-primary: #ffffff;
  --bg-card: #f6f8fb;
  --bg-card-hover: #eef2f7;
  --border-color: #e2e8f0;
  --border-card: #cbd3df;
  --border-tag: #cbd5e1;
  --accent-light: #3a58c0;

  background: #f2f4f8;
  color: #0f1b2d;
}

/* Шапка на полную ширину: 820px переехали на заголовок, иначе ограничение
   родителя резало и абзац под ним. */
.itb-ind-spec__header { margin-bottom: clamp(40px, 4.5vw, 60px); }
.itb-ind-spec__header .itb-section__title { max-width: 820px; }
.itb-ind-spec__header .itb-section__eyebrow {
  display: block;
  margin-bottom: 14px;
  color: #2233d6;
}
/* Абзац идет на полную ширину секции — встает вровень со списком под ним,
   а не обрывается на середине, оставляя справа пустую половину. */
.itb-ind-spec__desc {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Пары «узел → пояснение» разделителями, а не карточками: читается как
   таблица соответствий, а не как плитка (анти-референс SaaS-лендинга).
   Нумерации нет: это перечень аспектов, а не последовательность шагов —
   номер сообщал бы порядок, которого в содержании нет. */
.itb-ind-spec__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-color);
}

.itb-ind-spec__item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--border-color);
}

/* Заголовок аспекта держит вес блока: без номера слева он и есть точка
   входа в строку, поэтому кегль поднят до Headline-уровня. */
.itb-ind-spec__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.22;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}

.itb-ind-spec__text {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ─── Экран 3. Типы клиентов ───────────────────────────────────────────── */

.itb-ind-types__header { max-width: 760px; margin-bottom: clamp(36px, 4vw, 52px); }
.itb-ind-types__header .itb-section__eyebrow { display: block; margin-bottom: 14px; }
.itb-ind-types__header .itb-section__subtitle { margin: 18px 0 0; }

.itb-ind-types__list { border-top: 1px solid var(--border-color); }

.itb-ind-type { border-bottom: 1px solid var(--border-color); }

.itb-ind-type__head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
.itb-ind-type__head::-webkit-details-marker { display: none; }
.itb-ind-type__head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.itb-ind-type__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.itb-ind-type[open] .itb-ind-type__num,
.itb-ind-type__head:hover .itb-ind-type__num { color: var(--accent-light); }

.itb-ind-type__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.3;
  color: var(--text-primary);
}

/* Плюс превращается в минус при раскрытии. */
.itb-ind-type__icon {
  position: relative;
  width: 16px;
  height: 16px;
  justify-self: end;
}
.itb-ind-type__icon::before,
.itb-ind-type__icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.itb-ind-type__icon::before { left: 0; top: 7px; width: 16px; height: 2px; }
.itb-ind-type__icon::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.itb-ind-type[open] .itb-ind-type__icon::after { transform: scaleY(0); opacity: 0; }

.itb-ind-type__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-width: 900px;
  padding: 0 4px 28px 64px;
}

.itb-ind-type__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.itb-ind-type__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-light);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.itb-ind-type__link:hover { gap: 14px; color: var(--accent); }

/* ─── Экран 4. Сценарии обращения ──────────────────────────────────────── */

/* Светлая секция в обеих темах: экран выбора ситуации — место, где читатель
   принимает решение, и светлая плоскость выносит его вперед относительно
   темных соседей. Токены переопределены в скоупе. */
.itb-section--ind-scen {
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-primary: #ffffff;
  --bg-card: #f6f8fb;
  --bg-card-hover: #eef2f7;
  --border-color: #e2e8f0;
  --border-card: #cbd3df;
  --border-tag: #cbd5e1;
  --accent-light: #3a58c0;

  /* Белая, а не #f2f4f8: следом идет лента клиентов на #fbfbf9, два близких
     светлых фона слиплись бы в одно полотно. Карточки внутри — серые. */
  background: #ffffff;
  color: #0f1b2d;
}

.itb-ind-scen__header {
  max-width: 760px;
  margin-bottom: clamp(36px, 4vw, 52px);
}
.itb-section--ind-scen .itb-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #2233d6;
  margin-bottom: 18px;
}
.itb-section--ind-scen .itb-section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

.itb-ind-scen__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--text-primary);
}

.itb-ind-scen__desc {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.itb-ind-scen__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.itb-ind-scen__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-height: 250px;
  padding: 30px;
  text-align: left;
  font: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.itb-ind-scen__card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
}
/* По наведению знак чуть проявляется — единственная реакция, без сдвига. */
.itb-ind-scen__card:hover .itb-ind-scen__mark { opacity: 0.11; }
.itb-ind-scen__card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Водяной знак-клише в углу карточки: крупная контурная иконка, уведенная
   почти в фон. Прием взят у карточек продуктов (объект в правом нижнем
   углу), но здесь вместо PNG — глиф, чтобы не заводить ассеты под каждую
   ситуацию. Знак под текстом и не ловит курсор. */
.itb-ind-scen__mark {
  position: absolute;
  right: -14px;
  bottom: -18px;
  z-index: 0;
  font-size: 148px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  font-variation-settings: 'wght' 300;
}

/* Содержимое карточки — поверх знака. */
.itb-ind-scen__card > *:not(.itb-ind-scen__mark) {
  position: relative;
  z-index: 1;
}

.itb-ind-scen__card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--text-primary);
}

.itb-ind-scen__card-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* CTA прижата к низу карточки: у всех четырех она на одной линии. */
.itb-ind-scen__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-light);
}

.itb-ind-scen__arrow { transition: transform 0.2s ease; }
.itb-ind-scen__card:hover .itb-ind-scen__arrow { transform: translateX(5px); }

/* ─── Экран 5. Нам доверяют ────────────────────────────────────────────── */

/* Секция клиентов светлая в обеих темах (см. 06-clients.css). Там заголовок
   центрирован; здесь блок прижат к правому краю — лента логотипов ниже идет
   во всю ширину, и правое выравнивание уводит взгляд к ней, а не обратно
   к левому полю. */
.itb-ind-trust__header {
  max-width: 760px;
  margin-bottom: 48px;
  text-align: left;
}
.itb-ind-trust__header .itb-section__eyebrow {
  display: block;
  margin-bottom: 14px;
  color: #2233d6;
}
.itb-ind-trust__header .itb-section__subtitle { margin: 18px 0 0; }

/* ─── Экран 6. Опыт ────────────────────────────────────────────────────── */

.itb-ind-exp__header { max-width: 760px; margin-bottom: clamp(36px, 4vw, 52px); }
.itb-ind-exp__header .itb-section__eyebrow { display: block; margin-bottom: 14px; }
.itb-ind-exp__header .itb-section__subtitle { margin: 18px 0 0; }

/* Лента-карусель: скролл, snap и drag дает .itb-cards--tasks (02-tasks.css),
   страницы и пейджер — глобальный js/home.js по data-tasks-*. Здесь только
   ширина карточки (JS пишет ее в --tasks-card-w) и локальный gap. */
.itb-ind-exp__lane {
  --tasks-gap: 20px;
}

.itb-ind-exp__card {
  flex: 0 0 var(--tasks-card-w, 480px);
  width: var(--tasks-card-w, 480px);
  min-height: 340px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-ind-exp__card:hover {
  background: var(--bg-card-hover);
  transform: translateY(-3px);
}

/* Пейджер из 02-tasks.css рассчитан на светлую секцию (белые стрелки,
   темный текст) — в темном скоупе переопределяем на токены темы. */
.itb-section--ind-exp .itb-tasks__arrow {
  border-color: var(--border-card);
  background: transparent;
  color: var(--text-secondary);
}
.itb-section--ind-exp .itb-tasks__arrow:hover:not(:disabled) {
  border-color: var(--accent-light);
  color: var(--text-primary);
}
.itb-section--ind-exp .itb-tasks__arrow:focus-visible {
  outline-color: var(--accent);
}
.itb-section--ind-exp .itb-tasks__dot {
  background: var(--surface-2);
}
.itb-section--ind-exp .itb-tasks__dot:hover { background: var(--surface-2-hover); }
.itb-section--ind-exp .itb-tasks__dot:focus-visible {
  outline-color: var(--accent);
}
.itb-section--ind-exp .itb-tasks__dot.is-active {
  background: var(--accent);
}

.itb-ind-exp__context {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 14px;
}

.itb-ind-exp__card-title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--text-primary);
}

.itb-ind-exp__card-desc {
  margin: 0 0 20px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.itb-ind-exp__points-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.itb-ind-exp__points {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.itb-ind-exp__points li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.itb-ind-exp__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.itb-ind-exp__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-light);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.itb-ind-exp__link:hover { gap: 14px; color: var(--accent); }

.itb-ind-exp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(32px, 4vw, 44px);
}

/* ─── Экран 7. FAQ ─────────────────────────────────────────────────────── */

/* Тоже светлая, но белая: со «специфики» (#f2f4f8) она не считывается как
   повтор той же плоскости. */
.itb-section--ind-faq {
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-primary: #ffffff;
  --bg-card: #f6f8fb;
  --bg-card-hover: #eef2f7;
  --border-color: #e2e8f0;
  --border-card: #cbd3df;
  --border-tag: #cbd5e1;
  --accent-light: #3a58c0;

  background: #ffffff;
  color: #0f1b2d;
}

.itb-ind-faq__header { margin-bottom: 40px; }
.itb-ind-faq__header .itb-section__eyebrow {
  display: block;
  margin-bottom: 14px;
  color: #2233d6;
}

.itb-ind-faq__list { border-top: 1px solid var(--border-color); }

.itb-ind-faq__item { border-bottom: 1px solid var(--border-color); }

.itb-ind-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--text-primary);
}
.itb-ind-faq__question::-webkit-details-marker { display: none; }
.itb-ind-faq__question:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.itb-ind-faq__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.itb-ind-faq__icon::before,
.itb-ind-faq__icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.itb-ind-faq__icon::before { left: 0; top: 7px; width: 16px; height: 2px; }
.itb-ind-faq__icon::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.itb-ind-faq__item[open] .itb-ind-faq__icon::after { transform: scaleY(0); opacity: 0; }

.itb-ind-faq__answer {
  max-width: 900px;
  padding: 0 4px 22px;
}
.itb-ind-faq__answer p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ─── Адаптив ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .itb-ind-intro__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .itb-ind-spec__item { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

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

@media (max-width: 700px) {
  .itb-section--ind-intro { padding-block: 132px 64px; }
  .itb-ind-intro__title { font-size: clamp(28px, 8vw, 38px); letter-spacing: -1px; }
  .itb-ind-intro__lead p { font-size: 16px; }
  .itb-ind-intro__actions { flex-direction: column; align-items: stretch; }
  .itb-ind-intro__actions .btn { width: 100%; }

  /* SVG масштабируется сам — на узком экране только гасим сноску и
     служебную разметку, чтобы мелкий текст не сыпался. */
  .itb-ind-svg__footnote,
  .itb-ind-svg__grid { display: none; }

  .itb-ind-intro__tag { font-size: 13px; padding: 9px 14px; }

  .itb-ind-spec__item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 26px 0; }

  .itb-ind-type__head { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 12px; padding: 18px 2px; }
  .itb-ind-type__panel { padding-left: 0; padding-bottom: 24px; }

  .itb-ind-scen__card { min-height: 0; padding: 24px; }
  .itb-ind-scen__card-title { font-size: 18px; }

  /* На узкой колонке правое выравнивание читается хуже левого. */
  .itb-ind-trust__header { text-align: left; margin-left: 0; }

  .itb-ind-exp__card { padding: 22px; }
  .itb-ind-exp__actions .btn { width: 100%; }

  .itb-ind-faq__question { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .itb-ind-type__icon::before,
  .itb-ind-type__icon::after,
  .itb-ind-faq__icon::before,
  .itb-ind-faq__icon::after,
  .itb-ind-type__link,
  .itb-ind-exp__link,
  .itb-ind-exp__card,
  .itb-ind-scen__card,
  .itb-ind-scen__mark,
  .itb-ind-scen__arrow {
    transition: none;
  }
}

/* css/sections/50-about.css */
/* ==========================================================================
   Страница «О компании» (templates/template-about.php)

   Ритм страницы построен на чередовании плоскостей, а не на разделителях:
   темное интро → светлое обоснование → темные проекты → светлый процесс →
   темная команда → светлые отзывы → темная история → светлая карьера → CTA.
   Читатель понимает, что раздел сменился, до того как прочтет заголовок.

   Фотографий на странице нет: пригодного материала у компании не оказалось,
   а сток и ИИ-иллюстрации запрещены PRODUCT.md. Поэтому вес держит
   типографика — крупные цифры, кавычка в отзывах, год на моношрифте.
   ========================================================================== */

/* ─── Экран 1. Интро ──────────────────────────────────────────────────── */

.itb-section--ab-intro {
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

/* ─── Подложка первого экрана: фото команды ───────────────────────────── */

/* Фотография живой команды на странице о компании — это доказательство, что
   за проектами стоят люди. Но она не должна конкурировать с заголовком,
   поэтому уведена почти в фон: приглушена, обесцвечена до следа фирменного
   синего и растворена по краям маской. Читается как атмосфера, а не как
   иллюстрация — и не превращает строгий раздел в фотоальбом. */
.itb-section--ab-intro.has-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.itb-ab-intro__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.itb-ab-intro__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;

  /* Обесцвечиваем и подсинчиваем: цветное фото (бирюзовые и красные платья)
     спорило бы с правилом «синий — единственный акцент». */
  filter: grayscale(1) contrast(1.06) brightness(0.72);
  opacity: 0.16;

  /* Двойная маска: снизу и справа кадр уходит в фон, чтобы у цифр и текста
     была чистая плоскость, а фото не обрывалось прямой линией. */
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%),
    linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%),
    linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* В светлой теме фото садится на светлый фон: темный кадр нужно осветлить,
   иначе он читается как грязное пятно, а не как подложка. */
[data-theme="light"] .itb-ab-intro__bg-img {
  filter: grayscale(1) contrast(0.95) brightness(1.12);
  opacity: 0.13;
}

.itb-ab-intro__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
}

/* Без вводных абзацев (см. hero.php): одна колонка, заголовок во всю ширину,
   кнопки идут под ним обычным потоком, а не висят сбоку. */
.itb-ab-intro__top--stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
/* Заголовок и так самый крупный элемент страницы — на всю ширину контейнера
   он расползается в длинную строку. Держим меру, но заметно шире половины. */
.itb-ab-intro__top--stacked .itb-ab-intro__title { max-width: 20ch; }
.itb-ab-intro__top--stacked .itb-ab-intro__actions { margin-top: clamp(28px, 3.5vw, 40px); }

.itb-ab-intro__badge {
  display: inline-block;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--accent-light);
}

.itb-ab-intro__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -1.6px;
  color: var(--text-primary);
}

/* Абзацы прижаты к низу заголовка: интро читается как один блок, а не как
   две независимые колонки, начатые с разной высоты. */
.itb-ab-intro__lead {
  margin: 0;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.55;
}
.itb-ab-intro__lead p { margin: 0 0 14px; }
.itb-ab-intro__lead p:last-child { margin-bottom: 0; }

.itb-ab-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ─── Цифры под интро ─────────────────────────────────────────────────── */

/* Не карточки: цифры разделены только тонкой линией. Плитка из четырех
   одинаковых прямоугольников — тот самый «шаблонный SaaS», который
   PRODUCT.md называет анти-референсом. Здесь это строка фактов. */
.itb-ab-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0;
  border-top: 1px solid var(--border-color);
}
.itb-ab-facts[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.itb-ab-facts[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.itb-ab-facts__item {
  padding: 28px 28px 0 0;
  border-right: 1px solid var(--border-color);
}
.itb-ab-facts__item:last-child { border-right: 0; }
.itb-ab-facts__item + .itb-ab-facts__item { padding-left: 28px; }

.itb-ab-facts__value {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -1.4px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Текстовое значение вместо числа: кегль цифр для фразы избыточен — она
   переносится на три строки и вытягивает всю строку фактов. Ставим ближе
   к подзаголовочному и снимаем плотный трекинг, рассчитанный на цифры. */
.itb-ab-facts__value--text {
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  text-wrap: balance;
}

.itb-ab-facts__label {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* Уточнение — служебная маркировка (номер аккредитации), поэтому моношрифт
   и приглушенный цвет: это сноска к факту, а не сам факт. */
.itb-ab-facts__note {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

/* ─── Светлые секции: скоуп токенов ───────────────────────────────────── */

/* Тот же прием, что в 45-srv-page.css: переопределяем токены на секции,
   а не переписываем каждое правило под светлый фон. Соседние светлые
   секции разведены оттенком, иначе сливаются в одно полотно. */
.itb-section--ab-trust,
.itb-section--ab-proc,
.itb-section--ab-let,
.itb-section--ab-car {
  --bg-card: #f6f8fb;
  --bg-card-hover: #eef2f7;
  --border-color: #e2e8f0;
  --border-card: #cbd3df;
  --border-tag: #cbd5e1;
  --accent-light: #3a58c0;
  --text-primary: #0f1b2d;
  --text-secondary: #47566b;
  --text-muted: #6b7a90;

  background: #f2f4f8;
  color: #0f1b2d;
}

/* Отзывы и карьера — белее соседей: они идут встык с темными секциями и
   должны читаться как отдельная плоскость, а не как продолжение. */
.itb-section--ab-let,
.itb-section--ab-car {
  background: #ffffff;
  --bg-card: #f6f8fb;
}

.itb-section--ab-trust .itb-section__eyebrow,
.itb-section--ab-proc .itb-section__eyebrow,
.itb-section--ab-let .itb-section__eyebrow,
.itb-section--ab-car .itb-section__eyebrow {
  color: #2233d6;
}

.itb-section--ab-trust .itb-section__title,
.itb-section--ab-proc .itb-section__title,
.itb-section--ab-let .itb-section__title {
  color: #0f1b2d;
}

/* ─── Экран 2. Доверие ────────────────────────────────────────────────── */

.itb-ab-trust__header { max-width: 720px; }

.itb-ab-trust__desc {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Список с непрерывной линией слева: четыре аспекта — это перечень
   оснований, а не четыре независимых карточки. Линия связывает их в один
   аргумент. */
.itb-ab-trust__list {
  list-style: none;
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border-color);
}

.itb-ab-trust__item {
  padding: 32px 36px 32px 0;
  border-bottom: 1px solid var(--border-color);
}
.itb-ab-trust__item:nth-child(odd) { border-right: 1px solid var(--border-color); }
.itb-ab-trust__item:nth-child(even) { padding-left: 36px; }

.itb-ab-trust__item-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}

.itb-ab-trust__item-desc {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ─── Экран 3. Проекты ────────────────────────────────────────────────── */

/* Светлая секция: карточки кейсов светлые, на темном фоне страницы контраст
   резал глаз. Переопределяем токены на светлую палитру (эталон — светлые
   bt-секции) и задаем светлый фон. */
.itb-section--ab-proj {
  --text-primary: #0f1b2d;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-card: #ffffff;
  --border-card: #e2e8f0;
  --accent-light: #3a58c0;
  /* Вторичная кнопка («Все кейсы») заливается --surface-2. В темной теме это
     #374658 — на светлом фоне секции она читалась грязно-серым пятном.
     Берем светлую пару токена и границу под нее. */
  --surface-2: #e6ebf2;
  --surface-2-hover: #dbe2ec;
  --border-color: #d5dde8;
  background: #f6f8fb;
  color: #0f1b2d;
}

/* Отступ заголовка до карточек: header прижат сверху, карточки — сразу под
   ним, между ними нужен воздух. */
.itb-ab-proj__header {
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 52px);
}
.itb-section--ab-proj .itb-cards--cases { margin-top: 0; }

.itb-ab-proj__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(32px, 5vw, 52px);
}
.itb-ab-proj__grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.itb-ab-proj__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.itb-ab-proj__card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
}
.itb-ab-proj__card:hover { background: var(--bg-card-hover); }

.itb-ab-proj__card-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--text-primary);
}

.itb-ab-proj__card-desc {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.itb-ab-proj__link {
  margin-top: auto;
  padding-top: 22px;
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-light);
  text-decoration: none;
  transition: color 0.2s ease;
}
.itb-ab-proj__link:hover { color: var(--text-primary); }

/* Кнопка по левому краю — на одной оси с заголовком секции и первой карточкой.
   Отступ крупнее: 28px склеивали ее с нижней кромкой карточек. */
.itb-ab-proj__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(36px, 3.6vw, 48px);
}

/* ─── Экран 4. Процесс ────────────────────────────────────────────────── */

.itb-ab-proc__header { max-width: 720px; }

/* Прямой рельс: номера выстроены по одной оси, непрерывная линия проходит
   ровно через их центры и связывает шаги в путь. Ступенчатое смещение
   вправо здесь пробовалось и было отвергнуто: линия отрывалась от
   сместившейся плашки, и связь между шагами читалась как сломанная. */
.itb-ab-proc__steps {
  list-style: none;
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: 0;
  position: relative;
}

.itb-ab-proc__step {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  padding: 0 0 clamp(28px, 3vw, 40px);
}

/* Линия идет от нижней кромки номера до следующего шага, по центру плашки
   (52px / 2 = 26px). У последнего ее нет: путь заканчивается
   эксплуатацией, а не обрывается в пустоту. */
.itb-ab-proc__step::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 52px;
  bottom: 0;
  width: 2px;
  transform: translateX(-1px);
  background: var(--border-card);
}
.itb-ab-proc__step.is-final::before { display: none; }
.itb-ab-proc__step.is-final { padding-bottom: 0; }

/* Номер квадратный: плашка 52×52 центрируется на линии без смещений,
   поэтому рельс проходит через нее, а не мимо. */
.itb-ab-proc__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--accent-light);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
}

/* Заголовок выравнивается по центру плашки: 52px высоты плашки против
   line-height заголовка — иначе название висит выше номера. */
.itb-ab-proc__body { padding-top: 11px; }

.itb-ab-proc__step-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.itb-ab-proc__step-desc {
  margin: 10px 0 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.itb-ab-proc__actions { margin-top: 36px; }

/* ─── Экран 5. Команда ────────────────────────────────────────────────── */

.itb-ab-team__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}

.itb-ab-team__header { max-width: 460px; }

.itb-ab-team__text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.itb-ab-team__text p { margin: 0 0 16px; }
.itb-ab-team__text p:last-child { margin-bottom: 0; }

/* Первый абзац несет тезис секции, дальше идет раскрытие — тот же прием,
   что в template-parts/service/outcome.php. */
.itb-ab-team__lead {
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--text-primary);
}

.itb-ab-team__list {
  list-style: none;
  margin: clamp(36px, 5vw, 60px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.itb-ab-team__item {
  padding: 26px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
}

.itb-ab-team__item-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text-primary);
}

.itb-ab-team__item-desc {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ─── Экран 5б. Руководство ───────────────────────────────────────────── */

/* Единственное место страницы, где есть лица. Портреты цветные и крупные:
   секция существует ровно затем, чтобы заказчик увидел людей, с которыми
   будет работать, — приглушать их значит отменить смысл секции.
   Разнобой исходников (у одного ровная стена, у остальных гирлянда)
   снимается общим темным основанием карточки и одинаковым кропом,
   а не обесцвечиванием. */
.itb-section--ab-lead {
  background: var(--bg-secondary);
}

.itb-ab-lead__header { max-width: 720px; }

.itb-ab-lead__desc {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.itb-ab-lead__grid {
  list-style: none;
  margin: clamp(32px, 5vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.itb-ab-lead__grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.itb-ab-lead__card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: background 0.2s ease;
}
.itb-ab-lead__card:hover { background: var(--bg-card-hover); }

.itb-ab-lead__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-primary);
}

/* Кроп по верхней трети: лица садятся в кадр одинаково у всех четверых,
   несмотря на разную крупность исходников. */
.itb-ab-lead__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-ab-lead__card:hover .itb-ab-lead__img { transform: scale(1.03); }

/* Легкое затемнение только у нижней кромки: оно склеивает фото с плашкой
   подписи, чтобы граница между ними не выглядела обрывом. Цвет лица
   при этом не трогается. */
.itb-ab-lead__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(to top, rgba(8, 17, 33, 0.45), transparent);
  pointer-events: none;
}

/* Запасной вариант, если фото не задано: инициал вместо серого прямоугольника. */
.itb-ab-lead__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 64px;
  color: var(--text-muted);
  opacity: 0.35;
}

/* Подпись тянется на всю оставшуюся высоту карточки: у «Заместителя
   генерального директора» должность переносится на вторую строку, и без
   этого его карточка была бы выше соседних. */
.itb-ab-lead__meta {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 20px;
}

.itb-ab-lead__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--text-primary);
}

.itb-ab-lead__role {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}

[data-theme="light"] .itb-ab-lead__photo::after {
  background: linear-gradient(to top, rgba(15, 27, 45, 0.22), transparent);
}

/* ─── Экран 6. Отзывы ─────────────────────────────────────────────────── */

.itb-ab-let__header { max-width: 720px; }

.itb-ab-let__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(32px, 5vw, 52px);
}
.itb-ab-let__grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.itb-ab-let__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.itb-ab-let__grid[data-count="1"] { grid-template-columns: minmax(0, 760px); }

.itb-ab-let__card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 30px 28px 26px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
}

/* Кавычка отрисована псевдоэлементом, а не символом в тексте: она
   декоративная, ее не должен читать скринридер и не должен копировать
   пользователь вместе с цитатой. У карточек с логотипом ее нет: место
   под чертой уже занято знаком, а вторая метка сверху избыточна. */
.itb-ab-let__card:not(.has-logo)::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 28px;
  width: 22px;
  height: 2px;
  background: var(--accent);
}

/* Логотип заказчика в шапке карточки — по левому краю, над цитатой.

   Раньше знак был водяным (крупно, бледно, обесцвеченно, в углу под текстом)
   и не читался: приглушенный до неразличимости логотип не дает узнавания,
   ради которого его сюда и поставили, и выглядит артефактом. Знак стоит в
   шапке в полном цвете и разборчивого размера — как подпись-атрибуция.

   Высота фиксирована, ширина — auto: это выравнивает знаки разной длины
   по «оптическому» размеру. Ширина как база дает обратный эффект: широкий
   логотип с наименованием и компактный знак-квадрат в один и тот же
   контейнер шириной 100px станут визуально несопоставимыми.

   Три фирменных цвета в ряду терпимы: они стоят мелко, в одну линию и
   отделены от цитаты пустотой. Это не акцент, а метка источника — так же,
   как логотипы в подвале сайтов. */
.itb-ab-let__logo {
  height: 34px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
}

.itb-ab-let__logo-img {
  display: block;
  height: 100%;
  width: auto;
  /* Страховка на случай очень длинного знака: не даем вылезти за колонку. */
  max-width: 100%;
  object-fit: contain;
}

/* Знаки с наименованием в несколько строк (ТМК — три строки, ТЭК-Торг —
   знак над подписью) при высоте 34px получаются приземистыми. Даем им
   больше высоты и страхуем ширину, чтобы не расползались по карточке. */
.itb-ab-let__logo.is-stacked        { height: 52px; }
.itb-ab-let__logo.is-stacked .itb-ab-let__logo-img { max-width: 150px; }

/* В темной теме карточка темная — логотипы на черном фоне (у ТМК подложка
   черная, у ТЭК-Торга сам знак черно-голубой) сливаются с ней. Инвертируем
   светлоту, оставляя цвет: hue-rotate + invert без насыщенности сохраняет
   узнаваемость. Проще — invert(1): для ТМК он превратит черный квадрат
   в белый, что читаемо; для ЭТП ГПБ синий станет желто-оранжевым, что уже
   искажение. Поэтому вместо инверсии просто подкладываем светлый фон:
   логотипы задуманы под светлую бумагу, дадим им ее. */
[data-theme="dark"] .itb-ab-let__logo {
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 6px;
  /* Высота учитывает паддинги, чтобы визуально размер совпал со светлой темой. */
  height: 46px;
  box-sizing: border-box;
}
[data-theme="dark"] .itb-ab-let__logo.is-stacked {
  height: 64px;
}

.itb-ab-let__quote {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-primary);
}
/* Отбивка от кавычки-черточки — только у карточек без логотипа: с логотипом
   свою отбивку задает margin-bottom у .itb-ab-let__logo. */
.itb-ab-let__card:not(.has-logo) .itb-ab-let__quote { padding-top: 22px; }
.itb-ab-let__quote p { margin: 0; }
.itb-ab-let__quote p::before { content: "\00ab"; }
.itb-ab-let__quote p::after { content: "\00bb"; }

.itb-ab-let__meta {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.itb-ab-let__company {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
}

.itb-ab-let__person {
  font-size: 15px;
  color: var(--text-secondary);
}

.itb-ab-let__role {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Дата и ссылка на скан — служебный слой: подтверждение для тех, кто
   проверяет, и он не должен спорить с цитатой за внимание. */
.itb-ab-let__source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.itb-ab-let__date {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.itb-ab-let__scan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--accent-light);
  text-decoration: none;
  transition: color 0.2s ease;
}
.itb-ab-let__scan:hover { color: var(--text-primary); }

.itb-ab-let__scan-icon {
  display: inline-flex;
  /* оптическая компенсация: иконка кажется выше строки моношрифта */
  margin-top: -1px;
}

/* ─── Лайтбокс письма ─────────────────────────────────────────────────── */

/* Скан открывается поверх страницы, а не в новой вкладке: заказчик проверяет
   отзыв мимоходом и не должен терять место, где читал. Разметка — <dialog>,
   поэтому фокус, Esc и возврат фокуса работают средствами браузера. */
.itb-letter-modal {
  width: min(92vw, 860px);
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  overflow: hidden;
}

.itb-letter-modal::backdrop {
  background: rgba(6, 12, 24, 0.78);
  backdrop-filter: blur(2px);
}

.itb-letter-modal__inner {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}

.itb-letter-modal__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-color);
}

.itb-letter-modal__caption {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.itb-letter-modal__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.itb-letter-modal__close:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

/* Скан на светлом: письмо — документ на белой бумаге, темная рамка вокруг
   него читается как паспарту и не спорит с содержимым. */
.itb-letter-modal__body {
  overflow: auto;
  padding: 18px;
  background: var(--bg-secondary);
  -webkit-overflow-scrolling: touch;
}

.itb-letter-modal__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: #fff;
  border-radius: 4px;
}

.itb-letter-modal__foot {
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border-color);
}

.itb-letter-modal__download {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--accent-light);
  text-decoration: none;
}
.itb-letter-modal__download:hover { color: var(--text-primary); }

/* ─── Экран 7. История ────────────────────────────────────────────────── */

.itb-ab-hist__header { max-width: 720px; }

/* Вертикальный рельс: год слева на моношрифте (маркировка узла), описание
   справа. Горизонтальная лента здесь не подходит — у вех многострочные
   описания, их пришлось бы резать или скроллить вбок. */
.itb-ab-hist__track {
  list-style: none;
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: 0;
}

.itb-ab-hist__node {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  padding: 0 0 34px 0;
}

/* Линия проходит по границе колонки года, точка садится на нее. */
.itb-ab-hist__node::before {
  content: "";
  position: absolute;
  left: 116px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--border-color);
}
.itb-ab-hist__node:last-child::before { display: none; }
.itb-ab-hist__node:last-child { padding-bottom: 0; }

.itb-ab-hist__node::after {
  content: "";
  position: absolute;
  left: 112px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1.5px solid var(--border-card);
}

/* Последняя веха — настоящее: точка залита акцентом, чтобы рельс приводил
   в «сегодня», а не заканчивался еще одним прошедшим годом. */
.itb-ab-hist__node.is-current::after {
  background: var(--accent);
  border-color: var(--accent);
}

.itb-ab-hist__year {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 2px;
}
.itb-ab-hist__node.is-current .itb-ab-hist__year { color: var(--accent-light); }

.itb-ab-hist__desc {
  margin: 0;
  max-width: 680px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ─── Экран 7б. Карьера ───────────────────────────────────────────────── */

.itb-ab-car__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}

.itb-ab-car__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.8px;
  color: var(--text-primary);
}

.itb-ab-car__text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.itb-ab-car__text p { margin: 0 0 14px; }
.itb-ab-car__text p:last-child { margin-bottom: 0; }

.itb-ab-car__actions { margin-top: 26px; }

/* ─── Адаптив ─────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .itb-ab-intro__top,
  .itb-ab-team__intro,
  .itb-ab-car__inner { grid-template-columns: minmax(0, 1fr); }

  .itb-ab-intro__top { align-items: start; }

  .itb-ab-proj__grid,
  .itb-ab-proj__grid[data-count="4"],
  .itb-ab-let__grid,
  .itb-ab-let__grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .itb-ab-team__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Руководителей оставляем по двое в ряд, а не в одну колонку: портреты
     нужны как ряд лиц, вертикальный столбец из четырех фото растягивает
     секцию и превращает ее в галерею. */
  .itb-ab-lead__grid,
  .itb-ab-lead__grid[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .itb-ab-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .itb-ab-facts__item:nth-child(2) { border-right: 0; }
  .itb-ab-facts__item:nth-child(-n+2) { border-bottom: 1px solid var(--border-color); padding-bottom: 24px; }
  .itb-ab-facts__item:nth-child(odd) { padding-left: 0; }
  .itb-ab-facts__item:nth-child(even) { padding-left: 28px; }
}

@media (max-width: 700px) {
  .itb-ab-trust__list { grid-template-columns: minmax(0, 1fr); }
  .itb-ab-trust__item,
  .itb-ab-trust__item:nth-child(odd) { border-right: 0; padding-right: 0; }
  .itb-ab-trust__item:nth-child(even) { padding-left: 0; }

  .itb-ab-proj__grid,
  .itb-ab-proj__grid[data-count="4"],
  .itb-ab-proj__grid[data-count="2"],
  .itb-ab-let__grid,
  .itb-ab-let__grid[data-count="4"],
  .itb-ab-let__grid[data-count="2"],
  .itb-ab-team__list { grid-template-columns: minmax(0, 1fr); }

  .itb-ab-proc__step {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
  }
  .itb-ab-proc__num { width: 44px; height: 44px; font-size: 12px; }
  .itb-ab-proc__step::before { left: 22px; top: 44px; }
  .itb-ab-proc__body { padding-top: 7px; }

  .itb-ab-hist__node {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-left: 24px;
  }
  .itb-ab-hist__node::before { left: 4px; top: 16px; }
  .itb-ab-hist__node::after { left: 0; top: 5px; }

  .itb-ab-facts { grid-template-columns: minmax(0, 1fr); }
  .itb-ab-facts__item,
  .itb-ab-facts__item:nth-child(odd),
  .itb-ab-facts__item:nth-child(even) {
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
    padding: 22px 0;
  }
  .itb-ab-facts__item:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* Смена фона по наведению — единственное движение на странице; при запросе
   на уменьшение анимации отключаем и его. */
@media (max-width: 480px) {
  /* Даже на самом узком экране портреты идут парами: одиночная колонка
     превращает секцию в бесконечную ленту лиц. */
  .itb-ab-lead__meta { padding: 14px 14px 16px; }
  .itb-ab-lead__name { font-size: 15.5px; }
  .itb-ab-lead__role { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .itb-ab-proj__card,
  .itb-ab-proj__link,
  .itb-ab-let__scan,
  .itb-ab-lead__card,
  .itb-ab-lead__img { transition: none; }
  .itb-ab-lead__card:hover .itb-ab-lead__img { transform: none; }
}

/* css/sections/51-blog.css */
/* ==========================================================================
   Блог «Экспертиза»: лента (/press) и страница статьи (/press/<slug>)
   ========================================================================== */

/* ─── Hero-шапка ленты (темная) ────────────────────────────────────────── */
.itb-blog-hero {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding-block: clamp(56px, 8vw, 104px);
}
.itb-blog-hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.04;
  letter-spacing: -1.2px;
  margin: 14px 0 16px;
}
.itb-blog-hero__subtitle {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 720px;
}

/* ─── Лента карточек (светлая) ─────────────────────────────────────────── */
.itb-blog {
  background: #f2f4f8;
  color: #16181f;
}
[data-theme="light"] .itb-blog { background: #f2f4f8; }

.itb-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Карточка статьи (светлая, как карточка кейса витрины). */
.itb-card--post {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 18px;
  overflow: hidden;
  padding: 0 0 24px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.itb-card--post:hover {
  border-color: #b9c2e6;
  box-shadow: 0 26px 52px -30px rgba(21, 32, 64, 0.45);
  transform: translateY(-3px);
}
.itb-card--post .itb-card__media {
  display: block;
  aspect-ratio: 411 / 200;
  overflow: hidden;
  background: #eef1f6;
}
.itb-card--post .itb-card__img { width: 100%; height: 100%; object-fit: cover; }
.itb-card--post .itb-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 26px 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.itb-card--post .itb-card__cat { color: #2233d6; }
.itb-card--post .itb-card__date { color: #8a91a0; }
.itb-card--post .itb-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(19px, 1.4vw, 22px);
  line-height: 1.18;
  letter-spacing: -0.4px;
  color: #16181f;
  margin: 12px 0;
  padding: 0 26px;
}
.itb-card--post .itb-card__title a { color: inherit; }
.itb-card--post .itb-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #565c6a;
  padding: 0 26px;
}

.itb-blog__empty { padding: 40px 0; font-size: 16px; color: #565c6a; }
.itb-blog__pagination { margin-top: 40px; }
.itb-blog__pagination .page-numbers {
  display: inline-block;
  min-width: 40px;
  padding: 8px 12px;
  margin-right: 8px;
  text-align: center;
  border: 1px solid #dde1ea;
  border-radius: 10px;
  color: #16181f;
  text-decoration: none;
}
.itb-blog__pagination .page-numbers.current {
  background: #2233d6;
  border-color: #2233d6;
  color: #fff;
}

/* ─── Страница статьи ──────────────────────────────────────────────────── */
.itb-article__hero {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding-block: clamp(48px, 7vw, 88px) clamp(28px, 4vw, 44px);
}
/* Единая колонка чтения (как на странице кейса, 11-single-case.css): контейнер
   темы очень широкий, поэтому шапку, обложку, тело и «назад» держим в одной
   центрированной колонке 880px — иначе текст прижат влево, обложка огромная. */
.itb-article__hero-inner { max-width: 880px; margin-inline: auto; }
.itb-article__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -1.4px;
  margin: 18px 0 14px;
}
.itb-article__meta { color: var(--text-secondary); font-size: 15px; }
.itb-article__cover {
  max-width: 880px;
  margin: 32px auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.itb-article__cover-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
}

/* Тело статьи — типографика страницы кейса (.itb-single__content). */
.itb-article__body {
  max-width: 880px;
  margin-inline: auto;
  padding-block: 24px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.itb-article__body > *:first-child { margin-top: 0; }
.itb-article__body h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--text-primary);
  margin: 40px 0 16px;
}
.itb-article__body h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 28px 0 12px;
}
.itb-article__body p { margin: 0 0 18px; }
/* Глобально ul{list-style:none} (base.css) — в теле статьи возвращаем маркеры:
   у ul акцентная точка, у ol нумерация counter'ом (как в теле кейса). */
.itb-article__body ul,
.itb-article__body ol {
  margin: 0 0 18px;
  padding-left: 4px;
  list-style: none;
}
.itb-article__body li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 26px;
}
.itb-article__body ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-light);
}
.itb-article__body ol { counter-reset: itb-li; }
.itb-article__body ol > li { counter-increment: itb-li; }
.itb-article__body ol > li::before {
  content: counter(itb-li) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--accent-light);
}
.itb-article__body a {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.itb-article__body strong { color: var(--text-primary); }
.itb-article__body img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 8px 0 18px; }
.itb-article__back { max-width: 880px; margin: 24px auto 8px; }

/* Встроенное видео (VK Video, YouTube): iframe отдаёт фиксированные width/height
   атрибутами — без обёртки с aspect-ratio он ломает верстку на узких экранах. */
.itb-article__video {
  position: relative;
  margin: 8px 0 24px;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}
.itb-article__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── Адаптив ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .itb-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .itb-blog-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .itb-card--post { transition: none; }
  .itb-card--post:hover { transform: none; }
}

/* css/sections/52-404.css */
/* ==========================================================================
   Страница 404.

   Спокойная: крупная цифра приглушена до фоновой (это указатель, а не
   заголовок), смысловой акцент — на H1 и кнопке возврата. Синий тратим
   только на основную кнопку, в пределах 10% экрана.
   ========================================================================== */

.itb-404 {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding-block: clamp(64px, 10vw, 132px);
}

.itb-404__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 760px;
}

/* Цифра — навигационный указатель, поэтому светлотой уходит в фон,
   а не спорит с заголовком. */
.itb-404__code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 104px);
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text-muted);
  opacity: 0.35;
}

.itb-404__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.06;
  letter-spacing: -1.1px;
  margin: 12px 0 14px;
}

.itb-404__lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 28px;
}

.itb-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

/* ─── Разделы ──────────────────────────────────────────────────────────── */

.itb-404__links {
  width: 100%;
  padding-top: 28px;
  border-top: 1px solid var(--border-color);
}

.itb-404__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.itb-404__link {
  font-size: 16px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.itb-404__link:hover,
.itb-404__link:focus-visible {
  color: var(--text-primary);
}

/* ─── Поиск ────────────────────────────────────────────────────────────── */

.itb-404__search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin-top: 32px;
}

.itb-404__search-input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
}

.itb-404__search-input::placeholder {
  color: var(--text-muted);
}

.itb-404__search-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.itb-404__search-btn {
  flex: none;
}

@media (max-width: 640px) {
  .itb-404__lead {
    font-size: 16px;
  }

  .itb-404__actions .btn,
  .itb-404__search-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* css/sections/53-roi-calculator.css */
/* ==========================================================================
   ROI-калькулятор Balance SDLC — модальное окно
   ==========================================================================

   Инструмент, а не витрина: плотная сетка цифр, ползунков и селектов, которую
   читают вдумчиво и подолгу. Поэтому калькулятор светлый при любой теме сайта
   — токены переопределены локально, ниже. На тёмном фоне сайта такой объём
   мелких подписей и полей утомляет глаз быстрее, а числам нужен максимальный
   контраст к подложке.

   Синий #1d48e6 держим ≤10% экрана (правило DESIGN.md): он достаётся
   значениям полей, заливке ползунков и одной кнопке. Плашка результата —
   тёмно-синяя поверхность из палитры сайта, она же единственное тёмное пятно.
   ========================================================================== */

.itb-roi {
  /* Локальная светлая палитра: диалог живёт поверх любой темы сайта, поэтому
     не наследует её токены, а задаёт свои. Нейтрали уведены в синеву бренда
     (чистый серый рядом с #1d48e6 выглядит грязным). */
  --roi-paper: #f7f9fc;
  --roi-surface: #ffffff;
  --roi-surface-2: #eef2f8;
  --roi-ink: #0f1b2d;
  --roi-ink-2: #44516a;
  --roi-muted: #6b7789;
  --roi-line: #e2e8f0;
  --roi-line-strong: #cbd5e1;
  --roi-accent: #1d48e6;
  --roi-accent-soft: rgba(29, 72, 230, 0.08);
  --roi-deep: #0e1a2c;
  --roi-pos: #1f7a55;
  --roi-neg: #b3352a;

  width: min(96vw, 1240px);
  max-width: 96vw;
  /* Диалог центрируется браузером и получает собственные margin: при 94vh
     нижний край (кнопка и сноска) уезжал за экран. Берём почти весь экран
     и гасим margin — прокрутка остаётся внутри тела, а не у страницы. */
  height: 96dvh;
  max-height: 96dvh;
  margin: auto;
  padding: 0;
  /* Переопределяется для .itb-roi--inline ниже: на странице высота своя. */
  border: 1px solid var(--roi-line);
  border-radius: var(--radius-md, 16px);
  background: var(--roi-paper);
  color: var(--roi-ink-2);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  overflow: hidden;
}

.itb-roi::backdrop {
  background: rgba(6, 12, 24, 0.78);
  backdrop-filter: blur(2px);
}

.itb-roi__shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ─── Шапка ────────────────────────────────────────────────────────────── */

/* Шапка компактная: подводка и чипы-пруфы съедали половину первого экрана,
   и до полей приходилось скроллить. Объяснение читают один раз, а цифры
   крутят долго — поэтому текст убран под «Подробнее», а на виду остались
   заголовок и сами пруфы. */
.itb-roi__head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 28px 16px;
  border-bottom: 1px solid var(--roi-line);
  background: var(--roi-surface);
}

.itb-roi__head-text {
  flex: 1;
  min-width: 0;
}

.itb-roi__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--roi-accent);
}

.itb-roi__title {
  margin: 6px 0 0;
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--roi-ink);
  text-wrap: balance;
}

.itb-roi__lead {
  margin: 8px 0 0;
  /* Во всю ширину шапки: текст раскрывается по клику и читается один раз,
     ограничение в 74ch гнало его в шесть узких строк на широком экране. */
  max-width: none;
  font-size: 13.5px;
  color: var(--roi-ink-2);
}

/* Раскрывашка подводки: суть видна из заголовка и пруфов, подробности —
   по требованию. */
.itb-roi__about {
  margin-top: 6px;
}
.itb-roi__about-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--roi-accent);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.itb-roi__about-toggle::-webkit-details-marker {
  display: none;
}
.itb-roi__about-toggle svg {
  transition: transform 0.2s ease;
}
.itb-roi__about[open] .itb-roi__about-toggle svg {
  transform: rotate(180deg);
}

.itb-roi__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
}

.itb-roi__proof-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--roi-muted);
}

.itb-roi__chip {
  padding: 6px 12px;
  border-radius: var(--radius-full, 99px);
  background: var(--roi-accent-soft);
  font-size: 12px;
  color: var(--roi-ink-2);
}
.itb-roi__chip b {
  color: var(--roi-accent);
}

.itb-roi__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--roi-line-strong);
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--roi-muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.itb-roi__close:hover {
  color: var(--roi-ink);
  border-color: var(--roi-ink-2);
}

/* ─── Тело ─────────────────────────────────────────────────────────────── */

.itb-roi__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 28px 26px;
}

.itb-roi__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 24px;
  align-items: start;
}

.itb-roi__inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.itb-roi__panel {
  padding: 18px;
  border: 1px solid var(--roi-line);
  border-radius: var(--radius-sm, 8px);
  background: var(--roi-surface);
}
.itb-roi__panel--tight {
  padding: 16px 18px;
}

.itb-roi__panel-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--roi-muted);
}
/* Маркер заголовка — логотип, а не абстрактный квадрат: инструмент
   подписан теми же знаками, что и остальной сайт. Декоративный, поэтому
   приглушён и не тянет на себя внимание с цифр. */
.itb-roi__mark {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  object-fit: contain;
  opacity: 0.85;
}

/* Свёрнутый блок: параметры уже заполнены по пилоту, большинству клиентов
   в них лезть незачем — раскрывается по желанию. */
.itb-roi__panel--fold {
  padding: 0;
}
.itb-roi__summary {
  margin: 0;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}
.itb-roi__summary::-webkit-details-marker {
  display: none;
}
.itb-roi__summary > span:first-of-type {
  flex: 1;
  min-width: 0;
}
.itb-roi__summary-hint {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--roi-accent);
  font-variant-numeric: tabular-nums;
}
.itb-roi__chevron {
  flex: 0 0 auto;
  color: var(--roi-muted);
  transition: transform 0.2s ease;
}
.itb-roi__panel--fold[open] .itb-roi__chevron {
  transform: rotate(180deg);
}
.itb-roi__fold-body {
  padding: 2px 18px 18px;
}

/* ─── Поля ─────────────────────────────────────────────────────────────── */

.itb-roi__field + .itb-roi__field,
.itb-roi__pair + .itb-roi__field,
.itb-roi__field + .itb-roi__pair,
.itb-roi__pair + .itb-roi__pair {
  margin-top: 14px;
}

.itb-roi__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Две строки: подпись и поле. Их наследуют дочерние .itb-roi__field через
     subgrid — именно это держит инпуты в одну линию. */
  grid-template-rows: auto auto;
  gap: 0 16px;
  /* Поля в паре выравниваются по общей сетке, а не каждое по своей высоте:
     подпись слева может переноситься на две строки, а справа не быть единицы
     измерения — тогда инпуты вставали на разной высоте и «прыгали». Две
     строки грида (подпись / поле) держат их в одну линию. */
  align-items: start;
}
.itb-roi__pair > .itb-roi__field,
.itb-roi__pair > [data-roi-capex-field] {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
}
/* Обёртка capex-поля прозрачна для сетки: иначе поле внутри неё выпадает
   из общего выравнивания пары. */
.itb-roi__pair > [data-roi-capex-field] > .itb-roi__field {
  display: contents;
}
/* Скрытое поле не должно оставлять пустую колонку в паре. */
.itb-roi__pair > [hidden] {
  display: none;
}

/* Панель полей GPU — самая длинная в калькуляторе (восемь полей). В широкой
   колонке они помещаются по три в ряд, и панель становится короче на треть,
   не теряя читаемости: поля короткие, числовые. */
@media (min-width: 1200px) {
  .itb-roi__pair--triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Браузеры без subgrid: выравниваем по фиксированной высоте строки подписи. */
@supports not (grid-template-rows: subgrid) {
  .itb-roi__pair > .itb-roi__field,
  .itb-roi__pair > [data-roi-capex-field] {
    display: block;
  }
  .itb-roi__pair > [data-roi-capex-field] > .itb-roi__field {
    display: block;
  }
  .itb-roi__pair .itb-roi__field-top {
    min-height: 36px;
    align-items: flex-end;
  }
}

.itb-roi__field-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
/* В паре подпись прижата к низу своей строки: у соседа она может занимать
   две строки, и без этого инпуты расходятся по вертикали. */
.itb-roi__pair .itb-roi__field-top {
  align-items: flex-end;
  margin-bottom: 0;
  padding-bottom: 8px;
}

.itb-roi__field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--roi-ink);
}

.itb-roi__hint {
  font-weight: 400;
  font-size: 11.5px;
  color: var(--roi-muted);
}

.itb-roi__value {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--roi-accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.itb-roi__unit {
  margin-left: 3px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--roi-muted);
}

.itb-roi input[type="number"],
.itb-roi select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--roi-line);
  border-radius: 6px;
  background: var(--roi-surface-2);
  color: var(--roi-ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.itb-roi select {
  font-family: var(--font-body);
  font-weight: 600;
  /* Стрелка своя: у нативного селекта она разная в каждом браузере и ломает
     ровный ритм полей. */
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%236b7789' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

.itb-roi input[type="range"] {
  appearance: none;
  width: 100%;
  height: 5px;
  margin: 4px 0 0;
  border-radius: 3px;
  background: var(--roi-line-strong);
  outline: none;
}
.itb-roi input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 17px;
  height: 17px;
  border: 3px solid var(--roi-surface);
  border-radius: 50%;
  background: var(--roi-accent);
  box-shadow: 0 0 0 1px var(--roi-accent);
  cursor: pointer;
}
.itb-roi input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--roi-surface);
  border-radius: 50%;
  background: var(--roi-accent);
  box-shadow: 0 0 0 1px var(--roi-accent);
  cursor: pointer;
}

.itb-roi input:focus-visible,
.itb-roi select:focus-visible,
.itb-roi button:focus-visible,
.itb-roi summary:focus-visible {
  outline: 2px solid var(--roi-accent);
  outline-offset: 2px;
}

.itb-roi__note {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--roi-muted);
}

/* Предупреждение о невозможной структуре времени: заливкой, а не боковой
   полосой — полосы-акценты в теме запрещены. */
.itb-roi__warn {
  margin: 16px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(179, 53, 42, 0.28);
  border-radius: 6px;
  background: rgba(179, 53, 42, 0.06);
  font-size: 12px;
  line-height: 1.5;
  color: var(--roi-neg);
}
.itb-roi__warn b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.itb-roi__check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.itb-roi__check input {
  width: 17px;
  height: 17px;
  accent-color: var(--roi-accent);
}
.itb-roi__check label {
  font-size: 13px;
  font-weight: 600;
  color: var(--roi-ink);
}

/* ─── Сегментированный переключатель ───────────────────────────────────── */

.itb-roi__seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 9px;
  background: var(--roi-surface-2);
}
.itb-roi__seg button {
  flex: 1;
  padding: 9px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--roi-ink-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.itb-roi__seg button:hover {
  color: var(--roi-ink);
}
.itb-roi__seg button.is-active {
  background: var(--roi-accent);
  color: #fff;
}
.itb-roi__seg--small button {
  padding: 7px;
  font-size: 12px;
}

/* ─── Результаты ───────────────────────────────────────────────────────── */

.itb-roi__results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Sticky у блока экономии убран: прилипая, он наезжал на карточки ROI и
   окупаемости — те уходили под него и переставали читаться. Держать на
   экране одно число ценой перекрытия трёх других — плохой размен. Правая
   колонка теперь просто прокручивается вместе с формой. */

.itb-roi__headline {
  padding: 20px;
  border-radius: var(--radius-sm, 8px);
  background: var(--roi-deep);
}

.itb-roi__headline-label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fa0bd;
}

.itb-roi__headline-value {
  margin: 8px 0 2px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 42px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.itb-roi__headline-unit {
  margin-left: 6px;
  font-size: 16px;
  font-weight: 400;
  color: #9fb0cc;
}

.itb-roi__headline-sub {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #9fb0cc;
  font-variant-numeric: tabular-nums;
}

.itb-roi__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.itb-roi__kpi {
  padding: 15px;
  border: 1px solid var(--roi-line);
  border-radius: var(--radius-sm, 8px);
  background: var(--roi-surface);
}

.itb-roi__kpi-label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--roi-muted);
}

.itb-roi__kpi-value {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--roi-ink);
  font-variant-numeric: tabular-nums;
}
.itb-roi__kpi-value.is-pos {
  color: var(--roi-pos);
}
.itb-roi__kpi-value.is-neg {
  color: var(--roi-neg);
}

/* ─── Карточка инфраструктуры ──────────────────────────────────────────── */

/* Блок инфраструктуры — свёрнутая панель с акцентной рамкой: она отмечает,
   что состав расходов зависит от выбранного режима развёртывания. */
.itb-roi__infra {
  padding: 0;
  border-color: var(--roi-accent);
}
.itb-roi__infra .itb-roi__summary [data-roi-infra-title] {
  color: var(--roi-accent);
}

.itb-roi__infra-rows {
  margin: 0;
}

.itb-roi__infra-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--roi-line);
  font-size: 13px;
}
.itb-roi__infra-row:last-of-type {
  border-bottom: none;
}
.itb-roi__infra-row dt {
  color: var(--roi-ink-2);
}
.itb-roi__infra-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--roi-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.itb-roi__infra-row--hl dd {
  color: var(--roi-accent);
}

.itb-roi__infra-toggle {
  margin-top: 12px;
}
.itb-roi__infra-toggle .itb-roi__note {
  margin: 0 0 8px;
}

/* ─── Полосы сравнения ─────────────────────────────────────────────────── */

.itb-roi__bars {
  padding: 18px;
  border: 1px solid var(--roi-line);
  border-radius: var(--radius-sm, 8px);
  background: var(--roi-surface);
}

.itb-roi__bars-title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--roi-muted);
}

.itb-roi__bar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.itb-roi__bar + .itb-roi__bar {
  margin-top: 10px;
}

.itb-roi__bar-tag {
  flex: 0 0 92px;
  font-size: 12px;
  color: var(--roi-ink-2);
}

.itb-roi__bar-track {
  flex: 1;
  min-width: 0;
  height: 20px;
  border-radius: 3px;
  background: var(--roi-surface-2);
  overflow: hidden;
}

.itb-roi__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.itb-roi__bar-fill--inv {
  background: #6b7f9e;
}
.itb-roi__bar-fill--sav {
  background: var(--roi-accent);
}

.itb-roi__bar-num {
  flex: 0 0 68px;
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--roi-ink);
  font-variant-numeric: tabular-nums;
}

.itb-roi__cta {
  justify-content: center;
  width: 100%;
}

.itb-roi__footnote {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--roi-line);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--roi-muted);
}

/* ─── Адаптив ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  /* Одна колонка: результат уезжает под ввод и sticky теряет смысл —
     прилипать не к чему, экран целиком занят формой. */
  .itb-roi__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .itb-roi__results {
    position: static;
  }
}

@media (max-width: 640px) {
  /* На телефоне калькулятор занимает экран целиком: полей много, рамка и
     скругления только отнимают место. dvh, а не vh — иначе адресная строка
     Safari срезает низ. */
  /* Только модалка: на странице калькулятор в потоке и высотой экрана
     не ограничен (:not(--inline) — иначе страница схлопнется в 100dvh). */
  .itb-roi:not(.itb-roi--inline) {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: none;
    border-radius: 0;
  }
  .itb-roi__head {
    padding: 20px 18px 18px;
  }
  .itb-roi__body {
    padding: 18px 18px 24px;
  }
  .itb-roi__panel {
    padding: 18px;
  }
  .itb-roi__summary {
    padding: 16px 18px;
  }
  .itb-roi__fold-body {
    padding: 2px 18px 18px;
  }
  /* Пары полей и сегменты в столбик: на узком экране два инпута рядом
     сжимаются до нечитаемых. */
  .itb-roi__pair,
  .itb-roi__kpis {
    grid-template-columns: minmax(0, 1fr);
  }
  /* В одну колонку выравнивать нечего: subgrid снимаем, поля идут обычным
     потоком со своим вертикальным ритмом. */
  .itb-roi__pair {
    grid-template-rows: none;
    gap: 16px;
  }
  .itb-roi__pair > .itb-roi__field,
  .itb-roi__pair > [data-roi-capex-field] {
    display: block;
    grid-row: auto;
  }
  .itb-roi__pair > [data-roi-capex-field] > .itb-roi__field {
    display: block;
  }
  .itb-roi__pair .itb-roi__field-top {
    align-items: baseline;
    padding-bottom: 0;
    margin-bottom: 8px;
  }
  .itb-roi__seg {
    flex-wrap: wrap;
  }
  .itb-roi__seg button {
    flex: 1 1 100%;
  }
  .itb-roi__seg--small button {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .itb-roi__bar-fill,
  .itb-roi__chevron {
    transition: none;
  }
}

/* ─── Страница /roi-kalkulyator ────────────────────────────────────────────
   Не модалка в потоке, а самостоятельная страница: тёмный hero сайта →
   калькулятор рабочей секцией → методика → переход к продукту.
   Инструмент здесь не «карточка поверх фона», а сама подложка секции,
   поэтому у него нет ни рамки, ни скруглений, ни собственной шапки.
   ------------------------------------------------------------------------ */

/* Hero страницы-инструмента ниже витринного: там min-height 820px держит
   «плакат», здесь за ним сразу идёт калькулятор, и пустой экран перед делом
   только отдаляет от него. Контента в hero ~430px, столько и берём. */
.itb-roi-hero {
  min-height: 0;
  padding-bottom: clamp(36px, 4vw, 56px);
}

/* Пруфы справа от текста: место у правого края всё равно занято только
   свечением, а под текстом четыре плашки разъезжались в неровную ленту. */
.itb-roi-hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.itb-roi-hero--split .itb-roi-hero__grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
}
.itb-roi-hero__lead {
  min-width: 0;
}
/* В колонке заголовку не нужна витринная ширина: её задаёт сама колонка. */
.itb-roi-hero--split .itb-hero__title,
.itb-roi-hero--split .itb-hero__subtitle {
  max-width: none;
}

.itb-roi-hero__proof {
  min-width: 0;
}

.itb-roi-hero__proof-note {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.itb-roi-hero__proof-list {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* Пруф — пара «показатель / величина»: величина крупная и моношрифтом,
   она и есть доказательство. */
.itb-roi-hero__proof-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.itb-roi-hero__proof-label {
  font-size: 13.5px;
  color: var(--text-secondary);
}

.itb-roi-hero__proof-value {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: var(--text-primary);
  white-space: nowrap;
}

/* ── Секция с калькулятором ── */

/* Светлая полоса во всю ширину: калькулятор — рабочая зона страницы, и
   светлый фон отделяет её от тёмного сайта сам, без рамок и карточек.
   Токены светлой палитры (--roi-*) объявлены на .itb-roi выше и здесь
   повторены для секции: фон полосы должен совпасть с фоном инструмента. */
.itb-roi-tool {
  background: #f7f9fc;
  padding-top: clamp(34px, 4vw, 56px);
  padding-bottom: clamp(34px, 4vw, 56px);
}

/* Контейнер темы, а не свой: калькулятор обязан вставать по тому же левому
   краю, что заголовок hero и CTA. Со своей шириной 1320px он уезжал влево
   на 23px, и вертикаль страницы ломалась на глаз. */
.itb-roi-tool__inner {
  width: 100%;
}

/* На странице калькулятор светлый, как в модалке (плотная сетка цифр читается
   на светлом легче), но не карточкой: секция заливается светлым во всю ширину,
   а у самого инструмента нет ни рамки, ни скруглений, ни своей подложки. */
.itb-roi--inline {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.itb-roi--inline .itb-roi__shell {
  height: auto;
}
.itb-roi--inline .itb-roi__body {
  /* Прокручивается страница, а не внутренность. */
  overflow: visible;
  padding: 0;
}

@media (max-width: 640px) {
  /* На телефоне калькулятор занимает экран целиком: полей много, рамка и
     скругления только отнимают место. dvh, а не vh — иначе адресная строка
     Safari срезает низ. */
  /* Только модалка: на странице калькулятор в потоке и высотой экрана
     не ограничен (:not(--inline) — иначе страница схлопнется в 100dvh). */
  .itb-roi:not(.itb-roi--inline) {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: none;
    border-radius: 0;
  }
  .itb-roi__head {
    padding: 20px 18px 18px;
  }
  .itb-roi__body {
    padding: 18px 18px 24px;
  }
  .itb-roi__panel {
    padding: 18px;
  }
  .itb-roi__summary {
    padding: 16px 18px;
  }
  .itb-roi__fold-body {
    padding: 2px 18px 18px;
  }
  /* Пары полей и сегменты в столбик: на узком экране два инпута рядом
     сжимаются до нечитаемых. */
  .itb-roi__pair,
  .itb-roi__kpis {
    grid-template-columns: minmax(0, 1fr);
  }
  /* В одну колонку выравнивать нечего: subgrid снимаем, поля идут обычным
     потоком со своим вертикальным ритмом. */
  .itb-roi__pair {
    grid-template-rows: none;
    gap: 16px;
  }
  .itb-roi__pair > .itb-roi__field,
  .itb-roi__pair > [data-roi-capex-field] {
    display: block;
    grid-row: auto;
  }
  .itb-roi__pair > [data-roi-capex-field] > .itb-roi__field {
    display: block;
  }
  .itb-roi__pair .itb-roi__field-top {
    align-items: baseline;
    padding-bottom: 0;
    margin-bottom: 8px;
  }
  .itb-roi__seg {
    flex-wrap: wrap;
  }
  .itb-roi__seg button {
    flex: 1 1 100%;
  }
  .itb-roi__seg--small button {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .itb-roi__bar-fill,
  .itb-roi__chevron {
    transition: none;
  }
}

/* ─── Страница /roi-kalkulyator ────────────────────────────────────────────
   Не модалка в потоке, а самостоятельная страница: тёмный hero сайта →
   калькулятор рабочей секцией → методика → переход к продукту.
   Инструмент здесь не «карточка поверх фона», а сама подложка секции,
   поэтому у него нет ни рамки, ни скруглений, ни собственной шапки.
   ------------------------------------------------------------------------ */

/* Hero страницы-инструмента ниже витринного: там min-height 820px держит
   «плакат», здесь за ним сразу идёт калькулятор, и пустой экран перед делом
   только отдаляет от него. Контента в hero ~430px, столько и берём. */
.itb-roi-hero {
  min-height: 0;
  padding-bottom: clamp(36px, 4vw, 56px);
}

.itb-roi-hero__proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 12px;
  padding: 0;
}

/* Пруф — не чип с текстом, а пара «показатель / величина»: величина крупная
   и моношрифтом, потому что она и есть доказательство. */
.itb-roi-hero__proof-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 18px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.itb-roi-hero__proof-label {
  font-size: 12.5px;
  color: var(--text-muted);
}

.itb-roi-hero__proof-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.1;
  color: var(--text-primary);
}


/* ── Секция с калькулятором ── */

@media (max-width: 1100px) {
  /* В одну колонку: уже 1100px правая колонка ужимается так, что величина
     переносится под подпись. */
  .itb-roi-hero--split .itb-roi-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .itb-roi-hero__proof-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .itb-roi-hero__proof-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .itb-roi-hero__proof-item {
    padding: 11px 14px;
  }
}

/* css/sections/cta-form.css */
/* Форма заявки в CTA-секции (карточка по Figma). */

.itb-cta-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
}

.itb-cta-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.itb-cta-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.itb-cta-form__label {
    font-size: 13px;
    color: var(--text-secondary);
}

.itb-cta-form input[type="text"],
.itb-cta-form textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: inherit;
    outline: none;
    transition: border-color .15s;
}

.itb-cta-form input[type="text"]:focus,
.itb-cta-form textarea:focus {
    border-color: var(--accent);
}

.itb-cta-form textarea {
    resize: vertical;
    min-height: 96px;
}

.itb-cta-form__submit {
    width: 100%;
    justify-content: center;
    cursor: pointer;
}

.itb-cta-form__submit.is-loading {
    opacity: .6;
    pointer-events: none;
}

/* Honeypot: скрыт от людей, доступен ботам. */
.itb-cta-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Инлайн-результат. */
.itb-cta__result {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--accent-bg);
    color: var(--text-primary);
    font-size: 14px;
}

.itb-cta__result.is-error {
    background: rgba(220, 60, 60, 0.12);
}

/* Активная кнопка-пресет. */
.itb-cta__preset {
    cursor: pointer;
}

.itb-cta__preset.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Кратковременная подсветка формы после клика по пресету. */
.itb-cta-form.is-flash {
    box-shadow: 0 0 0 2px var(--accent);
    transition: box-shadow .2s;
}

/* ─── Согласия (152-ФЗ) ───────────────────────────────────────────────────── */

.itb-cta-form__consents {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.itb-consent {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    cursor: pointer;
}

/* Нативный чекбокс скрыт визуально, но доступен клавиатуре и скринридеру. */
.itb-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background: var(--bg-primary);
    border: 1px solid var(--border-tag);
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.itb-consent input[type="checkbox"]:hover {
    border-color: var(--accent);
}

.itb-consent input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
    /* Галочка отрисована фоном, чтобы не плодить псевдоэлемент на input. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

.itb-consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.itb-consent__text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.itb-consent__text a {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.itb-consent__text a:hover {
    color: var(--accent-light);
}

.itb-consent__req {
    color: var(--accent);
}

.itb-cta-form__submit:disabled {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .itb-cta-form__row {
        grid-template-columns: 1fr;
    }
    .itb-cta-form {
        padding: 20px;
        gap: 14px;
    }
    /* 16px — порог, ниже которого Safari на iOS зумит страницу при фокусе поля. */
    .itb-cta-form input[type="text"],
    .itb-cta-form textarea {
        font-size: 16px;
        padding: 13px 14px;
    }
    .itb-cta-form textarea {
        min-height: 112px;
    }
    .itb-cta-form__submit {
        height: 52px;
    }
}

/* css/responsive.css */
/* ==========================================================================
   Глобальный адаптив темы.
   Подключается последним (см. itb_enqueue_assets) — здесь только те правила,
   что должны перекрывать секции. Адаптив, живущий внутри одной секции,
   остается в ее собственном файле css/sections/*.css.
   ========================================================================== */

/* ==========================================================================
   Планшет — ≤1024px
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --section-py: 72px;
  }
}

/* ==========================================================================
   Мобильный — ≤768px
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --section-py: 56px;
  }

  /* Шапка секции: заголовок ближе к контенту, подзаголовок мельче. */
  .itb-section__header { margin-bottom: 32px; }
  .itb-section__subtitle { font-size: 15.5px; }

  /* Лента экспертизы переносится на несколько строк. Точка-разделитель у
     последнего пункта строки повисала бы в пустоте — заменяем ее на воздух. */
  .itb-expertise__inner { gap: 10px; padding-block: 16px; }
  .itb-expertise__list { gap: 6px 18px; }
  .itb-expertise__item { padding: 0; }
  .itb-expertise__item:not(:last-child)::after { display: none; }
}

/* ==========================================================================
   Малый мобильный — ≤480px
   ========================================================================== */

@media (max-width: 480px) {
  :root {
    --section-py: 48px;
  }

  /* Кнопки: крупнее тапзона, но без переполнения по ширине. */
  .btn {
    padding: 15px 22px;
    font-size: 15px;
  }
}