/* ============================================================
   Лев Зуев — портфолио · детальные страницы услуг (services/*)
   Подключается ПОСЛЕ ../styles.css и только ДОПОЛНЯЕТ его:
   токены, ресет, .nav, .btn-*, .line/.line__inner, .reveal,
   .section, .section-kicker, .h-display, .grain, .footer —
   всё берётся из главного файла. Здесь — специфика подстраниц.
   Все цвета — ТОЛЬКО токены (свои — объявлены ниже per-theme).
   ============================================================ */

/* ── Доп. токены: корпус телефона (mobile-apps) ──────────── */
:root {
  --phone-frame:    #24221f;                 /* графитовый корпус на бумаге */
  --phone-frame-hi: #3d3a35;                 /* блик металла */
  --phone-edge:     rgba(255, 255, 255, 0.16);
  --phone-screen:   #f7f4ee;                 /* дисплей чуть светлее бумаги — «светится» */
  --phone-shadow:
    0 48px 96px -36px rgba(22, 21, 19, 0.5),
    0 16px 40px -24px rgba(22, 21, 19, 0.3);

  /* Консоль «Агент за работой» (ai-agents) — мягкий отрыв от бумаги */
  --aw-shadow:
    0 36px 72px -44px rgba(22, 21, 19, 0.38),
    0 12px 28px -20px rgba(22, 21, 19, 0.16);

  /* Мини-Clawd: родные цвета маскота — терракота корпуса и чёрные
     глаза (решение владельца 2026-07-03: #DD775B везде). Токены
     темонезависимые — большой Clawd одинаков в обеих темах. */
  --clawd:     #dd775b;
  --clawd-eye: #000000;

  /* Мини-сайт в окне браузера (websites) — СВОЯ пара палитр.
     Токены темонезависимые намеренно: мини-сайт переключает свою
     тему сам (этап 3 сцены — мета-подмигивание переключателю в
     шапке), поэтому обе его палитры существуют одновременно в
     любой теме родительской страницы. Экран «светится» как дисплей
     телефона (--phone-screen) — светлый мини-сайт читается и на
     тёмной бумаге. Акцент общий: var(--accent). */
  --wsite-bg:        #f7f4ee;                   /* бумага-экран */
  --wsite-ink:       #1d1b18;
  --wsite-dim:       rgba(29, 27, 24, 0.58);
  --wsite-line:      rgba(29, 27, 24, 0.16);
  --wsite-card:      rgba(29, 27, 24, 0.05);
  --wsite-dark-bg:   #151514;                   /* своя «Сигнал»-ночь */
  --wsite-dark-ink:  #ebe8e3;
  --wsite-dark-dim:  rgba(235, 232, 227, 0.58);
  --wsite-dark-line: rgba(235, 232, 227, 0.18);
  --wsite-dark-card: rgba(235, 232, 227, 0.07);
}
html[data-theme="dark"] {
  --phone-frame:    #030303;
  --phone-frame-hi: #2b2b2b;
  --phone-edge:     rgba(232, 230, 227, 0.2);
  --phone-screen:   #171717;                 /* чуть светлее фона #111 */
  --phone-shadow:
    0 48px 96px -30px rgba(0, 0, 0, 0.85),
    0 16px 40px -20px rgba(0, 0, 0, 0.6);

  --aw-shadow:
    0 36px 72px -40px rgba(0, 0, 0, 0.8),
    0 12px 28px -18px rgba(0, 0, 0, 0.5);
}

/* ══════════════════════════════════════════════════════════════
   HERO ПОДСТРАНИЦЫ
═══════════════════════════════════════════════════════════════ */
.sv-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(128px, 18vh, 190px) var(--pad) clamp(56px, 8vw, 96px);
}
/* То же тихое свечение, что на главной, — язык сайта.
   Hero здесь короче, чем на главной (не 100dvh), поэтому радиальный
   градиент у самой нижней кромки ещё не угас сам по себе — а
   overflow:hidden рубит его ровной линией. Маска гасит ::before
   до нуля ДО физического края бокса, так что клип приходится уже
   на прозрачный пиксель — шва не видно. */
.sv-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at -5% 110%, rgba(var(--accent-rgb), 0.06) 0%, transparent 60%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.sv-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Хлебная крошка «← Все услуги» */
.sv-crumb {
  margin-bottom: clamp(22px, 3.5vw, 40px);
}
.sv-crumb a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 0;
  transition: color 0.2s;
}
.sv-crumb a:hover { color: var(--accent-ink); }
.sv-crumb a:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }
.sv-crumb__arr {
  display: inline-flex;
  transition: transform 0.3s var(--ease-out);
}
.sv-crumb a:hover .sv-crumb__arr { transform: translateX(-3px); }

/* Кикер услуги («Услуга 01 · ИИ-агенты») */
.sv-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: clamp(24px, 4vw, 44px);
}
.sv-kicker::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

/* Заголовок — кинетическая типографика (маски .line из styles.css) */
.sv-hero__headline {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(44px, 7.4vw, 112px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--text);
  margin-bottom: clamp(28px, 4.5vw, 56px);
  max-width: 14ch;
}

/* Компакт-вариант заголовка для страниц с длинным НЕРАЗРЫВНЫМ словом
   в строке-маске («Автоматизируется.»): на узких экранах слово не
   переносится и обрезалось бы маской .line — ужимаем кегль только
   на мобиле, десктопный clamp не трогаем. */
@media (max-width: 520px) {
  .sv-hero__headline--compact { font-size: clamp(28px, 8.6vw, 44px); }
}

/* FOUC-щит: строки подстраниц скрыты до инициализации GSAP
   (тот же приём, что hero/contact на главной) */
.js .sv-hero .line__inner,
.js .sv-cta .line__inner { visibility: hidden; }
.js.anim-ready .sv-hero .line__inner,
.js.anim-ready .sv-cta .line__inner { visibility: visible; }
.no-js .sv-hero .line__inner,
.no-js .sv-cta .line__inner { visibility: visible; }

/* Ряд: лид слева + оглавление страницы справа (editorial-асимметрия) */
.sv-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 20vw, 250px);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
  margin-bottom: clamp(30px, 4.5vw, 52px);
}
@media (max-width: 800px) {
  .sv-hero__row { grid-template-columns: 1fr; gap: 28px; }
}

.sv-hero__sub {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 52ch;
}

/* Оглавление страницы — нумерованные хайрлайн-строки */
.sv-toc { display: flex; flex-direction: column; }
.sv-toc__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--ff-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding: 10px 2px;
  transition: color 0.2s;
}
.sv-toc__item:last-child { border-bottom: 1px solid var(--border); }
.sv-toc__item:hover { color: var(--text); }
.sv-toc__item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: 4px; }
.sv-toc__num {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  flex-shrink: 0;
}

.sv-hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  .sv-hero__actions .btn-primary { flex: 1; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   ОБЩИЕ БЛОКИ ПОДСТРАНИЦ
═══════════════════════════════════════════════════════════════ */

/* Крупная тезис-строка (display-заявление секции) */
.sv-statement {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  max-width: 22ch;
  margin-bottom: clamp(36px, 5.5vw, 64px);
}
.sv-statement em {
  font-style: normal;
  color: var(--accent-ink);
}

/* Две колонки текста (язык .about__cols главной) */
.sv-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 56px);
  max-width: 76ch;
  margin-left: auto;           /* лёгкий сдвиг вправо — асимметрия */
  margin-bottom: clamp(48px, 7vw, 84px);
}
.sv-cols p {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.35vw, 16px);
  line-height: 1.72;
  color: var(--text-dim);
}
@media (max-width: 680px) {
  .sv-cols { grid-template-columns: 1fr; margin-left: 0; }
}

/* Заголовочный блок секции: h2 + лид справа (язык .svc-header) */
.sv-head {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(52px, 8vw, 96px);
}
@media (max-width: 760px) {
  .sv-head { grid-template-columns: 1fr; gap: 20px; }
}
.sv-head__note {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 44ch;
}

/* Личная строка-мостик (язык .systems__bridge главной) */
.sv-bridge {
  margin-top: clamp(48px, 7vw, 84px);
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 2px solid var(--accent);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--text-mid);
  max-width: 52ch;
}

/* Честная сноска (язык .value__foot главной) */
.sv-foot {
  margin-top: 18px;
  font-family: var(--ff-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
  opacity: 0.85;
  max-width: 70ch;
}

/* Ссылка-стрелка на раздел главной (пиксельная → из семейства px-arr) */
.sv-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(26px, 4vw, 40px);
  font-family: var(--ff-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-mid);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.sv-more:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.sv-more__arr { transition: transform 0.3s var(--ease-out); }
.sv-more:hover .sv-more__arr { transform: translateX(3px); }
.sv-more:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }

/* Колонка из нескольких ссылок-стрелок (мостики секции) */
.sv-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: clamp(26px, 4vw, 40px);
}
.sv-links .sv-more { margin-top: 0; }

/* ── Бенто-ячейка (базовый язык карточек: .svc-card главной) ── */
.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
  padding: clamp(46px, 5vw, 58px) clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 30px);
  min-height: clamp(160px, 14vw, 208px);
  transition: background-color 0.35s var(--ease-out);
}
.cell:hover { background-color: var(--surface); }

.cell-num {
  position: absolute;
  top: clamp(16px, 2vw, 22px);
  left: clamp(18px, 2.2vw, 26px);
  z-index: 1;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  opacity: 0.75;
  white-space: nowrap;
}
.cell-name {
  position: relative;
  z-index: 1;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}
