* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
}

body {
  background-color: white;
}

/* --- Header / Navbar --- */
.main-header {
    background-color: #ffffff; /* White background */
    padding: 1rem 0; /* Vertical padding */
    border-bottom: 1px solid #e2e8f0; /* Subtle border like slate-200 */
    position: sticky; /* Make header stick to top */
    top: 0;
    width: 100%;
    z-index: 1000; /* Ensure it's above other content */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Optional subtle shadow */
}

.header-content {
    max-width: 1500px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Uses existing .container class for width constraints */
}

.logo {
    font-size: 1.75em; /* Slightly larger logo text */
    font-weight: bold;
    color: #1a2b48; /* Dark blue */
    text-decoration: none;
}

.logo img{
    width: 20px;
    margin-right: 6px;
}

.logo .text-gradient { /* Ensure gradient applies if used in logo */
    display: inline; /* Keep span inline */
}

/* --- Navigatie Basis (Bestaand) --- */
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.main-nav li { /* Voeg position relative toe voor dropdowns */
    position: relative;
}

.main-nav a {
    text-decoration: none;
    color: #4a5568;
    font-weight: 500;
    font-size: 1em;
    transition: color 0.2s ease;
    padding: 0.5rem 0; /* Voeg wat padding toe voor betere hover area */
    display: inline-block; /* Nodig voor padding */
}

.main-nav a:hover,
.main-nav a.active {
    color: #00b3f0;
}

/* --- Dropdown Specifieke Styling --- */

/* De parent list item */
.has-dropdown {
    position: relative; /* Maakt dit het referentiepunt voor het absolute menu */
}

/* De trigger link/span (stijl als een gewone link) */
.dropdown-toggle {
    /* Inherit styling van .main-nav a */
    cursor: default; /* Maak duidelijk dat het geen directe link is (als href="#") */
}
.dropdown-toggle .dropdown-icon {
    font-size: 0.7em; /* Maak icoon iets kleiner */
    margin-left: 0.4em;
    transition: transform 0.2s ease;
    display: inline-block; /* Zodat transform werkt */
}

/* Het dropdown menu zelf (standaard verborgen) */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 0.75rem 0;
    margin-top: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    min-width: 220px;
    list-style: none; /* Belangrijk: geen bolletjes */
    display: block !important; /* Zorg dat de UL zelf een block is */

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, visibility 0s linear 0.2s, transform 0.2s ease;
}

/* Toon het menu bij hover op de parent li */
.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, visibility 0s linear 0s, transform 0.2s ease;
}

/* Roteer pijltje bij hover */
.has-dropdown:hover .dropdown-toggle .dropdown-icon {
    transform: rotate(180deg);
}

/* Styling van de list items BINNEN het dropdown menu */
.dropdown-menu li {
    display: block; /* BELANGRIJK: Forceer list items onder elkaar */
    width: 100%;    /* Zorg dat ze de volledige breedte nemen */
}

/* Styling van de links binnen het dropdown menu */
.dropdown-menu li a {
    display: block; /* Maakt de hele breedte van de LI klikbaar */
    padding: 0.6rem 1.5rem;
    color: #4a5568;
    font-weight: 400;
    font-size: 0.95em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-menu li a:hover {
    background-color: #f8f9fa;
    color: #00b3f0;
}

.mobile-only-cta {
    display: none; /* Verberg mobiele CTA knop standaard op desktop */
}

/* --- Hamburger Knop Styling (standaard verborgen) --- */
.hamburger-button {
    display: none; /* Verberg standaard op desktop */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1001; /* Boven navigatie als die open is */
    /* Grootte en positie worden in media query bepaald */
}
.hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333; /* Kleur van de lijnen */
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-radius: 3px;
}

