/* === THEME VARIABLES === */
    :root {
      --color-bg: #0b0c10;
      --color-bg-alt: #181a22;
      --color-navbar: rgba(15, 32, 39, 0.85);
      --color-primary: #00fff7;
      --color-primary-glow: #00fff7cc;
      --color-secondary: #cccccc;
      --color-accent: #232946;
      --color-border: #00FFF7;
      --color-link: #00fff7;
      --color-link-hover: #fff;
      --color-btn-bg: rgba(255,255,255,0.10);
      --color-btn-hover: rgba(255,255,255,0.18);
      --color-shadow: 0 0 1.5px 0 var(--color-primary-glow);
      --color-card-bg: #232946cc;
      --color-card-border: #00FFF71A;
      --color-card-shadow: 0 1.5px 1.5px 0 #00FFF733;
      --color-hero-gradient: linear-gradient(120deg, #232946 0%, #0b0c10 100%);
      --color-focus: #00fff7;
      --color-footer-bg: #181a22;
      --color-footer-text: #cccccc;
      --color-footer-link: #00fff7;
      --color-footer-link-hover: #fff;
      --transition: 0.3s cubic-bezier(.4,0,.2,1);
      --glow: 0 0 6px 0 var(--color-primary-glow);
      --stardust-url: https://www.transparenttextures.com/patterns/stardust.png;
    }
    /* === NEBULA THEME === */
    .theme-nebula {
      --color-bg: #1a1832;
      --color-bg-alt: #2a225a;
      --color-navbar: rgba(34, 20, 60, 0.85);
      --color-primary: #a18fff;
      --color-primary-glow: #a18fffcc;
      --color-secondary: #e0e0ff;
      --color-accent: #3a2d5c;
      --color-border: #a18fff;
      --color-link: #a18fff;
      --color-link-hover: #fff;
      --color-btn-bg: rgba(161,143,255,0.10);
      --color-btn-hover: rgba(161,143,255,0.18);
      --color-shadow: 0 1.5px 1.5px #a18fffcc;
      --color-card-bg: #3a2d5ccc;
      --color-card-border: #a18fff1A;
      --color-card-shadow: 0 1.5px 1.5px 0 #a18fff33;
      --color-hero-gradient: linear-gradient(120deg, #3a2d5c 0%, #1a1832 100%);
      --color-focus: #a18fff;
      --color-footer-bg: #2a225a;
      --color-footer-text: #e0e0ff;
      --color-footer-link: #a18fff;
      --color-footer-link-hover: #fff;
      --glow: 0 0 3px 0 #a18fffcc;
    }
    /* === ECLIPSE THEME === */
    .theme-eclipse {
      --color-bg: #181818;
      --color-bg-alt: #232323;
      --color-navbar: rgba(24, 24, 24, 0.92);
      --color-primary: #ffb347;
      --color-primary-glow: #ffb347cc;
      --color-secondary: #eaeaea;
      --color-accent: #232323;
      --color-border: #ffb347;
      --color-link: #ffb347;
      --color-link-hover: #fff;
      --color-btn-bg: rgba(255,179,71,0.10);
      --color-btn-hover: rgba(255,179,71,0.18);
      --color-shadow: 0 1.5px 1.5px #ffb347cc;
      --color-card-bg: #232323cc;
      --color-card-border: #ffb3471A;
      --color-card-shadow: 0 1.5px 1.5px 0 #ffb34733;
      --color-hero-gradient: linear-gradient(120deg, #232323 0%, #181818 100%);
      --color-focus: #ffb347;
      --color-footer-bg: #232323;
      --color-footer-text: #eaeaea;
      --color-footer-link: #ffb347;
      --color-footer-link-hover: #fff;
      --glow: 0 0 6px 0 #ffb347cc;
    }
    /* === BASE STYLES USING VARIABLES === 
    body {
      background: var(--color-bg);
      color: var(--color-secondary);
      font-family: Arial, sans-serif;
      min-height: 100vh;
      margin: 0;
      overflow-x: hidden;
      transition: background var(--transition), color var(--transition);
    }
       */
       
    /* --- NAVBAR --- */
    .navbar-bg {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: nowrap;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      min-height: 80px;
      width: 100%;
      box-sizing: border-box;
      background: var(--color-navbar);
    }

    .theme-switcher-btn {
      background: var(--color-btn-bg);
      border: 2px solid var(--color-primary);
      color: var(--color-primary);
      padding: 0.5rem 1.2rem;
      font-family: 'Orbitron', Arial, sans-serif;
      transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
      box-shadow: 0 0 1px 0 var(--color-primary-glow);
      z-index: 2;
    }

    .theme-switcher-btn:hover, .theme-switcher-btn:focus {
      background: var(--color-btn-hover);
      color: var(--color-link-hover);
      box-shadow: 0 0 6px 0 var(--color-primary-glow);
    }

    .navbar-links li {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
      position: relative;
    }
    .navbar-links a {
      display: inline-block;
      padding: 0.25rem 0.9rem;
      line-height: 1.2;
      font-size: 1.08rem;
      font-family: inherit;
      font-weight: 500;
      vertical-align: middle;
      border-radius: 9999px;
      position: relative;
      z-index: 1;
      background: transparent;
      color: var(--color-link);
      transition: color 0.2s, background 0.2s;
      text-decoration: none !important;
    }
    .navbar-links a:hover,
    .navbar-links a:focus {
      color: var(--color-link-hover);
      background: var(--color-btn-bg);
      text-decoration: none !important;
    }
    .navbar-links a::after {
      content: "";
      display: block;
      position: absolute;
      left: 10%;
      right: 10%;
      bottom: -0.4em;
      height: 2px;
      background: var(--color-primary);
      border-radius: 2px;
      opacity: 0;
      transform: scaleX(0);
      transition: opacity 0.18s, transform 0.18s;
      pointer-events: none;
    }
    .navbar-links a:hover::after,
    .navbar-links a:focus::after {
      opacity: 1;
      transform: scaleX(1);
    }
    .navbar-links a:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    /* --- HEADINGS --- */
    .themed-heading,
    h1, h2, h3, h4 {
      color: var(--color-primary);
      text-shadow: 0 1px 1px var(--color-primary-glow);
      font-family: 'itron', Arial, sans-serif;
      font-weight: bold;
      letter-spacing: 0.03em;
      transition: color 0.4s, text-shadow 0.4s;
    }
    h1, h2 {
      font-size: 2.2rem;
    }
    h3 {
      font-size: 1.3rem;
    }
    h4 {
      font-size: 1.1rem;
    }

    /* --- BUTTONS --- */
    .themed-btn,
    button {
      border: 2px solid var(--color-primary);
      color: var(--color-primary);
      background: var(--color-btn-bg);
      border-radius: 9999px;
      font-family: 'Orbitron', Arial, sans-serif;
      font-weight: bold;
      box-shadow: 0 0 0.5px 0 var(--color-primary-glow);
      transition: background 0.5s, color 0.5s, border-color 0.5s, box-shadow 0.5s;
      cursor: pointer;
      text-decoration: none;
    }
    .themed-btn:hover, .themed-btn:focus,
    button:hover, button:focus, input:focus, textarea:focus {
      background: var(--color-btn-hover);
      color: var(--color-link-hover);
      box-shadow: 0 0 1px 0 var(--color-primary-glow);
      outline: none;
      text-decoration: none;
    }

  .themed.btn, button, a {
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

    /* --- CARD & SECTION STYLES --- */
    .tool-card, .blog-card, .contact-form, .themed-shadow, .skill-card {
      background: var(--color-card-bg);
      border: 1.5px solid var(--color-card-border);
      border-radius: 1.1rem;
      box-shadow: 0 1px 1.5px 0 var(--color-primary-glow); /* Softer, lighter shadow */
      transition: box-shadow 0.3s, border-color 0.3s, background 0.2s, transform 0.3s;
    }

  .contact-form {
    box-shadow: none !important; /* Remove shadow for contact form */ 
    padding: 5px;
  }

/* Testimonials and Let's Connect section */
#testimonials .themed-shadow,
#footer-contact.themed-shadow,
#footer-contact,
#testimonials blockquote {
  transition: box-shadow 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
}

/* Ensure all scale effects use duration-300 for smoothness */
.blog-card:hover,
.blog-card:focus,
.tool-card:hover,
.tool-card:focus-within
#testimonials blockquote:hover,
#testimonials blockquote:focus,
#footer-contact:hover,
#footer-contact:focus,
.themed-shadow:hover,
.themed-shadow:focus {
  transition: box-shadow 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
}

    /* --- TOOLS SECTION: Minimal, Professional, Structured (like Skills) --- */
  .tools-card-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 1.1rem;
     margin-bottom: 2rem;
     width: 100%;
     padding: 0.5rem 0;
    }

    .tool-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 120px;
      min-width: 220px;
      max-width: 420px;
      width: 100%;
      padding: 1.1rem 1.2rem 0.9rem 1.2rem;
      text-align: center;
      color: var(--color-secondary);
      margin-left: auto;
      margin-right: auto;
    }
    .tool-card:hover, .tool-card:focus-within {
      border-color: var(--color-primary);
      background: var(--color-bg-alt);
      box-shadow: 0 0 2px 0 var(--color-primary-glow); /* Softer, lighter shadow on hover */
    }
    .tool-card .tool-icon {
      font-size: 2.1rem;
      margin-bottom: 0.5rem;
      color: var(--color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 0.5rem;
    }
    .tool-card .tool-icon i,
    .tool-card .tool-icon svg {
      color: var(--color-primary) !important;
      fill: var(--color-primary) !important;
      width: 2.1rem;
      height: 2.1rem;
      display: block;
      background: none !important;
      --webkit-background-clip: initial !important;
      -webkit-text-fill-color: initial !important;
      filter: none !important;
      text-shadow: none !important;
    }
    .tool-card h3 {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--color-primary);
      margin-bottom: 0.2rem;
      font-family: 'Orbitron', Arial, sans-serif;
      letter-spacing: 0.01em;
      text-shadow: none;
      line-height: 1.2;
    }
    .tool-card p {
      color: var(--color-secondary);
      margin-bottom: 0.7rem;
      font-size: 0.93rem;
      line-height: 1.4;
      opacity: 0.93;
      font-family: 'Poppins', Arial, sans-serif;
    }
    .tool-card .tool-btn {
      display: inline-block;
      padding: 0.35rem 1.1rem;
      border-radius: 9999px;
      background: var(--color-btn-bg);
      border: 1.2px solid var(--color-primary);
      color: var(--color-primary);
      font-family: 'Orbitron', Arial, sans-serif;
      font-weight: 600;
      font-size: 0.93rem;
      letter-spacing: 0.01em;
      box-shadow: 0 1px 2px 0 var(--color-primary-glow);
      transition: background var(--transition), color var(--transition), border-color var(--transition);
      text-align: center;
      margin-top: auto;
      margin-bottom: 0.1rem;
      text-decoration: none !important;
    }
    .tool-card .tool-btn:hover, .tool-card .tool-btn:focus {
      background: var(--color-btn-hover);
      color: var(--color-link-hover);
      border-color: var(--color-primary);
      box-shadow: 0 1px 2px 0 var(--color-primary-glow);
    }

    /* --- FORM INPUTS --- */
    input, textarea {
      background: var(--color-bg-alt);
      color: var(--color-secondary);
      border: 1.5px solid var(--color-border);
      padding: 0.7em 1em;
      font-size: 1rem;
      font-family: 'Poppins', Arial, sans-serif;
      transition: border-color 0.2s, box-shadow 0.2s;
      box-shadow: 0 1px 2px 0 var(--color-primary-glow);
      outline: none;
    }

      /* Glowing CTA Button Animation */
.cta-glow {
  position: relative;
  z-index: 1;
  transition: box-shadow 0.3s;
}

.cta-glow:hover,
.cta-glow:focus {
  box-shadow: 0 1px 4px 0 var(--color-primary-glow, #00fff766), 0 0 5px 0 var(--color-primary-glow, #00fff733);
  outline: none;
}

.cta-glow > * {
  position: relative;
  z-index: 1;
}
    /* --- LINKS --- */
    a, button, .themed-btn {
      color: var(--color-link);
      text-decoration: none !important;
      transition: color 0.2s;
      box-shadow: 0 0 0.5px 0 var(--color-primary-glow);
    }
    a:hover, a:focus {
      color: var(--color-link-hover);
      text-decoration: none;
    }

    /* Force the resume button to keep its background color on hover */
    .resume-button,
    .resume-button:hover,
    .resume-button:focus {
      background: var(--color-primary) !important;
      color: var(--color-bg) !important;
    }
    
    @media (max-width: 400px) {
      .tool-card h3 {
        font-size: 0.98rem;
      }
      .tool-card p {
        font-size: 0.89rem;
      }
      .tool-card .tool-btn {
        font-size: 0.89rem;
        padding: 0.4rem 0.8rem;
      }
    }

  @media (max-width: 500px) {
  .mobile-navbar {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .mobile-navbar .logo-ring {
    width: 2.3rem !important;
    height: 2.3rem !important;
  }
  .mobile-navbar img {
    width: 2rem !important;
    height: 2rem !important;
  }
  .theme-switcher-btn {
    min-width: 80px !important;
    padding: 0.3rem 0.7rem !important;
    font-size: 0.95rem !important;
  }
}

@media (max-width: 600px) {
  .tools-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.5rem;
  }
  .tool-card {
    padding: 0.7rem 0.6rem 0.5rem 0.6rem;
    min-width: 160px;
    max-width: 100%;
  }
  .tool-card h3 {
    font-size: 1.05rem;
  }
  .tool-card p {
    font-size: 0.95rem;
  }
  .tool-card .tool-btn {
    font-size: 0.95rem;
    padding: 0.4rem 1rem;
  }
    }

    @media (max-width: 768px) {
      .tools-card-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
      }
      .tool-card {
        min-width: 0;
        width: 100%;
        padding: 0.7rem 0.3rem 0.5rem 0.3rem;
        max-width: 100%;
      }
    }

  @media (max-width: 900px) {
  .navbar-inner {
    gap: 0.7rem;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
  .navbar-links {
    gap: 0.7rem;
  }
}

    /* Responsive Navbar Fixes */
@media (max-width: 1024px) {
  .navbar-inner {
    gap: 1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .navbar-links {
    gap: 1.2rem;
  }
}

@media (min-width: 1279px) and (max-width: 1480px) {
  .navbar-inner {
    gap: 1.5rem;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
  .navbar-links {
    gap: 1.5rem;
  }
  /* Show hamburger, hide links for this range */
  #menu-btn {
    display: block !important;
  }
  .navbar-links {
    display: none !important;
  }
}


/* Remove transform-gpu, [will-change:transform], backface-hidden, antialiased from global selectors and only use where necessary */

/* Remove from global selectors (if present) */

/* No global .transform-gpu, [will-change:transform], .backface-hidden, .antialiased */

/* Only apply to elements where GPU acceleration is actually needed, e.g., cards that scale on hover */

/* Remove from other elements if present in your HTML (do not add to all children) */

/* Remove box-shadow on mobile for performance */
@media (max-width: 600px) {
  .tool-card,
  .blog-card,
  .themed-shadow,
  .skill-card,
  .tool-card .tool-btn,
  .themed-btn,
  button,
  a,
  .theme-switcher-btn {
    box-shadow: none !important;
  }
}

/* ===== Theme-aware page background (restores dark background per active theme) ===== */
html, body {
  height: 100%;
  background: var(--color-bg, #0b0c10);
  color: var(--color-secondary, #cccccc);
  font-family: system-ui, -apple-system, "Inter", "Poppins", "Segoe UI", Roboto, "Helvetica Neue", Arial;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  transition: background var(--transition, 0.3s) ease, color var(--transition, 0.3s) ease;
}

/* Ensure the star canvas is above the stardust overlay (no JS changes required) */
#star-canvas {
	/* must be higher than the overlay (50000) so the starfield remains visible */
	z-index: 60000 !important;
	pointer-events: none;
}

/* Theme-aware body background (keeps dark themes visible) */
html.theme-cosmic body,
html.theme-nebula body,
html.theme-eclipse body {
  background: var(--color-bg);
  color: var(--color-secondary);
}

/* Stardust overlay — 3 layered depth effect using the provided texture.
   - image: https://www.transparenttextures.com/patterns/stardust.png
   - layers drift from top-right to bottom-left, layer1 fastest -> layer3 slowest
   - overlay is behind UI but under the star canvas (#star-canvas)
*/
body {
  /* custom properties for each layer's position */
  --sd1-x: 100%; --sd1-y: 0%;
  --sd2-x: 100%; --sd2-y: 0%;
  --sd3-x: 100%; --sd3-y: 0%;
  position: relative; /* keep existing layout behavior */
}

/* single fixed pseudo-element with three repeated images (explicit URLs for reliability) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0; /* behind content but above page background */
  pointer-events: none;
  /* don't rely on blend modes that can hide subtle texture on some themes */
  mix-blend-mode: normal;
  /* slightly stronger but still subtle */
  opacity: 0.10;
  background-image:
    url("https://www.transparenttextures.com/patterns/stardust.png"),
    url("https://www.transparenttextures.com/patterns/stardust.png"),
    url("https://www.transparenttextures.com/patterns/stardust.png");
  background-repeat: repeat, repeat, repeat;
  /* different sizes per layer to create depth */
  background-size: 320px 320px, 680px 680px, 1200px 1200px;
  /* positions controlled by CSS custom properties that animations will update */
  background-position:
    var(--sd1-x) var(--sd1-y),
    var(--sd2-x) var(--sd2-y),
    var(--sd3-x) var(--sd3-y);
  will-change: background-position, opacity;
}

/* Animations: move from top-right toward bottom-left */
@keyframes stardust-move-1 { from { --sd1-x: 100%; --sd1-y: 0%; } to { --sd1-x: 0%; --sd1-y: 100%; } }
@keyframes stardust-move-2 { from { --sd2-x: 100%; --sd2-y: 0%; } to { --sd2-x: 0%; --sd2-y: 100%; } }
@keyframes stardust-move-3 { from { --sd3-x: 100%; --sd3-y: 0%; } to { --sd3-x: 0%; --sd3-y: 100%; } }

/* attach animations with staggered durations (layer1 fastest) */
body::before {
  animation:
    stardust-move-1 12s linear infinite,
    stardust-move-2 30s linear infinite,
    stardust-move-3 72s linear infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none !important;
    /* static centered sprinkling */
    --sd1-x: 50%; --sd1-y: 50%;
    --sd2-x: 50%; --sd2-y: 50%;
    --sd3-x: 50%; --sd3-y: 50%;
    opacity: 0.04;
  }
}

/* Disable old pseudo-element stardust overlay (we inject a reliable DOM overlay via JS) */
body::before {
  display: none !important;
}

/* Ensure the main content sits above the stardust overlay so UI remains fully visible */
#main-content {
  position: relative;
  z-index: 10; /* higher than overlay (0) but lower than intentionally high UI like #star-canvas or nav */
}