:root{
  --ink:#12232E;
  --paper:#EFF2EC;
  --paper-2:#E6EAE1;
  --flow:#2F7A6E;
  --flow-dark:#215B52;
  --flow-light:#DCEAE6;
  --amber:#E2963A;
  --amber-light:#FBEBD6;
  --line:#C9CFC5;
  --text-muted:#51625C;
  --radius:2px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Space Grotesk', sans-serif;
  margin:0;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.mono{ font-family:'IBM Plex Mono', monospace; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--flow-dark);
  display:flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:14px;
  height:1px;
  background:var(--flow);
  display:inline-block;
}
a{color:inherit;}
.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:0 28px;
}

/* concept banner */
.concept-banner{
  background:var(--ink);
  color:var(--paper);
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  text-align:center;
  padding:9px 16px;
  letter-spacing:0.03em;
}
.concept-banner strong{ color:var(--amber); }

/* nav */
header{
  position:sticky; top:0; z-index:20;
  background:rgba(239,242,236,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.logo{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:19px;
  display:flex; align-items:center; gap:8px;
  text-decoration:none;
}
.logo-mark{
  width:10px;height:10px;background:var(--flow);
  border-radius:50%;
  position:relative;
  flex-shrink:0;
}
.logo-mark::after{
  content:"";
  position:absolute; left:10px; top:4px;
  width:22px; height:1.5px; background:var(--flow);
  opacity:.6;
}
nav ul{
  list-style:none; display:flex; gap:32px; margin:0; padding:0;
  font-size:14.5px;
}
nav ul a{ text-decoration:none; color:var(--text-muted); }
nav ul a:hover, nav ul a.active{ color:var(--ink); }
.nav-cta{
  background:var(--ink); color:var(--paper) !important;
  padding:9px 18px; font-size:14px; text-decoration:none;
  border-radius:var(--radius);
}

.nav-cta-mobile{ display:none; }
.menu-toggle{
  display:none; background:none; border:1px solid var(--ink); border-radius:var(--radius);
  width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer;
  flex-direction:column; gap:4px;
}
.menu-toggle span{ display:block; width:18px; height:1.5px; background:var(--ink); transition:transform .2s ease, opacity .2s ease; }
.menu-toggle.open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.mobile-nav-scrim{
  display:none; position:fixed; inset:0; top:64px; background:rgba(18,35,46,0.4); z-index:29;
}
.mobile-nav-scrim.open{ display:block; }

/* hero + flow line */
.hero{
  position:relative;
  padding:96px 0 72px;
  overflow:hidden;
}
.hero.small{ padding:64px 0 48px; }
.flow-svg{
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}
.flow-path{
  fill:none;
  stroke:var(--flow);
  stroke-width:1.4;
  opacity:0.55;
  stroke-dasharray:6 2000;
  animation:draw 2.6s ease-out forwards;
}
@keyframes draw{ to{ stroke-dasharray:2000 2000; } }
.hero-inner{ position:relative; z-index:1; max-width:640px; }
.hero h1{
  font-size:52px; line-height:1.06; font-weight:600;
  margin-top:18px;
}
.hero.small h1{ font-size:38px; }
.hero h1 em{
  font-style:normal; color:var(--flow-dark);
}
.hero p.lead{
  font-size:18px; line-height:1.6; color:var(--text-muted);
  margin-top:22px; max-width:520px;
}
.hero-ctas{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.btn-primary{
  background:var(--flow); color:#fff; text-decoration:none;
  padding:13px 24px; font-size:15px; font-weight:500;
  border-radius:10px;
  display:inline-block;
  border:none; cursor:pointer;
  font-family:'IBM Plex Sans', sans-serif;
  box-shadow:0 4px 14px rgba(47,122,110,0.28);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-primary:hover{ background:var(--flow-dark); box-shadow:0 6px 18px rgba(47,122,110,0.36); transform:translateY(-1px); }
.btn-secondary{
  border:1px solid var(--ink); text-decoration:none; color:var(--ink);
  padding:12px 24px; font-size:15px;
  border-radius:var(--radius);
  display:inline-block;
}

/* trust strip */
.trust{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
.trust .wrap{
  display:flex; gap:40px; align-items:center;
  font-size:13px; color:var(--text-muted);
  font-family:'IBM Plex Mono', monospace;
  flex-wrap:wrap;
}

/* pillars */
.pillars{ padding:88px 0; }
.section-head{ max-width:560px; margin-bottom:52px; }
.section-head h2{ font-size:32px; margin-top:14px; }
.section-head p{ color:var(--text-muted); font-size:16px; margin-top:12px; line-height:1.6;}
.pillar-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.pillar{
  background:var(--paper); padding:32px 28px; position:relative;
}
.pillar .num{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px; color:var(--flow-dark);
}
.pillar h3{ font-size:19px; margin-top:16px; }
.pillar p{ font-size:14.5px; color:var(--text-muted); line-height:1.6; margin-top:10px;}
.pillar .tag{
  margin-top:18px; font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  color:var(--flow-dark); background:var(--flow-light);
  display:inline-block; padding:3px 8px; border-radius:2px;
}
.pillar a.pillar-link{
  display:inline-block; margin-top:16px; font-family:'IBM Plex Mono', monospace;
  font-size:12px; text-decoration:none; color:var(--flow-dark); border-bottom:1px solid var(--flow);
}

/* diensten list (services page) */
.service-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); margin-top:12px;}
.service-row{
  display:grid; grid-template-columns:220px 1fr; gap:24px;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.service-row h3{ font-size:17px; }
.service-row .cat{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--flow-dark); text-transform:uppercase; letter-spacing:.06em;}
.service-row p{ font-size:14.5px; color:var(--text-muted); line-height:1.65; margin:6px 0 0;}

/* pricing */
.pricing{ padding:72px 0 40px; }
.cat-toggle{
  display:inline-flex; border:1px solid var(--ink); border-radius:var(--radius); overflow:hidden;
  margin-bottom:8px;
}
.cat-toggle button{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px;
  background:transparent; border:none; padding:10px 18px; cursor:pointer;
  color:var(--ink);
}
.cat-toggle button.active{ background:var(--ink); color:var(--paper); }

.price-note{
  font-size:13px; color:var(--text-muted); margin:18px 0 40px;
  border-left:2px solid var(--amber); padding-left:12px;
  max-width:620px;
}

.plan-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.plan-grid.maatwerk{ grid-template-columns:repeat(2,1fr); max-width:720px; }

.plan{
  background:var(--paper); border:1px solid var(--line);
  padding:26px 22px; display:flex; flex-direction:column;
  min-height:340px;
}
.plan.component{ border-style:dashed; }
.plan .plan-name{ font-size:15.5px; font-weight:600; font-family:'Space Grotesk',sans-serif;}
.plan .plan-desc{ font-size:12.5px; color:var(--text-muted); margin-top:4px; min-height:32px;}
.plan .plan-price{
  font-family:'IBM Plex Mono', monospace; font-size:26px; margin-top:18px;
  color:var(--flow-dark);
}
.plan .plan-excl{ font-size:11px; color:var(--text-muted); font-family:'IBM Plex Mono', monospace; margin-top:2px;}
.plan ul{ list-style:none; padding:0; margin:20px 0 0; flex:1;}
.plan li{
  font-size:12.8px; color:var(--ink); padding:6px 0 6px 14px;
  border-top:1px solid var(--line);
  position:relative;
}
.plan li:first-child{ border-top:none; }
.plan li::before{ content:"—"; position:absolute; left:0; color:var(--flow); }
.plan .plan-cta{
  margin-top:20px; text-align:center; font-size:13px; font-family:'IBM Plex Mono', monospace;
  border:1px solid var(--ink); padding:10px; text-decoration:none; color:var(--ink);
}
.plan.featured{ border-color:var(--flow); border-width:2px; position:relative; }
.plan.featured .plan-cta{ background:var(--flow); color:#fff; border-color:var(--flow); }
.featured-flag{
  position:absolute; top:-11px; left:20px; background:var(--flow);
  color:#fff; font-family:'IBM Plex Mono', monospace; font-size:10.5px;
  padding:3px 8px; letter-spacing:0.04em; text-transform:uppercase;
}
.plan.open{ min-height:400px; border-style:solid; }
.plan.open .plan-desc{ min-height:auto; }
@media(max-width:600px){
  .plan.open{ min-height:0; height:auto; }
  .plan .plan-desc{ min-height:auto; }
}

.fine{
  margin-top:36px; font-size:12.5px; color:var(--text-muted); line-height:1.7;
  max-width:680px;
}
.fine strong{ color:var(--ink); }

/* losse diensten */
.losse-diensten{ padding:24px 0 88px; }
.diensten-table{
  width:100%; border-collapse:collapse; margin-top:8px;
  border:1px solid var(--line);
  background:var(--paper);
}
.diensten-table thead th{
  text-align:left; font-family:'IBM Plex Mono', monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--flow-dark);
  background:var(--paper-2); padding:12px 18px; border-bottom:1px solid var(--line);
}
.diensten-table td{
  padding:15px 18px; font-size:14px; border-bottom:1px solid var(--line);
  vertical-align:top;
}
.diensten-table tbody tr:last-child td{ border-bottom:none; }
.diensten-table td:first-child{ font-weight:500; white-space:nowrap; }
.diensten-table td.mono{ font-family:'IBM Plex Mono', monospace; color:var(--flow-dark); white-space:nowrap; }
.diensten-table td:last-child{ color:var(--text-muted); font-size:13.2px; line-height:1.5; }
.diensten-table tr.oa td.mono{ color:var(--amber); }
.diensten-table tr:hover td{ background:var(--paper-2); }
@media(max-width:820px){
  .diensten-table, .diensten-table thead, .diensten-table tbody, .diensten-table th, .diensten-table td, .diensten-table tr{ display:block; width:100%; }
  .diensten-table thead{ position:absolute; left:-9999px; }
  .diensten-table tbody tr{ border:1px solid var(--line); border-radius:8px; margin-bottom:12px; overflow:hidden; }
  .diensten-table td{
    border-bottom:1px solid var(--line); padding:10px 14px; white-space:normal;
    word-break:break-word; box-sizing:border-box;
  }
  .diensten-table tbody tr:last-child td:last-child{ border-bottom:none; }
  .diensten-table td:first-child{ white-space:normal; background:var(--paper-2); font-size:14.5px; }
  .diensten-table td.mono{ white-space:normal; }
  .diensten-table td::before{
    content: attr(data-label); display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
    text-transform:uppercase; letter-spacing:.05em; color:var(--flow-dark); margin-bottom:3px;
  }
}

/* hosting */
.hosting{ padding:80px 0; }
.hosting-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:36px;}
.hosting-card{ background:var(--paper); padding:26px 24px; }
.hosting-card h3{ font-size:16px; }
.hosting-card .price{ font-family:'IBM Plex Mono', monospace; font-size:22px; color:var(--flow-dark); margin-top:10px;}
.hosting-card p.desc{ font-size:12.8px; color:var(--text-muted); margin-top:10px; line-height:1.6;}
.hosting-card.self{ background:var(--flow-light); }

/* forms (offerte + contact) */
.form-section{ padding:64px 0 96px; max-width:100%; }
.form-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; max-width:100%; }
.field{ margin-bottom:20px; display:flex; flex-direction:column; gap:6px; max-width:100%; }
.field label{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--flow-dark); }
.field input, .field select, .field textarea{
  border:1.5px solid var(--line); background:var(--paper-2); padding:13px 15px; font-family:'IBM Plex Sans',sans-serif;
  font-size:14.5px; color:var(--ink); border-radius:10px; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  width:100%; max-width:100%; box-sizing:border-box;
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--flow); background:#fff; box-shadow:0 0 0 4px var(--flow-light);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--text-muted); }
.field-error{ color:#B5432E; font-size:12px; min-height:14px; display:block; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:100%; }
@media(max-width:600px){
  .field-row{ grid-template-columns:1fr; }
}

/* custom dropdown — vervangt native <select>, geen browser-styling */
.custom-select{ position:relative; }
.custom-select-trigger{
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  border:1.5px solid var(--line); background:var(--paper-2); padding:13px 15px; border-radius:10px;
  font-family:'IBM Plex Sans', sans-serif; font-size:14.5px; color:var(--ink);
  cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.custom-select-trigger:hover{ border-color:var(--flow); }
.custom-select-trigger .cs-arrow{
  font-family:'IBM Plex Mono', monospace; color:var(--flow-dark); font-size:12px;
  transition:transform .15s ease;
}
.custom-select.open .custom-select-trigger .cs-arrow{ transform:rotate(180deg); }
.custom-select-trigger:focus-visible{ outline:none; border-color:var(--flow); box-shadow:0 0 0 4px var(--flow-light); }
.custom-select.open .custom-select-trigger{ border-color:var(--flow); box-shadow:0 0 0 4px var(--flow-light); }

.custom-select-list{
  list-style:none; margin:0; padding:6px 0;
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  background:var(--paper); border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(18,35,46,0.14);
  max-height:260px; overflow-y:auto;
  display:none;
}
.custom-select.open .custom-select-list{ display:block; }
.custom-select-list li{
  padding:10px 14px; font-size:14px; color:var(--ink); cursor:pointer;
  position:relative; padding-left:30px;
}
.custom-select-list li::before{
  content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%; border:1px solid var(--line); background:#fff;
}
.custom-select-list li:hover, .custom-select-list li:focus{
  background:var(--flow-light); outline:none;
}
.custom-select-list li.selected{ font-weight:500; color:var(--flow-dark); }
.custom-select-list li.selected::before{
  background:var(--flow); border-color:var(--flow);
}
.radio-group{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-pill{
  border:1px solid var(--line); padding:8px 14px; font-size:13px; border-radius:20px;
  cursor:pointer; user-select:none;
}
.radio-pill input{ position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; margin:-1px; }
.radio-pill:focus-within{ outline:2px solid var(--flow); outline-offset:2px; }
.radio-pill.checked{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.submit-row{ margin-top:8px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; max-width:100%; }
.submit-note{ font-size:12px; color:var(--text-muted); }

.side-card{
  background:var(--paper-2); border:1px solid var(--line); padding:28px 26px; max-width:100%; box-sizing:border-box;
}
.side-card h3{ font-size:16px; }
.side-card ul{ list-style:none; padding:0; margin:18px 0 0; }
.side-card li{ font-size:13.5px; color:var(--text-muted); padding:9px 0; border-top:1px solid var(--line); }
.side-card li:first-child{ border-top:none; }
.side-card li strong{ color:var(--ink); display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px;}

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:20px;}
.contact-card{ background:var(--paper); padding:28px 26px; }
.contact-card h3{ font-size:16px; }
.contact-card p, .contact-card a{ font-size:14px; color:var(--text-muted); line-height:1.7; text-decoration:none; }
.contact-card a.link{ color:var(--flow-dark); border-bottom:1px solid var(--flow); }

/* CTA footer */
.cta-final{
  background:var(--ink); color:var(--paper);
  padding:88px 0; text-align:center;
}
.cta-final h2{ color:var(--paper); font-size:34px; max-width:520px; margin:0 auto;}
.cta-final p{ color:#AEC0BA; margin-top:16px; font-size:15px;}
.cta-final .btn-primary{ margin-top:30px; }

footer{
  padding:36px 0; font-size:12px; color:var(--text-muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

@media(max-width:820px){
  .hero h1{ font-size:36px; }
  .pillar-grid{ grid-template-columns:1fr; }
  .plan-grid{ grid-template-columns:1fr 1fr; }
  .plan-grid.maatwerk{ grid-template-columns:1fr; }
  .hosting-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .service-row{ grid-template-columns:1fr; gap:6px; }
  .menu-toggle{ display:flex; }
  nav ul{
    display:flex; flex-direction:column; gap:0; position:fixed; top:64px; left:0; right:0; z-index:30;
    background:var(--paper); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
    padding:0 28px;
  }
  nav ul.open{ max-height:400px; padding:12px 28px 20px; }
  nav ul li{ width:100%; }
  nav ul a{ display:block; padding:13px 0; font-size:16px; border-bottom:1px solid var(--line); }
  nav ul li:last-child a{ border-bottom:none; }
  .nav-cta{ display:none; }
  nav ul .nav-cta-mobile{ display:block !important; margin-top:12px; text-align:center; background:var(--ink); color:var(--paper); padding:12px; border-radius:var(--radius); border-bottom:none !important; }
}

:focus-visible{ outline:2px solid var(--flow); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .flow-path{ animation:none; stroke-dasharray:none; opacity:0.4; }
}

/* extra fix: cards blijven leesbaar op zeer smalle schermen (320–390px) */
@media(max-width:480px){
  .plan-grid{ grid-template-columns:1fr; }
  .hosting-grid{ grid-template-columns:1fr; }
  .real-swatches{ flex-wrap:wrap; }
}

/* skip link */
.skip-link{
  position:absolute; top:-60px; left:12px; z-index:1000;
  background:var(--ink); color:var(--paper); padding:12px 20px;
  border-radius:4px; text-decoration:none; font-size:14px; font-weight:500;
  transition:top .15s ease;
}
.skip-link:focus{ top:12px; }
main:focus{ outline:none; }