/* ==========================================================================
   refine.css · 宇图瑞视 精炼设计层
   风格：简洁 · 清爽 · 大气
   适用于：首页 / product/rebekah / document/list
   与既有 index.css 无冲突（全部使用 xf_ 前缀）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
:root {
    --xf-brand: #5672cd;
    --xf-brand-600: #4862b8;
    --xf-brand-soft: rgba(86, 114, 205, .10);
    --xf-brand-line: rgba(86, 114, 205, .22);

    --xf-ink: #171a2b;
    --xf-body: #5c6274;
    --xf-muted: #8b91a3;
    --xf-faint: #aeb3c2;

    --xf-line: rgba(20, 24, 48, .08);
    --xf-line-2: rgba(20, 24, 48, .14);

    --xf-surface: #ffffff;
    --xf-surface-2: #f7f8fb;
    --xf-surface-3: #fbfbfd;

    --xf-r: 16px;
    --xf-r-sm: 12px;
    --xf-r-lg: 22px;
    --xf-r-pill: 999px;

    --xf-sh-1: 0 1px 2px rgba(20, 24, 48, .04);
    --xf-sh-2: 0 4px 14px rgba(20, 24, 48, .06);
    --xf-sh-3: 0 16px 40px rgba(20, 24, 48, .10);
    --xf-sh-brand: 0 8px 22px rgba(86, 114, 205, .22);

    --xf-ease: cubic-bezier(.22, .61, .36, 1);
    --xf-ease-io: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. 基础与排版
   -------------------------------------------------------------------------- */
.xf_body {
    background: var(--xf-surface);
    color: var(--xf-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.xf_body h1, .xf_body h2, .xf_body h3, .xf_body h4 {
    color: var(--xf-ink);
    letter-spacing: -.022em;
    margin: 0;
}

.xf_body p { margin: 0; }
.xf_body a { text-decoration: none; }

.xf_container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.xf_section { padding: 92px 0; }
.xf_section--tight { padding: 64px 0; }
.xf_section--alt { background: var(--xf-surface-2); }
.xf_section--line { border-top: 1px solid var(--xf-line); }

/* --------------------------------------------------------------------------
   3. 区块标题
   -------------------------------------------------------------------------- */
.xf_head {
    max-width: 720px;
    margin: 0 auto 52px;
    text-align: center;
}
.xf_head--left {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}
.xf_head h2 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.24;
    margin-bottom: 12px;
}
.xf_head p {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--xf-body);
}

/* 眉标 */
.xf_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 11px;
    margin-bottom: 18px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--xf-brand);
    background: var(--xf-brand-soft);
    border: 1px solid var(--xf-brand-line);
    border-radius: var(--xf-r-pill);
}
.xf_eyebrow .xf_dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--xf-brand);
    box-shadow: 0 0 0 3px rgba(86, 114, 205, .16);
    animation: xf_pulse 2.4s var(--xf-ease-io) infinite;
    flex-shrink: 0;
}
.xf_eyebrow .xf_dot--live { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .16); }
@keyframes xf_pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(86, 114, 205, .16); }
    50%      { box-shadow: 0 0 0 6px rgba(86, 114, 205, .04); }
}

/* --------------------------------------------------------------------------
   4. 按钮
   -------------------------------------------------------------------------- */
.xf_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 26px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--xf-r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .2s var(--xf-ease), box-shadow .2s var(--xf-ease),
                background .2s var(--xf-ease), border-color .2s var(--xf-ease), color .2s var(--xf-ease);
}
.xf_btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.xf_btn--primary {
    background: var(--xf-brand);
    color: #fff;
    border-color: var(--xf-brand);
    box-shadow: var(--xf-sh-1), 0 4px 12px rgba(86, 114, 205, .18);
}
.xf_btn--primary:hover {
    background: var(--xf-brand-600);
    border-color: var(--xf-brand-600);
    color: #fff;
    transform: translateY(-1.5px);
    box-shadow: var(--xf-sh-2), var(--xf-sh-brand);
}

.xf_btn--ghost {
    background: var(--xf-surface);
    color: var(--xf-ink);
    border-color: var(--xf-line-2);
    box-shadow: var(--xf-sh-1);
}
.xf_btn--ghost:hover {
    color: var(--xf-brand);
    border-color: var(--xf-brand-line);
    transform: translateY(-1.5px);
    box-shadow: var(--xf-sh-2);
}

.xf_btn--plain {
    background: transparent;
    color: var(--xf-body);
    border-color: transparent;
    padding: 0 14px;
}
.xf_btn--plain:hover { color: var(--xf-brand); background: var(--xf-brand-soft); }

.xf_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.xf_actions--center { justify-content: center; }

/* 文字链接（带箭头） */
.xf_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--xf-brand);
    transition: gap .2s var(--xf-ease);
}
.xf_link svg { width: 15px; height: 15px; }
.xf_link:hover { gap: 10px; }

/* --------------------------------------------------------------------------
   5. 图标（内联 SVG 容器）
   -------------------------------------------------------------------------- */
.xf_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--xf-r-sm);
    background: linear-gradient(135deg, rgba(86, 114, 205, .10) 0%, rgba(139, 92, 246, .07) 100%);
    border: 1px solid rgba(86, 114, 205, .13);
    color: var(--xf-brand);
    flex-shrink: 0;
}
.xf_icon svg { width: 22px; height: 22px; }
.xf_icon--sm { width: 38px; height: 38px; border-radius: 10px; }
.xf_icon--sm svg { width: 18px; height: 18px; }
.xf_icon--lg { width: 56px; height: 56px; border-radius: 14px; }
.xf_icon--lg svg { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.xf_hero {
    position: relative;
    /* 顶部留出固定头部高度（--xc-main-offset），再叠加呼吸空间 */
    padding: calc(var(--xc-main-offset, 88px) + 20px) 0 84px;
    background: var(--xf-surface);
    overflow: hidden;
    isolation: isolate;
}
/* 柔和光斑 */
.xf_hero::before {
    content: '';
    position: absolute;
    top: -46%;
    left: 50%;
    transform: translateX(-50%);
    width: 124%;
    height: 96%;
    background:
        radial-gradient(ellipse 42% 52% at 50% 34%, rgba(86, 114, 205, .09) 0%, transparent 66%),
        radial-gradient(ellipse 34% 44% at 76% 22%, rgba(139, 92, 246, .06) 0%, transparent 62%);
    pointer-events: none;
    z-index: 0;
}
/* 点阵 */
.xf_hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(23, 26, 43, .07) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 62% 72% at 50% 44%, #000 0%, transparent 76%);
    mask-image: radial-gradient(ellipse 62% 72% at 50% 44%, #000 0%, transparent 76%);
    pointer-events: none;
    z-index: 0;
}
.xf_hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    gap: 56px;
    align-items: center;
}
.xf_hero__title {
    font-size: 50px;
    font-weight: 800;
    line-height: 1.14;
    margin-bottom: 18px;
    color: var(--xf-ink);
}
.xf_hero__title .xf_accent { color: var(--xf-brand); }
.xf_hero__sub {
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--xf-body);
    margin-bottom: 32px;
    max-width: 560px;
}
.xf_hero__sub strong { color: var(--xf-ink); font-weight: 600; }

