/* ============================================================================
 * 明臻网络官网 v2 · 设计系统（单文件，无构建、无外部字体、无依赖）
 *
 * 「流畅自然舒服」在这里被拆成可执行的四件事：
 *   ① 首屏不等待 —— 系统字体栈（零字体下载）、关键样式内联（见 views/layout.js）、
 *      没有 LOADING 门、没有任何阻塞脚本。
 *   ② 动效只做"轻"的 —— 只动 opacity 与 transform（合成层，不触发重排），
 *      缓动统一用 cubic-bezier(.16,1,.3,1)（"先快后缓"的自然收尾），
 *      并且 prefers-reduced-motion 全关。
 *   ③ 排版为中文调的 —— 行高 1.75、字距 .01em、正文最大行宽 38 个汉字左右、
 *      标题行高 1.25；不用衬线混排、不做全大写。
 *   ④ 颜色有克制 —— 墨蓝（信任/工业）+ 安全青绿（安全/通过）两个主色，
 *      其余靠灰阶与留白分层；正文对比度全部 ≥ AA。
 * ========================================================================= */

/* --- 令牌 ---------------------------------------------------------------- */
:root {
  /* 色：墨蓝主色（工业/信任）+ 安全青绿（EHS 语义色） */
  --ink-900: #0b1220;
  --ink-800: #121b2c;
  --ink-700: #1b2740;
  --ink-600: #2a3852;
  --ink-500: #48566f;
  --ink-400: #6b788f;
  --ink-300: #9aa5b8;
  --ink-200: #cbd3e0;
  --ink-100: #e8ecf3;
  --ink-50: #f4f6fa;
  --white: #ffffff;

  --brand-700: #0f766e;
  --brand-600: #0d9488;
  --brand-500: #14b8a6;
  --brand-100: #ccfbf1;
  --brand-50: #f0fdfa;

  --safe-600: #15803d;
  --safe-100: #dcfce7;
  --warn-600: #b45309;
  --warn-100: #fef3c7;
  --danger-600: #b91c1c;
  --danger-100: #fee2e2;

  /* 语义 */
  --bg: var(--white);
  --bg-soft: var(--ink-50);
  --bg-deep: var(--ink-900);
  --text: var(--ink-800);
  --text-soft: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-invert: #eef2f8;
  --line: var(--ink-100);
  --line-strong: var(--ink-200);
  --accent: var(--brand-600);
  --accent-soft: var(--brand-50);

  /* 字号：中文正文字号比英文大一档才"看得住" */
  --f-xs: 13px;
  --f-sm: 14px;
  --f-base: 16.5px;
  --f-lg: 18px;
  --f-xl: 21px;
  --f-2xl: 26px;
  --f-3xl: clamp(30px, 3.4vw, 40px);
  --f-4xl: clamp(36px, 5vw, 58px);
  --f-5xl: clamp(42px, 6.4vw, 76px);

  /* 间距：8 的倍数，只有一档"呼吸感"区间 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 44px; --s8: 60px; --s9: 80px; --s10: 110px;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 18, 32, .06), 0 1px 1px rgba(11, 18, 32, .04);
  --shadow: 0 10px 30px -12px rgba(11, 18, 32, .18), 0 2px 8px rgba(11, 18, 32, .04);
  --shadow-lg: 0 30px 70px -30px rgba(11, 18, 32, .28), 0 8px 24px -12px rgba(11, 18, 32, .12);

  /* 动效：三档就够，速度差异要看得出来（否则"生硬"） */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 160ms var(--ease);
  --t: 260ms var(--ease);
  --t-slow: 560ms var(--ease);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  --measure: 38em;        /* 正文最大行宽（约 38 个汉字） */
  --container: 1200px;
  --header-h: 68px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 锚点跳转时不要把标题压在粘性头部下面 */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--f-base);
  line-height: 1.75;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 滚动条出现/消失时不抖 */
  overflow-y: scroll;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand-700); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--ink-900);
  text-wrap: balance;              /* 现代浏览器：标题不要出现半行孤字 */
}
h1 { font-size: var(--f-4xl); letter-spacing: -.02em; }
h2 { font-size: var(--f-3xl); }
h3 { font-size: var(--f-xl); }
p { margin: 0 0 var(--s4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 650; color: var(--ink-900); }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.2em; }
li { margin-bottom: var(--s2); }
code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--ink-50);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
}

