*{
box-sizing:border-box;
}

body{
margin:0;
background:#08111b;
color:#ffffff;
font-family:Arial,sans-serif;
}

.hero{

height:85vh;

background:
linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.75)
),
url(hero.jpg);

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

}

.hero-box{

max-width:900px;

padding:40px;

text-align:center;

}

h1{

font-size:64px;

margin-bottom:24px;

}

section{

padding:80px;

}

.cards{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(220px,1fr)
);

gap:20px;

}

.cards div{

padding:28px;

background:#102131;

border-radius:12px;

}

.cta{

display:inline-block;

padding:18px 36px;

background:#ffb300;

color:#111;

text-decoration:none;

border-radius:10px;

font-weight:bold;

}