/* ============================================================
   Tapped — nieuwe website · layout & component styles
   Tokens uit colors_and_type.css
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Anker-doelen niet onder de sticky header (74px) laten landen. */
section[id], [id="top"] { scroll-margin-top: 90px; }
body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
::selection { background: var(--blue-200); color: var(--ink-black); }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.app-root { position: relative; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: 16px; font-weight: 600;
  padding: 13px 24px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; transition: all .17s var(--ease-out); white-space: nowrap;
}
.btn-primary { background: var(--persian-blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { background: var(--blue-600); transform: translateY(-1px); }
.btn-primary:active { background: var(--blue-700); transform: scale(.98); }
.btn-secondary { background: #fff; color: var(--ink-black); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--grey-100); }
.btn-secondary:active { transform: scale(.98); }
.btn-ghost { background: transparent; color: var(--persian-blue); padding-left: 6px; padding-right: 6px; }
.btn-ghost:hover { color: var(--blue-700); gap: 13px; }
.btn-lg { font-size: 17px; padding: 15px 28px; }
.btn-on-ink { background: #fff; color: var(--ink-black); }
.btn-on-ink:hover { background: var(--grey-100); transform: translateY(-1px); }
.btn-mint { background: var(--persian-blue); color: #fff; box-shadow: 0 12px 28px rgba(3,67,206,.28); }
.btn-mint:hover { background: var(--blue-400); transform: translateY(-1px); }

/* ---------- eyebrow ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--persian-blue); }
.eyebrow.mint { color: var(--blue-500); }
.eyebrow.on-ink { color: var(--blue-300); }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow.center::before { display: none; }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(249,250,251,0.8);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, background .2s;
}
.hdr.scrolled { border-color: var(--border); background: rgba(249,250,251,0.92); }
.hdr-in { display: flex; align-items: center; height: 74px; }
.hdr-logo img { height: 25px; }
.hdr-nav { display: flex; align-items: center; gap: 2px; margin-left: 44px; }
.hdr-nav a {
  font-size: 15px; font-weight: 500; color: var(--fg-2);
  padding: 8px 14px; border-radius: 9px; transition: all .15s var(--ease);
}
.hdr-nav a:hover { color: var(--ink-black); background: var(--grey-100); }
.hdr-nav a.active { color: var(--persian-blue); background: var(--blue-50); font-weight: 600; }
.hdr-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hdr-burger { display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 11px; background: #fff; color: var(--ink-black); cursor: pointer; transition: background .15s; }
.hdr-burger:hover { background: var(--grey-100); }
.hdr-mobile { border-top: 1px solid var(--border); background: rgba(249,250,251,0.97); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
.hdr-mobile .wrap { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; padding-bottom: 18px; }
.hdr-mobile a:not(.btn) { font-size: 17px; font-weight: 500; color: var(--fg-1); padding: 12px 8px; border-radius: 10px; }
.hdr-mobile a:not(.btn):hover { background: var(--grey-100); }
.hdr-mobile .btn { margin-top: 10px; color: #fff; }

/* ---------- section scaffolding ---------- */
.section { padding: 100px 0; }
.section.tight { padding: 72px 0; }
.section.ink { background: var(--ink-black); color: var(--fg-on-ink); }
.section.surface { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec-head { max-width: 660px; }
.sec-head.center { margin: 0 auto; text-align: center; }
.sec-head h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -.024em; color: var(--ink-black); margin-top: 16px; text-wrap: balance; }
.sec-head.on-ink h2 { color: #fff; }
.sec-head p { font-size: 18px; line-height: 1.6; color: var(--fg-2); margin-top: 18px; }
.sec-head.on-ink p { color: var(--grey-300); }
.sec-head.center p { margin-left: auto; margin-right: auto; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero-ripple {
  position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%);
  width: 1120px; height: 1120px; max-width: 96%; opacity: .85;
  pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent);
  mask-image: radial-gradient(closest-side, #000 50%, transparent);
}
.hero-ripple > div { position: absolute; inset: 0; border-radius: 50%; }
.rr-glow { background: radial-gradient(circle at 50% 50%, rgba(3,67,206,.18), rgba(3,67,206,.10) 36%, transparent 64%); }
.rr-static { background: repeating-radial-gradient(circle at 50% 50%, rgba(13,27,42,.07) 0 1.2px, transparent 1.2px 44px); }
.rr-pulse { border: 1.5px solid rgba(3,67,206,.42); transform: scale(.1); opacity: 0; transform-origin: center; }
.rr-pulse.p2 { border-color: rgba(3,67,206,.5); }
.rr-pulse.p3 { border-color: rgba(3,67,206,.28); }
.rr-pulse.p4 { border-color: rgba(3,67,206,.3); }
@media (prefers-reduced-motion: no-preference) {
  .rr-static { animation: rr-breathe 16s var(--ease) infinite; }
  .rr-pulse { animation: rr-out 8.4s var(--ease-out) infinite; }
  .rr-pulse.p2 { animation-delay: 2.1s; }
  .rr-pulse.p3 { animation-delay: 4.2s; }
  .rr-pulse.p4 { animation-delay: 6.3s; }
}
@keyframes rr-out {
  0%   { transform: scale(.08); opacity: 0; }
  9%   { opacity: .55; }
  72%  { opacity: .1; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes rr-breathe {
  0%, 100% { transform: scale(1); opacity: .92; }
  50%      { transform: scale(1.045); opacity: .72; }
}

.hero-in { position: relative; padding-top: 92px; padding-bottom: 64px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--fg-2); box-shadow: var(--shadow-xs);
}
.hero-badge b { color: var(--ink-black); font-weight: 600; }
.hero-badge .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--blue-50); color: var(--blue-600); font-weight: 600; font-size: 12px; }
.hero h1 { font-size: clamp(44px, 5.2vw, 72px); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; color: var(--ink-black); text-wrap: balance; margin-top: 22px; }
.hero h1 .hl { color: var(--hl-accent, var(--persian-blue)); position: relative; white-space: nowrap; }
/* roterend woord in de hero-titel */
.hero h1 .nowrap { white-space: nowrap; }
.rotator { display: inline-flex; align-items: baseline; vertical-align: bottom; overflow: hidden; }
.rotator-word { display: inline-block; will-change: transform, opacity; }
.rotator-word.out { animation: rot-out .34s var(--ease) forwards; }
.rotator-word.in { animation: rot-in .42s var(--ease-out) forwards; }
@keyframes rot-out { to { transform: translateY(-0.65em); opacity: 0; } }
@keyframes rot-in { from { transform: translateY(0.65em); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rotator-word.out, .rotator-word.in { animation: none; }
  .rotator-word.out { opacity: 0; }
}
.hero h1 .hl-mint { color: var(--blue-400); }
.hero p.lead { font-size: 20px; line-height: 1.55; color: var(--fg-2); margin-top: 24px; max-width: 32em; }
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust { display: flex; align-items: center; gap: 18px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust .t-item { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--fg-2); font-weight: 500; }
.hero-trust .t-item svg { color: var(--blue-500); flex: none; }
.hero-trust .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--grey-300); }

/* hero visual: code window + floating chips */
.hv { position: relative; width: 100%; max-width: 440px; margin-left: auto; }
.hv-window { background: var(--ink-black); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.hv-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.hv-bar .d { width: 11px; height: 11px; border-radius: 50%; }
.hv-bar .file { margin-left: 10px; font-size: 12px; color: var(--grey-400); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.hv-code { padding: 18px 20px 22px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.85; }
.hv-code .ln { display: block; white-space: pre; }
.hv-code .k { color: #7AA2FF; }
.hv-code .f { color: var(--blue-200); }
.hv-code .s { color: #E5C07B; }
.hv-code .c { color: var(--grey-500); }
.hv-code .p { color: #C8CDD4; }
.hv-code .m { color: #9DA7B3; }
.hv-cursor { display: inline-block; width: 8px; height: 15px; background: var(--persian-blue); vertical-align: -2px; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hv-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 15px; background: #fff; border: 1px solid var(--border);
  border-radius: 13px; box-shadow: var(--shadow-md); font-size: 14px; font-weight: 600; color: var(--ink-black);
}
.hv-chip svg, .hv-chip .tm { width: 22px; height: 22px; flex: none; }
.hv-chip.c1 { top: -22px; left: -30px; }
.hv-chip.c2 { bottom: 64px; left: -42px; }
.hv-chip.c3 { bottom: -20px; right: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .hv-chip { animation: floaty 5s var(--ease) infinite; }
  .hv-chip.c2 { animation-delay: -1.6s; }
  .hv-chip.c3 { animation-delay: -3.2s; }
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* logo strip under hero */
.logostrip { border-top: 1px solid var(--border); position: relative; z-index: 1; }
.logostrip-in { display: flex; align-items: center; gap: 34px; padding-top: 28px; padding-bottom: 28px; flex-wrap: wrap; }
.logostrip .lbl { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.logostrip .marks { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; color: var(--grey-600); }
.logostrip .marks .tech { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; color: var(--grey-600); transition: color .15s; }
.logostrip .marks .tech:hover { color: var(--ink-black); }
.logostrip .marks .tech .tm { width: 24px; height: 24px; }
.tm { display: block; }

/* ============================================================
   MAATWERK CAPABILITIES — bento grid
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 56px; }
.cap {
  background: #fff; border: 1px solid var(--border); border-radius: 22px;
  padding: 30px; box-shadow: var(--shadow-sm); transition: all .2s var(--ease-out);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
}
.cap:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cap.span3 { grid-column: span 3; }
.cap.span2 { grid-column: span 2; }
.cap.span4 { grid-column: span 4; }
.cap.feat { grid-column: span 3; grid-row: span 2; background: var(--ink-black); color: #fff; }
.cap-ic { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--blue-50); color: var(--persian-blue); margin-bottom: 20px; }
.cap-ic.mint { background: var(--blue-50); color: var(--blue-500); }
.cap.feat .cap-ic { background: rgba(3,67,206,.22); color: var(--blue-300); }
.cap h3 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 9px; }
.cap.feat h3 { font-size: 27px; }
.cap p { font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.cap.feat p { color: var(--grey-300); font-size: 16px; }
.cap-list { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.cap-list .li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--grey-200); }
.cap-list .li svg { color: var(--blue-300); flex: none; }
.cap-tag { position: absolute; top: 22px; right: 22px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--blue-50); color: var(--blue-600); }

/* ============================================================
   TECHNIEKEN — dark showcase
   ============================================================ */
.tech-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
.tcat {
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; padding: 26px 24px; transition: all .2s var(--ease-out);
}
.tcat:hover { background: rgba(255,255,255,.06); border-color: rgba(3,67,206,.4); transform: translateY(-3px); }
.tcat-head { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.tcat-head .ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(3,67,206,.22); color: var(--blue-300); flex: none; }
.tcat-head h3 { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.tcat-head .sub { font-size: 12px; color: var(--grey-500); margin-top: 2px; }
.tcat-items { display: flex; flex-direction: column; gap: 14px; }
.titem { display: flex; align-items: center; gap: 13px; }
.titem .tm { width: 30px; height: 30px; flex: none; color: #fff; }
.titem .nm { font-size: 15.5px; font-weight: 600; color: var(--grey-100); }
.titem .ds { font-size: 12.5px; color: var(--grey-500); margin-top: 1px; }
.tech-foot { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 44px; flex-wrap: wrap; }
.tech-foot .tf { display: flex; align-items: center; gap: 11px; }
.tech-foot .tf b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.tech-foot .tf span { font-size: 13.5px; color: var(--grey-400); }
.tech-foot .tf .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: var(--blue-300); flex: none; }
.tech-foot .vr { width: 1px; height: 38px; background: rgba(255,255,255,.12); }

/* ============================================================
   WERKWIJZE — process
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 56px; position: relative; }
.step { position: relative; padding: 0 22px 0 0; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: #fff; border: 1px solid var(--border); font-size: 17px; font-weight: 700; color: var(--persian-blue); box-shadow: var(--shadow-sm); position: relative; z-index: 2; }
.step.done .step-num { background: var(--persian-blue); color: #fff; border-color: var(--persian-blue); }
.step-line { position: absolute; top: 22px; left: 44px; right: 0; height: 2px; background: var(--border); z-index: 1; }
.step:last-child .step-line { display: none; }
.step h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 20px 0 8px; }
.step p { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); padding-right: 8px; }

/* ============================================================
   CLIENT LOGOS — vertrouwd door
   ============================================================ */
.clients { background: linear-gradient(180deg, var(--blue-50) 0%, var(--blue-50) 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.clients-lbl { text-align: center; font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--persian-blue); margin-bottom: 36px; }
.clients-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px 16px; align-items: center; justify-items: center; }
.client-logo { display: flex; align-items: center; justify-content: center; gap: 9px; height: 56px; color: var(--grey-400); }
/* Echte klantlogo's: rustig grijs/monochroom op gelijke hoogte, kleur op hover. */
.client-logo img { max-height: 44px; max-width: 150px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .2s var(--ease), opacity .2s var(--ease); }
.client-logo:hover img { filter: grayscale(0); opacity: 1; }
/* fallback voor SVG/tekst-placeholders (back-compat) */
.client-logo .clm { width: 26px; height: 26px; flex: none; }
.client-logo .clt { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }

/* ============================================================
   PLATFORMS — eigen sectie per product, elk visueel anders
   ============================================================ */
.section.plat-intro { background: #fff; padding-top: 48px; padding-bottom: 0; }
.plat { padding: 96px 0; position: relative; }
.plat-dizoss { padding-top: 40px; }
.plat-in { display: grid; grid-template-columns: 1.04fr .96fr; gap: 60px; align-items: center; }
.plat-in.rev .plat-text { order: 2; }
.plat-name { font-size: clamp(34px, 4.4vw, 54px); font-weight: 700; letter-spacing: -.03em; color: var(--ink-black); line-height: 1; margin: 14px 0 8px; }
.plat-text h3 { font-size: clamp(20px, 2.3vw, 26px); font-weight: 600; letter-spacing: -.012em; color: var(--fg-1); margin-bottom: 16px; }
.plat-text p { font-size: 17px; line-height: 1.62; color: var(--fg-2); max-width: 34em; }
.plat-feats { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 24px 0 30px; }
.plat-feat { display: flex; align-items: center; gap: 11px; font-size: 15.5px; color: var(--fg-2); }
.plat-feat svg { color: var(--persian-blue); flex: none; }
.plat-foot { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* echte platform-logo's + product-beelden */
.plat-logo { height: 46px; width: auto; max-width: 230px; display: block; margin: 0 0 28px; }
.plat-logo-light { filter: brightness(0) invert(1); }
.plat-shot { width: 100%; height: auto; display: block; }
.zk-shot { position: relative; width: 100%; max-width: 430px; height: auto; display: block; margin: 0 auto; }
.ss-shot { width: 100%; height: auto; display: block; }

/* Dizoss — licht, blauw, dashboard */
.plat-dizoss { background: linear-gradient(180deg, #FFFFFF 0%, var(--grey-50) 100%); position: relative; overflow: hidden; }
.plat-dizoss .plat-visual { position: relative; padding: 0 0 0 8px; }
.pd-stage { position: relative; }
.pd-stage::before { content: ""; position: absolute; z-index: 0; inset: -12% -10% -12% 4%; background: radial-gradient(58% 60% at 62% 44%, rgba(230,30,110,.20), rgba(240,96,144,.12) 44%, transparent 74%); filter: blur(6px); }
.pd-stage .plat-shot { position: relative; z-index: 1; border-radius: 14px; overflow: hidden; }
.pd-chip { position: absolute; z-index: 2; left: -14px; bottom: 28px; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 15px; padding: 12px 16px; box-shadow: var(--shadow-lg); }
.pd-chip .pd-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-500); flex: none; }
.pd-chip b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink-black); }
.pd-chip span { font-size: 12px; color: var(--fg-3); }

/* Zirkels — donker, mint, mobiele app */
.plat-zirkels { background: var(--ink-black); color: var(--fg-on-ink); overflow: hidden; }
.plat-zirkels .plat-name, .plat-zirkels .plat-text h3 { color: #fff; }
.plat-zirkels .plat-text p { color: var(--grey-300); }
.plat-zirkels .plat-feat { color: var(--grey-200); }
.plat-zirkels .plat-feat svg { color: var(--blue-300); }
.zk-wrap { position: relative; display: flex; justify-content: center; padding: 26px 0; }
.zk-wrap::before { content: ""; position: absolute; inset: 4% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(3,67,206,.20), transparent 66%); filter: blur(8px); }

/* Sitestein — grijs, tekst links / afbeelding rechts */
.plat-sitestein { background: var(--grey-50); overflow: hidden; }
.plat-sitestein .plat-visual { position: relative; }
.plat-sitestein .plat-visual::before { content: ""; position: absolute; z-index: 0; inset: -8% -6% -8% 0; background: radial-gradient(56% 58% at 56% 46%, rgba(3,67,206,.10), rgba(3,67,206,.07) 48%, transparent 76%); filter: blur(6px); }
.plat-sitestein .ss-shot { position: relative; z-index: 1; }
.ss-pills { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 30px; }
.ss-pill { font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--border); color: var(--fg-2); }

/* ============================================================
   CERT band
   ============================================================ */
.cert { background: var(--ink-black); border-radius: 28px; padding: 56px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.cert h2 { color: #fff; font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.14; max-width: 14em; }
.cert p { color: var(--grey-300); font-size: 16.5px; line-height: 1.62; margin-top: 18px; max-width: 40em; }
.cert-badges { display: flex; flex-direction: column; gap: 14px; }
.cert-badge { display: flex; align-items: center; gap: 15px; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.cert-badge .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(3,67,206,.22); color: var(--blue-300); flex: none; }
.cert-badge b { display: block; color: #fff; font-size: 16px; font-weight: 600; }
.cert-badge span { font-size: 13px; color: var(--grey-400); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 40px; }
.contact-intro h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.024em; line-height: 1.08; color: var(--ink-black); margin-top: 16px; text-wrap: balance; }
.contact-intro p { font-size: 18px; color: var(--fg-2); margin-top: 18px; line-height: 1.6; max-width: 34em; }

/* donkere contactkaart als visueel anker, met de ripple erachter */
.contact-card { position: relative; }
.contact-card-in { position: relative; }
.contact-card h3 { color: var(--ink-black); font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 12px; }
.contact-list { display: flex; flex-direction: column; }
.contact-list li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list .ci { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-50); color: var(--persian-blue); flex: none; }
.contact-list .ci-lbl { display: block; font-size: 12.5px; color: var(--fg-3); }
.contact-list .ci-val { display: block; font-size: 16px; font-weight: 600; color: var(--ink-black); margin-top: 2px; }
a.ci-val:hover { color: var(--persian-blue); }

/* ============================================================
   FOOTER
   ============================================================ */
.ftr { border-top: 1px solid var(--border); padding: 60px 0 40px; position: relative; z-index: 1; }
.ftr-in { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ftr-logo img { height: 23px; margin-bottom: 16px; }
.ftr-logo p { font-size: 14px; color: var(--fg-3); max-width: 26em; line-height: 1.6; }
.ftr-links { display: flex; gap: 60px; }
.ftr-col h4 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); margin-bottom: 14px; }
.ftr-col a { display: block; font-size: 15px; color: var(--fg-2); padding: 5px 0; transition: color .15s; }
.ftr-col a:hover { color: var(--persian-blue); }
.ftr-bottom { display: flex; justify-content: space-between; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--fg-3); flex-wrap: wrap; gap: 12px; }

/* ============================================================
   reveal animation
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); }
  .reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .cap.span3, .cap.feat { grid-column: span 4; }
  .cap.span2 { grid-column: span 2; }
  .cap.feat { grid-row: auto; }
  .tech-cats { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .step-line { display: none; }
}
/* Hero stapelt al onder 960px — in de smalle 2-koloms zone (820–960) werd
   het code-venster te krap en konden de zwebende chips de randen raken. */
@media (max-width: 960px) {
  /* min-width:0 laat de grid-tracks daadwerkelijk krimpen; zonder dit rekken
     lange code-regels (white-space:pre) de track breder dan de viewport. */
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 64px; padding-bottom: 80px; align-items: start; }
  .hero-copy { max-width: 640px; min-width: 0; }
  /* Code-venster gecentreerd met nette maximale breedte i.p.v. rechts-uitgelijnd.
     Het venster pakt de volle breedte; de chips stromen er als rij onder. */
  .hv { display: flex; flex-wrap: wrap; gap: 12px; max-width: 100%; margin: 0; min-width: 0; }
  .hv-window { flex: 1 1 100%; min-width: 0; }
  /* Lange, niet-afbreekbare code-regels mogen horizontaal scrollen binnen het
     venster i.p.v. de hele hero breder te maken dan het scherm. */
  .hv-code { overflow-x: auto; }
  /* Chips zweven niet meer over het venster (overlap/randen), maar stromen er
     als een nette rij onder. */
  .hv-chip { position: static; inset: auto; animation: none; }
}
@media (max-width: 820px) {
  .logostrip-in { gap: 20px; }
  .logostrip .marks { gap: 18px 22px; }
  .hdr-nav, .hdr-cta { display: none; }
  .hdr-burger { display: inline-flex; }
  .cert { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .cap.span3, .cap.feat, .cap.span4 { grid-column: span 2; }
  .tech-cats { grid-template-columns: 1fr; }
  .section { padding: 72px 0; }
  .plat { padding: 64px 0; }
  .plat-in { grid-template-columns: 1fr; gap: 40px; }
  .plat-in.rev .plat-text { order: 0; }
  /* 5 logo's in één rij houden i.p.v. een rommelige 3+2 split */
  .clients-row { gap: 20px 12px; }
  .client-logo img { max-width: 110px; max-height: 36px; }
}
@media (max-width: 560px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .section { padding: 56px 0; }
  /* Titel compacter op telefoons zodat meerdere woorden naast elkaar passen
     i.p.v. ieder woord op een eigen regel. */
  .hero h1 { font-size: clamp(30px, 8.4vw, 40px); margin-top: 0; }
  /* Op smalle telefoons mag 'Jouw [woord],' afbreken i.p.v. buiten beeld lopen
     bij brede roterende woorden (bv. 'platform', 'dashboard'). De breuk mag ná
     'Jouw' vallen; het woord en de komma blijven als één geheel bij elkaar. */
  .hero h1 .nowrap { white-space: normal; }
  .hero h1 .word-comma { white-space: nowrap; }
  /* 'Jouw [woord],' staat altijd op een eigen eerste regel, gevolgd door de
     vaste 'gebouwd met moderne techniek'. Zo verandert de lengte van het
     roterende woord nooit het aantal regels, en springt de content eronder
     niet meer omhoog/omlaag bij het wisselen. */
  .hero h1 .word-comma::after { content: ""; display: block; }
  .hero p.lead { font-size: 18px; }
  .contact-intro h2 { font-size: clamp(26px, 8vw, 38px); }
  /* Footer-kolommen mogen op smalle telefoons afbreken i.p.v. buiten beeld
     te lopen door de vaste gap van 60px. */
  .ftr-links { flex-wrap: wrap; gap: 28px 40px; }
  .bento { grid-template-columns: 1fr; }
  .cap.span2, .cap.span3, .cap.span4, .cap.feat { grid-column: span 1; }
  .steps { grid-template-columns: 1fr; }
  .cert { padding: 36px 28px; }
  /* Op smalle telefoons stromen de 5 logo's gecentreerd door i.p.v. een
     grid met een eenzaam laatste logo. */
  .clients-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 28px; }
  .client-logo { height: 48px; }
  .client-logo img { max-width: 120px; max-height: 34px; }
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   CONTACT FORM — sluit aan op de contactkaart (tokens uit colors_and_type.css)
   ============================================================ */
/* De contact-grid is 2-koloms: links de info (intro + gegevenskaart), rechts
   het formulier als gelijkwaardige actiekaart. Op mobiel valt de grid terug
   naar één kolom (zie media-query), waardoor het formulier onder de info komt. */
.contact-form-in {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

.contact-form-in .field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contact-form-in .field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: var(--tracking-snug);
}
.contact-form-in .optional {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--fg-3);
}

.contact-form-in input,
.contact-form-in textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg-1);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  transition: border-color .17s var(--ease-out), box-shadow .17s var(--ease-out);
}
.contact-form-in textarea {
  resize: vertical;
  min-height: 120px;
  line-height: var(--leading-normal);
}
.contact-form-in input::placeholder,
.contact-form-in textarea::placeholder { color: var(--fg-3); }

.contact-form-in input:hover,
.contact-form-in textarea:hover { border-color: var(--grey-400); }

.contact-form-in input:focus,
.contact-form-in textarea:focus {
  outline: none;
  border-color: var(--persian-blue);
  box-shadow: 0 0 0 3px rgba(3,67,206,0.16);
}

/* veld in foutstaat */
.contact-form-in .field:has(.field-error) input,
.contact-form-in .field:has(.field-error) textarea {
  border-color: var(--danger);
}
.contact-form-in .field:has(.field-error) input:focus,
.contact-form-in .field:has(.field-error) textarea:focus {
  box-shadow: 0 0 0 3px rgba(229,72,77,0.16);
}

.contact-form-in .field-error {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--danger);
}

/* algemene fout bovenaan het formulier */
.contact-form-in .form-error {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--danger);
  background: rgba(229,72,77,0.08);
  border: 1px solid rgba(229,72,77,0.30);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

/* inline succesmelding na AJAX-verzending (formulier blijft staan) */
.contact-form-in .form-success-inline {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--mint-600);
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.contact-form-in [hidden] { display: none; }

.contact-form-in .btn-primary { align-self: start; }
.contact-form-in .btn-primary[disabled] { opacity: .6; cursor: progress; }

/* succesbericht na verzenden — zelfde card-taal als het formulier */
.form-success {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--mint-400);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
.form-success h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: var(--ink-black);
  margin-bottom: var(--space-2);
}
.form-success p {
  font-size: var(--text-base);
  color: var(--fg-2);
  line-height: var(--leading-normal);
}

@media (max-width: 820px) {
  .contact-form-in,
  .form-success { padding: var(--space-5); }
  .contact-form-in .btn-primary { align-self: stretch; }
}

/* tech-items in de grid zijn links naar de /<slug>-expert pagina's */
a.titem { text-decoration: none; color: inherit; cursor: pointer; transition: transform .15s var(--ease-out, ease), opacity .15s ease; }
a.titem:hover { transform: translateX(2px); }
a.titem:hover .nm { color: var(--blue-300); }

/* tech-landingspagina secties */
.tech-hero h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: var(--ink-black); margin: 14px 0 18px; text-wrap: balance; }
.tech-hero .lead { font-size: 19px; color: var(--fg-2); line-height: 1.6; max-width: 40em; }
.tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 40px; }
.tcat-body { color: var(--fg-2); line-height: 1.6; font-size: 15px; }
.section.ink .tcat-body { color: var(--grey-300, #cbd5e1); }
.tech-expertise { max-width: 46em; }
.tech-expertise h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.02em; color: var(--ink-black); margin: 12px 0 16px; }
.tech-expertise p { font-size: 17px; color: var(--fg-2); line-height: 1.7; }
.tech-expertise .hero-trust { margin-top: 28px; }
.tech-cta { text-align: center; }
.tech-cta h2 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; margin-bottom: 12px; }
.tech-cta p { color: var(--grey-300, #cbd5e1); margin-bottom: 24px; }

/* tcat-kaarten op lichte secties (tech-pagina voordelen/voorbeelden) leesbaar maken */
.section:not(.ink) .tcat { background: var(--bg-elevated, #fff); border: 1px solid var(--border, #e5e7eb); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04)); }
.section:not(.ink) .tcat:hover { background: var(--bg-elevated, #fff); border-color: var(--persian-blue, #0343CE); }
.section:not(.ink) .tcat-head h3 { color: var(--ink-black, #0D1B2A); }
.section:not(.ink) .tcat-body { color: var(--fg-2, #44525f); }

/* juridische pagina's: leesbare proza-kolom */
.legal { max-width: 760px; }
.legal h1 { font-size: clamp(30px, 4.5vw, 48px); font-weight: 700; letter-spacing: -.02em; color: var(--ink-black); margin-bottom: 8px; }
.legal .legal-intro { color: var(--fg-3); font-size: 15px; margin-bottom: 28px; }
.legal h2 { font-size: 20px; font-weight: 600; color: var(--ink-black); letter-spacing: -.01em; margin: 36px 0 12px; }
.legal p { color: var(--fg-2); line-height: 1.7; font-size: 16px; margin-bottom: 14px; }
.legal ul { margin: 0 0 14px 22px; color: var(--fg-2); line-height: 1.7; }
.legal li { margin-bottom: 6px; }
.legal .legal-slot { margin-top: 32px; color: var(--fg-3); font-style: italic; }

/* footer-onderbalk met juridische links */
.ftr-bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.ftr-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.ftr-legal a { color: var(--fg-3); text-decoration: none; font-size: 14px; transition: color .15s var(--ease-out, ease); }
.ftr-legal a:hover { color: var(--persian-blue, #0343CE); }