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

:root{
  --nav-h: 72px;
  --teal: #4ca1af;
  --teal-dark:#357f87;
  --navy:#2c3e50;
  --ink:#1e2a38;
  --card:#ffffff;
  --bg:#f0f2f5;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-family:'Roboto',sans-serif;
  background:var(--bg);
  color:#333;
  margin:0;
  line-height:1.6;
}

/* Navbar */
.navbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--navy);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.nav-inner{
  max-width:1100px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:16px;
  min-height:var(--nav-h);
}
.brand{
  color:#fff;
  font-weight:700;
  letter-spacing:.5px;
}
.menu-toggle{
  display:none;
  background:none;
  border:0;
  color:#fff;
  font-size:1.6rem;
  cursor:pointer;
}
.nav-links{
  list-style:none;
  display:flex;
  gap:18px;
  margin:0 0 0 auto;
  padding:0;
  align-items:center;
}
.nav-links a{
  color:#f1f1f1;
  text-decoration:none;
  padding:8px 10px;
  border-radius:6px;
  transition:all .25s ease;
}
.nav-links a:hover,
.nav-links a.active{
  background:var(--teal);
  color:#fff;
}
.download-btn{
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  color:#fff !important;
  padding:8px 14px;
  border-radius:8px;
  box-shadow:0 3px 8px rgba(0,0,0,.2);
}

/* Hero */
.hero{
  text-align:center;
  padding:48px 16px;
  background:linear-gradient(135deg,var(--navy),var(--teal));
  color:#fff;
  border-radius:0 0 12px 12px;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.profile-pic{
  width:140px;height:140px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid #fff;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  margin-bottom:12px;
}
.hero h1{margin:.2rem 0;font-size:2.1rem}
.tagline{opacity:.95;margin-top:6px}

/* Cards / Sections */
.card{
  background:var(--card);
  max-width:900px;
  margin:28px auto;
  padding:28px;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  scroll-margin-top: calc(var(--nav-h) + 24px); /* anchor offset for sticky nav */
}
.card h2{
  color:var(--navy);
  margin:0 0 14px 0;
  border-left:6px solid var(--teal);
  padding-left:12px;
}

/* Skills */
.skills{
  display:flex;flex-wrap:wrap;gap:10px;
  list-style:none;padding:0;margin:0;
}
.skills li{
  background:var(--teal);
  color:#fff;
  padding:8px 14px;
  border-radius:20px;
  font-weight:600;
  transition:transform .15s ease, background .25s ease;
}
.skills li:hover{transform:scale(1.05);background:var(--teal-dark)}

/* Fade-in animation */
.fade-in{opacity:0;transform:translateY(34px);transition:opacity .8s ease-out, transform .8s ease-out}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media (max-width: 820px){
  .menu-toggle{display:block}
  .nav-links{
    position:relative;
    display:none;
    flex-direction:column;
    width:100%;
    margin:12px 0 0 0;
    gap:10px;
  }
  .nav-links.open{display:flex}
  .nav-inner{flex-wrap:wrap}
}