body{margin:0;font-family:system-ui;background:#0f0716;color:#f5f3ff}
.container{max-width:1100px;margin:auto;padding:40px}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.card{background:#1b0b2a;border-radius:24px;padding:28px}
h1{font-size:52px;margin:0}
.btn{display:inline-block;margin-top:20px;padding:14px 20px;border-radius:14px;
background:linear-gradient(135deg,#8b5cf6,#22d3ee);color:#0b0612;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mascot{width:100%;max-width:280px;margin:auto;display:block}
.screens{display:flex;gap:20px;overflow:auto}
footer{border-top:1px solid #2b1242;padding:24px;text-align:center}
@media(max-width:900px){.hero,.grid{grid-template-columns:1fr}}