/**
 * @file
 * Homepage specific styles for ProCCM Tailwind theme.
 */

/* Hero section */
.hero-section {
  @apply bg-gradient-to-br from-blue-50 to-indigo-100 section-padding;
}

.hero-content {
  @apply max-w-4xl mx-auto text-center;
}

.hero-title {
  @apply text-5xl lg:text-6xl font-bold text-gray-900 mb-6;
}

.hero-subtitle {
  @apply text-xl text-gray-600 leading-relaxed;
}

/* Features section */
.features-section {
  @apply section-padding bg-white;
}

.features-grid {
  @apply grid md:grid-cols-2 lg:grid-cols-3 gap-8;
}

.feature-card {
  @apply card text-center;
}

.feature-icon {
  @apply w-16 h-16 bg-proccm-blue rounded-full flex items-center justify-center mx-auto mb-6;
}

.feature-icon svg {
  @apply w-8 h-8 text-white;
}

.feature-title {
  @apply text-xl font-bold text-gray-900 mb-4;
}

.feature-description {
  @apply text-gray-600;
}

/* Metrics section */
.metrics-section {
  @apply bg-gray-50 section-padding;
}

.metrics-grid {
  @apply grid md:grid-cols-4 gap-8;
}

.metric-card {
  @apply text-center;
}

.metric-number {
  @apply text-4xl font-bold text-proccm-blue mb-2;
}

.metric-label {
  @apply text-gray-600;
}

/* Target audience section */
.audience-section {
  @apply section-padding bg-white;
}

.audience-grid {
  @apply grid md:grid-cols-2 lg:grid-cols-3 gap-8;
}

.audience-card {
  @apply card;
}

.audience-card img {
  @apply w-full h-48 object-cover rounded-xl mb-6;
}

.audience-title {
  @apply text-xl font-bold text-gray-900 mb-4;
}

.audience-description {
  @apply text-gray-600 mb-6;
}

.audience-link {
  @apply text-proccm-blue font-medium hover:text-blue-700 transition-colors;
}

/* Call to action section */
.cta-section {
  @apply bg-gradient-to-r from-proccm-blue to-blue-600 rounded-2xl p-8 text-center text-white;
}

.cta-title {
  @apply text-3xl font-bold mb-4;
}

.cta-description {
  @apply text-xl mb-8 opacity-90;
}

.cta-buttons {
  @apply flex flex-col sm:flex-row gap-4 justify-center;
}

.cta-button-primary {
  @apply bg-white text-proccm-blue px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors;
}

.cta-button-secondary {
  @apply border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-proccm-blue transition-colors;
}

/* Newsletter section */
.newsletter-section {
  @apply bg-gradient-to-r from-proccm-blue to-blue-600 rounded-2xl p-8 text-center text-white;
}

.newsletter-title {
  @apply text-3xl font-bold mb-4;
}

.newsletter-description {
  @apply text-xl mb-8 opacity-90;
}

.newsletter-form {
  @apply max-w-md mx-auto flex gap-4;
}

.newsletter-form input {
  @apply flex-1 px-4 py-3 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-white;
}

.newsletter-form button {
  @apply bg-white text-proccm-blue px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors;
}