:root {
  --color-bg: #0b0f1a;
  --color-bg-alt: #12182b;
  --color-surface: #171f36;
  --color-border: #26304d;
  --color-text: #e9ecf5;
  --color-text-muted: #9aa3c0;
  --color-accent: #f2b90c;
  --color-accent-dark: #c99400;
  --color-accent-2: #2fd6c8;
  --radius: 14px;
  --container-width: 1120px;
  --font-sans: 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
a:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-accent-2);
}
body { margin: 0; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.5; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
.container { max-width: var(--container-width); margin-inline: auto; padding-inline: 20px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); text-align: center; margin-bottom: 1.2em; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .75em 1.4em; border-radius: 999px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; font-size: 1rem; }
.btn-icon { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: #1a1400; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-large { padding: 1em 2.2em; font-size: 1.1rem; }
.btn-copy { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }
.btn-copy.is-copied { background: var(--color-accent-2); color: #04241f; border-color: var(--color-accent-2); }

.site-header { position: sticky; top: 0; z-index: 20; background: rgba(11, 15, 26, .9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.logo { height: 34px; width: auto; }
.header-cta { white-space: nowrap; }

.lang-switcher { position: relative; }
.lang-current { display: flex; align-items: center; gap: .5em; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); border-radius: 999px; padding: .5em 1em; cursor: pointer; }
.lang-dropdown { display: none; position: absolute; top: calc(100% + 8px); inset-inline-start: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 8px; max-height: 320px; overflow-y: auto; min-width: 200px; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.lang-switcher.is-open .lang-dropdown { display: block; }
.lang-option { display: flex; align-items: center; gap: .6em; padding: .5em .6em; border-radius: 8px; text-decoration: none; color: var(--color-text); }
.lang-option:hover { background: var(--color-bg-alt); }
.lang-switcher-footer .lang-dropdown, .lang-switcher-footer .lang-current { display: none; }
.lang-switcher-footer { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-block: 20px; }
.lang-switcher-footer .lang-option { display: inline-flex; opacity: .8; }
.lang-switcher-footer .lang-option:hover { opacity: 1; }

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(242, 185, 12, .18), transparent 45%),
    radial-gradient(circle at 85% 0%, rgba(47, 214, 200, .14), transparent 40%),
    radial-gradient(circle, rgba(233, 236, 245, .05) 1px, transparent 1px) 0 0/28px 28px,
    var(--color-bg);
  padding-block: 64px 56px;
  text-align: center;
}
.hero-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-decor svg { position: absolute; opacity: .1; }
.decor-chips { width: 180px; height: 180px; inset-inline-start: -30px; inset-block-end: -40px; color: var(--color-accent); }
.decor-cards { width: 220px; height: 165px; inset-inline-end: -30px; top: 10%; color: var(--color-accent-2); }
.hero-inner { position: relative; z-index: 1; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--color-text-muted); font-weight: 700; margin: 0 0 .6em; }

.brand-mark {
  width: clamp(200px, 30vw, 320px);
  height: auto;
  margin: 0 auto .5em;
  filter: drop-shadow(0 6px 20px rgba(47, 214, 200, .25));
}

.review-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 1.2em 0; }
.badge { display: inline-flex; align-items: center; gap: .45em; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: .5em 1em; font-size: .85rem; font-weight: 700; }
.badge-icon { width: 15px; height: 15px; flex-shrink: 0; }
.badge-score { color: var(--color-accent); }
.badge-score .badge-icon { color: var(--color-accent); }
.badge-lg { font-size: 1rem; padding: .6em 1.2em; border-color: var(--color-accent); }
.badge-lg .badge-icon { width: 18px; height: 18px; }
.badge-bonus { color: var(--color-accent-2); }
.badge-bonus .badge-icon { color: var(--color-accent-2); }
.badge-muted { background: transparent; border-color: var(--color-border); color: var(--color-text-muted); font-weight: 600; font-size: .8rem; }
.badge-muted .badge-icon { color: var(--color-text-muted); }

