/* ============================================================
   MASTERATMA.COM — «Вход в новый свет»
   Дизайн-система онлайн-ретрита с Мастером Сальвадором Атмой.

   Драматургия страницы — сам путь: тьма порога, трещина, поток,
   новый свет. Поэтому фон, акценты и свечение меняются по мере
   прокрутки: переменная --journey (0…1) ведёт всю палитру.

   Порядок разделов:
     01  Токены
     02  Сброс и основа
     03  Фон: аврора, частицы, световые лучи
     04  Типографика
     05  Раскрытия и движение
     06  Кнопки
     07  Шапка и навигация
     08  Первый экран
     09  Стекло, карточки, сетки
     10  Разделы страницы
     11  Тарифы
     12  Форма регистрации
     13  Аккордеон, отзывы, видео
     14  Подвал
     15  Служебные страницы
     16  Адаптив и бережный режим
   ============================================================ */

/* ============================================================
   01  ТОКЕНЫ
   ============================================================ */

:root {
  /* Тьма — три ступени глубины */
  --void:        #04040c;
  --void-2:      #08061a;
  --ink:         #120d26;

  /* Спектр пути: фиолетовый → пурпур → золото → бирюза */
  --violet:      #7a45e8;
  --violet-deep: #3d2b8f;
  --magenta:     #e0479b;
  --rose:        #ff8ec0;
  --amber:       #f7b955;
  --gold:        #ffd68a;
  --gold-soft:   #f0dbb0;
  --aqua:        #46e0d2;
  --cyan:        #7ef0ff;

  /* Свет */
  --cream:       #f8f2e8;
  --mist:        rgba(248, 242, 232, .66);
  /* Прозрачность .42 давала контраст 3.73:1 — ниже нормы 4.5:1,
     а этим цветом набран самый мелкий текст на сайте (12–13 px):
     подписи, приписки, сноски. Именно там читаемость важнее всего.
     На .60 получается 6.2:1 — с запасом, и оттенок остаётся
     приглушённым. */
  --mist-dim:    rgba(248, 242, 232, .60);
  --hair:        rgba(248, 242, 232, .10);
  --hair-warm:   rgba(255, 214, 138, .22);

  /* Акцент раздела. Каждый section переопределяет его — так цвет
     ведёт читателя вниз, от фиолетового порога к золотому свету. */
  --accent:      var(--gold);
  --accent-2:    var(--violet);
  --accent-rgb:  255, 214, 138;

  /* Шрифты */
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Ритм */
  --page:      1280px;
  --narrow:    780px;
  --gutter:    clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(6rem, 13vh, 11rem);

  /* Движение */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur:       .9s;

  /* Прогресс прокрутки, 0…1. Пишется из motion.js. */
  --journey: 0;
  --scroll-y: 0px;

  color-scheme: dark;
}

/* ============================================================
   02  СБРОС И ОСНОВА
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, .95rem + .25vw, 1.115rem);
  line-height: 1.75;
  letter-spacing: .002em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

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

::selection {
  background: rgba(var(--accent-rgb), .28);
  color: #fff;
}

/* Полоса прокрутки — тонкая, светящаяся */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--violet), var(--magenta), var(--gold));
  border-radius: 9px;
  border: 3px solid var(--void);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--narrow); }

/* ============================================================
   03  ФОН: АВРОРА, ЧАСТИЦЫ, СВЕТОВЫЕ ЛУЧИ

   Четыре слоя, все fixed, все за контентом:
     .bg-aurora   — WebGL-плазма, живая, ведёт цвет
     .bg-grain    — плёночное зерно, снимает цифровую стерильность
     .bg-particles— восходящие искры: энергия идёт вверх
     .bg-vignette — виньетка, собирает взгляд к центру
   ============================================================ */

.bg-stack {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  contain: strict;
}

.bg-aurora,
.bg-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Аврора живёт вполсилы: на полной яркости она красива сама по себе,
   но текст по ней не читается. Фон служит странице, а не наоборот. */
.bg-aurora { opacity: 0; transition: opacity 2.4s var(--ease-soft); }
.bg-aurora.is-ready { opacity: .55; }

.bg-particles { opacity: .85; mix-blend-mode: screen; }

/* Запасной фон — если WebGL недоступен, страница всё равно живая */
.bg-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 18% 8%,  rgba(122, 69, 232, .34), transparent 62%),
    radial-gradient(100% 70% at 84% 26%, rgba(224, 71, 155, .26), transparent 60%),
    radial-gradient(120% 90% at 50% 96%, rgba(255, 214, 138, .20), transparent 66%),
    linear-gradient(180deg, var(--void) 0%, var(--void-2) 46%, var(--ink) 100%);
}

/* Виньетка гасит края и подкладывает общую темноту: контраст
   текста к фону не должен зависеть от того, куда сейчас утёк
   светящийся поток. */
.bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 95% at 50% 42%, rgba(4, 4, 12, .30) 0%, rgba(4, 4, 12, .74) 100%),
    linear-gradient(180deg, rgba(4, 4, 12, .45), transparent 24%, transparent 72%, rgba(4, 4, 12, .5));
}

.bg-grain {
  position: absolute;
  inset: -50%;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(9) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Световые лучи — медленно дышат, как свет сквозь щель */
.rays {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: .5;
}

.rays i {
  position: absolute;
  top: -30%;
  left: 50%;
  width: clamp(90px, 16vw, 260px);
  height: 160%;
  background: linear-gradient(180deg,
    rgba(255, 214, 138, .22) 0%,
    rgba(255, 214, 138, .06) 45%,
    transparent 78%);
  filter: blur(28px);
  transform-origin: 50% 0;
  animation: ray-breathe 14s var(--ease-soft) infinite;
}

.rays i:nth-child(1) { transform: translateX(-260%) rotate(-15deg); animation-delay: 0s;   }
.rays i:nth-child(2) { transform: translateX(-90%)  rotate(-5deg);  animation-delay: -3.5s; }
.rays i:nth-child(3) { transform: translateX(60%)   rotate(6deg);   animation-delay: -7s;   }
.rays i:nth-child(4) { transform: translateX(220%)  rotate(16deg);  animation-delay: -10.5s; }

@keyframes ray-breathe {
  0%, 100% { opacity: .35; }
  50%      { opacity: .95; }
}

/* Контент всегда над фоном */
.page { position: relative; z-index: 1; }

/* Курсорный свет — мягкое пятно, идущее за указателем. Только мышь. */
.cursor-light {
  position: fixed;
  top: 0; left: 0;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(var(--accent-rgb), .13) 0%,
    rgba(var(--accent-rgb), .05) 38%,
    transparent 70%);
  transition: opacity .6s var(--ease-soft);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .cursor-light.is-on { opacity: 1; }
}

/* ============================================================
   04  ТИПОГРАФИКА
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: clamp(3rem, 10.5vw, 9.5rem);
  line-height: .94;
  letter-spacing: -.035em;
}

.h1 { font-size: clamp(2.4rem, 6.2vw, 5.2rem); }
.h2 { font-size: clamp(2rem, 4.6vw, 3.9rem); }
.h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.2; }
.h4 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.3; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Надзаголовок раздела — тонкая разрядка, как подпись на гравюре */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .85em;
  font-family: var(--sans);
  font-size: .69rem;
  font-weight: 400;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4rem;
}

.eyebrow::before {
  content: '';
  width: clamp(20px, 4vw, 46px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

.eyebrow--center::after {
  content: '';
  width: clamp(20px, 4vw, 46px);
  height: 1px;
  background: linear-gradient(270deg, transparent, var(--accent));
}

.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.65;
  color: var(--mist);
  font-weight: 200;
}

.muted { color: var(--mist); }
.dim   { color: var(--mist-dim); }

.serif  { font-family: var(--serif); }
.italic { font-style: italic; }

/* Свечение текста: буквы будто светятся изнутри, а не подсвечены снаружи.
   Золото ведёт, роза только оттеняет — иначе заголовок читается
   как розовый, а не как свет. */
.glow {
  background: linear-gradient(102deg,
    var(--cream) 0%, var(--gold) 26%, var(--rose) 46%,
    var(--gold) 66%, var(--cream) 92%);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glow-drift 11s var(--ease-soft) infinite;
}

@keyframes glow-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.accent { color: var(--accent); }

/* Цитата Мастера — набирается крупно, дышит, стоит отдельно */
.quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--cream);
  text-wrap: balance;
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
}

.quote::before,
.quote::after {
  content: '';
  display: block;
  width: 76px;
  height: 1px;
  margin-inline: auto;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.quote::before { margin-bottom: clamp(1.5rem, 4vw, 2.6rem); }
.quote::after  { margin-top:    clamp(1.5rem, 4vw, 2.6rem); }

.quote cite {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

/* ============================================================
   05  РАСКРЫТИЯ И ДВИЖЕНИЕ

   Один принцип на весь сайт: элемент не «выезжает», а проявляется —
   поднимается, расфокус уходит, свет собирается. Так движение
   читается как проявление, а не как анимация ради анимации.
   ============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  filter: blur(9px);
  transition:
    opacity   1.05s var(--ease-out),
    transform 1.05s var(--ease-out),
    filter    1.05s var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

[data-reveal='scale'] { transform: translate3d(0, 30px, 0) scale(.955); }
[data-reveal='left']  { transform: translate3d(-40px, 0, 0); }
[data-reveal='right'] { transform: translate3d(40px, 0, 0); }
[data-reveal='soft']  { transform: none; filter: blur(14px); }

/* Раскрытие по строкам — для крупных заголовков */
.line-mask { overflow: hidden; display: block; }

.line-mask > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1.15s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.is-in .line-mask > span,
.line-mask.is-in > span { transform: none; }

/* Побуквенное проявление заголовка первого экрана */
.char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .5em, 0) rotateX(-55deg);
  filter: blur(12px);
  transition:
    opacity 1.1s var(--ease-out),
    transform 1.1s var(--ease-out),
    filter 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.is-lit .char {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Медленное «дыхание» — для ореолов и портрета */
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.06); opacity: .95; }
}

@keyframes spin-slow { to { transform: rotate(360deg); } }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* ============================================================
   06  КНОПКИ
   ============================================================ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  padding: 1.02em 2.5em;
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  /* Разрядка в .2em делает «Занять место» шире, чем кажется,
     и на узком экране призыв ломается на две строки. Кнопка
     действия должна читаться одной строкой всегда. */
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow .5s var(--ease-out), filter .5s var(--ease-out);
}

.btn > span { position: relative; z-index: 2; }

/* Главная кнопка: живой спектр внутри, свет расходится наружу */
.btn--primary {
  color: #150c22;
  background: linear-gradient(105deg, var(--gold), var(--rose), var(--gold));
  background-size: 220% 100%;
  animation: glow-drift 8s var(--ease-soft) infinite;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .18) inset,
    0 14px 44px -14px rgba(255, 176, 120, .62);
}

.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .55), transparent 58%);
  opacity: 0;
  transition: opacity .45s var(--ease-soft);
}

/* На наведении кнопка не двигается — она загорается. Несколько
   цветных теней разного радиуса дают ореол, который читается
   как свечение изнутри, а не как подсветка снизу. Смещать кнопку
   нельзя ещё и технически: липкая кнопка выровнена по центру
   через transform, и любой свой transform сбил бы центровку. */
.btn--primary:hover {
  filter: saturate(1.12) brightness(1.04);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .38) inset,
    0 0 20px -4px rgba(255, 214, 138, .95),
    0 0 46px -6px rgba(255, 142, 192, .75),
    0 0 88px -10px rgba(122, 69, 232, .55),
    0 18px 52px -18px rgba(255, 176, 120, .85);
}

.btn--primary:hover::after { opacity: 1; }

/* Призрачная кнопка: тонкая рамка, свет наливается по наведению */
.btn--ghost {
  color: var(--cream);
  background: rgba(255, 255, 255, .03);
  box-shadow: 0 0 0 1px var(--hair-warm) inset;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.btn--ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg,
    rgba(255, 214, 138, .18), rgba(224, 71, 155, .16));
  opacity: 0;
  transition: opacity .5s var(--ease-soft);
}

.btn--ghost:hover {
  box-shadow:
    0 0 0 1px rgba(255, 214, 138, .6) inset,
    0 0 30px -10px rgba(255, 214, 138, .6);
}

.btn--ghost:hover::before { opacity: 1; }

.btn--wide  { width: 100%; }
.btn--small { padding: .78em 1.7em; font-size: .7rem; }

/* Стрелка «назад» показывается только на узком экране */
.header__back svg { display: none; width: 16px; height: 16px; }

.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Текстовая ссылка с растущим подчёркиванием */
.link {
  position: relative;
  color: var(--accent);
  padding-bottom: 2px;
}

.link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}

.link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ============================================================
   07  ШАПКА И НАВИГАЦИЯ
   ============================================================ */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding-block: clamp(1rem, 2vw, 1.6rem);
  transition: background .6s var(--ease-soft), box-shadow .6s var(--ease-soft),
              padding .6s var(--ease-soft);
}

.header.is-stuck {
  background: rgba(6, 5, 16, .72);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 1px 0 var(--hair), 0 18px 44px -30px #000;
  padding-block: .78rem;
}

.header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.logo {
  font-family: var(--serif);
  font-size: clamp(1.06rem, 1.5vw, 1.3rem);
  letter-spacing: .04em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

.logo__mark {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold), var(--rose), var(--violet), var(--aqua), var(--gold));
  animation: spin-slow 16s linear infinite;
  box-shadow: 0 0 18px -2px rgba(255, 214, 138, .6);
  position: relative;
}

.logo__mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--void);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
}

.nav a {
  position: relative;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mist);
  transition: color .4s var(--ease-soft);
  white-space: nowrap;
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}

.nav a:hover, .nav a.is-active { color: var(--cream); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; }

.header__side { display: flex; align-items: center; gap: 1rem; }

/* Переключатель языка */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 1px var(--hair) inset;
}

.lang button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: .34rem .68rem;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--mist-dim);
  transition: color .35s, background .35s;
}

.lang button:hover { color: var(--cream); }

.lang button.is-active {
  color: #150c22;
  background: linear-gradient(105deg, var(--gold), var(--rose));
}

/* Бургер */
.burger {
  display: none;
  width: 42px; height: 42px;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.burger i {
  position: absolute;
  left: 10px;
  width: 22px; height: 1.5px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform .5s var(--ease-out), opacity .3s;
}

.burger i:nth-child(1) { top: 15px; }
.burger i:nth-child(2) { top: 21px; }
.burger i:nth-child(3) { top: 27px; }

.burger.is-open i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open i:nth-child(2) { opacity: 0; }
.burger.is-open i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Мобильное меню — полноэкранное, тёмное, с раскрытием пунктов */
.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  padding: 6rem var(--gutter) 3rem;
  background: rgba(5, 4, 14, .96);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s var(--ease-soft), visibility .55s;
}

.menu.is-open { opacity: 1; visibility: visible; }

.menu a {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  color: var(--cream);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

.menu.is-open a { opacity: 1; transform: none; }

.menu.is-open a:nth-child(1) { transition-delay: .08s; }
.menu.is-open a:nth-child(2) { transition-delay: .14s; }
.menu.is-open a:nth-child(3) { transition-delay: .2s; }
.menu.is-open a:nth-child(4) { transition-delay: .26s; }
.menu.is-open a:nth-child(5) { transition-delay: .32s; }
.menu.is-open a:nth-child(6) { transition-delay: .38s; }
.menu.is-open a:nth-child(7) { transition-delay: .44s; }

/* Индикатор прогресса чтения */
.progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 70;
  transform-origin: 0 50%;
  transform: scaleX(var(--journey));
  background: linear-gradient(90deg, var(--violet), var(--magenta), var(--gold), var(--aqua));
  box-shadow: 0 0 14px rgba(255, 214, 138, .55);
}

/* Липкая кнопка снизу — появляется, когда первый экран уходит.
   Обёртка отвечает только за положение, кнопка внутри — только
   за себя: так их трансформации не спорят друг с другом. */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 50;
  max-width: calc(100vw - 2rem);
  transform: translate(-50%, 180%);
  transition: transform .7s var(--ease-out);
  pointer-events: none;
}

.sticky-cta.is-on { transform: translate(-50%, 0); }
.sticky-cta.is-on .btn { pointer-events: auto; }

/* ============================================================
   08  ПЕРВЫЙ ЭКРАН
   ============================================================ */

