/* ================================================================
   Landing CSS v3.0 — Landing & Auth Page Styles
   所有颜色引用 app.css 统一令牌体系
   ================================================================ */

/* ===== 导航栏 ===== */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--c-border);
    transition: box-shadow var(--dur-slow) var(--ease);
}
[data-theme="dark"] .landing-nav {
    background: rgba(26, 26, 28, 0.72);
}
.landing-nav.scrolled {
    box-shadow: 0 1px 24px rgba(0, 0, 0, 0.04);
}
.landing-nav .nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    text-decoration: none;
    color: var(--c-text);
    font-weight: var(--fw-bold);
    font-size: 1.0625rem;
    letter-spacing: -.01em;
}
.nav-brand .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--r-md);
    background: var(--c-accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 2px 8px var(--c-accent-glow);
    transition: transform var(--dur-slow) var(--ease);
}
.nav-brand:hover .brand-mark {
    transform: scale(1.08) rotate(-3deg);
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.nav-links a {
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    text-decoration: none;
    font-weight: var(--fw-medium);
    transition: color var(--dur-base) var(--ease);
    position: relative;
}
.nav-links a::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--c-accent);
    border-radius: 1px;
    transform: scaleX(0);
    transition: transform var(--dur-slow) var(--ease);
}
.nav-links a:hover {
    color: var(--c-accent);
}
.nav-links a:hover::after {
    transform: scaleX(1);
}
.nav-actions {
    display: flex;
    align-items: center;
    gap: .625rem;
}

/* ===== 按钮（landing 专用） ===== */
.btn-landing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) 1.125rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    font-family: var(--font-sans);
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease);
    white-space: nowrap;
    text-decoration: none;
}
.btn-landing:active {
    transform: scale(.97);
}
.btn-landing-ghost {
    background: transparent;
    color: var(--c-text-2);
}
.btn-landing-ghost:hover {
    background: rgba(0, 0, 0, .04);
    color: var(--c-text);
}
.btn-landing-primary {
    background: var(--c-accent-gradient);
    color: #fff;
    box-shadow: 0 1px 3px var(--c-accent-glow);
}
.btn-landing-primary:hover {
    box-shadow: 0 4px 14px var(--c-accent-glow);
    transform: translateY(-1px);
}
.btn-landing-outline {
    background: #fff;
    color: var(--c-text);
    border: 1.5px solid var(--c-border);
}
.btn-landing-outline:hover {
    border-color: var(--c-border-hover);
    background: var(--c-bg);
    transform: translateY(-1px);
}
.btn-landing-lg {
    padding: var(--space-3) 1.75rem;
    font-size: var(--fs-md);
    border-radius: var(--r-lg);
}

/* ===== Hero ===== */
.hero-section {
    position: relative;
    overflow: hidden;
    padding: 6rem 2rem 5rem;
    text-align: center;
}
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.hero-bg::before {
    content: "";
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(ellipse at center, var(--c-accent-glow) 0%, transparent 60%);
    filter: blur(40px);
}
.hero-bg::after {
    content: "";
    position: absolute;
    top: 10%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(124, 58, 237, .06) 0%, transparent 70%);
    filter: blur(30px);
}
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    animation: heroFadeIn .8s var(--ease) both;
}
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--c-accent-light);
    color: var(--c-accent);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    padding: var(--space-1) .875rem;
    border-radius: var(--r-full);
    margin-bottom: var(--space-6);
    border: 1px solid var(--c-accent-glow);
}
.hero-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-accent);
    animation: dotPulse 2s infinite;
}
@keyframes dotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}
.hero-section h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: var(--fw-extrabold);
    color: var(--c-text);
    letter-spacing: -.03em;
    line-height: 1.15;
    margin-bottom: var(--space-4);
}
.hero-section h1 .gradient-text {
    background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-purple) 50%, #ec4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}
.hero-section .hero-desc {
    font-size: 1.125rem;
    color: var(--c-text-2);
    max-width: 560px;
    margin: 0 auto var(--space-8);
    line-height: 1.7;
}
.hero-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 3.5rem;
    flex-wrap: wrap;
}
.hero-stat-item {
    text-align: center;
}
.hero-stat-item .num {
    font-size: 1.75rem;
    font-weight: var(--fw-extrabold);
    color: var(--c-text);
    letter-spacing: -.02em;
}
.hero-stat-item .label {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
    margin-top: .125rem;
}

