/* ══════════════════════════════════════════════════════════════════════════
   Сайт 2026 — главная /ru.

   Направление: стиль 03b из «Каталога визуальных стилей» — тёмное стекло и
   панели данных. Выбран после просмотра пяти концептов: победил `02a-hud`.
   Рецепт стиля целиком, и он здесь главнее прежнего дизайн-контракта:
     • один крупный стеклянный блок на сцену, второй стеклянной плоскости нет;
     • под стеклом обязателен расфокус — иначе это мутный прямоугольник;
     • радиус 28–48px, заливка стекла 10–20%, светлая обводка по верхней кромке;
     • панели данных по углам кадра — только линии, ни одной заливки;
     • центр лица свободен;
     • микро-лейблы 11px моноширинным капсом с трекингом;
     • один акцентный цвет проведён через три уровня.

   Акцентов два, и это осознанно. `--act` (оранжевый) стоит ровно там, где
   звучит речь: волна, точка «идёт разговор», проваленный критерий. `--blue`
   живёт только в наведении и фокусе. В покое на странице ни того, ни другого
   почти не видно, поэтому правило «один акцент» не нарушено по существу.

   Тут нет Tailwind и нет старой дизайн-системы (Onest + #6749C1): смешивать
   нельзя. Этот файл обслуживает ровно одну страницу — /ru.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /*
    Чернила заданы каналами, а не цветом: производные ниже и десяток
    полупрозрачных мест по файлу ссылаются на `--ink-rgb`.

    Осторожно: одного переопределения `--ink-rgb` в светлой секции мало.
    `var()` внутри значения пользовательского свойства подставляется там,
    где свойство объявлено, а дальше наследуется уже готовым цветом —
    поэтому `--mute` и `--dim` объявляются в `.sec--light` заново. Прямые
    обращения вида `rgba(var(--ink-rgb), .16)` в правилах переключаются
    сами, им хватает одной строки.
  */
  --ink-rgb: 241, 241, 242;

  --bg: #101114;
  --bg-2: #0b0c0e;
  --ink: #f1f1f2;
  --mute: rgba(var(--ink-rgb), 0.56);
  --dim: rgba(var(--ink-rgb), 0.68);
  --faint: rgba(var(--ink-rgb), 0.13);
  --faint-2: rgba(var(--ink-rgb), 0.07);

  /* Текст на заливке цвета чернил (кнопка) и утопленная плашка. */
  --on-ink: #0b0c0e;
  --well: #0d0e11;

  /* Подложка под окном продукта. */
  --demo-a: #0d0e11;
  --demo-b: #0a0b0d;
  --demo-glow: rgba(141, 151, 242, 0.08);

  --act: #fa582d;
  --blue: #8d97f2;

  --r-glass: 36px;
  --r: 20px;
  --r-sm: 10px;
  --pill: 999px;

  --max: 1440px;
  --pad: clamp(18px, 3vw, 44px);
  --sec: clamp(72px, 8vw, 128px);

  --f: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Скин продуктового интерфейса. Скелет окна общий, под стиль страницы
     меняются только эти токены. */
  --ui-surface: #17191d;
  --ui-solid: #17191d;
  --ui-surface-2: #131519;
  --ui-line: rgba(241, 241, 242, 0.12);
  --ui-ink: #f1f1f2;
  --ui-mute: rgba(241, 241, 242, 0.58);
  --ui-accent: #8d97f2;
  --ui-accent-bg: rgba(141, 151, 242, 0.16);
  --ui-good: #6fbf92;
  --ui-good-bg: rgba(111, 191, 146, 0.12);
  --ui-warn: #e0b055;
  --ui-warn-bg: rgba(224, 176, 85, 0.12);
  --ui-bad: #fa582d;
  --ui-bad-bg: rgba(250, 88, 45, 0.12);

  /* Те же зелёный и красный, но для текста. На тёмном совпадают с заливкой,
     на светлом заливка остаётся прежней, а текст затемняется: 14px жирным
     исходные цвета давали 3,4–3,6 вместо нормы 4,5. */
  --ui-good-ink: #6fbf92;
  --ui-bad-ink: #fa582d;
  --ui-r: 20px;
  --ui-r-sm: 10px;
  --ui-shadow: 0 34px 80px -46px rgba(0, 0, 0, 0.9);
  --ui-font: var(--f);
  --ui-mono: var(--fm);

  /* Сцена персоны внутри окна разговора. */
  --ui-stage-glow: rgba(241, 241, 242, 0.14);
  --ui-stage-a: #1d2026;
  --ui-stage-b: #14161a;
}

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

