/* JKB page styles extracted from template during CSS spacing migration. */
/* 页眉与首屏背景融合 - 初始透明，滚动后变白 */
.header:not(.header-active) {
    background-color: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.header.header-active {
    background-color: #FFFFFF !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 监控宝首屏背景 - 对齐 itam Figma 设计规范 */
/* 线性渐变 #F5F4FF(0%) → #E1DBFF(100%), H:640, Header.png 网格叠层 */
.product-hero {
    background-image: url('/frontStatic/cn/image/newIndex/Header.png'),
                      linear-gradient(135deg, #F5F4FF 0%, #E1DBFF 100%);
    background-color: #F5F4FF;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    height: 640px;
    /* 间距：标签距顶部160px（含64px页眉），按钮距底部164px */
    padding-top: 160px;
    padding-bottom: 164px;
    align-items: flex-start;
}

/* 1. 左侧标签 - 颜色与间距 */
.product-hero .product-badge {
    color: #6B7280;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 24px;
}
.product-hero .product-badge .badge-accent {
    color: #6246E8;
    font-weight: 700;
}

/* 2. 标题 - 颜色与间距 */
.product-hero .product-hero-title {
    color: #6246E8;
    font-size: var(--title-hero);
    line-height: 68px;
}

/* 3. 描述文本 */
.product-hero .product-hero-description {
    color: #1E293B;
    font-size: 20px;
    line-height: 28px;
    max-width: 680px;
}

@media (max-width: 767px) {
    .product-hero .product-hero-description {
        font-size: 16px;
        line-height: 24px;
        max-width: 100%;
    }
}

/* 4. 按钮 - 尺寸 233×62, radius:12, gap:43, fill:#6246E8, 去掉绿色阴影底 */
.product-hero .product-btn-primary {
    border-radius: 12px;
    height: 62px;
    min-width: 233px;
    font-size: 18px;
    line-height: 21px;
    gap: 43px;
    box-shadow: none;
    /* 描边：上下1px #FFFFFF 20%，左右无 */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-left: none;
    border-right: none;
    /* 纯色背景，避免绿色 box-shadow 闪烁 */
    background: linear-gradient(180deg, #6246E8 0%, #6246E8 100%);
    transition: opacity 0.25s ease, box-shadow 0.25s ease;
}
.product-hero .product-btn-primary svg {
    transition: transform 0.25s ease;
}
.product-hero .product-btn-primary:hover,
.product-hero .product-btn-primary:focus {
    opacity: 0.9;
    box-shadow: 0 8px 24px rgba(98, 70, 232, 0.45);
}
.product-hero .product-btn-primary:hover svg,
.product-hero .product-btn-primary:focus svg {
    transform: translateX(4px);
}

/* 5. 右侧图片 - 固定宽高、圆角、裁切 */
.product-hero .product-hero-image-wrapper img {
    width: 600px;
    height: 335px;
    border-radius: 8px;
    object-fit: cover;
}

/* 第2屏 - 全球分布式拨测功能展示（手风琴） */
.jkb-section2 {
    background: #FFFFFF;
    padding: 0 24px 120px;
}

.jkb-section2-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 120px;
}

.jkb-section2-title {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: var(--title-section);
    font-weight: 600;
    line-height: 56px;
    color: #1F2A28;
    margin: 0 0 60px;
    text-align: center;
}

.jkb-section2-body {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 128px;
    margin-top: 80px;
}

/* 第2行/第4行 - 图左 + 手风琴右 */
.jkb-section2-body-r {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 128px;
    margin-top: 80px;
}

/* 左侧手风琴面板 */
.jkb-section2-left {
    flex: 0 0 576px;
    width: 576px;
    min-width: 0;
}

.jkb-group-title {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 44px;
    color: #1F2A28;
    margin: 0 0 8px;
}

.jkb-group-desc {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #6B7280;
    margin: 0;
}

.jkb-accordion-sep {
    height: 1px;
    background: #D5D8D6;
    margin: 28px 0 0;
}

/* 手风琴条目 */
.jkb-acc-item {
    border-bottom: 1px solid #D5D8D6;
}

.jkb-acc-item.is-active {
    border-bottom: 2px solid #6246E8;
}

.jkb-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    cursor: pointer;
    user-select: none;
}

.jkb-acc-title {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #1E293B;
    flex: 1;
}

.jkb-acc-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.jkb-acc-item.is-active .jkb-acc-icon {
    transform: rotate(180deg);
}

.jkb-acc-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease, padding-bottom 0.35s ease;
    padding-bottom: 0;
}

.jkb-acc-item.is-active .jkb-acc-body {
    max-height: 300px;
    padding-bottom: 20px;
}

.jkb-acc-body p {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #6B7280;
    margin: 0;
}

/* 右侧图片 - 直接作为flex子项，Figma: 576×307, radius:8, stroke inside 1px */
.jkb-section2-img {
    flex: 0 0 576px;
    width: 576px;
    height: 307px;
    object-fit: cover;
    object-position: top;
    border-radius: 8px;
    clip-path: inset(0 round 8px);
    display: block;
    box-shadow: inset 0 0 0 1px rgba(90, 107, 103, 0.1);
}

@media (max-width: 767px) {
    .jkb-section2-inner {
        padding-top: 80px;
    }
    .jkb-section2-title {
        font-size: 36px;
        line-height: 44px;
        margin-bottom: 48px;
    }
    .jkb-section2-body,
    .jkb-section2-body-r {
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
        margin-top: 64px;
    }
    .jkb-section2-left {
        flex: none;
        width: 100%;
    }
    .jkb-section2-img {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 576 / 307;
    }
}

@media (max-width: 767px) {
    .jkb-section2 {
        padding: 0 16px 80px;
    }
    .jkb-section2-inner {
        padding-top: 64px;
    }
    .jkb-section2-title {
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 20px;
    }
    .jkb-group-title {
        font-size: 22px;
        line-height: 30px;
    }
    /* 图左+手风琴右的行：H5 下反转顺序，让文字先于图片显示 */
    .jkb-section2-body-r {
        flex-direction: column-reverse;
    }
}

/* 第3屏 - Benefits Section */
.product-benefits {
    background: #FFFFFF;
    padding: 0 24px 64px;
}

.product-benefits .product-section-content {
    max-width: 1280px;
    display: flex;
    gap: 128px;
    justify-content: start;
    align-items: flex-start;
    padding-top: 152px;
}

.product-benefits .product-benefits-column {
    flex: 0 0 576px;
    width: 576px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 128px;
    margin: 0;
    padding-left: 0;
}

.product-benefits .product-benefits-column-left {
    padding-top: 50px;
}

.product-benefits .product-benefit-content {
    width: 443px;
    max-width: 443px;
    min-height: 236px;
    margin-left: 0;
    margin-right: 0;
    align-self: flex-start;
}

.product-benefits .product-benefit-image {
    width: 576px;
    max-width: 576px;
    margin-left: -32px;
    margin-right: 0;
    align-self: flex-start;
}

.product-benefits .product-benefit-image-wrapper {
    border-radius: 0;
    border: none;
    box-shadow: none;
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
}

.product-benefits .product-benefit-image-wrapper::before {
    content: none;
}

.product-benefits .product-benefit-image-wrapper img {
    width: 100%;
    aspect-ratio: 576 / 334;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0;
}

.product-benefits .product-benefit-title {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 44px;
    color: #1F2A28;
    margin-bottom: 24px;
    letter-spacing: 0;
}

.product-benefits .product-benefit-description {
    margin-bottom: 0;
}

.product-benefits .benefit-point {
    margin-bottom: 12px;
}

.product-benefits .benefit-point:last-child {
    margin-bottom: 0;
}

.product-benefits .benefit-point-title {
    position: relative;
    margin: 0 0 4px;
    padding-left: 14px;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #1E293B;
}

.product-benefits .benefit-point-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #1F2A28;
}