/* --- Media Query voor Mobiel --- */
@media (max-width: 992px) { /* Kies je breekpunt (bv. 992px of 768px) */

    .main-nav {
        display: none; /* Verberg navigatie standaard op mobiel */
        position: absolute;
        top: 100%; /* Direct onder de header */
        left: 0;
        right: 0;
        background-color: white;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        border-top: 1px solid #e2e8f0;
        padding: 1rem 0;
        /* Voor animatie (optioneel, met JS .active class) */
        /* transform: translateY(-110%); */
        /* transition: transform 0.4s ease-in-out; */
    }

    .main-nav.active { /* Klasse toegevoegd door JS */
        display: block; /* Toon de navigatie */
         /* Voor animatie */
        /* transform: translateY(0); */
    }

    .main-nav ul {
        flex-direction: column; /* Stapel items verticaal */
        align-items: center; /* Centreer items */
        gap: 0; /* Geen gap, padding regelt ruimte */
    }

    .main-nav li {
        width: 100%;
        text-align: center;
    }

    .main-nav a {
        display: block; /* Maak hele breedte klikbaar */
        padding: 1rem 1.5rem; /* Ruime padding */
        width: 100%;
        border-bottom: 1px solid #f0f0f0; /* Lijn tussen items */
    }

    /* Dropdown op mobiel: Simpel onder elkaar */
    .has-dropdown > .dropdown-toggle::after { /* Verberg pijltje op mobiel? */
       /* content: none; */
    }
     .has-dropdown > .dropdown-toggle .dropdown-icon {
        /* Optioneel: verberg of pas pijltje aan */
        display: none; 
    }

    .dropdown-menu {
        position: static; /* Reset absolute positionering */
        display: block; /* Standaard zichtbaar als sub-items */
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background-color: transparent; /* Geen aparte achtergrond */
        padding: 0;
        margin: 0;
        min-width: auto;
        border-top: 1px solid #f0f0f0; /* Lijn boven sub-items */
    }
     .dropdown-menu li a {
        font-size: 0.9em; /* Iets kleiner */
        color: #555; /* Iets lichter */
        background-color: #fdfdfd; /* Heel lichte achtergrond voor onderscheid */
    }
     .dropdown-menu li a:hover {
        background-color: #f0f0f0;
    }

    .header-cta.desktop-only {
        display: none; /* Verberg desktop CTA */
    }

    .mobile-only-cta {
        display: block; /* Toon de mobiele CTA binnen de nav */
        padding: 1.5rem 0; /* Extra ruimte rond CTA */
         border-bottom: none; /* Geen lijn eronder */
    }
     .mobile-only-cta .button {
        display: inline-block; /* Zorg dat het werkt als knop */
        width: auto; /* Niet volledige breedte */
        padding: 12px 24px; /* Kleinere padding evt. */
        background-color: var(--primary-color); /* Primaire kleur */
        color: white;
        border: none;
    }
      .mobile-only-cta .button:hover {
        background-color: var(--primary-hover);
        opacity: 1;
    }

    .hamburger-button {
        display: block; /* Toon hamburger knop */
        /* Positionering: zorg dat het niet overlapt met logo */
        margin-left: 1rem; /* Ruimte tov vorige element */
    }

    /* Hamburger animatie (wanneer menu open is) */
    .hamburger-button.active .hamburger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger-button.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    .hamburger-button.active .hamburger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

.hero {
  max-width: 1500px;
  position: relative;
  background: url("https://cdn.glitch.global/2f1edacd-95f7-4b04-8866-19ec07a0e5eb/hero.jpg?v=1744969303970")
    center/cover no-repeat;
  border-radius: 24px;
  margin: 100px auto 50px auto;
  display: flex;
  align-items: flex-end;
  padding: 64px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.hero-image-content {
  max-width: 80%;
  color: white;
  z-index: 1;
}

.hero h6 {
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.8;
  letter-spacing: 1px;
}

h1 {
  max-width: 80%;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -2px;
  margin-bottom: 24px;
}

.hero p {
  line-height: 1.6;
  margin-bottom: 48px;
  max-width: 75%;
}

.blue-diamond-text {
  background-image: linear-gradient(90deg, #0099ff, #00aaff, cyan, #0099ff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientFlow 8s ease-in-out infinite;
}

@keyframes gradientFlow {
  0%,
  100% {
    background-position: 0% center;
  }
  50% {
    background-position: 200% center;
  }
}

.button-container {
  display: flex;
  gap: 12px;
}

.button {
  display: inline-block;
  background-color: white;
  color: #333;
  padding: 16px 24px;
  border-radius: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.2s;
}

.button i {
  margin-right: 10px;
}

.button-secundair {
  background: transparent;
  color: white;
  border: 1px solid white;
  backdrop-filter: blur(5px);
}

.button:hover {
  opacity: 0.8;
}

.logo-slider {
  max-width: 1500px;
  margin: 0px auto;
}

.logo-track {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.logo-track img {
  width: 100px;
  opacity: 50%;
  filter: saturate(0) brightness(0);
  transition: .2s;
}

.logo-track img:hover {
  opacity: 100%;
  filter: saturate(1) brightness(1);
}

.features-section {
    max-width: 1500px;
    margin: 100px auto 50px auto; /* Jouw margins */
}

.features-container {
    display: flex;
    /* align-items: stretch; is standaard, maar expliciet zetten kan helpen */
    align-items: stretch;
    gap: 24px; /* Ruimte tussen de feature-lijst en de afbeelding */
}

.features-list {
    padding: 64px; /* Jouw padding */
    border-radius: 24px; /* Jouw border-radius */
    flex: 2; /* Pas aan indien nodig (bv. 2) */
    display: flex;
    flex-direction: column;
    gap: 6px; /* Ruimte tussen de feature cards */
    background-color: #f8f9fa;
    /* Zorg dat de lijst inhoud heeft om hoogte te creëren */
}

.feature-card {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid #e0e0e0; /* Subtiele rand */
    display: flex;
    align-items: center; /* Centreer icoon en tekst verticaal */
    gap: 24px; /* Ruimte tussen icoon en tekst */
}

.icon-placeholder {
    flex-shrink: 0; /* Voorkom dat het icoon krimpt */
    width: 50px;
    height: 50px;
    background-color: #0099ff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.icon-placeholder img{
    height: 60%;
    filter: invert(1);
}

.feature-content {
    flex: 1; /* Laat tekst de resterende ruimte innemen */
}

.feature-title {
    margin: 0 0 0.3rem 0; /* Ruimte onder de titel */
    font-size: 1.15rem;
    color: #333;
}

.feature-description {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
}

.feature-image {
    flex: 1; /* Pas aan indien nodig */
    position: relative;   /* BELANGRIJK: Positioneringscontext voor img */
    min-height: 0;        /* BELANGRIJK: Voorkom dat inhoud grootte forceert */
    overflow: hidden;       /* BELANGRIJK: Verberg wat buiten de grenzen valt */
    border-radius: 24px;     /* Jouw afronding */
}

/* --- Aangepaste afbeelding --- */
.feature-image img {
    position: absolute;   /* BELANGRIJK: Positioneer t.o.v. .feature-image */
    top: 0;
    left: 0;
    width: 100%;        /* Vul de container breedte */
    height: 100%;       /* Vul de container hoogte */
    object-fit: cover;  /* Behoud aspect ratio, vul, snijd bij */
    display: block;     /* Goede gewoonte voor afbeeldingen */
}



.solutions-section {
  max-width: 1500px;
  margin: 100px auto 100px auto;
  padding: 20px 0;
}

.solutions-text {
  font-size: 2.5rem;
  line-height: 1.2em;
  margin-bottom: 48px;
  max-width: 650px;
  font-weight: 500;
  color: #333;
}

/* Container voor de kaarten */
.cards-container {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Styling voor elke kaart */
.card {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  flex: 1 1 30%;
  max-width: calc(33.333% - 16px);

  padding: 8px;
  display: flex;
  flex-direction: column;\
  align-items: center;
  overflow: hidden;
  transition: .2s;
}

.card:hover{
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.card img{
  transition: .2s;
}

.card:hover img{
  filter: brightness(1.1);
}

.card-image {
  width: 100%;
  height: 250px;
  border-radius: 16px 16px 24px 24px;
  object-fit: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Tekstcontainer */
.text-content {
  padding: 18px;
  margin-top: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.text-content h6{
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  opacity: 0.8;
}

.text-content h3{
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.5em;
  margin-bottom: 12px;
}

.text-content p{
  font-weight: 300;
  line-height: 1.5em;
  opacity: 0.8;
  margin-bottom: 24px;
}

.card-button {
  display: inline-block;
  background-color: white;
  border: 1px solid black;
  font-size: 0.85em;
  color: #333;
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
  transition: 0.2s;
}

.card-button:hover {
  animation: gradientFlowButton 1s ease; /* Voegt de animatie toe */
  animation-fill-mode: forwards;
  background: linear-gradient(125deg, #0099ff, black); /* Donkerblauw, Donkerpaars, Zwart */
  background-size: 300% 100%;
  color: white;
  border: 1px solid transparent;
}

@keyframes gradientFlowButton {
  0% { background-position: 100% center; }
  100% { background-position: 20% center; }
}

/* --- AI Stats Sectie --- */
.ai-stats-section {
  max-width: 1500px;
  margin: 100px auto 100px auto;
  padding: 64px; /* Ruime padding */
  background-color: #f8f9fa; /* Lichte achtergrond voor focus */
  border-radius: 24px;
  text-align: center; /* Centreer de titel en intro */
}

.ai-stats-section h2 {
  font-size: 2.5rem; /* Stijl zoals partner-text */
  line-height: 1.2em;
  margin-bottom: 16px;
  font-weight: 500;
  color: #333;
}

.ai-stats-section .stats-intro{
  max-width: 700px; /* Beperk breedte voor leesbaarheid */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  color: #555;
  margin-bottom: 48px; /* Ruimte onder intro */
  font-weight: 300;
}

.ai-stats-section{
    margin-bottom: 0; /* Geen marge onder conclusie */
    margin-top: 48px; /* Ruimte boven conclusie */
    font-size: 0.95rem;
}

.stats-grid {
  display: grid;
  /* Maak 2 kolommen op desktop, 1 op mobiel */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; /* Ruimte tussen de grid items */
  text-align: left; /* Reset text-align voor items */
}

.stat-item {
  background-color: white;
  padding: 24px;
  border-radius: 16px; /* Iets minder rond dan sectie */
  border: 1px solid #e0e0e0; /* Subtiele rand */
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.stat-number {
  font-size: 3.5rem; /* Groot en opvallend */
  font-weight: 600; /* Bold */
  background-image: linear-gradient(90deg, #0099ff, #00aaff, #0066cc, #0099ff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientFlow 10s linear infinite;
  animation-direction: alternate;
  line-height: 1.1;
  margin-bottom: 12px;
}

.stat-description {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  flex-grow: 1; /* Zorgt dat beschrijving ruimte vult, bron blijft onderaan */
  margin-bottom: 16px;
}

.stat-source {
  font-size: 0.8rem;
  color: #777;
  opacity: 0.8;
  margin-top: auto; /* Duwt de bron naar de onderkant */
}

@media (max-width: 768px) {
    
}

/* --- Responsiviteit (Belangrijk: Reset hoogte voor gestapelde layout) --- */
@media (max-width: 1550px) {
  .header-content{
  margin: 0 2vw;
  }
  
  .hero {
  margin: 100px 2vw 50px 2vw;
}
  .hero-image-content {
    max-width: 100%;
  }
  
  .logo-slider {
    margin: 0 2vw;
  }
  
  .features-section {
    margin: 100px 2vw 50px 2vw;
  }
  
  .ai-stats-section {
    margin: 100px 2vw 100px 2vw;
  }
  
  .solutions-section {
    margin: 100px 2vw 100px 2vw;
  }
  
}

@media (max-width: 900px) {
    .features-container {
        flex-direction: column; /* Stapel lijst en afbeelding onder elkaar */
        gap: 2.5rem; /* Ruimte tussen lijst en afbeelding */
    }

    .features-list {
       flex: none; /* Reset flex-grow */
       width: 100%; /* Neem volledige breedte */
    }

    .feature-image {
        flex: none; /* Reset flex-grow */
        width: 100%; /* Volledige breedte of bijv. 80% en margin auto */
        max-width: 500px; /* Optioneel: maximale breedte voor de afbeelding op mobiel */
        margin: 0 auto; /* Centreer als width < 100% */
        order: -1; /* Optioneel: plaats afbeelding bovenaan op mobiel */
        height: auto; /* !! Belangrijk: Reset de hoogte, laat aspect ratio bepalen */
        overflow: hidden; /* Reset overflow indien nodig */
    }

     .feature-image img {
         position: static;   /* Reset position: absolute */
         height: 500px; /* !! BELANGRIJK: Reset hoogte naar auto */\
         width: 100%; /* Zorg dat afbeelding container vult */
         object-fit: cover; 
         border-radius: 24px;
     }
  
  h1{
    font-size: 3rem;
  }
  
  .hero{
    padding: 32px;
  }
  
  .hero p{
    max-width: 100%;
  }
  
  .hero .button-container{
    justify-content: start;
  }
    .logo-slider {
        margin: 30px auto; /* Minder verticale marge */
        padding: 0 16px;
    }
    .logo-track {
        flex-wrap: wrap;       /* BELANGRIJK: Laat logo's wrappen */
        justify-content: center; /* Centreer de gewrapte logo's */
        gap: 50px       /* Rij-gap (40px), Kolom-gap (30px) */
    }
  
  .ai-stats-section h2 {
        font-size: 2rem;
    }
  
  .card {
         flex-basis: 45%; /* Basis voor 2 kaarten naast elkaar */
         max-width: calc(50% - 12px); /* Max. helft van breedte minus halve gap */
    }
}

@media (max-width: 600px) {

  
    .features-section {
        /* Minder margin op kleine schermen */
        margin: 50px 20px 30px 20px;
    }
     .features-list {
         padding: 32px; /* Minder padding */
     }
    .feature-card {
        padding: 1rem;
        gap: 0.8rem;
    }
     .icon-placeholder {
        width: 40px;
        height: 40px;
    }
    .feature-title {
        font-size: 1.05rem;
    }
    .feature-description {
        font-size: 0.9rem;
    }
  
  .ai-stats-section {
        padding: 32px;
    }
    .stat-number {
        font-size: 2.8rem; /* Iets kleiner op mobiel */
    }
    .stats-grid {
      gap: 16px; /* Iets minder gap op mobiel */
    }
  
  .cards-container {
        flex-direction: column; /* Stapel de kaarten verticaal */
        align-items: center; /* Centreer de gestapelde kaarten */
        gap: 32px; /* Meer verticale ruimte */
    }
    .card {
        flex-basis: auto; /* Reset flex-basis */
        width: 100%; /* Neem volledige breedte */
        max-width: 500px; /* Maximale breedte voor leesbaarheid */
        /* max-width: calc(100% - 16px); -- Optioneel alternatief */
    }
}

/* CTA Section (Reusable) */
.cta-section {
    position: relative;
    text-align: center;
    padding: 100px 20px; /* Consistent padding */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 250px; /* Minimum height */
}
.cta-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.2;
}
.cta-title {
    font-size: 2.5rem;
    margin-bottom: 48px;
    font-weight: 500;
    color: #333;
    position: relative; /* Ensure it's above background */
}
.cta-description {
    font-size: 1.15em;
    color: #4a5568;
    max-width: 750px;
    margin: 0 auto 40px auto;
    line-height: 1.6;
    position: relative;
}
.cta-button {
    position: relative;
    background: transparent;
    color: black;
    border: 1px solid black;
    backdrop-filter: blur(5px);
}
.cta-button:hover {
    background: black;
    color: white;
}

/* --- Footer Sectie --- */
.main-footer {
  background-color: #f8f9fa; /* Lichte grijze achtergrond, consistent met features */
  padding: 4rem 0 0 0; /* Ruime padding bovenaan, geen onderaan (komt van bottom) */
  margin-top: 50px; /* Ruimte boven de footer */
  border-top: 1px solid #e0e0e0; /* Subtiele lijn boven de footer */
  color: #555; /* Standaard tekstkleur voor de footer */
}

.footer-container {
  max-width: 1500px; /* Matcht de andere secties */
  margin: 0 auto;
  padding: 0 64px; /* Horizontale padding, matcht hero/features */
  display: flex;
  flex-wrap: wrap; /* Laat kolommen wrappen op kleinere schermen */
  justify-content: space-between;
  gap: 2rem; /* Ruimte tussen de kolommen */
}

.footer-column {
  flex: 1; /* Geef kolommen flexibiliteit */
  min-width: 200px; /* Minimale breedte voor kolommen */
  margin-bottom: 2rem; /* Ruimte onder elke kolom bij wrappen */
}

/* Kolom 1: Over ons / Logo */
.footer-about .footer-logo {
  font-size: 1.75em; /* Matcht header logo */
  font-weight: bold;
  color: #1a2b48;
  text-decoration: none;
  display: inline-block; /* Om margin bottom toe te passen */
  margin-bottom: 1rem;
}
.footer-about .footer-logo .text-gradient{
    /* Styling komt van .logo */
    display: inline;
}

.footer-description {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #555;
}

.social-links a {
  color: #555;
  font-size: 1.3rem; /* Iets grotere iconen */
  text-decoration: none;
  margin-right: 1rem;
  transition: color 0.2s ease;
}

.social-links a:hover {
  color: #0099ff; /* Gebruik de accentkleur bij hover */
}

/* Kolom 2 & 3: Links */
.footer-column h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1.2rem;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 0.75rem;
}

.footer-column ul li a {
  color: #555;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.footer-column ul li a:hover {
  color: #0099ff; /* Accentkleur bij hover */
}

/* Kolom 4: Contact */
.footer-contact p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.footer-contact p a {
    color: #555;
    text-decoration: none;
}
.footer-contact p a:hover {
    color: #0099ff;
}

.footer-contact-button {
    padding: 10px 18px; /* Iets kleinere knop */
    font-size: 0.9rem;
    background-color: #0099ff; /* Primaire kleur */
    color: white;
    border: none;
    border-radius: 8px; /* Iets minder rond */
}
.footer-contact-button:hover {
    background-color: #007acc; /* Iets donkerder bij hover */
    opacity: 1; /* Reset eventuele algemene button opacity */
}


/* Footer Bottom: Copyright */
.footer-bottom {
  border-top: 1px solid #e0e0e0; /* Lijn boven copyright */
  margin-top: 2rem; /* Ruimte boven de copyright lijn */
  padding: 1.5rem 64px; /* Verticale en horizontale padding */
  text-align: center;
  font-size: 0.85rem;
  color: #777;
}

/* --- Responsiviteit voor Footer --- */
@media (max-width: 900px) {
  .footer-container {
    padding: 0 32px; /* Minder padding op tablet */
    /* Flexbox met wrap zorgt al voor stapelen */
  }
  .footer-bottom {
    padding: 1.5rem 32px;
  }
}

@media (max-width: 768px) {
    .footer-column {
        min-width: 45%; /* Laat 2 kolommen naast elkaar passen */
        flex-basis: 45%;
    }
    .footer-about {
      flex-basis: 100%; /* Eerste kolom volledige breedte */
      min-width: 100%;
      text-align: center; /* Centreer logo en tekst */
    }
    .social-links {
        justify-content: center; /* Centreer social icons */
        margin-bottom: 2rem;
    }
    .social-links a:last-child {
      margin-right: 0;
    }
}


@media (max-width: 600px) {
  .footer-container {
    padding: 0 20px; /* Nog minder padding op mobiel */
    flex-direction: column; /* Forceer alles onder elkaar */
    text-align: center; /* Centreer tekst in kolommen */
    align-items: center;
  }
  .footer-column {
    min-width: 100%; /* Elke kolom volledige breedte */
    flex-basis: auto;
    align-items: center; /* Centreer inhoud binnen kolom */
  }
    .footer-column ul {
        display: inline-block; /* Zorgt dat lijst centreren respecteert */
        text-align: center;
    }
  .footer-bottom {
    padding: 1rem 20px;
  }
  .social-links {
      justify-content: center; /* Zorg dat ze gecentreerd blijven */
  }
  .footer-contact-button {
      margin: 0 auto; /* Centreer de knop */
  }
}

/* --- About Us Page Specific Styles --- */
.light-bg {
    background-color: #f8f9fa; /* Same as features list bg */
}

/* Common heading styles for About page */
.about-page-content h1 {
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -2px;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.about-page-content h2 {
    font-size: 2.5rem;
    font-weight: 500;
    color: #1a2b48; /* Dark Blue */
    margin-bottom: 1rem;
    line-height: 1.2;
}

.about-page-content h3 {
    font-size: 1.8rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.8rem;
}

.about-page-content h6 {
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.8;
  letter-spacing: 1px;
}

.about-page-content p {
    color: #555;
    line-height: 1.7;
    font-size: 1rem;
}

.about-icon-placeholder {
    display: inline-flex; /* Use inline-flex */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #e6f5ff; /* Light blue background */
    color: #0099ff; /* Primary blue icon */
    border-radius: 50%;
    margin-bottom: 1.5rem;
    font-size: 1.2rem; /* Size of the icon */
}


/* --- Intro Section --- */
.about-intro-section .container{
    display: flex;
}

.container {
    max-width: 1500px;
    margin: 100px auto;
}

.intro-content {
    flex: 1.5;
    background-color: #f8f9fa;
    padding: 64px;
    border-radius: 24px;
}

.intro-image-container {
    flex: 1;
    margin-left: 24px;
}

.intro-image-container img {
    width: 100%;
    height: auto;
    border-radius: 24px;
    display: block;
}

/* --- Mission & Vision Container (BINNEN .intro-content) --- */
.mission-vision-container {
    display: flex;
    gap: 12px; /* Ruimte TUSSEN mission en vision kolom */
    margin-top: 48px; /* Ruimte boven de missie/visie blokken */
    margin-bottom: 0px;
}

.mission-column,
.vision-column {
    flex: 1; /* Verdeel de ruimte gelijk */
    background-color: #ffffff; /* Witte kaarten */
    padding: 32px;
    border-radius: 16px;
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

.title-icon-wrapper {
    display: flex;
    gap: 16px;
}

/* --- Story Section --- */
.story-container {
    display: flex;
    align-items: center;
    gap: 64px;
}

.story-content {
    flex: 1.2; /* Give text slightly more space */
}

.story-image-container {
    flex: 0.8;
    text-align: center; /* Center image if container is wider */
}

.story-image-container img {
    max-width: 100%; /* Ensure image fits */
    height: auto;
    border-radius: 16px;
}

.story-milestones {
    margin-top: 2rem;
    display: flex;
    gap: 2rem;
}

.milestone {
    text-align: center;
}

.milestone-year,
.milestone-number {
    display: block;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    background-image: linear-gradient(90deg, #0099ff, #00aaff, #0066cc, #0099ff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientFlow 10s linear infinite;
  animation-direction: alternate;
}

.milestone-text {
    display: block;
    font-size: 0.9rem;
    color: #555;
    margin-top: 0.5rem;
}

/* --- Team Section --- */
.about-team-section h2,
.about-team-section h6,
.about-team-section .team-intro {
    text-align: center;
}

.about-team-section{
    padding: 1px 0;
}

.team-intro {
    max-width: 700px;
    margin: 0 auto 3rem auto;
}

.team-grid {
    display: grid;
    /* Pas minmax aan voor gewenste grootte/aantal kolommen */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 24px;
    margin-top: 2rem;
}

/* ... (Vorige CSS voor .team-grid, .team-member-card, .team-member-img, .info-button blijft grotendeels) ... */

.team-member-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background-color: #f0f0f0;
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 1 / 1; /* BELANGRIJK: Forceert een vierkante kaart */
}

.team-member-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zal nu correct de vierkante kaart vullen */
    transition: 1s;
}

/* --- Info Knop --- */
.info-button {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 30;
    background-color: rgba(255,255,255,0.5);
    backdrop-filter: blur(5px);
    color: #333;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    /* Transition voor ALLE wijzigingen, inclusief background */
    transition: .3s;
}

.info-button:hover {
    /* Hover blijft alleen voor de NIET-expanded state */
    background-color: rgba(255,255,255,0.8);
}

/* Roteer plus & verwijder achtergrond bij expanded */
.team-member-card.expanded .info-button {
    transform: rotate(45deg);
    background-color: transparent; /* BELANGRIJK: Geen achtergrond */
    backdrop-filter: none;       /* BELANGRIJK: Verwijder blur */
    color: #555; /* Eventueel andere kleur voor icoon als contrast nodig is */
    border-radius: 50px;
}

/* Optioneel: Aangepaste hover voor de knop als de kaart expanded is */
.team-member-card.expanded .info-button:hover {
    background-color: rgba(255, 255, 255); /* Zeer subtiele hover zonder blur */
    color: #000;
}


/* --- Overlay Container (en de rest) blijft zoals voorheen --- */
.member-info-overlay {
    /* ... bestaande stijlen ... */
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    top: auto; /* Explicitly set top to auto initially */
    /* Hoogte wordt bepaald door content + padding */

    background-color: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    /* Transition voor de verandering */
    transition: all 0.4s cubic-bezier(0, 0, 0, 1); /* Smooth transition */
    overflow: hidden; /* Verberg interne overflow tijdens transitie */
    z-index: 20; /* Onder de info knop */
     display: flex; /* Alleen nodig voor basis align */
     flex-direction: column; /* Stapel text-details en verborgen content */
     align-items: flex-start;
}

/* --- Standaard Verborgen Content --- */
.member-bio,
.member-social,
.close-button {
    opacity: 0;
    max-height: 0; /* Belangrijk voor transitie */
    overflow: hidden;
    transition: opacity 0.3s ease 0.1s, max-height 0.4s ease; /* Delay opacity */
    visibility: hidden; /* Ensure it's not accessible */
}

.close-button {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: #888;
    font-size: 1.2rem;
    padding: 5px;
    cursor: pointer;
    z-index: 25;
    transition: 0.3s;
}

.close-button:hover {
    color: #333;
}


/* === EXPANDED STATE === */

.team-member-card.expanded .member-info-overlay {
    top: 0;    /* Vul de hele kaart */
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px; /* Geen radius meer nodig, kaart heeft het al */
    padding: 32px; /* Meer padding */
    padding-top: 80px; /* Ruimte voor knop/titel bovenaan */
    background-color: rgba(255, 255, 255, 0.95); /* Iets transparant evt. */
    backdrop-filter: blur(10px); /* Sterkere blur */
    align-items: flex-start; /* Lijn alles links uit */
    overflow-y: auto; /* Scrollen als content te lang is */
}

.team-member-card.expanded .text-details {
    /* Verplaatst naar boven - geen absolute pos nodig, flex regelt het */
    margin-bottom: 24px; /* Ruimte onder naam/titel */
    transition: transform 0.3s ease; /* Animatie voor verplaatsing */
}

.team-member-card.expanded .team-member-img {
    transform: scale(1.1);
}

.team-member-card.expanded .member-bio,
.team-member-card.expanded .member-social {
    opacity: 1;
    max-height: 500px; /* Ruime max hoogte */
    visibility: visible;
}

.team-member-card.expanded .member-bio {
    margin-bottom: 24px; /* Ruimte onder bio */
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
}

.team-member-card.expanded .member-social a {
    color: #555;
    font-size: 1.4rem;
    text-decoration: none;
    margin-right: 12px;
    transition: color 0.2s ease;
}
.team-member-card.expanded .member-social a:hover {
    color: #0099ff; /* Accentkleur */
}

/* Optioneel: Toon sluitknop alleen in expanded state */
.team-member-card.expanded .close-button {
    opacity: 1;
    visibility: visible;
}


/* --- Text Styling (blijft zoals het was) --- */
.text-details {
     width: 100%; /* Zorg dat het de breedte inneemt */
}
.team-member-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333; /* Donkerder in expanded? */
    margin: 0;
    line-height: 1.3;
}
.team-member-title {
    font-size: 1rem;
    font-weight: 400; /* Iets minder zwaar */
    color: #0099ff; /* Kleur behouden of aanpassen */
    line-height: 1.3;
    margin: 0; /* Reset margin */
    margin-top: 4px; /* Kleine ruimte boven title */
}

/* --- Responsiviteit (Kan nodig zijn voor padding/fonts in expanded state) --- */
@media (max-width: 768px) {
    .team-member-card.expanded .member-info-overlay {
        padding: 24px;
        padding-top: 70px;
    }
    .team-member-card.expanded .text-details { margin-bottom: 16px; }
    .team-member-card.expanded .member-bio { margin-bottom: 16px; font-size: 0.9rem;}
    .team-member-card.expanded .member-social a { font-size: 1.3rem; }
}

/* --- Core Values Section --- */
.about-values-section h2,
.about-values-section h6 {
     text-align: center;
     margin-left: auto;
     margin-right: auto;
     max-width: 700px;
}

.about-values-section h2 {
    margin-bottom: 3rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.value-item {
    display: flex;
    align-items: flex-start; /* Align icon top */
    gap: 20px;
    background-color: #f8f9fa; /* Light background for item */
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #e0e0e0;
}

.value-icon {
    flex-shrink: 0; /* Prevent icon shrinking */
     /* Inherits size/style from .about-icon-placeholder */
    margin-bottom: 0; /* Remove bottom margin */
}

.value-content {
    flex: 1;
}

.value-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 0.5rem 0;
}

.value-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 0;
}

.cta-section h2{
    margin-bottom: 48px;
}


/* --- Responsiveness for About Page --- */
@media (max-width: 900px) {
    .section-padding {
        padding: 60px 0;
    }
    .about-page-content h1 {
        font-size: 3rem;
    }
    .about-page-content h2 {
        font-size: 2.2rem;
    }
    .about-page-content h3 {
        font-size: 1.6rem;
    }
  
    .intro-content {
      padding: 32px;
  }

    /* Stack columns */
    .about-intro-section .container,
    .mission-vision-container,
    .story-container {
        flex-direction: column;
        gap: 32px;
    }

    .intro-image-container {
        max-width: 100%; /* Allow image to take full width */
        order: -1; /* Move image above text on mobile */
        margin-bottom: 2rem;
    }

    .story-image-container {
         order: -1; /* Move image above text */
         margin-bottom: 2rem;
         max-width: 400px; /* Limit size */
         margin-left: auto;
         margin-right: auto;
    }
     .values-grid {
        grid-template-columns: 1fr; /* Stack values */
    }
}

@media (max-width: 600px) {
    .section-padding {
        padding: 40px 0;
    }
    .container {
        padding: 0 16px;
    }
     .about-page-content h2 {
        font-size: 1.8rem;
    }
    .about-page-content h3 {
        font-size: 1.4rem;
    }
     .about-page-content p {
        font-size: 0.95rem;
    }

    .about-icon-placeholder {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .story-milestones {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }

    .value-item {
        flex-direction: column; /* Stack icon above text */
        text-align: center;
        align-items: center;
    }
    .value-icon {
        margin-bottom: 1rem;
    }

     /* Adjust CTA layout for mobile */
    .about-page-content .cta-section .button-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 350px; /* Limit button width */
    }
     .about-page-content .cta-section .button {
        text-align: center;
        padding: 14px 20px; /* Adjust padding */
        margin: 0; /* Reset margins if any */
    }

}

.section-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #1a2b48; /* Donkerblauw */
    margin-bottom: 1rem;
    line-height: 1.2;
}

.section-intro {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: #555;
    line-height: 1.6;
    font-size: 1.05rem;
    margin-bottom: 3rem; /* Ruimte onder introductie */
}

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

/* --- Modules Hero Sectie --- */
.modules-hero {
    background-color: #f8f9fa; /* Lichte achtergrond voor hero */
    padding: 100px 0; /* Meer padding voor hero */
}

.modules-hero-content {
    display: flex;
    align-items: center;
    gap: 48px;
}

.hero-text-column {
    flex: 1.2; /* Geef tekst iets meer ruimte */
}

.hero-text-column h6 {
    text-transform: uppercase;
    margin-bottom: 12px;
    opacity: 0.8;
    letter-spacing: 1px;
    color: #555;
}

.hero-text-column h1 {
    font-size: 3.5rem; /* Iets kleiner dan hoofd-hero misschien */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
    color: #1a2b48;
}

.hero-text-column p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 32px;
    color: #555;
    max-width: 90%;
}

.hero-visual-column {
    flex: 0.8;
    text-align: center;
}

.hero-visual-column img {
    max-width: 100%;
    height: auto;
    border-radius: 24px;
}

/* --- Voordelen Sectie --- */
.section-padding{
    padding: 64px 0;
}

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

.benefit-item {
    background-color: #ffffff;
    padding: 32px;
    border-radius: 16px;
    border: 1px solid #e0e0e0;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.benefit-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #e6f5ff; /* Lichtblauw */
    color: #0099ff; /* Primair blauw */
    border-radius: 50%;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.benefit-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.benefit-item p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}


/* --- Module Overzicht Sectie --- */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* 3 kolommen op desktop */
    gap: 24px;
}

.module-card {
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 16px; /* Iets minder rond dan hoofd secties */
    padding: 32px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: left; /* Reset evt. centrering */
}

.module-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.module-card-icon {
    /* Gebruik vergelijkbare stijl als benefit icon */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #e6f5ff;
    color: #0099ff;
    border-radius: 12px; /* Vierkanter? */
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.module-card-title {
    font-size: 1.4rem; /* Groter dan benefits */
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
}

.module-card-description {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem; /* Ruimte voor benefits */
    flex-grow: 1; /* Duwt knop naar beneden */
}

.module-card-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0; /* Ruimte onder benefits, boven knop */
    font-size: 0.9rem;
    color: #444;
}

.module-card-benefits li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.module-card-benefits li i {
    color: #28a745; /* Groen vinkje */
    font-size: 0.8rem;
}

.module-card .card-button {
     margin-top: auto; /* Zorgt dat knop onderaan blijft */
     align-self: flex-start; /* Lijn knop links uit */
     /* Hergebruikt .card-button stijl van homepage */
}


/* --- Hoe Werkt Het Sectie --- */
.how-it-works-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Lijn items bovenaan uit */
    gap: 16px; /* Ruimte tussen stappen */
    margin-top: 3rem;
    position: relative; /* Voor de lijn */
}

.step-item {
    flex: 1;
    text-align: center;
    position: relative; /* Voor nummer positionering */
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
}

.step-number {
    position: absolute;
    top: -20px; /* Nummer boven de kaart */
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    border: 3px solid white; /* Witte rand om te scheiden van lijn */
    z-index: 2;
}

.step-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-top: 20px; /* Ruimte onder nummer */
    margin-bottom: 0.5rem;
}

.step-item p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

/* Optionele verbindingslijn */
.step-connector {
    flex-grow: 0.1; /* Kleine flex-grow voor de ruimte */
    height: 2px; /* Dikte van de lijn */
    background-color: #e0e0e0; /* Lijnkleur */
    align-self: center; /* Centreer de lijn verticaal */
    margin-top: 20px; /* Align met midden van de kaarten (ongeveer) */
    position: relative;
    z-index: 1; /* Achter de nummers */
     display: block; /* Zorg dat het zichtbaar is */
}


/* --- Technologie Sectie --- */
/* Geen specifieke nieuwe stijlen nodig, hergebruikt .section-title, .section-intro, .logo-slider */
.technology-section .logo-slider img {
    /* Zorg dat ze niet de hover effecten van homepage krijgen indien nodig */
    filter: grayscale(50%) opacity(0.7); /* Voorbeeld: beetje kleur, minder fel */
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.technology-section .logo-slider img:hover {
     filter: grayscale(0%) opacity(1);
}

@media (max-width: 1500px) {
    .modules-hero {
        padding: 100px 2vw;
    }
  
  .section-padding {
    padding: 64px 2vw;
  }
}

/* --- Responsiviteit voor Module Pagina --- */
@media (max-width: 1200px) {
    .modules-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 2 kolommen op tablet */
    }
}

@media (max-width: 992px) {
    .modules-hero-content {
        flex-direction: column;
        text-align: center;
    }
    .hero-text-column h1 {
        font-size: 3rem;
        margin: 24px auto;
    }
     .hero-text-column p {
        max-width: 100%;
    }
    .hero-visual-column {
        margin-top: 2rem;
        max-width: 500px; /* Beperk grootte afbeelding */
    }
    .button-container {
        justify-content: center; /* Centreer knoppen */
    }
     .how-it-works-steps {
        flex-direction: column;
        align-items: center;
        gap: 40px; /* Meer ruimte bij stapelen */
    }
    .step-connector {
        display: none; /* Verberg lijn op mobiel */
    }
    .step-item {
        width: 100%;
        max-width: 400px; /* Beperk breedte stap */
    }
    .step-number {
         top: -25px; /* Iets meer ruimte */
    }
}

@media (max-width: 768px) {
    .section-padding { padding: 60px 0; }
    .section-title { font-size: 2rem; }
    .section-intro { font-size: 1rem; margin-bottom: 2rem;}
    .container { padding-left: 16px; padding-right: 16px; }

    .benefits-grid {
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
     .modules-grid {
        grid-template-columns: 1fr; /* 1 kolom op mobiel */
    }
    .module-card { padding: 24px; }
    .module-card-title { font-size: 1.25rem; }
}


/* --- Maatwerk Hero Sectie --- */
.maatwerk-hero {
    background-color: #f8f9fa;
    padding: 100px 0;
}

.maatwerk-hero-content {
    display: flex;
    align-items: center;
    gap: 48px;
}

/* Hergebruik .hero-text-column, .hero-visual-column, .button-container stijlen */
/* Pas evt. font-size aan als je verschil wilt met module hero */
.maatwerk-hero .hero-text-column h1 {
    font-size: 3.5rem; /* Of houd consistent */
}
.maatwerk-hero .hero-visual-column img {
    /* Dezelfde styling als module hero image */
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* --- Waarom Maatwerk Sectie --- */
.why-custom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 3+ kolommen */
    gap: 24px;
    margin-top: 3rem;
}

.why-item {
    /* Lijkt op .benefit-item, maar misschien subtiele verschillen? */
    background-color: #ffffff;
    padding: 24px; /* Iets minder padding misschien */
    border-radius: 12px; /* Minder rond? */
    border: 1px solid #e0e0e0;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.why-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.why-icon {
    /* Lijkt op .benefit-icon */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #e6f5ff;
    color: #0099ff;
    border-radius: 10px; /* Vierkanter? */
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.why-title {
    /* Lijkt op .benefit-title */
    font-size: 1.15rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.why-item p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
}

/* --- Ons Maatwerkproces Sectie --- */
/* Hergebruik .how-it-works-section, .how-it-works-steps, .step-item, .step-number, etc. */
/* Geen nieuwe stijlen nodig, alleen content aanpassen */


/* --- Voorbeelden van Maatwerk Sectie --- */
.use-case-grid {
    /* Hergebruik .modules-grid styling */
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 24px;
}

.use-case-card {
    /* Hergebruik .module-card styling */
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
}
.use-case-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.use-case-icon {
     /* Hergebruik .module-card-icon styling */
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 50px;
     height: 50px;
     background-color: #e6f5ff;
     color: #0099ff;
     border-radius: 12px;
     font-size: 1.5rem;
     margin-bottom: 1rem;
}

.use-case-title {
     /* Hergebruik .module-card-title styling */
     font-size: 1.4rem;
     font-weight: 600;
     color: #333;
     margin-bottom: 0.75rem;
}

.use-case-description {
     /* Hergebruik .module-card-description styling */
     font-size: 0.95rem;
     color: #555;
     line-height: 1.6;
     margin-bottom: 1.5rem; /* Ruimte voor tags */
     flex-grow: 1; /* Duwt tags naar beneden */
}

.tag-container {
   /* Geen display: flex nodig hier */
   /* text-align: left; is standaard */
   margin-top: auto; /* Zorgt dat tags onderaan komen als description flex-grow heeft */
}

.use-case-tag {
    /* Nieuwe styling voor tags */
    display: auto;
    background-color: #eef6ff; /* Lichtblauw/grijs achtergrond */
    color: #007acc; /* Donkerder blauw */
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px; /* Pilvormig */
    margin-right: 6px;
    margin-bottom: 6px; /* Voor wrapping */
}

/* --- Technologie Sectie (Hergebruik) --- */
/* Hergebruik .technology-section, .logo-slider stijlen */


/* --- CTA Sectie (Hergebruik) --- */
/* Hergebruik .cta-section stijlen */


/* --- Responsiviteit voor Maatwerk Pagina --- */
@media (max-width: 992px) {
    .maatwerk-hero-content {
        flex-direction: column;
        text-align: center;
    }
     .maatwerk-hero .hero-text-column h1 { font-size: 3rem; }
     .maatwerk-hero .hero-text-column p { max-width: 100%; }
     .maatwerk-hero .hero-visual-column { margin-top: 2rem; max-width: 500px; }
     .maatwerk-hero .button-container { justify-content: center; }

     .why-custom-grid {
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Kleinere items op tablet */
     }
      /* .how-it-works-steps al responsive */
}

@media (max-width: 768px) {
    /* .section-padding, .section-title, .section-intro, .container al responsive */
     .why-custom-grid {
         grid-template-columns: 1fr; /* 1 kolom op mobiel */
     }
     .use-case-grid {
        grid-template-columns: 1fr; /* 1 kolom op mobiel */
    }
     .use-case-card { padding: 24px; }
     .use-case-title { font-size: 1.25rem; }
}

/* --- Advies Hero Sectie --- */
.advies-hero {
    background-color: #f8f9fa; /* Consistent met module hero? Of eigen subtiele kleur */
    padding: 100px 0;
    border-bottom: 1px solid #e0e0e0;
}

.advies-hero-content {
    /* Hergebruik .modules-hero-content of .maatwerk-hero-content */
    display: flex;
    align-items: center;
    gap: 48px;
}

/* Hergebruik .hero-text-column, .hero-visual-column, .button-container stijlen */
.advies-hero .hero-text-column h1 {
    font-size: 3.5rem; /* Consistent */
}
.advies-hero .hero-visual-column img {
    /* Consistent */
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* --- Waarom Advies Sectie --- */
.why-advice-grid {
    /* Hergebruik .benefits-grid styling */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-top: 3rem;
}

.advice-item {
    /* Hergebruik .benefit-item styling */
    background-color: #ffffff;
    padding: 32px;
    border-radius: 16px;
    border: 1px solid #e0e0e0;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.advice-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.advice-icon {
     /* Hergebruik .benefit-icon styling */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #e6f5ff;
    color: #0099ff;
    border-radius: 50%;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.advice-title {
     /* Hergebruik .benefit-title styling */
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.advice-item p {
     /* Hergebruik .benefit-item p styling */
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

/* --- Ons Adviesproces Sectie --- */
/* Hergebruik .how-it-works-section, .how-it-works-steps, etc. */
/* Geen nieuwe stijlen nodig */

/* --- Wat Kunt U Verwachten Sectie --- */
.expectations-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 2 of 3 koloms? */
    gap: 24px;
    margin-top: 3rem;
}

.expectation-item {
    display: flex; /* Icoon naast tekst */
    align-items: flex-start; /* Lijn bovenaan uit */
    gap: 20px;
    background-color: #ffffff;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #e0e0e0;
}

.expectation-icon {
    /* Iets groter/prominenter dan de kleine benefit icons? */
    flex-shrink: 0;
    font-size: 1.8rem; /* Groter icoon */
    color: var(--primary-color); /* Primaire kleur */
    margin-top: 5px; /* Beetje uitlijnen met titel */
    width: 30px; /* Zorgen dat het ruimte inneemt */
    text-align: center;
}

.expectation-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.4rem;
}

.expectation-item p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* --- Technologie Sectie (Optioneel) --- */
/* Hergebruik .technology-section */

/* --- CTA Sectie (Hergebruik) --- */
/* Hergebruik .cta-section */


/* --- Responsiviteit voor Advies Pagina --- */
@media (max-width: 992px) {
    .advies-hero-content {
        flex-direction: column;
        text-align: center;
    }
    .advies-hero .hero-text-column h1 { font-size: 3rem; }
    .advies-hero .hero-text-column p { max-width: 100%; }
    .advies-hero .hero-visual-column { margin-top: 2rem; max-width: 500px; }
    .advies-hero .button-container { justify-content: center; }

    .why-advice-grid {
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     }
     /* How it works al responsive */
      .expectations-list {
         grid-template-columns: 1fr; /* 1 kolom op tablet */
     }
}

@media (max-width: 768px) {
    /* section-padding, titles, intro, container al responsive */
     .why-advice-grid {
         grid-template-columns: 1fr;
     }
     .expectation-item {
         /* Icoon boven tekst op mobiel? */
         /* flex-direction: column; */
         /* text-align: center; */
         /* align-items: center; */
         padding: 20px;
     }
     /* .expectation-icon { margin-bottom: 1rem; } */
}

/* --- Algemeen (Hergebruikt) --- */
/* .section-padding, .light-bg, .container, .section-title, .section-intro, .text-center, .button, etc */

/* --- Contact Hero Sectie --- */
.contact-hero {
    /* Hergebruik .light-bg is prima */
    padding-top: 60px;
    padding-bottom: 60px; /* Iets minder padding dan andere heroes */
}
.contact-hero h6 {
     text-transform: uppercase;
     margin-bottom: 12px;
     opacity: 0.8;
     letter-spacing: 1px;
     color: #555;
}
.contact-hero h1 {
    font-size: 3rem; /* Iets kleiner dan andere H1s */
    margin: 1rem auto;
    color: #1a2b48;
}
/* .contact-hero p.section-intro blijft hetzelfde */


/* --- Contact Main Sectie --- */
.contact-main-container {
    display: flex;
    gap: 48px; /* Ruimte tussen formulier en info */
}

.contact-form-section {
    flex: 1.5; /* Formulier iets meer ruimte */
}

.contact-info-section {
    flex: 1;
}

.contact-form-section h2,
.contact-info-section h2 {
    font-size: 2rem; /* Kleinere H2 voor deze sectie */
    font-weight: 600;
    color: #1a2b48;
    margin-bottom: 1rem;
}

.contact-form-section p,
.contact-info-section p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* --- Form Styling --- */
#contact-form .form-row {
    display: flex;
    gap: 24px; /* Ruimte tussen velden op dezelfde rij */
}

#contact-form .form-group {
    margin-bottom: 1.5rem; /* Ruimte onder elk veld/groep */
}

#contact-form .form-group.half-width {
    flex: 1; /* Zorgt dat ze de ruimte verdelen */
}

#contact-form label {
    display: block;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form select,
#contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-color-medium);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-color: #fff; /* Zorg voor witte achtergrond */
}

#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.15);
}

#contact-form textarea {
    resize: vertical; /* Sta alleen verticaal resizen toe */
    min-height: 120px;
}

/* Select specifiek (voor dropdown pijl) */
#contact-form select {
    appearance: none; /* Verberg standaard pijl */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E"); /* Aangepaste pijl */
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em 1em;
    padding-right: 2.5rem; /* Ruimte voor pijl */
}

