/* =========================================================
   i9Startups EVO - TRUE THREE LAYER HERO

   1. hero.webp
   2. particles
   3. commercial content
   ========================================================= */


/* =========================================================
   LAYER 1 — PHOTOGRAPH
   ========================================================= */

#hero.v12-hero {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;

    min-height: clamp(620px, 78vh, 820px);

    background-image:
        linear-gradient(
            90deg,
            rgba(4,15,24,.88) 0%,
            rgba(4,15,24,.72) 38%,
            rgba(4,15,24,.38) 68%,
            rgba(4,15,24,.18) 100%
        ),
        url("/evo/assets/media/future/hero.webp") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* Kill original image/card completely */

#hero.v12-hero .v12-hero-media {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

#hero.v12-hero .v12-hero-media img {
    display: none !important;
}


/* =========================================================
   LAYER 2 — NETWORK
   ========================================================= */

#hero.v12-hero .evo-network {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 1 !important;

    overflow: hidden;

    pointer-events: none;

    opacity: .48;
}

#hero.v12-hero .evo-network canvas {
    position: absolute;

    inset: 0;

    width: 100% !important;
    height: 100% !important;

    display: block;
}


/* =========================================================
   READABILITY VEIL
   ========================================================= */

#hero.v12-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(3,13,21,.34) 0%,
            rgba(3,13,21,.16) 46%,
            transparent 75%
        );
}


/* =========================================================
   LAYER 3 — CONTENT
   ========================================================= */

#hero.v12-hero .v12-hero-grid {
    position: relative !important;

    z-index: 3 !important;

    display: flex !important;
    align-items: center !important;

    width: 100%;

    min-height: clamp(620px, 78vh, 820px);

    grid-template-columns: none !important;
}


/* content column */

#hero.v12-hero .v12-hero-grid > div:first-child {
    width: min(680px, 58vw);
    max-width: 680px;

    position: relative;

    padding-top: 30px;
    padding-bottom: 30px;
}


/* Headline — commercial hierarchy */

#hero.v12-hero h1 {
    max-width: 680px;

    font-size: clamp(3rem, 4.6vw, 5.25rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em;

    text-wrap: balance;

    margin-bottom: 28px;
}


/* Supporting copy */

#hero.v12-hero .v12-hero-grid > div:first-child > p {
    max-width: 650px;

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

    margin-bottom: 30px;
}


/* Buttons remain fully interactive */

#hero.v12-hero .v12-actions {
    position: relative;
    z-index: 4;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    #hero.v12-hero {
        background-position: 58% center !important;
    }

    #hero.v12-hero .v12-hero-grid > div:first-child {
        width: min(650px, 68vw);
    }

    #hero.v12-hero .evo-network {
        opacity: .42;
    }

}


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

@media (max-width: 767px) {

    #hero.v12-hero {

        min-height: 720px;

        background-image:
            linear-gradient(
                180deg,
                rgba(3,13,21,.28) 0%,
                rgba(3,13,21,.50) 34%,
                rgba(3,13,21,.88) 66%,
                rgba(3,13,21,.98) 100%
            ),
            url("/evo/assets/media/future/hero.webp") !important;

        background-position: 62% center !important;
    }

    #hero.v12-hero .v12-hero-grid {

        min-height: 720px;

        align-items: flex-end !important;

        padding-top: 100px;
        padding-bottom: 54px;
    }

    #hero.v12-hero .v12-hero-grid > div:first-child {

        width: 100%;
        max-width: 100%;

        padding: 0;
    }

    #hero.v12-hero h1 {

        font-size: clamp(2.55rem, 12vw, 4rem) !important;

        line-height: .98 !important;

        max-width: 100%;
    }

    #hero.v12-hero .evo-network {
        opacity: .32;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    #hero.v12-hero .evo-network {
        display: none !important;
    }

}


/* =========================================================
   GATE 09
   HERO PHYSICAL LAYER STACK

   0 = photograph
   1 = particles
   2 = readability veil
   3 = commercial content
   ========================================================= */


/* Hero becomes stacking context.
   Neutralize legacy V12 background because photograph
   now lives in its own physical layer. */

#hero.v12-hero {
    position: relative !important;
    isolation: isolate !important;

    background:
        #07131d !important;

    overflow: hidden !important;
}