/*
  Плавная прокрутка нужна ровно одной ссылке — «к содержимому» в начале
  страницы. Объявленная глобально, она распространяется и на то, как
  браузер возвращает позицию после перезагрузки: вместо мгновенного
  возврата страница едет от шапки вниз, и это читается как самопроизвольный
  прыжок наверх с последующим возвратом. Поэтому включаем её только тогда,
  когда на странице действительно есть цель якоря.
*/
@media (prefers-reduced-motion: no-preference) {
  html:has(:target) {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--f);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
p,
figure,
ul {
  margin: 0;
}
ul {
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
[hidden] {
  display: none !important;
}
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: #0b0c0e;
  font-weight: 700;
}
.skip:focus {
  left: 12px;
  top: 12px;
}

/* ── типографика ──────────────────────────────────────────────────────── */

/* Микро-лейбл: моноширинный капс с трекингом. Средних кеглей у служебных
   надписей не бывает — либо 11px капсом, либо крупная цифра. */
.lb {
  display: block;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Крупная цифра: тонкое начертание, табличные знаки, отрицательный трекинг. */
.v {
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-size: clamp(40px, 5vw, 72px);
}

.h1 {
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.04;
  font-size: clamp(34px, 3.6vw, 54px);
  text-wrap: balance;
}
.h2 {
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.06;
  font-size: clamp(30px, 3.4vw, 50px);
  /* 28ch держит заголовки в две строки. На 18ch самый длинный из них
     («Разговор попадает к одному аналитику...») уезжал в три. */
  max-width: 28ch;
  text-wrap: balance;
}
.lead {
  color: var(--dim);
  max-width: 62ch;
}
.mute {
  color: var(--mute);
}

/* ── кнопки и ссылки ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--on-ink);
  font: 700 14px/1 var(--f);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.1s ease;
}
.btn:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-ink);
}
.btn:active {
  transform: translateY(1px);
}
.btn--sm {
  height: 40px;
  padding: 0 18px;
  font-size: 13px;
}
/* Прозрачная кнопка на кадре садится на среднесерый участок расфокуса и
   даёт 3:1. Тёмная заливка возвращает контраст, не меняя вида кнопки. */
.btn--line {
  background: rgba(11, 12, 14, 0.62);
  color: var(--ink);
  border-color: rgba(241, 241, 242, 0.24);
}
.btn--line:hover {
  background: rgba(11, 12, 14, 0.82);
  border-color: var(--blue);
  color: var(--ink);
}

/* Ссылка-кнопка без контура. Подчёркивание не висит постоянно, а пробегает
   слева направо по наведению и по фокусу с клавиатуры. */
.ln {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  font-family: var(--fm);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.16s ease;
}
.ln::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.34s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.ln:hover,
.ln:focus-visible {
  color: var(--blue);
}
.ln:hover::after,
.ln:focus-visible::after {
  transform: scaleX(1);
}

.pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 13px;
  border: 1px solid var(--faint);
  border-radius: var(--pill);
  font-family: var(--fm);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}

/* ── шапка ────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.nav.is-stuck {
  background: rgba(12, 13, 15, 0.82);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--faint-2);
}
.nav__in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  flex: none;
}
.logo img {
  width: 24px;
  height: 24px;
  filter: grayscale(1) brightness(2.6);
}
.menu {
  display: flex;
  align-items: center;
  gap: 24px;
}
/*
  `display: flex` тут не для раскладки, а против распорки строки. Пункты
  с выпадашкой лежат в этой обёртке, а «Тарифы» — прямой ребёнок `.menu`.
  Без `flex` обёртка блокифицируется, ссылка внутри остаётся строчной и
  садится на базовую линию распорки 16px/1.6 — отсюда расхождение в ~2px
  между пунктами с детьми и без.
*/
.menu__item {
  position: relative;
  display: flex;
  align-items: center;
}
.menu a,
.menu button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color 0.16s ease;
}
.menu a:hover,
.menu button:hover,
.menu a[aria-current='page'] {
  color: var(--ink);
}
.menu__drop {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 5;
  min-width: 232px;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid var(--faint);
  border-radius: var(--r);
  background: rgba(16, 17, 20, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
}
.menu__item:hover .menu__drop,
.menu__item:focus-within .menu__drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.menu__drop a,
.menu__drop button {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  text-align: left;
  letter-spacing: 0.06em;
  text-transform: none;
  font-family: var(--f);
  font-size: 13.5px;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}
.menu__drop a:hover,
.menu__drop button:hover {
  background: var(--faint-2);
  color: var(--ink);
}
.nav__r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--faint);
  border-radius: var(--pill);
  position: relative;
}
.nav__burger i,
.nav__burger i::before,
.nav__burger i::after {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  transform: translateX(-50%);
}
.nav__burger i {
  top: 50%;
  margin-top: -0.75px;
}
.nav__burger i::before,
.nav__burger i::after {
  content: '';
  left: 0;
  transform: none;
}
.nav__burger i::before {
  top: -5px;
}
.nav__burger i::after {
  top: 5px;
}
.nav__mobile {
  display: none;
  padding: 10px var(--pad) 26px;
  border-top: 1px solid var(--faint-2);
  background: rgba(12, 13, 15, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav__mobile a,
.nav__mobile button {
  display: block;
  width: 100%;
  padding: 11px 0;
  text-align: left;
  border-bottom: 1px solid var(--faint-2);
  font-size: 15px;
}
.nav__mobile .sub {
  padding-left: 16px;
  color: var(--mute);
  font-size: 13.5px;
}
.nav__mobile-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
.nav.is-open .nav__mobile {
  display: block;
}

/* ── 01 · сцена ───────────────────────────────────────────────────────── */

.scene {
  position: relative;
  min-height: min(90vh, 860px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg-2);
  isolation: isolate;
}
/*
  Фон сцены. Стилю нужен расфокус — без него стеклу нечего размывать, и оно
  превращается в серый прямоугольник. Слой намеренно крупнее кадра: blur
  размывает и края тоже, а вылезающая полупрозрачная кромка выдаёт приём.

  `max-width: none` обязателен: базовое `img, video { max-width: 100% }`
  режет слой до ширины контейнера, и справа остаётся полоса чистого фона.

  Сдвиг вправо сделан трансформацией, а не `object-position`. У кадра и у
  сцены почти одинаковые пропорции, поэтому `cover` почти не обрезает по
  горизонтали и смещение точки кадрирования по X ничего не меняет.
*/
.scene__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 26%;
  transform: scale(1.12) translateX(5%);
  filter: grayscale(1) brightness(0.58) contrast(1.1) blur(8px);
}
/* Постер лежит под видео и показывается, пока оно не заиграло, а при
   выключенной анимации остаётся навсегда. */
.scene__media--still {
  z-index: 0;
}
.scene__media--live {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.scene__media--live.is-on {
  opacity: 1;
}
.scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      100deg,
      rgba(9, 10, 12, 0.94) 0%,
      rgba(9, 10, 12, 0.56) 40%,
      rgba(9, 10, 12, 0.12) 68%
    ),
    radial-gradient(84% 76% at 56% 44%, rgba(9, 10, 12, 0), rgba(9, 10, 12, 0.7) 94%);
  pointer-events: none;
}
.scene__in {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 84px) var(--pad);
}
.scene__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
/*
  Служебные надписи на сцене светлее, чем на сплошном листе. Замер по
  пикселям: на 56% прозрачности «ТРЕНИРУЮТСЯ НА ПЛАТФОРМЕ» давало 3,97:1,
  а пилюли 4,32:1 — для 11px этого мало, нужно 4,5:1.
*/
.scene .lb,
.scene .pill {
  color: rgba(241, 241, 242, 0.82);
}
.scene .pill {
  border-color: rgba(241, 241, 242, 0.22);
}

/* Одно стекло на сцену. Второй стеклянной плоскости в кадре нет. */
.glass {
  position: relative;
  width: min(638px, 100%);
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--r-glass);
  background: rgba(241, 241, 242, 0.06);
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  border: 1px solid rgba(241, 241, 242, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 30px 80px -40px rgba(0, 0, 0, 0.82);
}
.glass__lead {
  margin-top: 16px;
  max-width: 38ch;
  color: rgba(241, 241, 242, 0.76);
}
.glass__ctas {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.glass__foot {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--faint);
}

/* Панели данных по углам кадра: только линии, ни одной заливки. */
.hud {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.hud--tr {
  top: clamp(24px, 4vw, 54px);
  right: var(--pad);
  align-items: flex-end;
  text-align: right;
}
.hud--br {
  bottom: clamp(24px, 4vw, 54px);
  right: var(--pad);
  align-items: flex-end;
  text-align: right;
}
.hud--bl {
  bottom: clamp(24px, 4vw, 54px);
  left: var(--pad);
}
.hud .v {
  font-size: clamp(34px, 3.4vw, 56px);
}
.dots {
  width: 132px;
  height: 52px;
  background-image: radial-gradient(circle, rgba(241, 241, 242, 0.42) 0.9px, transparent 1px);
  background-size: 11px 11px;
}
.slider {
  position: relative;
  width: 148px;
  height: 1px;
  background: var(--faint);
}
.slider i {
  position: absolute;
  top: -3px;
  left: 68%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}
.slider b {
  position: absolute;
  top: 8px;
  right: 0;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(241, 241, 242, 0.34);
}
.live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.live .lb {
  color: var(--ink);
}
.dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--act);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}
.wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}
.wave i {
  width: 2px;
  height: 4px;
  background: var(--act);
  animation: wave 1.1s ease-in-out infinite;
}
.wave i:nth-child(2) {
  animation-delay: 0.1s;
}
.wave i:nth-child(3) {
  animation-delay: 0.2s;
}
.wave i:nth-child(4) {
  animation-delay: 0.3s;
}
.wave i:nth-child(5) {
  animation-delay: 0.4s;
}
.wave i:nth-child(6) {
  animation-delay: 0.5s;
}
.wave i:nth-child(7) {
  animation-delay: 0.6s;
}
.wave i:nth-child(8) {
  animation-delay: 0.7s;
}
@keyframes wave {
  0%,
  100% {
    height: 4px;
  }
  50% {
    height: 16px;
  }
}

/* ── разделы ──────────────────────────────────────────────────────────── */

.sec {
  padding-block: var(--sec);
  border-top: 1px solid var(--faint-2);
}
.sec--flush {
  border-top: 0;
}
/* Служебная строка раздела: номер слева, тема, ремарка справа. Нумерация
   сквозная и продолжается до конца страницы. */
.sec__h {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--faint-2);
}
.sec__h .lb:last-child {
  margin-left: auto;
  text-align: right;
}
.sec__t {
  margin-top: clamp(26px, 3vw, 44px);
}
.sec__lead {
  margin-top: 18px;
  max-width: 58ch;
  color: var(--dim);
}
.sec__cta {
  margin-top: 30px;
  display: flex;
  gap: 12px 28px;
  flex-wrap: wrap;
  align-items: center;
}
/* Почта на финальном экране — второй призыв, а не сноска: набрана крупно
   и стоит на одной высоте с кнопкой. */
