/* =========================================================
   Spacecom 精密光学镜头官网 - 全局样式
   风格：企业级工业精密 · 灰蓝色调 · PC 优先
   ========================================================= */

:root {
  /* 站点为浅色设计：声明 light 可避免浏览器强制深色反色导致文字看不清 */
  color-scheme: light;
  --navy: #1E3A5F;          /* 主色 深海蓝 */
  --navy-deep: #16293F;     /* 深底 */
  --navy-soft: #2C4E77;
  --blue: #3B82F6;          /* 强调色 / CTA */
  --blue-dark: #2563EB;
  --ink: #1F2A37;           /* 正文深灰 */
  --ink-2: #4B5563;
  --ink-3: #7B8794;
  --line: #E2E8F0;
  --bg-alt: #F8FAFC;        /* 交替区块背景 */
  --white: #FFFFFF;
  --radius: 10px;           /* 卡片 / 按钮 / 输入框统一圆角 */
  --radius-sm: 4px;         /* 徽标等小元素 */
  --radius-lg: 18px;        /* 弹窗 / 大面板 */
  --grad-brand: linear-gradient(135deg, #2563EB 0%, #1E3A5F 100%);   /* 主按钮渐变 */
  --grad-navy: linear-gradient(135deg, #1E3A5F 0%, #2C4E77 100%);    /* 深色按钮渐变 */
  --grad-deep: linear-gradient(135deg, #132539 0%, #16293F 45%, #1D3A5B 100%); /* 深底区块 */
  --glow-blue: 0 10px 26px rgba(37, 99, 235, .34);
  --hairline-light: rgba(255, 255, 255, .14);
  --shadow-sm: 0 1px 2px rgba(16, 32, 55, .06);
  --shadow: 0 4px 16px rgba(16, 32, 55, .08);
  --shadow-lg: 0 18px 44px rgba(16, 32, 55, .16);
  --nav-h: 68px;
}

/* ---------- 字体 ---------- */
.font-head { font-family: 'Montserrat', 'Noto Sans SC', sans-serif; }
body, .font-body { font-family: 'Inter', 'Noto Sans SC', -apple-system, 'Segoe UI', sans-serif; }
/* 所有参数表格数字强制 Inter 等宽数字 */
.num, table td, table th { font-family: 'Inter', 'Noto Sans SC', sans-serif; font-variant-numeric: tabular-nums; }

* { box-sizing: border-box; }
/* 保证 hidden 属性始终生效（避免被 .btn / .chip 等 display 规则覆盖） */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 56px); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-size: 15.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Montserrat', 'Noto Sans SC', sans-serif; color: var(--navy); margin: 0; font-weight: 700; letter-spacing: .2px; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* 通用容器 */
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.wrap-sm { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 32px; }
.sec { padding: 96px 0; }
.sec-alt { background: var(--bg-alt); }
.sec-title { font-size: 38px; line-height: 1.25; letter-spacing: -.2px; }
.sec-sub { color: var(--ink-2); font-size: 17px; line-height: 1.7; margin-top: 14px; max-width: 760px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--blue); font-size: 12px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase;
}
.eyebrow::before {
  content: ''; width: 18px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), rgba(59, 130, 246, .15));
}
.rule {
  width: 56px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue) 0%, #93B8E8 62%, rgba(59, 130, 246, 0) 100%);
  margin: 18px 0 22px;
}

/* 热门标杆型号：深色区块 + 白色标题，作为全页视觉锚点 */
.sec-featured { background: var(--navy-deep); }
.sec-featured .sec-title { color: #fff; }
.sec-featured .sec-sub { color: rgba(255, 255, 255, .82); }
.sec-featured .eyebrow { color: #8FC0F5; }
.sec-featured .btn-on-dark { color: #fff; border-color: rgba(255, 255, 255, .45); background: transparent; }
.sec-featured .btn-on-dark:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .12); }
.sec-featured .hscroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, .08); }

/* ---------- 按钮 ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 24px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; border: 1px solid transparent;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease, background .25s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: 0 4px 14px rgba(37, 99, 235, .26); }
.btn-primary:hover { box-shadow: var(--glow-blue); transform: translateY(-2px); filter: saturate(1.08); }
.btn-navy { background: var(--grad-navy); color: #fff; }
.btn-navy:hover { box-shadow: 0 12px 26px rgba(22, 41, 63, .3); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); background: rgba(59, 130, 246, .06); transform: translateY(-2px); }
.btn-outline-light { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .45); backdrop-filter: blur(6px); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .16); border-color: #fff; transform: translateY(-2px); }
/* 主按钮高光扫过（深色底按钮） */
.btn-primary::after, .btn-navy::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -65%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg); transition: left .65s ease; pointer-events: none;
}
.btn-primary:hover::after, .btn-navy:hover::after { left: 130%; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; }

