/* МастерСайт — токены и раскладка. Раздел 5 project.md — источник решений. */

/* ---------- Шрифты ----------
   Со своего домена, не с CDN Google: сторонний CDN видит IP посетителя, и
   для чувствительных сегментов (стоматология, юристы) это претензия по GDPR
   (SITE-BLUEPRINT.md, раздел 3). Подмножества только cyrillic и latin —
   болгарский алфавит целиком в базовом кириллическом диапазоне.
   Manrope вариативный: один файл на подмножество несёт все начертания.
   Лицензии и источники — fonts/LICENSE.md. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptserif-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptserif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ptserif-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ptserif-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/mono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/mono-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



:root {
  --ink: #14171C;
  --glass: #A9C7D6;
  --spire: #4B2E63;
  --gold: #C9A227;
  --marble: #F4F1EA;
  --error: #C1443C;

  /* Шрифты самохостятся (см. @font-face выше). Запасные стеки оставлены на
     случай, если файл не догрузился.

     РАЗДЕЛЕНИЕ РОЛЕЙ (решение пользователя 06.08.2026, отменяет прежнее
     «типографика меняется от секции к секции»): один шрифт с засечками на
     всё крупное и «сценическое» — первый экран и все три карточки, — и
     Manrope на интерфейс, мелкий текст и светлую зону, где плотная таблица
     и формы читаются лучше без засечек. Разнобой по карточкам убран: они
     обязаны выглядеть одинаково.

     Имена токенов исторические (--font-glass задумывался под ярус 1,
     --font-capitol под ярус 3) и роли уже не описывают. Оставлены как есть,
     чтобы не гнать переименование по всему файлу ради косметики. */
  --font-glass: 'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-capitol: 'PT Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Системный шрифт ОС, без своей гарнитуры впереди. Это ровно то, чем
     рисовался весь сайт ДО подключения шрифтов (в стеках стояли имена, но
     файлов не было, и браузер падал сюда) — на Windows это Segoe UI.
     Пользователь выбрал его для первого экрана после сравнения с Manrope
     живьём (06.08.2026).

     Осознанная цена: системный шрифт РАЗНЫЙ на разных ОС — Segoe UI на
     Windows, San Francisco на macOS/iOS, Roboto на Android. Первый экран
     будет выглядеть неодинаково у разных посетителей, и проконтролировать
     это нельзя. Для остального сайта гарнитуры свои, там вид одинаков. */
  --font-system: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Главный слоган. Montserrat выбран пользователем 07.08.2026, кириллица
     проверена до подключения. Стек — как просил пользователь. Остальной
     первый экран остаётся на --font-system: заменён только слоган. */
  --font-slogan: 'Montserrat', system-ui, sans-serif;

  --scrim: rgba(20, 23, 28, 0.55);

  /* Светлая зона — секции 4–6. Повествование: ярусы 1–3 показывают здание
     снаружи в сумерках, дальше посетитель «входит внутрь», где читают и
     считают. Поэтому светлый фон — не декоративная передышка, а смена
     сцены (жалоба 06.08.2026: на тёмном неудобно читать эти секции).

     --stone намеренно ХОЛОДНЫЙ, а не тёплый кремовый: тёплый near-#F4F1EA
     (наш --marble) — самый заезженный дефолт в ИИ-вёрстке, плюс настоящий
     мрамор Капитолия холодный, а не кремовый. Заодно цепляется за --glass
     из яруса 1. */
  --stone: #E4E9ED;
  --stone-line: #C6D0D8;
  --surface: #FFFFFF;
  --ink-soft: #4C555F;
  /* Сырое --gold (#C9A227) на светлом даёт ~2:1 — годится под заливку
     кнопки с тёмным текстом, но не как сам текст. Для текста на светлом
     берётся эта тёмная версия. */
  --gold-deep: #7A5E0C;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Постраничный переход между тремя карточками (запрос 06.08.2026) —
     scroll-snap-align стоит на .tier__viewport (окно контента яруса), а не
     на самой секции: у яруса 3 окно смещено к низу секции.

     Это рабочий путь для ТАЧ-устройств и для выключенного JS. На мыши JS
     глушит снап и ведёт перелёт сам (app.js, setUpSmoothTierSnap) — иначе
     два механизма конфликтуют и дают рывки.

     proximity, а не mandatory: точки привязки есть только в ярусах, а ниже
     (секции 4–6) их нет вовсе. При mandatory браузер обязан привести
     прокрутку к ближайшей точке, и у границы это тянет обратно к ярусу 3,
     мешая уйти вниз. proximity привязывает только вблизи и не запирает. */
  scroll-snap-type: y proximity;
}

