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

body{
background:#210f1f;
color:white;
overflow-x:hidden;
}

/* LOADER */

#loader{
position:fixed;
width:100%;
height:100vh;
background:#1e0f21;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
z-index:999;
}

.loader{
width:80px;
height:80px;
border:6px solid #ba58f2;
border-top:6px solid transparent;
border-radius:50%;
animation:spin 1s linear infinite;
}

@keyframes spin{
to{transform:rotate(360deg)}
}

/* HERO */

.hero{
text-align:center;
padding:120px 20px;
}

/* AVATAR */

.avatar-wrapper{
position:relative;
display:inline-block;
animation:float 5s ease-in-out infinite;
}

.logo{
width:230px;
border-radius:20px;
transition:transform .2s;
}

/* GLOW EFFECT */

.glow{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border-radius:20px;
background:radial-gradient(circle,rgba(193, 88, 242, 0.8),transparent 70%);
filter:blur(30px);
opacity:.7;
animation:pulse 3s infinite;
z-index:-1;
}

@keyframes pulse{
0%{opacity:.4; transform:scale(1)}
50%{opacity:1; transform:scale(1.1)}
100%{opacity:.4; transform:scale(1)}
}

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

h1{
font-size:48px;
margin-top:20px;
}

p{
opacity:.8;
margin-top:10px;
}

/* BUTTONS */

.buttons{
margin-top:30px;
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
}

.btn{
padding:14px 30px;
background:#672470;
border-radius:10px;
color:white;
text-decoration:none;
transition:.3s;
}

.btn:hover{
transform:scale(1.1);
box-shadow:0 0 20px #550879;
}

/* SECTIONS */

.section{
padding:80px 20px;
text-align:center;
}

.dark{
background:#311535;
}

.grid{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:30px;
margin-top:40px;
}

.card{
background:#371b38;
padding:30px;
border-radius:15px;
width:260px;
transition:.3s;
}

.card:hover{
transform:translateY(-10px);
box-shadow:0 0 30px rgba(229, 88, 242, 0.5);
}

footer{
text-align:center;
padding:40px;
opacity:.6;
}

/* PARTICLES */

#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}

body{
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
}

img{
pointer-events:none;
}