*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Poppins,sans-serif;background:#070913;color:#fff;overflow-x:hidden}
.bg{position:fixed;inset:0;background:
radial-gradient(circle at 20% 20%,#6f3cff55,transparent 30%),
radial-gradient(circle at 80% 30%,#1b7cff33,transparent 25%),
linear-gradient(180deg,#070913,#11142b);z-index:-1}
header{display:flex;justify-content:space-between;align-items:center;padding:24px 8%;position:sticky;top:0;background:#0b0e1acc;backdrop-filter:blur(12px);border-bottom:1px solid #ffffff10}
.logo{font-weight:800;font-size:1.5rem}
nav a{text-decoration:none;color:#fff;margin-left:24px;transition:.3s}
nav a:hover{color:#9b7dff}
.play,.btn{background:linear-gradient(90deg,#7c4dff,#5d9cff);padding:14px 28px;border-radius:999px;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 0 25px #7c4dff66}
.hero{min-height:100vh;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;padding:0 8%}
.badge{display:inline-block;padding:8px 16px;background:#ffffff14;border:1px solid #ffffff22;border-radius:999px;margin-bottom:20px}
h1{font-size:4.5rem;line-height:1}
h1 span{background:linear-gradient(90deg,#9b7dff,#68b8ff);-webkit-background-clip:text;color:transparent}
.hero p{max-width:560px;color:#cfd5ff;margin:25px 0;font-size:1.1rem}
.buttons{display:flex;gap:18px}
.ghost{background:transparent;border:2px solid #7c4dff}
.stats{display:flex;gap:40px;margin-top:50px}
.stats strong{display:block;font-size:2rem}
.hero-art{display:flex;justify-content:center;align-items:center;position:relative}
.orb{width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,#8d5bff,#1d2150);filter:blur(20px);animation:pulse 4s infinite}
.controller{position:absolute;font-size:220px;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 0 40px #7c4dff)}
section{padding:100px 8%}
h2{text-align:center;font-size:3rem;margin-bottom:50px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.card{padding:40px;background:#14192e;border:1px solid #ffffff18;border-radius:24px;transition:.35s}
.card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 20px 40px #0008}
.cta{text-align:center;background:#0f1225}
footer{text-align:center;padding:30px;background:#05070f;color:#9ea4bf}
@keyframes float{50%{transform:translateY(-20px) rotate(-4deg)}}
@keyframes pulse{50%{transform:scale(1.08)}}
@media(max-width:900px){
.hero{grid-template-columns:1fr;text-align:center;padding-top:60px}
.buttons,.stats{justify-content:center;flex-wrap:wrap}
header{flex-direction:column;gap:20px}
nav{display:flex;flex-wrap:wrap;justify-content:center}
h1{font-size:3rem}
}