/* ============================================================
   blocks.css — уникальная геометрия конкретных блоков сайта
   Подключается последним, после tokens / base / components.

   Каждый блок = своя секция с комментарием-разделителем.
   Заполняется по мере вёрстки экранов.
   ============================================================ */

/* ──────────────────────────────────────────
   01 · Hero
   ────────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  /* Подтягиваем вверх, чтобы картинка была впритык к шапке */
  margin-top: calc(-1 * var(--page-padding-top));
  padding-top: 0;
  padding-bottom: var(--s-3);
}

/* Тёмная подложка под Hero — совпадает с самым тёмным низом картинки.
   Расширяется на полную ширину вьюпорта.
   Внизу фейдит В ПРОЗРАЧНОСТЬ — body bg (с радиальными бликами)
   плавно проступает сквозь нижнюю часть Hero. На границе с Philosophy
   нет резкого перехода, потому что обе стороны показывают один body bg. */
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  background:
    linear-gradient(
      180deg,
      #0c0613 0%,
      #0c0613 70%,
      rgba(12, 6, 19, 0.6) 88%,
      transparent 100%
    );
}

/* Иллюстрация — full-bleed, аспект 3/4 (зум поближе, пальмы по краям обрезаны) */
.hero__media {
  width: calc(100% + 2 * var(--page-padding-x));
  margin-left: calc(-1 * var(--page-padding-x));
  margin-right: calc(-1 * var(--page-padding-x));
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0c0613;                  /* fallback совпадает с подложкой */
  margin-bottom: var(--s-3);
}

.hero__illustration {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Заголовок — нормальный поток под картинкой, не overlay */
.hero__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;                     /* потолще для веса */
  font-size: var(--h1-hero-size);
  line-height: var(--h1-hero-lh);
  letter-spacing: var(--h1-hero-ls);
  color: var(--card);
}
.hero__heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--lilac);                  /* лавандовый, как в Figma */
}

/* Подзаголовок */
.hero__subtitle {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--on-dark);
}
.hero__subtitle strong {
  font-weight: var(--fw-medium);
  color: var(--card);
}

/* CTA на всю ширину */
.hero__cta {
  width: 100%;
  margin-top: var(--s-2);
}

/* Линия-разделитель на стыке тёмного блока и фиолетового */
.hero__divider {
  margin: var(--s-7) 0 0;
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, var(--lilac), transparent);
  opacity: 0.6;
}

/* Tablet/desktop — крупнее заголовок, аспект менее агрессивный */
@media (min-width: 700px) {
  .hero__heading { font-size: 48px; }
  .hero__media   { aspect-ratio: 4 / 5; }
}
@media (min-width: 1024px) {
  .hero__heading { font-size: 56px; }
  .hero__media   { aspect-ratio: 16 / 10; }
}


/* ──────────────────────────────────────────
   02 · Философия (Тело не врет.)
   ────────────────────────────────────────── */

.philosophy {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);                  /* естественный ритм без пустот */
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
}

/* Центральная группа: body + italic-акцент */
.philosophy__center {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.philosophy__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);   /* 36px */
  line-height: var(--h1-section-lh);
  color: var(--lilac);                 /* лавандовый */
}

.philosophy__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.philosophy__body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--on-dark);
}

/* Italic-акцент — крупнее, по левому краю, со смещением в правую часть экрана */
.philosophy__accent {
  margin: var(--s-3) 0 0;
  align-self: flex-end;             /* блок прижат к правой стороне контейнера */
  max-width: 80%;                   /* ширина блока ограничена */
  text-align: left;                 /* текст внутри — по левому краю */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: 26px;
  line-height: 1.3;
  color: var(--accent-2);
}

.philosophy__cta {
  width: 100%;
}

@media (min-width: 700px) {
  .philosophy__heading { font-size: 44px; }
  .philosophy__accent  { font-size: 32px; max-width: 70%; }
}


/* ──────────────────────────────────────────
   03 · Что Рома делает (Дизайн Человека + Феникс-Практика)
   ────────────────────────────────────────── */

.services {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);                  /* между опциями (Дизайн Человека ↔ Феникс) */
  padding-top: var(--s-8);
  padding-bottom: var(--s-8);
}

/* Группа: карточка + её CTA */
.services__option {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.services__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);     /* 36px */
  line-height: var(--h1-section-lh);
  color: var(--card);
}

/* Карточка: используем .card .card--light из components.css.
   Здесь — внутренние отступы и стили специфичных элементов. */

/* Шапка карточки: заголовок + тег */
.services__card-head {
  display: flex;
  align-items: center;             /* выравнивание по центру по вертикали */
  justify-content: space-between;
  gap: var(--s-3);
}

.services__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  font-size: 36px;
  line-height: 1.05;
  color: var(--bg-2);                /* яркий фиолетовый #6B3D85 */
}

/* Italic-eyebrow под заголовком */
.services__card-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;                /* жирнее, чтобы оранжевый читался */
  font-size: 22px;
  line-height: 1.3;
  color: var(--accent);            /* оранжевый */
}

/* Изображение в карточке */
.services__card-media {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-field);
  overflow: hidden;
  background: var(--surface-dark);
}
.services__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Body-текст в карточке */
.services__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.services__card-body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}
.services__card-body strong {
  font-weight: 600;
  color: var(--ink-2);             /* совпадает с цветом body */
}

/* Список «что ты получаешь» */
.services__card-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.services__card-list-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;                /* жирнее, чтобы оранжевый читался */
  font-size: 22px;
  line-height: 1.3;
  color: var(--accent);            /* оранжевый */
}

.services__card-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.services__card-list li {
  position: relative;
  padding-left: var(--s-4);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}

.services__card-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.65em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

/* CTA под карточкой */
.services__cta {
  width: 100%;
}

@media (min-width: 700px) {
  .services__heading { font-size: 44px; }
  /* card-title и eyebrow остаются того же размера на десктопе */
}


/* ──────────────────────────────────────────
   04 · Отзывы
   ────────────────────────────────────────── */

.testimonials {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding-top: var(--s-8);
  padding-bottom: var(--s-8);
}

.testimonials__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);   /* 36px */
  line-height: var(--h1-section-lh);
  color: var(--card);
}

.testimonials__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

/* Карточка-отзыв: использует .card .card--light для базы.
   Здесь — внутренние стили специфичных элементов. */
.testimonial { /* унаследует от .card */ }

/* Видео в карточке отзыва */
.testimonial__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-field);
  overflow: hidden;
  background: var(--ink);
  margin-bottom: var(--s-2);
}
.testimonial__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;       /* видео целиком, без обрезки лиц */
  background: var(--ink);
}

/* Большая italic-кавычка как декор-акцент */
.testimonial__quote-mark {
  display: block;
  margin: 0 0 calc(-1 * var(--s-3)) 0;  /* кавычка частично "садится" на текст */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
  user-select: none;
}

/* Сам текст отзыва */
.testimonial__quote {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Разделитель между текстом и подписью */
.testimonial__divider {
  height: 1px;
  border: none;
  margin: var(--s-2) 0 0;
  background: var(--gold);
  opacity: 0.4;
}

/* Подпись: имя + сессии */
.testimonial__meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
}

.testimonial__author {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
}

.testimonial__sessions {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0.7;
}

/* CTA под списком */
.testimonials__cta {
  width: 100%;
}

@media (min-width: 700px) {
  .testimonials__heading { font-size: 44px; }
}


/* ──────────────────────────────────────────
   05 · Для кого это (интерактивный фильтр)
   ────────────────────────────────────────── */

.audience {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-8);
  padding-bottom: var(--s-8);
}

.audience__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);   /* 36px */
  line-height: var(--h1-section-lh);
  color: var(--card);
}

.audience__subtitle {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: 17px;
  line-height: 1.4;
  color: var(--on-dark-mid);
}

/* Список с тонкими разделителями между пунктами */
.audience__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 0.5px solid rgba(224, 191, 240, 0.22);
}

.audience__item {
  border-bottom: 0.5px solid rgba(224, 191, 240, 0.22);
  padding: var(--s-1) 0;
}

/* Стиль текста пункта (italic, Cormorant) — переопределяем default из .checkbox__text */
.audience .checkbox__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  font-size: 18px;
  line-height: 1.4;
  color: var(--on-dark);
}

/* CTA: приглушённая по умолчанию → активная, когда отмечен хотя бы один чекбокс */
.audience__cta {
  width: 100%;
  background: rgba(94, 68, 128, 0.35);
  color: rgba(251, 239, 217, 0.5);
  pointer-events: none;
  cursor: default;
  transition: background var(--t-fast) var(--easing),
              color var(--t-fast) var(--easing);
}

.audience:has(.checkbox input:checked) .audience__cta {
  background: var(--accent);
  color: var(--ink);
  pointer-events: auto;
  cursor: pointer;
}

@media (min-width: 700px) {
  .audience__heading { font-size: 44px; }
  .audience .checkbox__text { font-size: 19px; }
}


/* ──────────────────────────────────────────
   06 · Указание или наказание (манифест)
   ────────────────────────────────────────── */

.manifesto {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-8);
  padding-bottom: 0;            /* рука доходит до самого низа секции */
}

.manifesto__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);   /* 36px */
  line-height: var(--h1-section-lh);
  color: var(--card);
}

