/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f7;
  color: #1d1d1f;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
  overflow-y: auto;
}

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.6rem;
  background: rgba(245, 245, 247, 0.8);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.brand-text {
  font-weight: 750;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
}

.app-icon img {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  /* Make the logo feel more “Apple-like”/minimal in the header */
  filter: grayscale(1) saturate(0) brightness(0.2);
}

.menu-icon {
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

/* Desktop header links (Apple-style) */
.header-links {
  display: none;
  align-items: center;
  gap: 18px;
}

.header-links a {
  text-decoration: none;
  color: #1d1d1f;
  font-weight: 650;
  letter-spacing: -0.01em;
  padding: 10px 10px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.header-links a:hover {
  color: #0066CC;
  background: rgba(0, 102, 204, 0.08);
}

.header-links a.active {
  color: #0066CC;
  background: rgba(0, 102, 204, 0.12);
}

.menu-icon span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 2px;
  background-color: #1d1d1f;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  position: relative;
  transform-origin: center;
}

/* Improved X transformation */
.menu-icon.active span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
  margin: 0;
}

.menu-icon.active span:nth-child(2) {
  opacity: 0;
  transform: scale(0);
  margin: 0;
}

.menu-icon.active span:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
  margin: 0;
}

/* Hero Section */
.hero {
  text-align: left;
  padding: 90px 20px 60px;
  background: #f5f5f7;
}

.hero-content {
  max-width: 560px;
}

/* Subtle scroll-in for landing sections */
.value-props,
.coming-soon {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.value-props.visible,
.coming-soon.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Launch / Professional landing copy */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 102, 204, 0.08);
  border: 1px solid rgba(0, 102, 204, 0.16);
  color: #0066CC;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  font-size: 0.95rem;
}

.lead {
  font-size: 1.125rem;
  color: #86868b;
  margin-bottom: 28px;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.cta-row {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.cta-link {
  text-decoration: none;
  color: #0066CC;
  font-weight: 650;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(0, 102, 204, 0.08);
  border: 1px solid rgba(0, 102, 204, 0.14);
  transition: all 0.25s ease;
  min-height: 44px;
}

.cta-link:hover {
  background: rgba(0, 102, 204, 0.14);
  transform: translateY(-2px);
  color: #005bb5;
}

/* Less “flashy” CTA variant for the landing page */
.cta-no-glow {
  animation: none !important;
  box-shadow: 0 10px 26px -14px rgba(0, 102, 204, 0.55) !important;
}

.trust-row {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0 10px;
}

/* Two-column hero */
.hero-layout {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Hero screenshot card */
.hero-screenshot-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 26px;
  padding: 18px 18px 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
  width: 100%;
  max-width: 480px;
}

.hero-screenshot-img {
  width: 100%;
  max-width: 440px;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 102, 204, 0.08);
}

.hero-screenshot-caption {
  margin-top: 12px;
  color: #86868b;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 0.95rem;
}

/* Override default screenshot-section spacing when used in hero */
.hero .screenshot-section {
  margin: 0;
  padding: 0;
  max-width: none;
  background: transparent;
  perspective: none;
}

/* Keep parallax/reveal animation behavior working */
.hero .screenshot-section.visible .hero-screenshot-img {
  animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


.trust-item {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 10px 14px;
  border-radius: 999px;
  color: #1d1d1f;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* Value cards */
.value-props {
  max-width: 980px;
  margin: 36px auto 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  text-align: left;
}

.value-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 102, 204, 0.12);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.value-card h3 {
  color: #1d1d1f;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.value-card p {
  color: #86868b;
  line-height: 1.5;
  font-size: 1rem;
}

/* What’s included at launch */
.coming-soon {
  max-width: 980px;
  margin: 46px auto 0;
  padding: 0 20px;
  text-align: left;
}

.coming-soon h2 {
  color: #1d1d1f;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.55rem;
  margin-bottom: 18px;
}

.coming-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.step {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 102, 204, 0.12);
  border-radius: 18px;
  padding: 20px;
}

.step h4 {
  color: #1d1d1f;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.step p {
  margin: 0;
  color: #86868b;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .hero {
    padding: 70px 16px 44px;
    text-align: left;
  }

  .hero-layout {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .hero-screenshot-card {
    max-width: 100%;
  }

  .cta-row {
    gap: 12px;
  }

  .value-props,
  .coming-grid {
    grid-template-columns: 1fr;
  }

  .value-props {
    margin-top: 22px;
  }

  .coming-soon {
    margin-top: 30px;
  }
}

h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: #1d1d1f;
}

