* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* I. контейнер 1-й секции */
.poster-container {
    position: relative;
    width: 100vw;
    height: auto;
    overflow: hidden; 
    background-color: #f4f4f4; 
}

/* 1. красная плашка */
.instruction-plaque {
    position: static;
    top: 0;
    left: 0;
    padding: 1.5vw;
    padding-left: 1.5vw;
    padding-right: 2.5vw;
    width: fit-content;
    background-color: #FF4444; 
    color: #FFFFFF;
    z-index: 5;
    
    border-top-right-radius: 10vw;
    border-bottom-right-radius: 10vw;
    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 1.1. текст в красной плашке */
.instruction-plaque span {
    font-family: 'Bounded', sans-serif;
    font-weight: 500; 
    
    font-size: 2vw;
    line-height: 1.25;
    
    white-space: nowrap;
}

.plaque-line-2 { margin-left: 11vw; }



/* 2. плашка kosmolab */
.kosmolab-frame {
    position: absolute;
    top: 0;
    left: 41.3vw;
    right: 0; 
    height: 8.05vw;
    
    border: 0.1vw solid #000000;
    border-radius: 10vw;
    
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}


/* 2.1. стиль текста */
.kosmolab-frame div[class^="kosmolab-text"] {
    font-family: 'Bounded', sans-serif;
    font-weight: 600; 
    font-size: 6.8vw;
    white-space: nowrap;
    position: absolute;
}

/* 2.2. текст kosmolab */
.kosmolab-text {
    color: #236CFF;
    position: absolute;
    top: 50%;
    transform: translateY(calc(-45%));
}

/* 2.3. блендинг */
.kosmolab-blend-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
    mix-blend-mode: difference;
}

/* 2.4. плашка для блендинга */
.kosmolab-moving-plaque {
    position: absolute;
    height: 100%; 
    width: 24vw;
    background-color: #236CFF;
    border-radius: 10vw;
    z-index: 0;

    animation: slide-kosmolab 2.7s infinite linear alternate;
}

/* 2.5. анимация */
@keyframes slide-kosmolab {
    0% { transform: translateX(74%); }
    50% { transform: translateX(-74%); }
    100% { transform: translateX(74%); }
}



/* 3. графика */
.graphics-frame {
    position: static;
    left: 0;
    width: 62vw;
    height: 32vw;

    top: 8vw; 
    margin-top: 4vw;

    /* border: 0.1vw solid #000000; */
    border-radius: 20vw;
    
    display: flex;
}

/* 3.1. большой круг */
.large-circle {
    position: absolute;
    width: 32vw;
    height: 32vw; 
    background-color: #236CFF; 
    border-radius: 100%;

    mix-blend-mode: multiply;
    animation: color-cycle 3s infinite step-end;
}

