:root{
  --bg:#eceff1;
  --card:#f6f9ff;
  --muted:#6b7280;
  --accent:#0b6ef6;
  --container:1100px;
}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; margin:0; color:#0f172a; background:var(--bg); -webkit-font-smoothing:antialiased;}
.container{max-width:var(--container); margin:0 auto; padding:24px;}
.site-header{background:linear-gradient(90deg,rgba(11,110,246,0.06),transparent); border-bottom:1px solid #eef2ff;}
.nav{display:flex; align-items:center; justify-content:space-between;}
.brand{font-weight:700; color:var(--accent);}
.nav-links a{margin-left:16px; text-decoration:none; color:var(--muted); font-weight:600;}
.nav-links .cta{background:var(--accent); color:white; padding:8px 12px; border-radius:8px; text-decoration:none;}
.hero{display:flex; gap:28px; align-items:center; padding:40px 24px;}
.hero-left{flex:0 0 160px;}
.profile{width:160px; height:160px; border-radius:999px; object-fit:cover; border:6px solid white; box-shadow:0 8px 24px rgba(11,110,246,0.12);}
.hero-right{flex:1;}
.hero-right h1{margin:0; font-size:2rem;}
.title{color:var(--muted); margin:8px 0 16px;}
.summary{max-width:60ch; line-height:1.6; color:#111827;}
.button{display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:700; background:var(--accent); color:white; margin-right:8px;}
.button.ghost{background:transparent; border:2px solid rgba(15,23,42,0.06); color:var(--accent); font-weight:700;}

.section{padding:28px 24px; border-top:1px solid #f3f4f6;}
h2{margin:0 0 12px; color:#0f172a;}
.skills-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;}
.skill{background:var(--card); padding:12px; border-radius:10px;}
.skill strong{display:block; margin-bottom:6px;}
.timeline .item{margin-bottom:18px; background:#ffffff; padding:14px; border-radius:8px; box-shadow:0 6px 18px rgba(2,6,23,0.04);}
.muted{display:block; color:var(--muted); margin-bottom:8px; font-weight:600;}

.projects-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px;}
.project{background:var(--card); padding:14px; border-radius:8px;}

.contact a{color:var(--accent)}

.site-footer{padding:20px 0; border-top:1px solid #f3f4f6; text-align:center; color:var(--muted);}
@media (max-width:800px){
  .hero{flex-direction:column; text-align:center;}
  .hero-left{order:0;}
  .nav-links{display:none}
  .container{padding:16px;}
}