/* ---------- 1. TOKENS ---------- */
:root{
  /* palette — ink (brand-true dark) */
  --bg:        #0b0e15;   /* page background (deep navy-black) */
  --bg-2:      #11151f;   /* section alt bands (zebra striping) */
  --surface:   #161b27;   /* cards, tiles, accordion rows, header shelf */
  --surface-2: #1d2330;   /* raised hover/active card state, code chips */
  --hairline:  #262c3a;   /* 1px dividers, card borders, table rows */

  /* brand — betwinner gold (verified ≈ Venezuelan flag yellow #FCDD09) */
  --gold:      #FFCE06;   /* primary accent: CTAs, logo, star fill, focus, key numbers */
  --gold-press:#e0b405;   /* CTA :active */
  --gold-soft: rgba(255,206,6,.14);

  /* Venezuelan flag — accent ONLY (never body text, AA fails on --bg) */
  --blue-ve:   #00247D;   /* tricolor ribbon, licence badge backing (3.6:1 ⚠ accent) */
  --red-ve:      #CF142B;   /* tricolor ribbon, zona-gris warning chip, 18+ badge — backgrounds/borders/non-text only (3.1:1 as text ⚠) */
  --red-ve-text: #FF5466;   /* AA-on-dark text variant of --red-ve (use for text color only) */
  --amarillo:  #FCDD09;   /* flag yellow used in tricolor gradient */

  /* interactive / semantic */
  --link:      #6cb0ff;   /* body link on dark (AA vs --bg) */
  --on-gold:   #1a1500;   /* text on gold fill */
  --success:   #22c55e;   /* positive state (verified ✓, método oficial) */
  --warn:      #f59e0b;   /* caution chip (affiliate, no oficial) */
  --bad:       #ef4444;   /* danger / ✗ */

  /* text */
  --text:      #f5f7fb;   /* primary body, headings (17.8:1) */
  --muted:     #aeb6c6;   /* secondary copy, captions (8.7:1) */
  --muted-2:   #7e8696;   /* tertiary (≥18px only, 5.0:1 large) */

  /* gradient system */
  --grad-gold:     linear-gradient(135deg, #FFCE06 0%, #ffe352 100%);
  --grad-hero:     radial-gradient(120% 80% at 50% -10%, rgba(255,206,6,.18) 0%, rgba(11,14,21,0) 60%), linear-gradient(180deg, #0b0e15 0%, #11151f 100%);
  --grad-tricolor: linear-gradient(90deg, #FCDD09 0 33.33%, #00247D 33.33% 66.66%, #CF142B 66.66% 100%);

  /* type — system-first, zero web-font payload */
  --font-display: 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* fluid type scale (clamp) */
  --fs-h1:   clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);   /* 36 → 60 */
  --fs-h2:   clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);   /* 28 → 40 */
  --fs-h3:   clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); /* 20 → 26 */
  --fs-h4:   clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem); /* 17 → 19 */
  --fs-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);   /* 17 → 20 */
  --fs-body: 1rem;       /* 16 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-xs:   0.75rem;    /* 12 */

  /* spacing scale (8pt baseline*/
  --s-2: 4px;
  --s-1: 8px;
  --s0:  12px;
  --s1:  16px;
  --s2:  24px;
  --s3:  32px;
  --s4:  48px;
  --s5:  64px;
  --s6:  96px;

  /* intra-component gap tokens */
  --gap-card:   16px;
  --gap-grid:   24px;
  --gap-section:48px;

  /* radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* shadows */
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-pop:  0 18px 50px -14px rgba(0,0,0,.75);
  --shadow-cta:  0 8px 24px -8px rgba(255,206,6,.45);

  /* z-index scale (tokenized*/
  --z-header: 100;
  --z-overlay: 200;
  --z-modal:  300;
  --z-toast:  400;

  /* layout */
  --container: 1240px;
  --container-prose: 1240px; /* same width as main container — no narrow sections */
  --container-wide: 1240px;
  --nav-h: 64px;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;
}
html:focus-within{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
img{ vertical-align:middle; }
a{ color:var(--link); text-decoration:none; }
/* body/prose links distinguishable by more than color (a11y link-in-text-block) */
main p a:not(.btn), main li a:not(.btn), #seo-text a, .faq a, .legal-teaser a, .compare-note a,
.app-warning a:not(.btn), .reviews-honesty a:not(.btn){
  text-decoration:underline; text-decoration-color:var(--link);
  text-underline-offset:2px; text-decoration-thickness:1px;
}
main p a:not(.btn):hover, #seo-text a:hover,
.app-warning a:not(.btn):hover, .reviews-honesty a:not(.btn):hover{ text-decoration-thickness:2px; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
ul,ol{ margin:0; padding:0; }
li{ list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.15;
}
h1{ font-size:var(--fs-h1); font-weight:800; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); font-weight:600; letter-spacing:0; line-height:1.3; }
p{ margin-block:0 var(--s1); }
p:last-child{ margin-block-end:0; }
strong{ font-weight:700; color:#fff; }
code,kbd,samp{ font-family:var(--font-mono); font-size:0.92em; }

/* focus-visible — global gold ring */
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:4px; }
:focus:not(:focus-visible){ outline:none; }

/* long URLs/tokens wrap — never horizontal overflow (exclude nav/CTA links) */
p,li,dd,td,blockquote{ overflow-wrap:anywhere; word-break:break-word; }
code,kbd,samp,.mono{ overflow-wrap:anywhere; word-break:break-word; }

/* ---------- 3. LAYOUT HELPERS ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,32px);
}
.container--prose{ max-width:var(--container-prose); }
.container--wide{ max-width:var(--container-wide); }

/* section rhythm*/
[data-section],.section{ padding-block:clamp(40px,4vw,64px); }
[data-section="hero"]{ padding-block:0 clamp(56px,7vw,96px); }   /* top bleed, block-end heavy */
.section--tight{ padding-block:clamp(28px,4vw,48px); }
.section--alt{ background:var(--bg-2); }
.bleed{ max-width:none; padding-inline:0; }   /* explicit opt-out of container bounds */

.stack > * + *{ margin-block-start:var(--gap-card); }
.stack-lg > * + *{ margin-block-start:var(--gap-grid); }
.cluster{ display:flex; flex-wrap:wrap; gap:var(--s0); align-items:center; }
.cluster--center{ justify-content:center; }
.cluster--between{ justify-content:space-between; }
.grid{ display:grid; gap:var(--gap-grid); }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.text-center{ text-align:center; }
.muted{ color:var(--muted); }
.muted-2{ color:var(--muted-2); }
.gold{ color:var(--gold); }
.nowrap{ white-space:nowrap; }
.tnum{ font-variant-numeric:tabular-nums; font-weight:600; }
.mono{ font-family:var(--font-mono); }

/* skip-link*/
.skip-link{
  position:absolute; left:8px; top:-56px; z-index:var(--z-toast);
  background:var(--gold); color:var(--on-gold);
  padding:12px 18px; border-radius:var(--r-sm); font-weight:700;
  transition:top .15s ease;
}
.skip-link:focus{ top:8px; text-decoration:none; }

/* ---------- 4. EYEBROW / SECTION HEAD ---------- */
.eyebrow{
  display:inline-block;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--gold);
  margin-block-end:var(--s0);
}
/* tiny 5-point star prefix (8-star motif micro-glyph) */
.eyebrow::before{
  content:""; display:inline-block; width:10px; height:10px;
  background:currentColor; margin-inline-end:8px; vertical-align:-1px;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.eyebrow--muted{ color:var(--muted); }
.section-head{ margin-block-end:var(--s3); }
.section-head h2{ margin-block-end:var(--s1); }
.section-head p{ color:var(--muted); max-width:70ch; }
.section-head--center{ text-align:center; }
.section-head--center p{ margin-inline:auto; }

/* star divider*/
.star-divider{
  display:flex; align-items:center; gap:var(--s0);
  margin-block:var(--s4) var(--s3);
}
.star-divider::before,.star-divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--hairline),transparent);
}
.star-divider__star{
  width:14px; height:14px; flex-shrink:0; color:var(--gold);
  background:currentColor;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* ---------- 5. BUTTONS*/
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-1);
  padding:14px 26px; border-radius:var(--r-pill); border:1px solid transparent;
  font-family:var(--font-body); font-weight:700; font-size:var(--fs-body); line-height:1;
  text-decoration:none; min-height:48px; white-space:nowrap;
  transition:transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{ text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--gold); color:var(--on-gold); box-shadow:var(--shadow-cta); }
