/* 幻刃科技官网 · 基础样式 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink-hi);
  font: 400 var(--fs-body)/1.7 var(--font-cn);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.18; letter-spacing: 0.01em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  padding: 8px 14px; border-radius: var(--r-btn); background: var(--brand); color: #fff;
}
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 中文标题按短语换行，避免窄屏把词拆开 */
.nw { display: inline-block; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--paper { background: var(--paper); color: var(--ink); }
.section--raised { background: var(--bg-1); }
.section--black { background: #000; }

/* 版块标题：小标签 → 大标题 → 一段说明 */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 var(--fs-tag)/1 var(--font-display);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-hi);
}
.section--paper .eyebrow { color: var(--brand); }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.eyebrow--plain::before { display: none; }

.head { display: grid; gap: var(--s-4); max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.head--center { margin-inline: auto; text-align: center; justify-items: center; }
.head--split {
  max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s-7);
}
.head__text { display: grid; gap: var(--s-4); max-width: 760px; }
@media (max-width: 720px) { .head--split { grid-template-columns: 1fr; row-gap: var(--s-4); } }
.head h2 { font-size: var(--fs-h2); }
.head p { font-size: var(--fs-lead); color: var(--ink-mid); max-width: 640px; }
.section--paper .head p { color: var(--ink-2); }

/* 按钮与文字链接 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: var(--r-btn);
  font-size: 15px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: color-mix(in oklch, var(--brand) 86%, white); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--ink-hi); }
.btn--ghost:hover { border-color: var(--ink-mid); }
.btn--sm { height: 34px; padding: 0 16px; font-size: 14px; }

.link-more {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--brand-hi); font-size: 15px; font-weight: 500;
}
.section--paper .link-more, .on-paper .link-more { color: var(--brand); }
.link-more svg { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease); }
.link-more:hover svg, a:hover > .link-more svg { transform: translateX(3px); }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }

.num { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.num small { font-size: 0.42em; font-weight: 500; margin-left: 0.12em; letter-spacing: 0.02em; }
.note { font-size: 12px; line-height: 1.6; color: var(--ink-lo); }
.section--paper .note { color: var(--ink-2); }
/* 图片角标（如「示意图」） */
.chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; letter-spacing: 0.06em; color: var(--ink-hi); background: rgb(10 15 23 / 0.66);
  box-shadow: inset 0 0 0 1px var(--line-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* 滚动渐显：仅在 JS 可用时隐藏，避免脚本失败时内容消失 */
.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

.toast {
  position: fixed; left: 50%; bottom: 96px; z-index: 90; transform: translate(-50%, 12px);
  padding: 10px 18px; border-radius: 999px; background: var(--ink-hi); color: var(--ink);
  font-size: 14px; opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }