/* =================================================================
   ПЕСОК — vers-2  (по референсу ref.jpg)

   ТОЧНЫЕ данные по рефу (пиксельная выборка):
     Фон страницы ........ тёмное фото bgr_land.webp (коричневые тона)
     Акцент .............. #f8a813  (замер #F0A80C)
     Карточка (плёнка) ... #E8E5E0 с РАЗНОЙ прозрачностью:
                            hero      ~ 0.47
                            specialty ~ 0.32
                            guests    ~ 0.22
     Видеоплашка about ... почти чёрная #0D0E12
     Стат-кружки ......... заполненные (filled), цифры #f8a813
   Шрифты: FEHero-Regular (заголовки), Montserrat (основной)
   ================================================================= */

:root {
    --bg-img:      url('../img/bgr_land.webp');
    --card:        #E8E5E0;   /* базовый цвет карточки-плёнки */
    --card-hero:   rgba(232, 229, 224, 0.42);
    --card-spec:   rgba(232, 229, 224, 0.32);
    --card-guests: rgba(232, 229, 224, 0.22);
    --card-weare:  rgba(232, 229, 224, 0.30);
    --coffee:      #2C2218;   /* тёмно-коричневый текст внутри карточек */
    --text:        #1A130B;
    --text-soft:   #4A3A2A;
    --accent:      #f8a813;   /* правильный золотой акцент */
    --accent-deep: #d98a00;
    --video-panel: #0D0E12;
}

/* ─── Шрифт FEHero (вместо Oswald) ─── */
@font-face {
    font-family: 'FEHero-Regular';
    src: url('../fonts/fehero-regular.woff2') format('woff2'),
         url('../fonts/fehero-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: auto; /* плавный скролл делаем в JS с учётом шапки */
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
    /* тёмное фото + затемнение 50% (скроллится вместе со страницей) */
    background:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        #0D0E12 var(--bg-img) no-repeat center top;
    background-size: cover, cover;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ─── Header ─── */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.81);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
}

.nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 56px;
    flex-wrap: wrap;
}

.nav a {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1A130B;
    text-transform: lowercase;
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

/* Квадратные скобки вокруг пункта меню (глобально — на десктопе и мобиле).
   При ховере раздвигаются на 12px наружу. */
.nav a::before { content: "["; margin-right: 3px; }
.nav a::after  { content: "]"; margin-left: 3px; }
.nav a::before,
.nav a::after {
    display: inline-block;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); /* плавно, но быстро */
    will-change: transform;
}
.nav a:hover::before { transform: translateX(-12px); }
.nav a:hover::after  { transform: translateX(12px); }

.nav a:hover {
    color: var(--accent);
}

/* Активный пункт (scroll-spy): песочный цвет + разъезд скобок на 9px
   (на 3px меньше, чем при ховере). */
.nav a.is-active {
    color: var(--accent);
}
.nav a.is-active::before { transform: translateX(-9px); }
.nav a.is-active::after  { transform: translateX(9px); }

section {
    position: relative;
}

/* ─── Hero ─── */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 0 80px;
    /* SVG-тень карточки шире экрана — без обрезки телефон расползается вбок */
    overflow-x: hidden;
    overflow-x: clip;
}

/* со скриптом верхний отступ считает js/promo-scroll.js: кнопки карточки —
   ровно посередине экрана */
.reveal-on .hero {
    align-items: flex-start;
}

/* ─── Сцена: hero + видео (vers-5) ───
   Карточка ПЕСОК и рамка видео одной ширины, по бокам у обеих выемки под кнопки.
   Кнопки — в .float-track (см. ниже), в выемках стоят пустые .notch-slot.
   Фон и тень выемок — слои .notch-bg / .notch-shadow, их контур считает
   js/notch-shape.js по положению слотов. Переменные ниже — геометрия выемок,
   скрипты читают их из стилей. Карточка уже контейнера на 2 × --pill-out:
   кнопки торчат за её края. */
.scene {
    --pill-out: 64px;       /* насколько кнопка торчит за край карточки (не меньше её радиуса) */
    --pill-w: 200px;        /* ширина боковой кнопки */
    --pill-h: 106px;        /* высота боковой кнопки (две строки текста) */
    --notch-gap: 20px;      /* зазор между кнопкой и краем выемки */
    --notch-fillet: 26px;   /* скругление стыка выемки с краем карточки */
    --card-radius: 50px;
    --card-max: 700px;      /* звезда слева выходит за край карточки */
    --pad-x: 45px;
    position: relative;
}

.hero-card {
    position: relative;
    isolation: isolate;     /* слои фона с z-index < 0 остаются внутри карточки */
    padding: 54px var(--pad-x) 45px;
    text-align: center;
    max-width: var(--card-max);
    width: calc(100% - 2 * var(--pill-out));
    margin: 0 auto;
    overflow: visible;
}

.hero-card-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(232, 229, 224, 0.33);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--card-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* контур посчитан — тень рисует SVG, box-shadow обрезался бы выемками */
.has-notches > .notch-bg {
    box-shadow: none;
}

.notch-shadow {
    display: none;
    position: absolute;
    z-index: -2;
    overflow: visible;
    pointer-events: none;
}

