.hero{


    min-height:100vh;


    display:grid;


    grid-template-columns:1fr 1fr;


    align-items:center;


    gap:60px;


    padding-top:180px;


    padding-bottom:80px;


}





.hero-content{


    animation:

    fadeUp .8s ease;


}



.badge{


    display:inline-block;


    background:

    rgba(123,223,242,.15);


    color:var(--cyan);


    padding:10px 20px;


    border-radius:999px;


    margin-bottom:25px;


    border:

    1px solid rgba(123,223,242,.3);



}




.hero h1{


    font-size:

    clamp(45px,6vw,80px);


    line-height:1.4;


    font-weight:900;


}



.hero h1 span{


    color:var(--yellow);


}





.hero h2{


    font-size:90px;


    font-weight:900;


    color:white;


    margin-top:-20px;


    text-shadow:

    0 10px 40px rgba(0,0,0,.25);



}



.hero p{


    margin-top:25px;


    font-size:20px;


    line-height:2;


    color:var(--text-muted);


    max-width:600px;



}





.hero-buttons{


    margin-top:45px;


    display:flex;


    gap:20px;


}



.primary-btn,


.secondary-btn{


    padding:16px 32px;


    border-radius:999px;


    font-weight:700;


    transition:.3s;


}





.primary-btn{


    background:

    linear-gradient(

        135deg,

        var(--primary),

        var(--cyan)

    );


    color:#06111f;



}



.primary-btn:hover{


    transform:

    translateY(-5px);


    box-shadow:

    0 20px 40px rgba(58,134,255,.4);



}





.secondary-btn{


    border:

    1px solid rgba(255,255,255,.2);



    background:

    rgba(255,255,255,.05);


}




.secondary-btn:hover{


    background:

    rgba(255,255,255,.12);



}






/* Right Side */


.hero-art{


    display:flex;


    justify-content:center;


}



.game-window{


    width:420px;


    height:420px;


    border-radius:50px;


    background:

    linear-gradient(

        145deg,

        rgba(255,255,255,.15),

        rgba(255,255,255,.04)

    );


    backdrop-filter:blur(15px);



    border:

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



    position:relative;



    box-shadow:

    0 40px 100px rgba(0,0,0,.3);



    animation:

    float 5s ease-in-out infinite;



}




.controller{


    position:absolute;


    bottom:50px;


    right:50px;


    font-size:100px;



}





.character{


    position:absolute;


    left:50%;


    top:45%;


    transform:translate(-50%,-50%);


}





.head{


    width:120px;


    height:120px;


    background:var(--yellow);


    border-radius:45%;



}



.body{


    width:160px;


    height:120px;


    background:var(--primary);


    border-radius:50px;


    margin:auto;


}




@keyframes float{


    0%,100%{


        transform:translateY(0);


    }


    50%{


        transform:translateY(-20px);


    }


}




@keyframes fadeUp{


    from{


        opacity:0;


        transform:translateY(40px);


    }


    to{


        opacity:1;


        transform:translateY(0);


    }


}






@media(max-width:900px){


    .hero{


        grid-template-columns:1fr;


        text-align:center;


    }



    .hero p{


        margin:auto;


    }



    .hero-buttons{


        justify-content:center;


    }



    .hero-art{


        display:none;


    }


}




@media(max-height:800px) and (min-width:900px){


    .hero{


        padding-top:140px;


    }



    .hero h2{


        font-size:70px;


    }



    .game-window{


        width:340px;


        height:340px;


    }


}