.cases {
    --case-size: clamp(320px, 34vw, 520px);
    --factoid-size: clamp(150px, 14vw, 210px);
    --case-head-width: clamp(240px, 28vw, 430px);
    --case-gap: 120px;
    --case-stack-factor: 1.35;
    --case-ring-gap: 263px;
    overflow: clip;
}

.cases .casesTitle { margin-bottom: 64px; }
.cases-slider { position: relative; height: calc(var(--case-size) + 60px); isolation: isolate; }
.cases-images { position: relative; z-index: 2; width: 100%; height: var(--case-size); overflow: visible; perspective: 1200px; touch-action: pan-y; }
.cases-images .swiper-wrapper { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.cases-image { position: absolute; top: 0; left: 0; width: var(--case-size); height: var(--case-size); pointer-events: none; }
.cases-image__inner {
    width: 100%; height: 100%; overflow: hidden; border-radius: 50%;
    transform-style: preserve-3d; transition-property: transform, opacity;
    transition-timing-function: ease; will-change: transform, opacity;
    cursor: pointer; position: relative;
}
.cases-image__inner::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(51% 51% at 87% 54%, #fff 0, #fff 25%, #fffc 57%, #fff0 100%);
    opacity: 0; transition: opacity .15s ease-in;
}
.cases-image.swiper-slide-active .cases-image__inner::after { opacity: 1; }
.cases-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cases-overlay {
    position: absolute; z-index: 3; top: 0;
    left: calc(var(--case-size) - var(--factoid-size));
    width: var(--case-head-width); pointer-events: none;
}
.cases-factoids .swiper-wrapper,
.cases-heads .swiper-wrapper,
.cases-rings .swiper-wrapper { position: relative; display: block; width: 100%; height: 100%; }
.cases-factoid,
.cases-head,
.cases-ring-slide { position: absolute; top: 0; left: 0; transition-property: transform, opacity; transition-timing-function: ease; will-change: transform, opacity; opacity: 0; }
.cases-factoid:first-child,
.cases-head:first-child,
.cases-ring-slide:first-child { opacity: 1; }
.cases-factoids { position: relative; z-index: 2; width: var(--factoid-size); height: var(--factoid-size); margin: 0; border-radius: 50%; background: #934fff; overflow: hidden; }
.cases-factoid { width: 100%; height: var(--factoid-size); }
.cases-factoid__inner {
    box-sizing: border-box; width: 100%; height: var(--factoid-size);
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    padding: 20px; text-align: center; color: #fff; cursor: pointer; pointer-events: auto;
}
.cases-factoid .number { font-family: 'AA Stetica', sans-serif; font-size: clamp(42px, 4vw, 64px); font-weight: 700; line-height: .9; }
.cases-factoid p { max-width: 140px; margin-top: 8px; font-size: 12px; line-height: 1.2; }
.cases-factoid p.big { font-size: 24px; line-height: 120%; font-weight: 700; margin: 0; max-width: max-content; }
.cases-heads { position: relative; z-index: 1; isolation: isolate; width: var(--case-head-width); height: var(--case-head-height, auto); margin: 24px 0 0 45px; overflow: visible; }
.cases-heads::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: 50%;
    width: 180%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border-radius: 50%; background: radial-gradient(circle, #fff 0, #fffc 30%, #fff0 70%); pointer-events: none;
}
.cases-head { display: flex; align-items: center; width: 100%; height: 100%; overflow: visible !important; pointer-events: none; }
.cases-head.swiper-slide-active { pointer-events: auto; }
.cases-head__inner {
    position: relative; font-family: 'AA Stetica', sans-serif;
    font-size: clamp(18px, 1.55vw, 24px); font-weight: 700; line-height: 1.05;
    color: #1e1e2f; cursor: pointer; pointer-events: none;
}
.cases-head.swiper-slide-active .cases-head__inner { pointer-events: auto; }
.cases-no-factoid .cases-factoids { position: absolute; opacity: 0; pointer-events: none; }
.cases-no-factoid .cases-heads { margin-top: calc(var(--case-size) / 2 - 60px); }

.cases-rings { position: absolute; z-index: 1; top: 0; left: calc(50% - 50vw); width: 100vw; height: var(--case-size); overflow: visible; pointer-events: none; }
.cases-ring-slide { display: flex; justify-content: center; gap: var(--case-ring-gap); width: 100vw; height: var(--case-size); }
.cases-ring-slide span {
    flex: 0 0 var(--case-size); width: var(--case-size); height: var(--case-size);
    border: 1px solid #d6bcfe; border-radius: 50%;
}
.cases__navigation { left: 0; width: calc(var(--case-size) * 1.85 + var(--case-gap) + 56px); pointer-events: none; }
.cases__navigation .slider__button { pointer-events: auto; background: #fffc; }

@media (min-width: 1660px) {
    .cases { --case-gap: 160px; }
}

@media (min-width: 1900px) {
    .cases { --case-ring-gap: 20.833vw; }
}

@media (min-width: 768px) {
    .cases-ring-slide span:nth-child(3) { opacity: 0; }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .cases { --case-size: 430px; --factoid-size: 175px; --case-head-width: 372px; --case-gap: 100px; --case-ring-gap: 230px; }
    .cases .casesTitle { margin-bottom: 32px; }
    .cases-slider { left: calc(35px - (100vw - 100%) / 2); height: calc(var(--case-size) + 110px); }
    .cases-heads { margin: 30px 0 0 47px; }
    .cases-rings { left: -340px; width: calc(100vw - 15px); }
    .cases-ring-slide { width: 100%; justify-content: flex-start; }
    .cases__navigation { top: auto; bottom: 0; transform: none; width: auto; gap: 16px; }
    .cases__navigation .slider__button { width: 48px; height: 48px; border: 1px solid #934fff; }
}

@media (max-width: 767px) {
    .cases { --case-size: min(300px, calc(100vw - 40px)); --factoid-size: clamp(140px, 30vw, 160px); --case-head-width: var(--case-size); --case-gap: 30px; --case-stack-factor: 1; --case-ring-gap: 170px; }
    .cases .casesTitle { margin-bottom: 48px; }
    .cases-slider { left: calc(25px - (100vw - 100%) / 2); height: var(--case-mobile-height, calc(var(--case-size) + 185px)); }
    .cases-overlay { width: var(--case-head-width); }
    .cases-rings { display: none; }
    .cases-ring-slide { width: 100%; justify-content: flex-start; }
    .cases-heads { margin: 130px 0 0 calc(-1 * (var(--case-size) - var(--factoid-size))); width: var(--case-head-width); }
    .cases-no-factoid .cases-heads { margin-top: calc(var(--case-size) + 20px); }
    .cases-head__inner { font-size: 17px; line-height: 1.1; }
    .cases-factoid__inner { padding: 14px; }
    .cases__navigation { top: auto; bottom: 0; transform: none; width: auto; justify-content: flex-start; gap: 16px; }
    .cases__navigation .slider__button { width: 48px; height: 48px; border: 1px solid #934fff; }
}

@media (max-width: 1279px) {
    .cases-image__inner { overflow: visible; }
    .cases-image img { border-radius: 50%; }
    .cases-image__inner::after {
        inset: auto;
        width: 50%;
        height: 50%;
        border-radius: 50%;
        background: radial-gradient(circle, #fff 0, #fffe 30%, #fff0 62%);
    }
    .cases-factoid p.big { font-size: 18px;}
}

@media (min-width: 768px) and (max-width: 1279px) {
    .cases-image__inner::after {
        top: calc(var(--case-size) - 275px);
        left: calc(var(--case-size) - var(--factoid-size) + 125px);
    }
}

@media (max-width: 767px) {
    .cases-image__inner::after {
        top: calc(var(--case-size) - 80px);
        left: 25%;
    }
    .cases-factoid p.big { font-size: 16px;}
    .cases-no-factoid .cases-image.swiper-slide-active .cases-image__inner::after { top: calc(var(--case-size) + 5px); }
}