/* 3.2. анимация круга */
@keyframes color-cycle {
    0%, 100% { background-color: #236CFF; } 
    
    25% { background-color: #FF7C40; }
    50% { background-color: #FF4444; }
    75% { background-color: #236CFF; }
}

/* 3.3. контейнер стека */
.stack-frame-container {
    position: absolute;
    left: 36vw;
    height: auto;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* 3.4. разноцветные элементы */
.stacked-element { 
    height: 13.1vw;
    width: 30vw;
    border-radius: 10vw;
    margin-top: -3.7vw;
    margin-left: -4vw;
    
    mix-blend-mode: multiply;

    animation: 3s infinite ease-in-out;
}

/* 3.5. 1-й элемент без отступа */
.stacked-element:first-child { margin-top: 0; }

/* 3.6. цвета элементов */
.stack-orange { background-color: #FF7C40; }
.stack-blue { background-color: #236CFF; }
.stack-red { background-color: #FF4444; }

/* 3.7. анимация по парам */
.stack-orange { animation-name: stack-top-move; } 
.stack-blue { animation-name: stack-middle-move; } 
.stack-red { animation-name: stack-bottom-move; }

/* 3.8 кардры сдвига */
/* верхняя оранж */
@keyframes stack-top-move {
    0%, 100% { transform: translateY(0); }
    25%      { transform: translateY(9.3vw); } 
    50%, 95% { transform: translateY(0); }
}
/* средняя синяя */
@keyframes stack-middle-move {
    0%, 100% { transform: translateY(0); }
    25%      { transform: translateY(-9.3vw); } 
    50%      { transform: translateY(0); }      
    75%      { transform: translateY(9.3vw); } 
}
/* нижняя красная */
@keyframes stack-bottom-move {
    0%, 50%  { transform: translateY(0); }
    75%      { transform: translateY(-9.3vw); }
    100%     { transform: translateY(0); }
}



/* 4. оранж фрейм */
.assembly-plan {
    position: absolute;
    top: 8.06vw; 
    margin-top: 4vw;
    right: 0%;
    width: 38vw;
    height: 32vw; 
    
    background-color: #FF7C40; 
    border-radius: 50vh;
}

/* 4.1 лого космолаб */
.plan-logo {
    position: absolute;
    width: 6vw; 
    height: auto;
    left: 50%; 
    transform: translateX(-50%);
    top: 2.4vw; 
}

/* 4.2 заголовок: план сборки */
.plan-title {
    position: absolute;
    left: 50%; 
    transform: translateX(-50%);
    bottom: 2.4vw;
    
    display: flex;
    flex-direction: column;
    align-items: center;

    font-family: 'Bounded', sans-serif;
    font-weight: 500; 
    font-size: 2vw;
    line-height: 1.1; 
    text-align: center;
}

/* 4.3 контейнер шагов */
.plan-steps-container {
    position: absolute;
    top: 8vw;
    bottom: 8vw; 
    left: 0;
    right: 0;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
    padding: 0 5vw;
}

/* 4.4 секция шагов */
.step-item {
    width: 100%; 
    height: 4vw;
    position: relative;
    display: flex;
    align-items: center; 
}

/* 4.5 иконки */
.step-icon {
    width: 2.8vw; 
    height: 2.8vw;
    position: absolute;
    
    left: 50%;
    transform: translateX(-50%);
}

/* 4.6 подписи */
.step-label {
    font-family: 'Bounded', sans-serif;
    font-weight: 300; 
    font-size: 1.3vw;
    white-space: nowrap;
    position: absolute;
    color: #FFFFFF;
    
    top: 50%; 
    transform: translateY(-50%); 
}

/* подписи 1 & 3 */
.step-core .step-label, 
.step-flora .step-label { left: calc(50% + 4.3vw); }

/* подписи 2 & 4 */
.step-relief .step-label, 
.step-launch .step-label { right: calc(50% + 4.3vw); text-align: right; }



/* планшетная адаптивность 1-й секции */
@media screen and (max-width: 1023px) {

    /* 0. высота контейнера 1-й секции / таб */
    .poster-container {
        height: auto; 
        min-height: 68vw; 
    }



    /* 1. красная плашка / таб */
    .instruction-plaque {
        position: static;
        width: 100%;
        padding: 3vw 3vw;
        flex-direction: row;
        gap: 1vw;
    }
    .instruction-plaque span {
        font-size: 3.1vw;
    }
    .plaque-line-2 { margin-left: 0; }



    /* 2. плашка kosmolab / таб */
    .kosmolab-frame {
        position: relative;
        left: 0;
        width: 100%;
        height: 12vw;
        display: flex;
        align-items: center;
    }

    /* 2.1. текст kosmolab / таб */
    .kosmolab-text {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 4vw;
        transform: translateY(calc(-47%));
    }
    .kosmolab-text span {
        font-family: 'Bounded', sans-serif;
        font-weight: 600;
        font-size: 10vw;
    }

    /* 2.2. маленькая плашка блендинг / таб */
    .kosmolab-moving-plaque {
        position: absolute; 
        width: 40vw;
        height: 100%;
        background-color: #236CFF;
        border-radius: 10vw;
        top: 0;
        bottom: 0;
        z-index: 0;
        
        animation: slide-kosmolab 2.7s infinite linear alternate;
    }

    /* 2.3. анимация плашки / таб */
    @keyframes slide-kosmolab {
        0% { transform: translateX(78%); }
        50% { transform: translateX(-78%); }
        100% { transform: translateX(78%); }
    }
    


    /* 3. большой круг / таб */
    .large-circle {
        width: 42vw;
        height: 42vw; 
    }

    

    /* 4. разноцветные элементы / таб */
    .stacked-element { 
        height: 16.5vw;
        width: 27.6vw;
        border-radius: 20vw;
        margin-left: 46%;
        
        mix-blend-mode: multiply;
    }

    /* 3.5. 1-й элемент без отступа / таб */
    .stacked-element:first-child { margin-top: 0; }

    /* 3.6. анимация по парам / таб */
    .stack-orange { animation-name: stack-top-move; } 
    .stack-blue { animation-name: stack-middle-move; } 
    .stack-red { animation-name: stack-bottom-move; }

    /* 3.7 кардры сдвига / таб */
    /* верхняя оранж */
    @keyframes stack-top-move {
        0%, 100% { transform: translateY(0); }
        25%      { transform: translateY(12.3vw); } 
        50%, 95% { transform: translateY(0); }
    }
    /* средняя синяя */
    @keyframes stack-middle-move {
        0%, 100% { transform: translateY(0); }
        25%      { transform: translateY(-12.3vw); } 
        50%      { transform: translateY(0); }      
        75%      { transform: translateY(12.3vw); } 
    }
    /* нижняя красная */
    @keyframes stack-bottom-move {
        0%, 50%  { transform: translateY(0); }
        75%      { transform: translateY(-12.3vw); }
        100%     { transform: translateY(0); }
    }




    /* 4. оранж фрейм / таб */
    .assembly-plan {
        position: absolute;
        width: 30vw;
        height: 42vw; 
        margin-top: 18vw;
        right: 0%;
    } 
    .plan-logo { width: 6.5vw; top: 4vw; }
    .plan-title { font-size: 2.8vw; bottom: 4vw; }

    /* 4.3 контейнер шагов / таб */
    .plan-steps-container {
        padding: 4vw;
    }

    /* 4.5 иконки / таб */
    .step-icon {
        position: absolute;
        width: 3.4vw; 
        height: 3.4vw;

        margin-top: -1vw;
    }

    /* 4.6 подписи / таб */
    .step-label { 
        position: absolute;
        bottom: 3.5vw; 
        left: 50%;
        transform: translateX(-50%);

        font-size: 2.5vw;
        font-weight: 300;
        color: #FFFFFF;
        white-space: nowrap;
        
        background-color: #FF7C40; 
        padding: 5vw 4vw;
        border-radius: 5vw;
        
        opacity: 0;
        visibility: hidden;
        z-index: 10;
    }

    /* 4.7 позиционирование подписей / таб */
    .step-item:nth-child(1):hover .step-label { left: 11.2vw; top: 16.9vw; }
    .step-item:nth-child(2):hover .step-label { left: 3.6vw; top: 12vw; }
    .step-item:nth-child(3):hover .step-label { left: 11.5vw; top: 7.3vw; }
    .step-item:nth-child(4):hover .step-label { left: 3.5vw; top: 2.3vw; }

    /* 4.8 анимация подписей / таб */
    @keyframes show-then-hide {
        0% { opacity: 0; visibility: hidden; }
        35% { opacity: 1; visibility: visible; }
        50% { opacity: 1; visibility: visible; }
        100% { opacity: 0; visibility: hidden; }
    }
    
    /* 4.9 длительность анимации подписей / таб */
    .step-item:hover .step-label {
        animation: show-then-hide 2s ease-in-out; 
    }

    /* 4.10 анимация заголовка / таб */
    @keyframes hide-then-show {
        0% { opacity: 1; visibility: visible; }
        15% { opacity: 0; visibility: hidden; } 
        85% { opacity: 0; visibility: hidden; } 
        100% { opacity: 1; visibility: visible; }
    }

    /* 4.11 длительность анимации заголовка / таб */
    .assembly-plan:has(.step-item:hover) .plan-title {
        animation: hide-then-show 2s ease-in-out;
    }
}

/* мобильная адаптивность 1-й секции */
@media screen and (max-width: 767px) {

    /* 0. шрифты / тел */
    .instruction-plaque span {
        font-size: calc(2vw * 2.5); 
        line-height: 1.25;
        white-space: nowrap;
    }
    .plaque-line-2 { margin-left: 25vw; }
    .kosmolab-frame div[class^="kosmolab-text"] {
        font-size: calc(6.8vw * 1.8);
    }
    .plan-title { font-size: calc(2vw * 2.5); }



    /* 1. красная плашка / тел */
    .instruction-plaque {
        position: static; 
        width: 100%;
        height: auto;
        flex-direction: column;
        padding: 2.3vw;
        padding-left: 2.3vw;
    }
    


    /* 2. плашка kosmolab / тел */
    .kosmolab-frame {
        position: relative; 
        width: 100%;
        height: 16vw;
        left: 0%;
        
        border: 0.1vw solid #000000;
        border-radius: 10vw;
        
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 5;
    }

    /* 2.1. текст kosmolab / тел */
    .kosmolab-text {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 4vw;
        transform: translateY(calc(-47%));
    }
    .kosmolab-text span {
        font-family: 'Bounded', sans-serif;
        font-weight: 600;
        font-size: calc(6.8vw * 1.8);
    }

    /* 2.2. блендинг-слой / тел */
    .kosmolab-blend-layer {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 5;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        mix-blend-mode: difference;
    }
    
    /* 2.3. маленькая плашка блендинг / тел */
    .kosmolab-moving-plaque {
        position: absolute; 
        width: 40vw;
        height: 100%;
        background-color: #236CFF;
        border-radius: 10vw;
        top: 0;
        bottom: 0;
        z-index: 0;
        
        animation: slide-kosmolab 2.7s infinite linear alternate;
    }

    /* 2.4. анимация плашки / тел */
    @keyframes slide-kosmolab {
        0% { transform: translateX(78%); }
        50% { transform: translateX(-78%); }
        100% { transform: translateX(78%); }
    }





    /* 3. графика / тел */
    .graphics-frame {
        position: static; 
        width: 100%;
        height: auto;
        transform: translateY(-0.3%);
        margin-top: 5vw;
        
        /* border: 0.1vw solid #000000; */
        border-radius: 50vw;
        
        display: flex;
    }
    
    /* 3.1. большой круг / тел */
    .large-circle {
        position: static;
        width: 100vw;
        height: 50vw; 
        
        border-radius: 100%;
        mix-blend-mode: multiply;
    }
    
    /* 3.3. контейнер стека / тел */
    .stack-frame-container {
        position: static;
        width: 100%;
        height: auto; 
        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    /* 3.4. разноцветные элементы / тел */
    .stacked-element { 
        height: 19vw;
        width: 49vw;
        border-radius: 20vw;
        margin-left: -1vw;
        
        mix-blend-mode: multiply;

        animation: 3s infinite ease-in-out;
    }

    /* 3.5. 1-й элемент без отступа / тел */
    .stacked-element:first-child { margin-top: 0; }

    /* 3.6. анимация по парам / тел */
    .stack-orange { animation-name: stack-top-move; } 
    .stack-blue { animation-name: stack-middle-move; } 
    .stack-red { animation-name: stack-bottom-move; }

    /* 3.7 кардры сдвига / тел */
    /* верхняя оранж */
    @keyframes stack-top-move {
        0%, 100% { transform: translateY(0); }
        25%      { transform: translateY(15vw); } 
        50%, 95% { transform: translateY(0); }
    }
    /* средняя синяя */
    @keyframes stack-middle-move {
        0%, 100% { transform: translateY(0); }
        25%      { transform: translateY(-15vw); } 
        50%      { transform: translateY(0); }      
        75%      { transform: translateY(16vw); } 
    }
    /* нижняя красная */
    @keyframes stack-bottom-move {
        0%, 50%  { transform: translateY(0); }
        75%      { transform: translateY(-15vw); }
        100%     { transform: translateY(0); }
    }





    
    /* 4. оранжевый фрейм / тел */
    .assembly-plan {
        position: static; 
        width: 100%; 
        height: auto;
        right: auto;
        margin-top: 5vw;
        
        background-color: #FF7C40; 
        
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 4.5vw 6vw;
    }
    
    /* 4.1 логотип / тел */
    .plan-logo {
        position: static; 
        transform: none;
        width: 9vw; 
        order: 1; 
        align-items: flex-start;
    }

    /* 4.2 заголовок / тел */
    .plan-title {
        position: static;
        transform:translateY(2vw);
        left: auto;
        bottom: auto;
        
        text-align: right;
        z-index: 1;
        order: 3; 
        align-items: flex-end;
    }

    /* 4.3 контейнер шагов / тел */
    .plan-steps-container {
        position: static;
        flex-direction: row;
        justify-content: space-between;
        order: 2;

        z-index: 2;
        gap: 2vw;
    }

    /* 4.4 шаги / тел */
    .step-item {
        position: relative;
        width: auto; 
        height: auto;
        display: block;
        transform: translateY(1vw);
        margin: 0 1vw; 
    }

    /* 4.5 иконки / тел */
    .step-icon {
        position: static;
        transform: none;
        width: 6.5vw;
        height: 6.5vw;
    }

    /* 4.6 подписи / тел */
    .step-label { 
        position: absolute;
        font-size: calc(1.3vw * 3);
        font-weight: 300; 
        white-space: nowrap;
        
        top: 45%;
        
        color: #FFFFFF;
        background-color: #FF7C40;
        border-radius: 10vw;
        padding: 6vw 7vw;
        
        opacity: 0;
        visibility: hidden;
        z-index: 100;
    }

    /* 4.7 позиционирование подписей / тел */
    .step-item:nth-child(1):hover .step-label { left: 59vw; top: -5vw; }
    .step-item:nth-child(2):hover .step-label { left: 36vw; top: -5vw; }
    .step-item:nth-child(3):hover .step-label { left: 38vw; top: -5vw; }
    .step-item:nth-child(4):hover .step-label { left: 15vw; top: -5vw; }

    /* 4.8 анимация подписей / тел */
    @keyframes show-then-hide {
        0% { opacity: 0; visibility: hidden; }
        35% { opacity: 1; visibility: visible; }
        50% { opacity: 1; visibility: visible; }
        100% { opacity: 0; visibility: hidden; }
    }

    /* 4.9 длительность анимации подписей / тел */
    .step-item:hover .step-label {
        animation: show-then-hide 2s ease-in-out; 
    }

    /* 4.10 анимация заголовка / тел */
    @keyframes hide-then-show {
        0% { opacity: 1; visibility: visible; }
        15% { opacity: 0; visibility: hidden; } 
        85% { opacity: 0; visibility: hidden; } 
        100% { opacity: 1; visibility: visible; }
    }

    /* 4.11 длительность анимации заголовка / тел */
    .assembly-plan:has(.step-item:hover) .plan-title {
        animation: hide-then-show 2s ease-in-out;
    }
}








/* II. контейнер 2-й секции */
.step-2-container {
    position: relative;
    width: 100vw;
    height: auto;
    overflow: hidden; 
    background-color: #f4f4f4; 
}

/* 1. контейнер бегущей строки */
.step-header-container {
    height: 8.05vw;
    margin-top: 3.6vw;
    background-color: #FF4444;
    overflow: hidden;
    white-space: nowrap;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 1.1 текст */
.marquee-content {
    font-family: 'Bounded', sans-serif;
    font-weight: 600; 
    font-size: 6.8vw;
    color: #FFFFFF;

    display: inline-block;
    animation: marquee-scroll 2s linear infinite;
}

/* 1.2 анимация скролла */
@keyframes marquee-scroll {
    from { transform: translateX(0%) translateY(5%); }
    to { transform: translateX(-100%) translateY(5%); }
}



/* 2. граф плашка с ядрами */
.core-graphics-frame {
    margin: 4vw auto;
    width: 100%;
    height: 17vw;
    background-color: #FF7C40; 
    border-radius: 12vw;
    
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 5vw;
}

/* 2.1. контейнер фигур */
.core-group {
    position: relative;
    width: 17vw;
    height: 17vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2.2. общие стили фигур */
.shape { position: absolute; }

/* 2.3. магма */
.group-magma .square {
    width: 9vw;
    height: 9vw;
    background-color: #FF4444;
    mix-blend-mode: hard-light;
    left: 0;
}
.group-magma .core-circle {
    width: 9vw;
    height: 9vw;
    border-radius: 50%;
    background-color: #236CFF;
    mix-blend-mode: plus-lighter;
    right: 3.5vw;
}

/* 2.4. газ */
.group-gas .triangle {
    border-right: 16vw solid #236CFF;
    border-bottom: 7vw solid transparent;
    mix-blend-mode: plus-lighter;
    right: 3.5vw;
    bottom: 4vw;
}
.group-gas .core-circle {
    width: 9vw;
    height: 9vw;
    border-radius: 50%;
    background-color: #236CFF;
    mix-blend-mode: hard-light;
    left: 4vw;
}

/* 2.5. атмосфера */
.group-atmosphere .core-circle {
    width: 9vw;
    height: 9vw;
    border-radius: 50%;
    background-color: #FF4444;
    mix-blend-mode: hard-light;
    left: 6vw;
}
.group-atmosphere .ring {
    width: 12.8vw;
    height: 12.8vw;
    border-radius: 50%;
    border: 3.3vw solid #236CFF; 
    mix-blend-mode: plus-lighter;
    left: 4.1vw;
}

/* 2.6. осадки */
.group-precipitation .core-circle {
    width: 9vw;
    height: 9vw;
    border-radius: 50%;
    background-color: #236CFF;
    mix-blend-mode: plus-lighter;
    right: 1vw;
}
.group-precipitation .dot {
    width: 3.5vw;
    height: 3.5vw;
    border-radius: 50%;
    background-color: #236CFF;
    mix-blend-mode: plus-lighter;
}
.dot-1 { top: 4vw; left: 6vw; }
.dot-2 { top: 5vw; right: -1.7vw; }
.dot-3 { bottom: 1.7vw; left: 4vw; }


/* 2.7. стили подписей */
.core-label {
    position: absolute;
    font-family: 'Bounded', sans-serif;
    font-weight: 300;
    font-size: 1.3vw;
    color: #FFFFFF; 
    white-space: nowrap;
    z-index: 10; 
}

/* 2.7.1. подпись 1 магма */
.group-magma .core-label {
    top: 1.7vw;
    left: 0vw;
}

/* 2.7.2. подпись 2 газ */
.group-gas .core-label {
    bottom: 1.7vw;
    left: -3vw;
}

/* 2.7.3. подпись 3 атмосфера */
.group-atmosphere .core-label {
    left: -5vw;
    transform: rotate(-90deg);
    transform-origin: center;
}

/* 2.7.4. подпись 4 осадки */
.group-precipitation .core-label {
    top: 1.7vw;
    right: 0vw;
}


/* 2.8.1 анимация 1 магма */
@keyframes magma-circle-move {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5vw); } 
}
@keyframes magma-square-move {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5vw); }
}
.group-magma .core-circle { animation: magma-circle-move 2s ease-in-out infinite; }
.group-magma .square { animation: magma-square-move 2s ease-in-out infinite; }


/* 2.8.2 анимация 2 газ */
@keyframes orbit-motion-reverse {
    0% { transform: rotate(0deg) translateX(0.7vw) rotate(0deg); }
    100% { transform: rotate(-360deg) translateX(0.7vw) rotate(360deg); }
}
@keyframes gas-triangle-move {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2.3vw); }
}
.group-gas .core-circle { animation: orbit-motion-reverse 1.8s linear infinite; }
.group-gas .triangle { animation: gas-triangle-move 2s ease-in-out infinite; }


/* 2.8.3 анимация 3 атмосфера */
@keyframes orbit-motion {
    0% { transform: rotate(0deg) translateX(0.8vw) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(0.8vw) rotate(-360deg); }
}
.group-atmosphere .ring { animation: orbit-motion 1.2s linear infinite; }


/* 2.8.4 анимация 4 осадки */
@keyframes core-orbit-motion {
    0% { transform: rotate(0deg) translateX(0.5vw) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(0.5vw) rotate(-360deg); }
}
@keyframes dot-scatter-1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-3vw, -1vw); }
}
@keyframes dot-scatter-2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(1.5vw, 0.5vw); }
}
@keyframes dot-scatter-3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2vw, -1.5vw); }
}
.group-precipitation .core-circle { animation: core-orbit-motion 1.5s linear infinite;}
.group-precipitation .dot-1 { animation: dot-scatter-1 1.5s ease-in-out infinite; }
.group-precipitation .dot-2 { animation: dot-scatter-2 1.2s ease-in-out infinite; }
.group-precipitation .dot-3 { animation: dot-scatter-3 1.3s ease-in-out infinite; }


