/* ============================================================
   Сайт «Вселенная подписок и нейросетей» — витрина, а не админка.

   Тема — глубокий космос, и она же в названии. Островов и пляжа здесь больше
   нет: фон — глубокое поле Хаббла, первый экран — «Космические скалы»
   туманности Киля с «Джеймса Уэбба». Кадры настоящие, не рисованные:
   фотореализм здесь и есть стиль.

   С панелью tg-crm-bot (webapp/static/style.css) сайт делит шрифты
   (Comfortaa для заголовков, Manrope для текста) и логику слоёв, но не
   палитру: панель осталась дневной «лагуной», сайт ушёл в тёмное небо.
   Это сознательный разрыв — витрина продаёт, панель работает.

   Стек нарочно простой: один HTML, один CSS, двести строк JS. Сайт должен
   открываться с флешки, из папки, с любого статического хостинга и не
   ломаться, если что-то не загрузилось.
   ============================================================ */

@font-face {
    font-family: 'Comfortaa'; font-style: normal; font-weight: 300 700; font-display: swap;
    src: url('../fonts/comfortaa-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Comfortaa'; font-style: normal; font-weight: 300 700; font-display: swap;
    src: url('../fonts/comfortaa-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Палитра снята с самих кадров, а не подобрана на глаз: холодная синева
       звёздного неба, тёплый оранжевый пылевых столбов, фиолет туманности.
       Поэтому фотографии и интерфейс выглядят одним кадром, а не картинкой
       в рамке из чужого сайта.

       Пары «-hi» — это те же акценты, но осветлённые для текста. На тёмном
       фоне акцент обязан быть светлее фона, а не темнее: прежние --ocean-deep
       (тёмная лагуна) здесь читались бы как чернильное пятно. */
    --void:       #04050e;   /* самый низ: небо между звёздами */
    --star:       #57c8ff;   /* акцент: линии, активные состояния */
    --star-hi:    #9adcff;   /* тот же акцент для текста и ссылок */
    --star-soft:  rgba(87,200,255,.14);
    --flare:      #ffa24d;   /* только призывы к действию */
    --flare-deep: #ff6a3d;
    --flare-ink:  #23100a;   /* текст на оранжевом: тёмный по светлому, 7.7:1 */
    --stitch:     #a273e0;
    --gold:       #ffcb7a;
    --green:      #45d98d;

    --text:       #e9f0ff;
    --text-dim:   #b6c5e6;
    --text-faint: #8496bd;

    --card:       rgba(12,17,38,.62);
    --card-solid: #0b1024;
    --border:     rgba(140,175,255,.26);
    --border-soft: rgba(140,175,255,.13);

    /* Тени на тёмном почти не читаются, поэтому объём держат не они, а
       подсветка кромки. Тень оставлена, чтобы карточка всё же отрывалась
       от неба, и сделана глубже прежней. */
    --shadow:    0 2px 10px rgba(0,0,0,.45), 0 16px 40px -18px rgba(0,0,0,.75);
    --shadow-lg: 0 26px 70px -20px rgba(0,0,0,.88);

    --radius:    18px;
    --radius-sm: 12px;

    --display: "Comfortaa", "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
    --sans: "Manrope", "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;

    --wrap: 1160px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.62;
    color: var(--text);
    /* Фон — глубокое поле Хаббла: почти чёрное небо и россыпь далёких
       галактик. Слой фиксированный: страница прокручивается, небо стоит на
       месте, и сайт читается как одна сцена, а не как лента разных экранов.
       Ровно так же вёл себя прежний песок — приём остался, кадр сменился. */
    background: var(--void) url('../img/space-bg.webp') center / cover no-repeat fixed;
    -webkit-font-smoothing: antialiased;
}
/* Поверх неба — вуаль с виньеткой. Кадр и так тёмный, но звёзды на нём
   яркие: без вуали строка текста то и дело попадает на белую точку.
   Сверху вуаль слабее — там, где герой, небо должно остаться глубоким.
   z-index: -3 — самый нижний из фиксированных слоёв: выше фотографии,
   но ниже техно-слоя .fx (-2) из motion.css. */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
    background:
        radial-gradient(120% 76% at 50% -6%, rgba(28,40,86,.34) 0%, transparent 62%),
        linear-gradient(180deg, rgba(4,5,14,.40) 0%, rgba(4,5,14,.74) 100%);
}

img { max-width: 100%; display: block; }
a { color: var(--star-hi); }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

/* Экранным читалкам — да, глазам — нет. Для «пропустить к содержимому»
   и подписей у иконок. */
.vh {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--card-solid); color: var(--text);
    border: 1px solid var(--border);
    padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow);
    transition: top .18s;
}
.skip:focus { top: 12px; }

:where(a, button, summary, input, textarea):focus-visible {
    outline: 3px solid var(--star);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ============================================================
   Шапка
   ============================================================ */
.top {
    position: sticky; top: 0; z-index: 40;
    background: rgba(6,9,22,.62);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--border-soft);
}
.top-in { display: flex; align-items: center; gap: 18px; height: 68px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); }
.brand img { width: 38px; height: 38px; border-radius: 11px; box-shadow: var(--shadow); }
/* Название длинное и живёт в две строки, поэтому кегль меньше, а интерлиньяж
   плотный: иначе шапка вырастает и «прилипшее» меню съедает пол-экрана. */
.brand b { display: block; font-family: var(--display); font-size: 15.5px; font-weight: 700; line-height: 1.14; letter-spacing: .1px; }
/* Только подпись под названием, а не любой span внутри .brand: обёртка
   текста — тоже span, и общее правило превращало само название в капслок. */
.brand-txt > span { display: block; font-size: 11.5px; color: var(--text-faint); letter-spacing: .12em; text-transform: uppercase; }

.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a {
    padding: 9px 14px; border-radius: 10px; text-decoration: none;
    color: var(--text-dim); font-weight: 600; font-size: 15px;
}
.menu a:hover { background: var(--star-soft); color: var(--star-hi); }
.menu a.is-here { color: var(--star-hi); background: var(--star-soft); }

.burger {
    display: none; margin-left: auto;
    width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid var(--border); background: rgba(18,24,50,.8);
    cursor: pointer; padding: 0;
}
.burger span, .burger span::before, .burger span::after {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--text); margin-inline: auto; content: "";
}
.burger span::before { transform: translateY(-6px); }
.burger span::after { transform: translateY(4px); }

