/* =========================================================================
   ВАГИМАГИЯ — общие стили для обоих лендингов
   («Восстановление после родов» и «Подготовка к родам»)
   Чистый CSS, mobile-first, без зависимостей.
   Фирменный стиль: белый фон, красный #EB534B, розовые акцентные плашки,
   логотип курсивом-serif. Спокойно, женственно, премиально.
   ========================================================================= */

/* ---- 1. Токены (единая палитра, типографика, радиусы, отступы) --------- */
:root {
  /* Цвета (один акцент на весь сайт — красный) */
  --red:        #EB534B;   /* основной акцент, кнопки */
  --red-dark:   #d8433b;   /* ховер кнопок */
  --ink:        #1a1a1a;   /* основной текст */
  --muted:      #6b6b6b;   /* вторичный текст */
  --line:       #ececec;   /* тонкие разделители */
  --white:      #ffffff;
  --pink:       #fde8e6;   /* мягкая розовая плашка (акцентные блоки) */
  --pink-2:     #fbe4ef;   /* второй оттенок розового (выделения) */
  --cream:      #fbf7f6;   /* едва тёплый фон секции для ритма */

  /* Типографика: Manrope — заголовки и текст; Georgia — только логотип */
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-logo: Georgia, "Times New Roman", "PT Serif", serif;

  /* Единый набор кеглей (ограниченный, без «10 разных размеров») */
  --fs-h1:   clamp(1.9rem, 6vw, 3rem);      /* ~30–48px */
  --fs-h2:   clamp(1.55rem, 4.4vw, 2.25rem);/* ~25–36px */
  --fs-h3:   clamp(1.15rem, 2.6vw, 1.4rem); /* ~18–22px */
  --fs-lead: clamp(1.05rem, 2.2vw, 1.22rem);/* подзаголовки */
  --fs-body: 1.0625rem;                     /* 17px тело */
  --fs-sm:   0.9rem;

  /* Радиусы — одна консистентная шкала */
  --r-sm:  10px;   /* инпуты */
  --r-md:  14px;   /* кнопки */
  --r-lg:  22px;   /* карточки, плашки */
  --r-pill: 999px; /* бейджи */

  /* Отступы кратны 8px */
  --gap: 8px;
  --pad-x: clamp(18px, 5vw, 40px);
  --section-y: clamp(56px, 9vw, 104px);

  --maxw: 1120px;
  --shadow: 0 18px 50px rgba(235, 83, 75, 0.10); /* тень тонирована в акцент */
}

/* ---- 2. Сброс и база --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

/* Когда открыта модалка — блокируем скролл фона */
body.no-scroll { overflow: hidden; }

/* ---- 3. Раскладка ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.section { padding-block: var(--section-y); }
.section--cream { background: var(--cream); }

/* Заголовок секции */
.section__head { max-width: 640px; margin-bottom: clamp(28px, 5vw, 44px); }
.section__head--center { margin-inline: auto; text-align: center; }

/* ---- 4. Типографика ---------------------------------------------------- */
.h1 { font-size: var(--fs-h1); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
.h2 { font-size: var(--fs-h2); line-height: 1.14; font-weight: 800; letter-spacing: -0.015em; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.accent { color: var(--red); }
.nowrap { white-space: nowrap; }

/* Бейдж-плашка (эйбрау) — используется дозированно, не над каждой секцией */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--pink);
  padding: 8px 14px;
  border-radius: var(--r-pill);
}

/* Логотип «Вагимагия» — реальный вордмарк (картинка).
   .logo оставлен как текстовый fallback, если картинка не загрузится. */
.logo {
  font-family: var(--font-logo);
  font-style: italic;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--red);
  letter-spacing: -0.01em;
}
.logo-img { height: 30px; width: auto; display: block; }
.footer .logo-img { height: 34px; }

/* ---- 5. Кнопки --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;               /* крупная зона нажатия под палец */
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  transition: background-color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.btn--primary { background: var(--red); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--red-dark); }
.btn--primary:active { transform: translateY(1px); }
.btn--primary:focus-visible { outline: 3px solid rgba(235,83,75,.35); outline-offset: 2px; }

