/* ====================================================
   index.css - 首页模块样式（广东吉塑新材料 · 方案B 三色品牌）
   ----------------------------------------------------
   本文件**只在首页**加载（BaseUI 的 GetIndexHead 分支），承载首页 12 个模块：
   首屏轮播 / 品牌色带 / 产品中心 / 系列详情 / 应用领域 / 定制服务 /
   行动引导 / 企业实力 / 资质认证 / 核心数据 / 合作客户 / 企业动态。
   头尾样式在 headfoot.css（全站加载），颜色在 color.css。
   本文件由脚本从 html/方案B-三色品牌-定稿.html 机械转换而来
      （色值字面量全部替换为 color.css 变量；未手工增删样式，保证与定稿效果图像素一致）。
      相对定稿的有意差异：
        1. 定稿的 :root 配色块删除 —— 配色由 color.css 唯一承载；其中的非颜色令牌
           --max(1260px) / --rad(12px) 移入 headfoot.css 末尾的「布局令牌」。
        2. 定稿第二个 <style id="css-mobile" media="not all"> 整块丢弃（被 media 永久禁用，
           且本批次只做电脑端）；其中 @media(max-width:1080px|768px) 在本页永远不成立
           （定稿已锁 html,body{min-width:1280px}），属死规则。
           定稿的 @media(min-width:1260px) 电脑端定宽规则已保留。
        3. 删除 8 处**可证明已被覆盖**的死声明（初版高饱和绿 #8CC018 族，同选择器同属性
           在后续层已被定稿值覆盖），故这些颜色不进入 color.css。
      定稿自身的版本分层注释（v2 / v3 / v4 …）原样保留：那是多轮迭代的覆盖层，
      顺序即优先级，删任何一层都会改变最终视觉。
   字号整体上浮：以 17px 为基础（黄站长口径「全部字号以 17 号为基础」）。
      定稿的字号是按 16px 基准手写的 px（本文件 56 处），而 SEO4305 标准站
        （20905 / cdecn，见 seo4305-frontend-ui §22）约定「根字号 17px + 辅助文字用 rem」，
        root 一改全站同步。giso 因字号是硬编码 px，不受 master.css 的 root 影响，
        故必须在本文件**逐条按 16→17 比例（≈1.0625）换算**，否则改 root 无效。
      换算规则：
        · 正文 / 辅助 / 卡片字号（< 20px）：按比例上浮，取 0.5 步进（14→15 / 13.5→14.5 / 15.5→16.5 …）；
        · 中等强调字号（20~34px）：同比例上浮（21→22.5 / 30→32 …）；
        · 大标题保持不动（h2 36px、.stat b 44px）—— 已足够醒目，再放大会撑破版面。
      范围：本文件 54 处；headfoot.css 同步换算 18 处；master.css 补 root 17px（服务内页 rem）。
      未做：inside.css（内页，本批只做首页，等首页验收后按同规则扩散）。
   ==================================================== */

section{padding:88px 0;}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand img{width:44px;height:44px;}
.brand-tx b{display:block;font-size:var(--fs-h3);letter-spacing:1px;color:var(--font-color-title);font-weight:800;line-height:1.2;}
.brand-tx span{display:block;font-size:var(--fs-tiny);letter-spacing:1.6px;color:var(--font-color-light);font-weight:600;}
/* ---------- 标题体系 ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:48px;}
/* 标题区说明句统一放开行宽约束（此前为 640px）。
   原 max-width:640px 只对「内容超 640px」的句子起截断作用，
   会把产品中心（714px）、定制服务（681px）的说明句折出仅约 74px 的「孤行」（比长行更难看）；
   .l 是 flex 子项、宽度由内容撑开（flex-grow:0），640px 对单栏区块无任何布局意义，故默认放开。
   实测其余区块（应用领域 510 / 企业实力 476 / 资质 442 / 企业动态 510px）均小于 640px，放开后宽度不变。 */
.sec-head .l{max-width:none;}
/* #news 例外：该区块是「左标题 + 右『全部动态』按钮」两栏布局，
   640px 约束在此有意义（防止左侧过长挤压右侧按钮），故单独保留。 */