.mail {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 48px;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color 0.16s ease;
}
.mail::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.34s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.mail:hover,
.mail:focus-visible {
  color: var(--blue);
}
.mail:hover::after,
.mail:focus-visible::after {
  transform: scaleX(1);
}

/* Подзаголовок внутри раздела: отбивает материалы от блока с демо. */
.sec__sub {
  margin-top: clamp(44px, 5vw, 76px);
}
.sec__sub + .mats {
  margin-top: 14px;
}

/* ── логотипы клиентов ────────────────────────────────────────────────── */

.logos {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 44px);
  flex-wrap: wrap;
  padding-block: 26px;
  border-top: 1px solid var(--faint-2);
}
.logos .lb {
  flex: none;
}
/*
  Знак рисуется маской, а не картинкой: из файла берётся только силуэт,
  цвет задаёт страница. Исходники разной полярности — тёмный знак на белом,
  светлый на прозрачном, фиолетовая пилюля, — и любой общий фильтр одни
  выбеливал, а другие топил. Размер задаётся высотой и пропорцией файла.
*/
.logos__l {
  flex: none;
  height: var(--lh, 24px);
  width: calc(var(--lh, 24px) * var(--ar, 3));
  background: var(--ink);
  -webkit-mask: var(--l) no-repeat center / contain;
  mask: var(--l) no-repeat center / contain;
  opacity: 0.58;
  transition: opacity 0.2s ease;
}
.logos:hover .logos__l {
  opacity: 0.74;
}

/* ── 02 · контур: четыре шага ─────────────────────────────────────────── */

.flow {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--faint);
}
.flow__col {
  position: relative;
  padding: 22px 22px 26px;
  border-left: 1px solid var(--faint-2);
}
.flow__col:first-child {
  border-left: 0;
  padding-left: 0;
}
.flow__col b {
  display: block;
  margin-top: 12px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.flow__col span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute);
}
.flow__col i {
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition:
    width 0.7s cubic-bezier(0.22, 0.8, 0.3, 1),
    background-color 0.25s ease;
}
.flow.is-visible .flow__col i {
  width: 100%;
}
.flow__col:nth-child(2) i {
  transition-delay: 0.12s;
}
.flow__col:nth-child(3) i {
  transition-delay: 0.24s;
}
.flow__col:nth-child(4) i {
  transition-delay: 0.36s;
}
.flow__col--key i {
  background: var(--act);
}
.flow__col--key .lb {
  color: var(--act);
}
/*
  Подсветка следует за курсором: пока курсор в ряду, «ключевой» шаг гаснет,
  а оранжевым горит тот, на который навели. Порядок правил важен —
  специфичность у них одинаковая, выигрывает последнее.
*/
@media (hover: hover) {
  .flow__col .lb,
  .flow__col b,
  .flow__col span {
    transition: color 0.2s ease;
  }
  .flow:hover .flow__col--key i {
    background: var(--ink);
  }
  .flow:hover .flow__col--key .lb {
    color: var(--mute);
  }
  .flow .flow__col:hover i {
    background: var(--act);
  }
  .flow .flow__col:hover .lb {
    color: var(--act);
  }
  .flow .flow__col:hover span {
    color: var(--dim);
  }
}
.flow__note {
  margin-top: 22px;
  color: var(--mute);
  font-size: 14px;
}

/* ── карточки продуктов: строгая сетка ────────────────────────────────── */

/*
  Разделитель и факт стоят на одной линии во всех четырёх колонках. Держит
  это subgrid: строки задаёт ряд, карточка их наследует. Без него высота
  строк считается внутри карточки, и черта съезжает вслед за длиной текста —
  ровно то, что бросалось в глаза на прошлом заходе.
*/
.grid {
  margin-top: clamp(34px, 4vw, 60px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto auto;
  border-top: 1px solid var(--faint);
}
.cell {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 12px;
  padding: 22px 22px 24px;
  border-left: 1px solid var(--faint-2);
}
.cell:nth-child(1) {
  grid-column: 1;
  border-left: 0;
  padding-left: 0;
}
.cell:nth-child(2) {
  grid-column: 2;
}
.cell:nth-child(3) {
  grid-column: 3;
}
.cell:nth-child(4) {
  grid-column: 4;
}
@supports not (grid-template-rows: subgrid) {
  .grid {
    grid-template-rows: none;
  }
  .cell {
    grid-row: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cell__f {
    margin-top: auto;
  }
}
.cell h3 {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.cell p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute);
}
.cell__f {
  padding-top: 14px;
  border-top: 1px solid var(--faint-2);
}
.cell__f .v {
  font-size: 30px;
  color: var(--ink);
}
.cell__f .lb {
  margin-top: 8px;
}
.cell .cell__note {
  color: var(--act);
}

/* ── подложка под окно продукта ───────────────────────────────────────── */

/*
  Раньше под окном лежал расфокусированный портрет. Он тянул на себя
  внимание и подсвечивал белый текст интерфейса снизу, отчего тот сливался.
  Теперь это ровное тёмное поле с еле заметной сеткой: интерфейс читается,
  а раздел не становится пустым прямоугольником.
*/
.demo {
  position: relative;
  margin-top: clamp(46px, 5vw, 74px);
  padding: clamp(16px, 2vw, 30px);
  border: 1px solid var(--faint-2);
  border-radius: calc(var(--ui-r) + 16px);
  background:
    radial-gradient(120% 96% at 22% 0%, var(--demo-glow), transparent 62%),
    linear-gradient(180deg, var(--demo-a), var(--demo-b));
  overflow: hidden;
  isolation: isolate;
}
.demo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(var(--ink-rgb), 0.16) 0.8px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000, transparent 78%);
  mask-image: radial-gradient(90% 70% at 50% 0%, #000, transparent 78%);
  opacity: 0.5;
  pointer-events: none;
}
.demo > * {
  position: relative;
  z-index: 1;
}
/* Окно разговора стоит дальше от схемы контура: оно начиналось почти
   сразу за текстом и читалось продолжением предыдущего экрана. */
#platform .demo {
  margin-top: clamp(74px, 7.5vw, 118px);
}
.demo__cap {
  margin-top: 14px;
  display: flex;
  gap: 18px;
  align-items: baseline;
  flex-wrap: wrap;
}
.demo__cap .lb:last-child {
  margin-left: auto;
  text-align: right;
}
.demo__row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}

/* ── 04 · направления ─────────────────────────────────────────────────── */

.rail {
  margin-top: clamp(34px, 4vw, 60px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
}
.dir {
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid var(--faint-2);
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.02);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}
.dir:hover {
  border-color: rgba(141, 151, 242, 0.42);
  background: rgba(var(--ink-rgb), 0.04);
  transform: translateY(-2px);
}
/*
  Фотография не лежит карточкой поверх тёмного листа, а растворяется в нём
  краями. Радиальная маска снимает границу кадра, градация уводит снимок
  в тон страницы. Отдельной белой плашки под человеком не возникает.
*/
.dir__fig {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--well);
}
.dir__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--op, 50% 30%);
  filter: grayscale(0.92) brightness(0.62) contrast(1.16);
  -webkit-mask-image: radial-gradient(84% 88% at 58% 36%, #000 44%, transparent 96%);
  mask-image: radial-gradient(84% 88% at 58% 36%, #000 44%, transparent 96%);
  transition: filter 0.3s ease;
}
.dir:hover .dir__fig img {
  filter: grayscale(0.7) brightness(0.74) contrast(1.16);
}
.dir__b {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
  flex: 1;
}
.dir__b h3 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.dir__b p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mute);
}
.dir__b .ln {
  margin-top: auto;
  padding-top: 6px;
}

/* ── 05 · кейсы ───────────────────────────────────────────────────────── */

