/* ==========================================================================
   深圳市柯普盛电子科技有限公司（COPE） — 站点样式
   视觉基调：仪器行业的克制工程感。
   刻意不用：霓虹发光、多段渐变、玻璃拟态、漂移动画、渐变文字、网格底纹——
   这些是最容易显得"模板/AI 生成"的套路，也与精密仪器的产业气质不符。
   改用：中性灰阶层次、单一低饱和钢蓝强调色、直角或极小圆角、
         细描边分区、以排版和留白建立秩序。
   ========================================================================== */

/* ---------- 设计令牌 ---------- */
:root{
  /* 中性偏冷的深灰，而非带蓝的"科技黑" */
  --bg:          #171b20;
  --bg-alt:      #1c2126;
  --surface:     #181b1f;
  --surface-2:   #1e2227;

  --line:        #262b31;
  --line-strong: #363d45;
  /* 网格格线色。注意：卡片无底色时，网格容器的这个颜色会从 1px 缝隙
     与内边距处整片透出，所以它同时决定了"格线可见度"和"整片底色深浅"——
     调亮会让整块区域看起来铺了一层灰底。此处取一个只比 --bg 略亮的值：
     线看得出，但不至于让区域变成一个色块。 */
  --grid-line:   #2b333b;

  --text:        #f2f5f7;
  --text-soft:   #d3dbe2;
  /* 正文与说明提高亮度，避免叠在光雾上显灰、阅读费劲。 */
  --text-dim:    #c3ced8;

  /* 单一强调色：低饱和钢蓝（取自仪器面板与厂商 VI 的常见色域） */
  --accent:      #3a86c8;
  --accent-soft: #2c6494;
  --accent-dim:  rgba(58, 134, 200, .12);

  /* 状态色，克制使用 */
  --ok:          #5aa06a;
  --warn:        #c9903a;

  /* 圆角极小：仪器面板是方的 */
  --radius:      2px;
  --radius-sm:   2px;

  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
               "Hiragino Sans GB", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
               Consolas, "Liberation Mono", monospace;

  --container: 1320px;
  --ease: cubic-bezier(.25, .6, .3, 1);
}

/* ---------- 基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  /* 页面底色必须保留：它是整页的承托层。若这里也设为透明，
     浏览器默认白底会透出来，浅色文字直接失去对比度。
     （此前批量去底色时误伤过这一条，症状是整页发灰、标题像消失。） */
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.72;
  letter-spacing:0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- 全屏虚化动态背景 ----------
   低分辨率画布（1600×430，约 3.7:1）由 CSS 拉伸铺满视口，再做大半径模糊。
   模糊同时起到两个作用：把粗柱子虚化成柔和光晕，以及抹掉拉伸的锯齿。
   固定定位使其不随页面滚动，整页都有背景。 */
.page-bg{
  position:fixed; left:0; right:0; bottom:0;
  /* 贴底铺开，避免整屏被非等比拉伸。底色的承托由 body 的 --bg 负责，
     这里只提供氛围光晕。 */
  width:100%; height:70vh;
  z-index:0;
  pointer-events:none;
  /* 保留原来的虚化频谱层次，适度收低光雾亮度，让正文更清楚。 */
  opacity:.60;
  filter:blur(42px) saturate(90%) brightness(1);
  transform:scale(1.14);          /* 放大以消除模糊后的边缘透底 */
  transform-origin:center bottom;
}

/* 内容与面板统一抬到背景之上 */
.site-header,
main,
.site-footer{ position:relative; z-index:1; }
.section,
.hero,
.marquee{ position:relative; }

/* 面板改半透明，让背景的频谱光晕透出来；同时保证文字对比度 */
/* 内容直接铺在页面背景上（无卡片底色），由 body 的 --bg 承托。
   这里不再叠任何遮罩：底色由 body 提供即可，多叠一层只会让背景透不出来。 */
.section,
.hero{
  background:transparent;
}
.section--alt,
.marquee,
.site-footer,
.scope-bar{
  background:transparent;
}

h1,h2,h3,h4{ margin:0; line-height:1.25; letter-spacing:-.01em; font-weight:600; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(18px, 2.6vw, 28px);
}

.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

::selection{ background:var(--accent-soft); color:#fff; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---------- 顶部导航 ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(23,27,32,.22);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.site-header.is-stuck{
  background:rgba(23,27,32,.48);
  border-bottom-color:rgba(220,230,240,.10);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:66px;
}

