/* ============================================================
   VITA THUISVERPLEGING — STYLESHEET
   Single-page landing + privacybeleid
   Framer-stijl: smooth, modern, veel whitespace
   ============================================================ */

/* ============================================================
   0. LOCAL FONTS
   ============================================================ */

/* DM Sans — latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans — latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans italic — latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans italic — latin */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lora — latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora — latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Primair: Turquoise (logo #8CC7CA) */
  --vita-primary-50:  #EDF7F7;
  --vita-primary-100: #C4E5E7;
  --vita-primary-200: #9ED1D4;
  --vita-primary-400: #8CC7CA;
  --vita-primary-600: #4FA3A7;
  --vita-primary-800: #316668;
  --vita-primary-900: #1E3E40;

  /* Secundair: Groen */
  --vita-green-50:  #EAF6EE;
  --vita-green-100: #B2DDBE;
  --vita-green-200: #72C48C;
  --vita-green-400: #3DA66E;
  --vita-green-600: #28764D;
  --vita-green-800: #1B5537;
  --vita-green-900: #103624;

  /* Accent: Koraal (logo #DF7B84) */
  --vita-coral-50:  #FDF0F1;
  --vita-coral-100: #F4CBCE;
  --vita-coral-200: #E99DA3;
  --vita-coral-400: #DF7B84;
  --vita-coral-600: #C4444F;
  --vita-coral-800: #7D2A32;
  --vita-coral-900: #4C191E;

  /* Neutraal */
  --vita-neutral-50:  #F7F8F8;
  --vita-neutral-100: #E2E5E4;
  --vita-neutral-200: #B8BDBB;
  --vita-neutral-300: #9CA3A1;
  --vita-neutral-500: #6E7573;
  --vita-neutral-800: #3A403E;
  --vita-neutral-900: #1A1F1E;

  /* Achtergronden */
  --vita-bg:              #FFFFFF;
  --vita-bg-surface:      var(--vita-neutral-50);
  --vita-bg-section:      var(--vita-primary-50);
  --vita-bg-section-alt:  var(--vita-green-50);
  --vita-bg-dark:         var(--vita-primary-600);
  --vita-bg-footer:       var(--vita-neutral-900);

  /* Tekst */
  --vita-text:            var(--vita-neutral-900);
  --vita-text-body:       var(--vita-neutral-800);
  --vita-text-muted:      var(--vita-neutral-500);
  --vita-text-on-dark:    #FFFFFF;
  --vita-text-on-section: var(--vita-primary-900);
  --vita-text-link:       var(--vita-primary-600);
  --vita-text-link-hover: var(--vita-primary-800);

  /* Borders */
  --vita-border:          var(--vita-neutral-100);
  --vita-border-focus:    var(--vita-primary-400);
  --vita-border-hover:    var(--vita-primary-200);

  /* Interactie */
  --vita-btn-primary:       var(--vita-primary-400);
  --vita-btn-primary-hover: var(--vita-primary-600);
  --vita-btn-danger:        var(--vita-coral-400);
  --vita-btn-danger-hover:  var(--vita-coral-600);

  /* Feedback */
  --vita-success-bg:      var(--vita-green-50);
  --vita-success-border:  var(--vita-green-100);
  --vita-success-text:    var(--vita-green-600);
  --vita-success-icon:    var(--vita-green-400);
  --vita-error-bg:        var(--vita-coral-50);
  --vita-error-border:    var(--vita-coral-100);
  --vita-error-text:      var(--vita-coral-600);
  --vita-error-icon:      var(--vita-coral-400);

  /* Typografie */
  --vita-font-display: 'Lora', Georgia, serif;
  --vita-font-body:    'DM Sans', system-ui, sans-serif;
  --vita-text-xs:   0.75rem;
  --vita-text-sm:   0.875rem;
  --vita-text-base: 1.0625rem;
  --vita-text-lg:   1.125rem;
  --vita-text-xl:   1.25rem;
  --vita-text-2xl:  1.5rem;
  --vita-text-3xl:  2rem;
  --vita-text-4xl:  3rem;
  --vita-weight-regular: 400;
  --vita-weight-medium:  500;
  --vita-weight-semi:    600;
  --vita-leading-tight:  1.2;
  --vita-leading-normal: 1.7;
  --vita-leading-relaxed: 1.8;
  --vita-tracking-tight: -0.025em;
  --vita-tracking-caps:   0.06em;

  /* Spacing */
  --vita-space-xs:   0.25rem;
  --vita-space-sm:   0.5rem;
  --vita-space-md:   1rem;
  --vita-space-lg:   1.5rem;
  --vita-space-xl:   2rem;
  --vita-space-2xl:  3rem;
  --vita-space-3xl:  4rem;
  --vita-space-4xl:  6rem;
  --vita-section-py: var(--vita-space-4xl);
  --vita-container-max:     75rem;
  --vita-container-padding: var(--vita-space-lg);

  /* Radius */
  --vita-radius-sm:   0.375rem;
  --vita-radius-md:   0.5rem;
  --vita-radius-lg:   0.75rem;
  --vita-radius-xl:   1rem;
  --vita-radius-full: 62.5rem;

  /* Schaduwen */
  --vita-shadow-sm:    0 0.0625rem 0.25rem rgba(26, 31, 30, 0.04);
  --vita-shadow-md:    0 0.25rem 1rem rgba(26, 31, 30, 0.06);
  --vita-shadow-focus: 0 0 0 0.1875rem rgba(140, 199, 202, 0.25);

  /* Transitions */
  --vita-duration-fast:   150ms;
  --vita-duration-normal: 200ms;
  --vita-easing:          ease;

  /* Componenten */
  --vita-btn-min-height: 3rem;
  --vita-btn-padding-x:  2rem;
  --vita-btn-padding-y:  0.875rem;
  --vita-input-min-height: 3rem;
  --vita-input-padding:    0.75rem 1rem;

  /* Header */
  --header-height: 5rem;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--vita-space-xl));
  overflow-x: hidden;
}

