/* =========================================================
   Eva Casino — основная таблица стилей
   Порядок: токены → база → утилиты → компоненты → секции → адаптив
   ========================================================= */

/* ---------- 1. Токены ---------- */
:root{
  /* фон и поверхности */
  --bg:            #0B0F1A;
  --surface:       #111827;
  --surface-2:     #172033;
  --surface-3:     #1E2A42;
  --border:        #26324A;
  --border-soft:   rgba(255,255,255,.07);

  /* текст */
  --text:          #F5F7FB;
  --text-2:        #A8B3C7;
  --text-3:        #6E7C95;

  /* акценты */
  --gold:          #D4AF37;
  --gold-soft:     #F0C960;
  --violet:        #7C3AED;
  --violet-2:      #9F67FF;
  --cyan:          #22D3EE;
  --green:         #22C55E;
  --red:           #EF4444;
  --pink:          #EC4899;

  --grad-primary:  linear-gradient(135deg,#7C3AED 0%,#22D3EE 100%);
  --grad-premium:  linear-gradient(135deg,#D4AF37 0%,#F59E0B 50%,#7C3AED 100%);
  --grad-gold:     linear-gradient(135deg,#F0C960 0%,#D4AF37 55%,#A87F1E 100%);

  /* геометрия */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow:     0 2px 8px rgba(0,0,0,.35);
  --shadow-lg:  0 18px 48px -20px rgba(0,0,0,.8);
  --glow-violet:0 0 34px -8px rgba(124,58,237,.65);
  --glow-gold:  0 0 30px -8px rgba(212,175,55,.55);

  --container: 1240px;
  --header-h: 68px;

  --font: 'Manrope', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 2. База ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* мягкое сияние на фоне страницы */
body::before{
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(124,58,237,.20), transparent 62%),
    radial-gradient(760px 460px at 92% 4%,  rgba(34,211,238,.12), transparent 60%);
  pointer-events:none; z-index:0;
}
body > *{ position:relative; z-index:1; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.2; font-weight:800; letter-spacing:-.02em; text-wrap:balance; }
h1{ font-size:clamp(28px,4.4vw,46px); }
h2{ font-size:clamp(23px,3vw,34px); }
h3{ font-size:clamp(18px,2vw,21px); }
p{ margin:0 0 1em; }
ul,ol{ margin:0 0 1.2em; padding-left:1.3em; }
li{ margin-bottom:.4em; }

::selection{ background:var(--violet); color:#fff; }

/* Заголовок только для скринридеров и поисковых систем */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--violet); color:#fff; padding:10px 16px; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

/* ---------- 3. Утилиты ---------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 20px; }

.section{ padding:56px 0; }
.section--tight{ padding:34px 0; }
.section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.section__title{ margin:0; }
.section__title--gold{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section__sub{ color:var(--text-2); margin:6px 0 0; max-width:70ch; }
.section__link{ color:var(--cyan); font-weight:600; font-size:15px; white-space:nowrap; }
.section__link:hover{ text-decoration:underline; }

.prose{ max-width:78ch; }
.prose h2{ margin-top:1.6em; }
.prose h3{ margin-top:1.4em; font-size:19px; }
.prose p, .prose li{ color:var(--text-2); }
.prose strong{ color:var(--text); }
.prose a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.prose ul li::marker{ color:var(--gold); }

.hide-sm{ display:inline-flex; }

/* ---------- 4. Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px;
  border:1px solid transparent; border-radius:var(--r);
  font-weight:700; font-size:15px; line-height:1;
  cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primary{ background:var(--grad-primary); color:#fff; box-shadow:var(--glow-violet); }
.btn--primary:hover{ box-shadow:0 0 42px -6px rgba(124,58,237,.85); }

.btn--gold{ background:var(--grad-gold); color:#1A1204; box-shadow:var(--glow-gold); }
.btn--gold:hover{ box-shadow:0 0 40px -6px rgba(212,175,55,.8); }

.btn--ghost{ background:rgba(255,255,255,.05); border-color:var(--border); color:var(--text); }
.btn--ghost:hover{ background:rgba(255,255,255,.1); border-color:var(--violet-2); }

.btn--sm{ padding:10px 18px; font-size:14px; border-radius:10px; }
.btn--lg{ padding:16px 34px; font-size:16.5px; }
.btn--block{ display:flex; width:100%; }

/* ---------- 5. Топбар ---------- */
.topbar{ background:#070A12; border-bottom:1px solid var(--border-soft); font-size:13px; }
.topbar__inner{ display:flex; align-items:center; gap:12px; height:36px; color:var(--text-3); }
.topbar__age{
  flex:none; font-weight:800; font-size:11px; letter-spacing:.03em;
  color:var(--gold); border:1px solid rgba(212,175,55,.45);
  border-radius:999px; padding:2px 8px;
}
.topbar__text{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar__link{ flex:none; color:var(--cyan); font-weight:600; }
.topbar__link:hover{ text-decoration:underline; }

/* ---------- 6. Шапка ---------- */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(11,15,26,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.header__inner{ display:flex; align-items:center; gap:20px; height:var(--header-h); }

.logo{ flex:none; }
/* логотип в исходнике тёмный — осветляем фильтром.
   Если добавишь светлую версию логотипа, просто убери filter. */
.logo img,
.drawer__logo,
.footer__logo{ height:34px; width:auto; filter:invert(1) hue-rotate(178deg) saturate(1.25) brightness(1.05); }
.footer__logo{ height:40px; }
.drawer__logo{ height:30px; }

.nav{ flex:1; min-width:0; }
.nav__list{ display:flex; gap:4px; margin:0; padding:0; list-style:none; }
.nav__list li{ margin:0; }
.nav__link{
  display:flex; align-items:center; gap:8px;
  padding:9px 13px; border-radius:10px;
  font-size:14.5px; font-weight:600; color:var(--text-2);
  transition:background .18s, color .18s;
}
.nav__link:hover{ background:rgba(255,255,255,.06); color:var(--text); }
.nav__link.is-active{ background:rgba(124,58,237,.16); color:var(--text); box-shadow:inset 0 0 0 1px rgba(124,58,237,.4); }
.nav__icon{ width:22px; height:22px; object-fit:contain; }

.header__actions{ display:flex; align-items:center; gap:10px; flex:none; }

.burger{ display:none; width:42px; height:42px; border:1px solid var(--border); background:rgba(255,255,255,.04); border-radius:10px; padding:0; align-items:center; justify-content:center; flex-direction:column; gap:4px; cursor:pointer; }
.burger span{ display:block; width:18px; height:2px; background:var(--text); border-radius:2px; transition:.2s; }

/* ---------- 7. Мобильное меню (drawer) ---------- */
.drawer{ position:fixed; inset:0; z-index:100; }
.drawer[hidden]{ display:none; }
.drawer__overlay{ position:absolute; inset:0; background:rgba(4,6,12,.72); backdrop-filter:blur(3px); }
.drawer__panel{
  position:absolute; top:0; right:0; bottom:0; z-index:1;
  width:min(320px,88vw);
  background:var(--surface); border-left:1px solid var(--border);
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:14px;
  overflow-y:auto;
  animation:slideIn .22s ease;
}
@keyframes slideIn{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; }
.drawer__close{ background:none; border:0; font-size:30px; line-height:1; color:var(--text-2); cursor:pointer; padding:0 4px; }
.drawer__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.drawer__link{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; font-weight:600; color:var(--text-2); }
.drawer__link img{ width:22px; height:22px; object-fit:contain; }
.drawer__link:hover{ background:rgba(255,255,255,.05); color:var(--text); }
.drawer__link.is-active{ background:rgba(124,58,237,.18); color:var(--text); }
.drawer__label{ margin:8px 0 0; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); font-weight:700; }
.drawer__list--plain .drawer__link{ padding:8px 12px; font-weight:500; font-size:14.5px; }

/* ---------- 8. Hero ---------- */
.hero{ position:relative; overflow:hidden; padding:44px 0 56px; }
.hero__bg{
  position:absolute; inset:0;
  background:url('../images/hero.webp') center/cover no-repeat;
  opacity:.30; filter:saturate(1.1);
}
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,15,26,.55) 0%, rgba(11,15,26,.86) 55%, var(--bg) 100%);
}
.hero__inner{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:center; }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(212,175,55,.35);
  background:rgba(212,175,55,.08); border-radius:999px; padding:6px 14px; margin-bottom:18px;
}
.hero__title{ margin:0 0 14px; }
.hero__title em{ font-style:normal; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__text{ color:var(--text-2); font-size:17px; max-width:56ch; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin:24px 0 26px; }

.hero__stats{ display:flex; gap:10px; flex-wrap:wrap; }
.hero__stat{
  background:rgba(17,24,39,.72); border:1px solid var(--border);
  border-radius:var(--r); padding:12px 16px; min-width:118px;
  backdrop-filter:blur(6px);
}
.hero__stat b{ display:block; font-size:20px; font-weight:800; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__stat span{ font-size:12.5px; color:var(--text-3); }

.hero__figure{ position:relative; justify-self:center; }
.hero__figure img{ width:min(420px,100%); filter:drop-shadow(0 24px 60px rgba(124,58,237,.45)); }
.hero__figure::before{
  content:''; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:118%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.24) 0%, rgba(124,58,237,.16) 42%, transparent 68%);
}

/* ---------- 9. Полоса преимуществ ---------- */
.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.feature{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:16px 18px;
  transition:border-color .2s, transform .2s;
}
.feature:hover{ border-color:rgba(124,58,237,.5); transform:translateY(-3px); }
.feature img{ width:52px; height:52px; object-fit:contain; flex:none; }
.feature h3{ margin:0 0 2px; font-size:16px; }
.feature p{ margin:0; font-size:13.5px; color:var(--text-3); line-height:1.45; }

/* ---------- 10. Категории / фильтры ---------- */
.chips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-2); font-weight:600; font-size:14.5px; cursor:pointer;
  transition:.18s;
}
.chip img{ width:20px; height:20px; object-fit:contain; }
.chip:hover{ color:var(--text); border-color:var(--violet-2); }
.chip.is-active{ background:var(--grad-primary); border-color:transparent; color:#fff; box-shadow:var(--glow-violet); }

.filters{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:22px; }
.search{
  flex:1; min-width:220px;
  display:flex; align-items:center; gap:10px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r); padding:0 14px;
}
.search input{
  flex:1; background:none; border:0; outline:none;
  color:var(--text); font:inherit; font-size:15px; padding:12px 0;
}
.search input::placeholder{ color:var(--text-3); }
.select{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:var(--r); padding:12px 14px; font:inherit; font-size:14.5px; cursor:pointer;
  min-width:180px;
}

