/* ORYX — вариант B «Витрина».
   Мир: световой короб локальной точки и латунная кромка.
   Основание — дневной тёплый белый. Тёмно-синий приходит крупными полями
   (рельс шапки, три полноширинных панели, ценники и короб героя), а не подложкой
   всей страницы. Латунь — только светящаяся кромка и буквы на коробе.
   Стратегия цвета Committed: синего много, но он владеет регионами.

   Тон соседних секций всегда разный. Светлых оттенка два — `paper` и `band`, —
   и они чередуются, чтобы граница между двумя светлыми блоками читалась без
   линейки. Это прямое требование заказчика, а не украшение. */

:root {
  color-scheme: light;

  /* Основание */
  --paper:      #F7F5F1;  /* дневной свет, при котором короб видно */
  --paper-2:    #EFEBE3;  /* второй уровень светлого — врезки внутри карточек */
  --band:       #ECE5D6;  /* полоса-секция: заметно теплее и глубже основания */
  --plate:      #FFFFFF;  /* эмалированная табличка */

  /* Фирменный тёмно-синий — панели коробов */
  --navy:       #0B1930;
  --navy-2:     #14263F;  /* врезка внутри короба */
  --navy-3:     #1D3453;  /* ховер на тёмном */

  /* Латунь — кромка и буквы, не больше ~5% площади */
  --brass:      #C2A56B;
  --brass-lit:  #E4CE9C;  /* включённая кромка */
  /* Латунь на светлом даёт 2,2:1 — читать нечего. Там, где латунь несёт смысл
     на бумаге (номера шагов, маркеры, знак аккордеона), работает потемневшая
     латунь: 5,3:1. Светлая латунь на бумаге остаётся только линейками. */
  --brass-ink:  #7E6229;
  --brass-wash: #F0E7D6;  /* акцентная секция */
  --brass-line: rgba(194,165,107,.42);
  --brass-line-on: rgba(228,206,156,.34);

  /* Оксблад — главная кнопка на светлом */
  --ox:         #5E1D28;
  --ox-strong:  #4B1520;

  /* Текст */
  --ink:        #14181F;  /* 16.6:1 на paper */
  --ink-2:      #4A5462;  /* 7.4:1 на paper */
  --on:         #F4F1EA;  /* 16.3:1 на navy */
  --on-2:       #B9C6D8;  /* 8.9:1 на navy */

  --line:       rgba(20,24,31,.14);
  --line-on:    rgba(244,241,234,.16);

  /* Rubik — выбор заказчика в панели 2026-09-11. Unbounded остался одному знаку ORYX
     в шапке: первый вордмарк был набран им, и заказчик вернул именно его. */
  --font-d: "Rubik", "Segoe UI", system-ui, sans-serif;
  --font-t: "Rubik", "Segoe UI", system-ui, sans-serif;
  --font-mark: "Unbounded", "Trebuchet MS", system-ui, sans-serif;

  --r-pill: 999px;
  --r-plate: 10px;
  --r-box: 20px;

  /* Две ручки, которые переопределяет панель твиков (`tweaks.js`). Они живут здесь,
     а не в панели: ручка обязана быть токеном, иначе «плотнее» и «слабее свечение»
     пришлось бы править в каждом компоненте, и однажды они разъедутся с миром.
     Значения здесь — те, что видит посетитель; панель их только переопределяет. */
  --density: .78;    /* множитель вертикального воздуха секций; «плотнее» — выбор заказчика в панели 2026-09-11 */

  /* Метки площадок на первом экране. Не фирменная палитра, а цвет, по которому
     площадку узнают с первого взгляда; живёт только внутри таблички площадки. */
  --pf-yandex:      #E8401C;
  --pf-yandex-wash: #FDEDE8;
  --pf-gis:         #22963A;
  --pf-gis-wash:    #E7F4E9;
  /* Знак подтверждённой организации у названия в карточке — синий, как на площадке. */
  --verify:         #2F7CF6;
  --glow-gain: 1;    /* множитель силы света от курсора: 1 — как есть, 0 — выключено */

  --measure: 68ch;

  /* Шкала кегля — ревью 2026-09-15: на странице было около 38 разных размеров. Текст
     берёт ступень шкалы, а не своё значение. Крупные цифры, заголовки секций и первый
     экран — свои размеры: их мало, и они держат композицию. Карточка организации в
     коробе первого экрана — рисунок интерфейса площадки, у неё свой масштаб. */
  --fs-xs:   .8125rem;                          /* подписи и ярлыки */
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-body: 1.0625rem;                         /* основной текст страницы: 17 px, на ПК 18 */
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   clamp(1.25rem, 1.9vw, 1.75rem);    /* заголовки карточек */
  --fs-2xl:  clamp(1.5rem, 2.3vw, 2.125rem);    /* цены и «стало» в парах */
  --shadow-plate: 0 1px 2px rgba(20,24,31,.05), 0 14px 34px -18px rgba(11,25,48,.34);
  --shadow-tag:   0 2px 4px rgba(20,24,31,.06), 0 18px 40px -20px rgba(11,25,48,.5);
  --shadow-box:   0 8px 20px -12px rgba(11,25,48,.4), 0 40px 80px -40px rgba(11,25,48,.55);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,.84,.3,1);
}

/* ---------- поверхности, которые мы не рисовали, но всё равно наши ---------- */

* { box-sizing: border-box; }

