/* ============================================================
   TONY SOPRANO ICT — INSTITUTIONAL NOIR
   Палитра: off-black #0a0a0a · тёплый белый #f4f0ea ·
   графит #2a2a2a/#8a8a8a · золото #d4af37 (дозированно)
   ============================================================ */

:root {
  --black: #0a0a0a;
  --white: #f4f0ea;
  --graphite-dark: #2a2a2a;
  --graphite: #8a8a8a;
  --gold: #d4af37;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 88px;

  /* ---- Токены «толстого дымчатого стекла» (нав-капсула + карточки шаблона 2) ---- */
  --glass-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --glass-blur: 18px;
  --glass-sat: 125%;
  --glass-contrast: 105%;
  --glass-top: rgba(255,255,255,0.14);
  --glass-top-mid: rgba(255,255,255,0.055);
  --glass-mid: rgba(15,16,17,0.72);
  --glass-base: rgba(3,4,5,0.88);
  --glass-edge-light: rgba(255,255,255,0.35);
  --glass-edge-dark: rgba(0,0,0,0.9);
  --glass-gold-reflect: rgba(191,151,55,0.09);
  /* Едва заметное зерно стекла — тот же приём, что у .layer-grain, но статичный и тише */
  --glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Люфт по горизонтали (правка владельца 2026-08-06: «двигаешь пальцем
   налево-направо — шаблон едет, убери люфт»).

   Клип стоял только на body, а html оставался visible. По спецификации
   overflow с body тогда всплывает на вьюпорт — на десктопе это работает
   (замер: document.scrollWidth == innerWidth), но на телефоне остаётся
   отбой: страницу можно оттянуть вбок, и она пружиной возвращается. Это
   и есть люфт, который владелец видел в «методе» и «наставнике» —
   геометрического вылета в «методе» нет вообще (замер 0px), ехала вся
   страница целиком.

   Лечим двумя средствами. `clip` вместо `hidden` — он, в отличие от
   hidden, вообще не делает элемент скролл-контейнером, поэтому оттянуть
   нечего; заодно не ломает position:sticky у пин-скролла витрины, чем
   грешит hidden. `overscroll-behavior-x: none` глушит сам отбой там, где
   браузер всё же считает вьюпорт горизонтально прокручиваемым. */
html {
  scroll-behavior: auto;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
}

body.no-native-cursor, body.no-native-cursor a, body.no-native-cursor button { cursor: none; }

::selection { background: rgba(212, 175, 55, 0.25); color: var(--white); }

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; color: inherit; }

/* ---------- Прелоадер (деполюкс-стиль) ---------- */

.preloader {
  position: fixed; inset: 0;
  z-index: 200;
  background: #f4f0ea;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s var(--ease-out), visibility 0.8s;
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9vh;
}

.preloader-row {
  display: flex;
  justify-content: center;
}

.preloader-letter {
  font-family: var(--serif);
  font-size: clamp(64px, 9vw, 150px);
  line-height: 1;
  color: #0a0a0a;
  opacity: 0;
}

.preloader-letter--lg {
  font-size: clamp(74px, 10.8vw, 180px);
}

.preloader-subtitle {
  font-family: var(--sans);
  font-size: clamp(15px, 1.3vw, 21px);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #8a723f;
  text-align: center;
  margin-top: -2vh;
  opacity: 0;
}

body.is-loading { overflow: hidden; }

@media (max-width: 767px) {
  .preloader-word { gap: 6vh; }
}

/* ---------- Слои фона ---------- */

/* Размытая подложка под видео: cover без ограничений на кроп (это фон,
   не герой кадра). Осветлена до уровня самого клипа — тёмная версия
   читалась как «чёрные пустые поля». Заполняет края, которые оставляет
   честный contain-кадр на окнах шире 16:9: рамка видео визуально
   тянется от края до края, а фигура в чётком слое не растягивается. */
.layer-bg {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  object-fit: cover;
  z-index: -1;
  filter: blur(50px) brightness(0.72) saturate(1.1) grayscale(0.25);
  transform: scale(1.2);
  transition: opacity 0.6s var(--ease-out);
}
#orbit-bg, #bear-orbit-bg { opacity: 0; }
/* На touch орбитные слои не работают (ticker зон не запускается) —
   прячем их подложки, скраб-подложка остаётся для landscape-телефонов */
body.is-touch #orbit-bg, body.is-touch #bear-orbit-bg { display: none; }

.layer-video {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  /* База (окна НЕ шире 16:9, т.е. обычные и портретные): cover заполняет
     экран целиком, кропая только БОКА кадра (стены зала) — фигура в
     центре остаётся видна с головы до ног, полей нет вовсе. */
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
  filter: grayscale(0.25) contrast(1.04);
  transition: opacity 0.6s var(--ease-out);
}

/* Окна ШИРЕ родных 16:9 (ультравайд, невысокие браузерные окна): cover
   резал бы фигуре голову/ноги — переключаемся на contain (весь кадр
   виден, масштаб фигуры не меняется), боковые поля закрывает .layer-bg,
   а границу чёткого кадра растушёвывает JS-маска (initVideoFeather). */
@media (min-aspect-ratio: 16/9) {
  .layer-video { object-fit: contain; }
}

