body{
margin:0;
font-family:sans-serif;
background:#f4f7fb;
color:#111;
}

header{
display:flex;
justify-content:space-between;
padding:20px 40px;
background:#fff;
position:sticky;
top:0;
}

.logo{
font-size:24px;
font-weight:bold;
}

.logo span{
font-size:14px;
}

nav a{
margin-left:20px;
text-decoration:none;
color:#111;
}

.hero{
display:flex;
justify-content:space-between;
align-items:center;
padding:60px 40px;
background:linear-gradient(to right,#fff,#e8f2ff);
}

.hero-text{
max-width:50%;
}

.sub{
display:inline-block;
background:#0b2f66;
color:#fff;
padding:10px 18px;
border-radius:8px;
}

h1{
font-size:58px;
color:#0b2f66;
}

.lead{
font-size:24px;
}

.btn{
display:inline-block;
padding:16px 32px;
background:#18c03d;
color:#fff;
text-decoration:none;
border-radius:10px;
font-weight:bold;
}

.hero-image img{
width:360px;
}

section{
padding:80px 40px;
}

h2{
text-align:center;
font-size:42px;
color:#0b2f66;
margin-bottom:40px;
}

.cards{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:20px;
}

.card{
background:#fff;
padding:30px;
border-radius:16px;
}

.card.blue{
border:3px solid #0b2f66;
}

.price{
font-size:42px;
font-weight:bold;
color:#0b2f66;
}

.flow{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
}

.flow div{
background:#fff;
padding:20px;
border-radius:12px;
text-align:center;
}

footer{
background:#0b2f66;
color:#fff;
text-align:center;
padding:60px 20px;
}

@media(max-width:900px){
.hero{
flex-direction:column;
text-align:center;
}

.hero-text{
max-width:100%;
}

h1{
font-size:42px;
}

.hero-image img{
width:260px;
margin-top:20px;
}

.cards,
.flow{
grid-template-columns:1fr;
}

header{
flex-direction:column;
gap:10px;
}
}