#contact-form .submit-button {
    /* Hergebruik .button stijl, voeg evt. breedte toe */
    padding: 16px 32px; /* Maak het een duidelijke submit knop */
    border: 1px solid black;
}

.form-note {
    font-size: 0.8rem;
    color: #777;
    margin-top: 1rem;
}

/* --- Contact Info Styling --- */
.contact-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-details-list li {
    display: flex;
    align-items: flex-start; /* Icoon bovenaan uitlijnen */
    gap: 16px;
    margin-bottom: 1.5rem;
}

.contact-details-list li i {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-top: 5px; /* Beetje uitlijnen */
    width: 25px; /* Vaste breedte voor uitlijning */
    text-align: center;
}

.contact-details-list li strong {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: -10px;
}

.contact-details-list li a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-details-list li a:hover {
    color: var(--primary-hover);
}


/* --- Responsiviteit voor Contact Pagina --- */
@media (max-width: 992px) {
    .contact-main-container {
        flex-direction: column; /* Stapel formulier en info */
        gap: 48px; /* Ruimte tussen gestapelde secties */
    }
    .contact-form-section,
    .contact-info-section {
        flex: none; /* Reset flex basis */
    }
}

@media (max-width: 768px) {
    .contact-hero h1 { font-size: 2.5rem; }
    .contact-form-section h2, .contact-info-section h2 { font-size: 1.8rem; }

     #contact-form .form-row {
        flex-direction: column; /* Stapel naam en email velden */
        gap: 1.5rem; /* Ruimte is nu onder elkaar */
    }
    #contact-form .form-group.half-width {
        flex: none; /* Niet meer nodig */
    }
}