/* планшетная адаптивность 2-й секции */
@media (max-width: 1023px) {
    
    /* 1. бегущая строка / таб */
    .step-header-container {
        height: 12vw; 
        margin-top: 5vw;
    }
    .marquee-content { font-size: 10vw; }



    /* 2. оранж плашка / таб */
    .core-graphics-frame {
        position: relative;
        width: 100%;
        height: 42vw;
        border-radius: 30vw;
        margin: 5vw 0;
        display: flex;
        overflow: hidden;
        justify-content: flex-start;
    }

    /* 2.1 контейнер групп / таб */
    .core-group {
        min-width: 50%; 
        height: 100%;
        flex-shrink: 0;
        position: relative;
        
        animation: tablet-paging 4s cubic-bezier(0.85, 0.15, 0.15, 0.85) infinite;
    }

    .group-magma .square, .group-magma .core-circle,
    .group-gas .core-circle, .group-atmosphere .core-circle,
    .group-precipitation .core-circle {
        width: 22vw;
        height: 22vw;
    }

    /* 2.2 магма / таб */
    .group-magma .square { top: 10vw; left: 9vw; }
    .group-magma .core-circle {
        top: 10vw;
        right: 5vw;
        
        background-color: #FFFFFF;
        mix-blend-mode: soft-light;
    }

    /* 2.3 газ / таб */
    .group-gas .triangle {
        border-right: 38vw solid #FFFFFF;
        border-bottom: 15vw solid transparent;
        right: 5vw;
        bottom: 12vw;
    }
    .group-gas .core-circle { top: 9vw; left: 15vw; }

    /* 2.4 атмосфера / таб */
    .group-atmosphere .ring {
        top: 6.8vw;
        left: 14.8vw;
        width: 28vw;
        height: 28vw;
        border-width: 7vw;

        border-color: #FFFFFF;
        mix-blend-mode: soft-light;
    }
    .group-atmosphere .core-circle { top: 10vw; left: 16.7vw; }

    /* 2.5 осадки / таб */
    .group-precipitation .core-circle {
        top: 10vw;
        left: 11.5vw;

        background-color: #FFFFFF;
        mix-blend-mode: soft-light;
    }
    .group-precipitation .dot {
        width: 8.5vw;
        height: 8.5vw;

        background-color: #FFFFFF;
        mix-blend-mode: soft-light;
    }
    .dot-1 { top: 10vw; left: 9vw; }
    .dot-2 { top: 14vw; right: 4vw; }
    .dot-3 { bottom: 5vw; left: 4vw; }




    /* 3 подписи / таб */
    .core-label {
        font-size: 2.5vw;
        bottom: 4vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        white-space: nowrap;
    }

    /* 3.6.1. подпись 1 магма */
    .group-magma .core-label {
        top: 4vw;
        right: -2vw;
    }
    /* 3.6.2. подпись 2 газ */
    .group-gas .core-label {
        bottom: 1.7vw;
        right: -10vw;
    }
    /* 3.6.3. подпись 3 атмосфера */
    .group-atmosphere .core-label {
        left: 4vw !important; 
        top: 50% !important;
        transform: translateY(-50%) rotate(-90deg) !important;
    }
    /* 3.6.4. подпись 4 осадки */
    .group-precipitation .core-label {
        top: 4vw;
        right: 10vw;
    }



    /* 4. анимация перелистывания / таб */
    @keyframes tablet-paging {
        0%, 45% { transform: translateX(0%); }
        55%, 90% { transform: translateX(-200%); }
        100% { transform: translateX(0%); }
    }


    
    /* 4.1 магма анимация / таб */
    @keyframes magma-circle-move {
        0%, 100% { transform: translateX(0) scale(1); }
        50% { transform: translateX(-10vw) scale(1); } 
    }
    @keyframes magma-square-move {
        0%, 100% { transform: translateX(0) scale(1); }
        50% { transform: translateX(10vw) scale(1); } 
    }
    .group-magma .core-circle { animation: magma-circle-move 2s ease-in-out infinite; }
    .group-magma .square { animation: magma-square-move 2s ease-in-out infinite; }

    /* 4.2 газ анимация / таб */
    @keyframes gas-triangle-move {
        0%, 100% { transform: translateY(2vw); }
        50% { transform: translateY(-6vw); } 
    }
    .group-gas .core-circle { animation: orbit-motion-reverse 1.8s linear infinite; }
    .group-gas .triangle { animation: gas-triangle-move 2s ease-in-out infinite; }

    /* 4.3 атмосфера анимация / таб */
    @keyframes orbit-motion {
        0% { transform: rotate(0deg) translateX(2vw) rotate(0deg); }
        100% { transform: rotate(360deg) translateX(2vw) rotate(-360deg); }
    }
    @keyframes orbit-motion-reverse {
        0% { transform: rotate(0deg) translateX(2vw) rotate(0deg); }
        100% { transform: rotate(-360deg) translateX(2vw) rotate(360deg); }
    }
    .group-atmosphere .ring { animation: orbit-motion 1s linear infinite; }

    /* 4.4 осадки анимация / таб */
    @keyframes core-orbit-motion {
        0% { transform: rotate(0deg) translateX(0.5vw) rotate(0deg); }
        100% { transform: rotate(360deg) translateX(0.5vw) rotate(-360deg); }
    }
    @keyframes dot-scatter-1 {
        0%, 100% { transform: translate(0, 0); }
        50% { transform: translate(-5vw, -2vw); }
    }
    @keyframes dot-scatter-2 {
        0%, 100% { transform: translate(0, 0); }
        50% { transform: translate(4vw, 3vw); }
    }
    @keyframes dot-scatter-3 {
        0%, 100% { transform: translate(0, 0); }
        50% { transform: translate(6vw, -5vw); }
    }
    .group-precipitation .core-circle { animation: orbit-motion 1.2s linear infinite;}
    .group-precipitation .dot-1 { animation: dot-scatter-1 1.5s ease-in-out infinite; }
    .group-precipitation .dot-2 { animation: dot-scatter-2 1.2s ease-in-out infinite; }
    .group-precipitation .dot-3 { animation: dot-scatter-3 1s ease-in-out infinite; }

}

