.hero{

    position:relative;

    min-height:100vh;

    padding-top:90px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(15,15,15,.78),
            rgba(15,15,15,.78)
        ),
        url("../images/hero.jpg");

    background-size:cover;
    background-position:center;

}

.hero-overlay{

    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(255,255,255,.05),
        transparent 45%);

}

.hero-content{

    position:relative;

    display:grid;
    grid-template-columns:1.1fr .9fr;

    gap:80px;

    align-items:center;

    z-index:2;

}

.hero-left{

    color:#fff;

}

.hero-badge{

    display:inline-block;

    padding:10px 18px;

    border:1px solid rgba(255,255,255,.18);

    border-radius:999px;

    font-size:14px;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:30px;

}

.hero h1{

    font-size:64px;

    line-height:1.05;

    font-weight:800;

    margin-bottom:28px;

}

.hero p{

    font-size:20px;

    max-width:650px;

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

    margin-bottom:42px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:60px;

}

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:28px;

    color:#d7d7d7;

    font-size:15px;

}

.hero-right{

    display:flex;

    justify-content:flex-end;

}

.hero-letter{

    font-size:520px;

    font-weight:900;

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

    line-height:1;

    user-select:none;

}