body {
  font-family: var(--vita-font-body);
  font-size: var(--vita-text-base);
  font-weight: var(--vita-weight-regular);
  color: var(--vita-text-body);
  background: var(--vita-bg);
  line-height: var(--vita-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--vita-font-display);
  color: var(--vita-text);
  line-height: var(--vita-leading-tight);
  font-weight: var(--vita-weight-semi);
  letter-spacing: var(--vita-tracking-tight);
}

h1 { font-size: var(--vita-text-3xl); }
h2 { font-size: var(--vita-text-2xl); margin-bottom: var(--vita-space-md); }
h3 { font-size: var(--vita-text-xl); }

p { margin-bottom: var(--vita-space-md); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--vita-text-link);
  text-decoration: none;
  transition: color var(--vita-duration-fast) var(--vita-easing);
}
a:hover { color: var(--vita-text-link-hover); }

img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: var(--vita-space-lg); }

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container {
  max-width: var(--vita-container-max);
  margin: 0 auto;
  padding: 0 var(--vita-container-padding);
}

.container--narrow {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 var(--vita-container-padding);
}

/* ============================================================
   4. SKIP LINK (a11y)
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--vita-space-md);
  background: var(--vita-primary-600);
  color: var(--vita-text-on-dark);
  padding: var(--vita-space-sm) var(--vita-space-md);
  border-radius: var(--vita-radius-md);
  z-index: 1000;
  font-weight: var(--vita-weight-semi);
}
.skip-link:focus { top: var(--vita-space-sm); color: var(--vita-text-on-dark); }

/* ============================================================
   5. HEADER & NAV
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--vita-duration-normal) var(--vita-easing),
              box-shadow var(--vita-duration-normal) var(--vita-easing);
  overflow: visible;
}

/* Backdrop-filter uit wanneer menu open — anders werkt position:fixed niet op children */
.site-header.menu-open {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #fff;
}

.site-header.scrolled {
  border-bottom-color: var(--vita-border);
  box-shadow: 0 1px 8px rgba(26, 31, 30, 0.04);
}

.nav-wrapper {
  max-width: var(--vita-container-max);
  margin: 0 auto;
  padding: 0 var(--vita-container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--vita-text);
  flex-shrink: 0;
}
.nav-logo:hover { color: var(--vita-text); text-decoration: none; }

.nav-logo__icon {
  flex-shrink: 0;
  border-radius: 50%;
}

.nav-logo__text {
  font-family: var(--vita-font-display);
  font-weight: var(--vita-weight-semi);
  font-size: var(--vita-text-lg);
  letter-spacing: var(--vita-tracking-tight);
  line-height: 1;
}

.nav-logo__vita {
  color: var(--vita-coral-400);
}

.nav-logo__accent {
  color: var(--vita-primary-400);
}

