/* ============================================================================
   Маркетплейс навыков ИИ-агента — /marketplace-skill
   Префикс .gx-* (galaxy). Грузится ПОСЛЕ site.css.

   ВАЖНО ПРО ПОРЯДОК: этот файл подключается после site.css, поэтому любой
   override сетки без медиа-запроса перебивает мобильные правила базы.
   Пишем mobile-first, десктопные раскладки — только внутри @media.

   Дизайн: витрина остаётся собой (светлая основа, тёмные кино-полосы,
   --g1..--g5). Своя палитра только у одной зоны — неба: звёздам нужен
   настоящий чёрный, иначе свечение не читается.
   ============================================================================ */

:root {
    /* ── Небо ───────────────────────────────────────────────────────────── */
    --gx-void: #06070d;                  /* дно неба, углы */
    --gx-deep: #0b0d1a;                  /* центр — синеватый уход в холод */
    --gx-dust: #8c93b8;                  /* пыль и служебные линии */
    --gx-core: #ffffff;                  /* ядро звезды и кольцо выделения */
    --gx-plate: hsl(240 24% 8% / .62);   /* стекло панелей над небом */
    --gx-rule: hsl(0 0% 100% / .13);     /* гравированные hairline-линейки */

    /* Гравированная подпись — типографическая память страницы.
       Повторяется в шести местах, поэтому это токен, а не набор правил. */
    --gx-label-size: 11px;
    --gx-label-track: .22em;

    --gx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Текст только для скринридера. В site.css такого класса нет (он живёт
   в agents.css, а тот на этой странице не подключён) — без своего объявления
   «скрытая» подпись поля поиска рисуется прямо в интерфейсе. */
.gx-page .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ═══════════ ГРАВИРОВАННАЯ ПОДПИСЬ ═══════════ */

.gx-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font: 600 var(--gx-label-size) / 1.4 var(--font-display);
    letter-spacing: var(--gx-label-track);
    text-transform: uppercase;
    color: hsl(250 30% 78%);
}

.gx-eyebrow::before {
    content: "";
    flex: none;
    width: 22px;
    height: 1px;
    background: var(--grad-brand);
}

.gx-eyebrow--dark { color: var(--muted); }

/* На этой странице eyebrow секций — тоже гравировка, а не Golos из базы:
   один приём, повторённый системно, и есть узнаваемость. */
.gx-page .section__eyebrow {
    font-family: var(--font-display);
    font-size: var(--gx-label-size);
    letter-spacing: var(--gx-label-track);
}

/* ═══════════ 1. НЕБО ═══════════ */

.gx-band {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: clamp(40px, 7vw, 76px) 0 0;
    background: var(--gx-void);
    color: var(--dark-fg);
    /* CLS: полоса держит высоту до того, как приложение вставит canvas.
       Резерв обязателен на каждом брейкпоинте — на витрине это выстрадано. */
    min-height: 620px;
}

.gx-band__sky {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 90% at 50% 42%, var(--gx-deep) 0%, var(--gx-void) 72%),
        var(--gx-void);
}


.gx-band__inner {
    width: min(1240px, 100% - 40px);
    margin-inline: auto;
    display: grid;
    gap: clamp(28px, 5vw, 44px);
}

/* ── Лид: H1, описание, поиск ── */

.gx-lede { max-width: 44rem; }

.gx-lede h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.95rem, 4.6vw, 3.45rem);
    line-height: 1.08;
    letter-spacing: -.028em;
    text-wrap: balance;
    color: #fff;
}

.gx-lede__text {
    margin: 20px 0 0;
    max-width: 34em;
    font-size: clamp(15.5px, 1.6vw, 18px);
    line-height: 1.6;
    color: hsl(250 18% 80%);
}

/* ── Поиск: главный CTA страницы, а не поле сбоку ── */

.gx-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 26px 0 0;
    padding: 6px 6px 6px 16px;
    border: 1px solid hsl(0 0% 100% / .16);
    border-radius: var(--radius-pill);
    background: var(--gx-plate);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

.gx-search:focus-within {
    border-color: hsl(0 0% 100% / .4);
    box-shadow: 0 0 0 4px hsl(280 60% 60% / .18);
}

.gx-search__icon { flex: none; color: hsl(250 24% 72%); }

.gx-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 0;
    border: 0;
    background: none;
    color: #fff;
    /* 16px — минимум, ниже которого iOS зумит страницу при фокусе. */
    font: 400 16px/1.3 var(--font-body);
    outline: none;
}

.gx-search input::placeholder { color: hsl(250 16% 60%); }
.gx-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

.gx-search__go {
    flex: none;
    padding: 12px 22px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--grad-cta);
    color: #fff;
    font: 600 15px/1 var(--font-body);
    cursor: pointer;
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

