/* Pantronic – Huisstijl variabelen */
:root {
  /* Kleuren */
  --color-primary:     #F37021;   /* Oranje – headlines, accenten */
  --color-secondary:   #1B3A6B;   /* Blauw – koppen, nav */
  --color-text:        #1A1A1A;   /* Bijna-zwart – bodytekst */
  --color-bg:          #FFFFFF;   /* Wit – hoofdachtergrond */
  --color-bg-alt:      #F4F6FA;   /* Lichtgrijs – afwisselende secties */
  --color-bg-dark:     #0D1F3C;   /* Donkerblauw – hero, footer */
  --color-border:      #E2E8F0;

  /* Typografie */
  --font-base:    'Inter', system-ui, sans-serif;
  --font-heading: 'Inter', system-ui, sans-serif;

  /* Schalen */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* Schaduwen */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.14);

  /* Overgangen */
  --transition: 0.2s ease;
}

/* ── Herbruikbare utility-klassen ─────────────────────── */

.btn-primary {
  display: inline-block;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition), transform var(--transition);
}
.btn-primary:hover {
  background-color: #d95f10;
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-block;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
  padding: 0.7rem 1.7rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}
.btn-outline:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-white {
  display: inline-block;
  background-color: #fff;
  color: var(--color-secondary);
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: opacity var(--transition);
}
.btn-white:hover { opacity: 0.9; }

.section-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.section-heading {
  color: var(--color-secondary);
  font-weight: 800;
  line-height: 1.15;
}

/* Kaartje */
.card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}