/* ================================================================================
   XT-PAGES — все page-level блоки лендинга XTrades.
   Чистая система без legacy-overrides. Использует tokens.css + xt-system.css.

   Подключается ПОСЛЕ xt-system.css, до swiper-bundle (если есть).
   Все классы .xt-* — не пересекаются ни с одним legacy-селектором.
   ================================================================================ */

/* ──────────────────────────────────────────────────────────────────────────
   PAGE-LEVEL RESET для тех элементов body, что мы переписали.
   Не трогаем header / footer / mobile-nav / farmer-modal — они legacy.
   ────────────────────────────────────────────────────────────────────────── */

body.xbot-home {
  background: var(--bg-base);
  color: var(--fg-secondary);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Гасим нативный mobile tap-highlight (Safari/Chrome рисует прямоугольник
     по bounding-box, ломая круглые/pill кнопки). Свои :active/:focus-visible
     дают визуальный ответ — нативный квадрат не нужен. */
  -webkit-tap-highlight-color: transparent;
}

/* ──────────────────────────────────────────────────────────────────────────
   HERO
   ────────────────────────────────────────────────────────────────────────── */

.xt-hero {
  /* full-viewport hero, контент по центру */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  /* симметричные padding'и → реальный визуальный центр.
     Header position:fixed, но header transparent на самом верху,
     поэтому большой top-offset не нужен. */
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  position: relative;
  background: transparent;
}

.xt-hero .xt-container {
  width: 100%;
}

/* 2-column hero: text-col (1.2fr) + visual-col (1fr live deals).
   align-items: center — лента вертикально центрирована относительно
   текстовой колонки (визуальный баланс по центру hero). */
.xt-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-12);
  max-width: 1240px;
  margin: 0;
}

/* Single-column centered hero — для 404 / coming-soon / простых state
   страниц. Текст и CTA по центру; нет visual-колонки. */
.xt-hero__inner--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.xt-hero__inner--single .xt-hero__col--text {
  align-items: center;
}

.xt-hero__inner--single .xt-eyebrow,
.xt-hero__inner--single .xt-hero__title,
.xt-hero__inner--single .xt-hero__lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.xt-hero__inner--single .xt-hero__cta-row {
  justify-content: center;
}

.xt-hero__col {
  min-width: 0; /* предохранитель против overflow в grid */
}

.xt-hero__col--text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.xt-hero__col--visual {
  /* visual-якорь для глаза: live deals stack */
}

.xt-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 56px);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.05;
  margin: 0 0 var(--space-5);
  padding: 0;
  text-align: left;
  /* hard break через \n в HTML — иначе typewriter "прыгает": сначала
     умещает "на ск" в первую строку, потом переносит "скинах" вниз. */
  white-space: pre-line;
  text-wrap: balance;
}

.xt-hero__lead {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-normal);
  color: var(--fg-tertiary);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-8);
  padding: 0;
  max-width: 580px;
  text-align: left;
}

/* ROI tooltip mark */
.xt-hero__lead .xt-roi-note {
  position: relative;
  color: var(--accent);
  cursor: help;
  font-weight: var(--weight-medium);
  margin-left: 1px;
}

.xt-hero__lead .xt-roi-note__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--fg-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease);
  z-index: var(--z-base);
}

.xt-hero__lead .xt-roi-note:hover .xt-roi-note__tip,
.xt-hero__lead .xt-roi-note:focus .xt-roi-note__tip {
  opacity: 1;
}

.xt-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
}

/* li-обёртка: tap-target живёт на ребёнке (<a>|<span>), сам li — пустой
   контейнер для grid-позиционирования. Это позволяет full-area click. */
.xt-hero__chip {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.xt-hero__chip > a,
.xt-hero__chip > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}

.xt-hero__chip > a:hover {
  border-color: var(--border-default);
  color: var(--fg-primary);
}

/* Акцентный chip (Гарантия) — приглашает кликнуть */
.xt-hero__chip--accent > a {
  border-color: var(--accent-border);
  color: var(--accent);
}

.xt-hero__chip--accent > a:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.xt-hero__chip-arrow {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease);
}

.xt-hero__chip--accent > a:hover .xt-hero__chip-arrow {
  transform: translateX(2px);
}

.xt-hero__chip > a:focus-visible,
.xt-hero__chip > span:focus-visible {
  outline: 2px solid var(--accent-border);
  outline-offset: 2px;
}

.xt-hero__cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   xt-btn — primary CTA component
   ──────────────────────────────────────────────────────────────────────────
   Premium-pattern: hover не меняет hue (нет «вырвиглаз»), а поднимает
   кнопку через elevation (shadow). Active — depressed (translateY).
   Inner-highlight даёт subtle Apple-look без обмана gradient'ом.
   ────────────────────────────────────────────────────────────────────────── */

.xt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}

/* Primary — глубокий sapphire. Без halo, без translate.
   Inner-highlight даёт subtle Apple-объём, не ярче и не темнее. */
.xt-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg-on);
  font-weight: var(--weight-semi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Hover — shift в lighter (бывший бренд-cyan #00aee4). Кнопка «оживает».
   Active ниже даёт press-feedback в обратную сторону (deeper). */
.xt-btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Active — ещё глубже (тактильный «уплотнённый» feedback без перемещения) */
.xt-btn--primary:active {
  background: var(--accent-active);
  border-color: var(--accent-active);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: background 60ms linear, box-shadow 60ms linear;
}

/* Focus-visible — клавиатурная навигация, accessibility */
.xt-btn--primary:focus-visible {
  outline: 2px solid var(--accent-border);
  outline-offset: 3px;
}

.xt-btn--ghost {
  background: transparent;
  border-color: var(--border-default);
  color: var(--fg-secondary);
}

.xt-btn--ghost:hover {
  border-color: var(--border-strong);
  color: var(--fg-primary);
}

.xt-btn--ghost:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 3px;
}

/* Large variant — hero/pricing CTA. Высота ≈56px (comfort tier).
   Padding-ratio 1:2 (20:40), font 17px semibold, icon 22px. */
.xt-btn--lg {
  padding: 18px 36px;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  border-radius: var(--radius-lg);
  gap: var(--space-3);
}

.xt-btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Icon в --lg вариации — 22px (≈130% от 17px text) */
.xt-btn--lg .xt-btn__icon {
  width: 22px;
  height: 22px;
}


/* Hero scroll-down link */
.xt-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

.xt-hero__scroll:hover {
  color: var(--fg-secondary);
}

.xt-hero__scroll-icon {
  width: 12px;
  height: 12px;
  /* Компенсируем визуальную асимметрию SVG-стрелки: path peak в 62.5%
     viewBox-а => без сдвига иконка кажется сидящей ниже центра строки. */
  position: relative;
  top: -1px;
  animation: xtBounce 2.4s var(--ease) infinite;
}

/* Симметричное парение вокруг визуального центра строки (±2px), а не
   только вниз — раньше нижняя точка уезжала ниже baseline-а текста. */
@keyframes xtBounce {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(2px); }
}

/* ──────────────────────────────────────────────────────────────────────────
   xt-hero__live — visual anchor: live deals stack
   ──────────────────────────────────────────────────────────────────────────
   Без рамки/фона. Только hairline-разделители между сделками.
   Mono-typography, tabular numbers, accent на профите. Pulse-dot = live-feel.
   ────────────────────────────────────────────────────────────────────────── */

.xt-hero__live {
  display: flex;
  flex-direction: column;
  gap: 0; /* head вплотную к viewport — лента уезжает прямо под него */
  width: 100%;
  max-width: 500px;
  margin-left: auto; /* прижать вправо в visual-колонке */
}

.xt-hero__live-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--border-subtle); /* крыша treadmill'а */
}

.xt-hero__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(2, 165, 216, 0.55);
  animation: xtLivePulse 2.2s var(--ease) infinite;
  flex-shrink: 0;
}

@keyframes xtLivePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(2, 165, 216, 0.45);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(2, 165, 216, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(2, 165, 216, 0);
  }
}

.xt-hero__live-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────────────
   Treadmill (trading-terminal pattern):
   .xt-hero__deals       — статичный viewport фиксированной высоты, overflow:hidden,
                           top mask-fade → ушедшая строка растворяется под шапкой.
   .xt-hero__deals-track — внутренний трек, JS двигает его translateY(-row-height),
                           после окончания transition: новая снизу append, верхняя
                           remove, transform сбрасывается без transition (snap).
   ────────────────────────────────────────────────────────────────────────── */

.xt-hero__deals {
  --xt-deal-rows: 3;
  --xt-deal-row-h: 72px;
  position: relative;
  height: calc(var(--xt-deal-rows) * var(--xt-deal-row-h));
  overflow: hidden;
  /* Mask: top 32px растворяется под шапкой,
     bottom 24px — мягкое появление (не строгий cut-off) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 32px,
    #000 calc(100% - 24px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 32px,
    #000 calc(100% - 24px),
    transparent 100%
  );
}

.xt-hero__deals-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* transition / transform управляются JS'ом на каждом tick'е */
  transform: translateY(0);
  will-change: transform;
}

.xt-hero__deal {
  height: var(--xt-deal-row-h);
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: 0;
  border-bottom: 1px solid var(--border-subtle);
  box-sizing: border-box;
}

.xt-hero__deal:last-child {
  border-bottom: 0;
}

.xt-hero__deal-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.xt-hero__deal-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background-color: var(--fg-tertiary);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: background-color var(--duration-fast) var(--ease);
}

.xt-hero__deal:hover .xt-hero__deal-icon {
  background-color: var(--accent);
}

