/* ==========================================================================
   Evie — лендинг второго лид-магнита: дисперсия и лузстрики (только мобильная версия)
   Все значения берутся из токенов ниже: цвета, отступы, радиусы, стили текста.
   ========================================================================== */

:root {
  /* Фоны (светлая тема) */
  --bg: #FFFFFF;
  --surface-1: #F5F8FD;
  --surface-2: #EDF3FC;

  /* Линии */
  --line: rgba(11, 18, 32, 0.08);
  --line-strong: rgba(11, 18, 32, 0.14);

  /* Текст */
  --text: #0B1220;
  --text-2: #586274;
  --text-3: #8A94A6;

  /* Акценты: синий и голубой */
  --blue: #1D64F2;
  --blue-hover: #1653D1;
  --blue-soft: #EAF1FE;
  --on-blue: #FFFFFF;
  --cyan: #2BB8F2;
  --on-cyan: #04121F;

  /* Экран игры внутри телефона (тёмный) */
  --game-bg: #0A1120;
  --game-surface: #141D2F;
  --game-surface-2: #1C2740;
  --game-line: rgba(255, 255, 255, 0.08);
  --game-line-strong: rgba(255, 255, 255, 0.16);
  --game-text: #FFFFFF;
  --game-text-2: #9AA6BD;
  --game-text-3: #66728A;
  --rail: #1A2438;
  --felt: #0D47A8;

  --felt-text-2: #C9D6F2;

  /* Корпус телефона */
  --titanium: #2B2E34;
  --titanium-edge: rgba(255, 255, 255, 0.22);

  /* Игральные карты */
  --card-face: #F7F8FA;
  --card-ink: #0B1220;
  --card-red: #D7263D;

  /* Отступы */
  --space-0: 0;
  --space-25: 2px;
  --space-50: 4px;
  --space-75: 8px;
  --space-100: 12px;
  --space-200: 16px;
  --space-300: 24px;
  --space-400: 32px;
  --space-500: 40px;
  --space-600: 48px;
  --space-700: 64px;
  --space-800: 80px;
  --space-900: 96px;

  /* Радиусы (шкала Tailwind) */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* Движение */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Сетка */
  --page-max: 430px;
  --gutter: var(--space-300);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Стили текста
   -------------------------------------------------------------------------- */

.heading-1 { font-size: 3.75rem; line-height: 1; font-weight: 600; }
.heading-2 { font-size: 3rem; line-height: 1; font-weight: 600; }
.heading-3 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; }
.heading-4 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; }
.heading-5 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; }
.heading-6 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }

.title-1 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; }
.title-2 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; }
.title-3 { font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
.title-4 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.title-5 { font-size: 0.75rem; line-height: 1rem; font-weight: 500; }

.body-1 { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.body-2 { font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
.body-3 { font-size: 1rem; line-height: 1.5rem; font-weight: 400; }
.body-4 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.body-5 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.body-6 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; }

.button-lg { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.button-md { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.button-sm { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.button-xsm { font-size: 0.75rem; line-height: 1rem; font-weight: 600; }

.caption-1 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.caption-2 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; }
.caption-3 { font-size: 0.75rem; line-height: 1rem; font-weight: 600; }
.caption-4 { font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.caption-5 { font-size: 0.75rem; line-height: 1rem; font-weight: 400; }

/* --------------------------------------------------------------------------
   База
   -------------------------------------------------------------------------- */

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", system-ui, sans-serif;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p, li, figcaption {
  text-wrap: pretty;
}

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

img, svg {
  display: block;
  max-width: 100%;
}

.page {
  position: relative;
  max-width: var(--page-max);
  min-height: 100dvh;
  margin: 0 auto;
}

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

.skip-link {
  position: fixed;
  top: var(--space-200);
  left: 50%;
  z-index: 100;
  padding: var(--space-75) var(--space-100);
  border-radius: var(--radius-full);
  background: var(--text);
  color: var(--bg);
  transform: translate(-50%, -200%);
  transition: transform 0.5s var(--ease);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-75);
  padding: var(--space-75) var(--space-100);
  border: 0;
  border-radius: var(--radius-full);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.5s var(--ease),
    background-color 0.3s var(--ease);
}

.btn i {
  font-size: 1.25em;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: scale(0.98);
  transition-duration: 0.2s;
}

.btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--blue);
  color: var(--on-blue);
}

.btn-primary:hover {
  background: var(--blue-hover);
}

.btn-block {
  width: 100%;
}

/* Пульсация кнопок на экранах: вокруг кнопки «дышит» мягкое размытое свечение.
   Свечение плавно нарастает и так же плавно гаснет, расходясь от кнопки.
   Двигается только свечение (transform и opacity), сама кнопка и текст неподвижны.
   По высоте оно растёт сильнее, чем по ширине, чтобы ореол вокруг таблетки был ровным */
.btn-pulse {
  position: relative;
  isolation: isolate;
}

.btn-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--blue);
  filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  animation: btn-pulse 3.2s var(--ease) 1.5s infinite;
}

@keyframes btn-pulse {
  0% { opacity: 0; transform: scale(0.96, 0.9); }
  35% { opacity: 0.6; transform: scale(1.02, 1.2); }
  100% { opacity: 0; transform: scale(1.08, 1.7); }
}

/* Закреплённая кнопка внизу экрана */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--space-200) + env(safe-area-inset-bottom));
  z-index: 40;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  transition:
    transform 0.5s var(--ease),
    opacity 0.3s var(--ease);
}

.sticky-cta .btn {
  box-shadow: 0 8px 24px rgba(29, 100, 242, 0.32);
  transition:
    transform 0.5s var(--ease),
    background-color 0.3s var(--ease),
    color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

/* Над синей сценой кнопка белая с синим текстом, чтобы не сливаться с ней (см. main.js) */
.sticky-cta.is-on-stage .btn {
  background: var(--bg);
  color: var(--blue);
  box-shadow: 0 8px 24px rgba(4, 18, 50, 0.32);
}

.sticky-cta.is-on-stage .btn:hover {
  background: var(--blue-soft);
}

.sticky-cta.is-hidden {
  opacity: 0;
  transform: translateY(calc(100% + var(--space-200)));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Навигация: плавающая панель с логотипом
   -------------------------------------------------------------------------- */

.nav-wrap {
  position: fixed;
  top: calc(var(--space-100) + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 var(--space-200);
  pointer-events: none;
  transition:
    transform 0.5s var(--ease),
    opacity 0.3s var(--ease);
}

/* Без JS плашка не нужна: на первом экране её нет, а показывать её некому */
html:not(.js) .nav-wrap {
  display: none;
}

.nav-wrap.is-hidden {
  opacity: 0;
  transform: translateY(calc(-100% - var(--space-200)));
}

.nav-wrap.is-hidden .nav {
  pointer-events: none;
}

.nav {
  display: flex;
  align-items: center;
  padding: var(--space-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-75);
  padding: var(--space-50) var(--space-100) var(--space-50) var(--space-50);
  border-radius: var(--radius-full);
  transition: background-color 0.3s var(--ease);
}

.brand:hover {
  background: var(--surface-2);
}

.brand:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--blue);
  color: var(--on-blue);
  font-size: 14px;
}

.brand-name {
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Первый экран: плашка предложения, заголовок с градиентом, подзаголовок
   -------------------------------------------------------------------------- */

/* Первый и второй экраны на одном фоне surface-1: переход между ними бесшовный,
   зазор между ними 32 + 32 */
.hero {
  display: flex;
  flex-direction: column;
  padding:
    calc(var(--space-400) + env(safe-area-inset-top))
    var(--gutter)
    var(--space-400);
  background: var(--surface-1);
}

.offer-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-75);
  padding: var(--space-50) var(--space-100);
  border-radius: var(--radius-full);
  background: var(--blue-soft);
  color: var(--blue);
}

.offer-badge i {
  font-size: 16px;
}

/* Светлая тема: градиент заголовка #000000 → #666666 */
.hero-title {
  max-width: 680px;
  margin-top: var(--space-200);
  background: linear-gradient(90deg, #000000 0%, #666666 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

.hero-sub {
  max-width: 680px;
  margin-top: var(--space-200);
  color: var(--text-2);
}

/* Акцент в подзаголовке (название инструкции): жирнее и основным цветом текста */
.hero-sub strong {
  color: var(--text);
  font-weight: 600;
}

.hero-cta {
  margin-top: var(--space-600);
}

/* --------------------------------------------------------------------------
   Экран 1 · Мокап инструкции: объёмная книга на синей сцене.
   Сцена — blue с сеткой точек через 16px (как тёмные сцены в лендинге пробного доступа).
   Книга 196 × 268 × 24 повёрнута так, что справа виден белый обрез страниц.
   Из-под книги выглядывает лист со схемой из 5 шагов, рядом фишки и стикер.
   Наклоны элементов — свойством rotate, движение при появлении — transform
   -------------------------------------------------------------------------- */

.lm-stage {
  position: relative;
  height: 420px;
  margin-top: var(--space-500);
  border-radius: var(--radius-3xl);
  background-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='1' fill='%23FFFFFF' fill-opacity='0.18'/%3E%3C/svg%3E");
  background-position: center;
  overflow: hidden;
}

/* ---- Лист со схемой: лежит под книгой и выезжает из-под неё */
.lm-sheet {
  position: absolute;
  top: var(--space-300);
  left: calc(50% - 24px);
  z-index: 1;
  width: 164px;
  padding: var(--space-200);
  border-radius: var(--radius);
  background: var(--card-face);
  color: var(--card-ink);
  box-shadow:
    0 16px 32px rgba(4, 18, 50, 0.28),
    0 2px 4px rgba(4, 18, 50, 0.16);
  transform: rotate(9deg);
  animation: lm-sheet-out 0.9s var(--ease) calc(var(--i, 0) * 80ms + 900ms) both;
}

.lm-sheet-head {
  color: var(--blue);
}

.lm-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  margin-top: var(--space-100);
}

.lm-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-75);
}

.lm-step-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--blue);
  color: var(--on-blue);
}

/* Строки текста шага: настоящих формулировок пока нет */
.lm-lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-50);
}

.lm-lines i {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(11, 18, 32, 0.12);
}

.lm-lines i + i {
  width: 64%;
  background: rgba(11, 18, 32, 0.07);
}

/* ---- Книга */
.lm-book {
  position: absolute;
  top: 112px;
  left: calc(50% - 132px);
  z-index: 2;
  width: 196px;
  height: 268px;
  perspective: 900px;
  /* Проявление — здесь, а не на самой книге: прозрачность на ней сплющила бы грани в плоскость */
  animation: lm-fade-in 0.6s var(--ease) calc(var(--i, 0) * 80ms + 200ms) both;
}

.lm-book-3d {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(6deg) rotateY(-34deg) rotateZ(-3deg);
  animation: lm-book-in 1.1s var(--ease) calc(var(--i, 0) * 80ms + 200ms) both;
}

.lm-face {
  position: absolute;
}

/* Обложка спереди: толщина книги 24, поэтому сдвиг на половину, 12 */
.lm-front {
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-200) var(--space-200) var(--space-200) var(--space-300);
  border-radius: var(--radius-sm) var(--radius) var(--radius) var(--radius-sm);
  background-color: var(--game-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='1' fill='%23FFFFFF' fill-opacity='0.12'/%3E%3C/svg%3E");
  background-position: center;
  color: var(--game-text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: translateZ(12px);
}

/* Желобок у корешка, как у книги в твёрдой обложке */
.lm-front::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--space-100);
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.lm-back {
  inset: 0;
  border-radius: var(--radius) var(--radius-sm) var(--radius-sm) var(--radius);
  background: var(--game-bg);
  transform: rotateY(180deg) translateZ(12px);
}

