/* Critical CSS for above-the-fold content */
    body {
      margin: 0;
      font-family: system-ui, -apple-system, sans-serif;
      -webkit-font-smoothing: antialiased;
      color: #1f2937;
    }

    /* Prevent font loading from causing layout shifts */
    * {
      font-display: swap;
    }

    /* Hero section critical styles */
    #hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      overflow: visible;
      padding: 2rem 0;
    }

    @media (max-width: 767px) {
      #hero {
        min-height: auto;
        padding: 3rem 0;
      }
    }

    #hero .absolute {
      position: absolute;
    }

    #hero .inset-0 {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    /* Reserve space for hero content to prevent CLS */
    #hero .container {
      min-height: 350px;
    }

    /* Logo animation */
    .animate-fade-in {
      animation: fadeIn 1.2s ease-in-out;
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
        transform: translateY(-20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Ensure hero text doesn't cause shifts */
    #hero h1 {
      font-size: 1.5rem;
      line-height: 1.2;
      margin-bottom: 1rem;
      font-weight: 700;
    }

    @media (min-width: 768px) {
      #hero h1 {
        font-size: 3rem;
        line-height: 1.2;
        margin-bottom: 1.5rem;
      }
    }

    #hero p {
      font-size: 1.125rem;
      line-height: 1.6rem;
      margin-bottom: 1.5rem;
    }

    @media (min-width: 768px) {
      #hero p {
        font-size: 1.5rem;
        line-height: 2rem;
        margin-bottom: 2.5rem;
      }
    }

    #hero .container > div {
      font-size: 0.875rem;
      line-height: 1.4;
      margin-bottom: 0.5rem;
    }

    @media (min-width: 768px) {
      #hero .container > div {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 0.75rem;
      }
    }

    /* Navigation critical styles */
    nav {
      position: sticky;
      top: 0;
      background-color: white;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      z-index: 50;
    }

    /* Fix voor select dropdowns - donkere tekst op witte achtergrond */
    select option {
      background-color: white;
      color: #1f2937;
    }

    /* Fix voor date inputs */
    input[type="date"] {
      color-scheme: light;
      background-color: white;
      color: #1f2937;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(0);
    }

    /* Checkbox styling - geef checked state een andere achtergrond */
    input[type="checkbox"]:checked+span,
    input[type="radio"]:checked~span:first-of-type {
      display: none;
    }

    label:has(input[type="checkbox"]:checked),
    label:has(input[type="radio"]:checked) {
      background-color: rgba(59, 130, 246, 0.4) !important;
      border: 2px solid rgba(59, 130, 246, 0.8);
    }

    /* Prevent layout shift for images */
    img {
      max-width: 100%;
      height: auto;
    }

    /* Reserve space for infographic image to prevent CLS */
    .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      aspect-ratio: 811 / 489;
    }

    /* Add spacing between paragraphs */
    p {
      margin-bottom: 1rem;
    }

    p:last-child {
      margin-bottom: 0;
    }

    /* FAQ answer alignment */
    .faq-answer-content {
      padding: 1rem;
    }