/*
 * Стили блоков — «Ва-банк Шоу».
 * Общий язык: зернистый фиолетовый градиент на фоне (grainient.js),
 * полупрозрачные графитовые карточки поверх него, тонкая линия в покое
 * и подъём с фиолетовой рамкой при наведении. Единственный акцент — фиолет.
 */

/* ============ 00 шапка — плавающая капсула ============ */

.header {
  position: sticky; top: 0; z-index: var(--z-header);
  padding: 14px 0 0;
}
.header .wrap { max-width: 1180px; }
.header__in {
  display: flex; align-items: center; gap: var(--gap-sm);
  padding: 10px 10px 10px 26px;
  background: var(--stage-glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: var(--border-2);
  border-radius: var(--radius-pill);
  box-shadow: var(--glow-soft);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header.is-scrolled .header__in { background: rgba(10, 10, 12, .92); border-color: var(--ink-line-2); }

.header__brand {
  display: inline-flex; align-items: center;
  text-decoration: none; margin-right: auto; white-space: nowrap;
}
.header__logo { display: block; height: 26px; width: auto; }
/* разделитель после логотипа: панель читается как набор секций */
.header__brand::after {
  content: ''; width: 1px; height: 26px; margin-left: 22px;
  background: var(--ink-line);
}
.header__phone {
  text-decoration: none; white-space: nowrap; font-size: var(--fs-sm);
  color: var(--ink-1); padding: 0 4px; transition: color var(--dur) var(--ease);
}
.header__phone:hover { color: var(--signal-2); }

/* Мобильный ряд контактов — на десктопе всегда скрыт, десктоп берёт
   свои ТГ/MAX из .no-mobile спанов выше, эта разметка их не касается. */
.header__social { display: none; }

.header__cta {
  /* заливка и обводка по наведению — общие для всех .btn, см. base.css */
  padding: 11px 11px 11px 22px; gap: 12px;
  white-space: nowrap;
}
.header__cta::after {
  content: ''; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5 8.5 3.5M4.6 3.5h3.9v3.9' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat,
    rgba(255, 255, 255, .2);
  transition: transform var(--dur) var(--ease);
}
.header__cta:hover::after { transform: translate(2px, -2px); }

@media (max-width: 699px) {
  /* Три колонки вместо десктопного flex-ряда: лого — контакты ровно
     по центру — кнопка. .header__phone и старые .no-mobile спаны
     скрыты и в раскладке не участвуют. */
  .header { padding-top: 0; }
  .header__in {
    padding: 8px 8px 8px 18px;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    border-radius: 0;
  }
  .header__brand { margin-right: 0; }
  /* полный номер тесно рядом с CTA — на мобильном звонок через иконку в .header__social */
  .header__phone { display: none; }
  .header__social {
    display: flex; justify-content: center; align-items: center; gap: 8px;
  }
  .header__social .ico { width: 30px; height: 30px; }
  /* та же доля кружка, что и на десктопе (22px в 42px) — иначе пиктограмма
     упирается в обводку */
  .header__social .ico__glyph { width: 16px; height: 16px; }
  .header__cta   { padding: 7px 12px; font-size: 11px; }
  /* без стрелки текст один в кнопке — кружок с ней тут лишний */
  .header__cta::after { display: none; }
  /* в два раза меньше десктопных 26px — на телефоне логотип был крупнее шапки */
  .header__logo  { height: 13px; }
}
@media (max-width: 380px) {
  .header__logo { height: 10px; }
  .header__cta  { padding: 6px 10px; font-size: 10px; }
}

/* ============ 01 первый экран ============ */

.hero {
  position: relative;
  padding-top: clamp(28px, 5vw, 56px); padding-bottom: clamp(48px, 8vw, 96px);
  overflow-x: clip; /* было overflow:clip — вертикальный клип резал фон-фото раньше, чем оно доходило до ленты */
}

/* Фото первого экрана тянется не только на высоту hero, но и дальше вниз —
   через отступ hero и margin-top ленты (.ticker), той же формулой, что
   задаёт эти отступы — и упирается ровно в её начало, а не обрывается
   раньше с пустотой между ними. Диагональ внизу — те же -3deg, что и
   наклон самой ленты (.ticker { rotate: -3deg }): фон будто перетекает
   в неё, а не обрывается прямой линией.
   Зерно из grainient.js — это отдельный WebGL-слой на всю страницу
   (base.css), а не текстура на этой картинке: здесь та же насечка
   продублирована лёгким SVG-шумом поверх фото, чтобы обе части фона
   читались одной фактурой. */
.hero::before {
  content: '';
  position: absolute; left: 0; right: 0; z-index: -2; /* z-index — целое число, дробного -2.5 не существует; тот же -2, что у фишки, но фишка добавляется в DOM позже скриптом и потому побеждает при равенстве, а grainient (-3) фон всё равно перебивает числом */
  top: calc(-1 * var(--header-h)); /* дотягиваем и до пространства под шапкой */
  bottom: calc(-1 * (clamp(48px, 8vw, 96px) + clamp(30px, 3.2vw, 120px)));
  background:
    linear-gradient(180deg, rgba(6, 3, 10, .35) 0%, rgba(6, 3, 10, .55) 75%, rgba(6, 3, 10, .8) 100%),
    url('../img/hero-bg.png') center 30% / cover no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), 0 100%);
}
.hero::after {
  content: '';
  position: absolute; left: 0; right: 0; z-index: -2;
  top: calc(-1 * var(--header-h));
  bottom: calc(-1 * (clamp(48px, 8vw, 96px) + clamp(30px, 3.2vw, 120px)));
  opacity: .5; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), 0 100%);
}
/* Телефон: блок выше ширины, и cover раздувал кадр по высоте — видна была
   только середина. Фото прижато к верху и занимает 56% высоты слоя, но не
   меньше 57vw — иначе на широком телефоне у картинки 16:9 появились бы щели
   по бокам. Низ слоя (фото, затемнение и зерно) маской уходит в прозрачность
   ровно к нижнему краю фото — ниже виден обычный фон страницы, без стыка. */
@media (max-width: 699px) {
  .hero::before,
  .hero::after {
    -webkit-mask-image: linear-gradient(180deg, #000 36%, transparent 56%);
    mask-image: linear-gradient(180deg, #000 36%, transparent 56%);
  }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(6, 3, 10, .35) 0%, rgba(6, 3, 10, .55) 75%, rgba(6, 3, 10, .8) 100%),
      url('../img/hero-bg.png') center top / auto max(56%, 57vw) no-repeat;
  }
}

