* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  scrollbar-width: none;
}

body {
  box-sizing: border-box;
  overflow-x: hidden;
}

.font-playfair {
  font-family: "Playfair Display", serif;
}

.font-inter {
  font-family: "Inter", sans-serif;
}

.gradient-bg {
  background: linear-gradient(135deg,
      #1a0a2e 0%,
      #3d1a5c 25%,
      #6b2d7b 50%,
      #8b3a8b 75%,
      #c44b94 100%);
}

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-card-dark {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Floating hearts animation */
.floating-heart {
  position: absolute;
  opacity: 0;
  animation: floatUp 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(100%) scale(0.5) rotate(0deg);
  }

  10% {
    opacity: 0.8;
  }

  90% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translateY(-800%) scale(1) rotate(15deg);
  }
}

/* Phone mockup float animation */
.float-phone {
  animation: floatPhone 4s ease-in-out infinite;
}

.float-phone-delayed {
  animation: floatPhone 4s ease-in-out infinite 1s;
}

@keyframes floatPhone {

  0%,
  100% {
    transform: translateY(0px) rotate(-5deg);
  }

  50% {
    transform: translateY(-15px) rotate(-5deg);
  }
}

@keyframes floatPhoneRight {

  0%,
  100% {
    transform: translateY(0px) rotate(5deg);
  }

  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

.float-phone-right {
  animation: floatPhoneRight 4s ease-in-out infinite 0.5s;
}

/* Pulse heart animation */
.pulse-heart {
  animation: pulseHeart 1.5s ease-in-out infinite;
}

@keyframes pulseHeart {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

/* Fade in animation */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Chat message animations */
.chat-msg {
  opacity: 0;
  transform: translateX(-20px);
  animation: slideInChat 0.5s ease-out forwards;
}

.chat-msg:nth-child(1) {
  animation-delay: 0.5s;
}

.chat-msg:nth-child(2) {
  animation-delay: 1.2s;
}

.chat-msg:nth-child(3) {
  animation-delay: 1.9s;
}

@keyframes slideInChat {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Button glow effect */
.btn-glow {
  box-shadow: 0 0 30px rgba(236, 72, 153, 0.5);
  transition: all 0.3s ease;
}

.btn-glow:hover {
  box-shadow: 0 0 50px rgba(236, 72, 153, 0.8);
  transform: scale(1.05);
}

/* Feature card hover */
.feature-card {
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Mobile menu */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-menu.open {
  transform: translateX(0);
}

@view-transition {
  navigation: auto;
}

/* App Screen Zoom Effect */
img {
  overflow-clip-margin: content-box;
  overflow: clip;
}

img.app-screen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px;
  transition: transform 0.6s ease;
}

img.app-screen:hover {
  transform: scale(1.1);
}