/* =========================================================
   buttons.css — buttons and the recurring section CTA.
   ========================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font); font-size: 1rem; font-weight: 700;
  padding: 15px 30px; border-radius: 100px; border: none; cursor: pointer;
  transition: transform .25s ease, box-shadow .3s ease, background .3s ease;
  text-decoration: none; white-space: nowrap;
}

.btn-green {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-bright) 100%);
  color: #0e2200;
  box-shadow: 0 8px 22px -6px rgba(124, 179, 66, 0.55), 0 0 0 1px rgba(124, 179, 66, 0.18) inset;
}
.btn-green:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px -8px rgba(124, 179, 66, 0.75), 0 0 26px -2px rgba(143, 209, 79, 0.6);
}
/* light sweeps across the button on hover */
.btn-green::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-150%); pointer-events: none;
  transition: transform .6s ease;
}
.btn-green:hover::after { transform: translateX(150%); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); }

/* recurring CTA after each section */
.section-cta { margin-top: 56px; text-align: center; }