.main-page__main-screen {
    height: 249vh;
    position: relative;
}

.main-page__section-next {
    position: relative;
    z-index: 12;
}

.main-page__video {
    width: 100%;
    height: 249vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
    opacity: 0;
    transition: opacity 1s ease;
}

.main-page__video-mobile {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
    opacity: 0;
    transition: opacity 1s ease;
}

.main-page__video video {
    width: 100%; height: 100%; object-fit: unset;
}

.main-page__video_fixed {
    position: fixed;
}

.main-page__roll {
    display: none;
    overflow: hidden;
    width: 100%;
    height: 14.351vh;
    z-index: 11;
    position: fixed;
    top: -4px;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.main-page__roll video {
    width:100%; height: 100%; object-fit: unset
}

.main-page__roll_fixed {
    display: block;
}
/*
.main-page__main-screen:before {
    content: "";
    background: linear-gradient(180deg, #FFF 16.62%, rgba(255, 255, 255, 0.00) 100%);
    width: 100%;
    height: 334px;
    display: block;
    position: absolute;
    top: 0;
    z-index: -1;
}*/

.section-container.section-container__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    justify-content: space-between;
    height: 100%;
    padding-top: 160px;
    padding-bottom: 60px;
}

.main-page__advantages {
    margin-top: var(--space-10);
}

.main-page__geography-advantages {
    position: absolute; top: 0; right: 0;
}

@media (max-width: 1899px) {
    .section-container.section-container__main {
        padding-top: 120px;
        padding-bottom: 60px;
    }
    .main-page__geography-advantages {
        position: absolute; top: 0; right: 0;
    }
}

@media (max-width: 1279px) {
    .main-page__geography-advantages {
        position: static;
    }
}

@media (max-width: 767px) {
    .main-page__video {
        display: none;
    }

    .main-page__video-mobile {
        display: block;
    }
    .main-page__roll_fixed {
        display: none;
    }
    .main-page__geography-advantages {
        position: static;
    }
}

.main-title-block {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    gap: var(--column-gap-4);
}

@media (max-width: 1899px) {
    .main-page__main-screen {
        height: 249vh;
    }
}