.has-notches > .notch-shadow {
    display: block;
}

/* пустое место под кнопку в выемке */
.notch-slot {
    width: var(--pill-w);
    height: var(--pill-h);
}

.hero-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 21px;
    margin-top: -139px;
    margin-bottom: 24px;
}

.hero-logo .star {
    width: 292px;
    height: auto;
    margin-left: -187px;
    margin-top: 21px;
}

.hero-logo h1 {
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 250px;
    font-weight: 700;
    line-height: 0.9;
    color: #FFFFFF;
    letter-spacing: 4px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero-title {
    position: relative;
}

/* мелкая надпись над правым краем заголовка ПЕСОК */
.hero-kicker {
    position: absolute;
    top: 13px;
    right: 7px;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 3px;
    color: #FFFFFF;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* ─── Анимация схождения лого при загрузке ───
   Стартовое состояние: звезда и заголовок разведены (доп. смещение по X),
   полупрозрачные. После добавления класса .is-loaded transform обнуляется,
   opacity → 1 → плавное схождение и появление. */
.hero-logo .star,
.hero-logo .hero-title {
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 700ms ease;
    will-change: transform, opacity;
}

.reveal-on .hero-logo .star        { transform: translateX(-40px); opacity: 0; }
.reveal-on .hero-logo .hero-title  { transform: translateX(40px); opacity: 0; }

.hero-logo.is-loaded .star,
.hero-logo.is-loaded .hero-title { transform: translateX(0); opacity: 1; }

/* ─── Reveal-анимации (появление при скролле) ───
   Без JS элементы видимы по умолчанию (graceful degradation).
   JS ставит класс .reveal-on на <html> синхронно в <head> — только тогда
   стартовое скрытое состояние активируется. Класс .is-visible добавляется
   IntersectionObserver → плавное появление.
   data-reveal-variant задаёт тип: fade-up (по умолч.), pop, slide-left/right. */
[data-reveal] {
    transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

/* только когда JS включил режим — прячем стартовое состояние */
.reveal-on [data-reveal] { opacity: 0; }
.reveal-on [data-reveal-variant="fade-up"]    { transform: translateY(40px); }
.reveal-on [data-reveal-variant="fade-down"]  { transform: translateY(-40px); }
.reveal-on [data-reveal-variant="slide-left"]  { transform: translateX(-60px); }
.reveal-on [data-reveal-variant="slide-right"] { transform: translateX(60px); }
.reveal-on [data-reveal-variant="pop"]        { transform: scale(0.8); }
.reveal-on [data-reveal-variant="blur"]       { filter: blur(12px); transform: translateY(20px); }

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ─── Pop-in кружков статистики (с overshoot для «жизни») ───
   Применяется к .stat-item. Без JS кружок виден нормально. Когда JS
   включил режим (.reveal-on), кружок стартует сжатым и проявляется при
   попадании в viewport. */
.stat-item {
    transition: opacity 600ms ease,
                transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: var(--stagger, 0ms);
}
.reveal-on .stat-item {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
}
.stat-item.is-visible {
    opacity: 1;
    transform: none;
}

/* ─── Плавное появление контента hero после лого ───
   Подзаголовок, дата, описание и кнопка появляются по очереди снизу-вверх
   сразу после схождения лого. Класс .hero-ready вешается на .hero-card.
   Без JS (no .reveal-on) — контент виден сразу. */
.reveal-on .hero-card .hero-mid,
.reveal-on .hero-card .hero-date,
.reveal-on .hero-card .hero-desc,
.reveal-on .hero-card .hero-btn-wrap {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms ease, transform 600ms ease;
}
.hero-card.hero-ready .hero-mid      { transition-delay: 250ms; opacity: 1; transform: none; }
.hero-card.hero-ready .hero-date     { transition-delay: 400ms; opacity: 1; transform: none; }
.hero-card.hero-ready .hero-desc     { transition-delay: 550ms; opacity: 1; transform: none; }
.hero-card.hero-ready .hero-btn-wrap { transition-delay: 700ms; opacity: 1; transform: none; }

/* Средний ряд: [Подать заявку] ЧЕМПИОНАТ РОССИИ [Документация].
   Ряд шире карточки на --pill-out с каждой стороны — кнопки встают в выемки. */
.hero-mid {
    display: grid;
    grid-template-columns: var(--pill-w) minmax(0, 1fr) var(--pill-w);
    align-items: center;
    column-gap: var(--notch-gap);
    margin: 0 calc(-1 * (var(--pad-x) + var(--pill-out))) calc(var(--notch-gap) + 16px);
}

.hero-notch-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--pill-w);
    height: var(--pill-h);
    padding: 0 16px 4px;
    border-radius: 999px;
    background: rgba(232, 229, 224, 0.33);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 45px;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    transition: background 0.3s ease;
}

.hero-notch-btn:hover {
    background: rgba(248, 168, 19, 0.9);
}

/* ─── Плавающие кнопки ───
   Дорожка от выемки карточки до выемки видео (top/height ставит
   js/promo-scroll.js). Ряд кнопок липнет к экрану на своей стартовой высоте
   (--float-top) и отпускается у нижнего края дорожки — ровно тогда, когда
   заканчивается 300px стоянка видео. Пока скрипт не посчитал — не видно. */
.float-track {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--track-top, 0px);
    height: var(--track-h, 0px);
    z-index: 20;
    pointer-events: none;
    visibility: hidden;
}

