/* ==========================================================
   灿音科技官网 · Tesla 风格
   纯黑沉浸式 · 全屏分屏 · 极简导航 · 大字白文
   ========================================================== */
:root{
  --bg:#000; --bg2:#0a0a0a; --bg3:#111;
  --ink:#fff; --ink2:#d0d0d0; --mut:#888; --faint:#666;
  --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.06);
  --brand:#e8e8e8; --brand-d:#bbb;
  --r:12px;
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;max-width:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;letter-spacing:.3px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;max-width:100%;width:100%;
}
img{max-width:100%;display:block}
/* video 也要限宽：<video> 在没有 max-width 时按「内在尺寸」参与布局，
   Hero 里 1600px 宽的视频会把整个文档撑到 1608px，
   手机上表现为「整页可以左右拖动」（不只是卡片轨道滚动）。
   这条重置必须与 img 并列，不能只写 img。 */
img,video{max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
::selection{background:rgba(255,255,255,.2);color:#fff}

/* ---------- 顶栏（Tesla：隐藏，信息并入页脚） ---------- */
.topbar{display:none}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:38px;font-size:12px}
.tb-left{color:var(--mut);letter-spacing:.3px}
.tb-right{display:flex;align-items:center;gap:18px}
.tb-right a{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);transition:color .2s}
.tb-right a:hover{color:#fff}
.tb-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6}

/* ---------- 无障碍：跳转链接 ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:#fff;color:#000;padding:10px 18px;border-radius:0 0 8px 0;
  font-size:14px;font-weight:600;
}
.skip-link:focus{left:0}

/* ---------- 导航（Tesla：透明浮顶，滚动后变实） ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;
  backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
  transition:background .4s var(--ease),backdrop-filter .4s;
}
.header.scrolled{
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line2);
}
.header-in{display:flex;align-items:center;justify-content:space-between;height:56px;transition:height .4s var(--ease)}
.header.scrolled .header-in{height:48px}
.logo{display:flex;align-items:center;gap:8px;line-height:1;flex:0 0 auto}
.logo-txt{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:2px}
.logo-txt em{font-style:normal;font-size:10px;font-weight:500;letter-spacing:3px;color:var(--mut);margin-left:6px}
/* 官方 LOGO（宽高比 3.414:1）：只锁高度，宽度按比例自适应，避免任何拉伸。
   页头高 56px / 滚动后 48px，留出上下呼吸空间。
   filter: 白色版在深底上已有足够对比；加一层极淡投影用于压在浅色画面（如浅色 Hero 帧）时仍可读。 */
.logo-img{height:34px;width:auto;max-width:min(200px,42vw);object-fit:contain;display:block;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}
.header.scrolled .logo-img{height:29px}
.nav{display:flex;gap:0;flex-wrap:nowrap}
.nav-lk{padding:8px 16px;font-size:14px;color:var(--ink2);font-weight:500;transition:color .2s;opacity:.85;white-space:nowrap}
.nav-lk:hover{color:#fff;opacity:1}
.nav-lk.on{color:#fff;opacity:1}
/* 中等宽度：收窄导航内边距与字号，避免菜单项换行把导航撑高 */
@media(max-width:1000px){
  .nav-lk{padding:8px 10px;font-size:13px}
}
@media(max-width:880px){
  .nav-lk{padding:8px 7px;font-size:12.5px}
}
.nav-cta{
  margin-left:12px;border:1px solid rgba(255,255,255,.4);color:#fff;
  padding:6px 18px;border-radius:20px;font-size:13px;font-weight:600;
  transition:.2s;background:transparent;white-space:nowrap;
}
.nav-cta:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}
@media(max-width:1000px){
  .nav-cta{margin-left:8px;padding:6px 13px;font-size:12.5px}
}
.hamb{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.hamb span{width:20px;height:2px;background:#fff;border-radius:2px;transition:.3s}

/* ---------- Hero（Tesla：全屏视频/图，文字居中偏下） ---------- */
.hero{position:relative;height:100vh;min-height:600px;background:#000;overflow:hidden}
.slide{position:absolute;inset:0;display:none}
.slide.act{display:block}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 40%,rgba(0,0,0,.30) 100%)}
.slide-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.slide-ct{
  position:relative;z-index:2;height:100%;max-width:1280px;margin:0 auto;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:0 24px;color:#fff;
}
.kick{
  display:block;font-size:13px;letter-spacing:4px;color:rgba(255,255,255,.82);
  text-transform:uppercase;margin-bottom:20px;font-weight:500;
  text-shadow:0 1px 12px rgba(0,0,0,.7);
}
.kick::before{display:none}
.slide-ct h2,.slide-ct h1{
  font-size:clamp(34px,6vw,72px);font-weight:700;line-height:1.1;letter-spacing:0;
  max-width:18em;margin-bottom:16px;text-shadow:0 2px 30px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.5);
  overflow-wrap:break-word;word-break:break-word;
}
.slide-ct p{font-size:clamp(16px,2vw,22px);color:rgba(255,255,255,.9);max-width:40em;font-weight:300;text-shadow:0 1px 16px rgba(0,0,0,.7);overflow-wrap:break-word}
.slide-btns{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;justify-content:center}
.btn-w{
  background:rgba(255,255,255,.9);color:#000;padding:10px 32px;border-radius:20px;
  font-weight:600;font-size:14px;transition:.25s;letter-spacing:.5px;
}
.btn-w:hover{background:#fff;transform:scale(1.03)}
.btn-ghost-w{
  border:1px solid rgba(255,255,255,.5);color:#fff;padding:10px 32px;border-radius:20px;
  font-weight:600;font-size:14px;transition:.25s;background:rgba(0,0,0,.3);letter-spacing:.5px;
}
.btn-ghost-w:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.8)}
.dots{position:absolute;z-index:3;bottom:28px;left:0;right:0;display:flex;gap:6px;justify-content:center}
.dots i{width:24px;height:2px;border-radius:2px;background:rgba(255,255,255,.25);cursor:pointer;transition:.3s}
.dots i.on{background:rgba(255,255,255,.85);width:36px}

/* ---------- 滚动指示器 ---------- */
.scroll-hint{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:3;
  width:30px;height:50px;border:2px solid rgba(255,255,255,.4);border-radius:15px;
  display:flex;justify-content:center;align-items:flex-start;padding-top:8px;
}
.scroll-hint::after{
  content:"";width:4px;height:8px;border-radius:2px;background:rgba(255,255,255,.6);
  animation:scrollDot 1.8s infinite;
}
@keyframes scrollDot{0%{opacity:1;transform:translateY(0)}60%{opacity:0;transform:translateY(16px)}100%{opacity:0}}

/* ---------- 通用区块 ---------- */
.sec{padding:80px 0}
.sec-head{max-width:760px;margin:0 auto 48px;text-align:center}
.eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:4px;color:var(--mut);margin-bottom:10px;text-transform:uppercase}
.sec-head h2{font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:.5px;line-height:1.2;color:var(--ink)}
.sec-head p{margin-top:16px;color:var(--mut);font-size:17px;font-weight:300}
.sec-gray{background:var(--bg2)}
.sec-dark{background:var(--bg);color:var(--ink2)}
.sec-dark .sec-head h2{color:#fff}
.sec-dark .eyebrow{color:var(--faint)}
.sec-dark .sec-head p{color:var(--mut)}
.sec-soft{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.grid{display:grid;gap:16px}
/* ⚠️ 一律用 minmax(0,1fr)，不要写 `1fr`：
   `1fr` 的下限默认为 auto（= 内容最小宽度），
   卡片里的长标题或未限宽图片会把轨道顶宽、挤坏整行布局。
   写成 0 下限才是真正的等分。 */
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- 卡片 ---------- */
.card{
  background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);
  padding:24px;transition:.3s var(--ease);
}
.card:hover{transform:translateY(-3px);border-color:var(--line);background:var(--bg3)}
.biz h3{color:var(--ink);margin:14px 0 8px;font-size:18px;font-weight:600}
.biz p{color:var(--mut);font-size:14px}
.biz a{color:var(--ink);font-size:13px;font-weight:600;margin-top:12px;display:inline-flex;align-items:center;gap:5px}
.biz a:hover{gap:9px}
.bn{display:block;font-size:12px;font-weight:600;letter-spacing:2px;color:var(--mut)}
.card-ic{width:40px;height:40px;border-radius:10px;background:var(--bg3);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:18px}

/* ---------- 数据 ---------- */
/* 数字块：minmax(0,1fr) 防止某一列被内容（如 2000+）撑宽导致各列不等宽、整体偏移；
   移动端列宽用固定等分，保证 2×2 网格左右严格对齐 */
.sec-dark .nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center;padding:8px 0}
.num{border-left:1px solid var(--line2);transition:transform .35s var(--ease);min-width:0;text-align:center}
.num:first-child{border-left:none}
.num b{display:block;font-size:clamp(30px,4.5vw,56px);font-weight:700;color:#fff;letter-spacing:0;font-variant-numeric:tabular-nums;line-height:1.15}
.num span{display:block;color:var(--mut);font-size:13px;letter-spacing:2px;font-weight:400;line-height:1.5}
.num:hover{transform:translateY(-4px)}
.num:hover b{color:var(--brand-d)}
@media (prefers-reduced-motion: no-preference){
  .num b{background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.72) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}

/* ---------- 解决方案三卡（同级并行，主推项描边强调） ---------- */
/* 三张卡片强制等宽等高、同一条基线：flex 列 + stretch，内部用 flex 撑开 */
.grid-sol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
/* 中等宽度（平板 / 小笔记本）：两列，主推项跨满整行 */
@media(max-width:1024px){
  .grid-sol{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .grid-sol .sol.is-featured{grid-column:1 / -1}
}
/* 手机：单列，一行一卡（避免三卡挤成 90px 宽的长条） */
@media(max-width:760px){
  .grid-sol{grid-template-columns:1fr;gap:14px}
  .grid-sol .sol.is-featured{grid-column:auto}
  .sol{padding:22px 20px 18px}
  .sol h4{font-size:16px}
}
.sol{
  position:relative;display:flex;flex-direction:column;height:100%;
  padding:26px 24px 22px;border-radius:14px;text-decoration:none;
  background:var(--bg2);border:1px solid var(--line2);transition:.24s var(--ease);
}
.sol:hover{border-color:var(--line);background:var(--bg3);transform:translateY(-3px)}
.sol-k{
  display:block;color:var(--brand-d);font-size:10.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;margin-bottom:10px;
}
.sol h4{color:var(--ink);font-size:17px;font-weight:700;line-height:1.45;margin-bottom:8px}
.sol-d{color:var(--mut);font-size:13.5px;line-height:1.75;margin-bottom:14px}
.sol-pts{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:7px}
.sol-pts li{position:relative;padding-left:16px;color:var(--ink2);font-size:13px;line-height:1.6}
.sol-pts li::before{
  content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;
  background:var(--brand-d);
}
/* 这个 margin-top:auto 是让底部链接始终贴底的关键，保证三卡高度一致时链接对齐 */
.sol-go{margin-top:auto;color:var(--ink2);font-size:12.5px;font-weight:600;transition:.2s}
.sol:hover .sol-go{color:var(--ink)}

/* 主推项：只靠描边 + 角标 + 微光晕强调，尺寸与另外两张完全一致 */
.sol.is-featured{border-color:rgba(255,255,255,.34);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 8px 30px rgba(0,0,0,.32)}
.sol.is-featured .sol-k{color:var(--ink)}
.sol-badge{
  position:absolute;top:-1px;right:18px;color:#0d0d0f;background:var(--ink);
  font-size:10.5px;font-weight:700;letter-spacing:1px;line-height:1;
  padding:5px 10px;border-radius:0 0 6px 6px;
}

.sol-group h3{color:var(--ink);font-size:20px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.sol-group h3::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--brand-d)}
.sol-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.sol-item{background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:14px 16px;transition:.2s}
.sol-item:hover{border-color:var(--line);background:var(--bg3)}
.sol-item h4{color:var(--ink2);font-size:14px;font-weight:600;margin-bottom:3px}
.sol-item h4::before{content:"· ";color:var(--brand-d);font-weight:700}
.sol-item p{color:var(--mut);font-size:13px}
.more{text-align:center;margin-top:36px}
.btn{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.9);color:#000;
  padding:10px 30px;border-radius:20px;font-weight:600;font-size:14px;transition:.25s;letter-spacing:.5px;
}
.btn:hover{background:#fff;transform:scale(1.03)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.8);color:#fff}
.brands{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;max-width:900px;margin:0 auto}
.brand{
  width:150px;height:64px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);border-radius:10px;
  font-weight:500;color:var(--ink2);font-size:13px;background:transparent;letter-spacing:.5px;
  transition:.2s;box-sizing:border-box;padding:8px 10px;text-align:center;
}
.brand:hover{border-color:var(--line);color:#fff;background:var(--bg2)}
/* 品牌 LOGO：限制最大高度而非撑满，避免正方形 logo（如 SHURE）比横向字标视觉上大一圈。
   宽度同样受限，保证不同宽高比的 logo 视觉重量一致。 */
.brand-logo img{max-width:118px;max-height:32px;width:auto;height:auto;object-fit:contain;display:block}
/* 正方形 viewBox 的 LOGO（SHURE 等）：仅限高度会让宽度塌缩到 32px，
   这里放宽为按宽度显示，保证在卡片里占据合理视觉面积。 */
.brand-logo img[src*="shure"],
.brand-logo img[src*="jbl"]{max-width:78px;max-height:44px}
/* 自有品牌 ZANSTAR：官方字标宽高比 3.414:1（字高小于字宽），
   若沿用 118px 上限则整体只有 35px 高，视觉重量明显小于其他品牌。
   这里单独放宽宽度上限（盒子内宽 150-2*10=130px），让它与横向字标观感一致。 */
.brand-logo img[src*="zanstar"]{max-width:130px;max-height:46px}
.brand-logo:hover img{filter:none}
.brand-ph{color:var(--mut);font-size:12px;letter-spacing:1px;font-weight:600}

/* ---------- 案例 ---------- */
.case{overflow:hidden;padding:0 0 16px}
.case .case-ph{height:200px;background:var(--bg3);display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:13px;overflow:hidden;border-radius:var(--r) var(--r) 0 0}
.case .case-ph img.fill{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.case:hover .case-ph img.fill{transform:scale(1.05)}
.case .case-body{padding:14px 16px}
.case h4{color:var(--ink);font-size:15px;font-weight:600;margin-bottom:5px;line-height:1.4}
.case .case-tag{display:inline-block;font-size:11px;color:var(--mut);background:var(--bg3);padding:2px 10px;border-radius:12px;margin-bottom:6px;font-weight:500;letter-spacing:.5px}
.case p.desc{color:var(--mut);font-size:13px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.case-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:36px}
.chip{
  border:1px solid var(--line2);background:transparent;padding:7px 18px;border-radius:20px;
  cursor:pointer;font-size:13px;color:var(--ink2);transition:.2s;font-weight:500;
}
.chip:hover{border-color:var(--line);color:#fff}
.chip.on{background:#fff;color:#000;border-color:#fff}

/* ---------- 内页横幅 ---------- */
.banner{position:relative;background-color:var(--bg);color:#fff;padding:0;overflow:hidden;min-height:50vh;display:flex;align-items:center}
.banner-in{position:relative;z-index:2;padding:100px 0 80px;width:100%}
.banner h1{font-size:clamp(30px,4.5vw,52px);font-weight:700;letter-spacing:.5px;line-height:1.15}
.banner p{margin-top:14px;color:var(--ink2);font-size:17px;max-width:44em;font-weight:300}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.2))}

/* ---------- 产品目录 ---------- */
.prod-group{margin-bottom:56px}
.prod-group h3{color:var(--ink);font-size:20px;font-weight:700;margin-bottom:20px;display:flex;align-items:baseline;gap:10px}
.prod-group h3::before{content:"";width:4px;height:20px;border-radius:2px;background:var(--brand-d);align-self:center}
.prod-group .cnt{font-size:12px;color:var(--faint);font-weight:500;letter-spacing:1px}

/* 产品网格。
   ⚠️ 列数用固定 4 列而不是 auto-fill：
      auto-fill + minmax(220px,1fr) 在 1280 容器里会跑出 5 列，
      单卡 232px 倒也无妨，但在 1440/1600 之间列数会跳变，
      造成同一组内卡片忽大忽小。固定 4 列 + 下方断点，行为可预测。 */
.pgrid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px}
.pcard{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;transition:.3s var(--ease);display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-3px);border-color:var(--line);background:var(--bg3)}