/* --- Hamburger toggle (mobiel) --- */
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: var(--vita-space-xs);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--vita-space-sm);
  z-index: 201;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--vita-text);
  border-radius: 2px;
  transition: transform var(--vita-duration-normal) var(--vita-easing), opacity var(--vita-duration-normal) var(--vita-easing);
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobiel menu (default, < 768px) --- */
.nav-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--vita-primary-50);
  padding: var(--vita-space-3xl) var(--vita-container-padding) var(--vita-space-xl);
  gap: var(--vita-space-md);
  z-index: 200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: center;
}
.nav-menu.open { display: flex; }

/* Nav links (pagina-links: Diensten, Over mij, …) */
.nav-link {
  color: var(--vita-text);
  text-decoration: none;
  font-weight: var(--vita-weight-medium);
  font-size: var(--vita-text-xl);
  padding: var(--vita-space-sm) var(--vita-space-lg);
  transition: color var(--vita-duration-fast) var(--vita-easing);
}
.nav-link:hover {
  color: var(--vita-primary-600);
  text-decoration: none;
}

/* Nav button (Bel mij — eigen class, deelt NIETS met .nav-link) */
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vita-space-sm);
  background: var(--vita-coral-600);
  color: var(--vita-text-on-dark);
  padding: var(--vita-space-sm) var(--vita-space-lg);
  border-radius: var(--vita-radius-full);
  font-weight: var(--vita-weight-semi);
  font-size: var(--vita-text-sm);
  white-space: nowrap;
  text-decoration: none;
  margin-top: var(--vita-space-lg);
  transition: background var(--vita-duration-normal) var(--vita-easing), transform var(--vita-duration-normal) var(--vita-easing), box-shadow var(--vita-duration-normal) var(--vita-easing);
}
.nav-btn:hover {
  background: var(--vita-coral-800);
  color: var(--vita-text-on-dark);
  text-decoration: none;
}
.nav-btn:hover svg {
  animation: bell-shake 0.5s ease;
}

@keyframes bell-shake {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(15deg); }
  40%  { transform: rotate(-12deg); }
  60%  { transform: rotate(8deg); }
  80%  { transform: rotate(-5deg); }
  100% { transform: rotate(0); }
}

/* Contact info onder Bel mij (alleen mobiel) */
.nav-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vita-space-xs);
  margin-top: var(--vita-space-sm);
}
.nav-contact__item {
  display: inline-flex;
  align-items: center;
  gap: var(--vita-space-xs);
  font-size: var(--vita-text-xs);
  color: var(--vita-text-muted);
  font-weight: var(--vita-weight-regular);
  text-decoration: none;
}
.nav-contact__item svg { flex-shrink: 0; opacity: 0.5; }
.nav-contact__item:hover { color: var(--vita-primary-600); }

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vita-space-sm);
  min-height: var(--vita-btn-min-height);
  padding: var(--vita-btn-padding-y) var(--vita-btn-padding-x);
  border-radius: var(--vita-radius-full);
  font-family: var(--vita-font-body);
  font-weight: var(--vita-weight-semi);
  font-size: var(--vita-text-base);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--vita-duration-fast) var(--vita-easing),
              transform var(--vita-duration-fast) var(--vita-easing),
              box-shadow var(--vita-duration-fast) var(--vita-easing);
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--vita-primary-800);
  color: var(--vita-text-on-dark);
}
.btn--primary:hover {
  background: var(--vita-primary-900);
  color: var(--vita-text-on-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(140, 199, 202, 0.25);
}

.btn--outline {
  background: transparent;
  color: var(--vita-primary-600);
  border: 1.5px solid var(--vita-primary-200);
}
.btn--outline:hover {
  background: var(--vita-primary-50);
  border-color: var(--vita-primary-400);
  color: var(--vita-primary-800);
  transform: translateY(-2px);
}

.btn--danger {
  background: var(--vita-btn-danger);
  color: var(--vita-text-on-dark);
}
.btn--danger:hover {
  background: var(--vita-btn-danger-hover);
  color: var(--vita-text-on-dark);
  transform: translateY(-2px);
}

/* ============================================================
   7. HERO
   ============================================================ */
.hero {
  padding: calc(var(--header-height) + var(--vita-space-3xl)) 0 var(--vita-space-4xl);
  background: linear-gradient(180deg, var(--vita-primary-50) 0%, var(--vita-bg) 100%);
}

.hero__grid {
  display: grid;
  gap: var(--vita-space-2xl);
  align-items: center;
}

.hero__content {
  text-align: center;
}

.hero__image {
  display: flex;
  justify-content: center;
}

.hero__image .photo-placeholder {
  aspect-ratio: 4 / 5;
  max-height: 480px;
  border-radius: var(--vita-radius-xl);
}

.hero__illustration {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  border-radius: var(--vita-radius-xl);
  box-shadow: var(--vita-shadow-md);
}

/* Beschikbaar 24/7 status pill */
.hero__status {
  display: inline-flex;
  align-items: center;
  gap: var(--vita-space-sm);
  background: var(--vita-green-50);
  color: var(--vita-green-600);
  padding: var(--vita-space-sm) var(--vita-space-lg);
  border-radius: var(--vita-radius-full);
  font-weight: var(--vita-weight-semi);
  font-size: var(--vita-text-sm);
  margin-bottom: var(--vita-space-lg);
  border: 1px solid var(--vita-green-100);
}
.hero__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vita-green-400);
  flex-shrink: 0;
}

