/* ============================================================
   QARQARALY MTB 2026 — Design System (ТЗ §9)
   Карбон + Electric Lime + Blaze Orange. Скорость, рельеф, протектор.
   Mobile-first. Никаких зависимостей — чистый CSS.
   ============================================================ */

:root {
  /* Палитра ТЗ §9.2 */
  --carbon: #0b0f10;
  --graphite: #151b1d;
  --graphite-2: #1d2528;
  --lime: #c8ff00;
  --orange: #ff5a1f;
  --cyan: #00d9ff;
  --pine: #176b45;
  --off-white: #f5f7f2;
  --mist: #aeb8b6;

  --line: rgba(245, 247, 242, 0.12);
  --line-strong: rgba(245, 247, 242, 0.22);

  --radius: 14px;
  --radius-lg: 22px;

  --shell: 1180px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Oswald — узкий атлетичный display (спортивная афиша, стартовые номера).
     Golos Text — кириллический гротеск для текста.
     Оба проверены рендером на казахских Ә Ғ Қ Ң Ө Ұ Ү Һ І. */
  --font-display: "Oswald", "PT Sans Narrow", Impact, sans-serif;
  --font-sans: "Golos Text", "Segoe UI", system-ui, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--carbon);
  color: var(--off-white);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
* { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--lime); color: var(--carbon); }

/* --- Доступность: видимый фокус для клавиатуры (приоритет 1 чек-листа) --- */
:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Курсор на всём кликабельном */
button, [role="button"], summary, label.radio-card, .check { cursor: pointer; }
/* Минимальная тап-зона (приоритет 2). Языковые ссылки — отдельно,
   иначе компактный переключатель растягивается в кружок. */
button, .btn, .prize-tab { min-height: 44px; }
/* Пальцем в 32×30 не попасть, а три цели стоят вплотную — на телефоне
   увеличиваем; на десктопе курсор точный, там оставляем компактными. */
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}
@media (min-width: 1000px) { .lang a { min-width: 40px; min-height: 34px; } }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;          /* Oswald: 700 — плакатный вес */
  letter-spacing: 0.005em;
  line-height: 0.98;
  text-transform: uppercase;
  margin: 0;
}

/* ---------- Layout ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: clamp(56px, 9vw, 110px); position: relative; }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--lime);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--lime);
}

/* text-wrap: balance — заголовки переносятся ровными строками, а не «одно слово
   на последней строке». Вместе с неразрывным пробелом в суммах («10 000 ₸»)
   это убирает случаи, когда знак тенге падал на отдельную строку. */
.section-title { font-size: clamp(2.1rem, 6.5vw, 4rem); text-wrap: balance; }
.section-lead { color: var(--mist); max-width: 62ch; margin-top: 14px; font-size: 1.02rem; }

/* ---------- Топографический фон ---------- */
.topo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23c8ff00' stroke-opacity='.055' stroke-width='1.1'><path d='M-20 90 C 60 40 130 130 200 78 S 320 40 360 96'/><path d='M-20 130 C 60 80 130 170 200 118 S 320 80 360 136'/><path d='M-20 170 C 60 120 130 210 200 158 S 320 120 360 176'/><path d='M-20 210 C 60 160 130 250 200 198 S 320 160 360 216'/><path d='M-20 250 C 60 200 130 290 200 238 S 320 200 360 256'/></g></svg>");
}

/* ---------- Секция с фотографией на фоне ----------
   Снимок ставится через переменную --photo прямо в разметке. Затемняем
   сильно и намеренно: это подложка под текст, а не иллюстрация. Фото
   держим в ::before, чтобы фильтр не задел содержимое секции. */
.section--photo { position: relative; background: var(--carbon); isolation: isolate; }
.section--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--photo) center / cover no-repeat;
  filter: brightness(.5) saturate(.85) contrast(1.03);
}
.section--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--carbon) 0%, rgba(11,15,16,.42) 30%,
                              rgba(11,15,16,.6) 70%, var(--carbon) 100%);
}
/* Подзаголовок на фото светлее обычного: серый --mist над снимком даёт
   4.8:1 в среднем и проваливается на светлых пятнах (небо, форма гонщиков).
   Этот тон держит 7:1 по всему кадру и остаётся вторичным к белому заголовку. */
.section--photo .section-lead { color: #d6e0dc; }

/* ---------- Header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(11, 15, 16, 0.9);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.header__inner { display: flex; align-items: center; gap: 18px; height: 68px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  letter-spacing: .02em; white-space: nowrap;  /* не переносить на мобильном */
}
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand b { color: var(--lime); font-weight: 400; }

.nav { display: none; gap: 22px; margin-left: auto; }
.nav a { font-size: .84rem; font-weight: 600; color: var(--mist); letter-spacing: .04em; text-transform: uppercase; transition: color .18s; }
.nav a:hover { color: var(--lime); }

.lang { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.lang a { font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; color: var(--mist); }
.lang a.is-active { background: var(--lime); color: var(--carbon); }

.burger { margin-left: auto; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--off-white); cursor: pointer; }

@media (min-width: 1000px) {
  .nav { display: flex; }
  .burger { display: none; }
  .header__inner { height: 78px; }
}

/* Узкие экраны: в шапке остаются логотип и бургер.
   Переключатель языка переехал в меню — раньше он теснил бургер, и ради
   этого приходилось ужимать обе цели до 32×30, мимо которых легко промахнуться.
   Убрать лишнее оказалось правильнее, чем делать кнопки мельче. */
@media (max-width: 480px) {
  .header__inner { gap: 8px; }
  .brand { font-size: .95rem; }
  .brand__mark { width: 26px; height: 26px; }
  .header .lang { display: none; }
}