/* 图片区。
   ⚠️ 这里的历史坑：原来是 `height:160px` 固定高 + `object-fit:contain` + `padding:12px`。
      产品图宽高比跨度极大（0.87~2.69），contain 会在卡片里留下大面积留白，
      而且 127 张图里 118 张是**白底**，于是在深色卡片上出现一块块白矩形
      —— 就是用户说的「不要有白色」。
   现在改成：图片已在 _process_prodimg.py 里统一成 4:3 深底画布
      （底色 = --bg3 #111，主体已放大居中），所以这里
        · 容器用 aspect-ratio:4/3 与图片比例严格一致，不留任何 letterbox；
        · 不再设 padding，图片铺满容器；
        · object-fit:cover 是安全的——比例已对齐，cover 等价于不裁切，
          同时能兜住万一有旧图未处理的极端情况（宁裁一点也不要露白边）。 */
.pcard-ph{position:relative;aspect-ratio:4/3;background:var(--bg3);overflow:hidden;border-bottom:1px solid var(--line2)}
.pcard-ph img.fill{width:100%;height:100%;object-fit:cover;display:block}
.pcard-ph .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:13px}
.pcard h4{padding:12px 14px 2px;color:var(--ink);font-size:14px;font-weight:600;line-height:1.4}
.pcard .pmodel{padding:0 14px;color:var(--brand-d);font-size:12px;font-weight:600}
.pcard .pdesc{padding:4px 14px 14px;color:var(--mut);font-size:12px}

