*, *:after, *:before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

html{height:100%; scroll-behavior:smooth; -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; font-smoothing:antialiased;}
html,body{margin:0; padding:0; font-family:var(--fontbody); font-size:17px; line-height:25px; font-weight:400;}

:root{
	--fontheader:"Oswald";
	--fontbody:"Montserrat";
	
	--color1: #111;
	--color2: #fff;
	--color3: #ff6800;
	--color4: #ebecea;
	--color5: #00b482;
	--color6: #6ab4f5;
}	

h1,h2,h3{}
h1{color:var(--color3);}	
h2{color:var(--color1); font-size:28px;}	
h3{color:var(--color3);}

a{color:var(--color3); text-decoration:none;}	
a:hover{color:var(--color3); text-decoration:underline;}
	
img{height:auto; max-width:100%; vertical-align:middle;}
	
.btn{display:inline-flex; align-items:center; padding:11px 18px; border-radius:999px; text-decoration:none; font-weight:700; background:var(--color5); color:var(--color2);}
.btn i{margin-left:5px; font-size:90%;}	
.btn:hover{background:var(--color5); color:var(--color2); text-decoration:none;}
	
.row{max-width:1200px; margin:0 auto; padding:0 22px;}
	

/* header */
.header{position:sticky; top:0; z-index:50; background:var(--color2); box-shadow:0 2px 12px rgba(0,0,0,.2);}
.header .row{display:flex; align-items:center; justify-content:space-between; min-height:70px; gap:16px;}

.header nav ul{display:flex; gap:24px; list-style:none; margin:0; padding:0;}
.header nav a{text-decoration:none; color:var(--color3); font-weight:600; padding:10px 6px; border-radius:8px; transition:.2s;}
.header nav a:hover{color:var(--color2); background:var(--color3);}
	
.brand{display:flex; align-items:center; gap:14px;}

.logo{display:inline-flex; align-items:baseline; gap:6px; text-decoration:none; line-height:1; text-decoration:none!important;}
.logo-main{font-weight:900; font-size:28px; letter-spacing:-.02em; color:var(--color1);}
.logo-accent{font-weight:900; font-size:28px; letter-spacing:-.02em; color:var(--color3);}

	
/* banner */
.banner{position:relative; overflow:hidden; background:var(--color3);}
.banner::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at top, rgba(255,255,255,0.1), transparent 70%); pointer-events:none;}
.banner :not(i){text-shadow:1px 1px 1px #f20;}
.banner .checks i{text-shadow:1px 1px 1px rgba(0,0,0,.2);}
.banner .row{display:flex; flex-wrap:wrap; align-items:center; padding:40px 20px;}

.banner .txt{width:70%; padding-right:60px;}	
.banner h1{margin:0 0 20px; font-size:36px; line-height:36px; color:var(--color2);}
.banner p{margin:0 0 20px; color:var(--color2); font-size:19px; line-height:28px;}
.banner .cta{display:inline-flex; align-items:center; gap:10px;}

.banner .checks{width:30%; position:relative; overflow:hidden;}
.banner .checks ul{list-style:none; padding:20px; margin:0; color:var(--color2);}
.banner .checks li{font-size:18px; font-weight:600; padding:4px 0; font-style:italic;}
.banner .checks li i{background:var(--color5); color:var(--color2); border-radius:50%; padding:4px 5px; font-size:90%; margin-right:5px;}
	


/* blocks home */	
.blocks{padding:40px 0 50px;}
.blocks .items{display:flex; flex-wrap:wrap; margin-left:-15px; margin-right:-15px; margin-top:30px;}
.blocks .item{position:relative; overflow:hidden; display:block; width:calc(33.333% - 30px); margin:0 15px 30px; border-radius:14px; transition:.3s; background:var(--color4);}
.blocks .item:hover{transform:translateY(-4px); box-shadow:0 10px 20px rgba(0,0,0,.3);}
.blocks .item h3{text-shadow:1px 1px 1px rgba(0,0,0,.2); text-align:center; z-index:2; font-size:20px; line-height:20px; text-decoration:none; position:absolute; bottom:40px; color:var(--color2); font-weight:700; margin:0; left:0; padding:10px 45px 10px 15px; border-radius:0 5px 5px 0; background:var(--color5); letter-spacing:-.03em; box-shadow:0 5px 10px rgba(0,0,0,.2);}
.blocks .item h3 i{position:absolute; right:15px; font-size:80%; color:var(--color1); margin-top:2px; text-shadow:none;}
	
	
	
/* footer */
.footer{background:var(--color3); color:var(--color2); padding-top:50px;}
.footer::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at top, rgba(255,255,255,0.1), transparent 70%); pointer-events:none;}
.logo-footer .logo-main{color:var(--color1);}
.logo-footer .logo-accent{color:var(--color2);}
	