/* Мобильное меню */
.mobile-menu {
  position: fixed; inset: 0; z-index: 95; background: rgba(11,15,16,.97);
  backdrop-filter: blur(10px); display: none; flex-direction: column;
  padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__nav { display: flex; flex-direction: column; margin-top: 12px; }
.mobile-menu__nav a {
  font-family: var(--font-display); font-size: 1.9rem;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.mobile-menu__nav a:active { color: var(--lime); }

/* Крестик — единственный способ закрыть меню: бургер остаётся под оверлеем */
.mobile-menu__close {
  align-self: flex-end; display: grid; place-items: center;
  width: 46px; height: 46px; margin-right: -6px;
  border: 1px solid var(--line); border-radius: 12px;
  background: none; color: var(--off-white); cursor: pointer;
}
.mobile-menu__close:active { border-color: var(--lime); color: var(--lime); }

/* Низ меню прижат к краю экрана: главное действие должно быть под большим
   пальцем, а не теряться в конце списка разделов. */
.mobile-menu__foot {
  margin-top: auto; padding-top: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 26px; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: .95rem; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; border-radius: 10px;
  transition: transform .14s ease, box-shadow .2s ease, background .2s ease;
  position: relative; overflow: hidden;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn--primary {
  background: var(--lime); color: var(--carbon);
  box-shadow: 0 8px 30px -10px rgba(200, 255, 0, .6);
}
.btn--primary:hover { box-shadow: 0 10px 38px -8px rgba(200, 255, 0, .8); }

/* Тёмный текст на оранжевом: белый давал контраст 3.12 (провал WCAG AA),
   карбон даёт 6.18. Совпадает с рекомендацией дизайн-системы «On Accent: #000». */
.btn--orange { background: var(--orange); color: var(--carbon); box-shadow: 0 8px 30px -10px rgba(255, 90, 31, .65); }

.btn--ghost { background: transparent; color: var(--off-white); border: 1.5px solid var(--line-strong); }
.btn--ghost:hover { border-color: var(--lime); color: var(--lime); }

.btn--lg { min-height: 60px; padding: 0 34px; font-size: 1rem; }
.btn--block { width: 100%; }

/* ---------- HERO ----------
   Первый экран «липкий»: секция высокая, а кадр внутри неё стоит на месте,
   пока прокрутка проигрывает 3D-сцену (колесо подкатывается, машина уходит
   в гору). Высота секции = длина сцены. */
.hero { position: relative; height: 280vh; }
/* На телефоне сцену играет не палец, а сама страница (bike3d.js), поэтому
   держать под герой три экрана прокрутки незачем: раньше до первого блока
   с содержанием надо было пролистать 280vh пустого липкого кадра. */
@media (max-width: 999px) {
  .hero { height: 100vh; height: 100svh; }
}
.hero__sticky {
  position: sticky; top: 0;
  height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
/* Фото Каркаралы притушено ещё и фильтром: снимок дневной и довольно
   контрастный, а сцена вечерняя — без этого светлое небо забивало бы
   и велосипед, и заголовок. */
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.82) saturate(.95);
  /* небольшой запас по краям: фото параллаксит по ходу подъёма (bike3d.js),
     и без него на сдвиге вылезал бы край кадра */
  transform: scale(1.08);
  will-change: transform;
}
.hero__bg svg { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(11,15,16,.78) 0%, rgba(11,15,16,.18) 38%, rgba(11,15,16,.9) 88%),
    radial-gradient(120% 80% at 12% 100%, rgba(11,15,16,.84), transparent 62%);
}

/* Сцена занимает весь первый экран: в начале в кадре только велосипед,
   поэтому делить площадь не с чем. Куда встать машине, когда придёт текст,
   решает камера в bike3d.js, а не CSS. */
.hero__scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__scene canvas { display: block; width: 100% !important; height: 100% !important; }

/* Затемнение под текстом. Появляется вместе с ним (opacity ставит скрипт):
   на широком экране слева, где текстовая колонка, на телефоне снизу. */
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11,15,16,0) 26%, rgba(11,15,16,.55) 48%, rgba(11,15,16,.93) 76%);
}
@media (min-width: 1000px) {
  .hero__veil {
    background: linear-gradient(100deg,
      rgba(11,15,16,.92) 0%, rgba(11,15,16,.84) 24%,
      rgba(11,15,16,.42) 46%, rgba(11,15,16,0) 64%);
  }
}

.hero__inner { position: relative; z-index: 2; width: 100%; padding-block: 120px 56px; }
@media (min-width: 1000px) {
  /* оставляем правую половину кадра сцене */
  .hero__inner { max-width: 62%; }
}

/* индикатор сцены: подпись текущего акта + тонкая полоса прогресса */
.hero__act {
  position: absolute; z-index: 2; right: clamp(20px, 5vw, 56px); bottom: 104px;
  display: flex; align-items: center; gap: 12px;
}
.hero__act b {
  font-size: .68rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--lime);
}
.hero__act-bar {
  display: block; width: 108px; height: 3px; border-radius: 999px;
  background: rgba(245,247,242,.16); overflow: hidden;
}
.hero__act-bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--lime));
}

.hero__hint {
  position: absolute; z-index: 2; right: clamp(20px, 5vw, 56px); bottom: 40px;
  display: flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mist);
  transition: opacity .3s ease;
}
.hero__hint span {
  width: 22px; height: 34px; border: 2px solid rgba(245,247,242,.35);
  border-radius: 999px; position: relative;
}
.hero__hint span::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px;
  border-radius: 999px; background: var(--lime); transform: translateX(-50%);
  animation: scrollDot 1.7s ease-in-out infinite;
}
@keyframes scrollDot { 0%,100% { transform: translate(-50%, 0); opacity: 1 } 55% { transform: translate(-50%, 12px); opacity: .25 } }

/* На узком экране индикатор акта не помещается, а вот подсказка нужна как
   раз там: пока текста ещё нет, низ кадра свободен, и без неё непонятно,
   что кадр вообще реагирует на прокрутку. */
@media (max-width: 999px) {
  .hero__act { display: none; }
  .hero__hint {
    left: 0; right: 0; bottom: 18px;
    justify-content: center; font-size: .64rem; letter-spacing: .22em;
  }
  /* мышь на телефоне ни при чём — рисуем стрелку вниз */
  .hero__hint span {
    width: 14px; height: 14px; border: 0;
    border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
    border-radius: 0; animation: hintArrow 1.6s ease-in-out infinite;
  }
  .hero__hint span::after { display: none; }
}
@keyframes hintArrow {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .9 }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: .35 }
}