@media (max-width: 600px) {
     .container { padding: 0 16px; } /* Consistent met andere pagina's */
}




/* --- Chatbot Styling --- */

:root {
  /* Overgenomen/aangepast van website stijl */
  --primary-color: #0099ff; /* Primaire blauw van de website */
  --primary-hover: #007acc; /* Iets donkerder blauw voor hover */
  --background-color: #ffffff; /* Algemene achtergrond website */
  --chat-background: #ffffff; /* Achtergrond chat zelf */
  --light-grey-bg: #f8f9fa; /* Lichte grijs voor secties/bot bubble */
  --user-bubble: #e6f5ff; /* Heel lichtblauw voor gebruiker, voor contrast */
  --bot-bubble: var(--light-grey-bg); /* Lichtgrijs voor bot */
  --text-color-dark: #333333; /* Donkergrijs voor titels/belangrijke tekst */
  --text-color-medium: #555555; /* Middengrijs voor normale tekst */
  --border-color: #e0e0e0; /* Subtiele randkleur */
  --border-radius-large: 24px; /* Voor container */
  --border-radius-medium: 16px; /* Voor berichten/kaarten */
  --border-radius-small: 12px; /* Voor knoppen */
  --shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtiele schaduw zoals cards */
  --transition-quick: 0.2s ease-in-out; /* Snellere transitie zoals website */
}

