:root{--ink:#0c172b;--muted:#758096;--line:#e8edf3;--soft:#f6f8fb;--white:#fff;font-family:"Microsoft YaHei",Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff}.case-demo{overflow:hidden}.case-inner{width:min(100% - 30px,1180px);margin:0 auto}.case-hero{display:flex;min-height:500px;padding:106px 0 96px;background:#f8fafc;text-align:center;align-items:center}.case-hero__inner{width:min(100% - 30px,780px)}.case-hero h1{margin:19px 0 17px;font-family:Georgia,"Microsoft YaHei",serif;font-size:50px;font-weight:700;line-height:1.17;letter-spacing:-.055em}.case-hero p{max-width:620px;margin:0 auto;color:#627087;font-size:15px;line-height:1.95}.case-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:0}.case-tags span{padding:6px 14px;border:1px solid #d3dbe6;border-radius:30px;background:rgba(255,255,255,.66);color:#56637a;font-size:12px;line-height:1}.case-actions{display:flex;justify-content:center;gap:13px;margin-top:29px}.case-button{min-width:108px;padding:12px 22px;border:1px solid #d7dfe9;border-radius:7px;background:#fff;color:#536078;font-size:13px;line-height:1;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease}.case-button:hover{border-color:#aeb9c8;box-shadow:0 8px 18px rgba(23,41,68,.09);transform:translateY(-2px)}.case-button--primary{border-color:var(--ink);background:var(--ink);color:#fff;box-shadow:0 7px 15px rgba(12,23,43,.14)}.case-button--primary:hover{border-color:#162a49;background:#162a49;box-shadow:0 11px 22px rgba(12,23,43,.2)}.case-strip{padding:22px 0;background:#0c172b;color:#fff}.case-strip .case-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.case-strip article{display:flex;min-height:53px;padding:0 38px;align-items:center;gap:14px;border-left:1px solid rgba(209,222,239,.2)}.case-strip article:first-child{padding-left:0;border-left:0}.case-strip article:last-child{padding-right:0}.case-strip img{width:34px;max-height:34px;object-fit:contain;flex:0 0 34px}.case-strip h2{margin:0 0 5px;color:#fff;font-size:14px;font-weight:600;line-height:1}.case-strip p{margin:0;color:#c0cad8;font-size:12px;line-height:1.2}.case-section{padding:90px 0}.case-highlights,.case-screens,.case-related{background:var(--soft)}.case-heading{text-align:center;margin-bottom:35px}.case-heading h2{margin:0;font-size:25px;letter-spacing:-.05em}.case-heading p{margin:8px 0 0;color:#8390a3;font-size:11px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-grid article{min-height:188px;padding:27px 25px;border:1px solid #edf1f5;border-radius:10px;background:#fff;box-shadow:0 6px 18px rgba(15,31,55,.035);transition:transform .28s ease,box-shadow .28s ease}.feature-grid article:hover{box-shadow:0 12px 24px rgba(15,31,55,.085);transform:translateY(-5px)}.feature-icon{display:grid;width:48px;height:48px;place-items:center;border-radius:50%;background:#f5f8fc}.feature-icon img{width:27px;height:27px;object-fit:contain;transition:transform .28s ease}.feature-grid article:hover .feature-icon img{transform:scale(1.1)}.feature-grid h3{margin:18px 0 9px;color:#12213f;font-size:15px;font-weight:700}.feature-grid p{margin:0;color:#64748b;font-size:12px;line-height:1.8}.overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.overview-grid article{min-height:126px;padding:22px 15px;border:1px solid #e7ecf2;border-radius:8px;background:#fafbfd;text-align:center}.overview-grid i{margin:auto}.overview-grid h3{margin:12px 0 6px;font-size:13px}.overview-grid p{margin:0;color:#77849a;font-size:10px;line-height:1.6}.case-screens{padding-bottom:70px}.screen-tabs{display:flex;justify-content:center;gap:4px;margin:-13px 0 24px}.screen-tabs button{border:0;border-radius:14px;background:transparent;padding:6px 13px;color:#7e8a9c;font-size:11px}.screen-tabs .is-active{background:var(--ink);color:#fff}.screen-stage{position:relative;display:flex;justify-content:center;height:360px}.screen-stage img{position:relative;z-index:1;width:325px;height:315px;object-fit:cover;object-position:center;border-radius:18px;box-shadow:0 20px 36px rgba(20,33,61,.17)}.screen-shadow{position:absolute;bottom:10px;width:240px;height:24px;border-radius:50%;background:rgba(20,33,61,.13);filter:blur(12px)}.screen-dots{text-align:center}.screen-dots>*{display:inline-block;width:5px;height:5px;margin:0 3px;border-radius:50%;background:#c8d0dc}.screen-dots b{background:#10213b}.delivery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.delivery-grid article{display:flex;min-height:93px;flex-direction:column;align-items:center;justify-content:center;gap:13px;border:1px solid #e3e9f0;border-radius:7px;background:#fff}.delivery-grid i{color:#54657c;font-size:17px}.delivery-grid span{font-size:12px}.case-faq{background:#fff}.faq-list{border-top:1px solid #e8edf3}.faq-list article{border-bottom:1px solid #e8edf3}.faq-list button{display:flex;width:100%;padding:17px 0;border:0;background:transparent;align-items:center;justify-content:space-between;color:var(--ink);font-weight:600;text-align:left;font-size:12px}.faq-list i{font-size:13px}.faq-list p{display:none;margin:0;padding:0 20px 17px 0;color:#768399;font-size:11px;line-height:1.8}.faq-list .is-open{margin-bottom:8px;padding:0 14px;border:1px solid #e5ebf2;border-radius:7px;background:#f8fafc}.faq-list .is-open p{display:block}.case-related{padding-bottom:105px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.related-grid article{overflow:hidden;border:1px solid #e4eaf1;border-radius:7px;background:#fff}.related-thumb{height:136px;background:#f7f9fc}.related-thumb img{width:100%;height:100%;object-fit:cover;object-position:center}.related-thumb--empty{display:grid;place-items:center}.related-thumb--empty i{display:grid;width:44px;height:44px;place-items:center;border-radius:50%;background:#edf1f6;color:#9ba6b6}.related-grid h3{margin:14px 13px 7px;font-size:13px}.related-grid p{margin:0 13px 14px;color:#8b96a7;font-size:10px}@media(max-width:700px){.case-inner{width:min(100% - 30px,470px)}.case-hero{min-height:445px;padding:94px 0 72px}.case-hero h1{margin:17px 0 15px;font-size:34px}.case-hero p{max-width:350px;font-size:13px;line-height:1.85}.case-tags{gap:7px}.case-tags span{padding:6px 11px;font-size:11px}.case-actions{margin-top:25px}.case-button{min-width:104px;padding:12px 18px}.case-strip .case-inner{grid-template-columns:repeat(2,1fr);gap:0}.case-strip article{min-height:62px;padding:0 14px;border-bottom:1px solid rgba(209,222,239,.16)}.case-strip article:nth-child(odd){padding-left:0;border-left:0}.case-strip article:nth-child(even){padding-right:0}.case-strip article:nth-child(n+3){border-bottom:0}.case-strip img{width:30px;max-height:30px;flex-basis:30px}.case-strip h2{font-size:12px}.case-strip p{font-size:10px}.case-section{padding:64px 0}.case-heading{margin-bottom:27px}.case-heading h2{font-size:20px}.feature-grid{grid-template-columns:repeat(2,1fr);gap:8px}.feature-grid article{min-height:166px;padding:19px 15px}.feature-icon{width:42px;height:42px}.feature-icon img{width:24px;height:24px}.feature-grid h3{margin:14px 0 7px;font-size:13px}.feature-grid p{font-size:10px;line-height:1.75}.overview-grid{grid-template-columns:repeat(2,1fr);gap:8px}.overview-grid article{min-height:115px}.screen-stage{height:285px}.screen-stage img{width:250px;height:244px}.delivery-grid{gap:8px}.delivery-grid article{min-height:75px;gap:9px}.delivery-grid span{font-size:10px}.related-grid{gap:8px}.related-thumb{height:86px}.related-grid h3{margin:10px 9px 5px;font-size:10px}.related-grid p{margin:0 9px 10px;font-size:8px}}@media(max-width:375px){.case-hero h1{font-size:31px}.case-section{padding:55px 0}.feature-grid article{min-height:145px}.overview-grid article{padding:17px 9px}.overview-grid h3{font-size:11px}.overview-grid p{font-size:9px}.related-thumb{height:75px}}
.case-highlights {
    font-family: "WenQuanYi Zen Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.case-highlights .case-heading p {
    color: #8390a3;
    font-family: "WenQuanYi Zen Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
}

.case-highlights .feature-grid h3 {
    margin-bottom: 10px;
    font-family: "WenQuanYi Zen Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.case-highlights .feature-grid p {
    font-family: "WenQuanYi Zen Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.case-highlights .feature-icon img {
    width: 30px;
    height: 30px;
    filter: contrast(1.18) saturate(1.08);
}

@media (max-width: 700px) {
    .case-highlights .case-heading p {
        font-size: 13px;
        font-weight: 400;
        line-height: 20px;
    }

    .case-highlights .feature-icon {
        width: 48px;
        height: 48px;
    }

    .case-highlights .feature-icon img {
        width: 30px;
        height: 30px;
    }

    .case-highlights .feature-grid h3 {
        margin: 18px 0 10px;
        font-size: 20px;
        line-height: 28px;
    }

    .case-highlights .feature-grid p {
        font-size: 16px;
        line-height: 24px;
    }
}
.case-heading h2 {
    color: #0f172a;
    font-family: "WenQuanYi Zen Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 40px;
}

@media (max-width: 700px) {
    .case-heading h2 {
        font-size: 24px;
        line-height: 30px;
    }
}

.case-overview {
    background: #fff;
}

.case-overview .case-heading {
    margin-bottom: 42px;
}

.case-overview .case-heading p {
    margin-top: 14px;
    color: #8a94a6;
    font-family: "WenQuanYi Zen Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1.6px;
    line-height: 24px;
}

.case-overview .overview-grid {
    gap: 18px;
}

.case-overview .overview-grid article {
    min-height: 188px;
    padding: 28px 18px 26px;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    background: #f7f8fa;
    box-shadow: none;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.case-overview .overview-grid h3 {
    margin-top: 14px;
    margin-bottom: 10px;
    color: #12213f;
    font-family: "WenQuanYi Zen Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.case-overview .overview-grid p {
    width: 14em;
    margin-left: auto;
    margin-right: auto;
    color: #8a94a6;
    font-family: "WenQuanYi Zen Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    word-break: break-all;
}

.case-overview .overview-grid article:hover {
    border-color: #dce3ec;
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(15, 31, 55, .06);
}

.case-overview .overview-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #f5f8fc;
}

.case-overview .overview-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transition: transform .28s ease;
}

