/* ========== landing 页面专属变量补齐（site.css 已有大部分，落地页加 hero 氛围光补差） ========== */
:root {
    --hero-glow-up: rgba(234, 56, 0, 0.10);
    --hero-glow-down: rgba(86, 183, 170, 0.10);
}
[data-theme="light"] {
    --hero-glow-up: rgba(234, 56, 0, 0.06);
    --hero-glow-down: rgba(86, 183, 170, 0.06);
}

/* 全局重置（* / html / body / a）已统一收归 site.css —— 三页共享，避免跨页
   box-sizing / a 标签 text-decoration 不一致导致 navbar 宽度跳动与按钮下划线。 */

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ========== 顶部导航栏 ========== */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}
.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    flex-wrap: nowrap;            /* 极窄屏下禁止品牌/链接换到第二行 */
}
.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;  /* 品牌标题可点击回顶，提供手型提示 */
    flex-shrink: 0;               /* 防止窄屏被挤压成"只剩圆点" */
    white-space: nowrap;
}
/* 导航样式（.navbar / .brand / .brand-dot / .nav-links）已统一收归 site.css，
   本页不再覆盖 —— 避免跨页 gap / box-shadow 等细微差异导致 header 布局移动与闪烁。
   .btn / .btn-primary / .btn-ghost 同样已在 site.css 公共共享。 */

/* ========== 顶部场景轮播图（左右翻页 + 自动播放 + 下方 4 场景说明区） ========== */
.scene {
    padding: 32px 0 28px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

/* ===== 主体轮播图 ===== */
/* 用 aspect-ratio 锁定真实原图比例 1.875:1（3000x1600），配合 contain 让图片完整显示 */
.carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 15 / 8;                    /* 3000:1600 = 15:8 = 1.875:1，与原图精确匹配 */
    max-height: 640px;                       /* 宽屏封顶 */
    background: #ffffff;                    /* contain 模式下图片周围留白用白底 */
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px var(--shadow-color);
}
.carousel-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;                     /* contain：图片完整显示，不裁切 */
    object-position: center center;
    background: #ffffff;
    user-select: none;
    -webkit-user-drag: none;
    opacity: 0;
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.carousel-img.is-active { opacity: 1; z-index: 1; }

/* 左右切换箭头：圆形玻璃感按钮，居中垂直 */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-primary) 75%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
    z-index: 3;
}
.carousel-arrow:hover,
.carousel-arrow:focus-visible {
    opacity: 1;
    background: var(--bg-primary);
    transform: translateY(-50%) scale(1.06);
}
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-arrow-prev { left: 18px; }
.carousel-arrow-next { right: 18px; }

/* 圆点指示器：底部居中，激活态横向伸长 */
.carousel-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--bg-primary) 50%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
}
.carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    border: none;
    padding: 0;
    background: color-mix(in srgb, var(--text-primary) 28%, transparent);
    cursor: pointer;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.2s ease;
}
.carousel-dot:hover { background: color-mix(in srgb, var(--text-primary) 50%, transparent); }
.carousel-dot.is-active {
    width: 26px;
    background: var(--accent-blue);
}

/* ===== 下方 4 场景说明区 ===== */
/* 与下方 #perks 区块之间留出空间 */
.scene-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 22px;
}
.scene-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px 18px 16px 22px;            /* 左侧 22px 留出色条空间（色条用 ::before 绝对定位，不挤压内容） */
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease,
                box-shadow 0.25s ease, background 0.25s ease;
}
/* 左侧色条用伪元素绝对定位，避免 border-left 切换宽度造成内容抖动 */
.scene-card::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 14px;
    bottom: 14px;
    width: 3px;
    background: var(--accent-blue);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                top 0.3s ease, bottom 0.3s ease;
}
.scene-card.is-gold::before { background: var(--accent-gold); }
.scene-card.is-up::before { background: var(--color-up); }
.scene-card.is-down::before { background: var(--color-down); }

