/* =============================================================================
   JetTon — брендовая тема (RU). Подключается ПОСЛЕ sfb-design.css.
   -----------------------------------------------------------------------------
   ИСТОЧНИК: палитра и язык сняты с живого jetton.casino (§1 рунбука). Важно: тот
   сайт — про ТОКЕН JetTon на TON, само казино живёт в Telegram-боте и веб-версии.
   Оттуда взяты: космический навy-фон, электрик-индиго карточка с маджента-свечением
   в углу, прозрачные пилюли-кнопки с обводкой (не заливка), фирменный синий TON.

   ТЕЗИС: не казино, а КРИПТА. Jetton запущен в 2023 на блокчейне TON, встроен в
   Telegram, краш-игры с provably fair — результат раунда проверяется хешем. Отсюда
   и подпись темы .jt-bloom: маджента-свечение, привязанное к углу секции и
   перекидывающееся на противоположный у соседней — как на карточке первоисточника.

   АНТИ-ФУТПРИНТ: сознательно противоположна welvura (светлый бархат, Prata+Golos).
   Здесь — тёмный космос, Unbounded + Manrope. Общего с ней и с базой ноль.

   Переопределяем ИМЕНА ТОКЕНОВ БАЗЫ → каскад красит и внутренние страницы.
   Свои компоненты — неймспейс .jt-*.
   ============================================================================= */

:root {
  /* --- палитра TON/крипта (снята с jetton.casino) ------------------------ */
  --jt-void:     #080a1f;   /* космический фон                              */
  --jt-deep:     #0f1236;   /* поверхность на тон выше                      */
  --jt-card:     #181c4a;   /* карточки                                     */
  --jt-indigo:   #4548d8;   /* электрик-индиго — градиент карточки          */
  --jt-electric: #5b5fe8;
  --jt-magenta:  #c2437e;   /* свечение в углу                              */
  --jt-ton:      #0098ea;   /* фирменный синий TON — акцент                 */
  --jt-line:     #262b63;   /* волосяные линии на тёмном                    */
  --jt-text:     #e8eaff;
  --jt-dim:      #9aa0d4;

  /* --- переопределение токенов базы -------------------------------------- */
  --accent:      var(--jt-ton);
  --accent-ink:  #47b6f2;
  --accent-tint: #12224a;
  --cta:         var(--jt-indigo);
  --cta-ink:     #7d80f0;
  --success:     #2fbf83;
  --success-tint:#0d2c22;
  --success-bd:  #1c4a3a;
  --warn:        var(--jt-magenta);
  --warn-tint:   #2a1030;
  --danger:      #e2496b;

  --ink:         var(--jt-text);
  --body:        #c3c8ee;
  --reading:     #b6bce6;
  --muted:       var(--jt-dim);
  --muted-2:     #7b81b5;

  --surface:     var(--jt-deep);
  --surface-2:   #12163c;
  --border:      var(--jt-line);
  --border-soft: #1c2050;

  --dark:        var(--jt-void);
  --dark-2:      #050614;
  --dark-hover:  var(--jt-card);
  --dark-muted:  var(--jt-dim);
  --dark-faint:  #6b70a0;
  --page-bg:     var(--jt-void);

  --cream:       var(--jt-card);
  --cream-2:     #1f2458;
  --cream-bd:    #2e3470;
  --cream-bd-2:  #262b63;

  --star:        var(--jt-ton);

  /* --- типографика: обе с кириллицей, обе НЕ как у welvura -------------- */
  --font-head: 'Unbounded', 'Arial Black', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Крипта-UI любит крупный радиус — как карточка на первоисточнике. */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
}

/* ─── ПОДПИСЬ · СВЕЧЕНИЕ ──────────────────────────────────────────────────────
   Маджента-блум, привязанный к углу секции; у соседней перекидывается на
   противоположный. Ровно так устроена карточка на jetton.casino: индиго с
   пурпурным затеканием из одного угла. Один приём, два состояния. */