.gx-search__go:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px hsl(320 75% 50% / .7);
}

.gx-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: baseline;
    margin: 14px 0 0;
    font-size: 13.5px;
    color: hsl(250 14% 62%);
    min-height: 22px;
}

.gx-hints a {
    color: hsl(250 30% 84%);
    text-decoration: none;
    border-bottom: 1px dashed hsl(0 0% 100% / .22);
    transition: color .18s, border-color .18s;
}

.gx-hints a:hover { color: #fff; border-color: hsl(0 0% 100% / .55); }

/* ── Плита карты ── */

.gx-plate {
    position: relative;
    margin: 0;
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--gx-rule);
    /* Пока постера нет (или он не загрузился), плита обязана читаться как ночное
       небо, а не как пустой прямоугольник: слабое ядро + звёздная крошка. */
    background:
        radial-gradient(1.5px 1.5px at 18% 24%, hsl(250 30% 88% / .55), transparent),
        radial-gradient(1.5px 1.5px at 72% 16%, hsl(250 30% 88% / .4), transparent),
        radial-gradient(2px 2px at 41% 62%, hsl(300 40% 88% / .5), transparent),
        radial-gradient(1.5px 1.5px at 84% 71%, hsl(200 40% 88% / .45), transparent),
        radial-gradient(1.5px 1.5px at 29% 84%, hsl(30 50% 88% / .4), transparent),
        radial-gradient(60% 55% at 38% 42%, hsl(280 45% 22% / .8), transparent 70%),
        radial-gradient(55% 50% at 68% 62%, hsl(210 50% 20% / .7), transparent 70%),
        radial-gradient(100% 90% at 50% 45%, var(--gx-deep) 0%, var(--gx-void) 76%);
    /* CLS: пропорция держит место под canvas и постер.
       min-height вместе с aspect-ratio НЕ ставим на десктопе — он превращается
       в минимальную ШИРИНУ и выдавливает плиту за пределы колонки сетки. */
    aspect-ratio: 4 / 5;
    min-height: 420px;
    max-height: 68svh;
}

.gx-plate__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gx-plate__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Canvas вставляется в DOM ПОСЛЕ подписи и при равном z-index закрашивает
       её целиком — счётчик и подсказка управления просто исчезали, как только
       карта оживала. Поднимаем над картой, но не перехватываем указатель:
       по этой полосе тоже надо иметь возможность тащить карту. */
    z-index: 3;
    pointer-events: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    padding: 26px 18px 13px;
    font: 600 10.5px/1.4 var(--font-display);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: hsl(250 20% 74%);
    background: linear-gradient(180deg, transparent, hsl(240 30% 4% / .82));
}

/* Точка-разделитель между частями подписи: без неё «570 из 570 17 созвездий»
   читается как одна бессмысленная строка цифр. */
.gx-plate__cap span + span::before {
    content: "·";
    margin-right: 16px;
    color: hsl(250 14% 42%);
}

/* ── Живая карта: canvas и слой подписей ── */

.gx-sky {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: pan-y;             /* страница листается пальцем сквозь карту */
    cursor: grab;
    opacity: 0;
    transition: opacity .3s var(--ease-out);
}

.gx-plate.is-live .gx-sky { opacity: 1; }
.gx-sky:active { cursor: grabbing; }

/* Постер уходит, когда карта ожила: он свою работу сделал (LCP, плейсхолдер,
   размер плиты) и дальше только мешает читать звёзды. */
.gx-plate.is-live .gx-plate__poster {
    opacity: 0;
    transition: opacity .3s var(--ease-out) .2s;
}

/* Подписи — DOM поверх canvas: нулевая стоимость рисования, настоящий
   хинтинг шрифта и возможность выделить текст. */
.gx-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity .11s linear;
}

/* Во время движения камеры подписи не пересчитываются и не ползут по экрану. */
.gx-labels.is-moving { opacity: 0; }

.gx-lab {
    position: absolute;
    top: 0;
    left: 0;
    padding: 3px 7px;
    border-radius: 6px;
    background: hsl(240 30% 4% / .72);
    color: hsl(250 25% 92%);
    font: 400 11.5px/1.25 var(--font-body);
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .07);
}

