/* ============================================================
   EVERMORE CTA — PRODUCTION VERSION
   Unified with button system + glow + perfect elevation
============================================================ */

/* ------------------------------------------------------------
   BASE CTA STYLE (applies to ALL CTA variants)
------------------------------------------------------------ */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--accent);
  color: #fff;

  font-weight: 600;
  font-size: 1rem;

  padding: 12px 28px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  cursor: pointer;

  border: none;

  box-shadow:
    0 4px 12px rgba(47,122,229,0.35),
    0 1px 2px rgba(0,0,0,0.12);

  transition:
    background 0.22s ease,
    box-shadow 0.25s ease,
    transform 0.20s ease,
    color 0.20s ease;
}

.cta:hover {
  background: var(--accent-hover);
  transform: translateY(-3px);

  box-shadow:
    0 8px 25px rgba(47,122,229,0.45),
    0 3px 6px rgba(0,0,0,0.15);
}

.cta:active {
  transform: translateY(0);
  box-shadow:
    0 3px 8px rgba(47,122,229,0.35),
    0 1px 3px rgba(0,0,0,0.15);
}


/* ============================================================
   CTA — SECONDARY GHOST STYLE
============================================================ */
.cta-secondary {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);

  box-shadow:
    0 1px 3px rgba(0,0,0,0.08);
}

.cta-secondary:hover {
  background: var(--hover);
  color: var(--accent-hover);
  border-color: var(--accent-hover);

  transform: translateY(-2px);
  box-shadow:
    0 4px 10px rgba(47,122,229,0.25);
}


/* ============================================================
   CTA — LIGHT VARIANT
============================================================ */
.cta-light {
  background: var(--hover);
  color: var(--accent);
  border: 1px solid var(--border);
}

.cta-light:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-2px);
}


/* ============================================================
   CTA — DANGER (Red)
============================================================ */
.cta-danger {
  background: #e53935;
  color: #fff;

  box-shadow:
    0 3px 8px rgba(229,57,53,0.35);
}

.cta-danger:hover {
  background: #f05545;
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(229,57,53,0.4);
}


/* ============================================================
   CTA — SUCCESS (Green)
============================================================ */
.cta-success {
  background: #22c55e;
  color: #fff;

  box-shadow:
    0 3px 8px rgba(34,197,94,0.3);
}

.cta-success:hover {
  background: #16a34a;
  transform: translateY(-2px);

  box-shadow:
    0 8px 20px rgba(34,197,94,0.4);
}


/* ============================================================
   RESPONSIVE — mobile tighten
============================================================ */
@media (max-width: 700px) {
  .cta,
  .cta-secondary,
  .cta-light,
  .cta-success,
  .cta-danger {
    font-size: 0.95rem;
    padding: 12px 20px;
    border-radius: var(--radius-md);
  }
}