.product-benefits .benefit-point-text {
    margin: 0;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #6B7280;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .product-benefits .product-section-content {
        display: block;
        padding-top: 80px;
    }

    .product-benefits .product-benefits-column {
        width: 100%;
        flex: none;
        gap: 40px;
    }

    .product-benefits .product-benefits-column + .product-benefits-column {
        margin-top: 80px;
    }

    .product-benefits .product-benefits-column-left {
        padding-top: 0;
    }

    .product-benefits .product-benefit-content,
    .product-benefits .product-benefit-image {
        width: 100%;
        max-width: 100%;
        min-height: 0;
        margin-left: 0;
    }

    .product-benefits .product-benefit-image-wrapper,
    .product-benefits .product-benefit-image-wrapper img {
        margin-left: 0;
        margin-right: 0;
    }

    .product-benefits .product-benefit-title {
        font-size: 30px;
        line-height: 38px;
    }
}

@media (max-width: 767px) {
    .product-benefits {
        padding: 0 16px 48px;
    }
    .product-benefits .product-section-content {
        padding-top: 0;
    }
    .product-benefits .product-benefits-column {
        gap: 24px;
    }
    .product-benefits .product-benefits-column + .product-benefits-column {
        margin-top: 40px;
    }
    .product-benefits .product-benefit-title {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 12px;
    }
    .product-benefits .benefit-point-text {
        white-space: normal;
    }
}
/* 第4屏 - Features Section - 对齐 log-monitoring */
.product-features {
    background: linear-gradient(180deg, #EBF0FF 0%, #FFFFFF 47%, #EBF0FF 100%);
    padding: 80px 24px;
}

.product-features .product-section-content {
    max-width: 1280px;
    margin: 0 auto;
}

.product-features .product-features-header {
    text-align: center;
    margin-bottom: 40px;
}

.product-features .product-features-title {
    margin: 0 0 16px;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: var(--title-section);
    font-weight: 600;
    color: #1E293B;
    letter-spacing: -0.02em;
    text-align: center;
}

.product-features .product-features-description {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    color: #6B7280;
    text-align: center;
    margin: 0 auto;
}

.product-features .product-feature-card {
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #E6EAF0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    transition: all 0.3s;
}

.product-features .product-feature-card:hover {
    border-color: rgba(98, 70, 232, 0.6);
    box-shadow: 0 8px 24px rgba(98, 70, 232, 0.18);
}

.product-features .product-feature-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: #ECEBFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-features .product-feature-icon img {
    width: 28px;
    height: 28px;
    display: block;
}

