/* =============================================================
   ДОД сентябрь 2026 — «Открываем новый сезон»
   Source: Figma V50LhpCBn0ARsbodGVh9zt, frames «главная» / «Экраны» / «колесо»
   Base: shared/kit/base.css (tokens overridden below, kit file untouched)
   Breakpoints: 1199 / 959 / 639 / 374 (kit canon)
   r6 (2026-09-04): каталог на белом (как фрейм «Экраны»), типографика и кнопки
   крупнее, hero слеплен, крутящиеся цифры, панель правил, outro-панель.
   ============================================================= */

/* ===================== TOKENS ===================== */
:root {
  --kit-bg: #000000;
  --kit-bg-2: #0d0d0d;
  --kit-card: #1e1e1e;
  --kit-ink: #ffffff;
  --kit-dim: rgba(255, 255, 255, .62);
  --kit-dim-2: rgba(255, 255, 255, .45);
  --kit-line: rgba(255, 255, 255, .12);
  --kit-acc: #d60405;
  --kit-acc-ink: #ffffff;
  --kit-acc-hover: #ef1516;
  --kit-acc-soft: rgba(214, 4, 5, .14);
  --kit-shadow-hue: 214, 4, 5;
  --kit-r1: 8px;
  --kit-r2: 16px;
  --kit-r3: 20px;
  --kit-font: 'Onest', 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --kit-container: 1200px;
  --kit-edge: clamp(16px, 3.3vw, 40px);
  --kit-sec-y: clamp(40px, 5vw, 64px);
  --kit-shadow-card: none;
  --kit-shadow-lg: none;

  --red: #d60405;
  --red-line: rgba(214, 4, 5, .55);
  --grey-ph: #d9d9d9;          /* image placeholder, as in Figma */
  --card-radius: 16px;
  --paper: #eceef1;            /* каталог: светло-серый фон */
  --kids-card: #e9edf2;        /* карточки «Детям» — серые на белом листе */
  --paper-sheet: #ffffff;      /* листы подборок белые — читаются как бумага на сером */
  --paper-ink: #0a0a0a;
  --paper-dim: #5c5c5c;
}
body { font-weight: 400; font-size: 17px; }
::selection { background: var(--red); color: #fff; }

/* ===================== SHARED PIECES ===================== */
.pill {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
}
.pill--float { position: absolute; top: -13px; left: 30px; }

/* red CTA: 56px, text left, black icon square right */
.btn-red {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 5px 6px 5px 40px;
  border-radius: 8px;
  background: var(--red); color: #fff;
  font-size: 18px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  transition: background-color .18s var(--kit-ease), transform .18s var(--kit-ease);
}
.btn-red > span:first-child { flex: 1 1 auto; text-align: center; }
.btn-red__ic {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #000; color: #fff;
}
.btn-red__ic svg { width: 18px; height: 18px; }
.btn-red--w { width: 100%; }
@media (hover: hover) {
  .btn-red:hover { background: var(--kit-acc-hover); transform: translateY(-1px); }
}

/* white / ghost card buttons: 50px, caps 14px */
.btn-w {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 50px; padding: 0 16px;
  border-radius: 10px; border: 1px solid #fff;
  background: #fff; color: #000;
  font-size: 14px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; line-height: 1.2;
  transition: background-color .18s var(--kit-ease), color .18s var(--kit-ease), transform .18s var(--kit-ease);
}
.btn-w--ghost { background: transparent; color: #fff; }
@media (hover: hover) {
  .btn-w:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-1px); }
}

.h2-red {
  font-size: clamp(28px, 3vw, 36px); line-height: 1.12; font-weight: 500; letter-spacing: -.015em;
}

/* red-tinted panels (rules, after-banner, final cards): dark red glow inside */
.panel-red {
  position: relative;
  border: 1px solid var(--red-line);
  border-radius: var(--card-radius);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(214, 4, 5, .22) 0%, rgba(214, 4, 5, 0) 58%),
    radial-gradient(90% 120% at 100% 100%, rgba(214, 4, 5, .18) 0%, rgba(214, 4, 5, 0) 62%),
    #120404;
}

/* ===================== ROLLING DIGITS (hero + final art) ===================== */
/* Цифры 1/2/3 стёрты с растра и живут в HTML: колонка 0–9 в окне высотой 1em,
   при .is-roll прокручивается полный круг и возвращается на свою цифру.
   Позиции/кегль — в процентах от картинки (cqw), поэтому совпадают на любой ширине. */