.gx-lab--cat {
    padding: 4px 9px;
    color: var(--ac, #fff);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--gx-label-size);
    letter-spacing: var(--gx-label-track);
    text-transform: uppercase;
    transform-origin: center;
}

/* Данные не доехали — постер остаётся, страница работает дальше. */
.gx-plate.is-offline .gx-plate__cap::after {
    content: " · карта в статичном виде";
    color: hsl(35 60% 70%);
}

.gx-plate__hint { color: hsl(250 14% 50%); }

.gx-hint--touch { display: none; }

@media (hover: none) {
    .gx-hint--mouse { display: none; }
    .gx-hint--touch { display: inline; }
}

/* ── Рельс разделов ── */

.gx-rail {
    display: flex;
    gap: 8px;
    width: min(1240px, 100% - 40px);
    margin: 18px auto 0;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* CLS: рельс серверный, но резерв всё равно нужен — шрифт грузится позже. */
    min-height: 44px;
}

.gx-rail::-webkit-scrollbar { display: none; }

.gx-rail__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    scroll-snap-align: start;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid hsl(0 0% 100% / .13);
    border-radius: var(--radius-pill);
    background: var(--gx-plate);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: hsl(250 20% 84%);
    text-decoration: none;
    font-size: 13.5px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .18s, color .18s, background .18s;
}

.gx-rail__item i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ac);
    transition: transform .18s var(--ease-out);
}

.gx-rail__item b { color: hsl(250 14% 58%); font-weight: 600; font-size: 12px; }

.gx-rail__item:hover { border-color: var(--ac); color: #fff; }
.gx-rail__item:hover i { transform: scale(1.4); }

.gx-rail__item.is-active {
    background: color-mix(in oklab, var(--ac) 20%, hsl(240 24% 8% / .8));
    border-color: var(--ac);
    color: #fff;
}

/* ── Панель карточки ── */

.gx-panel {
    position: relative;
    width: min(1240px, 100% - 40px);
    margin: 16px auto 0;
    padding: 22px 24px 24px;
    border: 1px solid var(--gx-rule);
    border-radius: var(--radius);
    background: var(--gx-plate);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    color: var(--dark-fg);
    /* Только opacity: сдвиг и масштаб на панели с текстом читаются как лаг,
       а участие в сетке дёргало бы всю страницу при открытии. */
    animation: gx-panel-in .12s linear;
}

@keyframes gx-panel-in { from { opacity: 0 } to { opacity: 1 } }

.gx-panel__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid hsl(0 0% 100% / .14);
    border-radius: 50%;
    background: transparent;
    color: hsl(250 20% 78%);
    cursor: pointer;
}

.gx-panel__close:hover { background: hsl(0 0% 100% / .08); color: #fff; }

.gx-panel__cat {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font: 600 var(--gx-label-size) / 1 var(--font-display);
    letter-spacing: var(--gx-label-track);
    text-transform: uppercase;
    color: var(--ac, var(--gx-dust));
}

.gx-panel__cat i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ac);
}

.gx-panel__title {
    margin: 0 44px 10px 0;
    font: 600 clamp(1.15rem, 2.6vw, 1.6rem) / 1.25 var(--font-display);
    letter-spacing: -.018em;
    color: #fff;
}

.gx-panel__title:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.gx-panel__desc {
    margin: 0 0 18px;
    max-width: 52em;
    font-size: 15px;
    line-height: 1.6;
    color: hsl(250 18% 80%);
}

.gx-panel__meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 18px;
    margin: 0 0 18px;
    font-size: 14px;
}

.gx-panel__meta dt {
    font: 600 10.5px/1.6 var(--font-display);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: hsl(250 14% 56%);
}

.gx-panel__meta dd { margin: 0; color: hsl(250 18% 84%); }

.gx-panel__meta code {
    padding: 2px 8px;
    border-radius: 7px;
    background: hsl(0 0% 100% / .08);
    font: 400 13px/1.4 var(--gx-mono);
}

.gx-panel__nearhead {
    margin: 0 0 8px;
    font: 600 10.5px/1 var(--font-display);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: hsl(250 14% 56%);
}

.gx-panel__near {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.gx-panel__near button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid hsl(0 0% 100% / .12);
    border-radius: var(--radius-pill);
    background: transparent;
    color: hsl(250 20% 84%);
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color .18s, color .18s;
}

.gx-panel__near button i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ac);
}

