/* 第二主页 · 新增组件（内联，不改 style.css）：报价 TAB + 案例横滚 */
#price .hv2-tabs {
    display: inline-flex;
    gap: 6px;
    background: #fff;
    border: 1px solid rgba(15, 107, 92, .14);
    border-radius: 999px;
    padding: 5px;
    margin: 4px 0 50px;
    box-shadow: 0 10px 26px -20px rgba(15, 107, 92, .4)
}

#price .hv2-tab {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    color: #5d6f69;
    padding: 11px 26px;
    border-radius: 999px;
    cursor: pointer;
    transition: .22s
}

#price .hv2-tab.on {
    background: #0f6b5c;
    color: #fff;
    box-shadow: 0 12px 26px -16px rgba(15, 107, 92, .6)
}

#price .hv2-panel {
    display: none
}

#price .hv2-panel.on {
    display: block;
    animation: hv2fade .3s ease
}

/* 四卡底部对齐：AI 注脚与按钮吸底，四张卡的脚部落在同一条线上 */
#price .pc .ce {
    margin-top: auto
}

@keyframes hv2fade {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

#cases .cases.hv2-scroll {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px 2px 14px;
    scrollbar-width: none
}

#cases .cases.hv2-scroll::-webkit-scrollbar {
    display: none
}

#cases .cases.hv2-scroll .case {
    flex: 0 0 340px;
    scroll-snap-align: start
}

.hv2-case-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 4px 0 18px
}

.hv2-case-nav button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(15, 107, 92, .18);
    background: #fff;
    color: #0a4f44;
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s;
    line-height: 1
}

.hv2-case-nav button:hover {
    background: #0f6b5c;
    color: #fff;
    border-color: #0f6b5c
}

@media(max-width:560px) {
    #cases .cases.hv2-scroll .case {
        flex: 0 0 82%
    }

    #price .hv2-tab {
        padding: 10px 16px;
        font-size: 14px
    }
}

#price .cf-note {
    margin: 18px 0 26px
}

/* 两条业务线：卡片等高，「查看套餐」吸底，消掉底部空一块 */
#split .box {
    display: flex;
    flex-direction: column
}

#split .box .more {
    margin-top: auto;
    align-self: flex-start
}

#split .box .feats {
    margin-bottom: 18px
}

/* 建站 + 运营（合并原「服务卡」与「获客系统」两块） */
#grow {
    background: linear-gradient(180deg, #f7fbf9, #fff)
}

#grow .hv2-vs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch
}

#grow .vc {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 24px 26px 22px;
    border: 1px solid rgba(15, 107, 92, .12);
    background: #fff;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease
}

#grow .vc:hover {
    transform: translateY(-3px)
}

#grow .vc.bad {
    background: linear-gradient(180deg, #fdfbf9, #f9f6f2);
    border-color: rgba(150, 130, 110, .18)
}

#grow .vc.bad:hover {
    box-shadow: 0 20px 44px -38px rgba(120, 100, 80, .8)
}

#grow .vc.good {
    background: radial-gradient(90% 120% at 100% 0%, rgba(126, 231, 196, .34), transparent 62%), linear-gradient(160deg, #eafaf3, #d8efe4);
    border-color: rgba(15, 107, 92, .34);
    box-shadow: 0 24px 52px -38px rgba(15, 107, 92, .85)
}

#grow .vc.good:hover {
    border-color: rgba(15, 107, 92, .5);
    box-shadow: 0 28px 58px -34px rgba(15, 107, 92, .9)
}

/* 右侧卡左缘一道渐变竖条，视觉上把「我们」这一侧托起来 */
#grow .vc.good::after {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #0f6b5c, #5fdbb2);
    opacity: .85
}

#grow .vc h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    margin: 0 0 15px;
    padding-bottom: 13px;
    color: #1d2a26;
    border-bottom: 1px dashed rgba(15, 107, 92, .17)
}

#grow .vc.bad h4 {
    border-bottom-color: rgba(150, 130, 110, .3)
}

#grow .vc h4 em {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef1ef;
    color: #7c8a85
}

#grow .vc.good h4 em {
    background: #0f6b5c;
    color: #fff;
    box-shadow: 0 8px 18px -12px rgba(15, 107, 92, .9)
}

#grow .vc ul {
    margin: 0;
    padding: 0;
    list-style: none
}

#grow .vc li {
    position: relative;
    padding-left: 27px;
    font-size: 13.8px;
    line-height: 1.7;
    color: #5d6f69;
    margin-bottom: 9px
}

