/* Zibll Feature Showcase 1.2 - 画廊式展示 + 精美时间线 */
.zib-feature-showcase {
    --zfs-primary: #ff4d6d;
    --zfs-primary-soft: #fff0f4;
    --zfs-primary-deep: #be123c;
    --zfs-blue: #3b82f6;
    --zfs-green: #16a34a;
    --zfs-yellow: #d97706;
    --zfs-red: #dc2626;
    --zfs-text: #172033;
    --zfs-muted: #667085;
    --zfs-border: rgba(148, 163, 184, .22);
    --zfs-card: rgba(255, 255, 255, .88);
    margin: 28px 0;
    color: var(--zfs-text);
}

.zib-feature-showcase * {
    box-sizing: border-box;
}

/* ===== 外壳：去掉 hero，直接从 tabs 开始 ===== */
.zib-feature-shell {
    overflow: hidden;
    border: 1px solid var(--zfs-border);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82));
    box-shadow: 0 22px 60px rgba(15, 23, 42, .08);
}

.zib-feature-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    background: rgba(248, 250, 252, .9);
    border-bottom: 1px solid var(--zfs-border);
}

.zib-feature-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--zfs-muted);
    cursor: pointer;
    font-weight: 800;
    transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.zib-feature-tab:hover,
.zib-feature-tab:focus {
    color: var(--zfs-primary);
    background: #fff;
    outline: none;
}

.zib-feature-tab.is-active {
    color: var(--zfs-primary-deep);
    background: #fff;
    border-color: rgba(255, 77, 109, .18);
    box-shadow: 0 10px 28px rgba(255, 77, 109, .12);
    transform: translateY(-1px);
}

.zib-feature-panels {
    padding: 24px;
}

.zib-feature-panel {
    animation: zfsFade .28s ease;
}

.zib-feature-panel[hidden] {
    display: none !important;
}

@keyframes zfsFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   产品展示：画廊式（大图 + 标题 + 描述）
   ================================================================ */
.zib-feature-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.zfs-gallery-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--zfs-border);
    border-radius: 20px;
    background: var(--zfs-card);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.zfs-gallery-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 77, 109, .35);
    box-shadow: 0 22px 48px rgba(255, 77, 109, .15);
}

.zfs-gallery-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #fff0f4, #fff);
    overflow: hidden;
}

/* 产品展示里的触发器铺满媒体区，光标提示可放大 */
.zfs-gallery-media .zib-gallery-trigger {
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.zfs-gallery-media .zib-gallery-trigger img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.zfs-gallery-card:hover .zfs-gallery-media img {
    transform: scale(1.06);
}

.zfs-gallery-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--zfs-primary);
    font-size: 46px;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 77, 109, .15), transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(124, 92, 255, .12), transparent 55%);
}

.zfs-gallery-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.zfs-gallery-body h3 {
    margin: 0;
    color: var(--zfs-text);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
}

.zfs-gallery-body p {
    margin: 0;
    color: var(--zfs-muted);
    font-size: 14px;
    line-height: 1.7;
    flex: 1;
}

.zfs-gallery-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: var(--zfs-primary);
    font-size: 13px;
    font-weight: 800;
}

.zfs-gallery-more i {
    transition: transform .2s ease;
}

.zfs-gallery-card:hover .zfs-gallery-more i {
    transform: translateX(3px);
}

/* ================================================================
   版本对比表（动态列数 + 是/否图标 + 推荐列高亮）
   ================================================================ */
.zib-compare-wrap {
    overflow-x: auto;
    border: 1px solid var(--zfs-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
    -webkit-overflow-scrolling: touch;
}

.zib-compare-table {
    width: 100%;
    min-width: 780px;
    border-collapse: separate;
    border-spacing: 0;
}

.zib-compare-table th,
.zib-compare-table td {
    padding: 18px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
}

/* 表头 */
.zib-compare-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff7f9;
    color: #8a3147;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .02em;
    border-bottom: 2px solid rgba(255, 77, 109, .15);
}

/* 第一列（功能名）：左对齐，略收窄，给版本对比结果让出视觉中心 */
.zib-compare-feature-col {
    text-align: left !important;
    width: 18%;
    min-width: 128px;
    max-width: 190px;
}

.zib-compare-feature-col strong {
    color: var(--zfs-text);
    font-weight: 800;
}

/* 版本列：居中并稍微加宽，让对比结果成为表格视觉中心 */
.zib-compare-version-col {
    width: 16%;
    min-width: 138px;
    text-align: center !important;
}

.zib-compare-version-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
}

