/* dudespinde.org — редизайн, превью /de/ (ревизия 2: казино-регистр, палитра без розового)
 * Ни строки текста не меняется: весь сдвиг сделан стилями поверх существующей разметки.
 * Направление и обоснования — DESIGN.md.
 *
 * Палитра монохромная: единственный хроматический тон 157° (сукно игрового стола).
 * Розовый узел снят — 327-338° занято другими сайтами сети,
 * золото 41-75° занято другим сайтом сети. Второй хроматический тон не вводится вовсе.
 * Гарнитуры: слэб для display + гротеск для body — в корпусе у обоих доменов
 * антиква+гротеск (Faustina/Saira Condensed, Prata/Manrope).
 */

/* ─── 1. Гарнитуры (self-hosted, OFL) ─────────────────────────────── */
@font-face{
  font-family:'ZS Display'; src:url('/fonts/ZillaSlab-500-latin.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'ZS Display'; src:url('/fonts/ZillaSlab-700-latin.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'FS Text'; src:url('/fonts/FiraSans-400-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'FS Text'; src:url('/fonts/FiraSans-500-latin.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'FS Text'; src:url('/fonts/FiraSans-700-latin.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ─── 2. Токены ───────────────────────────────────────────────────── */
:root{
  /* Земля средней светлоты — сукно стола, а не почти-чёрное «казино» */
  --ground:    #28322d;
  --ground-up: #313c36;
  --ground-bd: #39443e;
  --ground-dn: #202823;
  --ink:       #eef2ec;
  --ink-2:     #b2beb6;
  --ink-3:     #86948b;
  --rule:      rgba(238,242,236,.155);
  --rule-soft: rgba(238,242,236,.075);

  --accent:      #2fbe86;              /* h 157° — единственный хроматический тон */
  --accent-lift: #46d69c;
  --accent-deep: #1b8a61;
  --accent-dim:  rgba(47,190,134,.15);
  --on-accent:   #0b1a13;

  --display:'ZS Display','Roboto Slab',Rockwell,'Bookman Old Style',Georgia,serif;
  --body:'FS Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Шкала major third 1.250 от 17px */
  --t-xs:11px; --t-sm:13.6px; --t-base:17px; --t-md:21.25px;
  --t-lg:26.6px; --t-xl:33.2px;

  --r-in:3px; --r-mid:8px; --r-out:16px;

  --rail:264px;
  --shell:1340px;
  --pad:clamp(16px,3.4vw,44px);
  --heropad:clamp(72px,10vh,116px);
  --overhang:clamp(48px,6vh,84px);
}

/* ─── 3. База ─────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; scroll-behavior:smooth; }
body{
  margin:0;
  background-color:var(--ground);
  background-image:
    radial-gradient(128% 78% at 88% -12%, rgba(47,190,134,.13), transparent 58%),
    radial-gradient(88% 60% at 6% 102%, rgba(27,138,97,.10), transparent 60%);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-base);
  line-height:1.66;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,picture{ max-width:100%; }
a{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent-lift); outline-offset:3px; border-radius:2px; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:700; margin:0; }
p{ margin:0 0 1.05em; max-width:64ch; color:var(--ink-2); text-wrap:pretty; }
p strong,p b{ color:var(--ink); font-weight:500; }
ol,ul{ max-width:64ch; color:var(--ink-2); }
li{ margin-bottom:.4em; }
table{ font-variant-numeric:tabular-nums; }

/* ─── 4. Шапка ────────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:120;
  background:rgba(40,50,45,.84);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--rule-soft);
}
.header-inner{
  max-width:var(--shell); margin:0 auto; padding:0 var(--pad);
  height:88px; display:flex; align-items:center; gap:20px;
}
.logo-link{ display:flex; align-items:center; flex-shrink:0; text-decoration:none; }
.logo-link img{ display:block; height:72px; width:auto; max-height:none; }
.nav-cats{ display:flex; gap:6px; align-items:center; flex:1; min-width:0; }
.nav-cat{
  font-family:var(--body); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  padding:8px 4px; text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:color .22s ease, border-color .22s ease;
}
.nav-cat:hover,.nav-cat:focus-visible{ color:var(--ink); border-bottom-color:var(--accent); }
.header-btns{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* ─── 5. Кнопки: фишка, а не плоский прямоугольник ────────────────── */
.btn,.btn-login,.btn-register,.btn-cta,.btn-optin{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; white-space:nowrap; font-family:var(--body);
  transition:background .2s ease, color .2s ease, border-color .2s ease,
             box-shadow .2s ease, transform .1s ease;
}
.btn-register,.btn-primary,.btn-cta,.btn-optin{
  background:linear-gradient(180deg,var(--accent-lift),var(--accent));
  color:var(--on-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             inset 0 -2px 0 var(--accent-deep),
             0 6px 18px -8px rgba(11,26,19,.9);
}
.btn-register:hover,.btn-primary:hover,.btn-cta:hover,.btn-optin:hover{
  background:linear-gradient(180deg,#5ce4ac,var(--accent-lift));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.44),
             inset 0 -2px 0 var(--accent-deep),
             0 10px 26px -8px rgba(47,190,134,.5);
}
.btn-register:active,.btn-primary:active,.btn-cta:active,.btn-optin:active{
  transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 var(--accent-deep);
}
.btn-login{
  font-size:var(--t-sm); font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 18px; border-radius:var(--r-mid);
  border:1px solid var(--rule); color:var(--ink-2); background:transparent;
}
.btn-login:hover{ color:var(--ink); border-color:var(--accent); }
.btn-register{
  font-size:var(--t-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:11px 22px; border-radius:var(--r-mid);
}
.btn-primary{
  font-family:var(--display); font-size:var(--t-md); font-weight:700;
  letter-spacing:.01em; padding:16px 38px; border-radius:var(--r-mid);
}
.btn-optin{
  font-size:var(--t-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  width:100%; padding:12px 0; border-radius:var(--r-in);
}
.arr-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--r-in);
  border:1px solid var(--rule); color:var(--ink-3); text-decoration:none;
  font-size:var(--t-sm); transition:border-color .22s, color .22s, background .22s;
}
.arr-btn:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }

/* ─── 6. Герой: асимметричный сплит 62/38, сукно и свет над столом ── */
.hero{
  position:relative; z-index:3;
  overflow:visible;
  min-height:clamp(520px,74vh,720px);
  display:flex; align-items:center;
}
.hero-bg-fallback{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(146deg,#222c27 0%,#1a231e 54%,#27332e 100%);
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:url('/img/banner.png') no-repeat center center;
  background:image-set(
      url('/img/banner.avif') type('image/avif'),
      url('/img/banner.webp') type('image/webp'),
      url('/img/banner.png')  type('image/png')) no-repeat center center;
  background-size:cover;
  /* дуотон: серая база → сепия → поворот в сукно. Чужой сток втягивается в палитру. */
  filter:grayscale(1) brightness(.5) contrast(1.1) sepia(.62) hue-rotate(102deg) saturate(2.3);
}
.hero-grad{
  position:absolute; inset:0; z-index:1;
  background:
    /* фактура сукна — две диагонали под 1px, почти на пороге видимости */
    repeating-linear-gradient(45deg, rgba(238,242,236,.022) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(11,26,19,.05) 0 1px, transparent 1px 5px),
    linear-gradient(96deg,
      var(--ground) 22%, rgba(40,50,45,.87) 46%,
      rgba(40,50,45,.36) 78%, rgba(40,50,45,.10) 100%);
}
.hero-img-zone{
  position:absolute; right:0; top:0; bottom:0; width:52%; z-index:1;
  display:flex; align-items:flex-end; justify-content:flex-end;
}
/* свет лампы над игровым столом + виньетка по краям зала */
.hero-img-placeholder{
  width:100%; height:100%;
  background:
    radial-gradient(46% 40% at 68% 26%, rgba(70,214,156,.26), transparent 70%),
    radial-gradient(78% 66% at 74% 44%, rgba(238,242,236,.075), transparent 72%),
    radial-gradient(120% 100% at 100% 100%, rgba(11,26,19,.55), transparent 62%);
}
.hero-content{
  position:relative; z-index:2;
  width:100%; max-width:var(--shell); margin:0 auto;
  padding:var(--heropad) var(--pad);
  display:grid;
  grid-template-columns:minmax(0,62fr) minmax(250px,38fr);
  column-gap:clamp(28px,4.4vw,80px);
  align-items:start;
}
.hero-eyebrow{
  grid-column:1; grid-row:1;
  font-family:var(--body); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.3em; text-transform:uppercase; color:var(--accent);
  margin-bottom:22px;
}
h1.hero-title{
  grid-column:1; grid-row:2;
  font-family:var(--display); font-weight:700;
  font-size:clamp(40px,6.5vw,96px);
  line-height:.99; letter-spacing:-.024em;
  max-width:17ch; text-wrap:balance;
  margin-bottom:36px;
}
h1.hero-title em{ font-style:normal; color:var(--accent); }
.hero-content .btn{ grid-column:1; grid-row:3; justify-self:start; }

/* ПОДПИСЬ МАКЕТА — «чек», который ломает собственный контейнер:
   рейл фактов выходит за нижнюю кромку героя и наезжает на секцию ниже. */
.hero-badges{
  grid-column:2; grid-row:1 / span 3;
  display:flex; flex-direction:column; gap:0;
  background:linear-gradient(180deg,var(--ground-up),#2a342f);
  border:1px solid var(--rule-soft); border-top:3px solid var(--accent);
  border-radius:var(--r-in) var(--r-in) var(--r-out) var(--r-out);
  padding:2px 24px clamp(20px,3vh,40px);
  align-self:stretch;
  justify-content:space-between;
  margin-bottom:calc(-1 * (var(--heropad) + var(--overhang)));
  box-shadow:0 34px 68px -26px rgba(8,14,11,.92);
}
.hero-badges .badge{
  display:block; padding:15px 0;
  border-bottom:1px solid var(--rule-soft); border-radius:0; background:none;
  font-family:var(--display); font-weight:500; font-size:var(--t-md);
  line-height:1.2; color:var(--ink); letter-spacing:-.005em;
}
.hero-badges .badge:last-child{ border-bottom:0; }
.hero-badges .badge.hot{ color:var(--accent); font-weight:700; }
.hero-badges .badge.blue,
.hero-badges .badge.grn{ color:var(--ink-2); }

/* ─── 7. Оболочка и ритм секций ───────────────────────────────────── */
.wrap{
  max-width:var(--shell); margin:0 auto;
  padding:calc(var(--overhang) * 2) var(--pad) 0;
}
.sec{ position:relative; margin:0 0 clamp(56px,7vh,104px); padding:clamp(28px,4vh,52px) 0; }
.sec:nth-of-type(even)::before{
  content:''; position:absolute; z-index:-1;
  inset:0 calc(50% - 50vw);
  background:var(--ground-bd);
  border-block:1px solid var(--rule-soft);
}
.sec:nth-of-type(even){ padding:clamp(40px,5.5vh,72px) 0; }

.sec-head{ margin-bottom:26px; }
h2.sec-title{
  font-size:clamp(28px,3.5vw,52px); line-height:1.04; letter-spacing:-.02em;
  padding:14px 0 0; border-top:2px solid var(--accent);
  text-wrap:balance;
}
h2{ font-size:clamp(28px,3.5vw,52px); line-height:1.06; letter-spacing:-.02em; }
h3{
  font-family:var(--body); font-weight:700; font-size:var(--t-sm);
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  margin:2.2em 0 .8em;
}
h4{ font-size:var(--t-md); font-weight:500; color:var(--ink); margin:1.4em 0 .5em; }

/* Боковой рельс: заголовок секции уезжает влево и залипает */
@media (min-width:1040px){
  .sec{
    display:grid;
    grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:clamp(36px,4.2vw,72px);
    align-items:start;
  }
  .sec > .sec-head{ grid-column:1; position:sticky; top:120px; margin-bottom:0; }
  .sec > *:not(.sec-head){ grid-column:2; }
  h2.sec-title{ font-size:clamp(26px,2.1vw,34px); }
}

/* ─── 8. Витрина игр: двухъярусная полка ──────────────────────────── */
.game-section,.spin-rally-wrap{
  background:transparent; border:0; border-top:1px solid var(--rule);
  border-radius:0; padding:24px 0 8px; margin-bottom:clamp(28px,4vh,52px);
}
.game-section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:18px;
}
.sec-title-inline{
  font-family:var(--display); font-weight:700; font-size:var(--t-lg);
  letter-spacing:-.018em; color:var(--ink);
  display:inline-flex; align-items:baseline; gap:12px;
}
.badge-cnt{
  font-family:var(--body); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-dim);
  padding:3px 8px; border-radius:2px;
}
.see-all-link{
  font-family:var(--body); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:color .22s;
}
.see-all-link:hover{ color:var(--accent); }
.see-all-cnt{ color:var(--ink-3); }

/* два яруса + горизонтальная прокрутка = плотность лобби, а не ровная сетка */
.games-grid{
  display:grid;
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:clamp(140px,13.2vw,190px);
  gap:8px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-bottom:14px;
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
}
.games-grid::-webkit-scrollbar{ height:4px; }
.games-grid::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:2px; }
.game-card{
  position:relative; display:block; scroll-snap-align:start;
  border:0; border-radius:var(--r-in); overflow:hidden;
  background:var(--ground-up); aspect-ratio:3/4; text-decoration:none;
  box-shadow:0 2px 8px -4px rgba(8,14,11,.8);
  transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s ease, filter .26s ease;
}
.game-card:hover{
  transform:translateY(-6px);
  filter:saturate(1.16) brightness(1.05);
  box-shadow:0 0 0 1px var(--accent), 0 14px 30px -12px rgba(8,14,11,.95);
}
.game-card img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.game-card-ov{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(16,22,19,0) 42%,rgba(12,18,15,.94) 100%);
}
.game-card-new{
  position:absolute; top:6px; left:6px;
  font-family:var(--body); font-size:9px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-accent); background:var(--accent); padding:2px 6px; border-radius:2px;
}
.game-card-name{
  position:absolute; left:8px; right:8px; bottom:7px;
  font-family:var(--body); font-weight:500; font-size:12px;
  line-height:1.16; color:#fff;
}
.game-card-jp{
  position:absolute; right:6px; bottom:7px;
  font-family:var(--display); font-size:10px; font-weight:700;
  color:var(--accent); background:rgba(10,16,13,.82);
  padding:2px 5px; border-radius:2px;
}

/* ─── 9. Spin Rally ───────────────────────────────────────────────── */
.rally-sub{ font-size:var(--t-sm); color:var(--ink-3); margin:4px 0 20px; max-width:64ch; }
.rally-sub b{ color:var(--accent); font-weight:500; }
.rally-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:0; border-top:1px solid var(--rule); }
.rally-card{
  background:transparent; border:0; border-right:1px solid var(--rule-soft);
  border-radius:0; padding:18px 16px 20px;
  display:flex; flex-direction:column; gap:12px;
  transition:background .22s ease;
}
.rally-card:last-child{ border-right:0; }
.rally-card:hover{ background:var(--rule-soft); }
.rally-card.active{ background:var(--accent-dim); box-shadow:inset 0 2px 0 var(--accent); }
.rally-top{ display:flex; align-items:flex-start; gap:12px; }
.rally-thumb{ width:48px; height:48px; flex-shrink:0; border-radius:var(--r-in); overflow:hidden; }
.rally-thumb picture,.rally-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.rally-info{ flex:1; min-width:0; }
.rally-badge-a,.rally-badge-n{
  display:inline-block; margin-bottom:5px; padding:0;
  background:none; border-radius:0;
  font-family:var(--body); font-size:9.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
}
.rally-badge-a{ color:var(--accent); }
.rally-badge-n{ color:var(--ink-3); }
.rally-name{ font-family:var(--display); font-weight:700; font-size:var(--t-base); line-height:1.18; color:var(--ink); }
.rally-meta{ font-size:var(--t-sm); color:var(--ink-3); display:flex; flex-direction:column; gap:3px; }
.rally-meta b{ color:var(--ink); font-weight:500; }
.rally-timer{
  font-family:var(--display); font-weight:700; font-size:var(--t-lg);
  color:var(--accent); background:none; padding:0;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}

/* ─── 10. Быстрые факты: типографика вместо карточки ──────────────── */
.qf-wrap{
  background:transparent; border:0; border-radius:0; overflow:visible;
  margin:clamp(44px,6vh,84px) 0;
  border-top:2px solid var(--accent);
}
.qf-head{
  background:none; border:0; padding:14px 0 6px;
  font-family:var(--body); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3);
}
.qf-table{ width:100%; border-collapse:collapse; }
.qf-table td{
  padding:14px 0; border-bottom:1px solid var(--rule-soft);
  font-size:var(--t-base); vertical-align:baseline;
}
.qf-table tr:nth-child(even) td{ background:none; }
.qf-table td:first-child{
  width:38%; color:var(--ink-3); font-family:var(--body);
  font-size:var(--t-sm); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; padding-right:24px;
}
.qf-table td:last-child{ color:var(--ink); font-weight:400; }
.qf-table tr:last-child td{ border-bottom:0; }
.to,.tg{ color:var(--accent); font-weight:500; }
.tc{ color:var(--ink); }

