/* =========================================================
   多途网络 · 服务器产品页科技感美化层（server-enhance.css）
   适用页面：lists_product_server.htm  /  lists_product_server2.htm
   说明：
   - 通过限定 .section-zuyong1 ~ .section-zuyong4 / .srv-* 前缀类，作用域绝对不溢出到其它页面
   - 颜色体系：#2981ff 蓝 / #22d3ee 青 / #0f172a 深蓝
   - 兼容原 zuyong.css / zuyong_new.css / main.css
   ========================================================= */

:root {
    --srv-primary: #2981ff;
    --srv-cyan: #22d3ee;
    --srv-deep: #0f172a;
    --srv-grad: linear-gradient(135deg, #2981ff 0%, #22d3ee 100%);
    --srv-grad-dark: linear-gradient(135deg, #1e3a8a 0%, #2981ff 60%, #22d3ee 100%);
    --srv-shadow-soft: 0 10px 30px -12px rgba(41, 129, 255, .18), 0 4px 14px -6px rgba(15, 32, 68, .08);
    --srv-shadow-strong: 0 22px 50px -18px rgba(41, 129, 255, .45), 0 6px 18px -6px rgba(15, 32, 68, .18);
    --srv-radius: 16px;
}

/* =========================================================
   1. Banner 区文字精致设计（与 SCDN 同风格 · 实蓝白圈描边）
   注意：所有 .srv-* 文字样式必须用 !important 强制覆盖
        pubmain.css :48 `.banner-info span{font-size:16px}` 的全局压制
   ========================================================= */

/* 给 banner-ani 加上下安全内边距，避免被透明 header 遮挡 */
.banner-single .banner-ani,
#banner .banner-ani {
    padding-top: 70px !important;
    padding-bottom: 24px !important;
    box-sizing: border-box;
    align-items: center !important;
}

/* 兜底：把原 h2 的 font-size:38px / line-height:1 / color 全部清空，让子 span 自由排版 */
.banner-single .banner-info h2,
#banner .banner-info h2 {
    margin: 0 0 14px 0 !important;
    line-height: 1 !important;
    background: none !important;
    color: inherit !important;
    text-shadow: none !important;
    -webkit-text-fill-color: initial !important;
    font-weight: normal !important;
    font-size: inherit !important;
    padding: 0 !important;
}

.banner-single .banner-info .srv-banner-tag,
#banner .banner-info .srv-banner-tag {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 14px !important;
    margin: 0 0 12px 0 !important;
    background: rgba(255, 255, 255, .65) !important;
    border: 1px solid rgba(41, 129, 255, .35) !important;
    border-radius: 22px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #1d4ed8 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    box-shadow: 0 6px 18px -8px rgba(41, 129, 255, .4) !important;
    line-height: 1.4 !important;
    animation: srv-fadeInDown .8s ease both;
    width: auto !important;
    max-width: none !important;
}
.banner-single .banner-info .srv-banner-tag::before,
#banner .banner-info .srv-banner-tag::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #2981ff;
    box-shadow: 0 0 10px #2981ff, 0 0 20px rgba(41, 129, 255, .5);
    animation: srv-blink 1.6s ease-in-out infinite;
}
@keyframes srv-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.75); }
}
@keyframes srv-fadeInDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.banner-single .banner-info .srv-h2-main,
#banner .banner-info .srv-h2-main {
    display: block !important;
    font-size: 48px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 1.2px !important;
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, .95),
         1px -1px 0 rgba(255, 255, 255, .95),
        -1px  1px 0 rgba(255, 255, 255, .95),
         1px  1px 0 rgba(255, 255, 255, .95),
         0  4px 14px rgba(30, 64, 175, .38),
         0  8px 24px rgba(30, 64, 175, .2) !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    animation: srv-fadeUpBig 1s .15s ease both;
}