.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{ display:grid; place-items:center; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-size:1.02rem; letter-spacing:.04em; font-weight:600; }
.brand-text em{
  font-style:normal; font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.3em; color:var(--text-dim);
}

.nav{ display:flex; align-items:center; gap:2px; }
.nav-link{
  position:relative; padding:8px 13px;
  font-size:.92rem; color:var(--text-soft);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-link:hover{ color:var(--text); }
.nav-link.is-active{ color:var(--accent); }
/* 激活态用下边框，不用发光 */
.nav-link.is-active::after{
  content:""; position:absolute; left:13px; right:13px; bottom:2px;
  height:1.5px; background:var(--accent);
}

.header-actions{ display:flex; align-items:center; gap:12px; }

.header-phone{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px;
  border:1px solid var(--line-strong);
  font-family:var(--font-mono); font-size:.83rem;
  color:var(--text);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.header-phone:hover{ border-color:var(--accent); color:var(--accent); }

.nav-toggle{
  display:none; width:40px; height:36px; padding:0;
  border:1px solid var(--line-strong); background:transparent; cursor:pointer;
  place-items:center; gap:4px;
}
.nav-toggle span{
  display:block; width:16px; height:1.5px; background:var(--text);
  transition:transform .22s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ---------- 首屏：铺满一屏 ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(84px, 11vh, 120px);
  padding-bottom:0;
  border-bottom:1px solid var(--line);
}

.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px, 5vw, 64px);
  align-items:center;
  padding-bottom:clamp(40px, 5vh, 64px);
  flex:1;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim);
}
.pulse-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--ok);
}

.hero-title{
  margin-top:16px;
  font-size:clamp(2.1rem, 4.8vw, 3.5rem);
  letter-spacing:-.02em;
  line-height:1.14;
  font-weight:600;
}
/* 重点用颜色，不用渐变填充 */
/* 标题统一白色，不用强调色区分（与页面其它标题保持一致） */
.hero-title .grad{ color:var(--text); }

.hero-sub{
  margin-top:20px; max-width:56ch;
  font-size:clamp(.96rem, 1.05vw, 1.03rem);
  color:var(--text-soft);
  line-height:1.85;
}

.hero-actions{ margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }

/* 保留按钮尺寸与形状，使用低饱和的半透明中性底色。 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px;
  font-size:.94rem; font-weight:500; cursor:pointer;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn svg{ transition:transform .2s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

.btn-primary{
  color:var(--text);
  background:rgba(230,238,245,.08);
  border-color:rgba(220,230,240,.34);
}
.btn-primary:hover{ background:rgba(230,238,245,.15); border-color:rgba(230,238,245,.58); }

.btn-ghost{
  color:var(--text-soft);
  border-color:rgba(220,230,240,.22);
  background:rgba(23,27,32,.12);
}
.btn-ghost:hover{ border-color:rgba(230,238,245,.48); background:rgba(230,238,245,.08); }

/* ---------- 示波器面板 ---------- */
.hero-scope{ position:relative; }

.scope-frame{
  position:relative;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:#0c0e11;
  overflow:hidden;
}

.scope-bar{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:9px 13px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--text-dim);
  background:var(--surface);
}
.scope-bar--bottom{ border-bottom:none; border-top:1px solid var(--line); }
.scope-bar b{ color:var(--text, #e9ecef); font-weight:500; }
.scope-brand{ color:var(--text-soft); letter-spacing:.16em; }
.scope-meta{ display:inline-flex; align-items:center; gap:6px; color:var(--ok); }
.led{
  width:5px; height:5px; border-radius:50%; background:var(--ok);
}

#scopeCanvas{ display:block; width:100%; height:232px; position:relative; z-index:2; }

/* ---------- 领域条（持续横向滚动） ---------- */
.marquee{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  background:transparent;
  overflow:hidden;
}
/* 轨道份数由 JS 按视口宽度决定：位移量 = 一份的宽度（--shift 由 JS 写入），
   这样循环点正好接上，不会出现末尾空白。
   --shift 缺省时用 -33.333% 兜底（即 3 份），保证 JS 未执行也能滚动。 */
.marquee-track{
  display:flex; width:max-content;
  will-change:transform;
  animation:marqueeScroll 34s linear infinite;
}
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(var(--shift, -33.333%)); }
}
/* 复制出来的份：与原始份同排一行 */
.marquee-set{ display:flex; }
.marquee-track span{
  padding:13px 26px;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.1em;
  color:var(--text-dim); white-space:nowrap;
  position:relative;
}
.marquee-track span::after{
  content:""; position:absolute; right:0; top:50%; translate:0 -50%;
  width:3px; height:1px; background:var(--line-strong);
}

