/* Основной контейнер - как на главной */
.section__head {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Контейнер для фона - заменяем на маску с видео-эффектом */
.section__head-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Затемнение как на главной (диагональный градиент) */
.section__head-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;

    /* Диагональный градиент: верхний левый → нижний правый */
    background: linear-gradient(
            to right,
            rgb(1, 25, 94) 0%,
            rgb(7, 38, 115) 40%,
            rgba(10, 41, 114, 0.2) 70%,
            rgba(4, 22, 71, 0.20) 95%,
            rgba(4, 22, 71, 0) 100%
    );
}

/* Убираем старый ::before если он был */
.section__head-bg::before {
    display: none;
}

/* Canvas как на главной */
#three_js_banner_other_page {
    display: block;
    width: 100%;
    height: 100%;
}

/* Контент поверх фона - как на главной */
.section__head-title,
.section__head-buttons {
    position: relative;
    z-index: 1;
}

/* Если есть карточка как на главной, применяем те же стили */
.section__head-card {
    height: auto;
    position: absolute;
    right: 100px;
    top: 128px;
    width: auto;
    perspective: 1000px;
    transform-style: preserve-3d;
    z-index: 1;

    /* Светящиеся края + тень */
    filter:
            drop-shadow(0 0 8px rgb(0, 103, 148))
            drop-shadow(0 0 20px rgba(2, 109, 197, 0.9))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))
            drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4))
            drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5))
            drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6))
            drop-shadow(0 40px 80px rgba(0, 0, 0, 0.4));

    transition: filter 0.3s ease, opacity 0.5s ease;
}

/* Адаптив как на главной */
@media (max-width: 1200px) {
    .section__head-card {
        display: block;
        height: auto;
        margin: 0 0 31px;
        opacity: 1;
        position: relative;
        right: auto;
        text-align: center;
        top: auto;
        width: auto;
        filter: none;
    }
}

/* Анимация для карточки если нужна */
.section__head-card.animate {
    opacity: 1;
}