.hero__in {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

/* Кнопка и приписка под ней стоят в одной строке — как в макете.
   Разметка при этом не меняется: раскладку держит грид по областям. */
.hero__text {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'geo     geo'
    'title   title'
    'sub     sub'
    'bullets bullets'
    'cta     fine';
  align-items: center;
  justify-items: start;
}
/* Видео не загружено — правой колонки нет, и делить ширину не с кем.
   Иначе заголовок остаётся в половине экрана и на крупном кегле ломается
   на лишнюю строку. */
.hero--solo .hero__in { grid-template-columns: minmax(0, 1fr); }

.hero__geo     { grid-area: geo; }
.hero__h1      { grid-area: title; }
.hero__sub     { grid-area: sub; }
.hero__bullets { grid-area: bullets; }
.hero__cta     { grid-area: cta; }
.hero__fine    { grid-area: fine; }

.hero__geo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink-1); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 9px 20px 9px 14px;
  border: var(--border); border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .02);
  margin-bottom: 28px;
}
.hero__pin {
  width: 13px; height: 13px; flex: none;
  background-color: #fff; box-shadow: 0 0 10px 2px var(--signal-line);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Заголовок: металлический белый и акцентная часть в пурпуре.
   Градиент по тексту, поэтому свечение даёт drop-shadow, а не text-shadow. */
.hero__h1 {
  text-transform: uppercase;
  margin: 0 0 26px;
  font-size: clamp(40px, 4.9vw, 82px);
  line-height: .95;
  background: linear-gradient(178deg, #ffffff 0%, #ffffff 42%, #ddd7e8 72%, #a49cb6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 14px 40px rgba(0, 0, 0, .55));
}
.hero__h1 .accent {
  background: linear-gradient(180deg, #e07dff 0%, #a21ce8 55%, #6d13a0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Два названия формата печатаются по очереди на одном месте
   (см. heroSwap в app.js). Оба слова лежат невидимыми распорками в той
   же ячейке грида: ячейка держит ширину по самому широкому и высоту по
   строке, поэтому заголовок не дёргается на каждой букве и не схлопывается,
   когда слово стёрто до конца. */
.hero__type { display: grid; justify-items: start; }
.hero__type-size,
.hero__type-line { grid-area: 1 / 1; }
.hero__type-size { visibility: hidden; }

/* Каретка. Заливку текста задаём явно: в заголовке она прозрачная —
   буквы там красит градиент через background-clip. Моргаем видимостью,
   а не прозрачностью: opacity создало бы свой слой внутри маски. */
.hero__type-caret {
  -webkit-text-fill-color: var(--signal-2);
  color: var(--signal-2);
  font-weight: 300;
  animation: caret 1.05s step-end infinite;
}
@keyframes caret { 0% { visibility: visible; } 50% { visibility: hidden; } }

/* balance выравнивает длину строк. Без него на широкой колонке перенос
   вставал внутрь числа — «от 6 / 000 ₽»; такой разрыв даёт крайне
   неравные строки, и balance его не выбирает. Браузеры постарше
   свойство игнорируют и переносят как раньше. */
.hero__sub {
  color: var(--ink-1);
  margin-bottom: 36px;
  max-width: 46ch;
  text-wrap: balance;
}

/* Буллиты — капсулы в стиле гео-метки (.hero__geo): тонкая рамка, мелкий
   капс и компактная белая иконка под смысл пункта: искра — «формат
   особенный», геометка — «площадка гибкая» (свой лофт или выезд).
   Пункты hero фиксированы по порядку, поэтому адресуем по nth-child.
   Глиф — маска на отдельном слое (.hero__bullet-ic::before). */
.hero__bullets { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.hero__bullets li {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink-1); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 9px 20px 9px 14px;
  border: var(--border); border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .02);
}
.hero__bullet-ic { position: relative; flex: none; width: 13px; height: 13px; }
.hero__bullet-ic::before {
  content: ''; position: absolute; inset: 0;
  background-color: #fff;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}
.hero__bullets li:nth-child(1) .hero__bullet-ic {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 1 10.6 6.4 16 8 10.6 9.6 9 15 7.4 9.6 2 8 7.4 6.4z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hero__bullets li:nth-child(2) .hero__bullet-ic {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 16c0 0 5.5-5.7 5.5-9.5a5.5 5.5 0 1 0-11 0c0 3.8 5.5 9.5 5.5 9.5z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='6.5' r='2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}

.hero__cta {
  /* заливка и обводка по наведению — общие для всех .btn, см. base.css */
  padding: 10px 10px 10px 30px;
  gap: 16px;
  font-size: var(--fs-base);
}
.hero__cta::after {
  content: ''; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M4 9h10M9.5 4.5 14 9l-4.5 4.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat,
    rgba(255, 255, 255, .18);
  transition: transform var(--dur) var(--ease);
}
.hero__cta:hover::after { transform: translateX(3px); }

.hero__fine { color: var(--ink-2); margin: 0 0 0 24px; max-width: 26ch; line-height: 1.4; }

/* Медиа в рамке-«экране»: подсвеченный кант вместо обычной обводки */
.hero__media {
  position: relative;
  padding: 10px;
  border-radius: 28px;
  border: 1px solid rgba(162, 28, 232, .35);
  background: linear-gradient(158deg, rgba(162, 28, 232, .28), rgba(255, 255, 255, .04) 45%, rgba(255, 255, 255, .02));
  box-shadow: 0 40px 110px -35px rgba(162, 28, 232, .55);
}
.hero__media video, .hero__media .ph {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--stage-0);
  border-radius: 20px; border: 0;
}

@media (max-width: 999px) {
  /* на телефоне видео поднимается выше буллитов: картинка удерживает лучше списка */
  .hero__in   { grid-template-columns: 1fr; gap: var(--gap); }
  .hero__text { display: contents; }
  /* Дети всплыли в .hero__in, но именованные области остались от десктопа.
     Здесь таких областей нет, и грид складывает все элементы в одну ячейку
     друг на друга — сбрасываем, порядок дальше держит order. */
  .hero__text > * { grid-area: auto; }
  .hero__geo    { order: 1; }
  .hero__h1     { order: 2; max-width: none; }
  .hero__sub    { order: 3; }
  .hero__media  { order: 4; }
  .hero__bullets{ order: 5; }
  .hero__cta    { order: 6; justify-self: stretch; }
  .hero__fine   { order: 7; margin: 14px 0 0; max-width: none; }
}
@media (max-width: 699px) {
  /* подзаголовок светлее серого --ink-1 и ближе к заголовку; стоит ниже
     базовых .hero__h1 / .hero__sub, иначе они перебили бы его по порядку */
  .hero__h1  { margin-bottom: 8px; }
  .hero__sub { color: #d6d4dc; }
  /* приписка под кнопкой — белая, ближе к ней и по центру под ней */
  .hero__fine { color: #fff; margin-top: 4px; justify-self: stretch; text-align: center; }
  /* текст пилюль светлее серого --ink-1, в тон подзаголовку */
  .hero__bullets li { color: #d6d4dc; }
}

/* ============ 02 бегущая строка — диагональная неоновая лента ============ */

/* Лента идёт наискось. Наклон висит на секции, а не на дорожке: дорожку
   двигает keyframes через transform, и поворот там был бы стёрт первым же
   кадром. Отсюда же отдельное свойство rotate, а не transform.

   Ширина больше экрана и вынесена в отрицательные поля: у повёрнутой
   полосы углы уходят внутрь кадра, и по краям остались бы треугольные
   прорехи. Горизонтальную полосу прокрутки от этого гасит overflow-x:
   clip на body — см. base.css.

   Вертикальные поля не декоративные: поворот не меняет раскладку, поэтому
   поднявшийся край наезжал бы на соседние блоки. Нужный зазор — половина
   ширины на синус угла, ~2.8vw, поля берём с запасом. */
.ticker {
  position: relative;
  height: auto; padding: 22px 0;
  width: 106vw;
  margin: clamp(30px, 3.2vw, 120px) -3vw;
  rotate: -3deg;
  border-top: var(--border); border-bottom: var(--border);
  background: rgba(0, 0, 0, .45);
  overflow: hidden;
  display: flex; align-items: center;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker var(--ticker-speed) linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__list { display: flex; }
.ticker__item {
  padding: 0 24px; white-space: nowrap; position: relative;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(16px, 1.9vw, 24px); text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink-1);
}
.ticker__item:nth-child(4n+3) { color: var(--signal); }
.ticker__item::after {
  content: ''; position: absolute; right: -2px; top: 50%; translate: 0 -50%;
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink-2);
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 699px) {
  /* Под лентой было ~94px пустоты: 30px её поля и 64px отступа следующей
     секции. Поле ленты не меньше ~11px — на столько поднимается край
     повёрнутой на -3deg полосы, иначе она наедет на секцию. */
  .ticker { padding: 22px 0; margin-bottom: 16px; }
  .ticker__item { font-size: 18px; }
  /* на 10% быстрее: время прохода из админки делим на 1.1 */
  .ticker__track { animation-duration: calc(var(--ticker-speed) / 1.1); }
  .ticker + .section { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Без анимации лента переносится на несколько строк и становится
     высокой — наклонённая, она перекрыла бы соседние блоки. */
  .ticker { height: auto; padding: 12px 0; rotate: none; width: auto; margin: 0; }
  .ticker__track { animation: none; width: 100%; flex-wrap: wrap; }
  .ticker__list { flex-wrap: wrap; }
  .ticker__list[aria-hidden="true"] { display: none; }
}

/* ============ 03 как проходит шоу ============
   Слева — заголовок, шаги и кнопка; справа — тезис и галерея-гармошка.
   Активный шаг раскрывает свою карточку. */

.how__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  /* Тезис стоит под списком шагов, перед кнопкой; правая верхняя ячейка
     пустая, галерея по-прежнему занимает строки со шагами и кнопкой. */
  grid-template-areas:
    'head   .'
    'steps  gallery'
    'thesis gallery'
    'cta    gallery';
  align-items: start;
  column-gap: clamp(32px, 5vw, 96px);
  row-gap: 0;
}

.how__head    { grid-area: head; margin-bottom: 56px; }
.how__thesis  { grid-area: thesis; justify-self: start; text-align: left; }
/* отступ от списка шагов — только на ПК, мобильная версия заморожена */
@media (min-width: 1100px) { .how__thesis { margin-top: 28px; } }
.how__steps   { grid-area: steps; }
.how__cta-row { grid-area: cta; margin-top: 56px; }
.how__gallery { grid-area: gallery; }

/* заголовок ломается по предложениям, а не по ширине колонки */
.how__title { font-size: clamp(28px, 2.9vw, 44px); }
.how__sub {
  margin-top: 20px;
  font-size: var(--fs-h3); font-weight: var(--fw-medium);
  color: var(--ink-1);
}

.how__thesis {
  max-width: 34ch;
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  line-height: 1.35; color: var(--ink-0);
}

/* ---- шаги ---- */

.how__steps { display: flex; flex-direction: column; gap: 6px; }
.how__step-btn {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
  width: 100%; padding: 6px 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  color: #fff;
  transition: color var(--dur) var(--ease);
}
.how__num {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--ink-line-2); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-1);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.how__txt {
  padding-top: 11px;
  font-size: var(--fs-base); line-height: 1.35;
  color: inherit;
  transition: font-weight var(--dur) var(--ease);
}
.how__step-btn:hover .how__num { border-color: var(--ink-line-2); color: var(--ink-0); }

/* невыбранные шаги белые, выбранный — фиолетовый и чуть плотнее */
.how__step.is-active .how__step-btn { color: var(--signal-2); }
.how__step.is-active .how__num { border-color: var(--signal); color: var(--signal-2); }
.how__step.is-active .how__txt { font-weight: var(--fw-medium); }

/* ---- галерея-гармошка ---- */

.how__gallery {
  display: flex; gap: 12px;
  height: clamp(380px, 42vw, 500px);
  align-self: start;
}
.how__card {
  position: relative;
  flex: 0 1 96px;
  min-width: 76px;
  margin: 0;
  border-radius: var(--radius);
  background: var(--stage-2);
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow .55s var(--ease-out), flex-basis .55s var(--ease-out), background .45s var(--ease);
}
.how__card.is-active {
  flex: 1 1 46%;
  background: var(--stage-4);
}
.how__card-num {
  position: absolute; top: 18px; left: 20px; z-index: 2;
  font-size: var(--fs-lead); font-weight: var(--fw-medium);
  color: var(--ink-1);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .65);
  transition: color var(--dur) var(--ease);
}
.how__card.is-active .how__card-num { color: #fff; }
.how__card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Сжатая карточка видна, но гаснет экспозицией, а не прозрачностью —
     сквозь полупрозрачное фото просвечивали фон и 3D-фишка. */
  filter: brightness(.45); transition: filter .5s var(--ease);
}
.how__card.is-active .how__card-img { filter: brightness(1); }

/* Подпись дублирует текст шага — на экране она лишняя, но нужна тем,
   кто читает карточку скринридером в отрыве от списка шагов. */
.how__card-cap {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 1099px) {
  .how__in {
    grid-template-columns: 1fr;
    grid-template-areas: 'head' 'thesis' 'gallery' 'steps' 'cta';
  }
  .how__head { margin-bottom: 28px; }
  .how__thesis { justify-self: start; text-align: left; margin-bottom: 40px; }
  .how__gallery { height: 320px; margin-bottom: 40px; }
  .how__cta-row { margin-top: 32px; }
}
@media (max-width: 699px) {
  /* Тезис уезжает из шапки блока вниз, вплотную к кнопке: в одну колонку он
     читается как подводка к действию, а не как оторванная строка под
     заголовком. Разметку не трогаем — порядок держит грид. */
  .how__in { grid-template-areas: 'head' 'gallery' 'steps' 'thesis' 'cta'; }
  .how__thesis { margin: 26px 0 0; }
  .how__cta-row { margin-top: 20px; }

  /* на телефоне гармошка не читается: карточки становятся лентой со скроллом */
  .how__gallery {
    height: 260px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(var(--gutter) * -1) 16px; padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .how__gallery::-webkit-scrollbar { display: none; }
  /* в ленте гармошка не нужна: все карточки одной ширины, листаются пальцем */
  .how__card, .how__card.is-active { flex: 0 0 72%; scroll-snap-align: center; }
  .how__card-cap { opacity: 1; transform: none; }
  .how__cta-row .btn { width: 100%; }
}

/* ============ 04 реквизит — сбитая по высоте лента ============ */

.props__item {
  display: grid; gap: 16px;
  transition: transform var(--dur-slow) var(--ease);
}
.props__item:nth-child(2n) { transform: translateY(30px); }
.props__img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius); border: var(--border);
  transition: transform var(--dur-slow) var(--ease), border-color var(--dur) var(--ease);
}
.props__item:hover .props__img { transform: scale(1.045); border-color: var(--signal-line); }

@media (max-width: 1099px) { .props__item:nth-child(2n) { transform: none; } }

/* ============ 05 лофт — план помещения, а не зеркальный сплит ============ */

/* Мобильный порядок сперва: заголовок → видео как крючок → где это и
   сколько залов → что внутри и бронь. На широком экране те же четыре
   блока встают в три колонки по смыслу, а не по алфавиту макета:
   «где» / «доказательство» / «что и как забронировать». */
.loft__grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  grid-template-areas: 'head' 'media' 'rooms' 'info';
}
.loft__head  { grid-area: head; }
.loft__rooms { grid-area: rooms; }
.loft__media { grid-area: media; }
.loft__info  { grid-area: info; }

@media (min-width: 1100px) {
  .loft__grid {
    grid-template-columns: .82fr 1.24fr .94fr;
    column-gap: 36px;
    align-items: start;
    grid-template-areas:
      'head  head   head'
      'rooms media  info';
  }
  .loft__head { max-width: 62ch; margin-bottom: 8px; }
  /* видео сбито вниз относительно колонок текста — это и ломает
     зеркальную симметрию старой сетки, оставаясь на своей полосе */
  .loft__media { margin-top: 52px; }
}

@media (max-width: 699px) {
  /* Кегль привязан к ширине экрана, чтобы подзаголовок с названием лофта
     ложился в одну строку и «Аурум» не свисал отдельно. balance — страховка:
     если строку всё же перенесёт (узкий экран, текст правили в админке),
     она разделится поровну, а не оставит одно слово внизу. */
  .loft__head .section__sub {
    font-size: clamp(14px, 4.5vw, var(--fs-lead));
    text-wrap: balance;
  }
}

.loft__geo {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink-1); font-size: var(--fs-sm);
  padding: 8px 18px 8px 12px; margin: 22px 0 26px;
  border: var(--border); border-radius: var(--radius-pill);
}

/* Залы — таблички на дверях одного лофта: номер у каждой карточки —
   это буквально номер помещения, не шаг процесса. Тонкий штрих слева
   держит их визуально «под одной крышей» с адресом наверху. */
.loft__halls { position: relative; display: flex; flex-direction: column; gap: 12px; }
.loft__halls::before {
  content: '';
  position: absolute; left: 13px; top: 6px; bottom: 6px;
  width: 1px;
  background: linear-gradient(var(--ink-line-2), transparent 88%);
}
.loft__halls li {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: 14px;
  border-radius: var(--radius); padding: 15px 18px 15px 12px;
  font-size: var(--fs-sm); color: var(--ink-1);
}
/* телефон: текст залов белый; номер зала красится своим цветом ниже */
@media (max-width: 699px) { .loft__halls li { color: #fff; } }
.loft__hall-tag {
  flex: none; margin-top: 1px;
  display: grid; place-items: center;
  width: 25px; height: 25px;
  border-radius: 7px;
  border: 1px solid var(--signal-line);
  background: var(--signal-dim);
  color: var(--signal-2);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
}

.loft__inside-title { font-family: var(--font-display); font-weight: 600; margin-bottom: 14px; font-size: var(--fs-h3); }
.loft__inside { display: grid; gap: 10px; margin-bottom: 30px; }
.loft__inside li { padding-left: 22px; position: relative; color: var(--ink-1); }
.loft__inside li::before { content: ''; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: var(--signal); }

.loft__badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--signal-line); border-radius: var(--radius-pill);
  padding: 10px 20px; margin-bottom: 32px; font-size: var(--fs-sm);
  color: var(--signal-2); background: var(--signal-dim);
}
.loft__cta { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
.loft__cta .btn { flex: 1 1 200px; }
.loft__cta--row { display: none; }

/* ПК: кнопки брони — не в правой колонке, а строкой под залами и фото.
   Обёртка растворяется (display: contents), и каждая кнопка встаёт в свою
   колонку сетки: «Забронировать лофт» — под залами, «Заказать на выезд» —
   под фото, по его левому краю. Обе кнопки одной длины. Правая колонка
   тянется на обе строки. Стоит ниже базового .loft__cta, иначе тот
   перебил бы display по порядку. */
@media (min-width: 1100px) {
  .loft__grid {
    grid-template-areas:
      'head  head   head'
      'rooms media  info'
      'cta1  cta2   info';
  }
  .loft__info .loft__cta { display: none; }
  .loft__cta--row { display: contents; }
  .loft__cta--row .btn { justify-self: start; width: 270px; }
  .loft__cta--row .btn:nth-child(1) { grid-area: cta1; }
  .loft__cta--row .btn:nth-child(2) { grid-area: cta2; }
}

/* видео — центр композиции: тонкая паспарту-рамка отдельным слоем,
   не касается самого кадра, но держит его как «доказательство» */
.loft__media { position: relative; }
.loft__media::before {
  content: '';
  position: absolute; inset: -14px;
  border: 1px solid var(--signal-line);
  border-radius: calc(var(--radius-lg) + 12px);
  pointer-events: none;
}

.vplay { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: var(--border-2); }
.loft__photo {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-lg); border: var(--border-2); background: var(--c-fill);
}
.vplay__video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--c-fill); }

