@charset "UTF-8";
/* =====================================================
   ЛЮДИ ЗЕМЛИ — стили сайта, написаны с нуля.
   Палитра и шрифты — в духе оригинального ЛЗ (тёмный фон, золотой акцент,
   Balkara для логотипа), но сам код (разметка, классы, поведение навбара)
   не переиспользует ничего из старого сайта.
   ===================================================== */

@font-face {
    font-family: 'Balkara';
    src: url('/components/fonts/Balkara.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-bg: #050404;
    --color-bg-elevated: #0f0d0c;
    --color-text: #f5f5f4;
    --color-text-secondary: #a8a29e;
    --color-text-muted: #78716c;
    --color-accent: #f59e0b;
    --color-accent-strong: #d97706;
    --color-border: rgba(245, 158, 11, 0.18);

    --font-body: 'Inter', sans-serif;
    --font-serif: 'Merriweather', serif;
    --font-brand: 'Balkara', sans-serif;

    --header-h: 4.75rem; /* было 76px — весь остальной навбар в rem, единая система единиц устойчивее к масштабированию страницы */
    --mobile-nav-h: 100%;
    --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.6);

    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-header: 450ms cubic-bezier(0.4, 0, 0.2, 1);
    /* Более медленная и плавная кривая — для декоративных переходов,
       где резкость бросается в глаза сильнее, чем в обычных hover-эффектах:
       подчёркивание кнопок навбара, прозрачность скроллбара. */
    --transition-smooth: 550ms cubic-bezier(0.16, 1, 0.3, 1);
    /* Небольшая пауза перед тем, как подчёркивание кнопок начнёт исчезать
       после потери hover/is-active — чтобы не пропадало мгновенно при
       случайном чуть-чуть увести курсор в сторону. На появление не влияет
       (там transition-delay обнуляется явно). */
    --underline-hide-delay: 180ms;

    --z-header: 1000;
    --z-mobile-nav: 999;
    --z-scrollbar: 1001;
}

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

/* Выделение текста — по умолчанию выключено ВЕЗДЕ (кнопки, лого, карточки,
   фото, иконки, счётчики и т.п. — сплошь интерфейс, выделять там нечего,
   а мешает — сильно: случайное выделение при обычном клике/свайпе по
   кнопке или карточке). Явно включаем обратно только там, где внутри
   реально связный текст, который могут захотеть скопировать — описания,
   рассказ о проекте, био, отзывы, правовые формулировки и т.п. (полный
   список — ниже, у каждого блока свой комментарий). Простой props вниз
   по дереву не расширяем: включили один раз на контейнере с текстом —
   этого достаточно, дочерние UI-элементы внутри (если вдруг появятся)
   при необходимости выключаются точечно, а не наоборот.
   Один список селекторов означает "здесь настоящий текст" — если
   добавляете новый блок с описанием/рассказом, впишите его сюда же. */
*, *::before, *::after {
    -webkit-user-select: none;
    user-select: none;
}

.content-split__text,      /* mainpage.php — абзац "Каждая личная история..." */
.pull-quote,                /* mainpage.php — цитата-врезка о проекте */
.signature-line,            /* mainpage.php — два "подписных" абзаца-цитаты */
.numbered-list li,          /* mainpage.php — пункты целей проекта (полные фразы, не просто лейблы) */
.prose-block p,             /* mainpage.php — блок "Наша миссия" (несколько абзацев + lede) */
.team-card__bio,            /* mainpage.php — био авторов проекта */
.coming-soon p,             /* team/partners/rewards/charity/service.php — тексты заглушек "в разработке" */
.module-placeholder p,      /* index.php — текст страницы 404 */
.footer__requisites,        /* index.php — реквизиты в футере (ИНН, ОГРНИП, почта) */
.cookie-notice__text,       /* cookie_notice.php — текст уведомления о cookie */
.review-card__text,         /* reviews.php — текст отзыва (и в карточке, и в модалке — общий класс) */
.review-form__checkbox--consent span, /* review_modal.php — формулировки согласий на обработку ПД */
.video-viewer__title,       /* episodes/viewer.php — название выпуска (явный запрос — люди копируют название, чтобы найти/поделиться) */
.video-viewer__desc,        /* episodes/viewer.php — описание выпуска */
.ad-info-text {             /* mainpage.php — текст модалки "Реклама. Организация, ИНН..." */
    -webkit-user-select: text;
    user-select: text;
}

/* Внутри .numbered-list li (включён целиком строкой выше) сам порядковый
   номер — оформительский элемент, как маркер списка, а не часть текста
   цели: выключаем обратно именно на нём. */
.numbered-list__index {
    -webkit-user-select: none;
    user-select: none;
}

/* Синяя подсветка при тапе (по умолчанию в мобильных браузерах, особенно
   на Android/Chrome) — убираем, у нас свои hover/active-состояния для
   ссылок и кнопок, эта подсветка только мешает и выглядит чужеродно. */
