/* ===== TPP Bos – Diensten page ===== */
.diensten-page{--p1:#6a4fd3;--p2:#8a5adf;--dark:#0e2038;--muted:#5b6770;--bg:#f7f9fc;--bd:#e6eef6}

/* Hero */
.dp-hero{padding:42px 0;background:radial-gradient(1200px 400px at 50% 0,var(--bg) 0%,#fff 60%)}
.dp-hero .wrap{width:min(1450px,92vw);margin:0 auto;text-align:center}
.dp-hero h1{margin:0 0 6px;font-size:clamp(28px,4vw,38px);color:var(--dark)}
.dp-hero .intro{margin:0 auto 12px;max-width:760px;color:var(--muted)}
.dp-hero .chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.dp-hero .chip{display:inline-flex;align-items:center;border-radius:999px;border:1px solid rgba(106,79,211,.35);padding:8px 12px;font-weight:700;text-decoration:none;color:var(--p1)}

/* Sticky subnav */
.dp-subnav{position:sticky;top:64px;z-index:5;background:#fff;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.dp-subnav .wrap{width:min(1450px,92vw);margin:0 auto}
.dp-subnav ul{display:flex;gap:10px;align-items:center;overflow:auto;padding:8px 0;margin:0;list-style:none}
.dp-subnav a{display:inline-block;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--dark)}
.dp-subnav li.cta a{background:linear-gradient(135deg,var(--p1),var(--p2));color:#fff}

/* Grid cards */
.dp-grid{padding:26px 0}
.dp-grid .wrap{width:min(1450px,92vw);margin:0 auto}
.dp-grid .cards{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){.dp-grid .cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.dp-grid .cards{grid-template-columns:1fr}}
.dp-grid .card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--bd);border-radius:20px;padding:16px;text-decoration:none;color:var(--dark);box-shadow:0 8px 24px rgba(16,32,48,.06);transition:transform .2s, box-shadow .2s}
.dp-grid .card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--p1),var(--p2));border-radius:20px 20px 0 0;opacity:.9}
.dp-grid .card:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(16,32,48,.12)}
.dp-grid .card.featured{grid-column:span 2}
.dp-grid .card .cap .icon{width:28px;height:28px;object-fit:contain}
.dp-grid .card h2{margin:0;color:var(--dark);font-size:18px}
.dp-grid .card p{margin:0;color:var(--muted);line-height:1.6}
.dp-grid .more{margin-top:6px;color:var(--p1);font-weight:700}

/* Sections detail */
.dp-sections{padding:24px 0 8px;background:#fff}
.dp-sections .wrap{width:min(1450px,92vw);margin:0 auto}
.dp-sections .svc{padding:18px 0;border-bottom:1px solid var(--bd)}
.dp-sections .svc:last-child{border-bottom:0}
.dp-sections .svc header{display:flex;align-items:center;gap:12px}
.dp-sections .svc header .icon-lg{width:32px;height:32px;object-fit:contain}
.dp-sections .svc h2{margin:0 0 6px;color:var(--dark);font-size:22px}
.dp-sections .svc .content p{margin:0 0 10px;color:var(--dark)}
.dp-sections .svc .back{margin:6px 0 0}
.dp-sections .svc .back a{color:var(--p1);text-decoration:none}

/* Compare */
.dp-compare{padding:28px 0;background:radial-gradient(1000px 300px at 50% 0,var(--bg) 0%,#fff 60%)}
.dp-compare .wrap{width:min(1450px,92vw);margin:0 auto}
.sec-title{margin:0 0 12px;text-align:center;color:var(--dark);font-size:22px}
.dp-compare .cols{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.dp-compare .cols{grid-template-columns:1fr}}
.dp-compare .col{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:14px;box-shadow:0 8px 24px rgba(16,32,48,.06)}
.dp-compare .col h3{margin:0 0 8px;color:var(--dark)}
.dp-compare .col ul{margin:0;padding-left:18px;color:var(--muted)}

/* Steps */
.dp-steps{padding:28px 0;background:#fff}
.dp-steps .wrap{width:min(1450px,92vw);margin:0 auto}
.dp-steps .timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;list-style:none;padding:0;margin:10px 0 0}
@media (max-width:1000px){.dp-steps .timeline{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dp-steps .timeline{grid-template-columns:1fr}}
.dp-steps .timeline li{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:12px;box-shadow:0 8px 24px rgba(16,32,48,.06)}
.dp-steps .num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--p1),var(--p2));color:#fff;font-weight:700;margin-bottom:6px}
.dp-steps .t{font-weight:600;color:var(--dark);margin-bottom:4px}
.dp-steps p{margin:0;color:var(--muted)}

/* FAQ */
.dp-faq{padding:28px 0;background:#fff}
.dp-faq .wrap{width:min(1450px,92vw);margin:0 auto}
.dp-faq details{border:1px solid var(--bd);border-radius:12px;padding:10px 12px;margin:8px 0;background:#fff}
.dp-faq summary{cursor:pointer;font-weight:600;color:var(--dark);list-style:none}
.dp-faq .a{color:var(--muted)}
.dp-faq summary::-webkit-details-marker{display:none}

/* CTA band */
.dp-cta{padding:30px 0;background:linear-gradient(135deg,var(--p1),var(--p2));color:#fff}
.dp-cta .wrap{width:min(1450px,92vw);margin:0 auto}
.dp-cta .inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.dp-cta h2{margin:0}
.dp-cta p{margin:0;opacity:.95}
.dp-cta .btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.dp-cta .btn{background:#fff;color:#2a1b5a;border-radius:999px;padding:8px 12px;text-decoration:none;font-weight:700}
.dp-cta .btn.primary{background:#00d692;color:#173b2b}

/* --- Scroll target highlight --- */
.dp-sections .svc {
  position: relative;
  scroll-margin-top: calc(64px + 20px); /* ruimte voor sticky subnav */
}

.dp-sections .svc.flash-highlight {
  animation: svcFlash 2.4s ease-out 1;
  box-shadow: 0 0 0 4px rgba(106,79,211,.15) inset, 0 8px 24px rgba(16,32,48,.08);
  background: linear-gradient(90deg, rgba(106,79,211,.08), rgba(138,90,223,.06));
}

@keyframes svcFlash {
  0%   { box-shadow: 0 0 0 6px rgba(106,79,211,.25) inset; background: rgba(106,79,211,.12); }
  60%  { box-shadow: 0 0 0 0 rgba(106,79,211,0) inset;    background: transparent; }
  100% { box-shadow: none; background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-sections .svc.flash-highlight {
    animation: none;
    box-shadow: 0 0 0 3px rgba(106,79,211,.25) inset;
    background: transparent;
  }
}