:root {
            --sky-blue: #BAE6FD;
            --mint-green: #BBF7D0;
            --sunshine-yellow: #FEF08A;
            --coral-orange: #FB923C;
            --soft-purple: #E9D5FF;
        }

        body {
            font-family: 'Quicksand', sans-serif;
            background-color: #FFFFFF;
            color: #334155;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, .font-heading {
            font-family: 'Fredoka', sans-serif;
        }

        .gradient-btn {
            background: linear-gradient(135deg, #FB923C, #F43F5E);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .gradient-btn:hover {
            transform: scale(1.05) translateY(-2px);
            box-shadow: 0 10px 20px -5px rgba(244, 63, 94, 0.4);
        }

        .card-bounce:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .floating {
            animation: floating 3s ease-in-out infinite;
        }

        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }

        .modal-overlay {
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(8px);
        }

        .cart-sidebar {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .cart-open .cart-sidebar {
            transform: translateX(0);
        }

        .skill-tag {
            @apply px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider;
        }
        @keyframes fadeIn {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}
.animate-fadeIn {
  animation: fadeIn .25s ease-out;
}