/* С231: шрифты нового дизайна — со своего сервера (без Google Fonts: быстрее из РФ и без передачи
   адресов посетителей третьей стороне). Только кириллица + латиница и только нужные начертания.

   ⭐ С234 (SEO-аудит №2): Manrope подключаем СВОИМИ файлами из public/fonts (см. scripts/make_fonts.py),
   а не через @fontsource-variable/manrope. Причина: файлы сборки несут отпечаток в имени, и
   предзагрузить их из index.html нельзя — а без предзагрузки шрифт приходил после первой отрисовки,
   и текст перевёрстывался (сдвиг макета CLS 0.125 на «Тарифах», 0.225 на десктопной английской
   главной). Заодно выброшен срез latin-ext: 15 КБ качались ради одного символа ₽ — теперь он
   лежит отдельным файлом на 0,5 КБ. */
/* jetbrains-mono-cyrillic-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/jetbrains-mono-cyrillic-400-normal-BEIGL1Tu.woff2) format('woff2'), url(/assets/jetbrains-mono-cyrillic-400-normal-ugxPyKxw.woff) format('woff');
}
/* jetbrains-mono-latin-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/jetbrains-mono-latin-400-normal-V6pRDFza.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-400-normal-6-qcROiO.woff) format('woff');
}

@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/manrope-latin-v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/manrope-cyrillic-v1.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* знак рубля — единственный символ сайта из среза latin-ext */
@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/manrope-rub-v1.woff2") format("woff2");
  unicode-range: U+20BD;
}

/* Подменный шрифт с подогнанными метриками: пока Manrope грузится, текст рисуется системным
   Arial/Helvetica/Roboto, ужатым до пропорций Manrope (высота строчных, подъём и спуск) — строки
   занимают то же место, и при подмене вёрстка не прыгает. */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
  size-adjust: 96.6%;
  ascent-override: 110.3%;
  descent-override: 31.1%;
  line-gap-override: 0%;
}
/* ⭐⭐⭐⭐⭐ С231 (Михаил): новый дизайн сайта по референсу из YouTube — стиль и приёмы, не копия.
   Всё под классом .v2 на корне — старые страницы и их стили не задеваются. Включается флагом
   сборки: с С232 новый дизайн основной (App.jsx); сборка с VITE_REDESIGN=0 отдаёт прежний сайт.
   Цвета увязаны с логотипом UnitVR: тёплый золотисто-оранжевый акцент и сине-фиолетовое свечение. */

.v2 {
  --bg: #09080c;
  --bg-2: #0f0d14;
  --fg: #f3f0ea;
  --fg-dim: #b9b4ab;
  /* ⭐ С250 (аудит): было #7d7a86 — мелкие подписи на стеклянных карточках давали контраст 4.26
     при норме 4.5. Осветлено до 5.3–6.0 к фону карточки; цвет остался «приглушённым». */
  --fg-mute: #8e8b98;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  /* С231 (Михаил): уходим от золота референса к цветам логотипа — синий → фиолетовый → персик */
  --gold: #a78bfa;                 /* основной акцент (имя оставлено — им размечен весь файл) */
  --gold-2: #8ab4ff;
  --gold-soft: rgba(167, 139, 250, .16);
  --violet: #7b61ff;
  --violet-soft: rgba(123, 97, 255, .18);
  --blue: #8ab4ff;
  --peach: #f3b48c;
  /* С236 (Михаил: «скатываемся в сплошной фиолетовый… разбавь аккуратно, только немного»): второй акцент —
     золото подсказок главной. Только МЕЛКИЕ детали: звёздочки бегущей строки, точки шагов, галочки,
     плашка тарифа, цена в призыве, статус, +/− вопросов, крошки, врезки статей. Ссылки, кнопки,
     заголовки и номера разделов — фиолетовые (цвет бренда). */
  --amber: #f2c97a;
  --amber-soft: rgba(242, 201, 122, .12);
  --grad: linear-gradient(100deg, #8ab4ff 0%, #a78bfa 45%, #f3b48c 100%);
  --glass: rgba(255, 255, 255, .035);
  --glass-2: rgba(255, 255, 255, .06);
  --radius: 22px;
  --sans: "Manrope Variable", "Manrope Fallback", "Manrope", -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);

  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  min-height: 100vh;
  overflow-x: clip;
  position: relative;
}
.v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; }
.v2 a { color: inherit; text-decoration: none; }
.v2 ::selection { background: var(--gold); color: #140f08; }

/* ── Фон: два медленных свечения, сетка и зерно. Фиксирован — секции плывут поверх ───────── */
.v2-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.v2-bg::before, .v2-bg::after {
  /* С232: без filter: blur(90px) — на iPhone огромные размытые слои рисовались секундами; мягкость
     даёт сам градиент с промежуточными точками */
  content: ""; position: absolute; border-radius: 50%; opacity: .55;
  animation: v2-drift 26s var(--ease) infinite alternate;
}
.v2-bg::before {
  width: 60vw; height: 60vw; left: -18vw; top: -24vw;
  background: radial-gradient(circle, rgba(233, 168, 90, .4) 0%, rgba(233, 168, 90, .22) 28%, rgba(233, 168, 90, .08) 50%, rgba(233, 168, 90, 0) 70%);
}
.v2-bg::after {
  width: 70vw; height: 70vw; right: -24vw; bottom: -30vw;
  background: radial-gradient(circle, rgba(123, 97, 255, .42) 0%, rgba(123, 97, 255, .24) 28%, rgba(123, 97, 255, .08) 50%, rgba(123, 97, 255, 0) 70%);
  animation-delay: -13s;
}
.v2-grid {
  position: absolute; inset: 0; opacity: .35;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
}
/* С232 (Михаил: «на телефоне 3-5 секунд чёрный экран»): зерно было SVG-фильтром feTurbulence на
   слое вдвое больше экрана с режимом наложения — Safari на iPhone рисовал его секундами (журнал
   сервера: 5 с тишины между страницей и следующими запросами). Теперь — готовая плитка шума 5 КБ. */
.v2-grain {
  position: absolute; inset: 0; opacity: .05;
  background: url("/v2-noise.png") repeat; background-size: 96px 96px;
}
@keyframes v2-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(6vw, 4vw, 0) scale(1.12); }
}
.v2-main { position: relative; z-index: 1; }

/* ── Типографика ────────────────────────────────────────────────────────────────────── */
.v2 h1, .v2 h2, .v2 h3 { margin: 0; font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
.v2 h1, .v2 .v2-h1 { font-size: clamp(44px, 6.4vw, 92px); }
/* С233 (SEO): крупный слоган — <p class="v2-h1"> (H1 стал строкой-подписью с ключами) */
.v2 .v2-h1 { margin: 0; font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
.v2 h1.v2-eyebrow { font-size: 12px; font-weight: 400; letter-spacing: .14em; line-height: 1.5; }
/* С234: заголовок страницы стоит внутри строки-подписи (номер раздела рядом, но уже вне H1) */
.v2 .v2-eyebrow-h1 h1 { font: inherit; letter-spacing: inherit; line-height: 1.5; margin: 0; text-transform: inherit; color: inherit; }
.v2 h2 { font-size: clamp(34px, 4.6vw, 64px); }
.v2 h3 { font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.02em; line-height: 1.15; }
.v2 p { margin: 0; }
/* Акцентное слово — не чужой курсив с засечками (Михаил: «слишком похоже на тот сайт»), а свой
   приём от самой программы: тонкая золотая обводка со свечением, как неоновый таймер на планшете. */
.v2-it {
  font-family: var(--sans); font-style: normal; font-weight: 700; letter-spacing: inherit;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .04em;
}
.v2-lead { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: var(--fg-dim); max-width: 56ch; }
.v2-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.v2-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--line-2); }
.v2-eyebrow b { color: var(--gold); font-weight: 400; }
.v2-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }

/* ── Кнопки ─────────────────────────────────────────────────────────────────────────── */
.v2-btn {
  --mx: 0px; --my: 0px;
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 15px 24px; border-radius: 999px; font-size: 15px; font-weight: 600;
  border: 1px solid var(--line-2); background: var(--glass); color: var(--fg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translate(var(--mx), var(--my));
  transition: transform .35s var(--ease), background .3s, border-color .3s, box-shadow .3s;
  cursor: pointer; font-family: inherit;
}
.v2-btn:hover { background: var(--glass-2); border-color: rgba(255, 255, 255, .24); }
/* `.v2 a { color: inherit }` весит больше одного класса и красил текст золотой кнопки в белый —
   поэтому селектор с той же «тяжестью» */
.v2 .v2-btn-gold, .v2 a.v2-btn-gold {
  background: linear-gradient(135deg, #8ab4ff, #a78bfa 55%, #c4a8ff);
  color: #0d1017; border-color: transparent; font-weight: 700;
  box-shadow: 0 10px 34px rgba(138, 180, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.v2-btn-gold:hover { background: linear-gradient(135deg, #9dc1ff, #b49dff 55%, #d2bbff); box-shadow: 0 14px 44px rgba(138, 180, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
.v2-btn .v2-arrow { transition: transform .35s var(--ease); }
.v2-btn:hover .v2-arrow { transform: translate(3px, -3px); }

/* ── Стекло ─────────────────────────────────────────────────────────────────────────── */
.v2-glass {
  position: relative; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 40%, rgba(255, 255, 255, .012));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .35);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
}
/* световая кромка по периметру — тонкий градиент, заметный на тёмном */
.v2-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(196, 168, 255, .35), rgba(255, 255, 255, .04) 35%, rgba(123, 97, 255, .28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55; transition: opacity .4s;
}
.v2-glass:hover::before { opacity: 1; }

/* ── Меню-таблетка ──────────────────────────────────────────────────────────────────── */
.v2-nav-wrap { position: fixed; top: 18px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.v2-nav {
  pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 9px 9px 9px 22px;
  border-radius: 999px; border: 1px solid rgba(167, 139, 250, .28);
  /* светлее фона и с вертикальным градиентом — шапка читается отдельным предметом, а не сливается */
  background: linear-gradient(180deg, rgba(44, 40, 48, .82), rgba(20, 18, 24, .86));
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(220, 205, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .3);
  transition: background .4s, box-shadow .4s, transform .5s var(--ease);
}
.v2-nav.scrolled { background: linear-gradient(180deg, rgba(40, 36, 44, .92), rgba(16, 14, 20, .94)); }
.v2-nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; margin-right: 22px; }
.v2-nav-logo svg { width: 32px; height: 32px; margin: -6px 0; filter: drop-shadow(0 0 10px rgba(138, 180, 255, .45)); transition: transform .5s var(--ease); }
.v2-nav-logo:hover svg { transform: rotate(180deg); }
/* подпись — фирменный перелив синий → фиолетовый → персик, как на прежней шапке */
.v2-logo-text { background: linear-gradient(100deg, #8ab4ff 0%, #b89bff 25%, #ffb066 50%, #b89bff 75%, #8ab4ff 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: v2-shimmer 6s ease-in-out infinite; letter-spacing: -.02em; }
@keyframes v2-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.v2-nav-links { display: flex; gap: 6px; }
.v2-nav-links a { padding: 10px 14px; border-radius: 999px; font-size: 14.5px; color: var(--fg); transition: color .25s, background .25s; }
.v2-nav-links a:hover { color: var(--fg); background: rgba(255, 255, 255, .05); }
.v2-nav .v2-btn { padding: 12px 22px; font-size: 14.5px; margin-left: 12px; }
.v2-nav-lang { display: inline-flex; gap: 2px; padding: 3px; margin-left: 10px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); flex-shrink: 0; }
.v2-nav-lang b, .v2-nav-lang a { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; line-height: 1; padding: 8px 10px; border-radius: 999px; color: var(--fg-mute); transition: color .25s, background .25s; }
.v2-nav-lang a:hover { color: var(--fg); background: rgba(255, 255, 255, .06); }
/* С235: пилюля языка шире прежней надписи «EN» — на 981–1180px русские пункты переносились в две строки */
.v2-nav-links a { white-space: nowrap; }
@media (max-width: 1500px) {   /* С236: было 1180px — с новым пунктом меню сжимаем раньше */
  .v2-nav-links { gap: 0; }
  .v2-nav-links a { padding: 10px 9px; }
  .v2-nav-logo { margin-right: 10px; }
  .v2-nav .v2-btn { padding: 12px 16px; margin-left: 8px; }
}
.v2-nav-lang b { background: rgba(255, 255, 255, .1); color: var(--fg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.v2-nav-burger { display: none; }
/* С236: с пунктом «Разработка под заказ» полная шапка на 981–1180px не влезала (кнопка уезжала за край) —
   меню-бургер теперь до 1260px (было до 980px); пороги замерены по краю кнопки на 390–1920px */
@media (max-width: 1260px) {
  .v2-nav-links, .v2-nav-lang { display: none; }
  .v2-nav { max-width: 100%; }
  .v2-nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 46px; height: 46px; margin-right: 3px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--line-2); background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  .v2-nav-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--fg); transition: transform .25s var(--ease), opacity .2s; }
  .v2-nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .v2-nav-burger.open span:nth-child(2) { opacity: 0; }
  .v2-nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .v2-nav-mobile {
    /* С232 (Михаил): зазор под шапкой (шапка ≈ 18 + 62 px) */
    position: fixed; inset: 92px 16px auto 16px; z-index: 49; padding: 12px; border-radius: 22px;
    max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain;
    /* С232 (Михаил: «меню перестало быть прозрачным»): матовое стекло — сайт под ним виден
       размытым, но текст пунктов читается (сплошная заливка .96 делала его глухим) */
    background: linear-gradient(180deg, rgba(40, 36, 46, .5), rgba(18, 16, 22, .58));
    backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
    display: flex; flex-direction: column; gap: 2px;
  }
  .v2-nav-mobile a { padding: 13px 14px; border-radius: 14px; font-size: 16px; color: var(--fg-dim); }
}

/* ── Секции ─────────────────────────────────────────────────────────────────────────── */
.v2-wrap { width: min(1240px, 100% - 48px); margin: 0 auto; }
.v2-section { padding: clamp(90px, 12vw, 170px) 0; position: relative; }
.v2-head { display: grid; gap: 22px; margin-bottom: clamp(44px, 6vw, 80px); max-width: 860px; }

/* ── Появление: из размытия и снизу. Заголовки — по словам ─────────────────────────────── */
.v2-reveal { opacity: 0; filter: blur(14px); transform: translateY(26px); transition: opacity 1s var(--ease), filter 1s var(--ease), transform 1s var(--ease); }
.v2-reveal.in { opacity: 1; filter: none; transform: none; }
/* С232 (Михаил): лёгкий объём у крупных заголовков — буквы светлее сверху и темнее снизу, тонкий
   блик по верхней кромке и мягкая тень «над фоном». Без выдавленных боков: 3D-экструзия спорит со
   стеклом. Тени — filter: drop-shadow (text-shadow сквозь прозрачную заливку просвечивает).
   Набор функций в filter одинаковый в обоих состояниях, иначе переход из размытия прыгает. */
.v2-words .w {
  display: inline-block; opacity: 0; transform: translateY(.35em);
  /* заливка буквы вертикальным градиентом; поля — чтобы хвосты «у», «д» не выпадали из заливки */
  padding: .06em .02em .14em; margin: -.06em -.02em -.14em;
  background: linear-gradient(180deg, #ffffff 0%, #f4f0ea 48%, #bdb5ab 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: blur(12px);
  transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease);
}
.v2-words .w.v2-it {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .2) 100%),
    var(--grad);
  -webkit-background-clip: text; background-clip: text;
}
.v2-words.in .w {
  opacity: 1; transform: none;
  filter: none;
}
/* С232: тени объёма — на заголовке целиком (один слой), а не по три на каждое слово */
.v2-words.in { filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, .22)) drop-shadow(0 3px 2px rgba(0, 0, 0, .35)) drop-shadow(0 14px 26px rgba(0, 0, 0, .42)); }