.xt-hero__deal-icon[data-kind="knife"]     { -webkit-mask-image: url("../images/m9.svg");        mask-image: url("../images/m9.svg"); }
.xt-hero__deal-icon[data-kind="karambit"]  { -webkit-mask-image: url("../images/karambit.svg");  mask-image: url("../images/karambit.svg"); }
.xt-hero__deal-icon[data-kind="butterfly"] { -webkit-mask-image: url("../images/butterfly.svg"); mask-image: url("../images/butterfly.svg"); }
.xt-hero__deal-icon[data-kind="rifle"]     { -webkit-mask-image: url("../images/ak.svg");        mask-image: url("../images/ak.svg"); }
.xt-hero__deal-icon[data-kind="m4"]        { -webkit-mask-image: url("../images/m4.svg");        mask-image: url("../images/m4.svg"); }
.xt-hero__deal-icon[data-kind="sniper"]    { -webkit-mask-image: url("../images/awp.svg");       mask-image: url("../images/awp.svg"); }
.xt-hero__deal-icon[data-kind="pistol"]    { -webkit-mask-image: url("../images/usp.svg");       mask-image: url("../images/usp.svg"); }
.xt-hero__deal-icon[data-kind="glock"]     { -webkit-mask-image: url("../images/glock.svg");     mask-image: url("../images/glock.svg"); }
.xt-hero__deal-icon[data-kind="deagle"]    { -webkit-mask-image: url("../images/deagle.svg");    mask-image: url("../images/deagle.svg"); }

.xt-hero__deal-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.xt-hero__deal-weapon {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
}

.xt-hero__deal-skin {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1;
}

.xt-hero__deal-prices {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--fg-tertiary);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.xt-hero__deal-buy {
  color: var(--fg-quaternary);
}

.xt-hero__deal-arrow {
  color: var(--fg-disabled);
  font-size: 11px;
  margin: 0 1px;
}

.xt-hero__deal-sell {
  color: var(--fg-secondary);
}

.xt-hero__deal-profit {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--weight-semi);
  color: var(--accent);
  letter-spacing: 0;
  line-height: 1;
  text-align: right;
  min-width: 48px;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .xt-hero__live-dot {
    animation: none;
    box-shadow: 0 0 0 2px var(--accent-soft);
  }
  .xt-hero__deals-track {
    transition: none !important;
    transform: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   HERO MOTION — typewriter текста + fade CTA + landing live deals.
   Только page-load. Дальше всё статично.
   ────────────────────────────────────────────────────────────────────────── */

@keyframes xt-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes xt-fade-card {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes xt-caret-blink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Текстовые элементы Hero — initial state скрыт.
   JS-typewriter (eyebrow/title/lead/scroll-link) включает opacity при is-typing.
   Chips — pure fade-in stagger (typewriter на коротких чипах смотрится дёшево). */
.xt-hero .xt-eyebrow,
.xt-hero__title,
.xt-hero__lead,
.xt-hero__chips > li,
.xt-hero__cta-row > .xt-hero__scroll {
  opacity: 0;
}

/* Chips — плавный fade-in вместо посимвольной печати. */
.xt-hero__chips > li {
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.xt-hero .xt-eyebrow.is-typing,    .xt-hero .xt-eyebrow.is-typed,
.xt-hero__title.is-typing,         .xt-hero__title.is-typed,
.xt-hero__lead.is-typing,          .xt-hero__lead.is-typed,
.xt-hero__chips > li.is-revealed,
.xt-hero__cta-row > .xt-hero__scroll.is-typing,
.xt-hero__cta-row > .xt-hero__scroll.is-typed {
  opacity: 1;
}

/* Caret — мигающая полоса в конце печатаемой строки. */
.xt-typewrite-caret {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 1px;
  background: currentColor;
  vertical-align: -0.05em;
  animation: xt-caret-blink 0.85s steps(1) infinite;
}

/* ── HERO TITLE GAME-SWAP ──────────────────────────────────────────────────
   После основного typewriter title → запускаем цикл смены последнего слова:
   CS2 → DOTA2 → Rust → TF2 → CS2 (стоп). JS залочит min-width по самому
   длинному слову (DOTA2), чтобы layout не дёргался. Caret внутри span
   подсвечивает что слово «живое». accent-color чуть приподнимает слово
   из общей массы, не ломая иерархию (subtle hint, не баннер). */
.xt-hero__title-swap {
  display: inline-block;
  text-align: left;
  /* min-width задаётся JS-ом после measure (probe) */
  white-space: nowrap;
  /* лёгкий цветной hint что слово динамическое (только во время swap-фазы) */
  transition: color var(--duration-base) var(--ease);
}

.xt-hero__title-swap.is-swapping {
  color: var(--accent-hover);
}

/* Caret внутри swap-span — стандартный xt-typewrite-caret уже наследует
   currentColor → автоматически перекрашивается в accent во время swap. */

@media (prefers-reduced-motion: reduce) {
  .xt-hero__title-swap.is-swapping { color: inherit; }
}

/* CTA primary — pure fade-in после конца typewriter chain. */
.xt-hero__cta-row > .xt-btn--primary {
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.xt-hero__cta-row > .xt-btn--primary.is-revealed {
  opacity: 1;
}

/* Live deals card — приземляется (rise + fade-card). */
.xt-hero__live                             { animation: xt-fade-card  800ms cubic-bezier(0.16, 1, 0.3, 1) 250ms both; }
.xt-hero__live-counter                     { animation: xt-rise       700ms cubic-bezier(0.16, 1, 0.3, 1) 480ms both; }

.xt-hero__deal[data-xt-mount]:nth-child(1) { animation: xt-rise       700ms cubic-bezier(0.16, 1, 0.3, 1) 580ms both; }
.xt-hero__deal[data-xt-mount]:nth-child(2) { animation: xt-rise       700ms cubic-bezier(0.16, 1, 0.3, 1) 660ms both; }
.xt-hero__deal[data-xt-mount]:nth-child(3) { animation: xt-rise       700ms cubic-bezier(0.16, 1, 0.3, 1) 740ms both; }

/* LIVE-dot pulse — delayed до конца landing ленты. */
.xt-hero__live-dot {
  animation: xtLivePulse 2.2s var(--ease) 1100ms infinite;
}

/* Reduced-motion: всё мгновенно. */
@media (prefers-reduced-motion: reduce) {
  .xt-hero .xt-eyebrow,
  .xt-hero__title,
  .xt-hero__lead,
  .xt-hero__chips > li,
  .xt-hero__cta-row > *,
  .xt-hero__live,
  .xt-hero__live-counter,
  .xt-hero__deal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .xt-typewrite-caret { display: none; }
  .xt-hero__live-dot {
    animation: none !important;
    box-shadow: 0 0 0 2px var(--accent-soft);
  }
}

/* Single-column hero (404, coming-soon, etc.) — статичная страница без
   typewriter / preloader / live-deals choreography. На главном лендинге
   текст и primary-CTA стартуют с opacity: 0 и поднимаются JS-ом по событию
   xt:preloader-done; здесь этого скрипта нет → нужен явный override,
   иначе вся секция остаётся невидимой. */
.xt-hero__inner--single .xt-eyebrow,
.xt-hero__inner--single .xt-hero__title,
.xt-hero__inner--single .xt-hero__lead,
.xt-hero__inner--single .xt-hero__cta-row > *,
.xt-hero__inner--single .xt-hero__cta-row > .xt-btn--primary,
.xt-hero__inner--single .xt-hero__cta-row > .xt-hero__scroll {
  opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────────────
   STATS — без header/eyebrow, full-width, hairlines между ячейками
   ────────────────────────────────────────────────────────────────────────── */

.xt-stats {
  padding: var(--space-16) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.xt-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.xt-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  position: relative;
}

.xt-stat:first-child {
  padding-left: 0;
}

.xt-stat:last-child {
  padding-right: 0;
}

.xt-stat + .xt-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--border-subtle);
}

.xt-stat__value {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.xt-stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1.3;
}

/* ──────────────────────────────────────────────────────────────────────────
   STEAM CONFIRM — два сценария (телефон vs SDA) + warning
   ────────────────────────────────────────────────────────────────────────── */

.xt-confirm {
  /* наследует .xt-section */
}

.xt-confirm__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
}

.xt-confirm__grid::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-subtle);
}

.xt-confirm__card {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-10);
}

.xt-confirm__card:first-child {
  padding-left: 0;
}

.xt-confirm__card:last-child {
  padding-right: 0;
}

.xt-confirm__num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--accent);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1;
}

.xt-confirm__num::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--accent);
}

.xt-confirm__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 4px;
}

.xt-confirm__tag {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--fg-tertiary);
  margin: 0 0 var(--space-5);
}

.xt-confirm__lead {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--fg-secondary);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-3);
  max-width: 460px;
}

.xt-confirm__text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-6);
  max-width: 460px;
}

.xt-confirm__pluses {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.xt-confirm__pluses-label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.xt-confirm__pluses-text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-secondary);
  line-height: var(--leading-normal);
}

/* Warning row под grid */
.xt-confirm__warning {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: var(--space-5);
}

.xt-confirm__warning-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--warning);
  align-self: center;
}

.xt-confirm__warning-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke-width: 1.6;
}

.xt-confirm__warning-content {
  min-width: 0;
}

.xt-confirm__warning-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  margin: 0 0 3px;
}

.xt-confirm__warning-text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  line-height: var(--leading-normal);
  margin: 0;
  max-width: 720px;
}

/* ──────────────────────────────────────────────────────────────────────────
   MARKETPLACES — 5 платформ + сценарий + alt-mention
   ────────────────────────────────────────────────────────────────────────── */

.xt-platforms {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-12);
}

.xt-platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  position: relative;
  text-align: center;
}

.xt-platform + .xt-platform::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: var(--border-subtle);
}

.xt-platform__icon {
  width: 32px;
  height: 32px;
  display: block;
  margin-bottom: var(--space-2);
  filter: brightness(0) invert(1) opacity(0.85);
  transition: filter var(--duration-fast) var(--ease);
}

.xt-platform:hover .xt-platform__icon {
  filter: brightness(0) invert(1) opacity(1);
}

.xt-platform__name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.xt-platform__cap {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.xt-platform__vol {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: var(--space-1);
}

/* Profit scenario */
.xt-scenario {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  padding: var(--space-6);
}

.xt-scenario__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--accent);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.xt-scenario__head-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.xt-scenario__row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
  gap: var(--space-5);
  align-items: center;
}