/* ---------- 通用区块 ---------- */
/* 每个板块占满一屏并垂直居中，配合 JS 的滚轮吸附，
   实现"滚一下走一个板块"。内容超出时(min-height)仍可正常撑高。 */
.section{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(64px, 6vh, 84px) 0;
  border-bottom:1px solid var(--line);
}
.section > .container{ width:100%; }
.section--alt{ background:transparent; }

.section-head{ max-width:660px; margin-bottom:clamp(24px, 2.6vw, 34px); }
.section-head h2{
  margin-top:12px;
  font-size:clamp(1.55rem, 2.9vw, 2.15rem);
  font-weight:600;
}
/* 标题下用一条短实线，不用渐变条 */
.section-head h2::after{
  content:""; display:block; width:40px; height:2px; margin-top:14px;
  background:var(--accent);
}
.section-sub{
  margin-top:16px; color:var(--text-soft); line-height:1.85;
  font-size:clamp(.94rem, 1.02vw, 1rem);
}

/* ---------- 滚动入场（渐进增强） ---------- */
.js .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ---------- 产品卡片 ----------
   实现要点：卡片无底色时，若仍用「容器背景色 + gap」画格线，
   容器色会从缝隙整片透出，整块区域就变成一层灰底（正是要避免的）。
   因此改为：容器背景与页面同色，格线由卡片自身描边画出——
   这样区域底色 = 页面底色，只有细线是可见的。 */
.product-grid{
  display:grid;
  /* 固定 3 列，6 张卡片排成 3×2 */
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0;
  background:transparent;
  border-top:1px solid var(--grid-line);
  border-left:1px solid var(--grid-line);
}
.product-card{
  position:relative;
  padding:clamp(16px, 1.6vw, 20px);
  background:transparent;
  /* 用描边而非容器底色画格线；负外边距让相邻边框重叠成 1px */
  border-right:1px solid var(--grid-line);
  border-bottom:1px solid var(--grid-line);
  margin-right:-1px;
  margin-bottom:-1px;
  transition:background .2s var(--ease);
}
.section--alt .product-card{ background:transparent; }
.product-card:hover{ background:rgba(255,255,255,.04); }

.pc-icon{
  width:40px; height:40px; margin-bottom:12px;
  display:grid; place-items:center;
  border:1px solid var(--line-strong);
  color:var(--accent);
  background:transparent;
}
.pc-icon svg{ width:22px; height:22px; }

.product-card h3{ font-size:1.08rem; font-weight:600; }
.pc-desc{
  margin-top:7px; font-size:.88rem; line-height:1.62; color:var(--text-soft);
}
.pc-list{ margin-top:10px; display:grid; gap:5px; }
.pc-list li{
  position:relative; padding-left:16px;
  font-size:.86rem; line-height:1.6; color:var(--text-dim);
}
/* 用短横线代替菱形/圆点 */
.pc-list li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:7px; height:1px; background:var(--line-strong);
}
.pc-tag{
  display:inline-block; margin-top:12px; padding:3px 9px;
  border:1px solid var(--line-strong);
  font-family:var(--font-mono); font-size:.69rem; letter-spacing:.1em;
  color:var(--text-dim);
}
.product-note{
  margin-top:18px; text-align:center;
  font-size:.85rem; color:var(--text-dim);
}

/* ---------- 解决方案 ---------- */
.solution-grid{
  display:grid;
  /* 固定 3 列，6 张卡片排成 3×2；格线同样由卡片描边画出 */
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0;
  background:transparent;
  border-top:1px solid var(--grid-line);
  border-left:1px solid var(--grid-line);
}
.solution-card{
  position:relative;
  padding:clamp(24px, 2.5vw, 32px);
  background:transparent;
  border-right:1px solid var(--grid-line);
  border-bottom:1px solid var(--grid-line);
  margin-right:-1px;
  margin-bottom:-1px;
  transition:background .2s var(--ease);
}
.solution-card:hover{ background:rgba(255,255,255,.04); }

.sol-num{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.16em;
  color:var(--text-dim);
}
.solution-card h3{ margin-top:10px; font-size:1.05rem; font-weight:600; }
.solution-card > p{
  margin-top:10px; font-size:.89rem; line-height:1.8; color:var(--text-soft);
}
.solution-card ul{
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line);
  display:grid; gap:7px;
}
.solution-card ul li{
  position:relative; padding-left:14px;
  font-size:.85rem; color:var(--text-dim);
}
.solution-card ul li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:6px; height:1px; background:var(--line-strong);
}