.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--red); color: var(--red); }

.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 0.92rem; }
.btn--lg { min-height: 58px; font-size: 1.06rem; padding: 16px 30px; }
.btn--block { display: flex; width: 100%; }

/* Мелкая подпись под CTA */
.cta-note { font-size: var(--fs-sm); color: var(--muted); margin-top: 12px; }

/* ---- 6. Шапка ---------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
}

/* ---- 7. Первый экран (HERO) — асимметричный сплит ---------------------- */
.hero { background: linear-gradient(180deg, var(--pink) 0%, #fff 62%); }
.hero__grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 48px);
  align-items: center;
  padding-block: clamp(36px, 6vw, 72px);
}
.hero__content { max-width: 620px; }
.hero .h1 { margin-top: 18px; }
.hero__sub { margin-top: 18px; }
.hero__accent-line { margin-top: 14px; font-weight: 700; font-size: var(--fs-lead); }
.hero__cta { margin-top: 28px; }

/* Регалии под фото / текстом */
.regalia { display: grid; gap: 10px; margin-top: 26px; }
.regalia li {
  display: flex; align-items: flex-start; gap: 12px;
  font-weight: 600; font-size: 1rem;
}
.regalia li::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  background: var(--pink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EB534B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 14px no-repeat;
  border-radius: var(--r-pill);
}

/* Медиа-колонка героя */
.hero__media { position: relative; }

/* ---- 8. Универсальный «placeholder» под изображения ------------------- */
/* Пока в /assets нет файла — показывается аккуратная плашка с подписью.
   Как только положишь файл с нужным именем — картинка перекроет плашку. */
.ph {
  position: relative; overflow: hidden;
  background: var(--pink-2);
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
}
.ph::after {
  content: attr(data-label);
  padding: 18px; text-align: center;
  font-size: 0.86rem; font-weight: 600; color: var(--red);
  max-width: 80%;
}
.ph > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.ph--portrait { aspect-ratio: 4 / 5; }
.ph--square   { aspect-ratio: 1 / 1; }
.ph--wide     { aspect-ratio: 16 / 9; }

/* Кадрирование конкретных фото (лицо должно оставаться в кадре) */
.hero__media .ph > img     { object-position: 50% 16%; }
.author__photo .ph > img   { object-position: 50% 14%; }

/* ---- 9. Списки-иконки (чек / крест / точка) --------------------------- */
.list { display: grid; gap: 14px; }
.list--2col { grid-template-columns: 1fr; }
.list li {
  position: relative; padding-left: 36px; line-height: 1.5;
}
.list li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 24px; height: 24px; background-repeat: no-repeat;
  background-position: center; background-size: 22px;
}
/* Красная галочка */
.list--check li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EB534B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}
/* Серый крест (что НЕ работает) */
.list--x li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3b3b3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>");
}
.list--x li { color: var(--muted); }
/* Мягкая точка (нейтральный список болей) */
.list--dot li::before {
  top: 8px; width: 24px; height: 12px; background-size: 9px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='6' fill='%23EB534B'/></svg>");
}

/* ---- 10. Акцентная плашка (розовый вывод) ----------------------------- */
.plaque {
  background: var(--pink);
  border-radius: var(--r-lg);
  padding: clamp(20px, 4vw, 32px);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.5;
}
.plaque--soft { background: var(--cream); border: 1px solid var(--line); }

/* ---- 11. Цепочка «причина» (вертикальный поток) ----------------------- */
.chain { display: grid; gap: 0; max-width: 560px; }
.chain__item {
  position: relative; padding: 14px 0 14px 40px; font-weight: 600;
}
.chain__item::before { /* точка */
  content: ""; position: absolute; left: 8px; top: 20px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 5px var(--pink);
}
.chain__item::after {  /* соединительная линия */
  content: ""; position: absolute; left: 13px; top: 30px; bottom: -4px;
  width: 2px; background: var(--pink-2);
}
.chain__item:last-child::after { display: none; }
.chain__final {
  margin-top: 22px; font-size: var(--fs-lead); font-weight: 700; color: var(--red);
}

