/* ============= Base / Variables ============= */
:root{
  --bg:#0b1713; --card:#0f211c; --muted:#98b3a9; --text:#e8f3ee;
  --brand:#16c37b; --brand-2:#1fa387; --ok:#22c55e; --bad:#ef4444;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --max:1160px;
  --gx:clamp(22px,6vw,28px);
}

*{ box-sizing:border-box }
html,body{ min-height:100% }

/* Переносим градиент на html, тело — прозрачное. Это гасит полосы на мобилках. */
html{
  background: linear-gradient(to bottom, #0e2019, #07110d);
}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: transparent;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:var(--brand) }

/* ============= Layout Container ============= */
.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--gx) }
@media (min-width:720px){ .wrap{ padding-inline:16px } }

/* ============= Header / Nav ============= */
/* Без blur и без прозрачностей. Изолируем покраску, чтобы не было швов. */
header{
  position:sticky; top:0; z-index:1000;
  background:#0b1713;                         /* сплошной фон */
  border-bottom:1px solid rgba(255,255,255,.06);
  contain: paint;                              /* изоляция слоя */
  transform: none; will-change: auto;          /* никаких 3D-хаев */
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding-block:12px }
.logo{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px }
.logo__mark{ width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 6px 18px rgba(22,195,123,.35) }
.nav__links{ display:none; gap:16px }
.nav__links a{ text-decoration:none; color:var(--text); opacity:.9 }

.btn{
  --p:11px 16px;
  display:inline-flex; align-items:center; gap:8px; padding:var(--p);
  border-radius:999px; text-decoration:none; font-weight:600;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#062016;
  box-shadow:0 10px 20px rgba(22,195,123,.25);
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(22,195,123,.32) }
.btn--ghost{ background:transparent; border:1px solid rgba(255,255,255,.14); color:var(--text) }

/* ============= HERO ============= */
/* Убираем радиальные фоны у hero (часто триггерят артефакты). */
.hero{
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.06);
  background: transparent;
  overflow:hidden;                             /* вместо clip */
  isolation:auto;                              /* без лишних стеков */
}
.hero__inner{ display:grid; gap:22px; padding-block:22px 28px }
.hero__badge{ display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border:1px solid rgba(255,255,255,.16); border-radius:999px; font-size:12px; color:var(--muted) }
.hero__title{ font-size:clamp(24px,6vw,42px); line-height:1.15; margin:6px 0 }
.hero__lead{ color:var(--muted); font-size:15px }
.hero__cta{ display:flex; gap:10px; flex-wrap:wrap }
.hero__art{
  position:relative; height:220px; border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(31,163,135,.18), rgba(22,195,123,.08)), url('../img/hero-mobile.jpg') center/cover no-repeat;
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.06); overflow:hidden;
}
.hero__art img{ display:block; width:100%; height:100%; object-fit:cover }

/* ============= Sections / Cards ============= */
section{ padding-block:28px }
.h2{ font-size:clamp(20px,4.8vw,32px); margin:0 0 12px }
.muted{ color:var(--muted) }
.grid{ display:grid; gap:12px }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.proscons{ display:grid; gap:12px }
.pros li,.cons li{ margin:0 0 8px; padding-left:26px; position:relative }
.pros li::before{
  content:""; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #0e2019, #0e201900 60%), var(--ok)
}
.cons li::before{
  content:""; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #0e2019, #0e201900 60%), var(--bad)
}

/* Фичи: на мобиле 1 колонка — железобетон против налезаний */
.features{ display:grid; grid-template-columns:1fr; gap:10px }
@media (min-width:540px){ .features{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .features{ grid-template-columns:repeat(4,1fr) } }

.feature{ padding:14px; border:1px dashed rgba(255,255,255,.12); border-radius:14px }
.feature b{ display:block; font-size:14px; margin-bottom:4px }
.pills{ display:flex; flex-wrap:wrap; gap:8px }
.pill{ font-size:13px; padding:8px 12px; border-radius:999px; background:rgba(31,163,135,.12); border:1px solid rgba(31,163,135,.4) }

/* Таблица */
.table{ width:100%; border-collapse:collapse; font-size:14px }
.table th,.table td{ padding:12px; border-bottom:1px solid rgba(255,255,255,.06) }
.table th{ text-align:left; color:var(--muted); font-weight:600 }

/* Галерея */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px }
.gallery img{ width:100%; height:120px; object-fit:cover; border-radius:12px; border:1px solid rgba(255,255,255,.08) }

/* ============= FAQ ============= */
.faq details{ border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; margin-bottom:8px; background:rgba(255,255,255,.02) }
.faq summary{ cursor:pointer; list-style:none; font-weight:600 }
.faq summary::-webkit-details-marker{ display:none }

/* ============= Footer ============= */
footer{ border-top:1px solid rgba(255,255,255,.06); padding-block:18px 28px; color:var(--muted) }
.footer__grid{ display:grid; gap:6px }

/* ============= Desktop ============= */
@media (min-width:720px){
  .nav__links{ display:flex }
  .hero__inner{ grid-template-columns:1.1fr .9fr; align-items:center; gap:28px; padding-block:42px 48px }
  section{ padding-block:44px }
  .proscons{ grid-template-columns:1fr 1fr }
  .gallery{ grid-template-columns:repeat(4,1fr) }
  .footer__grid{ grid-template-columns:1fr auto }
}

/* ============= Media defaults ============= */
img,video,svg{ max-width:100%; height:auto }

/* ============= Wide table scroll ============= */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.table-wrap::-webkit-scrollbar{ height:8px }
.table-wrap::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px }
.table{ min-width:560px }

/* ============= Mobile stacked table ============= */
@media (max-width:640px){
  .rtable{ border:0; min-width:0; width:100% }
  .rtable thead{ position:absolute; left:-9999px; top:-9999px }
  .rtable tbody{ display:grid; gap:8px }
  .rtable tr{
    display:grid; grid-template-columns:1fr;
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px 12px;
  }
  .rtable td{
    display:grid; grid-template-columns:130px 1fr; align-items:start; gap:10px;
    padding:8px 0; border:0; border-bottom:1px solid rgba(255,255,255,.06);
  }
  .rtable td:last-child{ border-bottom:0 }
  .rtable td::before{ content:attr(data-label); color:var(--muted); font-weight:600; letter-spacing:.2px }
}

/* ============= Safety toggles (минимум магии) ============= */
/* Контекстная изоляция секций на случай редких «протечек» слоёв */
#overview, #bonuses, #games, #payments, #faq{
  position:relative;
  isolation:isolate;
}

/* Никаких backdrop-filter нигде (на всякий случай) */
*{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }