/* 组件：EPC 解决方案横幅 — 外层布局容器 */
.epc-hero {
max-width: 1200px;
margin: 32px auto;
padding: 0 16px;
}

/* 组件：横幅主体（负责背景图、圆角与投影） */
.epc-banner {
position: relative;
height: 260px;
border-radius: var(--radius);
overflow: hidden;
/* 背景图片：与项目同级，使用相对路径，便于兼容 */
background: url("../images/epc-bg.jpg") center/cover no-repeat;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

/* 组件：可读性增强的渐变遮罩层 */
.epc-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.20) 0%,
    rgba(0, 0, 0, 0.50) 100%
);
/* 轻微饱和度与亮度调整提升层次感 */
backdrop-filter: saturate(1.05) brightness(0.95);
}

/* 组件：内容承载层（标题与副标题居中显示） */
.epc-content {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 24px;
color: #ffffff;
}

/* 组件：主标题样式 */
.epc-title {
margin: 0 0 10px 0;
font-size: var(--title-size);
font-weight: 700;
color: #ffffff;
letter-spacing: 0.6px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* 组件：副标题样式 */
.epc-subtitle {
margin: 0;
font-size: var(--subtitle-size);
opacity: 0.96;
}

/* 响应式：在较窄屏幕降低高度以保持比例 */
@media (max-width: 640px) {
.epc-banner {
    height: 220px;
}
}