/* ── Первый экран ───────────────────────────────────────────────────────────────────── */
.v2-hero { min-height: 100vh; display: grid; align-items: center; padding: 130px 0 60px; }
.v2-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.v2-hero-text { display: grid; gap: 28px; }
.v2-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.v2-stats { display: flex; gap: clamp(22px, 3.4vw, 48px); margin-top: 10px; flex-wrap: wrap; }
.v2-stat b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.v2-stat span { font-size: 12.5px; color: var(--fg-mute); }
.v2-scrollhint { display: flex; align-items: center; gap: 14px; margin-top: 46px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); }
.v2-scrollhint i { width: 46px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); animation: v2-hint 2.4s var(--ease) infinite; transform-origin: left; }
@keyframes v2-hint { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

.v2-orb-stage { position: relative; aspect-ratio: 4 / 5; width: min(480px, 100%); justify-self: center; }
.v2-orb-halo { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(242, 201, 122, .28), rgba(123, 97, 255, .16) 50%, transparent 72%); filter: blur(34px); animation: v2-breathe 7s ease-in-out infinite; }
@keyframes v2-breathe { 50% { transform: scale(1.08); opacity: .8; } }
.v2-loop-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px 9px 9px;
  border-radius: 14px; font-size: 13px; color: var(--fg); white-space: nowrap;
  animation: v2-float 8s ease-in-out infinite;
}
.v2-chip small { font-family: var(--mono); font-size: 10.5px; color: var(--fg-mute); padding: 4px 6px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.v2-chip .v2-dot { width: 5px; height: 5px; }
@keyframes v2-float { 50% { transform: translate(-50%, calc(-50% - 10px)); } }

/* ── Бегущая строка ─────────────────────────────────────────────────────────────────── */
.v2-marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.v2-marquee-track { display: flex; gap: 42px; width: max-content; animation: v2-marq 42s linear infinite; }
.v2-marquee-track span { font-size: clamp(20px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.02em; color: var(--fg-mute); display: inline-flex; align-items: center; gap: 42px; }
.v2-marquee-track span:nth-child(3n+2) { color: var(--fg); }
.v2-marquee-track span::after { content: "✦"; font-size: .55em; color: var(--amber); }
@keyframes v2-marq { to { transform: translateX(-50%); } }

/* ── Схема системы: «восьмёрка» с узлами ────────────────────────────────────────────── */
.v2-eco { position: relative; padding: 0; aspect-ratio: 1000 / 640; overflow: visible; }
.v2-eco-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2-eco-halo { fill: none; stroke: rgba(167, 139, 250, .35); stroke-width: 26; }
.v2-eco-loop { fill: none; stroke: url(#v2-eco-grad); stroke-width: 2.5; opacity: .75; }
.v2-eco-pulse { fill: none; stroke: #eef0ff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 26 1400; animation: v2-pulse 7s linear infinite; filter: drop-shadow(0 0 8px rgba(196, 168, 255, .9)); }
.v2-eco-pulse-2 { animation-delay: -3.5s; stroke: #c9b6ff; }
@keyframes v2-pulse { to { stroke-dashoffset: -1426; } }
.v2-eco-anchor-halo { fill: rgba(167, 139, 250, .0); transition: fill .4s; }
.v2-eco-anchor-dot { fill: #a78bfa; stroke: #1b1208; stroke-width: 3; }
.v2-eco-anchor.on .v2-eco-anchor-halo { fill: rgba(167, 139, 250, .18); }
.v2-eco-core-ring { fill: rgba(9, 8, 12, .85); stroke: rgba(167, 139, 250, .5); stroke-width: 1.5; }
.v2-eco-core-dot { fill: url(#v2-eco-grad); }
.v2-eco-corelabel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 56px); text-align: center; font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.v2-eco-corelabel small { display: block; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .12em; color: var(--fg-mute); text-transform: uppercase; margin-top: 2px; }
.v2-node {
  position: absolute; width: 240px; padding: 16px 16px 14px; cursor: default;
  transform: translate(calc(var(--side) * 50% + var(--side) * 30px - 50%), calc(var(--vside) * 50% + var(--vside) * 30px - 50%));
  transition: transform .45s var(--ease), background .4s;
}
.v2-node.on { background: linear-gradient(160deg, rgba(167, 139, 250, .14), rgba(255, 255, 255, .03)); }
.v2-node small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--fg-mute); text-transform: uppercase; }
.v2-node h3 { font-size: 17px; margin: 8px 0 6px; }
.v2-node p { font-size: 12.5px; line-height: 1.5; color: var(--fg-dim); }
@media (max-width: 1100px) { .v2-node { width: 200px; padding: 13px; } .v2-node p { display: none; } }
@media (max-width: 760px) {
  .v2-eco { aspect-ratio: auto; display: grid; gap: 12px; padding: 16px; }
  .v2-eco-svg, .v2-eco-corelabel { display: none; }
  .v2-node { position: static; width: auto; transform: none; }
  .v2-node p { display: block; }
}

/* ── Нумерованный список возможностей ───────────────────────────────────────────────── */
.v2-list { border-top: 1px solid var(--line); }
.v2-row { display: grid; grid-template-columns: 90px 1fr 1.2fr; gap: 24px; padding: 34px 6px; border-bottom: 1px solid var(--line); align-items: baseline; transition: background .4s; position: relative; }
.v2-row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: linear-gradient(90deg, var(--gold), transparent); transition: width .8s var(--ease); }
.v2-row:hover::after { width: 100%; }
.v2-row:hover { background: linear-gradient(90deg, rgba(167, 139, 250, .04), transparent 60%); }
.v2-row-num { font-family: var(--mono); font-size: 28px; color: var(--gold); line-height: 1; letter-spacing: .04em; }
.v2-row h3 { font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -.03em; }
.v2-row h3 small { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--fg-mute); margin-top: 8px; }
.v2-row p { color: var(--fg-dim); font-size: 15px; line-height: 1.6; }
.v2-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.v2-tags span { font-size: 11.5px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-dim); }
@media (max-width: 800px) { .v2-row { grid-template-columns: 56px 1fr; } .v2-row > div:last-child { grid-column: 2; } }

/* ── До / после: обе стороны лежат друг на друге строка в строку; ползунок открывает правую,
   и каждая строка на глазах превращается из ✕ в ✓ ───────────────────────────────────────── */
.v2-ba { position: relative; overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize; }
.v2-ba-side { padding: clamp(24px, 3.4vw, 44px); display: grid; align-content: start; gap: 12px; }
.v2-ba-before { position: relative; background: linear-gradient(160deg, rgba(20, 18, 24, .6), rgba(12, 11, 15, .8)); }
/* С232: плотная подложка под подкраской — полупрозрачная пропускала левый текст, и на телефоне
   строки двух сторон налезали друг на друга */
.v2-ba-after { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(167, 139, 250, .12), rgba(123, 97, 255, .1)), #141219; clip-path: inset(0 0 0 var(--split, 50%)); }
.v2-ba-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 8px; }
.v2-ba-after .v2-ba-label { color: var(--gold); text-align: right; }
.v2-ba-item { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 14px; font-size: 15px; border: 1px solid var(--line); }
.v2-ba-before .v2-ba-item { color: var(--fg-mute); background: rgba(255, 255, 255, .02); }
.v2-ba-before .v2-ba-item::before { content: "✕"; font-size: 12px; color: #b86a6a; }
.v2-ba-after .v2-ba-item { background: rgba(255, 255, 255, .06); border-color: rgba(167, 139, 250, .26); color: var(--fg); flex-direction: row-reverse; text-align: right; }
.v2-ba-after .v2-ba-item::before { content: "✓"; font-size: 13px; color: var(--gold); }
.v2-ba-handle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; background: linear-gradient(var(--gold), rgba(167, 139, 250, .25)); transform: translateX(-1px); box-shadow: 0 0 18px rgba(167, 139, 250, .5); }
/* зона захвата пальцем шире самой полоски; пока тянем — страница не прокручивается */
.v2-ba-handle { touch-action: none; }
.v2-ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -24px; right: -24px; }
.v2-ba-knob { touch-action: none;  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; color: #1b1208; font-size: 14px; background: linear-gradient(135deg, #8ab4ff, var(--gold-2)); box-shadow: 0 0 0 6px rgba(167, 139, 250, .15), 0 10px 30px rgba(0, 0, 0, .4); }
.v2-ba-hint { margin-top: 16px; font-size: 13px; color: var(--fg-mute); }

/* ── Калькулятор ────────────────────────────────────────────────────────────────────── */
.v2-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.v2-calc-in, .v2-calc-out { padding: clamp(22px, 3vw, 38px); }
.v2-range { display: grid; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.v2-range:last-of-type { border-bottom: 0; }
.v2-range-top { display: flex; justify-content: space-between; font-size: 14px; color: var(--fg-dim); }
.v2-range-top b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.v2 input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
.v2 input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold) var(--p, 50%), rgba(255, 255, 255, .1) var(--p, 50%)); }
.v2 input[type=range]::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.v2 input[type=range]::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--gold); }
.v2 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7.5px; border-radius: 50%; background: #dcd0ff; box-shadow: 0 0 0 5px rgba(167, 139, 250, .2), 0 0 18px rgba(167, 139, 250, .6); }
.v2 input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #dcd0ff; box-shadow: 0 0 0 5px rgba(167, 139, 250, .2), 0 0 18px rgba(167, 139, 250, .6); }
.v2-calc-note { font-size: 12px; color: var(--fg-mute); line-height: 1.5; margin-top: 14px; }
.v2-calc-out { display: grid; gap: 20px; align-content: start; background: linear-gradient(160deg, rgba(123, 97, 255, .12), rgba(255, 255, 255, .02) 55%); }
.v2-big { font-size: clamp(46px, 5.6vw, 76px); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.v2-big-cap { font-size: 13px; color: var(--fg-mute); margin-top: 8px; }
.v2-gauge { display: flex; align-items: center; gap: 18px; }
.v2-gauge svg { width: 132px; height: 132px; transform: rotate(-90deg); flex-shrink: 0; }
.v2-gauge-track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 12; }
.v2-gauge-fill { fill: none; stroke: url(#v2-gauge-grad); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease); filter: drop-shadow(0 0 10px rgba(167, 139, 250, .5)); }
.v2-gauge-label b { display: block; font-size: 30px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.v2-gauge-label span { font-size: 12.5px; color: var(--fg-mute); }
.v2-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v2-kpi { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.v2-kpi b { display: block; font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.v2-kpi span { font-size: 12px; color: var(--fg-mute); }
@media (max-width: 900px) { .v2-calc { grid-template-columns: 1fr; } }

/* ── Этапы: карточки на общем «рельсе» ──────────────────────────────────────────────── */
.v2-rail { position: relative; height: 2px; margin: 0 8% 38px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
.v2-rail i { position: absolute; top: -3px; left: 0; width: 60px; height: 8px; border-radius: 8px; background: linear-gradient(90deg, transparent, var(--amber)); box-shadow: 0 0 14px var(--amber); animation: v2-rail 6s var(--ease) infinite; }
@keyframes v2-rail { to { left: calc(100% - 60px); } }
.v2-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.v2-step { position: relative; padding: 22px 20px 24px; min-height: 250px; display: grid; align-content: space-between; transition: transform .5s var(--ease); }
.v2-step-pin { position: absolute; top: -46px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(242, 201, 122, .18), 0 0 14px var(--amber); transform: translateX(-50%); }
.v2-step-pin::after { content: ""; position: absolute; left: 50%; top: 10px; width: 1px; height: 32px; background: linear-gradient(var(--amber), transparent); }
.v2-step:hover { transform: translateY(-6px); }
.v2-step-num { font-family: var(--mono); font-size: 34px; color: var(--gold); line-height: 1; letter-spacing: .04em; }
.v2-step small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); margin-top: 6px; }
.v2-step h3 { font-size: 18px; margin-bottom: 8px; }
.v2-step p { font-size: 13px; line-height: 1.55; color: var(--fg-dim); }
@media (max-width: 1000px) { .v2-steps { grid-template-columns: 1fr 1fr; } .v2-rail, .v2-step-pin { display: none; } }
@media (max-width: 560px) { .v2-steps { grid-template-columns: 1fr; } .v2-step { min-height: 0; gap: 20px; } }

/* ── Манифест: текст проявляется по словам при прокрутке ───────────────────────────── */
.v2-manifest-title { font-size: clamp(52px, 8.4vw, 128px); letter-spacing: -.05em; line-height: .95; }
.v2-manifest-title .v2-it { display: block; padding-left: 1.2em; }
.v2-manifest-title .v2-words .w.v2-it { padding-left: 1.2em; }   /* С232: поля объёма не должны съесть отступ */
.v2-manifest-text { font-size: clamp(22px, 2.6vw, 38px); line-height: 1.32; letter-spacing: -.02em; max-width: 26ch; margin: 60px 0 0 auto; font-weight: 500; }
.v2-manifest-text span { color: rgba(243, 240, 234, .16); transition: color .5s; }
.v2-manifest-text span.lit { color: var(--fg); }

/* ── Финальный призыв ───────────────────────────────────────────────────────────────── */
.v2-cta { padding: clamp(36px, 6vw, 80px); text-align: center; display: grid; justify-items: center; gap: 22px; overflow: hidden; }
.v2-cta::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; bottom: -320px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(167, 139, 250, .35), transparent 65%); filter: blur(30px); pointer-events: none; }
.v2-cta .v2-lead { margin: 0 auto; }
.v2-price { font-family: var(--mono); font-size: 13px; color: var(--fg-mute); letter-spacing: .06em; }
.v2-price b { color: var(--amber); font-weight: 400; }

/* ── Подвал ─────────────────────────────────────────────────────────────────────────── */
.v2-foot { border-top: 1px solid var(--line); padding: 44px 0 56px; color: var(--fg-mute); font-size: 13.5px; }
.v2-foot-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.v2-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.v2-foot a:hover { color: var(--fg); }

/* ── Меньше движения — по настройке системы ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v2 *, .v2 *::before, .v2 *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .v2-reveal { opacity: 1; filter: none; transform: none; }
  .v2-words .w { opacity: 1; transform: none; filter: none; }
}
@media (max-width: 900px) {
  .v2-hero-grid { grid-template-columns: 1fr; }
  .v2-orb-stage { width: min(260px, 66%); order: -1; margin: -10px auto 0; }
  .v2-chip { font-size: 12px; padding: 7px 10px 7px 7px; }
  .v2-hero { padding-top: 110px; }
}

/* ── Внутренние страницы (С231) ─────────────────────────────────────────────────────── */
.v2-page { padding-top: clamp(130px, 16vw, 190px); }
.v2-page-head { display: grid; gap: 22px; margin-bottom: clamp(48px, 7vw, 96px); max-width: 900px; }
.v2-link { color: var(--gold); border-bottom: 1px solid rgba(167, 139, 250, .4); }

/* возможности: чередующиеся ряды текст/картинка */
.v2-feats { display: grid; gap: clamp(60px, 8vw, 120px); }
.v2-feat { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.v2-feat.rev .v2-feat-text { order: 2; }
.v2-feat-text { display: grid; gap: 18px; }
.v2-feat-text h2 { font-size: clamp(28px, 3.2vw, 44px); }
.v2-feat-shot { padding: 8px; overflow: hidden; }
.v2-feat-shot img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - 8px); }
@media (max-width: 860px) { .v2-feat { grid-template-columns: 1fr; } .v2-feat.rev .v2-feat-text { order: 0; } }

/* вопросы-ответы */
.v2-faq { border-top: 1px solid var(--line); }
.v2-faq-item { border-bottom: 1px solid var(--line); }
.v2-faq-item button { width: 100%; display: grid; grid-template-columns: 64px 1fr 28px; gap: 18px; align-items: center; padding: 24px 6px; background: none; border: 0; color: var(--fg); text-align: left; font: inherit; font-size: clamp(17px, 1.6vw, 22px); font-weight: 600; letter-spacing: -.02em; cursor: pointer; }
.v2-faq-item button .v2-row-num { font-size: 28px; }
.v2-faq-item button i { font-style: normal; font-size: 22px; color: var(--amber); text-align: center; }
.v2-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.v2-faq-a p { overflow: hidden; color: var(--fg-dim); line-height: 1.6; font-size: 16px; padding: 0 0 0 82px; }
.v2-faq-item.open .v2-faq-a { grid-template-rows: 1fr; }
.v2-faq-item.open .v2-faq-a p { padding-bottom: 26px; }
@media (max-width: 700px) { .v2-faq-item button { grid-template-columns: 44px 1fr 24px; } .v2-faq-a p { padding-left: 0; } }

/* тарифы */
.v2-plans { display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px; align-items: start; }
.v2-plan { padding: clamp(24px, 3vw, 40px); display: grid; gap: 18px; }
.v2-plan-main { background: linear-gradient(160deg, rgba(167, 139, 250, .1), rgba(123, 97, 255, .08) 60%, rgba(255, 255, 255, .02)); }
.v2-plan-badge { justify-self: start; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-dim); }
.v2-plan-badge-gold { border-color: rgba(242, 201, 122, .5); color: var(--amber); }
.v2-plan h2 { font-size: clamp(26px, 2.6vw, 36px); }
.v2-plan-price { font-size: clamp(40px, 4.4vw, 60px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.v2-plan-price small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--fg-mute); margin-left: 10px; }
.v2-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v2-plan li, .v2-checks li { position: relative; padding-left: 26px; color: var(--fg-dim); line-height: 1.5; font-size: 15px; }
.v2-plan li::before, .v2-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--amber); }
.v2-plan .v2-btn { justify-self: start; }
.v2-plan-note { font-size: 12.5px; color: var(--fg-mute); }
@media (max-width: 860px) { .v2-plans { grid-template-columns: 1fr; } }
.v2-mods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
/* карточки модулей — крупные, картинка во всю ширину сверху (Михаил: «мелковаты») */
.v2-mod { overflow: hidden; display: grid; transition: transform .5s var(--ease); }
.v2-mod:hover { transform: translateY(-6px); }
.v2-mod-img { aspect-ratio: 3 / 2; overflow: hidden; }
.v2-mod-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.v2-mod:hover .v2-mod-img img { transform: scale(1.04); }
.v2-mod-body { padding: 26px 30px 30px; display: grid; gap: 10px; align-content: start; }
.v2-mod-body h3 { font-size: clamp(22px, 2.2vw, 28px); }
.v2-mod-body p { color: var(--fg-dim); font-size: 16px; line-height: 1.6; }
@media (max-width: 860px) { .v2-mods { grid-template-columns: 1fr; } }

/* в разработке */
.v2-road { display: grid; gap: 18px; }
.v2-road-item { padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 16px; }
.v2-road-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.v2-road-status .v2-dot { background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.v2-road-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.v2-road-item h2 { font-size: clamp(30px, 3.4vw, 48px); }
.v2-road-tag { font-size: clamp(18px, 1.8vw, 24px); color: var(--gold); font-weight: 500; letter-spacing: -.01em; }
.v2-checks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .v2-checks { grid-template-columns: 1fr; } }
.v2-road-cta { margin-top: 40px; display: flex; justify-content: center; }

/* о нас */
.v2-kpis-3 { grid-template-columns: repeat(3, 1fr); }
.v2-kpis-3 .v2-kpi { padding: 26px 24px; }
.v2-kpis-3 .v2-kpi b { font-size: clamp(36px, 4vw, 56px); font-weight: 300; }
@media (max-width: 700px) { .v2-kpis-3 { grid-template-columns: 1fr; } }
.v2-story { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; }
.v2-story-text { display: grid; gap: 22px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; color: var(--fg-dim); }
.v2-story-text p:first-child { color: var(--fg); }
@media (max-width: 860px) { .v2-story { grid-template-columns: 1fr; } }
.v2-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v2-values .v2-step-num { font-family: inherit; font-style: normal; font-size: 32px; }
@media (max-width: 800px) { .v2-values { grid-template-columns: 1fr; } }
/* С250: «Контакты» — 4 направления в две колонки; цена модуля на «Тарифах»; страница «Программы» */
.v2-values.v2-values-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 800px) { .v2-values.v2-values-2 { grid-template-columns: 1fr; } }
.v2-mod-price { font-family: var(--mono); font-size: 14px !important; letter-spacing: .04em; color: var(--gold) !important; }
.v2-prog-list a.v2-prog-all, .v2-prog-all { display: block; grid-template-columns: none; margin: 6px 4px 2px; padding: 14px 12px;   /* С250 (аудит): область нажатия ~44px */ border-top: 1px solid var(--line); font-size: 14px; color: var(--fg-dim); text-decoration: none; }
.v2-prog-all:hover { color: var(--fg); }
.v2-progs { display: grid; gap: 18px; }
.v2-progs-item { padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 14px; }
.v2-progs-item h2 { font-size: clamp(26px, 3vw, 40px); }
.v2-progs-price { font-family: var(--mono); font-size: 14px; color: var(--gold); }

/* контакты */
.v2-contacts { display: grid; grid-template-columns: 1fr 1.3fr; gap: 18px; align-items: start; }
.v2-contact-info { padding: clamp(24px, 3vw, 36px); display: grid; gap: 22px; }
.v2-ci { display: grid; gap: 6px; font-size: 17px; }
.v2-ci small { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); }
.v2-ci a { color: var(--gold); }
.v2-ci-hours span { font-size: 14px; color: var(--fg-dim); line-height: 1.5; }
.v2-contact-form { padding: clamp(24px, 3vw, 36px); }
.v2-form { display: grid; gap: 16px; }
.v2-form label { display: grid; gap: 8px; font-size: 13px; color: var(--fg-mute); }
.v2-form input, .v2-form textarea { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--fg); font: inherit; font-size: 15px; outline: none; transition: border-color .25s, box-shadow .25s; resize: vertical; }
.v2-form input:focus, .v2-form textarea:focus { border-color: rgba(167, 139, 250, .6); box-shadow: 0 0 0 4px rgba(167, 139, 250, .12); }
.v2-consent { display: flex !important; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.v2-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); }
.v2-consent a { color: var(--gold); }
.v2-form .v2-btn { justify-self: start; }
.v2-form .v2-btn:disabled { opacity: .55; cursor: not-allowed; }
.v2-form-err { color: #ff9fac; font-size: 14px; }
.v2-form-done { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 30px 0; }
@media (max-width: 860px) { .v2-contacts { grid-template-columns: 1fr; } }

/* блог */
.v2-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v2-post { overflow: hidden; transition: transform .5s var(--ease); }
.v2-post:hover { transform: translateY(-6px); }
.v2-post-link { display: grid; height: 100%; }
.v2-post-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.v2-post-body { padding: 20px 22px 24px; display: grid; gap: 12px; align-content: start; }
.v2-post-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v2-post-meta small { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); letter-spacing: .06em; }
.v2-post-meta .v2-tags { margin: 0; }
.v2-post h2, .v2-post h3 { font-size: 19px; }
.v2-post p { color: var(--fg-dim); font-size: 14px; line-height: 1.55; }
.v2-post-more { color: var(--gold); font-size: 14px; font-weight: 600; }
@media (max-width: 960px) { .v2-posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .v2-posts { grid-template-columns: 1fr; } }
/* С232: колонка minmax(0,1fr) — без неё сетка раздувалась под широкую таблицу в тексте, и на
   телефоне вся статья уезжала за правый край (таблица должна листаться внутри своей обёртки) */
.v2-article-wrap { max-width: 860px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: clamp(60px, 8vw, 110px); }
.v2-article h1 { font-size: clamp(34px, 4.4vw, 60px); }
.v2-crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-mute); }
.v2-crumbs b { color: var(--amber); font-weight: 400; }
.v2-article-hero { margin: 8px 0 0; padding: 8px; overflow: hidden; }
.v2-article-hero img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - 8px); }
.v2-article-hero figcaption { font-size: 11.5px; color: var(--fg-mute); padding: 10px 6px 2px; }
.v2-prose { font-size: 17px; line-height: 1.7; color: var(--fg-dim); }
.v2-prose h2, .v2-prose h3 { color: var(--fg); margin: 1.6em 0 .6em; }
.v2-prose h2 { font-size: clamp(24px, 2.4vw, 32px); }
.v2-prose p { margin: 0 0 1.1em; }
.v2-prose a { color: var(--gold); }
.v2-prose .prose-lead { font-size: 1.15em; color: var(--fg); }
.v2-prose .prose-callout { border: 1px solid rgba(167, 139, 250, .3); background: rgba(167, 139, 250, .06); border-radius: 16px; padding: 18px 22px; margin: 1.4em 0; }
.v2-prose .prose-callout-title { color: var(--amber); font-weight: 600; margin-bottom: 6px; }
.v2-prose .prose-table-wrap { overflow-x: auto; margin: 1.4em 0; }
.v2-prose .prose-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.v2-prose .prose-table th, .v2-prose .prose-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.v2-prose .prose-table th { color: var(--fg); font-weight: 600; }
.v2-prose img { max-width: 100%; border-radius: 14px; }
/* С234: раздел про учёт (CRM) и карточка автора статьи */
.v2-crm { display: grid; gap: 18px; max-width: 78ch; }
.v2-author { padding: 24px 26px; display: grid; gap: 8px; margin-top: 28px; }
.v2-author-name { font-size: 19px; font-weight: 700; }
.v2-author-name a { color: var(--fg); text-decoration: none; }
.v2-author-name a:hover { color: var(--gold); }
.v2-author-role { font-size: 13px; color: var(--amber); }
.v2-author-bio { font-size: 15px; line-height: 1.6; color: var(--fg-dim); }
.v2-more-title { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 22px; }
/* С235 (Михаил: «надпись „Из блога“ прижата к постам»): после С234 (h3→h2) общее `.v2 h2 { margin: 0 }`
   перебивало отступ этого класса по специфичности. Размер оставлен крупным, как сейчас на бою. */
.v2 .v2-more-title { margin-bottom: clamp(28px, 3.2vw, 48px); }

/* ── Витрина приложения (С231, вместо лежачей восьмёрки — Михаил: «покажем саму программу») ── */
.v2-show-stage { perspective: 1600px; }
.v2-show { position: relative; transform-origin: 50% 100%; transition: transform .15s linear, opacity .15s linear; will-change: transform; }
.v2-show-glow { position: absolute; inset: -6% -4% -10%; border-radius: 40px; background: radial-gradient(60% 50% at 30% 20%, rgba(167, 139, 250, .35), transparent 70%), radial-gradient(50% 50% at 80% 90%, rgba(123, 97, 255, .4), transparent 70%); filter: blur(40px); pointer-events: none; }
.v2-show-frame { position: relative; padding: 10px; border-radius: 26px; overflow: visible; }
.v2-show-frame img { display: block; width: 100%; height: auto; border-radius: 18px; }
.v2-show-sweep { position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; border-radius: 18px; overflow: hidden; pointer-events: none; }
.v2-show-sweep::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -40%; background: linear-gradient(100deg, transparent, rgba(220, 205, 255, .16) 45%, rgba(255, 255, 255, .22) 50%, rgba(220, 205, 255, .16) 55%, transparent); transform: skewX(-12deg); animation: v2-sweep 7s var(--ease) infinite; }
@keyframes v2-sweep { 0% { left: -40%; } 55% { left: 120%; } 100% { left: 120%; } }
.v2-callout { position: absolute; z-index: 2; width: 0; height: 0; }
/* пины и заголовки плашек — золотые (Михаил: фиолетовые на скриншоте программы не видно) */
.v2-callout-pin { position: absolute; left: 0; top: 0; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: #f2c97a; box-shadow: 0 0 0 4px rgba(242, 201, 122, .3), 0 0 18px #f2c97a; }
.v2-callout-pin i { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(242, 201, 122, .7); animation: v2-ring 2.4s ease-out infinite; }
.v2-callout-card { position: absolute; width: 240px; padding: 12px 14px; border-radius: 14px; opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease), background .3s;
  background: linear-gradient(160deg, rgba(34, 28, 22, .96), rgba(14, 12, 18, .96)); border: 1px solid rgba(242, 201, 122, .6);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 236, 196, .25); backdrop-filter: none; -webkit-backdrop-filter: none; }
