/* Layout & Section Styles */

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 50%, rgba(51, 65, 85, 0.85) 100%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23366A6A" stop-opacity="0.3"/><stop offset="100%" stop-color="%2347C7C7" stop-opacity="0.1"/></radialGradient></defs><rect width="100%" height="100%" fill="url(%23a)"/></svg>');
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="25" cy="25" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23ffffff" opacity="0.15"/><circle cx="90" cy="40" r="0.5" fill="%23ffffff" opacity="0.1"/><circle cx="10" cy="80" r="0.5" fill="%23ffffff" opacity="0.1"/></svg>');
  animation: float 20s infinite linear;
}

/* Animated Background Elements */
.floating-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.shape {
  position: absolute;
  opacity: 0.1;
  animation: floatShapes 15s infinite ease-in-out;
}

.shape:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.shape:nth-child(2) {
  top: 60%;
  right: 10%;
  animation-delay: 5s;
}

.shape:nth-child(3) {
  bottom: 20%;
  left: 20%;
  animation-delay: 10s;
}

/* Navigation */
.nav-blur {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.transparent-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-link::after {
  background: linear-gradient(to right, #366A6A, #47C7C7);
}

/* Mobile Menu */
.mobile-menu {
  background: rgba(15, 23, 42, 0.98) !important;
  backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  transform: translateX(100%);
}

.mobile-menu.active {
  transform: translateX(0);
  background: rgba(15, 23, 42, 0.98) !important;
}

/* Mobile Menu Icon */
.mobile-menu-icon {
  transition: color 0.3s duration;
}

.transparent-header .mobile-menu-icon {
  color: white;
}

.nav-blur .mobile-menu-icon {
  color: #1e293b;
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
  .hero-section {
    min-height: 100vh;
    padding-top: 4rem;
  }

  .hero-section h1 {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
  }

  .feature-card,
  .faq-item {
    padding: 1.5rem !important;
  }

  .section-padding {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .section-title {
    font-size: 2.5rem !important;
  }

  .stats-box {
    padding: 1.5rem !important;
  }

  .mobile-flex-col {
    flex-direction: column !important;
  }

  .mobile-w-full {
    width: 100% !important;
  }

  .mobile-text-center {
    text-align: center !important;
  }

  .mobile-space-y-4>*+* {
    margin-top: 1rem !important;
  }

  .mobile-px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}