/*==================================================
HOME HERO
==================================================*/

.sidv-home-hero {

    --hero-primary:
        var(--sidv-primary, #FF9800);

    --hero-dark:
        var(--sidv-dark, #0D2137);

    --hero-text:
        #FFFFFF;

    --hero-text-muted:
        rgba(255, 255, 255, .78);

    --hero-border:
        rgba(255, 255, 255, .14);

    position: relative;

    display: flex;

    align-items: center;

    min-height:
        min(660px, 78vh);

    overflow: hidden;

    isolation: isolate;

    background:
        var(--hero-dark);

}


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

.sidv-home-hero__background {

    position: absolute;

    inset: -20px;

    z-index: -3;

    overflow: hidden;

    pointer-events: none;

}


.sidv-home-hero__background-image {

    position: absolute;

    inset: -20px;

    width:
        calc(100% + 40px);

    height:
        calc(100% + 40px);

    display: block;

    object-fit: cover;

    object-position: center;

    transform:
        translate3d(0, 0, 0)
        scale(1.04);

    opacity: 0;

    will-change: transform;

    transition:
        opacity .8s ease;

}


.sidv-home-hero.is-ready
.sidv-home-hero__background-image {

    opacity: 1;

}


/*==================================================
OVERLAY
==================================================*/

.sidv-home-hero__overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(7, 23, 40, .94) 0%,
            rgba(13, 33, 55, .84) 34%,
            rgba(13, 33, 55, .60) 68%,
            rgba(13, 33, 55, .38) 100%
        );

}


.sidv-home-hero__overlay::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5, 18, 32, .16) 0%,
            transparent 45%,
            rgba(5, 18, 32, .28) 100%
        );

}


/*==================================================
GLOW
==================================================*/

.sidv-home-hero__glow {

    position: absolute;

    top: -190px;

    right: -140px;

    z-index: 2;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 152, 0, .18) 0%,
            rgba(255, 152, 0, .08) 32%,
            transparent 70%
        );

    opacity: .85;

    filter: blur(2px);

    pointer-events: none;

    animation:
        sidv-home-hero-glow
        12s ease-in-out infinite;

    will-change: transform;

}


/*==================================================
INDUSTRIAL GRID
==================================================*/

.sidv-home-hero__grid {

    position: absolute;

    inset: 0;

    z-index: 3;

    opacity: .09;

    background-image:

        linear-gradient(
            rgba(255,255,255,.18) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.18) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            90deg,
            black 0%,
            transparent 80%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            black 0%,
            transparent 80%
        );

    pointer-events: none;

}


/*==================================================
CONTAINER
==================================================*/

.sidv-home-hero .sidv-container {

    position: relative;

    z-index: 5;

}


/*==================================================
CONTENT
==================================================*/

.sidv-home-hero__content {

    position: relative;

    max-width: 650px;

    padding:
        clamp(4rem, 7vw, 5.5rem)
        0;

    color:
        var(--hero-text);

}


/*==================================================
EYEBROW
==================================================*/

.sidv-home-hero__eyebrow {

    display: inline-flex;

    align-items: center;

    gap: .55rem;

    margin:
        0 0 1.15rem;

    padding:
        .5rem .8rem;

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

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .06);

    backdrop-filter:
        blur(14px);

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

    color:
        rgba(255, 255, 255, .92);

    font-size:
        .68rem;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;

}


.sidv-home-hero__eyebrow-dot {

    position: relative;

    width: 7px;

    height: 7px;

    flex:
        0 0 7px;

    border-radius: 50%;

    background:
        var(--hero-primary);

    box-shadow:
        0 0 0 4px
        rgba(255, 152, 0, .11);

}


.sidv-home-hero__eyebrow-dot::after {

    content: "";

    position: absolute;

    inset: -4px;

    border:
        1px solid
        rgba(255, 152, 0, .32);

    border-radius: 50%;

    animation:
        sidv-home-hero-pulse
        2.5s ease-out infinite;

}


/*==================================================
TITLE
==================================================*/

