:root{
  --bg:#0f1720;
  --card:#0b1317;
  --muted:#9aa6a6;
  --accent:#22d3a6;
  --glass: rgba(255,255,255,0.02);
  --glass-2: rgba(34,211,166,0.06);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background: linear-gradient(180deg,var(--bg), #07111a);
  color:#d7f7ee;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* layout */
.container{max-width:1100px;margin:0 auto;padding:30px}
.nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.brand{font-weight:700;color:var(--accent)}
.brand-name{margin-left:6px}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}

/* intro */
.intro{display:grid;grid-template-columns:1fr 420px;gap:30px;align-items:center;padding:40px 0}
.name{font-size:56px;margin:0;letter-spacing:1px;color:var(--accent);text-shadow:0 6px 20px rgba(34,211,166,0.06)}
.role{font-size:22px;margin:8px 0;color:#a9fff0;font-weight:600;min-height:28px}
.cursor{opacity:1;animation:blink 1s infinite}
@keyframes blink{50%{opacity:0}}

.desc{color:var(--muted);max-width:58ch;line-height:1.6}

/* buttons */
.btn{display:inline-block;padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:700;margin-right:12px}
.primary{background:linear-gradient(90deg,var(--accent), #33f3c9);color:#04201a;box-shadow:0 10px 30px rgba(34,211,166,0.08)}
.outline{border:1px solid var(--glass-2);color:var(--accent);background:transparent}

/* socials */
.socials{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.social{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--glass);color:var(--muted);text-decoration:none;font-weight:600;font-size:13px}

/* right / profile */
.pfp-wrap{position:relative;width:320px;height:320px;margin:auto;display:flex;align-items:center;justify-content:center}
.pfp{width:170px;height:170px;border-radius:50%;object-fit:cover;border:6px solid rgba(0,0,0,0.5);box-shadow:0 10px 40px rgba(2,6,8,0.6)}
.rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ring{position:absolute;border-radius:50%;border:6px solid transparent;box-shadow:0 6px 40px rgba(2,6,8,0.6) inset}
.r1{width:320px;height:320px;border-color:rgba(34,211,166,0.12);animation:spin 20s linear infinite}
.r2{width:260px;height:260px;border-color:rgba(34,211,166,0.18);animation:spinReverse 14s linear infinite}
.r3{width:200px;height:200px;border-color:rgba(34,211,166,0.28);animation:spin 9s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spinReverse{from{transform:rotate(360deg)}to{transform:rotate(0)}}

/* work section */
.work{padding:20px 0 80px}
.section-title{font-size:20px;color:var(--accent);margin-bottom:6px}
.muted{color:var(--muted)}
.cards{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));padding:18px;border-radius:12px;min-width:260px;flex:1;box-shadow:0 10px 30px rgba(2,6,8,0.6)}

/* footer */
.footer{border-top:1px solid rgba(255,255,255,0.02);padding:30px 0;margin-top:30px}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* responsive */
@media(max-width:900px){
  .intro{grid-template-columns:1fr;gap:18px;padding:20px}
  .right{order:-1}
  .pfp-wrap{width:220px;height:220px}
  .name{font-size:38px}
  .nav-links{display:none}
  .container{padding:20px}
  .footer-inner{flex-direction:column;gap:12px;align-items:flex-start}
}