/* Boundless Structures — sitestijl (tokens 1-op-1 uit de configurator) */
:root{
  --accent:#e8650d; --accent-d:#c25409; --ink:#1d232b; --mut:#5d6570;
  --bg:#f2f4f7; --card:#ffffff; --line:#dde2e9; --ok:#0f8a5f; --tint:#fdf0e6;
}
*{box-sizing:border-box; margin:0; padding:0}
body{font-family:"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--ink); line-height:1.5}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-d)}
img{max-width:100%}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px}

/* header */
header{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.nav{display:flex; align-items:center; gap:24px; padding:14px 0; flex-wrap:wrap}
.logo{font-weight:800; font-size:18px; letter-spacing:.3px; color:var(--ink)}
.logo span{color:var(--accent)}
.nav-links{display:flex; gap:22px; margin-left:auto; align-items:center; flex-wrap:wrap}
.nav-links a{font-size:14px; font-weight:600; color:var(--mut)}
.nav-links a.act{color:var(--ink); font-weight:800}
.nav-links a:hover{color:var(--ink)}

.knop{display:inline-block; background:var(--accent); color:#fff !important; padding:12px 22px; border-radius:10px; font-weight:800; font-size:15px; border:none; cursor:pointer}
.knop:hover{background:var(--accent-d)}
.knop.klein{padding:10px 18px; font-size:14px}
.knop.wit{background:#fff; color:var(--accent) !important}
.knop.wit:hover{background:var(--tint)}
.knop.lijn{background:#fff; color:var(--ink) !important; border:1.5px solid var(--line); font-weight:700}
.knop.lijn:hover{background:var(--bg)}

/* hero */
.hero{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:center; padding:64px 0 56px}
.kicker{font-size:13px; text-transform:uppercase; letter-spacing:.8px; color:var(--mut); font-weight:700}
h1{font-size:44px; line-height:1.12; font-weight:800; letter-spacing:-.5px}
.sub{font-size:17px; line-height:1.6; color:var(--mut)}
.hero-kolom{display:flex; flex-direction:column; gap:20px}
.cta-rij{display:flex; gap:12px; flex-wrap:wrap}
.trust{display:flex; gap:20px; font-size:13px; color:var(--mut); font-weight:600; align-items:center; flex-wrap:wrap}
.trust span{display:flex; align-items:center; gap:6px}

/* secties */
.sectie{padding:56px 0}
.sectie.wit{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
h2{font-size:30px; font-weight:800}
.sectiekop{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; gap:12px; flex-wrap:wrap}
.centerkop{text-align:center; display:flex; flex-direction:column; gap:8px; margin-bottom:28px}

.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}

.kaart{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:10px}
.kaart h3{font-size:16px; font-weight:800}
.kaart p{font-size:14px; line-height:1.55; color:var(--mut)}
.kaart.rand{border:1.5px solid var(--line)}

.stapnr{width:34px; height:34px; border-radius:50%; background:var(--tint); color:var(--accent); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:16px}

.fotokaart{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; padding:0}
.fotokaart .tekst{padding:20px; display:flex; flex-direction:column; gap:8px}
.foto-ph{background:repeating-linear-gradient(45deg,#eef1f5,#eef1f5 12px,#e4e9ef 12px,#e4e9ef 24px); display:flex; align-items:center; justify-content:center; gap:8px; color:#8a93a0; font-size:13px; font-weight:600; height:160px}

.vinkrij{display:flex; align-items:center; gap:10px; font-size:15px}

.accentblok{background:var(--tint); border:1.5px solid var(--accent); border-radius:12px; padding:24px 28px; display:flex; align-items:center; gap:20px}
.accentblok p{font-size:14px; line-height:1.55; color:var(--mut)}
.accentblok h3{font-size:16px; font-weight:800}

/* cta-band */
.band{background:var(--accent)}
.band .wrap{padding:48px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.band h2{color:#fff; font-size:26px}
.band p{color:var(--tint); font-size:15px}

/* footer */
footer{background:var(--ink)}
footer .wrap{padding:40px 24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; color:#b8bec7; font-size:13.5px; line-height:1.7}
footer .kop{font-weight:700; color:#fff}
footer a{color:#b8bec7}
footer a:hover{color:#fff}

/* formulier */
label{font-size:13px; font-weight:700; display:block; margin-bottom:6px}
input,textarea{width:100%; border:1.5px solid var(--line); border-radius:9px; padding:11px 14px; font:inherit; font-size:14px}
.veld{margin-bottom:14px}
.klein-txt{font-size:12.5px; color:var(--mut)}

@media(max-width:860px){
  .hero{grid-template-columns:1fr; padding:40px 0 36px; gap:28px}
  h1{font-size:32px}
  .grid3,.grid2{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr}
  .nav-links{gap:14px}
}