/* =====================================================================
   MARSS x Assuria: adviesrapport in MARSS-stijl, zacht en warm,
   met het groen van Assuria als onderstroom.
   ===================================================================== */
@font-face { font-family: "Platform"; src: url("../fonts/Platform-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Platform"; src: url("../fonts/Platform-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Platform"; src: url("../fonts/Platform-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --kop: "Platform", "Helvetica Neue", Arial, sans-serif;
  --body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* MARSS */
  --zwart: #0A0A0A;
  --roze: #FDBFCA;
  --licht: #F6F5F2;

  /* Warm en zacht */
  --creme: #F5F1EA;
  --zand: #ECE6DB;
  --papier: #FBF9F5;
  --bos: #1F3B2D;
  --bos-2: #2C5140;
  --nacht: #12231A;
  --goud: #B8935A;
  --goud-licht: #DCC7A1;
  --salie: #A9BAA9;
  --inkt: #171717;
  --tekst: #4B4A45;
  --grijs: #8A857C;
  --lijn: rgba(23, 23, 23, .1);
  --lijn-licht: rgba(255, 255, 255, .14);

  /* Voor de schetsen (de producten van Assuria), gedempt */
  --groen: #2E6A4C;
  --diep: #1F3B2D;
  --mist: #F1EEE7;
  --licht-groen: #E5ECE5;
  --geel: #D8B25A;
  --rood: #A8443F;
  --oranje: #C98A3A;

  --sidebar: 400px;
  --pad: 56px;
  --uit: cubic-bezier(.16, 1, .3, 1);
  --veer: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; overscroll-behavior-y: none; background: var(--nacht); }
body { font: 400 16px/1.6 var(--body); color: var(--tekst); background: var(--nacht); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--goud-licht); color: var(--inkt); }
.wrap { max-width: 1080px; margin: 0 auto; position: relative; z-index: 2; }
.merk { width: 100%; height: 100%; display: block; }

/* ---------- Badge en sidebar (MARSS) ---------- */
.badge { position: fixed; top: 0; right: 40px; z-index: 1000; background: #fff; padding: 16px 20px 18px; border-radius: 0 0 14px 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .16); }
.badge img { height: 34px; width: auto; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); height: 100vh; background: var(--licht); color: var(--zwart); z-index: 100; display: flex; flex-direction: column; border-right: 1px solid var(--lijn); }
.sidebar-header { padding: 40px var(--pad) 36px; border-bottom: 1px solid var(--lijn); display: grid; gap: 16px; }
.sidebar-logo { display: block; width: 168px; aspect-ratio: 466 / 101; background: var(--zwart); -webkit-mask: url("../images/marss-logo.png") center / contain no-repeat; mask: url("../images/marss-logo.png") center / contain no-repeat; }
.sidebar-met { font: 500 15px/1.45 var(--body); color: var(--bos-2); }
.sidebar-nav { flex: 1; padding: 44px var(--pad); overflow-y: auto; }
.nav-section { position: relative; padding-left: 26px; }
.nav-progress-bar { position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--lijn); margin-left: 3px; }
.nav-progress-fill { position: absolute; left: -3px; top: 0; width: 8px; height: 8px; background: var(--bos-2); border-radius: 50%; box-shadow: 0 0 0 5px rgba(44, 81, 64, .16); transition: top .5s var(--uit); }
.nav-item { display: block; font: 500 22px/1.25 var(--kop); color: rgba(10, 10, 10, .36); text-decoration: none; margin-bottom: 14px; transition: color .25s, transform .4s var(--uit); }
.nav-item:hover { color: rgba(10, 10, 10, .75); }
.nav-item.active { color: var(--zwart); transform: translateX(4px); }
.sidebar-footer { padding: 30px var(--pad); display: grid; gap: 14px; }
.btn-side { display: block; padding: 16px 24px; background: var(--zwart); color: #fff; text-align: center; text-decoration: none; font: 700 15px var(--kop); border-radius: 999px; transition: transform .3s var(--uit), background .2s; }
.btn-side:hover { background: var(--bos); transform: translateY(-2px); }
.sidebar-klein { font-size: 12px; color: rgba(10, 10, 10, .45); text-align: center; }

.mobile-nav { display: none; position: fixed; bottom: 15px; left: 16px; right: 16px; z-index: 100; flex-direction: column-reverse; opacity: 0; transform: translateY(20px); transition: opacity .3s, transform .3s; pointer-events: none; }
.mobile-nav.visible { opacity: 1; transform: none; pointer-events: auto; }
.mobile-nav-toggle { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 16px 20px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); color: var(--zwart); border: 1px solid var(--lijn); border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.mobile-nav.open .mobile-nav-toggle { border-radius: 0 0 18px 18px; }
.hamburger-icon { display: flex; flex-direction: column; justify-content: space-between; width: 18px; height: 12px; }
.hamburger-line { display: block; height: 2px; background: var(--bos); transition: all .3s; }
.mobile-nav.open .hamburger-line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.mobile-nav.open .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-nav.open .hamburger-line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.mobile-nav-current { font: 700 14px var(--kop); }
.mobile-nav-dropdown { display: none; flex-direction: column; background: rgba(255, 255, 255, .98); border: 1px solid var(--lijn); border-bottom: 0; border-radius: 18px 18px 0 0; overflow: hidden; }
.mobile-nav.open .mobile-nav-dropdown { display: flex; }
.mobile-nav-item { padding: 15px 22px; font: 500 15px var(--kop); color: rgba(10, 10, 10, .6); text-decoration: none; border-bottom: 1px solid var(--lijn); }
.mobile-nav-item.active { color: var(--bos); }

.main-content { margin-left: var(--sidebar); position: relative; width: calc(100% - var(--sidebar)); }

/* ---------- Knoppen en labels (MARSS) ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; font: 500 13.5px var(--body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-radius: 999px; transition: transform .3s var(--uit), background .25s, color .25s, border-color .25s; }
.btn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.btn:hover { transform: translateY(-2px); }
.btn-licht { background: var(--papier); color: var(--inkt); }
.btn-licht::before { background: var(--goud); }
.btn-licht:hover { background: #fff; }
.btn-outline { color: #fff; border: 1px solid rgba(255, 255, 255, .6); }
.btn-outline:hover { background: #fff; color: var(--inkt); }
.btn-zwart { background: var(--zwart); color: #fff; }
.btn-zwart::before { background: var(--goud-licht); }
.btn-zwart:hover { background: var(--bos); }
.label { display: inline-block; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .9); color: var(--inkt); font: 700 10px var(--body); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Typografie ---------- */
.kicker { display: flex; align-items: center; gap: 14px; font: 500 12.5px var(--body); letter-spacing: .26em; text-transform: uppercase; color: var(--goud); margin-bottom: 22px; }
.kicker::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.kicker--licht { color: var(--goud-licht); }
.titel { font: 700 clamp(36px, 4vw, 56px)/1.05 var(--kop); letter-spacing: -.02em; color: var(--inkt); max-width: 18ch; }
.titel--licht { color: #fff; }
.intro { font-size: 17px; line-height: 1.75; max-width: 60ch; margin-top: 24px; }
.intro--licht { color: rgba(255, 255, 255, .72); }

.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--uit), transform 1.1s var(--uit); transition-delay: calc(var(--i, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; }

/* ---------- Hero: de foto van Assuria, vol in beeld ---------- */
.hero { position: fixed; top: 0; left: var(--sidebar); right: 0; height: 100vh; overflow: hidden; clip-path: inset(0); contain: paint; background: var(--nacht); z-index: 0; }
/* Kader met de verhouding van de foto dat de hero dekt; --px en --py werken als object-position. */
.hero__scene { --px: 86%; --py: 30%; position: absolute; left: var(--px); top: var(--py); width: max(100%, 320vh); aspect-ratio: 1920 / 600; transform: translate(calc(var(--px) * -1), calc(var(--py) * -1)); animation: heroIn 1.8s var(--uit) both; }
.hero__laag { display: block; width: 100%; height: 100%; }
@keyframes heroIn { from { opacity: 0; } }
.hero__waas { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 35, 26, .92) 0%, rgba(18, 35, 26, .74) 38%, rgba(18, 35, 26, .08) 70%, rgba(18, 35, 26, 0) 82%), linear-gradient(0deg, rgba(18, 35, 26, .4), transparent 34%); }

/* Het stel ligt als losse laag op een achtergrond zonder mensen. Bij scrollen komt het stel iets
   dichterbij (JS zet --zoom); achtergrond en ruiten blijven stil staan. */
.hero__laag + .hero__laag { position: absolute; inset: 0; }
.hero__mensen { transform: scale(var(--zoom, 1)); transform-origin: 75.5% 100%; will-change: transform; }

/* Assuria-ruiten voor de waas, precies zoals in de originele foto: één hele ruit, de rest afgesneden door het kader. */
.hero__scene--ruiten { z-index: 1; pointer-events: none; }
.ruiten { display: block; width: 100%; height: 100%; overflow: visible; }
.ruitband__in { fill-opacity: .85; animation: ruitIn 1.8s cubic-bezier(.16, 1, .3, 1) .4s both; }
@keyframes ruitIn { from { opacity: 0; transform: translateY(120px); } }
.hero__inhoud { position: relative; z-index: 2; height: 100%; display: grid; align-content: center; padding: 100px var(--pad) 40px; max-width: 860px; color: #fff; }
.hero__kicker { font: 500 12.5px var(--body); letter-spacing: .3em; text-transform: uppercase; color: var(--goud-licht); margin-bottom: 24px; animation: kom .9s var(--uit) .3s both; }
.hero__titel { font: 700 clamp(44px, 5.4vw, 82px)/1.02 var(--kop); letter-spacing: -.025em; margin-bottom: 28px; animation: kom 1s var(--uit) .45s both; }
.hero__titel em { font-style: normal; color: var(--goud-licht); }
.hero__sub { font-size: 18px; line-height: 1.65; max-width: 560px; color: rgba(255, 255, 255, .86); margin-bottom: 40px; animation: kom 1s var(--uit) .6s both; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 14px; animation: kom 1s var(--uit) .75s both; }
.hero__voet { position: absolute; left: var(--pad); bottom: 32px; z-index: 2; display: flex; gap: 26px; flex-wrap: wrap; font-size: 13px; color: rgba(255, 255, 255, .7); animation: kom 1s var(--uit) .9s both; }
.hero__voet b { color: #fff; font-weight: 500; }
.hero__label { position: absolute; right: 24px; bottom: 24px; z-index: 2; }
.hero-spacer { height: 100vh; }
@keyframes kom { from { opacity: 0; transform: translateY(24px); } }

/* ---------- Secties ---------- */
.sectie { position: relative; z-index: 2; padding: 130px var(--pad); }
.sectie--creme { background: var(--creme); }
.sectie--zand { background: var(--zand); }
.section--eerste { box-shadow: 0 -24px 48px rgba(0, 0, 0, .2); }
.sectie__kop { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 60px; align-items: end; margin-bottom: 56px; }
.sectie__kop .intro { margin-top: 0; }

.hoorden { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px 64px; align-items: end; }
.citaat { margin-top: 40px; padding-left: 26px; border-left: 1px solid var(--goud); font: 500 clamp(21px, 2vw, 27px)/1.4 var(--kop); color: var(--bos); max-width: 30ch; }
.hoorden__beeld { grid-column: 1 / -1; position: relative; aspect-ratio: 2.4; margin-top: 10px; border-radius: 4px; overflow: hidden; }
.hoorden__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.03); transition: transform 1.8s var(--uit); }
.hoorden__beeld.in img { transform: none; }
.hoorden__beeld figcaption { position: absolute; right: 14px; bottom: 14px; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .88); font: 700 10px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--inkt); }

