/* ==========================================================================
   耀AI-创梦 · PRTS 风格双主题皮肤
   --------------------------------------------------------------------------
   规范来源：PRTS Design（github.com/MooncellWiki/prts-design，MIT）
   设计语言：黑白为体、青为用；直角、斜纹、网点；拉丁大写字作装饰层。
   双正典：[data-theme="dark"] 终端 / [data-theme="light"] 档案。
   本文件在 style.css 之后加载，逐层覆盖旧皮肤的圆角 / 渐变 / 辉光。
   ========================================================================== */

/* ==========================================================================
   1. 令牌
   ========================================================================== */
:root,
[data-theme="dark"] {
  /* 中性灰阶（PRTS gray-*） */
  --bg: #181818;
  --bg-2: #272727;
  --bg-3: #3b3b3b;
  --line: #3b3b3b;
  --line-2: #8d8d8d;

  --fg: #ffffff;
  --fg-2: #d2d2d2;
  --fg-3: #8d8d8d;

  /* 青 = 链接 / 选中 / 焦点 / 主动作 / 强调条（PRTS cyan-500） */
  --accent: #18d1ff;
  /* accent 负责描边与装饰；accent-text 负责落在页面底色上的文字与图标。
     两者在深色主题下同值，在浅色主题下必须分开（见下）。 */
  --accent-text: #18d1ff;
  --accent-ink: #062430;
  --accent-wash: rgba(24, 209, 255, .13);

  --yellow: #ffd800;
  --red: #d83c3c;
  --red-deep: #a40000;

  /* 黑白反转块（主动作 / 推荐卡） */
  --inv-bg: #ffffff;
  --inv-fg: #181818;

  /* 推荐卡内部（永远是反转世界里的一套色） */
  --feat-bg: #ffffff;
  --feat-fg: #181818;
  --feat-fg2: #3b3b3b;
  --feat-line: #d2d2d2;

  --grid: rgba(255, 255, 255, .045);
  --halftone: rgba(255, 255, 255, .10);
  --stripe-a: #ffd800;
  --stripe-b: #1d1f20;
}

[data-theme="light"] {
  --bg: #f5f5f5;
  --bg-2: #ffffff;
  --bg-3: #ebebeb;
  --line: #d2d2d2;
  --line-2: #8d8d8d;

  --fg: #181818;
  --fg-2: #3b3b3b;
  --fg-3: #626262;

  /* 描边 / 装饰沿用 PRTS 原位蓝，保证「一眼还是那个蓝」 */
  --accent: #0098dc;
  /* 文字用色压深一档：原蓝在 #f5f5f5 上只有 2.95:1，
     且在 accent-wash 淡底上不足 4.5:1，故文字另起一档 */
  --accent-text: #08649e;
  --accent-ink: #ffffff;
  --accent-wash: rgba(0, 152, 220, .12);

  --yellow: #ffd800;
  --red: #c82a36;
  --red-deep: #a40000;

  --inv-bg: #181818;
  --inv-fg: #ffffff;

  --feat-bg: #181818;
  --feat-fg: #ffffff;
  --feat-fg2: #d2d2d2;
  --feat-line: #3b3b3b;

  --grid: rgba(0, 0, 0, .06);
  --halftone: rgba(0, 0, 0, .09);
  --stripe-a: #ffd800;
  --stripe-b: #ffffff;
}

:root {
  --font-sans: 'Source Han Sans SC', 'Noto Sans SC', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', 'SFMono-Regular', Consolas,
    'Liberation Mono', Menlo, monospace;

  --h1: clamp(2.5rem, 1.4rem + 4.4vw, 4.6rem);
  --h2: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  --h3: clamp(1rem, .96rem + .25vw, 1.14rem);
  --body: 16px;
  --sm: 14px;
  --xs: 12px;
  --overline: 11px;

  --container: 1280px;
  --gutter: clamp(1rem, .5rem + 2.4vw, 2rem);
  --section-y: clamp(3rem, 2rem + 4vw, 5.5rem);
  --nav-h: 60px;
  --dur: .18s;
}

/* ==========================================================================
   2. 硬重置 —— 旧皮肤的圆角 / 阴影 / 渐变 / 辉光一律清零
   ========================================================================== */
body *,
body *::before,
body *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
}

body .backdrop,
body #starfield { display: none !important; }

