/* ==========================================================================
   lvlup AI — лендинг, версия 2 «Ночной зал»
   Тёмный кинематографический стиль: чёрный зал, тёплый янтарный свет.

   Правила, на которых всё держится:
   · Свет вместо теней. В тёмной теме тень не читается — работает свечение.
   · Движение только на transform/opacity/filter — их считает видеокарта,
     остальное вызывает пересчёт раскладки и роняет кадры.
   · Никаких гифок и видео. Всё движение — код.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Фон и поверхности — ступени светлоты */
  --bg-void:      #060607;
  --bg-base:      #0A0A0B;
  --surface-1:    #101012;
  --surface-2:    #17171A;
  --surface-3:    #1E1E22;

  /* Границы делаются светом, а не темнотой */
  --line:         rgba(255, 255, 255, 0.07);
  --line-mid:     rgba(255, 255, 255, 0.12);
  --line-strong:  rgba(255, 255, 255, 0.20);

  /* Три уровня текста, контраст проверен */
  --text-1: #F5F3F0;   /* 17.7:1 */
  --text-2: #B9B5AF;   /*  9.6:1 */
  --text-3: #85817B;   /*  5.6:1 */

  /* Акцент */
  --accent:      #FF6B1A;
  --accent-hot:  #FF8C42;
  --accent-deep: #E4520B;
  --accent-ink:  #100E0B;  /* текст ПОВЕРХ оранжевого: белый даёт 2.85:1 */
  --accent-text: #FF8C42;  /* оранжевый КАК текст на тёмном: 8.0:1 */
  --accent-wash: rgba(255, 107, 26, 0.10);
  --glow-near:   rgba(255, 107, 26, 0.45);
  --glow-far:    rgba(255, 107, 26, 0.16);
  --grad-accent: linear-gradient(135deg, #FF8C42 0%, #FF6B1A 46%, #E4520B 100%);

  --ok: #35D0A5;

  /* Стекло поверх фотографии */
  --glass-bg:     rgba(18, 18, 21, 0.55);
  --glass-solid:  #16161A;
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-edge:   rgba(255, 255, 255, 0.28);
  --glass-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85),
                  inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --elev-2: 0 10px 30px -12px rgba(0, 0, 0, 0.9);
  --elev-3: 0 30px 70px -28px rgba(0, 0, 0, 0.95);

  /* Типографика */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, sans-serif;

  --size-hero:    clamp(2.6rem, 1rem + 4.6vw, 5.4rem);
  --size-h2:      clamp(2rem, 1.2rem + 2.9vw, 3.6rem);
  --size-h3:      clamp(1.25rem, 1rem + 0.9vw, 1.7rem);
  --size-stat:    clamp(3rem, 1.6rem + 5.4vw, 6.5rem);
  --size-body:    clamp(1rem, 0.95rem + 0.25vw, 1.12rem);

  /* Ритм */
  --wrap: 1280px;
  --gap-section: clamp(5rem, 3rem + 8vw, 11rem);
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* Движение */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;
}

/* Светлая тема — осознанный вариант, а не инверсия:
   тёплая бумага, тот же оранжевый, свет заменён на тень. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-void:   #EFEAE3;
  --bg-base:   #FBF8F4;
  --surface-1: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #F5F0E9;
  --line:        rgba(20, 16, 12, 0.10);
  --line-mid:    rgba(20, 16, 12, 0.16);
  --line-strong: rgba(20, 16, 12, 0.26);
  --text-1: #14100C;
  --text-2: #4A443C;
  --text-3: #7A7268;
  --accent-text: #C2470A;
  --accent-ink: #FFFFFF;
  --glow-near: rgba(255, 107, 26, 0.28);
  --glow-far:  rgba(255, 107, 26, 0.10);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-solid: #FFFFFF;
  --glass-border: rgba(20, 16, 12, 0.10);
  --glass-edge: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 24px 60px -28px rgba(60, 40, 20, 0.35),
                  inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --elev-2: 0 10px 30px -14px rgba(60, 40, 20, 0.28);
  --elev-3: 0 30px 70px -30px rgba(60, 40, 20, 0.35);
}

/* --- Основа ------------------------------------------------------------ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  color: var(--text-1);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

p { margin: 0 0 1rem; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
/* height:auto обязателен. Без него атрибут height="1221" из разметки
   становится настоящей высотой картинки и ОТМЕНЯЕТ aspect-ratio —
   снимок в герое растягивался на 1221px и выдавливал кнопки за экран. */
img { max-width: 100%; height: auto; display: block; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Приём с референсов: два начертания в одном заголовке */
.thin { font-weight: 300; letter-spacing: -0.02em; }
.accent-word { color: var(--accent-text); }

.label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.label::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent);
}

.lead {
  max-width: 46ch;
  color: var(--text-2);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
}

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