/* ─── 11. Числа как носитель: масштаб и материал, а не второй цвет ── */
.bonus-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0; margin:26px 0; border-top:1px solid var(--rule); }
.bonus-card{
  background:transparent; border:0; border-right:1px solid var(--rule-soft);
  border-radius:0; padding:26px 24px 30px 0; position:relative;
}
.bonus-card:last-child{ border-right:0; }
.bonus-amt{
  font-family:var(--display); font-weight:700;
  font-size:clamp(58px,7.2vw,104px); line-height:.88; letter-spacing:-.04em;
  color:var(--ink); font-variant-numeric:tabular-nums;
  text-shadow:0 2px 0 rgba(8,14,11,.35);
}
.bonus-card.cryp .bonus-amt,.bonus-card.sprt .bonus-amt{ color:var(--accent); }
.bonus-lbl{
  font-family:var(--body); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  margin:16px 0 18px;
}
.bonus-det{ font-size:var(--t-sm); color:var(--ink-2); border-top:1px solid var(--rule-soft); padding-top:14px; }
.bonus-det span{ display:block; margin-bottom:6px; padding-left:18px; position:relative; }
.bonus-det span::before{ content:'—'; position:absolute; left:0; color:var(--accent); }

.cb-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0; margin:26px 0; border-top:1px solid var(--rule); }
.cb-card{ background:transparent; border:0; border-right:1px solid var(--rule-soft); border-radius:0; padding:24px 22px 26px 0; }
.cb-card:last-child{ border-right:0; }
.cb-pct{
  font-family:var(--display); font-weight:700; font-size:clamp(52px,6.2vw,92px);
  line-height:.88; letter-spacing:-.04em; color:var(--ink);
  font-variant-numeric:tabular-nums; text-shadow:0 2px 0 rgba(8,14,11,.35);
}
.cb-name{ font-family:var(--body); font-size:var(--t-xs); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:14px 0 16px; }
.cb-row{ font-size:var(--t-sm); color:var(--ink-3); margin-bottom:4px; }
.cb-row strong{ color:var(--ink); font-weight:500; }

/* VIP: пять уровней — последовательность, поэтому лестница несёт смысл */
.vip-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  margin:24px 0; border-top:1px solid var(--rule); align-items:stretch;
}
.vip-card{
  background:transparent; border:0; border-right:1px solid var(--rule-soft);
  border-radius:0; text-align:left;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:18px 16px 22px 0;
}
.vip-card:last-child{ border-right:0; }
.vip-grid .vip-card:nth-child(1){ padding-top:18px; }
.vip-grid .vip-card:nth-child(2){ padding-top:36px; }
.vip-grid .vip-card:nth-child(3){ padding-top:54px; }
.vip-grid .vip-card:nth-child(4){ padding-top:72px; }
.vip-grid .vip-card:nth-child(5){ padding-top:90px; }
.vip-level{
  font-family:var(--display); font-weight:700; font-size:var(--t-xl);
  line-height:.95; letter-spacing:-.028em; color:var(--ink-3); margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.vip-grid .vip-card:nth-child(4) .vip-level{ color:var(--ink); }
.vip-grid .vip-card:nth-child(5) .vip-level{ color:var(--accent); }
.vip-stat{ font-family:var(--body); font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-top:10px; }
.vip-val{ font-size:var(--t-sm); font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ─── 12. Таблицы и сетки-перечни ─────────────────────────────────── */
.info-table{
  width:100%; border-collapse:collapse; background:transparent;
  border:0; border-top:1px solid var(--rule); border-radius:0;
  margin:22px 0; font-size:var(--t-base);
}
.info-table th{
  background:none; border:0; border-bottom:2px solid var(--rule);
  padding:10px 16px 10px 0; text-align:left;
  font-family:var(--body); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.info-table td{ padding:12px 16px 12px 0; border-bottom:1px solid var(--rule-soft); color:var(--ink); }
.info-table tr:nth-child(even) td{ background:none; }
.info-table tr:last-child td{ border-bottom:0; }
.info-table td:first-child{ color:var(--ink-2); font-weight:400; }

.prov-grid,.pay-grid,.lang-flags-grid,.doc-grid,.shop-grid{
  display:grid; gap:0; margin:20px 0; border-top:1px solid var(--rule);
}
.prov-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.pay-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.lang-flags-grid{ grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); }
.doc-grid{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.shop-grid{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }

.prov-item,.pay-item,.lang-flag-item,.doc-item,.shop-item{
  background:transparent; border:0;
  border-right:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft);
  border-radius:0; padding:14px 18px 16px 0; text-align:left;
}
.prov-item{ font-family:var(--body); font-size:var(--t-sm); font-weight:500; color:var(--ink-2); transition:color .22s; }
.prov-item:hover{ color:var(--accent); }
.prov-cnt{ display:block; font-size:var(--t-xs); font-weight:400; color:var(--ink-3); margin-top:3px; letter-spacing:.1em; }
.pay-item{ font-family:var(--body); font-size:var(--t-sm); font-weight:500; color:var(--ink); }
.pay-item small{ display:block; color:var(--ink-3); margin-top:3px; font-size:var(--t-xs); letter-spacing:.09em; }
.lang-flag-item{ display:flex; align-items:center; gap:10px; font-size:var(--t-sm); color:var(--ink-3); }
.lang-flag-item span{ font-size:var(--t-md); filter:saturate(.72); }
.lang-flag-item b{ color:var(--ink); font-weight:500; }
.doc-icon{ font-size:var(--t-md); margin-bottom:8px; filter:saturate(.7); }
.doc-title{ font-family:var(--display); font-weight:700; font-size:var(--t-md); color:var(--ink); margin-bottom:5px; letter-spacing:-.012em; }
.doc-desc{ font-size:var(--t-sm); color:var(--ink-3); }
.shop-nm{ font-size:var(--t-sm); font-weight:500; color:var(--ink-2); margin-bottom:8px; }
.shop-c{ font-family:var(--display); font-weight:700; font-size:var(--t-xl); color:var(--accent); line-height:.95; letter-spacing:-.028em; font-variant-numeric:tabular-nums; }
.shop-u{ font-size:var(--t-xs); color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase; }

/* ─── 13. Врезки: линия вместо плашки ─────────────────────────────── */
.hl,.hl-blue,.info-card{
  background:transparent; border:0; border-left:2px solid var(--accent);
  border-radius:0; padding:6px 0 6px 26px; margin:26px 0;
}
.hl p,.hl-blue p,.info-card p{ margin:0; font-size:var(--t-base); color:var(--ink); }
.hl-blue{ border-left-color:var(--ink-3); }
.hl-blue p{ color:var(--ink-2); }
.info-card-title{
  font-family:var(--body); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:12px;
}
.author-byline{ font-size:var(--t-sm); color:var(--ink-3); border-left:2px solid var(--rule); padding-left:20px; margin:20px 0; }

/* ─── 14. Финальный призыв — асимметричный, не по центру ──────────── */
.cta-sec{
  background:
    radial-gradient(70% 120% at 82% 0%, rgba(47,190,134,.14), transparent 62%),
    linear-gradient(140deg,var(--ground-up) 0%,var(--ground-dn) 74%);
  border:1px solid var(--rule-soft); border-radius:var(--r-out);
  padding:clamp(36px,5vw,64px);
  margin:clamp(64px,8vh,120px) 0 clamp(56px,7vh,96px);
  text-align:left;
  display:grid; grid-template-columns:minmax(0,1fr); gap:26px; align-items:end;
}
.cta-title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px,4vw,58px); line-height:1.02; letter-spacing:-.026em;
  margin:0; max-width:19ch; text-wrap:balance;
}
.cta-title em{ font-style:normal; color:var(--accent); }
.cta-sub{ color:var(--ink-2); margin:14px 0 0; max-width:52ch; }
.btn-cta{
  justify-self:start;
  font-family:var(--display); font-weight:700; font-size:var(--t-lg);
  letter-spacing:.005em; padding:18px 46px; border-radius:var(--r-mid);
  text-decoration:none;
}
.cta-note{ font-size:var(--t-xs); color:var(--ink-3); margin:0; letter-spacing:.06em; }
@media (min-width:900px){
  .cta-sec{ grid-template-columns:minmax(0,1fr) auto; }
  .cta-title{ grid-column:1; grid-row:1; }
  .cta-sub{ grid-column:1; grid-row:2; }
  .btn-cta{ grid-column:2; grid-row:1 / span 2; align-self:center; }
  .cta-note{ grid-column:1 / -1; grid-row:3; }
}

