/* ==========================================================================
   Лендинг — статическая копия структуры и дизайн-системы vavs.ai
   Все токены и метрики сняты с оригинала (см. ../vavs.ai.md)
   ========================================================================== */

:root {
  /* — чернила и кремы — */
  --ink: #1a1a1a;
  --ink-soft: #2c2a26;
  --ink-muted: #5c584f;
  --cream-fone: #f6f1e8;
  --cream-card: #fbf7ef;
  --cream-deep: #efe6d8;
  --cream-90: #f7f4ee;
  --cream-soft: #c8c2b5;
  --gray: #87837a;
  --gray-muted: #87837aa6;

  /* — акценты: розовый разбит по фону — */
  --rose: #e9c8c1;        /* только на --ink */
  --rose-deep: #b66b5c;   /* только на --cream-fone */
  --rose-text: #8a4d41;   /* та же глина, но затемнённая до 5.8:1 — для мелких ссылок */
  --sage: #7e9f72;
  --coral: #d9856c;

  /* — границы — */
  --border: #1a1a1a1a;
  --border-strong: #1a1a1a33;
  --dark-border: #ffffff1a;
  --dark-surface: #ffffff14;

  /* — спейсинг — */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-xxl: 96px;

  /* — радиусы — */
  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-control: 16px;
  --radius-sm: 12px;

  /* — шрифты — */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display-serif: "Fraunces", Georgia, serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}

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

/* ── Переходы по якорям из шапки ──
   Плавная прокрутка вместо рывка. scroll-margin-top обязателен: шапка висит
   поверх страницы (79px), и без отступа заголовок раздела уезжает под неё.
   96px — высота шапки плюс воздух. Системную настройку «меньше движения»
   уважаем: кому от прокрутки плохо, тому оставляем мгновенный переход. */
html { scroll-behavior: smooth; }
#how, #work, #pricing, #styles { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream-fone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ==========================================================================
   Шапка
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 241, 232, 0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(140%) blur(10px);
}

.navInner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 24px;
}

.logo {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  transition: opacity 0.15s;
}
.logo:hover { opacity: 0.78; }
.logoMark { flex-shrink: 0; width: 26px; height: 26px; display: block; }

.navLinks {
  grid-column: 2;
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.navLinks a {
  color: var(--ink);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.2s;
}
.navLinks a:hover { opacity: 0.6; }

.navActions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 24px;
}
.navLogin {
  color: var(--ink);
  opacity: 0.7;
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.2s;
}
.navLogin:hover { opacity: 1; }

.navCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--cream-90);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  transition: opacity 0.15s;
}
.navCta:hover { opacity: 0.85; }

/* прозрачная шапка поверх hero, плотная — после скролла */
.navOverlay {
  position: fixed;
  inset: 0 0 auto 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background 0.3s;
}
.navOverlay::before {
  content: "";
  position: absolute;
  inset: 0 0 -32px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(rgba(26, 26, 26, 0.9) 0%, rgba(26, 26, 26, 0.45) 55%, rgba(26, 26, 26, 0) 100%);
}
.navOverlayScrolled { background: rgba(26, 26, 26, 0.92); }
.navOverlayScrolled::before { display: none; }
.navOverlay .logo { color: var(--cream-fone); }
.navOverlay .navLinks a { color: var(--cream-soft); }
.navOverlay .navLinks a:hover { color: var(--cream-fone); opacity: 1; }
.navOverlay .navLogin { color: var(--cream-soft); }
.navOverlay .navLogin:hover { color: var(--cream-fone); }
.navOverlay .navCta { background: var(--cream-fone); color: var(--ink); }
.navOverlay .navCta:hover { background: var(--rose); opacity: 1; }

/* ==========================================================================
   Общее
   ========================================================================== */

.page {
  background: var(--ink);
  color: var(--cream-fone);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  min-width: 0;
  overflow-x: clip;
}
.page ::selection { background: var(--rose); color: var(--ink); }
.page img,
.page video { display: block; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 60px);
}

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}

.btn {
  display: inline-block;
  padding: 20px 42px;
  border-radius: var(--radius-pill);
  background: var(--rose);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 20px 60px rgba(233, 200, 193, 0.35);
  transition: transform 0.25s, background 0.25s;
}
.btn:hover {
  background: var(--cream-fone);
  transform: translateY(-2px);
}

/* ==========================================================================
   Видеостена (hero + финал)
   ========================================================================== */

/* Стена — бесконечная лента по вертикали, а не маятник.
   Раньше здесь был slowpan с animation-direction: alternate: фон ехал вверх,
   упирался и полз обратно вниз. Теперь содержимое продублировано ×2, а трек
   сдвигается ровно на одну копию — на стыке кадр в кадр, движение всегда
   в одну сторону, и плитки просто идут дальше и дальше. */
.wall {
  position: absolute;
  /* Высоту НЕ задаём — только top/left/right. Если задать и bottom (как inset),
     у сетки появляется определённая высота, и она делит её на ряды сама,
     игнорируя aspect-ratio плитки: ряд выходит меньше плитки и они наезжают. */
  top: -200px;
  left: -120px;
  right: -120px;
  --wall-gap: 22px;
  transform-origin: 50% center;
  perspective: 1200px;
  transform: rotateX(9deg) rotate(-3.5deg);
}

.wallTrack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;
  align-items: start;
  gap: var(--wall-gap);
  animation: wallScroll 150s linear infinite;
  will-change: transform;
}
.wallSlow .wallTrack { animation-duration: 195s; }

