/* ========================================================================
   XTrade landing — REDESIGN
   ------------------------------------------------------------------------
   Mimicry-design под кабинет арбитража. Цель — нулевой imagination gap:
   на мобиле лендинг 1-в-1 имитирует кабинет (полноэкранная карточка
   арбитражной сделки + bottom-nav как в кабинете), на десктопе hero
   справа — та же карточка вместо устаревшей price-row карточки.

   Палитра, скругления и типографика взяты из server/public/css/
   arbitrage.css (card-v4 design tokens). Все значения — копии
   реальных production-classes, чтобы карточка действительно
   выглядела как настоящая, без мелких расхождений.
   ======================================================================== */

:root {
    --xt-bg-card: #1A1A1A;
    --xt-bg-card-elev: rgba(255,255,255,.03);
    --xt-border-soft: rgba(255,255,255,.08);
    --xt-border-base: rgba(255,255,255,.12);
    --xt-text: #fff;
    --xt-text-dim: rgba(255,255,255,.55);
    --xt-text-muted: rgba(255,255,255,.45);
    --xt-success: #4ade80;
    --xt-danger:  #f87171;
    --xt-cyan:    #00aee4;
    --xt-cyan-soft: rgba(0,174,228,.12);
    --xt-gold:     #e7c36b;
    --xt-gold-200: #f4dca0;
    --xt-gold-400: rgba(231,195,107,.6);
}

/* ════════════════════════════════════════════════════════════════════
   DESKTOP: Hero card replacement (≥768px)
   Старая .hero__card / .blog-slider остаётся в DOM для совместимости,
   но скрыта; на её место рендерится .xt-card.
   ════════════════════════════════════════════════════════════════════ */
/* Глобальная скрытность mobile-only-узлов: важно скрыть .xt-sheet
   ДО media-query, иначе на десктопе DOM-узел рендерится без стилей
   (svg-link-icons растягиваются на весь viewport — выглядит как сломанная
   страница). Mobile media-query потом переопределяет .xt-sheet.is-open. */
.xt-mobile-cabinet { display: none; }
.xt-mnav { display: none; }
.xt-sheet { display: none; }
/* Mobile-only: тёмный матовый фон для xtrade-страниц (хедер скрыт, карточка
   живёт прямо на body). На десктопе кастомный фон не навешиваем — каждый
   лендинг даёт свой (xtrade hero shapes, partner gradient, и т.д.) */
