/* ============================================================
   PyPackager 官网 · 仪器台（Instrument Bench）视觉系统
   冷灰纸底 + 白面卡片 + 1px 细线分层 + 石板灰蓝强调
   原则：静态层零阴影、3–5px 小圆角、单一线性图标语言
   动效：CSS 与原生 JS 协作（main.js 保持不变）
   ============================================================ */

/* ========== 0. 设计令牌 ========== */
:root {
    color-scheme: light;

    /* 画布与表面 */
    --bg: #edeff1;
    --bg-alt: #edeff1;
    --card: #ffffff;
    --card-hover: #ffffff;
    --card-subtle: #f4f6f8;
    --veil: rgba(237, 239, 241, 0.96);
    --veil-soft: rgba(237, 239, 241, 0.92);

    /* 反色区块（石墨仪表盘） */
    --ink-bg: #22272c;
    --ink-bg-soft: #2a3036;
    --ink-border: #3b434b;
    --ink-text: #f0f2f4;
    --ink-text-soft: #b9c1c8;
    --ink-text-faint: #929ba4;

    /* 文字 */
    --text: #23282d;
    --text-soft: #5b646d;
    --text-faint: #7c858f;

    /* 石板灰蓝强调 */
    --accent: #5c7387;
    --accent-2: #5c7387;
    --accent-deep: #465a6b;
    --accent-soft: rgba(92, 115, 135, 0.12);
    --accent-softer: rgba(92, 115, 135, 0.07);
    --accent-ring: rgba(70, 90, 107, 0.28);
    --accent-ink: #ffffff;

    --amber: #5c7387;
    --amber-hover: #4b6072;
    --amber-deep: #465a6b;
    --amber-soft: rgba(92, 115, 135, 0.12);
    --amber-ring: rgba(70, 90, 107, 0.28);

    /* 语义色 */
    --success: #4f7a55;
    --success-soft: rgba(79, 122, 85, 0.1);
    --danger: #a8453a;
    --danger-soft: rgba(168, 69, 58, 0.09);

    /* 边框分层 */
    --border: #dde2e7;
    --border-strong: #c6ced6;
    --hairline: #e7ebef;

    /* 终端 / 代码（恒定石墨底） */
    --term-bg: #15191d;
    --term-border: #2d3339;
    --term-text: #d7dce1;
    --term-green: #93b3a0;
    --term-prompt: #8fa6b8;
    --code-bg: #15191d;
    --c-kw: #8fa6b8;
    --c-flag: #c3ccd4;
    --c-str: #9db8ab;
    --c-com: #727b84;

    /* 静态层零阴影 */
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
    --shadow-4: none;
    --shadow-accent: none;
    --shadow-amber: none;
    --ring-focus: 0 0 0 2px rgba(237, 239, 241, 1), 0 0 0 4px rgba(70, 90, 107, 0.3);

    /* 间距 */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
    --sp-9: 56px; --sp-10: 72px; --sp-11: 96px; --sp-12: 120px;

    /* 圆角：仪器面板小圆角 */
    --r-sm: 3px;
    --r-md: 4px;
    --r-lg: 5px;
    --r-xl: 5px;
    --r-full: 4px;

    /* ---------- 动效令牌（全站唯一来源，组件不得写死数值） ---------- */

    /* 时长：快（反馈）/ 常规（状态切换）/ 慢（大块进出） */
    --dur-fast: 0.16s;
    --dur-base: 0.26s;
    --dur-slow: 0.42s;

    /* 时长：场景级 */
    --dur-reveal: 0.7s;   /* 滚动揭示 */
    --dur-hero: 0.86s;    /* 首屏分层进场 */
    --dur-ambient: 40s;   /* 背景极慢漂移（>10s，不可察觉） */
    --dur-marquee: 46s;   /* 亮点滚动条 */
    --dur-pulse: 2.4s;    /* 状态点呼吸 */
    --dur-caret: 0.85s;   /* 终端光标闪烁 */
    --dur-hint: 2.2s;     /* 首屏滚动提示 */

    /* 缓动：进场（收尾长）/ 离场（起步快）/ 悬停（克制对称） */
    --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --ease-hover: cubic-bezier(0.33, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* 位移距离：微交互 2px / 细节 4px / 揭示 12px / 大面积 20px */
    --dist-xs: 2px;
    --dist-sm: 4px;
    --dist-md: 12px;
    --dist-lg: 20px;

    /* 错峰步进：滚动分组 70ms（60–100ms 区间）/ 首屏 80ms */
    --stagger: 70ms;
    --stagger-hero: 80ms;

    /* 字体 */
    --font-sans: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Noto Sans SC', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace;

    /* 结构 */
    --nav-h: 68px;
    --max-w: 1240px;
}

/* ========== 深色主题（石墨夜台） ========== */
[data-theme="dark"] {
    color-scheme: dark;

    --bg: #171a1d;
    --bg-alt: #171a1d;
    --card: #1d2125;
    --card-hover: #21262b;
    --card-subtle: #22272b;
    --veil: rgba(23, 26, 29, 0.96);
    --veil-soft: rgba(23, 26, 29, 0.92);

    --ink-bg: #101316;
    --ink-bg-soft: #181c20;
    --ink-border: #2c3239;
    --ink-text: #edeff1;
    --ink-text-soft: #b4bcc3;
    --ink-text-faint: #8a939b;

    --text: #edeff1;
    --text-soft: #a9b2ba;
    --text-faint: #828b94;

    --accent: #8fa6b8;
    --accent-2: #8fa6b8;
    --accent-deep: #a7bdcd;
    --accent-soft: rgba(143, 166, 184, 0.14);
    --accent-softer: rgba(143, 166, 184, 0.07);
    --accent-ring: rgba(167, 189, 205, 0.3);
    --accent-ink: #14171a;

    --amber: #8fa6b8;
    --amber-hover: #a3b9c9;
    --amber-deep: #a7bdcd;
    --amber-soft: rgba(143, 166, 184, 0.14);
    --amber-ring: rgba(167, 189, 205, 0.3);

    --success: #93b3a0;
    --success-soft: rgba(147, 179, 160, 0.1);
    --danger: #d08579;
    --danger-soft: rgba(208, 133, 121, 0.1);

    --border: #2c3237;
    --border-strong: #3c444b;
    --hairline: #24292e;

    --term-bg: #0d1012;
    --term-border: #262c32;
    --code-bg: #0d1012;

    --ring-focus: 0 0 0 2px rgba(23, 26, 29, 1), 0 0 0 4px rgba(167, 189, 205, 0.38);
}

/* ========== 主题过渡（仅主题切换期间） ========== */
.theme-fade,
.theme-fade * {
    transition: background-color var(--dur-slow) var(--ease-enter), border-color var(--dur-slow) var(--ease-enter),
                color var(--dur-slow) var(--ease-enter), fill var(--dur-slow) var(--ease-enter),
                stroke var(--dur-slow) var(--ease-enter) !important;
}

/* ========== 1. 重置与基础 ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
    background-color: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.modal-open, body.nav-lock { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
strong { color: var(--text); font-weight: 600; }

code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    background: var(--accent-softer);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 1px 6px;
    color: var(--accent-deep);
}

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

:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
    border-radius: var(--r-sm);
    transition: box-shadow var(--dur-fast) var(--ease-hover);
}

/* 中性滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
    background-color: #b9c1cc;
}
::-webkit-scrollbar-thumb:hover { background-color: #97a1af; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #3a414c; }
@supports (scrollbar-color: red blue) {
    html { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
}

/* ========== 2. 背景层（首屏写实插画 + 中性纱层） ========== */
.bg-photo {
    position: fixed;
    inset: 0;
    z-index: -3;
    background: url('../assets/bg-hero-web.jpg') 60% 30% / cover no-repeat;
    opacity: 1;
    filter: saturate(0.96) contrast(1.04) brightness(0.98);
    -webkit-mask-image: linear-gradient(90deg, transparent 32%, rgba(0, 0, 0, 0.14) 46%, #000 62%);
    mask-image: linear-gradient(90deg, transparent 32%, rgba(0, 0, 0, 0.14) 46%, #000 62%);
    will-change: transform;
    animation: bg-drift var(--dur-ambient) var(--ease-in-out) infinite alternate;
}

/* 极慢呼吸式漂移：仅 transform，幅度 2%–5.5%，40s 往返，肉眼近乎静止 */
@keyframes bg-drift {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.055) translate3d(-0.6%, -0.5%, 0); }
}

/* 中性冷灰纱层：左侧加强保障标题可读，右侧收薄让人物成为焦点 */
.bg-veil {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg,
            rgba(237, 239, 241, 0.24) 0%,
            rgba(237, 239, 241, 0.38) 50%,
            rgba(237, 239, 241, 0.56) 100%),
        linear-gradient(100deg,
            rgba(237, 239, 241, 0.86) 0%,
            rgba(237, 239, 241, 0.55) 45%,
            rgba(237, 239, 241, 0.1) 78%,
            rgba(237, 239, 241, 0.22) 100%);
}

