/* ==========================================================================
   ВЛИЯНИЕ РОССИИ — слой 3 из 3
   Секции страницы: hero, карточки, спикеры, программа, призы,
   социальное доказательство, финальный призыв, адаптивность.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100svh;
    /* Отступы уменьшены с 60px: вместе с заголовком они выталкивали кнопку
       первого экрана и подсказку прокрутки за пределы экрана на 1366×768
       (шапка героя получалась 1298px при экране 768). */
    padding-block: var(--space-5);
    overflow: hidden;
    text-align: center;
    background: var(--bg-black);
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Орнамент растянут на весь первый экран и обрезается по краям: рамка
       узора остаётся по периметру, а середина уходит под затемнение. Так
       первый экран читается как афиша, а не как вставленная картинка. */
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

/* will-change включается только тогда, когда параллакс действительно работает
   (js/parallax.js ставит класс). Постоянное продвижение слоя на 1,6 Мпикс
   стоило памяти даже на телефонах и при reduced-motion, где слой не двигается
   вообще. */
.hero.has-parallax .hero__media {
    will-change: transform;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Узор притемнён и обезжирен по насыщенности: под кремовым заголовком
       нужен фон, а не второй равноправный рисунок. */
    filter: brightness(0.58) saturate(0.85);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Тёмное ядро под текстом и почти нетронутый узор по краям: заголовок
       должен читаться, а орнамент — оставаться видимым. */
    background:
        radial-gradient(ellipse 62% 46% at 50% 50%, rgba(38, 28, 30, 0.82) 0%, rgba(38, 28, 30, 0.52) 62%, rgba(38, 28, 30, 0.12) 100%),
        linear-gradient(180deg, rgba(38, 28, 30, 0.5) 0%, rgba(38, 28, 30, 0.1) 34%, rgba(38, 28, 30, 0.62) 100%);
}

.hero__glow {
    position: absolute;
    top: -20%;
    left: 50%;
    z-index: 1;
    width: min(800px, 120vw);
    aspect-ratio: 1;
    translate: -50% 0;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    filter: blur(80px);
    opacity: 0.12;
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: var(--z-content);
    max-width: 1000px;
    padding-inline: var(--gutter);
}

.hero h1 {
    margin-bottom: var(--space-5);
    /* Верхняя граница была 120px, и заголовок занимал 924px: при экране
       1366×768 первый экран вырастал до 1298px, то есть собственная кнопка
       «Забронировать место» и счётчик оказывались под сгибом на всех
       десктопных разрешениях. 76px — предел, при котором и кнопка, и строка
       «ДО СТАРТА…» помещаются над сгибом на 1366×768 (проверено замером). */
    font-size: clamp(30px, 5.5vw, 76px);
    font-weight: 900;
    letter-spacing: -0.02em;
    /* Тень тёмная и мягкая, а не цветная в полтона: поверх узора заголовку
       нужна подложка для читаемости, а не собственное свечение. */
    text-shadow: 0 2px 30px rgba(10, 3, 4, 0.72);
}

.hero__lead {
    margin-bottom: var(--space-4);
    font-size: clamp(16px, 2vw, 22px);
    color: var(--text-gray);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.hero__counter {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.12em;
    color: var(--accent-soft);
}

.hero__counter span {
    color: var(--text-white);
    font-weight: 700;
}

/* Кадр зала между заголовком секции и карточками. Обесцвечен и подкрашен
   тёплым: цветной снимок сцены тянул за собой малиново-синюю гамму, которая
   спорила с палитрой. */
.photo-band {
    margin-bottom: var(--space-7);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}

.photo-band img {
    width: 100%;
    height: auto;
    filter: grayscale(1) sepia(0.3) contrast(1.06) brightness(0.86);
}

/* На телефоне кадр 2.57:1 вырождается в полоску: на 390px это 135px высоты,
   и толпа в ней не читается. Меняем форму полосы на 16:9 — кадр остаётся
   тем же, но показывает среднюю часть толпы крупнее. */
@media (max-width: 768px) {
    .photo-band img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: 50% 42%;
    }
}

