:root{--bg:#070B14;--card:#0F172A;--cyan:#00D4FF;--purple:#7C3AED;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,sans-serif;background:var(--bg);color:white}
#bg{position:fixed;inset:0;z-index:-1}
#loader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000;z-index:999}
nav{position:sticky;top:0;padding:18px;display:flex;justify-content:center;gap:20px;background:rgba(7,11,20,.8);backdrop-filter:blur(10px)}
nav a{color:var(--cyan);text-decoration:none}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px}
.hero h1{font-size:5rem;margin:0;background:linear-gradient(90deg,var(--cyan),var(--purple));-webkit-background-clip:text;color:transparent}
.btn{padding:12px 20px;border:1px solid var(--cyan);color:white;text-decoration:none;border-radius:10px}
.glass{max-width:1100px;margin:30px auto;padding:30px;background:rgba(255,255,255,.05);backdrop-filter:blur(16px);border-radius:24px}
.grid,.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px}
.grid div,.card{padding:18px;background:rgba(255,255,255,.04);border-radius:14px}