/* ===== Section 通用 ===== */
.section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 2rem;
}
.section-label {
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: var(--space-3);
}
.section-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--fw-extrabold);
    color: var(--c-text);
    letter-spacing: -.02em;
    margin-bottom: var(--space-3);
    display: block;
    align-items: unset;
    gap: 0;
}
.section-desc {
    text-align: center;
    font-size: 1.0625rem;
    color: var(--c-text-2);
    max-width: 560px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

/* ===== 功能卡片 ===== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}
.feature-card-new {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 2rem 1.75rem;
    transition: all var(--dur-slow) var(--ease);
    position: relative;
    overflow: hidden;
}
.feature-card-new::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--card-accent, var(--c-accent)), transparent);
    transform: scaleX(0);
    transition: transform var(--dur-slow) var(--ease);
}
.feature-card-new:hover {
    border-color: var(--c-border-hover);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.feature-card-new:hover::before {
    transform: scaleX(1);
}
.feature-card-new .feature-icon-new {
    width: 48px;
    height: 48px;
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
    transition: transform var(--dur-slow) var(--ease);
}
.feature-card-new:hover .feature-icon-new {
    transform: scale(1.1) rotate(-5deg);
}
.feature-icon-new.purple { background: var(--c-accent-light); color: var(--c-accent); }
.feature-icon-new.green { background: var(--c-success-bg); color: var(--c-success); }
.feature-icon-new.amber { background: var(--c-warning-bg); color: var(--c-warning); }
.feature-icon-new.blue { background: var(--c-info-bg); color: var(--c-info); }
.feature-icon-new.pink { background: rgba(236, 72, 153, .1); color: #ec4899; }
.feature-icon-new.indigo { background: var(--c-purple-bg); color: var(--c-purple); }
.feature-card-new h3 {
    font-size: 1.0625rem;
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin-bottom: var(--space-2);
}
.feature-card-new p {
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    line-height: 1.65;
}

/* ===== 流程步骤 ===== */
.steps-section {
    background: var(--c-bg);
    padding: 5rem 2rem;
}
.steps-inner {
    max-width: 1000px;
    margin: 0 auto;
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}
.step-card {
    text-align: center;
    position: relative;
}
.step-card .step-num {
    width: 56px;
    height: 56px;
    border-radius: var(--r-xl);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: var(--fw-extrabold);
    color: var(--c-accent);
    margin-bottom: var(--space-5);
    transition: all var(--dur-slow) var(--ease);
    box-shadow: var(--shadow-xs);
}
.step-card:hover .step-num {
    background: var(--c-accent-gradient);
    color: #fff;
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--c-accent-glow);
}
.step-card h3 {
    font-size: 1.0625rem;
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin-bottom: var(--space-2);
}
.step-card p {
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    line-height: 1.65;
}
.step-connector {
    position: absolute;
    top: 28px;
    right: -1rem;
    width: 2rem;
    height: 2px;
    background: linear-gradient(90deg, var(--c-border), transparent);
}
.step-card:last-child .step-connector {
    display: none;
}

/* ===== CTA ===== */
.cta-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 5rem 2rem;
    text-align: center;
}
.cta-card {
    background: var(--c-accent-gradient);
    border-radius: var(--r-3xl);
    padding: 3.5rem 2rem;
    position: relative;
    overflow: hidden;
}
.cta-card::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, .1) 0%, transparent 70%);
    filter: blur(20px);
}
.cta-card h2 {
    font-size: 1.875rem;
    font-weight: var(--fw-extrabold);
    color: #fff;
    margin-bottom: var(--space-3);
    position: relative;
}
.cta-card p {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 2rem;
    position: relative;
}
.cta-card .btn-landing-outline {
    background: #fff;
    color: var(--c-accent);
    border: none;
}
.cta-card .btn-landing-outline:hover {
    background: var(--c-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

/* ===== Footer ===== */
.landing-footer {
    border-top: 1px solid var(--c-border);
    padding: 2.5rem 2rem;
    text-align: center;
}
.landing-footer p {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
    line-height: 1.8;
}

/* ===== 滚动入场 ===== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Auth 页面 ===== */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg);
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}
.auth-body::before {
    content: "";
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--c-accent-glow) 0%, transparent 60%);
    filter: blur(40px);
    pointer-events: none;
}
.auth-body::after {
    content: "";
    position: absolute;
    bottom: -10%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(124, 58, 237, .04) 0%, transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}