/* ---------- 合作品牌 ---------- */
.brand-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.brand-grid li{
  display:grid; place-items:center;
  min-height:104px; padding:18px 20px;
  background:transparent;
}

/* 浅灰承托面：纯白在深色页面上对比过强、显得刺眼，改用浅灰降低亮度落差。
   同时注意一个约束：Tektronix 的图片自带纯白底，承载面若比它暗，
   卡片上会显出一块白色方块。因此灰度只取到 #dfe3e7，与纯白的差距
   控制在不易察觉的范围内，既缓解刺眼又避免出现色块。 */
.brand-logo{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:66px;
  padding:0 16px;
  background:#dfe3e7;
  overflow:hidden;
}
/* 固定像素高度，避免百分比 max-height 在 grid/flex 容器中失效导致图片溢出被裁 */
.brand-logo img{
  max-width:100%;
  width:auto;
  height:auto;
  max-height:44px;
  object-fit:contain;
}
/* 深色承托面：Admesy 是纯白描边 logo，白底上会完全隐形，必须用深底。 */
.brand-logo--dark{ background:#0b0d0f; }

.brand-note{
  margin-top:22px; font-size:.79rem; color:var(--text-dim); text-align:center;
}

@media (max-width: 860px){
  .brand-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .brand-grid{ grid-template-columns:1fr; }
  .brand-grid li{ min-height:92px; }
}

/* ---------- 关于我们 ---------- */
.about-inner{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px, 5vw, 60px); align-items:start;
}
.about-copy h2{
  margin-top:12px; font-size:clamp(1.55rem, 2.9vw, 2.15rem);
}
.about-copy h2::after{
  content:""; display:block; width:40px; height:2px; margin-top:14px;
  background:var(--accent);
}
.about-copy p{
  margin-top:18px; color:var(--text-soft); line-height:1.9;
  font-size:clamp(.94rem, 1.02vw, 1rem);
}
.about-copy .btn{ margin-top:26px; }

/* 不设底色，文字直接挂在页面背景上；仅用左侧竖线建立序列感 */
.capability-list{ display:grid; gap:0; }
.capability-list li{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 0 16px 18px;
  border-left:1px solid var(--line-strong);
  border-bottom:1px solid var(--line);
  transition:border-left-color .2s var(--ease);
}
.capability-list li:last-child{ border-bottom:none; }
.capability-list li:hover{ border-left-color:var(--accent); }
.cap-ic{
  flex-shrink:0; width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--line-strong);
  color:var(--accent);
}
.capability-list b{ display:block; font-size:.96rem; font-weight:600; }
.capability-list p{
  margin-top:4px; font-size:.85rem; color:var(--text-dim); line-height:1.65;
}

/* ---------- 联系我们 ---------- */
.contact-inner{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(22px, 3vw, 40px); align-items:stretch;
}

.contact-list{
  display:grid; gap:0;
  border:1px solid var(--line);
}
.contact-list li{
  display:flex; gap:18px; align-items:baseline;
  padding:15px 20px;
  border-bottom:1px solid var(--line);
  transition:background .2s var(--ease);
}
.contact-list li:last-child{ border-bottom:none; }
.contact-list li:hover{ background:var(--surface); }
.ct-label{
  flex-shrink:0; width:72px;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em;
  color:var(--text-dim);
}
.ct-value{ font-size:.94rem; color:var(--text); }
.ct-value a{
  color:var(--accent);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease);
}
.ct-value a:hover{ border-bottom-color:var(--accent); }

/* ---------- 地图卡 ---------- */
/* 底层为矢量自绘的区域示意图（非任何地图服务商瓦片），
   点击整卡跳转高德地图查看真实位置。 */
