/* brand.css */
/* Aethron Brand Colors and Variables */

:root {
  /* Primary Brand Colors */
  --aethron-blue: #06c;
  --aethron-blue-dark: #049;
  --aethron-blue-light: #3385d6;
  --aethron-orange: #f60;
  --aethron-orange-dark: #e55a00;
  --aethron-orange-light: #ff8533;

  /* Toegankelijke CTA-kleuren (WEBAETH-164, WCAG 2.1 AA).
     Er zijn bewust twee oranjes: --aethron-orange (#f60) haalt op wit maar 2,94:1 en
     blijft daarom gereserveerd voor NIET-tekstuele accenten (hamburgerlijnen, actieve
     onderstreping, iconen). Zodra oranje als tekst of als knopvulling met tekst erop
     gebruikt wordt, hoort het een van deze twee te zijn. Zet ze niet gelijk.
     WEBAETH-180 legt deze rolverdeling formeel vast; WEBAETH-177 hergebruikt
     --aethron-cta voor de focus-indicator (was #f60, faalde WCAG 1.4.11 met 2,94:1). */
  --aethron-cta: #B34700;        /* 5,50:1 op wit — CTA in rust */
  --aethron-cta-hover: #993D00;  /* 6,95:1 op wit — CTA hover, donkerder dan rust */
  --aethron-sky: #0369A1;        /* 5,93:1 op wit — vervangt #0ea5e9 (2,77:1) */
  
  /* Neutral Colors */
  --aethron-white: #fff;
  --aethron-black: #000;
  --aethron-gray: #f5f5f5;
  --aethron-gray-light: #f8f9fa;
  --aethron-gray-medium: #6c757d;
  --aethron-gray-dark: #333;
  
  /* Text Colors */
  --text-primary: var(--aethron-black);
  --text-secondary: var(--aethron-gray-dark);
  --text-muted: var(--aethron-gray-medium);
  --text-white: var(--aethron-white);
  
  /* Background Colors */
  --bg-primary: var(--aethron-white);
  --bg-secondary: var(--aethron-gray);
  --bg-hero: var(--aethron-blue);
  --bg-accent: var(--aethron-orange);
}

/* Typography using brand colors */
body {
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}

/* Brand-specific text colors */
.text-blue {
  color: var(--aethron-blue) !important;
}

.text-orange {
  color: var(--aethron-orange) !important;
}

.text-white {
  color: var(--text-white) !important;
}

.text-black {
  color: var(--text-primary) !important;
}

/* Brand-specific background colors */
.bg-blue {
  background-color: var(--aethron-blue) !important;
}

.bg-orange {
  background-color: var(--aethron-orange) !important;
}

.bg-white {
  background-color: var(--bg-primary) !important;
}

.bg-gray {
  background-color: var(--bg-secondary) !important;
}

/* Button Brand Styles */
.btn-brand-primary {
  /* WEBAETH-182: witte tekst op #f60 haalt 2,94:1 en op #e55a00 (hover) 3,62:1 — beide
     onder WCAG AA. De CTA-tokens (#B34700 / #993D00) halen 5,50:1 / 6,95:1 op wit. */
  background-color: var(--aethron-cta);
  color: var(--text-white);
  border: none;
}

.btn-brand-primary:hover {
  background-color: var(--aethron-cta-hover);
  color: var(--text-white);
  text-decoration: none;
}

.btn-brand-secondary {
  background-color: transparent;
  color: var(--aethron-blue);
  border: 2px solid var(--aethron-blue);
}

.btn-brand-secondary:hover {
  background-color: var(--aethron-blue);
  color: var(--text-white);
  text-decoration: none;
}

/* Service Card Icons - Orange Circle */
.service-icon-brand {
  background-color: var(--aethron-orange);
  color: var(--text-white);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.5rem;
}

/* Brand gradient overlays */
.brand-gradient-blue {
  background: linear-gradient(135deg, var(--aethron-blue) 0%, var(--aethron-blue-dark) 100%);
}

.brand-gradient-orange {
  background: linear-gradient(135deg, var(--aethron-orange) 0%, var(--aethron-orange-dark) 100%);
}

/* responsive.css */
/* WEBS-34: Mobile First Responsive Design System */

/* ==========================================================================
   MOBILE FIRST RESPONSIVE BREAKPOINTS
   ========================================================================== */

/*
  Mobile First Philosophy:
  - Base styles are for mobile (no media query needed)
  - Use min-width media queries to progressively enhance for larger screens
  - Breakpoints: 480px (small), 768px (medium), 992px (large), 1200px (xl)
*/

:root {
  /* Responsive breakpoints */
  --bp-small: 30rem;    /* 480px */
  --bp-medium: 48rem;   /* 768px */
  --bp-large: 62rem;    /* 992px */
  --bp-xl: 75rem;       /* 1200px */
  
  /* Responsive spacing */
  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 1.5rem;   /* 24px */
  --spacing-lg: 2rem;     /* 32px */
  --spacing-xl: 3rem;     /* 48px */
  --spacing-xxl: 4rem;    /* 64px */
  
  /* Responsive font sizes */
  --font-xs: 0.75rem;     /* 12px */
  --font-sm: 0.875rem;    /* 14px */
  --font-base: 1rem;      /* 16px */
  --font-lg: 1.125rem;    /* 18px */
  --font-xl: 1.25rem;     /* 20px */
  --font-2xl: 1.5rem;     /* 24px */
  --font-3xl: 1.875rem;   /* 30px */
  --font-4xl: 2.25rem;    /* 36px */
  --font-5xl: 3rem;       /* 48px */
}

/* ==========================================================================
   CONTAINER SYSTEM
   ========================================================================== */

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

/* Small devices (480px and up) */
@media (min-width: 30rem) {
  .container {
    padding: 0 var(--spacing-md);
  }
}

/* Medium devices (768px and up) */
@media (min-width: 48rem) {
  .container {
    max-width: 750px;
    padding: 0 var(--spacing-lg);
  }
}

/* Large devices (992px and up) */
@media (min-width: 62rem) {
  .container {
    max-width: 970px;
  }
}

/* Extra large devices (1200px and up) */
@media (min-width: 75rem) {
  .container {
    max-width: 1170px;
  }
}

/* ==========================================================================
   RESPONSIVE GRID SYSTEM
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--spacing-md);
}

/* Mobile: Single column by default */
.grid-cols-1 { grid-template-columns: 1fr; }