.product-features .product-feature-title {
    margin: 0 0 8px;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #1E293B;
}

.product-features .product-feature-description {
    margin: 0;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #6B7280;
    text-align: left;
}

@media (max-width: 767px) {
    .product-features {
        padding: 64px 20px;
    }
}

@media (max-width: 767px) {
    .product-features {
        padding: 40px 16px 32px;
    }
    .product-features .product-features-title {
        font-size: 22px;
        line-height: 30px;
    }
}

/* 第5屏 - Coverage Section */
.jkb-coverage {
    position: relative;
    background: #0e005d;
    overflow: hidden;
}

.jkb-coverage-title-bar {
    text-align: center;
    padding: 119px 24px 84px;
}

.jkb-coverage-title {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 1.875rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: -0.02em;
}

/* 轮播容器 */
.jkb-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.jkb-carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.jkb-carousel-slide {
    min-width: 100%;
    flex-shrink: 0;
    background: #0e005d;
    position: relative;
    height: 563px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jkb-carousel-slide img {
    display: block;
    width: 1121px;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: screen;
}

/* 底部控制栏 */
.jkb-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 24px auto 0;
    padding: 0 0 80px;
}

/* 左右箭头按鈕 58×58 */
.jkb-carousel-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(216, 208, 255, 0.16);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
    margin: 0 40px;
}

.jkb-carousel-btn:hover {
    background: rgba(216, 208, 255, 0.28);
}

.jkb-carousel-btn svg {
    width: 20px;
    height: 20px;
    stroke: #FFFFFF;
}

/* 小点指示器 56×12，间距8 */
.jkb-carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jkb-carousel-dot {
    height: 12px;
    border-radius: 6px;
    background: rgba(216, 208, 255, 0.30);
    transition: width 0.3s, background 0.3s;
    width: 24px;
}

.jkb-carousel-dot.is-active {
    width: 32px;
    background: #6246E8;
}