.scene-card-tag {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-blue);
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}
.scene-card.is-gold .scene-card-tag { color: var(--accent-gold); }
.scene-card.is-up .scene-card-tag { color: var(--color-up); }
.scene-card.is-down .scene-card-tag { color: var(--color-down); }
.scene-card-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.6;
}
/* Hover / Focus / Active */
.scene-card:hover,
.scene-card:focus-visible {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--accent-blue) 4%, var(--bg-secondary));
}
.scene-card.is-gold:hover,
.scene-card.is-gold:focus-visible { background: color-mix(in srgb, var(--accent-gold) 4%, var(--bg-secondary)); }
.scene-card.is-up:hover,
.scene-card.is-up:focus-visible { background: color-mix(in srgb, var(--color-up) 4%, var(--bg-secondary)); }
.scene-card.is-down:hover,
.scene-card.is-down:focus-visible { background: color-mix(in srgb, var(--color-down) 4%, var(--bg-secondary)); }

/* Active：实色边框 + 色条伸长 + 加深底色 + 上浮 + 阴影，视觉强化明显 */
.scene-card.is-active {
    border-color: var(--accent-blue);
    background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-secondary));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-blue) 20%, transparent);
    transform: translateY(-2px);
}
.scene-card.is-active::before {
    width: 5px;                               /* 色条 3px → 5px 加粗，且保持 top/bottom 距离，视觉更醒目 */
}
.scene-card.is-gold.is-active {
    border-color: var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 12%, var(--bg-secondary));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-gold) 20%, transparent);
    transform: translateY(-2px);
}
.scene-card.is-up.is-active {
    border-color: var(--color-up);
    background: color-mix(in srgb, var(--color-up) 12%, var(--bg-secondary));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-up) 20%, transparent);
    transform: translateY(-2px);
}
.scene-card.is-down.is-active {
    border-color: var(--color-down);
    background: color-mix(in srgb, var(--color-down) 12%, var(--bg-secondary));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-down) 20%, transparent);
    transform: translateY(-2px);
}
/* Active 状态：tag 字加粗（增强视觉重心，让"当前选中"一眼可辨） */
.scene-card.is-active .scene-card-tag {
    font-weight: 700;
    font-size: 15px;                          /* 字号同步放大，主次更分明 */
}

/* ========== Hero 首屏 ========== */
.hero {
    position: relative;
    padding: 140px 0 80px;
    overflow: hidden;
}
/* 极淡的涨跌色渐变氛围光，保持低饱和 */
.hero::before {
    content: '';
    position: absolute;
    top: -20%; left: -10%;
    width: 60%; height: 80%;
    background: radial-gradient(circle, var(--hero-glow-up) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -30%; right: -10%;
    width: 60%; height: 80%;
    background: radial-gradient(circle, var(--hero-glow-down) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.hero-inner { position: relative; z-index: 1; text-align: center; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-blue);
    background: var(--tint-blue);              /* 浅/深色统一 tint，深色下自动放大到 0.14 */
    border: 1px solid var(--tint-border-blue);  /* 同上，深色下描边更亮才能看清 */
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 24px;
}
.hero h1 {
    font-size: clamp(28px, 5vw, 46px);
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.25;
    margin-bottom: 18px;
}
.hero h1 .grad {
    background: linear-gradient(135deg, var(--color-up), var(--accent-gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-sub {
    font-size: clamp(14px, 2vw, 16px);
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 36px;
}
.hero-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
/* Hero 首屏风险提示：轻量克制，低饱和暖红，仅作首屏即见的免责声明入口 */
.hero-risk {
    margin-top: 28px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.6;
}
.hero-risk a {
    color: var(--color-up);
    border-bottom: 1px dashed color-mix(in srgb, var(--color-up) 40%, transparent);
    transition: opacity 0.15s ease;
}
.hero-risk a:hover { opacity: 0.7; }

/* ========== 通用区块 ========== */
section { padding: 70px 0; }
.section-head { text-align: center; margin-bottom: 48px; }
.section-title {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}
.section-title::after {
    content: '';
    display: block;
    width: 36px; height: 2px;
    background: linear-gradient(90deg, var(--accent-blue), transparent);
    margin: 12px auto 0;
    border-radius: 2px;
}
.section-desc {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ========== 功能卡片网格 ========== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.feature-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 24px 22px;
    transition: transform 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}
.feature-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-blue);
}
/* 左侧色条，与系统标签风格一致 */
.feature-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent-blue);
}
.feature-card.gold::before { background: var(--accent-gold); }
.feature-card.up::before { background: var(--color-up); }
.feature-card.down::before { background: var(--color-down); }
.feature-card.purple::before { background: #a371f7; }

.feature-icon {
    width: 38px; height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tint-blue);              /* 深色下用 token 自动放大，深灰底上仍可见 */
    color: var(--accent-blue);
    margin-bottom: 14px;
}
.feature-card.gold .feature-icon { background: var(--tint-gold); color: var(--accent-gold); }
.feature-card.up .feature-icon { background: var(--tint-up); color: var(--color-up); }
.feature-card.down .feature-icon { background: var(--tint-down); color: var(--color-down); }
.feature-card.purple .feature-icon { background: var(--tint-purple); color: #a371f7; }
.feature-icon svg { width: 20px; height: 20px; }

.feature-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}
.feature-value {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 14px;
    line-height: 1.6;
}
.feature-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.feature-points li {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    padding-left: 14px;
    position: relative;
}
.feature-points li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent-blue);
    opacity: 0.6;
}

