.flow {
    margin: 0 10.6vw 5.2vw;
    padding: 0;

}

.flow__inner {
    width: 100%;
}

.flow__inner .why-us__subtitle{
    display: flex;
    gap: 1.3vw;
    margin: 1.04vw 0 2.6vw 0;
    align-items: center;
}

/* Заголовок + кнопка */
.flow__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.6vw;
}


.flow__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.78vw 2.6vw;
    border-radius: 999px;
    background: #3AAA35;
    color: #fff;
    font-family: 'Ysabeau', sans-serif;
    font-size: 0.9vw;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
}

/* Основний блок: зображення + кроки */
.flow__body {
    display: flex;
    gap: 2.6vw;
    align-items: flex-start;
    height: 45vw;
}

.flow__image-wrap {
    position: relative;
    min-width: 31vw;
    max-width: 31vw;
    height: 36.8vw;
    overflow: hidden;
}

/* Картинка */
.flow__image {
    position: relative;
    z-index: 1;

    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    opacity: 1;
    transition: opacity 0.4s ease;
}

/* Градієнт знизу (як був, тільки через ::after) */
.flow__image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(29, 29, 29, 0.5) 0%,
        rgba(29, 29, 29, 0) 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Білий flash через ::before */
.flow__image-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
}

/* Коли додаємо клас – запускається анімація flash */
.flow__image-wrap.flow__image-wrap--flash::before {
    animation: flowImageFlash 0.4s ease;
}

/* Номер поверх всього */
.flow__image-step {
    position: absolute;
    right: 2.08vw;
    bottom: 1.3vw;
    font-family: 'Inter', sans-serif;
    font-size: 4vw;
    font-weight: 100;
    color: rgba(255,255,255,0.8);
    z-index: 4;

}

/* Кадри анімації білого флеша */
@keyframes flowImageFlash {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Права частина (список кроків) */
.flow__steps {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

/* Окремий крок */
.flow-step {
    padding: 1.3vw 1.56vw;
    border-bottom: 1px solid rgba(139,139,139,0.2);
}



.flow-step__top {
    display: flex;
    gap: 2.6vw;
    align-items: center;

}

.flow-step__num {
    font-family: 'Inter', sans-serif;
    font-size: 1.04vw;
    font-weight: 600;
    width: 2.13vw;
}


.flow-step__title {
    font-family: 'Ysabeau', sans-serif;
    font-size: 1.82vw;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #8b8b8b;
}


/* Активний крок */
.flow-step--active .flow-step__num {
    color: #000;
}

.flow-step--active .flow-step__title {
    color: #3AAA35;
}

/* Текст: базовий стан – сховано */
.flow-step__text {
    font-family: 'Ysabeau', sans-serif;
    font-size: 0.94vw;
    color: #343434;
    line-height: 1.4;

    height: 0;             /* старт – сховано */
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding-top: 0;

    transition:
        height 0.6s ease,
        opacity 0.6s ease,
        padding-top 0s ease;
}

/* Активний – тільки візуалка, без height тут! */
.flow-step.flow-step--active .flow-step__text {
    opacity: 1;
    padding-top: 1.3vw;
}


@media (max-width: 480px) {
    .flow {
        margin-right: 4.26vw;
        margin-left: 4.26vw;
        margin-bottom: 21.3vw;

    }

    .flow__inner .why-us__title{
        margin: 0;
    }

    .flow__inner .why-us__subtitle{
        display: block;
        margin: 2.6vw 0 4vw 0;
        align-items: center;
    }

    .why-us__subtitle .btn{
        margin-top: 4vw;
        gap: 3.2vw;
        margin-bottom: 16vw;
    }

    .flow__body {
        display: block;
        height: auto;
    }

    .flow__image-wrap {
        min-width: 100%;
        height: 61.3vw;
    }

    .flow-step {
        padding: 6.6vw 0;
    }

    .flow-step__top {
        gap: 1.3vw;
    }

    .flow-step__title {
        font-size: 6.9vw;
    }

    .flow-step__num {
        font-size: 5.3vw;
        width: 10.93vw;
    }

    .flow-step__text {
        font-size: 5.3vw;

    }

    .flow__image-step {
        right: 5.3vw;
        bottom: 5.3vw;
        font-family: 'Inter', sans-serif;
        font-size: 21.3vw;
        font-weight: 100;
    }

}