/* ============================================================
   小熊猫造价智控 - 官网样式 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%);
}

/* 首页功能星环：19 项功能与 5 位专家沿圆周慢速运行，功能名称保持正向可读 */
.hero-function-orbit {
    --orbit-height-limit: 128vh;
    --orbit-height-limit: 128svh;
    --orbit-visual-scale: 0.72;
    --orbit-width-fit: max(62.5vw, clamp(480px, calc(100vw - 380px), 1200px));
    --orbit-size: min(var(--orbit-width-fit), var(--orbit-height-limit));
    --orbit-radius: calc(var(--orbit-size) * 0.46);
    --orbit-right-guard: max(clamp(110px, calc(var(--orbit-size) * 0.25 - 70px), 230px), calc(var(--orbit-size) * 0.191667));
    --orbit-node-half-width: max(clamp(48px, calc(var(--orbit-size) * 0.065), 70px), calc(var(--orbit-size) * 0.058333));
    --orbit-node-half-height: max(clamp(32px, calc(var(--orbit-size) * 0.05), 54px), calc(var(--orbit-size) * 0.045));
    --orbit-wide-half-width: max(clamp(65px, calc(var(--orbit-size) * 0.0835), 90px), calc(var(--orbit-size) * 0.075));
    --orbit-icon-size: max(clamp(40px, calc(var(--orbit-size) * 0.065), 68px), calc(var(--orbit-size) * 0.056667));
    --orbit-art-size: max(clamp(31px, calc(var(--orbit-size) * 0.05), 52px), calc(var(--orbit-size) * 0.043333));
    --orbit-core-size: max(clamp(190px, calc(var(--orbit-size) * 0.208), 224px), calc(var(--orbit-size) * 0.186667));
    --orbit-core-number-size: max(clamp(50px, calc(var(--orbit-size) * 0.054), 58px), calc(var(--orbit-size) * 0.048333));
    position: absolute;
    left: calc(100% - var(--orbit-radius) - var(--orbit-right-guard));
    top: 52%;
    z-index: 2;
    width: var(--orbit-size);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(var(--orbit-visual-scale));
    pointer-events: none;
    opacity: 0.96;
    filter: none;
}

/* orbit-edge-cross: only the lower orbit edge extends beyond the hero */
@media (min-width: 769px) {
    body.home-page.orbit-edge-cross .hero {
        z-index: 0;
        overflow: visible;
    }
    body.home-page.orbit-edge-cross .auto-cost-section {
        z-index: 1;
        isolation: isolate;
    }
    body.home-page.orbit-edge-cross .hero-function-orbit {
        top: 57%;
    }
}
.hero-function-orbit::before,
.hero-function-orbit::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.hero-function-orbit::before {
    inset: 5.2%;
    border: 1px solid rgba(102, 225, 255, 0.18);
    box-shadow:
        0 0 0 1px rgba(28, 117, 175, 0.08),
        inset 0 0 54px rgba(30, 204, 220, 0.07),
        0 0 82px rgba(63, 181, 255, 0.08);
}
.hero-function-orbit::after {
    inset: 18%;
    border: 1px dashed rgba(122, 221, 255, 0.13);
    background:
        radial-gradient(circle at 50% 50%, rgba(4, 16, 32, 0.18) 0 44%, transparent 72%),
        conic-gradient(from 24deg, transparent 0 18%, rgba(54, 220, 204, 0.08) 24%, transparent 31% 66%, rgba(74, 144, 217, 0.09) 74%, transparent 82%);
}
.hero-function-orbit__track {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(94, 215, 255, 0.22);
    background:
        conic-gradient(from 0deg, rgba(53, 226, 197, 0.22), transparent 8% 23%, rgba(72, 170, 255, 0.2) 31%, transparent 39% 56%, rgba(244, 173, 61, 0.17) 64%, transparent 72% 90%, rgba(53, 226, 197, 0.22)),
        radial-gradient(circle, transparent 67%, rgba(9, 37, 66, 0.18) 68% 69%, transparent 70%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.035),
        0 0 38px rgba(57, 206, 239, 0.1);
    animation: heroFunctionOrbitSpin 82s linear infinite;
    will-change: transform;
}
.hero-function-orbit__track::before,
.hero-function-orbit__track::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.hero-function-orbit__track::before {
    width: 72%;
    height: 72%;
    border: 1px solid rgba(83, 174, 236, 0.12);
}
.hero-function-orbit__track::after {
    width: 89%;
    height: 89%;
    border: 1px dotted rgba(100, 228, 207, 0.16);
}
.hero-function-node {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--orbit-node-half-width) + var(--orbit-node-half-width));
    height: calc(var(--orbit-node-half-height) + var(--orbit-node-half-height));
    margin: calc(0px - var(--orbit-node-half-height)) 0 0 calc(0px - var(--orbit-node-half-width));
    color: rgba(238, 249, 255, 0.94);
    text-decoration: none;
    pointer-events: auto;
    transform: rotate(var(--angle)) translateX(var(--orbit-radius)) rotate(calc(var(--angle) * -1));
    transform-origin: 50% 50%;
}
.hero-function-node--wide {
    width: calc(var(--orbit-wide-half-width) + var(--orbit-wide-half-width));
    margin-left: calc(0px - var(--orbit-wide-half-width));
}
.hero-function-node__counter {
    display: block;
    width: 100%;
    height: 100%;
    animation: heroFunctionOrbitCounterSpin 82s linear infinite;
    will-change: transform;
}
.hero-function-node__card {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform 0.28s ease;
}
.hero-function-node__icon {
    display: grid;
    width: var(--orbit-icon-size);
    height: var(--orbit-icon-size);
    flex: 0 0 var(--orbit-icon-size);
    place-items: center;
    border: 1px solid rgba(var(--node-accent), 0.44);
    border-radius: 22px;
    background:
        radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.18), transparent 42%),
        linear-gradient(145deg, rgba(var(--node-accent), 0.25), rgba(5, 14, 30, 0.88));
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.24),
        0 0 18px rgba(var(--node-accent), 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.hero-function-node__icon picture,
.hero-function-node__icon img {
    display: block;
    width: var(--orbit-art-size);
    height: var(--orbit-art-size);
}
.hero-function-node__icon img {
    object-fit: contain;
    filter: none;
}
.hero-function-node--expert .hero-function-node__icon {
    overflow: hidden;
    border-width: 2px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.2), transparent 58%),
        linear-gradient(145deg, rgba(var(--node-accent), 0.42), rgba(5, 14, 30, 0.88));
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.3),
        0 0 0 2px rgba(var(--node-accent), 0.12),
        0 0 24px rgba(var(--node-accent), 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.hero-function-node--expert .hero-function-node__icon img {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    filter: none;
}
.hero-function-node--expert .hero-function-node__card > span:last-child {
    border-color: rgba(var(--node-accent), 0.58);
    color: #fff;
    background: rgba(3, 11, 24, 0.93);
    font-weight: 900;
    box-shadow: 0 6px 18px rgba(var(--node-accent), 0.22);
}
.hero-function-node__card > span:last-child {
    max-width: 100%;
    padding: 4px 9px 5px;
    border: 1px solid rgba(var(--node-accent), 0.38);
    border-radius: 999px;
    color: #fff;
    background: rgba(2, 10, 23, 0.94);
    box-shadow:
        inset 0 1px 0 rgba(226, 248, 255, 0.1),
        0 6px 16px rgba(0, 0, 0, 0.32);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.18;
    letter-spacing: 0.015em;
    text-align: center;
    text-wrap: balance;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.92),
        0 0 7px rgba(151, 225, 255, 0.18);
}
.hero-function-node:hover .hero-function-node__card,
.hero-function-node:focus-visible .hero-function-node__card {
    transform: translateY(-3px) scale(1.06);
}
.hero-function-node:hover .hero-function-node__icon,
.hero-function-node:focus-visible .hero-function-node__icon {
    transform: translateY(-1px) scale(1.06);
    border-color: rgba(var(--node-accent), 0.82);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.3),
        0 0 26px rgba(var(--node-accent), 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.hero-function-node:hover .hero-function-node__card > span:last-child,
.hero-function-node:focus-visible .hero-function-node__card > span:last-child {
    border-color: rgba(var(--node-accent), 0.68);
    background: rgba(3, 15, 31, 0.97);
}
.hero-function-node:focus-visible {
    outline: none;
}
.hero-function-orbit:hover .hero-function-orbit__track,
.hero-function-orbit:hover .hero-function-node__counter,
.hero-function-orbit:focus-within .hero-function-orbit__track,
.hero-function-orbit:focus-within .hero-function-node__counter {
    animation-play-state: paused;
}
.hero-function-orbit__core {
    --core-cyan: 103, 232, 249;
    --core-blue: 96, 165, 250;
    --core-amber: 255, 184, 77;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: var(--orbit-core-size);
    height: var(--orbit-core-size);
    isolation: isolate;
    border: 0;
    border-radius: 50%;
    color: rgba(232, 250, 255, 0.94);
    background: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%);
    pointer-events: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.hero-function-orbit__core-ticks,
.hero-function-orbit__core-arcs {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.hero-function-orbit__core-ticks {
    inset: 0;
    background: repeating-conic-gradient(
        from -3deg,
        rgba(var(--core-cyan), 0.72) 0 1.4deg,
        transparent 1.4deg 15deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
    opacity: 0.72;
    animation: heroFunctionCoreTicksSpin 48s linear infinite reverse;
    will-change: transform;
}
.hero-function-orbit__core-arcs {
    inset: 7%;
    background: conic-gradient(
        from -28deg,
        rgba(var(--core-cyan), 0.96) 0 19%,
        transparent 19% 54%,
        rgba(var(--core-amber), 0.92) 54% 65%,
        transparent 65% 100%
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    filter:
        drop-shadow(0 0 7px rgba(var(--core-cyan), 0.34))
        drop-shadow(0 0 5px rgba(var(--core-amber), 0.22));
}
.hero-function-orbit__core-plate {
    position: absolute;
    inset: 14%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        rgba(var(--core-cyan), 0.58),
        rgba(var(--core-blue), 0.16) 45%,
        rgba(var(--core-amber), 0.4)
    );
    filter: drop-shadow(0 12px 24px rgba(0, 7, 20, 0.42));
}
.hero-function-orbit__core-plate::before {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    background:
        linear-gradient(rgba(120, 220, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 220, 255, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 34% 18%, rgba(var(--core-cyan), 0.18), transparent 42%),
        linear-gradient(150deg, rgba(7, 25, 44, 0.94), rgba(2, 11, 24, 0.84));
    background-size: 12px 12px, 12px 12px, auto, auto;
}
.hero-function-orbit__core-plate::after {
    content: '';
    position: absolute;
    inset: 8%;
    z-index: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 25%, rgba(var(--core-amber), 0.2) 0 3.5%, rgba(2, 11, 24, 0.48) 4.5% 23%, transparent 24%),
        radial-gradient(circle at 50% 75%, rgba(var(--core-cyan), 0.2) 0 3.5%, rgba(var(--core-cyan), 0.09) 4.5% 23%, transparent 24%),
        linear-gradient(90deg, rgba(var(--core-cyan), 0.1) 0 50%, rgba(var(--core-amber), 0.065) 50% 100%);
    box-shadow: inset 0 0 0 1px rgba(var(--core-cyan), 0.08);
    opacity: 0.68;
    transform: rotate(-18deg);
}
.hero-function-orbit__core-plate > * {
    position: relative;
    z-index: 1;
}
.hero-function-orbit__core-kicker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(165, 241, 249, 0.82);
    font-size: clamp(7px, calc(var(--orbit-core-size) * 0.041), 9px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.15em;
    white-space: nowrap;
}
.hero-function-orbit__core-kicker::before {
    content: '';
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: rgb(93, 247, 184);
    box-shadow: 0 0 8px rgba(93, 247, 184, 0.78);
}
.hero-function-orbit__core-title {
    color: #f1fdff;
    background: linear-gradient(90deg, #effeff 0%, #a8eef6 48%, #ffe8b8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(20px, calc(var(--orbit-core-size) * 0.12), 27px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.11em;
    text-indent: 0.11em;
    text-shadow:
        0 0 16px rgba(var(--core-cyan), 0.24),
        0 0 20px rgba(var(--core-amber), 0.1);
    white-space: nowrap;
}
.hero-function-orbit__core-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    line-height: 1;
    white-space: nowrap;
}
.hero-function-orbit__core-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    min-width: 0;
    padding: 3px 5px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.hero-function-orbit__core-stat b {
    font-size: clamp(10px, calc(var(--orbit-core-size) * 0.06), 13px);
    font-weight: 900;
}
.hero-function-orbit__core-stat em {
    font-size: clamp(8px, calc(var(--orbit-core-size) * 0.045), 10px);
    font-style: normal;
    font-weight: 750;
}
.hero-function-orbit__core-stat--function {
    border-color: rgba(var(--core-cyan), 0.2);
    color: rgba(195, 248, 252, 0.92);
    background: rgba(var(--core-cyan), 0.075);
    box-shadow: inset 0 0 10px rgba(var(--core-cyan), 0.04);
}
.hero-function-orbit__core-stat--expert {
    border-color: rgba(var(--core-amber), 0.2);
    color: rgba(255, 226, 168, 0.92);
    background: rgba(var(--core-amber), 0.065);
    box-shadow: inset 0 0 10px rgba(var(--core-amber), 0.035);
}
.hero-function-orbit:hover .hero-function-orbit__core-ticks,
.hero-function-orbit:focus-within .hero-function-orbit__core-ticks {
    animation-play-state: paused;
}
@keyframes heroFunctionCoreTicksSpin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-function-orbit__core-ticks {
        animation: none;
    }
}
@keyframes heroFunctionOrbitSpin {
    to { transform: rotate(360deg); }
}
@keyframes heroFunctionOrbitCounterSpin {
    to { transform: rotate(-360deg); }
}

.hero-content {
    position: relative;
    z-index: 3;
    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: none;
}
body.agency-opening-done .agency-hero-title span {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
    animation: none;
    will-change: auto;
}
.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(21, 24, 49, 0.9);
    box-shadow: 0 28px 74px rgba(6, 8, 26, 0.38);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.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) auto;
    gap: clamp(24px, 3vw, 44px);
    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-group {
    display: flex;
    align-items: flex-end;
    justify-self: end;
    gap: 14px;
}
.ai-experts-openclaw {
    position: relative;
    display: flex;
    width: 194px;
    min-height: 66px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 79, 64, 0.28);
    border-radius: 20px;
    color: #431519;
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 119, 95, 0.2), transparent 44%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 239, 236, 0.82));
    box-shadow:
        0 18px 42px rgba(119, 27, 37, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    isolation: isolate;
}
.ai-experts-openclaw::after {
    content: '';
    position: absolute;
    right: -18px;
    bottom: -24px;
    z-index: -1;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(255, 79, 64, 0.14);
    filter: blur(18px);
}
.ai-experts-openclaw__icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    border: 1px solid rgba(255, 119, 95, 0.34);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 79, 64, 0.12));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 8px 22px rgba(155, 36, 43, 0.14);
}
.ai-experts-openclaw__icon img {
    display: block;
    width: 38px;
    height: 38px;
    image-rendering: pixelated;
}
.ai-experts-openclaw__copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}
.ai-experts-openclaw__copy > strong {
    color: inherit;
    font-size: 16px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.01em;
}
.ai-experts-openclaw__status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(91, 34, 39, 0.72);
    font-size: 10.5px;
    font-weight: 750;
    line-height: 1.25;
    white-space: nowrap;
}
.ai-experts-openclaw__status::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.12), 0 0 10px rgba(46, 204, 113, 0.42);
    animation: openClawStatusPulse 2.8s ease-in-out infinite;
}
.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-expert-card[id] {
    scroll-margin-top: 92px;
}
.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-experts-openclaw {
    color: #fff6f3;
    border-color: rgba(255, 119, 95, 0.34);
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 119, 95, 0.18), transparent 46%),
        linear-gradient(145deg, rgba(73, 19, 26, 0.76), rgba(8, 19, 38, 0.8));
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.3),
        0 0 26px rgba(255, 79, 64, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
body.dark .ai-experts-openclaw__icon {
    border-color: rgba(255, 119, 95, 0.42);
    background: linear-gradient(145deg, rgba(255, 119, 95, 0.16), rgba(12, 22, 42, 0.78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.24);
}
body.dark .ai-experts-openclaw__status {
    color: rgba(255, 230, 223, 0.74);
}
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); }
}
@keyframes openClawStatusPulse {
    0%, 100% { opacity: 0.72; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1.08); }
}
@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-proof-group {
        width: min(100%, 220px);
        flex-direction: column;
        align-items: stretch;
        justify-self: center;
        gap: 10px;
    }
    .ai-experts-openclaw {
        width: 100%;
        min-height: 68px;
        justify-content: center;
    }
    .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: 100%;
        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: 10px;
    }
    .ai-expert-card {
        min-height: 0;
        display: grid;
        grid-template-columns: 102px minmax(0, 1fr);
        gap: 14px;
        align-items: center;
        padding: 9px 12px;
        border-radius: 18px;
    }
    .ai-experts-grid--slanted .ai-expert-card {
        min-height: 0;
        margin-left: 0;
        padding: 9px 12px;
        clip-path: none;
        border-radius: 18px;
        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 span {
        min-height: 21px;
        padding: 2px 8px;
        font-size: 11.5px;
    }
    .ai-expert-info h3 {
        margin: 5px 0 4px;
        font-size: 21px;
        line-height: 1.05;
    }
    .ai-expert-info p {
        font-size: 12.5px;
        line-height: 1.42;
    }
    .ai-experts-grid--slanted .ai-expert-info p {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    .ai-expert-tags {
        justify-content: flex-start;
        gap: 4px;
        margin-top: 6px;
    }
}
@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;
    }
}

