/* ===========================================================================
   sites/agency-promo/assets/css/site.css — ЧАСТНЫЙ СЛОЙ САЙТА apexcrew.ru.
   Подключается ТРЕТЬИМ: ds/core.css -> ds/apex.css -> site.css.

   Здесь только то, чего нет в ядре и скине: раскладка конкретных секций
   этого лендинга (hero со стопкой скриншотов, лента ниш, таймлайн ролей,
   портфолио, тарифы, FAQ, форма). Компоненты, состояния, цвета, отступы,
   радиусы, тени и длительности берутся ТОЛЬКО токенами из ядра и скина.

   Правило приёмки: ни одного hex и ни одного магического px вне токенов.
   Разрешены 0, 100%, 1px-бордюр (через --border-w) и именованные токены ниже.
   =========================================================================== */

/* ===========================================================================
   0. ПЕРЕОПРЕДЕЛЕНИЯ ТОКЕНОВ ДЛЯ ЭТОГО САЙТА
   =========================================================================== */
:root {
  /* 0.1 Display-гарнитура задаётся скином (design-system/skins/apex.css: Manrope + 'Manrope Fallback').
         Переопределение снято 10.09.2026 по QA v3 (V-2): локальный override ломал size-adjust-фолбэк. */

  /* --- 0.2 Именованные размеры этого сайта. Разовые, но не магические. --- */
  --icon-sm:     var(--space-4);   /* 16px — иконка внутри строки/кнопки */
  --icon-md:     var(--space-5);   /* 24px — иконка секции, канон 24x24 */
  --icon-stroke: 1.5;              /* толщина штриха набора иконок */
  --icon-box:    var(--control-h); /* 48px — плашка под иконкой карточки */
  --logomark:    var(--space-6);   /* 32px — знак в шапке */
  --logomark-sm: var(--space-5);   /* 24px — знак в подвале */
  --z-content:   calc(var(--z-base) + 1);  /* контент над зерном фона */
}

/* ===========================================================================
   1. РАСКЛАДКА СТРАНИЦЫ
   =========================================================================== */

/* .wrap — контейнер этого сайта (эквивалент .container ядра + слой над зерном) */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: var(--z-content);
}
.wrap--narrow { max-width: var(--container-narrow); }

/* Ритм секций — токен ядра: 64px моб -> 112px деск */
section { padding-block: var(--section-y); position: relative; }

h2 { margin-block: var(--space-4); }

/* Утилиты отступов — по шкале, а не «на глаз» */
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-9 { margin-top: var(--space-9); }
.mb-6 { margin-bottom: var(--space-6); }

.text-muted  { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }

/* ===========================================================================
   2. ИКОНКИ И ЛОГОТИП
   =========================================================================== */
.ic {
  width: var(--icon-md);
  height: var(--icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.btn .ic { width: var(--icon-sm); height: var(--icon-sm); }

/* Плашка иконки карточки: ровная поверхность, без цветного градиента —
   акцент на этом сайте закреплён за действием (кнопка), а не за декором. */
.ico {
  width: var(--icon-box);
  height: var(--icon-box);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--color-link);
  background: var(--color-surface-2);
  border: var(--border-w) solid var(--color-line);
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-tight);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
}
.logo .logomark { width: var(--logomark); height: var(--logomark); flex: none; }
.logo--sm { font-size: var(--fs-body); }
.logo--sm .logomark { width: var(--logomark-sm); height: var(--logomark-sm); }

/* Знак бренда: те же две точки градиента, что у --gradient-action,
   но заданные токенами, а не hex прямо в разметке SVG. */
#bg-grad .g-from { stop-color: var(--color-action); }
#bg-grad .g-to   { stop-color: var(--color-link); }

/* ===========================================================================
   3. ШАПКА
      Каркас (sticky, blur, границы, состояние [data-scrolled]) — из ядра.
      Здесь только раскладка навигации и мобильное меню этого сайта.
      Скрипт сайта переключает класс .scrolled — дублируем правило ядра на него.
   =========================================================================== */
