:root {
    --black: #02050a;
    --graphite: #070b12;
    --white: #f3f7ff;
    --muted: #bdc7d5;
    --blue: #159bff;
    --cyan: #27d9ff;
    --border: rgba(111, 190, 255, 0.72);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    background: var(--black);
}

body {
    color: var(--white);
    font-family:
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    overflow: hidden;
}

.hero {
    position: relative;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    background:
        var(--black);
}


/* =======================================================
   CINEMATIC BACKGROUND
   ======================================================= */

.hero-background {
    position: absolute;

    inset: -3%;

    background-image:
        url("/assets/hero-bg.png");

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        72% center;

    filter:
        brightness(0.54)
        saturate(0.94)
        contrast(1.08);

    transform:
        scale(1.025);

    animation:
        hero-drift
        24s
        ease-in-out
        infinite
        alternate;
}


/* Strong left-side darkness hides baked mockup copy
   and gives the real foreground text clean contrast. */

.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 5, 10, 0.995) 0%,
            rgba(2, 5, 10, 0.985) 22%,
            rgba(2, 5, 10, 0.94) 36%,
            rgba(2, 5, 10, 0.78) 50%,
            rgba(2, 5, 10, 0.40) 65%,
            rgba(2, 5, 10, 0.18) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.14) 55%,
            rgba(0, 0, 0, 0.48) 100%
        );
}


/* =======================================================
   HEADER
   ======================================================= */

.site-header {
    position: absolute;

    top: 44px;
    left: clamp(
        30px,
        7vw,
        120px
    );

    z-index: 10;
}

.brand-logo {
    display: block;

    width:
        clamp(
            175px,
            17vw,
            290px
        );

    height: auto;

    object-fit: contain;
}


/* =======================================================
   HERO COPY
   ======================================================= */

.hero-content {
    position: absolute;

    z-index: 10;

    left:
        clamp(
            30px,
            7vw,
            120px
        );

    top: 49%;

    transform:
        translateY(-42%);

    width:
        min(
            760px,
            50vw
        );
}

.eyebrow {
    margin: 0 0 12px;

    color:
        rgba(
            241,
            247,
            255,
            0.9
        );

    font-size:
        clamp(
            1rem,
            1.75vw,
            1.8rem
        );

    font-weight: 300;

    letter-spacing:
        0.38em;

    white-space: nowrap;
}

.hero-title {
    margin: 0;

    font-size:
        clamp(
            4rem,
            7.1vw,
            7.2rem
        );

    line-height: 0.92;

    font-weight: 800;

    letter-spacing:
        0.015em;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #edf5ff 35%,
            #9eb7d4 100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

    text-shadow:
        0 0 28px
        rgba(
            40,
            130,
            255,
            0.18
        );
}

.hero-title span {
    background:
        linear-gradient(
            135deg,
            #27e5ff 0%,
            #168cff 42%,
            #1c42db 100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    margin:
        22px 0 38px;

    color:
        rgba(
            224,
            233,
            244,
            0.86
        );

    font-size:
        clamp(
            1rem,
            1.55vw,
            1.55rem
        );

    font-weight: 300;

    letter-spacing:
        0.19em;
}


/* =======================================================
   LOGIN BUTTON
   ======================================================= */

.login-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        clamp(
            220px,
            19vw,
            300px
        );

    padding:
        20px
        30px;

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

    color:
        var(--white);

    background:
        linear-gradient(
            110deg,
            rgba(
                9,
                38,
                70,
                0.78
            ),
            rgba(
                7,
                13,
                28,
                0.84
            )
        );

    box-shadow:
        0 0 10px
        rgba(
            25,
            172,
            255,
            0.34
        ),
        inset
        0 0 22px
        rgba(
            26,
            122,
            255,
            0.11
        );

    text-decoration: none;

    font-size:
        1.08rem;

    font-weight: 500;

    letter-spacing:
        0.11em;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

.login-arrow {
    margin-left: 32px;

    font-size: 1.35rem;

    font-weight: 300;

    transition:
        transform
        180ms ease;
}

.login-button:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(
            46,
            220,
            255,
            0.95
        );

    box-shadow:
        0 0 22px
        rgba(
            22,
            188,
            255,
            0.52
        ),
        inset
        0 0 28px
        rgba(
            24,
            130,
            255,
            0.16
        );

    background:
        linear-gradient(
            110deg,
            rgba(
                10,
                48,
                88,
                0.9
            ),
            rgba(
                7,
                17,
                36,
                0.92
            )
        );
}

.login-button:hover
.login-arrow {
    transform:
        translateX(5px);
}

.login-button:focus-visible {
    outline:
        2px solid
        var(--cyan);

    outline-offset:
        5px;
}


/* =======================================================
   MOTION
   ======================================================= */

@keyframes hero-drift {
    from {
        transform:
            scale(1.025)
            translate3d(
                0,
                0,
                0
            );
    }

    to {
        transform:
            scale(1.065)
            translate3d(
                -0.5%,
                -0.2%,
                0
            );
    }
}


/* =======================================================
   MOBILE
   ======================================================= */

@media (
    max-width: 760px
) {

    body {
        overflow: auto;
    }

    .hero-background {
        background-position:
            69% center;

        filter:
            brightness(0.39)
            saturate(0.9)
            contrast(1.1);
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(
                    2,
                    5,
                    10,
                    0.98
                ) 0%,
                rgba(
                    2,
                    5,
                    10,
                    0.89
                ) 58%,
                rgba(
                    2,
                    5,
                    10,
                    0.65
                ) 100%
            ),
            linear-gradient(
                180deg,
                rgba(
                    2,
                    5,
                    10,
                    0.18
                ) 0%,
                rgba(
                    2,
                    5,
                    10,
                    0.68
                ) 100%
            );
    }

    .site-header {
        top: 30px;
        left: 25px;
    }

    .brand-logo {
        width: 190px;
    }

    .hero-content {
        left: 25px;
        right: 25px;

        top: 48%;

        width: auto;

        transform:
            translateY(-30%);
    }

    .eyebrow {
        font-size: 0.9rem;

        letter-spacing:
            0.28em;
    }

    .hero-title {
        font-size:
            clamp(
                3.1rem,
                16vw,
                4.8rem
            );
    }

    .hero-subtitle {
        font-size: 1rem;

        line-height: 1.5;

        letter-spacing:
            0.10em;

        max-width: 310px;
    }

    .login-button {
        width: 235px;
    }
}


/* Respect reduced-motion preference. */

@media (
    prefers-reduced-motion:
    reduce
) {

    .hero-background {
        animation: none;
    }

    .login-button,
    .login-arrow {
        transition: none;
    }
}

/* =======================================================
   BINARYCNT BRAND REVEAL
   ======================================================= */

.brand-lockup {
    display: inline-flex;
    align-items: center;

    height: 72px;

    color: inherit;
    text-decoration: none;

    position: relative;
}

.brand-emblem {
    position: relative;
    z-index: 3;

    width: 68px;
    height: 68px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 5px
            rgba(28, 150, 255, 0.45)
        );

    opacity: 0;

    transform:
        scale(0.86);

    animation:
        emblem-enter
        650ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )
        120ms
        forwards,

        emblem-glow
        1150ms
        ease-out
        420ms
        1;
}


.brand-reveal {
    position: relative;

    z-index: 2;

    display: inline-block;

    overflow: hidden;

    margin-left: -7px;

    padding:
        8px
        2px
        8px
        7px;

    vertical-align: middle;
}


.brand-word {
    display: inline-block;

    white-space: nowrap;

    font-family:
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size:
        clamp(
            1.3rem,
            1.7vw,
            1.95rem
        );

    line-height: 1;

    font-weight: 800;

    letter-spacing:
        0.01em;

    opacity: 0;

    transform:
        translateX(-100%);

    animation:
        brand-word-reveal
        760ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )
        720ms
        forwards;
}


.brand-silver {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #edf5ff 38%,
            #9cb5d1 100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}


.brand-blue {
    background:
        linear-gradient(
            135deg,
            #3aeaff 0%,
            #168fff 45%,
            #263be0 100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

    text-shadow:
        0 0 16px
        rgba(
            20,
            151,
            255,
            0.22
        );
}


@keyframes emblem-enter {

    0% {
        opacity: 0;

        transform:
            scale(0.86);
    }

    70% {
        opacity: 1;

        transform:
            scale(1.04);
    }

    100% {
        opacity: 1;

        transform:
            scale(1);
    }
}


@keyframes emblem-glow {

    0% {
        filter:
            drop-shadow(
                0 0 5px
                rgba(
                    28,
                    150,
                    255,
                    0.45
                )
            );
    }

    45% {
        filter:
            drop-shadow(
                0 0 17px
                rgba(
                    34,
                    205,
                    255,
                    0.92
                )
            )
            drop-shadow(
                0 0 32px
                rgba(
                    24,
                    110,
                    255,
                    0.55
                )
            );
    }

    100% {
        filter:
            drop-shadow(
                0 0 5px
                rgba(
                    28,
                    150,
                    255,
                    0.45
                )
            );
    }
}


@keyframes brand-word-reveal {

    0% {
        opacity: 0;

        transform:
            translateX(-100%);
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: 1;

        transform:
            translateX(0);
    }
}


/* Slight hover response after reveal. */

.brand-lockup:hover
.brand-emblem {
    filter:
        drop-shadow(
            0 0 10px
            rgba(
                34,
                190,
                255,
                0.75
            )
        );
}


/* =======================================================
   HERO CONTENT ENTRANCE
   ======================================================= */

.eyebrow {
    opacity: 0;

    animation:
        hero-copy-in
        620ms
        ease-out
        1050ms
        forwards;
}


.hero-title {
    opacity: 0;

    transform:
        translateY(12px);

    animation:
        hero-title-in
        720ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )
        1180ms
        forwards;
}


.hero-subtitle {
    opacity: 0;

    animation:
        hero-copy-in
        650ms
        ease-out
        1430ms
        forwards;
}


.login-button {
    opacity: 0;

    transform:
        translateY(8px);

    animation:
        login-in
        650ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )
        1600ms
        forwards;
}