/* ============================================================
   BuildBuddy AI - 工作台工程智友统筹中枢
   ============================================================ */
.buildbuddy-section {
    position: relative;
    padding: 58px 0 118px;
    overflow: hidden;
    background: transparent;
}
.buildbuddy-section > .container {
    max-width: 1400px;
    padding-left: 24px;
    padding-right: 24px;
}
.buildbuddy-showcase {
    --bb-cyan: 98, 225, 255;
    --bb-blue: 74, 144, 217;
    --bb-amber: 245, 166, 35;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
    min-height: 610px;
    overflow: hidden;
    border: 1px solid rgba(112, 218, 255, 0.22);
    border-radius: 36px;
    color: #edf9ff;
    background:
        radial-gradient(circle at 12% 20%, rgba(var(--bb-blue), 0.24), transparent 34%),
        radial-gradient(circle at 90% 82%, rgba(var(--bb-amber), 0.13), transparent 31%),
        linear-gradient(132deg, rgba(8, 19, 39, 0.97), rgba(5, 13, 29, 0.96) 52%, rgba(4, 18, 35, 0.98));
    box-shadow:
        0 36px 110px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.025) inset,
        0 1px 0 rgba(255, 255, 255, 0.12) inset;
    isolation: isolate;
}
.buildbuddy-showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        repeating-linear-gradient(90deg, rgba(var(--bb-cyan), 0.035) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(0deg, rgba(var(--bb-cyan), 0.026) 0 1px, transparent 1px 46px),
        linear-gradient(106deg, transparent 0 48%, rgba(var(--bb-cyan), 0.08) 48.15%, transparent 48.5% 100%);
    mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.76) 60%, rgba(0, 0, 0, 0.28));
    pointer-events: none;
}
.buildbuddy-showcase::after {
    content: 'BUILD WITH EVIDENCE';
    position: absolute;
    left: 42px;
    bottom: 18px;
    z-index: -1;
    color: rgba(var(--bb-cyan), 0.06);
    font-size: clamp(46px, 6vw, 92px);
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: -0.06em;
    white-space: nowrap;
    pointer-events: none;
}
.buildbuddy-showcase__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 66px 42px 62px 54px;
}
.buildbuddy-brand-lockup {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 28px;
}
.buildbuddy-brand-lockup::before {
    content: '';
    width: 34px;
    height: 2px;
    flex: 0 0 34px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(var(--bb-cyan)), rgb(var(--bb-amber)));
    box-shadow: 0 0 12px rgba(var(--bb-cyan), 0.36);
}
.buildbuddy-brand-meta {
    display: grid;
    gap: 3px;
    line-height: 1.2;
}
.buildbuddy-brand-meta small {
    color: rgba(var(--bb-cyan), 0.72);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.16em;
}
.buildbuddy-brand-meta b {
    color: rgba(234, 247, 255, 0.76);
    font-size: 12px;
    font-weight: 760;
    letter-spacing: 0.04em;
}
.buildbuddy-showcase h2 {
    margin: 0 0 21px;
    color: #f6fbff;
    font-size: clamp(54px, 5.6vw, 82px);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.065em;
    white-space: nowrap;
}
.buildbuddy-showcase h2 em {
    color: transparent;
    background: linear-gradient(135deg, rgb(var(--bb-cyan)), #85aaff 52%, rgb(var(--bb-amber)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: normal;
}
.buildbuddy-lead {
    max-width: 550px;
    margin: 0;
    color: rgba(226, 241, 252, 0.78);
    font-size: 16px;
    font-weight: 520;
    line-height: 1.82;
}
.buildbuddy-capabilities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 30px;
}
.buildbuddy-capabilities span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--bb-cyan), 0.12);
    border-radius: 12px;
    color: rgba(231, 246, 255, 0.82);
    background: linear-gradient(90deg, rgba(var(--bb-cyan), 0.07), rgba(255, 255, 255, 0.025));
    font-size: 12px;
    font-weight: 720;
    white-space: nowrap;
}
.buildbuddy-capabilities i {
    color: rgba(var(--bb-cyan), 0.62);
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.08em;
}
.buildbuddy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 30px;
}
.buildbuddy-action {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 820;
    transition: transform 0.28s var(--ease-out), border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}