.site-header.scrolled {
  padding-block: var(--space-2);
  border-color: var(--color-line-strong);
}
/* Шапка на узком экране (база — 375px): лого + первичная CTA + бургер.
   Зазор здесь --space-3: с --space-5 арифметика шапки не сходилась в 375px
   (замер 09.09.2026 после фикса B-1: 48 паддингов + 97.7 лого + 141.7 CTA
   + 44 бургер + два зазора). Начиная с 560px зазор возвращается к --space-5. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-h);
}
.menu { display: none; gap: var(--space-6); }
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
/* N-8: первичная CTA внутри бургер-меню. Селектор .menu .menu__cta нужен,
   чтобы перебить .menu a (цвет и кегль пункта меню) — у .btn специфичность ниже. */
.menu .menu__cta { color: var(--color-on-action); font-size: var(--fs-small); justify-content: center; }
.menu .menu__cta:hover { color: var(--color-on-action); }
.menu a:hover  { color: var(--color-text); }
.menu a:active { color: var(--color-link); }
.menu a:focus-visible { outline: var(--focus-w) solid var(--color-focus); outline-offset: var(--focus-offset); }

/* Раскрытое мобильное меню */
.menu.show {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg-alt);
  padding: var(--space-5) var(--gutter);
  border-bottom: var(--border-w) solid var(--color-line);
  gap: var(--space-4);
  z-index: var(--z-sticky);
}

/* 🔴 B-1 (QA 09.09.2026): ghost-кнопка Telegram в шапке скрыта ниже 860px.
   Правило существовало до пилота (`@media(max-width:860px){.nav .cta .btn.ghost{display:none}}`)
   и потерялось при переписывании медиазапросов на mobile-first — из-за этого
   шапка на 375px давала scrollWidth 460, CTA обрезалась, бургер уезжал за экран.
   Возвращено в mobile-first виде: скрыто в базе, показано с 1024px
   (порог поднят с 860 находкой N-2 — на 860 ряд шапки не помещался). */
/* Ниже 360px (iPhone SE 1-го поколения и старый Android) в шапке остаются только
   лого и бургер: лого 95.6 + кнопка 153.6 + бургер 44 + зазоры не влезают в 320px
   и давали переполнение 21px (замер 10.09.2026). Первичная CTA при этом не теряется —
   она стоит первым экраном сразу под шапкой. */
.nav .cta { display: none; gap: var(--space-3); align-items: center; }
.nav .cta .btn--ghost { display: none; }
/* На 375px кнопке шапки достаётся ровно 163.4px (замер 10.09.2026): со штатным
   горизонтальным padding --space-5 подпись «Обсудить проект» ложилась в ДВЕ строки.
   Компактный горизонт + nowrap держат её в одну. С 560px padding возвращается. */
.nav .cta .btn { padding-inline: var(--space-4); white-space: nowrap; }

.burger {
  flex: none;                 /* m-6: без этого flex-shrink сжимал бургер до 38px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  background: transparent;
  border: var(--border-w) solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.burger:hover  { border-color: var(--color-action); background: var(--color-action-quiet); }
.burger:active { transform: translateY(var(--press-active)); }
.burger:focus-visible { outline: var(--focus-w) solid var(--color-focus); outline-offset: var(--focus-offset); }
.burger[disabled] { color: var(--color-disabled-text); border-color: var(--color-line); cursor: not-allowed; }

/* ===========================================================================
   4. ПЕРВЫЙ ЭКРАН
      Фон плоский: aurora-пятна и их бесконечная анимация сняты (роль 5, §1).
   =========================================================================== */
.hero { padding-block: var(--section-y); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; }
.hero h1 { font-size: var(--fs-display); line-height: var(--lh-display); max-width: 14ch; margin-top: var(--space-4); }
.hero .sub { color: var(--color-text-muted); font-size: var(--fs-lead); max-width: var(--measure-sm); margin-block: var(--space-5) var(--space-6); }
.hero .cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Блок цифр под первым экраном.
   Ядро раскладывает .trust грид-колонками по 220px — в узкой левой колонке
   первого экрана три метрики от этого ломаются на 2+1. Здесь ряд по ширине
   содержимого, как и было. */
.trust { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-7); }
.trust__value { font-size: var(--fs-num); }
.trust__value small { font-size: var(--fs-small); color: var(--color-text-muted); font-weight: 500; font-family: var(--font-text); }
.trust__item > span { color: var(--color-text-subtle); font-size: var(--fs-caption); }

