/* =============================================================
   RADURA — huisstijl
   Design · Engineering · Production — Waalwijk
   -------------------------------------------------------------
   Eén bron voor alle kleuren, typografie, maten en beweging.
   Gebruik dit bestand op elke nieuwe pagina:
     <link rel="stylesheet" href="brand.css">
   en verwijs daarna alleen nog naar variabelen, nooit naar
   losse hexcodes. Zo blijft alles in één keer aanpasbaar.

   Lettertypes komen van Google Fonts; zet in de <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap">
   ============================================================= */

:root{
  /* --- achtergronden ------------------------------------- */
  --bg:#0B0D14;        /* basis: bijna zwart met een blauwe ondertoon */
  --panel:#161923;     /* paneel, kaart, "over ons"-blok             */
  --panel-2:#1E222E;   /* paneel één stap lichter, o.a. contactvlak  */

  /* --- blauw (uit het logo) ------------------------------- */
  --blue:#0000E7;      /* logoblauw: knoppen, vlakken, accenten      */
  --blue-lit:#5A5AFF;  /* lichter blauw: randen, focus, gloed        */
  --blue-txt:#9AA0FF;  /* blauw voor tekst op donker — leesbaar      */

  /* --- tekst ---------------------------------------------- */
  --text:#FFFFFF;                  /* koppen en nadruk              */
  --text-2:rgba(255,255,255,.72);  /* lopende tekst                 */
  --text-3:rgba(255,255,255,.5);   /* labels, bijschriften          */

  /* --- lijnen --------------------------------------------- */
  --hair:rgba(255,255,255,.14);    /* zichtbare scheidingslijn      */
  --hair-2:rgba(255,255,255,.08);  /* nauwelijks zichtbare lijn     */

  /* --- signaal -------------------------------------------- */
  --fout:#FF9A9A;                  /* foutmelding in formulieren    */

  /* --- lettertypes ---------------------------------------- */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;      /* koppen        */
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;   /* lopende tekst */
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;        /* labels        */

  /* --- maatvoering ---------------------------------------- */
  --maxw:1240px;       /* breedte van de inhoudskolom               */
  --gutter:34px;       /* zijmarge desktop (mobiel: 22px)           */
  --sectie:100px;      /* verticale ruimte per sectie (mobiel: 72px)*/

  /* --- beweging ------------------------------------------- */
  --dur-snel:120ms;    /* kleurwissel, hover op tekst               */
  --dur:180ms;         /* standaard                                 */
  --dur-traag:260ms;   /* binnenkomen bij scrollen                  */
  --uit:cubic-bezier(.16,1,.3,1);   /* rustig uitlopen              */
  --in-uit:cubic-bezier(.4,0,.2,1); /* neutraal                     */

  color-scheme:dark;
}

/* =============================================================
   Basisregels — overnemen op elke nieuwe pagina
   ============================================================= */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
  margin:0;
  text-wrap:balance;
}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--blue-lit);outline-offset:3px}

/* inhoudskolom */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
@media (max-width:960px){ .wrap{padding:0 22px} }

/* label in monospace — het herkenbare detail van de huisstijl */
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--blue-txt);margin:0}

/* knoppen */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 24px;text-decoration:none;cursor:pointer;
  border:1px solid var(--blue-lit);background:var(--blue);color:#fff;
  transition:box-shadow var(--dur) var(--uit),transform var(--dur-snel) var(--uit),background var(--dur) var(--uit);
}
.btn:hover{box-shadow:0 12px 40px -12px rgba(0,0,231,.95);transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--hair);color:#fff}
.btn.ghost:hover{border-color:var(--blue-lit)}
.btn.licht{background:#fff;border-color:#fff;color:var(--bg)}
.btn.licht:hover{background:rgba(255,255,255,.88)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}