/* ============================================================
   GRS 环保页面
   ============================================================ */

.grs-hero {
    padding: 140px 24px 100px;
    text-align: center;
    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0ea5e9 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.grs-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(14,165,233,0.18) 0%, transparent 45%);
}
.grs-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.grs-hero__crumb { font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.85; margin-bottom: 16px; }
.grs-hero__crumb a { color: rgba(255,255,255,0.8); text-decoration: none; }
.grs-hero__crumb a:hover { color: #fff; text-decoration: underline; }
.grs-hero__title { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; line-height: 1.15; margin-bottom: 20px; }
.grs-hero__sub { font-size: 17px; line-height: 1.7; opacity: 0.92; max-width: 640px; margin: 0 auto; }

/* 通用 section 标题 */
.grs-section__title { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; color: #0f172a; margin-bottom: 14px; text-align: center; }
.grs-section__title--left { text-align: left; }
.grs-section__desc { font-size: 16px; color: #64748b; line-height: 1.7; text-align: center; max-width: 720px; margin: 0 auto 48px; }

/* 历史时间线 */
.grs-history { background: #fff; padding: 80px 24px; }
.grs-history__inner { max-width: 900px; margin: 0 auto; }
.grs-timeline { position: relative; padding-left: 32px; }
.grs-timeline::before { content: ''; position: absolute; left: 100px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, #0ea5e9, #0c4a6e); }
.grs-timeline__item { position: relative; margin-bottom: 40px; }
.grs-timeline__item:last-child { margin-bottom: 0; }
.grs-timeline__year { position: absolute; left: -132px; top: 0; font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #0369a1; width: 100px; text-align: right; }
.grs-timeline__dot { position: absolute; left: -24px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #0ea5e9; border: 3px solid #e0f2fe; box-shadow: 0 0 0 3px rgba(14,165,233,0.15); }
.grs-timeline__content { background: #f8fafc; border-radius: 12px; padding: 20px 24px; border-left: 3px solid #0ea5e9; }
.grs-timeline__content h4 { font-size: 17px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.grs-timeline__content p { font-size: 14px; color: #64748b; line-height: 1.6; margin: 0; }

/* 什么是 GRS 卡片 */
.grs-materials { background: #f0f9ff; padding: 80px 24px; }
.grs-materials__inner { max-width: 1100px; margin: 0 auto; }
.grs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grs-card { background: #fff; border-radius: 16px; padding: 32px 28px; box-shadow: 0 4px 20px rgba(12,74,110,0.08); transition: all 0.3s; }
.grs-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(12,74,110,0.15); }
.grs-card__icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #0c4a6e, #0ea5e9); color: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.grs-card__icon svg { width: 28px; height: 28px; }
.grs-card__name { font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.grs-card__desc { font-size: 14px; color: #64748b; line-height: 1.6; }

/* GRS 回收材料产品卡 */
.grs-recycled { background: #fff; padding: 80px 24px; }
.grs-recycled__inner { max-width: 1100px; margin: 0 auto; }
.grs-product { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(12,74,110,0.08); transition: all 0.3s; border: 1px solid #e0f2fe; }
.grs-product:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(12,74,110,0.15); }
.grs-product__visual { height: 200px; display: grid; place-items: center; background: #f8fafc; }
.grs-product__visual svg { width: 160px; height: 160px; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.15)); }
.grs-product__body { padding: 24px; }
.grs-product__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: #e0f2fe; color: #0c4a6e; margin-bottom: 10px; }
.grs-product__name { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.grs-product__desc { font-size: 14px; color: #64748b; line-height: 1.6; margin-bottom: 16px; }
.grs-product__specs { display: flex; gap: 12px; padding-top: 14px; border-top: 1px solid #f1f5f9; }
.grs-product__spec { text-align: center; flex: 1; }
.grs-product__spec strong { display: block; font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #0369a1; line-height: 1; }
.grs-product__spec span { font-size: 11px; color: #94a3b8; margin-top: 4px; display: block; }

/* GRS 认证徽章 */
.grs-cert { background: #f0f9ff; padding: 80px 24px; }
.grs-cert__inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: 60px; align-items: center; }
.grs-cert__visual { display: grid; place-items: center; }
.grs-cert__seal { position: relative; width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(135deg, #0c4a6e, #0ea5e9); display: grid; place-items: center; box-shadow: 0 12px 40px rgba(12,74,110,0.3); }
.grs-cert__seal-ring { position: absolute; inset: 12px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.5); }
.grs-cert__seal-text { color: #fff; font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; text-align: center; line-height: 1.2; }
.grs-cert__badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; padding: 4px 12px; border-radius: 6px; background: #0c4a6e; color: #fff; margin-bottom: 16px; }
.grs-cert__text > p { font-size: 15px; color: #64748b; line-height: 1.7; margin-bottom: 20px; }
.grs-cert__list { list-style: none; padding: 0; margin: 0; }
.grs-cert__list li { position: relative; padding-left: 28px; margin-bottom: 12px; font-size: 14px; color: #475569; line-height: 1.6; }
.grs-cert__list li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #e0f2fe; color: #0c4a6e; font-size: 12px; font-weight: 700; display: grid; place-items: center; }

/* CTA */
.grs-cta { background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 100%); padding: 80px 24px; text-align: center; color: #fff; }
.grs-cta__inner { max-width: 600px; margin: 0 auto; }
.grs-cta__title { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; margin-bottom: 14px; }
.grs-cta__desc { font-size: 16px; opacity: 0.9; margin-bottom: 28px; line-height: 1.7; }
.grs-cta__btn { display: inline-block; background: #fff; color: #0c4a6e; font-weight: 700; font-size: 16px; padding: 14px 32px; border-radius: 999px; text-decoration: none; transition: all 0.3s; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.grs-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }

/* 数据统计条 */
.grs-stats { background: #fff; padding: 0 24px; margin-top: -40px; position: relative; z-index: 2; }
.grs-stats__inner { max-width: 900px; margin: 0 auto; background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(12,74,110,0.12); padding: 32px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grs-stat { text-align: center; }
.grs-stat__num { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; color: #0369a1; line-height: 1; margin-bottom: 8px; }
.grs-stat__num span { font-size: 18px; color: #0ea5e9; }
.grs-stat__label { font-size: 13px; color: #64748b; }

/* 认证流程 */
.grs-process { background: #f0f9ff; padding: 80px 24px; }
.grs-process__inner { max-width: 1100px; margin: 0 auto; }
.grs-steps { display: flex; align-items: stretch; justify-content: center; gap: 0; flex-wrap: wrap; }
.grs-step { flex: 1; min-width: 180px; background: #fff; border-radius: 14px; padding: 28px 20px; text-align: center; box-shadow: 0 4px 16px rgba(12,74,110,0.08); position: relative; transition: all 0.3s; }
.grs-step:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(12,74,110,0.15); }
.grs-step__num { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #0c4a6e, #0ea5e9); color: #fff; font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.grs-step__icon { font-size: 36px; margin-bottom: 12px; }
.grs-step h4 { font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.grs-step p { font-size: 13px; color: #64748b; line-height: 1.6; }
.grs-step__arrow { display: grid; place-items: center; font-size: 24px; color: #0ea5e9; font-weight: 700; padding: 0 4px; }

/* 对比表格 */
.grs-compare { background: #fff; padding: 80px 24px; }
.grs-compare__inner { max-width: 900px; margin: 0 auto; }
.grs-compare__wrap { overflow-x: auto; border-radius: 16px; box-shadow: 0 4px 20px rgba(12,74,110,0.08); }
.grs-compare__table { width: 100%; border-collapse: collapse; background: #fff; min-width: 560px; }
.grs-compare__table th { background: linear-gradient(135deg, #0c4a6e, #0ea5e9); color: #fff; padding: 16px 20px; font-size: 14px; font-weight: 600; text-align: left; }
.grs-compare__table td { padding: 14px 20px; border-bottom: 1px solid #f1f5f9; font-size: 14px; color: #475569; }
.grs-compare__table tr:last-child td { border-bottom: none; }
.grs-compare__table tr:hover td { background: #f0f9ff; }
.grs-compare__green { color: #0369a1; font-weight: 600; }
.grs-compare__red { color: #94a3b8; }

/* 应用场景 */
.grs-scenarios { background: #f0f9ff; padding: 80px 24px; }
.grs-scenarios__inner { max-width: 1100px; margin: 0 auto; }
.grs-scenarios__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grs-scenario { background: #fff; border-radius: 16px; padding: 32px 28px; text-align: center; box-shadow: 0 4px 16px rgba(12,74,110,0.08); transition: all 0.3s; border-top: 3px solid #0ea5e9; }
.grs-scenario:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(12,74,110,0.15); }
.grs-scenario__icon { font-size: 44px; margin-bottom: 16px; }
.grs-scenario h4 { font-size: 17px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
.grs-scenario p { font-size: 14px; color: #64748b; line-height: 1.6; }

/* 响应式 */
@media (max-width: 900px) {
    .grs-cert__inner { grid-template-columns: 1fr; gap: 40px; }
    .grs-cert__seal { width: 160px; height: 160px; }
    .grs-cert__seal-text { font-size: 20px; }
    .grs-steps { flex-direction: column; align-items: center; }
    .grs-step { min-width: 280px; max-width: 320px; }
    .grs-step__arrow { transform: rotate(90deg); padding: 8px 0; }
    .grs-scenarios__grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
}
@media (max-width: 768px) {
    .grs-hero { padding: 120px 20px 70px; }
    .grs-hero__title { font-size: 36px; }
    .grs-section__title { font-size: 28px; }
    .grs-timeline { padding-left: 24px; }
    .grs-timeline::before { left: 7px; }
    .grs-timeline__year { position: static; width: auto; text-align: left; margin-bottom: 4px; }
    .grs-timeline__dot { left: -20px; }
    .grs-grid { grid-template-columns: 1fr; }
    .grs-history, .grs-materials, .grs-recycled, .grs-cert, .grs-cta, .grs-process, .grs-compare, .grs-scenarios { padding: 60px 20px; }
    .grs-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
    .grs-stat__num { font-size: 28px; }
}