/* =============================================================================
   IDEXIUM · Лендинг v2 · Дизайн-токены (tokens.css)
   Фирменная система: G15 (сталь/серебро · фиолетовый · золото)
   Источник правды по цветам: 03_ДИЗАЙН/UI_KIT/UI_KIT-NEXT-DEMO-v1.html (блок :root, --ix-*)
   Правила ролей: 07_ЗАКОН_СБОРКИ_ЛЕНДИНГА.md · слои: 02_БАЗА_КОМПОНЕНТОВ_И_МАТЕРИАЛОВ.md

   ЛОКИ РОЛЕЙ (соблюдены на уровне семантики):
     • Сталь / серебро  → нейтраль, структура, фон, линии, Basic/Pro/metal (применять свободно).
     • Фиолетовый       → ТОЛЬКО кнопки CTA / AI / focus / selected / Business.
     • Золото           → ТОЛЬКО VIP / Club / NFT / Premium. Благородное золото #EDB322, НЕ жёлтый.

   Структура файла:
     СЛОЙ 1 · ПРИМИТИВЫ   — сырые значения G15 (1:1 перенос из кита, --ix-*).
     СЛОЙ 2 · СЕМАНТИКА   — роли (фон/текст/линии/акценты) + переключение light/dark.
     СЛОЙ 3 · КОМПОНЕНТЫ  — кнопки, карточки, стекло, попап, курсор, тарифные рамки.

   Пометка «производное» стоит там, где значения в ките нет и оно выведено
   через color-mix от существующих G15-токенов (без смешивания двух цветных ролей).
   ============================================================================= */