/* --- 布局原语 ------------------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s5); }
.container-narrow { max-width: 880px; }

.section { padding: var(--s10) 0; }
.section-sm { padding: var(--s8) 0; }
.section-soft { background: var(--bg-soft); }
.section-deep { background: var(--bg-deep); color: var(--text-invert); }
.section-deep h1, .section-deep h2, .section-deep h3 { color: var(--white); }
.section-deep p { color: #b9c4d6; }
.section-line { border-top: 1px solid var(--line); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--f-xs);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: var(--s3);
}
.eyebrow::before {
  content: "";
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.section-head { max-width: 46em; margin-bottom: var(--s8); }
.section-head p { font-size: var(--f-lg); color: var(--text-soft); }

.grid { display: grid; gap: var(--s5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- 按钮 ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--f-base);
  font-weight: 600;
  line-height: 1.2;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn-primary { background: var(--ink-900); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--ink-700); color: var(--white); box-shadow: var(--shadow); transform: translateY(-1px); }
.btn-accent { background: var(--brand-600); color: var(--white); }
.btn-accent:hover { background: var(--brand-700); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink-800); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink-400); color: var(--ink-900); background: var(--white); }
.btn-quiet { color: var(--accent); padding: 12px 4px; }
.btn-quiet::after { content: "→"; transition: transform var(--t); }
.btn-quiet:hover::after { transform: translateX(4px); }
.btn-lg { padding: 15px 28px; font-size: var(--f-lg); }
.btn-block { width: 100%; }

/* --- 头部 ---------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 12px rgba(11, 18, 32, .04);
}
.header .container { display: flex; align-items: center; gap: var(--s5); }
.brand { display: inline-flex; align-items: center; gap: var(--s3); color: var(--ink-900); font-weight: 700; letter-spacing: -.01em; }
.brand:hover { color: var(--ink-900); }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text small { font-size: 11px; font-weight: 500; color: var(--text-faint); letter-spacing: .06em; }

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
.nav a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-600);
  font-size: var(--f-sm);
  font-weight: 550;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav a:hover { color: var(--ink-900); background: var(--ink-50); }
.nav a[aria-current="page"] { color: var(--ink-900); background: var(--ink-50); }
.header-cta { display: flex; align-items: center; gap: var(--s3); margin-left: var(--s4); }
.nav-toggle { display: none; }

/* --- 首屏 ---------------------------------------------------------------- */
.hero { position: relative; padding: var(--s9) 0 var(--s10); overflow: hidden; }
/* 背景：一层极淡的"网格 + 光斑"，用 CSS 画，不加载图片 */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(900px 420px at 78% -8%, rgba(20, 184, 166, .12), transparent 70%),
    radial-gradient(700px 380px at 6% 8%, rgba(11, 18, 32, .05), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, transparent 100%);
  pointer-events: none;
}
.hero .container { position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s8);
  align-items: center;
}
.hero h1 { margin-bottom: var(--s5); }
.hero-lead { font-size: var(--f-lg); color: var(--text-soft); max-width: 34em; margin-bottom: var(--s6); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-bottom: var(--s5); }
.hero-note { font-size: var(--f-sm); color: var(--text-faint); }
.hero-note strong { color: var(--ink-700); }

/* 首屏右侧：隐患闭环四步（纯 CSS/SVG，不加载 3D） */
.flowcard {
  position: relative;
  padding: var(--s6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.flowcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s5); }