@media (max-width: 1279px) {
    .main-title-block {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (max-width: 767px) {
    .main-page__main-screen {
        height: auto;
    }
    .section-container.section-container__main {
        height: auto;
        gap: 80px;
    }
    .main-title-block {
        display: flex;
        flex-direction: column;
        gap: 120px;
    }
}

.main-title-block__title {
    grid-column: span 4;
    max-width: 855px;
}

.main-title-block__subtitle {
    color: var(--color-text-primary, #312E2B);
    text-transform: uppercase;
}

.main-title-block__slogan {
    color: var(--color-text-secondary, #5C6062);
}

@media (max-width: 1899px) {
    .main-title-block__title {
        grid-column: span 5;
    }
}

@media (max-width: 1279px) {
    .main-title-block__title {
        grid-column: span 4;
    }
}

.main-slider-block {
    grid-column: 8 / 13;
}

.advantages {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    gap: var(--column-gap-4);
}

.advantage {
    grid-column: span 4;
    min-height: 447px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    /*background: var(--color-card-secondary, radial-gradient(145.68% 94.57% at 33.24% 26.73%, #474A4B 0%, #2E3031 100%));
    */

    background-position-y: -2px;
    background-position-x: -4px;
    padding: 80px;
    color: #FFF;
    max-width: 554px;
    box-sizing: border-box;
    -webkit-clip-path: inset(0 round 30px);
    clip-path: inset(0 round 30px);
}

.advantage * {
    z-index: 1;
}

.advantages__slogan {
    max-width: 360px;
    color: var(--color-text-secondary, #5C6062);
    font-weight: 500;
}

.advantages__bg {
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    scale: 1.1;
    border-radius: 30px;
    overflow: hidden;
}

.advantage.advantage_1 .advantages__slogan {
    color: #FFF;
}

.advantage.advantage_2 {
    color: #FFF;
}

.advantage.advantage_3 {
    color: var(--color-text-primary, #312E2B);
}

.advantage.advantage_2 .advantages__slogan {
    color: #FFF;
}

.advantage.advantage_1 {
    grid-column: 5 / span 4;
    grid-row: 1;
}
.advantage.advantage_2 {
    grid-column: 5 / span 4;
    grid-row: 2;
}
.advantage__col-2 {
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
}

.advantages__link-to-product {
    margin-top: 170px;
    margin-left: 40px;
}

@media (max-width: 1899px) {
    .advantage {
        padding: 50px;
        min-height: 386px;
    }

    .advantages__link-to-product {
        margin-top: 80px;
    }
}

@media (max-width: 1279px) {
    .advantages {
        grid-template-columns: repeat(8, 1fr);
    }
    .advantage {
        grid-column: span 3;
        min-height: 275px;
        padding: 40px;
    }
    .advantage.advantage_1 {
        grid-column: 3 / span 3;
        grid-row: 1;
    }
    .advantage.advantage_2 {
        grid-column: 3 / span 3;
        grid-row: 2;
    }
    .advantage__col-2 {
        grid-column: 6 / span 3;
    }
    .link-arrow.advantages__link-to-product {
        margin-top: 60px;
        margin-left: 40px;
        gap: 16px;
    }
    .advantages__link-to-product-text {
        flex: none;
        width: min-content;
    }
}

@media (max-width: 767px) {
    .advantages {
        display: flex;
        overflow: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        margin-top: 80px;
    }
    .advantages::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .advantage__col-2 {
        width: calc(100% - 56px);
        flex-shrink: 0;
    }
    .advantage__col-2 .advantage {
        width: 100%;
    }
    .advantage {
        width: calc(100% - 56px);
        flex-shrink: 0;
        max-width: 320px;
        min-height: 323px;
    }
    .advantages__link-to-product {
        display: none;
    }
    .link-arrow.advantages__link-to-product {
        display: none;
    }
}

.ball-container {
    position: relative;
    width: calc(100% - 80px);
    margin: auto;
    height: 564px;
    top: 0;
    left: 0;
    pointer-events: none;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    padding-top: var(--space-8);
}

.ball-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    -webkit-clip-path: inset(0 round 50%);  /* для старых Safari */
    clip-path: inset(0 round 50%);          /* для современных браузеров */
    color: var(--color-text-primary, #312E2B);
    text-align: center;
    font-size: 20px;
    padding: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    width: 230px;
    height: 230px;
    box-sizing: border-box;
}

.ball-content__title {
    color: var(--color-text-primary, #312E2B);
    text-align: center;
    z-index: 1;
}

.ball-content_409 {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    text-transform: uppercase;
    width: 409px;
    height: 409px;
}

@media (max-width: 1279px) {
    .ball-content {
        font-size: 16px;
        line-height: 24px;
        width: 174px;
        height: 174px;
    }

    .ball-content_409 {
        font-size: 26px;
        line-height: 32px;
        width: 288px;
        height: 288px;
    }
}

@media (max-width: 767px) {
    .ball-container {
        height: unset;
        width: 100%;
    }
    .ball-content_230 {
        width: unset;
        height: unset;
        flex: 0 0 calc(50%);
        aspect-ratio: 1 / 1; /* квадрат */
        /* aspect-ratio: 16 / 9; для широкоэкранных */
        /* aspect-ratio: 4 / 3; для классических */
        background: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ball-content_409 {
        font-size: 16px;
        line-height: 24px;
        width: unset;
        height: unset;
        flex: 0 0 calc(50%);
        aspect-ratio: 1 / 1; /* квадрат */
        /* aspect-ratio: 16 / 9; для широкоэкранных */
        /* aspect-ratio: 4 / 3; для классических */
        background: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 479px) {

}

/*======================================
Слайдер на главной
=====================================*/
.slider-container {
    position: relative;
}

.stage-3d {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cards-stack {
    position: relative;
    width: 100%;
    height: 338px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

.slide-card {
    position: absolute;
    border-radius: 30px;
    height: 338px;
    padding: 70px 100px 70px 80px;
    text-align: left;
    backface-visibility: hidden;
    border: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    right: 0;
    transform-origin: right center;
    will-change: transform, width;
    justify-content: space-between;
    gap: 16px;
    overflow: hidden;
}

/* ===== ПЛАВНОЕ ПОЯВЛЕНИЕ ТЕКСТА ===== */
.slide-card .slide-title,
.slide-card .slide-desc,
.slide-card .slide-link {
    transition: opacity 0.25s ease-in-out;
}

/* Самая задняя карточка - текст скрыт */
.slide-card.next-second .slide-title,
.slide-card.next-second .slide-desc,
.slide-card.next-second .slide-link {
    opacity: 0;
    visibility: hidden;
}

/* Средняя карточка - текст начинает проявляться */
.slide-card.next-first .slide-title,
.slide-card.next-first .slide-desc,
.slide-card.next-first .slide-link {
    opacity: 0.5;
    visibility: visible;
}

/* Активная карточка - текст полностью видим */
.slide-card.active .slide-title,
.slide-card.active .slide-desc,
.slide-card.active .slide-link {
    opacity: 1;
    visibility: visible;
}

/* ===== БАЗОВЫЕ СТИЛИ ДЛЯ КАЖДОЙ ПОЗИЦИИ ===== */

.slide-card.active {
    z-index: 30;
    width: 100%;
    transform: translateY(0px) translateZ(65px) rotateX(0deg) skewY(0deg);
    background: linear-gradient(122deg, rgba(255, 255, 255, 0.50) 30.7%, #FFF 98.21%);
    backdrop-filter: blur(4.65px);
    -webkit-backdrop-filter: blur(4.65px);
}

.slide-card.next-first {
    z-index: 20;
    width: 98.51%;
    transform: translateY(0px) translateZ(65px) rotateX(0deg) skewY(-3.5deg);
    pointer-events: none;
    background: linear-gradient(114deg, rgba(255, 255, 255, 0.20) 15.93%, rgba(255, 255, 255, 0.60) 93.29%);
    backdrop-filter: blur(19px);
    -webkit-backdrop-filter: blur(19px);
}

.slide-card.next-second {
    z-index: 16;
    width: 96.04%;
    transform: translateY(0px) translateZ(65px) rotateX(0deg) skewY(-6.5deg);
    pointer-events: none;
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.10) 22.9%, rgba(255, 255, 255, 0.40) 89.4%);
    backdrop-filter: blur(19px);
    -webkit-backdrop-filter: blur(19px);
}

/* ===== СТИЛИ ДЛЯ КАРТОЧЕК ВО ВРЕМЯ АНИМАЦИИ ===== */

.slide-card.flipping-out {
    background: linear-gradient(122deg, rgba(255, 255, 255, 0.50) 30.7%, #FFF 98.21%);
    backdrop-filter: blur(4.65px);
    -webkit-backdrop-filter: blur(4.65px);
}
.slide-card.flipping-out .slide-title,
.slide-card.flipping-out .slide-desc,
.slide-card.flipping-out .slide-link {
    opacity: 0;
    visibility: hidden;
}

.slide-card.rising-to-active {
    background: linear-gradient(122deg, rgba(255, 255, 255, 0.50) 30.7%, #FFF 98.21%);
    backdrop-filter: blur(4.65px);
    -webkit-backdrop-filter: blur(4.65px);
}
.slide-card.rising-to-active .slide-title,
.slide-card.rising-to-active .slide-desc,
.slide-card.rising-to-active .slide-link {
    opacity: 1;
    visibility: visible;
}

.slide-card.middle-rising {
    background: linear-gradient(114deg, rgba(255, 255, 255, 0.20) 15.93%, rgba(255, 255, 255, 0.60) 93.29%);
    backdrop-filter: blur(19px);
    -webkit-backdrop-filter: blur(19px);
}
.slide-card.middle-rising .slide-title,
.slide-card.middle-rising .slide-desc,
.slide-card.middle-rising .slide-link {
    opacity: 0.5;
    visibility: visible;
}

.slide-card.new-bottom-layer {
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.10) 22.9%, rgba(255, 255, 255, 0.40) 89.4%);
    backdrop-filter: blur(19px);
    -webkit-backdrop-filter: blur(19px);
}
.slide-card.new-bottom-layer .slide-title,
.slide-card.new-bottom-layer .slide-desc,
.slide-card.new-bottom-layer .slide-link {
    opacity: 0;
    visibility: hidden;
}

/* ===== АНИМАЦИИ ===== */

@keyframes leafFlyUp {
    0% {
        transform: translateY(0px) translateZ(65px) skewY(0deg);
        width: 100%;
    }
    100% {
        transform: translateY(-80px) translateZ(-30px) skewY(8deg);
        width: 67%;
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes riseToActive {
    0% {
        transform: translateY(0px) translateZ(65px) skewY(-3.5deg);
        width: 98.51%;
    }
    100% {
        transform: translateY(0px) translateZ(65px) skewY(0deg);
        width: 100%;
    }
}

@keyframes riseMiddle {
    0% {
        transform: translateY(0px) translateZ(65px) skewY(-6.5deg);
        width: 96.04%;
    }
    100% {
        transform: translateY(0px) translateZ(65px) skewY(-3.5deg);
        width: 98.51%;
    }
}

@keyframes appearFromDeep {
    0% {
        transform: translateY(0px) translateZ(65px) skewY(-10deg);
        width: 55%;
        opacity: 0;
    }
    100% {
        transform: translateY(0px) translateZ(65px) skewY(-6.5deg);
        width: 96.04%;
        opacity: 1;
    }
}

.flipping-out {
    animation: leafFlyUp 0.5s cubic-bezier(0.4, 0.9, 0.3, 1) forwards !important;
    z-index: 40;
    pointer-events: none;
}

.rising-to-active {
    animation: riseToActive 0.5s cubic-bezier(0.3, 0.88, 0.35, 1) forwards !important;
    z-index: 35;
}

.middle-rising {
    animation: riseMiddle 0.5s cubic-bezier(0.3, 0.88, 0.35, 1) forwards !important;
    z-index: 25;
}

.new-bottom-layer {
    animation: appearFromDeep 0.5s cubic-bezier(0.25, 0.85, 0.4, 1) forwards !important;
    z-index: 15 !important;
}

.flip-button {
    position: absolute;
    right: -16px;
    top: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
    z-index: 100;
    width: 100px;
    height: 100px;
    padding: 0;
}
.flip-button:hover { transform: scale(1.05) translateY(-2px); }
.flip-button:active { transform: scale(0.98) translateY(1px); }

.slide-title {
    font-size: var(--font-size-m);
    line-height: var(--line-height-m);
    font-weight: 600;
    color: var(--color-text-primary, #312E2B);
}
.slide-desc {
    color: var(--color-text-secondary, #5C6062);
    font-size: var(--font-size-body-l);
    line-height: var(--line-height-body-l);
    margin-top: var(--space-3);
    font-weight: 500;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.slide-card .link-arrow {
    gap: 16px;
}

@media (max-width: 1899px) {
    .flip-button {
        width: 80px;
        height: 80px;
        right: -40px;
    }
    .cards-stack {
        height: 274px;
    }
    .slide-card {
        height: 274px;
        padding: 50px;
    }
}
@media (max-width: 1279px) {
    .main-slider-block {
        grid-column: span 4;
    }
    .cards-stack {
        height: 266px;
    }
    .slide-card {
        padding: 30px 30px 30px 30px;
        height: 266px;
    }
    .flip-button {
        width: 60px;
        height: 60px;
        right: -7px;
    }
    .slide-desc {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }
}
@media (max-width: 767px) {
    .cards-stack {
        height: 266px;
    }
    .slider-container {
        padding-right: 14px;
    }
    .main-slider-block {
        width: 100%;
    }
    .slide-card {
        padding: 30px;
        height: 300px;
    }
    .flip-button {
        right: -7px;
    }
    .slide-desc {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
    }
}
.geography-map {
    position: relative;
    margin-top: -172px;
}

.geography-advantages {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 50px;
    align-items: center;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.geography-advantages::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.geography-advantage {
    border-radius: 20px;
    background: linear-gradient(120deg, #FFF 28.01%, rgba(255, 255, 255, 0.00) 101.19%);
    backdrop-filter: blur(2.1500000953674316px);
    -webkit-backdrop-filter: blur(2.1500000953674316px);
    gap: 64px;
    display: flex;
    flex-direction: column;
    color: var(--color-text-primary, #312E2B);
    padding: 30px;
    width: 402px;
    height: 221px;
    box-sizing: border-box;

}
.geography-advantage__val {
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 65px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
}
.geography-advantage__desc {
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
}

.geography-advantage.geography-advantage_1 {
    grid-column: 7 / span 3;
    grid-row: 1 / span 2;
    max-height: 50%;
}
.geography-advantage.geography-advantage_2 {
    color: var(--color-text-contrast, #FFF);
    background: radial-gradient(88.73% 79.26% at 43.77% 37.92%, #474A4B 0%, #2E3031 100%);
    backdrop-filter: blur(6.099999904632568px);
    -webkit-backdrop-filter: blur(6.099999904632568px);
    grid-column: 10 / span 3;
    grid-row: 1;
}
.geography-advantage.geography-advantage_3 {
    background: linear-gradient(126deg, #F4ECE9 37.3%, rgba(244, 236, 233, 0.00) 95.28%);
    backdrop-filter: blur(6.099999904632568px);
    -webkit-backdrop-filter: blur(6.099999904632568px);
    grid-column: 10 / span 3;
    grid-row: 2;
}

@media (max-width: 1899px) {
    .geography-map {
        margin-top: -166px;
        padding-top: 0;
    }
    .geography-advantages {
        gap: 30px;
    }
    .geography-advantage {
        width: 267px;
        height: 148px;
        gap: 32px;
        padding: 24px;
    }
    .geography-advantage__val {
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; /* 110% */
        letter-spacing: -0.8px;
        text-transform: uppercase;
    }
    .geography-advantage__desc {
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 120% */
    }
}

@media (max-width: 1279px) {
    .geography-map {
        margin-top: 0;
    }
    .geography-advantages {
        display: flex;
        left: 0;
        right: 0;
        margin-top: 40px;
    }
    .geography-advantage {
        flex: 1;
        height: 180px;
    }
    .geography-advantage__val {
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; /* 110% */
        letter-spacing: -0.8px;
        text-transform: uppercase;
    }
    .geography-advantage__desc {
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 120% */
    }
}

@media (max-width: 767px) {
    .geography-advantage.geography-advantage_1 {
        min-height: unset;
    }
    .geography-advantages {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        gap: 16px;
    }
    .geography-advantage {
        flex: 0 0 320px;
        gap: 40px;
        padding: 24px;
    }
    .geography-advantage__val {
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; /* 110% */
        letter-spacing: -0.8px;
        text-transform: uppercase;
    }
    .geography-advantage__desc {
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 120% */
    }
}

@media (max-width: 767px) {
    .geography-map {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
}

.main-roll {
    position: relative;
}

.main-roll__layers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    mix-blend-mode: multiply;
    cursor: pointer;
}
.main-roll__layers.visible {
    opacity: 1;
    visibility: visible;
}
.main-roll_img {
    width: 100%;
    height: 100%;
    border: none;
    scale: 1.1;
}
.main-roll__layer {
    opacity: 0;
}
.main-roll__layer:hover, .main-roll__layer:focus, .main-roll__layer.active {
    opacity: 1;
}
.main-roll__layer_1 {
    transform: translate(35.85%, 25.1%) scale(0.472);
}
.main-roll__layer_2 {
    transform: translate(35.2%, 32.5%) scale(0.472);
}
.main-roll__layer_3{
    transform: translate(35.2%, 43.9%) scale(0.472);
}
.main-roll__layer_4{
    transform: translate(35%, 54.1%) scale(0.472);
}
.main-roll__layer_5{
    transform: translate(34.9%, 63%) scale(0.475);
}
.main-roll__layer_6{
    transform: translate(34.35%, 70.8%) scale(0.472);
}
.main-roll__layer_7{
    transform: translate(34.85%, 72.3%) scale(0.472);
}
.main-roll__layer_8{
    transform: translate(35.4%, 72.3%) scale(0.472);
}
.main-roll__layer_9{
    transform: translate(34.9%, 72.5%) scale(0.472);
}

@media (max-width: 767px) {
    .main-roll_img {
        scale: 1.5;
    }

    .main-roll__layer_1 {
        transform: translate(35%, 23.1%) scale(0.505);
    }
    .main-roll__layer_2 {
        transform: translate(34.3%, 30.9%) scale(0.505);
    }
    .main-roll__layer_3{
        transform: translate(34.4%, 43.1%) scale(0.505);
    }
    .main-roll__layer_4{
        transform: translate(34.4%, 54.2%) scale(0.505);
    }
    .main-roll__layer_5{
        transform: translate(34%, 63.5%) scale(0.505);
    }
    .main-roll__layer_6{
        transform: translate(34%, 71.8%) scale(0.505);
    }
    .main-roll__layer_7{
        transform: translate(34%, 73.5%) scale(0.505);
    }
    .main-roll__layer_8{
        transform: translate(34.2%, 73.3%) scale(0.505);
    }
    .main-roll__layer_9{
        transform: translate(34.2%, 73.5%) scale(0.505);
    }
}

/* Подсказка — создаётся динамически */
.dynamic-tooltip {
    position: fixed;
    border-radius: 10px;
    background: #DA5D32;
    display: inline-flex;
    padding: 8px 12px;
    align-items: center;
    gap: 8px;
    color: var(--color-text-contrast, #FFF);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 144.444% */
    z-index: 12;
    transition: opacity 0.15s;
}

@media (max-width: 1279px) {
    .dynamic-tooltip {
        font-size: 12px;
        line-height: 20px;
        padding: 6px;
    }
}

.material-content {
    position: relative;
    display: flex;
    gap: 50px;
    justify-content: flex-end;
}

.main-roll-blocks {
    display: flex;
    flex-direction: column;
    gap: 40px;
    z-index: 1;
}

.main-roll-props__block {
    border-radius: 20px;
    background: var(--color-card-primary, radial-gradient(170.32% 118.25% at 41.35% 69.79%, #DA5D32 0%, #FFBC3B 100%));
    backdrop-filter: blur(14.899999618530273px);
    -webkit-backdrop-filter: blur(14.899999618530273px);
    width: 302px;
    height: 280px;
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    color: var(--color-text-contrast, #FFF);
    box-sizing: border-box;
    overflow: hidden;
}

.main-roll-props__block.main-roll-props__block_1:before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 183 188' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='54.9' cy='54.9158' rx='54.9' ry='54.9158' transform='matrix(-1 0 0 1 55.8892 127.147)' fill='white'/%3E%3Cpath d='M-125.132 182.063C-125.132 112.388 -68.6658 55.9053 0.989197 55.9053C70.6442 55.9053 127.111 112.388 127.111 182.063C127.111 251.738 70.6442 308.221 0.989197 308.221V364.126C101.511 364.126 183 282.614 183 182.063C183 81.5125 101.511 0 0.989197 0C-99.5326 0 -181.022 81.5125 -181.022 182.063C-181.022 282.614 -99.5326 364.126 0.989197 364.126V308.221C-68.6658 308.221 -125.132 251.738 -125.132 182.063Z' fill='white'/%3E%3C/svg%3E%0A");
    background-position: bottom;
    width: 183px;
    height: 188px;
    background-repeat: no-repeat;
    left: 0;
    bottom: 0;
    position: absolute;
    opacity: 0.12;
    z-index: -1;
}

.main-roll-props__block.main-roll-props__block_1 {
    margin-left: 38%;
}
.main-roll-props__block.main-roll-props__block_2 {
    background: var(--color-card-tertiary, #EFF1F5);
    backdrop-filter: blur(14.899999618530273px);
    -webkit-backdrop-filter: blur(14.899999618530273px);
    color: var(--color-text-primary, #312E2B);
}

.main-roll-props__block.main-roll-props__block_2:before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='155' height='160' viewBox='0 0 155 160' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1784_54946)'%3E%3Cellipse cx='154.162' cy='154.947' rx='46.5' ry='46.7368' fill='white' fill-opacity='0.69'/%3E%3Cpath d='M260.986 154.947C260.986 95.6494 213.16 47.5789 154.162 47.5789C95.1647 47.5789 47.3378 95.6494 47.3378 154.947C47.3378 214.245 95.1647 262.316 154.162 262.316V309.895C69.0208 309.895 0 240.522 0 154.947C0 69.3723 69.0208 0 154.162 0C239.304 0 308.324 69.3723 308.324 154.947C308.324 240.522 239.304 309.895 154.162 309.895V262.316C213.16 262.316 260.986 214.245 260.986 154.947Z' fill='white' fill-opacity='0.69'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1784_54946'%3E%3Cpath d='M0 0H155V140C155 151.046 146.046 160 135 160H0V0Z' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    width: 155px;
    height: 160px;
    background-repeat: no-repeat;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: -1;
}

.main-roll-props__block-val {
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 65px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
}

.main-roll-props__block-val-title {
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
}

.main-roll-props__block-title {
    text-align: center;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
}

.material-content__roll {
    aspect-ratio: 76/41;
    overflow: hidden;
    margin: 0 0 40px -80px;
    max-height: 888px;
    height: 100%;
}

.material-content__blocks {
    position: absolute;
    left: calc(8.3333% - var(--column-gap-4));
    top: 80px;
}
.material-content__props {
    max-width: 403px;
    position: absolute;
    right: 0;
    top: 80px;
}

.main-roll-props {
    display: flex;
    flex-direction: column;
    gap: 50px;
    z-index: 1;
}
.main-roll-props__prop {
    display: flex;
    gap: 8px;
    flex-direction: column;
}
.main-roll-props__prop-title {
    color: var(--color-text-secondary, #5C6062);
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 123.077% */
}
.main-roll-props__prop-val {
    color: var(--color-text-secondary, #5C6062);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 144.444% */
}

@media (max-width: 1899px) {
    .main-roll-props__block-title {
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
    }
    .main-roll-props__block-val {
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; /* 110% */
        letter-spacing: -0.8px;
        text-transform: uppercase;
    }
    .main-roll-props__block-val-title {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px; /* 150% */
    }
    .material-content__roll {
        aspect-ratio: 290/149;
        margin: 0 -60px 0 -60px;
    }
    .main-roll-props {
        gap: 40px;
    }
    .material-content__blocks {
        left: 0;
        top: 120px
    }
    .main-roll-props__block {
        width: 200px;
        height: 230px;
        padding: 10px;
    }
    .main-roll-props__block.main-roll-props__block_1 {
        margin-left: 50%;
    }
    .material-content__props {
        width: 259px;
        top: 120px;
    }
}

@media (max-width: 1279px) {
    .main-roll-props__block-title {
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 120% */
    }
    .main-roll-props__block-val {
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; /* 110% */
        letter-spacing: -0.8px;
        text-transform: uppercase;
    }
    .main-roll-props__block-val-title {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px; /* 150% */
    }
    .material-content {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(2, auto);
        row-gap: 0;
        column-gap: 16px;
    }
    .material-content__blocks {
        position: static;
        grid-row: 2;
        grid-column: 1/4;
    }
    .material-content__props {
        position: static;
        grid-row: 2;
        grid-column: 5/9;
        width: auto;
        max-width: unset;
    }
    .material-content__roll {
        grid-row: 1;
        grid-column: 1/9;
        margin: 0 -40px;
        aspect-ratio: 970/529;
    }
    .main-roll-props__block {
        width: 100%;
        height: 200px;
    }
    .main-roll-props__block.main-roll-props__block_1 {
        margin-left: 0;
    }
    .main-roll-props__block.main-roll-props__block_1:before {
        width: 147px;
        height: 151px;
    }

}

@media (max-width: 767px) {
    .main-roll-props__block-title {
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 120% */
    }
    .main-roll-props__block-val {
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; /* 110% */
        letter-spacing: -0.8px;
        text-transform: uppercase;
    }
    .main-roll-props__block-val-title {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px; /* 150% */
    }
    .material-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto);
        row-gap: 40px;
        column-gap: 8px;
        margin-top: 40px;
    }
    .material-content__blocks {
        position: static;
        grid-row: 1;
        grid-column: 1/3;
    }
    .main-roll-props__block {
        height: 220px;
    }
    .material-content__props {
        position: static;
        grid-row: 3;
        grid-column: 1/3;
        width: auto;
        max-width: unset;
    }
    .material-content__roll {
        grid-row: 2;
        grid-column: 1/3;
        aspect-ratio: 190/137;
        margin: 0 -16px;
    }
    .main-roll-blocks {
        flex-direction: row;
        gap: 8px;
    }
}

.worldmap {
    margin-left: calc(-1 * var(--space-8));
    max-width: 1581px;
}