/* ============================================================
   小熊猫成本测算 - 官网样式 v2.0 (Premium Edition)
   设计理念：科技感 × 品牌辨识度 × 沉浸体验
   ============================================================ */

/* ===== CSS变量系统 ===== */
:root {
    /* 品牌色 */
    --brand-primary: #4A90D9;
    --brand-primary-light: #6BB3F0;
    --brand-primary-dark: #2E6DB5;
    --brand-accent: #F5A623;
    --brand-accent-light: #F7C948;
    --brand-success: #2ECC71;
    --brand-danger: #E74C3C;
    --brand-purple: #9B59B6;
    --brand-teal: #1ABC9C;

    /* 中性色 */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7fb;
    --bg-card: #ffffff;
    --text-primary: #1a1a2e;
    --text-secondary: #556080;
    --text-muted: #8a92a8;
    --border-color: rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 40px rgba(74, 144, 217, 0.15);

    /* Hero渐变 */
    --hero-from: #0a0e27;
    --hero-mid: #1a1655;
    --hero-to: #241b55;

    /* 圆角 */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    /* 过渡 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== 基础重置 ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}
/* 跳过导航链接 */
.skip-link {
    position: absolute; top: -100px; left: 16px;
    background: var(--brand-primary); color: #fff;
    padding: 10px 20px; border-radius: 0 0 8px 8px;
    font-size: 14px; font-weight: 600; z-index: 9999;
    transition: top 0.3s ease;
}
.skip-link:focus { top: 0; }

body {
    font-family: -apple-system, "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
    color: var(--text-primary);
    line-height: 1.65;
    background: linear-gradient(180deg, #f7f9fd 0%, #f3f6fb 100%);
    background-attachment: scroll;
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; }
.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 28px;
}

.defer-render {
    content-visibility: visible;
    contain-intrinsic-size: auto;
}

/* ===== 选择文字样式 ===== */
::selection {
    background: rgba(74, 144, 217, 0.25);
    color: var(--text-primary);
}

/* ============================================================
   导航栏 - Apple 风格浮动胶囊玻璃态
   ============================================================ */
.navbar {
    position: fixed;
    top: 34px;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    /* 仅过渡 padding，避免 all 触发不必要的属性动画 */
    transition: padding 0.3s var(--ease-out);
    border-bottom: none;
    /* 浮动偏移：顶部和左右留白，营造悬浮胶囊效果 */
    padding: 0 28px;
    /* GPU 合成提示，降低滚动时的重绘开销 */
    will-change: padding;
}
.navbar.scrolled {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
/* 导航布局壳 —— 自身透明，只负责把中间菜单悬浮在 Hero 上 */
.nav-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    transition: background 0.28s var(--ease-out),
                border-color 0.28s var(--ease-out),
                box-shadow 0.28s var(--ease-out);
    will-change: background, box-shadow, border-color;
}
/* 滚动后：布局壳继续透明，避免读成整条标题栏 */
.navbar.scrolled .nav-container {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* ============================================================
   深色背景页面（如 download.html）—— 始终保持深色玻璃导航
   覆盖 scrolled 浅色态，确保深色背景上导航可读
   ============================================================ */
body.dark-page .navbar.scrolled .nav-container,
body.dark .navbar.scrolled .nav-container {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
body.dark-page .navbar.scrolled .nav-logo,
body.dark .navbar.scrolled .nav-logo { color: #fff; }
body.dark-page .navbar.scrolled .nav-links a,
body.dark .navbar.scrolled .nav-links a {
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: none;
}
body.dark-page .navbar.scrolled .nav-links a:hover,
body.dark .navbar.scrolled .nav-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
body.dark-page .navbar.scrolled .nav-links a.active,
body.dark .navbar.scrolled .nav-links a.active {
    color: #fff;
    background: rgba(74, 144, 217, 0.22);
    border: 1px solid rgba(74, 144, 217, 0.35);
    box-shadow: 0 0 12px rgba(74, 144, 217, 0.1);
}
body.dark-page .navbar.scrolled .nav-toggle,
body.dark .navbar.scrolled .nav-toggle {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}
body.dark-page .navbar.scrolled .nav-toggle span,
body.dark .navbar.scrolled .nav-toggle span { background: #fff; }
.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    transition: color 0.28s ease;
}
.nav-logo span {
    display: none !important;
}
.navbar.scrolled .nav-logo {
    color: var(--text-primary);
}
.nav-logo img {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    transition: transform 0.35s var(--ease-spring);
}
.nav-logo:hover img {
    transform: rotate(-8deg) scale(1.08);
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    justify-content: center;
    min-height: 44px;
    margin: 0 12px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(7, 14, 30, 0.34);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(147, 212, 255, 0.13);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background 0.28s var(--ease-out),
                border-color 0.28s var(--ease-out),
                box-shadow 0.28s var(--ease-out);
}
.navbar.scrolled .nav-links,
body.dark-page .navbar.scrolled .nav-links,
body.dark .navbar.scrolled .nav-links {
    background: rgba(7, 14, 30, 0.34);
    border-color: rgba(147, 212, 255, 0.13);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* 药丸按钮式导航链接 —— 只有 active 才带框 */
.nav-links a {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
    padding: 6px 15px;
    border-radius: 999px;
    background: transparent;
    border: none;
    transition: color 0.2s ease,
                background 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
    position: relative;
    letter-spacing: 0.2px;
    text-decoration: none;
    white-space: nowrap;
}
.nav-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.navbar.scrolled .nav-links a {
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: none;
}
.navbar.scrolled .nav-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
/* 活跃状态 — 蓝色药丸 */
.nav-links a.active {
    color: #fff;
    background: rgba(74, 144, 217, 0.22);
    border-color: rgba(74, 144, 217, 0.35);
    box-shadow: 0 0 12px rgba(74, 144, 217, 0.1);
}
.navbar.scrolled .nav-links a.active {
    color: #fff;
    background: rgba(74, 144, 217, 0.22);
    border-color: rgba(74, 144, 217, 0.35);
    font-weight: 600;
}

.member-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 30px;
    min-width: 82px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.88);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.member-nav-button:hover,
.member-nav-button:focus-visible {
    color: #fff;
    background: rgba(74, 144, 217, 0.22);
    border-color: rgba(107, 179, 240, 0.45);
    outline: none;
}
.member-nav-button.is-login {
    background: rgba(46, 204, 113, 0.16);
    border-color: rgba(46, 204, 113, 0.36);
}
.member-nav-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-accent-light);
    box-shadow: 0 0 10px rgba(247, 201, 72, 0.55);
    flex: 0 0 7px;
}
.member-nav-button.is-login .member-nav-dot {
    background: var(--brand-success);
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.55);
}
.navbar.scrolled .member-nav-button {
    color: var(--text-secondary);
    background: rgba(74, 144, 217, 0.07);
    border-color: rgba(74, 144, 217, 0.16);
}
.navbar.scrolled .member-nav-button:hover,
.navbar.scrolled .member-nav-button:focus-visible {
    color: var(--brand-primary);
    background: rgba(74, 144, 217, 0.12);
}
body.dark .navbar.scrolled .member-nav-button,
body.dark-page .navbar.scrolled .member-nav-button {
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
}
body.dark .navbar.scrolled .member-nav-button:hover,
body.dark-page .navbar.scrolled .member-nav-button:hover {
    color: #fff;
    background: rgba(74, 144, 217, 0.22);
    border-color: rgba(107, 179, 240, 0.45);
}

.member-modal-open {
    overflow: hidden;
}
.member-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.member-modal.active {
    display: flex;
}
.member-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 28, 0.62);
    backdrop-filter: blur(10px);
}
.member-panel {
    position: relative;
    width: min(480px, 100%);
    max-height: min(720px, calc(100vh - 48px));
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}
body.dark .member-panel,
body.dark-page .member-panel {
    background: rgba(22, 28, 48, 0.92);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.14);
}
.member-panel__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    color: var(--text-secondary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
body.dark .member-panel__close,
body.dark-page .member-panel__close {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.82);
    border-color: rgba(255, 255, 255, 0.14);
}
.member-panel__header {
    padding: 30px 32px 20px;
}
.member-panel__eyebrow {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(74, 144, 217, 0.12);
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 700;
}
.member-panel__header h2 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.25;
}
.member-panel__header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}
body.dark .member-panel__header p,
body.dark-page .member-panel__header p {
    color: rgba(255, 255, 255, 0.66);
}
.member-panel__body {
    padding: 0 32px 32px;
}
.member-login-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(74, 144, 217, 0.08);
}
.member-login-tabs button {
    min-height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.member-login-tabs button.active {
    color: var(--brand-primary);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
body.dark .member-login-tabs,
body.dark-page .member-login-tabs {
    background: rgba(255, 255, 255, 0.08);
}
body.dark .member-login-tabs button,
body.dark-page .member-login-tabs button {
    color: rgba(255, 255, 255, 0.7);
}
body.dark .member-login-tabs button.active,
body.dark-page .member-login-tabs button.active {
    color: #fff;
    background: rgba(74, 144, 217, 0.32);
}
.member-login-form {
    display: grid;
    gap: 14px;
}
.member-login-form label {
    display: grid;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}
.member-login-form input {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(74, 144, 217, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--text-primary);
    font: inherit;
    outline: none;
}
.member-login-form input:focus {
    border-color: rgba(74, 144, 217, 0.55);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.12);
}
.member-login-form select {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(74, 144, 217, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--text-primary);
    font: inherit;
    outline: none;
}
.member-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px;
    gap: 10px;
    align-items: center;
}
.member-code-button {
    min-height: 42px;
    padding: 0 12px;
    font-size: 13px;
}
.member-registration-box {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(74, 144, 217, 0.14);
    border-radius: 13px;
    background: rgba(74, 144, 217, 0.07);
}
.member-registration-title {
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 800;
}
.member-registration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
body.dark .member-login-form label,
body.dark-page .member-login-form label {
    color: rgba(255, 255, 255, 0.72);
}
body.dark .member-login-form input,
body.dark-page .member-login-form input,
body.dark .member-login-form select,
body.dark-page .member-login-form select {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.16);
}
.member-primary,
.member-secondary {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.member-primary {
    border: 0;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-teal));
    color: #fff;
    box-shadow: 0 12px 28px rgba(74, 144, 217, 0.25);
}
.member-primary:disabled {
    opacity: 0.65;
    cursor: wait;
}
.member-secondary {
    border: 1px solid rgba(74, 144, 217, 0.22);
    background: transparent;
    color: var(--brand-primary);
}
.member-secondary:disabled {
    opacity: 0.58;
    cursor: wait;
}
.member-login-note {
    margin: 14px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.7;
}
.member-message {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(245, 166, 35, 0.12);
    color: #9a650c;
    font-size: 13px;
    line-height: 1.6;
}
body.dark .member-message,
body.dark-page .member-message {
    color: #ffd98a;
    background: rgba(245, 166, 35, 0.13);
}
.member-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(74, 144, 217, 0.08);
    margin-bottom: 14px;
}
.member-avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    color: #fff;
    font-weight: 900;
    flex: 0 0 52px;
}
.member-profile-phone {
    font-size: 18px;
    font-weight: 800;
}
.member-profile-meta {
    color: var(--text-muted);
    font-size: 13px;
}
.member-level-card {
    margin-bottom: 14px;
    padding: 15px;
    border: 1px solid rgba(245, 166, 35, 0.22);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(245, 166, 35, 0.14), rgba(74, 144, 217, 0.08)),
        rgba(255, 255, 255, 0.6);
}
.member-level-card__top,
.member-level-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.member-level-card__top span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}
.member-level-card__top b {
    color: #9a650c;
    font-size: 22px;
    line-height: 1;
}
.member-level-progress {
    position: relative;
    height: 8px;
    margin: 13px 0 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(16, 28, 62, 0.1);
}
.member-level-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-accent), var(--brand-success));
}
.member-level-card__foot {
    color: var(--text-muted);
    font-size: 12px;
}
.member-benefit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.member-benefit-grid div {
    padding: 14px;
    border: 1px solid rgba(74, 144, 217, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.58);
}
.member-benefit-grid b,
.member-benefit-grid span {
    display: block;
}
.member-benefit-grid b {
    margin-bottom: 5px;
    font-size: 13px;
}
.member-benefit-grid span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}
body.dark .member-profile-card,
body.dark-page .member-profile-card,
body.dark .member-benefit-grid div,
body.dark-page .member-benefit-grid div,
body.dark .member-level-card,
body.dark-page .member-level-card,
body.dark .member-registration-box,
body.dark-page .member-registration-box {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}
body.dark .member-level-card__top b,
body.dark-page .member-level-card__top b {
    color: #ffd98a;
}
.member-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}
/* 移动端菜单按钮 */
.nav-toggle {
    display: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    cursor: pointer;
    padding: 8px 9px;
    transition: all 0.3s ease;
}
.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    margin: 4px 0;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}
.navbar.scrolled .nav-toggle {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.06);
}
.navbar.scrolled .nav-toggle span {
    background: var(--text-primary);
}
/* 汉堡动画 - 打开态 */
.nav-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}
.nav-toggle.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* ============================================================
   Hero 区域 - 沉浸式升级
   ============================================================ */
