* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}



body {

    margin: 0;

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


    background:
    radial-gradient(
        circle at top,
        #10252b 0%,
        #050505 45%,
        #020202 100%
    );


    color: white;

    min-height:100vh;

}



a {

    color: inherit;

    text-decoration:none;

}



/* HEADER */


header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:
    25px 8%;


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


    backdrop-filter:
    blur(20px);


}




.logo {

    display:flex;

    align-items:center;

    gap:15px;


    font-size:26px;

    font-weight:700;

}



.logo img {

    width:48px;

    height:48px;


}



/* MENU */


nav {

    display:flex;

    gap:25px;

}



nav a {

    color:#999;

    transition:.3s;

}



nav a:hover {

    color:#00ffff;

}



/* LANGUAGE */


.languages button {


    background:
    rgba(255,255,255,0.05);


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


    color:white;


    padding:
    8px 14px;


    border-radius:30px;


    cursor:pointer;


    margin-left:5px;


}



.languages button:hover {

    border-color:#00ffff;

}



/* HERO */


.hero {

    text-align:center;


    padding:
    120px 20px 80px;


}



.hero h1 {


    font-size:

    clamp(40px,7vw,75px);



    margin-bottom:25px;



    background:

    linear-gradient(
    90deg,
    #00ffff,
    #ffffff,
    #00ffff
    );



    background-size:200%;



    -webkit-background-clip:text;


    color:transparent;


    animation:
    glow 5s infinite linear;


}



@keyframes glow {


0% {

background-position:0%;

}


100% {

background-position:200%;

}


}



.hero p {


    color:#aaa;


    font-size:22px;


}



/* BUTTON */


.main-btn {


    margin-top:35px;


    padding:
    16px 45px;


    border-radius:50px;


    border:none;


    background:#00ffff;


    color:#000;


    font-weight:700;


    font-size:16px;


    cursor:pointer;


    transition:.3s;


}



.main-btn:hover {


    transform:
    translateY(-5px);


    box-shadow:
    0 0 30px #00ffff;


}



/* CARDS */


.cards {


    display:flex;


    justify-content:center;


    gap:25px;


    padding:
    50px 8%;


    flex-wrap:wrap;


}



.card {


    width:320px;


    padding:35px;



    background:

    rgba(255,255,255,0.05);



    border:

    1px solid rgba(255,255,255,0.1);



    border-radius:25px;



    backdrop-filter:

    blur(20px);



    transition:.3s;



}



.card:hover {


    transform:
    translateY(-10px);



    border-color:#00ffff;


}



.card p {


    color:#999;

}



/* DASHBOARD */


.dashboard {


    padding:
    70px 8%;


    text-align:center;


}



.stats {


    display:flex;


    justify-content:center;


    flex-wrap:wrap;


    gap:20px;


    margin-top:40px;


}




.stats div {


    min-width:220px;


    padding:30px;



    background:

    rgba(255,255,255,0.04);



    border-radius:20px;



    border:

    1px solid rgba(255,255,255,0.1);



}



.stats strong {


    font-size:30px;


    color:#00ffff;


}





/* FOOTER */


footer {


    margin-top:80px;


    padding:40px;


    text-align:center;


    border-top:

    1px solid rgba(255,255,255,0.1);



    color:#777;


}



footer a:hover {


    color:#00ffff;


}



/* MOBILE */


@media(max-width:900px){


header {


    flex-direction:column;


    gap:25px;


}



nav {


    flex-wrap:wrap;


    justify-content:center;


}



.hero h1 {


    font-size:42px;


}


}
.status-good {

display:inline-block;

margin-top:30px;

padding:15px 35px;

border-radius:40px;

background:
rgba(0,255,150,0.1);


border:
1px solid rgba(0,255,150,0.3);


color:#00ff99;

font-weight:700;

}



.online {

color:#00ff99;

font-size:20px;

font-weight:700;

}
.contact-form {

display:flex;

flex-direction:column;

gap:20px;

max-width:500px;

margin:auto;

}



.contact-form input,
.contact-form textarea {


background:

rgba(255,255,255,0.05);


border:

1px solid rgba(255,255,255,0.15);


border-radius:15px;


padding:15px;


color:white;


font-size:16px;


}



.contact-form textarea {

height:150px;

resize:none;

}



.contact-form input:focus,
.contact-form textarea:focus {


outline:none;


border-color:#00ffff;


}
.footer-links {

margin:20px;

}


.footer-links a {

color:#888;

margin:10px;

}


.footer-links a:hover {

color:#00ffff;

}