#grow .vc li:last-child {
    margin-bottom: 0
}

#grow .vc.bad li::before,
#grow .vc.good li::before {
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .03)
}

#grow .vc.bad li::before {
    content: "✕";
    background: #ece2d8;
    color: #8d6551
}

#grow .vc.good li::before {
    content: "✓";
    background: rgba(15, 107, 92, .16);
    color: #065c47
}

#grow .vc.good li {
    color: #2f4a42
}

#grow .hv2-capshead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 30px 0 16px
}

#grow .hv2-capshead b {
    font-size: 17px;
    color: #0a4f44
}

#grow .hv2-capshead span {
    font-size: 13px;
    color: #7a8a84
}

#grow .hv2-caps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

#grow .hv2-cap {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #fff, #fbfdfc);
    border: 1px solid rgba(15, 107, 92, .1);
    border-radius: 18px;
    padding: 22px 22px 16px;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s
}

/* 顶部一道细渐变条 + 右上角淡光斑，hover 才出现，不动布局 */
#grow .hv2-cap::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, #0f6b5c, #5fdbb2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .36s ease
}

#grow .hv2-cap:hover::before {
    transform: scaleX(1)
}

#grow .hv2-cap::after {
    content: "";
    position: absolute;
    right: -46px;
    top: -46px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(95, 219, 178, .22), transparent 68%);
    opacity: 0;
    transition: opacity .36s ease;
    pointer-events: none
}

#grow .hv2-cap:hover::after {
    opacity: 1
}

#grow .hv2-cap>* {
    position: relative;
    z-index: 1
}

#grow .hv2-cap:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 107, 92, .26);
    box-shadow: 0 22px 46px -34px rgba(15, 107, 92, .6)
}

#grow .hv2-cap .ic {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(15, 107, 92, .12);
    display: grid;
    place-items: center;
    font-size: 21px;
    margin-bottom: 14px;
    box-shadow: 0 10px 22px -18px rgba(15, 107, 92, .9), inset 0 -3px 8px rgba(15, 107, 92, .05)
}

#grow .hv2-cap h3 {
    font-size: 16.5px;
    margin: 0 0 8px;
    color: #1d2a26;
    letter-spacing: .01em
}

#grow .hv2-cap p {
    font-size: 13.5px;
    line-height: 1.75;
    color: #5d6f69;
    margin: 0 0 13px
}

#grow .hv2-cap .tg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px
}

#grow .hv2-cap .tg span {
    font-size: 11.5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eff8f4;
    border: 1px solid rgba(15, 107, 92, .1);
    color: #41625a;
    transition: background .24s ease, border-color .24s ease
}

#grow .hv2-cap:hover .tg span {
    background: #e3f5ed;
    border-color: rgba(15, 107, 92, .18)
}

#grow .hv2-cap a {
    margin: auto 0 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-top: 12px;
    border-top: 1px solid #edf5f1;
    font-size: 13px;
    font-weight: 800;
    color: #0a7f5c;
    text-decoration: none;
    transition: color .2s ease, padding-left .26s ease
}

#grow .hv2-cap a:hover {
    color: #084c40;
    padding-left: 3px
}

/* 三条业务线面板的结构与配色统一在文末「第 4 轮」样式里定义，此处不再重复 */

/* 新闻：左上主推 + 左下编辑推荐，右上行业动态 + 右下建站知识 */
#news .hv2-news2 {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 22px;
    align-items: start
}

/* 防横向溢出：grid/flex 子项默认 min-width:auto，标题 nowrap 会把整页撑宽（移动端实测 475>334） */
#news .hv2-news2>*,
#news .nl,
#news .nr,
#news .hv2-latest,
#news .hv2-sidecard,
#news .hv2-feat {
    min-width: 0
}

#news .hv2-latest li a,
#news .hv2-latest li span,
#news .hv2-sidecard li a {
    min-width: 0
}

#news .hv2-latest li span {
    overflow: hidden;
    text-overflow: ellipsis
}

#news .nl {
    display: flex;
    flex-direction: column;
    gap: 14px
}

#news .hv2-feat {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    background: #fff;
    border: 1px solid rgba(15, 107, 92, .1);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 18px 44px -38px rgba(15, 107, 92, .6);
    transition: transform .28s ease, box-shadow .28s ease
}

#news .hv2-feat:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 52px -36px rgba(15, 107, 92, .7)
}

/* 主推图：铺满左侧单元格（原图 1536×700 横幅，裁切只发生在上下极小的范围，画面主体完整） */
#news .hv2-feat .fimg {
    position: relative;
    overflow: hidden;
    background: #eef2f0;
    background-size: cover;
    background-position: center;
    min-height: 150px;
    transition: transform .6s ease
}

