:root {
            --b-blue: #4CC9F0;
            --p-yellow: #FFD60A;
            --c-red: #F72585;
            --m-green: #4D96FF;
            --t-white: #F8F9FA;
        }

        body {
            font-family: 'Quicksand', sans-serif;
            background-color: var(--t-white);
            overflow-x: hidden;
            color: #2D3436;
        }

        .kids-font { font-family: 'Fredoka', sans-serif; }
        .cursive { font-family: 'Caveat', cursive; }

        /* --- Transitions --- */
        .page-section { display: none; opacity: 0; transition: opacity 0.6s ease; }
        .page-active { display: block; opacity: 1; }

        /* --- Custom Animations --- */
        @keyframes floating {
            0%, 100% { transform: translateY(0) rotate(0); }
            50% { transform: translateY(-20px) rotate(2deg); }
        }
        .float-toy { animation: floating 4s infinite ease-in-out; }

        .rubber-click:active { transform: scale(0.9) rotate(-2deg); }

        .card-pop {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .card-pop:hover { transform: translateY(-10px) scale(1.02); }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 12px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: var(--b-blue); border-radius: 10px; border: 3px solid #f1f1f1; }

        .search-glow:focus { box-shadow: 0 0 20px rgba(76, 201, 240, 0.4); border-color: var(--b-blue); }
            /* Custom Animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-20px);
        }
    }
    
    @keyframes floatSlow {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-15px);
        }
    }
    
    @keyframes floatDelayed {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-25px);
        }
    }
    
    @keyframes bounceSlow {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }
    
    @keyframes spinSlow {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    @keyframes wiggle {
        0%, 100% {
            transform: rotate(0deg);
        }
        25% {
            transform: rotate(5deg);
        }
        75% {
            transform: rotate(-5deg);
        }
    }
    
    @keyframes colorCycle {
        0% { color: #3b82f6; }
        25% { color: #ef4444; }
        50% { color: #10b981; }
        75% { color: #f59e0b; }
        100% { color: #3b82f6; }
    }
    
    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes scaleIn {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    @keyframes movePattern {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 40px 40px;
        }
    }
    
    @keyframes expand {
        from {
            width: 0;
        }
        to {
            width: 4rem;
        }
    }
    
    @keyframes shake {
        0%, 100% {
            transform: rotate(0deg);
        }
        25% {
            transform: rotate(10deg);
        }
        75% {
            transform: rotate(-10deg);
        }
    }
    
    /* Animation Classes */
    .animate-fade-in-up {
        animation: fadeInUp 0.8s ease-out forwards;
    }
    
    .animate-float {
        animation: float 3s ease-in-out infinite;
    }
    
    .animate-float-slow {
        animation: floatSlow 4s ease-in-out infinite;
    }
    
    .animate-float-delayed {
        animation: float 3s ease-in-out infinite 1s;
    }
    
    .animate-float-delayed-slow {
        animation: floatSlow 5s ease-in-out infinite 2s;
    }
    
    .animate-bounce-slow {
        animation: bounceSlow 2s ease-in-out infinite;
    }
    
    .animate-spin-slow {
        animation: spinSlow 20s linear infinite;
    }
    
    .animate-wiggle {
        animation: wiggle 0.5s ease-in-out;
    }
    
    .animate-color-cycle {
        animation: colorCycle 5s linear infinite;
    }
    
    .animate-slide-in-left {
        animation: slideInLeft 0.6s ease-out forwards;
    }
    
    .animate-slide-in-right {
        animation: slideInRight 0.6s ease-out forwards;
    }
    
    .animate-scale-in {
        animation: scaleIn 0.5s ease-out forwards;
    }
    
    .animate-move-pattern {
        animation: movePattern 20s linear infinite;
    }
    
    .animate-expand {
        animation: expand 1s ease-out forwards;
    }
    
    .animate-shake {
        animation: shake 0.5s ease-in-out infinite;
    }
    
    .animate-ping-slow {
        animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
    
    /* Bubble Elements */
    .bubble {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent);
        box-shadow: inset 0 0 20px rgba(255,255,255,0.5);
    }
    
    .bubble-1 {
        width: 60px;
        height: 60px;
        top: 10%;
        left: 5%;
        background-color: rgba(59, 130, 246, 0.1);
    }
    
    .bubble-2 {
        width: 100px;
        height: 100px;
        top: 20%;
        right: 10%;
        background-color: rgba(239, 68, 68, 0.1);
    }
    
    .bubble-3 {
        width: 40px;
        height: 40px;
        bottom: 30%;
        left: 15%;
        background-color: rgba(34, 197, 94, 0.1);
    }
    
    .bubble-4 {
        width: 80px;
        height: 80px;
        bottom: 20%;
        right: 15%;
        background-color: rgba(245, 158, 11, 0.1);
    }
    
    .bubble-5 {
        width: 70px;
        height: 70px;
        top: 50%;
        left: 10%;
        background-color: rgba(168, 85, 247, 0.1);
    }
    
    /* Hide scrollbar for testimonial carousel */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    
    /* Rubber click effect */
    .rubber-click:active {
        transform: scale(0.95);
        transition: transform 0.1s;
    }
    
    /* Hover effects */
    .hover-scale {
        transition: transform 0.3s ease;
    }
    
    .hover-scale:hover {
        transform: scale(1.05);
    }