.buildbuddy-action:hover,
.buildbuddy-action:focus-visible {
    transform: translateY(-3px);
}
.buildbuddy-action:focus-visible {
    outline: 2px solid rgba(var(--bb-cyan), 0.82);
    outline-offset: 3px;
}
.buildbuddy-action--primary {
    color: #03111e;
    background: linear-gradient(135deg, rgb(var(--bb-cyan)), #84b7ff);
    box-shadow: 0 12px 34px rgba(var(--bb-cyan), 0.18);
}
.buildbuddy-action--primary:hover,
.buildbuddy-action--primary:focus-visible {
    box-shadow: 0 16px 42px rgba(var(--bb-cyan), 0.28);
}
.buildbuddy-action--ghost {
    color: rgba(235, 248, 255, 0.86);
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.045);
}
.buildbuddy-action--ghost:hover,
.buildbuddy-action--ghost:focus-visible {
    border-color: rgba(var(--bb-cyan), 0.34);
    background: rgba(var(--bb-cyan), 0.08);
}
.buildbuddy-command {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    min-width: 0;
    padding: 24px 28px 22px;
    border-left: 1px solid rgba(var(--bb-cyan), 0.13);
    background:
        radial-gradient(circle at 50% 46%, rgba(var(--bb-blue), 0.14), transparent 46%),
        linear-gradient(180deg, rgba(6, 21, 42, 0.54), rgba(3, 12, 27, 0.78));
}
.buildbuddy-command__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(var(--bb-cyan), 0.11);
    color: rgba(var(--bb-cyan), 0.52);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.15em;
}
.buildbuddy-command__topline b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(212, 255, 229, 0.78);
    font-size: 9px;
}
.buildbuddy-command__topline b i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #43e28f;
    box-shadow: 0 0 0 4px rgba(67, 226, 143, 0.08), 0 0 15px rgba(67, 226, 143, 0.5);
    animation: openClawStatusPulse 2.8s ease-in-out infinite;
}
.buildbuddy-network {
    position: relative;
    width: min(100%, 430px);
    height: 404px;
    margin: 2px auto 0;
}
.buildbuddy-network__rings,
.buildbuddy-network__rings::before,
.buildbuddy-network__rings::after {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.buildbuddy-network__rings {
    width: 330px;
    height: 330px;
    border: 1px solid rgba(var(--bb-cyan), 0.19);
    box-shadow:
        0 0 42px rgba(var(--bb-blue), 0.09),
        inset 0 0 48px rgba(var(--bb-blue), 0.07);
}
.buildbuddy-network__rings::before,
.buildbuddy-network__rings::after {
    content: '';
}
.buildbuddy-network__rings::before {
    width: 246px;
    height: 246px;
    border: 1px dashed rgba(var(--bb-cyan), 0.15);
}
.buildbuddy-network__rings::after {
    width: 176px;
    height: 176px;
    border: 1px solid rgba(var(--bb-amber), 0.13);
}
.buildbuddy-network__spokes {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 318px;
    height: 318px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from -18deg, rgba(var(--bb-cyan), 0.2) 0deg 0.7deg, transparent 0.7deg 72deg);
    mask-image: radial-gradient(circle, transparent 0 24%, #000 25% 69%, transparent 70%);
    opacity: 0.72;
    pointer-events: none;
}
.buildbuddy-expert-node {
    --expert-ring: var(--bb-cyan);
    position: absolute;
    z-index: 3;
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border: 1px solid rgba(var(--expert-ring), 0.46);
    border-radius: 50%;
    padding: 4px;
    background: rgba(7, 22, 42, 0.94);
    box-shadow: 0 0 24px rgba(var(--expert-ring), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.13);
    transform: translate(-50%, -50%);
    transition: transform 0.28s var(--ease-out), box-shadow 0.28s ease;
}
.buildbuddy-expert-node:hover {
    transform: translate(-50%, -55%) scale(1.04);
    box-shadow: 0 0 34px rgba(var(--expert-ring), 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.buildbuddy-expert-node img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.buildbuddy-expert-node b,
.buildbuddy-expert-node small {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
.buildbuddy-expert-node b {
    top: calc(100% + 5px);
    color: rgba(238, 249, 255, 0.9);
    font-size: 11px;
    line-height: 1;
}
.buildbuddy-expert-node small {
    top: calc(100% + 19px);
    color: rgba(var(--expert-ring), 0.7);
    font-size: 8px;
    font-weight: 760;
}
.buildbuddy-expert-node--cost { --expert-ring: 217, 119, 6; left: 50%; top: 10%; }
.buildbuddy-expert-node--contract { --expert-ring: 124, 58, 237; left: 89%; top: 38%; }
.buildbuddy-expert-node--bidding { --expert-ring: 5, 150, 105; left: 74%; top: 82%; }
.buildbuddy-expert-node--tech { --expert-ring: 37, 99, 235; left: 26%; top: 82%; }
.buildbuddy-expert-node--layout { --expert-ring: 8, 145, 178; left: 11%; top: 38%; }
.buildbuddy-network__core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    display: grid;
    width: 138px;
    height: 138px;
    place-content: center;
    justify-items: center;
    border: 1px solid rgba(var(--bb-cyan), 0.36);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(var(--bb-cyan), 0.18), transparent 38%),
        radial-gradient(circle at 70% 75%, rgba(var(--bb-amber), 0.12), transparent 44%),
        rgba(5, 19, 39, 0.96);
    box-shadow:
        0 0 0 10px rgba(var(--bb-cyan), 0.025),
        0 0 44px rgba(var(--bb-cyan), 0.16),
        inset 0 0 32px rgba(var(--bb-blue), 0.11);
    transform: translate(-50%, -50%);
}
.buildbuddy-network__core::before {
    content: '';
    width: 34px;
    height: 2px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(var(--bb-cyan)), rgb(var(--bb-amber)));
    box-shadow: 0 0 12px rgba(var(--bb-cyan), 0.42);
}
.buildbuddy-network__core strong {
    color: #f2fbff;
    font-size: 13px;
    line-height: 1;
}
.buildbuddy-network__core small {
    margin-top: 5px;
    color: rgba(var(--bb-cyan), 0.65);
    font-size: 8px;
    font-weight: 820;
    letter-spacing: 0.16em;
}
.buildbuddy-openclaw-link {
    display: flex;
    min-width: 164px;
    align-items: center;
    justify-self: center;
    gap: 9px;
    margin: -20px 0 16px;
    padding: 7px 12px 7px 8px;
    border: 1px solid rgba(255, 119, 95, 0.22);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 79, 64, 0.12), rgba(255, 255, 255, 0.025));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.buildbuddy-openclaw-link img {
    display: block;
    width: 34px;
    height: 34px;
    image-rendering: pixelated;
}
.buildbuddy-openclaw-link span {
    display: grid;
    gap: 2px;
}
.buildbuddy-openclaw-link b {
    color: #fff1ed;
    font-size: 11px;
    line-height: 1;
}
.buildbuddy-openclaw-link small {
    color: rgba(255, 210, 202, 0.62);
    font-size: 8px;
    font-weight: 760;
}
.buildbuddy-flow {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--bb-cyan), 0.11);
}
.buildbuddy-flow span {
    color: rgba(224, 242, 252, 0.66);
    font-size: 9px;
    font-weight: 780;
    white-space: nowrap;
}
.buildbuddy-flow i {
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--bb-cyan), 0.12), rgba(var(--bb-cyan), 0.58), rgba(var(--bb-amber), 0.22));
}

@media (max-width: 1020px) {
    .buildbuddy-showcase {
        grid-template-columns: 1fr;
    }
    .buildbuddy-showcase__copy {
        padding: 58px 52px 46px;
    }
    .buildbuddy-lead {
        max-width: 680px;
    }
    .buildbuddy-command {
        min-height: 560px;
        border-top: 1px solid rgba(var(--bb-cyan), 0.13);
        border-left: 0;
    }
}
@media (max-width: 768px) {
    .buildbuddy-section {
        padding: 36px 0 78px;
    }
    .buildbuddy-section > .container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    .buildbuddy-showcase {
        min-height: 0;
        border-radius: 26px;
    }
    .buildbuddy-showcase::after {
        left: 18px;
        bottom: 12px;
        font-size: 42px;
    }
    .buildbuddy-showcase__copy {
        padding: 34px 22px 32px;
    }
    .buildbuddy-brand-lockup {
        margin-bottom: 22px;
    }
    .buildbuddy-brand-meta small {
        font-size: 8px;
    }
    .buildbuddy-brand-meta b {
        font-size: 10.5px;
    }
    .buildbuddy-showcase h2 {
        margin-bottom: 18px;
        font-size: clamp(42px, 13.8vw, 58px);
        white-space: normal;
    }
    .buildbuddy-lead {
        font-size: 14px;
        line-height: 1.72;
    }
    .buildbuddy-capabilities {
        gap: 7px;
        margin-top: 24px;
    }
    .buildbuddy-capabilities span {
        gap: 6px;
        padding: 9px 8px;
        font-size: 10.5px;
    }
    .buildbuddy-actions {
        margin-top: 24px;
    }
    .buildbuddy-action {
        min-height: 43px;
        padding: 0 15px;
        font-size: 11.5px;
    }
    .buildbuddy-command {
        min-height: 0;
        padding: 18px 14px 16px;
    }
    .buildbuddy-command__topline {
        font-size: 7px;
    }
    .buildbuddy-network {
        width: min(100%, 340px);
        height: 330px;
    }
    .buildbuddy-network__rings {
        width: 262px;
        height: 262px;
    }
    .buildbuddy-network__rings::before {
        width: 198px;
        height: 198px;
    }
    .buildbuddy-network__rings::after {
        width: 140px;
        height: 140px;
    }
    .buildbuddy-network__spokes {
        width: 252px;
        height: 252px;
    }
    .buildbuddy-expert-node {
        width: 58px;
        height: 58px;
        padding: 3px;
    }
    .buildbuddy-expert-node b {
        top: calc(100% + 4px);
        font-size: 9px;
    }
    .buildbuddy-expert-node small {
        display: none;
    }
    .buildbuddy-network__core {
        width: 108px;
        height: 108px;
        box-shadow: 0 0 0 7px rgba(var(--bb-cyan), 0.025), 0 0 34px rgba(var(--bb-cyan), 0.15), inset 0 0 24px rgba(var(--bb-blue), 0.1);
    }
    .buildbuddy-network__core strong {
        font-size: 10px;
    }
    .buildbuddy-network__core small {
        margin-top: 4px;
        font-size: 7px;
    }
    .buildbuddy-openclaw-link {
        margin: -8px 0 12px;
    }
    .buildbuddy-flow {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }
    .buildbuddy-flow span {
        text-align: center;
        font-size: 8px;
    }
    .buildbuddy-flow i {
        display: none;
    }
}
@media (max-width: 420px) {
    .buildbuddy-capabilities {
        grid-template-columns: 1fr;
    }
    .buildbuddy-actions {
        display: block;
    }
    .buildbuddy-action {
        width: 100%;
        padding: 0 10px;
    }
    .buildbuddy-network {
        width: min(100%, 310px);
        height: 305px;
    }
    .buildbuddy-network__rings {
        width: 238px;
        height: 238px;
    }
    .buildbuddy-network__rings::before {
        width: 178px;
        height: 178px;
    }
    .buildbuddy-network__rings::after {
        width: 128px;
        height: 128px;
    }
    .buildbuddy-network__spokes {
        width: 228px;
        height: 228px;
    }
    .buildbuddy-expert-node {
        width: 52px;
        height: 52px;
    }
    .buildbuddy-network__core {
        width: 98px;
        height: 98px;
    }
}