/* ---- 12. Маршрут-таймлайн (ключевой смысловой блок) -------------------- */
/* Мобайл — вертикально; десктоп — горизонтальный степпер. */
.roadmap { --dot: 44px; }
.roadmap__track {
  display: grid; gap: 6px;
  counter-reset: step;
}
.roadmap__step {
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  padding-bottom: 24px;
}
.roadmap__num {
  counter-increment: step;
  flex: 0 0 auto;
  width: var(--dot); height: var(--dot);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--red); color: #fff; font-weight: 800; font-size: 1.05rem;
  position: relative; z-index: 1;
}
.roadmap__num::before { content: counter(step); }
.roadmap__step:not(:last-child)::before { /* вертикальный коннектор */
  content: ""; position: absolute; left: calc(var(--dot) / 2 - 1px); top: var(--dot);
  bottom: 0; width: 2px; background: var(--pink-2);
}
.roadmap__label { font-weight: 700; padding-top: 9px; line-height: 1.3; }

/* ---- 13. Тарифы -------------------------------------------------------- */
.pricing { display: grid; gap: 22px; grid-template-columns: 1fr; }
.plan {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(24px, 4vw, 34px);
}
.plan--featured {
  border-color: var(--red);
  box-shadow: var(--shadow);
  position: relative;
}
.plan__tag {
  position: absolute; top: -13px; left: clamp(24px, 4vw, 34px);
  background: var(--red); color: #fff;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--r-pill);
}
.plan__name { font-size: 1.5rem; font-weight: 800; }
.plan__desc { color: var(--muted); margin-top: 6px; }
.plan__list { display: grid; gap: 11px; margin: 22px 0; }
.plan__list li { position: relative; padding-left: 30px; }
.plan__list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EB534B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 18px no-repeat;
}
.plan__bonus {
  background: var(--pink); border-radius: var(--r-md);
  padding: 16px 18px; margin-bottom: 22px;
}
.plan__bonus-title { font-weight: 800; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.plan__bonus ul { display: grid; gap: 8px; }
.plan__bonus li { position: relative; padding-left: 22px; font-size: 0.96rem; }
.plan__bonus li::before {
  content: "+"; position: absolute; left: 4px; top: -1px; color: var(--red); font-weight: 800;
}
.plan__price { margin-top: auto; margin-bottom: 18px; }
.price-old { color: var(--muted); text-decoration: line-through; font-size: 1.05rem; }
.price-new { display: block; font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1.1; margin-top: 4px; }
.price-new small { font-size: 0.9rem; font-weight: 700; color: var(--red); display: block; margin-top: 4px; letter-spacing: 0.02em; }

/* ---- 14. Автор --------------------------------------------------------- */
.author__grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 44px); align-items: start; }
/* В одну колонку (мобилка/планшет) фото центрируем относительно текста;
   в двухколоночной раскладке (≥860px, ниже) выравниваем по левому краю. */
.author__photo { max-width: 360px; margin-inline: auto; }

/* ---- 15. «С нами легко» + видео --------------------------------------- */
/* align-items:center — вертикально выравниваем левые пункты по центру
   относительно высокого вертикального видео справа. */
.easy__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 48px); align-items: center; }
/* Правая колонка (плашка + заголовок + видео) — аккуратный центрированный стек */
.easy__story { text-align: center; }
.easy__items { display: grid; gap: 22px; }
.easy__item { display: flex; gap: 16px; align-items: flex-start; }
.easy__icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--pink); display: grid; place-items: center; color: var(--red);
}
.easy__icon svg { width: 24px; height: 24px; }
.easy__item h3 { font-size: 1.08rem; font-weight: 700; }
.easy__item p { color: var(--muted); margin-top: 4px; font-size: 0.98rem; }

/* Адаптивный контейнер видео 16:9 (по умолчанию) */
.video {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--r-lg); overflow: hidden; background: var(--pink-2);
}
/* Портретный вариант под вертикальное видео (Reels / личная история 9:16) */
.video--portrait { aspect-ratio: 9 / 16; max-width: 330px; margin-inline: auto; }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__ph {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 20px; color: var(--red); font-weight: 600; gap: 10px;
}
.video__ph svg { width: 54px; height: 54px; }

