@layer components {
    .page-hero {
        background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-500) 100%);
        padding: 120px 0 var(--space-12); position: relative; overflow: hidden;
    }
    .page-hero h1 { color: var(--bg); font-size: var(--text-4xl); font-weight: 700; margin-bottom: var(--space-2); }
    .page-hero .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); flex-wrap: wrap; }
    .page-hero .breadcrumb a { color: rgba(255,255,255,.65); }
    .page-hero .breadcrumb a:hover { color: var(--bg); }
    .page-hero .breadcrumb .sep { color: rgba(255,255,255,.35); }
    .page-hero .breadcrumb .current { color: var(--gold-400); }
    @media (max-width: 768px) {
        .page-hero { padding: 100px 0 var(--space-10); }
        .page-hero h1 { font-size: var(--text-2xl); }
    }
}