:root {
  --bg-main: #020315;
      --bg-glass: rgba(20, 26, 60, 0.95);
      --border-glass: rgba(255, 255, 255, 0.08);
      --text-main: #f9fafb;
      --text-muted: #e5e7eb;

      /* Accent theme (default cyan/purple) */
      --accent: #00e6ff;
      --accent-soft: rgba(0, 230, 255, 0.18);
      --accent-alt: #a855ff;
      --accent-alt-soft: rgba(168, 85, 255, 0.16);

      --shadow-soft: 0 0 25px rgba(0, 230, 255, 0.35);
      --radius-lg: 22px;
      --radius-pill: 999px;
  --nav-height: 76px;

      /* Cursor glow variables */
      --glow-color: rgba(0, 230, 255, 0.45);
      --glow-color-alt: rgba(168, 85, 255, 0.35);
      --glow-size: 220px;
      --glow-opacity: 0;

      /* Override Bootstrap's secondary color to be light on dark background */
  --bs-secondary-color: #e5e7eb;
}

/* On smaller screens the navbar is shorter; reduce the nav height variable
   so hero padding calculations don't leave a large gap above the content. */
@media (max-width: 991.98px) {
  :root {
     
  }
  section {
    padding-block: 1rem;
    position: relative;
    z-index: 1;
}
}

/* Light theme overrides */
body[data-theme="light"] {
  --bg-main: #f3f4f6;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --border-glass: rgba(15, 23, 42, 0.06);
  --text-main: #1f2933;
  --text-muted: #6b7280;
  /* Slightly richer accent for light mode */
  --accent: #0ea5e9;
  --accent-alt: #6366f1;
  --accent-soft: rgba(14, 165, 233, 0.2);

  /* Give light theme a subtle gradient so glass feels layered */
  background:
    radial-gradient(circle at top left, #ffffff 0, #e5f3fb 38%, #dbeafe 70%, #e5e7eb 100%);
}

/* Improve contrast for muted text on light theme */
body[data-theme="light"] .text-muted {
  color: #6b7280 !important;
}

body[data-theme="light"] .bg-gradient-animated {
  opacity: 0.25;
  filter: blur(20px);
}

body[data-theme="light"] .bg-grid {
  opacity: 0.06;
}

body[data-theme="light"] .glass-card {
  /* Softer shadow for light glass */
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.6);
}

body[data-theme="light"] .navbar {
  background: rgba(248, 250, 252, 0.92);
  border-bottom-color: rgba(148, 163, 184, 0.25);
}

body[data-theme="light"] .navbar-brand,
body[data-theme="light"] .navbar .nav-link {
  color: #0f172a;
}

/* Light theme: ensure mobile menu + toggler are clearly visible */
body[data-theme="light"] .navbar-dark .navbar-toggler {
  border-color: transparent;
}