[data-theme="dark"] .bg-photo {
    filter: saturate(0.85) contrast(1.05) brightness(0.8);
}

[data-theme="dark"] .bg-veil {
    background:
        linear-gradient(180deg,
            rgba(23, 26, 29, 0.4) 0%,
            rgba(23, 26, 29, 0.58) 50%,
            rgba(23, 26, 29, 0.86) 100%),
        linear-gradient(100deg,
            rgba(23, 26, 29, 0.94) 0%,
            rgba(23, 26, 29, 0.84) 38%,
            rgba(23, 26, 29, 0.42) 78%,
            rgba(23, 26, 29, 0.58) 100%);
}

/* 旧版流星装饰层：保留 DOM 钩子，视觉停用 */
.meteor-layer { display: none; }

/* ========== 3. 顶部滚动进度 ========== */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    height: 2px;
    width: calc(var(--scroll, 0) * 100%);
    background: var(--amber);
    pointer-events: none;
}

/* ========== 4. 容器与区块 ========== */
.container {
    width: min(var(--max-w), 100% - 56px);
    margin-inline: auto;
}

.section { padding-block: clamp(88px, 10vw, 152px); position: relative; background: var(--bg); }
.section-alt { background: var(--bg); }

.section-ink {
    background: var(--ink-bg);
    color: var(--ink-text);
    border-block: 1px solid var(--ink-border);
}

.section-head {
    max-width: 720px;
    margin: 0 auto var(--sp-9);
    text-align: center;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin-bottom: var(--sp-4);
}
.section-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--amber);
    flex: none;
}
.section-ink .section-tag { color: var(--amber); }