/* Корешок слева: 24 в ширину, отодвинут на половину ширины книги, 98 */
.lm-spine {
  top: 0;
  left: calc(50% - 12px);
  display: grid;
  place-items: center;
  width: 24px;
  height: 100%;
  background: var(--game-surface);
  color: var(--game-text-2);
  transform: rotateY(-90deg) translateZ(98px);
}

.lm-spine span {
  writing-mode: vertical-rl;
  rotate: 180deg;
  white-space: nowrap;
}

/* Обрез страниц: тонкие линии листов, чуть меньше обложки */
.lm-pages,
.lm-top {
  background-color: var(--card-face);
}

.lm-pages {
  top: 3px;
  left: calc(50% - 11px);
  width: 22px;
  height: calc(100% - 6px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='2' fill='%23DFE4EC'/%3E%3C/svg%3E");
  transform: rotateY(90deg) translateZ(95px);
}

.lm-top {
  top: calc(50% - 11px);
  left: 3px;
  width: calc(100% - 6px);
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='1' fill='%23DFE4EC'/%3E%3C/svg%3E");
  transform: rotateX(90deg) translateZ(131px);
}

/* Тень книги на сцене */
.lm-book-shadow {
  position: absolute;
  top: 356px;
  left: calc(50% - 128px);
  z-index: 1;
  width: 208px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(4, 18, 50, 0.55);
  filter: blur(16px);
}

/* ---- Обложка */
.lm-cover-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Метка — покерная фишка с пунктирным краем, как «Наш опыт» в лендинге пробного доступа */
.lm-chip {
  display: inline-flex;
  padding: var(--space-50) var(--space-100);
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-full);
  background: var(--blue);
  color: var(--game-text);
}

/* Дерево решений: рука сверху, три хода снизу, лучший голубой */
.lm-tree {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-300);
  margin-top: var(--space-300);
}

.lm-tree-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lm-tree-lines path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.lm-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--game-surface-2);
  color: var(--game-text-2);
  box-shadow: inset 0 0 0 1px var(--game-line-strong);
}

.lm-node.is-root {
  width: 76px;
  background: var(--card-face);
  color: var(--card-ink);
  box-shadow: none;
}

.lm-node.is-best {
  background: var(--cyan);
  color: var(--on-cyan);
  box-shadow: none;
}

.lm-node-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.lm-cover-title {
  margin-top: auto;
  letter-spacing: -0.01em;
}

.lm-cover-steps {
  display: flex;
  align-items: baseline;
  gap: var(--space-50);
  margin-top: var(--space-75);
  color: var(--game-text-2);
}

.lm-cover-steps .heading-6 {
  color: var(--cyan);
}

/* ---- Стикер на углу книги */
.lm-sticker {
  position: absolute;
  top: 340px;
  left: calc(50% - 8px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-50);
  padding: var(--space-50) var(--space-100);
  border-radius: var(--radius-full);
  background: var(--cyan);
  color: var(--on-cyan);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  rotate: 8deg;
  animation: lm-pop 0.6s var(--ease) calc(var(--i, 0) * 80ms + 1300ms) both;
}

/* ---- Покерные фишки с пунктирным краем */
.lm-prop {
  position: absolute;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-full);
  background: var(--cyan);
  box-shadow: 0 8px 16px rgba(4, 18, 50, 0.3);
}

.lm-prop.is-top {
  top: var(--space-400);
  left: var(--space-300);
  z-index: 0;
  background: var(--game-bg);
}

/* Стопка из двух фишек справа внизу */
.lm-prop.is-stack-1 {
  top: 360px;
  left: calc(50% + 112px);
  background: var(--game-bg);
}

