/* ============================================
   Features Page Styles
   ============================================ */

/* Hero */
.features-hero {
  padding: calc(var(--nav-height) + var(--space-4xl)) 0 var(--space-4xl) !important;
  background: linear-gradient(135deg, #fffafa 0%, #fef2f2 40%, #fee2e2 100%) !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.features-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(229,57,53,0.08) 0%, transparent 60%);
  border-radius: 50%;
}

.features-hero h1 {
  max-width: 700px;
  margin: 0 auto var(--space-md);
}

.features-hero p {
  font-size: var(--fs-lg);
  max-width: 560px;
  margin: 0 auto;
}

/* Modules Grid */
.modules-section {
  background: var(--bg-primary);
  position: relative;
  z-index: 1;
}

.modules-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(var(--gray-200) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.4;
  z-index: -1;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl);
}

.module-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 3rem 2.5rem;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 1.5rem;
  box-shadow: 0 4px 20px -2px rgba(0,0,0,0.03);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  height: 100%;
  z-index: 2;
}

.module-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--primary-500), var(--primary-400));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.module-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -8px rgba(0,0,0,0.08);
  border-color: var(--gray-300);
}

.module-card:hover::before {
  opacity: 1;
}

.module-icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.module-icon.indigo { background: #eef2ff; color: #4f46e5; }
.module-icon.violet { background: #f3e8ff; color: #7c3aed; }
.module-icon.emerald { background: #d1fae5; color: #059669; }
.module-icon.amber { background: #fef3c7; color: #d97706; }
.module-icon.sky { background: #e0f2fe; color: #0284c7; }
.module-icon.rose { background: #ffe4e6; color: #e11d48; }
.module-icon.teal { background: #ccfbf1; color: #0d9488; }
.module-icon.slate { background: #f1f5f9; color: #475569; }

.module-body h3 {
  font-size: 1.75rem;
  margin-bottom: var(--space-sm);
  color: var(--gray-900);
  font-weight: 800;
  letter-spacing: -0.5px;
}

.module-body > p {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
  line-height: 1.6;
}

.module-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.module-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-700);
  line-height: 1.4;
}

.module-features li svg {
  width: 20px;
  height: 20px;
  color: var(--primary-500);
  flex-shrink: 0;
  stroke-width: 2.5;
  margin-top: 2px;
}

/* CTA */
.features-cta {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-800), var(--accent-600));
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.features-cta h2 { color: white; }
.features-cta p {
  color: rgba(255,255,255,0.85);
  font-size: var(--fs-lg);
  max-width: 520px;
  margin: 0 auto var(--space-2xl);
}

.features-cta .btn-secondary {
  background: white;
  color: var(--primary-700);
  border: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.features-cta .btn-secondary:hover {
  background: var(--primary-50);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 992px) {
  .modules-grid {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin: 0 auto;
  }
}

@media (max-width: 576px) {
  .module-card {
    flex-direction: column;
    gap: var(--space-md);
  }
}