.jt-bloom { position: relative; overflow: hidden; }
.jt-bloom::before {
  content: ""; position: absolute; width: 46rem; height: 46rem;
  left: -14rem; bottom: -22rem; pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--jt-magenta) 32%, transparent) 0%,
    color-mix(in srgb, var(--jt-indigo) 14%, transparent) 42%,
    transparent 68%);
}
.jt-bloom--rev::before { left: auto; right: -14rem; bottom: auto; top: -22rem; }
.jt-bloom > * { position: relative; }

/* ─── Типографика ─────────────────────────────────────────────────────────── */
body { font-family: var(--font-body); background: var(--jt-void); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em; }

/* Надзаголовок: TON-синий, моноширинный трек — «технический» регистр крипты. */
.jt-eyebrow {
  font-family: var(--font-body); font-size: .688rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; color: var(--jt-ton);
  display: flex; align-items: center; gap: .75rem;
}
.jt-eyebrow::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--jt-line), transparent); }

/* ─── Хедер ───────────────────────────────────────────────────────────────── */
.jt-top { background: rgba(8,10,31,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--jt-line); position: sticky; top: 0; z-index: 50; }
.jt-top__in { max-width: 1200px; margin: 0 auto; padding: .875rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; }
.jt-logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; flex: none; }
.jt-logo__mark { width: 30px; height: 30px; flex: none; }
.jt-logo__txt { font-family: var(--font-head); font-size: 1.125rem; font-weight: 700;
  color: var(--jt-text); letter-spacing: -.02em; }
.jt-nav { display: flex; gap: 1.25rem; margin-left: auto; align-items: center; }
.jt-nav a, .jt-cat > span { color: var(--jt-dim); text-decoration: none; font-size: .875rem;
  cursor: pointer; padding: .375rem 0; transition: color .15s; }
.jt-nav a:hover, .jt-cat:hover > span { color: var(--jt-text); }
.jt-cat { position: relative; }
.jt-drop { position: absolute; top: 100%; left: -.75rem; min-width: 240px; z-index: 60;
  background: var(--jt-card); border: 1px solid var(--jt-line); border-radius: var(--r-md);
  padding: .5rem; display: none; box-shadow: 0 20px 48px rgba(5,6,20,.6); }
.jt-cat:hover .jt-drop { display: block; }
.jt-drop.wide { display: none; }
.jt-cat:hover .jt-drop.wide { display: grid; grid-template-columns: 1fr 1fr; max-height: 72vh; overflow: auto; }
.jt-drop a { display: block; padding: .5rem .625rem; font-size: .8125rem; border-radius: var(--r-xs); }
.jt-drop a:hover { background: #232869; color: var(--jt-text); }

/* CTA — пилюля с обводкой, как на первоисточнике: там кнопки не залиты.
   Скоуп .jt нужен на внутренних (§3.5). */
.jt-cta, .jt .jt-cta {
  background: transparent; color: var(--jt-text); text-decoration: none;
  padding: .625rem 1.25rem; font-size: .875rem; font-weight: 600; flex: none;
  border: 1px solid var(--jt-electric); border-radius: 999px;
  transition: background .15s, border-color .15s;
}
.jt-cta:hover { background: var(--jt-indigo); border-color: var(--jt-indigo); }
.jt-cta--fill { background: var(--jt-indigo); border-color: var(--jt-indigo); }
.jt-cta--fill:hover { background: var(--jt-electric); }
.jt-cta--lg { padding: .875rem 1.75rem; font-size: 1rem; }

/* ─── Морда ───────────────────────────────────────────────────────────────── */
.jt-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.jt-sect { padding: 4rem 0; }
.jt-sect__h { font-size: 1.875rem; margin: .875rem 0 1.75rem; }

.jt-hero { padding: 4.5rem 0 3.5rem; }
.jt-hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; }
.jt-hero h1 { font-size: clamp(2rem, 4.4vw, 3.125rem); line-height: 1.1; margin: 1rem 0; }
.jt-hero__lead { font-size: 1.0625rem; line-height: 1.7; color: var(--reading); margin-bottom: 2rem; }