#news .sec-head .l{max-width:640px;}
.kicker{font-size:var(--fs-tiny);font-weight:700;letter-spacing:2.4px;color:var(--color-primary);text-transform:uppercase;}
h2{font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:800;color:var(--font-color-title);margin-top:14px;letter-spacing:-.4px;}
.sec-head p{color:var(--font-color-normal);font-size:var(--fs-body);margin-top:14px;line-height:var(--lh-loose);}
/* ---------- 搜索条 ---------- */
.sbar{border-bottom:1px solid var(--color-border);background:var(--white);}
.sbar-in{display:flex;align-items:center;justify-content:space-between;gap:26px;padding-top:26px;padding-bottom:26px;flex-wrap:wrap;}
.s-form{display:flex;align-items:center;gap:10px;flex:1;min-width:320px;max-width:560px;}
.s-form input{flex:1;height:48px;border:1.5px solid var(--color-border);border-radius:var(--rad); padding:0 20px;font-size:var(--fs-small);color:var(--font-color-title);outline:none;background:var(--white);transition:.2s;font-family:inherit;}
.s-form input:focus{border-color:var(--color-primary);}
.s-form button{height:48px;padding:0 26px;border:none;border-radius:var(--rad);background:var(--color-primary); color:var(--white);font-size:var(--fs-small);font-weight:600;cursor:pointer;transition:.2s;font-family:inherit;white-space:nowrap;}
.s-form button:hover{background:var(--color-primary-dark);}
.s-hot{display:flex;align-items:center;gap:9px;font-size:var(--fs-small);color:var(--font-color-light);flex-wrap:wrap;}
.s-hot a{color:var(--font-color-normal);border:1px solid var(--color-border);border-radius:100px;padding:5px 14px;transition:.18s;}
.s-hot a:hover{color:var(--color-primary);border-color:var(--color-primary);}
/* ---------- 数据条 ---------- */
.stat-sec{padding:52px 0;}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.stat{text-align:center;padding:10px 0;}
.stat b{font-size:var(--fs-hero);font-weight:800;color:var(--color-primary);line-height:1.1;letter-spacing:-1px;}
.stat span{display:block;font-size:var(--fs-small);color:var(--font-color-normal);margin-top:8px;}
/* ---------- 产品中心矩阵 ---------- */
.pmatrix{display:flex;flex-direction:column;gap:18px;}
.prow{display:grid;grid-template-columns:300px 1fr;border:1px solid var(--color-border);border-radius:var(--rad); overflow:hidden;background:var(--white);transition:.24s;}
.prow:hover{transform:translateY(-3px);box-shadow:0 18px 42px var(--shadow-ink-12);}
.pcell{padding:28px 28px;position:relative;display:block;}
.pcell .pn{display:block;font-size:var(--fs-tiny);font-weight:800;letter-spacing:2px;color:var(--sc);opacity:.85;}
.pcell b{display:block;font-size:var(--fs-h2);font-weight:800;color:var(--font-color-title);margin-top:8px;}
.pcell .pen{display:block;font-size:var(--fs-tiny);letter-spacing:1.4px;color:var(--font-color-light);font-weight:600;margin-top:5px;}
.pcell i{display:inline-block;font-style:normal;font-size:var(--fs-tiny);color:var(--sc);font-weight:700; margin-top:14px;padding:4px 12px;border-radius:100px;background:var(--light-gray);}
.plinks{display:flex;flex-wrap:wrap;align-content:center;gap:12px;padding:24px 30px;border-left:1px solid var(--color-border);}
/* .plinks 里的 15 个大类由不可点的 <span> 改为可点的 <a>
   （每个大类现在都有独立列表页），故选择器扩到 a；原 span 规则保留不动，避免影响别处。 */
.plinks span,.plinks a{font-size:var(--fs-small);font-weight:600;color:var(--font-color-normal);padding:9px 18px;border:1px solid var(--color-border); border-radius:var(--rad);transition:.18s;background:var(--white);display:inline-block;}
.prow:hover .plinks span,.prow:hover .plinks a{border-color:var(--sc);color:var(--sc);}
/* 「查看系列详情」由纯文本 <em> 改为可点的 <a class='pmore' href>，
   故选择器扩到 .pmore；同时补一条 .pmore 规则抵掉 .plinks a 的胶囊（padding/边框/底色），
   使外观与改动前的 <em> 完全一致（仅多出「可点 + 悬停跟随系列主色」）。
   客户要求「查看系列详情」可点进对应系列页。 */