html {
  scrollbar-color: var(--brass) var(--paper-2);
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
html::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track { background: var(--paper-2); }
html::-webkit-scrollbar-thumb { background: var(--brass); border: 3px solid var(--paper-2); border-radius: var(--r-pill); }
html::-webkit-scrollbar-thumb:hover { background: #A98C52; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

::selection { background: var(--navy); color: var(--brass-lit); }
[data-tone="dark"] ::selection { background: var(--brass); color: var(--navy); }

/* Кегль растёт вместе с окном: заказчик смотрит с монитора и просил крупнее.
   Телефона это не касается — там базовые 17 px остаются. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/1.62 var(--font-t);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--ox);
  overflow-x: hidden;
}
[data-tone="dark"] { caret-color: var(--brass-lit); }
/* Корень, а не body: тогда вместе с текстом растут и все размеры в rem —
   заголовки карточек, цифры, подписи. На телефоне корень не трогаем. */
@media (min-width: 1100px) { html { font-size: 106%; } }
@media (min-width: 1400px) { html { font-size: 112%; } }

:focus-visible {
  outline: 2px solid var(--ox);
  outline-offset: 3px;
  border-radius: 3px;
}
[data-tone="dark"] :focus-visible, [data-tone="accent"] :focus-visible { outline-color: var(--brass-lit); }

/* Выезжает трансформой, а не `top`: анимация геометрии заставляет браузер
   пересчитывать раскладку на каждом кадре. */
.skip {
  position: absolute; left: 12px; top: 12px; z-index: 100;
  background: var(--navy); color: var(--brass-lit);
  padding: 12px 18px; border-radius: var(--r-plate); text-decoration: none; font-weight: 600;
  transform: translateY(calc(-100% - 24px));
  transition: transform 180ms var(--ease);
}
.skip:focus { transform: translateY(0); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

h1, h2, h3 { font-family: var(--font-d); font-weight: 800; margin: 0; text-wrap: balance; }

/* Верхняя граница подобрана по самой длинной строке заголовка на 1440 и шире:
   Unbounded очень широкий, и «крупнее» упирается не в вкус, а в ширину колонки. */
h1 {
  font-size: clamp(2.35rem, 5.4vw, 4.7rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.038em;
}
.h-sec {
  font-size: clamp(1.9rem, 3.8vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -.034em;
}
.h-big {
  font-size: clamp(2.15rem, 5vw, 4.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  font-family: var(--font-d);
  margin: 0;
}
.h-sec--on, .h-min--on { color: var(--on); }
/* Заголовок секции на тёмном тоне светлеет сам: тон переключается атрибутом — и из
   панели твиков тоже, — а класс --on пришлось бы переставлять руками вслед за ним. */
[data-tone="dark"] .h-sec { color: var(--on); }
[data-tone="dark"] .sub { color: var(--on-2); }
.h-min {
  font-family: var(--font-t);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.h-min--on { color: var(--brass); }

p { margin: 0 0 16px; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--fs-md); line-height: 1.55; color: var(--ink); }
.lead--on { color: var(--on); }
.sub { color: var(--ink-2); max-width: 60ch; margin: 20px 0 0; }
.note { font-size: var(--fs-base); color: var(--ink-2); }
.hair { border: 0; border-top: 1px solid var(--brass-line); margin: 28px 0; max-width: 460px; }

.ic { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.14em; }
.ic--lg { width: 22px; height: 22px; }

a { color: var(--ox); text-underline-offset: 4px; text-decoration-thickness: 1px; }
[data-tone="dark"] a { color: var(--brass-lit); }
.link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link:hover { border-bottom-color: transparent; }
.link--go { min-height: 44px; }

/* видимые пометки — там, где факта у нас нет.
   Это не подпись мелким шрифтом, а дырка в данных: чип держит те же 12 px
   внутреннего поля, что и любой другой контейнер с заливкой и рамкой. */
.ph, [data-placeholder] {
  font-family: var(--font-t);
  font-size: .92em;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ox);
  background: rgba(94,29,40,.07);
  border: 1px dashed rgba(94,29,40,.45);
  border-radius: var(--r-plate);
  padding: 12px 14px;
  display: inline-block;
}
/* Внутри бегущей строки чип встаёт на собственную строку, а не разрывает абзац. */
.check__text .ph, .note--stub .ph { margin-top: 8px; }
[data-tone="dark"] .ph, [data-tone="dark"] [data-placeholder] {
  color: var(--brass-lit);
  background: rgba(228,206,156,.1);
  border-color: rgba(228,206,156,.5);
}

/* ---------- кнопки ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 14px 26px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: 600 var(--fs-base)/1.2 var(--font-t); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 180ms var(--ease), color 180ms var(--ease),
              transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.btn--sm { min-height: 44px; padding: 12px 18px; font-size: var(--fs-base); }
.btn--wide { width: 100%; }
/* Контурная кнопка: вторая на первом экране. Прежде там стояла ссылка с подчёркиванием,
   и заказчик сказал, что кнопок не видно. */
a.btn--line, .btn--line { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.btn--line:hover { background: var(--navy); color: var(--brass-lit); transform: translateY(-2px); }
.btn--line:active { transform: translateY(0); }

/* Селектор с `a`, потому что на тёмных секциях ссылки перекрашиваются в латунь,
   и без этого латунная кнопка получала латунный текст — 1,5:1. */
a.btn--ox, .btn--ox { background: var(--ox); color: #FFF; box-shadow: 0 2px 4px rgba(11,25,48,.16), 0 16px 30px -18px rgba(11,25,48,.55); }
.btn--ox:hover { background: var(--ox-strong); transform: translateY(-2px); }
.btn--ox:active { transform: translateY(0); }

a.btn--brass, .btn--brass { background: var(--brass); color: var(--navy); }
.btn--brass:hover { background: var(--brass-lit); transform: translateY(-2px); }
.btn--brass:active { transform: translateY(0); }

.btn:disabled { background: #B7B2A8; color: #4A4741; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- сетка секций ---------- */

.wrap { width: 100%; max-width: 1380px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 88px); }

main > section, footer[data-section] { padding: calc(clamp(64px, 9.5vw, 168px) * var(--density, 1)) 0; }
[data-tone="dark"] { background: var(--navy); color: var(--on); }
[data-tone="accent"] { background: var(--brass-wash); }
/* Полоса-секция. Тонкая латунная линейка сверху делает границу двух светлых
   блоков не догадкой, а фактом. */
[data-tone="band"] { background: var(--band); box-shadow: inset 0 1px 0 var(--brass-line); }
[data-tone="band"] .delta { background: var(--plate); }

/* ---------- 1 · шапка-рельс ---------- */

.rail {
  position: sticky; top: 0; z-index: 50;
  padding: 0 !important;
  background: var(--navy);
  border-bottom: 1px solid var(--brass-line-on);
}
/* Шапка шире колонки контента: заказчик 2026-09-11 просил сделать её «чуть-чуть
   пошире» — больше воздуха между знаком, пунктами и кнопками. Поля выросли, а рельс
   раздвинут до 1680: в прежних 1380 выросшим полям на широком мониторе было бы тесно. */
.rail__in {
  max-width: 1680px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 72px);
  min-height: clamp(76px, 6.4vw, 100px); display: flex; align-items: center; gap: clamp(28px, 3vw, 56px);
}
/* Знак — слово ORYX, набранное Unbounded 800 латунью с разрядкой: самый первый
   вордмарк сайта. Заказчик 2026-09-11 перебрал свой файл с засечками и два округлых
   варианта и вернул именно этот. Файлы вордмарка остались в `assets/`, но в сборке
   не участвуют. */
.mark {
  font: 800 clamp(20px, 1.7vw, 26px)/1 var(--font-mark);
  letter-spacing: .16em;
  color: var(--brass);
  text-decoration: none;
  padding: 12px 0 12px 2px;
  display: inline-flex; align-items: center; flex: none;
  transition: color 180ms var(--ease);
}
.mark:hover { color: var(--brass-lit); }
.rail__nav { display: flex; gap: clamp(26px, 2.6vw, 48px); margin-left: auto; }
.rail__nav a {
  color: var(--on-2); text-decoration: none; font-size: var(--fs-base); font-weight: 600;
  white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.rail__nav a:hover { color: var(--on); border-bottom-color: var(--brass); }
.rail__side { display: flex; align-items: center; gap: clamp(14px, 1.3vw, 24px); margin-left: auto; }
/* Телефон — настоящая ссылка: номер прислал заказчик 2026-09-15. Правило висит на тоне,
   иначе латунный цвет ссылок тёмной секции перебил бы его. */
[data-tone] .tel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--on); text-decoration: none; white-space: nowrap;
  font: 600 var(--fs-sm)/1.2 var(--font-t); font-variant-numeric: tabular-nums;
  transition: color 180ms var(--ease);
}
[data-tone] .tel .ic { width: 18px; height: 18px; color: var(--brass-lit); }
[data-tone] .tel:hover { color: var(--brass-lit); }
.rail__menu-side .tel { padding: 12px 16px; border-radius: var(--r-plate); background: rgba(244,241,234,.05); }
.foot-tel { margin: 0 0 10px; }
/* Telegram и MAX в шапке — круглые значки-ссылки (правки заказчика 2026-09-15 и
   2026-09-16). Без пунктира: пунктир на этой странице значит «факта нет». */
.msg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--brass-lit); background: rgba(244,241,234,.05);
  box-shadow: inset 0 0 0 1px var(--brass-line-on);
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.msg:hover { background: rgba(194,165,107,.16); color: var(--on); }
.msg .ic { width: 20px; height: 20px; }
/* Только для программ чтения с экрана. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Точки под каруселями нужны только на телефоне, где ряды листаются вбок. */
.dots { display: none; }
.rail .btn--sm { min-height: 48px; padding: 13px 22px; font-size: var(--fs-base); }

/* Латунная нить прогресса — единственное движение шапки. Только трансформа. */
.rail__thread { height: 3px; background: rgba(244,241,234,.07); overflow: hidden; }
.rail__thread i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(var(--progress, 0)); transform-origin: left center;
  background: linear-gradient(90deg, var(--brass), var(--brass-lit));
}

/* ---------- кнопка разделов и панель под рельсом ----------
   Раньше на 1340 навигация просто выключалась, и вместе с ней с рельса пропадали
   телефон и Telegram: открыть их было нечем — ни на телефоне, ни на обычном
   ноутбуке. Теперь то, что не помещается в строку, уезжает в панель под рельсом,
   а кнопка стоит ровно на тех ширинах, где эта панель — единственный путь. */

.rail__burger {
  display: none;                     /* пока разделы помещаются в строку — не нужна */
  position: relative;
  align-items: center; gap: 9px;
  min-height: 48px; min-width: 48px; padding: 12px 16px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--on);
  box-shadow: inset 0 0 0 1px var(--line-on);
  font: 600 var(--fs-base)/1.2 var(--font-t); cursor: pointer; white-space: nowrap;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.rail__burger:hover { color: var(--brass-lit); box-shadow: inset 0 0 0 1px var(--brass-line-on); }
.rail__burger-ic { width: 20px; height: 20px; }
.rail__burger-ic--close, .rail__burger[aria-expanded="true"] .rail__burger-ic--menu { display: none; }
.rail__burger[aria-expanded="true"] .rail__burger-ic--close { display: block; }
.rail__burger[aria-expanded="true"] { background: var(--navy-3); color: var(--brass-lit); }

.rail__menu { background: var(--navy-2); box-shadow: inset 0 1px 0 var(--brass-line-on); }
.rail__menu[hidden] { display: none; }
.rail__menu-in {
  max-width: 1680px; margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 72px) 20px;
  display: grid; gap: 14px;
}
.rail__menu-nav { display: grid; gap: 6px; }
.rail__menu-nav a {
  display: flex; align-items: center; min-height: 48px;
  padding: 12px 16px; border-radius: var(--r-plate);
  color: var(--on); text-decoration: none;
  font-size: var(--fs-base); font-weight: 600;
  background: rgba(244,241,234,.05);
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.rail__menu-nav a:hover { background: rgba(194,165,107,.16); color: var(--brass-lit); }
/* Телефон и Telegram здесь не дубликат ради дубликата: ниже 760 и 560 их на рельсе
   уже нет, и панель — единственное место, где они остаются доступны. */
.rail__menu-side {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--line-on);
}

/* Разделы уходят с рельса, когда перестают в него помещаться. Порог 1340 подобран
   после укрупнения шрифта и полей: на 1280 четыре пункта переносились на вторую
   строку. Telegram и телефон уходят следом — но уже в панель, а не в никуда. */
@media (max-width: 1340px) {
  .rail__nav { display: none; }
  .rail__side { margin-left: auto; }
  .rail__burger { display: inline-flex; }
}
@media (max-width: 760px) { .rail__msg { display: none; } }
@media (max-width: 620px) {
  /* Рельс на телефоне держит три вещи: знак, заявку и разделы. Поля и подпись
     кнопки ужимаются ровно настолько, чтобы третья вещь встала в ту же строку. */
  .rail__in { gap: 12px; }
  .rail__side { gap: 8px; }
  .rail .btn--sm { padding: 13px 16px; }
  .rail__burger { padding: 12px; gap: 0; }
  .rail__burger-t {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 560px) { .rail__phone { display: none; } }

/* ---------- 2 · первый экран ---------- */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(clamp(52px, 9vw, 150px) * var(--density, 1)) !important;
}
/* Поле за композицией — свет короба: тёплое пятно света вокруг короба и лёгкая тень
   в нижнем углу. Заказчик сказал, что на первом экране «очень много фона и мало
   объектов»; из полей, предложенных в панели твиков, он выбрал это. Карта города,
   сетка и полоса остались в панели. Слой декоративный — псевдоэлемент, без узлов. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(44% 72% at 76% 50%, rgba(194,165,107,.36), rgba(194,165,107,.12) 55%, rgba(194,165,107,0) 76%),
    radial-gradient(34% 44% at 8% 96%, rgba(11,25,48,.07), rgba(11,25,48,0) 70%);
}
/* Рамка композиции — тонкая тёмно-синяя линия примерно в сантиметре от текста и от
   короба: заказчик просил «обвести, подчеркнуть то, что имеется на главном экране».
   Сетка героя — это ещё и `.wrap` с полями по бокам, поэтому по горизонтали рамка
   отступает внутрь на ширину поля и выходит наружу на свой сантиметр. */
.hero__grid {
  position: relative;
  --frame-gap: clamp(12px, 2.8vw, 40px);
  --wrap-pad: clamp(20px, 5vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 51fr) minmax(0, 49fr);
  gap: clamp(40px, 4.5vw, 72px);
  align-items: center;
}
.hero__grid::before {
  content: ''; position: absolute; pointer-events: none;
  inset: calc(-1 * var(--frame-gap)) calc(var(--wrap-pad) - var(--frame-gap));
  border: 1px solid rgba(11,25,48,.5);
  border-radius: 6px;
}
.hero__say { container-type: inline-size; }
/* Кегль заголовка ограничен шириной колонки: «Карточка работает на вас» — выбор
   заказчика 2026-09-11 — встаёт в две строки только так. Коэффициент подобран по
   самой длинной строке, «работает на вас» с неразрывными пробелами. */
.hero h1 { font-size: min(clamp(2.35rem, 5.4vw, 4.7rem), 12.6cqi); }
.hero .lead { max-width: 46ch; }
/* Площадки — таблички с меткой, а не мелкие чипы: заказчик сказал, что значков
   Яндекс Карт и 2ГИС не видно. Метка окрашена в цвет площадки — по нему их узнают
   быстрее, чем по подписи. Логотипы самих площадок не рисуем: это чужие знаки. */
.hero__ships { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
/* Таблички тёмные — выбор заказчика в панели 2026-09-11: на тёмно-синем метка
   площадки светится своим цветом и видна издалека. */
.ship {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--navy); border-radius: 16px;
  padding: 12px 22px 12px 12px;
  box-shadow: inset 0 0 0 1px var(--brass-line-on), var(--shadow-box);
  font: 800 var(--fs-md)/1.1 var(--font-d); letter-spacing: -.02em; color: var(--on);
}
.ship__pin {
  width: 48px; height: 48px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: rgba(244,241,234,.08); color: var(--brass-lit);
  box-shadow: 0 0 22px -6px currentColor;
}
.ship__pin .ic { width: 28px; height: 28px; }
.ship[data-platform="yandex"] .ship__pin { color: var(--pf-yandex); }
.ship[data-platform="gis"] .ship__pin { color: var(--pf-gis); }
/* Обе кнопки крупные: заказчик сказал, что кнопок на первом экране не видно. */
.hero__do { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(28px, 3vw, 44px); }
.hero__do .btn { min-height: 64px; padding: 20px 36px; font-size: var(--fs-md); }
/* Длинная надпись главной кнопки («Получить бесплатную консультацию» — варианты
   2026-09-15) переносится внутри кнопки, а не распирает строку за колонку. */
.hero__do .btn { max-width: 100%; white-space: normal; text-align: center; text-wrap: balance; }
/* Заявка — с латунным ореолом: кольцо расходится от кнопки и гаснет, только
   трансформой и прозрачностью. «Услуги и цены» — латунный контур. Выбор заказчика
   в панели твиков 2026-09-11 («заявка с ореолом»). */
.hero__do .btn--ox { position: relative; box-shadow: 0 0 0 5px rgba(194,165,107,.22), 0 18px 40px -16px rgba(94,29,40,.8); }
.hero__do .btn--ox::after {
  content: ''; position: absolute; inset: -6px; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--brass-lit); opacity: 0;
  animation: heroBtnRing 2.6s var(--ease) infinite;
}
@keyframes heroBtnRing {
  0%        { transform: scale(.96); opacity: .8; }
  70%, 100% { transform: scale(1.12); opacity: 0; }
}
/* «Услуги и цены» — текстовая ссылка со стрелкой, а не вторая кнопка: по весу она почти
   равнялась главной — правка заказчика 2026-09-15. */
.hero__do .btn--line {
  min-height: 44px; padding: 10px 2px; gap: 8px; font-size: var(--fs-base);
  background: none; box-shadow: none;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.hero__do .btn--line:hover { background: none; box-shadow: none; color: var(--ox); transform: none; }

.hero__box { position: relative; }

/* ---------- короб: рама первого решения правой части ---------- */

/* Снизу поле короба выше, чем по бокам: с нижней кромки свисает полоса виджетов, и
   карточка организации обязана оставаться целиком видна над ней — с запасом на то,
   что виджеты плавают вверх на 6 px. */
.signbox {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(194,165,107,.16), transparent 62%),
    var(--navy);
  border-radius: var(--r-box);
  padding: clamp(40px, 3.6vw, 52px) clamp(26px, 3vw, 40px) clamp(58px, 5vw, 70px);
  box-shadow: var(--shadow-box), inset 0 0 0 1px var(--brass-line-on);
  isolation: isolate;
}
.signbox::before {
  content: ''; position: absolute; inset: 11px; border-radius: 12px;
  border: 1px solid var(--brass-line); pointer-events: none;
}
.signbox__screw {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass); opacity: .55;
}
.signbox__screw--tl { left: 15px; top: 15px; }
.signbox__screw--tr { right: 15px; top: 15px; }
.signbox__screw--bl { left: 15px; bottom: 15px; }
.signbox__screw--br { right: 15px; bottom: 15px; }
/* Латунная кромка короба разгорается при появлении — собственное движение первого
   экрана. Гаснет она не в ноль, а до трети: погасшую кромку не отличить от её
   отсутствия, а без JS и при reduced-motion она просто горит. */