.cell {
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #241f1c;
}
/* Ступенька делается сдвигом ЦЕЛОЙ колонки, а не отдельных ячеек.
   У vavs сдвигалась каждая нечётная ячейка, но там плитка была 728px высотой
   и рядов всего два. На низких 16:9-плитках в пять рядов такой сдвиг больше
   зазора и загоняет ячейку в соседний ряд — плитки наезжают друг на друга.
   Сдвиг колонки двигает весь столбец разом: зазоры 22px остаются нетронутыми. */
.cell:nth-child(3n + 2) { transform: translateY(38px); }

.wall video,
.wall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
}

/* ==========================================================================
   Маятниковый наезд на статичных кадрах
   --------------------------------------------------------------------------
   Раньше зум был зашит в mp4 и шёл в одну сторону: доехав до предела, loop
   возвращал картинку в начало скачком. Здесь зум делает CSS с
   animation-direction: alternate — картинка приближается, затем так же
   медленно отдаляется, и стыка цикла не существует в принципе.
   ========================================================================== */

@keyframes slowZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.14); }
}

.cell img,
.frame img,
.phone img {
  animation: slowZoom 19s ease-in-out infinite alternate;
  will-change: transform;
}

/* Отрицательные задержки разводят кадры по фазе: без этого вся стена дышит
   в унисон и читается как один пульсирующий слой, а не как набор кадров. */
.cell:nth-child(4n + 1) img { animation-delay: -2s;  animation-duration: 19s; }
.cell:nth-child(4n + 2) img { animation-delay: -9s;  animation-duration: 23s; }
.cell:nth-child(4n + 3) img { animation-delay: -15s; animation-duration: 17s; }
.cell:nth-child(4n + 4) img { animation-delay: -5s;  animation-duration: 21s; }

.frame:nth-child(odd) img  { animation-delay: -7s;  animation-duration: 21s; }
.frame:nth-child(even) img { animation-delay: -13s; animation-duration: 18s; }

/* У vavs вуаль 0.52 → 0.72 → 0.94 накрывала тёмное видео. Здесь под ней яркие
   детские иллюстрации, и на прежней плотности заголовок начинал спорить с фоном. */
.veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 700px at 50% 46%,
    rgba(26, 26, 26, 0.64) 0%,
    rgba(26, 26, 26, 0.80) 62%,
    rgba(26, 26, 26, 0.96) 100%);
}

/* ==========================================================================
   1. Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1020px;
  overflow: hidden;
}

.heroIn {
  position: relative;
  z-index: 3;
  text-align: center;
}
.heroIn h1 {
  font-family: var(--font-display-serif);
  font-size: clamp(58px, 8.8vw, 128px);
  font-weight: 530;
  line-height: 0.99;
  letter-spacing: -0.045em;
  animation: up 1.1s ease 0.15s both;
}
.heroIn h1 em { color: var(--rose); font-style: italic; }

.heroSub {
  margin-top: 38px;
  color: var(--cream-soft);
  font-size: 20px;
  animation: up 1.1s ease 0.35s both;
}
.heroSub b { color: var(--cream-fone); font-weight: 500; }

.heroCta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 46px;
  animation: up 1.1s ease 0.5s both;
}

.live {
  position: absolute;
  bottom: 44px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  animation: up 1.1s ease 0.7s both;
}
.liveText { color: var(--cream-soft); }
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 12px var(--rose);
  animation: blink 1.8s ease-in-out infinite;
}

/* ==========================================================================
   2. Как устроено — sticky-телефон между шагами
   ========================================================================== */

.show {
  position: relative;
  background: var(--cream-fone);
  color: var(--ink);
}

.showHead { text-align: center; padding: 170px 0 20px; }
.showHead h2 {
  font-family: var(--font-display-serif);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 530;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.showHead h2 em { color: var(--rose-deep); font-style: italic; }
.showHead p { margin-top: 16px; color: var(--gray); font-size: 18px; }

.rail {
  display: grid;
  grid-template-columns: 1fr 460px 1fr;
  gap: 70px;
  width: 1280px;
  margin: 0 auto;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 330px;
  padding: 190px 0 120px;
}
.stepsRight { padding-top: 420px; }

.stepIdx {
  font-family: var(--font-display-serif);
  font-size: 56px;
  font-style: italic;
  line-height: 1;
  color: var(--cream-soft);
}
.step h3 {
  margin-top: 14px;
  font-family: var(--font-display-serif);
  font-size: 40px;
  font-weight: 530;
  letter-spacing: -0.02em;
}
.step p {
  max-width: 330px;
  margin-top: 12px;
  color: var(--ink-muted);
  font-size: 16px;
}
.stepTag { display: inline-block; margin-top: 16px; }
.stepTagAccent { color: var(--rose-deep); }

.phoneCol { position: relative; }
.sticky { position: sticky; top: 110px; padding: 60px 0 80px; }

.phoneWrap { position: relative; width: 400px; }
.phone {
  width: 400px;
  padding: 10px;
  border-radius: 38px;
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 60px 140px rgba(26, 26, 26, 0.4);
}
.phone video,
.phone img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 30px;
}

.navArr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--cream-soft);
  border-radius: 50%;
  background: var(--cream-fone);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.navArr:hover {
  border-color: var(--ink);
  background: var(--cream-card);
  transform: translateY(-50%) scale(1.06);
}
.navArr:active { transform: translateY(-50%) scale(0.97); }
.navArr svg { stroke: var(--ink); }
.navArrPrev { left: -84px; }
.navArrNext { right: -84px; }

.phoneCount { margin-top: 18px; text-align: center; }

/* ==========================================================================
   3. Цифра
   ========================================================================== */

.fig {
  background: var(--cream-fone);
  color: var(--ink);
  border-top: 1px solid var(--cream-deep);
  padding: 130px 0 110px;
}
.figGrid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 90px;
}
.figBig {
  font-family: var(--font-display-serif);
  font-size: clamp(110px, 15.5vw, 230px);
  font-weight: 530;
  line-height: 0.85;
  letter-spacing: -0.05em;
}
.figBig small { color: var(--gray); font-size: 70px; }
.figPer { margin-top: 30px; }