/* Стопка скриншотов кейсов. Высота через aspect-ratio — ни одной
   магической высоты и ни одного брейкпоинта под неё. */
.stage { position: relative; aspect-ratio: 4 / 3; order: -1; }
.shot {
  position: absolute;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-w) solid var(--color-line-strong);
  background: var(--color-surface-1);
  box-shadow: var(--shadow-md);
}
.shot .bar {
  height: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-inline: var(--space-3);
  background: var(--color-bg-alt);
  border-bottom: var(--border-w) solid var(--color-line);
}
.shot .bar i { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-line-strong); display: block; }
.shot img { width: 100%; height: auto; display: block; }
/* Наклон стопки статичен: бесконечное «покачивание» выведено из обращения. */
.shot.s1 { width: 78%; left: 0;   top: var(--space-5); z-index: 3; transform: rotate(-3deg); }
.shot.s2 { width: 62%; right: 0;  top: 38%;            z-index: 4; transform: rotate(4deg); }
.shot.s3 { width: 50%; left: 14%; bottom: 0;           z-index: 5; transform: rotate(-6deg); display: none; }

/* ===========================================================================
   5. ЛЕНТА НИШ
      Была бесконечная бегущая строка (animation ... infinite) — запрещена
      бюджетом движения. Теперь статичный ряд: все ниши видны сразу, в том
      числе на 375px и в скриншоте/печати.
   =========================================================================== */
.strip {
  border-block: var(--border-w) solid var(--color-line);
  background: var(--color-bg-alt);
  padding-block: var(--space-5);
}
.track {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  padding: var(--space-2) var(--space-4);
  border: var(--border-w) solid var(--color-line);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  background: var(--color-surface-1);
}
.chip .dot { width: var(--space-1); height: var(--space-1); border-radius: var(--radius-full); background: var(--color-link); flex: none; }

/* ===========================================================================
   6. СЕТКИ И КАРТОЧКИ
      Карточные сетки без брейкпоинтов: auto-fit minmax (роль 5, §4).
   =========================================================================== */
.grid { display: grid; gap: var(--grid-gap); }
/* min(…, 100%) обязателен: без него порог трека шире вьюпорта распирает сетку.
   Замер 09.09.2026 на 320px: карточка .pf уходила вправо до 324px при innerWidth 320
   (порог .g2 — 300px против 272px доступных). */
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* .card — из ядра. Ховера у некликабельной карточки НЕТ: он обещает
   интерактивность, которой нет (роль 5, п.4 разбора скиллов). */
.card h3 { font-size: var(--fs-h3); margin-block: var(--space-4) var(--space-2); }
.card p  { color: var(--color-text-muted); font-size: var(--fs-small); }

/* ===========================================================================
   7. ТАЙМЛАЙН РОЛЕЙ
   =========================================================================== */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-6); }
.step {
  background: var(--color-surface-1);
  border: var(--border-w) solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.step .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-caption); font-weight: 700; color: var(--color-link); letter-spacing: var(--tracking-flat); }
.step h3 { font-size: var(--fs-body); margin-block: var(--space-3) var(--space-2); font-family: var(--font-display); }
.step p  { color: var(--color-text-muted); font-size: var(--fs-caption); }
/* Финальный шаг выделен поверхностью и границей, а не градиентной заливкой:
   градиент на этом сайте закреплён только за действием. */
.step.fin { background: var(--color-surface-2); border-color: var(--color-line-strong); }
.step.fin .n { color: var(--color-text); }

/* ===========================================================================
   8. ПОРТФОЛИО — кликабельные карточки, все пять состояний
   =========================================================================== */
/* 🔴 Селектор с атрибутом намеренно: правило плотности ядра
   `:where(a[href]):not(.link):not(.btn)` имеет специфичность (0,2,0) и иначе
   перебивает `.pf` (0,1,0), превращая карточку кейса в inline-flex строку. */