#news .hv2-feat:hover .fimg {
    transform: scale(1.03)
}

#news .hv2-feat .fimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease
}

#news .hv2-feat:hover .fimg img {
    transform: scale(1.05)
}

#news .hv2-feat .fimg span {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: rgba(10, 79, 68, .86);
    border-radius: 999px;
    padding: 3px 10px
}

#news .hv2-feat .fb {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px 20px 18px 18px
}

#news .hv2-feat .fk {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #c68a00
}

#news .hv2-feat h3 {
    font-size: 19px;
    line-height: 1.5;
    margin: 8px 0;
    color: #1d2a26
}

#news .hv2-feat p {
    font-size: 13.4px;
    line-height: 1.72;
    color: #5d6f69;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

#news .hv2-feat .fd {
    margin-top: auto;
    font-size: 12px;
    color: #9aaba5
}

#news .hv2-latest,
#news .hv2-sidecard {
    background: #fff;
    border: 1px solid rgba(15, 107, 92, .1);
    border-radius: 16px;
    padding: 16px 20px 8px
}

#news .hv2-latest .lh,
#news .hv2-sidecard .sh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 11px;
    border-bottom: 1px dashed #e2ece7
}

#news .hv2-latest .lh b,
#news .hv2-sidecard .sh b {
    font-size: 15px;
    color: #0a4f44
}

#news .hv2-latest .lh span {
    font-size: 12px;
    color: #9aaba5
}

#news .hv2-sidecard .sh a {
    font-size: 12.5px;
    font-weight: 700;
    color: #0a7f5c;
    text-decoration: none
}

#news .hv2-latest ul,
#news .hv2-sidecard ul {
    list-style: none;
    margin: 0;
    padding: 0
}

#news .hv2-latest li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 2px;
    border-bottom: 1px solid #f2f7f4;
    text-decoration: none
}

#news .hv2-sidecard li a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 2px;
    border-bottom: 1px solid #f2f7f4;
    text-decoration: none
}

#news .hv2-latest li:last-child a,
#news .hv2-sidecard li:last-child a {
    border-bottom: 0
}

#news .hv2-latest li i {
    flex: 0 0 42px;
    font-style: normal;
    font-size: 12px;
    color: #9aaba5;
    text-align: right;
    font-variant-numeric: tabular-nums
}

#news .hv2-sidecard li i {
    flex: 0 0 38px;
    font-style: normal;
    font-size: 12px;
    color: #9aaba5;
    text-align: right;
    font-variant-numeric: tabular-nums
}

#news .hv2-latest li span {
    flex: 1;
    min-width: 0;
    font-size: 14.2px;
    line-height: 1.55;
    color: #2c3a35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

#news .hv2-sidecard li span {
    flex: 1;
    min-width: 0;
    font-size: 13.8px;
    line-height: 1.6;
    color: #2c3a35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

#news .hv2-latest li a:hover span,
#news .hv2-sidecard li a:hover span {
    color: #0a7f5c
}

/* 编辑推荐前 3 条的排名序号：1 深绿 / 2 中绿 / 3 琥珀，与品牌色同族。
   序号用绝对定位，li 统一左内边距，保证带序号与不带序号的标题左边缘对齐 */
#news .hv2-latest li {
    position: relative;
    padding-left: 32px
}

#news .hv2-latest .rk {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 900;
    color: #fff;
    font-variant-numeric: tabular-nums;
    transition: transform .2s ease
}

#news .hv2-latest .rk1 {
    background: linear-gradient(135deg, #0f6b5c, #12836b);
    box-shadow: 0 6px 14px -8px rgba(15, 107, 92, .9)
}

#news .hv2-latest .rk2 {
    background: linear-gradient(135deg, #2f9d82, #43b394);
    box-shadow: 0 6px 14px -8px rgba(47, 157, 130, .9)
}

#news .hv2-latest .rk3 {
    background: linear-gradient(135deg, #d99a2b, #e8b45a);
    box-shadow: 0 6px 14px -8px rgba(217, 154, 43, .9)
}

#news .hv2-latest a:hover .rk {
    transform: scale(1.1)
}

#news .hv2-latest .rk+span {
    font-weight: 600;
    color: #1d2a26
}

#news .nr {
    display: flex;
    flex-direction: column;
    gap: 14px
}

