:root{

    --accent:#7a2cff;
    --accent2:#b18cff;

    --background:#050008;

    --text:#e8ddff;
    --muted:#b9acd8;

    --panel:rgba(20,10,35,.72);

    --line:rgba(255,255,255,.10);

    --radius:20px;

    --shadow:
    0 0 40px rgba(122,44,255,.18);

}



*{

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    margin:0;

    min-height:100vh;

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

    color:var(--text);


    background:

    radial-gradient(
        circle at top,
        rgba(122,44,255,.35),
        transparent 35%
    ),

    linear-gradient(
        180deg,
        #100020,
        #000
    );


    overflow-x:hidden;

}





.background{

    position:fixed;

    inset:0;

    z-index:-1;


    background:

    radial-gradient(
        circle at 20% 30%,
        rgba(122,44,255,.18),
        transparent 35%
    ),

    radial-gradient(
        circle at 80% 60%,
        rgba(177,140,255,.12),
        transparent 30%
    );


    animation:bgmove 20s infinite alternate;

}




.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:60px 20px;

}





.hero-content{

    width:min(1200px,95vw);

}





.logo{

    width:420px;

    max-width:85vw;


    filter:

    drop-shadow(
    0 0 35px rgba(122,44,255,.65)
    );


}





h1{

    font-family:Oxanium, sans-serif;

    font-size:75px;

    margin:25px 0 10px;

    font-weight:900;

}





h1 span{

    display:block;

    font-size:38px;

    color:var(--accent2);

    margin-top:10px;

}





p{

    color:var(--muted);

    font-size:18px;

    line-height:1.7;

}





.buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    margin:35px 0;

    flex-wrap:wrap;

}





.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;


    padding:

    14px 26px;


    border-radius:15px;


    color:white;


    text-decoration:none;


    font-weight:900;


    font-family:Oxanium;


    background:

    rgba(122,44,255,.18);


    border:

    1px solid rgba(177,140,255,.35);


    transition:.25s;


}





.btn:hover{

    transform:translateY(-4px);


    box-shadow:

    0 0 30px rgba(122,44,255,.55);


}





.btn.primary{

    background:

    linear-gradient(
    135deg,
    #7a2cff,
    #b18cff
    );


    border:none;

}





.server-box{

    margin-top:45px;


    padding:30px;


    border-radius:22px;


    background:

    rgba(20,10,35,.75);


    border:

    1px solid var(--line);


    box-shadow:var(--shadow);


    backdrop-filter:blur(15px);

}





.status{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

}





.dot{

    width:15px;

    height:15px;


    border-radius:50%;


    background:#42ff65;


    box-shadow:

    0 0 20px #42ff65;

}





.ips{

    display:flex;

    justify-content:center;

    gap:40px;

    margin-top:30px;

}





.ips div{

    padding:20px;

    border-radius:15px;


    background:

    rgba(255,255,255,.04);


    min-width:220px;

}





nav{

    position:sticky;

    top:0;

    z-index:10;


    display:flex;

    justify-content:center;

    gap:15px;


    padding:15px;


    background:

    rgba(5,0,8,.75);


    backdrop-filter:blur(15px);


}





nav a{

    color:var(--text);


    text-decoration:none;


    padding:10px 20px;


    border-radius:999px;


    border:

    1px solid var(--line);


    transition:.2s;

}




nav a:hover{

    background:

    rgba(122,44,255,.25);

}





.section{

    width:min(1200px,92vw);

    margin:90px auto;

}





.card{

    padding:30px;


    border-radius:var(--radius);


    background:

    var(--panel);


    border:

    1px solid var(--line);


    backdrop-filter:blur(15px);


    box-shadow:

    var(--shadow);

}





.card h2,
.card h3{

    font-family:Oxanium;

}





.grid{

    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;

}





.big{

    text-align:center;

}





.small-logo{

    width:140px;


    filter:

    drop-shadow(
    0 0 20px rgba(122,44,255,.6)
    );

}





footer{

    padding:50px 20px;


    text-align:center;


    background:#050008;


    border-top:

    1px solid var(--line);

}





.footer-logo{

    width:130px;


    margin-bottom:20px;

}





.footer-buttons{


    display:flex;


    justify-content:center;


    gap:15px;


    flex-wrap:wrap;


    margin-top:25px;


}