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

body{

background:linear-gradient(
180deg,
#090014,
#120022,
#05000d
);

color:white;

overflow-x:hidden;

}

/* LOADER */

.loader{

position:fixed;
width:100%;
height:100%;

background:#05000d;

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

z-index:999;

}

.spinner{

width:50px;
height:50px;

border:5px solid #9333ea;
border-top:5px solid transparent;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}

/* NAVBAR */

.navbar{

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

padding:20px 10%;

background:rgba(0,0,0,0.5);
backdrop-filter:blur(10px);

position:sticky;
top:0;

z-index:100;

}

.navbar ul{

display:flex;
gap:30px;

list-style:none;

}

.navbar a{

text-decoration:none;
color:white;

transition:0.3s;

}

.navbar a:hover{

color:#9333ea;

}

/* HEADER */

header{

text-align:center;

padding:150px 20px;

}

header h1{

font-size:60px;

background:linear-gradient(90deg,#c084fc,#9333ea);

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

}

/* BUTTON */

.btn{

display:inline-block;

margin-top:40px;

padding:15px 40px;

border-radius:40px;

background:#7e22ce;

color:white;

text-decoration:none;

transition:0.4s;

}

.btn:hover{

transform:scale(1.05);

box-shadow:0 0 20px #9333ea;

}

/* CARDS */

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

padding:50px 10%;

}

.card{

background:rgba(255,255,255,0.05);

padding:30px;

border-radius:15px;

text-align:center;

transition:0.4s;

backdrop-filter:blur(10px);

}

.card:hover{

transform:translateY(-10px) rotateX(5deg);

box-shadow:0 0 25px rgba(147,51,234,0.6);

}

.card img{

width:120px;
height:120px;

border-radius:50%;

border:3px solid #9333ea;

object-fit:cover;

margin-bottom:15px;

}

/* STATS */

.stat h3{

font-size:40px;
color:#c084fc;

}

/* SECTION */

section{

padding:80px 0;

}

h2{

text-align:center;

color:#c084fc;

margin-bottom:30px;

}

/* FOOTER */

footer{

text-align:center;

padding:30px;

background:#020005;

}

/* SCROLL ANIMATION */

.reveal{

opacity:0;
transform:translateY(40px);
transition:1s;

}

.reveal.active{

opacity:1;
transform:translateY(0);

}

/* CURSOR */

.cursor{

position:fixed;

width:20px;
height:20px;

border-radius:50%;

background:#9333ea;

pointer-events:none;

transform:translate(-50%,-50%);

mix-blend-mode:screen;

}