.footer .items{display:flex; flex-wrap:wrap;}
.footer .items .first{width:45%; padding-right:60px;}
.footer .items .first p{font-size:15px; line-height:20px; text-shadow:1px 1px 1px #f20;}
.footer .items .sec{width:55%; display:flex; flex-wrap:wrap;}
.footer .items .sec div{width:50%;}	
.footer h4{color:var(--color1); padding:0 0 10px; margin:0;}
.footer ul{list-style:none; margin:0; padding:0;}
.footer li a{color:var(--color2); text-decoration:none; text-shadow:1px 1px 1px #f20;}
.footer li a:hover{color:var(--color2);}

.credits{background:var(--color1); color:var(--color2); margin-top:40px;}
.credits .row{display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; font-size:14px;}
.credits a{color:var(--color2); text-decoration:none;}
.credits a:hover{color:var(--color3); text-decoration:none;}
	
	
	
	/* ================================
   RESPONSIVE OVERRIDES (DESKTOP BLIJFT ONGEWIJZIGD)
   ================================ */

/* --- Tablet landscape & kleiner --- */
@media (max-width: 1024px) {
  .row { padding: 0 18px; }

  .header .row { min-height: 64px; gap: 12px; }
  .header nav ul { gap: 16px; }

  .logo-main, .logo-accent { font-size: 24px; }

  .banner .row { padding: 36px 18px; }
  .banner .txt { width: 60%; padding-right: 28px; }
  .banner .checks { width: 40%; }
  .banner h1 { font-size: 32px; line-height: 34px; }
  .banner p  { font-size: 18px; line-height: 26px; }

  .blocks { padding: 32px 0 40px; }
  .blocks .items { margin-left: -12px; margin-right: -12px; }
  .blocks .item { width: calc(50% - 24px); margin: 0 12px 24px; }

  .footer .items .first { width: 50%; padding-right: 36px; }
  .footer .items .sec   { width: 50%; }
}

/* --- Tablet portrait / kleine laptops --- */
@media (max-width: 768px) {
  html, body { font-size: 16px; line-height: 24px; }

  .header .row { flex-wrap: wrap; gap: 10px; }
  .brand { width: 100%; justify-content: space-between; }
  .header nav ul {
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .banner .row { padding: 28px 18px; }
  .banner .txt, .banner .checks { width: 100%; padding-right: 0; }
  .banner .txt { margin-bottom: 12px; }
  .banner h1 { font-size: 30px; line-height: 32px; text-align: left; }
  .banner p  { font-size: 17px; line-height: 25px; text-align: left; }
  .banner .cta { gap: 8px; flex-wrap: wrap; }

  .blocks .items { margin-left: -10px; margin-right: -10px; }
  .blocks .item { width: calc(50% - 20px); margin: 0 10px 20px; }
  .blocks .item h3 {
    bottom: 20px;
    padding: 8px 40px 8px 12px;
    font-size: 18px; line-height: 18px;
  }

  .footer { padding-top: 40px; }
  .footer .items .first,
  .footer .items .sec { width: 100%; padding-right: 0; }
  .footer .items .sec div { width: 50%; }
  .credits .row { flex-wrap: wrap; gap: 8px; }
}

/* --- Mobiel --- */
@media (max-width: 576px) {
  .row { padding: 0 16px; }

  .logo-main, .logo-accent { font-size: 22px; }

  .banner .row { padding: 24px 16px; }
  .banner h1 { font-size: 26px; line-height: 30px; }
  .banner p  { font-size: 16px; line-height: 24px; }
  .btn { width: 100%; justify-content: center; }

  .blocks { padding: 28px 0 36px; }
  .blocks .items { margin-left: 0; margin-right: 0; }
  .blocks .item { width: 100%; margin: 0 0 16px; }
  .blocks .item h3 {
    display: inline-flex;
    margin: 14px;
    box-shadow: none;
  }

  .footer .items .sec div { width: 100%; }
  .credits .row { justify-content: center; text-align: center; }
}