#chatbot-wrapper {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#chatbot-container {
  width: 380px; /* Behoud specifieke chatbot afmetingen */
  height: 600px;
  border-radius: var(--border-radius-large); /* Grotere radius voor container */
  overflow: hidden;
  box-shadow: var(--shadow-subtle); /* Subtielere schaduw */
  display: flex;
  flex-direction: column;
  background-color: var(--chat-background);
  transition: var(--transition-quick);
  transform-origin: bottom right;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

#chatbot-container.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
  /* Behoud de slideIn animatie, maar zorg dat timing klopt */
  animation: slideIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#chat-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-subtle);
  margin-top: 16px;
  transition: var(--transition-quick);
  position: relative;
  z-index: 10000;
}

#chat-toggle:hover {
  background-color: var(--primary-hover);
  transform: translateY(-3px); /* Subtiele lift zoals cards */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Iets meer schaduw bij hover */
}

#chat-toggle:active {
  transform: translateY(0);
}

#chat-toggle svg {
  width: 28px;
  height: 28px;
  /* SVG kleur is al 'currentColor', wat hier wit is */
  transition: var(--transition-quick);
}

#chat-toggle.active .chat-icon {
  display: none;
}

#chat-toggle:not(.active) .close-icon {
  display: none;
}

/* Pulse animatie (optioneel, past niet direct bij site, maar kan blijven) */
#chat-toggle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--primary-color); /* Gebruik primaire kleur */
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
  opacity: 0.3;
  z-index: -1; /* Achter het icoon */
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  80%, 100% {
    transform: scale(1.8);
    opacity: 0;
  }
}


#chat-header {
  background-color: var(--primary-color);
  color: white;
  padding: 16px 24px; /* Consistentere padding */
  text-align: left;
  font-weight: 600; /* Consistent met titels */
  font-size: 1.1rem; /* Iets kleiner dan H4 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Subtiele lijn ipv gradient */
}

/* Verwijder de gradient lijn */
#chat-header::after {
  content: none;
}

#close-topright { /* Behoud de ID voor JS */
  cursor: pointer;
  transition: var(--transition-quick);
  opacity: 0.8;
}

#close-topright:hover {
  opacity: 1;
  transform: scale(1.1);
}

#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

/* Scrollbar styling (kan blijven voor verfijning) */
#chat-messages::-webkit-scrollbar {
  width: 6px; /* Iets dunner */
}
#chat-messages::-webkit-scrollbar-track {
  background: transparent;
}
#chat-messages::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15); /* Iets donkerder */
  border-radius: 10px;
}

.message {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: var(--border-radius-medium); /* Consistent met cards */
  margin-bottom: 5px;
  word-wrap: break-word;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtielere schaduw */
  line-height: 1.5;
  font-size: 0.95rem; /* Consistent met beschrijvingen */
  font-family: "Inter", sans-serif; /* Expliciet font */
  transition: all 0.3s; /* Behoud animatie timing */
  opacity: 0;
  transform: translateY(15px);
  animation: messageIn 0.4s ease forwards;
}

