/* ===== Verso diensten-pagina's (gedeeld) — nieuwe shader/case-stijl ===== */
:root{
  --bg:#070d1c;--text:#dae2fd;--muted:rgba(218,226,253,.6);
  --border:rgba(255,255,255,.08);--panel:rgba(8,14,30,.5);
  --font-h:'Raleway',sans-serif;--font-b:'Plus Jakarta Sans',sans-serif;
  --teal:#0EC8C8;--teal-mid:#1AA5B5;--teal-deep:#2B7FA3;--violet:#8760DD;--purple:#8641B1;
}
*{box-sizing:border-box}
html{overflow-x:hidden;background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:transparent;color:var(--text);font-family:var(--font-b);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
.grad-text{background:linear-gradient(120deg,#8760DD,#0EC8C8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ===== Achtergrond-shader (canvas uit case-shader.js) ===== */
#case-bg{position:fixed;inset:0;z-index:-2;display:block}
#case-bg-tint{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1200px 700px at 15% -10%,rgba(135,96,221,.10),transparent 60%),
             radial-gradient(900px 600px at 100% 0,rgba(14,200,200,.08),transparent 55%)}

/* ===== NAV (gelijk aan de cases) ===== */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:14px clamp(16px,3vw,40px)}
.nav-logo{line-height:0;flex:none}.nav-logo img{height:34px;width:auto;display:block}
.nav-pill{display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav-pill a{font-size:.86rem;font-weight:500;color:var(--muted);text-decoration:none;padding:8px 16px;border-radius:999px;border:1px solid transparent;transition:color .2s,background .2s,border-color .2s}
.nav-pill a:hover{color:#eef0ff;background:rgba(14,200,200,.07)}
.nav-pill a.active{color:var(--teal);border-color:var(--teal);background:rgba(14,200,200,.08);box-shadow:0 0 16px rgba(14,200,200,.22)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.lang-toggle{font-family:var(--font-b);font-size:.8rem;font-weight:600;color:var(--muted);background:none;border:1px solid var(--border);border-radius:999px;padding:7px 13px;cursor:pointer;transition:color .2s,border-color .2s}
.lang-toggle:hover{color:var(--teal);border-color:rgba(14,200,200,.4)}
.hero-cta{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap;font-family:var(--font-b);font-weight:700;font-size:.95rem;letter-spacing:.01em;padding:11px 24px;border-radius:999px;color:#04222a;background:linear-gradient(135deg,#0EC8C8 0%,#1AA5B5 100%);box-shadow:0 8px 24px rgba(14,200,200,.34);transition:filter .2s ease,transform .2s ease}
.hero-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* ===== Layout-container ===== */
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 28px}
.section{padding:clamp(48px,8vh,96px) 0}
.breadcrumb{font-size:.82rem;color:var(--muted);padding-top:30px}
.breadcrumb a{text-decoration:none;color:var(--muted)}.breadcrumb a:hover{color:var(--teal)}

/* ===== HERO ===== */
.svc-hero{padding:clamp(40px,7vh,70px) 0 clamp(30px,5vh,50px)}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.04em;color:#bfeaea;background:rgba(14,200,200,.08);border:1px solid rgba(14,200,200,.25);border-radius:999px;padding:6px 14px;margin-bottom:22px}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal)}
.svc-hero h1{font-family:var(--font-h);font-weight:700;letter-spacing:-.02em;line-height:1.04;font-size:clamp(2.2rem,5.4vw,4rem);margin:0 0 18px;max-width:18ch}
.svc-hero .lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted);max-width:60ch;margin:0 0 28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:.95rem;padding:11px 22px;border-radius:999px;color:var(--text);border:1px solid var(--violet);transition:.2s}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);background:rgba(14,200,200,.06)}

/* ===== Sectiekop ===== */
.sec-title{font-family:var(--font-h);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;margin:0 0 16px}
.sec-intro{color:var(--muted);max-width:62ch;margin:0 0 8px;font-size:1.05rem}