.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text-1);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft);
}
.btn:hover { transform: translateY(-2px); border-color: var(--line-strong); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn--primary {
  border-color: transparent;
  background: var(--grad-accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 0 var(--glow-near);
}
.btn--primary:hover {
  box-shadow: 0 8px 34px -6px var(--glow-near), 0 0 60px -10px var(--glow-far);
}
.btn--big { padding: 1.15rem 2.2rem; font-size: 1.06rem; }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.92rem; }
.btn--ghost { background: transparent; }

/* --- Шапка ------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: 1rem;
  background: color-mix(in srgb, var(--bg-base) 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-soft),
              background var(--dur) var(--ease-soft);
}
.nav[data-stuck="true"] { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: 1.5rem; }
.nav__links { display: flex; gap: 1.6rem; margin-inline: auto; }
.nav__links a {
  position: relative;
  color: var(--text-2);
  font-size: 0.95rem;
  text-decoration: none;
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__links a:hover { color: var(--text-1); text-decoration: none; }
.nav__links a:hover::after { transform: scaleX(1); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  /* На узком экране шапка сжимает название, и «lvlup AI» ломается
     на две строки, распирая шапку по высоте. Имени переносы запрещены. */
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--text-1);
  font-family: var(--font-display);
  font-weight: 800;
  text-decoration: none;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--grad-accent);
  color: var(--accent-ink);
  font-size: 1rem;
  box-shadow: 0 0 22px -4px var(--glow-near);
}

/* На телефоне в шапку не помещается всё сразу: ссылки, переключатель темы
   и кнопка вместе занимали 725 px при экране 390. Оставляем главное —
   имя и кнопку, разделы доступны прокруткой и из подвала. */
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__inner { gap: 0.7rem; justify-content: space-between; }
  .brand { font-size: 0.98rem; }
}
@media (max-width: 460px) {
  .theme { display: none; }
}

.theme {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  background: var(--surface-2);
}
.theme button {
  display: grid;
  place-items: center;
  width: 32px; height: 28px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.theme button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* --- Свечение как фон -------------------------------------------------- */

.glowfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Слой масштабируется анимацией — без этого он растягивал раскладку */
  contain: strict;
  background:
    radial-gradient(60vw 60vw at 78% 6%, var(--glow-far), transparent 62%),
    radial-gradient(48vw 48vw at 8% 42%, rgba(255, 140, 66, 0.07), transparent 66%);
  animation: breathe 14s var(--ease-soft) infinite alternate;
}
@keyframes breathe {
  from { opacity: 0.75; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.08); }
}

/* --- Первый экран ------------------------------------------------------ */

.hero {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--gap-section);
}
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.hero__grid > * { min-width: 0; }

h1 {
  margin-block: 1.2rem 1.5rem;
  font-size: var(--size-hero);
  /* «нейросети» в 114 px не влезало в колонку и уезжало под обрез.
     Перенос по слогам — страховка на любых ширинах и языках. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.9rem;
}
.chip svg { color: var(--ok); flex: none; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}
.hero__note { color: var(--text-3); font-size: 0.9rem; }

/* Фотография с плавающими стеклянными карточками поверх */
.shot {
  position: relative;
  /* ОБРЕЗКИ ЗДЕСЬ НЕТ. Стеклянные карточки намеренно выступают за края
     снимка — если обрезать на этом уровне, им срежет половину. */
  box-shadow: var(--elev-3);
  border-radius: var(--radius-xl);
}
.shot__frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.shot__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Долгое проявление: подмена снимка на живой кадр не должна читаться
     как переключение — только как то, что кадр вдруг задышал. */
  transition: opacity 1200ms var(--ease-soft);
}
.shot__video.is-on { opacity: 1; }

.shot__frame::after {
  /* Скрим снизу: под карточками текст обязан читаться */
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(to top,
    rgba(6, 6, 7, 0.85) 0%, rgba(6, 6, 7, 0.25) 38%, transparent 68%);
  pointer-events: none;
}
.shot img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.2s var(--ease-out);
}
.shot:hover img { transform: scale(1.06); }

@media (min-width: 1000px) {
  .shot img { aspect-ratio: 4 / 5; }
}

.glasscard {
  position: absolute;
  z-index: 2;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-solid);
  box-shadow: var(--glass-shadow);
}
@supports (backdrop-filter: blur(4px)) {
  .glasscard {
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(140%);
  }
}
.glasscard::before {
  /* Световая кромка сверху — то, что делает стекло стеклом */
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-edge), transparent);
}
.glasscard__num {
  display: block;
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}
.glasscard__cap {
  color: var(--text-3);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.glasscard--a { top: 7%; right: clamp(-3rem, -2vw, 0rem); }
.glasscard--b { bottom: 14%; left: clamp(-3rem, -2vw, 0rem); }
@media (max-width: 620px) {
  .glasscard--a { top: 5%; right: 3%; }
  .glasscard--b { bottom: 8%; left: 3%; }
}

/* --- Светящаяся дуга-разделитель. Кодом, не картинкой ------------------ */

.arc {
  position: relative;
  height: clamp(90px, 12vw, 190px);
  overflow: hidden;
  pointer-events: none;
}
.arc::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 190%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 2px solid var(--accent);
  filter: blur(0.4px) drop-shadow(0 0 18px var(--glow-near))
          drop-shadow(0 0 70px var(--glow-far));
  opacity: 0.85;
}
.arc--down::before {
  top: 0; bottom: auto;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  border-top: 0;
  border-bottom: 2px solid var(--accent);
}

