.hero{

min-height:100vh;

display:flex;

align-items:center;

padding-top:150px;

background:
radial-gradient(
circle at top right,
rgba(59,130,246,.25),
transparent 40%
),
#020B28;

}

.hero-container{

max-width:900px;

margin:auto;

padding:0 24px;

text-align:center;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:12px;

padding:12px 20px;

border-radius:100px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

margin-bottom:30px;

}

.hero-badge span{

width:10px;
height:10px;

border-radius:50%;

background:#22c55e;

}

.hero h1{

font-size:clamp(3rem,7vw,6rem);

line-height:1.1;

margin-bottom:30px;

}

.hero h1 span{

background:linear-gradient(
90deg,
#3B82F6,
#FFC928
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero p{

font-size:1.2rem;

max-width:700px;

margin:auto;

color:#bfc7d8;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:40px;

flex-wrap:wrap;

}

.hero-primary{

padding:18px 35px;

border-radius:100px;

background:#FFC928;

color:#020B28;

font-weight:700;

text-decoration:none;

}

.hero-secondary{

padding:18px 35px;

border-radius:100px;

border:1px solid rgba(255,255,255,.15);

color:white;

text-decoration:none;

}

.hero-trust{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-top:60px;

}

.hero-trust div{

padding:12px 20px;

border-radius:100px;

background:rgba(255,255,255,.05);

}