/* Small devices and up */
@media (min-width: 30rem) {
  .grid-cols-sm-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-sm-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Medium devices and up */
@media (min-width: 48rem) {
  .grid-cols-md-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-md-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-md-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Large devices and up */
@media (min-width: 62rem) {
  .grid-cols-lg-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-lg-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-lg-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   RESPONSIVE FLEXBOX UTILITIES
   ========================================================================== */

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

/* Small devices and up */
@media (min-width: 30rem) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-start { align-items: flex-start; }
}

/* Medium devices and up */
@media (min-width: 48rem) {
  .md\:flex-row { flex-direction: row; }
  .md\:items-start { align-items: flex-start; }
}

/* ==========================================================================
   RESPONSIVE SPACING UTILITIES
   ========================================================================== */

/* Padding */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Margin */
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* Responsive spacing adjustments */
@media (min-width: 48rem) {
  .md\:p-lg { padding: var(--spacing-lg); }
  .md\:p-xl { padding: var(--spacing-xl); }
  .md\:m-lg { margin: var(--spacing-lg); }
  .md\:m-xl { margin: var(--spacing-xl); }
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY
   ========================================================================== */

.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-lg { font-size: var(--font-lg); }
.text-xl { font-size: var(--font-xl); }
.text-2xl { font-size: var(--font-2xl); }
.text-3xl { font-size: var(--font-3xl); }
.text-4xl { font-size: var(--font-4xl); }
.text-5xl { font-size: var(--font-5xl); }

/* Responsive typography scaling */
@media (min-width: 48rem) {
  .md\:text-lg { font-size: var(--font-lg); }
  .md\:text-xl { font-size: var(--font-xl); }
  .md\:text-2xl { font-size: var(--font-2xl); }
  .md\:text-3xl { font-size: var(--font-3xl); }
  .md\:text-4xl { font-size: var(--font-4xl); }
  .md\:text-5xl { font-size: var(--font-5xl); }
}

/* ==========================================================================
   RESPONSIVE DISPLAY UTILITIES
   ========================================================================== */

.hidden { display: none; }
.block { display: block; }

/* Show/hide at different breakpoints */
.sm\:hidden { display: none; }

@media (min-width: 30rem) {
  .sm\:block { display: block; }
  .sm\:hidden { display: none; }
}

.md\:hidden { display: none; }

@media (min-width: 48rem) {
  .md\:block { display: block; }
  .md\:hidden { display: none; }
}

/* ==========================================================================
   TOUCH-FRIENDLY INTERACTIONS
   ========================================================================== */

/* Ensure touch targets are at least 44px */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Improve touch scrolling on mobile */
.scroll-smooth {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ==========================================================================
   RESPONSIVE IMAGES
   ========================================================================== */

.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   MOBILE-FIRST FORM STYLES
   ========================================================================== */

.form-responsive input,
.form-responsive select,
.form-responsive textarea {
  width: 100%;
  min-height: 44px; /* Touch-friendly */
  font-size: 16px; /* Prevent zoom on iOS */
  padding: 12px 16px;
  border: 2px solid var(--aethron-gray);
  border-radius: 8px;
  transition: border-color 0.2s ease;
}

@media (min-width: 48rem) {
  .form-responsive input,
  .form-responsive select,
  .form-responsive textarea {
    font-size: 14px; /* Smaller on desktop */
  }
}

/* main.css */
/* WEBS-34: Mobile First Responsive Styles for Aethron Technologies website */

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fff;

  /* Mobile-first: Base font size for mobile */
  font-size: 16px;
}

/* Container - Mobile First */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

/* Small devices (480px and up) */
@media (min-width: 30rem) {
  .container {
    padding: 0 24px;
  }
}

/* Medium devices (768px and up) */
@media (min-width: 48rem) {
  .container {
    max-width: 750px;
    padding: 0 32px;
  }
}

/* Large devices (992px and up) */
@media (min-width: 62rem) {
  .container {
    max-width: 970px;
  }
}

/* Extra large devices (1200px and up) */
@media (min-width: 75rem) {
  .container {
    max-width: 1170px;
  }
}

/* Typography - Mobile First */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Mobile typography */
h1 { font-size: 1.75rem; }  /* 28px */
h2 { font-size: 1.5rem; }   /* 24px */
h3 { font-size: 1.25rem; }  /* 20px */
h4 { font-size: 1.125rem; } /* 18px */

/* Tablet and up typography */
@media (min-width: 48rem) {
  h1 { font-size: 2.25rem; } /* 36px */
  h2 { font-size: 1.875rem; } /* 30px */
  h3 { font-size: 1.5rem; }   /* 24px */
  h4 { font-size: 1.25rem; }  /* 20px */
}

/* Desktop typography */
@media (min-width: 62rem) {
  h1 { font-size: 2.5rem; }   /* 40px */
  h2 { font-size: 2rem; }     /* 32px */
  h3 { font-size: 1.5rem; }   /* 24px */
  h4 { font-size: 1.25rem; }  /* 20px */
}

p {
  margin-bottom: 1rem;

  /* Mobile-first: Slightly larger text for better readability */
  font-size: 1rem;
  line-height: 1.6;
}

@media (min-width: 48rem) {
  p {
    font-size: 1.125rem; /* 18px on tablet+ */
    line-height: 1.7;
  }
}

/* Links */
a {
  color: #06c;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #049;
  text-decoration: underline;
}

/* WEBAETH-164: links in lopende tekst moeten ook zonder kleur herkenbaar zijn
   (Lighthouse link-in-text-block / WCAG 1.4.1). Bewust gericht op tekstblokken en
   niet als globale `a`-regel: main.css zet op ruim tien plaatsen expliciet
   text-decoration: none voor knoppen en navigatie, en een globale regel vecht daarmee. */
.lead a,
.pricing-note a {
  text-decoration: underline;
}

/* Buttons - Mobile First with Touch-Friendly Design */
.btn {
  display: inline-block;

  /* Mobile: Larger padding for better touch targets */
  padding: 16px 24px;
  min-height: 44px; /* Minimum touch target size */
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;

  /* Mobile: Full width buttons by default */
  width: 100%;
  box-sizing: border-box;
}

/* Tablet and up: Inline buttons */
@media (min-width: 48rem) {
  .btn {
    width: auto;
    padding: 12px 24px;
    display: inline-block;
  }
}

.btn-primary {
  background-color: var(--aethron-cta); /* Orange background */
  color: white; /* White text */
}

.btn-primary:hover {
  background-color: var(--aethron-cta-hover); /* Darker orange on hover */
  color: white;
  text-decoration: none;
}

.btn-secondary {
  background-color: var(--aethron-cta); /* Orange background */
  color: white; /* White text */
  border: 2px solid var(--aethron-cta);
}

.btn-secondary:hover {
  background-color: var(--aethron-cta-hover); /* Darker orange on hover */
  color: white;
  text-decoration: none;
}

.btn-large {
  /* Mobile: Even larger touch targets for important buttons */
  padding: 20px 32px;
  font-size: 1.125rem;
  min-height: 52px;
}

@media (min-width: 48rem) {
  .btn-large {
    padding: 16px 32px;
    font-size: 1.125rem;
  }
}

/* Hero section - Mobile First Design */
.hero {
  background: #06c; /* Blue background */
  color: white; /* White text */

  /* Mobile: Reduced padding for smaller screens */
  padding: 60px 0;
  text-align: center;
}

/* Tablet and up: More spacious hero */
@media (min-width: 48rem) {
  .hero {
    padding: 80px 0;
  }
}

/* Desktop: Full hero spacing */
@media (min-width: 62rem) {
  .hero {
    padding: 100px 0;
  }
}

.hero-content h1 {
  /* Mobile: Smaller hero title */
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: white; /* Ensure title is white */
}

/* Tablet: Medium hero title */
@media (min-width: 48rem) {
  .hero-content h1 {
    font-size: 2.75rem;
    margin-bottom: 1.25rem;
  }
}

/* Desktop: Large hero title */
@media (min-width: 62rem) {
  .hero-content h1 {
    font-size: 3.2rem;
    margin-bottom: 1.5rem;
  }
}

.hero-subtitle {
  /* Mobile: Smaller subtitle */
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #ccc; /* Light gray for subtitle */
}

@media (min-width: 48rem) {
  .hero-subtitle {
    font-size: 1.125rem;
  }
}

@media (min-width: 62rem) {
  .hero-subtitle {
    font-size: 1.25rem;
  }
}

.hero-description {
  /* Mobile: Readable description size */
  font-size: 1rem;
  margin-bottom: 2rem;

  /* Was #ccc: 3,47:1 op de blauwe hero (#06c) — onder de AA-drempel van 4,5:1.
     --aethron-gray-light geeft 5,28:1 en is dezelfde tint die
     .hero-secondary .hero-subtitle al gebruikt. Zie WEBAETH-164. */
  color: var(--aethron-gray-light);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

@media (min-width: 48rem) {
  .hero-description {
    font-size: 1.125rem;
    margin-bottom: 2.25rem;
  }
}

@media (min-width: 62rem) {
  .hero-description {
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
  }
}

.hero-actions {
  /* Mobile: Stack buttons vertically */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  width: 100%;
}

/* Tablet and up: Horizontal layout */
@media (min-width: 48rem) {
  .hero-actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Hero buttons - Use outline style like "about us" section */
.hero .btn-primary,
.hero .btn-secondary {
  background: white; /* White background when not hovering */
  color: var(--aethron-cta); /* Orange text */
  border: 2px solid var(--aethron-cta); /* Orange border */
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.hero .btn-primary:hover,
.hero .btn-secondary:hover {
  background: var(--aethron-cta-hover); /* Orange background on hover */
  color: white; /* White text on hover */
  text-decoration: none;
  transform: translateY(-2px);
}

/* Sections */
section {
  padding: 60px 0;
}

section:nth-child(even) {
  background-color: #f8f9fa;
}

/* Services overview section - Mobile First */
.services-overview {
  /* Mobile: Reduced padding */
  padding: 40px 0;
  background-color: #f8f9fa;
}

/* Tablet and up: More spacious */
@media (min-width: 48rem) {
  .services-overview {
    padding: 60px 0;
  }
}

/* Desktop: Full spacing */
@media (min-width: 62rem) {
  .services-overview {
    padding: 80px 0;
  }
}

.services-grid {
  display: grid;

  /* Mobile: Single column */
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}

/* Small tablet: Try 2 columns if space allows */
@media (min-width: 30rem) {
  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Tablet and up: Better grid */
@media (min-width: 48rem) {
  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.25rem;
    margin-top: 2rem;
  }
}

/* Desktop: Full spacing */
@media (min-width: 62rem) {
  .services-grid {
    gap: 2.5rem;
  }
}

.service-card {
  background: white; /* White background */

  /* Mobile: Reduced padding */
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  text-align: center;
}

/* Tablet and up: More padding */
@media (min-width: 48rem) {
  .service-card {
    padding: 2.25rem;
    border-radius: 16px;
  }
}

/* Desktop: Full padding */
@media (min-width: 62rem) {
  .service-card {
    padding: 2.5rem;
  }
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.service-icon {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  height: 80px;
  width: 80px;

  /* Blijft #f60: de inhoud is een emoji in een aria-hidden container (index.njk:28),
     dus geen tekst waar de WCAG-kleurcontrasteis op van toepassing is. Zie WEBAETH-164. */
  background: #f60; /* Orange background for circular icon */
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.service-card h2 {
  color: #06c; /* Blue title */
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  font-weight: 600;
}

.service-card p {
  color: #000; /* Black text */
  line-height: 1.7;
  font-size: 1rem;
}

/* About summary section - Black titles and text on gray background */
.about-summary {
  padding: 80px 0;
  background: #f5f5f5; /* Gray background */
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 3rem;
  margin-top: 2rem;
}

.summary-card {
  padding: 2.5rem;
  border: 2px solid #e9ecef;
  border-radius: 16px;
  transition: all 0.3s ease;
  text-align: left;
  background: white; /* White card background on gray section */
}

.summary-card:hover {
  border-color: #06c; /* Blue border on hover */
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 102, 204, 0.1);
}

.summary-card h2 {
  color: #000; /* Black title */
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.summary-card p {
  color: #000; /* Black text */
  line-height: 1.7;
  margin-bottom: 2rem;
}

.btn-outline {
  background: transparent;
  color: var(--aethron-cta); /* Orange text for outline button */
  border: 2px solid var(--aethron-cta); /* Orange border */
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: var(--aethron-cta-hover); /* Orange background on hover */
  color: white; /* White text on hover */
  text-decoration: none;
  transform: translateY(-2px);
}

/* Footer */
.site-footer {
  background: linear-gradient(135deg, var(--aethron-gray-dark) 0%, var(--aethron-black) 100%);
  color: var(--aethron-white);
  padding: 60px 0 30px;
  position: relative;
}

.site-footer:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--aethron-blue) 0%, var(--aethron-orange) 100%);
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

/* Footer Brand Section */
.footer-brand {
  max-width: 350px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.footer-logo-image {
  height: 48px;
  width: auto;
}

.footer-brand-text h3 {
  color: var(--aethron-white);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.footer-tagline {
  color: var(--aethron-orange);
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0.5rem 0 0 0;
  line-height: 1.3;
}

.footer-description {
  color: #ccc;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Footer Section Headings */
.footer-section h4 {
  color: var(--aethron-white);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--aethron-orange);
  display: inline-block;
}

/* Footer Links */
.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links-list li {
  margin-bottom: 0.75rem;
}

.footer-links-list a {
  color: #ccc;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  position: relative;
  padding-left: 0;
}

.footer-links-list a:before {
  content: '→';
  color: var(--aethron-orange);
  margin-right: 0.5rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.footer-links-list a:hover {
  color: var(--aethron-white);
  padding-left: 1rem;
}

.footer-links-list a:hover:before {
  opacity: 1;
  transform: translateX(0);
}

/* Footer Contact Info */
.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.95rem;
  white-space: nowrap;
}

.contact-icon {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.footer-contact-item a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.footer-contact-item a:hover {
  color: var(--aethron-orange);
}

.footer-contact-item span:not(.contact-icon) {
  color: #ccc;
}

/* Footer Language Switcher */
.footer-language-switcher {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-lang-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ccc;
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.footer-lang-link:hover {
  color: var(--aethron-white);
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--aethron-orange);
}

.footer-lang-link.active {
  /* WEBAETH-182: oranje link-TEKST op wit haalt maar 2,94:1 (#f60). --aethron-cta
     (#B34700) geeft 5,50:1 op wit — WCAG AA. #f60 blijft voor niet-tekstuele accenten. */
  color: var(--aethron-cta);
  background-color: var(--aethron-white);
  border-color: var(--aethron-white);
  font-weight: 600;
}

.lang-flag {
  font-size: 1.1rem;
}

/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid #444;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-bottom-left p {
  color: #aaa;
  font-size: 0.9rem;
  margin: 0;
}

.footer-legal-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.footer-legal-links a {
  color: #aaa;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
  position: relative;
}

.footer-legal-links a:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--aethron-orange);
  transition: width 0.3s ease;
}

.footer-legal-links a:hover {
  color: var(--aethron-white);
}

.footer-legal-links a:hover:after {
  width: 100%;
}

/* Privacy Policy Page Styles */
.privacy-page {
  padding: 60px 0;
  background-color: var(--aethron-white);
}

.page-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 3px solid var(--aethron-orange);
}

.page-header h1 {
  color: var(--aethron-blue);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-subtitle {
  color: var(--aethron-gray-medium);
  font-size: 1rem;
  margin: 0;
}

.privacy-content {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

.privacy-section {
  margin-bottom: 3rem;
}

.privacy-section h2 {
  color: var(--aethron-blue);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--aethron-gray);
}

.privacy-section h3 {
  color: var(--aethron-gray-dark);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1.5rem 0 1rem 0;
}

.privacy-section p {
  color: var(--aethron-gray-dark);
  margin-bottom: 1rem;
}

.privacy-section ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.privacy-section li {
  color: var(--aethron-gray-dark);
  margin-bottom: 0.5rem;
}

.privacy-section li strong {
  color: var(--aethron-blue);
}

.privacy-section a {
  color: var(--aethron-orange);
  text-decoration: none;
  transition: color 0.3s ease;
}

.privacy-section a:hover {
  color: var(--aethron-orange-dark);
  text-decoration: underline;
}

.contact-info {
  background-color: var(--aethron-gray);
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid var(--aethron-orange);
  margin: 1rem 0;
}

.contact-info p {
  margin: 0;
  color: var(--aethron-gray-dark);
}

.contact-info strong {
  color: var(--aethron-blue);
}

/* Responsive Design for Privacy Pages */
@media (max-width: 768px) {
  .privacy-page {
    padding: 40px 0;
  }
  
  .page-header h1 {
    font-size: 2rem;
  }
  
  .privacy-content {
    padding: 0 1rem;
  }
  
  .privacy-section h2 {
    font-size: 1.3rem;
  }
  
  .contact-info {
    padding: 1rem;
  }
}

/* Responsive Footer Design */
@media (max-width: 1024px) {
  .footer-content {
    grid-template-columns: 2fr 1.2fr 1fr;
    gap: 2.5rem;
  }
  
  .footer-section:last-child {
    grid-column: 1 / -1;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding: 50px 0 25px;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }
  
  .footer-brand {
    max-width: none;
  }
  
  .footer-logo {
    justify-content: center;
  }
  
  .footer-section h4 {
    text-align: center;
  }
  
  .footer-language-switcher {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .footer-legal-links {
    justify-content: center;
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .footer-content {
    gap: 2rem;
  }
  
  .footer-legal-links {
    flex-direction: column;
    gap: 1rem;
  }
  
  .footer-language-switcher {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.2rem;
  }
  
  .hero-description {
    font-size: 1.1rem;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .summary-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .service-card,
  .summary-card {
    padding: 2rem;
  }
  
  .services-overview,
  .about-summary {
    padding: 50px 0;
  }
}

/* i18n.css */
/* I18n and Language Specific Styles */

/* Language Switcher Styles */
.language-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.language-switcher label {
  font-size: 0.9rem;
  font-weight: 500;
}

.language-switcher select {
  padding: 0.25rem 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  font-size: 0.9rem;
}

.language-switcher select:focus {
  outline: none;
  border-color: var(--aethron-sky);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.1);
}

/* Language Demo Section */
.language-demo {
  background: #f8fafc;
  padding: 2rem 0;
  border-top: 1px solid #e2e8f0;
  margin-top: 2rem;
}

.language-demo h3 {
  margin-bottom: 1rem;
  color: #334155;
}

.language-demo .language-switcher {
  gap: 1rem;
}

.lang-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  text-decoration: none;
  color: #64748b;
  transition: all 0.2s ease;
}

.lang-link:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.lang-link.active {
  background: var(--aethron-sky);
  border-color: var(--aethron-sky);
  color: white;
}

/* Navigation Language Switcher */
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  text-decoration: none;
  color: #334155;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-menu a:hover {
  color: var(--aethron-sky);
}

/* Footer Language Links */
.footer-lang-link {
  display: block;
  margin-bottom: 0.5rem;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-lang-link:hover {
  color: #cbd5e1;
}

.footer-lang-link.active {
  color: var(--aethron-sky);
  font-weight: 500;
}

.footer-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.footer-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: #cbd5e1;
}

/* Language-specific body classes */
.lang-nl {
  /* Dutch-specific styles */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', "Roboto", sans-serif;
}

.lang-en {
  /* English-specific styles */  
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', "Roboto", sans-serif;
}

/* RTL Support (for future languages) */
[dir="rtl"] .nav-container {
  direction: rtl;
}

[dir="rtl"] .language-switcher {
  margin-left: 0;
  margin-right: auto;
}

/* Responsive Language Switcher */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .language-switcher {
    margin-left: 0;
  }
  
  .nav-menu {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Test Notice Styling */
.test-notice {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', "Roboto", sans-serif;
  line-height: 1.5;
}

.test-notice strong {
  color: #0c4a6e;
}

/* Basic Layout Styles for Demo */
.hero, .about, .services, .why-choose, .contact-cta {
  padding: 3rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.hero-content, .cta-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero-actions, .cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--aethron-sky);
  color: white;
  border: 1px solid var(--aethron-sky);
}

.btn-primary:hover {
  background: #0284c7;
  border-color: #0284c7;
}

.btn-secondary {
  background: transparent;
  color: var(--aethron-sky);
  border: 1px solid var(--aethron-sky);
}

.btn-secondary:hover {
  background: var(--aethron-sky);
  color: white;
}

.services-grid, .reasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.service-card, .reason-card {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.values-list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.values-list li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.values-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--aethron-sky);
  font-weight: bold;
}

.contact-info {
  margin: 2rem 0;
  text-align: left;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* WEBS-31: Enhanced I18n Styles for Locale-Sensitive Content Rendering */

/* Language Direction Support */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

/* Locale-specific typography adjustments */
html[lang="nl"] {
  /* Dutch-specific font preferences */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', "Roboto", 'Helvetica Neue', "Arial", sans-serif;
}

html[lang="en"] {
  /* English-specific font preferences */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
}

/* Content adaptation for different languages */
.i18n-content {
  /* Ensure proper text wrapping for different languages */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Dutch language adjustments */
html[lang="nl"] .i18n-content {
  /* Dutch typically needs slightly more line height */
  line-height: 1.65;
}

/* English language adjustments */
html[lang="en"] .i18n-content {
  line-height: 1.6;
}

/* Responsive text sizing based on language */
@media (max-width: 768px) {
  html[lang="nl"] h1 {
    /* Dutch words can be longer, adjust sizing */
    font-size: 2.2rem;
  }
  
  html[lang="en"] h1 {
    font-size: 2.5rem;
  }
}

/* Currency and number formatting display */
.i18n-currency,
.i18n-number {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Date formatting display */
.i18n-date {
  white-space: nowrap;
}

/* Loading states for dynamic content */
.i18n-loading {
  opacity: 0.6;
  pointer-events: none;
}

.i18n-loading:after {
  content: "...";
  animation: i18n-dots 1.5s infinite;
}

@keyframes i18n-dots {
  0%, 20% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Error states for missing translations */
.i18n-error {
  /* WEBAETH-182: #dc2626 op #fef2f2 haalt 4,41:1 — net onder AA. #b91c1c geeft 5,91:1. */
  color: #b91c1c;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  font-family: 'Monaco', 'Consolas', monospace;
}

.i18n-error:before {
  content: "⚠️ ";
}

/* Enhanced language switcher for WEBS-31 */
.nav-menu .language-switcher .lang-flag {
  margin-right: 0.5rem;
}

[dir="rtl"] .nav-menu .language-switcher .lang-flag {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* Locale-aware content spacing */
.hero[lang="nl"] h1 {
  /* Dutch headlines may need more breathing room */
  margin-bottom: 1.5rem;
}

.hero[lang="en"] h1 {
  margin-bottom: 1.25rem;
}

/* navigation.css */
/* Enhanced Navigation Styles - Full white background with blue letters */

/* Navigation Container */
.main-navigation {
  background: #fff; /* Full white background */
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
}

/* Logo/Brand */
.nav-brand {
  flex-shrink: 0;
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #06c; /* Blue color for company logo */
  transition: color 0.2s ease;
  gap: 0.75rem; /* Space between logo image and text */
}

.nav-logo:hover {
  color: var(--aethron-cta); /* Orange on hover */
}

/* Logo Image */
.logo-image {
  height: 40px;
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.nav-logo:hover .logo-image {
  transform: scale(1.05);
}

/* Logo Text Container */
.logo-text-container {
  display: flex;
  flex-direction: column;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.logo-tagline {
  font-size: 0.75rem;
  font-weight: 400;
  color: #06c; /* Blue color for tagline */
  margin-top: -2px;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.mobile-menu-toggle:hover {
  background-color: #f0f8ff; /* Light blue background on hover */
}

.mobile-menu-toggle:hover .hamburger-line {
  background-color: #f60; /* Orange hamburger lines on hover */
}

.mobile-menu-toggle:focus {
  outline: 2px solid var(--aethron-cta); /* CTA-oranje focus outline — WEBAETH-177, 5,50:1 op wit */
  outline-offset: 2px;
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background-color: #06c; /* Blue color matching navigation links */
  transition: all 0.3s ease;
  margin: 2px 0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Navigation Menu */
.nav-menu-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.5rem;
  align-items: center;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #06c; /* Blue letters on white background */
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
  position: relative;
}

.nav-link:hover {
  color: var(--aethron-cta); /* Orange letters on hover */
  background-color: #fff; /* Keep white background */
}

.nav-link:focus {
  outline: 2px solid var(--aethron-cta); /* CTA-oranje focus outline — WEBAETH-177, 5,50:1 op wit */
  outline-offset: 2px;
}

.nav-link.active {
  color: var(--aethron-cta); /* Orange for active state */
  background-color: #fff;
}

.nav-link.active:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background-color: #f60; /* Orange underline for active */
  border-radius: 1px;
}

/* Language Switcher */
.language-switcher {
  position: relative;
  z-index: 100;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  transition: all 0.2s ease;
  min-width: 120px;
}

.lang-toggle:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.lang-toggle:focus {
  outline: 2px solid var(--aethron-sky);
  outline-offset: 2px;
}

.lang-toggle.loading {
  opacity: 0.6;
  pointer-events: none;
}

.lang-flag {
  font-size: 1rem;
}

.lang-current {
  flex: 1;
  text-align: left;
}

.lang-arrow {
  transition: transform 0.2s ease;
  color: #94a3b8;
}

.lang-toggle[aria-expanded="true"] .lang-arrow {
  transform: rotate(180deg);
}

/* Language Dropdown */
.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  list-style: none;
  margin-left: 0;
  padding: 0.5rem 0;
}

.lang-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #475569;
  font-size: 0.875rem;
  transition: background-color 0.2s ease;
  border-radius: 0;
}

.lang-option:hover {
  background-color: #f8fafc;
  color: #334155;
}

.lang-option:focus {
  background-color: #f0f9ff;
  color: var(--aethron-sky);
  outline: none;
}

.lang-option.active {
  background-color: #eff6ff;
  color: var(--aethron-sky);
  font-weight: 600;
}

.lang-option .lang-flag {
  font-size: 1rem;
}

.lang-option .lang-name {
  flex: 1;
}

.lang-check {
  color: var(--aethron-sky);
  width: 16px;
  height: 16px;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }

  /* Mobile logo adjustments */
  .logo-image {
    height: 35px; /* Slightly smaller on mobile */
  }

  .nav-logo {
    gap: 0.5rem; /* Reduce gap on mobile */
  }

  .logo-text {
    font-size: 1.25rem; /* Slightly smaller text on mobile */
  }

  .logo-tagline {
    font-size: 0.7rem; /* Smaller tagline on mobile */
  }

  .nav-menu-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999; /* Ensure mobile menu appears above content */
  }

  .nav-menu-wrapper.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-menu {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .nav-menu li {
    width: 100%;
  }

  .nav-link {
    padding: 1rem;
    border-radius: 0;
    border-bottom: 1px solid #f1f5f9;
  }

  .nav-link.active:after {
    display: none;
  }

  .language-switcher {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
  }

  .lang-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .lang-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid #e2e8f0;
    border-radius: 0;
    margin-top: 0.5rem;
    padding: 0;
  }

  .lang-dropdown.open {
    transform: none;
  }

  .lang-option {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f8fafc;
  }

  /* Prevent body scroll when mobile menu is open */
  body.nav-open {
    overflow: hidden;
  }
}

/* Tablet Styles */
@media (max-width: 1024px) and (min-width: 769px) {
  .nav-container {
    padding: 0 2rem;
  }
  
  .nav-menu {
    gap: 1rem;
  }
  
  .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
}

/* Large Screen Enhancements */
@media (min-width: 1200px) {
  .nav-container {
    padding: 0;
  }
  
  .nav-menu {
    gap: 2rem;
  }
  
  .nav-link {
    padding: 0.75rem 1.25rem;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .main-navigation {
    border-bottom-width: 2px;
  }
  
  .nav-link:focus,
  .lang-toggle:focus {
    outline-width: 3px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .nav-link,
  .lang-toggle,
  .lang-dropdown,
  .hamburger-line {
    transition: none;
  }
}

/* Print Styles */
@media print {
  .main-navigation {
    display: none;
  }
}

/* about.css */
/* About page specific styles */

.hero-secondary {
  background: linear-gradient(135deg, var(--aethron-blue) 0%, var(--aethron-blue-dark) 100%);
  color: var(--aethron-white);
  padding: 80px 0;
  text-align: center;
  position: relative;
}

.hero-secondary:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--aethron-orange) 0%, var(--aethron-orange-light) 100%);
}

.hero-secondary h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--aethron-white);
}

.hero-secondary .hero-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
  color: var(--aethron-gray-light);
}

.about-content {
  /* Mobile: Reduced padding */
  padding: 40px 0;
  background-color: var(--aethron-gray-light);
}

/* Tablet and up: More spacious */
@media (min-width: 48rem) {
  .about-content {
    padding: 60px 0;
  }
}

/* Desktop: Full spacing */
@media (min-width: 62rem) {
  .about-content {
    padding: 80px 0;
  }
}

.content-wrapper {
  display: grid;

  /* Mobile: Single column layout */
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

/* Tablet and up: Two column layout */
@media (min-width: 48rem) {
  .content-wrapper {
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
  }
}

/* Desktop: Full spacing */
@media (min-width: 62rem) {
  .content-wrapper {
    gap: 4rem;
  }
}

.main-content {
  background: var(--aethron-white);

  /* Mobile: Reduced padding */
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-top: 4px solid var(--aethron-orange);
}

/* Tablet and up: More padding */
@media (min-width: 48rem) {
  .main-content {
    padding: 2.5rem;
  }
}

/* Desktop: Full padding */
@media (min-width: 62rem) {
  .main-content {
    padding: 3rem;
  }
}

.main-content .lead {
  /* Mobile: Smaller lead text */
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--aethron-blue);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--aethron-gray);
}

/* Tablet and up: Larger lead text */
@media (min-width: 48rem) {
  .main-content .lead {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
  }
}

.main-content p {
  /* Mobile: Readable text size */
  font-size: 1rem;
  line-height: 1.6;
  color: var(--aethron-gray-dark);
  margin-bottom: 1.25rem;
}

/* Tablet and up: Slightly larger text */
@media (min-width: 48rem) {
  .main-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
  }
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Tablet and up: More spacing */
@media (min-width: 48rem) {
  .sidebar {
    gap: 2rem;
  }
}

.highlight-box,
.cta-box {
  background: var(--aethron-white);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-top: 4px solid var(--aethron-orange);
}

.highlight-box h3,
.cta-box h3 {
  color: var(--aethron-blue);
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.approach-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.approach-list li {
  padding: 0.75rem 0;
  font-size: 1.1rem;
  color: var(--aethron-gray-dark);
  border-bottom: 1px solid var(--aethron-gray);
  transition: color 0.2s ease;
}

.approach-list li:last-child {
  border-bottom: none;
}

.approach-list li:hover {
  /* WEBAETH-178: oranje-op-wit als tekst faalt WCAG AA (2,94:1). Hover-states
     staan niet in Lighthouse-rapporten, dus proactief naar de toegankelijke
     CTA-hover-tint (#993D00, 6,95:1 op wit). */
  color: var(--aethron-cta-hover);
}

.cta-box {
  background: linear-gradient(135deg, var(--aethron-orange) 0%, var(--aethron-orange-dark) 100%);
  color: var(--aethron-white);
  text-align: center;
}

.cta-box h3 {
  color: var(--aethron-white);
  margin-bottom: 1rem;
}

.cta-box p {
  color: rgba(255,255,255,0.9);
  margin-bottom: 1.5rem;
}

.cta-box .btn-primary {
  background: var(--aethron-white);

  /* WEBAETH-178: oranje tekst op witte knop haalt maar 2,93:1. --aethron-cta
     (#B34700) geeft 5,50:1 op wit — WCAG AA. */
  color: var(--aethron-cta);
  border: 2px solid var(--aethron-white);
  font-weight: 600;
  padding: 12px 24px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  border-radius: 6px;
}

.cta-box .btn-primary:hover {
  background: transparent;
  color: var(--aethron-white);
  border-color: var(--aethron-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Responsive design */
@media (max-width: 992px) {
  .content-wrapper {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .main-content {
    padding: 2rem;
  }
  
  .hero-secondary h1 {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .about-content {
    padding: 40px 0;
  }
  
  .main-content {
    padding: 1.5rem;
  }
  
  .highlight-box,
  .cta-box {
    padding: 1.5rem;
  }
  
  .hero-secondary {
    padding: 40px 0;
  }
  
  .hero-secondary h1 {
    font-size: 1.8rem;
  }
  
  .hero-secondary .hero-subtitle {
    font-size: 1.1rem;
  }
}

/* solutions.css */
/* WEBS-34: Solutions page Mobile First responsive styles */

.solutions-intro {
  /* Mobile: Reduced padding */
  padding: 40px 0;
  background: linear-gradient(135deg, var(--aethron-gray-light) 0%, var(--aethron-gray) 100%);
}

/* Tablet and up: More spacious */
@media (min-width: 48rem) {
  .solutions-intro {
    padding: 50px 0;
  }
}

/* Desktop: Full spacing */
@media (min-width: 62rem) {
  .solutions-intro {
    padding: 60px 0;
  }
}

.intro-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;

  /* Mobile: Side padding */
  padding: 0 1rem;
}

.intro-content .lead {
  /* Mobile: Smaller lead text */
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--aethron-blue);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* Tablet and up: Larger lead text */
@media (min-width: 48rem) {
  .intro-content .lead {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
  }
}

.intro-content .intro-subtitle {
  /* Mobile: Readable subtitle */
  font-size: 1rem;
  color: var(--aethron-gray-medium);
  line-height: 1.6;
  font-style: italic;
}

/* Tablet and up: Slightly larger subtitle */
@media (min-width: 48rem) {
  .intro-content .intro-subtitle {
    font-size: 1.1rem;
  }
}

.solutions-grid {
  /* Mobile: Reduced padding */
  padding: 40px 0;
  background: var(--aethron-white);
}

/* Tablet and up: More spacious */
@media (min-width: 48rem) {
  .solutions-grid {
    padding: 60px 0;
  }
}

/* Desktop: Full spacing */
@media (min-width: 62rem) {
  .solutions-grid {
    padding: 80px 0;
  }
}

.solutions-wrapper {
  display: grid;

  /* Mobile: Single column */
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}

/* Small tablet: Try 2 columns if space allows */
@media (min-width: 30rem) {
  .solutions-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Tablet and up: More sophisticated grid */
@media (min-width: 48rem) {
  .solutions-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
  }
}

/* Desktop: Full spacing */
@media (min-width: 62rem) {
  .solutions-wrapper {
    gap: 3rem;
  }
}

.solution-card {
  background: var(--aethron-white);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  overflow: hidden;
  border: 1px solid var(--aethron-gray);
  border-top: 4px solid var(--aethron-orange);
}

.solution-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.18);
}

.solution-header {
  background: linear-gradient(135deg, var(--aethron-blue) 0%, var(--aethron-blue-dark) 100%);
  color: var(--aethron-white);
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  position: relative;
}

.solution-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
  color: var(--aethron-orange);
}

.solution-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  color: var(--aethron-white);
}

.solution-content {
  padding: 2.5rem 2rem;
}

.solution-content p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--aethron-gray-dark);
  margin-bottom: 2rem;
}

.solution-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
}