.hero__label {
  font-size: var(--vita-text-sm);
  font-weight: var(--vita-weight-semi);
  color: var(--vita-primary-600);
  text-transform: uppercase;
  letter-spacing: var(--vita-tracking-caps);
  margin-bottom: var(--vita-space-md);
}

.hero h1 {
  font-size: var(--vita-text-3xl);
  max-width: 18ch;
  margin: 0 auto var(--vita-space-lg);
}

.hero__lead {
  font-size: var(--vita-text-lg);
  color: var(--vita-text-body);
  max-width: 42ch;
  margin: 0 auto var(--vita-space-2xl);
  line-height: var(--vita-leading-normal);
}

/* Hero badge (derdebetalersysteem) */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--vita-space-sm);
  background: var(--vita-green-50);
  color: var(--vita-green-600);
  padding: var(--vita-space-xs) var(--vita-space-md);
  border-radius: var(--vita-radius-full);
  font-weight: var(--vita-weight-semi);
  font-size: var(--vita-text-xs);
  margin-bottom: var(--vita-space-2xl);
  border: 1px solid var(--vita-green-100);
}
.hero__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vita-green-400);
  flex-shrink: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vita-space-md);
  justify-content: center;
}

/* ============================================================
   8. SECTIONS
   ============================================================ */
.section {
  padding: var(--vita-section-py) 0;
}

.section--tinted {
  background: var(--vita-bg-section);
}

.section--dark {
  background: var(--vita-bg-dark);
  color: var(--vita-text-on-dark);
}
.section--dark h2,
.section--dark h3 { color: var(--vita-text-on-dark); }
.section--dark p,
.section--dark .section__header p { color: rgba(255, 255, 255, 0.85); }
.section--dark .section__label { color: var(--vita-primary-100); }

.section__header {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto var(--vita-space-3xl);
}

.section__label {
  display: inline-block;
  font-size: var(--vita-text-xs);
  font-weight: var(--vita-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--vita-tracking-caps);
  color: var(--vita-primary-600);
  margin-bottom: var(--vita-space-sm);
}

.section__header p {
  color: var(--vita-text-body);
  font-size: var(--vita-text-lg);
}

/* ============================================================
   9. FEATURE CARDS
   ============================================================ */
.features {
  display: grid;
  gap: var(--vita-space-xl);
}

.feature {
  text-align: center;
  padding: var(--vita-space-xl) var(--vita-space-lg);
  background: var(--vita-bg);
  border-radius: var(--vita-radius-lg);
  border: 1px solid var(--vita-primary-100);
  transition: transform var(--vita-duration-normal) var(--vita-easing),
              box-shadow var(--vita-duration-normal) var(--vita-easing),
              border-color var(--vita-duration-normal) var(--vita-easing);
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--vita-shadow-md);
  border-color: var(--vita-primary-400);
}

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--vita-radius-lg);
  background: var(--vita-primary-50);
  color: var(--vita-primary-600);
  margin-bottom: var(--vita-space-lg);
}

.feature h3 {
  margin-bottom: var(--vita-space-sm);
}

.feature p {
  color: var(--vita-text-muted);
  font-size: var(--vita-text-sm);
}

/* ============================================================
   10. DIENSTEN LIJST
   ============================================================ */
.diensten-grid {
  display: grid;
  gap: var(--vita-space-lg);
}

.dienst-card {
  padding: var(--vita-space-lg);
  background: var(--vita-bg);
  border-radius: var(--vita-radius-lg);
  border: 1px solid var(--vita-primary-100);
  transition: border-color var(--vita-duration-fast) var(--vita-easing),
              box-shadow var(--vita-duration-fast) var(--vita-easing);
}

