.page-hero {
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
    /* border-bottom: 1px solid var(--border-color); */
    padding-top: 0;
    margin-top: 0;
}
.hero-inner { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    padding-top: 25px;
    padding-bottom: 25px;
    margin-left: 0; /* Align with global .container horizontal padding */
}
.hero-icon { font-size: 36px; color: var(--primary-color); }
.hero-title { margin: 0; font-size: 28px; font-weight: 700; }
.hero-subtitle { margin: 8px 0 0; color: var(--text-secondary); }

.page-cta { background: var(--bg-secondary); border-top: 1px solid var(--border-color); margin-top: 0px; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; }
.cta-content h2 { margin: 0 0 6px 0; }
.cta-content p { margin: 0; color: var(--text-secondary); }
.cta-actions { display: flex; gap: 10px; }
.btn-secondary { background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 8px 16px; border-radius: var(--border-radius); }
.btn-secondary:hover { border-color: var(--primary-color); color: var(--primary-color); }

@media (max-width: 768px) {
    .hero-inner, .cta-inner { 
        flex-direction: column; 
        align-items: flex-start;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .hero-inner {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

@media (max-width: 600px) {
    .hero-inner, .cta-inner { 
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .hero-inner {
        padding-top: 16px;
        padding-bottom: 16px;
        gap: 16px;
    }
    
    .hero-title {
        font-size: 24px;
    }
}

.breadcrumbs { background: var(--bg-primary); border-bottom: 1px solid var(--border-color); }
.breadcrumb-list { list-style: none; margin: 0; padding: 8px 0; display: flex; align-items: center; gap: 8px; }
.breadcrumb-item a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--primary-color); }
.breadcrumb-item.active { color: var(--text-primary); font-weight: 600; }
.breadcrumb-sep { color: var(--text-light); }