.lm-prop.is-stack-2 {
  top: 348px;
  left: calc(50% + 120px);
}

@keyframes lm-book-in {
  from { transform: translateY(24px) rotateX(18deg) rotateY(8deg) rotateZ(0); }
  to { transform: rotateX(6deg) rotateY(-34deg) rotateZ(-3deg); }
}

@keyframes lm-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lm-sheet-out {
  from { opacity: 0; transform: translate(-56px, 96px) rotate(-2deg); }
  to { opacity: 1; transform: rotate(9deg); }
}

@keyframes lm-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   Секции
   -------------------------------------------------------------------------- */

.section {
  padding: var(--space-700) var(--gutter);
}

.section-sub {
  max-width: 680px;
  margin-top: var(--space-100);
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   Экран 2 · Что вы узнаете: страница из инструкции.
   Белый лист с колонтитулом и загнутым уголком, под ним второй лист.
   Пункты разделены линиями-прямоугольниками, у каждого иконка в покерной фишке.
   Ключевые слова подчёркивает маркер: полоса cyan растёт слева направо (transform)
   -------------------------------------------------------------------------- */

.learn {
  padding-top: var(--space-400);
  background: var(--surface-1);
}

.lm-page-stack {
  position: relative;
  isolation: isolate;
  margin-top: var(--space-400);
}

/* Второй лист под страницей, чуть повёрнут */
.lm-page-under {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(11, 18, 32, 0.06);
  rotate: 2deg;
}

.lm-page {
  position: relative;
  padding: var(--space-200) var(--space-300) var(--space-100);
  border-radius: var(--radius) 0 var(--radius) var(--radius);
  background: var(--bg);
  box-shadow:
    0 1px 2px rgba(11, 18, 32, 0.06),
    0 16px 32px rgba(11, 18, 32, 0.08);
}

/* Загнутый уголок: срез цветом фона экрана и сам загиб чуть темнее листа */
.lm-page::before,
.lm-page::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--space-300);
  height: var(--space-300);
}

.lm-page::before {
  background: var(--surface-1);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.lm-page::after {
  border-radius: 0 0 0 var(--radius);
  background: var(--surface-2);
  box-shadow: -2px 2px 4px rgba(11, 18, 32, 0.08);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* Колонтитул, как в книге: название слева, знак Evie справа, ниже линия */
.lm-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: var(--space-300);
  padding-bottom: var(--space-100);
  color: var(--text-3);
}

.lm-page-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-50);
}

.lm-page-brand .brand-mark {
  width: 20px;
  height: 20px;
  font-size: 12px;
}

.lm-learn-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-200);
  padding-block: var(--space-300);
}

/* Линия над каждым пунктом, включая первый (под колонтитулом) */
.lm-learn-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

/* Иконка в покерной фишке с пунктирным краем, как остановки маршрута в лендинге пробного доступа */
.lm-learn-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-full);
  background: var(--blue);
  color: var(--on-blue);
  font-size: 20px;
  box-shadow: 0 8px 20px rgba(29, 100, 242, 0.3);
}

/* На телефонах уже 390px заголовки пунктов на ступень меньше (18 / 28),
   чтобы они не разбивались на три строки по одному слову */
@media (max-width: 389px) {
  .lm-learn-item h3 {
    font-size: 1.125rem;
    line-height: 1.75rem;
    letter-spacing: -0.02em;
  }
}

.lm-learn-text {
  margin-top: var(--space-50);
  color: var(--text-2);
}

/* Маркер: полупрозрачная полоса cyan под нижней половиной слов */
.lm-mark {
  position: relative;
  z-index: 0;
  background: none;
  color: inherit;
  white-space: nowrap;
}

.lm-mark::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 3px;
  z-index: -1;
  height: 10px;
  border-radius: var(--radius-sm);
  background: rgba(43, 184, 242, 0.35);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease) 0.4s;
}

