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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:
        linear-gradient(rgba(4,10,18,.55),rgba(4,10,18,.90)),
        url("../img/backgrounds/hero-background-temp.jpg")
        center center/cover no-repeat;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:40px;

}

.hero-left{

    max-width:650px;

}

.hero-logo{

    width:220px;

    margin-bottom:35px;

}

.hero-tag{

    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

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

    margin-bottom:30px;

    font-size:13px;

    text-transform:uppercase;

}

.hero h1{

    font-size:64px;

    line-height:1.05;

    margin-bottom:30px;

}

.hero p{

    font-size:22px;

    line-height:1.8;

    color:#E5E5E5;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:40px;

}

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:45px;

}

.hero-features span{

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

    padding:14px 22px;

    border-radius:40px;

}

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-placeholder{

    position:relative;

    width:520px;

    height:650px;

}

.placeholder-circle{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(circle,#078B3A55,transparent);

    top:90px;

    left:50px;

}

.placeholder-phone{

    position:absolute;

    width:220px;

    height:430px;

    background:white;

    border-radius:35px;

    right:30px;

    top:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#091A28;

    font-weight:bold;

    box-shadow:0 25px 60px rgba(0,0,0,.45);

}

.placeholder-player{

    position:absolute;

    width:260px;

    height:520px;

    left:10px;

    top:40px;

    border:2px dashed rgba(255,255,255,.4);

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    font-weight:bold;

}

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

.hero-art{

    position:relative;

    width:560px;

    height:700px;

}

.hero-player{

    position:absolute;

    left:0;

    bottom:0;

    width:360px;

    z-index:2;

    filter:drop-shadow(0 25px 35px rgba(0,0,0,.45));

}

.hero-phone{

    position:absolute;

    right:0;

    top:90px;

    width:230px;

    z-index:5;

    filter:drop-shadow(0 25px 40px rgba(0,0,0,.5));

}

.hero-glow{

    position:absolute;

    width:520px;

    left:40px;

    top:90px;

    opacity:.8;

    z-index:1;

}

.hero-particles{

    position:absolute;

    inset:0;

    width:100%;

    opacity:.55;

    z-index:4;

    pointer-events:none;

}