@media (max-width: 767px) {
    body.xtrade-page { background: #0d0e10; }
}

/* На десктопе старый swiper-слайдер скрываем — заменяем демо-карточкой кабинета.
   ВАЖНО: scope строго на body.xtrade-page. Без scope правило ломало hero__card
   на главной XBOT-странице (body.xbot-home) — swiper скрывался, а .xt-card туда
   не добавлен, в итоге hero__card выглядел пустым на десктопе (баг 28.04.2026). */
@media (min-width: 768px) {
    body.xtrade-page .hero__card .blog-slider { display: none; }
    body.xtrade-page .hero__card { background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
}

/* Hero subtitle accent — выделение фразы про бесплатные сделки в подзаголовке
   xtrade. Чуть ярче основного subtitle, без капса/жирной сноски, чтобы
   читалось как мягкая benefit-фраза, а не отдельный чип. */
.hero__subtitle .hero__subtitle-accent {
    color: var(--xt-cyan);
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════
   Card rotation — мягкая смена данных каждые ~4.5 сек.
   JS подменяет content + height баров; CSS делает короткий fade,
   чтобы скрыть момент DOM-update.
   ════════════════════════════════════════════════════════════════════ */
.xt-card--rotating {
    transition: opacity 0.42s cubic-bezier(.2,.8,.2,1);
}
.xt-card--rotating .xt-hero-stab__bar {
    transition: height 0.55s cubic-bezier(.2,.8,.2,1), background 0.4s ease;
}
.xt-card--rotating .xt-card__hero-img {
    transition: opacity 0.32s ease;
}
.xt-card--fade-out {
    opacity: 0.18;
}
.xt-card--fade-out .xt-card__hero-img {
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    .xt-card--rotating,
    .xt-card--rotating .xt-hero-stab__bar,
    .xt-card--rotating .xt-card__hero-img {
        transition: none;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Killer-banner rotation — мимикрия slim__killer из кабинета.
   Меняется реже карточки (≈ каждые 13.5 сек) и расходится с ней по
   таймингу (offset 6.7s от старта), чтобы пользователь не видел два
   синхронных fade'а одновременно. 4 контентных состояния:
     · freeQuota (default) — иконка молнии, "5 сделок в день — бесплатно"
     · streak                — иконка пламени, "Серия 7 дней — +2 дня Pro"
     · gold                  — иконка короны, "Premium-карточки в выдаче"
     · live                  — иконка графика, "+24 сделки за час"
   Стилистически у всех состояний одинаковый layout и blue-tint, чтобы
   не дёргать глаз; меняется только icon/title/sub.
   ════════════════════════════════════════════════════════════════════ */
.xt-mobile-cabinet__cta-banner {
    transition: opacity 0.32s cubic-bezier(.2,.8,.2,1);
}
.xt-mobile-cabinet__cta-banner--fade-out {
    opacity: 0.18;
}
@media (prefers-reduced-motion: reduce) {
    .xt-mobile-cabinet__cta-banner { transition: none; }
}
/* Gold-state у killer'а — kиллер становится полностью золотым синхронно с
   gold-карточкой. Контейнер: тёплый gold-gradient + золотая рамка + мягкое
   свечение. Иконка/тайтл/sub/arrow тоже переходят в gold-палитру.
   Применяется только когда kиллер показывает 'gold'-состояние ("Связки A+
   уже отобраны"). Остальные состояния — стандартный cyan-glass. */
.xt-mobile-cabinet__cta-banner--gold {
    background: linear-gradient(135deg, rgba(231,195,107,.22) 0%, rgba(231,195,107,.06) 100%) !important;
    border-color: rgba(231,195,107,.55) !important;
    box-shadow: 0 6px 28px -10px rgba(231,195,107,.32);
}
.xt-mobile-cabinet__cta-banner--gold .xt-mobile-cabinet__cta-banner-icon {
    background: rgba(231,195,107,.24);
    color: var(--xt-gold-200);
    box-shadow: 0 0 18px -6px rgba(231,195,107,.45);
}
.xt-mobile-cabinet__cta-banner--gold .xt-mobile-cabinet__cta-banner-title {
    color: var(--xt-gold-200) !important;
    text-shadow: 0 0 16px rgba(231,195,107,.18);
}
.xt-mobile-cabinet__cta-banner--gold .xt-mobile-cabinet__cta-banner-sub {
    color: rgba(231,195,107,.7) !important;
}
.xt-mobile-cabinet__cta-banner--gold .xt-mobile-cabinet__cta-banner-arrow {
    color: rgba(231,195,107,.7);
}

/* ════════════════════════════════════════════════════════════════════
   .xt-card — точный clone .arb-card2 из кабинета
   ════════════════════════════════════════════════════════════════════ */
.xt-card {
    display: flex;
    flex-direction: column;
    background: var(--xt-bg-card);
    border: 1.5px solid var(--xt-border-base);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 40px -12px rgba(0,0,0,.6);
    color: var(--xt-text);
    font-family: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    position: relative;
}

/* Gold tier — premium-glow + анимация бордера (для mobile-cabinet) */
.xt-card--gold {
    border-color: rgba(231,195,107,.55);
    box-shadow:
        0 0 0 1.5px rgba(231,195,107,.2),
        0 0 32px -8px rgba(231,195,107,.35),
        0 12px 40px -12px rgba(0,0,0,.6);
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(231,195,107,.04), transparent 70%),
        var(--xt-bg-card);
}
.xt-card--gold::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        transparent 0%,
        transparent 40%,
        rgba(231,195,107,.06) 50%,
        transparent 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: xtGoldShimmer 3.6s ease-in-out infinite;
}
@keyframes xtGoldShimmer {
    0%, 100% { background-position: 100% 0; }
    50%      { background-position: -100% 0; }
}

/* Silver tier — нейтральный premium-вариант для desktop hero (без жёлтого) */
.xt-card--silver {
    border-color: rgba(255,255,255,.22);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 12px 40px -12px rgba(0,0,0,.6);
}
.xt-card--silver::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        transparent 0%,
        transparent 40%,
        rgba(255,255,255,.06) 50%,
        transparent 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: xtSilverShimmer 3.6s ease-in-out infinite;
}
@keyframes xtSilverShimmer {
    0%, 100% { background-position: 100% 0; }
    50%      { background-position: -100% 0; }
}
.xt-card--silver .xt-card__name {
    background: linear-gradient(100deg, #fff 0%, #fff 40%, rgba(255,255,255,.55) 50%, #fff 60%, #fff 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: xtSilverNameShimmer 3.2s ease-in-out infinite;
}
@keyframes xtSilverNameShimmer {
    0%, 100% { background-position: 100% 0; }
    50%      { background-position: 0% 0; }
}
.xt-card--silver .xt-card__name-star {
    color: rgba(255,255,255,.65);
    -webkit-text-fill-color: rgba(255,255,255,.65) !important;
}
.xt-card--silver .xt-card__hero {
    background: rgba(255,255,255,.025);
    box-shadow: none;
}

/* ── HEAD ───────────────────────────────────────────────────────── */
.xt-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
    flex-shrink: 0;
}
.xt-card__name {
    margin: 0;
    color: var(--xt-text);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -0.005em;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xt-card--gold .xt-card__name {
    background: linear-gradient(100deg, #fff 0%, #fff 40%, var(--xt-gold) 50%, #fff 60%, #fff 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: xtGoldNameShimmer 3.2s ease-in-out infinite;
}
@keyframes xtGoldNameShimmer {
    0%, 100% { background-position: 100% 0; }
    50%      { background-position: 0% 0; }
}
.xt-card__name-star {
    color: var(--xt-gold);
    -webkit-text-fill-color: var(--xt-gold) !important;
    margin-right: 2px;
}
.xt-card__head-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.xt-card__icon-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255,255,255,.55);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
    padding: 0;
}
.xt-card__icon-btn:hover {
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.05);
}
.xt-card__icon-btn svg { width: 16px; height: 16px; }

/* ── HERO (heatmap + изображение скина) ──────────────────────────── */
.xt-card__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 14px;
    display: flex;
    flex-direction: column;
}
.xt-card__hero {
    position: relative;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,.025);
    aspect-ratio: 16 / 10;
    min-height: 220px;
}
.xt-card--gold .xt-card__hero {
    box-shadow: inset 0 0 0 1.5px var(--xt-gold-400);
    background:
        radial-gradient(60% 60% at 50% 50%, rgba(231,195,107,.08), transparent 72%),
        rgba(255,255,255,.025);
}
.xt-hero-stab {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 0 6px;
    z-index: 0;
}
.xt-hero-stab__col {
    flex: 1 1 0;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: rgba(255,255,255,.02);
}
.xt-hero-stab__bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    border-radius: 8px 8px 0 0;
    transition: height .8s cubic-bezier(.2,.8,.2,1);
}
.xt-hero-stab__col[data-cat="stable"]  .xt-hero-stab__bar { background: linear-gradient(180deg, rgba(74,222,128,.45), rgba(74,222,128,.18)); }
.xt-hero-stab__col[data-cat="risky"]   .xt-hero-stab__bar { background: linear-gradient(180deg, rgba(248,113,113,.45), rgba(248,113,113,.18)); }
.xt-hero-stab__col[data-cat="neutral"] .xt-hero-stab__bar { background: linear-gradient(180deg, rgba(56,189,248,.40), rgba(56,189,248,.15)); }
/* Gold-карточка перекрашивает все 4 бара в золото независимо от cat —
   премиум-сигнал должен читаться визуально как монохромный "идеальный"
   паттерн (4/4 gold), а не как обычная разноцветная стабильность.
   Подписи (pct/count/period) тоже получают тёплый gold-tint. */
.xt-card--gold .xt-hero-stab__col .xt-hero-stab__bar {
    background: linear-gradient(180deg, rgba(231,195,107,.55) 0%, rgba(231,195,107,.18) 100%) !important;
}
.xt-card--gold .xt-hero-stab__pct {
    color: var(--xt-gold-200);
    text-shadow: 0 0 12px rgba(231,195,107,.22);
}
.xt-card--gold .xt-hero-stab__count {
    color: rgba(231,195,107,.7);
}
.xt-card--gold .xt-hero-stab__sub {
    color: rgba(231,195,107,.5);
}
.xt-hero-stab__cap {
    position: absolute;
    left: 0; right: 0; bottom: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: rgba(255,255,255,.85);
    font-variant-numeric: tabular-nums;
    z-index: 2;
}
.xt-hero-stab__pct {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.xt-hero-stab__count {
    font-size: 10px;
    color: rgba(255,255,255,.55);
    font-weight: 500;
}
.xt-hero-stab__sub {
    font-size: 10px;
    color: rgba(255,255,255,.4);
    font-weight: 500;
}
.xt-card__hero-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    z-index: 1;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.4));
}