body {
  margin: 0;
  font-family: var(--font-glass);
  color: var(--marble);
  background: var(--ink);
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* В светлой зоне золотая рамка фокуса на известняке даёт ~2:1 и на золотой
   кнопке пропадает совсем — там метка фокуса тёмная. */
.compare :focus-visible,
.industries :focus-visible,
.order :focus-visible {
  outline-color: var(--ink);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 1rem 1.5rem;
  backdrop-filter: blur(10px);
  /* 0.7, а не 0.35: шапка висит и над светлыми секциями 4–6, где при 0.35
     эффективный фон выходит ~#9AA3AB, и текст мрамором даёт ~2:1 — нечитаемо.
     На 0.7 получается ~7:1 и над светлым, и над тёмным. */
  background: rgba(20, 23, 28, 0.7);
}

.site-header__logo {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Быстрая навигация — только по секциям 4–6. Ярусы 1–3 сюда сознательно не
   входят: они проходятся перелётом по колесу, отдельные ссылки на них
   дублировали бы этот жест и ломали заданный порядок пакетов.
   flex: 1 центрирует панель между лого и переключателем языка, а при
   переносе на узком экране — по всей ширине строки. */
/* Единый указатель, а не три отдельные ссылки — как справочник этажей в
   лобби здания: одна табличка, разделённая волосяными линиями. Читается
   как один предмет и уравновешивает пилюлю переключателя языка справа,
   не соревнуясь с ней формой (та скруглена нацело, эта — плита). */
.site-nav {
  display: flex;
  margin-inline: auto;
  border: 1px solid rgba(244, 241, 234, 0.22);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(244, 241, 234, 0.05);
}

.site-nav__link {
  padding: 0.5rem 1.15rem;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--marble);
  opacity: 0.72;
  border-left: 1px solid rgba(244, 241, 234, 0.16);
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.site-nav__link:first-child { border-left: none; }

.site-nav__link:hover {
  opacity: 1;
  background: rgba(244, 241, 234, 0.09);
}

/* Текущий раздел — той же золотой заливкой, что активный язык в
   переключателе справа (решение пользователя, 06.08.2026). Роль золота
   расширена с «ярус 3 + действия» до «где ты сейчас и на что жмёшь» —
   активные состояния по всей шапке выглядят одинаково. */
.site-nav__link.is-current {
  opacity: 1;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 620px) {
  .site-nav__link {
    padding: 0.45rem 0.7rem;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
  }

  /* Шапка липкая и на телефоне съедала 138px — 21% экрана (замер 08.08.2026,
     жалоба со скриншотом: заголовок первого яруса уезжал под неё). Виновато
     было автоматическое перетекание в ТРИ ряда: логотип, навигация, язык.

     Навигацию отправляем в собственный ряд явно (order + flex-basis), а
     логотип и переключатель языка делят первый — justify-content уже стоит
     space-between в базовом правиле. Два ряда вместо трёх плюс поджатые
     отступы: ~138px → ~80px, и это возвращается на КАЖДОМ экране сайта, а не
     только на первом. */
  .site-header {
    padding: 0.6rem 1rem;
    row-gap: 0.45rem;
  }

  /* Правило сужено через :has до навигации С НЕСКОЛЬКИМИ ссылками. У страниц
     опросника в шапке одна ссылка («Към сайта»), и там первый ряд помещает
     всё — отдельный ряд под единственную кнопку был бы потерей места на
     странице формы. В браузерах без :has (до 2023 г.) правило не применится:
     шапка вернётся к трём рядам, но ничего не сломается. */
  .site-nav:has(.site-nav__link + .site-nav__link) {
    order: 3;
    flex-basis: 100%;
    margin-inline: 0;
  }

  /* Четыре кнопки делят полную ширину поровну — иначе прижались бы влево,
     оставив пустое место справа. */
  .site-nav:has(.site-nav__link + .site-nav__link) .site-nav__link {
    flex: 1;
    text-align: center;
  }
}

.lang-switch {
  display: flex;
  border: 1px solid rgba(244, 241, 234, 0.35);
  border-radius: 999px;
  overflow: hidden;
}

/* Ссылки, а не кнопки: языки — это две отдельные страницы (site/index.html и
   site/en/index.html), а не переключение словаря на лету. Требование
   SITE-BLUEPRINT.md: текст лежит в HTML, иначе поисковик видит одну
   страницу вместо двух. Текущий язык — не ссылка, а span. */
.lang-switch__btn {
  display: block;
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--marble);
  opacity: 0.6;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

a.lang-switch__btn:hover {
  opacity: 1;
  background: rgba(244, 241, 234, 0.09);
}

.lang-switch__btn.is-active {
  opacity: 1;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
}

/* ---------- Progress dots ---------- */

.progress-dots {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: opacity 0.3s ease;
}

/* Точки показывают положение среди ярусов 1–3 и ниже них не значат ничего;
   вдобавок на светлом фоне секций 4–6 они почти не видны. Прячем, как
   только блок ярусов ушёл с экрана (класс ставит app.js). */
.progress-dots.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.progress-dots__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(244, 241, 234, 0.35);
  transition: background 0.3s ease, transform 0.3s ease;
}

.progress-dots__dot.is-active {
  background: var(--gold);
  transform: scale(1.4);
}

@media (max-width: 720px) {
  .progress-dots { display: none; }
}

/* ---------- Tier sections (1–3, здание-параллакс) ---------- */

/* Картинка (724×2172px, ровно 1:3 — три квадратных яруса). Правильная
   нарезка одной картинки на N одинаковых по высоте секций без обрезки и
   без обёрток — background-size в ПРОЦЕНТАХ от высоты самой секции, не
   cover: 300% значит «картинка втрое выше своей секции», а
   background-position top/center/bottom выбирает, какая из трёх третей
   показывается. Секции обязаны быть одной высоты (100vh у всех трёх) —
   это и есть гарантия стыковки, отдельная переменная/JS для синхронизации
   не нужны (были в двух предыдущих, более сложных и багованных версиях
   06.08.2026 — см. project.md).
*/
.tier {
  position: relative;
  /* svh, а не vh: на мобильных 100vh — это высота ВМЕСТЕ с зоной под
     адресной строкой, то есть больше видимой области, и контент уезжает
     под интерфейс браузера. svh считает по наименьшей (когда панели
     показаны) — контент помещается всегда. vh оставлен фолбэком для
     браузеров старше 2022 г. Пропорция 150/100 держится в любых
     единицах, поэтому раскладка картинки по третям не меняется. */
  min-height: 150vh;
  min-height: 150svh;
  background-repeat: no-repeat;
}

/* Ярус 3 — окно контента в НИЖНИХ 100vh секции, а не в верхних. Причина:
   секция 150vh, окно 100vh, и нижние 50vh (там, где у Капитолия лужайка)
   при остановке скролла не показывались вообще — карточку туда нельзя было
   опустить, она уезжала в невидимую зону (жалоба 06.08.2026: «опустить на
   лужайку»). Фон при этом не трогаем: картинка остаётся непрерывной при
   прокрутке, меняется только то, ГДЕ мы останавливаемся. JS целится в
   .tier__viewport, а не в начало секции, поэтому подхватывает это сам. */
.tier--3 .tier__viewport {
  top: auto;
  bottom: 0;
}

/* Окно контента яруса — ровно один экран (100vh) внутри более высокой
   (150vh) секции. Не sticky: при контейнере 150vh и sticky-блоке 100vh
   «запас» прилипания — всего 50vh, дальше контент уезжает как обычный,
   что и сдвигало карточку не на своё место (жалоба 06.08.2026).

   Именно это окно — точка остановки скролла (и для JS-анимации, и для
   CSS-снапа), поэтому его положение внутри секции задаёт кадр, который
   видит посетитель: ярусы 1–2 держат окно у верха секции, ярус 3 — у низа
   (см. .tier--3 выше). Разница между 150vh секции и 100vh окна — это
   дистанция прокрутки для анимации перехода, она не обязана быть видимой
   при остановке. */
.tier__viewport {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 6rem 1.5rem;
}

/* На узком экране ярус 1 не помещается в один экран: заголовок, подзаголовок,
   трио цифр И карточка идут колонкой. Жёсткая height обрезала бы карточку,
   поэтому окно здесь может вырасти — лишнее уходит в те 50svh секции, что
   на десктопе служат дистанцией перелёта, и доступно обычной прокруткой.
   Секция при этом остаётся 150svh, так что раскладка картинки по третям не
   съезжает. Отступы поджаты, чтобы вырастать приходилось пореже. */
@media (max-width: 859px) {
  .tier__viewport {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    gap: 1.25rem;
    /* Верхний отступ обязан быть больше липкой шапки, иначе заголовок первого
       яруса встаёт ПОД неё: было 5.5rem (88px) при шапке 138px — перекрытие
       50px на всех телефонах (замер 08.08.2026). Шапка теперь ~80px, 6rem
       (96px) перекрывает её с зазором, а не встык.

       Промежуток и нижний отступ поджаты, чтобы частично отыграть добавленную
       высоту: первый ярус в один экран телефона всё равно не влезает (одна
       карточка — 476px при 580px доступных), и это принятое решение
       08.08.2026 — ярус выше экрана, но ничего не обрезано и не спрятано. */
    padding: 6rem 1.25rem 2rem;
  }

  .price-card { padding: 1.5rem; }
}

.tier--1 {
  background-image: linear-gradient(var(--scrim), var(--scrim)), url('img/background1.png');
  background-size: 100% 100%, auto 300%;
  background-position: center, top;
}
.tier--2 {
  background-image: linear-gradient(var(--scrim), var(--scrim)), url('img/background1.png');
  background-size: 100% 100%, auto 300%;
  background-position: center, center;
}
.tier--3 {
  background-image: linear-gradient(var(--scrim), var(--scrim)), url('img/background1.png');
  background-size: 100% 100%, auto 300%;
  background-position: center, bottom;
}

@media (min-width: 860px) {
  .tier__viewport { flex-direction: row; justify-content: space-between; max-width: 1200px; margin: 0 auto; }
  .tier__hero { max-width: 46%; }

  /* Вертикальное положение карточки внутри 100vh-окна своего яруса. По
     умолчанию центр (align-items у .tier__viewport); ярусы 2 и 3 опускают
     карточку, чтобы она не наезжала на архитектурный акцент своей трети
     кадра — шпили и купол Капитолия. Только на десктопе: в мобильной
     колонке карточка стоит под текстом и сдвиг не нужен.

     Два разных механизма — намеренно:
     - ярус 2 — сдвиг от центра (`--card-drop`), запас до низа есть;
     - ярус 3 — привязка к НИЗУ окна (`align-self: flex-end`), а не сдвиг.
       Сдвигом её опустить ниже нельзя: окно ровно 100vh, а секция 150vh,
       и всё, что transform выталкивает за 100vh, попадает в невидимую при
       остановке скролла часть секции — карточку резало снизу (жалоба
       06.08.2026). Привязка к низу опускает её максимально и при этом
       гарантирует, что она целиком в кадре. Зазор снизу = padding
       .tier__viewport; чтобы поднять — добавить margin-bottom. */
  .price-card { transform: translateY(var(--card-drop, 0)); }
  .tier--2 .price-card { --card-drop: 7vh; }
  .tier--3 .price-card { align-self: flex-end; }
}

/* ── Тач-устройства: ярусы без «дистанции перелёта» ─────────────────────────
   На тач-устройстве JS-перелёт не работает и работать не может: палец не
   порождает событий wheel. Значит те 50svh, которые на десктопе служат
   дистанцией анимации, здесь не дают ничего — это пустая зона, в которой свайп
   и останавливался.

   Измерено 08.08.2026, iPhone 13 (экран 664px): от точки привязки яруса 2 до
   яруса 3 было 1328px — ровно два экрана, и оба без контента, только фон. Один
   свайп столько не проходит, а `proximity` с такого расстояния не притягивает.
   Отсюда жалоба «свайпаю пальцем, со 2-й карточки до 3-й экран не доходит».

   Поэтому здесь секция равна одному экрану, а окно контента стоит в обычном
   потоке, не absolute. Второе обязательно: ярус 1 на узком экране в один экран
   не влезает (966px контента при 664px экрана), и абсолютное окно уехало бы в
   невидимую зону вместо того, чтобы вырастить секцию.

   Фон из-за этого собирается иначе. Нарезка одной картинки на три трети
   (background-size: auto 300%) требует РАВНЫХ по высоте секций, а секции по
   содержимому равными быть не могут. Поэтому на тач-устройствах — одна
   непрерывная картинка на весь блок .tiers: стык исчезает вместе с самой
   нарезкой.

   Размер именно cover, а не `auto 100%`: при 1:3 ширина картинки равна трети
   её высоты, то есть на телефоне ~765px при экране 390 — закрывает с запасом, а
   вот на широком тач-устройстве (планшет в ландшафте, тач-ноутбук 1440px) вышло
   бы 900px и по бокам появились бы тёмные полосы. cover закрывает всегда; цена —
   на широком экране картинка подрезается сверху и снизу. На телефоне, где и была
   жалоба, по высоте она видна целиком.

   На десктопе с мышью всё остаётся как было — этот блок туда не попадает. */
@media (hover: none), (pointer: coarse) {
  .tiers {
    background-image: linear-gradient(var(--scrim), var(--scrim)), url('img/background1.png');
    background-size: 100% 100%, cover;
    background-position: center, center;
    background-repeat: no-repeat;
  }

  .tier {
    min-height: 100vh;
    min-height: 100svh;
    background-image: none;
  }

  /* top/bottom у .tier--3 при static игнорируются — отдельно гасить не нужно. */
  .tier__viewport {
    position: static;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }
}

/* Шрифт задаётся на контейнере — слоган, подзаголовок и подписи трио цифр
   наследуют его разом. Цифры трио остаются моноширинными: у них своя роль
   (измеренный факт), и она не менялась. */
.tier__hero {
  text-align: left;
  font-family: var(--font-system);
}

/* Главный слоган. Кегль ниже прежнего (было 2–3.2rem): текст стал вдвое
   длиннее — «Не губете клиенти, докато сте заети» это 30 знаков, новый
   слоган около 60, и на прежнем размере он занимал бы половину экрана. */
.tier__slogan {
  font-family: var(--font-slogan);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  /* Montserrat геометричный и в крупном кегле выглядит разреженным —
     подтягиваем межбуквенное, иначе слоган рассыпается на буквы. */
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
}

/* Прежний слоган — теперь вторая строка, мельче главного, но крупнее
   пояснения под ним (по прямому указанию пользователя 07.08.2026). */
.tier__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.tier__subhead {
  font-size: 0.95rem;
  opacity: 0.85;
  max-width: 34ch;
  margin: 0 0 1.75rem;
}

.stat-trio {
  display: flex;
  gap: 2rem;
  margin: 0;
}

.stat-trio__item { min-width: 0; }

.stat-trio__number {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0;
}

.stat-trio__label {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  opacity: 0.75;
  max-width: 12ch;
}

/* ---------- Price cards (glassmorphism, accordion-reveal) ---------- */

/* Один шрифт на все три карточки: они обязаны выглядеть одинаково
   (решение пользователя 06.08.2026). Различаются только цветом кромки и
   заливкой — цвет несёт ярус, типографика больше нет. */
.price-card {
  position: relative;
  font-family: var(--font-capitol);
  width: min(90vw, 380px);
  padding: 2rem;
  border-radius: 20px;
  backdrop-filter: blur(16px);
  background: rgba(244, 241, 234, 0.10);
  border: 1px solid rgba(244, 241, 234, 0.25);
}

/* Кромка холодным стеклом — ярус 1 по плану дизайна (раздел 5 project.md)
   держит акцент --glass, как ярус 2 держит --spire, а ярус 3 --gold. До
   этого токен нигде не применялся, и ярус 1 стоял с нейтральной кромкой. */
.price-card--glass {
  border-color: rgba(169, 199, 214, 0.45);
}
/* Кромка осветлённым --spire, а не стеклом: сам #4B2E63 на тёмной фотографии
   не читается, а стеклянный оттенок (был здесь раньше) теперь занят ярусом 1
   и не различал бы ярусы между собой. */
.price-card--spire {
  background: rgba(75, 46, 99, 0.28);
  border-color: rgba(154, 116, 196, 0.45);
}
.price-card--capitol {
  background: rgba(244, 241, 234, 0.08);
  border: 1px solid var(--gold);
  box-shadow: 0 0 40px rgba(201, 162, 39, 0.15);
}

.price-card__badge {
  position: absolute;
  top: -0.75rem;
  left: 2rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-family: var(--font-glass);
  font-weight: 700;
  background: var(--marble);
  color: var(--ink);
}

.price-card__badge--gold { background: var(--gold); }

.price-card__name {
  margin: 0 0 0.25rem;
  font-size: 1.6rem;
}

.price-card__price {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 800;
}

.price-card--capitol .price-card__price { color: var(--gold); }

.price-card__period {
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.7;
}

.price-card__setup {
  margin: 0.2rem 0 0.6rem;
  font-size: 0.8rem;
  opacity: 0.7;
}

.price-card__subtitle {
  margin: 0 0 1.5rem;
  opacity: 0.85;
}

.feature-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.feature-list li {
  padding-left: 1.4rem;
  position: relative;
}

.feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold);
}