.section-title {
    font-family: var(--font-display);
    font-size: clamp(30px, 4.4vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.028em;
    color: var(--text);
    text-wrap: balance;
}
.section-ink .section-title { color: var(--ink-text); }

.section-desc {
    margin-top: var(--sp-4);
    font-size: 16px;
    color: var(--text-soft);
    line-height: 1.75;
}
.section-ink .section-desc { color: var(--ink-text-soft); }

/* 标题强调：纯色深琥珀，取消渐变文字 */
.text-gradient {
    color: var(--accent-deep);
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
}

/* ========== 5. 按钮 ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1;
    padding: 12px 22px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition: background-color var(--dur-fast) var(--ease-hover),
                border-color var(--dur-fast) var(--ease-hover),
                color var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-hover),
                box-shadow var(--dur-fast) var(--ease-hover);
    white-space: nowrap;
}

.btn-primary {
    background: var(--amber);
    color: var(--accent-ink);
    border-color: var(--amber);
}
.btn-primary:hover {
    background: var(--amber-hover);
    border-color: var(--amber-hover);
    transform: translateY(calc(-1 * var(--dist-xs)));
}

.btn-amber {
    background: var(--amber);
    color: var(--accent-ink);
    border-color: var(--amber);
}
.btn-amber:hover {
    background: var(--amber-hover);
    border-color: var(--amber-hover);
    transform: translateY(calc(-1 * var(--dist-xs)));
}

.btn-ghost {
    background: var(--card);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-ghost:hover {
    border-color: var(--accent-deep);
    color: var(--accent-deep);
    transform: translateY(calc(-1 * var(--dist-xs)));
}

/* 按下：明确下沉 2px，快反馈、不回弹放大 */
.btn-primary:active,
.btn-amber:active,
.btn-ghost:active {
    transform: translateY(var(--dist-xs));
    transition-duration: var(--dur-fast);
    transition-timing-function: var(--ease-exit);
}

.btn-lg { padding: 15px 28px; font-size: 15.5px; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }

.btn-ghost svg:last-child,
.btn-amber svg:last-child { transition: transform var(--dur-base) var(--ease-enter); }
.btn-ghost:hover svg:last-child,
.btn-amber:hover svg:last-child { transform: translateX(var(--dist-xs)); }

/* ========== 6. 导航栏 ========== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color var(--dur-base) var(--ease-hover),
                border-color var(--dur-base) var(--ease-hover),
                transform var(--dur-base) var(--ease-hover);
}

.site-header.nav-hidden { transform: translateY(-100%); }

.site-header.scrolled {
    background: var(--bg);
    border-bottom-color: var(--border);
}

.nav-inner {
    width: min(var(--max-w), 100% - 56px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
}

.brand { display: inline-flex; align-items: center; gap: 10px; }

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--r-md);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-ink);
    background: var(--amber);
    letter-spacing: -0.03em;
}

.brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-link {
    position: relative;
    display: inline-block;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-soft);
    border-radius: var(--r-sm);
    transition: color var(--dur-fast) var(--ease-hover),
                background-color var(--dur-fast) var(--ease-hover),
                box-shadow var(--dur-fast) var(--ease-hover);
}
.nav-link:hover { color: var(--text); background: var(--card); }

.nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: var(--amber);
    transform: translateX(-50%) scaleX(0);
    transform-origin: 50% 50%;
    transition: transform var(--dur-base) var(--ease-enter);
}
.nav-link.active { color: var(--accent-deep); font-weight: 600; }
.nav-link.active::after { transform: translateX(-50%) scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-soft);
    transition: color var(--dur-fast) var(--ease-hover),
                border-color var(--dur-fast) var(--ease-hover),
                background-color var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-exit),
                box-shadow var(--dur-fast) var(--ease-hover);
}
.icon-btn:hover { color: var(--accent-deep); border-color: var(--border-strong); }
.icon-btn:active { transform: translateY(var(--dist-xs)); }

[data-theme="light"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--card);
    transition: border-color var(--dur-fast) var(--ease-hover),
                background-color var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-exit),
                box-shadow var(--dur-fast) var(--ease-hover);
}
.nav-toggle:active { transform: translateY(var(--dist-xs)); }
.nav-toggle span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: var(--text);
    transition: transform var(--dur-base) var(--ease-enter), opacity var(--dur-base);
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ========== 7. Hero ========== */
.hero {
    position: relative;
    padding-top: calc(var(--nav-h) + var(--sp-11));
    padding-bottom: var(--sp-11);
    overflow: hidden;
}

/* 仪器标尺网格 */
.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.5;
    -webkit-mask-image: radial-gradient(72% 60% at 50% 34%, #000 12%, transparent 100%);
    mask-image: radial-gradient(72% 60% at 50% 34%, #000 12%, transparent 100%);
    pointer-events: none;
}

/* 首屏底部琥珀暖底，与背景插画过渡 */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 58%, rgba(92, 115, 135, 0.06) 100%);
    pointer-events: none;
}

/* 旧极光层停用，仅保留 DOM */
.hero-glow { display: none; }

.hero-inner {
    position: relative;
    z-index: 2;
    width: min(var(--max-w), 100% - 56px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(44px, 6vw, 84px);
}

/* 首屏进入：文案分五层错峰（80ms 步进），仅 transform/opacity */
.js .hero-copy > * { animation: hero-rise var(--dur-hero) var(--ease-enter) backwards; }
.js .hero-badge   { animation-delay: 0s; }
.js .hero-title   { animation-delay: calc(var(--stagger-hero) * 1); }
.js .hero-desc    { animation-delay: calc(var(--stagger-hero) * 2); }
.js .hero-actions { animation-delay: calc(var(--stagger-hero) * 3); }
.js .hero-stats   { animation-delay: calc(var(--stagger-hero) * 4); }

@keyframes hero-rise {
    from { opacity: 0; transform: translate3d(0, var(--dist-lg), 0); }
    to   { opacity: 1; transform: none; }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-deep);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 6px 12px;
    margin-bottom: var(--sp-5);
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--amber);
    animation: dot-pulse var(--dur-pulse) var(--ease-in-out) infinite;
}
@keyframes dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.9vw, 70px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.035em;
    margin-bottom: var(--sp-5);
}

.hero-desc {
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.75;
    color: var(--text-soft);
    max-width: 46ch;
    margin-bottom: var(--sp-7);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-9);
}

.hero-stats {
    display: flex;
    gap: clamp(28px, 4vw, 56px);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}

.stat-label {
    font-size: 12.5px;
    color: var(--text-faint);
    order: 2;
    margin-top: 2px;
}
.stat-value {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    order: 1;
    font-variant-numeric: tabular-nums;
}
.stat-suffix { font-size: 13px; font-weight: 500; color: var(--text-faint); }

/* 终端面板：仪器显示屏 */
.hero-visual {
    position: relative;
    transform: translateY(clamp(24px, 6vh, 68px));
}

.terminal {
    position: relative;
    border-radius: var(--r-lg);
    border: 1px solid var(--term-border);
    background: var(--term-bg);
    overflow: hidden;
}

.js .terminal { animation: hero-pop var(--dur-hero) var(--ease-enter) calc(var(--stagger-hero) * 3) backwards; }

@keyframes hero-pop {
    from { opacity: 0; transform: translate3d(0, var(--dist-lg), 0); }
    to   { opacity: 1; transform: none; }
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--term-border);
}
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-dot.red { background: #c9615a; }
.terminal-dot.yellow { background: #d6a84c; }
.terminal-dot.green { background: #6fa57c; }
.terminal-title {
    margin-left: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: #8a94a1;
}

.terminal-body {
    padding: 20px 22px 24px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.9;
    color: var(--term-text);
    min-height: 330px;
}

.t-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prompt { color: var(--term-prompt); font-weight: 700; margin-right: 8px; }
.t-out { color: #97a3b3; padding-left: 18px; }
.t-ok { color: var(--term-green); }

.t-caret {
    display: inline-block;
    width: 8px;
    height: 15px;
    margin-left: 3px;
    vertical-align: -2px;
    background: var(--term-prompt);
    animation: caret-blink var(--dur-caret) steps(2, start) infinite;
}
@keyframes caret-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.progress {
    display: inline-block;
    width: 168px;
    max-width: 60%;
    height: 6px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    vertical-align: middle;
}
.progress-fill {
    display: block;
    height: 100%;
    border-radius: 1px;
    background: var(--amber);
    transition: width 1.1s var(--ease-enter);
}
.progress-text { margin-left: 10px; color: var(--amber); font-size: 12px; }

/* ========== 8. 亮点滚动条 ========== */
.strip {
    background: var(--card);
    color: var(--text-soft);
    border-block: 1px solid var(--border);
    overflow: hidden;
    padding-block: 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.strip-track {
    display: flex;
    gap: 40px;
    width: max-content;
    animation: strip-scroll var(--dur-marquee) linear infinite;
}
.strip:hover .strip-track { animation-play-state: paused; }

@keyframes strip-scroll {
    to { transform: translateX(-50%); }
}

.strip-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-soft);
    white-space: nowrap;
}
.strip-item svg { color: var(--accent-deep); flex: none; }

/* ========== 9. Bento 功能网格 ========== */
.bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
}

.bento-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-7);
    transition: border-color var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-hover),
                background-color var(--dur-fast) var(--ease-hover);
}
.bento-card:hover {
    border-color: var(--border-strong);
    transform: translateY(calc(-1 * var(--dist-xs)));
}

.bento-card.wide { grid-column: span 2; }
.bento-card.full { grid-column: 1 / -1; }

.bento-card.full {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-6);
}
.bento-card.full .feature-icon { margin-bottom: 0; }

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    color: var(--accent-deep);
    background: var(--accent-softer);
    border: 1px solid var(--border);
    margin-bottom: var(--sp-5);
    transition: border-color var(--dur-fast) var(--ease-hover),
                background-color var(--dur-fast) var(--ease-hover);
}
.bento-card:hover .feature-icon {
    border-color: var(--accent-ring);
    background: var(--accent-soft);
}

.bento-card h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-3);
}

.bento-card > p { color: var(--text-soft); font-size: 14.5px; margin-bottom: var(--sp-4); }
.bento-card .bento-card-body p { color: var(--text-soft); font-size: 14.5px; }

.feature-list { display: grid; gap: 7px; }
.feature-list li {
    position: relative;
    padding-left: 16px;
    font-size: 13.5px;
    color: var(--text-faint);
}
.feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--amber);
}

.feature-list-inline {
    grid-template-columns: repeat(3, auto);
    gap: var(--sp-3) var(--sp-6);
    justify-content: end;
}

/* ========== 10. 工作流程 ========== */
.workflow {
    position: relative;
    max-width: 760px;
    margin-inline: auto;
    display: grid;
    gap: var(--sp-5);
    padding-left: 0;
}

.workflow-step {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
}

.step-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--amber);
    background: transparent;
    border: 1px solid var(--ink-border);
    position: relative;
    z-index: 1;
    transition: border-color var(--dur-fast) var(--ease-hover),
                color var(--dur-fast) var(--ease-hover),
                background-color var(--dur-fast) var(--ease-hover);
}
.workflow-step:hover .step-node {
    border-color: var(--amber);
    color: var(--accent-ink);
    background: var(--amber);
}

.step-body {
    background: var(--ink-bg-soft);
    border: 1px solid var(--ink-border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    transition: border-color var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-hover);
}
.step-body:hover { border-color: #3c434e; transform: translateY(calc(-1 * var(--dist-xs))); }

.step-body h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-text);
    margin-bottom: 6px;
}
.step-body p { font-size: 14px; color: var(--ink-text-soft); }

.step-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }
.step-tags span {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 9px;
    border-radius: var(--r-sm);
    color: var(--ink-text-soft);
    border: 1px solid var(--ink-border);
    background: transparent;
}

