* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    background: #f4f7fb;
    color: #12275c;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 76px 20px 0;
}

/* 头部 */
.hzvqm {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e6eefb;
}

.mqztn {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.rqvnb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.rqvnb img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.kvzqn {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #12275c;
}

.wqzvt {
    display: flex;
    align-items: center;
    gap: 22px;
}

.wqzvt a {
    font-size: 14px;
    color: #4d628a;
    transition: color 0.2s;
}

.wqzvt a:hover {
    color: #1f6ede;
}

.nzvqm {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.bqzvn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2f7bff, #1657d6);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(31, 123, 246, 0.24);
    transition: transform 0.2s, box-shadow 0.2s;
}

.bqzvn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(31, 123, 246, 0.3);
}

.tzvqn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #dce7f8;
    border-radius: 12px;
    background: #ffffff;
    color: #1f6ede;
    font-size: 20px;
    cursor: pointer;
}

.pzvqm {
    position: absolute;
    right: 20px;
    top: 76px;
    width: 220px;
    padding: 8px;
    display: none;
    flex-direction: column;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 22px 48px rgba(18, 39, 92, 0.16);
    border: 1px solid #eaf1fb;
}

.pzvqm.qopn {
    display: flex;
}

.pzvqm a {
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 14px;
    color: #4d628a;
}

.pzvqm a:hover {
    background: #f2f7ff;
    color: #1f6ede;
}

/* Hero */
.hqvzn {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background:
        radial-gradient(620px 300px at 88% 6%, rgba(47, 123, 255, 0.16), transparent 68%),
        radial-gradient(520px 280px at 4% 96%, rgba(139, 92, 246, 0.1), transparent 62%),
        linear-gradient(180deg, #eef4ff, #f4f7fb);
    overflow: hidden;
}

.mqvzt {
    max-width: 1200px;
    margin: 0 auto;
    padding: 76px 20px 88px;
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    align-items: center;
    gap: 52px;
}

.zqvbn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe7fa;
    font-size: 13px;
    color: #2f6fd0;
}

.zqvbn i {
    font-size: 15px;
}

.mqvzt h1 {
    margin-top: 20px;
    font-size: 52px;
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #12275c;
}

.dqvzm {
    margin-top: 18px;
    max-width: 540px;
    font-size: 15px;
    line-height: 1.9;
    color: #5c6b8a;
}

.fqvzn {
    margin-top: 30px;
    display: flex;
}

.gqvzb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2f7bff, #1657d6);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 16px 30px rgba(31, 123, 246, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.gqvzb:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 36px rgba(31, 123, 246, 0.36);
}

.gqvzb i {
    font-size: 19px;
}

/* Hero 右侧封面叠层 */
.nqvzw {
    display: flex;
    justify-content: center;
}

.jqvzt {
    position: relative;
    width: 392px;
    height: 392px;
}

.qvmza,
.qvmzb,
.qvmzc {
    position: absolute;
    width: 208px;
    height: 292px;
    border-radius: 14px;
    border: 5px solid #ffffff;
    box-shadow: 0 22px 44px rgba(18, 39, 92, 0.18);
    overflow: hidden;
}

.qvmza {
    left: 4px;
    top: 54px;
    z-index: 1;
    transform: rotate(-12deg);
    background:
        radial-gradient(70px 70px at 32% 24%, rgba(255, 255, 255, 0.72), transparent 70%),
        linear-gradient(155deg, #bfe0ff, #8fb9f5);
}

.qvmzb {
    left: 92px;
    top: 16px;
    z-index: 2;
    transform: rotate(-1deg);
    background:
        radial-gradient(70px 70px at 66% 28%, rgba(255, 255, 255, 0.75), transparent 70%),
        linear-gradient(155deg, #ffd9b8, #ffb583);
}

.qvmzc {
    left: 180px;
    top: 46px;
    z-index: 3;
    transform: rotate(10deg);
    background:
        radial-gradient(70px 70px at 42% 30%, rgba(255, 255, 255, 0.7), transparent 70%),
        linear-gradient(155deg, #d9d6ff, #b3aef7);
}

.qvmza::before,
.qvmzb::before,
.qvmzc::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, transparent 46%, rgba(255, 255, 255, 0.42));
}

.qvmza::after,
.qvmzb::after,
.qvmzc::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 42px;
    bottom: 46px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 14px 0 rgba(255, 255, 255, 0.38);
}