.manifesto__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.manifesto__body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--on-dark);
}

/* Italic-пуанта: правое смещение, как в Philosophy */
.manifesto__accent {
  margin: var(--s-3) 0 0;
  align-self: flex-end;
  max-width: 80%;
  text-align: left;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: 26px;
  line-height: 1.3;
  color: var(--accent-2);
}

.manifesto {
  position: relative;     /* контекст для z-index */
}

.manifesto__cta {
  width: 100%;
  margin-top: var(--s-3);
  position: relative;
  z-index: 2;             /* кнопка над рукой */
}

/* Контейнер для руки — обрезает картинку, показывая только нижнюю часть.
   По Figma: wrapper 363×251 в frame 305-wide → 119% × фикс. высота.
   Картинка внутри — больше wrapper'а и сдвинута наверх (показывается только bottom). */
.manifesto__hand-wrap {
  position: relative;
  width: 120vw;                       /* ≈119% по Figma */
  margin-left: -12vw;                 /* extends ~12% за левый край */
  margin-right: -8vw;
  margin-top: var(--s-2);             /* ~9px зазор от кнопки */
  aspect-ratio: 363 / 251;            /* пропорции wrapper'а из Figma */
  overflow: hidden;
  pointer-events: none;
}

.manifesto__hand {
  position: absolute;
  top: -87.76%;                       /* большая часть картинки выше wrapper'а — скрыта */
  left: -8.07%;
  width: 129.05%;
  height: 187.76%;
  display: block;
  max-width: none;                    /* перебиваем base img max-width: 100% */
}

@media (min-width: 700px) {
  .manifesto__heading { font-size: 44px; }
  .manifesto__accent  { font-size: 32px; max-width: 70%; }
}


/* ──────────────────────────────────────────
   07 · Как это происходит (таймлайн + до/после)
   ────────────────────────────────────────── */

/* (заполняется при вёрстке) */


/* ──────────────────────────────────────────
   08 · Подробно о Роме (Мой путь)
   ────────────────────────────────────────── */

.bio {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);                /* больше воздуха между heading, фото и текстом */
  padding-top: var(--s-8);
  padding-bottom: var(--s-8);
}

.bio__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);   /* 36px */
  line-height: var(--h1-section-lh);
  color: var(--card);
}

/* Фото стакаются вертикально, между ними коннектор «9 лет спустя» */
.bio__photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);                 /* меньше gap, потому что между фото есть коннектор */
  margin: var(--s-5) 0 var(--s-3); /* доп. воздух сверху, чтобы corner-ticks не залезали на heading */
  padding: 0 var(--s-3);
}

.bio__photo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* Рамка фото — corner-ticks вынесены наружу.
   aspect-ratio ставим на <img> — так гарантированно жёстко фиксируется
   квадратная форма обоих изображений, независимо от исходных пропорций. */
.bio__photo-media {
  position: relative;
  background: var(--surface-dark);
}
.bio__photo-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;             /* совпадает с натуральным аспектом фото */
  object-fit: cover;
  object-position: center;
  border-radius: var(--r-field);
}

/* Простая стрелка-коннектор между двумя фото */
.bio__photo-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--s-3) 0;
  color: var(--accent-2);
}

/* Corner-ticks выходят за пределы фото — лежат на холсте, всегда видны.
   Сдвигаем элементы на их полный размер (22px), чтобы L-shape сидел
   за углом картинки в фоновой области. */
.bio__photo-media .corner.tl { top: -28px; left: -28px;  bottom: auto; right: auto; }
.bio__photo-media .corner.tr { top: -28px; right: -28px; bottom: auto; left: auto; }
.bio__photo-media .corner.bl { bottom: -28px; left: -28px;  top: auto; right: auto; }
.bio__photo-media .corner.br { bottom: -28px; right: -28px; top: auto; left: auto; }

/* Подпись под фото — italic, центрированная, приглушённая */
.bio__photo-caption {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  font-size: 17px;
  line-height: 1.35;
  color: var(--on-dark-mid);
}

/* Body — биография в нескольких абзацах */
.bio__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.bio__body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--on-dark);
}

/* Italic-акцент в конце — провокативный вопрос */
.bio__accent {
  margin: var(--s-3) 0 0;
  align-self: flex-end;
  max-width: 80%;
  text-align: left;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: 26px;
  line-height: 1.3;
  color: var(--accent-2);
}

.bio__cta {
  width: 100%;
}

@media (min-width: 700px) {
  .bio__heading { font-size: 44px; }
  .bio__accent  { font-size: 32px; max-width: 70%; }
}


/* ──────────────────────────────────────────
   09 · Форма-заявка (wizard, 6 шагов)
   ────────────────────────────────────────── */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-8);
  padding-bottom: var(--s-8);
}