/* ========== 11. 技术架构 ========== */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
    margin-bottom: var(--sp-9);
}

.tech-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    transition: border-color var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-hover);
}
.tech-card:hover { border-color: var(--border-strong); transform: translateY(calc(-1 * var(--dist-xs))); }

.tech-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-deep);
    background: var(--accent-softer);
    border: 1px solid var(--border);
    margin-bottom: var(--sp-4);
}

.tech-card h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.tech-card p { font-size: 13.5px; color: var(--text-soft); }

.tech-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--sp-7);
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-7);
}

.tech-code {
    border-radius: var(--r-md);
    border: 1px solid var(--term-border);
    background: var(--code-bg);
    overflow: hidden;
}

.code-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--term-border);
}
.code-dot { width: 9px; height: 9px; border-radius: 50%; }
.code-dot.red { background: #c9615a; }
.code-dot.yellow { background: #d6a84c; }
.code-dot.green { background: #6fa57c; }
.code-title {
    margin-left: 8px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: #8a94a1;
}

.code-body {
    padding: 18px 20px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--term-text);
    white-space: normal;
    counter-reset: cline;
}

.cl {
    display: block;
    position: relative;
    padding-left: 44px;
    counter-increment: cline;
    white-space: pre;
}
.cl::before {
    content: counter(cline, decimal-leading-zero);
    position: absolute;
    left: 0;
    width: 26px;
    text-align: right;
    color: #4b5563;
    user-select: none;
    -webkit-user-select: none;
}
.c-kw { color: var(--c-kw); }
.c-flag { color: var(--c-flag); }
.c-str { color: var(--c-str); }
.c-com { color: var(--c-com); }

.tech-info h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: var(--sp-3); letter-spacing: -0.01em; }
.tech-info > p { color: var(--text-soft); font-size: 14.5px; margin-bottom: var(--sp-5); }

.check-list { display: grid; gap: 10px; }
.check-list li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    color: var(--text-soft);
}
.check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 15px;
    height: 15px;
    border-radius: var(--r-sm);
    background: var(--accent-softer) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c7387' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px no-repeat;
    border: 1px solid var(--border);
}
[data-theme="dark"] .check-list li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7bdcd' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ========== 12. 效率对比 ========== */
.compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
}

.compare-col {
    position: relative;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--card);
    padding: var(--sp-7);
    transition: border-color var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-hover);
}
.compare-col:hover { border-color: var(--border-strong); transform: translateY(calc(-1 * var(--dist-xs))); }

.compare-col.is-bad { border-top: 2px solid var(--border-strong); }
.compare-col.is-good { border-top: 2px solid var(--amber); border-color: var(--border-strong); }

.compare-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--border);
}
.compare-head h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; }

.compare-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 700;
    flex: none;
}
.is-bad .compare-mark { color: var(--danger); background: var(--danger-soft); }
.is-good .compare-mark { color: var(--accent-ink); background: var(--amber); }

.compare-list { display: grid; gap: var(--sp-4); }
.compare-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-soft); }
.compare-list svg { flex: none; margin-top: 4px; }
.is-bad .compare-list svg { color: var(--danger); }
.is-good .compare-list svg { color: var(--accent-deep); }

/* ========== 13. 支持框架 ========== */
.frameworks { display: grid; gap: var(--sp-7); max-width: 860px; margin-inline: auto; }

.framework-group h3 {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: var(--sp-4);
}

.framework-tags { display: flex; flex-wrap: wrap; gap: 10px; }

.framework-tags span {
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 7px 13px;
    border-radius: var(--r-sm);
    color: var(--text-soft);
    background: var(--card);
    border: 1px solid var(--border);
    transition: color var(--dur-fast) var(--ease-hover),
                border-color var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-hover);
}
.framework-tags span:hover {
    color: var(--accent-deep);
    border-color: var(--accent-ring);
    transform: translateY(calc(-1 * var(--dist-xs)));
}

/* ========== 14. 卡密购买 ========== */
.section-purchase { padding-block: clamp(72px, 8vw, 120px); }

.purchase-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-7);
    background: var(--ink-bg-soft);
    border: 1px solid var(--ink-border);
    border-radius: var(--r-lg);
    padding: clamp(28px, 4vw, 52px);
    overflow: hidden;
}

.purchase-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-text);
    background: transparent;
    border: 1px solid var(--ink-border);
    border-radius: var(--r-sm);
    padding: 5px 12px;
    margin-bottom: var(--sp-5);
}
.purchase-badge svg { color: var(--amber); }

.purchase-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.6vw, 36px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink-text);
    margin-bottom: var(--sp-4);
}

.purchase-desc {
    font-size: 15px;
    color: var(--ink-text-soft);
    max-width: 560px;
    margin-bottom: var(--sp-5);
}

.purchase-features { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--sp-7); }

.purchase-feature {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--ink-text);
    background: transparent;
    border: 1px solid var(--ink-border);
    border-radius: var(--r-sm);
    padding: 5px 12px;
}
.purchase-feature svg { color: var(--amber); }

.purchase-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    border: 1px dashed var(--ink-border);
    color: var(--ink-text-soft);
    position: relative;
}
.purchase-visual svg { opacity: 0.9; color: var(--amber); }
.purchase-visual::after {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 1px solid var(--ink-border);
}

/* 激活三步 */
.activate {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
    margin-top: var(--sp-8);
}

.activate-step {
    background: var(--ink-bg-soft);
    border: 1px solid var(--ink-border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    transition: border-color var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-hover);
}
.activate-step:hover { border-color: #3c434e; transform: translateY(calc(-1 * var(--dist-xs))); }

.activate-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-ink);
    background: var(--amber);
    margin-bottom: var(--sp-4);
}