.pqvzn {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 600;
    color: #2b4a78;
}

.rqvzm {
    position: absolute;
    left: 0;
    bottom: 6px;
    z-index: 6;
    width: 302px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(18, 39, 92, 0.2);
    animation: hqzvb 4.6s ease-in-out infinite;
}

.rqvzm > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #eaf2ff;
    color: #2f7bff;
    font-size: 20px;
    flex-shrink: 0;
}

.sqvzn {
    flex: 1;
}

.sqvzn p {
    font-size: 14px;
    font-weight: 700;
    color: #12275c;
}

.sqvzn span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #8a9ab7;
}

.rqvzm b {
    font-size: 15px;
    font-weight: 800;
    color: #2f7bff;
}

.uqvzn {
    position: absolute;
    right: -4px;
    top: 4px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    border-radius: 999px;
    background: #ffffff;
    font-size: 12.5px;
    font-weight: 600;
    color: #1f9d6d;
    box-shadow: 0 14px 30px rgba(18, 39, 92, 0.14);
}

.uqvzn i {
    font-size: 16px;
}

/* 模块标题 */
.mqwzb {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #12275c;
}

/* 产品展示 */
.axqzn {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.bxqzn {
    position: relative;
    padding: 10px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(18, 39, 92, 0.07);
    transition: transform 0.25s, box-shadow 0.25s;
}

.bxqzn:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 38px rgba(18, 39, 92, 0.12);
}

.bxqzn img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.bxqzn figcaption {
    position: absolute;
    left: 20px;
    bottom: 20px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    font-size: 12px;
    font-weight: 600;
    color: #1f6ede;
}

/* 优势亮点 */
.cxqzn {
    margin-top: 36px;
    padding: 10px 28px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(18, 39, 92, 0.06);
}

.dxqzn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 6px;
    border-bottom: 1px dashed #e7effb;
    border-radius: 12px;
    transition: background 0.25s, padding 0.25s;
}

.dxqzn:last-child {
    border-bottom: none;
}

.dxqzn:hover {
    padding-left: 18px;
    background: rgba(47, 123, 255, 0.045);
}

.exqzn {
    width: 34px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #b9cdf0;
}

.fxqzn {
    flex: 1;
}

.gxqzn {
    font-size: 16px;
    font-weight: 700;
    color: #12275c;
}

.hxqzn {
    margin-top: 5px;
    font-size: 13.5px;
    line-height: 1.8;
    color: #6a7b9c;
}

.dxqzn > i {
    font-size: 21px;
    color: #2f7bff;
    opacity: 0.5;
}

/* 下载中心 */
.nxqzn {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.oxqzn {
    position: relative;
    overflow: hidden;
    padding: 0 22px 22px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e6eefb;
    border-radius: 18px;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.oxqzn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 66px;
    background: linear-gradient(135deg, #e9f2ff, #f7faff);
}

.oxqzn:hover {
    transform: translateY(-5px);
    border-color: #cfe1fb;
    box-shadow: 0 18px 34px rgba(18, 39, 92, 0.1);
}

.pxqzn {
    position: relative;
    z-index: 2;
    width: 66px;
    height: 66px;
    margin: 22px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(31, 123, 246, 0.18);
}

.pxqzn img {
    width: 46px;
    height: 46px;
    border-radius: 12px;
}

.qxqzn {
    margin-top: 15px;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: #12275c;
}

.rxqzn {
    margin-top: 6px;
    font-size: 12.5px;
    color: #8494b1;
}

.sxqzn {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2f7bff, #1657d6);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    transition: opacity 0.2s;
}

.sxqzn:hover {
    opacity: 0.9;
}

.sxqzn i {
    font-size: 16px;
}

/* 使用流程 */
.ixqzn {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.jxqzn {
    position: relative;
    overflow: hidden;
    padding: 28px 26px 26px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(18, 39, 92, 0.06);
}

.jxqzn::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -34px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 123, 255, 0.08), transparent 68%);
}

