.hero{
padding:120px 5%;
background:#0b0f19;
color:white;
}

.hero-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
flex-wrap:wrap;
}

.hero-left{
flex:1;
}

.badge{
display:inline-block;
padding:10px 18px;
border-radius:30px;
background:#111827;
border:1px solid #1e293b;
color:#38bdf8;
font-size:14px;
margin-bottom:25px;
}

.hero h1{
font-size:60px;
line-height:1.1;
margin-bottom:20px;
}

.gradient{
background:linear-gradient(90deg,#22d3ee,#6366f1);
-webkit-background-clip:text;
color:transparent;
}

.hero p{
color:#9ca3af;
font-size:18px;
max-width:500px;
margin-bottom:30px;
}

.buttons{
display:flex;
gap:20px;
margin-bottom:40px;
}

.btn-primary{
background:#22d3ee;
color:black;
padding:14px 26px;
border-radius:10px;
font-weight:600;
text-decoration:none;
}

.btn-secondary{
background:#111827;
border:1px solid #374151;
padding:14px 26px;
border-radius:10px;
color:white;
text-decoration:none;
}

.stats{
display:flex;
gap:60px;
}

.stats h2{
color:#22d3ee;
margin-bottom:5px;
}

.stats span{
color:#9ca3af;
font-size:14px;
}

.hero-right{
flex:1;
text-align:center;
}

.hero-right img{
width:360px;
border-radius:20px;
border:3px solid #22d3ee;
box-shadow:0 0 40px rgba(34,211,238,0.4);
}