/* ── PROFIT row ──────────────────────────────────────────────────── */
.xt-card__profit {
    margin: 12px 14px 0;
    padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(74,222,128,.10) 0%, rgba(74,222,128,.04) 100%);
    border: 1px solid rgba(74,222,128,.22);
    position: relative;
    flex-shrink: 0;
}
.xt-card__profit-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.xt-card__profit-abs {
    font-size: 26px;
    font-weight: 800;
    color: var(--xt-success);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.xt-card__profit-pct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    background: rgba(74,222,128,.18);
    color: var(--xt-success);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.xt-card__fee-info {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: rgba(74,222,128,.45);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.xt-card__fee-info:hover {
    color: rgba(74,222,128,.85);
    background: rgba(74,222,128,.08);
}
.xt-card__fee-info svg { width: 14px; height: 14px; }

/* ── CTA row ─────────────────────────────────────────────────────── */
.xt-card__cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 14px 14px;
    flex-shrink: 0;
}
.xt-card__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-height: 86px;
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    border: 1.5px solid var(--xt-border-base);
    text-decoration: none;
    color: var(--xt-text);
    transition: background .18s ease, border-color .18s ease, transform .15s ease;
    overflow: hidden;
    position: relative;
}
.xt-card__cta:hover {
    transform: translateY(-1px);
}
.xt-card__cta--buy {
    background: rgba(34,197,94,.05);
    border-color: rgba(34,197,94,.50);
}
.xt-card__cta--buy:hover {
    background: rgba(34,197,94,.08);
    border-color: rgba(34,197,94,.70);
}
.xt-card__cta--sell {
    background: rgba(248,113,113,.045);
    border-color: rgba(248,113,113,.45);
}
.xt-card__cta--sell:hover {
    background: rgba(248,113,113,.07);
    border-color: rgba(248,113,113,.65);
}
.xt-card__cta-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.xt-card__cta-cap {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,.85);
}
.xt-card__cta--buy .xt-card__cta-cap  { color: rgba(74,222,128,.85); }
.xt-card__cta--sell .xt-card__cta-cap { color: rgba(248,113,113,.85); }
.xt-card__cta-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--xt-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.xt-card__cta--buy  .xt-card__cta-price { color: var(--xt-success); }
.xt-card__cta--sell .xt-card__cta-price { color: var(--xt-danger); }

/* Gold-tier override для кнопки ПОКУПКА: когда карточка в gold-режиме
   (~1 из 4 ротаций), buy-кнопка переключается в gold-палитру —
   карточка + название + buy читаются единым "золотым" блоком.
   Кнопка ПРОДАЖА остаётся красной — это signal-цвет, не premium-маркер. */
.xt-card--gold .xt-card__cta--buy {
    background: rgba(231,195,107,.06);
    border-color: rgba(231,195,107,.55);
}
.xt-card--gold .xt-card__cta--buy:hover {
    background: rgba(231,195,107,.10);
    border-color: rgba(231,195,107,.78);
}
.xt-card--gold .xt-card__cta--buy .xt-card__cta-cap {
    color: rgba(231,195,107,.95);
}
.xt-card--gold .xt-card__cta--buy .xt-card__cta-price {
    color: var(--xt-gold);
    text-shadow: 0 0 18px rgba(231,195,107,.18);
}