.cmp { display: flex; flex-direction: column; gap: 34px; }
.cmpRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cream-deep);
}
.cmpRow b {
  flex-shrink: 0;
  font-family: var(--font-display-serif);
  font-size: 32px;
  font-weight: 530;
  white-space: nowrap;
}
.cmpRowMuted b {
  color: var(--cream-soft);
  text-decoration: line-through;
  text-decoration-color: var(--rose-deep);
  text-decoration-thickness: 1.5px;
}
.cmpRow span {
  padding-left: 28px;
  color: var(--gray);
  font-size: 14px;
  text-align: right;
}
.cmpNote { color: var(--gray); font-size: 14px; line-height: 1.6; }

/* ==========================================================================
   4. Лента работ
   ========================================================================== */

.tape {
  background: var(--ink);
  padding: 90px 0 120px;
  overflow: hidden;
}
.tapeCap {
  max-width: 1280px;
  margin: 0 auto 48px;
  padding: 0 clamp(24px, 4vw, 60px);
  text-align: center;
}
.tapeCap h2 {
  font-family: var(--font-display-serif);
  font-size: clamp(26px, 3.4vw, 49px);
  font-weight: 530;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.tapeCap h2 em { color: var(--rose); font-style: italic; }
.tapeCap p { margin-top: 12px; color: var(--cream-soft); font-size: 17px; }

.track {
  display: flex;
  gap: 26px;
  width: max-content;
  /* 90s вместо 55s у оригинала: кадры 16:9 шире вертикальных, при 55s лента
     ехала бы ~90 px/s вместо ~53 px/s — то есть заметно суетливее. */
  animation: tape 90s linear infinite;
}
/* overflow: hidden обязателен — ровно как у .cell в стене. Без него наезд
   (scale до 1.14) выносит картинку за пределы кадра: при ширине 470px это
   +33px в каждую сторону, а зазор в ленте всего 26px — соседние кадры
   перекрываются. Клип по рамке держит увеличение внутри своей ячейки. */
.frame {
  position: relative;
  flex-shrink: 0;
  width: 470px;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #241f1c;
}
.frame video,
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   5. Тарифы
   ========================================================================== */

.plans {
  background: var(--cream-fone);
  color: var(--ink);
  /* было 200px — под прежний длинный прайс-лист. Три карточки столько воздуха
     сверху не держат, получалась дыра между блоками. */
  padding: 110px 0 120px;
}
.plansHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 84px;
}
.plansHead h2 {
  font-family: var(--font-display-serif);
  font-size: clamp(44px, 5.4vw, 74px);
  font-weight: 530;
  letter-spacing: -0.035em;
}
.plansHead h2 em { color: var(--rose-deep); font-style: italic; }

.plan {
  position: relative;
  display: grid;
  grid-template-columns: 190px 1fr 1fr 1.2fr 160px;
  align-items: baseline;
  padding: 36px 0;
  border-top: 1px solid var(--cream-deep);
  transition: background 0.2s;
}
.plan:last-of-type { border-bottom: 1px solid var(--cream-deep); }
.plan::before {
  content: "";
  position: absolute;
  inset: 0 -34px;
  z-index: 0;
  border-radius: 22px;
  transition: background 0.2s;
}
.plan:hover::before { background: var(--cream-card); }
.plan > * { position: relative; z-index: 1; }

.planName {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: inherit;
}
.planPrice {
  display: flex;
  align-items: center;      /* монета по центру цифр, а не по базовой линии */
  flex-wrap: wrap;
  font-family: var(--font-display-serif);
  font-size: 42px;
  font-weight: 530;
  letter-spacing: -0.02em;
}
.planPrice small {
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0;
  color: var(--gray);
}
.planRelease { color: var(--gray); font-size: 14px; }
.planIncludes { color: var(--ink-muted); font-size: 15px; }
.planGo { text-align: right; }
.planGo a {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  font-size: 15px;
  font-weight: 500;
}

.planHot {
  margin: 0 -34px;
  padding: 36px 34px;
  border-color: transparent;
  border-radius: 22px;
  background: var(--ink);
  color: var(--cream-fone);
}
.planHot::before { display: none; }
.planHot:hover { background: var(--ink); }
.planHot .planRelease,
.planHot .planIncludes,
.planHot .planPrice small { color: var(--cream-soft); }
.planHot .planGo a { color: var(--rose); border-color: var(--rose); }
.planHot + .plan { border-top-color: transparent; }

