/* ============================================================
   THE BOT — дизайн-система нового сайта (P1)
   ------------------------------------------------------------
   Одна кодовая база, две темы. Все компоненты стилизуются
   ТОЛЬКО через токены — ни одного цветового литерала внутри
   [data-theme], иначе при смене темы половина страницы
   осталась бы в цветах другой.

   DARK — база (:root), тема по умолчанию по ТЗ.
   LIGHT — переопределяет только значения токенов.
   ============================================================ */

/* ---------- 1. ТОКЕНЫ: DARK (база) ---------- */
:root {
  /* Поверхности. Не плоский #000: глубокий navy-black с синим подтоном. */
  --bg:            #070B14;
  --bg-alt:        #0B1220;   /* чередование секций (ритм страницы) */
  --surface:       #0F172A;
  --surface-2:     #141F33;
  --glass:         rgba(255, 255, 255, 0.045);
  --glass-strong:  rgba(255, 255, 255, 0.075);

  /* Границы — голубоватые, не серые: свет исходит от фирменного синего. */
  --border:        rgba(148, 176, 224, 0.14);
  --border-strong: rgba(148, 176, 224, 0.28);

  /* Типографика */
  --ink:           #E8EFFA;
  --ink-muted:     #9FB0C9;
  --ink-faint:     #6B7E9B;
  --ink-inverse:   #070B14;

  /* Акцент. В тёмной теме чуть ярче фирменного, чтобы держать
     контраст на глубоком фоне (не наивная инверсия). */
  --accent:        #3D8BFF;
  --accent-soft:   #6FA8FF;
  --accent-deep:   #1D5FE0;
  --violet:        #8B7CFF;
  --accent-wash:   rgba(61, 139, 255, 0.12);

  /* Свечение — ядро дизайн-системы. */
  --glow-core:     rgba(61, 139, 255, 0.55);
  --glow-soft:     rgba(61, 139, 255, 0.20);
  --glow-ambient:  rgba(61, 139, 255, 0.09);

  /* «Колодец» и луч сканирования внутри AI Core. В тёмной теме колодец
     почти не виден — он лишь чуть углубляет центр сферы. */
  --core-well-in:  rgba(4, 9, 20, 0.90);
  --core-well-mid: rgba(6, 14, 32, 0.62);
  --core-sweep:    rgba(96, 165, 255, 0.30);

  /* Надпись внутри ядра лежит на тёмном колодце в ОБЕИХ темах, поэтому
     она не переопределяется в светлой: там var(--ink) сделал бы её
     тёмной на тёмном. */
  --core-ink:       #EEF4FF;
  --core-ink-faint: rgba(190, 210, 240, 0.72);

  /* Семантика (отдельно от акцента) */
  --ok:            #34D374;
  --warn:          #FBBF24;
  --danger:        #F87171;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* ---------- 2. ТОКЕНЫ: LIGHT ---------- */
:root[data-theme="light"] {
  --bg:            #FFFFFF;
  --bg-alt:        #F2F7FD;   /* ice-white, голубоватый */
  --surface:       #FFFFFF;
  --surface-2:     #F7FAFE;
  --glass:         rgba(15, 35, 70, 0.028);
  --glass-strong:  rgba(15, 35, 70, 0.052);

  --border:        #DCE7F5;
  --border-strong: #C0D3EC;

  --ink:           #0F1B2E;
  --ink-muted:     #51637E;
  --ink-faint:     #7E8FA8;
  --ink-inverse:   #FFFFFF;

  --accent:        #2F7BFF;   /* фирменный, родной для светлого фона */
  --accent-soft:   #5A97FF;
  --accent-deep:   #1D5FE0;
  --violet:        #7C6FEF;
  --accent-wash:   rgba(47, 123, 255, 0.08);

  /* На белом фоне свечение читается хуже, чем на тёмном, поэтому альфа
     здесь выше — иначе три ступени .glow-sm/md/lg визуально сливались бы
     в одно и то же. Выше этих значений уже начинает выглядеть грязным. */
  --glow-core:     rgba(47, 123, 255, 0.40);
  --glow-soft:     rgba(47, 123, 255, 0.21);
  --glow-ambient:  rgba(47, 123, 255, 0.07);

  /* В светлой теме колодец работает как настоящий тёмный портал: сфера
     нарисована светом по черноте, и на белом фоне ей нужна своя тень,
     иначе свечение выцветает и надпись внутри теряет контраст. */
  --core-well-in:  rgba(9, 18, 38, 0.94);
  --core-well-mid: rgba(14, 27, 54, 0.78);
  --core-sweep:    rgba(120, 180, 255, 0.34);

  --ok:            #16A34A;
  --warn:          #D97706;
  --danger:        #DC2626;

  --shadow-sm: 0 1px 2px rgba(15, 35, 70, 0.06);
  --shadow:    0 8px 24px rgba(15, 35, 70, 0.08);
  --shadow-lg: 0 24px 60px rgba(15, 35, 70, 0.12);

  color-scheme: light;
}

/* ---------- 3. ТОКЕНЫ ВНЕ ТЕМЫ ---------- */
:root {
  --font-display: "Baloo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Типографическая шкала — плавная, но с фиксированными ступенями. */
  --step--1: clamp(12.5px, 0.2vw + 12px, 13.5px);
  --step-0:  clamp(15px,  0.2vw + 14.5px, 16px);
  --step-1:  clamp(17px,  0.3vw + 16px, 18.5px);
  --step-2:  clamp(20px,  0.6vw + 18px, 23px);
  --step-3:  clamp(24px,  1vw + 21px, 30px);
  --step-4:  clamp(29px,  1.8vw + 24px, 39px);
  --step-5:  clamp(34px,  3vw + 26px, 52px);
  --step-6:  clamp(40px,  4.4vw + 28px, 66px);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* Responsive-токены */
  --wrap:        1160px;
  --wrap-narrow: 760px;
  --wrap-hero:   1440px;
  --gutter:      clamp(16px, 4vw, 32px);
  --section-y:   clamp(56px, 7vw, 112px);

  --glow-sm: 0 0 24px var(--glow-soft);
  --glow-md: 0 0 52px var(--glow-soft);
  --glow-lg: 0 0 100px var(--glow-core);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.16s;
  --dur:      0.28s;
  --dur-slow: 0.5s;
}

/* ---------- 4. БАЗА ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Фон обязателен явным токеном: прозрачный body занял бы
     подложку хоста и сломал бы тему. */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Пока стоит .theme-booting (снимается после первого кадра) — переходы
   выключены, иначе тема "проигрывалась" бы анимацией при загрузке. */
.theme-booting,
.theme-booting * {
  transition: none !important;
  animation: none !important;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 var(--space-4);
  color: var(--ink);
}

h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-4); color: var(--ink-muted); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-soft); }

strong { color: var(--ink); font-weight: 650; }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--ink-muted);
}

/* Видимый фокус — обязателен для доступности. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--accent); color: #fff; }

/* ---------- 5. РАСКЛАДКА ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.wrap-narrow { max-width: var(--wrap-narrow); }

/* Ритм страницы: чередование --bg / --bg-alt. В светлой теме обе
   переменные светлые, поэтому "тёмных островов" не остаётся. */
.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  transition: background-color var(--dur) var(--ease);
}
.section-alt { background: var(--bg-alt); }

.stack   { display: flex; flex-direction: column; gap: var(--space-5); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-3); }
.row     { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- 6. ФОНОВОЕ СВЕЧЕНИЕ (ambient) ---------- */
/* Мягкие radial-градиенты — источник света всей системы.
   Не элемент, а атмосфера: pointer-events выключены. */
.ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.9;
}
.ambient::before {
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  top: -14%; left: -8%;
  background: radial-gradient(circle, var(--glow-soft), transparent 70%);
}
.ambient::after {
  width: 38vw; height: 38vw;
  max-width: 520px; max-height: 520px;
  bottom: -18%; right: -6%;
  background: radial-gradient(circle, var(--glow-ambient), transparent 70%);
}
.section > .wrap { position: relative; z-index: 1; }

/* ---------- 7. ТИПОГРАФИЧЕСКИЕ УТИЛИТЫ ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.lead {
  font-size: var(--step-1);
  color: var(--ink-muted);
  max-width: 62ch;
}

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.small { font-size: var(--step--1); }

/* Акцентная подсветка слов в заголовке. */
.accent-text { color: var(--accent); }
.accent-gradient {
  background: linear-gradient(115deg, var(--accent), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 8. КНОПКИ ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 650;
  line-height: 1;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Primary — единственное место, где тратим яркость. */
.btn-primary {
  background: linear-gradient(120deg, var(--accent), var(--accent-deep));
  color: #fff;
  box-shadow: 0 6px 20px var(--glow-soft), var(--glow-sm);
}
.btn-primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px var(--glow-core), var(--glow-md);
}

/* Ghost — стеклянная, на любом фоне. */
.btn-ghost {
  background: var(--glass);
  color: var(--ink);
  border-color: var(--border-strong);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  color: var(--ink);
  background: var(--glass-strong);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Subtle — третичное действие. */
.btn-subtle {
  background: transparent;
  color: var(--ink-muted);
  padding-inline: var(--space-3);
}
.btn-subtle:hover { color: var(--accent); background: var(--accent-wash); }

.btn-sm { font-size: var(--step--1); padding: 9px 18px; }
.btn-lg { font-size: var(--step-1); padding: 17px 34px; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------- 9. ПОВЕРХНОСТИ И КАРТОЧКИ ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

/* Glass — основная "премиальная" поверхность на тёмном фоне. */
.card-glass {
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--border);
}

.card-elevated { background: var(--surface-2); box-shadow: var(--shadow); }

.card-interactive { cursor: pointer; }
.card-interactive:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg), var(--glow-sm);
}

/* Карточка с акцентной подсветкой — для "рекомендуемого" тарифа и т.п. */
.card-accent {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: var(--glow-sm);
}

.divider {
  height: 1px;
  border: 0;
  background: var(--border);
  margin-block: var(--space-6);
}

/* ---------- 10. СИСТЕМА СВЕЧЕНИЯ ---------- */
.glow-sm { box-shadow: var(--glow-sm); }
.glow-md { box-shadow: var(--glow-md); }
.glow-lg { box-shadow: var(--glow-lg); }

/* Свечение "из-под" элемента — мягче, чем box-shadow, лучше для крупных блоков. */
.glow-under { position: relative; }
.glow-under::after {
  content: "";
  position: absolute;
  inset: 12% 8% -12% 8%;
  background: radial-gradient(ellipse at center, var(--glow-soft), transparent 70%);
  filter: blur(38px);
  z-index: -1;
  pointer-events: none;
}

/* Тонкая светящаяся линия-разделитель. */
.glow-line {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}

/* Пульсирующая точка статуса (● РАБОТАЕТ 24/7). */
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent);
  animation: pulse-dot 2.4s var(--ease) infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  backdrop-filter: blur(10px);
}
.badge-accent {
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
}

/* ---------- 11. ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ---------- */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  cursor: pointer;
  flex-shrink: 0;
  backdrop-filter: blur(10px);
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.theme-toggle svg { width: 18px; height: 18px; display: block; }

/* Показываем ровно одну иконку — ту, на что переключит нажатие. */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ---------- 12. RESPONSIVE ---------- */
/* Брейкпоинты 860/720/520 — те же, что уже используются в проекте. */
@media (max-width: 860px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .btn { padding: 13px 22px; }
  .ambient::before, .ambient::after { filter: blur(50px); }
}

@media (max-width: 520px) {
  .btn-lg { font-size: var(--step-0); padding: 14px 24px; }
  .card { padding: var(--space-5); }
}

/* ---------- 13. ДОСТУПНОСТЬ: сниженная анимация ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .status-dot { animation: none; }
}


/* ============================================================
   P2 — HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
}
/* Над Hero шапка невесомая; фон и граница появляются только при скролле. */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-3);
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; height: 42px; width: auto; }
/* Логотип нарисован свечением по чёрному, поэтому вариантов два: со
   светлой надписью для тёмной темы и с тёмной — для светлой. Оба лежат
   в разметке, показывается ровно один, чтобы при переключении темы
   не было перезапроса и мигания.

   Селекторы обязаны включать img: у правила `.brand img` выше специфичность,
   и без этого оно перебивало скрытие — в тёмной теме показывались оба. */