.auth-wrap {
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
    animation: authSlideUp .6s var(--ease) both;
}
@keyframes authSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.auth-back {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    text-decoration: none;
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-6);
    transition: color var(--dur-base) var(--ease);
}
.auth-back:hover {
    color: var(--c-accent);
}
.auth-card-new {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-2xl);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-lg);
}
.auth-logo {
    text-align: center;
    margin-bottom: 1.75rem;
}
.auth-logo .logo-mark {
    width: 52px;
    height: 52px;
    border-radius: var(--r-xl);
    background: var(--c-accent-gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: var(--space-4);
    box-shadow: 0 4px 14px var(--c-accent-glow);
    transition: transform var(--dur-slow) var(--ease);
}
.auth-logo .logo-mark:hover {
    transform: scale(1.08) rotate(-5deg);
}
.auth-logo h1 {
    font-size: 1.375rem;
    font-weight: var(--fw-extrabold);
    color: var(--c-text);
    letter-spacing: -.02em;
}
.auth-logo .subtitle {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
    margin-top: var(--space-1);
}
.auth-field {
    margin-bottom: 1.125rem;
}
.auth-field label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    margin-bottom: .375rem;
}
.auth-input {
    width: 100%;
    padding: .625rem .875rem;
    font-size: var(--fs-md);
    font-family: var(--font-sans);
    color: var(--c-text);
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-lg);
    outline: none;
    transition: all var(--dur-base) var(--ease);
    box-sizing: border-box;
}
.auth-input::placeholder {
    color: var(--c-text-3);
}
.auth-input:focus {
    border-color: var(--c-accent);
    box-shadow: var(--shadow-glow);
}
.auth-input.error {
    border-color: var(--c-danger);
    box-shadow: 0 0 0 3px var(--c-danger-bg);
}
.auth-code-row {
    display: flex;
    gap: .625rem;
}
.auth-code-row .auth-input {
    flex: 1;
}
.auth-code-btn {
    flex-shrink: 0;
    padding: .625rem var(--space-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    font-family: var(--font-sans);
    background: var(--c-accent-light);
    color: var(--c-accent);
    border: 1.5px solid transparent;
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease);
    white-space: nowrap;
}
.auth-code-btn:hover:not(:disabled) {
    background: var(--c-accent-glow);
}
.auth-code-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.auth-hint {
    font-size: var(--fs-xs);
    color: var(--c-text-3);
    margin-top: .25rem;
}
.auth-submit {
    width: 100%;
    padding: var(--space-3);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    font-family: var(--font-sans);
    background: var(--c-accent-gradient);
    color: #fff;
    border: none;
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: all var(--dur-slow) var(--ease);
    margin-top: var(--space-2);
    box-shadow: 0 1px 3px var(--c-accent-glow);
}
.auth-submit:hover:not(:disabled) {
    box-shadow: 0 4px 16px var(--c-accent-glow);
    transform: translateY(-1px);
}
.auth-submit:active:not(:disabled) {
    transform: translateY(0) scale(.98);
}
.auth-submit:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.auth-footer {
    text-align: center;
    margin-top: var(--space-6);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
}
.auth-footer a {
    color: var(--c-accent);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: color var(--dur-base) var(--ease);
}
.auth-footer a:hover {
    color: var(--c-accent-hover);
}
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 1.5rem 0;
    color: var(--c-border-hover);
    font-size: var(--fs-xs);
}
.auth-divider::before, .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--c-border);
}

/* ===== 导航汉堡菜单 ===== */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--c-text);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--r-sm);
}
.nav-toggle:hover {
    background: var(--c-surface-2);
}

/* ===== Hero Mesh 背景 ===== */
.hero-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(91,91,214,.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(124,58,237,.06) 0%, transparent 40%),
        radial-gradient(circle at 60% 70%, rgba(99,102,241,.05) 0%, transparent 40%);
}

/* ===== Hero Stats 数字 ===== */
.hero-stat-item .num {
    font-variant-numeric: tabular-nums;
}

/* ===== 产品截图 Mockup ===== */
.hero-mockup {
    max-width: 960px;
    margin: 3.5rem auto 0;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}
