/* =========================================
   Bikeshift CTA Box
   ========================================= */

.ctaBox {
  /* Subtiele radiale glow voor extra diepte */
  background-image: radial-gradient(circle at top right, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
  background-color: var(--purple);
}

/* Decoratieve cirkels op de achtergrond */
.ctaBox__deco {
  top: -5em;
  right: -5em;
  width: 18em;
  height: 18em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.ctaBox__deco::after {
  content: '';
  position: absolute;
  bottom: -8em;
  left: -8em;
  width: 14em;
  height: 14em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 0, 137, 0.15) 0%, transparent 70%);
}

/* Knoppen */
.ctaBox__btn,
.ctaBox__btn:link,
.ctaBox__btn:visited {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: 22px;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s linear, color 0.25s linear, transform 0.15s ease;
}

.ctaBox__btn:hover {
  transform: translateY(-2px);
}

/* Primary: light-green */
.ctaBox__btn--primary,
.ctaBox__btn--primary:link,
.ctaBox__btn--primary:visited {
  color: var(--dark-green) !important;
  background-color: var(--light-green);
}

.ctaBox__btn--primary:hover,
.ctaBox__btn--primary:focus {
  color: #fff !important;
  background-color: var(--dark-green);
}

/* Secondary: dark-green */
.ctaBox__btn--secondary,
.ctaBox__btn--secondary:link,
.ctaBox__btn--secondary:visited {
  color: #fff !important;
  background-color: var(--dark-green);
}

.ctaBox__btn--secondary:hover,
.ctaBox__btn--secondary:focus {
  color: var(--dark-green) !important;
  background-color: var(--light-green);
}

/* Responsive */
@media screen and (max-width: 991px) {
  .ctaBox h2 {
    font-size: 2em !important;
  }
}

@media screen and (max-width: 479px) {
  .ctaBox h2 {
    font-size: 1.625em !important;
  }

  .ctaBox__btn {
    padding: 10px 18px;
    font-size: 0.9375rem;
  }
}