@keyframes hero-copy-in {

    from {
        opacity: 0;

        transform:
            translateY(7px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes hero-title-in {

    from {
        opacity: 0;

        transform:
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes login-in {

    from {
        opacity: 0;

        transform:
            translateY(8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =======================================================
   MOBILE BRAND SCALE
   ======================================================= */

@media (
    max-width: 760px
) {

    .brand-lockup {
        height: 60px;
    }

    .brand-emblem {
        width: 58px;
        height: 58px;
    }

    .brand-word {
        font-size: 1.25rem;
    }
}


/* =======================================================
   REDUCED MOTION
   ======================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .brand-emblem,
    .brand-word,
    .eyebrow,
    .hero-title,
    .hero-subtitle,
    .login-button {
        animation: none;

        opacity: 1;

        transform: none;
    }
}


/* =======================================================
   SIMPLE BRAND FADE
   ======================================================= */

.brand-logo {
    opacity: 0;

    transform:
        translateY(4px);

    animation:
        brand-logo-fade
        750ms
        ease-out
        180ms
        forwards;
}


@keyframes brand-logo-fade {

    from {
        opacity: 0;

        transform:
            translateY(4px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@media (
    prefers-reduced-motion:
    reduce
) {

    .brand-logo {
        animation: none;

        opacity: 1;

        transform: none;
    }
}


/* =======================================================
   MOBILE REFINEMENT
   ======================================================= */

@media (max-width: 760px) {

    html,
    body {
        overflow-x: hidden;
    }

    .hero-title {
        font-size: clamp(3rem, 13.5vw, 4.15rem);
        line-height: 0.96;
        letter-spacing: -0.035em;
        white-space: nowrap;
        max-width: 100%;
    }

    .eyebrow {
        font-size: 0.9rem;
        letter-spacing: 0.22em;
    }

    .hero-subtitle {
        font-size: clamp(0.95rem, 4.2vw, 1.08rem);
        line-height: 1.45;
        max-width: 90vw;
    }

    .login-button {
        width: min(100%, 340px);
        min-height: 58px;
    }

    .brand-logo {
        max-width: 220px;
        height: auto;
    }
}


/* =======================================================
   BINARYCNT CINEMATIC HERO MOTION
   ======================================================= */

/*
 * Layer order:
 *
 * 0  hero artwork
 * 1  atmospheric illumination
 * 2  darkness / contrast overlay
 * 3  extremely subtle data-light sweep
 * 10 real UI / foreground content
 */

.hero-background {
    z-index: 0;

    animation:
        binarycnt-camera-drift
        32s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite
        alternate;

    will-change:
        transform,
        filter;
}


.hero::before {
    content: "";

    position: absolute;

    inset: -8%;

    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 76% 46%,
            rgba(26, 156, 255, 0.16) 0%,
            rgba(15, 103, 220, 0.075) 18%,
            rgba(5, 45, 105, 0.025) 38%,
            transparent 62%
        ),
        radial-gradient(
            ellipse at 88% 28%,
            rgba(45, 205, 255, 0.07) 0%,
            transparent 42%
        );

    mix-blend-mode:
        screen;

    opacity: 0.58;

    transform:
        scale(1.01);

    animation:
        binarycnt-blue-breath
        8.5s
        ease-in-out
        infinite
        alternate;

    will-change:
        opacity,
        transform;
}


.hero-overlay {
    z-index: 2;
}


.hero::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            transparent 46%,
            rgba(70, 190, 255, 0.018) 48.5%,
            rgba(90, 215, 255, 0.052) 50%,
            rgba(70, 190, 255, 0.018) 51.5%,
            transparent 54%,
            transparent 100%
        ),
        repeating-linear-gradient(
            180deg,
            transparent 0px,
            transparent 7px,
            rgba(80, 175, 255, 0.009) 8px,
            transparent 9px
        );

    background-size:
        240% 100%,
        100% 100%;

    background-position:
        140% 0,
        0 0;

    opacity: 0.42;

    animation:
        binarycnt-light-sweep
        15s
        ease-in-out
        infinite;

    will-change:
        background-position,
        opacity;
}


/* Keep actual interface safely above cinematic layers. */

.site-header,
.hero-content {
    z-index: 10;
}


/* =======================================================
   CINEMATIC MOTION KEYFRAMES
   ======================================================= */

@keyframes binarycnt-camera-drift {

    0% {
        transform:
            scale(1.035)
            translate3d(
                0,
                0,
                0
            );

        filter:
            brightness(0.54)
            saturate(0.94)
            contrast(1.08);
    }

    45% {
        transform:
            scale(1.052)
            translate3d(
                -0.22%,
                -0.10%,
                0
            );

        filter:
            brightness(0.555)
            saturate(0.98)
            contrast(1.085);
    }

    100% {
        transform:
            scale(1.072)
            translate3d(
                -0.55%,
                -0.22%,
                0
            );

        filter:
            brightness(0.565)
            saturate(1.01)
            contrast(1.09);
    }
}


@keyframes binarycnt-blue-breath {

    0% {
        opacity: 0.38;

        transform:
            scale(0.985)
            translate3d(
                0,
                0,
                0
            );
    }

    45% {
        opacity: 0.62;
    }

    100% {
        opacity: 0.76;

        transform:
            scale(1.035)
            translate3d(
                0.6%,
                -0.15%,
                0
            );
    }
}


@keyframes binarycnt-light-sweep {

    0%,
    26% {
        background-position:
            145% 0,
            0 0;

        opacity: 0.20;
    }

    46% {
        opacity: 0.42;
    }

    68% {
        background-position:
            -55% 0,
            0 0;

        opacity: 0.34;
    }

    100% {
        background-position:
            -55% 0,
            0 0;

        opacity: 0.18;
    }
}


/* =======================================================
   MOBILE CINEMATIC MOTION
   ======================================================= */

@media (max-width: 760px) {

    /*
     * Phone version stays deliberately restrained:
     * less GPU work and less visual movement behind copy.
     */

    .hero-background {
        animation-duration:
            42s;

        animation-timing-function:
            ease-in-out;
    }


    .hero::before {
        inset: -4%;

        opacity: 0.32;

        background:
            radial-gradient(
                ellipse at 84% 45%,
                rgba(25, 145, 255, 0.10) 0%,
                rgba(12, 75, 170, 0.04) 27%,
                transparent 58%
            );

        animation-duration:
            12s;
    }


    .hero::after {
        /*
         * Kill the moving scan sweep on phones.
         * Keep only a nearly invisible static texture.
         */

        animation: none;

        opacity: 0.12;

        background:
            repeating-linear-gradient(
                180deg,
                transparent 0px,
                transparent 9px,
                rgba(70, 160, 255, 0.007) 10px,
                transparent 11px
            );
    }
}


/* =======================================================
   ACCESSIBILITY — REDUCED MOTION
   ======================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-background,
    .hero::before,
    .hero::after {
        animation: none !important;
    }

    .hero::before {
        opacity: 0.38;
        transform: none;
    }

    .hero::after {
        opacity: 0;
    }
}


/* =======================================================
   BINARYCNT HERO MOTION V2
   Visible cinematic movement
   ======================================================= */

.hero-background {
    inset: -8% !important;

    background-size: 118% auto !important;
    background-position: 70% 50% !important;

    animation:
        binarycnt-hero-pan-v2
        18s
        ease-in-out
        infinite
        alternate !important;

    will-change:
        transform,
        background-position,
        filter;
}


/*
 * Blue atmospheric illumination concentrated around
 * the giant B / city side of the composition.
 */

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 79% 48%,
            rgba(40, 185, 255, 0.24) 0%,
            rgba(24, 120, 255, 0.12) 18%,
            rgba(14, 63, 155, 0.04) 38%,
            transparent 62%
        );

    mix-blend-mode: screen;

    opacity: 0.35;

    animation:
        binarycnt-energy-pulse-v2
        5.5s
        ease-in-out
        infinite;

    will-change:
        opacity,
        transform;
}


/*
 * Moving illumination pass.
 */

.hero::after {
    content: "";

    position: absolute;
    inset: -10%;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            112deg,
            transparent 0%,
            transparent 40%,

            rgba(
                80,
                190,
                255,
                0.00
            ) 44%,

            rgba(
                85,
                205,
                255,
                0.09
            ) 48%,

            rgba(
                185,
                235,
                255,
                0.16
            ) 50%,

            rgba(
                70,
                175,
                255,
                0.07
            ) 52%,

            transparent 56%,
            transparent 100%
        );

    transform:
        translateX(55%);

    opacity: 0;

    animation:
        binarycnt-light-pass-v2
        11s
        ease-in-out
        infinite;

    will-change:
        transform,
        opacity;
}


/*
 * Keep the existing darkness over the text side.
 */

.hero-overlay {
    z-index: 2;
}


/*
 * Actual interface remains above everything.
 */

.site-header,
.hero-content {
    z-index: 10;
}


/* =======================================================
   KEYFRAMES
   ======================================================= */

@keyframes binarycnt-hero-pan-v2 {

    0% {
        transform:
            scale(1.02)
            translate3d(
                0,
                0,
                0
            );

        background-position:
            72% 50%;

        filter:
            brightness(0.52)
            saturate(0.95)
            contrast(1.08);
    }

    50% {
        transform:
            scale(1.055)
            translate3d(
                -0.6%,
                -0.25%,
                0
            );

        background-position:
            70% 49%;

        filter:
            brightness(0.57)
            saturate(1.02)
            contrast(1.09);
    }

    100% {
        transform:
            scale(1.09)
            translate3d(
                -1.15%,
                -0.45%,
                0
            );

        background-position:
            68% 48%;

        filter:
            brightness(0.60)
            saturate(1.06)
            contrast(1.10);
    }
}


@keyframes binarycnt-energy-pulse-v2 {

    0% {
        opacity: 0.22;

        transform:
            scale(0.96);
    }

    50% {
        opacity: 0.60;

        transform:
            scale(1.025);
    }

    100% {
        opacity: 0.30;

        transform:
            scale(0.985);
    }
}


@keyframes binarycnt-light-pass-v2 {

    0%,
    20% {
        transform:
            translateX(62%);

        opacity: 0;
    }

    30% {
        opacity: 0.20;
    }

    48% {
        opacity: 0.62;
    }

    68% {
        opacity: 0.16;
    }

    78%,
    100% {
        transform:
            translateX(-68%);

        opacity: 0;
    }
}


/* =======================================================
   MOBILE
   ======================================================= */

@media (max-width: 760px) {

    .hero-background {
        inset: -6% !important;

        background-size:
            auto 112% !important;

        animation-duration:
            24s !important;
    }


    .hero::before {
        opacity: 0.20;

        animation-duration:
            7s;
    }


    .hero::after {
        opacity: 0;

        animation-duration:
            15s;
    }
}


/* =======================================================
   REDUCED MOTION
   ======================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-background,
    .hero::before,
    .hero::after {
        animation:
            none !important;
    }

    .hero-background {
        transform:
            scale(1.04);
    }

    .hero::before {
        opacity: 0.25;
    }

    .hero::after {
        display: none;
    }
}


/* =======================================================
   BINARYCNT GROK VIDEO HERO
   ======================================================= */

.hero-background {
    display: block !important;

    z-index: 0 !important;

    animation: none !important;

    transform: none !important;
}


/*
 * Real animated cinematic backdrop.
 */

.hero-video {
    position: absolute;

    inset: 0;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        72% center;

    pointer-events: none;

    filter:
        brightness(0.54)
        saturate(0.96)
        contrast(1.08);
}


/*
 * Existing dark gradient remains above the video,
 * preserving readability on the left.
 */

.hero-overlay {
    z-index: 2 !important;
}


/*
 * Disable all earlier fake CSS motion layers.
 * Motion now comes from the actual footage.
 */

.hero::before,
.hero::after {
    display: none !important;

    content: none !important;

    animation: none !important;
}


/*
 * Actual UI always remains above the footage.
 */

.site-header,
.hero-content {
    position: absolute;

    z-index: 10 !important;
}


/* =======================================================
   MOBILE
   ======================================================= */

@media (max-width: 760px) {

    .hero-video {
        object-position:
            69% center;

        filter:
            brightness(0.39)
            saturate(0.92)
            contrast(1.10);
    }
}


/* =======================================================
   REDUCED MOTION
   ======================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-video {
        display: none !important;
    }

    .hero-background {
        display: block !important;
    }
}