.brand img.brand-light { display: none; }
:root[data-theme="light"] .brand img.brand-dark  { display: none; }
:root[data-theme="light"] .brand img.brand-light { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-inline-start: auto;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  position: relative;
  color: var(--ink-muted);
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-menu a:hover { color: var(--ink); }
.nav-menu a:hover::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.nav-login {
  color: var(--ink-muted);
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
}
.nav-login:hover { color: var(--ink); }

.nav-utility {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  margin-inline-start: var(--space-4);
}
/* Один и тот же контрол в двух местах: на десктопе он стоит перед
   «Войти» (как в ТЗ), на мобильном — снаружи сворачиваемого меню,
   иначе тему нельзя переключить, не раскрыв гамбургер. Видим всегда
   ровно один; оба слушает один обработчик в v2.js. */
.theme-toggle-mobile { display: none; }
.nav-toggle { display: none; }

/* ============================================================
   P2 — HERO
   ============================================================ */
.hero {
  position: relative;
  padding-block: clamp(32px, 5vw, 68px) clamp(48px, 6vw, 92px);
  overflow: hidden;
}
/* Hero занимает большую часть широкого экрана (ТЗ §5). Глобальный
   --wrap (1160px) из P1 не меняем — он остаётся для обычных секций,
   иначе поехала бы вся будущая страница. */
.hero .wrap { max-width: var(--wrap-hero); }

/* Фон: радиальная подсветка от ядра + очень слабая сетка данных.
   Никаких растровых картинок и видео. */
.hero-bg {
  position: absolute;
  inset: -10% -5% 0;
  pointer-events: none;
  z-index: 0;
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--glow-ambient) 1px, transparent 1px),
    linear-gradient(to bottom, var(--glow-ambient) 1px, transparent 1px);
  background-size: 58px 58px;
  /* Сетка гаснет к краям — иначе читается как таблица, а не как фон. */
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 62% 45%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 62% 45%, #000 10%, transparent 75%);
  opacity: 0.75;
}
.hero-bg::after {
  content: "";
  position: absolute;
  top: 4%; left: 50%;
  width: min(1180px, 105vw);
  aspect-ratio: 1;
  transform: translateX(-46%);
  background: radial-gradient(circle, var(--glow-soft) 0%, transparent 62%);
  filter: blur(30px);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, 0.83fr);
  gap: clamp(18px, 1.9vw, 28px);
  align-items: center;
}

/* ---------- Левая колонка: оффер ---------- */
.hero-copy { max-width: 36rem; }

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.hero-status-note {
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.hero h1 {
  /* Потолок держит самая длинная строка — «Искусственный интеллект,»:
     при 45px ей нужно ~505px против 503px колонки, и утверждённая
     разбивка рассыпалась на четыре строки вместо трёх.
     Переносы в разметке жёсткие, поэтому балансировка не нужна и только
     мешала бы построчной разбивке. */
  font-size: clamp(28px, 3.1vw - 5.6px, 39px);
  line-height: 1.09;
  text-wrap: initial;
  margin-bottom: var(--space-5);
}

.hero-lead {
  font-size: var(--step-1);
  color: var(--ink-muted);
  max-width: 30rem;
  margin-bottom: var(--space-6);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
/* Компактнее стандартного .btn-lg: иначе две кнопки не встают в ряд
   в колонке оффера и переносятся друг под друга. */
.hero-cta .btn {
  font-size: var(--step-0);
  padding: 15px 24px;
}
.hero-cta .btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Три преимущества */
.hero-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero-benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}
.hero-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--accent);
}
.hero-benefit-icon svg { width: 13px; height: 13px; }
.hero-benefit-title {
  display: block;
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--ink);
  line-height: 1.3;
}
.hero-benefit-note {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-faint);
  line-height: 1.35;
}

/* ---------- Центр: каналы + AI Core ---------- */
.hero-scene {
  position: relative;   /* система координат для слоя линий связи */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.2vw, 20px);
  min-width: 0;
}

/* Каналы. Добавление нового = одна <li>: раскладка и линии
   пересчитываются сами (см. drawConnections в v2.js). */
.channels {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 26px);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  z-index: 2;
}
.channel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 15px 9px 11px;
  border-radius: var(--radius-pill);
  background: var(--glass-strong);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.channel:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateX(-3px);
}
.channel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--accent-wash);
  color: var(--accent);
}
.channel-icon svg { width: 13px; height: 13px; }

/* Слой линий связи между каналами и ядром. */
.connections {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.conn-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0.28;
}
.conn-pulse {
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
  /* pathLength="100" на самом <path> нормализует длину: один и тот же
     кейфрейм даёт одинаковую скорость импульса на линиях разной длины. */
  stroke-dasharray: 7 100;
  animation: conn-travel 3.6s var(--ease) infinite;
}
@keyframes conn-travel {
  0%        { stroke-dashoffset: 7;    opacity: 0; }
  10%       { opacity: 0.9; }
  75%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

/* ---------- AI CORE ---------- */
.ai-core {
  position: relative;
  /* Потолок держит ширина своей колонки: шире — и правый край свечения
     уходит под карточку диалога и обрезается её фоном. Пиллы каналов и
     ядро лежат в одной flex-строке, поэтому в бюджет колонки должны
     помещаться оба. */
  width: clamp(224px, 19vw, 268px);
  aspect-ratio: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}
/* Свечение — CSS, не SVG-фильтр: дешевле для отрисовки. */
.ai-core::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-core) 0%, var(--glow-soft) 38%, transparent 68%);
  filter: blur(26px);
  animation: core-breathe 7s ease-in-out infinite;
}
@keyframes core-breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* Тёмный «колодец» под кольцом. В тёмной теме он почти незаметен, а в
   светлой без него нельзя: сфера нарисована как свет по черноте, и на
   светлом фоне её свечение теряется — тут оно получает свою глубину. */
.core-well {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              var(--core-well-in) 0%, var(--core-well-mid) 58%, transparent 78%);
  animation: core-well-breathe 9s ease-in-out infinite;
}
@keyframes core-well-breathe {
  0%, 100% { opacity: 0.9;  transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

/* Растровая сфера. Задний слой крупнее, тусклее и вращается медленнее в
   обратную сторону: два разнонаправленных слоя дают параллакс, из-за
   которого плоская картинка перестаёт читаться как наклейка. */
.core-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  will-change: transform;
}
.core-img-front { animation: spin 74s linear infinite; }
.core-img-back  {
  opacity: 0.45;
  transform: scale(1.1);
  filter: blur(1.5px) saturate(1.15);
  animation: spin-back 116s linear infinite;
}
@keyframes spin      { to { transform: rotate(360deg); } }
/* Отдельный кейфрейм: у заднего слоя есть постоянный scale, а он потерялся
   бы, если переиспользовать spin с одним только rotate. */
@keyframes spin-back { to { transform: scale(1.1) rotate(-360deg); } }

/* Луч сканирования: конический градиент, обходящий сферу по кругу. */
.core-sweep {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
              transparent 0deg, transparent 300deg,
              var(--core-sweep) 344deg, transparent 360deg);
  mix-blend-mode: screen;
  opacity: 0.65;
  animation: spin 11s linear infinite;
  pointer-events: none;
}

.core-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.core-mesh   { stroke: var(--accent); stroke-width: 0.7; fill: none; opacity: 0.22; }
.core-node   { fill: var(--accent-soft); opacity: 0.85; }
.core-node-lg{ fill: var(--accent); opacity: 0.95; }

/* Узлы дышат вразнобой — иначе сетка выглядит мёртвой. */
.core-node, .core-node-lg { animation: node-pulse 4.2s ease-in-out infinite; }
.core-node:nth-of-type(2n)   { animation-delay: -1.1s; }
.core-node:nth-of-type(3n)   { animation-delay: -2.3s; }
.core-node:nth-of-type(5n)   { animation-delay: -3.1s; }
@keyframes node-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.95; }
}

/* Точка, бегущая по орбите. */
.core-orbit-dot { fill: var(--accent-soft); transform-origin: 200px 200px; animation: spin 22s linear infinite; }
.core-orbit-dot-2 { fill: var(--violet); transform-origin: 200px 200px; animation: spin 30s linear infinite reverse; }

/* Надпись живая, а не часть растра: не вращается вместе со сферой,
   остаётся резкой на любом размере и берёт цвет из токенов темы. */
.core-label {
  position: relative;
  z-index: 3;
  text-align: center;
  line-height: 1;
  pointer-events: none;
}
.core-label-main {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 2.1vw, 34px);
  letter-spacing: 0.01em;
  color: var(--core-ink);
  text-shadow: 0 0 26px var(--glow-core);
}
.core-label-sub {
  display: block;
  margin-top: 7px;
  font-size: clamp(8.5px, 0.72vw, 11.5px);
  font-weight: 650;
  letter-spacing: 0.42em;
  text-indent: 0.42em;      /* компенсация трекинга у последней буквы */
  text-transform: uppercase;
  color: var(--core-ink-faint);
}

/* ---------- Правая колонка: демо диалога ---------- */
.chat-demo {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--glow-sm);
  overflow: hidden;
  min-width: 0;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--glass);
}
.chat-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 34% 30%, var(--accent-soft), var(--accent-deep));
  box-shadow: 0 0 16px var(--glow-soft);
}
.chat-head-text { min-width: 0; flex: 1; }
.chat-title { font-size: var(--step--1); font-weight: 700; color: var(--ink); }
.chat-status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ok); }
.chat-status .status-dot { width: 6px; height: 6px; }
.chat-demo-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  flex-shrink: 0;
}

.chat-body {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--bg-alt);
}

.chat-msg {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: var(--step--1);
  line-height: 1.45;
}
.chat-msg-client {
  align-self: flex-end;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  border-bottom-right-radius: 5px;
}
.chat-time { display: block; margin-top: 4px; font-size: 10.5px; color: var(--ink-faint); text-align: right; }

/* «THE BOT думает…» */
.chat-thinking {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: var(--glass-strong);
  border: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--ink-muted);
}
.chat-dots { display: inline-flex; gap: 3px; }
.chat-dots span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: dot-bounce 1.3s ease-in-out infinite;
}
.chat-dots span:nth-child(2) { animation-delay: 0.16s; }
.chat-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes dot-bounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* Предложенный ответ — ключевой selling point: ответ готов, но не отправлен. */
.chat-suggestion {
  align-self: stretch;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background: var(--accent-wash);
  padding: 13px 14px;
  box-shadow: var(--glow-sm);
}
.chat-suggestion-label {
  display: block;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}
.chat-suggestion p {
  font-size: var(--step--1);
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}
.chat-actions { display: flex; gap: var(--space-2); margin-top: 12px; flex-wrap: wrap; }
.chat-actions .btn { font-size: 11.5px; padding: 8px 11px; gap: 6px; }
/* Ниже ~1340px колонка диалога сужается настолько, что пара кнопок
   срывается на вторую строку. Ужимаем их, а не ломаем ряд. */
@media (max-width: 1340px) {
  .chat-actions .btn { font-size: 11px; padding: 7px 9px; }
  .chat-actions { gap: 6px; }
  /* Колонка оффера сужается настолько, что заголовки преимуществ рвутся
     вразнобой — ряд выглядит рваным. Вертикальный список читается ровно,
     а вертикальное место в Hero есть. */
  .hero-benefits { grid-template-columns: 1fr; gap: var(--space-3); }
}
.chat-actions .btn svg { width: 13px; height: 13px; }

.chat-input {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.chat-input-send { margin-inline-start: auto; color: var(--accent); display: flex; }
.chat-input-send svg { width: 16px; height: 16px; }

/* ---------- Нижняя полоса фактов ---------- */
.trust-strip {
  position: relative;
  z-index: 1;
  margin-top: clamp(36px, 4.5vw, 64px);
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.4vw, 34px);
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.trust-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.trust-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--accent-wash);
  color: var(--accent);
}
.trust-icon svg { width: 17px; height: 17px; }
.trust-value { display: block; font-family: var(--font-display); font-weight: 750; font-size: var(--step-1); color: var(--ink); line-height: 1.15; }
.trust-note  { display: block; font-size: var(--step--1); color: var(--ink-faint); line-height: 1.35; }

/* ---------- Плавное появление Hero ---------- */
/* Контент доступен сразу; это только мягкая подача, без ожидания. */
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-copy > *, .hero-scene, .chat-demo, .trust-strip {
  animation: hero-in 0.6s var(--ease) both;
}
.hero-copy > *:nth-child(1) { animation-delay: 0.02s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.07s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.12s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.17s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.22s; }
.hero-scene  { animation-delay: 0.14s; }
.chat-demo   { animation-delay: 0.22s; }
.trust-strip { animation-delay: 0.3s; }

/* ============================================================
   P2 — АДАПТИВ
   ============================================================ */

/* --- Планшет: самостоятельная композиция, а не сжатый десктоп.
       Оффер сверху на всю ширину, ниже — сцена и диалог в две колонки. --- */
