/* ============================================================================
   声落 SOUNDFALL · main.css
   设计系统：SOUNDFALL Light（见 .workbuddy/artifacts/02-design-tokens.md）
   依赖：tokens.css（必须先于本文件加载）
   写法：移动优先，@media (min-width:768px) / (min-width:1024px) 逐级增强
   ============================================================================ */

/* ==========================================================================
   00 · RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sf-nav-h) + 24px);
}

body {
  margin: 0;
  font-family: var(--sf-font-sans);
  font-size: var(--sf-text-body);
  line-height: var(--sf-lh-body);
  color: var(--sf-fg-body);
  background: var(--sf-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  /* clip 而非 hidden —— hidden 会创建滚动容器并使 position:sticky 的导航失效 */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--sf-font-display);
  color: var(--sf-fg);
  letter-spacing: var(--sf-ls-normal);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--sf-text-h1);  font-weight: var(--sf-fw-bold);     line-height: var(--sf-lh-snug); }
h2 { font-size: var(--sf-text-h2);  font-weight: var(--sf-fw-semibold); line-height: var(--sf-lh-snug); }
h3 { font-size: var(--sf-text-h3);  font-weight: var(--sf-fw-semibold); line-height: var(--sf-lh-h3); }
h4 { font-size: var(--sf-text-h4);  font-weight: var(--sf-fw-semibold); line-height: 1.5; }

p  { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a {
  color: var(--sf-fg-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--sf-dur-fast) var(--sf-ease-standard);
}
a:hover { color: var(--sf-fg-accent-hi); }

:focus-visible {
  outline: none;
  box-shadow: var(--sf-ring-focus);
  border-radius: var(--sf-radius-sm);
}

::selection { background: var(--sf-teal-a32); color: var(--sf-ink-on-teal); }

/* ==========================================================================
   01 · UTILITIES
   ========================================================================== */
.u-latin { letter-spacing: var(--sf-ls-tight); }
.u-mono  { font-family: var(--sf-font-mono); font-variant-numeric: tabular-nums; }

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

.skip-link {
  position: absolute; left: var(--sf-space-4); top: -100px;
  z-index: 999;
  background: var(--sf-teal-500); color: var(--sf-ink-on-teal);
  padding: var(--sf-space-3) var(--sf-space-5);
  border-radius: var(--sf-radius-lg);
  font-weight: var(--sf-fw-semibold);
  text-decoration: none;
  transition: top var(--sf-dur-fast) var(--sf-ease-standard);
}
.skip-link:focus { top: var(--sf-space-4); color: var(--sf-ink-on-teal); }

.container       { width: 100%; max-width: var(--sf-container);        margin-inline: auto; padding-inline: var(--sf-page-pad); }
.container-wide  { width: 100%; max-width: var(--sf-container-wide);   margin-inline: auto; padding-inline: var(--sf-page-pad); }
.container-narrow{ width: 100%; max-width: var(--sf-container-narrow); margin-inline: auto; padding-inline: var(--sf-page-pad); }
.container-prose { width: 100%; max-width: var(--sf-container-prose);  margin-inline: auto; padding-inline: var(--sf-page-pad); }

.section        { padding-block: var(--sf-section-y); }
.section--sm    { padding-block: var(--sf-section-y-sm); }
.section--white { background: var(--sf-bg); }
.section--subtle{ background: var(--sf-bg-subtle); }
.section--muted { background: var(--sf-bg-muted); }
.section--accent{ background: var(--sf-bg-accent); }

/* 区块头 —— 左对齐为默认，居中仅限首页 Hero / 故事区 / 底部 CTA */
.section-head { margin-bottom: var(--sf-section-gap); max-width: 48rem; }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sf-space-2);
  font-size: var(--sf-text-label);
  font-weight: var(--sf-fw-semibold);
  letter-spacing: var(--sf-ls-wide);
  color: var(--sf-fg-accent);
  text-transform: uppercase;
  margin-bottom: var(--sf-space-3);
}
.eyebrow::before {
  content: ""; width: 18px; height: 1px;
  background: var(--sf-teal-600);
}
.section-head--center .eyebrow::before { display: none; }

.section-lead {
  margin-top: var(--sf-space-4);
  font-size: var(--sf-text-lead);
  line-height: var(--sf-lh-lead);
  color: var(--sf-fg-secondary);
  max-width: var(--sf-measure-cjk);
}
.section-head--center .section-lead { margin-inline: auto; }

.icon { width: var(--sf-icon-md); height: var(--sf-icon-md); flex: none; }
.icon-xs { width: var(--sf-icon-xs); height: var(--sf-icon-xs); flex: none; }
.icon-sm { width: var(--sf-icon-sm); height: var(--sf-icon-sm); flex: none; }
.icon-lg { width: var(--sf-icon-lg); height: var(--sf-icon-lg); flex: none; stroke-width: var(--sf-icon-stroke-lg); }
.icon-xl { width: var(--sf-icon-xl); height: var(--sf-icon-xl); flex: none; stroke-width: var(--sf-icon-stroke-lg); }

/* ==========================================================================
   02 · CHIPS & BADGES
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: var(--sf-space-1);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-mono-sm);
  font-weight: var(--sf-fw-medium);
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--sf-teal-800);
  background: var(--sf-teal-50);
  border: 1px solid var(--sf-teal-200);
  border-radius: var(--sf-radius-sm);
  padding: 3px 8px;
  white-space: nowrap;
}
.chip--neutral {
  color: var(--sf-gray-700);
  background: var(--sf-gray-50);
  border-color: var(--sf-gray-200);
}
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); }

.pill {
  display: inline-flex; align-items: center; gap: var(--sf-space-2);
  font-family: var(--sf-font-sans);
  font-size: var(--sf-text-label);
  font-weight: var(--sf-fw-semibold);
  line-height: 1.4;
  border-radius: var(--sf-radius-full);
  padding: 4px 10px;
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--sf-radius-full);
  background: currentColor; flex: none;
}
.pill--pending { color: var(--sf-warning-strong); background: var(--sf-warning-bg); }
.pill--done    { color: var(--sf-success-strong); background: var(--sf-success-bg); }
.pill--version { color: var(--sf-teal-800);       background: var(--sf-teal-50); }

/* ==========================================================================
   03 · BUTTONS
   系统级规则：实心青绿填充 = 且仅 = 可点击的主行动
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sf-space-2);
  height: 52px;
  padding-inline: 28px;
  border-radius: var(--sf-radius-lg);
  border: 1px solid transparent;
  font-size: var(--sf-text-body);
  font-weight: var(--sf-fw-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: none;
}
.btn--md { height: 44px; padding-inline: 20px; font-size: var(--sf-text-sm); }

/* Primary —— 全站唯一使用实心青绿的按钮 */
.btn--primary {
  background: var(--sf-teal-500);
  color: var(--sf-ink-on-teal);      /* 7.12 ✅ 绝不用白字（2.06 ❌） */
  transition:
    background-color var(--sf-dur-fast) var(--sf-ease-standard),
    transform        var(--sf-dur-fast) var(--sf-ease-standard),
    box-shadow       var(--sf-dur-fast) var(--sf-ease-standard),
    color            var(--sf-dur-fast) var(--sf-ease-standard);
}
.btn--primary:hover {
  background: var(--sf-teal-400);
  color: var(--sf-ink-on-teal);
  transform: translateY(-1px);
  box-shadow: var(--sf-glow-teal);
}
.btn--primary:active {
  background: var(--sf-teal-600);
  color: var(--sf-ink-on-teal-deep);
  transform: translateY(0);
  box-shadow: var(--sf-shadow-xs);
}

/* Secondary —— 描边，真实可点 */
.btn--secondary {
  background: var(--sf-bg);
  color: var(--sf-gray-900);
  border-color: var(--sf-border-strong);
  transition:
    background-color var(--sf-dur-fast) var(--sf-ease-standard),
    border-color     var(--sf-dur-fast) var(--sf-ease-standard),
    color            var(--sf-dur-fast) var(--sf-ease-standard),
    transform        var(--sf-dur-fast) var(--sf-ease-standard);
}
.btn--secondary:hover {
  background: var(--sf-bg-accent);
  border-color: var(--sf-border-accent);
  color: var(--sf-fg-accent-hi);
  transform: translateY(-1px);
}
.btn--secondary:active { background: var(--sf-teal-100); transform: translateY(0); }

/* Ghost —— 文字型，真实可点 */
.btn--ghost {
  height: 40px; padding-inline: 12px;
  border-radius: var(--sf-radius-md);
  color: var(--sf-fg-accent);
  transition:
    background-color var(--sf-dur-fast) var(--sf-ease-standard),
    color            var(--sf-dur-fast) var(--sf-ease-standard);
}
.btn--ghost:hover { background: var(--sf-teal-a08); color: var(--sf-fg-accent-hi); }
.btn--ghost:active{ background: var(--sf-teal-a12); }

/* ---- Pending CTA（★即将上线）---------------------------------------------
   尺寸与 Primary 完全相同；无实心填充 → 语法上宣告「不是可点主行动」
   -------------------------------------------------------------------------- */
.cta-block { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--sf-space-3); }
.cta-block--center { align-items: center; }

.btn-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sf-space-3);
  height: 52px;
  padding-inline: 24px;
  border-radius: var(--sf-radius-lg);
  font-size: var(--sf-text-body);
  font-weight: var(--sf-fw-semibold);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

/* 状态：pending（当前） */
.btn-cta[data-cta-state="pending"] {
  background: var(--sf-bg-accent);
  color: var(--sf-teal-800);             /* 6.45 ✅ on teal-50 */
  border-color: var(--sf-teal-300);
  box-shadow: var(--sf-hairline-inner);
  cursor: not-allowed;
  user-select: none;
  transition: border-color var(--sf-dur-fast) var(--sf-ease-standard);
}
/* 零 hover 反馈：仅边框变化，无位移、无阴影、无背景变化 */
.btn-cta[data-cta-state="pending"]:hover { border-color: var(--sf-teal-400); }

/* 状态：live（上架后只需改 data-cta-state 并填 data-store-url，样式自动切换为 Primary） */
.btn-cta[data-cta-state="live"] {
  background: var(--sf-teal-500);
  color: var(--sf-ink-on-teal);
  border-color: transparent;
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color var(--sf-dur-fast) var(--sf-ease-standard),
    transform        var(--sf-dur-fast) var(--sf-ease-standard),
    box-shadow       var(--sf-dur-fast) var(--sf-ease-standard),
    color            var(--sf-dur-fast) var(--sf-ease-standard);
}
.btn-cta[data-cta-state="live"]:hover {
  background: var(--sf-teal-400);
  transform: translateY(-1px);
  box-shadow: var(--sf-glow-teal);
}
.btn-cta[data-cta-state="live"]:active {
  background: var(--sf-teal-600);
  color: var(--sf-ink-on-teal-deep);
  transform: translateY(0);
  box-shadow: var(--sf-shadow-xs);
}
.btn-cta[data-cta-state="live"] .cta-dot,
.btn-cta[data-cta-state="live"] .cta-tip { display: none; }

/* 脉冲点 —— 全站唯一允许的循环动画 */
.cta-dot {
  position: relative; flex: none;
  width: 8px; height: 8px; border-radius: var(--sf-radius-full);
  background: var(--sf-teal-500);
}
.cta-dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--sf-radius-full);
  background: var(--sf-teal-a32);
  animation: sf-pulse var(--sf-dur-pulse) var(--sf-ease-out) infinite;
}
@keyframes sf-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* 光扫 —— 仅 pending 态。用独立子层承载 overflow:hidden，避免裁掉外溢的 tooltip。
   色相走品牌青绿而非白：按钮底本身是 teal-50 极浅底，白光在上面等于不可见。 */
.cta-shine { display: none; }
.btn-cta[data-cta-state="pending"] .cta-shine {
  display: block;
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.btn-cta[data-cta-state="pending"] .cta-shine::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0;
  width: 30%;
  background: linear-gradient(90deg,
    rgba(53, 201, 181, 0) 0%, rgba(53, 201, 181, .26) 50%, rgba(53, 201, 181, 0) 100%);
  transform: translateX(-180%) skewX(-16deg);
  animation: sf-shine 3.8s var(--sf-ease-in-out) infinite;
}
@keyframes sf-shine {
  0%, 10%   { transform: translateX(-180%) skewX(-16deg); }
  55%, 100% { transform: translateX(440%)  skewX(-16deg); }
}
/* 文字层压在光扫之上；tooltip 保持自己的定位与更高层级 */
.btn-cta > span:not(.cta-tip):not(.cta-shine) { position: relative; z-index: 1; }
.cta-tip { z-index: 3; }

.cta-chip {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-label);
  font-weight: var(--sf-fw-medium);
  color: var(--sf-teal-700);
  background: var(--sf-teal-100);
  border-radius: var(--sf-radius-sm);
  padding: 3px 7px;
  letter-spacing: .01em;
}
.btn-cta[data-cta-state="live"] .cta-chip {
  color: var(--sf-ink-on-teal);
  background: rgba(6, 46, 40, .12);
}

/* tooltip */
.cta-tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  background: var(--sf-gray-900); color: #FFFFFF;
  font-size: var(--sf-text-xs); font-weight: var(--sf-fw-normal);
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-lg);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--sf-dur-fast) var(--sf-ease-standard),
              transform var(--sf-dur-fast) var(--sf-ease-standard);
}
.cta-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--sf-gray-900);
}
.btn-cta:hover .cta-tip,
.btn-cta:focus-visible .cta-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

.cta-micro {
  font-size: var(--sf-text-xs);
  color: var(--sf-fg-muted);
  line-height: 1.6;
}

/* ==========================================================================
   04 · NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: var(--sf-z-nav);
  height: var(--sf-nav-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    height           var(--sf-dur-base) var(--sf-ease-standard),
    background-color var(--sf-dur-base) var(--sf-ease-standard),
    box-shadow       var(--sf-dur-base) var(--sf-ease-standard),
    border-color     var(--sf-dur-base) var(--sf-ease-standard);
}
/* 吸顶态 —— 基线：近乎不透明的白，任何浏览器都保证文字对比度 */
.nav.is-scrolled {
  height: var(--sf-nav-h-scrolled);
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--sf-border);
  box-shadow: var(--sf-shadow-sm);
}
/* 增强：支持 backdrop-filter 时才降低不透明度换取毛玻璃质感 —— 全站唯一一处玻璃拟态。
   底色仍走白（导航文字为 gray-600/900，深色底会直接击穿对比度），
   「墨青」体现在描边与投影的 rgba(6,46,40,x) 色调上。 */
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .nav.is-scrolled {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom-color: rgba(6, 46, 40, .10);
    box-shadow: 0 1px 0 rgba(6, 46, 40, .05),
                0 8px 24px -16px rgba(6, 46, 40, .30);
  }
}
.nav__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sf-space-4);
}

.brand {
  display: inline-flex; align-items: baseline; gap: var(--sf-space-2);
  text-decoration: none; color: var(--sf-fg);
}
.brand__mark {
  font-family: var(--sf-font-display);
  font-size: 18px; font-weight: var(--sf-fw-bold);
  color: var(--sf-fg); line-height: 1;
}
.brand__en {
  font-size: 10px; font-weight: var(--sf-fw-semibold);
  letter-spacing: var(--sf-ls-wordmark);
  color: var(--sf-teal-700);
  line-height: 1;
}
.brand__icon { border-radius: 5px; }