a, button {
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-tap-highlight-color: transparent;
    /* Резервирует место под скроллбар стабильно, даже когда он визуально
       скрыт (scrollbar-width:none выше). Без этого доступная ширина для
       фиксированных/vw-зависимых элементов (навбар, кастомный скроллбар)
       могла "плавать" — то давая, то не давая браузеру резервировать
       место в зависимости от текущего состояния скролла при разном
       масштабе страницы. */
    scrollbar-gutter: stable;
}
html::-webkit-scrollbar { display: none; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }

h1, h2, h3 { font-family: var(--font-serif); margin: 0 0 0.5em; }
p { margin: 0 0 1em; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

#app-content {
    padding-top: var(--header-h);
    min-height: 60vh;
    opacity: 1;
    transition: opacity 0.2s ease;
}
#app-content.is-loading { opacity: 0; pointer-events: none; }

.module-placeholder,
.error-message {
    padding: 4rem 1.5rem 6rem;
    text-align: center;
    color: var(--color-text-secondary);
}
.module-placeholder a { color: var(--color-accent); text-decoration: underline; }

/* =====================================================
   ХЕДЕР / НАВБАР
   Структура — как в примере: .main-nav со брендом слева, ссылками по
   центру и правой группой кнопок. Поведение при скролле — тоже 1:1:
   у верха страницы виден, при скролле вниз прячется, при скролле вверх
   сразу появляется (см. components/js/header-scroll.js).
   ===================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 6%;
    box-sizing: border-box;
    z-index: var(--z-header);
    background: rgba(5, 4, 4, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1.5px solid var(--color-border);
    transform: translateY(0);
    transition: transform var(--transition-header), box-shadow var(--transition-base), background-color var(--transition-base);
}
.site-header.site-header--scrolled {
    background: rgba(5, 4, 4, 0.94);
    box-shadow: var(--shadow-md);
}
.site-header.header-hidden {
    transform: translateY(-100%);
}

/* На мобильном/планшете (тот же брейкпоинт, где появляется бургер)
   у скрытия хедера нет "шапки браузера", за которую можно спрятаться —
   на iPhone вьюпорт начинается сразу с верха экрана. Поэтому здесь
   translateY дополняется прозрачностью: хедер (а вместе с ним и кнопка
   бургера, она его часть) не просто уезжает вверх, а ещё и гарантированно
   исчезает — pointer-events: none, пока скрыт, чтобы невидимая полоса не
   перехватывала тапы по контенту под собой. */
@media (max-width: 960px) {
    .site-header {
        transition: transform var(--transition-header), opacity var(--transition-header), box-shadow var(--transition-base), background-color var(--transition-base);
    }
    .site-header.header-hidden {
        opacity: 0;
        pointer-events: none;
    }
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    column-gap: 5rem;

    /* Тот же механизм центрирования, что у футера и у .section по всей
       странице: горизонтальный отступ 6% — на внешнем родителе
       (.site-header), max-width + margin:auto — на этом, внутреннем
       элементе. Раньше отступ и max-width были на одном и том же
       элементе — из-за этого проценты считались не от той ширины, и
       навбар/футер визуально не совпадали по центру со остальным
       контентом. Своя, более широкая ширина (90rem вместо 72rem у
       футера/секций) — чтобы навбар не ломался при большом числе
       кнопок; ширина разная, но центр — общий.

       ВАЖНО: flex-wrap: nowrap намеренно — раньше здесь стоял wrap с
       min-height (перенос на вторую строку при нехватке места, высота
       росла под это). Именно это было причиной "расширения" хедера —
       при изменении масштаба страницы (десктоп) или пересчёте размеров
       на мобиле контент иногда переставал помещаться в одну строку и
       хедер визуально скачком становился выше. Пунктов немного (5
       коротких слов) — переносу тут в принципе взяться неоткуда при
       разумном зуме, а ниже брейкпоинта в 960px .nav-links скрывается
       целиком (бургер-меню) — так что nowrap ничего не обрежет. */
    height: var(--header-h);
    max-width: 90rem;
    width: 100%;
    margin: 0 auto;
    padding: 0.75rem 0;
    box-sizing: border-box;
}

/* Бренд и правая группа (CTA/бургер) не растягиваются на всю ширину
   навбара — flex-grow: 0 держит их вплотную к .nav-links (с отступом
   column-gap выше), и вся тройка центрируется как единая группа за счёт
   justify-content: center на .main-nav. */
.brand,
.nav-actions {
    flex: 0 0 auto;
}

