.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .glass-nav { background: rgba(255, 255, 255, 0.75); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08); }
        
        /* Dark mode glass nav */
        html.dark .glass-nav { background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(30, 41, 59, 0.8); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6); }
        
        /* Alternating background colors for light mode */
        .bg-alternate-light { background-color: #ffffff; }
        .bg-alternate-dark { background-color: #cfcfcf; }
        
        /* Alternating background colors for dark mode */
        html.dark .bg-alternate-light { background-color: #0b223a; }
        html.dark .bg-alternate-dark { background-color: #2e363e; }
        
        /* Improved text contrast in dark mode */
        html.dark { color: #e8f0f7; }
        html.dark .text-slate-900 { color: #e8f0f7; }
        html.dark .text-slate-800 { color: #d0dce6; }
        html.dark .text-slate-700 { color: #b8c4d0; }
        
        .badge-item { position: relative; }
        .tooltip {
            visibility: hidden;
            width: 220px;
            background: #0f172a;
            color: white;
            padding: 12px;
            border-radius: 12px;
            position: absolute;
            left: calc(100% + 15px);
            top: 50%;
            transform: translateY(-50%) translateX(-10px);
            opacity: 0;
            transition: all 0.3s ease;
            font-size: 11px;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
            z-index: 100;
            pointer-events: none;
            line-height: 1.4;
        }
        .tooltip::before {
            content: '';
            position: absolute;
            right: 100%;
            top: 50%;
            transform: translateY(-50%);
            border: 6px solid transparent;
            border-right-color: #0f172a;
        }
        .badge-item:hover .tooltip {
            visibility: visible;
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }
        
        @media (max-width: 768px) {
            .tooltip {
                left: 50%;
                bottom: 125%;
                top: auto;
                transform: translateX(-50%) translateY(10px);
            }
            .tooltip::before {
                right: auto;
                left: 50%;
                top: 100%;
                transform: translateX(-50%);
                border-right-color: transparent;
                border-top-color: #0f172a;
            }
            .badge-item:hover .tooltip {
                transform: translateX(-50%) translateY(0);
            }
        }