.form__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);
  line-height: var(--h1-section-lh);
  color: var(--card);
}

.form__subtitle {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--on-dark-mid);
}

/* ──── Прогресс-бар ──── */
.form__progress {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.form__progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lilac);
}
.form__progress-name {
  color: var(--on-dark-faint);
  text-align: right;
}

.form__progress-bar {
  display: flex;
  gap: var(--s-1);
}
.form__progress-segment {
  flex: 1;
  height: 4px;
  background: rgba(224, 191, 240, 0.15);
  border-radius: 2px;
  transition: background var(--t-fast) var(--easing);
}
.form__progress-segment.is-filled {
  background: var(--lilac);
}

/* ──── Шаги ──── */
.form__wizard {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
/* Перебиваем display:flex когда стоит атрибут hidden */
.form__wizard[hidden] {
  display: none;
}

.form__step {
  display: none;
  flex-direction: column;
  gap: var(--s-4);
  margin: 0;
  padding: var(--s-5) var(--s-4);
  border: 0.5px solid rgba(224, 191, 240, 0.25);
  border-radius: var(--r-card);
  background: rgba(28, 14, 44, 0.25);
}
.form__step.is-active {
  display: flex;
}

/* Подсказка с оранжевым акцентом (для шага 3 и 5) */
.form__step-hint {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--accent);
}

.form__step-subtitle {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--on-dark);
}

/* ──── Поля ──── */
.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.form__label {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-dark-mid);
}
.form__required {
  color: var(--accent);
  margin-left: 2px;
}

.form__input,
.form__textarea {
  width: 100%;
  padding: var(--s-3);
  border: 0.5px solid rgba(224, 191, 240, 0.3);
  border-radius: var(--r-field);
  background: rgba(28, 14, 44, 0.4);
  color: var(--card);
  font-family: var(--font-body);
  font-size: 16px;                 /* минимум 16px — iOS Safari не зумит при фокусе */
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--easing);
}
.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--on-dark-faint);
}
.form__input:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form__textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--font-body);
}

.form__caption {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--on-dark-faint);
}

/* ──── Группы (например, Услуга / Формат на шаге 2) ──── */
.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.form__group-label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-dark-mid);
}

/* В форме чекбоксы компактнее, чем в audience-блоке */
.form .checkbox {
  padding: var(--s-1) 0;
  min-height: 36px;
}
.form .checkbox__text {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.4;
  color: var(--on-dark);
}

/* ──── Навигация ──── */
.form__nav {
  display: flex;
  gap: var(--s-3);
}

.form__back,
.form__next {
  flex: 1;
}

.form__back {
  /* ghost-вид с большим паддингом */
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 17px 22px;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--card);
  border: 0.5px solid var(--lilac);
  transition: opacity var(--t-fast) var(--easing);
}
.form__back:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.form__next {
  /* primary apricot */
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 17px 22px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--ink);
  border: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--easing),
              color var(--t-fast) var(--easing);
}
.form__next:hover:not(:disabled) {
  background: color-mix(in oklab, var(--accent) 92%, black);
}
.form__next:disabled {
  background: rgba(94, 68, 128, 0.35);
  color: rgba(251, 239, 217, 0.5);
  cursor: not-allowed;
}

/* ──── Экран подтверждения ──── */
.form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
  padding: var(--s-7) var(--s-5);
  border: 1px dashed rgba(224, 191, 240, 0.4);
  border-radius: var(--r-field);
}
/* Перебиваем display:flex когда стоит атрибут hidden */
.form__success[hidden] {
  display: none;
}

.form__success-icon {
  color: var(--card);
  margin-bottom: var(--s-2);
}

.form__success-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 28px;
  line-height: 1.1;
  color: var(--card);
}

.form__success-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--on-dark-mid);
  max-width: 360px;
}

.form__success-cta {
  margin-top: var(--s-3);
  width: 100%;
}

@media (min-width: 700px) {
  .form__heading { font-size: 44px; }
  .form__success-title { font-size: 32px; }
}


/* ──────────────────────────────────────────
   10 · Footer — чёрный прямоугольник на всю ширину viewport
   ────────────────────────────────────────── */

.site-footer {
  background: #000;
  padding: var(--s-6) var(--page-padding-x);
}

.site-footer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.site-footer__links {
  display: flex;
  gap: var(--s-7);
}

.site-footer__link {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--card);
  text-decoration: none;
  transition: color var(--t-fast) var(--easing);
}
.site-footer__link:hover {
  color: var(--accent-2);
}

.site-footer__copyright {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--on-dark-faint);
  letter-spacing: 0.05em;
}