/* Ensure toggler icon is always visible in both themes */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(248,250,252,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
body[data-theme="light"] .navbar-toggler-icon {
  /* Dark icon for light background */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15,23,42,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

@media (max-width: 991.98px) {
  body[data-theme="light"] .navbar-collapse {
    /* Solid, slightly elevated panel so links stand out on light hero */
    background: rgba(248, 250, 252, 0.98);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    border-radius: 20px;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
  }
}

/* Light theme: footer */
body[data-theme="light"] footer {
  background: #f9fafb;
  border-top-color: rgba(148, 163, 184, 0.35);
}
body[data-theme="light"] footer p,
body[data-theme="light"] footer .text-muted {
  color: #1f2933 !important;
}

/* Light theme cards: soften dark backgrounds */
body[data-theme="light"] .glass-card,
body[data-theme="light"] .persona-card,
body[data-theme="light"] .contact-card,
body[data-theme="light"] .edu-card,
body[data-theme="light"] .solution-card,
body[data-theme="light"] .feature-card {
  /* Light, translucent glass similar to reference */
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.18));
  border-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

body[data-theme="light"] .persona-card.active {
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), rgba(255, 255, 255, 0.6));
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

    /* Accent palettes */
    [data-accent="cyan-purple"] {
      --accent: #00e6ff;
      --accent-soft: rgba(0, 230, 255, 0.18);
      --accent-alt: #a855ff;
      --accent-alt-soft: rgba(168, 85, 255, 0.16);
    }
    [data-accent="purple-green"] {
      --accent: #a855ff;
      --accent-soft: rgba(168, 85, 255, 0.18);
      --accent-alt: #00ff9d;
      --accent-alt-soft: rgba(0, 255, 157, 0.16);
    }
    [data-accent="blue-gold"] {
      --accent: #3b82f6;
      --accent-soft: rgba(59, 130, 246, 0.18);
      --accent-alt: #facc15;
      --accent-alt-soft: rgba(250, 204, 21, 0.16);
    }

    * {
      box-sizing: border-box;
    }

    /* Ensure Font Awesome icons don't block text rendering */
    @font-face {
      font-family: "Font Awesome 6 Free";
      font-style: normal;
      font-weight: 900;
      font-display: swap;
      src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2") format("woff2");
    }
    @font-face {
      font-family: "Font Awesome 6 Free";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-regular-400.woff2") format("woff2");
    }
    @font-face {
      font-family: "Font Awesome 6 Brands";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2") format("woff2");
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg-main);
      color: var(--text-main);
      min-height: 100vh;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }

    /* Ensure secondary links are readable on dark background */
    .link-secondary {
      color: var(--text-muted) !important;
    }

    /* Animated gradient overlay */
    .bg-gradient-animated {
      position: fixed;
      inset: -40%;
      background:
        radial-gradient(circle at 10% 0%, rgba(0, 230, 255, 0.22), transparent 55%),
        radial-gradient(circle at 90% 0%, rgba(168, 85, 255, 0.26), transparent 55%),
        radial-gradient(circle at 50% 100%, rgba(0, 255, 157, 0.24), transparent 60%);
      opacity: 0.4;
      filter: blur(4px);
      mix-blend-mode: screen;
      animation: floatGradient 20s ease-in-out infinite alternate;
      pointer-events: none;
      z-index: -3;
    }

    @keyframes floatGradient {
      from {
        transform: translate3d(0, 0, 0) scale(1);
      }
      to {
        transform: translate3d(-4%, 3%, 0) scale(1.08);
      }
    }

    /* Soft blinking star dots */
    .bg-stars {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -3;
      background-image:
        radial-gradient(1.8px 1.8px at 10% 20%, rgba(255, 255, 255, 0.75) 0, transparent 45%),
        radial-gradient(1.6px 1.6px at 30% 80%, rgba(255, 255, 255, 0.6) 0, transparent 45%),
        radial-gradient(2px 2px at 60% 10%, rgba(255, 255, 255, 0.8) 0, transparent 50%),
        radial-gradient(1.6px 1.6px at 80% 50%, rgba(255, 255, 255, 0.7) 0, transparent 45%),
        radial-gradient(1.6px 1.6px at 25% 55%, rgba(255, 255, 255, 0.7) 0, transparent 45%),
        radial-gradient(1.6px 1.6px at 70% 75%, rgba(255, 255, 255, 0.6) 0, transparent 45%);
      opacity: 0.55;
      animation: starsBlink 7s ease-in-out infinite alternate;
    }

    @keyframes starsBlink {
      from {
        opacity: 0.15;
      }
      to {
        opacity: 0.45;
      }
    }

    /* Subtle grid */
    .bg-grid {
      position: fixed;
      inset: 0;
      background-image: linear-gradient(
          rgba(255, 255, 255, 0.04) 1px,
          transparent 1px
        ),
        linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.04) 1px,
          transparent 1px
        );
      background-size: 80px 80px;
      opacity: 0.05;
      mask-image: radial-gradient(circle at center, #000 0, transparent 70%);
      pointer-events: none;
      z-index: -4;
    }

    /* Particles canvas */
    #particle-canvas {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -2;
      opacity: 0.6;
    }

    /* Cursor glow */
    .cursor-glow {
      position: fixed;
      width: var(--glow-size);
      height: var(--glow-size);
      border-radius: 50%;
      background:
        radial-gradient(circle, var(--glow-color), transparent 60%),
        radial-gradient(circle at 30% 10%, var(--glow-color-alt), transparent 65%);
      filter: blur(18px);
      mix-blend-mode: normal;
      pointer-events: none;
      transform: translate3d(-50%, -50%, 0);
      z-index: 5;
      opacity: var(--glow-opacity);
      transition: opacity 0.4s ease, transform 0.25s ease;
      will-change: transform, opacity;
    }
    .cursor-glow.is-hovering {
      transform: translate3d(-50%, -50%, 0) scale(1.08);
    }

    /* Glass card */
    .glass-card {
      background: var(--bg-glass);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-glass);
      box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(18px) saturate(130%);
      -webkit-backdrop-filter: blur(18px) saturate(130%);
      position: relative;
      overflow: hidden;
    }

    .glass-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.06),
        transparent 45%,
        rgba(255, 255, 255, 0.03)
      );
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .glass-card:hover::before {
      opacity: 1;
    }

    .glow-border {
      position: relative;
    }
    .glow-border::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: conic-gradient(
        from 160deg,
        rgba(0, 230, 255, 0.4),
        rgba(168, 85, 255, 0.2),
        rgba(0, 255, 157, 0.4),
        rgba(0, 230, 255, 0.4)
      );
      opacity: 0;
      filter: blur(20px);
      z-index: -1;
      transition: opacity 0.3s ease;
    }
    .glow-border:hover::after {
      opacity: 0.9;
    }

    /* Navbar */
    .navbar {
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      background: rgba(3, 5, 18, 0.9);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      position: relative;
      z-index: 1030;
    }
    .navbar-brand {
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      font-size: 0.9rem;
      color: var(--accent) !important;
    }
    .iconwave-badge {
      border-radius: 999px;
      border: 1px solid var(--accent);
      padding: 0.1rem 0.6rem;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      background: rgba(15, 23, 42, 0.9);
      color: var(--accent);
    }
    .navbar-nav .nav-link {
      color: var(--text-muted);
      font-size: 0.85rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      position: relative;
      padding-inline: 0.8rem;
      padding-block: 0.45rem;
      border-radius: 999px;
      transition: color 0.2s ease, background-color 0.2s ease;
    }
    .navbar-nav .nav-link::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0.3rem;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--accent), var(--accent-alt));
      transition: width 0.25s ease;
    }
    .navbar-nav .nav-link:hover::after,
    .navbar-nav .nav-link.active::after {
      width: 60%;
    }
    .navbar-nav .nav-link.active {
      color: var(--accent) !important;
    }

    /* Mobile: make dropdown items feel like buttons */
    @media (max-width: 991.98px) {
      .navbar-nav .nav-link {
        margin-inline: 0;
        padding-inline: 0.9rem;
        border-radius: 999px;
      }
      /* On small screens, remove underline (::after) effect for cleaner menu */
      .navbar-nav .nav-link::after {
        display: none;
      }
      .navbar-nav .nav-link + .nav-link {
        margin-top: 0.25rem;
      }
      .navbar-nav .nav-link.active,
      .navbar-nav .nav-link:focus {
        color: var(--accent) !important;
      }
    }

    /* Mobile nav: ensure menu + toggler visible over content */
    @media (max-width: 991.98px) {
      .navbar-collapse {
        background: rgba(3, 7, 18, 0.96);
        padding: 0.75rem 1rem;
        z-index: 1020;
      }
      .navbar-toggler {
        display: block !important;
        z-index: 1040;
      }
    }

    /* Buttons */
    .btn-glow {
      border-radius: var(--radius-pill);
      padding: 0.65rem 1.6rem;
      background: linear-gradient(120deg, var(--accent), var(--accent-alt));
      border: none;
      color: #020617;
      font-weight: 600;
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: hidden;
    }
    .btn-glow::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.6), transparent 55%);
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    .btn-glow:hover::after {
      opacity: 1;
    }

    .btn-outline-glow {
      border-radius: var(--radius-pill);
      padding: 0.65rem 1.6rem;
      border: 1px solid var(--accent-soft);
      color: var(--accent);
      background: rgba(3, 7, 18, 0.6);
      transition: all 0.25s ease;
    }
    .btn-outline-glow:hover {
      border-color: var(--accent);
      box-shadow: 0 0 18px rgba(0, 230, 255, 0.45);
      background: rgba(15, 23, 42, 0.9);
      color: var(--text-main);
    }

    .badge-pill {
      border-radius: var(--radius-pill);
      font-size: 0.75rem;
      padding: 0.35rem 0.9rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* Sections */
    section {
      padding-block: 5.5rem;
      position: relative;
      z-index: 1;
    }

/* Tighter vertical spacing on mobile only */
@media (max-width: 767.98px) {
  section {
    padding-block: 1.5rem;
  }
}

/* Safety: always show AOS elements even if JS fails or is disabled */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

    #hero {
      padding-top: calc(4rem + var(--nav-height));
      padding-bottom: 4.5rem;
    }

    .hero-title {
      font-size: clamp(2.2rem, 5vw, 3.4rem);
      letter-spacing: 0.02em;
    }
    .hero-subtitle {
      color: var(--text-main);
      max-width: 34rem;
    }

    @media (max-width: 767.98px) {
      /* Reduce top spacing on phones so hero sits closer to navbar */
      #hero {
        padding-top: calc(1.2rem + var(--nav-height));
      }
      /* Soften heavy effects on mobile for faster paint */
      .bg-gradient-animated {
        opacity: 0.18;
        filter: blur(12px);
      }
      .bg-stars {
        opacity: 0.2;
      }
      #particle-canvas {
        display: none;
      }
    }

    .hero-pill {
      border-radius: var(--radius-pill);
      border: 1px solid rgba(255, 255, 255, 0.16);
      padding: 0.35rem 0.9rem;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      color: var(--accent);
      font-size: 0.76rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      background: radial-gradient(circle at top left, rgba(0, 230, 255, 0.3), transparent 55%);
    }

    .hero-card {
      transform-style: preserve-3d;
      perspective: 1000px;
    }
    .hero-card-inner {
      transform: translateZ(35px);
    }

    @media (max-width: 767.98px) {
      #hero .hero-card {
        margin-top: 1.5rem;
      }
      #hero .hero-card-inner {
        transform: none;
      }
      #hero .glass-card {
        text-align: left;
      }
      #hero .glass-card .row.g-4 > [class^="col-"] {
        margin-bottom: 0.5rem;
      }
    }

