.stripe {
    width: 100%;
}

    .stripe.gradient {
        background: linear-gradient(82deg, rgba(89,74,226,1) 0%, rgba(116,103,239,1) 100%);
    }

.gradient-text {
    background: linear-gradient(to right, rgba(119, 107, 231, 1), rgba(89, 74, 226, 1), rgba(151, 141, 236, 1), rgba(89, 74, 226, 1), rgba(119, 107, 231, 1)); /* Волнообразный повторяющийся градиент */
    background-size: 300% 100%; /* Увеличенный размер для плавности */
    -webkit-background-clip: text; /* Обрезаем фон по тексту */
    -webkit-text-fill-color: transparent; /* Делаем текст прозрачным */
    background-clip: text; /* Поддержка для Firefox */
    text-fill-color: transparent; /* Запасной вариант */
    animation: gradient-move 5s ease-in-out infinite alternate; /* Увеличенная длительность анимации */
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    15% {
        background-position: 15% 50%;
    }

    25% {
        background-position: 25% 50%;
    }

    40% {
        background-position: 40% 50%;
    }

    60% {
        background-position: 60% 50%;
    }

    75% {
        background-position: 75% 50%;
    }

    90% {
        background-position: 90% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}


.warm-gradient-text {
    background: linear-gradient(82deg, rgb(89, 74, 226), rgb(255, 102, 153), rgb(89, 74, 226)); /* Повторение для плавности */
    background-size: 300% 100%; /* Увеличенный размер для более плавного движения */
    -webkit-background-clip: text; /* Обрезаем фон по тексту */
    -webkit-text-fill-color: transparent; /* Делаем текст прозрачным */
    background-clip: text; /* Поддержка для Firefox */
    text-fill-color: transparent; /* Запасной вариант */
    animation: warm-gradient-move 5s ease-in-out infinite alternate; /* Анимация движения */
}

@keyframes warm-gradient-move {
    0% {
        background-position: 0% 50%;
    }

    10% {
        background-position: 10% 50%;
    }

    20% {
        background-position: 20% 50%;
    }

    30% {
        background-position: 30% 50%;
    }

    40% {
        background-position: 40% 50%;
    }

    50% {
        background-position: 50% 50%;
    }

    60% {
        background-position: 60% 50%;
    }

    70% {
        background-position: 70% 50%;
    }

    80% {
        background-position: 80% 50%;
    }

    90% {
        background-position: 90% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.diagonal-divider-container {
    position: relative;
    width: 100%;
    height: 150px; /* Высота разделителя */
}

.diagonal-divider {
    width: 100%;
    height: 100%;
    border-radius: 7px;
    background: linear-gradient(90deg, rgba(89, 74, 226, 1), rgba(116, 103, 239, 1)); /* Градиент */
    clip-path: polygon(0% 60%, 100% 0%, 100% 100%, 0% 100%); /* Наклон */
}

/* Контейнер для иконки */
.icon-wrapper {
    position: absolute;
    top: 40%; /* Сместите чуть выше */
    right: 10%; /* Регулируйте отступ */
    transform: translate(0, -50%); /* Центровка по вертикали */
    z-index: 1; /* Поверх разделителя */
}

.contrast-shadow {
    position: relative;
}

    .contrast-shadow::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background: linear-gradient(82deg, rgb(89, 74, 226), rgb(255, 102, 153), rgb(89, 74, 226));
        filter: blur(10px);
        border-radius: inherit; /* Чтобы тень повторяла форму основного элемента */
        opacity: 0.7; /* Настройка прозрачности тени */
        animation: warm-gradient-move 5s ease-in-out infinite alternate; /* Пример анимации */
    }

/* Стили для иконки */
.divider-icon {
    width: 150px; /* Размер иконки */
    height: 150px;
    fill: #5a4be2; /* Цвет заливки */
    stroke: #5a4be2; /* Цвет линий */
    filter: drop-shadow(0px 4px 4px rgba(255, 255, 255, 0.25));
    animation: float 3s infinite ease-in-out;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Контейнер секции, фон и т.д. */
.landing-section {
    background-color: transparent;
}

.text-hero {
    font-weight: 700;
}

.text-subtitle {
    color: #ccc;
}

/* 
   Колонка для устройств:
   1) Убираем display:flex
   2) Даём фиксированные размеры (например, 600×600),
      чтобы телефон и планшет оставались на своих местах.
*/
.devices-col {
    position: relative;
    width: 500px;
    height: 500px;
    margin-right: 0;
    justify-content: end;
    align-content: end;
    /* Можно убрать justify-content / align-items */
}

/* Контейнер под устройства (можно обойтись и без него,
   но если оставляете – пусть он занимает 100% 
   и тоже position:relative. */
.devices-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* =======================
   ПЛАНШЕТ
   ======================= */
.tablet-frame {
    position: absolute;
    width: 280px;
    height: 500px;
    /* Координаты — “где” в рамках .devices-col
       например, прижимаем к правому краю, чуть сверху */
    top: 0px;
    right: 10px;
    border-radius: 20px;
    overflow: hidden;
    background-color: transparent;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    z-index: 1;
}

    /* Градиентная рамка */
    .tablet-frame::before {
        content: "";
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border-radius: inherit;
        background: linear-gradient(135deg, #b8ffc7, #bfc2ff, #ffccf2, #ffdce7);
        background-size: 300% 300%;
        animation: pastelGradient 10s ease infinite;
        z-index: -1;
    }

/* Экран планшета */
.tablet-screen {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Внутренний планшет-контейнер */
.tablet-inner {
    width: 480px;
    height: 800px;
    position: relative;
    transform: scale(0.6);
    transform-origin: center center;
}

/* =======================
   ТЕЛЕФОН
   ======================= */
.phone-frame {
    position: absolute;
    width: 200px;
    height: 400px;
    /* Расположим левее / ниже, чтобы перекрывать планшет */
    top: 80px;
    right: 160px;
    border-radius: 30px;
    overflow: hidden;
    background-color: #333;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    z-index: 2; /* Выше планшета */
}

    .phone-frame::before {
        content: "";
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border-radius: inherit;
        background: transparent;
        z-index: -1;
    }

/* Экран телефона */
.phone-screen {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Внутренний телефон-контейнер */
.phone-inner {
    width: 320px;
    height: 670px;
    position: relative;
    transform: scale(0.55);
    transform-origin: center center;
}

@keyframes pastelGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Прятать устройства на узких экранах */
@media (max-width: 960px) {
    .devices-col {
        display: none;
    }
}