/* ==========================================================================
   Лендинг — статическая копия структуры и дизайн-системы 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 */
  --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; }

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);
  padding: 200px 0;
}
.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; } }