@media (max-width: 767px) {
    .jkb-coverage-title {
        font-size: 1.375rem;
    }
    .jkb-coverage-title-bar {
        padding: 56px 16px 40px;
    }
    .jkb-carousel-btn {
        width: 44px;
        height: 44px;
        margin: 0 16px;
    }
    .jkb-carousel-controls {
        padding-bottom: 36px;
    }
    /* 地图卡片：两图用同一宽高比（1121:563），保持叠加层坐标系一致 */
    .jkb-carousel-slide {
        display: block;
        height: auto;
        padding-top: 50.22%; /* 563 ÷ 1121 × 100% */
    }
    .jkb-carousel-slide img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain; /* 保持图片原始比例，世界地图几乎无留白，中国地图两侧留白与桌面一致 */
    }
    /* 全球叠加层：图片比例与容器几乎相同，100% 宽可直接覆盖 */
    .jkb-global-layer {
        width: 100%;
        height: 100%;
        left: 0;
        transform: none;
    }
    /* 中国叠加层：保持桌面坐标系（1121×563），整体缩放至移动端容器大小 */
    /* 缩放比例由以下分段断点按设备宽度提供 */
    .jkb-cn-layer {
        width: 1121px;
        height: 563px;
        top: 0;
        left: 0;
        transform-origin: top left;
        /* transform 由以下断点分段提供 */
    }
    /* 省份标签字号放大以补偿缩放（28 × 0.3345 ≈ 9.4px 实际渲染） */
    .jkb-cn-label {
        font-size: 28px;
    }
    /* H5：隐藏无文字标签的额外冗余节点，减少拥挤感；每省仅保留带标签的主标记 */
    .jkb-cn-pt:not(:has(.jkb-cn-label)) {
        display: none;
    }
}

/* ── 中国叠加层响应式缩放断点（360px–430px）──
 * scale = viewport_width / 1121
 */

/* ≤ 366px（代表 360px 设备，360/1121 ≈ 0.3211） */
@media (max-width: 366px) {
    .jkb-cn-layer { transform: scale(0.3211); }
}

/* 367px – 383px（代表 375px 设备，375/1121 ≈ 0.3345）—— 保持原有行为 */
@media (min-width: 367px) and (max-width: 383px) {
    .jkb-cn-layer { transform: scale(0.3345); }
}

/* 384px – 405px（代表 390px 设备，390/1121 ≈ 0.3479） */
@media (min-width: 384px) and (max-width: 405px) {
    .jkb-cn-layer { transform: scale(0.3479); }
}

/* 406px – 420px（代表 412px 设备，412/1121 ≈ 0.3675） */
@media (min-width: 406px) and (max-width: 420px) {
    .jkb-cn-layer { transform: scale(0.3675); }
}

/* 421px – 767px（代表 430px 及以上，430/1121 ≈ 0.3836） */
@media (min-width: 421px) and (max-width: 767px) {
    .jkb-cn-layer { transform: scale(0.3836); }
}

/* 全球地图雷达涟漪动效
 *
 * 涟漪原理：扩张 + 同步渐隐 = 水波感
 *   - 三环共用同一 keyframe，靠 animation-delay 错位形成连续涟漪
 *   - 每环周期 2.4s，错位 0.8s（= 周期 / 3）
 *   - scale: ease-out（快速扩出，末端减速，自然）
 *   - opacity: linear（匀速消退，不突变）
 *   - 最终 scale 1.5 → 环扩散到比容器更大，增强外扩感
 */
@keyframes jkb-ripple {
    0%   { transform: scale(0.1);  opacity: 0.9; }
    100% { transform: scale(1.5);  opacity: 0;   }
}
.jkb-global-layer {
    position: absolute;
    width: 1121px;
    max-width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
}
.jkb-mpt {
    position: absolute;
    width: 0;
    height: 0;
}
/* 三波同尺寸，靠时间错位形成涟漪层次 */
.jkb-mpt-ring {
    position: absolute;
    width: 64px; height: 64px;
    left: -32px; top: -32px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    opacity: 0;
    transform-origin: center;
    will-change: transform, opacity;
    animation-name: jkb-ripple;
    animation-duration: 2.4s;
    /* scale 用 ease-out，opacity 用 linear（双属性不同曲线） */
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}
.jkb-mpt-ring:nth-child(1) { animation-delay: var(--d, 0s); }
.jkb-mpt-ring:nth-child(2) { animation-delay: calc(var(--d, 0s) + 0.8s); }
.jkb-mpt-ring:nth-child(3) { animation-delay: calc(var(--d, 0s) + 1.6s); }

/* ── 中国地图叠加层：基础属性（PC + H5 共用）── */
.jkb-cn-layer {
    position: absolute;
    width: 1121px;
    top: 0;
    pointer-events: none;
    z-index: 2;
}
/* PC 专属：居中显示、全高；必须包裹在 min-width 内，
   否则此规则会在移动端层叠覆盖 H5 的 left:0 和 transform:scale() */