.digits { position: absolute; inset: 0; pointer-events: none; container-type: inline-size; }
.digit {
  position: absolute; left: var(--x); top: var(--y);
  height: 1em; overflow: hidden;
  transform: translate(-50%, -50%);
  font-weight: 300; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.digits--hero .digit { font-size: 8.1cqw; }
.digits--final .digit { font-size: 14.2cqw; }
.digit__strip { display: block; transform: translateY(calc(-1em * var(--n))); }
.digit__strip i { display: block; height: 1em; font-style: normal; text-align: center; }
.digit.is-roll .digit__strip { animation: digit-roll 1.5s cubic-bezier(.2, .7, .15, 1) both; }
.digit--2.is-roll .digit__strip { animation-delay: .12s; }
.digit--3.is-roll .digit__strip { animation-delay: .24s; }
@keyframes digit-roll {
  from { transform: translateY(calc(-1em * var(--n))); }
  to   { transform: translateY(calc(-1em * (var(--n) + 10))); }
}
.digits--hero .digit--1 { color: #cfcfcf; }
.digits--hero .digit--2 { color: #fff; text-shadow: 0 0 .12em rgba(255, 90, 90, .9), 0 0 .35em rgba(214, 4, 5, .7); }
.digits--hero .digit--3 { color: #bdbdbd; }
.digits--final .digit--1 { color: #d3d3d3; }
.digits--final .digit--2 { color: #e9d9d9; text-shadow: 0 0 .1em rgba(255, 110, 110, .9), 0 0 .3em rgba(214, 4, 5, .8); }
.digits--final .digit--3 { color: #cfcfcf; }

/* ===================== 1. HERO ===================== */
.hero { padding: 0; background: #000; overflow: clip; }
.hero__wrap {
  position: relative;
  min-height: 720px;
  padding-top: 56px; padding-bottom: 32px;
  display: flex; flex-direction: column;
}
.hero__art {
  position: absolute; z-index: 0;
  top: 0; right: -10px;
  width: min(56%, 648px);   /* было min(62%, 719px): заголовок налезал на картинку */
  pointer-events: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.hero__art img { display: block; width: 100%; height: auto; }
.hero__copy { position: relative; z-index: 1; max-width: 520px; pointer-events: none; }
.hero__copy a { pointer-events: auto; }
.hero__title {
  font-size: clamp(40px, 4.6vw, 64px); line-height: .98; font-weight: 700;
  letter-spacing: -.02em; text-transform: uppercase;
}
/* заголовок + оффер + кнопка слеплены в один блок (как на страницах веба) */
.hero__sub { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.hero__lead { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; font-weight: 400; letter-spacing: -.01em; }
.hero__copy .btn-red { min-width: 340px; }
.hero__facts {
  position: relative; z-index: 1;
  margin-top: auto; padding-top: 48px;
  display: grid; grid-template-columns: 398fr 329fr 373fr; gap: 12px;
}
.fact {
  position: relative; min-height: 120px;
  padding: 30px 30px 26px;
  border: 1px solid var(--red-line); border-radius: 14px;
  background:
    radial-gradient(100% 160% at 0% 100%, rgba(214, 4, 5, .3) 0%, rgba(214, 4, 5, 0) 60%),
    #0c0303;
  font-size: 17px; line-height: 1.35; color: #fff;
}
.fact__tag {
  position: absolute; top: -13px; left: 30px;
  padding: 7px 12px; border-radius: 6px;
  background: var(--red); color: #fff; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.hero__note { margin-top: 26px; font-size: 14px; line-height: 1.3; color: #8a8080; }

/* ===================== 2. CATALOG (на белом, как фрейм «Экраны») ===================== */
/* каталог на светло-сером с градиентом, а не на чистом белом (правка Лиды).
   Листы подборок при этом чуть светлее фона — стык между ними стало видно. */
.catalog { padding-top: 56px; padding-bottom: 24px;
  background: linear-gradient(180deg, #eef1f4 0%, #e0e5ec 55%, #d6dce5 100%);
  color: var(--paper-ink); }
.catalog__wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.catalog__nav { position: sticky; top: 28px; z-index: 20; }
.nav-pill { display: inline-block; padding: 10px 14px; border-radius: 6px; background: var(--red); color: #fff; font-size: 15px; font-weight: 500; line-height: 1; }
.nav-list { margin-top: 28px; display: grid; gap: 20px; max-width: 230px; }
.nav-list a {
  position: relative; display: block; padding-left: 14px;
  font-size: 17px; line-height: 1.3; color: var(--paper-dim);
  transition: color .18s var(--kit-ease);
}
.nav-list a::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.nav-list a.is-on { color: var(--red); font-weight: 500; }
/* «Продвинутое использование / ИИ-инструментов» — две строки на десктопе, на чипах перенос не нужен */
.br-d { display: inline; }
@media (hover: hover) { .nav-list a:hover { color: var(--paper-ink); } }

/* --- stacking: каждая подборка залипает, следующая наезжает сверху ---
   top ставит script.js: 0 для коротких секций, (высота экрана - высота секции)
   для длинных, чтобы секцию можно было дочитать до низа перед наездом.
   .js — класс от kit/core.js: без JS секции остаются обычным потоком. */
.cat-sec {
  scroll-margin-top: 24px;
  position: relative;
  padding: 36px 24px 60px;
  /* margin-bottom — пауза перед наездом: секция уже залипла и полностью видна,
     этот зазор прокручивается, и только потом снизу приходит следующая карточка.
     Внутри padding такая пауза не работает: секция залипает и наезд стартует
     в один и тот же момент прокрутки. */
  margin: 0 -24px clamp(400px, 65vh, 760px);
  background: var(--paper-sheet);
  border-radius: 28px 28px 0 0;
}
.js .cat-sec { position: sticky; top: 0; }
.cat-sec::before {              /* верхняя кромка наезжающей карточки */
  content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 2px;
  background: linear-gradient(90deg, rgba(214, 4, 5, 0), var(--red) 22%, var(--red) 78%, rgba(214, 4, 5, 0));
  opacity: .8;
}
/* Тень наезда только сверху. Было 50px размытия при спреде -14: тень вылезала
   на 39px вбок, слева на белом шла серая полоса, а на стыке подборок две тени
   накладывались и давали грязь. Спред теперь больше половины размытия — вбок
   не выходит ничего, сверху остаётся мягкая полоса ~20px. */
.js .cat-sec { box-shadow: 0 -14px 30px -20px rgba(0, 0, 0, .22), 0 -1px 0 rgba(0, 0, 0, .05); }
.cat-sec:first-child { border-radius: 0; padding-top: 0; }
.js .cat-sec:first-child { box-shadow: none; }
.cat-sec:first-child::before { content: none; }
/* последняя подборка: на неё никто не наезжает — обычный поток, без зазора */
.js .cat-sec:has(+ .catalog__outro) { position: relative; top: auto !important; margin-bottom: 0; }

/* блок после каталога (Figma: «Начни рабочий сезон с пользой!» + NN) — теперь панель, не текст в воздухе */
.catalog__outro { position: relative; margin-top: 48px; }
.outro-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 36px 40px;
  border-radius: var(--card-radius);
  background: var(--kit-card); color: #fff;
  border: 1px solid var(--red-line);
}
.outro-panel__copy { max-width: 640px; }
.outro-panel h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; font-weight: 500; letter-spacing: -.01em; }
/* заголовок в одну строку: кнопка ужата, копирайту хватает ширины.
   На мобилке перенос оставляем — там строка физически не влезает. */
@media (min-width: 960px) { .outro-panel h3 { white-space: nowrap; } }
.outro-panel p { margin-top: 12px; font-size: 17px; line-height: 1.45; color: #d6d6d6; }
.outro-panel__count { margin-top: 18px !important; color: #ff5052 !important; font-weight: 500; }
/* кнопка меньше основной CTA: это переход к разделу, а не целевое действие */
.outro-panel .btn-red { flex: 0 0 auto; min-width: 228px; min-height: 46px; font-size: 16px; padding-left: 26px; }
.outro-panel .btn-red__ic { width: 36px; height: 36px; }
.outro-panel .btn-red__ic svg { width: 15px; height: 15px; }

.cat-sec__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
.cat-sec__title { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; max-width: 560px; }
.cat-sec__idx { font-size: 28px; line-height: 1.1; font-weight: 400; white-space: nowrap; }
.cat-sec__idx small { font-size: 18px; color: var(--paper-dim); }

.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

/* --- event card --- */
.ev-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 440px;
  padding: 20px 22px 22px;
  border: 1px solid var(--red-line); border-radius: var(--card-radius);
  background: var(--kit-card); color: #fff;
  overflow: hidden;
  transition: border-color .45s var(--kit-ease);
}

/* ---- бегущая обводка при наведении ----
   За маской-кольцом крутится конический градиент: видна только рамка, а внутри
   ничего не перекрывается. Угол градиента анимируется через @property — без
   регистрации типа <angle> браузер не умеет его интерполировать.
   inset: 0 — это ровно padding-box, поэтому overflow: hidden у карточки его
   не режет, и линия ложится по внутренней кромке существующей рамки. */
@property --ev-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ev-run { to { --ev-a: 360deg; } }

@media (hover: hover) {
  .ev-card::before {
    content: ''; position: absolute; inset: 0; z-index: 3;
    border-radius: calc(var(--card-radius) - 1px);
    padding: 1.5px;                       /* толщина бегущей линии */
    /* длинный мягкий хвост без белого пика: яркая точка по кругу читается
       как мигание, поэтому свет набирается плавно на 170deg и так же уходит */
    background: conic-gradient(from var(--ev-a),
      rgba(255, 90, 92, 0) 0deg,
      rgba(255, 90, 92, 0) 140deg,
      rgba(255, 90, 92, .14) 210deg,
      rgba(255, 90, 92, .38) 270deg,
      rgba(255, 116, 118, .62) 312deg,
      rgba(255, 90, 92, .3) 342deg,
      rgba(255, 90, 92, 0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0; transition: opacity .45s var(--kit-ease);
    pointer-events: none;
  }
  .ev-card:hover::before { opacity: 1; animation: ev-run 6s linear infinite; }
  .ev-card:hover { border-color: rgba(255, 90, 92, .34); }
}
/* шапка: чистая картинка из Figma (экспорт ноды), тёмный вырез под тег
   рисует CSS. Размеры в процентах — совпадают с макетом на любой ширине:
   плашка 246x34 из 366x97, диагональ от 207px по верхней кромке. */
.ev-card__head {
  position: relative; aspect-ratio: 366 / 97; border-radius: 12px 12px 12px 0; overflow: hidden;
  background: var(--kit-card);
}
.ev-card__head img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Плашка под тег уходит за левый и нижний край шапки на 2px: высота шапки
   задана через aspect-ratio и получается дробной, из-за чего у плашки
   оставалась щель в пиксель и сквозь неё просвечивала картинка (замер по
   пикселям: у левого края 246,197,200 вместо чистого белого). Вылет режется
   overflow: hidden у самой шапки, правый край и верх плашки не сдвинулись. */
.ev-card__head::after {
  content: ''; position: absolute; left: -2px; bottom: -2px;
  width: calc(67.2% + 2px); height: calc(35% + 2px);
  background: var(--kit-card);
  clip-path: polygon(0 0, 84% 0, 100% 100%, 0 100%);
}
.ev-card__tag {
  position: absolute; z-index: 1; left: 3.8%; bottom: 6%;
  padding-left: 13px; font-size: 14px; line-height: 17px; color: #d0d0d0;
}
.ev-card__tag::before { content: ''; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
/* ===== «Детям»: красное и белое, без чёрного (правка Лиды) =====
   Прежний янтарный фильтр на шапках убран — он лечил мрачность полумерой.
   Карточки стали белыми с красными акцентами: тёмного в разделе не осталось. */
/* последняя подборка: белый лист плавно уходит в серый фон каталога.
   Низ гасим в прозрачность, а не в конкретный серый — тогда стык совпадает
   с фоном каталога на любой высоте, где бы блок ни оказался. */
#sec-kids { background: linear-gradient(180deg, #fff 0%, #fff 74%, rgba(255, 255, 255, 0) 100%); }

#sec-kids .ev-card {
  background: var(--kids-card); color: #14171c;
  border-color: rgba(214, 4, 5, .28);
}
/* Шапки идут как есть, на своём белом фоне — белой полосой поверх серой карточки.
   Смешивание (multiply) убрано: оно съедало контраст и картинки выглядели блёклыми. */
#sec-kids .ev-card__head { background: #fff; }
#sec-kids .ev-card__head::after { background: var(--kids-card); }   /* плашка под тег — по цвету карточки */
#sec-kids .ev-card__tag { color: #6a6f77; }
#sec-kids .ev-card__title { color: #14171c; }
#sec-kids .ev-card__desc { color: #5b6068; }
#sec-kids .ev-card__n { color: var(--red); }
/* «Регистрация» — красная заливка, «Узнать подробнее» — красный контур */
#sec-kids .btn-w { background: var(--red); border-color: var(--red); color: #fff; }
#sec-kids .btn-w--ghost { background: transparent; border-color: rgba(214, 4, 5, .45); color: var(--red); }
@media (hover: hover) {
  #sec-kids .btn-w:hover { background: #b40304; border-color: #b40304; color: #fff; }
  #sec-kids .btn-w--ghost:hover { background: var(--red); border-color: var(--red); color: #fff; }
}
/* бегущая обводка на светлой карточке — чуть плотнее, иначе теряется */
#sec-kids .ev-card:hover { border-color: rgba(214, 4, 5, .5); }
.ev-card__body { position: relative; margin-top: 26px; padding-right: 64px; flex: 1 1 auto; }
.ev-card__n { position: absolute; right: 2px; top: 0; font-size: 22px; line-height: 24px; font-weight: 400; color: #e6e6e6; }
.ev-card__title { font-size: 21px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.ev-card__desc { margin-top: 12px; font-size: 15px; line-height: 1.35; color: #bdbdbd; }
.ev-card__actions { margin-top: 24px; display: grid; gap: 12px; }

/* --- bonus card (same slot as an event card): ярче подложка, крупнее текст --- */
.bonus-card {
  position: relative; min-height: 440px;
  padding: 44px 40px 34px;
  border: 1px solid rgba(214, 4, 5, .8); border-radius: var(--card-radius);
  /* ярче: подложка поднята с #1a0304 до #4a0709, верхнее пятно почти чистый
     красный, добавлено третье пятно слева — панель читается как красная, а не бордовая */
  background:
    radial-gradient(72% 62% at 100% 0%, rgba(255, 32, 34, .98) 0%, rgba(214, 4, 5, 0) 72%),
    radial-gradient(82% 55% at 50% 100%, rgba(226, 12, 14, .78) 0%, rgba(214, 4, 5, 0) 74%),
    radial-gradient(120% 100% at 0% 40%, rgba(196, 4, 6, .8) 0%, rgba(150, 2, 4, 0) 64%),
    #4a0709;
  color: #fff;
  overflow: hidden;
}
.bonus-card__icon { position: absolute; right: 20px; top: 24px; width: 128px; height: auto; }
.bonus__title { font-size: 22px; line-height: 1.2; font-weight: 500; }
.bonus__title--caps { text-transform: uppercase; font-size: 18px; letter-spacing: .01em; }
.bonus__list { margin-top: 40px; display: grid; gap: 26px; max-width: 300px; }
.bonus__list li { position: relative; padding-left: 16px; font-size: 16px; line-height: 1.35; }
.bonus__list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #ff5052; }
.bonus__lead { color: #ff5052; font-weight: 500; }

/* --- bonus banner (full width under a section) --- */
.bonus-banner {
  position: relative; margin-top: 24px;
  padding: 42px 130px 42px 42px;
  border: 1px solid rgba(214, 4, 5, .8); border-radius: var(--card-radius);
  /* ярче — тот же подъём, что и у .bonus-card: «бонусы везде» */
  background:
    radial-gradient(48% 140% at 100% 50%, rgba(255, 32, 34, .95) 0%, rgba(214, 4, 5, 0) 72%),
    radial-gradient(65% 120% at 0% 100%, rgba(196, 4, 6, .8) 0%, rgba(150, 2, 4, 0) 64%),
    #4a0709;
  color: #fff;
  overflow: hidden;
}
.bonus-banner__icon { position: absolute; right: 18px; top: 16px; width: 72px; height: auto; }
.bonus__list--row { margin-top: 28px; grid-template-columns: 187fr 245fr 234fr; gap: 30px; max-width: none; }

/* ===================== 3. WHEEL ===================== */
/* overflow-x, а не overflow: clip по обеим осям. Клип по обеим осям делает секцию
   контейнером обрезки, и position:sticky внутри неё перестаёт работать вообще —
   именно поэтому колесо не липло. По горизонтали клип нужен: у .wheel__art
   отрицательный margin-right. */
.wheel { position: relative; padding-top: 64px; padding-bottom: 60px; overflow-x: clip; overflow-y: visible; background: #000; }
.wheel__wrap { position: relative; display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 40px; align-items: start; }
.wheel__copy { padding-left: 9px; }
.wheel .h2-red { max-width: 588px; }
.prize-panel {
  position: relative; margin-top: 44px;
  padding: 36px 32px 30px;
  border: 1px solid var(--red-line); border-radius: var(--card-radius);
  background: var(--kit-card);
}
.prize-list { display: grid; gap: 12px; }
.prize-list li { display: flex; align-items: center; gap: 12px; min-height: 30px; font-size: 18px; line-height: 1.3; }
.prize-list li.is-strong { font-weight: 600; }
.prize-box { flex: 0 0 auto; width: 30px; height: 30px; object-fit: contain; }
.prize-panel .btn-red { margin-top: 36px; }
.rules-panel { margin-top: 14px; padding: 30px 32px 26px; }
.rules-panel__title { color: #ff5052; font-size: 18px; font-weight: 500; margin-bottom: 14px; }   /* красный на красноватом фоне: осветлён ради контраста */
.rules-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 17px; line-height: 1.3;
}
.rules-list li:first-child { border-top: 0; }
.rules-list li span { color: #e2e2e2; }
.rules-list li b { flex: 0 0 auto; font-weight: 600; color: #fff; white-space: nowrap; }
.wheel__art { position: relative; margin-top: -47px; margin-right: -40px; }
/* Колесо едет вместе с прокруткой до конца блока. Левая колонка (призы + правила)
   на 142px выше картинки, и раньше низ блока справа оставался пустым чёрным полем.
   Ячейка растянута на всю строку, липкая — сама картинка внутри неё: у грид-элемента
   с align-self: start залипание не включается. */
@media (min-width: 960px) {
  .wheel__art { align-self: stretch; }
  .wheel__art img { position: sticky; top: 32px; }
}
.wheel__art img { width: 100%; max-width: 700px; height: auto; margin-left: auto;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }

/* ===================== 4. AUDIENCE ===================== */
.audience { padding-top: 20px; padding-bottom: 24px; }
.aud-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.aud-card {
  padding: 22px 22px 26px; min-height: 230px;
  border-radius: var(--card-radius); background: var(--kit-card);
  font-size: 17px; line-height: 1.35;
}
.aud-card__img { display: block; width: 100%; height: auto; aspect-ratio: 327 / 80; object-fit: cover;
  border-radius: 10px; background: var(--kit-card); margin-bottom: 14px; }

/* ===================== 5. AFTER + CTA ===================== */
.after { padding-top: 24px; padding-bottom: 32px; }
.after__wrap { display: grid; grid-template-columns: minmax(0, 723fr) minmax(0, 377fr); gap: 24px; align-items: stretch; }
.after-banner { padding: 34px 210px 34px 34px; min-height: 176px; }
.after-banner__title { font-size: 24px; line-height: 1.15; font-weight: 500; }
.after-banner p { margin-top: 16px; font-size: 17px; line-height: 1.45; max-width: 470px; }
.after-banner__icon { position: absolute; right: 30px; top: 22px; width: 126px; height: auto; }
.after-cta { display: flex; flex-direction: column; }
.after-cta__count { color: #ff5052; font-size: 17px; font-weight: 500; line-height: 1.3; }
.after-cta p + p { margin-top: 12px; font-size: 17px; line-height: 1.45; }
.after-cta .btn-red { margin-top: auto; }
.after-cta p + .btn-red { margin-top: 24px; }

/* ===================== 6. FINAL ===================== */
.final { padding-top: 48px; padding-bottom: 64px; overflow: clip; }
.final__grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 60px; align-items: center; }
.final__copy { padding-top: 0; }
.final__art { position: relative; }
.final__art img { display: block; width: 100%; max-width: 720px; height: auto; margin-left: auto; }
.final__cards { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.final-card { padding: 26px 32px; min-height: 124px; font-size: 17px; line-height: 1.4; }
.final-card__lead { color: #ff5052; font-weight: 500; }
.final-card ul { display: grid; gap: 12px; }
.final-card li { position: relative; padding-left: 16px; }
.final-card li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* ===================== 7. GLOSSARY (tokens only) ===================== */
.acc--glossary {
  --gl-card: #111;
  --gl-border: 1px solid var(--red-line);
  --gl-blur: none;
  --gl-shadow: none;
  --gl-radius: 16px;
  --gl-line: rgba(255, 255, 255, .1);
  --gl-text: #fff;
  --gl-term: #ff4a4b;
  --gl-def: rgba(255, 255, 255, .68);
  --gl-plus: #ff4a4b;
  --gl-font: var(--kit-font);
  --gl-font-term: var(--kit-font);
}

/* ===================== FOOTER (standard block, colour only) ===================== */
.footer { background: #0a0a0a; }

/* ===================== MODALS: голый виджет GC на белом листе ===================== */
/* r7: наш тёмный кожух убран — виджет GC сам белый. Панель прозрачная, лист =
   .reg-modal__body (белый, скруглён), крестик висит над листом.
   Полоса 54px сверху панели — место под крестик. Без неё при высокой форме
   (лист 88vh, попап по центру) крестик уезжал за верх экрана: на 1440x900 его
   верх приходился на -7px и кнопка обрезалась. */
.reg-modal { background: rgba(0, 0, 0, .78); }
.reg-modal__panel {
  background: transparent; border: 0; padding: 54px 0 0;
  overflow: visible; max-height: none; width: min(560px, 100%);
}
.reg-modal__body {
  position: relative; min-height: 220px;
  max-height: calc(var(--vh) * 88 - 54px);
  overflow-y: auto !important; /* скрипт GC ставит inline overflow:hidden — иначе длинная форма не скроллится */
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: #fff; border-radius: 16px;
}
/* Safari не даёт iframe собственный вьюпорт: документ виджета идёт с
   <meta viewport content="width=device-width">, и WebKit меряет device-width по
   ЭКРАНУ, а не по ширине iframe, плюс раздувает сам iframe под интринсик-ширину
   контента. Родитель его обрезает (скрипт GC ставит parentNode overflow:hidden) —
   форма уезжает вправо и режется. width:1px даёт iframe определённую ширину,
   WebKit перестаёт мерить по контенту, min-width:100% растягивает ровно по листу. */
.reg-modal__body { width: 100%; }
.reg-modal__body iframe {
  display: block;
  width: 1px; min-width: 100%; max-width: 100%;
  border: 0; border-radius: 16px;
}
.reg-modal__spin {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; border: 3px solid rgba(214, 4, 5, .18); border-top-color: var(--red);
  animation: reg-spin .8s linear infinite;
}
/* гасим, когда GC прислал высоту формы (класс ставит script.js).
   Соседним селектором нельзя: GC вставляет iframe ПОСЛЕ спиннера. */
.reg-modal.is-ready .reg-modal__spin { display: none; }
@keyframes reg-spin { to { transform: rotate(360deg); } }
.reg-modal__close { top: 0; right: 0; background: #1e1e1e; color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.reg-modal__error { color: #000; padding: 40px 24px; }

/* ===================== BREAKPOINTS ===================== */
/* horizontal tablet */
@media (max-width: 1199px) {
  .hero__wrap { min-height: 0; }
  .hero__art { width: 58%; right: -20px; }
  .hero__copy { max-width: 440px; }
  .hero__facts { padding-top: 240px; }
  .catalog__wrap { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; }
  .nav-list a { font-size: 16px; }
  .ev-card__body { padding-right: 52px; }
  .wheel__wrap { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 24px; }
  .wheel__art { margin-right: -24px; }
  .final__grid { grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 32px; }
  .outro-panel { flex-direction: column; align-items: flex-start; }
  .outro-panel .btn-red { min-width: 0; width: 100%; }
}

/* vertical tablet: nav becomes a sticky chip row */
@media (max-width: 959px) {
  .hero__art { position: relative; right: auto; top: auto; width: 100%; max-width: 560px; margin: -10px auto -60px; order: 2;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }
  .hero__copy { order: 1; max-width: none; }
  .hero__sub { margin-top: 24px; gap: 24px; }
  .hero__facts { order: 3; padding-top: 30px; grid-template-columns: 1fr; gap: 18px; }
  .hero__note { order: 4; }
  .fact { min-height: 0; }

  .catalog { padding-top: 0; }
  .catalog__wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .catalog__nav { top: 0; z-index: 20; margin: 0 calc(-1 * var(--kit-edge)); padding: 12px var(--kit-edge);
    background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .catalog__nav-inner { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .catalog__nav-inner::-webkit-scrollbar { display: none; }
  .nav-pill { flex: 0 0 auto; }
  .nav-list { margin: 0; display: flex; gap: 8px; max-width: none; }
  .nav-list li { flex: 0 0 auto; }
  .nav-list a { padding: 10px 14px 10px 26px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 999px; white-space: nowrap; font-size: 15px; color: var(--paper-ink); }
  .nav-list a::before { left: 13px; top: 50%; margin-top: -3px; }
  .br-d { display: none; }
  .nav-list a.is-on { border-color: var(--red); background: rgba(214, 4, 5, .08); }
  /* фон наезжающей карточки во всю ширину экрана, контент на месте */
  .cat-sec { scroll-margin-top: 76px;
    margin: 0 calc(-1 * var(--kit-edge)) clamp(280px, 55vh, 520px);
    padding: 28px var(--kit-edge) 44px; }
  .cat-sec::before { left: var(--kit-edge); right: var(--kit-edge); }
  .cat-grid { gap: 16px; }
  .ev-card { min-height: 0; }
  .bonus-card { min-height: 0; padding: 36px 28px 30px; }
  .bonus-card__icon { width: 100px; right: 16px; top: 16px; }
  .bonus__list { margin-top: 30px; gap: 20px; }
  .bonus-banner { padding: 32px 110px 32px 28px; }
  .bonus__list--row { grid-template-columns: 1fr; gap: 16px; }
  .outro-panel { padding: 28px 24px; }

  .wheel { padding-top: 40px; padding-bottom: 20px; }
  .wheel__wrap { grid-template-columns: minmax(0, 1fr); }
  .wheel__copy { padding-left: 0; }
  .wheel__art { order: -1; margin: -40px auto -20px; max-width: 520px; width: 100%; }
  .wheel__art img { margin: 0 auto; }

  .aud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .after__wrap { grid-template-columns: minmax(0, 1fr); }
  .after-banner { padding-right: 160px; }
  .after-cta .btn-red { margin-top: 24px; }

  .final__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .final__art img { margin: 0 auto; }
  .final__cards { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
}

/* mobile */
@media (max-width: 639px) {
  body { font-size: 16px; }
  .hero__wrap { padding-top: 32px; }
  .hero__title { font-size: clamp(34px, 10.5vw, 44px); }
  .hero__lead { font-size: 22px; }
  .hero__sub { gap: 20px; }
  .hero__copy .btn-red { min-width: 0; width: 100%; }
  .hero__art { margin: 0 auto -40px; }
  .fact { padding: 26px 20px 22px; font-size: 16px; }
  .fact__tag { left: 20px; max-width: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis; }
  .btn-red { min-height: 52px; font-size: 17px; }
  .btn-w { min-height: 48px; font-size: 13px; }

  .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-sec__head { margin-bottom: 18px; }
  .cat-sec__title { font-size: 24px; }
  .cat-sec__idx { font-size: 24px; }
  .ev-card { padding: 16px 16px 18px; }
  .ev-card__body { padding-right: 44px; }
  .ev-card__title { font-size: 19px; }
  .ev-card__desc { font-size: 15px; }
  .bonus-card { padding: 34px 22px 26px; }
  .bonus__list { max-width: none; }
  .bonus-banner { padding: 28px 20px 24px; }
  .bonus-banner__icon { width: 52px; right: 12px; top: 12px; }
  .bonus__title--caps { padding-right: 60px; }
  .outro-panel { padding: 26px 20px; }
  .outro-panel p { font-size: 16px; }

  .h2-red { font-size: 26px; }
  .prize-panel { padding: 32px 20px 24px; }
  .pill--float { left: 20px; }
  .prize-list li { font-size: 17px; }
  .prize-panel .btn-red { margin-top: 28px; }
  .rules-panel { padding: 24px 20px 20px; }
  .rules-list li { font-size: 16px; }
  .wheel__art { margin: -20px auto -10px; }

  .aud-grid { grid-template-columns: minmax(0, 1fr); }
  .aud-card { min-height: 0; font-size: 16px; }
  .after-banner { padding: 24px 20px 24px; }
  .after-banner__icon { position: static; width: 90px; margin-top: 16px; }
  .after-cta { padding: 4px 0 0; }
  .btn-red { width: 100%; }

  .final-card { padding: 22px 20px; font-size: 16px; }
  .reg-modal { padding: 16px; align-items: center; }
  .reg-modal__panel { padding: 54px 0 0; border-radius: 16px; }
  .reg-modal__body { max-height: calc(var(--vh) * 84 - 54px); }
}

/* narrow phones */
@media (max-width: 374px) {
  .hero__title { font-size: 32px; }
  .btn-red { padding-left: 20px; font-size: 16px; }
  .fact__tag, .pill, .nav-pill { font-size: 12px; }
  .ev-card__title { font-size: 17px; }
  .bonus-card { padding: 32px 18px 24px; }
}

/* ===================== MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  .btn-red, .btn-w, .nav-list a { transition: none; }
  /* обводка не бежит, но карточка под курсором всё равно подсвечивается */
  .ev-card:hover::before { animation: none; --ev-a: 300deg; }
  .digit.is-roll .digit__strip { animation: none; }
  .reg-modal__spin { animation: none; }
  /* без наезда: секции обычным потоком, пауза-зазор не нужна */
  .js .cat-sec { position: relative; top: auto !important; box-shadow: none; }
  .cat-sec { margin-bottom: 40px; }
}