@charset "UTF-8";
/* ============================================================================
   简嘉净 · 蓝白口腔视觉体系  v1.2.0
   ----------------------------------------------------------------------------
   定位：牙科 / 口腔护理 —— 视觉要传达「洁净 · 透亮 · 可核对」
   品牌色取自官方 Logo：深釉蓝 #0E5C8A ＋ 釉质青 #78D2F0
   签名色：五通道光谱 405/520/580/620/660nm（仅用于技术图示，不参与 UI 主色）

   加载位置：includes/header.php 内 </head> 之前，即全站最后一张样式表，
             用于覆盖 assets/css/style.css 与 unified-styles.css。
   改动约定：只改本文件即可调整全站视觉基调，无需回头动上游两张表。
   ============================================================================ */

/* ============================================================================
   1. 设计令牌（Design Tokens）
   ============================================================================ */
:root {
    /* ---- 品牌主色阶：深釉蓝 → 净水蓝 ---- */
    --jjj-navy:        #0a4666;   /* 最深：深底、页脚 */
    --jjj-blue:        #0e5c8a;   /* 品牌主色（Logo 同源）*/
    --jjj-blue-mid:    #1273ae;   /* 主色梯度中段 */
    --jjj-blue-bright: #1687cc;   /* 交互主色：按钮 / 链接 / 强调 */
    --jjj-blue-light:  #2e9ee0;   /* 亮蓝：渐变收尾 */

    /* ---- 釉质青（辅助色，取自 Logo 拱形）---- */
    --jjj-cyan:        #45c2e8;
    --jjj-cyan-soft:   #78d2f0;
    --jjj-cyan-pale:   #cfeaf8;
    --jjj-cyan-tint:   #eaf6fd;

    /* ---- 中性：净白 / 浅釉雾 / 釉线 / 深墨蓝 ---- */
    --jjj-white:       #ffffff;
    --jjj-mist:        #f4fafd;   /* 页面底色（净白，带极轻蓝调）*/
    --jjj-mist-2:      #eef7fc;   /* 次级底 */
    --jjj-line:        #d8eaf4;   /* 描边 */
    --jjj-line-soft:   #e6f2f9;   /* 浅描边 / 表格分隔 */
    --jjj-ink:         #10344a;   /* 标题 / 正文主色 */
    --jjj-ink-2:       #4e6e82;   /* 说明文字 */
    --jjj-ink-3:       #8aa6b6;   /* 弱化文字 / 占位 */

    /* ---- 签名色：五通道光谱（照 Logo 色条取值）---- */
    --jjj-w405:        #4056d6;
    --jjj-w520:        #3cb478;
    --jjj-w580:        #f0c83c;
    --jjj-w620:        #f08232;
    --jjj-w660:        #d23c46;

    /* ---- 阴影：统一蓝调，替代中性黑 ---- */
    --jjj-sh-sm:       0 2px 8px rgba(14, 92, 138, .07);
    --jjj-sh:          0 6px 20px rgba(14, 92, 138, .10);
    --jjj-sh-lg:       0 18px 46px rgba(14, 92, 138, .14);
    --jjj-glow:        0 0 24px rgba(120, 210, 240, .38);
    --jjj-inset:       inset 0 1px 0 #ffffff;   /* 釉质高光 */
}

