/* SMS-iT Feature Pages CSS */
/* Comprehensive styles for all feature page sections */

/* ===== FEATURE PAGE HERO SECTIONS ===== */
.feature-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}

.feature-hero .hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.feature-hero .hero-gradient {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 20%, var(--primary-blue-light) 80%, var(--primary-blue) 100%);
}

.feature-hero .hero-gradient.ai-gradient {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 20%, #667eea 80%, #764ba2 100%);
}

.feature-hero .hero-gradient.crm-gradient {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 20%, #10b981 80%, #059669 100%);
}

.feature-hero .hero-gradient.communication-gradient {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 20%, #06b6d4 80%, #0891b2 100%);
}

.feature-hero .hero-gradient.erp-gradient {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 20%, #f59e0b 80%, #d97706 100%);
}

.feature-hero .hero-gradient.smart-tools-gradient {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 20%, #8b5cf6 80%, #7c3aed 100%);
}

.feature-hero .hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.feature-hero .hero-text {
  max-width: 600px;
}

.feature-hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-6);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.feature-hero .hero-badge .badge-icon {
  font-size: var(--text-base);
}

.feature-hero .hero-badge .coming-soon-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  margin-left: var(--space-2);
  animation: pulse 2s infinite;
}

.feature-hero .hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.1;
  margin-bottom: var(--space-6);
}

.feature-hero .gradient-text {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.feature-hero .hero-description {
  font-size: var(--text-lg);
  color: var(--gray-800);
  line-height: 1.8;
  margin-bottom: var(--space-8);
  font-weight: 500;
}

.feature-hero .hero-stats {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.feature-hero .stat {
  text-align: center;
}

.feature-hero .stat-number {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--accent-yellow);
  margin-bottom: var(--space-1);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.feature-hero .stat-label {
  font-size: var(--text-sm);
  color: var(--gray-700);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.feature-hero .hero-actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.feature-hero .hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-hero .feature-dashboard {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  color: var(--white);
  max-width: 800px;
  width: 100%;
  animation: float 4s ease-in-out infinite;
}

.feature-hero .dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-hero .dashboard-header h4 {
  color: var(--white);
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

.feature-hero .status-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.feature-hero .status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--success-green);
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
  animation: pulse 2s infinite;
}

.feature-hero .status-dot.coming-soon {
  background: var(--warning-orange);
  box-shadow: 0 0 10px rgba(253, 126, 20, 0.5);
}

.feature-hero .status-indicator span {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.feature-hero .dashboard-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
  max-width: auto;  /* Add this line to make the overall container wider */
  margin: 0 auto;    /* Add this line to center the container */
}

.feature-hero .metric-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-height: 180px;
  display: flex;
  min-width: 150px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;  /* Add this to prevent text overflow */
}


.feature-hero .metric-icon {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.feature-hero .metric-content {
  display: flex;
  flex-direction: column;
}

.feature-hero .metric-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-1);
}

.feature-hero .metric-label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  word-wrap: break-word;     /* Add this to break long words */
  overflow-wrap: break-word; /* Add this for better browser support */
  hyphens: auto;             /* Add this to enable hyphenation */
  line-height: 1.2;          /* Add this to tighten line spacing */
}

/* ===== FEATURE SECTIONS ===== */
.features-section {
  padding: 120px 0;
  background: var(--white);
}

.features-section .section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.features-section .section-header h2 {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: var(--space-6);
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.features-section .section-header p {
  font-size: var(--text-lg);
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.feature-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

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

.feature-card .feature-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.feature-card h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.feature-card p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== AI CAPABILITIES SECTION ===== */
.ai-capabilities-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.ai-capabilities-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.ai-capabilities-section .container {
  position: relative;
  z-index: 1;
}

.ai-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.ai-capability {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
}

.ai-capability::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.ai-capability:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.ai-capability:hover::before {
  opacity: 1;
}

.ai-capability .capability-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-6);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.ai-capability h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.ai-capability p {
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.ai-capability .capability-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ai-capability .capability-features .feature {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ===== HOW IT WORKS SECTION ===== */
.how-it-works-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.how-it-works-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.how-it-works-section .container {
  position: relative;
  z-index: 1;
}

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.workflow-step {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.workflow-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.workflow-step:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.workflow-step:hover::before {
  opacity: 1;
}

.workflow-step .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  color: white;
  font-size: var(--text-2xl);
  font-weight: 800;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
  flex-shrink: 0;
}

.workflow-step .step-content {
  flex: 1;
}

.workflow-step .step-content h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-3);
}

.workflow-step .step-content p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== WORKFLOW SECTION ===== */
.workflow-section {
  padding: 120px 0;
  background: var(--white);
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.workflow-step {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
}

.workflow-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.workflow-step:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.workflow-step:hover::before {
  opacity: 1;
}

.workflow-step .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  color: white;
  font-size: var(--text-2xl);
  font-weight: 800;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.workflow-step h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.workflow-step p {
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.workflow-step .step-benefit {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success-green);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  display: inline-block;
}

/* ===== INTEGRATION FEATURES SECTION ===== */
.integration-features-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.integration-features-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.integration-features-section .container {
  position: relative;
  z-index: 1;
}

.integration-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.integration-feature {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
}

.integration-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.integration-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.integration-feature:hover::before {
  opacity: 1;
}

.integration-feature .feature-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  color: white;
  font-size: var(--text-2xl);
  font-weight: 800;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.integration-feature .feature-content h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.integration-feature .feature-content p {
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.integration-feature .feature-benefit {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success-green);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  display: inline-block;
}

/* ===== BENEFITS SECTION ===== */
.benefits-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.benefits-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.benefits-section .container {
  position: relative;
  z-index: 1;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (max-width: 768px) {
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.benefit-item {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 320px;
}

.benefit-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.benefit-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.benefit-item:hover::before {
  opacity: 1;
}

.benefit-item .benefit-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.benefit-item .benefit-icon i {
  color: #ffffff !important;
}

.benefit-item h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.benefit-item p {
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.benefit-item .benefit-metric {
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary-blue);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  display: inline-block;
}

/* ===== CHANNELS SECTION ===== */
.channels-section {
  padding: 120px 0;
  background: var(--white);
}

.channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.channel-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.channel-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.channel-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

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

.channel-card .channel-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.channel-card h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.channel-card p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== LEARNING AREAS SECTION ===== */
.learning-areas-section {
  padding: 120px 0;
  background: var(--white);
}

.learning-areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.learning-area-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.learning-area-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.learning-area-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.learning-area-card:hover::before {
  opacity: 1;
}

.learning-area-card .learning-area-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.learning-area-card h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.learning-area-card p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== TECHNOLOGIES SECTION ===== */
.technologies-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.technologies-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.technologies-section .container {
  position: relative;
  z-index: 1;
}

.technologies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.technology-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.technology-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #8b5cf6, #7c3aed, #6d28d9);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.technology-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

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

.technology-card .technology-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}

.technology-card h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.technology-card p {
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.technology-card .technology-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.technology-card .feature-tag {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ===== TOOLS CATEGORIES SECTION ===== */
.tools-categories-section {
  padding: 120px 0;
  background: var(--white);
}

.tools-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.tools-category {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
}

.tools-category::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #d97706, #b45309);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.tools-category:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.tools-category:hover::before {
  opacity: 1;
}

.tools-category .category-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.tools-category .category-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-2xl);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
  flex-shrink: 0;
}

.tools-category .category-header h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
  flex: 1;
}

.tools-category .tool-count {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
}

.tools-category .category-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tools-category .tool-item {
  background: var(--gray-100);
  color: var(--gray-700);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--transition-normal);
}