.case-overview .overview-grid article:hover .overview-icon img {
    transform: scale(1.08);
}

@media (max-width: 700px) {
    .case-overview .case-heading {
        margin-bottom: 28px;
    }

    .case-overview .case-heading p {
        margin-top: 10px;
        font-size: 16px;
        line-height: 24px;
    }

    .case-overview .overview-grid {
        gap: 12px;
    }

    .case-overview .overview-grid article {
        min-height: 168px;
        padding: 22px 14px 20px;
        border-radius: 12px;
    }

    .case-overview .overview-grid h3 {
        margin-top: 12px;
        margin-bottom: 8px;
        font-size: 20px;
        line-height: 28px;
    }

    .case-overview .overview-grid p {
        width: 12em;
        font-size: 16px;
        line-height: 24px;
    }
}
.case-screens .case-heading p {
    color: #64748b;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
}

.case-screens {
    --fan-card-w: 260px;
    --fan-card-h: 560px;
    --fan-card-shadow: 0 18px 40px rgba(15, 31, 55, .12);
    overflow: visible;
}

.case-demo {
    overflow: visible;
}

.case-screens .screen-tabs {
    display: flex;
    width: fit-content;
    margin: -7px auto 36px;
    padding: 3px;
    border: 1px solid #dce4ed;
    border-radius: 22px;
    background: #fff;
    gap: 0;
}

