:root {
            --bg-black: #0B0B0D;
            --soft-white: #F5F5F7;
            --cool-gray: #9A9AA0;
            --electric-cyan: #00E5FF;
            --neon-blue: #2F80ED;
        }

        body {
            background-color: var(--bg-black);
            color: var(--soft-white);
            font-family: 'Space Grotesk', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .font-mono { font-family: 'IBM Plex Mono', monospace; }

        /* Custom UI Elements */
        .glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.08); }
        .hero-gradient { background: linear-gradient(to bottom, transparent 0%, var(--bg-black) 95%); }
        .sidebar-transition { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
        .page-section { display: none; }
        .page-section.active { display: block; animation: fadeIn 1s ease forwards; }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Interactions */
        .cyan-glow:hover { box-shadow: 0 0 30px rgba(0, 229, 255, 0.15); border-color: var(--electric-cyan); }
        .nav-active { color: white !important; position: relative; }
        .nav-active::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; background: var(--electric-cyan); }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: #0B0B0D; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--electric-cyan); }

        #loader {
            position: fixed; inset: 0; background: #000; z-index: 9999;
            display: flex; align-items: center; justify-content: center;
            transition: opacity 0.8s ease;
        }

        /* Responsive spacing utilities */
        .section-padding { padding-top: 10rem; padding-bottom: 10rem; }
        @media (max-width: 768px) { .section-padding { padding-top: 6rem; padding-bottom: 6rem; } }
      .nav-btn {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: bold;
    color: #6b7280;
    transition: all 0.3s;
  }
  .nav-btn:hover,
  .nav-active {
    color: white;
  }

  .mobile-nav-btn {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #9ca3af;
  }