.hero {
    text-align: center;
    padding: 80px 24px 40px;
    position: relative;
    overflow: hidden
}

.hero::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 34px;
    width: min(680px, calc(100% - 36px));
    height: 190px;
    border-radius: 36px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, var(--hero-warm), transparent 66%);
    pointer-events: none;
    z-index: -1
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 7px 16px;
    border-radius: 50px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    font-size: .82rem;
    font-weight: 600;
    color: var(--head);
    margin-bottom: 24px
}

.badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent)
}

.hero h1 {
    font-size: clamp(2rem, 6vw, 3.4rem);
    font-weight: 850;
    letter-spacing: -.5px;
    line-height: 1.15;
    color: var(--head)
}
.hero h1 span {
    background: linear-gradient(100deg, var(--accent), var(--hot), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.hero p {
    color: var(--dim);
    margin-top: 16px;
    font-size: 1.1rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto
}

.wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 30px 24px 80px
}

section {
    margin-bottom: 120px;
    scroll-margin-top: 76px
}

.sec-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px
}

.sec-head .num {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
    box-shadow: 0 8px 20px var(--ring)
}

.sec-head .t h2 {
    font-size: 1.5rem;
    font-weight: 780;
    color: var(--head);
    line-height: 1.2
}

.sec-head .t p {
    color: var(--dim);
    font-size: .9rem
}

.prebuy {
    position: relative;
    padding: 24px;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    box-shadow: var(--shadow);
    overflow: hidden
}

.prebuy::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2))
}

.prebuy-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px
}

.prebuy-kicker {
    color: var(--accent);
    font-size: .96rem;
    font-weight: 800;
    margin-bottom: 4px
}

.prebuy-head h3 {
    color: var(--head);
    font-size: 1.24rem;
    line-height: 1.25;
    font-weight: 850
}

.prebuy-head>span {
    flex: none;
    color: var(--dim);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.5;
    padding-top: 4px
}

.prebuy-summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 7%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    margin-bottom: 10px
}

.prebuy-days {
    color: var(--head);
    font-size: clamp(1.8rem, 4.5vw, 2.25rem);
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.prebuy-summary p {
    color: var(--text);
    font-size: .94rem;
    line-height: 1.65
}

.prebuy-list {
    list-style: none
}

.prebuy-list li {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 8px;
    padding: 16px 2px;
    border-bottom: 1px solid var(--line)
}

.prebuy-list li:last-child {
    border-bottom: 0
}

.prebuy-list li>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-size: .96rem;
    font-weight: 850;
    letter-spacing: 0
}

.prebuy-list strong {
    display: block;
    color: var(--head);
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 800;
    margin-bottom: 3px
}

.prebuy-list p {
    color: var(--dim);
    font-size: .92rem;
    line-height: 1.6
}

.prebuy mark {
    padding: 1px 5px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--head);
    font-weight: 800
}

.prebuy-foot {
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--head);
    font-size: .92rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--ok) 8%, var(--card));
    border: 1px solid color-mix(in srgb, var(--ok) 22%, transparent)
}

.dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 16px
}

.dl-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px 22px;
    text-align: center;
    transition: .28s;
    box-shadow: var(--shadow)
}

.dl-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg)
}

.dl-card .di {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 15px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--card)), color-mix(in srgb, var(--accent-2) 18%, var(--card)));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem
}

.dl-card h4 {
    font-size: 1.05rem;
    font-weight: 750;
    color: var(--head)
}

.dl-card .meta {
    font-size: .8rem;
    color: var(--dim);
    margin: 4px 0 16px
}

.renew-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px
}

.renew-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 45px 22px 26px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: .28s;
    display: flex;
    flex-direction: column;
    align-items: center
}

.renew-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg)
}

.renew-card h4 {
    font-size: 1.08rem;
    font-weight: 750;
    color: var(--head);
    margin-top: 6px
}

.renew-card p {
    color: var(--dim);
    font-size: .88rem;
    margin-top: 3px;
    margin-bottom: 16px
}

.qr-box {
    width: 160px;
    height: 160px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--card-2);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px
}

.qr-box img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.qr-ph {
    display: none;
    font-size: .82rem;
    color: var(--dim);
    padding: 10px;
    line-height: 1.5
}

.qr-box.noimg {
    border-style: dashed
}

.qr-box.noimg .qr-ph {
    display: block
}

.shop-name {
    color: var(--accent) !important;
    font-weight: 750;
    font-size: 1rem !important;
    margin-top: 6px !important;
    margin-bottom: 2px !important
}

.shop-ic {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--card)), color-mix(in srgb, var(--accent-2) 20%, var(--card)));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 6px
}

.renew-card.shop {
    justify-content: center
}

.renew-card.xianyu .shop-ic {
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, var(--xianyu), var(--accent))
}

.renew-card.shop .btn {
    margin-top: auto
}

