:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0b74ff;
  --maxw:860px;
  --radius:12px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#111827;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:28px;}

.hero{
  width:100%;
  max-width:var(--maxw);
  background:linear-gradient(90deg, rgba(11,116,255,0.05), rgba(11,116,255,0.02));
  border-radius:var(--radius);
  padding:28px;
  margin-bottom:18px;
  box-shadow:0 6px 18px rgba(15,23,42,0.04);
}

.hero-inner{display:flex;flex-direction:column;gap:10px}
@media(min-width:720px){ .hero-inner{flex-direction:row;justify-content:space-between;align-items:center} }

.name h1{margin:0;font-size:2rem;letter-spacing:-0.02em}
.title{margin:4px 0 0;color:var(--muted);font-weight:600}

.contact{font-size:0.95rem;color:var(--muted)}
.contact a{color:var(--accent);text-decoration:none}
.sep{margin:0 8px;color:var(--muted)}

.container{
  width:100%;
  max-width:var(--maxw);
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

/* card */
.card{
  background:var(--card);
  padding:20px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(15,23,42,0.04);
}

/* summary */
.summary .lead{margin:8px 0 0;color:#1f2937;font-size:1rem}

/* experience */
.experience .role{margin-top:16px}
.experience h2{margin:0 0 6px 0}
.role h3{margin:0;font-size:1rem}
.meta{color:var(--muted);font-size:0.9rem;margin-top:6px}
.experience ul{margin:10px 0 0 20px;color:#374151}

/* skills */
.skill-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.skill-list span{background:#eef2ff;padding:8px 12px;border-radius:999px;font-size:0.95rem;color:#0b3b9a}

/* education */
.education .edu{margin-top:8px}

/* extras */
.extras ul{margin:8px 0 0 20px}

/* footer */
.site-footer{margin-top:20px;width:100%;max-width:var(--maxw);text-align:center;color:var(--muted);font-size:0.95rem}

/* responsive tweaks */
@media(min-width:980px){
  .container{grid-template-columns:1fr 340px}
  .experience{grid-column:1}
  .skills,.education,.extras,.summary{grid-column:2}
  .summary{position:sticky;top:24px}
}