.hero__badge {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
  padding: 7px 14px; border: 1px solid var(--lime); border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--lime);
  background: rgba(200,255,0,.07);
}
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }

/* Размер завязан и на ширину, и на ВЫСОТУ экрана: кадр героя теперь ровно
   в один экран, и на низких ноутбуках заголовок обязан ужиматься сам,
   иначе текст не помещается и обрезается. */
.hero__title { font-size: clamp(2.6rem, min(12vw, 10vh), 7.2rem); line-height: .86; }
.hero__title .accent { color: var(--lime); display: block; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; font-weight: 700; font-size: .92rem; letter-spacing: .05em; text-transform: uppercase; }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; color: var(--off-white); }
.hero__meta svg { color: var(--lime); flex: none; }
.hero__tagline { margin-top: 20px; font-size: clamp(1.05rem, 3vw, 1.4rem); color: var(--off-white); max-width: 30ch; font-weight: 600; }
.hero__sub { color: var(--mist); margin-top: 6px; letter-spacing: .22em; font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Обратный отсчёт */
.countdown { display: flex; gap: 10px; margin-top: 30px; }
.cd-cell { text-align: center; min-width: 62px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(21,27,29,.6); backdrop-filter: blur(6px); }
.cd-cell b { display: block; font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--lime); }
.cd-cell span { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }

/* Адаптив героя стоит ПОСЛЕ базовых правил намеренно: у медиазапросов та же
   специфичность, и выше по файлу их бы перебивали объявления ниже. */

/* На узких экранах сцена не накладывается на текст, а стоит НАД ним обычным
   блоком: так велосипед не окажется под заголовком, а высоту заберёт ту,
   что осталась от текста. Текст ради этого ужат. */
@media (max-width: 999px) {
  .hero__inner { padding-block: 0 64px; }
  .hero__sub { display: none; }
  .hero__badge { margin-bottom: 12px; }
  /* мельче — чтобы «Каркаралинск · зона отдыха «Барс»» встал в одну строку */
  .hero__meta { margin-top: 14px; gap: 8px 18px; font-size: .8rem; }
  .hero__tagline { margin-top: 12px; }
  .hero__cta { margin-top: 20px; }
  .hero__cta .btn--lg { padding: 14px 22px; }
  .countdown { margin-top: 18px; }
  .cd-cell { padding: 7px 6px; min-width: 56px; }
  .cd-cell b { font-size: 1.5rem; }
}

/* Телефон: две кнопки героя разной ширины читались как «главная и обрезок».
   Растягиваем обе на всю колонку — стопка из одинаковых кнопок понятнее,
   и по любой из них проще попасть большим пальцем. */
@media (max-width: 560px) {
  .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .countdown { gap: 8px; }
  .cd-cell { min-width: 0; flex: 1; }
}

/* низкие экраны: кадр героя ровно один, освобождаем вертикаль */
@media (min-width: 1000px) and (max-height: 860px) {
  .hero__inner { padding-block: 92px 40px; }
  .hero__sub { display: none; }
  .countdown { margin-top: 20px; }
  .hero__cta { margin-top: 22px; }
}

/* ---------- Ключевые цифры ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .stats { grid-template-columns: repeat(6, 1fr); } }

.stat {
  padding: 22px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--graphite), var(--carbon));
  position: relative; overflow: hidden;
}
.stat::after { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--lime); }
.stat--cyan::after { background: var(--cyan); }
.stat--orange::after { background: var(--orange); }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1; }
.stat span { display: block; margin-top: 6px; font-size: .74rem; color: var(--mist); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- При поддержке ----------
   Партнёрская строка держится сдержанно: она подтверждает серьёзность
   гонки, но не должна перетягивать внимание с ключевых цифр над ней. */
.support {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
}
.support__label {
  font-size: .68rem; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--mist); flex: none;
}
.support__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; }
.support__item {
  display: inline-flex; align-items: center; gap: 10px;
  opacity: .82; transition: opacity .25s ease;
}
a.support__item:hover, a.support__item:focus-visible { opacity: 1; }
.support__item img { display: block; height: 30px; width: auto; }

/* Локап Remagroup повторяет фирменный: знак плюс «REMA» над «GROUP» */
.support__rema { display: block; line-height: 1; }
.support__rema b {
  display: block; font-size: 1rem; font-weight: 800;
  letter-spacing: -.01em; color: var(--off-white);
}
.support__rema i {
  display: block; margin-top: 2px; font-style: normal;
  font-size: .56rem; font-weight: 800; letter-spacing: .34em; color: #d8b25f;
}

@media (max-width: 560px) {
  .support { gap: 12px 20px; }
  .support__logos { gap: 14px 24px; }
  .support__item img { height: 26px; }
}

/* Титры в первом экране: тот же блок, но без разделителя сверху — он выходит
   карточкой по центру кадра и только потом встаёт на место над заголовком.
   Позицию и масштаб ведёт bike3d.js, здесь только оформление. */
.support--hero {
  position: relative; z-index: 1;
  margin: 0 0 18px; padding-top: 0; border-top: 0;
  will-change: transform, opacity;
  /* Начальную прозрачность ставит скрипт, а не эта таблица: пропиши её здесь —
     и без JS логотипы партнёров остались бы невидимыми навсегда. */
}
/* мягкая подложка под карточкой: белые логотипы поверх светлого колеса
   иначе теряют контраст. Гаснет по мере того, как титры встают на место. */
.support--hero::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 190%; height: 420%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(11,15,16,.9), rgba(11,15,16,0));
  opacity: var(--card, 0); pointer-events: none;
}

