:root{
  --bg:#f8fafc;
  --accent:#0f766e;
  --radius:12px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

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

.container{
  width:min(1100px,92%);
  margin:0 auto;
  padding:3rem 0;
}

.site-header{
  position:sticky;
  top:0;
  background:white;
}

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

.nav a{
  margin-left:1rem;
  text-decoration:none;
  color:#475569;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:2rem;
  align-items:center;
}

.photo img{
  width:100%;
  border-radius:var(--radius);
}

.btn{
  background:var(--accent);
  color:white;
  padding:.6rem .9rem;
  border-radius:10px;
  text-decoration:none;
}

.skills{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  list-style:none;
  padding:0;
}

.skills li{
  background:white;
  padding:.5rem .7rem;
  border-radius:10px;
}

.site-footer{
  text-align:center;
  padding:1rem 0;
  color:#64748b;
}