/* ==========================================================================
   QLink Stylesheet
   Signature Visual System, Custom Animations, and Gradients
   ========================================================================== */

body {
  background-color: #F8F7FF;
  color: #15192C;
  overflow-x: hidden;
}

/* Ambient background blobs */
.ambient-glow-1 {
  background: radial-gradient(circle, rgba(130, 112, 255, 0.16) 0%, rgba(0, 229, 255, 0.06) 45%, rgba(248, 247, 255, 0) 70%);
}

.ambient-glow-2 {
  background: radial-gradient(circle, rgba(255, 99, 210, 0.12) 0%, rgba(107, 90, 224, 0.10) 50%, rgba(248, 247, 255, 0) 75%);
}

/* Slanted Purple Hero Card */
.slanted-purple-hero {
  background: linear-gradient(135deg, #695AE0 0%, #7C68EE 52%, #6371F1 100%);
  border-radius: 36px;
  position: relative;
  clip-path: polygon(0 16%, 100% 0%, 100% 100%, 0% 100%);
}

@media (max-width: 768px) {
  .slanted-purple-hero {
    clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 100%);
    border-radius: 28px;
  }
}

/* Secondary Purple CTA Banner with diagonal sheen */
.purple-cta-banner {
  background: linear-gradient(135deg, #695AE0 0%, #7F6BFF 55%, #5F73EC 100%);
  border-radius: 36px;
  position: relative;
  overflow: visible;
}

.purple-cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 36px;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 42%, transparent 42.1%);
  pointer-events: none;
}

/* Vibrant Pink Pill Button */
.btn-pink-pill {
  background: linear-gradient(135deg, #FF73DD 0%, #F548C2 100%);
  box-shadow: 0 10px 24px -4px rgba(245, 72, 194, 0.45);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-pink-pill:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 30px -4px rgba(245, 72, 194, 0.6);
}

/* Floating Animations */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-9px); }
}

@keyframes floatDelayed {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(8px); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes barGrow {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.65); }
}

.animate-float-slow {
  animation: floatSlow 4.5s ease-in-out infinite;
}

.animate-float-delayed {
  animation: floatDelayed 5.2s ease-in-out infinite;
}

.animate-float-fast {
  animation: floatSlow 3.6s ease-in-out infinite;
}

/* 3D Tilted Phone */
.tilted-phone {
  transform: rotate(-11deg) translateY(-10px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.tilted-phone:hover {
  transform: rotate(-4deg) translateY(-16px) scale(1.02);
}

@media (max-width: 1024px) {
  .tilted-phone {
    transform: rotate(-5deg) translateY(0px);
  }
}

/* Scroll reveal transitions */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease-out, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Custom Scrollbar for App Viewport & Legal Panels */
.custom-scroll::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: #F1F0FB;
  border-radius: 8px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: #C4BCFA;
  border-radius: 8px;
}

/* Text Gradients */
.text-gradient-purple {
  background: linear-gradient(135deg, #695AE0 0%, #8A64FF 60%, #4E65F0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-qlink {
  background: linear-gradient(135deg, #00D8FF 0%, #2979FF 50%, #9D4EDD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}