/* 基础变量与主题色 */
:root {
  --brand-blue-900: #003A70;
  --brand-blue-700: #005CAB;
  --brand-blue-950: #002244;
  --white: #ffffff;
  --gray-50: #F5F7FA;
  --gray-800: #333333;
  --text: #212529;
  --border: #E5EAF0;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* 排版与重置 */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

/* 防止横向溢出引起移动端右侧空白 */
html, body { overflow-x: hidden; max-width: 100%; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  width: min(1160px, 92%);
  margin: 0 auto;
}

.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* 按钮 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-radius: .5rem;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 600;
  transition: all .2s ease;
}

.button-primary {
  background: var(--brand-blue-700);
  color: #fff;
}

.button-primary:hover {
  background: #0a6ad1;
}

.button-outline {
  background: transparent;
  color: var(--brand-blue-700);
  border-color: var(--brand-blue-700);
}

.button-outline:hover {
  background: rgba(0, 92, 171, .06);
}

/* 头部导航 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--brand-blue-900);
  text-decoration: none;
  font-weight: 700;
}

.brand-name {
  font-weight: 700;
  letter-spacing: .5px;
}

/* 品牌Logo尺寸：高65px，宽度自适应 */
.brand img {
  height: 45px;
  width: auto;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gray-800);
  margin: 4px 0;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-link {
  color: var(--gray-800);
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: .375rem;
}

.nav-link:hover {
  background: var(--gray-50);
}

/* 第一屏 */
.section.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 96px 0 64px;
  overflow: hidden;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  z-index: 1;
}

.hero-60-40 {
  grid-template-columns: 3fr 2fr;
}

.hero-title {
  font-size: clamp(26px, 4.2vw, 48px);
  line-height: 1.15;
  color: var(--brand-blue-900);
  margin: 0 0 2.25rem;
}

.hero-subtitle {
  font-size: clamp(15px, 1.8vw, 20px);
  color: #445160;
  margin: 0 0 2.25rem;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2.25rem;
}

.badge {
  background: var(--gray-50);
  color: var(--brand-blue-900);
  border: 1px solid var(--border);
  padding: .5rem .75rem;
  border-radius: 999px;
  font-weight: 600;
}

.hero-content,
.hero-visual {
  min-width: 0;
}

/* CTA 按钮间距 */
.cta-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
}

/* 深色高科技主题 */
.hero-dark {
  background: radial-gradient(1200px 600px at 20% 20%, #001a3a 0%, #001233 35%, #050320 65%, #000000 100%);
}

.hero-dark .hero-title.hero-title-light {
  color: #ffffff;
  text-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}

.hero-dark .hero-subtitle.hero-subtitle-light {
  color: #dce5f5;
}

.badges-dark .badge {
  background: rgba(255, 255, 255, 0.08);
  color: #e6f0ff;
  border-color: rgba(255, 255, 255, 0.12);
}

/* 中央光晕与扫描线（不改HTML，使用伪元素） */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(0, 123, 255, 0.15), rgba(0, 123, 255, 0) 60%);
  filter: blur(18px);
  pointer-events: none;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 2px, transparent 6px);
  opacity: .08;
  animation: scan-move 12s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes scan-move {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-8px);
  }
}

/* 背景层：粒子Canvas与频谱SVG */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-spectrum {
  position: absolute;
  inset: auto 0 0 0;
  width: 120%;
  height: auto;
  transform: translateY(10%) translateX(-10%);
  opacity: .85;
  animation: spectrum-breathe 6s ease-in-out infinite alternate;
}

@keyframes spectrum-breathe {
  from {
    opacity: .10;
    filter: blur(0px);
  }

  to {
    opacity: .18;
    filter: blur(1px);
  }
}

/* CTA 高光按钮与反色描边按钮 */
.button-glow {
  background: #007BFF;
  color: #fff;
  box-shadow: 0 0 0 rgba(0, 123, 255, .6), 0 12px 30px rgba(0, 123, 255, .35);
  border: 1px solid rgba(255, 255, 255, .08);
}

.button-glow:hover {
  background: #0a6ad1;
  box-shadow: 0 0 16px rgba(0, 123, 255, .65), 0 16px 34px rgba(0, 123, 255, .45);
}

.button-outline-light {
  background: transparent;
  color: #e6f0ff;
  border-color: rgba(230, 240, 255, .45);
}

.button-outline-light:hover {
  background: rgba(255, 255, 255, .06);
}