/* ---------------------------------------------------------
   LAYER 0 — PHOTOGRAPH
   --------------------------------------------------------- */

#hero.v12-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            90deg,
            rgba(3,13,21,.72) 0%,
            rgba(3,13,21,.52) 34%,
            rgba(3,13,21,.24) 66%,
            rgba(3,13,21,.08) 100%
        ),
        url("/evo/assets/media/future/hero.webp");

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


/* ---------------------------------------------------------
   LAYER 1 — PARTICLES
   --------------------------------------------------------- */

#hero.v12-hero .evo-network {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 1 !important;

    opacity: .48;

    overflow: hidden;
    pointer-events: none;
}

#hero.v12-hero .evo-network canvas {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    background: transparent !important;
}


/* ---------------------------------------------------------
   LAYER 2 — READABILITY
   --------------------------------------------------------- */

#hero.v12-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(2,10,17,.30) 0%,
            rgba(2,10,17,.14) 45%,
            rgba(2,10,17,.02) 72%,
            transparent 100%
        );
}


/* ---------------------------------------------------------
   LAYER 3 — COMMERCIAL CONTENT
   --------------------------------------------------------- */

#hero.v12-hero .v12-hero-grid {
    position: relative !important;

    z-index: 3 !important;
}


/* Original card/image remains disabled */

#hero.v12-hero .v12-hero-media {
    display: none !important;
}


/* ---------------------------------------------------------
   RESPONSIVE IMAGE COMPOSITION
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    #hero.v12-hero::before {
        background-position: 58% center;
    }

    #hero.v12-hero .evo-network {
        opacity: .42;
    }
}


@media (max-width: 767px) {

    #hero.v12-hero::before {

        background-image:
            linear-gradient(
                180deg,
                rgba(3,13,21,.18) 0%,
                rgba(3,13,21,.34) 32%,
                rgba(3,13,21,.76) 67%,
                rgba(3,13,21,.94) 100%
            ),
            url("/evo/assets/media/future/hero.webp");

        background-position: 62% center;
    }

    #hero.v12-hero .evo-network {
        opacity: .32;
    }
}


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

    #hero.v12-hero .evo-network {
        display: none !important;
    }
}


/* GATE 09B - FORCE VISIBLE PHYSICAL STACK */

#hero.v12-hero::before {
    z-index: 1 !important;
    opacity: 1 !important;
}

#hero.v12-hero .evo-network {
    z-index: 2 !important;
}

#hero.v12-hero::after {
    z-index: 3 !important;
}

#hero.v12-hero .v12-hero-grid {
    z-index: 4 !important;
}

#hero.v12-hero .v12-actions {
    z-index: 5 !important;
}


/* =========================================================
   GATE 09C - DIRECT HERO WALLPAPER TEST
   No pseudo-element for photograph
   ========================================================= */

#hero.v12-hero {

    background:
        linear-gradient(
            90deg,
            rgba(3,13,21,.64) 0%,
            rgba(3,13,21,.42) 38%,
            rgba(3,13,21,.16) 70%,
            rgba(3,13,21,.05) 100%
        ),
        url("/evo/assets/media/future/hero.webp")
        center center / cover
        no-repeat !important;
}


/* Disable previous photograph pseudo-layer */

#hero.v12-hero::before {
    content: none !important;
    display: none !important;
}


/* Network */

#hero.v12-hero .evo-network {
    z-index: 1 !important;
}


/* Readability */

#hero.v12-hero::after {
    z-index: 2 !important;
}


/* Content */

#hero.v12-hero .v12-hero-grid {
    z-index: 3 !important;
}


/* CTA */

#hero.v12-hero .v12-actions {
    z-index: 4 !important;
}


/* Mobile */

@media (max-width: 767px) {

    #hero.v12-hero {

        background:
            linear-gradient(
                180deg,
                rgba(3,13,21,.18) 0%,
                rgba(3,13,21,.34) 34%,
                rgba(3,13,21,.72) 70%,
                rgba(3,13,21,.92) 100%
            ),
            url("/evo/assets/media/future/hero.webp")
            62% center / cover
            no-repeat !important;
    }
}



/* =========================================================
   GATE 10 - HERO PRIMARY CTA VISIBILITY FIX
   ========================================================= */

