/* ============================================================
   EDM电火花加工 · 深色电气科技风
   原创设计：暗室放电意象 / 电火花青蓝渐变 / 墨蓝金属底
   ============================================================ */

:root {
  --bg-0: #05070d;
  --bg-1: #0a0f1c;
  --bg-2: #0f1626;
  --bg-3: #141d33;
  --bg-4: #1a2540;

  --line: rgba(129, 140, 248, 0.16);
  --line-2: rgba(129, 140, 248, 0.30);

  --tx-1: #e8eefb;
  --tx-2: #a9b7d6;
  --tx-3: #6d7d9f;

  --ac-cyan: #22d3ee;
  --ac-blue: #3b82f6;
  --ac-indigo: #818cf8;
  --ac-violet: #a78bfa;

  --grad-ac: linear-gradient(120deg, #22d3ee 0%, #3b82f6 55%, #818cf8 100%);
  --grad-spark: linear-gradient(90deg, #22d3ee, #818cf8, #f0abfc);
  --grad-warm: linear-gradient(120deg, #f59e0b, #f97316);

  --warn: #fbbf24;
  --danger: #f87171;
  --ok: #34d399;

  --h2-inset: 16px;        /* 面包屑与 H2 文字左缘对齐量（文章/产品/列表） */
  --toc-w: 240px;
  --cat-w: 240px;
  --content-w: 760px;
  --head-h: 64px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Segoe UI", sans-serif;
  --mono: "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg-1);
  color: var(--tx-1);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ac-cyan); text-decoration: none; transition: color .2s; }
a:hover { color: #67e8f9; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { line-height: 1.35; font-weight: 700; }
::selection { background: rgba(34, 211, 238, 0.32); color: #fff; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 顶部固定导航 ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--head-h);
  background: rgba(7, 11, 22, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: var(--head-h); display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--tx-1); letter-spacing: .5px; flex-shrink: 0; }
.brand:hover { color: #fff; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--grad-ac);
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.45);
}
.brand-mark svg { width: 18px; height: 18px; }
.brand em { font-style: normal; background: var(--grad-spark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nav-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin-left: auto; }
.nav-menu > li { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 13px; border-radius: var(--r-sm);
  color: var(--tx-2); font-size: 15px; font-weight: 500; white-space: nowrap;
}
.nav-link:hover, .nav-menu > li:hover > .nav-link, .nav-link.active { color: #fff; background: rgba(59, 130, 246, 0.14); }
.nav-link .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; }
.nav-drop {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 168px; padding: 8px;
  background: rgba(13, 19, 35, 0.97); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: 0 18px 50px rgba(2, 6, 17, 0.7);
  display: none; flex-direction: column; gap: 2px;
}
.nav-menu > li:hover .nav-drop, .nav-menu > li:focus-within .nav-drop, .nav-menu > li.nav-open .nav-drop { display: flex; }
/* hover 桥接区：填补导航项与下拉之间的 8px 间隙，鼠标下滑穿过时不收起 */
.nav-menu > li > .nav-drop::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 12px;
  background: transparent;
}
.nav-drop a { padding: 8px 12px; border-radius: var(--r-sm); color: var(--tx-2); font-size: 14px; }
.nav-drop a:hover { background: rgba(34, 211, 238, 0.12); color: #fff; }
.nav-cta {
  padding: 9px 18px; border-radius: 999px; background: var(--grad-ac); color: #04121f !important;
  font-weight: 700; font-size: 14px; white-space: nowrap;
  box-shadow: 0 4px 18px rgba(34, 211, 238, 0.35);
}
.nav-cta:hover { filter: brightness(1.1); color: #04121f !important; }
.nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 10px; background: transparent; cursor: pointer; padding: 0; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 18px; height: 2px; background: var(--tx-1); border-radius: 2px; margin: 0 auto; position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* 移动端抽屉菜单 */
.mobile-panel {
  position: fixed; top: var(--head-h); left: 0; right: 0; z-index: 999;
  background: rgba(9, 14, 26, 0.98); border-bottom: 1px solid var(--line);
  max-height: 0; overflow: hidden; transition: max-height .35s ease;
}
.mobile-panel.open { max-height: 78vh; overflow-y: auto; }
.mobile-panel .mp-inner { padding: 14px 24px 22px; display: flex; flex-direction: column; gap: 4px; }
.mobile-panel a.mp-link { padding: 12px 10px; border-radius: var(--r-sm); color: var(--tx-1); font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--line); }
.mobile-panel a.mp-link:hover { background: rgba(34, 211, 238, 0.10); }
.mobile-panel .mp-group > summary { padding: 12px 10px; color: var(--tx-2); font-size: 13px; font-weight: 700; letter-spacing: 1px; cursor: pointer; list-style: none; }
.mobile-panel .mp-group > summary::after { content: "＋"; float: right; color: var(--ac-cyan); }
.mobile-panel .mp-group[open] > summary::after { content: "－"; }
.mobile-panel .mp-group a { display: block; padding: 9px 10px 9px 22px; color: var(--tx-2); font-size: 14px; border-radius: var(--r-sm); }
.mobile-panel .mp-group a:hover { color: #fff; background: rgba(34, 211, 238, 0.10); }

body { padding-top: var(--head-h); }

/* ---------- 首屏 Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 92px 0 84px;
  background:
    radial-gradient(900px 480px at 82% -10%, rgba(59, 130, 246, 0.22), transparent 60%),
    radial-gradient(700px 420px at 8% 110%, rgba(129, 140, 248, 0.14), transparent 60%),
    var(--bg-1);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(129, 140, 248, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(129, 140, 248, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(700px 420px at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(700px 420px at 50% 40%, #000 30%, transparent 75%);
}
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(34, 211, 238, 0.08);
  color: var(--ac-cyan); font-size: 13px; font-weight: 600; letter-spacing: 2px; margin-bottom: 22px;
}
.hero-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-cyan); box-shadow: 0 0 10px var(--ac-cyan); animation: pulse 2.2s infinite; }
.hero h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; letter-spacing: 1px; margin: 0 0 20px; }
.hero h1 .grad { background: var(--grad-spark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-sub { font-size: 17px; color: var(--tx-2); max-width: 560px; margin: 0 0 34px; }
.hero-sub strong { color: var(--tx-1); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: transform .2s, filter .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--grad-ac); color: #04121f; box-shadow: 0 8px 28px rgba(34, 211, 238, 0.35); }
.btn-primary:hover { filter: brightness(1.12); color: #04121f; }
.btn-ghost { border-color: var(--line-2); color: var(--tx-1); background: rgba(20, 29, 51, 0.5); }
.btn-ghost:hover { border-color: var(--ac-cyan); color: #fff; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat {
  padding: 16px 14px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(20, 29, 51, 0.72), rgba(10, 15, 28, 0.5));
}
.stat b { display: block; font-size: 24px; font-weight: 800; background: var(--grad-spark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--mono); }
.stat span { font-size: 12.5px; color: var(--tx-3); line-height: 1.5; display: block; margin-top: 4px; }

/* 放电核心动画（纯 CSS，reduced-motion 降级） */
.spark-core { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; }
.spark-core .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(34, 211, 238, 0.25); animation: ringPulse 3.6s ease-out infinite; }
.spark-core .ring:nth-child(2) { animation-delay: 1.2s; }
.spark-core .ring:nth-child(3) { animation-delay: 2.4s; }
.spark-core .core {
  position: absolute; inset: 26%; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #e0f2fe, #22d3ee 40%, #3b82f6 70%, #1e3a8a 100%);
  box-shadow: 0 0 90px rgba(34, 211, 238, 0.55), inset 0 0 40px rgba(255, 255, 255, 0.35);
  animation: coreFlicker 2.8s ease-in-out infinite;
}
.spark-core .arc { position: absolute; background: var(--grad-spark); border-radius: 2px; opacity: .9; filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.8)); }
.spark-core .arc.a1 { width: 34%; height: 3px; top: 20%; left: -12%; transform: rotate(24deg); animation: arcFlash 2.1s infinite; }
.spark-core .arc.a2 { width: 26%; height: 3px; bottom: 22%; right: -10%; transform: rotate(-32deg); animation: arcFlash 1.7s .5s infinite; }
.spark-core .arc.a3 { width: 20%; height: 2px; top: 8%; right: 12%; transform: rotate(64deg); animation: arcFlash 2.6s 1s infinite; }
.spark-core .label {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-family: var(--mono); font-size: 13px; color: #e0f2fe; letter-spacing: 1px; text-shadow: 0 2px 12px rgba(2, 6, 17, 0.9);
}
.spark-core .label b { display: block; font-size: 21px; letter-spacing: 2px; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ringPulse { 0% { transform: scale(.62); opacity: 0; } 18% { opacity: .8; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes coreFlicker { 0%, 100% { filter: brightness(1); } 48% { filter: brightness(1.22); } 52% { filter: brightness(.92); } 56% { filter: brightness(1.14); } }
@keyframes arcFlash { 0%, 86%, 100% { opacity: 0; } 88% { opacity: 1; } 92% { opacity: .3; } 94% { opacity: .95; } }

/* ---------- 通用区块 ---------- */
.section { padding: 72px 0; }
.section:nth-of-type(even) { background: var(--bg-2); }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head .tag {
  display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: 2px; color: var(--ac-cyan); border: 1px solid var(--line-2); background: rgba(34, 211, 238, 0.07); margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 12px; font-weight: 800; }
.section-head p { color: var(--tx-2); margin: 0; font-size: 15.5px; }

/* 首页产品/文章展示网格（非列表页，允许卡片网格） */
.showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.showcase-card {
  display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: linear-gradient(165deg, rgba(20, 29, 51, 0.8), rgba(10, 15, 28, 0.55));
  transition: border-color .25s, transform .25s, box-shadow .25s; position: relative; overflow: hidden;
}
.showcase-card::after {
  content: ""; position: absolute; inset: auto auto -40% -40%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.16), transparent 70%); opacity: 0; transition: opacity .3s;
}
.showcase-card:hover { border-color: rgba(34, 211, 238, 0.5); transform: translateY(-4px); box-shadow: 0 20px 46px rgba(2, 6, 17, 0.55); }
.showcase-card:hover::after { opacity: 1; }
.showcase-card .sc-kicker { font-family: var(--mono); font-size: 12px; color: var(--ac-cyan); letter-spacing: 1.5px; }
.showcase-card h3 { margin: 0; font-size: 18.5px; }
.showcase-card h3 a { color: var(--tx-1); }
.showcase-card h3 a:hover { color: var(--ac-cyan); }
.showcase-card p { margin: 0; color: var(--tx-2); font-size: 14px; line-height: 1.7; flex: 1; }
.showcase-card .sc-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 3px 10px; border-radius: 999px; font-size: 12px; color: var(--tx-2);
  border: 1px solid var(--line); background: rgba(26, 37, 64, 0.55); font-family: var(--mono);
}
.chip.hot { color: var(--warn); border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08); }