/* ---- 令牌回填：把上游变量重定向到新色板（含 .cb-page 作用域）---- */
:root,
.cb-page,
.footer {
    --color-primary:        #0e5c8a;
    --color-primary-hover:  #0a4666;
    --color-primary-light:  rgba(14, 92, 138, .06);
    --color-accent:         #1687cc;
    --color-accent-dark:    #0e5c8a;
    --color-accent-glow:    rgba(46, 158, 224, .14);

    --color-bg-primary:     #f4fafd;
    --color-bg-secondary:   #ffffff;
    --color-bg-tertiary:    #eef7fc;
    --color-bg-card:        #ffffff;
    --color-bg-card-hover:  #f2f9fd;

    --color-text-primary:   #10344a;
    --color-text-secondary: rgba(16, 52, 74, .74);
    --color-text-muted:     rgba(16, 52, 74, .52);
    --color-text:           #10344a;
    --color-text-light:     #4e6e82;

    --color-border-default: #d8eaf4;
    --color-border-light:   #cfe3ef;
    --color-border-accent:  rgba(22, 135, 204, .32);
    --color-border:         #d8eaf4;

    --text-primary:         #10344a;
    --primary:              #1687cc;
    --primary-color:        #1687cc;
    --primary-light:        #e6f5fd;
    --accent:               #1687cc;
    --line:                 #e6f2f9;
    --border-color:         #d8eaf4;
    --color-card:           #ffffff;
    --color-bg:             #f4fafd;
    --color-deliver-bg:     #f2fafe;
    --color-warning-bg:     #e8f5fc;

    --v2-primary:           #1687cc;
    --v2-primary-dark:      #0e5c8a;
    --v2-accent:            #2e9ee0;
    --v2-ink:               #10344a;
    --v2-bg:                #f4fafd;
    --v2-card:              #ffffff;
    --v2-line:              #d8eaf4;

    --shadow-sm:            0 2px 8px rgba(14, 92, 138, .07);
    --shadow-md:            0 6px 20px rgba(14, 92, 138, .10);
    --shadow-lg:            0 18px 46px rgba(14, 92, 138, .14);
    --shadow:               0 6px 20px rgba(14, 92, 138, .10);
    --shadow-card:          0 2px 8px rgba(14, 92, 138, .07);
    --shadow-hover:         0 18px 46px rgba(14, 92, 138, .14);
    --shadow-glow:          0 0 24px rgba(120, 210, 240, .38);
}

/* ============================================================================
   2. 口腔视觉元素库（Oral-care Motifs）
   —— 需要手工复用时，直接给元素加对应 class 即可
   ----------------------------------------------------------------------------
   .jjj-arch     牙釉拱线（呼应 Logo 双层拱形）
   .jjj-aperture 多光谱光圈（同心圆，呼应采集镜头）
   .jjj-grid     洁净网格
   .jjj-gloss    釉质高光（顶部 1px 亮线 + 蓝调柔影）
   .jjj-wave     五通道波长条
   ============================================================================ */

/* 牙釉拱线 */
.jjj-arch {
    position: relative;
}
.jjj-arch::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -170px;
    transform: translateX(-50%);
    width: min(1180px, 122vw);
    height: 280px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    border: 2px solid rgba(22, 135, 204, .18);
    border-bottom: none;
    box-shadow: inset 0 20px 60px rgba(120, 210, 240, .16);
    pointer-events: none;
}
.jjj-arch--inner::after {
    width: min(880px, 96vw);
    height: 210px;
    bottom: -124px;
    border-color: rgba(120, 210, 240, .30);
    box-shadow: inset 0 16px 46px rgba(120, 210, 240, .22);
}

/* 多光谱光圈 */
.jjj-aperture {
    background-image:
        radial-gradient(circle at 50% 50%, rgba(120, 210, 240, .26) 0 62px, transparent 63px),
        radial-gradient(circle at 50% 50%, rgba(46, 158, 224, .16) 0 118px, transparent 119px),
        radial-gradient(circle at 50% 50%, rgba(120, 210, 240, .10) 0 178px, transparent 179px);
    background-repeat: no-repeat;
    background-position: center;
}

/* 洁净网格 */
.jjj-grid {
    background-image:
        linear-gradient(rgba(14, 92, 138, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 92, 138, .05) 1px, transparent 1px);
    background-size: 44px 44px, 44px 44px;
}

/* 釉质高光卡片底 */
.jjj-gloss {
    box-shadow: var(--jjj-sh-sm), var(--jjj-inset);
}

/* 五通道波长条 */
.jjj-wave {
    display: flex;
    gap: 4px;
    height: 6px;
    border-radius: 6px;
    overflow: hidden;
}
.jjj-wave i {
    flex: 1;
    display: block;
    border-radius: 2px;
}
.jjj-wave i:nth-child(1) { background: var(--jjj-w405); }
.jjj-wave i:nth-child(2) { background: var(--jjj-w520); }
.jjj-wave i:nth-child(3) { background: var(--jjj-w580); }
.jjj-wave i:nth-child(4) { background: var(--jjj-w620); }
.jjj-wave i:nth-child(5) { background: var(--jjj-w660); }


/* ============================================================================
   3. 首屏：由「深靛蓝大底」改为「洁净蓝白」
   ============================================================================ */
.cb-page .cb-home-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 540px at 84% 4%,  rgba(120, 210, 240, .40) 0%, rgba(120, 210, 240, 0) 62%),
        radial-gradient(880px 480px at 4% 100%,  rgba(46, 158, 224, .20) 0%, rgba(46, 158, 224, 0) 66%),
        linear-gradient(168deg, #ffffff 0%, #f2fafd 46%, #e2f2fb 100%);
    color: var(--jjj-ink);
    border-bottom: 1px solid var(--jjj-line);
}