.brand-name {
  background: linear-gradient(135deg, #0066CC 0%, #5B9FFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.subheadline {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #1d1d1f;
  margin-bottom: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #1d1d1f 0%, #1d1d1f 50%, #86868b 51%, #1d1d1f 52%, #1d1d1f 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 8s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.description {
  font-size: 1.125rem;
  color: #86868b;
  margin-bottom: 40px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  border-right: 2px solid transparent;
  animation: typing 4s steps(40) 1s 1 normal both,
             blink 1s steps(1) infinite;
}

@keyframes typing {
  from {
    max-width: 0;
  }
  to {
    max-width: 100%;
  }
}

@keyframes blink {
  50% {
    border-right-color: #86868b;
  }
}

/* Update CTA Button styles */
.cta-button {
  background: linear-gradient(45deg, #0066CC, #5B9FFF, #0066CC);
  background-size: 200% auto;
  color: white;
  padding: 16px 32px;
  font-size: 1.125rem;
  border: none;
  border-radius: 980px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  min-width: 160px;
  min-height: 44px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 24px -6px rgba(0, 102, 204, 0.3);
  transform: translateY(0);
  animation: buttonGlow 3s infinite;
}

/* Add shine effect */
.cta-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
  animation: shine 3s infinite;
  pointer-events: none;
}

/* Button hover effect */
.cta-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 30px -10px rgba(0, 102, 204, 0.5);
  background-position: right center;
}

/* Button active/press effect */
.cta-button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 4px 16px -6px rgba(0, 102, 204, 0.4);
}

/* Button animations */
@keyframes buttonGlow {
  0% {
    box-shadow: 0 6px 24px -6px rgba(0, 102, 204, 0.3);
  }
  50% {
    box-shadow: 0 6px 32px -6px rgba(0, 102, 204, 0.5);
  }
  100% {
    box-shadow: 0 6px 24px -6px rgba(0, 102, 204, 0.3);
  }
}

@keyframes shine {
  0% {
    transform: rotate(45deg) translateX(-120%);
  }
  20%, 100% {
    transform: rotate(45deg) translateX(120%);
  }
}

/* Mobile optimization for the button */
@media (max-width: 768px) {
  .cta-button {
    padding: 16px 28px;
    font-size: 1.1rem;
    width: auto;
    min-width: 200px;
    /* Improve touch target size on mobile */
    min-height: 48px;
  }

  /* Special touch effect for mobile */
  .cta-button:active {
    transform: scale(0.96);
    background-position: right center;
    transition: 0.2s ease;
  }
}

/* Remove hover effects on touch devices but keep active state */
@media (hover: none) {
  .cta-button:hover {
    transform: none;
    box-shadow: 0 6px 24px -6px rgba(0, 102, 204, 0.3);
  }
  
  .cta-button:active {
    transform: scale(0.96);
    background-position: right center;
    box-shadow: 0 4px 16px -6px rgba(0, 102, 204, 0.4);
  }
}

/* Screenshot Section */
.screenshot-section {
  text-align: center;
  margin: -40px auto 80px;
  padding: 0 20px;
  position: relative;
  max-width: 1200px;
  background: #f5f5f7;
  perspective: 1000px;
}

.screenshot-section.visible .app-screenshot {
  animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: rotateX(10deg) translateY(50px);
  }
  to {
    opacity: 1;
    transform: rotateX(0) translateY(0);
  }
}

.app-screenshot {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Add Menu Overlay */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 999;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Menu Panel */
.menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 90%;
  max-width: 380px;
  background: #f5f5f7;
  box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
}

.menu-panel.active {
  transform: translateX(0);
}

/* Menu Header */
.menu-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  padding: 0;
}

.menu-header .app-icon img {
  width: 36px;
  height: 36px;
  filter: grayscale(1) saturate(0) brightness(0.25);
  transition: all 0.3s ease;
}

.menu-header .app-icon img:hover {
  filter: grayscale(1) saturate(0) brightness(0.35);
  transform: scale(1.05);
}

/* Menu Links */
.menu-links {
  padding: 20px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}

@media (min-width: 900px) {
  .header-links {
    display: flex;
  }

  .menu-icon {
    display: none;
  }

  .menu-panel,
  .menu-overlay {
    display: none;
  }
}