.xt-scenario__skin {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-card);
  border-radius: var(--radius-md);
}

.xt-scenario__skin-img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background-color: var(--fg-tertiary);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.xt-scenario__skin-img[data-kind="knife"]     { -webkit-mask-image: url("../images/m9.svg");        mask-image: url("../images/m9.svg"); }
.xt-scenario__skin-img[data-kind="karambit"]  { -webkit-mask-image: url("../images/karambit.svg");  mask-image: url("../images/karambit.svg"); }
.xt-scenario__skin-img[data-kind="butterfly"] { -webkit-mask-image: url("../images/butterfly.svg"); mask-image: url("../images/butterfly.svg"); }
.xt-scenario__skin-img[data-kind="rifle"]     { -webkit-mask-image: url("../images/ak.svg");        mask-image: url("../images/ak.svg"); }
.xt-scenario__skin-img[data-kind="m4"]        { -webkit-mask-image: url("../images/m4.svg");        mask-image: url("../images/m4.svg"); }
.xt-scenario__skin-img[data-kind="sniper"]    { -webkit-mask-image: url("../images/awp.svg");       mask-image: url("../images/awp.svg"); }
.xt-scenario__skin-img[data-kind="pistol"]    { -webkit-mask-image: url("../images/usp.svg");       mask-image: url("../images/usp.svg"); }
.xt-scenario__skin-img[data-kind="glock"]     { -webkit-mask-image: url("../images/glock.svg");     mask-image: url("../images/glock.svg"); }
.xt-scenario__skin-img[data-kind="deagle"]    { -webkit-mask-image: url("../images/deagle.svg");    mask-image: url("../images/deagle.svg"); }

.xt-scenario__skin-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.xt-scenario__skin-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xt-scenario__skin-quality {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.xt-scenario__flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}

.xt-scenario__price {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-height: 64px;
}

.xt-scenario__price--sell {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.xt-scenario__price-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-color: var(--fg-secondary);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.xt-scenario__price-icon[data-platform="lis-skins"]   { -webkit-mask-image: url("../images/platforms/lis-skins.svg");   mask-image: url("../images/platforms/lis-skins.svg"); }
.xt-scenario__price-icon[data-platform="market-csgo"] { -webkit-mask-image: url("../images/platforms/market-csgo.svg"); mask-image: url("../images/platforms/market-csgo.svg"); }
.xt-scenario__price-icon[data-platform="csmoney"]     { -webkit-mask-image: url("../images/platforms/csmoney.svg");     mask-image: url("../images/platforms/csmoney.svg"); }
.xt-scenario__price-icon[data-platform="dmarket"]     { -webkit-mask-image: url("../images/platforms/dmarket.svg");     mask-image: url("../images/platforms/dmarket.svg"); }
.xt-scenario__price-icon[data-platform="bitskins"]    { -webkit-mask-image: url("../images/platforms/bitskins.svg");    mask-image: url("../images/platforms/bitskins.svg"); }

/* На sell-карточке (accent-soft фон) иконка в accent тон — visual cue "куда продаём". */
.xt-scenario__price--sell .xt-scenario__price-icon {
  background-color: var(--accent);
}

.xt-scenario__price-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.xt-scenario__price-platform {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.xt-scenario__price-value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.xt-scenario__price-fee {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wide);
}

.xt-scenario__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--fg-quaternary);
  font-size: 18px;
}

.xt-scenario__profit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.xt-scenario__profit-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.xt-scenario__profit-value {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semi);
  color: var(--success);
  letter-spacing: var(--tracking-tight);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.xt-scenario__profit-pct {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--success);
  letter-spacing: var(--tracking-wide);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Alt mention — XTRADE Scanner для ручной торговли */
.xt-alt-mention {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-subtle);
}

.xt-alt-mention__lead {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.xt-alt-mention__brand {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--accent);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.xt-alt-mention__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
}

.xt-alt-mention__desc {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  line-height: var(--leading-snug);
  max-width: 580px;
}

.xt-alt-mention__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease);
}

.xt-alt-mention__link:hover {
  color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════════════════
   ВЕБ-АРБИТРАЖ — секция #xtrade
   ────────────────────────────────────────────────────────────────────────────
   Layout:
     .xt-arb              — 2-column grid (copy 1.05fr | preview 1fr)
     .xt-arb__copy        — 4 value-props (icon + title + text) + CTA
     .xt-arb__preview     — единственная rotating .xt-arb__card; вертикально
                            центруется относительно левой колонки
     .xt-arb__card        — silver (по умолчанию) или --gold (премиум)
     .xt-arb__card-bars   — 4 столбика стабильности (78%/84%/89%/94%)
                            + weapon mask-image (data-kind=…) на фоне
     .xt-arb__card-markets— buy / arrow / sell в одной строке (mobile = 2 col)
   Tier rules:
     silver — обычный фон, нейтральные бары (stable=accent, neutral=tertiary)
     gold   — фон с тёплым оттенком, бары → gold градация, profit → gold
   ════════════════════════════════════════════════════════════════════════════ */

.xt-arb {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-12);
  /* Stretch — preview-колонка сама центрирует свою card через justify-content,
     но grid должен растянуть оба столбца на одинаковую высоту, иначе
     центрирование не имеет точки отсчёта. */
  align-items: stretch;
}

/* ── COPY (left column) ─────────────────────────────────────────────────── */
.xt-arb__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.xt-arb__props {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.xt-arb__prop {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.xt-arb__prop-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--fg-secondary);
  flex-shrink: 0;
}

.xt-arb__prop-icon svg {
  width: 20px;
  height: 20px;
}

.xt-arb__prop-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.xt-arb__prop-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
}

.xt-arb__prop-text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

.xt-arb__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

/* ── PREVIEW (right column) ─────────────────────────────────────────────── */
.xt-arb__preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  /* Single-card preview: вертикально центрируется относительно левой колонки
     с 4 prop + CTA — даёт сбалансированную композицию секции. */
  justify-content: center;
}

/* ── ARB CARD ───────────────────────────────────────────────────────────── */
.xt-arb__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease),
              background var(--duration-base) var(--ease);
}

.xt-arb__card.is-fading {
  opacity: 0;
  transform: translateY(6px);
}

.xt-arb__card:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
}

/* CARD HEAD — name + tier pill */
.xt-arb__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.xt-arb__card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xt-arb__card-star {
  color: var(--warning);
  margin-right: 2px;
}

.xt-arb__card-tier {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: var(--fg-tertiary);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-default);
  background: var(--bg-secondary);
  text-transform: uppercase;
}

/* CARD BARS — 4 столбика стабильности с weapon-силуэтом на фоне */
.xt-arb__card-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
  height: 168px;
  padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

/* Weapon силуэт по центру bars-AREA (не всего контейнера). Captions внизу
   занимают ~44px и визуально «опускают» геометрический центр контейнера —
   компенсируем через calc(50% - 22px) (половина caption-блока). На mobile
   captions чуть меньше (~42px), та же формула работает с приемлемой точностью. */
.xt-arb__card-weapon {
  position: absolute;
  top: calc(50% - 22px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(70%, 280px);
  height: 56%;
  background: var(--fg-quaternary);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  pointer-events: none;
  opacity: 0.42;
  z-index: 1;
  transition: background var(--duration-base) var(--ease),
              opacity var(--duration-base) var(--ease);
}

/* Weapon mask-image (исп. ту же систему что .xt-hero__deal-icon / .xt-scenario__skin-img) */
.xt-arb__card-weapon[data-kind="knife"]     { -webkit-mask-image: url("../images/m9.svg");        mask-image: url("../images/m9.svg"); }
.xt-arb__card-weapon[data-kind="karambit"]  { -webkit-mask-image: url("../images/karambit.svg");  mask-image: url("../images/karambit.svg"); }
.xt-arb__card-weapon[data-kind="butterfly"] { -webkit-mask-image: url("../images/butterfly.svg"); mask-image: url("../images/butterfly.svg"); }
.xt-arb__card-weapon[data-kind="rifle"]     { -webkit-mask-image: url("../images/ak.svg");        mask-image: url("../images/ak.svg"); }
.xt-arb__card-weapon[data-kind="m4"]        { -webkit-mask-image: url("../images/m4.svg");        mask-image: url("../images/m4.svg"); }
.xt-arb__card-weapon[data-kind="sniper"]    { -webkit-mask-image: url("../images/awp.svg");       mask-image: url("../images/awp.svg"); }
.xt-arb__card-weapon[data-kind="pistol"]    { -webkit-mask-image: url("../images/usp.svg");       mask-image: url("../images/usp.svg"); }
.xt-arb__card-weapon[data-kind="glock"]     { -webkit-mask-image: url("../images/glock.svg");     mask-image: url("../images/glock.svg"); }
.xt-arb__card-weapon[data-kind="deagle"]    { -webkit-mask-image: url("../images/deagle.svg");    mask-image: url("../images/deagle.svg"); }

/* Bar столбик: bottom-aligned fill + caption (pct/count/period) ниже */
.xt-arb__bar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  z-index: 2;
}

.xt-arb__bar-fill {
  width: 100%;
  background: linear-gradient(180deg,
    rgba(2, 165, 216, 0.20) 0%,
    rgba(2, 165, 216, 0.06) 100%);
  border-top: 1.5px solid var(--accent);
  border-radius: 2px 2px 0 0;
  transition: height var(--duration-slow) var(--ease),
              background var(--duration-base) var(--ease),
              border-top-color var(--duration-base) var(--ease);
  min-height: 12px;
}

.xt-arb__bar[data-cat="neutral"] .xt-arb__bar-fill {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  border-top-color: var(--fg-tertiary);
}

.xt-arb__bar[data-cat="down"] .xt-arb__bar-fill {
  background: linear-gradient(180deg,
    rgba(239, 68, 68, 0.20) 0%,
    rgba(239, 68, 68, 0.06) 100%);
  border-top-color: var(--danger);
}

.xt-arb__bar-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding-top: 8px;
}