.kxqzn {
    position: absolute;
    right: 20px;
    top: 14px;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #edf3fe;
}

.jxqzn > i {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #eef4ff;
    color: #2f7bff;
    font-size: 22px;
}

.lxqzn {
    position: relative;
    z-index: 2;
    margin-top: 15px;
    font-size: 16.5px;
    font-weight: 700;
    color: #12275c;
}

.mxqzn {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.8;
    color: #6a7b9c;
}

/* 常见问题 */
.txqzn {
    margin-top: 36px;
    padding: 4px 28px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(18, 39, 92, 0.06);
}

.uxqzn {
    border-bottom: 1px solid #eef3fb;
}

.uxqzn:last-child {
    border-bottom: none;
}

.vxqzn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 0;
    font-size: 15px;
    font-weight: 600;
    color: #12275c;
    cursor: pointer;
}

.vxqzn i {
    font-size: 18px;
    color: #8b9cba;
    transition: transform 0.25s, color 0.25s;
    flex-shrink: 0;
}

.uxqzn.qopn .vxqzn i {
    transform: rotate(45deg);
    color: #2f7bff;
}

.wxqzn {
    display: none;
    padding: 0 0 20px;
    font-size: 13.5px;
    line-height: 1.85;
    color: #6a7b9c;
}

.uxqzn.qopn .wxqzn {
    display: block;
}

/* 产品资讯 */
.xxqzn {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.yxqzn {
    padding: 22px 24px;
    background: #f6faff;
    border: 1px solid #e8f0fc;
    border-radius: 16px;
}

.zxqzn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #8a9ab7;
}

.axqwb {
    padding: 3px 11px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #d9e7fb;
    font-size: 11.5px;
    color: #2f7bff;
}

.zxqzn i {
    font-size: 13px;
}

.zxqzn b {
    margin-left: auto;
    font-weight: 400;
}

.bxqwb {
    margin-top: 12px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.5;
    color: #12275c;
}

.cxqwb {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.8;
    color: #6a7b9c;
}

/* 用户评价 */
.dxqwb {
    margin-top: 36px;
    columns: 3;
    column-gap: 16px;
}

.exqwb {
    break-inside: avoid;
    margin-bottom: 16px;
    padding: 20px 20px 16px;
    background: #ffffff;
    border: 1px solid #eaf1fb;
    border-radius: 16px;
}

.fxqwb {
    display: flex;
    align-items: center;
    gap: 9px;
}

.gxqwb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7ea9f0, #3b6cc4);
    color: #ffffff;
    font-size: 13px;
    flex-shrink: 0;
}

.fxqwb p {
    font-size: 13px;
    font-weight: 600;
    color: #12275c;
}

.hxqwb {
    margin-left: auto;
    display: inline-flex;
    gap: 1px;
    font-size: 12px;
    color: #ffb02e;
}

.ixqwb {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.85;
    color: #4a5b7d;
}

.jxqwb {
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px dashed #eef3fb;
    font-size: 11.5px;
    color: #98a6c1;
}

/* 页脚 */
.nxqwb {
    margin-top: 84px;
    padding: 44px 20px 28px;
    background: #f8fbff;
    border-top: 1px solid #e4edfb;
}

.oxqwb {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.pxqwb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
}

.pxqwb a {
    font-size: 14px;
    color: #5a6f92;
    transition: color 0.2s;
}

.pxqwb a:hover {
    color: #1f6ede;
}