.signbox__edge {
  position: absolute; left: 28px; right: 28px; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(228,206,156,0), var(--brass-lit), rgba(228,206,156,0));
  transform: scaleX(.3); opacity: .5;
  transition: transform 900ms var(--ease-out) 180ms, opacity 900ms var(--ease-out) 180ms;
}
.hero__box[data-reveal-state="in"] .signbox__edge,
.hero__box:not([data-reveal-state]) .signbox__edge { transform: scaleX(1); opacity: 1; }

/* ---------- карточка организации на Яндекс Картах ----------
   Это не заглушка и не серые прямоугольники: галерея, название, рейтинг со
   звёздами, число отзывов, категория, адрес, режим работы и ряд действий — всё
   то, что человек видит в настоящей карточке. Фотографии нарисованы SVG:
   свет, размытие дальнего плана, виньетка и зерно. */

.ycard {
  background: var(--plate);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(11,25,48,.16), 0 28px 60px -28px rgba(11,25,48,.55);
  color: #1B2029;
}
.ycard__gallery {
  position: relative;
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 1fr);
  gap: 3px; background: #1B2029;
  aspect-ratio: 16 / 9;
}
.shot { position: relative; overflow: hidden; background: #241B14; }
.shot--main { grid-row: 1 / 3; }
.shot__img { display: block; width: 100%; height: 100%; }
.ycard__count {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(12,16,24,.72); color: #FFF;
  border-radius: var(--r-pill); padding: 6px 12px;
  font: 600 12px/1.2 var(--font-t);
  backdrop-filter: blur(3px);
}
.ycard__body { padding: 18px 20px 20px; display: grid; gap: 10px; }
/* Синяя галочка подтверждения стоит сразу за названием — правка заказчика 2026-09-15. */
.ycard__ok { width: 1.05em; height: 1.05em; flex: none; color: var(--verify); }
.ycard__name {
  display: flex; align-items: center; gap: 8px;
  margin: 0; max-width: none;
  font: 800 clamp(1.18rem, 1.5vw, 1.42rem)/1.2 var(--font-d);
  letter-spacing: -.028em; color: #10141B;
}
.ycard__rate { margin: 0; max-width: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ycard__score {
  font: 800 1.16rem/1 var(--font-d); letter-spacing: -.03em; color: #10141B;
  font-variant-numeric: tabular-nums;
}
.ycard__stars { display: inline-flex; gap: 2px; color: #F0A93C; }
.yst { width: 16px; height: 16px; }
.ycard__reviews { font-size: 13.5px; color: #55606E; }
.ycard__cat { margin: 0; max-width: none; font-size: 13.5px; color: #55606E; }
.ycard__meta { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 8px; }
.ycard__meta li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: #414B58; line-height: 1.35; }
.yic { width: 16px; height: 16px; flex: none; color: #7B8695; margin-top: .1em; }
.ycard__acts { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.yact {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid #DCE0E6; border-radius: var(--r-pill);
  padding: 12px 15px; font: 600 13.5px/1 var(--font-t); color: #2C3541;
  background: #FFF;
}
.yact .yic { width: 15px; height: 15px; margin: 0; color: #5B6674; }
.yact--go { background: #1E6BE6; border-color: #1E6BE6; color: #FFF; }
.yact--go .yic { color: #FFF; }
.yact--icon { padding: 12px 13px; }
.ycard--compact .ycard__gallery { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 21 / 9; }
.ycard--compact .shot--side { display: none; }
.ycard--compact .shot--main { grid-row: auto; }

/* ---------- плавающий виджет: было → стало ---------- */

.hwid {
  position: absolute; z-index: 4;
  display: grid; gap: 6px;
  min-width: 168px;
  background: var(--plate); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-plate);
  padding: 14px 16px;
  box-shadow: var(--shadow-tag);
}
.hwid--brass { background: var(--brass); color: var(--navy); border-color: transparent; }
.hwid__label { font: 600 .74rem/1 var(--font-t); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.hwid--brass .hwid__label { color: #3A2E12; }
.hwid__pair { display: flex; align-items: baseline; gap: 9px; font-variant-numeric: tabular-nums; }
.hwid__was { font-size: 1rem; color: var(--ink-2); }
.hwid--brass .hwid__was { color: #4A3A16; }
.hwid__ic { align-self: center; color: var(--brass-ink); width: 17px; height: 17px; }
.hwid--brass .hwid__ic { color: var(--navy); }
.hwid__now { font: 800 1.5rem/1 var(--font-d); letter-spacing: -.03em; }

/* ---------- решение A: карточка в коробе ---------- */

.heroviz { position: relative; }
/* Виджеты идут одной полосой по нижней кромке короба, по центру, а не по углам:
   заказчик 2026-09-11 сказал, что по углам им не хватает «энергии, жизни», и выбрал
   в панели твиков «полосу снизу». Первым стоит трафик — латунный, это его правка того
   же дня. Полоса свисает на треть высоты виджета: карточку не задевает, до рамки
   остаётся зазор. Жизнь — в движении: виджеты плавают вразнобой, а цифра «стало»
   въезжает снизу, когда короб появляется. Всё на трансформе и прозрачности. */
.heroviz--box .hwids {
  position: absolute; z-index: 4; left: 50%; bottom: -30px;
  transform: translateX(-50%);
  display: flex; gap: 12px; align-items: flex-start;
}
.heroviz--box .hwids .hwid {
  position: relative; min-width: 0; flex: none; padding: 12px 16px;
  animation: hwidFloat 5.6s var(--ease) infinite;
}
.heroviz--box .hwids .hwid:nth-child(2) { animation-delay: -1.9s; }
.heroviz--box .hwids .hwid:nth-child(3) { animation-delay: -3.7s; }
@keyframes hwidFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.hwid__now { display: inline-block; }
.hero__box[data-reveal-state="in"] .heroviz--box .hwid__now { animation: hwidRoll 700ms var(--ease-out) 260ms both; }
.hero__box[data-reveal-state="in"] .heroviz--box .hwid:nth-child(2) .hwid__now { animation-delay: 380ms; }
.hero__box[data-reveal-state="in"] .heroviz--box .hwid:nth-child(3) .hwid__now { animation-delay: 500ms; }
@keyframes hwidRoll {
  from { transform: translateY(70%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ---------- решение B: карта и карточка поверх метки ---------- */

.heroviz--map { padding-bottom: 30px; }
.hmap {
  position: relative;
  border-radius: var(--r-box);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-box), inset 0 0 0 1px var(--brass-line);
}
.hmap__svg { display: block; width: 100%; height: 100%; }
.hmap__pins { position: absolute; inset: 0; }
.hpin { position: absolute; transform: translate(-50%, -100%); }
.hpin i {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: #FFF; color: #6B7280;
  font: 600 var(--fs-xs)/1 var(--font-t);
  box-shadow: 0 3px 8px rgba(20,24,31,.28);
}
.hpin i > * { transform: rotate(45deg); }
.hpin--you i {
  width: 38px; height: 38px;
  background: var(--navy); color: var(--brass-lit);
  box-shadow: 0 6px 16px rgba(11,25,48,.5);
}
.hpin--you .yic { width: 20px; height: 20px; color: var(--brass-lit); }
.hpin__ring {
  position: absolute; left: 50%; top: 50%;
  width: 78px; height: 78px; margin: -39px 0 0 -39px;
  border-radius: 50%;
  border: 2px solid var(--brass);
  background: radial-gradient(closest-side, rgba(228,206,156,.34), transparent);
  animation: ping 3.6s var(--ease) infinite;
}
@keyframes ping {
  0%   { transform: scale(.62); opacity: .95; }
  70%  { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}
/* Карточка свисает с карты, как открытая по клику панель: карта остаётся видна
   сверху и справа, а не превращается в подложку под белым прямоугольником. */
.hmap__card { position: absolute; left: 0; bottom: -30px; width: min(62%, 344px); z-index: 3; }
/* Три виджета идут одной колонкой по правому краю: карточка занимает левый низ,
   и правая полоса — единственное место, где ни один из них её не задевает.
   Позиции разведены по вертикали с запасом, чтобы соседи не слиплись, когда
   первый экран становится ниже. */
.heroviz--map .hwid--a { right: 1%; top: 1%; }
.heroviz--map .hwid--c { right: 5%; top: 35%; }
.heroviz--map .hwid--b { right: 2%; bottom: 14%; }

/* ---------- решение C: карточка и панель роста ---------- */

.heroviz--growth { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px; align-items: center; }
.hgrow__panel {
  background: var(--navy); color: var(--on);
  border-radius: var(--r-box); padding: 22px 20px;
  box-shadow: inset 0 0 0 1px var(--brass-line-on), var(--shadow-box);
}
.hgrow__title { margin: 0 0 16px; max-width: none; font: 600 var(--fs-xs)/1.2 var(--font-t); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.hgrow__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hgrow__row, .hgrow__foot { display: grid; gap: 5px; }
.hgrow__foot { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--brass-line-on); max-width: none; }
.hgrow__label { font-size: var(--fs-xs); color: var(--on-2); }
.hgrow__pair { display: flex; align-items: baseline; gap: 9px; font-variant-numeric: tabular-nums; }
.hgrow__pair span { color: var(--on-2); }
.hgrow__pair b { font: 800 var(--fs-lg)/1 var(--font-d); letter-spacing: -.03em; color: var(--brass-lit); }
.hgrow__ic { align-self: center; color: var(--brass); width: 16px; height: 16px; }

@media (max-width: 900px) {
  /* На телефоне сначала обещание, потом карточка: ниша приходит с телефона,
     и первым должен читаться заголовок, а не мокап. */
  .hero__grid { grid-template-columns: 1fr; }
  .hero__box { margin-top: 12px; }
}
@media (max-width: 720px) {
  /* Карточка перестаёт висеть над картой и встаёт под ней: перекрытие на узком
     экране съело бы и карту, и половину карточки. */
  .heroviz--map { padding-bottom: 0; }
  .hmap { aspect-ratio: 16 / 7; }
  .hmap__card { position: static; width: auto; margin-top: -34px; }
  .heroviz .hwid { position: static; margin-top: 12px; min-width: 0; }
  .heroviz--box .hwids { position: static; transform: none; flex-wrap: wrap; margin-top: 12px; }
  .heroviz--box .hwids .hwid { margin-top: 0; }
  .heroviz--growth { grid-template-columns: 1fr; }
  .signbox { padding: 18px; }
  .signbox::before { inset: 8px; }
  .signbox__screw { width: 6px; height: 6px; }
  .signbox__screw--tl, .signbox__screw--tr { top: 11px; }
  .signbox__screw--bl, .signbox__screw--br { bottom: 11px; }
  .signbox__screw--tl, .signbox__screw--bl { left: 11px; }
  .signbox__screw--tr, .signbox__screw--br { right: 11px; }
}
@media (prefers-reduced-motion: reduce) { .hpin__ring { animation: none; opacity: .5; } }

/* ---------- 3 · причины ----------
   Ярлык витрины: лампа слева гаснет, пока строка не появилась, и зажигается
   вместе с ней. Это тот же жест, что и во всех остальных секциях, — свет
   включается, — только в самом мелком масштабе. */

/* Каждая ситуация — своя плашка с латунной кромкой слева, переход к услуге — кнопкой:
   «плашки» — выбор заказчика в панели твиков 2026-09-11. */
.reasons__list { margin-top: clamp(36px, 4vw, 56px); display: grid; gap: 12px; }
.reason {
  display: grid;
  grid-template-columns: 44px minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(16px, 2.6vw, 40px);
  row-gap: 16px;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--r-plate);
  background: var(--plate);
  box-shadow: inset 3px 0 0 var(--brass), var(--shadow-plate);
}
.reason h3 { font-size: var(--fs-xl); line-height: 1.14; letter-spacing: -.028em; }
.reason p { color: var(--ink-2); margin: 0 0 18px; }
.reason .link { color: var(--ox); border: 1px solid currentColor; border-radius: var(--r-pill); padding: 12px 18px; }
.reason .link:hover { border-color: currentColor; background: rgba(94,29,40,.06); }

.reason__lamp {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-2);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color 520ms var(--ease), background-color 520ms var(--ease), box-shadow 520ms var(--ease);
}
.reason__lamp .ic { width: 20px; height: 20px; }
.reason[data-reveal-state="in"] .reason__lamp {
  color: var(--brass-ink);
  background: #F4EBD8;
  box-shadow: inset 0 0 0 1px var(--brass-line), 0 8px 20px -10px rgba(194,165,107,.95);
}
/* На тёмном тоне — выбор заказчика в панели 2026-09-11 — ярлыки перекрашены здесь же.
   Правила висят на тоне секции, а не на её номере: панель умеет вернуть полосу, и
   тогда ярлыки сами возвращаются к чернилам светлой секции. */
.reasons[data-tone="dark"] .reason {
  background: rgba(244,241,234,.05);
  box-shadow: inset 3px 0 0 var(--brass), inset 0 0 0 1px var(--line-on);
}
.reasons[data-tone="dark"] .reason .link:hover { background: rgba(228,206,156,.1); }
.reasons[data-tone="dark"] .reason h3 { color: var(--on); }
.reasons[data-tone="dark"] .reason p { color: var(--on-2); }
.reasons[data-tone="dark"] .reason .link { color: var(--brass-lit); }
.reasons[data-tone="dark"] .reason__lamp {
  color: var(--on-2); background: rgba(244,241,234,.06);
  box-shadow: inset 0 0 0 1px var(--line-on);
}
.reasons[data-tone="dark"] .reason[data-reveal-state="in"] .reason__lamp {
  color: var(--brass-lit); background: rgba(194,165,107,.16);
  box-shadow: inset 0 0 0 1px var(--brass-line-on), 0 10px 24px -12px rgba(228,206,156,.8);
}

@media (max-width: 760px) {
  .reason { grid-template-columns: 36px minmax(0, 1fr); row-gap: 12px; }
  .reason__body { grid-column: 2; }
  .reason__lamp { width: 32px; height: 32px; }
}

/* ---------- 4 · цифры ----------
   Цифра живёт только рядом с названным источником: подпись стоит прямо под своим
   утверждением, а не сноской внизу страницы.

   С 2026-09-11 здесь четыре строки заказчика. Табличка тёмно-синяя с латунной
   кромкой, строки идут столбцом: цифра слева, утверждение и источник справа —
   «тёмная панель» и «в столбец» выбраны заказчиком в панели твиков. Колонка цифр
   одна на все строки (subgrid): широкое «77–94%» не сдвигает соседей. */

.choice {
  position: relative; overflow: hidden;
  margin: clamp(30px, 3.6vw, 52px) 0 0;
  background: var(--navy); color: var(--on);
  border: 1px solid transparent;
  border-radius: var(--r-box);
  padding: clamp(12px, 1.2vw, 18px) clamp(26px, 3.2vw, 48px);
  box-shadow: inset 0 0 0 1px var(--brass-line-on), var(--shadow-box);
}
/* Латунная кромка сверху: гаснет, пока табличка не появилась. */
.choice::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brass), var(--brass-lit));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 620ms var(--ease-out);
}
.choice[data-reveal-state="in"]::before { transform: scaleX(1); }

.facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  column-gap: clamp(22px, 3.4vw, 56px);
}
/* Утверждение стоит на одной линии с цифрой, по её середине, а источник — под
   утверждением: правка заказчика 2026-09-11, прежде текст опускался ниже цифры.
   Обёртка текста раскрыта (`display: contents`), и утверждение с источником встают
   в сетку строки сами: цифра и утверждение — первая строка, источник — вторая. */
.fact {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto;
  align-items: center; row-gap: 8px;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-top: 1px solid var(--brass-line-on);
}
.fact__body { display: contents; }
.fact__v { grid-column: 1; grid-row: 1; }
.fact__t { grid-column: 2; grid-row: 1; }
.fact__src { grid-column: 2; grid-row: 2; align-self: start; }
.fact:first-child { border-top: 0; }
.fact__v {
  font: 800 clamp(2.8rem, 5.6vw, 5.2rem)/.9 var(--font-d);
  letter-spacing: -.045em; color: var(--brass-lit);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fact__t {
  margin: 0; max-width: 34ch;
  font: 800 var(--fs-xl)/1.18 var(--font-d);
  letter-spacing: -.02em; color: var(--on);
}
.fact__src { margin: 0; max-width: none; font-size: var(--fs-sm); line-height: 1.45; color: var(--on-2); }
@media (max-width: 720px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact { grid-template-rows: auto auto auto; align-items: start; }
  .fact__v, .fact__t, .fact__src { grid-column: 1; }
  .fact__t { grid-row: 2; }
  .fact__src { grid-row: 3; }
}

/* Набора «Сколько отзывов нужно карточке» (шкала порога и коридора) больше нет:
   заказчик убрал его 2026-09-11 — «просто убери». Стили ушли вместе с ним. */

/* ---------- 5 · три канала — световой короб ---------- */

.channels { padding: calc(clamp(56px, 9vw, 150px) * var(--density, 1)) 0 !important; }
.lightbox {
  position: relative;
  border-radius: var(--r-box);
  background: var(--navy-2);
  padding: clamp(30px, 4vw, 68px);
  /* обрезка нужна самому эффекту: свечение живёт внутри короба, а не вокруг него */
  overflow: hidden;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.55), 0 44px 84px -46px rgba(0,0,0,.6);
}
.lightbox__in { position: relative; z-index: 2; }
.lightbox__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(115% 78% at 50% 0%, rgba(194,165,107,.20), transparent 66%);
}
/* Кромка короба. Свет уходит внутрь панели (inset), а не висит цветным нимбом
   снаружи: снаружи короб отбрасывает обычную нейтральную тень со смещением. */
.lightbox::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  border: 2px solid var(--brass);
  box-shadow: inset 0 2px 52px -14px rgba(228,206,156,.5);
}

/* Авторский момент: короб зажигается один раз, слева направо. Повторов нет. */
.lightbox[data-reveal-state="out"]::after { clip-path: inset(0 100% 0 0); opacity: .3; }
.lightbox[data-reveal-state="out"] .lightbox__glow { opacity: 0; }
.lightbox[data-reveal-state="in"]::after { animation: ignite 900ms var(--ease-out) both; }
.lightbox[data-reveal-state="in"] .lightbox__glow { animation: warmup 1200ms 140ms var(--ease) both; }

@keyframes ignite {
  0%   { clip-path: inset(0 100% 0 0); opacity: .3; filter: blur(3px); }
  58%  { opacity: 1; }
  100% { clip-path: inset(0 0 0 0);   opacity: 1;  filter: blur(0); }
}
@keyframes warmup { from { opacity: 0; } to { opacity: 1; } }

.channels .lead--on { margin-top: 22px; max-width: 62ch; }
/* «Три источника клиентов» — одной строкой на любой ширине, правка заказчика
   2026-09-11: кегль подгоняет `vitrina.js`, если строка не влезает. */
.channels .h-sec { white-space: nowrap; }

/* Три луча сходятся в одну карточку: три источника клиентов сразу, а не один.
   Луч своего канала разгорается, когда курсор или клавиатура доходят до колонки. */
.beams { position: relative; margin: clamp(34px, 3.6vw, 56px) 0 0; height: clamp(96px, 11vw, 168px); }
.beams__svg { display: block; width: 100%; height: 100%; }
.beam { opacity: .45; transition: opacity 240ms var(--ease), stroke-width 240ms var(--ease); }
.beam-end { opacity: .5; transition: opacity 240ms var(--ease), r 240ms var(--ease); }
.beams__hub {
  position: absolute; left: 50%; top: -22px; z-index: 2; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--brass); color: var(--navy);
  border-radius: var(--r-pill); padding: 12px 20px;
  font: 600 var(--fs-sm)/1 var(--font-t); white-space: nowrap;
  box-shadow: 0 10px 26px -12px rgba(228,206,156,.8);
}
.lightbox:has(.channel:nth-child(1):hover) .beam--1,
.lightbox:has(.channel:nth-child(1):focus-within) .beam--1,
.lightbox:has(.channel:nth-child(2):hover) .beam--2,
.lightbox:has(.channel:nth-child(2):focus-within) .beam--2,
.lightbox:has(.channel:nth-child(3):hover) .beam--3,
.lightbox:has(.channel:nth-child(3):focus-within) .beam--3 { opacity: 1; stroke-width: 4; }
.lightbox:has(.channel:nth-child(1):hover) .beam-end--1,
.lightbox:has(.channel:nth-child(1):focus-within) .beam-end--1,
.lightbox:has(.channel:nth-child(2):hover) .beam-end--2,
.lightbox:has(.channel:nth-child(2):focus-within) .beam-end--2,
.lightbox:has(.channel:nth-child(3):hover) .beam-end--3,
.lightbox:has(.channel:nth-child(3):focus-within) .beam-end--3 { opacity: 1; r: 7px; }

.channels__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
  margin-top: clamp(34px, 4vw, 56px);
}
/* Каждый канал — на своей врезке короба: «три карточки» — выбор заказчика в панели
   твиков 2026-09-11. Колонки с линейкой сверху остались в панели вторым решением. */
.channel {
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--r-box);
  background: rgba(244,241,234,.05);
  box-shadow: inset 0 0 0 1px var(--brass-line-on);
}
.channel h3 { font-size: var(--fs-lg); line-height: 1.2; letter-spacing: -.024em; color: var(--brass); }
.channel p { color: var(--on-2); margin: 12px 0 0; font-size: var(--fs-base); }
.channels__out {
  margin: clamp(32px, 4vw, 52px) 0 0; max-width: 74ch;
  border-left: 1px solid var(--brass);
  padding: 4px 0 4px 22px;
  color: var(--on); font-size: var(--fs-base);
}
@media (max-width: 820px) { .channels__grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- 5 · услуги ---------- */

/* Цены стоят под текстом услуги, во всю ширину, две в ряд: «цены под текстом» — выбор
   заказчика в панели твиков 2026-09-11. Текст и цены рядом остались вторым решением. */
.services__list { margin-top: clamp(36px, 4vw, 56px); display: grid; gap: clamp(30px, 3.5vw, 52px); }
.service {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--brass-line);
}
.service h3 { font-size: var(--fs-xl); line-height: 1.1; letter-spacing: -.03em; }
.service__verb {
  display: inline-block; margin: 12px 0 0;
  font: 600 var(--fs-xs)/1 var(--font-t); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ox); background: rgba(94,29,40,.08);
  border-radius: var(--r-pill); padding: 12px 15px;
}
.service__sum { margin: 16px 0 0; color: var(--ink); }
/* Пункты услуги — то, за что платят, и подача у них световая: заказчик 2026-09-11
   сказал, что прежний список «выглядит дёшево, простенько». Каждый пункт — табличка
   с лампой: лампы зажигаются каскадом, когда услуга появляется, а латунная кромка
   слева дорастает сверху вниз. Под курсором табличка приподнимается и берёт кромку
   целиком. Прежний список и ещё два решения — в панели твиков. */
.service__does {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.service__does li {
  position: relative; overflow: hidden;
  display: flex; gap: 14px; align-items: center;
  color: var(--ink); font-size: var(--fs-body); font-weight: 600; line-height: 1.45;
  background-color: var(--plate);
  background-image: linear-gradient(120deg, rgba(255,255,255,0) 45%, rgba(228,206,156,.2));
  border-radius: var(--r-plate);
  padding: 16px 20px 16px 16px;
  box-shadow: inset 0 0 0 1px var(--brass-line), 0 10px 26px -20px rgba(11,25,48,.45);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.service__does li::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--brass-lit), var(--brass));
  transform: scaleY(0); transform-origin: top center;
  transition: transform 560ms var(--ease-out);
}
.service[data-reveal-state="in"] .service__does li::before,
.service:not([data-reveal-state]) .service__does li::before { transform: scaleY(1); }
.service__does li:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--brass), 0 18px 34px -18px rgba(11,25,48,.5);
}
.service__tick {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: var(--brass-lit);
  box-shadow: 0 0 0 4px rgba(194,165,107,.1);
  transition: box-shadow 620ms var(--ease);
}
.service[data-reveal-state="in"] .service__tick,
.service:not([data-reveal-state]) .service__tick {
  box-shadow: 0 0 0 4px rgba(194,165,107,.2), 0 6px 18px -4px rgba(228,206,156,.95);
}
.service__tick .ic { width: 18px; height: 18px; }
/* Каскад: лампы зажигаются по очереди, а не все разом. */
.service__does li:nth-child(2)::before, .service__does li:nth-child(2) .service__tick { transition-delay: 90ms; }
.service__does li:nth-child(3)::before, .service__does li:nth-child(3) .service__tick { transition-delay: 180ms; }
.service__does li:nth-child(4)::before, .service__does li:nth-child(4) .service__tick { transition-delay: 270ms; }
@media (max-width: 720px) { .service__does { grid-template-columns: minmax(0, 1fr); } }
/* Кнопка идёт во всю ширину под обеими ценами, а не третьей колонкой. */
.service__go { margin-top: 6px; grid-column: 1 / -1; }