.gx-panel__near button:hover { border-color: var(--ac); color: #fff; }

.gx-panel__add.is-in {
    background: color-mix(in oklab, var(--g5) 80%, #0a2a08);
    box-shadow: none;
}

/* ── Липкая полоса корзины ── */

/* display:flex перебивает браузерное [hidden]{display:none} — без явного
   правила пустая корзина висит на экране постоянно. */
.gx-dock[hidden],
.gx-panel[hidden] { display: none; }

.gx-dock {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 20px;
    border-radius: var(--radius-pill);
    background: hsl(240 24% 8% / .9);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid hsl(0 0% 100% / .12);
    box-shadow: var(--shadow-pop);
    color: #fff;
    font-size: 14.5px;
    animation: gx-dock-in .28s var(--ease-out);
}

@keyframes gx-dock-in {
    from { opacity: 0; transform: translate(-50%, 14px) }
    to { opacity: 1; transform: translate(-50%, 0) }
}

.gx-dock__text b { font-weight: 700; }

.gx-dock__clear {
    border: 0;
    background: none;
    color: hsl(250 16% 66%);
    font-size: 13.5px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gx-dock__clear:hover { color: #fff; }
.gx-dock__go { padding: 11px 20px; font-size: 14.5px; }

/* Липкая промо-полоса витрины перекрывает и корзину, и кнопку «в заявку»
   в открытой карточке. Пока человек занят картой — она подождёт. */
body:has(.gx-dock:not([hidden])) .offer-sticky,
body:has(.gx-panel:not([hidden])) .offer-sticky { display: none; }

@media (max-width: 560px) {
    .gx-dock {
        left: 12px;
        right: 12px;
        transform: none;
        justify-content: space-between;
        padding: 10px 10px 10px 16px;
    }

    @keyframes gx-dock-in {
        from { opacity: 0; transform: translateY(14px) }
        to { opacity: 1; transform: none }
    }
}

/* ── Гравированная подпись под небом: лист атласа, а не «тёмная секция» ── */

.gx-band__caption {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    width: min(1240px, 100% - 40px);
    margin: clamp(26px, 4vw, 40px) auto 0;
    padding: 14px 0 clamp(26px, 4vw, 38px);
    border-top: 1px solid var(--gx-rule);
    font: 600 10.5px/1.5 var(--font-display);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: hsl(250 14% 56%);
}

.gx-band__caption span { white-space: nowrap; }

/* ═══════════ КАРТОЧКА ВОЗМОЖНОСТИ ═══════════ */

.gx-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.gx-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--ac, var(--g2));
    border-radius: var(--radius-sm);
    background: var(--card);
    box-shadow: 0 1px 2px hsl(240 20% 10% / .03);
    transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out),
                border-color .22s var(--ease-out);
}

.gx-card:hover {
    transform: translateY(-2px);
    border-color: hsl(240 10% 10% / .14);
    border-left-color: var(--ac, var(--g2));
    box-shadow: var(--shadow-card);
}

.gx-card:target {
    border-color: var(--ac);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ac) 22%, transparent);
}

.gx-card__title {
    margin: 0;
    font: 700 15.5px/1.35 var(--font-body);
    letter-spacing: -.005em;
    color: var(--fg);
}

.gx-card__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--fg-soft);
}

.gx-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.gx-card__cat {
    font: 600 10.5px/1 var(--font-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ac-deep, var(--muted));
}

/* Слаг читается как код за счёт плашки и моноширинности, а не за счёт
   четвёртого веб-шрифта: системный стек тут неотличим и стоит ноль байт. */
.gx-card__slug {
    padding: 3px 8px;
    border-radius: 7px;
    background: hsl(240 12% 12% / .06);
    font: 400 12px/1.3 var(--gx-mono);
    letter-spacing: .01em;
    font-variant-ligatures: none;
    color: var(--fg-soft);
}

.gx-card__add {
    /* В потоке и всегда справа: абсолютное позиционирование в углу
       накладывалось на заголовок, как только кнопку сделали видимой. */
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: hsl(0 0% 100% / .9);
    color: var(--fg-soft);
    font: 600 12.5px/1 var(--font-body);
    cursor: pointer;
    /* Кнопка видна ВСЕГДА, просто тихо.
       Появление только по наведению делало главное действие страницы
       неоткрываемым: человек не наводит на каждую карточку и потому не узнаёт,
       что отсюда можно уйти с заявкой. Тихо — значит не спорит с текстом;
       по наведению разгорается. */
    opacity: .5;
    transition: opacity .18s var(--ease-out), border-color .18s, color .18s,
                background .18s;
}

.gx-card:hover .gx-card__add,
.gx-card__add:hover,
.gx-card__add:focus-visible { opacity: 1; }

.gx-card__add:hover {
    border-color: var(--ac);
    color: var(--ac-deep);
    background: #fff;
}