/* Титры на телефоне.
   Масштабом карточку там не увеличить: блок и так во всю ширину, и
   увеличение вынесло бы логотипы за край экрана. Поэтому на время титров
   растим не блок, а его содержимое — логотипы, подпись и просветы между
   ними, — а к концу возвращаем к обычному размеру. Долю ведёт скрипт
   переменной --titles: 1 — титры, 0 — встали на место.
   Без этого логотипы проступали сразу в финальном мелком виде рядом с
   едущим колесом, и зрители их не замечали. */
@media (max-width: 999px) {
  .support--hero { --t: var(--titles, 0); }
  .support--hero .support__logos {
    gap: calc(14px + 8px * var(--t)) calc(24px + 14px * var(--t));
  }
  .support--hero .support__item {
    opacity: calc(.82 + .18 * var(--t));
    gap: calc(10px + 4px * var(--t));
  }
  .support--hero .support__item img { height: calc(26px + 20px * var(--t)); }
  .support--hero .support__label {
    font-size: calc(.68rem + .1rem * var(--t));
    letter-spacing: calc(.22em + .04em * var(--t));
    color: color-mix(in srgb, var(--off-white) calc(var(--t) * 100%), var(--mist));
  }
  .support--hero .support__rema b { font-size: calc(1rem + .58rem * var(--t)); }
  .support--hero .support__rema i {
    font-size: calc(.56rem + .3rem * var(--t));
    margin-top: calc(2px + 2px * var(--t));
  }
}

/* ---------- Карточки «почему» ---------- */
.why-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 700px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }

.why-card {
  padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--graphite); position: relative; overflow: hidden;
  transition: transform .24s ease, border-color .24s ease, background-color .24s ease;
}
/* Bold hover со сдвигом цвета — по рекомендации стиля «Vibrant & Block-based» */
.why-card::after {
  content: ""; position: absolute; inset: auto -30% -60% auto; width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(200,255,0,.16), transparent 70%);
  opacity: 0; transition: opacity .28s ease; pointer-events: none;
}
.why-card:hover { transform: translateY(-6px); border-color: var(--lime); background: var(--graphite-2); }
.why-card:hover::after { opacity: 1; }
.why-card:hover .why-card__icon { background: var(--lime); color: var(--carbon); }
.why-card__icon {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px;
  background: rgba(200,255,0,.1); color: var(--lime); margin-bottom: 16px;
  transition: background-color .24s ease, color .24s ease;
}
.why-card h3 { font-size: 1.35rem; margin-bottom: 8px; }
.why-card p { color: var(--mist); font-size: .93rem; margin: 0; }

/* ---------- Категории ---------- */
.cat-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 860px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }

.cat {
  position: relative; padding: 28px 24px 24px; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: linear-gradient(170deg, var(--graphite-2), var(--carbon));
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .24s ease, border-color .24s ease;
}
.cat:hover { transform: translateY(-6px); }
.cat--lime:hover { border-color: var(--lime); }
.cat--cyan:hover { border-color: var(--cyan); }
.cat--orange:hover { border-color: var(--orange); }
/* Верхняя полоса «наливается» при наведении — блочный акцент */
.cat::before { transition: height .24s ease; }
.cat:hover::before { height: 7px; }
.cat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--lime);
}
.cat--cyan::before { background: var(--cyan); }
.cat--orange::before { background: var(--orange); }
.cat__age { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.cat__name { font-size: 2.3rem; margin: 6px 0 4px; }
.cat--lime .cat__name { color: var(--lime); }
.cat--cyan .cat__name { color: var(--cyan); }
.cat--orange .cat__name { color: var(--orange); }
.cat__blurb { color: var(--mist); font-size: .93rem; flex: 1; }
.cat__fee { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 4px; }
.cat__fee b { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.cat__fee span { color: var(--mist); font-size: .82rem; }
.cat__divisions { display: flex; gap: 8px; margin-top: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--mist);
}

/* ---------- Призовая матрица ---------- */
/* ---------- Что разыгрываем ----------
   Строка предметов над матрицей мест. Карточки одинаковой ширины и в один
   ряд на широком экране: это перечень, а не рейтинг, и выделять что-то
   одно не нужно. */
.prize-items {
  display: grid; gap: 10px; margin-top: 32px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px)  { .prize-items { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .prize-items { grid-template-columns: repeat(6, 1fr); } }

.prize-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 12px 16px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--graphite), var(--carbon));
  transition: border-color .24s ease, transform .24s ease;
}
.prize-item:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.prize-item__icon { color: var(--lime); }
.prize-item__icon svg { width: 34px; height: 34px; display: block; }
.prize-item__name { font-weight: 700; font-size: .92rem; line-height: 1.25; }
.prize-item__note {
  font-size: .6rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange);
}
/* Неподтверждённый приз намеренно приглушён: обещать его наравне
   с остальными нельзя, пока организатор не назвал предмет. */
.prize-item--pending { border-style: dashed; }
.prize-item--pending .prize-item__icon { color: var(--mist); }
.prize-item--pending .prize-item__name { color: var(--mist); font-weight: 600; }

.prize-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.prize-tab {
  padding: 10px 18px; border: 1px solid var(--line); background: none; color: var(--mist);
  border-radius: 999px; font-weight: 700; font-size: .84rem; cursor: pointer; transition: .18s;
  font-family: var(--font-sans);
}
.prize-tab.is-active { background: var(--lime); border-color: var(--lime); color: var(--carbon); }

.prize-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 22px; }
@media (min-width: 700px) { .prize-grid { grid-template-columns: repeat(3, 1fr); } }

