/* =====================
   GLOBAL RESET & BASE
===================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;    
}
                                       
                                                      
body {
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.6;
  background:
    radial-gradient(
      1200px 700px at 15% -10%,
      rgba(79,195,247,0.08),
      transparent 45%
    ),
    radial-gradient(
      1000px 600px at 85% 15%,
      rgba(167,139,250,0.06),
      transparent 50%
    ),
    linear-gradient(
      180deg,
      #020617 0%,
      #030712 45%,
      #01030a 100%
    );
  color: #e6e6e6;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: -1;
}

.section {
  padding: 2rem 1rem;
  position: relative;
}


a {
  color: #4fc3f7;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
.resume-btn:hover {
  text-decoration: none;
}


html {
  scroll-behavior: smooth;
}


               
/* =====================
   NAVBAR
===================== */

/* .navbar {
  position: sticky;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0.7rem 1rem;
  background: rgba(15, 22, 32, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease;
} */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;
  overflow-x: hidden;     /* 👈 prevents clipping */
 
  
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0.6rem 0.75rem;

  background: rgba(15, 22, 32, 0.65);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.navbar {
  overflow-x: auto;        /* allow horizontal scroll */
  -webkit-overflow-scrolling: touch;
}
/* .nav-links {
  display: flex;
  flex-wrap: nowrap;               /* keep one line */
 /*  min-width: max-content;          /* prevent collapse */
/* } */

.nav-links {
  position: relative;
  display: flex;
  flex-wrap: wrap;        /* 👈 KEY FIX */
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.6rem;     /* 👈 tighter spacing on mobile */
  max-width: 100%;
}

.nav-links a,
.resume-btn {
  flex-shrink: 0;                  /* prevent cutting */
}

.navbar.scrolled {
  background: rgba(15, 22, 32, 0.95);
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}
@media (max-width: 480px) {
  .nav-links a {
    margin: 0 0.5rem;
    font-size: 0.8rem;
  }

  .resume-btn {
    padding: 0.35rem 0.7rem;
  }
}

/* =====================
   NAV LINKS
===================== */
.nav-links a {
  margin: 0 0.8rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #cbd5e1;
  position: relative;
  transition: color 0.2s ease;
}

/* Navbar colors matching section titles */
.nav-links a[href="#about"] {
  color: #e5e7eb;   /* same as About / Resume title */
}

.nav-links a[href="#projects"] {
  color: #22c55e;   /* green – Projects */
}

.nav-links a[href="#stack"] {
  color: #4fc3f7;   /* blue – Stack */
}

.nav-links a[href="#certifications"] {
  color: #a78bfa;   /* violet – Credentials */
}

.nav-links a[href="#contact"] {
  color: #38bdf8;   /* light blue – Contact */
}


.nav-links {
  position: relative;
  display: flex;
}

/* sliding underline */
.nav-underline {
  position: absolute;
  bottom: -6px;
  left: 0;

  height: 2px;
   width: 0;
   opacity: 0;
  background-color: transparent;

  /* 🔑 critical */
  border-radius: 0;            /* prevents arrow cap */

  pointer-events: none;

  transition:
    left 0.35s cubic-bezier(.4,0,.2,1),
    width 0.35s cubic-bezier(.4,0,.2,1),
    background-color 0.25s ease;
}