.banner-single .banner-info .srv-h2-sub,
#banner .banner-info .srv-h2-sub {
    position: relative;
    display: inline-block !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #0f2350 !important;
    -webkit-text-fill-color: #0f2350 !important;
    background: none !important;
    padding: 0 3px 3px !important;
    letter-spacing: .8px !important;
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, .85),
         1px -1px 0 rgba(255, 255, 255, .85),
        -1px  1px 0 rgba(255, 255, 255, .85),
         1px  1px 0 rgba(255, 255, 255, .85),
         0  2px 8px rgba(15, 32, 68, .22) !important;
    animation: srv-fadeUpBig 1s .3s ease both;
    z-index: 1;
    margin: 0 !important;
}
.banner-single .banner-info .srv-h2-sub::before,
#banner .banner-info .srv-h2-sub::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 1px;
    height: 7px;
    background: linear-gradient(90deg, rgba(41, 129, 255, .42) 0%, rgba(34, 211, 238, .28) 60%, transparent 100%);
    border-radius: 2px;
    z-index: -1;
    transform-origin: left;
    animation: srv-highlight 1s .6s cubic-bezier(.3, .8, .3, 1) both;
}
@keyframes srv-fadeUpBig {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes srv-highlight {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* 4 个关键技术胶囊（精简版） */
.banner-single .banner-info .srv-feature-tags,
#banner .banner-info .srv-feature-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    animation: srv-fadeUpBig 1s .42s ease both;
}
.banner-single .banner-info .srv-feature-tags li,
#banner .banner-info .srv-feature-tags li {
    display: inline-flex !important;
    align-items: center;
    gap: 5px !important;
    padding: 4px 12px !important;
    background: rgba(255, 255, 255, .85) !important;
    border: 1px solid rgba(41, 129, 255, .25) !important;
    border-radius: 18px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1d4ed8 !important;
    letter-spacing: .3px !important;
    box-shadow: 0 4px 12px -6px rgba(41, 129, 255, .25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all .25s ease;
    cursor: default;
    list-style: none !important;
    width: auto !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}
.banner-single .banner-info .srv-feature-tags li::before,
#banner .banner-info .srv-feature-tags li::before {
    content: "";
    flex: 0 0 5px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2981ff, #22d3ee);
    box-shadow: 0 0 6px rgba(41, 129, 255, .6);
}
.banner-single .banner-info .srv-feature-tags li:hover,
#banner .banner-info .srv-feature-tags li:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(41, 129, 255, .55) !important;
    box-shadow: 0 10px 22px -8px rgba(41, 129, 255, .45);
    color: #1e3a8a !important;
}

/* Banner 描述 + CTA 按钮（精简版） */
.banner-single .banner-info p {
    color: #1f2c44 !important;
    font-weight: 500;
    font-size: 13px !important;
    line-height: 22px !important;
    margin: 14px 0 16px !important;
    text-shadow: 0 1px 6px rgba(255, 255, 255, .9), 0 0 14px rgba(255, 255, 255, .55);
    animation: srv-fadeUpBig 1s .55s ease both;
    /* 限制描述段最多 2 行，避免超出 banner */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.banner-single .banner-info .n-btn-default.active {
    background: var(--srv-grad) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .3) !important;
    border-radius: 24px !important;
    padding: 0 26px !important;
    height: 42px !important;
    line-height: 42px !important;
    font-weight: 600;
    font-size: 14px !important;
    letter-spacing: 1px;
    box-shadow: 0 12px 26px -8px rgba(41, 129, 255, .55);
    transition: all .35s cubic-bezier(.2, .7, .2, 1);
    animation: srv-fadeUpBig 1s .7s ease both;
    position: relative;
    overflow: hidden;
}
.banner-single .banner-info .n-btn-default.active::after {
    content: "→";
    margin-left: 10px;
    display: inline-block;
    transition: transform .35s ease;
}
.banner-single .banner-info .n-btn-default.active:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -10px rgba(41, 129, 255, .7), 0 0 32px rgba(34, 211, 238, .4);
    background: linear-gradient(135deg, #3a8eff 0%, #2dddee 100%) !important;
}
.banner-single .banner-info .n-btn-default.active:hover::after { transform: translateX(6px); }