.price-card__cta {
  width: 100%;
  padding: 0.9rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  font-family: var(--font-glass);
  transition: background-color 0.2s ease;
}

/* На тёмных ярусах золото осветляем, а не затемняем: инверсия в --ink,
   как у кнопок светлой зоны, утопила бы кнопку в тёмном фоне. */
.price-card__cta:hover { background: #E0BC3A; }

/* ---------- Accordion-reveal (invariant: readable without JS — base state visible) ---------- */

.accordion-card.js-armed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
}

.accordion-card.js-armed.is-revealed {
  max-height: 2400px;
  opacity: 1;
  /* overflow:hidden (нужен только во время самой анимации раскрытия) обрезал
     бейдж «Популярен избор» — он торчит над карточкой отрицательным top
     (жалоба 06.08.2026). После раскрытия обрезка больше не нужна. */
  overflow: visible;
}

.accordion-card .feature-list li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.accordion-card.is-revealed .feature-list li {
  opacity: 1;
  transform: translateY(0);
}

.accordion-card .feature-list li:nth-child(1) { transition-delay: 0.35s; }
.accordion-card .feature-list li:nth-child(2) { transition-delay: 0.43s; }
.accordion-card .feature-list li:nth-child(3) { transition-delay: 0.51s; }
.accordion-card .feature-list li:nth-child(4) { transition-delay: 0.59s; }
.accordion-card .feature-list li:nth-child(5) { transition-delay: 0.67s; }

.accordion-card .price-card__cta {
  opacity: 0;
  transition: opacity 0.3s ease;
  transition-delay: 0.8s;
}

.accordion-card.is-revealed .price-card__cta { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* transform у самой карточки НЕ сбрасываем: он несёт вертикальный сдвиг
     по ярусу (--card-drop, десктоп), а не анимацию — обнулять его значило
     бы ломать раскладку ради выключения движения. */
  .accordion-card.js-armed {
    transition: none !important;
    max-height: none !important;
    opacity: 1 !important;
  }

  .accordion-card .feature-list li,
  .accordion-card .price-card__cta {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Принудительный snap-scroll может укачивать людей с вестибулярной
     чувствительностью — отключаем вместе с остальной анимацией. */
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}

/* ============ СВЕТЛАЯ ЗОНА (секции 4–6 + подвал) ============ */

/* Запасной путь для той же поправки на липкую шапку, что делает app.js
   (headerOffset): когда JS выключен или стоит prefers-reduced-motion,
   браузер прыгает по якорю сам, и без этого шапка накрыла бы заголовок.
   На scrollTo() из JS не влияет — scroll-margin действует только на
   нативный переход, так что двойного смещения не будет. */
.compare,
.industries,
.order {
  scroll-margin-top: 5rem;
}

/* Надзаголовок разделов светлой зоны — мелкая разрядка, как подпись на
   табличке. Несёт смысл (что это за раздел), а не украшает. */
.section-eyebrow {
  display: block;
  margin: 0 0 0.6rem;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.section-title {
  text-align: center;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 3rem;
  color: var(--ink);
}

/* ---------- Секция 4: сравнение ---------- */

/* Градиент — вход из сумерек в дневной свет. Верх секции подхватывает
   тёмный низ фотографии яруса 3, дальше рассвет до --stone. */
/* Граница тёмной и светлой зон — двойная золотая линия во всю ширину, а не
   градиент (тот выглядел плохо и убран 06.08.2026). Двойная тяга — приём из
   архитектуры и гравировки: так отбивают карниз между этажами, что прямо
   отвечает метафоре здания. Стоит ровно один раз, между ярусом 3 и секцией
   4; остальные стыки светлой зоны в разделителе не нуждаются. */
.compare {
  position: relative;
  padding: 6rem 1.5rem 5rem;
  color: var(--ink);
  background: var(--stone);
  border-top: 2px solid var(--gold);
}

.compare::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
}

.compare__table-wrap {
  max-width: 940px;
  margin: 0 auto;
  overflow-x: auto;
}

/* separate + нулевой border-spacing: нужны скруглённые торцы у колонки
   «Премиум» (collapse их не даёт). */
/* table-layout: fixed — иначе ширина колонок идёт от содержимого, а оно
   разной длины («1 през първия месец» против «по меню»), и кнопки в ячейках
   выходят разной ширины (жалоба 06.08.2026). Здесь три колонки пакетов
   строго равны, ширины заданы в процентах — на любой ширине экрана. */
.compare__table {
  width: 100%;
  min-width: 620px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
}

.compare__table .compare__row-label { width: 34%; }
.compare__table thead th:not(.compare__row-label) { width: 22%; }

.compare__table th,
.compare__table td {
  padding: 0.9rem 1.1rem;
  text-align: center;
  border-bottom: 1px solid var(--stone-line);
}

.compare__table thead th {
  padding-top: 1.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
}

.compare__table th[scope="row"] {
  text-align: left;
  font-weight: 400;
  color: var(--ink-soft);
}

/* Кнопки живут строкой таблицы (tfoot), а не отдельным блоком под ней:
   отдельный блок раскладывался по своей сетке из трёх колонок и не совпадал
   со столбцами пакетов (в таблице колонок четыре — слева ещё названия
   строк), а на узком экране таблица прокручивается вбок, блок кнопок — нет.
   В tfoot они выровнены по построению и уезжают вместе со своим столбцом. */
.compare__table tfoot td {
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: none;
}

.compare__price {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* Есть — заметно, нет — тихо: сканируется взглядом, а не читается. */
.compare__yes { color: var(--gold-deep); font-weight: 700; }
.compare__no { color: var(--stone-line); }

/* СИГНАТУРА светлой зоны: «Премиум» — не подсвеченная колонка, а
   физическая плита, выламывающаяся из сетки таблицы. Белая поверхность
   на известняке, золотая кромка, скруглённые торцы сверху и снизу.
   Тематически — доска-табличка на здании; по делу — Премиум и есть
   целевой пакет для стоматологии и адвокатуры (раздел 5.1 стратегии). */
.compare__col--premium {
  background: var(--surface);
  border-left: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  font-weight: 700;
}

.compare__table thead .compare__col--premium {
  border-top: 1px solid var(--gold);
  border-bottom-color: var(--gold);
  border-radius: 10px 10px 0 0;
}

.compare__table tfoot .compare__col--premium {
  border-bottom: 1px solid var(--gold);
  border-radius: 0 0 10px 10px;
}

.compare__cta {
  width: 100%;
  padding: 0.85rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.compare__cta:hover { background: var(--ink); color: var(--stone); }

.compare__cta--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* Затемнение золота на ховере (было #B8930F) почти не читалось. Инверсия в
   тёмное с золотым текстом — тот же жест, что у соседних кнопок, но
   сохраняет золотую принадлежность премиума. */
.compare__cta--gold:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold);
}

/* ---------- Секция 5: индустрии ---------- */

.industries {
  padding: 5rem 1.5rem;
  color: var(--ink);
  background: var(--stone);
}

.industries__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.25rem;
}

.industry-card--featured {
  grid-row: span 2;
}

/* Плита на известняке: белая поверхность, волосяная кромка, тень как у
   листа бумаги — без «карточного» градиента и без цветных заливок. */
.industry-card {
  background: var(--surface);
  border: 1px solid var(--stone-line);
  border-radius: 14px;
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.industry-card:not(.industry-card--featured):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20, 23, 28, 0.10);
}

.industry-card__title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  color: var(--ink);
}

/* Иконка сегмента. Картинки тёмные, и это сознательно оставлено маленьким
   пятном, а не фоном карточки: тёмное в светлой зоне — роль демо-чата
   (см. комментарий у .chat-shell). Четыре чёрных плиты рядом отняли бы у
   него это отличие, а вместе с ним и внимание к единственной живой вещи
   на странице. Файлы 8–10 КБ webp из исходных PNG по 2,4 МБ. */
.industry-card__icon {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  margin-bottom: 0.9rem;
}

.industry-card__caption {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* 859, а не 860: десктопная раскладка ярусов начинается с min-width: 860px,
   и при ровно 860px оба запроса совпадали бы — ярусы вставали в строку, а
   индустрии оставались в одну колонку. */
@media (max-width: 859px) {
  /* minmax(0, 1fr), а не 1fr: у `1fr` минимум колонки — auto, то есть
     min-content содержимого. Строка ввода в карточке демо (поле + кнопка)
     не сжимается ниже 339px, плюс 56px внутренних отступов карточки — итого
     колонка требовала 395px там, где экран даёт 342, и вся страница
     становилась шире экрана (421px при 390px). Правый край резался у всех
     карточек сегментов сразу, не только у демо. Та же ловушка, что
     min-width: 0 у flex-элементов, — см. .chat-shell__input. */
  .industries__grid { grid-template-columns: minmax(0, 1fr); }
  .industry-card--featured { grid-row: auto; }
}

/* ---------- Chat shell (секция 5, карта стоматология + секция 6) ---------- */

/* Живой ИИ-чат — единственное место, где посетитель не читает про
   технологию, а говорит с ней. Держим его самой «тёмной» вещью светлой
   зоны: тёмное поле разговора на белой плите отличает его от статичных
   карточек-макетов вокруг и цитирует сцену ярусов. */
.chat-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 14px 34px rgba(20, 23, 28, 0.12);
}

.chat-shell__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  margin-bottom: 0.35rem;
}

.chat-shell__title {
  margin: 0;
  font-size: 1.35rem;
  color: var(--ink);
}

.chat-shell__lead {
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}

.chat-shell__hint {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  opacity: 0.85;
}

.chat-shell__body {
  flex: 1;
  min-height: 9rem;
  border-radius: 10px;
  background: var(--ink);
  color: var(--marble);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-shell__placeholder {
  opacity: 0.55;
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}

.chat-shell__input-row {
  display: flex;
  gap: 0.75rem;
}

.chat-shell__input {
  flex: 1;
  /* min-width: 0 обязателен: по умолчанию flex-элемент не сжимается меньше
     собственной ширины поля ввода (~170px), и на узком экране строка
     «поле + кнопка» вылезала бы за край. */
  min-width: 0;
  padding: 0.8rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--stone-line);
  background: var(--stone);
  color: var(--ink);
}

.chat-shell__input::placeholder { color: var(--ink-soft); opacity: 0.8; }
.chat-shell__input:disabled { opacity: 0.6; }

.chat-shell__send {
  padding: 0.8rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.chat-shell__send--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* :not(:disabled) — кнопки чата сейчас выключены (ИИ ещё не подключён),
   реакция на наведение не должна обещать работающее действие. */
.chat-shell__send:not(:disabled):hover {
  background: var(--ink);
  color: var(--gold);
}

.chat-shell__send:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Демо секции 5: живой диалог ---------- */

/* Подпись для скринридера: поля в карточке подписаны только placeholder'ом,
   а он не заменяет <label> — без этого поля остаются безымянными. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Формы диалога переключаются атрибутом hidden из JS, а display: flex ниже
   его перебивает — без этих строк скрытое остаётся на экране. */
.chat-shell__input-row[hidden],
.chat__contacts[hidden] { display: none; }

/* .chat-shell__body центрирует заглушку по обеим осям — ленте нужна колонка
   сверху вниз с прокруткой. Высота ограничена: карточка стоит в сетке
   сегментов и не должна растягивать соседей по мере роста разговора. */
.chat__thread {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem;
  max-height: 17rem;
  overflow-y: auto;
  padding: 1rem;
}

.chat__msg {
  max-width: 85%;
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.45;
  /* Ответы приходят с переносами строк — списком свободных часов в том числе. */
  white-space: pre-wrap;
}

.chat__msg--bot {
  align-self: flex-start;
  background: rgba(244, 241, 234, 0.1);
  border-bottom-left-radius: 4px;
}

.chat__msg--me {
  align-self: flex-end;
  background: var(--gold);
  color: var(--ink);
  border-bottom-right-radius: 4px;
}

.chat__msg--typing {
  opacity: 0.7;
  font-style: italic;
}

/* ── витрина до начала разговора ──────────────────────────────────────
   Пузыри записанного сценария приглушены: это показ возможностей, а не
   разговор, который посетитель вёл. */
.chat__thread--idle { position: relative; }

.chat__msg--ghost { opacity: 0.72; }

/* Подпись стоит в потоке, а не поверх: абсолютной она налезала на последний
   пузырь, а высота ленты зависит от длины реплик и заранее не известна. */
.chat__idle-cta {
  align-self: flex-end;
  margin: 0 0 0.15rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.16);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* Подпись не должна перехватывать клик — по ленте кликают, чтобы начать. */
  pointer-events: none;
}