.prize {
  padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--graphite); position: relative;
}
.prize__place { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: var(--line-strong); }
.prize--1 .prize__place { color: var(--lime); }
.prize--2 .prize__place { color: var(--cyan); }
.prize--3 .prize__place { color: var(--orange); }
.prize h4 { font-size: 1.15rem; margin: 6px 0 0; font-weight: 700; }
.prize small { color: var(--mist); font-size: .78rem; }
.prize .pending { display: inline-block; margin-top: 8px; padding: 3px 9px; border: 1px dashed var(--line-strong); border-radius: 999px; font-size: .68rem; color: var(--mist); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Шаги «как участвовать» ---------- */
.steps { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 40px; counter-reset: s; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { padding: 24px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--graphite); position: relative; }
.step b { font-family: var(--font-display); font-size: 3rem; color: var(--lime); line-height: 1; display: block; }
.step h4 { margin: 8px 0 6px; font-size: 1.1rem; font-weight: 800; }
.step p { color: var(--mist); font-size: .9rem; margin: 0; }

/* ---------- Программа / таймлайн ---------- */
.timeline { margin-top: 36px; border-left: 2px solid var(--line); padding-left: 22px; }
.tl-item { position: relative; padding-bottom: 22px; }
.tl-item::before { content: ""; position: absolute; left: -29px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--carbon); border: 2px solid var(--lime); }
.tl-item b { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--lime); }
.tl-item span { color: var(--mist); font-size: .95rem; }

/* ---------- Секция трассы ---------- */
.route-card { margin-top: 36px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--graphite); }
.route-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 20px; }
@media (min-width: 760px) { .route-grid { grid-template-columns: repeat(4, 1fr); } }
.route-item { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.route-item b { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--off-white); }
/* .tbd — значение-заглушка; тоже блок, иначе слипается с подписью */
.route-item .tbd { display: block; color: var(--mist); font-size: 1.02rem; font-family: var(--font-sans); font-weight: 700; text-transform: none; letter-spacing: 0; }
.route-item > span:not(.tbd) { display: block; margin-top: 4px; font-size: .74rem; color: var(--mist); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Спонсоры CTA ---------- */
.sponsor-cta {
  margin-top: 20px; padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--orange), #ff8a3d);
  color: #1a0d05; position: relative; overflow: hidden;
}
/* Рисунок живёт в правой части блока, за текстом. Ширину даём в процентах,
   чтобы он ужимался вместе с карточкой, а не вылезал на узких экранах. */
.sponsor-cta__art {
  position: absolute; right: -2%; bottom: -6%; width: 46%; max-width: 420px;
  pointer-events: none; user-select: none;
}
.sponsor-cta > *:not(.sponsor-cta__art) { position: relative; }
.sponsor-cta h2 { font-size: clamp(2rem, 6vw, 3.4rem); color: #1a0d05; }
.sponsor-cta p { max-width: 56ch; font-weight: 600; margin-top: 12px; }
/* На узком экране текст идёт во всю ширину, поэтому рисунок не прячем,
   а укладываем полосой по низу карточки — за текст он там не залезает.
   Снизу добавляем воздух, чтобы кнопки не стояли на горах. */
@media (max-width: 760px) {
  .sponsor-cta { padding-bottom: 150px; }
  .sponsor-cta__art { right: -4%; left: -4%; bottom: -2%; width: auto; max-width: none; opacity: .8; }
}
@media (max-width: 560px) {
  .sponsor-cta .btn { width: 100%; justify-content: center; }
}
.sponsor-cta .btn--dark { background: var(--carbon); color: var(--off-white); }

/* ---------- FAQ ---------- */
.faq { margin-top: 36px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
/* Строка вопроса — цель для пальца, а не просто текст: без min-height
   она была высотой 27 px, и промахнуться мимо неё легко. */
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-weight: 700; font-size: 1.05rem; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.7rem; color: var(--lime); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--mist); margin: 12px 0 0; font-size: .96rem; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--graphite); padding-block: 48px 110px; }
@media (min-width: 1000px) { .footer { padding-bottom: 48px; } }
.footer__grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h4 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin-bottom: 12px; font-family: var(--font-sans); font-weight: 800; }
.footer a, .footer p { color: var(--mist); font-size: .92rem; }
.footer a:hover { color: var(--lime); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
/* На телефоне ссылки подвала — тоже цели для пальца: 18 px в высоту с зазором
   в 8 px давали промахи. Растягиваем сами ссылки, а не только расстояние,
   чтобы область нажатия совпадала с тем, что человек видит. */
@media (max-width: 999px) {
  .footer ul { gap: 2px; }
  .footer ul a { display: flex; align-items: center; min-height: 40px; }
  .brand { min-height: 44px; }
  /* Телефон в подвале на телефоне — главное действие «позвонить», а не текст */
  .footer__phone { min-height: 44px; padding-right: 8px; }
  .support__item { min-height: 44px; }
}
.footer__phone { display: inline-flex; align-items: center; font-weight: 700; color: var(--off-white); }
.footer__bottom { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--mist); display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; }

/* ---------- Мобильный фиксированный CTA (ТЗ §7.1) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 12px 16px calc(12px + var(--safe-b));
  background: linear-gradient(180deg, rgba(11,15,16,0), rgba(11,15,16,.96) 34%);
  display: block;
  /* скрыт, пока виден собственный CTA в hero — иначе перекрывает его */
  transform: translateY(120%); opacity: 0; pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
.sticky-cta.is-visible { transform: none; opacity: 1; pointer-events: auto; }
@media (min-width: 1000px) { .sticky-cta { display: none; } }
/* Полоса CTA висит поверх страницы, поэтому нижнюю часть подвала она бы
   закрывала. Отдаём ей высоту явным отступом — иначе последние ссылки
   докрутить до конца невозможно. */
@media (max-width: 999px) { body:has(.sticky-cta) .footer { padding-bottom: calc(84px + var(--safe-b)); } }

/* ============================================================
   ФОРМА РЕГИСТРАЦИИ (ТЗ §10)
   ============================================================ */
.page-head { padding-top: 96px; }

.form-wrap { max-width: 760px; margin-inline: auto; }

.fieldset {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--graphite); padding: 24px 22px; margin-bottom: 16px;
}
.fieldset__title {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font-family: var(--font-display); font-size: 1.5rem;
}
.fieldset__num {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: var(--lime); color: var(--carbon);
  font-size: 1.1rem; line-height: 1;
}

.grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.field { display: block; margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field label, .label {
  display: block; margin-bottom: 7px; font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--mist);
}
.field .req { color: var(--orange); }