/* =========================================================
   2. 锚点导航 .skip-box（仅 server 页面生效，限定父级）
   ========================================================= */
body:has(#section-zuyong1) .skip-box {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(16px) saturate(170%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    box-shadow: 0 8px 28px -14px rgba(15, 32, 68, .2);
    border-bottom: 1px solid rgba(41, 129, 255, .12);
    position: sticky;
    top: 0;
    z-index: 100;
}
body:has(#section-zuyong1) .skip-box .menu-tab {
    display: flex !important;
    justify-content: center !important;
    gap: 8px;
    padding: 0 !important;
    margin: 0 auto !important;
}
body:has(#section-zuyong1) .skip-box .menu-tab li {
    width: auto !important;
    padding: 0 !important;
    list-style: none;
    flex: 0 0 auto !important;
    height: auto !important;
}
body:has(#section-zuyong1) .skip-box .menu-tab li a {
    display: block;
    padding: 18px 28px !important;
    font-size: 15px !important;
    font-weight: 600;
    color: #475467 !important;
    border-bottom: 3px solid transparent;
    position: relative;
    transition: all .3s ease;
    letter-spacing: .5px;
    line-height: 1.4 !important;
    height: auto !important;
}
body:has(#section-zuyong1) .skip-box .menu-tab li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 0;
    height: 3px;
    background: var(--srv-grad);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(41, 129, 255, .45);
    transition: all .35s cubic-bezier(.2, .7, .2, 1);
    transform: translateX(-50%);
}
body:has(#section-zuyong1) .skip-box .menu-tab li:hover a,
body:has(#section-zuyong1) .skip-box .menu-tab li.on a,
body:has(#section-zuyong1) .skip-box .menu-tab li.swiper-slide-active a {
    color: #2981ff !important;
}
body:has(#section-zuyong1) .skip-box .menu-tab li:hover a::after,
body:has(#section-zuyong1) .skip-box .menu-tab li.on a::after,
body:has(#section-zuyong1) .skip-box .menu-tab li.swiper-slide-active a::after {
    width: 32px;
}

/* =========================================================
   3. Section 标题统一升级
   ========================================================= */
[id^="section-zuyong"] .section-header,
[id^="section-zuyong"] .section-title {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}
[id^="section-zuyong"] .section-header h3,
[id^="section-zuyong"] .section-title h3 {
    display: inline-block;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #0f172a !important;
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
[id^="section-zuyong"] .section-header h3::after,
[id^="section-zuyong"] .section-title h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56px;
    height: 4px;
    background: var(--srv-grad);
    border-radius: 4px;
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(41, 129, 255, .35);
}
[id^="section-zuyong"] .section-header p,
[id^="section-zuyong"] .section-title .desc {
    color: #475467 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-top: 10px;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   4. 产品推荐 #section-zuyong1 · 表格 + tab 美化
   ========================================================= */
.section-zuyong1.bg-gray {
    background: linear-gradient(180deg, #f7f9fc 0%, #eef3fa 100%) !important;
    position: relative;
    overflow: hidden;
    padding: 70px 0 60px !important;
}
.section-zuyong1.bg-gray::before {
    content: "";
    position: absolute;
    top: -120px; right: -120px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(41, 129, 255, .15) 0%, transparent 70%);
    pointer-events: none;
}
.section-zuyong1.bg-gray::after {
    content: "";
    position: absolute;
    bottom: -100px; left: -100px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(34, 211, 238, .12) 0%, transparent 70%);
    pointer-events: none;
}

/* —— 顶部品类 .tab-box-head 隐藏（与下方主导航重复，且只有一个分类，按用户要求去掉） */
.section-zuyong1 .tab-box-head {
    display: none !important;
}

/* —— 子分类 .tab-btn —— 主导航胶囊条（玻璃容器 + 不换行 + 可横向滚动） */
.section-zuyong1 .tab-btn {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 0 auto !important;
    text-align: center;
    width: 100% !important;
    flex-wrap: wrap;
    gap: 12px;
}
.section-zuyong1 .tab-btn ul {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 6px !important;
    list-style: none;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(41, 129, 255, .15);
    border-radius: 100px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 28px -14px rgba(41, 129, 255, .3);
    margin: 0 auto !important;
    width: auto !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.section-zuyong1 .tab-btn ul::-webkit-scrollbar { display: none; }
.section-zuyong1 .tab-btn ul li {
    list-style: none;
    flex: 0 0 auto !important;
    white-space: nowrap;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    height: auto !important;
}
.section-zuyong1 .tab-btn ul li a {
    display: inline-block;
    padding: 11px 26px !important;
    border-radius: 100px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #475467 !important;
    transition: all .25s ease;
    letter-spacing: .5px;
    white-space: nowrap;
    background: transparent;
    line-height: 1.4 !important;
}
.section-zuyong1 .tab-btn ul li.on a,
.section-zuyong1 .tab-btn ul li:hover a {
    background: var(--srv-grad) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px -8px rgba(41, 129, 255, .55);
}

/* 表格美化 */
.section-zuyong1 .table01 {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    background: transparent !important;
    margin-top: 18px;
}
.section-zuyong1 .table01 thead {
    background: var(--srv-grad-dark) !important;
}
.section-zuyong1 .table01 thead tr {
    background: transparent !important;
    box-shadow: 0 6px 18px -8px rgba(41, 129, 255, .45);
}
.section-zuyong1 .table01 thead th {
    background: transparent !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 18px 12px !important;
    border: none !important;
    letter-spacing: 1px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}
.section-zuyong1 .table01 thead th:first-child {
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}
.section-zuyong1 .table01 thead th:last-child {
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}
.section-zuyong1 .table01 tbody tr {
    background: rgba(255, 255, 255, .95) !important;
    transition: all .3s ease;
    box-shadow: 0 2px 8px -4px rgba(15, 32, 68, .08);
}
.section-zuyong1 .table01 tbody tr:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px -16px rgba(41, 129, 255, .35), 0 6px 18px -8px rgba(15, 32, 68, .1);
    background: #fff !important;
}
.section-zuyong1 .table01 tbody td {
    background: transparent !important;
    color: #1f2c44 !important;
    font-size: 14px !important;
    padding: 18px 12px !important;
    border: none !important;
    border-top: 1px solid rgba(41, 129, 255, .08) !important;
    border-bottom: 1px solid rgba(41, 129, 255, .08) !important;
    text-align: center;
    vertical-align: middle;
}
.section-zuyong1 .table01 tbody td:first-child {
    border-left: 1px solid rgba(41, 129, 255, .08) !important;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    font-weight: 700;
    color: #0f172a !important;
}
.section-zuyong1 .table01 tbody td:last-child {
    border-right: 1px solid rgba(41, 129, 255, .08) !important;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}
.section-zuyong1 .table01 tbody td .bold {
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    letter-spacing: .5px;
}
.section-zuyong1 .table01 .btn-box {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.section-zuyong1 .table01 .btn,
.section-zuyong1 .table01 tbody td .btn {
    background: var(--srv-grad) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 22px !important;
    padding: 8px 22px !important;
    font-size: 13px !important;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px -6px rgba(41, 129, 255, .55);
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}
.section-zuyong1 .table01 .btn::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    transition: left .55s ease;
}
.section-zuyong1 .table01 .btn:hover::before { left: 100%; }
.section-zuyong1 .table01 .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(41, 129, 255, .65);
    background: linear-gradient(135deg, #3a8eff 0%, #2dddee 100%) !important;
}

/* =========================================================
   5. 产品优势 #section-zuyong2 · 玻璃卡片 + 装饰特性
   ========================================================= */
.section-zuyong2 {
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important;
    padding: 70px 0 !important;
    position: relative;
    overflow: hidden;
}
.section-zuyong2::before {
    content: "";
    position: absolute;
    top: 50%; left: -200px;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(41, 129, 255, .1) 0%, transparent 70%);
    transform: translateY(-50%);
    pointer-events: none;
}
.section-zuyong2 .block11 {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(238, 244, 255, .85) 100%);
    border: 1px solid rgba(41, 129, 255, .18);
    border-radius: 24px;
    padding: 52px 56px !important;
    box-shadow: var(--srv-shadow-soft);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
}
.section-zuyong2 .block11::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 6px; height: 100%;
    background: var(--srv-grad);
    border-radius: 24px 0 0 24px;
}
.section-zuyong2 .block11::after {
    content: "";
    position: absolute;
    top: -100px; right: -100px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(34, 211, 238, .15) 0%, transparent 70%);
    pointer-events: none;
}
.section-zuyong2 .block11 h2 {
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: center;
    margin: 0 0 24px !important;
    padding-bottom: 16px;
    position: relative;
    letter-spacing: 1px;
    display: block;
}
.section-zuyong2 .block11 h2::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 56px; height: 4px;
    background: var(--srv-grad);
    border-radius: 4px;
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(41, 129, 255, .35);
}
.section-zuyong2 .block11 > div p {
    color: #2a3a55 !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
    margin: 0 0 12px !important;
    position: relative;
    z-index: 1;
}
.section-zuyong2 .block11 .text-with-abbreviation {
    color: #1d4ed8 !important;
    font-weight: 700;
    background: linear-gradient(180deg, transparent 60%, rgba(41, 129, 255, .18) 60%);
    padding: 0 4px;
    border-radius: 3px;
}

