:root{--glass-depth-0:0px;--glass-depth-5:4px;--glass-depth-10:8px;--glass-depth-15:12px;--glass-depth-20:16px;--glass-depth-25:20px;--glass-depth-30:24px;--glass-frost-10:0.25;--glass-frost-15:0.35;--glass-frost-20:0.45;--glass-frost-25:0.55;--glass-bg:rgba(255,255,255,var(--glass-frost-20));--glass-bg-dark:rgba(0,0,0,.25);--glass-blur:var(--glass-depth-20);--glass-saturate:180%;--glass-border:hsla(0,0%,100%,.5);--glass-border-dark:hsla(0,0%,100%,.15);--glass-highlight:hsla(0,0%,100%,.7);--glass-highlight-amplitude:4px;--glass-shadow:rgba(31,38,135,.25);--lens-edge-light:hsla(0,0%,100%,.8);--lens-edge-dark:hsla(0,0%,100%,.3);--glass-motion-x:0px;--glass-motion-y:0px;--glass-tilt-x:0deg;--glass-tilt-y:0deg;--glass-tint:transparent;--glass-tint-opacity:0.1;--gradient-1:#667eea;--gradient-2:#764ba2;--gradient-3:#f093fb;--gradient-4:#f5576c;--gradient-5:#4facfe;--gradient-6:#00f2fe;--radius-sm:12px;--radius-md:20px;--radius-lg:28px;--radius-xl:40px;--radius-pill:9999px;--radius-inset-sm:4px;--radius-inset-md:8px;--radius-inset-lg:12px;--radius-lg-nested:calc(var(--radius-lg) - var(--radius-inset-lg));--radius-xl-nested:calc(var(--radius-xl) - var(--radius-inset-lg));--radius-md-nested:calc(var(--radius-md) - var(--radius-inset-md));--font-system:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--font-swiss:"Helvetica Neue",Helvetica,Arial,sans-serif;--text-xs:0.6875rem;--text-sm:0.8125rem;--text-base:1.0625rem;--text-lg:1.25rem;--text-xl:1.5rem;--text-2xl:1.75rem;--text-3xl:2.125rem;--text-4xl:2.75rem;--leading-tight:1.2;--leading-snug:1.35;--leading-normal:1.5;--leading-relaxed:1.65;--tracking-tight:-0.02em;--tracking-normal:0;--tracking-wide:0.02em;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--card-padding:var(--space-6);--card-gap:var(--space-4);--section-gap:var(--space-16);--nav-padding:var(--space-4) var(--space-6);--touch-target-min:44px;--color-primary:#007aff;--color-secondary:#5856d6;--color-success:#34c759;--color-warning:#ff9500;--color-danger:#ff3b30;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--text-primary:var(--gray-900);--text-secondary:var(--gray-600);--text-tertiary:var(--gray-400);--text-inverse:#fff;--bg-primary:#fff;--bg-secondary:var(--gray-50);--bg-tertiary:var(--gray-100)}@media (prefers-color-scheme:dark){:root{--glass-bg:rgba(30,30,30,.7);--glass-border:hsla(0,0%,100%,.15);--glass-highlight:hsla(0,0%,100%,.15);--glass-shadow:rgba(0,0,0,.5);--lens-edge-light:hsla(0,0%,100%,.2);--lens-edge-dark:rgba(0,0,0,.4);--text-primary:#fff;--text-secondary:hsla(0,0%,100%,.7);--text-tertiary:hsla(0,0%,100%,.5);--text-inverse:var(--gray-900);--bg-primary:#000;--bg-secondary:#1c1c1e;--bg-tertiary:#2c2c2e}}.glass{backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:0 8px 32px var(--glass-shadow),inset 0 1px 0 var(--glass-highlight);position:relative}.glass:before{background:linear-gradient(135deg,var(--lens-edge-light) 0,transparent 40%,transparent 60%,var(--lens-edge-dark) 100%);inset:0;opacity:.5}.glass:after,.glass:before{border-radius:inherit;content:"";pointer-events:none;position:absolute}.glass:after{background:linear-gradient(180deg,hsla(0,0%,100%,.15),transparent);height:50%;left:0;right:0;top:0}.glass-depth-5{--glass-blur:4px;--glass-bg:hsla(0,0%,100%,.25)}.glass-depth-10{--glass-blur:8px;--glass-bg:hsla(0,0%,100%,.3)}.glass-depth-15{--glass-blur:12px;--glass-bg:hsla(0,0%,100%,.35)}.glass-depth-20{--glass-blur:16px;--glass-bg:hsla(0,0%,100%,.4)}.glass-depth-25{--glass-blur:20px;--glass-bg:hsla(0,0%,100%,.45)}.glass-depth-30{--glass-blur:24px;--glass-bg:hsla(0,0%,100%,.5)}.glass-frost-10{--glass-bg:hsla(0,0%,100%,.25)}.glass-frost-15{--glass-bg:hsla(0,0%,100%,.35)}.glass-frost-20{--glass-bg:hsla(0,0%,100%,.45)}.glass-frost-25{--glass-bg:hsla(0,0%,100%,.55)}.glass-nav{--glass-blur:20px;--glass-bg:hsla(0,0%,100%,.35)}.glass-card{--glass-blur:10px;--glass-bg:hsla(0,0%,100%,.25)}.glass-modal{--glass-blur:25px;--glass-bg:hsla(0,0%,100%,.45);--glass-shadow:rgba(31,38,135,.25)}.glass-subtle{--glass-blur:4px;--glass-bg:hsla(0,0%,100%,.08);border:none;box-shadow:none}@media (prefers-color-scheme:dark){.glass-depth-5{--glass-bg:rgba(40,40,40,.4)}.glass-depth-10{--glass-bg:rgba(40,40,40,.5)}.glass-depth-15{--glass-bg:rgba(40,40,40,.55)}.glass-depth-20{--glass-bg:rgba(40,40,40,.6)}.glass-depth-25{--glass-bg:rgba(40,40,40,.65)}.glass-depth-30{--glass-bg:rgba(40,40,40,.7)}.glass-frost-10{--glass-bg:rgba(40,40,40,.4)}.glass-frost-15{--glass-bg:rgba(40,40,40,.5)}.glass-frost-20{--glass-bg:rgba(40,40,40,.6)}.glass-frost-25{--glass-bg:rgba(40,40,40,.7)}.glass-nav{--glass-bg:rgba(40,40,40,.55)}.glass-card{--glass-bg:rgba(40,40,40,.4)}.glass-modal{--glass-bg:rgba(40,40,40,.65)}.glass-subtle{--glass-bg:hsla(0,0%,100%,.06)}}.glass-concentric{--parent-radius:var(--radius-lg);--inset-padding:var(--radius-inset-lg)}.glass-concentric>*{border-radius:calc(var(--parent-radius) - var(--inset-padding))}.glass-concentric-sm{--parent-radius:var(--radius-md);--inset-padding:var(--radius-inset-sm)}.glass-concentric-lg{--parent-radius:var(--radius-xl);--inset-padding:var(--radius-inset-lg)}.glass-motion{overflow:hidden;position:relative}.glass-motion .motion-highlight,.glass-motion:after{background:radial-gradient(ellipse 40% 30% at center,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.15) 30%,transparent 60%);border-radius:inherit;content:"";height:200%;left:-50%;pointer-events:none;position:absolute;top:-50%;transform:translate(var(--motion-x,0),var(--motion-y,0));transition:transform .15s ease-out;width:200%;will-change:transform}@keyframes lg-motion-idle{0%,to{transform:translate(-3%,-5%)}50%{transform:translate(3%,5%)}}.glass-motion:not(.motion-active) .motion-highlight,.glass-motion:not(.motion-active):after{animation:lg-motion-idle 4s ease-in-out infinite}.glass-specular{overflow:hidden;position:relative}.glass-specular:after{animation:lg-specular-shimmer 4s ease-in-out infinite;background:radial-gradient(ellipse 70% 50% at var(--specular-x,50%) var(--specular-y,30%),hsla(0,0%,100%,.4) 0,transparent 60%);border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}@keyframes lg-specular-shimmer{0%,to{--specular-x:40%;--specular-y:25%;opacity:.8}25%{--specular-x:60%;--specular-y:30%;opacity:1}50%{--specular-x:55%;--specular-y:40%;opacity:.9}75%{--specular-x:45%;--specular-y:35%;opacity:1}}@supports not (animation:lg-specular-shimmer 1s){.glass-specular:after{animation:lg-specular-shimmer-fallback 4s ease-in-out infinite}@keyframes lg-specular-shimmer-fallback{0%,to{background-position:40% 25%;opacity:.8}50%{background-position:60% 40%;opacity:1}}}.glass-adaptive{position:relative;--glass-tint:rgba(102,126,234,.1);background:linear-gradient(135deg,var(--glass-tint) 0,transparent 50%),var(--glass-bg);border:1px solid color-mix(in srgb,var(--glass-tint) 30%,var(--glass-border))}.glass-adaptive:before{background:linear-gradient(135deg,color-mix(in srgb,var(--glass-tint) 40%,hsla(0,0%,100%,.3)) 0,transparent 40%,transparent 60%,var(--lens-edge-dark) 100%)}.glass-adaptive.glass-on-light{--glass-tint:rgba(0,0,0,.05)}.glass-adaptive.glass-on-dark{--glass-tint:hsla(0,0%,100%,.08)}.glass-tinted{background:linear-gradient(var(--glass-tint),var(--glass-tint)),var(--glass-bg);background-blend-mode:overlay}.glass-tinted:before{background:linear-gradient(135deg,color-mix(in srgb,var(--glass-tint) 20%,var(--lens-edge-light)) 0,transparent 40%,transparent 60%,var(--lens-edge-dark) 100%)}@supports not (backdrop-filter:blur(1px)){.glass,.glass-card,.glass-modal,.glass-nav{background:hsla(0,0%,100%,.95)}@media (prefers-color-scheme:dark){.glass,.glass-card,.glass-modal,.glass-nav{background:rgba(30,30,30,.95)}}}.mesh-gradient{background:radial-gradient(at 40% 20%,rgba(102,126,234,.4) 0,transparent 50%),radial-gradient(at 80% 0,rgba(118,75,162,.3) 0,transparent 50%),radial-gradient(at 0 50%,rgba(240,147,251,.3) 0,transparent 50%),radial-gradient(at 80% 50%,rgba(79,172,254,.3) 0,transparent 50%),radial-gradient(at 0 100%,rgba(245,87,108,.2) 0,transparent 50%),radial-gradient(at 80% 100%,rgba(0,242,254,.2) 0,transparent 50%),linear-gradient(180deg,#f8fafc,#e2e8f0);background-attachment:fixed;inset:0;position:fixed;z-index:-1}.mesh-gradient-animated{background:linear-gradient(135deg,#f5f7fa,#e4e9f2);inset:0;overflow:hidden;position:fixed;z-index:-1}.mesh-gradient-animated:after,.mesh-gradient-animated:before{animation:lg-float 20s ease-in-out infinite;border-radius:50%;content:"";filter:blur(80px);position:absolute}.mesh-gradient-animated:before{background:linear-gradient(135deg,rgba(102,126,234,.6),rgba(118,75,162,.5));height:600px;left:-100px;top:-200px;width:600px}.mesh-gradient-animated:after{animation-delay:-10s;background:linear-gradient(135deg,rgba(79,172,254,.5),rgba(0,242,254,.4));bottom:-150px;height:500px;right:-100px;width:500px}.mesh-orb{border-radius:50%;filter:blur(80px);pointer-events:none;position:absolute}.mesh-orb-1{animation:lg-float2 25s ease-in-out infinite;background:linear-gradient(135deg,rgba(240,147,251,.5),rgba(245,87,108,.4));height:400px;right:10%;top:30%;width:400px}.mesh-orb-2{animation:lg-float3 30s ease-in-out infinite;background:linear-gradient(135deg,rgba(0,242,254,.4),rgba(79,172,254,.3));height:350px;left:20%;top:50%;width:350px}.mesh-orb-3{animation:lg-float 22s ease-in-out infinite reverse;background:linear-gradient(135deg,rgba(118,75,162,.4),rgba(102,126,234,.3));bottom:20%;height:450px;left:50%;width:450px}@keyframes lg-float{0%,to{transform:translate(0) rotate(0deg)}25%{transform:translate(50px,50px) rotate(5deg)}50%{transform:translateY(100px) rotate(0deg)}75%{transform:translate(-50px,50px) rotate(-5deg)}}@keyframes lg-float2{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-30px,60px) scale(1.05)}66%{transform:translate(40px,-40px) scale(.95)}}@keyframes lg-float3{0%,to{transform:translate(0) rotate(0deg)}50%{transform:translate(70px,-50px) rotate(-5deg)}}.section-gradient{background:radial-gradient(at 20% 30%,rgba(102,126,234,.15) 0,transparent 50%),radial-gradient(at 80% 70%,rgba(118,75,162,.1) 0,transparent 50%),var(--bg-secondary);position:relative}.scroll-edge-soft{overflow:hidden;position:relative}.scroll-edge-soft:after,.scroll-edge-soft:before{content:"";height:40px;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition:opacity .3s ease;z-index:10}.scroll-edge-soft:before{background:linear-gradient(to bottom,var(--bg-primary) 0,transparent 100%);top:0}.scroll-edge-soft:after{background:linear-gradient(to top,var(--bg-primary) 0,transparent 100%);bottom:0}.scroll-edge-soft.scrolled-bottom:after,.scroll-edge-soft.scrolled-top:before{opacity:1}.scroll-edge-hard{overflow:hidden;position:relative}.scroll-edge-hard:after,.scroll-edge-hard:before{background:var(--glass-border);content:"";height:1px;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition:opacity .2s ease;z-index:10}.scroll-edge-hard:before{box-shadow:0 2px 8px rgba(0,0,0,.1);top:0}.scroll-edge-hard:after{bottom:0;box-shadow:0 -2px 8px rgba(0,0,0,.1)}.scroll-edge-hard.scrolled-bottom:after,.scroll-edge-hard.scrolled-top:before{opacity:1}.glass-scroll{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.glass-scroll::-webkit-scrollbar{width:8px}.glass-scroll::-webkit-scrollbar-track{background:transparent}.glass-scroll::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:var(--radius-pill)}.glass-scroll::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.glass-debug .accordion-item,.glass-debug .card-glass,.glass-debug .expert-card,.glass-debug .glass,.glass-debug .glass-card,.glass-debug .glass-modal,.glass-debug .glass-nav,.glass-debug .glossary-term{outline:2px dashed rgba(255,0,0,.5);outline-offset:-2px}.glass-debug .glass:before{background:rgba(255,0,0,.8);border-radius:2px;color:#fff;content:"GLASS LAYER";font-size:9px;padding:2px 4px;position:absolute;right:2px;top:2px;z-index:9999}.glass-debug [data-glass-warning]:after{background:var(--color-danger);border-radius:var(--radius-sm);color:#fff;content:"⚠️ Too many glass layers!";font-size:var(--text-sm);padding:8px 12px;position:fixed;right:10px;top:10px;z-index:99999}@media (prefers-color-scheme:dark){.mesh-gradient{background:radial-gradient(at 40% 20%,rgba(102,126,234,.3) 0,transparent 50%),radial-gradient(at 80% 0,rgba(118,75,162,.25) 0,transparent 50%),radial-gradient(at 0 50%,rgba(240,147,251,.2) 0,transparent 50%),radial-gradient(at 80% 50%,rgba(79,172,254,.2) 0,transparent 50%),radial-gradient(at 0 100%,rgba(245,87,108,.15) 0,transparent 50%),radial-gradient(at 80% 100%,rgba(0,242,254,.15) 0,transparent 50%),linear-gradient(180deg,#0f0f1a,#1a1a2e)}.mesh-gradient-animated{background:linear-gradient(135deg,#0f0f1a,#1a1a2e)}.mesh-gradient-animated:before{background:linear-gradient(135deg,rgba(102,126,234,.5),rgba(118,75,162,.4))}.mesh-gradient-animated:after{background:linear-gradient(135deg,rgba(79,172,254,.4),rgba(0,242,254,.3))}.mesh-orb-1{background:linear-gradient(135deg,rgba(240,147,251,.4),rgba(245,87,108,.3))}.mesh-orb-2{background:linear-gradient(135deg,rgba(0,242,254,.3),rgba(79,172,254,.25))}.mesh-orb-3{background:linear-gradient(135deg,rgba(118,75,162,.35),rgba(102,126,234,.25))}.section-gradient{background:radial-gradient(at 20% 30%,rgba(102,126,234,.1) 0,transparent 50%),radial-gradient(at 80% 70%,rgba(118,75,162,.08) 0,transparent 50%),var(--bg-secondary)}}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}.card-glass:focus-visible,.glass:focus-visible{box-shadow:0 8px 32px var(--glass-shadow),inset 0 1px 0 var(--glass-highlight),0 0 0 4px rgba(0,122,255,.15);outline:2px solid var(--color-primary);outline-offset:4px}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-reduced-transparency:reduce){.accordion-item,.card-glass,.expert-card,.glass,.glass-card,.glass-modal,.glass-nav,.glossary-term,.nav-glass,.toc-glass{--glass-bg:hsla(0,0%,100%,.85);backdrop-filter:blur(4px)}@media (prefers-color-scheme:dark){.accordion-item,.card-glass,.expert-card,.glass,.glass-card,.glass-modal,.glass-nav,.glossary-term,.nav-glass,.toc-glass{--glass-bg:rgba(30,30,30,.9)}}}@media (prefers-contrast:more){:root{--glass-border:rgba(0,0,0,.3);--text-secondary:var(--gray-700);--text-tertiary:var(--gray-600)}.card-glass,.glass{border-width:2px}}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.card-glass .card-body,.card-glass .card-title,.glass-card .text-body,.glass-card .text-headline{text-shadow:0 1px 2px rgba(0,0,0,.1)}@media (prefers-color-scheme:dark){.card-glass .card-body,.card-glass .card-title,.glass-card .text-body,.glass-card .text-headline{text-shadow:0 1px 3px rgba(0,0,0,.3)}}.skip-link{background:var(--color-primary);border-radius:var(--radius-md);color:var(--text-inverse);left:50%;padding:var(--space-3) var(--space-6);position:absolute;top:-100%;transform:translateX(-50%);transition:top .2s ease;z-index:9999}.skip-link:focus{top:var(--space-4)}/* ==========================================================================
   Drive4Recycle — design system
   Blauwdruk-esthetiek: diep marineblauw fundament, koningsblauw als signaal,
   wit als de kleur van data en bewijs. Eén mintgroen accent voor circulaire
   signalen. Zie docs/MERK.md §14.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Kleur */
  --ink: #050f2b;
  --navy: #081a4d;
  --navy-700: #0c2466;
  --navy-500: #15337f;
  --blue: #1a46e5;
  --blue-600: #1536bd;
  --blue-300: #7fa0ff;
  --blue-200: #b7c7ff;

  /* Accent: een lichtere blauwtint. Geen groen — de hele identiteit is
     blauw met wit, en een tweede kleur verzwakt dat alleen maar. */
  --accent: #8aa9ff;
  --accent-deep: #2d5bff;

  --paper: #ffffff;
  --mist: #f2f5fd;
  --mist-deep: #e7edfb;

  --text: #0b1a3d;
  --text-soft: #475b85;
  --text-faint: #7f8dab;

  --line: rgba(11, 26, 61, 0.12);
  --line-soft: rgba(11, 26, 61, 0.07);
  --line-dark: rgba(255, 255, 255, 0.14);
  --line-dark-soft: rgba(255, 255, 255, 0.07);

  /* Typografie: een grotesk met karakter voor koppen, een smalle
     tekstletter voor lopende tekst, monospace voor meetwaarden. */
  --display: "Space Grotesk", "Inter Tight", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, monospace;

  /* Ritme */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  /* Raster */
  --grid-size: 38px;

  --ease: cubic-bezier(0.22, 0.68, 0.32, 1);
  --shadow-sm: 0 1px 2px rgba(8, 26, 77, 0.06), 0 6px 18px rgba(8, 26, 77, 0.05);
  --shadow-md: 0 2px 4px rgba(8, 26, 77, 0.07), 0 18px 44px rgba(8, 26, 77, 0.1);
  --shadow-lg: 0 30px 80px rgba(5, 15, 43, 0.22);
}

