/* =============================================================
   КАДРУМ — лендинг. Визуальная система синхронизирована
   с мобильным приложением (Claude Design → ds-export/styles.css).
   Токены-референс: design/tokens.css
   ============================================================= */

:root {
    /* Акцент — единственный бренд-цвет */
    --c-accent:           #D068CC;
    --c-accent-dim:       rgba(208, 104, 204, 0.12);
    --c-accent-dim-hover: rgba(208, 104, 204, 0.18);
    --c-accent-border:    rgba(208, 104, 204, 0.25);
    --c-accent-glow:      rgba(160, 72, 168, 0.35);
    --c-accent-grad:      linear-gradient(90deg, #9333EA, #D068CC);

    /* Фон */
    --c-bg-solid: #0E0B1A;
    --c-bg: linear-gradient(165deg, #0E0B1A 0%, #110E20 20%, #0D0F1E 45%, #0F0A1C 70%, #0C0918 100%);
    --c-glow-1: rgba(88, 40, 140, 0.12);
    --c-glow-2: rgba(40, 60, 140, 0.08);
    --c-glow-3: rgba(100, 50, 120, 0.06);

    /* Поверхности (glassmorphism) */
    --c-surface-1: rgba(255, 255, 255, 0.03);
    --c-surface-2: rgba(255, 255, 255, 0.04);
    --c-surface-3: rgba(255, 255, 255, 0.06);
    --c-surface-4: rgba(255, 255, 255, 0.08);
    /* РАСХОЖДЕНИЕ с design/tokens.css: в приложении 0.07. Обычные карточки
       на лендинге подняты с surface-2 до surface-3, и акцентная при 0.07
       оказывалась ТУСКЛЕЕ обычной (1.07 против 1.13 к фону) — то есть
       выделенный блок терялся сильнее остальных. 0.14 возвращает ей
       ступень сверху. */
    --c-surface-accent: rgba(208, 104, 204, 0.14);

    /* Обводки */
    --c-border-subtle: rgba(255, 255, 255, 0.06);
    --c-border:        rgba(255, 255, 255, 0.08);
    --c-border-medium: rgba(255, 255, 255, 0.10);
    --c-border-strong: rgba(255, 255, 255, 0.12);

    /* Текст */
    --c-text-primary:   #ffffff;
    --c-text-secondary: rgba(255, 255, 255, 0.90);
    --c-text-tertiary:  rgba(255, 255, 255, 0.72);
    --c-text-muted:     rgba(255, 255, 255, 0.65);
    /* РАСХОЖДЕНИЕ с design/tokens.css: в приложении faint = 0.40, это даёт
       на нашем фоне 3.79:1 и не проходит WCAG AA для мелкого текста.
       На лендинге этим цветом набраны хлебные крошки, подпись под кнопками
       и весь подвал — то есть 12–14px, где 4.5:1 обязательны. 0.55 даёт
       6.24:1 и сохраняет ступень ниже muted (0.65). */
    --c-text-faint:     rgba(255, 255, 255, 0.55);

    /* Радиусы */
    --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r-lg: 14px; --r-xl: 16px;
    --r-2xl: 18px; --r-3xl: 20px; --r-4xl: 28px; --r-pill: 100px;

    /* Типографика */
    --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Blur */
    --blur-md: blur(12px);
    --blur-lg: blur(24px);

    /* Явный список свойств: transition: all заставляет браузер отслеживать
       всё подряд и ловит неожиданные скачки при смене раскладки. */
    --transition:
        background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Совместимость со старыми именами (используются в legacy.css) */
    --color-text: var(--c-text-primary);
    --color-text-muted: var(--c-text-muted);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    scroll-behavior: smooth;
    color-scheme: dark;        /* нативные скроллбары и контролы в тёмной теме */
}

body {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--c-bg-solid);
    color: var(--c-text-primary);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Убирает 300ms задержку двойного тапа на мобильных */
a, button { touch-action: manipulation; }

/* Шапка липкая — иначе якорные переходы прячут заголовок под ней */
section[id] { scroll-margin-top: 84px; }

body::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============ Фон: градиент + мягкие glow-пятна ============ */

.background-animation {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: var(--c-bg);
}

/* Пятна статичные. Раньше они бесконечно дрейфовали (34, 42 и 50 секунд),
   и это держало три слоя с blur(90px) в постоянной перерисовке на всех
   страницах, всё время пока открыта вкладка. Не возвращать: заметности ноль,
   расход батареи и загрузка композитора постоянные.
   will-change тоже снят — без анимации он только зря создаёт отдельный слой. */
.glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
}

.glow-1 {
    width: 620px; height: 620px;
    top: -12%; left: -8%;
    background: var(--c-glow-1);
}

/* Масштаб зашит вместо анимации: пятно жило в кадре крупнее своего размера,
   без него композиция фона поехала бы. */
.glow-2 {
    width: 720px; height: 720px;
    top: 32%; right: -14%;
    background: var(--c-glow-2);
    transform: scale(1.08);
}

.glow-3 {
    width: 560px; height: 560px;
    bottom: -10%; left: 24%;
    background: var(--c-glow-3);
}

/* ============ Типографика ============ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    text-wrap: balance;        /* не оставляет висячее слово в последней строке */
}