.xt-card__cta-meta {
    font-size: 10.5px;
    color: var(--xt-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}
.xt-card__cta-icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    width: 56px;
}
.xt-card__cta-mkt-name {
    font-size: 9.5px;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    max-width: 56px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xt-card__cta-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE (≤767px) — full mimicry: hide header, fullscreen card, bottom-nav
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Скрываем landing-хедер и preloader-shapes полностью */
    body.xtrade-page .header,
    body.xtrade-page .menu-opener,
    body.xtrade-page .hero__shapes { display: none !important; }

    /* Старый hero полностью заменяется на mobile-cabinet */
    body.xtrade-page .hero { display: none; }

    /* Padding-bottom для основной страницы — место под фиксированный mnav.
       Padding-top убираем (он создавался для зарезервированного места под
       фиксированный header, но у нас header скрыт) — иначе сверху 80px
       пустоты белого фона. */
    body.xtrade-page { padding-bottom: 0; }
    body.xtrade-page .wrapper { padding-top: 0 !important; padding-bottom: 80px; }

    /* ════════════════════════════════════════════════════════════════
       XBOT main-landing mobile shell.
       Тот же mnav/sheet что у XTrade и Партнёра, но БЕЗ замены hero —
       hero на главной XBOT остаётся (это первый продающий экран:
       заголовок, фичи, слайдер скинов, CTA «7 дней бесплатно»).
       ════════════════════════════════════════════════════════════════ */
    body.xbot-home .header,
    body.xbot-home .menu-opener,
    body.xbot-home .hero__shapes { display: none !important; }
    body.xbot-home { background: #0d0e10; padding-bottom: 0; }
    body.xbot-home .wrapper { padding-top: 0 !important; padding-bottom: 80px; }
    /* Hero — header скрыт, mnav фиксирован снизу (~66px = pill 50 + padding 8+8).
       Не трогаем display/flex/grid/width у .hero и .hero__container (любая
       такая попытка ломала ширину контейнера — см. предупреждение в styles.css).
       Только переопределяем padding-bottom (styles.css даёт 90px, нам не нужно)
       и подбираем точную min-height у .hero__block, чтобы justify-content:center
       (заданный в styles.css mobile) реально получал свободную высоту между
       верхом окна и верхом mnav. */
    body.xbot-home .hero {
        padding-top: 18px;
        padding-bottom: 0;
    }
    body.xbot-home .hero__block {
        /* Доступная высота = 100dvh − hero padding-top (18) − mnav (~66)
           − safe-area-bottom. На iPhone SE 667 это ~583px и контент туда
           не помещается полностью → центрирование не работает на коротких
           экранах (как и было прописано в комментарии styles.css). На
           iPhone Pro 16 ~852px остаётся заметный запас и блок реально
           центрируется. */
        min-height: calc(100dvh - 84px - env(safe-area-inset-bottom, 0px));
    }
    /* Back-to-top — приподнять над bottom-nav pill */
    body.xbot-home .back-to-top {
        bottom: 84px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    /* Партнёрский Hero — у него свой padding-top: 110px, заложенный под старый
       fixed-хедер. На xtrade-странице header скрыт → урезаем верхнее поле,
       чтобы первый экран сразу начинался с контента. */
    body.xtrade-page .partner-hero {
        padding-top: 32px !important;
        padding-bottom: 48px !important;
    }
    body.xtrade-page .partner-main {
        padding-top: 48px;
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* Mobile cabinet wrapper — высота как у бот-шита кабинета: ~85% viewport.
       Это:
         • даёт визуальную подсказку «есть ещё контент ниже» (snippet stats виден),
         • учитывает реальный URL-bar / native UI на iOS Safari и Android Chrome,
         • совпадает с паттерном кабинета (cab-sheet тоже считает 85dvh).
       Padding-bottom = clearance под fixed bottom-nav, чтобы карточка не
       заезжала под пилюлю на короткой высоте контента.
       gap=10px: одинаковый ритм между slim → banner → card. */
    .xt-mobile-cabinet {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: #0d0e10;
        min-height: 85vh;             /* fallback для старых iOS Safari */
        min-height: 85dvh;            /* динамический viewport (учитывает URL bar) */
        padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 84px);
        box-sizing: border-box;
        position: relative;
    }
    /* Brand-strip и banner — natural height; gap уже задан на родителе. */
    .xt-mobile-cabinet__brand,
    .xt-mobile-cabinet__cta-banner { margin-bottom: 0; flex: 0 0 auto; }

    /* ════════════════════════════════════════════════════════════════
       CABINET-HEADER (тонкая утилитарная полоска)
       Полная мимикрия cabinet-header'а кабинета арбитража: avatar слева
       + brand-title (одна строка bold + одна строка mute subtitle для
       контекста cold-юзеру) + status-pill справа на месте cabinet-
       balance/streak. Высота ~52px (тоньше прежнего punchy-hero на
       ~30px) → больше визуального места карточке (главный продающий
       элемент). Punch не дублируется — живёт ТОЛЬКО в killer-banner ниже.
       Решение 28.04.2026 v3: см. комментарий в HTML.
       ════════════════════════════════════════════════════════════════ */
    .xt-mobile-cabinet__brand {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 4px;
    }
    .xt-mobile-cabinet__brand-avatar {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 50%;
        background: linear-gradient(135deg, #00aee4 0%, #0089b8 100%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(0, 174, 228, 0.28),
                    inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
    .xt-mobile-cabinet__brand-avatar img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        /* SVG уже белый (fill="#ffffff" в файле) — filter не нужен */
    }
    .xt-mobile-cabinet__brand-text {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }
    .xt-mobile-cabinet__brand-title {
        font-family: "Geologica", sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: #fff;
        letter-spacing: -0.012em;
    }
    .xt-mobile-cabinet__brand-sub {
        font-family: "Geologica", sans-serif;
        font-weight: 400;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.45);
        margin-top: 1px;
    }

    /* Промо-баннер над карточкой — призыв к авторизации */
    .xt-mobile-cabinet__cta-banner {
        display: flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, rgba(0,174,228,.18) 0%, rgba(0,174,228,.06) 100%);
        border: 1px solid rgba(0,174,228,.32);
        border-radius: 14px;
        padding: 10px 14px;
        text-decoration: none;
        color: var(--xt-text);
    }
    .xt-mobile-cabinet__cta-banner-icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(0,174,228,.18);
        border-radius: 10px;
        color: #fff;
    }
    .xt-mobile-cabinet__cta-banner-icon svg { width: 22px; height: 22px; }
    .xt-mobile-cabinet__cta-banner-text {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.25;
    }
    .xt-mobile-cabinet__cta-banner-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--xt-text);
    }
    .xt-mobile-cabinet__cta-banner-sub {
        font-size: 11px;
        color: rgba(255,255,255,.6);
    }
    .xt-mobile-cabinet__cta-banner-arrow {
        flex-shrink: 0;
        color: rgba(255,255,255,.5);
    }

    /* Карточка тянется на всю доступную высоту секции (как в кабинете).
       .xt-mobile-cabinet — flex-column с min-height: 85dvh, head/profit/cta
       имеют natural height, body растёт и заполняет середину → hero
       визуально занимает максимум доступного пространства. */
    .xt-card {
        max-width: none;
        flex: 1 1 auto;
        min-height: 0;
    }
    .xt-card__body {
        flex: 1 1 auto;
        min-height: 0;
        padding-bottom: 0;
    }
    .xt-card__name { font-size: 13.5px; }
    /* Hero — растягивается (flex-grow внутри body); aspect-ratio как fallback
       для случаев когда секция короче карточки (iPhone SE landscape и т.п.).
       Убираем max-height: 240px — он не давал тянуться. */
    .xt-card__hero {
        flex: 1 1 auto;
        min-height: 200px;
        aspect-ratio: auto;
    }
    /* 4 столбца на узком экране — сжимаем cap-шрифты */
    .xt-hero-stab { gap: 3px; padding: 0 4px; }
    .xt-hero-stab__pct { font-size: 11.5px; }
    .xt-hero-stab__count { font-size: 9px; }
    .xt-hero-stab__sub { font-size: 9px; }
    .xt-card__profit { margin: 10px 12px 0; padding: 12px 16px; }
    .xt-card__profit-abs { font-size: 24px; }
    .xt-card__profit-pct { font-size: 20px; height: 32px; padding: 0 10px; }
    .xt-card__cta-row { padding: 10px 12px 12px; gap: 8px; }
    .xt-card__cta { min-height: 78px; padding: 8px 12px; gap: 8px; }
    .xt-card__cta-price { font-size: 20px; }
    .xt-card__cta-icon-wrap { width: 40px; }
    .xt-card__cta-icon { width: 40px; height: 40px; }
    .xt-card__cta-mkt-name { max-width: 40px; font-size: 9px; }

    /* ── Bottom nav в стиле кабинета ─────────────────────────────── */
    .xt-mnav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        align-items: center;
        justify-content: space-between;
        background: rgba(13,14,16,.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--xt-border-base);
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
        gap: 4px;
    }
    .xt-mnav__item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 4px;
        background: transparent;
        border: none;
        color: rgba(255,255,255,.55);
        font-family: inherit;
        font-size: 10px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        transition: color .15s ease;
        min-width: 0;
    }
    .xt-mnav__item:hover { color: rgba(255,255,255,.85); }
    /* Активный таб (текущая страница) — голубой акцент. Используется на
       сабстраницах (партнёрка, гарантия и т.д.), чтобы юзер понимал где он. */
    .xt-mnav__item--active,
    .xt-mnav__item.is-active {
        color: var(--xt-cyan);
        position: relative;
    }
    .xt-mnav__item--active::before,
    .xt-mnav__item.is-active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 22px;
        height: 2px;
        background: var(--xt-cyan);
        border-radius: 0 0 3px 3px;
        box-shadow: 0 0 8px rgba(0,174,228,.55);
    }
    .xt-mnav__item-icon {
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .xt-mnav__item-icon svg { width: 22px; height: 22px; }
    .xt-mnav__item-label {
        font-size: 10px;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Center pill — главный CTA: иконка стима + текст */
    .xt-mnav__pill-wrap {
        flex: 0 0 auto;
        padding: 0 4px;
    }
    .xt-mnav__pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 22px;
        border-radius: 999px;
        background: linear-gradient(135deg, #00aee4 0%, #0095c8 100%);
        border: none;
        color: #fff;
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
        box-shadow:
            0 6px 18px -4px rgba(0,174,228,.55),
            0 0 0 4px rgba(0,174,228,.10);
        transition: transform .15s ease, box-shadow .2s ease;
        position: relative;
        overflow: hidden;
    }
    .xt-mnav__pill::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
        background-size: 200% 100%;
        animation: xtPillShimmer 2.4s linear infinite;
    }
    @keyframes xtPillShimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    .xt-mnav__pill:active {
        transform: translateY(1px) scale(0.98);
    }
    .xt-mnav__pill-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }
    .xt-mnav__pill-text {
        position: relative;
        z-index: 1;
    }

    /* Stacked pill вариант (XBOT home): иконка слева + 2 строки текста справа.
       Главное действие («Начать») крупно, под ним подзаголовок-выгода
       («7 дней бесплатно»). Конденсирует Hero CTA + risk-reversal в один
       sticky-элемент → убираем большие дублирующие кнопки на мобиле.
       Иконка прижата к левому краю (asymmetric padding 14/18) — чтобы
       стек текста смещался вправо и слово «бесплатно» гарантированно
       помещалось без обреза на iPhone SE 320w. */
    .xt-mnav__pill--with-sub {
        height: 50px;
        padding: 0 14px 0 11px;
        gap: 7px;
    }
    .xt-mnav__pill-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 1px;
        line-height: 1;
        position: relative;
        z-index: 1;
    }
    .xt-mnav__pill--with-sub .xt-mnav__pill-text {
        font-size: 13.5px;
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: 0.01em;
    }
    .xt-mnav__pill-sub {
        font-size: 10px;
        font-weight: 500;
        line-height: 1.05;
        letter-spacing: 0.02em;
        opacity: 0.92;
        white-space: nowrap;
    }

    /* XBOT home — на мобиле прячем большие дублирующие CTA, оставляем
       только sticky-pill «Начать · 7 дней бесплатно». Уменьшает шум и
       фокусирует конверсию на всегда-видимый thumb-zone элемент.
       cta-section целиком прячем — без кнопки она бессмысленна. */
    body.xbot-home .hero__btn,
    body.xbot-home .hero__no-card,
    body.xbot-home .cta-section {
        display: none !important;
    }

    /* "Ещё" sheet — bottom-sheet с навигацией.
       (Default display:none установлен глобально выше — здесь только переопределяем
       параметры layout'а; .is-open включает видимость.) */
    .xt-sheet {
        position: fixed;
        inset: 0;
        z-index: 200;
        background: rgba(0,0,0,.55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .xt-sheet.is-open { display: block; }

    /* Back-to-top: уменьшаем и поднимаем над bottom-nav,
       чтобы не перекрывать pill */
    body.xtrade-page .back-to-top {
        width: 40px;
        height: 40px;
        font-size: 16px;
        bottom: 84px;
        right: 12px;
        line-height: 40px;
        opacity: 0.9;
        box-shadow: 0 4px 12px rgba(0,0,0,.4);
    }
    .xt-sheet__dialog {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 80vh;
        background: #1A1A1A;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.2,.8,.2,1);
        box-shadow: 0 -12px 40px -8px rgba(0,0,0,.5);
    }
    .xt-sheet.is-open .xt-sheet__dialog { transform: translateY(0); }
    .xt-sheet__handle {
        width: 36px;
        height: 4px;
        margin: 6px auto 14px;
        border-radius: 2px;
        background: rgba(255,255,255,.18);
    }
    .xt-sheet__title {
        font-size: 13px;
        font-weight: 600;
        color: rgba(255,255,255,.55);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin: 0 0 12px;
        padding: 0 4px;
    }
    .xt-sheet__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .xt-sheet__link {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 12px;
        border-radius: 12px;
        background: rgba(255,255,255,.03);
        color: var(--xt-text);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: background .15s ease;
    }
    .xt-sheet__link:hover { background: rgba(255,255,255,.06); }
    .xt-sheet__link-icon {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(0,174,228,.10);
        color: var(--xt-cyan);
        flex-shrink: 0;
    }
    .xt-sheet__link-icon svg { width: 18px; height: 18px; }
    .xt-sheet__link-arrow {
        margin-left: auto;
        color: rgba(255,255,255,.3);
        flex-shrink: 0;
    }
}

/* ════════════════════════════════════════════════════════════════════
   DESKTOP HERO LAYOUT REFINEMENTS (≥768px)
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .hero__card {
        flex: 0 0 auto;
        min-width: 380px;
        max-width: 460px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Hero CTA: Steam-первичный + Telegram-вторичный (desktop)
   Воронка в 1 клик: Landing → Steam OAuth → кабинет
   ════════════════════════════════════════════════════════════════════ */
.hero__btn.xt-hero-btn--steam {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 40px;
    font-size: 22px;
}
.hero__btn.xt-hero-btn--steam .xt-hero-btn__steam-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.xt-hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    margin-left: 14px;
    padding: 4px 0;
    color: rgba(255,255,255,.55);
    font-family: "Geologica", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s ease;
    position: relative;
}
.xt-hero-btn-secondary:hover {
    color: #00aee4;
}
.xt-hero-btn-secondary::after {
    content: '→';
    margin-left: 2px;
    transition: transform .2s ease;
}
.xt-hero-btn-secondary:hover::after {
    transform: translateX(3px);
}
.xt-hero-btn-secondary svg {
    flex-shrink: 0;
    color: rgba(255,255,255,.4);
    transition: color .2s ease;
}
.xt-hero-btn-secondary:hover svg {
    color: #00aee4;
}
@media (max-width: 991px) {
    .hero__btn.xt-hero-btn--steam {
        padding: 18px 28px;
        font-size: 18px;
        gap: 10px;
    }
    .hero__btn.xt-hero-btn--steam .xt-hero-btn__steam-icon {
        width: 24px;
        height: 24px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   .xt-eyebrow — premium "kicker"-бейдж над H1 (Linear/Vercel-style)
   "Сервис нового поколения" — задаёт future-level позиционирование
   ════════════════════════════════════════════════════════════════════ */
.xt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(0,174,228,.10);
    border: 1px solid rgba(0,174,228,.28);
    color: #6dd3f1;
    font-family: "Geologica", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.xt-eyebrow__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00aee4;
    box-shadow: 0 0 8px rgba(0,174,228,.7);
    animation: xtEyebrowPulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes xtEyebrowPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.85); }
}
@media (max-width: 767px) {
    /* На мобиле eyebrow живёт в .hero, который скрыт — но дублировать
       его в mobile-cabinet нет смысла, там и так Live-badge выполняет роль */
    .xt-eyebrow { display: none; }
}

