/* 分贝通·小贝 落地页 */

:root {
    /* 品牌橙取自 base.css 的 .fb-btn，保持全站一致 */
    --xb-orange: #FF942E;
    --xb-orange-hover: #FF8700;
}

/* SEO 用的关键词 h1，不可见。站内其他页面这条规则写在各自的 css 里
 * （new-travel.css / home.css 等），base.css 并没有，所以这里要自己带一份 */
h1.the_h1 {
    overflow: hidden;
    height: 0;
    margin: 0;
    padding: 0;
}

.xb-page {
    background: #fff;
    overflow: hidden;
}

/* ---------- 通用区块 ---------- */
.xb-section {
    padding: 80px 0;
}

.xb-section-head {
    text-align: center;
    margin-bottom: 48px;
}

.xb-section-title {
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    color: #222;
}

.xb-section-subtitle {
    margin-top: 16px;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #222222;
}

.xb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 40px;
    height: 60px;
    border-radius: 4px;
    background: var(--xb-orange);
    color: #fff;
    font-size: 18px;
    text-align: center;
    transition: background .2s;
}

.xb-btn:hover {
    background: var(--xb-orange-hover);
}

.xb-btn-spark {
    flex: none;
    width: 16px;
    height: 16px;
}

/* ---------- 1. 首屏 banner ---------- */
.xb-banner {
    background: #fff;
}

/* 背景图不通栏：挂在 .fbb-block-wrap 上，与 .header-wrap 同宽同断点 */
.xb-banner-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 设计稿里首屏内容不与导航对齐，两侧比 .fbb-block-wrap 再内缩 80px */
    /* 与首页 banner 对齐：紧贴导航下沿起始，高度 585px */
    margin-top: 60px;
    height: 585px;
    padding: 0 80px;
    box-sizing: border-box;
    background-color: #fff9f2;
    background-image: url(https://stc-op.fenbeitong.com/img_op/img/home/202502/section_1_bg_20260923.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.xb-banner-left {
    flex: 1;
    padding-right: 40px;
}

.xb-banner-badge {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    font-size: 26px;
    line-height: 38px;
    color: #222;
}

.xb-banner-badge-icon {
    flex: none;
    width: 36px;
    height: 36px;
    margin-right: 12px;
}

.xb-banner-title {
    margin-top: 28px;
    font-weight: 600;
    font-size: 44px;
    line-height: 68px;
    color: #222;
}

.xb-banner-desc {
    margin-top: 20px;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #222222;
}

.xb-banner-btn {
    margin-top: 36px;
}

.xb-banner-right {
    flex: none;
    /* 素材 968x1420，等比缩放。390 宽 -> 572 高，放得进 585 的 banner */
    width: 390px;
}

.xb-banner-right img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- 2. Agent 环形图 ---------- */
/* 整块由一张图承载：小贝主视觉、7 个节点图标与文字都在图里 */
.xb-ring {
    display: block;
    width: 1153px;          /* 素材 2306x1270，按 @2x 输出 */
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ---------- 3. Agent tab 区块 ---------- */
.xb-tabs {
    display: flex;
    margin: 0 auto 48px;
    background: #fff;
}

.xb-tab {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    /* 未选中态的上下细线，同粗同色；选中/hover 时橙色底会盖掉 */
    box-shadow: inset 0 1px 0 #d0d0d0, inset 0 -1px 0 #d0d0d0;
    transition: background .2s, color .2s;
}

/* 相邻两个未选中 tab 之间的短竖线 */
.xb-tab + .xb-tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 24px;
    margin-top: -12px;
    background: #d7d7d7;
}

/* 选中/hover 的 tab 自身、以及紧跟其后的那个 tab，都不画竖线 */
.xb-tab.active::before,
.xb-tab.active + .xb-tab::before,
.xb-tab:hover::before,
.xb-tab:hover + .xb-tab::before {
    display: none;
}

/* tab 图标：黑白两版叠在一起，靠 opacity 切换，避免换 src 时闪一下 */
.xb-tab-icon {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.xb-tab-icon img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .2s;
}

.xb-tab-icon .is-white {
    opacity: 0;
}

.xb-tab.active,
.xb-tab:hover {
    background: var(--xb-orange);
    color: #fff;
    font-weight: 500;
    box-shadow: none;
}

.xb-tab.active .xb-tab-icon .is-black,
.xb-tab:hover .xb-tab-icon .is-black {
    opacity: 0;
}

.xb-tab.active .xb-tab-icon .is-white,
.xb-tab:hover .xb-tab-icon .is-white {
    opacity: 1;
}

.xb-panel {
    display: none;
}

.xb-panel.active {
    display: block;
}

.xb-panel-inner {
    display: flex;
    align-items: center;
}