@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 40px);
  }
  .hero-copy {
    grid-column: 1 / -1;
    max-width: 42rem;
  }
  .hero h1 { font-size: clamp(34px, 4.6vw + 8px, 54px); }
  .hero-lead { max-width: 38rem; }
  .hero-scene { justify-content: flex-start; }
  .ai-core { width: clamp(220px, 30vw, 320px); }
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Компактное меню.
       Порог 1080px совпадает с планшетной раскладкой Hero: 6 пунктов
       навигации + «Войти» + CTA + переключатель темы физически не
       помещаются в ряд уже на 1024px и выталкивали страницу вбок. --- */
@media (max-width: 1080px) {
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--glass);
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-toggle span {
    display: block;
    width: 17px; height: 1.5px;
    margin-inline: auto;
    background: var(--ink);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .nav { flex-wrap: wrap; }
  .theme-toggle-desktop { display: none; }
  .theme-toggle-mobile { display: inline-flex; }
  .nav-utility { margin-inline-start: auto; }
  .nav-links {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-slow) var(--ease);
  }
  .nav-links.is-open { max-height: 520px; }
  .nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--space-3);
  }
  .nav-menu a { display: block; padding: 12px 0; font-size: var(--step-0); }
  .nav-menu a::after { display: none; }
  .nav-actions {
    padding-block: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .nav-actions .btn { flex: 1; }
  /* В мобильном меню шапка обязана быть непрозрачной, иначе пункты
     наложатся на Hero. */
  .site-header:has(.nav-links.is-open) {
    background: var(--bg);
    border-bottom-color: var(--border);
  }
}

/* --- Мобильный --- */
@media (max-width: 720px) {
  .hero { padding-block: var(--space-6) var(--space-7); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero-copy { grid-column: auto; max-width: none; }
  .hero h1 { font-size: clamp(29px, 8vw, 40px); }
  .hero-lead { font-size: var(--step-0); margin-bottom: var(--space-5); }
  .hero-cta { margin-bottom: var(--space-6); }
  .hero-cta .btn { flex: 1 1 100%; }

  /* Каналы уходят под ядро горизонтальным рядом — вертикальный
     стек сбоку на узком экране не помещается. */
  .hero-scene { flex-direction: column; gap: var(--space-5); }
  .channels { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
  .channel { padding: 7px 13px 7px 9px; font-size: 10.5px; }
  .ai-core { width: min(272px, 74vw); }
  .connections { display: none; } /* линии на мобильном только мешают */

  .trust-strip { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-5); }
  .hero-benefits { grid-template-columns: 1fr; gap: var(--space-3); }
}

@media (max-width: 420px) {
  .brand img { height: 34px; }
  .brand { --brand-mark-r: 17px; }   /* марка пропорционально ниже */
  .chat-demo-tag { display: none; }
}


/* ============================================================
   P3 — КАК ЭТО РАБОТАЕТ
   ------------------------------------------------------------
   Секция объясняет, а не впечатляет: ядро меньше, свечение
   слабее, декоративность ниже, чем в Hero (§20, §30 ТЗ).
   Схема читается целиком сразу — анимация только подсвечивает
   уже нарисованные связи и ничего не скрывает.
   ============================================================ */
.how {
  position: relative;
  overflow: hidden;
  /* Шапка липкая и перекрывала бы eyebrow при переходе по якорю #how. */
  scroll-margin-top: 84px;
}

.how-head {
  max-width: 46rem;
  margin: 0 auto clamp(38px, 4.4vw, 66px);
  text-align: center;
}
.how-head .eyebrow { margin-bottom: var(--space-3); }
.how-head h2 { margin-bottom: var(--space-3); }
.how-head .lead { margin: 0; color: var(--ink-muted); }

/* Подписи этапов и схема живут в одной сетке: subgrid держит номер
   ровно над своим элементом схемы при любых ширинах колонок. */
.how-grid {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, 1.06fr) minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.78fr);
  column-gap: clamp(10px, 1.3vw, 22px);
  row-gap: clamp(22px, 2.6vw, 36px);
  align-items: center;
}

/* ---------- Ряд 1: пять этапов ---------- */
.how-steps {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  /* Фолбэк на случай отсутствия subgrid: колонки станут равными,
     подписи чуть разъедутся, но вёрстка не сломается. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-columns: subgrid;
  column-gap: clamp(10px, 1.3vw, 22px);
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  align-items: start;
}
.how-step { min-width: 0; text-align: center; }
.how-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.how-step h3 {
  font-size: var(--step-0);
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--ink);
}
.how-step p {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--ink-faint);
}

/* ---------- Слой связей ---------- */
/* Пути считаются в v2.js по фактическим рамкам узлов, поэтому
   перестановка элементов не требует правки координат вручную. */
.flow-lines {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.flow-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  /* 0.3 на глубоком фоне читалось как отсутствие линии — поток
     переставал прочитываться как единый. */
  opacity: 0.45;
  stroke-dasharray: 4 5;
}
.flow-pulse {
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 2;
  stroke-linecap: round;
  /* pathLength="100" на самом <path>: одна и та же скорость импульса
     на отрезках разной длины. */
  stroke-dasharray: 6 100;
  opacity: 0;
}
.flow-arrow { fill: var(--accent); opacity: 0.55; }

/* Импульс по главному потоку — непрерывный, но медленный. */
.how.is-live .flow-pulse-main { animation: flow-travel 5.2s var(--ease) infinite; }
/* Импульсы от знаний к ядру — редкие (§11): большой период и разбег. */
.how.is-live .flow-pulse-know { animation: flow-travel 7.4s var(--ease) infinite; }
@keyframes flow-travel {
  0%        { stroke-dashoffset: 6;    opacity: 0; }
  8%        { opacity: 0.95; }
  70%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

/* ---------- Общее для узлов схемы ---------- */
.flow-node {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* ---------- 01. Входящий вопрос ---------- */
.flow-client {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
}
.fc-channels {
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fc-channels li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.fc-ch-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--accent-wash);
  color: var(--accent);
}
.fc-ch-icon svg { width: 13px; height: 13px; }

.fc-message {
  align-self: flex-end;
  max-width: 88%;
  padding: 10px 13px;
  border-radius: var(--radius) var(--radius) 4px var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.fc-message-who {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.fc-message p { margin: 0; font-size: var(--step--1); color: var(--ink); line-height: 1.4; }

/* ---------- 03. Ядро ---------- */
.flow-core {
  grid-column: 3;
  grid-row: 2;
  display: grid;
  place-items: center;
  justify-self: center;
  /* Заметно меньше Hero-ядра: здесь это обработчик запроса,
     а не эмоциональный акцент первого экрана. */
  width: clamp(168px, 15.5vw, 224px);
  aspect-ratio: 1;
}
.fcore-well {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle,
              var(--core-well-in) 0%, var(--core-well-mid) 60%, transparent 78%);
}
.fcore-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  /* Медленнее и тусклее, чем в Hero: секция должна объяснять, а не
     перетягивать внимание на себя. */
  opacity: 0.88;
  animation: spin 112s linear infinite;
}
.fcore-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fcore-mesh { fill: none; stroke: var(--accent); stroke-width: 0.7; opacity: 0.2; }
.fcore-node { fill: var(--accent-soft); opacity: 0.8; animation: node-pulse 5s ease-in-out infinite; }
.fcore-node:nth-of-type(2n) { animation-delay: -1.7s; }
.fcore-node:nth-of-type(3n) { animation-delay: -3.1s; }

.fcore-label { position: relative; z-index: 2; text-align: center; line-height: 1; }
.fcore-label-main {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(15px, 1.35vw, 21px);
  color: var(--core-ink);
  text-shadow: 0 0 20px var(--glow-core);
}
.fcore-label-sub {
  display: block;
  margin-top: 6px;
  font-size: clamp(7.5px, 0.6vw, 9.5px);
  font-weight: 650;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: var(--core-ink-faint);
}

/* Усиление свечения на входе в экран — один раз, без бесконечного цикла. */
.how.is-live .fcore-well { animation: fcore-swell 1.5s var(--ease) 0.55s 1; }
@keyframes fcore-swell {
  0%, 100% { transform: scale(1);    filter: none; }
  45%      { transform: scale(1.09); filter: brightness(1.5); }
}

/* ---------- 04. Черновик ответа ---------- */
.flow-answer-cell {
  grid-column: 4;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.flow-answer {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.fa-label {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.flow-answer p { margin: 0; font-size: var(--step--1); line-height: 1.5; color: var(--ink); }

.how.is-live .flow-answer { animation: fa-arrive 1.4s var(--ease) 1.5s 1; }
@keyframes fa-arrive {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  40%      { box-shadow: 0 0 0 3px var(--glow-soft), var(--glow-md); }
}

/* Пояснение к схеме, НЕ элемент интерфейса: в панели оператора
   THE BOT источник ответа сейчас не показывает. */
.flow-source {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-faint);
  text-align: center;
}

/* ---------- 05. Решение оператора ---------- */
.flow-approve {
  grid-column: 5;
  grid-row: 2;
  text-align: center;
}
.fap-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent-wash);
  color: var(--accent);
}
.fap-check svg { width: 26px; height: 26px; }
.flow-approve h3 { font-size: var(--step-0); margin: 0 0 5px; color: var(--ink); }
.flow-approve p  { margin: 0; font-size: var(--step--1); color: var(--ink-faint); }

.how.is-live .fap-check { animation: fap-light 1.5s var(--ease) 2.05s 1; }
@keyframes fap-light {
  0%, 100% { box-shadow: 0 0 0 0 transparent; border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
  45%      { box-shadow: 0 0 22px var(--glow-core); border-color: var(--accent); }
}

/* ---------- Знания бизнеса ---------- */
.flow-knowledge {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-self: center;
  width: min(100%, 620px);
  margin-top: clamp(10px, 1.6vw, 24px);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
}
.fk-title {
  display: block;
  margin-bottom: var(--space-4);
  text-align: center;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}
.fk-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.fk-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  min-width: 0;
}
.fk-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fk-icon svg { width: 17px; height: 17px; }
.fk-name { font-size: var(--step--1); font-weight: 700; color: var(--ink); line-height: 1.25; }
.fk-note { font-size: 11.5px; color: var(--ink-faint); line-height: 1.35; }

/* Источники подсвечиваются по очереди — один проход при входе в экран. */
.how.is-live .fk-icon { animation: fk-light 1.1s var(--ease) calc(0.85s + var(--i) * 0.16s) 1; }
@keyframes fk-light {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  45%      { box-shadow: 0 0 18px var(--glow-soft); border-color: var(--accent); }
}

/* ---------- Нижняя полоса ---------- */
.how-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: clamp(40px, 4.6vw, 68px) 0 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
}
.how-benefit { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.how-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}
.how-benefit-icon svg { width: 16px; height: 16px; }
.how-benefit-title { display: block; font-size: var(--step-0); font-weight: 700; color: var(--ink); line-height: 1.3; }
.how-benefit-note  { display: block; font-size: var(--step--1); color: var(--ink-faint); line-height: 1.4; }

/* ---------- P3: планшет и мобильный ----------
   Горизонтальный поток в пять колонок ниже 1080px не помещается.
   Двухколоночную перестановку пришлось отвергнуть: блок знаний
   оказывается МЕЖДУ ядром и ответом, и связь «ядро -> ответ» тянется
   диагональю сквозь карточку знаний. В любой двухколоночной раскладке
   какая-то из связей пересекает чужой блок, поэтому ниже 1080px
   переходим на вертикальную ленту (§22 это допускает): порядок этапов
   сохраняется, пересечений нет, код один на планшет и телефон.

   display:contents на <ol> делает этапы прямыми детьми сетки, чтобы
   каждый встал рядом со своим элементом схемы. Роль списка возвращена
   через role="list" в разметке.
   ---------------------------------------------------------------- */
@media (max-width: 1080px) {
  .how-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    max-width: 620px;
    margin-inline: auto;
    row-gap: var(--space-4);
    align-items: stretch;
  }
  .how-steps { display: contents; }

  /* Пути SVG рассчитаны на горизонтальный поток; в колонке они шли бы
     сквозь карточки, поэтому цепочку здесь рисует CSS. */
  .flow-lines { display: none; }

  /* Колонку и ряд задаём одними и теми же :nth-child-селекторами.
     Правило вида `.how-step { grid-column: 1 }` тут бесполезно: у
     `.how-step:nth-child(N)` специфичность выше, и оно перебило бы
     сброс, оставив блок во второй колонке и породив неявную сетку. */
  .how-step:nth-child(1) { grid-column: 1; grid-row: 1;  margin-top: 0; }
  .flow-client           { grid-column: 1; grid-row: 2;  margin-top: 0; }
  .how-step:nth-child(2) { grid-column: 1; grid-row: 3;  margin-top: var(--space-5); }
  .flow-core             { grid-column: 1; grid-row: 4;  margin-top: 0; }
  .how-step:nth-child(3) { grid-column: 1; grid-row: 5;  margin-top: var(--space-5); }
  .flow-knowledge        { grid-column: 1; grid-row: 6;  margin-top: 0; width: 100%; }
  .how-step:nth-child(4) { grid-column: 1; grid-row: 7;  margin-top: var(--space-5); }
  .flow-answer-cell      { grid-column: 1; grid-row: 8;  margin-top: 0; }
  .how-step:nth-child(5) { grid-column: 1; grid-row: 9;  margin-top: var(--space-5); }
  .flow-approve          { grid-column: 1; grid-row: 10; margin-top: 0; }

  .how-step { position: relative; }

  /* Светящаяся линия между блоками: ведёт в кружок следующего этапа,
     поэтому лента читается как единый поток, а не как список карточек. */
  .how-step:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-1 * var(--space-5) - 4px);
    width: 2px; height: 28px;
    transform: translateX(-50%);
    border-radius: 2px;
    background: linear-gradient(to bottom, transparent, var(--accent), transparent);
    background-size: 100% 240%;
    opacity: 0.8;
    animation: chain-flow 2.4s linear infinite;
  }
  @keyframes chain-flow {
    from { background-position: 0 -140%; }
    to   { background-position: 0 240%; }
  }

  .flow-core { justify-self: center; }
  .how-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .flow-core { width: min(196px, 54vw); }
  .fk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
  .fc-channels { flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .how-benefits { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

@media (max-width: 420px) {
  .how-step h3 { font-size: var(--step--1); }
  .flow-knowledge { padding: var(--space-4) var(--space-3) var(--space-4); }
}


/* ============================================================
   P4 — ВОЗМОЖНОСТИ
   ------------------------------------------------------------
   P3 — последовательность, поэтому там поток слева направо.
   P4 — сеть: модули расставлены ВОКРУГ ядра и связаны с ним, а
   не друг с другом. Обычная сетка карточек здесь запрещена ТЗ и
   по смыслу: она читалась бы как список, а не как система.
   ============================================================ */
.caps {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 84px;
}

.caps-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: end;
  margin-bottom: clamp(44px, 5vw, 76px);
}
.caps-head h2 { margin: 0; }
.caps-head .eyebrow { display: block; margin-bottom: var(--space-3); }
.caps-head-aside { padding-bottom: 4px; }
.caps-head .lead { margin: 0 0 var(--space-3); color: var(--ink-muted); }
/* Мостик от P3. Тише основного описания: это связка, а не оффер. */
.caps-bridge {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* ---------- Созвездие ---------- */
.caps-constellation {
  /* Размер ядра объявлен здесь, а не на самом ядре: на планшете от него
     отсчитывается старт вертикального спайна, а переменная с потомка
     родителю не видна. */
  --core-size: clamp(178px, 17vw, 238px);
  --cc-glow-lo: 0.5;
  --cc-glow-hi: 0.85;
  --cc-halo-op: 0.7;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr) minmax(0, 1fr);
  column-gap: clamp(18px, 2.8vw, 48px);
  row-gap: clamp(14px, 1.8vw, 22px);
  align-items: center;
}
/* display:contents делает карточки прямыми детьми сетки, чтобы каждая
   встала на своё место вокруг ядра. Роль списка возвращена в разметке.
   Маркеры при этом НЕ исчезают вместе с боксом <ul> — их видно как
   посторонние точки слева от карточек, поэтому гасим явно. */
.cap-list { display: contents; list-style: none; margin: 0; padding: 0; }
.cap-list > li { min-width: 0; list-style: none; }
.cap-list > li:nth-child(1) { grid-column: 2; grid-row: 1; }
.cap-list > li:nth-child(2) { grid-column: 1; grid-row: 2; }
.cap-list > li:nth-child(3) { grid-column: 3; grid-row: 2; }
.cap-list > li:nth-child(4) { grid-column: 1; grid-row: 3; }
.cap-list > li:nth-child(5) { grid-column: 3; grid-row: 3; }
.cap-list > li:nth-child(6) { grid-column: 2; grid-row: 4; }

.cap-lines {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.cap-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.1;
  opacity: 0.32;
  transition: opacity var(--dur) var(--ease), stroke-width var(--dur) var(--ease);
}
.cap-line.is-lit { opacity: 0.95; stroke-width: 1.9; }
.cap-pulse {
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 100;   /* pathLength=100 -> одинаковая скорость на разных длинах */
  opacity: 0;
  animation: cap-travel 6.4s var(--ease) infinite;
}
@keyframes cap-travel {
  0%        { stroke-dashoffset: 5;    opacity: 0; }
  9%        { opacity: 0.9; }
  62%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

/* ---------- Карточка возможности ---------- */
.cap-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.cap-card:hover,
.cap-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: var(--glass-strong);
  box-shadow: var(--glow-sm);
}
/* Остальные притухают, но остаются читаемыми — смысл карточки не
   должен зависеть от наведения. */
.caps-constellation.has-active .cap-card:not(.is-active):not(:hover) { opacity: 0.62; }

.cap-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--accent);
}
.cap-icon svg { width: 21px; height: 21px; }