/* На очень узких десктопах (768-991) карточка — full-width в hero */
@media (min-width: 768px) and (max-width: 991px) {
    .hero__block {
        flex-direction: column;
        gap: 32px;
    }
    .hero__card { width: 100%; max-width: 480px; align-self: center; }
}

/* ════════════════════════════════════════════════════════════════════
   ULTRA-NARROW MOBILE (≤359px) — iPhone SE 1st-gen / Galaxy Fold
   Сжимаем CTA-блоки и nav-pill, чтобы вмещалось без overflow
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 359px) {
    .xt-mobile-cabinet { padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 78px); }
    .xt-mobile-cabinet__brand { gap: 8px; padding: 2px 2px; }
    .xt-mobile-cabinet__brand-avatar { width: 36px; height: 36px; }
    .xt-mobile-cabinet__brand-avatar img { width: 18px; height: 18px; }
    .xt-mobile-cabinet__brand-title { font-size: 14.5px; }
    .xt-mobile-cabinet__brand-sub { font-size: 10px; }
    .xt-mobile-cabinet__title { font-size: 14.5px; }
    .xt-mobile-cabinet__cta-banner { padding: 9px 12px; gap: 8px; }
    .xt-mobile-cabinet { gap: 8px; }
    .xt-mobile-cabinet__cta-banner-icon { width: 32px; height: 32px; }
    .xt-mobile-cabinet__cta-banner-icon svg { width: 18px; height: 18px; }
    .xt-mobile-cabinet__cta-banner-title { font-size: 12.5px; }
    .xt-mobile-cabinet__cta-banner-sub { font-size: 10.5px; }

    .xt-card__head { padding: 12px 14px 8px; gap: 8px; }
    .xt-card__name { font-size: 12.5px; }
    .xt-card__icon-btn { width: 26px; height: 26px; }
    .xt-card__body { padding: 0 12px; }
    /* На самых узких устройствах (≤359px) даём stretch без max-height,
       но снижаем min-height чтобы карточка влезала в 85dvh SE landscape. */
    .xt-card__hero { min-height: 170px; }
    /* 4 столбца на 320px — самый ужатый шрифт */
    .xt-hero-stab { gap: 2px; padding: 0 3px; }
    .xt-hero-stab__pct { font-size: 10.5px; }
    .xt-hero-stab__count { font-size: 8.5px; }
    .xt-hero-stab__sub { font-size: 8.5px; }
    .xt-card__profit { margin: 8px 12px 0; padding: 10px 14px; }
    .xt-card__profit-abs { font-size: 22px; }
    .xt-card__profit-pct { font-size: 18px; height: 30px; padding: 0 9px; }
    .xt-card__cta-row { padding: 10px 12px; gap: 7px; }
    .xt-card__cta { min-height: 72px; padding: 7px 10px; }
    .xt-card__cta-cap { font-size: 11px; }
    .xt-card__cta-price { font-size: 18px; }
    .xt-card__cta-icon-wrap { width: 36px; }
    .xt-card__cta-icon { width: 36px; height: 36px; }
    .xt-card__cta-mkt-name { max-width: 36px; font-size: 8.5px; }

    /* Bottom nav — компактнее */
    .xt-mnav { padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 2px; }
    .xt-mnav__item { padding: 4px 2px; }
    .xt-mnav__item-icon { width: 20px; height: 20px; }
    .xt-mnav__item-icon svg { width: 20px; height: 20px; }
    .xt-mnav__item-label { font-size: 9px; }
    .xt-mnav__pill-wrap { padding: 0 2px; }
    .xt-mnav__pill { height: 40px; padding: 0 11px; font-size: 11.5px; gap: 5px; }
    .xt-mnav__pill-icon { width: 15px; height: 15px; }
    /* Stacked-pill на узких экранах (≤360w): сжимаем размеры, чтобы
       строка «7 дней бесплатно» гарантированно влезала. Иконка прижата
       к левому краю (padding 9/12). */
    .xt-mnav__pill--with-sub { height: 46px; padding: 0 12px 0 9px; gap: 7px; }
    .xt-mnav__pill--with-sub .xt-mnav__pill-text { font-size: 12px; }
    .xt-mnav__pill--with-sub .xt-mnav__pill-sub { font-size: 9px; letter-spacing: 0.015em; }
}