/* 推荐版本列高亮（整列着色） */
.zib-compare-version-col.is-highlight {
    background: linear-gradient(180deg, rgba(255, 77, 109, .05), rgba(255, 77, 109, .02));
}

.zib-compare-table thead .zib-compare-version-col.is-highlight {
    background: linear-gradient(180deg, rgba(255, 77, 109, .14), rgba(255, 77, 109, .06));
}

.zib-compare-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff4d6d, #ff8fab);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    box-shadow: 0 4px 10px rgba(255, 77, 109, .25);
}

/* 最后一列（说明）：右侧收窄，文字稍向右，降低对版本列的视觉干扰 */
.zib-compare-desc-col {
    text-align: left !important;
    width: 20%;
    min-width: 150px;
    max-width: 210px;
    padding-left: 26px !important;
}

.zib-compare-desc-col small {
    display: block;
    max-width: 180px;
    color: var(--zfs-muted);
    line-height: 1.65;
    font-size: 12.5px;
}

.zib-compare-table tbody tr:last-child td {
    border-bottom: 0;
}

.zib-compare-table tbody tr:hover td {
    background: #fffafb;
}

/* 高亮列 hover 时保持底色 */
.zib-compare-table tbody tr:hover .zib-compare-version-col.is-highlight {
    background: linear-gradient(180deg, rgba(255, 77, 109, .08), rgba(255, 77, 109, .04));
}

/* 是/否 图标徽章 */
.compare-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.compare-yes {
    color: #15803d;
    background: #dcfce7;
}

.compare-no {
    color: #b91c1c;
    background: #fee2e2;
}

.compare-muted {
    color: #98a2b3;
}

/* ================================================================
   产品路线：精美垂直时间线（左右交错 + 节点 + 历史流）
   ================================================================ */
.zfs-timeline-intro {
    margin: 0 0 24px;
    padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 77, 109, .06), rgba(124, 92, 255, .05));
    border: 1px solid rgba(255, 77, 109, .14);
    color: var(--zfs-muted);
    font-size: 14px;
    line-height: 1.7;
}

.zfs-timeline {
    position: relative;
    padding: 8px 0;
}

/* 中央竖线 */
.zfs-timeline-rail {
    position: absolute;
    left: 50%;
    top: 12px;
    bottom: 12px;
    width: 3px;
    transform: translateX(-50%);
    background: rgba(148, 163, 184, .25);
    border-radius: 999px;
    overflow: hidden;
}

/* 竖线上的进度填充（从顶部开始的渐变，暗示“从历史走到现在”） */
.zfs-timeline-rail-fill {
    position: absolute;
    inset: 0 0 auto 0;
    height: 55%;
    background: linear-gradient(180deg, var(--zfs-green), var(--zfs-yellow) 70%, var(--zfs-primary));
    border-radius: 999px;
    opacity: .85;
}

.zfs-tl-item {
    position: relative;
    display: flex;
    width: 50%;
    margin-bottom: 28px;
}

.zfs-tl-left {
    left: 0;
    padding-right: 38px;
    justify-content: flex-end;
}

.zfs-tl-right {
    left: 50%;
    padding-left: 38px;
    justify-content: flex-start;
}

/* 节点圆点（贴在中央竖线上） */
.zfs-tl-node {
    position: absolute;
    top: 16px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 0 0 5px #fff, 0 6px 16px rgba(15, 23, 42, .12);
    font-size: 16px;
    z-index: 2;
}

.zfs-tl-left .zfs-tl-node {
    right: -20px;
}

.zfs-tl-right .zfs-tl-node {
    left: -20px;
}

.zfs-tl-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 18px 20px;
    border: 1px solid var(--zfs-border);
    border-radius: 18px;
    background: var(--zfs-card);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
    transition: transform .25s ease, box-shadow .25s ease;
}

.zfs-tl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
}

/* 卡片指向节点的小三角 */
.zfs-tl-left .zfs-tl-card::after,
.zfs-tl-right .zfs-tl-card::after {
    content: "";
    position: absolute;
    top: 26px;
    width: 12px;
    height: 12px;
    background: var(--zfs-card);
    border-right: 1px solid var(--zfs-border);
    border-bottom: 1px solid var(--zfs-border);
}

.zfs-tl-left .zfs-tl-card::after {
    right: -7px;
    transform: rotate(-45deg);
}

.zfs-tl-right .zfs-tl-card::after {
    left: -7px;
    transform: rotate(135deg);
}

.zfs-tl-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.zfs-tl-version {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--zfs-primary), #ff8fab);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
    box-shadow: 0 4px 12px rgba(255, 77, 109, .25);
}

