*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,sans-serif;background:#050816;color:#fff}
.bg{position:fixed;inset:0;background:radial-gradient(circle at top right,#00b7ff55,transparent 25%),radial-gradient(circle at bottom left,#0047ff55,transparent 25%);z-index:-1}
nav{display:flex;justify-content:space-between;padding:20px 40px}
.brand{font-size:30px;font-weight:800}.brand span{color:#00B7FF}
.hero{text-align:center;padding:120px 20px}
.hero h1{font-size:64px;margin:0}.hero p{font-size:22px;color:#cfd8ff}
.btn{background:#00B7FF;color:#000;padding:14px 22px;border-radius:30px;text-decoration:none;font-weight:bold}
.secondary{background:#14213d;color:#fff}
.hero-buttons{display:flex;gap:15px;justify-content:center;margin-top:25px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:40px}
.card{background:rgba(255,255,255,.05);border:1px solid #00B7FF44;border-radius:20px;padding:30px;text-align:center}
.formbox{max-width:600px;margin:40px auto;padding:30px;background:rgba(255,255,255,.05);border-radius:20px}
input,select,button{width:100%;padding:14px;margin:8px 0;border-radius:10px;border:none}
button{background:#00B7FF;font-weight:bold}
footer{text-align:center;padding:30px;color:#9bbcff}
@media(max-width:768px){.cards{grid-template-columns:1fr 1fr}.hero h1{font-size:42px}nav{padding:20px}}