@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

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

body{
    height:100vh;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    background:#07080f;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
}

.background{
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 20% 20%, rgba(130,80,255,.25), transparent 30%),
        radial-gradient(circle at 80% 80%, rgba(90,0,255,.2), transparent 30%);
    filter:blur(40px);
    animation:move 12s infinite alternate;
}

@keyframes move{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.2);
    }
}

.container{
    position:relative;
    z-index:2;
    width:min(650px,90%);
    text-align:center;
    animation:fadeIn 1s ease;
}

.logo img{
    width:140px;
    margin-bottom:25px;
    animation:float 4s infinite ease-in-out;
}

h1{
    font-size:3rem;
    margin-bottom:15px;
    background:linear-gradient(90deg,#ffffff,#a855f7);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

p{
    color:#b3b3b3;
    line-height:1.7;
    margin-bottom:35px;
}

.progress-info{
    display:flex;
    justify-content:space-between;
    margin-bottom:10px;
    font-size:.95rem;
}

.progress{
    width:100%;
    height:14px;
    background:rgba(255,255,255,.08);
    border-radius:50px;
    overflow:hidden;
    margin-bottom:35px;
    border:1px solid rgba(255,255,255,.05);
}

.progress-bar{
    height:100%;
    width:78%;
    border-radius:50px;
    background:linear-gradient(90deg,#7c3aed,#c084fc);
    box-shadow:0 0 20px rgba(168,85,247,.8);
    transition:width .5s ease;
}

.discord-btn{
    display:inline-block;
    padding:15px 30px;
    text-decoration:none;
    color:white;
    font-weight:600;
    border-radius:14px;
    background:linear-gradient(135deg,#7c3aed,#9333ea);
    transition:.3s;
}

.discord-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 0 30px rgba(168,85,247,.6);
}

.title{
    font-size:4rem;
    font-weight:700;
    margin-bottom:10px;
    background:linear-gradient(90deg,#ffffff,#a855f7);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.typing-container{
    font-size:1.4rem;
    font-weight:500;
    color:#c084fc;
    margin-bottom:30px;
    min-height:35px;
}

.cursor{
    animation:blink .8s infinite;
}

@keyframes blink{
    50%{
        opacity:0;
    }
}

#tsparticles{
    position:fixed;
    inset:0;
    z-index:0;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes float{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-10px);
    }
}