.prices { display: grid; gap: 12px; align-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price {
  background: var(--navy); color: var(--on);
  border-radius: var(--r-plate); padding: 17px 20px;
  display: grid; gap: 4px;
  box-shadow: inset 0 0 0 1px var(--brass-line-on);
}
.price__where { font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--on-2); }
.price__sum {
  font: 800 var(--fs-2xl)/1 var(--font-d);
  letter-spacing: -.03em; color: var(--brass-lit);
  font-variant-numeric: tabular-nums;
}
.price__what { font-size: var(--fs-sm); color: var(--on-2); line-height: 1.4; }

.pricenote {
  margin: clamp(34px, 4vw, 52px) 0 0; max-width: 76ch;
  background: var(--brass-wash); border-radius: var(--r-plate);
  padding: 20px 24px; color: var(--ink); font-size: var(--fs-base);
}
@media (max-width: 520px) { .prices { grid-template-columns: 1fr; } }

/* ---------- 6 · шаги ---------- */

/* Табличка «Режим работы» на двери: тёмно-синяя эмаль с латунными цифрами.
   Крупное поле фирменного цвета внутри светлой секции — это и есть Committed. */
.steps__list {
  list-style: none; margin: clamp(36px, 4vw, 56px) 0 0;
  padding: clamp(12px, 1.6vw, 22px) clamp(20px, 3vw, 44px);
  background: var(--navy); border-radius: var(--r-box);
  box-shadow: inset 0 0 0 1px var(--brass-line-on), var(--shadow-box);
}
.step {
  display: grid; grid-template-columns: 54px minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(16px, 2.5vw, 36px); align-items: baseline;
  padding: clamp(20px, 2.2vw, 28px) 0;
  border-top: 1px solid var(--brass-line-on);
}
.step:first-child { border-top: 0; }
.step__n {
  font: 800 1.5rem/1 var(--font-d); color: var(--brass);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.step h3 { font-size: var(--fs-md); line-height: 1.25; letter-spacing: -.02em; font-weight: 800; color: var(--on); }
.step__term {
  display: inline-block; margin-top: 9px;
  border: 1px solid var(--brass-line); color: var(--brass-lit);
  border-radius: var(--r-pill); padding: 12px 15px;
  font: 600 var(--fs-xs)/1.2 var(--font-t); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.step p { color: var(--on-2); margin: 0; }
@media (max-width: 760px) {
  .step { grid-template-columns: 40px 1fr; gap: 10px 16px; }
  .step__body { grid-column: 2; }
}

/* Блока «7 · опоры» больше нет: заказчик убрал его целиком 2026-09-11. */

/* ---------- 9 · отчётность: панель короба ----------
   Пять мест выдачи — пять световых ячеек панели. Яркость и длина трубки —
   доля трафика этого места. Строка «Ваша точка» одна и переезжает с пятого
   места на первое; двух нарисованных состояний рядом здесь нет, потому что
   расчёт показывает именно перемещение. Слева у каждой ячейки оставлена
   пустая полоса — это дорожка, по которой строка ходит. */

.board {
  margin-top: clamp(30px, 3.5vw, 48px);
  background: var(--navy); color: var(--on);
  border-radius: var(--r-box);
  padding: clamp(20px, 2.6vw, 34px);
  box-shadow: inset 0 0 0 1px var(--brass-line-on), var(--shadow-box);
}
.board__head {
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  align-items: center; justify-content: space-between;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.board__lead { margin: 0; color: var(--on-2); font-size: var(--fs-base); max-width: 48ch; }
/* Переключатель без общей обоймы: заливка обоймы прижимала бы надписи кнопок
   к своей границе, а поля обоймы прибавили бы к 44 px цели ещё вдвое. */
.board__ctl { display: flex; gap: 8px; flex: none; }
.board__btn {
  min-height: 44px; padding: 12px 20px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--on-2);
  box-shadow: inset 0 0 0 1px var(--line-on);
  font: 600 var(--fs-base)/1.2 var(--font-t); cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.board__btn:hover { color: var(--on); }
.board__btn[aria-pressed="true"] { background: var(--brass); color: var(--navy); }

.board__cells { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 8px; }
/* Колбы в ячейках — «панель с колбами», выбор заказчика в панели твиков 2026-09-11.
   Панель без колб осталась там вторым решением. Первая колонка сетки — дорожка, по
   которой ездит «Ваша точка». */
.board__cell {
  display: grid;
  grid-template-columns: 132px 92px minmax(0, 1fr) 140px;
  gap: 16px; align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(244,241,234,.04);
  box-shadow: inset 0 0 0 1px var(--line-on);
  transition: background-color 420ms var(--ease), box-shadow 420ms var(--ease);
}
.board__place { grid-column: 2; font-size: var(--fs-base); color: var(--on-2); font-variant-numeric: tabular-nums; }
.board__tube {
  grid-column: 3;
  height: 12px; border-radius: var(--r-pill);
  background: rgba(6,14,28,.55);
  box-shadow: inset 0 0 0 1px var(--line-on);
  overflow: hidden;
}
.board__tube i {
  display: block; height: 100%;
  width: calc(var(--lit, 0) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(194,165,107,.5), var(--brass-lit));
  opacity: calc(.4 + .6 * var(--lit, 0));
}
.board__share {
  grid-column: 4;
  font: 600 var(--fs-base)/1.2 var(--font-t); color: var(--brass-lit);
  text-align: right; font-variant-numeric: tabular-nums;
  /* «34% посетителей» — одной строкой, правка заказчика 2026-09-15. */
  white-space: nowrap;
}
.board__cell[data-you] {
  background: rgba(194,165,107,.13);
  box-shadow: inset 0 0 0 1px var(--brass-line);
}
/* Чужие места показывают свою долю тем же способом — только тише, чтобы ваша
   ячейка оставалась главной, а не тонула в пяти одинаковых колбах. */
.board__cell:not([data-you]) .board__tube i {
  background: linear-gradient(90deg, rgba(194,165,107,.28), rgba(194,165,107,.5));
  opacity: calc(.4 + .3 * var(--lit, 0));
}
.board__cell:not([data-you]) .board__share { color: var(--on-2); opacity: .62; }

/* Одна строка, которая действительно едет. */
.board__you {
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--h, 52px);
  transform: translate3d(0, var(--y, 0px), 0);
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--brass-lit);
  display: flex; align-items: center; justify-content: flex-start;
  padding-left: 14px;
  pointer-events: none;
  /* Едет только трансформой. Высоту строка берёт от ячейки сразу, без перехода:
     анимация `height` — это раскладка на каждом кадре, а не композитинг. */
  transition: transform 640ms var(--ease-out);
}
.board__you-t {
  font: 600 var(--fs-xs)/1 var(--font-t); letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy); background: var(--brass-lit);
  border-radius: var(--r-pill); padding: 12px 14px;
}

.board__live { margin: 18px 0 0; color: var(--on); font-size: var(--fs-base); font-weight: 600; }

@media (max-width: 900px) {
  /* На телефоне «ваша точка» встаёт над строкой, а не слева от неё: сверху
     оставлена полоса ровно под высоту пилюли, иначе она легла бы на номер места. */
  /* Номер места — по своей ширине, доле — всё остальное: при крупном системном шрифте
     «посетителей» уходит на вторую строку внутри плашки, а не вылезает за её край
     (жалоба заказчика 2026-09-16). Одна строка обязательна только на ПК. */
  .board__cell {
    grid-template-columns: auto minmax(0, 1fr);
    padding-top: 58px; row-gap: 12px; column-gap: 14px;
  }
  .board__place { grid-column: 1; white-space: nowrap; }
  .board__share { grid-column: 2; white-space: normal; }
  .board__tube { grid-column: 1 / -1; }
  .board__you { align-items: flex-start; padding: 8px 0 0 12px; }
}

/* Что меняется в карточке по тому же расчёту — и что в нём не двигалось. */
/* «Что меняется в карточке» — одно тёмно-синее табло во всю ширину, пять пар в ряд:
   «табло» — выбор заказчика в панели твиков 2026-09-11. Короба «Что в отчёте» рядом
   больше нет, и пары получили всё место. Табло — это скруглённая обойма из ячеек, у самой
   обоймы заливки нет: латунная линейка между ячейками нарисована тенью соседней ячейки.
   У ячейки подпись сверху, «было → стало» снизу, «стало» латунью и крупно; рейтинг —
   смысловая вершина, он крупнее прочих. */