@media(max-width:999px) {
    #grow .hv2-caps {
        grid-template-columns: repeat(2, 1fr)
    }

    #grow .hv2-vs {
        grid-template-columns: 1fr
    }

    #news .hv2-news2 {
        grid-template-columns: 1fr
    }

    #news .hv2-feat {
        grid-template-columns: 1fr
    }

    #news .hv2-feat .fimg {
        min-height: 0;
        aspect-ratio: 16/9
    }

    #news .hv2-feat .fb {
        padding: 0 18px 18px
    }
}

@media(max-width:560px) {
    #grow .hv2-caps {
        grid-template-columns: 1fr
    }

    #grow .vc {
        padding: 18px
    }
}

/* ========== 第 4 轮：报价/FAQ 深色系 + 合并板块美化 + 新闻两栏重构 ========== */

/* —— 1. 报价四卡行距：卡片等高时 ul 会被 align-content:stretch 把行均分，
   条目少的两张卡就会出现「一条大缝」。改成 start，行距恒为 9px，
   四张卡的清单都从顶部整齐排下来。 —— */
#price .pc ul {
    align-content: start
}

/* —— 2. 「不只是建站」板块抬头：第二行加高亮底纹 + 三条迷你数据 —— */
#grow .hv2-ghead h2 {
    line-height: 1.32
}

#grow .hv2-ghead h2 .hv2-hl2 {
    position: relative;
    display: inline-block;
    color: #0a4f44;
    background: linear-gradient(180deg, transparent 58%, rgba(64, 214, 170, .3) 58%, rgba(64, 214, 170, .3) 92%, transparent 92%);
    padding: 0 4px
}

#grow .hv2-mini {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin-top: 22px;
    padding: 12px 24px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15, 107, 92, .13);
    box-shadow: 0 16px 38px -32px rgba(15, 107, 92, .9)
}

#grow .hv2-mini span {
    font-size: 13px;
    color: #5d6f69;
    display: inline-flex;
    align-items: baseline;
    gap: 5px
}

#grow .hv2-mini span b {
    font-size: 16px;
    font-weight: 900;
    color: #0f6b5c
}

/* —— 3. 两张对照卡（按用户要求去掉中间的 VS 圆章），各带一个图标章 —— */
#grow .hv2-vs {
    position: relative
}

#grow .vc h4 .hv2-vi {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(160deg, #f4f1ee, #ebe5df);
    font-size: 15px;
    font-style: normal;
    box-shadow: inset 0 0 0 1px rgba(150, 130, 110, .16)
}

#grow .vc.good h4 .hv2-vi {
    background: linear-gradient(160deg, #d8f3e7, #bfe9d7);
    box-shadow: inset 0 0 0 1px rgba(15, 107, 92, .18), 0 8px 16px -12px rgba(15, 107, 92, .9)
}

/* —— 4. 三条业务线：绿色品牌底（不是藏蓝/墨绿）+ 3 张业务卡 + 权益胶囊 —— */
#grow .hv2-gf {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: 20px 26px;
    align-items: center;
    margin-top: 26px;
    padding: 24px 28px;
    border-radius: 20px;
    overflow: hidden;
    background: radial-gradient(78% 130% at 0% 0%, rgba(126, 231, 196, .34), transparent 62%), radial-gradient(60% 100% at 100% 100%, rgba(255, 214, 122, .16), transparent 70%), linear-gradient(135deg, #0d6152 0%, #12836b 58%, #0f7060 100%);
    border: 1px solid rgba(126, 231, 196, .34);
    box-shadow: 0 28px 62px -42px rgba(10, 72, 60, .9)
}

#grow .hv2-gf .hv2-gfring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none
}

#grow .hv2-gf .hv2-gfring.a {
    width: 280px;
    height: 280px;
    right: -80px;
    top: -120px;
    border: 1px dashed rgba(255, 255, 255, .3);
    animation: hv2spin 48s linear infinite
}

#grow .hv2-gf .hv2-gfring.b {
    width: 150px;
    height: 150px;
    right: 26%;
    bottom: -86px;
    border: 1px solid rgba(255, 255, 255, .16)
}

/* 环上跑的小圆点：环在转，点固定在环顶，视觉上就是小圆绕圈滚动 */
#grow .hv2-gf .hv2-gfring.a::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    margin-left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffe9b0;
    box-shadow: 0 0 16px rgba(255, 233, 176, .9)
}

#grow .hv2-gf .l,
#grow .hv2-gf .r {
    position: relative;
    z-index: 2
}

#grow .hv2-gf .l b {
    display: block;
    font-size: 15px;
    color: #fff;
    margin-bottom: 13px;
    letter-spacing: .01em
}