.cell-desc {
  position: relative;
  z-index: 1;
  font-family: var(--ff-body);
  font-size: clamp(12.5px, 1.15vw, 14px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 44ch;
}

/* Флагманская ячейка — поверхность + штриховка (язык .svc-card--flag) */
.cell--flag {
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, var(--pattern-line) 22px 23px),
    var(--surface);
  gap: 14px;
}
.cell--flag:hover { background-color: var(--surface-hi); }
.cell--flag .cell-name {
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.03em;
}
/* Ячейка на поверхности без штриховки */
.cell--tint { background-color: var(--surface); }
.cell--tint:hover { background-color: var(--surface-hi); }

/* ══════════════════════════════════════════════════════════════
   AI-AGENTS · «Чат-бот vs агент» — пара-сравнение
═══════════════════════════════════════════════════════════════ */
.duo {
  display: grid;
  grid-template-columns: 1fr 1.25fr;   /* агент крупнее — намеренная асимметрия */
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 680px) {
  .duo { grid-template-columns: 1fr; }
}

.duo-cell {
  background: var(--bg);
  padding: clamp(26px, 3.4vw, 42px) clamp(20px, 2.6vw, 34px) clamp(28px, 3.6vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background-color 0.35s var(--ease-out);
}
.duo-cell--agent {
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, var(--pattern-line) 22px 23px),
    var(--surface);
}
.duo-cell:hover { background-color: var(--surface); }
.duo-cell--agent:hover { background-color: var(--surface-hi); }

.duo-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.duo-name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(19px, 2vw, 26px);
  letter-spacing: -0.02em;
  color: var(--text);
}
.duo-tag {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  border: 1px solid var(--border-md);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}
.duo-cell--agent .duo-tag {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
}

.duo-list {
  display: flex;
  flex-direction: column;
}
.duo-list li {
  position: relative;
  padding: 11px 0 11px 22px;
  border-top: 1px solid var(--border);
  font-family: var(--ff-body);
  font-size: clamp(13px, 1.25vw, 15px);
  line-height: 1.5;
  color: var(--text-dim);
}
.duo-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  border: 1px solid var(--border-strong);
}
.duo-cell--agent .duo-list li { color: var(--text-mid); }
.duo-cell--agent .duo-list li::before {
  background: var(--accent);
  border-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════
   AI-AGENTS · Бенто «что агент умеет» (6 сценариев)
═══════════════════════════════════════════════════════════════ */
.can {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "a a b"
    "c d b"
    "e e f";
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
}
.can > li:nth-child(1) { grid-area: a; }
.can > li:nth-child(2) { grid-area: b; }
.can > li:nth-child(3) { grid-area: c; }
.can > li:nth-child(4) { grid-area: d; }
.can > li:nth-child(5) { grid-area: e; }
.can > li:nth-child(6) { grid-area: f; }

@media (max-width: 860px) {
  .can {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "a a"
      "b c"
      "d e"
      "f f";
  }
}
@media (max-width: 540px) {
  .can { grid-template-columns: 1fr; grid-template-areas: none; }
  .can > li:nth-child(1),
  .can > li:nth-child(2),
  .can > li:nth-child(3),
  .can > li:nth-child(4),
  .can > li:nth-child(5),
  .can > li:nth-child(6) { grid-area: auto; }
}

/* ══════════════════════════════════════════════════════════════
   AI-AGENTS · «Словарь-штат» мультиагентности
   Схема БЕЗ node-graph: сетка сама — иерархия. Читается сверху
   вниз как штатное расписание отдела; каждая ячейка — словарная
   статья (термин + человеческий тег + определение).
═══════════════════════════════════════════════════════════════ */
.gloss {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "a a a"
    "b b c"
    "d d d";
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
}
.gloss > li:nth-child(1) { grid-area: a; }
.gloss > li:nth-child(2) { grid-area: b; }
.gloss > li:nth-child(3) { grid-area: c; }
.gloss > li:nth-child(4) { grid-area: d; }
@media (max-width: 680px) {
  .gloss { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d"; }
}

.gloss-cell {
  position: relative;
  background: var(--bg);
  padding: clamp(44px, 5vw, 58px) clamp(20px, 2.6vw, 32px) clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background-color 0.35s var(--ease-out);
}
.gloss-cell:hover { background-color: var(--surface); }

/* Оркестратор — вершина штата: штриховка флагманов */
.gloss-cell--orch {
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, var(--pattern-line) 22px 23px),
    var(--surface);
}
.gloss-cell--orch:hover { background-color: var(--surface-hi); }
/* Общая память — «пол» отдела: своя поверхность */
.gloss-cell--mem { background-color: var(--surface); }
.gloss-cell--mem:hover { background-color: var(--surface-hi); }

/* Метка этапа — водяной знак в углу (язык .svc-num) */
.gloss-step {
  position: absolute;
  top: clamp(15px, 1.8vw, 20px);
  left: clamp(18px, 2.2vw, 26px);
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  opacity: 0.75;
  white-space: nowrap;
}

/* Словарная статья: термин + человеческий тег */
.gloss-entry {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.gloss-term {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
}
.gloss-cell--orch .gloss-term { font-size: clamp(26px, 3.2vw, 42px); }
.gloss-tag {
  font-family: var(--ff-body);
  font-size: clamp(12px, 1.15vw, 14px);
  font-weight: 500;
  font-style: italic;
  color: var(--accent-ink);
  white-space: nowrap;
}
.gloss-def {
  font-family: var(--ff-body);
  font-size: clamp(13px, 1.25vw, 15px);
  line-height: 1.68;
  color: var(--text-dim);
  max-width: 62ch;
}

/* Пилюли ролей внутри «роли-специалисты» (язык .vq-pill главной) */
.gloss-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.gloss-pills li {
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-mid);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  padding: 6px 12px;
  white-space: nowrap;
}

/* Подпись-легенда под словарём: как читать схему */
.gloss-cap {
  margin-top: 18px;
  font-family: var(--ff-body);
  font-size: clamp(12.5px, 1.2vw, 14px);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 66ch;
}

/* ══════════════════════════════════════════════════════════════
   AI-AGENTS · «НЕ ТОЛЬКО ЧАТ» — бенто 6 архетипов без чат-
   интерфейса. Широкие ячейки идут зигзагом (a→d→e) — раскладка
   намеренно отличается от сетки сценариев .can. В ячейках 04/06
   есть ссылки-мостики → services.js стаггерит эту сетку по
   opacity (не autoAlpha), чтобы ссылки не выпадали из tab-порядка.
═══════════════════════════════════════════════════════════════ */
.doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "a a b"
    "c d d"
    "e e f";
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
}
.doors > li:nth-child(1) { grid-area: a; }
.doors > li:nth-child(2) { grid-area: b; }
.doors > li:nth-child(3) { grid-area: c; }
.doors > li:nth-child(4) { grid-area: d; }
.doors > li:nth-child(5) { grid-area: e; }
.doors > li:nth-child(6) { grid-area: f; }

@media (max-width: 860px) {
  .doors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "a a"
      "b c"
      "d d"
      "e f";
  }
}
@media (max-width: 540px) {
  .doors { grid-template-columns: 1fr; grid-template-areas: none; }
  .doors > li:nth-child(1),
  .doors > li:nth-child(2),
  .doors > li:nth-child(3),
  .doors > li:nth-child(4),
  .doors > li:nth-child(5),
  .doors > li:nth-child(6) { grid-area: auto; }
}

/* «Где живёт» — метка-дверь внизу ячейки */
.door-where {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.door-where i {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

/* Ссылка-мостик внутри ячейки (уменьшенный язык .sv-more) */
.door-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--ff-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-mid);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.door-more:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.door-more .px-arr { transition: transform 0.3s var(--ease-out); }
.door-more:hover .px-arr { transform: translateX(3px); }
.door-more:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   AI-AGENTS · «ВНУТРИ АГЕНТА» — срез-пирамида из 5 слоёв.
   БЕЗ node-graph: стопка полос сама является схемой. Чем ниже
   слой, тем он шире (margin-right тает с глубиной) — «держится
   снизу вверх». Семантика поверхностей — язык сайта: штриховка =
   ядро, поверхность = память, пунктир = границы, акцентная рамка =
   проверка (как .ms-node--verif). Дефолт (без JS/reduced-motion) —
   статичный «постер»; послойную сборку включает services.js
   (initStack). На слоях НЕТ .reveal — своя opacity-анимация.
═══════════════════════════════════════════════════════════════ */
.stack-wrap {
  position: relative;
  padding-top: 25px;                 /* место под мини-Clawd'а на вершине */
}
.stack-clawd {
  position: absolute;
  top: 4px;
  left: clamp(20px, 5vw, 56px);
}

.stack {
  --stk-step: clamp(14px, 3.4vw, 48px);   /* шаг сужения на слой */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 680px) {
  .stack { --stk-step: 6px; }
}
.stack-layer {
  display: grid;
  grid-template-columns: clamp(64px, 8vw, 104px) minmax(150px, 0.85fr) 1.6fr;
  gap: clamp(12px, 2.4vw, 36px);
  align-items: baseline;
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: 10px;
  padding: clamp(16px, 2.2vw, 24px) clamp(16px, 2.4vw, 30px);
  transition: background-color 0.35s var(--ease-out);
}
.stack-layer:hover { background-color: var(--surface); }
/* Пирамида: верх у́же, низ шире */
.stack-layer:nth-child(1) { margin-right: calc(var(--stk-step) * 4); }
.stack-layer:nth-child(2) { margin-right: calc(var(--stk-step) * 3); }
.stack-layer:nth-child(3) { margin-right: calc(var(--stk-step) * 2); }
.stack-layer:nth-child(4) { margin-right: var(--stk-step); }

/* Семантика поверхностей (язык сайта) */
.stack-layer--model {
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, var(--pattern-line) 22px 23px),
    var(--surface);
}
.stack-layer--model:hover { background-color: var(--surface-hi); }
.stack-layer--mem { background-color: var(--surface); }
.stack-layer--mem:hover { background-color: var(--surface-hi); }
.stack-layer--rules { border-style: dashed; border-color: var(--border-strong); }
.stack-layer--check { border-color: var(--accent-ink); }