.nav-links a[href="#about"]          { --accent: #e5e7eb; }
.nav-links a[href="#projects"]       { --accent: #22c55e; }
.nav-links a[href="#stack"]          { --accent: #4fc3f7; }
.nav-links a[href="#certifications"] { --accent: #a78bfa; }
.nav-links a[href="#contact"]        { --accent: #38bdf8; }


/* Active nav link (does NOT change color, only state) */
.nav-links a.active {
  font-weight: 600;
}
.nav-links a,
.resume-btn {
  flex-shrink: 0;
}


.nav-links a,
.nav-links a:focus,
.nav-links a:focus-visible,
.nav-links a:active,
.nav-links a:visited {
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* BUT navbar links must NEVER use text-decoration */
.nav-links a:hover,
.nav-links a:focus,
.nav-links a:active {
  text-decoration: none;
}

/* =====================
   STICKY OFFSET
===================== */
#about,
#projects,
#stack,
#certifications,
#contact {
  scroll-margin-top: 100px;
}

/* =====================
   RESUME BUTTON
===================== */
/* =====================
   RESUME BUTTON — STATIC
===================== */
.resume-btn {
  margin-left: 1rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;

  color: #064e3b;
  background: #dcfce7;

  border: 1px solid #22c55e;
  border-radius: 999px;

  opacity: 1;
  text-decoration: none;

  /* 🚫 Disable ALL animation */
  transition: none !important;
}

/* Lock ALL states to look identical */
.resume-btn:hover,
.resume-btn:focus,
.resume-btn:active,
.resume-btn:visited {
  color: #064e3b;
  background: #dcfce7;
  border-color: #22c55e;

  opacity: 1;
  text-decoration: none;

  box-shadow: none;
  transform: none;
}

.resume-btn {
  flex-shrink: 0;          /* 👈 never shrink away */
  white-space: nowrap;    /* 👈 text never breaks */
}

@media (max-width: 640px) {

  .nav-links a {
    font-size: 0.78rem;
    margin: 0 0.4rem;
  }

  .resume-btn {
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    margin-left: 0.4rem;
  }

  .nav-underline {
    bottom: -4px;   /* tighter spacing on mobile */
  }
}

/* .nav-underline {
  max-width: 100%;
} */

/* =====================
   HERO (COMPACT + GLOW)
===================== */
.hero-compact {
  position: relative;
  padding: 1.5rem 1rem;
  text-align: center;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  border-radius: 16px;
  margin: 1rem;
  overflow: hidden;
}

.hero-compact::before {
  content: "";
  position: absolute;
  top: -45%;
  left: 50%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(79, 195, 247, 0.25), transparent 70%);
  transform: translateX(-50%);
  z-index: 0;
}

.hero-compact * {
  position: relative;
  z-index: 1;
}

.hero-compact h1 {
  font-size: 1.6rem;
  margin-bottom: 0.2rem;
}

.hero-sub {
  font-size: 0.95rem;
  opacity: 0.9;
  margin-bottom: 0.7rem;
}

.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.hero-metrics span {
  background: rgba(255, 255, 255, 0.12);
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
.hero-intent {
  color: #22c55e;              /* soft green = "open to work" signal */
  font-weight: 500;
}
#about.hero-compact {
  padding-top: 2.2rem;
}


/* ATS hidden but parsable */
.ats-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =====================
   STATS ROW
===================== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  padding: 1rem;
  text-align: center;
}

.stat-box {
  background: rgba(15, 22, 32, 0.85);
  padding: 1rem 0.8rem;
  border-radius: 14px;
  font-size: 0.8rem;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stats-row .stat-box:nth-child(1) {
  border-top: 3px solid #4fc3f7;
}

.stats-row .stat-box:nth-child(2) {
  border-top: 3px solid #22c55e;
}

.stats-row .stat-box:nth-child(3) {
  border-top: 3px solid #a78bfa;
}


.stat-box strong {
  font-size: 1.3rem;
  color: #f8fafc;
  letter-spacing: 0.4px;
}
.stat-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.35);
}

/* ===== Stack & Certification Side-by-Side Layout ===== */

.stack-cert-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Desktop layout */
@media (min-width: 768px) {
  .stack-cert-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.stack-bg,
.cert-bg {
  height: 100%;
}



/* =====================
   SECTIONS
===================== */
.section::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.08),
    transparent
  );
  margin-bottom: 1.8rem;
}

.section {
  padding: 1.2rem 1rem;
}

/* Section-specific title colors */
#projects .section-title {
  color: #22c55e;   /* green */
}

#stack .section-title {
  color: #4fc3f7;   /* blue */
}

#certifications .section-title {
  color: #a78bfa;   /* violet */
}

#contact h2 {
  color: #38bdf8;   /* lighter blue */
}

/* =====================
   PROJECTS
===================== */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


.project-card {
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}


.project-card h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.project-card p {
  font-size: 0.85rem;
  opacity: 0.9;
}

.project-card ul {
  margin: 0.6rem 0;
  padding-left: 1rem;
  font-size: 0.8rem;
}

.project-card li {
  margin-bottom: 0.3rem;
}

/* ---- PROJECT METRIC BADGES ---- */
.project-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0;
}

.metric-badge {
  background: rgba(79, 195, 247, 0.15);
  color: #4fc3f7;
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
}

/* Buttons */
.btn {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  background: #4fc3f7;
  color: #000;
  border-radius: 8px;
}

.resume-actions {
  margin-top: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: center;
}

.resume-actions .btn {
  min-width: 140px;
}

/* Secondary (outline) button */
.btn-outline {
  background: transparent;
  color: #4fc3f7;
  border: 1px solid rgba(79,195,247,0.6);
}

.btn-outline:hover {
  background: rgba(79,195,247,0.15);
  opacity: 1;
}

/* =====================
   STACK & CERTS
===================== */
/* Stack-like text rhythm for Certifications */
.cert-list {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #d1d5db;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cert-list li {
  margin-bottom: 0.45rem;   /* matches stack paragraph spacing */
}

.cert-education {
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.85rem;
  color: #d1d5db;
}

.cert-education strong {
  color: #c4b5fd; /* same violet as certifications */
  font-weight: 600;
}

/* =====================
   CONTACT
===================== */
.contact-section {
  padding: 1.5rem 1rem;
  text-align: center;
  background: #0f1620;
}

.contact-grid {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.75rem;
  padding: 0.6rem;
}

.contact-card i {
  font-size: 3rem;
  margin-bottom: 0.3rem;
}
.contact-card {
  transition: transform 0.2s ease, color 0.2s ease;
}

.contact-card:hover {
  transform: translateY(-3px);
}