.tools-category .tool-item:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

/* ===== USE CASES SECTION ===== */
.use-cases-section {
  padding: 120px 0;
  background: var(--white);
}

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.use-case-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.use-case-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.use-case-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.use-case-card:hover::before {
  opacity: 1;
}

.use-case-card .use-case-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.use-case-card h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.use-case-card p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== DEMO CTA SECTION ===== */
.demo-cta-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.demo-cta-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.demo-cta-section .container {
  position: relative;
  z-index: 1;
}

.demo-cta-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-16);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-info h2 {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: var(--space-6);
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.demo-info p {
  font-size: var(--text-lg);
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-8);
}

.demo-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.demo-feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--gray-700);
}

.demo-feature i {
  color: var(--success-green);
  font-size: var(--text-lg);
}

.demo-action {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== CTA SECTION ===== */
.cta-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: var(--white);
  text-align: center;
  position: relative;
}

.cta-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23475569" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.cta-section .container {
  position: relative;
  z-index: 1;
}

.cta-section .cta-content h2 {
  font-size: var(--text-4xl);
  font-weight: 800;
  margin-bottom: var(--space-6);
  color: var(--white);
}

.cta-section .cta-content p {
  font-size: var(--text-xl);
  margin-bottom: var(--space-8);
  opacity: 0.9;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.cta-section .cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.cta-section .cta-trust {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
}

.cta-section .trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  opacity: 0.8;
}

.cta-section .trust-item i {
  font-size: var(--text-base);
}

/* ===== PERSONA TEMPLATES SECTION ===== */
.persona-templates-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.persona-templates-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.persona-templates-section .container {
  position: relative;
  z-index: 1;
}

.persona-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.persona-template {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
}

.persona-template::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.persona-template:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.persona-template:hover::before {
  opacity: 1;
}

.persona-template .template-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.persona-template .template-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-2xl);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  flex-shrink: 0;
}

.persona-template .template-header h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
  flex: 1;
}

.persona-template .template-description {
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.persona-template .template-traits {
  color: var(--gray-700);
  font-style: italic;
  margin-bottom: var(--space-4);
}

.persona-template .template-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.persona-template .feature-tag {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ===== PERSONA CREATION PROCESS SECTION ===== */
.persona-creation-section {
  padding: 120px 0;
  background: var(--white);
}

.persona-creation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.creation-step {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.creation-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.creation-step:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.creation-step:hover::before {
  opacity: 1;
}

.creation-step .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  color: white;
  font-size: var(--text-2xl);
  font-weight: 800;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
  flex-shrink: 0;
}

.creation-step .step-content {
  flex: 1;
}

.creation-step .step-content h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-3);
}

.creation-step .step-content p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== VOTING TYPES SECTION ===== */
.voting-types-section {
  padding: 120px 0;
  background: var(--white);
}