.plinks em,.plinks .pmore{font-style:normal;font-size:var(--fs-small);font-weight:700;color:var(--color-primary);margin-left:auto;align-self:center;white-space:nowrap;}
.plinks .pmore{padding:0;border:0;background:none;}
/* ---------- 系列详情 ---------- */
.sdetail{padding:64px 0;}
.sd{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.sd.rev .sd-img{order:2;}
.sd-img{border-radius:var(--rad);overflow:hidden;border:1px solid var(--color-border);}
.sd-img img{width:100%;height:400px;object-fit:cover;}
.sd-bd p{color:var(--font-color-normal);font-size:var(--fs-body);line-height:var(--lh-loose);margin-top:18px;}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.chips a{font-size:var(--fs-small);font-weight:600;padding:7px 16px;border-radius:var(--rad); background:var(--light-gray);color:var(--font-color-normal);border:1px solid var(--color-border);transition:.18s;}
.chips a:hover{color:var(--color-primary);border-color:var(--color-primary);}
.sd-app{margin-top:20px;font-size:var(--fs-small);color:var(--font-color-normal);}
.sd-app b{color:var(--font-color-title);font-weight:700;margin-right:12px;}
.btn{display:inline-flex;align-items:center;gap:9px;margin-top:26px;height:48px;padding:0 28px; background:var(--color-primary);color:var(--white);border-radius:var(--rad);font-size:var(--fs-body);font-weight:600;transition:.2s;}
/* 补 color:var(--white)。master.css 有全局 a:hover{color:var(--font-color-title)}
   （特异性 0-1-1），会压过 .btn{color:#fff}（0-1-0），导致「查看产品详情」悬停时文字变深色；
   箭头是 stroke="currentColor" 也跟着变。
   客户要求悬停时文字保持白色；此处重申颜色即可，全局规则不动。 */
.btn:hover{background:var(--color-primary-dark);transform:translateY(-2px);color:var(--white);}
/* ---------- 定制服务 ---------- */
.svc-sec{background:var(--light-gray);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.svc-card{background:var(--white);border:1px solid var(--color-border);border-radius:var(--rad);padding:32px 28px;transition:.24s;}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px var(--shadow-ink-10);}
.svc-card h4{font-size:var(--fs-h3);font-weight:800;color:var(--font-color-title);margin-top:18px;}
.svc-card p{font-size:var(--fs-small);color:var(--font-color-normal);line-height:var(--lh-loose);margin-top:10px;}
/* ---------- 研发制造 ---------- */
.cap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.cap-imgs{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:170px;gap:16px;}
.cap-imgs figure{border-radius:var(--rad);overflow:hidden;border:1px solid var(--color-border);}
.cap-imgs figure:first-child{grid-row:span 2;}
.cap-imgs img{width:100%;height:100%;object-fit:cover;}
.cap-lead{color:var(--font-color-normal);font-size:var(--fs-body);line-height:var(--lh-loose);}
.cap-list{display:flex;flex-direction:column;gap:2px;margin-top:30px;}
.cap-item{display:flex;gap:18px;padding:19px 0;border-bottom:1px solid var(--color-border);align-items:flex-start;}
.cap-item:first-child{border-top:1px solid var(--color-border);}
.cap-item .n{width:42px;height:42px;flex-shrink:0;border-radius:var(--rad);background:var(--color-primary-light); display:grid;place-items:center;color:var(--color-primary);font-weight:800;font-size:var(--fs-small);}
.cap-item h4{font-size:var(--fs-h3);font-weight:700;color:var(--font-color-title);}
.cap-item p{font-size:var(--fs-small);color:var(--font-color-normal);margin-top:5px;line-height:var(--lh-normal);}
/* ---------- 应用领域 ---------- */
.apps-sec{background:var(--light-gray);border-top:1px solid var(--color-border);}
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
/* .appc 由 <article> 改为 <a> 标签（应用领域卡片改接后台栏目后成为可点击链接），补 display/text-decoration 以保持原版式。 */
.appc{display:block;text-decoration:none;background:var(--white);border:1px solid var(--color-border);border-radius:var(--rad);padding:22px 22px 26px;transition:.24s;}
.appc:hover{transform:translateY(-4px);box-shadow:0 18px 40px var(--shadow-ink-11);}
.appc img{width:100%;height:168px;object-fit:cover;border-radius:calc(var(--rad) - 2px);margin-bottom:18px;}
.appc h3{font-size:var(--fs-h3);font-weight:800;color:var(--font-color-title);}
.appc p{font-size:var(--fs-small);color:var(--font-color-normal);margin-top:9px;line-height:var(--lh-loose);}
.appc ul{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px;}
.appc ul li{list-style:none;font-size:var(--fs-tiny);padding:4px 11px;border-radius:6px;background:var(--color-primary-light);color:var(--color-primary-dark);}
/* ---------- 伙伴资质 ---------- */
.trust{background:var(--white);border-top:1px solid var(--color-border);}
.trust-top{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:42px;}
.trust-note{color:var(--font-color-normal);font-size:var(--fs-small);max-width:340px;line-height:var(--lh-loose);}
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.logos div{background:var(--white);border:1px solid var(--color-border);border-radius:var(--rad);height:96px; display:grid;place-items:center;padding:18px 22px;transition:.22s;}
.logos div:hover{box-shadow:0 10px 26px var(--shadow-ink-10);transform:translateY(-3px);}
.logos img{max-height:100%;max-width:100%;object-fit:contain;}
.certs{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px;justify-content:center;}
.cert{display:inline-flex;align-items:center;gap:9px;background:var(--light-gray);border:1px solid var(--color-border); border-radius:100px;padding:9px 18px;font-size:var(--fs-small);color:var(--font-color-normal);font-weight:500;}
.cert i{width:7px;height:7px;border-radius:50%;display:block;flex-shrink:0;}
/* ---------- 企业动态（统一三栏卡片） ---------- */
.n-more{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;height:46px;padding:0 24px; border:1.5px solid var(--color-border);border-radius:100px;background:var(--white); font-size:var(--fs-small);font-weight:600;color:var(--font-color-title);transition:.22s;}
.n-more:hover{border-color:transparent;background:var(--color-primary);color:var(--white);}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.n-card{position:relative;display:flex;flex-direction:column;background:var(--white); border:1px solid var(--color-border);border-radius:var(--rad);overflow:hidden;transition:.26s;}
.n-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--color-tri);z-index:2;}
.n-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px var(--shadow-ink-13);}
.n-card .pic{height:196px;overflow:hidden;background:var(--light-gray);}
.n-card .pic img{width:100%;height:100%;object-fit:cover;transition:.55s;}
.n-card:hover .pic img{transform:scale(1.05);}
.n-card .bd{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.n-meta{display:flex;align-items:center;gap:10px;font-size:var(--fs-tiny);color:var(--font-color-light);}
.n-tag{display:inline-block;font-size:var(--fs-tiny);font-weight:700;padding:4px 11px;border-radius:6px; background:var(--color-primary-a11);color:var(--color-primary-dark);}
/* 标题去加粗（黄站长指令：800→400）；.go「阅读全文」已随卡片输出移除，规则保留待 stale 清理 */
/* 标题字号由 --fs-h3(18.5px) 改为 --fs-body(17px)（黄站长指令：直接用正文基准档） */
.n-card h3{font-size:var(--fs-body);font-weight:400;color:var(--font-color-title);line-height:var(--lh-normal);margin-top:14px;}
.n-card p{font-size:var(--fs-small);color:var(--font-color-normal);line-height:var(--lh-loose);margin-top:10px;flex:1;}
.n-card .go{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-small);font-weight:600; color:var(--color-primary);margin-top:18px;padding-top:16px;border-top:1px solid var(--color-border);}
.n-note{font-size:var(--fs-tiny);color:var(--font-color-light);margin-top:30px;text-align:right;}
/* ---------- CTA ---------- */
.cta-sec{padding-top:8px;}
.cta{background:var(--cta-bg);color:var(--white);border-radius:var(--rad);padding:56px 60px;display:grid; grid-template-columns:1fr auto;gap:46px;align-items:center;position:relative;overflow:hidden;}
.cta h3{font-size:var(--fs-h1);font-weight:800;line-height:var(--lh-tight);letter-spacing:-.3px;}
.cta p{opacity:.68;font-size:var(--fs-body);margin-top:13px;}
.cta-btns{display:flex;flex-direction:column;gap:12px;flex-shrink:0;}
.cta-btns a{display:flex;align-items:center;gap:12px;background:var(--white);border-radius:var(--rad); padding:15px 26px;min-width:300px;transition:.22s;color:var(--font-color-title);}
.cta-btns a:hover{transform:translateX(4px);}
.cta-btns a svg{color:var(--color-primary);}
.cta-btns span small{display:block;font-size:var(--fs-tiny);color:var(--font-color-light);}
.cta-btns span b{display:block;font-size:var(--fs-h3);font-weight:800;letter-spacing:.4px;}
/* ---------- 响应式 ---------- */
/* ---------- 首页轮播（导航栏下方大图 1920x600；图上内容对齐内容栏） ---------- */
.bnr{position:relative;overflow:hidden;padding:0;background:var(--light-gray);}
.bnr-track{display:grid;}
.bnr-s{grid-area:1/1;opacity:0;transition:opacity 1s ease;pointer-events:none;}
.bnr-s.on{opacity:1;pointer-events:auto;}
.bnr-s img{display:block;width:100%;height:auto;}
@media(min-width:1260px){
    .bnr{height:600px;}
    .bnr-track{height:100%;}
    .bnr-s{position:relative;overflow:hidden;}
    .bnr-s img{position:absolute;top:0;left:50%;width:1920px;height:600px;
               max-width:none;transform:translateX(-50%);}
  }