/* Hero 视觉 */
.xf_hero__media {
    position: relative;
    border-radius: var(--xf-r-lg);
    overflow: hidden;
    background: var(--xf-surface-2);
    border: 1px solid var(--xf-line);
    box-shadow: var(--xf-sh-3);
}
.xf_hero__media img {
    display: block;
    width: 100%;
    height: auto;
}
.xf_hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--xf-r-lg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
    pointer-events: none;
}

/* Hero 浮动数据卡 */
.xf_floatcard {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--xf-line);
    border-radius: 14px;
    box-shadow: var(--xf-sh-2);
}
.xf_floatcard__val {
    font-size: 22px;
    font-weight: 800;
    color: var(--xf-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.xf_floatcard__lbl {
    font-size: 12px;
    color: var(--xf-muted);
    margin-top: 4px;
    letter-spacing: .2px;
}
.xf_floatcard__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--xf-brand-soft);
    color: var(--xf-brand);
}
.xf_floatcard__icon svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   7. 指标统计
   -------------------------------------------------------------------------- */
.xf_stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}
.xf_stat {
    padding: 26px 18px 22px;
    text-align: center;
    background: var(--xf-surface);
    border: 1px solid var(--xf-line);
    border-radius: 14px;
    box-shadow: var(--xf-sh-1);
    transition: transform .22s var(--xf-ease), box-shadow .22s var(--xf-ease), border-color .22s var(--xf-ease);
}
.xf_stat:hover {
    transform: translateY(-3px);
    border-color: var(--xf-brand-line);
    box-shadow: var(--xf-sh-2);
}
.xf_stat__value {
    font-size: 30px;
    font-weight: 800;
    color: var(--xf-ink);
    line-height: 1.1;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.xf_stat__value .xf_unit {
    font-size: 14px;
    font-weight: 600;
    color: var(--xf-muted);
    margin-left: 2px;
}
.xf_stat__label {
    font-size: 13px;
    color: var(--xf-muted);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   8. 卡片网格
   -------------------------------------------------------------------------- */
.xf_grid { display: grid; gap: 16px; }
.xf_grid--2 { grid-template-columns: repeat(2, 1fr); }
.xf_grid--3 { grid-template-columns: repeat(3, 1fr); }
.xf_grid--4 { grid-template-columns: repeat(4, 1fr); }

.xf_card {
    position: relative;
    padding: 30px 26px;
    background: var(--xf-surface);
    border: 1px solid var(--xf-line);
    border-radius: var(--xf-r);
    box-shadow: var(--xf-sh-1);
    transition: transform .22s var(--xf-ease), box-shadow .22s var(--xf-ease), border-color .22s var(--xf-ease);
}
.xf_card:hover {
    transform: translateY(-3px);
    border-color: var(--xf-brand-line);
    box-shadow: var(--xf-sh-3);
}
.xf_card__icon { margin-bottom: 18px; }
.xf_card__title {
    font-size: 17.5px;
    font-weight: 700;
    margin-bottom: 9px;
    color: var(--xf-ink);
}
.xf_card__desc {
    font-size: 14px;
    line-height: 1.75;
    color: var(--xf-body);
}
.xf_card__list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}
.xf_card__list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--xf-body);
}
.xf_card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--xf-brand);
    opacity: .55;
}

/* 柔和底卡片 */
.xf_card--soft {
    background: var(--xf-surface-2);
    box-shadow: none;
}
.xf_card--soft:hover { background: var(--xf-surface); }

/* 勾选列表 */
.xf_checks { list-style: none; padding: 0; margin: 0; }
.xf_checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 11px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--xf-body);
}
.xf_checks li svg {
    width: 18px;
    height: 18px;
    color: var(--xf-brand);
    flex-shrink: 0;
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   9. 标签 chips
   -------------------------------------------------------------------------- */
.xf_chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.xf_chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--xf-body);
    background: var(--xf-surface-2);
    border: 1px solid var(--xf-line);
    border-radius: 8px;
    letter-spacing: .2px;
    transition: all .18s var(--xf-ease);
}
.xf_chip:hover {
    color: var(--xf-brand);
    border-color: var(--xf-brand-line);
    background: var(--xf-brand-soft);
}
.xf_chip--brand {
    color: var(--xf-brand);
    background: var(--xf-brand-soft);
    border-color: var(--xf-brand-line);
}

/* 规格组 */
.xf_specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.xf_spec {
    padding: 22px 20px;
    background: var(--xf-surface);
    border: 1px solid var(--xf-line);
    border-radius: 14px;
    box-shadow: var(--xf-sh-1);
}
.xf_spec h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--xf-ink);
    margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   10. 选项卡
   -------------------------------------------------------------------------- */
