/* ============================================================================
   yinghejian · 产品站
   ----------------------------------------------------------------------------
   风格：**玻璃拟态 + 紫青渐变**（沿用原站点配色），结构走企业级产品站的排布。
   约束：不使用界面截图，也不使用装饰性插画 —— 视觉重量交给玻璃层次与排版。

   四条纪律（前几版返工就栽在这几处，勿回退）：
     1. 玻璃面板只用在「整块内容」上（一个区块一层），不要每个小元素都套一层 ——
        backdrop-filter 叠太多既掉帧又显碎。
     2. 强调色沿用原版紫 / 青 / 靛，且每件产品只占一个色：照片墙=青、聊天=天蓝、游戏=紫。
     3. 信息结构化：规格、系统要求、下载项一律对齐成表，数字用等宽字体。
     4. 动效只动 transform / opacity，且 `prefers-reduced-motion` 下整体关闭。
   ========================================================================== */

:root {
  /* ---- 原版配色（勿改，用户指定沿用）---- */
  --bg-0: #0b0a1f;
  --bg-1: #120e33;
  --c-purple: #8b5cff;
  --c-indigo: #5b6cff;
  --c-cyan: #3fb6ff;
  --c-teal: #4be3c4;
  --text: #f2f3ff;
  --text-dim: #b9bce0;
  --text-faint: #8b8fc0;

  /* ---- 玻璃 ---- */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-soft: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-soft: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 18px 50px rgba(7, 4, 30, 0.45);
  --glass-shadow-hover: 0 26px 62px rgba(7, 4, 30, 0.62);

  --radius: 22px;
  --radius-sm: 14px;
  --maxw: 1180px;
  --gut: 24px;

  /* 产品色：照片墙=青、聊天=天蓝、游戏=紫 */
  --pw: var(--c-teal);
  --lc: var(--c-cyan);
  --xh: var(--c-purple);
  --accent: var(--c-purple);

  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui,
    -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
  /* 底色：深靛蓝纵向渐变，给玻璃一层可透的底 */
  background-image:
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-0) 100%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 1.5px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border-soft);
  color: #e6e9ff;
}

.wrap { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #1a1443; color: var(--text); padding: 10px 16px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ============================================================================
   漂浮光斑背景（原版签名效果）
   ========================================================================== */

.bg-blobs {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: float 18s ease-in-out infinite;
  will-change: transform;
}
.blob-1 { width: 460px; height: 460px; left: -90px; top: -70px;
  background: radial-gradient(circle, rgba(255,255,255,.055), transparent 70%); }
.blob-2 { width: 400px; height: 400px; right: -70px; top: 130px;
  background: radial-gradient(circle, rgba(255,255,255,.045), transparent 70%); animation-delay: -4s; }
.blob-3 { width: 380px; height: 380px; left: 30%; bottom: -130px;
  background: radial-gradient(circle, rgba(255,255,255,.05), transparent 70%); animation-delay: -8s; }
.blob-4 { width: 320px; height: 320px; right: 20%; bottom: 5%;
  background: radial-gradient(circle, rgba(255,255,255,.04), transparent 70%); animation-delay: -12s; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 25px) scale(0.95); }
}

/* ============================================================================
   排印基元
   ========================================================================== */

.label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.03em; line-height: 1.14; }
h1 { font-size: clamp(38px, 6vw, 72px); }
h2 { font-size: clamp(25px, 3.2vw, 38px); letter-spacing: -0.026em; }
h3 { font-size: 19.5px; letter-spacing: -0.02em; line-height: 1.3; }
p { margin: 0; }

.lead {
  color: var(--text-dim);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.85;
  max-width: 60ch;
}
.dim { color: var(--text-faint); font-size: 13.5px; }

section { position: relative; z-index: 1; padding: 84px 0; }
.section-head { margin-bottom: 38px; }
.section-head .label { display: block; margin-bottom: 16px; }
.section-head h2 { margin-bottom: 13px; }
.section-head p { color: var(--text-dim); font-size: 15.5px; max-width: 58ch; }

/* ============================================================================
   导航（玻璃条）
   ========================================================================== */

.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center;
  min-height: 64px;
  background: rgba(18, 14, 51, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--glass-border-soft);
}
.nav-inner {
  max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 var(--gut);
  display: flex; align-items: center; gap: 24px; min-height: 64px;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; letter-spacing: 0.01em; white-space: nowrap; }