/* 旧皮肤的渐变标题层，把「透明文字」改回普通颜色，保留文字内容 */
body .grad-text {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

body .btn,
body .card,
body .badge,
body .pill,
body .chip,
body .strip,
body .tab,
body .func__item,
body .plan,
body .qr__box,
body .preview,
body .preview__stage,
body .preview__banner,
body .preview__desc,
body .toast,
body .step,
body .tutorial,
body .faq__item,
body .hero__slogans span,
body .section-title {
  background-image: none !important;
}

/* 例外：载入态圆弧是系统允许的圆形（PRTS：按钮加载态退回圆弧转圈） */
body .btn.is-loading::after { border-radius: 50% !important; }

/* ==========================================================================
   3. 基础层
   ========================================================================== */
body {
  font-family: var(--font-sans);
  font-size: var(--body);
  line-height: 1.7;
  color: var(--fg-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--fg);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }

/* 焦点可见性：只走 outline，不用阴影 */
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

::selection { background: var(--accent-text); color: var(--accent-ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); }
::-webkit-scrollbar-thumb:hover { background: var(--line-2); }

.skip-link {
  background: var(--inv-bg);
  color: var(--inv-fg);
  font-weight: 700;
}

/* ==========================================================================
   4. 装饰语言（PRTS decor/）
   ========================================================================== */

/* A5 网格 / 点阵 / 扫描线 */
.deco-grid {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* A4 半调网点（叠在容器上，向右渐隐） */
.deco-halftone { position: relative; isolation: isolate; }
.deco-halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--halftone) 1.1px, transparent 1.2px);
  background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 18%, #000 100%);
}

/* A3 斜纹：只表示危险 / 施工 / 限时，不做通用装饰 */
.deco-stripe {
  background-image: repeating-linear-gradient(-45deg,
    var(--stripe-a) 0 6px, var(--stripe-b) 6px 12px);
}
.deco-stripe--bar { height: 6px; }

/* A7 边角括号 */
.deco-brackets { position: relative; }
.deco-brackets::before,
.deco-brackets::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--line-2);
  border-style: solid;
  pointer-events: none;
}
.deco-brackets::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.deco-brackets::after { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }

/* A6 角标三角 */
.deco-corner { position: relative; }
.deco-corner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: var(--accent) transparent transparent transparent;
  z-index: 1;
}

/* 拉丁装饰字：等宽 + 大写 + 宽字距 + muted */
.deco-label {
  font-family: var(--font-mono);
  font-size: var(--overline);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

/* 强调条：标题左侧粗色条 */
.deco-bar {
  border-left: 4px solid var(--accent);
  padding-left: .62em;
}

/* ==========================================================================
   5. 布局
   ========================================================================== */
.container { max-width: var(--container); padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--line); }

.section-head {
  align-items: flex-end;
  gap: .8rem 1.5rem;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}

/* 拉丁衬线行：占满整行，把「编号 / 英文名」顶到标题上方作 overline */
.section-head .deco-label {
  flex-basis: 100%;
  margin: 0 0 -.15rem;
}

.section-title {
  font-size: var(--h2);
  font-weight: 800;
  gap: .55em;
}
.section-title i { color: var(--fg-3); font-size: .8em; }

.section-sub {
  font-family: var(--font-mono);
  font-size: var(--xs);
  letter-spacing: .06em;
  color: var(--fg-3);
}

/* ==========================================================================
   6. 通用组件
   ========================================================================== */

/* --- 卡片 --- */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: clamp(1.1rem, .9rem + 1vw, 1.5rem);
}

/* --- 按钮：主按钮 = 黑白反转 --- */
.btn {
  padding: .78em 1.5em;
  border: 1px solid transparent;
  font-size: var(--sm);
  font-weight: 700;
  letter-spacing: .03em;
  gap: .5em;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.btn--primary {
  background: var(--inv-bg);
  color: var(--inv-fg);
  border-color: var(--inv-bg);
}
.btn--secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-2);
}
.btn--outline {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-2);
}
.btn--ghost {
  background: transparent;
  color: var(--fg-2);
  border-color: var(--line-2);
}

.btn--sm { padding: .55em 1em; font-size: var(--xs); letter-spacing: .06em; }
.btn--lg { padding: .9em 2em; font-size: 1rem; }
.btn--block { width: 100%; }

@media (hover: hover) {
  .btn--primary:hover { background: var(--accent-text); color: var(--accent-ink); border-color: var(--accent-text); }
  .btn--secondary:hover,
  .btn--outline:hover { border-color: var(--accent); color: var(--accent-text); }
  .btn--ghost:hover { border-color: var(--line-2); color: var(--fg); }
}
.btn:active { background: var(--bg-3); }