/* ---- 16. Отзывы -------------------------------------------------------- */
.reviews__grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
.review {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 26px);
  display: flex; flex-direction: column; gap: 14px;
}
.review__stars { color: var(--red); letter-spacing: 2px; font-size: 1rem; }
.review__text { line-height: 1.55; }
.review__author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review__avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--pink-2);
  display: grid; place-items: center; font-weight: 800; color: var(--red); flex: 0 0 auto;
  overflow: hidden;
}
.review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.review__name { font-weight: 700; font-size: 0.96rem; }
.review__role { color: var(--muted); font-size: 0.85rem; }

/* ---- 17. Футер --------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); padding-block: clamp(36px, 6vw, 56px); background: var(--cream); }
.footer__grid { display: grid; gap: 22px; }
.footer .logo { font-size: 1.35rem; }
.footer__legal { color: var(--muted); font-size: 0.85rem; line-height: 1.6; max-width: 62ch; }
.footer__links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__links a { color: var(--muted); font-size: 0.88rem; border-bottom: 1px solid transparent; }
.footer__links a:hover { color: var(--red); border-color: var(--red); }
.footer__copy { color: var(--muted); font-size: 0.82rem; }

/* ---- 18. Модальная форма ---------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.is-open { display: block; }
.modal__overlay { position: absolute; inset: 0; background: rgba(26,26,26,0.55); backdrop-filter: blur(2px); }
.modal__dialog {
  position: relative; z-index: 1;
  width: min(460px, calc(100% - 32px));
  margin: clamp(24px, 8vh, 96px) auto;
  background: #fff; border-radius: var(--r-lg);
  padding: clamp(24px, 5vw, 36px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  animation: modal-in .22s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border: 0; background: var(--cream); border-radius: 50%;
  display: grid; place-items: center; color: var(--ink); font-size: 1.4rem; line-height: 1;
}
.modal__close:hover { background: var(--pink); color: var(--red); }
.modal__title { font-size: 1.5rem; font-weight: 800; }
.modal__subtitle { color: var(--muted); margin-top: 8px; margin-bottom: 22px; }

/* Форма */
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 0.9rem; font-weight: 600; }
.field input {
  min-height: 52px; padding: 12px 16px; font-size: 1rem; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: #9a9a9a; }
.field input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(235,83,75,.15); }
.field input:invalid:not(:placeholder-shown) { border-color: #e0a3a0; }
.field__error { color: var(--red); font-size: 0.82rem; min-height: 1em; }

/* Honeypot — скрытое поле-ловушка для ботов (не трогать визуально) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.82rem; color: var(--muted); margin: 4px 0 20px; }
.consent input { margin-top: 3px; accent-color: var(--red); width: 18px; height: 18px; flex: 0 0 auto; }
.consent a { color: var(--red); border-bottom: 1px solid rgba(235,83,75,.3); }

/* Экран «Спасибо» */
.success { text-align: center; display: none; }
.modal.is-success .form { display: none; }
.modal.is-success .success { display: block; }
.success__icon {
  width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--pink); display: grid; place-items: center; color: var(--red);
}
.success__icon svg { width: 36px; height: 36px; }

/* ---- 19. Анимации появления (сдержанно, honor reduced-motion) --------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .modal__dialog { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* =========================================================================
   20. Адаптив — раскладки для планшета и десктопа (mobile-first базой выше)
   ========================================================================= */
@media (min-width: 600px) {
  .list--2col { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .reviews__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 860px) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; }
  .hero__media { order: 2; }
  .pricing { grid-template-columns: 1fr 1fr; align-items: start; }
  .author__grid { grid-template-columns: 320px 1fr; }
  .author__photo { margin-inline: 0; }
  .easy__grid { grid-template-columns: 1fr 1fr; }
  .reviews__grid { grid-template-columns: repeat(3, 1fr); }

  /* Маршрут — горизонтальный степпер на десктопе */
  .roadmap__track {
    grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 0; align-items: start;
  }
  .roadmap__step { flex-direction: column; align-items: flex-start; padding: 0 12px; text-align: left; }
  .roadmap__step:not(:last-child)::before {
    left: auto; top: calc(var(--dot) / 2 - 1px); right: -50%;
    width: auto; left: calc(var(--dot) + 8px); height: 2px; bottom: auto;
    /* линия между кружками */
  }
  .roadmap__label { padding-top: 16px; }
}