.xf_tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
}
.xf_tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    color: var(--xf-body);
    background: var(--xf-surface);
    border: 1px solid var(--xf-line-2);
    border-radius: var(--xf-r-pill);
    cursor: pointer;
    box-shadow: var(--xf-sh-1);
    transition: all .18s var(--xf-ease);
}
.xf_tab:hover {
    color: var(--xf-ink);
    border-color: var(--xf-line-2);
    transform: translateY(-1px);
    box-shadow: var(--xf-sh-2);
}
.xf_tab.is-active {
    background: var(--xf-brand);
    border-color: var(--xf-brand);
    color: #fff;
    box-shadow: 0 4px 12px rgba(86, 114, 205, .25);
}
.xf_tab__swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--xf-swatch, var(--xf-brand));
}
.xf_tab.is-active .xf_tab__swatch { box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); }
.xf_tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    background: rgba(20, 24, 48, .05);
    color: var(--xf-faint);
}
.xf_tab.is-active .xf_tab__count { background: rgba(255, 255, 255, .22); color: #fff; }

/* --------------------------------------------------------------------------
   11. 数据表
   -------------------------------------------------------------------------- */
.xf_table_wrap {
    overflow-x: auto;
    background: var(--xf-surface);
    border: 1px solid var(--xf-line);
    border-radius: var(--xf-r);
    box-shadow: var(--xf-sh-1), 0 8px 24px rgba(20, 24, 48, .04);
    -webkit-overflow-scrolling: touch;
}
.xf_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 900px;
}
.xf_table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 15px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--xf-muted);
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--xf-surface-2);
    border-bottom: 1px solid var(--xf-line);
    white-space: nowrap;
}
.xf_table thead th:first-child { border-top-left-radius: var(--xf-r); }
.xf_table thead th:last-child { border-top-right-radius: var(--xf-r); }
.xf_table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(20, 24, 48, .05);
    color: var(--xf-ink);
    vertical-align: middle;
    white-space: nowrap;
}
.xf_table tbody tr { transition: background .15s var(--xf-ease); }
.xf_table tbody tr:hover { background: var(--xf-surface-3); }
.xf_table tbody tr:last-child td { border-bottom: none; }
.xf_table tbody tr[hidden] { display: none; }

/* 平台配色已收敛：不再按平台分色（避免花），统一回落品牌蓝，仅靠文字区分平台 */

.xf_cell_idx {
    width: 44px;
    text-align: center;
    color: var(--xf-faint);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-left: 3px solid var(--xf-pf, var(--xf-brand));
}
.xf_plat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 9px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 7px;
    color: var(--xf-pf, var(--xf-brand));
    /* 降级兜底（不支持 color-mix 的浏览器） */
    background: rgba(86, 114, 205, .10);
    border: 1px solid rgba(86, 114, 205, .24);
    /* 现代浏览器：按平台色自动着色 */
    background: color-mix(in srgb, var(--xf-pf, var(--xf-brand)) 10%, transparent);
    border-color: color-mix(in srgb, var(--xf-pf, var(--xf-brand)) 24%, transparent);
}
.xf_plat__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--xf-pf, var(--xf-brand));
    flex-shrink: 0;
}
.xf_td_chip { font-weight: 600; color: var(--xf-ink); }
.xf_td_sub { color: var(--xf-muted); font-size: 13px; }
.xf_td_num { font-variant-numeric: tabular-nums; }

/* 摄像头量程 */
.xf_cam { min-width: 176px; }
.xf_cam__val {
    font-size: 16px;
    font-weight: 700;
    color: var(--xf-ink);
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.xf_cam__val .xf_sep { font-size: 13px; font-weight: 500; color: var(--xf-faint); margin: 0 2px; }
.xf_cam__val .xf_unit { font-size: 12px; font-weight: 500; color: var(--xf-muted); margin-left: 2px; }
.xf_bar {
    position: relative;
    height: 6px;
    width: 148px;
    background: #eef0f5;
    border-radius: 3px;
    overflow: hidden;
}
.xf_bar__fill {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 3px;
    /* 降级兜底：纯色 */
    background: var(--xf-pf, var(--xf-brand));
    /* 现代浏览器：同色系渐变 */
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--xf-pf, var(--xf-brand)) 55%, transparent) 0%,
        var(--xf-pf, var(--xf-brand)) 100%);
}
.xf_bar__dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--xf-pf, var(--xf-brand));
    box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(20, 24, 48, .18);
}
.xf_algo { font-weight: 700; color: var(--xf-ink); font-variant-numeric: tabular-nums; }
.xf_algo .xf_unit { font-size: 12px; font-weight: 500; color: var(--xf-muted); margin-left: 2px; }

/* 说明卡 */
.xf_notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 22px;
    padding: 18px 22px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--xf-body);
    background: var(--xf-surface);
    border: 1px solid var(--xf-line);
    border-radius: var(--xf-r-sm);
    box-shadow: var(--xf-sh-1);
}
.xf_notice__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    color: var(--xf-ink);
    flex-shrink: 0;
}
.xf_notice__label svg { width: 18px; height: 18px; color: var(--xf-brand); }
.xf_notice em {
    font-style: normal;
    font-weight: 700;
    color: var(--xf-brand);
}
.xf_notice code {
    display: inline-block;
    padding: 1px 8px;
    margin: 0 2px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--xf-ink);
    background: var(--xf-surface-2);
    border: 1px solid var(--xf-line);
    border-radius: 5px;
}

/* --------------------------------------------------------------------------
   12. 图文分栏
   -------------------------------------------------------------------------- */
.xf_split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.xf_split + .xf_split { margin-top: 76px; }
.xf_split--reverse .xf_split__text { order: 2; }
.xf_split--reverse .xf_split__media { order: 1; }
.xf_split__text h3 {
    font-size: 27px;
    font-weight: 800;
    line-height: 1.32;
    margin-bottom: 14px;
}
.xf_split__text p {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--xf-body);
    margin-bottom: 20px;
}
.xf_split__media {
    border-radius: var(--xf-r-lg);
    overflow: hidden;
    border: 1px solid var(--xf-line);
    box-shadow: var(--xf-sh-3);
    background: var(--xf-surface-2);
}
.xf_split__media img { display: block; width: 100%; height: auto; }

/* 案例面板 */
.xf_case {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 44px;
    align-items: center;
    padding: 34px;
    background: var(--xf-surface);
    border: 1px solid var(--xf-line);
    border-radius: var(--xf-r-lg);
    box-shadow: var(--xf-sh-1);
    transition: opacity .25s var(--xf-ease);
}
/* display:grid 会覆盖浏览器对 [hidden] 的默认 display:none，需显式声明 */
.xf_case[hidden] { display: none; }

.xf_case__body { transition: opacity .25s var(--xf-ease); }
.xf_case__body h3 { font-size: 24px; font-weight: 800; margin-bottom: 14px; line-height: 1.35; }
.xf_case__body p { font-size: 15px; line-height: 1.8; color: var(--xf-body); margin-bottom: 24px; }
.xf_case__media {
    border-radius: var(--xf-r);
    overflow: hidden;
    border: 1px solid var(--xf-line);
    background: var(--xf-surface-2);
}
.xf_case__media img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   13. 文档列表页（document/list）
   -------------------------------------------------------------------------- */