.case-screens .screen-tabs button {
    min-width: 96px;
    height: 34px;
    padding: 0 18px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: #46566c;
    font-family: "WenQuanYi Zen Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.14px;
    line-height: 20px;
    transition: background .24s ease, color .24s ease;
}

.case-screens .screen-tabs button.is-active {
    background: #10213b;
    color: #fff;
}

.case-screens .screen-stage {
    position: relative;
    width: min(100%, 1080px);
    height: 640px;
    margin: 0 auto;
    overflow: visible;
    touch-action: pan-y;
    user-select: none;
    cursor: grab;
}

.case-screens .screen-stage.is-dragging {
    cursor: grabbing;
}

.case-screens .fan-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.case-screens .screen-arrow {
    position: absolute;
    z-index: 30;
    top: 50%;
    display: grid;
    width: 38px;
    height: 38px;
    border: 1px solid #e1e8f0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #12213f;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 1;
    place-items: center;
    transform: translateY(-50%);
    transition: opacity .2s ease, box-shadow .2s ease;
}

.case-screens .screen-arrow:hover {
    box-shadow: 0 8px 18px rgba(15, 31, 55, .12);
}

.case-screens .screen-arrow--prev { left: 22px; }
.case-screens .screen-arrow--next { right: 22px; }

.case-screens .fan-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--fan-card-w);
    height: var(--fan-card-h);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    transform-origin: center center;
    transition: transform .42s cubic-bezier(.22, .8, .28, 1);
    will-change: transform;
}

