*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Poppins,sans-serif;background:#050816;color:#fff}
.bg{position:fixed;inset:0;background:
radial-gradient(circle at top,#6d28d9 0%,transparent 30%);z-index:-1}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 5%;backdrop-filter:blur(12px);position:sticky;top:0}
.logo{display:flex;align-items:center;gap:10px;font-weight:700}
.cs{width:42px;height:42px;border-radius:50%;background:#7c3aed;display:flex;align-items:center;justify-content:center}
nav a{color:white;text-decoration:none;margin:0 10px}
.hero{text-align:center;padding:140px 20px}
.hero h1{font-size:3rem}
.btn{display:inline-block;margin-top:20px;padding:12px 24px;background:#7c3aed;color:#fff;text-decoration:none;border-radius:10px}
.glass,.card{background:rgba(255,255,255,.05);backdrop-filter:blur(10px)}
section{padding:80px 8%}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
.card{padding:20px;border-radius:14px;transition:.3s}
.card:hover{transform:translateY(-5px)}
.glass{padding:30px;border-radius:16px}
footer{text-align:center;padding:30px}
@media(max-width:768px){
header{flex-direction:column;gap:10px}
.hero h1{font-size:2.2rem}
}