/* ========== 适用人群 ========== */
.audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.audience-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 22px 18px;
    text-align: center;
    transition: all 0.2s ease;
}
.audience-card:hover { border-color: var(--accent-blue); transform: translateY(-2px); }
.audience-emoji { font-size: 26px; margin-bottom: 10px; }
.audience-name { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.audience-desc { font-size: 12px; color: var(--text-secondary); font-weight: 500; line-height: 1.6; }

/* ========== 核心特性 ========== */
.perks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.perk {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 24px 18px;
    text-align: center;
}
.perk-num {
    font-size: 22px;
    font-weight: 600;
    color: var(--accent-blue);
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.perk-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.perk-desc { font-size: 11px; color: var(--text-muted); font-weight: 500; }

/* ========== 公众号引导区（核心转化） ========== */
.cta-section {
    padding: 80px 0;
}
.cta-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 48px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 8px 40px var(--shadow-color);
}
.cta-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-up), var(--accent-gold), var(--accent-blue));
}
.cta-title {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}
.cta-desc {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 16px;
}
/* 隐私承诺行：轻量左侧色条 + 极淡蓝底，与 CTA 区蓝色主调统一，不引入新色相 */
.privacy-promise {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 9px 12px;
    border-left: 2px solid var(--accent-blue);
    background: rgba(88, 166, 255, 0.08);
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-blue);
    line-height: 1.4;
}
.privacy-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}
.steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.step-num {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step b { color: var(--accent-blue); font-weight: 600; }

/* 二维码白底卡片（二维码是黑白图，必须白底以保证可扫） */
.qr-wrap {
    justify-self: center;
    background: #ffffff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.qr-wrap img {
    display: block;
    width: 220px;
    height: 220px;
    object-fit: contain;
}
.qr-tip {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 10px;
}

/* ========== 赞赏区（横向长方形卡片，布局与公众号引导区 .cta-card 统一） ========== */
.support {
    padding: 24px 0 80px;
}
.support-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 36px 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 8px 32px var(--shadow-color);
}
/* 暖色氛围光：金色 + 暖橙径向渐变，营造"感激/温暖"情绪（低饱和） */
.support-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 0%, var(--tint-gold) 0%, transparent 45%),
        radial-gradient(circle at 90% 100%, rgba(234, 56, 0, 0.06) 0%, transparent 45%);
    pointer-events: none;
}
.support-left { position: relative; z-index: 1; }
/* 咖啡图标徽章：暖金渐变底，呼应赞助算力的温暖主题 */
.support-badge {
    width: 46px; height: 46px;
    margin-bottom: 14px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 暖金渐变：浅色用 0.18/0.12，深色下 token 自动放大到 0.28/0.18 保证可见 */
    background: linear-gradient(135deg, var(--tint-gold), var(--tint-up));
    border: 1px solid var(--tint-border-gold);
    color: var(--accent-gold);
    /* 轻微浮动，增加生命力（动效克制） */
    animation: badgeFloat 3.6s ease-in-out infinite;
}
.support-badge svg { width: 24px; height: 24px; }
.support-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}
.support-desc {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 14px;
    line-height: 1.7;
}
.support-tip {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
/* 赞赏码：白底卡片 + 暖色阴影，右栏居中
   注意：图片尺寸需足够大（≥220px）否则微信长按无法触发"识别二维码"；
   此处去掉 transform/呼吸动画，避免持续动画干扰微信长按手势判定 */
.support-qr {
    justify-self: center;
    background: #ffffff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 20px rgba(240, 180, 41, 0.15);
    -webkit-touch-callout: default;  /* 允许 iOS/微信长按唤起系统菜单（识别二维码） */
    -webkit-user-select: none;
    user-select: none;
}
/* 关键：图片渲染尺寸放大到 220px，满足微信识别二维码的最低图像区域要求 */
.support-qr img {
    display: block;
    width: 220px;
    height: 220px;
    object-fit: contain;
    /* 关闭图片拖拽/选中，避免长按手势被浏览器默认行为拦截 */
    -webkit-user-drag: none;
    pointer-events: auto;
}
/* 咖啡徽章浮动动画：仅用 transform，性能友好 */
@keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
/* 算力消耗数据带：用累计 token 与成本佐证赞助必要性；复用 .llm-stat-num 的滚动机制（千分位 + 视口触发 + reduced-motion 降级） */
.support-stat {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 4px 0 16px;
    padding: 14px 20px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-gold) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 16%, transparent);
}
.support-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.support-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.2px;
}
.support-stat-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;   /* 滚动时数字等宽，避免宽度跳动 */
}
/* 复用 .llm-stat-num 滚动逻辑，仅覆写视觉：去掉蓝金渐变改纯暖金、缩小字号适配卡片（用 .support-stat 前缀提升 specificity 覆盖原 .llm-stat-num） */
.support-stat .support-stat-num {
    background: none;
    -webkit-text-fill-color: var(--accent-gold);
    color: var(--accent-gold);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.3px;
}
.support-stat .support-stat-prefix {
    font-size: 15px;
}
.support-stat-unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}
/* 竖向渐变分隔线：上下淡出，呼应上方 .llm-stat-divider 风格 */
.support-stat-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-gold) 30%, transparent) 30%, color-mix(in srgb, var(--accent-gold) 30%, transparent) 70%, transparent);
}
/* 窄屏：数据带紧凑、分隔线隐藏 */
@media (max-width: 480px) {
    .support-stat { gap: 14px; padding: 12px 14px; }
    .support-stat .support-stat-num { font-size: 19px; }
    .support-stat-divider { display: none; }
}