.scene.float-ready .float-track {
    visibility: visible;
}

.float-track .container {
    height: 100%;
}

.float-btns {
    position: sticky;
    top: var(--float-top, 0px);
    display: flex;
    justify-content: space-between;
    max-width: calc(var(--card-max) + 2 * var(--pill-out));
    margin: 0 auto;
}

.float-btns .hero-notch-btn {
    pointer-events: auto;
}

.reveal-on .float-btns .hero-notch-btn {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms ease 250ms, transform 600ms ease 250ms, background 0.3s ease;
}

.float-btns.hero-ready .hero-notch-btn {
    opacity: 1;
    transform: none;
}

/* ─── Видео ─── */
.promo {
    padding: 10px 0 70px;
    overflow-x: clip;       /* тень рамки шире экрана; clip не ломает sticky */
}

/* стоянка: под видео 300px пустого места, пока оно «стоит».
   Именно блоком, а не padding — sticky ездит только в пределах содержимого. */
.promo-hold {
    height: 300px;
}

.promo-stage {
    position: sticky;
    top: var(--stage-top, 20vh);
}

.promo-frame {
    position: relative;
    isolation: isolate;
    width: calc(100% - 2 * var(--pill-out));
    max-width: var(--card-max);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
}

.promo-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: var(--card-radius);
    background: #0D0E12;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.promo-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* слоты по бокам, по центру высоты видео (без transform — скрипт читает offsetTop) */
.promo-frame > .notch-slot {
    position: absolute;
    top: calc(50% - var(--pill-h) / 2);
}

.promo-frame > .notch-slot--left  { left: calc(-1 * var(--pill-out)); }
.promo-frame > .notch-slot--right { right: calc(-1 * var(--pill-out)); }

/* ▶ по центру видео — как кнопка звука, но песочного цвета, как звезда
   (на светлом кадре прозрачный кружок не видно); пока видео играет — спрятана */
.promo-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s;
}

.promo-play:hover {
    background: var(--accent-deep);
}

.promo-play svg {
    width: 34px;
    height: 34px;
    margin-left: 5px;   /* треугольник визуально по центру круга */
    fill: currentColor;
}

.promo-frame.is-playing .promo-play {
    opacity: 0;
    visibility: hidden;
    transition: background 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* кнопка звука — только после первого запуска */
.promo-sound {
    position: absolute;
    right: 22px;
    bottom: 18px;
    width: 46px;
    height: 46px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(232, 229, 224, 0.33);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.3s ease;
}

.promo-frame.is-started .promo-sound {
    display: flex;
}

.promo-sound:hover {
    background: rgba(248, 168, 19, 0.9);
}

.promo-sound svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.promo-sound svg path:first-child {
    fill: currentColor;
}

.promo-sound-on,
.promo-sound[aria-pressed="true"] .promo-sound-off {
    display: none;
}

.promo-sound[aria-pressed="true"] .promo-sound-on {
    display: block;
}

/* без overflow: clip тень рамки растянула бы телефон вбок — остаётся box-shadow */
@supports not (overflow: clip) {
    .promo .notch-shadow { display: none !important; }
}

.hero-subtitle {
    display: inline-block;
    justify-self: center;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 44px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.15;
}

/* строка «РОССИИ» + мелкое «ПО / ДЖЕЗВЕ» слева от блока:
   две строки вплотную, по левому краю между собой */
.hero-sub-russia {
    display: inline-flex;
    align-items: stretch;
}

.hero-sub-note {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    margin-left: 12px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 1px;
}

.hero-date {
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 77px;
    font-weight: 600;
    color: var(--accent);
    margin: 0 auto 14px;
    letter-spacing: 2px;
    width: 100%;
    line-height: 1.1;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.hero-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: #FFFFFF;
    margin-bottom: 0;
}

/* плашка призового фонда ВНЕ карточки, ниже, с таким же фрост-фоном */
.hero-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

/* та же капсула, что у кнопок; по нажатию — модалка с призовыми местами.
   Две строки: сумма, под ней «призовой фонд» */
.hero-prize {
    display: inline-flex;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    background: rgba(232, 229, 224, 0.33);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #FFFFFF;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 41px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    padding: 8px 56px 12px;
    border-radius: 50px;
}

/* сумма на 8px крупнее базового размера плашки (на всех экранах) */
.hero-prize-sum {
    color: var(--accent);
    font-size: calc(1em + 8px);
}

.hero-prize-sum {
    transition: color 0.3s ease;
}

/* на песочном фоне песочная сумма пропала бы — белеет */
.hero-prize:hover {
    background: rgba(248, 168, 19, 0.9);
}

.hero-prize:hover .hero-prize-sum {
    color: #FFFFFF;
}

/* «призовой фонд» на десктопе на 3px крупнее суммы */
.hero-prize-label {
    font-size: 44px;
}

/* «Р» мельче цифр, как в макете (в FEHero нет знака ₽) */
.hero-prize-rub {
    font-size: 0.62em;
    margin-left: 0.12em;
}

/* ─── Buttons ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    padding: 18px 40px;
    border-radius: 50px;
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: #1A130B;
    color: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
}

.btn-primary:hover {
    background: var(--accent);
    color: #1A130B;
    box-shadow: 0 8px 25px rgba(248, 168, 19, 0.45);
}

/* ─── About ─── */
.about {
    padding: 40px 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: stretch;
}

/* Левая часть: чёрный блок-слайдер + колонка bullets справа от него */
.about-media {
    display: flex;
    gap: 10px;                      /* отступ между чёрным блоком и bullets */
    align-items: stretch;
}

/* почти чёрная плашка-слайдер */
.about-video {
    background: var(--video-panel);
    border-radius: 50px;
    min-height: 540px;
    flex: 1 1 auto;                 /* блок занимает всё место, bullets — по содержимому */
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

/* Контейнер слайдов — каждый слайд абсолютно,swap двух слайдов за раз */
.about-slider {
    position: absolute;
    inset: 0;
}

.about-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: translateX(0);
    transition: opacity 0.5s ease,
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
    z-index: 0;
}

/* Видимый слайд */
.about-slide.is-active {
    opacity: 1;
    z-index: 1;
}

/* Градиент-затемнение снизу под лого: чёрный 100% → полная прозрачность */
.about-video::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background: linear-gradient(to top,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 0.55) 55%,
                rgba(0, 0, 0, 0) 100%);
    z-index: 2;
    pointer-events: none;
    border-radius: 0 0 50px 50px;
}