/* 设备展示区：缓慢自转与拖拽倾斜 */
/* 旧的三维占位保留可复用（未在当前结构使用） */
.hero-device {
  display: grid;
  gap: .5rem;
  justify-items: center;
}

.device-stage {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4/3;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 1000px;
}

.device-stage img {
  width: 85%;
  height: auto;
  transform-style: preserve-3d;
  animation: device-autorotate 28s linear infinite;
  will-change: transform;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45));
}

@keyframes device-autorotate {
  from {
    transform: rotateY(0deg) rotateX(0deg);
  }

  to {
    transform: rotateY(360deg) rotateX(0deg);
  }
}

.device-stage.dragging img {
  animation-play-state: paused;
}

.device-tip {
  color: #9fb3d1;
  font-size: 12px;
}

/* 数据展示窗（取代3D模型） */
.hero-visualdata {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.data-window {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  padding: 16px;
  overflow: hidden;
  margin-top: 45px;
}

.brain-outline {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 48%;
  max-width: 320px;
  opacity: .9;
}

.brain-outline .beam {
  filter: blur(.2px);
}

.beam {
  stroke-dasharray: 20 160;
  animation: beam-flow 2.8s linear infinite;
}

.beam-red {
  animation-duration: 2.4s;
}

.beam-blue {
  animation-duration: 3.1s;
}

@keyframes beam-flow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -180;
  }
}

#wave-canvas {
  width: 100%;
  height: 220px;
  display: block;
  border-radius: 12px;
  background: rgba(0, 8, 20, 0.35);
  border: 1px solid rgba(255, 255, 255, .06);
}

.metrics {
  position: absolute;
  right: 27px;
  top: 52px; /* 避开顶部 signal-bar（32px 高度 + 间距） */
  display: grid;
  grid-auto-rows: min-content;
  gap: 6px;
  text-align: left; /* 内部文字左对齐 */
}

.metric {
  color: #e6f0ff;
  font-weight: 700;
  background: rgba(0, 0, 0, .25);
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  /* 使指标成为三列栅格：键 | 数值 | 单位
     即使某些没有单位，也会保留第三列占位，从而让数值列对齐 */
  display: grid;
  grid-template-columns: 42px 64px auto;
  column-gap: 6px;
}
.metric .k {
  color: #9fc1ff;
  margin-right: 6px;
  align-self: center;
}
.metric .v {
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  margin: 0 4px;
  text-align: right; /* 数值列右对齐，保持列整齐 */
  align-self: center;
}
.metric .u {
  color: #9fb3d1;
  font-weight: 500;
  align-self: center;
}

/* 信号提示条 */
.signal-bar {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 12px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  color: #e6f0ff;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0, 123, 255, 0.18), rgba(0, 123, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
}

.sig-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, .9);
  animation: sig-pulse 1.8s ease-in-out infinite;
}

@keyframes sig-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: .6;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.device-photo {
  display: grid;
  place-items: center;
}

.device-photo img {
  width: 88%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .08);
}

/* 右侧玻璃态参数卡 */
.workstation-right {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.glass-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.glass-card {
  position: relative;
  border-radius: 12px;
  padding: 10px 12px;
  background: radial-gradient(180px 120px at 20% 20%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e6f0ff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  animation: card-breath 3.2s ease-in-out infinite;
}

.glass-card.ok {
  border-color: rgba(34, 197, 94, .45);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .45);
}

@keyframes card-breath {
  0% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }

  50% {
    box-shadow: 0 15px 38px rgba(0, 0, 0, 0.5);
  }

  100% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
}

.gk {
  font-size: 12px;
  color: #9fc1ff;
}

.gv {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .5px;
}

.gu {
  font-size: 12px;
  color: #9fb3d1;
}

.gstatus {
  font-size: 12px;
  color: #34d399;
  font-weight: 700;
}

/* 现代化优势标签：竖线分隔 */
.badges-modern {
  display: flex;
  gap: .75rem;
  align-items: center;
}

.badges-modern li {
  list-style: none;
  color: #e6f0ff;
  opacity: .95;
  font-weight: 600;
}

.badges-modern li+li {
  position: relative;
  padding-left: .75rem;
}

.badges-modern li+li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(230, 240, 255, .4);
}

/* 第二屏 - 技术亮点 */
.section {
  padding: 72px 0;
}