.cases {
  margin-top: clamp(34px, 4vw, 60px);
  display: grid;
  gap: clamp(40px, 5vw, 76px);
}
.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 76px);
  align-items: center;
}
/* Кейсы теперь живут в отдельных секциях по одному, и `nth-child` их
   больше не чередует — сторона задаётся классом из разметки. */
.case--flip .case__fig {
  order: 2;
}
/*
  В кейсах у фотографий фона нет вообще: человек вырезан по контуру
  (`img/2026/cutout/*`, альфа-канал), и стоит прямо на листе. Раньше здесь
  лежал полный кадр со студийной подложкой, подтёртый по краям радиальной
  маской, — от подложки всё равно оставалось серое пятно вокруг фигуры.

  Чтобы вырезка не выглядела наклейкой, за ней мягкое пятно света, а низ,
  где исходный кадр обрезал фигуру, растворяется градиентом.
*/
.case__fig {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: end center;
  overflow: hidden;
}
.case__fig::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(44% 52% at 50% 56%, rgba(var(--ink-rgb), 0.1), transparent 72%);
}
.case__fig img {
  position: relative;
  width: auto;
  max-width: 100%;
  height: 94%;
  object-fit: contain;
  filter: grayscale(0.88) brightness(0.82) contrast(1.06);
  transition: filter 0.5s ease;
  /* Низ растворяется: исходный кадр обрезал фигуру по пояс, и без этого
     она упиралась бы в прямую линию. */
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
}
/*
  Кадр, где человек занимает всю рамку целиком (торс с планшетом), после
  вырезки остаётся прямоугольником: обрезали его не мы, а фотограф. Такому
  кадру нужна ещё и кольцевая маска по кромкам. Две маски складываются
  пересечением; браузер без `mask-composite` просто покажет картинку
  целиком — ломаться нечему.
*/
.case__fig--bleed img {
  -webkit-mask-image:
    linear-gradient(to bottom, #000 76%, transparent 100%),
    radial-gradient(76% 82% at 50% 46%, #000 34%, transparent 96%);
  mask-image:
    linear-gradient(to bottom, #000 76%, transparent 100%),
    radial-gradient(76% 82% at 50% 46%, #000 34%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/*
  Два кейса идут снимком целиком: интерьер и студийную стену из кадра не
  убрать, вырезки там нет. Кадр заполняет рамку и растворяется по всем
  кромкам — прямоугольник на листе не читается.
*/
.case__fig--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 74%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 74%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Цвет возвращается по наведению — на сам кадр или на «читать кейс». */
.case__fig:hover img,
.case:has(.ln:hover) .case__fig img,
.case:has(.ln:focus-visible) .case__fig img {
  filter: grayscale(0) brightness(0.96) contrast(1.02);
}
.case h3 {
  margin-top: 14px;
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}
.case p {
  margin-top: 14px;
  color: var(--dim);
  max-width: 48ch;
}
.case .ln {
  margin-top: 20px;
}
.case__nums {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--faint);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.case__nums .v {
  font-size: clamp(32px, 3vw, 46px);
}
.case__nums .v--text {
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.15;
}
.case__nums .lb {
  margin-top: 10px;
}

/* ── 06 · технология и компания ───────────────────────────────────────── */

.chips {
  margin-top: clamp(30px, 3.4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips .pill {
  height: 34px;
  padding: 0 15px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--dim);
}
.tline {
  margin-top: clamp(34px, 4vw, 58px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--faint);
}
.tl {
  position: relative;
  padding: 20px 18px 0 0;
}
.tl::before {
  content: '';
  position: absolute;
  top: -3.5px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
}
.tl--now::before {
  background: var(--act);
}
.tl b {
  display: block;
  font-family: var(--fm);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.tl span {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mute);
}
.tl--now b {
  color: var(--act);
}

/* ── 07 · материалы ───────────────────────────────────────────────────── */

.mats {
  margin-top: clamp(34px, 4vw, 58px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;
  border-top: 1px solid var(--faint);
}
.mat {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 12px;
  padding: 22px 22px 24px;
  text-align: left;
  border-left: 1px solid var(--faint-2);
  transition: background 0.2s ease;
}
.mat:nth-child(1) {
  grid-column: 1;
  border-left: 0;
  padding-left: 0;
}
.mat:nth-child(2) {
  grid-column: 2;
}
.mat:nth-child(3) {
  grid-column: 3;
}
@supports not (grid-template-rows: subgrid) {
  .mats {
    grid-template-rows: none;
  }
  .mat {
    grid-row: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .mat .ln {
    margin-top: auto;
  }
}
.mat:hover {
  background: rgba(var(--ink-rgb), 0.03);
}
.mat h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.mat p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mute);
}

/* ── подвал ───────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--faint-2);
  padding-block: clamp(44px, 5vw, 72px) 30px;
  background: var(--bg-2);
}
.foot__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: clamp(22px, 3vw, 44px);
}
.foot__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.foot__col b {
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 4px;
}
.foot__col a,
.foot__col button {
  font-size: 14px;
  color: rgba(241, 241, 242, 0.76);
  text-align: left;
  transition: color 0.16s ease;
}
.foot__col a:hover,
.foot__col button:hover {
  color: var(--blue);
}
.foot__legal {
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: 20px;
  border-top: 1px solid var(--faint-2);
  display: flex;
  gap: 8px 20px;
  flex-wrap: wrap;
}
.foot__fine {
  margin-top: 14px;
  display: flex;
  gap: 8px 26px;
  flex-wrap: wrap;
}

/* ── модалка заглушки ─────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--pad);
  background: rgba(6, 7, 8, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal__card {
  position: relative;
  width: min(460px, 100%);
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--faint);
  border-radius: var(--r-glass);
  background: #14161a;
  box-shadow: 0 40px 100px -50px rgba(0, 0, 0, 0.95);
}
.modal__card h2 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.modal__card p {
  margin-top: 12px;
  color: var(--mute);
}
.modal__card .btn {
  margin-top: 24px;
}
.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--faint);
  display: grid;
  place-items: center;
  color: var(--mute);
}
.modal__close:hover {
  color: var(--ink);
  border-color: var(--blue);
}
.modal__links {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--faint-2);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Продуктовый интерфейс на странице.

   Структура снята с настоящих прототипов — `Страница оценки диалога`,
   `Демо платформы` и панель навыков с лендинга `/ru/solutions/sales`.
   Под стиль страницы меняются только токены `--ui-*` в `:root`.
   Правило простое: скелет общий — шкура разная. Первая версия этого блока
   рисовалась прямо в вёрстке раздела и подгонялась под него так плотно, что
   переставала читаться интерфейсом.
   ══════════════════════════════════════════════════════════════════════════ */

.ui,
.ui *,
.ui *::before,
.ui *::after {
  box-sizing: border-box;
}

/* ── окно приложения: рейка, шапка, тело ───────────────────────────────── */
.ui {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  /* Интерфейс всегда светлее/темнее листа ровно настолько, чтобы читаться
     отдельной поверхностью, а не частью страницы. */
  isolation: isolate;
}
.ui--norail {
  grid-template-columns: minmax(0, 1fr);
}
/* Стеклянный режим панели: нужен там, где интерфейс лежит поверх
   расфокусированной сцены. Под стеклом обязан быть расфокус, иначе это
   мутный прямоугольник — на сплошном фоне модификатор не ставим. */
.ui--glass {
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    var(--ui-shadow);
}
@media (prefers-reduced-transparency: reduce) {
  .ui--glass {
    background: var(--ui-solid, var(--ui-surface));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.ui--norail .ui__rail {
  display: none;
}

.ui__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-right: 1px solid var(--ui-line);
  background: var(--ui-surface-2);
}
.ui__rail svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: var(--ui-mute);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.ui__rail .ui__mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ui-accent);
  flex: none;
}
.ui__rail .ui__spacer {
  flex: 1;
}
.ui__rail .ui__me {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ui-accent);
  color: var(--ui-surface);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ui__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ui__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--ui-line);
}
.ui__ava {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-line);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-mute);
}
.ui__title {
  min-width: 0;
}
.ui__title b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui__title span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ui-mute);
}
.ui__acts {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex: none;
}
.ui__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--ui-line);
  border-radius: calc(var(--ui-r-sm) - 2px);
  background: transparent;
  color: var(--ui-ink);
  font: 500 12.5px/1 var(--ui-font);
  white-space: nowrap;
}