.hero-subheadline { color: var(--color-text-muted); max-width: 560px; margin: 0 auto 2em; font-size: 1.1rem; }
.promo-box { position: relative; display: inline-flex; flex-direction: column; gap: 10px; background: var(--color-surface); border: 1px dashed var(--color-accent); border-radius: var(--radius); padding: 20px 28px; margin-bottom: 28px; box-shadow: 0 0 0 8px rgba(242, 185, 12, .06); }
.promo-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.promo-code-row { display: flex; align-items: center; gap: 12px; }
.promo-code { font-size: 1.6rem; font-weight: 800; letter-spacing: .08em; color: var(--color-accent); background: none; }

.link-badge { display: inline-flex; align-items: center; gap: .4em; margin-top: 12px; color: var(--color-accent-2); text-decoration: none; font-size: .8rem; font-weight: 600; border-bottom: 1px dashed transparent; }
.link-badge .badge-icon { width: 14px; height: 14px; }
.link-badge:hover { border-bottom-color: var(--color-accent-2); }

/* .promo-box/.btn-large/.link-badge are inline-flex so a button using the
   same classes elsewhere on the page can sit next to other inline content —
   but left unconstrained in the hero, that means the promo box, the
   register CTA, and the verified-link badge all have room to crowd onto
   one row side-by-side at typical desktop widths. On a narrow (mobile)
   viewport there's simply no room for that, so they fall onto their own
   line each by accident of layout, not by design — real side-by-side
   screenshots (desktop vs. mobile) confirmed exactly this. Force each onto
   its own centered line at every width, scoped to these three specific
   direct children of the hero so no other .btn/.link-badge/.promo-box
   elsewhere on the page is affected. */
.hero-inner > .promo-box,
.hero-inner > .btn-large,
.hero-inner > .link-badge {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

.overview { padding-block: 56px; }
.overview-text { max-width: 700px; margin: 0 auto; text-align: center; color: var(--color-text-muted); font-size: 1.05rem; }

.pros { padding-block: 56px; background: var(--color-bg-alt); }
.pros-list { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; display: grid; gap: 12px; }
.pro-item { display: flex; align-items: flex-start; gap: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px 18px; transition: border-color .2s ease; }
.pro-item:hover { border-color: var(--color-accent-2); }
.pro-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--color-accent-2); }

.bonus { padding-block: 56px; background: var(--color-bg-alt); }
.bonus-percent-highlight { text-align: center; font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 800; color: var(--color-accent); margin: -0.4em 0 .8em; }
.steps { list-style: none; margin: 0 0 2em; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.step { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; text-align: center; transition: transform .2s ease, border-color .2s ease; }
.step:hover { transform: translateY(-4px); border-color: var(--color-accent); }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent); color: #1a1400; font-weight: 800; margin-bottom: 12px; }
.bonus-note { color: var(--color-text-muted); font-size: .9rem; max-width: 720px; margin: 0 auto; text-align: center; }

.section-intro { max-width: 620px; margin: -0.6em auto 1.8em; text-align: center; color: var(--color-text-muted); font-size: .95rem; }

.popular-games { padding-block: 56px; }
.games-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; }
.game-card { display: flex; align-items: center; justify-content: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px; transition: transform .2s ease, border-color .2s ease; }
.game-card:hover { transform: translateY(-4px); border-color: var(--color-accent); }
.game-logo { width: 100%; height: auto; max-height: 48px; object-fit: contain; }

.stats-categories { padding-block: 56px; }
.categories-row, .payments-row, .table-games-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin-bottom: 3em; }
.payments-row, .table-games-row { margin-bottom: 0; }
/* Always exactly 3 columns, never auto-fit — stats.items is schema-enforced
   to exactly 3 entries, and auto-fit with minmax(150px, 1fr) collapses to 2
   columns on typical mobile widths, leaving the 3rd tile alone in its own
   row with a visibly empty cell next to it. A fixed 3-column grid means
   every width just gets 3 narrower (or wider) tiles, never an orphan. */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 3em; }
.stat-tile, .category-card, .payment-card, .table-game-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px; text-align: center; transition: transform .2s ease, border-color .2s ease; }
.stat-tile:hover, .category-card:hover, .payment-card:hover, .table-game-card:hover { transform: translateY(-4px); border-color: var(--color-accent-2); }
.stat-value { display: block; font-size: 1.8rem; font-weight: 800; color: var(--color-accent-2); }
.stat-label { display: block; color: var(--color-text-muted); font-size: .9rem; margin-top: 4px; }
.category-icon, .payment-icon, .table-game-icon { width: 34px; height: 34px; margin: 0 auto 10px; color: var(--color-accent); }
.category-label, .payment-label, .table-game-label { font-weight: 600; }