#grow .hv2-gf .lk {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px
}

#grow .hv2-gf .lk a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-areas: "i t" "i d";
    column-gap: 9px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 10px 24px -18px rgba(6, 60, 50, .7);
    text-decoration: none;
    transition: transform .24s ease, background .24s ease, border-color .24s ease
}

#grow .hv2-gf .lk a i {
    grid-area: i;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #e6f5ef;
    font-size: 14px;
    font-style: normal
}

#grow .hv2-gf .lk a b {
    grid-area: t;
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: #0a4f44;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#grow .hv2-gf .lk a em {
    grid-area: d;
    margin: 0;
    font-style: normal;
    font-size: 10.8px;
    color: #5d7a72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#grow .hv2-gf .lk a:hover {
    background: #f4fdf9;
    border-color: #9fe3ca;
    transform: translateY(-3px)
}

#grow .hv2-gf .r {
    padding-left: 26px;
    border-left: 1px solid rgba(255, 255, 255, .26)
}

#grow .hv2-gf .hv2-rlabel {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    color: #c9f7e6;
    margin-bottom: 10px
}

#grow .hv2-gf .hv2-rk {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

#grow .hv2-gf .hv2-rk i {
    font-style: normal;
    font-size: 12.2px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    padding: 5px 11px 5px 9px
}

#grow .hv2-gf .hv2-rk i::before {
    content: "✓";
    margin-right: 5px;
    color: #ffe9b0;
    font-weight: 900
}

/* —— 5. 深色底板（报价 + FAQ 共用）：改用品牌主题绿，与案例详情页 .pg-hero--dark 同一族
   （#1a6b52 → #1f7a5e），不再是藏蓝；圆环 / 小圆点 / 点阵做慢动效 —— */
#price.hv2-dark,
#faq.hv2-dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(78% 52% at 50% -10%, rgba(126, 231, 196, .2), transparent 62%), radial-gradient(46% 40% at 96% 92%, rgba(255, 202, 98, .13), transparent 70%), linear-gradient(160deg, #14594a 0%, #1b7055 48%, #125043 100%)
}

#price.hv2-dark::before,
#faq.hv2-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: radial-gradient(72% 62% at 50% 34%, #000, transparent 80%);
    mask-image: radial-gradient(72% 62% at 50% 34%, #000, transparent 80%)
}

#price.hv2-dark .wrap,
#faq.hv2-dark .wrap {
    position: relative;
    z-index: 2
}

#price .dk-ring,
#faq .dk-ring {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    border: 1px dashed rgba(178, 245, 226, .45)
}

/* 环上的小圆点：环整体 52s / 72s 慢转，点固定在环顶同步绕圈 → 「小圆在圆里滚动」 */
#price .dk-ring::after,
#faq .dk-ring::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #b6f7e3;
    box-shadow: 0 0 0 3px rgba(182, 247, 227, .22), 0 0 18px rgba(182, 247, 227, .95)
}

/* 环内再套一圈细实线，让「圆里有圆」更明确 */
#price .dk-ring::before,
#faq .dk-ring::before {
    content: "";
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16)
}

#price .dk-ring.a,
#faq .dk-ring.a {
    width: 520px;
    height: 520px;
    top: 30px;
    right: -130px;
    animation: hv2spin 52s linear infinite
}

#price .dk-ring.b,
#faq .dk-ring.b {
    width: 340px;
    height: 340px;
    bottom: -70px;
    left: -70px;
    border-color: rgba(255, 255, 255, .26);
    animation: hv2spin 72s linear infinite reverse
}

#price .dk-ring.b::after {
    display: none
}

/* FAQ 左下角：环放在卡片下方的空白带里（不被玻璃卡糊掉），环上琥珀小圆点 58s 绕一圈 */
#faq .dk-ring.b {
    width: 160px;
    height: 160px;
    left: 12px;
    bottom: 8px;
    border-color: rgba(178, 245, 226, .4);
    animation: hv2spin 58s linear infinite reverse
}

#faq .dk-ring.b::after {
    display: block;
    top: -6px;
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
    background: #ffd27a;
    box-shadow: 0 0 0 3px rgba(255, 202, 98, .22), 0 0 22px rgba(255, 202, 98, 1)
}

#price .dk-ring.c,
#faq .dk-ring.c {
    width: 230px;
    height: 230px;
    top: 42%;
    left: 3%;
    border-color: rgba(255, 255, 255, .22);
    animation: hv2spin 88s linear infinite
}