.plansNotes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  margin-top: 60px;
}
.plansNotes span { color: var(--gray); font-size: 14px; }
.plansNotes b { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   6. FAQ
   ========================================================================== */

.faq {
  background: var(--cream-fone);
  color: var(--ink);
  padding: 0 0 200px;
}
.faqGrid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 90px;
}
.faqHead h2,
.faqGrid h2 {
  font-family: var(--font-display-serif);
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 530;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.faqHead h2 em,
.faqGrid h2 em { color: var(--rose-deep); font-style: italic; }

.qa { border-top: 1px solid var(--cream-deep); padding: 28px 0; }
.qa:last-child { border-bottom: 1px solid var(--cream-deep); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary i {
  font-family: var(--font-display-serif);
  font-style: normal;
  font-size: 24px;
  color: var(--gray);
  transition: transform 0.3s;
}
.qa[open] summary i { color: var(--rose-deep); transform: rotate(45deg); }
.qa p {
  max-width: 620px;
  margin-top: 14px;
  color: var(--ink-muted);
  font-size: 16px;
}

/* ==========================================================================
   7. Финал + подвал
   ========================================================================== */

.final {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 820px;
  overflow: hidden;
  text-align: center;
}
.final .veil {
  background: radial-gradient(1100px 640px at 50% 50%,
    rgba(26, 26, 26, 0.84) 0%,
    rgba(26, 26, 26, 0.95) 66%,
    var(--ink) 100%);
}
.finalIn { position: relative; z-index: 3; }
.finalIn h2 {
  font-family: var(--font-display-serif);
  font-size: clamp(54px, 8vw, 108px);
  font-weight: 530;
  line-height: 1.04;
  letter-spacing: -0.018em;
  word-spacing: 0.08em;
}
.finalIn h2 em { color: var(--rose); font-style: italic; }
.finalSub { margin-top: 28px; color: var(--cream-soft); font-size: 18px; }
.finalBtn { margin-top: 48px; }

.footer { background: var(--ink); border-top: 1px solid var(--ink-soft); }
.footerInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 34px 60px;
  color: var(--gray);
  font-size: 14px;
}
.footerLinks { display: flex; gap: 36px; }
.footerInner a:hover { color: var(--cream-fone); }
.footerLegal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 0 60px 30px;
  color: var(--gray-muted);
  font-size: 12px;
}
.footerLegal a:hover { color: var(--cream-soft); }

/* ==========================================================================
   Движение — весь набор, четыре кейфрейма
   ========================================================================== */

@keyframes up {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: none; }
}
/* Сдвиг ровно на одну копию содержимого.
   Не просто -50%: трек — это 2N рядов и 2N−1 зазоров, поэтому половина его
   высоты равна N рядов + (N−0.5) зазора, то есть на ползазора меньше, чем нужно.
   Отсюда поправка на половину gap — иначе на каждом обороте кадр прыгает на 11px. */
@keyframes wallScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-50% - var(--wall-gap) / 2)); }
}
@keyframes tape {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .page * { animation: none !important; }
}

/* ==========================================================================
   Адаптив — брейкпоинты как у оригинала: 1180 / 1040 / 860 / 820 / 600 / 560
   ========================================================================== */

@media (min-width: 821px) and (max-width: 1180px) {
  .rail { grid-template-columns: 1fr 360px 1fr; gap: 40px; width: auto; padding: 0 24px; }
  .phone,
  .phoneWrap { width: 320px; }
  .navArrPrev { left: -62px; }
  .navArrNext { right: -62px; }
}

@media (max-width: 1040px) {
  .plan,
  .planHot { grid-template-columns: 130px 1fr 1fr 1.1fr 110px; }
  .planPrice { font-size: 34px; }
  .plan::before { inset: 0 -22px; }
  .planHot { margin: 0 -22px; padding: 36px 22px; }
  .figGrid { gap: 50px; }
  .faqGrid { grid-template-columns: 300px 1fr; gap: 50px; }
}

@media (max-width: 860px) {
  .frame { width: 380px; }
}