/* Статы — grid, чтобы не ломались (урок welvura) */
.jt-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--jt-line); }
.jt-stat { padding: 1.125rem 1.25rem 1.125rem 0; border-right: 1px solid var(--jt-line); }
.jt-stat:last-child { border-right: 0; padding-right: 0; }
.jt-stat__v { font-family: var(--font-head); font-size: 1.375rem; color: var(--jt-text); line-height: 1.15; }
.jt-stat__k { font-size: .75rem; color: var(--muted); margin-top: .375rem; }

/* Оффер-панель — индиго-карточка с первоисточника */
.jt-offer { background: linear-gradient(150deg, var(--jt-indigo), #3a3db8 60%, #6d2f77);
  border-radius: var(--r-xl); padding: 1.875rem; color: var(--jt-text); }
.jt-offer__k { font-family: var(--font-head); font-size: 1.75rem; margin: .625rem 0 1.25rem; }
.jt-offer ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.jt-offer li { padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.16);
  font-size: .875rem; display: flex; justify-content: space-between; gap: 1rem; }
.jt-offer li span:first-child { color: rgba(232,234,255,.72); }
.jt-offer .jt-cta { display: block; text-align: center; border-color: rgba(255,255,255,.55); }
.jt-offer .jt-cta:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.jt-offer__note { font-size: .688rem; color: rgba(232,234,255,.6); margin-top: .75rem; text-align: center; }

.jt-grid { display: grid; gap: 1rem; }
.jt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.jt-grid--4 { grid-template-columns: repeat(4, 1fr); }
.jt-card { background: var(--jt-card); border: 1px solid var(--jt-line);
  border-radius: var(--r-lg); padding: 1.5rem; }
.jt-card__h { font-family: var(--font-head); font-size: 1rem; margin: 0 0 .625rem; color: var(--jt-text); }
.jt-card p { font-size: .875rem; color: var(--reading); margin: 0; line-height: 1.65; }

/* ─── YMYL (§3.7) ─────────────────────────────────────────────────────────── */
.jt-rg { border: 1px solid var(--jt-magenta); border-radius: var(--r-lg);
  padding: 1.75rem; background: var(--warn-tint); }
.jt-rg__h { font-family: var(--font-head); font-size: 1.125rem; margin: 0 0 .75rem; color: var(--jt-text); }
.jt-rg p { font-size: .875rem; color: var(--reading); margin: 0 0 .75rem; line-height: 1.65; }
.jt-rg__tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.jt-rg__tool { font-size: .75rem; padding: .375rem .75rem; border: 1px solid var(--jt-line);
  border-radius: 999px; background: var(--jt-deep); color: var(--jt-dim); }

/* ─── Футер ───────────────────────────────────────────────────────────────── */
.jt-foot { background: var(--dark-2); color: var(--jt-dim); padding: 3.5rem 0 1.5rem;
  border-top: 1px solid var(--jt-line); }
.jt-foot__cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; }
.jt-foot h4 { font-family: var(--font-body); font-size: .688rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--jt-ton); margin: 0 0 .875rem; }
.jt-foot a { color: var(--jt-dim); text-decoration: none; display: block; padding: .25rem 0; font-size: .8125rem; }
.jt-foot a:hover { color: var(--jt-text); }
.jt-foot__bottom { border-top: 1px solid var(--jt-line); margin-top: 2.5rem; padding-top: 1.25rem;
  font-size: .75rem; color: var(--dark-faint); }