.brand {
    position: relative;
    display: inline-block;
    padding: 0.5rem 0;
    font-family: var(--font-brand);
    font-size: 1.35rem;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    transition: opacity var(--transition-base);
}
.brand::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-accent) 15%, var(--color-accent) 85%, transparent);
    opacity: 0;
    transform: scaleX(0.6) translateZ(0);
    transform-origin: center;
    backface-visibility: hidden;
    transition: transform var(--transition-smooth) var(--underline-hide-delay), opacity var(--transition-smooth) var(--underline-hide-delay);
}
.brand.is-active::after {
    opacity: 1;
    transform: scaleX(1) translateZ(0);
    transition-delay: 0s;
}
.brand__accent {
    color: var(--color-accent-strong);
    text-shadow: 0 0 25px rgba(217, 119, 6, 0.5);
}

@media (hover: hover) and (pointer: fine) {
    .brand:hover { opacity: 0.85; }
    .brand:hover::after {
        opacity: 1;
        transform: scaleX(1) translateZ(0);
        transition-delay: 0s;
    }
}

.nav-links {
    /* flex-grow: 0 — не растягивается, чтобы не раздвигать бренд и CTA
       к краям навбара; flex-shrink: 1 + min-width: 0 — может сжаться и
       перенести кнопки на вторую строку, если места мало. */
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 2.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-links a {
    position: relative;
    padding: 0.5rem 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    transition: color var(--transition-base);
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-accent) 15%, var(--color-accent) 85%, transparent);
    opacity: 0;
    transform: scaleX(0.6) translateZ(0);
    transform-origin: center;
    backface-visibility: hidden;
    transition: transform var(--transition-smooth) var(--underline-hide-delay), opacity var(--transition-smooth) var(--underline-hide-delay);
}
.nav-links a.is-active {
    color: var(--color-accent);
}
.nav-links a.is-active::after {
    opacity: 1;
    transform: scaleX(1) translateZ(0);
    transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
    .nav-links a:hover {
        color: var(--color-accent);
    }
    .nav-links a:hover::after {
        opacity: 1;
        transform: scaleX(1) translateZ(0);
        transition-delay: 0s;
    }
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.nav-cta {
    border: none;
    cursor: pointer;
    padding: 0.65rem 1.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-strong) 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--color-accent);
    transition: transform var(--transition-base), opacity var(--transition-base);
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
    .nav-links { display: none; }
    .nav-cta { display: none; }
    .nav-toggle { display: flex; }
    /* .nav-links и .nav-cta скрыты, остаются только бренд и бургер — их
       нужно развести по краям навбара, а не центрировать вместе. */
    .main-nav { justify-content: space-between; }
}

/* Мобильная панель навигации — выпадает сверху вниз под хедером, высота
   по контенту (max-height ограничивает её, если кнопок много — тогда
   появляется свой скролл), а не занимает весь экран. */
.mobile-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    max-height: 55vh;
    overflow-y: auto;
    z-index: var(--z-mobile-nav);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.25rem;
    padding: 2rem 1.5rem 2.5rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);

    /* Уводим панель за экран на точное расстояние: собственная высота
       (--mobile-nav-h, меряется в components/js/header-scroll.js) плюс
       отступ top: var(--header-h). Раньше здесь был процент (-100%) от
       собственной высоты — работает похоже, но зависит от количества
       кнопок в навбаре и в паре с фиксированным отступом сверху иногда
       давал неточность в пару пикселей. Пиксельное значение — надёжнее
       при любом числе кнопок. */
    transform: translateY(calc(-1 * var(--mobile-nav-h) - var(--header-h)));
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-header), opacity var(--transition-header);
}
.mobile-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Бэкдроп под мобильной панелью — та же механика, что у модалок
   (components/modal.css): блюр появляется/исчезает мгновенно, одним
   кадром, а не анимируется через opacity — анимировать backdrop-filter
   дорого для GPU (пересчёт размытия на каждый кадр) и заметно проседает
   по FPS, если анимировать. */
.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-mobile-nav) - 1);
    background: rgba(2, 2, 2, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
}
.mobile-nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}
.mobile-nav__link {
    position: relative;
    display: inline-block;
    font-weight: 800;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--color-text);
    transition: color var(--transition-base), transform var(--transition-base);
}
.mobile-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-accent) 15%, var(--color-accent) 85%, transparent);
    opacity: 0;
    transform: scaleX(0.6) translateZ(0);
    transform-origin: center;
    backface-visibility: hidden;
    transition: transform var(--transition-smooth) var(--underline-hide-delay), opacity var(--transition-smooth) var(--underline-hide-delay);
}
.mobile-nav__link.is-active {
    color: var(--color-accent);
}
.mobile-nav__link.is-active::after {
    opacity: 1;
    transform: scaleX(1) translateZ(0);
    transition-delay: 0s;
}

/* :hover — только для устройств с настоящим курсором (мышь/трекпад).
   На тач-экранах :hover после тапа может "залипать" до следующего тапа
   в другом месте экрана — из-за этого предыдущая нажатая кнопка
   продолжала подсвечиваться и казаться сдвинутой вправе одновременно
   с реально активной. */
@media (hover: hover) and (pointer: fine) {
    .mobile-nav__link:hover {
        color: var(--color-accent);
        transform: translateX(4px);
    }
    .mobile-nav__link:hover::after {
        opacity: 1;
        transform: scaleX(1) translateZ(0);
        transition-delay: 0s;
    }
}

