.hero{

    position:relative;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px 20px 80px;

}


/* Content */

.hero-content{

    position:relative;

    z-index:5;

    width:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    margin-top:-110px;

}



/* Logo */

.heroLogo{

    width:720px;

    max-width:90vw;

    height:auto;

    margin:0;

    filter:
        drop-shadow(
            0 0 35px rgba(16,216,211,.35)
        );

}



/* Title */

.heroTitle{

    margin-top:-45px;

    margin-bottom:0;

    font-size:clamp(3rem,6vw,5.2rem);

    line-height:1.08;

    font-weight:700;


    background:

        linear-gradient(
            90deg,
            #1E88F5,
            #10D8D3
        );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



/* Text */

.heroText{

    margin-top:8px;

    max-width:760px;

    font-size:1.2rem;

    color:#cfd7df;

    line-height:1.8;

}



/* Buttons */

.buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:30px;

}



/* Mobile */

@media(max-width:768px){


    .hero{

        padding:80px 20px 60px;

    }



    .hero-content{

        margin-top:0;

    }



    .heroLogo{

        width:260px;

        max-width:80vw;

    }



    .heroTitle{

        margin-top:-15px;

        font-size:2.8rem;

    }



    .heroText{

        font-size:1rem;

        margin-top:10px;

    }



    .buttons{

        margin-top:30px;

    }

}