/* 洁净网格 + 多光谱光圈（叠加层） */
.cb-page .cb-home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 85% 22%, rgba(120, 210, 240, .34) 0 92px, transparent 93px),
        radial-gradient(circle at 85% 22%, rgba(46, 158, 224, .20) 0 156px, transparent 157px),
        radial-gradient(circle at 85% 22%, rgba(120, 210, 240, .13) 0 232px, transparent 233px),
        linear-gradient(rgba(14, 92, 138, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 92, 138, .05) 1px, transparent 1px);
    background-size: auto, auto, auto, 44px 44px, 44px 44px;
    background-position: center, center, center, left top, left top;
    -webkit-mask-image: radial-gradient(130% 100% at 62% 26%, #000 26%, transparent 82%);
    mask-image: radial-gradient(130% 100% at 62% 26%, #000 26%, transparent 82%);
}

/* 牙釉双层拱线（底部） */
.cb-page .cb-home-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -186px;
    transform: translateX(-50%);
    width: min(1180px, 124vw);
    height: 280px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    border: 2px solid rgba(22, 135, 204, .16);
    border-bottom: none;
    box-shadow:
        inset 0 20px 60px rgba(120, 210, 240, .18),
        0 -2px 0   rgba(255, 255, 255, .8);
    pointer-events: none;
}

.cb-page .cb-home-hero > .cb-home-wrap {
    position: relative;
    z-index: 2;
}

