:root{
  --bg: #0a0f17;
  --bg-2:#0e1320;
  --gold:#f5d269;
  --gold-2:#caa64a;
  --red:#ef4444;
  --green:#22c55e;
  --blue:#3b82f6;
  --text:#eaf2ff;
  --muted:#9db1df;
  --card:#111a2e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Arial}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Navbar */
.navbar{position:sticky;top:0;z-index:60;background:rgba(10,15,23,.6);backdrop-filter:blur(10px);border-bottom:1px solid #1d2a49}
.navbar .inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;gap:10px;align-items:center}
.brand .name{font-weight:800;letter-spacing:.3px}
.badge{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1e1e1e;padding:2px 10px;border-radius:999px;font-size:12px}

/* Hamburger */
.hamb{width:42px;height:42px;border-radius:12px;border:1px solid #223157;background:#10192f;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hamb span{width:18px;height:2px;background:#e5e7eb;position:relative;display:block}
.hamb span::before,.hamb span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#e5e7eb}
.hamb span::before{top:-6px}.hamb span::after{top:6px}
.drawer{position:fixed;inset:0 0 0 auto;width:78%;max-width:360px;background:#0b1226;border-left:1px solid #20315c;transform:translateX(100%);transition:.25s;z-index:70;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer .head{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid #1e2c52}
.drawer a{padding:14px;border-bottom:1px solid #132142;color:#cbd8ff}
.drawer a:hover{background:#121c37}

/* Hero Slider */
.hero{position:relative;overflow:hidden;background:#0d1427}
.slides{position:relative;height:56vw;max-height:520px}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.slide.active{opacity:1}
.slide .bg{position:absolute;inset:0;background-position:center;background-size:cover;filter:saturate(1.1) contrast(1.1)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55))}
.slide .content{position:absolute;left:16px;right:16px;bottom:22px}
.h1{font-size:34px;font-weight:900;letter-spacing:.3px;text-shadow:0 6px 24px rgba(0,0,0,.45)}
.cta{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.btn{padding:12px 18px;border-radius:12px;border:0;font-weight:800;cursor:pointer}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1a1a;box-shadow:0 8px 24px rgba(250,204,21,.25)}
.btn-red{background:linear-gradient(135deg,#fb7185,var(--red))}
.btn-green{background:linear-gradient(135deg,#34d399,var(--green))}

/* Stats strip */
.stats{background:linear-gradient(90deg,rgba(250,204,21,.08),rgba(34,197,94,.08),rgba(239,68,68,.08));border-top:1px solid #22315a;border-bottom:1px solid #22315a}
.stats .row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px}
.card{background:linear-gradient(180deg,#101831,#0b1327);border:1px solid #20315a;border-radius:18px;padding:16px}
.card .title{font-size:14px;color:var(--muted)}
.card .value{font-size:22px;font-weight:900}
.badge-mini{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#132042;border:1px solid #26386c}

/* Sections */
.section{padding:36px 0}
.section h2{margin:0 0 10px;font-size:28px}
.sub{color:var(--muted);margin-bottom:16px}

/* Games grid */
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(min-width:880px){.grid-3{grid-template-columns:repeat(4,1fr)}}
.card-game{position:relative;overflow:hidden;border-radius:16px;border:1px solid #22315c}
.card-game .thumb{height:140px;background-position:center;background-size:cover;filter:saturate(1.1)}
.card-game .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.65))}
.card-game .label{position:absolute;left:10px;bottom:10px;font-weight:800}
.card-game:hover{box-shadow:0 20px 50px rgba(250,204,21,.1)}

/* Contact & payments */
.feature{display:flex;gap:10px;align-items:flex-start}
.icon{width:56px;height:56px;border-radius:14px;background:#0f1832;border:1px solid #20315a;display:flex;align-items:center;justify-content:center}
.icon img{max-width:36px}

/* Footer */
.footer{padding:24px 0;border-top:1px solid #20315a;color:#a8bbef}

/* Floating WhatsApp */
.floating-wa{position:fixed;right:14px;bottom:14px;z-index:90}
.floating-wa a{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#22c55e,#16a34a);padding:12px 16px;border-radius:999px;color:#fff;font-weight:900;box-shadow:0 12px 28px rgba(22,163,74,.35)}
.input,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #22315c;background:#0f1730;color:#e6f0ff}
.form{display:grid;gap:12px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #1c2a50;padding:10px 8px;text-align:left}

/* Utility */
.pill{display:inline-block;border:1px dashed #37549b;border-radius:999px;padding:6px 10px;color:#b3c6ff;font-size:12px}