.brand-logo { width: 26px; height: 26px; border-radius: 8px; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a {
  position: relative;
  padding: 8px 13px; border-radius: 9px;
  font-size: 14px; color: var(--text-dim); white-space: nowrap;
  transition: color 0.22s, background-color 0.22s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px;
  border-radius: 2px; width: 0;
  background: linear-gradient(90deg, var(--c-purple), var(--c-cyan));
  transition: width 0.28s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: calc(100% - 26px); }
.nav-links a[aria-current="page"] { color: var(--text); }

.nav-cta {
  font-size: 13.5px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--glass-bg);
  color: var(--text); white-space: nowrap;
  transition: background-color 0.22s, transform 0.22s var(--ease);
}
.nav-cta:hover { background: var(--glass-bg-strong); transform: translateY(-1px); }

.hamburger {
  display: none; margin-left: auto;
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  padding: 0; position: relative;
}
.hamburger span {
  position: absolute; left: 11px; width: 20px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 20px; }
.hamburger span:nth-child(3) { top: 25px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links {
    position: fixed; inset: 64px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: rgba(13, 10, 38, 0.94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--glass-border);
    padding: 8px var(--gut) 20px;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
  }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 15px 4px; font-size: 16px; border-radius: 0; border-bottom: 1px solid var(--glass-border-soft); }
  .nav-links a::after { display: none; }
  .hamburger { display: block; }
  .nav-cta { display: none; }
}

/* ============================================================================
   按钮（原版胶囊 + 渐变主按钮）
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 24px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; font-family: inherit;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 0.22s var(--ease), box-shadow 0.28s, background 0.28s, border-color 0.28s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  color: #fff;
  background: #6a3fd6;
  box-shadow: 0 8px 20px -8px rgba(5, 3, 20, 0.6);
}
.btn-primary:hover { box-shadow: 0 14px 28px -10px rgba(5, 3, 20, 0.72); transform: translateY(-2px); }

.btn-ghost {
  color: var(--text);
  background: var(--glass-bg);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: var(--glass-bg-strong); transform: translateY(-2px); }

.btn-lg { padding: 15px 32px; font-size: 15.5px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.arw { transition: transform 0.26s var(--ease); }
.btn:hover .arw, .tlink:hover .arw { transform: translateX(3px); }

/* 文字链接 */
.tlink {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; color: var(--text);
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 2px;
  transition: border-color 0.26s, color 0.2s;
}
.tlink:hover { border-color: var(--c-cyan); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }

/* ============================================================================
   玻璃容器 —— 整块内容一层玻璃，不要层层嵌套
   ----------------------------------------------------------------------------
   高级感的来源是**三层光 + 多层影**，缺一层就会「像半透明色块」而不是玻璃：

     ① 填充   —— 纵向微渐变（上亮下暗）。纯色填充没有厚度感。
     ② 顶边高光 —— `inset 0 1px 0` 一道亮线，模拟光线打在玻璃上沿的折射。
     ③ 镜面光斑 —— 左上角一团极淡的径向白，模拟光源在玻璃表面的反射。
     ④ 边缘收光 —— 顶部一条两端渐隐的 1px 亮线（`::after`）。这是最关键的
                    一笔：真实玻璃的边不是均匀亮的，而是中间最亮、两端消失。
     ⑤ 多层投影 —— 贴地一层紧实暗影 + 一层大范围柔和暗影，制造「离地高度」。

   ⚠️ 别把 ③④ 加到每个小元素上 —— 淡光点一多就变成廉价的高光贴图。
      只用在「整块内容」这一层。
   ========================================================================== */

.glass,
.work,
.index,
.features,
.tbl-scroll,
.dl,
.faq,
.kv {
  position: relative;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.055) 38%,
      rgba(255, 255, 255, 0.032) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    /* ② 顶边高光 + 底边微弱回收 */
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    inset 0 -1px 0 rgba(255, 255, 255, 0.045),
    /* ⑤ 贴地紧影 */
    0 1px 2px rgba(5, 3, 20, 0.45),
    /* ⑤ 主投影 */
    0 18px 44px -14px rgba(5, 3, 20, 0.66),
    /* ⑤ 环境大投影 */
    0 44px 96px -34px rgba(5, 3, 20, 0.55);
}

/* ③ 镜面光斑：左上角一团极淡的白，只在整块内容上出现 */
.glass::before,
.work::after,
.index::before,
.features::before,
.tbl-scroll::before,
.dl::before,
.faq::before,
.kv::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    130% 86% at 10% -12%,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.04) 42%,
    transparent 62%
  );
  opacity: 0.9;
}

/* ④ 边缘收光：顶部一条两端渐隐的亮线 —— 玻璃边最像玻璃的一笔 */
.glass::after,
.index::after,
.features::after,
.tbl-scroll::after,
.dl::after,
.faq::after,
.kv::after {
  content: '';
  position: absolute; left: 10%; right: 10%; top: -1px; height: 1px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55) 22%,
    rgba(255, 255, 255, 0.72) 50%,
    rgba(255, 255, 255, 0.55) 78%,
    transparent
  );
  opacity: 0.75;
}

