/* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* Glassmorphism Utilities */
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }
        .glass-dark {
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        /* 3D Tilt Effect Base */
        .tilt-card {
            transition: transform 0.1s ease-out;
            transform-style: preserve-3d;
        }
        
        /* Text Gradients */
        .text-gradient {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .text-gradient-gold {
            background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Custom Cursor */
        body {
            cursor: none;
        }
        
        /* Cursor Styling Update */
        #cursor {
            width: 20px;
            height: 20px;
            border: 2px solid #3b82f6;
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 20000 !important; /* Maximum Z-Index */
            transition: transform 0.1s ease, border-color 0.3s ease;
            transform: translate(-50%, -50%);
        }
        #cursor-dot {
            width: 6px;
            height: 6px;
            background: #3b82f6;
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 20000 !important; /* Maximum Z-Index */
            transition: transform 0.1s ease, background-color 0.3s ease;
            transform: translate(-50%, -50%);
        }

        /* Modal Open State - Switch Cursor to Gold */
        body.modal-open #cursor {
            border-color: #FFD700; 
            display: block !important; /* Force visible */
        }
        body.modal-open #cursor-dot {
            background-color: #FFD700;
            display: block !important; /* Force visible */
        }

        /* Hover states */
        a:hover ~ #cursor, button:hover ~ #cursor, select:hover ~ #cursor, input:hover ~ #cursor, .cursor-pointer:hover ~ #cursor {
            transform: translate(-50%, -50%) scale(2.5);
            background: rgba(59, 130, 246, 0.1);
            border-color: transparent;
        }
        
        /* Gold Hover State when Modal is open */
        body.modal-open a:hover ~ #cursor, 
        body.modal-open button:hover ~ #cursor,
        body.modal-open input:hover ~ #cursor,
        body.modal-open select:hover ~ #cursor {
            background: rgba(255, 215, 0, 0.1);
            border-color: transparent;
        }
        
        /* Hide scrollbar utility */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Nav Link Hover Animation */
        .nav-item {
            position: relative;
        }
        .nav-item::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #3b82f6;
            transition: width 0.3s ease;
        }
        .nav-item:hover::after {
            width: 100%;
        }

        /* Sparkle Animation */
        .sparkle {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #FFD700;
            pointer-events: none;
            z-index: 20000;
            box-shadow: 0 0 10px #FFD700;
        }
        @keyframes sparkle-anim {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(var(--tx), var(--ty)) scale(0);
                opacity: 0;
            }
        }

        /* --- NEW SCROLL REVEAL ANIMATIONS --- */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Stagger Delays */
        .delay-100 { transition-delay: 0.1s; }
        .delay-200 { transition-delay: 0.2s; }
        .delay-300 { transition-delay: 0.3s; }
        .delay-400 { transition-delay: 0.4s; }

        /* --- QUIZ STEP ANIMATIONS --- */
        @keyframes slideOutLeft {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(-50px); opacity: 0; }
        }
        @keyframes slideInRight {
            from { transform: translateX(50px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        .quiz-slide-out { animation: slideOutLeft 0.3s forwards ease-in; }
        .quiz-slide-in { animation: slideInRight 0.3s forwards ease-out; }

        /* Fun Input Styles */
        .fun-input {
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .fun-input:focus {
            transform: scale(1.02);
            box-shadow: 0 10px 25px -5px rgba(234, 179, 8, 0.2);
            border-color: #EAB308;
        }
        .bounce-hover:hover {
            animation: bounce-small 0.5s infinite;
        }
        @keyframes bounce-small {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }
        
        /* Smooth transition for mobile submenus */
        .submenu-transition {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
        }