.v2-callout-card::before { display: none; }
.v2-reveal.in .v2-callout-card { opacity: 1; transform: none; }
.v2-callout-card b { display: block; font-size: 14px; margin-bottom: 4px; color: #f2c97a; }
.v2-callout-card p { font-size: 12.5px; line-height: 1.45; color: var(--fg-dim); }
.v2-callout.on .v2-callout-card { border-color: #f2c97a; box-shadow: 0 14px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(242, 201, 122, .4); }
.v2-callout-top .v2-callout-card { left: -120px; bottom: 22px; }
.v2-callout-bottom .v2-callout-card { left: -120px; top: 22px; }
.v2-callout-left .v2-callout-card { right: 22px; top: -20px; }
.v2-callout-topl .v2-callout-card { left: -16px; bottom: 22px; }
.v2-callout-bottoml .v2-callout-card { left: -16px; top: 22px; }   /* у левого края: плашка вправо-вверх, не за рамку */
.v2-callout-right .v2-callout-card { left: 22px; top: -20px; }
@media (max-width: 900px) {
  .v2-callout-card { display: none; }
  .v2-show-frame { padding: 6px; border-radius: 16px; }
}

/* С232 (бой, телефон): русская «Попробовать бесплатно» длиннее «Start free trial» — шапка выходила
   шире экрана, логотип обрезался, бургер уезжал за край. На узком экране кнопка уходит в меню. */
.v2-nav-mobile .v2-btn { justify-content: center; margin-top: 8px; }
.v2-post-meta { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 560px) {
  .v2-nav > .v2-btn { display: none; }
  .v2-nav { padding: 9px 9px 9px 18px; justify-content: space-between; width: 100%; }
  .v2-nav-logo { margin-right: 0; }
}
@media (min-width: 561px) { .v2-nav-mobile .v2-btn { display: none; } }

/* С232: запуск поверх пререндера — первый экран уже показан, переходы на эти кадры выключены */
html.v2-boot .v2-reveal, html.v2-boot .v2-words .w { transition: none !important; }

/* С232: телефоны — появление без размытия: фильтр blur на больших блоках со стеклом внутри тяжёл
   для мобильной графики, а на маленьком экране разницу почти не видно */
@media (hover: none) {
  .v2-reveal, .v2-words .w { filter: none !important; }
}
/* С232 (Михаил): под открытым меню сайт затемняется; тап по затемнению закрывает меню */
.v2-nav-scrim { position: fixed; inset: 0; z-index: 48; background: rgba(6, 5, 9, .5); touch-action: none; animation: v2-fade .25s ease; }
@keyframes v2-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── С232: мобильное меню — номера, разделители, стрелки; язык и кнопка отдельным низом ─────── */
.v2-nav-mobile { padding: 8px 14px 14px; gap: 0; }
.v2-mm-links { display: flex; flex-direction: column; }
.v2-nav-mobile .v2-mm-links a {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center;
  padding: 16px 6px; border-radius: 0; border-bottom: 1px solid var(--line);
  font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--fg);
  animation: v2-mm-in .45s var(--ease) both; animation-delay: calc(var(--i) * 35ms);
}
.v2-nav-mobile .v2-mm-links a:last-child { border-bottom: 0; }
.v2-mm-links small { font-family: var(--mono); font-size: 11.5px; color: var(--fg-mute); letter-spacing: .08em; }
.v2-mm-links i { font-style: normal; color: var(--fg-mute); font-size: 14px; transition: transform .3s var(--ease), color .3s; }
.v2-nav-mobile .v2-mm-links a:active i, .v2-nav-mobile .v2-mm-links a:hover i { transform: translate(3px, -3px); color: var(--fg); }
.v2-nav-mobile .v2-mm-links a.on small { color: var(--gold); }
.v2-nav-mobile .v2-mm-links a.on span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes v2-mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.v2-mm-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.v2-mm-lang { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); flex-shrink: 0; }
.v2-mm-lang b, .v2-nav-mobile .v2-mm-lang a {
  font-family: var(--mono); font-size: 12.5px; font-weight: 400; letter-spacing: .08em;
  /* С250 (аудит): 15px по вертикали — область нажатия ~44px (было ~33px) */
  padding: 16px 18px; border-radius: 999px; color: var(--fg-mute); line-height: 1;
}
.v2-mm-lang b { background: rgba(255, 255, 255, .1); color: var(--fg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
/* кнопка занимает остаток строки и не выталкивается за край (nowrap + min-width:auto распирали) */
.v2-nav-mobile .v2-mm-foot .v2-btn { flex: 1 1 0; min-width: 0; margin-top: 0; padding: 14px 12px; gap: 8px; font-size: 14.5px; justify-content: center; }
@media (min-width: 561px) { .v2-mm-foot { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .v2-nav-mobile .v2-mm-links a { animation: none; } }

/* ── С235: «Запчасти» — кнопка в шапке и блок на главной (ссылки на vrslon.com) ── */
.v2-nav-parts { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; padding: 8px 13px; border-radius: 999px;
  border: 1px solid rgba(255, 176, 102, .35); background: rgba(255, 176, 102, .07); color: #ffcf9e; font-size: 13.5px; white-space: nowrap;
  transition: background .25s, border-color .25s, color .25s; flex-shrink: 0; }
.v2-nav-parts:hover { background: rgba(255, 176, 102, .14); border-color: rgba(255, 176, 102, .6); color: #fff1e2; }
.v2-nav-parts svg { flex-shrink: 0; }
@media (max-width: 1440px) { .v2-nav-parts { padding: 9px; margin-left: 6px; } .v2-nav-parts span { display: none; } }   /* С236: было 1280px */
@media (max-width: 1360px) {   /* С236: было 1100px */
  .v2-nav-links a { padding: 10px 7px; font-size: 14px; }
  .v2-nav-lang b, .v2-nav-lang a { padding: 8px 8px; }
  .v2-nav .v2-btn { padding: 11px 13px; font-size: 13.5px; }
}
@media (max-width: 1260px) { .v2-nav-parts { display: none; } }
.v2-mm-links a small svg { vertical-align: -2px; }
.v2-parts { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 4vw, 52px); }
.v2-parts-text { max-width: 640px; }
.v2 .v2-parts h2 { font-size: clamp(28px, 3.4vw, 46px); margin: 12px 0 14px; }
.v2-parts .v2-lead { margin: 0; }
.v2-parts-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: #ffcf9e; }
.v2-parts-cta { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
@media (max-width: 860px) { .v2-parts { flex-direction: column; align-items: flex-start; } .v2-parts-cta { flex-direction: row; flex-wrap: wrap; } }

/* ── С236: «Разработка под заказ» (Order.jsx) ─────────────────────────────────────────── */
.v2-order-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head form" "steps form"; grid-template-rows: auto 1fr; column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.v2-order-head { grid-area: head; }
.v2-order-steps { grid-area: steps; }
.v2-order-formbox { grid-area: form; }
.v2-order-hero .v2-page-head { margin-bottom: 26px; }   /* «Как это будет» ближе к описанию, дальше от шагов (Михаил) */
.v2-order-hero .v2-h1 { font-size: clamp(44px, 5vw, 78px); }
.v2 .v2-order-steps-title { margin: 0 0 30px; font-family: var(--mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-mute); }
.v2-order-steps ol { list-style: none; margin: 0; padding: 0; display: grid; }
.v2-order-steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 34px; }
.v2-order-steps li:last-child { padding-bottom: 0; }
/* линия-связка между номерами шагов */
.v2-order-steps li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 46px; bottom: 2px; width: 1px; background: linear-gradient(var(--amber), rgba(242, 201, 122, .08)); }
.v2-order-step-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 14px; color: var(--amber); border: 1px solid rgba(242, 201, 122, .55); background: var(--amber-soft); box-shadow: 0 0 20px rgba(242, 201, 122, .22); }
.v2 .v2-order-steps h2, .v2 .v2-order-steps h3 { font-size: 18px; letter-spacing: -.02em; line-height: 1.2; padding-top: 3px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.v2-order-steps h2 small, .v2-order-steps h3 small { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 201, 122, .75); }
.v2 .v2-order-steps li p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--fg-dim); max-width: 46ch; }
.v2-order-formbox { scroll-margin-top: 100px; }
.v2-order-formhead { display: grid; gap: 8px; margin-bottom: 22px; scroll-margin-top: 110px; }
.v2 .v2-order-formhead h2 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.02em; }
.v2-order-formhead p { font-size: 14px; line-height: 1.5; color: var(--fg-mute); margin: 0; }
@media (max-width: 1000px) {
  .v2-order-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "steps"; grid-template-rows: auto; }
  .v2-order-steps { margin-top: 44px; }
}
.v2-order-what { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v2-order-card { padding: 26px 24px 28px; display: grid; gap: 12px; align-content: start; transition: transform .5s var(--ease); }
.v2-order-card:hover { transform: translateY(-4px); }
.v2-order-card h3 { font-size: 21px; }
.v2-order-card .v2-step-num { color: var(--amber); }
.v2-order-card:hover { border-color: rgba(242, 201, 122, .35); }
.v2-order-done .v2-tags span { border-color: rgba(242, 201, 122, .4); color: var(--amber); }   /* номера — фиолетовые, метки — золото (Михаил: чередование номеров странно) */
.v2-order-steps-title { color: var(--amber) !important; }
.v2-order-card p { font-size: 14.5px; line-height: 1.55; color: var(--fg-dim); }
@media (max-width: 960px) { .v2-order-what { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .v2-order-what { grid-template-columns: 1fr; } }
.v2-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .v2-form-2 { grid-template-columns: 1fr; } }
.v2-form textarea::placeholder { color: var(--fg-mute); opacity: .8; }
.v2-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.v2-field { display: grid; gap: 10px; font-size: 13px; color: var(--fg-mute); }
.v2-field > span i { font-style: normal; opacity: .7; margin-left: 4px; }
.v2-field > span i::before { content: "· "; }
.v2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-chips button { font: inherit; font-size: 14px; color: var(--fg-dim); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); cursor: pointer; transition: border-color .25s, background .25s, color .25s; }
.v2-chips button:hover { border-color: rgba(255, 255, 255, .26); color: var(--fg); }
.v2-chips button.on { color: var(--fg); border-color: rgba(167, 139, 250, .7); background: var(--gold-soft); box-shadow: 0 0 0 3px rgba(167, 139, 250, .1); }
.v2-drop { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 24px 18px; border-radius: 16px; border: 1px dashed var(--line-2); background: rgba(255, 255, 255, .02); transition: border-color .25s, background .25s; }
.v2-drop.drag { border-color: rgba(167, 139, 250, .8); background: var(--gold-soft); }
.v2-drop-icon { font-size: 22px; color: var(--amber); line-height: 1; }
.v2-drop p { margin: 0; font-size: 15px; color: var(--fg); }
.v2-drop .v2-link { background: none; border: 0; border-bottom: 1px solid rgba(167, 139, 250, .4); padding: 0; font: inherit; cursor: pointer; }
.v2-drop small { font-size: 12.5px; line-height: 1.5; color: var(--fg-mute); max-width: 46ch; }
.v2-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v2-files li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--fg); font-size: 14px; }
.v2-file-ext { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--amber); padding: 4px 6px; border-radius: 6px; background: var(--amber-soft); }
.v2-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-files small { color: var(--fg-mute); font-size: 12px; }
.v2-files button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--fg-dim); font-size: 16px; line-height: 1; cursor: pointer; }
.v2-files button:hover { color: var(--fg); border-color: rgba(255, 255, 255, .3); }

/* ⭐С238: вход в кабинет в шапке — выпадающий список из двух приложений (владелец / администратор).
   Стекло то же, что у мобильного меню, чтобы шапка оставалась единой. */
.v2-acc { position: relative; }
.v2-acc-caret { margin-left: .45em; font-size: .8em; display: inline-block; transition: transform .18s ease; }
.v2-acc-caret.open { transform: rotate(180deg); }
.v2-acc-list {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  min-width: 264px; padding: 8px; border-radius: 16px; display: grid; gap: 4px;
  /* фон плотный: сквозь стекло просвечивали плашки главной и текст наезжал на текст */
  background: rgba(16, 14, 24, .95);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}
.v2-acc-list a, .v2-mm-acc a {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px;
  color: var(--v2-fg, #eef1f7); text-decoration: none;
}
.v2-acc-list a:hover, .v2-acc-list a:focus-visible,
.v2-mm-acc a:hover, .v2-mm-acc a:focus-visible { background: rgba(255,255,255,.08); }
.v2-acc-list b, .v2-mm-acc b { font-weight: 650; font-size: 15px; }
.v2-acc-list small, .v2-mm-acc small { font-size: 12.5px; opacity: .62; }
.v2-mm-acc { display: grid; gap: 4px; margin: 12px 0 4px; }
.v2-mm-acc a { background: rgba(255,255,255,.05); }

/* ⭐С240 (Михаил, iPhone): переключатель RU|EN вылезал за рамку мобильного меню. Меню — колонка с
   ограниченной высотой и прокруткой, и flex СЖИМАЛ нижний блок вместо прокрутки. Детям меню
   сжиматься запрещено — лишнее уходит в прокрутку. */
.v2-nav-mobile > * { flex-shrink: 0; }
/* ⭐С240 (Михаил): на телефоне пилюля «Личный кабинет» в шапке слишком большая — оба входа в кабинет
   есть внутри меню, в шапке оставляем только логотип и бургер. */
@media (max-width: 560px) { .v2-nav .v2-acc { display: none; } }

/* ── ⭐ С249 страница UnitVR School ───────────────────────────────────────────────────── */
.v2-school-status { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; margin-top: 28px; }
.v2-school-video { margin-top: clamp(28px, 4vw, 48px); }
.v2-video { position: relative; aspect-ratio: 16 / 9; padding: 8px; overflow: hidden; }
.v2-video iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: calc(var(--radius) - 8px); background: #000; }
.v2-video-soon { display: grid; place-items: center; align-content: center; gap: 16px; text-align: center;
  background: radial-gradient(80% 90% at 50% 40%, var(--violet-soft), transparent 70%), var(--bg-2); }
.v2-video-play { display: grid; place-items: center; width: clamp(64px, 8vw, 92px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--amber); font-size: clamp(22px, 2.6vw, 32px); padding-left: 5px;
  box-shadow: 0 0 0 10px rgba(242, 201, 122, .05), 0 0 40px rgba(123, 97, 255, .25); }
.v2-video-soon p { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-mute); }
/* ⭐С255 (Михаил: «растянутые блоки некрасиво смотрятся»): пять классов в один ряд, карточка по высоте
   своего содержимого (без выравнивания по самой длинной), темы — в одну колонку: в узкой карточке две
   колонки рвали названия тем по одному слову. */