/* 首屏文字与元件（浅底配色） */
.cb-page .cb-home-hero h1 {
    color: var(--jjj-blue);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.cb-page .cb-h1-sub,
.cb-page .cb-home-hero .cb-h1-sub {
    color: var(--jjj-blue-mid);
}
.cb-page .cb-home-badge {
    background: rgba(255, 255, 255, .88);
    color: var(--jjj-blue);
    border: 1px solid rgba(22, 135, 204, .26);
    box-shadow: var(--jjj-sh-sm);
    font-weight: 600;
}
.cb-page .cb-hero-pain li {
    color: var(--jjj-ink-2);
}
.cb-page .cb-hero-pain li::before {
    background: linear-gradient(135deg, var(--jjj-cyan) 0%, var(--jjj-blue-bright) 100%);
    box-shadow: 0 0 0 3px rgba(69, 194, 232, .16);
}
.cb-page .cb-home-hero-sub {
    color: var(--jjj-ink-2);
}
.cb-page .cb-home-hero-sub strong,
.cb-page .cb-home-hero-sub b {
    color: var(--jjj-blue);
    font-weight: 700;
}
.cb-page .cb-home-value {
    color: var(--jjj-blue);
}
.cb-page .cb-home-note,
.cb-page .cb-home-hero .cb-home-note {
    color: var(--jjj-ink-3);
}

/* 首屏右栏「技术底座」卡：改为白色釉质卡 */
.cb-page .cb-home-map-card {
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(22, 135, 204, .18);
    box-shadow: 0 20px 52px rgba(14, 92, 138, .14), var(--jjj-inset);
}
.cb-page .cb-home-map-origin {
    color: var(--jjj-blue-mid);
}
.cb-page .cb-home-map-head {
    border-bottom: 1px solid rgba(14, 92, 138, .12);
}
.cb-page .cb-home-map-title {
    color: var(--jjj-ink);
}
.cb-page .cb-home-map-sub {
    color: var(--jjj-ink-3);
}
.cb-page .cb-home-map-row {
    background: var(--jjj-mist);
    border: 1px solid rgba(14, 92, 138, .10);
}
.cb-page .cb-home-map-name {
    color: var(--jjj-ink-2);
}
.cb-page .cb-home-map-cnt {
    color: var(--jjj-blue-mid);
    font-weight: 700;
}
.cb-page .cb-home-map-row.is-key {
    background: linear-gradient(135deg, rgba(120, 210, 240, .34) 0%, rgba(46, 158, 224, .18) 100%);
    border-color: rgba(22, 135, 204, .34);
}
.cb-page .cb-home-map-row.is-key .cb-home-map-cnt {
    color: var(--jjj-blue);
}
.cb-page .cb-home-map-foot {
    border-top: 1px solid rgba(14, 92, 138, .12);
}
.cb-page .cb-home-map-fig {
    color: var(--jjj-ink-3);
}
.cb-page .cb-home-map-fig b {
    color: var(--jjj-blue);
}

/* 首屏快捷条 */
.cb-page .cb-home-quick {
    border-top: 1px solid rgba(14, 92, 138, .12);
}
.cb-page .cb-home-quick-label {
    color: var(--jjj-ink-3);
}
.cb-page .cb-home-quick-chip {
    background: #ffffff;
    border: 1px solid rgba(22, 135, 204, .24);
    color: var(--jjj-blue);
    box-shadow: var(--jjj-sh-sm);
}
.cb-page .cb-home-quick-chip:hover {
    background: var(--jjj-cyan-tint);
    border-color: var(--jjj-blue-bright);
    color: var(--jjj-blue);
}


/* ============================================================================
   4. 按钮体系
   ============================================================================ */
.cb-page .cb-btn--primary {
    background: linear-gradient(135deg, var(--jjj-blue) 0%, var(--jjj-blue-bright) 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(14, 92, 138, .26);
}
.cb-page .cb-btn--primary:hover {
    box-shadow: 0 14px 32px rgba(14, 92, 138, .34);
}
/* 浅底描边按钮 */
.cb-page .cb-btn--line {
    background: #fff;
    border: 1px solid rgba(22, 135, 204, .30);
    color: var(--jjj-blue);
}
.cb-page .cb-btn--line:hover {
    background: var(--jjj-cyan-tint);
    border-color: var(--jjj-blue-bright);
}
/* 深底白字描边按钮 */
.cb-page .cb-btn--ghost {
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
}
.cb-page .cb-home-hero .cb-btn--ghost {
    background: #fff;
    border: 1px solid rgba(14, 92, 138, .28);
    color: var(--jjj-blue);
    box-shadow: var(--jjj-sh-sm);
}
.cb-page .cb-home-hero .cb-btn--ghost:hover {
    background: var(--jjj-cyan-tint);
    border-color: var(--jjj-blue-bright);
}

/* 顶部导航「联系我们」按钮 */
.header .nav-lead-btn,
.nav-lead-btn {
    background: linear-gradient(135deg, var(--jjj-blue) 0%, var(--jjj-blue-bright) 100%) !important;
    box-shadow: 0 6px 16px rgba(14, 92, 138, .26);
}


/* ============================================================================
   5. 区块通用件：标签 / 标题 / 卡片
   ============================================================================ */
.cb-page .cb-home-tag {
    background: linear-gradient(135deg, var(--jjj-blue) 0%, var(--jjj-blue-bright) 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(14, 92, 138, .22), var(--jjj-inset);
}
.cb-page .cb-home-title {
    color: var(--jjj-ink);
}
.cb-page .cb-home-subtitle {
    color: var(--jjj-ink-2);
}
.cb-page .cb-home-section {
    border-top: 1px solid var(--jjj-line-soft);
}

/* 部件卡 / 图层卡：统一釉质高光 */
.cb-page .cb-coop-card,
.cb-page .cb-layer-row,
.cb-page .cb-line-card {
    border: 1px solid var(--jjj-line);
    box-shadow: var(--jjj-sh-sm), var(--jjj-inset);
}
.cb-page .cb-coop-card:hover {
    border-color: rgba(22, 135, 204, .32);
    box-shadow: var(--jjj-sh), var(--jjj-inset);
}
.cb-page .cb-coop-no {
    background: linear-gradient(135deg, var(--jjj-blue) 0%, var(--jjj-blue-bright) 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(14, 92, 138, .24);
}
.cb-page .cb-coop-tag {
    background: var(--jjj-cyan-tint);
    color: var(--jjj-blue-mid);
    border: 1px solid rgba(22, 135, 204, .18);
}


/* ============================================================================
   6. 五通道光谱 —— 缺失样式补全（原本为无样式纯文本）
   ============================================================================ */
.cb-page .cb-spectrum-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 40px;
}
.cb-page .cb-spectrum-item {
    position: relative;
    overflow: hidden;
    padding: 26px 18px 22px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--jjj-line);
    border-radius: 14px;
    box-shadow: var(--jjj-sh-sm), var(--jjj-inset);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* 顶部波长条（本条通道的真实光谱色）*/
.cb-page .cb-spectrum-item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--jt, var(--jjj-blue-bright));
}
/* 釉质高光 */
.cb-page .cb-spectrum-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(130% 68% at 50% 0%, rgba(120, 210, 240, .20) 0%, transparent 62%);
}
.cb-page .cb-spectrum-item:nth-child(1) { --jt: var(--jjj-w405); }
.cb-page .cb-spectrum-item:nth-child(2) { --jt: var(--jjj-w520); }
.cb-page .cb-spectrum-item:nth-child(3) { --jt: var(--jjj-w580); }
.cb-page .cb-spectrum-item:nth-child(4) { --jt: var(--jjj-w620); }
.cb-page .cb-spectrum-item:nth-child(5) { --jt: var(--jjj-w660); }
.cb-page .cb-spectrum-item:hover {
    transform: translateY(-4px);
    border-color: rgba(22, 135, 204, .30);
    box-shadow: var(--jjj-sh-lg), var(--jjj-inset);
}
.cb-page .cb-spectrum-nm {
    position: relative;
    display: block;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1.1;
    color: var(--jt, var(--jjj-blue));
    font-variant-numeric: tabular-nums;
}
.cb-page .cb-spectrum-name {
    position: relative;
    display: block;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--jjj-ink);
}
.cb-page .cb-spectrum-use {
    position: relative;
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--jjj-ink-2);
}


