/* Gradients from routineFront-app CTA + hero (upstream/test). */
:root {
  --rm-gradient-cta: linear-gradient(110deg, #5b45dd, #9c5cf0, #ef79cf, #9c5cf0, #5b45dd);
  --rm-gradient-title: linear-gradient(100deg, #6a4fe0 5%, #a96ef6 48%, #ed78cf 86%);
  --rm-gradient-footer:
    radial-gradient(circle at 12% 8%, rgba(156, 92, 240, .24), transparent 34%),
    radial-gradient(circle at 88% 92%, rgba(237, 121, 207, .12), transparent 30%),
    linear-gradient(135deg, #120a2b 0%, #1d1042 42%, #2a1454 72%, #160b31 100%);
  --rm-gradient-icon: linear-gradient(
    150deg,
    rgba(106, 79, 224, 0.16) 0%,
    rgba(237, 120, 207, 0.16) 100%
  );
  --rm-gradient-shine: linear-gradient(120deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%);
}

.rm-text-gradient,
.rm-gradient-text {
  background: var(--rm-gradient-title);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rm-bg-wash {
  background: var(--rm-bg);
}

@keyframes rmCtaGradientFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes rmCtaButtonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes rmCtaShine {
  0%, 55% { transform: translateX(-65%) rotate(10deg); }
  85%, 100% { transform: translateX(65%) rotate(10deg); }
}

@keyframes rmCtaArrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

@keyframes rmCtaArrowNudgeRtl {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-6px); }
}