@layer base {
    .sub-nav { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 60px; z-index: 30; }
    .sub-nav .container { display: flex; gap: 24px; }
    .sub-nav-link {
        padding: 14px 0; font-size: 14px; font-weight: 500;
        color: var(--steel-600); border-bottom: 2px solid transparent; transition: all var(--transition);
    }
    .sub-nav-link:hover { color: var(--primary-600); }
    .sub-nav-link.active { color: var(--primary-600); border-bottom-color: var(--primary-600); }

    .section { padding: 80px 0; }
    .section-alt { background: var(--steel-50); }
    .section-title { font-size: 32px; font-weight: 700; color: var(--primary-600); text-align: center; margin-bottom: 10px; }
    .section-sub { text-align: center; color: var(--steel-500); font-size: 15px; margin-bottom: 16px; }
    .section-divider { width: 64px; height: 4px; background: var(--gold-500); margin: 0 auto 48px; border-radius: 2px; }

    .scroll-reveal { opacity: 0; transform: translateY(32px); transition: opacity .65s ease, transform .65s ease; }
    .scroll-reveal.revealed { opacity: 1; transform: translateY(0); }

    .empty-state { text-align: center; padding: 80px 20px; color: var(--steel-400); }
    .empty-state .icon { font-size: 48px; margin-bottom: 16px; }
    .empty-state p { font-size: 16px; }
    .empty-state .hint { font-size: 14px; margin-top: 8px; }
}