@media (max-width: 820px) {
  .navLinks { display: none; }
  .navOverlay { position: absolute; }
  .navOverlay:not(.navOverlayScrolled) {
    background: linear-gradient(rgba(26, 26, 26, 0.8), transparent);
  }
  .navActions { gap: 12px; }
  .navCta { padding: 10px 16px; }
  .logo { gap: 8px; font-size: 19px; white-space: nowrap; }
  .logoMark { width: 22px; height: 22px; }

  .container { width: auto; margin: 0; padding: 0 20px; }

  .hero { height: auto; min-height: 92vh; padding: 110px 0 70px; }
  .wall { --wall-gap: 12px; top: -120px; left: -60px; right: -60px; }
  .wallTrack { grid-template-columns: repeat(2, 1fr); }
  .cell:nth-child(3n + 2) { transform: none; }
  .cell:nth-child(2n) { transform: translateY(20px); }   /* на двух колонках сдвигаем правую */
  .heroIn h1 { font-size: 37px; letter-spacing: -0.028em; }
  .heroSub { margin-top: 22px; padding: 0 8px; font-size: 16px; }
  .heroCta { flex-direction: column; gap: 18px; margin-top: 30px; }
  .btn { padding: 17px 34px; font-size: 15px; }
  .live { bottom: 20px; padding: 0 24px; text-align: center; }
  .liveText { font-size: 9px; letter-spacing: 0.14em; }

  .showHead { padding: 80px 20px 10px; }
  .showHead h2 { font-size: 34px; }
  .showHead h2 br { display: none; }
  .showHead p { font-size: 15px; }

  .rail { display: flex; flex-direction: column; gap: 34px; width: auto; margin: 0; padding: 0 20px 30px; }
  .phoneCol { order: -1; }
  .sticky { position: static; display: flex; justify-content: center; padding: 34px 0 8px; }
  .phoneWrap,
  .phone { width: 250px; }
  .phone { border-radius: 28px; padding: 7px; }
  .phone video, .phone img { border-radius: 22px; }
  .navArr { width: 44px; height: 44px; }
  .navArrPrev { left: -56px; }
  .navArrNext { right: -56px; }
  .phoneCount { margin-top: 12px; }

  .steps,
  .stepsRight { display: contents; }
  .steps:not(.stepsRight) .step:first-of-type { order: 1; }
  .stepsRight .step:first-of-type { order: 2; }
  .steps:not(.stepsRight) .step:nth-of-type(2) { order: 3; }
  .stepsRight .step:nth-of-type(2) { order: 4; }
  .stepIdx { font-size: 34px; }
  .step h3 { margin-top: 8px; font-size: 26px; }
  .step p { max-width: none; font-size: 15px; }
  .figPer { margin-top: 14px; font-size: 10px; letter-spacing: 0.16em; }

  .fig { padding: 80px 0 70px; }
  .figGrid { grid-template-columns: 1fr; gap: 40px; }
  .cmpRow { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cmpRow b { font-size: 24px; }
  .cmpRow span { padding-left: 0; text-align: left; font-size: 12px; }

  .tape { padding: 70px 0 60px; }
  .tapeCap { width: auto; margin: 0 20px 36px; padding: 0; }
  .tapeCap h2 { white-space: normal; font-size: 22px; line-height: 1.25; }
  .tapeCap p { margin-top: 10px; font-size: 13px; }
  .frame { width: 300px; }
  .track { animation-duration: 60s; }

  .plans { padding: 90px 0; }
  .plansHead { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 40px; }
  .plansHead h2 { font-size: 40px; }
  .plan,
  .planHot { grid-template-columns: 1fr; gap: 6px; }
  .planPrice { font-size: 34px; }
  .planGo { text-align: left; margin-top: 6px; }
  .plansNotes { flex-direction: column; gap: 14px; margin-top: 36px; }

  .faq { padding: 0 0 90px; }
  .faqGrid { display: flex; flex-direction: column; gap: 30px; }
  .faqGrid h2, .faqHead h2 { font-size: 36px; }

  .final { height: auto; min-height: 620px; padding: 90px 0; }
  .finalIn h2 { font-size: 44px; letter-spacing: -0.02em; }
  .finalSub { padding: 0 20px; font-size: 15px; }

  .footerInner { flex-direction: column; gap: 16px; padding: 26px 20px; text-align: center; }
  .footerLegal { justify-content: center; padding: 0 20px 26px; }
}

/* Подпись под заголовком FAQ — ссылка на телеграм-бот */
.faqAside {
  margin-top: 18px;
  color: var(--gray);
  font-size: 15px;
  line-height: 1.6;
}
.faqAside a {
  color: var(--rose-deep);
  border-bottom: 1px solid rgba(182, 107, 92, 0.35);
  transition: border-color 0.2s;
}
.faqAside a:hover { border-bottom-color: var(--rose-deep); }

/* ==========================================================================
   Токен — монета
   --------------------------------------------------------------------------
   Две грани (аверс с месяцем, реверс со звездой) на общей оси: настоящий
   переворот, а не зеркалящаяся плоская картинка. Месяц — тот же знак, что
   в логотипе, поэтому монета читается как «валюта этой сказки», а не как
   абстрактный кружок.

   Анимация намеренно скупая: 11 секунд цикл, из них девять монета просто
   лежит, и лишь в конце делает один оборот. Рядом с ценой ничего не должно
   мельтешить — иконка обязана уступать цифре, а не спорить с ней.

   Размер задаётся --coin-n БЕЗ единиц: scale() принимает только число,
   а calc(26px / 40) даёт 0.65px — невалидно, трансформ отбрасывается.
   ========================================================================== */

.coin {
  display: inline-block;
  position: relative;
  vertical-align: -0.16em;
  width: calc(var(--coin-n, 18) * 1px);
  height: calc(var(--coin-n, 18) * 1px);
  perspective: 220px;
}
.coinSpin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: coinFlip 11s cubic-bezier(.55, 0, .3, 1) infinite;
}
.coinFace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  filter: drop-shadow(0 1px 2px rgba(26, 26, 26, 0.28));
}
.coinBack { transform: rotateY(180deg); }

/* Приглушённая латунь: рядом с --rose-deep и --coral не выпадает из палитры,
   но и не спорит с ними — жёлтого золота на кремовом было бы слишком. */