/* 能力矩阵 */
.cap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cap-item {
  padding: 22px 20px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: rgba(15, 22, 38, 0.66); transition: border-color .25s, background .25s;
}
.cap-item:hover { border-color: rgba(34, 211, 238, 0.45); background: rgba(20, 29, 51, 0.8); }
.cap-item .cap-ico {
  width: 42px; height: 42px; border-radius: 11px; background: rgba(34, 211, 238, 0.12);
  display: grid; place-items: center; margin-bottom: 14px; color: var(--ac-cyan);
}
.cap-item h3 { margin: 0 0 8px; font-size: 16.5px; }
.cap-item p { margin: 0; font-size: 13.5px; color: var(--tx-2); line-height: 1.7; }

/* 工艺流程时间线 */
.flow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: flow; }
.flow-step { position: relative; padding: 26px 24px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(15, 22, 38, 0.66); }
.flow-step::before {
  counter-increment: flow; content: "0" counter(flow);
  font-family: var(--mono); font-size: 15px; font-weight: 700; color: #04121f;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--grad-ac); margin-bottom: 16px; box-shadow: 0 4px 16px rgba(34, 211, 238, 0.3);
}
.flow-step h3 { margin: 0 0 10px; font-size: 18px; }
.flow-step p { margin: 0 0 12px; font-size: 14px; color: var(--tx-2); }
.flow-step ul { list-style: none; }
.flow-step li { font-size: 13px; color: var(--tx-3); padding-left: 16px; position: relative; margin-top: 6px; }
.flow-step li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--ac-cyan); }