.mobile-nav__cta {
    margin-top: 1rem;
    border: none;
    cursor: pointer;
    padding: 0.9rem 2.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-strong) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

/* =====================================================
   ФУТЕР
   ===================================================== */
.footer {
    border-top: 1.5px solid var(--color-border);
    padding: 3.5rem 6%;
}
.footer__inner {
    /* Та же структура, что у .section/.section__inner по всей странице —
       отступ 6% на внешнем элементе (.footer), а не на самом .footer__inner
       — раньше было наоборот, и проценты в CSS считаются от родителя, так
       что эффективный отступ у футера отличался от остальных секций
       страницы, из-за чего футер визуально "уезжал" в сторону. */
    max-width: 72rem;
    margin: 0 auto;
    width: 100%;

    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: left;
}
.footer__col-title {
    display: block;
    margin-bottom: 1.1rem;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.footer__logo {
    display: inline-block;
    margin-bottom: 1rem;
    font-family: var(--font-brand);
    font-size: 1.4rem;
    text-transform: uppercase;
    color: #fff;
}
.footer__requisites {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.7;
}
.footer__requisites a { transition: color var(--transition-base); }
.footer__requisites a:hover { color: var(--color-accent); }

.footer__docs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
.footer__docs a {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
}
.footer__docs a:hover { color: var(--color-accent); }
.footer__docs i {
    flex-shrink: 0;
    margin-top: 0.2em;
    color: rgba(217, 119, 6, 0.6);
    font-size: 11px;
}

/* Разработчик — аватар статичен, кликабелен именно ник (по нему
   открывается модалка), не вся строка целиком. */
.footer__dev {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.footer__dev-avatar {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}
.footer__dev-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.footer__dev-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    margin-left: -0.6rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: color var(--transition-base), background var(--transition-base);
}
.footer__dev-name:hover {
    color: var(--color-accent);
    background: rgba(217, 119, 6, 0.07);
}
.footer__dev-name i {
    font-size: 10px;
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .footer__inner {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 5rem;
    }
    .footer__col {
        flex: 0 1 auto;
        max-width: 20rem;
    }
}

/* =====================================================
   КАСТОМНЫЙ СКРОЛЛБАР
   Структура и поведение — 1:1 из примера с рендером (assets/script.js,
   блок "CUSTOM SCROLLBAR"): трек и бегунок создаются самим JS
   (components/js/scrollbar.js), здесь только их стили. Единственное
   отличие от примера — цвет: фирменный янтарный ЛЗ вместо зелёного.
   ===================================================== */
[data-custom-scrollbar] {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
[data-custom-scrollbar]::-webkit-scrollbar { display: none; }

.custom-scrollbar-track {
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100vh;
    z-index: var(--z-scrollbar);
    background: transparent;
    pointer-events: none;
}

.custom-scrollbar-thumb {
    position: absolute;
    right: 2px;
    width: 6px;
    border-radius: 999px;
    background: var(--color-accent-strong);
    /* Скрыт по умолчанию — появляется только во время скролла (класс
       is-visible на .custom-scrollbar-track, ставит components/js/scrollbar.js
       и снимает через паузу после остановки скролла) либо при наведении/
       перетаскивании. Появление и исчезновение — на одной плавной кривой
       (--transition-smooth), без резких скачков в обе стороны. Ширина/
       цвет/сдвиг при hover — на быстрой --transition-base, это мгновенная
       реакция на курсор, ей медленная кривая не нужна.
    */
    opacity: 0;
    transition: opacity var(--transition-smooth), width var(--transition-base), background var(--transition-base), right var(--transition-base);
    pointer-events: auto;
    cursor: pointer;
}

.custom-scrollbar-track.is-visible .custom-scrollbar-thumb,
.custom-scrollbar-track:hover .custom-scrollbar-thumb,
.custom-scrollbar-thumb.is-dragging {
    opacity: 1;
}

.custom-scrollbar-track:hover .custom-scrollbar-thumb,
.custom-scrollbar-thumb.is-dragging {
    width: 8px;
    right: 1px;
}

.custom-scrollbar-thumb.is-dragging {
    background: var(--color-accent);
}

@media (max-width: 768px) {
    .custom-scrollbar-track { width: 4px; }
    .custom-scrollbar-thumb { width: 4px; right: 0; }
}

/* Вариант для отдельных контейнеров (не всего окна) — например,
   .modal-card__body. position:absolute относительно самого контейнера
   (ему нужен position:relative), а не fixed на весь экран. Остальное —
   тот же вид и поведение, что и у оконного варианта. */
.custom-scrollbar-track--scoped {
    position: absolute;
    height: 100%;
}

.modal-scroll-area::-webkit-scrollbar { width: 4px; }
.modal-scroll-area::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); }
.modal-scroll-area::-webkit-scrollbar-thumb { background: rgba(217, 119, 6, 0.5); border-radius: 2px; }