.sidv-home-hero__title {

    max-width: 680px;

    margin: 0;

    color:
        var(--hero-text);

    font-size:
        clamp(
            2.35rem,
            4.6vw,
            3.8rem
        );

    font-weight:
        900;

    line-height:
        1.04;

    letter-spacing:
        -.045em;

    text-wrap:
        balance;

}


/*==================================================
TITLE HIGHLIGHT
==================================================*/

.sidv-home-hero__title-highlight {

    display: inline;

    color:
        var(--hero-primary);

}


/*==================================================
DESCRIPTION
==================================================*/

.sidv-home-hero__description {

    max-width: 560px;

    margin:
        1.25rem 0
        1.9rem;

    color:
        var(--hero-text-muted);

    font-size:
        clamp(
            .9rem,
            1.15vw,
            1rem
        );

    line-height:
        1.65;

}


/*==================================================
ACTIONS
==================================================*/

.sidv-home-hero__actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: .75rem;

    margin-bottom:
        1.9rem;

}


.sidv-home-hero__actions .sidv-button {

    min-height:
        46px;

}


/*==================================================
TRUST
==================================================*/

.sidv-home-hero__trust {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap:
        .7rem
        1.4rem;

}


.sidv-home-hero__trust-item {

    display: inline-flex;

    align-items: center;

    gap: .55rem;

    color:
        rgba(255, 255, 255, .84);

    font-size:
        .78rem;

    font-weight:
        600;

    line-height:
        1.4;

}


.sidv-home-hero__trust-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 26px;

    height: 26px;

    flex:
        0 0 26px;

    border:
        1px solid
        rgba(255, 152, 0, .32);

    border-radius: 50%;

    background:
        rgba(255, 152, 0, .12);

    color:
        var(--hero-primary);

}


/*==================================================
SCROLL INDICATOR
==================================================*/

.sidv-home-hero__scroll {

    position: absolute;

    left: 50%;

    bottom:
        1.25rem;

    z-index: 6;

    display: flex;

    align-items: center;

    gap: .55rem;

    transform:
        translateX(-50%);

    color:
        rgba(255, 255, 255, .5);

    font-size:
        .62rem;

    font-weight:
        700;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    pointer-events: none;

}


.sidv-home-hero__scroll-line {

    position: relative;

    display: block;

    width: 30px;

    height: 1px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, .22);

}


.sidv-home-hero__scroll-line::after {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background:
        var(--hero-primary);

    animation:
        sidv-home-hero-scroll
        2.2s ease-in-out infinite;

}


/*==================================================
REVEAL
==================================================*/

.sidv-home-hero [data-hero-reveal] {

    opacity: 0;

    transform:
        translate3d(
            0,
            22px,
            0
        );

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(
            .22,
            1,
            .36,
            1
        );

}


