/* =============================================================
   CMR / KIG 前台视觉增强层  (2026-11-07)
   设计语言借鉴 yuxicorrosion 等现代工业官网：
   - 双语层级 / eyebrow 小标签 + 大标题
   - 滚动揭示动画 (IntersectionObserver, 尊重 reduced-motion)
   - 数字滚动计数器
   - Hero 叠加层 / CTA 按钮升级 / 卡片悬停精修
   品牌色沿用黄黑 (#fdb812 / #111)，不照抄配色。
   仅新增 class，不覆盖现有 .hot-pro / .news 等核心布局规则。
   ============================================================= */
:root{
  --k-primary:#fdb812;
  --k-primary-dk:#e0a200;
  --k-ink:#111111;
  --k-ink-2:#1c1c1c;
  --k-gray-900:#171615;
  --k-gray-700:#3a3a3a;
  --k-gray-600:#5c5c5c;
  --k-gray-500:#707070;
  --k-gray-400:#848484;
  --k-gray-200:#f1f1f1;
  --k-gray-100:#fafafa;
  --k-white:#ffffff;
  --k-radius:10px;
  --k-radius-lg:16px;
  --k-shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --k-shadow-md:0 12px 30px rgba(0,0,0,.10);
  --k-shadow-lg:0 24px 60px rgba(0,0,0,.16);
  --k-font:'Source Sans Pro',Arial,'Segoe UI','Microsoft YaHei',sans-serif;
  --k-maxw:1400px;
  --k-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- 滚动揭示系统 (仅当 JS 激活时隐藏初始态) ---------- */
html.js-anim [data-reveal]{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s var(--k-ease),transform .7s var(--k-ease);
  transition-delay:var(--rd,0s);
}
html.js-anim [data-reveal].reveal-left{transform:translateX(-40px)}
html.js-anim [data-reveal].reveal-right{transform:translateX(40px)}
html.js-anim [data-reveal].reveal-scale{transform:scale(.94)}
html.js-anim [data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js-anim [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .khero-eyebrow,.khero-title,.khero-sub,.khero-cta{opacity:1!important;transform:none!important;animation:none!important}
}

/* ---------- Section 标题层级 (eyebrow + 大标题 + 副文) ---------- */
.ksec-head{text-align:center;max-width:760px;margin:0 auto 46px}
.ksec-eyebrow{
  display:inline-block;color:var(--k-primary);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;font-size:13px;margin-bottom:14px;
  position:relative;padding:0 14px;
}
.ksec-eyebrow::before,.ksec-eyebrow::after{
  content:"";position:absolute;top:50%;width:26px;height:1px;background:var(--k-primary);opacity:.6;
}
.ksec-eyebrow::before{left:-26px}.ksec-eyebrow::after{right:-26px}
.ksec-title{
  font-size:clamp(26px,3vw,40px);line-height:1.2;font-weight:800;color:var(--k-ink);
  margin:0 0 14px;letter-spacing:-.01em;
}
.ksec-sub{font-size:16px;line-height:1.7;color:var(--k-gray-500);margin:0 auto;max-width:620px}

/* ---------- Hero 叠加层 (首页 banner 之上固定文字) ---------- */
#swiper-banner{position:relative;overflow:hidden}
.khero-overlay{
  position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:flex-start;
  background:linear-gradient(100deg,rgba(17,17,17,.82) 0%,rgba(17,17,17,.55) 42%,rgba(17,17,17,.12) 100%);
  pointer-events:none; /* 让底层 banner 链接仍可点击 */
}
.khero-inner .kcta{pointer-events:auto}
.khero-inner{max-width:780px;padding:0 56px;color:#fff}
.khero-eyebrow{color:var(--k-primary);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:14px;margin:0 0 18px;opacity:0;transform:translateY(20px);animation:kup .8s var(--k-ease) .15s forwards}
.khero-title{font-size:clamp(30px,4.4vw,60px);line-height:1.08;font-weight:800;margin:0 0 20px;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35);opacity:0;transform:translateY(20px);animation:kup .8s var(--k-ease) .3s forwards}
.khero-sub{font-size:clamp(15px,1.4vw,19px);line-height:1.65;max-width:560px;color:rgba(255,255,255,.92);margin:0 0 32px;opacity:0;transform:translateY(20px);animation:kup .8s var(--k-ease) .45s forwards}
.khero-cta{display:flex;gap:16px;flex-wrap:wrap;opacity:0;transform:translateY(20px);animation:kup .8s var(--k-ease) .6s forwards}
@keyframes kup{to{opacity:1;transform:none}}
.kcta{display:inline-flex;align-items:center;justify-content:center;padding:15px 36px;font-weight:700;font-size:16px;border-radius:999px;text-decoration:none;transition:all .3s var(--k-ease);white-space:nowrap}
.kcta--solid{background:var(--k-primary);color:#111}
.kcta--solid:hover{background:#fff;color:#111;transform:translateY(-2px);box-shadow:0 14px 34px rgba(253,184,18,.4)}
.kcta--ghost{border:2px solid rgba(255,255,255,.85);color:#fff}
.kcta--ghost:hover{background:#fff;color:#111;border-color:#fff;transform:translateY(-2px)}

/* ---------- 实力数据 / 数字滚动 ---------- */
.kstats{background:var(--k-ink);color:#fff;padding:70px 0;position:relative}
.kstats::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(253,184,18,.10),rgba(253,184,18,0) 60%)}
.kstats-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;position:relative}
.kstat{flex:1;min-width:160px;text-align:center;position:relative;padding:0 12px}
.kstat:not(:last-child)::after{content:"";position:absolute;right:0;top:12%;height:76%;width:1px;background:rgba(255,255,255,.12)}
.kstat-num{font-size:clamp(38px,4.2vw,58px);font-weight:800;color:var(--k-primary);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kstat-label{margin-top:14px;font-size:14px;letter-spacing:.06em;color:rgba(255,255,255,.82);text-transform:uppercase}

/* ---------- 卡片悬停精修 (叠加于现有 hover，更顺滑 + 阴影) ---------- */
.hot-pro ul li,.news ul li{-webkit-backdrop-filter:blur(0);will-change:transform}
html.js-anim .hot-pro ul li:hover,.news ul li:hover{box-shadow:var(--k-shadow-md)}

/* =============================================================
   2026-11-07 晚间追加：内页 banner eyebrow / 卡片微交互 / 图高统一
   ============================================================= */

/* ---------- 内页 banner：暗色渐变叠加 + eyebrow 小标题 ---------- */
.banner{overflow:hidden}
.banner::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(17,17,17,.78) 0%,rgba(17,17,17,.45) 45%,rgba(17,17,17,.10) 100%);
}
.banner img{transition:transform 6s var(--k-ease)}
.banner:hover img{transform:scale(1.05)}
.banner-title{
  z-index:2;flex-direction:column;gap:12px;
  align-items:center;text-align:center;
}
.banner-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  color:var(--k-primary);font-weight:700;font-size:13px;
  letter-spacing:.28em;text-transform:uppercase;line-height:1;
}
.banner-eyebrow::before,.banner-eyebrow::after{
  content:"";width:30px;height:1px;background:var(--k-primary);opacity:.65;
}
.banner-title .banner-text{
  display:block;font-weight:700;letter-spacing:.02em;
  color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.45);
}

/* ---------- 新闻卡图片高度统一 (首页 .news 与列表页 .newslist-1) ---------- */
.news ul li .news-img{height:210px;overflow:hidden;background:var(--k-gray-200)}
.news ul li .news-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--k-ease)}
.news ul li:hover .news-img img{transform:scale(1.06)}
.newslist-1 li .news-img{overflow:hidden;background:var(--k-gray-200)}
.newslist-1 li .news-img img{height:100%;transition:transform .5s var(--k-ease)}
.newslist-1 li:hover .news-img img{transform:scale(1.06)}

/* ---------- 卡片 hover 抬升微交互 (统一节奏：-6px + 品牌黄阴影) ---------- */
.hot-pro ul li,.news ul li,.prolist-1 li,.newslist-1 li{
  transition:transform .35s var(--k-ease),box-shadow .35s var(--k-ease),background-color .3s ease;
}
.hot-pro ul li:hover,.news ul li:hover,.prolist-1 li:hover,.newslist-1 li:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.14),0 4px 12px rgba(253,184,18,.18);
}
.prolist-1 li .pro-img img,.prolist-1 li .pro-img>a img{transition:transform .5s var(--k-ease)}
.prolist-1 li:hover .pro-img img,.prolist-1 li:hover .pro-img>a img{transform:scale(1.08)}
.prolist-1 li .pro-name{transition:color .3s ease}
.prolist-1 li:hover .pro-name{color:var(--k-primary-dk)}
.newslist-1 li .news-title{transition:color .3s ease}
.newslist-1 li:hover .news-title{color:var(--k-primary-dk)}
/* Quality / Recruitment / faqs 的 project-list 卡片 */
.project-list li{
  border-radius:var(--k-radius);transition:transform .35s var(--k-ease),box-shadow .35s var(--k-ease),background-color .3s ease;
}
.project-list li:hover{transform:translateY(-4px);box-shadow:var(--k-shadow-md);background-color:var(--k-gray-100)}

