/* Gedeelde regels die op elke pagina van de site golden (voorheen per pagina gedupliceerd in <style>). */
.container{max-width:1200px;margin:0 auto;padding:0 32px}
main section{padding:88px 0}
.ph{background-image:repeating-linear-gradient(135deg,var(--color-neutral-300),var(--color-neutral-300) 12px,var(--color-neutral-200) 12px,var(--color-neutral-200) 24px);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.04em;color:color-mix(in srgb,var(--color-text) 55%,transparent);text-transform:uppercase}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--color-divider)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--color-divider)}
.servicecell{background:var(--color-bg);padding:32px 24px;transition:background .3s}
.servicecell:hover{background:var(--color-surface)}
.band{background:var(--color-accent);color:var(--color-bg);padding:96px 0}
.band h2{color:var(--color-bg)}
.card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s cubic-bezier(.2,.8,.2,1)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.btn{transition:background .2s,color .2s,transform .2s}
.btn:active{transform:translateY(1px)}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero-in{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
@supports (animation-timeline: view()){
  [data-reveal]{animation:rise .8s cubic-bezier(.2,.8,.2,1) both;animation-timeline:view();animation-range:entry 0% entry 55%}
}

/* — pulserende stip: geeft aan dat iets doorlopend/actief is (bv. de beheerfase, die nooit "af" is) — */
.pulse-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--color-accent);flex:none;display:inline-block}
.pulse-dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--color-accent);
  animation:pulse-ring 1.8s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(2.6);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .pulse-dot::after{animation:none}
}