:root{
  --indigo:#1A1745; --indigo2:#0F0D29; --gold:#FFB300; --mint:#00C49A; --silver:#D9DAE3; --white:#ffffff;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color:var(--white);
  background: radial-gradient(ellipse at top left, var(--indigo) 0%, var(--indigo2) 55%); overflow-x:hidden;}
/* Background collage layers */
.bg-collage{position:fixed; inset:0; z-index:-2; overflow:hidden}
.bg-collage .bg-layer{position:absolute; will-change:transform, opacity; filter:saturate(1.1) contrast(1.05)}
.bg-collage .casino{left:-10%; top:-10%; width:120%; height:auto; opacity:.22; transform:rotate(-2deg) scale(1.05);}
.bg-collage .kiosk{right:-6%; bottom:-4%; width:50%; height:auto; opacity:.28; filter:blur(0.3px) saturate(1.15); transform:rotate(2deg);}
.bg-collage .bg-overlay{position:absolute; inset:0; background:radial-gradient(1200px 600px at 15% 10%, rgba(0,0,0,.35), rgba(0,0,0,.65)); z-index:1}
.bg-collage .bg-gradient{position:absolute; inset:0; background: radial-gradient(ellipse at top left, rgba(26,23,69,.8) 0%, rgba(15,13,41,.92) 60%);
  mix-blend-mode:multiply; z-index:2}
/* Page layout */
.page{min-height:100dvh; display:flex; flex-direction:column}
.topbar{max-width:1100px; width:100%; margin:0 auto; padding:16px 20px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px}
.brand-name{font-weight:900; font-size:22px} .brand-tag{color:var(--silver); font-size:12px}
.nav{display:flex; gap:10px}
/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:700; letter-spacing:.2px; backdrop-filter:blur(2px)}
.btn.primary{background:var(--gold); color:var(--indigo)} .btn.ghost{background:transparent; color:var(--silver)}
.btn.outline{background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.25)} .btn.small{padding:8px 12px; font-size:13px}
/* Hero */
.hero{max-width:1100px; width:100%; margin:0 auto; padding:10px 20px 24px; display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width:960px){ .hero{ grid-template-columns:3fr 2fr } }
.hero-left h1{font-weight:900; font-size:34px; line-height:1.15; margin:6px 0; text-shadow:0 6px 24px rgba(0,0,0,.4)}
@media (min-width:960px){ .hero-left h1{ font-size:44px } }
.accent{color:var(--gold)} .sub{color:var(--silver); max-width:640px; margin-top:10px; font-size:15px; text-shadow:0 3px 12px rgba(0,0,0,.3)}
.cta-row{display:flex; gap:10px; margin-top:16px}
.kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px}
.kpi-card{border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); padding:12px; border-radius:14px; text-align:center; backdrop-filter: blur(6px)}
.kpi-num{font-weight:900; font-size:22px} .kpi-label{color:var(--silver); font-size:12px}
/* Right column */
.hero-right{display:flex; flex-direction:column; gap:12px}
.card{border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); border-radius:14px; padding:14px; backdrop-filter: blur(6px)}
.card-title{color:var(--silver); font-size:13px; font-weight:700; margin-bottom:8px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.mini{background: rgba(0,0,0,.25); border-radius:10px; padding:10px} .mini-label{color:var(--silver); font-size:12px} .mini-num{font-weight:800; font-size:22px}
.banner{margin-top:10px; background: linear-gradient(90deg, rgba(255,179,0,.28), rgba(0,196,154,.24)); border-radius:10px; padding:10px; font-size:14px}
.strong{font-weight:800; color:#fff}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.howto{margin:0; padding-left:20px; color:var(--silver); font-size:14px} .howto li{margin:6px 0}
.muted{color:var(--silver)}
/* Tiles */
.tiles{max-width:1100px; width:100%; margin:0 auto; padding:10px 20px 60px; display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:960px){ .tiles{ grid-template-columns:repeat(3,1fr) } }
.tile{border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); border-radius:14px; padding:16px; backdrop-filter: blur(6px)}
.tile-title{font-weight:800; font-size:18px; margin-bottom:6px}
/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.35)}
.foot-inner{max-width:1100px; width:100%; margin:0 auto; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.foot-actions{display:flex; gap:8px}
/* Focus */
.btn:focus, a:focus{ outline:2px solid var(--gold); outline-offset:2px }