a[href].pf {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--border-w) solid var(--color-line);
  background: var(--color-surface-1);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.pf:hover  { border-color: var(--color-line-strong); transform: translateY(var(--lift-hover)); box-shadow: var(--shadow-sm); }
.pf:active { transform: translateY(var(--press-active)); box-shadow: var(--shadow-sm); }
.pf:focus-visible { outline: var(--focus-w) solid var(--color-focus); outline-offset: var(--focus-offset); }
.pf[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.pf .thumb { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: var(--border-w) solid var(--color-line); position: relative; }
.pf .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pf .b { padding: var(--space-5); }
.pf .tag { font-size: var(--fs-caption); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 600; }
.pf h3 { font-size: var(--fs-h3); margin-block: var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.pf h3 .ic { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text-subtle); }
.pf:hover h3 .ic { color: var(--color-link); }
.pf p { color: var(--color-text-muted); font-size: var(--fs-small); }

/* ===========================================================================
   9. ТАРИФЫ — на светлой поверхности «считаемого»
      Правило R1 (research.md F2/F3): цена, срок и состав работ читаются
      на бумаге, а не на тёмном. Обёртка .surface-calc из ядра сама
      переводит вложенные .btn / .card / .badge в светлые значения.
      🔴 Класс карточки называется .plan, а НЕ .price: .price в ядре занят
      строкой «число + единица» и сломал бы карточку раскладкой flex.
   =========================================================================== */
.plan {
  background: var(--color-surface-1);
  border: var(--border-w) solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}
/* 🔴 N-6 (QA 10.09.2026): цены четырёх тарифов стояли на разной высоте (на 1280
   top 5801.6 / 5801.6 / 5763.2 / 5801.6) — имя тарифа занимает одну или две строки.
   Резервируем ровно две строки ИМЕНИ, а не подгоняем пиксели: 2em по кеглю самого
   имени × межстрочный интервал абзаца. Значение выведено из токенов, не подобрано. */
.plan__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; min-height: calc(2em * var(--lh-body)); }
/* Цена: приставка «от» текстом, число моноширинным, единица обязательна
   (core: .price / .price__value / .price__unit). */
.plan .price { margin-block: var(--space-3) var(--space-1); }
.price__prefix { font-size: var(--fs-small); color: var(--color-text-muted); }
.plan__term { font-size: var(--fs-small); color: var(--color-text-muted); }
.plan ul { list-style: none; margin-block: var(--space-5); display: grid; gap: var(--space-3); flex: 1; }
.plan li { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-small); }
.plan li .ic { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-action); margin-top: var(--space-1); }

/* Выбранный тариф: рамка цветом действия + метка. Ни градиента, ни цветной тени. */
.plan.best { border-color: var(--color-action); box-shadow: 0 0 0 var(--border-w) var(--color-action); position: relative; }
.plan.best::after {
  content: 'Чаще выбирают';
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: var(--space-5);
  background: var(--color-action);
  color: var(--color-on-action);
  font-size: var(--fs-caption);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

/* ===========================================================================
   10. FAQ
       Раскрытие через grid-template-rows 0fr -> 1fr: работает при любой
       длине ответа и не требует магической max-height.
   =========================================================================== */
.faq {
  background: var(--color-surface-1);
  border: var(--border-w) solid var(--color-line);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.faq:hover { border-color: var(--color-line-strong); }
.faq button {
  width: 100%;
  min-height: var(--control-h);
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--color-text);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-body);
  font-weight: 600;
  font-family: var(--font-display);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.faq button:hover  { background: var(--color-action-quiet); }
.faq button:active { background: var(--color-action-quiet); transform: translateY(var(--press-active)); }
.faq button:focus-visible { outline: var(--focus-w) solid var(--color-focus); outline-offset: calc(-1 * var(--focus-offset)); }
.faq button[disabled] { color: var(--color-disabled-text); cursor: not-allowed; }
.faq button .ic { color: var(--color-link); transition: transform var(--dur-base) var(--ease-out); }
.faq.open button .ic { transform: rotate(45deg); }

.faq .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.faq.open .a { grid-template-rows: 1fr; }
/* 🔴 Нижний padding появляется только у раскрытого ответа. У свёрнутого он
   входил бы в минимальный вклад грид-элемента, и трек 0fr вставал в 24px —
   под каждым закрытым вопросом оставалась полоса пустоты (замер в Chrome). */
.faq .a > p { overflow: hidden; min-height: 0; color: var(--color-text-muted); font-size: var(--fs-small); padding-inline: var(--space-5); }
.faq.open .a > p { padding-bottom: var(--space-5); }

/* ===========================================================================
   11. ФИНАЛЬНЫЙ БЛОК И ФОРМА
       Плоская поверхность: градиентная заливка и радиальное пятно сняты.
   =========================================================================== */
.final {
  background: var(--color-surface-1);
  border: var(--border-w) solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}
form { display: grid; gap: var(--space-4); max-width: var(--measure-sm); }

/* Успех и ошибка: цвет + глиф + текст (статус не передаётся одним цветом).
   Отображением управляет скрипт формы через inline display. */
.ok {
  display: none;
  background: var(--color-success-bg);
  border: var(--border-w) solid var(--color-success);
  color: var(--color-success);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--fs-small);
  max-width: var(--measure-sm);
}
.form-error {
  display: none;
  margin-top: var(--space-3);
  color: var(--color-error);
  font-size: var(--fs-small);
}
.ok::before { content: "✓ "; font-family: var(--font-mono); font-weight: 700; }
.form-error::before { content: "✕ "; font-family: var(--font-mono); font-weight: 700; }

