:root{

--primary:#0F3D5E;
--secondary:#1F6E8C;
--accent:#2BB673;

--dark:#1F2937;
--light:#F8FAFC;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:
Inter,
Segoe UI,
sans-serif;

line-height:1.6;
color:var(--dark);
background:white;

}

.container{

width:min(1200px,90%);
margin:auto;

}

.header{

background:white;
position:sticky;
top:0;
z-index:100;

border-bottom:1px solid #e5e7eb;

}

.nav{

display:flex;
justify-content:space-between;
align-items:center;
padding:1rem 0;

}

.logo{

font-weight:700;
font-size:1.2rem;
text-decoration:none;
color:var(--primary);

}

.menu{

display:flex;
gap:2rem;
list-style:none;

}

.menu a{

text-decoration:none;
color:var(--dark);

}

.hero{

padding:7rem 0;
background:linear-gradient(
135deg,
#0F3D5E,
#1F6E8C
);

color:white;
text-align:center;

}

.hero h1{

font-size:clamp(
2rem,
5vw,
4rem
);

margin-bottom:1rem;

}

.btn{

display:inline-block;
padding:1rem 2rem;
background:var(--accent);
color:white;
text-decoration:none;
border-radius:8px;
font-weight:600;

}

.grid{

display:grid;

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

gap:2rem;

}

.card{

padding:2rem;
border-radius:12px;
background:white;
box-shadow:
0 5px 20px
rgba(0,0,0,.08);

}

.features,
.services-preview{

padding:5rem 0;

}

.cta{

padding:5rem 0;
text-align:center;
background:var(--light);

}

footer{

padding:2rem 0;
text-align:center;

}