/* 装饰性特性图标条（位于卡片底部，由 JS 注入） */
.section-zuyong2 .srv-advantage-tags {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px dashed rgba(41, 129, 255, .25);
    list-style: none;
    padding-left: 0;
}
.section-zuyong2 .srv-advantage-tags li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(41, 129, 255, .15);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #1d4ed8;
    transition: all .3s ease;
    cursor: default;
}
/* 图标盒子：渐变蓝底 + 居中白色 SVG（用 background 简写多图层，避免被覆盖） */
.section-zuyong2 .srv-advantage-tags li::before {
    content: "";
    display: inline-block;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2981ff 0%, #22d3ee 100%);
    box-shadow: 0 6px 14px -6px rgba(41, 129, 255, .55);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
/* 1) Steam / UDP 全面优化 → 闪电 ⚡ */
.section-zuyong2 .srv-advantage-tags li:nth-child(1)::before {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>") no-repeat center / 20px 20px,
        linear-gradient(135deg, #2981ff 0%, #22d3ee 100%);
}
/* 2) 电信级安全防护 → 盾牌 + 对勾 */
.section-zuyong2 .srv-advantage-tags li:nth-child(2)::before {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='M9 12l2 2 4-4'/></svg>") no-repeat center / 22px 22px,
        linear-gradient(135deg, #1e6fff 0%, #2dbcff 100%);
}
/* 3) 7×24 全天技术支持 → 时钟 */
.section-zuyong2 .srv-advantage-tags li:nth-child(3)::before {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 16 14'/></svg>") no-repeat center / 22px 22px,
        linear-gradient(135deg, #5b8def 0%, #22d3ee 100%);
}
/* 4) 一站式集群部署 → 服务器集群 */
.section-zuyong2 .srv-advantage-tags li:nth-child(4)::before {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='6' rx='1.5'/><rect x='2' y='14' width='20' height='6' rx='1.5'/><circle cx='6' cy='6' r='1' fill='%23fff'/><circle cx='6' cy='17' r='1' fill='%23fff'/><line x1='10' y1='6' x2='18' y2='6'/><line x1='10' y1='17' x2='18' y2='17'/></svg>") no-repeat center / 22px 22px,
        linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
}
.section-zuyong2 .srv-advantage-tags li:hover {
    transform: translateY(-3px);
    background: #fff;
    border-color: rgba(41, 129, 255, .45);
    box-shadow: 0 14px 32px -12px rgba(41, 129, 255, .35);
    color: #0f172a;
}
.section-zuyong2 .srv-advantage-tags li:hover::before {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 10px 22px -6px rgba(41, 129, 255, .65);
}
.section-zuyong2 .srv-advantage-tags li::before {
    transition: transform .35s ease, box-shadow .35s ease;
}

/* =========================================================
   6. 优势对比 #section-zuyong3 · PK 卡片 3D
   ========================================================= */
.section-zuyong3 {
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%) !important;
    padding: 70px 0 !important;
    position: relative;
    overflow: hidden;
}
.section-zuyong3 .contrast-box {
    padding: 0 20px;
}
.section-zuyong3 .advantage-contrast {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    padding-top: 30px;
}

/* PK 圆球 - 旋转 + 脉冲 */
.section-zuyong3 .contrast-title {
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%);
    width: 76px; height: 76px;
    background: linear-gradient(135deg, #ff4757 0%, #ff7849 100%);
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 76px !important;
    text-align: center;
    border-radius: 50%;
    z-index: 5;
    letter-spacing: 2px;
    box-shadow: 0 14px 32px -10px rgba(255, 71, 87, .55), 0 0 0 6px rgba(255, 71, 87, .12);
    animation: srv-pkPulse 2s ease-in-out infinite;
}
@keyframes srv-pkPulse {
    0%, 100% { box-shadow: 0 14px 32px -10px rgba(255, 71, 87, .55), 0 0 0 6px rgba(255, 71, 87, .12); transform: translateX(-50%) scale(1); }
    50%      { box-shadow: 0 18px 40px -10px rgba(255, 71, 87, .7), 0 0 0 14px rgba(255, 71, 87, 0); transform: translateX(-50%) scale(1.06); }
}

.section-zuyong3 .contrast-data {
    display: flex;
    flex: 1;
    gap: 24px;
}
.section-zuyong3 .contrast {
    flex: 1;
    padding: 50px 30px 30px !important;
    border-radius: 24px;
    transition: all .4s cubic-bezier(.2, .7, .2, 1);
    backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
}
.section-zuyong3 .contrast-l {
    background: linear-gradient(135deg, rgba(41, 129, 255, .08) 0%, rgba(34, 211, 238, .12) 100%) !important;
    border: 1px solid rgba(41, 129, 255, .25) !important;
    box-shadow: 0 12px 32px -16px rgba(41, 129, 255, .35);
}
.section-zuyong3 .contrast-r {
    background: linear-gradient(135deg, rgba(148, 163, 184, .08) 0%, rgba(100, 116, 139, .1) 100%) !important;
    border: 1px solid rgba(148, 163, 184, .25) !important;
    box-shadow: 0 12px 32px -16px rgba(15, 32, 68, .15);
}
.section-zuyong3 .contrast:hover {
    transform: translateY(-6px);
}
.section-zuyong3 .contrast-l:hover {
    box-shadow: 0 26px 50px -20px rgba(41, 129, 255, .5);
    border-color: rgba(41, 129, 255, .55) !important;
}
.section-zuyong3 .contrast-r:hover {
    box-shadow: 0 26px 50px -20px rgba(15, 32, 68, .25);
}

.section-zuyong3 .programme {
    text-align: center;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 22px !important;
    padding-bottom: 16px;
    position: relative;
    letter-spacing: 1px;
}
.section-zuyong3 .contrast-l .programme {
    color: #1d4ed8 !important;
}
.section-zuyong3 .contrast-r .programme {
    color: #475467 !important;
}
.section-zuyong3 .programme::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 36px; height: 3px;
    border-radius: 3px;
    transform: translateX(-50%);
}
.section-zuyong3 .contrast-l .programme::after {
    background: var(--srv-grad);
    box-shadow: 0 4px 10px rgba(41, 129, 255, .4);
}
.section-zuyong3 .contrast-r .programme::after {
    background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
}

.section-zuyong3 .contrast-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.section-zuyong3 .contrast-items li {
    list-style: none;
    padding: 14px 16px 14px 44px !important;
    margin-bottom: 8px !important;
    background: rgba(255, 255, 255, .65);
    border-radius: 12px;
    position: relative;
    transition: all .25s ease;
}
.section-zuyong3 .contrast-items li::before {
    content: "";
    position: absolute;
    left: 14px; top: 18px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
}
.section-zuyong3 .contrast-l .contrast-items li::before {
    background-color: #2981ff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    box-shadow: 0 4px 10px rgba(41, 129, 255, .45);
}
.section-zuyong3 .contrast-r .contrast-items li::before {
    background-color: #cbd5e1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
}
.section-zuyong3 .contrast-l .contrast-items li:hover {
    background: rgba(255, 255, 255, .95);
    transform: translateX(4px);
    box-shadow: 0 8px 20px -8px rgba(41, 129, 255, .25);
}
.section-zuyong3 .contrast-items .contrast-item-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 4px !important;
}
.section-zuyong3 .contrast-r .contrast-items .contrast-item-title {
    color: #475467 !important;
}
.section-zuyong3 .contrast-items .contrast-item-p {
    font-size: 13px !important;
    color: #475467 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* =========================================================
   7. 应用场景 #section-zuyong4 · 玻璃卡片 grid
   ========================================================= */
.section-zuyong4.bg-gray {
    background: linear-gradient(180deg, #f7f9fc 0%, #eef3fa 100%) !important;
    position: relative;
    overflow: hidden;
    padding: 70px 0 70px !important;
}
.section-zuyong4.bg-gray::before {
    content: "";
    position: absolute;
    top: -100px; left: 50%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(41, 129, 255, .1) 0%, transparent 70%);
    transform: translateX(-50%);
    pointer-events: none;
}
.section-zuyong4 .block-items > ul {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}
.section-zuyong4 .block-items > ul > li {
    list-style: none;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
.section-zuyong4 .scene-li {
    height: 100%;
    perspective: 800px;
}
.section-zuyong4 .scene-item {
    height: 100%;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(41, 129, 255, .15);
    border-radius: 18px;
    padding: 28px 16px;
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 22px -10px rgba(15, 32, 68, .15);
    transition: all .4s cubic-bezier(.2, .7, .2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.section-zuyong4 .scene-item::before {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: var(--srv-grad);
    border-radius: 20px;
    opacity: 0;
    z-index: -1;
    transition: opacity .35s ease;
}
.section-zuyong4 .scene-item:hover {
    transform: translateY(-8px);
    border-color: rgba(41, 129, 255, .55);
    box-shadow: 0 26px 50px -20px rgba(41, 129, 255, .45);
    background: #fff;
}
.section-zuyong4 .scene-item img {
    display: block;
    margin: 0 auto 14px;
    width: 56px; height: 56px;
    object-fit: contain;
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);
    filter: drop-shadow(0 6px 12px rgba(41, 129, 255, .25));
}
.section-zuyong4 .scene-item:hover img {
    transform: scale(1.15) rotate(-6deg);
    filter: drop-shadow(0 10px 18px rgba(41, 129, 255, .45));
}
.section-zuyong4 .scene-item p {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin: 0 !important;
    transition: color .25s ease;
    letter-spacing: .5px;
}
.section-zuyong4 .scene-item:hover p {
    color: #1d4ed8 !important;
}

/* =========================================================
   8. footer-tips · 装饰条
   ========================================================= */
[id^="section-zuyong"] ~ .footer-tips {
    background: linear-gradient(135deg, #1e3a8a 0%, #2981ff 60%, #22d3ee 100%) !important;
    padding: 28px 0 !important;
    position: relative;
    overflow: hidden;
}
[id^="section-zuyong"] ~ .footer-tips::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 80% 50%, rgba(255, 255, 255, .15), transparent 60%);
    pointer-events: none;
}
[id^="section-zuyong"] ~ .footer-tips .tips-box p {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    margin: 0;
}

/* =========================================================
   9. 滚动揭示动画（由 server-enhance.js IntersectionObserver 触发）
   ========================================================= */
.srv-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.srv-reveal.srv-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 表格行交错出现 */
.section-zuyong1 .table01 tbody tr {
    opacity: 0;
    transform: translateX(-20px);
    animation: srv-rowFadeIn .6s cubic-bezier(.2, .7, .2, 1) forwards;
}
.section-zuyong1 .table01 tbody tr:nth-child(1) { animation-delay: .05s; }
.section-zuyong1 .table01 tbody tr:nth-child(2) { animation-delay: .12s; }
.section-zuyong1 .table01 tbody tr:nth-child(3) { animation-delay: .19s; }
.section-zuyong1 .table01 tbody tr:nth-child(4) { animation-delay: .26s; }
.section-zuyong1 .table01 tbody tr:nth-child(5) { animation-delay: .33s; }
.section-zuyong1 .table01 tbody tr:nth-child(n+6) { animation-delay: .4s; }
@keyframes srv-rowFadeIn {
    to { opacity: 1; transform: translateX(0); }
}

/* 应用场景图标交错出现 */
.section-zuyong4 .block-items > ul > li {
    opacity: 0;
    transform: translateY(20px);
    animation: srv-cardFadeIn .6s cubic-bezier(.2, .7, .2, 1) forwards;
}
.section-zuyong4 .block-items > ul > li:nth-child(1) { animation-delay: .05s; }
.section-zuyong4 .block-items > ul > li:nth-child(2) { animation-delay: .12s; }
.section-zuyong4 .block-items > ul > li:nth-child(3) { animation-delay: .19s; }
.section-zuyong4 .block-items > ul > li:nth-child(4) { animation-delay: .26s; }
.section-zuyong4 .block-items > ul > li:nth-child(5) { animation-delay: .33s; }
.section-zuyong4 .block-items > ul > li:nth-child(6) { animation-delay: .4s; }
@keyframes srv-cardFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   10. 响应式
   ========================================================= */
@media screen and (max-width: 1440px) {
    [id^="section-zuyong"] .section-header h3,
    [id^="section-zuyong"] .section-title h3,
    .section-zuyong2 .block11 h2 { font-size: 30px !important; }
    .srv-h2-main { font-size: 42px; }
    .srv-h2-sub  { font-size: 18px; }
}

@media screen and (max-width: 1023px) {
    body:has(#section-zuyong1) .skip-box { position: static; }
    body:has(#section-zuyong1) .skip-box .menu-tab { gap: 0; }
    body:has(#section-zuyong1) .skip-box .menu-tab li a { padding: 14px 16px !important; font-size: 13px !important; }

    [id^="section-zuyong"] .section-header h3,
    [id^="section-zuyong"] .section-title h3,
    .section-zuyong2 .block11 h2 { font-size: 22px !important; }
    .section-zuyong1.bg-gray,
    .section-zuyong2,
    .section-zuyong3,
    .section-zuyong4.bg-gray { padding: 40px 0 !important; }

    .srv-banner-tag { font-size: 11px; padding: 4px 12px; margin-bottom: 12px; }
    .srv-h2-main { font-size: 26px; letter-spacing: 0.5px; }
    .srv-h2-sub  { font-size: 16px; }
    .srv-h2-sub::before { height: 7px; bottom: 2px; }
    .srv-feature-tags { gap: 6px; margin-top: 14px !important; }
    .srv-feature-tags li { font-size: 11px; padding: 4px 10px; }
    .banner-single .banner-info p { font-size: 13px !important; line-height: 22px !important; }

    .section-zuyong2 .block11 { padding: 32px 22px !important; }
    .section-zuyong2 .srv-advantage-tags { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .section-zuyong2 .srv-advantage-tags li { font-size: 12px; padding: 10px 12px; }

    .section-zuyong3 .advantage-contrast { flex-direction: column; }
    .section-zuyong3 .contrast-data { flex-direction: column; gap: 16px; }
    .section-zuyong3 .contrast-title { position: static; transform: none; margin: 0 auto 16px; }
    .section-zuyong3 .contrast { padding: 24px 20px !important; }

    .section-zuyong4 .block-items > ul { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .section-zuyong4 .scene-item { padding: 20px 10px; }
    .section-zuyong4 .scene-item img { width: 44px; height: 44px; margin-bottom: 10px; }
    .section-zuyong4 .scene-item p { font-size: 13px !important; }
}