.about-logo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;                   /* 30px от нижнего края */
    margin: 0 auto;
    transform: translateX(-15px);   /* сдвиг лого влево на 15px */
    width: 56%;
    max-width: 210px;
    height: auto;
    opacity: 0.92;
    z-index: 3;
    pointer-events: none;
}

/* Колонка bullets: 10 кружков с tumbs */
.about-bullets {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* равные промежутки между всеми кружками */
    padding: 50px 0;                /* отступ от верха/низа блока до зоны радиуса */
    /* высота ограничивается высотой блока (stretch в about-media) */
}

.about-bullet {
    width: var(--bullet-size, 44px);
    height: var(--bullet-size, 44px);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    border: 0;
    background: transparent;
    flex: 0 0 auto;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease-out;
    box-shadow: 0 0 0 0 transparent;
    outline: none;
}

.about-bullet img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Активный bullet — песочная обводка 3px */
.about-bullet.is-active {
    box-shadow: 0 0 0 3px var(--accent);
}

/* Hover — zoom +3px и песочная обводка 3px */
@media (hover: hover) {
    .about-bullet:hover {
        transform: scale(1.08);
        box-shadow: 0 0 0 3px var(--accent);
    }
}

.about-bullet:focus-visible {
    box-shadow: 0 0 0 3px var(--accent);
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-start;
    /* уменьшаем ширину правой колонки на 50px слева (отступ от левого края) */
    padding-left: 50px;
}

.section-title-light {
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 52px;
    font-weight: 600;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: var(--card-hero);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 8px 58px 15px;
    border-radius: 50px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    border: none;
}

.about-text-block {
    background: var(--card-hero);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 50px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    border: none;
}

.about-text-block p {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.65;
}

.about-text-block p.emph {
    font-weight: 600;
}

/* ─── We Are ─── */
.we-are {
    padding: 100px 0 70px;
}

.section-title {
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 140px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 3px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.section-title span {
    color: var(--accent);
}

.we-are-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: #F5EFE2;
    text-align: center;
    max-width: 570px;
    margin: 0 auto 60px;
    line-height: 1.3;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    margin-bottom: 56px;
}

.stat-item {
    text-align: center;
    color: #fff;
}

/* заполненный кружок (filled, как в рефе) */
.stat-num {
    width: 124px;
    height: 124px;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;          /* гарантия круга при любом box-sizing */
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 74px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--accent);
    margin-left: auto;
    margin-right: auto;
    background: rgba(232, 229, 224, 0.33);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.stat-num .plus {
    font-size: 54px;
    font-weight: 300;
}

.stat-label {
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 48px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.25;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.stat-label small {
    font-size: 11px;
    font-weight: 600;
    text-transform: lowercase;
    display: block;
    font-family: 'Montserrat', sans-serif;
    color: rgba(245, 239, 226, 0.85);
}

/* полоса логотипов: тёмная плашка */
.logos-block {
    text-align: center;
}

.logos-block img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    filter: brightness(1) invert(0);
    opacity: 0.92;
}

/* мобильное лого скрыто на десктопе (показывается через @media) */
.logos-img-mob {
    display: none;
}

