@charset "UTF-8";
/* ==========================================================================
 * layout.css — 结构层
 * 只消费 theme.css 提供的变量，不写死任何具体颜色值。
 * ========================================================================== */

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

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h, 68px); }

body {
  margin: 0;
  position: relative;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
body > * { position: relative; z-index: 1; }

img { max-width: 100%; display: block; border: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-strong); }
h1, h2, h3, h4, h5 { margin: 0 0 .6em; color: var(--heading); font-weight: 600; line-height: 1.35; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------- 通用组件 ------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
}

.section { padding: var(--sec-pad) 0; }
.section--alt { background: var(--bg-alt); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-title {
  position: relative;
  display: inline-block;
  font-size: 1.5rem;
  margin: 0 0 18px;
  padding-bottom: 16px;
  /* "//" 前缀的占位宽度（含它与标题文字之间的间隙）。
     不够宽会被字形顶开、够宽则间隙变大，改这一个值即可。 */
  --mark-w: 2.4rem;
}
/* 章节标题前缀标记。放在结构层是因为它本身不带颜色——颜色走各主题的 --primary，
   4 套主题共用一份，不要在各主题里重复定义。

   为什么给 ::before 钉一个固定宽度，而不是让它按字形自然撑开：
   下面的 ::after 下划线要以「标题文字」为基准居中，不是以「// + 文字」整盒居中。
   若让 // 按自身宽度参与布局，盒子中心会整体左移，下划线跟着偏左
   （aurora 实测偏 14px：下划线中心 222 / 文字中心 236）。
   宽度钉死后文字区 = [--mark-w, 100%]，其中心 = 50% + --mark-w/2，与字体无关。
   注：--mark-w 需 ≥ 各主题下 "//" 的实际宽度，4 套主题里最宽约 30px（aurora）。 */
.section-title::before {
  content: "//";
  display: inline-block;
  width: var(--mark-w);
  text-align: center;
  color: var(--primary);
  font-size: .8em;
  opacity: .8;
}
.section-title::after {
  content: "";
  position: absolute;
  /* 中心落在「文字区」的中心，而不是整个盒子的中心 —— 见上面 ::before 的说明 */
  left: calc(50% + var(--mark-w) / 2);
  bottom: 0;
  transform: translateX(-50%);
  width: 52px; height: 3px;
  border-radius: 3px;
  /* 4 套主题的下划线统一为「主色→点缀色」渐变（tech 基准，aurora 同款）。
     只用变量、不含硬编码色，所以可以放在结构层，各主题不必重复定义。 */
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.section-desc { color: var(--text-soft); margin: 0; }

/* -------------------------------- 内页页头 ------------------------------- */
/* 内页（/download、/contact）共用的页头。顶部留白给固定导航，
   .site-nav 实测 69px = .nav-inner 68 + 下边框 1，实际高度由 JS 写入 --nav-h。 */
.page-head {
  background: var(--page-head-bg);
  color: var(--page-head-fg);
  padding: calc(var(--nav-h, 69px) + 52px) 0 46px;
}
.page-head h1 {
  color: var(--page-head-fg);
  font-size: 2.45rem;
  margin: 0 0 10px;
}
.page-head p {
  color: var(--page-head-dim);
  font-size: 15.5px;
  margin: 0;
  max-width: 680px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-strong); transform: translateY(-2px); color: var(--on-primary); }
.btn-ghost { border-color: currentColor; color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* --------------------------------- 导航 --------------------------------- */
/* 导航样式已抽到 css/nav-shared.css，与 4 个产品详情页共用同一份。 */
/* 修改导航外观请改那个文件，不要在此处重新添加。 */

/* --------------------------------- 首屏 --------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  /* 全出血：宽度铺满视口，顶到页面最上方，固定导航悬浮其上 */
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
}
.hero-slides { position: relative; height: 520px; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .8s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.hero-veil {
  position: absolute; inset: 0;
  /* 不使用任何遮罩层，文字可读性完全交由 text-shadow 保证 */
  background: none;
  display: flex; align-items: center;
  /* 顶部留出固定导航高度，保证文案视觉居中 */
  padding-top: 68px;
}
.hero-content {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  color: #fff;
  text-align: right;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s var(--ease);
}
/* 轮播离开第一张时文案淡出（由 app.js 的 initCarousel 切 is-hidden） */
.hero-content.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  pointer-events: none;
}
.hero-eyebrow, .hero-title, .hero-sub { margin-left: auto; margin-right: 0; max-width: 620px; }
.hero-eyebrow { font-size: 13px; letter-spacing: .2em; opacity: 1; margin-bottom: 16px; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.7); }
.hero-title { font-size: 2.8rem; font-weight: 700; color: #fff; margin: 0 0 16px auto; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0,0,0,.90), 0 2px 10px rgba(0,0,0,.75), 0 4px 28px rgba(0,0,0,.55); line-height: 1.25;
  /* 单独放宽上限：默认 slogan「为高端装备提供高精度光电解决方案」15 个汉字，
     2.8rem 下实测需 717px（含 letter-spacing .02em），上面共享的 620px 会把它折成两行。
     容器 --container 1200 - padding 48 = 1152px 可用，760px 足够且不影响右对齐。 */
  max-width: 760px; }