.stat-pill {
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.9rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: rgba(15, 23, 42, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
    .stat-value {
      font-size: 1.7rem;
      font-weight: 700;
    }

    .section-label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent);
    }
    .section-title {
      font-size: clamp(1.7rem, 3vw, 2.2rem);
    }
    .section-lead {
      color: var(--text-main);
      max-width: 42rem;
    }

    /* Feature / skill cards */
    .feature-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
      cursor: default;
    }
    .feature-card:hover {
      transform: translateY(-6px);
      border-color: rgba(0, 230, 255, 0.5);
      box-shadow: 0 0 25px rgba(0, 230, 255, 0.25);
      background: rgba(15, 23, 42, 0.95);
    }
    .feature-icon {
      width: 44px;
      height: 44px;
      border-radius: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at top left, var(--accent-soft), transparent);
      color: var(--accent);
    }

    /* Persona selector */
    .persona-card {
      cursor: pointer;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(148, 163, 184, 0.4);
      background: rgba(15, 23, 42, 0.9);
      padding: 1.2rem 1.4rem;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
      position: relative;
      overflow: hidden;
    }
    .persona-card.active {
      border-color: rgba(0, 230, 255, 0.75);
      box-shadow: 0 0 22px rgba(0, 230, 255, 0.4);
      background: radial-gradient(circle at top left, rgba(0, 230, 255, 0.18), rgba(15, 23, 42, 0.96));
    }
    .persona-card:hover {
      transform: translateY(-3px);
    }

    /* Chips */
    .skill-chip {
      border-radius: var(--radius-pill);
      border: 1px solid rgba(148, 163, 184, 0.5);
      padding: 0.3rem 0.75rem;
      font-size: 0.78rem;
      color: var(--text-muted);
      background: rgba(15, 23, 42, 0.86);
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      margin: 0.2rem;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }
    .skill-chip i {
      color: var(--accent);
      font-size: 0.75rem;
    }
    .skill-chip:hover {
      border-color: var(--accent);
      box-shadow: 0 0 14px rgba(0, 230, 255, 0.32);
      transform: translateY(-2px);
    }

    /* Solutions */
    .solution-card {
      cursor: pointer;
      transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    }
    .solution-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0, 230, 255, 0.5);
      box-shadow: 0 0 24px rgba(0, 230, 255, 0.3);
    }
    .solution-body {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.35s ease;
    }
    .solution-card.expanded .solution-body {
      max-height: 260px;
    }
    .solution-toggle {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent);
    }

    /* Proof / highlights */
    .highlight-number {
      font-size: 1.6rem;
      font-weight: 700;
    }

    /* Timeline */
    .timeline {
      position: relative;
      padding-left: 1.5rem;
    }
    .timeline::before {
      content: "";
      position: absolute;
      left: 0.35rem;
      top: 0.25rem;
      bottom: 0.25rem;
      width: 2px;
      background: linear-gradient(to bottom, var(--accent), rgba(148, 163, 184, 0.3));
      opacity: 0.7;
    }