.xt-arb__bar-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
  line-height: 1;
}

.xt-arb__bar-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-tertiary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1.3;
}

.xt-arb__bar-period {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* CARD PROFIT — большая зелёная плашка под bars */
.xt-arb__card-profit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.xt-arb__profit-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-medium);
}

.xt-arb__profit-value {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

.xt-arb__profit-abs {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--success);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.xt-arb__profit-pct {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--success);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* CARD MARKETS — buy / arrow / sell row */
.xt-arb__card-markets {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}

.xt-arb__market {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: var(--space-3);
  row-gap: 2px;
  align-items: center;
  padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-width: 0;
}

.xt-arb__market-icon {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  width: 32px;
  height: 32px;
  background: var(--fg-secondary);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  flex-shrink: 0;
  transition: background var(--duration-base) var(--ease);
}

/* Платформы — берём тот же набор что у .xt-scenario__price-icon */
.xt-arb__market-icon[data-platform="lis-skins"]   { -webkit-mask-image: url("../images/platforms/lis-skins.svg");   mask-image: url("../images/platforms/lis-skins.svg"); }
.xt-arb__market-icon[data-platform="market-csgo"] { -webkit-mask-image: url("../images/platforms/market-csgo.svg"); mask-image: url("../images/platforms/market-csgo.svg"); }
.xt-arb__market-icon[data-platform="shadowpay"]   { -webkit-mask-image: url("../images/platforms/shadowpay.svg");   mask-image: url("../images/platforms/shadowpay.svg"); }
.xt-arb__market-icon[data-platform="waxpeer"]     { -webkit-mask-image: url("../images/platforms/waxpeer.svg");     mask-image: url("../images/platforms/waxpeer.svg"); }
.xt-arb__market-icon[data-platform="bitskins"]    { -webkit-mask-image: url("../images/platforms/bitskins.svg");    mask-image: url("../images/platforms/bitskins.svg"); }

.xt-arb__market-cap {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

.xt-arb__market-price {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xt-arb__market-meta {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xt-arb__market-mkt {
  color: var(--fg-secondary);
  font-weight: var(--weight-medium);
}

/* Buy = neutral, Sell = subtle accent */
.xt-arb__market--sell .xt-arb__market-price {
  color: var(--accent-hover);
}

.xt-arb__market-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-quaternary);
  align-self: center;
}

/* Preview note под карточкой */
.xt-arb__preview-note {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--fg-quaternary);
  line-height: var(--leading-snug);
  text-align: center;
  letter-spacing: 0.01em;
}

/* ── GOLD TIER OVERRIDES ───────────────────────────────────────────────────
   Premium-сценарий: вся карточка приобретает тёплый gold-tint, бары → gold
   gradient, profit → ещё насыщенный gold (overrides success/accent). Лента
   killer'а аналогично — синхронно становится gold (см. выше). */
.xt-arb__card--gold {
  background: linear-gradient(135deg,
    rgba(245, 158, 11, 0.08) 0%,
    rgba(245, 158, 11, 0.02) 60%,
    var(--bg-card) 100%);
  border-color: rgba(245, 158, 11, 0.32);
}

.xt-arb__card--gold:hover {
  border-color: rgba(245, 158, 11, 0.50);
  background: linear-gradient(135deg,
    rgba(245, 158, 11, 0.12) 0%,
    rgba(245, 158, 11, 0.04) 60%,
    var(--bg-card-hover) 100%);
}

.xt-arb__card--gold .xt-arb__card-tier {
  color: var(--warning);
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.06);
}

.xt-arb__card--gold .xt-arb__card-bars {
  background: linear-gradient(180deg,
    rgba(245, 158, 11, 0.05) 0%,
    rgba(245, 158, 11, 0.01) 100%);
  border-color: rgba(245, 158, 11, 0.18);
}

.xt-arb__card--gold .xt-arb__bar[data-cat="stable"] .xt-arb__bar-fill {
  background: linear-gradient(180deg,
    rgba(245, 158, 11, 0.32) 0%,
    rgba(245, 158, 11, 0.08) 100%);
  border-top-color: var(--warning);
}

.xt-arb__card--gold .xt-arb__bar-pct {
  color: rgba(255, 255, 255, 0.98);
}

.xt-arb__card--gold .xt-arb__card-weapon {
  background: var(--warning);
  opacity: 0.32;
}

.xt-arb__card--gold .xt-arb__card-profit {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.32);
}

.xt-arb__card--gold .xt-arb__profit-abs,
.xt-arb__card--gold .xt-arb__profit-pct {
  color: var(--warning);
}

.xt-arb__card--gold .xt-arb__market--sell .xt-arb__market-price {
  color: var(--warning);
}

/* ── MOBILE (≤920px desktop-grid → стэк, ≤640px markets-row → 2 col без arrow) */
@media (max-width: 920px) {
  .xt-arb {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  /* Стэк: карточка сверху, пункты ниже. DOM не трогаем — на desktop порядок
     колонок остаётся copy | preview (оба order: 0). */
  .xt-arb__preview {
    order: -1;
  }
  .xt-arb__copy {
    gap: var(--space-6);
  }
}

@media (max-width: 640px) {
  .xt-arb__card {
    padding: var(--space-4);
  }
  .xt-arb__card-bars {
    height: 144px;
    padding: var(--space-2);
  }
  .xt-arb__card-weapon {
    width: 64%;
    height: 56%;
    opacity: 0.36;
  }
  .xt-arb__card--gold .xt-arb__card-weapon {
    opacity: 0.28;
  }
  .xt-arb__bar-pct  { font-size: 11px; }
  .xt-arb__bar-count{ font-size: 9px; }
  .xt-arb__bar-period{ font-size: 8.5px; }

  .xt-arb__profit-abs { font-size: var(--text-lg); }

  /* Markets — две плашки в ряд; подпись сверху на всю ширину, ниже ряд
     цена + иконка площадки, затем qty (компактная высота). */
  .xt-arb__card-markets {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2);
  }
  .xt-arb__market-arrow {
    display: none;
  }
  /* Плашки Buy/Sell: шапка только подпись; средний ряд — цена | иконка. */
  .xt-arb__market {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: var(--space-2);
    row-gap: 3px;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    overflow: hidden;
  }
  .xt-arb__market-icon {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    width: 24px;
    height: 24px;
    opacity: 0.55;
  }
  .xt-arb__market-cap {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    font-size: 10px;
    color: var(--fg-secondary);
  }
  .xt-arb__market-price {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    font-size: var(--text-xl);
    line-height: 1.1;
    letter-spacing: var(--tracking-tighter);
  }
  .xt-arb__market-meta {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 11px;
    color: var(--fg-tertiary);
  }
  /* JS на mobile рендерит meta как pure qty ("12 шт") — иконка площадки
     уже даёт identification, brand mешает (обрезается / переносится). */

  /* Color-coded action borders + price (matches dashboard pattern) */
  .xt-arb__market--buy {
    border-color: var(--success-border);
    background: rgba(34, 197, 94, 0.05);
  }
  .xt-arb__market--buy .xt-arb__market-price {
    color: var(--success);
  }
  .xt-arb__market--sell {
    border-color: rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.05);
  }
  .xt-arb__market--sell .xt-arb__market-price {
    color: var(--danger);
  }
  /* Gold tier: action-colors остаются (зелёный купи / красный продай —
     это конвенция, не tier-зависимо), но фон чуть теплее. */
  .xt-arb__card--gold .xt-arb__market--buy {
    background: linear-gradient(135deg,
      rgba(34, 197, 94, 0.06) 0%,
      rgba(245, 158, 11, 0.04) 100%);
  }
  .xt-arb__card--gold .xt-arb__market--sell {
    background: linear-gradient(135deg,
      rgba(239, 68, 68, 0.06) 0%,
      rgba(245, 158, 11, 0.04) 100%);
  }
  /* Override gold sell-price → keep red (action-color > tier-color) */
  .xt-arb__card--gold .xt-arb__market--sell .xt-arb__market-price {
    color: var(--danger);
  }

  /* Props — иконки чуть меньше */
  .xt-arb__prop {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--space-3);
  }
  .xt-arb__prop-icon {
    width: 36px;
    height: 36px;
  }
  .xt-arb__prop-icon svg {
    width: 18px;
    height: 18px;
  }

  /* CTA внутри секции — скрываем, у нас sticky-CTA всегда на mobile */
  .xt-arb__cta {
    display: none;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   REVIEWS — grid карточек + CTA-row снизу
   ────────────────────────────────────────────────────────────────────────── */

.xt-reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.xt-review {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast) var(--ease);
}

.xt-review:hover {
  border-color: var(--border-default);
}

.xt-review__head {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.xt-review__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

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

.xt-review__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
}

.xt-review__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.xt-review__stars {
  font-size: var(--text-sm);
  color: var(--accent);
  letter-spacing: 1px;
}

.xt-review__text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-secondary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-5);
  flex: 1;
}

.xt-review__profit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.xt-review__profit-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.xt-review__profit-value {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--success);
  letter-spacing: var(--tracking-tight);
}

.xt-reviews-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}

/* ──────────────────────────────────────────────────────────────────────────
   PRICING — 6 карточек grid + period chips + CTA, БЕЗ слайдера
   ────────────────────────────────────────────────────────────────────────── */

.xt-pricing__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.xt-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}

.xt-plan:hover {
  border-color: var(--border-default);
  background: var(--bg-card-hover);
}

.xt-plan--popular {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.xt-plan--popular:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.xt-plan__badge {
  position: absolute;
  top: -10px;
  right: var(--space-4);
  display: inline-block;
  padding: 3px 8px;
  background: var(--accent);
  color: var(--accent-fg-on);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1.4;
}

.xt-plan__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.xt-plan__limit {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semi);
  color: var(--fg-secondary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.xt-plan__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.xt-plan__price-orig {
  display: block;
  margin-bottom: 2px;
  min-height: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-normal);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wide);
  text-decoration: line-through;
}

