@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');


*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,sans-serif;

}



body{

background:#070707;

color:white;

min-height:100vh;

}



.background{

position:fixed;

inset:0;

z-index:-1;


background:

radial-gradient(circle at top,#252525,transparent 35%),

linear-gradient(
180deg,
#090909,
#020202
);


}





nav{


width:90%;

max-width:1200px;

height:80px;


margin:20px auto;



display:flex;

align-items:center;

justify-content:space-between;



padding:0 25px;



background:#ffffff08;



border:1px solid #ffffff12;



border-radius:22px;



backdrop-filter:blur(20px);


}





.logo{


display:flex;

align-items:center;

gap:14px;



font-size:26px;

font-weight:800;


}



.logo img{


width:45px;

height:45px;


object-fit:contain;


}




.links{


display:flex;

gap:30px;


}




.links a{


color:#999;

text-decoration:none;

transition:.25s;


}



.links a:hover{


color:white;


}






main{


width:90%;

max-width:1200px;

margin:auto;


}





.banner{


margin-top:35px;


overflow:hidden;


border-radius:25px;


}





.banner img{


width:100%;


height:230px;


object-fit:cover;


display:block;


border-radius:25px;


}







.earnings{


text-align:center;


margin-top:45px;


}




.earnings h1{


font-size:38px;


margin-bottom:12px;


}





.subtitle{


color:#888;


margin-bottom:35px;


}





.stats{


display:flex;


align-items:center;


justify-content:center;


flex-wrap:wrap;


gap:18px;


}






.stat{


display:flex;


align-items:center;


gap:15px;


padding:22px;


min-width:230px;


background:#ffffff08;


border:1px solid #ffffff12;


border-radius:20px;


text-align:left;


transition:.3s;


}





.stat:hover{


transform:translateY(-5px);


background:#ffffff12;


}





.stat span{


font-size:35px;


font-weight:900;


color:#39e878;


}





.stat b{


font-size:18px;


}





.stat p{


color:#888;


margin-top:5px;


}





.equals{


font-size:40px;


font-weight:800;


color:#555;


}





.download{


display:flex;


justify-content:center;


margin:50px 0;


}




.download a{


display:inline-block;


}



.download img{


width:260px;


display:block;


cursor:pointer;


transition:.3s;


}




.download img:hover{


transform:translateY(-6px) scale(1.05);


}





.features{


display:flex;


justify-content:center;


gap:20px;


flex-wrap:wrap;


}





.card{


width:300px;


padding:30px;



background:#ffffff08;



border:1px solid #ffffff12;



border-radius:22px;



transition:.3s;



}





.card:hover{


transform:translateY(-6px);


background:#ffffff12;


}





.card h2{


margin-bottom:15px;


}





.card p{


color:#888;


line-height:1.6;


}






/* MODAL */


.modal{


position:fixed;


inset:0;


display:none;


align-items:center;


justify-content:center;



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



backdrop-filter:blur(12px);



z-index:100;


}





.modal-content{


position:relative;


width:90%;


max-width:750px;



padding:35px;



background:#111;



border:1px solid #ffffff15;



border-radius:28px;



box-shadow:0 30px 100px #000;



text-align:center;


}





.modal-content h2{


font-size:32px;


margin-bottom:15px;


}




.modal-content p{


color:#999;


margin-bottom:25px;


}





.video{


overflow:hidden;


border-radius:18px;


}





.video iframe{


width:100%;


aspect-ratio:16/9;


display:block;


}





.close{


position:absolute;


right:20px;


top:15px;


width:40px;


height:40px;


border:none;


border-radius:50%;


background:#ffffff10;


color:white;


font-size:28px;


cursor:pointer;


}





.close:hover{


background:#ffffff25;


}






footer{


text-align:center;


padding:50px;


color:#555;


}






@media(max-width:700px){


.links{

display:none;

}



.equals{

width:100%;

}



.banner img{

height:110px;

}


}