/* Фигура целиком и с воздухом (правка владельца 2026-07-31: «бык и медведь
   должны полностью вмещаться в кадр»). На десктопе слой отступает от
   фиксированной шапки (88px) и от низа, а contain вписывает 16:9-кадр в
   этот бокс на ЛЮБОЙ пропорции окна — раньше на окнах не шире 16:9 cover
   растягивал кадр на всю высоту экрана, и зверь упирался в кромки: голова
   уходила под шапку, лапы — под нижний срез. Поля закрывают блюр-подложки
   .layer-bg, обе кромки кадра растушёвывает JS-маска (updateVideoFeather).
   Отступы одинаковы для всех трёх слоёв — масштаб скраба и орбит совпадает
   (требование владельца от 2026-07-10 сохранено). */
body:not(.is-touch) .layer-video {
  /* height задан явно: у <video> height:auto считался бы из пропорции
     самого ролика, и нижний отступ игнорировался бы */
  top: calc(88px + 1.5vh);
  height: calc(100vh - 88px - 5vh);
  object-fit: contain;
}

#orbit-video, #bear-orbit-video { opacity: 0; }
body.is-touch #orbit-video, body.is-touch #bear-orbit-video { display: none; }

.layer-tint {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.28) 40%, rgba(10,10,10,0.62) 100%);
}

.layer-dust { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.55; }

.layer-grain {
  position: fixed; inset: -100px; z-index: 2; pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-32px, 18px); }
  50% { transform: translate(24px, -26px); }
  75% { transform: translate(-14px, -8px); }
  100% { transform: translate(0, 0); }
}

.layer-vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 130% 100% at 50% 45%, transparent 55%, rgba(0,0,0,0.5) 100%);
}

main { position: relative; z-index: 10; }

/* ---------- Типографика-утилиты ---------- */

.section-label {
  font-size: clamp(11px, 0.72vw, 13px); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 3rem;
  display: flex; align-items: center; gap: 1rem;
}
.section-label::after { content: ''; height: 1px; width: 64px; background: var(--graphite-dark); }

.corner-label {
  position: absolute;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(138,138,138,0.85); /* было 0.55 — ~2.2:1, ниже WCAG AA */
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 5;
}
.corner-tl { top: calc(var(--header-h) + 18px); left: 28px; }
.corner-br { bottom: 24px; right: 28px; }
.corner-bl { bottom: -32px; left: 4px; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95em 2.4em;
  font-size: clamp(12px, 0.8vw, 16px); letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid rgba(244,240,234,0.28);
  border-radius: 2px;
  transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out),
              color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  will-change: transform;
}
.btn:hover { border-color: rgba(244,240,234,0.7); transform: translateY(-2px); }

/* ---------- Доступность: видимый фокус с клавиатуры + skip-link ---------- */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: 12px; left: 12px;
  z-index: 300; /* выше прелоадера (200) и шапки (50) */
  padding: 12px 20px;
  background: var(--black);
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 2px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  transform: translateY(calc(-100% - 16px));
  transition: transform 0.2s ease;
}
.skip-link:focus-visible { transform: none; }

.btn-gold { border-color: rgba(212,175,55,0.55); color: var(--gold); }
.btn-gold:hover {
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(212,175,55,0.18), 0 10px 32px rgba(0,0,0,0.5);
  background: rgba(212,175,55,0.06);
}

.btn-large { padding: 1.15em 3.2em; font-size: 13px; }

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

.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: 2.5rem;
  padding: 0 28px;
  background: rgba(10,10,10,0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(244,240,234,0.06);
  transition: transform 0.5s var(--ease-out);
}

.header-crest { display: flex; align-items: center; gap: 1.1rem; }
.header-crest img {
  /* PNG уже круглый с прозрачным фоном и диском точно по центру —
     drop-shadow-ореол ложится симметрично без border-radius */
  width: 60px; height: 60px;
  /* Тёпло-молочный rim-glow по контуру — тот же цвет, что и rim-light
     быка/медведя (#f4f0ea): силуэт герба читается на тёмном фоне */
  filter:
    drop-shadow(0 0 1px rgba(244,240,234,0.9))
    drop-shadow(0 0 6px rgba(244,240,234,0.45))
    drop-shadow(0 0 14px rgba(244,240,234,0.22));
  transition: filter 0.4s var(--ease-out);
}
.header-crest:hover img {
  filter:
    drop-shadow(0 0 1px rgba(244,240,234,1))
    drop-shadow(0 0 8px rgba(244,240,234,0.6))
    drop-shadow(0 0 18px rgba(244,240,234,0.32));
}
.header-wordmark {
  font-family: var(--serif);
  font-size: clamp(17px, 1.3vw, 26px); letter-spacing: 0.22em;
  color: var(--white);
  white-space: nowrap;
}

.site-nav { display: flex; gap: clamp(2.2rem, 2.4vw, 3rem); margin-left: auto; }
.site-nav a {
  font-size: clamp(11px, 0.72vw, 13.5px); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--graphite);
  transition: color 0.3s;
  position: relative;
}
.site-nav a::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.site-nav a:hover { color: var(--white); }
.site-nav a:hover::after { transform: scaleX(1); }