.xt-plan__per {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--fg-tertiary);
  letter-spacing: 0;
}

.xt-plan__price--request {
  font-size: var(--text-md);
  color: var(--fg-secondary);
}

/* Period chips */
.xt-period {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding: 0;
}

.xt-period__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.xt-period__chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.xt-period__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}

.xt-period__chip:hover {
  border-color: var(--border-default);
  color: var(--fg-primary);
}

.xt-period__chip--active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg-on);
}

.xt-period__chip--active:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-fg-on);
}

.xt-period__disc {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--success);
  letter-spacing: var(--tracking-wide);
}

.xt-period__chip--active .xt-period__disc {
  color: var(--accent-fg-on);
  opacity: 0.85;
}

.xt-pricing__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.xt-pricing__note {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   FARMER (торговая ферма) — preview-карточка справа, контент слева
   ────────────────────────────────────────────────────────────────────────── */

.xt-farmer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}

.xt-farmer__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.xt-farmer__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin: 0;
}

.xt-farmer__lead {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--fg-tertiary);
  line-height: var(--leading-snug);
  margin: 0;
  max-width: 480px;
}

.xt-farmer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-5) 0;
}

.xt-farmer__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-4);
  position: relative;
}

.xt-farmer__stat:first-child { padding-left: 0; }
.xt-farmer__stat:last-child  { padding-right: 0; }

.xt-farmer__stat + .xt-farmer__stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--border-subtle);
}

.xt-farmer__stat-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.xt-farmer__stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Right-side preview panel — компактная dashboard карточка */
.xt-farmer__preview {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.xt-farmer__preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-5);
}

.xt-farmer__preview-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--success);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.xt-farmer__preview-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: xtPulse 2s var(--ease) infinite;
}

@keyframes xtPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.xt-farmer__preview-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-primary);
}

.xt-farmer__preview-uptime {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wide);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.xt-farmer__preview-kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.xt-farmer__preview-kpi-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.xt-farmer__preview-kpi-val {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.xt-farmer__preview-kpi-cell:nth-child(1) .xt-farmer__preview-kpi-val,
.xt-farmer__preview-kpi-cell:nth-child(3) .xt-farmer__preview-kpi-val {
  color: var(--success);
}

.xt-farmer__preview-kpi-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.xt-farmer__preview-bots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.xt-farmer__bot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-height: 44px;
  transition: border-color var(--duration-base) var(--ease);
}

.xt-farmer__bot:hover {
  border-color: var(--border-medium);
}

.xt-farmer__bot--more {
  grid-column: 1 / -1;
  justify-content: center;
  text-align: center;
  background: transparent;
  border: 1px dashed var(--border-subtle);
  min-height: 36px;
}

.xt-farmer__bot--more:hover {
  border-color: var(--border-medium);
}

.xt-farmer__bot-status {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 14%, transparent);
}

.xt-farmer__bot-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: var(--fg-tertiary);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.xt-farmer__bot-icon[data-platform="market-csgo"] { -webkit-mask-image: url("../images/platforms/market-csgo.svg"); mask-image: url("../images/platforms/market-csgo.svg"); }
.xt-farmer__bot-icon[data-platform="lis-skins"]   { -webkit-mask-image: url("../images/platforms/lis-skins.svg");   mask-image: url("../images/platforms/lis-skins.svg"); }
.xt-farmer__bot-icon[data-platform="waxpeer"]     { -webkit-mask-image: url("../images/platforms/waxpeer.svg");     mask-image: url("../images/platforms/waxpeer.svg"); }
.xt-farmer__bot-icon[data-platform="shadowpay"]   { -webkit-mask-image: url("../images/platforms/shadowpay.svg");   mask-image: url("../images/platforms/shadowpay.svg"); }
.xt-farmer__bot-icon[data-platform="bitskins"]    { -webkit-mask-image: url("../images/platforms/bitskins.svg");    mask-image: url("../images/platforms/bitskins.svg"); }

.xt-farmer__bot-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.xt-farmer__bot-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--fg-primary);
  line-height: 1.1;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.xt-farmer__bot-mkt {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.xt-farmer__bot-pnl {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--success);
  letter-spacing: var(--tracking-wide);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.xt-farmer__bot--more .xt-farmer__bot-pnl,
.xt-farmer__bot--more .xt-farmer__bot-info,
.xt-farmer__bot--more .xt-farmer__bot-icon,
.xt-farmer__bot--more .xt-farmer__bot-status {
  display: none;
}

.xt-farmer__bot-more {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.xt-farmer__preview-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.xt-farmer__preview-total-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.xt-farmer__preview-total-val {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--success);
  letter-spacing: var(--tracking-tight);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────────────
   VIDEO
   ────────────────────────────────────────────────────────────────────────── */

.xt-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.xt-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   FAQ — нативный <details>/<summary>, без JS
   ────────────────────────────────────────────────────────────────────────── */

.xt-faq {
  display: flex;
  flex-direction: column;
}

.xt-faq__item {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-5) 0;
}

.xt-faq__item:last-child {
  border-bottom: 1px solid var(--border-subtle);
}

.xt-faq__item[open] {
  padding-bottom: var(--space-6);
}

.xt-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  list-style: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  transition: color var(--duration-fast) var(--ease);
}

.xt-faq__q::-webkit-details-marker {
  display: none;
}

.xt-faq__item:hover .xt-faq__q {
  color: var(--accent);
}

.xt-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--fg-tertiary);
  transition: transform var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.xt-faq__item[open] .xt-faq__icon {
  transform: rotate(45deg);
  color: var(--accent);
}

.xt-faq__a {
  margin-top: var(--space-4);
  padding-right: var(--space-8);
}

.xt-faq__a p {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-3);
}

.xt-faq__a p:last-child {
  margin-bottom: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   CASHBACK — track с 4 нодами (3 / 6 / 12 / 24 мес)
   ────────────────────────────────────────────────────────────────────────── */

.xt-cashback__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-12);
}

.xt-cb-node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6);
  position: relative;
}

.xt-cb-node:first-child { padding-left: 0; }
.xt-cb-node:last-child  { padding-right: 0; }

.xt-cb-node + .xt-cb-node::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--border-subtle);
}