/* Слайд-шоу лофта — кадры уложены друг на друга и меняются кроссфейдом
   (js-loft-slides в app.js). В момент смены по контуру плашки один раз
   пробегает неоновая дуга — отдельный слой поверх кадра, а не рамка
   самой плашки: подсветку можно погасить, не трогая border фото. */
.loft__slides {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: var(--border-2); background: var(--c-fill);
  aspect-ratio: 16 / 9;
}
.loft__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.loft__slide.is-active { opacity: 1; }

.loft__slides-trace { position: absolute; inset: -1px; z-index: 2; border-radius: inherit; pointer-events: none; }
.loft__slides-trace::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--trace-a, 0deg),
    transparent 0deg, transparent 300deg,
    var(--signal) 328deg, #fff 344deg, var(--signal-2) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
}
/* Дуга длиннее интервала между фото (app.js держит смену на 2s) — она
   не обязана укладываться в один цикл, JS убирает класс только когда
   круг реально дорисован (по animationend), не по таймеру. */
.loft__slides.is-tracing .loft__slides-trace::before { opacity: 1; animation: loft-trace 3.4s linear; }

@property --trace-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes loft-trace { to { --trace-a: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .loft__slide { transition: none; }
  .loft__slides-trace::before { animation: none !important; opacity: 0 !important; }
}
.vplay__btn {
  position: absolute; inset: 0; margin: auto;
  width: 86px; height: 86px; border-radius: 50%;
  background: rgba(9, 12, 24, .55); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, .55); cursor: pointer;
  display: grid; place-items: center; font-size: 0; color: transparent;
}
.vplay__btn::before {
  content: ''; width: 0; height: 0; margin-left: 4px;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.vplay__btn::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid var(--signal-line); animation: playPulse 2.6s ease-out infinite;
}
.vplay.is-playing .vplay__btn { display: none; }
@keyframes playPulse { 0% { transform: scale(.88); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }

/* ============ 06 квиз — стеклянная карта ============ */

/* Фон секции — фишки справа, наложением «Экран»: чёрное в картинке
   исчезает, остаётся только свечение фишек поверх общего фона страницы.
   z-index -1 — над grainient (-3) и 3D-фишкой (-2), под контентом.
   На ПК размер свой (ниже), на телефоне и планшете — поменьше. */
@media (min-width: 1100px) {
  .quiz { position: relative; }
  .quiz::before {
    /* Размер фишек зафиксирован и не зависит от шага квиза: раньше было
       auto 90% от высоты секции, и картинка «прыгала» при смене шага.
       790px = 90% секции на шаге контактов (самом высоком), top: 64px —
       там же, где картинка стояла на этом шаге. Привязка к верху секции:
       при смене шага фишки не сдвигаются ни по размеру, ни по месту;
       на коротких шагах низ стопки уходит под следующий блок. */
    content: ''; position: absolute; left: 0; right: 0; top: 64px; height: 790px; z-index: -1;
    background: url('../img/fishki-bg.png') right 0 top 0 / auto 790px no-repeat;
    mix-blend-mode: screen; pointer-events: none;
  }
}
/* 790px с ПК выше экрана телефона — те же фишки, но меньше; размер тоже
   фиксированный, чтобы не прыгал от шага к шагу */
@media (max-width: 1099px) {
  .quiz { position: relative; }
  .quiz::before {
    content: ''; position: absolute; left: 0; right: 0; top: 24px; height: 480px; z-index: -1;
    background: url('../img/fishki-bg.png') right 0 top 0 / auto 480px no-repeat;
    mix-blend-mode: screen; pointer-events: none;
  }
}
@media (max-width: 699px) {
  /* крупнее и выше: верхняя фишка выглядывает над карточкой рядом с
     заголовком, иначе карточка закрывала почти всю стопку. Верх картинки —
     чистый чёрный, в «Экране» он невидим, поэтому подъём над верхом секции
     на соседний блок не заходит */
  .quiz::before { top: -40px; height: 460px; background-size: auto 460px; }
}

.quiz__box {
  position: relative; overflow: hidden;
  border: var(--border-2); border-radius: var(--radius-panel);
  padding: clamp(26px, 4vw, 48px); max-width: 760px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 45%), var(--stage-2);
  box-shadow: var(--glow-soft);
}
.quiz__progress, .quiz__step { position: relative; z-index: 1; }
.quiz__progress { margin-bottom: 34px; }
.quiz__bar { display: flex; gap: 6px; margin-bottom: 10px; }
.quiz__seg { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.quiz__seg.is-done { background: var(--grad-signal); }

.quiz__step { display: none; }
.quiz__step.is-active { display: block; animation: stepIn .4s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.quiz__q { margin-bottom: 26px; }

.quiz__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.quiz__tile {
  padding: 16px; border: var(--border); border-radius: var(--radius);
  background: rgba(255, 255, 255, .02); cursor: pointer; text-align: left;
  font-size: var(--fs-sm); color: #fff;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.quiz__tile:hover { border-color: var(--signal-line); transform: translateY(-2px); }
.quiz__tile.is-active { border-color: var(--signal); background: var(--signal-dim); color: #fff; box-shadow: var(--glow-signal); }
/* телефон: две колонки, как в квизе-попапе — minmax(170px) давал одну */
@media (max-width: 699px) {
  .quiz__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.quiz__range-val {
  font-family: var(--font-display); font-size: 60px; font-weight: 700; line-height: 1;
  margin-bottom: 18px; color: #fff;
}
.quiz__range { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.quiz__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--signal); box-shadow: var(--glow-signal); cursor: pointer;
}
.quiz__range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--signal);
  background: #fff; box-shadow: var(--glow-signal); cursor: pointer;
}
.quiz__range-ends { display: flex; justify-content: space-between; color: var(--ink-2); }

.quiz__date { max-width: 280px; }
.quiz__nav { display: flex; gap: var(--gap-sm); flex-wrap: wrap; margin-top: 32px; }
.quiz__legal { margin-top: var(--gap-sm); font-size: 13px; line-height: 1.75; }
.quiz__done.is-active { display: block; text-align: center; padding: 26px 0; }

/* ============ 07 программы — фильтр-переключатель + карточки ============ */

.programs__tabs {
  display: inline-flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 40px; padding: 6px;
  border: var(--border); border-radius: var(--radius-pill);
}
.programs__tab {
  padding: 11px 24px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-1);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.programs__tab.is-active { background: #fff; color: #0b0f1c; }

.programs__group + .programs__group { margin-top: calc(var(--section-y) / 2); }
/* с вкладками группы показываются по одной — отступ между группами
   не нужен, иначе у второй вкладки заголовок дальше от вкладок, чем у первой */
.programs__tabs ~ .programs__group { margin-top: 0; }
.programs__group-title { font-family: var(--font-display); font-weight: 600; margin-bottom: 26px; }
.programs__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.programs__list > * { min-width: 0; }

.pcard {
  position: relative;
  border: var(--border); border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; background: var(--stage-2);
  transition: transform var(--dur-slow) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.pcard:hover { transform: translateY(-8px); border-color: var(--signal-line); box-shadow: var(--glow-signal); }
.pcard__media { position: relative; background: var(--c-fill); overflow: hidden; }
.pcard__media video, .pcard__media img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .7s var(--ease);
}
.pcard__media .ph { aspect-ratio: 1 / 1; }
.pcard:hover .pcard__media img, .pcard:hover .pcard__media video { transform: scale(1.07); }
.pcard__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--signal); color: #fff; font-weight: 700;
  border-radius: var(--radius-pill); padding: 6px 14px; font-size: var(--fs-xs);
  max-width: calc(100% - 24px);
}
.pcard__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pcard__name { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.pcard__meta { }
.pcard__price { color: var(--signal-2); font-weight: 700; }
.pcard__text { font-size: var(--fs-sm); color: var(--ink-1); flex: 1; }

@media (max-width: 1099px) { .programs__list { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 699px) {
  /* слайдер по одной карточке */
  .programs__list {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .programs__list::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 82%; scroll-snap-align: center; }
}

/* ============ 08 персональный помощник ============ */

.person__list-title { font-family: var(--font-display); font-weight: 600; margin: 0 0 14px; font-size: var(--fs-h3); }
.person__list { display: grid; gap: 10px; margin-bottom: 28px; }
.person__list li { padding-left: 24px; position: relative; color: var(--ink-1); }
/* ПК: пункты «Что берёт на себя» белые (мобильная заморожена) */
@media (min-width: 1100px) { .person__list li { color: #fff; } }
.person__list li::before { content: '✓'; position: absolute; left: 0; top: -1px; color: var(--signal); font-size: 13px; font-weight: 700; }
.person__thesis { margin: 0 0 30px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--c-text); }

.person__media { position: relative; }
.person__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-lg); border: var(--border-2); box-shadow: var(--glow-soft);
}
/* телефон и планшет: фото квадратное */
@media (max-width: 1099px) {
  .person__media img { aspect-ratio: 1 / 1; }
}
/* ПК: фото по высоте текстовой колонки — верх на уровне заголовка,
   низ на одной линии с кнопкой. Фото лежит абсолютно и не распирает
   строку сетки; кадр обрезается cover'ом. Ниже 1100px колонки встают
   друг под друга, и выравнивать фото по кнопке не с чем. */
@media (min-width: 1100px) {
  .person .cols-2 { align-items: stretch; }
  .person__media > img, .person__media > .ph {
    position: absolute; inset: 0;
    width: 100%; height: 100%; aspect-ratio: auto;
    object-position: center 35%;
  }
}

/* ============ 09 отзывы ============ */

.reviews__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); align-items: start; }
.reviews__list > * { min-width: 0; }

