@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root{
  --bg: #f7f8fb;
  --surface: #ffffff;
  --accent: #ff6b6b; /* custom color */
  --muted: #6b7280;
  --text: #0f172a;
  --radius: 12px;
  --max-width: 1024px;
  --gap: 1rem;
  --container-padding: 1rem;
  --shadow: 0 6px 20px rgba(2,6,23,0.06);
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* reset / base styles */
*{box-sizing:border-box;}
html{font-size:16px;}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.5;}
a{color:var(--accent);text-decoration:none;}
img{max-width:100%;display:block;}

.container{
  width:100%;max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-padding);
}

.site-header{background:var(--surface);border-bottom:1px solid rgba(15,23,42,0.04);position:sticky;top:0;z-index:20;}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0;}
.logo{font-weight:700;color:var(--accent);}
.nav{display:none;}
.nav-toggle{border:0;background:transparent;font-size:1.3rem;cursor:pointer;}

.hero{display:grid;grid-template-columns:1fr;gap:1rem;align-items:center;padding:2rem 0;}
.hero-text h1{margin:0 0 0.5rem;font-size:1.5rem;}
.hero-text p{margin:0 0 0.75rem;color:var(--muted);}
.hero-photo img{width:140px;height:140px;object-fit:cover;border-radius:50%;border:4px solid var(--surface);box-shadow:var(--shadow);}

.skills-list{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.6rem;}
.skill{background:var(--surface);padding:0.35rem 0.6rem;border-radius:999px;border:1px solid rgba(15,23,42,0.04);font-weight:600;color:var(--muted);font-size:0.9rem;}

.grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem;}
.card{background:var(--surface);padding:1rem;border-radius:var(--radius);box-shadow:var(--shadow);}

.btn{display:inline-block;background:var(--accent);color:#fff;padding:0.5rem 0.9rem;border-radius:8px;font-weight:600;text-decoration:none;}
.site-footer{margin-top:2rem;padding:1.2rem 0;color:var(--muted);text-align:center;}

/* mobile nav open */
.nav.open{display:block;position:absolute;top:60px;right:1rem;background:var(--surface);padding:0.5rem 1rem;border-radius:var(--radius);box-shadow:var(--shadow);}
.nav.open a{display:block;padding:0.3rem 0;}

/* larger screens */
@media(min-width:800px){
  .nav{display:block;}
  .nav-toggle{display:none;}
  .hero{grid-template-columns:1fr 300px;padding:3rem 0;}
  .hero-text h1{font-size:2rem;}
  .hero-photo img{width:180px;height:180px;}
  .grid{grid-template-columns:repeat(2,1fr);}
}
.card img {
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}

.card h3 {
  margin: 0.5rem 0 0.3rem;
  font-size: 1.1rem;
}

.card p {
  margin: 0 0 0.8rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.card .btn {
  font-size: 0.9rem;
  padding: 0.4rem 0.8rem;
}