.btn--primary:hover{ background:var(--gold-press); }
.btn--primary:active{ background:var(--gold-press); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--hairline); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn--block{ display:flex; width:100%; }
.btn--sm{ padding:9px 16px; min-height:38px; font-size:var(--fs-sm); }
.btn--lg{ padding:16px 32px; min-height:54px; font-size:var(--fs-lead); }

/* ---------- 6. ICONS (Lucide pack via CSS mask — paths relative to styles.css) ---------- */
.icon{
  display:inline-block; width:1.15em; height:1.15em; flex-shrink:0;
  background-color:currentColor;
  -webkit-mask-image:var(--ico);
  mask-image:var(--ico);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-mode:alpha;
  mask-mode:alpha;
  vertical-align:-0.18em;
}
.icon--sm{ width:1em; height:1em; }
.icon--md{ width:1.35em; height:1.35em; }
.icon--lg{ width:1.75em; height:1.75em; }
.icon--activity{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M22%2012h-2.48a2%202%200%200%200-1.93%201.46l-2.35%208.36a.25.25%200%200%201-.48%200L9.24%202.18a.25.25%200%200%200-.48%200l-2.35%208.36A2%202%200%200%201%204.49%2012H2%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--arrow-right{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M5%2012h14%22%20%2F%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--chevron-down{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--chevron-left{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--chevron-right{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--circle-check{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--circle-x{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%20%2F%3E%3Cpath%20d%3D%22m9%209%206%206%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--club{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M17.28%209.05a5.5%205.5%200%201%200-10.56%200A5.5%205.5%200%201%200%2012%2017.66a5.5%205.5%200%201%200%205.28-8.6Z%22%20%2F%3E%3Cpath%20d%3D%22M12%2017.66L12%2022%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--credit-card{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%225%22%20rx%3D%222%22%20%2F%3E%3Cline%20x1%3D%222%22%20x2%3D%2222%22%20y1%3D%2210%22%20y2%3D%2210%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--dices{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Crect%20width%3D%2212%22%20height%3D%2212%22%20x%3D%222%22%20y%3D%2210%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%3Cpath%20d%3D%22m17.92%2014%203.5-3.5a2.24%202.24%200%200%200%200-3l-5-4.92a2.24%202.24%200%200%200-3%200L10%206%22%20%2F%3E%3Cpath%20d%3D%22M6%2018h.01%22%20%2F%3E%3Cpath%20d%3D%22M10%2014h.01%22%20%2F%3E%3Cpath%20d%3D%22M15%206h.01%22%20%2F%3E%3Cpath%20d%3D%22M18%209h.01%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--gamepad{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cline%20x1%3D%226%22%20x2%3D%2210%22%20y1%3D%2211%22%20y2%3D%2211%22%20%2F%3E%3Cline%20x1%3D%228%22%20x2%3D%228%22%20y1%3D%229%22%20y2%3D%2213%22%20%2F%3E%3Cline%20x1%3D%2215%22%20x2%3D%2215.01%22%20y1%3D%2212%22%20y2%3D%2212%22%20%2F%3E%3Cline%20x1%3D%2218%22%20x2%3D%2218.01%22%20y1%3D%2210%22%20y2%3D%2210%22%20%2F%3E%3Cpath%20d%3D%22M17.32%205H6.68a4%204%200%200%200-3.978%203.59c-.006.052-.01.101-.017.152C2.604%209.416%202%2014.456%202%2016a3%203%200%200%200%203%203c1%200%201.5-.5%202-1l1.414-1.414A2%202%200%200%201%209.828%2016h4.344a2%202%200%200%201%201.414.586L17%2018c.5.5%201%201%202%201a3%203%200%200%200%203-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4%204%200%200%200%2017.32%205z%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--gift{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%224%22%20rx%3D%221%22%20%2F%3E%3Cpath%20d%3D%22M12%208v13%22%20%2F%3E%3Cpath%20d%3D%22M19%2012v7a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-7%22%20%2F%3E%3Cpath%20d%3D%22M7.5%208a2.5%202.5%200%200%201%200-5A4.8%208%200%200%201%2012%208a4.8%208%200%200%201%204.5-5%202.5%202.5%200%200%201%200%205%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--layers{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M12.83%202.18a2%202%200%200%200-1.66%200L2.6%206.08a1%201%200%200%200%200%201.83l8.58%203.91a2%202%200%200%200%201.66%200l8.58-3.9a1%201%200%200%200%200-1.83z%22%20%2F%3E%3Cpath%20d%3D%22M2%2012a1%201%200%200%200%20.58.91l8.6%203.91a2%202%200%200%200%201.65%200l8.58-3.9A1%201%200%200%200%2022%2012%22%20%2F%3E%3Cpath%20d%3D%22M2%2017a1%201%200%200%200%20.58.91l8.6%203.91a2%202%200%200%200%201.65%200l8.58-3.9A1%201%200%200%200%2022%2017%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--play{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpolygon%20points%3D%226%203%2020%2012%206%2021%206%203%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--shield{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--smartphone{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Crect%20width%3D%2214%22%20height%3D%2220%22%20x%3D%225%22%20y%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--spade{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M5%209c-1.5%201.5-3%203.2-3%205.5A5.5%205.5%200%200%200%207.5%2020c1.8%200%203-.5%204.5-2%201.5%201.5%202.7%202%204.5%202a5.5%205.5%200%200%200%205.5-5.5c0-2.3-1.5-4-3-5.5l-7-7-7%207Z%22%20%2F%3E%3Cpath%20d%3D%22M12%2018v4%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--sparkles{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%22%20%2F%3E%3Cpath%20d%3D%22M20%203v4%22%20%2F%3E%3Cpath%20d%3D%22M22%205h-4%22%20%2F%3E%3Cpath%20d%3D%22M4%2017v2%22%20%2F%3E%3Cpath%20d%3D%22M5%2018H3%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--star{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M11.525%202.295a.53.53%200%200%201%20.95%200l2.31%204.679a2.123%202.123%200%200%200%201.595%201.16l5.166.756a.53.53%200%200%201%20.294.904l-3.736%203.638a2.123%202.123%200%200%200-.611%201.878l.882%205.14a.53.53%200%200%201-.771.56l-4.618-2.428a2.122%202.122%200%200%200-1.973%200L6.396%2021.01a.53.53%200%200%201-.77-.56l.881-5.139a2.122%202.122%200%200%200-.611-1.879L2.16%209.795a.53.53%200%200%201%20.294-.906l5.165-.755a2.122%202.122%200%200%200%201.597-1.16z%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--swords{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpolyline%20points%3D%2214.5%2017.5%203%206%203%203%206%203%2017.5%2014.5%22%20%2F%3E%3Cline%20x1%3D%2213%22%20x2%3D%2219%22%20y1%3D%2219%22%20y2%3D%2213%22%20%2F%3E%3Cline%20x1%3D%2216%22%20x2%3D%2220%22%20y1%3D%2216%22%20y2%3D%2220%22%20%2F%3E%3Cline%20x1%3D%2219%22%20x2%3D%2221%22%20y1%3D%2221%22%20y2%3D%2219%22%20%2F%3E%3Cpolyline%20points%3D%2214.5%206.5%2018%203%2021%203%2021%206%2017.5%209.5%22%20%2F%3E%3Cline%20x1%3D%225%22%20x2%3D%229%22%20y1%3D%2214%22%20y2%3D%2218%22%20%2F%3E%3Cline%20x1%3D%227%22%20x2%3D%224%22%20y1%3D%2217%22%20y2%3D%2220%22%20%2F%3E%3Cline%20x1%3D%223%22%20x2%3D%225%22%20y1%3D%2219%22%20y2%3D%2221%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--triangle-alert{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%20%2F%3E%3Cpath%20d%3D%22M12%209v4%22%20%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--trophy{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M10%2014.66v1.626a2%202%200%200%201-.976%201.696A5%205%200%200%200%207%2021.978%22%20%2F%3E%3Cpath%20d%3D%22M14%2014.66v1.626a2%202%200%200%200%20.976%201.696A5%205%200%200%201%2017%2021.978%22%20%2F%3E%3Cpath%20d%3D%22M18%209h1.5a1%201%200%200%200%200-5H18%22%20%2F%3E%3Cpath%20d%3D%22M4%2022h16%22%20%2F%3E%3Cpath%20d%3D%22M6%209a6%206%200%200%200%2012%200V3a1%201%200%200%200-1-1H7a1%201%200%200%200-1%201z%22%20%2F%3E%3Cpath%20d%3D%22M6%209H4.5a1%201%200%200%201%200-5H6%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--zap{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M4%2014a1%201%200%200%201-.78-1.63l9.9-10.2a.5.5%200%200%201%20.86.46l-1.92%206.02A1%201%200%200%200%2013%2010h7a1%201%200%200%201%20.78%201.63l-9.9%2010.2a.5.5%200%200%201-.86-.46l1.92-6.02A1%201%200%200%200%2011%2014z%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--baseball{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M10%2014.66v1.626a2%202%200%200%201-.976%201.696A5%205%200%200%200%207%2021.978%22%20%2F%3E%3Cpath%20d%3D%22M14%2014.66v1.626a2%202%200%200%200%20.976%201.696A5%205%200%200%201%2017%2021.978%22%20%2F%3E%3Cpath%20d%3D%22M18%209h1.5a1%201%200%200%200%200-5H18%22%20%2F%3E%3Cpath%20d%3D%22M4%2022h16%22%20%2F%3E%3Cpath%20d%3D%22M6%209a6%206%200%200%200%2012%200V3a1%201%200%200%200-1-1H7a1%201%200%200%200-1%201z%22%20%2F%3E%3Cpath%20d%3D%22M6%209H4.5a1%201%200%200%201%200-5H6%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon--menu{ --ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M4%2012h16%22%20%2F%3E%3Cpath%20d%3D%22M4%2018h16%22%20%2F%3E%3Cpath%20d%3D%22M4%206h16%22%20%2F%3E%3C%2Fsvg%3E"); }

/* ---------- 7. HEADER / NAV ---------- */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(11,14,21,.92);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header__inner{
  display:flex; align-items:center; gap:clamp(8px,1.4vw,18px);
  min-height:64px; padding-block:8px; min-width:0;
}
.site-header__logo{ display:inline-flex; align-items:center; flex-shrink:0; min-width:0; }
.site-header__logo img{ width:auto; height:26px; max-width:min(160px, 36vw); }
.brand-link:hover{ text-decoration:none; }

.main-nav{ flex:1 1 auto; min-width:0; margin-inline-start:2px; }
.main-nav__list{
  display:flex; align-items:center; gap:1px; flex-wrap:nowrap;
  justify-content:flex-start;
}
.main-nav__list > li{ position:relative; flex-shrink:0; }
.main-nav a{
  display:inline-flex; align-items:center; gap:4px;
  padding:9px 11px; border-radius:999px;
  color:var(--muted); font-weight:600; font-size:0.875rem; line-height:1;
  white-space:nowrap;
  transition:color .15s ease, background-color .15s ease;
}
.main-nav a:hover{ color:var(--text); background:rgba(255,255,255,.04); text-decoration:none; }
.main-nav a[aria-current="page"],.main-nav a[aria-current="true"]{
  color:var(--gold); background:var(--gold-soft);
}
.main-nav__sub > a{
  padding-inline-end:9px;
  color:var(--muted);
}
.main-nav__sub > a .icon{
  width:.85em; height:.85em; opacity:.7;
  transition:transform .15s ease, opacity .15s ease;
}
.main-nav__sub:hover > a .icon,
.main-nav__sub:focus-within > a .icon{ opacity:1; transform:rotate(180deg); }
.main-nav__sub-list{
  position:absolute; top:calc(100% + 8px); left:0; min-width:240px;
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-md); padding:8px; box-shadow:var(--shadow-pop);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:5;
}
.main-nav__sub-list::before{
  content:""; position:absolute; left:16px; top:-5px; width:10px; height:10px;
  background:var(--surface); border-left:1px solid var(--hairline); border-top:1px solid var(--hairline);
  transform:rotate(45deg);
}
.main-nav__sub:hover .main-nav__sub-list,
.main-nav__sub:focus-within .main-nav__sub-list{ opacity:1; visibility:visible; transform:translateY(0); }
.main-nav__sub-list a{
  display:flex; width:100%; padding:11px 12px; border-radius:var(--r-sm); font-size:0.9rem;
}

.header-actions{
  margin-inline-start:auto; display:flex; align-items:center; gap:8px; flex-shrink:0;
  padding-inline-start:10px;
  border-inline-start:1px solid rgba(255,255,255,.08);
}
.header-cta{
  gap:7px; letter-spacing:.04em; box-shadow:var(--shadow-cta);
  padding-inline:16px; font-weight:800;
}
.header-cta .icon{ color:var(--on-gold); width:1em; height:1em; }

/* country chip */
.country-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px 6px 7px; border:1px solid rgba(255,255,255,.1); border-radius:var(--r-pill);
  font-size:0.8rem; color:var(--muted); font-weight:600;
  background:rgba(22,27,39,.72); min-height:36px;
}
.country-chip__flag{
  width:20px; height:14px; border-radius:2px; object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
}
.country-chip__label{ white-space:nowrap; }

/* lite toggle */
.lite-toggle{
  display:inline-flex; align-items:center; gap:7px;
  font-size:0.8rem; color:var(--muted); font-weight:600;
  min-height:36px; padding:0 2px;
}
.lite-toggle__switch{
  position:relative; width:40px; height:22px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--hairline);
  transition:background .15s ease, border-color .15s ease; flex-shrink:0; padding:0;
}
.lite-toggle__switch::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:var(--muted); transition:transform .15s ease, background .15s ease;
}
.lite-toggle[aria-pressed="true"] .lite-toggle__switch{ background:var(--gold-soft); border-color:var(--gold); }
.lite-toggle[aria-pressed="true"] .lite-toggle__switch::after{ transform:translateX(18px); background:var(--gold); }
.lite-toggle__label{ display:none; }
@media(min-width:720px){ .lite-toggle__label{ display:inline; } }

/* hamburger */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:40px; height:40px; padding:0; background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-sm); order:2;
}
.nav-toggle__bar{ display:block; width:16px; height:2px; background:var(--text); margin:0; transition:transform .2s ease, opacity .2s ease; transform-origin:center; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(4){ transform:translateY(-7px) rotate(-45deg); }

@media(min-width:961px) and (max-width:1240px){
  .main-nav a{ padding:8px 8px; font-size:0.8rem; }
  .country-chip__label{ display:none; }
  .country-chip{ padding:6px 7px; }
  .header-actions{ gap:6px; padding-inline-start:8px; }
}
@media(min-width:961px) and (max-width:1100px){
  .main-nav a{ padding:8px 6px; font-size:0.78rem; }
  .lite-toggle__label{ display:none; }
}

/* mobile nav — slide-down drawer */
@media(max-width:960px){
  .site-header__inner{ flex-wrap:nowrap; gap:8px; min-height:58px; }
  .site-header__logo{ order:1; }
  .nav-toggle{ display:inline-flex; order:2; }
  .header-actions{
    order:3; gap:6px; padding-inline-start:0; border-inline-start:0;
  }
  .main-nav{ order:4; }
  .country-chip__label{ display:none; }
  .country-chip{ padding:6px 7px; min-height:34px; }
  .header-actions .btn{ min-height:38px; }
  /* Elevate header above the dimmer: nav lives inside header's stacking context */
  body.nav-open .site-header{ z-index:var(--z-modal); }
  body.nav-open::before{
    content:""; position:fixed; inset:58px 0 0 0;
    z-index:calc(var(--z-modal) - 1);
    background:rgba(11,14,21,.72);
    pointer-events:auto;
  }
  .main-nav{
    position:fixed; inset:58px 0 auto 0; z-index:1;
    background:#0f131c;
    border-bottom:1px solid var(--hairline);
    max-height:calc(100vh - 58px); overflow-y:auto;
    padding:var(--s1) clamp(16px,4vw,32px) var(--s3);
    transform:translateY(-120%); transition:transform .25s ease;
    margin-inline-start:0; flex:none;
    box-shadow:0 24px 48px rgba(0,0,0,.55);
  }
  .main-nav[data-open="true"]{ transform:translateY(0); }
  .main-nav__list{ flex-direction:column; align-items:stretch; gap:2px; flex-wrap:nowrap; }
  .main-nav__list a{
    padding:14px 12px; font-size:1.02rem; border-radius:var(--r-sm);
    color:var(--text);
  }
  .main-nav__list a:hover{ background:rgba(255,255,255,.06); }
  .main-nav__sub-list a{ color:var(--muted); }
  .main-nav__sub > a .icon{ transform:none; }
  .main-nav__sub:hover > a .icon,
  .main-nav__sub:focus-within > a .icon{ transform:none; }
  .main-nav__sub-list{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; background:transparent; padding:0 0 0 12px; min-width:0;
  }
  .main-nav__sub-list::before{ display:none; }
}
@media(min-width:961px){ .nav-toggle{ display:none; } }

@media(max-width:640px){
  .site-header__logo img{ width:122px; height:auto; }
  .header-actions{ gap:5px; }
  .lite-toggle{ gap:0; }
  .lite-toggle__switch{ width:36px; height:20px; }
  .lite-toggle__switch::after{ width:14px; height:14px; top:2px; left:2px; }
  .lite-toggle[aria-pressed="true"] .lite-toggle__switch::after{ transform:translateX(16px); }
  .header-actions .btn--sm{ padding:8px 12px; min-height:36px; font-size:0.82rem; }
}
@media(max-width:400px){
  .site-header__logo img{ width:104px; }
  .header-cta .icon{ display:none; }
  .header-actions .btn--sm{ padding:7px 10px; min-height:34px; }
  .country-chip{ display:none; }
}

/* ---------- 8. HERO — grad-hero + 8-star arc + tepui ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--grad-hero);
  padding-block:0 clamp(56px,7vw,96px);
  border-bottom:1px solid var(--hairline);
}
/* subtle geometric texture (8-star motif, very faint) */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><g fill='none' stroke='%23FFCE06' stroke-width='1'><polygon points='45,8 53,30 76,30 57,44 64,68 45,54 26,68 33,44 14,30 37,30'/><circle cx='45' cy='45' r='42'/></g></svg>");
  background-size:90px 90px;
}
.hero__inner{ position:relative; z-index:3; padding-top:clamp(20px,3.5vw,36px); }
.hero__layout{
  display:grid; gap:clamp(12px,2.5vw,28px); align-items:center;
  grid-template-columns:1fr;
}
.hero__copy{ min-width:0; }
.hero__copy > .cluster,
.hero__inner > .cluster{ margin-block-start:var(--s3); }

/* hero CTAs: primary on its own row, two ghosts below */
.hero__copy > .cluster,
.hero__layout .hero__copy > .cluster{
  display:flex; flex-wrap:wrap; gap:var(--s0); align-items:center;
}
.hero__copy > .cluster > .btn--primary{
  flex:1 1 100%;
  justify-content:center;
  max-width:100%;
}
.hero__copy > .cluster > .btn--ghost{
  flex:1 1 calc(50% - 6px);
  justify-content:center;
  min-width:0;
}
@media(min-width:900px){
  .hero__copy > .cluster > .btn--primary{
    flex:0 1 auto; max-width:none;
  }
  .hero__copy > .cluster > .btn--ghost{
    flex:0 1 auto;
  }
}
.hero h1{ max-width:min(34rem, 100%); }
.hero h1 .gold{ color:var(--gold); }
@media(max-width:760px){ .hero h1{ max-width:none; } }
.hero__stars{ display:block; margin-inline:auto; }
.hero__stars--inline{ margin-block-end:var(--s1); }
.hero .lead{
  font-size:var(--fs-lead); color:var(--text); max-width:62ch; margin-block-start:var(--s1);
}
.hero__sub-line{ color:var(--muted); font-size:var(--fs-sm); max-width:70ch; }

/* brand banner — under stars on mobile, right of copy on desktop */
.hero__banner{
  margin:0; width:100%; max-width:300px; margin-inline:auto;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,206,6,.22);
  background:var(--surface);
  box-shadow:var(--shadow-card), 0 0 40px -12px rgba(255,206,6,.18);
  aspect-ratio:15 / 4;
}
.hero__banner img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}

/* mobile / default order: stars → banner → copy */
.hero__stars{ order:1; }
.hero__banner{ order:2; }
.hero__copy{ order:3; }

@media(min-width:900px){
  .hero__layout{
    grid-template-columns:minmax(0,1.2fr) minmax(240px,0.9fr);
    grid-template-rows:auto 1fr;
    column-gap:clamp(24px,3vw,40px);
    row-gap:8px;
    align-items:start;
  }
  .hero__stars{
    order:unset; grid-column:1; grid-row:1;
    margin-inline:0; margin-block:0 4px;
  }
  .hero__copy{
    order:unset; grid-column:1; grid-row:2;
  }
  .hero__banner{
    order:unset; grid-column:2; grid-row:1 / -1;
    align-self:center; justify-self:end;
    max-width:none; margin-inline:0;
  }
}

/* 8-star arc — compact on desktop */
.hero__stars{
  width:clamp(120px,16vw,160px); max-width:70vw;
  height:auto; aspect-ratio:2 / 1;
  margin-block:0 4px;
  filter:drop-shadow(0 0 6px rgba(255,206,6,.2));
}
@media(max-width:760px){
  .hero__inner{ padding-top:clamp(16px,5vw,28px); }
  .hero__stars{ width:clamp(110px,36vw,150px); margin-block-end:0; }
  .hero__banner{ max-width:min(100%, 300px); margin-block:2px 4px; }
}
/* one-shot cascade: stars brighten left→-right over 800ms */
.hero__stars .ve-star-use{ opacity:.4; animation:starBrighten .5s ease forwards; }
.hero__stars .ve-star-use:nth-child(1){ animation-delay:.05s; }
.hero__stars .ve-star-use:nth-child(2){ animation-delay:.12s; }
.hero__stars .ve-star-use:nth-child(3){ animation-delay:.19s; }
.hero__stars .ve-star-use:nth-child(4){ animation-delay:.26s; }
.hero__stars .ve-star-use:nth-child(5){ animation-delay:.33s; }
.hero__stars .ve-star-use:nth-child(6){ animation-delay:.40s; }
.hero__stars .ve-star-use:nth-child(7){ animation-delay:.47s; }
.hero__stars .ve-star-use:nth-child(8){ animation-delay:.54s; }
@keyframes starBrighten{ to{ opacity:1; } }

/* tepui silhouette at hero block-end */
.hero__tepui{
  position:absolute; left:0; right:0; bottom:0; width:100%; height:auto;
  opacity:.08; z-index:2; pointer-events:none;
}

/* trust chip row */
.trust-chips{ display:flex; flex-wrap:wrap; gap:var(--s-1); margin-block-start:var(--s2); }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border:1px solid var(--hairline); border-radius:var(--r-pill);
  font-size:var(--fs-sm); color:var(--muted); font-weight:600; background:rgba(17,21,31,.6);
}
.chip .icon{ width:1em; height:1em; }
.chip--gold{ border-color:var(--gold); color:var(--gold); }
.chip--success{ border-color:var(--success); color:var(--success); }
.chip--warn{ border-color:var(--warn); color:var(--warn); }
.chip--red{ border-color:var(--red-ve); color:var(--red-ve-text); }
.ok .icon, .no .icon, .warn .icon{ margin-inline-end:4px; }
.ok{ color:var(--success); }
.no{ color:var(--bad); }
table.data .ok .icon, .ok .icon{ color:var(--success); }
table.data .no .icon, .no .icon{ color:var(--bad); }
table.data .warn .icon, .warn .icon{ color:var(--warn); }

/* ---------- 8. RATING STARS ---------- */
.stars{
  display:inline-flex; align-items:center; gap:3px;
  color:var(--gold); font-size:1.05rem; line-height:1;
}
.stars .icon{ width:1em; height:1em; }
.stars .stars__empty{ color:var(--hairline); }
.stars--sm{ font-size:0.85rem; }

/* ---------- 9. CARDS*/
.card{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:var(--s2); box-shadow:var(--shadow-card);
  transition:border-color .15s ease, transform .12s ease, background-color .15s ease;
}
.card--raised:hover,.card--raised:focus-within{ border-color:var(--gold); background:var(--surface-2); transform:translateY(-2px); }
.card--lg{ padding:var(--s3); border-radius:var(--r-lg); }
.card__title{ font-size:var(--fs-h3); color:#fff; margin-block-end:var(--s-1); }
.card__title a{ color:inherit; }
.card__lede{ color:var(--muted); font-size:var(--fs-sm); }

/* ---------- 10. CATEGORY TILES ---------- */
.cat-tiles{ display:grid; gap:var(--gap-grid); grid-template-columns:repeat(2,1fr); }
@media(min-width:768px){ .cat-tiles{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px){ .cat-tiles{ grid-template-columns:repeat(3,1fr); } }
.cat-tile{
  display:flex; flex-direction:column; gap:var(--s-1); padding:var(--s1);
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md);
  color:var(--text); text-decoration:none; min-height:108px; min-width:0;
  transition:border-color .15s ease, transform .12s ease, background-color .15s ease;
}
.cat-tile:hover{ text-decoration:none; border-color:var(--gold); transform:translateY(-2px); background:var(--surface-2); }
.cat-tile__icon{
  width:44px; height:44px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,206,6,.14); color:var(--gold); margin-block-end:4px;
  border:1px solid rgba(255,206,6,.22);
}
.cat-tile__icon .icon{
  width:22px; height:22px;
  color:var(--gold);
  background-color:var(--gold);
}
.cat-tile__glyph{
  width:22px; height:22px; display:block;
  /* Lucide white strokes → brand gold */
  filter: brightness(0) saturate(100%) invert(83%) sepia(61%) saturate(1185%) hue-rotate(359deg) brightness(104%) contrast(104%);
}
.cat-tile__title{ font-weight:700; color:#fff; font-size:var(--fs-h4); }
.cat-tile__desc{ font-size:var(--fs-sm); color:var(--muted); }

/* ---------- 11. GAME CAROUSEL + CARD (components #4*/
.carousel{ position:relative; max-width:100%; overflow:visible; }
.carousel__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s1);
  margin-block-end:var(--s2); flex-wrap:wrap;
}
.carousel__head h2{ font-size:var(--fs-h3); }
.carousel__controls{ display:flex; gap:var(--s-1); flex-shrink:0; }
.carousel__btn{
  width:44px; height:44px; border-radius:50%; background:var(--surface); border:1px solid var(--hairline);
  color:var(--text); display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, color .15s ease, opacity .15s ease, background .15s ease;
}
.carousel__btn .icon{ width:18px; height:18px; }
.carousel__btn:hover{ border-color:var(--gold); color:var(--gold); background:var(--gold-soft); }
.carousel__btn[disabled]{ opacity:.4; cursor:not-allowed; }

.carousel__viewport{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(180px,220px);
  align-items:start;
  gap:var(--gap-card); overflow-x:auto; overflow-y:visible;
  scroll-snap-type:x mandatory; scroll-padding-inline:16px;
  padding-block:4px var(--s1); padding-inline:2px 16px;
  scrollbar-width:thin; scrollbar-color:var(--hairline) transparent;
  max-width:100%;
}
.carousel__viewport::-webkit-scrollbar{ height:8px; }
.carousel__viewport::-webkit-scrollbar-thumb{ background:var(--hairline); border-radius:var(--r-pill); }
@media(max-width:760px){ .carousel__viewport{ grid-auto-columns:minmax(160px,72vw); } }
@media(min-width:1024px){ .carousel__viewport{ grid-auto-columns:minmax(200px,240px); } }

/* game card — fixed height; details as cover overlay (siblings don't stretch) */
.game-card{
  position:relative;
  scroll-snap-align:start; align-self:start;
  display:flex; flex-direction:column; min-width:0;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color .15s ease;
}
.game-card:hover{ border-color:var(--gold); }
.game-card[data-open="true"]{ border-color:var(--gold); z-index:2; }
.game-card__cover{
  position:relative; display:block; width:100%; aspect-ratio:5/3; overflow:hidden; background:var(--surface-2);
}
.game-card__cover img{ width:100%; height:100%; object-fit:cover; }
.game-card__cover--ph{ background:linear-gradient(135deg,var(--surface),var(--surface-2)); }
.game-card__body{ padding:10px 12px 12px; }
.game-card__name{ font-weight:700; font-size:var(--fs-sm); color:#fff; line-height:1.2; }
.game-card__prov{ font-size:var(--fs-xs); color:var(--muted); margin-block-start:2px; }
.game-card__toggle{
  margin-block-start:var(--s-1); width:100%; padding:7px 10px;
  background:transparent; border:1px solid var(--hairline); border-radius:var(--r-sm);
  font-size:var(--fs-xs); color:var(--muted); display:flex; align-items:center; justify-content:center; gap:6px;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.game-card__toggle:hover{ border-color:var(--gold); color:var(--gold); }
.game-card__toggle[aria-expanded="true"]{
  border-color:var(--gold); color:var(--gold); background:var(--gold-soft);
}
.game-card__toggle[aria-expanded="true"] .game-card__toggle-icon{ transform:rotate(45deg); }
.game-card__toggle-icon{ transition:transform .15s ease; display:inline-block; }
/* overlay on cover — does not change card height */
.game-card__panel{
  position:absolute; inset:8px 8px auto 8px; z-index:3;
  background:rgba(11,14,21,.94); border:1px solid var(--gold);
  border-radius:var(--r-md); box-shadow:var(--shadow-pop);
  padding:0; opacity:0; visibility:hidden; transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.game-card__panel[aria-hidden="false"]{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.game-card__panel-inner{ padding:12px; }
.game-card__panel p{ margin:0 0 10px; font-size:var(--fs-xs); color:var(--text); line-height:1.45; }
.game-card__panel .btn{ margin:0; }

/* ---------- 12. PROMO / BONUS CARDS ---------- */
.promo-grid{ display:grid; gap:var(--gap-grid); grid-template-columns:1fr; }
@media(min-width:768px){ .promo-grid{ grid-template-columns:1fr 1fr; } }
.promo-card{
  position:relative; display:flex; flex-direction:column; gap:var(--s0);
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--hairline); border-radius:var(--r-lg); padding:var(--s3);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.promo-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gold);
}
.promo-card__eyebrow{ color:var(--gold); font-size:var(--fs-xs); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.promo-card__title{ font-size:var(--fs-h3); color:#fff; }
.promo-card__body{ color:var(--muted); font-size:var(--fs-sm); }
/* bonus box variant*/
.bonus-box{
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--hairline); border-radius:var(--r-lg); padding:var(--s3);
  box-shadow:var(--shadow-card); position:relative; overflow:hidden;
}
.bonus-box::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gold);
}
.bonus-box__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s0) var(--s1); }
.bonus-box__title{ font-size:var(--fs-h3); color:var(--gold); }
.bonus-box__terms{
  margin-block-start:var(--s1); padding:var(--s1); background:var(--gold-soft);
  border:1px dashed var(--hairline); border-radius:var(--r-md); font-size:var(--fs-sm); color:var(--muted);
}
.bonus-box__terms strong{ color:var(--text); }

/* ---------- 13. PROVIDER GRID — text badges, */
.logo-grid{ display:grid; gap:var(--gap-card); grid-template-columns:repeat(2,1fr); }
@media(min-width:480px){ .logo-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:768px){ .logo-grid{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:1024px){ .logo-grid{ grid-template-columns:repeat(6,1fr); } }
.logo-tile{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:var(--s1); min-height:72px; min-width:0;
  color:var(--muted); font-weight:600; font-size:var(--fs-sm);
  transition:border-color .15s ease, color .15s ease;
}
.logo-tile:hover{ border-color:var(--gold); color:var(--text); }
.logo-tile img{
  max-height:40px; max-width:100%; width:auto; height:auto;
  object-fit:contain; margin-inline:auto;
}

/* ---------- 14. PAYMENT GRID ---------- */
.pay-grid{ display:grid; gap:var(--gap-card); grid-template-columns:repeat(2,1fr); }
@media(min-width:480px){ .pay-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:768px){ .pay-grid{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:1024px){ .pay-grid{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); } }
.pay-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:var(--s1) var(--s0); min-height:92px; min-width:0; overflow-wrap:anywhere;
  transition:border-color .15s ease;
}
.pay-tile img{ max-height:28px; max-width:72px; width:auto; height:auto; object-fit:contain; }
.pay-tile:hover{ border-color:var(--gold); }
.pay-tile--recommended{ border-color:var(--gold); background:var(--gold-soft); }
.pay-tile__glyph{ font-size:1.3rem; line-height:1; }
.pay-tile__name{ font-size:var(--fs-sm); color:var(--text); font-weight:600; text-align:center; }
.pay-tile__sub{
  font-size:var(--fs-xs); color:var(--success); font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
}
.pay-tile__sub--warn{ color:var(--warn); }
/* honest "no directos" footer */
.pay-nodirect{
  margin-block-start:var(--s2); padding:var(--s1) var(--s2);
  background:rgba(245,158,11,.06); border:1px solid rgba(245,158,11,.25); border-left:4px solid var(--warn);
  border-radius:var(--r-md); font-size:var(--fs-sm); color:var(--muted);
}
.pay-nodirect strong{ color:var(--warn); }

/* ---------- 15. APP BLOCK ---------- */
.app-block{ display:grid; gap:var(--gap-grid); grid-template-columns:1fr; align-items:center; }
@media(min-width:768px){ .app-block{ grid-template-columns:1.05fr 1fr; } }
.app-block__media{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--hairline); background:var(--surface);
  box-shadow:var(--shadow-card); aspect-ratio:16/9;
}
.app-block__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}
/* legacy phone mock kept for safety if still present */
.app-block__phone{ display:none; }
.app-block__copy h2{ margin-block-end:var(--s1); }
.app-block__copy p{ color:var(--muted); }
.app-block__btns{
  display:flex; flex-wrap:wrap; gap:var(--s0);
  margin-block-start:var(--s2); align-items:center;
}
.app-warning{
  margin-block-start:var(--s2); padding:var(--s1) var(--s2);
  background:rgba(245,158,11,.06); border:1px solid rgba(245,158,11,.25); border-left:4px solid var(--warn);
  border-radius:var(--r-md); font-size:var(--fs-sm); color:var(--muted);
}
.app-warning strong{ color:var(--warn); }

/* ---------- 16. TRUST / BADGE ROW ---------- */
.trust-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--s1) var(--s3); padding:var(--s2); background:var(--bg-2);
  border:1px solid var(--hairline); border-radius:var(--r-lg);
}
.trust-item{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:var(--fs-sm); }
.trust-item strong{ color:var(--text); }
.trust-item__star{
  width:16px; height:16px; flex-shrink:0; background:var(--gold);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.badge{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:40px; height:40px; padding:0 10px; border-radius:var(--r-sm);
  border:1px solid var(--hairline); background:var(--surface);
  font-weight:800; font-size:var(--fs-xs); color:var(--gold);
}
.badge--ok{ border-color:var(--success); color:var(--success); }
.badge--18{ border-color:var(--red-ve); color:var(--red-ve-text); }

/* ---------- 17. TRICOLOR HONESTY ZONE (component: legalidad/compliance*/
/* The tricolor ribbon appears ONLY here (legal hero / compliance / RG closer). Restraint = moat. */
.zone--honesty{
  position:relative; padding-block:clamp(48px,5vw,80px);
  background:var(--bg-2); border-block:1px solid var(--hairline);
}
.zone--honesty::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:var(--grad-tricolor);
}
.legal-teaser{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:var(--s3); position:relative; overflow:hidden;
}
.legal-teaser::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:var(--grad-tricolor);
}
.legal-teaser__points{ display:grid; gap:var(--s0); margin-block:var(--s2); }
.legal-teaser__points li{
  position:relative; padding-inline-start:32px; color:var(--muted); font-size:var(--fs-sm);
}
.legal-teaser__points li::before{
  content:""; position:absolute; left:0; top:5px; width:14px; height:14px;
  background:var(--gold);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.legal-teaser__points li strong{ color:var(--text); }

/* compliance / sanciones sub-block*/
.compliance-block{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:var(--s3); position:relative; overflow:hidden;
}
.compliance-block::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:var(--grad-tricolor);
}
.compliance-block__chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  border:1px solid var(--red-ve); border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:700; color:var(--red-ve-text); letter-spacing:0.04em; text-transform:uppercase;
  margin-block-end:var(--s1);
}
.compliance-block__chip .icon{ width:1.1em; height:1.1em; }
.bonus-box__title .icon{ margin-inline-end:.35em; vertical-align:-0.15em; }

/* ---------- 18. FAQ ACCORDION — native <details> ---------- */
.faq{ display:grid; gap:var(--s0); max-width:none; margin-inline:0; }
.faq details{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:0; transition:border-color .15s ease;
}
.faq details[open]{ border-color:var(--gold); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s0);
  padding:var(--s1) var(--s2); cursor:pointer; font-weight:700; color:#fff;
  font-size:var(--fs-h4); list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; color:var(--gold); font-weight:800; font-size:1.4rem; line-height:1; flex-shrink:0;
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  transition:transform .15s ease;
}
.faq details[open] summary::after{ content:"−"; }
.faq__answer{ padding:0 var(--s2) var(--s2); color:var(--muted); font-size:var(--fs-sm); }
.faq__answer p{ margin-block-end:var(--s0); }
.faq__answer a{ color:var(--link); }

/* ---------- 19. REVIEWS GRID ---------- */
.reviews-honesty{
  display:flex; gap:12px; padding:var(--s1) var(--s2); margin-block-end:var(--s2);
  background:rgba(108,176,255,.06); border:1px solid rgba(108,176,255,.25); border-left:4px solid var(--link);
  border-radius:var(--r-md); font-size:var(--fs-sm); color:var(--muted);
}
.reviews-honesty strong{ color:var(--link); }
.reviews-grid{ display:grid; gap:var(--gap-grid); grid-template-columns:1fr; }
@media(min-width:640px){ .reviews-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .reviews-grid{ grid-template-columns:repeat(3,1fr); } }
.review-card{
  display:flex; flex-direction:column; gap:var(--s0);
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:var(--s2); box-shadow:var(--shadow-card);
}
.review-card__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s0); }
.review-card__author{ display:flex; align-items:center; gap:10px; min-width:0; }
.review-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--gold-soft); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0;
}
.review-card__name{ font-weight:700; color:#fff; font-size:0.95rem; line-height:1.1; }
.review-card__meta{ font-size:var(--fs-xs); color:var(--muted-2); }
.review-card__title{ font-weight:700; color:var(--gold); font-size:var(--fs-body); }
.review-card__body{ color:var(--muted); font-size:var(--fs-sm); }
.review-card__verified{
  display:inline-flex; align-items:center; gap:4px; color:var(--success);
  font-size:var(--fs-xs); font-weight:700; margin-block-start:auto;
}
/* aggregate rating row */
.aggregate{ display:flex; align-items:baseline; gap:var(--s0); flex-wrap:wrap; }
.aggregate__score{ font-size:2.2rem; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; line-height:1; }
.aggregate__out{ color:var(--muted); }

/* ---------- 20. SEO LONGFORM TEXT ---------- */
#seo-text{ max-width:none; }
#seo-text p{ margin-block-end:var(--s1); color:var(--text); }
#seo-text h2{ margin-block:var(--s4) var(--s1); }
#seo-text h3{ margin-block:var(--s3) var(--s0); color:#fff; }
#seo-text ul,#seo-text ol{ margin:0 0 var(--s1); padding-inline-start:20px; }
#seo-text ul li{ list-style:disc; margin-block-end:6px; }
#seo-text ol li{ list-style:decimal; margin-block-end:6px; }
.lead-block{ font-size:var(--fs-lead); color:var(--muted); }

/* ---------- 21. RESPONSIBLE-GAMING CLOSER (every page ends here) ---------- */
.rg-closer{
  background:var(--bg-2); border:1px solid var(--hairline);
  border-left:4px solid var(--gold); border-radius:var(--r-md); padding:var(--s2);
}
.rg-closer h3{ color:var(--gold); margin-block-end:var(--s-1); }
.rg-closer p{ color:var(--muted); font-size:var(--fs-sm); }
.rg-closer__links{ display:flex; flex-wrap:wrap; gap:var(--s0); margin-block-start:var(--s0); }
.rg-closer__links a{ font-size:var(--fs-sm); }

/* ---------- 22. TABLES — card-stack on mobile ---------- */
.table-wrap{ margin-block:var(--s2); max-width:100%; overflow-x:clip; }
table.data{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden;
  font-variant-numeric:tabular-nums;
}
table.data caption,
.table-caption{
  display:block; width:100%; max-width:100%; box-sizing:border-box;
  text-align:left; padding:var(--s1) 14px; color:var(--muted);
  font-size:var(--fs-sm); font-style:italic; line-height:1.4;
  margin:0;
}
.table-wrap > .table-caption{
  background:var(--surface);
  border:1px solid var(--hairline); border-bottom:0;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.table-wrap:has(> .table-caption) > table.data{
  border-top-left-radius:0; border-top-right-radius:0;
}
table.data th,table.data td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--hairline); vertical-align:top; }
table.data thead th{
  background:var(--surface-2); color:var(--gold); font-weight:700; font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:0.06em;
}
table.data tbody tr:last-child td{ border-bottom:0; }
table.data tbody tr:hover{ background:var(--surface-2); }
table.data .ok{ color:var(--success); font-weight:700; }
table.data .no{ color:var(--bad); font-weight:700; }
table.data .warn{ color:var(--warn); font-weight:700; }

/* card-stack on mobile (≤760) — label above value, full width (no skinny columns) */
@media(max-width:760px){
  table.data thead{ display:none; }
  table.data,
  table.data tbody,
  table.data tr,
  table.data td,
  table.data caption{
    display:block; width:100%; max-width:100%;
    box-sizing:border-box;
  }
  /* caption collapses to ~1ch when table is display:block — force full width */
  table.data caption{
    caption-side:top;
    padding:12px 14px;
    white-space:normal;
    line-height:1.4;
    overflow-wrap:normal;
    word-break:normal;
  }
  table.data tr{
    border-bottom:1px solid var(--hairline);
    padding:12px 14px;
    display:grid; gap:10px;
    grid-template-columns:1fr;
  }
  table.data tbody tr:last-child{ border-bottom:0; }
  table.data td{
    padding:0; border:0;
    display:flex; flex-direction:column; gap:4px;
    min-width:0; width:100%;
    overflow-wrap:anywhere; word-break:break-word;
  }
  table.data td::before{
    content:attr(data-label); color:var(--muted); font-size:var(--fs-xs);
    text-transform:uppercase; letter-spacing:0.06em; font-weight:700;
    white-space:normal; line-height:1.3;
  }
  table.data td[data-full]{ grid-column:auto; }
}

/* mobile CTA clusters — center button rows like app / hero */
@media(max-width:760px){
  .app-block__btns,
  .hero__inner > .cluster,
  .hero__copy > .cluster,
  .promo-card .cluster,
  .bonus-box .cluster,
  .legal-teaser .cluster,
  .rg-closer__links,
  [data-section] .cluster:has(> .btn){
    justify-content:center;
    text-align:center;
  }
  .app-block__btns .btn{
    min-width:min(100%, 280px);
    justify-content:center;
  }
  .hero__copy > .cluster > .btn,
  .hero__inner > .cluster > .btn{
    justify-content:center;
  }
  .app-block__btns{ flex-direction:column; align-items:center; }
  .app-block__btns .btn{ width:100%; max-width:320px; }
}

/* ---------- 23. BREADCRUMBS + AUTHOR BYLINE ---------- */
.breadcrumbs{ padding-block:var(--s0) 0; font-size:var(--fs-sm); color:var(--muted); }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.breadcrumbs li{ display:flex; align-items:center; gap:6px; }
.breadcrumbs li + li::before{ content:"/"; color:var(--muted-2); }
.breadcrumbs a{ color:var(--muted); }
.breadcrumbs a:hover{ color:var(--gold); }
.breadcrumbs [aria-current]{ color:var(--text); }

.byline{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s0) var(--s1);
  padding:var(--s1); background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md);
  font-size:var(--fs-sm); color:var(--muted);
}
.byline strong{ color:var(--text); }
.byline__dot{ width:4px; height:4px; border-radius:50%; background:var(--hairline); }
.byline__verified{ color:var(--success); display:inline-flex; align-items:center; gap:4px; }

/* ---------- 24. FOOTER ---------- */
.site-footer{
  background:var(--bg-2); border-top:1px solid var(--hairline);
  padding-block:clamp(28px,4vw,48px) var(--s2);
}
/* 8-star arc, low opacity, above responsible-gaming line */
.site-footer__stars{
  display:block; width:clamp(180px,30vw,260px); margin:0 auto var(--s2);
  opacity:.25;
}
.footer-grid{ display:grid; gap:var(--s3); grid-template-columns:1fr; }
@media(min-width:768px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .footer-grid{ grid-template-columns:2fr 1fr 1.4fr 1.4fr; } }
.footer-col h3{ font-size:0.95rem; color:var(--gold); margin-block-end:var(--s0); }
.footer-col ul li{ margin-block-end:8px; }
.footer-col a{ color:var(--muted); font-size:0.9rem; }
.footer-col a:hover{ color:var(--text); }
.footer-brand{ display:flex; flex-direction:column; gap:var(--s0); }
.footer-brand img{ width:auto; height:26px; max-width:min(183px, 42vw); }
.footer-honesty{
  font-size:var(--fs-xs); color:var(--muted-2); padding:var(--s0);
  border:1px dashed var(--hairline); border-radius:var(--r-md);
}
.footer-honesty strong{ color:var(--muted); }
.footer-badges{ display:flex; flex-wrap:wrap; gap:var(--s-1); }
.footer-badges .badge{ font-size:0.7rem; min-width:auto; height:auto; padding:6px 10px; }
.footer-bottom{
  margin-block-start:var(--s3); padding-block-start:var(--s2); border-top:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:var(--s0); font-size:var(--fs-xs); color:var(--muted-2);
}
.footer-bottom .licence{ color:var(--muted); font-size:var(--fs-sm); }
.footer-bottom .licence strong{ color:var(--text); }
@media(min-width:768px){ .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; } }