@media (max-width: 768px) {
  .brand-text {
    display: none;
  }
}

.menu-links a {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.125rem;
  color: #1d1d1f;
  padding: 14px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  letter-spacing: -0.01em;
  border-radius: 12px;
  margin: 4px 0;
  position: relative;
  overflow: hidden;
}

.menu-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 102, 204, 0.1);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
  border-radius: 12px;
  z-index: -1;
}

.menu-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.menu-links a:hover {
  color: #0066CC;
  background-color: rgba(0, 102, 204, 0.1);
}

.menu-links a.active {
  color: #0066CC;
  background-color: rgba(0, 102, 204, 0.12);
}

/* Footer */
.footer {
  flex-shrink: 0;
  width: 100%;
  padding: 20px;
  background: rgba(245, 245, 247, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}

.footer-links {
  margin-top: 10px;
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-links a {
  text-decoration: none;
  color: #86868b;
  font-weight: 650;
  letter-spacing: -0.01em;
  padding: 8px 10px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.footer-links a:hover {
  color: #0066CC;
  background: rgba(0, 102, 204, 0.08);
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 102, 204, 0.2), transparent);
  animation: wave 2s infinite linear;
}

@keyframes wave {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header .app-icon img {
  width: 34px;
  height: 34px;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.header .app-icon img:hover {
  transform: scale(1.05);
}

/* Add these animation classes */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-content h1 {
  animation: slideUp 0.6s ease-out forwards;
}

.hero-content .subheadline {
  animation: slideUp 0.6s ease-out 0.2s forwards;
  opacity: 0;
}

.hero-content .description {
  animation: slideUp 0.6s ease-out 0.4s forwards;
  opacity: 0;
}

.hero-content .cta-button {
  animation: slideUp 0.6s ease-out 0.6s forwards;
  opacity: 0;
}

/* Add scroll progress bar styles */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(to right, #0066CC, #5B9FFF);
  z-index: 1002;
  transition: width 0.1s ease;
}

.scroll-indicator {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.scroll-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-indicator::after {
  content: '↑';
  color: #0066CC;
  font-size: 20px;
}

/* Add/Update Media Queries for Mobile */
@media screen and (max-width: 768px) {
  /* Header adjustments */
  .header {
    padding: 0.8rem 1rem;
  }

  .app-icon img {
    width: 32px;
    height: 32px;
  }

  /* Hero Section adjustments */
  .hero {
    padding: 70px 16px 44px;
    text-align: left;
  }

  .hero-layout {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .hero-screenshot-card {
    max-width: 100%;
  }

  h1 {
    font-size: clamp(2rem, 7vw, 2.5rem);
    margin-bottom: 16px;
  }

  .subheadline {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    margin-bottom: 16px;
  }

  .description {
    font-size: 1rem;
    margin-bottom: 32px;
    padding: 0 10px;
  }

  /* Button adjustments */
  .cta-button {
    width: 90%;
    max-width: 300px;
    padding: 14px 24px;
    font-size: 1rem;
  }

  /* Screenshot adjustments */
  .screenshot-section {
    margin: -20px auto 60px;
    padding: 0 16px;
  }

  .app-screenshot {
    max-width: 300px;
    width: 85%;
  }

  /* Menu Panel adjustments */
  .menu-panel {
    width: 100%;
    max-width: none;
  }

  /* Scroll indicator positioning */
  .scroll-indicator {
    right: 16px;
    bottom: 16px;
    width: 36px;
    height: 36px;
  }

  /* Popup adjustments */
  .popup-content {
    width: 95%;
    padding: 24px;
    margin: 16px;
  }

  .popup-content input {
    padding: 12px;
    font-size: 16px; /* Prevent zoom on iOS */
  }

  .popup-content h2 {
    font-size: 1.5rem;
  }

  body {
    position: fixed; /* Fix for iOS momentum scrolling */
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  
  .help-content {
    padding-bottom: 80px; /* Increase padding on mobile */
  }
}

/* Add touch-specific improvements */
@media (hover: none) {
  /* Improve touch targets */
  .menu-links a {
    padding: 16px;
    margin: 8px 0;
  }

  .close-popup {
    padding: 12px;
  }

  /* Remove hover effects on mobile */
  .cta-button:hover {
    transform: none;
    box-shadow: none;
  }

  /* Add active state for touch */
  .cta-button:active {
    transform: scale(0.98);
    background-position: 100% 50%;
  }

  .menu-links a:active {
    background-color: rgba(0, 102, 204, 0.1);
  }
}

/* Fix iOS specific issues */
@supports (-webkit-touch-callout: none) {
  /* Prevent rubber-band scroll effect */
  html, body {
    position: fixed;
    width: 100%;
    /* Use viewport height minus addressbar height */
    min-height: -webkit-fill-available;
  }

  /* Fix input zoom */
  input[type="text"],
  input[type="email"] {
    font-size: 16px !important;
  }

  /* Fix backdrop-filter support */
  .header,
  .menu-overlay,
  .popup {
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Improve performance */
.app-screenshot,
.menu-panel,
.popup-content {
  will-change: transform;
}

/* Add smooth scroll behavior */
html {
  scroll-behavior: smooth;
  /* Prevent content shift on load */
  scrollbar-gutter: stable;
}

/* Add meta viewport tag to your HTML */

/* Enhanced Popup Styles */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 2000;
}

.popup.active {
  opacity: 1;
  visibility: visible;
}

.popup-content {
  background: rgba(255, 255, 255, 0.95);
  padding: 32px;
  border-radius: 20px;
  text-align: center;
  position: relative;
  max-width: 360px;
  width: 90%;
  transform: scale(0.95) translateY(20px);
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.popup.active .popup-content {
  transform: scale(1) translateY(0);
}

.popup-header {
  margin-bottom: 16px;
}

.popup-icon {
  margin-bottom: 16px;
}

.popup-icon img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.popup-content h2 {
  font-size: 1.5rem;
  background: linear-gradient(135deg, #0066CC 0%, #5B9FFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.popup-description {
  color: #1d1d1f;
  font-size: 1rem;
  margin-bottom: 16px;
  line-height: 1.4;
}

.benefits-list {
  background: linear-gradient(to bottom, rgba(0, 102, 204, 0.05), rgba(91, 159, 255, 0.05));
  border: 1px solid rgba(0, 102, 204, 0.1);
  border-radius: 16px;
  padding: 16px;
  margin: 16px 0;
}

.benefit-item {
  display: flex;
  align-items: center;
  padding: 8px;
  margin: 6px 0;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.benefit-item:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.8);
}

.benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.15);
  transition: all 0.3s ease;
}

.benefit-icon svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.benefit-item:hover .benefit-icon {
  background: rgba(0, 102, 204, 0.1);
  transform: scale(1.05);
}

.benefit-item:hover .benefit-icon svg {
  transform: scale(1.1);
}

.benefit-item:hover .benefit-icon svg path {
  fill: #0077ED;
}

.form-note {
  margin-top: 16px;
  color: #86868b;
  font-size: 0.85rem;
}

/* Success Message Enhancement */
.submit-button.success + .form-note {
  color: #28cd41;
  font-weight: 500;
}

/* Mobile Optimization */
@media (max-width: 480px) {
  .popup-content {
    padding: 24px 20px;
  }
  
  .popup-content h2 {
    font-size: 1.3rem;
  }
  
  .benefits-list {
    padding: 12px;
  }
  
  .benefit-item {
    padding: 6px;
  }
}

/* Loading Animation */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Enhanced Form Inputs */
.popup-content input {
  width: 100%;
  margin: 12px 0;
  padding: 12px 16px;
  border: 2px solid #e5e5e7;
  border-radius: 14px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  -webkit-appearance: none;
  appearance: none;
}

.popup-content input:focus {
  outline: none;
  border-color: #0066CC;
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
  transform: translateY(-1px);
}

.popup-content input::placeholder {
  color: #86868b;
  transition: color 0.3s ease;
}

.popup-content input:focus::placeholder {
  color: #0066CC;
}

/* Enhanced Submit Button */
.popup-content .submit-button {
  background: linear-gradient(45deg, #0066CC, #5B9FFF);
  color: white;
  padding: 14px 28px;
  border: none;
  border-radius: 16px;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
  width: 100%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 12px rgba(0, 102, 204, 0.2);
}

.popup-content .submit-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

.popup-content .submit-button:hover::before {
  left: 100%;
}

.popup-content .submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 102, 204, 0.3);
}

/* Enhanced Close Button */
.popup-content .close-popup {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: #86868b;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.popup-content .close-popup:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1d1d1f;
  transform: rotate(90deg);
}

/* Success and Error States with Animation */
@keyframes successPulse {
  0% { box-shadow: 0 0 0 0 rgba(40, 205, 65, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(40, 205, 65, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 205, 65, 0); }
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.submit-button.success {
  background: linear-gradient(45deg, #28cd41, #5ce272) !important;
  animation: successPulse 2s infinite;
}

.submit-button.error {
  background: linear-gradient(45deg, #ff3b30, #ff6961) !important;
  animation: errorShake 0.5s ease-in-out;
}

/* Enhanced Benefit Items */
.benefit-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.benefit-title {
  font-weight: 600;
  color: #1d1d1f;
  font-size: 1rem;
  margin-bottom: 4px;
}

.benefit-description {
  color: #86868b;
  font-size: 0.85rem;
}

/* Form Group Styling */
.form-group {
  position: relative;
  margin-bottom: 12px;
}

.form-group input {
  padding-left: 40px;
}

.form-group::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.form-group:focus-within::before {
  opacity: 1;
}

/* Input Icons */
.form-group input[name="name"]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1.66669C5.40002 1.66669 1.66669 5.40002 1.66669 10C1.66669 14.6 5.40002 18.3334 10 18.3334C14.6 18.3334 18.3334 14.6 18.3334 10C18.3334 5.40002 14.6 1.66669 10 1.66669ZM10 4.16669C11.3834 4.16669 12.5 5.28335 12.5 6.66669C12.5 8.05002 11.3834 9.16669 10 9.16669C8.61669 9.16669 7.50002 8.05002 7.50002 6.66669C7.50002 5.28335 8.61669 4.16669 10 4.16669ZM10 16C8.33335 16 6.83335 15.3334 5.75002 14.25C5.79169 12.125 7.87502 10.8334 10 10.8334C12.125 10.8334 14.2084 12.125 14.25 14.25C13.1667 15.3334 11.6667 16 10 16Z' fill='%230066CC'/%3E%3C/svg%3E");
}

.form-group input[name="email"]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6667 3.33335H3.33335C2.41669 3.33335 1.67502 4.08335 1.67502 5.00002L1.66669 15C1.66669 15.9167 2.41669 16.6667 3.33335 16.6667H16.6667C17.5834 16.6667 18.3334 15.9167 18.3334 15V5.00002C18.3334 4.08335 17.5834 3.33335 16.6667 3.33335ZM16.6667 6.66669L10 10.8334L3.33335 6.66669V5.00002L10 9.16669L16.6667 5.00002V6.66669Z' fill='%230066CC'/%3E%3C/svg%3E");
}

/* Enhanced Form Note */
.form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  color: #86868b;
  font-size: 0.85rem;
}

.form-note svg {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.form-note:hover svg {
  opacity: 1;
}

/* Mobile Optimization */
@media (max-width: 480px) {
  .benefit-title {
    font-size: 1rem;
  }
  
  .benefit-description {
    font-size: 0.85rem;
  }
  
  .form-note {
    font-size: 0.85rem;
  }
}

/* Help Page Styles */
.help-content {
  flex: 1 0 auto;
  padding: 20px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow-x: hidden;
}

.help-header {
  text-align: center;
  margin-bottom: 40px;
}

.help-header h1 {
  background: linear-gradient(135deg, #0066CC 0%, #5B9FFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.help-description {
  color: #86868b;
  font-size: 1.1rem;
  line-height: 1.5;
}

.search-container {
  margin-bottom: 40px;
}

.search-input {
  width: 100%;
  padding: 16px;
  border: 2px solid #e5e5e7;
  border-radius: 12px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #0066CC;
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}

.faq-section {
  margin-bottom: 40px;
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.faq-section h2 {
  color: #1d1d1f;
  font-size: 1.5rem;
  margin-bottom: 24px;
  font-weight: 600;
}

.faq-item {
  border-bottom: 1px solid #e5e5e7;
}

.faq-question {
  width: 100%;
  padding: 20px 0;
  text-align: left;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: #1d1d1f;
  font-size: 1.1rem;
  font-weight: 500;
}

.faq-question:hover {
  color: #0066CC;
}

.arrow-icon {
  transition: transform 0.3s ease;
}

.faq-item.active .arrow-icon {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  color: #86868b;
}

.faq-item.active .faq-answer {
  padding: 0 0 20px;
  max-height: 1000px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0066CC;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.back-button:hover {
  color: #0077ED;
}

@media (max-width: 768px) {
  .help-content {
    padding: 24px 16px;
  }

  .help-header h1 {
    font-size: 2rem;
  }

  .faq-section {
    padding: 16px;
  }
}

/* Support Contact Section */
.support-contact {
  margin: 40px auto;
  max-width: 800px;
  padding: 0 20px;
}

.support-card {
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(91, 159, 255, 0.05) 100%);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  border: 1px solid rgba(0, 102, 204, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.support-card h2 {
  color: #1d1d1f;
  font-size: 1.5rem;
  margin-bottom: 12px;
  font-weight: 600;
}

.support-card p {
  color: #86868b;
  font-size: 1.1rem;
  margin-bottom: 24px;
  line-height: 1.4;
}

.support-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0066CC;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 12px 24px;
  background: white;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
}

.support-email:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2);
  color: #0077ED;
}

.support-email svg {
  transition: transform 0.3s ease;
}

.support-email:hover svg {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .support-card {
    padding: 24px;
  }
  
  .support-card h2 {
    font-size: 1.3rem;
  }
  
  .support-card p {
    font-size: 1rem;
  }
  
  .support-email {
    font-size: 1rem;
    padding: 10px 20px;
  }
}

/* Add media query for mobile devices */
@media (max-width: 768px) {
  body {
    position: fixed; /* Fix for iOS momentum scrolling */
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  
  .help-content {
    padding-bottom: 80px; /* Increase padding on mobile */
  }
}

/* Enhanced Modal Styles */
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: rgba(255, 255, 255, 0.95);
  padding: 32px;
  border-radius: 24px;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 0 0 1px rgba(0, 102, 204, 0.1) inset;
  max-width: 90%;
  width: 380px;
  z-index: 1000;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(20px) saturate(180%);
}

.modal.show {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.modal-header {
  text-align: center;
  margin-bottom: 28px;
  position: relative;
}

.modal-title {
  background: linear-gradient(135deg, #0066CC 0%, #5B9FFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.modal-description {
  font-size: 1rem;
  color: #86868b;
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
}

.form-group {
  position: relative;
  margin-bottom: 20px;
}

.form-group input {
  width: 100%;
  padding: 16px;
  border: 2px solid rgba(0, 102, 204, 0.1);
  border-radius: 16px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.form-group input:focus {
  border-color: #0066CC;
  box-shadow: 
    0 0 0 4px rgba(0, 102, 204, 0.1),
    0 2px 8px rgba(0, 102, 204, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.form-group input::placeholder {
  color: #86868b;
  transition: all 0.3s ease;
}

.form-group input:focus::placeholder {
  opacity: 0.5;
  transform: translateX(10px);
}

.submit-button {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #0066CC 0%, #5B9FFF 100%);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.2);
  letter-spacing: -0.01em;
}

.submit-button:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

.submit-button:hover:before {
  left: 100%;
}

.submit-button:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 25px rgba(0, 102, 204, 0.25);
}

.form-note {
  font-size: 0.875rem;
  margin-top: 16px;
  color: #86868b;
  text-align: center;
  opacity: 0.8;
}

.close-button {
  position: absolute;
  top: -48px;
  right: -12px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #86868b;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.close-button:hover {
  background: white;
  transform: scale(1.1);
  color: #1d1d1f;
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.show {
  display: block;
  opacity: 1;
}

/* Success state enhancements */
.submit-button.success {
  background: linear-gradient(135deg, #34C759 0%, #30D158 100%);
  transform: scale(1.02);
}

/* Loading state enhancements */
.submit-button.loading {
  background: linear-gradient(135deg, #0066CC 0%, #5B9FFF 100%);
  pointer-events: none;
}

.submit-button.loading:after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  margin: -12px 0 0 -12px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Enhanced confetti */
.confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 0;
  transform-origin: center;
}

.confetti.active {
  animation: confetti 1.5s ease-out forwards;
}

@keyframes confetti {
  0% { 
    transform: translateY(0) rotate(0) scale(1); 
    opacity: 1; 
  }
  100% { 
    transform: translateY(-1000px) rotate(720deg) scale(0.5); 
    opacity: 0; 
  }
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .modal {
    width: 340px;
    padding: 28px;
  }

  .modal-title {
    font-size: 1.5rem;
  }

  .form-group input {
    padding: 14px;
  }

  .submit-button {
    padding: 14px;
  }
}