.nav__links { display: none; align-items: center; gap: var(--sf-space-6); }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-fw-medium);
  color: var(--sf-fg-secondary);
  text-decoration: none;
  transition: color var(--sf-dur-fast) var(--sf-ease-standard);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px;
  height: 2px; border-radius: 2px;
  background: var(--sf-teal-300);
  transform: scaleX(0);
  transition: transform var(--sf-dur-base) var(--sf-ease-standard);
}
.nav__link:hover { color: var(--sf-fg); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] {
  color: var(--sf-fg-accent);
  font-weight: var(--sf-fw-semibold);
}
.nav__link[aria-current="page"]::after { background: var(--sf-teal-700); transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: var(--sf-space-3); }

.langswitch {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, .6);
}
.langswitch__btn {
  min-width: 44px; min-height: 34px;
  padding: 0 10px;
  border: 0; background: none;
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-fw-medium);
  color: var(--sf-fg-muted);
  cursor: pointer;
  transition: color var(--sf-dur-fast) var(--sf-ease-standard),
              background-color var(--sf-dur-fast) var(--sf-ease-standard);
}
.langswitch__btn + .langswitch__btn { border-left: 1px solid var(--sf-border); }
.langswitch__btn:hover { background: var(--sf-bg-hover); color: var(--sf-fg); }
.langswitch__btn[aria-pressed="true"] {
  color: var(--sf-fg-accent);
  font-weight: var(--sf-fw-semibold);
  background: var(--sf-bg-accent);
}

.nav__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; background: none; cursor: pointer;
  color: var(--sf-fg);
  border-radius: var(--sf-radius-md);
}
.nav__burger:hover { background: var(--sf-bg-hover); }
.nav__burger .icon-close { display: none; }
.nav__burger[aria-expanded="true"] .icon-menu  { display: none; }
.nav__burger[aria-expanded="true"] .icon-close { display: block; }

.navdrawer {
  position: fixed; inset: var(--sf-nav-h) 0 0 0;
  z-index: var(--sf-z-dropdown);
  background: var(--sf-bg);
  border-top: 1px solid var(--sf-border);
  padding: var(--sf-space-8) var(--sf-page-pad);
  display: none;
}
.navdrawer.is-open { display: block; }
.navdrawer__list { display: flex; flex-direction: column; gap: var(--sf-space-2); }
.navdrawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sf-space-4) 0;
  font-size: var(--sf-text-h4);
  font-weight: var(--sf-fw-medium);
  color: var(--sf-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--sf-border);
}
.navdrawer__link[aria-current="page"] { color: var(--sf-fg-accent); font-weight: var(--sf-fw-semibold); }
.navdrawer__link svg { color: var(--sf-fg-disabled); }
body.is-locked { overflow: hidden; }

/* ==========================================================================
   05 · HERO（首页）
   ========================================================================== */
.hero {
  position: relative;
  background: var(--sf-bg);                    /* 渐变移交 ::before 承载，便于做视差 */
  padding-block: clamp(3.5rem, 9vw, 8rem) clamp(3.5rem, 8vw, 7rem);
  margin-top: calc(var(--sf-nav-h) * -1);
  padding-top: calc(var(--sf-nav-h) + clamp(3.5rem, 9vw, 8rem));
  overflow: hidden;
}
/* 背景微视差层 —— 比容器高 260px，JS 最多上移 240px，永远不会露白边。
   位移由 --sf-hero-shift 驱动；JS 未运行 / 减少动效 时该变量为 0，等同原静态渐变。 */
.hero::before {
  content: ""; position: absolute; z-index: 0;
  top: 0; left: 0; right: 0;
  height: calc(100% + 260px);
  background: var(--sf-grad-hero);
  transform: translate3d(0, var(--sf-hero-shift, 0px), 0);
  pointer-events: none;
}
.js-on .hero::before { will-change: transform; }
.hero__inner { text-align: center; position: relative; z-index: 1; }

.hero__wordmark-en {
  display: block;
  font-size: var(--sf-text-wordmark-en);
  font-weight: var(--sf-fw-semibold);
  letter-spacing: var(--sf-ls-wordmark);
  color: var(--sf-teal-700);
  margin-bottom: var(--sf-space-4);
}
.hero__wordmark {
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-wordmark);
  font-weight: var(--sf-fw-bold);
  line-height: 1.06;
  letter-spacing: 0;
  color: var(--sf-gray-900);
  margin: 0;
}
.hero__subtitle {
  margin-top: var(--sf-space-5);
  font-size: var(--sf-text-lead);
  line-height: var(--sf-lh-lead);
  color: var(--sf-fg-secondary);
}
.hero__tagline {
  margin: var(--sf-space-8) auto 0;
  max-width: 22em;
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-tagline);
  font-weight: var(--sf-fw-semibold);
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--sf-gray-900);
  text-wrap: pretty;
  position: relative;
}
.hero__tagline em {
  font-style: normal;
  color: var(--sf-fg-accent);            /* teal-700, 5.04 ✅ */
  box-shadow: inset 0 -.42em 0 var(--sf-teal-100);
}
.hero__formats {
  margin-top: var(--sf-space-6);
  display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sf-space-2);
}
.hero__actions {
  margin-top: var(--sf-space-10);
  display: flex; flex-direction: column; align-items: center; gap: var(--sf-space-4);
}
.hero__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sf-space-3); }

/* ==========================================================================
   06 · 信任背书栏
   ========================================================================== */
.trustbar { display: grid; gap: var(--sf-space-8); }
.trust {
  display: flex; gap: var(--sf-space-4);
  align-items: flex-start;
}
.trust__icon { color: var(--sf-teal-600); margin-top: 2px; }   /* 3.47 ✅ 图形合规 */
.trust__title {
  font-size: var(--sf-text-h4);
  font-weight: var(--sf-fw-semibold);
  color: var(--sf-fg);
  margin-bottom: var(--sf-space-1);
}
.trust__desc { font-size: var(--sf-text-sm); line-height: var(--sf-lh-sm); color: var(--sf-fg-secondary); }

/* ==========================================================================
   06B · 多设备适配「不止手机」（v3 重构 · 首页 Hero 之后第一屏内容）
   视觉权重仅次于 Hero：全宽 teal-50 背景 + 真实营销海报轮播（深紫底做明暗对撞）
   取代 v2 的 .dev/.devslot 纯 CSS 设备绘制，9 张海报全部落入此组件
   ========================================================================== */
.crossdev__inner { display: grid; gap: var(--sf-space-12); align-items: center; }

.crossdev__title { font-size: var(--sf-text-h1); }
.crossdev .section-lead { color: var(--sf-gray-700); }   /* 8.07 ✅ on teal-50 */

.crossdev__list { margin-top: var(--sf-space-8); display: grid; gap: var(--sf-space-4); }
.crossdev__item { display: flex; align-items: flex-start; gap: var(--sf-space-4); }
.crossdev__ico {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 40px; height: 40px;
  border-radius: var(--sf-radius-md);
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--sf-teal-200);
  color: var(--sf-teal-700);                 /* 5.04 ✅ 描边图标 */
  box-shadow: var(--sf-shadow-xs);
}
.crossdev__ico svg { width: 20px; height: 20px; }
.crossdev__itemtitle {
  font-size: var(--sf-text-h4);
  font-weight: var(--sf-fw-semibold);
  color: var(--sf-fg);
  line-height: 1.5;
}
.crossdev__itemdesc {
  margin-top: 2px;
  font-size: var(--sf-text-sm);
  line-height: var(--sf-lh-sm);
  color: var(--sf-fg-secondary);
}
.crossdev__note {
  margin-top: var(--sf-space-8);
  display: inline-flex; align-items: center; gap: var(--sf-space-2);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  color: var(--sf-teal-800);                 /* 6.45 ✅ on teal-50 */
}
.crossdev__note::before {
  content: ""; flex: none;
  width: 8px; height: 8px; border-radius: var(--sf-radius-full);
  background: var(--sf-teal-500);
}

