:root{
  --bg:#0b0f14;--surface:#121922;--text:#e6eef8;--muted:#98a2b3;
  --primary:#4f46e5;--accent:#06b6d4;--radius:14px;--max:900px;
  --font-h:'Poppins',system-ui;--font-b:'Inter',system-ui
}
*{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-b)}
.container{max-width:var(--max);margin:48px auto;padding:0 20px;display:grid;gap:20px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
h1,h2{font-family:var(--font-h);margin:0 0 8px} h1{font-size:2rem} h2{font-size:1.25rem}
.role{font-weight:600;color:var(--accent);margin:0 0 8px} .muted{color:var(--muted)} .small{font-size:.9rem}
.btn{display:inline-block;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  text-decoration:none;color:var(--text);transition:transform .06s ease, background .2s ease, border-color .2s ease}
.btn:hover{transform:translateY(-1px)} .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.ghost{background:transparent}
.cta{display:flex;gap:10px;margin-top:12px}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.pill{display:inline-block;padding:6px 10px;margin:4px 6px 0 0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:.95rem}
.stack{display:grid;gap:14px} .inline{display:flex;flex-wrap:wrap;gap:8px}
.exp-item,.project-item{border-left:3px solid var(--primary);padding-left:12px}
.project-item a{color:var(--accent);text-decoration:none} .project-item a:hover{text-decoration:underline}
footer{text-align:center;padding:16px 0}
@media (max-width:520px){.hero{grid-template-columns:1fr;text-align:center}.avatar{margin:0 auto}}


.hero{
  display:grid;
  gap:20px;
  justify-items:center;    /* center logo and text */
  text-align:center;
}

.avatar{
  width:min(90%, 560px);   /* large, responsive */
  height:auto;
  border:none;
  border-radius:0;         /* not circular */
  background:transparent;
  object-fit:contain;
}