.section-title {
  font-size: clamp(22px, 3vw, 32px);
  color: var(--brand-blue-900);
  margin: 0 0 1.25rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .25s ease, box-shadow .25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.card-body {
  padding: 1rem 1rem 1.25rem;
}

.card-title {
  margin: .25rem 0 .5rem;
  font-size: 18px;
  color: var(--brand-blue-900);
}

.card-text {
  margin: 0;
  color: #445160;
}

/* 技术亮点（交互版） */
.features-grid { display: grid; gap: 1.25rem; min-width: 0; }
.features-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: stretch; }
.features-duo > * { min-width: 0; }
.features-duo > .feature { height: 100%; display: flex; flex-direction: column; min-width: 0; }
.features-duo > .feature .feature-body { flex: 1 1 auto; min-width: 0; }
.feature { border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; max-width: 100%; }
.feature:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.feature-head { padding: 1rem 1rem .5rem; }
.feature-title { margin: 0; font-size: 20px; color: var(--brand-blue-900); letter-spacing: .3px; }
.feature-body { padding: .75rem 1rem 1rem; min-width: 0; overflow: hidden; }
.feature-note { margin: .5rem 1rem 1rem; color: #4b5a6a; }

/* 亮点一：波形对比 */
.wave-compare { display: grid; grid-template-columns: 3fr 2fr; gap: 1rem; align-items: center; }
.wave-toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.wave-hint { color: #5b6a7a; font-size: 12px; }
.toggle { display: inline-flex; align-items: center; gap: .5rem; user-select: none; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-ui { width: 40px; height: 22px; border-radius: 999px; background: #c9d6e5; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); transition: background .2s ease; }
.toggle-ui::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 2px; left: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .2s ease; }
.toggle input:checked + .toggle-ui { background: #007BFF; }
.toggle input:checked + .toggle-ui::after { transform: translateX(18px); }
.toggle-text { color: var(--brand-blue-900); font-weight: 700; }
#wave-compare-canvas { width: 100%; height: auto; aspect-ratio: 16/7; background: #0b1627; border-radius: 12px; border: 1px solid var(--border); }

.probe-explode { display: grid; gap: .5rem; justify-items: center; }
.probe-explode img { width: 100%; height: auto; }
.probe-explode figcaption { font-size: 12px; color: #5b6a7a; text-align: center; }

/* SVG 爆炸图样式与动效 */
.probe-explode.probe-svg { position: relative; padding-top: .5rem; }
.probe-toggle { position: absolute; right: 8px; top: 4px; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--brand-blue-900); font-weight: 700; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.06); transition: all .2s ease; }
.probe-toggle:hover, .probe-toggle:focus { background: #f3f7ff; outline: none; box-shadow: 0 6px 14px rgba(0,123,255,.18); border-color: #c7dbff; }
.probe-explode.probe-svg svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 24px rgba(0,0,0,.08)); }
.probe-explode.probe-svg .layer { transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease; transform-origin: 50% 50%; }
/* 默认收拢：轻微层次感 */
.probe-explode.probe-svg .layer-piezo { transform: translateY(0); }
.probe-explode.probe-svg .layer-matching { transform: translateY(0); }
.probe-explode.probe-svg .layer-backing { transform: translateY(0); }
.probe-explode.probe-svg .layer-shell-top { transform: translateY(0); }
.probe-explode.probe-svg .layer-shell-bottom { transform: translateY(0); }
.probe-explode.probe-svg .layer-cable { transform: translateX(0); }
/* 展开态：各层按法向分离，带层级延时 */
.probe-explode.probe-svg[data-expanded="true"] .layer-shell-top { transform: translateY(-24px); transition-delay: 20ms; }
.probe-explode.probe-svg[data-expanded="true"] .layer-matching { transform: translateY(-12px); transition-delay: 40ms; }
.probe-explode.probe-svg[data-expanded="true"] .layer-piezo { transform: translateY(0px); transition-delay: 60ms; }
.probe-explode.probe-svg[data-expanded="true"] .layer-backing { transform: translateY(12px); transition-delay: 80ms; }
.probe-explode.probe-svg[data-expanded="true"] .layer-shell-bottom { transform: translateY(24px); transition-delay: 100ms; }
.probe-explode.probe-svg[data-expanded="true"] .layer-cable { transform: translateX(12px); transition-delay: 120ms; }

/* 亮点二：AI 流程图 */
.ai-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .75rem; padding: 1rem .75rem 1rem; }
.flow-step { display: grid; justify-items: center; gap: .25rem; }
.icon { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(180deg, #f3f7ff, #eaf1ff); border: 1px solid var(--border); box-shadow: 0 6px 12px rgba(23,51,102,.12); position: relative; }
/* 使用伪元素承载主题图标，避免改动HTML结构 */
.icon::before { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .95; }
/* 数据采集：探头/脑血流信号图标 */
.icon-acq { background: radial-gradient(closest-side, #e6f0ff, #d9e6ff); }
.icon-acq::before { background-image: url('./img/icon-brain-signal.svg'); }
/* 自动分析：AI/芯片图标 */
.icon-ai { background: radial-gradient(closest-side, #e9fff5, #d9ffef); border-color: rgba(34,197,94,.35); }
.icon-ai::before { background-image: url('./img/icon-ai-chip.svg'); }
/* 报告生成：报告/对勾图标 */
.icon-report { background: radial-gradient(closest-side, #fff5e6, #ffecd1); border-color: rgba(245,158,11,.35); }
.icon-report::before { background-image: url('./img/icon-report-check.svg'); }
.flow-text { font-size: 13px; color: var(--brand-blue-900); font-weight: 700; }
.flow-arrow { width: 36px; height: 2px; background: #c8d3e6; position: relative; }
.flow-arrow::after { content: ""; position: absolute; right: -2px; top: -3px; border: 5px solid transparent; border-left-color: #c8d3e6; }
.flow-report { position: relative; }

/* 亮点三：场景切换器 */
.scene-switcher { display: grid; gap: .75rem; }
.scene-switcher { display: grid; gap: .75rem; min-width: 0; }
.scene-main { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); aspect-ratio: 16/9; min-height: 260px; background: #f7faff; width: 100%; max-width: 100%; min-width: 0; }
.scene-main img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: 1; transition: opacity .35s ease; }
.scene-main img.is-fading { opacity: 0; }
.scene-thumbs { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.feature-body.scene-switcher { overflow: hidden; min-width: 0; }
.scene-thumb { padding: .375rem .75rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--brand-blue-900); font-weight: 700; cursor: pointer; transition: all .2s ease; }
.scene-thumb:hover { background: #f3f7ff; }
.scene-thumb.is-active { background: #007BFF; color: #fff; border-color: #007BFF; box-shadow: 0 6px 16px rgba(0,123,255,.25); }

/* 悬停微交互：面板亮度上浮 */
.feature:hover { background: #fcfdff; }

/* 响应式细节 */
@media (max-width: 992px) {
  .wave-compare { grid-template-columns: 1fr; }
  .ai-flow { grid-template-columns: 1fr; justify-items: center; }
  .features-duo { grid-template-columns: 1fr; }
  /* 平板及以下：场景主图按宽度等比，避免溢出 */
  .scene-main { aspect-ratio: auto; }
  .scene-main img { height: auto; object-fit: contain; }
}

/* 自动化软件流程：左右布局 */
.ai-lr { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; }
.ai-left { min-width: 0; }
.ai-right { min-width: 0; }
.ai-stack { min-width: 0; }
.report-preview { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,.06); background: #fff; aspect-ratio: 16/9; min-height: 260px; width: 100%; max-width: 100%; }
.report-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* 明确主场景图像元素的自适应，避免 HTML 宽高属性在特定浏览器下干扰布局 */
#sceneMain { width: 100% !important; height: 100% !important; max-width: 100% !important; }

@media (max-width: 992px) {
  .ai-lr { grid-template-columns: 1fr; }
}

/* 第二屏 - 厂家实力 */
.section.about {
  background: var(--gray-50);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

/* 厂家实力、权威认证等 about-media 图片风格，与前文一致 */
.about-media img {
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .10);
}

.stats {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: .5rem;
  color: var(--gray-800);
}

/* 第二屏 - 客户见证 */
.logo-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0;
  margin: 1rem 0 1.25rem;
}

.quote {
  margin: 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--brand-blue-700);
  background: #fff;
}

/* 第三屏 - 联系 */
.section.contact {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2rem;
  align-items: start;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: .75rem;
}

/* 右侧联系面板（重设计样式） */
.contact-panel { display: grid; gap: .75rem; justify-items: center; }
.contact-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: .75rem .875rem;
  max-width: 340px;
  width: 100%;
}
.tel-card .tel-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tel-card .tel-label { color: var(--brand-blue-900); font-weight: 700; }
.tel-card .tel-number { font-size: 20px; font-weight: 800; color: var(--brand-blue-700); text-decoration: none; }
.tel-card .tel-number:hover { text-decoration: underline; }
.tel-card .tel-time { color: #64748B; font-size: 12px; margin-top: .25rem; }

/* 更协调的电话行：图标 + 文本两行 */
.tel-line { align-items: center !important; justify-content: flex-start !important; gap: .75rem; }
/* 使用本地SVG作为电话图标，统一风格 */
.tel-icon { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(closest-side, #d8e8ff, #c7dbff); border: 1px solid #c7dbff; display: grid; place-items: center; box-shadow: 0 6px 12px rgba(0,123,255,.15); }
.tel-icon::before { content: ""; display: block; width: 20px; height: 20px; background: url('./img/icon-phone.svg') center/contain no-repeat; }
.tel-meta { display: grid; line-height: 1.1; }
.tel-meta .tel-label { font-size: 12px; color: #5b6a7a; font-weight: 600; }
.tel-meta .tel-number { font-size: 22px; font-weight: 900; color: var(--brand-blue-700); }

.contact-actions { display: grid; grid-auto-flow: column; gap: .5rem; align-items: center; justify-content: center; }

.qrcode-card { display: grid; justify-items: center; gap: .5rem; }
.qrcode-card img { border-radius: 8px; border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.qr-tip { margin: 0; color: #5b6a7a; font-size: 12px; }

.contact-address { color: #445160; font-size: 12px; padding: .5rem .25rem; text-align: center; }

/* 让右侧标题更贴近模块 */
.contact-right h3 { margin: 0 0 .5rem; }

@media (max-width: 992px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-actions { grid-auto-flow: row; justify-items: stretch; }
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1rem;
}

.contact-form-grid label {
  grid-column: span 2;
  font-weight: 600;
  color: var(--gray-800);
}

.contact-form-grid input[type="text"],
.contact-form-grid input[type="tel"],
.contact-form-grid input[type="email"] {
  grid-column: span 2;
  height: 44px;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  font-size: 16px;
}

.contact-form-grid .form-tip {
  grid-column: span 2;
  margin: .5rem 0;
  color: #5b6a7a;
}

.contact-form-grid .button {
  grid-column: span 2;
  margin-top: .25rem;
}

/* 页脚 */
.site-footer {
  background: var(--brand-blue-950);
  color: #fff;
  padding: 32px 0;
}

.footer-inner {
  display: grid;
  gap: 1rem;
}

.footer-nav {
  display: flex;
  gap: 1rem;
}

.footer-nav a {
  color: #d9e6f7;
  text-decoration: none;
}

.footer-nav a:hover {
  text-decoration: underline;
}

/* 版权区链接颜色继承（避免显示默认蓝色），不影响导航链接 */
.site-footer .copyright a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .7);
}
.site-footer .copyright a:hover {
  text-decoration-color: rgba(255, 255, 255, .95);
}

/* 浮动客服按钮 */
.float-chat {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-blue-700);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  box-shadow: var(--shadow);
}

.float-chat:hover {
  background: #0a6ad1;
}

/* 动效与可见性进入动画 */
.reveal-up {
  opacity: 0;
  transform: translateY(16px);
  transition: all .6s ease;
}

.reveal-fade {
  opacity: 0;
  transition: opacity .6s ease;
}

.revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* 响应式 */
@media (max-width: 992px) {

  .hero-grid,
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .nav-toggle {
    display: inline-block;
  }

  .nav-menu {
    position: fixed;
    right: 12px;
    top: 72px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: .5rem;
    padding: .5rem;
    flex-direction: column;
    gap: .25rem;
    min-width: 160px;
    display: none;
  }

  .nav-menu.is-open {
    display: flex;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-grid label,
  .contact-form-grid input,
  .contact-form-grid .button,
  .contact-form-grid .form-tip {
    grid-column: 1;
  }

  .brain-outline {
    width: 56%;
  }

  #wave-canvas {
    height: 180px;
  }

  .glass-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 限制英雄区频谱背景在小屏不超出视口，避免横向溢出 */
  .hero-bg { overflow: hidden; }
  .hero-spectrum { width: 100%; transform: translateY(10%) translateX(0); left: 0; right: 0; }
  /* 稍微增大容器占比，减少视觉留白 */
  .container { width: min(1160px, 96%); }

  /* 小屏：场景切换主图按宽度等比缩放，避免任何溢出或裁切异常 */
  .scene-main { aspect-ratio: auto; width: 100%; max-width: 100%; overflow: hidden; }
  .scene-main img { width: 100% !important; height: auto !important; object-fit: contain; object-position: center; }
  .feature-body.scene-switcher { overflow: hidden; }
}