/* Между 360 и 374 (iPhone SE 1st gen около 320px вообще, но 2-3 gen = 375)
   Промежуточная адаптация для 360-374, чтобы pill не сдавливал labels */
@media (max-width: 374px) and (min-width: 360px) {
    .xt-mnav__pill { padding: 0 14px; font-size: 12.5px; }
    .xt-mnav__item-label { font-size: 9.5px; }
    /* Stacked-pill: компактнее padding/font на 360-374 */
    .xt-mnav__pill--with-sub { padding: 0 14px 0 11px; }
    .xt-mnav__pill--with-sub .xt-mnav__pill-text { font-size: 12.5px; }
    .xt-mnav__pill--with-sub .xt-mnav__pill-sub { font-size: 9.5px; }
}

/* ════════════════════════════════════════════════════════════════════
   TRUST-STRIP — компактный ряд из 5 площадок (заменяет старый
   marketplaces блок с cap/vol-метриками). Мобайл: горизонтальный
   scroll-ribbon с фиксированными tile-ами; desktop: центрированная
   flex-row. Цель — лёгкое доверие «5 площадок поддерживается»,
   без перегруза цифрами.
   ════════════════════════════════════════════════════════════════════ */
.xt-trust-strip {
    padding: 32px 0 12px;
}
.xt-trust-strip__cap {
    text-align: center;
    margin: 0 0 18px;
    color: rgba(255,255,255,.55);
    font-family: "Geologica", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.xt-trust-strip__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}
