/* ==========================================================================
   King Chemical — 页面丰富化补充样式
   与 style.css 配合，不改动原文件
   ========================================================================== */
:root{
  --kc-red:#c03030;
  --kc-navy:#202070;
  --kc-navy-dark:#0f0f4a;
  --kc-line:#e3e6f0;
  --kc-soft:#f5f6fa;
  --kc-muted:#6b7188;
}

/* ==== Stats bar ==== */
.stats-bar{background:var(--kc-navy);color:#fff;padding:34px 0}
.stats-bar .container{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat strong{display:block;font-size:34px;line-height:1.1;color:#fff}
.stat span{display:block;margin-top:6px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72)}
@media(max-width:720px){.stats-bar .container{grid-template-columns:repeat(2,1fr);gap:26px}}

/* ==== Service grid ==== */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.service-card{background:#fff;border:1px solid var(--kc-line);border-radius:12px;padding:26px 22px;transition:.2s}
.service-card:hover{border-color:var(--kc-navy);transform:translateY(-2px);box-shadow:0 12px 28px rgba(32,32,112,.08)}
.service-card .num{font-size:12.5px;font-weight:700;color:var(--kc-red);letter-spacing:.1em}
.service-card h3{margin:10px 0 8px;font-size:17px;color:var(--kc-navy)}
.service-card p{margin:0;font-size:14px;color:var(--kc-muted);line-height:1.65}
@media(max-width:980px){.service-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.service-grid{grid-template-columns:1fr}}

/* ==== Process steps ==== */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:step;margin-top:12px}
.process .step{position:relative;padding:0 18px;text-align:center}
.process .step::before{counter-increment:step;content:counter(step);display:block;width:46px;height:46px;margin:0 auto 14px;border-radius:50%;background:#fff;border:2px solid var(--kc-line);color:var(--kc-navy);font-weight:700;line-height:42px;font-size:16px}
.process .step h4{margin:0 0 6px;font-size:15px;color:var(--kc-navy)}
.process .step p{margin:0;font-size:13px;color:var(--kc-muted);line-height:1.6}
.process .step:not(:last-child)::after{content:"";position:absolute;top:23px;right:-9px;width:18px;height:2px;background:var(--kc-line)}
@media(max-width:900px){.process{grid-template-columns:1fr;gap:26px}.process .step:not(:last-child)::after{display:none}}

/* ==== CTA band ==== */
.cta-band{background:linear-gradient(120deg,var(--kc-navy) 0%,var(--kc-navy-dark) 100%);color:#fff;padding:56px 0;text-align:center}
.cta-band h2{color:#fff;margin:0 0 12px;font-size:29px;line-height:1.3}
.cta-band p{color:rgba(255,255,255,.78);max-width:660px;margin:0 auto 26px;font-size:16px;line-height:1.7}
.cta-band .btn{background:var(--kc-red);border-color:var(--kc-red);color:#fff !important}
.cta-band .btn:hover{background:#a52828;border-color:#a52828;color:#fff !important}
.cta-band .btn-outline{background:transparent;border:1px solid rgba(255,255,255,.65);color:#fff !important;margin-left:12px}
.cta-band .btn-outline:hover{background:rgba(255,255,255,.18);border-color:#fff;color:#fff !important}
@media(max-width:520px){.cta-band .btn-outline{margin:12px 0 0}}

/* ==== FAQ accordion ==== */
.faq-list{max-width:880px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--kc-line);border-radius:10px;margin-bottom:12px;overflow:hidden}
.faq-item summary{cursor:pointer;padding:18px 52px 18px 22px;font-weight:600;color:var(--kc-navy);list-style:none;position:relative;font-size:15.5px;line-height:1.5}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--kc-red);font-weight:400;line-height:1}
.faq-item[open] summary::after{content:"\2013"}
.faq-item .ans{padding:0 22px 20px;color:var(--kc-muted);font-size:14.5px;line-height:1.75}

/* ==== A-Z browse index ==== */
.az-index{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 26px}
.az-index a,.az-index span{min-width:34px;height:34px;line-height:32px;text-align:center;border:1px solid var(--kc-line);border-radius:8px;font-size:13px;font-weight:600;color:var(--kc-navy);text-decoration:none;padding:0 9px;background:#fff}
.az-index a:hover{background:var(--kc-navy);color:#fff;border-color:var(--kc-navy)}
.az-index span{color:#c7cad8;background:var(--kc-soft)}

/* ==== catalog hint bar ==== */
.catalog-hint{background:var(--kc-soft);border:1px solid var(--kc-line);border-radius:10px;padding:14px 18px;font-size:14px;color:var(--kc-muted);margin-bottom:22px;line-height:1.7}
.catalog-hint strong{color:var(--kc-navy)}

/* ==== product card extras ==== */
.product-card .cas-line{font-size:12.5px;color:var(--kc-muted);letter-spacing:.02em;margin-top:2px}

/* ==== related products ==== */
.rel-wrap{margin-top:54px;padding-top:34px;border-top:1px solid var(--kc-line)}
.rel-wrap h2{font-size:22px;color:var(--kc-navy);margin:0 0 20px}

/* ==== documents page ==== */
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.doc-card{background:#fff;border:1px solid var(--kc-line);border-radius:12px;padding:24px;display:flex;flex-direction:column}
.doc-card .k{font-size:12.5px;font-weight:700;color:var(--kc-red);letter-spacing:.1em}
.doc-card h3{margin:10px 0 8px;font-size:16.5px;color:var(--kc-navy)}
.doc-card p{margin:0 0 16px;font-size:14px;color:var(--kc-muted);line-height:1.7;flex:1}
@media(max-width:900px){.doc-grid{grid-template-columns:1fr}}

/* ==== 入口卡（行业/服务导航） ==== */
.link-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.link-card{display:block;background:#fff;border:1px solid var(--kc-line);border-radius:12px;padding:22px;text-decoration:none;transition:.2s}
.link-card:hover{border-color:var(--kc-navy);box-shadow:0 12px 28px rgba(32,32,112,.08)}
.link-card h3{margin:0 0 8px;font-size:16px;color:var(--kc-navy)}
.link-card p{margin:0;font-size:13.5px;color:var(--kc-muted);line-height:1.65}
@media(max-width:900px){.link-cards{grid-template-columns:1fr}}

/* ==== global sourcing ==== */
.source-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.source-card{background:#fff;border:1px solid var(--kc-line);border-radius:12px;padding:26px 22px;transition:.2s}
.source-card:hover{border-color:var(--kc-navy);transform:translateY(-2px);box-shadow:0 12px 28px rgba(32,32,112,.08)}
.source-card .flag{width:46px;height:46px;border-radius:10px;margin-bottom:16px}
.source-card h3{margin:0 0 8px;font-size:17px;color:var(--kc-navy)}
.source-card p{margin:0;font-size:14px;color:var(--kc-muted);line-height:1.7}
@media(max-width:900px){.source-grid{grid-template-columns:1fr}}

/* ==== doc hint ==== */
.doc-hint{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid var(--kc-line);border-left:4px solid var(--kc-red);border-radius:10px;padding:20px 24px}
.doc-hint h3{margin:0 0 4px;font-size:16.5px;color:var(--kc-navy)}
.doc-hint p{margin:0;font-size:14px;color:var(--kc-muted);line-height:1.65}