.cap-body { min-width: 0; }
.cap-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.25;
}
.cap-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cap-desc {
  display: block;
  margin-top: 5px;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--ink-muted);
}
.cap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}
.cap-tags li {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ---------- Ядро ----------
   Та же фирменная сфера, что в Hero, P3 и P5: пролистывая страницу,
   пользователь должен узнавать один и тот же объект в разных ролях, а
   не встречать другой. Здесь он компактнее и спокойнее первого экрана —
   луча сканирования нет, вращение медленнее.

   Свечение трёхуровневое: яркое ядро -> ближний мягкий glow -> очень
   слабый дальний halo. Сплошного синего круга не возникает, потому что
   каждый уровень гаснет заметно раньше следующего. */
.cap-core {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2 / 4;
  justify-self: center;
  display: grid;
  place-items: center;
  width: var(--core-size);
  aspect-ratio: 1;
}

/* Дальний halo: почти неразличим по отдельности, но даёт объём. */
.cc-halo {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-ambient) 0%, transparent 62%);
  opacity: var(--cc-halo-op);
  animation: cc-breathe 13s ease-in-out infinite;
  pointer-events: none;
}
/* Ближний glow. Blur статический: его анимация перерисовывала бы
   область каждый кадр. */
.cc-glow {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-core) 0%, var(--glow-soft) 40%, transparent 70%);
  filter: blur(16px);
  opacity: var(--cc-glow-hi);
  animation: cc-breathe 8.5s ease-in-out infinite;
  pointer-events: none;
}
/* Внутреннее тёмное ядро: даёт глубину и держит контраст надписи.
   Размер подобран так, чтобы «BUSINESS AI» лежала на плотной части
   градиента, а не на его затухании — иначе в светлой теме подпись
   бледнеет. */
.cc-well {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--core-well-in) 0%, var(--core-well-mid) 60%, transparent 80%);
  /* Собственное дыхание, только по масштабу. Кейфреймы cc-breathe
     гонят opacity по переменным СВЕЧЕНИЯ, и колодец растворялся бы
     вместе с ними — в светлой теме до 0.2, где подпись уже не читается. */
  animation: cc-well-breathe 11s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cc-well-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
/* Границы яркости — переменными: статический opacity перебивается
   работающей анимацией, и приглушение светлой темы иначе не сработает. */
@keyframes cc-breathe {
  0%, 100% { opacity: var(--cc-glow-lo); transform: scale(1); }
  50%      { opacity: var(--cc-glow-hi); transform: scale(1.05); }
}

/* Два слоя сферы навстречу друг другу — плоская картинка перестаёт
   читаться как наклейка. */
.cc-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.cc-img-front { opacity: 0.95; animation: spin 88s linear infinite; }
.cc-img-back  {
  opacity: 0.4;
  transform: scale(1.1);   /* совпадает с конечным кадром spin-back */
  filter: blur(1.4px);
  animation: spin-back 132s linear infinite;
}

.cc-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.cc-ring { fill: none; stroke: var(--accent); transform-origin: 100px 100px; }
.cc-ring-a { stroke-width: 1;   opacity: 0.3;  stroke-dasharray: 30 14 6 18; animation: spin 76s linear infinite; }
.cc-ring-b { stroke-width: 1.1; opacity: 0.38; stroke-dasharray: 10 9;       animation: spin 52s linear infinite reverse; }

/* Шесть дуг — по одной на модуль. Вспыхивает та, по чьей связи сейчас
   идёт импульс; расписание выставляется из v2.js. */
.cc-sector {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.18;
  transition: opacity var(--dur) var(--ease), stroke-width var(--dur) var(--ease);
}
.caps.is-live .cc-sector { animation: cc-sector-flash 6.4s ease-out infinite; }
@keyframes cc-sector-flash {
  0%, 100% { opacity: 0.18; }
  6%       { opacity: 0.62; }
  24%      { opacity: 0.18; }
}
/* Закреплённый выбор перебивает фоновое расписание. Селектор обязан
   включать .caps.is-live: у правила выше три класса, и без этого оно
   выигрывало бы, а фоновая пульсация продолжала гасить выбор. */
.cc-sector.is-lit,
.caps.is-live .cc-sector.is-lit { opacity: 0.95; stroke-width: 4.5; animation: none; }

.cc-edge  { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: 0.55; }
.cc-nodes circle { fill: var(--accent-soft); opacity: 0.8; animation: node-pulse 5.4s ease-in-out infinite; }
.cc-nodes circle:nth-child(2n) { animation-delay: -1.9s; }
.cc-nodes circle:nth-child(3n) { animation-delay: -3.4s; }

/* Орбитальные частицы: три штуки, разные радиусы, периоды и стороны. */
.cc-particle { fill: var(--accent-soft); transform-origin: 100px 100px; }
.cc-particle-1 { opacity: 0.85; animation: spin 26s linear infinite; }
.cc-particle-2 { opacity: 0.7;  animation: spin 19s linear infinite reverse; }
.cc-particle-3 { fill: var(--violet); opacity: 0.6; animation: spin 33s linear infinite; }

/* Отклик на выбор возможности: короткий импульс внутри ядра — карточка,
   связь и центр читаются как одна система. */
.cap-core.is-pinged .cc-glow { animation: cc-ping 0.9s var(--ease) 1, cc-breathe 8.5s ease-in-out infinite 0.9s; }
@keyframes cc-ping {
  0%   { opacity: var(--cc-glow-hi); transform: scale(1); }
  40%  { opacity: 1;                 transform: scale(1.16); }
  100% { opacity: var(--cc-glow-hi); transform: scale(1); }
}

.cc-label { position: relative; z-index: 2; text-align: center; line-height: 1; }
.cc-label-main {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(16px, 1.5vw, 23px);
  color: var(--core-ink);
  text-shadow: 0 0 22px var(--glow-core);
}
.cc-label-sub {
  display: block;
  margin-top: 6px;
  font-size: clamp(7.5px, 0.62vw, 10px);
  font-weight: 650;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: var(--core-ink-faint);
}

/* В светлой теме ядро остаётся тем же объектом, но заметно тише:
   меньше halo, меньше bloom, тоньше кольца. Грязного синего пятна на
   белом не возникает. */
:root[data-theme="light"] .cap-core {
  --cc-glow-lo: 0.2;
  --cc-glow-hi: 0.42;
  --cc-halo-op: 0.3;
}
:root[data-theme="light"] .cc-glow { filter: blur(13px); }
:root[data-theme="light"] .cc-ring-a { opacity: 0.24; stroke-width: 0.9; }
:root[data-theme="light"] .cc-ring-b { opacity: 0.3;  stroke-width: 0.9; }
:root[data-theme="light"] .cc-img-front { opacity: 0.9; }
:root[data-theme="light"] .cc-img-back  { opacity: 0.28; }

/* ---------- P4: планшет и мобильный ----------
   Орбитальная композиция ниже 1080px не держится: боковые колонки
   становятся уже карточек, а кривые связи начинают пересекать их.
   Поэтому ядро уходит наверх, карточки строятся под ним, а роль
   связи берёт на себя вертикальный спайн — «всё идёт от ядра»
   читается по-прежнему (§27, §28). */
@media (max-width: 1080px) {
  .caps-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }
  .caps-head-aside { padding-bottom: 0; }

  .caps-constellation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-4);
    align-items: stretch;
  }
  /* Кривые рассчитаны на положение карточек ВОКРУГ ядра; в колонках
     под ядром они шли бы сквозь них. */
  .cap-lines { display: none; }

  /* Колонку и ряд задаём теми же :nth-child-селекторами, что и на
     десктопе: у `.cap-list > li:nth-child(N)` специфичность выше,
     и общий сброс вида `.cap-list > li { grid-column: auto }` его
     не перебил бы. */
  .cap-core                   { grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--space-5); }
  .cap-list > li:nth-child(1) { grid-column: 1; grid-row: 2; }
  .cap-list > li:nth-child(2) { grid-column: 2; grid-row: 2; }
  .cap-list > li:nth-child(3) { grid-column: 1; grid-row: 3; }
  .cap-list > li:nth-child(4) { grid-column: 2; grid-row: 3; }
  .cap-list > li:nth-child(5) { grid-column: 1; grid-row: 4; }
  .cap-list > li:nth-child(6) { grid-column: 2; grid-row: 4; }
  /* Спайн проходит под карточками, а фон у них стеклянный — линия
     просвечивала сквозь текст. Здесь фон должен быть непрозрачным,
     чтобы связь читалась только в промежутках между карточками. */
  .cap-card { height: 100%; background: var(--surface); }
  .cap-card:hover,
  .cap-card.is-active { background: var(--surface-2); }

  /* Спайн: идёт от ядра вниз через всю группу карточек. Лежит под
     ними, поэтому виден только в промежутках — как общий канал. */
  .caps-constellation::before {
    content: "";
    position: absolute;
    left: 50%;
    /* Начинается ПОД ядром, а не от верха сетки — иначе линия
       перечёркивает само ядро. */
    top: calc(var(--core-size) + 6px);
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, var(--accent), color-mix(in srgb, var(--accent) 12%, transparent));
    background-size: 100% 220%;
    opacity: 0.55;
    animation: chain-flow 3.2s linear infinite;
    pointer-events: none;
    z-index: 0;
  }
}

@media (max-width: 680px) {
  .caps-constellation { grid-template-columns: minmax(0, 1fr); }
  .cap-list > li:nth-child(1) { grid-column: 1; grid-row: 2; }
  .cap-list > li:nth-child(2) { grid-column: 1; grid-row: 3; }
  .cap-list > li:nth-child(3) { grid-column: 1; grid-row: 4; }
  .cap-list > li:nth-child(4) { grid-column: 1; grid-row: 5; }
  .cap-list > li:nth-child(5) { grid-column: 1; grid-row: 6; }
  .cap-list > li:nth-child(6) { grid-column: 1; grid-row: 7; }
  .caps-constellation { --core-size: min(190px, 52vw); }
  .cap-core { justify-self: center; }
  .cap-icon { width: 38px; height: 38px; }
  .cap-icon svg { width: 19px; height: 19px; }
}


/* ============================================================
   P5 — ЗНАНИЯ ВАШЕГО БИЗНЕСА
   ------------------------------------------------------------
   P3 — последовательность, P4 — сеть, P5 — питание: источники
   постоянно снабжают ядро, из них собирается ответ. Отсюда
   раскладка «слева направо» и потоки вместо линий.
   Анимация здесь — часть смысла, а не украшение, но всё движение
   идёт через transform/opacity и stroke-dashoffset: никаких
   постоянных анимаций blur или больших теней.
   ============================================================ */
.kn {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 84px;
}

.kn-head { max-width: 52rem; margin: 0 auto clamp(28px, 3.2vw, 44px); text-align: center; }
.kn-head .eyebrow { display: block; margin-bottom: var(--space-3); }
.kn-head h2 { margin-bottom: var(--space-4); }
.kn-head .lead { margin: 0 auto; max-width: 42rem; color: var(--ink-muted); }
.kn-bridge {
  margin: var(--space-4) 0 0;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* ---------- Верхние бейджи ---------- */
.kn-badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 clamp(34px, 4vw, 60px);
  padding: 0;
}
.kn-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: 12px var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--border);
}
.kn-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
}
.kn-badge-icon svg { width: 16px; height: 16px; }
.kn-badge strong { display: block; font-size: var(--step--1); font-weight: 700; color: var(--ink); line-height: 1.25; }
.kn-badge span span,
.kn-badge > span > :not(strong) { font-size: 11.5px; }
.kn-badge > span { min-width: 0; font-size: 11.5px; color: var(--ink-faint); line-height: 1.35; }

/* ---------- Сцена ---------- */
.kn-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.96fr) minmax(0, 1.02fr);
  column-gap: clamp(16px, 2.4vw, 40px);
  align-items: center;
}
.kn-streams {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
/* Каждый источник даёт не одну линию, а пучок из нескольких тонких
   кривых — так поток читается как поток, а не как провод. */
.kn-flow {
  fill: none;
  stroke: var(--kn-hue, var(--accent));
  stroke-width: 0.9;
  opacity: 0.22;
  transition: opacity var(--dur) var(--ease), stroke-width var(--dur) var(--ease);
}
.kn-flow.is-lit { opacity: 0.75; stroke-width: 1.4; }
/* Частицы: короткий штрих, бегущий по кривой. pathLength=100
   выравнивает скорость на кривых разной длины. */
.kn-particle {
  fill: none;
  stroke: var(--kn-hue, var(--accent-soft));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 100;
  opacity: 0;
}
.kn.is-live .kn-particle { animation: kn-travel var(--kn-dur, 5.6s) linear infinite; }
.kn.is-live .kn-particle.is-lit { animation-duration: calc(var(--kn-dur, 5.6s) * 0.55); }
@keyframes kn-travel {
  0%        { stroke-dashoffset: 3;    opacity: 0; }
  12%       { opacity: 0.95; }
  72%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
.kn-stage.has-focus .kn-flow:not(.is-lit) { opacity: 0.1; }
.kn-stage.has-focus .kn-particle:not(.is-lit) { opacity: 0; animation-play-state: paused; }

/* ---------- Панели ---------- */
.kn-panel {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
}
.kn-panel-title {
  display: block;
  margin-bottom: var(--space-4);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Источники */
.kn-src-list { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.kn-src {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.kn-src:hover,
.kn-src.is-active {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--kn-hue, var(--accent)) 55%, transparent);
  box-shadow: var(--glow-sm);
}
.kn-src-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--kn-hue, var(--accent)) 26%, transparent);
  color: var(--kn-hue, var(--accent));
}
.kn-src-icon svg { width: 17px; height: 17px; }
.kn-src-body { min-width: 0; }
.kn-src-name { display: block; font-weight: 700; font-size: var(--step--1); color: var(--ink); line-height: 1.3; }
.kn-src-note { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-faint); line-height: 1.4; }
.kn-formats { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 8px 0 0; padding: 0; }
.kn-formats li {
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  white-space: nowrap;
}
.kn-extra {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border-strong);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-faint);
}
.kn-extra strong { color: var(--ink-muted); font-weight: 700; }

/* Знания в действии */
.kn-res-list { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.kn-res {
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.kn-res.is-lit {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--kn-hue, var(--accent)) 55%, transparent);
  box-shadow: var(--glow-sm);
}
.kn-res-q {
  margin: 0 0 6px;
  padding-left: var(--space-3);
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--ink);
  line-height: 1.35;
}
.kn-res-a { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-muted); }
.kn-res-src {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--kn-hue, var(--accent)) 24%, transparent);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  color: var(--kn-hue, var(--accent));
}
.kn-res-note {
  margin: var(--space-4) 0 0;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink-faint);
}

/* ---------- Ядро ---------- */
.kn-mid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
}
.kn-core {
  --kn-core-size: clamp(196px, 19vw, 258px);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--kn-core-size);
  aspect-ratio: 1;
}
.kn-well {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--core-well-in) 0%, var(--core-well-mid) 58%, transparent 78%);
  animation: core-well-breathe 9s ease-in-out infinite;
}
.kn-core-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  animation: spin 96s linear infinite;
}
.kn-core-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Точки входа потоков: вспыхивают, когда «приходят данные». */
.kn-port { fill: var(--kn-hue, var(--accent-soft)); opacity: 0.5; }
.kn.is-live .kn-port { animation: kn-port-flash 5.6s ease-in-out infinite; }
.kn-port.is-lit { opacity: 1; }
@keyframes kn-port-flash {
  0%, 62%, 100% { opacity: 0.4;  transform: scale(1); }
  70%           { opacity: 1;    transform: scale(1.7); }
}
.kn-port-out { fill: var(--accent); }

.kn-core-label { position: relative; z-index: 2; text-align: center; line-height: 1; }
.kn-core-main {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(17px, 1.6vw, 25px);
  color: var(--core-ink);
  text-shadow: 0 0 24px var(--glow-core);
}
.kn-core-sub {
  display: block;
  margin-top: 6px;
  font-size: clamp(7.5px, 0.64vw, 10px);
  font-weight: 650;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: var(--core-ink-faint);
}

/* Что делает ядро со знаниями */
/* Собственная подложка обязательна: пучки потоков проходят через эту
   зону, и без фона они шли бы прямо сквозь текст. */
.kn-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: var(--space-4);
  width: 100%;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.kn-step { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.kn-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}
.kn-step-icon svg { width: 15px; height: 15px; }
.kn-step strong { display: block; font-size: var(--step--1); font-weight: 700; color: var(--ink); line-height: 1.25; }
.kn-step > span { min-width: 0; font-size: 11px; color: var(--ink-faint); line-height: 1.35; }

/* ---------- Низ ---------- */
.kn-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: clamp(38px, 4.4vw, 64px) 0 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
}
.kn-benefit { min-width: 0; }
.kn-benefit strong { display: block; margin-bottom: 4px; font-size: var(--step-0); font-weight: 700; color: var(--ink); line-height: 1.3; }
.kn-benefit span { display: block; font-size: var(--step--1); color: var(--ink-faint); line-height: 1.4; }