/* ---------- Glow-меню (адаптация shadcn/ui glow-menu, без React) ----------
   Оригинал: framer-motion itemVariants rotateX 0→-90 (front) / 90→0 (back),
   glowVariants scale 0.8→2 + radial-gradient, navGlow на контейнере.
   Здесь те же движения на CSS-переходах; spring ≈ cubic-bezier с овершутом.
   Палитра приведена к сайту: золото/бронза/слоновая кость вместо радуги. */

/* Толстая дымчатая стеклянная капсула: многослойный background (не один
   градиент), двойная рамка (светлый border + тёмное кольцо box-shadow),
   4 группы теней (внутр. толщина, боковые грани, внешний отрыв, слабый
   золотой ореол), верхний глянцевый блик (::before) и нижняя виньетка
   с едва заметным золотым рефлексом + зерно стекла (::after). */
.nav-glowbar {
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 6px;
  border-radius: 20px;
  border: 1px solid var(--glass-edge-light);
  background:
    linear-gradient(180deg,
      var(--glass-top) 0%,
      var(--glass-top-mid) 18%,
      var(--glass-mid) 48%,
      var(--glass-base) 100%);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) contrast(var(--glass-contrast));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 8px 18px rgba(255,255,255,0.045),
    inset 0 -10px 18px rgba(0,0,0,0.72),
    inset 1px 0 0 rgba(255,255,255,0.07),
    inset -1px 0 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(0,0,0,0.55),
    0 12px 28px rgba(0,0,0,0.65),
    0 2px 5px rgba(0,0,0,0.9),
    0 0 24px var(--glass-gold-reflect);
  position: relative;
  transform: translateZ(0);
  transition: box-shadow 0.4s var(--glass-ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-glowbar { background: linear-gradient(180deg, #201f1c 0%, #121110 48%, #08090a 100%); }
}
/* Верхний глянцевый блик: узкая светлая дуга, не перекрывает текст пунктов */
.nav-glowbar::before {
  content: ''; position: absolute; left: 6%; right: 6%; top: 2px; height: 40%;
  border-radius: 16px 16px 60% 60%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.06) 60%, transparent);
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}
/* Нижняя виньетка + слабый золотой рефлекс + едва заметное зерно стекла;
   на hover ореол чуть разгорается — тот же приём, что был раньше */
.nav-glowbar::after {
  content: ''; position: absolute; inset: 0; border-radius: 20px;
  background-image:
    radial-gradient(ellipse at 50% 125%, rgba(212,175,55,0.16), transparent 55%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,0.4) 100%),
    var(--glass-grain);
  background-size: auto, auto, 120px 120px;
  background-blend-mode: normal, normal, overlay;
  opacity: 0.7;
  transition: opacity 0.5s var(--glass-ease);
  z-index: 0;
  pointer-events: none;
}
.nav-glowbar:hover::after { opacity: 1; }
.nav-glowbar > * { position: relative; z-index: 1; }

.nav-glowbar a {
  padding: 0.62em 1.05em;
  border-radius: 10px;
  perspective: 600px;
  white-space: nowrap;
}
.nav-glowbar a::after { display: none; } /* золотое подчёркивание — деталь старого меню */

.nav-flip { position: relative; display: block; transform-style: preserve-3d; }
/* «Страница книги»: медленный плавный ease-in-out без пружины —
   передняя грань неспешно складывается вниз, задняя выкатывается
   сверху с лёгкой задержкой, как следующий лист под открытым */
.nav-face {
  display: block;
  backface-visibility: hidden;
  transition: transform 0.95s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-front { transform: rotateX(0); transform-origin: center bottom; }
.nav-back {
  position: absolute; inset: 0;
  transform: rotateX(90deg); opacity: 0;
  transform-origin: center top;
  transition-delay: 0.08s;
  color: var(--white);
}
.nav-glowbar a:hover .nav-front, .nav-glowbar a.is-hover .nav-front { transform: rotateX(-90deg); opacity: 0; }
.nav-glowbar a:hover .nav-back,  .nav-glowbar a.is-hover .nav-back  { transform: rotateX(0); opacity: 1; }

/* Радиальное свечение пункта (glowVariants: opacity 0/scale .8 → 1/2) */
.nav-glow {
  position: absolute; inset: -4px -6px;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(212,175,55,0.22) 0%, rgba(212,175,55,0.08) 50%, transparent 100%);
  opacity: 0;
  transform: scale(0.8);
  /* Свечение разгорается в темпе «книжного» переворота */
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1), transform 0.95s cubic-bezier(0.645, 0.045, 0.355, 1);
  pointer-events: none;
  z-index: -1;
}
.nav-glow--bronze { background: radial-gradient(circle, rgba(138,114,63,0.30) 0%, rgba(138,114,63,0.10) 50%, transparent 100%); }
.nav-glow--ivory  { background: radial-gradient(circle, rgba(244,240,234,0.16) 0%, rgba(244,240,234,0.06) 50%, transparent 100%); }
.nav-glowbar a:hover .nav-glow, .nav-glowbar a.is-hover .nav-glow { opacity: 1; transform: scale(1.6); }

.session-clocks {
  display: flex; align-items: center; gap: 1.1rem;
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}
.clock-city { color: rgba(138,138,138,0.95); letter-spacing: 0.22em; font-size: 10px; } /* было 0.7/9px — ~3.3:1, ниже WCAG AA */
.clock-time { color: var(--white); margin-left: 0.4em; }
.clock-divider { width: 1px; height: 14px; background: var(--graphite-dark); }