.bnr-dots{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:34px;display:flex;gap:9px;}
.bnr-dots b{width:9px;height:9px;border-radius:50%;background:var(--color-white-a50); cursor:pointer;transition:.26s;box-shadow:0 1px 4px var(--shadow-dot);}
.bnr-dots b.on{width:28px;border-radius:100px;background:var(--color-primary);}
/* 六格材质色带 */
.band{display:grid;grid-template-columns:repeat(6,1fr);height:128px;}
.band img{width:100%;height:100%;object-fit:cover;}
.btn{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));}
.btn:hover{background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary-darker));}
.s-form button{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));}
.s-form button:hover{background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary-darker));}
.cta{background-image:radial-gradient(680px 320px at 90% 10%,var(--color-primary-a32),transparent 65%),linear-gradient(120deg,var(--color-cta-dark) 0%,var(--color-cta-dark-2) 100%);}
/* 三色即系列色标：通用=绿 一般=蓝 超高温=橙 */
.sc-gen{--sc:var(--color-series-gen);}
.sc-std{--sc:var(--color-series-std);}
.sc-ht{--sc:var(--color-series-ht);}
.prow{border-left-width:5px;}
.sc-gen.prow{border-left-color:var(--color-accent-green);}
.sc-std.prow{border-left-color:var(--color-primary);}
.sc-ht.prow{border-left-color:var(--color-secondary);}
.pcell{background:var(--white);}
.sc-std .pcell i{background:var(--color-primary-a11);}
.svc-card{border-top:3px solid var(--color-tri);}
.appc{border-top:3px solid transparent;background-image:linear-gradient(var(--white),var(--white)),var(--color-tri); background-origin:border-box;background-clip:padding-box,border-box;}
.band{position:relative;}
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--color-tri);}
/* ===== 客户确认顺序版：板块衔接微调 ===== */
.svc-sec{background:var(--white);border-bottom:none;}
.apps-sec{border-bottom:none;}
.cta-sec{padding-top:8px;padding-bottom:0;}
/* ===== 配色：蓝为主调，黄绿弱化 ===== */
.appc{background-image:linear-gradient(var(--white),var(--white)),var(--color-tri);}
.sc-gen.prow{border-left-color:var(--color-accent-green);}
.sc-std.prow{border-left-color:var(--color-primary);}
.sc-ht.prow{border-left-color:var(--color-secondary);}
.sc-gen .pcell i{background:var(--color-accent-green-a13);}
.sc-std .pcell i{background:var(--color-primary-a12);}
.sc-ht .pcell i{background:var(--color-secondary-a13);}
/* 企业实力能力项：数字并进小标题，占位换成主色蓝线性图标 */
.cap-ic{flex-shrink:0;width:46px;height:46px;border-radius:12px;background:var(--color-primary-light); display:grid;place-items:center;color:var(--color-primary);}
.cap-ic svg{width:26px;height:26px;}
.cap-item h4 b{color:var(--color-primary);font-weight:800;}
.cert i{background:var(--color-primary);}
.n-tag{background:var(--color-primary-a11);color:var(--color-primary-dark);}
.n-tag.g{background:var(--color-accent-green-a13);color:var(--color-tag-green);}
.n-tag.o{background:var(--color-secondary-a13);color:var(--color-tag-orange);}
.appc ul li{background:var(--color-primary-light);color:var(--color-primary-dark);}
.chips a:hover{color:var(--color-primary);border-color:var(--color-primary);}
.prow:hover{border-color:var(--color-border-light);}
.s-hot a:hover{color:var(--color-primary);border-color:var(--color-primary);}
/* ===== v3：模块背景色（相邻模块明显不同，通栏铺满 1920） ===== */
.sbar{background:var(--white);padding-top:26px;padding-bottom:26px;}
#products{background:var(--color-bg-info);}
#s-gen{background:var(--white);}
#s-std{background:var(--color-bg-muted);}
#s-ht{background:var(--white);}
.apps-sec{background:var(--color-bg-warm);border-top:none;}
.svc-sec{background:var(--white);border-top:none;border-bottom:none;}
.cta-sec{background:var(--color-bg-info);}
/* ===== v8：企业实力 → 资质认证 → 数据条 → 合作客户 ===== */
#cap{background:var(--white);}
.cert-sec{background:var(--color-bg-muted);border-top:none;}
.stat-sec{background:var(--color-bg-info-strong);border-top:none;}
.trust{background:var(--color-bg-warm);border-top:none;}
#news{background:var(--white);}
/* ===== v3：色带修复 —— 图片按行高裁切，杜绝溢出；去掉装饰线 ===== */
.band{grid-template-rows:128px;}
.band img{display:block;}
.band::after{content:none;}
/* ===== v2：定制服务图标卡片（替代序号） ===== */
.svc-ic{display:block;width:78px;height:78px;margin-bottom:20px;}
.svc-ic img{width:100%;height:100%;display:block;}
.svc-card h4{margin-top:0;}
/* ===== v2：数据条数字滚动 ===== */
.stat b{font-variant-numeric:tabular-nums;min-width:2.2em;display:inline-block;}
/* ===== v4：CTA 平铺，不再叠圆角背景 ===== */
.cta-sec{padding-top:60px;padding-bottom:60px;}
.cta{background:transparent;background-image:none;color:var(--font-color-title);border-radius:0;padding:0; display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center;}
.cta h3{color:var(--font-color-title);font-size:var(--fs-h1);font-weight:800;line-height:var(--lh-tight);letter-spacing:-.3px;}
.cta p{color:var(--font-color-normal);opacity:1;font-size:var(--fs-body);margin-top:13px;}
.cta-btns a{border:1px solid var(--color-border-strong);box-shadow:0 6px 18px var(--shadow-primary-08);}
.cta-btns a:hover{transform:translateX(4px);border-color:var(--color-primary);}
.cta-btns span b{color:var(--font-color-title);}
/* ===== v6：客户 LOGO 卡片 —— 图片完全在框内，视觉体量统一 ===== */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.logos div{background:var(--white);border:1px solid var(--color-border);border-radius:var(--rad); height:104px;box-sizing:border-box;overflow:hidden; display:flex;align-items:center;justify-content:center;padding:0 20px;transition:.22s;}
.logos div:hover{box-shadow:0 10px 26px var(--shadow-ink-10);transform:translateY(-3px);}
.logos img{display:block;width:auto;max-width:100%;object-fit:contain;image-rendering:auto;}
.logos .lg-s{height:30px;}
.logos .lg-m{height:34px;}
.logos .lg-l{height:40px;}
/* ===== v8：资质认证 —— 独立板块，放在企业实力之下 ===== */
/* ===== v9：资质认证改四列（7 张：原有 6 项 + 新增 IATF 16949） =====
   客户 2026-10 新增 IATF 16949:2016 证书后共 7 张，三列会变成 3+3+1 单卡落单；
   改四列后为 4+3，第二行右侧空一格（黄站长确认可接受）。
   四列下卡宽 284px（内容栏 1196px − 3×20px 间距）。原 padding 26px + 图标 54px + gap 16px
     吃掉 122px，只剩 162px 留给文字 —— 「IATF 16949:2016」@18.5px 实测约 152px，仅余 10px，
     字体渲染一有差异就折行。故本层同时收窄 padding→20px、图标→48px、gap→14px，
     文字可用宽回到 182px，最长的 IATF 标题也能单行放下。
   全站 html,body 已锁 min-width:1280px，无需再写窄屏回退断点。 */
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.cert-card{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--color-border); border-radius:var(--rad);padding:22px 20px;transition:.22s;text-decoration:none;}
.cert-card:hover{box-shadow:0 12px 30px var(--shadow-ink-10);transform:translateY(-3px);border-color:var(--color-border-accent);}
/* 整卡改为链接后补键盘焦点态（资质卡现整卡可点，键盘 Tab 必须看得见焦点） */
.cert-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;}
.cert-card i{width:46px;height:46px;border-radius:50%;background:var(--color-primary-light);color:var(--color-primary); display:grid;place-items:center;flex-shrink:0;}
.cert-card b{display:block;font-size:var(--fs-h3);font-weight:800;color:var(--font-color-title);line-height:var(--lh-tight);}
.cert-card em{display:block;font-style:normal;font-size:var(--fs-small);color:var(--font-color-normal);margin-top:4px;}
/* v10：企业实力右侧内容块底部（右下角）——效果占位提示：无背景、无框、纯文字醒目 */
.cap-note{font-size:var(--fs-small);font-weight:700;color:var(--color-note);letter-spacing:.2px; text-align:right;margin-top:18px;line-height:var(--lh-normal);}
.nav-in{height:72px;}
/* ===== v9：自适应关闭时的电脑端锁 —— 任何窗口/设备都按 1280 宽渲染 ===== */
html,body{min-width:1280px;}