.xf_pagehead {
    position: relative;
    /* 顶部留出固定头部高度（--xc-main-offset） */
    padding: calc(var(--xc-main-offset, 88px) + 14px) 0 44px;
    background: var(--xf-surface-2);
    border-bottom: 1px solid var(--xf-line);
    overflow: hidden;
}
.xf_pagehead::before {
    content: '';
    position: absolute;
    top: -120%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 260%;
    background: radial-gradient(ellipse 50% 40% at 50% 40%, rgba(86, 114, 205, .07) 0%, transparent 66%);
    pointer-events: none;
}
.xf_pagehead__inner { position: relative; }
.xf_pagehead h1 {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--xf-ink);
}
.xf_pagehead p { font-size: 15.5px; color: var(--xf-body); line-height: 1.7; }
.xf_pagehead__meta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 20px;
    font-size: 13.5px;
    color: var(--xf-muted);
}
.xf_pagehead__meta span { display: inline-flex; align-items: center; gap: 6px; }
.xf_pagehead__meta svg { width: 15px; height: 15px; }

/* 工具栏 */
.xf_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin: 26px 0 26px;
}
.xf_filters { display: flex; flex-wrap: wrap; gap: 8px; }
.xf_filter {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--xf-body);
    background: var(--xf-surface);
    border: 1px solid var(--xf-line-2);
    border-radius: var(--xf-r-pill);
    transition: all .18s var(--xf-ease);
}
.xf_filter:hover {
    color: var(--xf-brand);
    border-color: var(--xf-brand-line);
    background: var(--xf-brand-soft);
}
.xf_filter.is-active {
    background: var(--xf-brand);
    border-color: var(--xf-brand);
    color: #fff;
    box-shadow: 0 4px 12px rgba(86, 114, 205, .22);
}

/* 搜索 */
.xf_search { position: relative; width: 268px; }
.xf_search__input {
    width: 100%;
    height: 38px;
    padding: 0 38px 0 14px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--xf-ink);
    background: var(--xf-surface);
    border: 1px solid var(--xf-line-2);
    border-radius: 10px;
    outline: none;
    transition: border-color .18s var(--xf-ease), box-shadow .18s var(--xf-ease);
}
.xf_search__input::placeholder { color: var(--xf-faint); }
.xf_search__input:focus {
    border-color: var(--xf-brand);
    box-shadow: 0 0 0 3px var(--xf-brand-soft);
}
.xf_search__btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--xf-muted);
    cursor: pointer;
    border-radius: 7px;
    transition: all .18s var(--xf-ease);
}
.xf_search__btn:hover { color: var(--xf-brand); background: var(--xf-brand-soft); }
.xf_search__btn svg { width: 16px; height: 16px; }

/* 文档卡片 */
.xf_docs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-bottom: 44px;
}
.xf_doc {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--xf-surface);
    border: 1px solid var(--xf-line);
    border-radius: var(--xf-r);
    box-shadow: var(--xf-sh-1);
    overflow: hidden;
    transition: transform .22s var(--xf-ease), box-shadow .22s var(--xf-ease), border-color .22s var(--xf-ease);
}
.xf_doc:hover {
    transform: translateY(-4px);
    border-color: var(--xf-brand-line);
    box-shadow: var(--xf-sh-3);
}
.xf_doc__link {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.xf_doc__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.xf_doc__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.xf_tag {
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 5px;
    letter-spacing: .2px;
}
.xf_tag--cat { background: var(--xf-surface-2); color: var(--xf-body); border: 1px solid var(--xf-line); }
.xf_tag--free { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.xf_doc__title {
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--xf-ink);
    margin-bottom: 18px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xf_doc__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--xf-line);
    font-size: 12.5px;
    color: var(--xf-muted);
}
.xf_doc__stats { display: flex; gap: 14px; }
.xf_doc__stats span { display: inline-flex; align-items: center; gap: 5px; }
.xf_doc__stats svg { width: 14px; height: 14px; }

/* 空状态 */
.xf_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 96px 24px;
    text-align: center;
    background: var(--xf-surface);
    border: 1px dashed var(--xf-line-2);
    border-radius: var(--xf-r-lg);
}
.xf_empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--xf-surface-2);
    color: var(--xf-faint);
}
.xf_empty__icon svg { width: 30px; height: 30px; }
.xf_empty__title { font-size: 16px; font-weight: 600; color: var(--xf-ink); margin-bottom: 6px; }
.xf_empty__desc { font-size: 14px; color: var(--xf-muted); }

/* 分页 */
.xf_pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 64px;
}
.xf_pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--xf-body);
    background: var(--xf-surface);
    border: 1px solid var(--xf-line-2);
    border-radius: 10px;
    transition: all .18s var(--xf-ease);
}
.xf_pager__btn:hover {
    color: var(--xf-brand);
    border-color: var(--xf-brand-line);
    background: var(--xf-brand-soft);
}
.xf_pager__btn.is-active {
    background: var(--xf-brand);
    border-color: var(--xf-brand);
    color: #fff;
    box-shadow: 0 4px 12px rgba(86, 114, 205, .22);
}
.xf_pager__btn.is-disabled { opacity: .45; pointer-events: none; }
.xf_pager__btn svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.xf_faq {
    max-width: 860px;
    margin: 0 auto;
}
.xf_faq__item {
    background: var(--xf-surface);
    border: 1px solid var(--xf-line);
    border-radius: var(--xf-r-sm);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .2s var(--xf-ease), box-shadow .2s var(--xf-ease);
}
.xf_faq__item[open] {
    border-color: var(--xf-brand-line);
    box-shadow: var(--xf-sh-2);
}
.xf_faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--xf-ink);
    cursor: pointer;
    list-style: none;
    transition: color .18s var(--xf-ease);
}
.xf_faq__item summary::-webkit-details-marker { display: none; }
.xf_faq__item summary:hover { color: var(--xf-brand); }
.xf_faq__item summary::after {
    content: '';
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-right: 2px solid var(--xf-faint);
    border-bottom: 2px solid var(--xf-faint);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .22s var(--xf-ease), border-color .18s var(--xf-ease);
}
.xf_faq__item[open] summary::after {
    transform: rotate(-135deg) translateY(-2px);
    border-color: var(--xf-brand);
}
.xf_faq__item > div,
.xf_faq__item p {
    padding: 0 22px 20px;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--xf-body);
}
.xf_faq__item p strong { color: var(--xf-ink); font-weight: 600; }
.xf_faq__item p a { color: var(--xf-brand); font-weight: 600; }
.xf_faq__item p a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   15. CTA
   -------------------------------------------------------------------------- */
.xf_cta {
    position: relative;
    padding: 84px 0;
    text-align: center;
    background: linear-gradient(160deg, #f7f8fb 0%, #eef1fa 100%);
    border-top: 1px solid var(--xf-line);
    overflow: hidden;
}
.xf_cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 60% at 20% 20%, rgba(86, 114, 205, .08) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 82% 78%, rgba(139, 92, 246, .07) 0%, transparent 60%);
    pointer-events: none;
}
.xf_cta__inner { position: relative; }
.xf_cta h2 { font-size: 32px; font-weight: 800; margin-bottom: 12px; }
.xf_cta p { font-size: 16px; color: var(--xf-body); margin-bottom: 32px; }

/* --------------------------------------------------------------------------
   16. 入场动效
   -------------------------------------------------------------------------- */
/* 渐进增强：JS 没加载好时元素始终可见，避免黑底黑字 */
html.xf-ready .xf_reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--xf-ease), transform .6s var(--xf-ease);
}
html.xf-ready .xf_reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html.xf-ready .xf_reveal { opacity: 1; transform: none; transition: none; }
    .xf_eyebrow .xf_dot { animation: none; }
    * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   16B. 呼吸感调优 v2 —— 放宽文字垂直间距
   （置于响应式之前：桌面端生效，移动端仍由后续媒体查询接管）
   ========================================================================== */
.xf_eyebrow { margin-bottom: 22px; }

.xf_head { margin: 0 auto 62px; }
.xf_head h2 { margin-bottom: 14px; }
.xf_head p { font-size: 16px; line-height: 1.9; }

.xf_hero__grid { gap: 60px; }
.xf_hero__title { margin-bottom: 22px; }
.xf_hero__sub { font-size: 17px; line-height: 1.9; margin-bottom: 36px; }

.xf_card { padding: 32px 28px; }
.xf_card__title { margin-bottom: 12px; }
.xf_card__desc { font-size: 14.5px; line-height: 1.85; }
.xf_card__list { margin-top: 18px; }
.xf_card__list li { margin-bottom: 10px; line-height: 1.7; }

.xf_checks li { margin-bottom: 12px; line-height: 1.65; }

.xf_spec { padding: 24px 22px; }
.xf_spec h4 { margin-bottom: 16px; }

.xf_notice { padding: 20px 24px; font-size: 14px; line-height: 1.85; }

.xf_split__text h3 { margin-bottom: 16px; }
.xf_split__text p { line-height: 1.88; margin-bottom: 22px; }

.xf_case__body p { margin-bottom: 28px; }

.xf_pagehead h1 { margin-bottom: 12px; }
.xf_pagehead p { font-size: 16px; line-height: 1.85; }
.xf_pagehead__meta { margin-top: 22px; }

.xf_doc { padding: 26px; }
.xf_doc__top { margin-bottom: 18px; }
.xf_doc__title { line-height: 1.6; margin-bottom: 20px; }
.xf_doc__foot { padding-top: 18px; }

.xf_faq__item summary { padding: 20px 24px; }
.xf_faq__item p { padding: 0 24px 22px; line-height: 1.9; }

.xf_cta h2 { margin-bottom: 14px; }
.xf_cta p { margin-bottom: 34px; }

.xf_empty__title { margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   17. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .xf_hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .xf_hero__title { font-size: 40px; }
    .xf_hero__sub { max-width: none; }
    .xf_grid--4 { grid-template-columns: repeat(2, 1fr); }
    .xf_specs { grid-template-columns: repeat(2, 1fr); }
    .xf_grid--3 { grid-template-columns: repeat(2, 1fr); }
    .xf_split { grid-template-columns: 1fr; gap: 32px; }
    .xf_split--reverse .xf_split__text { order: 1; }
    .xf_split--reverse .xf_split__media { order: 2; }
    .xf_case { grid-template-columns: 1fr; gap: 28px; }
    .xf_section { padding: 68px 0; }
}

@media (max-width: 768px) {
    .xf_container { padding: 0 18px; }
    /* 顶部必须含固定导航栏高度，否则手机上首屏内容会被导航栏压住 */
    .xf_hero { padding: calc(var(--xc-main-offset, 88px) + 12px) 0 52px; }
    .xf_hero__title { font-size: 30px; }
    .xf_hero__sub { font-size: 15px; margin-bottom: 26px; }
    .xf_head { margin-bottom: 36px; }
    .xf_head h2 { font-size: 25px; }
    .xf_section { padding: 52px 0; }
    .xf_stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .xf_grid--2, .xf_grid--3, .xf_grid--4 { grid-template-columns: 1fr; }
    .xf_specs { grid-template-columns: 1fr; }
    .xf_btn { height: 44px; padding: 0 20px; font-size: 14px; }
    .xf_cta h2 { font-size: 24px; }
    .xf_cta p { font-size: 15px; }
    .xf_toolbar { flex-direction: column; align-items: stretch; }
    .xf_search { width: 100%; }
    .xf_docs { grid-template-columns: 1fr; }
    /* 同上：顶部必须含固定导航栏高度 */
    .xf_pagehead { padding: calc(var(--xc-main-offset, 88px) + 8px) 0 32px; }
    .xf_pagehead h1 { font-size: 26px; }
    .xf_case { padding: 22px; }
    .xf_notice { flex-direction: column; gap: 8px; padding: 16px; }
    .xf_split + .xf_split { margin-top: 48px; }
}

@media (max-width: 400px) {
    .xf_hero__title { font-size: 26px; }
    .xf_actions .xf_btn { width: 100%; }
}

/* ==========================================================================
   18. 产品详情页专属版式
   与首页形成明显区隔：淡染 Hero + 面包屑 + 吸顶锚点导航 + 规格清单 +
   非对称 Bento 网格 + 技术流水线 + 竖向案例 Tab + 获取方式卡片
   ========================================================================== */