/* Cijfers in MARSS-stijl */
.cijfers { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 100px; border-top: 1px solid var(--lijn); }
.cijfers > div { padding: 34px 24px 0 0; }
.cijfers > div + div { padding-left: 28px; border-left: 1px solid var(--lijn); }
.cijfers b { display: flex; align-items: baseline; gap: 8px; font: 700 clamp(48px, 5vw, 72px)/1 var(--kop); letter-spacing: -.03em; color: var(--inkt); }
.cijfers b small { font: 500 15px var(--body); letter-spacing: 0; color: var(--goud); }
.cijfers p { font-size: 14px; line-height: 1.55; margin-top: 12px; max-width: 22ch; }

/* =====================================================================
   De mogelijkheden: de bergen van MARSS die overgaan in diepgroen
   ===================================================================== */
.ruimte { position: relative; z-index: 2; color: #fff; padding: 150px var(--pad) 120px; background: var(--bos); overflow: hidden; isolation: isolate; }
.ruimte__bergen { position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; background: url("../images/bergen.jpg") center 70% / cover no-repeat; }
.ruimte__bergen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 35, 26, .72) 0%, rgba(18, 35, 26, .45) 30%, rgba(31, 59, 45, .8) 62%, var(--bos) 100%); }
.ruimte::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; background-image: radial-gradient(1px 1px at 12% 58%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 66%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 42% 84%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 92%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 96%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 62% 74%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 80%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 95% 70%, #fff 50%, transparent 51%); }
.ruimte__kop { margin-bottom: 30px; }
.ruimte__kop .intro { max-width: 56ch; }

/* Het heelal */
@keyframes draai { to { transform: rotate(360deg); } }
@keyframes terugdraai { to { transform: rotate(-360deg); } }
@keyframes zweef { 50% { transform: translateY(-6px); } }
@keyframes adem { 50% { transform: scale(1.12); opacity: .55; } }
.heelal { position: relative; width: min(940px, 100%); aspect-ratio: 1; margin: 0 auto; }
.baan { position: absolute; z-index: 2; pointer-events: none; border-radius: 50%; animation: draai var(--t) linear infinite; }
.baan--1 { inset: 20%; --t: 140s; }
.baan--2 { inset: 1%; --t: 220s; animation-direction: reverse; }
.baan__lijn { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .22); }
.baan--2 .baan__lijn { border-style: dotted; border-color: rgba(220, 199, 161, .35); }
.heelal.is-stil .baan, .heelal.is-stil .planeet__in { animation-play-state: paused; }
.planeet { position: absolute; left: calc(50% + 50% * cos(var(--a))); top: calc(50% + 50% * sin(var(--a))); width: 0; height: 0; pointer-events: auto; }
.planeet__in { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 10px; width: 190px; margin-left: -95px; margin-top: calc(var(--s) / -2); animation: terugdraai var(--t) linear infinite; transform-origin: 95px calc(var(--s) / 2); }
.baan--2 .planeet__in { animation-direction: reverse; }
.baan--1 .planeet { --s: 96px; --t: 140s; }
.baan--2 .planeet { --s: 68px; --t: 220s; }
.planeet__bol { width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--p1) 0%, var(--p2) 48%, var(--p3) 100%); box-shadow: inset -10px -14px 28px rgba(0, 0, 0, .35), 0 20px 50px -14px rgba(0, 0, 0, .6); transition: transform .6s var(--veer), box-shadow .4s; animation: zweef 6s ease-in-out infinite; }
.planeet__label { text-align: center; display: grid; gap: 3px; }
.planeet__label small { font: 500 10.5px var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--goud-licht); }
.planeet__label b { font: 700 16px/1.2 var(--kop); color: #fff; }
.baan--2 .planeet__label b { font-size: 14.5px; color: rgba(255, 255, 255, .85); }
.planeet:hover .planeet__bol, .planeet:focus-visible .planeet__bol, .planeet.is-gekozen .planeet__bol { transform: scale(1.12); box-shadow: inset -10px -14px 28px rgba(0, 0, 0, .3), 0 0 0 8px rgba(220, 199, 161, .18), 0 20px 50px -14px rgba(0, 0, 0, .6); }
.planeet:focus-visible { outline: none; }
.planeet--chatbot { --p1: #fbf1dc; --p2: #d4b27a; --p3: #6e5531; }
.planeet--papier { --p1: #eef3ee; --p2: #a9baa9; --p3: #3d5547; }
.planeet--assistent { --p1: #ffffff; --p2: #e2dccf; --p3: #7c7466; }
.planeet--klantbeeld { --p1: #f4d9cc; --p2: #b8735a; --p3: #5a2f22; }
.planeet--claims { --p1: #ead0d3; --p2: #8f4a52; --p3: #3e1c21; }
.planeet--papier .planeet__bol { animation-delay: -2s; }
.planeet--assistent .planeet__bol { animation-delay: -4s; }
.planeet--claims .planeet__bol { animation-delay: -3s; }
.baan--2 .planeet__bol { outline: 1px dashed rgba(220, 199, 161, .5); outline-offset: 7px; }

/* Hover: witte sluier met plus over de bol, en een wit label "Klik voor meer info" erboven */
.planeet__bol { position: relative; }
.sluier { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7) 70%, rgba(255, 255, 255, .5)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transform: scale(.85); transition: opacity .4s var(--uit), transform .5s var(--uit); }
/* Easter egg: de Assuria-ruit (zelfde verhouding en bandbreedte als in de header) als omlijnd icoon */
.sluier::before, .plus { content: ""; position: absolute; left: 50%; top: 50%; height: 44%; aspect-ratio: 291 / 524; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 291 524'%3E%3Cpath fill='%231F3B2D' fill-rule='evenodd' d='M145.5 0 291 262 145.5 524 0 262Z M145.5 99 236 262 145.5 425 55 262Z'/%3E%3C/svg%3E") center / contain no-repeat; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: transform .6s var(--veer), opacity .4s var(--uit); }
.hint { position: absolute; left: 50%; top: 0; z-index: 3; white-space: nowrap; padding: 8px 14px 8px 12px; border-radius: 999px; background: #fff; color: var(--bos); font: 600 10px var(--body); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .45); display: flex; align-items: center; gap: 8px; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 4px)); transition: opacity .35s var(--uit), transform .5s var(--uit); }
.hint::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--goud); }
.hint::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.baan--1 .hint { margin-top: -14px; }
.baan--2 .hint { margin-top: -18px; }
.zon__sluier { position: absolute; inset: 0; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 12px; font: 600 11px/1.5 var(--body); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--bos); background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .82) 70%, rgba(245, 241, 234, .74)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .45s var(--uit); }
.plus { display: block; position: relative; left: auto; top: auto; height: 46px; transform: scale(.6); }
@media (hover: hover) {
  .planeet:hover .sluier, .planeet:focus-visible .sluier { opacity: 1; transform: none; }
  .planeet:hover .sluier::before, .planeet:focus-visible .sluier::before { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: .08s; }
  .zon:hover .plus, .zon:focus-visible .plus { opacity: 1; transform: scale(1); transition-delay: .1s; }
  .planeet:hover .hint, .planeet:focus-visible .hint { opacity: 1; transform: translate(-50%, calc(-100% - 14px)); }
  .zon:hover .zon__sluier, .zon:focus-visible .zon__sluier { opacity: 1; }
}
.zon { position: absolute; z-index: 1; left: 50%; top: 50%; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; }
.zon__gloed { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(220, 199, 161, .28) 0%, transparent 65%); animation: adem 7s ease-in-out infinite; }
.zon__bol { position: absolute; inset: 0; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 4px; padding: 14%; background: radial-gradient(circle at 36% 30%, #3f6b55 0%, #1f3b2d 55%, #0e1d15 100%); box-shadow: inset 0 0 0 1px rgba(220, 199, 161, .45), inset -16px -20px 40px rgba(0, 0, 0, .4), 0 30px 70px -20px rgba(0, 0, 0, .7); transition: transform .6s var(--veer), box-shadow .4s; }
.zon__bol small { font: 500 10.5px var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--goud-licht); }
.zon__bol b { font: 700 clamp(22px, 2.6vw, 32px)/1 var(--kop); color: #fff; }
.zon__bol span { font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .7); }
.zon:hover .zon__bol, .zon.is-gekozen .zon__bol { transform: scale(1.05); box-shadow: inset 0 0 0 1px var(--goud-licht), 0 0 0 10px rgba(220, 199, 161, .12), 0 30px 70px -20px rgba(0, 0, 0, .7); }

.overzicht { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-top: 50px; padding-top: 40px; border-top: 1px solid var(--lijn-licht); }
.overzicht__kop { font: 500 12px var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--goud-licht); margin-bottom: 10px; }
.overzicht__item { width: 100%; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--lijn-licht); text-align: left; color: #fff; transition: padding .35s var(--uit), color .25s; }
.overzicht__item span { font: 700 14px var(--kop); color: var(--goud-licht); }
.overzicht__item b { font: 500 18px var(--kop); }
.overzicht__item i { font-style: normal; color: var(--goud-licht); transition: transform .35s var(--veer); }
.overzicht__item:hover { padding-left: 8px; }
.overzicht__item:hover i { transform: translateX(4px); }
.overzicht__item--richting b { color: rgba(255, 255, 255, .8); }
.overzicht__item--kern span { font-size: 10px; }

.tag { display: inline-block; padding: 4px 10px; border-radius: 99px; font: 700 10px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.tag--pilot { background: var(--goud-licht); color: var(--inkt); }
.tag--richting { box-shadow: inset 0 0 0 1px var(--goud); color: var(--goud); }
.tag--kern { background: var(--bos); color: #fff; }

/* =====================================================================
   De pop-up: links de schets, rechts het advies
   ===================================================================== */
.laagpop { position: fixed; inset: 0 0 0 var(--sidebar); z-index: 1100; display: grid; place-items: center; padding: 3vh 3vw; }
.laagpop[hidden] { display: none; }
.laagpop__waas { position: absolute; inset: 0; background: rgba(12, 22, 17, .7); backdrop-filter: blur(10px); opacity: 0; transition: opacity .45s; }
.laagpop.is-open .laagpop__waas { opacity: 1; }
.laagpop__kaart { position: relative; width: min(1120px, 100%); height: min(760px, 94vh); background: var(--papier); color: var(--tekst); border-radius: 18px; overflow: hidden; box-shadow: 0 50px 140px rgba(0, 0, 0, .5); opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.6); transition: transform .7s var(--uit), opacity .35s; }
.laagpop.is-open .laagpop__kaart { opacity: 1; transform: none; }
.laagpop__sluit { position: absolute; top: 18px; right: 18px; z-index: 5; width: 46px; height: 46px; border-radius: 50%; background: var(--zand); transition: transform .45s var(--veer), background .2s; }
.laagpop__sluit:hover { transform: rotate(90deg); background: var(--goud-licht); }
.laagpop__sluit span { position: absolute; left: 14px; right: 14px; top: 22px; height: 1.5px; background: var(--inkt); transform: rotate(45deg); }
.laagpop__sluit span + span { transform: rotate(-45deg); }
.laagpop__inhoud { height: 100%; transition: opacity .22s; }
.laagpop__inhoud.is-wissel { opacity: 0; }

.pop { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.pop__beeld { position: relative; display: grid; place-items: center; padding: 56px 44px; overflow: hidden; background: radial-gradient(ellipse 90% 70% at 30% 15%, #3a6350 0%, transparent 65%), var(--bos); }
.pop__beeld::before { content: ""; position: absolute; width: 520px; aspect-ratio: 1; right: -260px; bottom: -260px; border-radius: 50%; border: 1px dashed rgba(220, 199, 161, .25); }
.pop__beeld::after { content: ""; position: absolute; width: 360px; aspect-ratio: 1; right: -180px; bottom: -180px; border-radius: 50%; border: 1px solid rgba(220, 199, 161, .18); }
.pop__mk { position: relative; z-index: 1; width: 100%; max-width: 460px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: flex-start; }
.pop__label { position: absolute; left: 44px; bottom: 22px; font: 500 10px var(--body); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.pop__tekst { overflow-y: auto; overscroll-behavior: contain; padding: 60px 52px 40px 48px; }
.pop__kicker { display: flex; align-items: center; gap: 12px; font: 500 12px var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--goud); }
.pop__titel { font: 700 clamp(30px, 3vw, 42px)/1.05 var(--kop); color: var(--inkt); letter-spacing: -.02em; margin: 18px 0 14px; max-width: 16ch; }
.pop__zin { font-size: 16.5px; line-height: 1.65; padding-bottom: 26px; border-bottom: 1px solid var(--lijn); }
.pop__blok { padding: 22px 0 0; }
.pop__blok h4 { font: 500 11.5px var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--grijs); margin-bottom: 10px; }
.pop__blok p { font-size: 15px; line-height: 1.75; }
.pop__blok--hoorden ul { display: grid; gap: 6px; }
.pop__blok--hoorden li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.65; }
.pop__blok--hoorden li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--goud); }
.winst { display: flex; flex-wrap: wrap; gap: 8px; }
.winst li { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 9px; border-radius: 99px; background: var(--zand); font: 500 13.5px var(--body); color: var(--inkt); }
.winst li::before { content: "\2713"; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--bos); color: var(--goud-licht); font-size: 10px; }
.fiche { margin-top: 26px; border: 1px solid var(--lijn); border-radius: 12px; background: #fff; }
.fiche summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; font: 700 15px var(--kop); color: var(--inkt); }
.fiche summary::-webkit-details-marker { display: none; }
.fiche summary i { width: 28px; height: 28px; border-radius: 50%; background: var(--bos); position: relative; flex: none; }
.fiche summary i::before, .fiche summary i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 1.5px; background: var(--goud-licht); transition: transform .3s var(--uit); }
.fiche summary i::after { transform: rotate(90deg); }
.fiche[open] summary i::after { transform: rotate(0); }
.fiche dl { display: grid; grid-template-columns: 110px 1fr; border-top: 1px solid var(--lijn); }
.fiche dt, .fiche dd { padding: 11px 18px; border-bottom: 1px solid var(--lijn); font-size: 13.5px; line-height: 1.6; }
.fiche dt { font: 700 13px var(--kop); color: var(--bos-2); padding-right: 6px; }
.fiche dl > :nth-last-child(-n+2) { border-bottom: 0; }
.pop__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--lijn); }
.pop__nav button { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 99px; border: 1px solid var(--lijn); font: 500 12.5px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--inkt); transition: border-color .2s, background .2s; }
.pop__nav button:hover { border-color: var(--inkt); background: #fff; }
.pop__nav i { font-style: normal; font-size: 14px; }
.laagpop .pop__tekst > * { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--uit), transform .7s var(--uit); }
.laagpop.is-open .pop__tekst > * { opacity: 1; transform: none; transition-delay: .2s; }
.laagpop.is-open .pop__tekst > :nth-child(n+4) { transition-delay: .3s; }
.laagpop.is-open .pop__mk > * { animation: kom2 .9s var(--uit) .3s both; }
.laagpop.is-open .pop__mk > :nth-child(2) { animation-delay: .45s; }
@keyframes kom2 { from { opacity: 0; transform: translateY(30px) scale(.97); } }