.hero {
    position: relative;
    min-height: 88vh;
    min-height: 88svh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    overflow: hidden;
    padding: 112px 112px 92px;
    isolation: isolate;
    background: #030813;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 44% 48% at 8% 36%, rgba(41, 183, 255, 0.1) 0%, transparent 68%),
        repeating-linear-gradient(90deg, rgba(72, 160, 255, 0.055) 0 1px, transparent 1px 96px);
    opacity: 0.62;
}
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(90deg, rgba(2, 7, 18, 0.98) 0%, rgba(3, 10, 24, 0.88) 36%, rgba(4, 12, 28, 0.38) 68%, rgba(2, 7, 18, 0.16) 100%),
        linear-gradient(180deg, rgba(2, 6, 16, 0.1) 0%, rgba(2, 6, 16, 0.78) 100%),
        image-set(
            url('../images/web/hero-construction-cost-ai-v2.webp') type('image/webp'),
            url('../images/web/hero-construction-cost-ai-v2.png') type('image/png')
        );
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 74% 58% at 50% 118%, rgba(74, 144, 217, 0.2) 0%, transparent 70%),
        radial-gradient(ellipse 52% 38% at 78% 18%, rgba(245, 166, 35, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 62% 52% at 5% 50%, rgba(3, 8, 20, 0.44) 0%, transparent 64%);
}
/* 暗色模式：Hero 保留轻量环境光，由统一长画布承接主背景 */
body.dark .auto-cost-section {
    background: transparent !important;
}
body.dark .auto-cost-section::before,
body.dark .auto-cost-section::after {
    display: none;
}
/* 动态光斑 */
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 50%, rgba(74, 144, 217, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(245, 166, 35, 0.08) 0%, transparent 50%);
    animation: auroraShift 12s ease-in-out infinite alternate;
}
@keyframes auroraShift {
    0%   { transform: translateX(0) translateY(0); }
    33%  { transform: translateX(20px) translateY(-15px); }
    66%  { transform: translateX(-15px) translateY(10px); }
    100% { transform: translateX(10px) translateY(-5px); }
}
/* 网格背景 */
.hero-bg .grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(74, 164, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 164, 255, 0.045) 1px, transparent 1px);
    background-size: 86px 86px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.94), rgba(0,0,0,0.62) 46%, transparent 84%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.94), rgba(0,0,0,0.62) 46%, transparent 84%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin-top: 56px;
    margin-left: 12%;
}
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: rgba(145, 222, 255, 0.92);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}
.hero-kicker span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid rgba(111, 211, 255, 0.28);
    background: linear-gradient(90deg, rgba(35, 153, 222, 0.16), rgba(244, 173, 61, 0.08));
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    box-shadow: inset 0 0 18px rgba(51, 190, 255, 0.08);
}
.hero-logo {
    display: block;
    width: 64px;
    height: 64px;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 22px;
    animation: heroFloat 4s ease-in-out infinite;
    filter:
        drop-shadow(0 10px 34px rgba(74, 174, 255, 0.42))
        drop-shadow(0 2px 10px rgba(244, 173, 61, 0.16));
}
@keyframes heroFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(2deg); }
}
/* 标题渐变文字 */
.hero h1 {
    position: relative;
    font-size: 78px;
    font-weight: 900;
    margin-bottom: 20px;
    letter-spacing: 0;
    line-height: 0.98;
    background: linear-gradient(135deg, #ffffff 0%, rgba(233, 248, 255, 0.96) 40%, #7edaff 72%, #f7bd62 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}
.hero-title-panda {
    position: absolute;
    z-index: 3;
    left: clamp(112px, 22%, 150px);
    top: -118px;
    width: clamp(206px, 18vw, 258px);
    height: auto;
    overflow: visible;
    pointer-events: none;
    filter:
        drop-shadow(0 16px 24px rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 18px rgba(126, 218, 255, 0.12));
}
.hero-deepseek-badge {
    display: inline-block;
    vertical-align: middle;
    width: 42px;
    height: 42px;
    margin-left: 14px;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    top: -8px;
}
.hero-deepseek-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.hero-deepseek-badge:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 18px rgba(100, 180, 255, 0.3);
}
.hero-subtitle {
    max-width: 580px;
    font-size: 22px;
    font-weight: 650;
    color: rgba(228, 244, 255, 0.9);
    margin-bottom: 14px;
    letter-spacing: 0;
    line-height: 1.55;
    text-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
}
.hero-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.88);
    margin-top: 18px;
    margin-bottom: 0;
    line-height: 1.8;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 600;
    letter-spacing: 0.25px;
    /* 玻璃特效框 */
    padding: 14px 28px;
    border-radius: 16px;
    background: rgba(28, 28, 38, 0.45);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.hero-manifesto {
    margin: 0;
    margin-top: 20px;
    max-width: 520px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 18px;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-wrap: balance;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    margin-left: auto;
    margin-right: auto;
}
/* 统计数字区域 */
.hero-stats {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 34px;
}
.stat-item {
    text-align: left;
    position: relative;
    min-width: 148px;
    padding: 14px 16px 13px;
    border: 1px solid rgba(119, 219, 255, 0.22);
    border-left-color: rgba(244, 173, 61, 0.5);
    background:
        linear-gradient(90deg, rgba(34, 149, 218, 0.16), rgba(5, 14, 30, 0.32)),
        rgba(4, 12, 28, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 14px 30px rgba(0, 0, 0, 0.18);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.stat-item:not(:last-child)::after {
    display: none;
}
.stat-num {
    display: block;
    font-size: 34px;
    font-weight: 900;
    color: #fff;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: nowrap;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.stat-num .stat-suffix {
    font-size: 0.72em;
    font-weight: 700;
    color: #f4c84f;
    margin-left: 3px;
}
.stat-label {
    font-size: 11px;
    color: rgba(205, 232, 245, 0.72);
    margin-top: 8px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

/* ===== 工程驾驶舱首屏 ===== */
.hero.hero-control-room {
    min-height: 100vh;
    justify-content: stretch;
    text-align: left;
    padding: 118px 38px 86px;
    background: #102417;
}
.hero-control-room .hero-bg::before {
    background:
        radial-gradient(ellipse 60% 42% at 75% 55%, rgba(245, 166, 35, 0.18) 0%, transparent 68%),
        radial-gradient(ellipse 62% 56% at 20% 42%, rgba(46, 204, 113, 0.18) 0%, transparent 66%),
        radial-gradient(ellipse 50% 45% at 48% 18%, rgba(74, 144, 217, 0.1) 0%, transparent 62%),
        linear-gradient(135deg, #10291b 0%, #172116 45%, #211a12 100%);
}
.hero-control-room .hero-bg::after {
    background:
        linear-gradient(115deg, rgba(255,255,255,0.04), transparent 35% 65%, rgba(46,204,113,0.05)),
        radial-gradient(circle at 72% 24%, rgba(245, 166, 35, 0.12) 0%, transparent 38%);
    animation: auroraShift 14s ease-in-out infinite alternate;
}
.hero-control-room .hero-bg .grid-overlay {
    background-image:
        linear-gradient(rgba(46, 204, 113, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 144, 217, 0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: 0.76;
}
.auto-cost-section {
    position: relative;
    overflow: hidden;
    padding: 64px 38px 112px;
    margin-top: -1px;
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(74, 144, 217, 0.18) 0%, transparent 68%),
        radial-gradient(ellipse 64% 42% at 78% 22%, rgba(245, 166, 35, 0.08) 0%, transparent 56%),
        radial-gradient(ellipse 54% 50% at 16% 58%, rgba(155, 89, 182, 0.09) 0%, transparent 58%);
}
.auto-cost-section.reveal,
.auto-cost-section .reveal {
    opacity: 1;
    transform: none;
}
body.dark .auto-cost-section {
    background: transparent;
}
.auto-cost-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(74, 144, 217, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 144, 217, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 1;
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.72) 12%, black 24%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.72) 12%, black 24%);
    pointer-events: none;
}
.auto-cost-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(36, 27, 85, 0.62) 0%, rgba(36, 27, 85, 0) 22%),
        radial-gradient(circle at 28% 52%, rgba(74, 144, 217, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 72% 30%, rgba(245, 166, 35, 0.07) 0%, transparent 50%),
        linear-gradient(180deg, rgba(10, 14, 39, 0) 0%, rgba(10, 14, 39, 0.22) 100%);
    pointer-events: none;
}
.auto-cost-prism-bg {
    position: absolute;
    inset: -6% 36% -10% 4%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.58;
    mix-blend-mode: screen;
    filter: saturate(1.28) contrast(1.05);
    mask-image: radial-gradient(ellipse 42% 44% at 38% 43%, #000 0%, rgba(0, 0, 0, 0.88) 42%, transparent 84%);
    -webkit-mask-image: radial-gradient(ellipse 42% 44% at 38% 43%, #000 0%, rgba(0, 0, 0, 0.88) 42%, transparent 84%);
}
.auto-cost-prism-bg::before {
    content: "";
    position: absolute;
    inset: 24% 40% 30% 8%;
    border-radius: 38%;
    background:
        radial-gradient(ellipse at 58% 38%, rgba(73, 216, 242, 0.28), transparent 44%),
        radial-gradient(ellipse at 38% 62%, rgba(245, 166, 35, 0.16), transparent 48%),
        radial-gradient(ellipse at 70% 70%, rgba(85, 229, 139, 0.18), transparent 52%);
    filter: blur(14px);
    opacity: 0.12;
}
.auto-cost-prism-bg::after {
    content: "";
    position: absolute;
    inset: 16% 40% 30% 18%;
    background:
        linear-gradient(114deg, transparent 0 36%, rgba(73, 216, 242, 0.24) 38%, transparent 42%),
        linear-gradient(72deg, transparent 0 48%, rgba(245, 166, 35, 0.18) 50%, transparent 54%),
        linear-gradient(148deg, transparent 0 58%, rgba(85, 229, 139, 0.16) 60%, transparent 64%),
        conic-gradient(from 218deg at 56% 48%,
            transparent 0deg,
            rgba(73, 216, 242, 0.18) 26deg,
            rgba(245, 166, 35, 0.14) 48deg,
            transparent 82deg,
            rgba(85, 229, 139, 0.12) 112deg,
            transparent 148deg);
    clip-path: polygon(20% 56%, 52% 20%, 80% 52%, 54% 82%);
    opacity: 0.42;
    filter: blur(0.4px);
}
.auto-cost-prism-bg canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.auto-cost-prism-bg.is-prism-fallback {
    opacity: 0.24;
}
.auto-cost-prism-bg.is-prism-fallback canvas {
    display: none;
}
.auto-cost-section .control-hero-shell {
    position: relative;
    z-index: 2;
}
.auto-cost-section .control-title {
    margin: 26px 0 18px;
    color: #f5fff8;
    font-size: 62px;
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}
.auto-cost-section .control-title strong {
    display: inline-block;
    color: transparent;
    background: linear-gradient(90deg, #55e58b 0%, #f1d15b 55%, #49d8f2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.control-hero-shell {
    position: relative;
    z-index: 1;
    width: min(1160px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(520px, 1.08fr);
    gap: 48px;
    align-items: center;
}
.control-copy {
    max-width: 520px;
}
.control-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid rgba(46, 204, 113, 0.45);
    background: rgba(46, 204, 113, 0.12);
    color: #c8ffdb;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 16px 36px rgba(46, 204, 113, 0.08);
}
.control-badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 18px rgba(46, 204, 113, 0.9);
}
.hero-control-room .control-title {
    margin: 26px 0 18px;
    color: #f5fff8;
    font-size: 74px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0;
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}
.control-title strong {
    display: inline-block;
    color: transparent;
    background: linear-gradient(90deg, #55e58b 0%, #f1d15b 55%, #49d8f2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.control-desc {
    max-width: 560px;
    margin: 0;
    color: rgba(236, 248, 240, 0.78);
    font-size: 18px;
    line-height: 2;
    font-weight: 650;
    letter-spacing: 0;
}
.control-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}
.control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #f5fff8;
    font-size: 14px;
    font-weight: 900;
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.control-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.36);
}
.control-btn-primary {
    color: #06170e;
    background: linear-gradient(135deg, #35e387, #20c96f);
    border-color: rgba(53, 227, 135, 0.7);
    box-shadow: 0 20px 38px rgba(46, 204, 113, 0.18);
}
.control-btn-primary:hover {
    background: linear-gradient(135deg, #63f0a4, #2bd77c);
}
.control-dashboard {
    position: relative;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(29, 31, 58, 0.68);
    box-shadow: 0 28px 74px rgba(6, 8, 26, 0.38);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.control-window-bar {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: -16px -16px 16px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}
.control-window-dots {
    display: flex;
    gap: 8px;
}
.control-window-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.control-window-dots span:nth-child(1) { background: #ff6b6b; }
.control-window-dots span:nth-child(2) { background: #ffd15a; }
.control-window-dots span:nth-child(3) { background: #42e889; }
.control-window-title {
    color: rgba(245, 255, 248, 0.82);
    font-size: 13px;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.control-mascot {
    width: 58px;
    height: auto;
    margin-top: 0;
    opacity: 0.82;
    filter: drop-shadow(0 14px 24px rgba(0,0,0,0.22));
    animation: mascotFloat 4.6s ease-in-out infinite;
}
.control-dashboard-body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.95fr);
    gap: 16px;
}
.control-sheet,
.control-log {
    border-radius: 8px;
    background: rgba(8, 11, 28, 0.68);
    overflow: hidden;
}
.control-sheet {
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.control-sheet-row {
    display: grid;
    grid-template-columns: 52px minmax(120px, 1fr) 74px 86px;
    min-height: 38px;
    color: rgba(248, 255, 249, 0.86);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 13px;
}
.control-sheet-row:last-child { border-bottom: 0; }
.control-sheet-row span {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid rgba(255,255,255,0.07);
}
.control-sheet-row span:last-child { border-right: 0; }
.control-sheet-head {
    min-height: 38px;
    background: rgba(33, 91, 89, 0.7);
    color: #f4fff8;
    font-weight: 900;
}
.control-sheet-row.is-active {
    position: relative;
    background: rgba(46, 204, 113, 0.18);
    color: #f6fff9;
    font-weight: 800;
}
.control-sheet-row.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #42e889;
}
.control-ai-panel {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 12px;
    min-width: 0;
}
.control-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.control-metric {
    min-height: 88px;
    padding: 13px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.09);
}
.control-metric span {
    display: block;
    color: rgba(245, 255, 248, 0.72);
    font-size: 12px;
    font-weight: 850;
}
.control-metric strong {
    display: block;
    margin-top: 7px;
    color: #42e889;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0;
}
.control-metric strong.is-amber { color: #ffd15a; }
.control-metric strong.is-cyan { color: #49d8f2; }
.control-metric strong.is-rose { color: #ff6b9d; }
.control-log {
    display: grid;
    align-content: center;
    gap: 14px;
    min-height: 150px;
    padding: 18px;
}
.control-log div {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 11px;
    align-items: center;
    color: rgba(245, 255, 248, 0.83);
    font-size: 13px;
    font-weight: 750;
}
.control-log i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #42e889;
    box-shadow: 0 0 16px rgba(66, 232, 137, 0.82);
}
.control-log div:nth-child(2) i { background: #49d8f2; box-shadow: 0 0 16px rgba(73, 216, 242, 0.72); }
.control-log div:nth-child(3) i { background: #ffd15a; box-shadow: 0 0 16px rgba(255, 209, 90, 0.72); }
.control-log div:nth-child(4) i { background: #ff6b9d; box-shadow: 0 0 16px rgba(255, 107, 157, 0.72); }
.control-pipeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}
.control-pipe-step {
    position: relative;
    min-height: 84px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.control-pipe-step::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    transform-origin: left;
    background: linear-gradient(90deg, #42e889, #49d8f2, #ffd15a);
    animation: controlStepFill 5.2s ease-in-out infinite;
}
.control-pipe-step:nth-child(2)::after { animation-delay: 0.4s; }
.control-pipe-step:nth-child(3)::after { animation-delay: 0.8s; }
.control-pipe-step:nth-child(4)::after { animation-delay: 1.2s; }
.control-pipe-step:nth-child(5)::after { animation-delay: 1.6s; }
@keyframes controlStepFill {
    0%, 12% { transform: scaleX(0); opacity: 0; }
    28%, 76% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}
.control-pipe-step b {
    display: block;
    color: #f7fff9;
    font-size: 13px;
    line-height: 1.25;
}
.control-pipe-step span {
    display: block;
    margin-top: 7px;
    color: rgba(245, 255, 248, 0.68);
    font-size: 12px;
    line-height: 1.45;
}

/* ============================================================
   吉祥物 + 气泡对话
   ============================================================ */
.mascot-container {
    position: absolute;
    right: 72px;
    bottom: 28px;
    left: auto;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

/* ===== 星露谷物语对话窗 ===== */
.sv-dialog {
    position: relative;
    background: #FDF5E6;
    border: 3px solid #5B3A1A;
    outline: 1.5px solid #8B6A4A;
    outline-offset: -4.5px;
    border-radius: 4px;
    padding: 0;
    max-width: 260px;
    min-width: 180px;
    min-height: 60px;
    box-shadow:
        0 4px 0 rgba(91, 58, 26, 0.25),
        0 6px 16px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(10px) scale(0.92);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 35px; /* 对齐熊猫头部 */
    image-rendering: pixelated;
    overflow: hidden;
    cursor: pointer;
}
.sv-dialog.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* 头像+名字栏 */
.sv-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #EFDBA0;
    border-bottom: 2px solid #5B3A1A;
}
.sv-avatar {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1.5px solid #5B3A1A;
    image-rendering: pixelated;
    background: #FDF5E6;
}
.sv-name {
    color: #5B3A1A;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: 'Courier New', 'Consolas', monospace;
}
/* 对话文本区 */
.sv-body {
    padding: 10px 14px 12px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-height: 32px;
}
/* 打字文本 */
.sv-text {
    color: #2C1E12;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.3px;
    font-family: 'Courier New', 'Consolas', monospace;
}
/* 星露谷三角光标（打字完成时显示） */
.sv-cursor {
    display: inline-block;
    color: #5B3A1A;
    font-size: 10px;
    margin-left: 2px;
    animation: svBounce 0.6s ease-in-out infinite alternate;
    opacity: 0;
    transition: opacity 0.2s;
}
.sv-dialog.typing-done .sv-cursor {
    opacity: 1;
}
.sv-dialog.is-typing .sv-cursor {
    opacity: 0;
}
@keyframes svBounce {
    0%   { transform: translateY(0); }
    100% { transform: translateY(4px); }
}
/* 气泡小尾巴（指向熊猫）*/
.sv-tail {
    position: absolute;
    bottom: -10px;
    right: 18px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #5B3A1A;
}
.sv-tail::after {
    content: '';
    position: absolute;
    top: -12px;
    left: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #FDF5E6;
}

/* 熊猫本体 */
.hero-mascot {
    width: 132px;
    height: auto;
    opacity: 0.78;
    filter:
        drop-shadow(0 10px 28px rgba(74, 144, 217, 0.32))
        drop-shadow(0 2px 12px rgba(244, 173, 61, 0.16));
    animation: mascotFloat 4s ease-in-out infinite;
    animation-delay: 0.5s;
    /* 不再用absolute定位，由container控制 */
    position: static;
    flex-shrink: 0;
}
@keyframes mascotFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-14px) rotate(2deg); }
}


/* ============================================================
   按钮 - 渐变流光
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 34px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.35s var(--ease-out);
    border: none;
    outline: none;
    letter-spacing: 0.3px;
}
.btn-primary {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: #fff;
    box-shadow:
        0 4px 20px rgba(74, 144, 217, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
    );
    transition: left 0.6s ease;
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 30px rgba(74, 144, 217, 0.45),
        inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-primary:hover::before {
    left: 100%;
}
.btn-outline {
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: none;
}
.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-3px);
}
.btn-lg {
    padding: 17px 48px;
    font-size: 16px;
    border-radius: var(--radius-md);
}

/* ============================================================
   通用区块标题 - 品牌化升级
   ============================================================ */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 14px;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(74, 144, 217, 0.09), rgba(74, 144, 217, 0.05));
    color: var(--brand-primary);
    border: 1px solid rgba(74, 144, 217, 0.1);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.section-title {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--text-primary);
    letter-spacing: 0;
    line-height: 1.22;
}
.section-desc {
    text-align: center;
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 52px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
}

/* ============================================================
   AI智能专家团 - 首页人格化展示
   ============================================================ */
.ai-experts-section {
    position: relative;
    padding: 104px 0 96px;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 18%, rgba(245, 166, 35, 0.14), transparent 30%),
        radial-gradient(circle at 88% 20%, rgba(74, 144, 217, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(74, 144, 217, 0.035));
}
.ai-experts-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 32px;
    align-items: end;
    margin-bottom: 34px;
}
.ai-experts-head .section-badge,
.ai-experts-head .section-title,
.ai-experts-head .section-desc {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
.ai-experts-head .section-desc {
    max-width: 720px;
    margin-bottom: 0;
}
.ai-experts-proof {
    width: 150px;
    min-height: 150px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(74, 144, 217, 0.72), rgba(245, 166, 35, 0.66)),
        rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 24px 60px rgba(20, 36, 82, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.ai-experts-proof strong {
    font-size: 64px;
    line-height: 0.92;
    letter-spacing: 0;
}
.ai-experts-proof span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.ai-experts-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}
.ai-experts-grid--slanted {
    display: flex;
    gap: clamp(30px, 2.3vw, 34px);
    align-items: stretch;
    width: min(1400px, calc(100vw - 48px));
    margin-left: 50%;
    transform: translateX(calc(-50% - 10px));
    padding: 0;
}
.ai-expert-card {
    --expert-accent: 74, 144, 217;
    position: relative;
    min-height: 390px;
    padding: 18px;
    border-radius: 24px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055)),
        rgba(var(--expert-accent), 0.08);
    border: 1px solid rgba(var(--expert-accent), 0.28);
    box-shadow: 0 20px 46px rgba(16, 28, 62, 0.12);
    transform-style: preserve-3d;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.ai-experts-grid--slanted .ai-expert-card {
    --expert-panel-edge: 42px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 460px;
    margin-left: 0;
    padding: 30px 36px 32px;
    border-radius: 0;
    clip-path: polygon(42px 0, 100% 0, calc(100% - 42px) 100%, 0 100%);
    background:
        linear-gradient(145deg, rgba(var(--expert-accent), 0.22), rgba(255, 255, 255, 0.048) 56%, rgba(var(--expert-accent), 0.13)),
        rgba(9, 20, 40, 0.54);
    border-color: rgba(var(--expert-accent), 0.34);
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.18),
        inset 1px 0 0 rgba(255, 255, 255, 0.08),
        inset -1px 0 0 rgba(var(--expert-accent), 0.20);
    transform: skewX(-9deg);
    transform-origin: center bottom;
}
.ai-experts-grid--slanted .ai-expert-card:first-child {
    margin-left: 0;
}
.ai-expert-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 7%, rgba(var(--expert-accent), 0.32), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 42%);
    opacity: 0.8;
    pointer-events: none;
}
.ai-experts-grid--slanted .ai-expert-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 17%, transparent 82%, rgba(var(--expert-accent), 0.24) 82.5%, transparent 83%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 34%, rgba(255, 255, 255, 0.045));
    opacity: 0.72;
    pointer-events: none;
}
.ai-expert-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--expert-accent), 0.48);
    box-shadow: 0 28px 72px rgba(16, 28, 62, 0.18), 0 0 34px rgba(var(--expert-accent), 0.18);
}
.ai-experts-grid--slanted .ai-expert-card:hover {
    transform: translateY(-10px) skewX(-9deg);
    box-shadow:
        0 32px 74px rgba(0, 0, 0, 0.24),
        0 0 32px rgba(var(--expert-accent), 0.18),
        inset 1px 0 0 rgba(255, 255, 255, 0.10),
        inset -1px 0 0 rgba(var(--expert-accent), 0.28);
}
.ai-expert-card--cost { --expert-accent: 217, 119, 6; }
.ai-expert-card--contract { --expert-accent: 124, 58, 237; }
.ai-expert-card--bidding { --expert-accent: 5, 150, 105; }
.ai-expert-card--tech { --expert-accent: 37, 99, 235; }
.ai-expert-card--layout { --expert-accent: 8, 145, 178; }
.ai-expert-avatar {
    position: relative;
    z-index: 1;
    width: min(168px, 78%);
    aspect-ratio: 1;
    margin: 0 auto 14px;
    border-radius: 50%;
    padding: 6px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(var(--expert-accent), 0.78)) border-box;
    border: 2px solid transparent;
    box-shadow: 0 18px 42px rgba(20, 36, 82, 0.2);
    animation: expertAvatarFloat 4.2s ease-in-out infinite;
}
.ai-experts-grid--slanted .ai-expert-avatar {
    width: min(184px, 82%);
    margin-bottom: 22px;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(var(--expert-accent), 0.18);
    animation-name: expertAvatarFloatCounterSkew;
}
.ai-experts-grid--slanted :is(.ai-expert-avatar, .ai-expert-info) {
    transform: skewX(9deg);
}
.ai-expert-card:nth-child(2n) .ai-expert-avatar { animation-delay: -1.2s; }
.ai-expert-card:nth-child(3n) .ai-expert-avatar { animation-delay: -2.4s; }
.ai-expert-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}
.ai-expert-info {
    position: relative;
    z-index: 1;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.ai-expert-info span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 10px;
    border-radius: 999px;
    color: rgb(var(--expert-accent));
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(var(--expert-accent), 0.22);
    font-size: 12px;
    font-weight: 800;
}
.ai-expert-info h3 {
    margin: 10px 0 8px;
    color: var(--text-primary);
    font-size: 25px;
    line-height: 1.1;
    letter-spacing: 0;
}
.ai-expert-info p {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.62;
}
.ai-expert-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 14px;
}
.ai-expert-tags b {
    padding: 4px 8px;
    border-radius: 999px;
    color: rgba(28, 39, 64, 0.78);
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(var(--expert-accent), 0.16);
    font-size: 11px;
    line-height: 1.1;
    font-weight: 700;
}
body.dark .ai-experts-section {
    background:
        radial-gradient(circle at 14% 18%, rgba(245, 166, 35, 0.18), transparent 30%),
        radial-gradient(circle at 88% 20%, rgba(74, 144, 217, 0.20), transparent 32%),
        linear-gradient(180deg, rgba(12, 16, 42, 0.24), rgba(74, 144, 217, 0.035));
}
body.dark .ai-expert-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
        rgba(var(--expert-accent), 0.08);
}
body.dark .ai-experts-grid--slanted .ai-expert-card {
    background:
        linear-gradient(145deg, rgba(var(--expert-accent), 0.25), rgba(255, 255, 255, 0.052) 56%, rgba(var(--expert-accent), 0.15)),
        rgba(9, 20, 40, 0.58);
}
body.dark .ai-expert-info h3 { color: #f4f7ff; }
body.dark .ai-expert-info p { color: rgba(235, 241, 255, 0.88); }
body.dark .ai-expert-tags b {
    color: rgba(244, 247, 255, 0.82);
    background: rgba(255, 255, 255, 0.08);
}
@keyframes expertAvatarFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
}
@keyframes expertAvatarFloatCounterSkew {
    0%, 100% { transform: skewX(9deg) translateY(0) rotate(0deg); }
    50% { transform: skewX(9deg) translateY(-7px) rotate(1deg); }
}
@media (max-width: 1180px) {
    .ai-experts-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .ai-experts-grid--slanted {
        display: grid;
        gap: 16px;
        padding: 0;
    }
    .ai-expert-card {
        min-height: 360px;
    }
    .ai-experts-grid--slanted .ai-expert-card {
        min-height: 360px;
        margin-left: 0;
        clip-path: polygon(34px 0, 100% 0, calc(100% - 34px) 100%, 0 100%);
        transform: skewX(-7deg);
    }
    .ai-experts-grid--slanted .ai-expert-card:hover {
        transform: translateY(-8px) skewX(-7deg);
    }
    .ai-experts-grid--slanted :is(.ai-expert-avatar, .ai-expert-info) {
        transform: skewX(7deg);
    }
}
@media (max-width: 768px) {
    .ai-experts-section {
        padding: 76px 0 68px;
    }
    .ai-experts-head {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 26px;
    }
    .ai-experts-head .section-badge,
    .ai-experts-head .section-title,
    .ai-experts-head .section-desc {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .ai-experts-proof {
        width: min(100%, 220px);
        min-height: 88px;
        grid-template-columns: auto auto;
        justify-content: center;
        justify-self: center;
        padding: 16px 18px;
        border-radius: 20px;
    }
    .ai-experts-proof strong {
        font-size: 44px;
        letter-spacing: 0;
    }
    .ai-experts-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .ai-expert-card {
        min-height: 0;
        display: grid;
        grid-template-columns: 102px minmax(0, 1fr);
        gap: 14px;
        align-items: center;
        padding: 14px;
        border-radius: 20px;
    }
    .ai-experts-grid--slanted .ai-expert-card {
        min-height: 0;
        margin-left: 0;
        clip-path: none;
        border-radius: 20px;
        transform: none;
    }
    .ai-experts-grid--slanted .ai-expert-card:hover {
        transform: translateY(-6px);
    }
    .ai-experts-grid--slanted .ai-expert-card::after {
        display: none;
    }
    .ai-expert-avatar {
        width: 102px;
        margin: 0;
    }
    .ai-experts-grid--slanted .ai-expert-avatar {
        width: 102px;
        margin: 0;
        animation-name: expertAvatarFloat;
    }
    .ai-experts-grid--slanted :is(.ai-expert-avatar, .ai-expert-info) {
        transform: none;
    }
    .ai-expert-info {
        text-align: left;
    }
    .ai-expert-info h3 {
        font-size: 22px;
    }
    .ai-expert-info p {
        font-size: 12.5px;
    }
    .ai-experts-grid--slanted .ai-expert-info p {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    .ai-expert-tags {
        justify-content: flex-start;
        margin-top: 10px;
    }
}
@media (max-width: 420px) {
    .ai-expert-card {
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 12px;
    }
    .ai-expert-avatar {
        width: 86px;
        padding: 4px;
    }
    .ai-expert-tags b {
        font-size: 10px;
        padding: 3px 6px;
    }
}

/* ============================================================
   功能卡片区 - 玻璃态 + 光效 + 3D倾斜增强
   ============================================================ */
.features {
    padding: 110px 0;
    background: transparent;
    position: relative;
}
.features-alt {
    background: transparent;
}

.features-no-heading {
    padding-top: 48px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}
.features-grid.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
.features-grid.grid-2 {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
/* ===== 功能卡片 ===== */
.feature-card {
    background: var(--bg-card);
    border-radius: 18px;
    padding: 28px 24px;
    text-align: center;
    transition:
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 10px 26px rgba(16, 28, 62, 0.06);
    border: 1px solid rgba(16, 28, 62, 0.06);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    contain: layout paint;
    opacity: 0;
    transform: translateY(28px);
}
.features-alt .feature-card {
    background: #f8fafe;
}
/* 卡片顶部装饰线 */
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
    opacity: 0;
    transition: opacity 0.4s ease;
}
.feature-card:hover::before {
    opacity: 1;
}
/* 光晕扫过效果 */
.feature-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(74, 144, 217, 0.06), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.feature-card:hover::after {
    opacity: 1;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(16, 28, 62, 0.1), 0 0 24px rgba(74, 144, 217, 0.06);
    border-color: rgba(74, 144, 217, 0.16);
}
/* 核心功能卡片 */
.feature-card.featured {
    border-color: rgba(245, 166, 35, 0.25);
    background: linear-gradient(145deg, #fffcf5, #fffaf0, var(--bg-card));
}
.feature-card.featured::before {
    background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-light));
}
.feature-link {
    display: block;
    cursor: pointer;
}
.feature-link:focus-visible {
    outline: 2px solid rgba(74, 144, 217, 0.5);
    outline-offset: 4px;
    border-radius: 12px;
}
/* 图标容器 */
.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.feature-card:hover .feature-icon {
    transform: scale(1.1);
}
.feature-icon svg {
    width: 22px;
    height: 22px;
    position: relative;
    z-index: 1;
}
/* 卡片标题 */
.feature-card h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
    position: relative;
    z-index: 1;
    letter-spacing: 0;
    transition: color 0.3s ease;
}
.feature-card:hover h3 {
    color: var(--brand-primary-dark);
}
.feature-card p {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.72;
    position: relative;
    z-index: 1;
}
.ai-experts-grid--slanted .ai-expert-info p {
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== React Bits 风格卡片边缘流光（静态站适配版） ===== */
.rb-border-glow {
    --rb-edge-proximity: 0;
    --rb-cursor-angle: 45deg;
    --rb-pointer-x: 50%;
    --rb-pointer-y: 50%;
    --rb-glow-accent: 74, 144, 217;
    position: relative;
    isolation: isolate;
}

.rb-border-glow > :not(.rb-border-glow__edge) {
    position: relative;
    z-index: 2;
}

.rb-border-glow > .rb-border-glow__edge {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    opacity: clamp(0, calc((var(--rb-edge-proximity) - 18) / 82), 0.92);
    transition: opacity 0.25s ease-out;
    mix-blend-mode: screen;
}

.rb-border-glow > .rb-border-glow__edge::before,
.rb-border-glow > .rb-border-glow__edge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.rb-border-glow > .rb-border-glow__edge::before {
    padding: 1px;
    background:
        conic-gradient(
            from var(--rb-cursor-angle),
            transparent 0deg,
            transparent 112deg,
            rgba(var(--rb-glow-accent), 0.88) 136deg,
            rgba(73, 216, 242, 0.76) 154deg,
            rgba(245, 166, 35, 0.78) 171deg,
            rgba(244, 114, 182, 0.58) 190deg,
            transparent 220deg,
            transparent 360deg
        );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.rb-border-glow > .rb-border-glow__edge::after {
    background:
        radial-gradient(
            circle at var(--rb-pointer-x) var(--rb-pointer-y),
            rgba(var(--rb-glow-accent), 0.22),
            rgba(73, 216, 242, 0.08) 22%,
            transparent 48%
        );
    box-shadow:
        inset 0 0 0 1px rgba(var(--rb-glow-accent), 0.22),
        inset 0 0 18px rgba(var(--rb-glow-accent), 0.18),
        0 0 26px rgba(var(--rb-glow-accent), 0.18);
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
    .rb-border-glow > .rb-border-glow__edge {
        display: none;
    }
}

/* ===== Cover Flow 3D 轮播 (Apple 风格) ===== */
.coverflow-wrapper {
    position: relative;
    width: 100%;
    max-width: 1290px;
    margin: 0 auto;
    padding: 40px 0 20px;
}

.coverflow-note {
    max-width: 560px;
    margin: 2px auto 0;
    color: var(--text-muted);
    text-align: center;
    font-size: 15px;
    line-height: 1.7;
}

.coverflow-container {
    position: relative;
    height: 382px;
    perspective: 1650px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    touch-action: pan-y;
}

.coverflow-item {
    position: absolute;
    width: 260px;
    height: 342px;
    transition: opacity 0.24s ease;
    cursor: pointer;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ===== 卡片本体 — Apple 风格玻璃卡片 ===== */
.coverflow-card {
    --cover-accent: 74, 144, 217;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.11) 0%,
        rgba(var(--cover-accent), 0.035) 44%,
        rgba(255, 255, 255, 0.045) 100%);
    backdrop-filter: blur(6px) saturate(132%) brightness(1.04);
    -webkit-backdrop-filter: blur(6px) saturate(132%) brightness(1.04);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 22px;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow:
        0 8px 24px rgba(16, 24, 48, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition:
        transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 0.3s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.35s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* 顶部高光 —— 模拟玻璃反光 */
.coverflow-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(175deg, rgba(255, 255, 255, 0.24) 0%, transparent 34%),
        radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.12) 0%, transparent 30%);
    pointer-events: none;
}

/* 底部微光晕 */
.coverflow-card::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -40px;
    height: 80px;
    background: radial-gradient(circle, rgba(var(--cover-accent), 0.10) 0%, transparent 70%);
    filter: blur(10px);
    opacity: 0.35;
    pointer-events: none;
}

.coverflow-card > * {
    position: relative;
    z-index: 1;
}

/* 中心卡片 —— 更亮更透的玻璃，带柔和辉光 */
.coverflow-item.active .coverflow-card {
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(var(--cover-accent), 0.06) 48%,
        rgba(255, 255, 255, 0.065) 100%);
    backdrop-filter: blur(4px) saturate(132%) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(4px) saturate(132%) brightness(1.04) !important;
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow:
        0 16px 48px rgba(16, 24, 48, 0.15),
        0 8px 24px rgba(var(--cover-accent), 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    opacity: 1 !important;
    transform: translateY(-4px);
    -webkit-box-reflect: none !important;
    transform: translateY(-4px);
}

/* 中心卡片增强高光 */
.coverflow-item.active .coverflow-card::before {
    background:
        linear-gradient(175deg, rgba(255, 255, 255, 0.3) 0%, transparent 38%),
        radial-gradient(circle at 80% 10%, rgba(var(--cover-accent), 0.12) 0%, transparent 28%);
}

.coverflow-card.featured {
    border-color: rgba(var(--cover-accent), 0.2);
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(var(--cover-accent), 0.045) 46%,
        rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(6px) saturate(132%) brightness(1.04);
    -webkit-backdrop-filter: blur(6px) saturate(132%) brightness(1.04);
}

.coverflow-item.active .coverflow-card.featured {
    box-shadow:
        0 20px 56px rgba(16, 24, 48, 0.16),
        0 12px 32px rgba(var(--cover-accent), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    border-color: rgba(var(--cover-accent), 0.3);
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(var(--cover-accent), 0.07) 48%,
        rgba(255, 255, 255, 0.065) 100%) !important;
    backdrop-filter: blur(4px) saturate(132%) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(4px) saturate(132%) brightness(1.04) !important;
}

.coverflow-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 18px 0 18px;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(4px) saturate(130%);
    -webkit-backdrop-filter: blur(4px) saturate(130%);
    box-shadow:
        0 6px 14px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.coverflow-icon::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 6px;
    right: 6px;
    height: 36%;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent);
    pointer-events: none;
}

.coverflow-icon::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0.5;
    pointer-events: none;
}

.coverflow-item.active .coverflow-icon {
    transform: scale(1.1) translateY(-4px) rotateX(10deg);
    box-shadow:
        0 14px 22px rgba(15, 23, 42, 0.12),
        0 20px 30px rgba(var(--cover-accent), 0.18),
        0 1px 0 rgba(255, 255, 255, 0.18);
}

.coverflow-icon svg {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
    transform: translateY(-1px);
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18))
        drop-shadow(0 5px 8px rgba(0, 0, 0, 0.18));
}

.coverflow-icon.cartoon-icon {
    width: 66px;
    height: 66px;
    border-radius: 22px;
    margin: 10px 0 14px;
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.75), transparent 34%),
        linear-gradient(145deg, rgba(var(--cover-accent), 0.24), rgba(255, 255, 255, 0.08));
    border-color: rgba(var(--cover-accent), 0.36);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 10px 22px rgba(8, 15, 34, 0.16),
        0 14px 30px rgba(var(--cover-accent), 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.coverflow-icon.cartoon-icon svg {
    width: 54px;
    height: 54px;
    overflow: visible;
    transform: none;
    filter: drop-shadow(0 9px 12px rgba(0, 0, 0, 0.22));
}

.coverflow-icon.cartoon-icon .cartoon-svg * {
    vector-effect: non-scaling-stroke;
}

.coverflow-icon.artwork-icon {
    width: 62px;
    height: 62px;
    margin: 14px 0 14px;
    border: none;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    overflow: visible;
}

.coverflow-icon.artwork-icon::before,
.coverflow-icon.artwork-icon::after {
    display: none;
}

.coverflow-icon.artwork-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(255, 154, 158, 0.22));
}

.coverflow-item.active .coverflow-icon.artwork-icon {
    transform: scale(1.06) translateY(-4px);
    box-shadow: none;
}

.coverflow-icon.ai-art-icon {
    width: 86px;
    height: 86px;
    margin: 8px 0 12px;
    display: grid;
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 45%, rgba(var(--cover-accent), 0.22), rgba(8, 22, 40, 0.08) 62%, transparent 73%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 14px 26px rgba(0, 0, 0, 0.18),
        0 0 24px rgba(var(--cover-accent), 0.16);
}

.coverflow-icon.ai-art-icon picture,
.coverflow-icon.ai-art-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.coverflow-icon.ai-art-icon picture {
    position: relative;
    z-index: 1;
}

.coverflow-icon.ai-art-icon img {
    object-fit: contain;
    filter:
        drop-shadow(0 12px 18px rgba(0, 0, 0, 0.3))
        drop-shadow(0 0 14px rgba(var(--cover-accent), 0.16));
}

.coverflow-icon.ai-art-icon::before {
    inset: 8px;
    height: auto;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 64%);
    opacity: 0.78;
}

.coverflow-icon.ai-art-icon::after {
    display: none;
}

.coverflow-item.active .coverflow-icon.ai-art-icon {
    transform: scale(1.08) translateY(-4px);
    box-shadow:
        0 18px 32px rgba(0, 0, 0, 0.24),
        0 0 30px rgba(var(--cover-accent), 0.22);
}

.coverflow-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.35;
    transition: color 0.3s, transform 0.3s;
}

.coverflow-item.active .coverflow-card h3 {
    color: var(--text-primary);
    transform: translateY(-1px);
}

.coverflow-card p {
    font-size: 13px;
    color: #6a7592;
    line-height: 1.72;
    max-width: 214px;
    flex: 1;
}

.coverflow-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-primary);
    text-decoration: none;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: all 0.3s;
    opacity: 0;
    transform: translateX(-4px);
}

.coverflow-link::after {
    content: " →";
    transition: transform 0.25s ease;
}

.coverflow-item.active .coverflow-link {
    opacity: 1;
    transform: translateX(0);
}
.coverflow-link:hover {
    color: var(--brand-primary);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: translateX(0);
}

.coverflow-link:hover::after {
    transform: translateX(4px);
}

/* ===== Cover Flow 导航 ===== */

/* ===== 3D 变换状态 (Apple Cover Flow) ===== */

/* 中心：正面 */
.coverflow-item.active {
    z-index: 10;
    transform: translateX(0) translateZ(0) rotateY(0deg);
    opacity: 1;
}

/* 左1 */
.coverflow-item.prev-1 {
    z-index: 5;
    transform: translateX(-235px) translateZ(-26px) rotateY(58deg);
    opacity: 0.68;
}

/* 左2 */
.coverflow-item.prev-2 {
    z-index: 3;
    transform: translateX(-382px) translateZ(-74px) rotateY(64deg);
    opacity: 0.36;
}

/* 左3 */
.coverflow-item.prev-3 {
    z-index: 1;
    transform: translateX(-518px) translateZ(-112px) rotateY(68deg);
    opacity: 0.22;
}

/* 左4 */
.coverflow-item.prev-4 {
    z-index: 0;
    transform: translateX(-640px) translateZ(-144px) rotateY(70deg);
    opacity: 0;
    pointer-events: none;
}

/* 右1 */
.coverflow-item.next-1 {
    z-index: 5;
    transform: translateX(245px) translateZ(-26px) rotateY(-58deg);
    opacity: 0.68;
}

/* 右2 */
.coverflow-item.next-2 {
    z-index: 3;
    transform: translateX(402px) translateZ(-74px) rotateY(-64deg);
    opacity: 0.36;
}

/* 右3 */
.coverflow-item.next-3 {
    z-index: 1;
    transform: translateX(548px) translateZ(-112px) rotateY(-68deg);
    opacity: 0.22;
}

/* 右4 */
.coverflow-item.next-4 {
    z-index: 0;
    transform: translateX(670px) translateZ(-144px) rotateY(-70deg);
    opacity: 0;
    pointer-events: none;
}

/* 隐藏 */
.coverflow-item.hidden {
    z-index: 0;
    transform: translateZ(-120px) rotateY(65deg);
    opacity: 0;
    pointer-events: none;
}

