/* Новая главная. Глубокий изумрудно-синий с золотом.
   Раскладки чередуются, каждый экран имеет своё настроение фона. */

:root {
  --ink: #f2f7f5;
  --ink-soft: rgba(226, 238, 234, .78);
  --ink-faint: rgba(196, 214, 209, .52);

  --gold: #d9bd83;
  --gold-light: #f4e6c4;
  --gold-deep: #9a7c42;
  --gold-line: rgba(217, 189, 131, .3);
  --grad-gold: linear-gradient(180deg, #fbf1d8 0%, #ecd6a6 28%, #d9bd83 58%, #b1904f 100%);

  --sage: #a9c6ae;
  --sage-deep: #5f8468;
  --sage-line: rgba(169, 198, 174, .26);

  --panel: rgba(20, 58, 49, .72);
  --panel-line: rgba(217, 189, 131, .18);
  --shell: 88px;
  --bar: rgba(12, 46, 38, .38);  /* полоса шапки: стекло, тон задаётся по экрану */
}

* { box-sizing: border-box; }

/* Мобильные браузеры рисуют мгновенную серую вспышку по тапу — она и
   читалась как «кнопка сразу загорается». Убираем, отклик даём сами. */
* { -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #02100f;
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button, input, textarea, select { font: inherit; }

/* ══ шапка ══ */
.topbar {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0;
  height: var(--shell);
  display: flex; align-items: center; gap: 20px;
  padding: 0 clamp(16px, 4vw, 52px);
  /* Своей заливки по минимуму, остальное — размытый кадр под шапкой:
     так она подхватывает цвет того, что идёт следом, а не спорит с ним.
     Сверху чуть гуще, чтобы название и пункты меню читались всегда. */
  background: linear-gradient(180deg, rgba(2, 16, 14, .66) 0%, var(--bar) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  border-bottom: 1px solid var(--gold-line);
  transition: background-color .7s ease;
}

/* Цвет полосы под настроение экрана — взят из верха каждого фона.
   Держим прозрачным: читаемость даёт размытие, а не плотность заливки. */
body[data-tone="deep"]  { --bar: rgba(12, 52, 43, .2); }
body[data-tone="night"] { --bar: rgba(14, 58, 48, .2); }
body[data-tone="dawn"]  { --bar: rgba(18, 66, 55, .2); }
body[data-tone="ember"] { --bar: rgba(16, 61, 51, .2); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex: none; }
.brand__mark {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--gold-line); border-radius: 50%;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-family: Georgia, serif; font-size: 19px;
}
.brand__name { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.brand__name em { font-style: normal; font-size: 9.5px; font-weight: 400; letter-spacing: .05em; text-transform: none; color: var(--ink-faint); }

.topnav { display: flex; gap: 20px; margin-left: auto; }
.topnav button, .topnav .navout {
  position: relative;
  border: 0; background: none; padding: 6px 0; cursor: pointer;
  color: var(--ink-faint); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: color .3s;
}
/* Пункты на отдельные страницы выделены цветом, а не стрелкой. */
.topnav .navout { color: var(--gold); }

/* Наводка: золотая полоска выезжает под словом слева направо. */
.topnav button::after, .topnav .navout::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1);
}
.topnav button[aria-current="true"] { color: var(--gold); }
.topnav button[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) {
  .topnav button:hover, .topnav .navout:hover { color: var(--gold); }
  .topnav button:hover::after, .topnav .navout:hover::after { transform: scaleX(1); }
}
.topnav button:active, .navlegal:active { opacity: .6; transition: opacity .1s; }

.topact { display: flex; gap: 10px; flex: none; }
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  border: 1px solid var(--gold-line); border-radius: 8px; cursor: pointer;
  padding: 11px 18px; background: rgba(217, 189, 131, .07); color: var(--gold);
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s;
}
.btn--ghost { color: var(--ink-faint); background: none; }
.btn--big {
  padding: 15px 30px; font-size: 13px; color: #10202a;
  background: linear-gradient(180deg, #e6d0a0 0%, #d9bd83 55%, #c3a56b 100%) border-box;
  border-color: rgba(217, 189, 131, .75);
}

/* Подсветку даём только там, где курсор действительно есть. На телефоне
   ховер срабатывал от касания и оставался гореть после нажатия. */
@media (hover: hover) {
  .btn:hover { background: var(--gold); color: #10202a; border-color: var(--gold); }
  .btn--ghost:hover { color: var(--gold); background: rgba(217, 189, 131, .08); }
  .btn--big:hover {
    background: linear-gradient(180deg, #f2e4c6 0%, #e6d0a0 55%, #cfb076 100%) border-box;
    border-color: rgba(244, 230, 196, .85);
    transform: scale(1.025);
  }
}
/* Касание: мягкое короткое продавливание вместо вспышки. */
.btn {
  transition: background .45s ease, color .3s ease, border-color .45s ease,
              box-shadow .55s cubic-bezier(.2, .8, .2, 1),
              transform .3s cubic-bezier(.2, .8, .2, 1);
}
.btn--big { transition-duration: .6s, .3s, .6s, .7s, .38s; }
.btn:active { transform: scale(.965); }
.btn--big:active { transform: scale(.99); }

.burger { display: none; }

/* ══ колода ══ */
#deck { position: fixed; inset: 0; }

.scene {
  position: absolute; inset: 0;
  display: grid;
  padding: var(--shell) clamp(16px, 5vw, 76px) 100px;
  opacity: 0; visibility: hidden;
  /* Смена мягкая: экраны на короткое время перекрываются, и фон перетекает
     вместо того, чтобы переключаться. */
  transition: opacity .72s ease, visibility .72s;
}
.scene.is-active { opacity: 1; visibility: visible; }

/* фон: настроение задаётся классом tone */
.scene__bg {
  position: absolute; inset: 0;
  transform: scale(1.07);
  transition: transform 1.8s cubic-bezier(.2, .8, .2, 1);
}
.scene.is-active .scene__bg { transform: scale(1); }

/* Четыре настроения фона держатся одной гаммы и отличаются только
   глубиной — от самого тёмного к самому светлому. Раньше они расходились
   и по цвету, и по месту светового пятна, поэтому смена экрана читалась
   как рывок: «оп зелёная, оп тёмная». Теперь разница между соседними
   едва уловима, а по всей странице набирается заметный ход. */
.tone-deep  .scene__bg { background: radial-gradient(122% 96% at 62% 30%, #0a3128 0%, #041915 46%, #010a09 100%); }
.tone-night .scene__bg { background: radial-gradient(118% 98% at 44% 60%, #0c3830 0%, #05201b 47%, #020c0b 100%); }
.tone-dawn  .scene__bg { background: radial-gradient(122% 96% at 56% 36%, #104035 0%, #072720 45%, #02100e 100%); }
.tone-ember .scene__bg { background: radial-gradient(120% 94% at 46% 44%, #0e3b31 0%, #06231e 46%, #020e0c 100%); }

/* ══ кадр ступени ══
   Фотография идёт не картинкой, а фактурой: режим luminosity берёт от
   неё только свет и тень, а цвет остаётся наш, зелёный. Поэтому кадры
   не спорят с палитрой и не мешают читать текст поверх. */
.scene__photo {
  position: absolute; inset: 0; pointer-events: none;
  background-size: cover; background-position: center;
  /* Кадр виден как кадр. Приглушаем только насыщенность и яркость,
     чтобы фотографии не спорили с золотом и зелёным и чтобы поверх
     них читался текст. Затемнение под сам текст даёт вуаль ниже. */
  filter: saturate(.74) brightness(.72) contrast(1.08);
  transform: scale(1.02);
}

/* Наезд включается только там, где кадр действительно сменился: внутри
   одной ступени фотография стоит неподвижно и не отвлекает. */
@keyframes shot-in {
  from { transform: scale(1.11); }
  to   { transform: scale(1.02); }
}
.scene.shot-new .scene__photo { animation: shot-in 3.6s cubic-bezier(.2, .8, .2, 1) both; }

/* На титуле и во вступлении текст наезжает вместе с кадром: он не
   уезжает вниз, а идёт навстречу — грот и надпись движутся как одно. */
@keyframes text-in {
  from { transform: scale(.93); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.scene--cover.shot-new .panel__in,
#intro1.shot-new .panel__in,
#intro2.shot-new .panel__in {
  animation: text-in 3.6s cubic-bezier(.2, .8, .2, 1) both;
}

/* Какой кадр на каком экране — решает код: их несколько на ступень,
   и грузятся они по мере того, как человек до них доходит. */

/* мягкое свечение, медленно дышит */
.scene__glow {
  position: absolute; inset: -20%;
  background: radial-gradient(closest-side, rgba(169, 198, 174, .16), transparent 72%);
  opacity: 0;
  transition: opacity 1.4s ease;
}
.scene.is-active .scene__glow { opacity: 1; animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: translate3d(-4%, 2%, 0) scale(1); }
  to   { transform: translate3d(6%, -3%, 0) scale(1.12); }
}

/* зерно и виньетка — добавляют «плёнку», убирают ощущение плоской заливки */
.scene__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
/* Вуаль поверх кадра. Сверху и снизу густая — там шапка и плеер, и кадр
   должен уходить в тень; в середине светлее, чтобы фотография была
   видна. Почти чёрная: зелени в ней ровно столько, чтобы кадры не
   выпадали из гаммы, но не столько, чтобы красить всё подряд. */
.scene__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 13, 12, .92) 0%, rgba(5, 13, 12, .56) 26%,
                            rgba(5, 13, 12, .56) 70%, rgba(3, 9, 8, .95) 100%),
    radial-gradient(130% 90% at 50% 46%, rgba(6, 18, 16, .3) 0%, rgba(2, 8, 7, .72) 100%);
}

/* ══ раскладки ══
   Плашка всегда по центру. Разнообразие даёт не край экрана,
   а ширина, лёгкое смещение и настроение фона. */
.scene { align-items: center; justify-items: center; }

.lay-left  .scene__veil { background-position: 38% 50%, 38% 50%; }
.lay-right .scene__veil { background-position: 62% 50%, 62% 50%; }
.lay-split .scene__veil { background: linear-gradient(0deg, rgba(2, 9, 13, .9) 0%, rgba(2, 9, 13, .45) 60%, rgba(2, 9, 13, .6) 100%); }

/* ══ полотно с текстом ══
   Плашки нет намеренно: текст лежит прямо на сцене, а его край не
   обрезается, а растворяется. Глубину даёт затемняющая вуаль сцены. */
.panel {
  position: relative; z-index: 3;
  width: min(660px, 100%);
  max-height: 100%;
  /* Текст ведёт только плеер: пальцем и колесом его не промотать,
     иначе мимо замка можно было бы заглянуть вперёд. */
  overflow-y: hidden;
  overscroll-behavior: contain;
  padding: calc(clamp(26px, 3vw, 44px) + 24px) clamp(26px, 3vw, 44px);
  scrollbar-width: none;
  opacity: 0;
  /* Без масштаба: мелкий зум на каждом переходе мусолил глаза. Текст
     просто всплывает, а увеличение осталось только у кадра. */
  transform: translateY(26px);
  transition: opacity .46s ease .06s, transform .62s cubic-bezier(.16, .84, .28, 1) .06s;
}
.scene.is-active .panel { opacity: 1; transform: none; }

/* Растворение краёв. Обе величины ставит JS по фактической прокрутке:
   0 — когда растворять нечего (текст помещается целиком либо мы у края),
   и плавно растут к максимуму по мере ухода текста за границу. Поэтому
   переход получается непрерывным и transition здесь не нужен. */
.panel {
  --fade-top: 0px;
  --fade-bot: 0px;
  --fade: linear-gradient(to bottom,
    transparent 0,
    rgba(0, 0, 0, .05) calc(var(--fade-top) * .28),
    rgba(0, 0, 0, .32) calc(var(--fade-top) * .58),
    #000 var(--fade-top),
    #000 calc(100% - var(--fade-bot)),
    rgba(0, 0, 0, .32) calc(100% - var(--fade-bot) * .58),
    rgba(0, 0, 0, .05) calc(100% - var(--fade-bot) * .28),
    transparent 100%);
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}

/* Длинный текст докручивается до середины экрана, а не упирается
   последней строкой в нижний край. Запас нужен только там, где текст
   и правда не помещается, иначе он сам создаст лишнюю прокрутку. */
.panel.is-over { padding-bottom: 32vh; }
/* На телефоне экран вытянут, и та же доля высоты даёт заметно больше
   пустоты под текстом — здесь запас меньше. */
@media (max-width: 900px) {
  .panel.is-over { padding-bottom: 17vh; }
}

/* Ступень, надзаголовок и сам заголовок стоят по центру полотна,
   абзацы остаются по левому краю — так колонка читается ровнее. */
.panel .step { display: block; width: fit-content; margin-inline: auto; }
.panel .eyebrow { display: block; text-align: center; }
.panel h1, .panel h2 { text-align: center; margin-inline: auto; }

/* Титул и короткие ударные экраны не прокручиваются вовсе — растворять
   там нечего, а маска только приглушала бы последнюю строку впустую. */
.scene--cover .panel,
.scene--punch .panel { -webkit-mask-image: none; mask-image: none; padding-bottom: 0; }

/* Растворение краёв работает на всех прокручиваемых блоках, не только на
   сплошном тексте: у карточек, линейки и анкеты содержимое тоже не должно
   врезаться в шапку сверху и в плеер снизу — оно уходит в дымку. */

.panel::-webkit-scrollbar { width: 0; height: 0; }

/* Содержимое держится центра, а не левого края. Списки, карточки и
   контакты центрируем как блоки: текст внутри них остаётся у своего
   маркера или линии, иначе строки разъезжаются и читать труднее. */
.panel__in { display: block; text-align: center; }
.panel .cards, .panel .contacts { text-align: left; }

/* При протягивании ход повторяет палец один в один. Переход здесь
   запускал догоняющую анимацию на каждое новое значение сдвига, а палец
   присылает их каждые несколько миллисекунд — анимации накладывались, и
   текст мелко дрожал. Отпускание снимает класс, и возврат снова плавный. */
.panel { transition: opacity .46s ease .06s, transform .62s cubic-bezier(.16, .84, .28, 1) .06s; }

/* ширина и лёгкое смещение — вместо прижатия к краям */
.lay-split .panel { width: min(820px, 100%); }
.lay-wide  .panel { width: min(1040px, 100%); }

/* ══ типографика ══ */
.step {
  display: inline-block; margin-bottom: 13px; padding: 4px 10px;
  border: 1px solid var(--sage-line); border-radius: 8px;
  color: var(--sage); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
}
.eyebrow { margin: 0 0 9px; color: var(--ink-faint); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }

.panel h1, .panel h2 {
  /* Под заголовком — воздух и тонкая черта. Без них он сливался с
     первым абзацем в один ком: глаз не видел, где кончается название
     и начинается речь. Черта держит и ритм, и взгляд. */
  position: relative;
  margin: 0 0 34px; padding-bottom: 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(25px, 3.4vw, 40px);
  line-height: 1.13;
  letter-spacing: -.012em;
  text-wrap: balance;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.panel h1::after, .panel h2::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 46px; height: 1px; margin-left: -23px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 30%, var(--gold-deep) 70%, transparent);
}
.panel p { margin: 0 0 15px; color: var(--ink-soft); text-wrap: pretty; }
.panel p:last-child { margin-bottom: 0; }

/* ══ слова ══
   Непрочитанное стоит приглушённым, и по ходу чтения слова загораются
   одно за другим — как строка в караоке. */
.panel__in .w { opacity: .38; transition: opacity .4s ease; }
.panel__in .w.is-lit { opacity: 1; }
body.is-fast .panel__in .w { transition: none; }
@media (prefers-reduced-motion: reduce) { .panel__in .w { transition: none; } }

/* Перечисления стоят на той же оси, что и остальной текст. Прежние
   маркеры — линия у цитат и чёрточка у пунктов — висели слева и уводили
   строки с центра. Теперь метка симметрична: у цитаты короткая черта
   сверху по центру, у пункта — тире в самой строке. */
/* Ни черт, ни тире перед строками: разделяет их воздух. Значки
   повторялись у каждой строки подряд и читались как рябь. */
.quotes { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 26px; }
.quotes li {
  text-wrap: pretty; text-align: center;
  color: var(--ink); font-style: italic;
}

.lines { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 18px; }
.lines li { text-wrap: pretty; text-align: center; color: var(--ink-soft); }

/* ══ крупные слова по одному ══
   Там, где в тексте шёл список коротких команд, они выходят поодиночке
   во весь экран: на каждом слове человек останавливается, вместо того
   чтобы пробежать восемь строк мелким шрифтом. Слой лежит поверх
   текста, поэтому ничего не двигает под собой. */
.solo {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  padding: var(--shell) clamp(16px, 6vw, 80px);
  pointer-events: none;
}
.solo b {
  grid-area: 1 / 1;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400; font-size: clamp(38px, 8.4vw, 104px); line-height: 1.05;
  text-align: center; text-wrap: balance;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity .5s ease, transform .7s cubic-bezier(.16, .84, .28, 1);
}
.solo b.is-on { opacity: 1; transform: none; }

/* Вопрос и ответ идут тем же слоем: вопрос крупно золотом, ответ
   спокойнее и уже, чтобы его можно было читать строка за строкой. */
.solo--faq b { font-size: clamp(22px, 3.2vw, 38px); max-width: 20ch; }
.solo--faq b.qa--a {
  max-width: 44ch;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: clamp(15px, 1.7vw, 21px); line-height: 1.6;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--ink-soft);
}

/* Пока идёт крупный кусок, всё остальное на экране убрано совсем:
   полупрозрачный текст за словом просвечивал и мешал читать. */
.scene.has-solo .panel__in { opacity: 0; }

/* На экране вопросов черта под заголовком не нужна: заголовок там
   живёт мгновение и сразу уступает место самим вопросам. */
.scene--faq h2::after { display: none; }

/* Ответ загорается по словам — тем же караоке, что и основной текст. */
.solo .w { opacity: .3; transition: opacity .4s ease; }
.solo .w.is-lit { opacity: 1; }
body.is-fast .solo .w { transition: none; }
.panel__in { transition: opacity .6s ease; }

/* ══ титул и полноэкранные фразы ══ */
.scene--cover .panel, .scene--punch .panel {
  padding: 0;
  width: min(900px, 100%); border: 0; background: none; box-shadow: none;
  text-align: center; padding: 0; overflow: visible;
}
.scene--cover .panel::before, .scene--cover .panel::after,
.scene--punch .panel::before, .scene--punch .panel::after { display: none; }

/* На титуле и ударных фразах заголовок — это всё содержимое экрана,
   отбивать его не от чего. */
.scene--cover h1::after, .scene--punch h2::after { display: none; }
.scene--cover h1, .scene--punch h2 { padding-bottom: 0; }

.scene--punch h2 { font-size: clamp(28px, 5.6vw, 64px); line-height: 1.05; }
.scene--cover h1 { font-size: clamp(32px, 6.6vw, 74px); line-height: 1.02; }
.scene--cover p, .scene--punch p { max-width: 40rem; margin-left: auto; margin-right: auto; }

/* ══ проявление заголовка ══
   Заголовок наводится на резкость и подаётся снизу — на полсекунды
   позже плашки, чтобы это читалось как отдельное движение, а не общий фейд. */
.panel h1, .panel h2 {
  filter: blur(5px);
  opacity: 0;
  transform: translateY(16px);
  transition: filter .5s cubic-bezier(.16, .8, .24, 1),
              opacity .38s ease,
              transform .5s cubic-bezier(.16, .8, .24, 1);
}
.scene.is-active .panel h1,
.scene.is-active .panel h2 {
  filter: blur(0);
  opacity: 1;
  transform: none;
  transition-delay: .14s;
}

/* Наплыв с размытием на крупных заголовках. Медленнее и мягче,
   чтобы читалось как наводка резкости, а не как рывок. */
.scene--punch h2, .scene--cover h1 {
  filter: blur(16px);
  opacity: 0;
  transform: scale(1.04);
  transition: filter 1.5s cubic-bezier(.16, .8, .24, 1) .2s,
              opacity 1.2s ease .2s,
              transform 1.6s cubic-bezier(.16, .8, .24, 1) .2s;
}
.scene.is-active.scene--punch h2,
.scene.is-active.scene--cover h1 { filter: blur(0); opacity: 1; transform: none; }

/* ══ заставка уровня ══
   Между уровнями текст не идёт сразу: сперва название уровня золотом
   во весь экран, чтобы смена главы была видна, а не проскакивала. */
.scene--level .panel { width: min(1100px, 100%); }
.scene--level h2 {
  margin: 0; padding: .08em .12em;
  /* Крупно, но с запасом: прежний размер упирался словами в края и
     срезал первую букву. Ниже потолок и шире поля. */
  font-size: clamp(30px, 6.4vw, 88px); line-height: 1.08;
  letter-spacing: -.01em; text-wrap: balance;
}

/* ══ карточки ══ */
.cards { display: grid; gap: 13px; margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Плашки — матовое стекло поверх кадра: они не красятся своей краской,
   а берут цвет той фотографии, что стоит за ними. */
.card, .lineup__col {
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}
.card { padding: 20px; border: 1px solid var(--panel-line); border-radius: 12px; background: rgba(var(--tint, 6, 16, 14), .45); transition: border-color .3s, transform .3s; }
.card:hover { border-color: var(--gold-line); transform: translateY(-3px); }
.card__tag { display: block; margin-bottom: 8px; color: var(--sage); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; }
.card h3 { margin: 0 0 6px; font-family: Georgia, serif; font-weight: 400; font-size: 21px; color: var(--ink); }
.card__price { display: block; margin-bottom: 10px; font-size: 20px; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card p { font-size: 14.5px; }

/* ══ линейка продуктов ══ */
.lineup { display: grid; gap: 18px; margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lineup__col { padding: 18px; border: 1px solid var(--panel-line); border-radius: 12px; background: rgba(var(--tint, 6, 16, 14), .4); }
.lineup__tag { display: block; margin-bottom: 12px; color: var(--sage); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
/* Названия стоят по центру плашки: без цен и без чёрточек слева строка
   висела у края и выглядела обрубленной. */
.lineup ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.lineup li { color: var(--ink); text-align: center; text-wrap: balance; }
.lineup li > span:last-child:not(:first-child) { display: block; margin-top: 2px; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ══ вопросы ══ */
.faq { display: grid; }
.faq details { border-bottom: 1px solid rgba(196, 214, 209, .12); padding: 13px 0; }
.faq summary { cursor: pointer; list-style: none; color: var(--ink); font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
/* Раскрытый вопрос виден по самому ответу, значок не нужен. */
.faq details[open] summary { color: var(--gold); }
.faq p { margin: 9px 0 0; font-size: 14.5px; }

/* ══ служебное ══ */
.todo { margin-top: 17px; padding: 9px 13px; border-left: 2px solid var(--gold); background: rgba(217, 189, 131, .08); color: var(--gold); font-size: 12.5px; }
.linkout { display: inline-block; margin-top: 16px; color: var(--sage); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--sage-line); }
.linkout:hover { color: var(--gold); border-color: var(--gold-line); }
.bigcta { margin-top: 20px; }

/* ══ отклик на прикосновение ══
   Кнопка отзывается на наведение и продавливается под нажатием,
   а по золоту время от времени проходит блик. */
.btn, .next, .card, .contacts a, .linkout, .faq summary {
  transition: background .3s, color .3s, border-color .3s,
              box-shadow .35s, transform .14s cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) { .btn:hover { box-shadow: 0 5px 18px rgba(217, 189, 131, .14); } }
.btn:active, .next:active { transform: translateY(1px) scale(.985); }
@media (hover: hover) {
  .btn--big:hover { box-shadow: 0 10px 32px rgba(217, 189, 131, .2); }
}
.next:hover svg { transform: translateY(2px); }
.next svg { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }

.btn--big, .cookie .btn { position: relative; overflow: hidden; }
.btn--big::after, .cookie .btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, .2) 50%, transparent 60%);
  transform: translateX(-130%);
  animation: goldsheen 7.5s ease-in-out infinite;
}
.cookie .btn::after { background: linear-gradient(104deg, transparent 38%, rgba(217, 189, 131, .3) 50%, transparent 62%); }
@keyframes goldsheen {
  0%, 68% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}

/* Карточки и строки — короткий отклик, чтобы страница ощущалась живой. */
.faq summary:hover { color: var(--gold); }

/* ══ подвал с документами ══ */
/* Над плеером, в одну строку: от переноса четвёртая ссылка наезжала
   на подпись со ступенью. Ширину держим в пределах экрана. */
.legalbar {
  position: fixed; z-index: 55; left: 50%; bottom: 104px; transform: translateX(-50%);
  display: flex; gap: 16px; justify-content: center; white-space: nowrap;
  max-width: calc(100% - 32px); overflow: hidden;
  font-size: 10.5px; letter-spacing: .06em;
}
.legalbar a { color: var(--ink-faint); text-decoration: none; transition: color .3s; }
.legalbar a:hover { color: var(--gold); }

/* ══ модальные окна: анкета и вход ══ */
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 20px;
  background: rgba(2, 9, 13, .86);
  backdrop-filter: blur(7px);
}
.modal[hidden] { display: none; }
.modal__box {
  position: relative; width: min(660px, 100%); max-height: 88vh; overflow-y: auto;
  padding: clamp(22px, 3.6vw, 40px);
  border: 1px solid var(--panel-line); border-radius: 12px;
  background: rgba(var(--tint, 16, 50, 43), .97); box-shadow: 0 40px 130px rgba(0, 0, 0, .6);
  scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent;
}
.modal__box h2 {
  margin: 0 0 10px; font-family: Georgia, serif; font-weight: 400;
  font-size: clamp(24px, 3.2vw, 34px);
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.modal__box > p { color: var(--ink-soft); margin: 0 0 18px; font-size: 14.5px; }
.modal__close {
  position: absolute; top: 12px; right: 13px; width: 32px; height: 32px;
  border: 1px solid var(--panel-line); border-radius: 8px; background: none;
  color: var(--ink-faint); font-size: 19px; line-height: 1; cursor: pointer;
}
.modal__close:hover { color: var(--gold); border-color: var(--gold-line); }

.fgroup { margin-bottom: 22px; }
.fgroup__title {
  margin: 0 0 12px; padding-bottom: 7px;
  border-bottom: 1px solid var(--panel-line);
  color: var(--sage); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
}
.field { margin-bottom: 15px; }
.field > label { display: block; margin-bottom: 6px; color: var(--ink); font-size: 14.5px; }
.field .hint { display: block; margin-bottom: 6px; color: var(--ink-faint); font-size: 12.5px; }
.field .req { color: var(--gold); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"],
.field input[type="password"], .field textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--panel-line); border-radius: 8px;
  background: rgba(6, 26, 22, .55); color: var(--ink);
}
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.opts { display: grid; gap: 7px; }
.opts label { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-soft); font-size: 14.5px; cursor: pointer; }
.opts input { margin-top: 4px; accent-color: var(--sage); }

.consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; color: var(--ink-soft); font-size: 13.5px; }
.consent input { margin-top: 4px; accent-color: var(--sage); }
.consent a { color: var(--sage); }

.formerr { margin-top: 12px; color: #ff9d8a; font-size: 13.5px; }
.formok { text-align: center; padding: 20px 0; }

.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tabs button {
  flex: 1; padding: 11px; border: 1px solid var(--panel-line); border-radius: 8px;
  background: none; color: var(--ink-faint); cursor: pointer;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.tabs button.is-active { border-color: var(--gold); color: var(--gold); background: rgba(217, 189, 131, .08); }

/* ══ телефон ══ */
@media (max-width: 900px) {
  :root { --shell: 64px; }
  .topact { display: none; }
  .burger {
    display: grid; place-items: center; margin-left: auto;
    width: 40px; height: 40px; border: 1px solid var(--panel-line); border-radius: 8px;
    background: none; cursor: pointer;
  }
  .burger span, .burger span::before, .burger span::after {
    display: block; width: 17px; height: 1px; background: var(--ink); content: "";
  }
  .burger span::before { transform: translateY(-6px); }
  .burger span::after { transform: translateY(5px); }

  .topnav {
    display: flex; position: absolute; top: var(--shell); left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0; padding: 4px 16px 12px;
    max-height: calc(100vh - var(--shell) - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Выезжающее меню — то же стекло, что и шапка: берёт цвет кадра под
       собой и не спорит с тёплой полосой сверху. Затемняем снятой
       яркостью, чтобы пункты читались; текст сцены под меню прячем (ниже),
       иначе он просвечивал бы сквозь стекло. */
    background: linear-gradient(180deg, rgba(2, 16, 14, .62) 0%, rgba(3, 14, 13, .72) 100%);
    -webkit-backdrop-filter: blur(30px) saturate(168%) brightness(.72);
    backdrop-filter: blur(30px) saturate(168%) brightness(.72);
    border-bottom: 1px solid var(--gold-line);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .55);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .26s ease, transform .34s cubic-bezier(.2, .8, .2, 1), visibility .34s;
  }
  .topnav.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
  }

  .topnav button, .topnav .navout {
    padding: 10px 0; text-align: left; font-size: 12.5px;
    color: var(--ink-soft);
    border-bottom: 1px solid rgba(196, 214, 209, .09);
  }
  /* Ссылки на документы — отдельным блоком, помельче и приглушённее. */
  .navlegal {
    padding: 8px 0; font-size: 11px; letter-spacing: .05em;
    color: var(--ink-faint) !important; text-decoration: none;
    border-bottom: 1px solid rgba(196, 214, 209, .07);
  }
  /* Блок отделяет одна золотая линия: серую границу последней кнопки
     убираем, иначе их было две подряд. */
  .topnav button:last-of-type { border-bottom: 0; }
  .topnav .navlegal:first-of-type {
    margin-top: 9px; padding-top: 11px;
    border-top: 1px solid var(--gold-line);
  }
  .navlegal:last-child { border-bottom: 0; }
  .topnav.is-open + .topact { display: flex; }

  /* При открытом меню подсказка про листание только мешает. */
  body.nav-open .scrubhint { opacity: 0 !important; }
  /* Текст сцены под раскрытым меню гасим: сквозь стекло он читался как
     вторая надпись поверх пунктов. */
  body.nav-open .scene.is-active .panel { opacity: 0; transition: opacity .2s ease; }

  .scene { padding: var(--shell) 13px 84px; justify-items: stretch !important; align-items: center; }
  .panel, .lay-split .panel, .lay-wide .panel { width: 100%; }
  .scene__veil { background: linear-gradient(180deg, rgba(2, 9, 13, .3), rgba(2, 9, 13, .55)) !important; }
  .legalbar { display: none; }
  .next { right: 13px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene, .panel, .scene__bg, .scene__glow,
  .scene--punch h2, .scene--cover h1 { transition-duration: .01ms !important; animation: none !important; }
}

/* ══ оживление: содержимое проявляется по очереди ══ */
.panel__in > *,
.panel__in .cards > *,
.panel__in .lineup > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.scene.is-active .panel__in > *,
.scene.is-active .panel__in .cards > *,
.scene.is-active .panel__in .lineup > * {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 70ms + 260ms);
}
.scene--cover .panel__in > *, .scene--punch .panel__in > * { transform: translateY(20px); }

/* Заголовок берёт градиент ровно по своей высоте — без полосы,
   которая раньше проезжала поперёк текста. */
.panel h1, .panel h2 { background-size: 100% 100%; background-repeat: no-repeat; }

/* цитаты и списки чуть живее */
.lines li { transition: color .4s; }
.lines li:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .panel__in > *, .panel__in .cards > *, .panel__in .lineup > * { opacity: 1 !important; transform: none !important; }
  /* Заголовок наводится на резкость — при выключенных анимациях
     размытие нужно снять, иначе он останется размытым навсегда. */
  .panel h1, .panel h2 { filter: none !important; transition-duration: .01ms !important; animation: none !important; }
  .btn--big::after, .cookie .btn::after { animation: none; opacity: 0; }
}

/* прокрутка внутри плашки — только когда текст не помещается */
.panel { overflow-x: hidden; }

/* Строки подаются снизу вслед за заголовком. Ход больше и время короче,
   иначе движение идёт медленнее порога, на котором глаз его замечает. */
.panel__in > *, .panel__in .cards > *, .panel__in .lineup > * {
  transform: translateY(18px);
  transition-duration: .52s;
}
.scene.is-active .panel__in > *,
.scene.is-active .panel__in .cards > *,
.scene.is-active .panel__in .lineup > * {
  transition-delay: calc(var(--i, 0) * 46ms + 300ms);
}


/* Кнопки внутри плашки: правило ступенчатого проявления перебивало их
   собственный переход, и фон со свечением менялись мгновенно — отсюда и
   «загорается в миг». Задаём переход адресно, оставляя очередь появления.
   При наведении задержку снимаем, иначе свечение начиналось бы с опозданием. */
.scene .panel__in .btn {
  transition: opacity .38s ease,
              transform .32s cubic-bezier(.2, .8, .2, 1),
              background .5s ease,
              border-color .5s ease,
              box-shadow .6s cubic-bezier(.2, .8, .2, 1),
              color .3s ease;
  transition-delay: calc(var(--i, 0) * 46ms + 300ms);
}
.scene .panel__in .btn:hover,
.scene .panel__in .btn:active { transition-delay: 0s; }
/* ══ куки-баннер ══ */
.cookie {
  position: fixed; z-index: 88; left: 50%; bottom: 108px;
  transform: translate(-50%, 20px);
  width: min(720px, calc(100% - 28px));
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--panel-line); border-radius: 14px;
  background: rgba(var(--tint, 4, 24, 24), .96);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.cookie.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.cookie p { margin: 0; flex: 1 1 320px; color: var(--ink-soft); font-size: 13.5px; }
.cookie a { color: var(--sage); }
.cookie__act { display: flex; gap: 9px; flex: none; }
.cookie .btn { padding: 10px 16px; font-size: 11px; }

@media (max-width: 900px) {
  .cookie { bottom: 118px; padding: 14px 16px; }
  .cookie__act { width: 100%; }
  .cookie__act .btn { flex: 1; }
}

/* Титул и полноэкранные фразы не прокручиваются никогда —
   это кадры, а не текст для чтения. */
.scene--cover .panel,
.scene--punch .panel { overflow: visible !important; height: auto !important; }

/* контакты на финальном экране */
.contacts { display: grid; gap: 9px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--panel-line); }
.contacts a { display: flex; gap: 10px; align-items: baseline; color: var(--ink-soft); text-decoration: none; font-size: 15px; transition: color .3s; }
.contacts a:hover { color: var(--gold); }
.contacts span { flex: none; width: 88px; color: var(--ink-faint); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }

/* шапка на телефоне: связаться можно сразу, кабинет уходит в меню */
@media (max-width: 900px) {
  .topact { display: flex; margin-left: auto; }
  .topact .btn--ghost { display: none; }
  .topact .btn { padding: 9px 13px; font-size: 10.5px; letter-spacing: .08em; }
  .burger { margin-left: 10px; }
  .topnav.is-open + .topact { display: flex; }
}

.only-mobile { display: none !important; }
@media (max-width: 900px) { .topnav .only-mobile { display: block !important; color: var(--gold); } }

/* шапка на телефоне: размытие чуть слабее — на слабых GPU оно дороже */
@media (max-width: 900px) {
  .topbar { -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
}

/* ══ плеер чтения ══
   Текст едет сам, а здесь им управляют: пуск, пауза, возврат назад и
   скорость. Перемотки вперёд нет — до конца доходят чтением. */
.player {
  position: fixed; z-index: 64; left: 0; right: 0; bottom: 0;
  padding: 12px clamp(16px, 4vw, 52px) 16px;
  /* Нейтральная, а не зелёная подложка: цвет снизу теперь даёт сам
     кадр через размытие ниже, а не глухая зелёная заливка. */
  background: linear-gradient(180deg, transparent 0%, rgba(5, 11, 10, .5) 46%, rgba(3, 8, 7, .74) 100%);
}

/* Размытие под плеером вынесено в отдельный слой с маской. Пока оно
   стояло на самой полосе, у него был прямоугольный край, и поперёк
   кадра шла видимая граница между чётким и размытым. */
.player::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Размытие берёт цвет кадра под плеером — полоса идёт за фоном
     так же, как шапка сверху. Приглушаем яркость ради контраста. */
  -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(.82);
  backdrop-filter: blur(16px) saturate(150%) brightness(.82);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 58%);
  mask-image: linear-gradient(180deg, transparent 0, #000 58%);
}

.player__step {
  margin: 0 0 9px; text-align: center;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint);
}
.player__step b { color: var(--gold); font-weight: 400; }

.player__rail { display: flex; align-items: center; gap: 14px; }

.player__btn {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--panel-line);
  background: rgba(4, 18, 25, .6);
  color: var(--ink); cursor: pointer;
  transition: border-color .3s, color .3s;
}
.player__btn svg { width: 16px; height: 16px; fill: currentColor; }
.player__btn:active { transform: scale(.94); }
@media (hover: hover) { .player__btn:hover { border-color: var(--gold); color: var(--gold); } }
.player .i-pause { display: none; }
.player.is-playing .i-play { display: none; }
.player.is-playing .i-pause { display: block; }

.player__time {
  flex: none; font-size: 12px; white-space: nowrap;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.player__time b { color: var(--gold); font-weight: 400; }
.player__time i { margin: 0 5px; font-style: normal; opacity: .45; }

/* Полоса высокая, а видимая нить внутри тонкая: так в неё легко попасть
   пальцем, не утолщая саму линию. */
.player__line {
  position: relative; flex: 1; height: 24px;
  cursor: pointer; touch-action: none; user-select: none;
}
.player__line::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 4px; margin-top: -2px; border-radius: 4px;
  background: rgba(196, 214, 209, .16);
}
.player__read, .player__at {
  position: absolute; left: 0; top: 50%; width: 0; height: 4px;
  margin-top: -2px; border-radius: 4px;
}
.player__read { background: rgba(217, 189, 131, .24); }   /* что уже прочитано */
.player__at { background: var(--grad-gold); }             /* где человек сейчас */

.player__knob {
  position: absolute; top: 50%; left: 0;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px rgba(217, 189, 131, .15);
  transition: transform .2s ease;
}
.player__line:hover .player__knob, .player.is-drag .player__knob { transform: scale(1.3); }

/* засечки на границах ступеней */
.player__tick {
  position: absolute; top: 50%; width: 2px; height: 10px;
  margin-top: -5px; border-radius: 1px;
  background: rgba(2, 16, 15, .85);
}

.player__speed {
  flex: none; min-width: 48px; padding: 7px 10px;
  border: 1px solid var(--panel-line); border-radius: 7px;
  background: rgba(4, 18, 25, .6);
  color: var(--ink-soft); cursor: pointer;
  font-size: 11.5px; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  transition: border-color .3s, color .3s, box-shadow .3s;
}
@media (hover: hover) { .player__speed:hover { border-color: var(--gold); color: var(--gold); } }
/* когда человек упёрся в замок, подсказываем, чем его обойти честно */
.player.is-hint .player__speed {
  border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 20px rgba(217, 189, 131, .34);
}

/* разделы, до которых ещё не дочитали */
.topnav button.is-locked { opacity: .3; cursor: not-allowed; }
.topnav button.is-locked::after { display: none; }

/* ══ всплывающая подсказка ══ */
.nudge {
  position: fixed; z-index: 72; left: 50%; bottom: 112px;
  transform: translate(-50%, 8px);
  max-width: min(540px, calc(100% - 26px));
  padding: 11px 19px; border-radius: 999px;
  border: 1px solid var(--gold-line);
  background: rgba(4, 26, 24, .96);
  color: var(--ink-soft);
  font-size: 12.5px; text-align: center; text-wrap: balance;
  opacity: 0;
  transition: opacity .32s ease, transform .32s ease;
}
.nudge.is-on { opacity: 1; transform: translate(-50%, 0); }
.nudge button {
  border: 0; background: none; padding: 0; margin-left: 6px;
  color: var(--gold); font: inherit; text-decoration: underline; cursor: pointer;
}

@media (max-width: 900px) {
  .player { padding: 9px 12px 13px; }
  .player__rail { gap: 9px; }
  .player__btn { width: 33px; height: 33px; }
  .player__step { margin-bottom: 6px; font-size: 10px; letter-spacing: .1em; }
  .player__time { font-size: 11px; }
  .player__time i, .player__time [data-total] { display: none; }
  .player__speed { min-width: 42px; padding: 6px 8px; font-size: 11px; }
  .nudge { bottom: 100px; padding: 10px 15px; font-size: 12px; }
}

/* ══ цифры ══
   Georgia рисует старостильные знаки: они скачут по базовой линии и
   выглядят кривыми. Cambria и Times дают ровные лининговые. */
.card__price, .lineup li > span:last-child, .price, .fmt__price {
  font-family: Cambria, "Times New Roman", Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ══ содержимое въезжает следом за плашкой ══
   Плашка уже появляется на .is-active; внутренние блоки подхватывают
   движение с небольшим сдвигом, поэтому экран собирается, а не
   возникает целиком. */
@media (prefers-reduced-motion: no-preference) {
  .scene .card,
  .scene .lineup__col,
  .scene .quotes li,
  .scene .lines li,
  .scene .fields > * {
    opacity: 0;
    transform: translateY(13px);
    transition: opacity .5s ease, transform .55s cubic-bezier(.16, .84, .28, 1);
  }
  .scene.is-active .card,
  .scene.is-active .lineup__col,
  .scene.is-active .quotes li,
  .scene.is-active .lines li,
  .scene.is-active .fields > * { opacity: 1; transform: none; }

  .scene.is-active .card:nth-child(2),
  .scene.is-active .lineup__col:nth-child(2) { transition-delay: .09s; }
  .scene.is-active .card:nth-child(3),
  .scene.is-active .lineup__col:nth-child(3) { transition-delay: .17s; }

  .scene.is-active .quotes li:nth-child(2),
  .scene.is-active .lines li:nth-child(2) { transition-delay: .05s; }
  .scene.is-active .quotes li:nth-child(3),
  .scene.is-active .lines li:nth-child(3) { transition-delay: .1s; }
  .scene.is-active .quotes li:nth-child(4),
  .scene.is-active .lines li:nth-child(4) { transition-delay: .15s; }
  .scene.is-active .quotes li:nth-child(n + 5),
  .scene.is-active .lines li:nth-child(n + 5) { transition-delay: .2s; }
}

/* Позиция без цены: пометка «ждём описание» не должна выглядеть
   как значение — приглушаем и убираем золото. */
.lineup li > span.is-soon {
  color: var(--ink-faint); font-style: italic; font-size: 12.5px; letter-spacing: .01em;
}

/* На узких экранах бренд, кнопка и бургер вместе не помещались, и бургер
   уезжал за правый край. Убираем подпись под названием и ужимаем зазоры —
   этого хватает, чтобы всё встало в 360px. */
@media (max-width: 560px) {
  .topbar { gap: 10px; padding-left: 13px; padding-right: 13px; }
  .brand { gap: 9px; }
  .brand__name em { display: none; }
  .topact .btn { padding: 9px 11px; letter-spacing: .06em; }
  .burger { margin-left: 4px; }
}