/* =============================================
   TEMPLATE 2 — Dark/Slate theme
   Font: Inter | Accent: #6c47ff (purple) + #f5c518 (gold)
   ============================================= */

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 10px; scroll-behavior: smooth; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #1a1a2e;
  background: #f4f6fb;
  min-width: 36rem;
}
ul, ol { margin: 0; padding: 0; }
img { border-style: none; max-width: 100%; height: auto; display: block; }
a { background-color: transparent; }
h1,h2,h3,h4,h5,h6 { margin: 0; }
p { margin: 0; }

/* ---------- VISUALLY HIDDEN ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  border: 0; clip: rect(0 0 0 0);
}

/* ---------- CSS VARIABLES ---------- */
:root {
  --accent: #6c47ff;
  --accent-dark: #5535e0;
  --gold: #f5c518;
  --gold-dark: #d4a800;
  --dark: #0f0e17;
  --dark2: #1a1a2e;
  --mid: #2d2d44;
  --light: #f4f6fb;
  --white: #ffffff;
  --text: #1a1a2e;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --green: #10b981;
  --red: #ef4444;
  --radius: 1.2rem;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 40px rgba(0,0,0,0.12);
}

/* ---------- CONTAINER ---------- */
.container {
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 1.6rem;
}

/* ---------- WRAPPER ---------- */
.wrapper {
  flex: 1 0 auto;
  padding-top: 6.4rem;
}

/* =============================================
   HEADER
   ============================================= */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 6.4rem;
  background: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 2rem;
}

/* LOGO */
.logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  flex-shrink: 0;
}
.logo__icon {
  font-size: 2.4rem;
  color: var(--gold);
  line-height: 1;
}
.logo__text {
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
}

/* NAV */
.header__nav { margin-left: auto; }
.header__nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 0.4rem;
}
.header__nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  border-radius: 0.8rem;
  transition: color 0.2s, background 0.2s;
}
.header__nav a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.08);
}

/* HEADER ACTIONS */
.header__actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem; height: 3.6rem;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: background 0.2s;
}
.search-toggle svg {
  width: 1.8rem; height: 1.8rem;
  fill: rgba(255,255,255,0.7);
}
.search-toggle:hover { background: rgba(255,255,255,0.14); }

/* GIFT */
.gift {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 3.6rem; height: 3.6rem;
}
.gift svg {
  width: 2.4rem; height: 2.4rem;
  color: var(--gold);
}
.gift__label {
  position: absolute;
  top: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem; height: 1.8rem;
  background: var(--red);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 50%;
  border: 2px solid var(--dark);
  line-height: 1;
}

/* MENU TOGGLE */
.header__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 3.6rem; height: 3.6rem;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  color: #fff;
}
.header__menu-toggle svg {
  width: 2rem; height: 2rem;
  stroke: rgba(255,255,255,0.85);
}

/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 5rem;
  text-align: center;
  background: var(--dark);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(108,71,255,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(245,197,24,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.4rem;
  background: rgba(245,197,24,0.12);
  border: 1px solid rgba(245,197,24,0.3);
  border-radius: 10rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
}
.hero__title {
  margin-bottom: 1.6rem;
  font-size: 4.2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
  letter-spacing: -0.03em;
}
.hero__text {
  margin-bottom: 3.2rem;
  font-size: 1.8rem;
  color: rgba(255,255,255,0.6);
  font-weight: 400;
}

/* HERO CATEGORIES */
.hero__cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
}
.hero__cat {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 2rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  white-space: nowrap;
}
.hero__cat:hover {
  background: rgba(108,71,255,0.2);
  border-color: rgba(108,71,255,0.5);
  transform: translateY(-2px);
}
.hero__cat-icon { font-size: 2rem; }

/* =============================================
   COLS (main + sidebar)
   ============================================= */
.cols { padding: 3.2rem 0; }
.cols__wrap {
  display: flex;
  gap: 2.4rem;
  align-items: flex-start;
}
.cols__main { flex: 1 1 0; min-width: 0; }
.cols__sidebar { width: 28rem; flex-shrink: 0; }

/* ---------- SECTION TITLE ---------- */
.section-title {
  margin-bottom: 2rem;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--dark2);
  letter-spacing: -0.02em;
}

/* =============================================
   CASINO CARDS
   ============================================= */
.casino-list { list-style: none; }
.casino-list li + li { margin-top: 1.2rem; }