/* =========================================================================
   21. ДИЗАЙН-СЛОЙ: декоративные акценты, анимации, галерея отзывов, лайтбокс
   Добавлено во втором проходе. Стиль сдержанный, женственный, без «крика».
   ========================================================================= */

/* ---- 21.1 Декоративные «блики» в hero (мягкие розовые пятна) ---------- */
.hero { position: relative; overflow: hidden; }
.hero__decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__decor span {
  position: absolute; border-radius: 50%; filter: blur(50px); opacity: .55;
}
.hero__decor span:nth-child(1) { width: 320px; height: 320px; background: #f8c9d6; top: -80px; right: -60px; animation: float1 14s ease-in-out infinite; }
.hero__decor span:nth-child(2) { width: 260px; height: 260px; background: #fcd9cf; bottom: -90px; left: -70px; animation: float2 18s ease-in-out infinite; }
.hero__decor span:nth-child(3) { width: 180px; height: 180px; background: #fbe3ec; top: 40%; left: 45%; opacity: .4; animation: float1 20s ease-in-out infinite; }
.hero .container { position: relative; z-index: 1; }
@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,26px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-22px,-18px); } }

/* Тонкая «подпись»-подчёркивание под акцентными словами в заголовках */
.underline-accent {
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 3px;
  transition: background-size .8s cubic-bezier(.16,1,.3,1);
  padding-bottom: 2px;
}
.reveal.is-visible .underline-accent,
.is-visible.underline-accent { background-size: 100% 3px; }

/* ---- 21.2 Рамка-«фото»: декоративная обводка вокруг портретов --------- */
.hero__media .ph, .author__photo .ph {
  box-shadow: 0 30px 70px rgba(235,83,75,.16);
}
.hero__media .ph::before, .author__photo .ph::before {
  content: ""; position: absolute; inset: 10px; z-index: 2;
  border: 1px solid rgba(255,255,255,.55); border-radius: calc(var(--r-lg) - 8px);
  pointer-events: none;
}
/* Мягкий «мазок» за фото героя */
.hero__media { position: relative; }
.hero__media::after {
  content: ""; position: absolute; z-index: -1;
  inset: auto -18px -18px auto; width: 62%; height: 62%;
  background: var(--pink-2); border-radius: var(--r-lg);
}

/* ---- 21.3 Тень шапки при скролле -------------------------------------- */
.header { transition: box-shadow .25s ease, background-color .25s ease; }
.header.is-scrolled { box-shadow: 0 6px 24px rgba(26,26,26,.06); }

/* ---- 21.4 Ховеры карточек (тариф, отзыв) ------------------------------ */
.plan { transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease; }
.plan:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(235,83,75,.14); }
.easy__icon { transition: transform .28s cubic-bezier(.16,1,.3,1); }
.easy__item:hover .easy__icon { transform: translateY(-3px) rotate(-4deg); }

