/* Quantum Star Games — minimal, modern landing styles */
:root{
  --bg: #0e0f13;
  --muted: #11131a;
  --text: #e8ecf2;
  --sub: #b9c2d0;
  --primary: #7be4ff;
  --accent: #c77dff;
  --card: #151926;
  --border: rgba(255,255,255,0.08);
}
:root.light{
  --bg: #f6f9ff;
  --muted: #eef2fa;
  --text: #12141a;
  --sub: #47536b;
  --primary: #0066ff;
  --accent: #7b61ff;
  --card: #ffffff;
  --border: rgba(0,0,0,0.08);
}
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; }
a{ color: var(--primary); text-decoration: none }
.container{ width:min(1120px, 92vw); margin:0 auto; }
.grad{ background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent }
.section{ padding: 80px 0 }
.section.muted{ background: var(--muted) }
.section-title{ font-size: clamp(24px, 3vw, 32px); margin:0 0 24px 0 }
.btn{ display:inline-block; padding: 12px 18px; border-radius: 12px; border:1px solid var(--border); color:var(--text) }
.btn.primary{ background: linear-gradient(90deg, var(--primary), var(--accent)); color:#0b0b0e; font-weight:700; border:none }
.btn.ghost{ background: transparent }
.note{ opacity:.75; margin-top: 16px }

.site-header{ position: sticky; top:0; backdrop-filter: blur(8px); background: rgba(10,10,14,.6); border-bottom:1px solid var(--border); z-index: 50 }
.nav{ display:flex; align-items:center; justify-content: space-between; padding: 12px 0 }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text) }
.brand img{ width:28px; height:28px }
.site-header nav{ display:flex; align-items:center; gap:18px }
.mode-toggle{ border:1px solid var(--border); background:var(--muted); color:var(--text); padding:8px 10px; border-radius:10px; cursor:pointer }

.hero{ position:relative; overflow: clip; background: radial-gradient(1000px 520px at 20% -20%, rgba(199,125,255,.35), transparent), radial-gradient(820px 380px at 100% 0%, rgba(123,228,255,.3), transparent) }
.hero-inner{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; padding: 64px 0 }
.hero-copy h1{ font-size:clamp(32px, 6vw, 60px); margin:0 0 10px 0 }
.hero-copy p{ color: var(--sub); font-size: 18px; max-width: 52ch }
.cta{ display:flex; gap:12px; margin-top:20px }
.hero-art{ position:relative; min-height: 240px }
.orb{ position:absolute; width:200px; height:200px; border-radius:999px; filter: blur(24px); opacity: .55 }
.orb-a{ background: var(--accent); right: 8%; top: 14% }
.orb-b{ background: var(--primary); right: 24%; bottom: 5% }
.orb-c{ background: #ffb86b; right: -2%; top: 36% }

.grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
.card{ background: var(--card); border:1px solid var(--border); padding:16px; border-radius:16px; box-shadow: 0 6px 24px rgba(0,0,0,.18) }
.card h3{ margin:0 0 6px 0 }
.card p{ margin:0 0 16px 0; color:var(--sub) }
.pill{ display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; background: rgba(32,42,64,.6); color:#dff6ff; margin-bottom:10px }
.stores{ display:flex; gap:10px; flex-wrap:wrap }
.store-btn{ padding:8px 10px; border:1px dashed var(--border); border-radius:10px }
.features{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; list-style:none; padding:0; margin:0 }
.contact-card{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; background: var(--card); border:1px solid var(--border); padding:16px; border-radius:16px }
.site-footer{ border-top:1px solid var(--border); padding:18px 0; background: rgba(0,0,0,.06) }
.foot{ display:flex; align-items:center; justify-content: space-between }

/* Responsive */
@media (max-width: 960px){
  .hero-inner{ grid-template-columns: 1fr }
  .grid{ grid-template-columns: repeat(2, 1fr) }
  .features{ grid-template-columns: repeat(2, 1fr) }
  .contact-card{ grid-template-columns: 1fr }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr }
}