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

body{

font-family:Poppins;
background:#050505;
height:100vh;
overflow:hidden;
color:#fff;

}

body::before{

content:"";
position:absolute;
width:700px;
height:700px;
background:#990000;
filter:blur(180px);
opacity:.25;
top:-250px;
left:-200px;
animation:move 12s infinite alternate;

}

body::after{

content:"";
position:absolute;
width:500px;
height:500px;
background:#ff0000;
filter:blur(180px);
opacity:.18;
right:-200px;
bottom:-150px;
animation:move2 15s infinite alternate;

}

@keyframes move{

100%{

transform:translate(200px,120px);

}

}

@keyframes move2{

100%{

transform:translate(-250px,-180px);

}

}

header{

position:absolute;
top:0;
left:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:30px 80px;
z-index:10;

}

.logo{

font-size:30px;
font-family:Cinzel;
font-weight:bold;
color:#ff1f1f;

}

.logo i{

margin-right:10px;

}

nav a{

text-decoration:none;
color:#ddd;
margin-left:35px;
transition:.3s;

}

nav a:hover{

color:#ff1f1f;

}

.hero{

display:flex;
justify-content:center;
align-items:center;
height:100vh;

}

.glass{

width:800px;
padding:60px;
border-radius:25px;
background:rgba(255,255,255,.05);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.08);
text-align:center;
box-shadow:0 0 60px rgba(255,0,0,.15);

}

.glass h1{

font-size:65px;
font-family:Cinzel;
margin-bottom:20px;

}

.glass span{

color:#ff2b2b;
text-shadow:0 0 20px red;

}

.glass p{

font-size:19px;
line-height:34px;
opacity:.8;
margin-bottom:45px;

}

.buttons{

display:flex;
justify-content:center;
gap:25px;

}

.buttons a{

padding:16px 40px;
text-decoration:none;
border-radius:50px;
font-weight:bold;
transition:.4s;

}

.join{

background:#d40000;
color:white;
box-shadow:0 0 35px red;

}

.join:hover{

transform:translateY(-5px);
box-shadow:0 0 60px red;

}

.learn{

border:2px solid #ff1f1f;
color:white;

}

.learn:hover{

background:#ff1f1f;

}

.stats{

display:flex;
justify-content:space-around;
margin-top:60px;

}

.stats h2{

font-size:35px;
color:#ff3b3b;

}

.stats span{

opacity:.7;

}

.particles{

position:absolute;
width:100%;
height:100%;
overflow:hidden;

}

.particles span{

position:absolute;
width:4px;
height:4px;
background:#ff2d2d;
border-radius:50%;
animation:float 8s linear infinite;

}

@keyframes float{

0%{

transform:translateY(100vh);
opacity:0;

}

30%{

opacity:1;

}

100%{

transform:translateY(-100px);
opacity:0;

}

}

@media(max-width:850px){

header{

padding:20px;

}

nav{

display:none;

}

.glass{

width:90%;
padding:35px;

}

.glass h1{

font-size:42px;

}

.stats{

flex-direction:column;
gap:20px;

}

}