.v2-school-how { grid-template-columns: repeat(5, 1fr); align-items: start; gap: 12px; }
.v2-school-how .v2-checks { grid-template-columns: 1fr; gap: 8px; }
.v2-school-how .v2-order-card { padding: 20px 18px 22px; }
@media (max-width: 1240px) { .v2-school-how { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .v2-school-how { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .v2-school-how { grid-template-columns: 1fr; } }
.v2-school-games { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.v2-school-game { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: clamp(18px, 2.4vw, 28px); padding: 14px clamp(16px, 2vw, 26px) 14px 14px; align-items: center; }
.v2-school-game img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - 8px); }
.v2-school-game h3 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 10px; }
.v2-school-game h3 small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); font-weight: 400; }
.v2-school-game p { font-size: 15px; line-height: 1.55; color: var(--fg-dim); }
@media (max-width: 1100px) { .v2-school-games { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .v2-school-game { grid-template-columns: 1fr; padding: 12px 12px 22px; } .v2-school-game img { max-width: 300px; margin: 0 auto; } }
.v2-school-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.v2-school-two .v2-checks { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
@media (max-width: 900px) { .v2-school-two { grid-template-columns: 1fr; } }
.v2-school-need { padding: clamp(22px, 3vw, 36px); display: grid; gap: 14px; margin-top: 8px; }
.v2-school-need h3 { font-size: clamp(22px, 2.2vw, 28px); }
.v2-school-need dl { display: grid; gap: 14px; margin: 0; }
.v2-school-need dt { font-weight: 600; margin-bottom: 4px; }
.v2-school-need dd { margin: 0; color: var(--fg-dim); font-size: 14.5px; line-height: 1.5; }
.v2-school-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v2-school-stage { padding: 24px 24px 26px; display: grid; gap: 10px; align-content: start; }
.v2-school-stage h3 { font-size: 20px; }
.v2-school-stage p { font-size: 14.5px; line-height: 1.55; color: var(--fg-dim); }
.v2-school-stage-state { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.v2-school-stage-state .v2-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.v2-school-stage.is-done .v2-school-stage-state { color: #7ee2a8; }
.v2-school-stage.is-done .v2-dot { background: #7ee2a8; box-shadow: 0 0 12px #7ee2a8; }
.v2-school-stage.is-work .v2-school-stage-state { color: var(--amber); }
.v2-school-stage.is-work .v2-dot { background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.v2-school-stage.is-plan .v2-school-stage-state { color: var(--fg-mute); }
.v2-school-stage.is-plan .v2-dot { background: var(--fg-mute); }
@media (max-width: 860px) { .v2-school-stages { grid-template-columns: 1fr; } }
.v2-school-subjects { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .v2-school-subjects { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .v2-school-subjects { grid-template-columns: 1fr; } }

/* ── ⭐ С249 меню «Программы» ─────────────────────────────────────────────────────────── */
.v2-prog { position: relative; display: flex; }
.v2-prog-btn { padding: 10px 14px; border-radius: 999px; font: inherit; font-size: 14.5px; color: var(--fg); background: transparent; border: 0; cursor: pointer; white-space: nowrap; transition: background .25s; }
.v2-prog-btn:hover, .v2-prog-btn.open { background: rgba(255, 255, 255, .05); }
@media (max-width: 1260px) { .v2-prog-btn { padding: 10px 9px; } }
.v2-prog-list {
  position: absolute; top: calc(100% + 14px); left: -8px; z-index: 40; width: 400px; padding: 8px; border-radius: 18px;
  display: grid; gap: 4px; background: rgba(16, 14, 24, .96); box-shadow: 0 22px 56px rgba(0, 0, 0, .6);
  animation: v2-prog-in .22s var(--ease) both;
}
.v2-prog-list::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }   /* мостик для мыши */
@keyframes v2-prog-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.v2-prog-list a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; color: var(--fg); text-decoration: none; transition: background .2s; }
.v2-prog-list a:hover, .v2-prog-list a:focus-visible { background: rgba(255, 255, 255, .07); }
.v2-prog-logo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.v2-prog-logo svg { width: 24px; height: 24px; }
.v2-prog-text { display: grid; gap: 2px; min-width: 0; }
.v2-prog-text b { font-weight: 650; font-size: 15px; }
.v2-prog-text small { font-size: 12.5px; color: var(--fg-mute); }
.v2-prog-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--line); }
.v2-prog-status i { width: 6px; height: 6px; border-radius: 50%; }
.is-done .v2-prog-status { color: #7ee2a8; } .is-done .v2-prog-status i { background: #7ee2a8; box-shadow: 0 0 8px #7ee2a8; }
.is-work .v2-prog-status { color: var(--amber); } .is-work .v2-prog-status i { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.is-plan .v2-prog-status { color: var(--gold); } .is-plan .v2-prog-status i { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.v2-mm-prog { display: grid; gap: 4px; margin: 0 0 4px; }
/* С254: «Программы» в мобильном меню — кнопка-раскрывашка в стиле остальных пунктов, список внутри */
.v2-mm-prog-btn { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; width: 100%; padding: 16px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--fg); font: inherit; font-size: 18px; font-weight: 500; letter-spacing: -.01em; cursor: pointer; text-align: left; }
.v2-mm-prog-btn small { font-family: var(--mono); font-size: 11.5px; color: var(--gold); letter-spacing: .08em; }
.v2-mm-prog-btn i { font-style: normal; color: var(--fg-mute); font-size: 14px; transition: transform .3s var(--ease); }
.v2-mm-prog.open .v2-mm-prog-btn i { transform: rotate(180deg); color: var(--fg); }
.v2-mm-prog-list { display: grid; gap: 4px; padding: 8px 0 10px; animation: v2-mm-prog-in .25s var(--ease); }
@keyframes v2-mm-prog-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.v2-mm-prog p { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); margin: 0 0 4px; }
.v2-mm-prog a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); color: var(--fg); text-decoration: none; }
.v2-mm-prog a.on { background: rgba(255, 255, 255, .1); }

/* ── ⭐ С249 страница UnitVR Video ────────────────────────────────────────────────────── */
.v2-video-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 1000px) { .v2-video-hero { grid-template-columns: 1fr; } }
.v2-status-plan { color: var(--gold) !important; }
.v2-status-plan .v2-dot { background: var(--gold) !important; box-shadow: 0 0 12px var(--gold) !important; }
.v2-vmock { padding: clamp(16px, 2vw, 24px); display: grid; gap: 14px; }
.v2-vmock-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.v2-vmock-head b { font-size: 17px; }
.v2-vmock-head span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--fg-mute); }
.v2-vmock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 480px) { .v2-vmock-grid { grid-template-columns: 1fr 1fr; } }
.v2-vmock-h { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); transition: border-color .4s, background .4s; }
.v2-vmock-h.ready { border-color: rgba(126, 226, 168, .35); }
.v2-vmock-h.play { border-color: rgba(167, 139, 250, .5); background: rgba(123, 97, 255, .1); }
.v2-vmock-name { font-size: 13.5px; font-weight: 600; }
.v2-vmock-state { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--fg-mute); }
.v2-vmock-h.ready .v2-vmock-state { color: #7ee2a8; }
.v2-vmock-h.play .v2-vmock-state { color: var(--gold); }
.v2-vmock-bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.v2-vmock-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); transition: width .6s var(--ease); }
.v2-vmock-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.v2-vmock-foot > span:first-child { font-size: 13.5px; color: var(--fg-dim); }
.v2-vmock-btn { padding: 11px 20px; border-radius: 999px; font-weight: 650; font-size: 14px; border: 1px solid var(--line-2); color: var(--fg-mute); transition: all .35s var(--ease); }
.v2-vmock-btn.on { color: #120f1c; border-color: transparent; background: linear-gradient(90deg, var(--blue), var(--gold)); box-shadow: 0 0 24px rgba(167, 139, 250, .45); }
.v2-vmock-btn.pressed { transform: scale(.97); }
.v2-vmock-note { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-mute); text-align: center; }
.v2-video-where { display: block; margin-top: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); font-weight: 400; }
.v2-video-family { display: grid; gap: 12px; }
.v2-video-fam { color: var(--fg); text-decoration: none; transition: transform .4s var(--ease), border-color .3s; }
.v2-video-fam:hover { transform: translateX(4px); border-color: var(--line-2); }
.v2-video-fam.is-plan .v2-school-stage-state { color: var(--gold); }
.v2-video-fam.is-plan .v2-dot { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.v2-school-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.v2-school-mode { padding: clamp(22px, 3vw, 38px); display: grid; gap: 14px; align-content: start; }
.v2-school-mode h3 { font-size: clamp(24px, 2.4vw, 32px); }
.v2-school-mode > p { font-size: 15.5px; line-height: 1.6; color: var(--fg-dim); }
.v2-school-mode .v2-checks { display: grid; gap: 10px; list-style: none; padding: 0; margin: 6px 0 0; }
@media (max-width: 900px) { .v2-school-modes { grid-template-columns: 1fr; } }
.v2-school-mode .v2-checks, .v2-school-two .v2-checks { grid-template-columns: 1fr; }
.v2-prog-list { width: 460px; }
.v2-prog-list a { white-space: normal; }
.v2-prog-text small { overflow: hidden; text-overflow: ellipsis; }
/* С249: «Программы» в подвале — тот же список, открывается вверх */
.v2-prog-up .v2-prog-btn { padding: 0; font-size: 13.5px; color: var(--fg-mute); background: none !important; }
.v2-prog-up .v2-prog-btn:hover, .v2-prog-up .v2-prog-btn.open { color: var(--fg); }
.v2-prog-up .v2-prog-list { top: auto; bottom: calc(100% + 14px); left: -12px; width: min(460px, calc(100vw - 32px)); }
.v2-prog-up .v2-prog-list::before { top: auto; bottom: -16px; }
@media (max-width: 520px) { .v2-prog-list a { grid-template-columns: 1fr auto; } .v2-prog-list .v2-prog-logo { display: none; } }
/* С249: обложка трейлера — плеер VK грузится по нажатию */
.v2-video-poster { width: 100%; border: 1px solid var(--line); cursor: pointer; font: inherit; color: inherit; }
.v2-video-poster .v2-video-play, .v2-video-poster p { position: relative; z-index: 1; transition: transform .4s var(--ease), color .3s; }
.v2-video-poster:hover .v2-video-play { transform: scale(1.08); }
.v2-video-poster:hover p { color: var(--fg); }
.v2-video-covers { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 6%; opacity: .28; filter: blur(2px) saturate(1.2); }
.v2-video-covers img { height: 115%; width: auto; transform: rotate(-6deg); border-radius: 18px; }
.v2-video-covers img + img { transform: rotate(6deg); }
.v2-video-poster::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 50%, rgba(9, 8, 12, .2), rgba(9, 8, 12, .85)); }
.v2-video-poster p { color: var(--fg-dim); font-size: 13px; }
/* С249 (SEO): список «Программы» всегда в разметке, закрытый — скрыт */
.v2-prog-list:not(.open) { display: none; }


/* ── ⭐ С250 (аудит): область нажатия мелких ссылок ────────────────────────────────────────
   Ссылки подвала и хлебные крошки были высотой ~16–20px — на телефоне в них трудно попасть
   (норма — около 44px). Растим ТОЛЬКО область нажатия: внутренние отступы плюс равные им
   отрицательные внешние — размер шрифта и расстояние между строками остаются прежними. */
.v2-foot nav a { display: inline-flex; align-items: center; padding-block: 13px; margin-block: -13px; }
.v2-crumbs a { display: inline-flex; align-items: center; padding-block: 15px; margin-block: -15px; }
/* С250 (аудит): галочка согласия — 18px квадрат; нажимать можно по всей обёртке (~44px) */
.v2-consent-box { display: inline-flex; align-items: flex-start; padding: 13px; margin: -13px 0 -13px -13px; flex-shrink: 0; }
.v2-consent-box input { margin-top: 0; }
/* С250 (аудит): «Все программы UnitVR» в мобильном меню — 43px, добираем до 44+ */
.v2-nav-mobile .v2-mm-prog a.v2-prog-all { padding-block: 13px; }
/*
 * ЕДИНЫЙ ИСТОЧНИК ПРАВДЫ для стекла и цветовой темы UnitVR.
 * Все компоненты используют ТОЛЬКО эти CSS-переменные — никогда не хардкодят свои
 * rgba/blur/box-shadow значения локально. Правка стиля стекла = правка ЭТОГО файла,
 * изменение расходится по всему приложению автоматически (прямое требование Михаила, С151).
 *
 * История: рецепт менялся дважды за ночь С151 (см. reference-glass-canon-2026 в памяти
 * агента) — сначала окантовка/просвечивание были неверными, затем плотность 0.42 давала
 * либо тусклость, либо жёсткую окантовку при попытке компенсировать. Текущие значения —
 * финальные, подтверждённые Михаилом визуально на попапе поддержки.
 */