/* CTA 带 */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 52px 48px;
  background: linear-gradient(120deg, rgba(34, 211, 238, 0.14), rgba(129, 140, 248, 0.14)), var(--bg-3);
  border: 1px solid var(--line-2);
}
.cta-band h2 { margin: 0 0 12px; font-size: clamp(22px, 2.6vw, 30px); }
.cta-band p { color: var(--tx-2); max-width: 640px; margin: 0 0 26px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 面包屑（与 H2 左缘严格对齐） ---------- */
.breadcrumb {
  margin: 0 0 22px; padding: 0; margin-left: var(--h2-inset);
  font-size: 13.5px; color: var(--tx-3); list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "/"; color: var(--tx-3); opacity: .6; }
.breadcrumb a { color: var(--tx-2); }
.breadcrumb a:hover { color: var(--ac-cyan); }
.breadcrumb [aria-current] { color: var(--tx-2); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 页面主区 ---------- */
.page-main { padding: 40px 0 72px; min-height: 60vh; }
.page-title-row { margin-bottom: 28px; }
.page-title-row h1 { font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 10px; font-weight: 800; }
.page-title-row .desc { color: var(--tx-2); max-width: 760px; margin: 0; font-size: 15px; }

/* 文章/产品详情布局：正文 760 + TOC 240，间距 48 */
.article-layout {
  --h2-inset: 16px;
  display: grid; grid-template-columns: minmax(0, var(--content-w)) var(--toc-w);
  gap: 48px; justify-content: center; align-items: start;
}
/* 列表页布局：左分类 240 + 右内容 */
.list-layout {
  --h2-inset: 16px;
  display: grid; grid-template-columns: var(--cat-w) minmax(0, 1fr);
  gap: 48px; align-items: start;
}
/* 叶子页布局：卡片 48px 内边距 */
.page-wrap {
  --h2-inset: 48px;
  max-width: 920px; margin: 0 auto;
}

/* ---------- 分类侧栏 / 目录（原生 details 折叠） ---------- */
.cat-side { position: sticky; top: calc(var(--head-h) + 24px); }
.cat-panel { border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(15, 22, 38, 0.7); overflow: hidden; }
.cat-panel > summary {
  list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 700; font-size: 15px;
  color: var(--tx-1); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between;
}
.cat-panel > summary::-webkit-details-marker { display: none; }
.cat-panel > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ac-cyan); border-bottom: 2px solid var(--ac-cyan); transform: rotate(45deg); transition: transform .25s; }
.cat-panel[open] > summary::after { transform: rotate(225deg); }
.cat-panel .cat-body { padding: 10px; }
ul.category-list { list-style: none; }
ul.category-list li + li { margin-top: 2px; }
ul.category-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: var(--r-sm); color: var(--tx-2); font-size: 14.5px;
  border: 1px solid transparent;
}
ul.category-list a:hover { color: #fff; background: rgba(34, 211, 238, 0.10); border-color: rgba(34, 211, 238, 0.25); }
ul.category-list a.active { color: #fff; background: rgba(34, 211, 238, 0.14); border-color: rgba(34, 211, 238, 0.45); font-weight: 600; }
ul.category-list .cnt { font-family: var(--mono); font-size: 12px; color: var(--tx-3); }

.toc-aside { position: sticky; top: calc(var(--head-h) + 24px); max-height: calc(100vh - 48px); overflow-y: auto; }
.toc-panel { border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(15, 22, 38, 0.7); overflow: hidden; }
.toc-panel > summary {
  list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 700; font-size: 15px;
  color: var(--tx-1); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between;
}
.toc-panel > summary::-webkit-details-marker { display: none; }
.toc-panel > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ac-cyan); border-bottom: 2px solid var(--ac-cyan); transform: rotate(45deg); transition: transform .25s; }
.toc-panel[open] > summary::after { transform: rotate(225deg); }
.toc-panel .toc-body { padding: 10px; }
.toc-panel .toc-body ol { list-style: none; counter-reset: toc; }
.toc-panel .toc-body li { counter-increment: toc; }
.toc-panel .toc-body a {
  display: block; padding: 8px 10px 8px 34px; border-radius: var(--r-sm); color: var(--tx-2); font-size: 13.5px; line-height: 1.55;
  position: relative; border-left: 2px solid transparent;
}
.toc-panel .toc-body a::before {
  content: counter(toc, decimal-leading-zero); position: absolute; left: 10px; top: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--tx-3);
}
.toc-panel .toc-body a:hover { color: #fff; background: rgba(34, 211, 238, 0.10); }
.toc-panel .toc-body a.current { color: var(--ac-cyan); border-left-color: var(--ac-cyan); background: rgba(34, 211, 238, 0.08); font-weight: 600; }
.toc-panel .toc-body .lv3 a { padding-left: 48px; font-size: 13px; }
.toc-panel .toc-body .lv3 a::before { content: "·"; left: 32px; }

/* ---------- 文章正文 ---------- */
.article-body { font-size: 16px; color: var(--tx-1); }
.article-body h1 { font-size: clamp(24px, 3.2vw, 34px); margin: 0 0 18px; font-weight: 800; letter-spacing: .5px; }
.article-body .lead-block {
  margin: 0 0 22px; padding: 18px 22px; border-radius: var(--r-md);
  border: 1px solid rgba(34, 211, 238, 0.28); background: rgba(34, 211, 238, 0.06);
  color: var(--tx-1); font-size: 15.5px; line-height: 1.85;
}
.article-body .lead-block b { color: var(--ac-cyan); }
.kw-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.kw-row span { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; color: var(--tx-2); border: 1px solid var(--line); background: rgba(26, 37, 64, 0.45); }
.update-line { font-size: 13px; color: var(--tx-3); margin: 0 0 34px; font-family: var(--mono); }

.article-body h2 {
  font-size: 22px; margin: 52px 0 18px; padding: 2px 0 2px 12px;
  border-left: 4px solid var(--ac-cyan);
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.07), transparent 65%);
  scroll-margin-top: calc(var(--head-h) + 20px);
}
.article-body h3 {
  font-size: 17.5px; margin: 34px 0 14px; padding-left: 16px;
  border-left: 2px solid rgba(129, 140, 248, 0.55);
  color: #c7d6f5; scroll-margin-top: calc(var(--head-h) + 20px);
}
.article-body h4 { font-size: 15.5px; margin: 26px 0 10px; padding-left: 16px; color: var(--tx-2); }
.article-body p { margin: 0 0 16px; }
.article-body strong { color: #fff; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body ul li::marker { color: var(--ac-cyan); }
.article-body ol li::marker { color: var(--ac-cyan); font-family: var(--mono); font-weight: 700; }
.article-body code { font-family: var(--mono); font-size: .9em; padding: 2px 7px; border-radius: 6px; background: rgba(34, 211, 238, 0.12); color: #a5f3fc; border: 1px solid rgba(34, 211, 238, 0.22); }
.article-body hr { border: none; height: 1px; background: var(--line); margin: 40px 0; }

/* 参数表 table.data */
table.data, .article-body table.data {
  width: 100%; border-collapse: collapse; margin: 22px 0 26px; font-size: 14.5px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden;
}
table.data thead th {
  background: linear-gradient(120deg, rgba(34, 211, 238, 0.18), rgba(129, 140, 248, 0.14));
  color: #dff6ff; text-align: left; padding: 12px 16px; font-weight: 700; font-size: 14px;
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
table.data td { padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--tx-2); vertical-align: top; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:nth-child(even) { background: rgba(20, 29, 51, 0.4); }
table.data tbody tr:hover { background: rgba(34, 211, 238, 0.06); }
table.data td:first-child { color: var(--tx-1); font-weight: 600; white-space: nowrap; }

/* 结论块引用 */
.article-body blockquote {
  margin: 24px 0; padding: 16px 20px 16px 22px; border-left: 3px solid var(--ac-indigo);
  background: rgba(129, 140, 248, 0.08); border-radius: 0 var(--r-md) var(--r-md) 0; color: #dbe4fb;
}
.article-body blockquote p { margin: 0 0 8px; }
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body blockquote ol { margin: 6px 0 0; padding-left: 20px; }

/* 实践经验 callout */
.case-callout {
  margin: 26px 0; padding: 18px 22px; border-radius: var(--r-md);
  border: 1px solid rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.07);
  font-size: 14.5px; color: #d3f5e6; position: relative;
}
.case-callout .cc-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  color: var(--ok); letter-spacing: 2px; margin-bottom: 8px; font-family: var(--mono);
}

/* FAQ 裸 details */
.article-body details, .faq-list details {
  margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(15, 22, 38, 0.66); overflow: hidden;
}
.article-body details summary, .faq-list details summary {
  list-style: none; cursor: pointer; padding: 14px 46px 14px 18px; font-weight: 600; font-size: 15px;
  color: var(--tx-1); position: relative; transition: color .2s;
}
.article-body details summary::-webkit-details-marker, .faq-list details summary::-webkit-details-marker { display: none; }
.article-body details summary::after, .faq-list details summary::after {
  content: ""; position: absolute; right: 18px; top: 22px; width: 8px; height: 8px;
  border-right: 2px solid var(--ac-cyan); border-bottom: 2px solid var(--ac-cyan); transform: rotate(45deg); transition: transform .25s;
}
.article-body details[open] summary::after, .faq-list details[open] summary::after { transform: rotate(225deg); }
.article-body details summary:hover, .faq-list details summary:hover { color: var(--ac-cyan); }
.article-body details .faq-a, .faq-list details .faq-a, .article-body details > p, .faq-list details > p {
  margin: 0; padding: 0 18px 16px; font-size: 14.5px; color: var(--tx-2); line-height: 1.8;
}
.faq-title { font-size: 20px; margin: 48px 0 18px; padding: 2px 0 2px 12px; border-left: 4px solid var(--ac-cyan); background: linear-gradient(90deg, rgba(34, 211, 238, 0.07), transparent 65%); }

/* 相关阅读 */
.related-read { margin-top: 44px; }
.related-read .rr-title { font-size: 18px; margin: 0 0 16px; color: var(--tx-1); display: flex; align-items: center; gap: 10px; }
.related-read .rr-title::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--grad-ac); }
.related-read ul { list-style: none; display: grid; gap: 10px; }
.related-read a {
  display: block; padding: 14px 18px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: rgba(15, 22, 38, 0.6); color: var(--tx-1); font-size: 14.5px; font-weight: 600; transition: border-color .2s, transform .2s;
}
.related-read a:hover { border-color: rgba(34, 211, 238, 0.45); transform: translateX(4px); color: var(--ac-cyan); }
.related-read a small { display: block; margin-top: 4px; color: var(--tx-3); font-weight: 400; font-size: 13px; }