/* Средние ширины: с 7 пунктами glow-меню и 3 часами шапка широкая —
   раньше отпускаем словомарку, потом часы (бургер-меню включается с 900px) */
@media (max-width: 1460px) {
  .header-wordmark { display: none; }
}
@media (max-width: 1180px) {
  .session-clocks { display: none; }
}

.menu-toggle { display: none; }

/* ---------- HERO / МАНИФЕСТ ---------- */

.s-manifest {
  position: relative;
  min-height: 140vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--header-h) 24px 0;
}

.hero-bull {
  position: absolute; inset: 0;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

/* Кинолента Wall Street за быком: полупрозрачный screen-слой,
   центр замаскирован — бык, манифест и CTA остаются чистыми */
.hero-backdrop {
  position: absolute; inset: 0;
  z-index: 1;
  -webkit-mask-image: radial-gradient(ellipse 115% 95% at 50% 52%, transparent 9%, #000 40%);
  mask-image: radial-gradient(ellipse 115% 95% at 50% 52%, transparent 9%, #000 40%);
}

.backdrop-strip {
  position: absolute;
  top: -4%; bottom: -4%;
  left: -20%; width: 140%;
  height: 108%;
  object-fit: cover;
  background: url('../assets/img/wallstreet-backdrop.jpg') center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0.45;
  /* Палитра сайта: гасим бордовый, оставляем тёплое золото на off-black.
     Яркость модулирует JS (эффект тумана) */
  filter: grayscale(0.45) sepia(0.32) saturate(1.05) brightness(0.8) contrast(1.07);
  will-change: transform, filter;
}

.backdrop-sweep {
  position: absolute; inset: 0;
  mix-blend-mode: screen;
  opacity: 0.5;
  background: linear-gradient(100deg, transparent 44%, rgba(212,175,55,0.10) 50%, rgba(244,240,234,0.07) 52%, rgba(212,175,55,0.08) 54%, transparent 60%);
  background-size: 260% 100%;
  animation: backdrop-sweep 9s ease-in-out infinite;
}
@keyframes backdrop-sweep {
  0%, 12% { background-position: 118% 0; }
  55%, 100% { background-position: -22% 0; }
}

#bull-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.bull-static { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }

.manifest-inner {
  position: relative; z-index: 3;
  max-width: 1100px;
  min-height: calc(100vh - var(--header-h));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.2rem;
}

.manifest-line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.2vw, 5.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 40px rgba(0,0,0,0.6);
}

.manifest-sub {
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--graphite);
}

.manifest-cta { margin-top: 1rem; }

.hero-ticker {
  position: absolute; bottom: 0; left: 0; right: 0;
  overflow: hidden;
  border-top: 1px solid rgba(244,240,234,0.07);
  padding: 14px 0;
  z-index: 3;
  background: rgba(10,10,10,0.3);
}
.ticker-track {
  display: flex; white-space: nowrap;
  font-size: 11px; letter-spacing: 0.18em;
  color: rgba(138,138,138,0.8);
  font-variant-numeric: tabular-nums;
}
.ticker-track span { padding-right: 2rem; }

/* ---------- ШОУРИЛ (pinned) ---------- */

.glass {
  background: rgba(16,16,16,0.42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(244,240,234,0.09);
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}

/* Высота = «длина прокрутки» пришпиленного шоурила: ~63vh скролла на
   слайд. Было 340vh — владелец попросил быстрее переключение витрин 3–5

   ПРАВКА 2026-08-06 по отчёту тестировщика: «когда немного прокручиваешь
   этот блок, он может сразу перепрыгнуть с 1-го на 3-й».
   Арифметика подтвердила жалобу. Липкая сцена занимает 100vh, значит на
   саму прокрутку оставалось 190 − 100 = 90vh, то есть по 30vh на слайд.
   Один рывок трекпада на Mac с инерцией Lenis покрывает 60–90vh — второй
   слайд проскакивался целиком, человек его просто не видел.
   250vh дают 150vh прокрутки и по 50vh на слайд: запас вырос в 1.7 раза,
   проскок одним жестом становится маловероятным. К прежним 340vh НЕ
   возвращаемся — там переключение и было медленным, на что жаловался
   владелец. 250 — середина между двумя жалобами. */
.s-showreel { position: relative; height: 250vh; }

.showreel-stage {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
}

.reel-slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease-out), visibility 0.7s;
  display: flex; align-items: center;
  padding: 0 8vw;
}
.reel-slide.is-active { opacity: 1; visibility: visible; }

.reel-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) contrast(1.03);
  background: var(--black);
}

.reel-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.35) 55%, rgba(10,10,10,0.15) 100%);
}

.reel-card {
  position: relative; z-index: 2;
  /* Жёсткая ширина: flex-элемент иначе сжимается под контент и
     выглядит мелким на широких мониторах */
  width: clamp(480px, 36vw, 820px);
  max-width: 92vw;
  padding: clamp(3rem, 3.6vw, 5rem) clamp(3.2rem, 4vw, 5.4rem);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.reel-roman {
  font-family: var(--serif);
  font-size: clamp(4.4rem, 6.2vw, 8.6rem); line-height: 1;
  color: rgba(244,240,234,0.16);
  margin-bottom: 1.4rem;
}

.reel-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 2.9vw, 3.9rem);
  letter-spacing: 0.04em;
  margin-bottom: 1.1rem;
}