.mockup-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(ellipse at center, var(--c-accent-glow) 0%, transparent 60%);
    filter: blur(30px);
    z-index: -1;
}
.mockup-browser {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-2xl);
    box-shadow: 0 24px 80px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06);
    overflow: hidden;
    transform: perspective(1200px) rotateX(2deg);
    transition: transform var(--dur-slow) var(--ease);
}
.mockup-browser:hover {
    transform: perspective(1200px) rotateX(0deg);
}
.mockup-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border);
}
.mockup-browser-bar .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.mockup-browser-bar .dot.red { background: #ff5f57; }
.mockup-browser-bar .dot.yellow { background: #febc2e; }
.mockup-browser-bar .dot.green { background: #28c840; }
.mockup-url {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: var(--c-text-3);
    background: var(--c-surface);
    border-radius: var(--r-full);
    padding: 3px 12px;
    margin-left: 8px;
    font-family: var(--font-mono);
}
.mockup-content {
    display: flex;
    min-height: 320px;
}
.mockup-sidebar {
    width: 200px;
    flex-shrink: 0;
    padding: 16px 12px;
    background: var(--c-surface-2);
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ms-item {
    height: 32px;
    border-radius: var(--r-md);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
}
.ms-item.active {
    background: var(--c-accent-light);
    border-color: var(--c-accent-glow);
}
.mockup-main {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mockup-hero-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--c-surface-2);
    border-radius: var(--r-xl);
    border: 1px solid var(--c-border);
}
.mockup-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 6px solid var(--c-surface-3);
    border-top-color: var(--c-accent);
    flex-shrink: 0;
}
.mockup-ring-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mockup-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.mockup-stat {
    padding: 14px;
    background: var(--c-surface-2);
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mockup-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--c-surface-3);
}
.mockup-bar.w30 { width: 30%; }
.mockup-bar.w40 { width: 40%; }
.mockup-bar.w50 { width: 50%; }
.mockup-bar.w60 { width: 60%; }
.mockup-bar.w70 { width: 70%; }
.mockup-bar.w80 { width: 80%; }
.mockup-bar.w90 { width: 90%; }
.mockup-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 80px;
    padding: 12px;
    background: var(--c-surface-2);
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
}
.mc-bar {
    flex: 1;
    background: linear-gradient(to top, var(--c-accent), var(--c-purple));
    border-radius: 4px 4px 0 0;
    opacity: .7;
    transition: opacity var(--dur-base) var(--ease);
}
.mockup-chart:hover .mc-bar {
    opacity: 1;
}

/* ===== 信任背书 ===== */
.trust-section {
    padding: 3rem 2rem;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}