/* Primary CTA only */
#hero.v12-hero .v12-actions a:first-child,
#hero.v12-hero .v12-actions .v12-btn:first-child {
    color: #07131d !important;
    background: #ffffff !important;
    border-color: #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;

    text-shadow: none !important;
    -webkit-text-fill-color: #07131d !important;

    position: relative;
    z-index: 6 !important;
}

/* Any nested text/span inherits dark foreground */
#hero.v12-hero .v12-actions a:first-child *,
#hero.v12-hero .v12-actions .v12-btn:first-child * {
    color: #07131d !important;
    -webkit-text-fill-color: #07131d !important;
    opacity: 1 !important;
}

/* Hover */
#hero.v12-hero .v12-actions a:first-child:hover,
#hero.v12-hero .v12-actions .v12-btn:first-child:hover {
    color: #07131d !important;
    background: rgba(255,255,255,.90) !important;

    transform: translateY(-2px);
}

/* Keyboard accessibility */
#hero.v12-hero .v12-actions a:first-child:focus-visible,
#hero.v12-hero .v12-actions .v12-btn:first-child:focus-visible {
    color: #07131d !important;
    outline: 3px solid rgba(255,255,255,.45) !important;
    outline-offset: 3px;
}



/* =========================================================
   GATE 12 - ORIGINAL PARTICLES INTERACTIVITY
   Original behavior:
   hover = grab
   click = push 4 particles
   ========================================================= */

#hero.v12-hero #evo-network {
    pointer-events: auto !important;
}

/*
 * Content stays above the interactive canvas.
 * Links/buttons continue receiving their own clicks.
 */
#hero.v12-hero .v12-container,
#hero.v12-hero .v12-content,
#hero.v12-hero .v12-actions {
    position: relative;
    z-index: 3 !important;
}

#hero.v12-hero .v12-actions {
    z-index: 4 !important;
}

#hero.v12-hero .v12-actions a,
#hero.v12-hero .v12-actions button {
    position: relative;
    z-index: 5 !important;
    pointer-events: auto !important;
}



/* =========================================================
   GATE 13 - HERO TRUE DEPTH STACK

   L0 background photograph
   L1 interactive original particles
   L2 foreground people cutout
   L3 commercial content
   ========================================================= */


/* ---------------------------------------------------------
   HERO BASE
   --------------------------------------------------------- */

#hero.v12-hero {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,13,21,.54) 0%,
            rgba(3,13,21,.30) 38%,
            rgba(3,13,21,.10) 72%,
            rgba(3,13,21,.02) 100%
        ),
        url("/evo/assets/media/future/hero.webp")
        center center / cover
        no-repeat !important;
}


/* Old pseudo photo layer is permanently disabled */

#hero.v12-hero::before {
    content: none !important;
    display: none !important;
}


/* =========================================================
   LAYER 1
   ORIGINAL INTERACTIVE PARTICLES
   ========================================================= */

#hero.v12-hero #evo-network {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 1 !important;

    pointer-events: auto !important;

    opacity: .48;
}

#hero.v12-hero #evo-network canvas {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    background: transparent !important;

    pointer-events: auto !important;
}


/* =========================================================
   LAYER 2
   PEOPLE FOREGROUND
   Exact same 1600x800 coordinate system as hero.webp
   ========================================================= */

#hero.v12-hero .evo-people-layer {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    overflow: hidden;

    pointer-events: none;
}

#hero.v12-hero .evo-people-layer img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    display: block;

    pointer-events: none;
}


/* Hide layer automatically while cutout is unavailable */

#hero.v12-hero .evo-people-layer img[src$="hero-people.webp"] {
    color: transparent;
}


/* =========================================================
   READABILITY
   Remains behind text but above people only very subtly
   ========================================================= */

#hero.v12-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(2,10,17,.28) 0%,
            rgba(2,10,17,.11) 34%,
            rgba(2,10,17,.015) 63%,
            transparent 82%
        );
}


/* =========================================================
   LAYER 4
   HERO COMMERCIAL CONTENT
   ========================================================= */

#hero.v12-hero .v12-hero-grid {
    position: relative !important;

    z-index: 4 !important;

    pointer-events: none;
}


/*
 * Text itself does not consume mouse input.
 * This permits the original particle interaction
 * even visually underneath the headline.
 */