.voting-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.voting-type {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.voting-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.voting-type:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.voting-type:hover::before {
  opacity: 1;
}

.voting-type .type-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.voting-type h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.voting-type p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== WORKFLOW COMPONENTS SECTION ===== */
.workflow-components-section {
  padding: 120px 0;
  background: var(--white);
}

.components-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.component-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.component-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.component-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

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

.component-card .component-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.component-card h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.component-card p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== REGISTRY TYPES SECTION ===== */
.registry-types-section {
  padding: 120px 0;
  background: var(--white);
}

.registry-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.registry-type {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.registry-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.registry-type:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.registry-type:hover::before {
  opacity: 1;
}

.registry-type .type-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.registry-type h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.registry-type p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== CONTENT TYPES SECTION ===== */
.content-types-section {
  padding: 120px 0;
  background: var(--white);
}

.content-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.content-type {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.content-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.content-type:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.content-type:hover::before {
  opacity: 1;
}

.content-type .type-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.content-type h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.content-type p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== CONTEST TYPES SECTION ===== */
.contest-types-section {
  padding: 120px 0;
  background: var(--white);
}

.contest-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.contest-type {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.contest-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.contest-type:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.contest-type:hover::before {
  opacity: 1;
}

.contest-type .type-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.contest-type h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.contest-type p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== AGREEMENT TYPES SECTION ===== */
.agreement-types-section {
  padding: 120px 0;
  background: var(--white);
}

.agreement-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.agreement-type {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.agreement-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.agreement-type:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.agreement-type:hover::before {
  opacity: 1;
}

.agreement-type .type-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.agreement-type h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.agreement-type p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== CAMPAIGN TYPES SECTION ===== */
.campaign-types-section {
  padding: 120px 0;
  background: var(--white);
}

.campaign-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.campaign-type {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.campaign-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.campaign-type:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.campaign-type:hover::before {
  opacity: 1;
}

.campaign-type .type-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.campaign-type h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.campaign-type p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== CHAT FEATURES SECTION ===== */
.chat-features-section {
  padding: 120px 0;
  background: var(--white);
}

.chat-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.chat-feature {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.chat-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.chat-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.chat-feature:hover::before {
  opacity: 1;
}

.chat-feature .feature-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.chat-feature h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.chat-feature p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== KIOSK TYPES SECTION ===== */
.kiosk-types-section {
  padding: 120px 0;
  background: var(--white);
}

.kiosk-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.kiosk-type {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.kiosk-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.kiosk-type:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.kiosk-type:hover::before {
  opacity: 1;
}

.kiosk-type .type-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.kiosk-type h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.kiosk-type p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== VR EXPERIENCES SECTION ===== */
.vr-experiences-section {
  padding: 120px 0;
  background: var(--white);
}

.vr-experiences-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.vr-experience {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.vr-experience::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.vr-experience:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.vr-experience:hover::before {
  opacity: 1;
}

.vr-experience .experience-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.vr-experience h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.vr-experience p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== COMPARISON SECTION ===== */
.comparison-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.comparison-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.comparison-section .container {
  position: relative;
  z-index: 1;
}

/* ===== COMPARISON TABLE ===== */
.comparison-table {
  background: var(--white);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  max-width: 1000px;
  margin: 0 auto;
  border: 1px solid var(--gray-200);
}

.comparison-header {
  display: grid;
  grid-template-columns: 300px 200px 200px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  color: var(--white);
  font-weight: 700;
  font-size: var(--text-lg);
}

.comparison-header .feature-column {
  padding: var(--space-6);
  text-align: left;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  width: 300px;
  box-sizing: border-box;
}

.comparison-header .sms-column {
  padding: var(--space-6);
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  box-sizing: border-box;
}

.comparison-header .rcs-column {
  padding: var(--space-6);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  box-sizing: border-box;
}

.comparison-row {
  display: grid;
  grid-template-columns: 300px 200px 200px;
  border-bottom: 1px solid var(--gray-200);
  transition: background-color var(--transition-normal);
  min-height: 60px;
}

.comparison-row:hover {
  background-color: var(--gray-50);
}

.comparison-row:last-child {
  border-bottom: none;
}

.comparison-row .feature-name {
  padding: var(--space-4) var(--space-6);
  border-right: 1px solid var(--gray-200);
  font-weight: 600;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  width: 300px;
  box-sizing: border-box;
}

.comparison-row .sms-value {
  padding: var(--space-4) var(--space-6);
  border-right: 1px solid var(--gray-200);
  color: var(--gray-600);
  font-weight: 500;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  box-sizing: border-box;
}

.comparison-row .rcs-value {
  padding: var(--space-4) var(--space-6);
  color: var(--success-green);
  font-weight: 600;
  background: rgba(16, 185, 129, 0.05);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  box-sizing: border-box;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.comparison-item {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.comparison-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.comparison-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.comparison-item:hover::before {
  opacity: 1;
}

.comparison-item .comparison-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.comparison-item h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.comparison-item p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== AUTOMATION TYPES SECTION ===== */
.automation-types-section {
  padding: 120px 0;
  background: var(--white);
}

.automation-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.automation-type {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.automation-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.automation-type:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.automation-type:hover::before {
  opacity: 1;
}

.automation-type .type-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.automation-type h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.automation-type p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== TASK TYPES SECTION ===== */
.task-types-section {
  padding: 120px 0;
  background: var(--white);
}

.task-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.task-type {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.task-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.task-type:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.task-type:hover::before {
  opacity: 1;
}

.task-type .type-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.task-type h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.task-type p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== LEARNING METHODS SECTION ===== */
.learning-methods-section {
  padding: 120px 0;
  background: var(--white);
}

.learning-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.learning-method {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.learning-method::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.learning-method:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.learning-method:hover::before {
  opacity: 1;
}

.learning-method .method-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.learning-method h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.learning-method p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== WEB ACTIONS SECTION ===== */
.web-actions-section {
  padding: 120px 0;
  background: var(--white);
}

.web-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.web-action {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.web-action::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.web-action:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.web-action:hover::before {
  opacity: 1;
}

.web-action .action-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.web-action h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.web-action p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== SMART FEATURES SECTION ===== */
.smart-features-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.smart-features-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.smart-features-section .container {
  position: relative;
  z-index: 1;
}

.smart-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.smart-feature {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.smart-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #8b5cf6, #7c3aed, #6d28d9);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.smart-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.smart-feature:hover::before {
  opacity: 1;
}

.smart-feature .feature-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}

.smart-feature h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.smart-feature p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== EMAIL TYPES SECTION ===== */
.email-types-section {
  padding: 120px 0;
  background: var(--white);
}

.email-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.email-type {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.email-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.email-type:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.email-type:hover::before {
  opacity: 1;
}

.email-type .type-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.email-type h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.email-type p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== AUTOMATION SECTION ===== */
.automation-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.automation-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.automation-section .container {
  position: relative;
  z-index: 1;
}

.automation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.automation-feature {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.automation-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.automation-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.automation-feature:hover::before {
  opacity: 1;
}

.automation-feature .feature-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.automation-feature h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.automation-feature p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== HR MODULES SECTION ===== */
.hr-modules-section {
  padding: 120px 0;
  background: var(--white);
}

.hr-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.hr-module {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.hr-module::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.hr-module:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

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

.hr-module .module-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.hr-module h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.hr-module p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== EMPLOYEE SELF-SERVICE SECTION ===== */
.employee-self-service-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.employee-self-service-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.employee-self-service-section .container {
  position: relative;
  z-index: 1;
}

.employee-self-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.self-service-feature {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.self-service-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.self-service-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.self-service-feature:hover::before {
  opacity: 1;
}

.self-service-feature .feature-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.self-service-feature h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.self-service-feature p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== PIPELINE STAGES SECTION ===== */
.pipeline-stages-section {
  padding: 120px 0;
  background: var(--white);
}

.pipeline-stages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.pipeline-stage {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.pipeline-stage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.pipeline-stage:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.pipeline-stage:hover::before {
  opacity: 1;
}

.pipeline-stage .stage-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.pipeline-stage h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.pipeline-stage p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== MESSAGE TYPES SECTION ===== */
.message-types-section {
  padding: 120px 0;
  background: var(--white);
}

.message-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.message-type-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.message-type-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.message-type-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.message-type-card:hover::before {
  opacity: 1;
}

.message-type-card .message-type-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.message-type-card h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.message-type-card p {
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.message-type-card .message-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.message-type-card .feature-tag {
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary-blue);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.message-type {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.message-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.message-type:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.message-type:hover::before {
  opacity: 1;
}

.message-type .type-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.message-type h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.message-type p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== UNIFIED CHANNELS SECTION ===== */
.unified-channels-section {
  padding: 120px 0;
  background: var(--white);
}

.unified-channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.unified-channel {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.unified-channel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.unified-channel:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.unified-channel:hover::before {
  opacity: 1;
}

.unified-channel .channel-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.unified-channel h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.unified-channel p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== DIALING MODES SECTION ===== */
.dialing-modes-section {
  padding: 120px 0;
  background: var(--white);
}

.dialing-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.dialing-mode {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.dialing-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.dialing-mode:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.dialing-mode:hover::before {
  opacity: 1;
}

.dialing-mode .mode-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.dialing-mode h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.dialing-mode p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== CUSTOMER CONNECT SECTION ===== */
.customer-connect-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.customer-connect-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.customer-connect-section .container {
  position: relative;
  z-index: 1;
}

.customer-connect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.connect-feature {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.connect-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.connect-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.connect-feature:hover::before {
  opacity: 1;
}

.connect-feature .feature-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.connect-feature h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.connect-feature p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== IMESSAGE BUSINESS SECTION ===== */
.imessage-business-section {
  padding: 120px 0;
  background: var(--white);
}

.imessage-business-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.imessage-feature {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.imessage-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.imessage-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.imessage-feature:hover::before {
  opacity: 1;
}

.imessage-feature .feature-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.imessage-feature h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.imessage-feature p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== TIMELINE SECTION ===== */
.timeline-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.timeline-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.timeline-section .container {
  position: relative;
  z-index: 1;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.timeline-item {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.timeline-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #d97706, #b45309);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.timeline-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.timeline-item:hover::before {
  opacity: 1;
}

.timeline-item .timeline-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

.timeline-item h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.timeline-item p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== EARLY ACCESS SECTION ===== */
.early-access-section {
  padding: 120px 0;
  background: var(--white);
}

.early-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.access-feature {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.access-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.access-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.access-feature:hover::before {
  opacity: 1;
}

.access-feature .feature-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.access-feature h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.access-feature p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== INTEGRATION SECTION ===== */
.integration-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.integration-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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.integration-section .container {
  position: relative;
  z-index: 1;
}

.integration-section .section-header p {
  color: var(--gray-600) !important;
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.integration-item {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.integration-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.integration-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.integration-item:hover::before {
  opacity: 1;
}

.integration-item .integration-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

.integration-item h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.integration-item p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ===== ANIMATIONS ===== */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
  .features-grid,
  .ai-capabilities-grid,
  .workflow-grid,
  .integration-features-grid,
  .benefits-grid,
  .channels-grid,
  .learning-areas-grid,
  .technologies-grid,
  .tools-categories-grid,
  .use-cases-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
  }
  
  .demo-cta-content {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
  }
  
  .feature-hero .dashboard-metrics {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
}

@media (max-width: 768px) {
  .feature-hero {
    min-height: auto;
    padding: 80px 0 60px;
  }
  
  .feature-hero .hero-content {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
  }
  
  .feature-hero .hero-title {
    font-size: 2.25rem;
    line-height: 1.2;
    margin-bottom: var(--space-4);
  }
  
  .feature-hero .hero-description {
    font-size: var(--text-base);
    margin-bottom: var(--space-6);
  }
  
  .feature-hero .hero-stats {
    justify-content: center;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
  }
  
  .feature-hero .hero-actions {
    justify-content: center;
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .feature-hero .hero-actions .btn {
    width: 100%;
    max-width: 280px;
  }
  
  .feature-hero .feature-dashboard {
    max-width: 100%;
    margin-top: var(--space-8);
  }
  
  .feature-hero .dashboard-metrics {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .feature-hero .metric-card {
    min-height: 120px;
    min-width: auto;
    padding: var(--space-3);
  }
  
  .feature-hero .metric-label {
    font-size: var(--text-xs);
    line-height: 1.3;
  }
  
  .features-section,
  .ai-capabilities-section,
  .workflow-section,
  .integration-features-section,
  .benefits-section,
  .use-cases-section,
  .cta-section {
    padding: 80px 0;
  }
  
  .features-grid,
  .ai-capabilities-grid,
  .workflow-grid,
  .integration-features-grid,
  .benefits-grid,
  .channels-grid,
  .learning-areas-grid,
  .technologies-grid,
  .tools-categories-grid,
  .use-cases-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .feature-card,
  .ai-capability,
  .workflow-step,
  .integration-feature,
  .benefit-item,
  .channel-card,
  .learning-area-card,
  .technology-card,
  .tools-category,
  .use-case-card {
    padding: var(--space-6);
  }
  
  .feature-card .feature-icon,
  .ai-capability .capability-icon,
  .workflow-step .step-number,
  .integration-feature .feature-number,
  .benefit-item .benefit-icon,
  .channel-card .channel-icon,
  .learning-area-card .learning-area-icon,
  .technology-card .technology-icon,
  .tools-category .category-icon,
  .use-case-card .use-case-icon {
    width: 60px;
    height: 60px;
    font-size: var(--text-2xl);
  }
  
  .cta-section .cta-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
  
  .cta-section .cta-actions .btn {
    width: 100%;
    max-width: 280px;
  }
  
  .cta-section .cta-trust {
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .comparison-table {
    overflow-x: auto;
  }
  
  .comparison-header,
  .comparison-row {
    min-width: 700px;
  }
}

@media (max-width: 480px) {
  .feature-hero {
    padding: 60px 0 40px;
  }
  
  .feature-hero .hero-title {
    font-size: 1.875rem;
    line-height: 1.2;
  }
  
  .feature-hero .hero-description {
    font-size: var(--text-sm);
  }
  
  .feature-hero .hero-stats {
    gap: var(--space-4);
  }
  
  .feature-hero .stat-number {
    font-size: var(--text-lg);
  }
  
  .feature-hero .stat-label {
    font-size: var(--text-xs);
  }
  
  .feature-hero .metric-card {
    min-height: 100px;
    padding: var(--space-2);
  }
  
  .feature-hero .metric-value {
    font-size: var(--text-base);
  }
  
  .feature-hero .metric-label {
    font-size: 10px;
  }
  
  .features-section,
  .ai-capabilities-section,
  .workflow-section,
  .integration-features-section,
  .benefits-section,
  .use-cases-section,
  .cta-section {
    padding: 60px 0;
  }
  
  .feature-card,
  .ai-capability,
  .workflow-step,
  .integration-feature,
  .benefit-item,
  .channel-card,
  .learning-area-card,
  .technology-card,
  .tools-category,
  .use-case-card {
    padding: var(--space-4);
  }
  
  .feature-card .feature-icon,
  .ai-capability .capability-icon,
  .workflow-step .step-number,
  .integration-feature .feature-number,
  .benefit-item .benefit-icon,
  .channel-card .channel-icon,
  .learning-area-card .learning-area-icon,
  .technology-card .technology-icon,
  .tools-category .category-icon,
  .use-case-card .use-case-icon {
    width: 50px;
    height: 50px;
    font-size: var(--text-xl);
  }
  
  .feature-card h3,
  .ai-capability h3,
  .workflow-step h3,
  .integration-feature .feature-content h3,
  .benefit-item h3,
  .channel-card h3,
  .learning-area-card h3,
  .technology-card h3,
  .tools-category .category-header h3,
  .use-case-card h3 {
    font-size: var(--text-lg);
  }
  
  .section-header h2 {
    font-size: var(--text-2xl);
  }
  
  .section-header p {
    font-size: var(--text-sm);
  }
}

/* ===== ADDITIONAL MOBILE FIXES ===== */
@media (max-width: 375px) {
  .feature-hero .hero-title {
    font-size: 1.75rem;
  }
  
  .feature-hero .hero-badge {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
  }
  
  .feature-hero .metric-card {
    min-height: 90px;
  }
  
  .feature-hero .metric-value {
    font-size: var(--text-sm);
  }
  
  .feature-hero .metric-label {
    font-size: 9px;
  }
}


/* ===== ADDITIONAL MISSING SECTIONS ===== */

/* ===== ACTIVITY TYPES SECTION ===== */
.activity-types-section {
  padding: 120px 0;
  background: var(--white);
}

.activity-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== LOG FEATURES SECTION ===== */
.log-features-section {
  padding: 120px 0;
  background: var(--white);
}

.log-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== PERSONA TYPES SECTION ===== */
.persona-types-section {
  padding: 120px 0;
  background: var(--white);
}

.persona-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== CUSTOMIZATION SECTION ===== */
.customization-section {
  padding: 120px 0;
  background: var(--white);
}


/* ===== WORKFLOW TYPES SECTION ===== */
.workflow-types-section {
  padding: 120px 0;
  background: var(--white);
}

.workflow-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== INTEGRATIONS SECTION ===== */
.integrations-section {
  padding: 120px 0;
  background: var(--white);
}


/* ===== SCHEDULING PROCESS SECTION ===== */
.scheduling-process-section {
  padding: 120px 0;
  background: var(--white);
}


/* ===== REMINDER SYSTEM SECTION ===== */
.reminder-system-section {
  padding: 120px 0;
  background: var(--white);
}


/* ===== AI TECHNOLOGIES SECTION ===== */
.ai-technologies-section {
  padding: 120px 0;
  background: var(--white);
}

.ai-technologies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== AI APPLICATIONS SECTION ===== */
.ai-applications-section {
  padding: 120px 0;
  background: var(--white);
}

.ai-applications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== AI MODELS SECTION ===== */
.ai-models-section {
  padding: 120px 0;
  background: var(--white);
}

.ai-models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== CREDIT SYSTEM SECTION ===== */
.credit-system-section {
  padding: 120px 0;
  background: var(--white);
}

.credit-system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== VIRTUAL NUMBERS SECTION ===== */
.virtual-numbers-section {
  padding: 120px 0;
  background: var(--white);
}

.virtual-numbers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== GATEWAY TYPES SECTION ===== */
.gateway-types-section {
  padding: 120px 0;
  background: var(--white);
}

.gateway-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== SMPP FEATURES SECTION ===== */
.smpp-features-section {
  padding: 120px 0;
  background: var(--white);
}

.smpp-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== ECOMMERCE MODULES SECTION ===== */
.ecommerce-modules-section {
  padding: 120px 0;
  background: var(--white);
}

.ecommerce-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== OMNICHANNEL FEATURES SECTION ===== */
.omnichannel-features-section {
  padding: 120px 0;
  background: var(--white);
}

.omnichannel-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== CONNECTION TYPES SECTION ===== */
.connection-types-section {
  padding: 120px 0;
  background: var(--white);
}

.connection-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== UNIFIED EXPERIENCE SECTION ===== */
.unified-experience-section {
  padding: 120px 0;
  background: var(--white);
}

.unified-experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== SMS TYPES SECTION ===== */
.sms-types-section {
  padding: 120px 0;
  background: var(--white);
}

.sms-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== SMTP CONFIGURATION SECTION ===== */
.smtp-configuration-section {
  padding: 120px 0;
  background: var(--white);
}

.smtp-configuration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== EMAIL SECURITY SECTION ===== */
.email-security-section {
  padding: 120px 0;
  background: var(--white);
}

.email-security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== PLATFORMS SECTION ===== */
.platforms-section {
  padding: 120px 0;
  background: var(--white);
}

.platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== MANAGEMENT SECTION ===== */
.management-section {
  padding: 120px 0;
  background: var(--white);
}

.management-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.management-feature {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.management-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.management-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.management-feature:hover::before {
  opacity: 1;
}

.management-feature h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.management-feature p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}


/* ===== WIDGET TYPES SECTION ===== */
.widget-types-section {
  padding: 120px 0;
  background: var(--white);
}

.widget-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== AI STAFF TYPES SECTION ===== */
.ai-staff-types-section {
  padding: 120px 0;
  background: var(--white);
}


/* ===== STREAMING SOLUTIONS SECTION ===== */
.streaming-solutions-section {
  padding: 120px 0;
  background: var(--white);
}

.streaming-solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== TECHNICAL FEATURES SECTION ===== */
.technical-features-section {
  padding: 120px 0;
  background: var(--white);
}

.technical-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== TICKET MANAGEMENT SECTION ===== */
.ticket-management-section {
  padding: 120px 0;
  background: var(--white);
}

.ticket-management-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== SUPPORT CHANNELS SECTION ===== */
.support-channels-section {
  padding: 120px 0;
  background: var(--white);
}

.support-channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== TAG CATEGORIES SECTION ===== */
.tag-categories-section {
  padding: 120px 0;
  background: var(--white);
}

.tag-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== TEMPLATE CATEGORIES SECTION ===== */
.template-categories-section {
  padding: 120px 0;
  background: var(--white);
}

.template-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== TEMPLATE BUILDER SECTION ===== */
.template-builder-section {
  padding: 120px 0;
  background: var(--white);
}

.template-builder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== INTEGRATION CATEGORIES SECTION ===== */
.integration-categories-section {
  padding: 120px 0;
  background: var(--white);
}

.integration-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== POPULAR INTEGRATIONS SECTION ===== */
.popular-integrations-section {
  padding: 120px 0;
  background: var(--white);
}

.popular-integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== TOOL CATEGORIES SECTION ===== */
.tool-categories-section {
  padding: 120px 0;
  background: var(--white);
}

.tool-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== TOOL SHOWCASE SECTION ===== */
.tool-showcase-section {
  padding: 120px 0;
  background: var(--white);
}

.tool-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.tool-showcase-item {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.tool-showcase-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.tool-showcase-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.tool-showcase-item:hover::before {
  opacity: 1;
}

.tool-showcase-item h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.tool-showcase-item p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}


/* ===== ROLE TYPES SECTION ===== */
.role-types-section {
  padding: 120px 0;
  background: var(--white);
}

.role-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== TEAM BENEFITS SECTION ===== */
.team-benefits-section {
  padding: 120px 0;
  background: var(--white);
}

.team-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== BROADCAST TYPES SECTION ===== */
.broadcast-types-section {
  padding: 120px 0;
  background: var(--white);
}

.broadcast-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== VOICE TECHNOLOGY SECTION ===== */
.voice-technology-section {
  padding: 120px 0;
  background: var(--white);
}

.voice-technology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== VOICE FEATURES SECTION ===== */
.voice-features-section {
  padding: 120px 0;
  background: var(--white);
}

.voice-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== CALL FLOW SECTION ===== */
.call-flow-section {
  padding: 120px 0;
  background: var(--white);
}

.call-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== IVR FEATURES SECTION ===== */
.ivr-features-section {
  padding: 120px 0;
  background: var(--white);
}

.ivr-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== EXTENSION TYPES SECTION ===== */
.extension-types-section {
  padding: 120px 0;
  background: var(--white);
}

.extension-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== CALL MANAGEMENT SECTION ===== */
.call-management-section {
  padding: 120px 0;
  background: var(--white);
}

.call-management-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.call-management-feature {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.call-management-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.call-management-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.call-management-feature:hover::before {
  opacity: 1;
}

.call-management-feature h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.call-management-feature p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}


/* ===== FAX TYPES SECTION ===== */
.fax-types-section {
  padding: 120px 0;
  background: var(--white);
}

.fax-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== COMPLIANCE SECURITY SECTION ===== */
.compliance-security-section {
  padding: 120px 0;
  background: var(--white);
}

.compliance-security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== COMPLIANCE STANDARDS SECTION ===== */
.compliance-standards-section {
  padding: 120px 0;
  background: var(--white);
}

.compliance-standards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== COMPLIANCE PROCESS SECTION ===== */
.compliance-process-section {
  padding: 120px 0;
  background: var(--white);
}

.compliance-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== CARRIER NETWORK SECTION ===== */
.carrier-network-section {
  padding: 120px 0;
  background: var(--white);
}

.carrier-network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== SMART ROUTING SECTION ===== */
.smart-routing-section {
  padding: 120px 0;
  background: var(--white);
}

.smart-routing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== DATA TYPES SECTION ===== */
.data-types-section {
  padding: 120px 0;
  background: var(--white);
}

.data-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== ENRICHMENT PROCESS SECTION ===== */
.enrichment-process-section {
  padding: 120px 0;
  background: var(--white);
}

.enrichment-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== NUMBER TYPES SECTION ===== */
.number-types-section {
  padding: 120px 0;
  background: var(--white);
}

.number-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== NOTE TYPES SECTION ===== */
.note-types-section {
  padding: 120px 0;
  background: var(--white);
}

.note-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== AI FEATURES SECTION ===== */
.ai-features-section {
  padding: 120px 0;
  background: var(--white);
}

.ai-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== VALIDATION TYPES SECTION ===== */
.validation-types-section {
  padding: 120px 0;
  background: var(--white);
}

.validation-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== VALIDATION PROCESS SECTION ===== */
.validation-process-section {
  padding: 120px 0;
  background: var(--white);
}

.validation-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== PERFORMANCE FEATURES SECTION ===== */
.performance-features-section {
  padding: 120px 0;
  background: var(--white);
}

.performance-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== TRACKING TYPES SECTION ===== */
.tracking-types-section {
  padding: 120px 0;
  background: var(--white);
}

.tracking-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== ANALYTICS DASHBOARD SECTION ===== */
.analytics-dashboard-section {
  padding: 120px 0;
  background: var(--white);
}

.analytics-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== ANALYTICS CATEGORIES SECTION ===== */
.analytics-categories-section {
  padding: 120px 0;
  background: var(--white);
}

.analytics-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== AI INSIGHTS SECTION ===== */
.ai-insights-section {
  padding: 120px 0;
  background: var(--white);
}

.ai-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== PROJECT ORGANIZATION SECTION ===== */
.project-organization-section {
  padding: 120px 0;
  background: var(--white);
}

.project-organization-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== PRODUCTIVITY TOOLS SECTION ===== */
.productivity-tools-section {
  padding: 120px 0;
  background: var(--white);
}

.productivity-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== CORPORATE FEATURES SECTION ===== */
.corporate-features-section {
  padding: 120px 0;
  background: var(--white);
}

.corporate-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== COLLABORATION TOOLS SECTION ===== */
.collaboration-tools-section {
  padding: 120px 0;
  background: var(--white);
}

.collaboration-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== COLLABORATION FEATURES SECTION ===== */
.collaboration-features-section {
  padding: 120px 0;
  background: var(--white);
}

.collaboration-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== OFFICE APPLICATIONS SECTION ===== */
.office-applications-section {
  padding: 120px 0;
  background: var(--white);
}

.office-applications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== HOTEL MODULES SECTION ===== */
.hotel-modules-section {
  padding: 120px 0;
  background: var(--white);
}

.hotel-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== GUEST EXPERIENCE SECTION ===== */
.guest-experience-section {
  padding: 120px 0;
  background: var(--white);
}

.guest-experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}


/* ===== MEDIA TYPES SECTION ===== */
.media-types-section {
  padding: 120px 0;
  background: var(--white);
}

.media-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}



/* ===== FINAL MISSING SELECTORS ===== */

/* Activity and Log Features */
.activity-type-card,
.log-feature {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.activity-type-card::before,
.log-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.activity-type-card:hover,
.log-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.activity-type-card:hover::before,
.log-feature:hover::before {
  opacity: 1;
}

.activity-type-card h3,
.log-feature h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.activity-type-card p,
.log-feature p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* AI Features */
.ai-feature,
.ai-model-card,
.ai-staff-card,
.ai-tech-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.ai-feature::before,
.ai-model-card::before,
.ai-staff-card::before,
.ai-tech-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.ai-feature:hover,
.ai-model-card:hover,
.ai-staff-card:hover,
.ai-tech-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.ai-feature:hover::before,
.ai-model-card:hover::before,
.ai-staff-card:hover::before,
.ai-tech-card:hover::before {
  opacity: 1;
}

.ai-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

/* Analytics Features */
.analytics-category-card,
.analytics-feature {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.analytics-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

/* Icons */
.app-icon,
.campaign-icon,
.compliance-icon,
.model-icon,
.option-icon,
.platform-icon,
.role-icon,
.showcase-icon,
.solution-icon,
.task-type-icon,
.tech-icon,
.tier-icon,
.widget-icon,
.workflow-type-icon,
.voice-feature-icon,
.sms-type-icon,
.email-type-icon,
.media-type-icon,
.message-type-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-3xl);
  margin: 0 auto var(--space-6);
  box-shadow: 0 4px 20px rgba(20, 159, 214, 0.3);
}

/* Headers and Content */
.model-header,
.scenario-header,
.showcase-header,
.comparison-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.model-header h3,
.scenario-header h3,
.showcase-header h3,
.comparison-header h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
  flex: 1;
}

.application-content,
.benefit-content,
.early-access-content,
.insight-content,
.item-content,
.reminder-content,
.stage-content,
.timeline-content,
.type-content,
.workflow-content {
  flex: 1;
}

.application-content h3,
.benefit-content h3,
.early-access-content h3,
.insight-content h3,
.item-content h3,
.reminder-content h3,
.stage-content h3,
.timeline-content h3,
.type-content h3,
.workflow-content h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.application-content p,
.benefit-content p,
.early-access-content p,
.insight-content p,
.item-content p,
.reminder-content p,
.stage-content p,
.timeline-content p,
.type-content p,
.workflow-content p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* Card Types */
.broadcast-type,
.business-feature,
.builder-feature,
.category-card,
.channel-feature,
.channel-item,
.collaboration-feature,
.compliance-card,
.compliance-item,
.connection-type,
.corporate-feature,
.credit-feature,
.data-type-card,
.dialing-mode-card,
.email-type-card,
.experience-feature,
.extension-type,
.fax-type,
.gateway-type,
.ivr-feature,
.media-type-card,
.message-type-card,
.note-type-card,
.number-type,
.number-type-card,
.omnichannel-feature,
.organization-feature,
.performance-feature,
.persona-card,
.platform-card,
.platform-item,
.reminder-item,
.role-card,
.security-feature,
.smpp-feature,
.sms-type-card,
.tag-category-card,
.task-type-card,
.technical-feature,
.template-category-card,
.tool-category-card,
.tool-feature,
.tracking-type-card,
.validation-type-card,
.voice-feature-card,
.widget-type,
.workflow-item,
.workflow-type-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  text-align: center;
}

.broadcast-type::before,
.business-feature::before,
.builder-feature::before,
.category-card::before,
.channel-feature::before,
.channel-item::before,
.collaboration-feature::before,
.compliance-card::before,
.compliance-item::before,
.connection-type::before,
.corporate-feature::before,
.credit-feature::before,
.data-type-card::before,
.dialing-mode-card::before,
.email-type-card::before,
.experience-feature::before,
.extension-type::before,
.fax-type::before,
.gateway-type::before,
.ivr-feature::before,
.media-type-card::before,
.message-type-card::before,
.note-type-card::before,
.number-type::before,
.number-type-card::before,
.omnichannel-feature::before,
.organization-feature::before,
.performance-feature::before,
.persona-card::before,
.platform-card::before,
.platform-item::before,
.reminder-item::before,
.role-card::before,
.security-feature::before,
.smpp-feature::before,
.sms-type-card::before,
.tag-category-card::before,
.task-type-card::before,
.technical-feature::before,
.template-category-card::before,
.tool-category-card::before,
.tool-feature::before,
.tracking-type-card::before,
.validation-type-card::before,
.voice-feature-card::before,
.widget-type::before,
.workflow-item::before,
.workflow-type-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.broadcast-type:hover,
.business-feature:hover,
.builder-feature:hover,
.category-card:hover,
.channel-feature:hover,
.channel-item:hover,
.collaboration-feature:hover,
.compliance-card:hover,
.compliance-item:hover,
.connection-type:hover,
.corporate-feature:hover,
.credit-feature:hover,
.data-type-card:hover,
.dialing-mode-card:hover,
.email-type-card:hover,
.experience-feature:hover,
.extension-type:hover,
.fax-type:hover,
.gateway-type:hover,
.ivr-feature:hover,
.media-type-card:hover,
.message-type-card:hover,
.note-type-card:hover,
.number-type:hover,
.number-type-card:hover,
.omnichannel-feature:hover,
.organization-feature:hover,
.performance-feature:hover,
.persona-card:hover,
.platform-card:hover,
.platform-item:hover,
.reminder-item:hover,
.role-card:hover,
.security-feature:hover,
.smpp-feature:hover,
.sms-type-card:hover,
.tag-category-card:hover,
.task-type-card:hover,
.technical-feature:hover,
.template-category-card:hover,
.tool-category-card:hover,
.tool-feature:hover,
.tracking-type-card:hover,
.validation-type-card:hover,
.voice-feature-card:hover,
.widget-type:hover,
.workflow-item:hover,
.workflow-type-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.broadcast-type:hover::before,
.business-feature:hover::before,
.builder-feature:hover::before,
.category-card:hover::before,
.channel-feature:hover::before,
.channel-item:hover::before,
.collaboration-feature:hover::before,
.compliance-card:hover::before,
.compliance-item:hover::before,
.connection-type:hover::before,
.corporate-feature:hover::before,
.credit-feature:hover::before,
.data-type-card:hover::before,
.dialing-mode-card:hover::before,
.email-type-card:hover::before,
.experience-feature:hover::before,
.extension-type:hover::before,
.fax-type:hover::before,
.gateway-type:hover::before,
.ivr-feature:hover::before,
.media-type-card:hover::before,
.message-type-card:hover::before,
.note-type-card:hover::before,
.number-type:hover::before,
.number-type-card:hover::before,
.omnichannel-feature:hover::before,
.organization-feature:hover::before,
.performance-feature:hover::before,
.persona-card:hover::before,
.platform-card:hover::before,
.platform-item:hover::before,
.reminder-item:hover::before,
.role-card:hover::before,
.security-feature:hover::before,
.smpp-feature:hover::before,
.sms-type-card:hover::before,
.tag-category-card:hover::before,
.task-type-card:hover::before,
.technical-feature:hover::before,
.template-category-card:hover::before,
.tool-category-card:hover::before,
.tool-feature:hover::before,
.tracking-type-card:hover::before,
.validation-type-card:hover::before,
.voice-feature-card:hover::before,
.widget-type:hover::before,
.workflow-item:hover::before,
.workflow-type-card:hover::before {
  opacity: 1;
}

.broadcast-type h3,
.business-feature h3,
.builder-feature h3,
.category-card h3,
.channel-feature h3,
.channel-item h3,
.collaboration-feature h3,
.compliance-card h3,
.compliance-item h3,
.connection-type h3,
.corporate-feature h3,
.credit-feature h3,
.data-type-card h3,
.dialing-mode-card h3,
.email-type-card h3,
.experience-feature h3,
.extension-type h3,
.fax-type h3,
.gateway-type h3,
.ivr-feature h3,
.media-type-card h3,
.message-type-card h3,
.note-type-card h3,
.number-type h3,
.number-type-card h3,
.omnichannel-feature h3,
.organization-feature h3,
.performance-feature h3,
.persona-card h3,
.platform-card h3,
.platform-item h3,
.reminder-item h3,
.role-card h3,
.security-feature h3,
.smpp-feature h3,
.sms-type-card h3,
.tag-category-card h3,
.task-type-card h3,
.technical-feature h3,
.template-category-card h3,
.tool-category-card h3,
.tool-feature h3,
.tracking-type-card h3,
.validation-type-card h3,
.voice-feature-card h3,
.widget-type h3,
.workflow-item h3,
.workflow-type-card h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.broadcast-type p,
.business-feature p,
.builder-feature p,
.category-card p,
.channel-feature p,
.channel-item p,
.collaboration-feature p,
.compliance-card p,
.compliance-item p,
.connection-type p,
.corporate-feature p,
.credit-feature p,
.data-type-card p,
.dialing-mode-card p,
.email-type-card p,
.experience-feature p,
.extension-type p,
.fax-type p,
.gateway-type p,
.ivr-feature p,
.media-type-card p,
.message-type-card p,
.note-type-card p,
.number-type p,
.number-type-card p,
.omnichannel-feature p,
.organization-feature p,
.performance-feature p,
.persona-card p,
.platform-card p,
.platform-item p,
.reminder-item p,
.role-card p,
.security-feature p,
.smpp-feature p,
.sms-type-card p,
.tag-category-card p,
.task-type-card p,
.technical-feature p,
.template-category-card p,
.tool-category-card p,
.tool-feature p,
.tracking-type-card p,
.validation-type-card p,
.voice-feature-card p,
.widget-type p,
.workflow-item p,
.workflow-type-card p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* Special Grid Sections */
.connect-features-grid,
.platform-integrations-grid,
.automation-workflows-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.platform-integrations-section,
.automation-workflows-section {
  padding: 120px 0;
  background: var(--white);
}

/* FontAwesome Icons */
.fa-credit-card,
.fa-id-card {
  font-size: var(--text-3xl);
  color: var(--primary-blue);
}

/* Tech Features */
.tech-feature {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  display: inline-block;
  margin: var(--space-1);
}