*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#0b0620;color:#eee;line-height:1.6}
a{color:#ff4fd8}header{display:flex;align-items:center;justify-content:space-between;padding:14px 5vw;background:#120a33;border-bottom:2px solid #ff4fd8;flex-wrap:wrap;gap:10px}
header img{height:44px;border-radius:50%;vertical-align:middle}header .brand{font-weight:800;font-size:1.3rem;color:#fff;text-decoration:none}
nav a{margin-left:18px;color:#7ef9ff;text-decoration:none;font-weight:600}nav a:hover{color:#ff4fd8}
.hero{background:linear-gradient(rgba(11,6,32,.55),#0b0620),url(banner.png) center/cover;padding:110px 5vw 90px;text-align:center}
.hero h1{font-size:clamp(2rem,6vw,3.6rem);margin:0 0 14px;background:linear-gradient(90deg,#ff4fd8,#7ef9ff);-webkit-background-clip:text;color:transparent}
.hero p{max-width:680px;margin:0 auto 26px;font-size:1.15rem}.btn{display:inline-block;padding:12px 26px;border-radius:30px;background:#ff4fd8;color:#0b0620;font-weight:800;text-decoration:none;margin:6px}
.btn.alt{background:transparent;border:2px solid #7ef9ff;color:#7ef9ff}main section{padding:60px 5vw;max-width:1100px;margin:auto}
h2{color:#7ef9ff;font-size:1.9rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:#1a0f45;border:1px solid #3b2a80;border-radius:14px;padding:22px}.card h3{margin-top:0;color:#ff4fd8}
footer{text-align:center;padding:30px;color:#999;border-top:1px solid #3b2a80}