.kn-control {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* ---------- P5: оттенки источников ----------
   Слегка разводим потоки по цвету, чтобы они читались как разные,
   но остаёмся в семье фирменного синего: не радуга (§14). */
[data-src="price"] { --kn-hue: var(--accent); }
[data-src="pages"] { --kn-hue: #4FB8F5; }
[data-src="docs"]  { --kn-hue: #3FBFA3; }
[data-src="rules"] { --kn-hue: var(--violet); }
:root[data-theme="light"] [data-src="pages"] { --kn-hue: #2A93D8; }
:root[data-theme="light"] [data-src="docs"]  { --kn-hue: #1E9B7E; }

/* ---------- P5: планшет и мобильный ----------
   Горизонтальные потоки в трёх колонках ниже 1080px не держатся:
   панели становятся уже своего содержимого, а кривые начинают идти
   сквозь них. Сцена разворачивается в ленту, а поток берёт на себя
   вертикальный спайн с бегущей частицей — движение сохраняется, как
   того требует ТЗ, но декоративных элементов заметно меньше. */
@media (max-width: 1080px) {
  .kn-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .kn-stage {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(26px, 3.4vw, 40px);
    max-width: 620px;
    margin-inline: auto;
    align-items: stretch;
  }
  .kn-streams { display: none; }

  .kn-panel-in  { grid-row: 1; }
  .kn-mid       { grid-row: 2; }
  .kn-panel-out { grid-row: 3; }

  /* Вертикальный поток между блоками ленты. */
  .kn-panel-in::after,
  .kn-mid::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(-1 * clamp(26px, 3.4vw, 40px));
    width: 2px;
    height: clamp(26px, 3.4vw, 40px);
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, var(--accent), transparent);
    background-size: 100% 240%;
    animation: chain-flow 2.6s linear infinite;
    pointer-events: none;
  }
  .kn-mid { position: relative; }

  .kn-steps { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
  .kn-step { flex: 1 1 180px; }

  .kn-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .kn-badges { grid-template-columns: minmax(0, 1fr); }
  .kn-core { --kn-core-size: min(210px, 58vw); }
  /* Направление снова колонка, поэтому flex-basis с планшета надо
     сбросить: иначе каждый пункт растягивается по высоте и блок
     занимает пол-экрана. */
  .kn-steps { flex-direction: column; }
  .kn-step { flex: 0 0 auto; }
  .kn-benefits { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

/* ---------- P5: короткая история при первом появлении ----------
   Ничего не скрывает и не открывает: панели читаются сразу и без JS.
   Последовательность лишь подсвечивает уже нарисованную схему —
   пользователь не ждёт окончания «спектакля» (§16). */
.kn.is-intro .kn-src  { animation: kn-intro-src 0.9s var(--ease) both; }
/* Считаем по <li>: сама .kn-src — единственный ребёнок своего <li>,
   и :nth-child у неё всегда 1, то есть все задержки совпали бы. */
.kn.is-intro .kn-src-list > li:nth-child(1) .kn-src { animation-delay: 0.05s; }
.kn.is-intro .kn-src-list > li:nth-child(2) .kn-src { animation-delay: 0.25s; }
.kn.is-intro .kn-src-list > li:nth-child(3) .kn-src { animation-delay: 0.45s; }
.kn.is-intro .kn-src-list > li:nth-child(4) .kn-src { animation-delay: 0.65s; }
.kn.is-intro .kn-well { animation: kn-intro-core 1.2s var(--ease) 0.95s both,
                                   core-well-breathe 9s ease-in-out infinite; }
.kn.is-intro .kn-res  { animation: kn-intro-res 0.9s var(--ease) both; }
.kn.is-intro .kn-res:nth-child(1) { animation-delay: 1.55s; }
.kn.is-intro .kn-res:nth-child(2) { animation-delay: 1.7s; }
.kn.is-intro .kn-res:nth-child(3) { animation-delay: 1.85s; }
.kn.is-intro .kn-res:nth-child(4) { animation-delay: 2s; }

@keyframes kn-intro-src {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  45%      { box-shadow: 0 0 0 2px var(--glow-soft), var(--glow-sm); }
}
@keyframes kn-intro-core {
  0%, 100% { transform: scale(1);    filter: none; }
  45%      { transform: scale(1.07); filter: brightness(1.45); }
}
@keyframes kn-intro-res {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  45%      { box-shadow: 0 0 0 2px var(--glow-soft), var(--glow-sm); }
}


/* ============================================================
   ФИРМЕННАЯ МИКРОАНИМАЦИЯ ЗНАКА
   ------------------------------------------------------------
   Логотип — единый растр со знаком и текстом, поэтому «оживить
   только знак» можно лишь маской: марка занимает 1.7–31% ширины,
   текст начинается с 36% — между ними чистый зазор (замерено по
   альфа-каналу файла). Оба слоя гаснут внутри этого зазора, так
   что надпись не затрагивается и никуда не двигается.

   Движение — только opacity и transform. Blur статический: его
   анимация вызывала бы перерисовку шапки на каждом кадре.
   ============================================================ */
.brand {
  position: relative;
  --brand-mark-x: 16.5%;      /* центр знака по замеру файла */
  --brand-mark-r: 19px;       /* фактический радиус марки при высоте 42px */
  --brand-src: url("/logo-v2.png?v=20260824b");
  --brand-aura-lo: 0.4;
  --brand-aura-hi: 0.78;
  --brand-spark-op: 0.85;
}
:root[data-theme="light"] .brand { --brand-src: url("/logo-v2-light.png?v=20260824b"); }

.brand img { position: relative; z-index: 1; }

/* Дыхание: очень медленное, на грани заметности. */
.brand-aura {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: var(--brand-mark-x);
  width: calc(var(--brand-mark-r) * 3.4);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-core) 0%, var(--glow-soft) 38%, transparent 68%);
  filter: blur(9px);
  opacity: var(--brand-aura-hi);
  animation: brand-breathe 11s ease-in-out infinite;
  pointer-events: none;
}
/* Границы яркости — переменными: статический opacity на элементе
   перебивается работающей анимацией, поэтому приглушать светлую тему
   надо здесь, иначе переопределение просто не применяется. */
@keyframes brand-breathe {
  0%, 100% { opacity: var(--brand-aura-lo); transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: var(--brand-aura-hi); transform: translate(-50%, -50%) scale(1.12); }
}

/* Редкая мягкая вспышка: та же картинка, обрезанная маской по знаку и
   подсвеченная фильтром. Отдельный ассет не нужен, совмещение точное
   по определению — это тот же самый файл в том же боксе. */
.brand-spark {
  position: absolute;
  z-index: 2;
  inset: 0;
  background-image: var(--brand-src);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-mask-image: radial-gradient(circle at var(--brand-mark-x) 50%,
                      #000 0 var(--brand-mark-r), transparent calc(var(--brand-mark-r) * 1.3));
  mask-image: radial-gradient(circle at var(--brand-mark-x) 50%,
              #000 0 var(--brand-mark-r), transparent calc(var(--brand-mark-r) * 1.3));
  filter: brightness(1.55) saturate(1.12);
  opacity: 0;
  animation: brand-spark 13s ease-in-out infinite;
  pointer-events: none;
}
/* Вспышка занимает меньше десятой доли цикла: периферическим зрением
   она почти не читается, а прямым взглядом выглядит как «живой» знак. */
@keyframes brand-spark {
  0%, 88%, 100% { opacity: 0; }
  93%           { opacity: var(--brand-spark-op); }
}

/* Наведение и фокус лишь слегка усиливают эффект. */
.brand:hover .brand-aura,
.brand:focus-visible .brand-aura { --brand-aura-hi: 0.95; animation-duration: 5.5s; }
.brand:hover .brand-spark,
.brand:focus-visible .brand-spark { animation-duration: 6s; }

/* В светлой теме свечение заметно тише: на белом оно набирает вес
   быстрее, чем на глубоком фоне. */
:root[data-theme="light"] .brand {
  --brand-aura-lo: 0.16;
  --brand-aura-hi: 0.36;
  --brand-spark-op: 0.5;
}
:root[data-theme="light"] .brand-aura { filter: blur(7px); }
:root[data-theme="light"] .brand-spark { filter: brightness(1.28) saturate(1.06); }
:root[data-theme="light"] .brand:hover .brand-aura,
:root[data-theme="light"] .brand:focus-visible .brand-aura { --brand-aura-hi: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .brand-aura  { animation: none; opacity: var(--brand-aura-lo); transform: translate(-50%, -50%); }
  .brand-spark { animation: none; opacity: 0; }
}


/* ============================================================
   P6 — КАНАЛЫ ОБЩЕНИЯ
   ------------------------------------------------------------
   P5 показывает, откуда приходят ЗНАНИЯ. P6 — откуда приходят
   ОБРАЩЕНИЯ. Язык родственный, смысл потоков другой, поэтому
   входящие пучки намеренно разные и вразнобой, а исходящий —
   один, ровный и синхронный: «разное -> организованное».
   ============================================================ */
.omni { position: relative; overflow: hidden; scroll-margin-top: 84px; }

.om-head { max-width: 46rem; margin: 0 auto clamp(34px, 4vw, 56px); text-align: center; }
.om-head .eyebrow { display: block; margin-bottom: var(--space-3); }
.om-head h2 { margin-bottom: var(--space-4); }
.om-head .lead { margin: 0; color: var(--ink-muted); }

/* Оттенки каналов: близкие, внутри фирменной синей семьи. */
[data-ch="site"]  { --om-hue: var(--accent); }
[data-ch="avito"] { --om-hue: #3FBFA3; }
[data-ch="tg"]    { --om-hue: #4FB8F5; }
:root[data-theme="light"] [data-ch="avito"] { --om-hue: #1E9B7E; }
:root[data-theme="light"] [data-ch="tg"]    { --om-hue: #2A93D8; }

/* ---------- Сцена ---------- */
/* Рабочее пространство шире остальных зон: именно оно показывает
   ценность продукта. */
.om-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 0.7fr) minmax(0, 1.9fr);
  column-gap: clamp(14px, 2vw, 32px);
  align-items: center;
}
.om-streams {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.om-flow {
  fill: none;
  stroke: var(--om-hue, var(--accent));
  stroke-width: 1;
  opacity: 0.26;
  transition: opacity var(--dur) var(--ease), stroke-width var(--dur) var(--ease);
}
.om-flow.is-lit { opacity: 0.85; stroke-width: 1.5; }
/* Исходящий поток — итог секции, поэтому он заметнее входящих:
   три ровные параллельные пряди одного цвета вместо трёх разных
   кривых пучков. Это и есть «разное -> организованное». */
.om-flow[data-ch="out"] { stroke: var(--accent); opacity: 0.42; stroke-width: 1.3; }
.om-dot[data-ch="out"]  { stroke: var(--accent-soft); stroke-width: 2.6; stroke-dasharray: 5 100; }
.om-dot {
  fill: none;
  stroke: var(--om-hue, var(--accent-soft));
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 3 100;   /* pathLength=100: одинаковая скорость на разных длинах */
  opacity: 0;
}
.omni.is-live .om-dot { animation: om-travel var(--om-dur, 5.4s) linear infinite; }
.omni.is-live .om-dot.is-lit { animation-duration: calc(var(--om-dur, 5.4s) * 0.5); }
@keyframes om-travel {
  0%        { stroke-dashoffset: 3;    opacity: 0; }
  12%       { opacity: 0.95; }
  70%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
.om-stage.has-focus .om-flow:not(.is-lit) { opacity: 0.08; }
.om-stage.has-focus .om-dot:not(.is-lit) { opacity: 0; animation-play-state: paused; }

.om-side-title {
  display: block;
  margin-bottom: var(--space-4);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Слева: живые обращения ---------- */
.om-side { position: relative; z-index: 1; min-width: 0; }
.om-ch-list { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.om-ch {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.om-ch:hover,
.om-ch.is-active {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--om-hue) 55%, transparent);
  box-shadow: var(--glow-sm);
}
.om-ch-head { display: flex; align-items: center; gap: var(--space-3); }
.om-ch-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--om-hue) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--om-hue) 28%, transparent);
  color: var(--om-hue);
}
.om-ch-icon svg { width: 16px; height: 16px; }
.om-ch-name { min-width: 0; font-size: var(--step--1); font-weight: 700; color: var(--ink); line-height: 1.25; }
.om-ch-note { display: block; font-size: 10.5px; font-weight: 500; color: var(--ink-faint); }
/* Пузырь входящего сообщения: карточка должна читаться как живое
   обращение, а не как логотип интеграции. */
.om-ch-msg {
  display: block;
  padding: 9px 11px;
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 4px;
  background: var(--glass-strong);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink);
}
.om-ch-time, .om-row-time {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: var(--ink-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Ядро ---------- */
.om-mid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
}
.om-core {
  --om-core-size: clamp(180px, 17vw, 232px);
  --om-glow-lo: 0.45;
  --om-glow-hi: 0.8;
  --om-halo-op: 0.65;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--om-core-size);
  aspect-ratio: 1;
}
/* Три уровня свечения: каждый гаснет заметно раньше следующего,
   поэтому сплошного синего круга не возникает. */
.om-halo {
  position: absolute; inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-ambient) 0%, transparent 62%);
  opacity: var(--om-halo-op);
  animation: om-breathe 12s ease-in-out infinite;
  pointer-events: none;
}
.om-glow {
  position: absolute; inset: -5%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-core) 0%, var(--glow-soft) 40%, transparent 70%);
  filter: blur(15px);
  opacity: var(--om-glow-hi);
  animation: om-breathe 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes om-breathe {
  0%, 100% { opacity: var(--om-glow-lo); transform: scale(1); }
  50%      { opacity: var(--om-glow-hi); transform: scale(1.05); }
}
/* У колодца собственное дыхание, только по масштабу: кейфреймы выше
   гонят opacity по переменным СВЕЧЕНИЯ, и в светлой теме колодец
   растворился бы вместе с ними, а с ним и читаемость надписи. */
.om-well {
  position: absolute; inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--core-well-in) 0%, var(--core-well-mid) 60%, transparent 80%);
  animation: om-well-breathe 11s ease-in-out infinite;
  pointer-events: none;
}
@keyframes om-well-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.om-core-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  animation: spin 102s linear infinite;
  pointer-events: none;
}
.om-core-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Порты входа: вспыхивают, когда по каналу приходит обращение. */
.om-port { fill: var(--om-hue, var(--accent-soft)); opacity: 0.5; }
.omni.is-live .om-port { animation: om-port-flash 5.4s ease-in-out infinite; }
.om-port.is-lit { opacity: 1; }
@keyframes om-port-flash {
  0%, 60%, 100% { opacity: 0.4; transform: scale(1); }
  68%           { opacity: 1;   transform: scale(1.7); }
}
.om-port-out { fill: var(--accent); }

.om-core-label { position: relative; z-index: 2; text-align: center; line-height: 1; }
.om-core-main {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(15px, 1.4vw, 22px);
  color: var(--core-ink);
  text-shadow: 0 0 22px var(--glow-core);
}
.om-core-sub {
  display: block;
  margin-top: 6px;
  font-size: clamp(7px, 0.58vw, 9.5px);
  font-weight: 650;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--core-ink-faint);
}
/* Отклик ядра на выбранный канал. */
.om-core.is-pinged .om-glow { animation: om-ping 0.9s var(--ease) 1, om-breathe 8s ease-in-out infinite 0.9s; }
@keyframes om-ping {
  0%   { opacity: var(--om-glow-hi); transform: scale(1); }
  40%  { opacity: 1;                 transform: scale(1.15); }
  100% { opacity: var(--om-glow-hi); transform: scale(1); }
}

.om-steps { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; width: 100%; }
.om-steps li {
  padding: 9px var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--glass);
  border: 1px solid var(--border);
  text-align: center;
}
.om-steps strong { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.om-steps span { display: block; font-size: 10.5px; color: var(--ink-faint); line-height: 1.3; }

/* ---------- Справа: единое рабочее пространство ----------
   Это визуализация по фактической логике панели, а не её снимок:
   все подписи состояний соответствуют полям, которые реально
   отдаёт GET /api/conversations. Фильтра по каналам, поиска и
   счётчика непрочитанного в продукте нет — их здесь и нет. */
.om-work { position: relative; z-index: 1; min-width: 0; }
.om-work-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
}