.input, .select, .textarea {
  width: 100%; padding: 14px 15px; font-size: 16px; font-family: var(--font-sans);
  color: var(--off-white); background: var(--carbon);
  border: 1.5px solid var(--line); border-radius: 12px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  min-height: 52px;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--lime); box-shadow: 0 0 0 4px rgba(200,255,0,.14);
}
/* #6d7a78 давал 4.32 — ниже порога 4.5. Осветлён до 5.45. */
.input::placeholder { color: #7e8b89; }
.input.is-invalid, .select.is-invalid { border-color: var(--orange); }
.select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23aeb8b6' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 42px;
}
.err { display: block; margin-top: 6px; color: var(--orange); font-size: .84rem; font-weight: 600; }
.hint { display: block; margin-top: 6px; color: var(--mist); font-size: .82rem; }

/* Радио-переключатель пола */
.radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-card span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 14px; border: 1.5px solid var(--line);
  border-radius: 12px; font-weight: 700; color: var(--mist); cursor: pointer;
  transition: .15s;
}
.radio-card input:checked + span { border-color: var(--lime); background: rgba(200,255,0,.1); color: var(--lime); }
.radio-card input:focus-visible + span { box-shadow: 0 0 0 4px rgba(200,255,0,.18); }

/* Чекбоксы согласий */
.check { display: flex; gap: 12px; padding: 12px 0; align-items: flex-start; cursor: pointer; }
.check + .check { border-top: 1px solid var(--line); }
.check input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--lime); cursor: pointer; }
.check span { font-size: .92rem; color: var(--mist); line-height: 1.5; }
.check a { color: var(--lime); text-decoration: underline; }

/* Многострочное поле: те же рамка и фокус, что у input, но высота по контенту */
.input--area { min-height: 0; line-height: 1.55; resize: vertical; }

/* Форматы поддержки — не столбик согласий, а набор «таблеток»: их десять,
   выбор необязательный, и вертикальный список из десяти строк выглядел бы
   как анкета, которую надо осилить. */
.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.check--pill {
  padding: 0; border: 1.5px solid var(--line); border-radius: 999px;
  align-items: center; gap: 9px; padding: 10px 16px 10px 13px;
  min-height: 44px; transition: border-color .15s ease, background .15s ease;
}
.check--pill + .check--pill { border-top: 1.5px solid var(--line); }
.check--pill input { width: 18px; height: 18px; margin-top: 0; }
.check--pill span { font-size: .88rem; font-weight: 600; }
.check--pill:has(input:checked) { border-color: var(--lime); background: rgba(200,255,0,.09); }
.check--pill:has(input:checked) span { color: var(--lime); }
.check--pill:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(200,255,0,.18); }

/* Три довода для спонсора над формой */
.pitch { display: grid; gap: 12px; margin-top: 26px; }
@media (min-width: 760px) { .pitch { grid-template-columns: repeat(3, 1fr); } }
.pitch__item {
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--graphite);
}
.pitch__item b {
  display: block; font-family: var(--font-display); font-size: 1.05rem;
  color: var(--off-white); margin-bottom: 6px;
}
.pitch__item span { font-size: .9rem; color: var(--mist); line-height: 1.55; }

/* ---------- Документы ---------- */
.doc { max-width: 780px; margin-inline: auto; }
.doc__meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mist);
}
.doc__section { margin-top: 34px; }
.doc__section h2 {
  font-family: var(--font-display); font-size: clamp(1.25rem, 3.4vw, 1.55rem);
  color: var(--off-white); margin-bottom: 12px;
}
/* Читаемая мера строки: длинный юридический текст во всю ширину экрана
   глаз теряет между строками. */
.doc__body p { max-width: 68ch; color: var(--mist); line-height: 1.72; margin-bottom: 12px; }
.doc__body p:last-child { margin-bottom: 0; }
.doc__list, .doc__steps { max-width: 68ch; margin: 14px 0 0; padding-left: 0; list-style: none; }
.doc__list li, .doc__steps li {
  position: relative; padding-left: 30px; margin-bottom: 10px;
  color: var(--mist); line-height: 1.62;
}
.doc__list li::before {
  content: ""; position: absolute; left: 8px; top: 10px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--lime);
}
.doc__steps { counter-reset: step; }
.doc__steps li { counter-increment: step; }
.doc__steps li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; border-radius: 50%;
  background: rgba(200,255,0,.14); color: var(--lime);
  font-family: var(--font-display); font-size: .82rem;
  display: grid; place-items: center;
}
.doc__note {
  margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--cyan);
  background: var(--graphite); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--off-white) !important;
}
/* Врезка «уточняется». Оранжевая рамка намеренно заметна: пункт, который
   ещё не утверждён, участник должен видеть, а не додумывать. */
.doc__pending {
  margin-top: 40px; padding: 22px; border: 1.5px dashed var(--orange);
  border-radius: var(--radius-lg); background: rgba(255,90,31,.06);
}
.doc__pending h2 {
  font-family: var(--font-display); font-size: 1.15rem; color: var(--orange);
  margin-bottom: 10px;
}
.doc__pending ul { margin: 12px 0 0; padding-left: 20px; }
.doc__pending li { color: var(--mist); line-height: 1.6; margin-bottom: 8px; }
.doc__pending-foot { margin-top: 14px; font-size: .9rem; }
/* Телефон здесь — действие «позвонить», а не часть текста: даём ему
   полноценную область нажатия, как в подвале. */