/* мобильная адаптивность 2-й секции */
@media (max-width: 767px) {

    /* 1. бегущая строка / тел */
    .step-header-container {
        height: 16.1vw !important;
        margin-top: 5vw;
    }
    .marquee-content { font-size: calc(6.8vw * 1.8); }

    /* 2. оранж плашка / тел */
    .core-graphics-frame {
        position: relative;
        width: 100%;
        height: 85vw;
        border-radius: 100vw;
        margin: 5vw auto;
        padding: 0;
        justify-content: flex-start;
        overflow: hidden;
    }

    /* 2.1 контейнер групп / тел */
    .core-group {
        min-width: 100%;
        height: 100%;
        flex-shrink: 0;
        
        animation: mobile-paging 12s cubic-bezier(0.85, 0, 0.15, 1) infinite;
    }

    .group-magma .square, .group-magma .core-circle,
    .group-gas .core-circle, .group-atmosphere .core-circle,
    .group-precipitation .core-circle {
        width: 40vw;
        height: 40vw;
    }

    /* 2.2 магма / тел */
    .group-magma .square { top: 21vw; left: 15vw; }
    .group-magma .core-circle {
        top: 21vw;
        right: 15vw;

        background-color: #FFFFFF;
        mix-blend-mode: soft-light;
    }

    /* 2.3 газ / тел */
    .group-gas .triangle {
        border-right: 60vw solid #FFFFFF;
        border-bottom: 30vw solid transparent;
        right: 25vw;
        bottom: 25vw;

        mix-blend-mode: soft-light;
    }
    .group-gas .core-circle { top: 18vw; left: 30vw; }

    /* 2.4 атмосфера / тел */
    .group-atmosphere .ring {
        top: 13.3vw;
        width: 50vw;
        height: 50vw;
        border-width: 12vw;
        left: 25vw;

        border-color: #FFFFFF;
        mix-blend-mode: soft-light;
        animation: orbit-motion 1s linear infinite;
    }
    .group-atmosphere .core-circle {
        top: 18vw;
        left: 30vw;
    }

    /* 2.5 осадки / тел */
    .group-precipitation .core-circle {
        top: 18vw;
        left: 30vw;
        background-color: #FFFFFF;
        mix-blend-mode: soft-light;
    }
    .group-precipitation .dot {
        width: 16vw;
        height: 16vw;

        background-color: #FFFFFF;
        mix-blend-mode: soft-light;
    }
    .dot-1 { top: 15vw; left: 30vw; }
    .dot-2 { top: 20vw; right: 15vw; }
    .dot-3 { bottom: 20vw; left: 23vw; }

    /* 2.6 подписи / тел */
    .core-label {
        font-size: calc(1.3vw * 3);
        font-weight: 300; 
        bottom: 8vw !important;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) rotate(0deg) !important;
    }
    .group-atmosphere .core-label {
        top: auto !important;
        left: 50% !important;
        transform: translateX(-50%) rotate(0deg) !important;
    }

    /* 3. анимация перелистывания / тел */
    @keyframes mobile-paging {
        0%, 20% { transform: translateX(0%); }
        25%, 45% { transform: translateX(-100%); }
        50%, 70% { transform: translateX(-200%); }
        75%, 95% { transform: translateX(-300%); }
        100% { transform: translateX(0%); }
    }


    /* магма анимация / тел */
    @keyframes magma-circle-move {
        0%, 100% { transform: translateX(0) scale(1); }
        50% { transform: translateX(-15vw) scale(1); } 
    }
    @keyframes magma-square-move {
        0%, 100% { transform: translateX(0) scale(1); }
        50% { transform: translateX(15vw) scale(1); } 
    }

    /* газ анимация / тел */
    @keyframes gas-triangle-move {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8vw); } 
    }

    /* атмосфера анимация / тел */
    @keyframes orbit-motion {
        0% { transform: rotate(0deg) translateX(3vw) rotate(0deg); }
        100% { transform: rotate(360deg) translateX(3vw) rotate(-360deg); }
    }
    @keyframes orbit-motion-reverse {
        0% { transform: rotate(0deg) translateX(2vw) rotate(0deg); }
        100% { transform: rotate(-360deg) translateX(2vw) rotate(360deg); }
    }

    /* осадки анимация / тел */
    @keyframes dot-scatter-1 {
        0%, 100% { transform: translate(0, 0); }
        50% { transform: translate(-10vw, -5vw); }
    }
    @keyframes dot-scatter-2 {
        0%, 100% { transform: translate(0, 0); }
        50% { transform: translate(8vw, 6vw); }
    }
    @keyframes dot-scatter-3 {
        0%, 100% { transform: translate(0, 0); }
        50% { transform: translate(12vw, -8vw); }
    }
}








