/* ============================================
   LAYOUT
   Neologic Web System
============================================ */

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(4,17,31,.96) 0%,
            rgba(7,27,47,.90) 45%,
            rgba(7,27,47,.55) 75%,
            rgba(7,27,47,.25) 100%
        ),
        url("../assets/backgrounds/hero-background.webp");

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

}

.hero__overlay{

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at 15% 35%,

            rgba(18,142,215,.25),

            transparent 35%

        );

}

.hero__content{

    position:relative;

    z-index:2;

    padding-top:80px;

    padding-bottom:80px;

}

.brand-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    max-width: 100%;

    padding: 12px 18px;
    margin-bottom: 48px;

    background: rgba(255, 255, 255, 0.96);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
}

.brand-card__logo {
    display: block;
    width: 260px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.eyebrow{

    color:#7fd7ff;

    font-size:.85rem;

    letter-spacing:.18em;

    font-weight:700;

    margin-bottom:18px;

}

.hero h1{

    max-width:760px;

    margin-bottom:30px;

}

.hero__lead{

    max-width:720px;

    font-size:1.15rem;

    line-height:1.9;

}

.hero__status{

    margin-top:18px;

    color:white;

    font-weight:600;

}