.doc__pending-foot a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--lime); font-weight: 700;
}
.doc__foot {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
@media (max-width: 560px) {
  .doc__foot { flex-direction: column; }
  .doc__foot .btn { width: 100%; justify-content: center; }
}

/* Панель рассчитанной категории */
.calc {
  border: 1.5px solid var(--lime); border-radius: var(--radius-lg);
  background: linear-gradient(140deg, rgba(200,255,0,.12), rgba(200,255,0,.03));
  padding: 20px; margin-bottom: 16px;
}
.calc--review { border-color: var(--orange); background: linear-gradient(140deg, rgba(255,90,31,.14), rgba(255,90,31,.03)); }
.calc__row { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: flex-end; }
.calc__item b { display: block; font-family: var(--font-display); font-size: 2.1rem; line-height: 1; color: var(--lime); }
.calc--review .calc__item b { color: var(--orange); font-size: 1.3rem; font-family: var(--font-sans); }
.calc__item span { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mist); }
.calc__note { margin: 12px 0 0; font-size: .9rem; color: var(--off-white); }

/* Статус заявки */
.status-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--graphite); padding: 26px 24px; margin-bottom: 16px;
}
.status-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-radius: 999px; font-weight: 800; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.status-badge--wait { background: rgba(255,90,31,.16); color: var(--orange); border: 1px solid rgba(255,90,31,.4); }
.status-badge--ok { background: rgba(200,255,0,.16); color: var(--lime); border: 1px solid rgba(200,255,0,.4); }
.status-badge--review { background: rgba(0,217,255,.14); color: var(--cyan); border: 1px solid rgba(0,217,255,.4); }

.kv { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 20px; }
.kv__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv__row:last-child { border-bottom: none; }
.kv__row dt { color: var(--mist); font-size: .9rem; }
.kv__row dd { margin: 0; font-weight: 700; text-align: right; }

.code-pill {
  display: inline-block; padding: 6px 14px; border-radius: 8px;
  background: var(--carbon); border: 1px dashed var(--line-strong);
  font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .06em; color: var(--lime);
}

.steps-list { counter-reset: n; list-style: none; padding: 0; margin: 18px 0 0; }
.steps-list li {
  counter-increment: n; position: relative; padding: 0 0 16px 40px; color: var(--mist);
}
.steps-list li::before {
  content: counter(n); position: absolute; left: 0; top: -2px;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(200,255,0,.14); color: var(--lime); font-weight: 800; font-size: .82rem;
}

/* ==========================================================================
   Оплата взноса: кнопка вместо QR и окно перехода в Kaspi.
   QR на телефоне не отсканировать (сканер и экран — одно устройство),
   поэтому ссылка из QR отдаётся кнопкой, а окно показывает сумму и ведёт
   в приложение после короткого отсчёта.
   ========================================================================== */
.pay-cta { font-size: 1.04rem; }

.pay-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 20px;
  background: rgba(6, 9, 10, .8);
  backdrop-filter: blur(6px);
}
.pay-overlay[hidden] { display: none; }
.pay-overlay__card {
  width: 100%; max-width: 380px; padding: 28px 24px 18px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--graphite-2), var(--graphite));
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .85);
  text-align: center;
}
.pay-overlay__label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mist);
}
.pay-overlay__amount {
  margin: 6px 0 2px; font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 2.7rem); line-height: 1.05; color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.pay-overlay__text { margin: 12px 0 18px; color: var(--mist); }
.pay-overlay__count {
  display: inline-block; min-width: 1.4em; color: var(--off-white);
  font-family: var(--font-display); font-size: 1.5rem; vertical-align: -2px;
}
.pay-overlay__cancel {
  width: 100%; min-height: 46px; margin-top: 6px;
  background: none; border: 0; color: var(--mist); font: inherit; cursor: pointer;
}
.pay-overlay__cancel:hover { color: var(--off-white); }
.pay-overlay__web {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; margin-top: 10px; color: var(--mist); font-size: .84rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.pay-overlay__web:hover { color: var(--off-white); }
/* Кнопка «открыть приложение» после отсчёта: мягко пульсирует, привлекая палец */
.pay-overlay__card .btn.is-pulse { animation: pay-pulse 1.4s ease-in-out infinite; }
@keyframes pay-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 255, 0, .5); }
  50% { box-shadow: 0 0 0 12px rgba(200, 255, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pay-overlay__card .btn.is-pulse { animation: none; }
}
.pay-overlay__note { margin: 10px 0 0; font-size: .76rem; color: var(--mist); }

/* Два равнозначных способа прислать чек: файлом или в WhatsApp */
.receipt-ways { display: grid; gap: 14px; margin-top: 16px; }
@media (min-width: 700px) { .receipt-ways { grid-template-columns: 1fr 1fr; } }
.receipt-way {
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--carbon);
}
.receipt-way__head { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.receipt-way__step {
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: rgba(200, 255, 0, .16); color: var(--lime);
  font-family: var(--font-display); font-size: .85rem;
}
.receipt-way__hint { font-size: .82rem; color: var(--mist); line-height: 1.5; }
.receipt-way__drop {
  display: block; padding: 16px 14px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
}
.receipt-way__drop:hover { border-color: rgba(200, 255, 0, .5); }
.receipt-way__drop input { display: block; width: 100%; font-size: .84rem; color: var(--mist); }
.receipt-way__drop input::file-selector-button {
  margin-right: 10px; padding: 8px 12px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--graphite-2); color: var(--off-white);
  font: inherit; font-size: .82rem; cursor: pointer;
}
.receipt-way .btn { margin-top: auto; }

.btn--whatsapp {
  background: #25d366; color: #05170c;
  box-shadow: 0 8px 30px -12px rgba(37, 211, 102, .75);
}
.btn--whatsapp:hover { box-shadow: 0 10px 38px -8px rgba(37, 211, 102, .9); }

/* Живая проверка номера: мобильный ли он и есть ли WhatsApp */
.phone-ok, .phone-warn {
  display: block; margin-top: 8px; font-size: .84rem; line-height: 1.5;
}
.phone-ok { color: var(--lime); }
.phone-warn { color: var(--orange); }

/* ==========================================================================
   Дата рождения: три селекта (день / месяц / год).
   Нативный input[type=date] на телефоне открывает календарь, где до 1990 года
   листать десятилетия — форма теряла лид ровно на этом поле. Списки выбираются
   в два касания и не требуют клавиатуры.
   ========================================================================== */