/* ---------- Schetsen in de pop-up ---------- */
.mk { background: #fff; color: var(--tekst); border-radius: 8px; padding: 18px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); text-align: left; }
.mk--breed { width: 100%; }
.mk--smal { width: 100%; }
.mk__kop { font: 700 11px var(--kop); letter-spacing: .16em; text-transform: uppercase; color: var(--groen); margin-bottom: 12px; }
.mk__zin { font-size: 13px; color: var(--grijs); margin-top: 10px; }
.merkje { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; padding: 6px; flex: none; }

.systemen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.systemen div { background: var(--mist); border-radius: 4px; padding: 12px; border-top: 3px solid var(--groen); }
.systemen div:first-child { border-top-color: var(--geel); }
.systemen b { display: block; font: 700 14px/1.2 var(--kop); color: var(--diep); }
.systemen span { font-size: 11.5px; color: var(--grijs); }
.landen { display: flex; flex-wrap: wrap; gap: 6px; }
.landen span { padding: 6px 10px; border-radius: 3px; background: var(--diep); color: #fff; font: 700 12px var(--kop); letter-spacing: .08em; }
.landen span:first-child { background: var(--geel); color: var(--inkt); }

.keten { counter-reset: k; display: grid; gap: 0; }
.keten li { position: relative; display: grid; gap: 1px; padding: 11px 14px 11px 46px; border-radius: 4px; background: var(--mist); counter-increment: k; }
.keten li + li { margin-top: 18px; }
.keten li + li::after { content: ""; position: absolute; left: 25px; top: -18px; height: 18px; width: 2px; background: repeating-linear-gradient(180deg, var(--groen) 0 4px, transparent 4px 7px); background-size: 2px 14px; animation: stroomV 1s linear infinite; }
@keyframes stroomV { to { background-position: 0 14px; } }
.keten li::before { content: counter(k); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--groen); font: 700 13px var(--kop); box-shadow: inset 0 0 0 1.5px var(--groen); }
.keten b { font: 700 15px var(--kop); color: var(--diep); }
.keten span { font-size: 12.5px; color: var(--grijs); }
.keten li.ai { background: var(--geel); }
.keten li.ai::before { background: var(--inkt); color: var(--geel); box-shadow: none; }
.keten li.ai span { color: rgba(14, 14, 14, .7); }
.keten li.mens { background: var(--diep); }
.keten li.mens b { color: #fff; }
.keten li.mens span { color: rgba(255, 255, 255, .7); }
.keten li.mens::before { background: var(--geel); color: var(--inkt); box-shadow: none; }
.meter { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; padding: 6px 0; }
.meter b { font: 600 13px var(--kop); color: var(--diep); }
.meter span { display: block; height: 8px; border-radius: 4px; background: var(--mist); overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--groen), #2f9a5e); transform-origin: left; transform: scaleX(var(--w)); transition: transform 1.4s var(--uit) .7s; }
.laagpop:not(.is-open) .meter i, .laagpop__inhoud.is-wissel .meter i { transform: scaleX(0); }

/* Chatbot */
.chat { width: 100%; max-width: 400px; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); font-family: var(--body); }
.chat__kop { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--groen); color: #fff; }
.chat__kop b { display: block; font: 700 16px var(--kop); letter-spacing: .02em; }
.chat__kop small { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .9; }
.chat__kop small i { width: 7px; height: 7px; border-radius: 50%; background: var(--geel); }
.chat__berichten { display: grid; gap: 9px; padding: 16px; background: var(--mist); align-content: end; height: 380px; overflow: hidden; scroll-behavior: smooth; }
.chat__berichten > * { animation: bericht .45s var(--veer) both; }
@keyframes bericht { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.bericht { max-width: 86%; padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: #fff; font-size: 13.5px; line-height: 1.45; box-shadow: 0 0 0 1px var(--lijn); }
.bericht--ik { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--groen); color: #fff; box-shadow: none; }
.bericht small { display: block; margin-top: 7px; font-size: 11.5px; color: var(--grijs); }
.claim { margin-top: 10px; padding: 12px; border-radius: 8px; background: var(--mist); }
.claim__kop { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.claim__kop b { font-family: var(--kop); font-size: 14px; color: var(--diep); }
.claim__kop span { color: var(--grijs); font-size: 12px; }
.claim ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; }
.claim li { font-size: 10.5px; line-height: 1.3; padding-top: 7px; border-top: 4px solid var(--lijn); color: var(--grijs); }
.claim li.klaar { border-color: var(--groen); color: var(--inkt); }
.claim li.nu { border-color: var(--geel); color: var(--inkt); font-weight: 700; }
.typen { display: inline-flex; gap: 4px; padding: 11px 13px; background: #fff; border-radius: 14px; justify-self: start; box-shadow: 0 0 0 1px var(--lijn); }
.typen i { width: 6px; height: 6px; border-radius: 50%; background: var(--groen); animation: typen 1.2s ease-in-out infinite; }
.typen i:nth-child(2) { animation-delay: .15s; }
.typen i:nth-child(3) { animation-delay: .3s; }
@keyframes typen { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: .4; } }
.chat__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; border-top: 1px solid var(--lijn); }
.chat__tags span { padding: 6px 11px; border-radius: 99px; border: 1px solid var(--lijn); font: 600 12px var(--kop); color: var(--diep); transition: background .3s, color .3s, border-color .3s; }
.chat__tags span.is-aan { background: var(--geel); border-color: var(--geel); color: var(--inkt); }
.koppel { width: 100%; max-width: 400px; border-radius: 10px; padding: 14px 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #fff; }
.koppel__kop { font: 700 10.5px var(--kop); letter-spacing: .18em; text-transform: uppercase; color: var(--geel); }
.koppel__rij { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; font: 700 13px var(--kop); }
.koppel__rij span { padding: 6px 10px; border-radius: 4px; background: rgba(255, 255, 255, .12); white-space: nowrap; }
.koppel__rij span.ai { background: var(--geel); color: var(--inkt); }
.koppel__rij i { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--geel) 0 6px, transparent 6px 10px); background-size: 20px 2px; animation: stroom 1s linear infinite; }
@keyframes stroom { to { background-position: 20px 0; } }
.koppel__ok { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.koppel__ok b { color: var(--geel); }

/* Papier */
.formulier { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; width: 100%; }
.papier { position: relative; overflow: hidden; background: #fffdf6; border-radius: 4px; padding: 18px 16px; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .6); transform: rotate(-2deg); margin-top: 20px; }
.papier__kop { font: 700 12px var(--kop); text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid #222; padding-bottom: 8px; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; color: var(--inkt); }
.papier__kop small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--grijs); }
.papier__veld { border-bottom: 1px solid #d9d2bf; padding: 6px 0 2px; }
.papier__veld span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #8a8270; }
.papier__veld em { font: 600 20px/1.15 "Caveat", cursive; color: #1d3a8a; font-style: normal; }
.papier__scan { position: absolute; left: 0; right: 0; top: 0; height: 46px; background: linear-gradient(180deg, transparent, rgba(251, 210, 12, .3) 70%, var(--geel) 72%, transparent 74%); animation: scan 3.4s ease-in-out infinite; }
@keyframes scan { 0% { transform: translateY(-50px); } 60%, 100% { transform: translateY(380px); } }
.veld { padding: 6px 0; border-bottom: 1px solid var(--mist); }
.veld span { display: block; font-size: 10.5px; color: var(--grijs); }
.veld b { font-size: 13.5px; color: var(--inkt); }
.veld i { display: block; height: 4px; border-radius: 2px; background: var(--mist); margin-top: 5px; position: relative; }
.veld i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--z) * 100%); background: var(--groen); border-radius: 2px; }
.veld i em { position: absolute; right: 0; top: -16px; font-size: 10.5px; font-weight: 700; font-style: normal; color: var(--groen); }
.veld--check b, .veld--check i em { color: #c25e00; }
.veld--check i::before { background: var(--oranje); }
.uitgelezen__actie { margin-top: 10px; display: grid; gap: 8px; }
.uitgelezen__actie span { font-size: 12px; color: #c25e00; font-weight: 600; }
.uitgelezen__actie b { font: 700 12px var(--kop); letter-spacing: .06em; text-transform: uppercase; text-align: center; background: var(--geel); color: var(--inkt); padding: 9px; border-radius: 3px; }

/* Assistent */
.assistent { width: 100%; display: grid; gap: 12px; }
.assistent__kop { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--mist); }
.assistent__kop .merkje { background: var(--mist); }
.assistent__kop b { font: 700 15px var(--kop); color: var(--diep); }
.assistent__kop small { margin-left: auto; font-size: 11.5px; color: var(--grijs); background: var(--mist); padding: 4px 9px; border-radius: 99px; }
.vraag { justify-self: end; max-width: 88%; font-size: 13.5px; padding: 10px 13px; border-radius: 14px 14px 4px 14px; background: var(--groen); color: #fff; }
.antwoord { background: var(--mist); border-radius: 8px; padding: 14px; }
.antwoord > p:first-child { font-size: 14px; font-weight: 600; color: var(--inkt); }
.staven { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; height: 140px; margin: 12px 0 6px; align-items: end; }
.staaf { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.staaf__paar { display: flex; gap: 4px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.staaf__paar i { width: 40%; max-width: 22px; height: calc(var(--h) * 100%); background: #9cc7ae; border-radius: 3px 3px 0 0; transition: height 1.1s var(--uit) .5s; }
.staaf__paar i.q3 { background: var(--groen); transition-delay: .65s; }
.laagpop:not(.is-open) .staaf__paar i, .laagpop__inhoud.is-wissel .staaf__paar i { height: 0; }
.staaf span { font: 700 12px var(--kop); color: var(--grijs); }
.antwoord__legenda { font-size: 11.5px; color: var(--grijs); display: flex; align-items: center; gap: 6px; }
.antwoord__legenda i { width: 10px; height: 10px; border-radius: 2px; background: #9cc7ae; display: inline-block; }
.antwoord__legenda i.q3 { background: var(--groen); margin-left: 8px; }
.antwoord__bron { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--lijn); font-size: 12px; }
.antwoord__bron span:last-child { color: var(--groen); font-weight: 700; text-decoration: underline; }

/* Cockpit */
.intake { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--mist); }
.intake b { display: block; font: 700 14px var(--kop); color: var(--diep); }
.intake small { font-size: 11.5px; color: var(--grijs); }
.intake em { font-style: normal; font: 700 10.5px var(--kop); letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; background: var(--licht-groen); color: var(--groen); }
.stip { width: 10px; height: 10px; border-radius: 50%; }
.stip--klaar { background: var(--groen); }
.stip--bezig { background: var(--geel); box-shadow: 0 0 0 4px rgba(251, 210, 12, .25); }
.drempel i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #9cc7ae, var(--groen)); position: relative; margin: 14px 0 10px; }
.drempel b { position: absolute; top: -7px; left: calc(var(--d) * 100%); width: 5px; height: 24px; background: var(--geel); border-radius: 2px; box-shadow: 0 0 0 2px #fff; }
.drempel p { display: flex; justify-content: space-between; font: 700 12px var(--kop); color: var(--diep); }

/* Klantbeeld en claims */
.klant { width: 100%; }
.klant__kop { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.klant__init { width: 44px; height: 44px; border-radius: 50%; background: var(--groen); color: #fff; display: grid; place-items: center; font: 700 15px var(--kop); }
.klant__kop b { font: 700 17px var(--kop); color: var(--diep); display: block; }
.klant__kop small { font-size: 12.5px; color: var(--grijs); }
.klant__tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.klant__tegels div { background: var(--mist); border-radius: 4px; padding: 11px; }
.klant__tegels span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--grijs); }
.klant__tegels b { font-size: 13.5px; color: var(--inkt); }
.klant__tegels .signaal { grid-column: 1 / -1; background: var(--geel); }
.klant__tegels .signaal span { color: var(--inkt); }
.vergelijk { width: 100%; border-collapse: separate; border-spacing: 0; padding: 0; overflow: hidden; font-size: 13px; }
.vergelijk th, .vergelijk td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--lijn); }
.vergelijk th { font: 700 11px var(--kop); text-transform: uppercase; letter-spacing: .08em; color: var(--diep); }
.vergelijk th:last-child, .vergelijk td:last-child { background: var(--licht-groen); }
.vergelijk td:first-child { font-weight: 700; color: var(--grijs); }
.vergelijk tr:last-child td { border-bottom: 0; }
.wachtrij { width: 100%; }
.wachtrij__kop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.wachtrij__kop b { font: 700 15px var(--kop); color: var(--diep); }
.wachtrij__kop span { font: 700 11px var(--kop); color: var(--groen); text-transform: uppercase; letter-spacing: .1em; }
.decl { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 4px; background: var(--mist); margin-bottom: 8px; }
.decl > i { width: 10px; height: 10px; border-radius: 50%; }
.decl b { font: 700 14px var(--kop); display: block; color: var(--inkt); }
.decl small { font-size: 12px; color: var(--grijs); }
.decl em { font-size: 12px; font-weight: 700; font-style: normal; text-align: right; }
.decl--groen > i { background: var(--groen); } .decl--groen em { color: var(--groen); }
.decl--rood > i { background: var(--rood); } .decl--rood em { color: var(--rood); } .decl--rood { background: #fdeef1; }
.decl--oranje > i { background: var(--oranje); } .decl--oranje em { color: #b36a00; }


/* =====================================================================
   De route: zwart-wit, als een wireframe
   ===================================================================== */
.sectie--route { background: var(--papier); color: var(--inkt); padding-bottom: 110px; }
.route { position: relative; max-width: 1080px; margin: 60px auto 0; color: var(--inkt); }
.route__kaart { display: block; width: 100%; height: auto; overflow: visible; }
.route__lijn { fill: none; stroke: rgba(23, 23, 23, .25); stroke-width: 2.5; stroke-dasharray: .1 12; stroke-linecap: round; }
.route__lijn--af { stroke: var(--inkt); stroke-dasharray: none; stroke-width: 1.5; }
.route__tak { fill: none; stroke: var(--inkt); stroke-width: 1.2; stroke-dasharray: 3 6; opacity: 0; transition: opacity .8s var(--uit); }
.route.is-vertakt .route__tak { opacity: .7; }
.route__ring { fill: var(--papier); stroke: var(--inkt); stroke-width: 1.2; opacity: .3; transition: opacity .6s; }
.route__ring--2 { fill: none; stroke-dasharray: 2 4; }
.route__kern { fill: var(--inkt); opacity: .3; transition: opacity .6s, transform .6s var(--veer); transform-box: fill-box; transform-origin: center; }
.route__punt.is-bereikt .route__ring { opacity: 1; }
.route__punt.is-bereikt .route__kern { opacity: 1; transform: scale(1.3); }
.route__punt.is-bereikt .route__ring--2 { animation: draai 12s linear infinite; transform-box: fill-box; transform-origin: center; }
.route__maat { stroke: var(--inkt); stroke-width: 1; opacity: .5; }
.route__maattekst { font: 500 10px var(--body); letter-spacing: 3px; fill: var(--inkt); opacity: .6; text-anchor: middle; }
.route__stip { fill: var(--goud); stroke: var(--papier); stroke-width: 3; }
.route__labels { position: absolute; inset: 0; pointer-events: none; }
.route__label { position: absolute; left: var(--x); top: var(--y); width: 220px; transform: translateX(-50%); text-align: center; opacity: .35; transition: opacity .6s, transform .8s var(--uit); }
.route__label.is-bereikt { opacity: 1; }
.route__label span { font: 500 11px var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--goud); }
.route__label h4 { font: 700 19px/1.2 var(--kop); color: var(--inkt); margin: 6px 0; }
.route__label p { font-size: 13.5px; line-height: 1.55; color: var(--tekst); }
.route__label--tak { width: 20%; transform: translateY(-50%); text-align: left; }
.route__label--tak h4 { font-size: 16px; margin: 3px 0 0; }
button.route__label { pointer-events: auto; cursor: pointer; }
button.route__label:hover h4 { text-decoration: underline; text-underline-offset: 4px; }

/* =====================================================================
   Techniek, kosten en governance
   ===================================================================== */
.grip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grip__kol { position: relative; padding: 36px 32px 30px; background: var(--papier); border-radius: 16px; transition: transform .5s var(--uit), box-shadow .5s var(--uit); }
.grip__kol:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(31, 59, 45, .45); }
.grip__nr { display: block; font: 500 30px/1 var(--kop); color: var(--goud); letter-spacing: .06em; }
.grip__kol h3 { font: 700 26px var(--kop); color: var(--inkt); margin: 10px 0 20px; letter-spacing: -.01em; }
.grip__kol dt { font: 700 15.5px var(--kop); color: var(--bos); padding-top: 16px; border-top: 1px solid var(--lijn); }
.grip__kol dt:first-child { border-top: 0; padding-top: 0; }
.grip__kol dd { font-size: 14px; line-height: 1.65; margin: 5px 0 16px; }
.noot { margin-top: 30px; padding-left: 20px; border-left: 1px solid var(--goud); font-size: 15px; line-height: 1.75; max-width: 70ch; }

/* =====================================================================
   Uw keuze en het team
   ===================================================================== */
.keuze-blok { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: center; }
.keuze-blok__beeld { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: #fff; }
.keuze-blok__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 86% 50%; }
.keuze { display: grid; gap: 16px; justify-items: start; margin-top: 34px; }
.keuze__opties { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.keuze__optie { position: relative; }
.keuze__optie input { position: absolute; opacity: 0; pointer-events: none; }
.keuze__optie span { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border-radius: 14px; background: var(--papier); box-shadow: 0 0 0 1px var(--lijn); cursor: pointer; transition: background .25s, box-shadow .25s, color .25s; }
.keuze__optie span i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; background: var(--zand); color: var(--inkt); display: grid; place-items: center; font: 700 12px var(--kop); }
.keuze__optie b { font: 700 15px/1.25 var(--kop); color: var(--inkt); }
.keuze__optie small { font: 500 9.5px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--grijs); }
.keuze__optie:hover span { box-shadow: 0 0 0 1px var(--inkt); }
.keuze__optie input:checked + span { background: var(--bos); box-shadow: none; }
.keuze__optie input:checked + span b { color: #fff; }
.keuze__optie input:checked + span i { background: var(--goud-licht); }
.keuze__optie input:checked + span small { color: var(--goud-licht); }
.keuze__optie input:focus-visible + span { outline: 2px solid var(--goud); outline-offset: 2px; }
.keuze__eigen { width: 100%; display: grid; gap: 6px; font: 500 13px var(--body); color: var(--inkt); }
.keuze__eigen input { font: 400 15px var(--body); padding: 14px 18px; border-radius: 14px; border: 1px solid var(--lijn); background: var(--papier); }
.keuze__eigen input:focus { outline: 1px solid var(--inkt); }

.team-blok { margin-top: 90px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.team__kop { margin: 44px 0 18px; font: 700 22px var(--kop); color: var(--inkt); }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.team li { display: grid; justify-items: start; align-content: start; gap: 6px; padding: 26px; border-radius: 18px; background: var(--papier); box-shadow: 0 0 0 1px var(--lijn); transition: transform .45s var(--uit), box-shadow .3s; }
.team li:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--lijn), 0 18px 40px -22px rgba(0, 0, 0, .25); }
.team img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; filter: grayscale(1); margin-bottom: 8px; transition: filter .4s; }
.team li:hover img { filter: none; }
.team h4 { font: 700 21px/1.1 var(--kop); color: var(--inkt); }
.team__rol { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--goud); }
.team__tekst { font-size: 14px; line-height: 1.55; color: var(--tekst); margin: 4px 0 12px; }
.team__knop { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 99px; background: var(--zwart); color: #fff; font: 500 13.5px var(--body); text-decoration: none; transition: background .25s, color .25s; }
.team__knop i { font-style: normal; transition: transform .35s var(--veer); }
.team__knop:hover { background: var(--bos); }
.team__knop:hover i { transform: translateX(4px); }

.voet { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; padding: 30px var(--pad); background: var(--nacht); color: rgba(255, 255, 255, .5); font-size: 12.5px; }
.voet__logo { width: 84px; aspect-ratio: 466 / 101; background: #fff; -webkit-mask: url("../images/marss-logo.png") center / contain no-repeat; mask: url("../images/marss-logo.png") center / contain no-repeat; }
.voet p:last-child { margin-left: auto; }
.voet a { color: var(--goud-licht); }

/* =====================================================================
   Login
   ===================================================================== */
.login { position: relative; min-height: 100vh; display: flex; flex-direction: column; color: #fff; background: var(--nacht); overflow: hidden; }
.login__beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 0%; }
.login__waas { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 35, 26, .9) 0%, rgba(18, 35, 26, .66) 42%, rgba(18, 35, 26, .15) 80%); }
.login > :not(.login__beeld):not(.login__waas) { position: relative; z-index: 1; }
.login__logo { display: flex; align-items: center; gap: 16px; padding: 36px var(--pad); }
.login__marss { width: 120px; aspect-ratio: 466 / 101; background: #fff; -webkit-mask: url("../images/marss-logo.png") center / contain no-repeat; mask: url("../images/marss-logo.png") center / contain no-repeat; }
.login__x { opacity: .5; font-size: 18px; }
.login__assuria { height: 34px; width: auto; filter: brightness(0) invert(1); }
.login__vak { flex: 1; display: grid; align-content: center; max-width: 580px; padding: 0 var(--pad) 80px; }
.login__kicker { font: 500 12px var(--body); letter-spacing: .3em; text-transform: uppercase; color: var(--goud-licht); margin-bottom: 20px; }
.login__titel { font: 700 clamp(40px, 5vw, 64px)/1.03 var(--kop); letter-spacing: -.025em; margin-bottom: 18px; }
.login__sub { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .84); margin-bottom: 34px; }
.login__form { display: grid; gap: 12px; }
.login__input { padding: 17px 22px; font: 500 16px var(--body); border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); backdrop-filter: blur(10px); color: #fff; outline: none; transition: border-color .2s; }
.login__input:focus { border-color: var(--goud-licht); }
.login__input::placeholder { color: rgba(255, 255, 255, .5); }
.login__knop { justify-content: center; }
.login__fout { margin-top: 14px; color: #f3c3b8; font-size: 14px; }
.login__voet { padding: 0 var(--pad) 30px; font-size: 12px; color: rgba(255, 255, 255, .55); }

/* =====================================================================
   Responsief
   ===================================================================== */
@media (max-width: 1500px) {
  :root { --sidebar: 320px; --pad: 44px; }
  .nav-item { font-size: 19px; }
}
@media (max-width: 1200px) {
  .hoorden, .keuze-blok, .sectie__kop { grid-template-columns: 1fr; }
  .hoorden__beeld { aspect-ratio: 16 / 9; }
  .keuze-blok__beeld { display: none; }
  .grip { grid-template-columns: 1fr; }
  .cijfers { grid-template-columns: 1fr 1fr; }
  .cijfers > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .cijfers > div:nth-child(n+3) { margin-top: 34px; }
  .team { grid-template-columns: 1fr; }
  .pop { grid-template-columns: .9fr 1.1fr; }
  .pop__beeld { padding: 50px 26px; }
  .route__label { width: 180px; }
  .route__label p { display: none; }
}
@media (max-width: 960px) {
  :root { --sidebar: 0px; }
  .sidebar, .badge { display: none; }
  .main-content { margin-left: 0; width: 100%; }
  .hero { left: 0; }
  .mobile-nav { display: flex; }
  .voet { padding-bottom: 100px; }
  .laagpop { padding: 0; place-items: end center; }
  .laagpop__kaart { height: 94svh; border-radius: 18px 18px 0 0; overflow-y: auto; overscroll-behavior: contain; }
  .laagpop__inhoud { height: auto; }
  .pop { grid-template-columns: 1fr; height: auto; }
  .pop__beeld { padding: 64px 22px 46px; }
  .pop__label { left: 22px; bottom: 16px; }
  .pop__tekst { overflow: visible; padding: 34px var(--pad); }
}
@media (max-width: 768px) {
  :root { --pad: 22px; }
  .sectie { padding: 90px var(--pad); }
  .ruimte { padding: 100px var(--pad) 90px; }
  .titel { font-size: 36px; }
  .intro { font-size: 16px; }
  .hero__inhoud { align-content: end; padding-bottom: 44px; }
  .hero__titel { font-size: 36px; }
  .hero__sub { font-size: 14.5px; margin-bottom: 22px; }
  .hero__knoppen { gap: 8px; }
  .hero .btn { padding: 13px 18px; font-size: 10.5px; }
  .hero__voet { display: none; }
  .hero__scene { --px: 72%; }  .hero__waas { background: linear-gradient(0deg, rgba(18, 35, 26, .92) 0%, rgba(18, 35, 26, .6) 45%, rgba(18, 35, 26, .05) 100%); }
  .cijfers > div { padding-right: 10px; }
  .cijfers > div + div { padding-left: 16px; }
  .cijfers > div:nth-child(3) { padding-left: 0; }
  .heelal { width: 100%; }
  .baan--1 .planeet { --s: 62px; }
  .baan--2 .planeet { --s: 44px; }
  .planeet__in { width: 120px; margin-left: -60px; transform-origin: 60px calc(var(--s) / 2); gap: 6px; }
  .planeet__label small { display: none; }
  .planeet__label b, .baan--2 .planeet__label b { font-size: 12px; }
  .zon { width: 28%; }
  .zon__bol span { display: none; }
  .zon__bol b { font-size: 18px; }
  .overzicht { grid-template-columns: 1fr; }
  .route { margin-top: 30px; }
  .route__kaart { display: none; }
  .route__labels { position: static; display: grid; gap: 0; border-left: 1px dashed rgba(23, 23, 23, .35); margin-left: 8px; }
  .route__label, .route__label--tak { position: relative; left: auto; top: auto; width: auto; transform: none; text-align: left; opacity: 1; padding: 0 0 26px 26px; }
  .route__label::before { content: ""; position: absolute; left: -6px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--papier); border: 1.5px solid var(--inkt); }
  .route__label p { display: block; }
  .keuze__opties { grid-template-columns: 1fr; }
  .keuze .btn { width: 100%; justify-content: center; }
  .formulier { grid-template-columns: 1fr; }
  .papier { margin-top: 0; }
  .chat__berichten { height: 340px; }
  .fiche dl { grid-template-columns: 1fr; }
  .fiche dt { border-bottom: 0; padding-bottom: 0; }
  .fiche dd { padding-top: 2px; }
  .voet p:last-child { margin-left: 0; }
  .login__vak { padding-bottom: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
}

/* Uit het gesprek: accordeon */
.gesprek { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; margin-top: 90px; padding-top: 50px; border-top: 1px solid var(--lijn); }
.gesprek__kop p:last-child { font-size: 15px; line-height: 1.7; max-width: 34ch; }
.akkoord { border-top: 1px solid var(--lijn); }
.akkoord__item { border-bottom: 1px solid var(--lijn); }
.akkoord__item summary { display: grid; grid-template-columns: 44px 1fr 26px; align-items: center; gap: 12px; padding: 20px 4px; cursor: pointer; list-style: none; }
.akkoord__item summary::-webkit-details-marker { display: none; }
.akkoord__nr { font: 500 13px var(--kop); color: var(--goud); letter-spacing: .08em; }
.akkoord__item summary b { font: 700 18px/1.3 var(--kop); color: var(--inkt); transition: color .25s; }
.akkoord__item summary:hover b { color: var(--bos-2); }
.akkoord__item summary i { position: relative; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px var(--lijn); transition: background .3s, box-shadow .3s; }
.akkoord__item summary i::before, .akkoord__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--inkt); transform: translate(-50%, -50%); transition: transform .35s var(--uit), background .3s; }
.akkoord__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.akkoord__item[open] summary i { background: var(--bos); box-shadow: none; }
.akkoord__item[open] summary i::before, .akkoord__item[open] summary i::after { background: #fff; }
.akkoord__item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.akkoord__item summary:focus-visible { outline: 2px solid var(--goud); outline-offset: 2px; }
.akkoord__tekst { padding: 0 34px 26px 60px; animation: akkoordOpen .5s var(--uit); }
.akkoord__tekst ul { display: grid; gap: 10px; }
.akkoord__tekst li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.65; }
.akkoord__tekst li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--goud); }
.akkoord__citaat { margin-top: 16px; padding-left: 16px; border-left: 1px solid var(--goud); font: 500 17px/1.4 var(--kop); color: var(--bos); }
@keyframes akkoordOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1200px) { .gesprek { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 768px) {
  .gesprek { margin-top: 60px; padding-top: 36px; }
  .akkoord__item summary { grid-template-columns: 32px 1fr 26px; padding: 16px 0; }
  .akkoord__item summary b { font-size: 16px; }
  .akkoord__tekst { padding: 0 0 22px 0; }
}

.hoorden > .citaat { margin: 0 0 6px; }
@media (max-width: 1200px) { .hoorden > .citaat { margin-top: 10px; } }
.gesprek__kop { position: sticky; top: 50px; align-self: start; }
.gesprek__titel { font: 700 clamp(28px, 2.6vw, 38px)/1.08 var(--kop); letter-spacing: -.02em; color: var(--inkt); margin-bottom: 16px; }
@media (max-width: 1200px) { .gesprek__kop { position: static; } }