/* ===== v11 首页视觉优化批次2+3 =====
   批次2 色彩协调：色带降噪 / 系列详情图系列色顶边 / 数据条数字三色轮换
   批次3 空洞充实：定制服务四步加序号+流向箭头 / 资质卡图标放大+三色轮换 /
         企业实力图片列与右栏等高
   ==================================================== */

/* ---------- 批次2.1 色带降噪：六格颗粒照降饱和 + 淡蓝罩色 ----------
   红/黄/紫颗粒与三色品牌（蓝/绿/橙）冲突最厉害的噪音源；
   降饱和压艳、罩一层 7% 主色蓝统一色温，材质细节仍可辨。 ---------- */
.band img{filter:saturate(.7) brightness(1.05);}
.band::before{content:"";position:absolute;inset:0;background:var(--color-primary);opacity:.07;pointer-events:none;}

/* ---------- 批次2.2 系列详情图：顶部 4px 系列色条 ----------
   矩阵行已有绿/蓝/橙左侧色条，三张系列详情大图补同色顶边，前后呼应。 ---------- */
#s-gen .sd-img{border-top:4px solid var(--color-series-gen);}
#s-std .sd-img{border-top:4px solid var(--color-series-std);}
#s-ht .sd-img{border-top:4px solid var(--color-series-ht);}