/* --- 2. Reset ------------------------------------------------------------ */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.dark :focus-visible,
.band--dark :focus-visible {
  outline-color: var(--accent);
}

::selection {
  background: var(--blue);
  color: #fff;
}

/* --- 3. Typografie ------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.6rem, 6.4vw, 5.1rem);
  line-height: 0.98;
  letter-spacing: -0.038em;
}

.h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.034em;
}

.h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  letter-spacing: -0.024em;
  line-height: 1.16;
}

.h4 {
  font-size: 1.1rem;
  letter-spacing: -0.016em;
  line-height: 1.25;
}

.lede {
  font-size: clamp(1.06rem, 1.55vw, 1.3rem);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 58ch;
  text-wrap: pretty;
}

p {
  text-wrap: pretty;
}

.muted {
  color: var(--text-soft);
}

.small {
  font-size: 0.875rem;
  line-height: 1.55;
}

.fine {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-faint);
}

/* Micro-label: [ 01 ] SECTIE — verwijzing naar inventarisatie en bewijs */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--blue);
}

.label::before {
  content: "";
  width: 1.6em;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.label--plain::before {
  display: none;
}

.label__num {
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}

/* --- 4. Layout ----------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 920px;
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.stack > * + * {
  margin-top: var(--gap, 1rem);
}

.head {
  max-width: 44ch;
}

.head .label {
  margin-bottom: 1.4rem;
}

.head .lede {
  margin-top: 1.4rem;
}

.head--wide {
  max-width: 62ch;
}

.head--center {
  margin-inline: auto;
  text-align: center;
}

.head--center .lede {
  margin-inline: auto;
}

.head--center .label::before {
  display: none;
}

.split {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--wide-left {
    grid-template-columns: 1.08fr 0.92fr;
  }
  .split--wide-right {
    grid-template-columns: 0.92fr 1.08fr;
  }
}

.grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 940px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 640px) and (max-width: 939px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 5. Banden (licht / mist / donker) ----------------------------------- */

.band--mist {
  background: var(--mist);
}

.band--dark {
  background: var(--navy);
  color: #eaf0ff;
}

.band--dark h1,
.band--dark h2,
.band--dark h3,
.band--dark h4 {
  color: #fff;
}

.band--dark .lede,
.band--dark .muted {
  color: #a9bbe6;
}

.band--dark .label {
  color: var(--accent);
}

.band--dark .fine {
  color: #7d92c4;
}

.band--ink {
  background: var(--ink);
  color: #e6edff;
}

/* Blauwdrukraster */
.gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
      to right,
      var(--line-soft) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  mask-image: radial-gradient(
    ellipse 110% 85% at 50% 40%,
    #000 35%,
    transparent 100%
  );
}

.band--dark .gridlines,
.band--ink .gridlines {
  background-image: linear-gradient(
      to right,
      var(--line-dark-soft) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, var(--line-dark-soft) 1px, transparent 1px);
}

.section > .container {
  position: relative;
  z-index: 1;
}

/* Hairline met hoekkruisjes */
.rule {
  position: relative;
  height: 1px;
  background: var(--line);
}

.band--dark .rule {
  background: var(--line-dark);
}

/* --- 6. Knoppen ---------------------------------------------------------- */

.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  --btn-bd: var(--blue);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.92em 1.5em;
  font-size: 0.945rem;
  font-weight: 520;
  letter-spacing: -0.012em;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease),
    background 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.btn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 10px 26px rgba(26, 70, 229, 0.26);
}

.btn:active {
  transform: translateY(0);
}

.btn svg {
  flex: none;
}

.btn--wa {
  --btn-bg: var(--blue);
  --btn-bd: var(--blue);
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--navy);
  --btn-bd: #fff;
}

.btn--light:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line);
}

.btn--ghost:hover {
  --btn-bd: var(--blue);
  --btn-fg: var(--blue);
  box-shadow: none;
}

.band--dark .btn--ghost,
.hero .btn--ghost,
.cta-band .btn--ghost {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.3);
}

.band--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.cta-band .btn--ghost:hover {
  --btn-bd: #fff;
  --btn-fg: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.btn--sm {
  padding: 0.65em 1.15em;
  font-size: 0.85rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* Tekstlink met pijl */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 520;
  font-size: 0.945rem;
  color: var(--blue);
  transition: gap 0.2s var(--ease);
}

.arrow-link svg {
  transition: transform 0.25s var(--ease);
}

.arrow-link:hover svg {
  transform: translateX(3px);
}

.band--dark .arrow-link {
  color: var(--accent);
}

/* --- 7. Kaarten ---------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.3s var(--ease);
}

.card:hover {
  border-color: rgba(26, 70, 229, 0.42);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.card--static:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}

.card__num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--blue);
  opacity: 0.75;
}

.card p {
  color: var(--text-soft);
  font-size: 0.945rem;
}

.band--dark .card {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line-dark);
}

.band--dark .card:hover {
  border-color: rgba(138, 169, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.band--dark .card p {
  color: #a9bbe6;
}

.band--dark .card__num {
  color: var(--accent);
}

.icon-box {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(26, 70, 229, 0.08);
  color: var(--blue);
  margin-bottom: 0.35rem;
}

.band--dark .icon-box {
  background: rgba(138, 169, 255, 0.12);
  color: var(--accent);
}

/* --- 8. Lijst met vinkjes ------------------------------------------------ */

.checks {
  display: grid;
  gap: 0.7rem;
}

.checks li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.96rem;
  color: var(--text-soft);
}

.checks li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 0.15em;
  border-radius: 50%;
  background: rgba(138, 169, 255, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.1' fill='none' stroke='%232d5bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.band--dark .checks li {
  color: #b3c4ea;
}

/* Op een donkere band moet het vinkje wit zijn, anders verdwijnt het. */
.band--dark .checks li::before,
.cta-band .checks li::before {
  background-color: rgba(255, 255, 255, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.1' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- 9. Chips ------------------------------------------------------------ */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.52em 0.95em;
  font-size: 0.875rem;
  color: var(--text-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.chip:hover {
  border-color: rgba(26, 70, 229, 0.4);
  color: var(--text);
}

.band--mist .chip {
  background: var(--paper);
}

.band--dark .chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-dark);
  color: #b3c4ea;
}

/* --- 10. Statistieken ---------------------------------------------------- */

.stat__value {
  font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  font-weight: 560;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.band--dark .stat__value {
  color: #fff;
}

.stat__label {
  margin-top: 0.8rem;
  font-size: 0.92rem;
  color: var(--text-soft);
  max-width: 28ch;
}

.band--dark .stat__label {
  color: #a9bbe6;
}

/* --- 11. Navigatie ------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.nav[data-scrolled="true"] {
  border-bottom-color: var(--line);
}

.nav--over-dark {
  position: fixed;
  inset: 0 0 auto;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
}

.nav--over-dark[data-scrolled="true"] {
  background: rgba(8, 26, 77, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line-dark);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 72px;
}

.nav__links {
  display: none;
  align-items: center;
  gap: 0.35rem;
}

@media (min-width: 1000px) {
  .nav__links {
    display: flex;
  }
}

.nav__link {
  padding: 0.5em 0.85em;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 460;
  color: var(--text-soft);
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--text);
  background: rgba(11, 26, 61, 0.05);
}

.nav--over-dark .nav__link {
  color: rgba(255, 255, 255, 0.76);
}

.nav--over-dark .nav__link:hover,
.nav--over-dark .nav__link[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav__cta {
  display: none;
}

@media (min-width: 720px) {
  .nav__cta {
    display: inline-flex;
  }
}

.nav__burger {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.nav--over-dark .nav__burger {
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

@media (min-width: 1000px) {
  .nav__burger {
    display: none;
  }
}

.nav__panel {
  display: none;
  padding: 0.5rem 0 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.nav__panel[data-open="true"] {
  display: block;
}

.nav--over-dark .nav__panel {
  border-top-color: var(--line-dark);
  background: var(--navy);
}

.nav__panel a {
  display: block;
  padding: 0.85rem 0;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--line-soft);
}

.nav--over-dark .nav__panel a {
  border-bottom-color: var(--line-dark-soft);
}

/* Knoppen in het donkere uitklapmenu krijgen de donkere-band-uitvoering. */
.nav--over-dark .nav__panel .btn--ghost {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.3);
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

.nav__panel .btn-row {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.6rem;
}

/* In het uitklapmenu mogen knoplabels afbreken: de kolom is smal. */
.nav__panel .btn {
  display: flex;
  width: 100%;
  white-space: normal;
  text-align: center;
  padding-inline: 1.1em;
}

@media (min-width: 1000px) {
  .nav__panel {
    display: none !important;
  }
}

/* --- 12. Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(
      120% 90% at 78% 8%,
      rgba(26, 70, 229, 0.58) 0%,
      transparent 58%
    ),
    radial-gradient(90% 70% at 8% 95%, rgba(138, 169, 255, 0.16) 0%, transparent 60%),
    linear-gradient(170deg, #0a1f5c 0%, #081a4d 48%, #050f2b 100%);
}

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

.hero h1 {
  color: #fff;
  margin-top: 1.5rem;
}

.hero .lede {
  color: #b6c7f0;
  margin-top: 1.5rem;
  max-width: 48ch;
}

.hero .label {
  color: var(--accent);
}

/* --- 13. Stappen --------------------------------------------------------- */

.steps {
  display: grid;
  gap: 1.25rem;
  counter-reset: step;
}

@media (min-width: 680px) {
  .steps--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .steps--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.6rem 1.5rem 1.8rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.3s var(--ease);
}

.step:hover {
  border-color: rgba(26, 70, 229, 0.42);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 26px;
  margin-bottom: 0.4rem;
}

/* Koppen op gelijke hoogte houden, zodat de tekst eronder uitlijnt. */
.step h3 {
  min-height: 2.35em;
}

.step__num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--blue);
}

.step__art {
  height: 122px;
  margin: 0.2rem 0 0.9rem;
  display: grid;
  place-items: center;
}

/* De illustratie schaalt op hoogte, niet op breedte, anders loopt ze
   over de kop van de kaart heen. */
.step__art svg {
  width: 100%;
  height: 122px;
}

.step p {
  color: var(--text-soft);
  font-size: 0.93rem;
}

/* Verticale stappenlijst (hoe-het-werkt) */
.flow {
  display: grid;
  gap: 0;
  counter-reset: flow;
}

.flow__item {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  align-items: center;
}

.flow__item:last-child {
  border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
  .flow__item {
    grid-template-columns: 1fr 1fr;
  }
  .flow__item:nth-child(even) .flow__art {
    order: -1;
  }
}

.flow__art {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--mist);
  border-radius: var(--radius-lg);
  min-height: 240px;
  position: relative;
  overflow: hidden;
}

