.intro-split-icon {
    width: 3rem;
    height: 3rem;
}

/* Як TW: w-64 → sm:w-80 → lg:w-96 (одна шкала для обох фреймворків) */
.intro-split-thumb {
    width: 16rem;
    height: 16rem;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .intro-split-thumb {
        width: 20rem;
        height: 20rem;
    }
}

@media (min-width: 1024px) {
    .intro-split-thumb {
        width: 24rem;
        height: 24rem;
    }
}

/* Bootstrap: flex + gap (no .row negative margins; works with section overflow). Tailwind grid ignores flex on items. */
@media (min-width: 576px) {
    .intro-split-benefits__row > * {
        flex: 1 1 0%;
        min-width: 0;
    }
}

@keyframes perks-ring-progress-pulse-kf {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

.perks-ring-progress__blob {
    animation: perks-ring-progress-pulse-kf 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.perks-ring-progress__blob--delay {
    animation-delay: 1s;
}

@keyframes perks-ring-progress-spin-kf {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.perks-ring-progress__orbit--a {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 5rem;
    height: 5rem;
    animation: perks-ring-progress-spin-kf 20s linear infinite;
}

.perks-ring-progress__orbit--b {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    width: 4rem;
    height: 4rem;
    animation: perks-ring-progress-spin-kf 15s linear infinite reverse;
}

.perks-ring-progress__blob.perks-ring-progress__blob--a {
    position: absolute;
    width: 16rem;
    height: 16rem;
    top: 25%;
    left: 25%;
    filter: blur(64px);
}

.perks-ring-progress__blob.perks-ring-progress__blob--b {
    position: absolute;
    width: 20rem;
    height: 20rem;
    bottom: 25%;
    right: 25%;
    filter: blur(64px);
}

.perks-ring-progress__thumb {
    width: 4rem;
    height: 4rem;
}

.perks-ring-progress__ring-wrap {
    width: 5rem;
    height: 5rem;
}

.perks-ring-progress__decor-layer {
    transition: opacity 0.5s ease;
}

.perks-ring-progress__accent-line {
    height: 4px;
    transition: opacity 0.5s ease;
}

@media (min-width: 640px) {
    .perks-ring-progress__group:hover .perks-ring-progress__card {
        transform: scale(1.05);
    }

    .perks-ring-progress__group:hover .perks-ring-progress__thumb {
        transform: rotate(12deg);
    }
}

.perks-ring-progress__group:hover .perks-ring-progress__decor-layer {
    opacity: 0.1;
}

.perks-ring-progress__group:hover .perks-ring-progress__accent-line {
    opacity: 1;
}


.sidelist-split-events__content-row {
    gap: 4rem;
}