.stack-k {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  opacity: 0.85;
  white-space: nowrap;
}
.stack-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.stack-name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(18px, 1.9vw, 25px);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--text);
}
.stack-tag {
  font-family: var(--ff-body);
  font-size: clamp(11.5px, 1.1vw, 13.5px);
  font-weight: 500;
  font-style: italic;
  color: var(--accent-ink);
  white-space: nowrap;
}
.stack-body { min-width: 0; }
.stack-text {
  font-family: var(--ff-body);
  font-size: clamp(13px, 1.25vw, 15px);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 56ch;
}
.stack-body .gloss-pills { margin-top: 10px; }

@media (max-width: 680px) {
  .stack-layer {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 16px 18px;
  }
  .stack-k { margin-bottom: 2px; }
}

/* Подпись-легенда под срезом (язык .gloss-cap) */
.stack-cap {
  margin-top: 18px;
  font-family: var(--ff-body);
  font-size: clamp(12.5px, 1.2vw, 14px);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 66ch;
}

/* ══════════════════════════════════════════════════════════════
   AI-AGENTS · «АГЕНТ ЗА РАБОТОЙ» — флагманская липкая сцена
   Дефолтная разметка (без JS / reduced-motion) — готовый «постер»:
   оба режима консоли видны целиком, лента действий — в состоянии
   «сделано». Живой режим включает JS классом .aw-live на консоли:
   тогда режимы становятся слоями с кроссфейдом (язык phone__view),
   а состояния этапов раздаёт services.js. Все цвета — токены.
═══════════════════════════════════════════════════════════════ */
.aw-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 72px);
}
@media (min-width: 960px) {
  .aw-split {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
    grid-template-areas: "stage steps";
    gap: clamp(48px, 6vw, 96px);
  }
  .aw-stage { grid-area: stage; }
  .aw-steps { grid-area: steps; }
}

.aw-stage { min-width: 0; }
.aw-pin { margin: 0 auto; width: 100%; max-width: 720px; }
@media (min-width: 960px) {
  .aw-pin {
    position: sticky;
    /* минимум 88px: nav-пилюля кончается на ≈71px — зазор ≥8px
       гарантирован даже на низких экранах (скан design-qa) */
    top: clamp(88px, 11vh, 132px);
  }
  /* Буфер «выхода» из sticky (приём .ph-features с mobile-apps):
     шаги задают высоту строки грида; без запаса консоль отлипла бы
     посреди шага 04 и уехала под nav-пилюлю. 840px ≈ top-offset
     (до 132px) + высота консоли (до ~660px) + запас; плавный
     фейд-выход на этом участке — в services.js (scrub). */
  .aw-steps { padding-bottom: 840px; }
}

/* — Консоль — */
.aw-console {
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--aw-shadow);
}

/* Шапка окна: пиксель-квадратики вместо macOS-светофора */
.aw-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-md);
}
.aw-bar__dots { display: inline-flex; gap: 5px; }
.aw-bar__dots i {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--border-strong);
}
.aw-bar__title {
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aw-bar .demo-tag { margin-left: auto; }

/* — Тело: постер по умолчанию, слои в живом режиме — */
.aw-body { position: relative; }
.aw-mode { padding: clamp(16px, 2.4vw, 24px); }
.aw-mode--team { border-top: 1px solid var(--border-md); }

.aw-live .aw-body { height: 540px; }
@media (min-width: 960px) {
  .aw-live .aw-body { height: clamp(430px, 62vh, 560px); }
}
@media (max-width: 420px) {
  .aw-live .aw-body { height: 600px; }
}
.aw-live .aw-mode {
  position: absolute;
  inset: 0;
  border-top: none;
  opacity: 0;
  transform: translateY(12px) scale(0.99);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
  pointer-events: none;
  overflow: hidden;
}
.aw-live .aw-mode.is-on { opacity: 1; transform: none; }
/* В живом слое командный режим центрируем по вертикали —
   контент короче фиксированной высоты тела */
.aw-live .aw-mode--team { justify-content: center; }

/* — Режим 1: чат + лента действий — */
.aw-mode--solo {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 24px);
}
@media (max-width: 640px) {
  .aw-mode--solo { grid-template-columns: 1fr; }
}

.aw-chat { display: flex; flex-direction: column; min-width: 0; }
.aw-chat__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.aw-ava {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--accent);
  flex-shrink: 0;
}
.aw-ava::after {                    /* визор мини-агента (не Clawd) */
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: 8px;
  height: 5px;
  border-radius: 3px;
  background: var(--on-accent);
}
.aw-chat__name {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.aw-chat__on {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-family: var(--ff-body);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}
.aw-chat__on i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.aw-msg {
  max-width: 88%;
  font-family: var(--ff-body);
  font-size: 12.5px;
  line-height: 1.55;
  padding: 10px 13px;
  margin-bottom: 10px;
}
.aw-msg--user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 14px 14px 4px 14px;
  font-weight: 600;
}
.aw-msg--agent {
  align-self: flex-start;
  background: var(--surface);
  color: var(--text-mid);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
}
/* Каретка печати (ставится JS только в живом режиме) */
.aw-msg__text.is-typing::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 11px;
  margin-left: 2px;
  vertical-align: -1px;
  background: var(--accent);
  animation: aw-caret 0.75s steps(2, start) infinite;
}
@keyframes aw-caret { 50% { opacity: 0; } }

/* «Агент печатает…» — три пиксель-точки (живой режим) */
.aw-typing {
  display: none;
  align-self: flex-start;
  align-items: flex-end;
  gap: 4px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
}
.aw-typing.is-on { display: inline-flex; }
.aw-typing i {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: var(--text-dim);
  animation: aw-bounce 0.9s ease-in-out infinite;
}
.aw-typing i:nth-child(2) { animation-delay: 0.15s; }
.aw-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes aw-bounce {
  0%, 60%, 100% { transform: none; opacity: 0.55; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* Чип результата (общий для обоих режимов) */
.aw-done {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 2px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  border: 1px solid var(--accent-ink);
  border-radius: 100px;
  padding: 6px 12px;
}
.aw-done__sq {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

/* Лента действий */
.aw-log {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--border-md);
  padding-left: clamp(14px, 2vw, 20px);
}
@media (max-width: 640px) {
  .aw-log {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border-md);
    padding-top: 14px;
  }
}
.aw-log__title {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.aw-acts { display: flex; flex-direction: column; }
.aw-act {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-family: var(--ff-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-mid);
  transition: opacity 0.35s, color 0.35s;
}
.aw-act:last-child { border-bottom: 1px solid var(--border); }
.aw-act__dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
  transition: background-color 0.3s, box-shadow 0.3s;
}
/* Живые состояния (ставит JS): .is-off — впереди, .is-work — сейчас */
.aw-act.is-off { opacity: 0.42; color: var(--text-dim); }
.aw-act.is-off .aw-act__dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
.aw-act.is-work { opacity: 1; color: var(--text); }
.aw-act.is-work .aw-act__dot { animation: aw-work 0.5s ease-in-out infinite alternate; }
@keyframes aw-work { to { opacity: 0.25; } }
.aw-log__cap {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-dim);
}

/* — Режим 2: команда — */
.aw-mode--team {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aw-task {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
}
.aw-task__k {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  white-space: nowrap;
}
.aw-task__v {
  font-family: var(--ff-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.aw-node {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: 10px;
  padding: 10px 14px;
}
.aw-node--orch {
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, var(--pattern-line) 22px 23px),
    var(--surface);
}
.aw-node__name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.aw-node__sub {
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-dim);
}
.aw-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 460px) {
  .aw-roles .aw-node { padding: 9px 10px; }
  .aw-roles .aw-node__name { font-size: 11.5px; }
  .aw-roles .aw-node__sub { font-size: 9.5px; }
}

/* Конвейер курьеров: линия между оркестратором и ролями */
.aw-track {
  position: relative;
  height: 26px;
  margin: -4px 6px;
}
.aw-track::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--border-strong);
}
.aw-bot { position: absolute; bottom: 3px; left: 16%; }
.aw-bot--b { left: 62%; opacity: 0.78; }  /* второй чуть «дальше» */

/* Мини-Clawd — переиспользуемый шаблон маленького маскота.
   Геометрия 1:1 из mascot.js/buildWalkSvg (см. разметку ai-agents),
   antialiasing по умолчанию (НЕ crispEdges: при высоте 15–18px
   глаза 2px иначе прыгают по пиксельной сетке). При переносе на
   другие страницы копировать этот блок + токены --clawd/--clawd-eye. */
.mini-clawd { display: block; }
.mini-clawd .mc-fill { fill: var(--clawd); }
.mini-clawd .mc-eye  { fill: var(--clawd-eye); }

/* Общая память — «пол» команды (язык sv-bridge) */
.aw-mem {
  border-left: 2px solid var(--accent);
  background: var(--surface);
  border-radius: 0 10px 10px 0;
  padding: 10px 14px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mid);
}

/* — Точки-этапы (видны только в авторежиме: мобайл/фолбэк) — */
.aw-dots {
  display: none;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
html.agent-auto .aw-dots { display: flex; }
.aw-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;                /* пиксель-квадратик, не кружок */
  border: 1.5px solid var(--border-strong);
  background: transparent;
  padding: 0;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}
.aw-dot:hover { border-color: var(--accent-ink); transform: scale(1.15); }
.aw-dot.is-on {
  background: var(--accent);
  border-color: var(--accent);
}
.aw-dot:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* — Шаги-нарратив — */
.aw-step {
  border-top: 1px solid var(--border-md);
  padding: clamp(26px, 3.5vw, 40px) 0 clamp(36px, 5vw, 56px);
}
@media (min-width: 960px) {
  .aw-step { min-height: 44vh; }
  .aw-step:first-child { border-top: none; padding-top: 6px; }
}
.aw-step__num {
  display: block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  margin-bottom: 12px;
}
.aw-step__name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 12px;
  max-width: 16ch;
}
.aw-step__text {
  font-family: var(--ff-body);
  font-size: clamp(13px, 1.3vw, 15.5px);
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 40ch;
}
/* Скролл-режим: неактивные шаги приглушены (класс ставит JS) */
html.agent-scroll .aw-step {
  opacity: 0.35;
  transition: opacity 0.5s var(--ease-out);
}
html.agent-scroll .aw-step.is-live { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   ШАГИ РАБОТЫ (общий блок обеих страниц)
═══════════════════════════════════════════════════════════════ */
.steps { border-top: 1px solid var(--border-md); }
.steps__row {
  display: grid;
  grid-template-columns: clamp(48px, 7vw, 108px) minmax(160px, 0.8fr) 1.4fr;
  gap: clamp(14px, 2.5vw, 40px);
  align-items: baseline;
  border-bottom: 1px solid var(--border-md);
  padding: clamp(22px, 3.2vw, 38px) clamp(4px, 1vw, 14px);
  transition: background-color 0.3s var(--ease-out);
}
.steps__row:hover { background-color: var(--surface); }
@media (max-width: 680px) {
  .steps__row {
    grid-template-columns: clamp(40px, 10vw, 52px) 1fr;
  }
  .steps__text { grid-column: 2; }
}

.steps__num {
  font-family: var(--ff-body);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
}
.steps__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(17px, 1.8vw, 24px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}
.steps__text {
  font-family: var(--ff-body);
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.68;
  color: var(--text-dim);
  max-width: 58ch;
}

/* ══════════════════════════════════════════════════════════════
   ФИНАЛЬНЫЙ CTA ПОДСТРАНИЦЫ (язык .contact главной)
═══════════════════════════════════════════════════════════════ */
.sv-cta {
  padding-top: clamp(110px, 16vw, 210px);
  padding-bottom: clamp(96px, 13vw, 160px);
}
.sv-cta__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(48px, 8.5vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.sv-cta__sub {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 50ch;
  margin-bottom: clamp(32px, 5vw, 48px);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE-APPS · СЦЕНА С ТЕЛЕФОНОМ
   Телефон целиком нарисован кодом: корпус (двойная кромка),
   остров-камера, три экрана-«приложения» на токенах — обе темы.
   Десктоп: телефон липкий справа, блоки слева листают экраны.
   Мобайл/фолбэк: телефон сверху, экраны сменяет таймер + точки.
═══════════════════════════════════════════════════════════════ */
.ph-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 72px);
}
@media (min-width: 960px) {
  .ph-split {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 400px);
    grid-template-areas: "features stage";
    gap: clamp(56px, 8vw, 120px);
  }
  .ph-features { grid-area: features; }
  .ph-stage    { grid-area: stage; }
}

.ph-stage { min-width: 0; }
.ph-stage__pin { margin: 0 auto; width: max-content; max-width: 100%; }
@media (min-width: 960px) {
  .ph-stage__pin {
    position: sticky;
    top: clamp(84px, 12vh, 140px);
  }
  /* Буфер под «выход» телефона из sticky-режима (design-qa P1,
     2026-07-04). Контейнер .ph-features определяет высоту всей
     строки грида (.ph-stage растягивается вслед за ним) — без
     запаса он заканчивается ровно там, где кончается текст фич,
     и телефон отлипает ПОСЕРЕДИНЕ фичи «03», заезжая под nav.
     900px с запасом покрывает top-offset (до 140px) + высоту
     корпуса телефона (~660px), поэтому отлипание физически
     наступает только после того, как все три фичи уже прочитаны;
     плавное исчезновение самого телефона на этом участке — в
     services.js (ScrollTrigger, scrub). Пустое место снизу текста
     не видно — экран в это время занят телефоном справа. */
  .ph-features { padding-bottom: 900px; }
}

/* — Корпус телефона — */
.phone {
  width: min(300px, 78vw);
  margin: 0 auto;
  padding: 4px;                    /* запас под боковые кнопки */
}
.phone__frame {
  position: relative;
  aspect-ratio: 9 / 19.2;
  border-radius: 50px;
  padding: 11px;
  background: linear-gradient(155deg, var(--phone-frame-hi) 0%, var(--phone-frame) 38%, var(--phone-frame) 72%, var(--phone-frame-hi) 100%);
  box-shadow:
    inset 0 0 0 1.5px var(--phone-edge),
    var(--phone-shadow);
}
/* Боковые кнопки корпуса */
.phone__btn {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: var(--phone-frame-hi);
  box-shadow: 0 0 0 0.5px var(--phone-edge);
}
.phone__btn--vol-up { left: -3px; top: 21%; height: 34px; }
.phone__btn--vol-dn { left: -3px; top: 21%; margin-top: 44px; height: 34px; }
.phone__btn--pwr    { right: -3px; top: 24%; height: 52px; }

/* — Дисплей — */
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 39px;             /* 50 − 11: концентрические радиусы */
  background: var(--phone-screen);
  overflow: hidden;
}
.phone__island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 22px;
  border-radius: 100px;
  background: var(--phone-frame);
  z-index: 4;
}
.phone__island::after {           /* глазок камеры */
  content: '';
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--phone-frame-hi);
}
.phone__homebar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 4px;
  border-radius: 100px;
  background: var(--text);
  opacity: 0.22;
  z-index: 4;
}

/* — Экраны (crossfade) — */
.phone__view {
  position: absolute;
  inset: 0;
  padding: 48px 18px 30px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.55s var(--ease-out);
  pointer-events: none;
}
.phone__view.is-on {
  opacity: 1;
  transform: none;
}

/* — Общая мелочь экранов — */
.app-status {
  position: absolute;
  top: 14px;
  left: 22px;
  right: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.app-sig { display: inline-flex; gap: 2.5px; align-items: flex-end; }
.app-sig i {
  width: 3px;
  border-radius: 1px;
  background: var(--text);
}
.app-sig i:nth-child(1) { height: 4px; opacity: 0.45; }
.app-sig i:nth-child(2) { height: 6px; opacity: 0.7; }
.app-sig i:nth-child(3) { height: 8px; }

.app-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-mid);
  margin: 14px 0 18px;
}
.app-brand__dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
}

.app-hello {
  font-family: var(--ff-body);
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.app-h1 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 16px;
}

.app-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border-md);
  border-radius: 12px;
  padding: 13px 13px;
  margin-bottom: 8px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.app-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.app-btn {
  margin-top: auto;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 12px;
  padding: 13px;
  text-align: center;
  font-family: var(--ff-body);
  font-size: 12.5px;
  font-weight: 700;
}

/* — Экран «чат с агентом» — */
.chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin: 12px 0 16px;
}
.chat-ava {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--accent);
  position: relative;
  flex-shrink: 0;
}
.chat-ava::after {                 /* визор мини-агента (не Clawd) */
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 9px;
  height: 5px;
  border-radius: 3px;
  background: var(--on-accent);
}
.chat-name {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.chat-on {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-family: var(--ff-body);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-dim);
}
.chat-on i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.chat-bub {
  max-width: 82%;
  font-family: var(--ff-body);
  font-size: 11.5px;
  line-height: 1.5;
  padding: 9px 12px;
  margin-bottom: 8px;
}
.chat-bub--user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 14px 14px 4px 14px;
  font-weight: 600;
}
.chat-bub--agent {
  align-self: flex-start;
  background: var(--surface);
  color: var(--text-mid);
  border-radius: 14px 14px 14px 4px;
  border: 1px solid var(--border);
}
.chat-chips {
  display: flex;
  gap: 6px;
  margin: 4px 0 10px;
}
.chat-chips span {
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-ink);
  border: 1px solid var(--accent-ink);
  border-radius: 100px;
  padding: 5px 12px;
  font-variant-numeric: tabular-nums;
}
.chat-input {
  margin-top: auto;
  border: 1px solid var(--border-md);
  border-radius: 100px;
  padding: 10px 14px;
  font-family: var(--ff-body);
  font-size: 11px;
  color: var(--text-dim);
}

/* — Экран «панель владельца» — */
.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 18px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.demo-tag {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border-md);
  border-radius: 100px;
  padding: 3px 8px;
  white-space: nowrap;
}
.dash-label {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.dash-num {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
}
.dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 64px;
  margin-bottom: 6px;
}
.dash-bars i {
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  background: var(--text);
  opacity: 0.14;
}
.dash-bars i.is-hot {
  background: var(--accent);
  opacity: 1;
}
.dash-cap {
  font-family: var(--ff-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.dash-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding: 10px 0;
  font-family: var(--ff-body);
  font-size: 11px;
  color: var(--text-mid);
}
.dash-time {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* — Точки-переключатели экранов (доступны с клавиатуры) — */
.ph-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.ph-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  padding: 0;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}
.ph-dot:hover { border-color: var(--accent-ink); transform: scale(1.15); }
.ph-dot.is-on {
  background: var(--accent);
  border-color: var(--accent);
}
.ph-dot:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* — Блоки-фичи слева — */
.ph-feature {
  border-top: 1px solid var(--border-md);
  padding: clamp(28px, 4vw, 44px) 0 clamp(40px, 6vw, 64px);
}
@media (min-width: 960px) {
  .ph-feature { min-height: 46vh; }
  .ph-feature:first-child { border-top: none; padding-top: 0; }
}
.ph-feature__num {
  display: block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  margin-bottom: 14px;
}
.ph-feature__name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text);
  margin-bottom: 14px;
  max-width: 16ch;
}
.ph-feature__text {
  font-family: var(--ff-body);
  font-size: clamp(13.5px, 1.35vw, 16px);
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 46ch;
}

/* Скролл-режим (класс ставит JS только когда экраны листает скролл):
   неактивные фичи приглушены, активная — в полную силу */
html.phone-scroll .ph-feature {
  opacity: 0.38;
  transition: opacity 0.5s var(--ease-out);
}
html.phone-scroll .ph-feature.is-live { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   MOBILE-APPS · Сетка «что входит» (4 ячейки)
═══════════════════════════════════════════════════════════════ */
.scope {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "a a b"
    "c d d";
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
}
.scope > li:nth-child(1) { grid-area: a; }
.scope > li:nth-child(2) { grid-area: b; }
.scope > li:nth-child(3) { grid-area: c; }
.scope > li:nth-child(4) { grid-area: d; }
@media (max-width: 680px) {
  .scope { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d"; }
}

/* ══════════════════════════════════════════════════════════════
   MULTI-AGENT-SYSTEMS · «СБОРКА СИСТЕМЫ» — флагманская липкая сцена
   Отличие от консоли ai-agents — МАСШТАБ: цех, где система строится
   слоями. Дефолтная разметка (без JS / reduced-motion) — «постер»:
   собранная система целиком. Живой режим (класс .ms-live ставит
   services.js) превращает части (.ms-part) в пунктирные слоты-«чертёж»,
   которые заполняются по мере скролла (.is-built); слой .ms-fly с
   чипами-задачами существует только в живом режиме. Все цвета — токены.
═══════════════════════════════════════════════════════════════ */
.ms-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 72px);
}
@media (min-width: 960px) {
  .ms-split {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
    grid-template-areas: "stage steps";
    gap: clamp(48px, 6vw, 96px);
  }
  .ms-stage { grid-area: stage; }
  .ms-steps { grid-area: steps; }
}

.ms-stage { min-width: 0; }
.ms-pin { margin: 0 auto; width: 100%; max-width: 720px; }
@media (min-width: 960px) {
  .ms-pin {
    position: sticky;
    /* минимум 88px: nav-пилюля кончается на ≈71px — зазор ≥8px
       гарантирован даже на низких экранах (правило сцены aw) */
    top: clamp(88px, 11vh, 132px);
  }
  /* Буфер «выхода» из sticky (приём aw-steps/ph-features): без запаса
     цех отлип бы посреди шага 05 и уехал под nav-пилюлю. 840px ≈
     top-offset (до 132px) + высота цеха (~520px) + запас; плавный
     фейд-выход на этом участке — в services.js (scrub). */
  .ms-steps { padding-bottom: 840px; }
}

/* — Цех — */
.ms-board {
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--aw-shadow);
}
.ms-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 2.4vw, 22px);
}

/* Лотки входа/выхода */
.ms-tray {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  padding: 9px 14px;
}
.ms-tray__k {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  white-space: nowrap;
}
.ms-tray__v {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
}

/* Узлы-агенты */
.ms-node {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: 10px;
  padding: 10px 14px;
  transition: box-shadow 0.3s var(--ease-out);
}
.ms-node--orch {
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, var(--pattern-line) 22px 23px),
    var(--surface);
  padding: 12px 16px;
}
.ms-node__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ms-node__name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ms-node--orch .ms-node__name { font-size: 15px; }
.ms-node__sub {
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-dim);
}
/* Вспышка проверки (класс на мгновение ставит JS) */
.ms-node.is-ping { box-shadow: 0 0 0 3px var(--accent-dim); }

.ms-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px) {
  .ms-roles .ms-node {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 9px 9px;
  }
  .ms-roles .ms-node__name { font-size: 11px; }
  .ms-roles .ms-node__sub { font-size: 9px; }
}

/* Верификация — контролёр с акцентной рамкой */
.ms-node--verif { border-color: var(--accent-ink); flex-wrap: wrap; }
.ms-verif-tag {
  margin-left: auto;
  font-family: var(--ff-body);
  font-size: clamp(10px, 1vw, 11.5px);
  font-weight: 500;
  font-style: italic;
  color: var(--accent-ink);
  white-space: nowrap;
}

/* Пол: общая память (язык .aw-mem) */
.ms-mem {
  border-left: 2px solid var(--accent);
  background: var(--surface);
  border-radius: 0 10px 10px 0;
  padding: 10px 14px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mid);
}

/* Результаты на выходе */
.ms-res {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-ink);
  border: 1px solid var(--accent-ink);
  border-radius: 100px;
  padding: 5px 11px;
  white-space: nowrap;
  transition: background-color 0.35s var(--ease-out);
}
.ms-res.is-new { background: var(--accent-dim); }
@media (max-width: 420px) {
  .ms-res { font-size: 9px; padding: 4px 9px; }
}

/* — Живой режим: незастроенные части = пунктирные слоты «чертежа» — */
.ms-live .ms-part {
  transition:
    background-color 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}
.ms-live .ms-part > * {
  transition: opacity 0.4s var(--ease-out), visibility 0.4s var(--ease-out);
}
.ms-live .ms-part:not(.is-built) {
  background: transparent;
  border: 1px dashed var(--border-md);
  box-shadow: none;
}
.ms-live .ms-part:not(.is-built) > * { opacity: 0; visibility: hidden; }
.ms-live .ms-mem:not(.is-built) { border-radius: 10px; }

/* — Летающие чипы-задачи (только живой режим) — */
.ms-fly {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.ms-live .ms-fly { display: block; }
.ms-chip {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  display: inline-flex;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 700;
  border-radius: 100px;
  padding: 4px 11px;
  white-space: nowrap;
}

/* — Точки-этапы (видны только в авторежиме: мобайл) — */
.ms-dots {
  display: none;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
html.msys-auto .ms-dots { display: flex; }
.ms-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;                /* пиксель-квадратик, не кружок */
  border: 1.5px solid var(--border-strong);
  background: transparent;
  padding: 0;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}
.ms-dot:hover { border-color: var(--accent-ink); transform: scale(1.15); }
.ms-dot.is-on {
  background: var(--accent);
  border-color: var(--accent);
}
.ms-dot:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* — Шаги-нарратив (язык aw-step) — */
.ms-step {
  border-top: 1px solid var(--border-md);
  padding: clamp(26px, 3.5vw, 40px) 0 clamp(36px, 5vw, 56px);
}
@media (min-width: 960px) {
  .ms-step { min-height: 44vh; }
  .ms-step:first-child { border-top: none; padding-top: 6px; }
}
.ms-step__num {
  display: block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  margin-bottom: 12px;
}
.ms-step__name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 12px;
  max-width: 16ch;
}
.ms-step__text {
  font-family: var(--ff-body);
  font-size: clamp(13px, 1.3vw, 15.5px);
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 40ch;
}
/* Скролл-режим: неактивные шаги приглушены (класс ставит JS) */
html.msys-scroll .ms-step {
  opacity: 0.35;
  transition: opacity 0.5s var(--ease-out);
}
html.msys-scroll .ms-step.is-live { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   MULTI-AGENT-SYSTEMS · Бенто «слои глубины» (3 ячейки)
═══════════════════════════════════════════════════════════════ */
.depth {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "a b"
    "c c";
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
}
.depth > li:nth-child(1) { grid-area: a; }
.depth > li:nth-child(2) { grid-area: b; }
.depth > li:nth-child(3) { grid-area: c; }
@media (max-width: 680px) {
  .depth { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c"; }
}

/* ══════════════════════════════════════════════════════════════
   AUTOMATIONS · «ДО И ПОСЛЕ» — центральная липкая сцена
   Дефолтная разметка (без JS / reduced-motion) — «постер»: обе
   панели видны стопкой. Живой режим (класс .ba-live ставит
   services.js): панели — слои с кроссфейдом (язык aw-mode), ручная
   цепочка дёргается и застревает, затем схлопывается в конвейер.
   Шаги-нарратив на десктопе СЛЕВА (язык ph-split). Цвета — токены.
═══════════════════════════════════════════════════════════════ */
.ba-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 72px);
}
@media (min-width: 960px) {
  .ba-split {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.35fr);
    grid-template-areas: "steps stage";
    gap: clamp(48px, 6vw, 96px);
  }
  .ba-steps { grid-area: steps; }
  .ba-stage { grid-area: stage; }
}

.ba-stage { min-width: 0; }
.ba-pin { margin: 0 auto; width: 100%; max-width: 640px; }
@media (min-width: 960px) {
  .ba-pin {
    position: sticky;
    top: clamp(88px, 11vh, 132px);   /* зазор ≥8px от nav-пилюли */
  }
  /* Буфер «выхода» из sticky — тот же приём, что у aw/ph:
     880px ≈ top-offset (до 132px) + окно (~620px) + запас. */
  .ba-steps { padding-bottom: 880px; }
}

/* — Окно процесса — */
.ba-win {
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--aw-shadow);
}

/* Тело: постер по умолчанию (панели стопкой), слои в живом режиме */
.ba-body { position: relative; }
.ba-panel {
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2.4vw, 24px);
}
.ba-panel--after { border-top: 1px solid var(--border-md); }

.ba-live .ba-body { height: 520px; }
@media (min-width: 960px) {
  .ba-live .ba-body { height: clamp(440px, 62vh, 560px); }
}
@media (max-width: 420px) {
  .ba-live .ba-body { height: 560px; }
}
.ba-live .ba-panel {
  position: absolute;
  inset: 0;
  border-top: none;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px) scale(0.99);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
  pointer-events: none;
  overflow: hidden;
}
.ba-live .ba-panel.is-on { opacity: 1; transform: none; }

/* Шапка панели: имя + честный секундомер / счётчик */
.ba-panel__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.ba-panel__name {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.ba-panel__name--auto { color: var(--accent-ink); }
.ba-timer,
.ba-count {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.ba-timer__k,
.ba-count__k {
  font-family: var(--ff-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ba-timer__v,
.ba-count__v {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--ease-out);
}
.ba-count__v {
  display: inline-block;             /* transform-пульс при +1 (GSAP) */
  color: var(--accent-ink);
  font-size: 19px;
}

/* — Ручная цепочка (панель «Руками») — */
.ba-chain { display: flex; flex-direction: column; }
.ba-hstep {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: 10px;
  padding: 9px 13px;
  margin-bottom: 9px;
  font-family: var(--ff-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-mid);
  /* ВАЖНО: opacity здесь НЕ транзитится — приглушение болей и
     схлопывание цепочки анимирует GSAP; CSS-transition на opacity
     дралась бы с твинами за то же свойство (грабли aw-сцены). */
  transition:
    background-color 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out);
}
/* Ручной хаос виден и в «постере»: чипы стоят вразнобой */
.ba-hstep:nth-child(1) { transform: rotate(-0.6deg); }
.ba-hstep:nth-child(2) { margin-left: 13%; transform: rotate(0.8deg); }
.ba-hstep:nth-child(3) { margin-left: 4%;  transform: rotate(-0.9deg); }
.ba-hstep:nth-child(4) { margin-left: 17%; transform: rotate(0.7deg); }
.ba-hstep:nth-child(5) { margin-left: 7%;  transform: rotate(-0.5deg); }
.ba-hstep__sq {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}
.ba-hstep--stuck { border-color: var(--accent-ink); }
.ba-hstep--stuck .ba-hstep__sq { border-color: var(--accent-ink); }
.ba-hstep--lost { border-style: dashed; opacity: 0.8; }
.ba-flag {
  font-family: var(--ff-body);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  border: 1px solid var(--accent-ink);
  border-radius: 100px;
  padding: 2px 7px;
  margin-left: 4px;
  white-space: nowrap;
}
.ba-panel__cap {
  margin-top: 10px;
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text-dim);
}

/* Этап «где ломается»: боли подсвечены (класс .ba-pain ставит JS);
   приглушение остальных чипов делает GSAP (opacity, см. transition) */
.ba-pain .ba-hstep--stuck { background: var(--accent-dim); }
.ba-pain .ba-timer__v { color: var(--accent-ink); }

/* — Конвейер (панель «Само») — */
.ba-flow {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin: 20px 0 4px;
}
.ba-flow::before {                    /* рельса за этапами */
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 2px;
  background: var(--border-strong);
  opacity: 0.6;
}
.ba-node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: 8px;
  padding: 7px 10px;
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-mid);
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s;
}
@media (max-width: 460px) {
  .ba-node { padding: 6px 7px; font-size: 9.5px; gap: 5px; }
}
.ba-node__sq {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  border: 1px solid var(--border-strong);
  background: transparent;
  flex-shrink: 0;
  transition: background-color 0.25s, border-color 0.25s;
}
.ba-node.is-lit { color: var(--text); border-color: var(--border-strong); }
.ba-node.is-lit .ba-node__sq {
  background: var(--accent);
  border-color: var(--accent);
}
/* Бегущая заявка (существует только в живом режиме) */
.ba-run {
  display: none;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  opacity: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--ff-body);
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 100px;
  padding: 3px 9px;
  white-space: nowrap;
}
.ba-live .ba-run { display: inline-flex; }

/* Дежурный мини-Clawd у конвейера */
.ba-oper {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
}
.ba-oper__t {
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim);
}

/* — Точки-этапы (видны только в авторежиме: мобайл) — */
.ba-dots {
  display: none;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
html.flow-auto .ba-dots { display: flex; }
.ba-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;                /* пиксель-квадратик, не кружок */
  border: 1.5px solid var(--border-strong);
  background: transparent;
  padding: 0;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}
.ba-dot:hover { border-color: var(--accent-ink); transform: scale(1.15); }
.ba-dot.is-on {
  background: var(--accent);
  border-color: var(--accent);
}
.ba-dot:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* — Шаги-нарратив (язык aw-step) — */
.ba-step {
  border-top: 1px solid var(--border-md);
  padding: clamp(26px, 3.5vw, 40px) 0 clamp(36px, 5vw, 56px);
}
@media (min-width: 960px) {
  .ba-step { min-height: 44vh; }
  .ba-step:first-child { border-top: none; padding-top: 6px; }
}
.ba-step__num {
  display: block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  margin-bottom: 12px;
}
.ba-step__name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 12px;
  max-width: 16ch;
}
.ba-step__text {
  font-family: var(--ff-body);
  font-size: clamp(13px, 1.3vw, 15.5px);
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 40ch;
}
/* Скролл-режим: неактивные шаги приглушены (класс ставит JS) */
html.flow-scroll .ba-step {
  opacity: 0.35;
  transition: opacity 0.5s var(--ease-out);
}
html.flow-scroll .ba-step.is-live { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   AUTOMATIONS · Бенто «паттерны» (5 ячеек)
═══════════════════════════════════════════════════════════════ */
.pat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "a a b"
    "c d e";
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
}
.pat > li:nth-child(1) { grid-area: a; }
.pat > li:nth-child(2) { grid-area: b; }
.pat > li:nth-child(3) { grid-area: c; }
.pat > li:nth-child(4) { grid-area: d; }
.pat > li:nth-child(5) { grid-area: e; }
@media (max-width: 860px) {
  .pat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "a a"
      "b c"
      "d e";
  }
}
@media (max-width: 540px) {
  .pat { grid-template-columns: 1fr; grid-template-areas: none; }
  .pat > li:nth-child(1),
  .pat > li:nth-child(2),
  .pat > li:nth-child(3),
  .pat > li:nth-child(4),
  .pat > li:nth-child(5) { grid-area: auto; }
}

/* ══════════════════════════════════════════════════════════════
   WEBSITES · Бенто «что я делаю» (3) и «что входит» (4)
═══════════════════════════════════════════════════════════════ */
.kinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "a a"
    "b c";
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
}
.kinds > li:nth-child(1) { grid-area: a; }
.kinds > li:nth-child(2) { grid-area: b; }
.kinds > li:nth-child(3) { grid-area: c; }
@media (max-width: 680px) {
  .kinds { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c"; }
}

/* Три опоры не-шаблонности — намеренно ДРУГАЯ раскладка, чем kinds */
.why {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "a b c";
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
}
.why > li:nth-child(1) { grid-area: a; }
.why > li:nth-child(2) { grid-area: b; }
.why > li:nth-child(3) { grid-area: c; }
@media (max-width: 860px) {
  .why { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c"; }
}

.inc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "a a b"
    "c d b";
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
}
.inc > li:nth-child(1) { grid-area: a; }
.inc > li:nth-child(2) { grid-area: b; }
.inc > li:nth-child(3) { grid-area: c; }
.inc > li:nth-child(4) { grid-area: d; }
@media (max-width: 860px) {
  .inc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "a a"
      "b c"
      "d d";
  }
}
@media (max-width: 540px) {
  .inc { grid-template-columns: 1fr; grid-template-areas: none; }
  .inc > li:nth-child(1),
  .inc > li:nth-child(2),
  .inc > li:nth-child(3),
  .inc > li:nth-child(4) { grid-area: auto; }
}

/* ══════════════════════════════════════════════════════════════
   WEBSITES · «САЙТ СОБИРАЕТ СЕБЯ» — флагманская липкая сцена
   Окно браузера нарисовано кодом (шапка aw-bar + адресная строка);
   внутри мини-сайт со СВОЕЙ палитрой --wp-* (пара токенов
   --wsite-* / --wsite-dark-*, см. :root). Дефолтная разметка (без
   JS / reduced-motion) — «постер»: собранный светлый мини-сайт +
   телефон-миниатюра, перекрывающая правый нижний угол окна.
   Живой режим (класс .wb-live ставит services.js): части .wb-part
   становятся пунктирными слотами-«чертежом» и застраиваются по
   этапам; телефон существует только с этапа 4. Цвета — токены.
═══════════════════════════════════════════════════════════════ */
.wb-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 72px);
}
@media (min-width: 960px) {
  .wb-split {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
    grid-template-areas: "stage steps";
    gap: clamp(48px, 6vw, 96px);
  }
  .wb-stage { grid-area: stage; }
  .wb-steps { grid-area: steps; }
}

.wb-stage { min-width: 0; }
.wb-pin { margin: 0 auto; width: 100%; max-width: 700px; }
@media (min-width: 960px) {
  .wb-pin {
    position: sticky;
    /* минимум 88px: nav-пилюля кончается на ≈71px — зазор ≥8px
       гарантирован даже на низких экранах (правило сцен aw/ms/ba) */
    top: clamp(88px, 11vh, 132px);
  }
  /* Буфер «выхода» из sticky (приём aw-steps/ph-features): без
     запаса окно отлипло бы посреди шага 04 и уехало под nav-пилюлю.
     860px ≈ top-offset (до 132px) + окно с телефоном (~600px) +
     запас; плавный фейд-выход на участке — services.js (scrub). */
  .wb-steps { padding-bottom: 860px; }
}

/* — Сцена: окно браузера + телефон-миниатюра — */
.wb-scene {
  /* Палитра мини-сайта (СВОЯ, см. :root): подменяется классом
     .is-dark целиком — этап 3 «своя тёмная тема» */
  --wp-bg:   var(--wsite-bg);
  --wp-ink:  var(--wsite-ink);
  --wp-dim:  var(--wsite-dim);
  --wp-line: var(--wsite-line);
  --wp-card: var(--wsite-card);
  position: relative;
  padding-bottom: 34px;               /* свес телефона под окном */
}
.wb-scene.is-dark {
  --wp-bg:   var(--wsite-dark-bg);
  --wp-ink:  var(--wsite-dark-ink);
  --wp-dim:  var(--wsite-dark-dim);
  --wp-line: var(--wsite-dark-line);
  --wp-card: var(--wsite-dark-card);
}
/* Постер reduced-motion: сцена статична и .is-dark никогда не
   ставится (initSiteScene не запускается), но шаг-нарратив рядом
   утверждает «мини-сайт только что сам переключил тему» — чтобы
   текст не расходился с картинкой, постер сразу стоит в СВОЕЙ
   тёмной теме (грабли P2 QA, 2026-07-04). Живой скролл-режим этого
   правила не видит: там тему меняет .is-dark из services.js. */
@media (prefers-reduced-motion: reduce) {
  .wb-scene {
    --wp-bg:   var(--wsite-dark-bg);
    --wp-ink:  var(--wsite-dark-ink);
    --wp-dim:  var(--wsite-dark-dim);
    --wp-line: var(--wsite-dark-line);
    --wp-card: var(--wsite-dark-card);
  }
  .wb-mtoggle__knob { transform: translateX(14px); }
}
/* Смена темы мини-сайта — плавная, но ТОЛЬКО цвета: transform и
   opacity принадлежат GSAP (грабли гонок за свойства, P1 телефона) */
.wb-scene *,
.wb-scene *::before,
.wb-scene *::after {
  transition-property: background-color, color, border-color, fill;
  transition-duration: 0.45s;
  transition-timing-function: ease;
}

.wb-browser {
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--aw-shadow);
}

/* Адресная строка в шапке-aw-bar */
.wb-bar .demo-tag { margin-left: 0; }
.wb-url {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 12px;
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
}
.wb-url__lock {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

/* — Мини-сайт — */
.wb-page {
  background: var(--wp-bg);
  padding: clamp(16px, 2.6vw, 26px) clamp(16px, 2.6vw, 28px) clamp(20px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vw, 18px);
}

.wb-sq {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.wb-mnav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
}
.wb-mnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--wp-ink);
  white-space: nowrap;
}
.wb-mnav__links {
  display: inline-flex;
  gap: 10px;
  margin-left: auto;
}
.wb-mnav__links i {
  width: 26px;
  height: 5px;
  border-radius: 3px;
  background: var(--wp-dim);
  opacity: 0.55;
}
@media (max-width: 460px) {
  .wb-mnav__links i:nth-child(3) { display: none; }
}
/* Мини-переключатель темы — герой этапа 3 */
.wb-mtoggle {
  position: relative;
  width: 30px;
  height: 16px;
  border-radius: 100px;
  border: 1px solid var(--wp-dim);
  flex-shrink: 0;
}
.wb-mtoggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wp-ink);
  transition: transform 0.35s var(--ease-out), background-color 0.45s ease;
}
.wb-scene.is-dark .wb-mtoggle__knob { transform: translateX(14px); }

.wb-mhero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(8px, 1.4vw, 14px) 10px;
}
.wb-mhero__kicker {
  font-family: var(--ff-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.wb-mhero__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(21px, 3.4vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--wp-ink);
}
.wb-mhero__lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}
.wb-mhero__lines i {
  height: 6px;
  border-radius: 3px;
  background: var(--wp-dim);
  opacity: 0.4;
}
.wb-mhero__lines i:nth-child(1) { width: 62%; }
.wb-mhero__lines i:nth-child(2) { width: 44%; }

.wb-mcta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 10px;
}
.wb-mbtn {
  display: inline-flex;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 800;
  border-radius: 100px;
  padding: 9px 18px;
  white-space: nowrap;
}
.wb-mghost {
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--wp-dim);
  border-bottom: 1px solid var(--wp-line);
  padding-bottom: 2px;
  white-space: nowrap;
}

.wb-mcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.wb-mcard {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--wp-line);
  border-radius: 10px;
  padding: 10px;
  min-width: 0;
}
.wb-mcard__pic {
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background:
    repeating-linear-gradient(-45deg, transparent 0 8px, var(--wp-line) 8px 9px),
    var(--wp-card);
}
.wb-mcard__t {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 800;
  color: var(--wp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-mcard__l { display: flex; flex-direction: column; gap: 4px; }
.wb-mcard__l i {
  height: 4px;
  border-radius: 2px;
  background: var(--wp-dim);
  opacity: 0.4;
}
.wb-mcard__l i:nth-child(1) { width: 86%; }
.wb-mcard__l i:nth-child(2) { width: 58%; }

/* — Живой режим: незастроенные части = пунктирные слоты «чертежа».
   Паттерн 1:1 из сцены ms: часть сохраняет размеры (дети лишь
   невидимы), GSAP анимирует саму часть, CSS — детей. — */
.wb-live .wb-part {
  border-radius: 10px;
  transition:
    background-color 0.45s ease,
    border-color 0.45s var(--ease-out);
}
.wb-live .wb-part > * {
  transition:
    opacity 0.4s var(--ease-out),
    visibility 0.4s var(--ease-out),
    background-color 0.45s ease,
    color 0.45s ease,
    border-color 0.45s ease;
}
.wb-live .wb-mnav,
.wb-live .wb-mhero,
.wb-live .wb-mcta { border: 1px solid transparent; }
.wb-live .wb-part:not(.is-built) {
  background: transparent;
  border: 1px dashed var(--wp-dim);
}
.wb-live .wb-part:not(.is-built) > * { opacity: 0; visibility: hidden; }

/* — Телефон-миниатюра (этап 4 «адаптив») — та же палитра --wp-* — */
.wb-mob {
  position: absolute;
  right: clamp(8px, 3%, 20px);
  bottom: 0;
  z-index: 2;
  width: clamp(96px, 24%, 126px);
  aspect-ratio: 9 / 16.2;
  border-radius: 18px;
  padding: 5px;
  background: linear-gradient(155deg, var(--phone-frame-hi) 0%, var(--phone-frame) 40%, var(--phone-frame) 100%);
  box-shadow:
    inset 0 0 0 1px var(--phone-edge),
    var(--phone-shadow);
}
.wb-scene.wb-live .wb-mob { opacity: 0; }   /* первый снимок ставит JS */
.wb-mob__screen {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  background: var(--wp-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 8px;
}
.wb-mob__bit { display: block; flex-shrink: 0; }
.wb-mob__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.wb-mob__nav .wb-sq { width: 7px; height: 7px; }
.wb-mob__burger {
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--wp-ink);
  box-shadow: 0 4px 0 var(--wp-ink);
  margin-bottom: 4px;
}
.wb-mob__ttl { display: flex; flex-direction: column; gap: 4px; }
.wb-mob__ttl i {
  display: block;
  height: 9px;
  border-radius: 3px;
  background: var(--wp-ink);
}
.wb-mob__ttl i:nth-child(1) { width: 88%; }
.wb-mob__ttl i:nth-child(2) { width: 60%; }
.wb-mob__btn {
  width: 74%;
  height: 15px;
  border-radius: 100px;
  background: var(--accent);
  margin-top: 2px;
}
.wb-mob__card {
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--wp-line);
  background: var(--wp-card);
}

/* — Точки-этапы (видны только в авторежиме: мобайл) — */
.wb-dots {
  display: none;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
html.wsite-auto .wb-dots { display: flex; }
.wb-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;                /* пиксель-квадратик, не кружок */
  border: 1.5px solid var(--border-strong);
  background: transparent;
  padding: 0;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}
.wb-dot:hover { border-color: var(--accent-ink); transform: scale(1.15); }
.wb-dot.is-on {
  background: var(--accent);
  border-color: var(--accent);
}
.wb-dot:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* — Шаги-нарратив (язык aw-step) — */
.wb-step {
  border-top: 1px solid var(--border-md);
  padding: clamp(26px, 3.5vw, 40px) 0 clamp(36px, 5vw, 56px);
}
@media (min-width: 960px) {
  .wb-step { min-height: 44vh; }
  .wb-step:first-child { border-top: none; padding-top: 6px; }
}
.wb-step__num {
  display: block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  margin-bottom: 12px;
}
.wb-step__name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 12px;
  max-width: 16ch;
}
.wb-step__text {
  font-family: var(--ff-body);
  font-size: clamp(13px, 1.3vw, 15.5px);
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 40ch;
}
/* Скролл-режим: неактивные шаги приглушены (класс ставит JS) */
html.wsite-scroll .wb-step {
  opacity: 0.35;
  transition: opacity 0.5s var(--ease-out);
}
html.wsite-scroll .wb-step.is-live { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   VOICE-AGENTS · Бенто «что умеет» (5) и «когда спасает» (3)
═══════════════════════════════════════════════════════════════ */
.vgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "a b c"
    "a d e";
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
}
.vgrid > li:nth-child(1) { grid-area: a; }
.vgrid > li:nth-child(2) { grid-area: b; }
.vgrid > li:nth-child(3) { grid-area: c; }
.vgrid > li:nth-child(4) { grid-area: d; }
.vgrid > li:nth-child(5) { grid-area: e; }
@media (max-width: 860px) {
  .vgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "a a"
      "b c"
      "d e";
  }
}
@media (max-width: 540px) {
  .vgrid { grid-template-columns: 1fr; grid-template-areas: none; }
  .vgrid > li:nth-child(1),
  .vgrid > li:nth-child(2),
  .vgrid > li:nth-child(3),
  .vgrid > li:nth-child(4),
  .vgrid > li:nth-child(5) { grid-area: auto; }
}

.vwhen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "a a"
    "b c";
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
}
.vwhen > li:nth-child(1) { grid-area: a; }
.vwhen > li:nth-child(2) { grid-area: b; }
.vwhen > li:nth-child(3) { grid-area: c; }
@media (max-width: 680px) {
  .vwhen { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c"; }
}

/* ══════════════════════════════════════════════════════════════
   VOICE-AGENTS · «ЖИВОЙ ЗВОНОК» — флагманская липкая сцена
   Панель звонка нарисована кодом на токенах: волна-эквалайзер
   (столбики на transform: scaleY — GPU-safe), транскрипт (язык
   aw-msg), лента действий (язык aw-log/aw-act), карточка результата.
   Дефолтная разметка (без JS / reduced-motion) — «постер»: весь
   разговор + застывшая волна (высоты на inline --h) + результат.
   Живой режим (класс .vc-live ставит services.js): реплики
   печатаются, волна «говорит» стороной активного спикера,
   секундомер честно считает время демо. Цвета — токены.
═══════════════════════════════════════════════════════════════ */
.vc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 72px);
}
@media (min-width: 960px) {
  .vc-split {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.35fr);
    grid-template-areas: "steps stage";
    gap: clamp(48px, 6vw, 96px);
  }
  .vc-steps { grid-area: steps; }
  .vc-stage { grid-area: stage; }
}

.vc-stage { min-width: 0; }
.vc-pin { margin: 0 auto; width: 100%; max-width: 640px; }
@media (min-width: 960px) {
  .vc-pin {
    position: sticky;
    top: clamp(88px, 11vh, 132px);   /* зазор ≥8px от nav-пилюли */
  }
  /* Буфер «выхода» из sticky — тот же приём, что у aw/ms/ba:
     860px ≈ top-offset (до 132px) + панель (~600px) + запас. */
  .vc-steps { padding-bottom: 860px; }
}

/* — Панель звонка — */
.vc-call {
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--aw-shadow);
}
.vc-timer {
  margin-left: auto;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 12.5px;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vc-bar .demo-tag { margin-left: 0; }
/* Узкий телефон: заголовку не хватает места рядом с таймером + бейджем
   (сжимается в эллипсис) — переносим таймер под строку заголовка,
   с отступом вровень с текстом (28px точки + 12px gap = 40px). */
@media (max-width: 460px) {
  .vc-bar { flex-wrap: wrap; row-gap: 6px; }
  .vc-timer {
    order: 1;
    flex: 0 0 calc(100% - 40px);
    margin-left: 40px;
    text-align: left;
  }
}

.vc-body {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 18px);
  padding: clamp(16px, 2.4vw, 24px);
}
.vc-live .vc-body { height: 560px; }
@media (min-width: 960px) {
  .vc-live .vc-body { height: clamp(450px, 60vh, 560px); }
}
@media (max-width: 420px) {
  .vc-live .vc-body { height: 620px; }
}

/* — Волна-эквалайзер — */
.vc-wave {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 16px);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 10px clamp(10px, 1.8vw, 16px);
  flex-shrink: 0;
}
.vc-side {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
}
.vc-side__name {
  font-family: var(--ff-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color 0.3s;
  flex-shrink: 0;
}
.vc-side.is-talk .vc-side__name { color: var(--accent-ink); }
.vc-bars {
  --wave-h: 34px;
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  height: var(--wave-h);
  min-width: 0;
}
.vc-bars i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--text);
  opacity: 0.3;
  height: calc(var(--wave-h) * var(--h, 0.4));   /* «постер»-волна */
  transition: opacity 0.35s;
}
.vc-side--agent .vc-bars i { background: var(--accent); opacity: 0.4; }
.vc-side.is-talk .vc-bars i { opacity: 1; }
/* Живой режим: столбики на полную высоту, форму задаёт scaleY (GSAP) */
.vc-live .vc-bars i {
  height: var(--wave-h);
  transform: scaleY(0.1);
  transform-origin: 50% 50%;
}
.vc-wave__mid {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--border-strong);
  flex-shrink: 0;
}
@media (max-width: 460px) {
  .vc-side__name { display: none; }   /* узкий экран: только волна */
}

/* — Транскрипт + действия — */
.vc-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(14px, 2.2vw, 22px);
  min-height: 0;
  flex: 1;
}
@media (max-width: 640px) {
  .vc-cols { grid-template-columns: 1fr; }
}
.vc-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* В живом режиме высота тела фиксирована — низ транскрипта чистый */
.vc-live .vc-chat { overflow: hidden; }

/* Каретка печати (ставится JS только в живом режиме) */
.vc-msg__text.is-typing::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 11px;
  margin-left: 2px;
  vertical-align: -1px;
  background: var(--accent);
  animation: aw-caret 0.75s steps(2, start) infinite;
}

/* Карточка результата */
.vc-res {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  border: 1.5px solid var(--accent-ink);
  border-radius: 12px;
  padding: 12px 16px;
  align-self: flex-start;
  max-width: 100%;
}
.vc-res__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vc-res__meta b {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-ink);
}
.vc-res__sub {
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Дежурный мини-Clawd в ленте действий: топает, пока агент говорит */
.vc-oper {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 12px;
}
.vc-oper__t {
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim);
}

/* — Точки-этапы (видны только в авторежиме: мобайл) — */
.vc-dots {
  display: none;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
html.vcall-auto .vc-dots { display: flex; }
.vc-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;                /* пиксель-квадратик, не кружок */
  border: 1.5px solid var(--border-strong);
  background: transparent;
  padding: 0;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}
.vc-dot:hover { border-color: var(--accent-ink); transform: scale(1.15); }
.vc-dot.is-on {
  background: var(--accent);
  border-color: var(--accent);
}
.vc-dot:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* — Шаги-нарратив (язык aw-step) — */
.vc-step {
  border-top: 1px solid var(--border-md);
  padding: clamp(26px, 3.5vw, 40px) 0 clamp(36px, 5vw, 56px);
}
@media (min-width: 960px) {
  .vc-step { min-height: 44vh; }
  .vc-step:first-child { border-top: none; padding-top: 6px; }
}
.vc-step__num {
  display: block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  margin-bottom: 12px;
}
.vc-step__name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 12px;
  max-width: 16ch;
}
.vc-step__text {
  font-family: var(--ff-body);
  font-size: clamp(13px, 1.3vw, 15.5px);
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 40ch;
}
/* Скролл-режим: неактивные шаги приглушены (класс ставит JS) */
html.vcall-scroll .vc-step {
  opacity: 0.35;
  transition: opacity 0.5s var(--ease-out);
}
html.vcall-scroll .vc-step.is-live { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION — специфика подстраниц
   (общие правила уже в ../styles.css)
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .js .sv-hero .line__inner,
  .js .sv-cta .line__inner {
    visibility: visible !important;
    transform: none !important;
  }
  .phone__view {
    transition: none !important;
    transform: none !important;
  }
  html.phone-scroll .ph-feature { opacity: 1 !important; }

  /* Сцена «Агент за работой»: живой режим не включается вовсе
     (services.js), консоль остаётся статичным «постером» — оба
     режима видны целиком. Здесь страхуем геометрию: без sticky
     и буфера, шаги — обычный текст. */
  .aw-pin { position: static !important; }
  .aw-steps { padding-bottom: 0 !important; }
  .aw-step { min-height: 0 !important; }
  .aw-typing,
  .aw-typing i,
  .aw-act__dot,
  .aw-msg__text.is-typing::after { animation: none !important; }
  html.agent-scroll .aw-step { opacity: 1 !important; }

  /* Сцены «Сборка системы» и «До и после»: живой режим не включается
     вовсе (services.js) — разметка остаётся статичным «постером».
     Здесь страхуем геометрию: без sticky и буферов, шаги — текст. */
  .ms-pin, .ba-pin { position: static !important; }
  .ms-steps, .ba-steps { padding-bottom: 0 !important; }
  .ms-step, .ba-step { min-height: 0 !important; }
  html.msys-scroll .ms-step,
  html.flow-scroll .ba-step { opacity: 1 !important; }

  /* Сцены «Сайт собирает себя» и «Живой звонок»: живой режим не
     включается вовсе (services.js) — «постер»: собранный мини-сайт
     с телефоном / весь разговор с застывшей волной. Геометрия — как
     у остальных пин-зон; смена темы мини-сайта без перехода. */
  .wb-pin, .vc-pin { position: static !important; }
  .wb-steps, .vc-steps { padding-bottom: 0 !important; }
  .wb-step, .vc-step { min-height: 0 !important; }
  html.wsite-scroll .wb-step,
  html.vcall-scroll .vc-step { opacity: 1 !important; }
  .wb-scene *,
  .wb-scene *::before,
  .wb-scene *::after,
  .wb-mtoggle__knob { transition: none !important; }
  .vc-msg__text.is-typing::after { animation: none !important; }
}