/* ========== 风险警示区（醒目强调：暖红氛围 + 左色条 + 加粗关键词） ========== */
/* 与项目 --color-up(涨红) 同语义，金融语境下天然警示色；半透明底色保持轻量 */
.risk-section {
    padding: 28px 0 36px;
    background: var(--bg-primary);
}
.risk-box {
    position: relative;
    background: color-mix(in srgb, var(--color-up) 8%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, var(--color-up) 28%, var(--border-color));
    border-left: 4px solid var(--color-up);  /* 红色左侧色条，强警示 */
    border-radius: 10px;
    padding: 20px 24px;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--color-up) 12%, transparent);
}
.risk-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.risk-icon {
    width: 20px;
    height: 20px;
    color: var(--color-up);
    flex-shrink: 0;
    /* 警示图标轻脉冲，吸引注意力（动效克制，reduced-motion 下自动停） */
    animation: riskPulse 2.4s ease-in-out infinite;
}
.risk-title {
    font-size: 15px;
    font-weight: 700;  /* 标题加粗，强警示 */
    color: var(--color-up);
    letter-spacing: 1px;
}
.risk-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.risk-points li {
    font-size: 13px;  /* 比原 11px 放大，更醒目 */
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.6;
    padding-left: 16px;
    position: relative;
}
/* 要点前导红点，强化警示节奏 */
.risk-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-up);
}
.risk-points strong {
    color: var(--color-up);
    font-weight: 700;  /* 关键词红字加粗，第一眼即可扫到 */
}
/* 警示图标脉冲：仅用 opacity，性能友好 */
@keyframes riskPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 风险警示：深色下需要更深的红底和更亮的红边，才能在深灰底上保持警示强度 */
[data-theme="dark"] .risk-box {
    background: color-mix(in srgb, var(--color-up) 14%, var(--bg-secondary));
    border-color: color-mix(in srgb, var(--color-up) 38%, var(--border-color));
    box-shadow: 0 2px 12px color-mix(in srgb, var(--color-up) 20%, transparent);
}