.om-list { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.om-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  min-width: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.om-row.is-open { background: var(--surface-2); border-color: var(--border-strong); }
.om-row.is-lit {
  background: color-mix(in srgb, var(--om-hue) 10%, transparent);
  border-color: color-mix(in srgb, var(--om-hue) 50%, transparent);
}
.om-row-icon {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 7px;
  background: color-mix(in srgb, var(--om-hue) 14%, transparent);
  color: var(--om-hue);
}
.om-row-icon svg { width: 12px; height: 12px; }
.om-row-body { min-width: 0; flex: 1; }
.om-row-top { display: flex; align-items: baseline; gap: 8px; }
.om-row-who { flex: 1; min-width: 0; font-size: 11px; font-weight: 700; color: var(--ink);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-row-top .om-row-time { margin: 0; flex-shrink: 0; }
.om-row-text {
  display: block; margin-top: 2px;
  font-size: 10.5px; color: var(--ink-muted); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Метки состояний — реальные поля выдачи: ожидание с таймером,
   готовый черновик, посетитель на сайте, повторное обращение. */
.om-tag {
  display: inline-block; margin-top: 5px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 9.5px; font-weight: 650; letter-spacing: 0.03em;
  border: 1px solid transparent;
}
.om-tag-wait   { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent);
                 background: color-mix(in srgb, var(--warn) 12%, transparent); }
.om-tag-draft  { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
                 background: var(--accent-wash); }
.om-tag-online { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent);
                 background: color-mix(in srgb, var(--ok) 12%, transparent); }
.om-tag-repeat { color: var(--ink-muted); border-color: var(--border-strong); background: var(--glass); }

/* Открытый диалог */
.om-open {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  min-width: 0;
}
.om-open-head { display: flex; align-items: center; gap: 9px; }
.om-open-who { display: block; font-size: 11px; font-weight: 700; color: var(--ink); }
.om-open-state { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--ok); }
.om-open-state .status-dot { width: 5px; height: 5px; }

.om-msg-client {
  margin: 0;
  padding: 9px 11px;
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 4px;
  background: var(--glass-strong);
  border: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.4; color: var(--ink);
}
.om-draft {
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.om-draft-label {
  display: block; margin-bottom: 6px;
  font-size: 9.5px; font-weight: 750; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent);
}
.om-draft p { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink); }
.om-draft-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.om-draft-actions .btn { font-size: 10.5px; padding: 6px 12px; }
.om-auto { margin: 0; font-size: 10px; line-height: 1.45; color: var(--ink-faint); }

/* ---------- Низ ---------- */
.om-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: clamp(34px, 4vw, 56px);
}
.om-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  list-style: none; margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
}
.om-benefit { min-width: 0; }
.om-benefit strong { display: block; margin-bottom: 3px; font-size: var(--step--1); font-weight: 700; color: var(--ink); line-height: 1.3; }
.om-benefit span { display: block; font-size: 11.5px; color: var(--ink-faint); line-height: 1.4; }

.om-cta {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--glass-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  text-align: center;
}
.om-cta p { margin: 0; font-size: var(--step--1); color: var(--ink-muted); }
.om-cta .btn { justify-content: center; font-size: var(--step-0); padding: 14px 22px; }
.om-cta .btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* В светлой теме ядро тише: меньше halo и bloom, тоньше слои. */
:root[data-theme="light"] .om-core {
  --om-glow-lo: 0.18;
  --om-glow-hi: 0.4;
  --om-halo-op: 0.28;
}
:root[data-theme="light"] .om-glow { filter: blur(12px); }
:root[data-theme="light"] .om-core-img { opacity: 0.92; }

/* ---------- P6: интро при первом появлении ----------
   Подсвечивает уже нарисованную схему по порядку: каналы, ядро,
   диалоги. Ничего не скрывает — ждать окончания не нужно. */
.omni.is-intro .om-ch { animation: om-intro-ch 0.9s var(--ease) both; }
.omni.is-intro .om-ch-list > li:nth-child(1) .om-ch { animation-delay: 0.05s; }
.omni.is-intro .om-ch-list > li:nth-child(2) .om-ch { animation-delay: 0.35s; }
.omni.is-intro .om-ch-list > li:nth-child(3) .om-ch { animation-delay: 0.65s; }
.omni.is-intro .om-glow { animation: om-intro-core 1.2s var(--ease) 1s both,
                                     om-breathe 8s ease-in-out infinite 2.2s; }
.omni.is-intro .om-row { animation: om-intro-row 0.8s var(--ease) both; }
.omni.is-intro .om-list > li:nth-child(1) { animation-delay: 1.6s; }
.omni.is-intro .om-list > li:nth-child(2) { animation-delay: 1.75s; }
.omni.is-intro .om-list > li:nth-child(3) { animation-delay: 1.9s; }
.omni.is-intro .om-list > li:nth-child(4) { animation-delay: 2.05s; }
.omni.is-intro .om-list > li:nth-child(5) { animation-delay: 2.2s; }
.omni.is-intro .om-draft { animation: om-intro-row 0.9s var(--ease) 2.4s both; }

@keyframes om-intro-ch {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  45%      { box-shadow: 0 0 0 2px var(--glow-soft), var(--glow-sm); }
}
@keyframes om-intro-core {
  0%, 100% { transform: scale(1);    filter: none; }
  45%      { transform: scale(1.08); filter: brightness(1.4); }
}
@keyframes om-intro-row {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  45%      { box-shadow: 0 0 0 2px var(--glow-soft); }
}

/* ---------- P6: планшет и мобильный ----------
   Горизонтальная сцена ниже 1080px не держится: рабочее пространство
   становится уже своего содержимого, а кривые начинают идти сквозь
   панели. Разворачиваем в ленту, поток берёт на себя вертикальный
   спайн — движение сохраняется, декоративных элементов меньше. */
@media (max-width: 1080px) {
  .om-stage {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(26px, 3.4vw, 40px);
    max-width: 660px;
    margin-inline: auto;
    align-items: stretch;
  }
  .om-streams { display: none; }
  .om-side { grid-row: 1; }
  .om-mid  { grid-row: 2; position: relative; }
  .om-work { grid-row: 3; }

  .om-side::after,
  .om-mid::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(-1 * clamp(26px, 3.4vw, 40px));
    width: 2px;
    height: clamp(26px, 3.4vw, 40px);
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, var(--accent), transparent);
    background-size: 100% 240%;
    animation: chain-flow 2.6s linear infinite;
    pointer-events: none;
  }
  .om-side { position: relative; }

  .om-steps { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .om-steps li { flex: 1 1 170px; }

  .om-foot { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* Панель целиком на 390px нечитаема — оставляем компактную
     мобильную визуализацию: список и открытый диалог друг под другом. */
  .om-work-body { grid-template-columns: minmax(0, 1fr); }
  .om-list { max-height: none; }
  .om-list > li:nth-child(n + 4) { display: none; }   /* хватает трёх обращений */
  .om-steps { flex-direction: column; }
  .om-steps li { flex: 0 0 auto; }
  .om-benefits { grid-template-columns: minmax(0, 1fr); }
  .om-core { --om-core-size: min(200px, 56vw); }
}


/* ============================================================
   P7 — ПОДКЛЮЧЕНИЕ
   ------------------------------------------------------------
   Коммерческая секция, и ритм здесь намеренно другой: после
   плотных P5/P6 нужна пауза. Сетей потоков нет, только тихая
   подсветка карточек и один медленный импульс по шагам.
   ============================================================ */
.pricing { position: relative; overflow: hidden; scroll-margin-top: 84px; }

.pr-head { max-width: 44rem; margin: 0 auto clamp(36px, 4.2vw, 60px); text-align: center; }
.pr-head .eyebrow { display: block; margin-bottom: var(--space-3); }
.pr-head h2 { margin-bottom: var(--space-4); }
.pr-head .lead { margin: 0; color: var(--ink-muted); }

/* ---------- Карточки уровней ---------- */
.pr-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Подъём мягкий: агрессивного увеличения тут быть не должно. */
.pr-card:hover,
.pr-card:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: var(--glass-strong);
  box-shadow: var(--glow-sm);
}
/* Центральный вариант заметнее, но боковые не выглядят ущербными. */
.pr-card.is-featured {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--glass-strong);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), var(--glow-sm);
}
.pr-badge {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Небольшая марка уровня: тот же язык, что у ядер, но совсем тихо. */
.pr-mark {
  position: relative;
  display: block;
  width: 40px; height: 40px;
  flex-shrink: 0;
}
.pr-mark-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.pr-mark-core {
  position: absolute; inset: 32%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, var(--accent) 70%);
  box-shadow: 0 0 12px var(--glow-soft);
}
/* Каждый следующий уровень чуть активнее предыдущего — очень деликатно. */
.pricing.is-live .pr-card[data-level="start"]    .pr-mark-core { animation: pr-pulse 6.5s ease-in-out infinite; }
.pricing.is-live .pr-card[data-level="business"] .pr-mark-core { animation: pr-pulse 4.2s ease-in-out infinite; }
.pricing.is-live .pr-card[data-level="custom"]   .pr-mark-core { animation: pr-pulse 5.2s ease-in-out infinite; }
.pricing.is-live .pr-card[data-level="business"] .pr-mark-ring,
.pricing.is-live .pr-card[data-level="custom"]   .pr-mark-ring { animation: spin 34s linear infinite; }
.pr-card[data-level="business"] .pr-mark-ring,
.pr-card[data-level="custom"]   .pr-mark-ring { border-style: dashed; }
@keyframes pr-pulse {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.14); }
}

.pr-card h3 { margin: 0; font-size: var(--step-2); }
.pr-fit { margin: 0; font-size: var(--step--1); color: var(--ink-muted); line-height: 1.45; }

/* Ценник — отдельный слот. Коммерческая модель ещё уточняется, замена
   цифры не должна задевать раскладку карточки. */
.pr-price { margin: auto 0 0; padding-top: var(--space-3); }
.pr-price-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-3);
  color: var(--ink);
  line-height: 1.1;
}
.pr-price-note { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-faint); }
.pr-card .btn { justify-content: center; margin-top: var(--space-3); }

.pr-disclaimer {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* ---------- Что входит в любой вариант ---------- */
.pr-shared {
  margin-top: clamp(34px, 4vw, 56px);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
}
.pr-shared-title {
  display: block;
  margin-bottom: var(--space-4);
  text-align: center;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}
.pr-shared-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pr-shared-list li { min-width: 0; padding-left: var(--space-3); border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.pr-shared-list strong { display: block; margin-bottom: 3px; font-size: var(--step--1); font-weight: 700; color: var(--ink); line-height: 1.3; }
.pr-shared-list span { display: block; font-size: 11.5px; color: var(--ink-faint); line-height: 1.4; }

/* ---------- Как проходит подключение ---------- */
.pr-flow { margin-top: clamp(38px, 4.4vw, 64px); }
.pr-flow h3 { margin: 0 0 var(--space-5); text-align: center; font-size: var(--step-2); }
.pr-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Тонкая линия сквозь шаги с одним медленным импульсом — этого хватает,
   чтобы секция не выглядела мёртвой, и не спорит с P5/P6. */
.pr-steps::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(to right,
              transparent, color-mix(in srgb, var(--accent) 35%, transparent), transparent);
  z-index: 0;
}
/* Импульс — движение градиента по фону самой линии, а не сдвиг
   элемента: смещение в vw промахивалось бы мимо линии на других
   ширинах, потому что её границы заданы в процентах контейнера. */
.pr-steps::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 12%;
  right: 12%;
  height: 5px;
  border-radius: 3px;
  background-image: radial-gradient(ellipse 26px 3px at center, var(--accent-soft) 0%, transparent 72%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: -12% center;
  opacity: 0;
  z-index: 0;
}
.pricing.is-live .pr-steps::after { animation: pr-travel 7s var(--ease) infinite; }
@keyframes pr-travel {
  0%        { opacity: 0;    background-position: -12% center; }
  8%        { opacity: 0.9; }
  72%       { opacity: 0.9;  background-position: 112% center; }
  80%, 100% { opacity: 0;    background-position: 112% center; }
}

.pr-step { position: relative; z-index: 1; min-width: 0; }
.pr-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background: var(--bg);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 12.5px;
}
.pr-step h4 { margin: 0 0 5px; font-size: var(--step-0); line-height: 1.25; }
.pr-step p { margin: 0; font-size: var(--step--1); color: var(--ink-faint); line-height: 1.45; }