.activate-step h4 { font-size: 15.5px; font-weight: 600; color: var(--ink-text); margin-bottom: 6px; }
.activate-step p { font-size: 13.5px; color: var(--ink-text-soft); }

/* ========== 15. 下载 ========== */
.download-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-8);
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    padding: clamp(28px, 4vw, 56px);
    position: relative;
    overflow: hidden;
}

.download-content > h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-3);
}
.download-content > p { color: var(--text-soft); margin-bottom: var(--sp-6); }

.download-actions { margin-bottom: var(--sp-6); }

.download-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
    margin-bottom: var(--sp-5);
}
.download-meta > div { display: flex; align-items: baseline; gap: 8px; }
.download-meta dt { font-size: 12px; color: var(--text-faint); }
.download-meta dd { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text); }

.download-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-faint);
}
.download-note svg { flex: none; margin-top: 3px; color: var(--success); }

.download-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    flex: none;
}

.app-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: var(--r-lg);
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 700;
    color: var(--accent-ink);
    background: var(--amber);
}

.app-orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed var(--border-strong);
}

/* ========== 16. 页脚 ========== */
.footer {
    position: relative;
    background: var(--ink-bg);
    color: var(--ink-text);
    border-top: 1px solid var(--ink-border);
    padding-top: var(--sp-10);
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
    gap: var(--sp-9);
    padding-bottom: var(--sp-9);
}

.footer-brand p {
    margin-top: var(--sp-4);
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--ink-text-soft);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-6);
}

.footer-col h4 {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-text-faint);
    margin-bottom: var(--sp-4);
}

.footer-col a {
    display: inline-block;
    font-size: 14px;
    color: var(--ink-text-soft);
    padding-block: 5px;
    transition: color var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-hover);
}
.footer-col a:hover { color: var(--ink-text); transform: translateX(var(--dist-xs)); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-block: var(--sp-5);
    border-top: 1px solid var(--ink-border);
    font-size: 13px;
    color: var(--ink-text-faint);
}

.footer-stats { display: flex; align-items: center; gap: var(--sp-3); }
.footer-stats b { font-family: var(--font-mono); color: var(--ink-text); font-weight: 600; }
.stats-dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 1px;
    background: currentColor;
    margin-left: 10px;
    vertical-align: middle;
    opacity: 0.5;
}

/* ========== 17. 模态框 ========== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-hover), visibility var(--dur-base);
}
.modal.open { visibility: visible; opacity: 1; }

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(23, 26, 29, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal-dialog {
    position: relative;
    width: min(760px, 100%);
    max-height: min(84vh, 860px);
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    transform: translateY(var(--dist-md));
    transition: transform var(--dur-base) var(--ease-enter);
    overflow: hidden;
}
.modal.open .modal-dialog { transform: translateY(0); }

.modal-dialog-sm { width: min(430px, 100%); }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--border);
    flex: none;
}
.modal-header h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; }

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--text-faint);
    transition: color var(--dur-fast) var(--ease-hover),
                background-color var(--dur-fast) var(--ease-hover),
                border-color var(--dur-fast) var(--ease-hover),
                box-shadow var(--dur-fast) var(--ease-hover);
}
.modal-close:hover { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }

.modal-body { padding: var(--sp-6); overflow-y: auto; }

/* 文档 / FAQ / 更新日志正文 */
.docs-body h4 {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--accent-deep);
    margin: var(--sp-6) 0 var(--sp-3);
    scroll-margin-top: var(--sp-6);
}
.docs-body h4:first-child { margin-top: 0; }
.docs-body p, .docs-body li { font-size: 14px; color: var(--text-soft); }
.docs-body ol, .docs-body ul { display: grid; gap: 8px; padding-left: 20px; }
.docs-body ol { list-style: decimal; }
.docs-body ul { list-style: disc; }
.docs-body li::marker { color: var(--accent-deep); font-weight: 600; }

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    transition: border-color var(--dur-fast) var(--ease-hover);
}
.faq-item:hover { border-color: var(--border-strong); }
.faq-item h4 { color: var(--text); font-size: 14.5px; margin: 0 0 8px; }
.faq-item p { font-size: 13.5px; }

.changelog-version {
    border-left: 2px solid var(--border-strong);
    padding-left: var(--sp-5);
    margin-bottom: var(--sp-6);
}
.changelog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--sp-3);
}
.version-tag {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent-deep);
    background: var(--accent-softer);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 2px 8px;
}
.version-date { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.changelog-version h4 { font-size: 13.5px; color: var(--text); margin: var(--sp-3) 0 6px; }
.changelog-version ul { list-style: none; padding-left: 0; display: grid; gap: 5px; }
.changelog-version ul li {
    position: relative;
    padding-left: 16px;
    font-size: 13.5px;
    color: var(--text-soft);
}
.changelog-version ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--amber);
}
.changelog-note { font-size: 13px; color: var(--text-faint); text-align: center; padding-top: var(--sp-3); }

/* 购买选择弹窗 */
.purchase-choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }

.purchase-choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--card-subtle);
    transition: border-color var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-hover);
}
.purchase-choice-card:hover {
    border-color: var(--accent-ring);
    transform: translateY(calc(-1 * var(--dist-xs)));
}

.purchase-choice-icon { color: var(--accent-deep); margin-bottom: 4px; }
.purchase-choice-title { font-weight: 600; font-size: 15px; }
.purchase-choice-desc { font-size: 12.5px; color: var(--text-faint); }

.purchase-qr-panel { text-align: center; }

/* JS 切换面板依赖的隐藏钩子 */
.hidden { display: none !important; }

.purchase-qr {
    width: 220px;
    height: auto;
    max-height: 269px;
    object-fit: contain;
    margin: 0 auto var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    padding: 8px;
    background: #fff;
}

