/* 首页（对齐 arbor-technology.com 的尺寸体系）：宽容器、16px 正文、40px 常规字重标题、大留白 */
* { box-sizing: border-box; }
body { margin: 0; background: #fff; }
.yk { font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; color: #2C2C2C; font-size: 16px; line-height: 1.6; }
.yk a { color: inherit; text-decoration: none; }
#yk-header { display: block; min-height: 110px; }
.h4-wrap { max-width: 1630px; margin: 0 auto; padding: 0 15px; }

/* ---------- 图片槽位 ---------- */
.slot { position: relative; display: block; overflow: hidden; }
.slot > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slot.empty { background: #F0F0F0; }
.slot.empty > img { display: none; }
.slot.contain > img { object-fit: contain; }

/* ---------- 轮播：整幅背景 + 右侧品牌色梯形 ---------- */
.h4-hero { position: relative; height: clamp(460px, 40vw, 780px); overflow: hidden; background: #fff; }
/* 层次（同一层叠上下文）：背景图 1 → 橙色梯形 2 → 文字/产品图 3 → 黄橙三角 4 → 流动橙带 5 → 箭头/圆点 6
   切换＝条带流动：橙带从右流入盖满（此刻换图）→ 继续左移，尾部停成左上角三角 → 梯形从右推入 → 黄橙三角最后滑入 */
.h4-slide { position: absolute; inset: 0; visibility: hidden; }
.h4-slide.on { visibility: visible; }
.h4-slide > .slot.bg { position: absolute; inset: 0; z-index: 1; }
.h4-slide > .slot.bg.empty { background: #fff; }
/* 长色带：宽 151%，两条斜边与原梯形同斜率（水平跨度 0.21 × 轮播宽）。
   静止时一条停在「梯形」位（头部斜边 = 梯形左边，身子伸出屏外右侧），另一条停在「尾巴」位（只露出左上角三角）；
   位置由 home-v4.js 以 translateX 设定并驱动 */
.h4-band { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: 151%; pointer-events: none; will-change: transform; }
/* 斜边用 skew 变形做（不用 clip-path：动画中与文字层重叠时 Chrome 会漏掉裁切，闪出一块方形色块）；
   内层宽 86.1%、以左下角为原点斜切，水平错位 = 0.21 × 轮播宽，角度由 home-v4.js 按轮播宽高计算 */
.h4-band > i { position: absolute; top: 0; bottom: 0; left: 0; width: 86.1%; background: #1B2638; transform-origin: 0 100%; }
/* 未激活的张：文字与产品图预先隐藏，换图那一刻不会在色带上闪出新标题；淡出 / 进场由 home-v4.js 用 Web Animations 控制 */
.h4-slide:not(.on) .h4-copy, .h4-slide:not(.on) .h4-fg { opacity: 0; }
/* 三张轮播统一版式（比例取自 ARBOR 首页轮播）：文字列 64% 起、宽 30%，标题距顶 18.7%；产品图固定框 52%/55%、44.8%×39.2% */
.h4-copy { position: absolute; left: 64.3%; width: 31%; top: 18.7%; z-index: 4; color: #fff; }
.h4-copy h1 { font-size: clamp(30px, 2.75vw, 52px); font-weight: 500; line-height: 1.1; margin: 0; white-space: pre; }
.h4-copy p { font-size: clamp(18px, 1.6vw, 28px); line-height: 1.22; margin: 16px 0 0; white-space: pre-line; }
.h4-btn { position: relative; display: inline-flex; align-items: center; justify-content: space-between; min-width: clamp(220px, 16.7vw, 300px); box-sizing: border-box; margin-top: 20px; padding: 15px 35px; border: 0; background: #fff; color: #E8601C !important; font-size: 18px; font-weight: 500; line-height: 1.1; box-shadow: 0 6px 18px rgba(0,0,0,.22); transition: background .3s, box-shadow .3s; }
.h4-btn::after { content: ""; margin-left: 40px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #E8601C; }
.h4-btn:hover { background: #FFF1E8; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
/* 箭头层（hero-n-fx，可选）：叠在橙色斜带之上、产品图与文字之下；与背景同为 1920×768 cover 裁切，坐标一一对应 */
.h4-fx { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.h4-fx-wrap { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
@media (max-width: 900px) { .h4-fx-wrap { display: none; } }
.h4-fg { position: absolute; left: 52.3%; width: 44.8%; top: 54.7%; height: 39.2%; z-index: 3; background: none; }
.h4-fg.empty { background: none; }
.h4-fg > img { object-fit: contain; object-position: center center; }
.h4-arrow { position: absolute; top: 50%; z-index: 6; margin-top: -30px; width: 48px; height: 60px; border: 0; background: none; color: #333; cursor: pointer; opacity: .75; }
.h4-arrow:hover { opacity: 1; }
.h4-arrow.l { left: 10px; } .h4-arrow.r { right: 10px; color: #fff; }
.h4-dots { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 6; display: flex; justify-content: center; gap: 14px; }
.h4-dots button { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(0,0,0,.08); cursor: pointer; transition: width .3s; }
.h4-dots button.on { width: 34px; border-radius: 6px; background: #fff; }

/* ---------- 区块 ---------- */
.h4-sec { padding: 70px 0 30px; }
.h4-sec.gray { background: #F0F0F0; padding-bottom: 70px; }
.h4-title { margin: 0 0 50px; text-align: center; font-size: 40px; font-weight: 400; line-height: 1.1; color: #1C2024; }
.h4-title.teal { color: #1C2024; }

/* 产品中心：一排分类 */
.h4-cats { display: flex; justify-content: center; gap: 10px; }
.h4-cat { flex: 0 1 210px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 10px 10px 16px; text-align: center; }
.h4-cat .slot { width: 100%; max-width: 180px; height: 128px; transition: transform .3s; }
.h4-cat:hover .slot { transform: translateY(-6px); }
.h4-cat span { font-size: 18px; color: #2C2C2C; line-height: 1.4; transition: color .3s; }
.h4-cat:hover span { color: #E8601C; }

/* 解决方案：3×2 卡片，卡片带细边与柔和阴影 */
.h4-sols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.h4-sol { display: flex; flex-direction: column; min-width: 0; }
.h4-sol .slot { aspect-ratio: 520 / 230; }
.h4-sol .slot::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #E8601C; opacity: .08; transition: opacity .3s; pointer-events: none; }
.h4-sol:hover .slot::before { opacity: 0; }
.h4-sol-txt { flex: 1; padding: 14px 18px 16px; background: #fff; border: 1px solid #EDEDED; box-shadow: 0 1px 6px rgba(0,0,0,.16); transition: box-shadow .3s; }
.h4-sol:hover .h4-sol-txt { box-shadow: 4px 4px 10px rgba(0,0,0,.16); }
.h4-sol-txt b { display: block; font-size: 19px; font-weight: 400; color: #000; line-height: 1.4; transition: color .3s; }
.h4-sol-txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 16px; color: #2C2C2C; line-height: 1.6; }
.h4-sol:hover b { color: #E8601C; }

/* 产品介绍：左大卡 + 右三卡 */
.h4-feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 230px); gap: 20px 30px; }
.h4-card { position: relative; display: flex; align-items: center; overflow: hidden; padding: 10px 60px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.15); }
.h4-card.big { grid-row: 1 / span 3; flex-direction: column; align-items: stretch; justify-content: space-between; padding: 8% 60px 5%; background: linear-gradient(170deg, #F4F4F5 0%, #FFFFFF 75%); }
.h4-card-txt { position: relative; z-index: 1; flex: 1; min-width: 0; padding: 20px 20px 20px 0; }
.h4-card b { display: block; font-size: 20px; font-weight: 400; color: #000; line-height: 1.5; transition: color .3s; }
.h4-card.big b { font-size: 26px; }
.h4-card p { margin: 6px 0 18px; font-size: 15px; line-height: 1.3; color: #2C2C2C; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.h4-card.big p { font-size: 18px; }
.h4-card:hover b { color: #E8601C; }
.h4-more { font-size: 16px; color: #434343; }
.h4-more::after { content: ""; display: inline-block; margin-left: 10px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #E8601C; }
.h4-card .slot { flex: none; width: 30%; height: 82%; }
.h4-card.big .slot { width: 100%; height: 58%; }
.h4-ribbon { position: absolute; left: -28px; top: 17px; z-index: 2; width: 116px; background: #F39800; color: #fff; text-align: center; font-size: 14px; letter-spacing: .2em; transform: rotate(-45deg); }

/* 底部咨询条：灰底 + 斜切色块 */
.h4-cta { position: relative; height: 210px; margin-top: 70px; overflow: hidden; background: #2B2F36; }
.h4-cta > .slot { position: absolute; inset: 0; }
.h4-cta > .slot.empty { background: #2B2F36; }
.h4-cta-panel { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 60%; background: #1B2638; clip-path: polygon(0 0, 100% 0, calc(100% - 110px) 100%, 0 100%); pointer-events: none; }
.h4-cta-deco { position: absolute; right: 0; bottom: 0; z-index: 1; width: 44px; height: 84px; background: #FFB718; clip-path: polygon(100% 0, 100% 100%, 0 100%); pointer-events: none; }
.h4-cta-box { position: relative; z-index: 2; height: 100%; max-width: 1630px; margin: 0 auto; padding: 0 15px; display: flex; align-items: center; }
.h4-cta-in { width: min(640px, 46%); color: #fff; }
.h4-cta-in p { margin: 0 0 22px; font-size: 22px; line-height: 1.5; color: #fff; }
.h4-cta-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 56px; }
.h4-cta .h4-btn { margin-top: 0; min-width: 0; padding: 0; background: none; box-shadow: none; color: #fff !important; font-size: 16px; font-weight: 400; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(255,255,255,.55); }
.h4-cta .h4-btn::after { margin-left: 12px; border-color: transparent transparent transparent #fff; }
.h4-cta .h4-btn:hover { background: none; box-shadow: none; text-decoration-color: #fff; }
.h4-cta-tel { font-size: 15px; color: rgba(255,255,255,.85); } .h4-cta-tel b { display: block; font-size: 24px; font-weight: 500; color: #fff; letter-spacing: .02em; }

/* ---------- 本地预览：点击上传 ---------- */

@media (max-width: 1280px) {
  .h4-card { padding: 10px 36px; } .h4-card.big { padding: 8% 40px 5%; }
}
@media (max-width: 900px) {
  .h4-copy { left: 36%; width: auto; right: 5%; top: 12%; }
  .h4-copy h1 { font-size: 30px; } .h4-copy p { font-size: 17px; }
  .h4-btn { margin-top: 24px; padding: 12px 24px; font-size: 16px; }
  .h4-fg { left: 40%; width: auto; right: 4%; top: auto; bottom: 0; height: 34%; }
  .h4-sec { padding: 50px 0 20px; }
  .h4-title { font-size: 32px; margin-bottom: 32px; }
  .h4-sols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .h4-feat { grid-template-columns: minmax(0, 1fr); grid-template-rows: 460px repeat(3, 200px); }
  .h4-card.big { grid-row: auto; }
  .h4-cta { height: auto; } .h4-cta-box { padding-top: 40px; padding-bottom: 40px; } .h4-cta-panel { width: 100%; clip-path: none; opacity: .94; } .h4-cta-in { width: 100%; }
}
@media (max-width: 900px) { .h4-cats { flex-wrap: wrap; gap: 20px 10px; } .h4-cat { flex: 0 0 calc(25% - 10px); } }
@media (max-width: 600px) {
  #yk-header { min-height: 64px; }
  .h4-hero { height: 420px; }
  .h4-copy { left: 16%; right: 6%; }
  .h4-copy h1 { font-size: 26px; } .h4-copy p { font-size: 15px; }
  .h4-fg { left: 26%; }
  .h4-cat { flex: 0 0 calc(50% - 10px); } .h4-cat .slot { width: 140px; height: 100px; } .h4-cat span { font-size: 16px; }
  .h4-title { font-size: 28px; }
  .h4-sols { grid-template-columns: minmax(0, 1fr); }
  .h4-card, .h4-card.big { padding: 20px 22px; }
  .h4-card b { font-size: 18px; } .h4-card.big b { font-size: 22px; }
  .h4-cta-in p { font-size: 18px; }
}

/* ---------- 轮播对比版（index.html?hv=b / c / d）：只改版式与力度，动画与内容不变 ---------- */
/* B 产品破框：产品图放大，跨过斜带边缘压到背景上 */
.hv-b .h4-fg { left: 40%; width: 58%; top: 40%; height: 58%; }
.hv-b .h4-fg > img { object-position: right bottom; }
/* C 细橙边 + 大标题：梯形斜边一道品牌橙细线，标题上方一小段橙色短杠 */
.hv-c .h4-band > i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 7px; background: #E8601C; }
.hv-c .h4-copy h1 { font-size: clamp(34px, 3vw, 58px); font-weight: 600; }
.hv-c .h4-copy h1::before { content: ""; display: block; width: 48px; height: 5px; margin-bottom: 22px; background: #E8601C; }
.hv-c .h4-copy p { color: rgba(255,255,255,.82); }
/* D 上图下文：产品图放上半部，文字落到下半部；斜带加一层由浅到深的渐变 */
.hv-d .h4-band > i { background: linear-gradient(90deg, #26365A 0%, #1B2638 22%, #121A28 60%); }
.hv-d .h4-fg { left: 52%; width: 44%; top: 8%; height: 50%; }
.hv-d .h4-copy { top: 62%; }

/* ========== 结构不同的三套设计（index.html?hv=e / f / g）：不用斜带，淡入淡出 + 背景缓推，标题标签导航 ========== */
.hv-alt { height: clamp(500px, 44vw, 840px); }
/* 新的一张先淡入盖上，旧的一张等新的到位后再撤掉，交叠时不会露底 */
.hv-alt .h4-slide { visibility: visible; opacity: 0; transition: opacity .9s ease .9s; }
.hv-alt .h4-slide.on { opacity: 1; z-index: 2; transition-delay: 0s; }
.hv-alt .h4-slide > .slot.bg > img { transform: scale(1.07); transition: transform 7s linear; }
.hv-alt .h4-slide.on > .slot.bg > img { transform: scale(1); }
.hv-alt .h4-copy, .hv-alt .h4-fg { transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
.hv-alt .h4-slide:not(.on) .h4-copy { transform: translateY(28px); }
.hv-alt .h4-slide:not(.on) .h4-fg { transform: translateX(60px); }
.hv-alt .h4-slide.on .h4-copy { transition-delay: .35s; }
.hv-alt .h4-slide.on .h4-fg { transition-delay: .55s; }
.hv-alt .h4-arrow { display: none; }
.h4-no { display: block; font-style: normal; font-size: 18px; font-weight: 600; letter-spacing: .12em; color: #E8601C; margin-bottom: 18px; }
.h4-no small { font-size: 14px; color: rgba(255,255,255,.5); }
/* 标题标签：三等分，当前一格顶部一条橙色进度线 6s 走满 */
.hv-alt .h4-dots { left: 0; right: 0; bottom: 0; gap: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
.hv-alt .h4-dots button { position: relative; width: auto; height: 76px; padding: 0 32px; display: flex; align-items: center; gap: 16px; border-radius: 0; background: none; box-shadow: none; text-align: left; font: inherit; cursor: pointer; }
.hv-alt .h4-dots button.on { width: auto; border-radius: 0; background: none; }
.hv-alt .h4-dots b { font-size: 15px; font-weight: 600; letter-spacing: .08em; }
.hv-alt .h4-dots span { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-alt .h4-dots em { position: absolute; left: 0; right: 0; top: 0; height: 3px; transform-origin: 0 0; transform: scaleX(0); background: #E8601C; }
.hv-alt .h4-dots button.on em { animation: hvprog 6s linear forwards; }
@keyframes hvprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* E 分屏：左 42% 深蓝黑实色面板（编号 / 标题 / 副标题 / 产品），右侧背景图直线切开；底部白色标题标签栏 */
.hv-e .h4-slide::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 42%; z-index: 2; background: #1B2638; pointer-events: none; }
.hv-e .h4-slide > .slot.bg { left: 42%; }
.hv-e .h4-slide > .slot.bg > img { object-position: 22% center; }
.hv-e .h4-slide.on .h4-copy, .hv-e .h4-slide.on .h4-fg { z-index: 5; }
.hv-e .h4-copy, .hv-e .h4-fg { z-index: 5; }
.hv-e .h4-copy { left: 6%; width: 34%; top: 13%; }
.hv-e .h4-copy h1 { font-size: clamp(32px, 3vw, 56px); }
.hv-e .h4-copy p { color: rgba(255,255,255,.78); }
.hv-e .h4-fg { left: 5%; width: 33%; top: 50%; height: 33%; }
.hv-e .h4-fg > img { object-position: left center; }
.hv-e .h4-dots { z-index: 6; background: #fff; box-shadow: 0 -1px 0 #E6E8EC; }
.hv-e .h4-dots button { color: #8A909A; } .hv-e .h4-dots button + button { border-left: 1px solid #E6E8EC; }
.hv-e .h4-dots button.on { color: #1C2024; }

/* F 沉浸主视觉：背景压暗退成氛围，左侧超大标题 + 描边大编号，右侧产品放大做主角；底部透明标签 */
.hv-f { background: #0E1624; }
.hv-f .h4-slide > .slot.bg > img { filter: brightness(.55) saturate(.75); }
.hv-f .h4-slide > .slot.bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,22,36,.94) 0%, rgba(14,22,36,.7) 42%, rgba(14,22,36,.35) 100%); }
.hv-f .h4-copy { left: 7%; width: 46%; top: 22%; }
.hv-f .h4-no { font-size: clamp(80px, 8vw, 150px); font-weight: 700; line-height: .9; letter-spacing: 0; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.35); margin-bottom: 26px; }
.hv-f .h4-no small { display: none; }
.hv-f .h4-copy h1 { font-size: clamp(40px, 4vw, 76px); font-weight: 600; }
.hv-f .h4-copy p { margin-top: 22px; color: rgba(255,255,255,.75); }
.hv-f .h4-fg { left: 50%; width: 46%; top: 16%; height: 64%; }
.hv-f .h4-dots { padding: 0 7%; }
.hv-f .h4-dots button { color: rgba(255,255,255,.5); border-top: 1px solid rgba(255,255,255,.18); }
.hv-f .h4-dots button.on { color: #fff; }

/* G 浮动信息卡：背景整幅原样，右侧一张大白卡承载编号 / 标题 / 产品；底部深色半透明标签 */
.hv-g .h4-slide::before { content: ""; position: absolute; left: 57%; right: 5%; top: 9%; bottom: calc(76px + 6%); z-index: 2; background: #fff; box-shadow: 0 30px 80px rgba(10,20,40,.28); }
.hv-g .h4-copy { left: 61%; width: 31%; top: 15%; color: #1C2024; }
.hv-g .h4-no small { color: #A0A6AF; }
.hv-g .h4-copy h1 { font-size: clamp(30px, 2.6vw, 50px); }
.hv-g .h4-copy p { color: #5A6270; }
.hv-g .h4-fg { left: 60%; width: 32%; top: 47%; height: 30%; }
.hv-g .h4-dots { background: rgba(14,22,36,.62); backdrop-filter: blur(8px); }
.hv-g .h4-dots button { color: rgba(255,255,255,.6); } .hv-g .h4-dots button + button { border-left: 1px solid rgba(255,255,255,.14); }
.hv-g .h4-dots button.on { color: #fff; }

/* ========== 以现版为底的三版（index.html?hv=h / i / j）：形状 + 背景 + 小部件 + 产品图，斜带流动动画不变 ========== */
.h4-slide:not(.on) .h4-badge { opacity: 0; }
/* 共用：特性标签（取自副标题） */
.h4-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.h4-chips span { padding: 7px 18px; border: 1px solid rgba(255,255,255,.4); font-size: 15px; line-height: 1.2; color: rgba(255,255,255,.9); }

/* H 回声斜带 + 特性标签：主斜带左侧两道同斜率的半透明窄带，随斜带一起流动 */
.hv-h .h4-band > i::before { content: ""; position: absolute; top: 0; bottom: 0; left: -70px; width: 26px; background: rgba(27,38,56,.5); }
.hv-h .h4-band > i::after { content: ""; position: absolute; top: 0; bottom: 0; left: -104px; width: 8px; background: rgba(27,38,56,.3); }

/* I 计数器 + 悬浮参数卡：标题上方 01 —— 03 进度线；产品左上角一张小白卡压在斜带边缘 */
.h4-count { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; font-style: normal; font-size: 15px; letter-spacing: .08em; color: rgba(255,255,255,.55); }
.h4-count b { font-size: 20px; font-weight: 600; color: #E8601C; }
.h4-count em { position: relative; display: block; width: 96px; height: 2px; background: rgba(255,255,255,.22); }
.h4-count s { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: 0 0; }
.h4-slide.on .h4-count s { animation: hvprog 6s linear forwards; }
@keyframes hvprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.h4-badge { position: absolute; z-index: 5; left: 45%; top: 60%; display: flex; flex-direction: column; padding: 16px 24px 14px; background: #fff; border-top: 3px solid #E8601C; box-shadow: 0 18px 44px rgba(10,20,40,.24); }
.h4-badge b { font-size: 46px; font-weight: 600; line-height: 1; color: #1B2638; }
.h4-badge b small { margin-left: 6px; font-size: 16px; font-weight: 500; }
.h4-badge i { margin-top: 8px; font-style: normal; font-size: 14px; color: #6B7280; }

/* J 悬浮斜面板 + 竖向进度：斜带上下内缩，右侧背景从上下露出；右缘 01/02/03 竖排导航 */
.hv-j .h4-band { top: 7%; bottom: 7%; }
.hv-j .h4-arrow { display: none; }
.hv-j .h4-dots { left: auto; right: 34px; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; align-items: flex-end; gap: 20px; }
.hv-j .h4-dots button { width: auto; height: auto; padding: 0; display: flex; align-items: center; gap: 12px; border-radius: 0; background: none; box-shadow: none; color: rgba(255,255,255,.5); font: 600 14px/1 inherit; letter-spacing: .06em; }
.hv-j .h4-dots button.on { width: auto; border-radius: 0; background: none; color: #fff; }
.hv-j .h4-dots em { display: block; width: 18px; height: 2px; background: currentColor; transition: width .3s, background .3s; }
.hv-j .h4-dots button.on em { width: 44px; background: #E8601C; }

/* ========== 自己设计的形状（index.html?hv=k / m / n）：形状 + 背景 + 小部件 + 产品图；每张自带形状，切换＝旧形状退场 → 新一张淡入 → 新形状进场 → 文字产品滑入 ========== */
.hv-shape .h4-slide { visibility: visible; opacity: 0; transition: opacity .5s ease .75s; }
.hv-shape .h4-slide.on { opacity: 1; z-index: 2; transition: opacity .5s ease .4s; }
.h4-shape { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.h4-shape > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hv-shape .h4-shape > * { transition: transform .5s cubic-bezier(.6,0,.8,.4); }
.hv-shape .h4-slide.on .h4-shape > * { transition: transform .95s cubic-bezier(.2,.75,.3,1); }
.hv-shape .h4-copy, .hv-shape .h4-fg, .hv-shape .h4-badge { transition: opacity .35s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.hv-shape .h4-slide:not(.on) .h4-copy { transform: translateX(-40px); }
.hv-shape .h4-slide:not(.on) .h4-fg { transform: translateX(50px); }
.hv-shape .h4-slide:not(.on) .h4-badge { transform: translateY(24px); }
.hv-shape .h4-slide.on .h4-copy { transition-delay: 1s; }
.hv-shape .h4-slide.on .h4-fg { transition-delay: 1.15s; }
.hv-shape .h4-slide.on .h4-badge { transition-delay: 1.3s; }

/* K 前进箭头：深蓝黑主形左缘切成 ">" 凹口，旁边一道品牌橙细 ">"，读作向前的双箭头 */
.hv-k .s1 polygon { fill: #1B2638; } .hv-k .s2 polygon { fill: #E8601C; }
.hv-k .h4-slide:not(.on) .s1 { transform: translateX(70%); }
.hv-k .h4-slide:not(.on) .s2 { transform: translateX(90%); transition-delay: .06s; }
.hv-k .h4-slide.on .s1 { transition-delay: .55s; } .hv-k .h4-slide.on .s2 { transition-delay: .72s; }
.hv-k .h4-fg { left: 58%; width: 38%; top: 55%; height: 37%; }
.hv-k .h4-badge { left: 50.5%; top: 66%; }

/* M 大圆弧：右侧一个超大深蓝黑圆，左缘是缓弧；外侧一圈橙色细环 + 一圈半透明宽环 */
.hv-m .h4-shape i { position: absolute; top: 50%; left: 47%; height: 220%; aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%); }
.hv-m .h4-shape .s1 { background: #1B2638; }
.hv-m .h4-shape .s2 { left: calc(47% - 30px); height: calc(220% + 60px); border: 2px solid #E8601C; }
.hv-m .h4-shape .s3 { left: calc(47% - 74px); height: calc(220% + 148px); border: 22px solid rgba(27,38,56,.16); }
.hv-m .h4-slide:not(.on) .h4-shape i { transform: translateY(-50%) translateX(28%) scale(.86); }
.hv-m .h4-slide.on .s3 { transition-delay: .5s; } .hv-m .h4-slide.on .s1 { transition-delay: .6s; } .hv-m .h4-slide.on .s2 { transition-delay: .78s; }
.hv-m .h4-fg { left: 53%; width: 43%; top: 55%; height: 38%; }

/* N 阶梯块：三条斜切横块自上而下逐级向左伸出，块间细缝露出背景；同一深蓝由深到略浅 */
.hv-n .s1 polygon { fill: #1B2638; } .hv-n .s2 polygon { fill: #1F2C42; } .hv-n .s3 polygon { fill: #24344E; }
.hv-n .h4-slide:not(.on) .h4-shape > svg { transform: translateX(62%); }
.hv-n .h4-slide:not(.on) .s2 { transition-delay: .06s; } .hv-n .h4-slide:not(.on) .s3 { transition-delay: .12s; }
.hv-n .h4-slide.on .s1 { transition-delay: .55s; } .hv-n .h4-slide.on .s2 { transition-delay: .65s; } .hv-n .h4-slide.on .s3 { transition-delay: .75s; }
.hv-n .h4-copy { left: 58%; top: 10%; }
.hv-n .h4-fg { left: 45%; width: 50%; top: 54%; height: 40%; }

/* K 改为普通左右平移：滑出中的那张保持可见 */
.hv-k .h4-slide.moving { visibility: visible; }
.hv-k .h4-slide.moving .h4-copy, .hv-k .h4-slide.moving .h4-fg { opacity: 1; }
.hv-k .h4-slide .h4-shape > * { transform: none !important; transition: none !important; }

/* 产品介绍大卡：整块都是图片（图里自带标题），卡片文字只留给读屏与搜索引擎，整块可点 */
.h4-card.big { padding: 0; }
.h4-card.big .slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.h4-card.big .slot > img { object-fit: cover; object-position: center; }
.h4-card.big .h4-card-txt { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) { .h4-card.big { padding: 0; } }

/* 产品介绍：左大图跨两行；右侧 2×2 拼格——上排两块、下排一块通栏。浅灰底块，机器图在上、型号与名称在下，不加编号、链接字样和悬停动画 */
.h4-feat { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(2, 320px); gap: 20px; }
.h4-card.big { grid-column: 1; grid-row: 1 / span 2; }
.h4-card.big ~ .h4-card:last-child { grid-column: 2 / span 2; }
.h4-card.big ~ .h4-card:last-child .slot { width: 56%; align-self: center; }
.h4-card:not(.big) { flex-direction: column; align-items: stretch; padding: 34px 36px 30px; background: #F4F5F7; box-shadow: none; }
.h4-card:not(.big) .slot { order: -1; flex: 1 1 auto; width: 100%; height: auto; min-height: 0; }
.h4-card:not(.big) .h4-card-txt { flex: none; padding: 22px 0 0; }
.h4-card:not(.big) b { font-size: 20px; font-weight: 500; color: #1C2024; }
.h4-card:not(.big) p { margin: 6px 0 0; font-size: 14.5px; color: #6B7280; -webkit-line-clamp: 1; }
.h4-card b, .h4-card:hover b { transition: none; color: #1C2024; }
@media (max-width: 900px) { .h4-feat { grid-template-columns: minmax(0, 1fr); grid-template-rows: 460px repeat(3, 320px); } .h4-card.big, .h4-card.big ~ .h4-card:last-child { grid-column: auto; grid-row: auto; } }

/* k：纯图片轮播（不叠形状），背景都是浅色，文字改深色 */
.hv-k .h4-copy { color: #1C2024; }
.hv-k .h4-copy p { color: #4B5563; }
.hv-k .h4-dots button { background: rgba(28,32,36,.22); box-shadow: none; }
.hv-k .h4-dots button.on { background: #1C2024; }

/* 没有产品图的那张（国产信创服务器）：文字垂直居中，标题加大加粗、副标题细字 */
.hv-k .h4-slide.solo .h4-copy { top: 50%; transform: translateY(-50%); left: 63%; width: 34%; }
.hv-k .h4-slide.solo h1 { font-size: clamp(36px, 3.4vw, 64px); font-weight: 600; letter-spacing: .04em; line-height: 1.15; }
.hv-k .h4-slide.solo p { margin-top: 26px; font-size: clamp(16px, 1.25vw, 22px); font-weight: 300; line-height: 1.8; letter-spacing: .06em; color: #4B5563; }
@media (max-width: 900px) {
  .hv-k .h4-slide.solo .h4-copy { left: 36%; width: auto; right: 5%; }
  .hv-k .h4-slide.solo h1 { font-size: 30px; }
  .hv-k .h4-slide.solo p { font-size: 15px; margin-top: 14px; }
}
.h4-link { position: absolute; inset: 0; z-index: 5; }