.coinRim  { fill: #b08a4e; }
.coinDisc { fill: #dcbc84; }
.coinShine {
  fill: #f0dcb4;
  opacity: 0.55;
  transform-origin: 50% 50%;
  animation: coinShine 11s ease-in-out infinite;
}
.coinMark { fill: #7d5a2b; opacity: 0.92; }

@keyframes coinFlip {
  0%, 78%  { transform: rotateY(0deg); }
  100%     { transform: rotateY(360deg); }
}
/* Блик наливается ровно в момент оборота — короткий отсвет на ребре */
@keyframes coinShine {
  0%, 76%   { opacity: 0.5; }
  86%       { opacity: 0.85; }
  100%      { opacity: 0.5; }
}

/* Монета в крупной цене: слева воздух меньше, справа больше — иначе она
   липнет к следующему слову. */
/* Внутри флекса вертикальный сдвиг не нужен — центрирует align-items */
.planPrice .coin { --coin-n: 34; vertical-align: 0; margin: 0 12px 0 7px; }
.planIncludes .coin,
.plansNotes .coin { --coin-n: 17; vertical-align: -0.28em; margin: 0 5px 0 2px; }

@media (max-width: 820px) {
  .planPrice .coin { --coin-n: 27; margin: 0 9px 0 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .coinSpin, .coinShine { animation: none; }
}

/* ==========================================================================
   Плашка про cookie
   --------------------------------------------------------------------------
   Не модальное окно и не затемнение: согласие на cookie не должно мешать
   человеку смотреть страницу. Полоса внизу, одна кнопка, показывается один раз.
   ========================================================================== */
/* Слева внизу, а не по центру: по центру полоса накрывала главную кнопку
   в hero — она у нас низко. В углу плашка видна, но ничего не перекрывает. */
.cookie{
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 200;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: 460px;
  padding: 14px 18px;
  background: var(--cream-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 50px -18px rgba(26, 26, 26, .5);
  animation: cookieIn .35s ease .4s both;
}
/* Атрибут hidden скрывает элемент правилом [hidden]{display:none} из
   таблицы браузера, а она проигрывает любому авторскому. Наш display:flex
   выше выигрывал — и плашка оставалась на экране после «Понятно».
   Возвращаем hidden силу: селектор с атрибутом специфичнее .cookie. */
.cookie[hidden]{ display: none; }
.cookie-text{ flex: 1; min-width: 210px; font-size: 13px; line-height: 1.55; color: var(--ink-muted); }
.cookie-text a{ color: var(--rose-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cookie-ok{
  flex-shrink: 0;
  padding: 11px 26px; border: 0; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--cream-90);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: opacity .15s;
}
.cookie-ok:hover{ opacity: .85; }
@keyframes cookieIn{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
@media (max-width: 560px){
  .cookie{ left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 13px 15px; gap: 10px; }
  .cookie-ok{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){ .cookie{ animation: none; } }


/* ==========================================================================
   Реферальная программа (/referral-program)
   ========================================================================== */

/* .page на лендинге залита чернилами — светлые секции рисуются поверх неё.
   Реферальная страница светлая целиком, поэтому переворачиваем контейнер. */
.page.refPage { background: var(--cream-fone); color: var(--ink); }

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

/* Кнопка на кремовом. Обычная .btn залита розовым — она рассчитана на тёмную
   видеостену, а на креме теряется. Здесь заливка чернилами, как у .navCta. */
.refBtn {
  display: inline-block;
  padding: 19px 40px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--cream-90);
  font-size: 15px;
  font-weight: 600;
  transition: opacity 0.15s, transform 0.25s;
}
.refBtn:hover { opacity: 0.88; transform: translateY(-2px); }

/* ── Первый экран ──
   Тёмный намеренно. Шапка здесь та же, что на главной: прозрачная сверху и
   плотная тёмная при прокрутке, с кремовыми пунктами. Такая шапка читается
   только поверх тёмного — на креме её текст исчезал бы. Заодно первый экран
   рифмуется с главной, откуда человек сюда и приходит.
   Дальше страница светлая: условия и вопросы читать удобнее на креме. */
.refHero {
  position: relative;
  overflow: hidden;      /* звёзды у самого края не должны растягивать страницу */
  padding: 176px 0 92px;
  background: var(--ink);
  color: var(--cream-fone);
}
/* Содержимое поднимаем над небом: без z-index текст лёг бы под точки. */
.refHero > .container { position: relative; z-index: 1; }

/* Небо описано ниже общим блоком — им пользуются и первый экран, и лента сцен. */
.refKicker { margin-bottom: 22px; }
.refPage .refHero .mono { color: var(--cream-soft); }  /* 9.8:1 на чернилах */
.refHero h1 em { color: var(--rose); }                 /* розовый — только на чернилах */
.refHero .refLead { color: var(--cream-soft); }
/* Кнопка на тёмном — светлая, ровно как .navOverlay .navCta в шапке. */
.refHero .refBtn { background: var(--cream-fone); color: var(--ink); }
.refHero .refBtn:hover { background: var(--rose); opacity: 1; }
/* Карточки с цифрами остаются светлыми — на них держится весь первый экран. */
.refHero .refFactN { color: var(--ink); }
.refHero .refFactT { color: var(--ink-muted); }
.refHero .refFact { border-color: transparent; }
.refHero h1 {
  margin: 0 0 22px;
  font-family: var(--font-display-serif);
  font-weight: 530;
  font-size: clamp(42px, 6.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.refHero h1 em { font-style: italic; color: var(--rose-deep); }
.refLead {
  max-width: 620px;
  margin: 0 0 46px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Три цифры в ряд. На узком экране колонка: три числа рядом на телефоне
   сжимаются до нечитаемых. */
.refFacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 46px;
}
.refFact {
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--cream-card);
}
.refFactN {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display-serif);
  font-weight: 530;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.refFactN .coin { --coin-n: 30; flex-shrink: 0; }
.refFactT { margin-top: 10px; font-size: 15px; color: var(--ink-muted); }

.refCta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 22px; }

/* Служебные цвета с главной рассчитаны на тёмные секции и на креме не читаются.
   Измерено на этой странице: --cream-soft у номеров шагов даёт 1.58:1 при норме 3
   для крупного текста, --gray у моно-подписей — 3.36:1 при норме 4.5 для мелкого.
   Перекрашиваем только здесь, чтобы не трогать тёмные блоки главной. */
.refPage .stepIdx { color: var(--rose-deep); }   /* 3.56:1 на 56px — норма для крупного */
.refPage .mono,
.refPage .stepTag,
.refPage .faqAside { color: var(--ink-muted); }  /* 6.3:1 — мелкое читается */
/* Ссылка в 15px глиной даёт 3.56:1 при норме 4.5 — берём затемнённый оттенок. */
.refPage .faqAside a { color: var(--rose-text); }

/* ── Общий ритм разделов ── */
.refSec { padding: 84px 0; border-top: 1px solid var(--border); }
.refHead { max-width: 620px; margin-bottom: 46px; }
.refHead h2 {
  margin: 0 0 14px;
  font-family: var(--font-display-serif);
  font-weight: 530;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.refHead h2 em { font-style: italic; color: var(--rose-deep); }
.refHead p { margin: 0; font-size: 17px; color: var(--ink-muted); }

/* Шаги переиспользуют .step с главной — просто раскладываем их в три колонки. */
.refSteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ── Калькулятор ── */
.refCalcSec { background: var(--cream-90); }
.refCalc {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.refCalcCtl,
.refCalcOut {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--cream-card);
}
.refCalcLbl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 18px;
}
.refCalcVal {
  font-family: var(--font-display-serif);
  font-weight: 530;
  font-size: 34px;
  line-height: 1;
  color: var(--rose-deep);
}

/* Ползунок рисуем сами: системный на кремовом фоне выглядит инородно.
   Дорожка и бегунок описаны дважды — WebKit и Firefox не понимают
   селекторы друг друга, и объединить их в один список нельзя: браузер
   отбрасывает всё правило целиком, встретив незнакомый псевдоэлемент. */
.refRange {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--cream-deep);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
.refRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  border: 4px solid var(--cream-card);
  box-shadow: 0 4px 14px rgba(26, 26, 26, 0.28);
  cursor: grab;
}
.refRange::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  border: 4px solid var(--cream-card);
  box-shadow: 0 4px 14px rgba(26, 26, 26, 0.28);
  cursor: grab;
}
.refRange:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 6px; }
.refRangeEnds { display: flex; justify-content: space-between; margin-top: 10px; }
.refCalcNote { margin: 22px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }

.refCalcOut {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream-90);
  text-align: center;
}
.refCalcBig {
  font-family: var(--font-display-serif);
  font-weight: 530;
  font-size: clamp(46px, 6vw, 66px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rose); /* розовый допустим только на чернилах — здесь как раз они */
}
.refCalcCap { margin-top: 8px; font-size: 15px; color: var(--cream-soft); }
.refCalcSep { height: 1px; background: rgba(246, 241, 232, 0.14); }

/* ── Кому подходит ── */
.refWho { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.refCard {
  padding: 28px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--cream-card);
}
.refCard h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; }
.refCard p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

/* ── Условия ── */
.refTermsSec { background: var(--cream-90); }
.refTerms { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 46px; }
.refTerms > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.refTerms dt { font-size: 15px; font-weight: 600; }
.refTerms dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

/* ── Финал ── */
.refFinal { padding: 96px 0 110px; border-top: 1px solid var(--border); text-align: center; }
.refFinal h2 {
  margin: 0 0 14px;
  font-family: var(--font-display-serif);
  font-weight: 530;
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.refFinal h2 em { font-style: italic; color: var(--rose-deep); }
.refFinal p { margin: 0 0 34px; font-size: 17px; color: var(--ink-muted); }
.refFinal .refCta { justify-content: center; }

@media (max-width: 900px) {
  .refSteps, .refWho { grid-template-columns: 1fr; }
  .refCalc { grid-template-columns: 1fr; }
  .refTerms { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 640px) {
  .refHero { padding: 120px 0 60px; }
  .refSec { padding: 60px 0; }
  .refFacts { grid-template-columns: 1fr; }
  .refFactN { font-size: 38px; }
  .refTerms > div { grid-template-columns: 1fr; gap: 6px; }
  .refCalcCtl, .refCalcOut { padding: 24px; }
}


/* ==========================================================================
   Звёздное небо (первый экран реферальной программы + лента сцен на главной)
   ========================================================================== */

/* Перенесено с первого дизайна лендинга: те же размеры точек и то же мерцание
   через opacity. Отличий два — цвет кремовый, а не белый (белый на наших
   чернилах выглядит холодной крошкой), и небо живёт внутри тёмного блока,
   а не на всю страницу: на кремовых секциях звёздам делать нечего.
   Точки расставляет app.js: разброс тут и есть весь эффект. */
.starfield { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.starfield > i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--cream-fone);
  animation: twinkle 3s infinite alternate;
}
@keyframes twinkle { from { opacity: 0.12; } to { opacity: 0.85; } }
/* Кому от движения плохо — оставляем небо неподвижным, но видимым. */
@media (prefers-reduced-motion: reduce) { .starfield > i { animation: none; opacity: 0.5; } }

/* Лента сцен: небо под кадрами, подпись и сами кадры — над ним. */
.tape { position: relative; }
.tapeCap, .track { position: relative; z-index: 1; }


/* ── Ступени партнёрской ставки ── */
.refTiersSec { background: var(--cream-90); }
.refTiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.refTier {
  padding: 30px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--cream-card);
}
/* Верхнюю ступень выделяем заливкой: это цель, к которой ведёт весь блок. */
.refTier.is-top { background: var(--ink); border-color: var(--ink); color: var(--cream-fone); }
.refTier.is-top p { color: var(--cream-soft); }
.refTierN {
  font-family: var(--font-display-serif);
  font-weight: 530;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rose-deep);
  margin-bottom: 12px;
}
.refTier.is-top .refTierN { color: var(--rose); }   /* розовый — только на чернилах */
.refTier h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.refTier p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

/* Четыре шага вместо трёх — на широком экране в один ряд. */
.refSteps4 { grid-template-columns: repeat(4, 1fr); }

/* Второй ползунок калькулятора отделяем воздухом, иначе два ряда сливаются. */
.refCalcLbl2 { margin-top: 26px; }

@media (max-width: 1100px) {
  .refSteps4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .refTiers { grid-template-columns: 1fr; }
  .refSteps4 { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Стили сказок: раскрывающиеся полосы
   ========================================================================== */

/* Приём простой: все карточки делят ширину поровну, а та, на которую навели,
   забирает себе большую долю через flex-grow. Анимируется именно flex-grow,
   а не width — тогда соседи ужимаются синхронно, без рывка и без пересчёта
   раскладки на каждом кадре. JS здесь не нужен вообще. */
.styles { background: var(--cream-90); padding: 96px 0; border-top: 1px solid var(--border); }
.stylesHead { max-width: 640px; margin-bottom: 44px; }
.stylesHead h2 {
  margin: 0 0 14px;
  font-family: var(--font-display-serif);
  font-weight: 530;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.stylesHead h2 em { font-style: italic; color: var(--rose-deep); }
.stylesHead p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-muted); }

.styleRow { display: flex; gap: 10px; height: 440px; }
.styleCard {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: var(--ink);
  transition: flex-grow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.styleCard > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Затемнение снизу — под подпись. Без него белый текст теряется на светлых
   картинках вроде акварели. */
.styleCard::after {
  content: "";
  position: absolute;
  inset: 40% 0 0 0;
  background: linear-gradient(rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 0.82) 100%);
  pointer-events: none;
}

/* Раскрытие. Сначала гасим ВСЕ карточки, потом поднимаем активную — иначе
   при уходе курсора соседи дёргаются по очереди. */
.styleRow:hover .styleCard,
.styleRow:focus-within .styleCard { flex-grow: 0.62; }
.styleRow:hover .styleCard:hover,
.styleRow .styleCard:focus-visible { flex-grow: 4.2; }
/* Пока мышь не тронула ряд, открыта первая — приём виден сразу. */
.styleRow:not(:hover):not(:focus-within) .styleCard.is-open { flex-grow: 4.2; }

.styleCap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 18px 16px;
  color: var(--cream-fone);
}
/* В сжатом виде подпись идёт снизу вверх: горизонтально она бы не поместилась
   в полосу шириной с палец. writing-mode не анимируется, и это к лучшему —
   текст переворачивается мгновенно, а тянется только сама карточка. */
.styleCap h3 {
  margin: 0;
  font-family: var(--font-display-serif);
  font-weight: 530;
  font-size: 21px;
  line-height: 1.1;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.styleCap p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cream-soft);
  opacity: 0;
  transition: opacity 0.3s ease 0.12s;
}
.styleCard:hover .styleCap h3,
.styleCard:focus-visible .styleCap h3,
.styleRow:not(:hover):not(:focus-within) .styleCard.is-open .styleCap h3 {
  writing-mode: horizontal-tb;
  transform: none;
}
.styleCard:hover .styleCap p,
.styleCard:focus-visible .styleCap p,
.styleRow:not(:hover):not(:focus-within) .styleCard.is-open .styleCap p { opacity: 1; }