/* ---------- 11. Сетка игр ---------- */
.games-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(168px,1fr));
  gap:16px;
}
.game-card{
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.game-card:hover{ transform:translateY(-5px); border-color:rgba(124,58,237,.55); box-shadow:var(--shadow-lg); }
.game-card.is-hidden{ display:none; }
.game-card__media{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--surface-2); }
.game-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.game-card:hover .game-card__media img{ transform:scale(1.06); }
.game-card__badge{
  position:absolute; top:9px; left:9px; z-index:2;
  font-size:10.5px; font-weight:800; letter-spacing:.06em;
  padding:4px 9px; border-radius:999px; color:#0B0F1A;
}
.game-card__badge--new{ background:var(--cyan); }
.game-card__badge--top{ background:var(--grad-gold); }
.game-card__badge--hot{ background:var(--pink); color:#fff; }
.game-card__hover{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(180deg, rgba(11,15,26,.45), rgba(11,15,26,.88));
  opacity:0; transition:opacity .22s ease;
}
.game-card:hover .game-card__hover,
.game-card:focus-within .game-card__hover{ opacity:1; }
.game-card__body{ padding:11px 13px 14px; }
.game-card__title{
  margin:0 0 3px; font-size:14.5px; font-weight:700; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.game-card__meta{ margin:0; font-size:12px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.empty-state{ text-align:center; padding:50px 20px; color:var(--text-3); }

/* ---------- 12. Баннеры / промо ---------- */
.banners{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.banner{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:1/1; border:1px solid var(--border-soft);
  transition:transform .22s, box-shadow .22s;
}
.banner:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.banner img{ width:100%; height:100%; object-fit:cover; }
.banner__body{
  position:absolute; inset:auto 0 0 0; padding:18px;
  background:linear-gradient(180deg, transparent, rgba(7,10,18,.92) 62%);
}
.banner__title{ margin:0 0 3px; font-size:17px; }
.banner__text{ margin:0; font-size:13px; color:var(--text-2); }

/* горизонтальная лента промо */
.rail{ display:flex; gap:16px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.rail > *{ flex:0 0 clamp(240px,30vw,320px); scroll-snap-align:start; }
.rail::-webkit-scrollbar{ height:6px; }
.rail::-webkit-scrollbar-thumb{ background:var(--border); border-radius:999px; }

/* ---------- 13. Карточки бонусов ---------- */
.bonus-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.bonus-card{
  display:flex; flex-direction:column;
  background:linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 70%);
  border:1px solid var(--border); border-radius:var(--r-xl);
  padding:22px; position:relative; overflow:hidden;
  transition:border-color .2s, transform .2s;
}
.bonus-card:hover{ border-color:rgba(212,175,55,.5); transform:translateY(-4px); }
.bonus-card__img{ position:absolute; right:-14px; top:-14px; width:118px; opacity:.4; pointer-events:none; }
.bonus-card__tag{
  align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cyan); background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.28);
  border-radius:999px; padding:4px 11px; margin-bottom:12px;
}
.bonus-card__value{ font-size:30px; font-weight:800; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1.1; margin-bottom:4px; }
.bonus-card__title{ margin:0 0 8px; font-size:19px; }
.bonus-card__text{ color:var(--text-2); font-size:14.5px; flex:1; }
.bonus-card__terms{ list-style:none; margin:14px 0 18px; padding:0; display:flex; flex-direction:column; gap:6px; }
.bonus-card__terms li{ margin:0; padding-left:22px; position:relative; font-size:13.5px; color:var(--text-2); }
.bonus-card__terms li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:12px; height:6px; border-left:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}

/* ---------- 14. Таблицы ---------- */
.table-wrap{
  overflow-x:auto; border:1px solid var(--border);
  border-radius:var(--r-lg); margin:0 0 24px; background:var(--surface);
}
.table{ width:100%; border-collapse:collapse; min-width:520px; font-size:14.5px; }
.table th,.table td{ text-align:left; padding:13px 18px; border-bottom:1px solid var(--border-soft); }
.table thead th{
  background:var(--surface-2); color:var(--text-3);
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; white-space:nowrap;
}
.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr:hover{ background:rgba(255,255,255,.025); }
.table td:first-child{ font-weight:600; color:var(--text); }
.table td{ color:var(--text-2); }

/* ---------- 15. Провайдеры ---------- */
/* Плитки провайдеров — это промо-баннеры 287×193 с названием студии,
   поэтому показываем их как обложку карточки, а не как мелкий логотип. */
.providers-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.provider-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; transition:border-color .2s, transform .2s, box-shadow .2s;
}
.provider-card:hover{ border-color:rgba(34,211,238,.5); transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.provider-card__logo{ aspect-ratio:287/193; overflow:hidden; background:var(--surface-2); }
.provider-card__logo img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.provider-card:hover .provider-card__logo img{ transform:scale(1.05); }
.provider-card__body{ padding:16px 18px 18px; }
.provider-card h2,
.provider-card h3{ margin:0 0 4px; font-size:16.5px; }
.provider-card__count{ font-size:12.5px; color:var(--gold); font-weight:700; }
.provider-card p{ margin:8px 0 0; font-size:13.5px; color:var(--text-3); line-height:1.5; }

/* лента плиток провайдеров */
.provider-rail{ display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory; }
.provider-rail::-webkit-scrollbar{ height:6px; }
.provider-rail::-webkit-scrollbar-thumb{ background:var(--border); border-radius:999px; }
.provider-tile{
  flex:0 0 220px; scroll-snap-align:start;
  border-radius:var(--r); overflow:hidden; border:1px solid var(--border);
  position:relative; transition:transform .2s, border-color .2s;
}
.provider-tile:hover{ transform:translateY(-3px); border-color:var(--cyan); }
.provider-tile img{ width:100%; aspect-ratio:287/193; object-fit:cover; }

/* ---------- 16. Live-столы ---------- */
.live-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.live-card{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, rgba(124,58,237,.16), var(--surface) 62%);
  border:1px solid var(--border); border-radius:var(--r-lg); padding:22px;
  transition:border-color .2s, transform .2s;
}
.live-card:hover{ border-color:var(--violet-2); transform:translateY(-4px); }
.live-card__badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--red); margin-bottom:12px;
}
.live-card__badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(239,68,68,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(239,68,68,0); } 100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); } }
.live-card h3{ margin:0 0 6px; }
.live-card p{ margin:0 0 14px; color:var(--text-2); font-size:14px; }
.live-card__provider{ font-size:12.5px; color:var(--text-3); }