.dienst-card:hover {
  border-color: var(--vita-primary-400);
  box-shadow: var(--vita-shadow-md);
}

.dienst-card h3 {
  font-family: var(--vita-font-display);
  font-size: var(--vita-text-xl);
  font-weight: var(--vita-weight-semi);
  color: var(--vita-text);
  margin-bottom: var(--vita-space-xs);
  line-height: var(--vita-leading-tight);
}

.dienst-card p {
  color: var(--vita-text-body);
  font-size: var(--vita-text-sm);
  line-height: var(--vita-leading-normal);
}

/* ============================================================
   10b. REVIEWS
   ============================================================ */
.reviews-grid {
  column-count: 1;
  column-gap: var(--vita-space-lg);
}

.reviews-grid .review-card {
  break-inside: avoid;
  margin-bottom: var(--vita-space-lg);
}

.review-card {
  padding: var(--vita-space-xl) var(--vita-space-lg);
  background: var(--vita-bg);
  border-radius: var(--vita-radius-lg);
  border: 1px solid var(--vita-primary-100);
  transition: transform var(--vita-duration-normal) var(--vita-easing),
              box-shadow var(--vita-duration-normal) var(--vita-easing),
              border-color var(--vita-duration-normal) var(--vita-easing);
  margin: 0;
  display: flex;
  flex-direction: column;
}

.review-card__text {
  flex: 1;
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--vita-shadow-md);
  border-color: var(--vita-primary-400);
}

.review-card__stars {
  display: flex;
  gap: 2px;
  color: #F4B740;
  margin-bottom: var(--vita-space-md);
}

.review-card__text {
  font-size: var(--vita-text-base);
  line-height: var(--vita-leading-relaxed);
  color: var(--vita-text-body);
  font-style: italic;
  margin-bottom: var(--vita-space-lg);
}

.review-card__author {
  display: flex;
  flex-direction: column;
  gap: var(--vita-space-xs);
}

.review-card__name {
  font-weight: var(--vita-weight-semi);
  color: var(--vita-text);
  font-size: var(--vita-text-sm);
}

.review-card__source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--vita-text-xs);
  color: var(--vita-text-muted);
}

/* ============================================================
   11a. WERKGEBIED
   ============================================================ */
.werkgebied-layout {
  display: grid;
  gap: var(--vita-space-2xl);
  align-items: center;
}

.werkgebied-map {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: var(--vita-radius-xl);
  overflow: hidden;
}

.werkgebied-map iframe {
  display: block;
  width: 100%;
  height: 350px;
}

@media (min-width: 768px) {
  .werkgebied-map iframe {
    height: 400px;
  }
}

.werkgebied-info p {
  margin-bottom: var(--vita-space-md);
  color: var(--vita-text-body);
  line-height: var(--vita-leading-relaxed);
}

.werkgebied-info .btn {
  margin-top: var(--vita-space-sm);
}

@media (min-width: 768px) {
  .werkgebied-layout {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* ============================================================
   11b. FAQ ACCORDION
   ============================================================ */
.faq-list {
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--vita-space-sm);
}

.faq-item {
  background: var(--vita-bg);
  border: 1px solid var(--vita-primary-100);
  border-radius: var(--vita-radius-lg);
  overflow: hidden;
  transition: border-color var(--vita-duration-fast) var(--vita-easing);
}

.faq-item:hover {
  border-color: var(--vita-primary-400);
}

.faq-item.open {
  border-color: var(--vita-primary-400);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--vita-space-lg) var(--vita-space-xl);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--vita-font-body);
  font-size: var(--vita-text-base);
  font-weight: var(--vita-weight-semi);
  color: var(--vita-text);
  text-align: left;
  gap: var(--vita-space-md);
}

.faq-question:hover {
  color: var(--vita-primary-600);
}

.faq-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vita-primary-400);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.3s ease;
}

.faq-answer__inner {
  padding: 0 var(--vita-space-xl) var(--vita-space-lg);
  color: var(--vita-text-body);
  line-height: var(--vita-leading-normal);
}

.faq-answer__inner p:last-child { margin-bottom: 0; }

/* ============================================================
   11b. PHOTO PLACEHOLDERS
   ============================================================ */
.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--vita-space-md);
  min-height: 20rem;
  background: var(--vita-primary-50);
  border: 2px dashed var(--vita-primary-200);
  border-radius: var(--vita-radius-xl);
  color: var(--vita-primary-400);
}
.photo-placeholder span {
  font-weight: var(--vita-weight-semi);
  font-size: var(--vita-text-sm);
  color: var(--vita-primary-600);
}
.photo-placeholder--dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.4);
}
.photo-placeholder--dark span {
  color: rgba(255, 255, 255, 0.6);
}