:root[data-theme="dark"] {
  --fg: #eceef2;
  --fg-dim: #a8abbc;
  --fg-mute: #7c8096;

  --scene:
    radial-gradient(circle at 78% -8%, rgba(255, 154, 77, .32), transparent 46%),
    radial-gradient(circle at 15% 108%, rgba(90, 140, 255, .24), transparent 46%),
    linear-gradient(160deg, #1c1408 0%, #0d0e14 55%, #08090e 100%);

  /* ===== ГЛАВНЫЕ ТОКЕНЫ СТЕКЛА (менять ТОЛЬКО здесь) ===== */
  --glass-bg: rgba(18, 18, 21, .72);
  --glass-img: linear-gradient(160deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .015) 40%, rgba(255, 255, 255, 0) 100%);
  --glass-blur: blur(30px) saturate(140%) brightness(1.0);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .32);
  --glass-radius: 18px;

  /* плотнее вариант для мелких элементов (тайлы игр, карточки шлемов) */
  --glass-tile-bg: rgba(20, 20, 24, .5);
  --glass-tile-blur: blur(18px) saturate(150%) brightness(1.02);
  /* С152 (3-й проход): раньше только верхний блик 1px — окантовка "исчезала" книзу
     карточки. inset 0 0 0 1px даёт РАВНОМЕРНЫЙ тонкий контур по всему периметру. */
  --glass-tile-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 5px 14px rgba(0, 0, 0, .24);
  --gfoot-gradient: linear-gradient(90deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.26) 50%, rgba(255,255,255,.14) 100%);

  --glass-helm-bg: rgba(20, 20, 24, .48);
  --glass-helm-active-bg: rgba(38, 32, 26, .62);
  /* С152: контур 1.5px (было 1px — слишком тонко, читалось как "срезанное" рядом с
     несимметричной внешней тенью 0 5px). Внешняя тень заменена на симметричную
     0 0 14px, чтобы не создавать ложное ощущение перекоса выделенной карточки. */
  --glass-helm-active-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1.5px rgba(138, 180, 255, .55), 0 0 14px rgba(0, 0, 0, .22);

  /* окантовка попап-окон (поддержка/тариф/трансляция), С152. ⚠️ Первая попытка подняла
     плотность до 0.86 + добавила blur(6px) на оверлей ПОД окном — суммарный эффект убил
     матовость: стекло перестало просвечивать сцену и превратилось в сплошную тонировку
     («не видно матовость, видно тёмное окошко» — Михаил). Вернул плотность к уровню
     обычного .glass (0.72, тот самый, подтверждённый визуально в С151) — разделение от
     фона теперь даёт ТОЛЬКО оверлей (см. --overlay-*), не сама панель. */
  --glass-sup-bg: rgba(18, 18, 21, .45);
  --glass-sup-blur: blur(16px) saturate(160%) brightness(1.05);
  --glass-sup-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 28px rgba(0, 0, 0, .4);
  --sup-panel-bg: rgba(255, 255, 255, .96);
  --sup-panel-fg: #16171c;
  --sup-panel-fg-dim: #6b6d78;

  /* контейнер-обёртка правой колонки (KPI+таймер+библиотека) — один большой кусок
     тёмного стекла, внутри которого лежат светло-серые вставки (см. --inset-*) */
  --main-panel-bg: rgba(16, 16, 20, .58);
  --main-panel-blur: blur(28px) saturate(150%) brightness(1.0);
  --main-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 24px rgba(0, 0, 0, .3);
  --inset-bg: rgba(255, 255, 255, .045);
  --inset-border: rgba(255, 255, 255, .09);

  /* капсула подписи под обложкой игры (С152) — заметно светлее .inset-bg, ближе к
     референсу Stardog: явная светлая плашка, а не тонкая подложка того же тона */
  --gfoot-bg: rgba(255, 255, 255, .12);
  --gfoot-border: rgba(255, 255, 255, .16);

  /* С152: оверлей под модалками слегка размывает сцену за окном (Михаил — «попап теряется
     на фоне большого числа обложек игр»). ⚠️ Первая попытка (0.32 + blur 6px) в СУММЕ с
     поднятой плотностью самой панели убила матовость целиком — стекло перестало
     просвечивать. Плотность панели вернул к 0.72 (см. --glass-sup-bg), поэтому здесь
     оставляю МЯГКИЙ вариант: blur всего 3px, затемнение чуть выше исходного 0.18 — этого
     достаточно, чтобы окно отделялось от фона, но сцена всё ещё видна сквозь стекло. */
  --overlay-bg: rgba(8, 9, 16, .24);
  --overlay-blur: blur(3px);

  --chip: rgba(10, 10, 14, .45);
  --accent: #8ab4ff;
  --accent2: #b89bff;
  --accent-fg: #0d1017;
  /* ⭐ С181 (Михаил, «сайт весь прям сильно фиолетовый»): --accent теперь единый бренд-цвет
     кнопок/ссылок (совпадает с кабинетом), но если ВСЯ декоративная графика (диаграммы,
     статусы) тоже перекрашена в него — страница выглядит однотонной. --accent-warm — тёплый
     тон ТОЛЬКО для иллюстративной графики (столбики выручки, сетка роста), не для интерактива;
     --ok/--warn остаются смысловыми (успех/ожидание), не декоративными. */
  --accent-warm: #ffb066;
  --accent-warm2: #ff9a4d;
  --ok: #7ee6a0;
  --warn: #ffd180;
  --bad: #ff9fac;
}

:root[data-theme="light"] {
  --fg: #eef0f4;
  --fg-dim: #c2c7d2;
  --fg-mute: #9aa0ad;

  --scene:
    radial-gradient(circle at 72% 18%, rgba(210, 160, 110, .16), transparent 34%),
    radial-gradient(circle at 24% 30%, rgba(150, 175, 205, .14), transparent 40%),
    radial-gradient(circle at 88% 78%, rgba(120, 140, 170, .12), transparent 42%),
    radial-gradient(circle at 40% 95%, rgba(190, 150, 110, .10), transparent 38%),
    linear-gradient(155deg, #2a2e36 0%, #1c1f26 45%, #14161c 100%);

  --glass-bg: rgba(50, 54, 62, .58);
  --glass-img: linear-gradient(150deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 42%, rgba(0, 0, 0, .03) 100%);
  --glass-blur: blur(26px) saturate(110%) brightness(1.0);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 28px rgba(0, 0, 0, .22);
  --glass-radius: 18px;

  --glass-tile-bg: rgba(46, 50, 58, .5);
  --glass-tile-blur: blur(18px) saturate(105%) brightness(1.0);
  --glass-tile-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .18);
  --gfoot-gradient: linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.18) 100%);

  --glass-helm-bg: rgba(46, 50, 58, .46);
  --glass-helm-active-bg: rgba(58, 62, 72, .6);
  --glass-helm-active-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1.5px rgba(255, 255, 255, .2), 0 0 16px rgba(0, 0, 0, .16);

  --glass-sup-bg: rgba(50, 54, 62, .4);
  --glass-sup-blur: blur(16px) saturate(130%) brightness(1.05);
  --glass-sup-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 28px rgba(0, 0, 0, .3);
  --sup-panel-bg: rgba(255, 255, 255, .97);
  --sup-panel-fg: #16171c;
  --sup-panel-fg-dim: #6b6d78;

  --main-panel-bg: rgba(40, 44, 52, .5);
  --main-panel-blur: blur(26px) saturate(120%) brightness(1.0);
  --main-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 22px rgba(0, 0, 0, .22);
  --inset-bg: rgba(255, 255, 255, .06);
  --inset-border: rgba(255, 255, 255, .12);
  --gfoot-bg: rgba(255, 255, 255, .16);
  --gfoot-border: rgba(255, 255, 255, .2);

  --overlay-bg: rgba(8, 9, 16, .24);
  --overlay-blur: blur(3px);

  --chip: rgba(10, 10, 14, .35);
  --accent: #8ab4ff;
  --accent2: #b89bff;
  --accent-fg: #0d1017;
  /* ⭐ С181 (Михаил, «сайт весь прям сильно фиолетовый»): --accent теперь единый бренд-цвет
     кнопок/ссылок (совпадает с кабинетом), но если ВСЯ декоративная графика (диаграммы,
     статусы) тоже перекрашена в него — страница выглядит однотонной. --accent-warm — тёплый
     тон ТОЛЬКО для иллюстративной графики (столбики выручки, сетка роста), не для интерактива;
     --ok/--warn остаются смысловыми (успех/ожидание), не декоративными. */
  --accent-warm: #ffb066;
  --accent-warm2: #ff9a4d;
  --ok: #7ee6a0;
  --warn: #ffd180;
  --bad: #ff9fac;
}

/* ===== БАЗОВЫЙ КЛАСС СТЕКЛА (используется всеми .glass-панелями) =====
   ⭐ С209 (Михаил, реальный iPhone): у карточки со статистикой на "О нас" скруглённый угол
   пропадал с одной стороны — известный баг Safari/iOS: backdrop-filter игнорирует border-radius
   без явного overflow:hidden на самом элементе (в Chrome не воспроизводится, поэтому раньше
   не поймали). overflow:hidden — стандартный фикс, проверено, что ничего в карточках не
   полагается на выход контента за края. */
.glass {
  position: relative;
  overflow: hidden;
  border-radius: var(--glass-radius);
  background-color: var(--glass-bg);
  background-image: var(--glass-img);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: var(--glass-shadow);
}

.glass-tile {
  background-color: var(--glass-tile-bg);
  backdrop-filter: var(--glass-tile-blur);
  -webkit-backdrop-filter: var(--glass-tile-blur);
  box-shadow: var(--glass-tile-shadow);
}

/* стекло попапа техподдержки — плотнее .glass (см. --glass-sup-* выше) */
.glass-sup {
  position: relative;
  border-radius: var(--glass-radius);
  background-color: var(--glass-sup-bg);
  backdrop-filter: var(--glass-sup-blur);
  -webkit-backdrop-filter: var(--glass-sup-blur);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: var(--glass-sup-shadow);
}

/* контейнер-обёртка правой колонки — один большой кусок тёмного стекла (С152) */
.main-panel {
  position: relative;
  border-radius: var(--glass-radius);
  background-color: var(--main-panel-bg);
  backdrop-filter: var(--main-panel-blur);
  -webkit-backdrop-filter: var(--main-panel-blur);
  box-shadow: var(--main-panel-shadow);
}

/* С152: светло-серые вставки внутри тёмного стекла (по образцу референса Stardog —
   большая тёмная стеклянная область, внутри которой лежат светлые под-панели с мягкой
   серой окантовкой). Используется для таймера/библиотеки игр внутри .main-panel. */
.inset-panel {
  border-radius: 16px;
  background: var(--inset-bg);
  border: 1px solid var(--inset-border);
}
/* компактные чипы-теги (по образцу «Seekingalpha/CNBC» на референсе) для KPI */
.chip-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--inset-bg);
  border: 1px solid var(--inset-border);
  font-size: 13px;
  color: var(--fg-dim);
}

/* grain — то, что отличает матовое стекло от чистого (см. reference-glass-canon-2026) */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .025;
  mix-blend-mode: overlay;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-1, #0d0e14);
  color: var(--fg);
  font-family: "Manrope Variable", "Manrope Fallback", "Manrope", -apple-system, "Segoe UI", sans-serif;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-weight: 500; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; color: var(--fg-dim); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

:root[data-theme="dark"] {
  --bg-2: #1c1408;
}

.site {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% -8%, rgba(255, 154, 77, .30), transparent 46%),
    radial-gradient(circle at 15% 108%, rgba(90, 140, 255, .22), transparent 46%),
    linear-gradient(160deg, var(--bg-2) 0%, var(--bg-1) 55%, #08090e 100%);
}

/* ===== Header ===== */
.header {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 40px;
  position: relative;
  z-index: 10;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}
.logo svg { width: 40px; height: 40px; flex-shrink: 0; }
.logo-text {
  background: linear-gradient(100deg, #8ab4ff 0%, #b89bff 25%, #ffb066 50%, #b89bff 75%, #8ab4ff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: logo-shimmer 6s ease-in-out infinite;
}
@keyframes logo-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-text { animation: none; }
}
.nav { display: flex; gap: 26px; margin-left: 12px; }
.nav a { font-size: 14px; color: var(--fg-dim); transition: color .15s; }
.nav a:hover { color: var(--fg); }
.header-spacer { flex: 1; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  flex-shrink: 0;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--fg); border-radius: 2px; }
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 10, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 15;
}
.nav-mobile {
  /* ⭐ С197 (Михаил): fixed, а не absolute. При замороженном body (scroll-lock) absolute-меню,
     привязанное к шапке, уезжало вместе с ней вверх и прятало крестик. fixed держит меню у
     верха экрана независимо от сдвига страницы. */
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 20;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-mobile a {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--fg-dim);
}
.nav-mobile a:hover { background: rgba(255, 255, 255, .05); color: var(--fg); }
.nav-mobile a.btn-accent { justify-content: center; margin-bottom: 8px; color: var(--accent-fg); }
.nav-mobile-hint { color: var(--fg-mute); font-size: 13px; }
/* ⭐ С197 (Михаил): явный крестик закрытия мобильного меню — не все догадываются нажать по пустому месту. */
.nav-mobile-head { display: flex; justify-content: flex-end; margin-bottom: 2px; }
.nav-close {
  width: 34px; height: 34px; border: none; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: var(--fg); font-size: 16px; line-height: 1;
}
.nav-close:hover { background: rgba(255, 255, 255, .16); }

/* ===== Выпадающий выбор кабинета (владелец / администратор) ===== */
.account-menu { position: relative; }
.account-menu-arrow { width: 10px; height: 6px; flex-shrink: 0; transition: transform .15s; }
.account-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 260px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.account-menu-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
}
.account-menu-item:hover { background: rgba(255, 255, 255, .06); }
.account-menu-item + .account-menu-item { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 2px; padding-top: 12px; }
.account-menu-item-title { font-size: 14px; font-weight: 700; color: var(--fg); }
.account-menu-item-desc { font-size: 12px; color: var(--fg-mute); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #2a2b33;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  color: inherit;
}
.btn-ghost { color: var(--fg-dim); }
.btn-ghost:hover { color: var(--fg); border-color: #444; }
/* ⭐ С208 (просьба Михаила): главная кнопка «переливается» — градиент медленно течёт, и раз в
   несколько секунд по нему проходит мягкий блик. Два разных слоя: сам градиент живёт в background
   (анимируем background-position по растянутой в 2.5 раза подложке), блик — отдельным ::after,
   чтобы не мешать градиенту и не перерисовывать тень. Скорость намеренно спокойная: кнопка должна
   притягивать взгляд, а не мигать. */
.btn-accent {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg,
    var(--accent) 0%, var(--accent2) 25%, #8ad4ff 50%, var(--accent2) 75%, var(--accent) 100%);
  background-size: 250% 100%;
  animation: btn-accent-flow 7s ease-in-out infinite;
  color: var(--accent-fg);
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 18px -6px color-mix(in srgb, var(--accent2) 70%, transparent);
  transition: box-shadow .25s ease, transform .25s ease;
}
/* Блик: узкая светлая полоса, проходящая слева направо. Появляется не постоянно, а раз в цикл —
   поэтому в keyframes большая «пауза» с прозрачностью. */
.btn-accent::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: btn-accent-shine 7s ease-in-out infinite;
  pointer-events: none;
}
.btn-accent:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 26px -8px color-mix(in srgb, var(--accent2) 85%, transparent);
}
.btn-accent:active { transform: translateY(0); }