.c-card {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 2rem 2rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s, transform 0.15s;
  flex-wrap: wrap;
}
.c-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* FEATURED CARD */
.c-card--featured {
  border-color: var(--accent);
  background: linear-gradient(135deg, #fafaff 0%, #f0ecff 100%);
  position: relative;
  overflow: hidden;
}
.c-card--featured::before {
  content: '⭐ Editor\'s Choice';
  position: absolute;
  top: 1.2rem; right: -3.2rem;
  background: var(--accent);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.4rem 4rem;
  transform: rotate(45deg);
  letter-spacing: 0.05em;
}

/* TOP 3 */
.c-card--top3 { border-color: rgba(108,71,255,0.2); }

/* RANK */
.c-card__rank {
  flex-shrink: 0;
  min-width: 4rem;
  text-align: center;
}
.c-card__rank span {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-muted);
}
.c-card__rank-badge {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
}

/* LOGO */
.c-card__logo {
  flex-shrink: 0;
  width: 8rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  border-radius: 0.8rem;
  border: 1px solid var(--border);
  overflow: hidden;
  padding: 0.6rem;
}
.c-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* INFO */
.c-card__info { flex: 1 1 12rem; min-width: 0; }
.c-card__name {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--dark2);
  margin-bottom: 0.4rem;
}

/* STARS */
.c-card__stars {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-bottom: 0.8rem;
}
.c-card__stars svg {
  width: 1.6rem; height: 1.6rem;
  fill: var(--gold);
  color: var(--gold);
}
.c-card__stars .star--half { opacity: 0.5; }
.c-card__stars .star--empty { fill: #e5e7eb; color: #e5e7eb; }
.c-card__stars span {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 0.4rem;
}

/* TAGS */
.c-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
}
.c-card__tags li {
  padding: 0.3rem 0.9rem;
  background: #f3f0ff;
  border-radius: 10rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}

/* BONUS */
.c-card__bonus {
  flex-shrink: 0;
  text-align: center;
  min-width: 13rem;
}
.c-card__bonus-amount {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.c-card__bonus-amount span {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}
.c-card__bonus-label {
  font-size: 1.2rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* PAYMENTS */
.c-card__payments {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.c-card__payments img {
  width: 3rem;
  height: 2rem;
  object-fit: contain;
  border-radius: 0.4rem;
  background: #f4f6fb;
  padding: 0.2rem;
}

/* CTA */
.c-card__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
}
.c-card__review-link {
  font-size: 1.3rem;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.c-card__review-link:hover { text-decoration: none; }

/* =============================================
   BUTTONS
   ============================================= */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  padding: 1.1rem 2rem;
  background: var(--gold);
  color: #111;
  font-size: 1.5rem;
  font-weight: 700;
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--gold-dark);
  transform: translateY(-1px);
}

/* generic .button reused from article components */
.button {
  display: block;
  padding: 1rem 1.6rem;
  text-align: center;
  color: #111;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--gold);
  border-radius: 0.8rem;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
  max-width: 100%;
}
.button:hover { background: var(--gold-dark); }

/* =============================================
   SIDEBAR
   ============================================= */
.sidebar-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--dark2);
  margin-bottom: 1.2rem;
}

/* SIDEBAR TOP */
.sidebar-top {
  list-style: none;
  background: var(--white);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  counter-reset: sidebar-counter;
}
.sidebar-top__item {
  counter-increment: sidebar-counter;
  border-bottom: 1px solid var(--border);
}
.sidebar-top__item:last-child { border-bottom: none; }
.sidebar-top__item--top { background: var(--dark2); }
.sidebar-top__item--top .sidebar-top__name { color: var(--gold); }
.sidebar-top__item--top .sidebar-top__desc { color: rgba(255,255,255,0.6); }

.sidebar-top__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.4rem 1.2rem 3.6rem;
  text-decoration: none;
  position: relative;
  transition: background 0.15s;
}
.sidebar-top__link::before {
  content: counter(sidebar-counter);
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-muted);
}
.sidebar-top__item--top .sidebar-top__link::before { color: rgba(255,255,255,0.4); }
.sidebar-top__link:hover { background: #f8f4ff; }
.sidebar-top__item--top .sidebar-top__link:hover { background: rgba(255,255,255,0.05); }

.sidebar-top__logo {
  width: 4rem; height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  background: #f4f6fb;
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
}
.sidebar-top__item--top .sidebar-top__logo { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.1); }
.sidebar-top__logo img { max-width: 80%; max-height: 80%; object-fit: contain; }

.sidebar-top__info { flex: 1; min-width: 0; }
.sidebar-top__name, .sidebar-top__desc { margin: 0; line-height: 1.3; }
.sidebar-top__name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-top__desc { font-size: 1.2rem; color: var(--text-muted); }

