:root {
--donkerblauw:#003366;
--lichtblauw:#66b3ff;
--donkergroen:#006b3c;
--lichtgroen:#8fd19e;
--wit:#ffffff;
}

/* BASIS */
body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:var(--wit);
color:var(--donkerblauw);
}

/* HEADER */
header{
background:var(--donkerblauw);
padding:20px 40px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
color:white;
font-size:22px;
font-weight:bold;
}

nav a{
color:white;
text-decoration:none;
margin-left:25px;
font-weight:600;
padding:8px 14px;
border-radius:6px;
transition:0.3s;
}

nav a:hover{
background:var(--lichtgroen);
color:var(--donkerblauw);
}

/* HERO */
.hero{
background:linear-gradient(90deg,var(--donkerblauw),var(--lichtblauw));
color:white;
padding:100px 20px;
text-align:center;
}

.hero h1{
font-size:42px;
margin-bottom:15px;
}

.hero p{
font-size:18px;
}

/* OVERZICHT BLOKKEN */
.section{
padding:60px 40px;
background:var(--wit);
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
max-width:1100px;
margin:auto;
}

.card{
background:var(--lichtgroen);
padding:35px;
border-radius:12px;
box-shadow:0 6px 15px rgba(0,0,0,0.08);
transition:0.3s ease;
text-align:center;
}

.card:nth-child(2){
background:var(--lichtblauw);
}

.card:nth-child(3){
background:#e8f5ee;
}

.card:hover{
transform:translateY(-8px);
}

.card h2{
margin-top:0;
}

.button{
display:inline-block;
margin-top:15px;
padding:12px 22px;
background:var(--donkergroen);
color:white;
text-decoration:none;
border-radius:8px;
font-weight:bold;
transition:0.3s;
}

.button:hover{
background:var(--donkerblauw);
}

/* FOOTER */
footer{
background:var(--donkerblauw);
color:white;
text-align:center;
padding:25px;
margin-top:40px;
}