*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    font-family: "Inter", Arial, sans-serif;

    background:#050816;

    color:#F8FAFC;

    overflow-x:hidden;

}


/* BARRA DE NAVEGAÇÃO */


.navbar{

    width:90%;

    max-width:1200px;

    margin:25px auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 30px;


    background:rgba(15,23,42,0.55);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:20px;


}


.logo{

    font-size:26px;

    font-weight:800;

    letter-spacing:-1px;

}


.logo span{

    background:linear-gradient(
        to right,
        #2563EB,
        #7C3AED,
        #10B981
    );

    -webkit-background-clip:text;

    color:transparent;

}




nav{

    display:flex;

    gap:35px;

}



nav a{

    color:#94A3B8;

    text-decoration:none;

    transition:.3s;

}



nav a:hover{

    color:white;

}





button{


    border:none;

    cursor:pointer;


    padding:14px 30px;


    border-radius:12px;


    font-size:15px;

    font-weight:600;


    color:white;


    background:

    linear-gradient(
        to right,
        #2563EB,
        #7C3AED
    );


    transition:.3s;


}



button:hover{


    transform:translateY(-3px);


    box-shadow:

    0 15px 40px rgba(37,99,235,.35);


}





/* HERO */


.hero{


    min-height:90vh;


    width:90%;


    max-width:1200px;


    margin:auto;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:50px;


}





.hero-content{

    max-width:600px;

}




.hero-content h1{


    font-size:70px;


    line-height:1.05;


    letter-spacing:-3px;


}





.hero-content p{


    margin-top:25px;


    color:#94A3B8;


    font-size:20px;


    line-height:1.7;


}





.btn-primary{


    margin-top:35px;


}







/* DASHBOARD */


.hero-dashboard{


    width:350px;


    padding:30px;


    border-radius:25px;


    background:

    rgba(15,23,42,.7);


    backdrop-filter:blur(20px);


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


    box-shadow:

    0 0 80px rgba(124,58,237,.25);


    animation:

    float 4s infinite ease-in-out;


}



.dashboard-header{


    display:flex;


    justify-content:space-between;


    color:#10B981;


}



.dashboard-content{


    margin-top:50px;


}



.dashboard-content h2{


    font-size:60px;


    margin:15px 0;


}






/* CARDS */


.features{


    width:90%;


    max-width:1200px;


    margin:100px auto;


}



.section-title{


    text-align:center;


    margin-bottom:60px;


}



.section-title h2{


    font-size:45px;


}



.section-title p{


    color:#94A3B8;


    margin-top:15px;


}




.feature-grid{


    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:25px;


}



.feature-card{


    padding:35px;


    border-radius:25px;


    background:

    rgba(15,23,42,.65);


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


    transition:.4s;


}




.feature-card:hover{


    transform:translateY(-10px);


    border-color:#7C3AED;


    box-shadow:

    0 20px 50px rgba(124,58,237,.25);


}



.feature-card p{


    color:#94A3B8;


    margin-top:15px;


}






/* ENTRADAS */


.entradas{


    width:90%;


    max-width:1200px;


    margin:100px auto;


}





.matches{


    display:flex;


    justify-content:center;


}



.match-card{


    width:400px;


    padding:35px;


    border-radius:25px;


    background:

    rgba(15,23,42,.8);


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


}





.match-card span,


small{


    color:#94A3B8;


}




.analysis{


    margin:35px 0;


}



.analysis h4{


    font-size:25px;


    margin-top:10px;


}




.stats{


    display:flex;


    justify-content:space-between;


    margin-bottom:30px;


}



.stats strong{


    display:block;


    font-size:25px;


    margin-top:8px;


}






/* SOBRE */


.about,


.cta{


    width:90%;


    max-width:900px;


    margin:120px auto;


    text-align:center;


}



.about p{


    margin-top:20px;


    color:#94A3B8;


    font-size:18px;


    line-height:1.7;


}






footer{


    padding:40px;

    text-align:center;


    border-top:1px solid rgba(255,255,255,.08);


}





footer p{


    color:#94A3B8;


    margin:15px;


}





@keyframes float{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-20px);

    }

}





@media(max-width:900px){


.hero{

    flex-direction:column;

}



.hero-content h1{

    font-size:45px;

}


.feature-grid{

    grid-template-columns:1fr;

}


nav{

    display:none;

}


}/* RESPONSIVIDADE PARA CELULAR */

@media (max-width: 768px){


    .navbar{

        width:95%;

        padding:15px;

    }


    .logo{

        font-size:22px;

    }


    nav{

        display:none;

    }



    .hero{

        width:90%;

        flex-direction:column;

        text-align:center;

        min-height:auto;

        padding:50px 0;

    }



    .hero-content h1{

        font-size:40px;

        letter-spacing:-1px;

    }



    .hero-content p{

        font-size:16px;

    }



    .hero-dashboard{

        width:100%;

        max-width:350px;

    }





    .feature-grid{

        grid-template-columns:1fr;

    }



    .feature-card{

        width:100%;

    }





    .entradas{

        width:90%;

    }



    .matches{

        flex-direction:column;

        gap:20px;

    }



    .match-card{

        width:100%;

        padding:25px;

    }



    .section-title h2{

        font-size:30px;

    }



    .about h2,

    .cta h2{

        font-size:30px;

    }



}