/* Подсказка «листайте вниз»: тонкая линия, которая стекает вниз и гаснет.
   Отступ считается с учётом шапки: герой начинается под липкой шапкой и
   растянут на 100vh, поэтому его низ уходит за экран и подсказка с текстом
   SCROLL оказывалась под сгибом на любом десктопном размере. */
.hero__cue {
    position: absolute;
    bottom: calc(var(--space-6) + var(--header-h));
    left: 50%;
    z-index: var(--z-content);
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    translate: -50% 0;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

.hero__cue:hover {
    color: var(--accent-soft);
}

.hero__cue-line {
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, transparent, var(--accent-soft));
    /* Точка отсчёта задана один раз в базовом правиле. Раньше transform-origin
       менялся внутри кадров — такое свойство не выносится на композитор, и
       каждый кадр вызывал пересчёт стилей и перезапись списка отрисовки всего
       документа (замер: 1182 инвалидации за 2,5 с). Со фиксированной точкой
       линия растёт вниз и втягивается обратно вверх ровно так же. */
    transform-origin: 50% 0;
    animation: cue-drop 2.2s var(--ease-out) infinite;
}

.hero__cue-text {
    font-size: 11px;
    letter-spacing: 0.18em;
}

@keyframes cue-drop {
    0% { transform: scaleY(0); opacity: 0.2; }
    40% { transform: scaleY(1); opacity: 1; }
    70% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(0); opacity: 0.2; }
}

/* --------------------------------------------------------------------------
   ПОЧЕМУ ЭТО СОБЫТИЕ
   -------------------------------------------------------------------------- */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--space-5);
}

/* --------------------------------------------------------------------------
   СПИКЕРЫ
   -------------------------------------------------------------------------- */

.speakers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: var(--space-5);
}

.speaker-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Подложка под портретом светлее прежней: на чёрном фоне карточки
       выглядели провалами */
    background: var(--surface-solid);
    border: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
}

.speaker-card:hover {
    border-color: var(--border-strong);
}

/* Портрет в рамке 3:4 — имя и роль по-прежнему лежат поверх фото.
   Обёртка нужна потому, что краткое описание вынесено под снимок: раньше
   подложка с текстом занимала до 57% портрета и «плыла» по высоте. */
.speaker-card__media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.speaker-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.2);
    opacity: 0.8;
    transition:
        filter var(--dur-slow) var(--ease),
        transform var(--dur-slow) var(--ease),
        opacity var(--dur-slow) var(--ease);
}

.speaker-card:hover .speaker-card__img {
    filter: grayscale(0%) contrast(1);
    transform: scale(1.05);
    opacity: 1;
}

/* Карточка-загадка: специальный гость, которого объявят позже. Вместо портрета
   знак вопроса, поэтому карточка читается как пустой слот, а не как сломанная
   фотография. Диагональная штриховка отличает её от портретных в ряду. */
.speaker-card--mystery .speaker-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(45deg, transparent 0 9px, rgba(236, 214, 202, 0.035) 9px 18px),
        var(--bg-alt);
}

.speaker-card__question {
    font-family: var(--font-display);
    font-size: clamp(64px, 8vw, 104px);
    font-weight: 900;
    line-height: 1;
    color: var(--accent-soft);
    opacity: 0.55;
    /* Знак не должен выделяться при выделении текста и перетаскивании */
    user-select: none;
}