/* ── вкладки «Разбор / Транскрипт» ─────────────────────────────────────── */
.ui__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ui-line);
}
.ui__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--ui-mute);
  font: 600 13px/1 var(--ui-font);
  cursor: pointer;
}
.ui__tab[aria-selected='true'] {
  color: var(--ui-ink);
  box-shadow: inset 0 -2px 0 0 var(--ui-accent);
}
.ui__tab:hover {
  color: var(--ui-ink);
}
.ui__tab:not([aria-selected='true']):hover {
  box-shadow: inset 0 -2px 0 0 var(--ui-line);
}
.ui__tab i {
  font-style: normal;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ui-surface-2);
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-mute);
}

/* ── тело: колонка баллов + колонка разбора ───────────────────────────── */
.ui__body {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  min-height: 0;
}
.ui__side {
  padding: 16px;
  border-right: 1px solid var(--ui-line);
  background: var(--ui-surface-2);
}
.ui__pane {
  padding: 16px 18px 18px;
  min-width: 0;
}

/* кольцо общего балла */
.ui__score {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ui__ring {
  position: relative;
  width: 92px;
  height: 92px;
  flex: none;
}
.ui__ring svg {
  display: block;
  transform: rotate(-90deg);
}
.ui__ring b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.ui__ring b span {
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-mute);
}
.ui__lb {
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui-mute);
}
.ui__score em {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: var(--ui-warn);
}
.ui__score small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ui-mute);
}

/* критерии: строка с баллом, шкалой и раскрытием */
.ui__crits {
  margin-top: 18px;
}
.ui__crits > .ui__lb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-bottom: 9px;
}
/* Подсказка про раскрытие — цветом интерактива, иначе её читают как
   продолжение заголовка колонки. */
.ui__crits > .ui__lb span {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--ui-font);
  font-size: 10.5px;
  color: var(--ui-accent);
}
.ui__crit {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-sm);
  background: var(--ui-surface);
  overflow: hidden;
  transition: border-color 0.18s ease;
}
.ui__crit:hover {
  border-color: rgba(141, 151, 242, 0.42);
}
.ui__crit + .ui__crit {
  margin-top: 7px;
}
.ui__crit > button {
  position: relative;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 10px 30px 11px 11px;
  cursor: pointer;
  font: inherit;
  transition: background-color 0.18s ease;
}
.ui__crit > button:hover {
  background: rgba(141, 151, 242, 0.08);
}
/* Уголок раскрытия: строка выглядит кнопкой, а не просто шкалой. */
.ui__crit > button::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 13px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ui-mute);
  border-bottom: 1.5px solid var(--ui-mute);
  transform: rotate(45deg);
  transition:
    transform 0.2s ease,
    border-color 0.18s ease;
}
.ui__crit > button:hover::after {
  border-color: var(--ui-accent);
}
.ui__crit.is-open > button::after {
  top: 16px;
  transform: rotate(-135deg);
}
.ui__crit__r {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}
.ui__crit__r b {
  margin-left: auto;
  font-size: 16px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ui__crit__r b s {
  text-decoration: none;
  color: var(--ui-mute);
  font-size: 11px;
  font-weight: 500;
}
/* span внутри кнопки: без display:block высота и отступ не применяются
   и шкала критерия не рисуется вовсе. */
.ui__bar {
  display: block;
  margin-top: 9px;
  height: 3px;
  border-radius: 2px;
  background: var(--ui-line);
  overflow: hidden;
}
.ui__bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--ui-warn);
}
.ui__crit--good .ui__bar i {
  background: var(--ui-good);
}
.ui__crit--bad .ui__bar i {
  background: var(--ui-bad);
}
.ui__crit__why {
  padding: 0 11px 11px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ui-mute);
}
.ui__crit[hidden-why] .ui__crit__why,
.ui__crit:not(.is-open) .ui__crit__why {
  display: none;
}

/* разбор: итог, сильные стороны, зоны роста */
.ui__h {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ui__sum {
  border-left: 3px solid var(--ui-accent);
  border-radius: 0 var(--ui-r-sm) var(--ui-r-sm) 0;
  background: var(--ui-accent-bg);
  padding: 12px 14px;
}
.ui__sum .ui__lb {
  margin-bottom: 5px;
  color: var(--ui-accent);
}
.ui__sum p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
.ui__group {
  margin-top: 16px;
}
.ui__grouph {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.ui__chip {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--ui-good-bg);
}
.ui__chip svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--ui-good);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.ui__group--warn .ui__chip {
  background: var(--ui-warn-bg);
}
.ui__group--warn .ui__chip svg {
  stroke: var(--ui-warn);
}
.ui__grouph b {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ui__grouph hr {
  flex: 1;
  height: 1px;
  border: 0;
  background: var(--ui-line);
  margin: 0;
}
.ui__grouph span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ui-mute);
}
.ui__card {
  border: 1px solid var(--ui-line);
  border-left: 3px solid var(--ui-good);
  border-radius: 3px var(--ui-r-sm) var(--ui-r-sm) 3px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
}
.ui__card + .ui__card {
  margin-top: 8px;
}
.ui__group--warn .ui__card {
  border-left-color: var(--ui-warn);
}
.ui__card b {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 700;
}
.ui__card p {
  margin: 0;
  color: var(--ui-mute);
}
.ui__card p + p {
  margin-top: 7px;
}
/* пилюля-ссылка на реплику: главный признак того, что вывод подкреплён */
.ui__ref {
  display: inline-block;
  padding: 0 5px;
  border: 0;
  border-radius: 4px;
  background: var(--ui-accent-bg);
  color: var(--ui-accent);
  font-family: var(--ui-mono);
  font-size: 11.5px;
  font-weight: 500;
  line-height: inherit;
  vertical-align: baseline;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.ui__ref:hover {
  background: var(--ui-accent);
  color: var(--ui-surface);
}
.ui__quote {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: var(--ui-r-sm);
  background: var(--ui-surface-2);
  font-size: 12.5px;
  line-height: 1.6;
  font-style: italic;
  color: var(--ui-ink);
}
.ui__fix {
  margin-top: 9px;
  padding: 10px 12px;
  border: 1px dashed var(--ui-good);
  border-radius: var(--ui-r-sm);
  background: var(--ui-good-bg);
}
.ui__fix .ui__lb {
  color: var(--ui-good);
  margin-bottom: 5px;
}
.ui__fix p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ui-ink);
}