.flowcard-title { font-size: var(--f-sm); font-weight: 650; color: var(--ink-700); }
.flowcard-dots { display: flex; gap: 5px; }
.flowcard-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); display: block; }
.flow-steps { display: grid; gap: var(--s3); }
.flow-step {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: var(--s3);
  padding: 12px var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-50);
  opacity: 0;
  transform: translateY(8px);
  /* ⚠️ 别再在这里追加 var(--ease)：--t-slow 本身已经是「560ms cubic-bezier(...)」，
     再拼一个缓动 = animation 简写里出现两个 timing function → 整条声明非法被丢弃
     → 步骤永远停在 opacity:0（2026-10-27 首屏卡片空白就是这个原因）。 */
  animation: stepIn var(--t-slow) forwards;
}
.flowcard-caption { margin: 14px 0 0; font-size: 13px; color: var(--text-faint); }
.flow-step:nth-child(1) { animation-delay: .15s; }
.flow-step:nth-child(2) { animation-delay: .28s; }
.flow-step:nth-child(3) { animation-delay: .41s; }
.flow-step:nth-child(4) { animation-delay: .54s; }
.flow-step-idx {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line-strong);
  font-size: var(--f-xs); font-weight: 700; color: var(--ink-600);
}
.flow-step-text { font-size: var(--f-sm); color: var(--ink-700); font-weight: 550; }
.flow-step-state {
  font-size: var(--f-xs);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.st-done { color: var(--safe-600); background: var(--safe-100); border-color: transparent; }
.st-doing { color: var(--warn-600); background: var(--warn-100); border-color: transparent; }
.st-todo { color: var(--ink-500); background: var(--ink-100); border-color: transparent; }
.st-over { color: var(--danger-600); background: var(--danger-100); border-color: transparent; }
.flow-step.is-active { border-color: var(--brand-500); background: var(--brand-50); }

@keyframes stepIn {
  to { opacity: 1; transform: translateY(0); }
}

/* --- 信任条 -------------------------------------------------------------- */
.trustbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.trustbar .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s7); padding-top: var(--s5); padding-bottom: var(--s5); }
.trust-item { display: flex; flex-direction: column; }
.trust-value { font-size: var(--f-2xl); font-weight: 750; color: var(--ink-900); line-height: 1.1; letter-spacing: -.02em; }
.trust-label { font-size: var(--f-xs); color: var(--text-faint); letter-spacing: .04em; }
.trust-sep { width: 1px; height: 34px; background: var(--line); }
.trust-quote { margin-left: auto; max-width: 30em; font-size: var(--f-sm); color: var(--text-soft); }
.trust-quote strong { color: var(--ink-800); }

/* --- 卡片 ---------------------------------------------------------------- */
.card {
  padding: var(--s6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card h3 { margin-bottom: var(--s3); }
.card p { color: var(--text-soft); font-size: var(--f-sm); }
.card-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--brand-700);
  margin-bottom: var(--s4);
}
.card-icon svg { width: 22px; height: 22px; }

.card-flat { background: var(--ink-50); border-color: transparent; }
.card-flat:hover { background: var(--white); border-color: var(--line-strong); }

/* 深色区里的卡片 */
.section-deep .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.section-deep .card:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
.section-deep .card p { color: #a9b6ca; }
.section-deep .card h3 { color: var(--white); }

/* --- 闭环步骤（竖排时间线） ---------------------------------------------- */
.steps { display: grid; gap: var(--s5); counter-reset: step; }
.step-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
.step-num {
  counter-increment: step;
  width: 56px; height: 56px;
  border-radius: 18px;
  display: grid; place-items: center;
  background: var(--ink-900); color: var(--white);
  font-weight: 750; font-size: var(--f-lg);
  box-shadow: var(--shadow-sm);
}
.step-num::before { content: counter(step, decimal-leading-zero); }
.step-body h3 { margin-bottom: var(--s2); }
.step-body p { color: var(--text-soft); font-size: var(--f-base); }
.step-body .meta { font-size: var(--f-sm); color: var(--brand-700); font-weight: 600; }

/* --- 六步闭环：卡片网格（宽屏 3×2） -----------------------------------------
 * 为什么不用上面那套竖排时间线：它跟"左标题 + 右列表"的两栏布局配合时，
 * 左栏只有三行字、右栏一千多像素高 → **左下角空出一大片**（2026-10-05 用户指出）。
 * 改成"区块头通栏 + 卡片网格"后：区块高度约少一半，六个步骤仍能一眼扫完。
 * `.steps-grid` 是**修饰类**，`.steps` 的竖排形态保留给其它页面（如落地页的四个步骤）用。 */
.steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.steps-grid .step-item {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.steps-grid .step-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
.steps-grid .step-num {
  width: 44px; height: 44px;
  border-radius: 14px;
  font-size: var(--f-base);
  margin-bottom: var(--s4);
}
/* 卡片等高：正文区撑开，"留痕点"那行贴到卡片底部 —— 六张卡片底部对齐才显得齐整 */
.steps-grid .step-body { display: flex; flex-direction: column; flex: 1; }
.steps-grid .step-body h3 { font-size: var(--f-lg); }
.steps-grid .step-body .meta { margin-top: auto; padding-top: var(--s4); }

/* --- 产品界面（真截图或 CSS 画的看板） ----------------------------------- */
.shot {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
.shot-bar {
  display: flex; align-items: center; gap: var(--s2);
  padding: 10px var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--ink-50);
}
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); display: block; }
.shot-bar span { margin-left: var(--s3); font-size: var(--f-xs); color: var(--text-faint); font-family: var(--font-mono); }
.shot img { width: 100%; }
.shot-caption { padding: var(--s4) var(--s5); border-top: 1px solid var(--line); font-size: var(--f-sm); color: var(--text-soft); }