/* Honeypot: убран с экрана, но остаётся в DOM для отсечки спам-ботов. */
.honeypot { position: absolute; left: -100vw; opacity: 0; }

/* ===========================================================================
   12. ПОДВАЛ
   =========================================================================== */
/* Ритм подвала (padding-block) НЕ переопределяем — он приходит из ядра
   (--space-8 / --space-5). Своё `var(--space-7)` снято 10.09.2026 по DS-3:
   два сайта Апекса заявлены единым почерком, а подвал у них расходился 48/48
   против 64/24. */
.site-footer { color: var(--color-text-muted); font-size: var(--fs-small); }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* ===========================================================================
   13. ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
       Контент по умолчанию ВИДЕН. Прятать вправе только уже работающий
       скрипт: он ставит data-js="on" на <html>. Иначе при отключённом JS
       или в headless-рендере секции уезжают в прод пустыми.
       Скрипт сайта помечает появившийся элемент классом .in.
   =========================================================================== */
.reveal { opacity: 1; transform: none; }
html[data-js="on"] .reveal {
  opacity: 0;
  transform: translateY(var(--space-2));
  transition: opacity var(--dur-slow) var(--ease-emphasized), transform var(--dur-slow) var(--ease-emphasized);
}
html[data-js="on"] .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, html[data-js="on"] .reveal { opacity: 1; transform: none; }
}

/* ===========================================================================
   14. БРЕЙКПОЙНТЫ — снизу вверх, база 375px
   =========================================================================== */
@media (min-width: 360px) {
  .nav .cta { display: flex; }
}

@media (min-width: 560px) {
  .nav { gap: var(--space-5); }
  .nav .cta .btn { padding-inline: var(--space-5); }
  .shot.s3 { display: block; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


@media (min-width: 920px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--space-7); }
  .stage { order: 0; }
}

@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 🔴 N-2 (QA 10.09.2026): порог десктопной шапки был 860px и оказался занижен.
     Замер интринсика ряда (лого + 5 пунктов меню + Telegram + «Обсудить проект»,
     зазор --space-5): 927.92px + два --gutter по 32 = 992px минимум. На 860 ряд
     не помещался: scrollWidth 861 при clientWidth 860 (зазор справа −1.2), подпись
     «Как работаем» ломалась на две строки вплоть до 930px. Порог поднят до
     существующего брейкпоинта 1024 — запас 32px к замеренным 992. Ниже 1024
     работают бургер-меню и CTA внутри него (N-8). */
  .menu { display: flex; }
  .menu .menu__cta { display: none; }   /* .menu a (0,1,1) перебивал одиночный класс */
  .burger { display: none; }
  .nav .cta .btn--ghost { display: inline-flex; }   /* парное правило к скрытию выше */
}