/* ===========================
   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:white;
    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:calc(100vh - 76px);
    overflow:hidden;
    background:url("../img/hero-desktop.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) 34%, rgba(3,20,47,.90) 48%, rgba(3,20,47,.58) 62%, rgba(3,20,47,.24) 76%, rgba(3,20,47,.06) 88%, rgba(3,20,47,0) 100%);
}

.hero-content{
    position:relative;
    z-index:5;
    min-height:calc(100vh - 76px);
    display:flex;
    align-items:center;
    padding-top:10px;
}

.hero-text{
    width:min(720px, 52%);
    color:white;
    padding-bottom:50px;
}

.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 h1{
    margin:0 0 30px;
    font-size:clamp(50px,4.6vw,78px);
    line-height:1.03;
    letter-spacing:-2.4px;
    font-weight:800;
}

.hero h1 span{
    color:var(--blue-light);
}

.hero-subline{
    max-width:680px;
    margin:0 0 10px;
    font-size:21px;
    line-height:1.55;
    color:rgba(255,255,255,.95);
}

.hero-subline.small{
    font-size:20px;
    margin-bottom:38px;
}

.hero-buttons{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
    margin-bottom:58px;
    padding:12px 22px;
    font-size:15px;
}

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

@media(max-width:1300px){
    .hero::before{
        background:radial-gradient(circle at 72% 34%, rgba(36,168,255,.28), transparent 32%), linear-gradient(90deg, rgba(3,20,47,1) 0%, rgba(3,20,47,.98) 30%, rgba(3,20,47,.88) 48%, rgba(3,20,47,.64) 62%, rgba(3,20,47,.34) 76%, rgba(3,20,47,.12) 90%, rgba(3,20,47,0) 100%);
    }
}

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

    .hero-text{
        width:min(650px, 68%);
    }
}

@media(max-width:760px){
    .site-header{
        height:86px;
    }

    .logo img,
    .nav>img{
        height:54px;
    }

    .nav-cta{
        display:none;
    }

    .hero{
        min-height:auto;
    }

    .hero::before{
        background:radial-gradient(circle at 74% 32%, rgba(36,168,255,.18), transparent 34%), linear-gradient(90deg, rgba(3,20,47,.98) 0%, rgba(3,20,47,.98) 34%, rgba(3,20,47,.90) 48%, rgba(3,20,47,.55) 62%, rgba(3,20,47,.18) 76%, rgba(3,20,47,.04) 88%, rgba(3,20,47,0) 100%);
    }

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

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

    .eyebrow{
        font-size:17px;
    }

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

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

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

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