.solution-benefits li {
  padding: 0.75rem 0;
  padding-left: 2rem;
  position: relative;
  color: var(--aethron-blue);
  font-weight: 500;
  border-bottom: 1px solid var(--aethron-gray);
  transition: color 0.2s ease;
}

.solution-benefits li:last-child {
  border-bottom: none;
}

.solution-benefits li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--aethron-orange);
  font-weight: bold;
  font-size: 1.1rem;
}

.solution-benefits li:hover {
  color: var(--aethron-orange);
}

/* .solutions-cta en .klantel-cta delen dezelfde opmaak: de regels hieronder
   (.cta-content h2/p in wit, .cta-buttons .btn-secondary transparant met witte rand)
   zijn ongescoped en gaan uit van een donkere achtergrond. .klantel-cta had die
   achtergrond nooit, waardoor de hele afsluitende CTA op /klantel/ en /nl/klantel/
   wit-op-wit stond (1,05:1) en onleesbaar was. Zie WEBAETH-164. */
.solutions-cta,
.klantel-cta {
  background: linear-gradient(135deg, var(--aethron-blue) 0%, var(--aethron-blue-dark) 100%);
  color: var(--aethron-white);
  padding: 80px 0;
  text-align: center;
}

.cta-content h2 {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--aethron-white);
}