/* ---------- 18.1 淡染 Hero（浅色） ---------- */
.xf_hero--dark {
    padding: calc(var(--xc-main-offset, 88px) + 28px) 0 78px;
    /* 浅色淡染底：低饱和度浅靛蓝渐变 + 极淡光晕，清爽不显眼；
       深色导航直接压在浅底上（与全站其余浅色页面一致），无需炭色衔接带 */
    background:
        radial-gradient(ellipse 58% 62% at 74% 22%, rgba(86, 114, 205, .10) 0%, transparent 62%),
        radial-gradient(ellipse 46% 58% at 12% 86%, rgba(139, 92, 246, .06) 0%, transparent 64%),
        linear-gradient(168deg, #f7f8fc 0%, #eef1f9 55%, #f5f7fc 100%);
    color: var(--xf-ink);
}
/* 覆盖浅色 Hero 的顶部光斑（本节自带更淡的光晕） */
.xf_hero--dark::before { display: none; }
/* 点阵改深色细点，适配浅底 */
.xf_hero--dark::after {
    background-image: radial-gradient(circle, rgba(23, 26, 43, .06) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(ellipse 66% 76% at 50% 42%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 66% 76% at 50% 42%, #000 0%, transparent 78%);
}

.xf_hero--dark .xf_hero__title { color: var(--xf-ink); }
.xf_hero--dark .xf_hero__title .xf_accent { color: var(--xf-brand); }
.xf_hero--dark .xf_hero__sub { color: var(--xf-body); }
.xf_hero--dark .xf_hero__sub strong { color: var(--xf-ink); }

.xf_hero--dark .xf_eyebrow {
    background: var(--xf-brand-soft);
    border-color: var(--xf-brand-line);
    color: var(--xf-brand-600);
}
.xf_hero--dark .xf_eyebrow .xf_dot {
    background: var(--xf-brand);
    box-shadow: 0 0 0 3px var(--xf-brand-soft);
}

.xf_hero--dark .xf_btn--primary {
    background: var(--xf-brand);
    color: #fff;
    border-color: var(--xf-brand);
    box-shadow: 0 6px 16px rgba(86, 114, 205, .22);
}
.xf_hero--dark .xf_btn--primary:hover {
    background: var(--xf-brand-600);
    color: #fff;
    border-color: var(--xf-brand-600);
    box-shadow: 0 10px 22px rgba(86, 114, 205, .28);
}
.xf_hero--dark .xf_btn--ghost {
    background: rgba(255, 255, 255, .72);
    color: var(--xf-ink);
    border-color: rgba(23, 26, 43, .14);
    box-shadow: none;
}
.xf_hero--dark .xf_btn--ghost:hover {
    background: #fff;
    color: var(--xf-brand);
    border-color: var(--xf-brand-line);
    box-shadow: none;
}

.xf_hero--dark .xf_hero__media {
    background: #fff;
    border-color: var(--xf-line);
    box-shadow: 0 18px 44px rgba(23, 26, 43, .10);
}
.xf_hero--dark .xf_floatcard {
    background: rgba(255, 255, 255, .96);
    border-color: var(--xf-line);
    box-shadow: 0 12px 26px rgba(23, 26, 43, .10);
}
.xf_hero--dark .xf_floatcard__val { color: var(--xf-ink); }
.xf_hero--dark .xf_floatcard__lbl { color: var(--xf-muted); }
.xf_hero--dark .xf_floatcard__icon {
    background: var(--xf-brand-soft);
    color: var(--xf-brand);
}

/* Hero 关键指标条 */
.xf_keyfacts { display: flex; flex-wrap: wrap; margin-top: 34px; }
.xf_keyfact {
    padding-right: 28px;
    margin-right: 28px;
    border-right: 1px solid var(--xf-line);
}
.xf_keyfact:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.xf_keyfact__v {
    font-size: 20px;
    font-weight: 800;
    color: var(--xf-ink);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.xf_keyfact__l {
    font-size: 12.5px;
    color: var(--xf-muted);
    margin-top: 6px;
}

/* ---------- 18.2 面包屑 ---------- */
.xf_crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--xf-muted);
}
.xf_crumbs a { color: var(--xf-body); transition: color .18s var(--xf-ease); }
.xf_crumbs a:hover { color: var(--xf-brand); }
.xf_crumbs .xf_csep { opacity: .45; }
.xf_crumbs .xf_cur { color: var(--xf-ink); font-weight: 600; }

/* ---------- 18.3 吸顶锚点导航 ---------- */
/* 锚点跳转时避开吸顶头部 + 锚点导航自身高度 */
.xf_section[id] { scroll-margin-top: calc(var(--xc-header-height, 64px) + 58px); }
html { scroll-behavior: smooth; }

.xf_anchornav {
    position: sticky;
    top: var(--xc-header-height, 64px);
    z-index: 20;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--xf-line);
}
.xf_anchornav__inner {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    overflow-x: auto;
    scrollbar-width: none;
}
.xf_anchornav__inner::-webkit-scrollbar { display: none; }
.xf_anchornav__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 18px 16px 0;
    margin-right: 6px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--xf-ink);
    border-right: 1px solid var(--xf-line);
    white-space: nowrap;
}
.xf_anchornav__brand svg { width: 17px; height: 17px; color: var(--xf-brand); }
.xf_anchornav a[data-xf-anchor] {
    padding: 17px 13px;
    font-size: 14px;
    font-weight: 500;
    color: var(--xf-body);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .18s var(--xf-ease), border-color .18s var(--xf-ease);
}
.xf_anchornav a[data-xf-anchor]:hover { color: var(--xf-brand); }
.xf_anchornav a[data-xf-anchor].is-active {
    color: var(--xf-brand);
    border-bottom-color: var(--xf-brand);
    font-weight: 600;
}

/* ---------- 18.4 规格清单表 ---------- */
.xf_sheet {
    background: var(--xf-surface);
    border: 1px solid var(--xf-line);
    border-radius: var(--xf-r);
    overflow: hidden;
    box-shadow: var(--xf-sh-1);
}
.xf_sheet__row {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 22px;
    align-items: center;
    padding: 18px 26px;
    border-bottom: 1px solid var(--xf-line);
}
.xf_sheet__row:last-child { border-bottom: none; }
.xf_sheet__row:nth-child(even) { background: var(--xf-surface-3); }
.xf_sheet__k {
    font-size: 14px;
    font-weight: 600;
    color: var(--xf-ink);
}
.xf_sheet__v {
    font-size: 14px;
    color: var(--xf-body);
}