/* =====================================================
   СТРАНИЦЫ-ЗАГЛУШКИ (team / rewards / charity)
   ===================================================== */
.coming-soon {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}
.coming-soon__inner { max-width: 32rem; }
.coming-soon__icon { font-size: 2.5rem; color: var(--color-accent); margin-bottom: 1.5rem; }
.coming-soon h1 { font-size: 2rem; color: #fff; margin-bottom: 1rem; }
.coming-soon p { color: var(--color-text-secondary); margin-bottom: 2rem; }
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    padding: 0.9rem 2.25rem;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
/* display:inline-flex выше по специфичности равен встроенному
   браузерному [hidden]{display:none}, и как класс, идущий позже в
   каскаде, перебивает его — атрибут hidden физически стоит на кнопке,
   но визуально она остаётся видимой. Общий класс на весь сайт — чиним
   один раз здесь, а не для каждой конкретной кнопки отдельно. */
.btn[hidden] {
    display: none;
}
.btn--primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-strong) 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.btn--secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.btn--secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* =====================================================
   УВЕДОМЛЕНИЕ О КУКИ
   ===================================================== */
.cookie-notice {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 26rem;
    z-index: 1001;
    padding: 1rem;
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
}
.cookie-notice.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-notice__card {
    position: relative;
    overflow: hidden;
    background: rgba(15, 13, 12, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}
.cookie-notice__body { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.cookie-notice__icon { color: var(--color-accent); font-size: 1.1rem; margin-top: 0.15rem; }
.cookie-notice__text { color: var(--color-text-secondary); font-size: 0.8rem; line-height: 1.6; margin: 0; }
.cookie-notice__text a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.cookie-notice__accept {
    width: 100%;
    border: none;
    border-radius: 0.6rem;
    padding: 0.85rem;
    background: var(--color-accent-strong);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: background var(--transition-base);
}
.cookie-notice__accept:hover { background: var(--color-accent); }

@media (max-width: 768px) {
    .cookie-notice { max-width: 100%; padding: 0; }
    .cookie-notice__card { border-radius: 0; border-left: none; border-right: none; border-bottom: none; }
}

/* =====================================================
   Модули (episodes, gallery, notices, reviews, sponsors) сегодня не
   переписаны — по-прежнему на старых Tailwind-классах и без CDN будут
   без стилей. Ожидаемо: каждый переводится на этот стиль отдельным
   следующим шагом. mainpage — первый переписанный модуль, стили ниже.
   ===================================================== */

/* =====================================================
   ГЛАВНАЯ СТРАНИЦА (assets/modules/mainpage/mainpage.php)
   Структура секций — в духе примера с рендером (.hero, .section +
   .section__header с бейджем/заголовком), контент — из оригинала ЛЗ.
   ===================================================== */

.font-BalkaraFreeCondensed {
    font-family: var(--font-brand);
    font-weight: normal;
    text-transform: uppercase;
}

/* --- Hero --- */
.hero {
    position: relative;
    /* #app-content уже даёт padding-top: var(--header-h) (нужно для всех
       остальных страниц) — здесь компенсируем его отрицательным margin,
       чтобы фон hero уходил под хедер до самого верха экрана, а не
       начинался с двойным отступом. */
    margin-top: calc(-1 * var(--header-h));
    min-height: 100vh;
    /* 100svh поверх 100vh (не вместо) — на мобиле vh не учитывает
       адресную строку браузера, из-за чего реальная видимая высота
       меньше расчётной, и контент у самого низа блока (стрелка
       прокрутки) мог оказаться за пределами видимой области при первой
       загрузке — выглядело как "стрелка под блоком".
       ВАЖНО: именно svh (small viewport height — минимально возможная
       высота, адресная строка считается ВСЕГДА развёрнутой), а НЕ dvh
       (dynamic — специально меняется в реальном времени вслед за
       сворачиванием/разворачиванием адресной строки при скролле). Раньше
       здесь стоял dvh — это и оказалось причиной "дышащего" hero-блока:
       он в буквальном смысле пересчитывал свою высоту на каждый скролл
       вверх-вниз, а не только один раз при загрузке. svh даёт тот же
       корректный результат на старте (та самая причина, ради которой это
       вообще добавляли), но остаётся неизменным во время скролла.
       Браузеры без поддержки svh просто проигнорируют эту строку и
       останутся на vh выше — обычный приём постепенного улучшения,
       старые браузеры не ломает. */
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--header-h) + 2rem) 6% 6rem;
    overflow: hidden;
    text-align: center;
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, transparent 0%, rgba(5, 4, 4, 0.35) 100%),
        linear-gradient(to bottom, transparent 0%, transparent 55%, var(--color-bg) 100%);
}

.hero__eyebrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 2rem;
}