/* --- Огромные цифры ---------------------------------------------------- */

.stats {
  display: grid;
  gap: 2rem;
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 107, 26, 0.07), transparent 55%),
    var(--surface-1);
}
@media (min-width: 760px) {
  .stats { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
.stat__num {
  display: block;
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: var(--size-stat);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.stat__num em {
  color: var(--accent-text);
  font-style: normal;
}
.stat__cap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.9rem;
}
.stat__cap::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow-near);
}

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

.section { padding-block: var(--gap-section); }
.section__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section__head h2 { margin-block: 1rem 1.1rem; font-size: var(--size-h2); }

.cards {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.card::before {
  /* Свет, идущий за курсором. Координаты ставит скрипт. */
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
              rgba(255, 107, 26, 0.14), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-soft);
  pointer-events: none;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-mid); text-decoration: none; }
.card:hover::before { opacity: 1; }
/* Живой кадр карточки.

   В покое он приглушён почти до текстуры: семь ярких прямоугольников
   подряд превратили бы раздел в витрину обоев и заглушили бы заголовки.
   Под курсором кадр разгорается — становится понятно, что это не фон,
   а сама работа, которую карточка предлагает сделать. */
.card__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.card__art img,
.card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__art picture {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0.30;
  transition: opacity var(--dur) var(--ease-soft);
}
.card__video {
  opacity: 0;
  transition: opacity 900ms var(--ease-soft);
}
.card__video.is-on { opacity: 0.30; }
.card:hover .card__art picture { opacity: 0.5; }
.card:hover .card__video.is-on { opacity: 0.5; }

/* Затемнение снизу. Без него подпись карточки ложится прямо на кадр
   и на светлых участках перестаёт читаться. */
.card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    var(--surface-1) 26%, rgba(0, 0, 0, 0.74) 58%, rgba(0, 0, 0, 0.22) 100%);
}

/* Содержимое карточки — над кадром. */
.card > *:not(.card__art) { position: relative; z-index: 1; }

/* Светлая тема.

   Кадры сняты в темноте — на белой карточке они превращают верх в
   чёрное пятно, и тёмный заголовок по нему не читается. Поэтому здесь
   кадр остаётся только как еле различимая тёплая фактура, а подложка
   светлеет вместо того, чтобы темнеть. */
:root[data-theme="light"] .card__art picture { opacity: 0.1; }
:root[data-theme="light"] .card__video.is-on { opacity: 0.1; }
:root[data-theme="light"] .card:hover .card__art picture,
:root[data-theme="light"] .card:hover .card__video.is-on { opacity: 0.18; }
:root[data-theme="light"] .card__art::after {
  background: linear-gradient(to top,
    var(--surface-1) 30%, rgba(255, 255, 255, 0.72) 62%, rgba(255, 255, 255, 0.4) 100%);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 0.4rem;
  border: 1px solid var(--line-mid);
  border-radius: 13px;
  background: var(--accent-wash);
  color: var(--accent-text);
  font-size: 1.3rem;
}
.card h3 { font-size: var(--size-h3); }
.card p { margin: 0; color: var(--text-3); font-size: 0.96rem; }
.card__soon {
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Шаги */
.steps { counter-reset: step; }
.step__n {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 800;
  box-shadow: 0 0 26px -6px var(--glow-near);
}

/* --- Витрина нейросетей ------------------------------------------------ */

.pool__group { margin-bottom: 2.6rem; }
.pool__group h3 { margin-bottom: 0.4rem; font-size: var(--size-h3); }
.pool__hint { margin-bottom: 1.1rem; color: var(--text-3); font-size: 0.94rem; }
.pool__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 1rem;
  padding-bottom: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.pool__row > * { scroll-snap-align: start; }

.mcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.4rem;
  min-height: 230px;
  padding: 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--text-1);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.mcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pattern);
  background-size: var(--pattern-size, 100% 100%);
  background-position: var(--pattern-pos, center);
  background-repeat: var(--pattern-repeat, no-repeat);
  opacity: 0.5;
  transition: opacity var(--dur) var(--ease-soft), transform 1.1s var(--ease-out);
}
.mcard::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    var(--surface-1) 6%, rgba(16, 16, 18, 0.7) 44%, transparent 82%);
}
.mcard > * { position: relative; z-index: 1; }
.mcard:hover { transform: translateY(-4px); border-color: var(--line-mid); text-decoration: none; }
.mcard:hover::before { opacity: 0.75; transform: scale(1.06); }