.flow__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to right,
      rgba(11, 26, 61, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(11, 26, 61, 0.055) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* De illustratie niet laten doorschalen tot de mono-labels onleesbaar groot
   worden; ze horen bij de tekening, niet bij de pagina. */
.flow__art svg {
  position: relative;
  z-index: 1;
  max-width: 330px;
}

.flow__body .label {
  margin-bottom: 1.1rem;
}

.flow__body .h3 {
  margin-bottom: 0.9rem;
}

.flow__body p {
  color: var(--text-soft);
  max-width: 48ch;
}

.flow__body p + p {
  margin-top: 0.9rem;
}

.flow__body .checks {
  margin-top: 1.4rem;
}

/* --- 14. Sorteergroepen (A/B/C) ------------------------------------------ */

.sortcard {
  position: relative;
  padding: 1.75rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.sortcard__letter {
  position: absolute;
  top: -0.35em;
  right: 0.08em;
  font-size: 7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(26, 70, 229, 0.07);
  pointer-events: none;
}

.sortcard .h4 {
  margin-bottom: 0.5rem;
}

.sortcard p {
  color: var(--text-soft);
  font-size: 0.945rem;
  position: relative;
}

/* --- 15. Apparatenraster ------------------------------------------------- */

.devices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 620px) {
  .devices {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 940px) {
  .devices {
    grid-template-columns: repeat(5, 1fr);
  }
}

.device {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.6rem 0.75rem;
  background: var(--paper);
  text-align: center;
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}

.device:hover {
  background: var(--mist);
}

.device svg {
  color: var(--blue);
}

.device span {
  font-size: 0.83rem;
  color: var(--text-soft);
  letter-spacing: -0.005em;
}

/* --- 16. Accordeon ------------------------------------------------------- */

.accordion {
  border-top: 1px solid var(--line);
}

.acc {
  border-bottom: 1px solid var(--line);
}

.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  cursor: pointer;
  color: var(--text);
}

.acc__btn:hover {
  color: var(--blue);
}

.acc__sign {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: transform 0.3s var(--ease), border-color 0.25s var(--ease);
}

.acc__sign::before,
.acc__sign::after {
  content: "";
  position: absolute;
  inset: 50% 25%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition: opacity 0.25s var(--ease);
}

.acc__sign::after {
  transform: translateY(-50%) rotate(90deg);
}

.acc[data-open="true"] .acc__sign {
  transform: rotate(135deg);
  border-color: var(--blue);
}

.acc[data-open="true"] .acc__sign::after {
  opacity: 0;
}

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}

.acc[data-open="true"] .acc__panel {
  grid-template-rows: 1fr;
}

.acc__panel > div {
  overflow: hidden;
}

.acc__panel p {
  padding-bottom: 1.5rem;
  color: var(--text-soft);
  max-width: 68ch;
}

/* --- 17. Formulier ------------------------------------------------------- */

.form {
  display: grid;
  gap: 1.1rem;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field > label {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
}

.field > label span {
  color: var(--text-faint);
  font-weight: 400;
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.82em 1em;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.95rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 70, 229, 0.14);
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5l4 4 4-4' fill='none' stroke='%23475b85' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  background-size: 16px;
  padding-right: 2.6em;
}

.field-row {
  display: grid;
  gap: 1.1rem;
}

@media (min-width: 620px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Fotodropzone — de kern van het concept */
.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0.6rem;
  padding: 2rem 1.25rem;
  text-align: center;
  border: 1.5px dashed rgba(26, 70, 229, 0.38);
  border-radius: var(--radius);
  background: rgba(26, 70, 229, 0.035);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.dropzone:hover,
.dropzone[data-drag="true"] {
  border-color: var(--blue);
  background: rgba(26, 70, 229, 0.075);
}

.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dropzone__icon {
  color: var(--blue);
}

.dropzone strong {
  font-weight: 540;
  font-size: 0.98rem;
}

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.thumb {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--mist);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(5, 15, 43, 0.72);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.form__note {
  font-size: 0.8rem;
  color: var(--text-faint);
}

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

.form__status {
  display: none;
  padding: 0.9em 1.1em;
  border-radius: 10px;
  font-size: 0.9rem;
}

.form__status[data-state="error"] {
  display: block;
  background: #fef1f1;
  border: 1px solid #f5c6c6;
  color: #9c2a2a;
}

.form__status[data-state="ok"] {
  display: block;
  background: rgba(138, 169, 255, 0.1);
  border: 1px solid rgba(45, 91, 255, 0.35);
  color: #1a3bbf;
}

.btn[data-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* --- 18. CTA-balk -------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--blue);
  color: #fff;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
      100% 120% at 85% 0%,
      rgba(138, 169, 255, 0.3) 0%,
      transparent 55%
    ),
    linear-gradient(135deg, #1a46e5 0%, #1434bb 60%, #0d2488 100%);
}

.cta-band__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.08) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  mask-image: radial-gradient(ellipse 80% 100% at 20% 50%, #000, transparent 75%);
}

.cta-band h2 {
  color: #fff;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 46ch;
}

.cta-band .label {
  color: rgba(255, 255, 255, 0.72);
}

/* --- 19. Footer ---------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: #93a6d4;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

.footer__top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 860px) {
  .footer__top {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.footer h4 {
  color: #fff;
  font-size: 0.74rem;
  font-family: var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  opacity: 0.6;
  font-weight: 500;
}

.footer a {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.92rem;
  color: #93a6d4;
  transition: color 0.18s var(--ease);
}

.footer a:hover {
  color: #fff;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-size: 0.82rem;
}

.footer__payoff {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}

/* --- 20. Zwevende WhatsApp-knop ------------------------------------------ */

.fab {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.25em;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 520;
  box-shadow: 0 10px 30px rgba(8, 26, 77, 0.28);
  transition: transform 0.22s var(--ease), box-shadow 0.25s var(--ease),
    opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}

.fab[data-show="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(26, 70, 229, 0.42);
}

.fab span {
  display: none;
}

@media (min-width: 560px) {
  .fab span {
    display: inline;
  }
}

/* --- 21. Animatie -------------------------------------------------------- */

/* Alleen verbergen als JavaScript draait — zonder JS blijft alles leesbaar. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js [data-reveal][data-shown="true"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --- 22. Hulpklassen ----------------------------------------------------- */

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }
.mt-6 { margin-top: 4rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- 23. Lopende tekst (juridische pagina's) ----------------------------- */

.prose {
  max-width: 68ch;
}

.prose h2 {
  margin-top: 3rem;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  letter-spacing: -0.026em;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: 2rem;
  font-size: 1.05rem;
  letter-spacing: -0.018em;
}

.prose p,
.prose li {
  margin-top: 0.9rem;
  color: var(--text-soft);
  font-size: 0.985rem;
  line-height: 1.68;
}

.prose ul {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.2rem;
}

.prose ul li {
  padding-left: 1.1rem;
  position: relative;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.5;
}

.prose a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose .note {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(138, 169, 255, 0.07);
  font-size: 0.9rem;
  color: var(--text-soft);
}

/* --- 24. Knoppenpaar (hero) ---------------------------------------------
   Twee segmenten in één balk: een gedempte secundaire actie naast een witte
   primaire actie met een pijlchip, zoals op een technische interface. */

.btn-pair {
  display: inline-flex;
  flex-wrap: nowrap;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(5, 15, 43, 0.3);
}

.btn-pair > a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1.02em 1.35em;
  font-size: 0.93rem;
  letter-spacing: -0.012em;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.btn-pair__ghost {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

.btn-pair__ghost:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-pair__solid {
  background: #fff;
  color: var(--navy);
  font-weight: 520;
  padding-right: 0.7em !important;
}

.btn-pair__solid:hover {
  background: #eaf0ff;
}

.btn-pair__solid svg:first-child {
  color: var(--blue);
}

.btn-pair__chip {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: 0.4em;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  transition: transform 0.22s var(--ease);
}

.btn-pair__solid:hover .btn-pair__chip {
  transform: translateX(2px);
}

@media (max-width: 460px) {
  .btn-pair {
    width: 100%;
    flex-wrap: wrap;
  }
  .btn-pair > a {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* --- 25. Tijdsaanduiding op een stapkaart -------------------------------- */

.step__wanneer {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: rgba(26, 70, 229, 0.08);
  color: var(--blue);
  white-space: nowrap;
}

.band--dark .step__wanneer {
  background: rgba(138, 169, 255, 0.14);
  color: var(--accent);
}

/* Iconen in chips: klein en in de merkkleur, zodat de rij leesbaar blijft. */
.chip svg {
  color: var(--blue);
  opacity: 0.85;
  flex: none;
}

.band--dark .chip svg {
  color: var(--accent);
}

/* --- 26. Tijdlijn: alle zeven stappen onder elkaar ----------------------
   Stap 1 is van de klant en staat daarom ingevuld; de overige zes zijn van
   ons en staan open. Zo is in één oogopslag te zien hoe het werk verdeeld is. */

.tijdlijn {
  position: relative;
  display: grid;
  gap: 0;
  max-width: 860px;
  counter-reset: stap;
}

.tijdlijn__item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.25rem;
  padding: 1.35rem 0;
}

/* De rail loopt door tot aan de laatste stap. */
.tijdlijn__item::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.tijdlijn__item:first-child::before {
  top: 50%;
}

.tijdlijn__item:last-child::before {
  bottom: 50%;
}

.tijdlijn__punt {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  align-self: start;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--blue);
}

.tijdlijn__item.is-u .tijdlijn__punt {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(26, 70, 229, 0.1);
}

.tijdlijn__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.8rem;
  margin-bottom: 0.4rem;
}

.tijdlijn__num {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--blue);
  opacity: 0.7;
}

.tijdlijn__kop h3 {
  margin: 0;
}

.tijdlijn__body p {
  color: var(--text-soft);
  font-size: 0.95rem;
  max-width: 62ch;
}

@media (max-width: 560px) {
  .tijdlijn__item {
    grid-template-columns: 36px 1fr;
    gap: 1rem;
  }
  .tijdlijn__item::before {
    left: 17px;
  }
  .tijdlijn__punt {
    width: 36px;
    height: 36px;
  }
}

/* --- 27. Goede doelen ---------------------------------------------------- */

.doelen {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 700px) {
  .doelen {
    grid-template-columns: repeat(2, 1fr);
  }
}

.doel-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.3s var(--ease);
}

.doel-kaart:hover {
  border-color: rgba(26, 70, 229, 0.42);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.doel-kaart__top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.doel-kaart__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 12px;
  background: rgba(26, 70, 229, 0.08);
  color: var(--blue);
}

.doel-kaart__naam {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -0.022em;
  color: var(--navy);
  line-height: 1.2;
}

.doel-kaart__plaats {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.25rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.doel-kaart__kop {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.doel-kaart p {
  font-size: 0.93rem;
  color: var(--text-soft);
}

.doel-kaart__waarom {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.88rem;
  color: var(--text-soft);
}

.doel-kaart__waarom svg {
  flex: none;
  color: var(--blue);
  margin-top: 0.15em;
}

.doel-kaart__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 1.2rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--blue);
}

.doel-kaart__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Stappensectie: kop links (blijft staan), tijdlijn rechts. */
.stappen-layout {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
}

@media (min-width: 1000px) {
  .stappen-layout {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
  }

  .stappen-layout__kop {
    position: sticky;
    top: 110px;
  }
}

.stappen-layout__kop .lede {
  margin-top: 1.4rem;
}

.stappen-layout__kop .label {
  margin-bottom: 1.4rem;
}


/* --- 28. Kaders om illustraties (gedeeld) -------------------------------- */

.art-frame,
.kaart-frame {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--mist);
  overflow: hidden;
}

.art-frame::before,
.kaart-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to right,
      rgba(11, 26, 61, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(11, 26, 61, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}

.band--dark .art-frame,
.band--dark .kaart-frame {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-dark);
}

.band--dark .art-frame::before,
.band--dark .kaart-frame::before {
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
}

.art-frame > svg,
.kaart-frame > svg,
.art-frame > * > svg {
  position: relative;
  z-index: 1;
}

.kaart-frame > svg {
  max-height: 430px;
}

/* --- 29. Het vaste goede doel ------------------------------------------- */

.vast-doel {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid rgba(26, 70, 229, 0.3);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(130deg, rgba(26, 70, 229, 0.06), transparent 62%),
    var(--paper);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 820px) {
  .vast-doel {
    grid-template-columns: 210px 1fr;
    align-items: start;
  }
}

.vast-doel__zij {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.vast-doel__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.8em;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vast-doel__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: rgba(26, 70, 229, 0.1);
  color: var(--blue);
}

.vast-doel__plaats {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.vast-doel__kop {
  margin-top: 0.8rem;
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--blue);
}

.vast-doel__body > p:not(.vast-doel__kop) {
  margin-top: 0.9rem;
  color: var(--text-soft);
}

.vast-doel__waarom {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--mist);
}

.vast-doel__waarom svg {
  color: var(--blue);
  margin-top: 0.2em;
}

.vast-doel__waarom p {
  font-size: 0.92rem;
  color: var(--text-soft);
}

.vast-doel__waarom strong {
  color: var(--text);
  font-weight: 540;
}

/* Organisaties waarmee gesprekken lopen — bewust ingetogener. */
@media (min-width: 900px) {
  .doelen--drie {
    grid-template-columns: repeat(3, 1fr);
  }
}

.doelen--drie .doel-kaart {
  background: transparent;
}

