body{

margin:0;
font-family:Arial;
background:black;
color:white;

}


nav{

display:flex;
justify-content:space-between;
padding:20px;
background:rgba(0,0,0,0.8);

}

nav ul{

display:flex;
gap:25px;
list-style:none;

}

nav a{

text-decoration:none;
color:white;

}


.hero{

height:90vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;

background:linear-gradient(45deg,#0f2027,#203a43,#2c5364);

}


.hero h1{

font-size:60px;

}


.hero p{

width:600px;
margin-top:20px;

}


.btn{

padding:12px 25px;
margin-top:30px;
background:#00ff9d;
border:none;
font-size:16px;
cursor:pointer;

}


.features{

padding:80px;
text-align:center;

}


.cards{

display:flex;
gap:30px;
justify-content:center;
flex-wrap:wrap;

}


.card{

width:250px;
background:#111;
padding:25px;
border-radius:10px;

}


.cta{

text-align:center;
padding:80px;
background:#111;

}


footer{

text-align:center;
padding:20px;
background:#000;

}