/* ===========================
   HEADER & HERO
=========================== */

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:76px;
    display:flex;
    align-items:center;
    background:var(--blue-dark);
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    z-index:10000;
}

.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.logo img,
.nav>img{
    height:48px;
    display:block;
}

.main-nav{
    display:flex;
    align-items:center;
    gap:38px;
}

.main-nav a{
    color:#fff;
    font-size:17px;
    font-weight:700;
    opacity:.92;
    transition:.25s;
}

.main-nav a:hover{
    opacity:1;
    color:var(--blue-light);
}

.nav-cta{
    color:#fff;
    background:linear-gradient(135deg,#0877ff,#0054c8);
    padding:14px 24px;
    border-radius:8px;
    font-size:16px;
    font-weight:800;
    box-shadow:0 16px 30px rgba(0,87,200,.28);
}

.hero{
    position:relative;
    min-height:720px;
    overflow:hidden;
    background:url("../img/hero-nas-consulting_1920.jpg") right top / cover no-repeat, var(--blue-dark);
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(3,20,47,1) 0%, rgba(3,20,47,1) 36%, rgba(3,20,47,.88) 50%, rgba(3,20,47,.55) 64%, rgba(3,20,47,.20) 80%, rgba(3,20,47,0) 100%);
}

.hero-content{
    position:relative;
    z-index:5;
    min-height:720px;
    display:flex;
    align-items:center;
    padding-top:10px;
}

.hero-text{
    width:68%;
    max-width:980px;
    color:#fff;
    padding-bottom:40px;
}

.eyebrow{
    display:flex;
    align-items:center;
    gap:18px;
    margin:0 0 34px;
    color:rgba(255,255,255,.82);
    font-size:17px;
    font-weight:500;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.eyebrow::before{
    content:"";
    width:42px;
    height:3px;
    background:var(--green);
    border-radius:10px;
}

.hero-title{
    max-width:920px;
    margin:0 0 16px;
    font-size:clamp(50px,4vw,62px);
    line-height:1.08;
    letter-spacing:-2.2px;
    font-weight:900;
    color:#fff;
    margin-bottom:20px;
}

.hero-highlight{
    max-width:920px;
    margin:0 0 24px;
    font-size:clamp(34px,2.8vw,44px);
    line-height:1.15;
    letter-spacing:-1.4px;
    font-weight:800;
    color:var(--blue-light);
    margin-bottom:34px;
}

.hero-subline{
    max-width:760px;
    margin:0 0 38px;
    font-size:20px;
    line-height:1.7;
    color:rgba(255,255,255,.94);
}

.hero-buttons{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
    margin-bottom:70px;
}

.hero-features{
    display:flex;
    gap:42px;
    max-width:980px;
    width:100%;
    padding:28px 34px;
    border-radius:16px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
}

.hero-features div{
    min-width:210px;
}

.hero-features strong{
    display:block;
    margin-bottom:6px;
    color:#fff;
    font-size:16px;
    font-weight:900;
}

.hero-features span{
    display:block;
    color:rgba(255,255,255,.82);
    font-size:14px;
    line-height:1.35;
}
.hero-feature{
    display:flex;
    align-items:flex-start;
    gap:18px;
    flex:1;
    min-width:0;
}
.hero-feature svg{
    width:38px;
    height:38px;
    stroke-width:1.6;
    color:rgba(255,255,255,.95);
    flex-shrink:0;
}

.hero-feature i{
    width:28px;
    height:28px;
    color:rgba(255,255,255,.92);
    flex-shrink:0;
}

.hero-feature strong{
    display:block;
    margin-bottom:4px;
    font-size:18px;
    font-weight:800;
}

.hero-feature span{
    display:block;
    font-size:15px;
    color:rgba(255,255,255,.78);
}

@media(max-width:1400px){
    .hero{
        background:url("../img/hero-laptop.jpg") right top / cover no-repeat, var(--blue-dark);
    }

    .hero-text{
        width:62%;
        max-width:820px;
    }

    .hero-title{
        font-size:clamp(50px,4vw,66px);
    }

    .hero-highlight{
        font-size:clamp(38px,3.2vw,50px);
    }
}

@media(max-width:1100px){
    .main-nav{
        display:none;
    }

    .hero-text{
        width:70%;
        max-width:760px;
    }
}

@media(max-width:900px){
    .hero{
        min-height:auto;
        background:url("../img/hero-mobile-2.jpg?v=1.0.3") center top / cover no-repeat, var(--blue-dark);
    }

    .hero-content{
        min-height:auto;
        padding:80px 0 120px;
    }

    .hero-text{
        width:100%;
        max-width:none;
        padding-bottom:0;
    }

    .hero-title{
        font-size:44px;
        letter-spacing:-1px;
    }

    .hero-highlight{
        font-size:34px;
        letter-spacing:-.6px;
    }

    .hero-subline{
        font-size:18px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .hero-buttons .btn{
        width:100%;
    }

    .hero-features{
        flex-direction:column;
        gap:18px;
    }
}