/* .work 的 ::before 已被产品色光晕占用，所以它用 ::after 放镜面光斑 */
.work::after { z-index: 0; }
.work { overflow: hidden; }

/*
 * 玻璃上的两层覆盖（镜面光斑 / 边缘收光）都设 z-index:0，
 * 内容则抬到 z-index:1 —— 否则部分浏览器会把覆盖层压在文字上面。
 * 覆盖层一律 pointer-events:none，不影响点击与选择。
 */
.glass > *, .work > *, .index > *, .features > *,
.tbl-scroll > *, .dl > *, .faq > *, .kv > * {
  position: relative;
  z-index: 1;
}
.glass::before, .glass::after,
.work::after, .index::before, .index::after,
.features::before, .features::after,
.tbl-scroll::before, .tbl-scroll::after,
.dl::before, .dl::after, .faq::before, .faq::after,
.kv::before, .kv::after {
  z-index: 0;
}

/* ============================================================================
   全页细噪点 —— 极淡的一层，给「玻璃」一个可依附的材质
   （不用图片资源：内联 SVG feTurbulence 生成的噪点，浏览器直接渲染）
   ========================================================================== */

body::after {
  content: '';
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================================
   Hero
   ========================================================================== */

.hero { position: relative; z-index: 1; padding: clamp(66px, 9vw, 124px) 0 clamp(52px, 7vw, 88px); }
.hero .label { display: block; margin-bottom: 24px; }
.hero h1 { max-width: 19ch; }

/* 标题强调：单一品牌色，不再用渐变裁切文字 */
.hero h1 .grad { color: var(--c-purple); }

.hero .lead { margin-top: 26px; }
.hero-actions { margin-top: 38px; }

/* 首页的产品索引 */
.index { margin-top: clamp(48px, 6vw, 78px); overflow: hidden; padding: 0 8px; }
.index-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 20px;
  padding: 19px calc(var(--gut) - 6px);
  border-top: 1px solid var(--glass-border-soft);
  transition: background-color 0.3s, padding-left 0.32s var(--ease);
}
.index-row:first-child { border-top: 0; }
.index-row:hover { background: rgba(255, 255, 255, 0.05); padding-left: calc(var(--gut) + 6px); }
.index-row .nm { font-size: 20px; font-weight: 650; letter-spacing: -0.024em; }
.index-row .mt { color: var(--text-faint); font-size: 13px; }
@media (max-width: 620px) {
  .index-row { grid-template-columns: minmax(0, 1fr); }
  .index-row .mt { display: none; }
}

/* ============================================================================
   产品条目（玻璃卡）
   ========================================================================== */

.works { display: grid; gap: 20px; }

.work {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 264px;
  gap: 32px; padding: 34px;
  overflow: hidden;
  transition: transform 0.34s var(--ease), box-shadow 0.34s, border-color 0.34s;
}
.work:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow-hover); border-color: rgba(255, 255, 255, 0.28); }

/* 左上角的产品色光晕 —— 用极低透明度，只做区分不抢眼 */
.work::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 1;
  background: linear-gradient(180deg, var(--wk-soft), transparent 30%);
}
.work.pw { --wk: var(--pw); --wk-soft: rgba(75, 227, 196, 0.1); }
.work.lc { --wk: var(--lc); --wk-soft: rgba(63, 182, 255, 0.1); }
.work.xh { --wk: var(--xh); --wk-soft: rgba(139, 92, 255, 0.11); }
.work > * { position: relative; }

@media (max-width: 940px) {
  .work { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 28px 24px; }
  .work-side { grid-column: 1; }
}

.work-main { min-width: 0; }
.work-title { display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; margin-bottom: 12px; }
.work-title h3 { font-size: 26px; }
.work-desc { color: var(--text-dim); font-size: 15px; line-height: 1.85; max-width: 58ch; margin-bottom: 22px; }
.work-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.work-side { padding-top: 4px; }

/* ============================================================================
   规格 / 键值
   ========================================================================== */

.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.spec dt {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 5px; font-weight: 500;
}
.spec dd { margin: 0; font-size: 13.5px; font-family: var(--mono); font-variant-numeric: tabular-nums; }

