/* --- NAVBAR BACKGROUND --- */
    .navbar-header {
      background: 
        linear-gradient(135deg, rgba(0, 208, 132, 0.08), transparent 40%),
        linear-gradient(225deg, rgba(0, 168, 107, 0.06), transparent 50%),
        linear-gradient(45deg, #0b1220, #0a0f1a);
      position: relative;
    }

    .navbar-bg-wrapper {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: -1;
      pointer-events: none;
    }

    .navbar-bg-wrapper::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: 
        linear-gradient(120deg, rgba(255,255,255,0.03) 25%, transparent 25%),
        linear-gradient(240deg, rgba(255,255,255,0.03) 25%, transparent 25%);
      background-size: 60px 60px;
      opacity: 0.25;
    }

    .navbar-bg-wrapper::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 208, 132, 0.08),
        transparent
      );
      animation: navFlow 8s linear infinite;
    }

    @keyframes navFlow {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    /* --- GLOBAL BODY BACKGROUND --- */
    .bg-wrapper {
      position: fixed;
      inset: 0;
      z-index: -1;
      overflow: hidden;
    }

    .bg-wrapper::after {
      content: "";
      position: absolute;
      inset: 0;
      background: 
        radial-gradient(circle at 20% 70%, rgba(255,255,255,0.03) 0%, transparent 20%),
        radial-gradient(circle at 80% 30%, rgba(255,255,255,0.02) 0%, transparent 25%);
    }

    .bg-glow {
      position: absolute;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 30% 20%, rgba(0,255,180,0.12), transparent 40%),
                  radial-gradient(circle at 70% 80%, rgba(0,200,255,0.10), transparent 40%);
      animation: glowMove 25s ease-in-out infinite alternate;
    }

    @keyframes glowMove {
      0% { transform: translate(0%, 0%) scale(1); }
      100% { transform: translate(-10%, -10%) scale(1.1); }
    }

    .bg-particles {
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(0,255,180,0.15) 1px, transparent 1px);
      background-size: 60px 60px;
      animation: particleDrift 60s linear infinite;
      opacity: 0.25;
    }

    @keyframes particleDrift {
      from { transform: translateY(0); }
      to { transform: translateY(-200px); }
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
    }

    .logo-icon {
      width: 32px;
      height: 32px;
    }

    /* TEXT */
    .logo-text .main {
      display: block;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: #e6f1f0;
      position: relative;
    }

    .logo-text .sub {
      display: block;
      font-size: 10px;
      letter-spacing: 0.18em;
      color: #00d084;
    }