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

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

body{

background:#07131f;

color:#fff;

overflow-x:hidden;

}

.navbar{

background:rgba(0,0,0,.35);

backdrop-filter:blur(18px);

padding:18px 0;

transition:.4s;

}

.nav-link{

color:#fff;

margin-left:20px;

font-weight:500;

}

.nav-link:hover{

color:#2ce7f3;

}

.join-btn{

background:linear-gradient(90deg,#29e9f2,#8b4dff);

color:#fff;

padding:12px 35px;

border:none;

font-weight:700;

transition:.4s;

}

.join-btn:hover{

transform:translateY(-4px);

box-shadow:0 0 25px #29e9f2;

}

.hero{

padding-top:170px;

padding-bottom:120px;

background:
linear-gradient(135deg,#07131f,#102741,#1a1555);

position:relative;

}

.subtitle{

letter-spacing:3px;

color:#2ce7f3;

margin-bottom:15px;

}

.hero h1{

font-size:70px;

font-weight:800;

}

.hero h1 span{

color:#2ce7f3;

}

.hero h2{

font-size:42px;

font-weight:700;

margin:20px 0;

}

.hero p{

font-size:18px;

line-height:32px;

color:#d6d6d6;

margin-top:20px;

}

.wheel{

animation:spin 20s linear infinite;

max-width:500px;

filter:drop-shadow(0 0 40px #2ce7f3);

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

.hero::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:#29e9f2;

filter:blur(220px);

right:-200px;

top:0;

opacity:.2;

}

.hero::after{

content:"";

position:absolute;

width:400px;

height:400px;

background:#8b4dff;

filter:blur(200px);

left:-150px;

bottom:0;

opacity:.25;

}

/*==========================
STATISTICS
===========================*/

.statistics{

padding:80px 0;

background:#081420;

}

.stat-card{

padding:45px 20px;

border-radius:25px;

text-align:center;

transition:.4s;

height:100%;

}

.stat-card:hover{

transform:translateY(-12px);

}

.stat-icon{

font-size:45px;

color:#29e9f2;

margin-bottom:20px;

}

.counter{

font-size:42px;

font-weight:700;

margin-bottom:10px;

color:#fff;

animation:counterGlow 2s infinite alternate;

}

.stat-card p{

color:#cfd5df;

font-size:17px;

}


/*==========================
HOW IT WORKS
===========================*/

.how-section{

padding:100px 0;

background:linear-gradient(180deg,#081420,#0d1d31);

}

.section-title{

font-size:48px;

font-weight:700;

margin-top:15px;

}

.work-card{

padding:50px 35px;

text-align:center;

position:relative;

height:100%;

}

.step-number{

position:absolute;

top:20px;

right:20px;

font-size:55px;

font-weight:800;

opacity:.08;

color:#fff;

}

.work-icon{

font-size:65px;

margin-bottom:30px;

background:linear-gradient(45deg,#29e9f2,#8b4dff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.work-card h3{

margin-bottom:20px;

font-size:28px;

}

.work-card p{

color:#d5d5d5;

line-height:30px;

}