/* tricolor ribbon at the very base of the RG/footer block */
.footer-ribbon{ height:6px; background:var(--grad-tricolor); border-radius:var(--r-pill); margin-block-start:var(--s2); }

/* ---------- 25. AGE-GATE MODAL ---------- */
.age-gate{
  position:fixed; inset:0; z-index:var(--z-modal); display:flex; align-items:center; justify-content:center;
  padding:var(--s1); background:rgba(11,14,21,.94); backdrop-filter:blur(6px);
}
.age-gate[hidden]{ display:none; }
.age-gate__card{
  background:var(--bg-2); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:var(--s3); max-width:460px; width:100%; text-align:center; box-shadow:var(--shadow-pop);
  position:relative;
}
.age-gate__card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:var(--grad-tricolor); border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.age-gate__stars{ width:72px; height:36px; margin:0 auto var(--s0); }
.age-gate__title{ font-size:var(--fs-h3); margin-block-end:var(--s-1); }
.age-gate__body{ color:var(--muted); font-size:var(--fs-sm); margin-block-end:var(--s2); }
.age-gate__actions{ display:flex; gap:var(--s0); justify-content:center; flex-wrap:wrap; }
.age-gate__small{ margin-block-start:var(--s1); font-size:var(--fs-xs); color:var(--muted-2); }
.age-gate[aria-hidden="false"]{ animation:fadeIn .2s ease; }