.zfs-tl-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    background: rgba(148, 163, 184, .16);
    color: var(--zfs-muted);
}

.zfs-tl-title {
    margin: 0 0 6px;
    color: var(--zfs-text);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.4;
}

.zfs-tl-desc {
    margin: 0 0 10px;
    color: var(--zfs-muted);
    font-size: 14px;
    line-height: 1.75;
}

.zfs-tl-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--zfs-muted);
    font-size: 12.5px;
    font-weight: 700;
}

/* 状态色：节点 + 状态标签 */
.zfs-tl-item.status-completed .zfs-tl-node {
    color: #fff;
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.zfs-tl-item.status-completed .zfs-tl-status {
    color: #15803d;
    background: #dcfce7;
}

.zfs-tl-item.status-progress .zfs-tl-node {
    color: #fff;
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.zfs-tl-item.status-progress .zfs-tl-status {
    color: #b45309;
    background: #fef3c7;
}

.zfs-tl-item.status-planned .zfs-tl-node {
    color: #fff;
    background: linear-gradient(135deg, #64748b, #94a3b8);
}

.zfs-tl-item.status-planned .zfs-tl-status {
    color: #475569;
    background: #f1f5f9;
}

/* 重要里程碑：放大节点 + 高亮卡片描边 */
.zfs-tl-item.is-highlight .zfs-tl-node {
    width: 48px;
    height: 48px;
    top: 12px;
    box-shadow: 0 0 0 5px #fff, 0 0 0 9px rgba(255, 77, 109, .18), 0 8px 20px rgba(15, 23, 42, .15);
}

.zfs-tl-item.is-highlight .zfs-tl-card {
    border-color: rgba(255, 77, 109, .4);
    box-shadow: 0 16px 40px rgba(255, 77, 109, .16);
}

/* 横向路线通用：视口 + 左右切换按钮 */
.zfs-roadmap-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

.zfs-roadmap-nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .92);
    color: #475569;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
    transform: translateY(-50%);
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .2s ease, opacity .2s ease;
}

.zfs-roadmap-nav:hover {
    color: var(--zfs-primary);
    background: #fff;
    transform: translateY(-50%) scale(1.06);
}

.zfs-roadmap-nav:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: translateY(-50%);
}

.zfs-roadmap-prev { left: 4px; }
.zfs-roadmap-next { right: 4px; }

/* ================================================================
   路线图样式 ②：横向时间线（大气·叙事感）
   新方案：三段式 flex 列，节点固定在中间行，卡片上下交替
   彻底放弃 absolute，避免高度坍塌
   ================================================================ */
.zfs-roadmap--horizontal {
    position: relative;
    padding: 0 0 8px;
}

.zfs-h-track {
    position: relative;
    display: flex;
    gap: 28px;
    overflow-x: auto;
    padding: 8px 52px 24px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.zfs-h-track::-webkit-scrollbar { height: 8px; }
.zfs-h-track::-webkit-scrollbar-track { background: rgba(148,163,184,.15); border-radius: 999px; }
.zfs-h-track::-webkit-scrollbar-thumb { background: rgba(255,77,109,.35); border-radius: 999px; }

/* 每个里程碑：垂直三段（上卡 / 节点行 / 下卡） */
.zfs-h-item {
    flex: 0 0 260px;
    display: grid;
    grid-template-rows: 1fr auto 1fr; /* 上半 / 节点 / 下半，上下等高 */
    align-items: stretch;
    scroll-snap-align: center;
    min-height: 360px;
}

/* 卡片槽（上/下各一个，只有对应方向显示内容，另一个空） */
.zfs-h-slot {
    display: flex;
    align-items: flex-end;   /* 上方卡片贴底（靠近节点） */
    justify-content: center;
    padding: 6px;
    min-height: 0;
}
.zfs-h-bottom .zfs-h-slot { align-items: flex-start; } /* 下方卡片贴顶（靠近节点） */

.zfs-h-card {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid var(--zfs-border);
    border-radius: 14px;
    background: var(--zfs-card);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
    position: relative;
}
/* 卡片指向节点的连接竖线（贴节点一侧） */
.zfs-h-top .zfs-h-card::after,
.zfs-h-bottom .zfs-h-card::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: 18px;
    background: rgba(148, 163, 184, .4);
    transform: translateX(-50%);
}
.zfs-h-top .zfs-h-card::after { bottom: -18px; }
.zfs-h-bottom .zfs-h-card::after { top: -18px; }