@keyframes messageIn {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-message {
  align-self: flex-end;
  background-color: var(--user-bubble);
  color: var(--text-color-dark); /* Goed contrast met lichtblauw */
  border-bottom-right-radius: 4px; /* Behoud onderscheidend hoekje */
}

.bot-message {
  align-self: flex-start;
  background-color: var(--bot-bubble);
  color: var(--text-color-medium); /* Standaard tekstkleur */
  border-bottom-left-radius: 4px; /* Behoud onderscheidend hoekje */
}

/* Suggestion buttons styles */
.suggestion-container {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 12px;
  max-width: 100%; /* Laat het volledige breedte gebruiken indien nodig */
  animation: messageIn 0.4s ease forwards; /* Zelfde animatie als bericht */
  opacity: 0;
  transform: translateY(15px);
}

.suggestion-button {
  background-color: white;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius-small); /* Consistent met website knoppen */
  padding: 8px 16px; /* Iets kleiner dan hoofd knoppen */
  font-size: 0.85rem; /* Iets kleiner */
  font-weight: 500; /* Consistent met knoppen */
  cursor: pointer;
  transition: var(--transition-quick);
  font-family: "Inter", sans-serif; /* Expliciet font */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-button:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-2px); /* Subtiele lift */
  border-color: var(--primary-color);
}