/* Без JS маркер виден сразу */
html:not(.js) .lm-mark::before,
.lm-learn-item.is-visible .lm-mark::before {
  transform: none;
}

.learn-title {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Экран 3 · Призыв к действию. Тёмный экран game-bg переходит в такой же подвал.
   Заголовок и подзаголовок по центру, 4 выгоды с голубыми галочками,
   ниже белая карточка: книга на синей сцене (уменьшенная), заголовок и кнопка
   -------------------------------------------------------------------------- */

/* Снизу отступ меньше обычного: дальше сразу такой же тёмный подвал */
.grab {
  padding-bottom: var(--space-400);
  background: var(--game-bg);
  color: var(--game-text);
  text-align: center;
}

.grab-title {
  letter-spacing: -0.02em;
}

/* Текст по центру: строки выравниваются по длине, чтобы не оставался короткий хвост */
.grab-sub {
  max-width: 680px;
  margin: var(--space-200) auto 0;
  color: var(--game-text-2);
  text-wrap: balance;
}

.grab-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-400);
  text-align: left;
}

.grab-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-100);
  padding-block: var(--space-200);
}

/* Линии между выгодами */
.grab-list li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--game-line-strong);
}

.grab-list i {
  flex: none;
  color: var(--cyan);
  font-size: 24px;
}

/* Белая карточка на тёмном экране: радиус 24, сцена внутри 24 − 8 = 16 */
.grab-card {
  margin-top: var(--space-500);
  padding: var(--space-75);
  border-radius: var(--radius-3xl);
  background: var(--bg);
  color: var(--text);
}

/* Мокап в карточке выровнен по левому краю, как на первом экране (сам экран выровнен по центру) */
.grab-card .lm-stage {
  text-align: left;
}

.grab-card-body {
  padding: var(--space-300) var(--space-100) var(--space-100);
}

.grab-card-body .btn {
  margin-top: var(--space-300);
}

/* Сцена в карточке — копия сцены первого экрана. Её анимации стоят на паузе
   в начальном кадре и запускаются, когда карточка появляется на экране */
.lm-stage.is-reveal {
  margin-top: 0;
  border-radius: var(--radius-2xl);
}

.js .lm-stage.is-reveal .lm-book,
.js .lm-stage.is-reveal .lm-book-3d,
.js .lm-stage.is-reveal .lm-sheet,
.js .lm-stage.is-reveal .lm-sticker,
.js .lm-stage.is-reveal .lm-chart-card,
.js .lm-stage.is-reveal .lm-chart-mask,
.js .lm-stage.is-reveal .lm-shield-badge {
  animation-play-state: paused;
}

.js .grab-card.is-visible .lm-stage.is-reveal .lm-book,
.js .grab-card.is-visible .lm-stage.is-reveal .lm-book-3d,
.js .grab-card.is-visible .lm-stage.is-reveal .lm-sheet,
.js .grab-card.is-visible .lm-stage.is-reveal .lm-sticker,
.js .grab-card.is-visible .lm-stage.is-reveal .lm-chart-card,
.js .grab-card.is-visible .lm-stage.is-reveal .lm-chart-mask,
.js .grab-card.is-visible .lm-stage.is-reveal .lm-shield-badge {
  animation-play-state: running;
}

/* --------------------------------------------------------------------------
   Второй лид-магнит · Экран 1: книга на синей сцене и под ней крупная карточка
   с графиком «Прибыль после лузстрика». До пика линии общие, на лузстрике
   (подсвеченная полоса) расходятся: без правил серая уходит ниже старта,
   с правилами синяя проседает меньше и снова растёт. Пунктир — уровень старта.
   Линии «рисуются»: маска цвета карточки уезжает вправо (transform)
   -------------------------------------------------------------------------- */

