/* DTC – Dutch Trade Center: minimal, enterprise UX */
:root{
  --brand:#12233A;
  --ink:#0A0F1A;
  --accent:#1F6FEB;
  --bg:#FFFFFF;
  --bg-alt:#F5F7FA;
  --muted:#6B7280;
  --success:#16A34A;
  --warning:#D97706;
  --danger:#DC2626;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,0.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1200px, 100% - 3rem); margin-inline:auto}
.header{
  position:sticky; top:0; z-index:1000; background:#ffffffcc; backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid #e5e7eb;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:0.75rem 0}
.nav a.brand{display:flex; align-items:center; gap:.75rem; font-weight:700; letter-spacing:.2px}
.nav img.logo{height:36px; width:auto}
.nav .links{display:flex; gap:1rem; align-items:center}
.btn{display:inline-block; padding:.8rem 1.05rem; border-radius:12px; border:1px solid transparent; font-weight:600}
.btn.primary{background:var(--brand); color:white}
.btn.secondary{background:var(--bg); border-color:#e5e7eb}
.btn.accent{background:var(--accent); color:white}
.lang-toggle{display:flex; gap:.5rem; align-items:center; border:1px solid #e5e7eb; border-radius:999px; padding:.2rem}
.lang-toggle button{background:none; border:0; padding:.45rem .8rem; border-radius:999px; font-weight:600; color:var(--muted)}
.lang-toggle button.active{background:var(--brand); color:#fff}
.hero{padding:4.5rem 0 2rem; background:
  radial-gradient(1200px 450px at 50% -10%, #1f6feb10, transparent 70%);
}
.hero h1{font-size: clamp(2rem, 3vw + 1rem, 3rem); line-height:1.15; margin:.25rem 0}
.hero p.lead{color:var(--muted); font-size:1.1rem; max-width:60ch}
.hero .clarifier{margin-top:.75rem; color:#475569; font-size:.95rem}
.proofbar{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:.75rem; padding:1rem; background:var(--bg); border:1px solid #e5e7eb; border-radius:12px; box-shadow:var(--shadow);
}
.proofbar .item{display:flex; gap:.75rem; align-items:center; padding:.5rem .25rem}
.proofbar svg{flex:0 0 auto; width:22px; height:22px}
.section{padding:3.5rem 0}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem}
@media (max-width:900px){
  .grid-4{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr}
}
.card{border:1px solid #e5e7eb; border-radius:16px; padding:1.25rem; background:#fff; box-shadow:var(--shadow)}
.kicker{display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color:var(--brand); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem}
.kicker .dot{width:.5rem; height:.5rem; border-radius:999px; background:var(--accent)}
.list{padding-left:1rem}
.list li{margin:.5rem 0}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{padding:.5rem .7rem; border:1px solid #e5e7eb; border-radius:999px; font-weight:600; color:#334155}
.clients{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.85rem}
.client{display:flex; align-items:center; justify-content:center; padding:1rem; background:var(--bg); border:1px dashed #e5e7eb; border-radius:12px; min-height:72px; color:#334155; font-weight:700; letter-spacing:.3px}
.badges{display:flex; gap:.5rem; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:.5rem; border:1px solid #e5e7eb; padding:.45rem .6rem; border-radius:999px; font-weight:600; color:#334155; background:var(--bg)}
.badge svg{width:18px; height:18px}
.footer{border-top:1px solid #e5e7eb; padding:2rem 0; background:var(--bg-alt); color:#334155}
.footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:1rem}
.footer small{color:#64748b}
.footer a{color:#334155}
.notice{background:#F0F9FF; border:1px solid #bae6fd; padding:1rem; border-radius:12px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:.75rem; border-bottom:1px solid #e5e7eb; text-align:left}
.hero-actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem}
/* Language visibility */
[lang-block]{display:none}
:root[data-lang="en"] [lang-block="en"]{display:block}
:root[data-lang="nl"] [lang-block="nl"]{display:block}
/* micro */
.micro{font-size:.85rem; color:#64748b}
/* form */
form .row{display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem}
form .row-1{display:grid; grid-template-columns:1fr; gap:.85rem}
@media (max-width:800px){ form .row{grid-template-columns:1fr} }
input, select, textarea{
  width:100%; padding:.9rem 1rem; border:1px solid #e5e7eb; border-radius:12px; outline:none; font:inherit;
}
input:focus, textarea:focus, select:focus{border-color:var(--brand); box-shadow:0 0 0 4px rgba(18,35,58,.08)}
label{font-weight:600; font-size:.95rem}
hr{border:0; border-top:1px solid #e5e7eb; margin:2rem 0}
/* 404/500 */
.center{min-height:60vh; display:grid; place-items:center; text-align:center; padding:3rem}
.code{font-weight:800; font-size:clamp(3rem,6vw,5rem); letter-spacing:.06em; color:var(--brand)}
/* top bar */
.topbar{background:#0b1220; color:#cbd5e1; font-size:.85rem; padding:.5rem 0}
.topbar a{color:#e2e8f0}
/* proofbar icons color */
.icon{color:var(--accent)}
/* sticky contact */
.cta-stick{position:fixed; bottom:1rem; right:1rem; z-index:999}
.cta-stick a{box-shadow:var(--shadow)}