.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 230, 255, 0.35);
  position: absolute;
  left: 0;
  top: 0.9rem;
}

.experience-date {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Skills section: subtle highlight without heavy cards */
.skills-section .section-title {
  position: relative;
}
.skills-section .section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.4rem;
  width: 80px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-alt));
}

.skills-section .feature-card {
  border-top: 2px solid var(--accent-soft);
}

.skills-section .skill-chip {
  border-color: rgba(148, 163, 184, 0.6);
  background: rgba(15, 23, 42, 0.92);
}

/* Light theme: brighten skill chips */
body[data-theme="light"] .skill-chip {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(148, 163, 184, 0.5);
  color: #0f172a;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

body[data-theme="light"] .skill-chip i {
  color: var(--accent);
}

/* Light theme: form controls + contact area */
body[data-theme="light"] .contact-card {
  background: rgba(255, 255, 255, 0.78);
}

body[data-theme="light"] .form-control,
body[data-theme="light"] .form-select {
  background-color: #ffffff;
  color: #0f172a;
  border-color: rgba(148, 163, 184, 0.7);
}

body[data-theme="light"] .form-control::placeholder,
body[data-theme="light"] .form-select::placeholder {
  color: #9ca3af;
}

/* Light theme: language badges */
body[data-theme="light"] .contact-card .badge-pill {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(148, 163, 184, 0.6) !important;
  color: #0f172a !important;
}

/* Light theme: proof/toolbox badges (TR‑069, GenieACS, etc.) */
body[data-theme="light"] #proof .badge-pill {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(148, 163, 184, 0.6) !important;
  color: #0f172a !important;
}