/* Over mij layout */
.over-layout {
  display: grid;
  gap: var(--vita-space-2xl);
  align-items: center;
}
.over-photo { display: flex; justify-content: center; }
.over-text { text-align: center; }

/* ============================================================
   12. CONTACT SECTION
   ============================================================ */
.contact-layout {
  display: grid;
  gap: var(--vita-space-2xl);
}

.form-row {
  display: grid;
  gap: var(--vita-space-lg);
}

.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--vita-space-lg);
}

/* Contact foto (naast de contactgegevens op desktop) */
.contact-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--vita-radius-xl);
  box-shadow: var(--vita-shadow-sm);
  display: block;
}

/* Contact card (tinted) */
.contact-card {
  background: var(--vita-primary-50);
  border-radius: var(--vita-radius-xl);
  padding: var(--vita-space-lg);
  border: 1px solid var(--vita-primary-100);
}

.contact-card h3 {
  font-family: var(--vita-font-body);
  font-size: var(--vita-text-lg);
  font-weight: var(--vita-weight-semi);
  margin-bottom: var(--vita-space-xl);
  color: var(--vita-text);
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: var(--vita-space-md);
  margin-bottom: var(--vita-space-lg);
}
.contact-detail:last-child { margin-bottom: 0; }

.contact-detail__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--vita-radius-md);
  background: var(--vita-primary-400);
  color: var(--vita-text-on-dark);
}

.contact-detail__label {
  display: block;
  font-size: var(--vita-text-sm);
  color: var(--vita-text-muted);
  margin-bottom: var(--vita-space-xs);
}

.contact-detail__text a,
.contact-detail__text span {
  font-weight: var(--vita-weight-regular);
  color: var(--vita-text);
  font-size: var(--vita-text-base);
  word-break: break-word;
}
.contact-detail__text a:hover { color: var(--vita-primary-600); }

/* Urgentiekaart (rood) */
.contact-urgent {
  background: var(--vita-coral-50);
  border: 1px solid var(--vita-coral-100);
  border-radius: var(--vita-radius-xl);
  padding: var(--vita-space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--vita-space-md);
}

.contact-urgent h3 {
  font-family: var(--vita-font-body);
  font-size: var(--vita-text-lg);
  font-weight: var(--vita-weight-semi);
  color: var(--vita-coral-800);
  margin: 0;
}

.contact-urgent__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--vita-space-sm);
  font-family: var(--vita-font-display);
  font-size: var(--vita-text-4xl);
  font-weight: var(--vita-weight-semi);
  color: var(--vita-coral-600);
  letter-spacing: var(--vita-tracking-tight);
  line-height: 1;
  white-space: nowrap;
}

.contact-urgent__note {
  margin: 0;
  font-size: var(--vita-text-sm);
  color: var(--vita-coral-800);
  font-style: italic;
}

/* Contact form header (korte intro) */
.contact-form__header h3 {
  font-family: var(--vita-font-body);
  font-size: var(--vita-text-lg);
  font-weight: var(--vita-weight-semi);
  color: var(--vita-text);
  margin: 0 0 var(--vita-space-xs);
}

.contact-form__header p {
  margin: 0;
  font-size: var(--vita-text-sm);
  color: var(--vita-text-body);
}
.contact-urgent__phone::before {
  content: '';
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--vita-coral-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.contact-urgent__phone:hover { color: var(--vita-coral-400); }
.contact-urgent__phone:hover::before { background: var(--vita-coral-400); }

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--vita-space-lg);
  background: var(--vita-primary-50);
  border: 1px solid var(--vita-primary-100);
  border-radius: var(--vita-radius-xl);
  padding: var(--vita-space-lg);
  box-shadow: var(--vita-shadow-sm);
  max-width: 100%;
  overflow: hidden;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--vita-space-xs);
}

.form-group label {
  font-weight: var(--vita-weight-semi);
  font-size: var(--vita-text-sm);
  color: var(--vita-text);
}
.form-group label .required {
  color: var(--vita-coral-400);
  margin-left: 0.125rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  min-height: var(--vita-input-min-height);
  padding: var(--vita-input-padding);
  border: 1.5px solid var(--vita-border);
  border-radius: var(--vita-radius-md);
  font-family: var(--vita-font-body);
  font-size: var(--vita-text-base);
  background: var(--vita-bg);
  max-width: 100%;
  transition: border-color var(--vita-duration-fast) var(--vita-easing),
              box-shadow var(--vita-duration-fast) var(--vita-easing);
}

