*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#050816;color:#fff;min-height:100vh}
.navbar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:20px 40px;background:rgba(20,20,30,.7);backdrop-filter:blur(15px)}
.logo{font-size:28px;font-weight:bold;color:#38bdf8}
.nav-links a{color:white;text-decoration:none;margin-left:20px;transition:.3s}
.nav-links a:hover{color:#38bdf8}
.hero{height:90vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.hero h1{font-size:5rem;background:linear-gradient(90deg,#38bdf8,#8b5cf6);-webkit-background-clip:text;color:transparent}
.hero p{font-size:1.4rem;margin:20px}
.btn{padding:15px 30px;border-radius:15px;background:rgba(255,255,255,.08);color:white;text-decoration:none;margin:10px;display:inline-block;transition:.3s}
.btn:hover,.card:hover{transform:translateY(-8px);box-shadow:0 0 25px #38bdf8}
.primary{background:linear-gradient(90deg,#38bdf8,#8b5cf6)}
.page{padding:60px;max-width:1200px;margin:auto}
.page h1{text-align:center;margin-bottom:30px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{padding:30px;border-radius:20px;background:rgba(255,255,255,.05);backdrop-filter:blur(10px);transition:.3s;text-align:center}
.center{text-align:center}