.cta-content p {
  font-size: 1.2rem;
  margin-bottom: 2.5rem;
  opacity: 0.9;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: var(--aethron-white);
}

.cta-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-buttons .btn {
  padding: 15px 30px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.cta-buttons .btn-primary {
  background: var(--aethron-cta);
  color: var(--aethron-white);
  border: 2px solid var(--aethron-cta);
}

.cta-buttons .btn-primary:hover {
  background: var(--aethron-cta-hover);
  border-color: var(--aethron-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(179, 71, 0, 0.3); /* volgt --aethron-cta */
}

.cta-buttons .btn-secondary {
  background: transparent;
  color: var(--aethron-white);
  border: 2px solid var(--aethron-white);
}

.cta-buttons .btn-secondary:hover {
  background: var(--aethron-white);
  color: var(--aethron-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255,255,255,0.2);
}

/* Responsive design */
@media (max-width: 992px) {
  .solutions-wrapper {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .solution-card {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .solutions-intro {
    padding: 40px 0;
  }
  
  .solutions-grid {
    padding: 60px 0;
  }
  
  .solutions-cta,
  .klantel-cta {
    padding: 60px 0;
  }
  
  .intro-content .lead {
    font-size: 1.2rem;
  }
  
  .solution-header {
    padding: 2rem 1.5rem 1.5rem;
  }
  
  .solution-content {
    padding: 2rem 1.5rem;
  }
  
  .solution-header h2 {
    font-size: 1.3rem;
  }
  
  .cta-content h2 {
    font-size: 1.8rem;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-buttons .btn {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .hero-secondary .hero-subtitle {
    font-size: 1rem;
  }
  
  .solution-icon {
    font-size: 2.5rem;
  }
  
  .solutions-wrapper {
    gap: 1.5rem;
  }
}

/* contact.css */
/* WEBS-34: Contact page Mobile First responsive styles */

.contact-content {
  /* Mobile: Reduced padding */
  padding: 40px 0;
  background-color: var(--aethron-gray-light);
}

/* Tablet and up: More spacious */
@media (min-width: 48rem) {
  .contact-content {
    padding: 60px 0;
  }
}

/* Desktop: Full spacing */
@media (min-width: 62rem) {
  .contact-content {
    padding: 80px 0;
  }
}

.contact-content .container {
  display: flex;
  justify-content: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Tablet and up: Centered container with max-width */
@media (min-width: 48rem) {
  .contact-content .container {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .contact-grid {
    grid-template-columns: 450px 450px;
    gap: 6rem;
    width: auto;
    margin: 0 auto;
  }
}

/* Mobile: Single column layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

/* Tablet and up: Two column layout */
@media (min-width: 48rem) {
  .contact-grid {
    grid-template-columns: 450px 450px;
    gap: 6rem;
    width: auto;
    margin: 0 auto;
  }

  .contact-info {
    margin-left: 0;
    min-width: 450px !important;
    max-width: 450px !important;
    width: 450px !important;
  }

  .form-sidebar {
    margin-right: 0;
    width: 450px;
  }
}

/* Desktop: Full spacing */
@media (min-width: 62rem) {
  .contact-content .container {
    max-width: 1100px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .contact-grid {
    gap: 8rem;
  }
}

/* Contact Info Section */
.contact-info {
  background: var(--aethron-white);
  width: 450px !important;

  /* Mobile: Reduced padding */
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-top: 4px solid var(--aethron-orange);
}

/* Tablet and up: More padding */
@media (min-width: 48rem) {
  .contact-info {
    padding: 2.5rem;
  }
}

/* Desktop: Full padding */
@media (min-width: 62rem) {
  .contact-info {
    padding: 3rem;
  }
}

.contact-info > *:first-child {
  margin-top: 0 !important;
}

.contact-info,
.form-container {
  margin-top: 0;
  margin-bottom: 0;
}

.contact-info .lead {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--aethron-blue);
  line-height: 1.6;
  margin-bottom: 2rem;
  margin-top: 0;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--aethron-gray);
}

.contact-methods {
  margin-bottom: 2rem;
}

.contact-method {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--aethron-gray-light);
  border-radius: 12px;
  transition: all 0.3s ease;
  border-left: 4px solid var(--aethron-orange);
}

.contact-method:hover {
  background: var(--aethron-gray);
  transform: translateY(-2px);
}

.contact-icon {
  font-size: 2rem;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--aethron-orange) 0%, var(--aethron-orange-dark) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--aethron-white);
}

.contact-details h3 {
  color: var(--aethron-blue);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.contact-details p {
  /* WEBAETH-178: --aethron-gray-medium (#6c757d) haalt op de #f8f9fa-kaart maar
     4,44:1 — net onder WCAG AA. #666 geeft 5,45:1 op #f8f9fa. Lokale override,
     want de globale token blijft elders (op wit) wél conform. */
  color: #666;
  margin: 0;
  line-height: 1.5;
  font-size: 16px !important;
}

.contact-details a {
  /* WEBAETH-178: oranje link op de #f8f9fa-kaart haalt maar 2,78:1.
     --aethron-cta (#B34700) geeft 5,22:1 op #f8f9fa — WCAG AA. */
  color: var(--aethron-cta);
  text-decoration: none;
  font-weight: 500;
}

.contact-details a:hover {
  /* WEBAETH-178: hover-tint mee verdonkeren; --aethron-cta-hover (#993D00)
     geeft 6,59:1 op #f8f9fa. */
  color: var(--aethron-cta-hover);
  text-decoration: underline;
}

.response-time {
  padding: 2rem;
  background: linear-gradient(135deg, var(--aethron-orange) 0%, var(--aethron-orange-dark) 100%);
  border-radius: 12px;
  color: var(--aethron-white);
  text-align: center;
  border: 2px solid var(--aethron-orange-light);
}

.response-time h3 {
  color: var(--aethron-white);
  margin-bottom: 1rem;
  font-weight: 600;
}

.response-time p {
  margin: 0;
  opacity: 1;
  font-weight: 500;
  font-size: 1rem;
}

/* Contact Form Section */
.form-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Tablet and up: More spacing */
@media (min-width: 48rem) {
  .form-sidebar {
    gap: 2rem;
  }
}

.form-container {
  background: var(--aethron-white);

  /* Mobile: Reduced padding */
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-top: 4px solid var(--aethron-orange);
}

/* Tablet and up: More padding */
@media (min-width: 48rem) {
  .form-container {
    padding: 2.5rem;
  }
}

/* Desktop: Full padding */
@media (min-width: 62rem) {
  .form-container {
    padding: 3rem;
  }
}

.form-container > *:first-child {
  margin-top: 0 !important;
}

.contact-form {
  display: flex;
  flex-direction: column;

  /* Mobile: More spacing between form fields */
  gap: 1.75rem;
}

@media (min-width: 48rem) {
  .contact-form {
    gap: 1.5rem;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  color: var(--aethron-blue);
  margin-bottom: 0.75rem;

  /* Mobile: Slightly larger labels for better readability */
  font-size: 1.125rem;
}

@media (min-width: 48rem) {
  .form-group label {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
}

.form-group input,
.form-group select,
.form-group textarea {
  /* Mobile: Larger padding for better touch targets */
  padding: 1.25rem;

  /* Mobile: Minimum touch target height */
  min-height: 44px;
  border: 2px solid var(--aethron-gray);
  border-radius: 8px;

  /* Mobile: Prevent zoom on iOS */
  font-size: 16px;
  font-family: inherit;
  transition: all 0.3s ease;
  background-color: var(--aethron-white);
}

/* Tablet and up: Standard styling */
@media (min-width: 48rem) {
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 1rem;
    font-size: 1rem;
  }
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  /* WEBAETH-182: de focus-indicator (border) moet WCAG 1.4.11 (≥3:1) halen. #f60 gaf
     2,94:1 op de witte invoervelden — een faal. --aethron-cta (#B34700) haalt 5,50:1. */
  outline: none;
  border-color: var(--aethron-cta);
  box-shadow: 0 0 0 3px rgba(179, 71, 0, 0.15);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.checkbox-group {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--aethron-gray-dark);
}

.checkbox-label input[type="checkbox"] {
  margin: 0;
  width: auto;
  accent-color: var(--aethron-orange);
}

.checkbox-label a {
  /* WEBAETH-178: oranje link op wit haalt maar 2,93:1. --aethron-cta (#B34700)
     geeft 5,50:1 op wit — WCAG AA. */
  color: var(--aethron-cta);
  text-decoration: none;
}

.checkbox-label a:hover {
  /* WEBAETH-178: hover-tint expliciet naar --aethron-cta-hover (#993D00,
     6,95:1 op wit) — hover-states staan niet in Lighthouse-rapporten. */
  color: var(--aethron-cta-hover);
  text-decoration: underline;
}

.btn-large {
  padding: 1.25rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  width: 100%;
  background: linear-gradient(135deg, var(--aethron-orange) 0%, var(--aethron-orange-dark) 100%);
  border: none;
  border-radius: 8px;
  color: var(--aethron-white);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.btn-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 102, 0, 0.3);
  background: linear-gradient(135deg, var(--aethron-orange-dark) 0%, var(--aethron-orange) 100%);
}

/* 404 Page Styles */
.not-found-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aethron-gray-light);
}

.not-found-content {
  text-align: center;
  background: var(--aethron-white);
  padding: 3rem 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.not-found-title {
  font-size: 6rem;
  font-weight: 800;
  color: var(--aethron-orange);
  margin-bottom: 1rem;
}

.not-found-message {
  font-size: 1.5rem;
  color: var(--aethron-blue);
  margin-bottom: 2rem;
}