.contact-card:hover i {
  color: #4fc3f7;   /* or match section accent */
}


.footer-note {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* =====================
   DESKTOP ENHANCEMENTS
===================== */
@media (min-width: 768px) {

  .hero-compact h1 {
    font-size: 2rem;
  }

  .hero-sub {
    font-size: 1.05rem;
  }

  .stats-row {
    max-width: 900px;
    margin: auto;
  }

 .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }

  .section {
    max-width: 1100px;
    margin: auto;
  }

  .navbar nav a {
    font-size: 0.9rem;
  }
}

/* ===== Section Background Variations ===== */

/* ===== Section Background Variations ===== */

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  padding: 1.5rem;

  max-width: 1100px;
  margin: 0 auto;   /* 👈 THIS centers the cards */
}

.stats-bg {
  background:
    radial-gradient(
      700px 300px at 20% 0%,
      rgba(79,195,247,0.10),
      transparent 60%
    ),
    radial-gradient(
      600px 300px at 80% 100%,
      rgba(167,139,250,0.08),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #020617,
      #030712
    );
  border-radius: 20px;
  margin: 2rem auto;     /* 👈 center section */
  max-width: 1200px;     /* 👈 prevent full-width stretch */
}


.projects-bg {
  background:
    radial-gradient(
      600px 300px at 50% 0%,
      rgba(56,189,248,0.06),
      transparent 60%
    );
}


.stack-bg,
.cert-bg {
  position: relative;
}

.stack-bg::before,
.cert-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      500px 300px at 80% 0%,
      rgba(79,195,247,0.04),
      transparent 60%
    );
  pointer-events: none;
}

.contact-bg {
  background: linear-gradient(135deg, #0f172a, #020617);
}


/* ===== Project Header ===== */
.project-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.project-header i {
  font-size: 1.2rem;
}

/* ===== Project Themes ===== */

/* ===== Project Themes ===== */

.projects-bg .project-health {
  background: linear-gradient(135deg, rgba(34,197,94,0.22), #0f1620);
}

.projects-bg .project-water {
  background: linear-gradient(135deg, rgba(56,189,248,0.22), #0f1620);
}

.projects-bg .project-food {
  background: linear-gradient(135deg, rgba(249,115,22,0.22), #0f1620);
}

.projects-bg .project-mobility {
  background: linear-gradient(135deg, rgba(167,139,250,0.22), #0f1620);
}
.project-health { border-left: 4px solid #22c55e; }
.project-water  { border-left: 4px solid #38bdf8; }
.project-food   { border-left: 4px solid #f97316; }
.project-mobility { border-left: 4px solid #a78bfa; }


.stack-card {
  background: linear-gradient(
    135deg,
    #0f172a,
    #020617
  );
  border-radius: 18px;
  padding: 1.4rem;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.stack-card strong {
  display: inline;
  margin-top: 0.8rem;
  margin-bottom: 0.25rem;
  color: #4fc3f7;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.stack-text {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #d1d5db;
}
.stack-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stack-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

/* .stack-pill {
  display: inline-block;
  background: rgba(79,195,247,0.15);
  color: #4fc3f7;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  margin: 0.2rem 0.25rem 0 0;
}
 */



.cert-card {
  background: linear-gradient(
    135deg,
    #020617,
    #030712
  );
  border-radius: 18px;
  padding: 1.4rem;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.35),
    0 0 0 1px rgba(167,139,250,0.15);
  position: relative;
}
.cert-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  background: radial-gradient(
    400px 200px at 20% 0%,
    rgba(167,139,250,0.18),
    transparent 60%
  );
  pointer-events: none;
}
.cert-card strong {
  display: inline;
  margin-right: 0.4rem;
  color: #c4b5fd;
  font-weight: 600;
  letter-spacing: 0.3px;
}


/* .cert-card li {
  padding: 0.6rem 0;
  border-bottom: none;   /* 👈 removes the line */
} */

.stack-text {
  font-size: 0.9rem;
  line-height: 1.65;
}

.cert-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cert-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.45),
    0 0 0 1px rgba(167,139,250,0.25);
}
.cert-bg .section-subtitle {
  color: #c4b5fd;
}

.project-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.35);
}
/* =====================
   HERO LAYOUT — FINAL
===================== */

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;   /* balanced center */
  gap: 2.5rem;
  flex-wrap: wrap;
}

/* Photo container */
.hero-photo {
  flex-shrink: 0;
}

/* Square professional photo */
.hero-photo img {
  width: 190px;              /* bigger */
  height: 190px;
  object-fit: cover;
  border-radius: 16px;
  border: 3px solid rgba(79,195,247,0.65);
  box-shadow: 0 16px 36px rgba(0,0,0,0.45);
}

/* Text block */
.hero-content {
  max-width: 560px;
  text-align: left;
}

/* =====================
   MOBILE
===================== */

@media (max-width: 640px) {

  .hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-content {
    text-align: center;
  }

  .hero-photo img {
    width: 130px;
    height: 130px;
  }
}