/* Global Colors & Selection */
    * { -webkit-tap-highlight-color: transparent; }
    ::selection { background: rgba(99, 102, 241, 0.3); }

    /* Navbar/Footer skeleton — prevents layout shift while components load */
    #navbar-placeholder:empty {
      min-height: 73px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    #footer-placeholder:empty {
      min-height: 200px;
    }

    /* Logo & Branding */
    .logo-hover {
      display: flex;
      align-items: center;
      gap: 0.875rem;
      text-decoration: none;
      color: #fff;
      transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
    }
    .logo-hover:hover {
      transform: translateY(-1px);
    }
    .logo-stack {
      display: flex;
      flex-direction: column;
      line-height: 1;
    }
    .logo-main {
      font-family: 'Oswald', sans-serif;
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: #fff;
      text-transform: uppercase;
    }
    .logo-sub {
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-size: 0.72rem !important;
      font-weight: 800 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.03em !important;
      color: rgba(255, 255, 255, 0.4) !important;
      margin-top: 1px !important;
      display: block !important;
      white-space: nowrap !important;
    }

    /* Animated Border Effect */
    @property --border-angle {
      syntax: "<angle>";
      inherits: true;
      initial-value: 0deg;
    }
    @keyframes borderSpin {
      0% { --border-angle: 0deg; }
      100% { --border-angle: 360deg; }
    }
    .heroSecondary {
      position: relative !important;
      border: none !important;
      background: rgba(255, 255, 255, 0.05) !important;
      z-index: 1;
      backdrop-filter: blur(8px);
      font-family: 'Oswald', sans-serif;
    }
    .heroSecondary::before {
      content: "";
      position: absolute;
      inset: -1px;
      padding: 1px;
      border-radius: 9999px;
      background: conic-gradient(from var(--border-angle), transparent 20%, rgba(255, 255, 255, 0.7) 50%, transparent 80%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: borderSpin 3s linear infinite;
      z-index: -1;
      pointer-events: none;
    }
    .heroSecondary:hover {
      background: rgba(255, 255, 255, 0.1) !important;
    }

    /* Background Atmospheric Elements */
    .grid-overlay { 
      position: fixed; 
      inset: 0; 
      z-index: 0; 
      pointer-events: none; 
      background-image: linear-gradient(rgba(99,102,241,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,0.04) 1px,transparent 1px); 
      background-size: 80px 80px; 
    }
    .orb { 
      position: fixed; 
      border-radius: 50%; 
      filter: blur(120px); 
      pointer-events: none; 
      opacity: 0.25; 
      animation: orbDrift 18s ease-in-out infinite alternate; 
      z-index: 0;
    }
    @keyframes orbDrift { 
      0% { transform: translate(0,0) scale(1); } 
      100% { transform: translate(60px,40px) scale(1.1); } 
    }

    /* Responsive Visibility Utilities */
    @media (min-width: 769px) {
      .desktop-nav { 
        display: flex !important; 
        font-family: 'Oswald', sans-serif !important;
        letter-spacing: 0.15em;
      }
      .mobile-nav-toggle { 
        display: none !important; 
        visibility: hidden !important;
        pointer-events: none !important;
      }
    }
    @media (max-width: 768px) {
      .desktop-nav { display: none !important; }
      .mobile-nav-toggle { 
        display: flex !important; 
        visibility: visible !important;
        pointer-events: auto !important;
      }
    }

    /* Unified Mobile Menu */
    /* NOTE: all link animations are handled exclusively by GSAP in landing-boot.js
       — do NOT add CSS transitions or keyframes for .mobile-nav-link here */
    #mobileMenu {
      position: fixed;
      inset: 0;
      background: radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.25) 0%, rgba(147, 51, 234, 0.15) 40%, #000 80%);
      z-index: 9999999;
      opacity: 0;
      pointer-events: none;
      /* No CSS transition — GSAP drives opacity/clip-path */
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 32px;
      color: white;
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
    }
    /* Initial invisible state; GSAP fromTo takes over on open */
    #mobileMenu .mobile-nav-link {
      font-family: 'Oswald', sans-serif !important;
      opacity: 0;
      will-change: opacity, transform;
      /* Only color transition — GSAP owns transform & opacity */
      transition: color 0.25s ease;
    }
    #mobileMenu .mobile-nav-link:hover {
      color: #818cf8 !important;
    }