.renew-card.xianyu .btn {
    margin-top: auto
}

.timeline {
    position: relative;
    padding-left: 8px
}

.tl {
    position: relative;
    padding: 0 0 26px 56px
}

.tl:last-child {
    padding-bottom: 0
}

.tl::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 38px;
    bottom: -4px;
    width: 2px;
    background: linear-gradient(var(--accent), var(--accent-2));
    opacity: .3
}

.tl:last-child::before {
    display: none
}

.tl .dot {
    position: absolute;
    left: 8px;
    top: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .9rem;
    box-shadow: 0 6px 16px var(--ring)
}

.tl h4 {
    font-size: 1.05rem;
    font-weight: 750;
    color: var(--head);
    margin-bottom: 2px
}

.tl p {
    color: var(--dim);
    font-size: .92rem
}

.ilink {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
    transition: .2s
}

.ilink:hover {
    border-bottom-color: var(--accent)
}

.tl p b {
    color: var(--head)
}

.note {
    display: flex;
    gap: 12px;
    padding: 15px 18px;
    border-radius: 14px;
    margin-top: 18px;
    align-items: center;
    background: color-mix(in srgb, var(--ok) 11%, var(--card));
    border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent)
}

.note .ic {
    flex: none;
    font-size: 1.1rem
}

.note b {
    color: var(--head)
}

.note span {
    font-size: .93rem;
    color: var(--text)
}

.faq-item {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: .25s
}

.faq-item.open {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent)
}

.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 17px 20px;
    cursor: pointer;
    font-weight: 680;
    color: var(--head);
    user-select: none
}

.faq-q .arrow {
    transition: transform .3s;
    color: var(--accent);
    font-size: 1.3rem;
    flex: none;
    line-height: 1
}

.faq-item.open .faq-q .arrow {
    transform: rotate(45deg)
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s, padding .35s;
    padding: 0 20px;
    color: var(--dim);
    font-size: .93rem
}

.faq-item.open .faq-a {
    max-height: 240px;
    padding: 0 20px 18px
}

.use-page main {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px 84px
}

.install-promise {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px 62px;
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 16%, var(--card)), color-mix(in srgb, var(--ok) 6%, var(--card)));
    border: 1px solid color-mix(in srgb, var(--ok) 36%, var(--line));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ok) 12%, transparent)
}

.promise-icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--ok);
    font-weight: 900;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ok) 30%, transparent)
}

.install-promise strong {
    display: block;
    color: var(--head);
    font-size: 1.06rem;
    font-weight: 900;
    line-height: 1.3
}

.install-promise div span {
    color: var(--dim);
    font-size: .92rem;
    line-height: 1.55
}

.version-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    font-size: .72rem;
    font-style: normal;
    font-weight: 850;
    line-height: 1.2;
    vertical-align: middle
}

.step-flow {
    position: relative;
    padding-left: 18px
}

.step-flow::before {
    content: "";
    position: absolute;
    left: 33px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: color-mix(in srgb, var(--accent) 25%, transparent)
}

.use-step {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 18px;
    padding: 0 0 34px
}

.use-step:last-child {
    padding-bottom: 0
}

.step-index {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 850;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 8px 20px var(--ring)
}

.step-meta {
    display: inline-flex;
    margin-bottom: 6px;
    color: var(--accent);
    font-size: .78rem;
    font-weight: 850
}

.use-step h3 {
    color: var(--head);
    font-size: 1.22rem;
    line-height: 1.3;
    margin-bottom: 6px
}

.use-step p {
    color: var(--dim);
    font-size: .94rem;
    line-height: 1.75
}

.tip-line {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--text);
    font-size: .9rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent)
}

.step-image {
    display: block;
    width: min(100%, 520px);
    height: auto;
    margin-top: 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

@media (max-width: 640px) {
    .hero {
        padding: 58px 18px 30px
    }

    .wrap {
        padding: 24px 16px 64px
    }

    .prebuy {
        padding: 18px
    }

    .prebuy-head {
        display: block
    }

    .prebuy-head>span {
        display: block;
        margin-top: 6px;
        padding-top: 0
    }

    .prebuy-head h3 {
        font-size: 1.08rem
    }

    .prebuy-summary {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .prebuy-days {
        font-size: 2.18rem
    }

    .prebuy-list li {
        grid-template-columns: 30px 1fr;
        gap: 8px;
        padding: 14px 0
    }

    .prebuy-foot {
        text-align: left
    }

    .use-page main {
        padding: 0 16px 64px
    }

    .install-promise {
        display: block;
        margin-left: 0
    }

    .install-promise div span {
        display: block;
        margin-top: 4px
    }

    .step-flow {
        padding-left: 0
    }

    .step-flow::before {
        left: 16px
    }

    .use-step {
        gap: 14px
    }

    .step-image {
        width: 100%
    }
}