.case-screens .fan-card__inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(16, 33, 59, .06);
    border-radius: 28px;
    background: #111;
    box-shadow: var(--fan-card-shadow);
    transition: transform .28s ease, box-shadow .28s ease;
    transform-origin: center center;
}

.case-screens .fan-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    background: #111;
}

.case-screens .fan-card.is-active .fan-card__inner {
    box-shadow: 0 24px 48px rgba(15, 31, 55, .18);
}

.case-screens .fan-card:hover {
    z-index: 20 !important;
}

.case-screens .fan-card:hover .fan-card__inner {
    transform: scale(1.08);
    box-shadow: 0 28px 56px rgba(15, 31, 55, .22);
}

.case-screens .fan-track[data-count="4"] .fan-card:nth-child(1) {
    z-index: 1;
    transform: translate(-50%, -50%) translateX(-300px) rotate(-14deg) scale(.9);
}
.case-screens .fan-track[data-count="4"] .fan-card:nth-child(2) {
    z-index: 2;
    transform: translate(-50%, -50%) translateX(-105px) rotate(-6deg) scale(.95);
}
.case-screens .fan-track[data-count="4"] .fan-card:nth-child(3) {
    z-index: 4;
    transform: translate(-50%, -50%) translateX(80px) rotate(0deg) scale(1);
}
.case-screens .fan-track[data-count="4"] .fan-card:nth-child(4) {
    z-index: 3;
    transform: translate(-50%, -50%) translateX(280px) rotate(10deg) scale(.93);
}

.case-screens .fan-track[data-count="3"] .fan-card:nth-child(1) {
    z-index: 1;
    transform: translate(-50%, -50%) translateX(-260px) rotate(-12deg) scale(.92);
}
.case-screens .fan-track[data-count="3"] .fan-card:nth-child(2) {
    z-index: 3;
    transform: translate(-50%, -50%) translateX(0) rotate(0deg) scale(1);
}
.case-screens .fan-track[data-count="3"] .fan-card:nth-child(3) {
    z-index: 2;
    transform: translate(-50%, -50%) translateX(260px) rotate(12deg) scale(.92);
}

.case-screens .fan-track[data-count="2"] .fan-card:nth-child(1) {
    z-index: 1;
    transform: translate(-50%, -50%) translateX(-200px) rotate(-10deg) scale(.96);
}
.case-screens .fan-track[data-count="2"] .fan-card:nth-child(2) {
    z-index: 2;
    transform: translate(-50%, -50%) translateX(200px) rotate(10deg) scale(.96);
}

.case-screens .fan-track[data-count="1"] .fan-card {
    width: auto;
    height: auto;
    max-width: min(420px, 72%);
    max-height: 92%;
}

.case-screens .fan-track[data-count="1"] .fan-card__inner {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 18px;
}

.case-screens .fan-track[data-count="1"] .fan-card img {
    width: auto;
    height: auto;
    max-width: min(420px, 72vw);
    max-height: 580px;
    object-fit: contain;
}