.gx-card__add.is-in {
    opacity: 1;
    transform: none;
    border-color: var(--g5);
    background: color-mix(in oklab, var(--g5) 12%, #fff);
    color: #1c6b18;
}

/* На тач-устройствах hover не существует — кнопка на полной яркости. */
@media (hover: none) {
    .gx-card__add { opacity: 1; }
}

.gx-badge {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font: 600 11.5px/1 var(--font-body);
}

.gx-badge.is-on {
    background: color-mix(in oklab, var(--g5) 14%, transparent);
    color: #2c7a28;
}

.gx-badge.is-req {
    background: color-mix(in oklab, var(--g4) 18%, transparent);
    color: #8a5200;
}

/* ═══════════ РЕЗУЛЬТАТЫ ПОИСКА ═══════════ */

.gx-results__reset { margin: 16px 0 0; font-size: 14.5px; }
.gx-results__reset a { color: var(--g2); }

/* ═══════════ КАК ЧИТАТЬ КАРТУ ═══════════ */

.gx-legend__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.gx-legend__card {
    padding: 24px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: hsl(0 0% 100% / .66);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow: var(--shadow-card);
}

.gx-legend__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: linear-gradient(140deg, hsl(280 70% 96%), hsl(210 70% 96%));
    color: var(--g2);
}

.gx-legend__card h3 {
    margin: 0 0 8px;
    font: 600 17px/1.3 var(--font-display);
    letter-spacing: -.01em;
}

.gx-legend__card p { margin: 0; color: var(--fg-soft); font-size: 14.5px; line-height: 1.6; }

/* ═══════════ РАЗДЕЛЫ ═══════════ */

.gx-sections__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    /* CLS-резерв: 17 карточек в одну колонку. */
    min-height: 1400px;
}

.gx-sec {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: inherit;
    text-decoration: none;
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out),
                border-color .2s var(--ease-out);
}

.gx-sec:hover {
    transform: translateY(-2px);
    border-color: var(--ac);
    box-shadow: var(--shadow-card);
}

/* Глиф нарисован из настоящих координат звёзд раздела — тот же рисунок
   человек уже видел на карте, поэтому карточка привязана к месту. */
.gx-sec__glyph {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--ac) 12%, transparent);
    color: var(--ac-deep);
}

.gx-sec__glyph svg,
.gx-cat__glyph svg { width: 34px; height: 34px; }

.gx-sec__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.gx-sec__dom {
    font: 600 10px/1 var(--font-display);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

.gx-sec__name {
    font: 700 15px/1.3 var(--font-body);
    color: var(--fg);
}

.gx-sec__count { font-size: 13px; color: var(--fg-soft); }

.gx-sec__go { flex: none; margin-left: auto; color: var(--muted); transition: transform .2s var(--ease-out), color .2s; }
.gx-sec:hover .gx-sec__go { transform: translateX(3px); color: var(--ac-deep); }

/* ═══════════ ПОЛНЫЙ КАТАЛОГ ═══════════ */

.gx-cat {
    border-bottom: 1px solid var(--border);
}

.gx-cat[open] { padding-bottom: 26px; }

.gx-cat__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
}

.gx-cat__head::-webkit-details-marker { display: none; }

.gx-cat__glyph {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: color-mix(in oklab, var(--ac) 12%, transparent);
    color: var(--ac-deep);
}

.gx-cat__title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.gx-cat__name {
    font: 600 clamp(17px, 2.4vw, 21px) / 1.25 var(--font-display);
    letter-spacing: -.01em;
    color: var(--fg);
}

.gx-cat__meta { font-size: 13px; color: var(--muted); }

.gx-cat__chev {
    flex: none;
    margin-left: auto;
    color: var(--muted);
    transition: transform .22s var(--ease-out);
}

.gx-cat[open] .gx-cat__chev { transform: rotate(180deg); }

/* Свёрнутые разделы не рендерятся, пока до них не дошли: 572 карточки
   в DOM иначе заметно бьют по отзывчивости на слабых телефонах.
   Корректность от этого не зависит — только скорость. */
.gx-cat__body {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

.gx-cat__more { margin: 18px 0 0; font-size: 14.5px; }
.gx-cat__more a { color: var(--g2); }

/* Раскрываем всё при печати и при поиске по странице — Ctrl+F обязан работать
   по всему каталогу, иначе SEO-текст есть, а найти его нельзя. */
@media print {
    .gx-cat { display: block; }
    .gx-cat__body { content-visibility: visible; }
}

/* ═══════════ ИНТЕГРАЦИИ ═══════════ */

.gx-conn__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 1200px;
}

.gx-conn__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border: 1px solid hsl(0 0% 100% / .1);
    border-radius: var(--radius-sm);
    background: hsl(240 20% 12% / .7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.gx-conn__card h3 {
    margin: 0;
    font: 600 16px/1.3 var(--font-display);
    color: #fff;
}

.gx-conn__card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--dark-muted); }

.gx-conn__card .gx-badge {
    align-self: flex-start;
    margin-top: 4px;
}