/* ===== WAAROM (prose) ===== */
.prose{max-width:70ch}
.prose h2{font-family:var(--font-h);font-weight:700;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.02em;margin:0 0 14px}
.prose h3{font-family:var(--font-h);font-weight:700;font-size:1.25rem;margin:26px 0 10px}
.prose p{color:var(--muted);margin:0 0 14px}
.prose p strong{color:var(--text)}

/* ===== FEATURES-GRID ===== */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:30px}
.feat-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.feat-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feat-grid--3{grid-template-columns:1fr}}
.feat{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:24px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .25s,transform .25s}
.feat:hover{border-color:rgba(14,200,200,.32);transform:translateY(-3px)}
.feat .ic{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(14,200,200,.1);border:1px solid rgba(14,200,200,.22);color:var(--teal);margin-bottom:16px}
.feat h3{font-family:var(--font-h);font-weight:700;font-size:1.15rem;margin:0 0 8px}
.feat p{color:var(--muted);font-size:.95rem;margin:0}

/* ===== WERKWIJZE-STAPPEN ===== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:30px;counter-reset:step}
.step{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:24px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-h);font-weight:700;font-size:1.4rem;color:var(--teal);display:block;margin-bottom:12px}
.step h3{font-family:var(--font-h);font-weight:700;font-size:1.1rem;margin:0 0 6px}
.step p{color:var(--muted);font-size:.93rem;margin:0}

/* ===== FAQ-ACCORDION ===== */
.faq{max-width:820px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:none;cursor:pointer;text-align:left;color:var(--text);font-family:var(--font-h);font-weight:600;font-size:1.08rem;padding:20px 2px}
.faq-q .chev{flex:none;transition:transform .3s ease;color:var(--teal)}
.faq-item.open .chev{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a-inner{padding:0 2px 20px;color:var(--muted);font-size:.98rem}

/* ===== CTA-band ===== */
.cta-band{text-align:center;background:linear-gradient(135deg,rgba(80,34,128,.30),rgba(14,200,200,.12));border:1px solid var(--border);border-radius:24px;padding:clamp(36px,6vw,64px) 28px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cta-band h2{font-family:var(--font-h);font-weight:700;font-size:clamp(1.7rem,3.6vw,2.8rem);letter-spacing:-.02em;margin:0 0 14px}
.cta-band p{color:var(--muted);max-width:48ch;margin:0 auto 26px}
.cta-band .hero-actions{justify-content:center}

/* ===== Verwante diensten (interne links) ===== */
.related{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.related a{font-size:.88rem;text-decoration:none;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:8px 15px;transition:.2s}
.related a:hover{color:var(--teal);border-color:rgba(14,200,200,.4)}

/* ===== FOOTER (gelijk aan de cases) ===== */
footer{position:relative;z-index:1;border-top:1px solid var(--border);background:rgba(6,12,28,.5);margin-top:40px}
.foot{max-width:1180px;margin:0 auto;padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot img{height:22px}.foot .copy{font-size:.82rem;color:var(--muted)}
.foot .links{display:flex;gap:18px;flex-wrap:wrap}
.foot .links a{font-size:.82rem;color:var(--muted);text-decoration:none}.foot .links a:hover{color:var(--teal)}

@media(max-width:560px){
  .nav{padding:12px 12px;gap:10px}.nav-logo img{height:28px}
  .nav-pill{gap:2px;padding:4px}.nav-pill a{padding:7px 11px;font-size:.8rem}
  .nav-pill a[data-nl]:nth-child(2){display:none}
  .nav-right{gap:8px}.lang-toggle{padding:6px 10px;font-size:.78rem}.hero-cta{padding:9px 16px;font-size:.84rem}
  .foot{justify-content:center;text-align:center}.foot .links{justify-content:center}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}