.suggestion-button:active {
  transform: translateY(0);
}

#loading-indicator {
  align-self: flex-start;
  display: none; /* Start verborgen */
  margin: 10px 20px; /* Minder marge */
  background-color: var(--bot-bubble);
  padding: 12px 16px;
  border-radius: var(--border-radius-medium);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  opacity: 0;
  animation: loadingFade 0.5s forwards;
}

@keyframes loadingFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.typing-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.dot {
  width: 7px; /* Iets kleiner */
  height: 7px;
  background-color: var(--primary-color);
  border-radius: 50%;
  opacity: 0.8; /* Start iets minder zichtbaar */
  animation: pulse 1.2s infinite ease-in-out; /* Iets langzamer? */
}

.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulse {
  0%, 60%, 100% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  30% {
    transform: scale(1.1);
    opacity: 1;
  }
}

#chat-input-area {
  display: flex;
  padding: 16px 20px;
  background-color: white;
  border-top: 1px solid var(--border-color); /* Gebruik variabele */
  align-items: center;
  position: relative;
}

#message-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border-color); /* Gebruik variabele */
  border-radius: var(--border-radius-small); /* Consistent met knoppen */
  outline: none;
  resize: none;
  font-family: "Inter", sans-serif; /* Expliciet font */
  font-size: 0.95rem; /* Consistent met beschrijvingen */
  color: var(--text-color-medium);
  max-height: 100px; /* Behoud max hoogte */
  overflow-y: auto;
  transition: var(--transition-quick);
}

#message-input::placeholder {
    color: #9ca3af; /* Lichter grijs voor placeholder */
}

#message-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.15); /* Subtiele focus ring in primaire kleur */
}

#send-button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  width: 44px; /* Iets groter voor betere klikbaarheid */
  height: 44px;
  border-radius: 50%;
  margin-left: 12px; /* Iets meer ruimte */
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--transition-quick);
  flex-shrink: 0;
}

#send-button:hover {
  background-color: var(--primary-hover);
  transform: scale(1.05); /* Lichte schaal ipv lift */
}

#send-button:active {
  transform: scale(1);
}

.send-icon {
  width: 20px;
  height: 20px;
  fill: white;
}

/* --- Verwijder PDF gerelateerde stijlen --- */
/* #upload-button, #pdf-input { display: none; } */ /* Niet meer nodig als HTML weg is */


/* Responsive design (behoud logica, pas evt. waarden aan) */
@media (max-width: 480px) {
  #chatbot-container {
    width: 100vw;
    height: 100%; /* Gebruik 100% ipv 100vh voor betere mobiele ervaring */
    position: fixed; /* Zorg dat het over de pagina valt */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    z-index: 10000; /* Hoogste z-index */
    transform: scale(1); /* Geen schaal op mobiel */
    opacity: 0; /* Start onzichtbaar */
    pointer-events: none;
    transition: opacity 0.3s ease-in-out; /* Alleen opacity animeren */
  }

  #chatbot-container.active {
     opacity: 1;
     pointer-events: all;
  }

  #chatbot-wrapper { /* Wrapper blijft voor de knop */
    bottom: 16px;
    right: 16px;
  }

  #chat-toggle { /* Knop kleiner op mobiel */
      width: 50px;
      height: 50px;
  }
   #chat-toggle svg {
        width: 24px;
        height: 24px;
    }

  /* Verberg pulse op mobiel indien gewenst */
  #chat-toggle::before {
    /* display: none; */
  }

   #chat-header {
        padding: 12px 16px;
        font-size: 1rem;
    }
    #chat-messages {
        padding: 16px;
    }
    .message {
        font-size: 0.9rem;
    }
    #chat-input-area {
        padding: 12px 16px;
    }
     #message-input {
        padding: 10px 14px;
        font-size: 0.9rem;
        border-radius: 20px; /* Ronder op mobiel? */
    }
    #send-button {
        width: 40px;
        height: 40px;
        margin-left: 8px;
    }
     .send-icon {
        width: 18px;
        height: 18px;
    }
}