.hero-section--video {
    position: relative;
    min-height: calc(100vh - var(--mtec-nav-offset, 6rem));
}

.hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-video-bg__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
    transform: scale(1.02);
}

.hero-video-bg__media.is-ready {
    opacity: 1;
}

.hero-video-bg__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgb(11 28 45 / 0.72) 0%, rgb(18 35 58 / 0.82) 45%, rgb(26 45 71 / 0.88) 100%),
        radial-gradient(ellipse 90% 70% at 50% 20%, rgb(0 119 200 / 0.12), transparent 65%);
}

.hero-video-sound {
    pointer-events: auto;
    position: absolute;
    z-index: 30;
    inset-inline-end: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid rgb(255 255 255 / 0.28);
    background: rgb(11 28 45 / 0.82);
    color: #fff;
    box-shadow:
        0 4px 18px rgb(0 0 0 / 0.35),
        inset 0 1px 0 rgb(255 255 255 / 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-video-sound i {
    color: #fff;
}

.hero-video-sound:hover {
    background: rgb(11 28 45 / 0.72);
    border-color: rgb(255 255 255 / 0.28);
    transform: scale(1.04);
}

.hero-video-sound:focus-visible {
    outline: 2px solid #ff7a00;
    outline-offset: 2px;
}

.hero-section--video .hero-section__inner--video {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 1fr);
}

.hero-section--video .hero-section__desc,
.hero-section--video .hero-section__visual {
    display: none !important;
}

.hero-section--video .hero-eyebrow {
    background: linear-gradient(135deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.04));
    border-color: rgb(255 255 255 / 0.18);
    color: rgb(255 255 255 / 0.92);
}

.hero-section--video h1,
.hero-section--video .hero-float-card p.text-sm.font-bold {
    color: #fff !important;
}

.hero-section--video h1 .text-\[\#0077C8\] {
    color: #5eb8ff !important;
}

.hero-section--video p.text-\[\#5E6282\],
.hero-section--video .hero-float-card p.text-xs {
    color: rgb(255 255 255 / 0.72) !important;
}

.hero-section--video .hero-stat-pill {
    background: rgb(255 255 255 / 0.08);
    border-color: rgb(255 255 255 / 0.14);
    color: rgb(255 255 255 / 0.88);
}

.hero-section--video .hero-stat-pill strong {
    color: #fff;
}

.hero-section--video .hero-code-demo {
    filter: drop-shadow(0 24px 48px rgb(0 0 0 / 0.35));
}

.hero-section--video .hero-btn-secondary {
    border-color: rgb(255 255 255 / 0.22);
    color: rgb(255 255 255 / 0.92);
    background: rgb(255 255 255 / 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .hero-video-bg__media {
        display: none;
    }

    .hero-video-sound {
        display: none;
    }
}