.xt-cb-node__period {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.xt-cb-node__pct {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.xt-cb-node__pct-unit {
  font-size: 0.5em;
  color: var(--fg-tertiary);
}

.xt-cb-node--top .xt-cb-node__period {
  color: var(--accent);
}

.xt-cb-node--top .xt-cb-node__pct {
  color: var(--accent);
}

/* Support channels */
.xt-support {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.xt-support__text {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--fg-tertiary);
  line-height: var(--leading-snug);
  margin: 0;
}

.xt-support__channels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.xt-support__channel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.xt-support__channel:hover {
  border-color: var(--border-default);
  color: var(--fg-primary);
}

.xt-support__channel-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xt-support__channel-icon svg {
  width: 100%;
  height: 100%;
}

.xt-cashback__footer {
  margin-top: var(--space-10);
  padding: var(--space-5) 0 var(--space-1);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--fg-quaternary);
  line-height: var(--leading-snug);
  text-align: center;
  letter-spacing: 0;
}

.xt-cashback__footer a {
  display: inline-block;
  margin-left: var(--space-3);
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-subtle);
  color: var(--fg-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  background: transparent;
  transition: color var(--duration-base) var(--ease);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.xt-cashback__footer a:hover {
  color: var(--fg-primary);
}

@media (max-width: 640px) {
  .xt-cashback__footer {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    font-size: 11px;
  }
  .xt-cashback__footer a {
    display: block;
    margin: var(--space-2) 0 0;
    padding: 0;
    border-left: 0;
    font-size: 10px;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   MOBILE
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .xt-pricing__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .xt-reviews {
    grid-template-columns: repeat(2, 1fr);
  }

  .xt-farmer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 1024px) {
  /* Tablet: сохраняем 2 колонки, но уже компактнее */
  .xt-hero__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--space-9);
  }

  .xt-hero__live {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  /* Hero — single column на мобильном */
  .xt-hero {
    /* Прижимаем контент к top — на мобайле центровка создавала много пустого
       сверху, т.к. большой padding-bottom (резерв sticky-CTA) сдвигал визуальный
       центр вверх. Sticky-CTA внизу = "якорь", контенту нужен top-anchor.
       min-height: auto убирает full-screen растяжение → между Hero и Stats
       нет пустого скролл-buffer'а. */
    align-items: flex-start;
    min-height: auto;
    padding-top: 80px; /* header (~60px) + breathing */
  }

  .xt-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-5);
  }

  .xt-hero__title {
    font-size: clamp(32px, 9vw, 40px);
    margin-bottom: 0;
  }

  .xt-hero__lead {
    font-size: var(--text-base);
    margin-bottom: 0;
    max-width: none;
  }

  .xt-hero__chips {
    margin-bottom: 0;
  }

  /* Mobile layout: text → live deals. Финальный CTA = sticky-CTA внизу экрана
     (всегда видна, без прыжков). Hero CTA и scroll-link на мобайле скрыты —
     дублировать одну и ту же кнопку в Hero и в sticky-bar бессмысленно. */
  .xt-hero__col--text { display: contents; }
  .xt-hero__cta-row   { display: none; }

  .xt-hero .xt-eyebrow  { order: 1; }
  .xt-hero__title       { order: 2; }
  .xt-hero__lead        { order: 3; }
  .xt-hero__chips       { order: 4; }
  .xt-hero__col--visual {
    order: 5;
    margin-top: var(--space-6);
  }

  /* Резерв снизу под фиксированную sticky-CTA — чтобы лента не прилипала к ней. */
  .xt-hero {
    padding-bottom: calc(var(--space-8) + 72px);
  }

  /* Live deals — компактная mobile-версия: viewport показывает 1 deal,
     JS rotation тот же treadmill (slide-up под mask). */
  .xt-hero__live {
    max-width: 100%;
    margin-left: 0;
  }

  .xt-hero__live-counter {
    font-size: 10px;
  }

  .xt-hero__deals {
    --xt-deal-rows: 1;
    --xt-deal-row-h: 84px;
  }

  /* На mobile deal — 2 строки внутри 1 grid: [icon+weapon | profit]
     и под ним [skin · prices]. */
  .xt-hero__deal {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 6px var(--space-3);
    padding: 0 0;
    align-content: center; /* центруем 2-строчный контент в фикс-высоте */
  }

  .xt-hero__deal-name {
    grid-column: 1;
    grid-row: 1;
  }

  .xt-hero__deal-profit {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .xt-hero__deal-prices {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 11px;
    padding-left: calc(20px + var(--space-3)); /* отступ под icon-width */
  }

  .xt-hero__deal-weapon {
    font-size: var(--text-md);
  }

  .xt-hero__deal-icon {
    width: 26px;
    height: 26px;
  }

  .xt-btn {
    width: 100%;
    box-sizing: border-box;
  }

  /* Stats */
  .xt-stats {
    padding: var(--space-8) 0;
  }

  .xt-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) 0;
  }

  .xt-stat {
    padding: 0 var(--space-4);
  }

  .xt-stat:nth-child(odd) {
    padding-left: 0;
  }

  .xt-stat:nth-child(even) {
    padding-right: 0;
  }

  .xt-stat:nth-child(odd) + .xt-stat::before {
    top: 0;
    bottom: 0;
  }

  .xt-stat:nth-child(3)::before,
  .xt-stat:nth-child(4)::before {
    display: none;
  }

  /* Confirm */
  .xt-confirm__grid {
    grid-template-columns: 1fr;
  }

  .xt-confirm__grid::before {
    display: none;
  }

  .xt-confirm__card {
    padding: var(--space-6) 0;
    border-top: 1px solid var(--border-subtle);
  }

  .xt-confirm__card:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .xt-confirm__warning {
    grid-template-columns: 28px 1fr;
    gap: var(--space-4);
  }

  .xt-confirm__warning-icon {
    width: 28px;
    height: 28px;
    align-self: start;
  }

  .xt-confirm__warning .xt-btn {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  /* Marketplaces */
  .xt-platforms {
    grid-template-columns: repeat(2, 1fr);
  }

  .xt-platform {
    padding: var(--space-5) var(--space-3);
  }

  .xt-platform + .xt-platform::before {
    display: none;
  }

  .xt-platform:nth-child(2n+1) {
    border-right: 1px solid var(--border-subtle);
  }

  .xt-platform:nth-child(n+3) {
    border-top: 1px solid var(--border-subtle);
  }

  .xt-scenario {
    padding: var(--space-5);
  }

  .xt-scenario__row {
    grid-template-columns: 1fr;
  }

  .xt-scenario__flow {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .xt-scenario__arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }

  /* Все три плашки — единый «колодец»: фикс-колонка 40px под иконку (centered)
     + 1fr под текст. Padding одинаковый → текст в каждой строке начинается
     ровно на одной вертикали. */
  .xt-scenario__skin,
  .xt-scenario__price {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
  }

  .xt-scenario__skin-img {
    width: 40px;
    height: 40px;
    justify-self: center;
  }

  .xt-scenario__price-icon {
    justify-self: center;
  }

  .xt-alt-mention {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Reviews */
  .xt-reviews {
    grid-template-columns: 1fr;
  }

  /* Pricing */
  .xt-pricing__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* На мобайле inline-кнопка под тарифами дублирует sticky-CTA внизу — прячем,
     оставляем только note со ссылками Premium/Гарантия. */
  .xt-pricing__cta > .xt-btn {
    display: none;
  }

  .xt-period {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .xt-period__chips {
    width: 100%;
  }

  .xt-period__chip {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }

  /* Cashback */
  .xt-cashback__track {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .xt-cb-node {
    padding: var(--space-5) var(--space-4);
  }

  .xt-cb-node:nth-child(2n+1) {
    padding-left: 0;
    border-right: 1px solid var(--border-subtle);
  }

  .xt-cb-node:nth-child(2n) {
    padding-right: 0;
  }

  .xt-cb-node:nth-child(n+3) {
    border-top: 1px solid var(--border-subtle);
  }

  .xt-cb-node + .xt-cb-node::before {
    display: none;
  }

  /* Farmer — на мобайле visual preview скрыт (мусорно выглядит, ужимается до
     нечитаемого размера). Основной message: статы + CTA-заявка. */
  .xt-farmer__preview {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Pricing на мобайле — 2 колонки × 3 ряда (вместо 6 длинных карточек в столбик).
     Card высота единая, лимит в одну строку. */
  .xt-pricing__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .xt-period__chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .xt-stat__value {
    font-size: 26px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   MOBILE STICKY CTA
   ──────────────────────────────────────────────────────────────────────────
   Заменяет старый tab-bar (xt-mnav). Появляется только когда Hero CTA
   ушёл из вьюпорта (через IntersectionObserver). Так на первом экране
   доминирует один CTA, а ниже — sticky-pill в одном стиле.
   Виден ТОЛЬКО ≤768px. На desktop — display:none.
   ────────────────────────────────────────────────────────────────────────── */

.xt-sticky-cta {
  display: none;
}

@media (max-width: 768px) {
  /* Sticky-CTA на мобайле — поднимается снизу через .is-revealed класс
     (триггерится JS после xt:preloader-done). Дальше — статика. */
  .xt-sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90; /* ниже modal/header (100+), выше контента */
    padding: var(--space-8) var(--space-4) var(--space-3);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    /* Pure-opacity fader (без backdrop-blur): нижняя половина — плотный фон под
       кнопку, верхняя — плавно растворяется в 0. Контент при скролле «выезжает»
       из fade-зоны как в Hero-ленте. Никакой границы / размытия. */
    background: linear-gradient(
      to top,
      rgba(9, 9, 11, 1) 0%,
      rgba(9, 9, 11, 1) 55%,
      rgba(9, 9, 11, 0) 100%
    );
    pointer-events: none; /* fade-зона не должна перехватывать тапы по контенту */
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* iOS Chrome / Safari quirk fix:
     при collapse адресной строки на скролле visible viewport растягивается
     вниз, а position:fixed bottom:0 элемент в WebKit может «отстать» от
     нового low-edge — между нижней границей плашки и реальным низом окна
     появляется gap, через который виден контент страницы.
     Решение: продлеваем opaque-фон ниже bbox через ::after на 160px.
     Большое значение покрывает любой реалистичный delta (URL bar ~88-100px
     + safe-area-inset). pointer-events: none — не блокирует тачи. */
  .xt-sticky-cta::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 160px;
    background: rgba(9, 9, 11, 1); /* matches opaque-stop в gradient выше */
    pointer-events: none;
  }

  .xt-sticky-cta.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Кнопка — снова интерактивна: контейнер pointer-events:none пропускает тапы
     через fade-zone к контенту под ней, кнопка их ловит сама. */
  .xt-sticky-cta__btn {
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    padding: 0 var(--space-5);
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xt-sticky-cta {
    transition: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   BACK-TO-TOP
   ──────────────────────────────────────────────────────────────────────────
   Премиум-редизайн legacy .back-to-top: hairline outlined surface,
   моно-иконка, плавный fade+slide. Никаких градиентов и тяжёлой тени.
   ────────────────────────────────────────────────────────────────────────── */

body.xbot-home .back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 20, 23, 0.72);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid var(--border-default);
  color: var(--fg-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease),
              background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
  z-index: 80; /* ниже sticky-cta(90) и header(100), выше контента */
  /* грохаем legacy gradient/animation/box-shadow из styles.css */
  background-image: none;
  animation: none;
}

body.xbot-home .back-to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  display: inline-flex;
}

body.xbot-home .back-to-top svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  display: block;
}

body.xbot-home .back-to-top:hover {
  background: rgba(28, 28, 32, 0.85);
  background-image: none;
  border-color: var(--border-strong);
  color: var(--fg-primary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
}

body.xbot-home .back-to-top:active {
  transform: translateY(0) scale(0.96);
}

body.xbot-home .back-to-top:focus-visible {
  outline: 2px solid var(--accent-border);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  body.xbot-home .back-to-top {
    /* поднимаемся выше sticky-CTA pill (≈76px) + safe-area + breath */
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 12px);
    width: 40px;
    height: 40px;
  }
  body.xbot-home .back-to-top svg {
    width: 16px;
    height: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.xbot-home .back-to-top {
    transform: none;
    transition: opacity var(--duration-base) linear,
                background var(--duration-fast) linear,
                border-color var(--duration-fast) linear,
                color var(--duration-fast) linear;
  }
  body.xbot-home .back-to-top:active {
    transform: none;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   SCROLLBAR (desktop, ≥769px)
   ──────────────────────────────────────────────────────────────────────────
   Монохромный hairline-стиль на токенах — без ярких голубых акцентов.
   Mobile уже скрыт в legacy (используем native overlay).
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  /* Firefox / standard properties — корневой scrollbar */
  html:has(body.xbot-home),
  body.xbot-home {
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
  }

  /* WebKit — реальный root-scrollbar обычно у html, дочерние скроллы у body
     и потомков. Перебиваем legacy (::-webkit-scrollbar в styles.css). */
  html:has(body.xbot-home)::-webkit-scrollbar,
  body.xbot-home::-webkit-scrollbar,
  body.xbot-home ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: transparent;
  }
  html:has(body.xbot-home)::-webkit-scrollbar-track,
  body.xbot-home::-webkit-scrollbar-track,
  body.xbot-home ::-webkit-scrollbar-track {
    background: transparent;
    border: 0;
  }
  html:has(body.xbot-home)::-webkit-scrollbar-thumb,
  body.xbot-home::-webkit-scrollbar-thumb,
  body.xbot-home ::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
    transition: background var(--duration-fast) var(--ease);
  }
  html:has(body.xbot-home)::-webkit-scrollbar-thumb:hover,
  body.xbot-home::-webkit-scrollbar-thumb:hover,
  body.xbot-home ::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
    background-clip: padding-box;
  }
  html:has(body.xbot-home)::-webkit-scrollbar-corner,
  body.xbot-home::-webkit-scrollbar-corner,
  body.xbot-home ::-webkit-scrollbar-corner {
    background: transparent;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   GUARANTEE SECTION
   ──────────────────────────────────────────────────────────────────────────
   Перенос сжатой версии /protection/ внутрь главной (anchor #guarantee).
   4 condition cards + calc-visual + warning. Без своих CTA — соседствует
   с pricing-CTA выше.
   ────────────────────────────────────────────────────────────────────────── */

/* Grid условий — никаких рамок, чистый воздух между карточками.
   Vertical-rhythm: row-gap > column-gap, чтобы строки не слипались
   при разной высоте текста. */
.xt-guard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-12);
  row-gap: var(--space-12);
  margin: 0 0 var(--space-12);
}

/* Карточка — большая цифра слева (как в xt-step-list), текст справа.
   Без бэкграундов и обводок: типографика делает структуру. */
.xt-guard {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: 0;
  background: transparent;
  border: 0;
}

.xt-guard__num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  text-transform: none;
  padding-top: 4px; /* оптическое выравнивание с заглавной title */
}

.xt-guard__body {
  /* запасной wrapper, не используется — оставлен для гибкости */
}

.xt-guard__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
  margin: 0 0 var(--space-4);
}

.xt-guard__text {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--fg-tertiary);
  line-height: var(--leading-snug);
  margin: 0;
  text-wrap: pretty;
}

.xt-guard__text strong {
  color: var(--fg-secondary);
  font-weight: var(--weight-medium);
}

/* Calc-visual — пример расчёта (3 cells + result-banner) */
.xt-guard-calc {
  margin: 0 0 var(--space-9);
  padding: 0;
}

.xt-guard-calc__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
}

