/* ===== TOP TEXT BAR ===== */
   .top-text-bar {
       background: var(--dark-gradient-primary);
       border-bottom: 1px solid var(--dark-border-primary);
       padding: 8px 0;
       position: relative;
       overflow: hidden;
       z-index: 1002;
   }
   
   .top-text-bar::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><circle cx="10" cy="10" r="2" fill="%23ffffff" opacity="0.06"/><circle cx="30" cy="5" r="1.5" fill="%23ffffff" opacity="0.06"/></svg>') repeat-x;
       animation: particles-float 20s linear infinite;
   }
   
   @keyframes particles-float {
       0% { transform: translateX(0); }
       100% { transform: translateX(-100px); }
   }
   
   .top-text-bar.scrolling .scrolling-text-content {
       display: flex;
       white-space: nowrap;
       animation: scroll-text 25s linear infinite;
       position: relative;
       z-index: 2;
   }
   
   @keyframes scroll-text {
       0% { transform: translateX(100%); }
       100% { transform: translateX(-100%); }
   }
   
   .top-text-bar.scrolling .scrolling-text-content span,
   .top-text-bar.fixed .fixed-text-content span {
       color: var(--dark-text-secondary);
       font-size: 0.85rem;
       font-weight: 500;
       font-family: var(--font-secondary);
       letter-spacing: 0.5px;
   }
   
   .top-text-bar.fixed .fixed-text-content {
       text-align: center;
       position: relative;
       z-index: 2;
   }
   
   /* ===== ADVANCED TOPBAR ===== */
   .advanced-topbar {
       background: var(--dark-bg-tertiary);
       border-bottom: 1px solid var(--dark-border-primary);
       padding: 12px 0;
       position: relative;
       z-index: 1001;
   }
   
   .topbar-wrapper {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 30px;
   }
   
   /* Contact Section */
   .contact-section {
       display: flex;
       gap: 30px;
       align-items: center;
   }
   
   .contact-item {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 8px 16px;
       background: var(--dark-overlay-light);
       border-radius: var(--border-radius-md);
       border: 1px solid var(--dark-border-primary);
       transition: all var(--transition-normal);
   }
   
   .contact-item:hover {
       background: var(--dark-overlay-medium);
       border-color: var(--dark-border-accent);
       transform: translateY(-2px);
   }
   
   .contact-icon {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 32px;
       height: 32px;
       background: var(--dark-gradient-accent);
       border-radius: 50%;
       color: var(--dark-text-primary);
       font-size: 0.9rem;
   }
   
   .contact-text {
       color: var(--dark-text-secondary);
       font-weight: 500;
       font-size: 0.9rem;
   }
   
   /* Action Section */
   .action-section {
       display: flex;
       align-items: center;
       gap: 25px;
   }
   
   .social-hub {
       display: flex;
       gap: 8px;
       align-items: center;
       padding: 8px;
       background: var(--dark-overlay-light);
       border-radius: var(--border-radius-lg);
       border: 1px solid var(--dark-border-primary);
   }
   
   .social-link {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 36px;
       height: 36px;
       border-radius: 50%;
       color: var(--dark-text-muted);
       transition: all var(--transition-normal);
       font-size: 1rem;
       text-decoration: none;
   }
   
   .social-link:hover {
       color: var(--dark-text-primary);
       transform: translateY(-2px);
       text-decoration: none;
   }
   
   .social-link.discord:hover { background: #5865f2; color: white; }
   .social-link.twitter:hover { background: #1da1f2; color: white; }
   .social-link.instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; }
   .social-link.youtube:hover { background: #ff0000; color: white; }
   
   .social-tooltip {
       position: absolute;
       bottom: -35px;
       left: 50%;
       transform: translateX(-50%);
       background: var(--dark-bg-quaternary);
       color: var(--dark-text-primary);
       padding: 6px 10px;
       border-radius: var(--border-radius-md);
       font-size: 0.75rem;
       white-space: nowrap;
       opacity: 0;
       visibility: hidden;
       transition: all var(--transition-normal);
       border: 1px solid var(--dark-border-primary);
   }
   
   .social-link:hover .social-tooltip {
       opacity: 1;
       visibility: visible;
       transform: translateX(-50%) translateY(-5px);
   }
   
   /* Topbar Become Booster Button */
   .topbar-become-booster {
       display: flex;
       align-items: center;
   }
   
   .topbar-booster-btn {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 12px 18px;
       background: var(--dark-gradient-accent);
       border: 2px solid var(--dark-border-accent);
       border-radius: var(--border-radius-lg);
       text-decoration: none;
       transition: all var(--transition-normal);
       box-shadow: var(--dark-shadow-md), var(--dark-glow-primary);
       position: relative;
       overflow: hidden;
   }
   
   .topbar-booster-btn::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
       transition: left 0.5s;
   }
   
   .topbar-booster-btn:hover::before {
       left: 100%;
   }
   
   .topbar-booster-btn:hover {
       background: var(--dark-accent-primary);
       text-decoration: none;
       transform: translateY(-2px);
       box-shadow: var(--dark-shadow-lg), var(--dark-glow-primary);
       border-color: var(--dark-accent-secondary);
   }
   
   .topbar-btn-icon {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 28px;
       height: 28px;
       background: rgba(255, 255, 255, 0.15);
       border-radius: 50%;
       color: var(--dark-text-primary);
       font-size: 0.9rem;
       transition: all var(--transition-normal);
   }
   
   .topbar-booster-btn:hover .topbar-btn-icon {
       background: rgba(255, 255, 255, 0.25);
       transform: rotate(360deg) scale(1.1);
   }
   
   .topbar-btn-text {
       color: var(--dark-text-primary);
       font-weight: 700;
       font-size: 0.9rem;
       font-family: var(--font-secondary);
       white-space: nowrap;
       transition: all var(--transition-normal);
   }
   
   /* User Dashboard */
   .user-dashboard {
       display: flex;
       align-items: center;
       gap: 15px;
   }
   
   .auth-buttons {
       display: flex;
       gap: 10px;
   }
   
   .auth-btn {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 10px 18px;
       border-radius: var(--border-radius-md);
       text-decoration: none;
       font-weight: 600;
       font-size: 0.9rem;
       transition: all var(--transition-normal);
       border: 1px solid transparent;
   }
   
   .login-btn {
       background: var(--dark-overlay-medium);
       color: var(--dark-text-secondary);
       border-color: var(--dark-border-primary);
   }
   
   .login-btn:hover {
       background: var(--dark-overlay-accent);
       color: var(--dark-text-primary);
       text-decoration: none;
       transform: translateY(-2px);
       border-color: var(--dark-border-accent);
   }
   
   .register-btn {
       background: var(--dark-gradient-accent);
       color: var(--dark-text-primary);
       box-shadow: var(--dark-glow-primary);
   }
   
   .register-btn:hover {
       background: var(--dark-accent-primary);
       color: var(--dark-text-primary);
       text-decoration: none;
       transform: translateY(-2px);
       box-shadow: var(--dark-shadow-lg), var(--dark-glow-primary);
   }
   
   .user-panel {
       display: flex;
       align-items: center;
       gap: 15px;
   }
   
   .balance-display {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 16px;
       background: var(--dark-gradient-accent);
       border-radius: var(--border-radius-md);
       color: var(--dark-text-primary);
       font-weight: 600;
       box-shadow: var(--dark-glow-primary);
   }
   
   .balance-amount {
       font-size: 1rem;
   }
   
   .user-actions {
       display: flex;
       gap: 6px;
   }
   
   .action-btn {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       color: var(--dark-text-muted);
       background: var(--dark-overlay-medium);
       border: 1px solid var(--dark-border-primary);
       transition: all var(--transition-normal);
       text-decoration: none;
       font-size: 1rem;
   }
   
   .action-btn:hover {
       color: var(--dark-text-primary);
       background: var(--dark-overlay-accent);
       text-decoration: none;
       transform: translateY(-2px);
       border-color: var(--dark-border-accent);
   }
   
   /* ===== PREMIUM HEADER ===== */
   .premium-header {
       background: var(--dark-bg-secondary);
       border-bottom: 2px solid var(--dark-border-accent);
       position: sticky;
       top: 0;
       z-index: 1000;
       transition: all var(--transition-normal);
       box-shadow: var(--dark-shadow-xl);
   }
   
   .header-backdrop {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="%23ffffff" opacity="0.03"/><circle cx="80" cy="80" r="1.5" fill="%23ffffff" opacity="0.03"/></svg>') repeat;
       animation: backdrop-drift 40s linear infinite;
   }
   
   @keyframes backdrop-drift {
       0% { transform: translate(0, 0); }
       100% { transform: translate(-100px, -100px); }
   }
   
   .premium-nav-container {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 20px 0;
       position: relative;
       z-index: 2;
   }
   
   /* ===== BRAND SECTION ===== */
   .brand-section {
       flex: 0 0 auto;
   }
   
   .premium-brand {
       display: block;
       text-decoration: none;
       transition: all var(--transition-normal);
   }
   
   .premium-brand:hover {
       text-decoration: none;
       transform: scale(1.02);
   }
   
   .brand-visual {
       display: flex;
       align-items: center;
       gap: 18px;
   }
   
   .brand-icon-container {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 70px;
       height: 70px;
   }
   
   .brand-icon-bg {
       position: absolute;
       width: 100%;
       height: 100%;
       background: var(--dark-gradient-accent);
       border-radius: 50%;
       border: 3px solid var(--dark-border-accent);
       box-shadow: var(--dark-shadow-lg), var(--dark-glow-primary);
   }
   
   .brand-icon {
       font-size: 32px;
       color: var(--dark-text-primary);
       z-index: 2;
       animation: brand-pulse 3s ease-in-out infinite;
   }
   
   @keyframes brand-pulse {
       0%, 100% { transform: scale(1); }
       50% { transform: scale(1.1); }
   }
   
   .brand-pulse-ring {
       position: absolute;
       width: 100%;
       height: 100%;
       border: 2px solid var(--dark-accent-primary);
       border-radius: 50%;
       animation: pulse-ring 2s ease-out infinite;
       opacity: 0;
   }
   
   @keyframes pulse-ring {
       0% {
           transform: scale(1);
           opacity: 1;
       }
       100% {
           transform: scale(1.3);
           opacity: 0;
       }
   }
   
   .brand-text {
       display: flex;
       flex-direction: column;
       gap: 4px;
   }
   
   .brand-title {
       font-size: 2.2rem;
       font-weight: 900;
       color: var(--dark-text-primary);
       margin: 0;
       font-family: var(--font-primary);
       background: linear-gradient(135deg, var(--dark-text-primary), var(--dark-accent-primary));
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-shadow: 0 0 30px var(--dark-accent-primary);
   }
   
   .brand-tagline {
       font-size: 0.9rem;
       color: var(--dark-text-muted);
       margin: 0;
       font-weight: 500;
       letter-spacing: 2px;
       text-transform: uppercase;
       font-family: var(--font-secondary);
   }
   
   /* ===== PREMIUM NAVIGATION ===== */
   .premium-navigation {
       flex: 1;
       display: flex;
       justify-content: center;
       margin: 0 40px;
   }
   
   .nav-primary {
       display: flex;
       list-style: none;
       gap: 8px;
       margin: 0;
       padding: 0;
       align-items: center;
   }
   
   .nav-item {
       position: relative;
   }
   
   .nav-link {
       display: block;
       text-decoration: none;
       position: relative;
       transition: all var(--transition-normal);
   }
   
   .nav-link-content {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 14px 20px;
       background: var(--dark-overlay-light);
       border: 1px solid var(--dark-border-primary);
       border-radius: var(--border-radius-lg);
       transition: all var(--transition-normal);
   }
   
   .nav-icon {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 24px;
       height: 24px;
       color: var(--dark-text-muted);
       font-size: 1rem;
       transition: all var(--transition-normal);
   }
   
   .nav-text {
       color: var(--dark-text-secondary);
       font-weight: 600;
       font-size: 0.95rem;
       font-family: var(--font-secondary);
       transition: all var(--transition-normal);
   }
   
   .nav-arrow {
       color: var(--dark-text-muted);
       font-size: 0.8rem;
       transition: all var(--transition-normal);
   }
   
   .nav-glow {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: var(--dark-gradient-accent);
       border-radius: var(--border-radius-lg);
       opacity: 0;
       transition: all var(--transition-normal);
       z-index: -1;
   }
   
   .nav-link:hover .nav-link-content {
       background: var(--dark-overlay-medium);
       border-color: var(--dark-border-accent);
       transform: translateY(-3px);
       box-shadow: var(--dark-shadow-lg);
   }
   
   .nav-link:hover .nav-glow {
       opacity: 0.1;
   }
   
   .nav-link:hover .nav-icon {
       color: var(--dark-accent-primary);
       transform: scale(1.1);
   }
   
   .nav-link:hover .nav-text {
       color: var(--dark-text-primary);
   }
   
   .nav-link:hover .nav-arrow {
       color: var(--dark-accent-primary);
       transform: rotate(180deg);
   }
   
   /* Mega Dropdown */
   .mega-dropdown {
       position: absolute;
       top: calc(100% + 10px);
       left: 50%;
       transform: translateX(-50%);
       background: var(--dark-bg-tertiary);
       border: 2px solid var(--dark-border-accent);
       border-radius: var(--border-radius-xl);
       box-shadow: var(--dark-shadow-2xl);
       min-width: 600px;
       opacity: 0;
       visibility: hidden;
       transform: translateX(-50%) translateY(-20px);
       transition: all var(--transition-normal);
       z-index: 1000;
       backdrop-filter: var(--dark-backdrop-blur);
   }
   
   .nav-item.has-dropdown:hover .mega-dropdown {
       opacity: 1;
       visibility: visible;
       transform: translateX(-50%) translateY(0);
   }
   
   .dropdown-container {
       padding: 25px;
   }
   
   .dropdown-header {
       text-align: center;
       margin-bottom: 20px;
       padding-bottom: 15px;
       border-bottom: 1px solid var(--dark-border-primary);
   }
   
   .dropdown-header h3 {
       color: var(--dark-text-primary);
       margin: 0 0 5px 0;
       font-size: 1.3rem;
       font-weight: 700;
   }
   
   .dropdown-header p {
       color: var(--dark-text-muted);
       margin: 0;
       font-size: 0.9rem;
   }
   
   .dropdown-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 10px;
   
   }
   
   .dropdown-item {
       display: flex;
       align-items: center;
       gap: 15px;
       padding: 16px 20px;
       background: var(--dark-overlay-light);
       border: 1px solid var(--dark-border-primary);
       border-radius: var(--border-radius-lg);
       text-decoration: none;
       transition: all var(--transition-normal);
       position: relative;
       overflow: hidden;
   }
   
   .dropdown-item::before {
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       width: 4px;
       height: 100%;
       background: var(--dark-gradient-accent);
       transform: scaleY(0);
       transition: transform var(--transition-normal);
   }
   
   .dropdown-item:hover::before {
       transform: scaleY(1);
   }
   
   .dropdown-icon {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 40px;
       height: 40px;
       background: var(--dark-gradient-accent);
       border-radius: 50%;
       color: var(--dark-text-primary);
       font-size: 1.1rem;
       flex-shrink: 0;
   }
   
   .dropdown-content {
       flex: 1;
   }
   
   .dropdown-content h4 {
       color: var(--dark-text-primary);
       margin: 0 0 4px 0;
       font-size: 1rem;
       font-weight: 600;
       transition: all var(--transition-normal);
   }
   
   .dropdown-content p {
       color: var(--dark-text-muted);
       margin: 0;
       font-size: 0.85rem;
       transition: all var(--transition-normal);
   }
   
   .dropdown-arrow {
       color: var(--dark-text-muted);
       font-size: 0.9rem;
       transition: all var(--transition-normal);
   }
   
   .dropdown-item:hover {
       background: var(--dark-overlay-medium);
       border-color: var(--dark-border-accent);
       transform: translateX(8px);
       text-decoration: none;
   }
   
   .dropdown-item:hover .dropdown-content h4 {
       color: var(--dark-accent-primary);
   }
   
   .dropdown-item:hover .dropdown-content p {
       color: var(--dark-text-secondary);
   }
   
   .dropdown-item:hover .dropdown-arrow {
       color: var(--dark-accent-primary);
       transform: translateX(5px);
   }
   
   
   /* Mobile Menu Toggle */
   .mobile-toggle {
       display: none;
       flex-direction: column;
       cursor: pointer;
       gap: 4px;
   }
   
   .mobile-toggle span {
       width: 25px;
       height: 3px;
       background: var(--dark-text-secondary);
       transition: all var(--transition-normal);
       border-radius: 2px;
   }
   
   .mobile-toggle.active span:nth-child(1) {
       transform: rotate(45deg) translate(5px, 5px);
   }
   
   .mobile-toggle.active span:nth-child(2) {
       opacity: 0;
   }
   
   .mobile-toggle.active span:nth-child(3) {
       transform: rotate(-45deg) translate(7px, -6px);
   }
   
   /* Hide nav-menu on desktop */
   .nav-menu {
       display: none;
   }
   
   /* ===== RESPONSIVE DESIGN ===== */
   @media (max-width: 1200px) {
       .premium-nav-container {
           padding: 15px 0;
       }
       
       .brand-title {
           font-size: 1.8rem;
       }
       
       .brand-icon-container {
           width: 60px;
           height: 60px;
       }
       
       .brand-icon {
           font-size: 28px;
       }
       
       .nav-primary {
           gap: 6px;
       }
       
       .nav-link-content {
           padding: 12px 16px;
       }
   }
   
   @media (max-width: 1024px) {
       .premium-navigation {
           display: none;
       }
       
       .mobile-toggle {
           display: flex;
       }
       
       .premium-nav-container {
           justify-content: space-between;
       }
       
       .brand-title {
           font-size: 1.6rem;
       }
       
       .brand-tagline {
           font-size: 0.8rem;
           letter-spacing: 1px;
       }
   }
   
   @media (max-width: 768px) {
       .topbar-wrapper {
           flex-direction: column;
           gap: 15px;
       }
       
       .contact-section {
           gap: 20px;
       }
       
       .contact-text {
           display: none;
       }
       
       .action-section {
           gap: 15px;
       }
       
       .topbar-booster-btn {
           padding: 10px 16px;
           gap: 8px;
       }
       
       .topbar-btn-text {
           font-size: 0.85rem;
       }
       
       .topbar-btn-icon {
           width: 24px;
           height: 24px;
           font-size: 0.8rem;
       }
       
       .brand-visual {
           gap: 12px;
       }
       
       .brand-title {
           font-size: 1.4rem;
       }
       
       .brand-tagline {
           font-size: 0.75rem;
       }
       
       .brand-icon-container {
           width: 50px;
           height: 50px;
       }
       
       .brand-icon {
           font-size: 24px;
       }
       
       .auth-btn {
           padding: 8px 14px;
           font-size: 0.85rem;
       }
       
       /* Mobile Navigation Menu */
       .nav-menu {
           position: fixed;
           top: 0;
           left: -100%;
           width: 80%;
           max-width: 320px;
           height: 100vh;
           background: var(--dark-bg-tertiary);
           flex-direction: column;
           justify-content: flex-start;
           align-items: stretch;
           padding: 80px 0 20px;
           gap: 0;
           transition: left var(--transition-normal);
           box-shadow: var(--dark-shadow-2xl);
           border-right: 1px solid var(--dark-border-primary);
           z-index: 9999;
           list-style: none;
           margin: 0;
           display: flex;
           overflow-y: auto;
       }
       
       .nav-menu.active {
           left: 0;
       }
       
       .nav-menu .nav-item {
           width: 100%;
           border-bottom: 1px solid var(--dark-border-primary);
       }
       
       .nav-menu .nav-link {
           padding: 18px 25px;
           font-size: 1.1rem;
           border-radius: 0;
           justify-content: flex-start;
           font-weight: 600;
           color: var(--dark-text-secondary);
           display: flex;
           align-items: center;
           gap: 12px;
           text-decoration: none;
           font-family: var(--font-secondary);
           transition: all var(--transition-normal);
           transform: none;
           box-shadow: none;
       }
       
       .nav-menu .nav-link i {
           font-size: 1.2rem;
           margin-right: 12px;
           color: var(--dark-text-muted);
           transition: all var(--transition-normal);
       }
       
       .nav-menu .nav-link:hover {
           background: var(--dark-overlay-medium);
           color: var(--dark-text-primary);
           text-decoration: none;
           transform: none;
           box-shadow: none;
       }
       
       .nav-menu .nav-link:hover i {
           color: var(--dark-accent-primary);
       }
       
       /* Mobile Dropdown Styles */
       .nav-menu .nav-dropdown .nav-link::after {
           content: '\f107';
           font-family: 'Font Awesome 6 Free';
           font-weight: 900;
           margin-left: auto;
           font-size: 0.8rem;
           transition: transform var(--transition-normal);
       }
       
       .nav-menu .nav-dropdown.active .nav-link::after {
           transform: rotate(180deg);
       }
       
       .nav-menu .dropdown-menu {
           position: static;
           opacity: 1;
           visibility: visible;
           transform: none;
           box-shadow: none;
           border: none;
           border-top: 1px solid var(--dark-border-primary);
           background: var(--dark-overlay-heavy);
           display: none;
           min-width: auto;
           border-radius: 0;
       }
       
       .nav-menu .nav-dropdown.active .dropdown-menu {
           display: block;
       }
       
       .nav-menu .dropdown-link {
           padding: 8px 25px;
           font-size: 0.95rem;
           color: var(--dark-text-muted);
           display: flex;
           align-items: center;
           gap: 12px;
           border-bottom: 1px solid var(--dark-border-primary);
           transform: none;
       }
       
       .nav-menu .dropdown-link:hover {
           background: var(--dark-overlay-medium);
           color: var(--dark-text-primary);
           transform: none;
       }
       
       .nav-menu .dropdown-link:hover::before {
           transform: scaleY(1);
       }
   }
   
   @media (max-width: 480px) {
       .contact-section {
           display: none;
           gap: 15px;
       }
       
       .action-section {
           flex-direction: column;
           gap: 12px;
       }
       .social-hub
       {
           display: none;
       }
       .topbar-become-booster{
           display: none;
       }
       
       .topbar-booster-btn {
           padding: 8px 14px;
           gap: 6px;
       }
       
       .topbar-btn-text {
           font-size: 0.8rem;
       }
       
       .topbar-btn-icon {
           width: 22px;
           height: 22px;
           font-size: 0.75rem;
       }
       
       .brand-visual {
           text-align: center;
           gap: 10px;
       }
       
       .brand-title {
           font-size: 1.2rem;
       }
       
       .brand-tagline {
           display: none;
       }
       
       .brand-icon-container {
           width: 45px;
           height: 45px;
       }
       
       .brand-icon {
           font-size: 20px;
       }
       
       .auth-btn {
           padding: 6px 12px;
           font-size: 0.8rem;
       }
       
       .auth-btn span {
           display: none;
       }
       
       .mobile-navigation {
           width: 95%;
       }
       
       .mega-dropdown {
           min-width: 320px;
       }
   }
   
   /* ===== JAVASCRIPT INTERACTIONS ===== */
   .nav-item.active .nav-arrow {
       transform: rotate(180deg);
   }
   
   .mobile-nav-item.active .mobile-nav-link {
       background: var(--dark-overlay-accent);
       color: var(--dark-text-primary);
   }
   
   /* ===== FOOTER STYLES ===== */
   .index--footer {
       background: var(--dark-gradient-primary);
       border-top: 1px solid var(--dark-border-primary);
       padding: 80px 0 30px;
       position: relative;
       overflow: hidden;
   }
   
   .index--footer::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="3" fill="%23ffffff" opacity="0.05"/><circle cx="80" cy="80" r="2" fill="%23ffffff" opacity="0.05"/></svg>') repeat;
       animation: footer-float 30s linear infinite;
   }
   
   @keyframes footer-float {
       0% { transform: translate(0, 0); }
       100% { transform: translate(-100px, -100px); }
   }
   
   .index--footer-content {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 40px;
       margin-bottom: 40px;
       position: relative;
       z-index: 2;
   }
   
   .index--footer-section h3 {
       color: var(--dark-text-primary);
       margin-bottom: 24px;
       font-size: 1.4rem;
       font-weight: 700;
   }
   
   .index--footer-section p,
   .index--footer-section li {
       color: var(--dark-text-muted);
       margin-bottom: 10px;
   }
   
   .index--footer-section ul {
       list-style: none;
   }
   
   .index--footer-section ul li a {
       color: var(--dark-text-secondary);
       transition: all var(--transition-normal);
       font-weight: 400;
   }
   
   .index--footer-section ul li a:hover {
       color: var(--dark-accent-primary);
       padding-left: 8px;
       text-decoration: none;
   }
   
   .index--footer-social {
       display: flex;
       gap: 15px;
       margin-top: 20px;
   }
   
   .index--footer-social a {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 35px;
       height: 35px;
       background: var(--dark-overlay-medium);
       border-radius: 50%;
       color: var(--dark-text-muted);
       transition: all var(--transition-normal);
       box-shadow: var(--dark-shadow-md);
       border: 1px solid var(--dark-border-primary);
   }
   
   .index--footer-social a:hover {
       background: var(--dark-overlay-accent);
       color: var(--dark-accent-primary);
       transform: translateY(-3px);
       box-shadow: var(--dark-shadow-lg), var(--dark-glow-primary);
       border-color: var(--dark-border-accent);
   }
   
   .index--footer-bottom {
       border-top: 1px solid var(--dark-border-primary);
       padding-top: 30px;
       text-align: center;
       color: var(--dark-text-disabled);
       position: relative;
       z-index: 2;
   }
   
   .index--footer-bottom p {
       margin: 0;
   }
   
   .index--footer-bottom a {
       color: var(--dark-accent-primary);
       text-decoration: none;
       transition: color var(--transition-normal);
   }
   
   .index--footer-bottom a:hover {
       color: var(--dark-text-primary);
       text-decoration: underline;
   }