p { text-wrap: pretty; }

/* Сброс нужен кнопкам, бейджам и логотипу — они ссылки, но выглядят иначе. */
a { text-decoration: none; color: inherit; }

/* Ссылки внутри текста должны читаться как ссылки. Одного цвета мало:
   часть людей не различает его, поэтому подчёркивание обязательно. */
.hero-content p a,
.section-title p a,
.bento-card p a {
    color: var(--c-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (hover: hover) {
    .hero-content p a:hover,
    .section-title p a:hover,
    .bento-card p a:hover {
        color: var(--c-text-primary);
        text-decoration-thickness: 2px;
    }
}

:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

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

.text-gradient {
    background: var(--c-accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Мягкое свечение вместо старого неона */
.neon-glow { text-shadow: 0 0 42px var(--c-accent-glow); }

/* ============ Кнопки (спека приложения) ============ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font);
    font-weight: 600;
    font-size: 15px;
    height: 48px;
    padding: 0 22px;
    border: none;
    border-radius: var(--r-xl);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-primary {
    background: var(--c-accent);
    color: #fff;
    box-shadow: 0 6px 26px var(--c-accent-glow);
}

/* .btn-max — только хук для разметки; Telegram и MAX подаются одинаково */
.btn-secondary {
    background: var(--c-surface-2);
    color: var(--c-text-primary);
    border: 1px solid var(--c-border);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}

/* Все группы CTA живут в одной колонке фиксированной ширины — иначе ряды
   кнопок разной длины расползаются и блок выглядит рваным. */
.btn-group,
.store-badges {
    --cta-col: 340px;
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: var(--cta-col);
    margin-inline: auto;
}

/* Мессенджеры — столбиком во всю ширину колонки, оба одинаковые */
.btn-group { flex-direction: column; }
.btn-group .btn { width: 100%; }

@media (hover: hover) {
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 34px var(--c-accent-glow); }
    .btn-secondary:hover { background: var(--c-surface-4); border-color: var(--c-border-strong); }
}

/* ---- Бейджи магазинов приложений ----
   ОФИЦИАЛЬНЫЕ ассеты Apple и Google. Их нельзя перерисовывать, перекрашивать
   и менять пропорции — задаём только высоту, ширина следует за ней.
   Охранное поле: у ассета Google оно встроено в картинку, у Apple задаём отступом.
   Высоты подобраны так, чтобы ВИДИМАЯ часть бейджей совпадала: у русского
   ассета Google внутреннего поля меньше (0.77 высоты файла), у английского
   больше (0.67), поэтому значения разные. */

.store-badges { align-items: center; }

/* Бейджи заполняют ряд целиком и делят его в пропорции своих ширин
   ПРИ ОДИНАКОВОЙ ВИДИМОЙ ВЫСОТЕ. Соотношения:
     Apple   — 119.66/40                = 2.991
     Google  — (646/250) / 0.768 (RU)   = 3.365
     Google  — (646/250) / 0.672 (EN)   = 3.845
   (делим на долю видимой части в файле — у ассета Google встроено
   охранное поле). Раздаём ширину flex-grow'ом в этих пропорциях:
   бейджи всегда упираются в края колонки, совпадают по видимой высоте
   и масштабируются под любой экран — без media-запросов и без риска
   переполнения. Пропорции картинок не меняются: width 100% + height auto. */
.badge-apple { flex: 2991 1 0; }
.badge-gplay { flex: 3365 1 0; }

html[lang="en"] .badge-gplay { flex: 3845 1 0; }

.badge-apple,
.badge-gplay {
    min-width: 0;
    display: block;
    transition: var(--transition);
}

.badge-apple img,
.badge-gplay img {
    width: 100%;
    height: auto;
    display: block;
}

@media (hover: hover) {
    .badge-apple:hover,
    .badge-gplay:hover { transform: translateY(-2px); }
}

/* ============ Шапка ============ */

header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 14px 0;
    background: rgba(14, 11, 26, 0.72);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border-bottom: 1px solid var(--c-border-subtle);
}

nav { display: flex; align-items: center; justify-content: space-between; }

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
}

.logo img {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    display: block;
}

/* Кнопка в шапке нужна и на мобильном: там она и так основное устройство,
   а раньше при ширине до 769px шапка оставалась с одним логотипом.
   На узких экранах ужимаем её, чтобы не столкнуть с логотипом. */
.nav-cta { display: inline-flex; height: 40px; font-size: 14px; padding: 0 18px; }

@media (max-width: 420px) {
    .nav-cta { height: 36px; font-size: 12px; padding: 0 14px; }
    .logo { font-size: 17px; gap: 8px; }
    .logo img { width: 32px; height: 32px; }
}

/* ============ Hero ============ */

.hero {
    position: relative;
    padding: 44px 0 52px;
    overflow: hidden;
}

.hero > .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

/* Хлебные крошки на внутренних страницах. Дублируют BreadcrumbList
   в разметке — путь должен быть виден и человеку, не только роботу. */
.breadcrumbs {
    font-size: 14px;
    color: var(--c-text-faint);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.breadcrumbs a {
    color: var(--c-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (hover: hover) {
    .breadcrumbs a:hover { color: var(--c-text-primary); }
}

.logo-3d-img {
    width: 112px;
    height: 112px;
    border-radius: var(--r-4xl);
    display: block;
    box-shadow: 0 18px 60px var(--c-accent-glow);
}

/* Текстовый блок плотный, CTA отделён заметнее — так они читаются
   как две группы, а не как пять равноудалённых строк. */
.hero-content { max-width: 760px; display: flex; flex-direction: column; gap: 14px; align-items: center; }

.hero-content h1 {
    font-size: clamp(2rem, 5.2vw, 3.4rem);
    font-weight: 800;
}

.hero-content p {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--c-text-muted);
    max-width: 620px;
}

.hero-sub {
    font-size: 14px;
    color: var(--c-text-faint);
    margin-top: 2px;
}

@media (min-width: 769px) {
    .hero { padding: 64px 0 72px; }
    .hero > .container { gap: 24px; }
    .logo-3d-img { width: 132px; height: 132px; }
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
    margin-top: 16px;   /* +14px от .hero-content = 30px до блока кнопок */
}

/* ============ Заголовки секций ============ */

.section-title { text-align: center; margin-bottom: 28px; }

@media (min-width: 769px) {
    .section-title { margin-bottom: 36px; }
}

.section-title h2 {
    font-size: clamp(1.6rem, 3.6vw, 2.3rem);
    font-weight: 800;
}

/* Подзаголовок стоял по центру на всю ширину контейнера — 129 символов
   в строке. Ограничиваем до примерно 70. */
.section-title p {
    color: var(--c-text-muted);
    margin-top: 8px;
    font-size: 15px;
    max-width: 620px;
    margin-inline: auto;
}

/* ============ Секции ============ */

.features, .gallery, .video-gallery, .faq, .bottom-cta {
    padding: 52px 0;
    position: relative;
    overflow: hidden;
}

@media (min-width: 769px) {
    .features, .gallery, .video-gallery, .faq, .bottom-cta { padding: 72px 0; }
}

/* ============ Bento ============ */

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    /* Карточки в ряду ОДНОЙ высоты (поведение grid по умолчанию, stretch).
       Пробовали align-items: start, чтобы убрать пустоту внутри коротких
       карточек — вышло хуже: низы разъезжались, ряды переставали читаться
       как ряды. Пустота внутри лечится длиной текста, а не выравниванием. */
}

.bento-card {
    /* Поверхность и обводка на ступень выше, чем были (surface-2 / border):
       4% белого давало карточке 1.08:1 к фону, её край было не видно,
       и текст выглядел висящим в темноте.
       БЕЗ box-shadow: тень на элементе с backdrop-filter — известный
       источник артефактов перерисовки в Chromium, а карточки вдобавок
       анимируются при появлении. Край держим фоном и обводкой. */
    background: var(--c-surface-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-3xl);
    padding: 26px;
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    transition: var(--transition);
}

/* Длина строки. В карточке на всю ширину абзац тянулся на 1078px — это
   123 символа в строке при комфортных 45–75. Ограничение заодно делает
   широкую карточку выше, и ряд выравнивается по высоте сам собой. */
.bento-span-2 p,
.bento-span-3 p { max-width: 620px; }

/* Карточка во всю ширину с кнопками каналов. Кнопки в ней по центру, а абзац
   при max-width 620px прижимался к левому краю, и справа зияла пустота.
   Центрируем заголовок и текст заодно с кнопками. Выравнивать высоту тут не с
   чем: такая карточка всегда одна в ряду и последняя, поэтому ограничение
   длины строки работает только на читаемость, а не на сетку. */
.bento-span-3:has(.channel-links) { text-align: center; }
.bento-span-3:has(.channel-links) h3 { justify-content: center; }
.bento-span-3:has(.channel-links) p { margin-inline: auto; }

.bento-card h3 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bento-card p { color: var(--c-text-muted); font-size: 15px; }

/* Номер шага в карточках «как это работает». Без плашки три карточки читались
   как обычная плитка: цифра в начале заголовка тонула в тексте, и глаз не
   видел, что это последовательность. Плашка держит акцент на порядке, не
   перетягивая внимание с самих шагов — поэтому тон приглушённый, а не
   заливка брендовым цветом. */
.step-num {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c-accent-dim);
    border: 1px solid var(--c-accent-border);
    color: var(--c-accent);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

/* Кнопки каналов внутри карточки: колонка на мобильном, две в ряд начиная
   с планшета. Telegram и MAX равнозначны, поэтому оформление одинаковое. */
.channel-links { margin-top: 18px; }

@media (min-width: 601px) {
    .channel-links { --cta-col: 460px; flex-direction: row; }
}

/* Готовые описания для генерации: текст, который копируют целиком,
   поэтому он выделен и разрешён к выделению мышью на всю ширину карточки. */
.prompt {
    font-style: italic;
    line-height: 1.55;
    padding-left: 12px;
    border-left: 2px solid var(--c-accent-border);
}

.bento-span-2 { grid-column: span 2; }
.bento-span-3 { grid-column: span 3; }

.bento-card.is-accent {
    background: var(--c-surface-accent);
    border-color: var(--c-accent-border);
}

@media (hover: hover) {
    /* Ступень вверх от состояния покоя (surface-3 / border-strong) */
    .bento-card:hover { background: var(--c-surface-4); border-color: rgba(255, 255, 255, 0.16); }

    /* Акцентная плитка подсвечивается СВОИМ цветом. Общее правило выше кладёт
       на неё белую поверхность, розовый тон перебивается и плитка сереет —
       ховер выглядит как гашение, а не как подсветка. Шаг подобран тот же,
       что у обычной карточки: +0.06 контраста к фону (1.18 → 1.25). */
    .bento-card.is-accent:hover {
        background: var(--c-accent-dim-hover);
        border-color: rgba(208, 104, 204, 0.34);
    }
}

.badge-new,
.badge-bot {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.badge-new {
    background: var(--c-accent-dim);
    color: var(--c-accent);
    border: 1px solid var(--c-accent-border);
}

.badge-bot {
    background: var(--c-surface-4);
    color: var(--c-text-muted);
    border: 1px solid var(--c-border-medium);
}

/* На двух колонках карточка шириной в две ячейки рвала поток: она не влезала
   в остаток ряда, уезжала вниз, а её сосед оставался один рядом с пустой
   ячейкой. Раскладка [1,1,1,span2,1] встречается на шести страницах и всюду
   давала две дыры посреди сетки. Здесь все карточки равны по ширине, а если
   последняя осталась одна в ряду — она растягивается на оба столбца.
   span-3 (акцентная карточка каналов) остаётся во всю ширину. */
@media (max-width: 900px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-span-2 { grid-column: span 1; }
    .bento-span-3 { grid-column: span 2; }
    .bento-grid > .bento-card:last-child:nth-child(odd) { grid-column: span 2; }

    /* Последняя карточка бывает во всю ширину (акцентный блок про каналы).
       Тогда предыдущая может остаться одна рядом с пустой ячейкой — как на
       главной, где перед ней идёт пять обычных карточек. Растягиваем её тоже.
       :has() поддерживают все актуальные браузеры; в старых просто вернётся
       прежнее поведение, ничего не сломается. */
    .bento-grid:has(> .bento-span-3:last-child) > .bento-card:nth-last-child(2):nth-child(odd) {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-span-2, .bento-span-3 { grid-column: span 1; }
    /* Снимаем правила для двух колонок: в одну колонку span 2 создал бы
       вторую, неявную, и сетка поехала бы вбок. */
    .bento-grid > .bento-card:last-child:nth-child(odd),
    .bento-grid:has(> .bento-span-3:last-child) > .bento-card:nth-last-child(2):nth-child(odd) {
        grid-column: span 1;
    }
    .bento-card { padding: 20px; }
}

/* ============ Галерея фото ============ */

.iso-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.mix {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
}

.mix img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mix.mix-in { opacity: 1; }
.mix.mix-crossfade-out { opacity: 0; transition: opacity 0.4s ease; }
.mix.mix-out { visibility: hidden; }
.mix.mix-hidden { display: none; }

@media (hover: hover) {
    .mix:hover img { transform: scale(1.05); }
}

/* Статическая подборка примеров: восемь карточек ложатся в два ровных ряда
   по четыре, без обрезка последнего ряда, как было бы при пяти колонках. */
.iso-grid--examples { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1200px) { .iso-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .iso-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 600px)  { .iso-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Подборка примеров — фиксированные восемь картинок, а не бесконечная лента,
   поэтому число колонок должно делить восемь. Общее правило переводило её
   на 900px в три колонки и оставляло дыру в углу последнего ряда: 3 + 3 + 2.
   Держим четыре колонки до мобильного, дальше две — оба варианта дают
   ровные ряды. Ставим после медиазапросов, иначе они перебивают. */
@media (max-width: 900px) { .iso-grid--examples { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .iso-grid--examples { grid-template-columns: repeat(2, 1fr); } }

.iso-load-more { text-align: center; margin-top: 32px; }

.iso-load-btn {
    background: var(--c-surface-3);
    border: 1px solid var(--c-border-medium);
    color: var(--c-text-primary);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}

@media (hover: hover) {
    .iso-load-btn:hover { background: var(--c-surface-4); border-color: var(--c-accent-border); }
}

@media (max-width: 768px) {
    .iso-load-btn { width: auto; min-width: 200px; }
}

/* ============ Видео (вторичная секция) ============ */

.video-slider {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.video-card {
    flex: 1 1 220px;
    max-width: 260px;
    aspect-ratio: 9 / 16;
    border-radius: var(--r-3xl);
    overflow: hidden;
    position: relative;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
}

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

    /* Ролик проявляется, когда у него уже есть первый кадр.
       Отдельного постера намеренно нет: две картинки подряд (сначала
       постер-JPEG, следом первый кадр видео) давали заметное мигание,
       потому что снимались они с разных секунд и приезжали почти
       одновременно. Плюс постер пришлось бы держать в синхроне
       с mp4 при каждой замене файла на сервере. Теперь кадр-заглушку
       рисует сам ролик: script.js заранее тянет его метаданные.
       До этого момента видно фон карточки, и переход ровно один. */
    opacity: 0;
    transition: opacity 260ms ease-out;
}

.video-card.is-ready video { opacity: 1; }

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

.video-overlay { position: absolute; inset: 0; pointer-events: none; }

/* На узких экранах ряд превращается в горизонтальную ленту.
   Раньше лишние ролики прятались через display:none — контент был, но его
   не показывали. Лента показывает все и подсказывает о себе краем
   следующей карточки. Пролистанные вбок ролики перестают пересекаться
   с вьюпортом, и наблюдатель в script.js сам ставит их на паузу. */
@media (max-width: 1024px) {
    .video-slider {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 8px;
    }

    .video-card {
        flex: 0 0 auto;
        width: 32%;
        max-width: none;
        scroll-snap-align: center;
    }
}

@media (max-width: 768px) {
    .video-slider { gap: 12px; }
    .video-card { width: 62%; }
}

@media (max-width: 420px) {
    .video-card { width: 72%; }
}

/* ============ Нижний CTA ============ */

.bottom-cta { text-align: center; padding: 40px 0 64px; }

@media (min-width: 769px) {
    .bottom-cta { padding: 56px 0 88px; }
}

.bottom-cta h2 {
    font-size: clamp(1.6rem, 3.6vw, 2.3rem);
    font-weight: 800;
    margin-bottom: 24px;
}

.cta-inner {
    background: var(--c-surface-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-4xl);
    padding: 36px 20px;
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Карточка тянулась на все 1132px, а внутри стояла колонка кнопок в 340px:
   содержимое занимало 30% ширины, рамка обводила в основном пустоту.
   Сужаем карточку и расширяем колонку — выходит около 58%. */
@media (min-width: 769px) {
    .cta-inner {
        padding: 52px 32px;
        max-width: 720px;
        margin-inline: auto;
    }

    .cta-inner .store-badges,
    .cta-inner .btn-group { --cta-col: 420px; }
}

/* ============ Подвал ============ */

footer {
    padding: 36px 0 48px;
    border-top: 1px solid var(--c-border-subtle);
    text-align: center;
    color: var(--c-text-faint);
    font-size: 14px;
}

footer a { color: var(--c-text-muted); text-decoration: underline; text-underline-offset: 3px; }

@media (hover: hover) {
    footer a:hover { color: var(--c-text-primary); }
}

.footer-links { margin-top: 10px; }


.footer-note { font-size: 12px; margin-top: 10px; color: var(--c-text-faint); }

/* ============ Fallback для старых браузеров ============ */

.legacy-mode .glow { display: none; }