/* ========== 页脚 ========== */
/* 站脚样式已迁出到 site.css（.site-footer-*），本页不再重复 */

/* ========== 动效系统（克制：150-500ms 微交互，仅 transform/opacity） ========== */
/* Hero 首屏入场：标题/副标题/按钮错落淡入上滑 */
.hero-badge, .hero h1, .hero-sub, .hero-cta, .hero-risk {
    opacity: 0;
    transform: translateY(16px);
    animation: heroIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-badge { animation-delay: 0.05s; }
.hero h1 { animation-delay: 0.15s; }
.hero-sub { animation-delay: 0.30s; }
.hero-cta { animation-delay: 0.45s; }
.hero-risk { animation-delay: 0.60s; }
@keyframes heroIn {
    to { opacity: 1; transform: translateY(0); }
}

/* 滚动进入视口淡入（IntersectionObserver 触发添加 .is-visible） */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* 子元素错落延迟（用于网格内卡片依次出现） */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.30s; }

/* 功能卡片 hover 微增强（已有 translateY，补充图标缩放，仅 transform） */
.feature-card .feature-icon { transition: transform 0.25s ease; }
.feature-card:hover .feature-icon { transform: scale(1.08); }

/* 适用人群卡：hover 时 emoji 微弹，文字反馈 */
.audience-card .audience-emoji { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: inline-block; }
.audience-card:hover .audience-emoji { transform: scale(1.15) rotate(-6deg); }

/* 特性卡：hover 时数字变色 + 上浮（perk 原无 hover，补齐与卡片一致的反馈） */
.perk { transition: transform 0.2s ease, border-color 0.2s ease; }
.perk:hover { transform: translateY(-3px); border-color: var(--accent-blue); }
.perk .perk-num { transition: color 0.2s ease; }
.perk:hover .perk-num { color: var(--accent-gold); }

/* 公众号步骤序号：hover 时高亮放大 */
.step .step-num { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.step:hover .step-num { transform: scale(1.12); box-shadow: 0 0 0 4px var(--tint-blue); }

/* 主题按钮 hover 旋转已迁出到 site.css（全站导航共享） */

/* ========== 暗黑模式专属微调 ==========
   以下规则只在 [data-theme="dark"] 下生效，针对落地页组件做"深灰底适配"。
   多数组件已通过 var(--bg-secondary) / var(--tint-*) 自动适配，下面只修仍硬编码的细节。 */
[data-theme="dark"] .carousel,
[data-theme="dark"] .carousel-img {
    background: var(--bg-secondary);          /* 原 #ffffff 在深色下太刺眼，改深灰留白 */
}
/* 二维码/赞赏码：白底是微信可扫前提，深色下必须保持白底（不可改），
   但外层阴影需要在深色下"浮起"，加深阴影 + 加一圈微弱边框增强边界 */
[data-theme="dark"] .qr-wrap {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-color);
}
[data-theme="dark"] .support-qr {
    box-shadow: 0 4px 24px rgba(240, 180, 41, 0.20), 0 0 0 1px var(--border-color);
}
/* 步骤序号圆形按钮：深色下蓝色实底略提亮，保证白字 4.5:1 对比度 */
[data-theme="dark"] .step-num {
    background: linear-gradient(135deg, var(--accent-blue), #79b8ff);
}
/* Emoji 表情：深色下原始彩色 emoji 显得偏暗，给一点点亮度提升 */
[data-theme="dark"] .audience-emoji {
    filter: brightness(1.1);
}
/* audience 区段在深色下用次背景（深灰 #161b22），与主背景 #0d1117 形成层级 */
[data-theme="dark"] #audience {
    background: var(--bg-secondary);
}