.reel-desc {
  font-size: clamp(0.92rem, 1.15vw, 1.5rem);
  color: rgba(244,240,234,0.72);
  margin-bottom: 1.8rem;
  line-height: 1.65;
}

.reel-price {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.4vw, 3.2rem);
  color: var(--gold);
  margin-bottom: 2rem;
}

.reel-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.reel-progress {
  position: absolute; right: 32px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
  z-index: 4;
}
.reel-dot {
  width: 5px; height: 32px;
  background: rgba(244,240,234,0.14);
  border-radius: 3px;
  transition: background 0.4s;
}
.reel-dot.is-active { background: var(--gold); }

/* ---------- ИНДЕКСНЫЙ СПИСОК ---------- */

.s-index { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }

.index-bg { position: absolute; inset: 0; }
.index-preview {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  filter: grayscale(0.4) brightness(0.5) contrast(1.05);
}
.index-preview.is-visible { opacity: 0.55; }

.index-inner {
  position: relative; z-index: 2;
  width: min(1360px, 92vw);
  margin: 0 auto;
  padding: 18vh 0;
}

.index-row {
  display: grid;
  grid-template-columns: clamp(80px, 6.5vw, 110px) 1fr auto clamp(120px, 9vw, 160px);
  align-items: baseline;
  gap: 2rem;
  padding: clamp(2.1rem, 2.4vw, 3rem) 1.2rem;
  border-top: 1px solid rgba(244,240,234,0.1);
  transition: background 0.4s, padding-left 0.5s var(--ease-out);
  position: relative;
}
.index-row:last-child { border-bottom: 1px solid rgba(244,240,234,0.1); }
.index-row::before {
  content: ''; position: absolute; left: 0; top: -1px;
  width: 0; height: 1px; background: var(--gold);
  transition: width 0.55s var(--ease-out);
}
.index-row:hover { background: rgba(244,240,234,0.025); padding-left: 2rem; }
.index-row:hover::before { width: 100%; }

.index-roman { font-family: var(--serif); font-size: clamp(1.9rem, 2.2vw, 2.7rem); color: rgba(244,240,234,0.45); transition: color 0.4s; } /* было 0.35 — ниже 3:1 даже для крупного текста */
.index-row:hover .index-roman { color: var(--gold); }
.index-name { font-family: var(--serif); font-size: clamp(1.4rem, 2.9vw, 2.8rem); letter-spacing: 0.03em; }
.index-note { font-size: clamp(11px, 0.7vw, 13px); letter-spacing: 0.22em; text-transform: uppercase; color: var(--graphite); }
.index-price { font-family: var(--serif); font-size: clamp(1.35rem, 1.7vw, 2rem); color: rgba(244,240,234,0.85); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- НАСТАВНИК ---------- */

.s-mentor { min-height: 120vh; display: flex; align-items: center; padding: 14vh 0; }

.mentor-inner {
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.mentor-portrait { position: relative; }

.holo-frame {
  position: relative;
  border: 1px solid rgba(244,240,234,0.12);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.55);
}
.holo-frame img {
  width: 100%;
  filter: grayscale(1) contrast(1.06) brightness(0.92);
}

/* Оживлённый портрет наставника (2026-07-31). Цветокоррекции НЕТ намеренно:
   владелец распорядился ставить оригинал как есть — это осознанное
   исключение из правила «без синих рефлексов», синева в тенях остаётся.
   Не «чинить» обесцвечиванием или сепией при следующих правках. */
.holo-video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.holo-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    transparent 0px, transparent 3px,
    rgba(10,10,10,0.22) 3px, rgba(10,10,10,0.22) 4px);
  mix-blend-mode: multiply;
}
.holo-scanlines::after {
  content: ''; position: absolute; left: 0; right: 0; height: 90px;
  background: linear-gradient(180deg, transparent, rgba(212,175,55,0.06), rgba(244,240,234,0.10), rgba(212,175,55,0.06), transparent);
  animation: holo-sweep 5.5s linear infinite;
}
@keyframes holo-sweep {
  0% { top: -20%; }
  100% { top: 115%; }
}

.holo-glitch {
  position: absolute; inset: 0;
  background: inherit;
  opacity: 0;
  animation: holo-glitch 7s steps(1) infinite;
  border-left: 2px solid rgba(212,175,55,0.35);
}
@keyframes holo-glitch {
  0%, 92% { opacity: 0; transform: none; }
  93% { opacity: 0.5; transform: translateX(-6px); }
  94% { opacity: 0; transform: none; }
  96.5% { opacity: 0.4; transform: translateX(4px) scaleY(1.01); }
  97% { opacity: 0; transform: none; }
}

.holo-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(244,240,234,0.13) 1px, transparent 1px);
  background-size: 22px 22px;
  mix-blend-mode: screen;
  opacity: 0.5;
}

