/* Boomzino — licensed casino landing page */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  --bg: #0a0a14;
  --bg-2: #10101f;
  --panel: #161628;
  --panel-2: #1c1c33;
  --line: rgba(255,255,255,0.08);
  --text: #f2f2f7;
  --muted: #a1a1b5;
  --gold: #f4c96b;
  --gold-2: #d9a441;
  --violet: #8b5cff;
  --cyan: #4be1ff;
  --danger: #ff5a5f;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
  --grad-gold: linear-gradient(135deg, #f7d67a, #c98b2a);
  --grad-neon: linear-gradient(135deg, #8b5cff, #4be1ff);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(139,92,255,0.18), transparent 60%),
    radial-gradient(900px 600px at -10% 10%, rgba(75,225,255,0.12), transparent 60%),
    var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

h1,h2,h3,h4 { font-family: "Segoe UI", system-ui, sans-serif; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0; color: var(--muted); }

.grad { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--gold); font-weight: 700; margin-bottom: 10px; }
.eyebrow--light { color: var(--cyan); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.section-sub { color: var(--muted); margin-top: 10px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px; font-weight: 700; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-size: 0.95rem; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; }
.btn--sm { padding: 8px 14px; font-size: 0.85rem; }
.btn--lg { padding: 14px 22px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--primary { color: #1a1204; background: var(--grad-gold); box-shadow: 0 10px 30px -10px rgba(244,201,107,.55), inset 0 1px 0 rgba(255,255,255,.35); position: relative; }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -10px rgba(244,201,107,.7); }
.btn--primary::after { content:""; position:absolute; inset:0; border-radius: inherit; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 3.5s linear infinite; mix-blend-mode: overlay; pointer-events:none; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.btn--ghost { color: var(--text); background: transparent; border-color: var(--line); }
.btn--ghost:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.03); }
.btn--outline { color: var(--text); background: rgba(255,255,255,.04); border-color: var(--line); }
.btn--outline:hover { border-color: var(--gold); color: var(--gold); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(10,10,20,.7); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.nav__links { display: none; gap: 22px; }
.nav__links a { color: var(--muted); text-decoration: none; font-size: 0.92rem; }
.nav__links a:hover { color: var(--text); }
@media (min-width: 820px) { .nav__links { display: flex; } }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 800; }
.brand__mark { width: 26px; height: 26px; border-radius: 8px; background: var(--grad-neon); box-shadow: 0 0 20px rgba(139,92,255,.6); position: relative; }
.brand__mark::after { content:"B"; position:absolute; inset:0; display:grid; place-items:center; font-weight:900; color:#0a0a14; }
.brand__word { font-size: 1.15rem; letter-spacing: -0.01em; }
.age-badge { display: inline-block; font-size: 0.68rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(255,90,95,.12); color: #ffb0b3; border: 1px solid rgba(255,90,95,.35); margin-left: 8px; }

/* Hero */
.hero { padding: 56px 0 40px; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1.15fr 1fr; gap: 60px; } }
.hero__copy .lede { font-size: 1.05rem; margin-top: 14px; max-width: 56ch; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.trust-line { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--muted); font-size: 0.85rem; }
.trust-line li { position: relative; padding-left: 18px; }
.trust-line li::before { content:"✓"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }

/* Reels visual */
.hero__visual { position: relative; }
.reels { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px; border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.reels::before { content:""; position: absolute; inset: 0; background: radial-gradient(400px 200px at 50% 100%, rgba(75,225,255,.18), transparent 60%); pointer-events: none; }
.reel { height: 220px; background: #0b0b18; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); position: relative; }
.reel__strip { display: flex; flex-direction: column; animation: spin 4.5s linear infinite; }
.reel:nth-child(2) .reel__strip { animation-duration: 5.5s; }
.reel:nth-child(3) .reel__strip { animation-duration: 6.5s; }
.reel__strip span { flex: none; height: 74px; display: grid; place-items: center; font-size: 2.4rem; color: var(--gold); text-shadow: 0 0 24px rgba(244,201,107,.5); }
.reel__strip span:nth-child(2n) { color: var(--cyan); text-shadow: 0 0 24px rgba(75,225,255,.6); }
.reel__strip span:nth-child(3n) { color: var(--violet); text-shadow: 0 0 24px rgba(139,92,255,.6); }
@keyframes spin { 0% { transform: translateY(0); } 100% { transform: translateY(-296px); } }
.reels__glow { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px rgba(0,0,0,.9); border-radius: inherit; }

/* Licensing */
.licensing { padding: 20px 0 40px; }
.licensing__card { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); }
.licensing__head h2 { margin-bottom: 6px; }
.licensing__head p { color: var(--muted); max-width: 78ch; }
.licensing__badges { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 820px) { .licensing__badges { grid-template-columns: repeat(4, 1fr); } }
.lic-badge { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.02); }
.lic-badge__logo { width: 44px; height: 44px; flex: none; border-radius: 10px; display: grid; place-items: center; font-weight: 900; font-size: 0.8rem; background: var(--grad-neon); color: #0a0a14; }
.lic-badge strong { display: block; font-size: 0.95rem; }
.lic-badge small { color: var(--muted); font-size: 0.78rem; }

/* Slots */
.slots { padding: 60px 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.chip:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.chip.is-active { color: #1a1204; background: var(--grad-gold); border-color: transparent; }

.grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.tile { position: relative; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; }
.tile:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.18); box-shadow: 0 20px 40px -18px rgba(0,0,0,.7); }
.tile__thumb { position: relative; aspect-ratio: 16/10; display: grid; place-items: center; overflow: hidden; background: #0d0d1c; }
.tile__thumb .placeholder { position: relative; z-index: 2; font-size: 0.75rem; color: rgba(255,255,255,.55); border: 1px dashed rgba(255,255,255,.2); padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.35); text-align: center; }
.tile__accent { position: absolute; inset: 0; z-index: 1; opacity: .9; transition: opacity .3s; }
.tile:hover .tile__accent { opacity: 1; }
.tile__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.tile__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tile__tag { font-size: 0.82rem; color: var(--muted); min-height: 2.4em; }
.pill { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line); }
.tile__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 6px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tile__meta div { display: flex; flex-direction: column; }
.tile__meta dt { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.tile__meta dd { margin: 0; font-weight: 700; font-size: 0.9rem; }

/* Tile themes — original styling, no provider artwork */
.theme-space  .tile__accent { background:
  radial-gradient(2px 2px at 20% 30%, #fff, transparent 60%),
  radial-gradient(1.5px 1.5px at 70% 20%, #b6e6ff, transparent 60%),
  radial-gradient(2px 2px at 40% 70%, #ffd0f5, transparent 60%),
  radial-gradient(2px 2px at 85% 65%, #a0f2ff, transparent 60%),
  radial-gradient(circle at 60% 40%, rgba(139,92,255,.35), transparent 55%),
  linear-gradient(160deg, #0a1230, #14043a); }

.theme-candy .tile__accent { background:
  radial-gradient(circle at 30% 30%, #ff9ecb 0 8%, transparent 9%),
  radial-gradient(circle at 70% 60%, #ffd36e 0 6%, transparent 7%),
  radial-gradient(circle at 20% 75%, #a08bff 0 7%, transparent 8%),
  radial-gradient(circle at 80% 25%, #7cf0d1 0 5%, transparent 6%),
  linear-gradient(160deg, #ffd6ee, #c9b5ff); }

.theme-olympus .tile__accent { background:
  linear-gradient(180deg, transparent 55%, rgba(255,255,255,.15) 55% 58%, transparent 58%),
  linear-gradient(180deg, transparent 65%, rgba(255,255,255,.1) 65% 68%, transparent 68%),
  radial-gradient(circle at 50% 20%, rgba(244,201,107,.5), transparent 55%),
  linear-gradient(160deg, #0d2247, #2a1a52); }
.theme-olympus .tile__accent::after { content:""; position:absolute; inset:0; background:
  linear-gradient(90deg, transparent 22%, rgba(255,255,255,.25) 22% 26%, transparent 26% 46%, rgba(255,255,255,.25) 46% 50%, transparent 50% 70%, rgba(255,255,255,.25) 70% 74%, transparent 74%);
  mix-blend-mode: soft-light; }

.theme-coin .tile__accent { background:
  radial-gradient(circle at 25% 35%, #ffd76a 0 10%, #b8801f 11% 12%, transparent 13%),
  radial-gradient(circle at 65% 60%, #ffd76a 0 7%, #b8801f 8% 9%, transparent 10%),
  radial-gradient(circle at 80% 25%, #ffd76a 0 5%, #b8801f 6% 7%, transparent 8%),
  linear-gradient(160deg, #1a0d33, #08141f); }
.theme-coin .tile__accent::before { content:""; position:absolute; inset:0; background:
  linear-gradient(115deg, transparent 40%, rgba(75,225,255,.55) 41% 43%, transparent 44% 55%, rgba(139,92,255,.55) 56% 58%, transparent 59%); }

.theme-egypt .tile__accent { background:
  radial-gradient(circle at 50% 65%, rgba(255,170,60,.55), transparent 55%),
  linear-gradient(160deg, #c98b2a, #6a3d0e);
  position: absolute; }
.theme-egypt .tile__accent::after { content:"☥  𓂀  𓃭  𓆣  ☥"; position:absolute; inset:0; display:grid; place-items:center; font-size: 2rem; color: rgba(0,0,0,.35); letter-spacing: 0.4em; }

.theme-serpent .tile__accent { background:
  repeating-linear-gradient(45deg, rgba(244,201,107,.25) 0 6px, transparent 6px 14px),
  radial-gradient(circle at 60% 50%, rgba(244,201,107,.35), transparent 55%),
  linear-gradient(160deg, #0f3a2b, #06231a); }
.theme-serpent .tile__accent::after { content:""; position:absolute; left:10%; top:20%; width:80%; height:60%; border: 3px solid rgba(244,201,107,.55); border-radius: 50%; box-shadow: inset 0 0 0 8px transparent, 0 0 30px rgba(0,0,0,.4); transform: rotate(-8deg); }

.theme-forge .tile__accent { background:
  radial-gradient(circle at 30% 80%, rgba(255,120,40,.75), transparent 55%),
  radial-gradient(circle at 75% 25%, rgba(220,240,255,.7), transparent 45%),
  linear-gradient(160deg, #1a0a05, #05121e); }
.theme-forge .tile__accent::after { content:""; position:absolute; left:55%; top:20%; width:28%; height:28%; background: linear-gradient(135deg, #fff, #cfe9ff); clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); filter: drop-shadow(0 0 12px rgba(200,230,255,.7)); }

.disclaimer { margin-top: 22px; text-align: center; font-size: 0.78rem; color: var(--muted); }

/* Why */
.why { padding: 60px 0; }
.why__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why__grid { grid-template-columns: repeat(4, 1fr); } }
.feature { padding: 20px; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: var(--radius); }
.feature__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(244,201,107,.12); color: var(--gold); font-size: 1.2rem; margin-bottom: 12px; }
.feature h3 { margin-bottom: 4px; }
.feature p { font-size: 0.9rem; }

/* How */
.how { padding: 40px 0 60px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 14px; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { position: relative; padding: 22px; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: var(--radius); }
.steps__n { position: absolute; top: -14px; left: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--grad-gold); color: #1a1204; display: grid; place-items: center; font-weight: 900; font-size: 0.9rem; }
.steps h3 { margin: 4px 0 6px; }
.steps p { font-size: 0.9rem; }

/* Trust row */
.trust { padding: 30px 0 60px; }
.trust__row { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .trust__row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .trust__row { grid-template-columns: repeat(6, 1fr); } }
.trust__row li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.02); font-size: 0.88rem; color: var(--text); }
.tb { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--grad-neon); color: #0a0a14; font-weight: 900; font-size: 0.7rem; flex: none; }

/* FAQ */
.faq { padding: 40px 0 60px; }
.acc { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.acc details { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.acc summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content:"+"; color: var(--gold); font-size: 1.3rem; font-weight: 700; transition: transform .2s; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc p { margin-top: 10px; color: var(--muted); font-size: 0.92rem; }

/* RG band */
.rg { padding: 40px 0; background: linear-gradient(180deg, rgba(75,225,255,.06), rgba(139,92,255,.06)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rg__inner { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
@media (min-width: 900px) { .rg__inner { grid-template-columns: 1fr 1.2fr; } }
.rg__tools { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rg__tools li { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.15); }
.rg__tools strong { display: block; margin-bottom: 4px; }
.rg__tools span { color: var(--muted); font-size: 0.85rem; }

/* Final */
.final { padding: 70px 0; text-align: center; }
.final__inner { max-width: 640px; margin: 0 auto; display: grid; gap: 14px; justify-items: center; }

/* Footer */
.foot { padding: 40px 0 120px; border-top: 1px solid var(--line); background: #06060f; }
@media (min-width: 700px) { .foot { padding-bottom: 40px; } }
.foot__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 820px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1.2fr 1.4fr; } }
.foot h4 { font-size: 0.9rem; margin-bottom: 10px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); }
.foot__small { color: var(--muted); font-size: 0.8rem; margin-top: 6px; }

/* Sticky mobile CTA */
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: block; }
.sticky-cta .btn { box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); }
@media (min-width: 700px) { .sticky-cta { display: none; } }

/* Age gate */
.age-gate { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(4,4,10,.85); backdrop-filter: blur(8px); padding: 20px; }
.age-gate.is-open { display: flex; }
.age-gate__card { max-width: 460px; width: 100%; padding: 28px; text-align: center; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.age-gate__badge { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255,90,95,.15); color: #ffb0b3; border: 1px solid rgba(255,90,95,.35); font-weight: 800; margin-bottom: 14px; }
.age-gate h2 { margin-bottom: 10px; }
.age-gate p { color: var(--muted); }
.age-gate__actions { margin-top: 18px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.age-gate__fine { margin-top: 14px; font-size: 0.75rem; color: var(--muted); }

/* Hide primary CTAs until age-verified */
body:not(.age-verified) .cta { pointer-events: none; opacity: .45; filter: grayscale(0.3); }

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
  .reel__strip, .btn--primary::after { animation: none !important; }
}