/* ============================================================
博之宇 · 主页美工（v3 · 商务 90% / 工业 10% 精修版）
仅作用于 body.home-art（首页），不影响其余页面。
设计取向（参照 京东工业品 / 1688 / 震坤行 / 米思米 / 嘉立创 等标杆）：
- 干净克制、深蓝(钢蓝) + 白银 + 浅灰为主，留白充足但不过空（适配国内 B 端阅读习惯）
- 一致的组件节奏：标题带 / 承诺条 / 赠品卡 / 公告栏 同一套语言
- 唯一的“工业感”来自：极淡精密网格底纹 + mono 序号标签 + 细线条，不堆装饰
- 渐变只作极少量点缀（顶部细线 / 极淡光晕），CTA 与重点用实色钢蓝
响应式完整镜像 styles.css 既有断点，保留此前移动/平板修复。
============================================================ */
/* 衬线仅用于英雄标题主标题（高级商务编辑感，不多处撒）；楼层标题用干净无衬线 */
body.home-art .banner h1{
font-family:Georgia, 'Songti SC', 'SimSun', '宋体', serif;
}
/* ===================== 楼层标题（编辑式目录感） ===================== */
/* 序号计数器：仅在有 .floor__title 的楼层自增（不含秒杀楼层） */
body.home-art .floor__title{ counter-increment: floorno; position:relative; }
/* 前置 mono 序号标签（唯一“工业精密”细节点缀） */
body.home-art .floor__title::before{
content: counter(floorno, decimal-leading-zero);
flex:none; align-self:center;
font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:1px;
color:var(--cyan);
background:var(--cyan-soft);
border:1px solid rgba(15,124,138,.22);
padding:3px 9px; border-radius:7px;
margin-right:2px;
}
/* 竖向强调条：更纤细、钢蓝→青 */
body.home-art .floor__title .bar{
width:3px; height:24px; border-radius:3px;
background:linear-gradient(180deg,var(--steel),var(--cyan));
}
body.home-art .floor__title h2{
font-size:27px; font-weight:700; letter-spacing:.4px; color:var(--steel); line-height:1.18;
}
body.home-art .floor__title .en{
font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase;
color:var(--silver-dk); font-weight:500;
}
body.home-art .floor__more{
padding:7px 15px; border:1px solid var(--line-2); border-radius:999px;
color:var(--steel-2); background:var(--surface); font-size:13px; font-weight:500;
transition:all .22s var(--ease);
}
body.home-art .floor__more:hover{ border-color:var(--steel-3); color:var(--steel); background:var(--surface-2); }
body.home-art .floor__more span{ transition:transform .22s var(--ease); display:inline-block; }
body.home-art .floor__more:hover span{ transform:translateX(3px); }
/* 楼层节奏：更从容但不过空（国内 B 端不宜过空） */
body.home-art .floor{ padding:58px 0; }
body.home-art .floor--soft{ background:linear-gradient(180deg,#f7f9fb,#f7f9fb); }
/* ===================== HERO 英雄区 ===================== */
/* 净化：干净浅色渐变 + 右侧极淡青色光晕 + 极淡精密网格底纹（工业 10%） */
body.home-art .banner{
position:relative; overflow:hidden;
background:
radial-gradient(120% 130% at 88% 6%, rgba(15,124,138,.08), rgba(15,124,138,0) 46%),
linear-gradient(118deg,#ffffff 0%, #f7f9fb 52%, #eef2f7 100%);
border:1px solid var(--line-2);
border-radius:18px;
box-shadow:0 18px 44px -32px rgba(27,53,86,.42);
}
body.home-art .banner::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:radial-gradient(rgba(27,53,86,.05) 1px, transparent 1px);
background-size:24px 24px;
-webkit-mask-image:linear-gradient(120deg, transparent 38%, #000 100%);
mask-image:linear-gradient(120deg, transparent 38%, #000 100%);
opacity:.7;
}
body.home-art .banner::after{ display:none; }
/* 英雄文字层置于网格之上 */
body.home-art .banner__txt{ position:relative; z-index:2; }
/* eyebrow 精致化（安静钢蓝 + 青点，胶囊化） */
body.home-art .banner__eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
color:var(--steel-2);
background:rgba(27,53,86,.05);
border:1px solid rgba(27,53,86,.12);
padding:6px 13px; border-radius:999px;
}
body.home-art .banner__eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--cyan); }
/* 标题：衬线 + 纯钢蓝实色（去掉渐变填充，更克制高级） */
body.home-art .banner h1{
font-size:44px; font-weight:700; letter-spacing:.5px; line-height:1.22;
color:var(--steel); margin:18px 0 14px;
}
body.home-art .banner p{ font-size:16px; color:var(--text-2); line-height:1.8; }
/* 轮播态：浅色 banner，文字用钢蓝深色（配 AI 底图左侧白纱区） */
body.home-art .slide .banner__txt{ color:var(--text-1); }
body.home-art .slide .banner__txt h1{ color:var(--steel); text-shadow:none; }
body.home-art .slide .banner__txt p{ color:var(--text-2); }
body.home-art .slide .banner__eyebrow{ color:var(--steel); background:rgba(255,255,255,.78); border-color:rgba(27,53,86,.18); }
body.home-art .slide .banner__eyebrow i{ background:var(--cyan); }
/* 新 Banner 左侧已带工程蓝图，scrim 调薄以露出左侧设计，同时保证文字可读 */
body.home-art .slide__scrim{
background:linear-gradient(90deg, rgba(245,247,250,.90) 0%, rgba(245,247,250,.58) 34%, rgba(245,247,250,.12) 60%, transparent 100%);
z-index:2;
}
body.home-art .slide .banner__txt h1,
body.home-art .slide .banner__txt p{ text-shadow:0 1px 0 rgba(255,255,255,.85); }
body.home-art .slide .banner__eyebrow{ backdrop-filter:blur(4px); }
/* CTA：实色钢蓝（克制）；次级幽灵按钮描边 */
body.home-art .banner__cta .btn--primary{
background:var(--steel);
box-shadow:0 10px 22px -10px rgba(27,53,86,.6); border-color:transparent; color:#fff;
}
body.home-art .banner__cta .btn--primary:hover{ background:#16263f; transform:translateY(-1px); }
body.home-art .banner__cta .btn--ghost{ border-color:var(--line-2); color:var(--steel); background:#fff; }
body.home-art .banner__cta .btn--ghost:hover{ border-color:var(--steel-3); color:var(--steel); background:var(--steel-soft); }
/* 指示点 */
body.home-art .banner__dots i{ background:rgba(27,53,86,.18); }
body.home-art .banner__dots i.is-active{ background:var(--steel); }
/* 右侧小卡：干净商务（无衬线标题更专业，顶部细线点缀） */
body.home-art .sidecard{
position:relative; overflow:hidden;
background:linear-gradient(160deg,#ffffff,#f6f8fb);
border-color:var(--line-2);
border-radius:14px;
box-shadow:0 14px 30px -24px rgba(27,53,86,.5);
}
body.home-art .sidecard::after{
content:''; position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(90deg,var(--cyan),var(--steel));
opacity:.9;
}
body.home-art .sidecard h3{
color:var(--steel); font-weight:700; font-size:17px; line-height:1.4;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
margin-bottom:8px;
}
body.home-art .sidecard p{ font-size:13px; color:var(--text-2); line-height:1.65; }
body.home-art .sidecard .go{ color:var(--steel-2); font-size:13.5px; font-weight:600; margin-top:14px; }
body.home-art .sidecard .go span{ display:inline-block; transition:transform .22s var(--ease); }
body.home-art .sidecard:hover{ border-color:var(--steel-3); box-shadow:0 22px 40px -24px rgba(27,53,86,.55); transform:translateY(-2px); }
body.home-art .sidecard:hover .go span{ transform:translateX(4px); }
/* ============================================================
统一信息带语言：公告栏 / 承诺条 / 赠品卡 共用
（一致底色 · 边框 · 圆角 · 顶部 2px 渐变线 · 同款图标处理）
============================================================ */
/* 承诺条 / 赠品卡共用表面（公告栏在下面单独写，避免优先级冲突） */
body.home-art .promise,
body.home-art .promo-gift{
background:linear-gradient(180deg,#ffffff,#fafbfc);
border:1px solid var(--line-2);
border-radius:12px;
box-shadow:0 10px 26px -24px rgba(27,53,86,.4);
}
/* 顶部 2px 渐变细线（两处统一） */
body.home-art .promise::before,
body.home-art .promo-gift::before{
content:''; position:absolute; left:0; right:0; top:0; height:2px;
background:linear-gradient(90deg,var(--cyan),var(--steel));
}
/* ===================== 首页公告栏（重设计：采购热线 · 公司新闻滚动 · 实用链接） ===================== */
/* 三栏等重：左 = 采购热线 + 服务时间；中 = 公司新闻无缝滚动（胶囊标签 + 更多）；
右 = 实用链接组 + 登录/免费注册。浅底细边 + 钢蓝·青点缀，与下方三横幅形成层次。 */
body.home-art .topbar{
background:linear-gradient(180deg,#fbfcfe,#f4f7fa);
border-bottom:1px solid var(--line-2);
font-size:12.5px;
box-shadow:0 1px 4px rgba(27,53,86,.05);
}
body.home-art .topbar__in{
height:36px;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:26px;
color:var(--text-2);
}
/* 左：采购热线 + 服务时间（竖线分隔，窄屏整段收起） */
body.home-art .topbar__l{justify-self:start;display:flex;align-items:center;gap:11px;color:var(--steel);white-space:nowrap}
body.home-art .topbar__l .tb-sep{width:1px;height:13px;background:var(--line-3);flex:none;opacity:.6}
body.home-art .topbar__l .hi{color:var(--text-2);font-weight:500;white-space:nowrap}
body.home-art .topbar__l a{color:var(--steel);font-weight:600;white-space:nowrap;transition:color .2s}
body.home-art .topbar__l a:hover{color:var(--cyan-2)}
body.home-art .topbar__l a.reg{color:var(--cyan-2)}
body.home-art .topbar__l .sep{color:var(--line-2);margin:0 2px}
body.home-art .topbar__l .mem-chip{display:inline-flex;align-items:center;gap:7px;color:var(--steel);font-weight:600;white-space:nowrap}
body.home-art .topbar__l .mem-chip b{color:var(--steel)}
body.home-art .topbar__l .mem-lv{font-size:11px;color:var(--cyan-2);font-weight:700;white-space:nowrap}
body.home-art .topbar__l .mem-out{margin-left:4px;color:var(--text-3);font-weight:500;cursor:pointer}
/* 中：公司新闻（青色胶囊标签 + 无缝滚动 + 更多） */
body.home-art .topbar__mid{justify-self:center;display:flex;align-items:center;gap:10px;min-width:0;width:100%;max-width:520px}
body.home-art .tb-news__lb{flex:none;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;background:var(--cyan-soft);color:var(--cyan);font-weight:700;font-size:11.5px;white-space:nowrap;border:1px solid rgba(15,124,138,.16)}
body.home-art .tb-news__lb svg{width:12px;height:12px;color:var(--cyan-2)}
body.home-art .tb-news{position:relative;flex:1;min-width:0;height:20px;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 5%,#000 93%,transparent);}
body.home-art .tb-news__track{display:inline-flex;white-space:nowrap;will-change:transform;animation:tbNews 34s linear infinite}
body.home-art .tb-news:hover .tb-news__track{animation-play-state:paused}
body.home-art .tb-news__it{color:var(--text-2);font-size:12.5px;padding-right:44px;transition:color .2s}
body.home-art .tb-news__it:hover{color:var(--cyan-2)}
body.home-art .tb-news__more{flex:none;color:var(--cyan-2);font-weight:700;white-space:nowrap;transition:opacity .2s;font-size:12px}
body.home-art .tb-news__more:hover{opacity:.72}
@keyframes tbNews{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* 右：实用链接组 + 登录/免费注册 */
body.home-art .topbar__r{justify-self:end;display:flex;align-items:center;white-space:nowrap}
body.home-art .topbar__r .tb-i{display:inline-flex;align-items:center;color:var(--text-2);white-space:nowrap}
body.home-art .topbar__r .tb-i a{color:var(--text-2);font-weight:500;white-space:nowrap;transition:color .2s}
body.home-art .topbar__r .tb-i a:hover{color:var(--cyan-2)}
body.home-art .topbar__r .tb-i .sep{color:var(--line-3);margin:0 9px;opacity:.6}
body.home-art .topbar__r .tb-login{color:var(--steel);font-weight:700;margin-left:12px}
body.home-art .topbar__r .tb-login:hover{color:var(--cyan-2)}
body.home-art .topbar__r .tb-reg{display:inline-flex;align-items:center;height:22px;padding:0 11px;margin-left:8px;border-radius:999px;background:linear-gradient(135deg,var(--cyan-2),var(--cyan));color:#fff;font-weight:700;font-size:11.5px;transition:filter .2s;box-shadow:0 3px 8px -4px rgba(15,124,138,.7)}
body.home-art .topbar__r .tb-reg:hover{filter:brightness(1.07)}
/* 窄屏：先隐藏低优先链接，再收右侧组，最后收中部新闻，保留采购热线 */
@media (max-width:1240px){
body.home-art .topbar__r .tb-x{display:none}
}
@media (max-width:1000px){
body.home-art .topbar__r{display:none}
body.home-art .topbar__in{grid-template-columns:auto minmax(0,1fr);gap:18px}
}
@media (max-width:560px){
body.home-art .topbar__mid{display:none}
body.home-art .topbar__l .tb-sep,
body.home-art .topbar__l .hi{display:none}
body.home-art .topbar__in{grid-template-columns:auto;gap:0}
}
/* ===================== 服务承诺条（正品保障一行） ===================== */
/* 与上方「整线方案免费评估」赠品卡同高同款，构成协调的行动/保障双条 */
body.home-art .promise{
position:relative;
display:grid; grid-template-columns:repeat(5,1fr); gap:0;
margin-top:14px; padding:0 8px;
min-height:56px; /* v27：74→56，按峰哥要求上下压扁（左右/栏宽不动） */
overflow:hidden;
}
body.home-art .promise__i{
display:flex; align-items:center; justify-content:center; gap:11px;
min-height:56px; padding:0 12px; border-right:1px solid var(--line); /* v27：74→56 */
transition:background .22s var(--ease);
}
body.home-art .promise__i:last-child{ border-right:0 }
body.home-art .promise__i:hover{ background:rgba(15,124,138,.05) }
/* 5 项视觉统一：不再给首项单独铺色块（原青色底会显得"只有正品保障有背景"），
主次仅靠图标区分——首项实心青，其余浅青底钢蓝描边 */
body.home-art .promise__i:first-child .promise__badge{
background:linear-gradient(135deg, var(--cyan), #0b6470); color:#fff;
}
/* 图标：统一 40px，青底 + 钢蓝细描边 */
body.home-art .promise__badge{
flex:none; width:34px; height:34px; border-radius:9px; /* v27：40→34 */
display:grid; place-items:center;
background:rgba(15,124,138,.1); color:var(--steel);
box-shadow:none;
transition:transform .22s var(--ease);
}
body.home-art .promise__i:hover .promise__badge{ transform:scale(1.06) }
body.home-art .promise__badge svg{ width:18px; height:18px; }
/* 文字：无衬线 600，安静专业 */
body.home-art .promise__txt{ display:flex; flex-direction:column; line-height:1.22; text-align:left }
body.home-art .promise__txt strong{
font-size:13.5px; font-weight:600; color:var(--steel); letter-spacing:.2px;
}
body.home-art .promise__txt em{ font-style:normal; font-size:11px; color:var(--text-2); margin-top:1px }
/* ===================== 赠品卡（整线方案免费评估） ===================== */
/* 与下方「正品保障」承诺条同高同款：74px 带 + 同款表面/描边/顶部 2px 渐变线 + 青色点缀 */
body.home-art [data-promo-slot="home_floor"]{ padding:0 var(--pad-x); }
body.home-art .promo-gift{
display:flex; align-items:center; gap:16px;
max-width:var(--maxw); margin:14px auto 16px; padding:0 20px;
min-height:74px;
position:relative; overflow:hidden;
}
/* 礼物图标：与承诺条同款青底钢蓝描边（尺寸统一 40px） */
body.home-art .promo-gift__ic{
flex:none; width:40px; height:40px; border-radius:10px;
background:rgba(15,124,138,.1); color:var(--steel);
display:flex; align-items:center; justify-content:center;
box-shadow:none;
}
body.home-art .promo-gift__ic svg{ width:22px; height:22px }
/* 文案区 */
body.home-art .promo-gift__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
body.home-art .promo-gift__tag{
align-self:flex-start;
font-family:var(--mono);
font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
color:var(--cyan); background:rgba(15,124,138,.1);
padding:2px 8px; border-radius:5px;
}
body.home-art .promo-gift__t{ font-size:15.5px; font-weight:600; color:var(--steel); letter-spacing:.2px; line-height:1.3 }
body.home-art .promo-gift__tx{ font-size:12.5px; color:var(--text-2); line-height:1.5 }
/* 右侧 CTA：描边胶囊，hover 填青色渐变，与首项「正品保障」的青色呼应 */
body.home-art .promo-gift__cta{
flex:none; display:inline-flex; align-items:center; gap:5px;
padding:9px 16px; border-radius:999px;
background:#fff; color:var(--steel); border:1px solid var(--steel-3);
font-size:13px; font-weight:600; text-decoration:none;
box-shadow:0 2px 6px -3px rgba(27,53,86,.25);
transition:transform .22s var(--ease), background .22s, color .22s, border-color .22s;
}
body.home-art .promo-gift__cta span{ transition:transform .22s }
body.home-art .promo-gift__cta:hover{ background:linear-gradient(135deg,var(--cyan),#0b6470); color:#fff; border-color:transparent; transform:translateY(-2px) }
body.home-art .promo-gift__cta:hover span{ transform:translateX(3px) }
/* ===================== 商品卡 / 楼层组件精修 ===================== */
/* 通用卡片：更温润的边框与阴影，hover 统一上浮 + 顶部 2px 强调线 */
body.home-art .gcard{
border-color:var(--line-2);
border-radius:14px;
box-shadow:0 1px 3px rgba(22,32,46,.06);
}
body.home-art .gcard::after{
content:''; position:absolute; left:0; right:0; top:0; height:2px;
background:linear-gradient(90deg,var(--cyan),var(--steel));
transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
z-index:3;
}
body.home-art .gcard:hover{ transform:translateY(-4px); border-color:var(--steel-3); box-shadow:0 22px 40px -26px rgba(27,53,86,.45); }
body.home-art .gcard:hover::after{ transform:scaleX(1); }
/* 商品图区：更干净的浅色底 */
body.home-art .gcard__media{ background:linear-gradient(160deg,#fbfcfe,#eef2f7); border-bottom:1px solid var(--line-2); }
body.home-art .gcard__title{ color:var(--text-1); }
body.home-art .gcard:hover .gcard__title{ color:var(--steel); }
body.home-art .gcard__btn{ background:var(--steel-soft); border:1px solid rgba(30,58,95,.18); color:var(--steel); }
body.home-art .gcard__btn:hover{ background:var(--steel); color:#fff; border-color:var(--steel); }
/* 秒杀：保留琥珀→青的顶部强调线（唯一暖色促销点），其余商务化 */
body.home-art .seckill{ border-radius:16px; box-shadow:0 12px 30px -26px rgba(27,53,86,.4); }
body.home-art .seckill__hd{ border-bottom:1px solid var(--line-2); background:linear-gradient(180deg,#fafbfc,#f1f4f7); }
body.home-art .seckill__hd .l h2{ color:var(--text-1); }
body.home-art .seckill__hd .l h2 svg{ color:var(--steel); }
body.home-art .seckill__i .thumb{ background:linear-gradient(160deg,#fbfcfe,#eef2f7); border:1px solid var(--line-2); }
body.home-art .seckill__i h4{ color:var(--text-1); }
body.home-art .seckill__i .price{ color:var(--steel); }
body.home-art .seckill__i:hover{ background:var(--surface-2); }
/* 限时抢购：横向滑动轨道（自动滚动 + hover 暂停） */
body.home-art .seckill__bd{ display:flex; overflow:hidden; padding:0; }
body.home-art .seckill__track{
display:flex; flex:0 0 auto; width:max-content;
animation: seckillSlide 45s linear infinite;
}
body.home-art .seckill__bd:hover .seckill__track{ animation-play-state:paused; }
body.home-art .seckill__i{
flex:0 0 220px; width:220px;
border-right:1px solid var(--line);
}
body.home-art .seckill__i:last-child{ border-right:0; }
@keyframes seckillSlide{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
body.home-art .seckill__track{ animation:none; }
}
/* 移动端：取消自动滚动，改为可手动横滑（scroll-snap） */
@media (max-width:760px){
body.home-art .seckill__bd{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
body.home-art .seckill__track{ animation:none; }
body.home-art .seckill__i{ flex:0 0 72vw; width:72vw; scroll-snap-align:start; }
}
/* 分类楼层侧栏：更克制的边框与底纹 */
body.home-art .catfloor__side{ border:1px solid var(--line-2); box-shadow:0 12px 30px -26px rgba(27,53,86,.4); }
body.home-art .catfloor__side::after{ border-color:rgba(30,58,95,.06); box-shadow:inset 0 0 0 34px rgba(30,58,95,.03); }
body.home-art .catfloor__side h3{ color:var(--steel); }
body.home-art .catfloor__grid .gcard{ background:var(--surface); }
body.home-art .catfloor__extra-i{ border:1px solid var(--line-2); background:var(--surface); }
body.home-art .catfloor__extra-i:hover{ border-color:var(--steel-3); transform:translateY(-2px); box-shadow:0 16px 30px -24px rgba(27,53,86,.45); }
/* 新品分类入口 */
body.home-art .newcat__i{ border:1px solid var(--line-2); border-left:3px solid var(--nc,#1b3556); background:var(--surface); }
body.home-art .newcat__i:hover{ box-shadow:0 12px 28px -22px rgba(30,58,95,.4); transform:translateY(-2px); }
body.home-art .newcat__ic{ background:var(--cyan-soft); color:var(--nc,#1b3556); }
body.home-art .newcat__tx b{ color:var(--text-1); }
body.home-art .newcat__arw{ color:var(--cyan); }
/* 热销榜 */
body.home-art .ranklist{ border:1px solid var(--line-2); box-shadow:0 12px 30px -26px rgba(27,53,86,.4); }
body.home-art .ranklist__i .nm .tx b{ color:var(--text-1); }
body.home-art .ranklist__i:hover{ background:var(--surface-2); }
/* 耗材复购 */
body.home-art .rebuy__i{ border:1px solid var(--line-2); background:var(--surface); }
body.home-art .rebuy__i:hover{ border-color:var(--cyan); transform:translateY(-3px); box-shadow:0 16px 30px -24px rgba(27,53,86,.45); }
body.home-art .rebuy__i b{ color:var(--text-1); }
/* 采购保障 */
body.home-art .guarantee__i{ border:1px solid var(--line-2); background:var(--surface); }
body.home-art .guarantee__i:hover{ border-color:var(--steel-3); box-shadow:0 16px 30px -24px rgba(27,53,86,.45); }
body.home-art .guarantee__i .ic{ background:var(--steel-soft); border:1px solid rgba(30,58,95,.12); color:var(--steel); }
body.home-art .guarantee__i b{ color:var(--text-1); }
/* ===================== 首页导航：滑动下划线 + 圆点跳动（仅首页） ===================== */
body.home-art .catnav__in{ position:relative; }
/* 共享滑动下划线（JS 注入 .catnav__ink，在导航项之间真实滑动） */
body.home-art .catnav__ink{
position:absolute; bottom:0; left:0; height:3px; width:0;
background:linear-gradient(90deg,var(--steel),var(--cyan));
border-radius:3px; pointer-events:none; z-index:3;
box-shadow:0 0 10px rgba(15,124,138,.5);
transition:transform .42s cubic-bezier(.22,1,.36,1), width .42s cubic-bezier(.22,1,.36,1);
}
/* 每个导航项：前置圆点（默认隐藏，hover/active 弹性弹入） */
body.home-art .catnav a{ position:relative; }
body.home-art .catnav a::before{
content:''; display:inline-block;
width:5px; height:5px; border-radius:50%;
background:var(--cyan);
opacity:0; transform:scale(0) translateY(3px); margin-right:0;
transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s, margin-right .3s;
}
body.home-art .catnav a:hover::before,
body.home-art .catnav a.is-active::before{
opacity:1; transform:scale(1) translateY(0); margin-right:7px;
}
/* 字体跳动：hover/focus 时整项弹性上跳（与圆点点亮同步，幅度克制） */
body.home-art .catnav a:hover,
body.home-art .catnav a:focus-visible{
color:var(--steel);
animation:navBounce .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes navBounce{
0%{ transform:translateY(0) }
30%{ transform:translateY(-4px) }
55%{ transform:translateY(-1px) }
78%{ transform:translateY(-2px) }
100%{ transform:translateY(0) }
}
/* 激活项：去掉静态下边框，改由滑动下划线作为唯一指示 */
body.home-art .catnav a.is-active{ color:var(--steel); border-bottom-color:transparent; }
/* v-20260928f：掐掉「多出来的一条固定下划线」（双下巴）——
styles.css:1852 的 .catnav a.is-active::after（钢蓝→青，左右各缩 14px）bottom:0 是相对 的
padding-box（ 有 2px 透明下边框 → 底边在 40px），而 .catnav__ink 的 bottom:0 相对 .catnav__in
（底边 42px）→ 两条上下错位 2px，叠成 5px 高的双色条（实测暗青 y37.0-38.67 / 亮蓝→橙 y39.0-41.67）。
首页唯一指示器保留滑动 ink；非首页不注入 ink，仍沿用 styles.css 的静态下划线，故只在本作用域内杀 ::after。 */
body.home-art .catnav a.is-active::after{ content:none; }
/* 移动端横向滚动时关闭跳动，避免滚动抖动（圆点与下划线仍保留） */
@media (max-width:760px){
body.home-art .catnav a:hover{ animation:none }
}
/* ===================== 响应式镜像（保留此前移动/平板修复） ===================== */
@media (max-width:1200px){
body.home-art .hero__grid{ grid-template-columns:1fr; height:auto }
body.home-art .hero__side{ grid-template-rows:auto; grid-template-columns:1fr 1fr }
body.home-art .banner{ min-height:300px; padding:0 36px }
body.home-art .banner h1{ font-size:38px }
body.home-art .floor{ padding:48px 0 }
}
@media (max-width:720px){
body.home-art .banner h1{ font-size:26px }
body.home-art .banner{ padding:0 }
body.home-art .banner__txt{ padding:0 22px }
body.home-art .banner__dots{ left:22px }
body.home-art .hero__side{ grid-template-columns:1fr }
}
@media (max-width:760px){
body.home-art .hero{ margin-top:16px }
body.home-art .banner{ min-height:240px; padding:26px 20px }
body.home-art .banner h1{ font-size:23px; line-height:1.3; margin-bottom:12px; color:var(--steel) }
body.home-art .slide .banner__txt h1{ color:var(--steel) }
body.home-art .banner p{ font-size:13.5px; margin-bottom:20px; line-height:1.65 }
body.home-art .banner__cta{ gap:10px }
body.home-art .banner__cta .btn{ flex:1; height:46px; padding:0 16px; font-size:14px }
body.home-art .banner__dots{ bottom:16px; left:20px }
body.home-art .hero__grid{ gap:12px }
body.home-art .hero__side{ gap:12px }
body.home-art .sidecard{ padding:18px 20px }
body.home-art .floor{ padding:38px 0 }
body.home-art .floor__title h2{ font-size:22px }
/* 公告栏 / 承诺条 / 赠品卡 移动端统一收口 */
body.home-art #__promoSiteBar .promo-bar{ padding:0 12px; min-height:40px }
body.home-art #__promoSiteBar .promo-bar::before{ display:none }
body.home-art #__promoSiteBar .promo-bar__ic{ width:22px; height:22px }
body.home-art #__promoSiteBar .promo-bar__ic svg{ width:12px; height:12px }
body.home-art .promise{ grid-template-columns:repeat(2,1fr); padding:11px 4px; gap:8px 0 }
body.home-art .promise__i{ border-right:0; padding:6px 9px }
body.home-art .promise__badge{ width:32px; height:32px }
body.home-art .promise__badge svg{ width:17px; height:17px }
body.home-art .promise__txt strong{ font-size:13px }
body.home-art .promise__txt em{ font-size:11px }
body.home-art .promo-gift{ flex-wrap:wrap; gap:10px; padding:12px 14px; margin:10px auto 14px }
body.home-art .promo-gift__ic{ width:34px; height:34px }
body.home-art .promo-gift__ic svg{ width:18px; height:18px }
body.home-art .promo-gift__cta{ width:100%; justify-content:center }
}
@media (max-width:480px){
body.home-art .banner h1{ font-size:20px }
body.home-art .banner p{ font-size:13px }
body.home-art .banner__cta{ flex-direction:column }
body.home-art .banner__cta .btn{ width:100% }
body.home-art .floor{ padding:32px 0 }
body.home-art .floor__head{ margin-bottom:16px; gap:12px }
body.home-art .floor__title h2{ font-size:19px }
body.home-art .promise{ grid-template-columns:1fr; gap:5px; padding:10px 6px }
body.home-art .promise__i{ justify-content:flex-start; padding:6px 10px }
}
/* ============================================================
博之宇 首页 v5 强化（精工 · 信赖）
1) Hero：轮播图缺失时优雅渐变兜底 + 设备线稿装饰（保证无图也高级）
2) 实力数据带：对标震坤行的大数字信任带
3) 侧卡玻璃质感、商品卡媒体聚光（与全局 v5 衔接）
============================================================ */
/* ===================== HERO 渐变兜底 + 装饰 ===================== */
/* 默认轮播图指向 assets/banners/*.webp，演示环境缺失 → 用深色钢蓝渐变优雅兜底 */
body.home-art .banner{ box-shadow:0 30px 70px -42px rgba(27,53,86,.65); }
body.home-art .slide{ background:var(--steel-grad-2); }
body.home-art .slide--steel{ background:linear-gradient(125deg,#234a73,#14283d); }
body.home-art .slide--cyan{ background:linear-gradient(125deg,#0f7c8a,#0b525c); }
body.home-art .slide--amber{ background:linear-gradient(135deg,#3a4250,#252b35); }
/* 设备线稿 + 蓝图网格：右侧点胶设备线稿 + 工程蓝图细网格，叠加在渐变之上、文字之下
（对标设备品牌官网的"技术蓝图"质感；svg 为真实素材，演示环境也显示） */
body.home-art .slide::before{
content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
background:
url('assets/equip-line-h.svg') right -6px center/auto 252px no-repeat,
radial-gradient(60% 80% at 84% 26%, rgba(255,255,255,.16), transparent 60%),
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/40px 40px,
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/40px 40px;
opacity:.55;
-webkit-mask-image:linear-gradient(90deg, transparent 30%, #000 100%);
mask-image:linear-gradient(90deg, transparent 30%, #000 100%);
}
/* 蓝图十字定位标记（工程测量感，仅装饰） */
body.home-art .banner::after{
content:''; position:absolute; z-index:2; pointer-events:none;
top:18px; right:18px; width:26px; height:26px;
border-top:2px solid rgba(26,166,182,.55); border-right:2px solid rgba(26,166,182,.55);
border-bottom:2px solid transparent; border-left:2px solid transparent;
}
/* 深色 Hero：左侧轻压暗提升文字对比（深色纱，非浅色），整体更统一、更有工业冲击力 */
body.home-art .slide__scrim{
background:linear-gradient(90deg, rgba(11,22,38,.62) 0%, rgba(11,22,38,.30) 42%, rgba(11,22,38,.05) 68%, transparent 100%);
z-index:2;
}
/* 文字层压在装饰与 scrim 之上，深底白字 */
body.home-art .slide .banner__txt{ position:relative; z-index:3; }
body.home-art .slide .banner__txt h1{ color:#fff; text-shadow:0 2px 20px rgba(8,16,28,.45); }
body.home-art .slide .banner__txt p{ color:rgba(255,255,255,.87); text-shadow:0 1px 12px rgba(8,16,28,.42); }
body.home-art .slide .banner__eyebrow{ color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.30); backdrop-filter:blur(4px); }
body.home-art .slide .banner__eyebrow i{ background:var(--cyan-2); }
/* 深底 CTA：主按钮走青绿强调色，幽灵按钮白描边，对比更强 */
body.home-art .slide .banner__cta .btn--primary{ background:var(--accent-grad); border-color:transparent; box-shadow:0 12px 26px -12px rgba(15,124,138,.85); }
body.home-art .slide .banner__cta .btn--primary:hover{ filter:brightness(1.08); }
body.home-art .slide .banner__cta .btn--ghost{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); color:#fff; backdrop-filter:blur(4px); }
body.home-art .slide .banner__cta .btn--ghost:hover{ background:rgba(255,255,255,.18); border-color:#fff; color:#fff; }
/* 指示点：深底浅色 */
body.home-art .banner__dots i{ background:rgba(255,255,255,.35); }
body.home-art .banner__dots i.is-active{ background:#fff; }
/* ===================== 实力数据带 ===================== */
body.home-art .trustband{ margin-top:16px; }
body.home-art .trustband__in{
position:relative; overflow:hidden;
display:grid; grid-template-columns:repeat(5,1fr);
background:var(--steel-grad-2);
border:1px solid rgba(255,255,255,.08);
border-radius:var(--r-xl);
box-shadow:0 26px 54px -36px rgba(27,53,86,.75);
}
body.home-art .trustband__in::before{
content:''; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(80% 130% at 0% 0%, rgba(26,166,182,.20), transparent 55%),
radial-gradient(80% 130% at 100% 100%, rgba(26,166,182,.14), transparent 55%);
}
body.home-art .trustband__item{
position:relative; z-index:1;
padding:28px 16px; text-align:center;
border-right:1px solid rgba(255,255,255,.09);
}
body.home-art .trustband__item:last-child{ border-right:0 }
body.home-art .trustband__item b{
display:block; font-family:var(--mono); font-weight:800; font-size:36px; line-height:1; color:#fff; letter-spacing:.5px;
}
body.home-art .trustband__item b i{ font-size:16px; font-style:normal; margin-left:2px; color:var(--cyan-2); font-weight:700; }
body.home-art .trustband__item span{ display:block; margin-top:9px; font-size:13px; color:rgba(255,255,255,.74); letter-spacing:.4px; }
/* ===================== 侧卡：玻璃质感强化 ===================== */
body.home-art .sidecard{
background:linear-gradient(160deg, rgba(255,255,255,.96), rgba(246,248,251,.92));
backdrop-filter:blur(6px);
border-radius:16px;
}
body.home-art .sidecard h3{ font-size:17.5px; }
/* ===================== 商品卡：媒体聚光（与全局 v5 衔接） ===================== */
body.home-art .gcard__media{
background:
radial-gradient(120% 90% at 50% 16%, rgba(255,255,255,.95), rgba(238,242,247,.3) 55%, rgba(214,222,230,.5) 100%),
linear-gradient(160deg,#f5f8fc,#e9eff5);
}
body.home-art .gcard__media svg{ width:62%; height:62%; opacity:.92; filter:drop-shadow(0 6px 14px rgba(27,53,86,.18)); }
body.home-art .gcard:hover .gcard__media svg{ transform:scale(1.08) translateY(-2px); }
body.home-art .gcard__title{ font-size:14.5px; line-height:1.45; }
body.home-art .gcard__btn:hover{ background:var(--steel); color:#fff; border-color:var(--steel); transform:translateY(-1px); }
/* ===================== 细节修复：去掉重复楼层编号 =====================
样式系统原始设计在 h2::before 渲染 "NN /"（counter:floor，含秒杀层），
v3 又加了独立计数器徽标，二者叠加成 "01 + 02 /" 重复编号。
首页只保留 v3 徽标，隐藏陈旧的 h2::before。 */
body.home-art .floor__title h2::before{ display:none; }
/* ===================== 实力数据带 · 响应式 ===================== */
@media (max-width:760px){
body.home-art .trustband__in{ grid-template-columns:repeat(2,1fr); }
body.home-art .trustband__item{ border-right:0; border-bottom:1px solid rgba(255,255,255,.09); padding:20px 12px; }
body.home-art .trustband__item:nth-child(odd){ border-right:1px solid rgba(255,255,255,.09); }
body.home-art .trustband__item b{ font-size:30px; }
}
@media (max-width:480px){
body.home-art .trustband__in{ grid-template-columns:1fr 1fr; }
}
/* ============================================================
博之宇 首页 v6 强化（设备品牌官网方向 · 对标三一/徐工、格兰富/丹佛斯/力士乐/费斯托）
1) Hero 应用行业芯片条
2) 「行业应用」招牌板块（设备品牌 vs 电商热卖分类 的本质区别）
3) 信任带重框为「企业实力」
设计语言：技术蓝图质感 + 行业方案导向 + 企业实力，而非促销/秒杀
============================================================ */
/* ===================== HERO · 应用行业芯片条 ===================== */
body.home-art .banner__txt .banner__tags{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:22px; }
body.home-art .banner__tags .bt__lab{ font-size:11px; letter-spacing:2px; color:rgba(255,255,255,.72); text-transform:uppercase; margin-right:2px; }
body.home-art .banner__tags .bt__chip{ font-size:12.5px; line-height:1; padding:7px 12px; border-radius:999px; color:#fff;
background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.30); backdrop-filter:blur(4px); transition:all .2s var(--ease); }
body.home-art .banner__tags .bt__chip:hover{ background:var(--cyan); border-color:var(--cyan); color:#06222a; transform:translateY(-1px); }
/* ===================== 行业应用 · 招牌板块 ===================== */
body.home-art .apps{ padding:56px 0 6px; }
body.home-art .apps__hd{ text-align:center; max-width:760px; margin:0 auto 32px; }
body.home-art .apps__kicker{ display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:3px; color:var(--cyan); margin-bottom:10px; }
body.home-art .apps__hd h2{ font-size:26px; font-weight:800; color:var(--steel); letter-spacing:.5px; }
body.home-art .apps__hd p{ margin-top:10px; font-size:14px; color:var(--text-2); }
body.home-art .apps__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
body.home-art .apps__i{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:20px 18px; border-radius:var(--r-lg);
background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); text-decoration:none; position:relative; overflow:hidden; transition:all .22s var(--ease); }
body.home-art .apps__i::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--cyan),var(--steel)); opacity:0; transition:opacity .22s; }
body.home-art .apps__i:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:rgba(26,166,182,.45); }
body.home-art .apps__i:hover::before{ opacity:1; }
body.home-art .apps__ic{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg, rgba(43,86,128,.10), rgba(26,166,182,.14)); color:var(--steel); margin-bottom:8px; }
body.home-art .apps__ic svg{ width:26px; height:26px; }
body.home-art .apps__i b{ font-size:15.5px; color:var(--text); font-weight:700; }
body.home-art .apps__i em{ font-size:12.5px; color:var(--text-2); font-style:normal; }
/* ===================== 信任带 · 重框为「企业实力」 ===================== */
body.home-art .strength__hd{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:16px; }
body.home-art .strength__kicker{ font-family:var(--mono); font-size:12px; letter-spacing:3px; color:var(--cyan); margin-bottom:8px; }
body.home-art .strength__hd h2{ font-size:22px; font-weight:800; color:var(--steel); }
body.home-art .strength__sub{ margin-top:6px; font-size:13px; color:var(--text-2); }
/* ===================== 行业应用 · 响应式 ===================== */
@media (max-width:760px){
body.home-art .apps__grid{ grid-template-columns:repeat(2,1fr); }
body.home-art .apps__hd h2{ font-size:22px; }
body.home-art .apps__i{ padding:16px 14px; }
}
@media (max-width:480px){
body.home-art .apps__grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
}
/* ==========================================================================
v7 · 首页商城化改版 —— 对标 ickey.cn（云汉芯城）电商信息架构
加法式覆盖：仅以 body.home-art 作用域生效，不改动既有类名与规则
新增：① 促销通栏 ② 快捷标签行 ③ 三栏 Hero（左分类树 / 中 Banner / 右信息卡）
④ 底部悬浮领券条
========================================================================== */
/* ---------- ① 促销通栏（topbar 与 header 之间，仅首页） ---------- */
body.home-art .v7-strip{
position:relative;overflow:hidden;color:#fff;
background:linear-gradient(90deg,#16304e 0%,#1b3556 46%,#25527d 100%);
}
body.home-art .v7-strip::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 2px,transparent 2px 24px);
}
body.home-art .v7-strip::before{
content:'';position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;
background:radial-gradient(circle,rgba(26,166,182,.30),transparent 68%);
}
body.home-art .v7-strip__in{
max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);height:46px;
display:flex;align-items:center;gap:14px;position:relative;z-index:1;
}
body.home-art .v7-strip__badge{
display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
font-size:12.5px;font-weight:700;letter-spacing:.4px;
padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.28);
}
body.home-art .v7-strip__badge svg{width:13px;height:13px;color:var(--cyan-2)}
body.home-art .v7-strip__t{font-size:15.5px;font-weight:800;letter-spacing:.3px}
body.home-art .v7-strip__t em{font-style:normal;color:#7fe0ea;margin-left:6px}
body.home-art .v7-strip__pill{
font-size:12.5px;padding:4px 13px;border-radius:999px;flex-shrink:0;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#eaf6fa;
font-family:var(--mono);letter-spacing:.4px;
}
body.home-art .v7-strip__cta{
margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
height:31px;padding:0 17px;border-radius:999px;font-size:13.5px;font-weight:800;color:#06222a;
background:linear-gradient(180deg,#7fe0ea,#1aa6b6);
box-shadow:0 4px 14px rgba(15,124,138,.32),inset 0 1px 0 rgba(255,255,255,.55);
transition:transform .18s var(--ease),filter .18s;
}
body.home-art .v7-strip__cta:hover{transform:translateY(-1px);filter:brightness(1.06)}
body.home-art .v7-strip__cta span{transition:transform .18s}
body.home-art .v7-strip__cta:hover span{transform:translateX(3px)}
/* ---------- ③ 三栏 Hero ---------- */
body.home-art .hero{margin:18px 0 0}
body.home-art .hero__grid{
grid-template-columns:238px minmax(0,1fr) 274px;
gap:14px;height:396px;
}
/* 中列 Banner 在变窄后的排版收敛 */
body.home-art .hero__grid>.banner{padding:0 40px}
body.home-art .hero__grid>.banner h1{font-size:31px;letter-spacing:-.4px;margin-bottom:11px}
body.home-art .hero__grid>.banner p{font-size:14px;margin-bottom:20px}
body.home-art .hero__grid>.banner .banner__cta .btn--lg{height:40px;padding:0 20px;font-size:14px}
body.home-art .hero__grid>.banner .banner__tags{margin-top:16px}
body.home-art .hero__grid>.banner .bt__chip{font-size:11.5px;padding:3px 9px}
body.home-art .hero__grid>.banner .banner__dots{bottom:14px}
/* —— 左栏：全部产品分类树 —— */
body.home-art .hcat{
position:relative;height:100%;display:flex;flex-direction:column;
background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
box-shadow:var(--shadow);z-index:6;
}
body.home-art .hcat__hd{
display:flex;align-items:center;gap:9px;height:46px;padding:0 15px;flex-shrink:0;
color:#fff;font-size:14.5px;font-weight:700;letter-spacing:.3px;white-space:nowrap;
background:linear-gradient(135deg,var(--steel),var(--steel-2));
border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
body.home-art .hcat__hd svg{width:17px;height:17px;color:var(--silver-2);flex-shrink:0}
body.home-art .hcat__hd em{ display:none }
body.home-art .hcat__list{flex:1;display:flex;flex-direction:column;padding:5px 0;min-height:0}
body.home-art .hcat__i{position:relative;flex:1;min-height:34px;display:flex}
body.home-art .hcat__i>a{
flex:1;display:flex;align-items:center;gap:9px;padding:0 15px;
font-size:13.5px;font-weight:600;color:var(--text-2);
transition:background .16s var(--ease),color .16s,padding-left .18s var(--ease);
}
body.home-art .hcat__i>a::before{
content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
width:3px;height:0;border-radius:0 2px 2px 0;
background:linear-gradient(180deg,var(--cyan),var(--steel));transition:height .2s var(--ease);
}
body.home-art .hcat__i:hover>a::before{height:20px}
body.home-art .hcat__i:hover>a{
background:linear-gradient(90deg,rgba(15,124,138,.10),rgba(15,124,138,.01) 72%,transparent);
color:var(--steel);padding-left:19px;
}
body.home-art .hcat__i>a i.dot{
width:5px;height:5px;border-radius:50%;background:var(--silver-2);flex-shrink:0;
transition:background .16s,transform .16s;
}
body.home-art .hcat__i:hover>a i.dot{background:var(--cyan);transform:scale(1.3)}
body.home-art .hcat__i>a .arw{margin-left:auto;font-size:15px;line-height:1;color:var(--line-3);transition:color .16s,transform .16s}
body.home-art .hcat__i:hover>a .arw{color:var(--cyan);transform:translateX(2px)}
/* 二级飞出面板 */
body.home-art .hcat__fly{
position:absolute;left:100%;top:-1px;min-width:320px;max-width:420px;padding:15px 17px 13px;
background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
box-shadow:0 18px 44px -18px rgba(20,30,45,.42),0 2px 8px rgba(20,30,45,.06);
opacity:0;visibility:hidden;transform:translateX(-8px);
transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:30;
}
body.home-art .hcat__i:hover .hcat__fly{opacity:1;visibility:visible;transform:translateX(0)}
body.home-art .hcat__fly h5{
display:flex;align-items:baseline;gap:7px;font-size:13.5px;font-weight:700;color:var(--steel);
padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--line);
}
body.home-art .hcat__fly h5 em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;color:var(--text-3);font-weight:400}
body.home-art .hcat__fly .subs{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px}
body.home-art .hcat__fly .subs a{
display:block;font-size:12.5px;color:var(--text-2);padding:5px 7px;border-radius:var(--r-xs);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .15s;
}
body.home-art .hcat__fly .subs a:hover{background:var(--cyan-soft);color:var(--cyan);padding-left:11px}
body.home-art .hcat__fly .all{
display:inline-flex;align-items:center;gap:5px;margin-top:11px;
font-size:12.5px;font-weight:700;color:var(--steel-3);transition:gap .18s,color .18s;
}
body.home-art .hcat__fly .all:hover{color:var(--steel);gap:9px}
/* —— 右栏：信息卡列 —— */
body.home-art .hero__side{display:flex;flex-direction:column;gap:10px;height:100%}
body.home-art .v7-card{
background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
box-shadow:var(--shadow);overflow:hidden;
}
/* 欢迎 / 登录卡 */
body.home-art .v7-welc{flex:0 0 auto;padding:12px 13px;display:flex;flex-direction:column;gap:9px}
body.home-art .v7-welc__hd{display:flex;align-items:center;gap:10px}
body.home-art .v7-welc__av{
width:38px;height:38px;border-radius:50%;flex-shrink:0;color:#fff;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--steel),var(--cyan));
box-shadow:0 4px 12px -4px rgba(27,53,86,.5);
}
body.home-art .v7-welc__av svg{width:20px;height:20px}
body.home-art .v7-welc__tx{min-width:0}
body.home-art .v7-welc__tx b{display:block;font-size:13.5px;color:var(--text-1);line-height:1.35}
body.home-art .v7-welc__tx span{display:block;font-size:11.5px;color:var(--text-3);line-height:1.45}
body.home-art .v7-welc__btns{display:flex;gap:8px}
body.home-art .v7-welc__btns a{
flex:1;height:31px;display:flex;align-items:center;justify-content:center;
border-radius:var(--r-sm);font-size:13px;font-weight:700;transition:all .18s;
}
body.home-art .v7-welc__btns a.p{background:var(--steel);color:#fff;box-shadow:0 4px 12px -6px rgba(27,53,86,.8)}
body.home-art .v7-welc__btns a.p:hover{background:var(--steel-2)}
body.home-art .v7-welc__btns a.g{border:1px solid var(--line-2);color:var(--steel);background:#fff}
body.home-art .v7-welc__btns a.g:hover{border-color:var(--steel-3);background:var(--steel-soft)}
/* 新人福利条 */
body.home-art .v7-gift{
display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-md);
background:linear-gradient(90deg,#fff5ea,#ffe9d6);border:1px solid #ffdcc0;
}
body.home-art .v7-gift b{font-size:12.5px;color:#b8341c;flex-shrink:0}
body.home-art .v7-gift span{font-size:11.5px;color:#a9744f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.home-art .v7-gift a{
margin-left:auto;flex-shrink:0;font-size:11.5px;font-weight:700;color:#fff;
background:linear-gradient(180deg,#e0694a,#cd5230);padding:4px 10px;border-radius:999px;
box-shadow:0 3px 9px -3px rgba(205,82,48,.7);transition:filter .18s,transform .18s;
}
body.home-art .v7-gift a:hover{filter:brightness(1.07);transform:translateY(-1px)}
/* 双数据小卡 */
body.home-art .v7-mini{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.home-art .v7-mini a{
padding:11px 12px;border-radius:var(--r-lg);display:flex;flex-direction:column;gap:3px;
background:linear-gradient(158deg,#f3f9fb,#e7f1f5);border:1px solid rgba(15,124,138,.20);
transition:all .2s var(--ease);
}
body.home-art .v7-mini a:hover{
transform:translateY(-2px);border-color:var(--cyan);
box-shadow:0 12px 24px -14px rgba(15,124,138,.75);
}
body.home-art .v7-mini b{font-family:var(--mono);font-size:20px;font-weight:800;color:var(--steel);line-height:1.08;letter-spacing:-.5px}
body.home-art .v7-mini b i{font-size:11px;font-style:normal;color:var(--cyan);margin-left:1px}
body.home-art .v7-mini span{font-size:11.5px;color:var(--text-2);line-height:1.4}
/* 采购快捷入口 2×2 */
body.home-art .v7-ent{
flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
gap:1px;background:var(--line);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
box-shadow:var(--shadow);
}
body.home-art .v7-ent a{
background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
font-size:12.5px;font-weight:600;color:var(--text-2);transition:background .18s,color .18s;
}
body.home-art .v7-ent a svg{width:19px;height:19px;color:var(--steel-3);transition:color .18s,transform .18s}
body.home-art .v7-ent a:hover{background:var(--cyan-soft);color:var(--cyan)}
body.home-art .v7-ent a:hover svg{color:var(--cyan);transform:scale(1.1)}
/* ---------- ④ 底部悬浮领券条（仅首页 · 桌面端） ---------- */
body.home-art .v7-coupon{
position:fixed;left:0;right:0;bottom:0;z-index:62;
background:linear-gradient(90deg,#132239,#1b3556 46%,#22405f);
box-shadow:0 -8px 28px rgba(10,20,35,.34);
animation:v7-coupon-in .36s var(--ease) both;
}
@keyframes v7-coupon-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
body.home-art .v7-coupon.is-off{transition:transform .26s var(--ease),opacity .26s;transform:translateY(100%);opacity:0}
body.home-art .v7-coupon__in{
max-width:var(--maxw);margin:0 auto;padding:9px var(--pad-x);
display:flex;align-items:center;gap:14px;color:#fff;
}
body.home-art .v7-coupon__ic{
width:34px;height:34px;border-radius:9px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:15px;font-weight:800;color:#06222a;
background:linear-gradient(160deg,#7fe0ea,#1aa6b6);
box-shadow:0 4px 12px -4px rgba(15,124,138,.9);
}
body.home-art .v7-coupon__tx b{font-size:15px;font-weight:800;letter-spacing:.3px}
body.home-art .v7-coupon__tx b em{font-style:normal;font-family:var(--mono);font-size:17px;color:var(--cyan-2);margin:0 2px}
body.home-art .v7-coupon__tx span{display:block;font-size:11.5px;color:rgba(255,255,255,.6);line-height:1.4}
body.home-art .v7-coupon__f{margin-left:auto;display:flex;gap:8px;flex-shrink:0}
body.home-art .v7-coupon__f input{
width:210px;height:34px;border-radius:var(--r-sm);padding:0 12px;font-size:13px;outline:none;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#fff;
transition:border-color .18s,box-shadow .18s;
}
body.home-art .v7-coupon__f input::placeholder{color:rgba(255,255,255,.42)}
body.home-art .v7-coupon__f input:focus{border-color:var(--cyan-2);box-shadow:0 0 0 3px rgba(26,166,182,.18)}
body.home-art .v7-coupon__f button{
height:34px;padding:0 20px;border-radius:var(--r-sm);font-size:13.5px;font-weight:800;color:#06222a;
background:linear-gradient(180deg,#7fe0ea,#1aa6b6);transition:filter .18s,transform .18s;
}
body.home-art .v7-coupon__f button:hover{filter:brightness(1.07);transform:translateY(-1px)}
body.home-art .v7-coupon__x{
flex-shrink:0;width:24px;height:24px;border-radius:50%;color:rgba(255,255,255,.5);
font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;
transition:all .18s;
}
body.home-art .v7-coupon__x:hover{background:rgba(255,255,255,.14);color:#fff}
/* ---------- v7 响应式 ---------- */
@media (min-width:901px){
/* 底部固定领券条不遮住页脚 */
body.home-art{padding-bottom:64px}
}
@media (max-width:1240px){
body.home-art .hero__grid{grid-template-columns:minmax(0,1fr) 288px;height:auto;min-height:352px}
body.home-art .hcat{display:none}
}
@media (max-width:900px){
body.home-art .hero__grid{grid-template-columns:minmax(0,1fr);height:auto;gap:12px}
body.home-art .hero__side{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:auto}
body.home-art .v7-welc,body.home-art .v7-ent{grid-column:1 / -1}
body.home-art .v7-ent{grid-template-rows:auto auto;gap:1px}
body.home-art .v7-ent a{padding:13px 8px}
body.home-art .v7-coupon{display:none}
}
@media (max-width:620px){
body.home-art .v7-strip__in{height:42px;gap:10px}
body.home-art .v7-strip__t{font-size:13.5px}
body.home-art .v7-strip__t em,body.home-art .v7-strip__pill{display:none}
body.home-art .v7-strip__cta{height:28px;padding:0 13px;font-size:12.5px}
body.home-art .hero__side{grid-template-columns:1fr}
body.home-art .v7-mini{grid-template-columns:1fr 1fr}
/* 窄屏 Banner：内容改为纵向堆叠，保留既有 min-height 承担高度
（.slide 为 position:absolute;inset:0，Banner 高度只能由 min-height 撑起，不可置 0） */
body.home-art .hero__grid>.banner{min-height:300px;padding:0}
body.home-art .hero__grid>.banner h1{font-size:24px}
body.home-art .hero__grid>.banner p{font-size:13.5px;margin-bottom:16px}
body.home-art .hero__grid>.banner .banner__cta{flex-wrap:wrap;gap:10px}
body.home-art .hero__grid>.banner .banner__cta .btn--lg{flex:1 1 100%;justify-content:center;height:38px}
body.home-art .hero__grid>.banner .banner__tags{display:none}
body.home-art .v7-coupon__f input{width:120px}
}
/* ==========================================================================
v7b · 美工细节精修（在 v7 首页商城化基础上打磨观感）
仍为加法式覆盖：同作用域 body.home-art，后置生效，不改动既有规则
========================================================================== */
/* —— ① 促销通栏：层次与按钮质感 —— */
body.home-art .v7-strip{
background:linear-gradient(90deg,#14283d 0%,#1b3556 38%,#234a74 70%,#2c5f8f 100%);
box-shadow:inset 0 -1px 0 rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.06);
}
body.home-art .v7-strip::after{opacity:.8}
body.home-art .v7-strip__badge{
background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.30);
box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
}
body.home-art .v7-strip__cta{
box-shadow:0 6px 16px -6px rgba(15,124,138,.55),inset 0 1px 0 rgba(255,255,255,.70);
}
/* 日期胶囊与 CTA 归为一组靠右，消除中部空隙 */
body.home-art .v7-strip__pill{margin-left:auto}
body.home-art .v7-strip__cta{margin-left:10px}
/* —— ③ 左栏分类树：头部质感 / 方形标记 / 箭头对比 / 行分隔 —— */
body.home-art .hcat{
border-color:#e3e8ef;
box-shadow:0 1px 2px rgba(20,30,45,.05),0 14px 34px -24px rgba(20,30,45,.45);
}
body.home-art .hcat__hd{
background:linear-gradient(120deg,#16304e 0%,#1b3556 46%,#2a5a78 100%);
box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);
}
body.home-art .hcat__hd svg{color:#8fd7e6}
body.home-art .hcat__list{padding:6px 0}
body.home-art .hcat__i>a{gap:10px}
/* 首字前的圆点 → 方形标记（悬停旋转并转为品牌青） */
body.home-art .hcat__i>a i.dot{
width:6px;height:6px;border-radius:2px;
background:linear-gradient(135deg,#93d6df,#2f7f95);opacity:.5;
transition:background .16s,opacity .16s,transform .18s var(--ease);
}
body.home-art .hcat__i:hover>a i.dot{
opacity:1;background:linear-gradient(135deg,var(--cyan),var(--steel-2));
transform:rotate(45deg) scale(1.15);
}
body.home-art .hcat__i>a .arw{color:#9aa7b8;font-size:16px;font-weight:700}
body.home-art .hcat__i:hover>a .arw{color:var(--cyan);transform:translateX(3px)}
/* 极淡行分隔，提升扫读（首行不加） */
body.home-art .hcat__i+.hcat__i>a::after{
content:'';position:absolute;left:15px;right:15px;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(20,30,45,.065) 14%,rgba(20,30,45,.065) 86%,transparent);
}
/* 二级飞出：加强投影；hover 改为左侧强调条（不再位移，消除抖动） */
body.home-art .hcat__fly{
box-shadow:0 20px 48px -20px rgba(20,30,45,.45),0 2px 10px rgba(20,30,45,.07);
}
body.home-art .hcat__fly .subs a{padding:6px 9px;border-radius:6px}
body.home-art .hcat__fly .subs a:hover{
background:var(--cyan-soft);color:var(--cyan);padding-left:9px;
box-shadow:inset 2px 0 0 0 var(--cyan);
}
/* —— ④ 中列 Banner：行业标签与细节 —— */
body.home-art .hero__grid>.banner .bt__lab{color:rgba(255,255,255,.60)}
body.home-art .hero__grid>.banner .bt__chip{
display:inline-flex;align-items:center;height:23px;padding:0 10px;
font-size:11.5px;border-radius:999px;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
color:rgba(255,255,255,.94);
transition:background .18s,border-color .18s,transform .18s;
}
body.home-art .hero__grid>.banner .bt__chip:hover{
background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.40);transform:translateY(-1px);
}
/* —— ⑤ 右栏信息卡：欢迎卡 / 新人条 / 数据小卡 / 2×2 入口 —— */
body.home-art .v7-welc{padding:13px 14px;gap:10px}
body.home-art .v7-welc__av{
box-shadow:0 6px 16px -6px rgba(15,124,138,.75),0 0 0 3px rgba(15,124,138,.10);
}
body.home-art .v7-welc__btns a{height:32px}
body.home-art .v7-gift{
background:linear-gradient(90deg,#eef8fa,#e0f1f4);
border-color:rgba(26,166,182,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
/* 数据小卡：数字渐变化 + 右上柔光 */
body.home-art .v7-mini{gap:9px}
body.home-art .v7-mini a{
position:relative;overflow:hidden;padding:12px 12px 11px;gap:4px;
background:linear-gradient(158deg,#f4fafc 0%,#e7f1f5 100%);
border-color:rgba(15,124,138,.22);
}
body.home-art .v7-mini a::after{
content:'';position:absolute;right:-20px;top:-20px;width:60px;height:60px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(15,124,138,.18),transparent 70%);
}
body.home-art .v7-mini b{
font-size:23px;letter-spacing:-.6px;
background:linear-gradient(120deg,#17304f 10%,#0f7c8a 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
body.home-art .v7-mini b i{
font-size:11.5px;margin-left:2px;letter-spacing:0;-webkit-text-fill-color:var(--cyan);
}
body.home-art .v7-mini span{font-size:11px;line-height:1.4;text-wrap:balance}
/* 2×2 采购入口：图标加色块 */
body.home-art .v7-ent{border-color:#e6ebf1;background:#eef1f5}
body.home-art .v7-ent a{gap:9px;color:var(--text-2)}
body.home-art .v7-ent a svg{
width:34px;height:34px;padding:8px;border-radius:11px;box-sizing:border-box;
background:linear-gradient(158deg,#eef7f9,#dbeaf0);
color:#2f7f95;box-shadow:inset 0 0 0 1px rgba(47,127,149,.10);
transition:background .2s var(--ease),color .2s,transform .2s var(--ease),box-shadow .2s;
}
body.home-art .v7-ent a:hover{background:#f6fbfc;color:var(--cyan)}
body.home-art .v7-ent a:hover svg{
background:linear-gradient(158deg,#17a2b6,#0f7c8a);color:#fff;
box-shadow:0 9px 18px -8px rgba(15,124,138,.9);
transform:translateY(-1px) scale(1.03);
}
/* —— ⑥ 底部领券条：顶部金线 + 券标质感 —— */
body.home-art .v7-coupon{box-shadow:0 -10px 30px rgba(10,20,35,.42)}
body.home-art .v7-coupon::before{
content:'';position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg,transparent,rgba(26,166,182,.8) 22%,rgba(26,166,182,.8) 78%,transparent);
}
body.home-art .v7-coupon__ic{
box-shadow:0 6px 16px -6px rgba(15,124,138,.95),inset 0 1px 0 rgba(255,255,255,.6);
}
/* ==========================================================================
v11 · 首页改版样式（按 ickey.cn 版图，首页只留 2–3 屏）
作用域 body.home-art，后置覆盖 v7/v7b 旧规则；四栏 Hero 全新布局 + 三个新楼层
① 顶部采购热线条（电信蓝）② 三横幅轮播（pstrip）③ 我们自己的产品分类行
④ 四栏 Hero：分类树 / 大图Banner / 方案·BOM卡 / 登录·福利·新闻·8图标
⑤ 定制方案楼层（sol）⑥ 一站式服务楼层（srv·视频+双图卡）⑦ 特色服务楼层（feat）
========================================================================== */
/* ---------- 顶部信息条：采购热线（保留电话，去除英文版） ---------- */
body.home-art .tb-tel{ display:inline-flex; align-items:center; gap:8px; color:var(--steel-2); font-weight:700; white-space:nowrap; }
body.home-art .tb-tel__ic{ display:inline-flex; color:var(--cyan-2); }
body.home-art .tb-tel__ic svg{ width:15px; height:15px; }
body.home-art .tb-tel b{ font-size:14px; color:var(--steel); letter-spacing:.5px; font-family:var(--mono); white-space:nowrap; }
body.home-art .tb-hot{ font-size:12px; color:var(--text-3); font-weight:600; white-space:nowrap; }
/* 分隔符收进每项内部，窄屏隐藏 .tb-x 时不会留下孤立竖线（v11 header 已处理） */
/* ---------- ② 三横幅轮播（替代原单条促销通栏） ---------- */
body.home-art .pstrip{
position:relative; overflow:hidden; color:#fff;
/* v29（峰哥要求）：本条**不再固定底色** —— 颜色完全由后台上传的图片决定；
未配图时的文字版兜底样式见下方 .pstrip__s--txt */
background:transparent;
}
/* v30（峰哥要求）：条高固定，不再可配。
桌面 52px / ≤760px 窄屏 54px。
图片按固定比例 1920:52（≈36.9:1）出图 → cover 时标准屏 1:1 原尺寸显示，
2 倍图（3840×104，同比例）在 Retina 上正好像素对像素，不会被拉伸变糊。
⚠️ 轨道不再限宽 1540：原来整条靠 .pstrip 的底色满宽，底色去掉后，
上传的图片必须由轨道本身通铺到整屏；文字/叠加层再用 (100% - 1540)/2 的公式回到 1540 网格。 */
body.home-art .pstrip__in{ position:relative; margin:0 auto; height:52px; overflow:hidden; }
body.home-art .pstrip__track{ display:flex; height:100%; transition:transform .6s var(--ease); }
body.home-art .pstrip__s{
position:relative; flex:0 0 100%; height:100%; display:flex; align-items:center; gap:14px;
padding-left:calc((100% - min(100%, var(--maxw))) / 2 + var(--pad-x));
padding-right:calc((100% - min(100%, var(--maxw))) / 2 + var(--pad-x) + 74px);
text-decoration:none; color:#fff; opacity:.4; transition:opacity .45s var(--ease);
}
body.home-art .pstrip__s.is-on{ opacity:1; }
/* 有图：图片铺满整条（cover 裁切居中），文案只作可选叠加 */
body.home-art .pstrip__s--img{ display:block; padding:0; }
body.home-art .pstrip__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
body.home-art .pstrip__ov{
position:absolute; inset:0; display:flex; align-items:center; gap:14px;
padding-left:calc((100% - min(100%, var(--maxw))) / 2 + var(--pad-x));
padding-right:calc((100% - min(100%, var(--maxw))) / 2 + var(--pad-x) + 74px);
background:linear-gradient(90deg,rgba(10,22,38,.60) 0%,rgba(10,22,38,.16) 55%,rgba(10,22,38,0) 78%);
}
/* 无图：文字版兜底（保留原渐变，保证没有配图时可读） */
body.home-art .pstrip__s--txt{ background:linear-gradient(90deg,#16304e 0%,#1b3556 52%,#234a74 100%); }
body.home-art .pstrip__bd{
flex:none; display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 12px; border-radius:999px;
font-size:12.5px; font-weight:700; color:#06222a; white-space:nowrap;
background:linear-gradient(180deg,#7fe0ea,#1aa6b6); box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
body.home-art .pstrip__bd svg{ width:13px; height:13px; }
body.home-art .pstrip__t{ font-size:16px; font-weight:700; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.home-art .pstrip__t em{ font-style:normal; color:#7fe0ea; margin-left:8px; font-weight:600; font-size:13.5px; }
body.home-art .pstrip__pill{
flex:none; font-size:12px; padding:4px 12px; border-radius:999px; white-space:nowrap;
background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#eaf6fa; font-family:var(--mono);
}
body.home-art .pstrip__cta{
margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 16px; border-radius:999px;
font-size:13px; font-weight:700; color:#06222a; background:rgba(255,255,255,.92);
transition:transform .18s var(--ease), filter .18s;
}
body.home-art .pstrip__cta:hover{ transform:translateY(-1px); filter:brightness(1.03); }
body.home-art .pstrip__cta i{ transition:transform .18s var(--ease); }
body.home-art .pstrip__cta:hover i{ transform:translateX(3px); }
/* 指示点：右侧垂直居中，与「查看」按钮同一水平线（原为贴右下角 bottom:6px，视觉会掉出底边） */
body.home-art .pstrip__dots{ position:absolute; right:calc((100% - min(100%, var(--maxw))) / 2 + var(--pad-x)); top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:6px; z-index:3; }
/* v29：指示点加了描边+投影，保证在任何上传图（含浅色底）上都看得见 */
body.home-art .pstrip__dots i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.42); cursor:pointer; transition:background .22s, width .22s; box-shadow:0 0 0 1px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.35); }
body.home-art .pstrip__dots i:hover{ background:rgba(255,255,255,.62); }
body.home-art .pstrip__dots i.is-on{ background:#7fe0ea; width:18px; border-radius:4px; }
/* ---------- ④ 四栏 Hero（分类树 / 大图Banner / 方案·BOM卡 / 登录·福利·新闻·8图标） ---------- */
/* v23：banner 576→666（左右三栏相应收窄），并把 .slide__bg 由「铺满 + cover」改为
「钉右 + 按高度自适应宽度」（见 styles.css）—— 图片不再被裁切，容器宽出的部分落在
左侧空白区、被 .slide__scrim 遮罩吞掉，因此 banner 可以放心加宽。
做法：左右三栏用 clamp() 随视口线性加宽（斜率 .08/.18/.16 合计 .42，
即 1440→1540 之间视口每宽 1px、三栏合计多占 .42px），
视口 ≥1540 时封顶 224/242/302，此时 banner 恒定 666px；视口 1440 时 banner ≈608px。
⚠️ 三栏下限有底线：hcat ≥216（否则 132px 宽的分类树线稿会压到"机械设备"文字）、
side ≥286（否则 .hs-ent 四宫格每格 <62px，"BOM 配单"会折行）。 */
body.home-art .hero{ margin:18px 0 0; }
body.home-art .hero__grid{
display:grid;
grid-template-columns:
clamp(216px, calc(216px + (100vw - 1440px) * 0.08), 224px)
minmax(0, 1fr)
clamp(224px, calc(224px + (100vw - 1440px) * 0.18), 242px)
clamp(286px, calc(286px + (100vw - 1440px) * 0.16), 302px);
gap:14px; align-items:stretch; min-height:438px;
}
/* 中列大图 Banner 收敛（继承 .hero__grid>.banner 旧规则） */
body.home-art .hero__grid>.banner h1{ font-size:32px; }
/* v23：banner 加宽到 666 后，文字栏若仍按 540px 铺满，其右缘会盖到产品图
（banner_solution 的压力桶左缘仅 ≈318px）→ 收到 360px（内容宽 248px，文字墨迹
右缘 ≈304px），配合加强后的 .slide__scrim，四张素材均不再与产品重叠。 */
body.home-art .hero__grid>.banner .banner__txt{ max-width:360px; }
/* v23：文字栏收到 360px（内容宽 248px）后，行业标签若仍按 11.5px/9px 内距会排到 3 行、
显得碎 → 收紧到 11px/7px 后每行可放 3 枚，稳定 2 行。 */
body.home-art .hero__grid>.banner .bt__chip{font-size:11px;padding:3px 7px}
body.home-art .hero__grid>.banner .banner__tags{gap:6px;margin-top:14px}
body.home-art .hero__grid>.banner .banner__cta .btn--lg{ height:42px; padding:0 22px; }
/* —— 右次栏：整线方案咨询 / BOM 批量报价 两张卡 —— */
body.home-art .hero__pro{ display:flex; flex-direction:column; gap:14px; height:100%; }
body.home-art .hp-card{
position:relative; flex:1; overflow:hidden;
display:flex; flex-direction:column; justify-content:center;
padding:18px 16px; border-radius:14px; text-decoration:none;
border:1px solid var(--line-2); box-shadow:0 14px 30px -24px rgba(27,53,86,.5);
transition:transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
body.home-art .hp-card--a{ background:linear-gradient(150deg,#e9f6f7,#d6eef1); }
body.home-art .hp-card--b{ background:linear-gradient(150deg,#eaf0f7,#dde7f2); }
body.home-art .hp-card:hover{ transform:translateY(-2px); box-shadow:0 20px 38px -22px rgba(27,53,86,.55); border-color:var(--steel-3); }
body.home-art .hp-card__k{
align-self:flex-start; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:1.2px;
text-transform:uppercase; color:var(--cyan); background:rgba(15,124,138,.12); padding:3px 9px; border-radius:999px; margin-bottom:10px;
}
body.home-art .hp-card__n{ font-size:21px; font-weight:800; color:var(--steel); line-height:1.28; letter-spacing:.2px; }
body.home-art .hp-card__s{ margin-top:8px; font-size:12px; color:var(--text-2); line-height:1.55; max-width:86%; }
body.home-art .hp-card__cta{
margin-top:12px; align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
font-size:13px; font-weight:700; color:var(--steel); transition:gap .18s var(--ease);
}
body.home-art .hp-card:hover .hp-card__cta{ gap:11px; }
body.home-art .hp-card__art{
position:absolute; right:-12px; bottom:-14px; width:104px; height:104px; opacity:.92;
transition:transform .3s var(--ease); pointer-events:none;
}
body.home-art .hp-card--b .hp-card__art{ right:-8px; }
body.home-art .hp-card:hover .hp-card__art{ transform:translate(-2px,-4px) scale(1.04); }
/* —— 最右栏：登录 + 新人福利 + 公司新闻 + 8 个快捷入口 —— */
body.home-art .hero__side{ display:flex; flex-direction:column; gap:10px; height:100%; }
body.home-art .hs-card{
background:#fff; border:1px solid var(--line-2); border-radius:14px;
box-shadow:0 12px 28px -24px rgba(27,53,86,.5); overflow:hidden;
}
/* 欢迎 / 登录卡 */
body.home-art .hs-welc{ padding:12px 13px; display:flex; flex-direction:column; gap:10px; }
body.home-art .hs-welc__hd{ display:flex; align-items:center; gap:10px; }
body.home-art .hs-welc__av{
width:38px; height:38px; border-radius:50%; flex:none; color:#fff;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,var(--steel),var(--cyan)); box-shadow:0 4px 12px -4px rgba(27,53,86,.5);
}
body.home-art .hs-welc__av svg{ width:20px; height:20px; }
body.home-art .hs-welc__hd b{ font-size:14px; color:var(--text-1); font-weight:700; line-height:1.35; }
body.home-art .hs-welc__btns{ display:flex; gap:8px; }
body.home-art .hs-welc__btns a{
flex:1; height:32px; display:flex; align-items:center; justify-content:center; border-radius:9px;
font-size:13px; font-weight:700; text-decoration:none; transition:all .18s;
}
body.home-art .hs-welc__btns a.p{ background:var(--steel); color:#fff; box-shadow:0 4px 12px -6px rgba(27,53,86,.8); }
body.home-art .hs-welc__btns a.p:hover{ background:var(--steel-2); }
body.home-art .hs-welc__btns a.g{ border:1px solid var(--line-2); color:var(--steel); background:#fff; }
body.home-art .hs-welc__btns a.g:hover{ border-color:var(--steel-3); background:var(--steel-soft); }
/* 新人福利条 */
body.home-art .hs-gift{
display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:11px;
background:linear-gradient(90deg,#eef8fa,#e0f1f4); border:1px solid rgba(26,166,182,.28);
}
body.home-art .hs-gift b{ font-size:12.5px; color:#0f7c8a; flex:none; font-weight:800; }
body.home-art .hs-gift span{ font-size:11.5px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.home-art .hs-gift i{ margin-left:auto; flex:none; color:var(--cyan); font-style:normal; font-weight:700; }
/* 公司新闻 */
body.home-art .hs-news{ padding:11px 13px; display:flex; flex-direction:column; gap:8px; flex:1; }
body.home-art .hs-news__hd{ display:flex; align-items:center; justify-content:space-between; }
body.home-art .hs-news__hd b{ font-size:13.5px; color:var(--steel); font-weight:700; }
body.home-art .hs-news__hd a{ font-size:12px; color:var(--cyan-2); font-weight:600; text-decoration:none; }
body.home-art .hs-news__hd a:hover{ color:var(--cyan); }
body.home-art .hs-news ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; min-width:0; }
body.home-art .hs-news li{ overflow:hidden; }
body.home-art .hs-news li a{
display:block; font-size:12.5px; color:var(--text-2); line-height:1.5;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; transition:color .15s;
}
body.home-art .hs-news li a:hover{ color:var(--cyan); }
/* 8 个快捷入口（4×2） */
body.home-art .hs-ent{
display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
border:1px solid var(--line-2); border-radius:14px; overflow:hidden;
}
body.home-art .hs-ent a{
background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
padding:11px 6px; min-height:62px; font-size:12px; font-weight:600; color:var(--text-2);
text-decoration:none; transition:background .18s, color .18s;
}
body.home-art .hs-ent a svg{ width:20px; height:20px; color:var(--steel-3); transition:color .18s, transform .18s; }
body.home-art .hs-ent a:hover{ background:var(--cyan-soft); color:var(--cyan); }
body.home-art .hs-ent a:hover svg{ color:var(--cyan); transform:translateY(-1px); }
/* ---------- ⑤ ⑥ ⑦ 三个新楼层 ---------- */
body.home-art .hz{ padding:46px 0; }
body.home-art .hz + .hz{ border-top:1px solid var(--line); }
body.home-art .hz--last{ background:linear-gradient(180deg,#f7f9fb,#eef2f7); }
body.home-art .hz__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; }
body.home-art .hz__hd h2{ font-size:24px; font-weight:800; color:var(--steel); letter-spacing:.4px; }
body.home-art .hz__more{
flex:none; display:inline-flex; align-items:center; gap:3px; font-size:13.5px; font-weight:600; color:var(--steel-2);
padding:6px 14px; border:1px solid var(--line-2); border-radius:999px; background:#fff; text-decoration:none;
transition:all .2s;
}
body.home-art .hz__more:hover{ border-color:var(--steel-3); background:var(--surface-2); color:var(--steel); }
body.home-art .hz__more span{ transition:transform .2s; }
body.home-art .hz__more:hover span{ transform:translateX(3px); }
/* ---------- 定制方案（浅色主卡 + 青/钢蓝两色卡，三档递进） ---------- */
body.home-art .sol{ display:grid; grid-template-columns:1.55fr 1fr 1fr; gap:14px; align-items:stretch; }
/* 通用眉标：等宽大写 + 短横线，替代原来只有中文小字的弱层级 */
body.home-art .sol__eb{
display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:1.7px; text-transform:uppercase;
color:var(--cyan); white-space:nowrap;
}
body.home-art .sol__eb::before{
content:''; flex:none; width:16px; height:2px; border-radius:2px;
background:linear-gradient(90deg,var(--cyan),var(--cyan-2));
}
/* —— 卡 1：全流程工程服务（浅色 · 蓝图细网格，承载 5 个能力小卡） —— */
body.home-art .sol__main{
position:relative; overflow:hidden; display:flex; flex-direction:column; gap:18px;
background:linear-gradient(158deg,#ffffff 0%,#f8fbfc 44%,#edf5f7 100%);
border:1px solid var(--line-2); border-radius:16px; padding:22px;
box-shadow:0 14px 34px -28px rgba(27,53,86,.5);
}
body.home-art .sol__main::before{
content:''; position:absolute; left:0; top:0; right:0; height:3px; z-index:2;
background:linear-gradient(90deg,var(--cyan),var(--steel));
}
/* 蓝图网格：右上淡出，避免整张卡发花 */
body.home-art .sol__main::after{
content:''; position:absolute; inset:0; pointer-events:none;
background-image:
linear-gradient(rgba(27,53,86,.042) 1px,transparent 1px),
linear-gradient(90deg,rgba(27,53,86,.042) 1px,transparent 1px);
background-size:28px 28px;
-webkit-mask-image:radial-gradient(118% 92% at 90% 2%,#000 0%,transparent 62%);
mask-image:radial-gradient(118% 92% at 90% 2%,#000 0%,transparent 62%);
}
body.home-art .sol__main>*{ position:relative; z-index:1; }
body.home-art .sol__lead .sol__eb{ margin-bottom:9px; }
body.home-art .sol__lead h3{ font-size:22px; font-weight:800; color:var(--steel); letter-spacing:.5px; line-height:1.24; }
body.home-art .sol__lead p{ margin-top:8px; font-size:13.5px; color:var(--text-2); line-height:1.65; letter-spacing:.2px; }
body.home-art .sol__cta{
display:inline-flex; align-items:center; gap:6px; margin-top:14px; align-self:flex-start; height:36px; padding:0 18px;
font-size:13px; font-weight:700; letter-spacing:.3px; color:#fff; border-radius:999px; text-decoration:none;
background:linear-gradient(135deg,var(--steel),var(--steel-2));
box-shadow:0 12px 22px -14px rgba(27,53,86,.95); transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
body.home-art .sol__cta:hover{ transform:translateY(-2px); box-shadow:0 16px 26px -13px rgba(27,53,86,.95); }
body.home-art .sol__cta span{ transition:transform .18s; }
body.home-art .sol__cta:hover span{ transform:translateX(3px); }
body.home-art .sol__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:auto; }
body.home-art .sol__i{
position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:9px;
padding:15px 6px 14px; border-radius:12px;
background:#fff; border:1px solid rgba(27,53,86,.1);
box-shadow:0 8px 16px -14px rgba(27,53,86,.55);
text-decoration:none; color:var(--text-2); transition:all .22s var(--ease);
}
body.home-art .sol__i::after{
content:''; position:absolute; left:12px; right:12px; bottom:0; height:2px; border-radius:2px;
background:linear-gradient(90deg,var(--cyan),var(--cyan-2));
transform:scaleX(0); transition:transform .26s var(--ease);
}
body.home-art .sol__i:hover{
transform:translateY(-4px); border-color:rgba(15,124,138,.34);
box-shadow:0 16px 28px -18px rgba(15,124,138,.75);
}
body.home-art .sol__i:hover::after{ transform:scaleX(1); }
body.home-art .sol__ic{
width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
background:linear-gradient(160deg,#eef7f9,#dceef2); color:var(--steel);
box-shadow:inset 0 0 0 1px rgba(15,124,138,.16);
transition:background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
body.home-art .sol__ic svg{ width:21px; height:21px; }
body.home-art .sol__i:hover .sol__ic{
background:linear-gradient(150deg,var(--cyan),#0b6470); color:#fff;
box-shadow:0 9px 18px -9px rgba(15,124,138,.95);
}
body.home-art .sol__i b{ font-size:13px; font-weight:700; color:var(--text-1); letter-spacing:.3px; transition:color .22s; }
body.home-art .sol__i:hover b{ color:var(--steel); }
body.home-art .sol__arw{ position:absolute; top:10px; right:12px; color:var(--cyan); opacity:0; transform:translateX(-4px); transition:all .2s; }
body.home-art .sol__i:hover .sol__arw{ opacity:1; transform:translateX(0); }
/* —— 卡 2 / 3：深色方案卡（青 / 钢蓝）——白字 + 右上柔光 + 右下水印线稿 —— */
body.home-art .sol__c{
position:relative; overflow:hidden; display:flex; flex-direction:column; gap:9px; justify-content:center;
padding:24px 22px; border-radius:16px; text-decoration:none; border:1px solid transparent;
transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
body.home-art .sol__c--mod{
background:linear-gradient(150deg,#0a4653 0%,#0f7c8a 56%,#1595a6 100%);
box-shadow:0 18px 36px -26px rgba(10,70,83,.95);
}
body.home-art .sol__c--dev{
background:linear-gradient(150deg,#13263f 0%,#1b3556 52%,#2f5583 100%);
box-shadow:0 18px 36px -26px rgba(19,38,63,.95);
}
body.home-art .sol__c::before{
content:''; position:absolute; right:-46px; top:-56px; width:180px; height:180px; border-radius:50%; pointer-events:none;
background:radial-gradient(circle,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 70%);
}
body.home-art .sol__c--dev::before{ background:radial-gradient(circle,rgba(232,196,143,.32) 0%,rgba(232,196,143,0) 70%); }
body.home-art .sol__c>*{ position:relative; z-index:1; }
body.home-art .sol__c>.sol__wm{ position:absolute; z-index:0; right:-8px; bottom:-14px; width:116px; height:116px; color:#fff; opacity:.15; pointer-events:none; }
body.home-art .sol__c--dev>.sol__wm{ color:#e8c48f; opacity:.2; }
body.home-art .sol__c>.sol__wm svg{ width:100%; height:100%; }
body.home-art .sol__c:hover{ transform:translateY(-4px); }
body.home-art .sol__c--mod:hover{ box-shadow:0 26px 46px -24px rgba(10,70,83,1); }
body.home-art .sol__c--dev:hover{ box-shadow:0 26px 46px -24px rgba(19,38,63,1); }
body.home-art .sol__c h3{ font-size:19px; font-weight:800; color:#fff; letter-spacing:.6px; line-height:1.3; }
body.home-art .sol__c p{ font-size:13px; color:rgba(255,255,255,.76); line-height:1.6; letter-spacing:.2px; }
body.home-art .sol__c .sol__eb{ color:#8ce6ef; }
body.home-art .sol__c .sol__eb::before{ background:linear-gradient(90deg,#8ce6ef,rgba(140,230,239,.25)); }
body.home-art .sol__c--dev .sol__eb{ color:#e8c48f; }
body.home-art .sol__c--dev .sol__eb::before{ background:linear-gradient(90deg,#e8c48f,rgba(232,196,143,.25)); }
body.home-art .sol__pill{
display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin-top:6px;
font-size:12.5px; font-weight:700; letter-spacing:.3px; color:#fff;
padding:6px 14px; border-radius:999px;
background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.34);
transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
body.home-art .sol__c:hover .sol__pill{ background:#fff; color:var(--steel); border-color:transparent; }
body.home-art .sol__pill--warm{ color:#f3ddb8; border-color:rgba(232,196,143,.48); background:rgba(232,196,143,.14); }
body.home-art .sol__c--dev:hover .sol__pill{ background:#e8c48f; color:#3b2a15; border-color:transparent; }
/* 一站式服务（视频 + 双图卡） */
body.home-art .srv{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:14px; }
body.home-art .srv__video{
position:relative; margin:0; border-radius:16px; overflow:hidden; background:#0e1a2b;
border:1px solid var(--line-2); box-shadow:0 14px 34px -24px rgba(27,53,86,.6);
}
body.home-art .srv__video video{ display:block; width:100%; height:100%; min-height:262px; object-fit:cover; background:#0e1a2b; }
body.home-art .srv__chip{
position:absolute; left:0; right:0; bottom:0; padding:26px 16px 12px; font-size:13px; font-weight:600; color:#fff;
background:linear-gradient(0deg,rgba(8,16,28,.86),transparent); pointer-events:none;
}
body.home-art .srv__img{
position:relative; display:block; margin:0; border-radius:16px; overflow:hidden; text-decoration:none;
border:1px solid var(--line-2); box-shadow:0 12px 28px -24px rgba(27,53,86,.5);
transition:transform .2s, box-shadow .2s;
}
body.home-art .srv__img:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -22px rgba(27,53,86,.55); }
body.home-art .srv__img img{ display:block; width:100%; height:200px; object-fit:cover; }
body.home-art .srv__img span{
position:absolute; left:0; right:0; bottom:0; padding:24px 14px 10px; font-size:13.5px; font-weight:700; color:#fff;
background:linear-gradient(0deg,rgba(8,16,28,.8),transparent);
}
/* 特色服务（两张大卡，含 SVG 插画） */
body.home-art .feat{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
body.home-art .feat__c{
display:flex; align-items:center; gap:20px; padding:26px 28px; border-radius:18px; overflow:hidden;
background:#fff; border:1px solid var(--line-2); box-shadow:0 14px 32px -24px rgba(27,53,86,.5);
transition:transform .2s, box-shadow .2s;
}
body.home-art .feat__c:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -22px rgba(27,53,86,.55); }
body.home-art .feat__c--alt{ background:linear-gradient(135deg,#16304e,#1b3556); border-color:transparent; }
body.home-art .feat__tx{ flex:1; min-width:0; }
body.home-art .feat__tx h3{ font-size:20px; font-weight:800; color:var(--steel); letter-spacing:.3px; }
body.home-art .feat__c--alt .feat__tx h3{ color:#fff; }
body.home-art .feat__tx p{ margin-top:10px; font-size:13px; color:var(--text-2); line-height:1.7; }
body.home-art .feat__c--alt .feat__tx p{ color:rgba(255,255,255,.78); }
body.home-art .feat__cta{
display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:13.5px; font-weight:700; color:var(--steel);
text-decoration:none; transition:gap .18s;
}
body.home-art .feat__c--alt .feat__cta{ color:#7fe0ea; }
body.home-art .feat__cta:hover{ gap:11px; }
body.home-art .feat__art{ flex:none; width:150px; height:130px; }
body.home-art .feat__art svg{ width:100%; height:100%; display:block; }
body.home-art .feat__note{ margin-top:18px; font-size:12px; color:var(--text-3); line-height:1.6; }
/* ===================== v11 响应式（覆盖旧三栏 / 领券条 / 全局 hero 高度） ===================== */
@media (max-width:1280px){
/* v24：原 1025~1280 三栏把 banner 挤到 <654px，而产品占素材右 60%，左侧文字（~305px）
必然压到产品（实测 1025 压 240px、1152 压 113px）。该窄带在不重排的前提下无解，
故改为单栏：banner 整行满宽（比旧三栏更“大”），下方 pro/side 并排。
既消除压字，又顺应用户「banner 再大点」的诉求；≤1024 段在此基础上再做细调。 */
body.home-art .hero__grid{ grid-template-columns:1fr; height:auto; min-height:0; gap:14px; }
body.home-art .hcat{ display:none; }
body.home-art .hero__grid>.banner{ min-height:300px; }
body.home-art .hero__pro{ display:grid; grid-template-columns:1fr 1fr; height:auto; }
body.home-art .hero__side{ height:auto; }
}
@media (max-width:1024px){
body.home-art .hero__grid{ grid-template-columns:1fr; height:auto; min-height:0; }
body.home-art .hero__grid>.banner{ min-height:300px; }
body.home-art .hero__pro{ display:grid; grid-template-columns:1fr 1fr; height:auto; }
body.home-art .hero__side{ height:auto; }
body.home-art .hz__hd{ flex-direction:column; align-items:flex-start; gap:8px; }
body.home-art .sol{ grid-template-columns:1fr 1fr; }
body.home-art .sol__main{ grid-column:1 / -1; }
body.home-art .srv{ grid-template-columns:1fr; }
body.home-art .srv__img img{ height:220px; }
body.home-art .feat{ grid-template-columns:1fr; }
}
@media (max-width:760px){
/* v29：窄屏也用后台配的高度（没配才退回 54px） */
body.home-art .pstrip__in{ height:54px; }
body.home-art .pstrip__s{ padding-right:calc(var(--pad-x) + 54px); }
body.home-art .pstrip__t{ font-size:14px; }
body.home-art .pstrip__pill{ display:none; }
body.home-art .sol{ grid-template-columns:1fr; }
body.home-art .sol__grid{ grid-template-columns:repeat(3,1fr); }
body.home-art .feat__c{ flex-direction:column; text-align:center; align-items:center; padding:22px; }
body.home-art .feat__art{ width:120px; height:104px; }
}
@media (max-width:560px){
body.home-art .hero__pro{ grid-template-columns:1fr; }
body.home-art .sol__grid{ grid-template-columns:repeat(2,1fr); }
body.home-art .hs-ent{ grid-template-columns:repeat(2,1fr); }
body.home-art .pstrip__t em{ display:none; }
body.home-art .pstrip__cta{ display:none; }
body.home-art .pstrip__s{ padding-right:calc(var(--pad-x) + 48px); }
}
/* ===================== v-blueprint · 版心小版块：蓝图底纹 + 工程角标 =====================
全部走 background 层（位于内容之下，绝不盖文字/图片）；角标/网格极淡，呼应工程蓝图气质。 */
body.home-art .wrap .gcard,
body.home-art .hcat,
body.home-art .hs-card,
body.home-art .feat__c{
background-image:
linear-gradient(rgba(30,58,95,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(30,58,95,.05) 1px, transparent 1px),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15)),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15)),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15)),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15)),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15)),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15)),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15)),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15));
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 22px 22px, 22px 22px, 12px 1.4px, 1.4px 12px, 12px 1.4px, 1.4px 12px, 12px 1.4px, 1.4px 12px, 12px 1.4px, 1.4px 12px;
background-position: 0 0, 0 0, left 9px top 9px, left 9px top 9px, right 9px top 9px, right 9px top 9px, left 9px bottom 9px, left 9px bottom 9px, right 9px bottom 9px, right 9px bottom 9px;
}
/* 商品图区：在原有聚光渐变上叠蓝图网格 */
body.home-art .gcard__media{
background-image:
linear-gradient(rgba(30,58,95,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(30,58,95,.05) 1px, transparent 1px),
radial-gradient(120% 90% at 50% 16%, rgba(255,255,255,.95), rgba(238,242,247,.3) 55%, rgba(214,222,230,.5) 100%),
linear-gradient(160deg,#f5f8fc,#e9eff5);
background-repeat: repeat, repeat, no-repeat, no-repeat;
background-size: 20px 20px, 20px 20px, 100% 100%, 100% 100%;
background-position: 0 0, 0 0, 0 0, 0 0;
}
/* 右次栏咨询卡（保留原有青/蓝渐变） */
body.home-art .hp-card--a{
background-image:
linear-gradient(rgba(30,58,95,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(30,58,95,.05) 1px, transparent 1px),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(150deg,#e9f6f7,#d6eef1);
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 22px 22px, 22px 22px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 100% 100%;
background-position: 0 0, 0 0, left 9px top 9px, left 9px top 9px, right 9px top 9px, right 9px top 9px, left 9px bottom 9px, left 9px bottom 9px, right 9px bottom 9px, right 9px bottom 9px, 0 0;
}
body.home-art .hp-card--b{
background-image:
linear-gradient(rgba(30,58,95,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(30,58,95,.05) 1px, transparent 1px),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(rgba(27,53,86,.13), rgba(27,53,86,.13)),
linear-gradient(150deg,#eaf0f7,#dde7f2);
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 22px 22px, 22px 22px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 100% 100%;
background-position: 0 0, 0 0, left 9px top 9px, left 9px top 9px, right 9px top 9px, right 9px top 9px, left 9px bottom 9px, left 9px bottom 9px, right 9px bottom 9px, right 9px bottom 9px, 0 0;
}
/* 特色保障深色款：白色网格 + 白角标 */
body.home-art .feat__c--alt{
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
linear-gradient(135deg,#16304e,#1b3556);
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 22px 22px, 22px 22px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 100% 100%;
background-position: 0 0, 0 0, left 10px top 10px, left 10px top 10px, right 10px top 10px, right 10px top 10px, left 10px bottom 10px, left 10px bottom 10px, right 10px bottom 10px, right 10px bottom 10px, 0 0;
}
/* 方案卡 1：保留白→青渐变，仅加工程角标（网格已由 ::after 提供） */
body.home-art .sol__main{
background-image:
linear-gradient(rgba(27,53,86,.16), rgba(27,53,86,.16)),
linear-gradient(rgba(27,53,86,.16), rgba(27,53,86,.16)),
linear-gradient(rgba(27,53,86,.16), rgba(27,53,86,.16)),
linear-gradient(rgba(27,53,86,.16), rgba(27,53,86,.16)),
linear-gradient(rgba(27,53,86,.16), rgba(27,53,86,.16)),
linear-gradient(rgba(27,53,86,.16), rgba(27,53,86,.16)),
linear-gradient(rgba(27,53,86,.16), rgba(27,53,86,.16)),
linear-gradient(rgba(27,53,86,.16), rgba(27,53,86,.16)),
linear-gradient(158deg,#ffffff 0%,#f8fbfc 44%,#edf5f7 100%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 12px 1.4px, 1.4px 12px, 12px 1.4px, 1.4px 12px, 12px 1.4px, 1.4px 12px, 12px 1.4px, 1.4px 12px, 100% 100%;
background-position: left 9px top 9px, left 9px top 9px, right 9px top 9px, right 9px top 9px, left 9px bottom 9px, left 9px bottom 9px, right 9px bottom 9px, right 9px bottom 9px, 0 0;
}
/* 方案卡 2/3（深青 / 钢蓝）：白色角标 */
body.home-art .sol__c--mod{
background-image:
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(150deg,#0a4653 0%,#0f7c8a 56%,#1595a6 100%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 100% 100%;
background-position: left 10px top 10px, left 10px top 10px, right 10px top 10px, right 10px top 10px, left 10px bottom 10px, left 10px bottom 10px, right 10px bottom 10px, right 10px bottom 10px, 0 0;
}
body.home-art .sol__c--dev{
background-image:
linear-gradient(rgba(232,196,143,.24), rgba(232,196,143,.24)),
linear-gradient(rgba(232,196,143,.24), rgba(232,196,143,.24)),
linear-gradient(rgba(232,196,143,.24), rgba(232,196,143,.24)),
linear-gradient(rgba(232,196,143,.24), rgba(232,196,143,.24)),
linear-gradient(rgba(232,196,143,.24), rgba(232,196,143,.24)),
linear-gradient(rgba(232,196,143,.24), rgba(232,196,143,.24)),
linear-gradient(rgba(232,196,143,.24), rgba(232,196,143,.24)),
linear-gradient(rgba(232,196,143,.24), rgba(232,196,143,.24)),
linear-gradient(150deg,#13263f 0%,#1b3556 52%,#2f5583 100%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 100% 100%;
background-position: left 10px top 10px, left 10px top 10px, right 10px top 10px, right 10px top 10px, left 10px bottom 10px, left 10px bottom 10px, right 10px bottom 10px, right 10px bottom 10px, 0 0;
}
/* ===================== v16b 修复：分类树悬浮二级面板被下方「服务承诺条」盖住 ===================== */
/* 根因：styles.css 全局 .wrap{position:relative;z-index:1} —— 每个 .wrap 都是一个独立层叠上下文。
Hero 与「服务承诺条」是两个并列的 .wrap（同为 z-index:1），DOM 靠后的承诺条因此压过整块 Hero，
连 Hero 里 z-index:30 的 .hcat__fly 也一并被盖住（后代 z-index 再高也跨不出祖先的层叠上下文）。
修法：把 Hero 的 .wrap 抬到 5 —— 高于承诺条(1)/楼层(1)/页脚(1)，仍低于 .catnav(40)/.header(55)/.topbar(60)，
于是悬浮面板能浮在承诺条之上，又不会盖住吸顶头部与主导航。 */
body.home-art .hero > .wrap{ z-index:5; }
/* ==========================================================================
v17 · 色调分区（框架零改动）
参照「云汉芯城」：进去第一屏 = 商城风格色调（明亮白底 · 宝蓝主色 · 促销橙红）；
继续往下三个楼层 = 工厂蓝色调（深钢蓝底 · 蓝图网格 · 安全橙分隔线）。
实现：全部在 body.home-art 作用域内追加同名选择器做后置覆盖，
不改任何 DOM 结构 / 栅格 / 尺寸；非首页（category/product/...）完全不受影响。
========================================================================== */
body.home-art{
/* —— 商城色（首屏）—— */
--m-blue:#1a6fe0; /* 商业宝蓝 · 主色 */
--m-blue-2:#0f57b8; /* 深宝蓝 */
--m-blue-3:#2b86f0; /* 亮宝蓝 */
--m-blue-lt:#eaf3ff; /* 浅蓝面 */
--m-navy:#10337c; /* 藏蓝 · 标题 */
--m-orange:#ff6a00; /* 促销橙 */
--m-orange-2:#ef450c; /* 促销红橙 */
--m-orange-lt:#fff3e9;
--m-warm:#fff8f0;
/* 全局强调渐变在首页改为宝蓝（原为青）——首屏按钮/CTA 一并转商城蓝 */
--accent-grad:linear-gradient(135deg,#2b86f0,#0f57b8);
/* —— 工厂色（楼层）—— */
--f-line:rgba(122,176,236,.085); /* 蓝图网格线 */
--f-stroke:rgba(140,190,240,.22); /* 深底描边 */
--f-orange:#ff8a2b; /* 安全橙 */
/* 首屏底：比原先更亮更蓝（商城通透感）；下方楼层自带不透明深蓝底，不受此影响 */
background:linear-gradient(180deg,#f6faff 0%,#ebf3fd 46%,#e0eaf8 100%);
}
/* ---------- ① 公告栏：白底 + 宝蓝点缀 + 促销橙「免费注册」 ---------- */
body.home-art .topbar{
background:linear-gradient(180deg,#ffffff,#f5f9ff);
border-bottom:1px solid #e2ecfa;
box-shadow:0 1px 4px rgba(26,111,224,.06);
}
body.home-art .topbar__l{ color:var(--m-navy); }
body.home-art .topbar__l .mem-chip b{ color:var(--m-navy); }
body.home-art .tb-tel b{ color:var(--m-blue-2); }
body.home-art .topbar__l .mem-lv{ color:var(--m-blue); }
body.home-art .topbar__l a:hover,
body.home-art .topbar__r .tb-i a:hover,
body.home-art .topbar__r .tb-login:hover,
body.home-art .tb-news__it:hover,
body.home-art .tb-news__more{ color:var(--m-blue); }
body.home-art .topbar__r .tb-login{ color:var(--m-navy); }
body.home-art .tb-news__lb{
background:var(--m-blue-lt); color:var(--m-blue-2);
border-color:rgba(26,111,224,.20);
}
body.home-art .tb-news__lb svg{ color:var(--m-blue); }
body.home-art .topbar__r .tb-reg{
background:linear-gradient(135deg,#ff9c4d,#ef450c);
box-shadow:0 3px 10px -4px rgba(239,69,12,.75);
}
/* ---------- ② 三横幅促销条：亮宝蓝渐变 + 右侧暖橙光晕 + 金标 ----------
v29（峰哥要求「不要固定这个地方的颜色」）：这层底色**只给未配图的文字版**，
配了后台上传图的横幅颜色完全由图片决定，本条整体不再固定底色。 */
body.home-art .pstrip__s--txt{
background-image:
radial-gradient(58% 240% at 100% 50%, rgba(255,138,43,.40), rgba(255,138,43,0) 62%),
linear-gradient(95deg,#0a3f9c 0%,#1567d4 48%,#2e8ef2 100%);
}
body.home-art .pstrip__bd{
color:#5a2400;
background:linear-gradient(180deg,#ffdf9d,#ffab2e);
box-shadow:inset 0 1px 0 rgba(255,255,255,.62), 0 2px 8px -3px rgba(0,0,0,.35);
}
body.home-art .pstrip__t em{ color:#ffd9a3; }
body.home-art .pstrip__pill{
background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); color:#f2f8ff;
}
body.home-art .pstrip__cta{
color:#8a3200;
background:linear-gradient(180deg,#ffffff,#ffe9cf);
}
body.home-art .pstrip__cta:hover{ transform:translateY(-1px); filter:brightness(1.04); }
body.home-art .pstrip__dots i.is-on{ background:#ffc46b; }
/* ---------- ③ 头部：更亮的白 + 宝蓝 logo / 搜索键 + 橙色角标 ---------- */
body.home-art .header{
background:rgba(255,255,255,.97);
border-bottom-color:#dfe9f7;
box-shadow:0 1px 0 rgba(255,255,255,.75) inset, 0 8px 22px -16px rgba(26,111,224,.42);
}
/* v-20260928d：LOGO 图标直接用官方金色徽标原图，去掉首页历史遗留的「宝蓝底框」
（styles.css 尾部「官方 LOGO 接入」层已把 .logo__mark 置为透明底，此处不再回加蓝底，与内页一致） */
body.home-art .logo__mark{
background:none;
border-color:transparent;
box-shadow:none;
}
/* v-20260928d：仅作用于首页「顶部 header」的品牌字（徽标金 + 雅黑加宽）。
⚠️ 必须限定 .header：首页页脚同为深色底，若写成 body.home-art .logo__txt，
会与 .footer__brand 规则特异性打平(0,2,1)且本文件靠后加载 → 把页脚品牌字一并染金、
副标题染成深灰（深底低对比）。限定 .header 后页脚自然回落到 .footer__brand 的浅色。 */
body.home-art .header .logo__txt strong{ color:#c09860; }
body.home-art .header .logo__txt strong span{ color:#c09860; }
body.home-art .allcat__btn:hover{
border-color:var(--m-blue); color:var(--m-blue); background:var(--m-blue-lt);
}
body.home-art .search{ border-color:#dbe7f7; }
body.home-art .search:focus-within{
border-color:var(--m-blue); box-shadow:0 0 0 3px rgba(26,111,224,.13);
}
body.home-art .search button{
background:linear-gradient(180deg,#2b86f0,#0f57b8);
box-shadow:0 5px 14px -7px rgba(26,111,224,.9);
}
body.home-art .search button:hover{ background:linear-gradient(180deg,#3d95ff,#1461c8); }
body.home-art .search .hot span:hover{ color:var(--m-blue); }
body.home-art .hd__fb:hover,
body.home-art .hd__icon:hover,
body.home-art .cartbtn:hover{
border-color:var(--m-blue); color:var(--m-blue); background:var(--m-blue-lt);
}
body.home-art .cartbtn .badge,
body.home-art .hd__icon .badge{ background:linear-gradient(145deg,#ff9c4d,#ef450c); }
/* ---------- ④ 主导航：白底 + 蓝→橙滑动下划线 ---------- */
body.home-art .catnav{
background:#fff;
border-bottom-color:#e2ecfa;
box-shadow:0 2px 12px -8px rgba(26,111,224,.35);
}
body.home-art .catnav a:hover,
body.home-art .catnav a:focus-visible{ color:var(--m-blue-2); }
body.home-art .catnav a.is-active{ color:var(--m-navy); }
body.home-art .catnav a::before{ background:var(--m-blue); }
body.home-art .catnav__ink{
background:linear-gradient(90deg,#2b86f0,#1a6fe0 46%,#ff8a3d);
box-shadow:0 0 10px rgba(26,111,224,.5);
}
/* ---------- ⑤ Hero · 左：分类树（宝蓝头 + 蓝色 hover） ---------- */
body.home-art .hcat{ border-color:#e3ecfa; }
body.home-art .hcat__hd{
background:linear-gradient(120deg,#0d4fa8 0%,#1a6fe0 52%,#3f95f0 100%);
box-shadow:inset 0 -1px 0 rgba(255,255,255,.14);
}
body.home-art .hcat__hd svg{ color:#cfe6ff; }
body.home-art .hcat__i>a::before{ background:var(--m-blue); }
body.home-art .hcat__i:hover>a{ background:var(--m-blue-lt); color:var(--m-blue-2); }
body.home-art .hcat__i>a i.dot{ background:linear-gradient(135deg,#8fc0fa,#1a6fe0); opacity:.42; }
body.home-art .hcat__i:hover>a i.dot{
background:linear-gradient(135deg,var(--m-blue-3),var(--m-blue-2));
}
body.home-art .hcat__i:hover>a .arw{ color:var(--m-blue); }
body.home-art .hcat__fly h5{ color:var(--m-navy); }
body.home-art .hcat__fly .subs a:hover{
background:var(--m-blue-lt); color:var(--m-blue-2);
box-shadow:inset 2px 0 0 0 var(--m-blue);
}
body.home-art .hcat__fly .all{ color:var(--m-blue); }
/* ---------- ⑤ Hero · 中：Banner 主按钮转宝蓝 ---------- */
body.home-art .banner{ border-color:#dfe9f7; }
body.home-art .slide .banner__cta .btn--primary{
background:linear-gradient(135deg,#2b86f0,#0f57b8);
box-shadow:0 12px 26px -12px rgba(26,111,224,.85);
}
body.home-art .slide .banner__cta .btn--ghost{
border-color:rgba(26,111,224,.42); color:var(--m-blue-2); background:rgba(255,255,255,.72);
}
/* ---------- ⑤ Hero · 右次栏：A 卡宝蓝 / B 卡暖橙（网格与角标同步转蓝） ---------- */
body.home-art .hp-card__k{ color:var(--m-blue-2); }
body.home-art .hp-card__n{ color:var(--m-navy); }
body.home-art .hp-card__cta{ color:var(--m-blue-2); }
body.home-art .hp-card--a{
background-image:
linear-gradient(rgba(26,111,224,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(26,111,224,.06) 1px, transparent 1px),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(150deg,#f2f8ff,#dbe9fd);
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 22px 22px, 22px 22px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 100% 100%;
background-position: 0 0, 0 0, left 9px top 9px, left 9px top 9px, right 9px top 9px, right 9px top 9px, left 9px bottom 9px, left 9px bottom 9px, right 9px bottom 9px, right 9px bottom 9px, 0 0;
}
body.home-art .hp-card--b{
background-image:
linear-gradient(rgba(255,106,0,.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,106,0,.07) 1px, transparent 1px),
linear-gradient(rgba(255,106,0,.20), rgba(255,106,0,.20)),
linear-gradient(rgba(255,106,0,.20), rgba(255,106,0,.20)),
linear-gradient(rgba(255,106,0,.20), rgba(255,106,0,.20)),
linear-gradient(rgba(255,106,0,.20), rgba(255,106,0,.20)),
linear-gradient(rgba(255,106,0,.20), rgba(255,106,0,.20)),
linear-gradient(rgba(255,106,0,.20), rgba(255,106,0,.20)),
linear-gradient(rgba(255,106,0,.20), rgba(255,106,0,.20)),
linear-gradient(rgba(255,106,0,.20), rgba(255,106,0,.20)),
linear-gradient(150deg,#fff8f0,#ffe4c9);
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 22px 22px, 22px 22px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 100% 100%;
background-position: 0 0, 0 0, left 9px top 9px, left 9px top 9px, right 9px top 9px, right 9px top 9px, left 9px bottom 9px, left 9px bottom 9px, right 9px bottom 9px, right 9px bottom 9px, 0 0;
}
body.home-art .hp-card--b .hp-card__k{ color:#c25505; }
body.home-art .hp-card--b .hp-card__cta{ color:#c25505; }
body.home-art .hp-card--b .hp-card__n{ color:#7a3208; }
body.home-art .hp-card--b .hp-card__s{ color:#6d5b4a; }
/* ---------- ⑤ Hero · 最右：欢迎 / 新人福利 / 新闻 / 8 图标 ---------- */
body.home-art .hs-welc__av{ background:linear-gradient(145deg,#2b86f0,#0f57b8); color:#fff; }
body.home-art .hs-welc__hd b{ color:var(--m-navy); }
body.home-art .hs-welc__btns a.p{
background:linear-gradient(180deg,#2b86f0,#0f57b8);
box-shadow:0 4px 12px -6px rgba(26,111,224,.85);
}
body.home-art .hs-welc__btns a.p:hover{ background:linear-gradient(180deg,#3d95ff,#1461c8); }
body.home-art .hs-welc__btns a.g{ border-color:#cfe2fa; color:var(--m-blue-2); }
body.home-art .hs-welc__btns a.g:hover{ border-color:var(--m-blue); background:var(--m-blue-lt); }
/* 新人福利：青底 → 促销暖橙底 */
body.home-art .hs-gift{
background-image:linear-gradient(90deg,#fff4e6,#ffe7cd);
border-color:rgba(255,106,0,.32);
}
body.home-art .hs-gift b{ color:#e05a00; }
body.home-art .hs-gift i{ color:var(--m-orange); }
body.home-art .hs-news__hd b{ color:var(--m-navy); }
body.home-art .hs-news__hd a,
body.home-art .hs-news li a:hover{ color:var(--m-blue); }
body.home-art .hs-ent a svg{ color:var(--m-blue-2); }
body.home-art .hs-ent a:hover{ background:var(--m-blue-lt); color:var(--m-blue-2); }
body.home-art .hs-ent a:hover svg{ color:var(--m-blue); }
/* ---------- ⑥ 服务承诺条：白底 + 蓝→橙顶线 + 首项促销橙 ---------- */
body.home-art .promise{ background-image:linear-gradient(180deg,#ffffff,#f8fbff); }
body.home-art .promise::before{ background-image:linear-gradient(90deg,#1a6fe0,#2b86f0 42%,#ff8a3d); }
body.home-art .promise__badge{
background:rgba(26,111,224,.09); color:var(--m-blue-2);
box-shadow:inset 0 0 0 1px rgba(26,111,224,.14);
}
body.home-art .promise__i:first-child .promise__badge{
background:linear-gradient(135deg,#ff9143,#ef450c); color:#fff; box-shadow:none;
}
body.home-art .promise__i:hover{ background:rgba(26,111,224,.05); }
body.home-art .promise__txt strong{ color:var(--m-navy); }
/* ==========================================================================
⑦ 楼层（定制方案 / 一站式服务 / 特色服务）→ 工厂蓝色调
深钢蓝底 + 蓝图网格 + 首层安全橙分隔线；白卡在深底上作「工程图」对比。
========================================================================== */
body.home-art .hz{
border-top:1px solid rgba(255,138,43,.26);
background-image:
linear-gradient(var(--f-line) 1px, transparent 1px),
linear-gradient(90deg, var(--f-line) 1px, transparent 1px),
radial-gradient(140% 130% at 84% -6%, rgba(46,142,242,.20), rgba(46,142,242,0) 58%),
linear-gradient(180deg,#0f2238 0%,#132c48 56%,#0c1b2c 100%);
background-size:46px 46px, 46px 46px, 100% 100%, 100% 100%;
background-repeat:repeat, repeat, no-repeat, no-repeat;
background-position:0 0, 0 0, 0 0, 0 0;
}
body.home-art .hz + .hz{ border-top-color:rgba(122,176,236,.16); }
body.home-art .hz--last{
background-image:
linear-gradient(var(--f-line) 1px, transparent 1px),
linear-gradient(90deg, var(--f-line) 1px, transparent 1px),
radial-gradient(120% 130% at 14% 106%, rgba(46,142,242,.16), rgba(46,142,242,0) 58%),
linear-gradient(180deg,#0a1726 0%,#0f2338 58%,#07121e 100%);
background-size:46px 46px, 46px 46px, 100% 100%, 100% 100%;
background-repeat:repeat, repeat, no-repeat, no-repeat;
background-position:0 0, 0 0, 0 0, 0 0;
}
body.home-art .hz__hd{ align-items:flex-end; }
body.home-art .hz__hd h2{ color:#eef5fd; }
/* 楼层标题上方的等宽英文小标（内容优化：对齐参考站「分区标题」气质） */
body.home-art .hz__hd h2::before{
display:block; font-family:var(--mono);
font-size:10.5px; font-weight:600; letter-spacing:2.6px; line-height:1;
color:rgba(150,196,244,.74); margin-bottom:7px;
}
body.home-art .hz:has(.sol) .hz__hd h2::before{ content:'ENGINEERING SOLUTION'; }
body.home-art .hz:has(.srv) .hz__hd h2::before{ content:'ONE-STOP SUPPLY SERVICE'; }
body.home-art .hz:has(.feat) .hz__hd h2::before{ content:'SERVICE & GUARANTEE'; }
body.home-art .hz__more{
color:#c7dcf3; border-color:rgba(150,196,244,.30); background:rgba(255,255,255,.05);
}
body.home-art .hz__more:hover{
border-color:#7cb6f5; color:#fff; background:rgba(122,176,236,.16);
}
/* —— 楼层 1：全流程工程服务（白卡 + 宝蓝顶线/角标） —— */
body.home-art .sol__main{
border-color:var(--f-stroke);
box-shadow:0 16px 40px -28px rgba(0,0,0,.7);
background-image:
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(rgba(26,111,224,.16), rgba(26,111,224,.16)),
linear-gradient(158deg,#ffffff 0%,#f7fbff 44%,#e9f2fd 100%);
background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size:12px 1.4px, 1.4px 12px, 12px 1.4px, 1.4px 12px, 12px 1.4px, 1.4px 12px, 12px 1.4px, 1.4px 12px, 100% 100%;
background-position:left 9px top 9px, left 9px top 9px, right 9px top 9px, right 9px top 9px, left 9px bottom 9px, left 9px bottom 9px, right 9px bottom 9px, right 9px bottom 9px, 0 0;
}
body.home-art .sol__main::before{ background-image:linear-gradient(90deg,#1a6fe0,#2b86f0 56%,#ff8a3d); }
body.home-art .sol__main::after{
background-image:
linear-gradient(rgba(26,111,224,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(26,111,224,.055) 1px,transparent 1px);
}
body.home-art .sol__lead h3{ color:var(--m-navy); }
body.home-art .sol__lead .sol__eb{ color:var(--m-blue-2); }
body.home-art .sol__lead .sol__eb::before{ background:linear-gradient(90deg,var(--m-blue),rgba(26,111,224,.2)); }
body.home-art .sol__cta{
background:linear-gradient(135deg,#2b86f0,#0f57b8);
box-shadow:0 12px 22px -14px rgba(26,111,224,.95);
}
body.home-art .sol__cta:hover{ box-shadow:0 16px 26px -13px rgba(26,111,224,.9); }
body.home-art .sol__i{ background:#f8fbff; border-color:#dce8f8; }
body.home-art .sol__i b{ color:#1d2c40; }
body.home-art .sol__ic{ background:var(--m-blue-lt); color:var(--m-blue-2); }
body.home-art .sol__i::after{ background:linear-gradient(90deg,#2b86f0,#ff8a3d); }
body.home-art .sol__i:hover{
border-color:rgba(26,111,224,.42);
box-shadow:0 16px 28px -18px rgba(26,111,224,.8);
}
body.home-art .sol__i:hover b{ color:var(--m-blue-2); }
body.home-art .sol__arw{ color:var(--m-blue); }
/* —— 楼层 1：两张方案卡（青/钢蓝 → 工厂蓝双档） —— */
body.home-art .sol__c{ border:1px solid var(--f-stroke); }
body.home-art .sol__c--mod{
background-image:
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
linear-gradient(150deg,#11395f 0%,#1b6099 56%,#2b83c6 100%);
background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size:11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 100% 100%;
background-position:left 10px top 10px, left 10px top 10px, right 10px top 10px, right 10px top 10px, left 10px bottom 10px, left 10px bottom 10px, right 10px bottom 10px, right 10px bottom 10px, 0 0;
}
body.home-art .sol__c--dev{
background-image:
linear-gradient(rgba(255,138,43,.28), rgba(255,138,43,.28)),
linear-gradient(rgba(255,138,43,.28), rgba(255,138,43,.28)),
linear-gradient(rgba(255,138,43,.28), rgba(255,138,43,.28)),
linear-gradient(rgba(255,138,43,.28), rgba(255,138,43,.28)),
linear-gradient(rgba(255,138,43,.28), rgba(255,138,43,.28)),
linear-gradient(rgba(255,138,43,.28), rgba(255,138,43,.28)),
linear-gradient(rgba(255,138,43,.28), rgba(255,138,43,.28)),
linear-gradient(rgba(255,138,43,.28), rgba(255,138,43,.28)),
linear-gradient(150deg,#0d2740 0%,#164066 52%,#1f5b8c 100%);
background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size:11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 100% 100%;
background-position:left 10px top 10px, left 10px top 10px, right 10px top 10px, right 10px top 10px, left 10px bottom 10px, left 10px bottom 10px, right 10px bottom 10px, right 10px bottom 10px, 0 0;
}
body.home-art .sol__c p{ color:rgba(226,240,255,.78); }
body.home-art .sol__c--mod .sol__eb{ color:#9ed4ff; }
body.home-art .sol__c--mod .sol__eb::before{ background:linear-gradient(90deg,#9ed4ff,rgba(158,212,255,.25)); }
body.home-art .sol__c--mod:hover{ box-shadow:0 26px 46px -24px rgba(0,0,0,.9); }
body.home-art .sol__c--dev:hover{ box-shadow:0 26px 46px -24px rgba(0,0,0,.9); }
/* —— 楼层 2：一站式供应服务（视频/图卡融入深蓝底） —— */
body.home-art .srv__video,
body.home-art .srv__img{
border-color:var(--f-stroke);
box-shadow:0 16px 40px -26px rgba(0,0,0,.8);
}
body.home-art .srv__img:hover{
border-color:rgba(150,196,244,.46);
box-shadow:0 22px 44px -24px rgba(0,0,0,.9);
}
/* —— 楼层 3：特色服务（白卡作工程图对比；alt 卡工厂深蓝 + 安全橙角标） —— */
body.home-art .feat__c{
border-color:var(--f-stroke);
box-shadow:0 16px 40px -26px rgba(0,0,0,.72);
}
body.home-art .feat__cta{ color:var(--m-blue-2); }
body.home-art .feat__c--alt{
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(rgba(255,138,43,.34), rgba(255,138,43,.34)),
linear-gradient(rgba(255,138,43,.34), rgba(255,138,43,.34)),
linear-gradient(rgba(255,138,43,.34), rgba(255,138,43,.34)),
linear-gradient(rgba(255,138,43,.34), rgba(255,138,43,.34)),
linear-gradient(rgba(255,138,43,.34), rgba(255,138,43,.34)),
linear-gradient(rgba(255,138,43,.34), rgba(255,138,43,.34)),
linear-gradient(rgba(255,138,43,.34), rgba(255,138,43,.34)),
linear-gradient(rgba(255,138,43,.34), rgba(255,138,43,.34)),
linear-gradient(135deg,#0b2136,#14395c);
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 22px 22px, 22px 22px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 11px 1.3px, 1.3px 11px, 100% 100%;
background-position: 0 0, 0 0, left 10px top 10px, left 10px top 10px, right 10px top 10px, right 10px top 10px, left 10px bottom 10px, left 10px bottom 10px, right 10px bottom 10px, right 10px bottom 10px, 0 0;
border-color:rgba(255,138,43,.28);
}
body.home-art .feat__c--alt .feat__cta{ color:#ffc078; }
body.home-art .feat__note{ color:rgba(178,206,236,.62); }
/* —— 页脚：与工厂蓝楼层衔接（原钢蓝 → 工厂深蓝 + 安全橙顶线） —— */
body.home-art .footer{
background:linear-gradient(180deg,#0b1a2b,#0f2438 62%,#0a1626);
border-top-color:rgba(255,138,43,.5);
}
/* ==========================================================================
v18 · 首屏细节修复与优化（对齐云汉芯城 ickey.cn 参考站）
========================================================================== */
/* —— 修复①：Hero 四列溢出定高容器，向下压住「服务承诺条」——
styles.css 的 .hero__grid{height:340px} 与 home.css 的 min-height:438px
是「两个不同属性」，合成后的确定高度 = 438px；而网格行轨实测 461.36px
（由四列内容真实撑开）→ 溢出 23px，承诺条顶边被 hero 内容侵入 9px。
实测证据（playwright 命中测试）：promise 顶边 y=709~717 这段，
x=300/700/1100/1400 命中的分别是 .hcat__list / .slide__scrim /
.hp-card--b / 一个 ，直到 y=721 才命中 .promise__i。
改 height:auto 让容器跟随行轨高度即可；≤1280 / ≤1024 的媒体查询里本来
就写了 height:auto，这里只是把桌面档补齐，不改任何内部栅格与尺寸。 */
body.home-art .hero__grid{ height:auto; }
/* —— 修复②：承诺条与 Hero 的间距（原 14px，视觉上被溢出内容吃掉） —— */
body.home-art .promise{ margin-top:16px; }
/* —— 细节优化：承诺条向参考站「浅底 · 细线分栏 · 安静」的手感收一收 —— */
body.home-art .promise{
padding:0 4px;
box-shadow:0 14px 34px -30px rgba(16,51,124,.45);
}
body.home-art .promise__i{ border-right-color:rgba(26,111,224,.10); }
body.home-art .promise__i:first-child{ border-radius:11px 0 0 11px; }
body.home-art .promise__i:last-child{ border-radius:0 11px 11px 0; }
body.home-art .promise__badge{ border-radius:11px; }
body.home-art .promise__txt strong{ letter-spacing:0; }
body.home-art .promise__txt em{ letter-spacing:.1px; }
/* —— 细节优化：首屏四栏卡片描边/圆角/阴影统一，避免各卡「各写各的」 —— */
body.home-art .hcat,
body.home-art .banner,
body.home-art .hp-card,
body.home-art .hs-card{ border-radius:14px; }
body.home-art .hp-card,
body.home-art .hs-card{ box-shadow:0 12px 30px -26px rgba(16,51,124,.55); }
/* —— v18 补正：v7 遗留的固定券包条让位规则 ——
home.css:910 `@media (min-width:901px){ body.home-art{padding-bottom:64px} }`
是针对早已下线的 v7 券包条写的，与 styles.css 的 body.has-newbar(78px) 特异性同分
但文件更后 → 把新的 78px 压成 64px，导致新底栏盖住页脚最后 14px。
用 body.home-art.has-newbar (0,2,1) 补正。 */
@media (min-width:901px){
body.home-art.has-newbar{ padding-bottom:78px }
}
/* ===================== v19b · 首屏两侧板块：线性设备底纹 =====================
需求：左「全部产品分类」面板（.hcat）与右栏白卡（.hs-card）的**背景**里，
加一些线性设备线稿，且要淡。
做法：沿用本项目既有纪律 —— 走 background-image 多图层（背景层天然位于内容之下，
绝不压字），把设备线稿作为**最上层背景**叠在 v-blueprint 的「蓝图网格 + 四角角标」之上。
⚠️ 这里的规则与 home.css:1454 的 v-blueprint 同选择器同特异性、但文件更后 → 会整段覆盖它的
background-image。故必须把原 10 层（2 网格 + 8 角标）原样重列，只在其前插入线稿层。
素材 assets/equip-panel.svg（viewBox 240×720 窄高线稿，与页边 equip-line.svg 分开，
专为首屏两侧窄栏/矮卡设计）。
取景：靠 background-size / background-position 决定「看哪一段、多大」：
· .hcat → 150px 宽，整条产线（高 ~460 面板刚好容下 150×387 全图，上下留白居中）
· 右栏两张白卡 → 190px 宽（放大后描边更粗、更易辨识），并拼成一条贯通连续产线（见下）
注意：.hs-ent（8 宫格图标）每个格子背景是不透明白，叠底纹会被完全盖住，故不加（保持干净）。
—— v19c 修订（用户反馈「这个背景不好看」）——
根因：面板只有 224px 宽，列表是「文字(15~83px) + 右侧箭头(~205px)」满铺，
线稿 150px 宽、右出框 6px，整幅压上去正好横跨文字尾与箭头 → 跟内容抢视线，
看着脏，且右侧像被硬切一刀。
修法：① 尺度：整幅线稿缩到 132px 宽（等比后高 341px），内缩 8px 居中 →
构图正好落在「文字尾(≈83px)」与「箭头(≈205px)」之间的空白带里，
既不压字、也不出框被切，整条产线完整可读；
② 墨色：主结构 .15 / 标注 .09 / 中心线 .05（原 .2 / .12 / .09）。
实测（左栏特写 vs「无线稿」基线）：最大像素差 61/255（原版 91/255）、
>10 的像素 2.8%（原版 3.8%）、均值 0.81（原版 1.31）→ 约降 4 成，
水印级存在感，不抢视线。
右栏白卡（.hs-card，300×156 / 300×150）**不再叠线稿**：卡片太矮，而素材是 1:2.58
竖长比例，怎么放大都只能露出「被裁掉的一小段弧线」——那正是用户圈出来不好看的地方。
故退回 v-blueprint 的「蓝图网格 + 四角角标」（home.css:1454），保持干净。
⚠️ 素材是 SVG（XML）：**注释里绝不能出现 `--`（双连字符）**，否则整张图在浏览器里
彻底不渲染（本轮就踩了：注释里写了条 `-----` 分隔线 → 线稿静默消失，排查很久）。
长分隔线请用 `=====` / `~~~~~`。可用 minidom.parseString() 或
`grep -P ').)*--(?:(?!-->).)*-->'` 体检。 */
/* —— v25 重绘（用户：「美化这个背景。采用点胶阀设备外观。用纯黑的线条来画。画的高级精美。稍微淡一点。」）——
三张要点，素材本体见 assets/equip-*.svg，生成脚本 _mk_equip.py（改几何只需改脚本再跑）：
① 解剖正确：三型不再都是「圆角方框 + 锥形」——
阀一 精密计量阀 = 竖筒身形（滚花旋钮/锁紧螺母/气缸体/过渡环/两道卡簧槽/底部法兰/针形喷嘴）
阀二 双液阀 = 宽箱身形（A B 双进料口 Y 形汇入混合腔 + 静态混合芯 + 两片式阀体中分面 + 法兰螺栓）
阀三 回吸阀 = 方箱身形（顶部回吸缸活塞环 + 两侧真空口/出料口）
末接输送台（托辊 + 待点胶工件），阀三针嘴正对工件，收束构图。
② 把「线框图」抬成「技术插画」的三笔：主轮廓内侧偏移 3~4 单位再走一圈（双轮廓/壁厚）／
侧向接口一律「凸台 + 六角接头(带倒角线) + 带卡环软管」三段式／机加工特征（滚花、卡簧槽、
中分面、法兰螺栓、活塞环、托辊）。
③ 墨色按「稍微淡一点」由 .13/.08/.05 降到 **.11/.065/.04**；viewBox 由 240×620 改为 **240×720**
（面板实高 574px，线稿由 341px 拉到 396px，上下各留 89px，不再浮在中间一大片空白里）。
⚠️ 规则本身（132px 宽 + right 13px center + 11 层背景重列）未动，只换了素材。 */
body.home-art .hcat{
background-image:
url(assets/equip-panel.svg?v=20260923q),
linear-gradient(rgba(30,58,95,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(30,58,95,.05) 1px, transparent 1px),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15)),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15)),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15)),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15)),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15)),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15)),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15)),
linear-gradient(rgba(27,53,86,.15), rgba(27,53,86,.15));
background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 132px auto, 22px 22px, 22px 22px, 12px 1.4px, 1.4px 12px, 12px 1.4px, 1.4px 12px, 12px 1.4px, 1.4px 12px, 12px 1.4px, 1.4px 12px;
background-position: right 13px center, 0 0, 0 0, left 9px top 9px, left 9px top 9px, right 9px top 9px, right 9px top 9px, left 9px bottom 9px, left 9px bottom 9px, right 9px bottom 9px, right 9px bottom 9px;
}
/* ==========================================================================
v24 · Banner 图再加大（用户：「能否再继续扩大一下 banner 图」）
==========================================================================
【为什么 v23 之后图看着还是小】
v23 只把 banner *容器* 由 576 加宽到 666px，但 .slide__bg 是「钉右 + 按高度
自适应宽度」→ 图片渲染尺寸**只由高度驱动**（宽 = 高 × 1.25，素材 1200×960）。
实测：banner 666×461，图片只渲染 574×459 —— 右侧贴边、左侧 92px 是空遮罩，
**产品本体一点没变大**。这才是"再大点"的真实诉求。
【做法】三管齐下，让"容器宽 / 图高 / 文案宽"三者比例自洽：
① 容器 666 → 718px：三栏再压（hcat 216 = 线稿压字底线；hero__pro 242→220；
hero__side 286 = 「BOM 配单」不折行底线），gap 14→12。
② 行高 461 → clamp(520px,54vh,570px)：图片宽随之 650~712px（+13%~+24%），
1080 高的屏上 570 档恰好 712≈718 → 几乎零死区、零裁切。
③ 文案栏 360px 定宽 → **38% 百分比**：因为"图片放大 → 产品整体左移"，
定宽文案在窄档必然压到产品（v23 在 1440/1600 就已压 45px，此前只在 1920 验证故漏掉）。
产品左缘 ≈ W - 0.756×h（W=banner 宽）→ 38% 文案在 1281~2560 全区间都留得住 16px 以上间距。
【硬约束（下次再加大前先看这里）】
· 首屏：hero_top(257) + h + 16 + 承诺条(76) ≤ 视口高；54vh 在 ≥776 高的屏上恒成立。
· 不切产品：W ≥ 0.756×h（banner_solution 的压力桶占素材宽 39.4%，最靠左）。
· hcat ≥216、side ≥286 是全站底线，不可再压。
⚠️ 只在 ≥1281 生效：≤1280 是 3 栏布局、≤1024 单列（banner 满宽），语义不同，
维持原参数，改动会波及其它档位。 */
@media (min-width:1281px){
body.home-art .hero__grid{
grid-template-columns:216px minmax(0,1fr) 220px 286px;
gap:12px; min-height:0;
}
/* 行高交给「宽高比」自己算：h = 列宽 / 1.25 = 图片高 → 图片宽恰好 = 列宽，
即任何视口都「刚好铺满、零裁切、零死区」，同时产品左缘与文案墨迹的间距恒定
≈ (0.394-0.39)×W + 32 ≈ 35px，不再随视口漂移。 */
body.home-art .hero__grid>.banner{ aspect-ratio:1.25; }
body.home-art .hero__grid>.banner .banner__txt{ max-width:39%; padding:0 32px; }
body.home-art .hero__grid>.banner h1{ font-size:clamp(23px,1.9vw,31px); }
}