.rcard {
  position: relative;
  border: var(--border); border-radius: var(--radius-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 14px; background: var(--stage-2);
  transition: transform var(--dur-slow) var(--ease), border-color var(--dur) var(--ease);
}
.rcard::before {
  content: '“'; position: absolute; top: 8px; right: 20px;
  font-family: var(--font-display); font-size: 56px; line-height: 1;
  color: var(--signal-line); pointer-events: none;
}
.rcard:hover { border-color: var(--signal-line); transform: translateY(-6px); }
.reviews__list > *:nth-child(2n) { transform: translateY(26px); }
.reviews__list > *:nth-child(2n):hover { transform: translateY(20px); }

.rcard__head { display: flex; gap: var(--gap-sm); align-items: center; }
.rcard__name { font-weight: 700; }

.rcard__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-sm);
  color: var(--ink-1);
  flex: 1;
}
.rcard__text.is-open { -webkit-line-clamp: unset; overflow: visible; }
.rcard__more {
  align-self: flex-start;
  background: none; border: 0; padding: 0;
  font-size: var(--fs-sm); color: var(--signal-2); text-decoration: underline; cursor: pointer;
}
.rcard__src { margin-top: auto; }

@media (max-width: 1099px) { .reviews__list { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 699px) {
  .reviews__list {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .reviews__list::-webkit-scrollbar { display: none; }
  .rcard { flex: 0 0 85%; scroll-snap-align: center; }
  .reviews__list > *:nth-child(2n) { transform: none; }
}

.reviews__cta { margin-top: var(--section-y); text-align: center; }
.reviews__yandex { margin-top: var(--gap); }
.reviews__yandex a { color: var(--signal-2); text-decoration: none; border-bottom: 1px solid var(--signal-line); }

/* ---- попап «Больше отзывов»: тот же оверлей-паттерн, что у .popup/.winbox,
   только окно шире — под сетку карточек, а не под узкую форму ---- */
.rmore { position: fixed; inset: 0; z-index: var(--z-popup); }
.rmore__overlay { position: absolute; inset: 0; background: rgba(6, 9, 18, .72); backdrop-filter: blur(6px); animation: fadeIn .25s var(--ease); }
.rmore__win {
  position: relative;
  max-width: 960px; width: calc(100% - var(--gutter) * 2);
  margin: 6vh auto 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 45%), var(--stage-2);
  border: var(--border-2); border-radius: var(--radius-panel);
  padding: 36px;
  max-height: 88vh; overflow-y: auto;
  box-shadow: var(--glow-signal-lg);
  animation: popIn .35s var(--ease-out);
}
.rmore__title { padding-right: 44px; margin-bottom: 24px; }

/* Скриншоты переписок приходят каждый со своими пропорциями — от узкой
   вытянутой карточки до широкой полосы с одним сообщением. Колоночная
   раскладка (не grid) даёт каждому картинку её естественную высоту,
   без обрезки и без общего рядного шага. */
.rmore__shots { columns: 2; column-gap: var(--gap-sm); }
.rmore__shot {
  display: block; width: 100%; margin: 0 0 var(--gap-sm);
  break-inside: avoid; padding: 0; border: var(--border); border-radius: var(--radius);
  background: var(--c-fill); cursor: zoom-in; overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rmore__shot:hover { border-color: var(--signal-line); transform: translateY(-4px); }
.rmore__shot img { width: 100%; height: auto; display: block; }

@media (max-width: 699px) {
  .rmore__win { margin: 0; max-height: 100vh; border-radius: 0; }
  .rmore__shots { columns: 1; }
}

/* Клик по скриншоту открывает его во весь экран — текст в переписке
   мелкий, в колонке попапа не всегда читается. */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  background: rgba(6, 9, 18, .9); backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: var(--gutter);
  cursor: zoom-out; animation: fadeIn .25s var(--ease);
}
.lightbox img { max-width: 100%; max-height: 90vh; width: auto; object-fit: contain; border-radius: var(--radius); }

/* ============ 10 вопросы ============ */

.faq__list { border-top: var(--border); max-width: 860px; counter-reset: faq; }
.faq__item { border-bottom: var(--border); }
.faq__q {
  padding: 22px 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3);
  list-style: none;
  display: flex; align-items: flex-start; gap: 18px;
  color: var(--c-text);
  transition: color var(--dur) var(--ease);
  user-select: none; /* иначе двойной клик по вопросу выделяет текст вместо раскрытия */
  -webkit-tap-highlight-color: transparent;
}
.faq__item:hover .faq__q { color: var(--signal-2); }
.faq__q::-webkit-details-marker { display: none; }
/* Chrome вешает :focus-visible на <summary> при любом клике/тапе, не только с клавиатуры —
   рамка глобального :focus-visible тут ни к месту (наезжает на кружок и всплывает от тапа
   на мобильном). Показываем фокус тем же способом, что и hover: сменой цвета. */