.reporting__grid { margin-top: clamp(30px, 3.5vw, 48px); }
.deltas__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  border-radius: var(--r-box); overflow: hidden;
  box-shadow: var(--shadow-box);
}
.delta {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: clamp(18px, 2vw, 26px);
  background: var(--navy); color: var(--on);
}
.delta + .delta { box-shadow: inset 1px 0 0 var(--brass-line-on); }
.delta__label { font: 600 var(--fs-xs)/1.25 var(--font-t); letter-spacing: .08em; text-transform: uppercase; color: var(--on-2); }
.delta__pair { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-variant-numeric: tabular-nums; }
.delta__was { color: var(--on-2); font-size: var(--fs-base); }
.delta__ic { color: var(--brass); align-self: center; }
.delta__now { font: 800 var(--fs-2xl)/1 var(--font-d); letter-spacing: -.03em; color: var(--brass-lit); }
.delta[data-kind="rating"] .delta__now { font-size: clamp(2rem, 3vw, 2.8rem); }

/* Белая табличка — форма заявки. Короба «Что в отчёте» больше нет, и его стили ушли с ним. */
.plate { background: var(--plate); border: 1px solid var(--line); border-radius: var(--r-box); padding: clamp(22px, 2.6vw, 34px); box-shadow: var(--shadow-plate); }

/* ---------- 9 · разбор и форма ---------- */

/* Весь блок разбора — тёмно-синий короб внутри акцентной секции: «тёмный короб» —
   выбор заказчика в панели твиков 2026-09-11. Текст внутри перекрашен здесь же;
   форма заявки остаётся белой табличкой на коробе. */
.audit__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(30px, 4vw, 64px); align-items: start;
  width: min(calc(100% - 2 * clamp(12px, 3vw, 44px)), 1380px);
  background: var(--navy); color: var(--on);
  border-radius: var(--r-box); padding: clamp(26px, 4vw, 60px);
  box-shadow: inset 0 0 0 1px var(--brass-line-on), var(--shadow-box);
}
.audit__say .h-sec { color: var(--on); }
.audit__say .sub, .audit__say .note { color: var(--on-2); }
/* Пять пунктов разбора — сжатый список с галочками, а не нумерованная простыня:
   заказчик назвал прежнюю подачу нечитабельной. Порядок здесь ничего не значит,
   поэтому и номеров нет. */
.audit__list {
  margin: clamp(24px, 2.6vw, 34px) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 22px;
}
.audit__list li {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;
  color: var(--on); font-size: var(--fs-base); line-height: 1.42;
}
.audit__tick {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brass); color: var(--navy);
}
.audit__tick .ic { width: 15px; height: 15px; }
.audit__meta { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: clamp(26px, 3vw, 34px) 0 18px; }
.audit__meta dt { font: 600 var(--fs-xs)/1 var(--font-t); letter-spacing: .1em; text-transform: uppercase; color: var(--on-2); margin-bottom: 6px; }
.audit__meta dd { margin: 0; font-weight: 600; font-size: var(--fs-base); color: var(--on); }