.map-card{
  position:relative; min-height:330px;
  display:grid; place-items:center;
  border:1px solid var(--line-strong);
  overflow:hidden;
  color:inherit; text-decoration:none;
  transition:border-color .2s var(--ease);
}
.map-card:hover{ border-color:var(--accent); }
.map-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.map-shot{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* 压暗并降低饱和，使其作为底纹而不抢内容 */
  filter:saturate(.55) brightness(.62) contrast(1.02);
}
/* 底部渐变遮罩，保证文字可读 */
.map-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(16,18,21,.32) 0%,
    rgba(16,18,21,.62) 52%,
    rgba(16,18,21,.94) 100%);
}
.map-pin{
  position:relative; z-index:2;
  top:-30px;
  display:grid; place-items:center;
}
.pin-dot{
  position:relative; z-index:2;
  width:11px; height:11px; border-radius:50%;
  background:var(--accent);
  border:2px solid #fff;
}
.pin-ring{
  position:absolute; width:11px; height:11px; border-radius:50%;
  border:1.5px solid var(--accent);
  animation:ripple 3s ease-out infinite;
}
@keyframes ripple{
  0%  { transform:scale(1);   opacity:.85; }
  100%{ transform:scale(4.6); opacity:0; }
}
.map-info{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  padding:20px 22px;
  display:grid; gap:3px;
}
.map-open{
  display:inline-flex; align-items:center; gap:6px;
  margin-bottom:8px;
  padding:6px 12px;
  justify-self:start;
  border:1px solid var(--line-strong);
  background:transparent;
  font-family:var(--font-mono); font-size:.71rem; letter-spacing:.06em;
  color:var(--text);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.map-card:hover .map-open{ border-color:var(--accent); color:var(--accent); }
.map-open svg{ transition:transform .2s var(--ease); }
.map-card:hover .map-open svg{ transform:translate(2px, -2px); }

.map-info b{ font-size:.98rem; font-weight:600; }
.map-info span{ font-size:.83rem; color:var(--text-soft); }
.map-info .mono{ font-size:.74rem; color:var(--text-dim); letter-spacing:.06em; }

/* ---------- 页脚 ---------- */
.site-footer{
  background:transparent;
  padding-top:clamp(44px, 5vw, 60px);
}
.footer-inner{
  display:grid; grid-template-columns:1fr 2fr;
  gap:clamp(28px, 4vw, 52px);
  padding-bottom:clamp(30px, 4vw, 44px);
}
.footer-brand p{
  margin-top:16px; font-size:.84rem; line-height:1.85; color:var(--text-dim);
}
.footer-nav{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(18px, 3vw, 36px);
}
.footer-nav h4{
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text); margin-bottom:13px;
  font-family:var(--font-mono); font-weight:500;
}
.footer-nav a,
.footer-nav span{
  display:block; margin-bottom:8px;
  font-size:.85rem; color:var(--text-dim);
  transition:color .2s var(--ease);
}
.footer-nav a:hover{ color:var(--accent); }

.footer-bottom{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:space-between; align-items:center;
  padding-top:20px; padding-bottom:20px;
  border-top:1px solid var(--line);
}
.footer-bottom p{ font-size:.78rem; color:var(--text-dim); }

/* 备案信息行：置于页脚最底部，居中、弱化，链接指向工信部备案系统 */
.footer-beian{ padding-bottom:24px; }
.footer-beian p{ font-size:.76rem; color:var(--text-dim); text-align:center; }
.footer-beian a{
  color:var(--text-dim);
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.footer-beian a:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* ==========================================================================
   响应式
   ========================================================================== */

@media (max-width: 1080px){
  .nav-link{ padding:8px 10px; font-size:.87rem; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-scope{ margin-top:8px; max-width:620px; }
  .about-inner{ grid-template-columns:1fr; }
  /* 3 列在窄屏会挤压内容，降为 2 列 */
  .product-grid,
  .solution-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px){
  .header-phone{ display:none; }
  .nav-toggle{ display:grid; }

  .nav{
    position:fixed; inset:66px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px clamp(20px, 4vw, 32px) 20px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    transform:translateY(-8px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .nav-link{
    padding:13px 10px; font-size:.96rem;
    border-bottom:1px solid var(--line);
  }
  .nav-link.is-active::after{ display:none; }
  .nav-link.is-active{ color:var(--accent); }

  #scopeCanvas{ height:190px; }
  .hero{ padding-bottom:0; }
  .footer-inner{ grid-template-columns:1fr; }
  .footer-nav{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 620px){
  .hero-actions .btn{ flex:1 1 auto; }
  .product-grid,
  .solution-grid{ grid-template-columns:1fr; }
  .contact-inner{ grid-template-columns:1fr; }
  .map-card{ min-height:268px; }
  .contact-list li{ flex-direction:column; gap:4px; }
  .ct-label{ width:auto; }
  .footer-nav{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  /* 窄屏下版权行左对齐，备案行仍居中，避免视觉重心偏移 */
  .footer-beian{ padding-bottom:20px; }
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .js .reveal{ opacity:1; transform:none; }
}

/* ---------- 打印 ---------- */
@media print{
  .site-header,.marquee,.hero-scope,.nav-toggle{ display:none; }
  body{ background:#fff; color:#000; }
  .reveal{ opacity:1; transform:none; }
}