.table-games { padding-block: 56px; background: var(--color-bg-alt); }

.payments { padding-block: 56px; }

.faq { padding-block: 56px; background: var(--color-bg-alt); }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; background: var(--color-surface); transition: border-color .2s ease; }
.faq-item:hover { border-color: var(--color-accent-2); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: none; border: none; color: var(--color-text); font-size: 1rem; font-weight: 600; text-align: start; padding: 18px 20px; cursor: pointer; }
.faq-chevron { width: 10px; height: 10px; border-inline-end: 2px solid var(--color-accent); border-block-end: 2px solid var(--color-accent); transform: rotate(45deg); transition: transform .2s ease; flex-shrink: 0; }
.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(225deg); }
.faq-answer { padding: 0 20px 18px; color: var(--color-text-muted); }

.verdict { padding-block: 56px; }
.verdict-box { max-width: 700px; margin: 0 auto; text-align: center; background: linear-gradient(160deg, var(--color-surface), var(--color-bg-alt)); border: 1px solid var(--color-accent); border-radius: var(--radius); padding: 32px 28px; }
.verdict-box .badge-score { margin-bottom: 1em; }
.verdict-box h2 { margin-bottom: .6em; }
.verdict-box p { color: var(--color-text-muted); margin: 0; }

.closing { padding-block: 64px; background: radial-gradient(circle at 50% 0%, rgba(242, 185, 12, .14), transparent 55%), var(--color-bg-alt); }
.closing-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.good-luck { color: var(--color-text-muted); font-size: 1.05rem; margin: 0; }

.site-footer { padding-block: 40px; text-align: center; border-top: 1px solid var(--color-border); }
.provider-label { color: var(--color-text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; }
.trust-row { display: inline-flex; align-items: center; gap: .4em; margin: 0 0 14px; padding: .35em .9em; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-muted); font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.trust-row .badge-icon { width: 13px; height: 13px; color: var(--color-accent-2); }
.disclaimer { color: var(--color-text-muted); font-size: .85rem; max-width: 640px; margin: 0 auto; }
.disclaimer a { color: var(--color-accent-2); }
/* stats-source-note sits between .stats-row and the categories <h2> inside
   the SAME section (unlike methodology-note, which is followed by a new
   <section>'s own top padding) — .disclaimer's margin:0 and h2's
   margin-top:0 left it touching the heading directly with no breathing
   room at all. */
.stats-source-note { margin-bottom: 40px; }
.copyright { color: var(--color-text-muted); font-size: .8rem; margin-top: 16px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .step, .stat-tile, .category-card, .payment-card, .pro-item, .faq-item { transition: none; }
}

@media (max-width: 640px) {
  .header-row { flex-wrap: wrap; }
  .promo-code { font-size: 1.3rem; }
  .stats-row { gap: 10px; }
  .stat-tile { padding: 14px 8px; }
  .stat-value { font-size: 1.3rem; }
  .stat-label { font-size: .78rem; }
}

/* RTL overrides (ar/ur) — folded in from the former rtl.css so RTL pages
   don't pay for a second render-blocking stylesheet request. Every rule
   here is scoped to [dir="rtl"] and is an inert no-op on LTR pages. */
[dir="rtl"] .hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(242, 185, 12, .18), transparent 45%),
    radial-gradient(circle at 15% 0%, rgba(47, 214, 200, .14), transparent 40%),
    var(--color-bg);
}

[dir="rtl"] .promo-code {
  letter-spacing: 0;
}

[dir="rtl"] .eyebrow,
[dir="rtl"] .promo-label {
  letter-spacing: 0;
}

[dir="rtl"] body {
  font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Noto Nastaliq Urdu', sans-serif;
}

[dir="rtl"] .faq-chevron {
  transform: rotate(-45deg);
}

[dir="rtl"] .faq-question[aria-expanded="true"] .faq-chevron {
  transform: rotate(-225deg);
}