/* =============================================================================
   ШРИФТЫ · @font-face на локальные файлы
   Путь проверен от папки лендинга: tokens.css лежит в .../03_ДИЗАЙН/лендинг-v2/,
   шрифты — в .../03_ДИЗАЙН/UI_KIT/FONTS/  →  относительный путь «../UI_KIT/FONTS/».
   (Владелец предлагал «../../UI_KIT/FONTS/» — это верно ТОЛЬКО если css переедет
    на уровень глубже, напр. лендинг-v2/design-system/. Сейчас правильный путь — один «../».)
   Inter    — весь текст и UI. Unbounded — ТОЛЬКО слово IDEXIUM / логотип-акценты.
   ============================================================================= */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('fonts/Unbounded-Variable.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}


/* =============================================================================
   СЛОЙ 1 · ПРИМИТИВЫ (сырые значения G15 — 1:1 из кита)
   Здесь НЕЛЬЗЯ менять hex/rgba без отдельной команды Simon.
   ============================================================================= */
:root {

  /* --- Базовые тёмные фоны (сталь, Layer 0) --- */
  --ix-bg-page: #060606;
  --ix-bg-section: #090909;
  --ix-bg-panel: rgba(10,12,18,0.85);
  --ix-bg-elevated: rgba(14,16,22,0.90);
  --ix-tint-dark-95: rgba(10,12,18,0.95);
  --ix-graphite-nav: rgba(16,20,28,0.95);

  /* --- Графитово-стальная база (производное · спека XEU variant-2: глубокий графит #0c0f14
         с мягким радиальным стальным свечением к центру, НЕ плоский чёрный) --- */
  --ix-graphite-1: #0C0F14;                    /* глубокий графит — база тёмного фона */
  --ix-graphite-2: #10141B;                    /* приподнятый графит — секции/панели */
  --ix-graphite-0: #080A0E;                    /* самый тёмный край — виньетка/низ */
  --ix-steel-glow-core: rgba(174,190,214,0.10);/* стальное свечение к центру экрана */

  /* --- Уровни стали Layer 2 / 3 / 3.5 (полупрозрачные поверхности) --- */
  --ix-layer2-bg: rgba(11,13,19,0.62);
  --ix-layer3-bg: rgba(20,24,32,0.30);
  --ix-layer35-bg: rgba(28,34,46,0.28);
  --ix-layer2-alt-light: rgba(20,24,32,0.50);
  --ix-layer2-border-top: rgba(200,208,216,0.40);

  /* --- Затемнители под оверлеи (нейтральные) --- */
  --ix-glass-dim-01: rgba(0,0,0,0.20);
  --ix-glass-dim-02: rgba(0,0,0,0.40);
  --ix-glass-dim-03: rgba(0,0,0,0.60);
  --ix-glass-dim-04: rgba(0,0,0,0.80);

  /* --- Сталь · базовый цвет rgb(200,208,216) ≈ #C8D0D8 (нейтраль/структура) --- */
  --ix-steel-02: rgba(200,208,216,0.02);
  --ix-steel-03: rgba(200,208,216,0.03);
  --ix-steel-05: rgba(200,208,216,0.05);
  --ix-steel-06: rgba(200,208,216,0.06);
  --ix-steel-07: rgba(200,208,216,0.07);
  --ix-steel-10: rgba(200,208,216,0.10);
  --ix-steel-20: rgba(200,208,216,0.20);
  --ix-steel-30: rgba(200,208,216,0.30);
  --ix-steel-40: rgba(200,208,216,0.40);
  --ix-steel-50: rgba(200,208,216,0.50);
  --ix-steel-60: rgba(200,208,216,0.60);
  --ix-steel-70: rgba(200,208,216,0.70);
  --ix-steel-80: rgba(200,208,216,0.80);
  --ix-steel-90: rgba(200,208,216,0.90);

  /* --- Серебро (стекло/металл rgb(180-200)) --- */
  --ix-silver-glass-02: rgba(200,210,220,0.30);
  --ix-silver-glass-03: rgba(200,210,220,0.50);
  --ix-silver-glass-04: rgba(200,210,220,0.70);
  --ix-silver-glass-05: rgba(200,210,220,0.90);
  --ix-metal-01: rgba(180,196,212,0.10);
  --ix-metal-02: rgba(180,196,212,0.20);
  --ix-metal-03: rgba(180,196,212,0.30);
  --ix-metal-04: rgba(180,196,212,0.50);
  --ix-metal-05: rgba(180,196,212,0.75);

  /* --- Логотипная сталь (сплошные hex для градиентов/знаков) --- */
  --ix-logo-steel-strong: #D6DDE4;
  --ix-logo-steel: #A8B2BD;
  --ix-logo-steel-soft: #6F7882;
  --ix-logo-steel-ghost: #4A525B;
  --ix-logo-bcs-frame-hi: #C0C8D0;
  --ix-logo-bcs-frame-mid: #8E969E;
  --ix-logo-bcs-frame-lo: #3A4148;
  --ix-logo-text-on-light: #1A1F26;   /* текст логотипа/заголовков на светлом фоне */
  --ix-logo-light-bg: #FFFFFF;

  /* --- Текст (на тёмном) --- */
  --ix-text-main: rgba(248,250,252,0.95);
  --ix-text-strong: rgba(200,208,216,0.85);
  --ix-text-soft: rgba(200,208,216,0.75);
  --ix-text-soft-alt: rgba(232,236,243,0.80);
  --ix-text-label-strong: rgba(232,236,243,0.60);
  --ix-text-mute-mid: rgba(232,236,243,0.40);
  --ix-text-label-soft: rgba(232,236,243,0.20);

  /* --- Границы / линии (нейтральные, синевато-стальная база) --- */
  --ix-border-metal: rgba(180,196,212,0.24);
  --ix-border-ghost: rgba(180,196,212,0.17);
  --ix-border-soft: rgba(180,196,212,0.20);
  --ix-border-top: rgba(180,196,212,0.36);
  --ix-border-strong: rgba(200,208,216,0.35);
  --ix-border-solid: rgba(200,208,216,0.55);
  --ix-border-heavy: var(--ix-steel-70);

  /* --- Нейтральные белые оверлеи (блики стекла) --- */
  --ix-white-02: rgba(255,255,255,0.02);
  --ix-white-04: rgba(255,255,255,0.04);
  --ix-white-05: rgba(255,255,255,0.05);
  --ix-white-06: rgba(255,255,255,0.06);
  --ix-white-08: rgba(255,255,255,0.08);

  /* --- ФИОЛЕТОВЫЙ · только CTA / AI / focus / selected / Business ---
         Оттенок взят из кита UI_KIT-NEXT-DEMO-v1 — насыщенный кнопочный / og-purple
         фиолетовый rgb(138,92,255) = #8A5CFF (именно он на кнопках, которые нравятся
         владельцу). Раньше в образце стоял более блёклый лавандовый #8B7CFF (139,124,255)
         — заменён на #8A5CFF, тинты пересобраны на той же базе для когерентности. */
  --ix-accent-violet: #8A5CFF;         /* базовый акцент (кит: og-purple) */
  --ix-violet-bright: #A395FF;         /* кит */
  --ix-violet-deep: #6B5EE4;           /* кит */
  --ix-violet-ghost: rgba(138,92,255,0.08);
  --ix-tint-violet-90: rgba(138,92,255,0.90);
  --ix-tint-violet-65: rgba(138,92,255,0.65);
  --ix-tint-violet-52: rgba(138,92,255,0.52);
  --ix-tint-violet-38: rgba(138,92,255,0.38);
  --ix-tint-violet-30: rgba(138,92,255,0.30);
  --ix-tint-violet-22: rgba(138,92,255,0.22);
  --ix-tint-violet-18: rgba(138,92,255,0.18);
  --ix-tint-violet-14: rgba(138,92,255,0.14);
  --ix-tint-violet-10: rgba(138,92,255,0.10);
  --ix-tint-violet-07: rgba(138,92,255,0.07);

  /* --- ЗОЛОТО · только VIP / Club / NFT / Premium · благородное #EDB322 (НЕ жёлтый) --- */
  --ix-gold: #EDB322;                  /* базовое золото */
  --ix-gold-t1-highlight: #FFE898;     /* верхний блик кромки */
  --ix-gold-t1-bright: #F0B81C;
  --ix-gold-t1-edge-soft: #B58A18;
  --ix-gold-t1-edge-side: #937214;
  --ix-gold-t1-edge-shadow: #826612;
  --ix-gold-frame-side-50: rgba(237,179,34,0.50);
  --ix-au-03: rgba(237,179,34,0.07);
  --ix-au-05: rgba(237,179,34,0.12);
  --ix-au-09: rgba(237,179,34,0.21);
  --ix-au-18: rgba(237,179,34,0.18);
  --ix-au-36: rgba(237,179,34,0.85);
  --ix-au-40: rgba(237,179,34,0.95);
  --ix-au-55: rgba(237,179,34,0.55);

  /* --- Служебные (danger/info/success — не роли лендинга, для статусов форм) --- */
  --ix-info: rgba(59,130,246,0.90);
  --ix-success: rgba(34,197,94,0.90);
  --ix-danger: rgba(239,68,68,0.90);

  /* --- Материалы «liquid glass» (Layer 3.5) --- */
  --ix-glass-hi-2: rgba(255,255,255,0.15);
  --ix-glass-sheen: rgba(255,255,255,0.12);
  --ix-glass-fill-2: rgba(28,34,46,0.45);
  --ix-glass-fill-1: rgba(28,34,46,0.18);
  --ix-glass-ring-lo: rgba(200,208,216,0.16);
  --ix-glass-ring-hi: rgba(200,208,216,0.95);

  /* --- Шрифтовые семейства (примитивы) --- */
  --ix-font-display: 'Inter', sans-serif;     /* текст + UI */
  --ix-font-brand: 'Unbounded', sans-serif;   /* только IDEXIUM / логотип-акценты */


  /* --- КНОПКИ CLEAN-v1 · 1-в-1 перенос из кита UI_KIT-NEXT-DEMO-v1 (.ix-cmp-btn / --ix-btn-*)
         Именно эти кнопки нравятся владельцу: тёмное стекло-тело, цветная кромка+текст,
         белый отблеск-shimmer при наведении, лёгкая цветная подсветка. --- */
  --ix-btn-base-fill: rgba(11,13,19,0.82);
  --ix-btn-base-text: rgba(224,230,236,0.97);
  --ix-btn-press: rgba(0,0,0,0.25);
  --ix-btn-bevel-base: rgba(255,255,255,0.10);     /* белый блик — полоса shimmer */
  --ix-btn-side-fallback: rgba(0,0,0,0.30);        /* мягкая тень при hover */
  --ix-btn-secondary-border: rgba(200,208,216,0.18);
  /* Silver (нейтральная / вторичная) */
  --ix-btn-silver-fill: rgba(148,162,185,0.18);
  --ix-btn-silver-border: rgba(188,202,224,0.56);
  --ix-btn-silver-text: rgba(205,218,234,0.88);
  --ix-btn-silver-fill-hover: linear-gradient(135deg, rgba(178,192,215,0.54) 0%, rgba(148,162,185,0.46) 100%);
  --ix-btn-silver-fill-active: rgba(132,147,170,0.14);
  --ix-btn-silver-border-hover: rgba(212,226,250,0.88);
  --ix-btn-silver-text-hover: rgba(222,236,252,0.97);
  --ix-btn-silver-highlight: rgba(210,225,242,0.10);
  --ix-btn-silver-highlight-hover: rgba(228,240,255,0.20);
  /* Violet (главная CTA / AI) */
  --ix-btn-violet-fill: rgba(130,95,255,0.18);
  --ix-btn-violet-border: rgba(130,95,255,0.52);
  --ix-btn-violet-text: rgba(155,120,255,0.88);
  --ix-btn-violet-fill-hover: linear-gradient(135deg, rgba(152,112,255,0.56) 0%, rgba(112,78,240,0.46) 100%);
  --ix-btn-violet-fill-active: rgba(110,80,220,0.30);
  --ix-btn-violet-border-hover: rgba(172,140,255,0.90);
  --ix-btn-violet-text-hover: rgba(192,165,255,0.97);
  --ix-btn-violet-glow-hot: rgba(160,116,255,0.58);/* кит: og-purple-glow-hot */

  /* --- СТАЛЬНЫЕ ТЕКСТ-ГРАДИЕНТЫ · 1-в-1 из кита (--ix-land-*-gradient)
         h2-gradient: светлое серебро → сталь (для крупных заголовков на тёмном).
         brand-gradient: металлическая кромка знака (для слова IDEXIUM). --- */
  --ix-land-h2-gradient: linear-gradient(155deg, rgba(248,250,252,0.98) 0%, rgba(248,250,252,0.98) 20%, var(--ix-steel-90) 48%, var(--ix-steel-80) 72%, var(--ix-steel-70) 100%);
  --ix-land-brand-gradient: linear-gradient(90deg, var(--ix-logo-bcs-frame-hi) 0%, var(--ix-logo-bcs-frame-mid) 60%, var(--ix-logo-bcs-frame-lo) 100%);
  /* Тёмные версии тех же градиентов — для светлой темы (текст читаем на белом) */
  --ix-land-h2-gradient-dark: linear-gradient(155deg, #1A1F26 0%, #2C333B 45%, #5A626C 100%);
  --ix-land-brand-gradient-dark: linear-gradient(90deg, #3A4148 0%, #6F7882 60%, #1A1F26 100%);


  /* ===========================================================================
     ПРИМИТИВЫ · НЕ ИЗ КИТА (нейтральная база, безопасно вводить)
     Радиусы, шкала отступов, тайминги — структурные значения, не палитра.
     =========================================================================== */

  /* Радиусы: базовый 8px, малый 6px, крупный 12px. Никаких 20-30px. */
  --r-small: 6px;    /* мелкие контролы, чипы (совпадает с --ix-og-radius 6px) */
  --r-base: 8px;     /* базовый радиус (совпадает с --ix-radius-control 8px)   */
  --r-large: 12px;   /* крупные плиты/карточки (совпадает с --ix-radius-panel/tariff 12px) */
  --r-pill: 999px;   /* производное: капсульные пилюли/переключатели */

  /* Шкала отступов space-1…space-12 (умеренная, секции не раздуваются) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* Анимация: длительности, easing */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* стандартный вход/выход */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* производное: мягкий out (для стекла/попапов) */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* производное: акцентный in-out */
}


/* =============================================================================
   СЛОЙ 2 · СЕМАНТИКА (роли) — общие для обеих тем
   Гибрид: базовая тема СВЕТЛАЯ, тёмные премиум-врезки берут --insert-dark-*.
   ============================================================================= */
:root {

  /* --- Шрифтовые роли --- */
  --font-ui: var(--ix-font-display);       /* весь текст и интерфейс — Inter */
  --font-brand: var(--ix-font-brand);      /* слово IDEXIUM / логотип — Unbounded */
  --font-mono: "SF Mono", ui-monospace, Menlo, monospace; /* тех-подписи: плиты-слои, метки */

  /* --- Акценты по ролям (общие, hue не зависит от темы) --- */
  --accent-cta: var(--ix-accent-violet);       /* CTA — фиолетовый */
  --accent-ai: var(--ix-accent-violet);        /* AI  — фиолетовый */
  --accent-selected: var(--ix-tint-violet-90); /* выбранное состояние */
  --focus-ring: var(--ix-tint-violet-65);      /* фокус — фиолетовый */
  --role-vip: var(--ix-gold);                  /* VIP/Club/NFT — золото */
  --role-metal: var(--ix-logo-steel);          /* Basic/Pro/metal — серебро */

  /* --- Тёмные премиум-врезки (всегда тёмные в любой теме) --- */
  --insert-dark-bg: var(--ix-bg-section);
  --insert-dark-panel: var(--ix-bg-panel);
  --insert-dark-text: var(--ix-text-main);
  --insert-dark-text-soft: var(--ix-text-soft);
  --insert-dark-line: var(--ix-border-ghost);

  /* --- Отступ секции (компактный, не раздувается) --- */
  --section-pad-y: clamp(48px, 8vw, 96px);
  --section-pad-x: clamp(16px, 4vw, 40px);
  --section-gap: var(--space-7);        /* внутренний ритм секции */
}

/* --------------------------------------------------------------------------
   ТЕМА: LIGHT (базовая) — светлая сталь.
   Светлых фонов в ките нет (surface-card/elevated удалены Simon «введём заново
   при сборке light theme») → фоны/линии выведены color-mix от стали и белого.
   Текст — реальный кит-токен #1A1F26 (--ix-logo-text-on-light).
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Фоны — слои стали на светлом (Layer 0 → 3.5) */
  --bg-page: var(--ix-logo-light-bg);                                        /* #FFFFFF (кит) */
  --bg-section: color-mix(in srgb, var(--ix-logo-steel) 4%, #FFFFFF);        /* производное: L1 */
  --bg-layer-2: color-mix(in srgb, var(--ix-logo-steel) 8%, #FFFFFF);        /* производное: карточки/панели */
  --bg-layer-3: color-mix(in srgb, var(--ix-logo-steel) 14%, #FFFFFF);      /* производное: чипы/вкладки */
  --bg-layer-35: color-mix(in srgb, #FFFFFF 82%, transparent);              /* производное: liquid glass overlay */
  --bg-elevated: #FFFFFF;

  /* Текст */
  --text-main: var(--ix-logo-text-on-light);                                /* #1A1F26 (кит) */
  --text-strong: color-mix(in srgb, var(--ix-logo-text-on-light) 88%, #FFFFFF); /* производное */
  --text-soft: color-mix(in srgb, var(--ix-logo-text-on-light) 64%, #FFFFFF);   /* производное */
  --text-mute: color-mix(in srgb, var(--ix-logo-text-on-light) 42%, #FFFFFF);   /* производное */
  --text-on-accent: #FFFFFF;

  /* Линии / границы (сталь на светлом) */
  --line-hair: color-mix(in srgb, var(--ix-logo-steel) 22%, transparent);   /* производное: тонкая */
  --line-soft: color-mix(in srgb, var(--ix-logo-steel) 34%, transparent);   /* производное */
  --line-strong: color-mix(in srgb, var(--ix-logo-steel-soft) 55%, transparent); /* производное */
  --line-top-sheen: var(--ix-white-06);

  /* Затемнитель под попап (backdrop) */
  --scrim: rgba(20,24,32,0.28);                                             /* производное от layer-стали */

  /* Фон страницы в светлой теме (вторая тема, через окошко глаза): белый со
     стальной подсветкой к центру — зеркало тёмного графитового варианта */
  --page-bg-gradient:
    radial-gradient(58% 46% at 50% 20%, rgba(180,196,212,0.20), transparent 72%),
    linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--ix-logo-steel) 7%, #FFFFFF) 100%);
  --grid-line: rgba(26,31,38,0.05);

  /* Стальные текст-градиенты (тёмная сталь — чтобы текст читался на белом) */
  --steel-text-gradient: var(--ix-land-h2-gradient-dark);
  --brand-word-gradient: var(--ix-land-brand-gradient-dark);
}

/* --------------------------------------------------------------------------
   ТЕМА: DARK — прямые G15-токены кита (источник правды для тёмного).
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  /* Фоны — глубокий графит вместо плоского чёрного (замечание владельца) */
  --bg-page: var(--ix-graphite-1);       /* #0C0F14 — глубокий графит */
  --bg-section: var(--ix-graphite-2);    /* #10141B */
  --bg-layer-2: var(--ix-layer2-bg);     /* rgba(11,13,19,0.62) */
  --bg-layer-3: var(--ix-layer3-bg);     /* rgba(20,24,32,0.30) */
  --bg-layer-35: var(--ix-layer35-bg);   /* rgba(28,34,46,0.28) — liquid glass */
  --bg-elevated: var(--ix-bg-elevated);  /* rgba(14,16,22,0.90) */

  /* Текст */
  --text-main: var(--ix-text-main);
  --text-strong: var(--ix-text-strong);
  --text-soft: var(--ix-text-soft);
  --text-mute: var(--ix-text-mute-mid);
  --text-on-accent: #FFFFFF;

  /* Линии / границы */
  --line-hair: var(--ix-border-ghost);
  --line-soft: var(--ix-border-soft);
  --line-strong: var(--ix-border-strong);
  --line-top-sheen: var(--ix-layer2-border-top);

  /* Затемнитель под попап */
  --scrim: var(--ix-glass-dim-03);       /* rgba(0,0,0,0.60) */

  /* Графитово-стальной фон страницы: радиальное стальное свечение к центру +
     едва заметный AI-ореол + виньетка снизу поверх глубокого графита */
  --page-bg-gradient:
    radial-gradient(58% 46% at 50% 20%, var(--ix-steel-glow-core), transparent 72%),
    radial-gradient(64% 54% at 82% 4%, var(--ix-tint-violet-10), transparent 60%),
    radial-gradient(120% 120% at 50% 132%, var(--ix-graphite-0), transparent 68%),
    linear-gradient(180deg, var(--ix-graphite-1) 0%, var(--ix-graphite-0) 100%);
  --grid-line: rgba(200,208,216,0.035);          /* едва заметная стальная сетка */

  /* Стальные текст-градиенты (светлое серебро — на тёмном фоне) */
  --steel-text-gradient: var(--ix-land-h2-gradient);
  --brand-word-gradient: var(--ix-land-brand-gradient);
}


/* =============================================================================
   СЛОЙ 3 · КОМПОНЕНТНЫЕ ТОКЕНЫ
   ============================================================================= */
:root {

  /* --------------------------------------------------------------------------
     3.1 · КНОПКИ (CLEAN-v1, .ix-cmp-btn · те, что нравятся владельцу)
     Геометрия 1-в-1 из кита: радиус 8px, тёмное стекло-тело, цветная кромка+текст,
     белый shimmer-блик (::before, уезжает при hover), лёгкая заливка тоном.
     Поверх (в index.html) добавлена заливка СНИЗУ ВВЕРХ (::after scaleY).
     Высота поднята с 32→44px под масштаб лендинга (пропорции и стиль сохранены).
     -------------------------------------------------------------------------- */
  --btn-radius: var(--r-base);           /* 8px = радиус кита .ix-cmp-btn */
  --btn-height: 44px;                    /* лендинг-масштаб (кит: 32/38) */
  --btn-pad-x: 22px;
  --btn-font-family: var(--ix-font-ui);  /* Inter — как в ките (.ix-cmp-btn) */
  --btn-font-size: 14px;
  --btn-font-weight: 600;
  --btn-letter-spacing: 0.01em;
  /* Материалы тела/кромки/блика 1-в-1 из кита (.ix-cmp-btn) */
  --btn-body-fill: var(--ix-btn-base-fill);       /* тёмное стекло-тело */
  --btn-body-line: var(--ix-border-metal);        /* базовая кромка */
  --btn-body-text: var(--ix-btn-base-text);
  --btn-shimmer: var(--ix-btn-bevel-base);        /* белый блик-полоса */
  --btn-shimmer-dur: 0.48s;                        /* уезжает за 0.48s (кит) */
  --btn-sheen-inset: var(--ix-glass-sheen);        /* верхний блик при hover */
  --btn-lift-shadow: 0 4px 16px var(--ix-btn-side-fallback);
  --btn-elevation: 0 6px 16px -6px rgba(0,0,0,0.55), 0 2px 4px -2px rgba(0,0,0,0.45);
  --btn-elevation-active: 0 4px 12px -4px rgba(0,0,0,0.55);
  --btn-text-shadow: 0 1px 0 rgba(0,0,0,0.65), 0 2px 0 rgba(0,0,0,0.45), 0 3px 5px rgba(0,0,0,0.55);
  --btn-sheen-color: rgba(255,255,255,0.18);
  --btn-focus-ring: 0 0 0 2px rgba(218,228,240,0.40);

  /* Кнопка CTA / AI — фиолетовая (лок роли) */
  --btn-cta-top: rgba(138,92,255,0.85);       /* --ix-og-purple-top */
  --btn-cta-side: rgba(80,52,150,0.32);       /* --ix-og-purple-side */
  --btn-cta-fill: rgba(138,92,255,0.10);      /* --ix-og-purple-fill */
  --btn-cta-fill-hot: rgba(138,92,255,0.24);  /* --ix-og-purple-fill-hot */
  --btn-cta-glow: rgba(138,92,255,0.30);      /* --ix-og-purple-glow */
  --btn-cta-glow-hot: rgba(160,116,255,0.58); /* --ix-og-purple-glow-hot */
  --btn-cta-text: rgba(138,92,255,0.85);      /* --ix-og-purple-text */

  /* Кнопка Silver — нейтраль / Basic-Pro (лок роли) */
  --btn-silver-top: rgba(244,250,255,0.85);   /* --ix-og-silver-top */
  --btn-silver-side: rgba(150,168,190,0.30);  /* --ix-og-silver-side */
  --btn-silver-fill: rgba(200,216,236,0.08);  /* --ix-og-silver-fill */
  --btn-silver-fill-hot: rgba(200,216,236,0.20);
  --btn-silver-glow: rgba(200,216,236,0.28);
  --btn-silver-glow-hot: rgba(224,236,250,0.50);
  --btn-silver-text: rgba(244,250,255,0.85);

  /* Кнопка Iron — тёмная сталь (нейтраль) */
  --btn-iron-top: rgba(190,204,222,0.55);     /* --ix-og-iron-top */
  --btn-iron-side: rgba(20,24,30,0.50);
  --btn-iron-fill: rgba(80,92,108,0.16);
  --btn-iron-fill-hot: rgba(96,110,128,0.30);
  --btn-iron-glow: rgba(120,140,165,0.20);
  --btn-iron-glow-hot: rgba(150,172,200,0.38);
  --btn-iron-text: rgba(190,204,222,0.55);

  /* Кнопка Gold — VIP/Premium (лок роли) */
  --btn-gold-top: rgba(244,190,60,0.90);      /* --ix-og-gold-top */
  --btn-gold-side: rgba(196,150,40,0.30);
  --btn-gold-fill: rgba(244,190,60,0.08);
  --btn-gold-fill-hot: rgba(244,190,60,0.20);
  --btn-gold-glow: rgba(244,190,60,0.30);
  --btn-gold-glow-hot: rgba(255,210,90,0.55);
  --btn-gold-text: rgba(244,190,60,0.90);

  /* Disabled (общее) */
  --btn-disabled-fill: rgba(255,255,255,0.02);
  --btn-disabled-text: rgba(180,188,200,0.40);

  /* Анимация заливки кнопки СНИЗУ ВВЕРХ (--btn-fill-*) */
  --btn-fill-origin: bottom;                  /* точка роста заливки */
  --btn-fill-direction: to top;               /* направление градиента-заливки */
  --btn-fill-duration: var(--dur-base);       /* 300ms */
  --btn-fill-ease: var(--ease-out);
  --btn-fill-scale-from: 0;                   /* transform: scaleY(0) → 1 */
  --btn-fill-scale-to: 1;

  /* --------------------------------------------------------------------------
     3.2 · СВЕЧЕНИЕ ЗА КУРСОРОМ (--glow-*) — фиолетовое (роль AI/акцент)
     -------------------------------------------------------------------------- */
  --glow-color: var(--ix-tint-violet-30);     /* цвет ореола под курсором */
  --glow-color-hot: var(--ix-tint-violet-52); /* усиленный при наведении на CTA */
  --glow-size: 260px;                         /* = --ix-tariff-hover-glow-size */
  --glow-blur: 40px;                          /* = --ix-tariff-hover-glow-blur */
  --glow-opacity: 0.70;                       /* = --ix-tariff-hover-glow-opacity-purple */
  --glow-duration: var(--dur-slow);           /* плавное следование, 600ms */
  --glow-ease: var(--ease-out);

  /* --------------------------------------------------------------------------
     3.3 · КАРТОЧКИ (Layer 2)
     -------------------------------------------------------------------------- */
  --card-radius: var(--r-large);              /* 12px */
  --card-bg: var(--bg-layer-2);
  --card-line: var(--line-soft);
  --card-line-top: var(--line-top-sheen);
  --card-pad: var(--space-6);
  --card-shadow: 0 10px 28px rgba(0,0,0,0.18);          /* производное: мягче тарифной для светлой темы */
  --card-shadow-hover: 0 24px 50px rgba(0,0,0,0.28);    /* производное */
  --card-transition: var(--dur-base) var(--ease-standard);

  /* --------------------------------------------------------------------------
     3.4 · СТЕКЛО (liquid glass, Layer 3.5)
     -------------------------------------------------------------------------- */
  --glass-fill: var(--ix-glass-fill-2);       /* rgba(28,34,46,0.45) */
  --glass-fill-soft: var(--ix-glass-fill-1);  /* rgba(28,34,46,0.18) */
  --glass-sheen: var(--ix-glass-sheen);       /* rgba(255,255,255,0.12) */
  --glass-hi: var(--ix-glass-hi-2);           /* rgba(255,255,255,0.15) */
  --glass-ring-lo: var(--ix-glass-ring-lo);
  --glass-ring-hi: var(--ix-glass-ring-hi);
  --glass-radius: var(--r-large);             /* 12px */
  --glass-blur: 18px;                         /* производное: backdrop-filter blur для стекла */

  /* --------------------------------------------------------------------------
     3.5 · ПОПАП / МОДАЛКА (Layer 3.5 over scrim)
     -------------------------------------------------------------------------- */
  --popup-bg: var(--bg-layer-35);
  --popup-fill: var(--glass-fill);
  --popup-line: var(--glass-ring-lo);
  --popup-radius: var(--r-large);             /* 12px */
  --popup-shadow: 0 36px 70px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
  --popup-scrim: var(--scrim);
  --popup-blur: 24px;                         /* производное: усиленный blur оверлея */
  --popup-in-duration: var(--dur-base);
  --popup-in-ease: var(--ease-out);

  /* --------------------------------------------------------------------------
     3.6 · ТАРИФНЫЕ РАМКИ (iron / silver / purple / gold · --ix-tariff-*)
     Механика: верх 2px, бок/низ 1px, featured-верх 3px. Радиус 12px.
     -------------------------------------------------------------------------- */
  --tariff-radius: var(--r-large);            /* 12px = --ix-tariff-card-radius */
  --tariff-min-height: 240px;
  --tariff-pad-y: 14px;
  --tariff-pad-x: 20px;
  --tariff-border-top-w: 2px;
  --tariff-border-side-w: 1px;
  --tariff-border-bottom-w: 1px;
  --tariff-featured-top-w: 3px;
  --tariff-bg: rgba(12,16,24,0.55);           /* --ix-tariff-card-bg (тёмная премиум-врезка) */
  --tariff-surface-top: rgba(255,255,255,0.020);
  --tariff-surface-bottom: rgba(255,255,255,0.005);
  --tariff-shadow-base: 0 10px 28px rgba(0,0,0,0.40), inset 0 -1px 0 rgba(0,0,0,0.30);
  --tariff-shadow-hover: 0 36px 70px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.30);
  --tariff-hover-line: rgba(255,255,255,0.04);
  --tariff-glow-blur: 40px;
  --tariff-glow-size: 260px;

  /* Iron / FREE + MINI (нейтраль) */
  --tariff-iron-line-top: rgba(190,204,222,0.55);
  --tariff-iron-line-side: rgba(190,204,222,0.12);
  --tariff-iron-text: #cfd8e4;
  --tariff-iron-name: rgba(190,204,222,0.95);
  --tariff-iron-glow-opacity: 0.85;

  /* Silver / BASIC + PRO (серебро — лок роли) */
  --tariff-silver-line-top: rgba(220,232,248,0.85);
  --tariff-silver-line-side: rgba(200,216,236,0.22);
  --tariff-silver-text: #c8d4e2;
  --tariff-silver-name: rgba(220,232,248,0.95);
  --tariff-silver-glow-opacity: 0.55;

  /* Purple / BUSINESS (фиолетовый — лок роли) */
  --tariff-purple-line-top: rgba(138,92,255,0.85);
  --tariff-purple-line-side: rgba(138,92,255,0.20);
  --tariff-purple-text: #ece4ff;
  --tariff-purple-name: rgba(138,92,255,0.95);
  --tariff-purple-glow-opacity: 0.70;

  /* Gold / VIP (золото — лок роли) */
  --tariff-gold-line-top: rgba(244,190,60,0.90);
  --tariff-gold-line-side: rgba(244,190,60,0.22);
  --tariff-gold-text: #ffe9a8;
  --tariff-gold-name: rgba(244,190,60,0.95);
  --tariff-gold-glow-opacity: 0.55;

  /* --------------------------------------------------------------------------
     3.7 · МЕХАНИКИ ИЗ РЕФЕРЕНСОВ (variant-1..4) — тайминги/размеры через токены
     -------------------------------------------------------------------------- */
  /* variant-2: плывущие стеклянные карточки (медленное up/down) */
  --float-amp: 10px;                     /* амплитуда всплытия */
  --float-dur: 7s;                       /* период */
  --float-ease: var(--ease-in-out);
  /* variant-1: линия-шкала дорожной карты (заливается при hover) */
  --rail-track: var(--ix-steel-10);
  --rail-fill: linear-gradient(90deg, var(--ix-violet-deep), var(--ix-accent-violet));
  --rail-fill-dur: var(--dur-slow);
  /* variant-1: подсветка строк по скроллу (неактивная → активная) */
  --scroll-dim: var(--ix-text-mute-mid);
  --scroll-lit: var(--ix-text-main);
  --scroll-lit-accent: var(--ix-violet-bright);
  /* variant-3: сфера флагов/точек */
  --sphere-size: clamp(260px, 34vw, 420px);
  --sphere-dur: 42s;                     /* полный оборот */
  --sphere-flag: 20px;                   /* размер флага на плашке страны */
  /* variant-4: свечение, следующее за курсором по карточке */
  --card-glow: var(--ix-tint-violet-30);
  --card-glow-size: 260px;
  --card-roll-dur: var(--dur-base);      /* прокрутка иконки (roll) */
  /* стрелка прокрутки вниз (hero) — строго по центру */
  --scroll-cue-size: 30px;
}