/* 标签（纯文本，无链接） */
.tag-text { display: inline-block; padding: 3px 10px; margin: 0 6px 6px 0; border-radius: 999px; font-size: 12.5px; color: var(--tx-2); border: 1px solid var(--line); background: rgba(26, 37, 64, 0.45); }

/* ---------- 列表页 ---------- */
.list-content { min-width: 0; }
.list-intro { color: var(--tx-2); font-size: 15px; margin: 0 0 26px; }
.post-list { list-style: none; display: grid; gap: 18px; }
.post-item {
  padding: 22px 24px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(20, 29, 51, 0.72), rgba(10, 15, 28, 0.5));
  transition: border-color .25s, transform .25s;
}
.post-item:hover { border-color: rgba(34, 211, 238, 0.42); transform: translateY(-3px); }
.post-item .pi-kicker { font-family: var(--mono); font-size: 12px; color: var(--ac-cyan); letter-spacing: 1.5px; display: block; margin-bottom: 8px; }
.post-item h2 { margin: 0 0 10px; font-size: 19px; }
.post-item h2 a { color: var(--tx-1); }
.post-item h2 a:hover { color: var(--ac-cyan); }
.post-item p { margin: 0 0 12px; color: var(--tx-2); font-size: 14px; line-height: 1.75; }
.post-item .pi-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.post-item .pi-date { font-family: var(--mono); font-size: 12px; color: var(--tx-3); }