.wechat-hint { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.wechat-sub { font-size: 12.5px; color: var(--text-faint); margin-bottom: var(--sp-5); }

.purchase-back-btn {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-soft);
    padding: 8px 20px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-strong);
    transition: color var(--dur-fast) var(--ease-hover),
                border-color var(--dur-fast) var(--ease-hover),
                box-shadow var(--dur-fast) var(--ease-hover);
}
.purchase-back-btn:hover { color: var(--accent-deep); border-color: var(--accent-ring); }
.purchase-back-btn:active { transform: translateY(var(--dist-xs)); }

/* 社群弹窗 */
.community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(16px, 2.6vw, 22px);
    align-items: stretch;
}

.community-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-4);
    background: var(--card-subtle);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.community-qr-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(200px, 36vh, 320px);
    background: #fff;
    border-radius: var(--r-sm);
    overflow: hidden;
}

.community-qr {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.community-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.community-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.community-desc {
    font-size: 12.5px;
    color: var(--text-faint);
    line-height: 1.6;
}

/* 图片懒加载淡入（弹窗打开时触发） */
.modal.open .modal-body img {
    animation: img-fade var(--dur-slow) var(--ease-enter) both;
}
@keyframes img-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========== 18. 返回顶部 ========== */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    background: var(--card);
    border: 1px solid var(--border-strong);
    color: var(--text-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--dist-sm));
    transition: opacity var(--dur-base) var(--ease-hover),
                visibility var(--dur-base),
                transform var(--dur-base) var(--ease-enter),
                color var(--dur-fast) var(--ease-hover),
                border-color var(--dur-fast) var(--ease-hover);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { color: var(--accent-deep); border-color: var(--accent-ring); }
.back-to-top:active { transform: translateY(var(--dist-xs)); }

.btt-ring {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    transform: rotate(-90deg);
    color: var(--amber);
    pointer-events: none;
}
.btt-track { opacity: 0.25; }
.btt-progress { stroke-dashoffset: calc(100 - var(--scroll, 0) * 100); }
.btt-arrow { position: relative; transition: transform var(--dur-fast) var(--ease-hover); }
.back-to-top:hover .btt-arrow { transform: translateY(calc(-1 * var(--dist-xs))); }

/* ========== 19. 滚动揭示（animation 驱动：延迟只作用于揭示，不干扰 hover 过渡） ========== */
.js [data-reveal] { opacity: 0; }

.js [data-reveal].revealed {
    animation-duration: var(--dur-reveal);
    animation-timing-function: var(--ease-enter);
    animation-delay: var(--rv-delay, 0s);
    animation-fill-mode: both;
    animation-name: rv-up;
}

.js [data-reveal="fade"].revealed  { animation-name: rv-fade; }
.js [data-reveal="left"].revealed  { animation-name: rv-left; }
.js [data-reveal="right"].revealed { animation-name: rv-right; }
.js [data-reveal="scale"].revealed { animation-name: rv-scale; }

@keyframes rv-up {
    from { opacity: 0; translate: 0 var(--dist-lg); }
    to   { opacity: 1; translate: 0 0; }
}
@keyframes rv-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes rv-left {
    from { opacity: 0; translate: calc(-1 * var(--dist-md)) 0; }
    to   { opacity: 1; translate: 0 0; }
}
@keyframes rv-right {
    from { opacity: 0; translate: var(--dist-md) 0; }
    to   { opacity: 1; translate: 0 0; }
}
@keyframes rv-scale {
    from { opacity: 0; scale: 0.97; translate: 0 var(--dist-sm); }
    to   { opacity: 1; scale: 1; translate: 0 0; }
}

/* 错峰：70ms 步进，落在 60–100ms 区间 */
[data-reveal-delay="1"] { --rv-delay: calc(var(--stagger) * 1); }
[data-reveal-delay="2"] { --rv-delay: calc(var(--stagger) * 2); }
[data-reveal-delay="3"] { --rv-delay: calc(var(--stagger) * 3); }

/* 同组卡片未显式标注延迟时的兜底节奏 */
.bento > [data-reveal]:nth-child(2):not([data-reveal-delay]),
.tech-grid > [data-reveal]:nth-child(2):not([data-reveal-delay]),
.workflow > [data-reveal]:nth-child(2):not([data-reveal-delay]),
.activate > [data-reveal]:nth-child(2):not([data-reveal-delay]),
.frameworks > [data-reveal]:nth-child(2):not([data-reveal-delay]) { --rv-delay: calc(var(--stagger) * 1); }

.bento > [data-reveal]:nth-child(3):not([data-reveal-delay]),
.tech-grid > [data-reveal]:nth-child(3):not([data-reveal-delay]),
.workflow > [data-reveal]:nth-child(3):not([data-reveal-delay]),
.activate > [data-reveal]:nth-child(3):not([data-reveal-delay]),
.frameworks > [data-reveal]:nth-child(3):not([data-reveal-delay]) { --rv-delay: calc(var(--stagger) * 2); }

.bento > [data-reveal]:nth-child(4):not([data-reveal-delay]),
.tech-grid > [data-reveal]:nth-child(4):not([data-reveal-delay]) { --rv-delay: calc(var(--stagger) * 3); }

.bento > [data-reveal]:nth-child(5):not([data-reveal-delay]) { --rv-delay: calc(var(--stagger) * 4); }
.bento > [data-reveal]:nth-child(6):not([data-reveal-delay]) { --rv-delay: calc(var(--stagger) * 5); }

/* 无 JS 兜底：内容始终可见 */
.no-js [data-reveal] { opacity: 1; translate: 0 0; scale: 1; }

