Implement mobile navigation menu and enhance navbar responsiveness

style.css

@@ -48,12 +48,21 @@ body {
     font-size: 12px;
 }
 
+.logo a {
+    display: block;
+}
+
 .logo img {
     height: 32px;
     width: auto;
     display: block;
 }
 
+.nav-links {
+    display: flex;
+    align-items: center;
+}
+
 .nav-links a {
     text-decoration: none;
     color: var(--text-primary);
@@ -66,6 +75,12 @@ body {
     opacity: 1;
 }
 
+.nav-cta-container {
+    display: flex;
+    align-items: center;
+    margin-left: 24px;
+}
+
 .nav-cta {
     background: #0071e3;
     color: white !important;
@@ -75,6 +90,7 @@ body {
     font-weight: 500;
     opacity: 1 !important;
     transition: all 0.2s;
+    text-decoration: none;
 }
 
 .nav-cta:hover {
@@ -705,3 +721,130 @@ footer {
 #sponsors-table tr:hover {
     background-color: #f5f5f7;
 }
+
+/* Mobile Navbar Optimization */
+.mobile-toggle {
+    display: none;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    font-size: 20px;
+    cursor: pointer;
+    padding: 0;
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: background 0.2s;
+}
+
+.mobile-toggle:hover {
+    background: rgba(0,0,0,0.05);
+}
+
+.mobile-menu {
+    position: fixed;
+    top: 44px;
+    left: 0;
+    width: 100%;
+    height: 0;
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    overflow: hidden;
+    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
+    opacity: 0;
+    visibility: hidden;
+    z-index: 998;
+}
+
+.mobile-menu.active {
+    height: calc(100vh - 44px);
+    opacity: 1;
+    visibility: visible;
+}
+
+.mobile-menu-links {
+    padding: 24px 40px;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.mobile-menu-links a {
+    display: block;
+    font-size: 24px;
+    font-weight: 600;
+    text-decoration: none;
+    color: var(--text-primary);
+    padding: 16px 0;
+    border-bottom: 1px solid rgba(0,0,0,0.05);
+    opacity: 0; 
+    transform: translateY(-20px);
+    transition: all 0.4s ease;
+}
+
+.mobile-menu.active .mobile-menu-links a {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Stagger animation */
+.mobile-menu.active .mobile-menu-links a:nth-child(1) { transition-delay: 0.1s; }
+.mobile-menu.active .mobile-menu-links a:nth-child(2) { transition-delay: 0.15s; }
+.mobile-menu.active .mobile-menu-links a:nth-child(3) { transition-delay: 0.2s; }
+.mobile-menu.active .mobile-menu-links a:nth-child(4) { transition-delay: 0.25s; }
+.mobile-menu.active .mobile-menu-links a:nth-child(5) { transition-delay: 0.3s; }
+
+/* Desktop Adjustment to keep alignment with split items */
+@media (min-width: 769px) {
+    .nav-links.desktop-only {
+        margin-left: auto; /* Push links and CTA to right */
+    }
+    .nav-cta-container {
+        margin-left: 24px;
+    }
+}
+
+/* Responsive Navbar Adjustments */
+@media (max-width: 768px) {
+    .nav-content {
+        justify-content: space-between;
+        padding: 0 15px;
+    }
+
+    .desktop-only {
+        display: none !important;
+    }
+
+    .mobile-toggle {
+        display: flex;
+        order: 1; /* Left */
+    }
+    
+    .logo {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        order: 2; /* Center */
+        margin: 0;
+    }
+    
+    .nav-cta-container {
+        order: 3; /* Right */
+        margin: 0;
+    }
+
+    .nav-cta {
+        padding: 6px 12px;
+        font-size: 11px;
+    }
+    
+    /* Prevent body scroll when menu is open */
+    body.menu-open {
+        overflow: hidden;
+    }
+}