/* ===== 暗色模式 Cover Flow —— 同样玻璃特效 ===== */
body.dark .coverflow-card {
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.045) 0%,
        rgba(var(--cover-accent), 0.032) 45%,
        rgba(255, 255, 255, 0.026) 100%);
    backdrop-filter: blur(4px) saturate(128%) brightness(1.08);
    -webkit-backdrop-filter: blur(4px) saturate(128%) brightness(1.08);
    border-color: rgba(255, 255, 255, 0.13);
}
body.dark .coverflow-item.active .coverflow-card {
    box-shadow:
        0 16px 40px rgba(var(--cover-accent), 0.12),
        0 8px 20px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.075) 0%,
        rgba(var(--cover-accent), 0.055) 48%,
        rgba(255, 255, 255, 0.04) 100%) !important;
    backdrop-filter: blur(3px) saturate(128%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(3px) saturate(128%) brightness(1.08) !important;
    opacity: 1 !important;
    transform: translateY(-4px);
}
body.dark .coverflow-item.active .coverflow-card::before {
    background:
        linear-gradient(175deg, rgba(255, 255, 255, 0.12) 0%, transparent 35%),
        radial-gradient(circle at 80% 10%, rgba(var(--cover-accent), 0.08) 0%, transparent 28%);
}
body.dark .coverflow-card.featured {
    border-color: rgba(var(--cover-accent), 0.15);
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(var(--cover-accent), 0.04) 46%,
        rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(4px) saturate(128%) brightness(1.08);
    -webkit-backdrop-filter: blur(4px) saturate(128%) brightness(1.08);
}
body.dark .coverflow-item.active .coverflow-card.featured {
    box-shadow:
        0 16px 40px rgba(var(--cover-accent), 0.12),
        0 10px 24px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border-color: rgba(var(--cover-accent), 0.2);
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.085) 0%,
        rgba(var(--cover-accent), 0.065) 48%,
        rgba(255, 255, 255, 0.045) 100%) !important;
    backdrop-filter: blur(3px) saturate(128%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(3px) saturate(128%) brightness(1.08) !important;
}
body.dark .coverflow-card::after {
    background: radial-gradient(circle, rgba(var(--cover-accent), 0.10) 0%, transparent 70%);
}
body.dark .coverflow-icon {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(6px) saturate(130%);
    -webkit-backdrop-filter: blur(6px) saturate(130%);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.16),
        0 12px 24px rgba(var(--cover-accent), 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
body.dark .coverflow-icon::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
}
body.dark .coverflow-icon::after {
    border-color: rgba(255, 255, 255, 0.05);
}
body.dark .coverflow-icon svg {
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.08))
        drop-shadow(0 5px 9px rgba(0, 0, 0, 0.34));
}
body.dark .coverflow-icon.cartoon-icon {
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.28), transparent 34%),
        linear-gradient(145deg, rgba(var(--cover-accent), 0.2), rgba(255, 255, 255, 0.04));
    border-color: rgba(var(--cover-accent), 0.26);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.dark .coverflow-icon.artwork-icon {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
}
body.dark .coverflow-icon.artwork-icon img {
    filter: none;
}
body.dark .coverflow-icon.ai-art-icon {
    background:
        radial-gradient(circle at 50% 45%, rgba(var(--cover-accent), 0.18), rgba(7, 16, 31, 0.06) 64%, transparent 74%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent;
    box-shadow:
        0 16px 30px rgba(0, 0, 0, 0.22),
        0 0 26px rgba(var(--cover-accent), 0.16);
}
body.dark .coverflow-icon.ai-art-icon img {
    filter:
        drop-shadow(0 12px 18px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 14px rgba(var(--cover-accent), 0.16));
}
body.dark .coverflow-card p {
    color: rgba(225, 231, 245, 0.72);
}
body.dark .coverflow-link {
    background: transparent;
    border-color: transparent;
    color: var(--brand-primary-light);
}

/* ===== 响应式 Cover Flow ===== */
@media (max-width: 768px) {
    .coverflow-container {
        height: 316px;
        perspective: 1180px;
    }
    .coverflow-item {
        width: 220px;
        height: 294px;
    }
    .coverflow-card {
        padding: 24px 18px 18px;
        border-radius: 20px;
    }
    .coverflow-icon {
        width: 46px;
        height: 46px;
        margin: 16px 0 16px;
        border-radius: 14px;
    }
    .coverflow-icon.cartoon-icon {
        width: 58px;
        height: 58px;
        margin: 10px 0 12px;
        border-radius: 18px;
    }
    .coverflow-icon.cartoon-icon svg {
        width: 48px;
        height: 48px;
    }
    .coverflow-icon.artwork-icon {
        width: 54px;
        height: 54px;
        margin: 12px 0 14px;
    }
    .coverflow-icon.ai-art-icon {
        width: 72px;
        height: 72px;
        margin: 8px 0 12px;
        border-radius: 20px;
    }
    .coverflow-card h3 {
        font-size: 15px;
        margin-bottom: 10px;
    }
    .coverflow-card p {
        font-size: 12px;
        line-height: 1.62;
        max-width: 184px;
    }
    .coverflow-link {
        font-size: 11px;
    }
    .coverflow-item.active {
        transform: translateX(0) translateZ(0) rotateY(0deg);
    }
    .coverflow-item.prev-1 {
        transform: translateX(-194px) translateZ(-26px) rotateY(58deg);
        opacity: 0.60;
    }
    .coverflow-item.prev-2 {
        transform: translateX(-307px) translateZ(-64px) rotateY(64deg);
        opacity: 0.30;
    }
    .coverflow-item.prev-3 {
        transform: translateX(-400px) translateZ(-100px) rotateY(68deg);
        opacity: 0.16;
    }
    .coverflow-item.prev-4 {
        opacity: 0; pointer-events: none; transform: translateX(-475px) translateZ(-120px) rotateY(70deg) scale(0.5);
    }
    .coverflow-item.next-1 {
        transform: translateX(206px) translateZ(-26px) rotateY(-58deg);
        opacity: 0.60;
    }
    .coverflow-item.next-2 {
        transform: translateX(329px) translateZ(-64px) rotateY(-64deg);
        opacity: 0.30;
    }
    .coverflow-item.next-3 {
        opacity: 0.16; pointer-events: none; transform: translateX(430px) translateZ(-100px) rotateY(-68deg);
    }
    .coverflow-item.next-4 {
        opacity: 0; pointer-events: none; transform: translateX(505px) translateZ(-120px) rotateY(-70deg) scale(0.5);
    }
    .coverflow-wrapper {
        padding: 24px 0 10px;
    }
    /* AI 分栏网格移动端竖排 */
    .ai-split-grid {
        flex-direction: column;
        gap: 24px;
    }
    .ai-split-left, .ai-split-right {
        flex: 1;
    }
}
/* 链接提示 */
.feature-link-hint {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-primary);
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.feature-link:hover .feature-link-hint {
    opacity: 1;
    transform: translateX(0);
}
.feature-link:focus-visible .feature-link-hint {
    opacity: 1;
}

/* ============================================================
   造价核心功能卡片 - 专业增强版
   ============================================================ */
#core-features .features-grid {
    gap: 20px;
}

#core-features .features-grid.circular-feature-gallery {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

#core-features .features-grid.circular-feature-gallery.is-circular-ready {
    position: relative;
    display: block;
    height: clamp(430px, 45vw, 540px);
    padding: 10px 0 42px;
    overflow: hidden;
    perspective: 1450px;
    transform-style: preserve-3d;
    cursor: grab;
    touch-action: pan-y;
    isolation: isolate;
    contain: layout paint;
}

#core-features .features-grid.circular-feature-gallery.is-circular-ready::before {
    content: "";
    position: absolute;
    left: 11%;
    right: 11%;
    bottom: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(107, 179, 240, 0.34), rgba(245, 166, 35, 0.28), transparent);
    opacity: 0.72;
    pointer-events: none;
}

#core-features .features-grid.circular-feature-gallery.is-circular-ready::after {
    content: "";
    position: absolute;
    inset: 18% 4% 8%;
    border-radius: 50%;
    border: 1px solid rgba(107, 179, 240, 0.1);
    border-top-color: transparent;
    opacity: 0.5;
    transform: perspective(900px) rotateX(68deg);
    pointer-events: none;
}

#core-features .features-grid.circular-feature-gallery.is-dragging {
    cursor: grabbing;
}

#core-features .features-grid.circular-feature-gallery:focus-visible {
    outline: 2px solid rgba(107, 179, 240, 0.68);
    outline-offset: 8px;
}

#core-features .feature-card {
    --card-accent: 74, 144, 217;
    background: linear-gradient(160deg,
        rgba(255,255,255,0.98) 0%,
        rgba(var(--card-accent), 0.015) 35%,
        rgba(248,251,255,0.97) 100%);
    border: 1px solid rgba(var(--card-accent), 0.08);
    border-radius: 20px;
    padding: 30px 24px 24px;
    text-align: left;
    box-shadow:
        0 2px 8px rgba(var(--card-accent), 0.03),
        0 8px 24px rgba(16,28,62,0.05);
    transition:
        transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94),
        opacity 0.45s cubic-bezier(0.25,0.46,0.45,0.94),
        box-shadow 0.45s cubic-bezier(0.25,0.46,0.45,0.94),
        border-color 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#core-features .circular-feature-gallery.is-circular-ready .feature-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(300px, 72vw);
    min-height: 342px;
    opacity: 0;
    transform-origin: center center;
    will-change: transform, opacity;
    backface-visibility: hidden;
    contain: layout paint;
    transition:
        opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

#core-features .circular-feature-gallery.is-circular-ready .feature-card.is-gallery-active {
    border-color: rgba(var(--card-accent), 0.28);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.18),
        0 0 22px rgba(var(--card-accent), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#core-features .circular-feature-gallery.is-circular-ready .feature-card:not(.is-gallery-active) .feature-link-hint {
    opacity: 0;
}

/* 左侧装饰线 */
#core-features .feature-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg,
        rgba(var(--card-accent), 0.7),
        rgba(var(--card-accent), 0.3) 60%,
        rgba(var(--card-accent), 0.05));
    opacity: 0;
    transform: scaleY(0.6);
    transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

#core-features .feature-card:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

/* 卡片右上角光晕 */
#core-features .feature-card::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -30%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle,
        rgba(var(--card-accent), 0.08) 0%,
        rgba(var(--card-accent), 0.03) 30%,
        transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

#core-features .feature-card:hover::after {
    opacity: 1;
}

#core-features .feature-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 4px 16px rgba(var(--card-accent), 0.08),
        0 16px 42px rgba(var(--card-accent), 0.12),
        0 0 0 1px rgba(var(--card-accent), 0.1);
}

/* 图标增强 */
#core-features .feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin: 0 0 18px 0;
    box-shadow:
        0 6px 14px rgba(0,0,0,0.1),
        0 10px 24px rgba(var(--card-accent), 0.18),
        inset 0 1px 0 rgba(255,255,255,0.2);
    position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

#core-features .feature-icon.feature-art-icon {
    width: 92px;
    height: 92px;
    margin-bottom: 14px;
    display: grid;
    place-items: center;
    overflow: visible;
    background:
        radial-gradient(circle at 50% 45%, rgba(var(--card-accent), 0.24), rgba(8, 22, 40, 0.1) 62%, transparent 72%);
    border: 0;
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.22),
        0 0 28px rgba(var(--card-accent), 0.18);
}

#core-features .feature-icon.feature-art-icon picture,
#core-features .feature-icon.feature-art-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

#core-features .feature-icon.feature-art-icon img {
    object-fit: contain;
    filter:
        drop-shadow(0 14px 22px rgba(0, 0, 0, 0.32))
        drop-shadow(0 0 16px rgba(var(--card-accent), 0.18));
}

/* 图标顶部高光 */
#core-features .feature-icon::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 5px;
    right: 5px;
    height: 35%;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.45),
        rgba(255,255,255,0.05));
    pointer-events: none;
    z-index: 2;
}

#core-features .feature-card:hover .feature-icon {
    transform: scale(1.08) translateY(-3px);
    box-shadow:
        0 8px 18px rgba(0,0,0,0.12),
        0 14px 32px rgba(var(--card-accent), 0.24),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

#core-features .feature-icon svg {
    width: 24px;
    height: 24px;
}

/* 卡片标题 */
#core-features .feature-card h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
    letter-spacing: 0;
    transition: color 0.35s ease;
    position: relative;
    z-index: 1;
}

#core-features .feature-card:hover h3 {
    color: rgba(var(--card-accent), 1);
}

/* 卡片描述 */
#core-features .feature-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.68;
    flex: 1;
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
}

/* 特征标签 */
.cost-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    position: relative;
    z-index: 1;
}
.cost-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    background: rgba(var(--card-accent), 0.07);
    color: rgba(var(--card-accent), 0.85);
    border: 1px solid rgba(var(--card-accent), 0.1);
    transition: all 0.3s ease;
}
#core-features .feature-card:hover .cost-tag {
    background: rgba(var(--card-accent), 0.12);
    border-color: rgba(var(--card-accent), 0.2);
}

/* 卡片链接提示 */
#core-features .feature-link-hint {
    font-size: 12px;
    font-weight: 600;
    color: rgba(var(--card-accent), 0.7);
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.35s ease;
    margin-top: 10px;
    display: inline-block;
    position: relative;
    z-index: 1;
}
#core-features .feature-card:hover .feature-link-hint {
    opacity: 1;
    transform: translateX(0);
    color: rgba(var(--card-accent), 1);
}

/* 造价核心暗色模式 */
body.dark #core-features .feature-card {
    background: linear-gradient(160deg,
        rgba(22,24,38,0.98) 0%,
        rgba(var(--card-accent), 0.03) 35%,
        rgba(18,20,32,0.97) 100%);
    border-color: rgba(var(--card-accent), 0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

body.dark #core-features .circular-feature-gallery.is-circular-ready .feature-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.home-page.dark .coverflow-card,
body.home-page.dark .coverflow-card.featured,
body.home-page.dark .coverflow-item.active .coverflow-card,
body.home-page.dark .coverflow-item.active .coverflow-card.featured {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.dark #core-features .feature-card:hover {
    box-shadow:
        0 4px 16px rgba(var(--card-accent), 0.1),
        0 16px 42px rgba(var(--card-accent), 0.16),
        0 0 0 1px rgba(var(--card-accent), 0.15);
}
body.dark #core-features .feature-card h3 { color: rgb(var(--card-accent)); }
body.dark #core-features .feature-card:hover h3 { color: rgb(var(--card-accent)); }
body.dark #core-features .cost-tag {
    background: rgba(var(--card-accent), 0.12);
    border-color: rgba(var(--card-accent), 0.28);
    color: rgb(var(--card-accent));
}
body.dark #core-features .feature-card:hover .cost-tag {
    color: rgb(var(--card-accent));
}
body.dark #core-features .feature-link-hint {
    color: rgba(var(--card-accent), 0.7);
}
body.dark #core-features .feature-card:hover .feature-link-hint {
    color: rgb(var(--card-accent));
}

body.dark #core-features .features-grid.circular-feature-gallery.is-circular-ready::before {
    background: linear-gradient(90deg, transparent, rgba(107, 179, 240, 0.42), rgba(245, 166, 35, 0.32), transparent);
}

body.dark #core-features .circular-feature-gallery.is-circular-ready .feature-card.is-gallery-active {
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.11) 0%,
        rgba(var(--card-accent), 0.08) 42%,
        rgba(255, 255, 255, 0.06) 100%);
    border-color: rgba(var(--card-accent), 0.3);
}

#core-features .features-grid.circular-feature-gallery.is-linear {
    display: flex;
    gap: 16px;
    height: auto;
    padding: 0 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    perspective: none;
    cursor: auto;
    scroll-snap-type: x mandatory;
    mask-image: none;
    -webkit-mask-image: none;
}

#core-features .features-grid.circular-feature-gallery.is-linear::before,
#core-features .features-grid.circular-feature-gallery.is-linear::after {
    display: none;
}

#core-features .circular-feature-gallery.is-linear .feature-card {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-height: 320px;
    flex: 0 0 min(78vw, 318px);
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    pointer-events: auto !important;
    scroll-snap-align: center;
}


/* ============================================================
   关于区
   ============================================================ */
.about {
    padding: 96px 0 104px;
    background: transparent;
}
.about-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(16, 28, 62, 0.06);
    border-radius: 22px;
    padding: 34px 36px;
    box-shadow: 0 14px 34px rgba(16, 28, 62, 0.06);
}
.about-content p {
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-size: 15.5px;
    line-height: 1.8;
}
.contact-info {
    margin-top: 28px;
    padding: 26px 28px;
    background: linear-gradient(180deg, #f8fbff 0%, #f3f7fd 100%);
    border-radius: 18px;
    border: 1px solid rgba(74, 144, 217, 0.12);
}
.contact-info p {
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
}

/* 微信二维码 */
.wechat-contact {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.wechat-qr {
    width: 160px;
    height: 160px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.wechat-qr:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}
.wechat-label {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
}
body.dark .wechat-qr {
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* ============================================================
   页脚
   ============================================================ */
.footer {
    background: transparent;
    padding: 44px 0;
    position: relative;
    overflow: hidden;
}
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    font-weight: 600;
}
.footer-logo img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}
.copyright {
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
}

/* ============================================================
   主题切换按钮 - Apple 风格药丸开关
   在深色/浅色玻璃导航栏上都保持高对比度
   ============================================================ */
.theme-toggle {
    /* 高对比度底色：实色半透明，在深色/浅色导航栏上都清晰可辨 */
    background: rgba(210, 215, 225, 0.90);
    border: 1px solid rgba(120, 130, 150, 0.35);
    border-radius: 28px;
    width: 48px;
    height: 26px;
    inline-size: 48px;
    block-size: 26px;
    min-inline-size: 48px;
    max-inline-size: 48px;
    min-block-size: 26px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    padding: 2px;
    margin-left: 8px;
    appearance: none;
    -webkit-appearance: none;
    border-style: solid;
    line-height: 0;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10;
    transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    flex: 0 0 48px;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    position: relative;
}
.theme-toggle:hover {
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 0 8px rgba(74, 144, 217, 0.18),
        0 0 16px rgba(74, 144, 217, 0.06);
}
.theme-toggle:focus-visible {
    outline: 2px solid rgba(93, 173, 226, 0.75);
    outline-offset: 3px;
}
.theme-icon {
    width: 20px;
    height: 20px;
    inline-size: 20px;
    block-size: 20px;
    min-inline-size: 20px;
    min-block-size: 20px;
    aspect-ratio: 1 / 1;
    flex: 0 0 20px;
    box-sizing: border-box;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a2e, #2d2b55);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.32s var(--ease-spring), background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    transform: translate3d(0, 0, 0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    line-height: 0;
}
.theme-icon svg {
    width: 12px;
    height: 12px;
    inline-size: 12px;
    block-size: 12px;
    position: absolute;
    inset: 50% auto auto 50%;
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}
.theme-icon .icon-moon { color: #f0e68c; opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
.theme-icon .icon-sun  { color: #ffd700; opacity: 0; transform: translate(-50%, -50%) rotate(-90deg); }
body.dark .theme-icon .icon-moon { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
body.dark .theme-icon .icon-sun  { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
body.dark .theme-icon { background: linear-gradient(135deg, #fff, #e0e8ff); transform: translate3d(22px, 0, 0); }

/* ============================================================
   暗黑模式完整体系
   ============================================================ */
body.dark {
    --bg-primary: #111128;
    --bg-secondary: rgba(255, 255, 255, 0.04);
    --bg-card: rgba(255, 255, 255, 0.04);
    --text-primary: #eaeaf2;
    --text-secondary: #989cb4;
    --text-muted: #6b7090;
    --border-color: rgba(255, 255, 255, 0.06);
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 40px rgba(74, 144, 217, 0.1);
}
body.dark {
    background: #111128;
    background-attachment: scroll;
    color: var(--text-primary);
}
body.home-page.dark {
    background:
        repeating-linear-gradient(90deg, rgba(72, 160, 255, 0.026) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(180deg, rgba(72, 160, 255, 0.018) 0 1px, transparent 1px 96px),
        linear-gradient(180deg, #050b18 0%, #050b18 100%);
    background-attachment: scroll, scroll, scroll;
    background-size: 96px 96px, 96px 96px, auto;
}
body.home-page.dark .hero,
body.home-page.dark .auto-cost-section,
body.home-page.dark .ai-experts-section,
body.home-page.dark .features,
body.home-page.dark .features-alt,
body.home-page.dark .about,
body.home-page.dark .footer {
    background: transparent !important;
}
body.home-page.dark .auto-cost-section::before,
body.home-page.dark .auto-cost-section::after,
body.home-page.dark .features::before,
body.home-page.dark .features::after,
body.home-page.dark .footer::before {
    display: none;
}
body.home-page.dark .footer::before {
    display: none;
}

body.home-page.dark :is(.ai-experts-section, #ai-features, #core-features, .about, .footer) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
body.home-page.dark :is(.ai-experts-section, #ai-features, #core-features, .about, .footer) > .container {
    position: relative;
    z-index: 1;
}
body.home-page.dark .ai-experts-section::before {
    content: "";
    position: absolute;
    inset: -10% -6% -12%;
    /* expert-network-field */
    background:
        linear-gradient(90deg, transparent 0 7%, rgba(81, 214, 255, 0.10) 7.2%, transparent 7.6%, transparent 84%, rgba(245, 166, 35, 0.08) 84.3%, transparent 84.8%),
        repeating-linear-gradient(120deg, transparent 0 34px, rgba(89, 207, 255, 0.045) 35px 36px, transparent 37px 72px),
        repeating-linear-gradient(90deg, rgba(105, 190, 255, 0.03) 0 1px, transparent 1px 128px);
    opacity: 0.78;
    pointer-events: none;
    z-index: 0;
}
body.home-page.dark .ai-experts-section::after {
    content: "";
    position: absolute;
    inset: auto 4% 8% 4%;
    height: 42%;
    background:
        linear-gradient(90deg, transparent, rgba(245, 166, 35, 0.08) 24%, rgba(83, 214, 255, 0.10) 50%, rgba(171, 123, 255, 0.08) 76%, transparent),
        repeating-linear-gradient(90deg, transparent 0 92px, rgba(255, 255, 255, 0.055) 93px 94px, transparent 95px 188px);
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
    opacity: 0.62;
    pointer-events: none;
    z-index: 0;
}
body.home-page.dark #ai-features::before {
    content: "";
    position: absolute;
    inset: 3% -8% 2%;
    display: block;
    /* ai-feature-data-ribbons */
    background:
        repeating-linear-gradient(0deg, rgba(112, 225, 255, 0.055) 0 1px, transparent 1px 42px),
        linear-gradient(100deg, transparent 0 14%, rgba(85, 210, 255, 0.10) 14.5% 15.5%, transparent 16% 44%, rgba(245, 166, 35, 0.08) 44.4% 45.2%, transparent 46% 100%),
        linear-gradient(180deg, rgba(13, 26, 52, 0), rgba(36, 54, 96, 0.16) 50%, rgba(13, 26, 52, 0));
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}
body.home-page.dark #ai-features::after {
    content: "";
    position: absolute;
    inset: 16% 7% 16%;
    display: block;
    background:
        linear-gradient(90deg, transparent, rgba(70, 219, 244, 0.11), transparent),
        repeating-linear-gradient(90deg, transparent 0 56px, rgba(127, 238, 255, 0.055) 57px 58px, transparent 59px 116px);
    transform: skewY(-4deg);
    opacity: 0.58;
    pointer-events: none;
    z-index: 0;
}
body.home-page.dark #core-features::before {
    content: "";
    position: absolute;
    inset: -8% -6% -4%;
    display: block;
    /* core-blueprint-plate */
    background:
        conic-gradient(from 90deg at 78% 34%, transparent 0deg, rgba(80, 205, 255, 0.11) 18deg, transparent 28deg, transparent 132deg, rgba(245, 166, 35, 0.08) 151deg, transparent 164deg, transparent 360deg),
        repeating-linear-gradient(90deg, rgba(100, 210, 255, 0.045) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg, rgba(100, 210, 255, 0.028) 0 1px, transparent 1px 64px),
        linear-gradient(135deg, transparent 0 36%, rgba(89, 200, 255, 0.08) 36.4% 36.9%, transparent 37.4% 100%);
    opacity: 0.72;
    pointer-events: none;
    z-index: 0;
}
body.home-page.dark #core-features::after {
    content: "";
    position: absolute;
    inset: 18% auto auto 7%;
    width: min(520px, 44vw);
    height: min(320px, 34vw);
    display: block;
    border: 1px solid rgba(116, 223, 255, 0.10);
    border-left-color: rgba(245, 166, 35, 0.16);
    border-bottom-color: rgba(116, 223, 255, 0.16);
    background:
        linear-gradient(90deg, rgba(116, 223, 255, 0.10) 0 1px, transparent 1px 100%),
        linear-gradient(0deg, rgba(116, 223, 255, 0.08) 0 1px, transparent 1px 100%);
    background-size: 22% 100%, 100% 25%;
    opacity: 0.48;
    pointer-events: none;
    z-index: 0;
}
body.home-page.dark #core-features .soft-aurora-bg {
    position: absolute;
    inset: 4% -6% 10%;
    display: block;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    opacity: 0.94;
    contain: paint;
    mix-blend-mode: screen;
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 78%, transparent 100%);
}
body.home-page.dark #core-features > .container {
    z-index: 2;
}

#core-features .feature-icon.feature-art-icon::before {
    inset: 10px;
    height: auto;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 62%);
    opacity: 0.72;
    z-index: -1;
}
body.home-page.dark #core-features .soft-aurora-bg canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.98;
}
body.home-page.dark #core-features .soft-aurora-bg::before {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    top: 28%;
    height: 210px;
    background:
        radial-gradient(ellipse 44% 48% at 20% 54%, rgba(75, 132, 255, 0.38), transparent 70%),
        radial-gradient(ellipse 38% 48% at 55% 50%, rgba(225, 0, 255, 0.46), transparent 72%),
        radial-gradient(ellipse 42% 46% at 88% 54%, rgba(84, 139, 255, 0.34), transparent 72%);
    filter: blur(28px) saturate(1.35);
    opacity: 0.78;
    animation: softAuroraWash 18s ease-in-out infinite alternate;
}
body.home-page.dark #core-features .soft-aurora-bg::after {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    top: 36%;
    height: 142px;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(74, 123, 255, 0.10) 8%,
            rgba(90, 151, 255, 0.62) 20%,
            rgba(112, 105, 255, 0.54) 34%,
            rgba(225, 0, 255, 0.74) 54%,
            rgba(255, 98, 244, 0.56) 66%,
            rgba(99, 142, 255, 0.58) 82%,
            transparent 96%,
            transparent 100%);
    clip-path: polygon(0% 47%, 8% 40%, 16% 49%, 24% 58%, 34% 48%, 43% 39%, 52% 47%, 62% 58%, 72% 50%, 82% 40%, 92% 48%, 100% 44%, 100% 62%, 92% 67%, 82% 58%, 72% 67%, 62% 75%, 52% 64%, 43% 56%, 34% 65%, 24% 74%, 16% 63%, 8% 56%, 0% 63%);
    filter: blur(10px) saturate(1.5);
    opacity: 0.82;
    animation: softAuroraMainBand 14s ease-in-out infinite alternate;
}
body.home-page.dark #core-features .soft-aurora-bg__band {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(660px, 58vw);
    height: 148px;
    border-radius: 999px;
    opacity: 0.48;
    transform-origin: 50% 50%;
    background-size: 180% 100%;
    filter: blur(18px) saturate(1.32);
    will-change: transform, opacity, background-position;
}
body.home-page.dark #core-features .soft-aurora-bg__band--cyan {
    top: 45%;
    left: 28%;
    background:
        radial-gradient(ellipse at 34% 48%, rgba(247, 247, 247, 0.22), transparent 46%),
        linear-gradient(90deg, transparent 0%, rgba(62, 143, 255, 0.12) 12%, rgba(88, 145, 255, 0.56) 46%, rgba(130, 174, 255, 0.24) 72%, transparent 100%);
    transform: translate3d(-50%, -50%, 0) rotate(-2deg) scaleX(1.08);
    animation: softAuroraCyan 15s cubic-bezier(0.37, 0, 0.2, 1) infinite alternate;
}
body.home-page.dark #core-features .soft-aurora-bg__band--pink {
    top: 46%;
    left: 54%;
    width: min(580px, 48vw);
    height: 154px;
    /* soft-aurora-react-bits-color2-e100ff */
    background:
        linear-gradient(90deg, transparent 0%, rgba(225, 0, 255, 0.16) 18%, rgba(225, 0, 255, 0.66) 52%, rgba(126, 127, 255, 0.20) 80%, transparent 100%);
    opacity: 0.56;
    transform: translate3d(-50%, -50%, 0) rotate(1deg) scaleX(1.10);
    animation: softAuroraPink 18s ease-in-out infinite alternate;
}
body.home-page.dark #core-features .soft-aurora-bg__band--blue {
    top: 47%;
    left: 78%;
    width: min(620px, 54vw);
    height: 148px;
    background:
        linear-gradient(90deg, transparent 0%, rgba(77, 122, 255, 0.12) 18%, rgba(106, 133, 255, 0.52) 50%, rgba(74, 120, 255, 0.18) 78%, transparent 100%);
    opacity: 0.46;
    transform: translate3d(-50%, -50%, 0) rotate(2deg) scaleX(1.05);
    animation: softAuroraBlue 16s ease-in-out infinite alternate;
}
body.home-page.dark #core-features .soft-aurora-bg.is-soft-aurora-webgl::before,
body.home-page.dark #core-features .soft-aurora-bg.is-soft-aurora-webgl::after,
body.home-page.dark #core-features .soft-aurora-bg.is-soft-aurora-webgl .soft-aurora-bg__band {
    opacity: 0;
    animation: none;
}
body.home-page.dark.bg-motion-managed #core-features:not(.is-bg-active) .soft-aurora-bg,
body.home-page.dark.bg-motion-managed #core-features:not(.is-bg-active) .soft-aurora-bg::before,
body.home-page.dark.bg-motion-managed #core-features:not(.is-bg-active) .soft-aurora-bg::after,
body.home-page.dark.bg-motion-managed #core-features:not(.is-bg-active) .soft-aurora-bg * {
    animation-play-state: paused !important;
    will-change: auto;
}
@keyframes softAuroraWash {
    0% {
        transform: translate3d(-2%, -2%, 0) scaleX(0.98);
        opacity: 0.54;
    }
    100% {
        transform: translate3d(2%, 1.5%, 0) scaleX(1.04);
        opacity: 0.72;
    }
}
@keyframes softAuroraCyan {
    0% {
        transform: translate3d(-54%, -52%, 0) rotate(-3deg) scaleX(1.02);
        background-position: 0% 50%;
        opacity: 0.34;
    }
    100% {
        transform: translate3d(-46%, -47%, 0) rotate(2deg) scaleX(1.12);
        background-position: 100% 50%;
        opacity: 0.50;
    }
}
@keyframes softAuroraMainBand {
    0% {
        transform: translate3d(-3%, -2%, 0) scaleX(1);
        opacity: 0.62;
        background-position: 0% 50%;
    }
    100% {
        transform: translate3d(3%, 2%, 0) scaleX(1.04);
        opacity: 0.84;
        background-position: 100% 50%;
    }
}
@keyframes softAuroraPink {
    0% {
        transform: translate3d(-45%, -51%, 0) rotate(-1deg) scaleX(1.04);
        background-position: 100% 50%;
        opacity: 0.36;
    }
    100% {
        transform: translate3d(-55%, -48%, 0) rotate(2deg) scaleX(1.14);
        background-position: 0% 50%;
        opacity: 0.58;
    }
}
@keyframes softAuroraBlue {
    0% {
        transform: translate3d(-53%, -50%, 0) rotate(2deg) scaleX(1.02);
        background-position: 18% 50%;
        opacity: 0.30;
    }
    100% {
        transform: translate3d(-47%, -49%, 0) rotate(-2deg) scaleX(1.10);
        background-position: 82% 50%;
        opacity: 0.48;
    }
}
body.home-page.dark .about::before {
    content: "";
    position: absolute;
    inset: -10% 0 -12%;
    /* about-shanghai-financial-center-bg */
    background:
        linear-gradient(90deg, rgba(5, 11, 24, 0.84) 0%, rgba(5, 11, 24, 0.46) 46%, rgba(5, 11, 24, 0.74) 100%),
        linear-gradient(180deg, rgba(5, 11, 24, 0.52) 0%, rgba(5, 11, 24, 0.18) 42%, rgba(5, 11, 24, 0.82) 100%),
        image-set(
            url("../images/web/about-shanghai-financial-center.webp") type("image/webp"),
            url("../images/web/about-shanghai-financial-center.png") type("image/png")
        );
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center, center, center 48%;
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%);
    opacity: 0.92;
    pointer-events: none;
    z-index: 0;
}
body.home-page.dark .about::after {
    content: "";
    position: absolute;
    inset: 0 -6%;
    background:
        radial-gradient(circle at 64% 38%, rgba(90, 220, 255, 0.18), transparent 26%),
        radial-gradient(circle at 34% 72%, rgba(245, 166, 35, 0.14), transparent 32%),
        linear-gradient(90deg, transparent 0 10%, rgba(245, 166, 35, 0.10) 28%, rgba(80, 210, 255, 0.12) 58%, transparent 92%);
    opacity: 0.54;
    pointer-events: none;
    z-index: 0;
}
body.home-page.dark .footer::after {
    content: "";
    position: absolute;
    inset: auto 8% 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(126, 225, 255, 0.22), rgba(245, 166, 35, 0.18), transparent);
    opacity: 0.52;
    pointer-events: none;
    z-index: 0;
}
body.home-page.dark :is(.ai-experts-section, #ai-features, #core-features, .about, .footer)::before,
body.home-page.dark :is(.ai-experts-section, #ai-features, #core-features, .about, .footer)::after {
    will-change: transform, opacity, background-position;
}
body.home-page.dark.bg-motion-managed :is(.ai-experts-section, #ai-features, #core-features, .about, .footer):not(.is-bg-active)::before,
body.home-page.dark.bg-motion-managed :is(.ai-experts-section, #ai-features, #core-features, .about, .footer):not(.is-bg-active)::after {
    animation-play-state: paused !important;
    will-change: auto;
}
body.home-page.dark.bg-motion-managed :is(.ai-experts-section, #ai-features, #core-features, .about, .footer).is-bg-active::before,
body.home-page.dark.bg-motion-managed :is(.ai-experts-section, #ai-features, #core-features, .about, .footer).is-bg-active::after {
    animation-play-state: running;
    will-change: transform, opacity, background-position;
}
@supports (content-visibility: auto) {
    body.home-page.performance-budget :is(.auto-cost-section, .ai-experts-section, #ai-features, #core-features, .about) {
        content-visibility: auto;
        contain-intrinsic-size: auto 860px;
    }
    body.home-page.performance-budget .ai-experts-section {
        contain-intrinsic-size: auto 780px;
    }
    body.home-page.performance-budget #ai-features,
    body.home-page.performance-budget #core-features {
        contain-intrinsic-size: auto 820px;
    }
    body.home-page.performance-budget .about {
        contain-intrinsic-size: auto 720px;
    }
}
body.home-page.dark .ai-experts-section::before {
    background-size: auto, 146px 146px, 128px 128px;
    animation: pandaExpertFieldDrift 22s ease-in-out infinite alternate;
}
body.home-page.dark .ai-experts-section::after {
    background-size: auto, 188px 100%;
    animation: pandaExpertSignalSweep 16s cubic-bezier(0.37, 0, 0.2, 1) infinite;
}
body.home-page.dark #ai-features::before {
    background-size: 100% 42px, auto, auto;
    animation: pandaDataRibbonFlow 18s linear infinite;
}
body.home-page.dark #ai-features::after {
    animation: pandaDataScanSweep 12s ease-in-out infinite alternate;
}
body.home-page.dark #core-features::before {
    background-size: auto, 64px 64px, 64px 64px, auto;
    animation: pandaBlueprintFieldPulse 20s ease-in-out infinite alternate;
}
body.home-page.dark #core-features::after {
    animation: pandaBlueprintPlateScan 14s ease-in-out infinite;
}
body.home-page.dark .about::before {
    animation: pandaAboutSkylineDrift 24s ease-in-out infinite alternate;
}
body.home-page.dark .about::after {
    animation: pandaAboutCityLightPulse 13s ease-in-out infinite;
}
body.home-page.dark .footer::after {
    animation: pandaFooterLineSweep 5.8s ease-in-out infinite;
}
@keyframes pandaExpertFieldDrift {
    0% {
        background-position: 0 0, 0 0, 0 0;
        transform: translate3d(-1.5%, -1%, 0);
        opacity: 0.64;
    }
    100% {
        background-position: 0 0, 72px -44px, 64px 0;
        transform: translate3d(1.5%, 1%, 0);
        opacity: 0.84;
    }
}
@keyframes pandaExpertSignalSweep {
    0%, 100% {
        transform: translate3d(-5%, 0, 0);
        opacity: 0.42;
    }
    50% {
        transform: translate3d(5%, 0, 0);
        opacity: 0.72;
    }
}
@keyframes pandaDataRibbonFlow {
    0% {
        background-position: 0 0, 0 0, 0 0;
        transform: translate3d(-1%, 0, 0);
        opacity: 0.58;
    }
    100% {
        background-position: 0 42px, 120px 0, 0 0;
        transform: translate3d(1%, 0, 0);
        opacity: 0.76;
    }
}
@keyframes pandaDataScanSweep {
    0% {
        transform: translate3d(-7%, 0, 0) skewY(-4deg);
        opacity: 0.36;
    }
    55% {
        opacity: 0.70;
    }
    100% {
        transform: translate3d(7%, 0, 0) skewY(-4deg);
        opacity: 0.52;
    }
}
@keyframes pandaBlueprintFieldPulse {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0;
        transform: translate3d(0, -1%, 0);
        opacity: 0.56;
    }
    100% {
        background-position: 0 0, 64px 0, 0 64px, 0 0;
        transform: translate3d(0, 1%, 0);
        opacity: 0.80;
    }
}
@keyframes pandaBlueprintPlateScan {
    0%, 100% {
        transform: translate3d(-3%, 0, 0);
        opacity: 0.34;
    }
    50% {
        transform: translate3d(3%, 0, 0);
        opacity: 0.58;
    }
}
@keyframes pandaAboutSkylineDrift {
    0% {
        background-position: center, center, center 46%;
        transform: translate3d(-1.2%, 0, 0) scale(1.015);
        opacity: 0.86;
    }
    100% {
        background-position: center, center, center 52%;
        transform: translate3d(1.2%, 0, 0) scale(1.035);
        opacity: 0.96;
    }
}
@keyframes pandaAboutCityLightPulse {
    0%, 100% {
        transform: translate3d(-2%, 0, 0);
        opacity: 0.38;
    }
    50% {
        transform: translate3d(2%, 0, 0);
        opacity: 0.62;
    }
}
@keyframes pandaFooterLineSweep {
    0%, 100% {
        transform: scaleX(0.72);
        opacity: 0.30;
    }
    50% {
        transform: scaleX(1);
        opacity: 0.68;
    }
}
@media (max-width: 768px) {
    body.home-page.dark :is(.ai-experts-section, #ai-features, #core-features, .about, .footer)::before,
    body.home-page.dark :is(.ai-experts-section, #ai-features, #core-features, .about, .footer)::after {
        opacity: 0.5;
        animation-duration: 28s;
    }
    body.home-page.dark #core-features::after {
        display: none;
    }
}
/* 暗色导航栏：外层必须保持透明，避免滚动后读成整条标题栏 */
body.dark .navbar {
    background: transparent;
    box-shadow: none;
    border-bottom-color: transparent;
}
body.dark .navbar.scrolled {
    background: transparent;
    box-shadow: none;
}
body.dark .nav-logo { color: #eaeaf2; }
body.dark .nav-links a { color: rgba(255,255,255,0.6); background: transparent; border: none; }
body.dark .nav-links a:hover { color: #fff; background: rgba(255,255,255,0.1); }
body.dark .nav-links a.active {
    color: #fff;
    background: rgba(74, 144, 217, 0.22);
    border-color: rgba(74, 144, 217, 0.35);
    box-shadow: 0 0 12px rgba(74, 144, 217, 0.1);
}
body.dark .nav-toggle {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark .nav-toggle span { background: #aaaacc; }
/* 暗色Hero —— 保留轻量动态背景，避免首屏像静态海报 */
body.dark .hero-bg::before {
    background:
        radial-gradient(ellipse 56% 46% at 74% 28%, rgba(90, 208, 255, 0.12) 0%, transparent 62%),
        radial-gradient(ellipse 42% 34% at 34% 78%, rgba(246, 190, 96, 0.08) 0%, transparent 68%);
    opacity: 0.72;
    mix-blend-mode: screen;
    will-change: transform, opacity;
    animation: pandaHeroMistDrift 18s ease-in-out infinite alternate;
}
body.dark .hero-bg::after {
    background:
        linear-gradient(100deg, transparent 0%, rgba(91, 214, 255, 0.06) 36%, rgba(255, 201, 102, 0.045) 48%, transparent 62%),
        radial-gradient(ellipse 30% 72% at 82% 50%, rgba(89, 205, 255, 0.12) 0%, transparent 64%);
    opacity: 0.7;
    mix-blend-mode: screen;
    will-change: transform, opacity;
    animation: pandaHeroAmbientSweep 16s ease-in-out infinite alternate;
}
body.dark .hero-bg .grid-overlay {
    animation: pandaHeroGridDrift 28s linear infinite;
}
@keyframes pandaHeroMistDrift {
    0% { transform: translate3d(-14px, 10px, 0) scale(1); opacity: 0.58; }
    50% { transform: translate3d(10px, -10px, 0) scale(1.03); opacity: 0.76; }
    100% { transform: translate3d(20px, 8px, 0) scale(1.01); opacity: 0.64; }
}
@keyframes pandaHeroAmbientSweep {
    0% { transform: translate3d(-5%, 0, 0); opacity: 0.42; }
    50% { transform: translate3d(3%, -2%, 0); opacity: 0.72; }
    100% { transform: translate3d(7%, 1%, 0); opacity: 0.56; }
}
@keyframes pandaHeroGridDrift {
    0% { background-position: 0 0, 0 0; opacity: 0.72; }
    100% { background-position: 86px 86px, 86px 86px; opacity: 0.82; }
}
/* 暗色功能卡片区 */
body.dark .features { background: transparent; }
body.dark .features-alt { background: transparent; }
body.dark .section-title { color: #eaeaf2; }
body.dark .section-desc { color: var(--text-muted); }
body.dark .section-badge {
    background: rgba(74, 144, 217, 0.12);
    color: var(--brand-primary-light);
    border-color: rgba(74, 144, 217, 0.15);
}
body.dark .feature-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(28px) saturate(200%) brightness(1.08);
    -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.2),
        0 6px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 1px rgba(255, 255, 255, 0.22),
        inset 0 -1px 1px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
body.dark .features-alt .feature-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(28px) saturate(200%) brightness(1.08);
    -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.08);
    border-color: rgba(255, 255, 255, 0.15);
}
body.dark .feature-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.3),
        0 10px 24px rgba(0, 0, 0, 0.16),
        0 0 32px rgba(74, 144, 217, 0.18),
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        inset 0 -1px 1px rgba(0, 0, 0, 0.08);
    border-color: rgba(74, 144, 217, 0.3);
}
body.dark .feature-card h3 { color: #eaeaf2; }
body.dark .feature-card:hover h3 { color: var(--brand-primary-light); }
body.dark .feature-card p { color: var(--text-muted); }
body.dark .feature-card.featured {
    border-color: rgba(245, 166, 35, 0.32);
    background: linear-gradient(145deg, rgba(245, 166, 35, 0.14), rgba(245, 166, 35, 0.04), rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(28px) saturate(220%) brightness(1.08);
    -webkit-backdrop-filter: blur(28px) saturate(220%) brightness(1.08);
}
body.dark .feature-link-hint { color: var(--brand-primary-light); }

/* 暗色关于区 */
body.dark .about { background: transparent; }
body.dark .about-content {
    background: rgba(7, 14, 30, 0.70);
    border-color: rgba(126, 225, 255, 0.16);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}
body.dark .about-content p { color: rgba(232, 240, 255, 0.78); }
body.dark .contact-info {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(126, 225, 255, 0.13);
}
body.dark .contact-info p { color: rgba(232, 240, 255, 0.72); }
body.home-page.dark .about-content {
    max-width: 760px;
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 28px 30px 30px;
    position: relative;
    text-shadow:
        0 2px 18px rgba(0, 0, 0, 0.72),
        0 0 28px rgba(64, 196, 255, 0.14);
}
body.home-page.dark .about-content::before,
body.home-page.dark .about-content::after {
    content: "";
    display: block;
    width: min(460px, 68vw);
    height: 1px;
    margin: 0 auto 26px;
    background: linear-gradient(90deg, transparent, rgba(126, 225, 255, 0.42), rgba(245, 166, 35, 0.28), transparent);
    opacity: 0.82;
    pointer-events: none;
}
body.home-page.dark .about-content::after {
    margin: 26px auto 0;
    opacity: 0.58;
}
body.home-page.dark .about-content p {
    color: rgba(242, 248, 255, 0.88);
    font-size: 16px;
    line-height: 1.9;
}
body.home-page.dark .about-content > p:first-child {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(248, 252, 255, 0.94);
    font-size: 22px;
    line-height: 1.68;
    font-weight: 700;
}
body.home-page.dark .about-content > p:nth-child(2) {
    color: rgba(226, 238, 255, 0.78);
    margin-bottom: 0;
}
body.home-page.dark .contact-info {
    margin-top: 30px;
    padding: 18px 0 0;
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
}
body.home-page.dark .contact-info p {
    color: rgba(235, 244, 255, 0.82);
}
body.home-page.dark .wechat-contact {
    margin-top: 0;
    gap: 12px;
}
body.home-page.dark .wechat-qr {
    background: #fff;
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.32);
}
body.home-page.dark .wechat-label {
    color: rgba(235, 244, 255, 0.82) !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.62);
}
/* 暗色星露谷对话窗：增加微光效果，保持暖色调 */
body.dark .sv-dialog {
    box-shadow:
        0 4px 0 rgba(91, 58, 26, 0.25),
        0 6px 16px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(253, 245, 230, 0.08);
}
/* 暗色页脚 */
body.dark .footer { background: transparent; }
/* 暗色模式主题切换 —— 高可见度，确保在深色玻璃导航栏上清晰可辨 */
body.dark .theme-toggle {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.25),
        0 1px 4px rgba(0, 0, 0, 0.15),
        0 0 6px rgba(100, 140, 220, 0.12);
}