/* ---------- 17. Шаги ---------- */
.steps{ counter-reset:step; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); list-style:none; padding:0; margin:0; }
.steps li{
  counter-increment:step; position:relative; margin:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:22px 20px 20px;
}
.steps li::before{
  content:counter(step);
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:var(--grad-primary); color:#fff; font-weight:800; font-size:15px;
  margin-bottom:12px; box-shadow:var(--glow-violet);
}
.steps h3{ margin:0 0 5px; font-size:16px; }
.steps p{ margin:0; font-size:14px; color:var(--text-2); }

/* ---------- 18. FAQ ---------- */
.faq{ display:flex; flex-direction:column; gap:10px; max-width:920px; }
.faq__item{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
}
.faq__item[open]{ border-color:rgba(124,58,237,.45); }
.faq__q{
  cursor:pointer; list-style:none; padding:17px 52px 17px 20px;
  font-weight:700; font-size:16px; position:relative;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{
  content:''; position:absolute; right:20px; top:calc(50% - 4px);
  width:9px; height:9px; border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(45deg); transition:transform .2s;
}
.faq__item[open] .faq__q::after{ transform:rotate(-135deg); top:calc(50% - 2px); }
.faq__a{ padding:0 20px 18px; }
.faq__a p{ margin:0; color:var(--text-2); font-size:15px; }

/* ---------- 19. CTA-блок ---------- */
.cta{
  position:relative; overflow:hidden;
  border:1px solid rgba(212,175,55,.28); border-radius:var(--r-xl);
  background:linear-gradient(130deg, rgba(124,58,237,.28) 0%, rgba(11,15,26,.9) 48%, rgba(212,175,55,.16) 100%);
  padding:clamp(26px,4vw,44px);
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
}
.cta h2{ margin:0 0 8px; }
.cta p{ margin:0; color:var(--text-2); max-width:60ch; }
.cta__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- 20. Хлебные крошки / шапка страницы ---------- */
.breadcrumbs{ padding:16px 0 0; font-size:13.5px; color:var(--text-3); }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.breadcrumbs li{ margin:0; display:flex; align-items:center; gap:8px; }
.breadcrumbs li+li::before{ content:'/'; color:var(--border); }
.breadcrumbs a:hover{ color:var(--cyan); }

.page-hero{ padding:22px 0 30px; }
.page-hero__title{ margin:0 0 12px; }
.page-hero__lead{ margin:0; color:var(--text-2); font-size:17px; max-width:75ch; }

/* ---------- 21. Инфо-плашки ---------- */
.note{
  border:1px solid var(--border); border-left:3px solid var(--gold);
  background:var(--surface); border-radius:var(--r);
  padding:16px 20px; margin:0 0 22px;
}
.note p:last-child{ margin:0; }
.note--warn{ border-left-color:var(--red); }
.note--ok{ border-left-color:var(--green); }
.note strong{ color:var(--text); }

.info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-bottom:26px; }
.info-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; }
.info-card h3{ margin:0 0 8px; font-size:16.5px; }
.info-card p{ margin:0; color:var(--text-2); font-size:14.5px; }
.info-card__value{ font-size:26px; font-weight:800; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* VIP */
.vip-table td:first-child{ color:var(--gold); font-weight:800; }

/* ---------- 22. Блок приложения ---------- */
.app-block{
  display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center;
  background:linear-gradient(140deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:var(--r-xl);
  padding:clamp(22px,3vw,36px); overflow:hidden;
}
.app-block__img img{ border-radius:var(--r-lg); }

/* ---------- 23. Футер ---------- */
.footer{ background:#070A12; border-top:1px solid var(--border-soft); padding:48px 0 96px; margin-top:40px; }
.footer__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding-bottom:34px; border-bottom:1px solid var(--border-soft); }
.footer__desc{ color:var(--text-3); font-size:14px; max-width:44ch; margin:14px 0 14px; }
.footer__contacts{ display:flex; gap:16px; flex-wrap:wrap; font-size:14px; }
.footer__contacts a{ color:var(--cyan); }
.footer__contacts a:hover{ text-decoration:underline; }
.footer__col-title{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin:0 0 14px; }
.footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer__col li{ margin:0; }
.footer__col a{ color:var(--text-2); font-size:14.5px; }
.footer__col a:hover{ color:var(--text); }

.footer__providers{ display:flex; flex-wrap:wrap; gap:8px; padding:26px 0; border-bottom:1px solid var(--border-soft); }
.footer__providers span{
  font-size:12.5px; font-weight:600; color:var(--text-3);
  border:1px solid var(--border); border-radius:999px; padding:5px 13px;
  transition:color .2s, border-color .2s;
}
.footer__providers span:hover{ color:var(--text-2); border-color:var(--text-3); }

.footer__legal{ display:flex; gap:18px; padding:26px 0; align-items:flex-start; }
.footer__age{
  flex:none; width:52px; height:52px; border-radius:50%;
  border:2px solid var(--red); color:var(--red);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px;
}
.footer__legal-text p{ font-size:13px; color:var(--text-3); line-height:1.6; margin:0 0 10px; }
.footer__legal-text p:last-child{ margin:0; }

.footer__bottom{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--border-soft); font-size:13px; color:var(--text-3); }
.footer__domain{ color:var(--gold); font-weight:600; }

/* ---------- 24. Нижняя мобильная навигация ---------- */
.mobile-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(7,10,18,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-nav__item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px; font-size:10.5px; font-weight:600; color:var(--text-3);
}
.mobile-nav__item img{ width:24px; height:24px; object-fit:contain; opacity:.65; }
.mobile-nav__item.is-active{ color:var(--gold); }
.mobile-nav__item.is-active img{ opacity:1; }

/* ---------- 25. Адаптив ---------- */
@media (max-width:1080px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .footer__top{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__figure{ order:-1; }
  .hero__figure img{ width:min(280px,70%); }
  .features{ grid-template-columns:repeat(2,1fr); }
  .app-block{ grid-template-columns:1fr; }
  .cta{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:640px){
  .section{ padding:38px 0; }
  .mobile-nav{ display:flex; }
  .hide-sm{ display:none; }
  .topbar__text{ display:none; }
  .games-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
  .features{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; gap:24px; }
  .footer{ padding-bottom:110px; }
  .banners{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
  .game-card__hover{ opacity:1; background:linear-gradient(180deg,transparent 55%, rgba(11,15,26,.75)); }
  .game-card__hover .btn--ghost{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}