/* 终端行入场（JS 驱动） */
.js .terminal-body .t-line { opacity: 0; transform: translateX(calc(-1 * var(--dist-sm))); }
.terminal-body .t-line.on {
    opacity: 1;
    transform: translateX(0);
    transition: opacity var(--dur-base) var(--ease-enter),
                transform var(--dur-base) var(--ease-enter);
}

/* ========== 20. 响应式 ========== */

/* ≤1024px：平板紧凑 */
@media (max-width: 1024px) {
    .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-inner { grid-template-columns: 1fr; gap: var(--sp-7); }
    .hero-inner { gap: 40px; }
}

/* ≤880px：Hero 单栏、Bento 两列 */
@media (max-width: 880px) {
    .section { padding-block: clamp(64px, 9vw, 96px); }

    /* 窄屏构图：锁定人物所在区域，纱层加强但保留少量色相 */
    .bg-photo {
        background-position: 72% 22%;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .bg-veil {
        background:
            linear-gradient(180deg,
                rgba(237, 239, 241, 0.5) 0%,
                rgba(237, 239, 241, 0.64) 52%,
                rgba(237, 239, 241, 0.87) 100%),
            linear-gradient(90deg,
                rgba(237, 239, 241, 0.84) 0%,
                rgba(237, 239, 241, 0.6) 100%);
    }
    [data-theme="dark"] .bg-veil {
        background:
            linear-gradient(180deg,
                rgba(23, 26, 29, 0.64) 0%,
                rgba(23, 26, 29, 0.76) 52%,
                rgba(23, 26, 29, 0.9) 100%),
            linear-gradient(90deg,
                rgba(23, 26, 29, 0.9) 0%,
                rgba(23, 26, 29, 0.72) 100%);
    }

    .hero { padding-top: calc(var(--nav-h) + var(--sp-9)); padding-bottom: var(--sp-9); }
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { max-width: 560px; margin-inline: auto; width: 100%; transform: none; }
    .terminal-body { min-height: 0; }

    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento-card.wide { grid-column: 1 / -1; }
    .bento-card.full { grid-template-columns: auto minmax(0, 1fr); }
    .feature-list-inline { grid-column: 1 / -1; grid-template-columns: repeat(3, auto); justify-content: start; }

    .tech-detail { grid-template-columns: 1fr; gap: var(--sp-6); }
    .download-card { grid-template-columns: 1fr; text-align: left; }
    .download-visual { display: none; }

    .purchase-card { grid-template-columns: 1fr; }
    .purchase-visual { display: none; }
}

/* ≤880px：导航折叠（与首屏单列断点对齐）、关键区块单列 */
@media (max-width: 880px) {
    :root { --nav-h: 62px; }

    .nav-toggle { display: flex; }
    .nav-actions .btn { display: none; }

    .nav-links {
        position: absolute;
        top: var(--nav-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 12px 20px 18px;
        background: var(--card);
        border-bottom: 1px solid var(--border);
        transform: translateY(calc(-1 * var(--dist-sm)));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--dur-base) var(--ease-enter), opacity var(--dur-base), visibility var(--dur-base);
    }
    .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
    .nav-link { padding: 12px 14px; border-radius: var(--r-md); font-size: 15px; }
    .nav-link::after { display: none; }
    .nav-link.active { background: var(--accent-softer); }

    .compare { grid-template-columns: 1fr; }
    .activate { grid-template-columns: 1fr; }
    .frameworks { gap: var(--sp-6); }
    .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-bottom { justify-content: center; text-align: center; }

    .section-head { margin-bottom: var(--sp-8); }
    .hero-stats { gap: var(--sp-6); }
    .stat-value { font-size: 27px; }
}

/* ≤480px：小屏单列 */
@media (max-width: 480px) {
    .container, .nav-inner, .hero-inner { width: min(var(--max-w), 100% - 32px); }

    .section { padding-block: clamp(56px, 10vw, 80px); }
    .section-head { margin-bottom: var(--sp-7); }

    .hero-actions .btn { flex: 1 1 100%; }
    .hero-stats { flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); }

    .bento { grid-template-columns: 1fr; }
    .bento-card.full { grid-template-columns: 1fr; }
    .feature-list-inline { grid-template-columns: 1fr; }

    .tech-grid { grid-template-columns: 1fr; }
    .workflow-step { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
    .step-node { width: 48px; height: 48px; border-radius: var(--r-md); }

    .community-grid { grid-template-columns: 1fr; }
    .community-qr-frame { height: clamp(220px, 52vw, 340px); }
    .purchase-choice { grid-template-columns: 1fr; }

    .download-meta { gap: var(--sp-2) var(--sp-5); }
    .terminal-body { font-size: 11.5px; padding: 16px 16px 20px; }
    .terminal-title { font-size: 11px; }
    .progress { width: 104px; }

    .back-to-top { right: 16px; bottom: 16px; }
}

/* ========== 21. 减弱动效：关闭动画后内容立即完整可见 ========== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    /* 首屏：取消分层进场，直接呈现最终状态 */
    .js .hero-copy > *,
    .js .terminal { animation: none; }

    /* 背景漂移关闭，固定构图 */
    .bg-photo { animation: none !important; transform: none !important; }

    /* 滚动揭示：不再等待动画 */
    .js [data-reveal],
    .js [data-reveal].revealed {
        opacity: 1 !important;
        animation: none !important;
        translate: 0 0;
        scale: 1;
    }

    .terminal-body .t-line { opacity: 1; transform: none; }

    .strip-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
    .badge-dot { animation: none; }
    .t-caret { animation: none; }
    .hero-scroll::after { animation: none; opacity: 0.4; transform: scaleY(1); }
}