/* 品牌点呼吸动画已迁出到 site.css（全站导航共享） */

/* 标题下划线：hover 区块时延展（视觉引导） */
.section-title::after { transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.section-head:hover .section-title::after { width: 64px; }

/* 落地页专属文案过渡（nav-links a / site-footer a 已在 site.css 统一处理） */
.support-desc, .cta-desc { transition: color 0.2s ease, opacity 0.2s ease; }

/* .navbar.scrolled 已迁出到 site.css（共享导航样式） */

/* 无障碍：尊重 reduced-motion 偏好，关闭所有非必要动效 */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-badge, .hero h1, .hero-sub, .hero-cta, .hero-risk,
    .reveal, .reveal-stagger > *, .support-badge,
    .feature-card .feature-icon, .audience-card .audience-emoji,
    .perk, .step .step-num, .section-title::after,
    .risk-icon {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* 滚动条样式已迁出到 site.css（共享） */

/* ========== 响应式 ========== */
@media (max-width: 900px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .audience-grid { grid-template-columns: repeat(2, 1fr); }
    .perks { grid-template-columns: repeat(2, 1fr); }
    /* 平板封顶稍小，避免宽屏拉得过高 */
    .carousel { max-height: 520px; }
}
@media (max-width: 680px) {
    .container { padding: 0 18px; }
    /* 导航汉堡化由 site.css 统一处理：锚点/Skills 隐藏 → 汉堡按钮显示 → 抽屉接管 */
    /* 极窄屏：品牌标题字号略缩，避免与"主题按钮 + 汉堡"挤压 */
    .brand { font-size: 14px; }
    .hero { padding: 110px 0 60px; }
    section { padding: 50px 0; }
    /* scene 移动端：上下内距压缩 */
    .scene { padding: 24px 0 16px; }
    /* 移动端按 15:8 自然计算（约 180-280px 高），封顶 320 防过高 */
    .carousel { max-height: 320px; }
    .carousel-arrow { width: 36px; height: 36px; }
    .carousel-arrow svg { width: 16px; height: 16px; }
    .carousel-arrow-prev { left: 10px; }
    .carousel-arrow-next { right: 10px; }
    .scene-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .feature-grid { grid-template-columns: 1fr; }
    .audience-grid { grid-template-columns: repeat(2, 1fr); }
    .perks { grid-template-columns: repeat(2, 1fr); }
    .cta-card {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 28px;
        text-align: center;
    }
    .steps { align-items: flex-start; text-align: left; }
    .qr-wrap img { width: 180px; height: 180px; }
    /* 赞赏区移动端：横向长卡片堆叠为单列居中，与公众号区一致 */
    .support-card {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 24px;
        text-align: center;
    }
    .support-badge { margin-left: auto; margin-right: auto; }
    .support-qr img { width: 180px; height: 180px; }
}

/* ========== 设计哲学区（Asymmetric Bento） ========== */
/* 主-次-通栏 三段非对称网格：01 占 2/3 宽 + 右侧大图标作视觉锚点；
   02 占 1/3 窄 + 紧凑文案；03 通栏横向 + 右侧大引语区。
   颜色：蓝(理性) / up 红(警觉) / 紫(思辨)。 */

.philosophy {
    padding: 80px 0;
    background: var(--bg-primary);
}

.philo-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;        /* 2:1 不对称 */
    grid-template-rows: auto auto;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 卡片基础：轻量描边 + 圆角 + hover 上抬 */
.philo-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 32px 32px;
    transition: transform 0.2s ease, border-color 0.2s ease;
    display: flex;
    overflow: hidden;        /* 防止大图标溢出 */
}
.philo-card:hover {
    transform: translateY(-2px);
    border-color: var(--text-muted);
}

/* 主卡（01）：横排布局，左文字 + 右大图标 */
.philo-card--hero {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}
.philo-card__inner {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 次卡（02）：竖排紧凑 */
.philo-card--side {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

/* 通栏（03）：左主区 + 右引语 */
.philo-card--full {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    flex-direction: row;
    align-items: stretch;
    gap: 32px;
    padding: 36px 40px;
}
.philo-card__main {
    flex: 1.4;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 大图标锚点（主卡右侧） */
.philo-art {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 14px;
}
.philo-art svg {
    width: 64px;
    height: 64px;
}
.philo-card--hero.philo-card--coder .philo-art {
    background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-secondary));
    color: var(--accent-blue);
}

/* 序号：等宽字体 + 当前语义色 + 微弱 */
.philo-num {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    line-height: 1;
}
.philo-card--coder .philo-num,
.philo-card--hero .philo-num { color: var(--accent-blue); }
.philo-card--no-backtest .philo-num { color: var(--color-up); }
.philo-card--ai-discipline .philo-num { color: #a371f7; }

/* 标题：主卡 22px（更有宣言感），次卡 / 通栏 18px */
.philo-card--hero .philo-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    letter-spacing: 0.3px;
}
.philo-card--side .philo-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    letter-spacing: 0.3px;
}
.philo-card--full .philo-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    letter-spacing: 0.3px;
}