/* ---------- Финальный призыв ---------- */
.pr-final {
  margin-top: clamp(38px, 4.4vw, 64px);
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: var(--radius-xl);
  background: var(--glass-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  text-align: center;
}
.pr-final h3 { margin: 0 0 var(--space-3); font-size: var(--step-3); }
.pr-final > p { margin: 0 auto; max-width: 34rem; color: var(--ink-muted); }
.pr-final-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.pr-final-cta .btn { font-size: var(--step-0); padding: 15px 26px; }
.pr-final-cta .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.pr-trust { margin: var(--space-4) auto 0; max-width: 32rem; font-size: var(--step--1); color: var(--ink-faint); }

/* Мягкое появление при въезде в экран. */
.pricing.is-intro .pr-card { animation: pr-arrive 0.7s var(--ease) both; }
.pricing.is-intro .pr-cards > li:nth-child(1) { animation-delay: 0.05s; }
.pricing.is-intro .pr-cards > li:nth-child(2) { animation-delay: 0.15s; }
.pricing.is-intro .pr-cards > li:nth-child(3) { animation-delay: 0.25s; }
@keyframes pr-arrive {
  from { opacity: 0.3; transform: translateY(14px); }
  to   { opacity: 1;   transform: translateY(0); }
}

/* В светлой теме карточки светлые, центральная выделена рамкой и лёгкой
   тенью, а не сплошной синей заливкой. */
:root[data-theme="light"] .pr-card { background: var(--surface); }
:root[data-theme="light"] .pr-card:hover,
:root[data-theme="light"] .pr-card:focus-within { background: var(--surface-2); box-shadow: var(--shadow); }
:root[data-theme="light"] .pr-card.is-featured {
  background: var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow);
}
:root[data-theme="light"] .pr-shared,
:root[data-theme="light"] .pr-final { background: var(--bg-alt); }

/* ---------- P7: планшет и мобильный ---------- */
@media (max-width: 1080px) {
  .pr-cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  /* Порядок сохраняем «как в разметке» — горизонтального скролла не вводим. */
  .pr-shared-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); }
  .pr-steps::before, .pr-steps::after { display: none; }
}

@media (max-width: 680px) {
  .pr-shared-list { grid-template-columns: minmax(0, 1fr); }
  .pr-steps { grid-template-columns: minmax(0, 1fr); }
  .pr-final-cta .btn { width: 100%; }
}


/* ============================================================
   P8 — ВОПРОСЫ
   ------------------------------------------------------------
   Ядро здесь самое маленькое на странице — иерархия ролей:
   Hero 268 -> P5 258 -> P4 238 -> P3 223 -> FAQ 180. Роль одна:
   «THE BOT готов ответить», поэтому и анимация самая тихая.
   ============================================================ */
.faq { position: relative; overflow: hidden; scroll-margin-top: 84px; }

.faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.3fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.faq-aside { position: sticky; top: 104px; }
.faq-aside .eyebrow { display: block; margin-bottom: var(--space-3); }
.faq-aside h2 { margin-bottom: var(--space-3); }
.faq-aside .lead { margin: 0 0 var(--space-6); color: var(--ink-muted); }

.faq-core {
  position: relative;
  width: 180px;
  aspect-ratio: 1;
  --faq-lo: 0.45;
  --faq-hi: 0.75;
}
.faq-glow {
  position: absolute; inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-core) 0%, var(--glow-soft) 42%, transparent 70%);
  filter: blur(14px);
  opacity: var(--faq-hi);
  animation: faq-breathe 10s ease-in-out infinite;
}
@keyframes faq-breathe {
  0%, 100% { opacity: var(--faq-lo); transform: scale(1); }
  50%      { opacity: var(--faq-hi); transform: scale(1.04); }
}
/* Колодец дышит только масштабом: кейфреймы выше гонят opacity по
   переменным свечения, и в светлой теме он растворился бы вместе с ними. */
.faq-well {
  position: absolute; inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--core-well-in) 0%, var(--core-well-mid) 60%, transparent 80%);
}
.faq-core-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  animation: spin 130s linear infinite;   /* самое медленное на странице */
}
.faq-core-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.faq-node {
  fill: var(--accent-soft);
  opacity: 0.4;
  transition: opacity var(--dur) var(--ease);
}
.faq.is-live .faq-node { animation: node-pulse 7s ease-in-out infinite; }
.faq-node:nth-of-type(2n) { animation-delay: -2.3s; }
.faq-node:nth-of-type(3n) { animation-delay: -4.1s; }
/* Узел раскрытого вопроса. Селектор с .faq.is-live обязателен: иначе
   фоновая пульсация (три класса) перебьёт подсветку по специфичности. */
.faq-node.is-lit,
.faq.is-live .faq-node.is-lit { opacity: 1; animation: faq-ping 0.9s var(--ease) 1; }
@keyframes faq-ping {
  0%   { opacity: 0.4; r: 3; }
  40%  { opacity: 1;   r: 5.4; }
  100% { opacity: 1;   r: 3; }
}
.faq-core-note {
  margin: var(--space-4) 0 0;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* ---------- Аккордеон ---------- */
.faq-list { list-style: none; margin: 0; padding: 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item h3 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) 0;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.faq-q:hover { color: var(--accent); }
.faq-q[aria-expanded="true"] { color: var(--accent); }

/* Знак «плюс», который на раскрытии становится «минусом». */
.faq-sign {
  position: relative;
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq-sign::before,
.faq-sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 1.5px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: opacity var(--dur) var(--ease);
}
.faq-sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-sign { background: var(--accent-wash); transform: rotate(180deg); }
.faq-q[aria-expanded="true"] .faq-sign::after { opacity: 0; }

/* Раскрытие через grid-template-rows: анимируется плавно и не требует
   знать высоту содержимого. Текст остаётся в разметке всегда —
   поисковики видят ответы, JS для этого не нужен. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.faq-a > p {
  overflow: hidden;
  margin: 0;
  /* Свёрнутый ответ скрыт и от скринридера — иначе он читал бы текст
     закрытого вопроса, хотя визуально его нет. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur-slow);
  color: var(--ink-muted);
  line-height: 1.6;
}
.faq-a.is-open { grid-template-rows: 1fr; }
.faq-a.is-open > p {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  padding-bottom: var(--space-5);
  transition: opacity var(--dur) var(--ease) 0.08s, transform var(--dur) var(--ease) 0.08s,
              visibility 0s;
}

/* ============================================================
   P8 — ФИНАЛЬНЫЙ ПРИЗЫВ
   Родственник Hero, но не копия: вместо ядра — энергетическое поле,
   в которое сходится страница. Движение очень медленное, только
   transform и opacity.
   ============================================================ */
.final {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(72px, 9vw, 140px);
}
.final-field { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.final-halo {
  position: absolute;
  top: 50%; left: 50%;
  width: min(1100px, 130%);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--glow-core) 0%, var(--glow-soft) 34%, transparent 66%);
  filter: blur(48px);
  opacity: var(--final-hi);
  animation: final-breathe 14s ease-in-out infinite;
}
@keyframes final-breathe {
  0%, 100% { opacity: var(--final-lo); transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: var(--final-hi); transform: translate(-50%, -50%) scale(1.06); }
}
.final { --final-lo: 0.3; --final-hi: 0.5; }
:root[data-theme="light"] .final { --final-lo: 0.14; --final-hi: 0.26; }

.final-arcs { position: absolute; inset: 0; width: 100%; height: 100%; }
.final-arc {
  fill: none;
  stroke: var(--accent);
  transform-origin: 400px 200px;
}
.final-arc-1 { stroke-width: 0.8; opacity: 0.16; animation: spin 150s linear infinite; }
.final-arc-2 { stroke-width: 0.8; opacity: 0.12; animation: spin 190s linear infinite reverse; }
.final-arc-3 { stroke-width: 0.8; opacity: 0.2;  animation: spin 120s linear infinite; }
.final-nodes circle { fill: var(--accent-soft); opacity: 0.5; animation: node-pulse 8s ease-in-out infinite; }
.final-nodes circle:nth-child(2n) { animation-delay: -2.8s; }
.final-nodes circle:nth-child(3n) { animation-delay: -5.2s; }

.final-inner { position: relative; z-index: 1; }
.final-inner h2 { margin-bottom: var(--space-4); font-size: var(--step-5); }
.final-inner .lead { margin: 0 auto; max-width: 36rem; color: var(--ink-muted); }
.final-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.final-cta .btn { font-size: var(--step-0); padding: 16px 28px; }
.final-cta .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.final-trust { margin: var(--space-5) auto 0; max-width: 32rem; font-size: var(--step--1); color: var(--ink-faint); }

/* ============================================================
   P8 — ПОДВАЛ
   ============================================================ */
.site-footer {
  position: relative;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding-block: clamp(40px, 5vw, 64px) var(--space-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.footer-brand { max-width: 26rem; }
/* В подвале логотип статичен: микроанимация знака здесь только
   отвлекала бы от последнего экрана. */
.footer-logo { display: block; height: 38px; width: auto; margin-bottom: var(--space-4); }
.footer-logo-light { display: none; }
:root[data-theme="light"] .footer-logo-dark  { display: none; }
:root[data-theme="light"] .footer-logo-light { display: block; }
.footer-brand p { margin: 0; font-size: var(--step--1); color: var(--ink-faint); line-height: 1.55; }

.footer-nav h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-nav a {
  font-size: var(--step--1);
  color: var(--ink-muted);
  transition: color var(--dur) var(--ease);
}
.footer-nav a:hover { color: var(--accent); }

.footer-bottom {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.footer-sub { letter-spacing: 0.28em; text-transform: uppercase; font-size: 10px; }
/* Прижата вправо на десктопе, уходит на свою строку на узких экранах.
   Длиннее прежней оговорки, поэтому ограничена по ширине и выровнена
   по правому краю — иначе она распирала бы нижнюю строку подвала. */
.footer-legal { margin-left: auto; max-width: 62ch; text-align: right; text-wrap: balance; }
/* Ссылка не должна разрываться между строк. */
.footer-legal a { white-space: nowrap; }

/* ---------- P8: планшет и мобильный ---------- */
@media (max-width: 1080px) {
  /* Липкое ядро на узких экранах только мешает — оно уезжало бы
     поверх списка вопросов. */
  .faq-wrap { grid-template-columns: minmax(0, 1fr); }
  .faq-aside { position: static; text-align: center; }
  .faq-core { margin: 0 auto; }
  .faq-core-note { text-align: center; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 680px) {
  .faq-core { width: 140px; }        /* компактное, не на пол-экрана */
  .faq-q { font-size: var(--step-0); }
  .final-cta .btn { width: 100%; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
  .footer-legal { margin-left: 0; max-width: none; text-align: left; }
}

/* ============================================================
   RELEASE FIX — ПАУЗА ФОНОВЫХ АНИМАЦИЙ ВНЕ ЭКРАНА
   ------------------------------------------------------------
   Класс is-ambient ставит один наблюдатель из v2.js. Пока его нет,
   секция считается невидимой, и всё её движение замирает: браузер
   не должен непрерывно рисовать десятки колец и частиц, которых
   никто не видит.

   Замирает именно ВОСПРОИЗВЕДЕНИЕ, а не сама анимация: вернувшись
   в поле зрения, секция продолжает с того же кадра — перезапуска
   вступления не происходит.

   Electric Field и чат живут прямыми детьми <body>, вне секций,
   поэтому этих правил не касаются.
   ============================================================ */
.hero:not(.is-ambient),
.hero:not(.is-ambient)::before,
.hero:not(.is-ambient)::after,
.hero:not(.is-ambient) *,
.hero:not(.is-ambient) *::before,
.hero:not(.is-ambient) *::after,
.section:not(.is-ambient),
.section:not(.is-ambient)::before,
.section:not(.is-ambient)::after,
.section:not(.is-ambient) *,
.section:not(.is-ambient) *::before,
.section:not(.is-ambient) *::after {
  animation-play-state: paused !important;
}

/* ============================================================
   RELEASE FIX — ЗОНА НАЖАТИЯ НА СЕНСОРНЫХ ЭКРАНАХ
   ------------------------------------------------------------
   Размер текста не меняем — растёт только область попадания, и
   только там, где палец, а не курсор. На десктопе отступы прежние.

   Ссылка на оферту внутри предложения (.footer-legal a) намеренно
   не трогается: она часть текста, и растянутая строка сломала бы
   абзац ради цели, по которой не промахиваются.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  .footer-nav a,
  .nav-login {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* CTA в раскрытом меню не дотягивал трёх пикселей до той же нормы. */
  .nav-links .btn { min-height: 44px; }
  /* Ссылки идут колонками: вертикальный ритм задаёт сама зона
     нажатия, поэтому дополнительные отступы списку не нужны. */
  .footer-nav li { margin: 0; }
}