/* ---- 06B-1 · 海报轮播 .postershow ------------------------------------
   结构：设备 tab（手机/平板/PC）→ 视口（含 3 张主题海报）→ 主题 sub-dot
   海报自带深紫底，直接落在 teal-50 区上，不加白卡边框
   切换设备 tab 整体换 panel；切换 sub-dot 在 panel 内淡入淡出
   --------------------------------------------------------------------- */
.crossdev__stage { display: flex; justify-content: center; }

.postershow {
  display: grid;
  gap: var(--sf-space-5);
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
}

/* 设备 Tab */
.postershow__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sf-space-2);
  flex-wrap: wrap;
}

.postershow__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-2);
  min-height: 40px;
  padding: var(--sf-space-2) var(--sf-space-4);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-bg);
  color: var(--sf-fg-secondary);
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-fw-medium);
  line-height: var(--sf-lh-none);
  cursor: pointer;
  transition:
    color            var(--sf-dur-base) var(--sf-ease-standard),
    background-color var(--sf-dur-base) var(--sf-ease-standard),
    border-color     var(--sf-dur-base) var(--sf-ease-standard),
    box-shadow       var(--sf-dur-base) var(--sf-ease-standard);
}
.postershow__tab:hover {
  border-color: var(--sf-border-strong);
  color: var(--sf-fg);
  box-shadow: var(--sf-shadow-sm);
}
.postershow__tab:focus-visible {
  outline: none;
  box-shadow: var(--sf-ring-focus);
}
.postershow__tab[aria-selected="true"] {
  background: var(--sf-teal-500);
  border-color: transparent;
  color: var(--sf-ink-on-teal);
}
.postershow__tab svg {
  width: var(--sf-icon-sm);
  height: var(--sf-icon-sm);
  flex: none;
}

/* 视口与幻灯片 */
.postershow__panels { position: relative; }
.postershow__panel { display: none; }
.postershow__panel.is-active { display: block; }

.postershow__viewport {
  position: relative;
  /* v3 修复（P1-3）：固定取景框比例，切换设备 tab 时面板高度恒定 → 无 CLS。
     三种海报（16:9 / 2:3 / 9:16）统一 contain 进同一方形视口。 */
  aspect-ratio: 1 / 1;
  max-height: 620px;
  background: var(--sf-plate-bg);
  border-radius: var(--sf-radius-xl);
  overflow: hidden;
  box-shadow:
    var(--sf-shadow-lg),
    var(--sf-hairline-dark);
  line-height: 0;
}
.postershow__viewport img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 同一 panel 内的 3 张主题海报：淡入淡出叠放。
   视口比例已固定（见上），无需再靠 active 的 relative 撑高度，全部 absolute。 */
.postershow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* v3 修复（P1-1）：只有 opacity:0 时，非活跃海报仍留在无障碍树里会被读屏器朗读。
     visibility:hidden 才真正移出 a11y 树；用 0s 延迟到淡出结束再切，保留淡入淡出。 */
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sf-dur-base) var(--sf-ease-standard),
    visibility 0s linear var(--sf-dur-base);
}
.postershow__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--sf-dur-base) var(--sf-ease-standard),
    visibility 0s linear 0s;
}

/* 主题 sub-dot（pill 标签 + 前置小圆点） */
.postershow__subdots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sf-space-3);
  flex-wrap: wrap;
}
.postershow__subdot {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-2);
  min-height: 32px;
  padding: var(--sf-space-1) var(--sf-space-3);
  border: 0;
  border-radius: var(--sf-radius-full);
  background: transparent;
  color: var(--sf-fg-secondary);
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-fw-medium);
  cursor: pointer;
  transition:
    color            var(--sf-dur-base) var(--sf-ease-standard),
    background-color var(--sf-dur-base) var(--sf-ease-standard),
    box-shadow       var(--sf-dur-base) var(--sf-ease-standard);
}
.postershow__subdot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--sf-radius-full);
  background: var(--sf-border-strong);
  transition: background-color var(--sf-dur-base) var(--sf-ease-standard);
}
.postershow__subdot:hover { color: var(--sf-fg); }
.postershow__subdot[aria-pressed="true"] {
  background: var(--sf-teal-a08);
  color: var(--sf-fg-accent);
}
.postershow__subdot[aria-pressed="true"]::before {
  background: var(--sf-teal-500);
}
.postershow__subdot:focus-visible {
  outline: none;
  box-shadow: var(--sf-ring-focus);
}

/* 桌面端：与左侧文案左右分栏时，轮播容器自然撑满 */
@media (min-width: 1024px) {
  .postershow {
    max-width: none;
    margin-inline: 0;
  }
}


/* ==========================================================================
   07 · CARDS
   ========================================================================== */
/* 卖点卡（首页 3 卡）—— 14px 圆角 / 32px padding / 40px 图标 / 白底 */
.pitchgrid { display: grid; gap: var(--sf-space-6); align-items: stretch; }
.pitch {
  display: flex; flex-direction: column;
  background: var(--sf-bg);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-xl);
  padding: var(--sf-space-8);
  box-shadow: none;
  transition:
    border-color var(--sf-dur-base) var(--sf-ease-standard),
    box-shadow   var(--sf-dur-base) var(--sf-ease-standard),
    transform    var(--sf-dur-base) var(--sf-ease-standard);
}
.pitch:hover {
  border-color: var(--sf-border-strong);
  box-shadow: var(--sf-shadow-md);
  transform: translateY(-2px);
}
.pitch__icon { color: var(--sf-teal-600); transition: color var(--sf-dur-base) var(--sf-ease-standard); }
.pitch:hover .pitch__icon { color: var(--sf-teal-700); }
.pitch__title { margin-top: var(--sf-space-6); }
.pitch__desc {
  margin-top: var(--sf-space-3);
  flex: 1;
  color: var(--sf-fg-secondary);
  line-height: var(--sf-lh-body);
}
.pitch__meta { margin-top: var(--sf-space-6); }

/* 功能网格卡（9 宫格）—— 10px 圆角 / 24px padding / 浅底 / 整卡可点 */
.fgrid { display: grid; gap: var(--sf-space-4); }
.fcard {
  position: relative;
  display: block;
  background: var(--sf-bg-subtle);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  padding: var(--sf-space-6);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    background-color var(--sf-dur-base) var(--sf-ease-standard),
    border-color     var(--sf-dur-base) var(--sf-ease-standard),
    box-shadow       var(--sf-dur-base) var(--sf-ease-standard);
}
.fcard:hover {
  background: var(--sf-bg);
  border-color: var(--sf-border-accent);
  box-shadow: var(--sf-shadow-sm);
  color: inherit;
}
.fcard__head { display: flex; align-items: center; gap: var(--sf-space-3); }
.fcard__icon { color: var(--sf-teal-600); }
.fcard__title {
  font-size: var(--sf-text-h4);
  font-weight: var(--sf-fw-semibold);
  color: var(--sf-fg);
}
.fcard__desc {
  margin-top: var(--sf-space-2);
  font-size: var(--sf-text-sm);
  line-height: var(--sf-lh-sm);
  color: var(--sf-fg-secondary);
}
.fcard__arrow {
  position: absolute; top: var(--sf-space-5); right: var(--sf-space-5);
  color: var(--sf-teal-700);
  opacity: 0;
  transition: opacity var(--sf-dur-base) var(--sf-ease-standard);
}
.fcard:hover .fcard__arrow, .fcard:focus-visible .fcard__arrow { opacity: 1; }

/* ==========================================================================
   08 · 深色展台 PLATE + 手机 MOCKUP
   ========================================================================== */
