:root {
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: #0f172a;
  --app-bg-a: #cfe5ff;
  --app-bg-b: #bddcff;
  --app-bg-c: #edf5ff;
  --app-bg-d: #dcecff;
  --app-bg-e: #c9ddf7;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(780px 500px at 22% 72%, rgba(147, 197, 253, 0.22) 0%, transparent 62%),
    radial-gradient(860px 560px at 84% 22%, rgba(14, 165, 233, 0.14) 0%, transparent 64%),
    radial-gradient(1200px 520px at 8% -8%, var(--app-bg-a) 0%, transparent 52%),
    radial-gradient(1000px 480px at 100% 0%, var(--app-bg-b) 0%, transparent 50%),
    linear-gradient(180deg, var(--app-bg-c) 0%, var(--app-bg-d) 44%, var(--app-bg-e) 100%);
}

.shadow-sm {
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.shadow-lg {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05) !important;
}

.shadow-xl,
.shadow-2xl {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1), 0 3px 10px rgba(15, 23, 42, 0.06) !important;
}

.cta-shimmer::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -40%;
  width: 36%;
  height: 160%;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.44) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-180%) rotate(12deg);
  pointer-events: none;
  animation: cta-shimmer-sweep 5.8s ease-in-out infinite;
}

@keyframes cta-shimmer-sweep {
  0%,
  62%,
  100% {
    transform: translateX(-180%) rotate(12deg);
    opacity: 0;
  }

  66% {
    opacity: 0.95;
  }

  83% {
    transform: translateX(420%) rotate(12deg);
    opacity: 0.9;
  }

  86% {
    opacity: 0;
  }
}