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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:200px;

    position:relative;

    overflow:hidden;

}

.hero-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

.hero-content{

    max-width:620px;

}

.hero-badge{

    display:inline-block;

    padding:10px 18px;

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

    border-radius:999px;

    color:#009B77;

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

    font-size:15px;

    margin-bottom:28px;

}

.hero h1{

    font-size:74px;

    line-height:1.05;

    font-weight:800;

    letter-spacing:-0.03em;

    margin-bottom:30px;

}

.hero p{

    font-size:19px;

    line-height:1.8;

    color:#cfcfcf;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:45px;

}

.hero-features{

    display:flex;

    gap:35px;

    flex-wrap:wrap;

    color:#d7d7d7;

    font-weight:600;

}

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image-frame img{

    transition:.45s ease;

}

.hero-image-frame:hover img{

    transform:translateY(-8px) scale(1.02);

}
/* ===========================
BACKGROUND EFFECTS
=========================== */

.hero-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}

.blur{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.18;

}

.blur-one{

    width:420px;

    height:420px;

    background:#009B77;

    top:-120px;

    right:-100px;

}

.blur-two{

    width:300px;

    height:300px;

    background:#00d3a0;

    bottom:-100px;

    left:-80px;

}

.hero-content,
.hero-image{

    position:relative;

    z-index:2;

}

.hero-features li{
    display:flex;
    align-items:center;
    gap:8px;
    list-style:none;
}

.hero-features li::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#009B77;
    box-shadow:0 0 0 4px rgba(0,155,119,.12);
}