/* 正文：13.5px / 1.75 行高（UX 规则：65-75 字符/行） */
.philo-body {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0;
}
.philo-body strong {
    color: var(--text-primary);
    font-weight: 600;
}
/* 行内代码引用（如 memory/ 路径），程序员视角的视觉锚点，与蓝色主调统一 */
.philo-body code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    padding: 1px 6px;
    background: rgba(88, 166, 255, 0.10);
    border-radius: 3px;
    color: var(--text-primary);
}

/* 主卡底部：圆点列表（替代旧 evidence 标签，更克制） */
.philo-points {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}
.philo-points li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}
.philo-points .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-blue);
}

/* 次卡底部：极简单行标签 */
.philo-foot {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}
.philo-card--no-backtest .philo-foot { border-top-color: color-mix(in srgb, var(--color-up) 20%, var(--border-color)); }

/* 通栏引语区：editorial 大字引用 + 巨大引号 */
.philo-quote {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 20px 0 0 28px;
    border-left: 2px solid color-mix(in srgb, #a371f7 50%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.philo-quote__mark {
    position: absolute;
    top: 8px;
    left: 24px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 56px;
    font-weight: 600;
    line-height: 1;
    color: color-mix(in srgb, #a371f7 30%, transparent);
}
.philo-quote p {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: 0.5px;
}

/* —— 响应式：平板 → 取消不对称，改 2 栏；移动端 → 单列堆叠 —— */
@media (max-width: 1024px) {
    .philo-grid {
        grid-template-columns: 1fr 1fr;        /* 平板变对称 2 栏 */
    }
    /* 主卡 / 次卡 / 通栏跨列重置 */
    .philo-card--hero,
    .philo-card--side {
        grid-column: auto;
        grid-row: auto;
    }
    .philo-card--full {
        grid-column: 1 / -1;
    }
    .philo-art { width: 100px; height: 100px; }
    .philo-art svg { width: 52px; height: 52px; }
    .philo-quote p { font-size: 17px; }
}

@media (max-width: 767px) {
    .philosophy { padding: 60px 0; }
    .philo-grid {
        grid-template-columns: 1fr;        /* 移动单列 */
        gap: 14px;
    }
    /* 全部回到单列自然堆叠 */
    .philo-card--hero,
    .philo-card--side,
    .philo-card--full {
        grid-column: auto;
        grid-row: auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 22px;
        gap: 16px;
    }
    .philo-art {
        width: 80px;
        height: 80px;
        align-self: flex-start;
    }
    .philo-art svg { width: 40px; height: 40px; }
    .philo-card--hero .philo-title { font-size: 20px; }
    .philo-card--full .philo-title { font-size: 17px; }
    .philo-body { font-size: 13px; line-height: 1.7; }
    .philo-quote {
        padding: 16px 0 0 24px;
        border-left-width: 1px;
    }
    .philo-quote__mark { font-size: 44px; left: 20px; }
    .philo-quote p { font-size: 16px; }
    .philo-points { gap: 12px; }
}

/* ========== LLM 算力累计统计（融入页面流，开阔数据展示 + 渐变数字） ========== */
/* 不用独立卡片：统计区作为 Hero 的"数据延伸"，直接铺在 bg-primary 上，
   与 Hero 的开阔感连贯；数字渐变与 Hero .grad 同源，视觉语言一致 */
.llm-stat {
    padding: 20px 0 36px;
    background: var(--bg-primary);
    text-align: center;
}
.llm-stat-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    flex-wrap: wrap;
}
.llm-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.llm-stat-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.4px;
}
.llm-stat-ico {
    width: 15px;
    height: 15px;
    color: var(--accent-blue);          /* 算力项图标用蓝 */
}
/* 成本项（grid 最后一个 item）图标用金色，与 ¥ 前缀呼应 */
.llm-stat-grid > .llm-stat-item:last-child .llm-stat-ico {
    color: var(--accent-gold);
}
.llm-stat-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 700;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;   /* 滚动时数字等宽，避免宽度跳动 */
    line-height: 1.1;
}
/* 数字渐变填充（蓝→金），与 Hero 标题 .grad 同源的渐变文字语言 */
.llm-stat-num {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.llm-stat-unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}
.llm-stat-prefix {
    font-size: 0.6em;
    font-weight: 600;
    color: var(--accent-gold);
}
/* 竖向渐变分隔线：上下淡出，中间实色（轻盈，不喧宾夺主） */
.llm-stat-divider {
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, transparent, var(--border-color) 30%, var(--border-color) 70%, transparent);
}
/* 底部：数据更新时间 + 赞助引导，居中横排 */
.llm-stat-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.llm-stat-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.llm-stat-time svg {
    width: 13px;
    height: 13px;
}
/* 赞助引导：暖色调轻量药丸入口（呼应 #support 温暖主题），半透明暖底 + 暖色细边，醒目但不喧宾夺主 */
.llm-stat-sponsor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-secondary);
    padding: 5px 13px 5px 6px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 26%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 7%, transparent);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* 咖啡图标徽章：暖色淡底圆形，强化入口识别度并稳住图标视觉重量 */