/* ---------- 26. UTILITIES — fade-in (IO), misc animations ---------- */
[data-fade]{ opacity:1; transform:none; }
@media(prefers-reduced-motion:no-preference){
  html.js [data-fade]:not(.is-visible){
    opacity:0; transform:translateY(12px); transition:opacity .4s ease, transform .4s ease;
  }
  html.js [data-fade].is-visible{ opacity:1; transform:none; }
}

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* ---------- 27. LITE / 3G MODE (html.lite*/
/* toggled on <html> by app.js; CTAs stay intact (conversion path always open) */
html.lite .hero::before,            /* geometric texture */
html.lite .hero__stars,             /* arc glow filter (kept but no filter) */
html.lite .hero__tepui,             /* tepui silhouette */
html.lite .site-footer__stars{ /* footer arc */
  filter:none;
}
html.lite .hero__tepui{ display:none; }
html.lite .hero__stars{ filter:none; opacity:.85; }
html.lite .hero__stars .ve-star-use{ opacity:1; animation:none; }
html.lite .site-header{ background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; }
html.lite .game-card__cover img,
html.lite .logo-tile img,
html.lite .pay-tile img,
html.lite .banner img{ display:none; }
html.lite .game-card__cover{ background:linear-gradient(135deg,var(--surface),var(--surface-2)); }
html.lite [data-fade]{ opacity:1; transform:none; transition:none; }
/* kill non-essential transitions/animations in lite (CTA transitions preserved via :not) */
html.lite *:not(.btn):not(.btn *){
  animation-duration:0.01ms!important;
  transition-duration:0.01ms!important;
}

/* ---------- 28. REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
  html{ scroll-behavior:auto; }
  .hero__stars .ve-star-use{ opacity:1; animation:none; }
  [data-fade]{ opacity:1; transform:none; }
}

/* ---------- 29. PRINT ---------- */
@media print{
  .site-header,.site-footer,.age-gate,.nav-toggle,.btn,.carousel__controls,
  .hero__stars,.hero__tepui,.site-footer__stars{ display:none!important; }
  body{ background:#fff; color:#000; }
  a{ color:#000; text-decoration:underline; }
}

.trust-badge img,.badge img{ max-height:56px; width:auto; height:auto; object-fit:contain; margin-inline:auto; }
.compare-note{ margin-block-start:var(--s0); }