/* ===== HOME — Dark Cyber ===== */
body[data-page="home"] .home-hero{
  position:relative; min-height:92vh; display:grid; place-items:center;
  text-align:center; overflow:hidden; margin-top:-64px; padding-top:64px;
}
/* Achtergrondanimatie loopt over de hele pagina, niet alleen de hero: fixed op de
   viewport, achter alle content. pointer-events uit zodat er niets blokkeert. */
body[data-page="home"] #gl-hero-canvas{position:fixed;inset:0;z-index:-1;width:100vw;height:100vh;pointer-events:none;}
/* Dot-grid en ambient blobs een laag verder naar achteren, zodat de canvas erboven valt. */
body[data-page="home"]::before{z-index:-3;}
body[data-page="home"]::after{z-index:-2;}
body[data-page="home"] .home-hero__inner{position:relative;z-index:1;display:grid;justify-items:center;gap:1.5rem;}
body[data-page="home"] .home-hero h1{font-size:clamp(2.8rem,9vw,7rem);line-height:.95;}
body[data-page="home"] .home-hero__sub{max-width:42rem;margin:0;color:var(--gl-muted);font-size:clamp(1.05rem,1.7vw,1.35rem);}
body[data-page="home"] .home-hero__cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem;}
body[data-page="home"] .home-scrollcue{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:1;}
body[data-page="home"] .home-scrollcue span{display:block;width:1px;height:36px;background:linear-gradient(var(--accent),transparent);animation:home-cue 1.8s var(--gl-ease) infinite;}
@keyframes home-cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

body[data-page="home"] .home-h2{font-size:clamp(2rem,5vw,3.5rem);margin:.4rem 0 2.5rem;max-width:18ch;}

body[data-page="home"] .home-grid-3{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
body[data-page="home"] .home-card{display:flex;flex-direction:column;gap:.6rem;padding:2rem;}
body[data-page="home"] .home-card__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:1rem;font-size:1.5rem;margin-bottom:.5rem;color:#fff;}
body[data-page="home"] .home-card__icon[data-c="cyan"]{background:color-mix(in srgb,var(--c-cyan) 18%,transparent);color:var(--c-cyan);}
body[data-page="home"] .home-card__icon[data-c="purple"]{background:color-mix(in srgb,var(--c-purple) 18%,transparent);color:var(--c-purple);}
body[data-page="home"] .home-card__icon[data-c="pink"]{background:color-mix(in srgb,var(--c-pink) 18%,transparent);color:var(--c-pink);}
body[data-page="home"] .home-card h3{font-size:1.5rem;}
body[data-page="home"] .home-card p{margin:0;color:var(--gl-muted);}
body[data-page="home"] .home-card__go{margin-top:auto;padding-top:.75rem;font-weight:700;color:var(--accent);}

body[data-page="home"] .home-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:clamp(1.5rem,4vw,3rem);text-align:center;}
body[data-page="home"] .home-stats div{display:grid;gap:.25rem;}
body[data-page="home"] .home-stats strong{font-family:var(--gl-font-display);font-weight:800;font-size:clamp(2rem,5vw,3.5rem);}
body[data-page="home"] .home-stats span{color:var(--gl-muted);font-size:.95rem;}
@media(max-width:680px){body[data-page="home"] .home-stats{grid-template-columns:repeat(2,1fr);}}

body[data-page="home"] .home-work{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
body[data-page="home"] .home-work__item{display:flex;flex-direction:column;gap:.5rem;padding:1.75rem;min-height:170px;}
body[data-page="home"] .home-work__tag{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:.25rem .6rem;border-radius:999px;}
body[data-page="home"] .home-work__item h3{font-size:1.35rem;margin-top:.25rem;}
body[data-page="home"] .home-work__more{margin-top:2.5rem;text-align:center;}

/* lokale-regio regel onder de dienstenkaarten */
body[data-page="home"] .home-local{margin:1.75rem 0 0;color:var(--gl-muted);font-size:.95rem;}
body[data-page="home"] .home-local a{color:var(--accent);font-weight:500;}
body[data-page="home"] .home-local a:hover{color:#fff;}