.plate {
  position: relative;
  background: var(--sf-grad-plate);
  border-radius: var(--sf-radius-2xl);
  padding: 40px 20px;
  box-shadow: var(--sf-shadow-plate), var(--sf-hairline-dark);
  overflow: hidden;
  isolation: isolate;
}
.plate::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 50% at 50% 20%, rgba(53, 201, 181, .12) 0%, transparent 70%);
  pointer-events: none;
}
.plate__inner { display: grid; gap: var(--sf-space-10); align-items: center; }
.plate__title {
  font-size: var(--sf-text-h2);
  font-weight: var(--sf-fw-semibold);
  color: var(--sf-plate-text);
}
.plate__lead {
  margin-top: var(--sf-space-4);
  font-size: var(--sf-text-lead);
  line-height: var(--sf-lh-lead);
  color: var(--sf-plate-text-dim);
}
.plate__list { margin-top: var(--sf-space-6); display: grid; gap: var(--sf-space-3); }
.plate__li {
  display: flex; gap: var(--sf-space-3); align-items: flex-start;
  font-size: var(--sf-text-sm); line-height: var(--sf-lh-sm);
  color: var(--sf-plate-text-dim);
}
.plate__li svg { color: var(--sf-plate-accent); margin-top: 3px; }  /* 9.17 ✅ on plate */
.plate__li b { color: var(--sf-plate-text); font-weight: var(--sf-fw-semibold); }
.plate__note {
  margin-top: var(--sf-space-8);
  display: inline-flex; align-items: center; gap: var(--sf-space-2);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  color: var(--sf-plate-text-faint);
}
.plate__note::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--sf-radius-full);
  background: var(--sf-teal-500); flex: none;
}
.plate__stage { display: flex; justify-content: center; }

/* 手机外壳 */
.phone {
  position: relative;
  width: min(78vw, 300px);
  background: var(--sf-shell);
  border-radius: var(--sf-radius-phone);
  padding: 10px;
  box-shadow: var(--sf-shadow-phone),
              inset 0 0 0 1px var(--sf-shell-edge),
              inset 0 1px 0 var(--sf-shell-hi);
}
.phone::before {                       /* 听筒暗示条（不画刘海/侧键） */
  content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: var(--sf-radius-full);
  background: var(--sf-shell-hi);
}
.phone__screen {
  border-radius: var(--sf-radius-screen);
  overflow: hidden;
  background: var(--sf-plate-bg);      /* 加载占位色，绝不留白 */
  box-shadow: var(--sf-hairline-dark); /* 暗底内描边，墨青调而非纯黑 */
  line-height: 0;
}
.phone__screen img { width: 100%; height: auto; display: block; }

/* 卡片内截图凹槽（功能详情页）—— 白卡 → 边框 → 深框 → 截图 */
.shot {
  display: block;
  background: var(--sf-plate-bg);
  padding: 8px;
  border-radius: var(--sf-radius-lg);
  box-shadow: var(--sf-hairline-dark), 0 1px 2px rgba(6, 46, 40, .06);
  border: 0;
  cursor: zoom-in;
  width: 100%;
  max-width: 264px;
  margin-inline: auto;
  transition: box-shadow var(--sf-dur-base) var(--sf-ease-standard);
}
.shot:hover { box-shadow: var(--sf-hairline-dark), var(--sf-shadow-md); }
.shot img { width: 100%; height: auto; border-radius: var(--sf-radius-sm); display: block; }
.shot--light { background: var(--sf-gray-300); }   /* 亮色截图配浅中间调，避免深框包亮图的反差错位 */

.shot-caption {
  margin-top: var(--sf-space-3);
  font-size: var(--sf-text-xs);
  color: var(--sf-fg-muted);
  text-align: center;
}

/* ==========================================================================
   09 · 从云到端 故事区
   ========================================================================== */
.story { text-align: center; }
.story__quotemark {
  color: var(--sf-teal-300);
  margin: 0 auto var(--sf-space-6);
}
.story__body p {
  font-size: var(--sf-text-lead);
  line-height: var(--sf-lh-lead);
  color: var(--sf-gray-800);
  text-align: left;
}
.story__body p + p { margin-top: var(--sf-space-6); }
.story__body b { font-weight: var(--sf-fw-semibold); color: var(--sf-gray-900); }
.story__punch {
  margin-top: var(--sf-space-10);
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-h2);
  font-weight: var(--sf-fw-semibold);
  line-height: 1.5;
  color: var(--sf-teal-900);            /* 9.52 ✅ */
  text-wrap: balance;
}
.story__sig {
  margin-top: var(--sf-space-6);
  font-size: var(--sf-text-xs);
  color: var(--sf-fg-secondary);
  font-family: var(--sf-font-mono);
}

/* ==========================================================================
   10 · 底部 CTA
   ========================================================================== */
.endcta { text-align: center; }
.endcta__title { font-size: var(--sf-text-h1); }
.endcta__lead {
  margin: var(--sf-space-4) auto 0;
  max-width: 34em;
  font-size: var(--sf-text-lead);
  line-height: var(--sf-lh-lead);
  color: var(--sf-fg-secondary);
}
.endcta__actions { margin-top: var(--sf-space-10); display: flex; flex-direction: column; align-items: center; gap: var(--sf-space-4); }
.endcta__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sf-space-3); }

/* ==========================================================================
   11 · FOOTER
   ========================================================================== */
.footer {
  background: var(--sf-gray-50);
  border-top: 1px solid var(--sf-border);
  padding-block: var(--sf-space-16) var(--sf-space-10);
}
.footer__grid { display: grid; gap: var(--sf-space-10); }
.footer__about { max-width: 30em; }
.footer__tag {
  margin-top: var(--sf-space-4);
  font-size: var(--sf-text-sm);
  line-height: var(--sf-lh-sm);
  color: var(--sf-fg-secondary);
}
.footer__coltitle {
  font-size: var(--sf-text-label);
  font-weight: var(--sf-fw-semibold);
  letter-spacing: var(--sf-ls-wide);
  text-transform: uppercase;
  color: var(--sf-fg-muted);
  margin-bottom: var(--sf-space-4);
}
.footer__list { display: grid; gap: var(--sf-space-3); }
.footer__list a {
  font-size: var(--sf-text-sm);
  color: var(--sf-fg-secondary);
  text-decoration: none;
}
.footer__list a:hover { color: var(--sf-fg-accent-hi); }
.footer__bottom {
  margin-top: var(--sf-space-12);
  padding-top: var(--sf-space-6);
  border-top: 1px solid var(--sf-border);
  display: flex; flex-wrap: wrap; gap: var(--sf-space-3);
  justify-content: space-between; align-items: center;
  font-size: var(--sf-text-xs);
  color: var(--sf-fg-muted);
}

/* ==========================================================================
   12 · PAGE HERO（内页）
   ========================================================================== */
.pagehero {
  background: var(--sf-bg-subtle);
  border-bottom: 1px solid var(--sf-border);
  padding-block: var(--sf-space-12) var(--sf-space-16);
  margin-top: calc(var(--sf-nav-h) * -1);
  padding-top: calc(var(--sf-nav-h) + var(--sf-space-12));
}
.crumbs {
  display: flex; align-items: center; gap: var(--sf-space-2);
  font-size: var(--sf-text-xs);
  color: var(--sf-fg-muted);
  margin-bottom: var(--sf-space-5);
}
.crumbs a { color: var(--sf-fg-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--sf-fg-accent-hi); }
.crumbs svg { color: var(--sf-gray-400); }
.pagehero__title { font-size: var(--sf-text-display); font-weight: var(--sf-fw-bold); line-height: 1.15; }
.pagehero__lead {
  margin-top: var(--sf-space-5);
  max-width: var(--sf-measure-cjk);
  font-size: var(--sf-text-lead);
  line-height: var(--sf-lh-lead);
  color: var(--sf-fg-secondary);
}
.pagehero__meta { margin-top: var(--sf-space-6); }

/* ==========================================================================
   13 · 功能详情页
   ========================================================================== */
.featlist { display: grid; gap: var(--sf-space-8); }

.feat {
  background: var(--sf-bg);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-2xl);
  padding: var(--sf-space-8);
  scroll-margin-top: calc(var(--sf-nav-h) + 32px);
  transition: border-color var(--sf-dur-base) var(--sf-ease-standard),
              box-shadow   var(--sf-dur-base) var(--sf-ease-standard);
}
.feat:hover { border-color: var(--sf-border-strong); box-shadow: var(--sf-shadow-md); }
.feat__grid { display: grid; gap: var(--sf-space-8); align-items: center; }
.feat__index {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  color: var(--sf-fg-muted);
  letter-spacing: .06em;
}
.feat__title { margin-top: var(--sf-space-3); font-size: var(--sf-text-h2); }
.feat__desc {
  margin-top: var(--sf-space-4);
  color: var(--sf-fg-body);
  line-height: var(--sf-lh-body);
}
.feat__desc + .feat__desc { margin-top: var(--sf-space-4); }
.feat__chips { margin-top: var(--sf-space-6); }

/* 纯文字宽卡：用「流程三段」做版式变化，不放截图 */
.feat--solo { background: var(--sf-bg-subtle); }
.flow { display: grid; gap: var(--sf-space-4); margin-top: var(--sf-space-8); counter-reset: flowstep; }
.flow__step {
  position: relative;
  background: var(--sf-bg);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  padding: var(--sf-space-6);
}
.flow__num {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-label);
  font-weight: var(--sf-fw-semibold);
  color: var(--sf-teal-800);
  background: var(--sf-teal-50);
  border: 1px solid var(--sf-teal-200);
  border-radius: var(--sf-radius-sm);
  width: 26px; height: 22px;
  margin-bottom: var(--sf-space-4);
}
.flow__title { font-size: var(--sf-text-h4); font-weight: var(--sf-fw-semibold); color: var(--sf-fg); }
.flow__desc { margin-top: var(--sf-space-2); font-size: var(--sf-text-sm); line-height: var(--sf-lh-sm); color: var(--sf-fg-secondary); }

/* 双联纯文字卡 */
.duo { display: grid; gap: var(--sf-space-6); }
.duo__card {
  background: var(--sf-bg);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-xl);
  padding: var(--sf-space-8);
  scroll-margin-top: calc(var(--sf-nav-h) + 32px);
  transition: border-color var(--sf-dur-base) var(--sf-ease-standard),
              box-shadow   var(--sf-dur-base) var(--sf-ease-standard),
              transform    var(--sf-dur-base) var(--sf-ease-standard);
}
.duo__card:hover { border-color: var(--sf-border-strong); box-shadow: var(--sf-shadow-md); transform: translateY(-2px); }
.duo__icon { color: var(--sf-teal-600); }
.duo__title { margin-top: var(--sf-space-5); font-size: var(--sf-text-h3); }
.duo__desc { margin-top: var(--sf-space-3); color: var(--sf-fg-secondary); line-height: var(--sf-lh-body); }
.duo__chips { margin-top: var(--sf-space-5); }

/* 技术规格表 */
.spec {
  background: var(--sf-bg-accent);
  border: 1px solid var(--sf-border-soft);
  border-radius: var(--sf-radius-2xl);
  padding: var(--sf-space-8);
}
.spec__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec table { width: 100%; border-collapse: collapse; font-size: var(--sf-text-sm); min-width: 420px; }
.spec th, .spec td { text-align: left; padding: var(--sf-space-3) var(--sf-space-4); border-bottom: 1px solid var(--sf-teal-200); vertical-align: top; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec th { width: 40%; font-weight: var(--sf-fw-medium); color: var(--sf-gray-700); }
.spec td { font-family: var(--sf-font-mono); font-size: var(--sf-text-mono-sm); color: var(--sf-teal-800); font-variant-numeric: tabular-nums; }
.spec__note { margin-top: var(--sf-space-6); font-size: var(--sf-text-xs); color: var(--sf-fg-secondary); }

/* 页内锚点导航 */
.anchornav { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); }
.anchornav a {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 12px;
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-fw-medium);
  color: var(--sf-fg-secondary);
  background: var(--sf-bg);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-full);
  text-decoration: none;
  transition: border-color var(--sf-dur-fast) var(--sf-ease-standard),
              color        var(--sf-dur-fast) var(--sf-ease-standard),
              background-color var(--sf-dur-fast) var(--sf-ease-standard);
}
.anchornav a:hover { color: var(--sf-fg-accent-hi); border-color: var(--sf-border-accent); background: var(--sf-bg-accent); }

/* ==========================================================================
   14 · 更新日志 时间线
   ========================================================================== */
.timeline { position: relative; display: grid; gap: var(--sf-space-12); }

.tl {
  position: relative;
  padding-left: var(--sf-space-8);
}
/* 轴线：每条自绘一段，首尾条目做渐隐处理 */
.tl::before {
  content: ""; position: absolute; left: 5px; top: 0; bottom: calc(var(--sf-space-12) * -1);
  width: 2px; background: var(--sf-border);
}
.tl:last-child::before { bottom: auto; height: 10px; }
.tl__dot {
  position: absolute; left: 0; top: 4px;
  width: 12px; height: 12px;
  border-radius: var(--sf-radius-full);
  background: var(--sf-bg);
  border: 2px solid var(--sf-border-strong);
  z-index: 1;
  transition: border-color var(--sf-dur-base) var(--sf-ease-standard);
}
.tl:hover .tl__dot { border-color: var(--sf-teal-500); }

.tl__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-3); }
.tl__ver {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-fw-semibold);
  color: var(--sf-teal-700);
  background: var(--sf-teal-50);
  border-radius: var(--sf-radius-sm);
  padding: 2px 8px;
}
.tl__date { font-family: var(--sf-font-mono); font-size: var(--sf-text-xs); color: var(--sf-fg-muted); }
.tl__title { margin-top: var(--sf-space-3); }
.tl__summary { margin-top: var(--sf-space-3); color: var(--sf-fg-body); line-height: var(--sf-lh-body); }
.tl__changes { margin-top: var(--sf-space-4); display: grid; gap: var(--sf-space-2); }
.tl__changes li {
  display: flex; gap: var(--sf-space-3); align-items: flex-start;
  font-size: var(--sf-text-sm); line-height: var(--sf-lh-sm);
  color: var(--sf-fg-body);
}
.tl__changes li::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: 10px;
  border-radius: var(--sf-radius-full); background: var(--sf-teal-300);
}
.tl__chips { margin-top: var(--sf-space-5); }

.tl__details { margin-top: var(--sf-space-5); }
.tl__details summary {
  display: inline-flex; align-items: center; gap: var(--sf-space-2);
  font-size: var(--sf-text-xs);
  color: var(--sf-fg-muted);
  cursor: pointer;
  list-style: none;
  min-height: 32px;
}
.tl__details summary::-webkit-details-marker { display: none; }
.tl__details summary:hover { color: var(--sf-fg-accent-hi); }
.tl__details summary svg { transition: transform var(--sf-dur-base) var(--sf-ease-standard); }
.tl__details[open] summary svg { transform: rotate(180deg); }
.tl__detailsbody {
  margin-top: var(--sf-space-3);
  background: var(--sf-bg-muted);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  padding: var(--sf-space-4);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  line-height: 1.9;
  color: var(--sf-fg-secondary);
}
.tl__detailsbody li { display: flex; gap: var(--sf-space-2); }
.tl__detailsbody li::before { content: "·"; color: var(--sf-teal-600); }