/* ---------- 批次2.3 数据条数字：三色轮换 ----------
   蓝 → 绿 → 橙 → 蓝，三色品牌在页面下部再落一次脚。 ---------- */
.stats .stat:nth-child(2) b{color:var(--color-accent-green);}
.stats .stat:nth-child(3) b{color:var(--color-series-ht);}
.stats .stat:nth-child(4) b{color:var(--color-primary-dark);}

/* ---------- 批次3.1 定制服务四步：序号角标 + 卡间流向箭头 ----------
   四张卡原本各自孤立；CSS 计数器补 01-04 序号（颜色按蓝/绿/橙/深蓝轮换），
   卡间补圆形箭头表示"从需求到量产"的先后关系。 ---------- */
.svc{counter-reset:svcstep;}
.svc-card{counter-increment:svcstep;position:relative;}
.svc-card::after{content:"0" counter(svcstep);position:absolute;top:26px;right:26px;font-size:var(--fs-small);font-weight:800;letter-spacing:1px;}
.svc-card:nth-child(1)::after{color:var(--color-primary);}
.svc-card:nth-child(2)::after{color:var(--color-accent-green);}
.svc-card:nth-child(3)::after{color:var(--color-secondary);}
.svc-card:nth-child(4)::after{color:var(--color-primary-dark);}
.svc-card:not(:last-child)::before{content:"→";position:absolute;right:-23px;top:44%;z-index:2;width:24px;height:24px; border:1px solid var(--color-border);border-radius:50%;background:var(--white);display:grid;place-items:center;font-size:var(--fs-tiny);font-weight:700;color:var(--color-primary);box-shadow:0 2px 8px var(--shadow-ink-10);}