.mentor-lines { list-style: none; margin: 0 0 3.4rem; }
.mentor-lines li {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.5;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(244,240,234,0.08);
}
.mentor-lines li:first-child { border-top: 1px solid rgba(244,240,234,0.08); }

/* ---------- ICT — 3D-портрет + цитаты ---------- */

.s-ict { min-height: 110vh; display: flex; align-items: center; padding: 14vh 0; }

.ict-inner {
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 460px) 1fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.ict-stage { position: relative; }

/* Портрет чуть уменьшен (правка владельца 2026-07-31): карточка ужимается
   целиком, поэтому золотая рамка сохраняет свою посадку к лицу. */
.tilt-scene { perspective: 1100px; width: 88%; margin-inline: auto; }

.tilt-card {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  border-radius: 4px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.6);
}

.tilt-img {
  width: 100%;
  border-radius: 4px;
  filter: grayscale(1) contrast(1.05);
  backface-visibility: hidden;
}

/* Оживлённый портрет (2026-07-31): обесцвечивание снято — в клипе работает
   золото контура, grayscale убил бы весь эффект. display:block снимает
   зазор под строчным элементом, aspect-ratio держит место до загрузки
   (клип квадратный), поэтому карточка не прыгает. */
.tilt-video {
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: contrast(1.03);
}

/* Золотая рамка из чистовика поверх клипа. mix-blend-mode: screen гасит
   чёрный фон картинки и оставляет только свечение — рамка ложится на видео
   без единой лишней пиксельной кромки. Портрет чуть уменьшен внутри неё
   (правка владельца 2026-07-31: «чуть уменьшить размер»), чтобы рамка
   обнимала кадр, а не наезжала на лицо. */
.tilt-goldframe {
  background: url('../assets/img/ict-frame-gold.png') center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  z-index: 3;
}
/* Клип НЕ масштабируем: рамка вырезана из того же кадра и должна стоять к
   портрету ровно так, как в оригинале. «Чуть уменьшить» решаем размером
   всей карточки — см. .tilt-scene ниже. */
#ict .tilt-frame { display: none; }   /* тонкая рамка на 14px спорила с настоящей */

.tilt-layer { position: absolute; inset: 0; border-radius: 4px; pointer-events: none; }

.tilt-scanlines {
  transform: translateZ(26px);
  background: repeating-linear-gradient(0deg,
    transparent 0px, transparent 3px,
    rgba(10,10,10,0.16) 3px, rgba(10,10,10,0.16) 4px);
  mix-blend-mode: multiply;
}

.tilt-dots {
  transform: translateZ(44px);
  background-image: radial-gradient(rgba(244,240,234,0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  mix-blend-mode: screen;
  opacity: 0.55;
}

.tilt-sheen {
  transform: translateZ(60px);
  background: linear-gradient(115deg, transparent 42%, rgba(244,240,234,0.09) 50%, rgba(212,175,55,0.06) 54%, transparent 62%);
  background-size: 240% 240%;
  background-position: var(--sheen-x, 70%) 50%;
}

.tilt-frame {
  position: absolute; inset: 14px;
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 2px;
  transform: translateZ(34px);
  pointer-events: none;
}

.ict-quotes { display: grid; gap: 2.8rem; }
.quote { border-left: 1px solid rgba(212,175,55,0.45); padding-left: 1.7rem; }
.quote-main {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  font-style: italic;
  line-height: 1.45;
  margin-bottom: 0.8rem;
}
.quote cite { font-style: normal; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(212,175,55,0.75); }

/* ---------- РЕЗУЛЬТАТЫ ---------- */

.s-results { min-height: 100vh; display: flex; align-items: center; padding: 14vh 0; }

.results-inner { width: min(1200px, 92vw); margin: 0 auto; }

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.result-card {
  padding: 2.6rem 2.4rem;
  display: flex; flex-direction: column; gap: 1.6rem;
  min-height: 240px;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s;
}
.result-card:hover { border-color: rgba(212,175,55,0.28); }
.result-card blockquote { font-size: 0.95rem; color: rgba(244,240,234,0.8); flex: 1; }
.result-card figcaption { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--graphite); }

/* ---------- ТАРИФЫ ---------- */

.s-tariffs { min-height: 110vh; display: flex; align-items: center; padding: 14vh 0; }

.tariffs-inner { width: min(1420px, 94vw); margin: 0 auto; }

.tariffs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  align-items: stretch;
}

.tariff-card {
  position: relative;
  padding: clamp(3rem, 3.2vw, 4rem) clamp(2.6rem, 2.8vw, 3.4rem);
  display: flex; flex-direction: column;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s;
}

.tariff-featured {
  border-color: rgba(212,175,55,0.5);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.18), 0 32px 80px rgba(0,0,0,0.5);
  transform: translateY(-14px);
}

.tariff-badge {
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 18px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold);
  background: var(--black);
  border: 1px solid rgba(212,175,55,0.5);
  border-radius: 2px;
  white-space: nowrap;
}

.tariff-roman { font-family: var(--serif); font-size: clamp(3rem, 3.4vw, 4.2rem); line-height: 1; color: rgba(244,240,234,0.14); margin-bottom: 1.3rem; }
.tariff-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.8vw, 2.1rem); letter-spacing: 0.04em; margin-bottom: 1rem; }
.tariff-desc { font-size: clamp(0.88rem, 0.95vw, 1.1rem); color: rgba(244,240,234,0.68); flex: 1; margin-bottom: 2rem; }
.tariff-price { font-family: var(--serif); font-size: clamp(2.1rem, 2.4vw, 2.9rem); color: var(--gold); margin-bottom: 1.8rem; }
.tariff-cta { align-self: flex-start; }

