:root {
  /* Colors (light theme) */
  --bg: #f7f9fc; /* page background */
  --text: #0f1724; /* main text (dark) */
  --card: #ffffff; /* card background */
  --muted: #6b7280; /* muted text */
  --accent: #5050f0; /* premium indigo accent */
  --accent-2: #f9efe8; /* gentle warm accent */

  /* Layout */
  --container: 1100px;
  --radius: 10px;

  /* Typography */
  --font-sans: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial;
  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial;
}
* {
  box-sizing: border-box;
}

/* -----------------------
   Base & Layout styles
   ----------------------- */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
  background: linear-gradient(180deg, var(--bg) 0%, #ffffff 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent {
  color: var(--accent);
  font-weight: 700;
}
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 2rem;
}
.site-header {
  backdrop-filter: saturate(120%) blur(6px);
  background: rgba(255,255,255,0.94);
  border-bottom: 1px solid rgba(15,17,36,0.06);
  box-shadow: 0 2px 6px rgba(15,17,36,0.04);
  position: sticky;
  top: 0;
  z-index: 20;
}

.nav a { color: var(--muted); }
.nav a:hover { color: var(--accent); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}
.brand {
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  font-size: 1.1rem;
}
.nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 1rem;
}
.nav a:hover {
  color: var(--accent);
}
.hero {
  padding: 5rem 0;
  text-align: left;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  align-items: center;
}
.hero-image { display:flex; align-items:center; justify-content:center; }
.hero-thumb {
  width: 500px;
  height: 400px;
  border-radius: 100%;

  box-shadow: 0 8px 24px rgba(80,80,240,0.08);
}
/* fallback for any SVGs used as media */
.hero-image img { max-width: 100%; height: auto; }
.hero-content {
  display: grid;
  gap: 1rem;
}
.hero h1 {
  font-size: 2.4rem;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.5px;
}
.hero h1 .accent {
  font-family: var(--font-heading);
}
.lead {
  color: var(--muted);
  max-width: 60ch;
  font-weight: 300;
}
.hero-ctas {
  margin-top: 1rem;
}
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(80,80,240,0.08);
  border: 0;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(80,80,240,0.10); }

.btn-outline {
  background: transparent;
  border: 1px solid rgba(80,80,240,0.12);
  color: var(--accent);
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
}
.btn-outline:hover{ background: rgba(80,80,240,0.06); border-color: rgba(80,80,240,0.18); }

.btn.btn-preview{ font-size:0.95rem; padding: 0.4rem 0.7rem; }

.link{ color:var(--accent); text-decoration:none; font-weight:600; border-bottom:1px solid transparent; padding-bottom:1px; }
.link:hover{ border-bottom-color: rgba(80,80,240,0.18); }
.section {
  padding: 3rem 0;
}
.about p {
  color: var(--muted);
}
.skills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}
.skills li {
  background: rgba(15,17,36,0.03);
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.9rem;
}
.projects .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.2rem;
}
.card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(15,17,36,0.06);
  box-shadow: 0 8px 24px rgba(15,17,36,0.04);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15,17,36,0.08); }

.card-media img { width:100%; height:110px; object-fit:cover; display:block; border-radius:8px; box-shadow:none; }

.card-body h3 { color: var(--text); }
.card-body p { color: var(--muted); }

.card-actions { display:flex; gap:0.6rem; align-items:center; margin-top:0.5rem; }
.card-media svg {
  width: 100%;
  height: auto;
  display: block;
}
.card-body {
  padding: 1rem;
}
.card-body h3 {
  margin: 0.1rem 0 0.5rem 0;
  font-family: var(--font-heading);
  font-weight: 600;
}
.card-body p {
  color: var(--muted);
  margin: 0 0 0.75rem 0;
  font-weight: 300;
}
.link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.contact-form {
  display: grid;
  gap: 0.6rem;
  max-width: 640px;
}
.contact-form label {
  display: block;
  color: var(--muted);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(15,17,36,0.06);
  background: #ffffff;
  color: inherit;
}
.site-footer {
  border-top: 1px solid rgba(15,17,36,0.06);
  padding: 1rem 0;
  margin-top: 2rem;
  background: transparent;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.social a { color: var(--text); margin-left: 1rem; text-decoration: none; }

.muted{ color: var(--muted); }

@media (max-width: 720px) {
  .header-inner {
    padding: 0.6rem 0;
  }
  .hero h1 {
    font-size: 1.6rem;
  }
  .container {
    padding: 1rem;
  }
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .footer-inner {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Achievements section styles */
.achievements .muted {
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.achievement-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}
.achievement-list li {
  background: rgba(15,17,36,0.03);
  padding: 0.8rem 1rem;
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.achievement-list strong {
  color: var(--accent);
  margin-right: 0.5rem;
}

@media (max-width: 720px) {
  .achievement-list {
    gap: 0.5rem;
  }
}

/* Certificates gallery */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-top: 1rem; }
.cert-item { background: var(--card); border-radius: 8px; padding: 0.5rem; border: 1px solid rgba(15,17,36,0.04); text-align: left; color: inherit; cursor: pointer; }
.cert-item img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; display: block; }
.cert-caption { font-size: 0.95rem; color: var(--muted); margin-top: 0.4rem; }

.cert-thumb.external {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; /* better contrast */
  font-weight: 700;
}

/* Modal / lightbox */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
}
.modal[aria-hidden="false"] {
  display: flex;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.75);
}
.modal-body {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  z-index: 70;
  padding: 1rem;
}
.modal-body img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  display: block;
}
.modal-close {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  border: 0;
  font-size: 20px;
  cursor: pointer;
}

@media (max-width: 480px) {
  .cert-item img {
    height: 90px;
  }
}