/* ==========================================================
   Simple-to-start CTA Banner
   ========================================================== */

.cta-banner {
  --cta-primary: #7d65fd;
  --cta-primary-2: #8f94fb;
  --cta-decor: 255, 255, 255;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(900px 450px at 50% 45%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, var(--cta-primary-2) 0%, var(--cta-primary) 60%, #6a4ee6 100%);
  box-shadow: 0 18px 50px rgba(125, 101, 253, 0.3);
  padding: clamp(28px, 5vw, 64px);
  margin: clamp(12px, 3vw, 32px) 0;
}

/* Content — sits above decorative images */
.cta-content {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.cta-title {
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 4.8vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 10px 0;
}

.cta-subtitle {
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.6;
  opacity: 0.95;
  margin: 0 auto;
  max-width: 840px;
}

.cta-actions {
  display: inline-flex;
  gap: 22px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(16px, 3vw, 28px);
}

.btn-cta-primary {
  background: #ffffff;
  color: var(--cta-primary);
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  padding: 12px 22px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

.btn-cta-link {
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
  font-size: 16px;
}

.btn-cta-link:hover {
  text-decoration: none;
  opacity: 0.9;
}

/* ----------------------------------------------------------
   Decorative SVGs (legacy)
   ---------------------------------------------------------- */
.cta-decor {
  position: absolute;
  color: rgb(var(--cta-decor));
  opacity: 0.22;
}

.cta-qr-left  { left: 18px;  top: 18px;    width: 120px; height: 120px; }
.cta-wifi      { right: 170px; top: 20px;   width: 86px;  height: 60px; }
.cta-arrow     { left: 42px;  bottom: 110px; width: 82px; height: 82px; opacity: 0.28; }
.cta-qr-small  { right: 110px; bottom: 68px; width: 66px; height: 66px; }
.cta-phone     { right: -8px; bottom: -24px; width: 240px; height: 420px; opacity: 0.55; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2)); }

/* ----------------------------------------------------------
   Decorative images (positioned on top of bg, below text)
   ---------------------------------------------------------- */
.cta-decor-img {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* QR Circle — top-left, partially cropped */
.cta-img-qr-circle {
  left: 16px;
  top: -30px;
  width: 180px;
  opacity: 0.55;
}

/* WiFi — top-right */
.cta-img-wifi {
  right: 200px;
  top: -10px;
  width: 100px;
  opacity: 0.6;
}

/* Arrow — left side, below center */
.cta-img-arrow {
  left: 60px;
  bottom: 80px;
  width: 70px;
  opacity: 0.5;
}

/* Small QR — bottom-right area */
.cta-img-small-qr {
    right: 280px;
    bottom: 34px;
    width: 72px;
    opacity: 0.45;
}

/* Loyalty Card — bottom-center-left */
.cta-img-loyalty {
  left: 50%;
  bottom: -77px;
  width: 200px;
  opacity: 0.5;
  transform: rotate(0deg);
}

/* Mobile Phone — right edge, partially cropped */
.cta-img-phone {
  right: -30px;
  bottom: -60px;
  width: 180px;
  opacity: 0.7;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
}

/* ----------------------------------------------------------
   Responsive: tablet
   ---------------------------------------------------------- */
@media (max-width: 992px) {
  .cta-img-qr-circle { left: -50px; top: -40px; width: 150px; }
  .cta-img-wifi       { right: 40px; top: -15px; width: 80px; }
  .cta-img-arrow      { left: 30px; bottom: 60px; width: 55px; }
  .cta-img-small-qr   { right: 20px; bottom: -25px; width: 90px; }
  .cta-img-loyalty    { left: 10%; bottom: -50px; width: 170px; }
  .cta-img-phone      { right: -50px; bottom: -70px; width: 160px; }
}

/* ----------------------------------------------------------
   Responsive: mobile
   ---------------------------------------------------------- */
@media (max-width: 576px) {
  .cta-img-qr-circle { left: -60px; top: -40px; width: 120px; opacity: 0.4; }
  .cta-img-wifi       { right: 10px; top: -20px; width: 65px; opacity: 0.45; }
  .cta-img-arrow      { display: none; }
  .cta-img-small-qr   { right: -10px; bottom: -30px; width: 75px; }
  .cta-img-loyalty    { left: 5%; bottom: -50px; width: 140px; }
  .cta-img-phone      { right: -60px; bottom: -80px; width: 140px; }

  .cta-wifi     { right: 18px; top: 18px; width: 70px; }
  .cta-phone    { right: -48px; width: 210px; height: 380px; }
  .cta-qr-left  { width: 90px; height: 90px; }
}