/* ============================================================
   功能卡片区 - 玻璃态 + 光效 + 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;
    touch-action: pan-y;
}

.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: grab;
    touch-action: pan-x pan-y;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(126, 225, 255, 0.5) rgba(255, 255, 255, 0.06);
    mask-image: none;
    -webkit-mask-image: none;
}

#core-features .features-grid.circular-feature-gallery.is-linear.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

#core-features .features-grid.circular-feature-gallery.is-linear::-webkit-scrollbar {
    height: 4px;
}

#core-features .features-grid.circular-feature-gallery.is-linear::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

#core-features .features-grid.circular-feature-gallery.is-linear::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(126, 225, 255, 0.5), rgba(245, 166, 35, 0.45));
}

#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;
    user-select: none;
    -webkit-user-drag: none;
}


/* ============================================================
   关于区
   ============================================================ */
.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 {
    position: relative;
    isolation: isolate;
    background-color: #050b18;
    /* home-continuous-canvas: one page-level construction scene, like BuildBuddy's shared canvas */
    background-image:
        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,
            rgba(2, 7, 18, 0.08) 0%,
            rgba(3, 10, 24, 0.2) 44vh,
            rgba(5, 11, 24, 0.68) 90vh,
            #050b18 132vh,
            #050b18 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-position: 0 0, 0 0, top left, top center;
    background-size: 96px 96px, 96px 96px, 100% 100%, 100% auto;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    background-attachment: scroll, scroll, scroll, scroll;
}
body.home-page.dark .hero-bg {
    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.42) 100%);
    background-color: transparent;
}
body.home-page.dark .hero,
body.home-page.dark .auto-cost-section,
body.home-page.dark .ai-experts-section,
body.home-page.dark .buildbuddy-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, #buildbuddy, #ai-features, #core-features, .about, .footer) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
body.home-page.dark :is(.ai-experts-section, #buildbuddy, #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, #buildbuddy, #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 #buildbuddy {
        contain-intrinsic-size: auto 760px;
    }
    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: none;
    opacity: 0.76;
}
@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; }
}
body.home-page.bg-motion-managed .hero:not(.is-bg-active)::before,
body.home-page.bg-motion-managed .hero:not(.is-bg-active) .hero-bg::before,
body.home-page.bg-motion-managed .hero:not(.is-bg-active) .hero-bg::after,
body.home-page.bg-motion-managed .hero:not(.is-bg-active) .hero-function-orbit__track,
body.home-page.bg-motion-managed .hero:not(.is-bg-active) .hero-function-node__counter,
body.home-page.bg-motion-managed .hero:not(.is-bg-active) .hero-function-orbit__core-ticks,
body.home-page.bg-motion-managed .hero:not(.is-bg-active) .hero-title-panda,
body.home-page.bg-motion-managed .hero:not(.is-bg-active) .hero-mascot {
    animation-play-state: paused !important;
    will-change: auto;
}
/* 暗色功能卡片区 */
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-function-orbit {
        opacity: 0.9;
    }
    .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; }
    .navbar {
        top: 12px;
        padding: 0 14px;
    }
    .nav-container {
        gap: 3px;
        padding: 0 8px;
        height: 54px;
        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 {
        flex: 0 0 30px;
        font-size: 16px;
    }
    .nav-logo img { width: 30px; height: 30px; }
    .member-nav-button {
        min-width: 36px;
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 14px;
        flex: 0 0 36px;
    }
    .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;
    }
    .theme-toggle {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none;
    }
    .nav-links {
        position: static;
        display: flex !important;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        height: 38px;
        align-items: center;
        flex-direction: row;
        gap: 1px;
        margin: 0 2px;
        padding: 0;
        overflow: visible;
        max-height: none;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        border-radius: 0;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .nav-links.active {
        display: flex !important;
        animation: none;
    }
    .nav-links li {
        width: auto;
        min-width: 0;
        flex: 1 1 0;
        list-style: none;
    }
    .nav-links a {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        font-size: clamp(8px, 2.25vw, 10px);
        padding: 7px 1px;
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.76) !important;
        background: transparent;
        border: none;
        letter-spacing: 0;
        white-space: nowrap;
    }
    .nav-links a:hover {
        color: var(--brand-primary);
        background: rgba(74, 144, 217, 0.06);
    }
    .nav-toggle {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none;
    }
    .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: 94vh;
        min-height: 94svh;
        padding: 96px 18px 66px;
    }
    .hero.hero--function-orbit {
        display: block;
        min-height: 920px;
        min-height: max(100svh, 920px);
        padding: 90px 18px 28px;
    }
    .hero-function-orbit {
        --orbit-visual-scale: 0.82;
        --orbit-size: min(106vw, 420px);
        --orbit-radius: calc(var(--orbit-size) * 0.455);
        left: 50%;
        top: 680px;
        top: clamp(680px, 75svh, 880px);
        opacity: 0.78;
        filter: none;
    }
    .hero-function-node {
        width: 86px;
        height: 58px;
        margin: -29px 0 0 -43px;
    }
    .hero-function-node--wide {
        width: 110px;
        margin-left: -55px;
    }
    .hero-function-node__card {
        gap: 3px;
        padding: 0;
        border-radius: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .hero-function-node__icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        border-radius: 10px;
    }
    .hero-function-node__icon picture,
    .hero-function-node__icon img {
        width: 24px;
        height: 24px;
    }
    .hero-function-node__card > span:last-child {
        padding: 3px 6px 4px;
        font-size: 9px;
        line-height: 1.12;
    }
    .hero-function-orbit__core {
        width: 136px;
        height: 136px;
    }
    .hero-function-orbit__core-ticks {
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
        opacity: 0.54;
    }
    .hero-function-orbit__core-arcs {
        inset: 8%;
        opacity: 0.82;
    }
    .hero-function-orbit__core-plate {
        inset: 12%;
        gap: 3px;
    }
    .hero-function-orbit__core-kicker {
        font-size: 7px;
        letter-spacing: 0.1em;
    }
    .hero-function-orbit__core-title {
        font-size: 21px;
    }
    .hero-function-orbit__core-legend {
        gap: 4px;
    }
    .hero-function-orbit__core-stat {
        padding: 3px 4px;
    }
    .hero-bg {
        background-position: 58% center;
    }
    .hero::before {
        opacity: 0.52;
    }
    .hero-content {
        max-width: 100%;
        margin-top: 0;
    }
    .hero.hero--function-orbit .hero-content {
        width: 100%;
        max-width: none;
        margin: 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.hero--function-orbit h1 {
        font-size: clamp(36px, 10.25vw, 40px);
    }
    .hero.hero--function-orbit .hero-title-panda {
        left: calc(3.1em - 50px);
        right: auto;
        top: -43px;
        width: 100px;
    }
    .hero.hero--function-orbit .hero-subtitle {
        max-width: 100%;
        font-size: 15px;
    }
    .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; }
    .hero.hero--function-orbit .hero-logo {
        width: 52px;
        height: 52px;
        margin-bottom: 14px;
    }
    .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.hero--function-orbit .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
        margin-top: 18px;
    }
    .hero.hero--function-orbit .stat-item {
        min-width: 0;
        padding: 9px 5px;
        text-align: center;
    }
    .hero.hero--function-orbit .stat-num { font-size: 22px; }
    .hero.hero--function-orbit .stat-label { font-size: 9px; margin-top: 5px; }
    .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 (max-width: 768px), (any-pointer: coarse) {
    html,
    body,
    body * {
        scrollbar-width: none !important;
        -ms-overflow-style: none;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    body *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

@media (max-width: 480px) {
    .hero.hero--function-orbit {
        min-height: 820px;
        min-height: max(100svh, 820px);
    }
    .hero-function-orbit {
        --orbit-visual-scale: 0.88;
        --orbit-size: clamp(400px, 106vw, 410px);
        left: 50%;
        top: 630px;
    }
    .hero-function-orbit__core {
        opacity: 0.82;
    }
}

@media (max-width: 410px) {
    .hero-function-orbit {
        --orbit-visual-scale: 0.80;
    }
}

@media (max-width: 400px) {
    .hero-function-orbit {
        --orbit-visual-scale: 0.75;
    }
}

@media (max-width: 380px) {
    .hero-function-orbit {
        --orbit-visual-scale: 0.70;
    }
}

@media (max-width: 340px) {
    .hero-function-orbit {
        --orbit-visual-scale: 0.62;
    }
}

@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;
}

/* ============================================================
   首页一键流程：轻量光轨展示
   ============================================================ */
.control-dashboard.control-journey {
    position: relative;
    isolation: isolate;
    padding: 28px 28px 24px;
    overflow: hidden;
    border: 1px solid rgba(89, 223, 239, 0.26);
    border-radius: 28px;
    background:
        linear-gradient(142deg, rgba(8, 24, 42, 0.9), rgba(11, 18, 39, 0.68)),
        radial-gradient(circle at 88% 6%, rgba(73, 216, 242, 0.16), transparent 34%);
    box-shadow:
        0 32px 80px rgba(1, 8, 22, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 54px rgba(73, 216, 242, 0.035);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.control-dashboard.control-journey::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 280px;
    height: 280px;
    right: -126px;
    top: -156px;
    border: 1px solid rgba(73, 216, 242, 0.16);
    border-radius: 50%;
    box-shadow:
        0 0 0 38px rgba(73, 216, 242, 0.025),
        0 0 0 76px rgba(85, 229, 139, 0.018);
    pointer-events: none;
}
.control-journey-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(145, 229, 241, 0.12);
}
.control-journey-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(146, 231, 240, 0.72);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
}
.control-journey-kicker i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #55e58b;
    box-shadow: 0 0 16px rgba(85, 229, 139, 0.9);
    animation: controlJourneyReady 2.8s ease-in-out infinite;
}
@keyframes controlJourneyReady {
    0%, 100% { opacity: 0.58; transform: scale(0.82); }
    50% { opacity: 1; transform: scale(1.12); }
}
.control-journey-head h3 {
    margin: 8px 0 0;
    color: #f4fbff;
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.035em;
}
.control-journey-result {
    flex: 0 0 auto;
    min-width: 142px;
    padding-left: 18px;
    border-left: 1px solid rgba(85, 229, 139, 0.24);
}
.control-journey-result small {
    display: block;
    color: rgba(225, 241, 246, 0.54);
    font-size: 11px;
    font-weight: 800;
}
.control-journey-result strong {
    display: block;
    margin-top: 5px;
    color: #65ec9a;
    font-size: 17px;
    white-space: nowrap;
}
.control-journey-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 16px;
    margin: 0;
    padding: 22px 0;
    list-style: none;
    background:
        linear-gradient(90deg, transparent 3%, rgba(73, 216, 242, 0.36) 13%, rgba(85, 229, 139, 0.42) 88%, transparent 97%) 0 62px / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(85, 229, 139, 0.42), rgba(245, 209, 91, 0.34)) calc(100% - 20px) 62px / 1px calc(100% - 124px) no-repeat,
        linear-gradient(90deg, transparent 3%, rgba(245, 209, 91, 0.34) 13%, rgba(73, 216, 242, 0.3) 88%, transparent 97%) 0 calc(100% - 62px) / 100% 1px no-repeat;
}
.control-journey-track li {
    --journey-accent: 73, 216, 242;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
    min-height: 104px;
    padding: 15px 10px 12px;
    border-top: 1px solid rgba(var(--journey-accent), 0.4);
    background: linear-gradient(180deg, rgba(var(--journey-accent), 0.075), transparent 72%);
}
.control-journey-track li:nth-child(2),
.control-journey-track li:nth-child(7) { --journey-accent: 85, 229, 139; }
.control-journey-track li:nth-child(3),
.control-journey-track li:nth-child(6) { --journey-accent: 245, 209, 91; }
.control-journey-track li:nth-child(4),
.control-journey-track li:nth-child(8) { --journey-accent: 155, 125, 245; }
.control-journey-track li:nth-child(5) { grid-column: 4; grid-row: 2; }
.control-journey-track li:nth-child(6) { grid-column: 3; grid-row: 2; }
.control-journey-track li:nth-child(7) { grid-column: 2; grid-row: 2; }
.control-journey-track li:nth-child(8) { grid-column: 1; grid-row: 2; }
.control-journey-track li > span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(var(--journey-accent), 0.5);
    border-radius: 50%;
    background: rgba(6, 17, 34, 0.9);
    color: rgb(var(--journey-accent));
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 0 22px rgba(var(--journey-accent), 0.12);
}
.control-journey-track li > div {
    min-width: 0;
}
.control-journey-track b {
    display: block;
    color: rgba(247, 252, 255, 0.94);
    font-size: 13px;
    line-height: 1.35;
}
.control-journey-track small {
    display: block;
    margin-top: 5px;
    color: rgba(216, 233, 240, 0.56);
    font-size: 10px;
    line-height: 1.45;
}
.control-journey-track em {
    grid-column: 2;
    justify-self: start;
    align-self: end;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(var(--journey-accent), 0.1);
    color: rgba(var(--journey-accent), 0.88);
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.08em;
}
.control-journey-track li.is-core {
    border-top-color: rgba(85, 229, 139, 0.8);
    box-shadow: inset 0 22px 38px rgba(85, 229, 139, 0.08);
}
.control-journey-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(145, 229, 241, 0.12);
}
.control-journey-config {
    display: flex;
    align-items: center;
    gap: 12px;
}
.control-journey-config strong {
    color: #f1d15b;
    font-size: 34px;
    line-height: 1;
}
.control-journey-config span {
    color: rgba(245, 251, 255, 0.86);
    font-size: 12px;
    font-weight: 850;
}
.control-journey-config small {
    display: block;
    margin-top: 3px;
    color: rgba(216, 233, 240, 0.48);
    font-size: 10px;
    font-weight: 650;
}
.control-journey-delivery {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: rgba(225, 240, 245, 0.62);
    font-size: 10px;
    font-weight: 850;
}
.control-journey-delivery i {
    width: clamp(12px, 2vw, 28px);
    height: 1px;
    background: linear-gradient(90deg, rgba(73, 216, 242, 0.26), rgba(85, 229, 139, 0.72));
}
.control-journey-delivery strong {
    color: #65ec9a;
    font-size: 12px;
}
body:not(.dark) .control-dashboard.control-journey {
    border-color: rgba(37, 128, 151, 0.2);
    background: linear-gradient(142deg, rgba(246, 252, 255, 0.96), rgba(229, 242, 248, 0.9));
    box-shadow: 0 26px 70px rgba(37, 79, 103, 0.16);
}
body:not(.dark) .control-journey-head h3,
body:not(.dark) .control-journey-track b,
body:not(.dark) .control-journey-config span { color: #102b3b; }
body:not(.dark) .control-journey-track li > span { background: rgba(246, 252, 255, 0.96); }
body:not(.dark) .control-journey-track small,
body:not(.dark) .control-journey-config small,
body:not(.dark) .control-journey-delivery { color: rgba(16, 43, 59, 0.58); }

@media (max-width: 768px) {
    .control-dashboard.control-journey {
        padding: 20px 16px 18px;
        border-radius: 22px;
    }
    .control-journey-head {
        align-items: flex-start;
        padding-bottom: 16px;
    }
    .control-journey-head h3 {
        font-size: 22px;
    }
    .control-journey-result {
        min-width: auto;
        padding-left: 12px;
    }
    .control-journey-result strong {
        font-size: 13px;
    }
    .control-journey-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 16px 0;
        background: none;
    }
    .control-journey-track li,
    .control-journey-track li:nth-child(5),
    .control-journey-track li:nth-child(6),
    .control-journey-track li:nth-child(7),
    .control-journey-track li:nth-child(8) {
        grid-column: auto;
        grid-row: auto;
        min-height: 96px;
        padding: 12px 8px 10px;
        border: 1px solid rgba(var(--journey-accent), 0.18);
        border-radius: 14px;
    }
    .control-journey-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        padding-top: 15px;
    }
    .control-journey-delivery {
        width: 100%;
        justify-content: space-between;
    }
    .control-journey-delivery i {
        flex: 1 1 auto;
    }
}

@media (max-width: 420px) {
    .control-journey-kicker { font-size: 8px; }
    .control-journey-result small { font-size: 9px; }
    .control-journey-track li {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
    }
    .control-journey-track li > span {
        width: 34px;
        height: 34px;
        font-size: 10px;
    }
    .control-journey-track b { font-size: 11px; }
    .control-journey-track small { font-size: 9px; }
}

/* 一键流程整合舱：标题与光轨共用一个视觉容器 */
.auto-cost-section .control-hero-shell.auto-cost-shell {
    width: min(1320px, 100%);
    max-width: none;
    grid-template-columns: minmax(310px, 0.62fr) minmax(0, 1.38fr);
    gap: 0;
    align-items: stretch;
    padding: 36px;
    overflow: hidden;
    border: 1px solid rgba(89, 223, 239, 0.22);
    border-radius: 34px;
    background:
        linear-gradient(128deg, rgba(7, 22, 39, 0.82), rgba(8, 17, 34, 0.68)),
        radial-gradient(circle at 12% 52%, rgba(85, 229, 139, 0.1), transparent 30%);
    box-shadow:
        0 36px 90px rgba(1, 8, 22, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.auto-cost-section .control-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    padding: 18px 42px 18px 6px;
}
.control-copy-kicker {
    color: rgba(142, 225, 238, 0.72);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.18em;
}
.auto-cost-section .control-title {
    margin: 12px 0 16px;
    font-size: clamp(48px, 4.2vw, 62px);
}
.auto-cost-section .control-desc {
    max-width: 390px;
    color: rgba(222, 238, 243, 0.68);
    font-size: 15px;
    line-height: 1.8;
}
.auto-cost-section .control-actions {
    margin-top: 24px;
}
.auto-cost-section .control-dashboard.control-journey {
    align-self: stretch;
    padding: 4px 0 4px 34px;
    overflow: visible;
    border: 0;
    border-left: 1px solid rgba(145, 229, 241, 0.14);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.auto-cost-section .control-dashboard.control-journey::before {
    display: none;
}
body:not(.dark) .auto-cost-section .control-hero-shell.auto-cost-shell {
    border-color: rgba(37, 128, 151, 0.18);
    background:
        linear-gradient(128deg, rgba(247, 252, 255, 0.96), rgba(229, 242, 248, 0.9)),
        radial-gradient(circle at 12% 52%, rgba(31, 168, 111, 0.08), transparent 30%);
    box-shadow: 0 28px 76px rgba(37, 79, 103, 0.14);
}
body:not(.dark) .auto-cost-section .control-dashboard.control-journey {
    border-left-color: rgba(37, 128, 151, 0.16);
    background: transparent;
    box-shadow: none;
}
body:not(.dark) .auto-cost-section .control-title {
    color: #102b3b;
    text-shadow: none;
}
body:not(.dark) .auto-cost-section .control-desc {
    color: rgba(16, 43, 59, 0.64);
}

@media (max-width: 1080px) {
    .auto-cost-section .control-hero-shell.auto-cost-shell {
        grid-template-columns: 1fr;
        padding: 28px;
        border-radius: 28px;
    }
    .auto-cost-section .control-copy {
        padding: 4px 0 26px;
        border-bottom: 1px solid rgba(145, 229, 241, 0.14);
    }
    .auto-cost-section .control-title {
        max-width: 720px;
        font-size: clamp(42px, 7vw, 58px);
    }
    .auto-cost-section .control-dashboard.control-journey {
        padding: 28px 0 0;
        border-left: 0;
    }
}

@media (max-width: 768px) {
    .auto-cost-section .control-hero-shell.auto-cost-shell {
        padding: 22px 16px;
        border-radius: 22px;
    }
    .auto-cost-section .control-copy {
        padding: 0 0 22px;
    }
    .auto-cost-section .control-title {
        margin: 10px 0 12px;
        font-size: 38px;
    }
    .auto-cost-section .control-desc {
        font-size: 13px;
        line-height: 1.7;
    }
    .auto-cost-section .control-dashboard.control-journey {
        padding: 22px 0 0;
        border-radius: 0;
    }
}

/* 悬浮工程光带：去容器化，避免与 BuildBuddy 分栏卡片同构 */
.auto-cost-section .control-hero-shell.auto-cost-shell {
    display: block;
    width: min(1320px, 100%);
    padding: 58px 0 42px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.auto-cost-section .control-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 48px;
    padding: 0 8px 28px;
    border: 0;
}
.auto-cost-section .control-copy-main {
    min-width: 0;
}
.auto-cost-section .control-title {
    margin: 10px 0 14px;
    font-size: clamp(52px, 5.2vw, 76px);
    line-height: 1.01;
}
.auto-cost-section .control-title strong {
    white-space: nowrap;
}
.auto-cost-section .control-desc {
    max-width: 640px;
    font-size: 16px;
}
.control-copy-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 18px;
    padding-bottom: 4px;
}
.control-journey-meta {
    display: flex;
    align-items: center;
    gap: 24px;
}
.control-journey-meta span {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 6px;
    color: rgba(222, 238, 243, 0.6);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}
.control-journey-meta b {
    color: #65ec9a;
    font-size: 27px;
    line-height: 1;
}
.control-journey-meta .is-output b {
    color: #f1d15b;
    font-size: 19px;
}
.auto-cost-section .control-actions {
    margin: 0;
}
.auto-cost-section .control-dashboard.control-journey {
    position: relative;
    width: 100%;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body:not(.dark) .auto-cost-section .control-hero-shell.auto-cost-shell {
    border: 0;
    background: transparent;
    box-shadow: none;
}
.control-flow-ribbon {
    position: absolute;
    inset: 0;
    height: 340px;
    pointer-events: none;
}
.control-flow-ribbon::before,
.control-flow-ribbon::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(
        0 76%, 5% 70%, 18% 26%, 31% 70%, 44% 26%, 57% 70%, 70% 26%, 83% 70%, 96% 26%, 100% 30%,
        100% 35%, 96% 31%, 83% 75%, 70% 31%, 57% 75%, 44% 31%, 31% 75%, 18% 31%, 5% 75%, 0 81%
    );
    background: linear-gradient(90deg, #49d8f2 0%, #55e58b 28%, #f1d15b 52%, #9b7df5 76%, #49d8f2 100%);
    background-size: 220% 100%;
    animation: controlRibbonFlow 12s linear infinite;
}
.control-flow-ribbon::before {
    opacity: 0.76;
}
.control-flow-ribbon::after {
    opacity: 0.32;
    filter: blur(12px);
    transform: scaleY(1.18);
}
@keyframes controlRibbonFlow {
    from { background-position: 0% 50%; }
    to { background-position: 220% 50%; }
}
.auto-cost-section .control-journey-track {
    position: relative;
    display: block;
    height: 340px;
    margin: 0;
    padding: 0;
    background: none;
}
.auto-cost-section .control-journey-track li,
.auto-cost-section .control-journey-track li:nth-child(5),
.auto-cost-section .control-journey-track li:nth-child(6),
.auto-cost-section .control-journey-track li:nth-child(7),
.auto-cost-section .control-journey-track li:nth-child(8) {
    position: absolute;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 9px;
    width: 158px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease, filter 0.25s ease;
}
.auto-cost-section .control-journey-track li:nth-child(1) { left: 5%; top: 72%; }
.auto-cost-section .control-journey-track li:nth-child(2) { left: 18%; top: 28%; }
.auto-cost-section .control-journey-track li:nth-child(3) { left: 31%; top: 72%; }
.auto-cost-section .control-journey-track li:nth-child(4) { left: 44%; top: 28%; }
.auto-cost-section .control-journey-track li:nth-child(5) { left: 57%; top: 72%; }
.auto-cost-section .control-journey-track li:nth-child(6) { left: 70%; top: 28%; }
.auto-cost-section .control-journey-track li:nth-child(7) { left: 83%; top: 72%; }
.auto-cost-section .control-journey-track li:nth-child(8) { left: 96%; top: 28%; }
.auto-cost-section .control-journey-track li:hover {
    transform: translate(-50%, -56%) scale(1.04);
    filter: brightness(1.15);
}
.auto-cost-section .control-journey-track li > span {
    width: 42px;
    height: 42px;
    border-width: 2px;
    background: rgba(4, 15, 30, 0.96);
    box-shadow:
        0 0 0 5px rgba(var(--journey-accent), 0.07),
        0 0 26px rgba(var(--journey-accent), 0.22);
}
.auto-cost-section .control-journey-track b {
    font-size: 13px;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.72);
}
.auto-cost-section .control-journey-track small {
    color: rgba(222, 238, 243, 0.62);
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.72);
}
.auto-cost-section .control-journey-track em {
    background: rgba(4, 15, 30, 0.82);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}