/* Иконка-стрелка внутри кнопок */
.btn__arrow { transition: transform .2s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---- 21.5 Стаггер-появление элементов списков и шагов ----------------- */
.list.reveal li, .plan__list li, .regalia li { will-change: opacity, transform; }
.list.reveal li {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.list.reveal.is-visible li { opacity: 1; transform: none; }
.list.reveal.is-visible li:nth-child(1) { transition-delay: .04s; }
.list.reveal.is-visible li:nth-child(2) { transition-delay: .10s; }
.list.reveal.is-visible li:nth-child(3) { transition-delay: .16s; }
.list.reveal.is-visible li:nth-child(4) { transition-delay: .22s; }
.list.reveal.is-visible li:nth-child(5) { transition-delay: .28s; }
.list.reveal.is-visible li:nth-child(6) { transition-delay: .34s; }
.list.reveal.is-visible li:nth-child(7) { transition-delay: .40s; }
.list.reveal.is-visible li:nth-child(8) { transition-delay: .46s; }

/* Оживание маршрута: узлы «выезжают» по очереди */
.roadmap.reveal .roadmap__step { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.roadmap.reveal.is-visible .roadmap__step { opacity: 1; transform: none; }
.roadmap.reveal.is-visible .roadmap__step:nth-child(1){transition-delay:.05s}
.roadmap.reveal.is-visible .roadmap__step:nth-child(2){transition-delay:.14s}
.roadmap.reveal.is-visible .roadmap__step:nth-child(3){transition-delay:.23s}
.roadmap.reveal.is-visible .roadmap__step:nth-child(4){transition-delay:.32s}
.roadmap.reveal.is-visible .roadmap__step:nth-child(5){transition-delay:.41s}
.roadmap.reveal.is-visible .roadmap__step:nth-child(6){transition-delay:.50s}
.roadmap.reveal.is-visible .roadmap__step:nth-child(7){transition-delay:.59s}
/* Пульс у номера-кружка при появлении */
.roadmap.reveal.is-visible .roadmap__num { animation: pop .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ---- 21.6 Секция-разделитель: тонкая волна между блоками (декор) ------ */
.wave-divider { display: block; width: 100%; height: 40px; color: var(--cream); }

/* ---- 21.7 Отзывы: масонри-галерея скриншотов ------------------------- */
.reviews-trust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 18px; margin: 0 auto 34px; text-align: center; color: var(--muted); font-weight: 600;
}
.reviews-trust strong { color: var(--ink); }
.reviews-trust .stars { color: var(--red); letter-spacing: 2px; }

.reviews-masonry { columns: 1; column-gap: 16px; }
.shot {
  break-inside: avoid; margin: 0 0 16px;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #fff; cursor: zoom-in;
  transition: transform .26s cubic-bezier(.16,1,.3,1), box-shadow .26s ease;
  opacity: 0; transform: translateY(14px);
}
.reviews-masonry.is-visible .shot { opacity: 1; transform: none; }
.reviews-masonry.is-visible .shot:nth-child(1){transition-delay:.03s}
.reviews-masonry.is-visible .shot:nth-child(2){transition-delay:.09s}
.reviews-masonry.is-visible .shot:nth-child(3){transition-delay:.15s}
.reviews-masonry.is-visible .shot:nth-child(4){transition-delay:.21s}
.reviews-masonry.is-visible .shot:nth-child(5){transition-delay:.27s}
.reviews-masonry.is-visible .shot:nth-child(6){transition-delay:.33s}
.reviews-masonry.is-visible .shot:nth-child(7){transition-delay:.39s}
.reviews-masonry.is-visible .shot:nth-child(8){transition-delay:.45s}
.reviews-masonry.is-visible .shot:nth-child(9){transition-delay:.51s}
.shot:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(235,83,75,.14); }
.shot img { width: 100%; display: block; }

@media (min-width: 600px) { .reviews-masonry { columns: 2; } }
@media (min-width: 960px) { .reviews-masonry { columns: 3; } }

/* ---- 21.8 Лайтбокс (увеличение отзыва по клику) ---------------------- */
.lightbox { position: fixed; inset: 0; z-index: 120; display: none; }
.lightbox.is-open { display: grid; place-items: center; }
.lightbox__overlay { position: absolute; inset: 0; background: rgba(26,26,26,.8); backdrop-filter: blur(3px); animation: modal-in .2s ease; }
.lightbox__img {
  position: relative; z-index: 1; max-width: min(760px, 92vw); max-height: 88vh;
  border-radius: 12px; box-shadow: 0 30px 90px rgba(0,0,0,.5);
  animation: modal-in .24s ease;
}
.lightbox__close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ink); font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center;
}
.lightbox__close:hover { background: #fff; color: var(--red); }

/* ---- 21.9 Reduced-motion: гасим декоративное движение ----------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__decor span { animation: none !important; }
  .roadmap.reveal .roadmap__step,
  .list.reveal li,
  .reviews-masonry .shot { opacity: 1 !important; transform: none !important; transition: none !important; }
  .roadmap.reveal.is-visible .roadmap__num { animation: none !important; }
  .underline-accent { background-size: 100% 3px !important; transition: none; }
}