/* 左右严格各占一半，列间距做在文字列的 padding 上，不用 gap
 * （gap 会从两列的 50% 里再扣，导致图片占不满一半） */
.xb-panel-text,
.xb-panel-media {
    flex: none;
    width: 50%;
    box-sizing: border-box;
}

.xb-panel-text {
    padding-right: 64px;
}

.xb-panel-inner.reverse .xb-panel-text {
    padding-right: 0;
    padding-left: 64px;
}

/* 图文左右互换 */
.xb-panel-inner.reverse {
    flex-direction: row-reverse;
}

.xb-panel-title {
    font-weight: 500;
    font-size: 28px;
    line-height: 38px;
    color: #222;
}

.xb-panel-desc {
    margin-top: 16px;
    font-weight: 300;
    font-size: 15px;
    line-height: 26px;
    color: #222222;
    /* 按最多 2 行定高，切 tab 时不上下跳 */
    height: 52px;
}

.xb-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
    margin-top: 40px;
}

.xb-feature-title {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #222;
}

/* 特性点图标，素材 48x48 */
.xb-feature-icon {
    flex: none;
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.xb-feature-desc {
    margin-top: 8px;
    font-size: 14px;
    line-height: 22px;
    color: #222222;
    /* 同上，按最多 2 行定高 */
    height: 44px;
}

.xb-panel-media {
    /* 高度按素材 1120x772 的比例推出，各 panel 一致 */
    aspect-ratio: 1120 / 772;
}

.xb-panel-media img {
    display: block;
    width: 100%;
    height: 100%;
    /* section3_main_right_1 比其余 7 张略宽，用 contain 兜住不变形 */
    object-fit: contain;
}

/* ---------- 4. AI 办公平台 ---------- */
.xb-platform-list {
    display: flex;
    gap: 40px;
    /* 卡片按内容高度，hover 时单独长高 */
    align-items: flex-start;
}

.xb-platform-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 40px 32px 32px;
    border: 1px solid #ebedf0;
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
    transition: box-shadow .2s;
}

/* hover：顶部橙色条 + 下方「立即体验」显现 */
.xb-platform-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--xb-orange);
    opacity: 0;
    transition: opacity .2s;
}

.xb-platform-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.xb-platform-card:hover::before {
    opacity: 1;
}

.xb-platform-tag {
    position: absolute;
    top: 28px;
    right: 32px;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    background: #29ce76;
    font-size: 15px;
    color: #fff;
}

.xb-platform-tag-check {
    width: 13px;
    height: 13px;
    margin-right: 6px;
}

.xb-platform-head {
    display: flex;
    align-items: center;
    margin-top: 36px;
}

.xb-platform-logo {
    flex: none;
    display: block;
    width: 40px;              /* 素材 80x80，@2x */
    height: 40px;
    margin-right: 12px;
}

.xb-platform-name {
    font-weight: 500;
    font-size: 22px;
    color: #222;
}

.xb-platform-desc {
    margin-top: 20px;
    font-size: 15px;
    line-height: 26px;
    color: #222222;
    min-height: 78px;
}

.xb-platform-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.xb-platform-tags span {
    padding: 5px 12px;
    border-radius: 6px;
    background: #efefef;
    font-size: 13px;
    color: #222222;
}

.xb-platform-note-sub {
    margin-top: 20px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 300;
    font-size: 20px;
    line-height: 28px;
    color: #222222;
}

.xb-platform-note {
    margin-top: 60px;
    /* 设计稿导出的是 text-align: right，但稿面上这两行是居中的
     * （第二行短句居中压在第一行下方），故保留 center */
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    line-height: 36px;
    color: #222222;
}

/* 移动端：本期仅做 PC。页面根节点带 .pc，768px 以下由 base.css 统一隐藏，
 * 后续补移动端时在这里追加 @media (max-width: 768px) 的样式即可。 */

/* 中等屏幕：fbb-block-wrap 会收窄到 1200 / 960，
 * 同步收窄右侧配图，避免左侧文案被挤成窄条 */
/* 1439 及以下把首屏内缩收窄，给 52px 标题留出单行空间；
 * 1440 保持 80px 不动，设计稿就是按 1440 出的 */
@media screen and (max-width: 1439px) {
    .xb-banner-wrap {
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media screen and (max-width: 1440px) {
    .xb-panel-text {
        padding-right: 40px;
    }

    .xb-panel-inner.reverse .xb-panel-text {
        padding-right: 0;
        padding-left: 40px;
    }

}

@media screen and (max-width: 1200px) {
    .xb-feature-grid {
        gap: 24px 28px;
    }

    .xb-banner-right {
        width: 330px;
    }

    .xb-banner-wrap {
        height: 520px;
    }

    .xb-banner-wrap {
        padding-left: 40px;
        padding-right: 40px;
    }

    .xb-banner-badge {
        font-size: 22px;
    }
}