/* ---------- 内页布局精修 ---------- */
/* 侧栏滚动吸附 (桌面端，列表页长内容时侧栏跟随) */
@media (min-width:1081px){
  .common-content .common-wrapper{align-items:flex-start}
  .common-side{position:sticky;top:86px}
  .common-side .side-about>div,.common-side .side-cate>div,
  .common-side .side-contact>div,.common-side .side-news>div,.common-side .side-pro>div{
    transition:background-color .25s ease,color .25s ease,padding-left .25s ease;
  }
  .common-side .item{transition:background-color .25s ease,padding-left .25s ease}
  .common-side .item:hover{background-color:var(--k-gray-100);padding-left:8px}
}
/* 联系页信息条目精修 */
.contact-info ul{list-style:none;padding:0;margin:0}
.contact-info ul li{border-left:3px solid var(--k-primary);background:var(--k-gray-100);
  padding:16px 20px;margin-bottom:14px;border-radius:0 var(--k-radius) var(--k-radius) 0;
  transition:transform .3s var(--k-ease),box-shadow .3s var(--k-ease)}
.contact-info ul li:hover{transform:translateX(6px);box-shadow:var(--k-shadow-sm)}
/* 分页按钮微交互 */
.common-pages a,.common-pages span{transition:all .25s ease}
.common-pages a:hover{background:var(--k-primary);border-color:var(--k-primary);color:#fff}

@media (max-width:768px){
  .banner-eyebrow{font-size:10px;letter-spacing:.2em;gap:10px}
  .banner-eyebrow::before,.banner-eyebrow::after{width:18px}
  .banner-title{gap:8px}
  .news ul li .news-img{height:150px}
  .applic-list ul li{width:48%;margin:0 0 4vw}
  .applic-name{padding:10px 12px;font-size:14px}
  .contact-info ul li{padding:12px 14px}
}

/* ---------- 顶部返回按钮平滑滚动 ---------- */
.top-btn{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease,background .3s}
.top-btn.show{opacity:1;visibility:visible}

/* ---------- 通用区块间距统一 ---------- */
.ksec{padding:80px 0}
.ksec--tight{padding:56px 0}

/* Quality 证书卡片 (.applic-item 原本无任何样式，全新建卡) */
.applic-list ul{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.applic-list ul li{
  width:calc(33.333% - 20px);margin:0 30px 30px 0;background:var(--k-white);
  border-radius:var(--k-radius);overflow:hidden;box-sizing:border-box;
  border:1px solid var(--k-gray-200);
  transition:transform .35s var(--k-ease),box-shadow .35s var(--k-ease),border-color .3s ease;
}
.applic-list ul li:nth-of-type(3n){margin-right:0}
.applic-item{display:block}
.applic-img{display:block;position:relative;padding-top:75%;overflow:hidden;background:var(--k-gray-200)}
.applic-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--k-ease)}
.applic-name{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;
  padding:16px 18px;font-weight:600;font-size:16px;color:var(--k-gray-700);
  transition:color .3s ease;
}
.applic-list ul li:hover{transform:translateY(-6px);box-shadow:var(--k-shadow-md);border-color:rgba(253,184,18,.5)}
.applic-list ul li:hover .applic-img img{transform:scale(1.07)}
.applic-list li:hover .applic-name{color:var(--k-primary-dk)}

/* 产品侧栏分类 hover 反馈 */
.common-side .side-cate>ul>li{transition:background-color .25s ease,border-color .25s ease}
.common-side .side-cate>ul>li:hover{background:var(--k-gray-100);border-bottom-color:rgba(253,184,18,.4)}

/* 平板：证书卡 2 列 */
@media (max-width:1080px) and (min-width:769px){
  .applic-list ul li{width:calc(50% - 10px);margin:0 20px 20px 0}
  .applic-list ul li:nth-of-type(3n){margin-right:20px}
  .applic-list ul li:nth-of-type(2n){margin-right:0}
}

/* ---------- 移动端适配 ---------- */
@media (max-width:768px){
  .khero-inner{padding:0 24px}
  .khero-eyebrow{font-size:11px;margin-bottom:12px}
  .khero-cta{gap:12px}
  .kcta{padding:13px 26px;font-size:15px}
  .kstats{padding:48px 0}
  .kstat{flex:1 1 45%;min-width:120px;margin-bottom:24px}
  .kstat:not(:last-child)::after{display:none}
  .ksec{padding:52px 0}
}
@media (max-width:480px){
  .kstat{flex:1 1 100%}
}