/* ============================================================================
   7. 代差对比表 —— 缺失样式补全
   ============================================================================ */
.cb-page .cb-compare-wrap {
    margin-top: 36px;
    background: #fff;
    border: 1px solid var(--jjj-line);
    border-radius: 16px;
    box-shadow: var(--jjj-sh);
    overflow: auto;
}
.cb-page .cb-compare-table {
    width: 100%;
    min-width: 660px;
    border-collapse: collapse;
    font-size: 15px;
}
.cb-page .cb-compare-table thead th {
    padding: 16px 22px;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: var(--jjj-ink);
    background: var(--jjj-mist);
    border-bottom: 1px solid var(--jjj-line);
    white-space: nowrap;
}
.cb-page .cb-compare-table thead th.is-new {
    background: linear-gradient(135deg, var(--jjj-blue) 0%, var(--jjj-blue-bright) 100%);
    color: #fff;
}
.cb-page .cb-compare-table tbody td {
    padding: 15px 22px;
    vertical-align: top;
    line-height: 1.7;
    color: var(--jjj-ink-2);
    border-bottom: 1px solid var(--jjj-line-soft);
}
.cb-page .cb-compare-table tbody tr:last-child td {
    border-bottom: none;
}
.cb-page .cb-compare-dim {
    font-weight: 700;
    color: var(--jjj-ink);
    white-space: nowrap;
    background: var(--jjj-mist);
}
.cb-page .cb-compare-table td.is-new {
    background: rgba(120, 210, 240, .10);
    color: var(--jjj-blue);
    font-weight: 600;
}
.cb-page .cb-compare-table tbody tr:hover td {
    background: #f8fcfe;
}
.cb-page .cb-compare-table tbody tr:hover td.is-new {
    background: rgba(120, 210, 240, .20);
}


/* ============================================================================
   8. 专利数据卡 —— 缺失样式补全
   ============================================================================ */
.cb-page .cb-patents-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 38px;
}
.cb-page .cb-patent-stat {
    position: relative;
    overflow: hidden;
    padding: 28px 22px 24px;
    background: #fff;
    border: 1px solid var(--jjj-line);
    border-radius: 16px;
    box-shadow: var(--jjj-sh-sm), var(--jjj-inset);
    transition: transform .2s ease, box-shadow .2s ease;
}
/* 顶部牙釉拱形（半弧高光）*/
.cb-page .cb-patent-stat::before {
    content: "";
    position: absolute;
    left: -34%; right: -34%; top: -76px;
    height: 130px;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    background: linear-gradient(180deg, rgba(120, 210, 240, .30) 0%, rgba(120, 210, 240, 0) 100%);
    pointer-events: none;
}
.cb-page .cb-patent-stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--jjj-sh-lg), var(--jjj-inset);
}
.cb-page .cb-patent-num {
    position: relative;
    display: block;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: var(--jjj-blue);
    font-variant-numeric: tabular-nums;
}
.cb-page .cb-patent-label {
    position: relative;
    display: block;
    margin-top: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--jjj-ink);
}
.cb-page .cb-patent-sub {
    position: relative;
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--jjj-ink-2);
}


