/* kleurvariabelen voor de hele pagina */
:root{--blue:#17289B;--blue-dark:#0E1C6E;--cyan:#3BA6D3;--ink:#1A1D2E;--muted:#5A607A;--surface:#F4F6FB;--band:#111436;--line:rgba(23,40,155,.13);--warn:#B07A12;--alert:#C2410C;--alert-dark:#9A3412;--alert-soft:#FFF3EC;}

.dr-hero,
.dr-section,
.dr-homecta { --blue:#17289B; --blue-dark:#0E1C6E; --cyan:#3BA6D3;
  --ink:#1A1D2E; --muted:#5A607A; --surface:#F4F6FB; --band:#111436;
  --line:rgba(23,40,155,.13); --warn:#B07A12;
  --alert:#C2410C; --alert-dark:#9A3412; --alert-soft:#FFF3EC; }

/* ── hero ────────────────────────────────────────────────── */
/*
   GEEN overflow:hidden hier. De beloftebalk steekt met translateY(34px) onder
   de hero uit, en daar knipte dit hem af - vandaar dat 'twee werkdagen' half
   wegviel.

   De cyaan gloed die dit moest inperken zit nu op .dr-hero__bg, en die heeft
   zijn eigen overflow:hidden. De twee verlooplagen staan op inset:0 en kunnen
   dus sowieso niet uitsteken.
*/
.dr-hero{position:relative;color:#fff;
  /* Zelfde kleuren als het stappenblok: #0E1C6E naar #17289B naar #1E33BC.
     Dat maakt de twee donkere blokken op de pagina één familie. */
  background:linear-gradient(148deg,#0E1C6E 0%,var(--blue,#17289B) 54%,#1E33BC 100%)}
/* De cyaan gloed zit nu op het beeld zelf, want ::after is de tweede
   verloopslaag geworden. */
.dr-hero__bg::after{content:"";position:absolute;right:-8%;top:-32%;width:54%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(59,166,211,.2),transparent 68%);
  pointer-events:none}
.dr-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.dr-hero__inner{max-width:1180px;margin:0 auto;padding:66px 40px 0;position:relative;z-index:2}
.dr-hero__eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 20px}
.dr-hero__title{font-family:'Archivo','Syne',sans-serif;font-weight:800;letter-spacing:-.037em;
  font-size:clamp(34px,5.4vw,60px);line-height:1.02;margin:0 0 20px;max-width:17ch;color:#fff;
  text-shadow:0 2px 22px rgba(6,10,32,.55)}
.dr-hero__sub{font-size:19px;line-height:1.6;color:#D6DEF6;max-width:56ch;margin:0 0 32px;
  text-shadow:0 1px 14px rgba(6,10,32,.5)}
.dr-hero__eyebrow{text-shadow:0 1px 10px rgba(6,10,32,.5)}
.dr-hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:56px}

.dr-btn{display:inline-flex;align-items:center;gap:9px;font-family:'Syne',sans-serif;font-weight:600;
  font-size:15px;padding:14px 26px;border-radius:12px;text-decoration:none;
  background:var(--blue);color:#fff;border:1px solid var(--blue);transition:.16s}
.dr-btn:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.dr-btn--white{background:#fff;color:var(--blue);border-color:#fff}
.dr-btn--white:hover{background:#EEF1FA;color:var(--blue-dark)}
.dr-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32);flex-direction:column;
  align-items:flex-start;gap:2px;padding:10px 22px}
.dr-btn--ghost span{font-family:'DM Sans',sans-serif;font-weight:400;font-size:12px;color:#9FB2E8}
.dr-btn--ghost b{font-family:'IBM Plex Mono',monospace;font-size:16px;letter-spacing:.02em}
.dr-btn--ghost:hover{border-color:#fff;color:#fff}

/* de vier beloftes, half over de rand */
.dr-promise{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-radius:18px;overflow:hidden;transform:translateY(34px);
  box-shadow:0 20px 52px rgba(6,10,32,.32)}
.dr-promise__item{background:#fff;padding:24px 24px 26px;display:flex;flex-direction:column;gap:5px}
.dr-promise__item b{font-family:'Archivo',sans-serif;font-weight:700;font-size:15.5px;
  color:var(--ink);line-height:1.25}
.dr-promise__item span{font-size:13.5px;color:var(--muted);line-height:1.55}

/* ── secties ─────────────────────────────────────────────── */
.dr-section{padding-block:64px}
.dr-section--after-promise{padding-top:92px}
.dr-section--white{background:#fff}
.dr-section--surface{background:var(--surface)}
.dr-section--ink{background:var(--band);color:#fff}
.dr-section__inner{max-width:1180px;margin:0 auto;padding-inline:40px}
.dr-section__label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);margin:0 0 6px}
.dr-section--ink .dr-section__label{color:#8FA0C8}
.dr-section__title{font-family:'Archivo','Syne',sans-serif;font-weight:700;letter-spacing:-.026em;
  font-size:clamp(25px,3vw,35px);margin:0 0 10px;color:inherit}
.dr-section__lead{font-size:17.5px;color:var(--muted);max-width:64ch;margin:0 0 32px;line-height:1.6}
.dr-section--ink .dr-section__lead{color:#C7D2F0}

/* ── triage ──────────────────────────────────────────────── */
.dr-triage{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dr-triage__card{position:relative;display:block;background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--blue);border-radius:16px;padding:26px 26px 22px;
  text-decoration:none;color:inherit;transition:.16s}
.dr-triage__card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,16,40,.11);
  border-color:var(--blue);color:inherit}
.dr-triage__card b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;
  margin-bottom:7px;letter-spacing:-.01em}
/*
   Let op: dit was .dr-triage__card > span en dat trof ook de spoedvlag, want
   die is óók een direct kind. Met 0,2,0 tegen 0,1,0 won deze regel, en de vlag
   kreeg de grijsblauwe tekstkleur in plaats van wit.

   Vandaar de :not() - en de vlag krijgt hieronder bovendien genoeg gewicht om
   het nooit meer te verliezen.
*/
.dr-triage__card > span:not(.dr-triage__flag){display:block;font-size:15px;
  color:var(--muted);line-height:1.6}
.dr-triage__go{display:block;margin-top:16px;font-family:'Syne',sans-serif;font-weight:600;
  font-size:13.5px;font-style:normal;color:var(--blue);opacity:0;transform:translateX(-4px);transition:.16s}
.dr-triage__card:hover .dr-triage__go{opacity:1;transform:none}
.dr-triage__card--urgent{border-top:4px solid var(--alert,#C2410C);
  background:linear-gradient(180deg,#FFF3EC 0%,#fff 58%)}
.dr-triage__card--urgent:hover{border-color:var(--alert,#C2410C)}
.dr-triage__card--urgent .dr-triage__go{color:var(--alert-dark,#9A3412)}
/*
   Fel oranje met wit, en genoeg gewicht in de selector om te winnen van de
   kaartregel hierboven. Wit op #C2410C haalt 5,9:1; bij 14 pixels vetgedrukt
   is dat ruim boven de norm voor grote tekst (3:1) en ook boven die voor
   gewone tekst (4,5:1).

   De schaduw eronder is donker en niet oranje - een gekleurde schaduw onder
   een gekleurde vlag maakt de rand wazig en dat leest slechter.
*/
.dr-triage__card .dr-triage__flag,
.dr-triage__flag{position:absolute;top:-13px;right:16px;display:inline-flex;align-items:center;gap:7px;
  font-family:'Syne',sans-serif;font-weight:800;font-size:14px;letter-spacing:.005em;
  background:var(--alert,#C2410C);color:#fff;line-height:1;
  padding:9px 16px 9px 13px;border-radius:99px;
  text-shadow:0 1px 2px rgba(90,28,8,.45);
  box-shadow:0 3px 9px rgba(60,20,6,.32), 0 0 0 3px #fff}
.dr-triage__flag::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;
  flex:none;animation:drPulse 1.8s ease-in-out infinite}
@keyframes drPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}

/* ── waarom ──────────────────────────────────────────────── */
.dr-why{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.dr-why__item{border:1px solid rgba(255,255,255,.15);border-left:3px solid var(--cyan);
  border-radius:0 16px 16px 0;padding:24px 28px;background:rgba(255,255,255,.04)}
.dr-why__item b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;
  color:#fff;margin-bottom:6px}
.dr-why__item span{font-size:15px;color:#B9C4E0;line-height:1.6}

/* ── stappen ─────────────────────────────────────────────── */
.dr-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border-radius:16px;overflow:hidden}
.dr-step{background:#fff;padding:26px 22px}
.dr-step b{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;
  color:var(--blue);margin-bottom:12px}
.dr-step p{margin:0;font-size:15px;color:var(--ink);line-height:1.55}

/* ── afleverpunten ───────────────────────────────────────── */
.dr-spots{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.dr-spots__act{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.dr-spots__or{font-size:14.5px;color:var(--muted)}
.dr-spots__or b{color:var(--ink);font-weight:500}
.dr-spots__map{aspect-ratio:4/3;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(148deg,var(--surface),#E4E9F6);border:1px solid var(--line)}
.dr-spots__map span{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(60px,9vw,120px);
  color:rgba(23,40,155,.13);letter-spacing:-.05em}

/* ── merken ──────────────────────────────────────────────── */
.dr-brandlinks{display:flex;flex-wrap:wrap;gap:12px}
.dr-brandlinks a{font-family:'Syne',sans-serif;font-weight:600;font-size:15px;padding:12px 22px;
  border-radius:11px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.dr-brandlinks a:hover{border-color:var(--blue);color:var(--blue)}

.dr-partners{display:flex;flex-wrap:wrap;align-items:center;gap:38px;margin-top:34px;
  padding-top:28px;border-top:1px solid var(--line)}
.dr-partners img{height:30px;width:auto;opacity:.45;filter:grayscale(1);transition:.2s}
.dr-partners picture:hover img{opacity:1;filter:none}

/* ── slot ────────────────────────────────────────────────── */
.dr-homecta{background:var(--blue);color:#fff}
.dr-homecta__inner{max-width:1180px;margin:0 auto;padding:52px 40px;display:flex;flex-wrap:wrap;
  align-items:center;gap:26px}
.dr-homecta h2{flex:1 1 340px;font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.026em;
  font-size:clamp(24px,3vw,33px);margin:0;color:#fff}
.dr-homecta p{margin:8px 0 0;color:#C7D2F0;font-size:15.5px;max-width:52ch}
.dr-homecta__act{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:1000px){
  .dr-hero__inner,.dr-section__inner,.dr-homecta__inner{padding-inline:20px}
  .dr-promise{grid-template-columns:1fr 1fr}
  .dr-triage{grid-template-columns:1fr 1fr}
  .dr-why,.dr-spots{grid-template-columns:1fr}
  .dr-steps{grid-template-columns:1fr 1fr}
  .dr-spots__map{display:none}
}
@media (max-width:640px){
  .dr-promise,.dr-triage,.dr-steps{grid-template-columns:1fr}
  .dr-hero__act{flex-direction:column;align-items:stretch}
  .dr-btn{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .dr-triage__card,.dr-triage__go,.dr-partners img{transition:none}
  .dr-triage__card:hover{transform:none}
}


/* ── foto in de hero ─────────────────────────────────────── */
.dr-hero__bg{position:absolute;inset:0;z-index:0}
.dr-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;
  opacity:.62;filter:saturate(.86)}

/*
   Dezelfde kleuren als het blok eronder, maar met een doorzichtigheid die van
   links naar rechts wegloopt.

   Links dekt het bijna volledig - daar staat de tekst, en die moet leesbaar
   blijven ongeacht wat er toevallig op de foto staat. Rechts loopt het weg tot
   niets, zodat het beeld daar ademt.

   Het is dus één kleurverloop met een tweede verloop in de dekking, en niet
   vier verschillende kleuren zoals eerder.
*/
.dr-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(148deg,#0E1C6E 0%,var(--blue,#17289B) 54%,#1E33BC 100%);
  -webkit-mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.82) 34%,rgba(0,0,0,.44) 66%,transparent 100%);
          mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.82) 34%,rgba(0,0,0,.44) 66%,transparent 100%)}

/* Een tweede, verticale laag: donker aan de onderkant zodat de beloftekaarten
   loskomen van het beeld, en licht aan de bovenkant. */
.dr-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,14,40,.32) 0%,transparent 34%,rgba(10,14,40,.5) 100%)}

/* ── de bewegende stappen ────────────────────────────────── */
.dr-flow{background:linear-gradient(148deg,#0E1C6E 0%,var(--blue,#17289B) 54%,#1E33BC 100%);
  color:#fff;position:relative;overflow:hidden;padding-block:66px}
.dr-flow::after{content:"";position:absolute;right:-10%;bottom:-30%;width:52%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(59,166,211,.2),transparent 66%)}
.dr-flow__inner{max-width:1180px;margin:0 auto;padding-inline:40px;position:relative;z-index:2}
.dr-flow .dr-section__label{color:#9FB2E8}
.dr-flow .dr-section__title{color:#fff}
.dr-flow .dr-section__lead{color:#C7D2F0}

.dr-flow__stage{position:relative;min-height:320px;margin-top:14px}
.dr-flow__scene{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;
  gap:30px;align-items:center;opacity:0;visibility:hidden;transition:opacity .45s ease}
.dr-flow__scene.is-on{opacity:1;visibility:visible}
.dr-flow__no{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.16em;
  color:var(--cyan,#3BA6D3);margin:0 0 16px}
.dr-flow__txt h3{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(24px,3.6vw,40px);line-height:1.08;margin:0;color:#fff;max-width:20ch}
.dr-flow__art{display:grid;place-items:center}
.dr-flow__art svg{width:100%;max-width:330px;height:auto;overflow:visible}

.dr-flow__art .d{stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:640;stroke-dashoffset:640}
.dr-flow__scene.is-on .d{animation:drDraw .9s ease forwards}
.dr-flow__scene.is-on .d2{animation-delay:.2s}
.dr-flow__scene.is-on .d3{animation-delay:.4s}
.dr-flow__scene.is-on .d4{animation-delay:.6s}
@keyframes drDraw{to{stroke-dashoffset:0}}
.dr-flow__art .acc{stroke:var(--cyan,#3BA6D3)}
.dr-flow__art .fill{fill:var(--cyan,#3BA6D3);stroke:none;opacity:0}
.dr-flow__art .fill.ok{fill:#2FBF6B}
.dr-flow__scene.is-on .fill{animation:drPop .5s ease .8s forwards}
@keyframes drPop{to{opacity:1}}
.dr-flow__art .spin{transform-origin:center;animation:drSpin 4.5s linear infinite}
@keyframes drSpin{to{transform:rotate(360deg)}}

.dr-flow__bar{display:flex;gap:3px;margin-top:26px}
.dr-flow__bar button{flex:1;height:5px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.2);position:relative;overflow:hidden}
.dr-flow__bar button i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.dr-flow__bar button.is-done i{transform:scaleX(1)}
.dr-flow__bar button.is-now i{animation:drFill 6.5s linear forwards}
@keyframes drFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── waarschuwing bij het afleveren ──────────────────────── */
/*
   Het bruin was te braaf voor iets dat 'lees dit eerst' moet zeggen. Nu een
   verzadigd oranjerood met een gekleurde kopbalk erboven: dat springt eruit
   zonder op een foutmelding te lijken.

   Contrast: #7C2D12 op #FFF3EC haalt ruim 9:1, ver boven de norm van 4,5.
   De kopbalk is wit op #C2410C en haalt 5,9:1.
*/
.dr-notice{background:#FFF3EC;border:1px solid #F5B896;
  border-left:5px solid var(--alert,#C2410C);border-radius:0 14px 14px 0;
  margin-bottom:28px;overflow:hidden;box-shadow:0 3px 14px rgba(194,65,12,.1)}
.dr-notice__head{display:flex;gap:12px;align-items:center;background:var(--alert,#C2410C);
  color:#fff;padding:14px 24px}
.dr-notice__head b{text-shadow:0 1px 2px rgba(90,28,8,.4)}
.dr-notice__mark{flex:none;width:26px;height:26px;border-radius:50%;background:#fff;
  color:var(--alert,#C2410C);display:grid;place-items:center;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;line-height:1}
.dr-notice__head b{font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;
  letter-spacing:-.01em;color:#fff}
.dr-notice__body{padding:20px 24px 22px}
.dr-notice__body p{margin:0;font-size:16px;color:#7C2D12;line-height:1.62;max-width:72ch;font-weight:500}

.dr-dropflow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px}
.dr-dropflow__step{background:#fff;border:1px solid var(--line,rgba(23,40,155,.13));
  border-top:3px solid var(--blue,#17289B);border-radius:16px;padding:24px 26px}
.dr-dropflow__no{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(23,40,155,.09);color:var(--blue,#17289B);font-family:'IBM Plex Mono',monospace;
  font-size:14px;margin-bottom:14px}
.dr-dropflow__step b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;
  margin-bottom:5px}
.dr-dropflow__step > span:last-child{font-size:14.5px;color:var(--muted,#5A607A);line-height:1.55}

.dr-btn--line{background:#fff;color:var(--blue,#17289B);border-color:var(--line,rgba(23,40,155,.13))}
.dr-btn--line:hover{background:var(--surface,#F4F6FB);border-color:var(--blue,#17289B);color:var(--blue,#17289B)}

/* ── ervaringen ──────────────────────────────────────────── */
.dr-refs{display:grid;grid-template-columns:340px 1fr;gap:30px;align-items:start}
.dr-score{background:#fff;border:1px solid var(--line,rgba(23,40,155,.13));
  border-top:3px solid var(--blue,#17289B);border-radius:18px;padding:28px}
.dr-score__val{font-family:'Archivo',sans-serif;font-weight:800;font-size:58px;line-height:1;
  letter-spacing:-.04em;color:var(--blue,#17289B)}
.dr-score__of{font-size:14px;color:var(--muted,#5A607A);margin-top:2px}
.dr-score__n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted,#5A607A);
  margin-top:10px;padding-bottom:18px;border-bottom:1px solid var(--line,rgba(23,40,155,.13))}
.dr-bars{display:grid;gap:8px;margin-top:18px}
.dr-bar{display:grid;grid-template-columns:30px 1fr 38px;gap:9px;align-items:center;font-size:12.5px}
.dr-bar__lbl{font-family:'IBM Plex Mono',monospace;color:var(--muted,#5A607A)}
.dr-bar__track{height:7px;border-radius:99px;background:var(--surface,#F4F6FB);overflow:hidden}
.dr-bar__fill{display:block;height:100%;background:var(--blue,#17289B);border-radius:99px}
.dr-bar__cnt{font-family:'IBM Plex Mono',monospace;color:var(--muted,#5A607A);text-align:right}
.dr-refs__note{font-size:13.5px;color:var(--muted,#5A607A);margin:18px 0 16px;line-height:1.5}

.dr-quotes{display:grid;gap:16px}
.dr-quote{margin:0;background:#fff;border:1px solid var(--line,rgba(23,40,155,.13));
  border-left:3px solid var(--cyan,#3BA6D3);border-radius:0 16px 16px 0;padding:24px 28px}
.dr-quote blockquote{margin:0 0 14px;font-size:16px;line-height:1.65;color:var(--ink,#1A1D2E)}
.dr-quote figcaption{font-size:14px;color:var(--muted,#5A607A);display:flex;gap:10px;align-items:center}
.dr-quote__stars{color:#E8A317;letter-spacing:.08em}
.dr-quotes__empty{display:grid;place-items:center;padding:40px;background:#fff;
  border:1px dashed var(--line,rgba(23,40,155,.13));border-radius:16px}

@media (max-width:1000px){
  .dr-flow__inner{padding-inline:20px}
  .dr-flow__scene{grid-template-columns:1fr;gap:14px}
  .dr-flow__art{order:-1}
  .dr-flow__art svg{max-width:190px}
  .dr-flow__stage{min-height:420px}
  .dr-dropflow{grid-template-columns:1fr}
  .dr-refs{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .dr-flow__art .d{stroke-dashoffset:0!important;animation:none!important}
  .dr-flow__art .fill{opacity:1!important;animation:none!important}
  .dr-flow__art .spin{animation:none!important}
  .dr-flow__bar button.is-now i{animation:none;transform:scaleX(1)}
  .dr-flow__scene{transition:none}
}


/* ── röntgeninspectie ────────────────────────────────────── */
.dr-xray__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:center}
.dr-xray__art{background:#0A0E28;border-radius:18px;padding:26px;display:grid;place-items:center;
  position:relative;overflow:hidden}
.dr-xray__art::after{content:"";position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(59,166,211,.85),transparent);
  animation:drScan 4.5s ease-in-out infinite}
@keyframes drScan{0%,100%{top:12%}50%{top:88%}}
.dr-xray__art svg{width:100%;max-width:300px;height:auto}
.dr-xray__art .x-board{fill:none;stroke:rgba(159,178,232,.28);stroke-width:1.6}
.dr-xray__art .x-chip{fill:rgba(159,178,232,.14);stroke:rgba(159,178,232,.6);stroke-width:1.6}
.dr-xray__art .x-pin{stroke:rgba(159,178,232,.5);stroke-width:1.6;stroke-linecap:round}
.dr-xray__art .x-flaw{fill:rgba(194,65,12,.85)}
.dr-xray__art .x-ring{fill:none;stroke:var(--alert,#C2410C);stroke-width:1.6;opacity:.75;
  animation:drRing 2.6s ease-out infinite}
@keyframes drRing{0%{r:14;opacity:.9}100%{r:34;opacity:0}}

.dr-xray__list{display:grid;gap:16px}
.dr-xray__item{border:1px solid var(--line,rgba(23,40,155,.13));
  border-left:3px solid var(--blue,#17289B);border-radius:0 14px 14px 0;padding:20px 24px;background:#fff}
.dr-xray__item b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;
  margin-bottom:5px}
.dr-xray__item span{font-size:15px;color:var(--muted,#5A607A);line-height:1.6}

.dr-xray__note{margin-top:26px;padding:20px 26px;border-radius:14px;
  background:rgba(23,40,155,.05);border-left:3px solid var(--blue,#17289B);
  font-size:16px;line-height:1.62;color:var(--ink,#1A1D2E);max-width:80ch}

@media (max-width:1000px){ .dr-xray__grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .dr-xray__art::after,.dr-xray__art .x-ring,.dr-triage__flag::before{animation:none}
}


/* ── tweede mening ───────────────────────────────────────── */
/*
   Donker, met de kostenkaart apart gemarkeerd. Dat laatste is met opzet: die
   80 euro hoort niet weggemoffeld te worden onderaan, want dan voelt het
   achteraf als een verrassing.
*/
.dr-second{background:linear-gradient(150deg,#111436 0%,#0E1C6E 62%,#17289B 100%);
  color:#fff;position:relative;overflow:hidden;padding-block:62px}
.dr-second::after{content:"";position:absolute;left:-8%;bottom:-34%;width:46%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(59,166,211,.16),transparent 68%)}
.dr-second__inner{max-width:1180px;margin:0 auto;padding-inline:40px;position:relative;z-index:2;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.dr-second .dr-section__label{color:#9FB2E8}
.dr-second .dr-section__title{color:#fff;max-width:16ch}
.dr-second .dr-section__lead{color:#C7D2F0;margin-bottom:26px}

.dr-second__grid{display:grid;gap:14px}
.dr-second__item{border:1px solid rgba(255,255,255,.15);border-left:3px solid var(--cyan,#3BA6D3);
  border-radius:0 14px 14px 0;padding:20px 24px;background:rgba(255,255,255,.05)}
.dr-second__item b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;
  color:#fff;margin-bottom:5px}
.dr-second__item span{font-size:15px;color:#B9C4E0;line-height:1.6}

/* De kosten apart: eerlijk vooraan in plaats van in de kleine lettertjes. */
.dr-second__item--cost{border-left-color:#F0A87C;background:rgba(194,65,12,.16);
  border-color:rgba(240,168,124,.3)}
.dr-second__item--cost span{color:#FBD9C6}

@media (max-width:1000px){
  .dr-second__inner{grid-template-columns:1fr;padding-inline:20px}
}



/* ── vernietigingspagina ─────────────────────────────────────────── */
.dr-vern__lead{font-size:19px;line-height:1.62;color:var(--muted);max-width:62ch;margin:0 0 30px}

/* de drie stappen van het opsturen */
.dr-vern__stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0 8px;counter-reset:vs}
.dr-vern__stap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px 24px;position:relative}
.dr-vern__stap::before{counter-increment:vs;content:counter(vs);position:absolute;top:-14px;left:24px;
  width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:15px}
.dr-vern__stap b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;margin:8px 0 6px}
.dr-vern__stap span{font-size:15px;color:var(--muted);line-height:1.6}

/* de zones die anderen missen */
.dr-zones{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.dr-zone{border:1px solid rgba(255,255,255,.15);border-left:3px solid var(--cyan);border-radius:0 14px 14px 0;
  padding:22px 24px;background:rgba(255,255,255,.05)}
.dr-zone b{display:block;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.dr-zone p{margin:0;font-size:15px;color:#C7D2F0;line-height:1.6}

/* prijstabel */
.dr-prijs{width:100%;border-collapse:collapse;margin-top:8px;background:#fff;
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.dr-prijs th{text-align:left;padding:15px 22px;background:var(--surface);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;letter-spacing:-.005em;
  border-bottom:1px solid var(--line)}
.dr-prijs td{padding:17px 22px;font-size:15.5px;border-bottom:1px solid var(--line);vertical-align:top}
.dr-prijs tr:last-child td{border-bottom:none}
.dr-prijs td:first-child{font-weight:500;color:var(--ink)}
.dr-prijs td:last-child{color:var(--muted)}
.dr-prijs tr.gratis td{background:rgba(59,166,211,.07)}
.dr-prijs tr.gratis td:last-child{color:var(--blue);font-weight:600}

/* het certificaat */
.dr-cert{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:center;margin-top:8px}
.dr-cert__art{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px;
  display:grid;place-items:center}
.dr-cert__art svg{width:100%;max-width:280px;height:auto}
.dr-cert__list{display:grid;gap:14px}
.dr-cert__item{border-left:3px solid var(--blue);padding:4px 0 4px 20px}
.dr-cert__item b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:16.5px;margin-bottom:4px}
.dr-cert__item span{font-size:15px;color:var(--muted);line-height:1.6}

@media (max-width:900px){
  .dr-vern__stappen,.dr-zones{grid-template-columns:1fr}
  .dr-cert{grid-template-columns:1fr}
}

/* nog een paar kleinigheden voor deze pagina */
.dr-zones__nuance{margin-top:26px;color:#C7D2F0;font-size:16px;line-height:1.6;max-width:72ch}
.dr-vern__knop{margin-top:30px}
.dr-prijs__voet{margin-top:18px;font-size:14.5px;color:var(--muted)}
.dr-prijs__link{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.dr-prijs__link:hover{color:var(--blue-dark)}
.dr-cert > *{min-width:0}

/* ── Slotblok (dr-final): donkerblauwe band met titel links en knoppen rechts ── */
.dr-final{background:linear-gradient(135deg,#17289B 0%,#0E1C6E 100%);color:#fff;padding:64px 24px}
.dr-final__inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"titel cta" "sub cta";column-gap:48px;row-gap:10px;align-items:center}
.dr-final__title{grid-area:titel;margin:0;font-family:'Archivo','Syne',sans-serif;font-weight:800;
  font-size:clamp(26px,3.2vw,36px);letter-spacing:-.02em;word-spacing:.15em;line-height:1.15;color:#fff}
.dr-final__sub{grid-area:sub;margin:0;font-size:17px;line-height:1.6;color:#D5DCF5;max-width:62ch}
.dr-final__cta{grid-area:cta;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.dr-final .dr-btn{justify-content:center;white-space:nowrap}
.dr-final .dr-btn--white{background:#fff;color:#17289B;border:1px solid #fff}
.dr-final .dr-btn--white:hover{background:#EEF1FA;color:#0E1C6E}
.dr-final .dr-btn--ghost{flex-direction:row;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.dr-final .dr-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.dr-final .dr-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:860px){
  .dr-final{padding:48px 20px}
  .dr-final__inner{grid-template-columns:1fr;grid-template-areas:"titel" "sub" "cta";row-gap:14px}
  .dr-final__cta{margin-top:8px}
}
.dr-cert > *{min-width:0}