/* ---- 里程碑变体（五维度同时区别）---------------------------------------- */
.tl--milestone::before {
  width: 3px; left: 4.5px;                /* 轴心对齐 6px */
  background: linear-gradient(180deg, var(--sf-teal-300), var(--sf-teal-600));
}
.tl--milestone { padding-left: var(--sf-space-10); }
.tl--milestone .tl__dot {
  width: 18px; height: 18px; top: 0; left: -3px;   /* 轴心对齐 6px */
  background: var(--sf-teal-500);
  border: 0;
  box-shadow: 0 0 0 6px var(--sf-teal-a20);
  display: flex; align-items: center; justify-content: center;
  color: var(--sf-ink-on-teal);        /* 7.12 ✅ on teal-500（与 Primary 按钮同规，禁白字） */
}
.tl--milestone .tl__dot svg { width: 10px; height: 10px; stroke-width: 2.5; }
.tl__card {
  background: var(--sf-bg-accent);
  border: 1px solid var(--sf-border-soft);
  border-left: 3px solid var(--sf-teal-500);
  border-radius: var(--sf-radius-xl);
  padding: var(--sf-space-8);
}
.tl__badge {
  display: inline-flex; align-items: center; gap: var(--sf-space-2);
  background: var(--sf-teal-800);
  color: #FFFFFF;                       /* 6.79 ✅ */
  font-size: var(--sf-text-label);
  font-weight: var(--sf-fw-semibold);
  border-radius: var(--sf-radius-full);
  padding: 5px 12px;
  margin-bottom: var(--sf-space-5);
}
.tl__badge svg { width: 14px; height: 14px; }
.tl--milestone .tl__title { font-size: var(--sf-text-h2); }
.tl__quote {
  margin-top: var(--sf-space-6);
  border-left: 2px solid var(--sf-teal-300);
  padding-left: var(--sf-space-4);
  color: var(--sf-teal-800);            /* 6.45 ✅ on teal-50 */
  font-weight: var(--sf-fw-medium);
  font-size: var(--sf-text-lead);
  line-height: var(--sf-lh-lead);
}
.tl--milestone .tl__changes li::before { background: var(--sf-teal-500); }
.tl--milestone .tl__detailsbody { background: rgba(255, 255, 255, .7); border-color: var(--sf-teal-200); }

/* ---- 起源变体（弱化锚点）------------------------------------------------- */
.tl--origin .tl__dot {
  width: 16px; height: 16px; top: 2px; left: -2px;  /* 轴心对齐 6px */
  background: var(--sf-teal-300);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--sf-teal-950);
}
.tl--origin .tl__dot svg { width: 10px; height: 10px; stroke-width: 2.5; }
.badge-origin {
  display: inline-flex; align-items: center; gap: var(--sf-space-2);
  background: var(--sf-gray-100);
  color: var(--sf-gray-700);
  font-size: var(--sf-text-label);
  font-weight: var(--sf-fw-semibold);
  border-radius: var(--sf-radius-full);
  padding: 4px 10px;
}

.changelog-foot {
  margin-top: var(--sf-space-16);
  padding-top: var(--sf-space-8);
  border-top: 1px solid var(--sf-border);
  font-size: var(--sf-text-sm);
  color: var(--sf-fg-secondary);
}

/* ==========================================================================
   15 · 反馈页
   ========================================================================== */
.survey__top {
  display: flex; flex-wrap: wrap; gap: var(--sf-space-4);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--sf-space-6);
}
.survey__hint { font-size: var(--sf-text-sm); color: var(--sf-fg-secondary); max-width: 34em; }
.survey__frame {
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-xl);
  overflow: hidden;
  background: var(--sf-bg-muted);
}
.survey__frame iframe { width: 100%; min-height: 720px; border: 0; display: block; background: var(--sf-bg); }
.survey__fallback {
  margin-top: var(--sf-space-4);
  display: flex; gap: var(--sf-space-3); align-items: flex-start;
  background: var(--sf-info-bg);
  border: 1px solid var(--sf-info-border);
  border-radius: var(--sf-radius-lg);
  padding: var(--sf-space-4) var(--sf-space-5);
  font-size: var(--sf-text-sm);
  line-height: var(--sf-lh-sm);
  color: var(--sf-gray-700);
}
.survey__fallback svg { color: var(--sf-info-strong); margin-top: 2px; }

.thanks { display: grid; gap: var(--sf-space-6); }
.thanks__card {
  background: var(--sf-bg);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-xl);
  padding: var(--sf-space-8);
}
.thanks__icon { color: var(--sf-teal-600); }
.thanks__title { margin-top: var(--sf-space-5); font-size: var(--sf-text-h3); }
.thanks__desc { margin-top: var(--sf-space-3); color: var(--sf-fg-secondary); line-height: var(--sf-lh-body); }

/* ==========================================================================
   16 · LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: var(--sf-z-backdrop);
  background: var(--sf-overlay);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--sf-space-6);
}
.lightbox.is-open { display: flex; }
.lightbox__box {
  position: relative; z-index: var(--sf-z-modal);
  background: var(--sf-plate-bg);
  padding: 12px;
  border-radius: var(--sf-radius-xl);
  box-shadow: var(--sf-shadow-xl), var(--sf-hairline-dark);
  max-height: 88vh;
  display: flex; flex-direction: column; gap: var(--sf-space-3);
  animation: sf-zoom var(--sf-dur-slow) var(--sf-ease-out);
}
@keyframes sf-zoom { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.lightbox__box img {
  max-height: calc(88vh - 72px);
  width: auto; max-width: 100%;
  border-radius: var(--sf-radius-md);
  display: block; margin-inline: auto;
}
.lightbox__cap {
  font-size: var(--sf-text-sm);
  color: var(--sf-plate-text-dim);
  text-align: center;
}
.lightbox__close {
  position: absolute; top: -52px; right: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--sf-radius-full);
  background: rgba(255, 255, 255, .10);
  color: var(--sf-plate-text);
  cursor: pointer;
  transition: background-color var(--sf-dur-fast) var(--sf-ease-standard);
}
.lightbox__close:hover { background: rgba(255, 255, 255, .18); }

/* ==========================================================================
   15B · DEVICE SHOWCASE STRIP（features 页顶部海报速览 · v3 新增）
   视觉层级：浅灰 section → 白卡片 → 深框 → 海报
   还原 §10.3 的「物理厚度」：海报由深色 box 包裹，避免白底和深紫底硬切
   ========================================================================== */
.poster-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sf-space-4);
  align-items: end;
  justify-items: center;
  margin-top: var(--sf-section-gap);
}

.poster-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sf-space-3);
  width: 100%;
  max-width: 320px;
  padding: var(--sf-space-4);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-xl);
  background: var(--sf-bg);
  box-shadow: none;
  cursor: zoom-in;
  /* 仅过渡 border-color / box-shadow / transform —— 显式列举，不用 transition: all */
  transition:
    border-color var(--sf-dur-base) var(--sf-ease-standard),
    box-shadow   var(--sf-dur-base) var(--sf-ease-standard),
    transform    var(--sf-dur-base) var(--sf-ease-standard);
}
.poster-card:hover {
  border-color: var(--sf-border-strong);
  box-shadow: var(--sf-shadow-md);
  transform: translateY(-2px);
}
.poster-card:focus-visible {
  outline: none;
  box-shadow: var(--sf-ring-focus);
}

/* 截图凹槽：白卡 → 深框 → 海报（与 §10.3 一致） */
.poster-card__frame {
  display: block;
  width: 100%;
  background: var(--sf-plate-bg);
  padding: 8px;
  border-radius: var(--sf-radius-lg);
  box-shadow: var(--sf-hairline-dark), 0 1px 2px rgba(6, 46, 40, .06);
  line-height: 0;
  overflow: hidden;
}
.poster-card__frame img {
  width: 100%;
  height: auto;
  /* 统一取景框：三张海报共用同一比例，卡片视觉高度保持一致 */
  aspect-ratio: 4 / 5;
  max-height: 400px;
  /* v3 修复（P0）：原 `cover` + `max-height:280px` 把手机/平板海报底部裁掉约 42%，
     连同「零联网 零上传 免 API Key」品牌标签一起丢失。
     改用 contain：整幅海报完整可见，留白由 plate-bg 深底承接，与海报深色底无缝。 */
  object-fit: contain;
  object-position: center;
  background: var(--sf-plate-bg);
  border-radius: var(--sf-radius-sm);
  display: block;
}
/* 三设备原始比例为 16:9 / 2:3 / 9:16，统一 contain 进上面的 4:5 取景框。
   不再按设备各自比例裁切；--pc / --tablet / --phone 仅保留为语义 hook。 */