.sidv-home-hero [data-hero-reveal].is-visible {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


/*==================================================
READY STATE
==================================================*/

.sidv-home-hero.is-ready
[data-hero-reveal] {

    transition-delay:
        0s;

}


/*==================================================
GLOW ANIMATION
==================================================*/

@keyframes sidv-home-hero-glow {

    0%,
    100% {

        opacity: .7;

        transform:
            scale(1)
            translate3d(0, 0, 0);

    }

    50% {

        opacity: .95;

        transform:
            scale(1.08)
            translate3d(-10px, 8px, 0);

    }

}


/*==================================================
EYEBROW PULSE
==================================================*/

@keyframes sidv-home-hero-pulse {

    0% {

        opacity: .8;

        transform:
            scale(.8);

    }

    70%,
    100% {

        opacity: 0;

        transform:
            scale(1.8);

    }

}


/*==================================================
SCROLL ANIMATION
==================================================*/

@keyframes sidv-home-hero-scroll {

    0% {

        transform:
            translateX(0);

    }

    45% {

        transform:
            translateX(100%);

    }

    100% {

        transform:
            translateX(100%);

    }

}


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

@media (max-width: 1100px) {

    .sidv-home-hero {

        min-height:
            min(620px, 74vh);

    }


    .sidv-home-hero__content {

        max-width:
            610px;

    }


    .sidv-home-hero__title {

        font-size:
            clamp(
                2.25rem,
                5.2vw,
                3.35rem
            );

    }


    .sidv-home-hero__grid {

        background-size:
            55px 55px;

    }

}


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

@media (max-width: 992px) {

    .sidv-home-hero {

        min-height:
            570px;

    }


    .sidv-home-hero__content {

        padding:
            4rem 0;

    }


    .sidv-home-hero__glow {

        width:
            440px;

        height:
            440px;

        right:
            -160px;

        top:
            -160px;

    }

}


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

@media (max-width: 768px) {

    .sidv-home-hero {

        min-height:
            560px;

        text-align:
            center;

    }


    .sidv-home-hero__background {

        inset:
            -10px;

    }


    .sidv-home-hero__background-image {

        object-position:
            center center;

    }


    .sidv-home-hero__overlay {

        background:
            linear-gradient(
                180deg,
                rgba(7, 23, 40, .7) 0%,
                rgba(13, 33, 55, .84) 48%,
                rgba(7, 23, 40, .96) 100%
            );

    }


    .sidv-home-hero__grid {

        opacity:
            .06;

        background-size:
            45px 45px;

        mask-image:
            linear-gradient(
                180deg,
                black 0%,
                transparent 85%
            );

        -webkit-mask-image:
            linear-gradient(
                180deg,
                black 0%,
                transparent 85%
            );

    }


    .sidv-home-hero__content {

        max-width:
            none;

        padding:
            3.5rem 0
            4.25rem;

    }


    .sidv-home-hero__eyebrow {

        margin-bottom:
            1rem;

        font-size:
            .62rem;

        letter-spacing:
            .065em;

    }


    .sidv-home-hero__title {

        font-size:
            clamp(
                2rem,
                8vw,
                2.75rem
            );

        letter-spacing:
            -.04em;

    }


    .sidv-home-hero__description {

        max-width:
            500px;

        margin:
            1.15rem auto
            1.7rem;

        font-size:
            .9rem;

        line-height:
            1.6;

    }


    .sidv-home-hero__actions {

        flex-direction:
            column;

        align-items:
            stretch;

        width:
            100%;

        max-width:
            330px;

        margin:
            0 auto
            1.7rem;

    }


    .sidv-home-hero__actions .sidv-button {

        width:
            100%;

    }


    .sidv-home-hero__trust {

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            .6rem;

        max-width:
            360px;

        margin:
            0 auto;

    }


    .sidv-home-hero__trust-item {

        justify-content:
            flex-start;

        text-align:
            left;

        font-size:
            .75rem;

    }


    .sidv-home-hero__glow {

        width:
            380px;

        height:
            380px;

        top:
            -150px;

        right:
            -200px;

    }


    .sidv-home-hero__scroll {

        bottom:
            1rem;

    }

}


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

@media (max-width: 480px) {

    .sidv-home-hero {

        min-height:
            520px;

    }


    .sidv-home-hero__content {

        padding:
            3rem 0
            3.75rem;

    }


    .sidv-home-hero__eyebrow {

        padding:
            .5rem .7rem;

    }


    .sidv-home-hero__title {

        font-size:
            clamp(
                1.8rem,
                9.5vw,
                2.4rem
            );

    }


    .sidv-home-hero__description {

        font-size:
            .86rem;

    }


    .sidv-home-hero__trust-item {

        gap:
            .5rem;

        font-size:
            .74rem;

    }


    .sidv-home-hero__trust-icon {

        width:
            24px;

        height:
            24px;

        flex-basis:
            24px;

    }


    .sidv-home-hero__scroll-text {

        display:
            none;

    }


    .sidv-home-hero__scroll-line {

        width:
            26px;

    }

}


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

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

    .sidv-home-hero__glow,
    .sidv-home-hero__eyebrow-dot::after,
    .sidv-home-hero__scroll-line::after {

        animation:
            none;

    }


    .sidv-home-hero__background-image {

        transform:
            scale(1.04);

        transition:
            none;

    }


    .sidv-home-hero [data-hero-reveal] {

        opacity:
            1;

        transform:
            none;

        transition:
            none;

    }

}