nav {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background: rgba(9, 9, 9, 0.85);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid rgba(245, 222, 179, 0.15);
   padding: 16px 0;
   z-index: 1000;
   transition: all 0.3s ease;
}

nav::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--main-surface-color), transparent);
   opacity: 0.5;
}

nav ul {
   list-style: none;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 40px;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}

nav ul li a {
   color: var(--main-text-color);
   text-decoration: none;
   font-size: 15px;
   font-weight: 500;
   letter-spacing: 3px;
   text-transform: uppercase;
   padding: 12px 20px;
   border-radius: 6px;
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   position: relative;
   overflow: hidden;
}

/* nav ul li a::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(245, 222, 179, 0.1), transparent);
   transition: left 0.5s ease;
} */

nav ul li a:hover::before {
   left: 100%;
}

nav ul li a:hover {
   color: var(--main-bg-color);
   background: linear-gradient(135deg, var(--main-surface-color), #d4a574);
   transform: translateY(-3px);
   box-shadow: 0 8px 25px rgba(245, 222, 179, 0.3);
}

nav ul li a::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   width: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--main-surface-color), #d4a574);
   transition: all 0.3s ease;
   transform: translateX(-50%);
}

nav ul li a:hover::after {
   width: 80%;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
   nav {
       padding: 12px 0;
   }
   
   nav ul {
       gap: 15px;
       padding: 0 15px;
   }

   nav ul li a {
       font-size: 12px;
       letter-spacing: 1px;
       padding: 8px 12px;
   }
}

@media (max-width: 600px) {
   nav ul {
       gap: 8px;
       flex-wrap: wrap;
       justify-content: center;
   }

   nav ul li a {
       font-size: 11px;
       padding: 6px 10px;
   }
}