.doel-kaart__status {
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: 0.3em 0.7em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* ==========================================================================
   Illustraties — isometrische lijntekeningen op een blauwdrukraster.
   Kleuren komen uit custom properties zodat dezelfde tekening op een lichte
   én een donkere band klopt.
   ========================================================================== */

.art {
  /* Drie volumes, drie betekenissen:
     neutraal = gewone hardware, blauw = het stuk dat nu aan de beurt is,
     accent = de datadrager, het enige waar het echt om gaat. */
  --f-top: #ffffff;
  --f-left: #d5e0ff;
  --f-right: #abc0f5;
  --f-line: rgba(26, 70, 229, 0.62);
  --f-grid: rgba(26, 70, 229, 0.18);
  --f-dim: rgba(26, 70, 229, 0.34);

  --b-top: #5a80ff;
  --b-left: #2f59e8;
  --b-right: #1c3cb4;

  --m-top: #16307f;
  --m-left: #0f2466;
  --m-right: #0a1a4d;

  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.band--dark .art,
.art--on-dark {
  --f-top: #2b579f;
  --f-left: #1d3d80;
  --f-right: #132c5f;
  --f-line: rgba(178, 203, 255, 0.6);
  --f-grid: rgba(178, 203, 255, 0.2);
  --f-dim: rgba(178, 203, 255, 0.38);

  --b-top: #7a9cff;
  --b-left: #4a74ff;
  --b-right: #2b50cc;

  /* Op donker is de datadrager juist het lichtste volume. */
  --m-top: #ffffff;
  --m-left: #cfdcff;
  --m-right: #9db5f0;
}

.art__top { fill: var(--f-top); }
.art__left { fill: var(--f-left); }
.art__right { fill: var(--f-right); }

.art__face {
  stroke: var(--f-line);
  stroke-width: 1.25;
  stroke-linejoin: round;
}

.art__grid {
  stroke: var(--f-grid);
  stroke-width: 1;
  fill: none;
}

.art__line {
  stroke: var(--f-line);
  stroke-width: 1.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.art__dash {
  stroke: var(--f-dim);
  stroke-width: 1.3;
  stroke-dasharray: 5 5;
  fill: none;
  stroke-linecap: round;
}

.art__mint {
  stroke: var(--m-left);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.art__mint-fill { fill: var(--m-left); }

.art__screen {
  fill: var(--b-top);
  opacity: 0.9;
}

.art__label {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.14em;
  fill: var(--f-line);
  text-transform: uppercase;
}

.art__chip {
  fill: var(--f-top);
  stroke: var(--f-line);
  stroke-width: 1.1;
}

/* Zacht pulserende markering — gebruikt bij "scan"/"capture" beelden */
@keyframes artPulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.7; }
}

.art__pulse {
  animation: artPulse 3.2s ease-in-out infinite;
}

@keyframes artFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.art__float {
  animation: artFloat 6s ease-in-out infinite;
}

.art__float--slow {
  animation-duration: 8s;
  animation-delay: -2s;
}

@media (prefers-reduced-motion: reduce) {
  .art__pulse,
  .art__float {
    animation: none;
  }
}
/* Blue field, photographic backgrounds and editorial rows. No fabricated operating metrics. */
:root { --blue:#0847cc; --blue-600:#063bb0; --radius:4px; --radius-lg:4px; --section-y:clamp(4rem,7vw,7rem); }
.nav,.nav--over-dark { position:fixed; inset:0 0 auto; height:70px; border:0; background:rgba(255,255,255,.94); color:var(--ink); backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4); }
.nav[data-scrolled="true"],.nav--over-dark[data-scrolled="true"] { background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.nav__inner { height:70px; gap:20px; }
.nav--over-dark .nav__link,.nav__link { color:#2f3d55; font-size:.82rem; border-radius:0; padding:.6em .85em; }
.nav--over-dark .nav__link:hover,.nav--over-dark .nav__link[aria-current="page"],.nav__link:hover,.nav__link[aria-current="page"] { color:var(--blue); background:#0847cc08; }
.nav--over-dark .nav__burger { color:var(--ink); border-color:var(--line); }
.nav__burger { border:0; border-radius:0; }
.nav__cta { font-size:12px; min-height:36px; }
.nav__panel,.nav--over-dark .nav__panel { padding:20px; color:var(--text); border:1px solid #e2e7ef; background:white; box-shadow:var(--shadow-md); }
.nav--over-dark .nav__panel a { border-color:var(--line-soft); }
.nav--over-dark .nav__panel .btn--ghost { --btn-fg:var(--text); --btn-bd:var(--line); }
.btn { border-radius:0; box-shadow:none; }
.tech-label { display:inline-block; font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.045em; line-height:1.65; text-transform:uppercase; color:var(--blue); }
.blue-hero { background:var(--blue); color:#fff; position:relative; min-height:760px; padding-top:140px; overflow:hidden; isolation:isolate; }
.blue-hero__top { display:grid; grid-template-columns:1.42fr 1fr; align-items:start; gap:80px; position:relative; z-index:2; }
.blue-hero h1 { font-family:var(--sans); font-size:clamp(3rem,5.1vw,4.8rem); line-height:1.06; font-weight:400; letter-spacing:-.045em; margin-top:25px; }
.blue-hero .tech-label { color:#d9e6ff; background:#00369e60; padding:4px 9px; }
.blue-hero__side { padding-top:12px; }
.blue-hero__side p { font-size:21px; line-height:1.4; letter-spacing:-.015em; color:#dbe7ff; max-width:35ch; }
.hero-actions { display:grid; grid-template-columns:.7fr 1.25fr; align-items:stretch; padding:5px; margin-top:32px; background:#00379e70; }
.hero-actions > a:first-child { display:flex; align-items:center; padding:12px 16px; font-size:13px; color:#e0eaff; }
.action { display:inline-flex; align-items:center; justify-content:space-between; gap:22px; font-size:13px; font-weight:500; padding:6px 6px 6px 18px; min-height:44px; border:1px solid #ffffffb0; transition:background .2s,color .2s; }
.action--white { background:white; color:var(--ink); }
.action > span { display:grid; place-items:center; height:32px; width:32px; background:var(--blue); color:white; flex-shrink:0; }
.action:hover { background:#e6eeff; }
.blue-hero__image { position:absolute; inset:230px 0 auto; height:530px; width:100%; object-fit:cover; object-position:center 85%; z-index:-2; filter:grayscale(1) contrast(1.15); mix-blend-mode:luminosity; opacity:.4; mask-image:linear-gradient(180deg,transparent 2%,#000 40%,#000 75%,transparent 100%); }
.blue-hero__data { position:absolute; inset:250px 0 -90px; z-index:-1; opacity:.32; pointer-events:none; }
.blue-hero__data svg { width:100%; height:100%; }
.blue-hero__bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; z-index:2; margin-top:355px; padding-bottom:27px; font-size:11px; color:#cfddfb; }
.blue-hero__bottom a { margin-left:auto; display:inline-flex; align-items:center; gap:12px; }
.editorial-section { padding:clamp(70px,8vw,115px) 0; border-bottom:1px solid var(--line-soft); }
.editorial-section h2,.editorial-data h2,.editorial-impact h2 { font-family:var(--sans); font-weight:400; font-size:clamp(2rem,3.8vw,3.45rem); line-height:1.12; letter-spacing:-.04em; margin:23px 0 27px; }
.editorial-section p,.editorial-impact p { color:#4a5b74; line-height:1.65; font-size:16px; max-width:49ch; }
.editorial-section p+p { margin-top:15px; }
.editorial-link { display:inline-flex; align-items:center; justify-content:space-between; gap:30px; border-bottom:1px solid #b4c4e0; padding:12px 0; font-size:13px; margin-top:18px; color:var(--blue); }
.editorial-link:hover { border-color:var(--blue); }
.editorial-intro { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; }
.editorial-intro__image { position:relative; height:470px; background-image:radial-gradient(#adb6c2 1px,transparent 1px); background-size:7px 7px; isolation:isolate; }
.editorial-intro__image > img { width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; mask-image:linear-gradient(180deg,transparent,#000 18%,#000 75%,transparent); }
.editorial-intro__image .tech-label { position:absolute; bottom:15px; left:20px; font-size:9px; color:#556985; background:#fffd; padding:4px 9px; }
.editorial-facts { margin-top:72px; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding-top:30px; border-top:1px solid var(--line); }
.editorial-facts strong { font-family:var(--sans); font-size:34px; font-weight:400; line-height:1.1; letter-spacing:-.035em; }
.editorial-facts strong span { font-size:15px; vertical-align:top; }
.editorial-facts p { font-size:12px; margin-top:8px; color:#66758e; }
.editorial-facts__note { font-size:10px!important; color:#6c7c93; margin-top:24px; }
.editorial-heading { margin-bottom:50px; }
.editorial-heading > p { max-width:56ch; }
.editorial-process { padding-bottom:0; }
.editorial-process__grid { display:grid; grid-template-columns:1.4fr 1fr; gap:65px; align-items:start; }
.editorial-steps { padding-bottom:65px; }
.editorial-steps li { display:grid; grid-template-columns:45px 1fr auto; gap:20px; border-top:1px solid var(--line); padding:26px 0; }
.editorial-steps li > span { font-family:var(--mono); font-size:10px; color:var(--blue); padding-top:5px; }
.editorial-steps h3 { font-family:var(--sans); font-size:20px; font-weight:400; letter-spacing:-.025em; line-height:1.25; margin:0 0 12px; }
.editorial-steps p { font-size:13px; color:#62718a; max-width:45ch; }
.editorial-steps small { font-family:var(--mono); font-size:8px; color:#7d8899; padding-top:8px; text-align:right; }
.editorial-process__image { position:sticky; top:70px; min-height:630px; background:var(--blue); color:white; isolation:isolate; overflow:hidden; }
.editorial-process__image > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% center; mix-blend-mode:luminosity; filter:grayscale(1); opacity:.42; z-index:-1; }
.editorial-process__caption { position:absolute; inset:auto 26px 28px; background:linear-gradient(transparent,#0847cc80); }
.editorial-process__caption .tech-label { color:#c4d7ff; }
.editorial-process__caption p { margin-top:18px; color:white; font-size:19px; line-height:1.35; }
.editorial-process__caption a { margin-top:26px; display:inline-flex; gap:18px; align-items:center; font-size:12px; color:#d4e1fb; }
.editorial-data { position:relative; background:var(--blue); color:white; padding:100px 0 45px; overflow:hidden; isolation:isolate; }
.editorial-data > img { position:absolute; inset:0 0 0 35%; height:100%; width:65%; object-fit:cover; z-index:-2; opacity:.38; mix-blend-mode:luminosity; filter:grayscale(1); mask-image:linear-gradient(90deg,transparent,#000 40%); }
.editorial-data::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#0847cc 0%,#0847cccf 35%,transparent 70%); }
.editorial-data__copy { max-width:57%; }
.editorial-data .tech-label { color:#bed4ff; }
.editorial-data p { color:#d1e0ff; max-width:46ch; font-size:17px; line-height:1.7; }
.editorial-data .action { margin-top:32px; }
.editorial-data__proof { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:105px; }
.editorial-data__proof > div { border-top:1px solid #ffffff50; padding-top:20px; }
.editorial-data__proof span { font-family:var(--mono); font-size:9px; color:#bcd1ff; display:block; margin-bottom:10px; }
.editorial-data__proof strong { font-size:14px; font-weight:400; }
.editorial-hardware { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.editorial-equipment li { display:flex; align-items:center; gap:25px; border-bottom:1px solid var(--line); padding:23px 0; font-size:16px; }
.editorial-equipment li span { color:#6d7f9d; font-family:var(--mono); font-size:9px; }
.editorial-impact { background:#f3f5f8; position:relative; isolation:isolate; overflow:hidden; padding:100px 0; }
.editorial-impact > img { position:absolute; inset:0 auto 0 0; width:65%; height:100%; object-fit:cover; object-position:center; z-index:-2; mask-image:linear-gradient(90deg,#000 40%,transparent 100%); }
.editorial-impact > .container > div { margin-left:51%; }
.editorial-impact h2 { font-size:clamp(2rem,3.1vw,2.75rem); }
.editorial-impact > .container > div { padding:20px 0 20px 40px; }
.editorial-faq { display:grid; grid-template-columns:1fr 1.15fr; gap:80px; }
.editorial-faq > div:first-child > p { max-width:36ch; }
.page-hero__photo { position:absolute; inset:0 0 0 37%; width:63%; height:100%; object-fit:cover; z-index:-2; mix-blend-mode:luminosity; filter:grayscale(1); opacity:.4; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#0847cc 15%,#0847ccdd 42%,#0847cc30 100%); }
.page-hero,.page-hero::before { background:var(--blue)!important; }
.page-hero .page-hero__inner { padding-top:125px; padding-bottom:75px; }
.page-hero .page-hero__grid { opacity:.3; }
.page-hero .page-hero__title { font-family:var(--sans); font-weight:400; letter-spacing:-.035em; }
.card,.art-frame,.wa-card,.doel-kaart { border-radius:0!important; box-shadow:none!important; }
.cta-band { background:var(--blue)!important; }
.cta-band h2 { font-family:var(--sans); font-weight:400; }
.cta-band .btn { font-size:13px; }
.fab { border-radius:0; }
@media(max-width:1100px) { .blue-hero__top { gap:40px; grid-template-columns:1.3fr 1fr; } .blue-hero h1 { font-size:58px; } .blue-hero__side p { font-size:19px; } .hero-actions { grid-template-columns:.65fr 1.35fr; } .hero-actions > a:first-child { padding-inline:9px; font-size:11px; } .hero-actions .action { font-size:11px; padding-left:10px; gap:8px; } .editorial-process__grid { gap:35px; } .editorial-steps li { grid-template-columns:35px 1fr; } .editorial-steps small { display:none; } }
@media(max-width:850px) { .blue-hero { padding-top:125px; min-height:760px; } .blue-hero__top { grid-template-columns:1fr; gap:35px; } .blue-hero h1 { font-size:58px; max-width:14ch; } .blue-hero__side { padding:0; max-width:520px; } .blue-hero__side p { max-width:39ch; font-size:19px; } .hero-actions { max-width:460px; grid-template-columns:.75fr 1.3fr; } .hero-actions .action { font-size:12px; } .blue-hero__image { top:360px; height:490px; object-position:60% 65%; opacity:.26; } .blue-hero__data { top:460px; bottom:-20px; } .blue-hero__bottom { margin-top:230px; align-items:end; } .blue-hero__bottom > span { display:none; } .editorial-intro { grid-template-columns:1fr; gap:30px; } .editorial-intro__image { height:360px; } .editorial-facts { grid-template-columns:1fr 1fr; gap:35px; margin-top:35px; } .editorial-process__grid { grid-template-columns:1fr; gap:0; } .editorial-process__image { position:relative; top:0; min-height:420px; margin-bottom:60px; } .editorial-steps { padding-bottom:20px; } .editorial-data__copy { max-width:85%; } .editorial-data > img { left:0; width:100%; opacity:.2; mask-image:none; } .editorial-data::after { background:linear-gradient(90deg,#0847ccee,#0847cc50); } .editorial-data__proof { margin-top:65px; gap:20px; } .editorial-hardware,.editorial-faq { grid-template-columns:1fr; gap:35px; } .editorial-impact { padding:75px 0 0; } .editorial-impact > img { inset:auto 0 0; width:100%; height:340px; mask-image:linear-gradient(180deg,transparent,#000 30%); object-position:40% center; } .editorial-impact > .container > div { margin:0; padding:0 0 330px; } .editorial-impact p { max-width:50ch; } .page-hero__photo { inset:0; width:100%; opacity:.25; } .page-hero::after { background:linear-gradient(90deg,#0847ccf0,#0847cc85); } }
@media(max-width:550px) { .nav,.nav__inner { height:58px; } .nav .logo { max-width:155px; } .blue-hero { padding-top:106px; min-height:840px; } .blue-hero h1 { font-size:clamp(44px,11.9vw,62px); line-height:1.08; letter-spacing:-.044em; margin-top:29px; } .blue-hero .tech-label { font-size:8px; } .blue-hero__top { gap:36px; } .blue-hero__side p { font-size:18px; line-height:1.5; } .hero-actions { margin-top:28px; } .hero-actions > a:first-child { font-size:12px; padding-inline:10px; } .hero-actions .action { font-size:11px; line-height:1.4; padding-left:11px; } .blue-hero__image { top:485px; height:400px; width:150%; left:-30%; object-position:58% center; opacity:.24; } .blue-hero__data { top:570px; bottom:0; opacity:.28; } .blue-hero__bottom { margin-top:290px; font-size:9px; gap:10px; padding-bottom:20px; } .blue-hero__bottom a { gap:7px; } .editorial-section { padding:65px 0; } .editorial-section h2,.editorial-data h2,.editorial-impact h2 { font-size:34px; margin:20px 0 23px; } .editorial-section p,.editorial-impact p { font-size:15px; } .editorial-intro__image { height:280px; } .editorial-intro__image .tech-label { left:0; font-size:8px; } .editorial-facts strong { font-size:27px; } .editorial-facts p { font-size:11px; } .editorial-steps li { grid-template-columns:30px 1fr; gap:12px; padding:22px 0; } .editorial-steps h3 { font-size:19px; } .editorial-steps p { font-size:13px; } .editorial-process__image { min-height:370px; margin-bottom:0; } .editorial-data { padding:65px 0 35px; } .editorial-data__copy { max-width:100%; } .editorial-data p { font-size:15px; } .editorial-data__proof { grid-template-columns:1fr; gap:20px; margin-top:50px; } .editorial-data__proof > div { display:flex; align-items:center; gap:18px; padding-top:16px; } .editorial-data__proof span { margin:0; } .editorial-data__proof strong { font-size:13px; } .editorial-equipment li { font-size:14px; gap:18px; padding:20px 0; } .editorial-impact { padding-top:65px; } .editorial-impact > .container > div { padding-bottom:280px; } .editorial-impact > img { height:280px; } .page-hero .page-hero__inner { padding-top:105px; padding-bottom:55px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .js [data-reveal] { opacity:1; transform:none; } }
/* Copy is fixed. Compact Inter Tight headings, glass and continuous data grids. */
:root { --display: var(--sans); }
h1,h2,h3,h4,h5,h6 { font-family: var(--sans)!important; }
.h2,.editorial-section h2,.editorial-data h2,.editorial-impact h2 { font-size: clamp(28px,3.2vw,42px); font-weight: 400; line-height: 1.17; letter-spacing: -.035em; }
.page-hero .page-hero__title { font-size: clamp(34px,4.1vw,54px); line-height: 1.12; }
main > section { position: relative; isolation: isolate; }
.data-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; color: #527ca8; opacity: .16; overflow: hidden; }
.data-grid svg { width: 100%; height: 100%; }
.light-scene .data-grid { color: #123e8b; opacity: .7; z-index: 0; }
.light-scene .data-grid svg > g > g { stroke-width: 1.15px; }
.editorial-data .data-grid { color: #c8e3ff; opacity: .25; z-index: -1; }
.editorial-impact .data-grid { opacity: .13; }

.blue-hero { min-height: 640px; padding-top: 135px; }
.blue-hero h1 { font-size: clamp(40px,4.7vw,60px); line-height: 1.1; }
.blue-hero__image { inset: 290px 11% auto auto; width: clamp(220px,25vw,320px); height: auto; object-fit: contain; opacity: .62; filter: grayscale(.65) contrast(.9); mix-blend-mode: luminosity; mask-image: radial-gradient(ellipse at 50% 44%,#000 25%,#000b 49%,transparent 73%); z-index: 0; animation: hardware-float 9s cubic-bezier(.4,0,.2,1) infinite; pointer-events: none; }
.blue-hero__data { inset: 280px 0 -120px; opacity: .34; }
.blue-hero__bottom { margin-top: 260px; }
.hero-light { position: absolute; right: 8%; bottom: 9%; width: 470px; height: 280px; background: radial-gradient(ellipse,#88d7ff38,transparent 68%); filter: blur(24px); pointer-events: none; animation: ambient-light 15s ease-in-out infinite; }

.light-scene { background: #fff; color: #14294a; overflow: hidden; scroll-margin-top: 90px; }
.light-scene h2 { font-size: clamp(30px,3.3vw,44px); line-height: 1.16; font-weight: 400; letter-spacing: -.035em; margin: 19px 0 0; text-transform: none; }
.light-scene h3 { font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.025em; text-transform: none; }
.light-scene .tech-label { color: #0847cc; }
.scene-content { position: relative; z-index: 2; }
.scene-heading { max-width: 680px; }
.value-scene { padding: 85px 0 55px; background: #fff; }
.value-scene__copy { width: 55%; max-width: 570px; margin-top: 25px; }
.value-scene__copy p { color: #465976; font-size: 16px; line-height: 1.65; }
.value-scene__copy p+p { margin-top: 15px; }
.scene-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; color: #0847cc; font-size: 13px; padding-bottom: 10px; margin-top: 22px; border-bottom: 1px solid #8faee3; }
.scene-link:hover { color: #002f94; border-color: #0847cc; }
.value-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 52px; position: relative; }
.light-scene .glass { --glass-bg: linear-gradient(135deg,rgba(242,247,255,.93),rgba(202,222,255,.8)); --glass-border: #8aabe66b; --glass-highlight: #ffffffdf; --glass-shadow: #16438b0a; --lens-edge-light: #ffffffb3; --lens-edge-dark: #0847cc0d; --glass-blur: 13px; --glass-saturate: 135%; background: var(--glass-bg); color: inherit; border: 1px solid var(--glass-border); border-radius: 10px!important; box-shadow: 0 10px 28px #16438b08,inset 0 1px 0 var(--glass-highlight)!important; overflow: hidden; }
.light-scene .glass::after { background: linear-gradient(135deg,#ffffff30,transparent); height: 100%; }
.light-scene .glass::before { opacity: .38; }
.value-card { min-height: 168px; padding: 22px; }
.value-cards::before {
  content: "";
  position: absolute;
  inset: -32px -28px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 17% 75%,#2d85ff45,transparent 42%),radial-gradient(ellipse at 76% 28%,#74c8ff50,transparent 48%);
}
.value-cards .value-card.glass {
  --glass-bg: linear-gradient(145deg,rgba(255,255,255,.68),rgba(228,242,255,.34));
  --glass-blur: 24px;
  --glass-saturate: 165%;
  --glass-border: rgba(255,255,255,.9);
  background: var(--glass-bg);
  border-radius: 22px!important;
  box-shadow: 0 12px 32px #17477b12,0 0 0 1px #326bb21a,inset 0 1px 0 #fff,inset 0 -1px 0 #5d94ce26!important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
.value-cards .value-card::before {
  inset: 0;
  opacity: .72;
  background: linear-gradient(135deg,#ffffffd9,transparent 24%,transparent 76%,#408edf24);
}
.value-cards .value-card::after {
  height: 100%;
  background: radial-gradient(ellipse at 20% 0,#ffffff9c,transparent 62%);
}
.value-card h3 { font-size: 27px; margin: 16px 0 11px; }
.value-card h3 > span { font-size: 14px; vertical-align: top; margin-left: 3px; }
.card-eyebrow { display: block; color: #3d6195; font-family: var(--mono); font-size: 9px; letter-spacing: .035em; }
.value-card p { color: #465976; font-size: 13px; line-height: 1.55; max-width: 26ch; }
.process-card::before { background-image: radial-gradient(#0847cc3d 1px,transparent 1px)!important; background-size: 8px 8px!important; width: 60%; height: 75%; inset: auto auto 0 0!important; mask-image: radial-gradient(ellipse at left bottom,#000,transparent 75%); }
.light-point { position: absolute; width: 5px; height: 5px; top: 2px; right: 0; border-radius: 50%; background: #0847cc; box-shadow: 0 0 0 3px #0847cc15,0 0 15px #0847cc24; }
.value-note { color: #526687; font-size: 11px; line-height: 1.55; margin-top: 20px; }

.process-scene { padding: 70px 0 85px; border-top: 1px solid #dce6f4; }
.process-heading { display: grid; grid-template-columns: 1.6fr 1fr; align-items: end; gap: 85px; margin-bottom: 38px; }
.process-heading p { color: #465976; font-size: 16px; line-height: 1.65; max-width: 57ch; margin-top: 24px; }
.process-aside { max-width: 31ch; margin-left: auto; }
.process-aside p { font-size: 14px; }
.process-aside .scene-link { font-size: 12px; }
.process-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; padding: 0; list-style: none; position: relative; }
.process-cards > li { min-width: 0; }
.process-cards > li:last-child { grid-column: span 2; }
.process-card { height: 100%; min-height: 270px; padding: 23px; }
.process-card__top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.process-card__top > span { font-family: var(--mono); font-size: 11px; color: #0847cc; }
.process-card__top small { color: #526687; font-family: var(--mono); font-size: 9px; text-align: right; line-height: 1.6; max-width: 12ch; }
.process-card h3 { font-size: 21px; margin: 27px 0 16px; }
.process-card p { color: #465976; font-size: 13px; line-height: 1.65; max-width: 47ch; }
.editorial-data > img { inset: 5px 0 0 auto; width: 55%; height: 90%; object-fit: contain; mix-blend-mode: luminosity; filter: grayscale(.55); mask-image: radial-gradient(ellipse,#000 10%,#0009 45%,transparent 72%); opacity: .6; }
.editorial-data::after { background: linear-gradient(90deg,#0847cc 0%,#0847cce0 35%,#0847cc00 70%); }
.editorial-impact > img { opacity: .85; mask-image: linear-gradient(90deg,#000 20%,#000c 50%,transparent 92%); }
.page-hero__photo { mask-image: linear-gradient(90deg,transparent,#0009 45%,#0008); }
.editorial-section .container { position: relative; z-index: 1; }

@keyframes hardware-float { 0%,100% { transform: translate3d(0,0,0) rotate(-.5deg); } 50% { transform: translate3d(4px,-9px,0) rotate(.5deg); } }
@keyframes ambient-light { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-12px,7px,0) scale(1.04); } }
.motion-scene[data-in-view="false"] .blue-hero__image,.motion-scene[data-in-view="false"] .hero-light { animation-play-state: paused; }

@media (max-width: 1100px) {
  .blue-hero__top { gap: 35px; }
  .value-card,.process-card { padding: 20px; }
  .process-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .process-card { min-height: 240px; }
  .process-heading { gap: 35px; }
}
@media (max-width: 850px) {
  .blue-hero { padding-top: 120px; min-height: 760px; }
  .blue-hero h1 { font-size: 48px; }
  .blue-hero__image { inset: auto 7% 30px auto; width: 270px; }
  .blue-hero__bottom { margin-top: 225px; }
  .blue-hero__data { inset: 420px 0 -80px; }
  .hero-light { bottom: 2%; right: 0; width: 370px; }
  .value-scene { padding: 65px 0 45px; }
  .value-scene__copy { width: 70%; }
  .value-cards { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 36px; }
  .process-scene { padding: 60px 0; }
  .process-heading { grid-template-columns: 1fr; gap: 20px; }
  .process-aside { margin: 0; max-width: none; }
  .process-aside p { margin-top: 0; }
  .process-aside .scene-link { margin-top: 14px; }
  .editorial-data > img { width: 75%; opacity: .28; inset: auto -10% 20px auto; height: 70%; }
  .editorial-impact > img { mask-image: linear-gradient(180deg,transparent,#000b 40%,#000); }
}
@media (max-width: 550px) {
  .blue-hero { padding-top: 108px; min-height: 770px; }
  .blue-hero h1 { font-size: clamp(34px,10.5vw,44px); }
  .blue-hero__image { width: 230px; inset: auto 6% 70px auto; }
  .blue-hero__bottom { margin-top: 225px; }
  .blue-hero__data { inset: 450px 0 -60px; }
  .hero-light { width: 330px; height: 230px; bottom: 8%; right: -10px; }
  .light-scene h2,.editorial-section h2,.editorial-data h2,.editorial-impact h2,.h2 { font-size: 29px; line-height: 1.2; }
  .value-scene { padding: 52px 0 42px; }
  .value-scene__copy { width: 100%; }
  .value-scene__copy p,.process-heading p { font-size: 15px; }
  .value-cards { gap: 12px; }
  .value-card { min-height: 160px; padding: 19px 16px; }
  .value-card h3 { font-size: 24px; }
  .value-card p { font-size: 12px; }
  .process-scene { padding: 50px 0 60px; }
  .process-cards { grid-template-columns: 1fr; gap: 12px; }
  .process-cards > li:last-child { grid-column: auto; }
  .process-card { min-height: 0; padding: 23px; }
  .process-card h3 { font-size: 21px; margin-top: 21px; }
  .process-card p { font-size: 14px; }
}
@media (prefers-reduced-transparency: reduce) { .light-scene .glass,.value-cards .value-card.glass { background: #e6efff; backdrop-filter: none; -webkit-backdrop-filter: none; } .value-cards::before { display: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .value-cards .value-card.glass { background: #e6efff; } }
@media (prefers-contrast: more) { .light-scene .glass { border-color: #31568c; } .light-scene p { color: #14294a; } }
@media (prefers-reduced-motion: reduce) { .blue-hero__image,.hero-light { animation: none!important; } }
/* Navbar-only overrides. astro-liquid-glass supplies the optical surface. */
.nav[data-nav],
.nav[data-nav][data-scrolled="true"] {
  position: fixed;
  inset: 8px 18px auto;
  z-index: 60;
  width: auto;
  max-width: 1240px;
  height: 60px;
  margin-inline: auto;
  padding: 0;
  color: #152b48;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

/* Keep the two glass surfaces as siblings: an ancestor backdrop-filter
   would prevent the mobile panel from blurring the page behind it. */
.nav .nav__inner.glass {
  --glass-bg: rgba(247, 251, 255, .72);
  --glass-blur: 26px;
  --glass-saturate: 165%;
  --glass-border: rgba(255, 255, 255, .7);
  --glass-highlight: rgba(255, 255, 255, .82);
  --glass-shadow: rgba(6, 24, 56, .12);
  --lens-edge-light: rgba(255, 255, 255, .95);
  --lens-edge-dark: rgba(26, 60, 107, .12);
  position: relative;
  z-index: 1;
  height: 60px;
  padding-inline: 16px;
  gap: 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: 0 8px 26px var(--glass-shadow), inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(255, 255, 255, .22);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  transition: background .2s ease, box-shadow .2s ease;
  overflow: visible;
}

.nav[data-scrolled="true"] .nav__inner.glass {
  background: rgba(247, 251, 255, .78);
  border-color: var(--glass-border);
  box-shadow: 0 9px 28px rgba(6, 24, 56, .14), inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(255, 255, 255, .32);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.nav .nav__inner.glass::before {
  background: linear-gradient(125deg, rgba(255, 255, 255, .8), transparent 25%, transparent 70%, rgba(255, 255, 255, .28));
  opacity: .6;
}

.nav .nav__inner.glass::after {
  height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), transparent);
  opacity: .7;
}

.nav > .container {
  max-width: none;
  height: 100%;
  padding-inline: 0;
}

.nav .nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: none;
  border-radius: 10px;
}

.nav .nav__links { gap: 2px; }

.nav .nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  border-radius: 11px;
  color: #152b48;
  font-size: .82rem;
  font-weight: 520;
  white-space: nowrap;
}

.nav .nav__link:hover,
.nav .nav__link[aria-current="page"] {
  color: #0739a5;
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}

.nav .nav__actions { gap: 8px; }

.nav .nav__cta {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 11px;
  font-size: 12px;
  color: #fff;
  background: #0847cc;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 2px 5px rgba(6, 38, 99, .1), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.nav .nav__cta:hover {
  background: #073ab0;
  box-shadow: 0 3px 8px rgba(6, 38, 99, .15), inset 0 1px 0 rgba(255, 255, 255, .18);
  transform: none;
}

.nav .nav__burger {
  width: 44px;
  height: 44px;
  color: #152b48;
  background: rgba(255, 255, 255, .4);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}

.nav .nav__burger:hover,
.nav .nav__burger[aria-expanded="true"] { background: rgba(255, 255, 255, .7); }

.nav .nav__panel.glass {
  --glass-bg: rgba(245, 250, 255, .92);
  position: absolute;
  inset: calc(100% + 9px) 0 auto;
  z-index: 2;
  max-height: calc(100dvh - 92px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  color: #152b48;
  background: var(--glass-bg);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(6, 24, 56, .18), inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
}

.nav .nav__panel[hidden] { display: none; }
.nav .nav__panel > * { position: relative; z-index: 1; }
.nav .nav__mobile-links { display: grid; gap: 3px; }

.nav .nav__mobile-links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  border-radius: 11px;
  color: #152b48;
  font-size: .94rem;
}

.nav .nav__mobile-links a:hover,
.nav .nav__mobile-links a[aria-current="page"] {
  color: #0739a5;
  background: rgba(255, 255, 255, .64);
}

.nav .nav__panel .btn-row { gap: 8px; margin: 12px 0 0; }
.nav .nav__panel .btn { min-height: 46px; border-radius: 11px; font-size: .84rem; }
.nav .nav__panel .btn--ghost {
  --btn-fg: #152b48;
  --btn-bd: rgba(21, 43, 72, .2);
  color: var(--btn-fg);
  background: rgba(255, 255, 255, .4);
  border-color: var(--btn-bd);
}

.nav :is(a, button):focus-visible { outline: 2px solid #0739a5; outline-offset: 3px; }

@media (max-width: 550px) {
  .nav[data-nav],
  .nav[data-nav][data-scrolled="true"] { inset: 8px 12px auto; height: 56px; }
  .nav .nav__inner.glass { height: 56px; gap: 10px; padding-inline: 11px; border-radius: 16px; }
  .nav .nav__brand .logo { --logo-size: 1rem; max-width: none; }
  .nav .nav__panel.glass { border-radius: 16px; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .nav .nav__inner.glass,
  .nav[data-scrolled="true"] .nav__inner.glass,
  .nav .nav__panel.glass {
    background: #f5f9ff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(21, 43, 72, .35);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav .nav__inner.glass,
  .nav[data-scrolled="true"] .nav__inner.glass,
  .nav .nav__panel.glass { background: #f5f9ff; }
}
.logo[data-astro-cid-f7espo7c] {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.logo__word[data-astro-cid-f7espo7c] {
  font-size: var(--logo-size, 1.11rem);
  font-weight: 580;
  letter-spacing: -.034em;
  white-space: nowrap;
  color: var(--navy);
}

.logo__mark[data-astro-cid-f7espo7c] {
  width: 1.52em;
  height: 1.52em;
  font-size: var(--logo-size, 1.11rem);
  margin: 0 -.04em;
  transform: translateY(.1em);
  flex: none;
}

.logo__mark--solo[data-astro-cid-f7espo7c] {
  width: auto;
  height: auto;
  margin: 0;
  transform: none;
}

.logo__veins[data-astro-cid-f7espo7c] {
  stroke: #fff;
  opacity: .34;
}

.logo[data-astro-cid-f7espo7c][data-variant="blue"] .s1[data-astro-cid-f7espo7c] {
  stop-color: #3563ff;
}

.logo[data-astro-cid-f7espo7c][data-variant="blue"] .s2[data-astro-cid-f7espo7c] {
  stop-color: #1a46e5;
}

.logo[data-astro-cid-f7espo7c][data-variant="blue"] .s3[data-astro-cid-f7espo7c] {
  stop-color: #1230a8;
}

.logo[data-astro-cid-f7espo7c][data-variant="white"] .s1[data-astro-cid-f7espo7c] {
  stop-color: #fff;
}

.logo[data-astro-cid-f7espo7c][data-variant="white"] .s2[data-astro-cid-f7espo7c] {
  stop-color: #d9e3ff;
}

.logo[data-astro-cid-f7espo7c][data-variant="white"] .s3[data-astro-cid-f7espo7c] {
  stop-color: #9fb8ff;
}

.logo[data-astro-cid-f7espo7c][data-variant="white"] .logo__word[data-astro-cid-f7espo7c] {
  color: #fff;
}

.logo[data-astro-cid-f7espo7c][data-variant="white"] .logo__veins[data-astro-cid-f7espo7c] {
  stroke: #0a1f5c;
  opacity: .3;
}