/* 载入态 */
.btn.is-loading { pointer-events: none; opacity: .7; }
.btn.is-loading::after {
  content: '';
  width: .85em;
  height: .85em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: akSpin .6s linear infinite;
}
@keyframes akSpin { to { transform: rotate(1turn); } }

/* --- 标签 / 胶囊：一律方角，等宽小字 --- */
.badge,
.pill,
.chip,
.strip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .3em .7em;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--overline);
  letter-spacing: .12em;
  font-weight: 500;
  color: var(--fg-3);
}
.badge { border-color: var(--line-2); color: var(--fg-2); letter-spacing: .14em; }
.badge i { color: var(--accent-text); }
.pill--accent,
.chip--accent {
  border-color: var(--accent);
  color: var(--accent-text);
  background: transparent;
}
.chip { color: var(--fg-2); }
.chip i,
.strip i { color: var(--fg-3); }
.strip {
  display: flex;
  justify-content: center;
  padding: .6em 1em;
  color: var(--fg-2);
}
.chips { gap: .6rem; }

/* --- 区块标题（带色条） --- */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: .8em;
  flex-wrap: wrap;
}

/* ==========================================================================
   7. 导航
   ========================================================================== */
.nav {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav.is-scrolled {
  background: var(--bg-2);
  border-bottom-color: var(--line-2);
}

.nav__logo {
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--fg);
}
.nav__logo i { color: var(--accent); }

.nav__menu a {
  padding: .5em .7em;
  font-size: var(--sm);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--fg-2);
  border: 0;
  border-bottom: 2px solid transparent;
}
@media (hover: hover) {
  .nav__menu a:hover {
    background: transparent;
    color: var(--fg);
    border-color: transparent;
    border-bottom-color: var(--accent);
  }
}

/* 主题切换 */
.nav__theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  font-size: 14px;
  transition: color var(--dur), border-color var(--dur);
}
@media (hover: hover) {
  .nav__theme:hover { color: var(--accent-text); border-color: var(--accent); }
}

.nav__toggle {
  border: 1px solid var(--line-2);
  background: transparent;
}
.nav__toggle-bar,
.nav__toggle-bar::before,
.nav__toggle-bar::after { background: var(--fg); height: 2px; }
.nav__toggle[aria-expanded="true"] { background: var(--bg-3); border-color: var(--accent); }

/* ==========================================================================
   8. 首屏
   ========================================================================== */
.section--hero { padding-block: calc(var(--nav-h) + clamp(2.5rem, 5vw, 5rem)) clamp(3rem, 6vw, 6rem); }

.hero {
  grid-template-columns: minmax(0, 1.25fr) auto;
  gap: clamp(2rem, 5vw, 5rem);
}

.hero__content { max-width: 42rem; }

.hero__content h1 {
  font-size: var(--h1);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.035em;
  margin-block: .3em .45em;
  border-left: 8px solid var(--accent);
  padding-left: .26em;
}

.hero__slogans { gap: .55rem; margin-bottom: 1.4rem; }
.hero__slogans span {
  padding: .3em .8em;
  border: 1px solid var(--line);
  background: transparent;
  font-size: var(--sm);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--fg-2);
}

.hero__desc {
  max-width: 38rem;
  margin-bottom: 1.9rem;
  color: var(--fg-2);
  font-size: var(--body);
  line-height: 1.8;
}
.hero__desc i { color: var(--fg-3); }

.hero__actions { gap: .7rem; }

/* 首屏装置：网格 + 半调 + 边角括号 + 源石菱形 */
.hero__deco {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(220px, 25vw, 380px);
  aspect-ratio: 1;
  border: 1px solid var(--line);
  background-color: var(--bg-2);
  background-image:
    radial-gradient(var(--halftone) 1px, transparent 1.1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 10px 10px, 26px 26px, 26px 26px;
  animation: none;
}
/* 源石菱形：只留线框，去掉一切图标与辉光 */
.hero__glyph {
  grid-area: 1 / 1;
  display: block;
  width: 44%;
  aspect-ratio: 1;
  border: 1px solid var(--line-2);
  transform: rotate(45deg);
}
/* 装置下缘的等宽小字，压在网格上 */
.hero__deco-cap {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  margin: 0 0 .7rem .8rem;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--fg-3);
}
.hero__deco::before,
.hero__deco::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--accent);
  border-style: solid;
  pointer-events: none;
}
.hero__deco::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.hero__deco::after { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }

/* ==========================================================================
   9. 功能演示
   ========================================================================== */
.func { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(1rem, 2vw, 2rem); }
.func__side { border-right: 1px solid var(--line); }

.tabs { gap: .4rem; margin-bottom: 1rem; }
.tab {
  padding: .45em .85em;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--xs);
  letter-spacing: .08em;
  color: var(--fg-3);
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
@media (hover: hover) {
  .tab:hover { background: transparent; color: var(--fg-2); border-color: var(--line-2); }
}
.tab.is-active {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--fg);
  font-weight: 600;
}
.tab i { color: inherit; margin-right: .35em; }

.func__grid {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .5rem;
  counter-reset: fitem;
}
.func__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2em;
  padding: .55rem .6rem;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-left-color: var(--line);
  background: var(--bg-2);
  font-size: var(--xs);
  line-height: 1.35;
  color: var(--fg-2);
  text-align: left;
  transition: border-color var(--dur), background var(--dur), color var(--dur);
}
.func__item::before {
  counter-increment: fitem;
  content: "F-" counter(fitem, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fg-3);
}
.func__item i {
  display: block;
  margin-bottom: .15em;
  font-size: 1.1rem;
  color: var(--fg-3);
}
@media (hover: hover) {
  .func__item:hover {
    background: var(--bg-3);
    border-color: var(--line-2);
    border-left-color: var(--accent);
    color: var(--fg);
  }
  .func__item:hover i { color: var(--accent-text); }
}
.func__item.is-active {
  background: var(--accent-wash);
  border-color: var(--accent);
  border-left-color: var(--accent);
  color: var(--fg);
}
.func__item.is-active::before { color: var(--accent-text); }
.func__item.is-active i { color: var(--accent-text); }

.func__tip {
  border: 1px dashed var(--line-2);
  font-family: var(--font-mono);
  font-size: var(--overline);
  letter-spacing: .1em;
  color: var(--fg-3);
}

/* --- 预览面板 --- */
.preview { padding: clamp(1rem, 1.4vw, 1.5rem); }
.preview__head { border-bottom: 1px solid var(--line); }
.preview__name { font-size: var(--h3); font-weight: 700; color: var(--fg); }
.preview__name i { color: var(--fg-3); }
.preview__more {
  border: 1px solid var(--line-2);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--overline);
  letter-spacing: .1em;
  color: var(--fg-2);
}
@media (hover: hover) {
  .preview__more:hover { background: transparent; border-color: var(--accent); color: var(--accent-text); }
}

.preview__thumb {
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--xs);
  letter-spacing: .06em;
  color: var(--fg-3);
}
.preview__thumb-box {
  border: 1px solid var(--line);
  background: var(--bg-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--fg-2);
}

.preview__stage {
  position: relative;
  border: 1px solid var(--line);
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px;
  border-radius: 0;
}
.preview__stage::before {
  content: "";
  position: absolute;
  inset: 1.1rem;
  border: 1px solid var(--line);
  pointer-events: none;
}
/* 扫描线 */
.preview__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .06) 2px 3px);
}
.preview__placeholder {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--xs);
  letter-spacing: .06em;
  color: var(--fg-3);
}
.preview__placeholder i { color: var(--line-2); }

.preview__tag {
  position: absolute;
  top: .6rem;
  z-index: 2;
  padding: .1em .55em;
  border: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--fg-3);
}
.preview__tag--l { left: .6rem; }
.preview__tag--r { right: .6rem; }
.preview__stage.has-image .preview__tag { opacity: 0; }

.preview__actions { border-top: 1px solid var(--line); }
.preview__desc {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: transparent;
  color: var(--fg-2);
}
.preview__desc i { color: var(--fg-3); }
.preview__banner {
  border: 1px solid var(--accent);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--xs);
  letter-spacing: .1em;
  color: var(--accent-text);
  font-weight: 600;
}
.preview__banner i { color: inherit; }

/* ==========================================================================
   10. 流程 / 安装步骤
   ========================================================================== */
.steps { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.step {
  background: var(--bg-2);
  border: 0;
  padding: clamp(1.1rem, 1.5vw, 1.6rem) 1.1rem;
  text-align: left;
  transition: background var(--dur);
}
@media (hover: hover) {
  .step:hover { background: var(--bg-3); }
  .step:hover p,
  .step:hover h3 i { color: var(--fg-2); }
}
.step__num {
  display: block;
  padding: 0;
  margin-bottom: .6em;
  border: 0;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--accent-text);
}
.step h3 { font-size: var(--h3); font-weight: 700; margin-bottom: .35em; }
.step h3 i { color: var(--fg-3); }
.step p { font-size: var(--sm); color: var(--fg-3); line-height: 1.7; }