/* SIDEBAR LINKS */
.sidebar-links {
  list-style: none;
  background: var(--white);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow);
  padding: 0.8rem 0;
}
.sidebar-links__item { border-bottom: 1px solid #f0f0f5; }
.sidebar-links__item:last-child { border-bottom: none; }
.sidebar-links__link {
  display: block;
  padding: 1rem 1.6rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sidebar-links__link:hover {
  background: #f8f4ff;
  color: var(--accent);
}

/* =============================================
   CONTENT AREA
   ============================================= */
.content { padding: 0 0 4rem; }
.content .container > p { font-size: 1.6rem; color: #444; }
.content .container > p:not(:last-child) { margin-bottom: 2rem; }

.heading {
  margin: 3.2rem 0 1.2rem;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--dark2);
  letter-spacing: -0.02em;
}
.heading:first-child { margin-top: 0; }

/* =============================================
   CHECK LIST
   ============================================= */
.check-list { font-size: 1.6rem; margin-bottom: 3rem; }
.check-list ul, .check-list ol { list-style: none; }
.check-list li {
  padding: 2rem 2rem 2rem 5.6rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  margin-bottom: 1rem;
}
.check-list li::before {
  content: '✓';
  position: absolute;
  top: 2rem; left: 2rem;
  width: 2.4rem; height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0ecff;
  color: var(--accent);
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.3rem;
}
.check-list h2, .check-list h3, .check-list h4 {
  margin: 0 0 0.6rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--dark2);
}
.check-list p { color: #555; font-size: 1.5rem; margin: 0; }
.check-list a { color: var(--accent); text-decoration: underline; }
.check-list a:hover { text-decoration: none; }

/* =============================================
   RTP LIST & CARD
   ============================================= */
.rtp-list { margin-bottom: 3rem; }
.rtp-list__items { list-style: none; }
.rtp-list__items > li + li { margin-top: 1.6rem; }

.rtp-card {
  display: flex;
  gap: 2.4rem;
  padding: 2.4rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.rtp-card__col { flex: 1 1 50%; min-width: 0; }
.rtp-card__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dark2);
  margin-bottom: 1rem;
}
.rtp-card__text { color: #555; font-size: 1.5rem; margin-bottom: 1.6rem; }
.rtp-card__list { list-style: none; margin-bottom: 2rem; }
.rtp-card__list li {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.5rem;
}
.rtp-card__list li:last-child { border-bottom: none; }
.rtp-card__list b { color: var(--text-muted); }
.rtp-card__list span { font-weight: 600; color: var(--dark2); }
.rtp-card__img {
  border-radius: 0.8rem;
  overflow: hidden;
  margin-bottom: 1.2rem;
  height: 18rem;
  background: #f4f6fb;
}
.rtp-card__img img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================
   LIST-TOPS
   ============================================= */
.list-tops { margin-bottom: 2.4rem; }
.list-tops ol {
  list-style: none;
  counter-reset: tops-counter;
}
.list-tops li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: 1.6rem 2rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  counter-increment: tops-counter;
  position: relative;
  box-shadow: var(--shadow);
}
.list-tops li + li { margin-top: 0.8rem; }
.list-tops li:first-child {
  background: var(--dark2);
  border-color: var(--accent);
  color: #fff;
}
.list-tops li:first-child .referral-btn { background: var(--gold); color: #111; }
.list-tops li::before {
  content: counter(tops-counter);
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  min-width: 2.4rem;
  text-align: center;
}
.list-tops li:first-child::before { color: var(--gold); }
.list-tops span {
  font-size: 1.4rem;
  font-weight: 500;
  color: inherit;
  flex-shrink: 0;
}
.list-tops li:first-child span { color: rgba(255,255,255,0.85); }
.list-tops__logo {
  width: 6rem; height: 4rem;
  background: rgba(255,255,255,0.1);
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 0.4rem;
}
.list-tops__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.list-tops .referral-btn {
  margin-left: auto;
  padding: 0.9rem 2rem;
  background: var(--accent);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.list-tops .referral-btn:hover { background: var(--accent-dark); }

/* =============================================
   PROS / CONS
   ============================================= */
.pros-cons {
  display: flex;
  gap: 1.6rem;
  margin-bottom: 3rem;
}
.pros-cons__item {
  flex: 1;
  padding: 2.4rem;
  border-radius: var(--radius);
}
.pros-cons__item--pros {
  background: #f0fdf4;
  border: 1.5px solid #a7f3d0;
}
.pros-cons__item--cons {
  background: #fff5f5;
  border: 1.5px solid #fca5a5;
}
.pros-cons__title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1.6rem;
}
.pros-cons__item--pros .pros-cons__title { color: #065f46; }
.pros-cons__item--cons .pros-cons__title { color: #991b1b; }
.pros-cons__list { list-style: none; }
.pros-cons__list li {
  font-size: 1.5rem;
  color: #333;
  padding: 0.6rem 0 0.6rem 2.4rem;
  position: relative;
}
.pros-cons__list li + li { border-top: 1px solid rgba(0,0,0,0.06); }
.pros-cons__list li::before {
  content: '●';
  position: absolute; left: 0;
  font-size: 0.8rem;
  top: 1rem;
}
.pros-cons__item--pros .pros-cons__list li::before { color: var(--green); }
.pros-cons__item--cons .pros-cons__list li::before { color: var(--red); }

/* =============================================
   TABLE
   ============================================= */
.table {
  margin-bottom: 3rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
  border: 1.5px solid var(--border);
}
.table table {
  width: 100%;
  min-width: 80rem;
  border-collapse: collapse;
}
.table table thead { background: var(--dark2); }
.table table th {
  padding: 1.4rem 1.2rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.table table tbody tr:nth-child(odd) { background: #fafafe; }
.table table tbody tr:not(:last-child) { border-bottom: 1px solid var(--border); }
.table table td {
  padding: 1.2rem 1rem;
  font-size: 1.5rem;
  text-align: center;
  color: var(--text);
}
.table table .button {
  width: auto;
  padding: 0.7rem 1.6rem;
  font-size: 1.3rem;
  margin: 0 auto;
  display: inline-block;
}

/* =============================================
   PAYMENT INFO
   ============================================= */
.payment-info { margin-bottom: 3rem; }
.payment-info ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.6rem; }
.payment-info li {
  flex: 1 1 28rem;
  padding: 2rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.payment-info__head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1rem;
}
.payment-info__img {
  width: 6rem; height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f6fb;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  flex-shrink: 0;
  padding: 0.4rem;
}
.payment-info__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.payment-info h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--dark2);
  margin: 0;
}
.payment-info p { font-size: 1.5rem; color: #555; }

/* =============================================
   STEPPER
   ============================================= */
.stepper { margin-bottom: 3rem; }
.stepper__list {
  list-style: none;
  counter-reset: stepper-count;
}
.stepper__list li {
  padding: 2rem 2rem 2rem 6rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.8rem;
  position: relative;
  box-shadow: var(--shadow);
  counter-increment: stepper-count;
}
.stepper__list li::before {
  content: counter(stepper-count);
  position: absolute;
  top: 2rem; left: 2rem;
  width: 3rem; height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 700;
}
.stepper__list li:last-child::before { background: var(--gold); color: #111; }
.stepper__title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--dark2);
  margin-bottom: 0.6rem;
}
.stepper__list p { font-size: 1.5rem; color: #555; margin: 0; }

/* =============================================
   FAQ
   ============================================= */
.faq { margin-bottom: 3rem; }
.faq__card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.8rem;
  overflow: hidden;
}
.faq__input:checked + .faq__label { color: var(--accent); }
.faq__input:checked + .faq__label::after { transform: rotate(-135deg); top: 45%; }
.faq__input:checked ~ .faq__body {
  max-height: 60rem;
  padding: 0 2rem 2rem;
  opacity: 1;
}
.faq__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem 2rem;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--dark2);
  cursor: pointer;
  transition: color 0.2s;
  user-select: none;
}
.faq__label:hover { color: var(--accent); }
.faq__label::after {
  content: '';
  flex-shrink: 0;
  width: 1.2rem; height: 1.2rem;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(135deg);
  transition: transform 0.2s;
  margin-left: 1rem;
  top: 50%;
}
.faq__body {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0 2rem;
  font-size: 1.5rem;
  color: #555;
  transition: max-height 0.25s ease, opacity 0.2s, padding 0.2s;
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: var(--dark);
  color: rgba(255,255,255,0.65);
  padding: 5rem 0 2rem;
  flex-shrink: 0;
}
.footer a { color: inherit; }
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2.4rem;
  margin-bottom: 3.2rem;
  padding-bottom: 3.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__brand .logo__text { font-size: 2.2rem; }
.footer__tagline { margin-top: 0.8rem; font-size: 1.4rem; opacity: 0.5; }

.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  list-style: none;
}
.footer__nav a {
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.footer__nav a:hover { color: var(--white); }

.footer__responsible {
  margin-bottom: 2.4rem;
}
.footer__subtitle {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 1.2rem;
}
.footer__info-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.footer__info-imgs img {
  border-radius: 0.6rem;
  height: 4rem;
  width: auto;
}
.footer__info-help {
  display: inline-block;
  font-size: 1.4rem;
  text-decoration: underline;
  margin-bottom: 0.8rem;
}
.footer__info-help:hover { text-decoration: none; }
.footer__tel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}
.footer__tel svg { width: 1.6rem; height: 1.6rem; fill: var(--white); }