.chat__thread--idle { cursor: pointer; }

.chat__msg--typing::after {
  content: '…';
  animation: demo-dots 1.2s steps(4, end) infinite;
}

@keyframes demo-dots {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
}

/* Примечания к рекомендации (секция 6): цена старта, оценка правок по меню,
   замечание по сегменту. Не пузырь — это справка о деньгах, а не реплика
   собеседника, и путать их читателю незачем. */
.chat__notes {
  align-self: flex-start;
  max-width: 90%;
  margin: 0;
  padding: 0 0 0 0.85rem;
  list-style: none;
  border-left: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.78rem;
  line-height: 1.45;
  opacity: 0.72;
}

.chat__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Пустой ряд не должен занимать место и добавлять gap карточке. */
.chat__options:empty { display: none; }

/* Подпись занимает всю строку ряда, кнопки переносятся под неё. */
.chat__options-label {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.chat__chip {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--stone-line);
  background: var(--stone);
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.3;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chat__chip:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold);
}

/* Золото на этой странице означает Премиум — так в таблице сравнения
   (.compare__cta--gold), так же и здесь. Рекомендация золотом не помечается:
   один и тот же цвет не может значить «премиум» и «мы советуем» сразу, и
   Базов в золоте читался как премиальный. Рекомендация — подписью над рядом
   (order-chat.js, captionFor). */
.chat__chip--gold {
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 700;
}

/* Тот же жест инверсии, что у соседних кнопок, но золотая принадлежность
   сохраняется — как у .compare__cta--gold:hover. */
.chat__chip--gold:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold);
}

.chat__chip-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

/* Наследует цвет ховера у кнопки — иначе подпись остаётся тёмной на тёмном. */
.chat__chip:hover .chat__chip-sub { color: inherit; opacity: 0.8; }

.chat__contacts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.chat__summary {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.chat__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chat__field {
  /* flex-basis 10rem + min-width: 0 — два поля встают в строку на широкой
     карточке и переносятся на узкой, не вылезая за край (та же причина, что
     у .chat-shell__input). */
  flex: 1 1 10rem;
  min-width: 0;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--stone-line);
  background: var(--stone);
  color: var(--ink);
}

.chat__field::placeholder { color: var(--ink-soft); opacity: 0.8; }

.chat__field--invalid { border-color: var(--error); }

.chat__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

.chat__ghost {
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--stone-line);
  color: var(--ink-soft);
  font-weight: 600;
}

.chat__ghost:hover { border-color: var(--ink); color: var(--ink); }

/* ── подсказка и заметное поле ввода ──────────────────────────────────
   Поле было серым на белом и терялось: посетитель не понимал, что запрос
   печатают именно туда (жалоба 07.08.2026). Белый фон, золотая рамка и
   пульсация до первого касания. */
.chat__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.chat__input {
  background: var(--surface);
  border: 1.5px solid var(--gold);
  box-shadow: 0 1px 0 rgba(20, 23, 28, 0.04);
}

.chat__input::placeholder {
  color: var(--ink-soft);
  opacity: 1;
  font-style: italic;
}

.chat__input:focus { border-color: var(--gold-deep); }

.chat__input--waiting { animation: demo-glow 2.4s ease-in-out infinite; }

@keyframes demo-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
  50% { box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.22); }
}

/* ── шаг назад и сброс ── */

.chat__controls {
  display: flex;
  gap: 1rem;
}

.chat__controls[hidden] { display: none; }

.chat__link {
  padding: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chat__link:hover { color: var(--ink); }

.chat__link[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .chat__msg--typing::after { animation: none; }
  .chat__chip { transition: none; }
  .chat__input--waiting { animation: none; }
}

/* Ниже 860px карточка демо занимает всю ширину экрана, и поле с кнопкой в
   одну строку оставляют полю ~180px — в него не видно, что пишешь. Кнопка
   уходит вниз, поле забирает строку целиком.

   Блок стоит ЗДЕСЬ, а не в общем @media(max-width:859px) выше по файлу:
   там он оказывается раньше правила .chat-shell__input с `flex: 1`, и то
   перебивает flex-basis при равной специфичности. */
@media (max-width: 859px) {
  .chat-shell__input-row { flex-wrap: wrap; }
  .chat-shell__input { flex-basis: 100%; }
  .chat-shell__send { margin-left: auto; }
}

/* ---------- Секция 6: заявка ---------- */

/* 2rem, а не 1rem: при переходе по якорю секция встаёт вплотную под шапку,
   и заголовку нужен воздух под ней. Секции 4–5 сверху отбиты сильнее, там
   это было незаметно. */
.order {
  padding: 2rem 1.5rem 6rem;
  color: var(--ink);
  background: var(--stone);
}

.order__inner {
  max-width: 680px;
  margin: 0 auto;
}

/* Лента здесь выше, чем в карточке сегмента: секция 6 стоит одна во всю
   колонку и соседей по сетке не растягивает, а разговор тут длиннее — до
   пяти вопросов плюс примечания к рекомендации. */
.order .chat__thread { max-height: 22rem; }

.order__alt {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.order__alt a { color: var(--gold-deep); font-weight: 600; }

/* Второй вход в опросник — для тех, кто уже оставил заявку и вернулся позже.
   Первый вход — кнопка в попапе сразу после отправки, третий — ссылка в
   шапке. Все три ведут на одну страницу: она требует номер заявки, и лишний
   раз объяснять это не нужно. */
.order__brief {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.order__brief-link {
  color: var(--gold-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Попап после отправленной заявки ---------- */

/* Номер заявки — половина ключа к опроснику. Модалка нужна не ради эффекта, а
   чтобы номер нельзя было пролистать мимо, как строку в ленте разговора. */
.done {
  width: min(30rem, calc(100vw - 2rem));
  padding: 1.75rem;
  border: 1px solid var(--gold);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 18px 44px rgba(20, 23, 28, 0.28);
}

.done::backdrop {
  background: rgba(20, 23, 28, 0.55);
}

.done__title {
  margin: 0 0 1rem;
  font-size: 1.35rem;
}

/* Определения парами «подпись — значение»: подпись мелкая и приглушённая,
   значение читается. Номер заявки — самое крупное на этом экране. */
.done__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

.done__facts dt {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.done__facts dd {
  margin: 0;
}

.done__facts strong {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
}

.done__lead {
  margin: 0 0 1.5rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.done__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.done__field {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--stone-line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
}

.done__field:focus { border-color: var(--gold-deep); outline: none; }
.done__field::placeholder { color: var(--ink-soft); opacity: 0.7; }
.done__field--invalid { border-color: var(--error); }

.done__error {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--error);
}

.done__error[hidden] { display: none; }

/* Подтверждение, что номер записан. Вся строка кликабельна: попасть в сам
   квадратик на телефоне заметно труднее, чем в текст рядом. */
.done__confirm {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1.25rem 0 1.5rem;
  font-size: 0.88rem;
  line-height: 1.45;
  cursor: pointer;
}

.done__confirm input {
  margin-top: 0.15rem;
  accent-color: var(--gold-deep);
  flex-shrink: 0;
}

.done__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}

.done__cta,
.done__ghost {
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.done__cta {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--ink);
}

.done__cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold);
}

.done__ghost {
  background: transparent;
  border: 1px solid var(--stone-line);
  color: var(--ink-soft);
}

.done__ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Кнопка-ссылку нельзя выключить атрибутом disabled — гасим её так же, как
   выключенную кнопку, и снимаем клик. */
.done__cta.is-locked,
.done__ghost:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.done__cta.is-locked { pointer-events: none; }

.done__ghost:disabled:hover {
  border-color: var(--stone-line);
  color: var(--ink-soft);
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: var(--stone);
  border-top: 1px solid var(--stone-line);
}

/* ---------- Страница опросника (site/brief/) ---------- */

/* Отдельная страница без здания, ярусов и параллакса: здесь работают, а не
   продают. Из общего с лендингом — только шапка, подвал и токены. */
.brief-page {
  background: var(--stone);
  color: var(--ink);
}

.brief {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

.brief__card {
  padding: 2rem;
  border: 1px solid var(--stone-line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(20, 23, 28, 0.08);
}

.brief__card[hidden] { display: none; }

.brief__title {
  margin: 0.35rem 0 0.75rem;
  font-size: 1.5rem;
}

.brief__lead {
  margin: 0 0 1.5rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.brief__lead a { color: var(--gold-deep); font-weight: 600; }

.brief__hello {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.brief__head { margin-bottom: 1.5rem; }

.brief__gate-form,
.brief__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Вопрос, подсказка и поле держатся вместе: между вопросами разрыв заметно
   больше, чем внутри одного. Иначе форма читается как сплошная лента полей. */
.brief__row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--stone-line);
}

.brief__row:last-child { border-bottom: none; }

.brief__row--invalid .brief__field,
.brief__row--invalid .brief__choices {
  border-color: var(--error);
}

.brief__label {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
}

.brief__required { color: var(--gold-deep); }

.brief__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Пояснение ко всему блоку: почему здесь не просят загружать файлы, почему
   про дизайн спрашивают своими словами. Отбито полосой, чтобы не путалось с
   подсказкой к отдельному полю. */
.brief__note {
  margin: 0 0 0.5rem;
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--gold);
  background: var(--stone);
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Итог опроса: единственная строка на финальном экране, которую человек
   действительно ищет глазами. */
.brief__plan {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: var(--surface);
  font-size: 1.05rem;
}

.brief__plan strong {
  font-size: 1.2rem;
  color: var(--gold-deep);
}

.brief__plan-price {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.brief__field {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--stone-line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
}

.brief__field:focus { border-color: var(--gold-deep); outline: none; }

.brief__field::placeholder { color: var(--ink-soft); opacity: 0.7; }

textarea.brief__field { resize: vertical; min-height: 4.5rem; }

.brief__field--other { margin-top: 0.35rem; }

.brief__choices {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border: 1px solid transparent;
  border-radius: 10px;
}

/* Вся строка — область нажатия, а не только сам кружок: на телефоне попасть
   в 16 пикселей радиокнопки заметно труднее, чем в строку текста. */
.brief__choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.4;
  cursor: pointer;
}

.brief__choice:hover { background: var(--stone); }

.brief__choice input {
  margin-top: 0.2rem;
  accent-color: var(--gold-deep);
  flex-shrink: 0;
}

.brief__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.5rem;
}

.brief__cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.92rem;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.brief__cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold);
}

/* «Напред» уезжает вправо, «Назад» и «за по-късно» остаются слева: движение
   вперёд и отступление не должны стоять вплотную. */
.brief__actions .brief__cta { margin-left: auto; }

.brief__ghost {
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--stone-line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.88rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.brief__ghost:hover { border-color: var(--ink); color: var(--ink); }

.brief__ghost[hidden] { display: none; }

.brief__error,
.brief__saved {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}

.brief__error { color: var(--error); }
.brief__saved { color: var(--gold-deep); }

.brief__error[hidden],
.brief__saved[hidden] { display: none; }

@media (max-width: 480px) {
  .brief { padding: 1.5rem 1rem 3rem; }
  .brief__card { padding: 1.25rem; }
  /* На узком экране кнопки встают в столбец, и «Напред» должен быть широким,
     а не прижатым к правому краю. */
  .brief__actions .brief__cta { margin-left: 0; width: 100%; }
  .brief__ghost { flex: 1; }
}