/* Композиция по диагонали: книга (уменьшена до 0,82) слева сверху и видна целиком,
   карточка с графиком прислонена к ней справа снизу и закрывает только угол книги.
   Наклон карточки в ту же сторону, что у книги. Пустые углы уравновешивают
   щит справа сверху и фишка слева снизу.
   Видимая книга: 161 × 220, от 36 до 256 по высоте; карточка: от 196 до 360 */
.lm-stage.is-variance {
  height: 388px;
}

.is-variance .lm-book {
  top: 12px;
  left: calc(50% - 156px);
  scale: 0.82;
}

.is-variance .lm-book-shadow {
  top: 236px;
  left: calc(50% - 136px);
  width: 156px;
  height: 24px;
}

.is-variance .lm-prop.is-top {
  top: 300px;
  left: var(--space-300);
  background: var(--game-bg);
}

/* Щит в правом верхнем углу: голубая фишка с пунктирным краем, слегка повёрнута */
.lm-shield-badge {
  position: absolute;
  top: var(--space-500);
  left: calc(50% + 76px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-full);
  background: var(--cyan);
  color: var(--on-cyan);
  font-size: 32px;
  box-shadow: 0 12px 24px rgba(4, 18, 50, 0.3);
  rotate: 8deg;
  animation: lm-pop 0.6s var(--ease) calc(var(--i, 0) * 80ms + 1500ms) both;
}

/* Обложка: название наверху, сразу под ним подзаголовок «5 правил» */
.is-variance .lm-cover-title {
  margin-top: var(--space-200);
}

.is-variance .lm-cover-steps {
  margin-top: var(--space-75);
}

/* Карточка с графиком: во всю ширину сцены, поверх низа книги, выезжает снизу */
.lm-chart-card {
  position: absolute;
  top: 196px;
  left: calc(50% - 64px);
  z-index: 3;
  width: 220px;
  padding: var(--space-100);
  border-radius: var(--radius-xl);
  background: var(--card-face);
  color: var(--card-ink);
  box-shadow:
    0 16px 32px rgba(4, 18, 50, 0.3),
    0 2px 4px rgba(4, 18, 50, 0.16);
  rotate: -2deg;
  animation: lm-card-in 0.9s var(--ease) calc(var(--i, 0) * 80ms + 800ms) both;
}

.lm-chart-head {
  color: var(--blue);
}

/* Легенда: короткая линия цвета графика и подпись */
.lm-legend {
  display: flex;
  gap: var(--space-100);
  margin-top: var(--space-50);
}

.lm-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-50);
}

.lm-legend span::before {
  content: "";
  width: 12px;
  height: 3px;
  border-radius: var(--radius-full);
}

.lm-legend .is-good {
  color: var(--blue);
}

.lm-legend .is-good::before {
  background: var(--blue);
}

.lm-legend .is-bad {
  color: var(--text-2);
}

.lm-legend .is-bad::before {
  background: var(--text-3);
}

/* График в пропорции 276 × 112 (196 × 80 на экране); подпись «Лузстрик» внутри полосы сверху */
.lm-chart {
  position: relative;
  height: 80px;
  margin-top: var(--space-100);
  overflow: hidden;
}

.lm-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 80px;
  overflow: visible;
}

.lm-chart svg line,
.lm-chart svg polyline {
  vector-effect: non-scaling-stroke;
}

.lm-chart .lm-grid {
  stroke: rgba(11, 18, 32, 0.08);
  stroke-width: 1;
}

.lm-chart .lm-dip {
  fill: rgba(11, 18, 32, 0.06);
}

