/*
 * Footer - donkere wrapper met CTA-blok bovenaan en 4-koloms info-grid
 */

.footer {
  background: var(--color-primary);
  color:      rgba(255, 255, 255, 0.7);
}

.footer__inner {
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--section-padding-x);
}

/* ----------------------------------------
 * Footer CTA blok (donker, met dual CTAs)
 * ---------------------------------------- */

.footer-cta {
  padding:       64px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-cta__inner {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             40px;
  flex-wrap:       wrap;
}

.footer-cta__title {
  color:           #ffffff;
  font-family:     var(--font-heading);
  font-size:       36px;
  font-weight:     var(--font-extrabold);
  margin:          0 0 10px;
  letter-spacing:  -1px;
  line-height:     1.1;
}

.footer-cta__title-accent {
  color: var(--color-icon-green);
}

.footer-cta__text {
  color:     rgba(255, 255, 255, 0.65);
  font-size: 15.5px;
  margin:    0;
}

.footer-cta__actions {
  display:     flex;
  gap:         12px;
  flex-shrink: 0;
  flex-wrap:   wrap;
}

.footer-cta__btn-primary {
  display:         inline-flex;
  align-items:     center;
  gap:             14px;
  background:      var(--color-accent);
  color:           #ffffff;
  padding:         20px 50px;
  border-radius:   999px;
  font-size:       15px;
  font-weight:     600;
  text-decoration: none;
  line-height:     1;
  white-space:     nowrap;
  transition:      background-color var(--transition-fast),
                   box-shadow var(--transition-fast);
}

.footer-cta__btn-primary:hover {
  background: var(--color-accent-dark);
  color:      #ffffff;
  box-shadow: var(--shadow-primary-hover);
}

.footer-cta__btn-primary svg {
  width:  14px;
  height: 14px;
}

.footer-cta__btn-secondary {
  display:         inline-flex;
  align-items:     center;
  gap:             12px;
  color:           #ffffff;
  padding:         20px 36px;
  font-size:       15px;
  font-weight:     600;
  text-decoration: none;
  border:          1px solid rgba(255, 255, 255, 0.25);
  border-radius:   999px;
  line-height:     1;
  white-space:     nowrap;
  transition:      border-color var(--transition-fast),
                   background-color var(--transition-fast);
}

.footer-cta__btn-secondary:hover {
  border-color: var(--color-icon-green);
  background:   rgba(255, 255, 255, 0.05);
  color:        #ffffff;
}

.footer-cta__btn-secondary svg {
  width:  14px;
  height: 14px;
}

/* ----------------------------------------
 * Footer main (logo + 3 kolommen content)
 * ---------------------------------------- */

.footer-main {
  padding: 64px 0 32px;
}

.footer-main__grid {
  display:               grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:                   56px;
}

.footer-main__heading {
  color:           #ffffff;
  font-family:     var(--font-heading);
  font-size:       13px;
  font-weight:     var(--font-bold);
  margin:          0 0 18px;
  letter-spacing:  1.5px;
  text-transform:  uppercase;
}

.footer-main__logo img,
.footer-main__logo svg {
  height:        48px;
  width:         auto;
  margin-bottom: 22px;
  display:       block;
}

.footer-main__logo-text {
  font-family:   var(--font-heading);
  color:         #ffffff;
  font-size:     22px;
  font-weight:   var(--font-extrabold);
  margin-bottom: 22px;
  display:       block;
}

.footer-main__about {
  font-size:   14px;
  line-height: 1.7;
  margin:      0 0 22px;
  color:       rgba(255, 255, 255, 0.65);
}

.footer-main__certs {
  display:     flex;
  gap:         10px;
  align-items: center;
  flex-wrap:   wrap;
}

.footer-main__cert {
  background:      rgba(255, 255, 255, 0.06);
  padding:         10px 14px;
  border-radius:   8px;
  font-size:       11px;
  line-height:     1;
  color:           rgba(255, 255, 255, 0.85);
  font-weight:     600;
  letter-spacing:  0.5px;
}

/* Menu lijsten (Diensten / Bedrijf kolommen) */
.footer-main__menu {
  list-style: none;
  padding:    0;
  margin:     0;
}

.footer-main__menu li {
  margin-bottom: 11px;
  font-size:     14px;
  line-height:   1.3;
}

.footer-main__menu a {
  color:           rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.footer-main__menu a:hover {
  color: var(--color-icon-green);
}

/* Contact items */
.footer-main__contact-item {
  display:       flex;
  gap:           12px;
  margin-bottom: 16px;
  font-size:     13.5px;
  line-height:   1.55;
  color:         rgba(255, 255, 255, 0.65);
}

.footer-main__contact-item svg {
  color:        var(--color-accent);
  flex-shrink:  0;
  margin-top:   3px;
  width:        15px;
  height:       15px;
}

.footer-main__contact-item strong {
  color:       #ffffff;
  font-weight: 600;
}

.footer-main__contact-item a {
  color:           rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.footer-main__contact-item a:hover {
  color: var(--color-icon-green);
}

/* ----------------------------------------
 * Footer bottom (copyright + privacy links)
 * ---------------------------------------- */

.footer-bottom {
  border-top:      1px solid rgba(255, 255, 255, 0.08);
  padding:         24px 0;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             16px;
  flex-wrap:       wrap;
  font-size:       12.5px;
  color:           rgba(255, 255, 255, 0.5);
}

.footer-bottom__links {
  display: flex;
  gap:     22px;
  flex-wrap: wrap;
}

.footer-bottom__links a {
  color:           rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.footer-bottom__links a:hover {
  color: var(--color-icon-green);
}

/* ----------------------------------------
 * Responsive
 * ---------------------------------------- */

@media (max-width: 1024px) {
  .footer-main__grid {
    grid-template-columns: 1fr 1fr;
    gap:                   40px;
  }
  .footer-main__brand {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .footer-cta {
    padding: 48px 0;
  }
  .footer-cta__title {
    font-size:      28px;
    letter-spacing: -0.5px;
  }
  .footer-cta__inner {
    flex-direction: column;
    align-items:    flex-start;
  }
  .footer-main {
    padding: 48px 0 24px;
  }
}

@media (max-width: 540px) {
  .footer-main__grid {
    grid-template-columns: 1fr;
    gap:                   32px;
  }
  .footer-main__brand {
    grid-column: auto;
  }
  .footer-bottom {
    flex-direction: column;
    align-items:    flex-start;
  }
  .footer-cta__btn-primary,
  .footer-cta__btn-secondary {
    padding: 16px 28px;
  }
}