.audit__form { background: var(--plate); }
.f { margin-bottom: 18px; }
.f label { display: block; font-weight: 600; font-size: var(--fs-base); margin-bottom: 7px; color: var(--ink); }
.f input[type="text"], .f input[type="tel"], .f input[type="url"] {
  width: 100%; min-height: 50px;
  border: 1px solid var(--line); border-radius: var(--r-plate);
  background: var(--paper); color: var(--ink);
  padding: 12px 15px; font: 400 var(--fs-base)/1.4 var(--font-t);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.f input::placeholder { color: #5F6874; }
.f input:hover { border-color: rgba(20,24,31,.28); }
.f input:focus { background: var(--plate); border-color: var(--ox); }
.f input[aria-invalid="true"] { border-color: var(--ox); background: rgba(94,29,40,.05); }

.check { position: relative; display: flex; gap: 11px; align-items: flex-start; cursor: pointer; font-weight: 400 !important; font-size: var(--fs-sm) !important; color: var(--ink-2) !important; line-height: 1.45; min-height: 44px; padding-top: 2px; }
/* Скрытый input растянут на всю подпись: цель касания — вся строка согласия,
   а не квадратик 22 px. */
.check input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.check__text { flex: 1 1 auto; }
.check__box {
  width: 22px; height: 22px; flex: none;
  border: 1px solid rgba(20,24,31,.3); border-radius: 6px;
  display: grid; place-items: center; background: var(--paper); color: transparent;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.check input:checked + .check__box { background: var(--ox); border-color: var(--ox); color: #FFF; }
.check input:focus-visible + .check__box { outline: 2px solid var(--ox); outline-offset: 3px; }
.f--check { padding: 6px 0 4px; }

.form-error {
  margin: 8px 0 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
  color: var(--ox); background: rgba(94,29,40,.07);
  border-radius: 8px; padding: 12px 14px; max-width: none;
}
.note--stub { margin-top: 16px; }

.form-done { }
/* Цвет — явно: `.audit__form` сидит внутри `.audit__grid`, у которого фон навy и текст
   `--on`, а сама форма перекрашивает в белое только фон, не текст. Без своего цвета
   заголовок экрана «что дальше» рисовался светлым по белому — нашла самопроверка,
   которая впервые прогнала реальную отправку внутри настоящей страницы, а не в
   изолированной заготовке shared/self-check.html. */
.form-done__title { font: 800 var(--fs-lg)/1.25 var(--font-d); letter-spacing: -.026em; color: var(--ink); margin: 0 0 16px; }
.form-done__steps { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; color: var(--ink-2); }
.form-done__stub, .form-done__stub-next { font-size: var(--fs-base); color: var(--ink-2); margin-top: 12px; }
@media (max-width: 860px) { .audit__grid { grid-template-columns: 1fr; } }

/* ---------- 11 · вопросы ---------- */

.faq__list { margin-top: clamp(30px, 3.5vw, 48px); max-width: 88ch; }
.qa { border-top: 1px solid var(--brass-line); }
.qa:last-child { border-bottom: 1px solid var(--brass-line); }
.qa > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 28px; gap: 20px; align-items: center;
  padding: 20px 0; min-height: 44px;
  font: 600 var(--fs-md)/1.4 var(--font-t);
  color: var(--ink);
  transition: color 160ms var(--ease);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--ox); }
.qa__ic { width: 28px; height: 28px; color: var(--brass-ink); transition: transform 260ms var(--ease); }
.qa[open] .qa__ic { transform: rotate(45deg); }
.qa[open] .qa__ic .qa-v { opacity: 1; }
.qa__a { padding: 0 0 24px; }
/* ≈65 знаков в строке: при 74ch ответ на ПК шёл по 97 знаков — ревью 2026-09-15. */
.qa__a p { color: var(--ink-2); max-width: 60ch; }

/* ---------- 12 · финал и футер ---------- */

.closing { padding-bottom: calc(clamp(48px, 9vw, 150px) * var(--density, 1)) !important; }
/* Призыв стоит на световой панели — выбор заказчика в панели твиков 2026-09-11.
   Латунная кромка сверху разгорается при появлении: собственное движение секции с
   тех пор, как знак ORYX из подвала убран. */
.closing__top {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: end;
  background: var(--navy-2); border-radius: var(--r-box);
  padding: clamp(26px, 3.4vw, 52px);
  box-shadow: inset 0 0 0 1px var(--brass-line-on), 0 30px 70px -40px rgba(228,206,156,.55);
}
.closing__top::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--brass), var(--brass-lit));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 700ms var(--ease-out);
}
.closing__top[data-reveal-state="in"]::before,
.closing__top:not([data-reveal-state])::before { transform: scaleX(1); }
/* Подводки над кнопкой больше нет: формулировку условий заказчик назвал прямо
   в списке того, что писать не надо. Остались заголовок и кнопка. */
/* Колонка действия шириной с кнопку: фраза «Или напишите в Telegram» встаёт по центру
   кнопки, а не у левого края — правка заказчика 2026-09-16. */
.closing__do { display: grid; justify-items: center; max-width: 340px; }
.closing__do .btn { max-width: 340px; }
/* Второй способ связи прямо на финальном экране — тоже открытое место, не значение. */
.closing__tg { margin: 18px 0 0; color: var(--on-2); font-size: var(--fs-base); text-align: center; }
.closing__tg .ph { margin-top: 8px; }
/* Внутри фразы «Или напишите в Telegram» слово-ссылка набрано как сама фраза. */
.closing__tg .tel--msg { font-size: inherit; vertical-align: middle; }
.closing__cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--brass-line-on);
}
.closing__cols p { color: var(--on-2); font-size: var(--fs-base); margin-bottom: 10px; }
/* Разделы страницы в подвале вместо «Где мы» — правка заказчика 2026-09-15. */
.closing__nav { display: grid; align-content: start; }
.closing__nav a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--on-2); font-size: var(--fs-base); text-decoration: none;
  transition: color 180ms var(--ease);
}
.closing__nav a:hover { color: var(--brass-lit); }
/* Знака ORYX внизу футера больше нет: заказчик убрал его 2026-09-11 — «вообще убери». */
@media (max-width: 860px) {
  .closing__top { grid-template-columns: 1fr; align-items: start; }
  .closing__cols { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- свет короба: курсор — источник ----------
   Модуль `shared/glow.js` пишет позицию курсора и силу света; как это выглядит,
   решает мир. Здесь свет ложится на поверхность короба и разгорается по латунной
   кромке. Значения по умолчанию — ноль, поэтому без JS, на телефоне и при
   reduced-motion всё выглядит ровно так же, только не светится. */

[data-glow] { position: relative; }
[data-glow]::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  opacity: calc(var(--glow-strength, 0) * var(--glow-gain, 1));
  transition: opacity 260ms var(--ease);
  background: radial-gradient(210px 210px at var(--glow-x, 50%) var(--glow-y, 50%),
              rgba(194,165,107,.16), transparent 70%);
}
[data-glow] > * { position: relative; z-index: 1; }

/* Кромка услуги и канала — это их верхняя линейка: она и разгорается. */
.service::after, .channel::after {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--brass); opacity: calc(var(--glow-strength, 0) * var(--glow-gain, 1));
  transition: opacity 260ms var(--ease); pointer-events: none;
}
.channel::after { background: var(--brass-lit); left: var(--r-box); right: var(--r-box); top: 0; }
.channel[data-glow]::before {
  background: radial-gradient(230px 230px at var(--glow-x, 50%) var(--glow-y, 50%),
              rgba(228,206,156,.13), transparent 70%);
}
/* У ячейки табло кромка идёт по всему периметру — это уже настоящий короб. */
.board__cell::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--brass-lit);
  opacity: calc(var(--glow-strength, 0) * .75 * var(--glow-gain, 1));
  transition: opacity 260ms var(--ease);
}

/* ---------- пламя главной кнопки ----------
   Свет живёт под поверхностью кнопки, а не нимбом вокруг неё. Пик яркости
   подобран так, чтобы белый текст под курсором держал 4.5:1 к подсвеченному
   оксбладу, а не тонул в тёплом пятне. */

.btn--ox[data-flame] {
  background-image: radial-gradient(150px 150px at var(--flame-x, 50%) var(--flame-y, 50%),
      rgba(232,212,168, calc(.26 * var(--flame-intensity, 0) * var(--glow-gain, 1))),
      rgba(194,165,107, calc(.10 * var(--flame-intensity, 0) * var(--glow-gain, 1))) 46%,
      rgba(194,165,107, 0) 74%);
}

/* ---------- движение ---------- */

/* Спецификация: появление секции — 200–400 мс. Дольше только авторский момент
   («зажигание» короба), и он появлением секции не является. */
[data-reveal] { --reveal-shift: 18px; --reveal-duration: 340ms; }
.hero__box[data-reveal] { --reveal-shift: 26px; --reveal-duration: 400ms; }

/* Шаги: латунная нить в колонке номеров дорастает до следующего шага вместе
   с его появлением — порядок работ виден как одна непрерывная линия. */
.step { position: relative; }
.step::before {
  content: ''; position: absolute; left: 26px; top: 0; bottom: 0; width: 1px;
  background: var(--brass-line-on);
  transform: scaleY(0); transform-origin: top center;
  transition: transform 520ms var(--ease-out);
}
.step[data-reveal-state="in"]::before { transform: scaleY(1); }
.step__n { position: relative; background: var(--navy); padding: 4px 0; }
.step:hover .step__n { color: var(--brass-lit); }
@media (max-width: 760px) { .step::before { left: 19px; } }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  /* короб не зажигается, а просто горит */
  .lightbox::after, .lightbox[data-reveal-state] ::after { animation: none !important; clip-path: inset(0) !important; opacity: 1 !important; filter: none !important; }
  .lightbox[data-reveal-state="in"]::after, .lightbox[data-reveal-state="out"]::after { animation: none !important; clip-path: inset(0) !important; opacity: 1 !important; }
  .lightbox__glow, .lightbox[data-reveal-state] .lightbox__glow { animation: none !important; opacity: 1 !important; }
}