.speaker-card__info {
    position: absolute;
    inset: auto 0 0 0;
    /* Верхний отступ вдвое больше нижнего — это запас под затухание
       градиента. При равных 24px подъём градиента приходился ровно на имя
       и роль, и подписи стояли на светлом портрете: замер по пикселям давал
       2.24:1 для имени и 1:1 для роли при норме 4.5:1 (18px/700 — ещё не
       крупный текст по WCAG). Теперь плотная часть заливки заканчивается
       выше подписей и гаснет в пустой полосе над ними. */
    padding: var(--space-8) var(--space-5) var(--space-5);
    /* Плотность 0.95 держится до 70% высоты плашки и падает только выше:
       под именем и ролью подложка почти непрозрачная, а к портрету уходит
       мягким затуханием, поэтому карточка не читается чёрным прямоугольником. */
    background: linear-gradient(to top,
        rgba(10, 3, 4, 0.95) 0%,
        rgba(10, 3, 4, 0.95) 70%,
        rgba(10, 3, 4, 0.72) 80%,
        rgba(10, 3, 4, 0.32) 90%,
        rgba(10, 3, 4, 0) 100%);
}

.speaker-card__name {
    margin-bottom: var(--space-1);
    font-size: 18px;
}

.speaker-card__role {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent-soft);
    /* Место под две строки независимо от длины роли. Панель подписей прижата
       к низу портрета, поэтому односложная роль поднимала бы имя выше, чем
       у соседей по ряду, и подписи в ряду вставали бы на разной высоте. */
    min-height: calc(2 * 1.6em);
}

/* Краткое описание спикера — под портретом, а не поверх него: так текст
   читается на любом фото и не зависит от градиента.
   Высота ровно в три строки: min-height здесь не годится — он растягивает
   бокс выше предела -webkit-line-clamp, и четвёртая строка вылезает
   обрезанной наполовину. Фиксированная высота даёт и обрезку, и одинаковые
   ряды сетки. */
.speaker-card__bio {
    height: calc(3 * 1.5em);
    margin: var(--space-4) var(--space-3) var(--space-2);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-gray);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* На сенсорных экранах :hover не наступает — без этого правила все портреты
   оставались обесцвеченными и «выключенными» навсегда. */
@media (hover: none) {
    .speaker-card__img {
        filter: grayscale(0%) contrast(1);
        opacity: 1;
    }

    .speaker-card:hover .speaker-card__info {
        box-shadow: none;
    }

    .glass-card:hover,
    .whom-block:hover,
    .prize:hover {
        transform: none;
    }
}

/* Растущая неоновая черта под заголовком: линия «разворачивается»
   из центра одновременно с появлением блока */
/* Сноска под сеткой спикеров: «это ещё не все». Заголовок секции и кнопки
   выровнены по центру, поэтому сноска тоже по центру и с ограничением
   длины строки — иначе на широком экране она растягивалась в одну строку
   на 1350px. */
.speakers-note {
    max-width: 56ch;
    margin: var(--space-6) auto 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-muted);
}

/* Первый пункт списка призов — суперприз: единственное место, где нужен
   заметный акцент, иначе он читается как рядовой пункт.
   Селектор из двух классов, а не из одного: базовое правило .prize объявлено
   ниже по файлу и при равной специфичности перебивало бы подсветку. */
.prize.prize--feature {
    border-color: rgba(200, 30, 40, 0.45);
    background: linear-gradient(90deg, rgba(200, 30, 40, 0.12), rgba(236, 214, 202, 0.02) 60%);
}

.prize--feature .prize__num {
    -webkit-text-stroke-color: var(--accent-soft);
}

.prize--feature .prize__body h3 {
    color: var(--accent-soft);
}

/* --------------------------------------------------------------------------
   ПРОГРАММА
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   ДЛЯ КОГО
   -------------------------------------------------------------------------- */

.whom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--space-6);
}

.whom-block {
    padding: 50px 30px;
    background: linear-gradient(180deg, rgba(236, 214, 202, 0.03) 0%, rgba(90, 12, 12, 0.42) 100%);
    border: 1px solid var(--border-subtle);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.whom-block:hover {
    transform: translateY(-5px);
    border-color: var(--accent-deep);
}

.whom-block h3 {
    margin-bottom: var(--space-5);
    font-size: 28px;
}

.whom-block p {
    color: var(--text-gray);
}

/* --------------------------------------------------------------------------
   ПРИЗЫ
   -------------------------------------------------------------------------- */

.prizes-list {
    display: grid;
    /* minmax(0, 1fr) вместо авто-трека: у grid-элемента min-width: auto,
       поэтому длинное слово внутри карточки распирало трек и блок вылезал
       за экран (на 320px карточка была 354px в контейнере 280px). */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

.prize {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    min-width: 0;
    transition:
        border-color var(--dur) var(--ease),
        background-color var(--dur) var(--ease);
}

.prize__body {
    min-width: 0;
}

.prize:hover {
    border-color: rgba(200, 30, 40, 0.38);
    background: rgba(236, 214, 202, 0.04);
}

.prize__num {
    font-family: var(--font-mono);
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    /* Контур песочный, а не малиновый: малиновый на тёмно-красной подложке
       почти сливался с фоном. Размер 48px — крупный текст, ему достаточно
       3:1, и 3.88:1 он держит. */
    -webkit-text-stroke: 1px var(--accent-soft);
    opacity: 0.6;
}

/* Номер подъезжает слева вместе с появлением строки */
.js .prize__num {
    opacity: 0;
    transform: translateX(-16px);
    transition:
        opacity var(--dur-slow) var(--ease),
        transform var(--dur-slow) var(--ease);
}

.js .reveal.is-visible .prize__num {
    opacity: 0.5;
    transform: none;
}

.prize__body h3 {
    margin-bottom: var(--space-3);
    font-size: 22px;
}

.prize__body p {
    color: var(--text-gray);
}

/* --------------------------------------------------------------------------
   СОЦИАЛЬНОЕ ДОКАЗАТЕЛЬСТВО
   -------------------------------------------------------------------------- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--space-7);
    margin-bottom: var(--space-8);
    text-align: center;
}

/* Карточка цифры: класс стоит в разметке, а правила для него не было.
   min-width: 0 нужен по той же причине, что и у .prize: у grid-элемента
   ширина по умолчанию auto, и длинное «25 000 000» распирало трек. */
.stat {
    min-width: 0;
}

.stat__value {
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: clamp(32px, 5vw, 48px);
    color: var(--accent-soft);
    /* Цифры одинаковой ширины: иначе счётчик «дрожит» при набегании */
    font-variant-numeric: tabular-nums;
}

.stat__label {
    color: var(--text-gray);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   ФИНАЛЬНЫЙ ПРИЗЫВ (id="tickets")
   -------------------------------------------------------------------------- */

.cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding-block: 100px;
    overflow: hidden;
    text-align: center;
    background: rgba(38, 28, 30, 0.55);
}

.cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--z-content);
    background: radial-gradient(circle at center, transparent 0%, var(--bg-black) 80%);
}

.cta__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: var(--z-glow);
    width: min(600px, 90vw);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.3;
    translate: -50% -50%;
    /* Базовый фон задан явно и обязателен: кадры анимации его больше не
       подставляют, поэтому при подавленной анимации (prefers-reduced-motion
       или анимации выключены) свечение остаётся на месте, а не исчезает.
       Дрейфует только transform — он уходит на композитор. */
    background: radial-gradient(circle, var(--accent) 0%, var(--accent-deep) 48%, transparent 72%);
    animation: glow-drift 5s infinite alternate;
}

/* Раньше здесь анимировался ещё и background. Замер: анимация цвета внутри
   размытия 150px давала 7487 задач растеризации за 2,5 с простоя против 834
   без неё — то есть ~90% всей работы страницы в покое приходилось на смену
   оттенка этого пятна. Оставлен только дрейф. */
@keyframes glow-drift {
    0% { transform: translate(-100px, 50px); }
    50% { transform: translate(100px, -50px); }
    100% { transform: none; }
}

.cta__content {
    position: relative;
    z-index: calc(var(--z-content) + 1);
    width: 100%;
}

.cta h2 {
    margin-bottom: var(--space-7);
    font-size: clamp(36px, 6vw, 80px);
}

.cta__note {
    margin-top: var(--space-5);
    font-size: 13px;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   АДАПТИВНОСТЬ
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .site-nav__list {
        gap: var(--space-5);
        justify-content: flex-start;
    }
}

/* Пункт «В цифрах» — шестой в меню, и в полосе 1024–1140px шесть пунктов
   не укладывались: лента растёт вместе с окном, и на 1024px ей не хватало
   42px, то есть меню начинало прокручиваться там, где раньше помещалось
   целиком (замер: 500px содержимого против 458px полосы). Кегль и зазор
   уменьшены только в этой полосе — на остальных ширинах навигация выглядит
   как прежде, а запас 25px оставлен на случай подмены шрифта. */
@media (min-width: 1024px) and (max-width: 1140px) {
    .site-nav__list {
        gap: var(--space-4);
    }

    .site-nav__link {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    :root {
        --gutter: 20px;
    }

    .hero {
        /* min-height: auto здесь стоял ради кнопки у сгиба, но он ломал
           главное: фон первого экрана переставал закрывать экран. Замер на
           390×844 давал высоту 517 из 844 — кадр занимал 60% экрана и снизу
           проступала следующая секция. Возвращена полная высота: содержимое
           и так помещается над сгибом, оно центрируется. */
        min-height: 100vh;
        min-height: 100svh;
        /* Отступы уменьшены с 96/64: на 320×568 кнопка первого экрана
           не дотягивала до сгиба 4px */
        padding-block: 72px 56px;
    }

    /* На телефонах запас по высоте большой, поэтому заголовку возвращаем
       крупный кегль: общий clamp с 5.5vw давал на 390px всего 30px. */
    .hero h1 {
        font-size: clamp(30px, 8.5vw, 56px);
    }

    /* На самых узких экранах кегль приходится снижать: слово «подписчиков»
       при 27px шире строки, и заголовок рвался посреди слова
       («ПОДПИСЧИК» / «ОВ»). 24px — предел, при котором слово влезает целиком.
       Заодно первый экран становится ниже и кнопка возвращается над сгиб. */
    @media (max-width: 380px) {
        .hero h1 {
            font-size: clamp(22px, 6.6vw, 26px);
        }
    }

    /* На мобильных подсказка прокрутки наезжает на блок с местами */
    .hero__cue {
        display: none;
    }

    .hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .site-header__inner {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    /* Логотип и кнопка в одной строке, навигация — во второй */
    .site-nav {
        order: 3;
        flex-basis: 100%;
    }

    .site-nav__list {
        justify-content: flex-start;
        padding-bottom: var(--space-2);
    }

    .prize {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .booking__inner {
        padding: var(--space-6) var(--space-5);
    }

    .booking__title {
        font-size: 22px;
        padding-right: var(--space-7);
    }

    /* На телефоне поля чуть плотнее — на маленьком экране это экономит почти
       сотню пикселей и форма реже упирается в прокрутку. Закрепление блока с
       кнопкой живёт в components.css и работает на всех размерах. */
    .booking__form {
        gap: var(--space-4);
    }
}

@media (max-width: 480px) {
    /* Шапка должна оставаться в две строки: логотип и кнопка в первой,
       навигация во второй. На 390px они не помещались в одну строку
       (232 + 198 + 12 = 442 при доступных 350), кнопка уезжала в третью,
       и липкая шапка занимала 163px — пятую часть экрана.
       Ниже подобраны размеры, при которых строка укладывается и на 360px
       (самая узкая распространённая ширина Android): 171 + 136 + 8 = 315
       при 320 доступных. */
    .site-header__inner {
        gap: var(--space-2);
    }

    .brand {
        gap: 6px;
    }

    .brand__mark {
        width: 20px;
        height: 20px;
    }

    .brand__text {
        font-size: 11px;
    }

    .brand__text span {
        font-size: 8px;
        letter-spacing: 0.02em;
    }

    .site-header__cta {
        /* Высота остаётся комфортной для касания, уменьшается только ширина */
        min-height: 44px;
        padding: 8px 10px;
        font-size: 10px;
    }

    .timer {
        gap: var(--space-3);
    }

    .timer__box {
        flex: 1 1 40%;
        min-width: 0;
        padding: var(--space-3);
    }

    .timer__num {
        font-size: 28px;
    }
}

@media (max-width: 400px) {
    /* Заголовки секций не помещались: «Мы инвестируем в твое влияние» на 360px
       требовал 370px и обрезался по краю (html { overflow-x: clip } не даёт
       доскроллить). Уменьшаем кегль только там, где он действительно мешает. */
    .section-title {
        font-size: clamp(26px, 8vw, 32px);
    }

    .prize {
        padding: var(--space-5);
        gap: var(--space-4);
    }

    .prize__num {
        font-size: 36px;
    }

    .prize__body h3 {
        font-size: 18px;
    }

    /* Кнопка призыва к действию шире экрана: 350px при 320 доступных,
       а .cta { overflow: hidden } обрезает её справа, и доскроллить нельзя
       (html { overflow-x: clip }). Уменьшаем кегль и боковые отступы. */
    .btn--lg {
        max-width: 100%;
        padding: 18px 24px;
        font-size: 16px;
    }
}

@media (max-width: 374px) {
    /* Логотип и кнопка в одну строку перестают помещаться раньше 375px:
       им нужно 332px, а доступно 316px на 356px и 320px на 360px. Прежний
       порог 355px оставлял полосу 356–374, где шапка снова складывалась
       в три строки (146px вместо 117px). */
    .site-header .brand {
        flex: 1 1 100%;
    }

    .site-nav {
        order: 2;
        /* flex-basis именно 0, а не auto: перенос строки во флексе считается
           по «гипотетическому» размеру, а он при basis: auto равен ширине
           содержимого (415px) — с ним навигация никогда не встанет в одну
           строку с кнопкой и шапка вырастет до трёх строк. */
        flex: 1 1 0;
        gap: var(--space-4);
    }

    .site-header__cta {
        order: 3;
    }

    .site-nav__list {
        gap: var(--space-4);
    }
}

/* --------------------------------------------------------------------------
   НИЗКИЕ ЭКРАНЫ

   Планшет в ландшафте (740×360) и невысокое окно на большом мониторе
   (1366×500): кнопка первого экрана уезжала за сгиб на 228px и на 12px.
   Причина не только в отступах — кегль заголовка считался от ширины, поэтому
   на широком и низком экране он оставался крупным (56–75px) и съедал высоту.
   Ниже кегль ограничен ещё и долей высоты экрана (min с vh), а содержимое
   прижато к верху: при центрировании оно тем ниже, чем больше высота, и на
   360px высоты внизу места не остаётся вовсе.
   Блок стоит последним в файле: он должен перекрывать правила ширины выше.
   -------------------------------------------------------------------------- */

@media (max-height: 620px) {
    .hero {
        place-items: start center;
        padding-block: var(--space-3);
    }

    /* Нижняя граница 22px — тот же предел, что и на самых узких экранах:
       при меньшем кегле слово «подписчиков» рвётся посреди слова. */
    .hero h1 {
        font-size: clamp(22px, min(5.5vw, 7.2vh), 76px);
        margin-bottom: var(--space-3);
    }

    .hero__lead {
        font-size: clamp(16px, min(2vw, 3.2vh), 22px);
        margin-bottom: var(--space-3);
    }

    .hero__actions {
        margin-bottom: var(--space-3);
    }

    .hero__counter {
        font-size: 12px;
        letter-spacing: 0.08em;
    }

    /* Подсказка прокрутки на низком экране только мешает: до следующей
       секции и так долистается любой жест */
    .hero__cue {
        display: none;
    }
}

/* Совсем низкие окна (ландшафт телефона): кнопка подтягивается и по высоте */
@media (max-height: 460px) {
    .hero h1 {
        margin-bottom: var(--space-2);
    }

    .hero__lead {
        margin-bottom: var(--space-2);
    }

    .hero__actions {
        margin-bottom: var(--space-2);
    }

    .hero__actions .btn {
        min-height: 44px;
        padding-block: 10px;
    }
}