.hero-sub { font-size: 1.1rem; opacity: 1; margin: 0 0 34px auto; max-width: 520px; text-shadow: 0 1px 3px rgba(0,0,0,.90), 0 2px 12px rgba(0,0,0,.70); line-height: 1.65; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.hero-actions .btn { padding: 13px 30px; font-size: 15px; }
.hero-actions .btn-ghost { border-color: rgba(255,255,255,.9); background: rgba(0,0,0,.28); }
.hero-actions .btn-ghost:hover { background: rgba(0,0,0,.45); }
.hero-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
.hero-dot {
  width: 28px; height: 3px; border: 0; padding: 0;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  border-radius: 3px; cursor: pointer;
  transition: background .25s var(--ease);
}
.hero-dot.is-active { background: #fff; }

/* 左右切换箭头：默认半隐，鼠标进入首屏或聚焦时完全显现 */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  background: rgba(0, 0, 0, .28);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.hero-arrow svg { width: 22px; height: 22px; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.hero-arrow-prev { left: 24px; }
.hero-arrow-next { right: 24px; }
.hero:hover .hero-arrow,
.hero-arrow:focus-visible { opacity: 1; }
.hero-arrow:hover {
  background: var(--primary, #1668ff);
  border-color: var(--primary, #1668ff);
  color: #fff;
}
.hero-arrow-prev:hover { transform: translateY(-50%) translateX(-3px); }
.hero-arrow-next:hover { transform: translateY(-50%) translateX(3px); }
.hero-arrow:active { transform: translateY(-50%) scale(.94); }
.hero-arrow:focus { outline: none; }
.hero-arrow:focus-visible { outline: 2px solid var(--primary, #1668ff); outline-offset: 3px; }

/* -------------------------------- 公司简介 ------------------------------- */
.about-body { max-width: 860px; margin: 0 auto; text-align: center; }
.about-body .lead { font-size: 1.05rem; margin: 0; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.stat {
  padding: 28px 16px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all .25s var(--ease);
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--primary); line-height: 1.2; }
.stat-label { font-size: 13px; color: var(--text-soft); margin-top: 6px; }

/* -------------------------------- 产品卡片 ------------------------------- */
.card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all .3s var(--ease);
  text-align: center;
  color: inherit;
}
.card:hover { transform: translateY(-6px); color: inherit; }
/* 卡片随 .grid-models 的单卡宽同步缩小：宽 320 → 265（0.83×），图片区高 200 → 160（0.8×），
   让卡片长宽比保持接近正方（3 列时是 320×318）。
   底部文字区不缩字号（12px 已是可读下限），故卡片高度略高于严格等比值。
   改单卡宽时这里要跟着乘同一个系数。 */
.card-media {
  height: 160px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  padding: 8px;
  overflow: hidden;
}
.card-media img { max-height: 100%; width: auto; object-fit: contain; transition: transform .4s var(--ease); }
.card:hover .card-media img { transform: scale(1.06); }
.card-body { padding: 12px 15px 14px; border-top: 1px solid var(--border); }
.card-title { font-size: .9rem; font-weight: 600; color: var(--heading); margin: 0 0 5px; }
/* 行高与 min-height 配套：正文固定占两行，同排卡片高度才齐平。
   正文字号不随卡片缩放（12px 已是可读下限），故卡片高度略高于等比值。 */
.card-text { font-size: 12px; line-height: 1.5; color: var(--text-soft); margin: 0 0 8px; min-height: 36px; }
.card-more { font-size: 12px; color: var(--primary); font-weight: 500; }
.card-more::after { content: " →"; }

/* ------------------ 产品中心：类别 → 系列 → 型号 三级结构 ------------------ */
/* 单卡宽度上限 270px。max-width 是给 grid 容器设的：
   4 列 = 4 × 270 + 3 × 24 = 1152（= --container 1200 − 两侧 padding 48，正好铺满）；
   2 列 = 2 × 270 + 24 = 564。
   容器比它宽时左对齐、右侧留白，卡片不被拉宽。改卡片大小只调这个 270，
   ≤992px / ≤560px 两处断点的 max-width 必须同步改，否则宽屏会反弹。
   类名不带列数：列数由这里的 grid-template-columns 决定，改列数不用改名。 */
.grid-models {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 1152px;
}

/* 吸顶分段条。top 消费 --nav-h（app.js 实测写入），避免窄屏导航换行后错位。
   背景必须与所在 section 一致，否则滚动时下方内容会透出来 —— #products 用的是
   .section--alt，所以这里用 --bg-alt。段落换背景色时此处要一起改。 */
.prod-seg {
  position: sticky;
  top: var(--nav-h, 68px);
  z-index: 50;
  display: flex;
  gap: 8px;
  margin: 0 0 44px;
  padding: 10px 0;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.seg {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  transition: all .22s var(--ease);
}
.seg:hover { color: var(--primary); background: var(--primary-soft); }
.seg.is-active { color: var(--on-primary); background: var(--primary); }
.seg-count { font-size: 12px; font-weight: 400; opacity: .75; }

/* 类别板块。scroll-margin-top 让锚点跳转时避开吸顶的分段条
   （导航高度由 html 的 scroll-padding-top 负责，这里只补分段条那一段）。 */
.prod-cat { scroll-margin-top: 56px; }
.prod-cat + .prod-cat { margin-top: 16px; }
/* 头部整行是折叠热区（光标 + hover 变色给出可点提示），
   按钮只做语义载体，不是唯一热区 —— 点标题也能折叠。 */
.prod-cat-head {
  display: flex; align-items: baseline; gap: 12px;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.prod-cat-title { font-size: 1.45rem; margin: 0; transition: color .22s var(--ease); }
.prod-cat-head:hover .prod-cat-title { color: var(--primary); }
.prod-cat-en { font-size: 13px; color: var(--text-soft); letter-spacing: .04em; }
.prod-cat-rule { flex: 1; height: 1px; background: var(--border); margin-bottom: 6px; }
.prod-cat-desc { margin: 10px 0 30px; color: var(--text-soft); font-size: 14px; }

/* 入口型类别（「定制产品开发」）：没有系列与型号，整块只有一条「描述 + 按钮」。
   宽度刻意撑满容器、与 .prod-cat-head 左右边界对齐，而不是跟 .grid-models 的
   1152px —— 后者那个上限只是为了让单卡不超过 320px，窄屏断点下它会更窄，
   而这条入口是「类别级」元素，跟类别标题同宽才对得上层次。
   窄屏让描述先换行、按钮落到下一行，避免长描述被挤成七八行。 */
.prod-entry {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 28px;
  /* 标题到这条的间距靠自己给：常规类别的 30px 来自 .prod-cat-desc，
     这里跳过 desc 就直接贴着 .prod-cat-head 了（实测间距 0）。 */
  margin-top: 18px;
  padding: 26px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.prod-entry-desc {
  flex: 1 1 380px;
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.9;
}
.prod-entry .btn { flex: none; }
@media (max-width: 560px) {
  .prod-entry { flex-direction: column; align-items: stretch; padding: 22px 20px; text-align: center; }
  /* ⚠️ column 方向下主轴变成垂直，上面那条 `flex: 1 1 380px` 的 basis 会被当成
     高度用 —— 入口条会凭空长到 380px 高（实测 498px）。必须在这里清掉 basis。 */
  .prod-entry-desc { flex: 0 0 auto; }
  .prod-entry .btn { justify-content: center; }
}

/* 折叠开关。深色主题下 --surface 与页底同色，靠 --border 勾边才看得见。 */
.prod-cat-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: all .22s var(--ease);
}
.prod-cat-toggle:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.prod-cat-toggle svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.prod-cat.is-collapsed .prod-cat-toggle svg { transform: rotate(-180deg); }

/* 折叠容器：grid-row 0fr → 1fr 做高度过渡（无需 JS 量高度）。
   inner 是唯一的裁剪层，所以不要给它加 padding —— border-box 下内容盒不能为负，
   padding 会让 0fr 收不干净（残留一个 padding 高度）。裁剪只影响网格左右各约 10px 的
   卡片阴影（grid 宽度已铺满容器），可忽略。 */
.prod-cat-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .32s var(--ease);
}
.prod-cat.is-collapsed .prod-cat-body { grid-template-rows: 0fr; }
.prod-cat-inner { min-height: 0; overflow: hidden; }
/* 折叠后内容仍在 DOM，必须摘出 tab 顺序与可读性树；
   visibility 延迟到收起动画结束再生效，展开时立即可见。 */
.prod-cat.is-collapsed .prod-cat-inner { visibility: hidden; transition: visibility 0s linear .32s; }

/* 系列分组：左侧竖线 + 色点，色点压在竖线上 */
.prod-series { position: relative; padding-left: 20px; margin-bottom: 36px; }
.prod-series::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 0;
  width: 2px; border-radius: 2px;
  background: var(--border);
}
.prod-series-head {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px -20px;   /* 抵消 padding，让标题与卡片左对齐 */
  padding-left: 20px;
}
.prod-series-dot {
  position: absolute; left: -3px;   /* 8px 色点居中在 2px 竖线上 */
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--primary);
}
.prod-series-name { font-size: 1.05rem; margin: 0; }
.prod-series-desc { font-size: 13px; color: var(--text-soft); }
.prod-series-count {
  margin-left: auto;
  font-size: 12px; color: var(--primary);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 2px 10px;
}

/* -------------------------------- 应用领域 ------------------------------- */
/* 按角色命名而不是列数（旧名 .grid-4 只有这一处在用，且条目数改成 3 后名字就说不通了）。
   条目数变化只改这里的列数；移动端断点同步改。 */
.grid-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.app-item { text-align: center; }
.app-media {
  height: 180px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 18px;
  background: var(--surface-2);
}
.app-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.app-item:hover .app-media img { transform: scale(1.08); }
.app-name { font-size: 1rem; font-weight: 600; color: var(--heading); margin: 0 0 6px; }
.app-desc { font-size: 13px; color: var(--text-soft); margin: 0; }

/* --------------------------------- 页脚 --------------------------------- */
.footer {
  padding: 36px 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer p { margin: 0 0 6px; font-size: 13px; color: var(--text-soft); }
.footer a { color: var(--text-soft); }
.footer a:hover { color: var(--primary); }

/* -------------------------------- 回到顶部 -------------------------------- */
.to-top {
  position: fixed; right: 28px; bottom: 28px;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--on-primary);
  border: 0; border-radius: 50%;
  font-size: 18px; cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .28s var(--ease);
  z-index: 90;
}
.to-top.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--primary-strong); }

/* -------------------------------- 响应式 -------------------------------- */
/* 4 列要 1152px 可用宽，容器窄于 1200 放不下 → 退 3 列（只减列数，单卡宽仍 270） */
@media (max-width: 1200px) {
  .grid-models { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 858px; }
}
@media (max-width: 992px) {
  .grid-apps { grid-template-columns: repeat(2, 1fr); }
  .grid-models { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 564px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hero-slides { height: 440px; }
  .hero-title { font-size: 2.1rem; }
  .page-head h1 { font-size: 2rem; }
}
/* 触屏无 hover，箭头常显，否则永远看不见 */
@media (hover: none), (pointer: coarse) {
  .hero-arrow { opacity: 1; }
}
@media (max-width: 768px) {
  :root { --sec-pad: 64px; }
  .container { padding: 0 16px; }
  .hero-veil { padding-top: 100px; }   /* 窄屏导航换行更高，多留些空间 */
  .hero-slides { height: 360px; }
  .hero-title { font-size: 1.7rem; }
  .page-head { padding-top: calc(var(--nav-h, 60px) + 40px); }
  .hero-sub { font-size: .95rem; }
  /* 窄屏改为左对齐 + 整体压暗，避免长文案贴右侧不好读 */
  .hero-content { text-align: left; }
  .hero-eyebrow, .hero-title, .hero-sub { margin-left: 0; margin-right: auto; }
  .hero-actions { justify-content: flex-start; }
  .hero-slide img { object-position: 50% center; }
  .hero-arrow { width: 38px; height: 38px; }
  .hero-arrow svg { width: 18px; height: 18px; }
  .hero-arrow-prev { left: 12px; }
  .hero-arrow-next { right: 12px; }
  .section-head { margin-bottom: 40px; }
  /* 分段条窄屏横向滚动，型号数徽标省掉避免挤压 */
  .prod-seg { overflow-x: auto; margin-bottom: 32px; }
  .seg { padding: 9px 14px; font-size: 14px; white-space: nowrap; }
  .seg-count { display: none; }
  .prod-cat-title { font-size: 1.25rem; }
  .prod-cat-en { display: none; }
  .prod-series-desc { display: none; }
  .prod-cat { scroll-margin-top: 48px; }
}
@media (max-width: 560px) {
  .grid-apps { grid-template-columns: 1fr; }
  .grid-models { grid-template-columns: 1fr; max-width: none; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .prod-series { padding-left: 14px; }
  .prod-series-head { margin-left: -14px; padding-left: 14px; }
}