/* ========== Reset & base ========== */
*, *::before, *::after { box-sizing: border-box; }
html,body { height:100%; margin:0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #0b1a2b;
  background: #f7f8fb;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a { color: inherit; text-decoration: none; }
img { max-width:100%; display:block; }

/* ========== Container ========== */
.container {
  width: min(1100px, 94%);
  margin: 0 auto;
  padding: 2.25rem 0;
}

/* ========== Header / Nav ========== */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(15,25,35,0.06);
}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: 0.75rem 0;
}
.brand {
  display:flex;
  align-items:center;
  gap:0.75rem;
  font-weight:700;
  color:#0b2540;
  font-size:1.05rem;
}
.brand .logo {
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#102a43,#0b2540);
  color:#fff; font-weight:700;
  font-size:0.9rem;
}
nav ul { list-style:none; display:flex; gap:1rem; margin:0; padding:0; align-items:center; }
nav a { padding:0.45rem 0.6rem; border-radius:8px; color:#0b2540; font-weight:600; font-size:0.95rem; }
nav a:hover { background:#e9eef8; }

/* Mobile nav (simple): collapse into small line */
@media (max-width:720px){
  nav ul { gap:0.5rem; font-size:0.92rem; }
}

/* ========== Hero ========== */
.hero {
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:2rem;
  align-items:center;
  padding: 2.25rem 0;
}
.hero .intro h1 {
  margin:0 0 0.35rem 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color:#07203a;
  letter-spacing:-0.5px;
}
.hero .intro p.lead {
  margin:0 0 1rem 0;
  color:#394a5a;
  font-size:1.05rem;
}
.cta-row { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.btn {
  display:inline-block;
  padding:0.55rem 0.9rem;
  border-radius:10px;
  background:#0b2540;
  color:#fff;
  font-weight:700;
  font-size:0.95rem;
  box-shadow: 0 6px 18px rgba(11,37,64,0.08);
}
.btn.secondary {
  background:transparent;
  color:#0b2540;
  border:1px solid rgba(11,37,64,0.08);
  font-weight:600;
}

/* Profile card */
.profile-card {
  background: #ffffff;
  border-radius:14px;
  padding:1.2rem;
  box-shadow: 0 8px 30px rgba(16,32,64,0.06);
  text-align:center;
}
.avatar {
  width:110px; height:110px; border-radius:999px;
  margin:0 auto 0.8rem;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.6rem; color:#fff;
  background: linear-gradient(135deg,#133e6b,#24609b);
  overflow: hidden; /* Added for image to respect border-radius */
}
.small { color:#6b7a89; font-size:0.95rem; margin-top:0.35rem; }

/* ========== Sections ========== */
section { padding: 1.6rem 0; }
h2.section-title {
  margin:0 0 1rem 0; font-size:1.15rem; color:#07203a;
  display:flex; align-items:center; gap:.6rem;
}

/* About */
.about {
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:1.5rem;
  align-items:start;
}
.about p { margin:0 0 0.8rem 0; color:#374955; }

/* Projects grid */
.projects-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
}
.card {
  background:#fff;
  border-radius:12px;
  padding:1rem;
  box-shadow: 0 8px 24px rgba(13,25,40,0.04);
  min-height:120px;
  display:flex; flex-direction:column; gap:0.6rem;
}
.card h3 { margin:0; font-size:1rem; color:#07203a; }
.card p { margin:0; color:#576777; font-size:0.95rem; flex:1; }
.tag { font-size:0.8rem; padding:0.25rem 0.5rem; border-radius:999px; background:#eef4ff; color:#0b2540; font-weight:700; display:inline-block; }

/* Contact */
.contact-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
}
.contact-box {
  background:#fff; padding:1rem; border-radius:10px;
  box-shadow: 0 8px 18px rgba(13,25,40,0.04);
}
.contact-line { margin:0.4rem 0; color:#20303f; font-weight:600; }

/* Footer */
footer {
  margin-top:2rem;
  padding:1.2rem 0 2.2rem 0;
  color:#5c6b78;
  font-size:0.93rem;
  text-align:center;
}

/* ========== Responsiveness ========== */
@media (max-width:1000px) {
  .hero { grid-template-columns: 1fr 300px; }
  .about { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width:640px) {
  .nav { padding:0.6rem 0; }
  .hero { grid-template-columns: 1fr; gap:1rem; }
  .profile-card { margin-top:0.5rem; }
  .projects-grid { grid-template-columns: 1fr; }
  .brand { font-size:0.98rem; }
  nav ul { display:flex; gap:0.4rem; font-size:0.88rem; }
}

/* small utility */
.muted { color:#6b7a89; font-size:0.95rem; }
.wrap { display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; }