/* ─── 15. Подвал ──────────────────────────────────────────────────── */
.site-footer{
  background:var(--ground-dn); border-top:1px solid var(--rule-soft);
  padding:clamp(48px,6vh,80px) var(--pad) 28px; margin-top:clamp(40px,6vh,80px);
}
.footer-inner{ max-width:var(--shell); margin:0 auto; }
.footer-top{
  display:grid; grid-template-columns:minmax(240px,1.6fr) repeat(auto-fit,minmax(150px,1fr));
  gap:36px; padding-bottom:32px; border-bottom:1px solid var(--rule-soft); margin-bottom:28px;
}
.footer-brand img{ display:block; height:96px; width:auto; max-height:none; }
.footer-tagline{ font-size:var(--t-sm); color:var(--ink-3); max-width:34ch; margin-top:16px; }
.footer-col-title{
  font-family:var(--body); font-size:10px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px;
}
.footer-col a{ display:block; font-size:var(--t-sm); color:var(--ink-2); text-decoration:none; margin-bottom:9px; transition:color .22s; }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{ text-align:left; }
.disclaimer{ font-size:var(--t-sm); color:var(--ink-3); line-height:1.72; max-width:88ch; margin:0 0 18px; }
.lang-bar{ display:flex; align-items:center; gap:10px; padding:16px 0 0; flex-wrap:wrap; }
.lang-lbl{ font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.22em; }
.lang-btn{
  background:transparent; border:1px solid var(--rule); border-radius:var(--r-in);
  padding:7px 16px; font-family:var(--body); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  text-decoration:none; transition:border-color .22s, color .22s;
}
.lang-btn:hover,.lang-btn.active{ border-color:var(--accent); color:var(--accent); }