/* ── окно разговора: портрет и расшифровка ────────────────────────────── */
.ui__call {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  min-height: 0;
}
.ui__stage {
  position: relative;
  min-height: 240px;
  background: var(--ui-stage, var(--ui-surface-2));
  border-right: 1px solid var(--ui-line);
  overflow: hidden;
}
.ui__stage img,
.ui__stage video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--ui-op, 50% 12%);
}
.ui__mic {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 14px 0 11px;
  border-radius: 999px;
  background: rgba(20, 18, 26, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
.ui__mic svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui__hint {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: calc(var(--ui-r-sm) - 2px);
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  font-size: 12px;
  font-weight: 500;
}
.ui__hang {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #17a34a;
  box-shadow: 0 6px 18px rgba(23, 163, 74, 0.35);
  display: grid;
  place-items: center;
}
.ui__hang svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui__chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ui__chath {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--ui-line);
  font-size: 12.5px;
  font-weight: 700;
}
.ui__chath svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--ui-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui__chath .ui__t {
  margin-left: auto;
  font-family: var(--ui-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ui-mute);
}
.ui__msgs {
  flex: 1;
  min-height: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ui__msg {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.ui__msg--me {
  justify-content: flex-end;
}
.ui__av {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-line);
  display: grid;
  place-items: center;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ui-mute);
}
.ui__msg--me .ui__av {
  background: var(--ui-accent);
  border-color: transparent;
  color: var(--ui-surface);
}
.ui__bub {
  max-width: 78%;
  padding: 9px 12px;
  border-radius: 12px 12px 12px 3px;
  background: var(--ui-surface-2);
  color: var(--ui-ink);
  font-size: 12.5px;
  line-height: 1.55;
}
.ui__msg--me .ui__bub {
  border-radius: 12px 12px 3px 12px;
  background: var(--ui-accent);
  color: var(--ui-surface);
}

/* ── панель навыков: метрики, по ховеру — разбор ИИ-тренера ───────────── */
/*
  Лицевая сторона (шкалы) и разбор ИИ-тренера лежат в одной ячейке сетки,
  поэтому высоту панели задаёт то из двух, что выше.

  Раньше разбор висел абсолютом поверх шкал и обрезался по их высоте:
  третья заметка — с примером реплики — уходила под обрез, и её просто
  не было видно. Порогом в пикселях это не лечится: на узком экране текст
  переносится сильнее и разбору нужно уже не 350px, а 446.
*/
.ui__skills {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-rows: 1fr;
  padding: 16px 18px 18px;
}
.ui__skills > * {
  grid-area: 1 / 1;
}
.ui__skills__face {
  display: flex;
  flex-direction: column;
}
.ui__metric + .ui__metric {
  margin-top: 14px;
}
.ui__metric__r {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}
.ui__metric__r b {
  font-variant-numeric: tabular-nums;
}
.ui__metric small {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--ui-mute);
}
/* Панель переворачивается в разбор: она ведёт себя как продукт,
   а не как картинка продукта. */
.ui__flip {
  z-index: 3;
  background: var(--ui-surface);
  border-radius: var(--ui-r);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  overflow: hidden;
}
.ui__skills:hover .ui__flip,
.ui__skills:focus-within .ui__flip {
  opacity: 1;
  pointer-events: auto;
}
.ui__flip__h {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ui-line);
}
.ui__flip__h i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ui-accent);
  color: var(--ui-surface);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
}
.ui__flip p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
}
/*
  Три блока разбора: что сработало — зелёным, зона роста — красным,
  и реплика, которую стоило дать вместо провальной. Цвет несёт смысл,
  поэтому он продублирован подписью, а не остаётся единственным признаком.
*/
.ui__note {
  padding: 8px 10px 9px;
  border-radius: var(--ui-r-sm);
  background: var(--ui-surface-2);
  box-shadow: inset 2px 0 0 var(--ui-line);
}
.ui__note p {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.ui__note--good {
  background: var(--ui-good-bg);
  box-shadow: inset 2px 0 0 var(--ui-good);
}
.ui__note--good .ui__lb {
  color: var(--ui-good);
}
.ui__note--bad {
  background: var(--ui-bad-bg);
  box-shadow: inset 2px 0 0 var(--ui-bad);
}
.ui__note--bad .ui__lb {
  color: var(--ui-bad);
}
.ui__note--try {
  box-shadow: inset 2px 0 0 var(--ui-accent);
}
.ui__note--try .ui__lb {
  color: var(--ui-accent);
  font-family: var(--ui-font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.ui__note--try p {
  color: var(--ui-mute);
}
/* Подсказка прижата к низу панели: свободное место под шкалами теперь
   её, а не пустой прямоугольник. */
.ui__peek {
  display: block;
  margin-top: auto;
  padding-block-start: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-line);
  text-align: right;
  z-index: 2;
  font-family: var(--ui-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui-mute);
  transition: opacity 0.2s ease;
}
.ui__skills:hover .ui__peek {
  opacity: 0;
}

/* ── адаптив ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .ui {
    grid-template-columns: minmax(0, 1fr);
  }
  .ui__rail {
    display: none;
  }
  .ui__body,
  .ui__call {
    grid-template-columns: minmax(0, 1fr);
  }
  .ui__side {
    border-right: 0;
    border-bottom: 1px solid var(--ui-line);
  }
  .ui__stage {
    border-right: 0;
    border-bottom: 1px solid var(--ui-line);
    min-height: 210px;
  }
}
@media (max-width: 620px) {
  .ui__acts {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui__flip,
  .ui__peek {
    transition: none;
  }
}

/* ── правки продуктового окна под главную ─────────────────────────────── */

/*
  Кольцо общего балла. Было: `align-items: baseline` внутри блока фиксированной
  высоты прижимало цифру к верхнему краю, и она наезжала на дугу — цифры
  «съезжали». Центрируем по обеим осям, а дробь опускаем на пару пикселей
  вручную, чтобы она села на базовую линию целого числа.
*/
.ui__ring b {
  align-items: center;
  gap: 0;
  font-size: 28px;
}
.ui__ring b span {
  font-size: 12px;
}
.ui__ring b span {
  position: relative;
  top: 3px;
  margin-left: 1px;
}

/*
  Вкладки «Разбор» и «Транскрипт» держат ровно одну высоту. До этого
  переключение на транскрипт схлопывало окно втрое: читатель нажимал вкладку,
  и блок под курсором прыгал. Высота задана обеим вкладкам, а список реплик
  внутри прокручивается — ровно так же, как в самом продукте.
*/
.ui__body {
  min-height: 560px;
}
/* Транскрипт держит высоту жёстко и прокручивается внутри: так вкладка
   не может оказаться ни выше, ни ниже разбора. */
.ui__body[data-uipane='tr'] {
  height: 560px;
}

/*
  Расшифровка: переписка, как в самом продукте. Собеседник светлым пузырём
  слева, вы акцентным справа, комментарий тренера — карточкой прямо под
  вашей репликой. Ради этой связи вкладка и нужна: видно не «оценку
  вообще», а замечание к конкретной фразе.

  Нумерации реплик на экране нет — она осталась скрытым атрибутом
  `data-line`, по нему работает переход из разбора.
*/
/*
  Переписка живёт в колонке, а не во всю ширину окна: на широком экране
  пузыри разъезжались к краям, между ними оставалась дыра в треть экрана,
  и разговор переставал читаться разговором.
*/
.ui__tr {
  grid-column: 1 / -1;
  min-height: 0;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(16px, 1.8vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  overscroll-behavior: contain;
}
.ui__tr::-webkit-scrollbar {
  width: 6px;
}
.ui__tr::-webkit-scrollbar-thumb {
  background: var(--ui-line);
  border-radius: 99px;
}
/* Пузыри те же, что в окне разговора, но пане разбора шире: без потолка
   строка тянется через весь экран и перестаёт читаться. */
.ui__tr .ui__bub {
  max-width: min(58ch, max(62%, 230px));
  padding: 11px 14px;
  font-size: 13px;
}

.ui__cmt {
  align-self: flex-end;
  /* Правый отступ равен аватарке с зазором — карточка встаёт ровно под
     пузырём, а не под аватаркой. */
  margin: -4px 35px 6px 0;
  max-width: min(58ch, max(62%, 230px));
  padding: 11px 14px;
  border: 1px solid var(--ui-line);
  border-left: 2px solid var(--ui-bad);
  border-radius: var(--ui-r-sm);
  background: var(--ui-bad-bg);
}
.ui__cmt--good {
  border-left-color: var(--ui-good);
  background: var(--ui-good-bg);
}
/* Шапка комментария: вердикт должен бросаться в глаза, а приписка справа —
   объяснять, чей это голос. Без неё карточку принимают за часть реплики. */
.ui__cmt__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 14px;
  margin-bottom: 7px;
}
/* Вердикт не сжимается: на узком экране он переносился по словам и переставал
   читаться заголовком. Если строка не помещается, вниз уходит приписка. */
.ui__cmt__h b {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ui-bad-ink);
}
.ui__cmt--good .ui__cmt__h b {
  color: var(--ui-good-ink);
}
.ui__cmt__h .ui__lb {
  margin-left: auto;
  flex: none;
}
.ui__cmt p {
  color: var(--ui-ink);
  font-size: 12.5px;
  line-height: 1.55;
}

/* Реплика, к которой перешли по ссылке из разбора: подсветка гаснет сама. */
@media (prefers-reduced-motion: no-preference) {
  .ui__msg.is-flash .ui__bub {
    animation: ui-flash 1.6s ease-out;
  }
  @keyframes ui-flash {
    0%,
    22% {
      box-shadow: 0 0 0 2px var(--ui-accent);
    }
    100% {
      box-shadow: 0 0 0 2px transparent;
    }
  }
}
.ui__stage img,
.ui__stage video {
  object-fit: contain;
  object-position: 50% 100%;
  filter: grayscale(0.35) contrast(1.04);
}
/*
  Персона снята полным кадром, со студийным фоном: кадр закрывает сцену
  целиком, иначе фон встал бы серым прямоугольником поверх подложки.
  Петля проявляется поверх неподвижного кадра — он же остаётся, когда
  анимация выключена.
*/
.ui__stage .ui__persona {
  object-fit: cover;
  object-position: 50% 14%;
  filter: grayscale(0.3) contrast(1.04) brightness(0.96);
}
.ui__persona--live {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.ui__persona--live.is-on {
  opacity: 1;
}

/* ══ ВРЕМЕННО ═══════════════════════════════════════════════════════════
   Сравнение вариантов окна продукта: один и тот же экран стоит на странице
   трижды — как сейчас, в светлой теме и роликом. Когда вариант выбран,
   этот кусок вместе с `src/components/demo/` уходит целиком.
   ══════════════════════════════════════════════════════════════════════ */

.ab {
  margin-top: clamp(46px, 5vw, 74px);
}
/* Окно разговора стоит дальше от схемы контура — как стояло до сравнения. */
#platform .ab {
  margin-top: clamp(30px, 3vw, 48px);
}
/* У разбора теперь есть подводка — окно отходит от неё так же, как в «Контуре». */
#review .ab {
  margin-top: clamp(30px, 3vw, 48px);
}
/* Между самими вариантами отступ ровный и чуть меньше. */
.ab + .ab,
#platform .ab + .ab {
  margin-top: clamp(52px, 5.5vw, 82px);
}
.ab__lb {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 13px;
  border: 1px dashed var(--faint);
  border-radius: var(--pill);
  color: var(--mute);
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Отступ уже отдан обёртке, окну он второй раз не нужен. */
.ab .demo,
#platform .ab .demo {
  margin-top: 0;
}

/* ── светлая тема окна: меняются только токены ──────────────────────────
   Не белый, как в продукте, а светло-серый: белый прямоугольник на тёмной
   странице выжигает глаз и утаскивает на себя всё внимание раздела. */
.ui--light {
  color-scheme: light;

  --ui-surface: #ececee;
  --ui-solid: #ececee;
  --ui-surface-2: #e0e0e4;
  --ui-line: rgba(16, 17, 20, 0.14);
  --ui-ink: #16171a;
  /* Плотнее, чем в тёмной теме: на светлом те же 0.58 давали 4,2–4,4 против
     нормы 4,5 у подписей, пояснений и цитат. */
  --ui-mute: rgba(16, 17, 20, 0.64);
  --ui-accent: #5860c4;
  --ui-accent-bg: rgba(88, 96, 196, 0.14);
  --ui-good: #2d7e53;
  --ui-good-bg: rgba(45, 126, 83, 0.14);
  --ui-warn: #9d6b1f;
  --ui-warn-bg: rgba(157, 107, 31, 0.14);
  --ui-bad: #cf3d16;
  --ui-bad-bg: rgba(207, 61, 22, 0.13);
  --ui-good-ink: #1e5c3c;
  --ui-bad-ink: #9c2c0c;
  --ui-shadow: 0 30px 70px -46px rgba(0, 0, 0, 0.6);

  /* Сцена персоны: раньше правилась через мёртвый `--ui-stage`, который
     перебивался правилом ниже по файлу, и в светлом окне оставалась тёмной. */
  --ui-stage-glow: rgba(16, 17, 20, 0.05);
  --ui-stage-a: #e5e5ea;
  --ui-stage-b: #dcdce3;
}

/* ── окно, целиком отданное ролику ─────────────────────────────────────
   Постер лежит снизу и держит кадр, пока видео не готово или не запущено;
   ролик проявляется поверх него тем же приёмом, что персона в окне
   разговора. */