.faq__q:focus-visible { outline: none; }
.faq__item:focus-within .faq__q { color: var(--signal-2); }
.faq__item:focus-within .faq__q::after { border-color: var(--signal-line); color: var(--signal-2); }
.faq__q::before {
  counter-increment: faq; content: counter(faq, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 12px; color: var(--signal-2);
  padding-top: 8px; flex: none;
}
.faq__q::after {
  content: '+'; margin-left: auto; flex: none; font-weight: 400; color: var(--ink-2);
  width: 32px; height: 32px; border: var(--border); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(135deg); border-color: var(--signal-line); color: var(--signal-2); }
/* ПК: без кружка — только плюс, в раскрытом пункте минус. Обе полоски
   нарисованы фоном и стоят ровно по центру значка; в открытом состоянии
   вертикальная убирается (высота 0). Мобильная версия заморожена. */
@media (min-width: 1100px) {
  .faq__q::after {
    content: ''; align-self: center;
    width: 22px; height: 22px; border: 0; border-radius: 0;
    color: var(--ink-2);
    background:
      linear-gradient(currentColor, currentColor) center / 22px 3px no-repeat,
      linear-gradient(currentColor, currentColor) center / 3px 22px no-repeat;
    transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .faq__item[open] .faq__q::after {
    transform: none; color: var(--signal-2);
    background-size: 22px 3px, 3px 0;
  }
}
.faq__a { padding: 0 0 28px 50px; color: var(--ink-1); max-width: 70ch; line-height: 1.75; }

/* ============ 11 финал ============ */

.final { text-align: center; overflow: clip; }
.final__in { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
.final .h2 { font-size: var(--fs-display); text-transform: uppercase; }
.final__cta { margin-top: 36px; padding: 15px 40px; font-size: var(--fs-base); }

/* Заголовок «врывается» глитчем — серией из трёх вспышек подряд, когда
   блок попадает в экран (пауза между вспышками в setupFinalGlitch,
   app.js). Каждая вспышка — тряска + два цветных дубля текста на
   фирменном фиолетовом, без чужих оттенков (красный/циан здесь были бы
   не по стилю сайта), поэтому не классический RGB-сплит. Серия
   заканчивается сама и не зацикливается — заголовок должен читаться. */
.final__title { position: relative; }
.final__title.is-glitching { animation: final-shake .6s steps(2, end) both; }
.final__title::before,
.final__title::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  mix-blend-mode: screen;
}
.final__title::before { color: var(--signal-2); }
.final__title::after  { color: var(--signal); }
.final__title.is-glitching::before { animation: final-glitch-a .6s steps(3, end) both; }
.final__title.is-glitching::after  { animation: final-glitch-b .6s steps(3, end) both; }

@keyframes final-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 1px); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 1px); }
}
@keyframes final-glitch-a {
  0%          { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
  15%, 35%    { opacity: .85; }
  15%         { clip-path: inset(8% 0 58% 0); transform: translate(-6px, 0); }
  35%         { clip-path: inset(58% 0 6% 0); transform: translate(5px, 0); }
  55%         { opacity: .6; clip-path: inset(22% 0 64% 0); transform: translate(-3px, 0); }
  75%, 100%   { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
}
@keyframes final-glitch-b {
  0%          { opacity: 0; clip-path: inset(100% 0 0 0); transform: translate(0, 0); }
  15%, 35%    { opacity: .8; }
  15%         { clip-path: inset(48% 0 16% 0); transform: translate(6px, 0); }
  35%         { clip-path: inset(6% 0 66% 0); transform: translate(-5px, 0); }
  55%         { opacity: .5; clip-path: inset(68% 0 10% 0); transform: translate(4px, 0); }
  75%, 100%   { opacity: 0; clip-path: inset(100% 0 0 0); transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .final__title.is-glitching,
  .final__title.is-glitching::before,
  .final__title.is-glitching::after { animation: none; }
}

/* ПК: тот же глитч на заголовке отзывов («Эмоции зашкаливают»).
   Только от 1100px — мобильная версия заморожена, там заголовок
   остаётся статичным (класс есть, но слои и анимация не заданы). */
@media (min-width: 1100px) {
  .glitch-title { position: relative; }
  .glitch-title.is-glitching { animation: final-shake .6s steps(2, end) both; }
  .glitch-title::before,
  .glitch-title::after {
    content: attr(data-text);
    position: absolute; inset: 0;
    opacity: 0; pointer-events: none;
    mix-blend-mode: screen;
  }
  .glitch-title::before { color: var(--signal-2); }
  .glitch-title::after  { color: var(--signal); }
  .glitch-title.is-glitching::before { animation: final-glitch-a .6s steps(3, end) both; }
  .glitch-title.is-glitching::after  { animation: final-glitch-b .6s steps(3, end) both; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  .glitch-title.is-glitching,
  .glitch-title.is-glitching::before,
  .glitch-title.is-glitching::after { animation: none; }
}

/* Мобильная версия: тот же глитч на заголовке реквизита («Реквизит как из
   телека»). Только до 1099px — на ПК этого эффекта нет. Класс отдельный
   от .glitch-title выше: тот селектор JS берёт через querySelector (одно
   совпадение), общий класс перехватил бы анимацию у заголовка отзывов. */
@media (max-width: 1099px) {
  .glitch-title--mobile { position: relative; }
  .glitch-title--mobile.is-glitching { animation: final-shake .6s steps(2, end) both; }
  .glitch-title--mobile::before,
  .glitch-title--mobile::after {
    content: attr(data-text);
    position: absolute; inset: 0;
    opacity: 0; pointer-events: none;
    mix-blend-mode: screen;
  }
  .glitch-title--mobile::before { color: var(--signal-2); }
  .glitch-title--mobile::after  { color: var(--signal); }
  .glitch-title--mobile.is-glitching::before { animation: final-glitch-a .6s steps(3, end) both; }
  .glitch-title--mobile.is-glitching::after  { animation: final-glitch-b .6s steps(3, end) both; }
}
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  .glitch-title--mobile.is-glitching,
  .glitch-title--mobile.is-glitching::before,
  .glitch-title--mobile.is-glitching::after { animation: none; }
}

/* ============ 12 подвал ============ */

.footer { border-top: var(--border); padding: 84px 0 40px; }
@media (max-width: 699px) { .footer { padding-top: 32px; } }
.footer__line { margin-bottom: 12px; color: var(--ink-1); }
.footer__line a { color: var(--c-text); text-decoration: none; border-bottom: 1px solid var(--ink-line-2); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.footer__line a:hover { color: var(--signal-2); border-color: var(--signal-2); }
.footer__contacts { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__legal { margin-top: 32px; padding-top: 24px; border-top: var(--border); display: grid; gap: 8px; color: var(--ink-2); font-size: var(--fs-xs); }
.footer__legal a { color: var(--ink-2); }
.footer__link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ============ поля форм ============ */

.field {
  width: 100%;
  padding: 14px 16px;
  border: var(--border); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .03); color: #fff;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field::placeholder { color: var(--ink-2); }
.field:focus { border-color: var(--signal-line); background: rgba(255, 255, 255, .05); outline: none; }
.field.is-error { border-color: #ff5c7a; border-width: 1px; }
.field__err { font-size: var(--fs-sm); margin-top: 8px; color: #ff5c7a; }

.chan { margin-bottom: var(--gap-sm); }
.chan__tabs { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; border: var(--border); border-radius: var(--radius-pill); }
.chan__tab {
  flex: 1; padding: 10px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-1);
  cursor: pointer; font-size: var(--fs-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chan__tab.is-active { background: #fff; color: #0b0f1c; font-weight: 600; }

/* honeypot: настоящий посетитель этого поля не видит */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============ попап ============ */

.popup { position: fixed; inset: 0; z-index: var(--z-popup); }
.popup__overlay { position: absolute; inset: 0; background: rgba(6, 9, 18, .72); backdrop-filter: blur(6px); animation: fadeIn .25s var(--ease); }
.popup__win {
  position: relative;
  max-width: 460px; width: calc(100% - var(--gutter) * 2);
  margin: 8vh auto 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 45%), var(--stage-2);
  border: var(--border-2); border-radius: var(--radius-panel);
  padding: 36px;
  max-height: 84vh; overflow-y: auto;
  box-shadow: var(--glow-signal-lg);
  animation: popIn .35s var(--ease-out);
}
.popup__x {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px;
  background: rgba(255, 255, 255, .06); border: 0; border-radius: 50%;
  font-size: 20px; line-height: 1; cursor: pointer; color: #fff;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.popup__x:hover { background: var(--signal-dim); color: var(--signal-2); }
.popup__title { padding-right: 44px; }
.popup__sub   { margin: 10px 0 28px; font-size: var(--fs-sm); color: var(--ink-1); }
.popup__legal { margin-top: var(--gap-sm); color: var(--ink-2); line-height: 1.75; }
.popup__or    { margin-top: 28px; padding-top: 28px; border-top: var(--border); }
.popup__ico   { display: flex; gap: 10px; margin-top: 10px; }
.popup__status { display: flex; align-items: center; gap: 10px; margin-top: var(--gap-sm); }
.popup__done  { text-align: center; padding: 32px 0; }

.dot { width: 9px; height: 9px; border: 1px solid var(--ink-2); border-radius: 50%; flex: none; }
.dot.is-on { background: var(--signal); border-color: var(--signal); }

body.is-fixed { position: fixed; width: 100%; overflow: hidden; }

@keyframes popIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 599px) {
  .popup__win {
    margin: 0; width: 100%;
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 92vh;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    border-bottom: 0;
  }
}

/* ============ cookie ============ */

.cookie {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-cookie);
  /* стекло, но потемнее: под панелью идёт текст, его нельзя терять */
  background: linear-gradient(180deg, rgba(20, 15, 32, .58), rgba(10, 8, 16, .78));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: var(--glass-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    0 -18px 40px -20px rgba(0, 0, 0, .7);
  padding: var(--gap-sm) 0;
}
.cookie__in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; gap: var(--gap); align-items: center;
}
.cookie__title { font-weight: 700; margin-bottom: 4px; }
.cookie .btn { flex: none; }
.cookie a { color: var(--signal-2); }

@media (max-width: 699px) {
  .cookie__in { flex-direction: column; align-items: stretch; gap: var(--gap-sm); }
  /* Только эта кнопка — не трогаем общий --btn-py, иначе сузились бы
     все кнопки на мобильном, а не только «Хорошо» в cookie-баннере. */
  .cookie .btn { padding-top: calc(var(--btn-py) - 2px); padding-bottom: calc(var(--btn-py) - 2px); }
}

/* ============ правовые страницы ============ */

.legal, .rec { }
.legal { padding: var(--section-y) 0; max-width: 800px; }
.legal__back, .back { margin-bottom: var(--gap); }
.legal__back a, .back a { color: var(--signal-2); text-decoration: none; }
.legal h1 { margin-bottom: var(--gap); }
.legal__text { line-height: 1.8; color: var(--ink-1); }
.legal__req { margin-top: var(--section-y); padding-top: var(--gap); border-top: var(--border); display: grid; gap: 6px; color: var(--ink-2); }

/* ============ бонус-игра — аркадный автомат ============ */

.slots { overflow: clip; }
/* Бокалы по краям секции — то, что разыгрывается в автомате. Screen поверх
   чёрного фона: тёмный фон картинки становится прозрачным, остаётся
   только фиолетовая засветка стекла и льда. */
.slots::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: url('../img/bokal-bg.png') center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: .8;
  pointer-events: none;
}
.slots__in { text-align: center; max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.slots .section__sub { margin-bottom: 36px; }
@media (max-width: 699px) { .slots .section__sub { color: #fff; } }

.machine {
  position: relative;
  border: 2px solid var(--signal-line); border-radius: var(--radius-panel);
  padding: 40px clamp(20px, 4vw, 48px) 36px;
  display: grid; gap: 22px; justify-items: center;
  background: linear-gradient(165deg, rgba(157, 59, 245, .1), var(--stage-2) 60%);
  box-shadow: var(--glow-signal-lg);
}
/* гирлянда лампочек по периметру кабинета — бегущие огни автомата */
.machine::before {
  content: ''; position: absolute; inset: 10px; z-index: 0; pointer-events: none;
  border-radius: calc(var(--radius-panel) - 10px);
  background-image: radial-gradient(circle, var(--signal-2) 0 2px, transparent 2.6px);
  background-size: 26px 26px; background-position: 0 0;
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% 3px no-repeat,
    linear-gradient(#000, #000) bottom / 100% 3px no-repeat,
    linear-gradient(#000, #000) left / 3px 100% no-repeat,
    linear-gradient(#000, #000) right / 3px 100% no-repeat;
  mask:
    linear-gradient(#000, #000) top / 100% 3px no-repeat,
    linear-gradient(#000, #000) bottom / 100% 3px no-repeat,
    linear-gradient(#000, #000) left / 3px 100% no-repeat,
    linear-gradient(#000, #000) right / 3px 100% no-repeat;
  animation: bulbChase 1s steps(2) infinite;
  opacity: .85;
}
@keyframes bulbChase { 50% { background-position: 13px 13px; } }

/* корпус окна — цельное чёрное стекло, барабаны больше не в отдельных рамках,
   разделены только неоновой линией; по бокам светятся дуги-скобки */
.machine__frame { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }

.machine__window {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; padding: 16px;
  border: var(--border-2); border-radius: var(--radius);
  background: var(--stage-0);
  width: 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), inset 0 20px 40px -20px rgba(0, 0, 0, .8);
}

.reel { height: 104px; overflow: hidden; background: transparent; position: relative; }
.reel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 30%, transparent 70%, rgba(0, 0, 0, .55));
}
/* неоновая линия между барабанами вместо рамок */
.reel:not(:last-child)::before {
  content: ''; position: absolute; z-index: 2; top: 6%; bottom: 6%; right: -8px; width: 2px;
  background: var(--signal-2); border-radius: 2px;
  box-shadow: 0 0 6px var(--signal), 0 0 16px var(--signal-dim);
}
.reel__strip { will-change: transform; }

.sym { height: 104px; display: grid; place-items: center; color: var(--signal-2); }
.sym svg {
  width: 52px; height: 52px;
  filter:
    drop-shadow(0 0 4px var(--signal-2))
    drop-shadow(0 0 12px var(--signal))
    drop-shadow(0 0 26px var(--signal-dim));
}

/* дуги-скобки по бокам корпуса — неоновый «театральный занавес» вокруг окна */
.machine__arc { position: absolute; top: 50%; width: 20px; height: 94%; transform: translateY(-50%); pointer-events: none; z-index: 2; overflow: visible; }
.machine__arc--l { left: -14px; }
.machine__arc--r { right: -14px; }
.machine__arc path {
  fill: none; stroke: var(--signal-2); stroke-width: 3; stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--signal)) drop-shadow(0 0 14px var(--signal-dim));
}

@media (max-width: 699px) {
  .machine__arc { width: 12px; }
  .machine__arc--l { left: -9px; }
  .machine__arc--r { right: -9px; }
}

.machine__status { min-height: 1.5em; color: var(--ink-1); position: relative; z-index: 1; }
.machine__status b { color: var(--signal-2); }
.machine__go { min-width: 220px; padding: 20px 36px; font-size: var(--fs-base); position: relative; z-index: 1; animation: goPulse 2.4s ease-in-out infinite; }
.machine__go:hover, .machine__go:focus-visible { animation: none; }
@keyframes goPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(157, 59, 245, .5); } 50% { box-shadow: 0 0 0 14px rgba(157, 59, 245, 0); } }
.machine__fine { max-width: 46ch; color: var(--ink-2); position: relative; z-index: 1; }

@media (max-width: 699px) {
  .reel, .sym { height: 82px; }
  .sym svg { width: 40px; height: 40px; }
  .machine__window { padding: 8px; }
  .machine { padding: 30px 18px 28px; }
}

/* попап выигрыша */
.winbox { position: fixed; inset: 0; z-index: var(--z-popup); }
.winbox__overlay { position: absolute; inset: 0; background: rgba(6, 9, 18, .78); backdrop-filter: blur(6px); animation: fadeIn .25s var(--ease); }
.winbox__win {
  position: relative;
  max-width: 440px; width: calc(100% - var(--gutter) * 2);
  margin: 12vh auto 0;
  background: var(--stage-2);
  border: 1px solid var(--signal-line); border-radius: var(--radius-panel);
  padding: 36px; text-align: center;
  box-shadow: var(--glow-win);
  animation: popIn .4s var(--ease-out);
}
.winbox__win .popup__x { top: 14px; right: 14px; }
.winbox__win .h3 { color: var(--signal-2); }
.winbox__cta { margin-top: 26px; }

@media (max-width: 599px) {
  /* было прилипание к низу (bottom sheet) — теперь попап по центру
     экрана, как на десктопе; форма и ширина берутся из базового правила. */
  .winbox { display: flex; align-items: center; justify-content: center; }
  .winbox__win { margin: 0; }
}

/* ============ ярлык «Коктейли» ============ */

.ctab {
  position: fixed; right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-sticky);
  background: var(--signal); color: #fff;
  text-decoration: none; font-weight: 700;
  padding: 18px 12px;
  border-radius: var(--radius) 0 0 var(--radius);
  writing-mode: vertical-rl;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  box-shadow: var(--glow-win);
}
/* на самой странице коктейлей ярлык не нужен — на главной остаётся */
.ctab.is-here { display: none; }

@media (max-width: 699px) {
  .ctab { top: auto; bottom: 12px; transform: none; padding: 10px 8px; }
}

/* ============ страница рецептов ============ */

/* Фон страницы рецептов — неоновые коктейли на весь экран.
   Режим «Экран»: чёрное в картинке исчезает, остаётся свечение поверх
   зернистого градиента. z-index -2 — над grainient (-3), под вуалью
   body::after (-1) и контентом. fixed — фон стоит на месте при прокрутке. */
.rec::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background: url('../img/kokteli-bg.png') center / cover no-repeat;
  mix-blend-mode: screen; pointer-events: none;
  opacity: .65;
}
.rec__lead  { max-width: 60ch; margin-bottom: var(--section-y); }
/* на фоне с коктейлями вступление белое, а «На главную» — белая
   плашка с фиолетовым текстом цвета кнопки */
.rec .rec__lead { color: #fff; }
.rec .back a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-pill);
  background: #fff; color: var(--signal); font-weight: 600;
  transition: box-shadow var(--dur) var(--ease);
}
.rec .back a:hover { box-shadow: var(--glow-signal); }
.rec__group { margin: var(--section-y) 0 var(--gap); padding-top: var(--gap); border-top: var(--border); font-family: var(--font-display); }
.rec__group:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.rec__list  { display: grid; gap: 28px; }

.rcp {
  border: var(--border); border-radius: var(--radius-lg); padding: 28px;
  display: grid; grid-template-columns: 240px 1fr; gap: 28px;
  align-items: start; background: var(--stage-2);
  transition: border-color var(--dur) var(--ease);
}
.rcp:hover { border-color: var(--signal-line); }
.rcp > * { min-width: 0; }
.rcp__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.rcp__head { margin-bottom: 16px; }
.rcp__name { font-size: var(--fs-h3); font-family: var(--font-display); font-weight: 700; }
.rcp__body { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
.rcp__body > * { min-width: 0; }
.rcp__label { font-size: var(--fs-xs); color: var(--signal-2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; font-weight: 600; }
.rcp__ing { display: grid; gap: 8px; }
.rcp__ing li { padding-left: 20px; position: relative; color: var(--ink-1); }
.rcp__ing li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 1px; background: var(--signal); }
.rcp__steps { max-width: 68ch; color: var(--ink-1); line-height: 1.8; }
.rcp__tip { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--signal-line); background: var(--signal-dim); border-radius: var(--radius-sm); font-size: var(--fs-sm); }

/* Призыв по центру, текст — главным дисплейным шрифтом как у .h2,
   balance делит фразу на ровные строки. */
.rec__cta {
  margin-top: var(--section-y); padding-top: var(--gap); border-top: var(--border);
  display: grid; gap: var(--gap); justify-items: center; text-align: center;
}
.rec__cta .lead {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .005em;
  font-size: var(--fs-h2); line-height: .96; color: var(--c-text);
  text-wrap: balance;
}

/* Телефон и планшет: коктейли не на всю страницу, а только полосой под
   нижним призывом — от его линии до линии футера. Бокалы на картинке
   стоят по краям, поэтому при cover в узком блоке они заглядывают с боков,
   а центр с текстом остаётся тёмным.
   z-index у .wrap снимаем: с ним .wrap — отдельный слой, и «Экран» смешивал
   бы картинку с пустотой внутри блока, чёрное не растворялось бы в фоне. */
@media (max-width: 1099px) {
  .rec::before { content: none; }
  .rec > .wrap { z-index: auto; }
  /* «На главную» на 20% меньше (было 10/20px и 16px) и выше за счёт
     меньшего верхнего отступа секции */
  .rec { padding-top: 40px; }
  .rec .back a { padding: 8px 16px; gap: 6px; font-size: 13px; }
  /* вступление чуть мельче общих 19px у .section__sub */
  .rec .rec__lead { font-size: 17px; }
  /* фото коктейлей квадратные; лишнее срезается снизу — бокал и украшение
     наверху кадра, внизу только стол */
  .rcp__photo img { aspect-ratio: 1 / 1; object-position: center top; }
  .rec__cta { position: relative; }
  /* Сверху фон не срезается по линии, а уходит в промежуток над блоком;
     прижат к низу, чтобы отражения бокалов не обрезались. */
  .rec__cta::before {
    content: ''; position: absolute; z-index: -2;
    top: calc(-1 * var(--section-y)); bottom: calc(-1 * var(--section-y));
    left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1);
    background: url('../img/kokteli-bg.png') center bottom / cover no-repeat;
    mix-blend-mode: screen; opacity: .65; pointer-events: none;
  }
}
@media (max-width: 699px) {
  /* Телефон: крупно и только правые бокалы. Картинка во всю высоту слоя,
     прижата вправо — левая группа уходит за край. Левые бокалы занимают
     ~31% ширины картинки, поэтому высота не меньше 85vw: иначе на широком
     телефоне они снова заглянут в кадр. */
  .rec__cta::before {
    top: calc(-1 * var(--section-y) - 48px);
    background-position: right bottom;
    background-size: auto max(100%, 85vw);
  }
}

@media (max-width: 999px) {
  .rcp { grid-template-columns: 180px 1fr; }
  .rcp__body { grid-template-columns: 1fr; }
}
@media (max-width: 699px) {
  .rcp { grid-template-columns: 1fr; }
  .rcp__photo { max-width: 220px; }
}

/* ============ поводы собраться — фишки казино ============ */

.occ__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 34px var(--gap-sm);
}
.occ__grid > * { min-width: 0; }
.occ__item {
  display: grid; gap: 14px; justify-items: center; text-align: center;
  transition: transform var(--dur-slow) var(--ease);
}

.chip {
  position: relative; display: block;
  width: 100%; max-width: 150px; aspect-ratio: 1 / 1;
  transition: transform .45s var(--ease);
}
.occ__item:hover .chip { transform: rotate(14deg) translateY(-8px); }
.chip::before {
  content: ''; position: absolute; inset: 6%; z-index: -1;
  border-radius: 50%; filter: blur(16px);
  background: radial-gradient(ellipse at 50% 115%, rgba(157, 59, 245, .45), transparent 70%);
  opacity: 0; transform: scale(.7);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.occ__item:hover .chip::before { opacity: 1; transform: scale(1); }
.chip__photo {
  position: absolute; inset: 12%;
  border-radius: 50%; overflow: hidden;
  background: var(--c-fill);
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .07);
}
.chip__photo img { width: 100%; height: 100%; object-fit: cover; }
.chip__ph { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); }

.chip__ring { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .5s var(--ease); }
.occ__item:hover .chip__ring { transform: rotate(46deg); }
.chip__ring circle { fill: none; }
.chip__edge  { stroke-width: 2; stroke: var(--ink-line-2); }
.chip__notch { stroke-width: 8; stroke-dasharray: 10 12.5; opacity: .9; stroke: var(--signal-line); }
.chip__inner { stroke-width: 1; stroke-dasharray: 2 3; opacity: .5; stroke: var(--ink-line-2); }

.occ__name { font-size: var(--fs-sm); color: var(--ink-1); }
.occ__need { margin-top: var(--gap); color: var(--ink-2); }
.occ__cta  { margin-top: 40px; }

/* Ровный ряд, чётные фишки на пару пикселей выше, и все мягко покачиваются
   в воздухе. Покачивание — через свойство translate, а не transform:
   transform уже занят ховером фишки и анимацией появления блока, свойства
   складываются, а не спорят. */
/* выше поднимается только сама фишка, подписи стоят по одной линии;
   top, а не translate — translate у .chip занят покачиванием */
.occ__item:nth-child(even) .chip { top: -6px; }

.chip { animation: occFloat 3.6s ease-in-out infinite; }
/* разный сдвиг фазы — чтобы не качались строем */
.occ__item:nth-child(2n) .chip { animation-delay: -1.2s; }
.occ__item:nth-child(3n) .chip { animation-delay: -2.4s; }
.occ__item:nth-child(4n) .chip { animation-delay: -0.6s; }
.occ__item:nth-child(5n) .chip { animation-delay: -3s; }
@keyframes occFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

@media (max-width: 1099px) { .occ__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 699px)  {
  .occ__grid { grid-template-columns: repeat(3, 1fr); gap: var(--gap-sm); }
}
@media (max-width: 399px)  { .occ__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- телефон: та же лента, что и .ticker выше, но с фишками и в два
   ряда навстречу друг другу — верхний ряд ползёт влево, нижний вправо. ---- */
.occ__marquee { display: none; }
@media (max-width: 699px) {
  .occ__grid     { display: none; }
  .occ__marquee  { display: grid; gap: 8px; }
  /* Фишки покачиваются (occFloat, см. выше), и без запаса верхний край
     задевал clip-границу ряда. overflow-x/overflow-y здесь не помогает:
     раз ось x не visible, спецификация принудительно превращает y: visible
     в y: auto — тот всё равно обрезает. Настоящая права — запас по высоте:
     10px с каждой стороны с лихвой покрывают амплитуду покачивания (7px).
     Запас уходит в padding, а не в gap .occ__marquee — так расстояние
     между рядами на глаз не изменилось (было 28px, осталось 10+8+10). */
  .occ__row      { overflow: hidden; padding: 10px 0; margin: -10px calc(var(--gutter) * -1); }
  .occ__track    { display: flex; width: max-content; }
  .occ__rowlist  { display: flex; gap: 20px; padding: 0 10px; }
  .occ__chip     { flex: none; width: 92px; display: grid; gap: 4px; justify-items: center; text-align: center; }
  .occ__marquee .chip { max-width: 76px; }
  .occ__marquee .occ__name { font-size: var(--fs-xs); color: #fff; }

  /* Скорость — расстояние ряда за фиксированное время, а не число секунд
     напрямую: ряды дублированы неодинаковое число раз (нечётное общее
     число поводов делится не поровну), и общий px/s иначе разъехался бы. */
  .occ__row--left  .occ__track { animation: occMarqueeL 26s linear infinite; }
  .occ__row--right .occ__track { animation: occMarqueeR 26s linear infinite; }
}
@keyframes occMarqueeL { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes occMarqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  /* Без анимации лента переносится в статичный ряд, как у .ticker —
     дубликат (aria-hidden) прячем, чтобы каждая фишка не показывалась дважды. */
  .occ__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .occ__rowlist[aria-hidden="true"] { display: none; }
}

/* ============ квиз в попапе ============ */

.qpopup { position: fixed; inset: 0; z-index: var(--z-popup); }
.qpopup__overlay { position: absolute; inset: 0; background: rgba(6, 9, 18, .72); backdrop-filter: blur(6px); animation: fadeIn .25s var(--ease); }

.qpopup__win {
  position: relative;
  max-width: 680px; width: calc(100% - var(--gutter) * 2);
  margin: 6vh auto 0;
  max-height: 88vh;
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 45%), var(--stage-2);
  border: var(--border-2); border-radius: var(--radius-panel);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--glow-signal-lg);
  animation: popIn .35s var(--ease-out);
}

.qpopup__head {
  display: flex; align-items: flex-start; gap: var(--gap-sm);
  padding: 28px 28px 16px;
  border-bottom: var(--border);
}
.qpopup__title { flex: 1; }
.qpopup__head .popup__x { position: static; flex: none; }

.qpopup__body { overflow-y: auto; padding: 28px; -webkit-overflow-scrolling: touch; }
.qpopup__body .quiz__box { border: 0; padding: 0; max-width: none; background: none; box-shadow: none; }
.qpopup__body .quiz__box::before { display: none; }

@media (max-width: 699px) {
  .qpopup__win {
    margin: 0; width: 100%; max-width: none;
    height: 100%; max-height: 100%;
    border: 0; border-radius: 0;
  }
  .qpopup__head { padding: 16px var(--gutter); }
  .qpopup__body { padding: 12px var(--gutter) var(--gap); }
  .qpopup .quiz__tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ============ жидкое стекло ============ */

/* Один материал на плашки-подложки: геолокация, буллиты первого экрана,
   номера шагов, адрес и залы лофта. В покое — чистое стекло без цвета
   и без обводки, только блик и лёгкая муть (--glass-* в tokens.css).
   Цвет приходит единственный раз — кольцом света на наведении, у той
   стороны плашки, к которой подошёл курсор.

   Правило стоит в конце файла намеренно: те же элементы выше задают
   свой фон и рамку, специфичность у селекторов одинаковая — выигрывает
   тот, что ниже. */
.hero__geo,
.hero__bullets li,
.how__num,
.loft__geo,
.loft__badge,
.loft__halls li {
  position: relative;
  isolation: isolate;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: none;
  box-shadow: var(--glass-edge);
}

/* Карточка квиза — тот же материал, что у залов лофта. Попап
   (.qpopup__body .quiz__box) сильнее по специфичности и остаётся без подложки. */
.quiz__box {
  isolation: isolate;
  /* лёгкое затемнение поверх стекла — плашка спокойнее на ярком фоне */
  background: linear-gradient(rgba(0, 0, 0, .22), rgba(0, 0, 0, .22)), var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: none;
  box-shadow: var(--glass-edge);
}
@media (min-width: 1100px) {
  /* Ширина карточки = ширине заголовка над ней. Колонка сетки берёт
     max-content заголовка (но не шире контейнера), а contain: inline-size
     не даёт содержимому карточки распирать колонку — карточка просто
     растягивается на её ширину. Фон секции (.quiz::before) не трогаем. */
  .quiz > .wrap { display: grid; grid-template-columns: fit-content(100%); }
  .quiz .quiz__box { max-width: none; contain: inline-size; }
}

/* ---------- кольцо света на кромке (порт BorderGlow, reactbits.dev, MIT) ---------- */

/* Элемент .glass-glow добавляет сам setupGlassGlow() в app.js — без JS
   плашка остаётся просто чистым стеклом, поведение целиком
   прогрессивное. Он же на каждом движении мыши пишет сюда две
   переменные: --edge-proximity (0 в центре, 100 у самого края) и
   --cursor-angle (сторона, к которой подошёл курсор). */
.glass-glow {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 35;  /* с какой близости к краю кольцо начинает проявляться */
  --cone-spread: 30;       /* ширина сектора свечения, % */
  --glow-pad: 8px;         /* на сколько кольцо выходит за пределы плашки */

  position: absolute;
  inset: calc(var(--glow-pad) * -1);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: plus-lighter;
  transition: opacity .25s ease-out;

  /* конус, развёрнутый на курсор: свет виден только с той стороны,
     где он стоит, а не по всему периметру разом */
  mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    black calc((100 - var(--cone-spread)) * 1%)
  );
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
}
.glass-glow::before {
  content: '';
  position: absolute;
  inset: var(--glow-pad);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0    1px rgba(var(--glass-glow-rgb), .9),
    inset 0 0 2px  0    rgba(var(--glass-glow-rgb), .6),
    inset 0 0 5px  0    rgba(var(--glass-glow-rgb), .45),
    inset 0 0 10px 1px  rgba(var(--glass-glow-rgb), .3),
             0 0 2px  0    rgba(var(--glass-glow-rgb), .6),
             0 0 6px  0    rgba(var(--glass-glow-rgb), .4),
             0 0 14px 1px  rgba(var(--glass-glow-rgb), .25);
}

/* Курсор ушёл — гасим медленнее, чем ведём (.75s против .25s), иначе
   кольцо резко выключается вместо того, чтобы стечь. */
.hero__geo:not(:hover) .glass-glow,
.hero__bullets li:not(:hover) .glass-glow,
.how__num:not(:hover) .glass-glow,
.loft__geo:not(:hover) .glass-glow,
.loft__badge:not(:hover) .glass-glow,
.loft__halls li:not(:hover) .glass-glow {
  opacity: 0;
  transition: opacity .75s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .glass-glow { display: none; }
}