/* ─── 16. Движение: по одному раскрытию на секцию ─────────────────── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .sec,.game-section,.spin-rally-wrap,.qf-wrap,.cta-sec{
      animation:rd-rise linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 20%;
    }
    @keyframes rd-rise{
      from{ opacity:0; transform:translateY(24px); }
      to{ opacity:1; transform:none; }
    }
  }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ─── 17. Узкие экраны ────────────────────────────────────────────── */
@media (max-width:1039px){
  .rally-grid{ grid-template-columns:repeat(3,1fr); }
  .rally-card:nth-child(3n){ border-right:0; }
  .vip-grid{ grid-template-columns:repeat(3,1fr); }
  .vip-grid .vip-card:nth-child(n){ padding-top:20px; }
  .vip-card:nth-child(3n){ border-right:0; }
}
@media (max-width:900px){
  .nav-cats{ display:none; }
  .hero{ min-height:auto; }
  .hero-content{ grid-template-columns:minmax(0,1fr); row-gap:0; padding-block:clamp(52px,8vh,84px) clamp(40px,6vh,72px); }
  .hero-eyebrow,.hero-title,.hero-content .btn,.hero-badges{ grid-column:1; }
  .hero-eyebrow{ grid-row:1; }
  .hero-title{ grid-row:2; max-width:none; }
  .hero-badges{ grid-row:3; align-self:auto; justify-content:flex-start; margin:0 0 30px; padding:2px 20px 16px; }
  .hero-content .btn{ grid-row:4; }
  .hero-img-zone{ width:100%; opacity:.5; }
  .footer-top{ grid-template-columns:minmax(0,1fr); gap:26px; }
}
@media (max-width:640px){
  .bonus-grid,.cb-grid{ grid-template-columns:minmax(0,1fr); }
  .bonus-card,.cb-card{ border-right:0; border-bottom:1px solid var(--rule-soft); padding-right:0; }
  .rally-grid,.vip-grid{ grid-template-columns:repeat(2,1fr); }
  .rally-card:nth-child(2n),.vip-card:nth-child(2n){ border-right:0; }
  .info-table{ font-size:var(--t-sm); }
  .qf-table td:first-child{ width:46%; }
}
@media (max-width:520px){
  .header-inner{ height:76px; gap:12px; }
  .logo-link img{ height:60px; }
  .footer-brand img{ height:76px; }
}
@media (max-width:480px){
  .header-btns .btn-login{ display:none; }
}

/* Правка владельца 23.08: карточка фактов растягивалась на всю высоту колонки
   с заголовком (align-self:stretch + space-between), и шесть пунктов
   расползались с шагом 129px при собственной высоте 57px. Делаем список
   компактным по содержимому; свисание ниже героя снимаем вместе с растяжкой,
   иначе отрицательный margin тянет пустую карточку. */
.hero-badges{
  align-self:start;
  justify-content:flex-start;
  margin-bottom:0;
  padding-bottom:6px;
}


/* ---------- иконки: подрезанный Font Awesome вместо cdnjs (правка 23.08.2026) ----------
   На /bewertungen/ 51 иконка тянулась с внешнего хоста (all.min.css). Стало:
   9 глифов solid (1.8 КБ) + 2 regular (700 Б), самохостинг. Разметка не менялась. */
@font-face{
  font-family:'FA6Solid';
  src:url('/fonts/fa-solid-sub.woff2') format('woff2');
  font-weight:900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'FA6Regular';
  src:url('/fonts/fa-regular-sub.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
.fa-solid{
  font-family:'FA6Solid';font-weight:900;font-style:normal;
  display:inline-block;line-height:1;text-rendering:auto;
  -webkit-font-smoothing:antialiased;
}
.fa-regular{
  font-family:'FA6Regular';font-weight:400;font-style:normal;
  display:inline-block;line-height:1;text-rendering:auto;
  -webkit-font-smoothing:antialiased;
}
.fa-solid::before,.fa-regular::before{content:var(--fa)}
.fa-calendar{--fa:"\f133"}
.fa-dice{--fa:"\f522"}
.fa-gift{--fa:"\f06b"}
.fa-graduation-cap{--fa:"\f19d"}
.fa-headset{--fa:"\f590"}
.fa-id-card{--fa:"\f2c2"}
.fa-location-dot{--fa:"\f3c5"}
.fa-money-bill-transfer{--fa:"\e528"}
.fa-star{--fa:"\f005"}
.fa-user-plus{--fa:"\f234"}