/* Первый экран обязан помещаться целиком: человек должен увидеть
   название, даты и кнопку, не прокручивая. Поэтому все размеры
   здесь связаны не только с шириной, но и с высотой окна (svh) —
   на низком ноутбуке композиция сжимается сама. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(5.5rem, 11vh, 8rem) 0 clamp(3.5rem, 8vh, 5rem);
  text-align: center;
  overflow: hidden;
}

.hero__in { position: relative; z-index: 2; }

.hero__eyebrow {
  font-size: clamp(.6rem, 1vw, .72rem);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(1rem, 2.4svh, 1.6rem);
}

.hero__title {
  font-size: clamp(2.6rem, min(7.6vw, 9.5svh), 6.6rem);
  line-height: .95;
  letter-spacing: -.04em;
  margin-bottom: clamp(.8rem, 2svh, 1.4rem);
  perspective: 900px;
}

.hero__title .row { display: block; }

.hero__sub {
  font-family: var(--serif);
  font-size: clamp(1.1rem, min(2.2vw, 2.8svh), 1.7rem);
  font-style: italic;
  font-weight: 300;
  color: var(--mist);
  margin-bottom: clamp(1rem, 2.4svh, 1.8rem);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(.7rem, 2.2vw, 1.7rem);
  margin-bottom: clamp(1.3rem, 3svh, 2.2rem);
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mist);
}

.hero__meta span { display: inline-flex; align-items: center; gap: .7em; }

.hero__meta .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
  animation: breathe 3.2s var(--ease-soft) infinite;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-bottom: clamp(1.6rem, 4svh, 2.6rem);
}

/* Портрет Мастера в ореоле — не фотография, а источник света */
.halo {
  position: relative;
  width: clamp(120px, min(15vw, 19svh), 195px);
  aspect-ratio: 1;
  margin: 0 auto clamp(1.1rem, 2.6svh, 1.9rem);
  flex: none;
}

.halo__ring {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255, 214, 138, .55) 60deg,
    transparent 130deg, rgba(224, 71, 155, .45) 200deg,
    transparent 270deg, rgba(70, 224, 210, .4) 330deg, transparent 360deg);
  filter: blur(22px);
  animation: spin-slow 22s linear infinite;
}

.halo__ring--2 {
  inset: -32%;
  animation: spin-slow 34s linear infinite reverse;
  opacity: .55;
}

.halo__pulse {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1px solid rgba(255, 214, 138, .35);
  animation: breathe 5s var(--ease-soft) infinite;
}

.halo__img {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 214, 138, .4),
    0 30px 90px -30px rgba(255, 176, 120, .7);
}

.halo__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

/* Обратный отсчёт */
.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(.5rem, 1.6vw, 1.1rem);
}

.countdown__cell {
  min-width: clamp(56px, 9vw, 82px);
  padding: clamp(.45rem, 1.2svh, .8rem) clamp(.4rem, 1.2vw, .8rem);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
  box-shadow: 0 0 0 1px var(--hair) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.countdown__num {
  font-family: var(--serif);
  font-size: clamp(1.5rem, min(3vw, 3.6svh), 2.3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}

.countdown__lab {
  margin-top: .35rem;
  font-size: .55rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

/* Подсказка прокрутки */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1.2rem, 3vh, 2.4rem);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  font-size: .58rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

.scroll-hint i {
  width: 1px; height: 52px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: hint 2.6s var(--ease-soft) infinite;
  transform-origin: top;
}

@keyframes hint {
  0%      { transform: scaleY(0);   opacity: 0; }
  40%     { transform: scaleY(1);   opacity: 1; }
  100%    { transform: scaleY(1);   opacity: 0; }
}

/* Низкое окно ноутбука: композиция сжимается, чтобы обратный отсчёт
   и кнопка остались на первом экране. Прокрутка ради кнопки —
   потерянные заявки. */
@media (max-height: 820px) and (min-width: 641px) {
  .hero { padding-top: clamp(4.5rem, 9vh, 6rem); padding-bottom: 2.5rem; }
  .halo { width: clamp(104px, 15svh, 140px); margin-bottom: .9rem; }
  .hero__title { font-size: clamp(2.2rem, 6.4svh, 3.8rem); margin-bottom: .6rem; }
  .hero__sub { font-size: clamp(1rem, 2.4svh, 1.3rem); margin-bottom: .8rem; }
  .hero__meta { margin-bottom: 1rem; }
  .hero__actions { margin-bottom: 1.1rem; }
  .countdown__cell { padding: .45rem .6rem; }
  .countdown__num { font-size: 1.5rem; }
  .scroll-hint { display: none; }
}

/* Совсем низкое окно: отсчёт уступает место кнопке.
   Между «увидеть таймер» и «увидеть кнопку» выбор очевиден. */
@media (max-height: 620px) and (min-width: 641px) {
  .hero__countdown { display: none; }
}

/* ============================================================
   09  СТЕКЛО, КАРТОЧКИ, СЕТКИ
   ============================================================ */

.glass {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(160deg,
    rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow:
    0 0 0 1px var(--hair) inset,
    0 30px 70px -46px rgba(0, 0, 0, .9);
  overflow: hidden;
}

/* Светящаяся кромка: тонкий градиентный контур, который оживает
   при наведении. Делается маской, чтобы не рисовать вторую рамку. */
.glass--lit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
    rgba(255, 214, 138, .55), rgba(224, 71, 155, .3) 40%,
    transparent 62%, rgba(70, 224, 210, .34));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .6s var(--ease-soft);
  pointer-events: none;
}

.glass--lit:hover::before { opacity: 1; }

/* Пятно света, идущее за курсором внутри карточки */
.glass--lit::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--accent-rgb), .1), transparent 62%);
  opacity: 0;
  transition: opacity .6s var(--ease-soft);
  pointer-events: none;
}

.glass--lit:hover::after { opacity: 1; }

.card {
  padding: clamp(1.5rem, 3vw, 2.3rem);
  height: 100%;
  transition: transform .7s var(--ease-out);
}

.card:hover { transform: translateY(-5px); }

.card__icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  margin-bottom: 1.15rem;
  background: linear-gradient(150deg,
    rgba(var(--accent-rgb), .22), rgba(255, 255, 255, .04));
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .28) inset;
  color: var(--accent);
}

.card__icon svg { width: 21px; height: 21px; }

.card__title {
  font-family: var(--serif);
  font-size: clamp(1.18rem, 1.9vw, 1.5rem);
  line-height: 1.22;
  margin-bottom: .6rem;
  color: var(--cream);
}

.card__text {
  font-size: .95rem;
  line-height: 1.68;
  color: var(--mist);
}

.card__num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--accent-rgb), .45);
  margin-bottom: .9rem;
}

.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   10  РАЗДЕЛЫ СТРАНИЦЫ

   У каждого раздела свой акцент. Порядок неслучаен: путь идёт
   от фиолетового порога через пурпур страдания к золоту истины
   и бирюзе освобождения.
   ============================================================ */

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--violet { --accent: #b79cff; --accent-2: var(--violet);  --accent-rgb: 183, 156, 255; }
.section--rose   { --accent: var(--rose); --accent-2: var(--magenta); --accent-rgb: 255, 142, 192; }
.section--gold   { --accent: var(--gold); --accent-2: var(--amber);   --accent-rgb: 255, 214, 138; }
.section--aqua   { --accent: var(--cyan); --accent-2: var(--aqua);    --accent-rgb: 126, 240, 255; }

/* Световая щель между разделами — тонкий шов, через который входит свет */
.seam {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair-warm) 22%, var(--hair-warm) 78%, transparent);
}

.seam::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: min(620px, 70vw);
  height: 130px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(var(--accent-rgb), .16), transparent 70%);
  pointer-events: none;
}

.section__head {
  max-width: 780px;
  margin-bottom: clamp(2.6rem, 6vw, 4.4rem);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__title { margin-bottom: 1.1rem; }

/* Видео-полотно */
.video {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #06050f;
  box-shadow:
    0 0 0 1px var(--hair-warm) inset,
    0 50px 120px -60px rgba(255, 176, 120, .55);
}

/* Рекламный ролик запускается сам, но плеер грузится только когда
   раздел попал в поле зрения. До этого момента на месте кадра
   не должно быть чёрной дыры — поэтому подложка с портретом. */
.video--promo {
  max-width: 1040px;
  margin-inline: auto;
  background-size: cover;
  background-position: center;
}

.video iframe,
.video video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  object-fit: cover;
}

/* Обложка с кнопкой: плеер грузится по клику, страница не тяжелеет */
.video__cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  transition: opacity .6s var(--ease-soft);
}

.video__cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 4, 12, .3), rgba(4, 4, 12, .72));
}

.video__play {
  position: relative;
  width: clamp(66px, 9vw, 96px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 1px rgba(255, 214, 138, .5) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .5s var(--ease-out), background .5s;
}

.video__play::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 214, 138, .45);
  animation: ping 2.6s var(--ease-soft) infinite;
}

@keyframes ping {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.5); opacity: 0; }
}

.video__cover:hover .video__play {
  transform: scale(1.08);
  background: rgba(255, 214, 138, .18);
}

.video__play svg { width: 26px; height: 26px; fill: var(--cream); margin-left: 4px; }

/* Два столбца: текст и изображение */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.split--wide-text { grid-template-columns: 1.15fr 1fr; }

.portrait {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--hair-warm) inset,
    0 60px 130px -70px rgba(255, 176, 120, .6);
}

.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}

.portrait:hover img { transform: scale(1.035); }

.portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(4, 4, 12, .78));
  pointer-events: none;
}

.portrait__cap {
  position: absolute;
  left: clamp(1.2rem, 3vw, 2rem);
  right: clamp(1.2rem, 3vw, 2rem);
  bottom: clamp(1.2rem, 3vw, 2rem);
  z-index: 2;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-style: italic;
  color: var(--cream);
}

/* Список-путь: вертикальная линия с узлами */
.path { position: relative; padding-left: 2.4rem; }

.path::before {
  content: '';
  position: absolute;
  left: 7px; top: .6em; bottom: .6em;
  width: 1px;
  background: linear-gradient(180deg,
    transparent, rgba(var(--accent-rgb), .6) 12%, rgba(var(--accent-rgb), .6) 88%, transparent);
}

.path li {
  position: relative;
  list-style: none;
  margin-bottom: 1.7rem;
}

.path li:last-child { margin-bottom: 0; }

.path li::before {
  content: '';
  position: absolute;
  left: -2.4rem; top: .58em;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--void);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .7), 0 0 16px rgba(var(--accent-rgb), .5);
}

.path li::after {
  content: '';
  position: absolute;
  left: -2.4rem; top: .58em;
  width: 15px; height: 15px;
  border-radius: 50%;
  transform: scale(.4);
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}

.path__title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  color: var(--cream);
  margin-bottom: .18rem;
}

.path__text { color: var(--mist); font-size: .95rem; line-height: 1.62; }

/* Расписание дня */
.day { display: grid; gap: 1px; background: var(--hair); border-radius: 18px; overflow: hidden; }

.day__row {
  display: grid;
  grid-template-columns: minmax(96px, 130px) 1fr;
  gap: clamp(.8rem, 2vw, 2rem);
  align-items: baseline;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.8rem);
  background: rgba(10, 8, 22, .62);
  transition: background .5s var(--ease-soft);
}

.day__row:hover { background: rgba(var(--accent-rgb), .07); }

.day__time {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.day__what { color: var(--cream); font-weight: 300; }

/* Бегущая строка «голосов» */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 5vw, 3.4rem);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: max-content;
  animation: marquee 46s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee { to { transform: translateX(-50%); } }

.marquee__item {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  font-style: italic;
  color: var(--mist-dim);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.marquee__item::after {
  content: '✦';
  font-size: .6em;
  color: var(--accent);
  font-style: normal;
}

/* Числа-показатели */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  text-align: center;
}

.stat__num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, var(--cream), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat__lab {
  margin-top: .6rem;
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

/* ============================================================
   11  ТАРИФЫ
   ============================================================ */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.8rem);
  align-items: stretch;
}

