/*
 * Dark card - donkere afgeronde kaart met groene radial-glows.
 * Gedeelde shell voor outro-CTA (informatiepagina) en advies (dienst).
 */

.dark-card {
  position:      relative;
  overflow:      hidden;
  padding:       var(--space-20) var(--space-16);
  background:    var(--color-primary);
  border-radius: var(--radius-xl);
}

.dark-card::before {
  content:        '';
  position:       absolute;
  right:          -150px;
  top:            -150px;
  width:          540px;
  height:         540px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(168, 204, 79, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.dark-card::after {
  content:        '';
  position:       absolute;
  left:           -120px;
  bottom:         -120px;
  width:          320px;
  height:         320px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(120, 159, 30, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.dark-card__title {
  margin:         0 0 var(--space-5);
  font-family:    var(--font-heading);
  font-size:      40px;
  font-weight:    var(--font-extrabold);
  line-height:    1.1;
  letter-spacing: -1.2px;
  color:          var(--color-text-light);
}

.dark-card__title-accent {
  color: var(--color-icon-green);
}

.dark-card__body {
  font-size: var(--text-base);
  color:     rgba(255, 255, 255, 0.78);
}

/* Eyebrow op de donkere kaart: lichter groen (hogere specificiteit dan
   .sec-head__eyebrow, zodat de cascade-volgorde niet uitmaakt) */
.dark-card .sec-head__eyebrow {
  color: var(--color-icon-green);
}

@media (max-width: 960px) {
  .dark-card {
    padding: var(--space-12) var(--space-8);
  }
  .dark-card__title {
    font-size: 30px;
  }
}