.poster-card__label {
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-fw-semibold);
  color: var(--sf-fg-secondary);
}

/* 平板及以下：横向滚动窄带（375px 不撑爆页面） */
@media (max-width: 767px) {
  .poster-strip__grid {
    display: flex;
    gap: var(--sf-space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sf-space-2);
    -webkit-overflow-scrolling: touch;
  }
  .poster-strip__grid::-webkit-scrollbar { height: 4px; }
  .poster-strip__grid::-webkit-scrollbar-thumb {
    background: var(--sf-border-strong);
    border-radius: var(--sf-radius-full);
  }
  .poster-card {
    flex: 0 0 auto;
    width: min(72vw, 280px);
    scroll-snap-align: start;
  }
  /* 窄屏同样不裁切，只是取景框整体缩小（contain 继承自基础规则） */
  .poster-card__frame img { max-height: 320px; }
}

/* 海报 lightbox 尺寸：海报 PC 款宽 1920，社交分享预览缩略图也清晰 */
.lightbox__box img {
  max-width: min(92vw, 1280px);
}

/* ==========================================================================
   17 · 滚动进场（仅区块级容器）
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(12px); }
.js-on .reveal {
  transition: opacity var(--sf-dur-slower) var(--sf-ease-out),
              transform var(--sf-dur-slower) var(--sf-ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js-on) .reveal { opacity: 1; transform: none; }

/* ---- 方向化进场（仅双栏成立的宽度启用，窄屏回落为默认的上浮）------------ */
@media (min-width: 1024px) {
  .reveal.reveal--left  { transform: translate3d(-22px, 0, 0); }
  .reveal.reveal--right { transform: translate3d(22px, 0, 0); }
  .reveal.reveal--left.is-in,
  .reveal.reveal--right.is-in { transform: none; }
}

/* ---- 群组 stagger：容器本身不动，子元素依次浮现 ------------------------
   必须写在方向化之后 —— 同特异度靠源码顺序覆盖掉容器上的位移。 */
.reveal.reveal--stagger { opacity: 1; transform: none; }
.reveal--stagger > * { opacity: 0; transform: translate3d(0, 18px, 0); }
.js-on .reveal--stagger > * {
  transition: opacity var(--sf-dur-slower) var(--sf-ease-out),
              transform var(--sf-dur-slower) var(--sf-ease-out);
}
.reveal--stagger > *:nth-child(2) { transition-delay: 110ms; }
.reveal--stagger > *:nth-child(3) { transition-delay: 220ms; }
.reveal--stagger.is-in > * { opacity: 1; transform: none; }
html:not(.js-on) .reveal--stagger > * { opacity: 1; transform: none; }

@media (min-width: 1024px) {
  /* 右栏群组：从右下方依次浮入，与左栏文字的左滑形成对向开合 */
  .reveal--stagger.reveal--right > * { transform: translate3d(20px, 14px, 0); }
  .reveal--stagger.reveal--right.is-in > * { transform: none; }
}

/* ==========================================================================
   18 · RESPONSIVE —— 平板 ≥768
   ========================================================================== */
@media (min-width: 768px) {
  .trustbar { grid-template-columns: repeat(3, 1fr); gap: var(--sf-space-6); }
  .pitchgrid { grid-template-columns: repeat(2, 1fr); }
  .fgrid { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(3, 1fr); }
  .thanks { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--sf-space-8); }

  .plate { padding: clamp(40px, 6vw, 72px); border-radius: var(--sf-radius-3xl); }
  .plate::before { background: radial-gradient(60% 50% at 50% 20%, rgba(53, 201, 181, .16) 0%, transparent 70%); }
  .phone { width: 280px; }

  .feat { padding: var(--sf-space-10); }
  .survey__frame iframe { min-height: 820px; }

  .hero__actions { flex-direction: row; justify-content: center; align-items: flex-start; }
  .endcta__actions { gap: var(--sf-space-5); }
}

/* ==========================================================================
   19 · RESPONSIVE —— 桌面 ≥1024
   ========================================================================== */
@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
  .navdrawer { display: none !important; }

  .pitchgrid { grid-template-columns: repeat(3, 1fr); }
  .fgrid { grid-template-columns: repeat(3, 1fr); }

  .plate__inner { grid-template-columns: 1fr 340px; gap: clamp(40px, 5vw, 72px); }
  .phone { width: 320px; }

  .crossdev__inner { grid-template-columns: 1fr 1.05fr; gap: clamp(48px, 6vw, 88px); }
  .crossdev__list { gap: var(--sf-space-5); }

  .feat__grid { grid-template-columns: 1fr 300px; gap: var(--sf-space-12); }
  .feat--reverse .feat__grid { grid-template-columns: 300px 1fr; }
  .feat--reverse .feat__media { order: -1; }

  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ==========================================================================
   20 · RESPONSIVE —— 小手机 <480
   ========================================================================== */
@media (max-width: 479px) {
  .pitch, .feat, .duo__card, .thanks__card, .spec, .tl__card { padding: var(--sf-space-5); }
  .btn, .btn-cta { height: 48px; padding-inline: 18px; font-size: var(--sf-text-sm); }
  .btn-cta { gap: var(--sf-space-2); }
  .hero__row .btn, .hero__row .btn-cta { width: 100%; }
  .cta-block { align-items: stretch; width: 100%; }
  .btn-cta { justify-content: center; }
  .cta-micro { text-align: center; }
  .spec table { min-width: 320px; }
}

/* ==========================================================================
   21 · REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .reveal--stagger > * { opacity: 1 !important; transform: none !important; }
  /* v2 新增动效的双保险：JS 侧同样会跳过视差；此处兜住 CSS 侧 */
  .hero::before { transform: none !important; }
  .cta-shine { display: none !important; }
  /* v3 新增：postershow 切 slide 立即生效、poster-card 不浮起 */
  .postershow__slide { transition: none !important; }
  .postershow__tab,
  .postershow__subdot,
  .poster-card { transition: none !important; }
  .poster-card:hover { transform: none !important; }
}

/* ==========================================================================
   22 · PRINT（轻量兜底）
   ========================================================================== */
@media print {
  .nav, .navdrawer, .lightbox, .cta-tip, .cta-shine { display: none !important; }
  .reveal, .reveal--stagger > * { opacity: 1 !important; transform: none !important; }
  .hero::before { transform: none !important; }
}

/* ==========================================================================
   23 · CONTACT（联系开发者卡片）
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-card {
  background: var(--sf-bg);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--sf-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.contact-card__icon {
  width: 32px;
  height: 32px;
  color: var(--color-teal-600);
  flex-shrink: 0;
}
.contact-card__name {
  font-weight: 600;
  font-size: var(--sf-text-sm);
  color: var(--sf-fg-heading);
  line-height: 1.3;
}
.contact-card__handle {
  font-size: var(--sf-text-xs);
  color: var(--color-gray-500);
  font-family: var(--sf-font-mono);
  margin-top: 2px;
}
.contact-card__qrcode {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}
.contact-card__qrcode img {
  border-radius: var(--sf-radius-md);
  border: 1px solid var(--color-gray-200);
  max-width: 200px;
  height: auto;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.contact-card__note {
  font-size: var(--sf-text-xs);
  color: var(--color-gray-500);
  line-height: 1.5;
  margin: 0;
}

/* 邮箱卡片（无二维码） */
.contact-card--text {
  justify-content: center;
  min-height: 180px;
}