.page-header { padding: 180px 0 100px; background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-yellow-soft) 50%, var(--color-cream-dark) 100%); text-align: center; }
.page-header-content { max-width: 800px; margin: 0 auto; padding: 0 40px; }
.page-title { font-family: var(--font-primary); font-size: 56px; color: var(--color-text-primary); margin-bottom: 20px; }
.page-subtitle { font-size: 20px; color: var(--color-text-secondary); }
.process-section { padding: 100px 0; background: var(--color-white); }
.process-steps { max-width: 900px; margin: 0 auto; }
.process-step { display: flex; gap: 40px; margin-bottom: 50px; position: relative; }
.process-step:not(:last-child)::after { content: ''; position: absolute; left: 40px; bottom: -25px; width: 2px; height: 25px; background: var(--color-brown-light); }
.step-number { width: 80px; height: 80px; background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-brown-medium) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-primary); font-size: 28px; font-weight: 700; color: var(--color-white); flex-shrink: 0; box-shadow: var(--shadow-soft); }
.step-content h3 { font-family: var(--font-primary); font-size: 24px; color: var(--color-text-primary); margin-bottom: 15px; }
.step-content p { font-size: 15px; color: var(--color-text-secondary); line-height: 1.8; }
@media (max-width: 768px) { .page-title { font-size: 36px; } .process-step { flex-direction: column; gap: 20px; } .step-number { width: 60px; height: 60px; font-size: 22px; } }