:root{
  --bg:#fbfdff;
  --card:#ffffff;
  --accent:#0b5bd6;
  --text:#0f1724;
  --muted:#6b7280;
  --radius:12px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

.container{
  width:min(1000px,94%);
  margin:0 auto;
  padding:2rem 0;
}

.site-header{
  background:linear-gradient(90deg, #ffffff, #f3f8ff);
  border-bottom:1px solid rgba(11,91,214,0.08);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand h1{
  margin:0;
  font-size:1.25rem;
  color:var(--text);
}

.tagline{margin:0;color:var(--muted);font-size:.95rem}

.top-nav a{
  margin-left:1rem;
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
}

.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:0 8px 20px rgba(16,24,40,0.04);
  margin-bottom:1rem;
}

.about-card{
  display:flex;
  gap:1rem;
  align-items:flex-start;
}

.profile{
  width:128px;
  height:128px;
  object-fit:cover;
  border-radius:10px;
  border:3px solid #fff;
  box-shadow:0 10px 30px rgba(11,91,214,0.08);
}

.about-content h2{margin-top:0}
.links{margin-top:.5rem}
.links a{color:var(--accent);text-decoration:none;font-weight:600}
.links span{margin:0 .5rem;color:var(--muted)}

.exp-group h3{margin:0 0 .5rem 0;font-size:1rem;color:var(--text)}
.exp-group ul{margin:0 0 1rem 1.1rem;color:var(--muted)}

.projects-list{margin:0;padding-left:1.1rem}
.muted{color:var(--muted)}
.certs{margin-top:.5rem;color:var(--muted);font-size:.95rem}

.site-footer{padding:1.25rem 0;text-align:center;color:var(--muted);font-size:.9rem}

@media (max-width:720px){
  .about-card{flex-direction:column; align-items:center; text-align:center}
  .profile{float:none}
  .top-nav{display:none}
}