/* ---------- 批次3.2 资质认证卡：图标放大 + 三色轮换 ----------
   6 张卡原本只有小图标+两行字，显稀；图标放大提体量，
   蓝绿橙按 3n 轮换（复用 .n-tag.g/.o 同款底色 token）。 ---------- */
.cert-card i{width:48px;height:48px;}
.cert-card i svg{width:22px;height:22px;}
.cert-grid .cert-card:nth-child(3n+2) i{background:var(--color-accent-green-a13);color:var(--color-tag-green);}
.cert-grid .cert-card:nth-child(3n) i{background:var(--color-secondary-a13);color:var(--color-tag-orange);}

/* ---------- 批次3.3 企业实力：图片列与右栏等高 ----------
   原图片列固定 170px 行高（总高 356px），比右栏文字矮一截，
   align-items:center 造成左下大片留白；改为拉伸等高填充。 ---------- */
.cap{align-items:stretch;}
.cap-imgs{height:100%;grid-auto-rows:minmax(170px,1fr);}

/* ===== v12：企业实力改版（左单图 / 右 简介 + 三列数字） ===== */
/* 黄站长方案：左侧三张占位图改为单张厂区实景图，右侧上半为公司简介
   （取后台「网站设置 → 网站介绍」），下半为 14 / 5 / 13 三列数字块。
   三张 AI 占位图说服力弱且已到替换节点；实景图 + 客户自维护简介口径更可信。
   关键约束与处理：
     1. 实景图源为 1080x492（约 2.2:1），而左列需撑到约 360px 高（约 1.6:1），比例不符，
        故用 object-fit:cover + object-position:68% center —— 裁掉左侧部分厂房、保住建物主体与
        楼顶「吉塑」红字招牌（该取景点已按原图构图核算：可见约 22%-89% 宽区间）。
     2. 右栏 flex 纵向 + space-between：简介贴顶、数字块贴底，与左图自然等高，不出现一侧长一侧短。
     3. 简介用 -webkit-line-clamp:5 兜底，后台网站介绍日后写长文也不会把右栏撑高（code-behind 已先按
        150 字整句截断，这里只是二次保险）。
   旧类 .cap-imgs / .cap-lead / .cap-list / .cap-item / .cap-note 在首页不再使用，
   但 /about 页有独立的 about-cap-* 同名体系，故这些规则暂留不清理。 */
.cap.cap-v2{grid-template-columns:1fr 1fr;gap:60px;align-items:stretch;}
.cap-v2 .cap-photo{position:relative;margin:0;height:100%;min-height:380px;border-radius:var(--rad);overflow:hidden;border:1px solid var(--color-border);background:var(--light-gray);}
.cap-v2 .cap-photo img{width:100%;height:100%;object-fit:cover;object-position:68% center;display:block;}
/* 原 .cap-photo figcaption（图下「厂区实景 · 广东佛山」标注）规则删除，
   对应 aspx 的 <figcaption> 已移除，规则失去挂载点，保留只会成为死代码。 */
.cap-v2 .cap-body{display:flex;flex-direction:column;justify-content:space-between;gap:34px;}
.cap-v2 .cap-profile-title{font-size:var(--fs-h3);font-weight:700;color:var(--font-color-title);margin-bottom:14px;}
.cap-v2 .cap-profile-title::after{content:"";display:block;width:38px;height:3px;margin-top:10px;background:var(--color-secondary);border-radius:2px;}
.cap-v2 .cap-profile{font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--font-color-normal);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;}
.cap-v2 .cap-more{display:inline-block;margin-top:16px;font-size:var(--fs-small);font-weight:700;color:var(--color-primary);}
.cap-v2 .cap-more i{font-style:normal;margin-left:4px;transition:margin-left .25s;}
.cap-v2 .cap-more:hover i{margin-left:9px;}
.cap-v2 .cap-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cap-v2 .cap-fact{padding:18px 16px 16px;border-radius:var(--rad);background:var(--color-primary-light);}
.cap-v2 .cap-fact b{display:block;font-size:var(--fs-h1);line-height:1.1;font-weight:800;color:var(--color-primary);}
.cap-v2 .cap-fact h4{font-size:var(--fs-small);font-weight:700;color:var(--font-color-title);margin-top:6px;}
.cap-v2 .cap-fact p{font-size:var(--fs-tiny);line-height:var(--lh-normal);color:var(--font-color-normal);margin-top:5px;}

