/* Task 1.3 — Mobile Detailing package buttons only. */
@property --mobile-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes mobile-book-ring {
  to { --mobile-glow-angle: 360deg; }
}
#s1 .card-cta[data-book="m1"],
#s1 .card-cta[data-book="m2"],
#s1 .card-cta[data-book="m3"] {
  --mobile-glow-angle: 0deg;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  margin: 6px 0 2px;
  padding: 16px 20px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, #151a22, #0b0e14) padding-box,
    conic-gradient(from var(--mobile-glow-angle),
      rgba(255,255,255,.12) 0deg,
      #fff 50deg, #bfe0ff 80deg,
      rgba(255,255,255,.12) 140deg,
      rgba(255,255,255,.12) 200deg,
      #fff 240deg,
      rgba(255,255,255,.12) 300deg) border-box;
  color: #f1f5fa;
  box-shadow: 0 0 14px rgba(191,224,255,.24),
    0 0 30px rgba(191,224,255,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
  animation: mobile-book-ring 3.6s linear infinite;
  transition: box-shadow .3s ease, color .3s ease;
  transform: none;
  translate: none;
}
#s1 .card-cta[data-book="m1"]:hover,
#s1 .card-cta[data-book="m2"]:hover,
#s1 .card-cta[data-book="m3"]:hover {
  color: #fff;
  box-shadow: 0 0 18px rgba(191,224,255,.38),
    0 0 36px rgba(191,224,255,.16),
    inset 0 1px 0 rgba(255,255,255,.12);
}
#s1 .card-cta[data-book="m1"]:focus-visible,
#s1 .card-cta[data-book="m2"]:focus-visible,
#s1 .card-cta[data-book="m3"]:focus-visible {
  outline: 2px solid #e6f2ff;
  outline-offset: 5px;
}
#s1 .card-cta[data-book="m1"] span,
#s1 .card-cta[data-book="m2"] span,
#s1 .card-cta[data-book="m3"] span {
  transform: none;
  translate: none;
  animation: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  #s1 .card-cta[data-book="m1"],
  #s1 .card-cta[data-book="m2"],
  #s1 .card-cta[data-book="m3"] {
    animation: none;
    transition: none;
    --mobile-glow-angle: 40deg;
  }
}