.trust-inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.trust-label {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-6);
}
.trust-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.trust-item {
    text-align: center;
}
.trust-num {
    font-size: 1.75rem;
    font-weight: var(--fw-extrabold);
    color: var(--c-text);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.trust-desc {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
    margin-top: .25rem;
}
.trust-divider {
    width: 1px;
    height: 40px;
    background: var(--c-border);
}

/* ===== AI 对话演示 ===== */
.demo-chat {
    max-width: 640px;
    margin: 0 auto;
}
.demo-chat-window {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.demo-chat-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-2);
}
.demo-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    font-weight: var(--fw-bold);
    color: var(--c-text-2);
}
.demo-chat-name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
}
.demo-chat-status {
    font-size: var(--fs-xs);
    color: var(--c-text-3);
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: 2px;
}
.demo-chat-body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 360px;
    background: var(--c-bg);
}
.demo-msg {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
    max-width: 80%;
    animation: demoMsgIn .4s var(--ease) both;
}
.demo-msg.in {
    align-self: flex-start;
}
.demo-msg.out {
    align-self: flex-end;
    flex-direction: row-reverse;
}
@keyframes demoMsgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.demo-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: var(--fw-bold);
    color: #fff;
    flex-shrink: 0;
}
.demo-msg-avatar.buyer { background: var(--c-text-3); }
.demo-msg-avatar.ai { background: var(--c-accent-gradient); }
.demo-msg-bubble {
    padding: .625rem 1rem;
    border-radius: var(--r-lg);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.demo-msg.in .demo-msg-bubble {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-bottom-left-radius: 4px;
}
.demo-msg.out .demo-msg-bubble {
    background: var(--c-accent-gradient);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.demo-chat-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
}
.demo-tag {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: var(--fs-xs);
    color: var(--c-accent);
    font-weight: var(--fw-semibold);
    background: var(--c-accent-light);
    padding: .25rem .75rem;
    border-radius: var(--r-full);
}

/* ===== 使用流程时间标注 ===== */
.step-card .step-time {
    font-size: var(--fs-xs);
    color: var(--c-accent);
    font-weight: var(--fw-semibold);
    margin-top: var(--space-2);
    background: var(--c-accent-light);
    padding: .125rem .625rem;
    border-radius: var(--r-full);
    display: inline-block;
}

/* ===== 对比表格 ===== */
.compare-table {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.compare-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
.compare-row:not(:last-child) {
    border-bottom: 1px solid var(--c-border);
}
.compare-row.compare-header {
    background: var(--c-surface-2);
}
.compare-cell {
    padding: var(--space-4) var(--space-5);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.compare-cell:first-child {
    text-align: left;
    justify-content: flex-start;
    font-weight: var(--fw-semibold);
    color: var(--c-text);
}
.compare-cell.highlight {
    background: var(--c-accent-light);
    color: var(--c-accent);
    font-weight: var(--fw-bold);
}
.compare-header .compare-cell {
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
}
.compare-header .compare-cell.highlight {
    color: var(--c-accent);
}
.compare-yes {
    color: var(--c-success);
    font-weight: var(--fw-bold);
    font-size: 1.125rem;
}
.compare-no {
    color: var(--c-text-3);
    font-weight: var(--fw-bold);
    font-size: 1.125rem;
}

/* ===== 用户评价 ===== */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}
.testimonial-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 2rem 1.75rem;
    transition: all var(--dur-slow) var(--ease);
}
.testimonial-card:hover {
    border-color: var(--c-border-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.testimonial-stars {
    color: #f59e0b;
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: var(--space-3);
}
.testimonial-text {
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    line-height: 1.7;
    margin-bottom: var(--space-5);
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}
.testimonial-name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
}
.testimonial-shop {
    font-size: var(--fs-xs);
    color: var(--c-text-3);
    margin-top: 2px;
}

/* ===== FAQ ===== */
.faq-list {
    max-width: 760px;
    margin: 0 auto;
}
.faq-item {
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    margin-bottom: var(--space-3);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease);
}
.faq-item[open] {
    border-color: var(--c-accent);
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    list-style: none;
    user-select: none;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-icon {
    transition: transform var(--dur-base) var(--ease);
    color: var(--c-text-3);
    flex-shrink: 0;
}
.faq-item[open] .faq-icon {
    transform: rotate(90deg);
}
.faq-answer {
    padding: 0 var(--space-5) var(--space-4);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    line-height: 1.7;
}

/* ===== CTA ===== */
.cta-actions {
    margin-top: var(--space-4);
}
.cta-sub {
    margin-top: var(--space-4);
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.7);
    position: relative;
}

/* ===== Footer 多列 ===== */
.landing-footer {
    padding: 3.5rem 2rem 2rem;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
}
.footer-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}
.footer-col {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.0625rem;
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin-bottom: .5rem;
}
.footer-brand .brand-mark.sm {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
}
.footer-desc {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
    line-height: 1.6;
}
.footer-col h4 {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin-bottom: .25rem;
}
.footer-col a, .footer-col span {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
    text-decoration: none;
    transition: color var(--dur-base) var(--ease);
}
.footer-col a:hover {
    color: var(--c-accent);
}
.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--c-border);
}
.footer-bottom p {
    font-size: var(--fs-xs);
    color: var(--c-text-3);
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--c-surface);
        border-bottom: 1px solid var(--c-border);
        flex-direction: column;
        padding: var(--space-4) 2rem;
        gap: var(--space-3);
        box-shadow: var(--shadow-md);
    }
    .nav-links.open {
        display: flex;
    }
    .nav-toggle {
        display: block;
    }
    .nav-actions .btn-landing {
        display: none;
    }
    .nav-actions .btn-landing-primary {
        display: inline-flex;
    }
    .hero-section {
        padding: 4rem 1.5rem 2rem;
    }
    .hero-stats {
        gap: 1.5rem;
        flex-wrap: wrap;
    }
    .hero-mockup {
        padding: 0 1rem;
        margin-top: 2.5rem;
    }
    .mockup-sidebar {
        display: none;
    }
    .mockup-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .trust-stats {
        gap: 1.25rem;
    }
    .trust-divider {
        display: none;
    }
    .steps-grid {
        grid-template-columns: 1fr;
    }
    .step-connector {
        display: none;
    }
    .section {
        padding: 3.5rem 1.5rem;
    }
    .cta-card {
        padding: 2.5rem 1.5rem;
    }
    .compare-table {
        font-size: var(--fs-xs);
    }
    .compare-cell {
        padding: var(--space-3) var(--space-2);
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    .demo-chat-body {
        min-height: 280px;
    }
}
@media (max-width: 480px) {
    .compare-table {
        overflow-x: auto;
    }
    .compare-row {
        min-width: 480px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   补充：features / pricing / about 页面缺失样式
   ================================================================ */

/* ===== 页面 Hero ===== */
.page-hero {
    padding: 5rem 2rem 3.5rem;
    text-align: center;
    background: var(--c-bg);
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 20%, var(--c-accent-glow) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, var(--c-accent-glow) 0%, transparent 50%);
    pointer-events: none;
}
.page-hero .container {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}
.page-hero h1 {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-extrabold);
    color: var(--c-text);
    letter-spacing: var(--tracking-tighter);
    margin-bottom: var(--space-4);
    line-height: var(--lh-tight);
}
.hero-sub {
    font-size: var(--fs-lg);
    color: var(--c-text-2);
    line-height: var(--lh-relaxed);
    max-width: 560px;
    margin: 0 auto;
}