/* ---------- 18.5 非对称 Bento 网格 ---------- */
.xf_bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.xf_bento__item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    background: var(--xf-surface);
    border: 1px solid var(--xf-line);
    border-radius: var(--xf-r);
    box-shadow: var(--xf-sh-1);
    overflow: hidden;
    transition: transform .22s var(--xf-ease), box-shadow .22s var(--xf-ease), border-color .22s var(--xf-ease);
}
.xf_bento__item:hover {
    transform: translateY(-3px);
    border-color: var(--xf-brand-line);
    box-shadow: var(--xf-sh-3);
}
.xf_bento__item--wide { grid-column: span 2; }
.xf_bento__item--feature {
    background: linear-gradient(140deg, #f6f7fd 0%, #eef1fb 100%);
    border-color: var(--xf-brand-line);
}
.xf_bento__item--feature::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(86, 114, 205, .13) 0%, transparent 68%);
    pointer-events: none;
}
.xf_bento__title {
    font-size: 17.5px;
    font-weight: 700;
    color: var(--xf-ink);
    margin-bottom: 12px;
}
.xf_bento__item--feature .xf_bento__title { font-size: 21px; }
.xf_bento__desc {
    font-size: 14px;
    line-height: 1.85;
    color: var(--xf-body);
}
.xf_bento__num {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 34px;
    font-weight: 800;
    color: var(--xf-brand);
    opacity: .13;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ---------- 18.6 技术流水线 ---------- */
.xf_flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
/* 贯穿各节点的虚线轨道 */
.xf_flow::before {
    content: '';
    position: absolute;
    top: 26px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--xf-line-2) 0 6px, transparent 6px 13px);
    z-index: 0;
}
.xf_flow__step { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.xf_flow__num {
    width: 52px;
    height: 52px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    color: var(--xf-brand);
    background: var(--xf-surface);
    border: 1px solid var(--xf-brand-line);
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px rgba(20, 24, 48, .06);
}
.xf_flow__step:nth-child(1) .xf_flow__num { color: #0ea5e9; border-color: rgba(14, 165, 233, .3); }
.xf_flow__step:nth-child(2) .xf_flow__num { color: #8b5cf6; border-color: rgba(139, 92, 246, .3); }
.xf_flow__step:nth-child(3) .xf_flow__num { color: var(--xf-brand); }
.xf_flow__step:nth-child(4) .xf_flow__num { color: #f59e0b; border-color: rgba(245, 158, 11, .3); }
.xf_flow__step:nth-child(5) .xf_flow__num { color: #10b981; border-color: rgba(16, 185, 129, .3); }
.xf_flow__t {
    font-size: 15px;
    font-weight: 700;
    color: var(--xf-ink);
    margin-bottom: 8px;
}
.xf_flow__d {
    font-size: 13px;
    line-height: 1.75;
    color: var(--xf-muted);
}

/* ---------- 18.7 竖向案例 Tab ---------- */
.xf_cases {
    display: grid;
    grid-template-columns: 264px 1fr;
    gap: 28px;
    align-items: start;
}
.xf_vtabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: calc(var(--xc-header-height, 64px) + 56px);
}
.xf_vtab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    font-family: inherit;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background .18s var(--xf-ease), border-color .18s var(--xf-ease), box-shadow .18s var(--xf-ease);
}
.xf_vtab:hover { background: var(--xf-surface-2); }
.xf_vtab.is-active {
    background: var(--xf-surface);
    border-color: var(--xf-brand-line);
    box-shadow: var(--xf-sh-2);
}
.xf_vtab__t {
    font-size: 15px;
    font-weight: 600;
    color: var(--xf-ink);
    transition: color .18s var(--xf-ease);
}
.xf_vtab.is-active .xf_vtab__t { color: var(--xf-brand); }
.xf_vtab__n { font-size: 12px; color: var(--xf-faint); font-variant-numeric: tabular-nums; }
.xf_vtab.is-active .xf_vtab__n { color: var(--xf-brand); opacity: .7; }

/* ---------- 18.8 获取方式卡片 ---------- */
.xf_get {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.xf_get__item {
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: var(--xf-surface);
    border: 1px solid var(--xf-line);
    border-radius: var(--xf-r);
    box-shadow: var(--xf-sh-1);
    transition: transform .22s var(--xf-ease), box-shadow .22s var(--xf-ease), border-color .22s var(--xf-ease);
}
.xf_get__item:hover {
    transform: translateY(-3px);
    border-color: var(--xf-brand-line);
    box-shadow: var(--xf-sh-3);
}
.xf_get__item--main {
    background: linear-gradient(150deg, #f6f7fd 0%, #eef1fb 100%);
    border-color: var(--xf-brand-line);
    color: var(--xf-ink);
    box-shadow: 0 8px 22px rgba(86, 114, 205, .12);
}
.xf_get__item--main .xf_get__title,
.xf_get__item--main .xf_get__desc { color: inherit; }
.xf_get__item--main .xf_get__desc { color: var(--xf-body); }
.xf_get__icon {
    margin-bottom: 18px;
}
.xf_get__item--main .xf_icon {
    background: var(--xf-brand-soft);
    border-color: var(--xf-brand-line);
    color: var(--xf-brand);
}
.xf_get__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--xf-ink);
    margin-bottom: 10px;
}
.xf_get__desc {
    font-size: 14px;
    line-height: 1.85;
    color: var(--xf-body);
    margin-bottom: 24px;
    flex-grow: 1;
}
.xf_get__item--main .xf_btn--primary {
    background: var(--xf-brand);
    color: #fff;
    border-color: var(--xf-brand);
    box-shadow: 0 6px 16px rgba(86, 114, 205, .22);
}
.xf_get__item--main .xf_btn--primary:hover { background: var(--xf-brand-600); color: #fff; }

/* ---------- 18.9 产品页响应式 ---------- */
@media (max-width: 1024px) {
    .xf_bento { grid-template-columns: repeat(2, 1fr); }
    .xf_bento__item--wide { grid-column: span 2; }
    .xf_flow { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
    .xf_flow::before { display: none; }
    .xf_cases { grid-template-columns: 1fr; }
    .xf_vtabs {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    .xf_vtab { width: auto; }
    .xf_get { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .xf_hero--dark { padding: calc(var(--xc-main-offset, 88px) + 16px) 0 52px; }
    .xf_keyfact { padding-right: 18px; margin-right: 18px; }
    .xf_keyfact__v { font-size: 17px; }
    .xf_bento { grid-template-columns: 1fr; }
    .xf_bento__item--wide { grid-column: span 1; }
    .xf_flow { grid-template-columns: repeat(2, 1fr); }
    .xf_sheet__row { grid-template-columns: 1fr; gap: 8px; padding: 14px 18px; }
    .xf_anchornav__brand { display: none; }
    .xf_anchornav__inner { padding: 0 18px; }
}

/* ---------- 19. 无图产品页（v1/v2/v3）：深色质感 Hero + 右侧版本卡 ---------- */
.xf_hero--solo {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #000000 0%, #0a0a0d 100%);
    color: #e6ecf5;
    padding-top: calc(var(--xc-main-offset, 88px) + 36px);
    padding-bottom: 76px;
}
.xf_hero--solo::before {
    content: '';
    position: absolute; inset: 0;
    background-image:/r/n        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 25%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 25%, transparent 80%);
}
.xf_hero--solo::after {
    content: '';
    position: absolute; top: -30%; right: -15%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 65%);
    pointer-events: none;
}
.xf_hero--solo > .xf_container { position: relative; z-index: 1; }
.xf_hero--solo .xf_hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    text-align: left;
    align-items: center;
}
.xf_hero--solo .xf_hero__title { color: #fff; font-size: 46px; }
.xf_hero--solo .xf_hero__sub { color: #b6c2d4; max-width: 560px; margin-left: 0; margin-right: 0; font-size: 16.5px; line-height: 1.85; }
/* 黑底上 strong 默认是 --xf-ink(#171a2b) 近黑色，必须强制提亮 */
.xf_hero--solo .xf_hero__sub strong,
.xf_hero--solo.xf_hero--dark .xf_hero__sub strong { color: #ffffff; font-weight: 600; }
.xf_hero--solo .xf_crumbs a { color: #8b97ad; }
.xf_hero--solo .xf_crumbs .xf_csep { color: #5a6478; }
.xf_hero--solo .xf_crumbs .xf_cur { color: #c7d3e6; }
.xf_hero--solo .xf_eyebrow {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.20);
    color: #e6ecf5;
}
.xf_hero--solo .xf_eyebrow .xf_dot { background: #ffffff; box-shadow: 0 0 0 3px rgba(255,255,255,.20); }
.xf_hero--solo .xf_keyfacts { justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.xf_hero--solo .xf_keyfact {
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,.10);
    border-right: none;
    background: rgba(255,255,255,.04);
    border-radius: 10px;
    margin: 0;
}
.xf_hero--solo .xf_keyfact:last-child { padding-right: 16px; }
.xf_hero--solo .xf_keyfact__v { color: #fff; }
.xf_hero--solo .xf_keyfact__l { color: #8a98b0; }
.xf_hero--solo .xf_actions .xf_btn--ghost {
    color: #e6ecf5;
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.03);
}
.xf_hero--solo .xf_actions .xf_btn--ghost:hover { border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.06); }
/* 右侧版本信息卡（无图 Hero 的视觉锚点） */
.xf_hero__side {
    padding: 26px 26px 22px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: 0 30px 80px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.06);
    color: #e6ecf5;
}
.xf_side__top { font-size: 12.5px; color: #8a98b0; letter-spacing: .08em; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.xf_side__ver { font-size: 52px; font-weight: 800; color: #fff; line-height: 1; margin: 10px 0 12px; }
.xf_side__rule { width: 36px; height: 3px; background: #ffffff; border-radius: 2px; margin-bottom: 14px; }
.xf_side__tag { color: #c7d3e6; font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.xf_side__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(255,255,255,.08); }
.xf_side__list li { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); color: #c7d3e6; font-size: 13.5px; display: flex; gap: 10px; align-items: center; }
.xf_side__list li:last-child { border-bottom: none; }
.xf_side__list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #ffffff; flex: none; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
@media (max-width: 768px) {
    .xf_hero--solo { padding-top: calc(var(--xc-main-offset, 88px) + 16px); padding-bottom: 52px; }
    .xf_hero--solo .xf_hero__grid { grid-template-columns: 1fr; gap: 32px; }
    .xf_hero--solo .xf_hero__title { font-size: 34px; }
    .xf_hero--solo .xf_hero__sub { font-size: 15.5px; max-width: none; }
    .xf_side__ver { font-size: 44px; }
}

/* === 深色首屏页（xf_hero--solo）导航深色主题 ===
   半透明白导航叠在纯黑 Hero 上会显灰，改为深色玻璃导航 */
body.xc_header_dark .xc_header {
    background: rgba(10, 10, 13, .72);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
body.xc_header_dark .xc_logo { color: #fff; }
body.xc_header_dark .xc_nav_item { color: rgba(255, 255, 255, .72); }
body.xc_header_dark .xc_nav_item:hover { color: #fff; }
body.xc_header_dark .xc_nav_menu_active { color: #fff !important; }
body.xc_header_dark .xc_nav_menu_active::after { background: #fff; }
/* 深色导航：次要入口纯文字化（含「联系我们」，三入口统一样式） */
body.xc_header_dark .xc_header_btn,
body.xc_header_dark .xc_action_link {
    color: rgba(255, 255, 255, .85);
    background: transparent;
    border: none;
}
body.xc_header_dark .xc_header_btn:hover,
body.xc_header_dark .xc_action_link:hover {
    color: #fff;
    background: transparent;
}
body.xc_header_dark .xc_menu_toggle span { background-color: #fff; }
/* 移动端展开菜单同步深色；下拉子菜单保持白底卡片不随导航变色 */
@media (max-width: 768px) {
    body.xc_header_dark .xc_nav_menu {
        background: rgba(10, 10, 13, .98);
        border-bottom-color: rgba(255, 255, 255, .08);
    }
    body.xc_header_dark .xc_nav_item {
        color: rgba(255, 255, 255, .75);
        border-bottom-color: rgba(255, 255, 255, .08);
    }
}


/* ---------- rebucca 产品页专属：青绿 Hero 变体（与 rebekah 的靛蓝区分，保持浅底以兼容白色导航） ---------- */
.xf_hero--teal {
    background:
        radial-gradient(ellipse 58% 62% at 74% 22%, rgba(16, 150, 120, .10) 0%, transparent 62%),
        radial-gradient(ellipse 46% 58% at 12% 86%, rgba(45, 170, 140, .07) 0%, transparent 64%),
        linear-gradient(168deg, #f4faf8 0%, #ecf6f2 55%, #f2f9f6 100%);
}
.xf_hero--teal .xf_eyebrow { color: #0c7d63; background: rgba(16, 150, 120, .10); }
.xf_hero--teal .xf_eyebrow .xf_dot { background: #0c7d63; box-shadow: 0 0 0 3px rgba(16, 150, 120, .18); }
.xf_hero--teal .xf_btn--primary {
    background: #0e9f6e;
    border-color: #0e9f6e;
    box-shadow: 0 6px 16px rgba(14, 159, 110, .22);
}
.xf_hero--teal .xf_btn--primary:hover {
    background: #0b8559;
    border-color: #0b8559;
    color: #fff;
}
.xf_hero--teal .xf_hero__title .xf_accent { color: #0c7d63; }