.birthdate {
  display: grid; grid-template-columns: 84px 1fr 104px; gap: 10px;
  margin-top: 4px;
}
.birthdate__field { display: flex; flex-direction: column; gap: 6px; }
.birthdate__field label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mist);
}
.birthdate .select { width: 100%; }
@media (max-width: 420px) {
  .birthdate { grid-template-columns: 74px 1fr 92px; gap: 8px; }
}

/* ---------- Появление при скролле ----------
   ВАЖНО: по умолчанию блоки ВИДИМЫ. Скрывает их только Motion после того,
   как реально загрузился (html.motion-ready). Иначе при сбое анимации
   пользователь остался бы с пустой страницей. */
.reveal { opacity: 1; transform: none; }
html.motion-ready .reveal:not(.is-in) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Админ-панель (ТЗ §17). Оператор смотрит панель с телефона в дороге, поэтому
   сначала мобильная раскладка: карточки в две колонки, таблицы — со свайпом
   по горизонтали, крупные области нажатия.
   ========================================================================== */
.admin-head {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  align-items: baseline; justify-content: space-between;
}
.admin-who { font-size: .84rem; color: var(--mist); }
.admin-who b { color: var(--off-white); }

.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.admin-nav a,
.admin-nav button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--graphite);
  color: var(--mist); font: inherit; font-size: .84rem; font-weight: 700;
  letter-spacing: .02em; cursor: pointer; text-decoration: none;
}
.admin-nav a:hover, .admin-nav button:hover { color: var(--off-white); border-color: var(--line-strong); }
.admin-nav .is-active { background: var(--lime); border-color: var(--lime); color: var(--carbon); }
.admin-nav form { margin: 0; }

/* Цифры дашборда */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; }
@media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .stat-grid { grid-template-columns: repeat(6, 1fr); } }
.stat-card {
  padding: 16px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--graphite-2), var(--graphite));
}
.stat-card__label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--mist); line-height: 1.35;
}
.stat-card__value {
  margin-top: 8px; font-family: var(--font-display); font-size: clamp(1.45rem, 4.6vw, 2rem);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.stat-card__hint { margin-top: 6px; font-size: .74rem; color: var(--mist); }
.stat-card--lime { border-color: rgba(200,255,0,.32); }
.stat-card--lime .stat-card__value { color: var(--lime); }
.stat-card--cyan { border-color: rgba(0,217,255,.28); }
.stat-card--cyan .stat-card__value { color: var(--cyan); }
.stat-card--orange { border-color: rgba(255,90,31,.32); }
.stat-card--orange .stat-card__value { color: var(--orange); }

/* Воронка оплаты: сколько дошло до каждого шага */
.funnel { margin-top: 8px; }
.funnel__row { display: grid; grid-template-columns: 128px 1fr 46px; align-items: center; gap: 10px; margin-bottom: 9px; }
.funnel__label { font-size: .78rem; color: var(--mist); }
.funnel__track { height: 22px; border-radius: 6px; background: var(--carbon); border: 1px solid var(--line); overflow: hidden; }
.funnel__bar { height: 100%; border-radius: 5px 0 0 5px; background: linear-gradient(90deg, rgba(200,255,0,.85), rgba(200,255,0,.35)); }
.funnel__bar--cyan { background: linear-gradient(90deg, rgba(0,217,255,.8), rgba(0,217,255,.3)); }
.funnel__bar--orange { background: linear-gradient(90deg, rgba(255,90,31,.85), rgba(255,90,31,.3)); }
.funnel__value { font-family: var(--font-display); font-size: 1rem; text-align: right; font-variant-numeric: tabular-nums; }

/* Таблицы: на телефоне прокручиваются вбок, а не ломают вёрстку */
.table-wrap {
  margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.admin-table th, .admin-table td { padding: 11px 13px; text-align: left; vertical-align: top; }
.admin-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--graphite-2); color: var(--mist);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap; border-bottom: 1px solid var(--line);
}
.admin-table td { border-bottom: 1px solid var(--line); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover td { background: rgba(245,247,242,.035); }
.admin-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table .nowrap { white-space: nowrap; }
.admin-table .muted { color: var(--mist); }
.admin-table--wide { min-width: 760px; }
.admin-table--mid { min-width: 560px; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
  border: 1px solid var(--line); color: var(--mist);
}
.badge--ok { color: var(--lime); border-color: rgba(200,255,0,.4); background: rgba(200,255,0,.1); }
.badge--wait { color: var(--cyan); border-color: rgba(0,217,255,.4); background: rgba(0,217,255,.1); }
.badge--warn { color: var(--orange); border-color: rgba(255,90,31,.45); background: rgba(255,90,31,.12); }
.badge--bad { color: #ff8585; border-color: rgba(255,90,31,.5); background: rgba(255,90,31,.16); }

/* Мини-график событий по дням */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 74px; margin-top: 12px; }
.bars__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bars__bar { background: linear-gradient(180deg, var(--lime), rgba(200,255,0,.22)); border-radius: 3px 3px 0 0; min-height: 3px; }
.bars__label { margin-top: 6px; font-size: .6rem; color: var(--mist); text-align: center; }

.split { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.rank { list-style: none; padding: 0; margin: 10px 0 0; }
.rank li {
  display: flex; justify-content: space-between; gap: 14px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: .88rem;
}
.rank li:last-child { border-bottom: 0; }
.rank b { font-variant-numeric: tabular-nums; color: var(--lime); }

/* Экран входа: код в WhatsApp */
.login-wrap { max-width: 460px; margin: 0 auto; }
.otp-input {
  font-family: var(--font-display); font-size: 2rem; letter-spacing: .42em;
  text-align: center; padding-left: .42em;
}
@media (max-width: 420px) { .otp-input { font-size: 1.6rem; letter-spacing: .3em; padding-left: .3em; } }
.login-steps { display: flex; gap: 8px; margin-top: 6px; font-size: .78rem; color: var(--mist); }
.login-steps span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); }
.login-steps .is-active { color: var(--carbon); background: var(--lime); border-color: var(--lime); font-weight: 700; }