@keyframes btn-accent-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes btn-accent-shine {
  0%, 55%  { left: -60%; opacity: 0; }
  60%      { opacity: 1; }
  92%      { left: 115%; opacity: 0; }
  100%     { left: 115%; opacity: 0; }
}

/* ⛔ Уважаем системную настройку «уменьшить движение»: людям с вестибулярной чувствительностью
   постоянная анимация мешает, а кнопка обязана остаться читаемой и нажимаемой. */
@media (prefers-reduced-motion: reduce) {
  .btn-accent { animation: none; background-position: 0% 50%; }
  .btn-accent::after { display: none; }
  .btn-accent:hover { transform: none; }
}
.btn-lg { padding: 13px 28px; font-size: 15px; }

/* ===== Hero (один статичный экран — карусель убрана, С181) ===== */
.hero {
  position: relative;
  height: 780px;
  overflow: hidden;
  max-width: 1520px;
  margin: 0 auto;
  border-radius: 24px;
}
.hero-static {
  display: flex;
  align-items: center;
  padding: 0 64px;
}
.hero-slide-bg {
  position: absolute;
  inset: 0;
}
/* ⭐⭐⭐⭐⭐ С187 (Михаил: «первый баннер на планшете выглядит ужасно»). Воспроизведено вживую
   на 1280×800 и 1024×768: картинка ноутбука НАЕЗЖАЛА на заголовок и пункты списка, текст
   уходил под неё и обрывался на полуслове.
   Корень — жёсткая арифметика: текст 560px + картинка 920px, прижатая абсолютом к правому
   краю (right: -20px), плюс поля 64px. Чтобы они физически не пересеклись, экран должен быть
   шире ~1520px. А перестройка в колонку включалась только на 900px — то есть ВЕСЬ диапазон
   900…1520 был сломан, и в него попадают почти все реальные устройства: планшет клуба,
   iPad, MacBook, обычный ноутбук 1366. Замечено это было только потому, что Михаил открыл
   сайт на планшете.
   Лечение: размеры обеих колонок привязаны к ширине экрана, а не заданы в абсолютных
   пикселях. На большом мониторе всё как было (min() возвращает исходные 560/920), на
   промежуточных — обе части ужимаются согласованно и не пересекаются. */
.hero-copy { position: relative; max-width: min(560px, 38vw); z-index: 2; }
.hero-copy .eyebrow {
  margin-bottom: 18px;
  font-size: 14px;
  letter-spacing: .16em;
}
.hero-copy h1 {
  font-size: 66px;
  line-height: 1.06;
  margin-bottom: 30px;
  font-weight: 600;
}
.grad-accent {
  background: linear-gradient(100deg, #8ab4ff 0%, #b89bff 35%, #ffb066 70%, #b89bff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: logo-shimmer 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .grad-accent { animation: none; }
}
.hero-points {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-teaser {
  font-size: 14px;
  font-style: italic;
  color: var(--fg-mute);
  margin: 0 0 24px;
}
.hero-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 18px;
  color: var(--fg-dim);
}
.hero-points .check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(138, 180, 255, .14);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin-top: 1px;
}
.hero-visual {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: min(920px, 55vw);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
/* ===== Sections ===== */
.section { padding: 80px 40px; }
.section-tight { padding: 40px 40px 80px; }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  font-weight: 600;
}
.section-head h2 { font-size: 34px; }
.section-head p { margin-top: 12px; font-size: 15.5px; }

/* ===== Feature story rows (текст + мокап, чередование) ===== */
.story-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto 28px;
  padding: 56px 60px;
}
.story-row:last-child { margin-bottom: 0; }
.story-row.reverse .story-visual { order: 2; }
.story-row.reverse .story-copy { order: 1; }
.story-copy .eyebrow { margin-bottom: 12px; }
.story-copy h3 { font-size: 30px; margin-bottom: 16px; }
.story-copy p { font-size: 15.5px; }
.story-visual { padding: 0; min-width: 0; }
.story-copy { min-width: 0; }

/* ===== Story figures — иллюстрации, единый формат со страницей "Возможности" =====
   ⭐ С209: были CSS-заглушки (столбик из <div>, список из трёх строк, сетка квадратов) —
   выглядело плоско и без связи с VR. Заменены на картинки scripts/make_home_art.py.
   ⭐ С209 (доводка, мелкий текст): в узкой колонке рядом с текстом картинка показывается
   гораздо мельче, чем на "Возможностях" — там 16:9, здесь 4:3 (выше при той же ширине) и
   у исходных картинок кратно крупнее шрифт — иначе на таком масштабе текст не читается. */
.story-fig-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--glass-radius);
}

/* ===== Feature grid (компактные факты) ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.feature-card { padding: 26px; }
.feature-card .fi { font-size: 26px; margin-bottom: 14px; display: block; }
.feature-card h4 { font-size: 16px; margin-bottom: 8px; font-weight: 600; }
.feature-card p { font-size: 13.5px; }
/* С205: обложка модуля вместо эмодзи. Картинка 3:2, во всю ширину карточки, с полями
   внутрь стекла — чтобы рамка карточки читалась поверх тёмной иллюстрации. */
/* С205 (Михаил): модулей четыре, а сетка возможностей трёхколоночная — выходило 3 + 1
   и последняя карточка висела одна. Здесь своя сетка: 2×2, обложки крупнее и ряд ровный. */
.modules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.module-card { padding-top: 0; overflow: hidden; }
.module-card-art {
  /* max-width: none обязателен: глобальное img { max-width: 100% } режет обложку по ширине
     контента, и справа остаётся тёмная полоса — поймано на живой странице. */
  display: block; width: calc(100% + 52px); max-width: none; margin: 0 -26px 16px;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

/* ===== Demo CTA block ===== */
.demo-block {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px;
  text-align: center;
}
.demo-block .badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 100px;
  background: rgba(126, 230, 160, .12);
  color: var(--ok);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
}
.demo-block h3 { font-size: 28px; margin-bottom: 10px; }
.demo-block p { max-width: 480px; margin: 0 auto 24px; font-size: 15.5px; }

/* ===== Тизер модулей на главной (С209) ===== */
.modules-teaser-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
}
.modules-teaser-card { padding: 20px; text-align: left; }
.modules-teaser-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
}
.modules-teaser-card h4 { font-size: 16px; margin: 0 0 6px; }
.modules-teaser-card p { font-size: 15.5px; color: var(--fg-dim); line-height: 1.5; margin: 0; }
.modules-teaser-link {
  display: block;
  text-align: center;
  margin-top: 28px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent);
}
.modules-teaser-link:hover { text-decoration: underline; }

/* ===== Мост к тарифам перед финальным CTA (С209) ===== */
.pricing-teaser {
  max-width: 900px;
  margin: 0 auto 20px;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.pricing-teaser-price { font-size: 30px; font-weight: 700; color: var(--fg); margin: 8px 0 6px; }
.pricing-teaser-price span { font-size: 14px; font-weight: 500; color: var(--fg-mute); }
.pricing-teaser p { margin: 0; color: var(--fg-dim); font-size: 15.5px; max-width: 380px; }

/* ===== Footer ===== */
.footer {
  padding: 30px 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 20px;
  border-top: 1px solid #2a2b33;
  font-size: 13px;
  color: var(--fg-mute);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .nav { display: none; }
  .btn-ghost { display: none; }
  .header > .btn-accent { display: none; }
  .nav-toggle { display: flex; }
  .header { padding: 16px 20px; gap: 10px; }
  .story-row, .story-row.reverse { grid-template-columns: 1fr; }
  .story-row.reverse .story-visual { order: 1; }
  .story-row.reverse .story-copy { order: 2; }
  .feature-grid { grid-template-columns: 1fr; }
  .modules-teaser-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .modules-teaser-grid { grid-template-columns: 1fr; }
  .pricing-teaser { flex-direction: column; text-align: center; padding: 28px 24px; }
  /* ⭐ С209 (мобильный аудит): без этого 4 строки футера сжимались space-between почти
     вплотную друг к другу и текст соседних пунктов визуально сливался в один. */
  .footer { flex-direction: column; text-align: center; gap: 10px; padding: 24px 20px; }
}

/* С187: перестройка баннера в колонку поднята с 900px до 1100px. На планшете и iPad (1024,
   1280 в альбомной) ужатая до 55vw картинка становится слишком мелкой, а текст — слишком
   узким; вертикальная раскладка там читается заметно лучше. Диапазон 1100…1520 остаётся
   горизонтальным, но с согласованным сжатием (см. min() у .hero-copy/.hero-visual выше).
   Вынесено в отдельный блок, потому что относится только к баннеру: прятать навигацию и
   ломать остальные сетки на 1100px не нужно, это по-прежнему делает блок 900px выше. */
/* ⭐⭐⭐⭐⭐ С187, второй заход (Михаил, живой просмотр на планшете): «текст крупным шрифтом,
   баннер очень высокий, при загрузке видна только половина, клавиатуру макбука не видно —
   обрезается внизу». Первая правка этой сессии лечила ГОРИЗОНТАЛЬНОЕ наложение картинки на
   текст (900…1520px), но заголовок 66px из десктопной раскладки при этом наследовался и в
   колоночную вёрстку без изменений — на планшете в портретной ориентации (типичная ширина
   768…900px) две строки текста по 70px высотой (line-height 1.06×66) плюс список из 5 пунктов
   по 18px плюс отступы в сумме растягивали баннер на экран с лишним, вниз уезжала картинка
   ноутбука — ровно то, что увидел Михаил. Раньше уменьшение шрифта срабатывало только на
   720px (телефоны), а весь диапазон планшетов (720…1100) оставался с десктопным кеглем.
   Сжимаем типографику и вертикальные отступы КОНКРЕТНО там, где включается колонка — не
   трогая ни десктоп (кегль не менялся), ни телефонную раскладку (у неё свой блок ниже).
   ⭐⭐⭐⭐⭐ С187, ТРЕТИЙ заход (Михаил: «всё осталось, ничего не изменилось»). Живое измерение
   через протокол разработчика (не на глаз — координатами DOM) показало: правка выше спасала
   ТОЛЬКО портретную ориентацию. Планшет в АЛЬБОМНОЙ (классические iPad-размеры 1180×820,
   1194×834, и близкие Android) имеет ширину БОЛЬШЕ 1100px — условие `max-width` не
   срабатывало вовсе, оставалась старая раскладка (заголовок 66px, ФИКСИРОВАННАЯ высота
   баннера 780px), которая в невысоком окне 800-834px переполняла экран на 20-56px. Проверено
   измерением: 1280×800 → низ баннера на 856px при высоте окна 800px, не помещается.
   Добавлено ВТОРОЕ условие через запятую (OR, не AND) — `(max-height: 900px)`: срабатывает,
   если экран НИЗКИЙ, даже когда он широкий. Теперь колонка и уменьшенный кегль включаются в
   любом из двух случаев — узко (портрет) ИЛИ низко (альбомная ориентация с недостаточной
   высотой), что и накрывает реальные планшеты целиком, а не только один их поворот.
   Порог по высоте подобран не на глаз, а измерением: отступ шапки над баннером строго
   постоянен (76px) при любой ширине экрана в этом режиме, высота самого баннера строго 780px
   — сумма 856px ФИКСИРОВАНА. Значит порог 855px отсекает переполнение день в день: любой
   экран НИЖЕ 856 (проверено: iPad-альбомная 800/820/834, ноутбук 1366×768) гарантированно
   переполнялся бы, любой от 864 и выше (проверено: 1536×864, 1440×900) и так помещается без
   всякой правки — их раскладку не трогаем, чтобы не менять вид сайта там, где он и не
   ломался. */
@media (max-width: 1100px), (max-height: 855px) {
  .hero { height: auto; padding-top: 32px; padding-bottom: 32px; }
  .hero-static { flex-direction: column; padding-left: 24px; padding-right: 24px; text-align: center; }
  .hero-copy { max-width: 100%; }
  .hero-copy .eyebrow { margin-bottom: 12px; }
  .hero-copy h1 { font-size: 42px; margin-bottom: 18px; }
  .hero-points { align-items: center; gap: 9px; margin-bottom: 10px; }
  .hero-points li { text-align: left; font-size: 15px; }
  .hero-teaser { margin-bottom: 18px; }
  .hero-visual { position: static; width: 100%; margin-top: 20px; transform: none; }
}
@media (max-width: 720px) {
  .section, .section-tight { padding: 50px 16px; }
  .hero-copy h1 { font-size: 34px; }
  .story-row { padding: 28px 20px; gap: 32px; }
  .feature-card { padding: 20px; }
  .modules-grid { grid-template-columns: 1fr; gap: 16px; }
  /* поля карточки на телефоне меньше — обложка тянется под них, иначе торчит за край */
  .module-card-art { width: calc(100% + 40px); margin: 0 -20px 14px; }
  .revenue-kpis { gap: 8px; }
}

/* ===== Страница "Возможности" ===== */
.features-toc { max-width: 900px; margin: 0 auto 40px; padding: 24px 28px; }
.features-toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 20px;
}
.features-toc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--fg-dim);
  transition: background .15s, color .15s;
}
.features-toc-link:hover { background: rgba(255, 255, 255, .05); color: var(--fg); }
.features-toc-icon { flex-shrink: 0; font-size: 17px; }

.features-list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.feature-block {
  padding: 32px;
  scroll-margin-top: 24px;
}
.feature-block-icon { font-size: 26px; display: block; margin-bottom: 10px; }
.feature-block-copy h3 { font-size: 22px; margin-bottom: 10px; }
.feature-block-copy p { font-size: 15.5px; color: var(--fg-dim); line-height: 1.6; max-width: 640px; }

/* ⭐ С209: формат 16:9 закреплён здесь, а не только форматом самих картинок — единый макет
   держится, даже если в будущем кто-то подставит файл с другими пропорциями. */