@media (min-width: 768px) {
    .jkb-cn-layer {
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
    }
}
/* 定位点：倒三角 ▽ 样式 */
.jkb-cn-pt {
    position: absolute;
    width: 0; height: 0;
}
.jkb-cn-pt::before {
    content: '';
    position: absolute;
    width: 0; height: 0;
    border-left:  5px solid transparent;
    border-right: 5px solid transparent;
    border-top:   9px solid #D8D0FF;
    left: -5px; top: -9px;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
/* 省份名称标签：显示在三角点右侧 */
.jkb-cn-label {
    position: absolute;
    left: 8px;
    top: -16px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.5);
}
/* 标签方向辅助类：在 span 上叠加使用，如 class="jkb-cn-label jkb-lbl-below" */
/* 默认间距变量：4px，可通过 style="--lbl-gap:Xpx" 覆盖任意值 */
.jkb-lbl-above,
.jkb-lbl-below,
.jkb-lbl-left,
.jkb-lbl-right  { --lbl-gap: 4px; }
.jkb-lbl-above  { top: auto; bottom: calc(100% + var(--lbl-gap)); left: 50%; transform: translateX(-50%); }
.jkb-lbl-below  { top: calc(100% + var(--lbl-gap)); left: 50%; transform: translateX(-50%); }
.jkb-lbl-left   { top: 50%; left: auto; right: calc(100% + var(--lbl-gap)); transform: translateY(-50%); }
.jkb-lbl-right  { top: 50%; left: calc(100% + var(--lbl-gap)); transform: translateY(-50%); }
/* 气泡动效：由小到大如吹泡泡，最终消失 */
@keyframes jkb-cn-bubble {
    0%   { transform: scale(0.05); opacity: 0;    }
    8%   { transform: scale(0.1);  opacity: 0.9;  }
    70%  { transform: scale(1);    opacity: 0.55; }
    88%  { transform: scale(1.06); opacity: 0.15; }
    100% { transform: scale(1.06); opacity: 0;    }
}
.jkb-cn-bubble {
    position: absolute;
    width: 44px; height: 44px;
    left: -22px; top: -22px;
    border-radius: 50%;
    /* 描边：蓝→紫渐变色用 outline+box-shadow 组合代替 border-image */
    border: 1.5px solid rgba(130, 190, 255, 0.85);
    box-shadow: inset 0 0 0 1px rgba(200, 160, 255, 0.4),
                0 0 6px rgba(120, 180, 255, 0.3);
    /* 内部填充：左上高光模拟球面反光 */
    background: radial-gradient(
        circle at 38% 32%,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(140, 195, 255, 0.15) 38%,
        rgba(100, 150, 255, 0.05) 65%,
        transparent 100%
    );
    opacity: 0;
    will-change: transform, opacity;
    animation: jkb-cn-bubble 3.2s ease-in-out infinite;
}
/* 北京：隐藏三角，气泡更大 */
.jkb-cn-pt--beijing::before {
    display: none;
}
.jkb-cn-pt--beijing .jkb-cn-bubble {
    width: 68px; height: 68px;
    left: -34px; top: -34px;
}

/* 第6屏 - CTA Section */
.product-cta {
    background: #FFFFFF;
    padding: 120px 24px;
}

.product-cta .product-cta-content {
    width: 1280px;
    max-width: 1280px;
    min-height: 310px;
    margin: 0 auto;
    background: linear-gradient(89.89deg, #6246E8 0%, #411CF5 100%);
    border-radius: 16px;
    box-sizing: border-box;
    padding: 56px 0 48px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.product-cta .product-cta-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            rgba(255,255,255,0.08) 0 1px,
            transparent 1px 36px,
            rgba(255,255,255,0.08) 36px 37px,
            transparent 37px 72px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.08) 0 1px,
            transparent 1px 36px,
            rgba(255,255,255,0.08) 36px 37px,
            transparent 37px 72px
        );
    pointer-events: none;
    border-radius: 16px;
}        @keyframes cta-gradient-shift {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}


