.stars {
        --percent: calc(var(--rating) / 5 * 100%);
        --star-size: 20px;
        --star-color: #e5e7eb;
        --star-background: #fbbf24;

        display: inline-block;
        font-size: var(--star-size);
        font-family: Times;
        line-height: 1;
    }

    .stars::before {
        content: '★★★★★';
        letter-spacing: 2px;
        background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .badge-ribbon {
        position: absolute;
        top: 90px;
        left: 47px;
        width: 150px;
        transform-origin: top left;
        transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .pulse-animation {
        animation: pulse 2.5s infinite ease-in-out;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        50% {
            transform: scale(1.03);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    }

    .medal-badge {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
    }

    .medal-badge:hover {
        transform: scale(1.1) rotate(5deg);
    }

    @media (max-width: 768px) {
        .carousel-container {
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            display: flex;
            gap: 1rem;
            padding: 1rem 0;
            position: relative;
        }

        .carousel-container::-webkit-scrollbar {
            display: none;
        }

        .carousel-item {
            scroll-snap-align: center;
            flex: 0 0 85%;
            max-width: 85%;
            transition: all 0.3s ease;
        }

        .badge-ribbon {
            right: 47px;
            left: auto;
            transform-origin: top right;
            transform: translateX(50%) translateY(-50%) rotate(45deg);
        }
    }

    .payment-icon {
        transition: all 0.3s ease;
        filter: grayscale(20%);
    }

    .payment-icon:hover {
        transform: translateY(-3px);
        filter: grayscale(0%);
    }

    .glow-gold {
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
    }

    .glow-silver {
        box-shadow: 0 0 15px rgba(156, 163, 175, 0.4);
    }

    .glow-bronze {
        box-shadow: 0 0 15px rgba(180, 83, 9, 0.4);
    }

    .cta-arrow {
        transition: transform 0.3s ease;
    }

    .cta-button:hover .cta-arrow {
        transform: translateX(4px);
    }

    .feature-item {
        transition: transform 0.3s ease;
    }

    .feature-item:hover {
        transform: translateX(3px);
    }

    .bonus-highlight {
        transition: all 0.3s ease;
    }