#price .dk-ring.c::after,
#faq .dk-ring.c::after {
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background: rgba(255, 226, 168, .9);
    box-shadow: 0 0 0 3px rgba(255, 226, 168, .16), 0 0 14px rgba(255, 226, 168, .9)
}

#faq .dk-ring.c {
    top: 18%;
    left: auto;
    right: 6%
}

#price .dk-dots,
#faq .dk-dots {
    position: absolute;
    z-index: 0;
    width: 210px;
    height: 210px;
    right: 7%;
    top: 11%;
    opacity: .4;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .32) 1px, transparent 1px);
    background-size: 16px 16px
}

#faq .dk-dots {
    right: auto;
    left: 30px;
    top: auto;
    bottom: 26px;
    width: 124px;
    height: 124px;
    opacity: .26
}

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

@media(prefers-reduced-motion:reduce) {

    #price .dk-ring,
    #faq .dk-ring,
    #grow .hv2-gf .hv2-gfring.a {
        animation: none
    }
}

/* 深色区抬头 */
.hv2-dark .sec-head .k {
    color: #ffe6ae
}

.hv2-dark .sec-head h2 {
    color: #fff
}

.hv2-dark .sec-head h2::after {
    background: linear-gradient(90deg, #b6f7e3, #ffca62)
}

.hv2-dark .sec-head p {
    color: rgba(255, 255, 255, .76)
}

.hv2-dark .sec-head p b {
    color: #fff;
    font-weight: 800
}

/* —— 6. 报价区深色化：TAB / 四卡 / 注脚 —— */
#price .hv2-tabs {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 4px auto 30px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .9)
}

#price .hv2-tab {
    color: rgba(255, 255, 255, .66)
}

#price .hv2-tab:hover {
    color: #fff
}

#price .hv2-tab.on {
    background: linear-gradient(135deg, #8bebcd, #4fd1a5);
    color: #06322a;
    box-shadow: 0 14px 30px -16px rgba(79, 209, 165, .6)
}

#price .pc {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
    border: 1px solid rgba(255, 255, 255, .17);
    box-shadow: 0 26px 60px -38px rgba(0, 45, 36, .75);
    -webkit-backdrop-filter: blur(7px) saturate(120%);
    backdrop-filter: blur(7px) saturate(120%)
}

#price .pc:hover {
    transform: translateY(-6px);
    border-color: rgba(182, 247, 227, .55);
    box-shadow: 0 32px 70px -32px rgba(0, 45, 36, .8)
}

#price .pc.hot {
    border: 1px solid rgba(255, 196, 71, .6);
    background: linear-gradient(180deg, rgba(255, 196, 71, .2), rgba(255, 255, 255, .06) 62%);
    box-shadow: 0 28px 66px -34px rgba(240, 165, 0, .45)
}

#price .pc.hot:hover {
    border-color: #ffca62;
    box-shadow: 0 34px 74px -32px rgba(240, 165, 0, .5)
}

#price .pc .tier {
    color: #d3fbee
}

#price .pc .amt {
    color: #fff
}

#price .pc .amt small {
    color: rgba(255, 255, 255, .5)
}

#price .pc .val {
    background: rgba(126, 231, 196, .15);
    color: #9fecd6
}

#price .pc .fit {
    color: rgba(255, 255, 255, .66)
}

#price .pc .fit::before {
    color: #7ee7c4
}

#price .pc ul li {
    color: rgba(255, 255, 255, .82)
}

#price .pc li .ck {
    color: #7ee7c4
}

#price .pc li .ck.no {
    color: rgba(255, 255, 255, .25)
}

#price .pc li b {
    color: #fff;
    font-weight: 600
}

#price .pc .ce {
    border-top: 1px solid rgba(255, 255, 255, .13)
}

#price .pc .ce::before {
    background: rgba(126, 231, 196, .18);
    color: #9fecd6
}

#price .pc .ce-k {
    color: #b6ecdb
}

#price .pc .ce-v {
    color: #eafaf5
}

#price .pc .pick {
    background: rgba(255, 255, 255, .1);
    color: #eafaf5
}

#price .pc .pick:hover {
    background: #7ee7c4;
    color: #06322a
}

#price .pc.hot .pick {
    background: linear-gradient(135deg, #ffd07a, #f0a500);
    color: #3a2a00;
    box-shadow: 0 12px 26px -10px rgba(240, 165, 0, .6)
}

#price .pc.hot .pick:hover {
    background: #fff;
    color: #3a2a00
}

#price .pc .q2 {
    background: rgba(255, 255, 255, .16);
    color: #eafaf5
}

#price .pc .q2:hover,
#price .pc .q2:focus,
#price .pc .q2.on {
    background: #7ee7c4;
    color: #06322a
}

#price .cf-note {
    color: rgba(255, 255, 255, .7)
}

#price .cf-note b {
    color: #fff
}

/* 每档套餐都含：左侧权益胶囊 + 右侧客户数据（四项数值，横向排列，细进度条） */
#price .benefit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    align-items: center;
    gap: 16px 34px;
    margin-top: 36px;
    padding: 20px 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .075);
    border: 1px solid rgba(255, 255, 255, .16);
    overflow: hidden
}

#price .benefit::after {
    background: radial-gradient(58% 130% at 100% 0%, rgba(255, 202, 98, .14), transparent 64%)
}

#price .benefit .bt {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 12px
}

#price .benefit .bt b {
    font-size: 15.5px
}

#price .benefit .bt span {
    font-size: 12px;
    color: rgba(255, 255, 255, .58);
    opacity: 1
}

#price .benefit .blist {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

#price .benefit .blist i {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .16);
    font-style: normal;
    font-size: 12.6px;
    color: rgba(255, 255, 255, .9);
    transition: background .24s ease, border-color .24s ease, color .24s ease
}

#price .benefit .blist i:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(182, 247, 227, .55);
    color: #fff
}

/* 右侧四项客户数据 */
#price .benefit .hv2-bnfl {
    position: relative;
    z-index: 2;
    min-width: 0
}

#price .benefit .hv2-bnfstat {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding-left: 32px;
    border-left: 1px solid rgba(255, 255, 255, .2)
}

#price .hv2-bnfh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px
}

#price .hv2-bnfh span {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .6)
}

#price .hv2-bnfh a {
    font-size: 11.5px;
    font-weight: 800;
    color: #ffe2a8;
    text-decoration: none;
    white-space: nowrap;
    transition: .2s
}

#price .hv2-bnfh a:hover {
    color: #fff
}

#price .hv2-bnfg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px
}

#price .hv2-bs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 8px;
    min-width: 0
}

#price .hv2-bs .lb {
    font-size: 11.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .68);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#price .hv2-bs b {
    font-size: 16.5px;
    font-weight: 900;
    line-height: 1.2;
    color: #ffca62;
    white-space: nowrap;
    font-variant-numeric: tabular-nums
}

#price .hv2-bs .bar {
    grid-column: 1/-1;
    display: block;
    height: 5px;
    margin-top: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .3);
    overflow: hidden
}

#price .hv2-bs .bar em {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #dcfff4, #5fdbb2);
    box-shadow: 0 0 10px rgba(126, 231, 196, .6)
}

/* —— 7. FAQ 深色化（绿色底：卡片与标签提高一档不透明度，保证看得清） —— */
#faq .faq .item {
    background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .07));
    border: 1px solid rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%)
}

#faq .faq .item:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .1));
    border-color: rgba(182, 247, 227, .55)
}

#faq .faq .item.open {
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .1));
    border-color: rgba(182, 247, 227, .65);
    box-shadow: 0 26px 56px -32px rgba(0, 40, 32, .55)
}

#faq .faq .q {
    color: #fff
}

#faq .faq .q .cat {
    background: rgba(255, 255, 255, .24);
    color: #fff
}

#faq .faq .q .pm {
    background: rgba(255, 255, 255, .2);
    color: #fff
}

#faq .faq .item.open .pm {
    background: linear-gradient(135deg, #dcfff4, #5fdbb2);
    color: #073028
}

#faq .faq .a p {
    color: rgba(255, 255, 255, .8)
}

#faq .faq .a p b {
    color: #fff
}

#faq .faq .a p a,
#faq .faq .a p .key_link {
    color: #ffe0a0;
    text-decoration-color: rgba(255, 224, 160, .45);
    text-underline-offset: 3px
}

#faq .faq .a p a:hover,
#faq .faq .a p .key_link:hover {
    color: #fff2d0
}

#faq .faq-more .btn-ghost {
    border-color: rgba(255, 255, 255, .34);
    color: #fff
}

#faq .faq-more .btn-ghost:hover {
    border-color: #b6f7e3;
    background: rgba(255, 255, 255, .14);
    color: #fff
}

/* —— 8. 新闻两栏：左（主推 + 编辑推荐）右（行业动态 + 建站知识） —— */
#news .hv2-news2 {
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    gap: 18px 22px;
    align-items: stretch
}

#news .hv2-feat {
    grid-area: auto
}

#news .hv2-latest {
    grid-area: auto
}

#news .hv2-sidecard:nth-of-type(1) {
    grid-area: auto
}

#news .hv2-sidecard:nth-of-type(2) {
    grid-area: auto
}

/* 左右两列底边齐平：grid 默认 stretch 已给出整行高度，列内用 flex 堆叠，
   末张卡的列表按行均分剩余空间（注意不要写 height:100%，会让行高循环解析塌掉）；
   列表行给 min-height 兜底，空间不足时宁可撑出卡片也不重叠。 */
#news .nl,
#news .nr {
    height: auto
}

#news .nl>*:last-child,
#news .nr>*:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column
}

#news .nl>*:last-child>ul,
#news .nr>*:last-child>ul {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column
}

#news .nl>*:last-child>ul>li,
#news .nr>*:last-child>ul>li {
    display: flex;
    flex: 1 1 auto;
    min-height: 40px
}

#news .nl>*:last-child>ul>li>a,
#news .nr>*:last-child>ul>li>a {
    flex: 1;
    align-items: center
}

#news .hv2-latest .lh .hv2-lhp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px
}

#news .hv2-latest .lh .hv2-lhp a {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f8f5;
    border: 1px solid rgba(15, 107, 92, .12);
    color: #0a7f5c;
    font-weight: 700;
    text-decoration: none;
    transition: .2s
}

#news .hv2-latest .lh .hv2-lhp a:hover {
    background: #e4f4ec;
    color: #0a4f44;
    border-color: rgba(15, 107, 92, .26)
}

/* 主推卡：摘要放开到 3 行，底部补「阅读全文」，把右侧空白变成阅读动线 */
#news .hv2-feat p {
    -webkit-line-clamp: 2
}

#news .hv2-feat .fd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed #eef4f1;
    font-size: 12px;
    color: #9aaba5
}

#news .hv2-feat .fd em {
    font-style: normal;
    font-size: 12.5px;
    font-weight: 800;
    color: #0a7f5c
}

#news .hv2-feat:hover .fd em {
    color: #0a4f44
}

@media(max-width:1300px) {
    #grow .hv2-gf {
        grid-template-columns: 1fr
    }

    #grow .hv2-gf .r {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .26);
        padding-top: 16px
    }

    /* 窄屏时主推卡图片列收窄，标题列别被挤成一两个字一行 */
    #news .hv2-feat {
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr)
    }
}

@media(max-width:999px) {

    #price .dk-dots,
    #faq .dk-dots {
        display: none
    }

    /* 单列后卡片铺满宽度，装饰环没有落脚的空隙，直接收起 */
    #faq .dk-ring.b {
        display: none
    }

    /* 单列：必须在这里重设列宽，否则上面新写的两列定义会盖掉旧的 980 断点 */
    #news .hv2-news2 {
        grid-template-columns: 1fr;
        gap: 14px
    }

    #news .hv2-feat,
    #news .hv2-latest,
    #news .hv2-sidecard:nth-of-type(1),
    #news .hv2-sidecard:nth-of-type(2) {
        grid-area: auto
    }

    #price .benefit {
        grid-template-columns: 1fr;
        gap: 14px
    }

    #price .benefit .hv2-bnfstat {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .2);
        padding-top: 14px
    }

    #price .benefit .blist i {
        font-size: 12.2px
    }
}

@media(max-width:560px) {
    #grow .hv2-gf {
        padding: 20px 18px
    }

    #grow .hv2-gf .lk {
        grid-template-columns: 1fr
    }

    #grow .hv2-mini {
        padding: 10px 16px;
        gap: 8px 16px
    }

    #grow .hv2-mini span {
        font-size: 12px
    }

    #price .benefit {
        padding: 18px 18px 14px
    }

    #price .pc ul {
        gap: 8px
    }

    #price .benefit .blist {
        gap: 6px
    }

    #price .benefit .blist i {
        padding: 5px 11px;
        font-size: 12px
    }

    /* 手机端列表标题改成两行，避免全是省略号 */
    #news .hv2-latest li {
        padding-left: 28px
    }

    #news .hv2-latest .rk {
        width: 18px;
        height: 18px;
        margin-top: -9px;
        border-radius: 5px;
        font-size: 10.5px
    }

    #news .hv2-latest li i {
        flex: 0 0 34px
    }

    #news .hv2-latest li span {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.5
    }

    /* 主推卡：手机端改为上图下文，图片按原图比例完整显示 */
    #news .hv2-feat {
        grid-template-columns: 1fr
    }

    #news .hv2-feat .fimg {
        width: 100%;
        min-height: 0
    }
}