/* Значок «рекомендуем» висит над кромкой карточки, поэтому здесь
   обрезка содержимого снимается, а сетке даётся отступ сверху —
   иначе значок срежется. */
.tiers { padding-top: 14px; }

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 3.2vw, 2.6rem);
  border-radius: 22px;
  overflow: visible;
  transition: transform .7s var(--ease-out);
}

.tier:hover { transform: translateY(-6px); }

.tier--featured {
  background: linear-gradient(165deg,
    rgba(255, 214, 138, .13), rgba(224, 71, 155, .08) 55%, rgba(255, 255, 255, .02));
  box-shadow:
    0 0 0 1px rgba(255, 214, 138, .38) inset,
    0 50px 110px -60px rgba(255, 176, 120, .75);
}

.tier__badge {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  padding: .3rem 1.05rem;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #150c22;
  background: linear-gradient(105deg, var(--gold), var(--rose));
  white-space: nowrap;
  box-shadow: 0 10px 26px -12px rgba(255, 176, 120, .9);
}

.tier__name {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  margin-bottom: .35rem;
}

.tier__note {
  font-size: .84rem;
  color: var(--mist-dim);
  margin-bottom: 1.5rem;
  min-height: 2.6em;
}

.tier__price {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--cream);
  margin-bottom: 1.5rem;
}

.tier__price sup {
  font-size: .38em;
  color: var(--mist-dim);
  top: -.9em;
}

.tier__list {
  list-style: none;
  margin: 0 0 1.9rem;
  padding: 0;
  display: grid;
  gap: .72rem;
  flex: 1;
}

.tier__list li {
  position: relative;
  padding-left: 1.65rem;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--mist);
}

.tier__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .52em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.tier__spots {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 1rem;
}

/* ============================================================
   12  ФОРМА РЕГИСТРАЦИИ
   ============================================================ */

.form { display: grid; gap: 1.15rem; }

.field { position: relative; display: grid; gap: .45rem; }

.field__label {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

.field__label .req { color: var(--rose); }

.input,
.select,
.textarea {
  width: 100%;
  padding: .95rem 1.15rem;
  border: 0;
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
  box-shadow: 0 0 0 1px var(--hair) inset;
  color: var(--cream);
  font-size: .98rem;
  font-weight: 300;
  transition: box-shadow .45s var(--ease-soft), background .45s var(--ease-soft);
}

.input::placeholder, .textarea::placeholder { color: rgba(248, 242, 232, .28); }

.input:hover, .select:hover, .textarea:hover { background: rgba(255, 255, 255, .055); }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, .07);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), .7) inset,
    0 0 0 4px rgba(var(--accent-rgb), .12);
}

.input.is-bad, .select.is-bad {
  box-shadow: 0 0 0 1px rgba(255, 120, 150, .8) inset;
}

.textarea { min-height: 128px; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8f2e8' stroke-width='1.5' opacity='.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  background-size: 17px;
}

.select option { background: #100c22; color: var(--cream); }

.field__err {
  font-size: .74rem;
  color: #ff9bb4;
  min-height: 1.1em;
}

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }

/* Выбор способа оплаты — карточки, а не радиокнопки */
.pay-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }

.pay {
  position: relative;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1.05rem 1.15rem;
  border-radius: 15px;
  cursor: pointer;
  background: rgba(255, 255, 255, .03);
  box-shadow: 0 0 0 1px var(--hair) inset;
  transition: box-shadow .45s var(--ease-soft), background .45s var(--ease-soft),
              transform .45s var(--ease-out);
}

.pay:hover { background: rgba(255, 255, 255, .06); transform: translateY(-2px); }

.pay input { position: absolute; opacity: 0; pointer-events: none; }

.pay input:checked ~ .pay__body { color: var(--cream); }

.pay:has(input:checked) {
  background: linear-gradient(150deg, rgba(var(--accent-rgb), .16), rgba(255, 255, 255, .03));
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), .65) inset,
    0 18px 44px -30px rgba(var(--accent-rgb), .9);
}

.pay__mark {
  flex: none;
  width: 19px; height: 19px;
  margin-top: .18em;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--hair-warm) inset;
  display: grid;
  place-items: center;
  transition: box-shadow .4s;
}

.pay__mark::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform .4s var(--ease-out);
}

.pay:has(input:checked) .pay__mark { box-shadow: 0 0 0 1px var(--accent) inset; }
.pay:has(input:checked) .pay__mark::after { transform: scale(1); }

.pay__title { font-size: .95rem; color: var(--cream); line-height: 1.35; }
.pay__desc  { font-size: .78rem; color: var(--mist-dim); margin-top: .15rem; }

.pay__auto {
  display: inline-block;
  margin-top: .4rem;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--aqua);
  box-shadow: 0 0 0 1px rgba(70, 224, 210, .4) inset;
}

/* Согласия */
.check {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  cursor: pointer;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--mist);
}

.check input { position: absolute; opacity: 0; pointer-events: none; }

.check__box {
  flex: none;
  width: 19px; height: 19px;
  margin-top: .16em;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--hair-warm) inset;
  display: grid;
  place-items: center;
  transition: background .35s, box-shadow .35s;
}

.check__box svg {
  width: 12px; height: 12px;
  stroke: #150c22;
  stroke-width: 3;
  fill: none;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .3s, transform .3s var(--ease-out);
}

.check input:checked ~ .check__box {
  background: linear-gradient(105deg, var(--gold), var(--rose));
  box-shadow: none;
}

.check input:checked ~ .check__box svg { opacity: 1; transform: none; }

/* Шаги формы */
.steps {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 2rem;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mist-dim);
  flex-wrap: wrap;
}

.steps b {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: .68rem;
  font-weight: 500;
  color: var(--mist-dim);
  box-shadow: 0 0 0 1px var(--hair) inset;
}

