.page-hero {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff;
    padding: 3rem 0;
    margin-bottom: 2rem;
}

.page-hero__title {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin: 0 0 .5rem;
    color: #fff;
}

.page-hero__subtitle {
    font-size: var(--text-lg);
    opacity: .85;
    margin: 0;
    color: #fff;
}

@media (max-width: 768px) {
    .page-hero { padding: 2rem 0; }
    .page-hero__title { font-size: var(--text-2xl); }
}