.cf-turnstile { max-width: 100%; overflow: hidden; }

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--vita-border-focus);
  box-shadow: var(--vita-shadow-focus);
}

.form-group textarea {
  resize: vertical;
  min-height: 8rem;
}

.form-message {
  font-weight: var(--vita-weight-semi);
  font-size: var(--vita-text-sm);
  padding: var(--vita-space-md);
  border-radius: var(--vita-radius-md);
}
.form-message--success {
  background: var(--vita-success-bg);
  color: var(--vita-success-text);
}
.form-message--error {
  background: var(--vita-error-bg);
  color: var(--vita-error-text);
}

.form-status {
  font-weight: var(--vita-weight-semi);
  font-size: var(--vita-text-sm);
  padding: 0;
  border-radius: var(--vita-radius-md);
  min-height: 0;
  transition: all var(--vita-duration-fast) var(--vita-easing);
}
.form-status:not(:empty) {
  padding: var(--vita-space-md);
}
.form-status--success {
  background: var(--vita-green-50);
  color: var(--vita-green-600);
  border: 1px solid var(--vita-green-100);
}
.form-status--error {
  background: var(--vita-coral-50);
  color: var(--vita-coral-600);
  border: 1px solid var(--vita-coral-100);
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--vita-space-4xl) var(--vita-space-xl);
  gap: var(--vita-space-md);
}
.form-success svg {
  color: var(--vita-green-400);
}
.form-success h3 {
  color: var(--vita-text);
  font-size: var(--vita-text-xl);
}
.form-success p {
  color: var(--vita-text-body);
  font-size: var(--vita-text-base);
}

/* ============================================================
   13. FOOTER
   ============================================================ */
.site-footer {
  background: var(--vita-bg-footer);
  color: rgba(255, 255, 255, 0.85);
  padding: var(--vita-space-3xl) 0 var(--vita-space-xl);
}

.footer__grid {
  display: grid;
  gap: var(--vita-space-2xl);
}

.footer__brand-logo {
  display: flex;
  align-items: center;
  margin-bottom: var(--vita-space-sm);
}

.footer__brand-logo svg {
  flex-shrink: 0;
  border-radius: 50%;
}

.footer__brand-name {
  font-family: var(--vita-font-display);
  font-size: var(--vita-text-xl);
  font-weight: var(--vita-weight-semi);
  color: var(--vita-text-on-dark);
  line-height: 1;
}

.footer__brand-vita {
  color: var(--vita-coral-400);
}

.footer__brand-accent {
  color: var(--vita-primary-400);
}

.footer__brand p {
  font-size: var(--vita-text-sm);
  max-width: 34ch;
  line-height: var(--vita-leading-normal);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--vita-space-xs);
  margin-top: var(--vita-space-sm);
}
.footer__contact a {
  font-size: var(--vita-text-sm);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--vita-duration-normal) var(--vita-easing);
}
.footer__contact a:hover {
  color: var(--vita-text-on-dark);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--vita-space-sm);
}

.footer__col-title {
  font-size: var(--vita-text-xs);
  font-weight: var(--vita-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--vita-tracking-caps);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--vita-space-xs);
}

.footer__col a {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--vita-text-sm);
  transition: color var(--vita-duration-fast) var(--vita-easing);
}
.footer__col a:hover { color: var(--vita-text-on-dark); }

.footer__bottom {
  margin-top: var(--vita-space-2xl);
  padding-top: var(--vita-space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--vita-text-xs);
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--vita-space-sm);
}
.footer__bottom a {
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--vita-duration-fast) var(--vita-easing);
}
.footer__bottom a:hover { color: var(--vita-text-on-dark); }

/* ============================================================
   14. ARTICLE / PRIVACY
   ============================================================ */
.article {
  padding: calc(var(--header-height) + var(--vita-space-3xl)) 0 var(--vita-space-4xl);
}

.article h1 {
  margin-bottom: var(--vita-space-sm);
}

.article__meta {
  font-size: var(--vita-text-sm);
  color: var(--vita-text-muted);
  margin-bottom: var(--vita-space-3xl);
}

.article h2 {
  margin-top: var(--vita-space-2xl);
}

.article h3 {
  margin-top: var(--vita-space-xl);
  margin-bottom: var(--vita-space-sm);
}

.article ul {
  margin-bottom: var(--vita-space-md);
}

.article li {
  margin-bottom: var(--vita-space-xs);
}

.article a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   15. FLOATING BEL-KNOP
   ============================================================ */
.floating-call {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--vita-coral-600);
  color: var(--vita-text-on-dark);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--vita-duration-normal) var(--vita-easing), visibility var(--vita-duration-normal) var(--vita-easing), transform var(--vita-duration-normal) var(--vita-easing), background 0.2s;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}
.floating-call.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.floating-call:hover {
  background: var(--vita-coral-800);
  color: var(--vita-text-on-dark);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  transform: scale(1.08);
}
@media (max-width: 768px) {
  .floating-call {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 50px;
    height: 50px;
  }

  .contact-urgent__phone {
    font-size: var(--vita-text-3xl);
    gap: var(--vita-space-xs);
  }
  .contact-urgent__phone::before {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* ============================================================
   16. REVEAL ANIMATIES (Framer-stijl)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 560ms; }

/* Toegankelijkheid: respecteer motion-voorkeur */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .reveal-stagger > .reveal { transition-delay: 0ms; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ============================================================
   17. RESPONSIVE — 768px+
   ============================================================ */
@media (min-width: 768px) {
  h1 { font-size: var(--vita-text-4xl); }
  h2 { font-size: var(--vita-text-3xl); }

  .hero { padding-top: calc(var(--header-height) + var(--vita-space-4xl)); padding-bottom: var(--vita-space-4xl); }
  .hero__grid { grid-template-columns: 1fr 1fr; gap: var(--vita-space-4xl); }
  .hero__content { text-align: left; }
  .hero h1 { font-size: var(--vita-text-4xl); max-width: none; margin: 0 0 var(--vita-space-lg); }
  .hero__lead { font-size: var(--vita-text-xl); max-width: none; margin: 0 0 var(--vita-space-2xl); }
  .hero__badge { font-size: var(--vita-text-sm); padding: var(--vita-space-sm) var(--vita-space-lg); }
  .hero__actions { justify-content: flex-start; }
  .hero__image .photo-placeholder { max-height: 540px; }

  /* Nav desktop */
  .nav-toggle { display: none; }
  .nav-contact { display: none; }
  .nav-menu {
    display: flex;
    flex-direction: row;
    position: static;
    background: none;
    padding: 1rem;
    gap: var(--vita-space-xl);
    align-items: center;
  }

  /* Desktop nav links — kleiner, met underline hover */
  .nav-link {
    font-size: var(--vita-text-base);
    padding: 0.25rem 0;
    position: relative;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--vita-primary-400);
    border-radius: 1px;
    transform: scaleX(0);
    transition: transform var(--vita-duration-normal) var(--vita-easing);
  }
  .nav-link:hover::after {
    transform: scaleX(1);
  }

  /* Desktop Bel mij */
  .nav-btn {
    margin-top: 0;
    animation: btn-pulse 2s ease-in-out infinite;
  }

@keyframes btn-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

  /* Grids */
  .features { grid-template-columns: repeat(3, 1fr); }
  .diensten-grid { grid-template-columns: 1fr 1fr; }
  .reviews-grid { column-count: 3; }
  .contact-sidebar { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--vita-space-xl); }
  .contact-photo { grid-row: span 2; }
  .contact-photo img { height: 100%; aspect-ratio: auto; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .contact-form { padding: var(--vita-space-2xl); }
  .contact-card { padding: var(--vita-space-2xl); }
  .contact-urgent { padding: var(--vita-space-xl) var(--vita-space-2xl); }

  /* Over mij layout */
  .over-layout { grid-template-columns: 1fr 1fr; }
  .over-text { text-align: left; }

  /* Footer grid */
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }

  /* Section spacing */
  .section { padding: var(--vita-space-4xl) 0; }
}

/* ============================================================
   404 PAGE
   ============================================================ */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: var(--vita-space-3xl) 0;
}
.error-page__content { max-width: 480px; }
.error-page__code {
  display: block;
  font-family: var(--vita-font-display);
  font-size: clamp(5rem, 15vw, 8rem);
  font-weight: 600;
  line-height: 1;
  color: var(--vita-primary-200);
  letter-spacing: -0.04em;
}
.error-page h1 {
  margin-top: var(--vita-space-sm);
  margin-bottom: var(--vita-space-md);
}
.error-page p {
  color: var(--vita-text-muted);
  margin-bottom: var(--vita-space-xl);
}