.xt-guard-calc__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 0 var(--space-4);
}

.xt-guard-calc__cell {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--bg-base);
}

.xt-guard-calc__cell--accent {
  background: var(--bg-surface);
}

.xt-guard-calc__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.xt-guard-calc__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
}

.xt-guard-calc__cell--accent .xt-guard-calc__value {
  color: var(--accent);
}

.xt-guard-calc__note {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--fg-quaternary);
  line-height: var(--leading-snug);
}

/* Result-banner — grid 2 col [icon][body], внутри body — headline + text.
   Headline (Недополучено N до порога) визуально выделен; text — описательная часть.
   Раздельная структура убирает «налипание» суммы на текст и читается чище. */
.xt-guard-calc__result {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5) var(--space-6);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
}

.xt-guard-calc__result svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  margin-top: 3px;
}

.xt-guard-calc__result-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.xt-guard-calc__result-headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--fg-primary);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.xt-guard-calc__result-headline strong {
  font-weight: var(--weight-semi);
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.xt-guard-calc__result-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

/* Warning — премиум-минимализм. Без border-frame, тонкая моно-линия слева
   и subtle text-color → выглядит как fineprint, не как bootstrap-alert. */
.xt-guard-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.xt-guard-warning__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--fg-quaternary);
  margin-top: 3px;
  stroke-width: 1.6;
}

.xt-guard-warning__text {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--fg-quaternary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

@media (max-width: 768px) {
  .xt-guard-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--space-7);
    margin-bottom: var(--space-9);
  }
  .xt-guard {
    grid-template-columns: 44px 1fr;
    gap: var(--space-4);
  }
  .xt-guard__num {
    font-size: 28px;
  }
  .xt-guard__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
  }
  .xt-guard__text {
    font-size: var(--text-sm);
  }

  .xt-guard-calc {
    margin-top: var(--space-3);
    margin-bottom: var(--space-7);
  }
  .xt-guard-calc__caption {
    margin-bottom: var(--space-3);
  }
  .xt-guard-calc__row {
    grid-template-columns: 1fr;
    margin-bottom: var(--space-3);
  }
  .xt-guard-calc__cell {
    padding: var(--space-4) var(--space-5);
  }
  .xt-guard-calc__value {
    font-size: var(--text-xl);
  }
  .xt-guard-calc__result {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .xt-guard-calc__result svg {
    width: 16px;
    height: 16px;
    margin-top: 2px;
  }
  .xt-guard-calc__result-headline {
    font-size: var(--text-base);
  }
  .xt-guard-calc__result-text {
    font-size: 13px;
  }

  .xt-guard-warning {
    margin-top: var(--space-4);
  }
  .xt-guard-warning__text {
    font-size: 12.5px;
    text-wrap: pretty;
  }
}

/* ==========================================================================
   FARMER MODAL — base structure
   --------------------------------------------------------------------------
   Поведение модала: позиционирование, скрытие/показ, custom radio/check
   indicators, layout-only rules. Темы (border, color, background, padding,
   typography, spacing) идут отдельным «premium overrides» блоком ниже —
   так базовая структура остаётся читаемой и не зависит от темы.

   Раньше эта база жила в legacy css/styles.css. После его дропа модал
   «вырывался на волю» (без position:fixed / display:none). Теперь — здесь.
   ========================================================================== */

.farmer-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.farmer-modal-overlay--open {
  display: flex;
}

.farmer-modal {
  position: relative;
  width: 100%;
  max-height: 90vh;
  margin: 20px;
  overflow-y: auto;
}

.farmer-modal__close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
}

/* Steps wrapper — baseline (display, base spacing). Тема — в overrides. */

/* Radio / check group — column stack */
.farmer-radio-group,
.farmer-check-group {
  display: flex;
  flex-direction: column;
}

.farmer-radio,
.farmer-check {
  display: flex;
  cursor: pointer;
}

/* Custom radio/check indicators — strip native UI, draw our own */
.farmer-radio input[type=radio],
.farmer-check input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 50%;
}

.farmer-check input[type=checkbox] {
  border-radius: 4px;
}

.farmer-radio input[type=radio]::before,
.farmer-check input[type=checkbox]::before {
  content: '';
  display: block;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.farmer-check input[type=checkbox]::before {
  width: 9px;
  height: 9px;
  border-radius: 0;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.farmer-radio input[type=radio]:checked::before,
.farmer-check input[type=checkbox]:checked::before {
  transform: scale(1);
}

.farmer-check input[type=checkbox]:indeterminate::before {
  clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
  width: 9px;
  height: 3px;
  transform: scale(1.1);
}

/* Option body — column with title + hint */
.farmer-opt-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Field label — block-level for stacking над input */
.farmer-field__lbl {
  display: block;
}


/* ==========================================================================
   FARMER MODAL — premium overrides
   --------------------------------------------------------------------------
   Полный редизайн поверх baseline-структуры выше. Снимаем bootstrap-стиль:
   тяжёлые backgrounds → hairline borders; bold display → display semi;
   bold accent labels → mono uppercase; ярко-голубые pills → underline tabs.
   ========================================================================== */

.farmer-modal-overlay {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.farmer-modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-9) var(--space-8) var(--space-7);
  box-shadow:
    0 30px 70px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  max-width: 520px;
}

.farmer-modal__close {
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--fg-tertiary);
  font-size: 18px;
  transition: color var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease),
              background var(--duration-base) var(--ease);
}

.farmer-modal__close:hover {
  color: var(--fg-primary);
  background: var(--bg-card);
  border-color: var(--border-medium);
}

/* ── Steps: underline-tabs Linear-style ─────────────────────────────── */
.farmer-steps {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-7);
  border-bottom: 1px solid var(--border-subtle);
}

.farmer-step {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: var(--space-3) 0 var(--space-4);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--fg-quaternary);
  transition: color var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease);
  margin-bottom: -1px;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.farmer-step--active {
  background: transparent;
  border-bottom-color: var(--accent);
  color: var(--fg-primary);
}

.farmer-step--done {
  background: transparent;
  border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--fg-tertiary);
}

/* ── Title ──────────────────────────────────────────────────────────── */
.farmer-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  font-stretch: normal;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  margin: 0 0 var(--space-4);
  line-height: var(--leading-snug);
}

.farmer-modal__title.mt-3 {
  margin-top: var(--space-6);
}

/* ── Radio / check cards: hairline ─────────────────────────────────── */
.farmer-radio-group,
.farmer-check-group {
  gap: var(--space-2);
}

.farmer-radio,
.farmer-check {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base) var(--ease),
              background var(--duration-base) var(--ease);
}

.farmer-radio:hover,
.farmer-check:hover {
  border-color: var(--border-medium);
  background: transparent;
}

.farmer-radio:has(input:checked),
.farmer-check:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  box-shadow: none;
}

/* Custom radio indicator — mono ring + accent dot */
.farmer-radio input[type=radio] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1.5px solid var(--border-strong);
  margin-top: 0;
  background: transparent;
  transition: border-color var(--duration-base) var(--ease);
}

.farmer-radio input[type=radio]::before {
  width: 7px;
  height: 7px;
  background: var(--accent);
}

.farmer-radio input[type=radio]:checked {
  border-color: var(--accent);
}

/* Custom checkbox indicator — accent fill on check */
.farmer-check input[type=checkbox] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  margin-top: 0;
  background: transparent;
}

.farmer-check input[type=checkbox]::before {
  background: var(--bg-elevated);
}

.farmer-check input[type=checkbox]:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.farmer-check input[type=checkbox]:indeterminate {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.farmer-check input[type=checkbox]:indeterminate::before {
  background: var(--accent);
}

/* Option body */
.farmer-opt-body {
  gap: 3px;
}

.farmer-opt-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
  line-height: 1.3;
  letter-spacing: 0;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.farmer-opt-hint {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-regular);
  color: var(--fg-quaternary);
  line-height: var(--leading-snug);
}

.farmer-radio:has(input:checked) .farmer-opt-title,
.farmer-check:has(input:checked) .farmer-opt-title {
  color: var(--fg-primary);
}

.farmer-radio:has(input:checked) .farmer-opt-hint,
.farmer-check:has(input:checked) .farmer-opt-hint {
  color: var(--fg-tertiary);
}

/* "Все" — dashed accent */
.farmer-check--all {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: transparent;
}

.farmer-check--all:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

/* ── Field / input ──────────────────────────────────────────────────── */
.farmer-field {
  margin-bottom: var(--space-4);
}

.farmer-field__lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-quaternary);
  margin-bottom: var(--space-2);
}

.farmer-optional {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-quaternary);
  opacity: 0.7;
}

.farmer-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--fg-primary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--weight-regular);
  outline: none;
  transition: border-color var(--duration-base) var(--ease),
              background var(--duration-base) var(--ease);
}

.farmer-input::placeholder {
  color: var(--fg-quaternary);
}

.farmer-input:hover {
  border-color: var(--border-medium);
}

.farmer-input:focus {
  border-color: var(--accent);
  background: var(--bg-elevated);
}

.farmer-textarea {
  resize: vertical;
  min-height: 84px;
  line-height: var(--leading-snug);
}

/* ── Error ──────────────────────────────────────────────────────────── */
.farmer-modal__err {
  font-family: var(--font-mono);
  color: var(--danger, #ef4444);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  min-height: 16px;
  margin: var(--space-2) 0 var(--space-1);
}

/* ── Nav row ────────────────────────────────────────────────────────── */
.farmer-modal__nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ── Buttons: primary + ghost ───────────────────────────────────────── */
.farmer-btn {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: var(--weight-medium);
  font-stretch: normal;
  letter-spacing: 0;
  padding: 13px var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--accent);
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  transition: background var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease),
              opacity var(--duration-base) var(--ease);
  flex: 1;
  box-shadow: none;
  min-height: 44px;
}

.farmer-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: none;
}

.farmer-btn:active {
  background: var(--accent-active, #007ba8);
  border-color: var(--accent-active, #007ba8);
}

.farmer-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.farmer-btn--ghost {
  background: transparent;
  color: var(--fg-secondary);
  border-color: var(--border-subtle);
  flex: 0 0 auto;
  padding: 13px var(--space-5);
}

.farmer-btn--ghost:hover {
  background: var(--bg-card);
  color: var(--fg-primary);
  border-color: var(--border-medium);
  box-shadow: none;
}

/* ── Bot recommendation hint — hairline accent block ─────────────────── */
.farmer-rec-hint {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius-md);
  color: var(--fg-primary);
  box-shadow: none;
}

.farmer-rec-hint svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--accent);
  opacity: 1;
}

.farmer-rec-hint__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  margin-bottom: 4px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.farmer-rec-hint__value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  font-stretch: normal;
  color: var(--accent);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ── Success pane ───────────────────────────────────────────────────── */
.farmer-pane--success {
  text-align: center;
  padding: var(--space-5) 0 var(--space-2);
}

.farmer-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  font-size: 24px;
  font-weight: var(--weight-medium);
  line-height: 54px;
  margin: 0 auto var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.farmer-success-sub {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-3);
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .farmer-modal {
    /* Top padding 56px = close.top (12) + close.height (32) + воздух (12)
       до начала табов. Раньше было var(--space-7) (28px) — close 32px
       физически налезала на первую строку контента, выглядело тесно. */
    padding: 56px var(--space-5) var(--space-6);
    margin: var(--space-3);
    border-radius: var(--radius-lg);
    max-height: calc(100vh - var(--space-6));
  }

  .farmer-modal__close {
    top: var(--space-3);
    right: var(--space-3);
  }

  .farmer-steps {
    margin-bottom: var(--space-5);
  }

  .farmer-step {
    font-size: 9px;
    padding: var(--space-2) 0 var(--space-3);
  }

  .farmer-radio,
  .farmer-check {
    padding: var(--space-3);
  }

  .farmer-rec-hint {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }

  .farmer-rec-hint__value {
    font-size: var(--text-md);
  }

  .farmer-modal__nav {
    flex-direction: column-reverse;
    gap: var(--space-2);
  }

  .farmer-btn,
  .farmer-btn--ghost {
    width: 100%;
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   PARTNER PROGRAM (xt-partner) — секция в самом низу лендинга.
   --------------------------------------------------------------------------
   Идея: компактная капсула для ЦА партнёра/инфлюенсера, упакованная в тот же
   стилевой словарь, что и Гарантия (большие цифры, calc-row, 3 шага). Основная
   ЦА сюда не доскроллит — это нормально, попадает только целевой intent.
   ========================================================================== */

.xt-partner__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 0 var(--space-9);
}

.xt-partner__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-6);
  background: var(--bg-base);
  align-items: flex-start;
}

.xt-partner__stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.xt-partner__stat-value {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: var(--weight-semi);
  color: var(--accent);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  /* статичные «10» / «+10» — пропорциональные цифры выглядят
     плотнее, чем tabular-nums (там «1» расширяется до ширины «0»). */
}

.xt-partner__stat-unit {
  font-size: 0.55em;
  font-weight: var(--weight-medium);
  color: var(--accent);
  margin-left: 2px;
  letter-spacing: 0;
}

.xt-partner__stat-note {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  line-height: var(--leading-snug);
}

/* Calc-row — повторяет визуальный язык .xt-guard-calc */
.xt-partner__calc {
  margin: 0 0 var(--space-9);
  padding: 0;
}

.xt-partner__calc-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
}

.xt-partner__calc-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.xt-partner__calc-cell {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--bg-base);
}

.xt-partner__calc-cell--accent,
.xt-partner__calc-cell--success {
  background: var(--bg-elevated);
}

.xt-partner__calc-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.xt-partner__calc-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.xt-partner__calc-cell--accent .xt-partner__calc-value {
  color: var(--accent);
}

.xt-partner__calc-cell--success .xt-partner__calc-value {
  color: var(--success);
}

.xt-partner__calc-note {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-quaternary);
  line-height: var(--leading-snug);
}

/* 3 step-cards (повторяет язык xt-guard) */
.xt-partner__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-12);
  row-gap: var(--space-9);
  margin: 0 0 var(--space-9);
}

.xt-partner__step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-5);
  align-items: start;
}

.xt-partner__step-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: var(--weight-medium);
  color: var(--fg-quaternary);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  padding-top: 4px;
}

.xt-partner__step-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}

.xt-partner__step-text {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--fg-tertiary);
  line-height: var(--leading-snug);
  margin: 0;
  text-wrap: pretty;
}

/* Pro-block — для крупных рекламодателей. Hairline accent-border, inline. */
.xt-partner__pro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin: 0 0 var(--space-9);
  padding: var(--space-5) var(--space-6);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-lg);
}

.xt-partner__pro-body {
  flex: 1 1 auto;
  min-width: 0;
}

.xt-partner__pro-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--accent);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}

.xt-partner__pro-text {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--fg-secondary);
  line-height: var(--leading-snug);
  margin: 0;
  text-wrap: pretty;
}

.xt-partner__pro-text strong {
  color: var(--fg-primary);
  font-weight: var(--weight-medium);
}

.xt-partner__pro-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-primary);
  background: transparent;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease),
              background var(--duration-base) var(--ease);
  white-space: nowrap;
  /* В проекте box-sizing НЕ глобальный (стоит только на body и точечно).
     Без этого width: 100% на мобиле вылезает за блок на padding+border. */
  box-sizing: border-box;
}

.xt-partner__pro-link svg {
  width: 14px;
  height: 14px;
  color: var(--fg-tertiary);
  transition: color var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}

.xt-partner__pro-link:hover {
  color: var(--fg-primary);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.xt-partner__pro-link:hover svg {
  color: var(--accent);
  transform: translate(1px, -1px);
}

/* CTA */
.xt-partner__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.xt-partner__cta-note {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  margin: 0;
}

@media (max-width: 768px) {
  .xt-partner__stats {
    grid-template-columns: 1fr;
    margin-bottom: var(--space-7);
  }
  .xt-partner__stat {
    padding: var(--space-5);
  }
  .xt-partner__stat-value {
    font-size: 44px;
  }

  .xt-partner__calc {
    margin-bottom: var(--space-7);
  }
  .xt-partner__calc-row {
    grid-template-columns: 1fr;
  }
  .xt-partner__calc-cell {
    padding: var(--space-4) var(--space-5);
  }
  .xt-partner__calc-value {
    font-size: var(--text-xl);
  }

  .xt-partner__steps {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--space-6);
    margin-bottom: var(--space-7);
  }
  .xt-partner__step {
    grid-template-columns: 44px 1fr;
    gap: var(--space-4);
  }
  .xt-partner__step-num {
    font-size: 28px;
  }
  .xt-partner__step-title {
    font-size: var(--text-md);
    margin-bottom: var(--space-2);
  }
  .xt-partner__step-text {
    font-size: var(--text-sm);
  }

  .xt-partner__pro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-7);
  }
  .xt-partner__pro-link {
    width: 100%;
    justify-content: center;
  }

  /* На мобайле inline CTA дублирует always-visible sticky-CTA внизу — прячем
     только кнопку, оставляем note (полезный fact про минимальную сумму вывода). */
  .xt-partner__cta > .xt-btn {
    display: none;
  }

  .xt-partner__cta-note {
    font-size: 12px;
  }
}

/* ==========================================================================
   PAGE FOOTER (вынесено из section#cashback) — отдельный <footer>
   ========================================================================== */

.xt-page-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-5) 0 var(--space-6);
}

.xt-page-footer__text {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--fg-quaternary);
  line-height: var(--leading-snug);
  text-align: center;
  margin: 0;
}

.xt-page-footer a {
  display: inline-block;
  margin-left: var(--space-3);
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-subtle);
  color: var(--fg-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  background: transparent;
  transition: color var(--duration-base) var(--ease);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.xt-page-footer a:hover {
  color: var(--fg-primary);
}

@media (max-width: 640px) {
  .xt-page-footer {
    padding: var(--space-4) 0 var(--space-5);
  }
  .xt-page-footer__text {
    font-size: 11px;
  }
  .xt-page-footer a {
    display: block;
    margin: var(--space-2) 0 0;
    padding: 0;
    border-left: 0;
    font-size: 10px;
  }
}