:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#7c3aed;
  --muted:#9aa4b2;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#071428 0%,#081428 60%);color:#e6eef6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.container{max-width:900px;margin:48px auto;padding:24px}
.hero{background:linear-gradient(135deg,rgba(124,58,237,0.12),rgba(59,130,246,0.06));padding:40px;border-radius:12px;text-align:center}
.name{font-size:2.25rem;margin:0 0 8px}
.tagline{color:var(--muted);margin:0 0 18px}
.links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;background:rgba(255,255,255,0.04);color:inherit;text-decoration:none;border:1px solid rgba(255,255,255,0.04);transition:transform .12s ease,background .12s ease}
.btn:hover{transform:translateY(-3px);background:linear-gradient(90deg,var(--accent),#06b6d4)}
.about,.projects{margin-top:22px;padding:20px;background:rgba(255,255,255,0.02);border-radius:10px}
.about h2,.projects h2{margin:0 0 10px}
.projects ul{margin:0;padding-left:20px}
.footer{text-align:center;margin-top:20px;color:var(--muted)}
@media (max-width:520px){.name{font-size:1.6rem}.container{margin:28px 16px;padding:16px}}