/* style/page.css */
.hero-page {
    padding: 60px 0 40px;
    background: linear-gradient(135deg, #fef6f3 0%, #f0f9fa 100%);
    text-align: center;
}
.hero-page .breadcrumbs {
    font-size: 0.9rem;
    color: #999;
    margin-bottom: 1rem;
}
.hero-page .breadcrumbs a {
    color: #666;
    transition: color 0.2s;
}
.hero-page .breadcrumbs a:hover {
    color: #fe856b;
}
.hero-page .breadcrumbs .sep {
    color: #ccc;
    margin: 0 6px;
}
.hero-page h1 {
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}
.hero-page h1 .accent {
    color: #83cdd4;
}
.hero-page h1 .accent2 {
    color: #fe856b;
}
.hero-page .subtitle {
    font-size: 1.2rem;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .hero-page {
        padding: 40px 0 30px;
    }
    .hero-page .subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-page h1 {
        font-size: 1.8rem;
    }
}