/* Light theme: generic badge-pill glass effect */
body[data-theme="light"] .badge-pill {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(148, 163, 184, 0.6);
  color: #0f172a;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

/* Light theme: stat pill glass effect */
body[data-theme="light"] .stat-pill {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(148, 163, 184, 0.6);
  color: #0f172a;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

/* Light theme: button hover should stay light */
body[data-theme="light"] .btn-glow {
  background: linear-gradient(120deg, #ffffff, #f3f4f6);
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.25);
}
body[data-theme="light"] .btn-glow:hover {
  background: linear-gradient(120deg, #f9fafb, #e5f3fb);
  box-shadow: 0 0 18px rgba(14, 165, 233, 0.45);
}

body[data-theme="light"] .btn-outline-glow {
  background: #ffffff;
  color: var(--accent);
  border-color: var(--accent-soft);
}
body[data-theme="light"] .btn-outline-glow:hover {
  background: #f3f4f6;
  color: var(--accent);
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.4);
}

    /* Education */
    .edu-card {
      border-radius: var(--radius-lg);
      border: 1px solid rgba(148, 163, 184, 0.35);
      background: rgba(15, 23, 42, 0.9);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .edu-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0, 230, 255, 0.6);
      box-shadow: 0 0 20px rgba(0, 230, 255, 0.3);
    }

    /* Contact */
    .form-control,
    .form-select {
      background-color: rgba(15, 23, 42, 0.9);
      border-radius: 14px;
      border: 1px solid rgba(148, 163, 184, 0.5);
      color: var(--text-main);
    }
    .form-control:focus,
    .form-select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent-soft);
      background-color: rgba(15, 23, 42, 0.98);
      color: var(--text-main);
    }
    .contact-card {
      background: rgba(15, 23, 42, 0.95);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(148, 163, 184, 0.4);
    }

    /* Footer */
    footer {
      background: rgba(3, 7, 18, 0.96);
      border-top: 1px solid rgba(15, 23, 42, 0.9);
      padding-block: 2.4rem;
      position: relative;
      z-index: 1;
    }

    .accent-switcher button {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid rgba(148, 163, 184, 0.4);
      background: transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-right: 0.4rem;
      cursor: pointer;
      transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    }
    .accent-switcher button span {
      width: 16px;
      height: 16px;
      border-radius: 50%;
    }
    .accent-switcher button.active {
      transform: translateY(-1px);
      border-color: var(--accent);
      box-shadow: 0 0 15px rgba(0, 230, 255, 0.55);
    }

    /* Back-to-top */
    #backToTop {
      position: fixed;
      bottom: 1.6rem;
      right: 1.5rem;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 0, rgba(255, 255, 255, 0.4), transparent 55%),
        linear-gradient(135deg, var(--accent), var(--accent-alt));
      box-shadow: 0 0 25px rgba(0, 230, 255, 0.55);
      color: #020617;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
      z-index: 10;
    }
    #backToTop.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    /* Toast / alert placeholder */
    #formAlert {
      position: fixed;
      bottom: 1.4rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      display: none;
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #020617;
    }
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(var(--accent), var(--accent-alt));
      border-radius: 999px;
    }

    @media (max-width: 991.98px) {
      .navbar-nav .nav-link {
        padding-inline: 0.5rem;
      }
      /* Reduce top spacing on tablets and phones so hero sits closer to navbar */
      #hero {
        padding-top: calc(1.2rem + var(--nav-height));
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
    }

    :root {
  --glow-color: 0, 255, 255; /* cyan */
  --glow-size: 220px;
  --glow-opacity: 0.35;
}

/* Cursor glow */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--glow-size);
  height: var(--glow-size);
  border-radius: 10%;
  pointer-events: none;
  z-index: 9999;

  background: radial-gradient(
    circle,
    rgba(var(--glow-color), var(--glow-opacity)) 0%,
    rgba(var(--glow-color), 0.15) 30%,
    rgba(var(--glow-color), 0.05) 50%,
    transparent 70%
  );

  filter: blur(30px);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  will-change: transform;
}

/* Slight boost on interactive elements */
.cursor-glow.active {
  --glow-opacity: 0.55;
}