/* D&D Tech — basis + gedeelde componenten. Pagina-specifiek in assets/css/pages/<pagina>.css */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-md);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,video,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;letter-spacing:-.02em;margin:0 0 var(--space-4)}
h1{font-size:var(--fs-hero)} h2{font-size:var(--fs-2xl)} h3{font-size:var(--fs-xl)}
p{margin:0 0 var(--space-4);color:var(--text-dim)}
/* Lange samenstellingen breken af i.p.v. de pagina te verbreden (controle 16-10, DD-4) */
p,li,td,th,dd,h1,h2,h3{overflow-wrap:break-word}
::selection{background:var(--cyan);color:var(--bg)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* Achtergrond: subtiel raster over de hele site */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.25;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 70%)}

/* Layout */
.container{width:min(100% - 2.5rem,var(--container));margin-inline:auto}
.section{padding-block:var(--space-9);position:relative}
.section--alt{background:var(--bg-2)}
.grid{display:grid;gap:var(--space-5)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.stack>*+*{margin-top:var(--space-4)}
main{padding-top:var(--header-h)}

/* Tekst-hulpjes */
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:.6em;margin-bottom:var(--space-4)}
.eyebrow::before{content:"";width:1.6em;height:1px;background:var(--cyan);box-shadow:var(--glow-cyan)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:var(--fs-lg);color:var(--text-dim);max-width:62ch}
.mono{font-family:var(--font-mono)}

/* Knoppen */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.5em;border-radius:999px;font-weight:600;font-size:var(--fs-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s,background .2s}
.btn:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.btn--primary{background:var(--grad);border-color:transparent;color:#03050a}
.btn--primary:hover{box-shadow:var(--glow-cyan),var(--glow-violet)}

/* Kaart (glass) */
.card{position:relative;padding:var(--space-6);border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .3s,transform .3s var(--ease),box-shadow .3s;min-width:0}
.card:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.card--glow:hover{box-shadow:var(--glow-cyan)}
.card h3{font-size:var(--fs-lg)}

/* Tags / status */
.tag{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-mono);font-size:var(--fs-xs);padding:.3em .75em;border-radius:999px;border:1px solid var(--line-strong);color:var(--text-dim)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}

/* Spec-lijst (producten) */
.specs{list-style:none;padding:0;margin:0;font-family:var(--font-mono);font-size:var(--fs-sm)}
.specs li{display:flex;justify-content:space-between;gap:1em;padding:.55em 0;border-bottom:1px dashed var(--line)}
.specs li span:first-child{color:var(--text-mute)}

/* Pagina-kop voor subpagina's */
.page-hero{padding-block:var(--space-8) var(--space-7);border-bottom:1px solid var(--line)}

/* Verschijn-animatie: element met .reveal krijgt .is-visible via fx.js */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* Alleen voor schermlezers (controle 16-10, DD-11: kopvolgorde werkwijze) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}