.hero__eyebrow-text {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75), 0 0 24px rgba(0, 0, 0, 0.45);
}
.hero__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 10px 2px rgba(245, 158, 11, 0.7);
    animation: pulse-dot 2s ease-in-out infinite;
}

@media (max-width: 420px) {
    .hero__eyebrow-text {
        font-size: 10px;
        letter-spacing: 0.18em;
    }
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.hero__logo {
    margin: 0;
    /* Базовый размер для всего логотипа — от него в em считаются "Л",
       "ЮДИ" и "ЗЕМЛИ" ниже, поэтому пропорция между ними (9:7:8, как в
       оригинале) остаётся одинаковой на любом экране: логотип целиком
       плавно растёт вместе с шириной экрана (13vw), а не скачет между
       заранее заданными размерами на разных брейкпоинтах. */
    font-size: clamp(3rem, 13vw, 9rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.hero__logo-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
}
.hero__logo-l,
.hero__logo-rest,
.hero__logo-line {
    font-family: var(--font-brand);
    font-weight: normal;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.hero__logo-l { font-size: 1em; }
.hero__logo-rest { font-size: 0.778em; }
.hero__logo-line { font-size: 0.889em; margin-top: 0.05em; }
.hero__logo-line--accent {
    color: var(--color-accent-strong);
    text-shadow: 0 0 25px rgba(217, 119, 6, 0.5);
}

.hero__subtitle {
    max-width: 34rem;
    margin: 1.75rem auto 0;
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.65;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.hero__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 2.5rem;
}
.hero__buttons .btn {
    padding: clamp(0.7rem, 2.4vw, 1rem) clamp(1.5rem, 6vw, 2.5rem);
}

.hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    border: none;
    background: transparent;
    color: var(--color-accent);
    font-size: 1.35rem;
    cursor: pointer;
    padding: 0.5rem;
    animation: bounce-down 2.2s ease-in-out infinite;
}

/* =====================================================
   БАННЕР ГЛАВНОЙ СТРАНИЦЫ
   Соотношение сторон жёстко зафиксировано под исходники 3000×400
   (aspect-ratio решает это само, без разъезжания на разных ширинах).
   Пусто по умолчанию (display:none) — показывается только через JS,
   когда banner_manager.php реально находит хотя бы один файл
   (см. assets/scripts/banner_manager.php и mainpage.php).
   ===================================================== */
.homepage-banner {
    display: none;
    position: relative;
    width: 100%;
    aspect-ratio: 3000 / 400;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
}
.homepage-banner.has-banners {
    display: block;
}
/* Мягкий градиент по краям — не даёт картинке банально обрываться по
   вертикальной линии на границе, особенно заметно на широком (3000×400)
   формате. Поверх слайдов, но не мешает кликам — сам ничего не
   перехватывает. */
.homepage-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Снизу и по бокам, без верха — там ничего важного нет, а внизу как
       раз сидят точки, которым нужен контраст на баннере любого цвета
       (в том числе на светлом/белом). Заметно шире прежнего — фактически
       затемняет большую часть площади, а не только тонкую полоску у
       самого края. */
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 60%),
        linear-gradient(to right, rgba(0, 0, 0, 0.35), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.35));
}

.homepage-banner__slides {
    position: absolute;
    inset: 0;
}
.homepage-banner__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.homepage-banner__slide.is-active {
    opacity: 1;
}
.homepage-banner__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.homepage-banner__dots {
    position: absolute;
    left: 50%;
    bottom: 0.35rem;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 0.5rem;
}
.homepage-banner__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background var(--transition-base), transform var(--transition-base);
}
.homepage-banner__dot:hover {
    background: rgba(255, 255, 255, 0.7);
}
@media (max-width: 768px) {
    .homepage-banner__dot {
        width: 0.35rem;
        height: 0.35rem;
    }
}
.homepage-banner__dot.is-active {
    background: var(--color-accent);
    transform: scale(1.2);
}

/* Сама ссылка баннера — растягивается на весь слайд (картинка внутри
   уже занимает 100%/100% из .homepage-banner__slide img). */
.homepage-banner__link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Бейдж "Реклама" — по требованиям маркировки интернет-рекламы, только у
   баннеров с is_sponsor=true. Отдельный элемент, а не часть ссылки —
   клик по нему открывает модалку с данными рекламодателя, а не переход
   по ссылке баннера. */
.homepage-banner__ad-badge {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 3;
    padding: 0.25rem 0.6rem;
    border-radius: 0.35rem;
    border: none;
    background: rgba(0, 0, 0, 0.65);
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}
.homepage-banner__ad-badge:hover {
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
}

/* Обёртка для двух независимых слоёв — .hero (нетронутый) и оверлей
   баннера поверх него. display:flow-root — чтобы отрицательный
   margin-top у .hero (компенсация высоты шапки) не "утёк" наружу через
   схлопывание внешних отступов и не сдвинул саму обёртку — без него
   position:relative тут одного было бы недостаточно. */
.hero-stack {
    position: relative;
    display: flow-root;
}

/* Слой 2 — сам баннер как отдельный элемент существует ВНЕ hero, поэтому
   ничего в hero (центрирование контента, его высота) от присутствия
   баннера никак не меняется. inset:0 — оверлей точно повторяет площадь
   hero (они оба в одной hero-stack). pointer-events:none на самом слое,
   чтобы пустая область вокруг баннера не перехватывала клики по hero под
   ним — возвращается на сам баннер отдельно. Прижат к низу через flex —
   не гадаем с "отступ N от низа", а просто прижимаем к краю доступной
   области, тот же принцип, что и у липких футеров. */
.hero-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 6% 4.5rem;
    pointer-events: none;
}
.homepage-banner {
    pointer-events: auto;
    width: min(85%, 50rem);
}

@media (max-width: 768px) {
    /* Отступ сверху от РЕАЛЬНОГО положения кнопки "Смотреть выпуски"
       (измеряется в JS, см. positionBannerOnMobile в mainpage.php), а не
       фиксированный отступ снизу от края блока — на мобиле высота экрана
       заметно меньше десктопа, и жёсткий отступ снизу иногда утаскивал
       баннер ниже видимой области экрана (тот самый обрезанный край).
       26rem — запасное значение на случай, если JS почему-то ещё не
       успел отработать (без него баннер на долю секунды мелькнул бы у
       самого верха экрана). */
    .hero-banner-overlay {
        align-items: flex-start;
        padding: var(--banner-offset-top, 26rem) 0 0;
    }
    .homepage-banner {
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}
@keyframes bounce-down {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

/* --- Section (общая обёртка контентных секций) --- */
.section {
    padding: 5rem 6%;
}
.section__inner {
    max-width: 72rem;
    margin: 0 auto;
}

/* --- Content-split: картинка + текст, поочерёдно --- */
.content-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
.content-split__media {
    position: relative;
}
.content-split__media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
}
.content-split__media::before,
.content-split__media::after {
    content: '';
    position: absolute;
    width: 5rem;
    height: 5rem;
    border: 2px solid rgba(217, 119, 6, 0.3);
    pointer-events: none;
}
.content-split__media::before {
    top: -1rem;
    left: -1rem;
    border-right: none;
    border-bottom: none;
    border-radius: 1rem 0 0 0;
}
.content-split__media::after {
    bottom: -1rem;
    right: -1rem;
    border-left: none;
    border-top: none;
    border-radius: 0 0 1rem 0;
}
.content-split--reverse .content-split__media { order: 2; }
.content-split--reverse .content-split__body { order: 1; }

.content-split__text {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.75;
}

/* --- Заголовок секции: небольшая надпись-эйобров + крупный заголовок --- */
.section__header {
    max-width: 40rem;
    margin-bottom: 3rem;
}
.section__header--center {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.section__eyebrow {
    display: block;
    color: var(--color-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 11px;
    margin-bottom: 0.9rem;
}
.section__title {
    font-family: var(--font-serif);
    font-weight: 900;
    color: #fff;
    font-size: clamp(1.6rem, 3.2vw, 2.35rem);
    line-height: 1.25;
    margin: 0;
}

/* --- Цитата: крупный декоративный кавычка-акцент --- */
.pull-quote {
    position: relative;
    margin: 0 0 1.75rem;
    padding-left: 2.25rem;
    color: #fff;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.45;
}
.pull-quote::before {
    content: '“';
    position: absolute;
    left: -0.35rem;
    top: -0.6rem;
    /* Не var(--font-serif) (Merriweather, веб-шрифт) — это чисто
       декоративный завиток, дожидаться загрузки веб-шрифта ради него не
       нужно, и до того, как Merriweather догрузится, тут могла на долю
       секунды отрисоваться "не та" глифа (гонка загрузки шрифта).
       Обычный системный serif — доступен сразу, без сети. */
    font-family: Georgia, 'Times New Roman', serif;
    font-style: normal;
    font-size: 4rem;
    line-height: 1;
    color: rgba(217, 119, 6, 0.35);
}

/* --- Нумерованный список целей проекта --- */
.numbered-list {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.1rem;
}
.numbered-list li {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: start;
    gap: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
}
.numbered-list__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-accent);
    font-family: var(--font-serif);
    font-size: 0.8rem;
    font-weight: 700;
}

/* --- Prose-block: центральный текстовый блок без картинки --- */
.prose-block {
    max-width: 46rem;
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
}
.prose-block p {
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    line-height: 1.85;
    margin: 0;
}
.prose-block__lede {
    position: relative;
    color: var(--color-text);
    font-weight: 600;
    font-size: 1.15rem;
}

/* --- Signature-line: закрывающая цитата-манифест --- */
.signature-line {
    position: relative;
    max-width: 46rem;
    margin: 3.5rem auto 0;
    padding-top: 2.5rem;
    text-align: center;
    color: var(--color-text);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.7;
}
.signature-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 2px;
    background: var(--color-accent);
}
.signature-line--tight {
    max-width: 40rem;
    font-size: 1.05rem;
}

