* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: #1e211b;
    background: #f5f2e9;
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

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

.zafik {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(245, 242, 233, .88);
    backdrop-filter: blur(16px);
    box-shadow: 0 16px 32px -30px rgba(34, 39, 26, .65);
}

.orvex {
    width: min(1200px, calc(100% - 48px));
    height: 78px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.murel {
    font-weight: 800;
    letter-spacing: -.04em;
    font-size: 20px;
}

.qevon {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    color: #f5f2e9;
    background: #1e211b;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}
:where(.qevon) > * {
    flex: 1 1 100%;
    min-width: 0;
}


.qevon i { font-size: 22px; }
.qevon:hover { background: #8bbd29; color: #1e211b; transform: rotate(12deg); }

.sorex {
    position: absolute;
    top: 68px;
    right: 0;
    width: 250px;
    padding: 12px;
    border-radius: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    background: #fffdf8;
    box-shadow: 0 24px 44px -30px rgba(26, 29, 20, .65);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(.97);
    transition: opacity .25s ease, transform .25s ease;
}
:where(.sorex) > * {
    flex: 1 1 100%;
    min-width: 0;
}


.sorex a {
    padding: 10px 13px;
    border-radius: 13px;
    color: #6d7364;
    transition: color .2s ease, background .2s ease, padding .2s ease;
}

.sorex a:hover { color: #1e211b; background: #eff7d9; padding-left: 18px; }
.zafik.menuopen .sorex { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

.qorix {
    padding: 30px 0 72px;
}

.qorin {
    width: min(1200px, calc(100% - 48px));
    min-height: 620px;
    margin: 0 auto;
    padding: 74px 78px 62px;
    display: flex;
    flex-wrap: wrap;
    gap: 70px;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    background: #dff2aa;
}
:where(.qorin) > *:nth-child(1) {
    flex: 1.02 1 calc((100% - 70px) * 1.02 / 2);
    min-width: 0
}

:where(.qorin) > *:nth-child(2) {
    flex: 0.98 1 calc((100% - 70px) * 0.98 / 2);
    min-width: 370px
}


.qorin::before,
.qorin::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.qorin::before {
    width: 400px;
    height: 400px;
    right: -150px;
    top: -170px;
    background: rgba(255, 255, 255, .32);
}

.qorin::after {
    width: 220px;
    height: 220px;
    left: 45%;
    bottom: -145px;
    background: rgba(151, 194, 37, .28);
}

.qtext, .qvisu { position: relative; z-index: 1; }
.qlabel, .bixor > span { color: #66733d; font-size: 11px; font-weight: 800; letter-spacing: .16em; }

.qtext h1 {
    max-width: 600px;
    margin: 18px 0 13px;
    color: #1e211b;
    font-size: 58px;
    line-height: 1.08;
    letter-spacing: -.06em;
}

.qcopy {
    max-width: 560px;
    margin: 0;
    color: #5e6652;
    font-size: 17px;
}

.qchip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 27px;
}

.qchip span {
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    color: #596440;
    background: rgba(255, 255, 255, .56);
    font-size: 13px;
}

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

.furen, .vexal {
    width: fit-content;
    min-width: 205px;
    padding: 14px 25px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    border-radius: 999px;
    color: #f5f2e9;
    background: #1e211b;
    font-weight: 800;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.furen:hover, .vexal:hover { background: #4c641c; transform: translateY(-3px); box-shadow: 0 16px 30px -24px rgba(30, 33, 27, .8); }

.lupin {
    margin-top: 15px;
    width: fit-content;
    max-width: 100%;
    min-height: 40px;
    padding: 7px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .62);
    color: #5d6843;
    white-space: nowrap;
    font-size: 12px;
}

.lupin i { color: #e68a28; font-size: 17px; }
.lupin b { color: #35411e; }
.lupin em { width: 1px; height: 16px; background: rgba(30, 33, 27, .12); }

.qstat {
    margin-top: 32px;
    display: flex;
    gap: 30px;
}

.qstat div {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
}
:where(.qstat div) > * {
    flex: 1 1 100%;
    min-width: 0;
}

.qstat b { font-size: 24px; letter-spacing: -.05em; }
.qstat span { color: #6b7557; font-size: 12px; }

.qvisu {
    min-height: 430px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
:where(.qvisu) > * {
    flex: 1 1 100%;
    min-width: 0;
}


.lpanel {
    width: min(100%, 440px);
    padding: 25px 26px 20px;
    border-radius: 28px;
    color: #f6f8ef;
    background: #20231c;
    box-shadow: 0 28px 55px -35px rgba(25, 29, 18, .85);
    transform: rotate(3deg);
}

.ledtop, .lfoot, .ledbalance span, .ledrows div { display: flex; align-items: center; justify-content: space-between; }
.ledtop { color: #a9b294; font-size: 12px; letter-spacing: .08em; }
.ledtop i { color: #c1f25b; font-size: 18px; }
.ledbalance {
    padding: 28px 0 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
:where(.ledbalance) > * {
    flex: 1 1 100%;
    min-width: 0;
}

.ledbalance small { color: #9ca590; font-size: 12px; }
.ledbalance strong { font-size: 33px; letter-spacing: -.05em; }
.ledbalance span { width: fit-content; gap: 4px; color: #c1f25b; font-size: 12px; }
.ledbars { height: 104px; padding: 13px 0 7px; display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid rgba(245, 242, 233, .08); }
.ledbars i { flex: 1; min-width: 7px; border-radius: 999px 999px 3px 3px; background: linear-gradient(180deg, #d2fb65, #82a52c); }
.ledrows {
    padding: 10px 0 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
:where(.ledrows) > * {
    flex: 1 1 100%;
    min-width: 0;
}

.lrows div { justify-content: flex-start; gap: 9px; }
.cspot {
    width: 25px;
    height: 25px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #1e211b;
    background: #f3a143;
    font-size: 14px;
    font-weight: 800;
}
:where(.cspot) > * {
    flex: 1 1 100%;
    min-width: 0;
}

.cspot.cblue { color: #f8fbff; background: #718cf4; }
.cspot.clime { background: #c6f160; }
.lrows b { margin-right: auto; font-size: 12px; font-weight: 600; }
.lrows strong { color: #c3f260; font-size: 12px; }
.lfoot { padding-top: 13px; color: #929d84; font-size: 11px; }
.lfoot i { margin-right: 3px; color: #c3f260; }
.flnote { position: absolute; padding: 11px 14px; display: flex; align-items: center; gap: 8px; border-radius: 16px; background: #fffdf8; box-shadow: 0 18px 35px -26px rgba(34, 39, 26, .8); font-size: 12px; }
.flnote i { color: #6d9423; font-size: 18px; }
.flnote span { color: #556049; }
.flnote b { color: #1e211b; font-size: 11px; }
.noto { top: 40px; left: -26px; transform: rotate(-5deg); }
.notu { right: -26px; bottom: 48px; transform: rotate(4deg); }

.mavik, .nelix, .tovra, .havoq, .jural, .savin, .wexan { width: min(1200px, calc(100% - 48px)); margin: 0 auto; padding: 76px 0; }
.bixor { text-align: center; margin: 0 auto 34px; }
.bixor > span { display: block; margin-bottom: 8px; }
.bixor > strong { display: block; font-size: 33px; letter-spacing: -.05em; }
.bixor > p { max-width: 600px; margin: 7px auto 0; color: #737969; }

.rulak {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
:where(.rulak) > * {
    flex: 1 1 calc((100% - 54px) / 4);
    min-width: 0;
}

.mcard { min-width: 0; padding: 13px; border-radius: 24px; background: #fffdf8; box-shadow: 0 18px 38px -34px rgba(30, 33, 27, .75); transition: transform .25s ease, box-shadow .25s ease; }
.mcard:hover { transform: translateY(-7px); box-shadow: 0 25px 42px -30px rgba(30, 33, 27, .65); }
.mshot { position: relative; border-radius: 18px; overflow: hidden; background: #f0eee8; }
.mshot img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; }
.mshot > span {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #1e211b;
    background: #dff2aa;
}
:where(.mshot > span) > * {
    flex: 1 1 100%;
    min-width: 0;
}

.mcopy { padding: 13px 5px 3px; }
.mcopy b { font-size: 16px; }
.mcopy p { margin: 3px 0 0; color: #7a8073; font-size: 13px; line-height: 1.6; }

.nelix { background: #1e211b; border-radius: 32px; color: #f5f2e9; padding-left: 58px; padding-right: 58px; }
.nelix .bixor > span { color: #b9df62; }
.nelix .bixor > p { color: #aeb5a2; }
.ngrid {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}
:where(.ngrid) > * {
    flex: 1 1 calc((100% - 26px) / 3);
    min-width: 0;
}

.ngrid article { min-height: 170px; padding: 23px 22px; border-radius: 20px; background: rgba(255, 255, 255, .07); transition: transform .25s ease, background .25s ease; }
.ngrid article:hover { transform: translateY(-5px); background: rgba(213, 247, 117, .14); }
.ngrid article > i { color: #c7f267; font-size: 24px; }
.ngrid article b { display: block; margin-top: 12px; font-size: 17px; }
.ngrid article p { margin: 5px 0 0; color: #adb5a2; font-size: 13px; line-height: 1.7; }

.tgrid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
:where(.tgrid) > * {
    flex: 1 1 calc((100% - 32px) / 3);
    min-width: 0;
}

.tcard { min-height: 198px; padding: 23px 23px 18px; display: flex; flex-direction: column; align-items: flex-start; border-radius: 23px; background: #e8f6c8; cursor: pointer; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.tcard:hover { transform: translateY(-6px) rotate(-1deg); background: #d3ef92; box-shadow: 0 25px 40px -31px rgba(85, 108, 28, .75); }
.tcard > i {
    width: 40px;
    height: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #eff8dc;
    background: #1e211b;
    font-size: 20px;
}
:where(.tcard > i) > * {
    flex: 1 1 100%;
    min-width: 0;
}

.tcard small { margin-top: 14px; color: #74864b; font-size: 10px; letter-spacing: .17em; font-weight: 800; }
.tcard b { margin-top: 1px; font-size: 18px; }
.tcard p { margin: 2px 0 0; color: #6c7756; font-size: 13px; }
.tcard > span { margin-top: auto; color: #4d641e; font-size: 13px; font-weight: 800; }

.havoq { padding-bottom: 90px; }
.hrail {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    position: relative;
}
:where(.hrail) > * {
    flex: 1 1 calc((100% - 54px) / 4);
    min-width: 0;
}

.hrail::before { content: ""; position: absolute; top: 31px; left: 11%; right: 11%; height: 2px; background: #d4dfbd; }
.hrail article { position: relative; z-index: 1; padding: 0 15px; text-align: center; }
.hrail article > b {
    width: 62px;
    height: 62px;
    margin: 0 auto 17px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #1e211b;
    background: #c9f26c;
    font-size: 18px;
    box-shadow: 0 15px 30px -24px rgba(69, 88, 29, .75);
}
:where(.hrail article > b) > * {
    flex: 1 1 100%;
    min-width: 0;
}

.hrail article > i { position: absolute; top: 20px; left: calc(50% + 22px); color: #536c1e; font-size: 18px; }
.hrail article strong { display: block; font-size: 17px; }
.hrail article p { margin: 5px 0 0; color: #787e72; font-size: 13px; line-height: 1.65; }

.jural { padding-top: 34px; }
.jlist {
    max-width: 790px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}
:where(.jlist) > * {
    flex: 1 1 100%;
    min-width: 0;
}

.jitem { border-radius: 18px; overflow: hidden; background: #fffdf8; box-shadow: 0 15px 32px -32px rgba(30, 33, 27, .7); }
.jurq {
    width: 100%;
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    border: 0;
    color: #1e211b;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
:where(.jurq) > *:nth-child(1) {
    flex: 0 0 42px
}

:where(.jurq) > *:nth-child(2) {
    flex: 1 1 0;
    min-width: 0
}

:where(.jurq) > *:nth-child(3) {
    flex: 0 0 24px
}

.jurq > span { color: #7c932f; font-size: 12px; font-weight: 800; }
.jurq b { font-size: 15px; }
.jurq i { color: #83906c; font-size: 18px; transition: transform .25s ease; }
.jura { max-height: 0; padding: 0 56px; overflow: hidden; color: #73796b; font-size: 13px; transition: max-height .3s ease, padding .3s ease; }
.jopen .jurq i { transform: rotate(45deg); }
.jopen .jura { max-height: 130px; padding: 0 56px 18px; }

.savin { padding-top: 70px; }
.sgrid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
:where(.sgrid) > * {
    flex: 1 1 calc((100% - 15px) / 2);
    min-width: 0;
}

.sgrid article { min-height: 192px; padding: 22px 24px; display: flex; flex-direction: column; border-radius: 21px; background: #fffdf8; box-shadow: 0 18px 34px -32px rgba(30, 33, 27, .7); }
.smeta { display: flex; justify-content: space-between; align-items: center; color: #889173; font-size: 11px; letter-spacing: .08em; }
.smeta span { color: #5d751f; font-weight: 800; }
.smeta em { font-style: normal; letter-spacing: 0; }
.sgrid article b { margin-top: 19px; font-size: 17px; }
.sgrid article p { margin: 6px 0 0; color: #737b6b; font-size: 13px; line-height: 1.75; }

.wexan { padding-top: 72px; padding-bottom: 100px; }
.wgrid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: stretch;
}
:where(.wgrid) > * {
    flex: 1 1 calc((100% - 30px) / 3);
    min-width: 0;
}

.wgrid article { min-height: 250px; padding: 22px 23px 20px; display: flex; flex-direction: column; border-radius: 21px; background: #dfeebd; }
.wgrid article:nth-child(2n) { background: #fffdf8; }
.wgrid article > i { color: #87a42d; font-size: 24px; }
.wgrid article p { margin: 12px 0 20px; color: #515a47; font-size: 14px; line-height: 1.8; }
.wgrid article footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; color: #798270; font-size: 11px; }
.wgrid article footer b { color: #1e211b; font-size: 13px; }

.kevox { padding: 50px 0 26px; color: #dce7c8; background: #1e211b; }
.kewrap, .kenav, .kecopy { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
.kewrap { display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.kewrap .murel { color: #f3f8e8; }
.kewrap p { margin: 7px 0 0; color: #9faa93; font-size: 13px; }
.vexal { min-width: 150px; color: #1e211b; background: #c4ef66; }
.vexal:hover { color: #f5f2e9; background: #83a934; }
.kenav { margin-top: 35px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 22px; border-top: 1px solid rgba(245, 242, 233, .08); color: #aeb8a2; font-size: 13px; }
.kenav a:hover { color: #cbf36f; }
.kecopy { margin-top: 20px; color: #77826e; font-size: 11px; }

@media (max-width: 767px) {
    .orvex, .qorin, .mavik, .nelix, .tovra, .havoq, .jural, .savin, .wexan, .kewrap, .kenav, .kecopy { width: calc(100% - 28px); }
    .orvex { height: 68px; }
    .sorex { top: 61px; right: 0; width: min(250px, calc(100vw - 42px)); }
    .qorix { padding: 14px 0 42px; }
    .qorin { padding: 42px 22px 34px; min-height: auto; display: flex; flex-direction: column; gap: 42px; align-items: stretch; border-radius: 27px;
    flex-wrap: nowrap;
    }
    .qtext h1 { margin-top: 14px; font-size: 37px; }
    .qcopy { font-size: 15px; }
    .qchip { flex-wrap: nowrap; gap: 4px; margin: 19px 0 22px; }
    .qchip span { flex: 1 1 0; min-width: 0; justify-content: center; padding: 6px 3px; gap: 3px; font-size: 11px; white-space: nowrap; }
    .qchip i { font-size: 14px; }
    .furen { width: 100%; }
    .lupin { width: 100%; gap: 7px; padding: 7px 9px; font-size: 10px; justify-content: center; }
    .qstat { justify-content: space-between; gap: 8px; margin-top: 26px; }
    .qstat b { font-size: 20px; }
    .qstat span { font-size: 11px; }
    .qvisu { min-height: 355px; }
    .lpanel { width: 100%; padding: 20px 18px 16px; transform: rotate(2deg); }
    .ledbalance strong { font-size: 28px; }
    .flnote { padding: 9px 10px; }
    .noto { top: 16px; left: -7px; }
    .notu { right: -7px; bottom: 22px; }
    .mavik, .nelix, .tovra, .havoq, .jural, .savin, .wexan { padding: 54px 0; }
    .bixor { margin-bottom: 25px; }
    .bixor > strong { font-size: 26px; }
    .bixor > p { font-size: 14px; }
    .rulak { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 7px; scrollbar-width: none;
    flex-wrap: nowrap;
    }
    .rulak::-webkit-scrollbar { display: none; }
    .mcard { flex: 0 0 76%; scroll-snap-align: start; }
    .nelix { padding-left: 18px; padding-right: 18px; border-radius: 27px; }
    .ngrid {
    gap: 10px;
    }
    :where(.ngrid) > * {
        flex: 1 1 100%;
    }

    .ngrid article { min-height: auto; padding: 18px; }
    .tgrid {
    gap: 11px;
    }
    :where(.tgrid) > * {
        flex: 1 1 100%;
    }

    .tcard { min-height: 154px; padding: 18px; }
    .havoq { padding-bottom: 61px; }
    .hrail {
    gap: 24px;
    }
    :where(.hrail) > * {
        flex: 1 1 100%;
    }

    .hrail::before { top: 32px; bottom: 32px; left: calc(50% - 1px); width: 2px; height: auto; right: auto; }
    .hrail article { padding: 0 34px; }
    .hrail article > i { top: 20px; left: calc(50% + 23px); transform: rotate(90deg); }
    .jural { padding-top: 53px; }
    .jurq {
    padding: 15px 14px;
    gap: 8px;
    }
    :where(.jurq) > *:nth-child(1) {
        flex: 0 0 33px;
    }

    :where(.jurq) > *:nth-child(2) {
        flex: 1 1 calc((100% - 16px) * 1 / 1);
        min-width: 0;
    }

    :where(.jurq) > *:nth-child(3) {
        flex: 0 0 22px;
    }

    .jurq b { font-size: 14px; }
    .jura { padding: 0 47px; font-size: 13px; }
    .jopen .jura { padding: 0 47px 15px; }
    .sgrid {
    gap: 11px;
    }
    :where(.sgrid) > * {
        flex: 1 1 100%;
    }

    .sgrid article { min-height: 174px; padding: 18px; }
    .wgrid {
    gap: 11px;
    }
    :where(.wgrid) > * {
        flex: 1 1 100%;
    }

    .wgrid article { min-height: auto; padding: 18px; }
    .kewrap { align-items: flex-start; flex-direction: column; }
    .vexal { width: 100%; }
    .kenav { gap: 12px 18px; }
}

/* desktop navigation / mobile dropdown */
.zafik .orvex { justify-content: space-between; }
.sorex { position: static; display: flex; flex-direction: row; align-items: center; gap: 22px; min-width: 0; margin-left: auto; padding: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font-size: 13px;
        flex-wrap: nowrap;
}
.sorex a { padding: 0; border-radius: 0; }
.qevon { display: none; margin-left: 24px; }
@media (max-width: 767px) {
    .qevon { display: flex; margin-left: auto;
    flex-wrap: nowrap;
    }
    .sorex { position: absolute; top: calc(100% + 8px); right: 0; display: none; flex-direction: column; align-items: stretch; gap: 2px; min-width: 190px; margin-left: 0; padding: 10px; border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 21px 40px -27px rgba(20,30,40,.7); color: inherit; font-size: 13px; }
    .zafik.menuopen .sorex { display: flex; }
    .sorex a { padding: 9px 12px; border-radius: 10px; }
}
/* explicit desktop nav fallback */
@media (min-width: 768px) {
    .zafik .orvex .sorex { position: static !important; display: flex !important; flex-direction: row !important; align-items: center; flex-wrap: nowrap; gap: 22px; width: max-content !important; max-width: none; margin-left: auto; padding: 0; background: transparent; box-shadow: none; opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
    .zafik .orvex .sorex a { flex: 0 0 auto; white-space: nowrap; }
    .zafik .orvex .qevon { display: none !important; }
}

/* CTA 字号与手型光标 */
.furen.dltom {
    font-size: 14px;
    cursor: pointer;
}