* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}


body {

    background:
    radial-gradient(circle at top,#111827,#050505 50%);

    color:white;

    min-height:100vh;

}


/* HEADER */

.header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 60px;

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

    backdrop-filter:blur(10px);

}



.logo {

    font-size:30px;

    font-weight:800;

    letter-spacing:1px;

}



nav {

    display:flex;

    align-items:center;

    gap:25px;

}



nav a {

    color:#aaa;

    text-decoration:none;

    transition:.3s;

}



nav a:hover {

    color:white;

}



nav button {

    background:#00ff88;

    color:#000;

    border:none;

    padding:14px 25px;

    border-radius:12px;

    font-weight:bold;

    cursor:pointer;

}



/* HERO */


.hero {

    text-align:center;

    padding:110px 20px 80px;

}



.hero h1 {

    font-size:65px;

    line-height:1.1;

    margin-bottom:25px;

}



.hero p {

    font-size:24px;

    color:#999;

    margin-bottom:45px;

}



/* SEARCH */


.search-box {

    display:flex;

    justify-content:center;

    gap:15px;

}



.search-box input {

    width:550px;

    padding:20px;

    border-radius:15px;

    border:1px solid #333;

    background:#0b0b0b;

    color:white;

    font-size:16px;

}



.search-box button {

    padding:20px 35px;

    border-radius:15px;

    border:none;

    background:#00ff88;

    font-weight:bold;

    cursor:pointer;

}



/* DASHBOARD */


.dashboard {

    display:grid;

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

    gap:25px;

    padding:50px 60px;

}



.panel {


    background:

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


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


    padding:35px;


    border-radius:25px;


    backdrop-filter:blur(15px);


    transition:.3s;


}



.panel:hover {


    transform:translateY(-8px);


    border-color:#00ff88;


}



.panel h2 {

    margin-bottom:20px;

}



.panel p {

    color:#aaa;

    line-height:1.6;

}



/* SCORE */


.score {

    text-align:center;

    padding:90px 20px;

}



.score h2 {

    color:#aaa;

}



.score div {


    font-size:130px;


    font-weight:900;


    color:#00ff88;


}



.score p {

    color:#aaa;

}



footer {

    text-align:center;

    padding:40px;

    color:#555;

}



/* MOBILE */


@media(max-width:900px){


.header{

flex-direction:column;

gap:25px;

}


.hero h1{

font-size:40px;

}



.dashboard{

grid-template-columns:1fr;

}


.search-box{

flex-direction:column;

}


.search-box input{

width:100%;

}


}