/* 节点行：固定在中央，承载水平主线 */
.zfs-h-noderow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    position: relative;
}
/* 水平主线：贯穿整个节点行，用伪元素实现（这样每个 item 之间连成一条线） */
.zfs-h-noderow::before {
    content: "";
    position: absolute;
    left: -14px;   /* 与 gap 衔接 */
    right: -14px;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, rgba(22,163,74,.6), rgba(217,119,6,.55) 50%, rgba(148,163,184,.5));
    transform: translateY(-50%);
}
/* 首尾项的线只画一半（起点/终点） */
.zfs-h-item:first-child .zfs-h-noderow::before { left: 50%; }
.zfs-h-item:last-child .zfs-h-noderow::before { right: 50%; }

.zfs-h-node {
    position: relative;
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--zfs-muted);
    box-shadow: 0 0 0 6px #fff, 0 8px 20px rgba(15, 23, 42, .12);
    font-size: 17px;
}

.zfs-h-item.status-completed .zfs-h-node { color: #fff; background: linear-gradient(135deg, #16a34a, #22c55e); }
.zfs-h-item.status-progress .zfs-h-node { color: #fff; background: linear-gradient(135deg, #d97706, #f59e0b); }
.zfs-h-item.status-planned .zfs-h-node { color: #fff; background: linear-gradient(135deg, #64748b, #94a3b8); }

.zfs-h-item.status-completed .zfs-tl-status { color: #15803d; background: #dcfce7; }
.zfs-h-item.status-progress .zfs-tl-status { color: #b45309; background: #fef3c7; }
.zfs-h-item.status-planned .zfs-tl-status { color: #475569; background: #f1f5f9; }

.zfs-h-item.is-highlight .zfs-h-card {
    border-color: rgba(255, 77, 109, .4);
    box-shadow: 0 16px 40px rgba(255, 77, 109, .16);
}
.zfs-h-item.is-highlight .zfs-h-node {
    box-shadow: 0 0 0 6px #fff, 0 0 0 10px rgba(255, 77, 109, .18), 0 8px 20px rgba(15, 23, 42, .15);
}

@media (max-width: 768px) {
    .zfs-h-item { flex-basis: 220px; min-height: 320px; }
}

/* ================================================================
   路线图样式 ③：横向曲折路线（S 型蜿蜒·动感）
   横向推进：节点沿路径上下起伏，卡片上下交替，形成真正的 S 型路线
   ================================================================ */
.zfs-roadmap--zigzag {
    position: relative;
    padding: 4px 0 8px;
}

.zfs-zz-track {
    position: relative;
    display: flex;
    gap: 34px;
    overflow-x: auto;
    padding: 12px 54px 26px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.zfs-zz-track::-webkit-scrollbar { height: 8px; }
.zfs-zz-track::-webkit-scrollbar-track { background: rgba(148,163,184,.15); border-radius: 999px; }
.zfs-zz-track::-webkit-scrollbar-thumb { background: rgba(255,77,109,.35); border-radius: 999px; }

.zfs-zz-item {
    position: relative;
    flex: 0 0 260px;
    min-height: 390px;
    display: grid;
    grid-template-rows: 1fr 76px 1fr;
    scroll-snap-align: center;
}

.zfs-zz-spacer { min-height: 0; }

/* 卡片：上/下交替靠近节点 */
.zfs-zz-card {
    align-self: end;
    width: 100%;
    padding: 15px 16px;
    border: 1px solid var(--zfs-border);
    border-radius: 14px;
    background: var(--zfs-card);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
}
.zfs-zz-down .zfs-zz-card { align-self: start; }

/* 卡片到节点的短连接线 */
.zfs-zz-up .zfs-zz-card::after,
.zfs-zz-down .zfs-zz-card::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: 20px;
    background: rgba(148, 163, 184, .4);
    transform: translateX(-50%);
}
.zfs-zz-up .zfs-zz-card::after { bottom: -20px; }
.zfs-zz-down .zfs-zz-card::after { top: -20px; }

.zfs-zz-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
}

/* 节点位于中间路径行，但上下错位，制造 S 型起伏 */
.zfs-zz-node {
    align-self: center;
    justify-self: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--zfs-muted);
    box-shadow: 0 0 0 6px #fff, 0 8px 20px rgba(15, 23, 42, .12);
    font-size: 17px;
    z-index: 3;
    position: relative;
}
.zfs-zz-up .zfs-zz-node { transform: translateY(-22px); }
.zfs-zz-down .zfs-zz-node { transform: translateY(22px); }

/* 连接到下一节点的弯曲线：曲线从当前节点中心穿过并延伸到下一节点中心，节点遮住中段后视觉上自然对接 */
.zfs-zz-node::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 294px;
    height: 44px;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.zfs-zz-up .zfs-zz-node::after {
    top: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='294' height='44' viewBox='0 0 294 44' fill='none'%3E%3Cpath d='M0 0 C92 0 132 44 294 44' stroke='%23ff7a99' stroke-opacity='.78' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.zfs-zz-down .zfs-zz-node::after {
    bottom: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='294' height='44' viewBox='0 0 294 44' fill='none'%3E%3Cpath d='M0 44 C92 44 132 0 294 0' stroke='%23ff7a99' stroke-opacity='.78' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.zfs-zz-item:last-child .zfs-zz-node::after { display: none; }

.zfs-zz-item.status-completed .zfs-zz-node { color: #fff; background: linear-gradient(135deg, #16a34a, #22c55e); }
.zfs-zz-item.status-progress .zfs-zz-node { color: #fff; background: linear-gradient(135deg, #d97706, #f59e0b); }
.zfs-zz-item.status-planned .zfs-zz-node { color: #fff; background: linear-gradient(135deg, #64748b, #94a3b8); }

.zfs-zz-item.status-completed .zfs-tl-status { color: #15803d; background: #dcfce7; }
.zfs-zz-item.status-progress .zfs-tl-status { color: #b45309; background: #fef3c7; }
.zfs-zz-item.status-planned .zfs-tl-status { color: #475569; background: #f1f5f9; }

.zfs-zz-item.is-highlight .zfs-zz-card {
    border-color: rgba(255, 77, 109, .4);
    box-shadow: 0 16px 40px rgba(255, 77, 109, .16);
}
.zfs-zz-item.is-highlight .zfs-zz-node {
    box-shadow: 0 0 0 6px #fff, 0 0 0 10px rgba(255, 77, 109, .18), 0 8px 20px rgba(15, 23, 42, .15);
}

@media (max-width: 768px) {
    .zfs-roadmap-nav { width: 34px; height: 34px; }
    .zfs-h-track { padding-inline: 44px; }
    .zfs-zz-track { gap: 26px; padding-inline: 46px; }
    .zfs-zz-item { flex-basis: 230px; min-height: 360px; }
    .zfs-zz-node::after { width: 262px; height: 40px; }
}


/* ================================================================
   路线图样式 ④：卡片阶梯（扁平卡片墙·紧凑现代）
   ================================================================ */
.zfs-roadmap--steps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.zfs-st-item {
    position: relative;
    padding: 22px 22px 20px;
    border: 1px solid var(--zfs-border);
    border-radius: 18px;
    background: var(--zfs-card);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
}

.zfs-st-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--zfs-muted);
}

.zfs-st-item.status-completed::before { background: linear-gradient(180deg, #16a34a, #22c55e); }
.zfs-st-item.status-progress::before { background: linear-gradient(180deg, #d97706, #f59e0b); }
.zfs-st-item.status-planned::before { background: linear-gradient(180deg, #64748b, #94a3b8); }

.zfs-st-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(15, 23, 42, .12);
}

.zfs-st-index {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    color: rgba(148, 163, 184, .18);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
}

.zfs-st-node {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 16px;
}

.zfs-st-item.status-completed .zfs-st-node { color: #15803d; background: #dcfce7; }
.zfs-st-item.status-progress .zfs-st-node { color: #b45309; background: #fef3c7; }
.zfs-st-item.status-planned .zfs-st-node { color: #475569; background: #f1f5f9; }

.zfs-st-item.status-completed .zfs-tl-status { color: #15803d; background: #dcfce7; }
.zfs-st-item.status-progress .zfs-tl-status { color: #b45309; background: #fef3c7; }
.zfs-st-item.status-planned .zfs-tl-status { color: #475569; background: #f1f5f9; }

.zfs-st-item.is-highlight {
    border-color: rgba(255, 77, 109, .35);
    box-shadow: 0 16px 40px rgba(255, 77, 109, .14);
}
.zfs-st-item.is-highlight::before { background: linear-gradient(180deg, #ff4d6d, #ff8fab); }

@media (max-width: 768px) {
    .zfs-roadmap--steps { grid-template-columns: 1fr; }
}

/* ================================================================
   功能图集画廊
   ================================================================ */
.zib-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.zib-gallery-item {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .1);
    transition: transform .25s ease, box-shadow .25s ease;
}

.zib-gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(15, 23, 42, .16);
}

/* 触发器：铺满整个 figure，无默认按钮样式 */
.zib-gallery-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: zoom-in;
    color: inherit;
    font: inherit;
    text-align: left;
}

.zib-gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .35s ease, filter .3s ease;
}

.zib-gallery-item:hover img {
    transform: scale(1.06);
}

/* 悬停相机图标遮罩 */
.zib-gallery-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .42);
    color: #fff;
    font-size: 38px;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.zib-gallery-zoom i {
    width: 74px;
    height: 74px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid rgba(255, 255, 255, .35);
    transform: scale(.7);
    transition: transform .3s ease;
}

.zib-gallery-trigger:hover .zib-gallery-zoom,
.zib-gallery-trigger:focus-visible .zib-gallery-zoom {
    opacity: 1;
}

.zib-gallery-trigger:hover .zib-gallery-zoom i,
.zib-gallery-trigger:focus-visible .zib-gallery-zoom i {
    transform: scale(1);
}

.zib-gallery-item figcaption {
    padding: 13px 15px 15px;
    background: rgba(255, 255, 255, .94);
    color: var(--zfs-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    text-align: left;
}

/* ================================================================
   空状态
   ================================================================ */
.zib-feature-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 34px;
    border: 1px dashed rgba(255, 77, 109, .35);
    border-radius: 22px;
    background: #fffafb;
    text-align: center;
    color: var(--zfs-muted);
}

.zib-feature-empty i {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 20px;
    background: var(--zfs-primary-soft);
    color: var(--zfs-primary);
    font-size: 26px;
}

.zib-feature-empty strong {
    margin-bottom: 6px;
    color: var(--zfs-text);
    font-size: 18px;
    font-weight: 900;
}

/* ================================================================
   暗色主题适配
   ================================================================ */
[data-theme="dark"] .zib-feature-showcase,
html.dark-theme .zib-feature-showcase,
body.dark-theme .zib-feature-showcase,
.dark-theme .zib-feature-showcase,
html.dark-mode .zib-feature-showcase,
body.dark-mode .zib-feature-showcase,
.dark-mode .zib-feature-showcase,
.zib-feature-showcase.zfs-is-dark {
    --zfs-text: #f8fafc;
    --zfs-muted: #cbd5e1;
    --zfs-border: rgba(148, 163, 184, .22);
    --zfs-card: rgba(15, 23, 42, .88);
}

[data-theme="dark"] .zib-feature-shell,
html.dark-theme .zib-feature-shell,
body.dark-theme .zib-feature-shell,
.dark-theme .zib-feature-shell,
html.dark-mode .zib-feature-shell,
body.dark-mode .zib-feature-shell,
.dark-mode .zib-feature-shell,
.zib-feature-showcase.zfs-is-dark .zib-feature-shell,
[data-theme="dark"] .zib-feature-tabs,
html.dark-theme .zib-feature-tabs,
body.dark-theme .zib-feature-tabs,
.dark-theme .zib-feature-tabs,
html.dark-mode .zib-feature-tabs,
body.dark-mode .zib-feature-tabs,
.dark-mode .zib-feature-tabs,
.zib-feature-showcase.zfs-is-dark .zib-feature-tabs,
[data-theme="dark"] .zfs-gallery-card,
html.dark-theme .zfs-gallery-card,
body.dark-theme .zfs-gallery-card,
.dark-theme .zfs-gallery-card,
html.dark-mode .zfs-gallery-card,
body.dark-mode .zfs-gallery-card,
.dark-mode .zfs-gallery-card,
.zib-feature-showcase.zfs-is-dark .zfs-gallery-card,
[data-theme="dark"] .zib-compare-wrap,
html.dark-theme .zib-compare-wrap,
body.dark-theme .zib-compare-wrap,
.dark-theme .zib-compare-wrap,
html.dark-mode .zib-compare-wrap,
body.dark-mode .zib-compare-wrap,
.dark-mode .zib-compare-wrap,
.zib-feature-showcase.zfs-is-dark .zib-compare-wrap {
    background: rgba(15, 23, 42, .86);
}

[data-theme="dark"] .zfs-tl-card,
html.dark-theme .zfs-tl-card,
body.dark-theme .zfs-tl-card,
.dark-theme .zfs-tl-card,
html.dark-mode .zfs-tl-card,
body.dark-mode .zfs-tl-card,
.dark-mode .zfs-tl-card,
[data-theme="dark"] .zfs-h-card,
html.dark-theme .zfs-h-card,
body.dark-theme .zfs-h-card,
.dark-theme .zfs-h-card,
html.dark-mode .zfs-h-card,
body.dark-mode .zfs-h-card,
.dark-mode .zfs-h-card,
.zib-feature-showcase.zfs-is-dark .zfs-h-card,
[data-theme="dark"] .zfs-zz-card,
html.dark-theme .zfs-zz-card,
body.dark-theme .zfs-zz-card,
.dark-theme .zfs-zz-card,
html.dark-mode .zfs-zz-card,
body.dark-mode .zfs-zz-card,
.dark-mode .zfs-zz-card,
.zib-feature-showcase.zfs-is-dark .zfs-zz-card {
    background: rgba(30, 41, 59, .94);
    color: var(--zfs-text);
}

[data-theme="dark"] .zib-gallery-item,
html.dark-theme .zib-gallery-item,
body.dark-theme .zib-gallery-item,
.dark-theme .zib-gallery-item,
html.dark-mode .zib-gallery-item,
body.dark-mode .zib-gallery-item,
.dark-mode .zib-gallery-item,
.zib-feature-showcase.zfs-is-dark .zib-gallery-item,
[data-theme="dark"] .zib-gallery-item figcaption,
html.dark-theme .zib-gallery-item figcaption,
body.dark-theme .zib-gallery-item figcaption,
.dark-theme .zib-gallery-item figcaption,
html.dark-mode .zib-gallery-item figcaption,
body.dark-mode .zib-gallery-item figcaption,
.dark-mode .zib-gallery-item figcaption,
.zib-feature-showcase.zfs-is-dark .zib-gallery-item figcaption {
    background: rgba(30, 41, 59, .94);
    color: var(--zfs-text);
}

[data-theme="dark"] .zfs-tl-card::after,
html.dark-theme .zfs-tl-card::after,
body.dark-theme .zfs-tl-card::after,
.dark-theme .zfs-tl-card::after,
html.dark-mode .zfs-tl-card::after,
body.dark-mode .zfs-tl-card::after,
.dark-mode .zfs-tl-card::after,
.zib-feature-showcase.zfs-is-dark .zfs-tl-card::after {
    background: rgba(30, 41, 59, .94);
}

[data-theme="dark"] .zib-feature-tab.is-active,
.dark-theme .zib-feature-tab.is-active,
[data-theme="dark"] .zib-compare-table thead th,
.dark-theme .zib-compare-table thead th,
[data-theme="dark"] .zfs-gallery-ph,
.dark-theme .zfs-gallery-ph,
[data-theme="dark"] .zfs-tl-node,
.dark-theme .zfs-tl-node,
[data-theme="dark"] .zib-feature-empty,
.dark-theme .zib-feature-empty {
    background: rgba(30, 41, 59, .96);
}

[data-theme="dark"] .zib-compare-table tbody tr:hover td,
.dark-theme .zib-compare-table tbody tr:hover td {
    background: rgba(30, 41, 59, .6);
}

/* 兼容不同站点的暗色命名：纯 CSS 兜底，避免依赖 JS 检测 */
:is(html.dark, body.dark, .dark, html.night, body.night, .night, html.black, body.black, .black, html.darkmode, body.darkmode, .darkmode, html.theme-dark, body.theme-dark, .theme-dark, html.skin-dark, body.skin-dark, .skin-dark, html.mode-dark, body.mode-dark, .mode-dark, [data-theme="dark"], [data-theme="night"], [data-theme="black"], [data-skin="dark"], [data-color-mode="dark"], [data-bs-theme="dark"]) .zib-feature-showcase,
.zib-feature-showcase[data-theme="dark"],
.zib-feature-showcase[data-skin="dark"],
.zib-feature-showcase[data-color-mode="dark"],
.zib-feature-showcase[data-bs-theme="dark"] {
    --zfs-text: #f8fafc;
    --zfs-muted: #cbd5e1;
    --zfs-border: rgba(148, 163, 184, .22);
    --zfs-card: rgba(15, 23, 42, .88);
}

:is(html.dark, body.dark, .dark, html.night, body.night, .night, html.black, body.black, .black, html.darkmode, body.darkmode, .darkmode, html.theme-dark, body.theme-dark, .theme-dark, html.skin-dark, body.skin-dark, .skin-dark, html.mode-dark, body.mode-dark, .mode-dark, [data-theme="dark"], [data-theme="night"], [data-theme="black"], [data-skin="dark"], [data-color-mode="dark"], [data-bs-theme="dark"]) .zfs-tl-card,
:is(html.dark, body.dark, .dark, html.night, body.night, .night, html.black, body.black, .black, html.darkmode, body.darkmode, .darkmode, html.theme-dark, body.theme-dark, .theme-dark, html.skin-dark, body.skin-dark, .skin-dark, html.mode-dark, body.mode-dark, .mode-dark, [data-theme="dark"], [data-theme="night"], [data-theme="black"], [data-skin="dark"], [data-color-mode="dark"], [data-bs-theme="dark"]) .zfs-h-card,
:is(html.dark, body.dark, .dark, html.night, body.night, .night, html.black, body.black, .black, html.darkmode, body.darkmode, .darkmode, html.theme-dark, body.theme-dark, .theme-dark, html.skin-dark, body.skin-dark, .skin-dark, html.mode-dark, body.mode-dark, .mode-dark, [data-theme="dark"], [data-theme="night"], [data-theme="black"], [data-skin="dark"], [data-color-mode="dark"], [data-bs-theme="dark"]) .zfs-zz-card {
    background: rgba(30, 41, 59, .94);
    color: var(--zfs-text);
}

/* ================================================================
   平板断点：画廊降为 2 列（窄屏不放 4 个，每张图仍够大）
   ================================================================ */
@media (max-width: 1100px) and (min-width: 769px) {
    .zib-feature-gallery,
    .zib-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ================================================================
   响应式：时间线在移动端改为单侧（靠左）
   ================================================================ */
@media (max-width: 768px) {
    .zib-feature-tabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .zib-feature-tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-width: 126px;
    }

    .zib-feature-panels {
        padding: 16px;
    }

    .zib-feature-gallery {
        grid-template-columns: 1fr;
    }

    /* 时间线移动端：竖线靠左，卡片全部右侧 */
    .zfs-timeline-rail {
        left: 20px;
        transform: none;
    }

    .zfs-tl-item,
    .zfs-tl-left,
    .zfs-tl-right {
        width: 100%;
        left: 0;
        padding: 0 0 0 56px;
        justify-content: flex-start;
    }

    .zfs-tl-left .zfs-tl-node,
    .zfs-tl-right .zfs-tl-node {
        left: 0;
        right: auto;
    }

    .zfs-tl-left .zfs-tl-card::after,
    .zfs-tl-right .zfs-tl-card::after {
        left: -7px;
        right: auto;
        transform: rotate(135deg);
    }

    .zfs-tl-card {
        max-width: 100%;
    }

    .zib-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   轻量灯箱（黑色遮罩 + 居中放大 + 左右切换）
   ================================================================ */
.zfs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: background .25s ease, opacity .25s ease;
}

.zfs-lightbox.is-visible {
    background: rgba(0, 0, 0, .92);
    opacity: 1;
}

.zfs-lightbox[hidden] {
    display: none !important;
}

/* 锁滚动时给 body 加 */
body.zfs-lb-open {
    overflow: hidden;
}

.zfs-lb-figure {
    margin: 0;
    max-width: 98vw;
    max-height: 96vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.zfs-lb-img {
    display: block;
    max-width: 98vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
    transform: scale(.92);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
}

.zfs-lightbox.is-visible .zfs-lb-img {
    transform: scale(1);
    opacity: 1;
}

/* 加载中：隐藏图片占位，显示转圈 */
.zfs-lightbox.is-loading .zfs-lb-img {
    opacity: 0;
}

.zfs-lightbox.is-loading::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 4px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: zfsLbSpin .8s linear infinite;
}

@keyframes zfsLbSpin {
    to { transform: rotate(360deg); }
}

.zfs-lb-caption {
    color: rgba(255, 255, 255, .88);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    max-width: 80vw;
    line-height: 1.5;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

/* 右上角关闭 */
.zfs-lb-close {
    position: fixed;
    top: 22px;
    right: 22px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .2s ease, transform .2s ease;
}

.zfs-lb-close:hover {
    background: rgba(255, 255, 255, .25);
    transform: rotate(90deg);
}

/* 左右切换 */
.zfs-lb-prev,
.zfs-lb-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .2s ease;
}

.zfs-lb-prev { left: 22px; }
.zfs-lb-next { right: 22px; }

.zfs-lb-prev:hover,
.zfs-lb-next:hover {
    background: rgba(255, 255, 255, .22);
}

@media (max-width: 768px) {
    .zfs-lb-close { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 24px; }
    .zfs-lb-prev, .zfs-lb-next { width: 44px; height: 44px; font-size: 24px; }
    .zfs-lb-prev { left: 10px; }
    .zfs-lb-next { right: 10px; }
    .zfs-lb-img { max-width: 100vw; max-height: 86vh; }
}