/* 分页 */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; padding: 0 12px; display: inline-grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--line); color: var(--tx-2); font-size: 14px; font-family: var(--mono);
}
.pagination a:hover { border-color: var(--ac-cyan); color: #fff; background: rgba(34, 211, 238, 0.1); }
.pagination .current { background: var(--grad-ac); color: #04121f; border-color: transparent; font-weight: 700; }

/* 分类页说明 + FAQ */
.cat-desc { color: var(--tx-2); font-size: 15px; margin: 0 0 28px; max-width: 760px; }

/* ---------- 叶子页 ---------- */
.page-card {
  padding: 48px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(20, 29, 51, 0.78), rgba(10, 15, 28, 0.55));
}
.page-body h1 { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 26px; font-weight: 800; }
.page-body h2 { font-size: 21px; margin: 44px 0 16px; padding: 2px 0 2px 12px; border-left: 4px solid var(--ac-cyan); background: linear-gradient(90deg, rgba(34, 211, 238, 0.07), transparent 65%); }
.page-body h3 { font-size: 17px; margin: 30px 0 12px; padding-left: 16px; color: #c7d6f5; }
.page-body p { margin: 0 0 16px; color: var(--tx-1); }
.page-body ul, .page-body ol { margin: 0 0 16px; padding-left: 22px; color: var(--tx-1); }
.page-body li { margin-bottom: 8px; }
.page-body blockquote { margin: 22px 0; padding: 14px 20px; border-left: 3px solid var(--ac-indigo); background: rgba(129, 140, 248, 0.08); border-radius: 0 var(--r-md) var(--r-md) 0; }
.page-body table.data { font-size: 14.5px; }
.page-body .kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.page-body .kv-grid .kv { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(15, 22, 38, 0.6); }
.page-body .kv-grid .kv b { display: block; font-size: 13px; color: var(--ac-cyan); margin-bottom: 4px; font-family: var(--mono); }
.page-body .kv-grid .kv span { font-size: 14px; color: var(--tx-2); }

/* ---------- 悬浮工具胶囊（右侧中央） ---------- */
.float-capsule {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 900;
  display: flex; flex-direction: column; gap: 10px;
}
.cap-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px;
  border: none; cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 700; color: #fff;
  box-shadow: 0 8px 24px rgba(2, 6, 17, 0.55); transition: transform .2s, filter .2s; white-space: nowrap;
}
.cap-pill:hover { transform: translateX(-4px); filter: brightness(1.12); }
.cap-pill svg { width: 17px; height: 17px; flex-shrink: 0; }
.cap-card { background: linear-gradient(120deg, #6366f1, #8b5cf6); }
.cap-mail { background: linear-gradient(120deg, #0ea5e9, #2563eb); }
.cap-top { background: linear-gradient(120deg, #475569, #334155); }

/* 名片弹窗 300x500 竖版，原尺寸高清 */
.card-modal {
  position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center;
  background: rgba(2, 6, 17, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 20px;
}
.card-modal.open { display: flex; }
.card-frame {
  width: 300px; height: 500px; border-radius: 18px; overflow: hidden; position: relative;
  border: 1px solid rgba(34, 211, 238, 0.4); box-shadow: 0 0 0 1px rgba(2, 6, 17, 0.9), 0 24px 80px rgba(34, 211, 238, 0.22);
  background: var(--bg-2);
}
.card-frame img { width: 300px; height: 500px; display: block; }
.card-close {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  border: none; cursor: pointer; background: rgba(2, 6, 17, 0.72); color: #fff; font-size: 16px;
  display: grid; place-items: center; z-index: 2;
}
.card-close:hover { background: rgba(248, 113, 113, 0.85); }
.card-modal .card-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: var(--tx-3); font-size: 13px; }

/* ---------- 页脚 ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-0); padding: 56px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; margin-bottom: 40px; }
.foot-brand p { color: var(--tx-3); font-size: 13.5px; line-height: 1.8; margin: 14px 0 0; max-width: 320px; }
.foot-col h4 { margin: 0 0 14px; font-size: 14px; color: var(--tx-1); letter-spacing: 1px; }
.foot-col ul { list-style: none; display: grid; gap: 9px; }
.foot-col a { color: var(--tx-3); font-size: 13.5px; }
.foot-col a:hover { color: var(--ac-cyan); }
.foot-mail { font-family: var(--mono); color: var(--ac-cyan); font-size: 14px; }
.foot-base { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; color: var(--tx-3); font-size: 12.5px; }
.foot-base .fb-note { margin-left: auto; }

/* 联系页邮箱块（JS 动态拼接） */
.contact-mail-box {
  margin: 28px 0 0; padding: 20px 24px; border-radius: var(--r-md);
  border: 1px solid rgba(34, 211, 238, 0.35); background: rgba(34, 211, 238, 0.06);
  display: flex; flex-direction: column; gap: 6px;
}
.contact-mail-box .cm-label { font-size: 12px; color: var(--ac-cyan); letter-spacing: 2px; font-family: var(--mono); }
.contact-mail-box .cm-mail { font-family: var(--mono); font-size: 20px; font-weight: 700; color: #fff; letter-spacing: .5px; }
.contact-mail-box .cm-mail:hover { color: var(--ac-cyan); }
.contact-mail-box .cm-note { font-size: 12.5px; color: var(--tx-3); }

/* ---------- 404 ---------- */
.nf-wrap { text-align: center; padding: 90px 0; }
.nf-code { font-family: var(--mono); font-size: clamp(80px, 16vw, 150px); font-weight: 800; background: var(--grad-spark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.nf-wrap p { color: var(--tx-2); margin: 18px 0 30px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .spark-core { display: none; }
  .article-layout { grid-template-columns: 1fr; gap: 32px; }
  .toc-aside { position: static; max-height: none; }
  .list-layout { grid-template-columns: 1fr; gap: 28px; }
  .cat-side { position: static; }
  .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-grid { grid-template-columns: 1fr; }
  .nav-menu { display: none; }
  .nav-toggle { display: block; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --h2-inset: 16px; }
  body { font-size: 15px; }
  .section { padding: 52px 0; }
  .page-wrap { --h2-inset: 24px; }
  .page-card { padding: 26px 20px; }
  .showcase-grid { grid-template-columns: 1fr; }
  .cap-grid { grid-template-columns: 1fr; }
  .hero { padding: 60px 0 56px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .float-capsule { right: 12px; gap: 8px; }
  .cap-pill { padding: 9px 12px; font-size: 13px; }
  .article-body h2 { font-size: 19px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .cta-band { padding: 34px 24px; }
  table.data { font-size: 13.5px; }
  table.data thead th, table.data td { padding: 9px 11px; }
  .page-title-row h1 { font-size: 26px; }
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .spark-core .ring, .spark-core .core, .spark-core .arc, .hero-kicker .dot { animation: none; }
}