#particles-js{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:-1;
}
body{
font-family: Comic Snas MS, sans-serif;
background: linear-gradient(-45deg,#111,#1a1a1a,#111,#1a1a1a);
background-size:400% 400%;
animation:bgmove 12s infinite alternate;
color:white;
text-align:center;
margin:0;
overflow-x:hidden;
}

@keyframes bgmove{
0%{background-position:0% 50%;}
100%{background-position:100% 50%;}
}

header{
background:linear-gradient(90deg,#ff6a00,#ff9500);
padding:40px;
animation:fadeDown 1s ease;
}

.roles{
display:flex;
justify-content:center;
gap:30px;
padding:40px;
flex-wrap:wrap;
}

.card{
background:#1e1e1e;
padding:25px;
border-radius:12px;
width:250px;
box-shadow:0 0 20px rgba(255,140,0,0.3);
opacity:0;
transform:translateY(40px);
animation:cardAppear 1s forwards;
}

.card:nth-child(2){
animation-delay:0.4s;
}

@keyframes cardAppear{
to{
opacity:1;
transform:translateY(0);
}
}

.card:hover{
transform:scale(1.05);
box-shadow:0 0 30px rgba(255,150,0,0.8);
transition:0.3s;
}

.counter{
padding:40px;
animation:fadeUp 1.2s ease;
}

#count{
font-size:70px;
color:#ff9500;
margin:20px;
transition:0.2s;
}

button{
background:#ff7b00;
border:none;
padding:15px 30px;
font-size:18px;
border-radius:10px;
cursor:pointer;
color:white;
transition:0.2s;
}

button:hover{
background:#ffa200;
transform:scale(1.08);
box-shadow:0 0 20px rgba(255,140,0,0.8);
}

button:active{
transform:scale(0.9);
}

@keyframes fadeDown{
from{opacity:0;transform:translateY(-40px);}
to{opacity:1;transform:translateY(0);}
}

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