/* ============================================================
   Кнопки
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 26px; border-radius: 14px;
    font: inherit; font-weight: 700; font-size: 16px;
    text-decoration: none; cursor: pointer; border: 0;
    transition: transform .16s, box-shadow .16s, background-color .16s;
}
.btn:active { transform: translateY(1px); }
/* Тёплый оранжевый — только здесь. Один заметный призыв на экран, иначе
   ни один из них не заметен.

   Текст тёмный по светлому, а не белый по цветному: белым по оранжевому
   выходило 3:1 — ниже нормы AA, и на тёмной странице это читалось как
   выцветшая кнопка. Тёмная надпись по горячему оранжевому даёт 7.7:1 и
   заодно бьёт по глазу сильнее всего остального на экране. */
.btn-cta {
    background: linear-gradient(135deg, var(--flare) 0%, var(--flare-deep) 100%);
    color: var(--flare-ink); box-shadow: 0 10px 30px -10px rgba(255,122,61,.6);
}
.btn-cta:hover { box-shadow: 0 16px 40px -10px rgba(255,140,80,.8); }
.btn-ghost {
    background: rgba(20,27,56,.66); color: var(--text);
    border: 1px solid var(--border); box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(30,40,78,.86); }
.btn-sm { padding: 10px 18px; font-size: 15px; border-radius: 12px; }

/* ============================================================
   Первый экран

   Текст лежит не на фотографии, а на матовой панели рядом с ней: контраст
   перестаёт зависеть от кадра (светлый текст по тёмному стеклу — 14:1), а
   снимок работает окном в небо. Панель тёмная и полупрозрачная, поэтому
   звёзды за ней угадываются — сцена остаётся одной, а не распадается на
   «картинку» и «блок текста».
   ============================================================ */
.hero { position: relative; padding: 0 0 8px; }
.hero-card {
    position: relative; margin-top: 26px;
    display: grid; grid-template-columns: 1.06fr .94fr; gap: 0;
    border-radius: 28px; overflow: hidden;
    background: linear-gradient(150deg, rgba(11,16,38,.86) 0%, rgba(16,12,32,.80) 100%);
    border: 1px solid rgba(140,175,255,.18);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: var(--shadow-lg);
}
/* Снизу карточку на треть перекрывают плитки фактов (у них отрицательный
   margin) — отсюда крупный нижний отступ у текста. */
.hero-text { padding: 46px 44px 74px; }
.hero-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(87,200,255,.10); border: 1px solid rgba(87,200,255,.28);
    color: var(--star-hi);
    padding: 7px 14px; border-radius: 999px;
    font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
}
.hero h1 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(27px, 3.9vw, 44px); line-height: 1.14;
    text-wrap: balance; margin: 18px 0 12px;
}
.hero p { font-size: clamp(16px, 1.5vw, 18.5px); margin: 0 0 26px; color: var(--text-dim); max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { font-size: 14.5px !important; color: var(--text-faint) !important; margin: 18px 0 0 !important; }

.hero-photo { position: relative; min-height: 100%; }
/* object-position ниже середины: сверху у кадра пустое небо, а сцену держат
   гребни пылевых скал и звёздная россыпь над ними. */
.hero-photo picture, .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
/* Стык фотографии с панелью: мягкий переход, чтобы окно не выглядело
   вырезанным ножницами. */
.hero-photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(11,16,38,.94) 0%, rgba(11,16,38,.30) 16%, transparent 38%);
}

/* Полоса доверия под героем */
.facts {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    margin-top: -34px; position: relative; z-index: 2;
}
/* Плашки — ссылки, поэтому здесь сброс: цвет текста наследуется, подчёркивания
   нет. Признак кликабельности не подчёркивание, а подъём и подсветка рамки —
   те же, что у карточек витрины, чтобы страница вела себя одинаково. */
.fact {
    display: block; color: inherit; text-decoration: none;
    background: var(--card); backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--border-soft); border-radius: var(--radius);
    padding: 16px 18px; box-shadow: var(--shadow);
}
/* Подъём и тень при наведении добавляет motion.css — здесь только то, без
   чего плашка не выглядит нажимаемой даже с выключенным слоем движения. */
.fact:hover, .fact:focus-visible {
    border-color: rgba(53,224,255,.34);
    background: var(--card-hi, rgba(18,26,54,.82));
}
.fact .lg { width: 22px; height: 22px; margin-bottom: 8px; }
.fact b { display: block; font-family: var(--display); font-size: 19px; font-weight: 700; }
.fact span { font-size: 13.5px; color: var(--text-faint); }
@media (max-width: 720px) { .fact b { font-size: 17px; } .fact span { font-size: 12.5px; } }

/* Логотип как маска, а не как <img>. Причина: файлы у нас разные — часть
   монохромные (Simple Icons), часть цветные, часть вообще из Викисклада.
   Маска берёт от файла только силуэт, и весь ряд получается одного веса и
   одного цвета. Цвет задаёт --tint, форму — --src. */
.lg {
    display: block; width: 24px; height: 24px; flex-shrink: 0;
    background: var(--tint, var(--text));
    -webkit-mask: var(--src) center / contain no-repeat;
    mask: var(--src) center / contain no-repeat;
}
.lg-telegram { --tint: #4bb3e6; }

/* Пути к логотипам живут ЗДЕСЬ, а не в атрибуте style у элемента. Причина
   практическая: относительная ссылка внутри custom property разрешается
   браузером относительно файла стилей, из которого свойство подставляется, —
   и `url('assets/logos/x.svg')`, написанный в HTML, превращался в
   `assets/css/assets/logos/x.svg`, то есть в 404 на каждый значок. Здесь
   путь считается от styles.css, и это работает одинаково и с диска, и с
   хостинга, и из подпапки. */
/* Пути к значкам живут в отдельном файле assets/css/logos.css: там они
   вписаны строкой data:, потому что маска, загружаемая ссылкой, не
   приезжает при открытии страницы с диска — значки пропадали целиком.
   Подробности и правила правки — в шапке того файла. */


/* СБП и Яндекс Маркет — настоящими файлами, а не маской: у обоих логотип
   цветной (у Маркета) или отрисован как единое чёрное начертание (СБП),
   и перекрашивать его в один тон значит показать не тот знак.

   Отсюда же белая подложка. Оба знака нарисованы для светлого фона: на
   тёмном небе чёрное начертание Маркета просто исчезает, а перекрашивать
   чужой товарный знак нельзя. Белая плашка — то, как эти марки показывают
   на тёмных сайтах банки и маркетплейсы.

   Обоим задаём только высоту: у знака СБП пропорция 2:1 (239×120 в файле),
   у Маркета 5:1 — квадратная коробка сплющивала бы и то и другое. */
.lg-img {
    display: block; margin-bottom: 8px;
    background: #fff; border-radius: 7px; padding: 4px 7px;
}
.lg-sbp    { height: 22px; width: auto; box-sizing: content-box; }
.lg-market { width: 86px; height: auto; box-sizing: content-box; }

.lg-bonus {
    -webkit-mask: none; mask: none; background: none;
    color: var(--gold); width: 24px; height: 24px;
}
.lg-bonus svg { width: 24px; height: 24px; }

/* ============================================================
   Секции
   ============================================================ */
section { padding: 74px 0 8px; }
.sec-head { max-width: 720px; margin-bottom: 30px; }
.sec-head h2 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(25px, 3vw, 34px); line-height: 1.18; margin: 0 0 10px;
}
.sec-head p { margin: 0; color: var(--text-dim); font-size: 17px; }
.eyebrow {
    display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--star); margin-bottom: 10px;
}

/* Разделитель между блоками — вместо линейки и вместо прежней волны: тонкая
   трасса, по которой идёт одна светящаяся точка. Волна на звёздном небе
   читалась бы как оставленный от прошлой темы шов; движение точки делает
   ту же работу — говорит «здесь новая глава» — и не спорит с фоном. */
/* overflow: hidden обязателен: каретка внутри — во всю ширину блока и
   уезжает вправо ровно на свою ширину, то есть за край страницы. Без
   обрезки это давало горизонтальную прокрутку на всём сайте. */
.orbit { position: relative; height: 34px; margin-top: 54px; overflow: hidden; }
.orbit::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%, rgba(87,200,255,.28) 16%, rgba(162,115,224,.42) 50%,
        rgba(87,200,255,.28) 84%, transparent 100%);
}
/* Сам элемент — невидимая каретка во всю ширину полосы, светится только её
   левый край. Так «проценты» в сдвиге считаются от ширины блока, а не от
   размера точки: точка проходит ровно от края до края на любом экране, и
   двигается при этом трансформ, а не left. */
.orbit i { position: absolute; inset: 0; }
.orbit i::before {
    content: ""; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-top: -3px;
    border-radius: 50%; background: var(--star-hi);
    box-shadow: 0 0 14px 3px rgba(87,200,255,.55);
}

/* ---- Витрина: плитки брендов ----

   Плитка повторяет карточку товара на Яндекс Маркете (YM-CARD-BUILDER,
   cards_html.py): градиент бренда → радиальное свечение → зерно → виньетка,
   в центре белый логотип. Так человек, пришедший с Маркета, узнаёт витрину,
   а ушедший отсюда на Маркет узнаёт карточки. Плоскую заливку не используем
   нигде — она выглядит дёшево.

   Обложки брендов и раньше были тёмными — на тёмной странице они наконец
   перестали быть «окошками» и стали частью неба.

   Цвета брендов не выдуманы: --c1/--c2/--glow взяты из brands.py, где они
   закоммичены для генератора карточек. Для сервисов, которых там ещё нет,
   берётся официальный фирменный цвет. */
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tile {
    position: relative; display: flex; flex-direction: column;
    background: var(--card); backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--border-soft); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border); }
.tile-art {
    position: relative; display: grid; place-items: center;
    height: 118px;
    background: linear-gradient(158deg, var(--c1) 0%, var(--c2) 100%);
}
/* Свечение и зерно — двумя слоями поверх градиента. Зерно генерится фильтром
   прямо в data-URI: отдельный файл ради шума на 300 байт заводить незачем. */