.case-screens .fan-track[data-count="1"] .fan-card:nth-child(1) {
    z-index: 1;
    transform: translate(-50%, -50%) translateX(0) rotate(0deg) scale(1);
}

.case-screens .fan-track[data-count="1"] .fan-card:hover .fan-card__inner {
    transform: scale(1.06);
}

.case-screens.is-pc .screen-stage {
    width: min(100%, 1080px);
    height: 560px;
}

.case-screens.is-pc .fan-card,
.case-screens.is-pc .fan-track[data-count="1"] .fan-card {
    width: min(880px, 92%);
    height: min(500px, 88%);
    max-width: none;
    max-height: none;
}

.case-screens.is-pc .fan-card__inner,
.case-screens.is-pc .fan-track[data-count="1"] .fan-card__inner {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 24px;
    background: #0f1724;
}

.case-screens.is-pc .fan-card img,
.case-screens.is-pc .fan-track[data-count="1"] .fan-card img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center center;
    background: #0f1724;
}

.case-screens.is-pc .fan-card:nth-child(1),
.case-screens.is-pc .fan-track[data-count="1"] .fan-card:nth-child(1) {
    z-index: 1;
    transform: translate(-50%, -50%) translateX(0) rotate(0deg) scale(1);
}

.case-screens.is-pc .fan-card:hover .fan-card__inner,
.case-screens.is-pc .fan-track[data-count="1"] .fan-card:hover .fan-card__inner {
    transform: scale(1.02);
}

.case-screens .screen-dots {
    display: flex;
    min-height: 10px;
    margin-top: 22px;
    justify-content: center;
    gap: 8px;
}

.case-screens .screen-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c8d0dc;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.case-screens .screen-dots button.is-active {
    background: #10213b;
    transform: scale(1.15);
}

@media (max-width: 900px) {
    .case-screens {
        --fan-card-w: 200px;
        --fan-card-h: 430px;
    }

    .case-screens .screen-stage { height: 520px; }

    .case-screens .fan-track[data-count="4"] .fan-card:nth-child(1) {
        transform: translate(-50%, -50%) translateX(-220px) rotate(-12deg) scale(.9);
    }
    .case-screens .fan-track[data-count="4"] .fan-card:nth-child(2) {
        transform: translate(-50%, -50%) translateX(-75px) rotate(-5deg) scale(.95);
    }
    .case-screens .fan-track[data-count="4"] .fan-card:nth-child(3) {
        transform: translate(-50%, -50%) translateX(60px) rotate(0deg) scale(1);
    }
    .case-screens .fan-track[data-count="4"] .fan-card:nth-child(4) {
        transform: translate(-50%, -50%) translateX(205px) rotate(9deg) scale(.93);
    }

    .case-screens .fan-track[data-count="3"] .fan-card:nth-child(1) {
        transform: translate(-50%, -50%) translateX(-180px) rotate(-10deg) scale(.92);
    }
    .case-screens .fan-track[data-count="3"] .fan-card:nth-child(3) {
        transform: translate(-50%, -50%) translateX(180px) rotate(10deg) scale(.92);
    }

    .case-screens .fan-track[data-count="2"] .fan-card:nth-child(1) {
        transform: translate(-50%, -50%) translateX(-140px) rotate(-8deg) scale(.96);
    }
    .case-screens .fan-track[data-count="2"] .fan-card:nth-child(2) {
        transform: translate(-50%, -50%) translateX(140px) rotate(8deg) scale(.96);
    }

    .case-screens.is-pc .screen-stage {
        height: 420px;
    }

    .case-screens.is-pc .fan-card,
    .case-screens.is-pc .fan-track[data-count="1"] .fan-card {
        width: min(720px, 94%);
        height: min(360px, 86%);
    }
}

@media (max-width: 700px) {
    .case-screens {
        --fan-card-w: 150px;
        --fan-card-h: 320px;
    }

    .case-screens .screen-tabs {
        margin-bottom: 24px;
    }

    .case-screens .screen-tabs button {
        min-width: 72px;
        padding: 0 12px;
        font-size: 14px;
        line-height: 20px;
    }

    .case-screens .screen-stage {
        height: 400px;
    }

    .case-screens .screen-arrow {
        width: 34px;
        height: 34px;
        opacity: 1;
    }

    .case-screens .screen-arrow--prev { left: 2px; }
    .case-screens .screen-arrow--next { right: 2px; }

    .case-screens .fan-track[data-count="4"] .fan-card:nth-child(1) {
        transform: translate(-50%, -50%) translateX(-155px) rotate(-11deg) scale(.88);
    }
    .case-screens .fan-track[data-count="4"] .fan-card:nth-child(2) {
        transform: translate(-50%, -50%) translateX(-52px) rotate(-5deg) scale(.94);
    }
    .case-screens .fan-track[data-count="4"] .fan-card:nth-child(3) {
        transform: translate(-50%, -50%) translateX(42px) rotate(0deg) scale(1);
    }
    .case-screens .fan-track[data-count="4"] .fan-card:nth-child(4) {
        transform: translate(-50%, -50%) translateX(145px) rotate(8deg) scale(.9);
    }

    .case-screens .fan-track[data-count="3"] .fan-card:nth-child(1) {
        transform: translate(-50%, -50%) translateX(-125px) rotate(-9deg) scale(.92);
    }
    .case-screens .fan-track[data-count="3"] .fan-card:nth-child(3) {
        transform: translate(-50%, -50%) translateX(125px) rotate(9deg) scale(.92);
    }

    .case-screens .fan-track[data-count="2"] .fan-card:nth-child(1) {
        transform: translate(-50%, -50%) translateX(-100px) rotate(-7deg) scale(.96);
    }
    .case-screens .fan-track[data-count="2"] .fan-card:nth-child(2) {
        transform: translate(-50%, -50%) translateX(100px) rotate(7deg) scale(.96);
    }

    .case-screens.is-pc .screen-stage {
        height: 240px;
    }

    .case-screens.is-pc .fan-card,
    .case-screens.is-pc .fan-track[data-count="1"] .fan-card {
        width: calc(100% - 8px);
        height: 200px;
    }

    .case-screens.is-pc .fan-card__inner,
    .case-screens.is-pc .fan-track[data-count="1"] .fan-card__inner {
        border-radius: 16px;
    }
}
.case-delivery {
    background: #fff;
}

.case-delivery .case-heading {
    margin-bottom: 42px;
}

.case-delivery .delivery-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 14px;
}