#hero.v12-hero .v12-hero-grid h1,
#hero.v12-hero .v12-hero-grid p,
#hero.v12-hero .v12-eyebrow {
    pointer-events: none;
}


/* CTAs must remain interactive */

#hero.v12-hero .v12-actions {
    position: relative !important;

    z-index: 5 !important;

    pointer-events: auto !important;
}

#hero.v12-hero .v12-actions a,
#hero.v12-hero .v12-actions button {
    pointer-events: auto !important;
}


/* =========================================================
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    #hero.v12-hero {
        background-position: 58% center !important;
    }

    #hero.v12-hero .evo-people-layer img {
        object-position: 58% center;
    }

    #hero.v12-hero #evo-network {
        opacity: .42;
    }
}


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

@media (max-width: 767px) {

    #hero.v12-hero {

        background:
            linear-gradient(
                180deg,
                rgba(3,13,21,.10) 0%,
                rgba(3,13,21,.24) 34%,
                rgba(3,13,21,.68) 68%,
                rgba(3,13,21,.90) 100%
            ),
            url("/evo/assets/media/future/hero.webp")
            62% center / cover
            no-repeat !important;
    }

    #hero.v12-hero .evo-people-layer img {
        object-position: 62% center;
    }

    #hero.v12-hero #evo-network {
        opacity: .32;
    }
}


/* =========================================================
   ACCESSIBILITY
   --------------------------------------------------------- */

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

    #hero.v12-hero #evo-network {
        display: none !important;
    }
}


/* =========================================================
   GATE 16
   Temporarily disable non pixel-identical people cutout.
   Awaiting segmentation directly from original hero.webp.
   ========================================================= */

#hero.v12-hero .evo-people-layer {
    display: none !important;
}


/* =========================================================
   GATE 18 - PIXEL IDENTICAL PEOPLE OCCLUSION LAYER
   ========================================================= */

#hero.v12-hero .evo-people-layer {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

#hero.v12-hero .evo-people-layer img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    pointer-events: none !important;
}

@media (max-width: 1024px) {
    #hero.v12-hero .evo-people-layer img {
        object-position: 58% center !important;
    }
}

@media (max-width: 767px) {
    #hero.v12-hero .evo-people-layer img {
        object-position: 62% center !important;
    }
}


/* =========================================================
   GATE 19 - TRUE PIXEL OCCLUSION

   L1 = original hero
   L2 = original particles
   L3 = SAME original hero clipped by people mask
   L4 = hero content
   ========================================================= */

/* Never display the previous generated people image */
#hero.v12-hero .evo-people-layer img {
    display: none !important;
}

/* Exact original photograph repeated above particles,
   visible ONLY where the people mask allows it. */

#hero.v12-hero .evo-people-layer {
    display: block !important;

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 2 !important;

    pointer-events: none !important;

    background-image:
        url("/evo/assets/media/future/hero.webp") !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    -webkit-mask-image:
        url("/evo/assets/media/future/hero-people-mask.png");

    mask-image:
        url("/evo/assets/media/future/hero-people-mask.png");

    -webkit-mask-size:
        cover;

    mask-size:
        cover;

    -webkit-mask-position:
        center center;

    mask-position:
        center center;

    -webkit-mask-repeat:
        no-repeat;

    mask-repeat:
        no-repeat;
}


/* Tablet: foreground, mask and original background
   must move through exactly the same coordinate system. */

@media (max-width: 1024px) {

    #hero.v12-hero .evo-people-layer {

        background-position:
            58% center !important;

        -webkit-mask-position:
            58% center;

        mask-position:
            58% center;
    }
}


/* Mobile: same rule. */

@media (max-width: 767px) {

    #hero.v12-hero .evo-people-layer {

        background-position:
            62% center !important;

        -webkit-mask-position:
            62% center;

        mask-position:
            62% center;
    }
}



/* =========================================================
   GATE 20 - PROPORTIONAL HERO STAGE
   Objective:
   - entire 1600x800 photograph always visible on desktop
   - no image crop
   - particles + mask use exact same geometry
   - text + CTA stay inside visible hero
   ========================================================= */