/* ---------- 顶部导航 ---------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--nav-h); background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line); backdrop-filter: saturate(180%) blur(8px);
}
.site-nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 3px; flex: none;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  display: grid; place-items: center; color: #fff;
}
.brand-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; color: var(--navy); letter-spacing: .5px; }
.brand-sub { font-size: 10px; color: var(--ink-3); letter-spacing: 1.6px; text-transform: uppercase; }
/* 品牌 Logo 图片：替换原 SVG 图标，右侧 Spacecom / Precision Optics 文字保持不变 */
.brand-logo { height: 36px; width: auto; max-width: 200px; object-fit: contain; display: block; flex: none; }
.site-foot .brand-logo { height: 32px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 10px 17px; font-size: 16px; font-weight: 500; color: var(--ink-2);
  border-radius: var(--radius); position: relative; transition: color .2s;
}
.nav-links a:hover { color: var(--blue); }
.nav-links a.active { color: var(--navy); font-weight: 600; }
.nav-links a.active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--blue);
}
.nav-cta { display: flex; align-items: center; gap: 10px; }
/* 语言切换：中文 / EN 并排显示，当前语种高亮，避免只显示单个缩写造成误解 */
.lang-switch {
  display: inline-flex; align-items: center; flex: none;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; overflow: hidden;
}
.lang-switch a {
  padding: 5px 10px; font-size: 12.5px; line-height: 1.2; white-space: nowrap;
  color: rgba(255, 255, 255, .68); transition: color .2s, background .2s;
}
.lang-switch a:hover { color: #fff; }
.lang-switch a.on { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
/* 语言原地切换（无刷新）：英文态隐藏中文页上的英文小字副标题，避免与已翻译的主标题重复 */
html.sc-lang-en .en,
html.sc-lang-en .soon-en { display: none !important; }
.nav-phone { font-size: 14.5px; color: var(--ink-2); }
.nav-cta .btn-sm { font-size: 14.5px; height: 40px; padding: 0 20px; }
.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.burger span { display: block; width: 18px; height: 2px; background: var(--navy); margin: 4px auto; }

/* 英文页导航：英文标签比中文长，收紧间距并禁止折行，避免 About Us / Sales Inquiry 换行错位 */
.nav-links a, .nav-phone { white-space: nowrap; }
html[lang="en"] .nav-links { gap: 0; }
html[lang="en"] .nav-links a { padding: 10px 11px; font-size: 15px; }
html[lang="en"] .nav-links a.active::after { left: 8px; right: 8px; }
html[lang="en"] .site-nav .wrap { gap: 16px; }
html[lang="en"] .nav-cta { gap: 14px; }
html[lang="en"] .nav-phone { font-size: 13.5px; }
@media (max-width: 1400px) {
  html[lang="en"] .nav-links a { padding: 10px 8px; font-size: 14px; }
  html[lang="en"] .nav-cta .btn-sm { padding: 0 14px; }
}

/* ---------- 页首 Banner（内页） ---------- */
.page-hero {
  padding: calc(var(--nav-h) + 64px) 0 64px;
  background: var(--navy-deep); color: #fff; position: relative; overflow: hidden;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background:
    radial-gradient(1000px 320px at 82% -10%, rgba(59,130,246,.42), transparent 62%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 26px);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: 40px; }
.page-hero p { color: rgba(255,255,255,.82); max-width: 780px; margin-top: 14px; }

/* 产品中心顶部搜索区：统一字号层级，说明文字拆两行不再堆叠 */
.page-hero-prod .wrap p { font-size: 16.5px; line-height: 1.8; max-width: 700px; color: rgba(255,255,255,.86); }
.page-hero-prod .search-box input { height: 54px; font-size: 15.5px; }
/* 产品中心页首：标题与说明在左，搜索框放右上角（宽度不足时自动上下排列） */
.prod-hero { display: flex; flex-direction: column; gap: 22px; }
.prod-hero-search .search-box { max-width: 560px; }
@media (min-width: 1200px) {
  .prod-hero { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 48px; }
  .prod-hero-main { flex: 1 1 auto; min-width: 0; }
  .prod-hero-search { flex: 0 0 600px; padding-top: 2px; }
  .prod-hero-search .search-box { max-width: none; }
}
/* 搜索提示：已停用（页面不再展示这两行说明），需要恢复时取消注释
.page-hero-prod .search-hint { margin-top: 12px; max-width: 700px; }
.page-hero-prod .search-hint p { font-size: 13px; line-height: 1.85; color: rgba(255,255,255,.7); margin: 0; }
.page-hero-prod .search-hint p + p { margin-top: 4px; }
*/

/* ---------- 图片与占位 ---------- */
.img-ph {
  position: relative; width: 100%; background: linear-gradient(135deg, #EDF2F8, #DCE6F2);
  border: 1px solid var(--line); overflow: hidden;
}
.img-ph::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(30,58,95,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,58,95,.06) 1px, transparent 1px);
  background-size: 26px 26px;
}
.img-ph::after {
  content: attr(data-label); position: absolute; left: 0; right: 0; bottom: 0;
  padding: 6px 10px; font-size: 11px; color: var(--navy);
  background: rgba(255,255,255,.75); border-top: 1px solid var(--line);
  letter-spacing: .5px;
}
.img-ph img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ratio-43 { aspect-ratio: 4 / 3; }
.ratio-169 { aspect-ratio: 16 / 9; }
.ratio-11 { aspect-ratio: 1 / 1; }

/* ---------- 卡片 ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: all .22s ease; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: #CBD9EA; }
.card-body { padding: 22px 24px; }

/* 一级系列卡片 */
.series-card { position: relative; display: block; overflow: hidden; }
.series-card .img-ph { border: none; border-bottom: 1px solid var(--line); }
.series-card h3 { font-size: 19px; }
.series-card .en { font-size: 12px; color: var(--ink-3); letter-spacing: 1px; text-transform: uppercase; }
.series-card .go { color: var(--blue); font-size: 13px; font-weight: 600; }

/* 产品系列 Bento 拼图容器（窄屏为单列上下结构，PC 端拼图规则见首页媒体查询） */
.series-bento { display: grid; grid-template-columns: 1fr; gap: 24px; }
.sb-main, .sb-pair, .sb-side { display: grid; grid-template-columns: 1fr; gap: 24px; }
.series-bento .series-card .img-ph { aspect-ratio: 4 / 3; }
.series-bento .sb-info { position: relative; z-index: 4; padding: 20px 22px; background: #fff; }
.series-bento .sb-desc { font-size: 13.5px; color: var(--ink-2); margin: 10px 0 0; min-height: 44px; }
.series-bento .sb-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
/* 「即将推出」整图遮罩：暂时停用（会整张盖住系列代表图），需要恢复时取消注释即可 */
/*
.mask-soon {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: rgba(22,41,63,.62); backdrop-filter: blur(1.5px);
}
.mask-soon span {
  border: 1px solid rgba(255,255,255,.75); color: #fff; font-size: 13px; letter-spacing: 1px;
  padding: 8px 16px; border-radius: 999px;
}
*/

/* ---------- 行业应用卡片（首页）：场景图铺满 + 悬停展开应用说明 ---------- */
.app-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
/* 错位两行：每行 1 张大卡 + 1 张小卡（窄屏自动上下堆叠） */
.app-row { display: grid; grid-template-columns: 1fr; gap: 20px; }
.app-tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); min-height: 220px;
  /* 场景图缺失时的兜底底色（深蓝渐变，不出现破图） */
  background: linear-gradient(135deg, #16233A 0%, #0E1526 100%);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s ease, transform .3s ease;
}
/* 场景图铺满整卡 */
.app-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
/* 悬停时才出现的暗色浮层 */
.app-veil {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease;
  background: linear-gradient(180deg, rgba(8,12,28,.93) 0%, rgba(8,12,28,.78) 58%, rgba(8,12,28,.6) 100%);
}
.app-panel {
  position: absolute; inset: 0; z-index: 2; padding: 20px 22px;
  display: flex; flex-direction: column; color: #fff;
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.app-tag { font-size: 14px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: #8FC0F5; }
.app-panel h3 { color: #fff; font-size: 30px; margin-top: 8px; }
.app-panel p { font-size: 17px; line-height: 1.62; color: rgba(255,255,255,.86); margin: 9px 0 0; }
.app-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.app-panel .chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; font-size: 15px; }
.app-go { margin-top: auto; padding-top: 12px; font-size: 17px; font-weight: 600; color: #8FC0F5; }
/* 默认状态下的领域名（悬停时淡出为水印） */
.app-label {
  position: absolute; left: 22px; bottom: 18px; z-index: 1;
  font-family: 'Montserrat', 'Noto Sans SC', sans-serif; font-weight: 700;
  font-size: 28px; letter-spacing: .5px; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
  transition: opacity .3s ease;
}
/* 底部渐变压暗，保证默认状态领域名可读 */
.app-tile::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(6,10,22,.78) 0%, rgba(6,10,22,.22) 34%, rgba(6,10,22,0) 58%);
}
/* 仅悬浮设备启用悬停展开 */
@media (hover: hover) {
  .app-tile:hover .app-veil { opacity: 1; }
  .app-tile:hover .app-panel { opacity: 1; transform: none; }
  .app-tile:hover .app-label { opacity: .2; }
}
/* 触屏 / 窄屏：无悬停，说明常显（领域名退为水印） */
@media (hover: none), (max-width: 860px) {
  /* 文案调大后同步抬高卡片，避免说明被裁切 */
  .app-tile { min-height: 330px; }
  .app-veil { opacity: 1; }
  .app-panel { opacity: 1; transform: none; }
  .app-label { opacity: .2; }
}

/* 徽标 */
.badge { display: inline-block; padding: 3px 9px; border-radius: 2px; font-size: 12px; font-weight: 600; }
.badge-soon { background: rgba(59,130,246,.1); color: var(--blue); border: 1px solid rgba(59,130,246,.3); }
.badge-solid { background: var(--navy); color: #fff; }

/* ---------- 数据统计（深色） ---------- */
.stats-band { background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
.stats-band::before {
  content: ''; position: absolute; inset: 0; opacity: .55;
  background:
    radial-gradient(760px 260px at 12% 0%, rgba(59,130,246,.35), transparent 60%),
    repeating-linear-gradient(160deg, rgba(255,255,255,.04) 0 1px, transparent 1px 22px);
}
.stats-band .wrap { position: relative; z-index: 1; }
.stat-num { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 44px; color: #fff; font-variant-numeric: tabular-nums; }
.stat-label { color: rgba(255,255,255,.72); font-size: 14px; }

/* ---------- 首页 Hero ---------- */
.hero { position: relative; min-height: 620px; display: flex; align-items: center; overflow: hidden; background: var(--navy-deep); }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,41,63,.88) 0%, rgba(22,41,63,.6) 55%, rgba(22,41,63,.2) 100%); }
#heroCanvas { position: absolute; inset: 0; z-index: 1; }
.hero .wrap { position: relative; z-index: 2; padding-top: var(--nav-h); }
.hero h1 { color: #fff; font-size: 54px; line-height: 1.18; }
.hero .lead { color: rgba(255,255,255,.85); font-size: 20px; max-width: 780px; margin-top: 20px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-tags span { font-size: 15px; color: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.28); padding: 8px 16px; border-radius: 999px; }

/* ---------- 横向滚动卡片 ---------- */
.hscroll { display: flex; gap: 20px; overflow-x: auto; padding: 6px 2px 22px; scroll-snap-type: x mandatory; }
.hscroll > * { flex: 0 0 288px; scroll-snap-align: start; }
.hscroll::-webkit-scrollbar { height: 8px; }
.hscroll::-webkit-scrollbar-thumb { background: #C7D4E4; border-radius: 4px; }
.hscroll::-webkit-scrollbar-track { background: var(--bg-alt); }

/* 热门标杆型号：卡片自动轮播，需关闭滚动吸附（否则程序滚动会被吸附打断） */
#featuredScroll { scroll-snap-type: none; scroll-behavior: auto; }

/* 热门标杆卡片：典型应用信息块（窄屏与 PC 共用基础样式） */
.feat-apply { margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line); }
.feat-apply .fa-title { font-size: 11.5px; font-weight: 600; color: var(--blue); letter-spacing: .5px; }
.feat-apply .fa-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.feat-apply .fa-tags span { font-size: 11.5px; color: var(--ink-2); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; line-height: 1.5; }
.feat-apply p { font-size: 12.5px; color: var(--ink-2); margin: 8px 0 0; line-height: 1.65; }

/* 快捷筛选标签 */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 999px; font-size: 13px; transition: all .18s;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- 产品表格 ---------- */
.tbl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.ptable { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 940px; }
table.ptable th {
  background: #F1F5FA; color: var(--navy); font-weight: 600; font-size: 12.5px;
  text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
table.ptable td { padding: 11px 12px; border-bottom: 1px solid #EEF2F7; color: var(--ink-2); vertical-align: middle; text-align: left; }
table.ptable tr:last-child td { border-bottom: none; }
table.ptable tbody tr:hover { background: #F8FBFF; }
table.ptable tr.diff td { background: #FFF8E8; }
.cell-thumb { width: 64px; height: 48px; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: #F1F5FA; }
.cell-thumb img { width: 100%; height: 100%; object-fit: cover; }
.model-cell { color: var(--navy); font-weight: 600; cursor: pointer; border-bottom: 1px dashed #A9BFD8; }
.model-cell:hover { color: var(--blue); }
/* 波长列中的透过率版本标签（低透过率 / 高透过率），弱化为小字 */
.spec-tag {
  display: inline-block; font-size: 11px; line-height: 16px; color: var(--ink-3);
  background: #F1F5FA; border: 1px solid #DCE6F2; border-radius: 3px; padding: 0 4px;
  margin-left: 2px; white-space: nowrap;
}
.op-cell { white-space: pre-line; line-height: 1.5; color: var(--ink-3); font-size: 12px; }

/* 选择框 */
input[type="checkbox"].pick { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }

/* ---------- 对比悬浮栏 ---------- */
.compare-bar {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 130%);
  z-index: 950; background: var(--navy-deep); color: #fff; border-radius: 6px;
  padding: 12px 18px; display: flex; align-items: center; gap: 18px; box-shadow: var(--shadow-lg);
  transition: transform .28s cubic-bezier(.2,.8,.3,1);
}
.compare-bar.show { transform: translate(-50%, 0); }

/* ---------- 模态弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 1000; background: rgba(16,26,40,.62);
  display: none; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto;
}
.modal-mask.open { display: flex; }
.modal {
  background: #fff; width: 100%; max-width: 980px; border-radius: 6px; box-shadow: var(--shadow-lg);
  animation: pop .22s ease;
}
@keyframes pop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; border-radius: 6px 6px 0 0; z-index: 3;
}
.modal-head h3 { font-size: 20px; }
.modal-close { width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); color: var(--ink-2); font-size: 18px; line-height: 1; }
.modal-close:hover { border-color: var(--blue); color: var(--blue); }
.modal-body { padding: 24px; }

/* 参数表（弹窗 / 对比） */
table.spec { width: 100%; border-collapse: collapse; font-size: 13px; }
table.spec th, table.spec td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
table.spec th { background: #F1F5FA; color: var(--navy); font-weight: 600; width: 170px; white-space: nowrap; }
table.spec td { color: var(--ink-2); white-space: pre-line; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 13px; }
table.cmp th, table.cmp td { border: 1px solid var(--line); padding: 9px 12px; vertical-align: top; text-align: left; }
table.cmp thead th { background: #F1F5FA; color: var(--navy); }
table.cmp td.diff { background: #FFF8E8; font-weight: 600; color: #8A5A00; }
table.cmp td.lbl { background: #F7F9FC; color: var(--navy); font-weight: 600; width: 150px; }

/* 占位图（MTF / 尺寸图）：产品详情弹窗已不再展示这两块占位，规则保留备查
.spec-ph {
  border: 1px dashed #B9CADD; border-radius: var(--radius); background: #F8FAFC;
  display: grid; place-items: center; color: var(--ink-3); font-size: 12.5px; text-align: center; padding: 20px;
}
*/
/* 产品详情弹窗：左列只保留系列代表图，单独成块时补一点卡片质感 */
.detail-figure { border-radius: var(--radius); box-shadow: var(--shadow); }
.detail-figure img { border-radius: calc(var(--radius) - 1px); }

/* 规格书缺失占位：未上传 PDF 的型号用灰色占位替换原「下载 / 查看规格书」按钮 */
.spec-none {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  background: var(--bg-alt); border: 1px dashed var(--line);
  cursor: default;
}
/* 详情弹窗底部按钮行内，占位与「立即询价」按钮等宽等高 */
#detailBody .spec-none { height: 46px; padding: 0 24px; font-size: 14px; }

/* ---------- 手风琴 ---------- */
.acc-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 12px; overflow: hidden; }
.acc-q { width: 100%; text-align: left; background: none; border: none; padding: 18px 22px; font-size: 15px; font-weight: 600; color: var(--navy); display: flex; justify-content: space-between; gap: 16px; }
.acc-q .ic { color: var(--blue); transition: transform .22s; flex: none; }
.acc-item.open .acc-q .ic { transform: rotate(45deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.acc-a > div { padding: 0 22px 20px; color: var(--ink-2); }

/* ---------- 时间线 ---------- */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--blue), #D6E3F2); }
.tl-item { position: relative; padding-bottom: 30px; }
.tl-item::before { content: ''; position: absolute; left: -28px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); }
.tl-year { font-family: 'Inter', sans-serif; font-weight: 700; color: var(--blue); font-size: 15px; }

/* ---------- 表单 ---------- */
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 7px; }
.field label .req { color: #DC2626; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px;
  font-size: 14px; font-family: inherit; color: var(--ink); background: #fff; outline: none; transition: border-color .18s, box-shadow .18s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.14); }
.field .err { color: #DC2626; font-size: 12px; margin-top: 5px; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #DC2626; }
.field.invalid .err { display: block; }

/* ---------- 页脚 ---------- */
.site-foot { background: var(--navy-deep); color: rgba(255,255,255,.7); padding: 64px 0 0; }
.site-foot h4 { color: #fff; font-size: 14px; letter-spacing: 1px; margin-bottom: 16px; }
.site-foot a { color: rgba(255,255,255,.68); font-size: 13.5px; display: block; padding: 5px 0; }
.site-foot a:hover { color: #fff; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding: 20px 0; font-size: 12.5px; color: rgba(255,255,255,.5); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.social { display: flex; gap: 10px; }
.social a { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.22); border-radius: 3px; display: grid; place-items: center; padding: 0; }
.social a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }

/* ---------- 悬浮工具（原悬浮「获取报价」按钮已全站移除，仅保留回到顶部） ---------- */
.to-top {
  position: fixed; right: 24px; bottom: 40px; z-index: 940; width: 46px; height: 46px;
  border: 1px solid var(--line); background: #fff; border-radius: 4px; color: var(--navy);
  opacity: 0; pointer-events: none; transition: all .25s; box-shadow: var(--shadow-sm);
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- 滚动渐入 ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; top: 86px; transform: translate(-50%, -18px); z-index: 1200;
  background: var(--navy-deep); color: #fff; padding: 11px 20px; border-radius: 4px;
  font-size: 13.5px; opacity: 0; pointer-events: none; transition: all .25s; box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 搜索框 ---------- */
.search-box { position: relative; }
.search-box input { height: 50px; padding-left: 46px; font-size: 15px; }
.search-box .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
mark { background: rgba(59,130,246,.2); color: var(--navy); padding: 0 2px; border-radius: 2px; }

/* ---------- 粘性系列导航 ---------- */
.subnav {
  position: sticky; top: var(--nav-h); z-index: 880; background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(8px);
}
/* 一级系列：6 个大方块，一行排开，端庄醒目 */
.subnav .inner {
  display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 10px;
  overflow-x: auto; padding: 12px 0;
}
/* 仅作用于一级系列卡片，避免影响第二行二级系列胶囊 */
.subnav .inner > a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-align: center;
  min-height: 62px; padding: 9px 12px; line-height: 1.3;
  font-size: 15px; font-weight: 600; color: var(--navy);
  background: #D6E4FA; border: 1px solid rgba(59, 130, 246, .25); border-left: 3px solid #3B82F6; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); white-space: normal;
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
/* 一级系列可点击提示：型号数 + 右箭头，避免卡片看着像说明标签 */
.subnav .inner > a .l1-n {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 400; letter-spacing: .2px; color: var(--ink-2);
}
.subnav .inner > a .l1-n::after { content: '›'; font-size: 13px; line-height: 1; }
.subnav .inner > a:hover {
  color: var(--blue); border-color: rgba(59, 130, 246, .45); border-left-color: #2563EB; background: #fff;
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(59, 130, 246, .16);
}
.subnav .inner > a:hover .l1-n { color: var(--blue); }
.subnav .inner > a.active {
  color: #fff; border-color: transparent;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .1) 0 2px, rgba(255, 255, 255, 0) 2px 9px),
    var(--grad-brand);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .3);
}
.subnav .inner > a.active .l1-n { color: rgba(255, 255, 255, .8); }

/* 第二行：二级系列导航（跟随当前一级系列切换） */
.subnav .inner2 {
  display: flex; align-items: center; gap: 6px; overflow-x: auto;
  padding: 0 0 10px; margin-top: -2px;
}
.subnav .inner2::before {
  content: '二级系列'; flex: none; font-size: 11.5px; color: var(--ink-3);
  letter-spacing: .5px; padding-right: 4px;
}
.subnav .inner2 a {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 6px 14px; font-size: 12.5px; color: var(--ink-2); background: #fff;
  border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; transition: all .18s;
}
.subnav .inner2 a:hover { border-color: var(--blue); color: var(--blue); }
.subnav .inner2 a.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.subnav .inner2 a.dim { color: var(--ink-3); background: var(--bg-alt); }
/* 型号数量：做成独立小胶囊徽标并与系列名同轴居中，避免看起来像上标、或压到胶囊边缘 */
.subnav .inner2 a .n {
  flex: none; font-size: 11px; line-height: 1; padding: 3px 7px;
  border-radius: 999px; background: rgba(30, 58, 95, .07); color: var(--ink-2); opacity: 1;
}
.subnav .inner2 a.dim .n { background: rgba(30, 58, 95, .05); color: var(--ink-3); }
.subnav .inner2 a.active .n { background: rgba(255, 255, 255, .24); color: #fff; }

/* 二级系列单元：代表图 + 选型小贴士并排，表格在下方通栏显示 */
.sub-head { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }

/* 系列代表图自适应显示（二级系列块 / 二级系列独立页 / 详情弹窗左列）：
   容器高度随原图比例伸缩、图片按原比例完整显示，不再被 4:3 固定框裁掉上下或左右；
   缺图时容器仍走原有的占位框（网格纹理 + 系列代表图角标）不受影响 */
.sub-head .img-ph.has-img,
.sp-intro .img-ph.has-img,
.detail-figure.has-img {
  aspect-ratio: auto; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.sub-head .img-ph.has-img img,
.sp-intro .img-ph.has-img img,
.detail-figure.has-img img {
  width: 100%; height: auto; object-fit: contain; padding: 12px;
}
.sub-head .img-ph.has-img img { max-height: 320px; }
.sp-intro .img-ph.has-img img { max-height: 420px; }
.detail-figure.has-img img { max-height: 46vh; }
/* 图片模式下隐藏占位网格纹理与 data-label 角标，避免压在图片上 */
.sub-head .img-ph.has-img::before,
.sp-intro .img-ph.has-img::before,
.detail-figure.has-img::before,
.sub-head .img-ph.has-img::after,
.sp-intro .img-ph.has-img::after,
.detail-figure.has-img::after { display: none; }

/* 即将推出的二级系列：只占一条紧凑提示（系列名 + 即将推出徽标），不再铺开成完整卡片 */
.soon-list { display: grid; gap: 12px; }
.soon-band {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--bg-alt);
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.soon-name { font-family: 'Montserrat', 'Noto Sans SC', sans-serif; font-size: 17px; font-weight: 700; color: var(--navy); }
.soon-en { margin-left: 10px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 1.2px; text-transform: uppercase; }
/* 二级系列独立页中，提示条与上方面包屑之间留出间距 */
.sub-page .soon-band { margin-top: 18px; }

/* 二级系列文字区内的「选型小贴士」：浅底提示条，与「系列简介」正文拉开层级
   （一级系列独立视图与二级系列独立页共用同一套文案层级） */
.sub-tip {
  margin: 14px 0 0; padding: 10px 14px; font-size: 13.5px; line-height: 1.8; color: var(--ink-2);
  background: var(--bg-alt); border-left: 3px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0;
}

/* 产品中心内容区留白收紧：一级系列标题行已去掉，区块上下内边距由全局 96px 收紧到 40px，
   页面首个区块再减一档，连续下滑浏览全部产品时不再出现大段空白 */
.prod-main .sec { padding: 40px 0; }
.prod-main #seriesPage.sec, .prod-main #searchResult.sec, .prod-main #seriesMount > .sec:first-child { padding-top: 26px; }

/* 系列代表图缺图时隐藏占位框的改动已退回（保留备查）：缺图仍显示占位框与「系列代表图」标签
.sub-head .img-ph.fig-missing,
.sp-intro .img-ph.fig-missing { display: none; }
.sub-head.tight, .sp-intro.tight { grid-template-columns: minmax(0, 1fr); }
*/

/* ---------- 二级系列独立页（同页切换视图，不跳转） ---------- */
.sp-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }
.sp-crumbs a { color: var(--ink-2); }
.sp-crumbs a:hover { color: var(--blue); }
.sp-crumbs i { font-style: normal; color: #C3CEDC; }
.sp-crumbs em { font-style: normal; color: var(--navy); font-weight: 600; }

.sp-title-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.sp-title-row .en { font-size: 13px; color: var(--ink-3); letter-spacing: 1px; font-weight: 500; }

/* 系列简介区：左代表图 + 右简介与规格概览 */
.sp-intro { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 26px; }
.sp-intro .img-ph { border-radius: var(--radius); box-shadow: var(--shadow); }

.sp-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 10px;
}
.sp-label::before {
  content: ''; width: 16px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), rgba(59, 130, 246, .15));
}
.sp-desc { color: var(--ink-2); font-size: 14.5px; line-height: 1.85; margin: 0; }
.sp-desc-2 { margin-top: 10px; color: var(--ink-3); font-size: 13.5px; }

.sp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.sp-fact { padding: 12px 14px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); }
.sp-fact .k { display: block; font-size: 12px; color: var(--ink-3); letter-spacing: .5px; }
.sp-fact .v { display: block; margin-top: 5px; font-size: 15px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }

.sp-chips { margin-top: 20px; }

/* ---------- 型号分页 ---------- */
.pager-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pg-btn {
  min-width: 36px; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}
.pg-btn:hover:not([disabled]) { border-color: var(--blue); color: var(--blue); box-shadow: 0 4px 12px rgba(59, 130, 246, .15); }
.pg-btn.on { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, .26); }
.pg-btn[disabled] { opacity: .45; cursor: not-allowed; }
.pg-gap { padding: 0 2px; color: var(--ink-3); }
.pager-info { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- 一级系列独立视图 ---------- */
.sp-l1-head { margin-bottom: 34px; }
.sp-l1-desc { max-width: 900px; margin-top: 14px; }

/* ---------------------------------------------------------
   旧方案（已停用，保留备查）：宽屏 ≥1700px 时把二级系列导航做成
   页面左侧 fixed 悬浮面板。因门槛过高（多数窗口宽度不足）从未生效，
   现改用下方 ≥1200px 的「内容区左侧常驻竖栏」方案，故整块注释保留。
   --- 原始规则 ---
   @media (min-width: 1700px) {
     .subnav { backdrop-filter: none; }
     .subnav .inner2 {
       --side-w: min(220px, calc((100vw - 1280px) / 2 - 48px));
       position: fixed;
       left: max(16px, calc((100vw - 1280px) / 2 - var(--side-w) - 20px));
       top: calc(var(--nav-h) + 84px);
       width: var(--side-w);
       max-height: calc(100vh - var(--nav-h) - 130px);
       flex-direction: column; align-items: stretch; gap: 4px;
       padding: 16px 14px; margin: 0; overflow-y: auto;
       background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
       box-shadow: var(--shadow); transition: opacity .2s ease, visibility .2s ease;
     }
     .subnav .inner2.side-hidden { opacity: 0; visibility: hidden; }
     .subnav .inner2::before {
       content: attr(data-l1);
       display: block; font-size: 14px; font-weight: 700; color: var(--navy);
       letter-spacing: .5px; padding: 0 10px 12px; margin-bottom: 8px;
       border-bottom: 1px solid var(--line);
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     }
     .subnav .inner2 a {
       display: block; padding: 12px 12px; border: none; border-left: 3px solid transparent;
       border-radius: var(--radius-sm); text-align: left; white-space: normal;
       font-size: 16px; line-height: 1.5;
     }
     .subnav .inner2 a:hover { background: var(--bg-alt); color: var(--blue); }
     .subnav .inner2 a.active { background: rgba(59,130,246,.1); color: var(--blue); border-left-color: var(--blue); }
     .subnav .inner2 a.dim { background: transparent; }
     .subnav .inner2 a .n {
       float: right; margin-left: 6px; font-size: 13px; color: var(--ink-3);
       padding: 0; background: transparent; border-radius: 0; line-height: inherit;
     }
   }
   --------------------------------------------------------- */

/* ---------- 二级系列导航：宽屏（≥1200px）内容区左侧常驻竖栏 ---------- */
@media (min-width: 1200px) {
  /* 顶部粘性栏只保留一级系列，二级系列横排那一行隐藏 */
  .subnav .inner2 { display: none; }

  /* 内容区改为「左侧竖栏 + 右侧内容」两列 */
  .prod-body {
    display: grid; grid-template-columns: 200px minmax(0, 1fr);
    gap: 28px; align-items: start;
  }
  /* 粘性定位：避让上方固定的主导航 + 粘性一级系列栏（约 151px），再留 16px 间距 */
  .prod-side { position: sticky; top: calc(var(--nav-h) + 100px); }

  /* 竖栏面板 */
  .side-nav {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 12px; margin: 0;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    max-height: calc(100vh - var(--nav-h) - 116px); overflow-y: auto;
  }
  /* 竖栏顶部标题：当前一级系列名 */
  .side-nav::before {
    content: attr(data-l1);
    display: block; font-size: 14px; font-weight: 700; color: var(--navy);
    letter-spacing: .5px; padding: 0 10px 12px; margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .side-nav a {
    display: block; padding: 11px 12px;
    border-left: 3px solid transparent; border-radius: var(--radius-sm);
    font-size: 15px; line-height: 1.5; color: var(--ink-2);
    transition: background .18s ease, color .18s ease, border-color .18s ease;
  }
  .side-nav a:hover { background: var(--bg-alt); color: var(--blue); }
  .side-nav a.active { background: rgba(59, 130, 246, .1); color: var(--blue); border-left-color: var(--blue); }
  .side-nav a.dim { color: var(--ink-3); }
  /* 竖栏内数量：靠右的纯文本，不使用横排模式的胶囊徽标 */
  .side-nav a .n { float: right; margin-left: 6px; font-size: 13px; color: var(--ink-3); }

  /* 内容列里的区块自带 .wrap（1280 容器），此处取消其最大宽度与内边距，
     避免内容被二次内缩到约 924px 而撑出左右拖动条 */
  .prod-main .wrap { max-width: none; padding-left: 0; padding-right: 0; }
}

/* 窄屏（<1200px）：左侧竖栏不参与布局，二级系列回到顶部粘性栏第二行 */
@media (max-width: 1199.98px) {
  .prod-side { display: none; }
}

/* ---------- 细分隔线组件 ---------- */
.kv { display: flex; gap: 10px; font-size: 13px; }
.kv .k { color: var(--ink-3); min-width: 62px; }
.kv .v { color: var(--ink); }

/* ---------- 联系页布局：联系渠道 + 地址 + 合作方式 ---------- */
/* 联系卡片内部：左侧联系渠道 + 右侧地址传真，同一张卡片内左右分栏 */
.contact-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; }
.contact-inner .contact-addr { border-left: 1px solid var(--line); padding-left: 40px; }
/* 联系渠道：标签在上、数值在下的双列排布，避免长邮箱/地址被挤压换行 */
.contact-card { padding: 28px 28px 30px; }
.contact-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
.contact-channels .ch { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.contact-channels .ch-full { grid-column: 1 / -1; }
.contact-channels .ch-k { font-size: 12px; letter-spacing: .4px; color: var(--ink-3); }
.contact-channels .ch-v { font-size: 15px; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.contact-channels a.ch-v:hover { color: var(--blue); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
/* 二维码：三列等宽；图片缺失时由 onerror 隐藏整项，不留空白框 */
.qr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.qr-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 14px 12px; text-align: center; }
.qr-item .qr-cap { font-size: 12px; letter-spacing: .4px; color: var(--ink-3); margin-bottom: 10px; }
.qr-item img { display: block; margin: 0 auto; height: 260px; width: auto; max-width: 100%; object-fit: contain; }
/* 窄屏：三列改为单列，二维码放大铺满卡片，便于手机直接扫码 */
@media (max-width: 860px) {
  .qr-grid { grid-template-columns: 1fr; gap: 14px; }
  .qr-item img { height: 260px; }
}
/* 地址：分行展示，数值独占整行，长地址不再出现「402- / 1」断行 */
.contact-addr { display: grid; gap: 18px; }
.contact-addr .row-k { font-size: 12px; letter-spacing: .4px; color: var(--ink-3); }
.contact-addr .row-v { font-size: 14px; line-height: 1.75; color: var(--ink); margin-top: 5px; }
/* 合作方式：四等分横条，带细分隔线 */
.coop-band { margin-top: 56px; }
.coop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.coop-grid > div { background: #fff; padding: 24px 26px; }
.coop-grid h4 { font-size: 15px; color: var(--navy); }
.coop-grid p { font-size: 13px; line-height: 1.7; color: var(--ink-2); margin-top: 8px; }
@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; gap: 26px; }
  .contact-inner .contact-addr { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
}
@media (max-width: 1024px) {
  .coop-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .contact-channels { grid-template-columns: 1fr; }
  .coop-grid { grid-template-columns: 1fr; }
  .coop-band { margin-top: 40px; }
}

/* =========================================================
   UI 视觉增强层（装饰 / 光影 / 交互反馈）
   说明：仅增强视觉表现，不改动任何模块结构与内容排布；
   本层置于响应式规则之前，窄屏适配仍由下方媒体查询覆盖
   ========================================================= */

/* 全站极细网格底纹，强化工业精密感 */
body {
  background-color: var(--white);
  background-image:
    radial-gradient(1100px 620px at 88% -10%, rgba(59, 130, 246, .07), rgba(59, 130, 246, 0) 62%),
    linear-gradient(rgba(30, 58, 95, .028) 1px, rgba(30, 58, 95, 0) 1px),
    linear-gradient(90deg, rgba(30, 58, 95, .028) 1px, rgba(30, 58, 95, 0) 1px);
  background-size: auto, 56px 56px, 56px 56px;
}

/* 文字选中与键盘聚焦 */
/* 文字选中：统一深蓝底白字，浅色区与深色区块都能看清 */
::selection { background: rgba(37, 99, 235, .92); color: #fff; }
::-moz-selection { background: rgba(37, 99, 235, .92); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--radius-sm); }

/* 全局滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #C7D4E4, #AFC2D9); border-radius: 999px; border: 2px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #AFC2D9, #93AECD); }
::-webkit-scrollbar-track { background: #F1F5F9; }

/* 顶部导航：底部渐变发丝线 + 悬浮阴影 + 品牌标发光 */
.site-nav { box-shadow: 0 1px 0 rgba(226, 232, 240, .9), 0 8px 26px rgba(16, 32, 55, .05); }
.site-nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0), rgba(59, 130, 246, .55) 28%, rgba(30, 58, 95, .85) 62%, rgba(59, 130, 246, 0));
}
.brand-mark { border-radius: var(--radius); background: var(--grad-brand); box-shadow: 0 6px 16px rgba(37, 99, 235, .32); }
.nav-links a.active::after { border-radius: 999px; background: linear-gradient(90deg, var(--blue), rgba(59, 130, 246, .25)); }

/* 内页 Banner 渐变底 */
.page-hero { background: linear-gradient(135deg, #16293F 0%, #1E3A5F 58%, #24507E 100%); }
.page-hero h1 { font-size: 44px; letter-spacing: -.4px; }

/* 首页 Hero：径向氛围光 + 网格纹理 + 缓慢漂移光斑 */
.hero {
  min-height: 660px;
  background: radial-gradient(1250px 720px at 80% 16%, #1E4B7A 0%, #16293F 52%, #0F2136 100%);
}
.hero::before {
  content: ''; position: absolute; z-index: 1; right: -180px; top: -240px; width: 800px; height: 800px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(59, 130, 246, .3), rgba(59, 130, 246, 0) 62%);
  animation: heroOrb 16s ease-in-out infinite;
}
@keyframes heroOrb {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-46px, 34px, 0); }
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, rgba(255, 255, 255, 0) 1px);
  background-size: 64px 64px, 64px 64px;
  -webkit-mask-image: radial-gradient(78% 62% at 52% 38%, #000 42%, transparent 100%);
  mask-image: radial-gradient(78% 62% at 52% 38%, #000 42%, transparent 100%);
}
.hero h1 { font-size: 72px; line-height: 1.14; letter-spacing: -.6px; text-shadow: 0 10px 44px rgba(0, 0, 0, .3); }
.hero .eyebrow { font-size: 13.5px; }
.hero .lead { font-size: 22px; max-width: 720px; }
.hero .btn { font-size: 16px; height: 52px; padding: 0 30px; }
.hero-tags span { background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.hero-tags span:hover { background: rgba(59, 130, 246, .3); border-color: rgba(150, 195, 255, .85); transform: translateY(-2px); }

/* 数据统计：深底渐变 + 数字微光 */
.stats-band { background: var(--grad-deep); }
.stat-num { font-size: 54px; letter-spacing: -.5px; text-shadow: 0 2px 20px rgba(59, 130, 246, .45); }
.stat-label { font-size: 16.5px; }

/* 卡片：悬浮更明显，描边转蓝，系列图轻微推近 */
.card { transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, border-color .28s ease; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(59, 130, 246, .35); }
.series-card .img-ph img { transition: transform .55s cubic-bezier(.2, .7, .3, 1); }
.series-card:hover .img-ph img { transform: scale(1.07); }
.series-card .go { transition: transform .25s ease; }
.series-card:hover .go { transform: translateX(4px); }
.badge { border-radius: var(--radius-sm); }

/* 标签胶囊 / 横向滚动条 */
.chip { transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .2s ease, border-color .22s ease; }
.chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(59, 130, 246, .18); }
.hscroll::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #C7D4E4, #AFC2D9); }

/* 弹窗与折叠面板 */
.modal { border-radius: var(--radius-lg); box-shadow: 0 32px 84px rgba(9, 20, 35, .38); }
.modal-head { background: linear-gradient(180deg, #F8FAFC, #fff); }
.acc-item { transition: border-color .25s ease, box-shadow .25s ease; }
.acc-item:hover { border-color: rgba(59, 130, 246, .35); box-shadow: var(--shadow-sm); }

/* 页脚：渐变深底 + 社媒按钮发光 */
.site-foot { background: linear-gradient(180deg, #132539 0%, #0E1C2C 100%); }
/* 页脚文字滚动渐入：时长放慢并改用更柔的缓动（阶梯延迟由 js 逐列设置） */
.site-foot .reveal { transition-duration: 1s; transition-timing-function: cubic-bezier(.22, .61, .36, 1); }
.social a { border-radius: var(--radius); transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.social a:hover { background: rgba(59, 130, 246, .26); border-color: rgba(150, 195, 255, .7); transform: translateY(-2px); }

/* 滚动渐入更柔和 */
.reveal { transform: translateY(26px) scale(.985); transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1); }

/* 无障碍：减少动态偏好时关闭新增动画 */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .btn-primary::after, .btn-navy::after { display: none; }
}

/* ---------- 响应式（PC 优先，兼顾平板/手机） ---------- */
@media (max-width: 1024px) {
  .sec-title { font-size: 27px; }
  .hero h1 { font-size: 46px; }
  .hero .lead { font-size: 19px; }
  .hero-tags span { font-size: 14px; padding: 7px 14px; }
  .page-hero h1 { font-size: 32px; }
  .stat-num { font-size: 40px; }
  /* 一级系列大方块：窄屏改为 3 列两行，避免 6 块挤压与长系列名折行错位 */
  .subnav .inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow-x: visible; }
  .subnav a { font-size: 13.5px; min-height: 54px; padding: 8px 10px; }
  /* 二级系列独立页：代表图缩窄，规格概览改两列 */
  .sp-intro { grid-template-columns: 320px minmax(0, 1fr); gap: 24px; }
  .sp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .wrap, .wrap-sm { padding: 0 20px; }
  .sec { padding: 60px 0; }
  .burger { display: block; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--line); padding: 10px 16px 18px; gap: 2px;
    transform: translateY(-140%); visibility: hidden;
    transition: transform .3s ease, visibility .3s ease; box-shadow: var(--shadow);
  }
  /* 关闭态彻底不可见，避免部分手机浏览器抽屉残留白块遮挡页面 */
  .nav-links.open { transform: none; visibility: visible; transition: transform .3s ease; }
  .nav-links a { padding: 12px 8px; border-bottom: 1px solid #F1F5F9; }
  .nav-links a.active::after { display: none; }
  .nav-phone { display: none; }
  /* 语言切换：窄屏从顶栏移入汉堡抽屉（由 js/main.js 搬移节点），顶栏只保留 Logo / 报价 / 菜单 */
  .nav-cta > .lang-switch { display: none; }
  .nav-links .lang-switch {
    display: inline-flex; align-self: flex-start; margin: 14px 8px 0;
    border-color: rgba(30, 58, 95, .22);
  }
  .nav-links .lang-switch a { padding: 7px 16px; border-bottom: 0; font-size: 13.5px; color: var(--ink-2); }
  .nav-links .lang-switch a.on { background: var(--navy); color: #fff; }
  /* 一级系列导航：手机端 2 列三行；不再吸顶，避免占掉半屏高度 */
  .subnav { position: static; }
  .subnav .inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 0 4px; }
  .subnav a { font-size: 13px; min-height: 46px; padding: 8px; }
  .hero { min-height: 560px; }
  .hero h1 { font-size: 36px; }
  .hero .lead { font-size: 17px; }
  .hero-tags span { font-size: 13px; padding: 6px 12px; }
  .hscroll > * { flex-basis: 250px; }
  .to-top { right: 16px; }
  .foot-bottom { flex-direction: column; }
  /* 页脚多栏在窄屏改为两列 */
  .site-foot .wrap > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* 询价表单两列改为单列 */
  #inquiryForm .grid { grid-template-columns: 1fr !important; }
  /* 详情弹窗左右布局改为上下 */
  #detailBody > .grid { grid-template-columns: 1fr !important; }
  /* 二级系列：代表图与选型小贴士改为上下排列 */
  .sub-head { grid-template-columns: 1fr; gap: 16px; }
  .subnav .inner2::before { display: none; }
  /* 二级系列独立页：代表图与简介改为上下排列 */
  .sp-intro { grid-template-columns: 1fr; gap: 18px; }
  .sp-title-row { align-items: flex-start; }

  /* ---------- 产品规格表：手机端转为卡片列表 ----------
     宽表在 390px 屏只能看到 1/3 列，「详情 / 下载」要滑到最右才出现。
     这里把每行改成一张卡片：型号与勾选同排，参数两列并排，底部两个操作按钮等宽。
     data-label 由 js/products.js、js/spacecom.js 渲染时写入。 */
  .tbl-scroll { overflow-x: visible; border: 0; border-radius: 0; }
  table.ptable { min-width: 0; }
  table.ptable thead { display: none; }
  table.ptable, table.ptable tbody { display: block; width: 100%; }
  table.ptable tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    margin-bottom: 10px; padding: 14px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  table.ptable tbody tr:hover { background: #fff; }
  table.ptable td { display: block; padding: 0; border: 0; }
  table.ptable td.col-pick { order: 0; flex: 0 0 auto; }
  table.ptable td.col-model { order: 1; flex: 1 1 auto; min-width: 0; }
  table.ptable td.col-model .model-cell { font-size: 15px; border-bottom: 0; word-break: break-all; }
  table.ptable td.col-param {
    order: 2; flex: 0 0 calc(50% - 5px); min-width: 0;
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 7px 10px; background: var(--bg-alt); border-radius: 4px; font-size: 12.5px;
    overflow-wrap: anywhere;
  }
  table.ptable td.col-param::before {
    content: attr(data-label); flex: none; color: var(--ink-3); font-size: 11.5px;
  }
  table.ptable td.col-act { order: 3; flex: 1 1 calc(50% - 5px); margin-top: 2px; }
  table.ptable td.col-act .btn { width: 100%; }
  table.ptable td.col-act .spec-none { display: block; width: 100%; text-align: center; }
  /* 对比弹窗内的宽表仍需横向滚动，保持原样 */
  .tbl-scroll.tbl-cmp { overflow-x: auto; border: 1px solid var(--line); }
  .tbl-scroll.tbl-cmp table.cmp { min-width: 720px; }
}
@media (max-width: 560px) {
  .site-foot .wrap > .grid { grid-template-columns: 1fr !important; }
}

/* =========================================================
   工具类兜底（当 Tailwind CDN 不可用、以 file:// 直接打开时保证布局可用）
   取值与 Tailwind 默认间距刻度一致，若 Tailwind 正常加载不会产生冲突
   ========================================================= */
.grid { display: grid; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.block { display: block; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-7 { gap: 1.75rem; }
.gap-8 { gap: 2rem; }
.gap-9 { gap: 2.25rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; }
.mt-9 { margin-top: 2.25rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.mb-2 { margin-bottom: .5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }

/* =========================================================
   深色顶栏（全站统一）+ 首页专属深底背景与首屏铺满
   背景色 R8 G10 B31 = #080A1F；导航栏 R2 G6 B20 = #020614
   顶栏配色全站生效；深底背景与首屏铺满仍仅限首页
   ========================================================= */
/* 顶栏统一深底 + 浅色文字：所有页面与首页保持同一配色（按钮样式不动） */
.site-nav { background: #020614; border-bottom-color: rgba(255, 255, 255, .08); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.site-nav .brand-name { color: #fff; }
.site-nav .brand-sub { color: rgba(255, 255, 255, .45); }
.site-nav .nav-phone { color: rgba(255, 255, 255, .82); }
/* 仅桌面端导航链接切浅色；窄屏抽屉导航仍为白底深字，避免文字看不见 */
@media (min-width: 861px) {
  .site-nav .nav-links a { color: rgba(255, 255, 255, .76); }
  .site-nav .nav-links a:hover,
  .site-nav .nav-links a.active { color: #fff; }
  .site-nav .nav-links a.active::after { background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .15)); }
}

/* 首页专属：深底背景 + 首屏图占满整屏 */
.page-home { background: #080A1F; }
/* 首屏高度铺满视口，背景图随 hero 撑满整屏 */
.page-home .hero { min-height: 100vh; background: #080A1F; }
/* 覆盖图上的压暗渐变随底色一并换成同色，保证左暗右亮的文字可读性 */
.page-home .hero-bg::after { background: linear-gradient(90deg, rgba(8, 10, 31, .86) 0%, rgba(8, 10, 31, .55) 55%, rgba(8, 10, 31, .16) 100%); }

/* 首页整屏分页：每个区块占满一屏、内容垂直居中（仅 PC 端，窄屏保持自然滚动） */
@media (min-width: 861px) {
  .page-home .sec,
  .page-home .stats-band,
  .page-home .site-foot {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* 首页页脚：单独占满一屏时的排版铺开（放大字号 / 行距，法律栏贴到屏幕底部） */
@media (min-width: 861px) {
  /* .wrap 吸收整屏剩余高度：底部法律栏贴边，链接列在剩余空间内垂直居中 */
  .page-home .site-foot > .wrap {
    display: flex; flex-direction: column; flex: 1 1 auto;
    /* 页脚自身已有 64px 上内边距，这里只补足避开固定导航的差额，避免上下留白不均 */
    padding-top: 8px;
  }
  .page-home .site-foot .wrap > .grid { flex: 1 1 auto; align-content: center; }
  .page-home .site-foot .foot-bottom {
    flex: 0 0 auto; margin-top: 0; padding: 24px 0 30px;
    font-size: 13.5px;
  }
  /* 列标题与链接行距放大，内容更饱满 */
  .page-home .site-foot h4 { font-size: 17px; letter-spacing: 1.4px; margin-bottom: 30px; }
  .page-home .site-foot a { font-size: 15.5px; padding: 16px 0; }
  /* 品牌区：logo 与说明文字同步放大（覆盖 HTML 内联字号需 !important） */
  .page-home .site-foot .brand-logo { height: 42px; }
  .page-home .site-foot p { font-size: 15px !important; line-height: 1.95 !important; }
  .page-home .site-foot .btn { height: 46px; font-size: 14.5px; }
  .page-home .site-foot .social a { width: 42px; height: 42px; }
}

/* =========================================================
   仅首页：整屏分页内容压缩（PC 端）
   目标：各区块内容高度 ≤ 视口高度，滚轮整屏翻页时区块内不出现滚动
   ========================================================= */
@media (min-width: 861px) {
  /* 区块内边距、标题与装饰线（整体放大，减少整屏留白） */
  /* 上内边距留出固定导航高度，避免整屏翻页后标题被导航栏遮挡 */
  .page-home .sec { padding: calc(var(--nav-h) + 8px) 0 32px; }
  /* 内容区自动撑满一屏：.wrap 变列 flex，末尾内容块吸收剩余高度，消除整屏底部留白 */
  .page-home .sec > .wrap { display: flex; flex-direction: column; flex: 1 1 auto; }
  .page-home .sec > .wrap > :not(:last-child) { flex: 0 0 auto; }
  .page-home .sec > .wrap > :last-child { flex: 1 1 auto; }
  .page-home .sec-title { font-size: 36px; }
  .page-home .sec-sub { font-size: 17px; line-height: 1.75; margin-top: 12px; }
  .page-home .rule { margin: 12px 0 18px; }
  .page-home .eyebrow { font-size: 12px; letter-spacing: 2.4px; }
  /* 首页容器：宽屏下加宽但保留适当左右留白，避免卡片与屏幕边缘贴死
     1760px 上限 + 72px 内边距，宽度 ≤1280 时与原布局完全一致 */
  .page-home .wrap { max-width: 1760px; padding-left: 72px; padding-right: 72px; }

  /* 首页导航栏例外：回到全局 1280px 居中版心，避免 logo 与 CTA 贴到屏幕边缘，
     位置与其他页面保持一致（其余首页区块仍保持铺满视口的效果不变） */
  .page-home .site-nav .wrap { max-width: 1280px; padding-left: 32px; padding-right: 32px; }

  /* 3. 产品系列：Bento 拼图（左区 ＝ 1 张大卡 + 2 张小卡，右区 ＝ 3 张纵向卡） */
  .page-home .series-bento { grid-template-columns: 1.62fr 1fr; grid-template-rows: 1fr; gap: 18px; margin-top: 22px; }
  .page-home .sb-main { grid-template-columns: 1fr; grid-template-rows: 1.55fr 1fr; gap: 18px; }
  .page-home .sb-pair { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 18px; }
  .page-home .sb-side { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 18px; }
  /* 卡片：代表图铺满整卡，文字浮在图上（上下浅色渐变保证可读） */
  .page-home .series-bento .series-card { height: 100%; }
  .page-home .series-bento .series-card .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; }
  /* 代表图自适应卡片大小：contain 保证产品完整不裁切，图片靠右对齐，
     把系列图左侧的留白压到文字区，避免产品被卡片边缘或角标挡住。 */
  .page-home .series-bento .series-card .img-ph img {
    object-fit: contain;
    object-position: 100% 62%;
  }
  .page-home .series-bento .series-card:hover .img-ph img { transform: scale(1.04); }
  .page-home .series-bento .series-card .img-ph::after { display: none; }
  /* 去掉占位网格纹理与浅蓝底色，改纯白，避免图片未铺满时露出网格 */
  .page-home .series-bento .series-card .img-ph { background: #FFFFFF; }
  .page-home .series-bento .series-card .img-ph::before { display: none; }
  .page-home .series-bento .sb-info {
    position: absolute; inset: 0; z-index: 4; padding: 16px 18px;
    display: flex; flex-direction: column; justify-content: space-between;
    /* 仅顶部（系列名）与底部（查看系列/款数）用浅色蒙版保证可读，中间完全透出产品图 */
    background: linear-gradient(180deg,
      rgba(255,255,255,.94) 0px, rgba(255,255,255,.6) 44px, rgba(255,255,255,0) 92px,
      rgba(255,255,255,0) calc(100% - 50px), rgba(255,255,255,.88) 100%);
  }
  .page-home .series-bento .series-card h3 { font-size: 18px; line-height: 1.35; }
  .page-home .series-bento .sb-hero h3 { font-size: 24px; }
  .page-home .series-bento .series-card .en { font-size: 11.5px; }
  .page-home .series-bento .sb-desc { display: none; }
  /* 款数 / 即将推出 靠左紧跟在「查看系列」后，避开右下角的产品主体；浅色角标提高对比度 */
  .page-home .series-bento .sb-line { margin-top: 0; justify-content: flex-start; gap: 10px; }
  .page-home .series-bento .series-card .badge-soon { background: rgba(255,255,255,.94); border-color: rgba(59,130,246,.35); }
  .page-home .series-bento .series-card .go, .page-home .series-bento .series-card .badge { font-size: 12.5px; }

  /* 4. 热门标杆型号：卡片加宽缩短（高度由内容决定，不拉伸），参数双列排布，补充典型应用文案 */
  .page-home #featuredScroll { margin-top: 22px; align-items: center; }
  .page-home #featuredScroll > * { flex: 0 0 352px; }
  .page-home #featuredScroll .card { display: flex; flex-direction: column; height: auto; }
  .page-home #featuredScroll .img-ph { flex: 0 0 156px; height: 156px; min-height: 0; aspect-ratio: auto; background: #fff; }
  /* 标杆型号卡：产品图完整显示不裁切（原来 cover 会把镜头上下切掉） */
  .page-home #featuredScroll .img-ph img { object-fit: contain; object-position: center; }
  .page-home #featuredScroll .card-body { flex: 0 0 auto; padding: 14px 18px; }
  .page-home #featuredScroll .card-body > div { font-size: 13px !important; }
  .page-home #featuredScroll .feat-kv { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin-top: 8px; }
  .page-home #featuredScroll .kv { margin-bottom: 2px !important; }
  .page-home #featuredScroll .feat-apply { margin-top: 8px; padding-top: 8px; }
  .page-home #featuredScroll .feat-apply p { margin-top: 6px; }
  .page-home #featuredScroll .card-body > .flex { margin-top: 12px; }

  /* 5. 行业应用：两行「1 大 1 小」镜像错位卡片，两行撑满剩余高度，避免居中留白（结构见 index.html 的 .app-grid / .app-row / .app-tile） */
  .page-home .app-grid { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
  /* 第 1 行：大卡在左；第 2 行：大卡在右（与参考图错位排布一致） */
  .page-home .app-row { grid-template-columns: 1.68fr 1fr; gap: 16px; min-height: 0; }
  .page-home .app-row-b { grid-template-columns: 1fr 1.68fr; }
  .page-home .app-tile { height: 100%; min-height: 0; }
  /* 悬停微抬（特异性需高于 .reveal.in 的 transform:none） */
  .page-home .app-row .app-tile:hover { transform: translateY(-3px); }
  .page-home .app-panel { padding: 18px 20px; }
  /* 应用说明文案整体放大，便于阅读 */
  .page-home .app-panel h3 { font-size: 28px; margin-top: 6px; }
  .page-home .app-panel p { font-size: 17.5px; line-height: 1.62; margin-top: 7px; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .page-home .app-chips { margin-top: 10px; }
  .page-home .app-panel .chip { font-size: 15px; padding: 3px 10px; height: 30px; }
  .page-home .app-label { left: 20px; bottom: 16px; font-size: 28px; }
  /* 大卡标题适当放大，形成主次关系 */
  .page-home .app-row > .app-tile:first-child .app-label,
  .page-home .app-row-b > .app-tile:last-child .app-label { font-size: 34px; }
  .page-home .app-row > .app-tile:first-child .app-panel h3,
  .page-home .app-row-b > .app-tile:last-child .app-panel h3 { font-size: 32px; }

  /* 6. OEM / ODM 定制：左主图与右能力卡同高对齐
     主图与能力卡图片统一绝对定位铺满容器（object-fit: cover 裁切），图片自身比例不再参与高度计算，
     区块可随整屏剩余高度收缩，任何比例的图片都不会把整块撑到超过一屏 */
  .page-home .custom-grid { grid-template-columns: 1.15fr 1fr !important; grid-template-rows: 1fr !important; align-items: stretch !important; gap: 32px !important; margin-top: 14px !important; min-height: 0; }
  .page-home .custom-grid > .img-ph { position: relative; min-height: 0; }
  .page-home .custom-grid > .img-ph.ratio-169 { aspect-ratio: auto; }
  .page-home .custom-grid > .img-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .page-home .cap-list { grid-template-rows: repeat(3, minmax(0, 1fr)); height: 100%; gap: 12px; }
  /* 3 张能力卡：图片铺满整张卡片当背景，文字直接写在图内（左侧深色渐变蒙版保证可读） */
  .page-home .cap-list .card { position: relative; overflow: hidden; min-height: 96px; }
  .page-home .cap-list .card > .grid { display: flex !important; flex-direction: column; align-items: stretch !important; height: 100%; position: relative; }
  .page-home .cap-list .card > .grid > .img-ph { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
  .page-home .cap-list .card > .grid > .img-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* 隐藏占位网格纹理与 data-label 角标，避免压在照片上 */
  .page-home .cap-list .card > .grid > .img-ph::before,
  .page-home .cap-list .card > .grid > .img-ph::after { display: none; }
  .page-home .cap-list .card-body {
    position: relative; z-index: 1; flex: 1 1 auto;
    padding: 20px 20px 20px 26px !important;
    display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(90deg,
      rgba(8,17,33,.9) 0%, rgba(8,17,33,.78) 46%, rgba(8,17,33,.34) 78%, rgba(8,17,33,0) 100%);
  }
  /* 文字层级：标题 30px 白色粗体 > 说明 18px 半透明白字；正文最多 3 行防止卡片内溢出 */
  .page-home .cap-list h3 { font-size: 30px !important; letter-spacing: .3px; color: #fff; max-width: 84%; }
  .page-home .cap-list p { font-size: 18px !important; line-height: 1.62; margin-top: 9px !important; color: rgba(255,255,255,.88) !important; max-width: 84%;
    -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

  /* OEM/ODM 定制区：整块改深色底，标题与说明转白色，与上方深色区块同一视觉体系 */
  .page-home .custom-sec { background: var(--navy-deep); }
  .page-home .custom-sec .eyebrow { color: #8FC0F5; }
  .page-home .custom-sec .rule { background: rgba(255,255,255,.28); }
  .page-home .custom-sec .sec-title { font-size: 38px; color: #fff; }
  .page-home .custom-sec .sec-sub { font-size: 17.5px; line-height: 1.6; margin-top: 10px; color: rgba(255,255,255,.82); }
  /* 深底上的描边按钮需反色，否则白底描边不可见 */
  .page-home .custom-sec .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
  .page-home .custom-sec .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
  .page-home .custom-sec .rule { margin: 10px 0 14px; }
  .page-home .custom-sec .btn { height: 42px; }

  /* 7. 新闻资讯：头条主图抬高、右列卡片拉伸同高 */
  .page-home .news-grid { grid-template-rows: 1fr; gap: 36px; margin-top: 26px; align-items: stretch !important; }
  .page-home .news-head { display: flex; flex-direction: column; }
  .page-home .news-head .img-ph { flex: 1 1 auto; min-height: 260px; height: auto; aspect-ratio: auto; }
  .page-home .news-head .card-body { flex: 0 0 auto; padding: 22px 24px; }
  .page-home .news-head h3 { font-size: 22px !important; margin-top: 14px !important; }
  .page-home .news-head p { font-size: 14.5px !important; margin-top: 12px !important; }
  .page-home .news-list { grid-template-rows: repeat(4, minmax(0, 1fr)); height: 100%; }
  .page-home .news-list .card { padding: 22px 24px !important; display: flex; flex-direction: column; justify-content: center; }
  .page-home .news-list h4 { font-size: 17.5px !important; margin-top: 12px !important; }
  .page-home .news-list .badge, .page-home .news-list span { font-size: 13px; }

  /* 页脚：加大行距与间距，避免整屏大片空白 */
  .page-home .site-foot { padding-top: 92px; }
  .page-home .site-foot h4 { font-size: 15px; margin-bottom: 20px; }
  .page-home .site-foot a { font-size: 14.5px; padding: 8px 0; }
  .page-home .foot-bottom { margin-top: 60px; padding: 26px 0; font-size: 13.5px; }
}

/* =========================================================
   仅行业应用页（body.page-apps）：宽屏下容器铺满视口，图文整体放大
   解决四个应用板块两侧大片留白、图片与文字偏小的问题
   ========================================================= */
@media (min-width: 861px) {
  .page-apps .wrap { max-width: none; }
  /* 行业应用页导航栏例外：回到全局 1280px 居中版心 + 32px 左右内边距，
     避免 logo 与右侧 CTA 贴到屏幕两端、与其他页面位置不一致
     （其余行业应用板块仍保持铺满视口的效果不变） */
  .page-apps .site-nav .wrap { max-width: 1280px; padding-left: 32px; padding-right: 32px; }
  /* 板块之间的垂直间距收紧：全局 .sec 上下各 96px，相邻两块叠加达 192px，显得过于空旷 */
  .page-apps .sec { padding-top: 64px; padding-bottom: 64px; }
  /* 板块标题与导语加大 */
  :is(#vision, #its, #security, #research) .sec-title { font-size: 32px !important; }
  :is(#vision, #its, #security, #research) .sec-sub { font-size: 19px; line-height: 1.8; }
  /* 板块内的「行业痛点 / 推荐镜头类型 / 应用场景说明」小标题与说明文字加大
     （这两处在 HTML 里是内联 font-size，需 !important 覆盖） */
  :is(#vision, #its, #security, #research) [style*="font-size:14px"],
  :is(#vision, #its, #security, #research) [style*="font-size:13.5px"] { font-size: 15.5px !important; }
}

/* =========================================================
   首页「新闻资讯」区块：整屏铺满的背景图
   背景图固定用 images/news.jpg（专用区块背景图）；卡片配图另用 images/news-1.jpg，两者互不影响
   蒙版为「上深下浅」的竖向渐变：标题区仍保证可读，其余整屏都能看清背景图
   图片缺失时只剩浅色底，不会出现破图
   ========================================================= */
.news-sec {
  background-image:
    linear-gradient(180deg,
      rgba(248, 250, 252, .9) 0px,
      rgba(248, 250, 252, .52) 240px,
      rgba(248, 250, 252, .48) 100%),
    url('../images/news.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   无 JS 兜底：.reveal 渐入元素
   全站 .reveal 初始为 opacity:0，由 js/main.js 的 IntersectionObserver 加 .in 后显现。
   一旦脚本被禁用或加载失败，这些板块会永久停在透明状态（整页大片空白）。
   因此改为「仅当 <html> 带 .js 类时才隐藏」——.js 类由各页 <head> 内联脚本立即添加。
   正常用户（有 JS）表现与改动前完全一致；无 JS 时内容直接完整显示。
   注：不用逐条改原有 .reveal 规则，避免破坏 .reveal.in 等既有特异性关系。
   ========================================================= */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }