/* ================================================================
   STREAMLOGIC — CENTRALE STIJLEN
   Pas kleuren en afmetingen aan via de variabelen hieronder.
   ================================================================ */
:root {
  --ink: #102b43;
  --muted: #607381;
  --paper: #f5f8f7;
  --white: #ffffff;
  --line: #dbe5e3;
  --cyan: #168ea3;
  --mint: #25b686;
  --violet: #7057d9;
  --navy: #081d31;
  --radius: 20px;
  --width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, Arial, sans-serif; }
body { position: relative; isolation: isolate; overflow-x: hidden; }

/* Subtiele levende achtergrond. De lijnen blijven bewust licht en rustig. */
body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background:
    radial-gradient(circle at 12% 18%, rgba(22,142,163,.10) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 34%, rgba(37,182,134,.08) 0 1px, transparent 2px),
    linear-gradient(115deg, transparent 0 46%, rgba(22,142,163,.035) 46.2% 46.35%, transparent 46.55%),
    linear-gradient(25deg, transparent 0 63%, rgba(112,87,217,.025) 63.15% 63.3%, transparent 63.5%);
  background-size: 86px 86px, 112px 112px, 360px 360px, 440px 440px;
  animation: ambient-grid 28s linear infinite;
}

@keyframes ambient-grid {
  to { background-position: 86px 43px, -112px 56px, 180px 90px, -220px 110px; }
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }

.container { width: min(var(--width), calc(100% - 48px)); margin-inline: auto; }
.header { height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.logo { width: 190px; }
.nav { display: flex; gap: 28px; align-items: center; font-size: 14px; font-weight: 700; }
.nav a:hover { color: var(--cyan); }
.language { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.language a { padding: 6px 9px; border-radius: 999px; font-size: 11px; }
.language .active { color: #fff; background: var(--ink); }
.menu-button { display: none; background: none; border: 0; font-weight: 800; }

.hero { min-height: 660px; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 60px; padding-block: 80px; }
.eyebrow { color: #477183; font-size: 11px; letter-spacing: .15em; font-weight: 850; }
h1 { margin: 22px 0; font-size: clamp(52px, 6.5vw, 84px); line-height: .98; letter-spacing: -.06em; }
h1 span { color: var(--cyan); }
.lead { max-width: 680px; color: var(--muted); font-size: 19px; line-height: 1.7; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; gap: 20px; padding: 15px 21px; border-radius: 9px; border: 1px solid var(--line); font-weight: 800; background: #fff; }
.button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,43,67,.12); }
.button { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }

/* Rustige hero-illustratie: documenten met drie kleine productkaarten. */
.hero-art { position: relative; min-height: 480px; }
.paper-cloud { position: absolute; inset: 8% 7%; border-radius: 50%; background: radial-gradient(circle, #fff 0 35%, #e4ecea 60%, transparent 72%); }
.paper { position: absolute; width: 145px; height: 195px; border-radius: 10px; background: linear-gradient(145deg,#fff,#e5ecea); border: 1px solid #d5dfdd; box-shadow: 0 18px 28px rgba(16,43,67,.12); }
.paper::before { content: ""; position: absolute; left: 23px; right: 23px; top: 35px; height: 45px; background: repeating-linear-gradient(#d6dfdd 0 4px,transparent 4px 13px); }
.paper.one { left: 20%; top: 13%; transform: rotate(-14deg); }
.paper.two { left: 38%; top: 8%; transform: rotate(-2deg); }
.paper.three { left: 50%; top: 28%; transform: rotate(12deg); }
.paper.four { left: 27%; top: 39%; transform: rotate(-5deg); }
.product-chip { position: absolute; right: 0; width: 178px; display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.96); border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(16,43,67,.13); font-size: 11px; letter-spacing: .08em; font-weight: 850; }
.product-chip::before { content: ""; position: absolute; right: 100%; width: 70px; height: 2px; background: linear-gradient(90deg,transparent,var(--chip)); }
.product-chip i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-style: normal; color: #fff; background: var(--chip); }
.product-chip.beacon { --chip: var(--cyan); top: 20%; }
.product-chip.clarity { --chip: var(--mint); top: 45%; right: -6%; }
.product-chip.harmony { --chip: var(--violet); top: 70%; right: 2%; }

.proof { background: #fff; border-block: 1px solid var(--line); }
.proof .container { min-height: 60px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; gap: 18px; color: #58717e; font-size: 12px; font-weight: 750; }
.section { padding-block: 105px; }
.section-heading { display: grid; grid-template-columns: 230px 1fr; gap: 30px; margin-bottom: 48px; }
.section-number { font-size: 11px; color: #718792; letter-spacing: .12em; font-weight: 800; }
h2 { margin: 0 0 18px; font-size: clamp(38px, 5vw, 62px); line-height: 1.04; letter-spacing: -.05em; }
.section-heading p:last-child { max-width: 760px; color: var(--muted); font-size: 17px; line-height: 1.7; }

.services { overflow: hidden; border-radius: var(--radius); box-shadow: 0 34px 70px rgba(16,43,67,.12); }
.service { min-height: 470px; display: grid; grid-template-columns: 43% 57%; overflow: hidden; }
.service-copy { padding: 40px; display: flex; flex-direction: column; }
.service.beacon { background: linear-gradient(135deg,#eefafb,#dceff2); }
.service.clarity { color: #fff; background: linear-gradient(135deg,#071c31,#0d2745); }
.service.harmony { color: #fff; background: linear-gradient(135deg,#151137,#252052); }
.service-name { display: flex; align-items: center; gap: 12px; color: var(--accent); font-size: 25px; font-weight: 850; }
.service-name i { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-style: normal; font-size: 17px; }
.service.beacon { --accent: var(--cyan); }.service.clarity { --accent: #35e0aa; }.service.harmony { --accent: #9b7cff; }
.service-body { margin: auto 0; }
.service-label { color: var(--accent); font-size: 10px; letter-spacing: .14em; font-weight: 850; }
.service-description { max-width: 500px; font-size: clamp(20px,2vw,28px); line-height: 1.38; letter-spacing: -.025em; font-weight: 680; }
.service ul { padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13px; opacity: .8; }
.service li::before { content: "✓"; margin-right: 8px; color: var(--accent); }
.service .button { align-self: flex-start; color: var(--accent); border-color: var(--accent); background: transparent; border-radius: 999px; }
.service-art { position: relative; min-width: 0; }
.service-art img { width: 100%; height: 100%; object-fit: cover; }

.custom { background: var(--navy); color: #fff; }
.custom .container { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; }
.custom p { color: #bdcad2; line-height: 1.7; }
.custom ul { align-self: center; list-style: none; padding: 0; }
.custom li { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.custom li::before { content: "+"; color: var(--cyan); margin-right: 14px; }
.steps { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
.step { padding: 30px 24px; border-right: 1px solid var(--line); }
.step:last-child { border: 0; }.step small { color: var(--cyan); font-weight: 850; }.step h3 { margin-top: 38px; }.step p { color: var(--muted); line-height: 1.65; font-size: 14px; }
.principles { background: #e8efed; }.principles-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: #cad8d5; }.principle { padding: 30px; background: #f6f9f8; }.principle p { color: var(--muted); line-height: 1.65; }
.about-grid,.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }.about-grid p,.contact-copy p { color: var(--muted); line-height: 1.75; }.quote { margin: 0; padding: 36px; background: #fff; border-left: 4px solid var(--cyan); font-size: 23px; line-height: 1.5; }
.contact { border-top: 1px solid var(--line); }.contact-form { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 32px; }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.contact-form label { display: grid; gap: 7px; margin-bottom: 15px; font-size: 12px; font-weight: 750; }.contact-form input,.contact-form textarea { width: 100%; padding: 12px; border: 1px solid #cad7d4; border-radius: 7px; background: #fbfdfc; }.privacy-check { display: flex!important; grid-template-columns: auto 1fr; align-items: center; font-weight: 500!important; }.privacy-check input { width: auto; }.honeypot { position: absolute; left: -10000px; }.form-status { min-height: 22px; font-size: 13px; }
footer { color: #fff; background: #0a2030; padding: 65px 0 28px; }.footer-grid { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 36px; }.footer-logo { width: 205px; }.footer-grid h3 { color: #86a0ae; font-size: 11px; letter-spacing: .14em; }.footer-grid div:not(:first-child) { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }.footer-grid p,.footer-grid span { color: #9db1bc; }.copyright { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13); color: #78909d; font-size: 11px; }
.legal { max-width: 850px; padding-block: 70px 110px; }.legal h1 { font-size: clamp(48px,7vw,76px); }.legal section { padding: 28px 0; border-top: 1px solid var(--line); }.legal section h2 { font-size: 24px; }.legal section p { color: var(--muted); line-height: 1.75; }

@media (max-width: 900px) {
  .menu-button { display: block; }.nav { display: none; position: absolute; top: 82px; left: 24px; right: 24px; padding: 24px; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 12px; z-index: 20; }.nav.open { display: flex; }
  .hero { grid-template-columns: 1fr; }.hero-art { min-height: 430px; }.proof .container { grid-template-columns: 1fr 1fr; padding-block: 16px; }.section-heading { grid-template-columns: 1fr; }.service { grid-template-columns: 1fr; }.service-copy { min-height: 420px; }.service-art { height: 390px; }.custom .container,.about-grid,.contact-grid { grid-template-columns: 1fr; }.steps,.principles-grid { grid-template-columns: 1fr 1fr; }.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .container { width: min(100% - 36px,var(--width)); }.logo { width: 150px; }.hero { padding-block: 55px; }.hero-art { min-height: 350px; }.product-chip { width: 145px; }.proof .container,.steps,.principles-grid,.field-row,.footer-grid { grid-template-columns: 1fr; }.service-copy { min-height: 400px; padding: 28px 22px; }.service-art { height: 280px; }.service-description { font-size: 21px; }.section { padding-block: 75px; }
}

/* ================================================================
   VERDIEPENDE PAGINA'S EN NIEUWE HOMEPAGE-SECTIES
   ================================================================ */
.page-hero { padding: 90px 0 70px; border-bottom: 1px solid var(--line); }
.page-hero { position: relative; overflow: hidden; background: linear-gradient(120deg, rgba(255,255,255,.62), rgba(238,246,244,.70)); }
.page-hero::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -95px;
  top: -150px;
  border: 1px solid rgba(22,142,163,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(22,142,163,.035), 0 0 0 105px rgba(37,182,134,.025);
  animation: hero-orbit 13s ease-in-out infinite alternate;
}
.page-hero .container { position: relative; }
.page-hero .container::after {
  content: "";
  position: absolute;
  right: 2%;
  top: 50%;
  width: 250px;
  height: 170px;
  transform: translateY(-42%);
  opacity: .9;
  background:
    radial-gradient(circle at 12% 64%, var(--page-accent, var(--cyan)) 0 6px, #fff 7px 11px, transparent 12px),
    radial-gradient(circle at 48% 28%, var(--page-accent, var(--cyan)) 0 6px, #fff 7px 11px, transparent 12px),
    radial-gradient(circle at 83% 61%, var(--page-accent, var(--cyan)) 0 6px, #fff 7px 11px, transparent 12px),
    linear-gradient(31deg, transparent 0 31%, rgba(16,43,67,.18) 31.3% 31.8%, transparent 32.1%),
    linear-gradient(151deg, transparent 0 47%, rgba(16,43,67,.18) 47.3% 47.8%, transparent 48.1%);
  filter: drop-shadow(0 20px 25px rgba(16,43,67,.10));
  animation: network-float 7s ease-in-out infinite;
}
.page-hero::after {
  content: var(--page-words, "MENS  ·  PROCES\A TECHNOLOGIE  ·  AI");
  white-space: pre;
  position: absolute;
  right: 7%;
  top: 49%;
  z-index: 1;
  padding: 13px 17px;
  color: var(--page-accent, var(--cyan));
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(16,43,67,.10);
  border-radius: 10px;
  box-shadow: -28px 42px 0 -8px rgba(255,255,255,.64), 0 18px 35px rgba(16,43,67,.10);
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: .12em;
  font-weight: 900;
  transform: rotate(-2deg);
  animation: label-float 8s ease-in-out infinite;
}
.page-hero h1, .page-hero .lead, .page-hero .breadcrumb, .page-hero .eyebrow, .page-hero .article-meta { position: relative; z-index: 1; max-width: 72%; }
.page-work { --page-accent: var(--cyan); --page-words: "BEGRIJPEN  ·  VERBETEREN\A ADVISEREN  ·  BOUWEN"; }
.page-solutions { --page-accent: var(--mint); --page-words: "BEACON  ·  CLARITY\A HARMONY  ·  MAATWERK"; }
.page-approach { --page-accent: var(--violet); --page-words: "VRAAG  →  PRESTUDY\A PILOT  →  PRAKTIJK"; }
.page-insights { --page-accent: #d18b26; --page-words: "CONTEXT  ·  BRONNEN\A INZICHT  ·  BESLUIT"; }
.page-about { --page-accent: #1e69b6; --page-words: "30+ JAAR IT\A MENS  ·  PROCES  ·  TECH"; }
.page-contact { --page-accent: var(--mint); --page-words: "LUISTEREN  ·  BEGRIJPEN\A SAMEN  ·  VOLGENDE STAP"; }
html[lang="en"] .page-work { --page-words: "UNDERSTAND  ·  IMPROVE\A ADVISE  ·  BUILD"; }
html[lang="en"] .page-solutions { --page-words: "BEACON  ·  CLARITY\A HARMONY  ·  CUSTOM"; }
html[lang="en"] .page-approach { --page-words: "QUESTION  →  PRESTUDY\A PILOT  →  PRACTICE"; }
html[lang="en"] .page-insights { --page-words: "CONTEXT  ·  SOURCES\A INSIGHT  ·  DECISION"; }
html[lang="en"] .page-about { --page-words: "30+ YEARS IN IT\A PEOPLE  ·  PROCESS  ·  TECH"; }
html[lang="en"] .page-contact { --page-words: "LISTEN  ·  UNDERSTAND\A TOGETHER  ·  NEXT STEP"; }

@keyframes hero-orbit { to { transform: translate(-35px, 28px) rotate(7deg); } }
@keyframes network-float { 50% { transform: translateY(-48%) translateX(-9px) rotate(2deg); } }
@keyframes label-float { 50% { transform: translateY(-8px) rotate(1deg); } }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 { max-width: 940px; font-size: clamp(46px, 6vw, 76px); }
.page-hero .lead { max-width: 800px; }
.page-hero.compact { padding-block: 70px 55px; }
.breadcrumb { margin-bottom: 28px; color: var(--muted); font-size: 12px; font-weight: 700; }
.breadcrumb a:hover { color: var(--cyan); }
.intro-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
.intro-grid .intro-statement { font-size: clamp(27px, 3vw, 40px); line-height: 1.25; letter-spacing: -.035em; font-weight: 720; }
.prose { max-width: 780px; }
.prose p { color: var(--muted); line-height: 1.8; font-size: 17px; }
.prose h2 { margin-top: 72px; font-size: clamp(32px, 4vw, 48px); }
.prose h3 { margin-top: 36px; font-size: 23px; }
.prose ul { color: var(--muted); line-height: 1.75; }
.lead-callout { padding: 30px; border-left: 4px solid var(--cyan); border-radius: 0 14px 14px 0; background: #edf7f5; font-size: 21px; line-height: 1.5; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.content-card { display: flex; flex-direction: column; min-height: 310px; padding: 30px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 12px 28px rgba(16,43,67,.055); }
.content-card { position: relative; overflow: hidden; }
.content-card::after { content: ""; position: absolute; width: 115px; height: 115px; right: -58px; bottom: -68px; border: 1px solid rgba(22,142,163,.12); border-radius: 50%; box-shadow: 0 0 0 22px rgba(22,142,163,.025); }
.content-card .card-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 26px; border-radius: 13px; color: var(--cyan); background: #e6f4f5; font-weight: 900; }
.content-card h3 { margin: 0 0 12px; font-size: 23px; }
.content-card p { color: var(--muted); line-height: 1.7; }
.content-card ul { padding-left: 18px; color: var(--muted); line-height: 1.7; }
.content-card .text-link { margin-top: auto; padding-top: 20px; color: var(--cyan); font-size: 13px; font-weight: 850; }
.challenge-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.challenge { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.challenge strong { display: block; margin-bottom: 9px; }
.challenge p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14px; }
.evidence-band { padding: 75px 0; color: #fff; background: var(--navy); }
.evidence-band {
  background-color: var(--navy);
  background-image:
    radial-gradient(circle at 9% 24%, rgba(37,182,134,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 72%, rgba(22,142,163,.14) 0 2px, transparent 3px),
    linear-gradient(118deg, transparent 0 64%, rgba(255,255,255,.035) 64.2% 64.35%, transparent 64.55%);
  background-size: 120px 120px, 155px 155px, 420px 420px;
}
.evidence-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
.evidence-band h2 { font-size: clamp(35px, 4vw, 52px); }
.evidence-band p { color: #b8c8d1; line-height: 1.75; }
.evidence-band .button, .custom .button { color: #fff; background: var(--cyan); border-color: var(--cyan); }
.evidence-band .button:hover, .custom .button:hover { color: #fff; background: transparent; border-color: rgba(255,255,255,.7); }
.evidence-points { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.13); }
.evidence-points div { padding: 24px; background: #0d2940; }
.evidence-points strong { display: block; margin-bottom: 8px; color: #fff; }
.evidence-points span { color: #a8bdc8; font-size: 13px; line-height: 1.55; }
.process-roadmap { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--line); }
.roadmap-step { padding: 28px 20px 10px; border-right: 1px solid var(--line); }
.roadmap-step:last-child { border-right: 0; }
.roadmap-step small { color: var(--cyan); font-weight: 850; }
.roadmap-step h3 { margin-top: 32px; }
.roadmap-step p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.product-teasers { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.product-teaser { overflow: hidden; border-radius: 16px; color: #fff; background: var(--navy); }
.product-teaser.beacon { color: var(--ink); background: #e4f4f5; }
.product-teaser.harmony { background: #211a4c; }
.product-teaser img { width: 100%; height: 210px; object-fit: cover; }
.product-teaser div { padding: 26px; }
.product-teaser h3 { margin: 0 0 10px; font-size: 27px; }
.product-teaser p { min-height: 70px; color: inherit; opacity: .78; line-height: 1.65; }
.product-teaser a { color: var(--accent, #35e0aa); font-size: 13px; font-weight: 850; }
.product-teaser.beacon { --accent: var(--cyan); }.product-teaser.harmony { --accent: #a990ff; }
.mission-section { background: #eaf2f0; }
.mission-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 75px; align-items: center; }
.mission-grid p { color: var(--muted); line-height: 1.8; }
.mission-list { padding: 30px; border-radius: 16px; background: #fff; }
.mission-list div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.mission-list div:last-child { border: 0; }
.mission-list strong { color: var(--cyan); }
.article-list { display: grid; gap: 18px; }
.article-card { display: grid; grid-template-columns: 180px 1fr auto; gap: 28px; align-items: center; padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.article-card .article-label { color: var(--cyan); font-size: 11px; letter-spacing: .12em; font-weight: 850; }
.article-card h2 { margin: 7px 0 8px; font-size: 28px; }
.article-card p { margin: 0; color: var(--muted); line-height: 1.65; }
.article-card > a { color: var(--cyan); font-weight: 850; }
.article-meta { display: flex; gap: 14px; color: var(--muted); font-size: 12px; }
.phase-nav { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin: 35px 0 55px; }
.phase-nav a { padding: 14px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 12px; font-weight: 800; text-align: center; }
.phase { padding: 45px 0; border-top: 1px solid var(--line); }
.phase-heading { display: grid; grid-template-columns: 150px 1fr; gap: 30px; }
.phase-number { color: var(--cyan); font-size: 12px; letter-spacing: .12em; font-weight: 850; }
.responsibility-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 24px; }
.responsibility { padding: 23px; border-radius: 13px; background: #fff; border: 1px solid var(--line); }
.responsibility.ai { background: #eaf6f3; }
.responsibility strong { display: block; margin-bottom: 9px; }
.responsibility p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 14px; }
.process-details { display: grid; gap: 10px; margin-top: 30px; }
.process-details details { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.process-details summary { cursor: pointer; padding: 17px 20px; font-weight: 800; }
.process-details details > div { padding: 0 20px 20px; color: var(--muted); line-height: 1.7; }
.notice { padding: 24px; border: 1px solid #bddbd4; border-radius: 13px; background: #edf8f5; color: #275347; line-height: 1.65; }
.faq { display: grid; gap: 10px; }
.faq details { border-bottom: 1px solid var(--line); padding: 17px 0; }
.faq summary { cursor: pointer; font-weight: 800; }
.faq p { color: var(--muted); line-height: 1.7; }
.cta-band { padding: 65px 0; color: #fff; background: linear-gradient(115deg,#102b43,#164963); }
.cta-band {
  background-color: #102b43;
  background-image:
    radial-gradient(circle at 18% 25%, rgba(37,182,134,.14) 0 2px, transparent 3px),
    linear-gradient(135deg, transparent 0 73%, rgba(255,255,255,.04) 73.2% 73.4%, transparent 73.6%),
    linear-gradient(115deg,#102b43,#164963);
  background-size: 125px 125px, 390px 390px, auto;
}
.cta-band .container { display: flex; justify-content: space-between; gap: 40px; align-items: center; }
.cta-band h2 { max-width: 700px; margin: 0; font-size: clamp(32px,4vw,48px); }
.cta-band .button { color: var(--ink); background: #fff; border-color: #fff; }
.cta-band .button:hover { color: #fff; background: transparent; }

/* Homepage: iets meer gelaagdheid, zonder afbreuk te doen aan de rust. */
.home-page main {
  background-image:
    radial-gradient(circle at 4% 12%, rgba(22,142,163,.07), transparent 23%),
    radial-gradient(circle at 96% 38%, rgba(37,182,134,.065), transparent 22%),
    radial-gradient(circle at 12% 82%, rgba(112,87,217,.045), transparent 20%);
}
.home-page .hero { position: relative; }
.home-page .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3% -9%;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(circle at 10% 20%, rgba(22,142,163,.18) 0 2px, transparent 3px),
    linear-gradient(32deg, transparent 0 58%, rgba(22,142,163,.055) 58.2% 58.4%, transparent 58.6%);
  background-size: 105px 105px, 330px 330px;
  animation: ambient-grid 24s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  body::before, .page-hero::before, .page-hero::after, .page-hero .container::after { animation: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 900px) {
  .cards-3,.challenge-grid,.product-teasers { grid-template-columns: 1fr; }
  .cards-2,.evidence-grid,.mission-grid,.intro-grid { grid-template-columns: 1fr; }
  .process-roadmap,.phase-nav { grid-template-columns: 1fr 1fr; }
  .article-card { grid-template-columns: 1fr; }
  .article-card > a { justify-self: start; }
  .phase-heading { grid-template-columns: 1fr; gap: 8px; }
  .page-hero h1, .page-hero .lead, .page-hero .breadcrumb, .page-hero .eyebrow, .page-hero .article-meta { max-width: 100%; }
  .page-hero .container::after { right: -110px; opacity: .23; }
  .page-hero::after { display: none; }
}
@media (max-width: 600px) {
  .challenge-grid,.process-roadmap,.phase-nav,.responsibility-grid,.evidence-points { grid-template-columns: 1fr; }
  .roadmap-step { border-right: 0; border-bottom: 1px solid var(--line); }
  .cta-band .container { align-items: flex-start; flex-direction: column; }
}