@media (min-width: 1025px) {

    /*
     * Hero occupies available viewport below navigation.
     * Photograph keeps original 2:1 aspect ratio.
     */
    #hero.v12-hero {
        --hero-header-h: 126px;
        --hero-stage-w: min(
            100vw,
            calc((100svh - var(--hero-header-h)) * 2)
        );

        height: calc(100svh - var(--hero-header-h)) !important;
        min-height: 0 !important;
        max-height: none !important;

        position: relative !important;
        overflow: hidden !important;

        background-color: #07141e !important;

        /*
         * Full original photograph.
         * CONTAIN means zero cropping.
         */
        background-image:
            linear-gradient(
                90deg,
                rgba(3,13,21,.54) 0%,
                rgba(3,13,21,.28) 38%,
                rgba(3,13,21,.08) 72%,
                rgba(3,13,21,.02) 100%
            ),
            url("/evo/assets/media/future/hero.webp") !important;

        background-size:
            var(--hero-stage-w) 100%,
            var(--hero-stage-w) 100% !important;

        background-position:
            center center,
            center center !important;

        background-repeat:
            no-repeat !important;
    }


    /* =====================================================
       PARTICLES
       Exact same visual stage as photograph
       ===================================================== */

    #hero.v12-hero #evo-network {
        position: absolute !important;

        top: 0 !important;
        bottom: 0 !important;

        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;

        width: var(--hero-stage-w) !important;
        height: 100% !important;

        z-index: 1 !important;

        overflow: hidden !important;
        pointer-events: auto !important;
    }

    #hero.v12-hero #evo-network canvas {
        width: 100% !important;
        height: 100% !important;
    }


    /* =====================================================
       PEOPLE OCCLUSION
       Same photograph + same dimensions + same mask
       ===================================================== */

    #hero.v12-hero .evo-people-layer {
        position: absolute !important;

        top: 0 !important;
        bottom: 0 !important;

        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;

        width: var(--hero-stage-w) !important;
        height: 100% !important;

        z-index: 2 !important;

        background-image:
            url("/evo/assets/media/future/hero.webp") !important;

        background-size:
            100% 100% !important;

        background-position:
            center center !important;

        background-repeat:
            no-repeat !important;

        -webkit-mask-image:
            url("/evo/assets/media/future/hero-people-mask.png");

        mask-image:
            url("/evo/assets/media/future/hero-people-mask.png");

        -webkit-mask-size:
            100% 100%;

        mask-size:
            100% 100%;

        -webkit-mask-position:
            center center;

        mask-position:
            center center;

        -webkit-mask-repeat:
            no-repeat;

        mask-repeat:
            no-repeat;

        pointer-events: none !important;
    }


    /* Old physical cutout remains disabled */

    #hero.v12-hero .evo-people-layer img {
        display: none !important;
    }


    /* =====================================================
       CONTENT STAGE
       Content uses same width as photograph.
       ===================================================== */

    #hero.v12-hero .v12-hero-grid {
        position: relative !important;

        width: var(--hero-stage-w) !important;
        max-width: none !important;

        height: 100% !important;

        margin: 0 auto !important;

        padding:
            clamp(26px, 4.5svh, 56px)
            clamp(28px, 3vw, 72px) !important;

        display: flex !important;
        align-items: center !important;

        z-index: 4 !important;

        box-sizing: border-box !important;
    }


    /*
     * Keep commercial content inside approximately
     * left 50% of photograph.
     */
    #hero.v12-hero .v12-hero-grid > div {
        width: min(49%, 760px) !important;
        max-width: 760px !important;
    }


    /* Eyebrow */

    #hero.v12-hero .v12-eyebrow {
        font-size:
            clamp(11px, 1.45svh, 16px) !important;

        margin-bottom:
            clamp(12px, 2svh, 24px) !important;
    }


    /* Main headline scales from BOTH viewport dimensions */

    #hero.v12-hero h1 {
        font-size:
            clamp(
                38px,
                min(4.5vw, 7.2svh),
                82px
            ) !important;

        line-height: .96 !important;

        letter-spacing: -.045em !important;

        margin:
            0
            0
            clamp(16px, 2.5svh, 30px)
            0 !important;
    }


    /* Supporting paragraph */

    #hero.v12-hero .v12-hero-grid p {
        font-size:
            clamp(
                15px,
                min(1.35vw, 2.5svh),
                21px
            ) !important;

        line-height: 1.45 !important;

        margin-bottom:
            clamp(18px, 3svh, 34px) !important;

        max-width: 680px !important;
    }


    /* CTA row never leaves hero */

    #hero.v12-hero .v12-actions {
        display: flex !important;

        flex-wrap: wrap !important;

        gap:
            clamp(8px, 1vw, 16px) !important;

        margin: 0 !important;

        position: relative !important;
        z-index: 5 !important;
    }


    #hero.v12-hero .v12-btn {
        min-height:
            clamp(42px, 6svh, 56px) !important;

        padding:
            0
            clamp(18px, 1.8vw, 30px) !important;

        font-size:
            clamp(13px, 1.55svh, 16px) !important;

        white-space: nowrap !important;
    }


    /*
     * Readability overlay remains full hero,
     * but subtle enough to preserve photograph.
     */
    #hero.v12-hero::after {
        background:
            linear-gradient(
                90deg,
                rgba(2,10,17,.34) 0%,
                rgba(2,10,17,.15) 31%,
                rgba(2,10,17,.03) 54%,
                transparent 75%
            ) !important;
    }
}


/* =========================================================
   SHORT DESKTOP WINDOWS
   Example notebooks / browser zoom
   ========================================================= */

@media (min-width: 1025px) and (max-height: 760px) {

    #hero.v12-hero .v12-hero-grid {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    #hero.v12-hero h1 {
        font-size:
            clamp(34px, 6svh, 62px) !important;
    }

    #hero.v12-hero .v12-hero-grid p {
        font-size:
            clamp(14px, 2.25svh, 18px) !important;

        margin-bottom:
            clamp(12px, 2svh, 22px) !important;
    }

    #hero.v12-hero .v12-btn {
        min-height: 42px !important;
    }
}



/* =========================================================
   GATE 21 - HERO PREMIUM UX
   Final responsive refinement
   Does NOT alter particles engine or mask asset
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

    /* More elegant environment around proportional photograph */
    #hero.v12-hero {
        background-color: #07131d !important;
    }

    /*
     * Ambient side treatment.
     * Keeps the actual photograph proportional/uncropped,
     * but removes the sensation of pure black side bars.
     */
    #hero.v12-hero::before {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        inset: -35px !important;

        z-index: 0 !important;

        background:
            linear-gradient(
                90deg,
                rgba(7,19,29,.80),
                rgba(7,19,29,.14) 27%,
                rgba(7,19,29,.06) 50%,
                rgba(7,19,29,.14) 73%,
                rgba(7,19,29,.80)
            ),
            url("/evo/assets/media/future/hero.webp")
            center center / cover
            no-repeat !important;

        filter: blur(28px) saturate(.85) brightness(.60);

        opacity: .34 !important;

        transform: scale(1.06);

        pointer-events: none !important;
    }


    /* Preserve true picture above ambient layer */
    #hero.v12-hero {
        background-position:
            center center,
            center center !important;
    }


    /* Slightly calmer particles for commercial readability */
    #hero.v12-hero #evo-network {
        opacity: .40 !important;
    }


    /* Content block */
    #hero.v12-hero .v12-hero-grid {
        padding-left:
            clamp(38px, 4vw, 76px) !important;

        padding-right:
            clamp(38px, 4vw, 76px) !important;
    }

    #hero.v12-hero .v12-hero-grid > div {
        width: min(46%, 700px) !important;
        max-width: 700px !important;
    }


    /* Premium headline proportions */
    #hero.v12-hero h1 {
        font-size:
            clamp(
                42px,
                min(4vw, 6.5svh),
                72px
            ) !important;

        line-height: .97 !important;
        letter-spacing: -.045em !important;

        max-width: 690px !important;
    }


    #hero.v12-hero .v12-hero-grid p {
        max-width: 620px !important;

        font-size:
            clamp(15px, 1.15vw, 19px) !important;

        line-height: 1.48 !important;
    }


    /* Buttons visually stronger but less oversized */
    #hero.v12-hero .v12-actions {
        gap: 12px !important;
    }

    #hero.v12-hero .v12-btn {
        min-height: 50px !important;

        padding:
            0
            clamp(22px, 1.7vw, 30px) !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    #hero.v12-hero #evo-network {
        opacity: .35 !important;
    }

    #hero.v12-hero h1 {
        font-size:
            clamp(44px, 6vw, 60px) !important;

        line-height: .98 !important;
    }

}


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