.tutorial { border: 1px solid var(--line); background: var(--bg-2); }
@media (hover: hover) {
  .tutorial:hover { background: var(--bg-3); border-color: var(--line-2); }
  .tutorial:hover .tutorial__text p i { color: var(--fg-2); }
}
.tutorial__text h3 { font-size: var(--h3); font-weight: 700; }
.tutorial__text h3 i,
.tutorial__text p i { color: var(--fg-3); }
.tutorial__text p { color: var(--fg-2); font-size: var(--sm); }

/* ==========================================================================
   11. 定价
   ========================================================================== */
.plans { gap: 1rem; max-width: 52rem; }

.plan {
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: clamp(1.4rem, 2vw, 2rem);
  transition: border-color var(--dur);
}
@media (hover: hover) {
  .plan:hover { background: var(--bg-2); border-color: var(--accent); }
}
.plan h3 {
  font-family: var(--font-mono);
  font-size: var(--xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 1em;
}
.plan__price {
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 1.9rem + 1.6vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--fg);
}
.plan__meta {
  border-bottom: 1px solid var(--line);
  font-size: var(--sm);
  color: var(--fg-3);
}
.plan__list li {
  border-bottom: 1px solid var(--line);
  color: var(--fg-2);
  font-size: var(--sm);
}
.plan__list i { color: var(--accent-text); }
.plan__note { font-family: var(--font-mono); font-size: var(--overline); color: var(--fg-3); }
.plan__note i { color: var(--fg-3); }

/* 推荐卡 = 整块黑白反转 + 黄色矩形角标 */
.plan--featured {
  position: relative;
  background: var(--feat-bg);
  border-color: var(--feat-bg);
  padding-top: 3.2rem;
}
.plan--featured h3 { color: var(--feat-fg2); }
.plan--featured .plan__price { color: var(--feat-fg); }
.plan--featured .plan__meta { color: var(--feat-fg2); border-bottom-color: var(--feat-line); }
.plan--featured .plan__list li { color: var(--feat-fg2); border-bottom-color: var(--feat-line); }
.plan--featured .plan__list i { color: var(--feat-fg); }
.plan--featured .plan__note { color: var(--feat-fg2); }
.plan--featured .plan__note i { color: var(--feat-fg2); }
.plan--featured .btn--primary {
  /* 推荐卡本身就是反色世界，按钮必须再反向，否则会在反色底里消失 */
  background: var(--feat-fg);
  color: var(--feat-bg);
  border-color: var(--feat-fg);
}
@media (hover: hover) {
  .plan--featured:hover { border-color: var(--accent); }
  .plan--featured .btn--primary:hover {
    background: var(--accent-text);
    color: var(--accent-ink);
    border-color: var(--accent-text);
  }
}
.plan--featured::before {
  content: "推荐";
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  transform: none;
  padding: .35em .9em;
  border: 0;
  background: var(--yellow);
  color: #181818;
  font-family: var(--font-mono);
  font-size: var(--overline);
  font-weight: 700;
  letter-spacing: .16em;
}

/* 限时试用的斜纹（斜纹只表达限时/警示） */
.plan:not(.plan--featured) .plan__price::after {
  content: "";
  display: block;
  width: 68px;
  height: 6px;
  margin-top: .55rem;
  background-image: repeating-linear-gradient(-45deg,
    var(--stripe-a) 0 6px, var(--stripe-b) 6px 12px);
}

/* ==========================================================================
   12. 常见问题
   ========================================================================== */
.faq { gap: 0; border: 1px solid var(--line); }
.faq__item { background: var(--bg-2); border: 0; border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 0; }
@media (hover: hover) {
  .faq__item:hover { background: var(--bg-3); border-color: var(--line); }
  .faq__item:hover summary i { color: var(--fg-2); }
  .faq__item:hover summary::after { border-right-color: var(--fg-2); border-bottom-color: var(--fg-2); }
}
.faq__item summary {
  font-size: var(--body);
  font-weight: 600;
  color: var(--fg);
  padding: 1rem 1.15rem;
}
.faq__item summary i { color: var(--fg-3); }
.faq__item summary::after {
  border-right: 2px solid var(--fg-3);
  border-bottom: 2px solid var(--fg-3);
}
.faq__answer {
  padding: 0 1.15rem 1.15rem 2rem;
  border-left: 3px solid var(--accent);
  margin-left: 1.15rem;
  color: var(--fg-2);
  font-size: var(--sm);
  line-height: 1.8;
}