.product-cta .product-cta-title {
    margin: 0;
    padding: 0 256px;
                /* 渐变光流文字 */
    background: linear-gradient(to right, #fff, #ede9fe, #c4b5fd, #a78bfa, #c4b5fd, #ede9fe, #fff);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: cta-gradient-shift 5s linear infinite alternate;
    text-align: center;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: var(--title-section);
    font-weight: 600;
    line-height: 56px;
    letter-spacing: 0;
    white-space: nowrap;
}

.product-cta .product-cta-buttons {
    width: 420px;
    height: 62px;
    margin: 36px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.product-cta .product-cta-buttons .product-btn-primary,
.product-cta .product-cta-buttons .product-btn-secondary {
    width: 200px;
    height: 62px;
    min-height: 62px;
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    box-shadow: none;
    border: none;
}

.product-cta .product-cta-buttons .product-btn-primary {
    background: #FFFFFF;
    color: #6246E8;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.product-cta .product-cta-buttons .product-btn-primary:hover,
.product-cta .product-cta-buttons .product-btn-primary:focus {
    opacity: 0.9;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.35);
}

.product-cta .product-cta-buttons .product-btn-secondary {
    background: #1E293B;
    color: #FFFFFF;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.product-cta .product-cta-buttons .product-btn-secondary:hover,
.product-cta .product-cta-buttons .product-btn-secondary:focus {
    opacity: 0.9;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.product-cta .product-cta-buttons .product-btn-primary svg,
.product-cta .product-cta-buttons .product-btn-secondary svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}
.product-cta .product-cta-buttons .product-btn-primary:hover svg,
.product-cta .product-cta-buttons .product-btn-primary:focus svg,
.product-cta .product-cta-buttons .product-btn-secondary:hover svg,
.product-cta .product-cta-buttons .product-btn-secondary:focus svg {
    transform: translateX(4px);
}

@media (max-width: 767px) {
    .product-cta {
        padding: 88px 20px;
    }

    .product-cta .product-cta-content {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 310px;
        padding: 64px 32px;
    }

    .product-cta .product-cta-title {
        padding: 0;
        font-size: 40px;
        line-height: 44px;
    }
}

@media (max-width: 767px) {
    .product-cta {
        padding: 64px 16px;
    }

    .product-cta .product-cta-content {
        min-height: 0;
        padding: 44px 20px;
    }

    .product-cta .product-cta-title {
        font-size: 28px;
        line-height: 34px;
    }

    .product-cta .product-cta-buttons {
        width: 100%;
        height: auto;
        margin-top: 28px;
        flex-direction: column;
        gap: 12px;
    }

    .product-cta .product-cta-buttons .product-btn-primary,
    .product-cta .product-cta-buttons .product-btn-secondary {
        width: 100%;
        max-width: 280px;
        height: 54px;
        min-height: 54px;
        font-size: 16px;
        line-height: 20px;
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-body,
    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-body-r {
        gap: 80px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-left,
    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-img {
        flex: 0 1 calc((100% - 80px) / 2);
        width: calc((100% - 80px) / 2);
    }

    body.jkb-page .product-detail-page.jkb-detail .product-cta .product-cta-content {
        width: 100%;
        max-width: 1280px;
    }
}

/* Migration normalization: tablet/mobile product-detail rhythm */
@media (max-width: 767px) {
    body.jkb-page .product-detail-page.jkb-detail {
        --jkb-page-gutter: var(--page-gutter, 24px);
    }

    body.jkb-page .product-detail-page.jkb-detail .product-hero {
        height: auto;
        min-height: 0;
        padding: 96px var(--jkb-page-gutter) 64px;
        align-items: stretch;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-hero-content {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 48px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-hero-title,
    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-title,
    body.jkb-page .product-detail-page.jkb-detail .product-features-title,
    body.jkb-page .product-detail-page.jkb-detail .jkb-coverage-title,
    body.jkb-page .product-detail-page.jkb-detail .product-cta-title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: 0;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-hero-description,
    body.jkb-page .product-detail-page.jkb-detail .product-features-description,
    body.jkb-page .product-detail-page.jkb-detail .product-feature-description,
    body.jkb-page .product-detail-page.jkb-detail .jkb-group-desc,
    body.jkb-page .product-detail-page.jkb-detail .jkb-acc-body p {
        font-size: 14px;
        line-height: 22px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-hero-image-wrapper {
        width: 100%;
        aspect-ratio: 600 / 335;
        border-radius: 8px;
        overflow: hidden;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-hero-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-section2 {
        padding: 0 var(--jkb-page-gutter) 64px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-inner {
        max-width: 720px;
        padding-top: 64px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-title {
        margin: 0 0 40px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-title + .jkb-section2-body {
        margin-top: 0;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-body,
    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-body-r {
        gap: 32px;
        margin-top: 48px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-group-title {
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 8px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-acc-title,
    body.jkb-page .product-detail-page.jkb-detail .product-feature-title {
        font-size: 18px;
        line-height: 26px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-img {
        width: 100%;
        height: 100%;
        aspect-ratio: 576 / 307;
        object-fit: cover;
        object-position: top;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-features {
        padding: 64px var(--jkb-page-gutter);
    }

    body.jkb-page .product-detail-page.jkb-detail .product-features .product-section-content {
        max-width: 100%;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-features-header {
        margin-bottom: 40px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-features-title {
        margin: 0 0 16px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-feature-card {
        padding: 24px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-coverage {
        margin-top: 0;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-coverage-title-bar {
        padding: 64px var(--jkb-page-gutter) 40px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-carousel-controls {
        padding: 0 var(--jkb-page-gutter) 64px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-cta {
        padding: 64px var(--jkb-page-gutter);
    }

    body.jkb-page .product-detail-page.jkb-detail .product-cta .product-cta-content {
        max-width: 720px;
        min-height: 0;
        padding: 64px 24px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-cta .product-cta-title {
        padding: 0;
        white-space: normal;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-cta .product-cta-buttons {
        width: min(420px, 100%);
        height: 54px;
        margin-top: 32px;
        flex-direction: row;
        gap: 12px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-cta .product-cta-buttons .product-btn-primary,
    body.jkb-page .product-detail-page.jkb-detail .product-cta .product-cta-buttons .product-btn-secondary {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        height: 54px;
        min-height: 54px;
        font-size: 16px;
        line-height: 20px;
    }
}

@media (max-width: 767px) {
    body.jkb-page .product-detail-page.jkb-detail {
        --jkb-page-gutter: var(--page-gutter, 16px);
    }

    body.jkb-page .product-detail-page.jkb-detail .product-hero {
        padding: 88px var(--jkb-page-gutter) 64px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-hero-grid {
        gap: 32px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-badge {
        margin-bottom: 16px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-hero-title,
    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-title,
    body.jkb-page .product-detail-page.jkb-detail .product-features-title,
    body.jkb-page .product-detail-page.jkb-detail .jkb-coverage-title,
    body.jkb-page .product-detail-page.jkb-detail .product-cta-title {
        font-size: 24px;
        line-height: 32px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-hero-description {
        font-size: 14px;
        line-height: 22px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-hero .product-btn-primary {
        width: 100%;
        max-width: 280px;
        height: 54px;
        min-width: 0;
        min-height: 54px;
        font-size: 16px;
        line-height: 20px;
        gap: 12px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-section2 {
        padding: 0 var(--jkb-page-gutter) 64px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-inner {
        padding-top: 64px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-title {
        margin-bottom: 32px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-body,
    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-body-r {
        gap: 24px;
        margin-top: 48px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-section2-body-r {
        flex-direction: column-reverse;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-group-title {
        font-size: 18px;
        line-height: 26px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-acc-header {
        min-height: 54px;
        height: auto;
        padding: 14px 0;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-acc-title,
    body.jkb-page .product-detail-page.jkb-detail .product-feature-title {
        font-size: 16px;
        line-height: 24px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-features {
        padding: 32px var(--jkb-page-gutter) 64px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-features-header {
        margin-bottom: 32px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-features-grid {
        gap: 16px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-feature-card {
        padding: 24px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-coverage-title-bar {
        padding: 32px var(--jkb-page-gutter) 32px;
    }

    body.jkb-page .product-detail-page.jkb-detail .jkb-carousel-controls {
        margin-top: 16px;
        padding: 0 var(--jkb-page-gutter) 64px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-cta {
        padding: 64px var(--jkb-page-gutter);
    }

    body.jkb-page .product-detail-page.jkb-detail .product-cta .product-cta-content {
        padding: 32px 16px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-cta .product-cta-buttons {
        width: 100%;
        height: 54px;
        margin-top: 32px;
    }

    body.jkb-page .product-detail-page.jkb-detail .product-cta .product-cta-buttons .product-btn-primary,
    body.jkb-page .product-detail-page.jkb-detail .product-cta .product-cta-buttons .product-btn-secondary {
        padding: 0 12px;
    }
}