.steps .is-now b {
  color: #150c22;
  background: linear-gradient(105deg, var(--gold), var(--rose));
  box-shadow: none;
}

.steps .is-now { color: var(--cream); }

.steps span { display: inline-flex; align-items: center; gap: .5rem; }

/* Уведомление */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 90;
  transform: translate(-50%, 200%);
  max-width: min(420px, calc(100vw - 2rem));
  padding: .95rem 1.4rem;
  border-radius: 14px;
  background: rgba(14, 11, 28, .95);
  box-shadow: 0 0 0 1px var(--hair-warm) inset, 0 30px 60px -30px #000;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: .9rem;
  transition: transform .6s var(--ease-out);
}

.toast.is-on { transform: translate(-50%, 0); }
.toast.is-bad { box-shadow: 0 0 0 1px rgba(255, 120, 150, .6) inset, 0 30px 60px -30px #000; }

/* ============================================================
   13  АККОРДЕОН, ОТЗЫВЫ, ВИДЕО
   ============================================================ */

.faq { display: grid; gap: .8rem; }

.faq__item {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .028);
  box-shadow: 0 0 0 1px var(--hair) inset;
  transition: box-shadow .5s var(--ease-soft), background .5s var(--ease-soft);
}

.faq__item[open] {
  background: rgba(var(--accent-rgb), .05);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .34) inset;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: clamp(1.05rem, 2.2vw, 1.5rem) clamp(1.2rem, 2.6vw, 1.9rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  color: var(--cream);
  transition: color .4s;
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent); }

.faq__q i {
  flex: none;
  position: relative;
  width: 15px; height: 15px;
}

.faq__q i::before,
.faq__q i::after {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 15px; height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
  transition: transform .5s var(--ease-out);
}

.faq__q i::after { transform: rotate(90deg); }
.faq__item[open] .faq__q i::after { transform: rotate(0); }

.faq__a {
  padding: 0 clamp(1.2rem, 2.6vw, 1.9rem) clamp(1.2rem, 2.4vw, 1.6rem);
  color: var(--mist);
  font-size: .95rem;
  line-height: 1.7;
}

.faq__item[open] .faq__a { animation: fade-down .6s var(--ease-out); }

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Отзыв */
.review { padding: clamp(1.6rem, 3vw, 2.4rem); height: 100%; display: flex; flex-direction: column; }

.review__text {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--cream);
  flex: 1;
  margin-bottom: 1.5rem;
}

.review__who { display: flex; align-items: center; gap: .85rem; }

.review__ava {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--accent);
  background: linear-gradient(150deg, rgba(var(--accent-rgb), .2), rgba(255, 255, 255, .04));
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3) inset;
}

.review__name { font-size: .93rem; color: var(--cream); }
.review__loc  { font-size: .74rem; color: var(--mist-dim); letter-spacing: .1em; }

/* Карточка видео-отзыва */
.vcard { border-radius: 18px; overflow: hidden; }

.vcard__frame {
  position: relative;
  aspect-ratio: 9 / 14;
  background: #06050f;
}

.vcard__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.vcard__cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: linear-gradient(165deg, rgba(122, 69, 232, .34), rgba(224, 71, 155, .22), rgba(4, 4, 12, .9));
}

.vcard__body { padding: 1.15rem 1.3rem 1.4rem; }
.vcard__title { font-family: var(--serif); font-size: 1.15rem; margin-bottom: .25rem; }
.vcard__desc  { font-size: .84rem; color: var(--mist-dim); line-height: 1.5; }

/* ============================================================
   14  ПОДВАЛ
   ============================================================ */

.footer {
  position: relative;
  padding-block: clamp(4rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem);
  background: linear-gradient(180deg, transparent, rgba(3, 3, 9, .9));
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.4rem, 5vw, 3.4rem);
  border-bottom: 1px solid var(--hair);
}

.footer__brand .logo { margin-bottom: 1.1rem; }

.footer__about {
  font-size: .89rem;
  line-height: 1.7;
  color: var(--mist-dim);
  max-width: 40ch;
}

.footer__h {
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.15rem;
}

.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .62rem; }

.footer__list a {
  font-size: .88rem;
  color: var(--mist);
  transition: color .35s;
}

.footer__list a:hover { color: var(--cream); }

/* Юридический блок — сдержанный, но полный: реквизиты компании
   должны быть видимы, это требование и для платёжных провайдеров */
.legal-box {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  border-radius: 16px;
  background: rgba(255, 255, 255, .022);
  box-shadow: 0 0 0 1px var(--hair) inset;
  font-size: .8rem;
  line-height: 1.72;
  color: var(--mist-dim);
}

.legal-box strong { color: var(--mist); font-weight: 500; }

.legal-box__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
}

.footer__bottom {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .78rem;
  color: var(--mist-dim);
}

.socials { display: flex; gap: .6rem; }

.socials a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--mist);
  box-shadow: 0 0 0 1px var(--hair) inset;
  transition: color .4s, box-shadow .4s, transform .4s var(--ease-out);
}

.socials a:hover {
  color: var(--gold);
  box-shadow: 0 0 0 1px var(--hair-warm) inset;
  transform: translateY(-2px);
}

.socials svg { width: 17px; height: 17px; }

/* ============================================================
   15  СЛУЖЕБНЫЕ СТРАНИЦЫ (оплата, спасибо, юридические)
   ============================================================ */

.page-head {
  padding: clamp(9rem, 18vh, 13rem) 0 clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}

.doc { max-width: var(--narrow); margin-inline: auto; }

/* Оглавление документов. Сетка, а не свободный поток: при
   разной длине названий карточки вставали лесенкой и читались
   как случайно наваленные друг на друга. Две колонки на телефоне,
   четыре на широком экране — всегда ровный ряд. */
