@layer components {
    .page-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
    .page-wrapper main { flex: 1; }

    .scroll-reveal {
        opacity: 0; transform: translateY(var(--space-8));
        transition: opacity var(--duration-slow) var(--ease-default), transform var(--duration-slow) var(--ease-default);
    }
    .scroll-reveal.revealed { opacity: 1; transform: translateY(0); }

    .section { padding: var(--space-20) 0; }
    .section-alt { background: var(--bg-alt); }
    .section-cta { background: var(--primary-50); }
    .section-title { font-size: var(--text-3xl); font-weight: 700; color: var(--primary-700); text-align: center; margin-bottom: var(--space-3); }
    .section-sub { text-align: center; color: var(--steel-500); font-size: var(--text-sm); margin-bottom: var(--space-4); }
    .section-divider { width: 64px; height: 4px; background: var(--gold-500); margin: 0 auto var(--space-12); border-radius: 2px; }

    .empty-state { text-align: center; padding: var(--space-20) var(--space-5); color: var(--steel-400); }
    .empty-state p { font-size: var(--text-base); }

    .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
    .flex-center { display: flex; align-items: center; justify-content: center; }

    .tag { display: inline-block; background: var(--primary-50); color: var(--primary-600); font-size: var(--text-xs); font-weight: 600; padding: 3px var(--space-3); border-radius: var(--radius-full); }
    .tag-gold { background: var(--gold-50); color: var(--gold-700); }

    @media (max-width: 1024px) {
        .grid-3 { grid-template-columns: repeat(2, 1fr); }
        .grid-4 { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
        .section { padding: var(--space-12) 0; }
        .section-title { font-size: var(--text-2xl); }
        .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    }
}