/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=DM+Sans:wght@400;500;700&display=swap');

/* === BRAND TOKENS === */
:root {
  /* Primair — dominant */
  --vlb-blue: #1121FF;
  --vlb-white: #FFFFFF;
  /* Accent — nooit dominant */
  --vlb-mint: #28FFCB;
  --vlb-black: #000000;
  /* Ondersteunend (voor decks, rapporten, donkere vlakken) */
  --vlb-navy-deep: #000655;
  --vlb-navy: #12235C;
  --vlb-teal: #309178;
  /* Tints voor subtiele vlakken */
  --vlb-paper: #F7F8FF;          /* heel licht blauw-wit */
  --vlb-line: rgba(17, 33, 255, 0.14);
  --vlb-line-soft: rgba(0, 0, 0, 0.10);
  /* Typografie */
  --vlb-display: 'Lobster', Georgia, serif;
  --vlb-body: 'DM Sans', system-ui, sans-serif;
}

/* === BOX-SIZING RESET (alleen voor Vollenbak-elementen) === */
[class^="vlb-"], [class*=" vlb-"],
[class^="vlb-"] *, [class*=" vlb-"] * {
  box-sizing: border-box;
}

/* === HERBRUIKBARE COMPONENTEN === */

/* Container — gebruikt op elke pagina voor breedte-controle */
.vlb-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 860px) {
  .vlb-container { padding: 0 22px; }
}

/* Label / kicker — kleine accentregel boven headlines */
.vlb-label {
  font-family: var(--vlb-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vlb-blue);
  display: inline-block;
}

/* Halftone-decoratie — als grafisch accent op blauwe of donkere vlakken */
.vlb-halftone {
  position: absolute;
  pointer-events: none;
  background-image: radial-gradient(circle, currentColor 1.6px, transparent 1.8px);
  background-size: 10px 10px;
  opacity: 0.55;
}

/* === CTA-KNOP — één bron van waarheid === */
/* Mint pill met blauwe tekst, voor footer, contact, formulieren */
.vlb-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--vlb-mint);
  color: #1121FF !important;
  font-family: var(--vlb-body);
  font-weight: 700;
  font-size: 17px;
  padding: 20px 32px;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  letter-spacing: 0.01em;
}
.vlb-btn:hover {
  background: var(--vlb-white);
  color: var(--vlb-blue);
  transform: translateX(6px);
}

/* Optioneel pijltje in de knop */
.vlb-btn-arrow {
  font-weight: 700;
  font-size: 18px;
  display: inline-block;
  transition: transform 0.2s ease;
}
.vlb-btn:hover .vlb-btn-arrow { transform: translateX(2px); }

/* Variant: knop op mint of donkere vlakken — blauwe pill met witte tekst */
.vlb-btn.vlb-btn-blue {
  background: var(--vlb-blue);
  color: var(--vlb-white);
}
.vlb-btn.vlb-btn-blue:hover {
  background: var(--vlb-navy-deep);
  color: var(--vlb-mint);
}