/* ---------- телефон ----------
   Правка заказчика 2026-09-11: на ПК и ноутбуке всё устраивает, «там ничего трогать не
   нужно», а на телефоне страница вдвое длиннее, чем надо, первый экран разрознен,
   текста — как в новостной статье. Поэтому всё ниже живёт только внутри этого запроса:
   ни одно правило не выходит за 720 px. Сокращение — выбор того, что показать на узком
   экране, а не удаление: на десктопе тот же текст стоит целиком.

   Вторым заходом (тот же день) заказчик выбрал в панели твиков решения для шести
   блоков: короб первого экрана на телефоне скрыт совсем, «Узнаёте себя» и «Три
   источника» идут каруселью с пояснениями, разбор — только формой. Услуги и «до/после»
   остались в положении «как сейчас». Выбор перенесён сюда, ручки ушли из панели. */
@media (max-width: 720px) {
  /* Поля секций плотнее — страница короче на несколько экранов. */
  main > section, footer[data-section] { padding: 40px 0; }
  .hero { padding-top: 28px !important; padding-bottom: 40px !important; }
  .channels { padding: 40px 0 !important; }
  .closing { padding-bottom: 40px !important; }
  .sub { margin-top: 10px; font-size: var(--fs-base); }

  /* Первый экран: собран плотнее — линейки по 14 px, а не по 28. */
  .hero__grid { row-gap: 24px; }
  .hero .hair { margin: 14px 0; }
  .hero .lead { font-size: var(--fs-base); line-height: 1.5; }
  /* Площадки — светлые ярлыки: тонкий контур и мелкая метка. Тёмные таблички
     перебивали кнопки — выбор заказчика 2026-09-11. */
  .hero__ships { gap: 8px; }
  .ship {
    background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
    padding: 12px 16px 12px 12px; gap: 8px; border-radius: var(--r-pill);
    font: 600 var(--fs-sm)/1.1 var(--font-t);
  }
  .ship__pin { width: 20px; height: 20px; border-radius: 50%; background: none; box-shadow: none; }
  .ship__pin .ic { width: 18px; height: 18px; }
  /* Заявка — во всю ширину, «Услуги и цены» — ссылкой под ней: выбор заказчика
     2026-09-11. Двух громоздких кнопок одна над другой, на которые он жаловался, нет. */
  .hero__do { flex-wrap: wrap; gap: 4px 10px; margin-top: 18px; }
  .hero__do .btn { min-width: 0; padding: 12px; line-height: 1.15; white-space: normal; text-align: center; }
  .hero__do .btn--ox { flex: 1 0 100%; min-height: 54px; font-size: var(--fs-base); }
  .hero__do .btn--line {
    flex: 1 0 100%; min-height: 44px; font-size: var(--fs-base);
    background: none; box-shadow: none; text-decoration: underline; text-underline-offset: 4px;
  }
  .hero__do .btn--line:hover { background: none; color: var(--navy); transform: none; }

  /* Короба героя на телефоне нет: заказчик выбрал «только текст и кнопки» — карточка
     организации и виджеты остаются десктопу. */
  .hero__box { display: none; }

  /* «Узнаёте себя» — карусель: плашки листаются вбок, каждая с пояснением, и переход
     к услуге остаётся кнопкой. Выбор заказчика 2026-09-11. */
  .reasons__list {
    margin-top: 20px;
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
    margin-right: -20px; padding-right: 20px; padding-bottom: 6px;
  }
  .reason {
    flex: 0 0 84%; scroll-snap-align: start;
    grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto 1fr;
    row-gap: 10px; padding: 16px;
  }
  .reason__lamp { width: 30px; height: 30px; }
  .reason h3 { font-size: var(--fs-md); }
  /* Текст — во всю ширину плашки и не длиннее четырёх строк; кнопка — латунная и
     прижата к низу, поэтому на всех плашках стоит на одной высоте. Подпись «Закрывается
     услугой» скрыта: кнопка называет одну услугу. Выбор заказчика 2026-09-11. */
  .reason__body { grid-column: 1 / -1; display: flex; flex-direction: column; }
  .reason p {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
    font-size: var(--fs-base); margin-bottom: 14px;
  }
  /* По длине надписи, а не во всю ширину: стрелка стоит рядом со словами — правка
     заказчика 2026-09-11. */
  .reasons[data-tone] .reason .link {
    margin-top: auto; align-self: flex-start; gap: 10px;
    min-height: 48px; padding: 12px 18px; border: 0; border-radius: var(--r-pill);
    background: var(--brass); color: var(--navy); font-size: var(--fs-sm);
  }
  .reasons[data-tone] .reason .link:hover { background: var(--brass-lit); }
  .reason .link__pre { display: none; }

  /* «Решают по отзывам» — чуть мельче целиком: правка заказчика 2026-09-11. */
  .choice { margin-top: 20px; padding: 12px 18px; }
  .fact { padding: 16px 0; row-gap: 6px; }
  .fact:first-child { padding-top: 6px; }
  .fact:last-child { padding-bottom: 6px; }
  .fact__v { font-size: 2.3rem; }
  .fact__t { font-size: var(--fs-base); }
  .fact__src { font-size: var(--fs-sm); }

  /* Три источника — тоже карусель: подводка и канал за каналом со своим механизмом.
     Вывод про SEO остаётся десктопу. Схемы со ступицей и ветками на телефоне нет:
     над каруселью три ветки читались нелогично — выбор заказчика 2026-09-11. */
  .channels .lead--on { margin-top: 12px; font-size: var(--fs-base); }
  .beams { display: none; }
  /* Золотое свечение короба слабее: на телефоне короб казался светлым, и карточки
     каналов читались хуже — правка заказчика 2026-09-11. На десктопе свечение прежнее. */
  .lightbox__glow { background: radial-gradient(115% 60% at 50% 0%, rgba(194,165,107,.08), transparent 62%); }
  .lightbox::after { box-shadow: inset 0 2px 24px -14px rgba(228,206,156,.26); }
  .channels__grid {
    margin-top: 20px;
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
    margin-right: -20px; padding-right: 20px; padding-bottom: 6px;
  }
  .channel { flex: 0 0 82%; scroll-snap-align: start; padding: 16px 18px; }
  .channel p { display: block; font-size: var(--fs-base); }
  .channels__out { display: none; }

  /* Услуги: название, глагол, пункты работ и цены. Описание услуги и жёлтая плашка
     про разницу в цене — только на десктопе. Цены — по две в ряд. */
  .services__list { margin-top: 20px; gap: 28px; }
  .service { gap: 16px; padding-top: 20px; }
  .service__sum, .pricenote { display: none; }
  .service__does { margin-top: 14px; gap: 8px; }
  .service__does li { gap: 10px; padding: 12px 14px 12px 12px; font-size: var(--fs-base); }
  .service__tick { width: 28px; height: 28px; }
  .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .price { padding: 12px 14px; }
  .price__sum { font-size: var(--fs-lg); }
  .price__what { font-size: var(--fs-sm); }

  /* До и после: подсказка над панелью и колбы опущены, ячейки короче. Строка «Ваша
     точка» держится подсветкой ячейки, её подпись остаётся для скринридера. Пары — по
     одной в строку: подпись слева, «было → стало» справа. */
  .board { padding: 14px; }
  .board__lead { display: none; }
  .board__head { margin-bottom: 12px; }
  .board__ctl { width: 100%; }
  .board__btn { flex: 1 1 0; padding: 12px; }
  .board__cell { padding: 12px 14px; row-gap: 0; }
  .board__tube { display: none; }
  .board__you-t {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .board__live { margin-top: 12px; font-size: var(--fs-base); }
  .reporting__grid { margin-top: 20px; }
  .deltas__list { grid-template-columns: minmax(0, 1fr); }
  .delta { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; padding: 12px 16px; }
  .delta + .delta { box-shadow: inset 0 1px 0 var(--brass-line-on); }
  .delta__now, .delta[data-kind="rating"] .delta__now { font-size: var(--fs-lg); }

  /* Разбор — только форма: заказчик выбрал убрать список пунктов на телефоне, форма
     заявки короба тоньше и плотнее. */
  .audit__grid { gap: 20px; padding: 20px 16px; }
  .audit__list, .audit__meta, .audit__say .note { display: none; }
  .audit__form { padding: 18px 16px; }
  .audit__form .h-min { margin-bottom: 12px; }
  .f { margin-bottom: 10px; }
  .f label { margin-bottom: 4px; font-size: var(--fs-sm); }
  .f input[type="text"], .f input[type="tel"], .f input[type="url"] { min-height: 46px; padding: 10px 14px; }
  .note--stub { margin-top: 10px; font-size: var(--fs-sm); }

  /* Финал «Начнём с разбора» — по центру: на телефоне заголовок и кнопка стояли по
     левому краю и казались съехавшими — правка заказчика 2026-09-15. */
  .closing__top { justify-items: center; text-align: center; }
  .closing__do { display: grid; justify-items: center; width: 100%; }
  .closing__do .btn { margin-inline: auto; }

  /* Разделы в подвале — двумя колонками: четыре ссылки столбиком удлиняли страницу. */
  .closing__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }

  /* Мелкий текст — не меньше 14 px: источники цифр, состав цены, ярлыки услуг и сроки
     шагов шли по 12,5 px — ревью 2026-09-15. */
  .service__verb { font-size: var(--fs-sm); letter-spacing: .06em; }
  .step__term { font-size: var(--fs-sm); }

  /* Точки под каруселями — ревью 2026-09-15: по краю следующей карточки листание
     угадывали не все. Кнопка — 44 px, точка внутри — рисунок. */
  .dots { display: flex; justify-content: center; margin-top: 2px; }
  .dots__b {
    width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center;
  }
  .dots__b::before {
    content: ''; width: 8px; height: 8px; border-radius: 4px;
    background: var(--on-2); opacity: .5;
    transition: transform 220ms var(--ease), opacity 220ms var(--ease), background-color 220ms var(--ease);
  }
  .dots__b[aria-current="true"]::before { background: var(--brass-lit); opacity: 1; transform: scaleX(2.4); }
}