@layer components {
    .cta-section {
        background: var(--primary-50);
        padding: var(--space-16) 0;
        text-align: center;
    }
    .cta-title {
        font-size: var(--text-3xl); font-weight: 700; color: var(--primary-700);
        margin-bottom: var(--space-4);
    }
    .cta-desc {
        font-size: var(--text-base); color: var(--steel-600);
        max-width: 600px; margin: 0 auto var(--space-8); line-height: var(--leading-relaxed);
    }
    .cta-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
    @media (max-width: 768px) {
        .cta-section { padding: var(--space-12) 0; }
        .cta-title { font-size: var(--text-2xl); }
    }
}