/* 产品网格断点：只在真正需要时降列，避免卡片过窄导致产品糊成一团。 */
@media(max-width:1080px){.pgrid{grid-template-columns:repeat(3, minmax(0, 1fr))}}
@media(max-width:720px){.pgrid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}}
@media(max-width:430px){.pgrid{grid-template-columns:1fr;gap:12px}.pcard-ph{aspect-ratio:16/10}}

/* ---------- 支持/关于/文本框 ---------- */
.sv{padding:22px}
.sv h4{color:var(--ink);margin-bottom:6px;font-weight:600;font-size:16px}
.sv p{color:var(--mut);font-size:14px}
.two-col{display:grid;grid-template-columns:1.3fr .7fr;gap:24px;margin-top:40px}
.two-col.col-2{grid-template-columns:1fr 1fr}
.box{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);padding:28px}
.box h3{color:var(--ink);margin-bottom:16px;font-size:19px;font-weight:700}
.box p{margin:8px 0;color:var(--ink2);font-size:14.5px;line-height:1.8}
.box .note,.c-note{color:var(--mut);font-size:13px}
.faq{border:1px solid var(--line2);border-radius:10px;padding:14px 16px;margin-bottom:10px;background:var(--bg2);transition:.2s}
.faq:hover{border-color:var(--line)}
.faq summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:15px;list-style:none;display:flex;align-items:center;gap:8px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--brand-d);font-weight:700;font-size:17px}
.faq[open] summary::before{content:"–"}
.faq p{margin:10px 0 0 24px;color:var(--mut);font-size:14px}
.dl li{margin:8px 0;padding-left:16px;position:relative}
.dl li::before{content:"›";position:absolute;left:0;color:var(--brand-d)}
.dl a{color:var(--ink2);border-bottom:1px dashed var(--line)}
.dl a:hover{color:#fff}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;counter-reset:step}
.step{position:relative;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:20px 14px;text-align:left;counter-increment:step}
.step b{display:block;color:#fff;font-size:14px;margin-bottom:6px}
.step b::before{content:counter(step,decimal-leading-zero) " —";display:block;font-size:11px;font-weight:600;color:var(--mut);margin-bottom:5px;letter-spacing:2px}
.step p{color:var(--mut);font-size:13px;line-height:1.5}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.val{border:1px solid var(--line2);border-radius:10px;padding:16px}
.val b{color:var(--ink);font-size:15px;font-weight:600}
.val p{color:var(--mut);font-size:13px;margin:5px 0 0!important}
.ms-list{display:flex;flex-direction:column;gap:16px}
.ms b{color:var(--brand-d);font-size:14px}
.ms p{color:var(--mut);font-size:14px;margin:3px 0 0!important}
.span2{grid-column:span 2}
.about-top{margin-bottom:24px}

/* ---------- 联系 ---------- */
.sec-contact{background:var(--bg2)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.contact-info{padding:36px 32px;background:var(--bg);color:var(--ink2)}
.contact-info h3{color:#fff;font-size:20px;font-weight:700;margin-bottom:20px}
.contact-info h3 span{color:var(--mut)}
.c-list li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line2);font-size:14px;color:var(--ink2)}
.c-list b{flex:0 0 80px;color:var(--mut);font-weight:500;font-size:12px;padding-top:2px}
.c-list a{color:#fff}
.contact-info .c-note{color:var(--mut);font-size:13px;margin-top:16px}
.c-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.c-actions .btn-w,.c-actions .btn-ghost-w{cursor:pointer;font-family:inherit}
.contact-form{padding:36px 32px}
.contact-form h3{color:#fff;font-size:20px;font-weight:700;margin-bottom:6px}
.contact-form .sub{color:var(--mut);font-size:13px;margin-bottom:18px}
.wj{width:100%;height:100%;min-height:460px;border:0;border-radius:10px;background:var(--bg2);display:block}
.form-tip{background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:20px;color:var(--mut);font-size:14px;line-height:1.8}
code{background:var(--bg3);padding:2px 6px;border-radius:4px;font-size:12px;color:var(--ink2)}

/* ---------- 留言表单卡片（常驻） ---------- */
.form-card{background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:24px}
.fc-t{color:#fff;font-size:15px;font-weight:600;margin-bottom:14px}
.fm-fields{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.fm-chip{border:1px solid var(--line2);border-radius:20px;padding:6px 14px;font-size:11.5px;color:var(--ink2);background:var(--bg3)}
.fc-note{color:var(--mut);font-size:12px;margin-top:12px}
.btn-w{cursor:pointer;font-family:inherit}

/* ---------- 留言弹窗（悬浮子窗口） ---------- */
.inq{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px}
.inq[hidden]{display:none}
.inq-mask{position:absolute;inset:0;background:rgba(0,0,0,.72);animation:inqFade .2s ease}
.inq-win{
  position:relative;width:min(680px,100%);max-height:90vh;display:flex;flex-direction:column;
  background:var(--bg);border:1px solid rgba(255,255,255,.16);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.6);animation:inqUp .26s var(--ease);
}
.inq-x{
  position:absolute;right:12px;top:12px;z-index:3;width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid var(--line2);color:var(--ink);font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.2s;font-family:inherit;
}
.inq-x:hover{background:rgba(255,255,255,.18);color:#fff}
.inq-head{padding:24px 28px 16px;border-bottom:1px solid var(--line2);flex:0 0 auto}
.inq-head h3{color:#fff;font-size:19px;font-weight:700;margin-bottom:6px}
.inq-head p{color:var(--mut);font-size:13px;line-height:1.7;padding-right:36px}
.inq-body{flex:1 1 auto;min-height:0;padding:18px 20px 22px;overflow:auto}
.fm-empty{padding:8px 4px}
.fm-empty-t{color:#fff;font-size:16px;font-weight:600;margin-bottom:10px}
.fm-empty-d{color:var(--mut);font-size:13.5px;line-height:1.85;margin-bottom:16px}
.fm-empty-d b{color:var(--ink2)}
.fm-empty .fm-fields{margin-bottom:20px}
.fm-acts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.fm-acts .btn-w,.fm-acts .btn-ghost-w{cursor:pointer;font-family:inherit;font-size:13.5px}
.fm-copy{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.fm-empty-c{color:var(--mut);font-size:13px;border-top:1px solid var(--line2);padding-top:14px}
.fm-empty-c b{color:var(--ink2)}

/* ---------- 可提交的留言表单（无后端：邮件兜底） ---------- */
.ifm{display:flex;flex-direction:column;gap:18px}
.ifm-f{display:flex;flex-direction:column}
.ff-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.ff{display:flex;flex-direction:column;gap:6px;min-width:0}
.ff-wide{grid-column:1 / -1}
.ff label{color:var(--ink2);font-size:12.5px;font-weight:600;letter-spacing:.3px}
.ff .req{color:#ff7a7a;font-style:normal;margin-left:3px}
.ff input,.ff select,.ff textarea{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:13.5px;color:var(--ink);
  background:var(--bg3);border:1px solid var(--line2);border-radius:8px;padding:10px 12px;
  transition:border-color .2s,background .2s;appearance:none;
}
.ff textarea{resize:vertical;min-height:92px;line-height:1.7}
.ff input::placeholder,.ff textarea::placeholder{color:#6b6b73}
.ff select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px;padding-right:34px;
}
.ff select option{background:var(--bg2);color:var(--ink)}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none;border-color:var(--line);background:var(--bg2)}
.ff input:user-invalid,.ff textarea:user-invalid,.ff select:user-invalid{border-color:rgba(255,122,122,.6)}
.ifm-err{color:#ff9b9b;font-size:12.5px;margin:0 0 12px}
.ifm-err .req{font-style:normal}
.ifm-ok{color:#8fe6b0;font-size:13px;line-height:1.7;margin:0 0 12px;
  padding:10px 14px;border:1px solid rgba(143,230,176,.35);border-radius:8px;
  background:rgba(143,230,176,.08)}
/* 蜜罐：真人看不见，机器人会填 → 后端据此拦截。
   用「移出可视区」而不是 display:none —— 部分爬虫会跳过 display:none 的字段。 */
.ifm-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;
  pointer-events:none;overflow:hidden}
.ifm-f .btn-w[disabled]{opacity:.6;cursor:default}
.ifm-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ifm-act .btn-w,.ifm-act .btn-ghost-w{cursor:pointer;font-family:inherit}
.ifm-tip{color:var(--mut);font-size:12px;line-height:1.75;margin-top:12px}
.ifm-tip b{color:var(--ink2)}
.ifm-quick{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--mut);font-size:12.5px;
  border-top:1px solid var(--line2);padding-top:14px;
}
.ifm-quick a{color:var(--ink);font-weight:600}
.ifm-quick .sep{color:#55555c}
@media(max-width:560px){
  .ff-wrap{grid-template-columns:1fr;gap:12px}
  .ifm-act{flex-direction:column;align-items:stretch}
  .ifm-act .btn-w,.ifm-act .btn-ghost-w{width:100%;text-align:center;justify-content:center}
}
@keyframes inqFade{from{opacity:0}to{opacity:1}}
@keyframes inqUp{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.inq-mask,.inq-win{animation:none}}
body.inq-open{overflow:hidden}

/* ---------- 页脚 ---------- */
.footer{background:#000;color:var(--faint);font-size:13px;border-top:1px solid var(--line2)}
.foot-grid{display:grid;grid-template-columns:1.2fr .6fr 1.1fr;gap:40px;padding:48px 24px 36px}
.foot-brand{font-size:18px;font-weight:700;color:#fff;letter-spacing:1px}
.foot-brand em{font-style:normal;color:var(--mut);font-size:11px;font-weight:500;letter-spacing:3px;margin-left:6px}
.foot-a p{margin-top:12px;color:var(--mut);font-size:13px;line-height:1.8}
.foot-sns{color:var(--ink2)!important}
.foot-b h4,.foot-c h4{color:#fff;font-size:14px;font-weight:600;margin-bottom:14px}
.foot-b a{display:block;padding:4px 0;color:var(--faint)}
.foot-b a:hover{color:#fff;transition:.2s}
.foot-c p{font-size:13px;margin-bottom:8px;color:var(--faint)}
.foot-bar{border-top:1px solid var(--line2);font-size:12px;color:var(--faint);padding:16px 0;text-align:center}
.foot-bar a{color:var(--mut)}
.footer .toplink{display:inline-block;margin-bottom:14px;color:var(--mut);font-size:12px}

/* ---------- 首页六大业务（Tesla 横向滚动大图） ---------- */
.sec-six{padding:0;background:#000;overflow:hidden;max-width:100vw}
.six-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:80px 24px 32px;max-width:1280px;margin:0 auto;position:relative}
.six-head h2{
  font-size:clamp(30px,4.4vw,52px);font-weight:700;letter-spacing:2px;color:#fff;
  background:rgba(242,242,244,.10);border:1px solid rgba(255,255,255,.14);border-radius:14px;
  padding:14px 40px;display:inline-block;line-height:1.2;
}
.six-more{white-space:nowrap;font-size:14px;font-weight:600;color:var(--ink2);border-bottom:1px solid var(--line);padding-bottom:2px}
.six-more:hover{color:#fff;border-color:#fff}
/* 六大业务卡片区：居中网格，六张卡一次全部显示。
   目标 = 「全部显示 + 居中 + 均匀分布」，所以不再做横向滚动轨道，
   改用 grid + auto-fit，卡片等宽等距、整体在容器里居中。

   ⚠️ 布局演进史（改这里之前务必读）：
     1) 最初是 9:16 竖版横向滚动轨道，靠外层滚动 + 内层 max-content 轨道，
        加 clamp 三段式装订线对齐 1280px 内容列。
     2) 巨屏下出现「不居中」——根因是两个 class 挂同一个 <ul>，padding 被清零；
        另有两个连带坑（flex 父级拉伸子级、max() 无上限）。都修好了。
     3) 现在改为「全部显示」，滚动轨道的前提不复存在，
        与装订线 / --tile-set-w / margin:auto 相关的旧规则**全部作废并已删除**，
        不要再按老注释去调 clamp —— 那套公式已经不需要了。

   卡片宽度的取值逻辑：
     420px  —— 单卡上限。1920 视口下 6×420+5×20=2620，刚放得下。
     348px  —— ⚠️ 关键下限。卡片是 4:3，348px 宽 → 261px 高，
               其内部文字（约 46px 标题 + 约 62px 描述 + 内边距）才放得开。
               若下限低于 ~330px，卡片一多、列数一变宽，文字就会挤成三行。
     1fr    —— 1920 以上每列自动分配，利用宽屏余量，不会一边空一边挤。
     减号处理 —— minmax 与 repeat 里用 calc() 包裹，避免部分引擎
               把「420px - 20px」误解析成「420px 减 20px」之外的东西。

/* 六大业务卡片区：**一行 3 张 × 2 行**，整体居中。
   用户最终确认的排布：六张卡分两行、每行三张。

   ⚠️ 排布演进史（改这里之前务必读）：
     1) 最初 9:16 竖版横向滚动轨道 —— 一次只看得到三张，要往右拖。
     2) 改 4:3 后做成 auto-fit 网格 —— 巨屏下会变成「4 + 2」，很难看。
     3) 用户要求「全部显示、横排」→ 做成 6 张一行，
        但 1920 下单卡只剩 301px、1440 下 223px，字挤得厉害。
     4) **用户最终确认「一行三个、两行」** —— 即当前版本，也是观感最好的：
        1920 下单卡 420px（4:3 → 315px 高），字大图大，两行排满不留空。

   实现要点：
     - `repeat(3, minmax(0, 1fr))` 固定 3 列，不用 auto-fit
       （auto-fit 会在放不下时擅自减列，行为不可预测）。
     - `minmax(0, 1fr)` 的 **0 下限很关键**：`1fr` 默认下限是 `auto`
       （= 内容最小宽度），会被内容撑开、把轨道顶爆；写成 0 才能真正均分。
     - `max-width:1320px` = 3 × 420 + 2 × 20 的上限，
       防止超宽屏（2560+）卡片被拉得过大、变成三张巨图。

   ⚠️ 窄屏在下方媒体查询里降为 2 列 / 1 列，这是可读性保护。 */
.tile-rail{
  display:block;width:100%;max-width:100%;
  padding:4px 24px 80px;box-sizing:border-box;
}
.tile-set{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
  list-style:none;margin:0 auto;padding:0;
  width:100%;
  /* 3 列上限：3 × 420 + 2 × 20 = 1300，取 1320 留余量。
     ⚠️ 必须给上限，否则 3440 超宽屏下单卡会涨到 600px+，
        三张巨图撑满屏幕，反而失去「一屏看全六张」的效果。 */
  max-width:1320px;
  justify-content:center;
}
/* 六大业务卡片：4:3 横版，宽度由列宽决定。 */
.at-tile{flex:0 0 auto;width:100%;min-width:0;margin:0 auto;background:#000}
.at-link{display:block}
.at-tile h3{font-size:20px;font-weight:700;color:#fff;margin-bottom:10px;letter-spacing:.3px}
.tile-ph{position:relative;aspect-ratio:4/3;border-radius:16px;background-size:cover;background-position:center;background-color:#111;overflow:hidden;transition:transform .4s var(--ease)}
.at-link:hover .tile-ph{transform:scale(1.02)}
/* 遮罩：上下两端压暗保证文字可读，中段留亮展示画面。
   4:3 横版比原竖版矮，文字所占纵向比例更大，故把透明区的起点提前、终点后移，
   避免亮图（如舞台灯、球场）把标题/描述冲淡。 */
.tile-ov{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(0,0,0,.62) 0%,
  rgba(0,0,0,.30) 18%,
  rgba(0,0,0,.05) 38%,
  rgba(0,0,0,.10) 50%,
  rgba(0,0,0,.55) 72%,
  rgba(0,0,0,.86) 100%)}
/* 卡片内边距：3 列时单卡回到 420px，内边距可以给回 20px。 */
.tile-top{position:absolute;left:0;top:0;right:0;padding:18px 20px 0;color:#fff}
/* 标题：3 列布局下单卡约 420px 宽，是「6 张一行」时的 1.4 倍，
   字号可以回到舒适区间，不必再用极端的 clamp 下限。 */
.tile-top h3{display:inline-block;font-size:clamp(16px,1.25vw,21px);font-weight:700;letter-spacing:.3px;line-height:1.25;color:#fff;
  background:rgba(240,240,242,.14);border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:7px 13px;backdrop-filter:blur(3px);
  max-width:100%;overflow-wrap:break-word}
.tile-bot{position:absolute;left:0;right:0;bottom:0;padding:0 20px 20px;color:#fff}
/* 描述限 2 行，防止盖住上方标题（卡片高 315px，title+desc 约占 130px）。 */
.tile-bot p{font-size:clamp(12px,0.9vw,13.5px);line-height:1.6;color:rgba(255,255,255,.88);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
/* 响应式：3 列在中等屏幕仍成立，窄屏降为 2 列 / 1 列。

   ⚠️ 这里**不需要**为 3 列设断点：
      `repeat(3, minmax(0,1fr))` + `max-width:1320px`，
      1920 时列宽被 1320 上限锁在 420px；
      视口缩到 1000 以下时列宽自然跟着缩（1000 → 单卡约 300px），
      全程保持 3 列，无需切换。
      中途设过 `@media(max-width:1320px){repeat(3)}` 是多余的
      —— 基类本来就是 3 列，只有 700 / 520 两档才需要真正改列数。

   降列阈值按「单卡至少约 230px 宽」倒推（4:3 → 约 170px 高，文字刚好够）：
     3 列需 3×230 + 2×16 + 2×24 ≈ 770px
     2 列需 2×230 + 1×16 + 2×24 ≈ 560px

   ⚠️ 用 `repeat(N, minmax(0,1fr))` 固定列数，不要用 auto-fit ——
      auto-fit 会在放不下时擅自减列，行为难以预测且会跟这里的档位打架。 */
@media(max-width:820px){
  /* 770px 以下 2 列，卡片反而更大更好看（820 → 单卡约 380px）。 */
  .tile-set{grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}
  .tile-rail{padding-left:18px;padding-right:18px;padding-bottom:56px}
}
/* 手机：单列，卡片跟着视口缩放。
   ⚠️ 这里是 max-width:520px，所以「最宽」的一档是 520px 视口本身
   （可用宽约 484）。上限给到 560 是为了不产生额外约束，
   真正的手机可用宽本就小于它，卡片自然收窄。 */
@media(max-width:520px){
  .tile-set{grid-template-columns:1fr;gap:14px}
  .at-tile{max-width:560px}
  /* 单列时卡片明显变大，字号回调放大，避免显得空旷。 */
  .tile-top{padding:16px 18px 0}
  .tile-top h3{font-size:clamp(15px,4.2vw,19px);padding:6px 11px;border-radius:9px}
  .tile-bot{padding:0 18px 16px}
  .tile-bot p{font-size:clamp(12px,3.4vw,13.5px);line-height:1.6}
}
@media(max-width:900px){
  .six-head{padding:56px 20px 24px}
  .brand{width:126px;height:56px}
}

/* ---------- Hero 视频背景（保留） ---------- */
.slide-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide-bg{position:absolute;inset:0;background-size:cover;background-position:center}
/* 延迟加载视频：未激活前先显示封面，避免与首屏视频争抢带宽 */
.lazy-video{opacity:0;transition:opacity .6s var(--ease)}
.slide.act .lazy-video{opacity:1}
.slide-poster{z-index:0}

/* ---------- 分类锚点跳转 / 资料下载 ---------- */
.chip .cnt{font-size:11px;opacity:.55;margin-left:3px}
.prod-group{scroll-margin-top:80px}
.dl li.dl-off{color:var(--faint);padding-left:16px;position:relative}
.dl li.dl-off::before{content:"·";position:absolute;left:4px;color:var(--faint)}

/* ---------- 解决方案图文面板 ---------- */
.sol-list{display:flex;flex-direction:column;gap:20px}
.sol-panel{display:flex;gap:24px;align-items:stretch;background:var(--bg2);border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.sol-pic{flex:0 0 280px;min-height:200px;background-size:cover;background-position:center}
.sol-cnt{flex:1;padding:22px 24px}
.sol-cnt .sol-items{margin-top:14px}
@media(max-width:900px){.sol-panel{flex-direction:column}.sol-pic{flex:none;min-height:160px}}

/* ---------- 方案详情链接 / 内页图文 / 场景标签 ---------- */
.sol-more{margin-top:16px}
.sol-more a{font-size:14px;font-weight:600;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:2px}
.d-pic{min-height:300px;border-radius:14px;background-position:center;background-size:cover}
.scene-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:820px;margin:0 auto}
.s-chip{display:inline-block;background:var(--bg2);border:1px solid var(--line2);border-radius:20px;padding:8px 18px;font-size:14px;color:var(--ink2);font-weight:500;transition:.2s}
.scene-list .s-chip:hover{border-color:var(--line);color:#fff}
@media(max-width:900px){.d-pic{min-height:180px}}
.d-wide{height:360px;border-radius:14px;margin-top:28px;background-size:cover;background-position:center}
@media(max-width:900px){.d-wide{height:200px}}

/* ---------- 全屏业务板块（Tesla 分屏式） ---------- */
.sec-full{position:relative;min-height:100vh;display:flex;align-items:flex-end;justify-content:center;background:#000;overflow:hidden}
.sec-full-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1s var(--ease)}
.sec-full:hover .sec-full-bg{transform:scale(1.04)}
.sec-full::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.15) 70%)}
.sec-full-ct{position:relative;z-index:2;text-align:center;color:#fff;padding:0 24px 80px;max-width:800px}
.sec-full-ct .kick{margin-bottom:16px}
.sec-full-ct h2{font-size:clamp(30px,4.5vw,52px);font-weight:700;line-height:1.15;margin-bottom:12px;text-shadow:0 2px 24px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.45)}
.sec-full-ct p{font-size:clamp(15px,1.8vw,18px);color:rgba(255,255,255,.88);font-weight:300;margin-bottom:28px;text-shadow:0 1px 14px rgba(0,0,0,.65)}
.sec-full-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- 案例图集弹窗（保留） ---------- */
.case-more{display:inline-block;margin-top:6px;font-size:12px;color:var(--brand-d);font-weight:600;letter-spacing:.3px}
.case-vid{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;padding:3px 8px;border-radius:4px;font-weight:600;z-index:2;backdrop-filter:blur(3px)}
.case[data-gallery]{cursor:pointer}
.case[data-gallery]:hover .case-ph img{transform:scale(1.06)}
.case-ph{overflow:hidden;border-radius:var(--r) var(--r) 0 0}

.lightbox{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center}
.lightbox.show{display:flex}
.lb-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.95);backdrop-filter:blur(6px)}
.lb-inner{position:relative;max-width:92vw;max-height:92vh;display:flex;align-items:center;justify-content:center}
.lb-media{display:flex;align-items:center;justify-content:center}
.lb-img{max-width:90vw;max-height:88vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5);user-select:none}
.lb-video{max-width:90vw;max-height:88vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.lb-miss{
  color:#bbb;font-size:15px;line-height:2;text-align:center;padding:56px 40px;letter-spacing:.5px;
  border:1px dashed rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.03);min-width:280px;
}
.lb-miss span{color:#777;font-size:12px;font-family:ui-monospace,Consolas,monospace}
.lb-loading{
  color:#999;font-size:14px;letter-spacing:1px;padding:64px 48px;
}
.lb-close,.lb-prev,.lb-next{position:absolute;border:none;background:rgba(255,255,255,.1);color:#fff;width:44px;height:44px;border-radius:50%;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:2}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.25)}
.lb-close{top:-12px;right:-12px;font-size:28px}
.lb-prev{left:-16px;top:50%;transform:translateY(-50%)}
.lb-next{right:-16px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);color:#888;font-size:13px;letter-spacing:1px}
@media(max-width:600px){.lb-close{top:8px;right:8px}.lb-prev{left:4px}.lb-next{right:4px}.lb-count{bottom:-26px}}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  /* 注意：基础规则是 .sec-dark .nums（两个类），这里必须带 .sec-dark 才能覆盖，
     否则特异性不足会被基础规则的 4 列压回去 */
  .sec-dark .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .sol-panel{flex-direction:column}
  .sol-pic{flex:none;min-height:180px}
  .two-col{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .slide-ct h2,.slide-ct h1{font-size:clamp(28px,6.4vw,48px)}
  .sec-full-ct h2{font-size:clamp(26px,5.6vw,40px)}
}
/* 平板竖屏 / 窄窗口：桌面导航已放不下（菜单项会换行把导航撑高），提前切抽屉式。
   只动导航相关样式，不影响 760px 以下那套整站布局规则。 */
@media (max-width:880px){
  .nav{position:fixed;top:0;right:-280px;width:260px;height:100vh;background:#000;flex-direction:column;padding:80px 24px;box-shadow:-16px 0 40px rgba(0,0,0,.5);transition:right .28s;z-index:200;gap:2px}
  .nav.open{right:0}
  .nav-lk{padding:14px 6px;font-size:16px;border-bottom:1px solid var(--line2);opacity:1;white-space:normal}
  .hamb{display:flex;z-index:210}
  .nav-cta{display:none}
}
@media (max-width:760px){
  /* 兜底：任何长文本/宽元素都不得撑破视口 */
  html,body{max-width:100%;overflow-x:hidden}
  img,video{max-width:100%}
  .slide-ct,.sec-full-ct,.banner-in,.wrap{max-width:100%}
  .sec{padding:56px 0}
  .nav{position:fixed;top:0;right:-280px;width:260px;height:100vh;background:#000;flex-direction:column;padding:80px 24px;box-shadow:-16px 0 40px rgba(0,0,0,.5);transition:right .28s;z-index:200;gap:2px}
  .nav.open{right:0}
  .nav-lk{padding:14px 6px;font-size:16px;border-bottom:1px solid var(--line2);opacity:1}
  .hamb{display:flex;z-index:210}
  .nav-cta{display:none}
  .g3,.g4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:24px;padding:36px 24px 24px}
  .two-col,.two-col.col-2{grid-template-columns:1fr}
  .vals{grid-template-columns:1fr}
  .contact-info,.contact-form{padding:24px 20px}
  .wj{height:440px}
  /* 数字块移动端：2×2 等分网格（带 .sec-dark 保证覆盖基础规则） */
  .num{border-left:none;border-top:1px solid var(--line2);padding-top:14px}
  .sec-dark .nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .num b{font-size:clamp(30px,8.4vw,40px)}
  .num span{font-size:12.5px;letter-spacing:1.2px}
  .hero{min-height:520px}
  .sec-full{min-height:70vh}
  .scroll-hint{display:none}
  /* 移动端 Hero 排版：收紧字号与间距，防止标题/按钮横向溢出 */
  .slide-ct{padding:0 18px;max-width:100%}
  .slide-ct h2,.slide-ct h1{font-size:clamp(24px,6.8vw,34px);max-width:100%;margin-bottom:12px;line-height:1.18}
  .slide-ct p{font-size:14px;max-width:100%;line-height:1.65;padding:0 2px}
  .kick{font-size:11px;letter-spacing:1.5px;margin-bottom:12px}
  .slide-btns{margin-top:22px;gap:10px}
  .btn-w,.btn-ghost-w{padding:9px 20px;font-size:13px}
  .sec-full-ct{padding:0 20px 56px}
  .sec-full-ct h2{font-size:clamp(24px,6.6vw,34px);max-width:100%}
  .sec-full-ct p{font-size:14.5px;margin-bottom:22px}
  .banner-in{padding:80px 0 56px}
  .banner h1{font-size:clamp(26px,7vw,38px)}
  .banner p{font-size:15px}
  .six-head{padding:56px 20px 22px}
}