/* --- Authors-photo: умеренного размера фото над карточками команды
   (не растянуто на всю ширину секции, как раньше в схеме content-split) --- */
.authors-photo {
    max-width: 26rem;
    margin: 0 auto 3rem;
}
.authors-photo img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
}

/* --- Team-grid: карточки авторов проекта, на всю ширину секции —
   раньше были зажаты в узкой текстовой колонке рядом с фото и из-за
   этого вытягивались по высоте. --- */
.team-grid {
    display: grid;
    gap: 1.5rem;
    max-width: 52rem;
    margin: 0 auto;
}
.team-card {
    padding: 1.75rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    text-align: left;
}
.team-card__name {
    font-family: var(--font-serif);
    font-style: italic;
    color: #fff;
    font-size: 1.15rem;
    margin: 0 0 0.35rem;
}
.team-card__role {
    display: inline-block;
    color: var(--color-accent);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.team-card__experience {
    color: var(--color-text-muted);
    font-size: 12px;
    margin: 0.35rem 0 1rem;
}
.team-card__bio {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
}

@media (min-width: 640px) {
    .team-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
    .content-split {
        grid-template-columns: 5fr 7fr;
        gap: 4rem;
        align-items: center;
    }
}

/* =====================================================
   ОБЩЕЕ ДЛЯ СТРАНИЦ-КАТАЛОГОВ (галерея, выпуски): тулбар
   поиска/сортировки, счётчик, сетка карточек, пагинация.
   Один источник стилей — правки применяются сразу везде.
   ===================================================== */

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Тулбар: поиск + сортировка --- */
.toolbar {
    position: relative;
    z-index: 20;
    max-width: 36rem;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    background: rgba(12, 10, 9, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.5);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.toolbar:focus-within {
    border-color: rgba(217, 119, 6, 0.55);
    box-shadow: 0 8px 28px -10px rgba(217, 119, 6, 0.25), 0 0 0 3px rgba(217, 119, 6, 0.08);
}

.toolbar__search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.toolbar__search i {
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(245, 158, 11, 0.7);
    font-size: 13px;
    transition: color var(--transition-base);
}
.toolbar:focus-within .toolbar__search i {
    color: var(--color-accent);
}
.toolbar__search input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 0.95rem 1rem 0.95rem 2.75rem;
    color: #fff;
    font-size: 0.9rem;
}
.toolbar__search input::placeholder {
    color: var(--color-text-muted);
}

.toolbar__sort {
    position: relative;
    flex-shrink: 0;
    z-index: 20;
}
.toolbar__sort-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.85rem 1.25rem;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    transition: color var(--transition-base);
}
.toolbar__sort-btn:hover {
    color: #fff;
}
.toolbar__sort-btn i {
    color: var(--color-accent);
    font-size: 10px;
    transition: transform var(--transition-base);
}
.toolbar__sort-btn i.is-rotated {
    transform: rotate(180deg);
}
.toolbar__sort-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.75rem);
    width: 14rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.toolbar__sort-menu.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.toolbar__sort-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    padding: 0.9rem 1.25rem;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.toolbar__sort-option:first-child {
    border-top: none;
}
.toolbar__sort-option:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}
.toolbar__sort-option.is-active {
    color: var(--color-accent);
}

/* --- Счётчик найденного (виден только когда есть что показать, например при поиске) --- */
.counter-row {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.counter-row.is-visible {
    display: flex;
}
.counter-row__line {
    width: 3rem;
    height: 1px;
    background: rgba(245, 158, 11, 0.4);
}
@media (min-width: 768px) {
    .counter-row__line { width: 6rem; }
}
.counter-badge {
    display: inline-block;
    padding: 0.4rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-accent);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    white-space: nowrap;
}

/* --- Сетка карточек (адаптивное число колонок) --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
/* Без этого элементы Grid не сжимаются меньше "естественной" ширины
   своего содержимого (например, из-за white-space:nowrap у названия) —
   при нехватке места на колонку (много колонок / длинный текст) сетка
   раздувается шире контейнера, а с ней и вся страница: любой
   position:fixed элемент с width:100% (например, навбар) в этом случае
   считает свою ширину от увеличившегося layout-viewport, а не от
   видимого экрана, и визуально становится шире него. */
.card-grid > * {
    min-width: 0;
}
@media (min-width: 640px) {
    .card-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (min-width: 1024px) {
    .card-grid { grid-template-columns: repeat(5, 1fr); }
}
.card-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-muted);
    padding: 5rem 0;
}

/* --- Пагинация --- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}
.pagination__btn {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
}
.pagination__btn:hover {
    border-color: var(--color-accent);
    color: #fff;
}
.pagination__btn.is-active {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: #fff;
}
.pagination__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    color: var(--color-text-muted);
}