/* MOBILE UX — swipe carousel, sticky CTA, edge glow */

/* ── SWIPE CAROUSEL ── */
@media (max-width: 768px) {
  .m-swipe {
    display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 1rem; padding: 0.5rem 1.25rem 1rem; margin: 0 -1.25rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .m-swipe::-webkit-scrollbar { display: none; }
  .m-swipe > * {
    flex: 0 0 85%; scroll-snap-align: center;
    max-width: 85%; box-sizing: border-box;
  }

  /* Dots */
  .m-dots {
    display: flex; justify-content: center; gap: 6px;
    padding: 0.75rem 0 0.25rem; margin-top: -0.25rem;
  }
  .m-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(0,229,255,0.2); cursor: pointer;
    transition: all 0.3s ease;
  }
  .m-dot.active {
    width: 20px; border-radius: 3px;
    background: rgba(0,229,255,0.8);
    box-shadow: 0 0 8px rgba(0,229,255,0.4);
  }
}

/* ── STICKY FAB ── */
.m-fab {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 8999; padding: 0.75rem 2rem; border-radius: 30px;
  background: linear-gradient(135deg, rgba(0,229,255,0.9), rgba(124,111,255,0.85));
  color: #fff; font-family: var(--f); font-size: 0.9rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,229,255,0.35), 0 0 40px rgba(0,229,255,0.15);
  transition: all 0.3s ease; touch-action: manipulation;
  animation: fabPulse 3s ease-in-out infinite;
  display: flex; align-items: center; gap: 0.5rem;
}
.m-fab:active { transform: translateX(-50%) scale(0.95); }
@keyframes fabPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(0,229,255,0.35); }
  50%     { box-shadow: 0 4px 30px rgba(0,229,255,0.55), 0 0 50px rgba(124,111,255,0.2); }
}

/* safe-area */
.has-safe-area .m-fab { bottom: calc(1.5rem + env(safe-area-inset-bottom)); }

/* ── EDGE GLOW ── */
.m-edge-glow {
  position: fixed; left: 0; right: 0; height: 3px; z-index: 9500;
  pointer-events: none; opacity: 0; transition: opacity 0.3s;
}
.m-edge-top { top: 0; background: linear-gradient(180deg, rgba(0,229,255,0.7), transparent); height: 60px; }
.m-edge-btm { bottom: 0; background: linear-gradient(0deg, rgba(124,111,255,0.7), transparent); height: 60px; }
.m-edge-glow.flash { opacity: 1; }

@media (min-width: 769px) {
  .m-fab, .m-edge-glow, .m-dots { display: none !important; }
}