/* ─── Specialty ─── */
.specialty {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

/* видео-фон секции «Мы развиваем specialty-направление» */
.specialty-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.specialty .container {
    position: relative;
    z-index: 2;
}

.specialty-card {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50px;
    padding: 50px;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
    border: none;
}

.specialty-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

/* в рефе: ЛЕВЫЙ (Провинциалы) КРУПНЕЕ правого (Яровой), ~1.5:1 */
.spec-logo-prov {
    width: 200px;
    height: auto;
}

.spec-logo-yarovoi {
    width: 200px;
    height: auto;
}

.spec-x {
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 40px;
    font-weight: 400;
    color: #000000;
}

.specialty-text {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.specialty-text p {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #000000;
    line-height: 1.7;
}

.specialty-text p:first-child {
    /* заголовок блока: «Мы развиваем specialty-направление…» */
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 2px;
}

.specialty-text strong {
    font-weight: 700;
    color: #000000;
}

/* ─── Guests ─── */
.guests {
    padding: 100px 0;
}

.guests-card {
    position: relative;
    background: rgba(232, 229, 224, 0.15);
    border-radius: 50px;
    padding: 50px 45px 45px;
    max-width: 648px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    border: none;
    overflow: visible;
}

.guests-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: -96px;       /* верхушка заголовка выходит за блок вверх (−20% от -120) */
    margin-bottom: 7px;
}

.guests-header .star {
    width: 180px;            /* −10% от 200 */
    height: auto;
    margin-left: -130px;     /* −10% от -144 */
    margin-top: 13px;        /* −10% от 14 */
}

.guests-header h2 {
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 130px;
    font-weight: 700;
    line-height: 0.9;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.guests-intro {
    font-family: 'Montserrat', sans-serif;
    font-size: 21px;
    color: #FFFFFF;
    margin-top: 14px;
    margin-bottom: 12px;
}

.guests-highlight {
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 70px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 22px;
    line-height: 1;
    letter-spacing: 2px;
}

.guests-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 0;
    line-height: 1.65;
}

/* кнопка ВНЕ карточки — такой же стиль, как у hero-btn */
.guests-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.guests-btn {
    display: inline-block;
    background: rgba(232, 229, 224, 0.33);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 41px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 4px 68px 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.guests-btn:hover {
    background: rgba(248, 168, 19, 0.9);
    color: #FFFFFF;
}


/* ─── Responsive ───
   Блоки ПЕСОК / «Для гостей» / «Мы развиваем specialty» — честная адаптация
   реальными значениями: все размеры (шрифты, отступы, звезда, карточки) уменьшены
   пропорционально, сохраняя те же визуальные пропорции, что на десктопе. */
@media (max-width: 992px) {
    /* —— About: на мобиле заголовок + тексты сверху, слайдер с лого снизу —— */
    .about-grid {
        grid-template-columns: 1fr;
    }
    .about-content {
        order: 1;
        padding-left: 0;            /* на мобиле отступ слева не нужен */
    }
    .about-media {
        order: 2;
        flex-direction: column;     /* слайдер сверху, bullets внизу */
        gap: 10px;
    }
    .about-video   { min-height: 432px; }   /* 360 × 1.2 = +20% высоты */
    .about-bullets {
        flex-direction: row;        /* горизонтально */
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 0;
        --bullet-size: 36px;
    }
    .about-logo    { max-width: 150px; bottom: 20px; }

    /* —— HERO (ПЕСОК): пропорциональное уменьшение —— */
    .scene {
        --pill-out: 48px;
        --pill-w: 176px;
        --pill-h: 86px;
        --notch-gap: 16px;
        --notch-fillet: 20px;
        --card-radius: 38px;
        --pad-x: 32px;
    }
    .hero-card {
        padding: 40px var(--pad-x) 32px;
    }
    .hero-logo {
        gap: 16px;
        margin-top: -106px;
        margin-bottom: 20px;
    }
    .hero-logo .star {
        width: 222px;
        margin-left: -142px;
        margin-top: 16px;
    }
    .hero-logo h1 {
        font-size: 190px;
        letter-spacing: 3px;
    }
    .hero-mid {
        margin-bottom: calc(var(--notch-gap) + 12px);
    }
    .hero-notch-btn {
        font-size: 36px;
        padding: 0 12px 3px;
    }
    .promo-sound {
        right: 16px;
        bottom: 14px;
    }
    .hero-subtitle {
        font-size: 32px;
    }
    .hero-kicker {
        top: 5px;
        font-size: 17px;
    }
    .hero-sub-note {
        margin-left: 9px;
        font-size: 14.5px;
    }
    .hero-date {
        font-size: 55px;
        margin-bottom: 10px;
    }
    .hero-desc {
        font-size: 15px;
    }
    .hero-prize {
        font-size: 30px;
        padding: 6px 42px 9px;
        border-radius: 38px;
    }
    .hero-prize-label {
        font-size: inherit;
    }

    /* —— GUESTS (Для гостей): те же коэффициенты —— */
    .guests-card {
        padding: 40px 32px 32px;
        border-radius: 38px;
    }
    .guests-header {
        gap: 13px;
        margin-top: -72px;
        margin-bottom: 5px;
    }
    .guests-header .star {
        width: 135px;
        margin-left: -96px;
        margin-top: 10px;
    }
    .guests-header h2 {
        font-size: 96px;
        letter-spacing: 3px;
    }
    .guests-intro {
        font-size: 16px;
        margin-top: 10px;
        margin-bottom: 9px;
    }
    .guests-highlight {
        font-size: 52px;
        margin-bottom: 16px;
    }
    .guests-desc {
        font-size: 14px;
    }
    .guests-btn {
        font-size: 30px;
        padding: 3px 50px 8px;
        border-radius: 38px;
    }

    /* —— SPECIALTY (Мы развиваем specialty) —— */
    .specialty-card {
        padding: 36px 28px;
        border-radius: 38px;
    }
    .specialty-logos {
        gap: 22px;
        margin-bottom: 24px;
    }
    .spec-logo-prov,
    .spec-logo-yarovoi {
        width: 145px;
    }
    .spec-x {
        font-size: 30px;
    }
    .specialty-text {
        gap: 14px;
    }
    .specialty-text p {
        font-size: 13px;
        line-height: 1.6;
    }
    .specialty-text p:first-child {
        font-size: 34px;
    }

    /* —— Мы — Провинциалы —— */
    .section-title {
        font-size: 64px;
    }

    /* —— подмена логотипа на мобильный + белая рамка 2px / 20px —— */
    .logos-img-desktop { display: none; }
    .logos-img-mob {
        display: block;
        border: 2px solid #FFFFFF;
        border-radius: 20px;
        box-sizing: border-box;
        padding: 16px;
    }

    .about-text-block {
        padding: 26px;
    }
    .section-title-light {
        font-size: 28px;
        padding: 10px 30px 14px;
    }
}

@media (max-width: 768px) {
    .header {
        padding: 18px 0;
    }

    /* на мобилке звезда/заголовок меньше — стартовое расхождение тоже меньше */
    .hero-logo .star {
        width: 155px;
        margin-left: -85px;
    }
    .reveal-on .hero-logo .star {
        transform: translateX(-18px);
        opacity: 0;
    }
    .reveal-on .hero-logo h1    { transform: translateX(18px); opacity: 0; }
    .hero-logo.is-loaded .star,
    .hero-logo.is-loaded h1 { transform: translateX(0); opacity: 1; }

    .nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 16px;
        padding: 0 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;          /* Firefox — скрыть полосу */
    }
    .nav::-webkit-scrollbar { display: none; }  /* Chrome/Safari — скрыть полосу */

    .nav a {
        font-size: 12px;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    /* скобки заданы глобально выше; на мобиле ховера нет, поэтому
       возвращаем их в нейтральное положение (без сдвига) */

    /* —— Все кнопки: 38px (кроме guests-btn — она 40px ниже) —— */
    .hero-prize,
    .btn {
        font-size: 38px;
    }

    /* —— HERO (ПЕСОК) ——
       Узкий отступ контейнера: кнопкам в выемках нужно место по бокам. */
    .scene .container {
        padding: 0 8px;
    }
    .scene {
        --pill-out: 26px;
        --pill-w: 88px;
        --pill-h: 46px;
        --notch-gap: 8px;
        --notch-fillet: 12px;
        --pad-x: 18px;
    }
    .hero-card {
        padding: 40px var(--pad-x) 26px;
    }
    .hero-logo {
        gap: 13px;
        margin-top: -88px;
    }
    .hero-logo .star {
        margin-top: 13px;
    }
    .hero-logo h1 {
        font-size: 122px;
    }
    .hero-mid {
        column-gap: 10px;
        margin-bottom: calc(var(--notch-gap) + 10px);
    }
    .hero-notch-btn {
        font-size: 18px;
        letter-spacing: 1px;
        padding: 0 6px 2px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    }
    /* у низкого видео радиус меньше — иначе выемке не хватает места */
    .promo-frame {
        --card-radius: 28px;
    }
    .promo {
        padding: 0 0 40px;
    }
    .promo-sound {
        right: 10px;
        bottom: 8px;
        width: 34px;
        height: 34px;
    }
    .promo-play {
        width: 56px;
        height: 56px;
        margin: -28px 0 0 -28px;
    }
    .promo-play svg {
        width: 24px;
        height: 24px;
        margin-left: 3px;
    }
    .promo-sound svg {
        width: 17px;
        height: 17px;
    }
    .hero-subtitle {
        font-size: 18px;
    }
    .hero-kicker {
        top: -3px;
        font-size: 15px;
        letter-spacing: 2px;
    }
    .hero-sub-note {
        margin-left: 6px;
        font-size: 9.6px;
    }
    .hero-date {
        font-size: 40px;
    }

    /* —— About (Что это и зачем) —— */
    .section-title-light {
        font-size: 42px;
    }
    .about-text-block p {
        font-size: 13px;            /* было 15px, −15% ≈ 12.75 → 13 */
    }

    /* —— Мы — Провинциалы: кружки в 4 колонки —— */
    .section-title {
        font-size: 72px;
    }
    .stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    .stat-item {
        min-width: 0;                   /* позволяем колонке сжиматься под контент */
        text-align: center;
    }
    .stat-num {
        width: 76px;
        height: 76px;
        font-size: 50px;
        margin-left: auto;
        margin-right: auto;
    }
    /* плюс у «800+»: 32px, тонкий (300) */
    .stat-num .plus {
        font-size: 32px;
        font-weight: 300;
    }
    .stat-label {
        font-size: 20px;
        word-break: break-word;         /* длинные лейблы переносятся, не вылазят */
    }
    .stat-label small {
        font-size: 10px;
    }

    /* —— SPECIALTY (Мы развиваем specialty) —— */
    .specialty-text p:first-child {
        font-size: 48px;
        line-height: 1;
        letter-spacing: 2px;
    }
    .specialty-text p {
        font-size: 15px;
    }
    .spec-logo-yarovoi {
        width: 125px;
    }

    /* —— GUESTS (Для гостей) —— */
    .guests-card {
        padding: 30px 20px 24px;
    }
    .guests-intro {
        font-size: 20px;
    }
    .guests-header h2 {
        font-size: 78px;
    }
    .guests-highlight {
        font-size: 50px;
    }
    .guests-desc {
        font-size: 15px;
    }
    .guests-btn {
        font-size: 40px;
    }

    .specialty {
        background-attachment: scroll;
    }

    body {
        background-attachment: scroll;
    }
}

/* —— Узкие телефоны (≤360): средний ряд hero и даты иначе не влезают —— */
@media (max-width: 360px) {
    .scene {
        --pill-w: 80px;
        --pad-x: 14px;
    }
    .hero-subtitle {
        font-size: 15px;
    }
    .hero-sub-note {
        font-size: 8px;
    }
    .hero-date {
        font-size: 34px;
    }
    .hero-prize {
        font-size: 30px;
        padding: 6px 30px 9px;
    }
}

/* ─── Страница документации (docs.html) ───
   Карточка того же размера и фона, что ПЕСОК, но без выемок. Заголовок, как
   ПЕСОК, выглядывает за верхний край (шрифт в 2,5 раза меньше). Ссылки —
   шрифтом «ПО ДЖЕЗВЕ» на 4px мельче, с песочным подчёркиванием. */
/* У лендинга небо растянуто на всю длину страницы (~5000–5400px), сверху
   видно только небо. Страница документации короткая — задаём тот же масштаб,
   иначе картинка встанет целиком, с городом внизу. */
body.page-docs {
    background-size: cover, auto 5200px;
}

.docs {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 140px 0 80px;
}

.docs-card {
    position: relative;
    max-width: var(--card-max);
    width: calc(100% - 2 * var(--pill-out));
    margin: 0 auto;
    padding: 54px var(--pad-x) 45px;
    border-radius: var(--card-radius);
    background: rgba(232, 229, 224, 0.33);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    animation: docsIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes docsIn {
    from { opacity: 0; transform: translateY(30px); }
}

/* 250px / 2,5; над краем выглядывает та же доля, что у ПЕСОК */
.docs-title {
    margin: -88px 0 22px;
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 100px;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    color: #FFFFFF;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.docs-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.docs-list a {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;            /* «ПО ДЖЕЗВЕ» 20px − 4px */
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    transition: color 0.3s ease;
}

.docs-list a:hover {
    color: var(--accent);
}

@media (max-width: 992px) {
    .docs-card  { padding: 40px var(--pad-x) 32px; }
    .docs-title { font-size: 76px; margin-top: -66px; }   /* 190px / 2,5 */
    .docs-list a { font-size: 15px; }
}

@media (max-width: 768px) {
    .docs-card  { padding: 40px var(--pad-x) 28px; }
    .docs-title { font-size: 49px; margin-top: -58px; margin-bottom: 18px; }  /* 122px / 2,5 */
    .docs-list  { gap: 14px; }
    .docs-list a { font-size: 14px; letter-spacing: 0.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .docs-card { animation: none; }
}

/* ─── Модалка «Призовой фонд» ───
   <dialog> поверх страницы: затемнение с размытием, карточка как у ПЕСОК,
   заголовок выглядывает за верхний край. Закрытие — крестик, Esc, клик мимо. */
.prize-modal {
    margin: auto;
    padding: 70px 20px 20px;    /* место под выглядывающий заголовок */
    border: none;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    overflow: visible;
    color: #FFFFFF;
}

.prize-modal::backdrop {
    background: rgba(13, 14, 18, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.prize-modal[open] {
    animation: prizeIn 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.prize-modal[open]::backdrop {
    animation: prizeFade 350ms ease;
}

.prize-modal.is-closing {
    animation: prizeOut 200ms ease forwards;
}

.prize-modal.is-closing::backdrop {
    animation: prizeFadeOut 200ms ease forwards;
}

@keyframes prizeIn {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
}

@keyframes prizeOut {
    to { opacity: 0; transform: translateY(12px) scale(0.97); }
}

@keyframes prizeFade {
    from { opacity: 0; }
}

@keyframes prizeFadeOut {
    to { opacity: 0; }
}

.prize-modal-card {
    position: relative;
    width: 460px;
    max-width: calc(100vw - 40px);
    padding: 40px 44px 38px;
    border-radius: 50px;
    background: rgba(232, 229, 224, 0.33);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.prize-modal-title {
    margin: -80px 0 18px;
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 84px;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.prize-modal-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.prize-modal-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(248, 168, 19, 0.45);
}

.prize-modal-list li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.prize-modal-sum {
    color: var(--accent);
    white-space: nowrap;
}

.prize-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(232, 229, 224, 0.33);
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.3s ease;
}

.prize-modal-close:hover {
    background: rgba(248, 168, 19, 0.9);
}

.prize-modal-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

@media (max-width: 768px) {
    .prize-modal       { padding-top: 50px; }
    .prize-modal-card  { padding: 30px 24px 26px; border-radius: 28px; }
    .prize-modal-title { font-size: 54px; margin-top: -56px; margin-bottom: 14px; }
    .prize-modal-list  { font-size: 32px; gap: 8px; }
    .prize-modal-list li { padding-bottom: 8px; gap: 14px; }
    .prize-modal-close { top: 10px; right: 10px; width: 32px; height: 32px; }
    .prize-modal-close svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .prize-modal[open],
    .prize-modal[open]::backdrop,
    .prize-modal.is-closing,
    .prize-modal.is-closing::backdrop { animation: none; }
}

/* ─── Кнопка «Вернуться» (docs.html) — вверху слева, под шапкой ─── */
.back-btn {
    position: absolute;
    top: 84px;
    left: max(20px, calc((100% - 1280px) / 2 + 20px));
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 24px 8px 18px;
    border-radius: 50px;
    background: rgba(232, 229, 224, 0.33);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 0.3s ease;
}

.back-btn:hover {
    background: rgba(248, 168, 19, 0.9);
}

.back-btn svg {
    width: 24px;
    height: 24px;
    margin-top: 2px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.back-btn:hover svg {
    transform: translateX(-4px);
}

@media (max-width: 768px) {
    .back-btn {
        top: 76px;
        left: 16px;
        gap: 8px;
        padding: 5px 18px 7px 14px;
        font-size: 22px;
    }
    .back-btn svg { width: 20px; height: 20px; }
}

/* ─── Прелоадер ───
   Небо как у страницы, по центру пролетает звезда с песком и процентами
   (js/preloader.js). Показывается только с классом .has-preloader (его ставит
   скрипт в <head>). Если preloader.js не загрузится — через 9с гаснет сам. */
/* пока идёт пролёт, страница не прокручивается */
html.is-preloading {
    overflow: hidden;
}

.preloader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    overflow: hidden;
    background:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        #0D0E12 var(--bg-img) no-repeat;
    background-size: cover, var(--sky-size, cover);
    background-position: center top, center var(--sky-y, 0px);
    transition: opacity 700ms ease, visibility 0s linear 700ms;
}

.has-preloader .preloader {
    display: block;
    animation: preloaderFailsafe 700ms ease 9s forwards;
}

.preloader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes preloaderFailsafe {
    to { opacity: 0; visibility: hidden; }
}

.preloader-sand {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* линия пролёта: звезда едет от левого края до правого */
.preloader-track {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 600px;
    height: 0;
    transform: translateX(-50%);
}

/* звезда в 2,5 раза меньше, чем на карточке ПЕСОК (292px) */
.preloader-star {
    position: absolute;
    left: 0;
    top: 0;
    width: 117px;
    transform-origin: 75.3% 53%;
    transform: translate(-75.3%, -53%);
    will-change: transform;
}

.preloader-star img {
    display: block;
    width: 100%;
    height: auto;
}

.preloader-pct {
    position: absolute;
    left: 0;
    top: 44px;
    transform: translateX(-50%);
    font-family: 'FEHero-Regular', sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;
    color: #FFFFFF;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    will-change: transform;
}

@media (max-width: 992px) {
    .preloader-star { width: 89px; }   /* 222px / 2,5 */
    .preloader-pct  { top: 36px; font-size: 26px; }
}

@media (max-width: 768px) {
    .preloader-track { width: 95%; }
    .preloader-star  { width: 62px; }  /* 155px / 2,5 */
    .preloader-pct   { top: 26px; font-size: 22px; }
}

/* ─── Лёгкое «дыхание» specialty-карточки (медленный zoom-in петлёй) ─── */
@keyframes specBreathe {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.specialty.is-visible .specialty-card {
    animation: specBreathe 14s ease-in-out infinite;
    animation-delay: 1s;
}

/* ─── Доступность: при prefers-reduced-motion выключаем все движения ───
   (скролл-анимации просто показываем сразу, без переходов). */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    [data-reveal],
    [data-reveal].is-visible {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .stat-item,
    .stat-item.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hero-logo .star,
    .hero-logo h1,
    .hero-logo.is-loaded .star,
    .hero-logo.is-loaded h1 {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hero-card .hero-mid,
    .hero-card .hero-date,
    .hero-card .hero-desc,
    .hero-card .hero-btn-wrap,
    .hero-card.hero-ready .hero-mid,
    .hero-card.hero-ready .hero-date,
    .hero-card.hero-ready .hero-desc,
    .hero-card.hero-ready .hero-btn-wrap,
    .float-btns .hero-notch-btn {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .specialty.is-visible .specialty-card { animation: none; }
}