/* ─── Внутренние (§3.6c) ──────────────────────────────────────────────────── */
.jt-page { background: var(--jt-void); }
.jt-post-hero { padding: 2.5rem 0 2.25rem; border-bottom: 1px solid var(--jt-line); }
.jt-bc { font-size: .75rem; color: var(--muted-2); margin-bottom: 1rem; }
.jt-bc a { color: var(--jt-ton); text-decoration: none; }
.jt-post-hero h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.15; margin: 0 0 1rem; }
.jt-post-hero__lead { font-size: 1rem; color: var(--reading); line-height: 1.7; max-width: 62ch; }
.jt-meta { display: flex; gap: 1.25rem; font-size: .75rem; color: var(--muted-2); margin-top: 1.25rem; }

.jt-doc { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 3rem; padding: 2.5rem 0 4rem; }
.jt-doc-side { position: sticky; top: 5rem; align-self: start; }
.jt-side-toc { background: var(--jt-card); border: 1px solid var(--jt-line);
  border-radius: var(--r-lg); padding: 1.25rem; }
.jt-side-toc h4 { font-family: var(--font-body); font-size: .688rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--jt-ton); margin: 0 0 .75rem; }
.jt-side-toc ol { list-style: none; counter-reset: t; padding: 0; margin: 0; }
.jt-side-toc li { counter-increment: t; }
.jt-side-toc a { display: flex; gap: .625rem; padding: .375rem 0; font-size: .8125rem;
  color: var(--reading); text-decoration: none; }
.jt-side-toc a::before { content: counter(t, decimal-leading-zero); color: var(--jt-ton);
  font-size: .688rem; padding-top: .125rem; font-variant-numeric: tabular-nums; }
.jt-side-toc a:hover { color: var(--jt-text); }

.jt-prose { font-size: 1rem; line-height: 1.8; color: var(--reading); max-width: 68ch; }
.jt-prose h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; padding-left: .875rem;
  border-left: 3px solid var(--jt-ton); }
.jt-prose h3 { font-size: 1.1875rem; margin: 1.75rem 0 .625rem; }
.jt-prose a { color: var(--jt-ton); text-decoration: underline; text-underline-offset: 2px; }
.jt-prose strong { color: var(--jt-text); }
.jt-prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .875rem; }
.jt-prose th { background: var(--jt-card); color: var(--jt-text); font-family: var(--font-body);
  font-weight: 600; text-align: left; padding: .75rem; }
.jt-prose td { border-bottom: 1px solid var(--jt-line); padding: .75rem; }

/* Inline .sfb-* блоки из .Content красит база → перекрашиваем (§3.6c) */
.jt-prose .sfb-cta { background: var(--jt-card); border: 1px solid var(--jt-line); border-radius: var(--r-lg); }
.jt-prose .sfb-cta a { background: var(--jt-indigo); color: #fff; text-decoration: none; border-radius: 999px; }
.jt-prose .sfb-faq details { border-bottom: 1px solid var(--jt-line); background: transparent; border-radius: 0; }
.jt-prose .sfb-faq summary { font-family: var(--font-head); color: var(--jt-text); }
.jt-prose .sfb-slot { border: 1px solid var(--jt-line); background: var(--jt-card); border-radius: var(--r-md); }
.jt-prose .sfb-rg { border-color: var(--jt-magenta); background: var(--warn-tint); }

/* ─── Мобильные ───────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .jt-nav { display: none; }
  .jt-hero__grid, .jt-doc { grid-template-columns: 1fr; gap: 2rem; }
  .jt-doc-side { position: static; }
  .jt-grid--3, .jt-grid--4 { grid-template-columns: 1fr; }
  .jt-foot__cols { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .jt-stats { grid-template-columns: 1fr 1fr; }
  .jt-stat { padding-right: 1rem; }
  .jt-stat:nth-child(2n) { border-right: 0; padding-right: 0; }
  .jt-stat:nth-child(-n+2) { border-bottom: 1px solid var(--jt-line); }
  .jt-bloom::before { width: 24rem; height: 24rem; }
}

:focus-visible { outline: 2px solid var(--jt-ton); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }