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

body{
    font-family:Inter,sans-serif;
    background:#05060d;
    overflow:hidden;
    color:white;
}

/* -------------------------- */
/* Background */
/* -------------------------- */

body::before{
    content:"";
    position:fixed;
    inset:0;

    background:
    radial-gradient(circle at 20% 20%,rgba(126,87,255,.20),transparent 35%),
    radial-gradient(circle at 80% 70%,rgba(0,255,255,.08),transparent 30%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.02),transparent 70%);

    animation:bgMove 18s ease-in-out infinite alternate;
    z-index:-4;
}

@keyframes bgMove{
    from{
        transform:scale(1) rotate(0deg);
    }
    to{
        transform:scale(1.25) rotate(6deg);
    }
}

/* GRID */

.grid{
    position:fixed;
    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:70px 70px;

    animation:gridMove 30s linear infinite;

    z-index:-3;
}

@keyframes gridMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(70px);
    }

}

/* Blur */

.blur1,
.blur2{

position:fixed;
width:700px;
height:700px;
border-radius:50%;
filter:blur(150px);
opacity:.3;
pointer-events:none;

}

.blur1{

background:#6e56ff;
left:-200px;
top:-150px;

animation:floating1 12s ease-in-out infinite;

}

.blur2{

background:#00d4ff;
right:-250px;
bottom:-200px;

animation:floating2 16s ease-in-out infinite;

}

@keyframes floating1{

50%{

transform:translate(120px,60px);

}

}

@keyframes floating2{

50%{

transform:translate(-100px,-120px);

}

}

/* scan */

.scan{

position:fixed;
left:0;
right:0;
height:2px;

background:linear-gradient(90deg,
transparent,
#7d6cff,
white,
#7d6cff,
transparent);

box-shadow:0 0 30px #8e7bff;

animation:scan 8s linear infinite;

opacity:.4;

}

@keyframes scan{

from{
top:-10%;
}

to{
top:110%;
}

}

/* -------------------------- */
/* NAVBAR */
/* -------------------------- */

nav{

position:fixed;

top:20px;
left:50%;
transform:translateX(-50%);

width:min(1200px,92%);
padding:18px 30px;

display:flex;
justify-content:space-between;
align-items:center;

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

backdrop-filter:blur(25px);

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

border-radius:20px;

box-shadow:
0 10px 40px rgba(0,0,0,.35);

z-index:10;

}

.logo{

font-size:22px;
font-weight:800;
letter-spacing:1px;

}

.logo span{

color:#7c6cff;

}

.menu{

display:flex;
gap:35px;

}

.menu a{

text-decoration:none;
color:#bdbdd6;

transition:.35s;

position:relative;

}

.menu a:hover{

color:white;

}

.menu a::after{

content:"";

position:absolute;

left:0;
bottom:-5px;

width:0;

height:2px;

background:#7d6cff;

transition:.4s;

}

.menu a:hover::after{

width:100%;

}

/* -------------------------- */

.hero{

height:100vh;

display:flex;
justify-content:center;
align-items:center;

padding:40px;

}

.card{

width:min(850px,90%);
padding:70px;

background:rgba(255,255,255,.06);

backdrop-filter:blur(35px);

border-radius:35px;

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

text-align:center;

box-shadow:
0 20px 70px rgba(0,0,0,.5);

transition:transform .2s;

animation:appear 1.4s ease;

}

@keyframes appear{

from{

opacity:0;
transform:translateY(40px) scale(.96);

}

to{

opacity:1;
transform:translateY(0) scale(1);

}

}

h1{

font-size:58px;
margin-bottom:25px;

font-weight:900;

background:linear-gradient(90deg,#fff,#8f7cff,#67dfff);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

p{

font-size:21px;

line-height:1.8;

color:#d4d4ea;

max-width:650px;

margin:auto;

}

.status{

margin-top:45px;

display:inline-flex;

padding:10px 22px;

border-radius:50px;

background:rgba(124,108,255,.15);

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

font-size:14px;

letter-spacing:2px;

text-transform:uppercase;

}

/* -------------------------- */

footer{

position:fixed;
bottom:15px;
left:0;
right:0;

text-align:center;

font-size:14px;

color:#80809d;

letter-spacing:.5px;

}

/* -------------------------- */

@media(max-width:900px){

.menu{

display:none;

}

.card{

padding:40px;

}

h1{

font-size:40px;

}

p{

font-size:18px;

}

}

/* Language Switcher */

#languageSwitcher{

    position:relative;

    width:55px;
    height:38px;

    border-radius:14px;

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

    background:
    linear-gradient(
        135deg,
        rgba(124,108,255,.25),
        rgba(0,212,255,.15)
    );

    backdrop-filter:blur(15px);

    color:white;

    font-size:14px;
    font-weight:600;

    cursor:pointer;

    transition:
    .35s ease;

    overflow:hidden;

    box-shadow:
    0 0 20px rgba(124,108,255,.15);

}


/* Светящийся слой */

#languageSwitcher::before{

    content:"";

    position:absolute;

    inset:-50%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:translateX(-100%)
    rotate(25deg);

    transition:.6s;

}



/* Hover */

#languageSwitcher:hover{

    transform:
    translateY(-2px)
    scale(1.05);

    border-color:
    rgba(124,108,255,.6);


    box-shadow:

    0 0 25px rgba(124,108,255,.45),
    inset 0 0 15px rgba(255,255,255,.1);

}



#languageSwitcher:hover::before{

    transform:
    translateX(100%)
    rotate(25deg);

}



/* Click */

#languageSwitcher:active{

    transform:
    scale(.95);

}