.section--dark .gx-badge.is-on { background: hsl(120 50% 40% / .2); color: #8ee08a; }
.section--dark .gx-badge.is-req { background: hsl(35 80% 50% / .2); color: #ffc477; }

/* ═══════════ ИСТОРИЯ ═══════════ */

.gx-time__list {
    margin: 0;
    padding: 0 0 0 18px;
    list-style: none;
    border-left: 1px solid var(--border);
}

.gx-time__item {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 0 0 26px;
}

/* Узел на линии времени крупный только там, где начинается новый день —
   так в сплошной ленте видно ритм выпусков, а не 44 одинаковые точки. */
.gx-time__item::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--muted);
    box-shadow: 0 0 0 4px hsl(80 14% 96%);
}

.gx-time__item.is-newdate::before {
    left: -23px;
    top: 6px;
    width: 9px;
    height: 9px;
    background: var(--g4);
}

.gx-time__item.is-newdate { margin-top: 6px; }

.gx-time__date {
    font: 600 10.5px/1 var(--font-display);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.gx-time__body strong {
    display: block;
    margin: 6px 0 4px;
    font: 600 16px/1.35 var(--font-display);
    letter-spacing: -.01em;
    color: var(--fg);
}

.gx-time__body span { font-size: 14.5px; line-height: 1.6; color: var(--fg-soft); }

/* ═══════════ ТАРИФЫ ═══════════ */

.gx-price__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.gx-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-card);
}

.gx-tier.is-featured {
    border-color: transparent;
    box-shadow: var(--shadow-pop);
}

.gx-tier.is-featured::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--grad-brand);
}

.gx-tier__flag {
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--grad-cta);
    color: #fff;
    font: 600 11.5px/1 var(--font-body);
}

.gx-tier h3 {
    margin: 0 0 6px;
    font: 600 12px/1 var(--font-display);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

.gx-tier__price {
    margin: 0 0 10px;
    font: 600 clamp(1.35rem, 3vw, 1.75rem) / 1.15 var(--font-display);
    letter-spacing: -.02em;
    background: var(--grad-brand);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.gx-tier__desc { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--fg-soft); }

.gx-tier__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.gx-tier__list li {
    position: relative;
    padding-left: 24px;
    font-size: 14.5px;
    color: var(--fg-soft);
}

.gx-tier__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 15px;
    height: 15px;
    background: var(--grad-brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gx-price__note,
.gx-price__cross {
    margin: 26px auto 0;
    max-width: 44em;
    text-align: center;
    font-size: 15px;
    line-height: 1.65;
    color: var(--fg-soft);
}

.gx-price__cross { margin-top: 10px; }
.gx-price__cross a { color: var(--g2); font-weight: 600; }

/* ═══════════ FAQ ═══════════ */

.gx-faq__item {
    border-bottom: 1px solid var(--border);
}

.gx-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    font: 600 16.5px/1.4 var(--font-body);
    color: var(--fg);
}

.gx-faq__item summary::-webkit-details-marker { display: none; }

.gx-faq__item summary::after {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .22s var(--ease-out);
}

.gx-faq__item[open] summary::after { transform: rotate(45deg); }

.gx-faq__answer { padding: 0 0 22px; max-width: 52em; }
.gx-faq__answer p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--fg-soft); }

/* ═══════════ ЗАЯВКА ═══════════ */

.gx-lead__layout { display: grid; gap: clamp(28px, 5vw, 48px); }

.gx-lead__mascot {
    display: block;
    width: clamp(120px, 26vw, 180px);
    height: auto;
    margin: 24px 0 0;
}

.gx-lead__direct { margin: 18px 0 0; font-size: 14.5px; color: var(--fg-soft); }
.gx-lead__direct a { color: var(--g2); font-weight: 600; }

.gx-lead__form {
    padding: clamp(22px, 4vw, 32px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: hsl(0 0% 100% / .72);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow: var(--shadow-card);
}

.gx-lead__ok {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px 18px;
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--g5) 14%, transparent);
    color: #1c6b18;
}

.gx-lead__ok p { margin: 0; font-size: 14.5px; }

/* Ловушка для ботов: полностью убрана из потока и из порядка табуляции,
   но не display:none — часть ботов такие поля игнорирует. */
.gx-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.gx-cart {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px dashed color-mix(in oklab, var(--g2) 35%, var(--border));
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--g2) 5%, transparent);
}

.gx-cart__title { margin: 0 0 10px; font-size: 14px; color: var(--fg-soft); }
.gx-cart__title b { color: var(--fg); }

.gx-cart__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }

.gx-cart__list li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px 6px 12px;
    border-radius: var(--radius-pill);
    background: hsl(0 0% 100% / .9);
    border: 1px solid var(--border);
    font-size: 13px;
}

.gx-cart__list button {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: hsl(240 10% 10% / .07);
    color: var(--fg-soft);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.gx-cart__list button:hover { background: var(--g3); color: #fff; }

.gx-field { display: grid; gap: 6px; margin-bottom: 16px; }

.gx-field label {
    font: 600 13px/1 var(--font-body);
    color: var(--fg-soft);
}

.gx-field input,
.gx-field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    font: 400 15px/1.5 var(--font-body);
    color: var(--fg);
    transition: border-color .18s, box-shadow .18s;
}

.gx-field textarea { resize: vertical; min-height: 92px; }

.gx-field input:focus,
.gx-field textarea:focus {
    outline: none;
    border-color: var(--g2);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--g2) 16%, transparent);
}

.gx-field__err { font-size: 13px; color: var(--g3); }

.gx-consent {
    display: flex;
    gap: 10px;
    margin: 4px 0 20px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--fg-soft);
    cursor: pointer;
}

.gx-consent input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--g2);
}

.gx-consent a { color: var(--g2); }

.gx-lead__submit { width: 100%; justify-content: center; }

.gx-lead__small { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ═══════════ СТРАНИЦА РАЗДЕЛА ═══════════ */

.gx-cathero {
    padding: clamp(28px, 5vw, 52px) 0 clamp(24px, 4vw, 40px);
    background: linear-gradient(180deg, color-mix(in oklab, var(--ac) 9%, transparent), transparent);
}

.gx-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 13.5px;
    color: var(--muted);
}

.gx-crumbs a { color: var(--fg-soft); text-decoration: none; }
.gx-crumbs a:hover { color: var(--g2); }

.gx-cathero__grid { display: grid; gap: 24px; }

.gx-cathero h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.85rem, 5vw, 3rem);
    line-height: 1.12;
    letter-spacing: -.024em;
    text-wrap: balance;
}

.gx-cathero__lead {
    margin: 18px 0 0;
    max-width: 40em;
    font-size: 17px;
    line-height: 1.65;
    color: var(--fg-soft);
}

.gx-cathero__lead--sub { margin-top: 10px; font-size: 15px; color: var(--muted); }

.gx-cathero__glyph {
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    border-radius: 26px;
    background: color-mix(in oklab, var(--ac) 13%, transparent);
    color: var(--ac-deep);
}

.gx-cathero__glyph svg { width: 76px; height: 76px; }

.gx-catalog--flat { padding-top: clamp(28px, 4vw, 44px); }

.gx-others__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gx-chip-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--card);
    color: var(--fg);
    text-decoration: none;
    font-size: 14px;
    transition: border-color .18s, transform .18s var(--ease-out);
}

.gx-chip-link:hover { border-color: var(--ac); transform: translateY(-1px); }
.gx-chip-link b { color: var(--muted); font-weight: 600; font-size: 12.5px; }

.gx-others__back {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 30px 0 0;
    font-size: 15px;
}

.gx-others__back a { color: var(--g2); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   ДЕСКТОП. Всё, что перестраивает сетки, живёт здесь: файл грузится после
   site.css, и правила без медиа-запроса перебили бы мобильную базу.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 700px) {
    .gx-grid { grid-template-columns: repeat(2, 1fr); }
    .gx-sections__grid { grid-template-columns: repeat(2, 1fr); min-height: 720px; }
    .gx-conn__grid { grid-template-columns: repeat(2, 1fr); min-height: 640px; }
    .gx-price__grid { grid-template-columns: repeat(3, 1fr); }
    .gx-legend__grid { grid-template-columns: repeat(3, 1fr); }

    .gx-time__item { grid-template-columns: 96px 1fr; align-items: baseline; }
    .gx-time__date { padding-top: 4px; }
    .gx-time__body strong { margin-top: 0; }
}

@media (min-width: 981px) {
    .gx-band { min-height: 720px; padding-top: clamp(52px, 5vw, 88px); }

    /* Стеклянная карточка слева, карта справа — композиция «планетария». */
    .gx-band__inner {
        grid-template-columns: minmax(360px, .95fr) 1.05fr;
        align-items: center;
        gap: clamp(36px, 4vw, 60px);
    }

    .gx-plate {
        aspect-ratio: 16 / 11;
        /* Габарит задаёт колонка сетки, а не min-height: пара
           «aspect-ratio + min-height» на десктопе диктует минимальную ширину
           и рвёт сетку вправо. Высоту ограничиваем сверху, не снизу. */
        min-height: 0;
        max-height: 62svh;
    }

    .gx-grid { grid-template-columns: repeat(3, 1fr); }
    .gx-sections__grid { grid-template-columns: repeat(3, 1fr); min-height: 520px; }
    .gx-conn__grid { grid-template-columns: repeat(3, 1fr); min-height: 480px; }

    .gx-lead__layout { grid-template-columns: .85fr 1.15fr; align-items: start; }

    .gx-cathero__grid {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 40px;
    }
}