/* III. контейнер 3-й секции */
.step-3-container {
    position: relative;
    width: 100vw;
    height: auto;
    overflow: hidden; 
    background-color: #f4f4f4; 
}

/* 1. контейнер бегущей строки + таба */
.step-header-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 0vw;
}

/* 1.1. левая бегущая строка */
.marquee-blue {
    flex-grow: 1; 
    background-color: #236CFF;
    border-radius: 0 10vw 10vw 0;
    height: 8.05vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    
    margin-top: 0vw;
    padding-top: 1vw;
}

/* 1.2. анимация скролла */
.marquee-blue .marquee-content {
    animation: marquee-scroll-reverse 2.3s linear infinite;
    color: #FFFFFF;
}
@keyframes marquee-scroll-reverse {
    from { transform: translateX(-100%); }
    to { transform: translateX(0%); }
}


/* 2. правый экшн фрейм */
.action-tab {
    position: relative;
    height: 8.05vw;
    border: 0.1vw solid #000000;
    border-radius: 10vw;
    display: flex;
    align-items: center;
    padding: 0 0 0 3vw; 

    margin-top: 0vw;
    min-width: 30vw;
}

/* 2.1 заголовок в табе */
.action-text {
    font-family: 'Bounded', sans-serif;
    font-weight: 500; 
    font-size: 2vw;
    color: #000000;
    line-height: 1.1;
    text-transform: uppercase;
}

/* 2.2 синий круг внутри таба */
.action-circle {
    width: 8.05vw;
    height: 8.05vw;
    background-color: #236CFF;
    border-radius: 100%;
    
    position: absolute;
    right: 0vw; 
    top: -0.1vw;
    mix-blend-mode: multiply;
    animation: color-cycle 3s infinite step-end;
}