.xt-trust-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    transition: border-color .15s ease, background-color .15s ease;
}
.xt-trust-strip__item:hover {
    border-color: rgba(0,174,228,.32);
    background: rgba(0,174,228,.05);
}
.xt-trust-strip__icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.xt-trust-strip__name {
    color: rgba(255,255,255,.78);
    font-family: "Geologica", sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .xt-trust-strip { padding: 24px 0 8px; }
    .xt-trust-strip__cap { font-size: 12px; margin-bottom: 14px; }
    /* Mobile: горизонтальный скролл вместо wrap'а — все 5 в один ряд,
       пользователь свайпом видит весь набор. Скрываем scrollbar для
       чистого premium-вида (как в Apple App Store category-cards). */
    .xt-trust-strip__row {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 10px;
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .xt-trust-strip__row::-webkit-scrollbar { display: none; }
    .xt-trust-strip__item {
        padding: 8px 12px;
        gap: 8px;
        flex-shrink: 0;
    }
    .xt-trust-strip__icon { width: 18px; height: 18px; }
    .xt-trust-strip__name { font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════════════
   CTA-section: Steam-первичный + Telegram-вторичный (final CTA внизу)
   Аналог hero-CTA, но в horizontal CTA-секции на тёмном фоне.
   ════════════════════════════════════════════════════════════════════ */
.cta-section__btn.xt-cta-btn--steam {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.cta-section__btn.xt-cta-btn--steam .xt-hero-btn__steam-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.cta-section__sub {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    margin-left: 14px;
    padding: 4px 0;
    color: rgba(255,255,255,.55);
    font-family: "Geologica", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s ease;
    position: relative;
}
.cta-section__sub:hover { color: #00aee4; }
.cta-section__sub::after {
    content: '→';
    margin-left: 2px;
    transition: transform .2s ease;
}
.cta-section__sub:hover::after { transform: translateX(3px); }
.cta-section__sub svg {
    flex-shrink: 0;
    color: rgba(255,255,255,.4);
    transition: color .2s ease;
}
.cta-section__sub:hover svg { color: #00aee4; }
@media (max-width: 767px) {
    .cta-section__sub {
        display: flex;
        margin-left: 0;
        margin-top: 10px;
        justify-content: center;
    }
}

/* Pricing main CTA: Steam-button — кнопка сильнее, в один центр-в-один-row */
.xtrade-plan__btn--cta.xt-cta-btn--steam {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.xtrade-plan__btn--cta.xt-cta-btn--steam .xt-hero-btn__steam-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Универсальный fallback: любая кнопка с .xt-cta-btn--steam —
   pricing-cta__btn, scanner-promo__btn, partner-cta__btn, protection-cta__btn и т.д. */
.xt-cta-btn--steam {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.xt-cta-btn--steam .xt-hero-btn__steam-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER — «by [XBOT logo]» вместо текстового «by XBOT». Используем
   тот же SVG что в шапке. Высота под x-height текста "by", лёгкое
   nudge вниз чтобы оптически выровнять с базовой линией tagline.
   ════════════════════════════════════════════════════════════════════ */
.xtrade-footer__brand-logo {
    height: 14px;
    width: auto;
    margin-left: 4px;
    vertical-align: -2px;        /* fine-tune под baseline tagline-текста */
    opacity: 0.85;               /* чуть приглушаем, чтобы не спорил с XTrade-логотипом слева */
    transition: opacity 0.2s ease;
}
.xtrade-footer__brand-logo:hover { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════
   MARKETPLACES — premium-сетка из 5 карточек с инфо: объём, кол-во
   скинов, направление сделок (Покупка / Продажа / Покупка + продажа).
   Десктоп: 5 в ряд (вертикальные карточки). Планшет: компактнее.
   Мобайл: одна колонка с горизонтальной компоновкой каждой карточки
   (icon | info | tag) — премиально и информативно даже на iPhone SE.
   ════════════════════════════════════════════════════════════════════ */
.xt-mkt {
    padding: 56px 0 32px;
    /* Тёмный full-width фон секции. На десктопе body.xtrade-page остаётся
       light (наследует от styles.css/reset), и наша palette (color: #fff,
       rgba(255,255,255,*) для name/sub/cap) сливалась бы с белым body.
       Задаём собственный page-tone фон секции (тот же что body на mobile —
       #0d0e10 + лёгкий gradient вниз для глубины). */
    background: linear-gradient(180deg, #0d0e10 0%, #0a0b0e 100%);
    position: relative;
}
/* Мягкий halo сверху по центру — premium subtle vignette, чтобы заголовок
   читался не на «просто чёрном» а на slightly-tinted фоне. */
.xt-mkt::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(720px, 90%);
    height: 220px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center top, rgba(0, 174, 228, 0.10) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.xt-mkt > * {
    position: relative;
    z-index: 1;
}
.xt-mkt__header {
    text-align: center;
    margin-bottom: 28px;
}
.xt-mkt__title {
    font-family: "Geologica", sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}
.xt-mkt__sub {
    color: rgba(255, 255, 255, 0.55);
    font-family: "Geologica", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    max-width: 580px;
    margin: 0 auto;
}
.xt-mkt__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    max-width: 1100px;
    margin: 0 auto;
}
.xt-mkt__card {
    /* Поднимаем opacity rgba-gradient'а с 0.04→0.06 (top) и 0.015→0.025
       (bottom): на pure-dark секции premium «glass» эффект становится
       заметнее, иначе карточки сливаются с фоном. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 22px 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.xt-mkt__card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.18);
}
.xt-mkt__icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}
.xt-mkt__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.xt-mkt__name {
    color: #fff;
    font-family: "Geologica", sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
}
.xt-mkt__cap {
    color: #00aee4;
    font-family: "Geologica", sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-top: 2px;
}
.xt-mkt__vol {
    color: rgba(255, 255, 255, 0.45);
    font-family: "Geologica", sans-serif;
    font-size: 12px;
    font-weight: 500;
}
.xt-mkt__tag {
    display: inline-block;
    font-family: "Geologica", sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    margin-top: 4px;
    white-space: nowrap;
}
.xt-mkt__tag--buy {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.28);
}
.xt-mkt__tag--sell {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.28);
}
.xt-mkt__tag--both {
    background: rgba(0, 174, 228, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(0, 174, 228, 0.32);
}

/* Tablet (768-1023px) — компактнее, 5 в ряд */
@media (max-width: 1023px) and (min-width: 768px) {
    .xt-mkt__grid {
        gap: 10px;
        padding: 0 12px;
    }
    .xt-mkt__card { padding: 18px 10px 14px; gap: 8px; }
    .xt-mkt__icon { width: 34px; height: 34px; }
    .xt-mkt__name { font-size: 13.5px; }
    .xt-mkt__cap { font-size: 18px; }
    .xt-mkt__vol { font-size: 11px; }
    .xt-mkt__tag { font-size: 9.5px; padding: 4px 8px; letter-spacing: 0.03em; }
}

/* Mobile (≤767px) — одна колонка, горизонтальная компоновка карточек:
   icon | info (name сверху, cap·vol снизу одной строкой) | tag справа. */
@media (max-width: 767px) {
    .xt-mkt { padding: 36px 0 20px; }
    .xt-mkt__header { margin-bottom: 18px; }
    .xt-mkt__title { font-size: 20px; }
    .xt-mkt__sub { font-size: 12.5px; padding: 0 18px; }
    .xt-mkt__grid {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 0 12px;
    }
    .xt-mkt__card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 14px;
        padding: 13px 14px;
    }
    .xt-mkt__icon { width: 36px; height: 36px; }
    .xt-mkt__info {
        flex: 1 1 auto;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
    }
    .xt-mkt__name {
        font-size: 14px;
        line-height: 1.15;
    }
    .xt-mkt__cap {
        display: inline;
        font-size: 15.5px;
        line-height: 1.1;
        margin-top: 0;
    }
    .xt-mkt__vol {
        display: inline;
        font-size: 11.5px;
    }
    .xt-mkt__vol::before {
        content: "·";
        margin: 0 6px;
        opacity: 0.5;
    }
    .xt-mkt__tag {
        flex-shrink: 0;
        align-self: center;
        margin-top: 0;
        font-size: 9px;
        padding: 4px 8px;
        letter-spacing: 0.03em;
    }
}

/* Очень узкие (≤359px, iPhone SE) — тег переезжает под инфо-блок,
   чтобы карточка не сжималась и текст не дробился. */
@media (max-width: 359px) {
    .xt-mkt__card {
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 12px;
    }
    .xt-mkt__info {
        flex: 1 1 calc(100% - 50px);
    }
    .xt-mkt__tag {
        margin-left: 50px;       /* выровнено по инфо-блоку (icon 36 + gap 14) */
        font-size: 9px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   PRICING — mobile layout 1+2 (Free сверху + Pro/Premium 2 колонки).
   Усиленный popular-highlight + lifetime badge.
   ════════════════════════════════════════════════════════════════════ */

/* Fire-badge для «Самый популярный»: cyan + микро-pulse-glow.
   Используется поверх стандартного xtrade-plan__badge. */
.xtrade-plan__badge--fire {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #00c5ff 0%, #00aee4 50%, #0089b8 100%);
    box-shadow: 0 4px 14px rgba(0, 174, 228, 0.4),
                0 0 0 1px rgba(0, 174, 228, 0.18) inset;
    padding: 6px 14px;
}
.xtrade-plan__badge--fire svg {
    width: 11px;
    height: 11px;
    color: #fff;
    flex-shrink: 0;
}

/* Popular tier — чуть приподнят и подсвечен сильнее. Только на десктопе
   и планшетах, чтобы конверсионный акцент был на «Pro» по умолчанию. */
@media (min-width: 768px) {
    .xtrade-plan--popular {
        transform: translateY(-8px);
        box-shadow: 0 16px 40px rgba(0, 174, 228, 0.18),
                    0 0 0 1px rgba(0, 174, 228, 0.28);
    }
}

/* Premium-вариант: нейтральная глубокая окантовка, чтобы не конкурировать
   с Pro по визуальной массе, но выглядеть «старше» Free. */
.xtrade-plan--premium {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Все 3 карточки тарифов — flex-column, чтобы хедер был сверху,
   фичи занимали всё свободное место (flex: 1) и низы выравнивались
   между Pro и Premium вне зависимости от длины списка. */
.xtrade-plan {
    display: flex;
    flex-direction: column;
}
.xtrade-plan__features {
    flex: 1 1 auto;
}

/* Mobile (≤640px) — переопределяем сетку: 1 ряд Free, 2 ряд Pro+Premium.
   xtrade.css в этом брейкпоинте делает 1fr (все 3 в одну колонку), что
   слишком высокий блок. Наша задача — компактнее: Free baseline, ниже
   2 колонки с двумя платными тарифами рядом. */
@media (max-width: 640px) {
    .xtrade-pricing {
        padding: 56px 0;
    }
    .xtrade-pricing__grid--1plus2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas: "free free" "pro premium" !important;
        gap: 14px;
        max-width: 100%;
        margin: 32px auto 0;
        padding: 0 12px;
        align-items: stretch; /* выровнять Pro и Premium по высоте */
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan--free { grid-area: free; }
    .xtrade-pricing__grid--1plus2 .xtrade-plan--popular { grid-area: pro; }
    .xtrade-pricing__grid--1plus2 .xtrade-plan--premium { grid-area: premium; }

    /* Free сверху — горизонтальная компоновка: цена слева, фичи справа */
    .xtrade-pricing__grid--1plus2 .xtrade-plan--free {
        padding: 18px 18px 14px;
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan--free .xtrade-plan__header {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan--free .xtrade-plan__name {
        font-size: 1rem;
        margin-bottom: 6px;
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan--free .xtrade-plan__amount {
        font-size: 1.6rem;
    }

    /* 2 колонки — компактнее padding/font, чтобы вместить 2 тарифа.
       Цена в столбец (amount сверху, period снизу) — стабильнее
       при любом сочетании цифр (999 / 1 999 / 19 999) и не ломается
       переносом в узкой колонке. */
    .xtrade-pricing__grid--1plus2 .xtrade-plan--popular,
    .xtrade-pricing__grid--1plus2 .xtrade-plan--premium {
        padding: 22px 14px 16px;
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan--popular .xtrade-plan__header,
    .xtrade-pricing__grid--1plus2 .xtrade-plan--premium .xtrade-plan__header {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan--popular .xtrade-plan__name,
    .xtrade-pricing__grid--1plus2 .xtrade-plan--premium .xtrade-plan__name {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan--popular .xtrade-plan__price,
    .xtrade-pricing__grid--1plus2 .xtrade-plan--premium .xtrade-plan__price {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan--popular .xtrade-plan__amount,
    .xtrade-pricing__grid--1plus2 .xtrade-plan--premium .xtrade-plan__amount {
        font-size: 1.45rem;
        line-height: 1.1;
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan--popular .xtrade-plan__period,
    .xtrade-pricing__grid--1plus2 .xtrade-plan--premium .xtrade-plan__period {
        font-size: 0.72rem;
        opacity: 0.7;
    }
    /* Free — оставляем оригинальный inline-формат: «0 ₽ навсегда» */
    .xtrade-pricing__grid--1plus2 .xtrade-plan--free .xtrade-plan__period {
        font-size: 0.78rem;
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan__features li {
        font-size: 0.78rem;
        padding: 7px 0 7px 22px;
        line-height: 1.35;
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan__features li::before {
        width: 13px;
        height: 13px;
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan__badge--fire {
        padding: 4px 10px;
        font-size: 9px;
        gap: 4px;
        top: -11px;
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan__badge--fire svg { width: 9px; height: 9px; }
}

/* На очень узких устройствах (≤359px) — даём ещё чуть-чуть компресса */
@media (max-width: 359px) {
    .xtrade-pricing__grid--1plus2 { gap: 10px; padding: 0 8px; }
    .xtrade-pricing__grid--1plus2 .xtrade-plan--popular,
    .xtrade-pricing__grid--1plus2 .xtrade-plan--premium {
        padding: 20px 11px 14px;
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan__features li {
        font-size: 0.72rem;
        padding: 6px 0 6px 20px;
    }
    .xtrade-pricing__grid--1plus2 .xtrade-plan--popular .xtrade-plan__amount,
    .xtrade-pricing__grid--1plus2 .xtrade-plan--premium .xtrade-plan__amount {
        font-size: 1.3rem;
    }
}