body:not(.dark) .control-journey-meta span {
    color: rgba(16, 43, 59, 0.58);
}
body:not(.dark) .auto-cost-section .control-journey-track li > span {
    background: rgba(246, 252, 255, 0.96);
}
body:not(.dark) .auto-cost-section .control-journey-track b {
    color: #102b3b;
    text-shadow: none;
}
body:not(.dark) .auto-cost-section .control-journey-track small {
    color: rgba(16, 43, 59, 0.58);
    text-shadow: none;
}

@media (max-width: 900px) {
    .auto-cost-section .control-hero-shell.auto-cost-shell {
        padding: 38px 0 28px;
    }
    .auto-cost-section .control-copy {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 22px;
        padding: 0 0 26px;
    }
    .control-copy-side {
        align-items: flex-start;
        width: 100%;
    }
    .control-journey-meta {
        flex-wrap: wrap;
        gap: 14px 22px;
    }
    .auto-cost-section .control-title strong {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .auto-cost-section .control-hero-shell.auto-cost-shell {
        padding: 28px 0 18px;
    }
    .auto-cost-section .control-title {
        font-size: 40px;
    }
    .control-flow-ribbon {
        display: none;
    }
    .auto-cost-section .control-journey-track {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: auto;
        gap: 12px;
    }
    .auto-cost-section .control-journey-track li,
    .auto-cost-section .control-journey-track li:nth-child(1),
    .auto-cost-section .control-journey-track li:nth-child(2),
    .auto-cost-section .control-journey-track li:nth-child(3),
    .auto-cost-section .control-journey-track li:nth-child(4),
    .auto-cost-section .control-journey-track li:nth-child(5),
    .auto-cost-section .control-journey-track li:nth-child(6),
    .auto-cost-section .control-journey-track li:nth-child(7),
    .auto-cost-section .control-journey-track li:nth-child(8) {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        min-height: 94px;
        padding: 12px 8px 10px;
        border-top: 1px solid rgba(var(--journey-accent), 0.28);
        background: linear-gradient(180deg, rgba(var(--journey-accent), 0.06), transparent 78%);
        transform: none;
    }
    .auto-cost-section .control-journey-track li:hover {
        transform: none;
    }
}

/* 造价蓝图塔：八个步骤像楼层一样逐层生成成本初稿 */
.auto-cost-section .control-hero-shell.auto-cost-shell {
    padding-top: 44px;
    padding-bottom: 34px;
}
.auto-cost-section .control-dashboard.control-journey.control-blueprint {
    position: relative;
    width: min(1120px, 92%);
    margin: 18px auto 0;
    padding: 76px 0 48px;
}
.control-blueprint-grid {
    position: absolute;
    z-index: 0;
    left: 4%;
    right: 4%;
    top: 58px;
    bottom: 42px;
    overflow: hidden;
    opacity: 0.56;
    clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
    background:
        repeating-linear-gradient(90deg, rgba(73, 216, 242, 0.12) 0 1px, transparent 1px 10%),
        linear-gradient(90deg, transparent, rgba(85, 229, 139, 0.05) 50%, transparent);
    border-bottom: 1px solid rgba(73, 216, 242, 0.3);
    pointer-events: none;
}
.control-blueprint-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(78deg, transparent 0 49.8%, rgba(73, 216, 242, 0.1) 50%, transparent 50.2%),
        linear-gradient(102deg, transparent 0 49.8%, rgba(85, 229, 139, 0.08) 50%, transparent 50.2%);
}
.control-blueprint-grid::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -82px;
    height: 82px;
    background: linear-gradient(180deg, transparent, rgba(73, 216, 242, 0.22), rgba(85, 229, 139, 0.08), transparent);
    filter: blur(8px);
    animation: controlBlueprintScan 8s ease-in-out infinite;
}
@keyframes controlBlueprintScan {
    0%, 12% { transform: translateY(0); opacity: 0; }
    28% { opacity: 0.85; }
    78% { transform: translateY(-420px); opacity: 0.55; }
    100% { transform: translateY(-460px); opacity: 0; }
}
.control-blueprint-roof {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
    padding: 11px 17px;
    border: 1px solid rgba(85, 229, 139, 0.44);
    border-radius: 999px;
    background: rgba(5, 21, 34, 0.9);
    box-shadow:
        0 0 28px rgba(85, 229, 139, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateX(-50%);
}
.control-blueprint-roof::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 34px;
    background: linear-gradient(180deg, rgba(85, 229, 139, 0.76), transparent);
}
.control-blueprint-roof small {
    color: rgba(142, 225, 238, 0.62);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
}
.control-blueprint-roof strong {
    color: #65ec9a;
    font-size: 14px;
    white-space: nowrap;
}
.auto-cost-section .control-blueprint .control-journey-track {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    height: auto;
    gap: 0;
}
.auto-cost-section .control-blueprint .control-journey-track li,
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(1),
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(2),
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(3),
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(4),
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(5),
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(6),
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(7),
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(8) {
    position: relative;
    left: auto;
    top: auto;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    margin: 0 auto;
    padding: 5px 18px;
    border: 0;
    border-top: 1px solid rgba(var(--journey-accent), 0.42);
    background: linear-gradient(90deg, transparent, rgba(var(--journey-accent), 0.095) 18%, rgba(var(--journey-accent), 0.045) 82%, transparent);
    box-shadow: 0 -8px 20px rgba(var(--journey-accent), 0.025);
    transform: none;
}
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(1) { width: 100%; }
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(2) { width: 96%; }
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(3) { width: 92%; }
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(4) { width: 88%; }
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(5) { width: 84%; }
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(6) { width: 80%; }
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(7) { width: 76%; }
.auto-cost-section .control-blueprint .control-journey-track li:nth-child(8) { width: 72%; }
.auto-cost-section .control-blueprint .control-journey-track li:hover {
    transform: translateY(-1px) scaleX(1.012);
    filter: brightness(1.12);
}
.auto-cost-section .control-blueprint .control-journey-track li > span {
    width: 28px;
    height: 28px;
    border-width: 1px;
    font-size: 9px;
    background: rgba(4, 15, 30, 0.94);
    box-shadow: 0 0 18px rgba(var(--journey-accent), 0.14);
}
.auto-cost-section .control-blueprint .control-journey-track li > div {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.auto-cost-section .control-blueprint .control-journey-track b {
    font-size: 12px;
    white-space: nowrap;
}
.auto-cost-section .control-blueprint .control-journey-track small {
    margin: 0;
    font-size: 10px;
}
.auto-cost-section .control-blueprint .control-journey-track em {
    grid-column: auto;
    align-self: center;
    padding: 3px 9px;
    font-size: 8px;
}
.control-blueprint-foundation {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px auto 0;
    color: rgba(222, 238, 243, 0.5);
    font-size: 10px;
    font-weight: 800;
}
.control-blueprint-foundation i {
    width: clamp(18px, 4vw, 54px);
    height: 1px;
    background: linear-gradient(90deg, rgba(73, 216, 242, 0.18), rgba(85, 229, 139, 0.62));
}
.control-blueprint-foundation strong {
    color: rgba(101, 236, 154, 0.88);
    font-size: 11px;
}
body:not(.dark) .control-blueprint-roof {
    background: rgba(246, 252, 255, 0.94);
    border-color: rgba(31, 168, 111, 0.28);
}
body:not(.dark) .auto-cost-section .control-blueprint .control-journey-track li > span {
    background: rgba(246, 252, 255, 0.96);
}
body:not(.dark) .control-blueprint-foundation {
    color: rgba(16, 43, 59, 0.52);
}

@media (max-width: 768px) {
    .auto-cost-section .control-dashboard.control-journey.control-blueprint {
        width: 100%;
        padding: 68px 0 36px;
    }
    .control-blueprint-grid {
        left: 0;
        right: 0;
        opacity: 0.34;
        clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
    }
    .auto-cost-section .control-blueprint .control-journey-track {
        display: flex;
        flex-direction: column-reverse;
        gap: 0;
    }
    .auto-cost-section .control-blueprint .control-journey-track li,
    .auto-cost-section .control-blueprint .control-journey-track li:nth-child(1),
    .auto-cost-section .control-blueprint .control-journey-track li:nth-child(2),
    .auto-cost-section .control-blueprint .control-journey-track li:nth-child(3),
    .auto-cost-section .control-blueprint .control-journey-track li:nth-child(4),
    .auto-cost-section .control-blueprint .control-journey-track li:nth-child(5),
    .auto-cost-section .control-blueprint .control-journey-track li:nth-child(6),
    .auto-cost-section .control-blueprint .control-journey-track li:nth-child(7),
    .auto-cost-section .control-blueprint .control-journey-track li:nth-child(8) {
        width: 100%;
        min-height: 46px;
        padding: 7px 8px;
    }
    .auto-cost-section .control-blueprint .control-journey-track li > div {
        display: block;
    }
    .auto-cost-section .control-blueprint .control-journey-track small {
        margin-top: 2px;
    }
    .control-blueprint-foundation {
        gap: 7px;
        font-size: 8px;
    }
}