@media (max-width: 767px) {

    /*
     * Mobile cannot show a 2:1 photograph completely while
     * also filling a vertical screen.
     *
     * Therefore use controlled cinematic crop rather than
     * accidental crop.
     */
    #hero.v12-hero {

        min-height: 850px !important;

        height: auto !important;

        background:
            linear-gradient(
                180deg,
                rgba(3,13,21,.04) 0%,
                rgba(3,13,21,.08) 28%,
                rgba(3,13,21,.34) 53%,
                rgba(3,13,21,.76) 78%,
                rgba(3,13,21,.96) 100%
            ),
            url("/evo/assets/media/future/hero.webp")
            58% center / cover
            no-repeat !important;

        position: relative !important;

        overflow: hidden !important;
    }


    /*
     * Same geometry for people occlusion layer.
     */
    #hero.v12-hero .evo-people-layer {

        background-image:
            url("/evo/assets/media/future/hero.webp") !important;

        background-size:
            cover !important;

        background-position:
            58% center !important;

        -webkit-mask-position:
            58% center !important;

        mask-position:
            58% center !important;

        -webkit-mask-size:
            cover !important;

        mask-size:
            cover !important;
    }


    /* Network stays visible but less competitive */
    #hero.v12-hero #evo-network {
        opacity: .27 !important;
    }


    /*
     * Content geometry.
     * Extra bottom padding protects CTAs from Safari/Chrome bars.
     */
    #hero.v12-hero .v12-hero-grid {

        min-height: 850px !important;

        height: auto !important;

        display: flex !important;

        align-items: flex-end !important;

        padding:
            220px
            24px
            calc(115px + env(safe-area-inset-bottom))
            24px !important;

        box-sizing: border-box !important;

        pointer-events: none !important;
    }


    #hero.v12-hero .v12-hero-grid > div {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* Eyebrow */
    #hero.v12-hero .v12-eyebrow {

        font-size: 11px !important;

        line-height: 1.3 !important;

        letter-spacing: .20em !important;

        margin-bottom: 14px !important;
    }


    /*
     * Major mobile improvement:
     * current screenshot is oversized.
     */
    #hero.v12-hero h1 {

        font-size:
            clamp(40px, 11.2vw, 48px) !important;

        line-height: .98 !important;

        letter-spacing: -.045em !important;

        margin:
            0
            0
            18px
            0 !important;

        max-width: 100% !important;
    }


    #hero.v12-hero .v12-hero-grid p {

        font-size:
            clamp(15px, 4.35vw, 17px) !important;

        line-height: 1.48 !important;

        max-width: 100% !important;

        margin-bottom: 24px !important;
    }


    /* CTA stack fully visible */
    #hero.v12-hero .v12-actions {

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        width: 100% !important;

        gap: 10px !important;

        margin: 0 !important;

        pointer-events: auto !important;
    }


    #hero.v12-hero .v12-btn {

        width: 100% !important;

        min-height: 54px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        padding:
            0
            20px !important;

        font-size: 16px !important;

        line-height: 1 !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }


    /* Secondary CTA visually lighter */
    #hero.v12-hero .v12-actions .v12-btn:not(.primary) {

        background:
            rgba(4,13,21,.32) !important;

        backdrop-filter:
            blur(8px);

        -webkit-backdrop-filter:
            blur(8px);

        border-color:
            rgba(255,255,255,.34) !important;
    }


    /*
     * Readability gradient should not darken faces,
     * mostly reinforces bottom/text zone.
     */
    #hero.v12-hero::after {

        background:
            linear-gradient(
                180deg,
                transparent 0%,
                rgba(2,10,17,.04) 31%,
                rgba(2,10,17,.25) 52%,
                rgba(2,10,17,.72) 77%,
                rgba(2,10,17,.96) 100%
            ) !important;

        pointer-events: none !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    #hero.v12-hero h1 {
        font-size: 39px !important;
    }

    #hero.v12-hero .v12-hero-grid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    #hero.v12-hero #evo-network {
        display: none !important;
    }

}