:root{--bg: #0f172a;--card: #1e293b;--text: #e5e7eb;--muted: #94a3b8;--primary: #38bdf8}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}.container{max-width:1100px;margin:auto;padding:2rem}section{padding:4rem 0}h1,h2,h3{font-weight:600}p{color:var(--muted)}.nav{background:#0f172ae6;position:sticky;top:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.nav-inner{display:flex;justify-content:space-between;align-items:center}.logo{color:var(--primary)}.nav-links{display:flex;gap:1.5rem}.nav-links a{color:var(--muted)}.nav-links a.active{color:var(--primary)}.hero{min-height:80vh;display:flex;align-items:center}.hero h1{font-size:3rem}.hero span{color:var(--primary)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}.card{background:var(--card);padding:1.5rem;border-radius:12px;transition:transform .2s}.card:hover{transform:translateY(-4px)}.card a{display:inline-block;margin-top:1rem;color:var(--primary)}h3{color:#94a3b8}.icon{color:#333;transition:.3s}.icon:hover{color:#ecb601}@media(max-width:768px){.hero h1{font-size:2.2rem}.nav-links{gap:1rem}}