.doc-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.doc-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  padding: .9rem 1rem;
  font-size: .84rem;
  line-height: 1.35;
  text-align: center;
  color: var(--mist);
  transition: color .4s var(--ease-soft), box-shadow .5s var(--ease-soft);
}

.doc-nav a:hover { color: var(--cream); }

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

.doc h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: clamp(2.4rem, 5vw, 3.4rem) 0 1rem;
  color: var(--cream);
}

.doc h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin: 2rem 0 .8rem;
  color: var(--gold);
}

.doc p, .doc li { color: var(--mist); font-size: .96rem; line-height: 1.78; }
.doc ul, .doc ol { padding-left: 1.4rem; display: grid; gap: .5rem; margin: 0 0 1.2rem; }
.doc a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.doc__meta {
  font-size: .8rem;
  color: var(--mist-dim);
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 1rem;
}

/* Реквизиты для ручной оплаты */
.req-card { padding: clamp(1.4rem, 3vw, 2.2rem); margin-bottom: 1rem; }

.req-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.req-card__name { font-family: var(--serif); font-size: 1.3rem; }

.req-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .78rem 0;
  border-bottom: 1px dashed var(--hair);
}

.req-row:last-child { border-bottom: 0; }

.req-row__k { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mist-dim); }

.req-row__v {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--cream);
  word-break: break-all;
  text-align: right;
}

.copy {
  flex: none;
  padding: .38rem .8rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3) inset;
  transition: background .35s, color .35s;
}

.copy:hover { background: rgba(var(--accent-rgb), .2); }
.copy.is-done { color: var(--aqua); box-shadow: 0 0 0 1px rgba(70, 224, 210, .5) inset; }

/* Код брони — то, по чему платёж узнаётся без чека.
   Переносить его нельзя ни при какой ширине: разорванный пополам
   код переписывают в назначение платежа с ошибкой. */
.ref-code {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem 1.1rem;
  border-radius: 13px;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  letter-spacing: .1em;
  white-space: nowrap;
  color: var(--gold);
  background: rgba(255, 214, 138, .08);
  box-shadow: 0 0 0 1px rgba(255, 214, 138, .35) inset;
}

.req-card__head { flex-wrap: wrap; }

/* Зона загрузки чека — не обязательная, а вспомогательная */
.drop {
  position: relative;
  display: grid;
  place-items: center;
  gap: .6rem;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  color: var(--mist);
  background: rgba(255, 255, 255, .025);
  box-shadow: 0 0 0 1px var(--hair) inset;
  transition: background .4s, box-shadow .4s;
}

.drop:hover, .drop.is-over {
  background: rgba(var(--accent-rgb), .07);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .5) inset;
}

.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.drop svg { width: 30px; height: 30px; color: var(--accent); }

/* Статус заявки */
.status {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: breathe 2.4s var(--ease-soft) infinite;
}

.status--wait { color: var(--amber); box-shadow: 0 0 0 1px rgba(247, 185, 85, .35) inset; }
.status--ok   { color: var(--aqua);  box-shadow: 0 0 0 1px rgba(70, 224, 210, .4) inset; }

/* Модальное окно */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(3, 3, 9, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease-soft), visibility .5s;
}

.modal.is-open { opacity: 1; visibility: visible; }

.modal__box {
  width: min(620px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  transform: translateY(28px) scale(.97);
  transition: transform .6s var(--ease-out);
}

.modal.is-open .modal__box { transform: none; }

.modal__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--mist);
  background: rgba(255, 255, 255, .05);
  transition: color .35s, background .35s, transform .4s var(--ease-out);
}

.modal__close:hover { color: var(--cream); background: rgba(255, 255, 255, .12); transform: rotate(90deg); }

/* ============================================================
   16  АДАПТИВ И БЕРЕЖНЫЙ РЕЖИМ
   ============================================================ */

@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: block; }

  /* Кнопка записи уходит из шапки: рядом с переключателем языка
     и бургером она вытесняет их за край экрана. Ниже по странице
     есть липкая кнопка — призыв никуда не девается. */
  .nav-cta { display: none; }

  .header__side { gap: .5rem; }
  .lang button { padding: .32rem .55rem; font-size: .62rem; }
  .logo { font-size: 1rem; }
  .logo__mark { width: 22px; height: 22px; }

  /* На служебных страницах бургера нет, а «На главную» рядом
     с переключателем языка не помещается и уезжает за край.
     Оставляем стрелку: смысл тот же, места втрое меньше. */
  .header__back { padding: .7rem; }
  .header__back span { display: none; }
  .header__back svg { display: block; }

  .split, .split--wide-text { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .grid--3 { grid-template-columns: 1fr; }
  .video--tall .vcard__frame { aspect-ratio: 9 / 14; }
}

@media (max-width: 640px) {
  :root { --section-y: clamp(4rem, 10vh, 6rem); }
  .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .row-2 { grid-template-columns: 1fr; }
  .pay-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 2rem; }
  .footer__top { grid-template-columns: 1fr; }
  .day__row { grid-template-columns: 1fr; gap: .2rem; }
  .req-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .req-row__v { text-align: left; }
  .cursor-light { display: none; }
  .hero__meta { flex-direction: column; gap: .6rem; }
}

/* Уважение к настройке «меньше движения»: сайт остаётся красивым,
   но перестаёт двигаться. Ничего не исчезает — всё сразу на месте. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .char { opacity: 1 !important; transform: none !important; filter: none !important; }
  .line-mask > span { transform: none !important; }
  .bg-particles, .bg-grain, .rays { display: none; }
  .marquee__track { animation: none; }
}

@media print {
  .bg-stack, .header, .sticky-cta, .cursor-light, .progress { display: none; }
  body { background: #fff; color: #000; }
}