.ui--video {
  grid-template-columns: minmax(0, 1fr);
}
/* Ролик держит свои пропорции, высоту ряда задаёт панель навыков рядом. */
.demo__row .ui--video {
  align-self: start;
}
.ui__vid {
  position: relative;
  aspect-ratio: var(--ui-ratio, 16 / 9);
  background: var(--ui-surface-2);
}
.ui__vid img,
.ui__vid video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.ui__vid__live {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.ui__vid__live.is-on {
  opacity: 1;
}

/* ══ Светлые экраны и затемнение при прокрутке ══════════════════════════
   Ритм страницы: тёмный герой → светлая середина → тёмный финал. Причина
   не косметическая. Во-первых, светлое окно продукта на тёмном листе даёт
   слишком резкий стык и бьёт по глазам. Во-вторых, лендинги продуктов
   планируются светлыми: если главная сплошь тёмная, переход на них
   читается как переход на другой сайт.

   Секция переключается ровно одной строкой — `--ink-rgb`. Всё, что от неё
   зависит (`--mute`, `--dim`, `--faint`, десяток полупрозрачных плашек по
   файлу), пересчитывается само, альфы остаются прежними. Тот же приём, на
   котором уже стоит `.ui--light`.
   ══════════════════════════════════════════════════════════════════════ */

.sec--light {
  color-scheme: light;

  --ink-rgb: 16, 17, 20;
  --ink: #16171a;
  /*
    Производные объявляются здесь заново — иначе не сработают: `var()`
    в значении пользовательского свойства подставляется в той области,
    где свойство объявлено, а дальше наследуется уже готовым цветом.
    На светлом листе альфы подняты: те же 0.56 давали 4,2 вместо 4,5.
  */
  --mute: rgba(var(--ink-rgb), 0.66);
  --dim: rgba(var(--ink-rgb), 0.74);
  --faint: rgba(var(--ink-rgb), 0.16);
  --faint-2: rgba(var(--ink-rgb), 0.09);

  --bg: #f3f3f5;
  --bg-2: #ececee;
  --on-ink: #f3f3f5;
  --well: #e7e7ec;
  --blue: #4f57bd;

  --demo-a: #e9e9ee;
  --demo-b: #e3e3e9;
  --demo-glow: rgba(79, 87, 189, 0.1);

  background: var(--bg);
  color: var(--ink);
}

/* ── шапка над светлой секцией ──────────────────────────────────────────
   Какая секция сейчас под шапкой, определяет наблюдатель в site-2026.js:
   узкая полоса высотой в шапку у верхней кромки экрана. Слушателя
   прокрутки здесь по-прежнему нет. */
.nav {
  transition:
    background 0.24s ease,
    border-color 0.24s ease,
    color 0.24s ease;
}
.nav.is-light {
  --ink-rgb: 16, 17, 20;
  --ink: #16171a;
  --mute: rgba(var(--ink-rgb), 0.66);
  --faint-2: rgba(var(--ink-rgb), 0.09);
  color: var(--ink);
}
.nav.is-light.is-stuck {
  background: rgba(243, 243, 245, 0.82);
  border-bottom-color: rgba(16, 17, 20, 0.1);
}
.nav.is-light .logo img {
  filter: grayscale(1) brightness(0.32);
}
.nav.is-light .btn {
  --on-ink: #f3f3f5;
}
.nav.is-light .btn--line {
  background: rgba(243, 243, 245, 0.66);
  border-color: rgba(16, 17, 20, 0.2);
}
.nav.is-light .btn--line:hover {
  background: rgba(243, 243, 245, 0.88);
}
.nav.is-light .menu__drop,
.nav.is-light .nav__mobile {
  background: rgba(246, 246, 248, 0.96);
}
.nav.is-light .burger i {
  background: var(--ink);
}

/* ── завеса: уходящий вверх экран притухает ─────────────────────────────
   Ориентир — apple.com: светлое и тёмное не сшиваются встык, предыдущий
   экран гаснет, пока уезжает.

   Сделано без единого слушателя прокрутки, на view-timeline. Тонкость:
   секции здесь высотой в несколько экранов, и диапазон `exit` у самой
   секции растянулся бы на всю её высоту — гасло бы прямо во время чтения.
   Поэтому таймлайн снимается с невидимого хвоста в 78vh у нижней кромки
   секции (`::after`), а завеса (`::before`) липнет к верху экрана
   и затемняет ровно тот остаток секции, который ещё виден.

   Где `animation-timeline` не поддерживается — эффекта просто нет. */
@supports (animation-timeline: view()) and (timeline-scope: --x) {
  /*
    Каждый экран и уходит в темноту, и выходит из неё. Два отсчёта:
    невидимая голова у верхней кромки секции и такой же хвост у нижней.
    Диапазон `entry` головы гасит завесу прихода, диапазон `exit` хвоста
    поднимает завесу ухода.

    Отсчёты вынесены в отдельные метки, а не сняты с самой секции,
    потому что секции здесь высотой в несколько экранов: собственный
    `entry` у секции растянулся бы на всю её высоту, и экран проявлялся
    бы прямо во время чтения.

    Высота метки — 65vh. Меньше 100vh специально: на коротких экранах
    голова и хвост не должны смыкаться, иначе между приходом и уходом
    не останется промежутка, где экран виден чисто.
  */
  .js-motion .sec--tone {
    position: relative;
    timeline-scope: --sec-head, --sec-tail;
  }
  .js-motion .sec--tone::before,
  .js-motion .sec--tone::after {
    content: '';
    position: absolute;
    left: 0;
    width: 1px;
    height: 65vh;
    pointer-events: none;
    view-timeline-axis: block;
  }
  .js-motion .sec--tone::before {
    top: 0;
    view-timeline-name: --sec-head;
  }
  .js-motion .sec--tone::after {
    bottom: 0;
    view-timeline-name: --sec-tail;
  }

  /*
    Завесы накрывают секцию целиком, а не экран: секция больше не `.wrap`,
    поэтому они идут во всю ширину листа. Две отдельные плоскости, а не
    одна с двумя анимациями, — две анимации на одном `opacity` не
    складываются, последняя просто перебила бы первую.
  */
  .js-motion .tone {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
  }
  .js-motion .tone::before,
  .js-motion .tone::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #050607;
  }
  /* Приход: экран проявляется из темноты. */
  .js-motion .tone::before {
    opacity: 0;
    animation: sec-rise linear both;
    animation-timeline: --sec-head;
    animation-range: entry 0% entry 100%;
  }
  /* Уход: экран уходит в темноту. */
  .js-motion .tone::after {
    opacity: 0;
    animation: sec-dim linear both;
    animation-timeline: --sec-tail;
    animation-range: exit 0% exit 100%;
  }
  @keyframes sec-rise {
    from {
      opacity: 0.88;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes sec-dim {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.88;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .js-motion .sec--tone::before,
    .js-motion .sec--tone::after,
    .js-motion .tone::before,
    .js-motion .tone::after {
      content: none;
    }
  }
}

/* ── появление блоков при прокрутке ───────────────────────────────────── */

.js-motion [data-animate] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 0.8, 0.3, 1),
    transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.js-motion [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* ── узкие экраны ─────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .menu,
  .nav__r .ln {
    display: none;
  }
  .nav__burger {
    display: block;
  }
  /* Панели данных уходят из углов кадра в поток: иначе они ложатся поверх
     стекла и кадра одновременно. */
  .scene {
    display: block;
    min-height: 0;
  }
  /* `relative`, а не `static`: у статичного элемента z-index не работает,
     и панели уезжали ПОД затемняющий слой сцены — на узком экране от них
     оставался один ползунок. */
  .hud {
    position: relative;
    /* Сбрасываем координаты углов: у relative они не прижимают к краю,
       а сдвигают элемент с места, и панели разъезжались влево-вправо. */
    inset: auto;
    align-items: flex-start;
    text-align: left;
    margin: 22px var(--pad) 0;
  }
  .hud--tr,
  .hud--br {
    align-items: flex-start;
    text-align: left;
  }
  /*
    Панель статуса на узком экране уходит совсем: в стопке она занимает
    целую строку ради одной подписи с таймером, а сцена и без неё длинная.
    То, что разговор идёт голосом, страница говорит дальше — в разделе
    «Контур» и подписью под окном разговора.
  */
  .hud--bl {
    display: none;
  }
  /* Нижний отступ сцены переезжает на последнюю оставшуюся панель. */
  .hud--br {
    padding-bottom: clamp(30px, 6vw, 48px);
  }
  .glass {
    width: 100%;
  }
  .dots {
    width: 100%;
    max-width: 180px;
  }
  .rail,
  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flow__col:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .grid,
  .mats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
  .cell,
  .mat {
    grid-row: auto;
    display: flex;
    flex-direction: column;
  }
  .cell:nth-child(n),
  .mat:nth-child(n) {
    grid-column: auto;
  }
  .cell:nth-child(3),
  .mat:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .cell__f {
    margin-top: auto;
  }
  .mat .ln {
    margin-top: auto;
  }
  .case,
  .demo__row {
    grid-template-columns: 1fr;
  }
  .case:nth-child(even) .case__fig {
    order: 0;
  }
  .tline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ui__body,
  .ui__body[data-uipane='tr'] {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    height: auto;
  }
  .ui__tr {
    overflow: visible;
  }
  .ui__side {
    border-right: 0;
    border-bottom: 1px solid var(--ui-line);
  }
  .ui__call {
    grid-template-columns: minmax(0, 1fr);
  }
  .ui__stage {
    border-right: 0;
    border-bottom: 1px solid var(--ui-line);
    min-height: 280px;
  }
}

@media (max-width: 680px) {
  .grid,
  .mats,
  .rail,
  .flow,
  .tline,
  .foot__cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .cell,
  .mat,
  .flow__col {
    border-left: 0;
    padding-left: 0;
    border-bottom: 1px solid var(--faint-2);
  }
  .case__nums {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ui__acts,
  .ui__rail {
    display: none;
  }
  .ui {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo__cap .lb:last-child {
    margin-left: 0;
    text-align: left;
  }
}

/* ── системные настройки читателя ─────────────────────────────────────── */

@media (prefers-reduced-transparency: reduce) {
  .glass,
  .menu__drop,
  .nav.is-stuck,
  .nav__mobile,
  .modal {
    background: #14161a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .modal {
    background: rgba(8, 9, 10, 0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .flow__col i {
    width: 100%;
  }
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
}