/* ---------- ФИНАЛ + ФУТЕР ---------- */

.s-final {
  min-height: 100vh;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding-top: 20vh;
}

.final-inner {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3rem;
  text-align: center;
  padding: 0 24px;
}

.final-line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 5rem);
  letter-spacing: -0.01em;
}

.site-footer {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.6rem;
  padding: 4rem 24px 3rem;
  /* Плавный кинематографичный переход вместо плоской заливки: у кнопки
     Telegram (верх) — прозрачно, к дисклеймеру (низ) — темнее исходных
     0.4, чтобы контраст текста (WCAG AA) не просел. Жёсткая линия
     border-top убрана — она читалась как шов на стыке с .final-inner. */
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(10,10,10,0.35) 30%,
    rgba(10,10,10,0.6) 70%,
    rgba(10,10,10,0.72) 100%);
}

.footer-links { display: flex; gap: 1rem; align-items: center; }
.footer-links a {
  display: inline-flex; align-items: center;
  padding: 0.8em 1.8em;
  font-size: 13px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(212,175,55,0.45);
  border-radius: 2px;
  transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.footer-links a:hover {
  border-color: var(--gold);
  background: rgba(212,175,55,0.08);
  box-shadow: 0 0 22px rgba(212,175,55,0.2), 0 8px 24px rgba(0,0,0,0.5);
  transform: translateY(-2px);
}
.footer-dot { display: none; }

.footer-crest {
  width: 176px; height: 176px; opacity: 0.95;
  filter:
    drop-shadow(0 0 3px rgba(244,240,234,0.85))
    drop-shadow(0 0 18px rgba(244,240,234,0.4))
    drop-shadow(0 0 36px rgba(244,240,234,0.2));
}

.footer-disclaimer {
  /* Кегль поднят 12px → clamp до 22px (правка владельца 2026-08-05, в два
     захода: сначала до 17, затем «ещё крупнее»). Фиксированные 12px не росли
     на больших экранах вообще, и обязательный дисклеймер финансовой ниши
     оказывался самым мелким текстом на сайте — мельче даже ссылок подвала
     (13px). Для юридического текста это плохо и по читаемости, и по
     существу: он должен быть виден, а не спрятан.
     Ширина 640 → 1100, чтобы при таком кегле строк осталось две (замерено:
     на 1100px 22px держит две строки, блок финала не растёт). */
  max-width: 1100px;
  text-align: center;
  font-size: clamp(15px, 1.2vw, 22px);
  line-height: 1.7;
  color: rgba(138,138,138,0.9); /* было 0.65/11px — ~3:1, ниже WCAG AA */
}

/* ---------- Кастомный курсор ---------- */

.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 100;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
body.no-native-cursor .cursor-dot, body.no-native-cursor .cursor-ring { display: block; }

.cursor-dot { width: 5px; height: 5px; background: var(--white); }
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(244,240,234,0.35);
  transition: width 0.3s, height 0.3s, border-color 0.3s;
}
.cursor-ring.is-hover { width: 52px; height: 52px; border-color: rgba(212,175,55,0.7); }

/* ---------- Reveal-состояния ---------- */

[data-reveal] { opacity: 0; transform: translateY(26px); }
body.no-js [data-reveal], body.reveal-fallback [data-reveal] { opacity: 1; transform: none; }

/* ---------- Мобильный fallback ---------- */

@media (max-width: 1023px) {
  .session-clocks { display: none; }
}

@media (max-width: 900px) {
  /* На 768–900px wordmark наезжал на меню — герба достаточно */
  .header-wordmark { display: none; }
}