/* ============================================================================
   9. 研发节奏时间轴 —— 缺失样式补全
   ============================================================================ */
.cb-page .cb-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 38px;
}
/* 步骤连接线（落在卡片间隙里）*/
.cb-page .cb-steps::before {
    content: "";
    position: absolute;
    left: 4%; right: 4%;
    top: 30px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        rgba(22, 135, 204, .04) 0%,
        rgba(22, 135, 204, .34) 50%,
        rgba(22, 135, 204, .04) 100%);
}
.cb-page .cb-step {
    position: relative;
    padding: 24px 20px 22px;
    background: #fff;
    border: 1px solid var(--jjj-line);
    border-radius: 16px;
    box-shadow: var(--jjj-sh-sm), var(--jjj-inset);
    transition: transform .2s ease, box-shadow .2s ease;
}
.cb-page .cb-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--jjj-sh-lg), var(--jjj-inset);
}
.cb-page .cb-step-no {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: 14px;
    padding: 7px 15px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--jjj-blue) 0%, var(--jjj-blue-bright) 100%);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 18px rgba(14, 92, 138, .26), var(--jjj-inset);
}
.cb-page .cb-step-no small {
    font-size: 12px;
    font-weight: 600;
    opacity: .9;
}
.cb-page .cb-step h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--jjj-ink);
}
.cb-page .cb-step p {
    margin: 0;
    font-size: 14px;
    line-height: 1.72;
    color: var(--jjj-ink-2);
}


/* ============================================================================
   10. FAQ / 融资 CTA 带 / 页脚
   ============================================================================ */
/* FAQ：由「一条分割线」升级为釉质卡（+ 号做成品牌色圆形按钮） */
.cb-page .cb-faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 860px;
}
.cb-page .cb-faq-item {
    border: 1px solid var(--jjj-line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--jjj-sh-sm), var(--jjj-inset);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.cb-page .cb-faq-item:hover {
    border-color: rgba(22, 135, 204, .30);
}
.cb-page .cb-faq-item.is-open {
    border-color: rgba(22, 135, 204, .34);
    background: linear-gradient(180deg, #ffffff 0%, #f4fbfe 100%);
    box-shadow: var(--jjj-sh), var(--jjj-inset);
}
.cb-page .cb-faq-q {
    gap: 16px;
    padding: 18px 22px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--jjj-ink);
}
.cb-page .cb-faq-ico {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--jjj-cyan-tint);
    color: var(--jjj-blue-bright);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}
.cb-page .cb-faq-item.is-open .cb-faq-ico {
    background: linear-gradient(135deg, var(--jjj-blue) 0%, var(--jjj-blue-bright) 100%);
    color: #fff;
    box-shadow: 0 4px 10px rgba(14, 92, 138, .26);
}
.cb-page .cb-faq-a {
    padding: 0 22px 20px;
    font-size: 15px;
    line-height: 1.85;
    color: var(--jjj-ink-2);
}