/* CSS 画的台账看板（没有截图时用它，保证页面不"空"） */
.mock { padding: var(--s5); }
.mock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.mock-title { font-weight: 650; font-size: var(--f-sm); color: var(--ink-700); }
.mock-tabs { display: flex; gap: var(--s2); }
.mock-tab { font-size: var(--f-xs); padding: 3px 10px; border-radius: var(--radius-pill); background: var(--ink-100); color: var(--ink-500); }
.mock-tab.is-on { background: var(--ink-900); color: var(--white); }
.mock-row {
  display: grid;
  grid-template-columns: 1.6fr .8fr .8fr .9fr;
  gap: var(--s3);
  align-items: center;
  padding: 11px var(--s3);
  border-bottom: 1px solid var(--line);
  font-size: var(--f-sm);
}
.mock-row:last-child { border-bottom: 0; }
.mock-row.is-head { color: var(--text-faint); font-size: var(--f-xs); border-bottom-color: var(--line-strong); }
.mock-name { color: var(--ink-800); font-weight: 550; }
.mock-cell { color: var(--text-soft); }
.mock-bar { height: 6px; border-radius: 3px; background: var(--ink-100); overflow: hidden; }
.mock-bar i { display: block; height: 100%; background: var(--brand-500); border-radius: 3px; }

/* --- 场景网格 ------------------------------------------------------------ */
.scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s3); }
.scene {
  display: flex; align-items: center; gap: var(--s3);
  padding: 12px var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--f-sm);
  color: var(--ink-700);
  background: var(--white);
  transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.scene:hover { border-color: var(--brand-500); background: var(--brand-50); transform: translateY(-2px); }
.scene svg { width: 16px; height: 16px; color: var(--brand-600); flex: none; }

/* --- 数字/统计 ---------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.stat { padding: var(--s5); border-radius: var(--radius); background: var(--ink-50); }
.stat-value { font-size: var(--f-3xl); font-weight: 750; letter-spacing: -.02em; color: var(--ink-900); line-height: 1.05; }
.stat-label { font-size: var(--f-sm); color: var(--text-soft); margin-top: var(--s2); }

/* --- 案例 ----------------------------------------------------------------- */
.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: center;
}
.case-card {
  padding: var(--s6);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.case-kv { display: grid; gap: var(--s3); margin: var(--s5) 0 0; }
.case-kv div { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--f-sm); padding-bottom: var(--s3); border-bottom: 1px dashed var(--line-strong); }
.case-kv div:last-child { border-bottom: 0; padding-bottom: 0; }
.case-kv dt, .case-kv span:first-child { color: var(--text-faint); }
.case-kv strong { color: var(--ink-800); }

/* --- FAQ ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: var(--s4) 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  font-size: var(--f-lg);
  transition: color var(--t-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: "+";
  font-size: 22px;
  line-height: 1;
  color: var(--text-faint);
  transition: transform var(--t);
  flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: var(--s3); color: var(--text-soft); }

/* --- 结尾 CTA ----------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: var(--s9) 0;
  background: var(--ink-900);
  color: var(--text-invert);
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(700px 320px at 82% 20%, rgba(20,184,166,.22), transparent 70%);
  pointer-events: none;
}
.cta-band .container { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6); }
.cta-band h2 { color: var(--white); margin-bottom: var(--s3); }
.cta-band p { color: #b9c4d6; margin: 0; }
.cta-actions { margin-left: auto; display: flex; gap: var(--s4); flex-wrap: wrap; }
.cta-band .btn-primary { background: var(--white); color: var(--ink-900); }
.cta-band .btn-primary:hover { background: var(--brand-50); color: var(--ink-900); }
.cta-band .btn-ghost { color: var(--white); border-color: rgba(255,255,255,.3); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.08); color: var(--white); border-color: rgba(255,255,255,.5); }

/* --- 页脚 --------------------------------------------------------------- */
.footer { background: var(--white); border-top: 1px solid var(--line); padding: var(--s8) 0 var(--s6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--s7); margin-bottom: var(--s7); }
.footer h4 { font-size: var(--f-sm); margin-bottom: var(--s4); color: var(--ink-900); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: var(--s2); }
.footer a { color: var(--text-soft); font-size: var(--f-sm); }
.footer a:hover { color: var(--ink-900); }
.footer-about { color: var(--text-soft); font-size: var(--f-sm); max-width: 28em; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: space-between;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--f-xs);
  color: var(--text-faint);
}
/* 备案号：工信部要求网站底部展示备案号并链接到备案系统（beian.miit.gov.cn）。
   链接做成和旁边文字同样的低调样式，别抢视觉，但要有可点击的提示（hover 变色 + 下划线）。 */