@media (max-width: 767px) {
  :root { --header-h: 72px; }

  .site-header { gap: 1rem; padding: 0 18px; }
  .header-wordmark { display: none; }
  .header-crest img { width: 48px; height: 48px; }

  /* ВАЖНО: backdrop-filter на .site-header делает шапку containing block
     для fixed-потомков — оверлей меню сжимается до высоты шапки. Пока
     меню открыто, blur с шапки снимаем: оверлей всё равно перекрывает её. */
  body.menu-open .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10,10,10,0.96);
  }

  .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    flex-direction: column; align-items: center; justify-content: center;
    /* 7 пунктов (было 5): плотнее, чтобы X не уходил под sticky CTA-бар */
    gap: clamp(1.1rem, 2.6vh, 2rem);
    background: rgba(10,10,10,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translateY(-102%);
    transition: transform 0.55s var(--ease-out);
  }
  body.menu-open .site-nav { transform: translateY(0); }
  /* Sticky CTA-бар не должен перекрывать нижний пункт открытого меню */
  body.menu-open .mobile-cta { opacity: 0; pointer-events: none; }

  /* Люксовое меню: крупные заголовочные ссылки с каскадным появлением */
  .site-nav a {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 8.5vw, 2.5rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    padding: 10px 24px; /* тап-зона ≥44px */
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.3s;
  }
  body.menu-open .site-nav a { opacity: 1; transform: translateY(0); }
  body.menu-open .site-nav a:nth-child(1) { transition-delay: 0.12s; }
  body.menu-open .site-nav a:nth-child(2) { transition-delay: 0.19s; }
  body.menu-open .site-nav a:nth-child(3) { transition-delay: 0.26s; }
  body.menu-open .site-nav a:nth-child(4) { transition-delay: 0.33s; }
  body.menu-open .site-nav a:nth-child(5) { transition-delay: 0.40s; }
  body.menu-open .site-nav a:nth-child(6) { transition-delay: 0.47s; }
  body.menu-open .site-nav a:nth-child(7) { transition-delay: 0.54s; }
  .site-nav a::after { display: none; } /* золотое подчёркивание — деталь десктопного hover */

  /* Glow-меню — только десктопный паттерн: в полноэкранном каскаде
     пилюля, 3D-переворот и свечения выключены */
  .nav-glowbar { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; backdrop-filter: none; }
  /* БАГ ПРОЗРАЧНОГО МЕНЮ (скриншоты владельца с телефона, 2026-08-05).
     У нава два класса: .site-nav задаёт оверлею фон rgba(10,10,10,0.96)
     выше по блоку, а строка сброса .nav-glowbar над этим комментарием
     ставит background:none. Специфичность равная — побеждала поздняя,
     и меню открывалось прозрачным поверх контента. Возврат фона двумя
     классами (специфичность выше обеих строк) + -webkit-префикс блюра,
     без которого iOS Safari не размывает вовсе. */
  .site-nav.nav-glowbar {
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .nav-glowbar::before, .nav-glowbar::after { display: none; }
  .nav-glowbar a { perspective: none; }
  .nav-back, .nav-glow { display: none; }
  .nav-front { transform: none !important; opacity: 1 !important; }

  .menu-toggle {
    display: flex; flex-direction: column; gap: 6px;
    align-items: center; justify-content: center;
    margin-left: auto;
    padding: 10px;
    min-width: 44px; min-height: 44px; /* тап-зона */
  }
  .menu-toggle span { width: 24px; height: 1px; background: var(--white); transition: transform 0.4s var(--ease-out); }
  body.menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  body.menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

  /* Часы сессий в открытом меню (2026-08-05, паритет с ПК): на мобиле
     .session-clocks скрыты из шапки — места нет, — но в полноэкранном
     оверлее меню низ свободен (sticky CTA-бар при открытом меню гаснет
     правилом выше). Фирменная деталь возвращается именно сюда.
     safe-area — отступ от жестовой полосы iPhone. */
  body.menu-open .session-clocks {
    display: flex;
    position: fixed;
    left: 0; right: 0;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    /* На 390px ряд занимал ровно 0..390 — обрезки не было, но LONDON и
       TOKYO упирались в самые края экрана. Поля дают им отступ, а gap
       сжимается, чтобы три пояса по-прежнему помещались в строку. */
    padding: 0 14px;
    gap: clamp(8px, 3vw, 17.6px);
  }

  .s-manifest { min-height: 100vh; }
  .manifest-inner { gap: 1.6rem; }
  .corner-label { display: none; }

  /* Шоурил → свайп-карточки */
  .s-showreel { height: auto; }
  .showreel-stage {
    position: static; height: auto;
    display: flex; gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 12vh 18px;
    -webkit-overflow-scrolling: touch;
  }
  .reel-slide {
    position: relative;
    opacity: 1; visibility: visible;
    flex: 0 0 86vw;
    scroll-snap-align: center;
    padding: 0;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    min-height: 480px;
  }
  .reel-video { position: absolute; }
  .reel-shade { background: linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.85) 78%); }
  .reel-card {
    position: absolute; left: 0; right: 0; bottom: 0;
    width: auto;
    max-width: none;
    padding: 1.8rem 1.6rem;
    background: none; border: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .reel-roman { font-size: 2.6rem; margin-bottom: 0.7rem; }
  .reel-title { font-size: 1.4rem; }
  .reel-price { margin-bottom: 1.2rem; }
  .reel-progress { display: none; }

  .ict-inner { grid-template-columns: 1fr; gap: 3rem; }
  .ict-stage { max-width: 420px; margin: 0 auto; }

  .index-row { grid-template-columns: 44px 1fr auto; gap: 0.9rem; padding: 1.5rem 0.4rem; }
  .index-note { display: none; }
  .index-row:hover { padding-left: 0.4rem; }

  .mentor-inner { grid-template-columns: 1fr; gap: 3.4rem; }
  .mentor-portrait { max-width: 420px; margin: 0 auto; }

  .results-grid, .tariffs-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1.2rem;
    -webkit-overflow-scrolling: touch;
  }
  .result-card, .tariff-card { scroll-snap-align: center; }
  .tariff-featured { transform: none; }

  .hero-ticker { padding: 10px 0; }
  .ticker-track { font-size: 10px; }

  .footer-links a { padding: 12px 8px; } /* тап-зона ≥44px */
}

/* Touch-устройства: без tilt и кастомного курсора (класс ставит JS) */
body.is-touch [data-tilt] { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .layer-grain, .holo-scanlines::after, .holo-glitch { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
}