/* ==========================================================================
   13. 二维码 / 通行证
   ========================================================================== */
.qr-grid { gap: 1rem; max-width: 66rem; }
.qr { border: 1px solid var(--line); background: var(--bg-2); transition: border-color var(--dur); }
@media (hover: hover) {
  .qr:hover { background: var(--bg-2); border-color: var(--accent); }
}
.qr__box {
  border: 1px solid var(--line);
  background-color: var(--bg);
  background-image: radial-gradient(var(--halftone) 1px, transparent 1.1px);
  background-size: 9px 9px;
  transition: border-color var(--dur);
}
@media (hover: hover) {
  .qr__box:hover { border-color: var(--accent); }
}
.qr__box > i { color: var(--line-2); }
.qr__box img { object-fit: contain; }
.qr__title {
  border-bottom: 1px solid var(--line);
  font-size: var(--h3);
  font-weight: 700;
  color: var(--fg);
}
.qr__title i { color: var(--fg-3); }
.qr__desc { color: var(--fg-2); font-size: var(--sm); }
.qr__desc p i { color: var(--fg-3); }
.qr__accent {
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--overline);
  letter-spacing: .1em;
  color: var(--fg-2);
  padding: .25em .6em;
}
.qr__field-value[data-value] { color: var(--accent-text); font-weight: 700; font-family: var(--font-mono); }
.qr__field-value.is-missing { color: var(--fg-3); font-weight: 400; }

/* ==========================================================================
   14. 页脚 / 提示
   ========================================================================== */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.footer__inner > p { color: var(--fg-3); font-size: var(--sm); }
.footer__inner > p i { color: var(--fg-3); }
.footer__legal { font-family: var(--font-mono); font-size: var(--overline); letter-spacing: .06em; color: var(--fg-3); }

.toast {
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  color: var(--fg);
  font-size: var(--sm);
}
.toast i { color: var(--accent-text); }

/* ==========================================================================
   15. 入场动效（克制：只做位移淡入，无辉光无缩放）
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   16. 响应式
   ========================================================================== */
@media (max-width: 1080px) {
  .func { grid-template-columns: 1fr; }
  .func__side { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; }
  .func__grid { max-height: none; }
  .hero { grid-template-columns: 1fr; }
  .hero__deco { display: none; }
}

@media (max-width: 900px) {
  :root { --nav-h: 56px; }
  .nav__menu {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding-inline: var(--gutter);
  }
  .nav__menu.is-open { box-shadow: none !important; }
  .nav__menu a {
    padding: .7em 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--body);
  }
  .nav__menu a:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
  :root { --h1: clamp(2rem, 1.2rem + 7vw, 2.8rem); }
  .section-head { flex-direction: column; align-items: flex-start; }
  .section-head__side { width: 100%; }
  .preview__cta { margin-left: 0; width: 100%; }
  .preview__cta .btn { flex: 1; }
  .preview__actions > .pill { display: none; }
  .tutorial__actions { width: 100%; }
  .tutorial__actions .btn { width: 100%; }
  .faq__answer { padding-left: 1.25rem; margin-left: .9rem; }
  .qr-grid { grid-template-columns: 1fr; }
  .steps, .steps--3 { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .hero__content h1 { border-left-width: 6px; }
}

@media (max-width: 420px) {
  .hero__actions .btn { width: 100%; }
  .nav__actions { gap: .4rem; }
  .nav__actions .btn { padding: .55em .8em; }
  .nav__actions .btn__label { display: none; }
}

@media (min-width: 1600px) { :root { --container: 1400px; } }

/* ==========================================================================
   17. 用户偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .card, .btn, .tab, .func__item, .plan, .qr, .faq__item { border: 1px solid CanvasText; }
}

@media print {
  .nav, .toast-wrap, .preview__actions, .hero__deco, .footer__legal { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .plan, .qr, .faq__item { border: 1px solid #999; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   18. 课程 / 合作（v2 新增组件的皮肤适配）
   ========================================================================== */
.step__icon { color: var(--accent-text); font-size: 2rem; }

.partner-flow-title {
  font-family: var(--font-mono);
  font-size: var(--overline);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.partner-flow-title i { color: var(--accent-text); }

@media (max-width: 900px) {
  .steps--flow { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}