.footer__desc {
  font-size: 1.2rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.35);
  margin-bottom: 2.4rem;
  max-width: 80rem;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  list-style: none;
  font-size: 1.2rem;
  color: rgba(255,255,255,0.35);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.footer__bottom a { text-decoration: none; transition: color 0.2s; }
.footer__bottom a:hover { color: var(--white); }

/* =============================================
   SCROLL-UP BUTTON
   ============================================= */
.button-scroll-up {
  position: fixed;
  bottom: 9rem; right: 2rem;
  z-index: 90;
  width: 4.4rem; height: 4.4rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(108,71,255,0.35);
  transition: background 0.2s, transform 0.15s;
}
.button-scroll-up:hover { background: var(--accent-dark); transform: translateY(-2px); }

/* =============================================
   STICKY BAR (mobile only)
   ============================================= */
.sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 95;
  background: var(--white);
  border-top: 2px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  padding: 1rem 1.6rem;
  display: none;
}
.sticky-bar__inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 60rem;
  margin: 0 auto;
}
.sticky-bar__logo {
  width: 4rem; height: 4rem;
  background: #f4f6fb;
  border-radius: 0.6rem;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticky-bar__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sticky-bar__info { flex: 1; min-width: 0; }
.sticky-bar__name { font-size: 1.4rem; font-weight: 700; color: var(--dark2); margin: 0; }
.sticky-bar__bonus { font-size: 1.2rem; color: var(--accent); font-weight: 500; margin: 0; }
.sticky-bar__btn { flex-shrink: 0; padding: 0.9rem 1.8rem; font-size: 1.4rem; }

/* =============================================
   MEDIA QUERIES
   ============================================= */

/* ≥ 992px */
@media screen and (min-width: 992px) {
  .header__menu-toggle { display: none; }
  .cols__sidebar { display: block; }
}

/* < 992px */
@media screen and (max-width: 991px) {
  .search-toggle { display: none; }
  .header__menu-toggle { display: flex; }
  .header__nav {
    position: absolute;
    top: 6.4rem; right: 0;
    background: var(--dark2);
    min-width: 22rem;
    border-radius: 0 0 1.2rem 1.2rem;
    padding: 1.2rem;
    display: none;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .header__nav--active { display: block; }
  .header__nav ul { flex-direction: column; gap: 0.2rem; }
  .header__nav a { font-size: 1.6rem; }

  .cols__wrap { flex-direction: column; }
  .cols__sidebar { display: none; width: 100%; }

  .hero__title { font-size: 3.2rem; }
  .hero__text br { display: none; }

  .pros-cons { flex-direction: column; }

  .rtp-card { flex-direction: column; }
  .rtp-card__img { height: 20rem; }
}

/* < 768px */
@media screen and (max-width: 767px) {
  .c-card {
    flex-wrap: wrap;
    gap: 1.2rem;
  }
  .c-card--featured::before { display: none; }
  .c-card__bonus { min-width: auto; }
  .c-card__payments { display: none; }
  .c-card__rank { min-width: auto; }

  .hero__title { font-size: 2.8rem; }

  .payment-info ul { flex-direction: column; }
  .payment-info li { flex: none; }

  .list-tops li { gap: 0.8rem; }
  .list-tops span:nth-child(n+4) { display: none; }

  .sticky-bar { display: block; }
  .wrapper { padding-bottom: 7.2rem; }

  .table table { min-width: 60rem; }

  .footer__top { flex-direction: column; }
  .footer__nav ul { gap: 0.6rem 1.6rem; }
}

/* < 576px */
@media screen and (max-width: 575px) {
  .hero__cats { gap: 0.8rem; }
  .hero__cat { padding: 0.8rem 1.4rem; font-size: 1.3rem; }
  .heading { font-size: 2.2rem; }
  .section-title { font-size: 2rem; }
  .footer__bottom li:last-child { width: 100%; margin-top: 0.8rem; }
}