.tile-art::before, .tile-art::after { content: ""; position: absolute; inset: 0; }
.tile-art::before {
    background: radial-gradient(circle at 50% 42%, var(--glow) 0%, transparent 62%);
    opacity: .42;
}
.tile-art::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    mix-blend-mode: overlay; opacity: .30;
    box-shadow: inset 0 0 46px rgba(0,0,0,.42);
}
.tile-art .lg {
    position: relative; z-index: 1;
    width: 52px; height: 52px; --tint: #fff;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.34));
}
.tile-body { padding: 16px 18px 4px; flex: 1; }
.tile-body b { display: block; font-family: var(--display); font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.tile-body span { display: block; color: var(--text-dim); font-size: 14.5px; line-height: 1.45; }
.tile-go {
    padding: 12px 18px 16px; font-size: 14.5px; font-weight: 700; color: var(--star-hi);
    display: flex; align-items: center; gap: 6px;
}
.tile-go em { font-style: normal; transition: transform .18s; }
.tile:hover .tile-go em { transform: translateX(4px); }
.tile-tag {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
    padding: 4px 9px; border-radius: 999px;
    background: rgba(6,11,26,.82); color: #7ee8b4;
    border: 1px solid rgba(69,217,141,.36);
}

.b-spotify     { --c1: #143624; --c2: #080e0a; --glow: #1ed760; }
.b-xbox        { --c1: #125816; --c2: #061408; --glow: #39b54a; }
.b-playstation { --c1: #003791; --c2: #00123c; --glow: #0070d1; }
.b-duolingo    { --c1: #1f4a12; --c2: #0a1607; --glow: #58cc02; }
.b-coursera    { --c1: #10346e; --c2: #061128; --glow: #2f6fe4; }
.b-figma       { --c1: #2a1830; --c2: #0d0812; --glow: #a259ff; }
.b-perplexity  { --c1: #0f4a52; --c2: #06181c; --glow: #20b8c9; }
/* Кредиты того же бренда — отдельная палитра. Две плитки с одинаковым
   логотипом и одинаковым градиентом рядом читаются как дубль карточки. */
.b-perplexity-c { --c1: #123143; --c2: #070f16; --glow: #5cc8ff; }
.b-claude      { --c1: #3a2018; --c2: #0e0a09; --glow: #d97757; }
.b-openai      { --c1: #16241f; --c2: #070b0a; --glow: #19c37d; }
.b-gemini      { --c1: #1a2a5e; --c2: #0a1024; --glow: #9b72cb; }
.b-suno        { --c1: #2b2b2f; --c2: #0d0d10; --glow: #9aa1ad; }
/* Добавлены под карусель брендов. Apple, PlayStation, Roblox и Minecraft —
   те же значения, что в brands.py генератора карточек Маркета (bg_top,
   bg_bottom, accent), чтобы плитка на сайте и карточка на Маркете были
   одного цвета. YouTube в генераторе нет: взят фирменный красный #FF0000,
   притушенный до фона той же схемой, что и остальные. */
.b-youtube     { --c1: #3a1013; --c2: #120607; --glow: #ff3d3d; }
.b-apple       { --c1: #2c2c2e; --c2: #0c0c0d; --glow: #f5f5f7; }
.b-roblox      { --c1: #262830; --c2: #0d0e12; --glow: #e22b2a; }
.b-minecraft   { --c1: #588c36; --c2: #16200e; --glow: #7ebe48; }

.shelf-more { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }

/* ---- Карусель брендов ----

   Настоящая карусель, а не бегущая строка: полоса прокручивается пальцем,
   колесом, стрелками и клавиатурой, а элементы «прилипают» к левому краю
   (scroll-snap). Автопрокрутку ведёт site.js и останавливает от любого
   касания — без этого по карточке нельзя было бы попасть.

   Карточки — те же .tile, что на полках выше: одна разметка, один вид
   наведения, ноль дублирующего кода. Здесь у них только фиксированная
   ширина и точка прилипания. */
.car { position: relative; }
.car-track {
    display: flex; gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    /* Верхний отступ — под подъём плитки по наведению (-6px): overflow-x
       заодно обрезает и по вертикали, и без запаса плитка срезалась бы. */
    padding: 10px 2px 18px;
    scrollbar-width: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-card { flex: 0 0 clamp(226px, 24vw, 264px); scroll-snap-align: start; }
/* Описание длиннее, чем на полках, поэтому строк даём больше и высоту
   выравниваем: карусель с карточками разной высоты выглядит поломанной. */
.car-card .tile-body { min-height: 96px; }

.car-arm {
    position: absolute; top: calc(50% - 22px); z-index: 6;
    width: 44px; height: 44px; border-radius: 50%; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(12,18,40,.86); color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow); backdrop-filter: blur(8px);
}
.car-arm svg { width: 20px; height: 20px; }
.car-arm:hover { background: rgba(26,36,72,.94); color: var(--star-hi); }
.car-arm[disabled] { opacity: .28; cursor: default; }
.car-arm--prev { left: 2px; }
.car-arm--next { right: 2px; }

.car-rail { height: 3px; border-radius: 3px; background: rgba(140,175,255,.14); overflow: hidden; }
.car-rail i {
    display: block; height: 100%; width: 30%; border-radius: 3px;
    background: linear-gradient(90deg, var(--star), var(--stitch));
}

/* ---- Орбиты поверх фотографий ----

   Кольцо брендов вокруг туманности. Знаки расставлены по окружности
   (rotateY + translateZ), а вращается вся сцена целиком — поэтому
   плоскость наклонена (rotateX у .ring-tilt) и путь читается эллипсом,
   а не полосой слева направо.

   backface-visibility: hidden прячет ту половину кольца, что сейчас
   отвёрнута: без него знаки с дальней стороны наезжали бы на ближние
   зеркальными и картинка превращалась в кашу.

   Само вращение живёт в motion.css. Не загрузился — кольцо просто стоит
   на месте, а при «уменьшить движение» (в самом низу файла) распадается
   в обычный ряд: там уже не до красоты, там важно прочитать. */
.rings {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; justify-content: space-around;
    padding: 7% 0; pointer-events: none;
}
/* Ширина кольца равна его диаметру, а по краям стоит растворение. Причина
   не в красоте: знак, доехавший до края окружности, повёрнут к нам ребром и
   читается как обломок. Кольцо, обрезанное ровно по диаметру, позволяет
   спрятать эти два положения маской — знак появляется уже развёрнутым и
   исчезает раньше, чем встанет ребром. */
.ring {
    --r: clamp(102px, 14.5vw, 156px);
    perspective: 700px;
    width: calc(var(--r) * 2 + 112px); margin-inline: auto;
    /* Растворение широкое (четверть с каждой стороны) не от щедрости: знак
       встаёт ребром не в самой крайней точке окружности, а заметно раньше —
       на глаз где-то с 60 градусов. Узкая полоска растворения оставляла бы
       на краях по перекошенной плашке. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 74%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 74%, transparent 100%);
}
/* Просвет под подписью больше, чем кажется нужным, и это не щедрость:
   плоскость кольца наклонена, поэтому знак на дальней стороне поднимается
   над дорожкой примерно на четверть радиуса. С коротким отступом он
   наезжал на подпись и закрывал её собой. */
/* Селектор из двух классов, потому что подпись — это <p> внутри первого
   экрана, а там уже висит `.hero p` (кегль абзаца, цвет и нижний отступ).
   Одноклассовое правило проигрывало ему по специфичности, и служебная
   подпись кольца набиралась как обычный текст. */
.rings .ring-cap {
    /* Плашка, а не просто текст: подпись лежит на фотографии, и её кусок
       то и дело приходится на светлое небо или на подсвеченный гребень.
       Тень под буквами эту разницу не вытягивает — проверено на кадре.
       Плашка та же, что у метки «магазин на связи» рядом, поэтому две
       служебные надписи на снимке читаются как одна система. */
    width: fit-content; margin: 0 auto 32px; padding: 4px 11px;
    border-radius: 999px; text-align: center;
    background: rgba(6,12,28,.74); border: 1px solid rgba(53,224,255,.34);
    font-family: var(--mono, ui-monospace, Consolas, monospace);
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: #cdefff;
}
.ring-tilt { transform: rotateX(11deg); transform-style: preserve-3d; }
.ring-stage { position: relative; height: 48px; transform-style: preserve-3d; }
.ring-i {
    position: absolute; left: 50%; top: 0; width: 112px; margin-left: -56px; height: 48px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-radius: 13px; text-decoration: none; pointer-events: auto;
    /* Плашка непрозрачная по цвету, без backdrop-filter: колец на странице
       три, знаков в них два десятка, и матовое стекло на каждом обошлось бы
       дороже всей остальной анимации. */
    background: rgba(8,13,30,.72);
    border: 1px solid rgba(140,175,255,.24);
    box-shadow: 0 8px 22px -12px rgba(0,0,0,.9);
    transform: rotateY(calc(var(--k) * 360deg / var(--n))) translateZ(var(--r));
    backface-visibility: hidden;
}
.ring-i .lg { width: 18px; height: 18px; --tint: #dfe9ff; }
.ring-i b {
    font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
    color: #eaf1ff; white-space: nowrap;
}
.ring-i:hover { border-color: var(--star); background: rgba(14,26,56,.9); }
.ring-i:hover .lg { --tint: var(--star-hi); }

/* Кольцо товаров: в подписи не марка, а тариф — «YouTube Premium» вдвое
   длиннее «YouTube», и в узкой плашке он ломался бы посреди слова. */
.ring--wide { --r: clamp(116px, 16vw, 168px); }
/* Радиус больше — и подъём знака над дорожкой больше: подпись отодвигается
   ровно на эту разницу. */
.ring--wide .ring-cap { margin-bottom: 38px; }
.ring--wide .ring-i { width: 136px; margin-left: -68px; }
.ring--wide { width: calc(var(--r) * 2 + 136px); }

/* Кольца в узкой колонке «О магазине»: тот же механизм, меньше радиус и
   плашки. Ставить туда вертикальное колесо (вращение через верх) я
   пробовал — в колонке 430 px оно читалось хуже горизонтального и требовало
   отдельной маски и отдельной подписи ради сомнительной выгоды. */
.rings--tight { padding: 4% 0; }
.rings--tight .ring { --r: clamp(84px, 10vw, 118px); }
.rings--tight .ring-i { width: 104px; margin-left: -52px; height: 44px; }
.rings--tight .ring-stage { height: 44px; }
.rings--tight .ring { width: calc(var(--r) * 2 + 104px); }
.rings--tight .ring-cap { font-size: 10px; margin-bottom: 22px; }
/* Наклон в узкой колонке мельче: при том же угле знаки поднимались бы
   почти на высоту соседнего кольца, и три подборки слипались в одну. */
.rings--tight .ring-tilt { transform: rotateX(8deg); }

/* ---- Проверить нас: рейтинг и площадки ---- */
.trust { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: stretch; }
.trust-card {
    display: flex; gap: 20px; align-items: center; text-decoration: none; color: inherit;
    background: var(--card); backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--border-soft); border-radius: var(--radius);
    padding: 22px 24px; box-shadow: var(--shadow);
    transition: transform .18s, border-color .18s, box-shadow .18s;
}
.trust-card:hover { transform: translateY(-3px); border-color: var(--border); box-shadow: var(--shadow-lg); }
.trust-score { text-align: center; flex-shrink: 0; }
.trust-score b { display: block; font-family: var(--display); font-size: 46px; font-weight: 700; line-height: 1; }
/* Звёзды золотом и мелко: это подпись к цифре, а не украшение. Ряд из пяти
   крупных звёзд читался бы как обещание «пять из пяти». */
.trust-stars { display: block; margin-top: 4px; font-size: 12px; letter-spacing: 2px; color: var(--gold); }
.trust-txt b { display: block; font-family: var(--display); font-size: 18px; margin-bottom: 4px; }
.trust-txt span { color: var(--text-dim); font-size: 15px; }
.trust-card .lg-market { margin: 0 0 0 auto; align-self: flex-start; }

.trust-nums { display: grid; gap: 10px; }
.trust-nums div {
    display: flex; gap: 12px; align-items: baseline;
    background: var(--card); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm); padding: 13px 18px;
    backdrop-filter: blur(12px) saturate(140%);
}
.trust-nums b { font-family: var(--display); font-size: 21px; font-weight: 700; color: var(--star-hi); flex-shrink: 0; }
.trust-nums span { color: var(--text-dim); font-size: 14.5px; }

.plats { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 12px 0 0; padding: 0; }
.plat {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    background: rgba(10,14,32,.52); backdrop-filter: blur(10px);
    border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    padding: 16px 16px 14px; min-height: 106px;
}
.plat b { font-family: var(--display); font-size: 15.5px; }
.plat > span { color: var(--text-faint); font-size: 13px; line-height: 1.35; margin-top: auto; }
.plat-logo { flex-shrink: 0; }
.plat-logo.lg { width: 26px; height: 26px; }
/* Белая плашка — по той же причине, что у СБП и Маркета в полосе доверия:
   знаки Wildberries и Avito нарисованы для светлого фона, а перекрашивать
   чужой товарный знак нельзя. */
.plat-logo--plate { background: #fff; border-radius: 7px; padding: 5px 8px; width: auto; box-sizing: content-box; }
.plat-link { position: absolute; inset: 0; border-radius: inherit; }
.plat:has(.plat-link) { transition: transform .18s, border-color .18s; }
.plat:has(.plat-link):hover { transform: translateY(-3px); border-color: var(--border); }

/* ---- Вопросы и ответы ----

   На <details>, а не на скрипте: раскрытие работает даже с выключенным
   JS, а поиск браузера и экранная читалка видят ответы целиком, пока они
   свёрнуты. Ради этого блок и не собран каруселью. */
.faq { display: grid; gap: 10px; max-width: 900px; }
.qa {
    background: var(--card); backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--border-soft); border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.qa > summary {
    display: flex; align-items: center; gap: 14px; cursor: pointer;
    padding: 17px 22px; list-style: none;
    font-family: var(--display); font-weight: 700; font-size: 16.5px;
}
.qa > summary::-webkit-details-marker { display: none; }
/* Галочка, а не «+»: у раскрывающегося списка это единственный знак,
   который читается одинаково во всех системах. */
.qa > summary::after {
    content: ""; margin-left: auto; flex-shrink: 0;
    width: 10px; height: 10px; margin-bottom: 4px;
    border-right: 2px solid var(--star); border-bottom: 2px solid var(--star);
    transform: rotate(45deg); transition: transform .25s;
}
.qa[open] > summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.qa[open] { border-color: var(--border); }
.qa-a { padding: 0 22px 18px; }
.qa-a p { margin: 0 0 10px; color: var(--text-dim); font-size: 15.5px; }
.qa-a p:last-child { margin-bottom: 0; }
.qa-a code {
    font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 14px;
    background: rgba(87,200,255,.12); border-radius: 5px; padding: 1px 5px; color: var(--star-hi);
}

/* ---- Баннеры-ссылки ----

   Раскладка «как у Apple»: крупный заголовок по центру, одна строка
   пояснения, ссылка-пилюля — и воздух вокруг. Ни рамок, ни теней, ни
   цветных подложек: работает разница размеров.

   Фон — те же снимки, что и в остальной странице, под тёмной вуалью:
   контраст текста не должен зависеть от того, куда пришлась звезда. */
.bans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ban {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; place-items: center; text-align: center; text-decoration: none;
    color: var(--text); min-height: 320px; padding: 44px 32px;
    border-radius: 26px; border: 1px solid var(--border-soft);
    background-size: cover; background-position: center;
    transition: transform .22s, border-color .22s;
}
.ban--wide { grid-column: 1 / -1; min-height: 340px; }
.ban--tg     { background-image: url('../img/hero-space.webp'); }
.ban--market { background-image: url('../img/about-space.webp'); }
.ban--news   { background-image: url('../img/space-bg.webp'); }
/* Вуаль. Снизу плотнее — там подпись и кнопка. */
.ban::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(5,8,20,.58) 0%, rgba(5,8,20,.74) 58%, rgba(4,6,16,.88) 100%);
}
.ban:hover { transform: translateY(-3px); border-color: var(--border); }
/* Ширина колонки, а не всей плашки: заголовок обязан ломаться там, где
   поставлен <br>, а не там, где кончилось место. У широкого баннера строка
   длиннее — ему и колонка шире. */
.ban-in { display: grid; justify-items: center; gap: 10px; max-width: 32ch; }
.ban--wide .ban-in { max-width: 52ch; }
.ban-kicker {
    font-family: var(--mono, ui-monospace, Consolas, monospace);
    font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--star);
}
.ban-h {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(23px, 2.9vw, 36px); line-height: 1.13; text-wrap: balance;
}
.ban--wide .ban-h { font-size: clamp(26px, 3.6vw, 44px); }
.ban-sub { color: var(--text-dim); font-size: 15.5px; }
.ban-go {
    margin-top: 8px; display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 15.5px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff;
    transition: background-color .18s;
}
.ban:hover .ban-go { background: rgba(255,255,255,.2); }
/* Единственный коралловый призыв в этой связке — путь в бота. */
.ban-go--cta {
    background: linear-gradient(135deg, var(--flare) 0%, var(--flare-deep) 100%);
    color: var(--flare-ink); border-color: transparent;
    box-shadow: 0 10px 30px -10px rgba(255,122,61,.6);
}
.ban:hover .ban-go--cta { background: linear-gradient(135deg, #ffb264 0%, #ff7a4d 100%); }

/* ---- Популярные категории ---- */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cat {
    position: relative; display: flex; flex-direction: column;
    background: var(--card); backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--border-soft); border-radius: var(--radius);
    padding: 24px 24px 20px; box-shadow: var(--shadow);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border); }
.cat h3 { font-family: var(--display); font-size: 19px; font-weight: 700; margin: 16px 0 8px; }
.cat p { margin: 0 0 16px; color: var(--text-dim); font-size: 15.5px; flex: 1; }
.cat-go { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-go a {
    font-size: 14.5px; font-weight: 700; text-decoration: none;
    padding: 8px 14px; border-radius: 10px;
    background: var(--star-soft); color: var(--star-hi);
}
.cat-go a:hover { background: rgba(87,200,255,.24); }
.cat--accent .ic {
    background: linear-gradient(140deg, rgba(255,162,77,.20), rgba(255,162,77,.06));
    border-color: rgba(255,162,77,.30); color: var(--flare);
}

/* ---- Стена брендов ---- */
.brandwall {
    margin-top: 26px; padding: 22px 24px;
    background: rgba(10,14,32,.52); backdrop-filter: blur(10px);
    border: 1px solid var(--border-soft); border-radius: var(--radius);
}
.brandwall-cap { margin: 0 0 16px; color: var(--text-dim); font-size: 15.5px; }
.brandwall-row { display: flex; flex-wrap: wrap; gap: 22px 26px; align-items: center; }
/* Приглушённый один тон: это не витрина логотипов, а ответ на вопрос
   «а моё у вас есть». Цветной ряд из тридцати знаков перетянул бы на себя
   весь экран и подрался бы с плитками выше. */
.brandwall-row .lg { width: 26px; height: 26px; --tint: rgba(182,197,230,.48); }

/* Значок услуги — duotone-SVG, а не эмодзи: эмодзи в каждой системе
   свой, и набор из пяти штук перестаёт быть набором. */
.ic {
    width: 52px; height: 52px; border-radius: 15px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, rgba(87,200,255,.20), rgba(87,200,255,.05));
    border: 1px solid rgba(87,200,255,.24);
    color: var(--star-hi);
}
.ic svg { width: 26px; height: 26px; }
.card--accent .ic {
    background: linear-gradient(140deg, rgba(255,162,77,.20), rgba(255,162,77,.06));
    border-color: rgba(255,162,77,.30); color: var(--flare);
}
.tag {
    position: absolute; top: 18px; right: 18px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(69,217,141,.14); color: #7ee8b4;
}

/* ---- Как это работает ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.step {
    background: var(--card); backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--border-soft); border-radius: var(--radius);
    padding: 26px 24px; box-shadow: var(--shadow); position: relative;
}
.step::before {
    counter-increment: step; content: counter(step);
    font-family: var(--display); font-weight: 700; font-size: 15px;
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; margin-bottom: 14px;
    /* Тёмная цифра по светлому кружку: белым по голубому получалось 2:1. */
    background: var(--star); color: #06121e;
}
.step h3 { font-family: var(--display); font-size: 18px; margin: 0 0 8px; }
.step p { margin: 0; color: var(--text-dim); font-size: 15.5px; }

/* ---- О магазине ---- */
.about { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: start; }
.about-list { display: grid; gap: 12px; }
.about-item {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--card); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm); padding: 16px 18px; box-shadow: var(--shadow);
    backdrop-filter: blur(12px) saturate(140%);
}
.about-item .ic { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
.about-item .ic svg { width: 20px; height: 20px; }
.about-item b { display: block; margin-bottom: 3px; }
.about-item span { color: var(--text-dim); font-size: 15px; }
/* Кадр вертикальный (460×1300), поэтому высоту задаём пропорцией. Без неё
   картинка разворачивалась во всю натуральную длину и растягивала секцию
   на два экрана пустоты. */
.about-photo {
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
    aspect-ratio: 3 / 4; max-height: 520px;
    position: sticky; top: 92px;
    border: 1px solid var(--border-soft);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Контакты ----

   Карточка — срез туманности: от холодной синевы к фиолету, те же два цвета,
   что в кадре первого экрана. Свечение под градиентом рисует motion.css
   (::before, оно ещё и плывёт), здесь остаётся звёздная пыль (::after) —
   она нужна и без слоя движения, иначе плашка выглядит плоской заливкой. */
.contact {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: center;
    background: linear-gradient(150deg, rgba(23,54,112,.92) 0%, rgba(58,32,104,.94) 62%, rgba(94,38,86,.92) 100%);
    color: #fff; border-radius: 24px; padding: 38px 40px;
    border: 1px solid rgba(140,175,255,.22); box-shadow: var(--shadow-lg);
}
.contact::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background:
        radial-gradient(1.6px 1.6px at 18% 28%, rgba(255,255,255,.9) 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 74% 16%, rgba(255,255,255,.7) 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 46% 76%, rgba(255,255,255,.6) 50%, transparent 51%),
        radial-gradient(1.6px 1.6px at 88% 62%, rgba(255,255,255,.55) 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 8% 68%, rgba(255,255,255,.5) 50%, transparent 51%);
}
/* Скобка HUD в левом верхнем углу — та же деталь, что на фотографии первого
   экрана: она связывает карточку с остальной страницей.

   Селектор с родителем не для красоты: в motion.css стоит
   `.contact > * { position: relative }` (поднимает содержимое над свечением),
   и одиночный класс он перебивал — скобка вставала в поток и занимала
   половину карточки. */
.contact > .contact-hud {
    position: absolute; left: 18px; top: 18px; width: 34px; height: 34px;
    border-left: 1.5px solid rgba(150,220,255,.55);
    border-top: 1.5px solid rgba(150,220,255,.55);
    border-radius: 8px 0 0 0;
}
.contact-main, .contact-side { position: relative; z-index: 1; }
.contact h2 { font-family: var(--display); font-size: clamp(23px, 2.6vw, 30px); margin: 0 0 10px; }
.contact p { margin: 0 0 20px; color: rgba(255,255,255,.92); max-width: 46ch; }
.contact .btn-ghost { background: #fff; color: #0b1024; border-color: transparent; }
.contact .btn-ghost:hover { background: #eaf2ff; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.eyebrow--on-dark { color: #bfe4ff; }

.contact-side { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* Строка контакта. Три колонки: знак, две строки текста, стрелка. Стрелка
   отдельной колонкой, а не в потоке текста, — иначе она прыгает по вертикали
   вслед за длиной подписи. */
.crow {
    display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 13px;
    padding: 11px 14px; border-radius: 14px; text-decoration: none; color: #fff;
    background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.18);
}
a.crow:hover, a.crow:focus-visible { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.34); }
a.crow:hover .crow-go { transform: translateX(3px); opacity: 1; }
.crow-ic {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(8,14,32,.44); color: #cfe6ff;
}
.crow-ic .lg { width: 20px; height: 20px; --tint: #fff; }
.crow-ic svg { width: 19px; height: 19px; }
/* Знак Маркета цветной и нарисован под светлый фон — ему белая плашка, как
   и везде на сайте; перекрашивать чужой знак нельзя. */
.crow-ic--plate { background: #fff; padding: 0 6px; }
.crow-ic--plate img { display: block; width: 100%; height: auto; }
.crow-txt b { display: block; font-size: 14.5px; line-height: 1.3; }
.crow-txt em {
    font-style: normal; font-size: 13px; color: rgba(255,255,255,.74);
    /* Ник — служебная строка, поэтому моноширинный: так его видно как адрес,
       а не как продолжение фразы. */
    font-family: var(--mono, ui-monospace, Consolas, monospace);
}
.crow-go { opacity: .55; font-size: 17px; transition: transform .18s ease, opacity .18s ease; }
/* Часы ответа — не ссылка. Пунктир и прозрачный фон говорят это до нажатия. */
.crow--plain { background: transparent; border-style: dashed; border-color: rgba(255,255,255,.24); }
.crow--plain .crow-txt em { font-family: inherit; }

/* ---- Подвал ---- */
footer.site {
    margin-top: 64px; padding: 30px 0 40px;
    border-top: 1px solid var(--border-soft); color: var(--text-faint); font-size: 14.5px;
}
.foot-in { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.foot-links { display: flex; flex-wrap: wrap; gap: 16px; }
.foot-links a { color: var(--text-dim); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
/* Сведения о продавце. Пары «что — значение» списком определений, а не
   сплошной строкой: реквизиты читают выборочно (нашёл ОГРНИП — проверил в
   реестре), и в стене текста это неудобно. Колонки растекаются сами, на
   узком экране пара встаёт в строку. */
.foot-req {
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft);
    font-size: 13px; color: var(--text-faint);
}
.foot-req dl {
    margin: 0; display: grid; gap: 14px 28px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
/* Подпись над значением, а не слева от него: значения тут разной длины (от
   номера в 15 цифр до названия инспекции в две строки), и при подписи сбоку
   колонка рвалась по-разному в каждой ячейке. */
.foot-req dt {
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.4); margin-bottom: 3px;
}
.foot-req dd { margin: 0; color: var(--text-dim); line-height: 1.45; }
.foot-req a { color: var(--text-dim); }
.foot-req a:hover { color: var(--text); }

/* Сноски. Мелкие, но обязаны быть: логотипы чужие и показаны только чтобы
   объяснить ассортимент; кадры — NASA/ESA/STScI, и по их правилам нельзя
   выдавать агентство за партнёра; а цифра рейтинга живёт на площадке и
   меняется — значит, у неё должна стоять дата. */
/* Ширину ограничивает абзац, а не блок: у блока класс .wrap, и своя max-width
   вместе с margin: 0 выбивала сноски из общей колонки — текст уезжал к самому
   краю окна. */
.foot-note { margin-top: 18px; }
.foot-note p { margin: 0 0 8px; max-width: 92ch; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
.foot-note p:last-child { margin-bottom: 0; }

/* ============================================================
   Экраны поменьше
   ============================================================ */
/* «Уменьшить движение» — кольца перестают быть кольцами.

   Просто остановить вращение мало: в стоячем кольце половина знаков
   отвёрнута (backface-visibility) и не видна вовсе, а боковые стоят ребром.
   Человек, попросивший меньше движения, получил бы вместо подборки три
   читаемых значка из восьми. Поэтому здесь трёхмерность снимается целиком
   и кольцо раскладывается обычным рядом.

   Правило намеренно стоит ВНЕ `@media (prefers-reduced-motion: no-preference)`
   из motion.css — это его зеркальная половина, и без неё блок бы пропал. */
@media (prefers-reduced-motion: reduce) {
    /* relative, а не static: z-index работает только у позиционированных
       элементов, и в обычном потоке слой уезжал под фотографию — плашки
       знаков ещё как-то пробивались, а подписи пропадали совсем. */
    .rings {
        position: relative; inset: auto; z-index: 3;
        padding: 0; display: block; margin-top: 14px;
    }
    /* Селекторы здесь нарочно из двух классов. У колец есть варианты
       (.ring--wide, .rings--tight), и они задают свою ширину, свои плашки и
       отрицательные поля — правило из одного класса они бы перебили, а
       отрицательное поле в разложенном ряду складывает знаки стопкой.

       Маску снимаем вместе с трёхмерностью: она рассчитана на окружность и
       в ряду просто гасила крайние знаки каждой строки. */
    .rings .ring {
        perspective: none; width: auto; margin-bottom: 12px;
        -webkit-mask-image: none; mask-image: none;
    }
    .rings .ring-cap { margin-bottom: 8px; }
    .rings .ring-tilt, .rings .ring-stage { transform: none; height: auto; }
    /* Кольца в «О магазине» при этом убираются совсем: колонка там жёстко
       обрезана по высоте (aspect-ratio + overflow), и разложенный ряд из
       восемнадцати знаков в неё не влезает — он просто уходил под обрез.
       Те же бренды остаются в кольцах первого экрана, в карусели и в стене
       значков, так что показать их всё равно есть где. */
    .rings--tight { display: none; }
    .rings .ring-stage { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
    .rings .ring-i {
        position: static; margin: 0; width: auto; height: auto;
        flex-direction: row; gap: 7px; padding: 8px 12px;
        transform: none; backface-visibility: visible;
    }
    /* Кадр остаётся фоном, а ряд знаков ложится под него: поверх фотографии
       статичный список читался бы хуже, чем рядом с ней. */
    .hero-photo .rings, .about-photo .rings { background: rgba(6,10,24,.72); }
    /* Разложенные ряды начинаются от самого верха кадра и налезали на метку
       «магазин на связи» — она приколота к правому верхнему углу. */
    .hero-photo .rings { padding-top: 44px; }
}

@media (max-width: 1000px) {
    .shelf, .cats, .steps { grid-template-columns: repeat(2, 1fr); }
    .facts { grid-template-columns: repeat(2, 1fr); }
    .about, .contact { grid-template-columns: 1fr; }
    .trust { grid-template-columns: 1fr; }
    .plats { grid-template-columns: repeat(3, 1fr); }
    /* Меню из шести пунктов при узком окне поджимается, иначе оно наезжает
       на двухстрочное название магазина. */
    .menu a { padding: 9px 10px; font-size: 14.5px; }
}
@media (max-width: 860px) {
    /* Фотография уезжает под текст: в узкой колонке она превращалась
       в вертикальную полоску, по которой уже не понять, что там снято. */
    .hero-card { grid-template-columns: 1fr; }
    .hero-photo { order: -1; height: 220px; min-height: 0; }
    .hero-photo::after { background: linear-gradient(0deg, rgba(11,16,38,.94) 0%, transparent 46%); }
    /* В полосе 220 px два кольца встают друг на друга и превращаются в
       мельтешение поверх кадра. Подборки на телефоне никуда не деваются:
       ровно те же бренды лежат ниже — каруселью и стеной значков. */
    .hero-photo .rings { display: none; }
    .ban--wide .ban-h { font-size: clamp(24px, 5vw, 34px); }
}
@media (max-width: 720px) {
    body { font-size: 16px; }
    .burger { display: block; }
    .menu {
        position: absolute; left: 0; right: 0; top: 68px;
        flex-direction: column; gap: 2px; padding: 10px 16px 16px;
        /* Сплошной цвет, не полупрозрачный: у .top включён backdrop-filter,
           он создаёт свою группу композитинга, и любая альфа у вложенной
           шторки давала просвечивающий сквозь меню герой. */
        background: #080c1c; border-bottom: 1px solid var(--border-soft);
        box-shadow: var(--shadow-lg); display: none;
    }
    .menu.is-open { display: flex; }
    .menu a { padding: 12px 14px; font-size: 16px; }
    .hero-card { border-radius: 22px; }
    .hero-text { padding: 26px 22px 56px; }
    .facts { margin-top: -22px; }
    .cats, .steps { grid-template-columns: 1fr; }
    /* Плитки витрины на телефоне остаются по две: они компактные, а в одну
       колонку шесть штук превращаются в бесконечную ленту. */
    .shelf { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .tile-art { height: 92px; }
    .tile-art .lg { width: 40px; height: 40px; }
    .tile-body { padding: 13px 14px 2px; }
    .tile-body b { font-size: 15.5px; }
    .tile-body span { font-size: 13.5px; }
    .tile-go { padding: 10px 14px 14px; font-size: 13.5px; }
    .brandwall-row { gap: 18px 20px; }
    .brandwall-row .lg { width: 22px; height: 22px; }
    section { padding-top: 54px; }
    .contact { padding: 28px 24px; }
    /* Скобка HUD рисуется в поле отступа, а на телефоне отступ узкий —
       угол налезал бы на надпись «Поддержка». */
    .contact-hud { display: none; }
    /* Карусель: стрелки убираем — палец листает лучше любой кнопки, а две
       круглые накладки на узком экране закрывают собой пол-карточки. */
    .car-arm { display: none; }
    .car-card { flex-basis: 74vw; }
    .car-card .tile-body { min-height: 0; }
    .plats { grid-template-columns: repeat(2, 1fr); }
    .plat { min-height: 96px; }
    .trust-card { flex-wrap: wrap; gap: 14px; }
    .trust-card .lg-market { margin-left: 0; }
    .bans { grid-template-columns: 1fr; }
    .ban { min-height: 260px; padding: 36px 24px; }
    .ban--wide { min-height: 280px; }
    .qa > summary { padding: 15px 18px; font-size: 15.5px; }
    .qa-a { padding: 0 18px 16px; }
    /* Вертикальное колесо в «О магазине» на телефоне остаётся: колонка там
       становится широкой, и знаки читаются лучше, чем на первом экране. */
    .ring--v { --r: 104px; }
    /* На телефоне фиксированный фон в Safari прыгает при прокрутке —
       здесь он не нужен, экран всё равно короткий. */
    body { background-attachment: scroll; }

    /* Служебные подписи капсом набраны мелко намеренно, но 10–11 px на
       телефоне уже не читаются — поднимаем только их и только здесь. */
    .hud-tag, .tile-tag, .tag { font-size: 12px; }

    /* Плашка над заголовком должна умещаться в одну строку: зелёная точка
       «мы на связи» — это ::after в конце строки, и при переносе она
       остаётся одна на второй строке, оторванная от слов. */
    .hero-kicker { font-size: 12.5px; padding: 6px 12px; gap: 7px; }
    .brand-txt > span { font-size: 12px; }
    /* Селектор с двумя классами не случайно: базовые размеры подписи заданы
       через `.rings .ring-cap` и `.rings--tight .ring-cap`, одиночный класс
       им проигрывает по специфичности и правило молча не срабатывает. */
    .rings .ring-cap,
    .rings--tight .ring-cap { font-size: 12px; letter-spacing: .1em; }
    .foot-req dt { font-size: 12px; }
}

/* ─── Пальцевые размеры ───────────────────────────────────────────────────
   Не по ширине экрана, а по способу ввода: планшет 768 и тач-ноутбук шире
   любого «мобильного» порога, но тыкают в них тем же пальцем, который
   попадает примерно в 44 px. Мышь при этом попадает в любую точку, поэтому
   на десктопе кнопки остаются компактными — иначе страница раздувается.
   Внешний вид не меняется: растёт только область нажатия. */
@media (hover: none) and (pointer: coarse) {
    .cat-go a {
        display: inline-flex; align-items: center;
        min-height: 44px; padding: 8px 16px;
    }

    /* Ссылки подвала стоят строкой и по высоте равны строчке текста —
       мышью это цель, пальцем нет. */
    .foot-links { gap: 2px 18px; }
    .foot-links a { padding: 10px 0; }

    /* Адрес бота в реквизитах — единственная ссылка в том блоке, и по ней
       действительно жмут: там же человек читает, кто продавец. */
    .foot-req a { display: inline-block; padding: 5px 0; }
}

/* ─── Самые узкие экраны (iPhone SE и старые андроиды) ────────────────────
   320 px — это 288 px под содержимое. Название магазина в шапке длинное и
   на такой ширине рвётся на три строки, из-за чего логотип «съезжает»
   относительно текста, а шапка отъедает четверть первого экрана. */
@media (max-width: 380px) {
    .brand b { font-size: 14px; }
    /* Подпись «цифровой магазин» здесь отбирает строку у самого названия и
       ничего не добавляет: то же самое сказано словом «магазин» рядом. */
    .brand-txt > span { display: none; }
    .hero-kicker { font-size: 11.5px; letter-spacing: 0; }
}