@media (min-width: 1240px) {
    .gx-grid { grid-template-columns: repeat(4, 1fr); }
    .gx-sections__grid { grid-template-columns: repeat(4, 1fr); min-height: 420px; }
}

/* ── Узкие телефоны ── */

@media (max-width: 560px) {
    .gx-band { min-height: 560px; }
    .gx-plate { min-height: 360px; }
    .gx-sections__grid { min-height: 1500px; }
    .gx-conn__grid { min-height: 1350px; }

    .gx-search { padding-left: 14px; }
    .gx-search__go { padding: 12px 16px; font-size: 14px; }

    .gx-band__caption { gap: 4px 14px; font-size: 9.5px; letter-spacing: .14em; }

    /* Кнопка заказа теперь в подвале карточки — верхний отступ под неё
       больше не нужен. На узком экране подвал переносится сам. */
    .gx-card__foot { gap: 6px; }
}

/* ── Уважение к системным настройкам ── */

@media (prefers-reduced-motion: reduce) {
    .gx-card,
    .gx-sec,
    .gx-chip-link,
    .gx-card__add,
    .gx-cat__chev,
    .gx-faq__item summary::after,
    .gx-search,
    .gx-search__go {
        transition: none;
    }

    .gx-card:hover,
    .gx-sec:hover,
    .gx-chip-link:hover,
    .gx-search__go:hover { transform: none; }
}

/* Фокус виден всегда и везде — на небе белым, на светлом брендовым. */
.gx-page :focus-visible {
    outline: 2px solid var(--g2);
    outline-offset: 3px;
    border-radius: 4px;
}

.gx-band :focus-visible {
    outline-color: #fff;
}

/* Подпись домена — крупнее и тише подписи созвездия: она задаёт структуру
   на обзорном масштабе, а не спорит за внимание с названиями разделов. */
.gx-lab--dom {
    padding: 5px 11px;
    background: hsl(240 30% 4% / .5);
    color: hsl(250 22% 82%);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .26em;
    text-transform: uppercase;
}

/* ═══════════ ВХОД В ПОЛНОЭКРАННУЮ ГАЛАКТИКУ ═══════════
   Карта в плите — витрина; настоящее путешествие по библиотеке начинается
   в приложении. Кнопка стоит сразу под поиском, на первом экране. */

.gx-enter {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0 0;
    padding: 14px 18px;
    border: 1px solid hsl(0 0% 100% / .16);
    border-radius: var(--radius);
    background: var(--gx-plate);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .22s var(--ease-out), transform .22s var(--ease-out),
                box-shadow .22s var(--ease-out);
}

/* Сияние за кнопкой — единственное «неоновое» пятно на странице,
   и оно на главном действии первого экрана. */
.gx-enter__glow {
    position: absolute;
    inset: -40% -10%;
    background: radial-gradient(50% 60% at 20% 50%, hsl(292 70% 50% / .32), transparent 70%),
                radial-gradient(45% 55% at 78% 50%, hsl(210 80% 55% / .24), transparent 70%);
    opacity: .8;
    transition: opacity .22s var(--ease-out);
    pointer-events: none;
}

.gx-enter:hover {
    transform: translateY(-2px);
    border-color: hsl(0 0% 100% / .34);
    box-shadow: 0 18px 40px -18px hsl(292 70% 40% / .7);
}

.gx-enter:hover .gx-enter__glow { opacity: 1; }

.gx-enter__icon {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: hsl(0 0% 100% / .1);
    color: #fff;
}

.gx-enter__text { position: relative; display: grid; gap: 3px; min-width: 0; }

.gx-enter__text b {
    font: 600 15.5px/1.25 var(--font-display);
    letter-spacing: -.01em;
}

.gx-enter__text span {
    font-size: 13px;
    line-height: 1.4;
    color: hsl(250 20% 76%);
}

.gx-enter__go {
    position: relative;
    flex: none;
    margin-left: auto;
    color: hsl(250 24% 82%);
    transition: transform .22s var(--ease-out), color .22s;
}

.gx-enter:hover .gx-enter__go { transform: translateX(4px); color: #fff; }

@media (max-width: 560px) {
    .gx-enter { padding: 12px 14px; gap: 11px; }
    .gx-enter__icon { width: 38px; height: 38px; border-radius: 11px; }
    .gx-enter__text b { font-size: 14.5px; }
    .gx-enter__text span { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .gx-enter, .gx-enter__go, .gx-enter__glow { transition: none; }
    .gx-enter:hover { transform: none; }
    .gx-enter:hover .gx-enter__go { transform: none; }
}