/* 融资 CTA：品牌深蓝带 + 光圈 + 拱线 */
.cb-page .cb-home-contact {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 420px at 88% 8%, rgba(120, 210, 240, .26) 0%, rgba(120, 210, 240, 0) 62%),
        linear-gradient(135deg, var(--jjj-navy) 0%, var(--jjj-blue) 58%, var(--jjj-blue-mid) 100%);
    border-top: none;
}
.cb-page .cb-home-contact::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 88% 12%, rgba(120, 210, 240, .30) 0 84px, transparent 85px),
        radial-gradient(circle at 88% 12%, rgba(120, 210, 240, .16) 0 148px, transparent 149px),
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: auto, auto, 46px 46px, 46px 46px;
}
.cb-page .cb-home-contact::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -190px;
    transform: translateX(-50%);
    width: min(1180px, 124vw);
    height: 280px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    border: 2px solid rgba(120, 210, 240, .26);
    border-bottom: none;
    pointer-events: none;
}
.cb-page .cb-home-contact > .cb-home-wrap {
    position: relative;
    z-index: 2;
}
.cb-page .cb-home-contact .cb-contact-cta-left p,
.cb-page .cb-home-contact .cb-contact-cta-right p {
    color: rgba(255, 255, 255, .86);
}
.cb-page .cb-home-contact .cb-contact-cta-right b {
    color: #fff;
}
.cb-page .cb-home-contact .cb-contact-hint {
    color: rgba(255, 255, 255, .62);
}
.cb-page .cb-home-contact .cb-btn--primary {
    background: #fff;
    color: var(--jjj-blue);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.cb-page .cb-home-contact .cb-btn--line {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
}
.cb-page .cb-home-contact .cb-btn--line:hover {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
}

/* 页脚：由中性深灰蓝改为品牌深蓝 */
.footer {
    background: linear-gradient(180deg, var(--jjj-navy) 0%, #083449 100%);
    border-top: 1px solid rgba(120, 210, 240, .14);
}
.footer-block-title::after {
    background: linear-gradient(90deg, var(--jjj-cyan) 0%, var(--jjj-cyan-soft) 100%);
}
.footer-consult-btn {
    background: linear-gradient(135deg, var(--jjj-blue-bright) 0%, var(--jjj-cyan) 100%);
    box-shadow: 0 4px 14px rgba(22, 135, 204, .38);
}
.footer-consult-btn:hover {
    box-shadow: 0 6px 18px rgba(22, 135, 204, .5);
}
.footer-contact-list li svg {
    color: var(--jjj-cyan-soft);
}
.footer-copyright a:hover {
    color: var(--jjj-cyan-soft);
}
.footer-block-title {
    color: #fff;
}


/* ============================================================================
   11. 响应式
   ============================================================================ */
@media (max-width: 992px) {
    .cb-page .cb-spectrum-grid { grid-template-columns: repeat(3, 1fr); }
    .cb-page .cb-patents-stats  { grid-template-columns: repeat(2, 1fr); }
    .cb-page .cb-steps          { grid-template-columns: repeat(2, 1fr); }
    .cb-page .cb-steps::before  { display: none; }
}
@media (max-width: 600px) {
    .cb-page .cb-spectrum-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .cb-page .cb-spectrum-item { padding: 20px 14px 18px; }
    .cb-page .cb-spectrum-nm   { font-size: 19px; }
    .cb-page .cb-patents-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .cb-page .cb-patent-stat   { padding: 22px 16px 20px; }
    .cb-page .cb-patent-num    { font-size: 32px; }
    .cb-page .cb-steps         { grid-template-columns: 1fr; }
    .cb-page .cb-home-hero::after { height: 200px; bottom: -140px; }
}


/* ============================================================================
   12. 二级页页头（.cb-sub-hero）
   —— 上游三张样式表里都没有这个类：导致 technology / compare / patents /
      financing / faq 五页的 H1 直接被 64px 固定导航压住。
      这里补齐「导航避让 + 洁净蓝白页头」。
   ============================================================================ */
.cb-page .cb-sub-hero {
    position: relative;
    overflow: hidden;
    padding: 132px 0 64px;          /* 64px 固定导航 + 呼吸留白 */
    text-align: center;
    background:
        radial-gradient(780px 330px at 88% 2%, rgba(120, 210, 240, .30) 0%, rgba(120, 210, 240, 0) 64%),
        linear-gradient(170deg, #ffffff 0%, #f4fafd 52%, #e8f5fc 100%);
    border-bottom: 1px solid var(--jjj-line);
}
.cb-page .cb-sub-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 88% 6%, rgba(120, 210, 240, .28) 0 74px, transparent 75px),
        radial-gradient(circle at 88% 6%, rgba(46, 158, 224, .16) 0 132px, transparent 133px),
        linear-gradient(rgba(14, 92, 138, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 92, 138, .045) 1px, transparent 1px);
    background-size: auto, auto, 44px 44px, 44px 44px;
    -webkit-mask-image: radial-gradient(125% 100% at 50% 0%, #000 22%, transparent 82%);
    mask-image: radial-gradient(125% 100% at 50% 0%, #000 22%, transparent 82%);
}
.cb-page .cb-sub-hero > .cb-home-wrap {
    position: relative;
    z-index: 2;
}
.cb-page .cb-sub-hero h1 {
    margin: 14px 0 0;
    font-size: 40px;
    line-height: 1.28;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--jjj-blue);
}
.cb-page .cb-sub-hero .cb-home-subtitle {
    margin: 14px auto 0;
    max-width: 760px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--jjj-ink-2);
}

@media (max-width: 768px) {
    .cb-page .cb-sub-hero { padding: 104px 0 44px; }
    .cb-page .cb-sub-hero h1 { font-size: 28px; letter-spacing: 0; }
    .cb-page .cb-sub-hero .cb-home-subtitle { font-size: 15px; }
}