.feat-shot-ready {
  margin-top: 18px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  aspect-ratio: 16 / 9;
}
.feat-shot-ready img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feat-shot-slot {
  margin-top: 18px;
  padding: 40px 20px;
  text-align: center;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .015);
}
.feat-shot-slot-icon { font-size: 26px; opacity: .45; margin-bottom: 8px; }
.feat-shot-slot-desc { font-size: 12.5px; color: var(--fg-mute); max-width: 460px; margin: 0 auto; line-height: 1.5; }

/* ===== Страница "О нас" ===== */
.about-stats {
  max-width: 820px;
  margin: 0 auto 24px;
  padding: 32px 40px;
}
/* ⭐ С209: эти правила случайно удалились вместе со старыми CSS-заглушками StoryRow на
   главной (revenue.webp их заменил) — а about-stats их тоже использует. Восстановлено. */
.revenue-kpis { display: flex; justify-content: space-between; gap: 12px; }
.revenue-kpis > div { display: flex; flex-direction: column; gap: 6px; }
.rk-num { font-size: 26px; font-weight: 600; color: var(--fg); letter-spacing: -.01em; }
.rk-num.accent { color: var(--accent-warm); }
.rk-label { font-size: 11.5px; color: var(--fg-mute); letter-spacing: .02em; }
.about-story {
  max-width: 820px;
  margin: 0 auto 40px;
  padding: 40px;
}
.about-story h3 { font-size: 20px; margin-bottom: 16px; }
.about-story p { font-size: 15.5px; color: var(--fg-dim); line-height: 1.7; }
.about-story p + p { margin-top: 14px; }
.about-values { margin-top: 0; }

/* ===== Страница "Тарифы" ===== */
/* ⭐ С209 (Михаил): подзаголовок и примечание под демо-карточкой переносились на 2 строки —
   расширяем именно pricing (не .section-head глобально, чтобы не задеть другие страницы). */
.pricing-page .section-head { max-width: 760px; }
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto 56px;
}
.pricing-grid-single { grid-template-columns: 1fr; max-width: 480px; }
/* ⭐ С208 (Михаил): вторая карточка — демо. Списки в карточках разной длины, поэтому кнопки
   прижимаем к низу: иначе они висят на разной высоте и пара выглядит кривой. */
.pricing-card .pricing-list { width: 100%; }
.pricing-card > .btn { margin-top: auto; }
.pricing-card-demo { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
/* Кнопка демо намеренно спокойнее акцентной: главное действие — платный тариф, демо рядом
   как «сначала попробовать», а не как конкурирующий призыв. */
.pricing-btn-ghost {
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--fg);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transition: background .2s ease, border-color .2s ease;
}
.pricing-btn-ghost:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}
.pricing-card-note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-mute);
}
.pricing-card { padding: 40px; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.pricing-card-badge {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  font-weight: 600;
}
.pricing-card-name { font-size: 26px; font-weight: 700; margin: 10px 0 8px; color: var(--fg); }
.pricing-card-price { font-size: 34px; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.pricing-card-price span { font-size: 14px; font-weight: 500; color: var(--fg-mute); }
.pricing-card-note { font-size: 14px; color: var(--fg-mute); line-height: 1.5; margin-bottom: 4px; }
.pricing-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; flex: 1; text-align: left; width: 100%; }
.pricing-list li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--fg-dim);
  line-height: 1.5;
}
.pricing-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}
.pricing-card .btn { margin-top: 28px; }
.pricing-modules-head { margin-top: 8px; }

/* ===== Страница "В разработке" ===== */
.roadmap-product { max-width: 860px; margin: 0 auto 32px; padding: 48px; }
.roadmap-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 100px;
  background: rgba(255, 209, 128, .14);
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 20px;
}
.roadmap-product-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.roadmap-product-icon { font-size: 32px; flex-shrink: 0; }
.roadmap-product h2 { font-size: 26px; }
.roadmap-product .tagline { font-size: 15px; font-weight: 600; color: var(--accent); margin-top: 4px; }
.roadmap-product .desc { font-size: 15.5px; color: var(--fg-dim); line-height: 1.7; margin-bottom: 20px; }
.roadmap-subjects { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.roadmap-product .pricing-list { margin-top: 0; margin-bottom: 28px; }

/* ===== Страница "Контакты" ===== */
.contacts-grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
  /* ⭐ С208 (Михаил): было align-items: start — левый блок с реквизитами получался короче формы
     и «висел». Растягиваем обе карточки на одну высоту, а строки внутри распределяем равномерно,
     чтобы пустота не собиралась внизу одним куском. */
  align-items: stretch;
}
.contacts-info {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contacts-info-row { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.contacts-info-row:last-child { border-bottom: none; }
.contacts-info-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-mute); margin-bottom: 4px; }
.contacts-info-row a, .contacts-info-row span { font-size: 16px; color: var(--fg); }
.contacts-info-row a:hover { color: var(--accent); }

.contacts-form-card { padding: 32px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fg-mute); }
.contact-form input, .contact-form textarea {
  font: inherit;
  font-size: 14.5px;
  color: var(--fg);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: 11px 14px;
  resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, .06);
}
.contact-form button { align-self: flex-start; }
.contact-form-error { font-size: 13px; color: #ff8a8a; margin: 0; }
.contact-form-done { text-align: center; padding: 40px 20px; }
.contact-form-done-icon {
  width: 44px; height: 44px; margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(126, 230, 160, .14);
  color: var(--ok);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
}
.contact-form-done p { color: var(--fg-dim); font-size: 15px; }

@media (max-width: 720px) {
  .contacts-grid { grid-template-columns: 1fr; }
  .feature-block { padding: 24px; }
}

/* ===== Мобильные доводки (ОБЯЗАТЕЛЬНО в конце файла — у .pricing-card/.roadmap-product/
   .about-stats/.about-story есть свои базовые правила ниже по файлу в разделах страниц;
   при равной специфичности побеждает то, что идёт ПОЗЖЕ в файле, а не то, что внутри
   @media — эти overrides должны физически идти после всех page-специфичных секций) ===== */
/* ⭐ С209 (мобильный аудит): .pricing-grid тоже относится к этому классу бага — её базовое
   правило (grid-template-columns: 1fr 1fr) объявлено дальше по файлу, в разделе "Тарифы",
   поэтому оригинальный override в общем @media(900px) блоке проигрывал и две карточки тарифа
   сжимались в две узкие колонки на телефоне вместо одной под другой. */
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .pricing-card { padding: 28px 20px; }
  .roadmap-product { padding: 28px 20px; }
  .roadmap-product-head > div { flex: 1; min-width: 0; }
  .about-stats { padding: 24px 20px; }
  .about-story { padding: 28px 20px; }

  /* единый читаемый размер текста-абзацев вместо разнобоя 13.5-16px */
  .feature-card p { font-size: 15px; }
  .pricing-list li { font-size: 15px; }
  .chip-tag { font-size: 14px; }
  .nav-mobile a { font-size: 16px; }
}

/* С196 (аудит): согласие на обработку персональных данных в форме контактов. */
.contact-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.45; opacity: .85;
}
.contact-consent input { margin-top: 3px; flex: 0 0 auto; }
.contact-consent a { color: var(--accent); text-decoration: underline; }

/* ⭐ С230: блок вопросов-ответов внизу страницы возможностей (SEO-кластер «управление
   VR-шлемом», «ограничить время игры», «трансляция на телевизор»). Раскладка та же, что у
   карточек модулей на главной, чтобы страница не выглядела склеенной из разных макетов. */
.features-faq { margin-top: 46px; }
.features-faq-list {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.features-faq-item { padding: 18px 20px; }
.features-faq-item h3 { margin: 0 0 8px; font-size: 15.5px; line-height: 1.35; }
.features-faq-item p { margin: 0; font-size: 13.5px; line-height: 1.6; opacity: .82; }

/* ⭐ С230: переключатель языка в шапке. Не флаги, а буквенный код: флаг обозначает страну,
   а не язык, и для испанского или английского выбрать «правильный» флаг невозможно. */
.lang-switch { position: relative; }
.lang-switch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  color: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.lang-switch-btn:hover { background: rgba(255, 255, 255, .08); }
.lang-switch-list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 168px; padding: 6px; border-radius: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.lang-switch-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px;
  font-size: 13.5px; text-decoration: none; color: inherit; white-space: nowrap;
}
.lang-switch-item:hover { background: rgba(255, 255, 255, .07); }
.lang-switch-item.is-current { color: var(--accent); }
.lang-switch-short { font-weight: 700; font-size: 12px; opacity: .75; min-width: 22px; }

.nav-mobile-langs { display: flex; gap: 8px; margin-top: 10px; }
.nav-mobile-lang {
  padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .12); text-decoration: none; color: inherit;
}
.nav-mobile-lang.is-current { color: var(--accent); border-color: var(--accent); }
@media (max-width: 900px) { .lang-switch { display: none; } }
/* Стили блога UnitVR: список статей, типографика статьи (.prose), выноски, таблицы, крошки, CTA.
   Опирается на токены темы (--fg, --accent, --glass-*) и общие классы (.card.glass.grain). */

/* ── Список статей ── */
.blog-page { max-width: 1320px; margin: 0 auto; }
.blog-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 900px) { .blog-list { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 600px) { .blog-list { grid-template-columns: 1fr; } }
.blog-card {
  display: flex;
  flex-direction: column;
  padding: 18px;
  text-decoration: none;
  color: var(--fg);
  transition: transform .18s ease, box-shadow .18s ease;
}
.blog-card:hover { transform: translateY(-3px); }
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.blog-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(138, 180, 255, .12);
  border: 1px solid rgba(138, 180, 255, .22);
}
.blog-card-time { font-size: 13px; color: var(--fg-mute); }
.blog-card-title { font-size: 18px; line-height: 1.3; margin: 0 0 8px; }
.blog-card-excerpt {
  font-size: 13.5px; line-height: 1.55; color: var(--fg-dim); margin: 0 0 14px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-more { font-size: 14px; font-weight: 600; color: var(--accent); margin-top: auto; }

/* ── Страница статьи ── */
.article-page { max-width: 800px; margin: 0 auto; }
.breadcrumbs { font-size: 13px; color: var(--fg-mute); margin-bottom: 20px; }
.breadcrumbs a { color: var(--fg-dim); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { margin: 0 6px; }
.breadcrumbs-current { color: var(--fg-mute); }
.article-head { margin-bottom: 28px; }
.article-head h1 { font-size: 34px; line-height: 1.2; margin: 14px 0 0; }

/* ── Типографика тела (.prose) ── */
.prose { padding: 36px 40px; }
.prose > *:first-child { margin-top: 0; }
.prose p { font-size: 16.5px; line-height: 1.72; color: var(--fg-dim); margin: 0 0 18px; }
.prose .prose-lead { font-size: 18.5px; line-height: 1.66; color: var(--fg); margin-bottom: 26px; }
.prose h2 { font-size: 25px; line-height: 1.3; margin: 40px 0 14px; color: var(--fg); }
.prose h3 { font-size: 19px; line-height: 1.35; margin: 28px 0 10px; color: var(--fg); }
.prose ul { margin: 0 0 20px; padding-left: 22px; }
.prose li { font-size: 16.5px; line-height: 1.66; color: var(--fg-dim); margin-bottom: 9px; }
.prose li b { color: var(--fg); }
.prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(138, 180, 255, .35); }
.prose a:hover { border-bottom-color: var(--accent); }
.prose b { color: var(--fg); }

/* Выноска */
.prose-callout {
  margin: 24px 0;
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(138, 180, 255, .07);
  border: 1px solid rgba(138, 180, 255, .18);
  border-left: 3px solid var(--accent);
}
.prose-callout-title { font-weight: 700; color: var(--fg); margin-bottom: 8px; font-size: 15px; }
.prose-callout p, .prose-callout li { margin-bottom: 6px; }
.prose-callout > div > *:last-child { margin-bottom: 0; }

/* Таблица */
.prose-table-wrap { overflow-x: auto; margin: 22px 0; border-radius: 12px; }
.prose-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 420px; }
.prose-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--fg);
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.prose-table td {
  padding: 11px 16px;
  color: var(--fg-dim);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.prose-table tfoot td { color: var(--fg); font-weight: 600; background: rgba(255, 255, 255, .03); }

/* CTA под статьёй */
.article-cta { margin-top: 32px; padding: 30px 36px; text-align: center; }
.article-cta h3 { font-size: 22px; margin: 0 0 10px; }
.article-cta p { font-size: 15.5px; line-height: 1.6; color: var(--fg-dim); max-width: 560px; margin: 0 auto 20px; }
.article-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.article-more { margin-top: 40px; }
.article-more > h3 { font-size: 20px; margin: 0 0 18px; }
.article-more .blog-card-title { font-size: 17px; }

@media (max-width: 640px) {
  .prose { padding: 24px 22px; }
  .article-head h1 { font-size: 27px; }
  .prose h2 { font-size: 22px; }
}

/* ── Обложки (С206) ── */
/* превью в карточке списка: тянем к краям карточки (у .blog-card padding 24px) */
.blog-card-cover {
  margin: 0 0 14px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1200 / 630;
  background: rgba(255, 255, 255, .03);
}
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* hero статьи */
.article-hero { margin: 0 0 28px; }
.article-hero img {
  width: 100%;
  border-radius: 16px;
  display: block;
  aspect-ratio: 40 / 21;
  object-fit: cover;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}
.article-hero-credit { font-size: 12px; color: var(--fg-mute); margin-top: 8px; text-align: right; }

/* картинка внутри текста */
.prose-figure { margin: 26px 0; }
.prose-figure img {
  width: 100%;
  border-radius: 12px;
  display: block;
  border: 1px solid rgba(255, 255, 255, .07);
}
.prose-figure figcaption {
  font-size: 13.5px;
  color: var(--fg-mute);
  margin-top: 10px;
  line-height: 1.5;
  text-align: center;
}

/* нумерованные шаги в инструкциях */
.prose-steps { margin: 0 0 20px; padding-left: 4px; list-style: none; counter-reset: step; }
.prose-steps li {
  position: relative; padding-left: 44px; margin-bottom: 14px;
  font-size: 16.5px; line-height: 1.6; color: var(--fg-dim); counter-increment: step;
}
.prose-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--accent-fg, #0d1017);
  background: linear-gradient(135deg, #a9caff, #8ab4ff);
}