/* ===== 功能卡片（旧版 class 兼容） ===== */
.features-section {
    padding: 3rem 2rem 5rem;
    background: var(--c-bg);
}
.features-section .container {
    max-width: 1100px;
    margin: 0 auto;
}
.feature-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 2rem 1.75rem;
    transition: all var(--dur-slow) var(--ease);
    position: relative;
    overflow: hidden;
}
.feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
    transform: scaleX(0);
    transition: transform var(--dur-slow) var(--ease);
}
.feature-card:hover {
    border-color: var(--c-border-hover);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.feature-card:hover::before {
    transform: scaleX(1);
}
.feature-card .feature-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
    background: var(--c-accent-light);
    color: var(--c-accent);
    transition: transform var(--dur-slow) var(--ease);
}
.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(-5deg);
}
.feature-card h3 {
    font-size: 1.0625rem;
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin-bottom: var(--space-2);
}
.feature-card p {
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    line-height: 1.65;
}

/* ===== 定价卡片 ===== */
.pricing-section {
    padding: 3rem 2rem 5rem;
    background: var(--c-bg);
}
.pricing-section .container {
    max-width: 1100px;
    margin: 0 auto;
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    align-items: start;
}
.pricing-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 2rem 1.75rem;
    transition: all var(--dur-slow) var(--ease);
    position: relative;
    display: flex;
    flex-direction: column;
}
.pricing-card:hover {
    border-color: var(--c-border-hover);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.pricing-card.featured {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 1px var(--c-accent), var(--shadow-lg);
}
.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-gold-gradient);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--r-full);
    letter-spacing: .02em;
    box-shadow: 0 2px 8px var(--c-gold-glow);
}
.pricing-header {
    text-align: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--c-border);
}
.pricing-header h3 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin-bottom: var(--space-3);
}
.price {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-extrabold);
    color: var(--c-text);
    letter-spacing: var(--tracking-tighter);
    line-height: 1;
    margin-bottom: var(--space-2);
}
.price .currency {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--c-text-2);
    vertical-align: top;
    margin-right: 2px;
}
.price .period {
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    color: var(--c-text-3);
}
.pricing-desc {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}
.pricing-features {
    list-style: none;
    flex: 1;
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.pricing-features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    line-height: 1.5;
}
.pricing-features li svg {
    flex-shrink: 0;
}
.pricing-card .btn {
    margin-top: auto;
}

/* ===== 关于页面 ===== */
.about-section {
    padding: 3rem 2rem 5rem;
    background: var(--c-bg);
}
.about-section .container {
    max-width: 800px;
    margin: 0 auto;
}
.about-content h2 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    letter-spacing: var(--tracking-tight);
}
.about-content h2:first-child {
    margin-top: 0;
}
.about-content p {
    font-size: var(--fs-md);
    color: var(--c-text-2);
    line-height: 1.9;
    margin-bottom: var(--space-4);
}

/* ===== 响应式补充 ===== */
@media (max-width: 768px) {
    .page-hero {
        padding: 3.5rem 1.5rem 2.5rem;
    }
    .page-hero h1 {
        font-size: var(--fs-3xl);
    }
    .hero-sub {
        font-size: var(--fs-md);
    }
    .features-section,
    .pricing-section,
    .about-section {
        padding: 2rem 1.5rem 3.5rem;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }
    .pricing-card.featured {
        order: -1;
    }
}