.case-delivery .delivery-grid article {
    min-height: 104px;
    border-color: #e7ecf2;
    border-radius: 8px;
    box-shadow: none;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.case-delivery .delivery-grid article:hover {
    border-color: #dce3ec;
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(15, 31, 55, .06);
}

.case-delivery .delivery-icon {
    display: grid;
    min-width: 32px;
    min-height: 32px;
    place-items: center;
}

.case-delivery .delivery-icon img {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .28s ease;
}

.case-delivery .delivery-grid article:hover .delivery-icon img {
    transform: scale(1.08);
}

.case-delivery .delivery-grid i {
    color: #42526a;
    font-size: 22px;
    line-height: 1;
}

.case-delivery .delivery-grid span {
    color: #12213f;
    font-family: "WenQuanYi Zen Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

@media (max-width: 700px) {
    .case-delivery .case-heading {
        margin-bottom: 30px;
    }

    .case-delivery .delivery-grid {
        column-gap: 10px;
        row-gap: 10px;
    }

    .case-delivery .delivery-grid article {
        min-height: 84px;
    }

    .case-delivery .delivery-grid i {
        font-size: 20px;
    }

    .case-delivery .delivery-grid span {
        font-size: 20px;
        line-height: 28px;
    }
}
.case-faq .case-heading {
    margin-bottom: 42px;
}

.case-faq .faq-list {
    border-top: 0;
}

.case-faq .faq-list article {
    margin: 0;
    padding: 0 16px;
    border-bottom: 1px solid #e7ecf2;
    border-radius: 7px;
    background: transparent;
    transition: background .2s ease;
}

.case-faq .faq-list button {
    padding: 18px 0;
    color: #12213f;
    font-family: "WenQuanYi Zen Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    pointer-events: none;
}

.case-faq .faq-list button img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.case-faq .faq-list p {
    max-height: 0;
    margin: 0;
    padding: 0 28px 0 0;
    overflow: hidden;
    color: #64748b;
    font-family: "WenQuanYi Zen Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    transition: max-height .24s ease, padding-bottom .24s ease;
}

.case-faq .faq-list article.is-open {
    margin: 5px 0;
    border: 0;
    background: #f6f8fb;
}

.case-faq .faq-list article.is-open p {
    display: block;
    max-height: 160px;
    padding-bottom: 18px;
}

@media (max-width: 700px) {
    .case-faq .case-heading {
        margin-bottom: 28px;
    }

    .case-faq .faq-list article {
        padding: 0 14px;
    }

    .case-faq .faq-list button {
        padding: 16px 0;
        font-size: 20px;
        line-height: 28px;
    }

    .case-faq .faq-list p {
        font-size: 16px;
        line-height: 25.6px;
    }
}
.case-demo {
    background: #f7f9fc;
}

.case-highlights,
.case-screens,
.case-related {
    background: #f4f7fb;
}

.feature-grid article,
.overview-grid article,
.delivery-grid article,
.related-grid article {
    border-color: #e5ebf2;
    box-shadow: 0 12px 30px rgba(25, 45, 75, .035);
}

.feature-grid article:hover {
    box-shadow: 0 16px 34px rgba(25, 45, 75, .07);
}

.case-faq .faq-list article.is-open {
    background: #eef3f8;
    box-shadow: 0 12px 30px rgba(25, 45, 75, .035);
}

.case-faq .faq-list article {
    border-bottom-color: #e5ebf2;
}
.case-related .case-heading {
    margin-bottom: 42px;
}

.case-related .related-grid {
    gap: 20px;
}

.case-related .related-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.case-related .related-grid article {
    overflow: hidden;
    border: 1px solid #e5ebf2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(25, 45, 75, .04);
    transition: transform .28s ease, box-shadow .28s ease;
}

.case-related .related-card:hover article,
.case-related .related-grid article:hover {
    box-shadow: 0 18px 36px rgba(25, 45, 75, .09);
    transform: translateY(-5px);
}

.case-related .related-thumb {
    height: 205px;
    background: #edf2f7;
}

.case-related .related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .35s ease;
}

.case-related .related-grid article:hover .related-thumb img,
.case-related .related-card:hover .related-thumb img {
    transform: scale(1.04);
}

.case-related .related-thumb--empty {
    background: #edf2f7;
}

.case-related .related-grid h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-family: "WenQuanYi Zen Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.case-related .related-info {
    padding: 18px;
    background: #f8fafd;
}

.case-related .related-tags {
    display: flex;
    overflow: hidden;
    flex-wrap: nowrap;
    gap: 8px;
}

.case-related .related-tags span {
    display: inline-flex;
    height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #6b7a90;
    font-family: "WenQuanYi Zen Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    align-items: center;
}

@media (max-width: 700px) {
    .case-related .case-heading {
        margin-bottom: 30px;
    }

    .case-related .related-grid {
        gap: 10px;
    }

    .case-related .related-thumb {
        height: 118px;
    }

    .case-related .related-grid h3 {
        margin: 0 0 10px;
        font-size: 20px;
        line-height: 28px;
    }

    .case-related .related-info {
        padding: 12px;
    }

    .case-related .related-tags {
        gap: 6px;
    }

    .case-related .related-tags span {
        height: 26px;
        padding: 0 8px;
        font-size: 12px;
        line-height: 18px;
    }
}

/* 案例 Banner 图：无图时沿用原有纯色首屏。 */
.case-hero--with-image {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case-hero--with-image .case-hero__inner {
    position: relative;
    z-index: 1;
}

.case-hero--with-image h1,
.case-hero--with-image p {
    color: #fff;
}

.case-hero--with-image .case-tags span {
    border-color: rgba(255, 255, 255, .46);
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.case-hero--with-image .case-button:not(.case-button--primary) {
    border-color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* 项目亮点图标使用设计资源原尺寸，不叠加额外底色或滤镜。 */
.case-highlights .feature-icon {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 0;
    background: transparent;
}

.case-highlights .feature-icon img,
.case-highlights .feature-grid article:hover .feature-icon img {
    display: block;
    width: 48px;
    height: 48px;
    filter: none;
    transform: none;
}