.oxqwb .bqzvn {
    padding: 10px 26px;
    font-size: 13.5px;
}

.qxqwb {
    width: 100%;
    padding-top: 20px;
    border-top: 1px solid #e8effb;
    text-align: center;
    font-size: 12.5px;
    color: #8a9ab7;
}

@keyframes hqzvb {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* 移动端 */
@media (max-width: 767px) {
    .mqztn {
        height: 62px;
        padding: 0 16px;
        gap: 12px;
    }

    .rqvnb img {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .kvzqn {
        font-size: 16px;
    }

    .wqzvt {
        display: none;
    }

    .tzvqn {
        display: inline-flex;
    }

    .bqzvn {
        padding: 9px 16px;
        font-size: 13px;
    }

    .pzvqm {
        right: 16px;
        top: 70px;
        width: calc(100% - 32px);
    }

    .mqvzt {
        grid-template-columns: 1fr;
        padding: 40px 16px 52px;
        gap: 40px;
    }

    .mqvzt h1 {
        font-size: 34px;
        letter-spacing: 1px;
    }

    .dqvzm {
        font-size: 14px;
        line-height: 1.85;
    }

    .fqvzn {
        margin-top: 26px;
    }

    .gqvzb {
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
    }

    .jqvzt {
        width: 330px;
        height: 336px;
        transform: scale(0.96);
    }

    .qvmza,
    .qvmzb,
    .qvmzc {
        width: 176px;
        height: 246px;
        border-width: 4px;
    }

    .qvmza {
        left: 0;
        top: 46px;
    }

    .qvmzb {
        left: 78px;
        top: 12px;
    }

    .qvmzc {
        left: 152px;
        top: 40px;
    }

    .rqvzm {
        width: 258px;
        padding: 12px 14px;
    }

    .uqvzn {
        right: 0;
        top: -6px;
        padding: 8px 13px;
        font-size: 12px;
    }

    section {
        padding: 56px 16px 0;
    }

    .mqwzb {
        font-size: 23px;
    }

    .axqzn {
        margin-top: 26px;
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .bxqzn {
        flex: 0 0 76%;
        scroll-snap-align: start;
    }

    .cxqzn {
        margin-top: 26px;
        padding: 6px 18px;
    }

    .dxqzn {
        align-items: flex-start;
        gap: 12px;
        padding: 16px 0;
    }

    .dxqzn:hover {
        padding-left: 0;
        background: transparent;
    }

    .exqzn {
        width: 26px;
        font-size: 14px;
    }

    .gxqzn {
        font-size: 15px;
    }

    .hxqzn {
        font-size: 13px;
    }

    .dxqzn > i {
        display: none;
    }

    .nxqzn {
        margin-top: 26px;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ixqzn {
        margin-top: 26px;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .txqzn {
        margin-top: 26px;
        padding: 2px 18px;
    }

    .vxqzn {
        padding: 17px 0;
        font-size: 14px;
        gap: 14px;
    }

    .wxqzn {
        font-size: 13px;
    }

    .xxqzn {
        margin-top: 26px;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .yxqzn {
        padding: 18px 18px;
    }

    .zxqzn {
        flex-wrap: wrap;
    }

    .bxqwb {
        font-size: 15px;
    }

    .dxqwb {
        margin-top: 26px;
        columns: 1;
    }

    .nxqwb {
        margin-top: 56px;
        padding: 34px 16px 22px;
    }

    .oxqwb {
        gap: 16px;
    }

    .pxqwb {
        gap: 10px 16px;
    }

    .pxqwb a {
        font-size: 13px;
    }

    .qxqwb {
        padding-top: 16px;
        font-size: 12px;
    }
}

/* 移动端隐藏 Hero 右侧视觉 */
@media (max-width: 767px) {
    .nqvzw {
        display: none;
    }
}

/* 移动端 Hero 加大上下留白，产品展示在首屏露出一点 */
@media (max-width: 767px) {
    .hqvzn {
        padding: 60px 0;
    }
}