/* ===== v13：企业实力「公司简介」标题改为公司名（对齐 /about 版式） ===== */
/* 黄站长指令：右栏上半标题由「公司简介」换成 /about 页那种抬头效果
   ——「广东吉塑新材料有限公司」，与内页 .about-intro-text h3 同一风格。
   「公司简介」是个说明性词，对访客没有信息量；直接挂公司全称更像正式抬头，
   且与 /about 页正文抬头口径一致（内页 h3 = 广东 + 强调「吉塑新材料」+ 有限公司）。
   处理要点：
     · 字号由 16.5px 提到 24px，颜色改深墨蓝（--color-primary-dark），「吉塑新材料」用主蓝强调；
       未直接套 /about 的 28px，是右栏宽度只有容器一半，抬高一级已足够，避免挤掉正文行数；
     · 原标题下的 38px 短横线（::after，--color-secondary 绿）一并关掉 —— /about 抬头无此装饰，
       留着会与「同款效果」不一致；如需恢复，删掉下面 display:none 一行即可。 */
.cap-v2 .cap-profile-title{font-size:var(--fs-h2);font-weight:700;line-height:var(--lh-tight);letter-spacing:.3px;color:var(--color-primary-dark);margin-bottom:12px;}
.cap-v2 .cap-profile-title span{color:var(--color-primary);}
.cap-v2 .cap-profile-title::after{display:none;}

/* ===== 模块上下内边距统一收紧（黄站长：全部上下调整为30） =====
   首页各模块上下间距偏大（section 默认 88 / 数据条 52 / CTA 60），
     页面拉得太长；统一收到 50px（黄站长复核 30px 偏挤，再定 50）。
   范围：仅首页（index.css），内页 inside.css 不受影响；
     stat-sec / cta-sec 的既有覆盖层在本层之前，此处按顺序追加即可生效。 */
section{padding:50px 0;}
.stat-sec{padding:50px 0;}
.cta-sec{padding-top:50px;padding-bottom:50px;}

/* ===== 首页搜索条单独收紧（黄站长：只改这一处，上下共 30） =====
   搜索条（.sbar）吃全局 section 50px 后偏高，黄站长要求本区块单独 30。
   口径：区块外层 .sbar 定为 30px，内层 .sbar-in 自带的 26px 上下内边距归零，
   避免两层叠加实际 52px。仅首页搜索条，其他模块不受影响。 */
.sbar{padding-top:30px;padding-bottom:30px;}
.sbar-in{padding-top:0;padding-bottom:0;}

/* ===== 首页纯图片去外框（黄站长：除产品中心/三大系列保留边框外，
   其他图片外面不再套边框，直接图片圆角） =====
   企业实力「厂区实景」（.cap-v2 .cap-photo）与合作客户 logo 格（.logos div）
   均为图片外套 1px 边框盒，与三大系列的边框卡观感重复；改为仅保留圆角，图片即边界。
   范围：仅此两处；三大系列 .sd-img、产品中心边框卡与复合卡片（应用领域 appc / 新闻 n-card）
   均不动。 */
.cap-v2 .cap-photo{border:none;}
.logos div{border:none;}

/* ===== 应用领域卡（.appc）去边框 + 去顶部三色条（黄站长：直接图片圆角） =====
   卡片的 1px 边框与 border-top:3px 三色条同属「图片外面套框」的观感，
   按首页去框口径统一去掉；appc 原本用「白底渐变 + border-box」画三色顶条的
   background-image 技巧一并清掉，避免残留色条。 */
.appc{border:none;border-top:none;background-image:none;background:var(--white);}

/* ===== 新闻卡（.n-card）边框口径修正（黄站长定稿） =====
   封面图片本身不带边框（贴边圆角即可），但整个卡片要保留一个
   「普通边框」——区别于产品中心/三大系列那种三色顶条效果卡，这里是素 1px 边框。
   （上一稿整卡去框过头，本稿恢复普通边框。） */
.n-card{border:1px solid var(--color-border);}

/* ===== 定制服务卡去序号（黄站长：去掉 01 02 03 04） =====
   序号由 .svc-card::after 的 CSS 计数器输出，右上角与图标抢视线；
   流程感已由卡片间的 → 箭头承担，序号冗余。content:none 直接关掉，卡片布局不动。 */
.svc-card::after{content:none;}

/* ===== 新闻卡去顶部三色条（黄站长反馈封面图上仍有颜色条） =====
   颜色来自 .n-card::before 伪元素（顶部 3px 三色条 var(--color-tri)），
   上一稿只处理了 border 漏了它。content:none 关掉，卡内其他不动。 */
.n-card::before{content:none;}

/* ===== 首页滚动入场动效（wow + animate.css）无障碍兜底 =====
   首页各板块外层加了 wow animated fadeInUp（见 aspx/Default.aspx 顶部说明）。
   wow 元素出场前是 opacity:0，animate.css 的 .animated 默认 .65s 播完后保持终态；
   这里补一条「用户系统偏好减少动效」的兜底 —— 该偏好下强制 wow 元素立即可见、去掉位移，
   避免不看动画的用户遇到空白或头晕（站点已在轮播/数字滚动里沿用 prefers-reduced-motion 判断）。
   同时给 .band 一个隔离：它是 grid 行高 128px 的定高容器，动画只作用 opacity/transform，
   不参与栅格计算，故不影响布局抖动。 */
@media (prefers-reduced-motion: reduce){
  .wow{visibility:visible !important;opacity:1 !important;
       animation:none !important;transform:none !important;}
}