.kv { padding: 6px 22px; }
.kv > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--glass-border-soft);
}
.kv > div:last-child { border-bottom: 0; }
.kv dt { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
.kv dd { margin: 0; font-size: 13px; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ============================================================================
   内页 Hero
   ========================================================================== */

.page-hero { position: relative; z-index: 1; padding: clamp(42px, 5.5vw, 76px) 0 clamp(30px, 4vw, 46px); }
.crumb { font-size: 12.5px; color: var(--text-faint); margin-bottom: 28px; letter-spacing: 0.02em; }
.crumb a { transition: color 0.2s; }
.crumb a:hover { color: var(--text-dim); }
.page-hero .label { display: block; margin-bottom: 18px; }

.page-hero-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 52px; align-items: end; }
@media (max-width: 940px) { .page-hero-head { grid-template-columns: 1fr; gap: 30px; } }

/* ============================================================================
   功能：编号列表，整体一层玻璃
   ========================================================================== */

.features { padding: 8px 30px; }
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--glass-border-soft);
}
.feature:last-child { border-bottom: 0; }
@media (max-width: 620px) { .feature { padding: 22px 0; } }

.feature h3 { margin-bottom: 8px; }
.feature p { color: var(--text-dim); font-size: 15px; line-height: 1.85; max-width: 68ch; }

/* 有序步骤（语义 <ol>）：序号由 CSS counter 生成 —— 可见、实色、15px、与标题左对齐。
   只用于真正有先后的步骤（快速开始 / 使用说明）；并列特性仍用 <div>，不加序号。 */
.features.steps { list-style: none; margin: 0; padding: 8px 30px; counter-reset: step; }
.features.steps > .feature { grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; }
.features.steps > .feature::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  padding-top: 2px;
}

/* ============================================================================
   表格
   ========================================================================== */

.tbl-scroll { padding: 10px 26px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; min-width: 520px; }
.tbl th {
  text-align: left; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 500; padding: 12px 18px 12px 0; white-space: nowrap;
}
.tbl td {
  padding: 16px 18px 16px 0; border-top: 1px solid var(--glass-border-soft);
  font-size: 14px; color: var(--text-dim); vertical-align: middle;
}
.tbl td:first-child { color: var(--text); font-weight: 550; }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; text-align: right; }
.tbl .num { color: var(--text-dim); font-size: 13px; }

/* ============================================================================
   下载
   ========================================================================== */

.dl { padding: 8px 28px; }
.dl-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px; align-items: center; padding: 22px 0;
  border-bottom: 1px solid var(--glass-border-soft);
}
.dl-row:last-child { border-bottom: 0; }
@media (max-width: 640px) { .dl-row { grid-template-columns: 1fr; gap: 14px; } }

.dl-name {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 7px; font-size: 16.5px; font-weight: 620; letter-spacing: -0.014em;
}
.dl-meta { color: var(--text-faint); font-size: 13px; line-height: 1.75; }
.dl-meta .num { color: var(--text-dim); }

.badge {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 11.5px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--glass-bg-soft);
  color: var(--text-dim); white-space: nowrap;
}

/* 说明条 */
.note {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 20px; margin-top: 18px;
  border-radius: var(--radius-sm);
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border-soft);
  color: var(--text-dim); font-size: 13.5px; line-height: 1.8;
}
.note.warn {
  border-color: rgba(255, 200, 130, 0.3);
  background: rgba(255, 200, 130, 0.07);
  color: #f0d5ac;
}

/* ============================================================================
   FAQ
   ========================================================================== */

.faq { padding: 6px 30px; }
.faq details { border-bottom: 1px solid var(--glass-border-soft); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 20px 0; font-size: 16px; font-weight: 580; letter-spacing: -0.012em;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  transition: color 0.2s;
}
.faq summary:hover { color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 8px; height: 8px;
  border-right: 1.6px solid var(--text-faint); border-bottom: 1.6px solid var(--text-faint);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.26s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details > p {
  color: var(--text-dim); font-size: 14.5px; line-height: 1.88;
  padding: 0 0 22px; max-width: 72ch;
}

/* ============================================================================
   页脚
   ========================================================================== */

.footer { position: relative; z-index: 1; margin-top: 40px; padding: 46px 0 56px; border-top: 1px solid var(--glass-border-soft); }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start;
}
@media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 620; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 13.5px; color: var(--text-faint); }
.footer-links a { transition: color 0.2s; }
.footer-links a:hover { color: var(--text-dim); }
.footer-copy { grid-column: 1 / -1; margin-top: 14px; color: var(--text-faint); font-size: 12.5px; line-height: 1.75; }

/* ============================================================================
   回到顶部
   ========================================================================== */

.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.26s, transform 0.26s var(--ease), color 0.2s;
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { color: var(--text); transform: translateY(-2px); }

/* ============================================================================
   进场动效
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.72s var(--ease), transform 0.72s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-i="1"] { transition-delay: 0.08s; }
.reveal[data-i="2"] { transition-delay: 0.16s; }
.reveal[data-i="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .blob { animation: none; }
  html { scroll-behavior: auto; }
}