:root {
            --pastel-blue: #A7C7E7;
            --soft-coral: #FFB3B3;
            --mint-green: #AEE6CF;
            --cloud-gray: #F6F7FB;
            --warm-white: #FFFFFF;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--warm-white);
            color: #334155;
            scroll-behavior: smooth;
        }

        h1, h2, h3, h4, .nav-brand { font-family: 'Baloo 2', cursive; }

        .glass-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .glass-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 30px 60px rgba(167, 199, 231, 0.25);
        }

        .page-section { display: none; opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
        .page-section.active { display: block; opacity: 1; transform: translateY(0); }

        .floating { animation: floating 5s ease-in-out infinite; }
        @keyframes floating {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(2deg); }
        }

        .scroll-reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease-out;
        }
        .scroll-reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .gradient-text {
            background: linear-gradient(90deg, #A7C7E7, #FFB3B3);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cart-badge {
            position: absolute;
            top: -5px; right: -8px;
            background: var(--soft-coral);
            color: white; font-size: 0.7rem;
            padding: 2px 7px; border-radius: 50%;
            font-weight: 800;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: var(--pastel-blue); border-radius: 10px; border: 3px solid #f1f1f1; }
        @keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  animation: fadeIn 0.35s ease-out;
}