.mcard__tag {
  align-self: flex-start;
  padding: 0.24rem 0.62rem;
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mcard__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; }
.mcard__desc { color: var(--text-3); font-size: 0.92rem; line-height: 1.45; }

.mcard--soon { cursor: default; }
/* Пометка на карточке нейросети, которую ещё не подключили. Без неё
   карточка выглядела точно как рабочая — и вела на регистрацию. */
.mcard__soon {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  z-index: 2;
  padding: 0.18rem 0.6rem;
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  background: var(--surface-2, rgba(255,255,255,0.06));
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mcard--soon::before { opacity: 0.22; }
.mcard--soon:hover { transform: none; }
.mcard--soon:hover::before { opacity: 0.22; transform: none; }
.mcard--soon .mcard__name { color: var(--text-2); }

/* Логотип модели: появится, когда положим официальные файлы */
.mcard__logo { display: none; }
.mcard--haslogo .mcard__logo {
  position: absolute; top: 1.1rem; left: 1.3rem; z-index: 1;
  display: block; width: 40px; height: 40px;
  border-radius: 11px;
  background: #fff var(--logo, none) center / 24px no-repeat;
}

/* --- Тарифы ------------------------------------------------------------ */

.plans {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.plan {
  display: flex;
  flex-direction: column;
  padding: 1.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}
.plan--hero {
  border-color: var(--line-mid);
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(255, 107, 26, 0.12), transparent 60%),
    var(--surface-2);
  box-shadow: 0 0 90px -40px var(--glow-near);
}
.plan__tag {
  align-self: flex-start;
  margin-bottom: 0.8rem;
  padding: 0.24rem 0.7rem;
  border-radius: 999px;
  background: var(--grad-accent);
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.plan__name { color: var(--text-3); font-size: 0.94rem; letter-spacing: 0.08em; text-transform: uppercase; }
.plan__price {
  margin-block: 0.5rem 1.2rem;
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
}
.plan__price small { display: block; margin-top: 0.35rem; color: var(--text-3); font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; }
.plan__list { margin: 0 0 1.4rem; padding: 0; list-style: none; }
.plan__list li {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  color: var(--text-2);
  font-size: 0.95rem;
}
.plan__list li::before { content: "—"; color: var(--accent-text); }
.plan .btn { margin-top: auto; }

/* --- Вопросы ----------------------------------------------------------- */

.qa {
  border-bottom: 1px solid var(--line);
}
.qa summary {
  padding: 1.2rem 0;
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  float: right;
  color: var(--accent-text);
  font-size: 1.3rem;
  transition: transform var(--dur) var(--ease-out);
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa__body { padding-bottom: 1.3rem; color: var(--text-2); }

/* --- Финальный призыв и подвал ----------------------------------------- */

.final {
  position: relative;
  padding-block: var(--gap-section);
  text-align: center;
  overflow: hidden;
}
.final__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Свечение — фон, а не картинка: приглушаем и смешиваем со слоем,
     чтобы текст поверх него оставался читаемым. */
  mix-blend-mode: screen;
  filter: saturate(0.85);
  transition: opacity 1400ms var(--ease-soft);
  pointer-events: none;
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 35%, transparent 78%);
}
.final__video.is-on { opacity: 0.26; }

/* Затемнение ровно под надписью. Свечение живое, оно всё время меняет
   яркость — без этой подложки заголовок то читается, то тонет в оранжевом.
   Пятно мягкое и по центру, поэтому по краям секции движение видно
   полностью, а текст всё время лежит на тёмном. */
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 46% at 50% 46%,
    rgba(10, 10, 11, 0.86) 0%, rgba(10, 10, 11, 0.6) 46%, transparent 74%);
}
.final .wrap { position: relative; z-index: 1; }

.final h2 { margin-bottom: 1.2rem; font-size: var(--size-h2); }
.final .lead { margin-inline: auto; }

.footer {
  padding-block: 3rem 2.5rem;
  border-top: 1px solid var(--line);
  background: var(--bg-void);
  color: var(--text-3);
  font-size: 0.92rem;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  margin-block: 1.2rem;
}
.footer a { color: var(--text-2); }

/* --- Появление при прокрутке ------------------------------------------- */

/* Прятать содержимое имеет право ТОЛЬКО работающий скрипт.
   Класс js ставится им же в первых строках. Если скрипт не выполнился —
   страница просто видна целиком, а не остаётся чёрной. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* --- Уважение к тем, кто просил не двигать ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .glowfield { animation: none; }
}

/* --- Свой рисунок у каждой нейросети ---
   Градиентами, а не картинками: семнадцать изображений весили бы
   больше всей страницы, а так это ноль запросов. */
