/* How It Works page specific styles (moved from inline) */
.process-step { position: relative; margin-bottom: 4rem; }
.process-step:not(:last-child)::after { content: ''; position: absolute; left: 50%; bottom: -2rem; transform: translateX(-50%); width: 2px; height: 2rem; background: linear-gradient(to bottom, var(--primary-color), transparent); }
.step-visual { background: linear-gradient(135deg, #F8FFFE 0%, #E8F8F7 100%); border-radius: 16px; padding: 2rem; margin-bottom: 2rem; position: relative; overflow: hidden; }
.step-visual::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(32, 178, 170, 0.1) 0%, transparent 70%); }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--primary-color); color: white; border-radius: 50%; font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; }
.workflow-animation { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin: 2rem 0; }
.workflow-item { flex: 1; min-width: 150px; text-align: center; padding: 1rem; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
.workflow-item:hover { transform: translateY(-5px); }
.workflow-arrow { font-size: 1.5rem; color: var(--primary-color); margin: 0 0.5rem; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 2rem; }
.feature-item { background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s ease; }
.feature-item:hover { transform: translateY(-3px); }
.feature-icon { font-size: 2rem; margin-bottom: 1rem; }
@media (max-width: 768px) {
  .workflow-animation { flex-direction: column; }
  .workflow-arrow { transform: rotate(90deg); }
  .process-step:not(:last-child)::after { display: none; }
}