/* Running Convo Landing Page - Custom Styles */

/* Phone Mockup Styles */
.phone-mockup {
  position: relative;
  width: 220px;
  height: 440px;
  background: #1f2937;
  border-radius: 40px;
  padding: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.phone-mockup::before {
  /* Notch */
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 24px;
  background: #1f2937;
  border-radius: 0 0 16px 16px;
  z-index: 10;
}

.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
}

/* Placeholder screen gradients */
.phone-screen-1 {
  background: linear-gradient(135deg, #5EEAD4 0%, #14B8A6 100%);
}

.phone-screen-2 {
  background: linear-gradient(135deg, #2DD4BF 0%, #0D9488 100%);
}

.phone-screen-3 {
  background: linear-gradient(135deg, #99F6E4 0%, #14B8A6 100%);
}

/* Smaller phone mockup for feature sections */
.phone-mockup-sm {
  width: 180px;
  height: 360px;
  border-radius: 32px;
  padding: 10px;
}

.phone-mockup-sm::before {
  width: 60px;
  height: 20px;
  top: 10px;
  border-radius: 0 0 12px 12px;
}

.phone-mockup-sm .phone-screen {
  border-radius: 22px;
}

/* Gradient button styles */
.btn-gradient {
  background: linear-gradient(135deg, #5EEAD4 0%, #14B8A6 100%);
  transition: all 0.2s ease;
}

.btn-gradient:hover {
  background: linear-gradient(135deg, #2DD4BF 0%, #0D9488 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -10px rgba(20, 184, 166, 0.5);
}

/* CTA section gradient background */
.bg-gradient-cta {
  background: linear-gradient(135deg, #5EEAD4 0%, #14B8A6 100%);
}

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

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #14B8A6;
  outline-offset: 2px;
}