.llm-stat-sponsor-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-gold) 17%, transparent);
    color: var(--accent-gold);
    animation: llm-sponsor-pulse 2.6s ease-in-out infinite;
}
.llm-stat-sponsor-ico svg {
    width: 13px;
    height: 13px;
}
/* 行动词"欢迎赞助它的服务器与算力开支"暖色加粗，与主文案(陈述事实)形成主次两层 */
.llm-stat-sponsor em {
    font-style: normal;
    font-weight: 600;
    color: var(--accent-gold);
}
.llm-stat-arrow {
    width: 14px;
    height: 14px;
    color: var(--accent-gold);
    transition: transform 0.2s ease;
}
/* hover：暖底加深 + 暖色微光 + 轻微上浮，引导点击 */
.llm-stat-sponsor:hover,
.llm-stat-sponsor:focus-visible {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent-gold) 42%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-gold) 18%, transparent);
    transform: translateY(-1px);
    outline: none;
}
/* 图标徽章呼吸光晕：极克制的暖色脉冲，吸引余光又不干扰上方数据阅读 */
@keyframes llm-sponsor-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-gold) 0%, transparent); }
    50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-gold) 14%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .llm-stat-sponsor-ico { animation: none; }
}
/* 移动端：两栏竖排、分隔线隐藏、底部堆叠 */
@media (max-width: 560px) {
    .llm-stat-grid { gap: 18px; flex-direction: column; }
    .llm-stat-divider { display: none; }
    .llm-stat-foot { gap: 10px; flex-direction: column; }
}

/* ========== 常见问题（GEO：与 analysis-guide 同一设计语言 —— 紧凑轻量卡片 + 3 列网格） ========== */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.faq-item {
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color 0.15s, background 0.15s;
}
.faq-item:hover {
    border-color: var(--accent-blue);
    background: color-mix(in srgb, var(--accent-blue) 5%, var(--bg-tertiary));
}
/* 问题：左侧色条 + 彩色文字，不用实色徽章 */
.faq-q {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
    padding-left: 10px;
    border-left: 2px solid var(--accent-blue);
    letter-spacing: 0.2px;
}
.faq-a {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}
@media (max-width: 900px) {
    .faq-grid { grid-template-columns: 1fr; }
}