/* ============================================
   CALL TO ACTION — THEME 1: TECH LIGHT
   ============================================ */

:root {
  /* ===============================
     CTA COLORS (TECH LIGHT)
  =============================== */
  --ebctaf20-primary-btn-background-color: linear-gradient(135deg, #0284c7, #4f46e5);
  --ebctaf20-primary-btn-text-color: #ffffff;
  --ebctaf20-primary-btn-shadow: 0 4px 20px rgba(2, 132, 199, 0.25);
  --ebctaf20-primary-btn-hover-shadow: 0 8px 30px rgba(2, 132, 199, 0.4);

  --ebctaf20-outline-btn-background-color: transparent;
  --ebctaf20-outline-btn-text-color: #0f172a;
  --ebctaf20-outline-btn-border-color: rgba(2, 132, 199, 0.12);
  --ebctaf20-outline-btn-hover-border-color: #0284c7;
  --ebctaf20-outline-btn-hover-text-color: #0284c7;
  --ebctaf20-outline-btn-hover-shadow: 0 8px 32px rgba(2, 132, 199, 0.04);

  /* ===============================
     CTA LAYOUT & TIMINGS
  =============================== */
  --ebctaf20-radius: 10px;
  --ebctaf20-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.ebctaf20-buttons-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Base button style */
.ebctaf20-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.75rem;
  border-radius: var(--ebctaf20-radius);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s var(--ebctaf20-ease);
  position: relative;
  overflow: hidden;
}

.ebctaf20-btn-primary {
  background: var(--ebctaf20-primary-btn-background-color);
  color: var(--ebctaf20-primary-btn-text-color);
  box-shadow: var(--ebctaf20-primary-btn-shadow);
}

.ebctaf20-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--ebctaf20-primary-btn-hover-shadow);
}

.ebctaf20-btn-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: ebctafShimmer 3s ease-in-out infinite;
}

@keyframes ebctafShimmer {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

.ebctaf20-btn-outline {
  background: var(--ebctaf20-outline-btn-background-color);
  color: var(--ebctaf20-outline-btn-text-color);
  border: 1px solid var(--ebctaf20-outline-btn-border-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ebctaf20-btn-outline:hover {
  border-color: var(--ebctaf20-outline-btn-hover-border-color);
  color: var(--ebctaf20-outline-btn-hover-text-color);
  transform: translateY(-3px);
  box-shadow: var(--ebctaf20-outline-btn-hover-shadow);
}