/* 2.3. анимация круга */
@keyframes color-cycle {
    0%, 100% { background-color: #236CFF; } 
    
    25% { background-color: #FF7C40; }
    50% { background-color: #FF4444; }
    75% { background-color: #236CFF; }
}



/* 3. контейнер инструментов + 2х фреймов с рельефом */
.step-3-main-content {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: flex-start; 
    margin-top: 3.6vw ;
}

/* 3.1 фрейм с инструментами */
.tools-circle-frame {
    width: 32vw;
    height: 32vw;
    border: 0.1vw solid #000000;
    border-radius: 50vw;

    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

/* 3.2. контейнер для свг инструментов */
.tools-container {
    display: flex;
    gap: 2vw;
}

/* 3.3. индивидуальные настройки инструментов */
.shovel img { height: 15vw; }
.pickaxe img { height: 15vw; }
.rake img { height: 15vw; }

/* 3.4 стиль анимации инструментов */
.tool-item {
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

/* 3.5. ховер анимация */
.tool-item:hover { transform: translateY(-1vw) scale(1.05); }



/* 4. красный фрейм */
.selection-frame.red-frame {
    position: relative;
    width: 40vw;
    height: 32vw;
    background-color: #FF4444; 
    mix-blend-mode: multiply;
    border-radius: 50vw;
    margin-top: 0vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 4.1. наборный текст сверху и снизу */
.selection-label {
    font-family: 'Bounded', sans-serif;
    font-weight: 300;
    font-size: 1.3vw;
    color: #FFFFFF;
}
.selection-label.top { margin-bottom: 7vw; }
.selection-label.bottom { margin-top: 7vw; }

/* 4.2 контейнер для цифр */
.number-container {
    position: relative;
    width: 100%;
    height: 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.number-item {
    position: absolute;
    font-family: 'Bounded', sans-serif;
    font-weight: 600; 
    font-size: 8vw;
    color: #FFFFFF;
    line-height: 1;
    opacity: 0;
    
    animation: relief-fade 1.8s infinite step-end;
}

/* 4.3 тайминги для цифр */
.n1 { animation-delay: 0s; }   
.n2 { animation-delay: 0.6s; } 
.n3 { animation-delay: 1.2s; } 

@keyframes relief-fade {
    0%, 33.33% { opacity: 1; }
    33.35%, 100% { opacity: 0; }
}



/* 5. cиний фрейм */
.selection-frame.blue-frame {
    position: relative;
    width: 40vw;
    height: 32vw;
    background-color: #236CFF;
    mix-blend-mode: multiply; 
    border-radius: 50vw;
    margin-left: -10vw;
}

/* 6. мастер-слой рельефов */
.relief-master-layer {
    position: absolute;
    left: 66vw;
    top: 50%;
    transform: translateY(-50%);
    width: 30vw;
    height: 25vw;
    z-index: 100; 
}
.relief-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.relief-item {
    position: absolute;
    opacity: 0;
    animation: relief-fade 1.8s infinite step-end;
}

/* 6.1. индивидуальное позиционирование рельефов */
.relief-item.mountain { 
    height: 13.5vw; 
    top: 50%; 
    left: 48%; 
    transform: translate(-50%, -50%); 
}
.relief-item.sea { 
    height: 9vw; 
    top: 50%; 
    left: 48%; 
    transform: translate(-50%, -50%); 
}
.relief-item.fire { 
    height: 22vw; 
    top: 45%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

/* тайминги рельефа */
.mountain { animation-delay: 0s; }
.sea { animation-delay: 0.6s; }
.fire { animation-delay: 1.2s; }

/* 6.4 анимация смены */
@keyframes relief-fade {
    0%, 33.33% { opacity: 1; }
    33.35%, 100% { opacity: 0; }
}




/* планшетная адаптивность 3-й секции */
@media (max-width: 1023px) {

    /* 1. бегущая строка / таб */
    .step-header-container { height: 12vw; }

    /* 2. правый экшн фрейм / таб */
    .action-tab { height: 12vw; min-width: 40vw; }
    .action-text { font-size: 2.8vw; }

    .action-circle {
        width: 12vw;
        height: 12vw;
    }


    /* 2. фрейм с инстурментами / таб */
    .tools-circle-frame {
        width: 36vw;  
        height: 36vw; 
    }

    /* 3. красный + синий фреймы / таб */
    .selection-frame.red-frame,
    .selection-frame.blue-frame {
        width: 36vw; 
        height: 36vw; 
    }
    .selection-label.top { margin-bottom: 6.8vw; }
    .selection-label.bottom { margin-top: 6.8vw; }
    .selection-frame.blue-frame { margin-left: -6.5vw; }

    /* 3.1. текст в красном / таб */
    .selection-label {
        font-size: 2.5vw;
        font-weight: 300;
    }
    .number-item {
        font-weight: 600; 
        font-size: 9vw;
    }
    .selection-label.top,
    .selection-label.bottom { display: none; }

    /* 3.2. иконки рельефа / таб */
    .relief-item.mountain { height: 13vw; left: 54%; }
    .relief-item.sea { height: 10vw; left: 53%; }
    .relief-item.fire { height: 24vw; left: 53%;  }

}


/* мобильная адаптивность 3-й секции */
@media (max-width: 767px) {

    /* 1. бегущая строка / тел */
    .marquee-blue {
        height: 16.1vw; 
        border-radius: 0 0 0 0;
    }
    .marquee-blue .marquee-content { 
        font-size: calc(6.8vw * 1.8); 
        padding-top: 0.5vw; 
    }


    /* 2. убрать правый фрейм / тел */
    .action-tab {
        display: none;
    }

    /* 3. контейнер инструментов + 2х фреймов с рельефом / тел */
    .step-3-main-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding-left: 0;
        margin-top: 5vw;
    }

    /* 3.1 фрейм с инструментами / тел */
    .tools-circle-frame {
        width: 100%;
        height: 50vw;
        border-radius: 50vw;
    }
    .tools-container { gap: 4vw; }
    .tools-container img { height: 30vw; }

    .selection-frame.red-frame,
    .selection-frame.blue-frame { width: 55vw; height: 50vw; }
    .selection-frame.blue-frame { margin-left: -5vw; }




    /* 3.2.1 индивидуальное позиционирование красного / тел */
    .selection-frame.red-frame {
        align-self: flex-start; 
        margin-left: -45vw; 
    }

    /* 3.2.2 текст в красном / тел */
    .number-item { font-size: 12vw; }
    .selection-label.top,
    .selection-label.bottom { display: none; }

    /* 3.3.1 индивидуальное позиционирование синего / тел */
    .selection-frame.blue-frame {
        position: absolute; 
        right: 0vw;
        bottom: 0vw;
        margin-left: 0;
    }


    /* 3.3.2 мастер-слой с картинками рельефа / тел */
    .relief-master-layer {
        left: 50%; 
        margin-top: 25vw; 
        width: 40vw;
    }

    .relief-item.mountain { height: 18vw; }
    .relief-item.sea { height: 14vw; }
    .relief-item.fire { height: 29vw; } 
}








/* IV. контейнер 4-й секции */
.step-4-container {
    position: relative;
    width: 100vw;
    height: auto;
    overflow: hidden; 
    background-color: #f4f4f4;
    display: flex;

    flex-direction: column;
}

/* 1. оранжевая бегущая строка */
.marquee-orange {
    flex-grow: 1; 
    background-color: #FF7C40;
    border-radius: 10vw 0 0 10vw;
    height: 8.05vw;
    overflow: hidden;
    display: flex;
    align-items: center;

    margin-top: 3.6vw;
}
.marquee-orange .marquee-content {
    animation: marquee-scroll 3s linear infinite;
    color: #FFFFFF;
}


/* 2. экшн-таб  */
.action-tab.left-side {
    position: relative;
    height: 8.05vw;
    border: 0.1vw solid #000000;
    border-radius: 10vw;
    display: flex;
    align-items: center;
    padding: 0 2.5vw 0 0;
    min-width: 22vw;
    justify-content: flex-end; 

    margin-top: 3.6vw;
}

/* 2.1. круг в табе */
.action-tab.left-side .action-circle {
    width: 8.05vw;
    height: 8.05vw;
    left: 0vw;
    right: auto;
    background-color: #FF7C40;
    animation: color-cycle-orange 3s infinite step-end;
}

/* 2.2. анимация цвета круга */
@keyframes color-cycle-orange {
    0%, 100% { background-color: #FF7C40; } 
    25% { background-color: #FF4444; }
    50% { background-color: #236CFF; }
    75% { background-color: #FF7C40; }
}

/* 2.3. текст в табе */
.action-tab.left-side .action-text {
    font-family: 'Bounded', sans-serif;
    font-weight: 500; 
    font-size: 1.8vw;
    color: #000000;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: left;
}


/* 3. контейнер красного и синего фреймов  */
.step-4-main-content {
    display: flex;
    flex-direction: row;
    margin-top: 3.6vw;
    width: 100%;
    position: relative;
}

/* 3.1 общие стили для фреймов */
.watering-frame, .flora-frame {
    height: 32vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* 3.2 синий фрейм с лейкой */
.blue-hill {
    width: 45vw;
    background-color: #236CFF;
    border-radius: 0 16vw 16vw 0; 
    
    mix-blend-mode: multiply;
}
/* 3.2.1 лейка */
.watering-icon {
    height: 15.5vw;
    width: auto;
    margin-left: -9.5vw;
    margin-top: 4vw;

    transform-origin: 20% 50%;
    animation: water-pour 4s ease-in-out infinite;
}
/* 3.2.2 анимация лейки */
@keyframes water-pour {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    35% { transform: translate(3vw, -4vw) rotate(30deg); }
    70% { transform: translate(0, 0) rotate(0deg); }
}


/* 3.3 красный фрейм с растениями */
.red-hill {
    width: 71vw;
    background-color: #FF4444;
    border-radius: 16vw 0 0 16vw;
    
    margin-left: -10vw; 
    
    align-items: flex-end; 
    mix-blend-mode: multiply;
}

.flora-icon {
    height: 25vw;
    width: auto;
    margin-left: 10vw;
    margin-bottom: -0.5vw;
}



/* планшетная адаптивность 4-й секции */
@media (max-width: 1023px) {

    /* 1. высота строки и таба / таб */
    .marquee-orange, .action-tab.left-side { height: 12vw; }

    /* 2. левый экшн-таб / таб */
    .action-tab.left-side { min-width: 32vw; }
    .action-tab.left-side .action-text { font-size: 2.8vw; }

    .action-tab.left-side .action-circle {
        width: 12vw;
        height: 12vw;
    }
}



/* мобильная адаптивность 4-й секции */
@media (max-width: 767px) {

    /* 1. бегущая строка / тел */
    .marquee-orange {
        height: 16.1vw; 
        border-radius: 0;
    }
    .marquee-orange .marquee-content { 
        font-size: calc(6.8vw * 1.8); 
        padding-top: 0.5vw; 
    }

    /* 2. убрать левый фрейм / тел */
    .action-tab.left-side {
        display: none;
    }



    /* 3. контейнеры синего + красного / тел */
    .step-4-main-content {
        flex-direction: column;
        align-items: center;
        margin-top: 5vw;
    }

    /* 3.1 общие настройки фреймов / тел */
    .watering-frame, .flora-frame {
        width: 100%;
        height: 50vw;
        border-radius: 50vw !important;
        margin-left: 0 !important;
    }
    .red-hill { margin-top: -7vw; }

    /* 3.1.1 лейка / тел */
    .watering-icon {
        height: 27vw; 
        margin-left: 0;
        margin-top: 0;
    }

    /* 3.1.2 растения / тел */
    .flora-icon {
        height: 35vw;
        margin-left: 0;
    }

    /* 5. коррекция анимации / тел */
    @keyframes water-pour {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        35% { transform: translate(5vw, -6vw) rotate(30deg); }
        70% { transform: translate(0, 0) rotate(0deg); }
    }
}





/* V. контейнер 5-й секции */
.step-5-container {
    position: relative;
    width: 100vw;
    height: auto;
    overflow: hidden; 
    background-color: #f4f4f4; 
    display: flex;
    flex-direction: column;
}

/* 1. синяя бегущая строка */
.marquee-blue-full {
    height: 8.05vw;
    margin-top: 3.6vw;
    background-color: #236CFF;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* 1.1 текст */
.marquee-blue-full .marquee-content {
    font-family: 'Bounded', sans-serif;
    font-weight: 600; 
    font-size: 6.8vw;
    color: #FFFFFF;
    display: inline-block;
    margin-top: 1vw;
    
    animation: marquee-scroll-reverse 2.5s linear infinite;
}


/* 2. контейнер трех планет */
.planets-main-content {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 3.6vw 0;
    width: 100%;
}

/* 2.1 общие стили фона планет */
.planet-item {
    position: relative;
    width: 32vw;
    height: 32vw;
    border-radius: 50%;
    overflow: hidden;
}

/* 2.2 общие настройки внутренних элементов */
.inner-shape {
    position: absolute;
    background-color: #236CFF;
    mix-blend-mode: plus-lighter;
}

/* 2.3.1 оранж планета */
.orange-planet { background-color: #FF7C40; }
.circle-small {
    width: 16vw;
    height: 16vw;
    border-radius: 50%;
    bottom: 25%;
    left: 25%;

    animation: orbit-move 2s linear infinite;
}
.circle-stroke {
    width: 24vw;
    height: 24vw;
    border: 6.5vw solid #236CFF;
    background-color: transparent;
    border-radius: 50%;
    bottom: 12.5%;
    left: 12.5%;

    animation: orbit-move-reverse 2.8s linear infinite reverse;
}

/* 2.3.2 красная планета */
.red-planet { background-color: #FF4444; }
.spot-1 { width: 17vw; height: 17vw; border-radius: 50%; top: 13%; right: 0%;
          animation: pulse-size 1.5s ease-in-out infinite; }

.spot-2 { width: 7vw; height: 7vw; border-radius: 50%; top: 13%; left: 38%;
          animation: pulse-size 1.5s ease-in-out infinite 0.2s; }

.spot-3 { width: 4.5vw; height: 4.5vw; border-radius: 50%; bottom: 45%; left: 10%;
          animation: pulse-size 1.5s ease-in-out infinite 0.3s; }

.spot-4 { width: 7vw; height: 7vw; border-radius: 50%; bottom: 10%; left: 25%;
          animation: pulse-size 1.5s ease-in-out infinite 0.5s; }

          
/* 2.3.3 синяя планета */
.blue-planet { background-color: #236CFF; }
.triangle-1 {
    width: 42vw;
    height: 10vw;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);

    bottom: 30%;
    right: -30%;
    transform: rotate(40deg);

    animation: triangle-breath 1.5s infinite;
}
.triangle-2 {
    width: 40vw;
    height: 10vw;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);

    top: 15%;
    right: -15%;
    transform: rotate(-34deg);

    animation: triangle-breath 1.2s infinite;
}

.triangle-3 {
    width: 40vw;
    height: 10vw;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);

    bottom: 10%;
    right: -20%;
    transform: rotate(8deg);

    animation: triangle-breath 1.7s infinite;
}

/* 2.4.1 анимация оранж */
@keyframes orbit-move {
    0% { transform: rotate(0deg) translateX(8.2vw) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(8.2vw) rotate(-360deg); }
}
@keyframes orbit-move-reverse {
    0% { transform: rotate(0deg) translateX(4.3vw) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(4.3vw) rotate(-360deg); }
}

/* 2.4.2 анимация красной */
@keyframes pulse-size {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* 2.4.3 анимация синей */
@keyframes triangle-breath {
    0%, 100% { clip-path: polygon(300% 15%, 0 50%, 300% 85%); }
    50% { clip-path: polygon(85% 0%, 0 50%, 100% 100%); }
}


/* 3. красная статус-плашка */
.status-tab {
    width: 100%;
    height: 8.05vw;
    border: 0.1vw solid #000000;
    border-radius: 10vw;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4vw 0 0;
    overflow: hidden;
    box-sizing: border-box;
}


/* 3.1 группа круга + текста слева */
.status-left-group {
    display: flex;
    align-items: center;
    gap: 2vw;
}

/* 3.1.1 круг */
.status-circle {
    width: 8.05vw;
    height: 8.05vw;
    background-color: #FF4444;
    border-radius: 50%;
    mix-blend-mode: multiply;

    animation: color-cycle-red 3s infinite step-end;
}
/* 3.1.2 анимация цвета круг */
@keyframes color-cycle-red {
    0%, 100% { background-color: #FF4444; } 
    25% { background-color: #236CFF; }
    50% { background-color: #FF7C40; }
    75% { background-color: #FF4444; }
}

/* 3.1.3 текст слева */
.status-label {
    font-family: 'Bounded', sans-serif;
    font-weight: 500;
    font-size: 2vw;
    line-height: 1.1;
    text-transform: uppercase;
    color: #000000;

    margin-top: 0.5vw;
}


/* 3.2 главный текст справа */
.status-main-text {
    font-family: 'Bounded', sans-serif;
    font-weight: 600;
    font-size: 6.8vw;
    color: #000000;
    margin-top: 1vw; 
}




/* планшетная адаптивность 5-й секции */
@media (max-width: 1023px) {
    
    /* 1. бегущая строка / таб */
    .step-header-container { height: 12vw; }
    .marquee-blue-full .marquee-content { font-size: 10vw; }


    /* 2. контейнер красной статус-плашки / таб */
    .status-tab { height: 12vw; border-radius: 12vw; }

    /* 2.1 круг и левая группа */
    .status-circle { width: 12vw; height: 12vw; }
    .status-left-group { gap: 3vw; }

    /* 2.2 текст */
    .status-label { font-size: 2.8vw; margin-top: 0.8vw; }
    .status-main-text { font-size: 10vw; margin-top: 1.5vw; }
}



/* мобильная адаптивность 5-й секции */
@media (max-width: 767px) {

    /* 1. бегущая строка / тел */
    .step-header-container {
        height: 16.1vw !important;
        margin-top: 5vw;
    }
    .marquee-blue-full .marquee-content { font-size: calc(6.8vw * 1.8); }

    /* 2. контейнер-слайдер для планет / тел */
    .planets-main-content {
        display: flex;
        flex-direction: row; 
        justify-content: flex-start;
        padding: 5vw 0;
        width: 100%;
        overflow: hidden;
    }

    /* 2.1 общие стили для планет / тел */
    .planet-item {
        position: relative;
        width: 90vw !important; 
        height: 90vw !important;
        margin: 0 5vw !important; 
        
        flex-shrink: 0;
        border-radius: 50%;
        overflow: hidden;

        overflow: hidden; 
        -webkit-mask-image: -webkit-radial-gradient(white, black); /*для safari/ios */
        isolation: isolate;
        
        display: block;
        animation: planets-paging 6.5s cubic-bezier(0.85, 0, 0.15, 1) infinite;
    }

    /* 2.2.1 элементы оранж планеты / тел */
    .circle-small { width: 45vw; height: 45vw; bottom: 25%; left: 25%; }
    .circle-stroke { width: 75vw; height: 75vw; border-width: 20vw; top: 8.5%; left: 8.5%; }

    /* 2.2.2 элементы красной планеты / тел */
    .spot-1 { width: 50vw; height: 50vw; top: 10%; right: 0; }
    .spot-2 { width: 20vw; height: 20vw; top: 10%; left: 35%; }
    .spot-3 { width: 12vw; height: 12vw; bottom: 45%; left: 5%; }
    .spot-4 { width: 20vw; height: 20vw; bottom: 10%; left: 20%; }

    /* 2.2.3 элементы синей планеты / тел */
    .triangle-1 { width: 110vw; height: 30vw; right: -20%; }
    .triangle-2 { width: 110vw; height: 30vw; bottom: 15%; right: -14%; }
    .triangle-3 { width: 110vw; height: 30vw; bottom: 9%; right: -25%; }

    /* 3. анимация перелистывания / тел */
    @keyframes planets-paging {
        0%, 20% { transform: translateX(0%); }      
        33%, 46% { transform: translateX(-111%); }  
        66%, 90% { transform: translateX(-222%); }  
        100% { transform: translateX(0%); }         
    }

    /* 2.4.1 анимация оранж / тел */
    @keyframes orbit-move {
        0% { transform: rotate(0deg) translateX(23vw) rotate(0deg); }
        100% { transform: rotate(360deg) translateX(23vw) rotate(-360deg); }
    }
    @keyframes orbit-move-reverse {
        0% { transform: rotate(0deg) translateX(8vw) rotate(0deg); }
        100% { transform: rotate(360deg) translateX(8vw) rotate(-360deg); }
    }


    /* 3. адаптация красной статус-плашки / тел */
    .status-tab {
        height: 16.1vw;
        border-radius: 20vw;
        padding: 0 7vw 0 0; 
        margin: 5vw 0;
    }

    /* 3.1 круг справа / тел */
    .status-circle { width: 16.1vw; height: 16.1vw; }

    /* 3.2 текст / тел */
    .status-label { display: none; }
    .status-main-text { font-size: 12.2vw; margin-top: 2vw; }
    .status-text-change { display: none; }
    .status-main-text::after { content: "ГОТОВО!"; display: block; }
    
}




/* VI. 6-я секция = подвал */
.step-6-footer {
    width: 100vw;
    padding: 4vw 0;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    gap: 3vw;
}

/* 1. линии */
.footer-row {
    position: relative;
    width: 100%;
    height: 3.6vw;
    display: flex;
    align-items: center;

    overflow: hidden;
}
.footer-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    
    border-top: 0.1vw solid #000000;
    z-index: 1;
}

/* 2. контейнер плашек */
.footer-items-container {
    display: flex;
    align-items: center;
    gap: 10vw;
    padding-right: 10vw;
    width: 100vw;
    justify-content: space-around;
}

/* 2.1 общие стили плашек */
.footer-tag {
    background-color: #236CFF;
    color: #FFFFFF;
    border-radius: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5vw;
    padding: 0 1.5vw;
    
    font-family: 'Bounded', sans-serif;
    font-weight: 300;
    font-size: 1.3vw;

    flex-shrink: 0;
    text-transform: uppercase;
}
.marquee-wrapper {
    display: flex;
    width: max-content;
    z-index: 2;
}

/* размеры плашек */
.short-tag { width: 4.5vw; padding: 0; }

/* анимация строк */
.marquee-left .marquee-wrapper { animation: scroll-left 6s linear infinite; }
.marquee-right .marquee-wrapper { animation: scroll-right 6s linear infinite; }

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}




/* планшетная адаптивность 6-й секции */
@media (max-width: 1023px) {

    /* 1. линии / таб */
    .footer-row { height: 8vw; }


    /* 1. плашки / таб */
    .footer-items-container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: max-content;
        gap: 18vw;
        padding-right: 18vw;
    }
    .footer-tag { height: 5.8vw; font-size: 2.5vw; padding: 0 3vw; }
    .short-tag { width: 7.5vw; }

    /* 4. анимация строк / таб */
    .marquee-left .marquee-wrapper { animation: scroll-left 5s linear infinite; }
    .marquee-right .marquee-wrapper { animation: scroll-right 5s linear infinite; }
}



/* мобильная адаптивность 6-й секции */
@media (max-width: 767px) {
    
    /* 1. линии / таб */
    .footer-row { height: 12vw; }


    /* 1. плашки / таб */
    .footer-items-container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: max-content;
        gap: 18vw;
        padding-right: 18vw;
    }
    .footer-tag { height: 7.8vw; font-size: calc(1.3vw * 3); padding: 0 4vw; }
    .short-tag { width: 10vw; }

    /* 4. анимация строк / таб */
    .marquee-left .marquee-wrapper { animation: scroll-left 5s linear infinite; }
    .marquee-right .marquee-wrapper { animation: scroll-right 5s linear infinite; }
}