.lm-chart .lm-start {
  stroke: var(--text-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.lm-chart .lm-line,
.lm-chart .lm-line-bad {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.lm-chart .lm-line {
  stroke: var(--blue);
}

.lm-chart .lm-line-bad {
  stroke: var(--text-3);
}

.lm-chart .lm-end,
.lm-chart .lm-end-bad {
  stroke: var(--card-face);
  stroke-width: 2;
}

.lm-chart .lm-end {
  fill: var(--cyan);
}

.lm-chart .lm-end-bad {
  fill: var(--text-3);
}

/* Подпись над полосой лузстрика: полоса x 122…196 из 276, центр на 57,6% */
.lm-chart-label {
  position: absolute;
  top: var(--space-25);
  left: 57.6%;
  padding: 0 var(--space-75);
  border-radius: var(--radius-full);
  background: var(--game-bg);
  color: var(--game-text);
  white-space: nowrap;
  transform: translateX(-50%);
}

/* «старт» под пунктиром слева: линия на y 92 графика */
.lm-start-label {
  position: absolute;
  top: 67px;
  left: var(--space-50);
  color: var(--text-3);
}

/* Маска «рисует» линии: уезжает вправо и открывает график */
.lm-chart-mask {
  position: absolute;
  inset: 0;
  background: var(--card-face);
  transform-origin: right center;
  transform: scaleX(0);
  animation: lm-draw 1.6s var(--ease) calc(var(--i, 0) * 80ms + 1300ms) both;
}

/* На узких телефонах карточка левее: заходит на книгу чуть больше, но не уходит за край */
@media (max-width: 374px) {
  .lm-chart-card {
    left: calc(50% - 80px);
  }
}

/* В карточке экрана 3 сцена уже на 16px: график и щит сдвинуты внутрь, чтобы не прилипать к краю */
.grab-card .is-variance .lm-chart-card {
  left: calc(50% - 76px);
}

.grab-card .is-variance .lm-shield-badge {
  left: calc(50% + 64px);
}

@media (max-width: 374px) {
  .grab-card .is-variance .lm-chart-card {
    left: calc(50% - 92px);
  }
}

@keyframes lm-card-in {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}

@keyframes lm-draw {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Пояснение под кнопкой */
.cta-note {
  max-width: 680px;
  margin-top: var(--space-100);
  color: var(--text-2);
  text-align: center;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Подвал: 18+, ответственная игра и документы
   Закреплённая кнопка прячется, когда подвал в кадре (data-cta)
   -------------------------------------------------------------------------- */

.footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  padding:
    var(--space-600)
    var(--gutter)
    calc(var(--space-600) + env(safe-area-inset-bottom));
  background: var(--game-bg);
  color: var(--game-text);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-75);
  width: fit-content;
  border-radius: var(--radius-full);
}

.footer-brand:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.footer-play {
  display: flex;
  align-items: flex-start;
  gap: var(--space-100);
  padding: var(--space-200);
  border: 1px solid var(--game-line-strong);
  border-radius: var(--radius-2xl);
  color: var(--game-text-2);
}

.footer-age {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 2px solid var(--cyan);
  border-radius: var(--radius-full);
  color: var(--cyan);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
}

.footer-links a {
  width: fit-content;
  color: var(--game-text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s var(--ease);
}

.footer-links a:hover {
  text-decoration-color: var(--cyan);
}

.footer-links a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.footer-copy {
  color: var(--game-text-3);
}

/* --------------------------------------------------------------------------
   Появление
   -------------------------------------------------------------------------- */

[data-intro] {
  animation: rise 0.7s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

/* Блоки ниже первого экрана: поднимаются при прокрутке (см. main.js) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-intro] {
    animation: fade 0.4s var(--ease) both;
  }

  .lm-sheet,
  .lm-book,
  .lm-book-3d,
  .lm-sticker,
  .lm-chart-card,
  .lm-chart-mask,
  .lm-shield-badge {
    animation: none;
  }

  .lm-mark::before {
    transition: none;
  }

  .js [data-reveal] {
    transform: none;
    transition: opacity 0.4s var(--ease);
  }

  .btn,
  .btn:hover,
  .btn:active {
    transform: none;
  }

  .btn-pulse::after {
    animation: none;
  }

  .sticky-cta,
  .sticky-cta.is-hidden,
  .nav-wrap.is-hidden {
    transform: none;
  }
}