.styleCard:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; }
.stylesNote { margin: 18px 0 0; color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .styleCard { transition: none; }
  .styleCap p { transition: none; }
}

/* На узких экранах приём отключаем целиком: наведения там не существует,
   а восемь вертикальных полосок читались бы как поломка. Обычная сетка,
   подписи всегда на месте. */
@media (max-width: 820px) {
  .styles { padding: 60px 0; }
  .styleRow { display: grid; grid-template-columns: repeat(2, 1fr); height: auto; gap: 12px; }
  .styleCard, .styleRow:hover .styleCard, .styleRow .styleCard:hover { flex: none; aspect-ratio: 16 / 10; }
  .styleCap h3 { writing-mode: horizontal-tb; transform: none; font-size: 17px; }
  .styleCap p { opacity: 1; font-size: 12px; }
  .stylesNote { display: none; }
}
@media (max-width: 480px) {
  .styleRow { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Тарифы: три карточки
   ========================================================================== */

/* Прежний блок был про бету и «не платит никто». Теперь здесь конкретные суммы,
   поэтому и вёрстка другая: не строки прайса, а три предложения, между которыми
   человек выбирает. Шесть ступеней лесенки остались в кабинете — на лендинге
   они превращались в стену цифр. */
.tariffsHead { max-width: 680px; margin-bottom: 56px; }
.tariffsHead h2 {
  margin: 0 0 16px;
  font-family: var(--font-display-serif);
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 530;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.tariffsHead h2 em { font-style: italic; color: var(--rose-deep); }
.tariffsHead p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-muted); }

.tariffGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }

.tariff {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--cream-card);
}
/* Средняя карточка залита чернилами: выбор из трёх одинаковых плиток человек
   откладывает, а с одной выделенной — принимает. */
.tariff.tariffHot {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream-fone);
}
.tariffFlag {
  position: absolute;
  top: -11px;
  left: 28px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--rose);
  color: var(--ink);
  letter-spacing: 0.16em;
}
.tariffName { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.tariffHot .tariffName { color: var(--cream-soft); }

.tariffSum {
  font-family: var(--font-display-serif);
  font-weight: 530;
  font-size: clamp(36px, 3.6vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.tariffTokens {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 17px;
  color: var(--ink-muted);
}
.tariffHot .tariffTokens { color: var(--cream-soft); }
.tariffTokens .coin { --coin-n: 20; flex-shrink: 0; }
/* Выгода — единственное, что отличает пакеты по сути, поэтому её видно сразу. */
/* Зелёный #7e9f72 с белым текстом давал 2.9:1 при норме 4.5 для мелкого —
   на карточке это нечитаемо. Берём цвета своей палитры: на кремовой карточке
   чернила, на тёмной — розовый. Оба сочетания с запасом. */
.tariffGain {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--cream-90);
  font-size: 13px;
  font-weight: 600;
}
.tariffHot .tariffGain { background: var(--rose); color: var(--ink); }

.tariffNote { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
.tariffHot .tariffNote { color: var(--cream-soft); }
/* --gray на 11px даёт 3.54:1 при норме 4.5 — для моно-подписи мало. */
.tariffTag { margin-top: 14px; color: var(--ink-muted); }

.tariffBtn {
  margin-top: auto;
  display: block;
  padding: 15px 20px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--cream-90);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  transition: opacity 0.15s, transform 0.25s;
}
.tariff .tariffBtn { margin-top: 26px; }
.tariffHot .tariffBtn { background: var(--cream-fone); color: var(--ink); }
.tariffBtn:hover { opacity: 0.88; transform: translateY(-2px); }

.tariffsFoot { margin: 34px 0 0; font-size: 15px; color: var(--ink-muted); }
.tariffsFoot a { color: var(--rose-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .tariffBtn { transition: none; } }

@media (max-width: 900px) {
  .tariffGrid { grid-template-columns: 1fr; gap: 16px; }
  .plans { padding: 90px 0; }
  .tariffsHead { margin-bottom: 40px; }
}