.mcard--chatgpt { --pattern: radial-gradient(circle at 74% 30%, transparent 0 30px, #10A37F 30px 44px, transparent 45px), radial-gradient(circle at 74% 30%, transparent 0 56px, #1FD1A5 56px 66px, transparent 67px); }
.mcard--gpt5 { --pattern: radial-gradient(circle at 76% 28%, transparent 0 24px, #0B6E57 24px 40px, transparent 41px), radial-gradient(circle at 76% 28%, transparent 0 52px, #1FD1A5 52px 64px, transparent 65px); }
.mcard--claude { --pattern: conic-gradient(from 0deg at 74% 30%, #D97757 0 5%, transparent 5% 12.5%, #D97757 12.5% 17.5%, transparent 17.5% 25%, #D97757 25% 30%, transparent 30% 37.5%, #D97757 37.5% 42.5%, transparent 42.5% 50%, #D97757 50% 55%, transparent 55% 62.5%, #D97757 62.5% 67.5%, transparent 67.5% 75%, #D97757 75% 80%, transparent 80% 87.5%, #D97757 87.5% 92.5%, transparent 92.5%), radial-gradient(circle at 74% 30%, #F0A88C 0 20px, transparent 21px); }
.mcard--deepseek { --pattern: radial-gradient(ellipse 150px 58px at 80% 28%, #2B6CF6 0 100%, transparent 0), radial-gradient(ellipse 104px 38px at 66% 44%, #5FA8FF 0 100%, transparent 0); }
.mcard--gemini { --pattern: conic-gradient(from 45deg at 76% 30%, #4285F4 0 12%, transparent 12% 25%, #4285F4 25% 37%, transparent 37% 50%, #4285F4 50% 62%, transparent 62% 75%, #4285F4 75% 87%, transparent 87%), radial-gradient(circle at 88% 48%, #9B72F9 0 20px, transparent 21px); }
.mcard--grok { --pattern: linear-gradient(66deg, transparent 0 56%, #E5422B 56% 64%, transparent 64% 70%, #9AA1AC 70% 76%, transparent 76%); }
.mcard--midjourney { --pattern: conic-gradient(from 200deg at 78% 32%, #C9B27A 0 14%, transparent 14%), linear-gradient(to top, #5A6B8C 0 30px, transparent 30px); }
.mcard--nanobanana { --pattern: radial-gradient(circle at 80% 24%, #FFD84D 0 44px, transparent 45px), radial-gradient(circle at 88% 18%, #101012 0 38px, transparent 39px), radial-gradient(circle at 66% 44%, #FFB524 0 18px, transparent 19px); }
.mcard--flux { --pattern: repeating-linear-gradient(72deg, #7A5CFF 0 4px, transparent 4px 22px), radial-gradient(circle at 82% 28%, #C9BCFF 0 24px, transparent 25px); }
.mcard--seedream { --pattern: radial-gradient(circle at 78% 30%, #E86A4A 0 42px, transparent 43px), linear-gradient(to top, #F2B705 0 34px, transparent 34px); }
.mcard--seedance { --pattern: repeating-linear-gradient(102deg, #E5422B 0 8px, transparent 8px 34px), conic-gradient(from -30deg at 80% 32%, #FFB524 0 12%, transparent 12%); }
.mcard--kling { --pattern: radial-gradient(circle at 78% 24%, #00C2A8 0 20px, transparent 21px), linear-gradient(120deg, transparent 0 58%, #7FE3D4 58% 68%, transparent 68%), radial-gradient(circle at 64% 46%, #00C2A8 0 13px, transparent 14px); }
.mcard--veo { --pattern: linear-gradient(#4285F4 0 5px, transparent 5px 100%), linear-gradient(to bottom, transparent 0 118px, #4285F4 118px 123px, transparent 123px), radial-gradient(circle at 86% 42%, #34A853 0 17px, transparent 18px); }
.mcard--sora { --pattern: radial-gradient(circle at 82% 26%, #FBFAF6 0 7px, transparent 8px), radial-gradient(circle at 70% 18%, #8A8F98 0 5px, transparent 6px), radial-gradient(circle at 90% 40%, #8A8F98 0 6px, transparent 7px), radial-gradient(circle at 64% 36%, #FBFAF6 0 4px, transparent 5px); }
.mcard--runway { --pattern: repeating-linear-gradient(90deg, #B45CFF 0 10px, transparent 10px 30px), conic-gradient(from -30deg at 80% 42%, #FF6FD8 0 12%, transparent 12%); }
.mcard--suno { --pattern: radial-gradient(circle at 74% 32%, #FF5A36 0 17px, transparent 18px), radial-gradient(circle at 86% 24%, #FF5A36 0 13px, transparent 14px), repeating-linear-gradient(90deg, #FFB524 0 7px, transparent 7px 20px); }
.mcard--elevenlabs { --pattern: radial-gradient(circle at 66% 32%, #5B8DEF 0 19px, transparent 20px), radial-gradient(circle at 66% 32%, transparent 0 32px, #7FE3D4 32px 38px, transparent 39px), radial-gradient(circle at 66% 32%, transparent 0 50px, #7FE3D4 50px 56px, transparent 57px); }
.mcard--suno { --pattern-size: 100% 100%, 100% 100%, 100% 40px; --pattern-pos: top, top, bottom; }

/* ==========================================================================
   ВХОД ПЕРВОГО ЭКРАНА

   Сделан ЧИСТЫМ CSS, без участия скрипта. Первая версия ставила класс из
   requestAnimationFrame — и если кадр не приходил (фоновая вкладка, скрипт
   не выполнился), первый экран оставался пустым. Анимация же стартует сама,
   как только браузер отрисует элемент: подвести её нечем.
   ========================================================================== */

/* Строка заголовка поднимается ИЗ-ПОД маски. Маска — overflow у обёртки. */
.rise { display: block; overflow: hidden; }
.rise > span {
  display: block;
  animation: подъём 1.05s var(--ease-out) var(--rise-delay, 0ms) both;
}
@keyframes подъём {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

/* Снимок выходит из темноты: сходятся масштаб и яркость */
.hero .shot { animation: выход 1.1s var(--ease-out) 260ms both; }
@keyframes выход {
  from { opacity: 0; transform: translateY(28px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.hero .shot__frame img {
  animation: изТемноты 1.9s var(--ease-out) 320ms both;
}
@keyframes изТемноты {
  from { filter: brightness(0.35) saturate(0.7); transform: scale(1.14); }
  to   { filter: brightness(1) saturate(1); transform: scale(1.03); }
}

/* Стеклянные карточки прилетают последними, чтобы не спорить со снимком */
.hero .glasscard {
  animation: всплытие 700ms var(--ease-out) var(--card-delay, 1000ms) both;
}
@keyframes всплытие {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Текстовые части героя — с ощутимым разбегом */
.hero [data-hero] {
  animation: всплытие 800ms var(--ease-out) var(--delay, 0ms) both;
}

/* Свет, пробегающий по акцентному слову. Один раз — кадры не тратятся. */
.accent-word {
  background: linear-gradient(100deg,
    var(--accent-text) 0%, var(--accent-text) 38%,
    #FFD9B8 48%, var(--accent-text) 58%, var(--accent-text) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: блик 1.5s var(--ease-soft) 1.6s 1 both;
}
@keyframes блик {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* Дыхание свечения под главной кнопкой — самое дешёвое постоянное движение */
.hero .btn--primary { animation: пульс 3.6s var(--ease-soft) 2.2s infinite; }
@keyframes пульс {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 26, 0); }
  50%      { box-shadow: 0 10px 40px -8px var(--glow-near); }
}

@media (prefers-reduced-motion: reduce) {
  .rise > span,
  .hero .shot,
  .hero .glasscard,
  .hero [data-hero],
  .hero .shot__frame img,
  .accent-word,
  .hero .btn--primary { animation: none !important; }
  .accent-word { color: var(--accent-text); }
  .hero .shot__frame img { transform: scale(1.03); }
}

/* ==========================================================================
   ФИРМЕННЫЙ МОУШЕН — дописывается В САМЫЙ КОНЕЦ styles.css.

   Блок опирается на то, что уже есть в файле выше (.rise, выход, изТемноты,
   всплытие, блик, пульс) и местами его переопределяет — поэтому он обязан
   идти последним.

   Три правила, из которых всё следует:
   · Двигаются только transform, translate, opacity и clip-path.
   · Ни одна анимация не имеет права остаться висеть на transform навсегда:
     fill-mode backwards вместо both — иначе она намертво перебивает :hover.
   · Кто просил не двигать — не получает ничего.
   ========================================================================== */

/* --- 1. ЗАЛ ЗАЖИГАЕТСЯ ---------------------------------------------------
   Первое, чего не хватало: до сих пор в нулевом кадре свет уже горел, шапка
   уже стояла, и «вау» рождаться было не из чего. Контраст «было темно →
   стало» стоит дешевле всего остального на этой странице.

   Свечение НЕЛЬЗЯ размывать: слой во весь экран, filter: blur по нему стоил
   бы 6–10 мс на кадр. Двигаем прозрачность и масштаб — 0,4 мс.
   Ключевой кадр заканчивается ровно на первом кадре breathe, поэтому стыка
   между зажиганием и дыханием не видно.                                    */

.glowfield {
  animation: разгорается 1500ms var(--ease-soft) both,
             breathe 14s var(--ease-soft) 1500ms infinite alternate;
}
@keyframes разгорается {
  from { opacity: 0;    transform: scale(1.16); }
  to   { opacity: 0.75; transform: scale(1); }
}

/* Опускается СОДЕРЖИМОЕ шапки, а не сама .nav: у неё backdrop-filter, и
   возить её транформом значит пересчитывать размытие подложки каждый кадр
   по всей ширине экрана. */
.nav__inner { animation: опускается 700ms var(--ease-out) both; }
@keyframes опускается {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

/* Черта у надписи-метки вырастает слева. Элемент 26×1 px — стоит нисколько. */
.hero .label::before {
  transform-origin: left center;
  animation: чертаРастёт 700ms var(--ease-out) 160ms both;
}
@keyframes чертаРастёт {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- 2. ЗАГОЛОВОК: МАСКА БЕЗ ОБРЕЗКИ ------------------------------------
   Приём уже стоит (.rise + подъём), но у него две беды.

   Первая: overflow: hidden режет по строчному боксу, а у Unbounded с
   letter-spacing -0.03em хвосты «р», «у», «ц» вылезают за него. Прямо
   сейчас у «нейросети» срезан хвост «р» — насовсем, не только в движении.
   Лечится полем снизу и таким же отрицательным отступом: высота строки
   не меняется, а маска перестаёт задевать буквы.

   Вторая: строка едет без прозрачности. Из-за этого движение читается как
   «текст поехал», а не как «текст вышел из темноты». Прозрачность добираем
   за первую треть — дальше работает уже только маска.                     */

.rise {
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.rise > span {
  animation: выходИзМаски 1.05s var(--ease-out) var(--rise-delay, 0ms) backwards;
}
@keyframes выходИзМаски {
  0%   { opacity: 0; transform: translateY(112%); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- 3. ФОТОГРАФИЯ: ВЫТИРАНИЕ ВМЕСТО ФИЛЬТРА ----------------------------
   Заменяет изТемноты. Тот приём правильный по замыслу и дорогой по цене:
   filter: brightness+saturate по картинке 600×750 стоит 1,5–3 мс на кадр,
   а на плотном экране до 6 мс — и так 1,9 секунды подряд, ровно в тот
   момент, когда рядом едут три строки заголовка. Это и есть главный
   кандидат на просадку кадров на первом экране.

   Делаем то же самое втрое дешевле: кадр вытирается сверху вниз по
   clip-path (композитная операция), одновременно отъезжает масштаб, а из
   черноты его выводит гаснущая накладка — чистая композиция, 0,15 мс.

   fill-mode backwards, а не both. У изТемноты стоит both, поэтому после
   окончания анимация НАВСЕГДА держит transform: scale(1.03) и правило
   .shot:hover img { transform: scale(1.06) } не срабатывает — приближение
   снимка под курсором сейчас просто не работает. С backwards свойства
   после анимации возвращаются к базовым, и наведение оживает.             */

.hero .shot__frame img {
  animation: кадрПроявляется 1400ms var(--ease-out) 320ms backwards;
}
@keyframes кадрПроявляется {
  0%   { transform: scale(1.14); clip-path: inset(0 0 100% 0); }
  55%  {                         clip-path: inset(0 0 0 0);    }
  100% { transform: scale(1.03); clip-path: inset(0 0 0 0);    }
}

.shot picture { position: relative; display: block; }

/* Темнота, из которой выходит кадр. Заодно закрывает пустую рамку в
   светлой теме, пока вытирание не дошло донизу. */
.shot picture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg-void);
  pointer-events: none;
  animation: темнотаУходит 1200ms var(--ease-soft) 320ms both;
}
@keyframes темнотаУходит {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* --- 4. СВЕТ ПО КРОМКЕ КАДРА ---------------------------------------------
   Единственное на первом экране движение, которое ничего не сообщает и
   существует только ради жанра: по верхней кромке снимка один раз
   пробегает световая полоса. Спрайт 600×2 px, у .shot__frame уже стоит
   overflow: hidden — за края не вылезет. 0,05 мс на кадр.                 */

.shot picture::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--accent) 38%, #FFE7D2 50%, var(--accent) 62%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  animation: светПоКромке 1250ms var(--ease-soft) 900ms both;
}
@keyframes светПоКромке {
  0%   { transform: translateX(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; }
}

/* --- 5. КНОПКИ И ЧИПЫ — ПО ОДНОМУ, А НЕ БЛОКОМ ---------------------------
   Сейчас .hero__cta и .hero__chips появляются целиком: две кнопки въезжают
   одним куском, три чипа — другим. Глаз читает это как два фейда, и именно
   отсюда ощущение «просто появилось».

   Разбираем на элементы: контейнер больше не анимируется, а дети получают
   тот же приём со сдвигом 90 мс. Задержка контейнера наследуется через
   --delay, так что разметку трогать не нужно.

   fill-mode backwards: с both анимация навсегда прибила бы transform, и у
   кнопок перестало бы работать .btn:hover { transform: translateY(-2px) }. */

.hero .hero__cta[data-hero],
.hero .hero__chips[data-hero] { animation: none; }

.hero .hero__cta > .btn,
.hero .hero__chips > .chip {
  animation: всплытие 800ms var(--ease-out)
             calc(var(--delay, 0ms) + var(--i, 0) * 90ms) backwards;
}
.hero .hero__cta > .btn:nth-child(2),
.hero .hero__chips > .chip:nth-child(2) { --i: 1; }
.hero .hero__chips > .chip:nth-child(3) { --i: 2; }

/* У главной кнопки к прилёту добавляется пульс свечения — но КОНЕЧНЫЙ.
   Сейчас он бесконечный, а значит: во-первых, страница вечно перерисовывает
   размытую тень 40 px (box-shadow — не композитное свойство, это настоящая
   перерисовка каждый кадр, пока открыта вкладка); во-вторых, работающая
   анимация перебивает .btn--primary:hover { box-shadow: ... }, то есть
   свечение при наведении на главную кнопку сейчас не появляется вообще.
   Три пульса привлекают внимание ровно там, где надо, и уходят.           */

.hero .hero__cta > .btn--primary {
  animation: всплытие 800ms var(--ease-out) var(--delay, 0ms) backwards,
             пульс 3.6s var(--ease-soft) 2.6s 3;
}

/* --- 6. РАССЛОЕНИЕ ПЕРВОГО ЭКРАНА ПРИ ПРОКРУТКЕ --------------------------
   Ответ на «захочется ли скроллить дальше»: первый же щелчок колеса
   разводит три слоя с разной скоростью. Координаты пишет motion.js.

   Здесь только will-change и только пока первый экран на экране: постоянный
   will-change держит слои в памяти видеокарты просто так.                  */

.hero.is-live > .wrap > div,
.hero.is-live .glasscard { will-change: transform, translate; }

/* --- 7. ОТКЛИК НА ЧЕЛОВЕКА ----------------------------------------------
   Скрипт честно пишет карточкам rotateX/rotateY с самого начала, но ни у
   одного родителя нет perspective. Без неё rotateY — это не поворот, а
   плоское сжатие по горизонтали на доли процента: пять градусов наклона
   человек не видит вообще. Одна строка возвращает объём всему разделу
   «Что умеет» и трём шагам. Стоит ноль: это свойство родителя.            */

.cards { perspective: 1000px; }

/* И то, чего на странице не было совсем: человек с клавиатурой не видел ни
   подсветки карточек, ни кольца на кнопках — только системный контур на
   тёмном фоне. Это не украшение, это дырка в доступности. */
.card:focus-visible,
.mcard:focus-visible,
.plan:focus-within,
.btn:focus-visible,
.chip:focus-visible,
.qa summary:focus-visible,
.theme button:focus-visible,
.nav__links a:focus-visible,
.footer a:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}
.card:focus-visible::before { opacity: 1; }
.nav__links a:focus-visible::after { transform: scaleX(1); }

/* --- 8. ВОЛНА ПОД НАЖАТИЕМ ----------------------------------------------
   Единственный приём, который остаётся на телефоне: нажатие обязано
   отзываться, иначе кажется, что не сработало. Элемент живёт 600 мс и
   удаляется, обе анимируемые величины композитные, в покое стоит ноль.    */

.btn {
  /* Волну надо чем-то обрезать по форме кнопки. box-shadow элемента
     overflow не режет, так что пульс и свечение при наведении целы.
     vertical-align задан явно: у inline-flex с overflow: hidden меняется
     базовая линия, и без этой строки кнопка внутри <p> уехала бы на
     пару пикселей. */
  overflow: hidden;
  vertical-align: middle;
}

.wave {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.5) 0%, rgba(255, 140, 66, 0.3) 45%, transparent 70%);
}
/* На оранжевой кнопке белым не отзовёшься — там волна тёмная. */
.btn--primary .wave {
  background: radial-gradient(circle,
    rgba(16, 14, 11, 0.42) 0%, rgba(16, 14, 11, 0.16) 50%, transparent 72%);
}

/* --- 9. ПОКОЙ ------------------------------------------------------------
   Общий блок выше по файлу обнуляет длительности через !important и этим
   гасит почти всё. Здесь добиваем остальное: бесконечные анимации, слои на
   видеокарте и декоративные накладки, которые при нулевой длительности
   застыли бы в конечном кадре.                                            */

@media (prefers-reduced-motion: reduce) {
  .glowfield,
  .nav__inner,
  .hero .label::before,
  .rise > span,
  .hero .shot__frame img,
  .shot picture::before,
  .shot picture::after,
  .hero .hero__cta > .btn,
  .hero .hero__cta > .btn--primary,
  .hero .hero__chips > .chip {
    animation: none !important;
  }
  .rise > span,
  .hero .hero__cta > .btn,
  .hero .hero__chips > .chip { opacity: 1 !important; transform: none !important; }
  .glowfield { opacity: 0.8; transform: none; }
  .hero .shot__frame img { transform: scale(1.03) !important; clip-path: none !important; }
  .shot picture::before,
  .shot picture::after,
  .wave { display: none !important; }
  .hero.is-live > .wrap > div,
  .hero.is-live .glasscard { will-change: auto !important; }
}