@media (max-width: 1180px) {
    .hero.hero-control-room {
        padding: 104px 24px 74px;
    }
    .auto-cost-section {
        padding: 54px 24px 96px;
    }
    .auto-cost-prism-bg {
        inset: -4% 28% -6% 2%;
        opacity: 0.34;
    }
    .control-hero-shell {
        max-width: 820px;
        grid-template-columns: 1fr;
        gap: 38px;
    }
    .control-copy {
        max-width: 700px;
    }
    .hero-control-room .control-title {
        font-size: 60px;
    }
    .auto-cost-section .control-title {
        font-size: 56px;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .hero {
        min-height: 88vh;
        min-height: 88svh;
        align-items: center;
        padding: 92px 54px 58px;
    }
    .hero-content {
        max-width: 620px;
        margin-top: 0;
    }
    .hero-kicker {
        margin-bottom: 14px;
    }
    .hero-logo {
        width: 58px;
        height: 58px;
        margin-bottom: 16px;
    }
    .hero h1 {
        font-size: clamp(52px, 5.8vw, 64px);
        line-height: 1;
        margin-bottom: 16px;
    }
    .hero-title-panda {
        left: clamp(172px, 45%, 292px);
        top: -62px;
        width: 158px;
    }
    .hero-subtitle {
        max-width: 560px;
        font-size: 20px;
        line-height: 1.45;
    }
    .hero-stats {
        gap: 10px;
        margin-top: 26px;
    }
    .stat-item {
        min-width: 138px;
        padding: 12px 14px 11px;
    }
    .stat-num {
        font-size: 30px;
    }
}

/* 暗色响应式 */
@media (max-width: 768px) {
    body.dark .nav-links {
        background: #15152a;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    }
}

/* ============================================================
   响应式设计
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --radius-md: 14px;
        --radius-lg: 18px;
    }

    .container { padding: 0 20px; }
    .nav-container {
        padding: 0 20px;
        height: 62px;
        border-radius: 999px;
        background: rgba(7, 14, 30, 0.34);
        backdrop-filter: blur(12px) saturate(150%);
        -webkit-backdrop-filter: blur(12px) saturate(150%);
        border: 1px solid rgba(147, 212, 255, 0.13);
        box-shadow:
            0 18px 42px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    .nav-logo { font-size: 16px; }
    .nav-logo img { width: 34px; height: 34px; }
    .member-nav-button {
        min-width: 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 14px;
        flex: 0 0 40px;
    }
    .member-nav-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .member-nav-dot {
        width: 10px;
        height: 10px;
        flex-basis: 10px;
    }
    .nav-links {
        display: none;
        position: fixed;
        top: 62px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 40px 28px;
        gap: 4px;
        z-index: 999;
        min-height: auto;
        margin: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .nav-links.active {
        display: flex;
        animation: menuSlideIn 0.3s var(--ease-out);
    }
    @keyframes menuSlideIn {
        from { opacity: 0; transform: translateY(-10px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .nav-links a {
        font-size: 16px;
        padding: 14px 20px;
        border-radius: 999px;
        color: var(--text-secondary);
        background: transparent;
        border: none;
    }
    .nav-links a:hover {
        color: var(--brand-primary);
        background: rgba(74, 144, 217, 0.06);
    }
    .nav-toggle { display: flex; flex-direction: column; justify-content: center; }
    .member-modal {
        padding: 16px;
        align-items: flex-end;
    }
    .member-panel {
        width: 100%;
        max-height: calc(100vh - 32px);
        border-radius: 18px 18px 10px 10px;
    }
    .member-panel__header,
    .member-panel__body {
        padding-left: 22px;
        padding-right: 22px;
    }
    .member-benefit-grid,
    .member-actions,
    .member-registration-grid {
        grid-template-columns: 1fr;
    }
    .member-code-row {
        grid-template-columns: 1fr;
    }

    /* 移动端Hero */
    .hero {
        align-items: flex-start;
        min-height: 88vh;
        min-height: 88svh;
        padding: 96px 18px 66px;
    }
    .hero-bg {
        background-position: 58% center;
    }
    .hero::before {
        opacity: 0.52;
    }
    .hero-content {
        max-width: 100%;
        margin-top: 0;
    }
    .hero-kicker {
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
        font-size: 10px;
    }
    .hero-kicker span {
        min-height: 24px;
        padding: 0 9px;
    }
    .hero h1 { font-size: 40px; line-height: 1.05; letter-spacing: 0; }
    .hero-title-panda {
        left: min(164px, 44vw);
        top: -44px;
        width: 120px;
    }
    .hero-subtitle { max-width: 96%; font-size: 16px; }
    .hero-manifesto {
        margin-top: 16px;
        max-width: 92%;
        font-size: 15px;
        line-height: 1.5;
        letter-spacing: 0.02em;
    }
    .hero-desc { font-size: 12px; margin-top: 16px; max-width: 92%; }
    .hero-logo { width: 58px; height: 58px; margin-bottom: 18px; }
    .mascot-container {
        right: 16px;
        left: auto;
        transform: none;
        bottom: 14px;
    }
    .hero-mascot { width: 86px; opacity: 0.74; }
    .sv-dialog {
        max-width: 180px;
        margin-bottom: 26px;
        display: none; /* 移动端默认隐藏 */
    }
    .sv-dialog.show { display: block; }
    .sv-text { font-size: 11.5px; }
    /* 大屏移动端显示对话窗 */
    @media (max-width: 768px) and (min-height: 700px) {
        .sv-dialog { display: block; }
    }
    .hero-stats { gap: 8px; margin-top: 24px; }
    .stat-item { min-width: 126px; padding: 11px 12px 10px; }
    .stat-num { font-size: 24px; }
    .stat-label { font-size: 10px; margin-top: 6px; }
    .stat-item:not(:last-child)::after { display: none; }

    .hero.hero-control-room {
        padding: 92px 16px 58px;
    }
    .auto-cost-section {
        padding: 48px 16px 76px;
    }
    .auto-cost-prism-bg {
        inset: 0 10% 8% 0;
        opacity: 0.22;
    }
    .control-hero-shell {
        gap: 28px;
    }
    .control-badge {
        min-height: 30px;
        padding: 5px 10px;
        font-size: 12px;
    }
    .hero-control-room .control-title {
        margin: 20px 0 14px;
        font-size: 42px;
        line-height: 1.08;
    }
    .auto-cost-section .control-title {
        margin: 20px 0 14px;
        font-size: 38px;
        line-height: 1.1;
    }
    .control-desc {
        font-size: 15px;
        line-height: 1.8;
    }
    .control-actions {
        gap: 10px;
        margin-top: 22px;
    }
    .control-btn {
        flex: 1 1 138px;
        min-height: 42px;
        padding: 0 12px;
        font-size: 13px;
    }
    .control-dashboard {
        padding: 12px;
    }
    .control-window-bar {
        grid-template-columns: auto 1fr auto;
        min-height: 40px;
        margin: -12px -12px 12px;
        padding: 0 10px;
    }
    .control-window-dots {
        gap: 6px;
    }
    .control-window-dots span {
        width: 8px;
        height: 8px;
    }
    .control-window-title {
        font-size: 11px;
    }
    .control-mascot {
        width: 44px;
        margin-top: 0;
    }
    .control-dashboard-body {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .control-sheet-row {
        grid-template-columns: 38px minmax(88px, 1fr) 44px 62px;
        min-height: 34px;
        font-size: 11px;
    }
    .control-sheet-row span {
        padding: 0 6px;
    }
    .control-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .control-metric {
        min-height: 72px;
        padding: 10px;
    }
    .control-metric span {
        font-size: 11px;
    }
    .control-metric strong {
        font-size: 24px;
    }
    .control-log {
        min-height: auto;
        padding: 14px;
        gap: 10px;
    }
    .control-log div {
        font-size: 12px;
    }
    .control-pipeline {
        grid-template-columns: 1fr;
        gap: 9px;
    }
    .control-pipe-step {
        min-height: 64px;
    }

    /* 功能卡片 */
    .features { padding: 72px 0; }
    .features-alt { padding: 72px 0; }
    .section-title { font-size: 28px; }
    .section-desc { font-size: 14.5px; margin-bottom: 40px; }
    .features-grid, .features-grid.grid-2, .features-grid.grid-3 { grid-template-columns: 1fr; gap: 16px; }
    .feature-card { padding: 26px 22px; border-radius: 16px; }
    .feature-icon { width: 54px; height: 54px; border-radius: 14px; }

    /* 下载区 */
    .download { padding: 72px 0; }
    .download-card { padding: 36px 24px; border-radius: var(--radius-lg); }

    /* 关于/页脚 */
    .about { padding: 64px 0; }
    .about-content { padding: 28px 22px; border-radius: 18px; }
    .contact-info { padding: 22px 18px; }
    .footer { padding: 28px 0; }
    .footer-content { flex-direction: column; gap: 14px; text-align: center; }

    /* 禁用复杂动画 */
    .hero-logo, .hero-mascot { animation: none !important; }
    .hero-bg::after { animation: none !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .container { max-width: 900px; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid.grid-2 { grid-template-columns: repeat(2, 1fr); }
    .features-grid.grid-3 { grid-template-columns: repeat(2, 1fr); }
    .hero-manifesto { font-size: 17px; }
    .mascot-container { right: 36px; }
    .hero-mascot { width: 104px; }
}

@media (prefers-reduced-motion: reduce) {
    .auto-cost-prism-bg {
        opacity: 0.28;
        mix-blend-mode: screen;
    }
    .auto-cost-prism-bg canvas {
        display: none;
    }
}

/* 大屏幕适配 */
@media (min-width: 1400px) {
    .container { max-width: 1260px; }
    .features-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   无障碍：减少动画偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        transition: none !important;
        animation: none !important;
    }

    .navbar { backdrop-filter: none; }
    .hero-bg::after { animation: none !important; }

    /* 直接显示卡片，不延迟 */
    .feature-card {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   滚动渐显动画类
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
/* 交错动画 */
.reveal.stagger-1 { transition-delay: 0.05s; }
.reveal.stagger-2 { transition-delay: 0.1s; }
.reveal.stagger-3 { transition-delay: 0.15s; }
.reveal.stagger-4 { transition-delay: 0.2s; }
.reveal.stagger-5 { transition-delay: 0.25s; }
.reveal.stagger-6 { transition-delay: 0.3s; }
.reveal.stagger-7 { transition-delay: 0.35s; }
.reveal.stagger-8 { transition-delay: 0.4s; }

/* 数字计数动画 */
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.count-animated {
    animation: countUp 0.5s var(--ease-out) forwards;
}