.footer-icp { color: var(--text-faint); text-decoration: none; }
.footer-icp:hover { color: var(--ink-900); text-decoration: underline; }

/* --- 内页头部 ----------------------------------------------------------- */
.page-head { padding: var(--s8) 0 var(--s7); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.page-head h1 { margin-bottom: var(--s4); }
.page-head p { font-size: var(--f-lg); color: var(--text-soft); }

/* --- 表单 --------------------------------------------------------------- */
.form { display: grid; gap: var(--s4); max-width: 620px; }
.field label { display: block; font-size: var(--f-sm); font-weight: 600; margin-bottom: var(--s2); color: var(--ink-700); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 12px var(--s4);
  font: inherit;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--brand-50);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-hint { font-size: var(--f-xs); color: var(--text-faint); margin-top: var(--s2); }
.form-note {
  padding: var(--s4);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--brand-700);
  font-size: var(--f-sm);
}
.form-note.is-error { background: var(--danger-100); color: var(--danger-600); }

/* --- 滚动渐显（JS 加 .reveal，进入视口后加 .is-in） --------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.is-in { opacity: 1; transform: none; }
/* 逐项错开：同一容器里的多个 .reveal 依次出现，比"一起蹦出来"自然 */
.reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 70ms; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 140ms; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 210ms; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 280ms; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 350ms; }

/* --- 响应式 ------------------------------------------------------------- */
@media (max-width: 1000px) {
  :root { --s10: 76px; --s9: 60px; --s8: 48px; }
  .hero { padding: var(--s8) 0 var(--s9); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
  .trust-quote { margin-left: 0; max-width: none; }
  .cta-actions { margin-left: 0; }
}

@media (max-width: 720px) {
  :root { --f-base: 16px; --s10: 60px; --s9: 48px; }
  .container { padding: 0 var(--s4); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trustbar .container { gap: var(--s5); }
  .trust-sep { display: none; }
  .step-item { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); }
  .step-num { width: 44px; height: 44px; border-radius: 14px; font-size: var(--f-base); }
  /* 六步闭环：窄屏一张卡片一行太占纵向空间，回到紧凑的「编号 | 正文」两栏 */
  .steps-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .steps-grid .step-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--s4);
    align-items: start;
    padding: var(--s4);
  }
  .steps-grid .step-num { margin-bottom: 0; }
  .steps-grid .step-body .meta { margin-top: var(--s3); padding-top: 0; }
  .mock-row { grid-template-columns: 1.4fr .9fr; }
  .mock-row > :nth-child(n+3) { display: none; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { flex: 1 1 auto; }

  /* 移动端导航：折叠成抽屉 */
  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink-800);
  }
  .nav-toggle span { position: relative; width: 16px; height: 2px; background: currentColor; border-radius: 2px; display: block; }
  .nav-toggle span::before, .nav-toggle span::after {
    content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform var(--t), top var(--t);
  }
  .nav-toggle span::before { top: -5px; }
  .nav-toggle span::after { top: 5px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--s3) var(--s4) var(--s5);
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t), transform var(--t);
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 13px var(--s3); font-size: var(--f-base); border-radius: var(--radius-sm); }
  .header-cta { display: none; }
}

/* --- 更窄的手机（≤520px）-------------------------------------------------
 * 信任条用的是 flex-wrap：4 个数字在 420px 下会排成「3 个 + 1 个」，最后那个落单。
 * 这里改成两列网格，正好 2×2；引言跨整行放到下面。
 * （2026-10-05 用真 420px 视口截图时发现的——以前拿不到这个宽度的证据。） */
@media (max-width: 520px) {
  .trustbar .container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5) var(--s4);
    align-items: start;
  }
  .trust-quote { grid-column: 1 / -1; margin-top: var(--s2); }
}

/* --- 无障碍 / 尊重系统偏好 --------------------------------------------- */
@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, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .flow-step { opacity: 1; transform: none; }
}

/* 打印：把官网打成 PDF 时别输出导航与深色底 */
@media print {
  .header, .cta-band, .nav-toggle { display: none !important; }
  body { font-size: 12pt; }
  .section { padding: 16pt 0; }
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-900); color: var(--white);
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; z-index: 100;
}
.skip-link:focus { left: 0; }