/* ===== 网飞猫追剧app · Memphis 80s 玩趣风 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #1c1726; background: #fdf7e7; line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
.wp4k { width: 1200px; margin: 0 auto; }

/* ===== 头部 ===== */
.hd8m {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: #fffdf6; border-bottom: 3px solid #1c1726;
    transition: box-shadow .25s;
}
.hd8m.sc8 { box-shadow: 0 8px 0 rgba(28,23,38,.9); }
.hd8m .wp4k { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.lg3x { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 900; letter-spacing: -.5px; }
.lg3x img { width: 42px; height: 42px; }
.lg3x em { font-style: normal; background: #ffd23f; padding: 0 6px; transform: rotate(-2deg); display: inline-block; border: 2px solid #1c1726; }
.nv7q { display: flex; gap: 30px; }
.nv7q a { font-size: 15.5px; font-weight: 800; position: relative; padding: 3px 2px; }
.nv7q a::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 4px; background: #e63946; border-radius: 2px; transition: width .2s; }
.nv7q a:hover { color: #e63946; }
.nv7q a:hover::after { width: 100%; }
.gb9k {
    display: inline-block; background: #e63946; color: #fff; font-size: 14px; font-weight: 800;
    padding: 11px 18px; border: 3px solid #1c1726; border-radius: 999px;
    box-shadow: 4px 4px 0 #1c1726; transition: transform .15s, box-shadow .15s;
}
.gb9k:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 #1c1726; }
.mb6t { display: none; background: #ffd23f; border: 3px solid #1c1726; border-radius: 10px; font-size: 22px; cursor: pointer; padding: 3px 8px; line-height: 1; }
.mn5w { display: none; }

/* ===== Hero ===== */
.he9r {
    padding: 130px 0 84px; position: relative; overflow: hidden;
    background-color: #fdf7e7;
    background-image: radial-gradient(#e63946 2px, transparent 2.5px);
    background-size: 34px 34px;
    background-position: -10px -10px;
}
.he9r::before {
    content: ""; position: absolute; inset: 0; background: #fdf7e7; opacity: .92; z-index: 0;
}
.he9r .wp4k { display: flex; align-items: center; gap: 56px; position: relative; z-index: 1; }
.hl3d { flex: 1; }
.hb7m {
    display: inline-flex; align-items: center; gap: 8px;
    background: #1c1726; color: #ffd23f; font-size: 13px; font-weight: 800; letter-spacing: 2px;
    padding: 7px 16px; border-radius: 999px; margin-bottom: 24px; transform: rotate(-1.5deg);
}
.hl3d h1 { font-size: 56px; line-height: 1.2; font-weight: 900; letter-spacing: -1px; margin-bottom: 22px; }
.hl3d h1 em {
    font-style: normal; white-space: nowrap; position: relative; z-index: 1; color: #fff;
}
.hl3d h1 em::after {
    content: ""; position: absolute; z-index: -1; left: -8px; right: -8px; top: 8px; bottom: 4px;
    background: #e63946; border: 3px solid #1c1726; border-radius: 10px; transform: rotate(1.5deg);
}
.hd6x { font-size: 16px; color: #4d4459; max-width: 510px; margin-bottom: 30px; }
.hc2p { display: flex; gap: 16px; margin-bottom: 26px; }
.rbtn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #7c3aed; color: #fff; font-size: 17.5px; font-weight: 900;
    padding: 16px 28px; border-radius: 999px; border: 3px solid #1c1726;
    box-shadow: 6px 6px 0 #1c1726; transition: transform .15s, box-shadow .15s;
}
.rbtn:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 #1c1726; }
.ybtn {
    display: inline-flex; align-items: center; gap: 7px;
    background: #ffd23f; color: #1c1726; font-size: 17px; font-weight: 900;
    padding: 15px 26px; border-radius: 999px; border: 3px solid #1c1726;
    box-shadow: 6px 6px 0 #1c1726; transition: transform .15s, box-shadow .15s;
}
.ybtn:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 #1c1726; }
.hx9k { display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 700; color: #6b6180; background: #fffdf6; border: 2px dashed #b9aec8; border-radius: 999px; padding: 8px 18px; }
.hx9k .dot { width: 9px; height: 9px; background: #06b6d4; border: 2px solid #1c1726; border-radius: 50%; margin-right: 9px; animation: jmp 1.4s ease-in-out infinite; }
@keyframes jmp { 50% { transform: translateY(-4px); } }

/* Hero 右侧 · 猫耳贴纸手机 */
.hr8g { position: relative; width: 410px; height: 520px; flex: none; }
.cat-phone {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(4deg);
    width: 290px; z-index: 3;
}
.ear {
    position: absolute; top: -26px; width: 0; height: 0; z-index: -1;
    border-style: solid; border-color: transparent transparent #1c1726 transparent;
}
.ear.e-l { left: 18px; border-width: 0 26px 40px 26px; }
.ear.e-r { right: 18px; border-width: 0 26px 40px 26px; }
.ph-sc {
    background: #1c1726; padding: 10px; border-radius: 26px; border: 4px solid #1c1726;
    box-shadow: 10px 10px 0 #7c3aed;
}
.ph-sc img { width: 100%; height: 430px; object-fit: cover; border-radius: 18px; }

/* 漂浮孟菲斯形状 */
.shp { position: absolute; z-index: 2; }
.s-tri {
    left: 8px; top: 56px; width: 0; height: 0;
    border-left: 26px solid transparent; border-right: 26px solid transparent; border-bottom: 44px solid #06b6d4;
    filter: drop-shadow(3px 3px 0 #1c1726); transform: rotate(-16deg);
}
.s-zig {
    right: 2px; top: 78px; width: 70px; height: 14px;
    background: linear-gradient(135deg, #e63946 25%, transparent 25%) -12px 0/24px 14px,
              linear-gradient(225deg, #e63946 25%, transparent 25%) -12px 0/24px 14px;
}
.s-dots {
    left: 0; bottom: 104px; width: 66px; height: 44px;
    background-image: radial-gradient(#7c3aed 5px, transparent 6px);
    background-size: 20px 20px;
}
.s-wave {
    right: 6px; bottom: 86px; width: 76px; height: 20px;
    background: radial-gradient(circle at 10px -5px, transparent 13px, #06b6d4 14px, #06b6d4 17px, transparent 18px) 0 0/38px 20px repeat-x;
}
.s-ring {
    right: 40px; top: 8px; width: 44px; height: 44px; border: 7px solid #ffd23f; border-radius: 50%;
    box-shadow: 3px 3px 0 #1c1726;
}
.s-plus {
    left: 24px; top: 4px; width: 26px; height: 26px;
    background:
        linear-gradient(#e63946,#e63946) center/100% 7px no-repeat,
        linear-gradient(#e63946,#e63946) center/7px 100% no-repeat;
}
.stk-live {
    position: absolute; left: -14px; bottom: 56px; z-index: 4; transform: rotate(-6deg);
    display: flex; align-items: center; gap: 6px;
    background: #e63946; color: #fff; font-size: 13px; font-weight: 800;
    padding: 8px 14px; border: 3px solid #1c1726; border-radius: 999px;
    box-shadow: 4px 4px 0 #1c1726;
}
.stk-new {
    position: absolute; right: -6px; top: 132px; z-index: 4; transform: rotate(12deg);
    background: #ffd23f; color: #1c1726; font-size: 15px; font-weight: 900;
    width: 58px; height: 58px; border-radius: 50%; border: 3px solid #1c1726;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 4px 4px 0 #1c1726;
}

/* ===== 模块 ===== */
.bk5x { padding: 82px 0; }
.bk5x.gy3 { background: #f6edf8; }
.st9t {
    text-align: center; font-size: 34px; font-weight: 900; letter-spacing: 3px; margin-bottom: 48px;
    display: inline-block; position: relative; left: 50%; transform: translateX(-50%);
    background: #fffdf6; border: 3px solid #1c1726; padding: 6px 34px; border-radius: 16px;
    box-shadow: 6px 6px 0 #1c1726;
}

/* 产品展示 · 贴纸卡 */
.sh7k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sh-it {
    flex: 1; background: #fffdf6; border: 3px solid #1c1726; border-radius: 18px;
    padding: 12px 12px 16px; text-align: center; position: relative;
    transition: transform .22s, box-shadow .22s;
}
.sh-it .pin {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    width: 24px; height: 24px; border-radius: 50%; border: 3px solid #1c1726; z-index: 2;
}
.sh-it.c1 { transform: rotate(-1.6deg); box-shadow: 7px 7px 0 #e63946; }
.sh-it.c2 { transform: rotate(1.2deg); box-shadow: 7px 7px 0 #06b6d4; }
.sh-it.c3 { transform: rotate(-1deg); box-shadow: 7px 7px 0 #ffd23f; }
.sh-it.c4 { transform: rotate(1.8deg); box-shadow: 7px 7px 0 #7c3aed; }
.sh-it.c1 .pin { background: #e63946; }
.sh-it.c2 .pin { background: #06b6d4; }
.sh-it.c3 .pin { background: #ffd23f; }
.sh-it.c4 .pin { background: #7c3aed; }
.sh-it:hover { transform: rotate(0) translateY(-8px) scale(1.02); }
.sh-it img { width: 100%; height: 286px; object-fit: cover; border-radius: 12px; border: 2px solid #1c1726; }
.sh-it figcaption { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 800; margin-top: 12px; }
.sh-it figcaption b {
    background: #1c1726; color: #ffd23f; font-size: 12px; padding: 2px 8px; border-radius: 999px;
}

/* 优势亮点 · 糖果卡 */
.ad6q { display: flex; flex-wrap: wrap; gap: 24px; }
.ad-it {
    width: calc((100% - 48px) / 3); border: 3px solid #1c1726; border-radius: 20px;
    padding: 28px 26px 30px; background: #fffdf6; position: relative;
    transition: transform .18s, box-shadow .18s;
}
.ad-it:nth-child(1) { box-shadow: 7px 7px 0 #e63946; }
.ad-it:nth-child(2) { box-shadow: 7px 7px 0 #ffd23f; }
.ad-it:nth-child(3) { box-shadow: 7px 7px 0 #06b6d4; }
.ad-it:nth-child(4) { box-shadow: 7px 7px 0 #7c3aed; }
.ad-it:nth-child(5) { box-shadow: 7px 7px 0 #06b6d4; }
.ad-it:nth-child(6) { box-shadow: 7px 7px 0 #e63946; }
.ad-it:hover { transform: translate(-3px,-3px); box-shadow: 10px 10px 0 #1c1726 !important; }
.ad-ic {
    width: 58px; height: 58px; border-radius: 18px; border: 3px solid #1c1726;
    display: flex; align-items: center; justify-content: center; font-size: 27px; margin-bottom: 16px;
}
.ad-it:nth-child(1) .ad-ic { background: #ffd9dc; color: #e63946; }
.ad-it:nth-child(2) .ad-ic { background: #fff1c2; color: #c79400; }
.ad-it:nth-child(3) .ad-ic { background: #c9f4fb; color: #0891a8; }
.ad-it:nth-child(4) .ad-ic { background: #e7dbff; color: #7c3aed; }
.ad-it:nth-child(5) .ad-ic { background: #c9f4fb; color: #0891a8; }
.ad-it:nth-child(6) .ad-ic { background: #ffd9dc; color: #e63946; }
.ad-it .tt9 { font-size: 19px; font-weight: 900; margin-bottom: 9px; }
.ad-it .ds9 { font-size: 14.5px; color: #5c5368; }
.lk8 { color: #7c3aed; font-weight: 800; background: linear-gradient(#ffe9a8,#ffe9a8); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 88%; padding: 0 2px; }

/* 使用流程 · 泡泡连线 */
.st7m { display: flex; gap: 18px; position: relative; }
.st7m::before {
    content: ""; position: absolute; top: 37px; left: 12%; right: 12%; height: 0; z-index: 0;
    border-top: 4px dashed #1c1726;
}
.st7m li { flex: 1; position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.st-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; border-radius: 50%; margin-bottom: 18px;
    border: 3px solid #1c1726; font-size: 32px;
}
.st7m li:nth-child(1) .st-no { background: #e63946; color: #fff; box-shadow: 5px 5px 0 #1c1726; }
.st7m li:nth-child(2) .st-no { background: #ffd23f; color: #1c1726; box-shadow: 5px 5px 0 #1c1726; }
.st7m li:nth-child(3) .st-no { background: #06b6d4; color: #fff; box-shadow: 5px 5px 0 #1c1726; }
.st7m li:nth-child(4) .st-no { background: #7c3aed; color: #fff; box-shadow: 5px 5px 0 #1c1726; }
.st7m .tt9 { font-size: 18px; font-weight: 900; margin-bottom: 7px; }
.st7m .ds9 { font-size: 14px; color: #5c5368; }

/* 产品资讯 · 便签贴纸 */
.nw3q { display: flex; gap: 26px; }
.nw-it {
    flex: 1; border: 3px solid #1c1726; border-radius: 18px; padding: 26px 24px 22px;
    box-shadow: 7px 7px 0 #1c1726; position: relative; transition: transform .2s;
}
.nw-it:hover { transform: translateY(-6px) rotate(-.6deg); }
.nw-it.y { background: #fff6d6; }
.nw-it.p { background: #e9faff; }
.nw-it.t { background: #f4e8ff; }
.nw-tag {
    display: inline-block; background: #1c1726; color: #ffd23f; font-size: 12.5px; font-weight: 800;
    letter-spacing: 2px; padding: 4px 13px; border-radius: 999px; margin-bottom: 14px;
}
.nw-it .tt9 { font-size: 18px; font-weight: 900; line-height: 1.5; margin-bottom: 11px; }
.nw-it .ds9 { font-size: 14px; color: #5c5368; margin-bottom: 16px; }
.nw-dt { font-size: 13px; font-weight: 800; color: #e63946; }

/* FAQ */
.fa8z { max-width: 940px; margin: 0 auto; }
.fa6q {
    background: #fffdf6; border: 3px solid #1c1726; border-radius: 18px;
    margin-bottom: 16px; box-shadow: 5px 5px 0 #7c3aed; overflow: hidden;
}
.fq-h { display: flex; align-items: center; gap: 15px; padding: 18px 22px; cursor: pointer; user-select: none; }
.fq-no {
    flex: none; width: 44px; height: 44px; border-radius: 50%; background: #e63946; color: #fff;
    border: 3px solid #1c1726; display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 900;
}
.fq-h b { flex: 1; font-size: 16.5px; font-weight: 900; }
.fq-h i {
    flex: none; font-size: 20px; width: 34px; height: 34px; background: #ffd23f; border: 2.5px solid #1c1726;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    transition: transform .3s;
}
.fa6q.op7 .fq-h i { transform: rotate(45deg); }
.fq-b { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.fq-b .ds9 { padding: 0 22px 22px 81px; font-size: 14.5px; color: #5c5368; }

/* 用户评价 · 气泡 */
.sy7m { display: flex; flex-wrap: wrap; gap: 22px; }
.sy-it { width: calc((100% - 44px) / 3); display: flex; flex-direction: column; gap: 12px; }
.sy-bub {
    position: relative; background: #fffdf6; border: 3px solid #1c1726; border-radius: 18px;
    padding: 20px 20px 18px; box-shadow: 5px 5px 0 #06b6d4;
}
.sy-it:nth-child(2) .sy-bub { box-shadow: 5px 5px 0 #e63946; }
.sy-it:nth-child(3) .sy-bub { box-shadow: 5px 5px 0 #ffd23f; }
.sy-it:nth-child(4) .sy-bub { box-shadow: 5px 5px 0 #7c3aed; }
.sy-it:nth-child(5) .sy-bub { box-shadow: 5px 5px 0 #ffd23f; }
.sy-it:nth-child(6) .sy-bub { box-shadow: 5px 5px 0 #e63946; }
.sy-bub::before {
    content: ""; position: absolute; left: 28px; bottom: -15px;
    border-top: 16px solid #1c1726; border-right: 14px solid transparent;
}
.sy-bub::after {
    content: ""; position: absolute; left: 31px; bottom: -9px; z-index: 1;
    border-top: 11px solid #fffdf6; border-right: 9px solid transparent;
}
.sy-bub .ds9 { font-size: 14.5px; color: #3d3650; }
.sy-f { display: flex; align-items: center; gap: 10px; padding: 8px 0 0 8px; }
.sy-a {
    width: 38px; height: 38px; border-radius: 50%; background: #7c3aed; color: #fff;
    border: 3px solid #1c1726; display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 900;
}
.sy-f b { font-size: 14px; font-weight: 900; }
.sy-f time { margin-left: auto; font-size: 12px; color: #8b8298; }

/* CTA */
.cta9x { background: #7c3aed; padding: 90px 0; position: relative; overflow: hidden; }
.cb-sh { position: absolute; border: 4px solid #1c1726; }
.cb1 { width: 90px; height: 90px; border-radius: 50%; background: #ffd23f; left: 8%; top: 26px; }
.cb2 { width: 0; height: 0; left: auto; right: 9%; top: 40px; border: 0; border-left: 34px solid transparent; border-right: 34px solid transparent; border-bottom: 56px solid #06b6d4; filter: drop-shadow(3px 3px 0 #1c1726); }
.cb3 { width: 70px; height: 70px; border-radius: 18px; background: #e63946; left: 14%; bottom: 30px; transform: rotate(14deg); }
.cb4 { width: 80px; height: 80px; right: 13%; bottom: 26px; border-radius: 50%; background:
    radial-gradient(#fffdf6 6px, transparent 7px) 0 0/20px 20px; border-color: #ffd23f; }
.ct-in { position: relative; text-align: center; color: #fff; }
.ct-t { font-size: 46px; line-height: 1.3; font-weight: 900; letter-spacing: -1px; margin-bottom: 14px; }
.ct-t em { font-style: normal; color: #ffd23f; }
.ct-d { font-size: 15.5px; color: #e6dcff; margin-bottom: 34px; font-weight: 600; }
.ct-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: #ffd23f; color: #1c1726; font-size: 18px; font-weight: 900;
    padding: 17px 40px; border-radius: 999px; border: 3px solid #1c1726;
    box-shadow: 7px 7px 0 #1c1726; transition: transform .15s, box-shadow .15s;
}
.ct-btn:hover { transform: translate(3px,3px); box-shadow: 4px 4px 0 #1c1726; }

/* 页脚 */
.ft8k { background: #1c1726; color: #b7aec4; padding: 42px 0 30px; }
.ft-row { display: flex; align-items: center; justify-content: space-between; }
.ft-lg { display: flex; align-items: center; gap: 9px; color: #fffdf6; font-size: 17px; font-weight: 900; }
.ft-lg img { width: 34px; height: 34px; }
.ft-nv { display: flex; gap: 24px; font-size: 14px; }
.ft-nv a:hover { color: #ffd23f; }
.ft-ln { height: 3px; background: repeating-linear-gradient(90deg, #e63946 0 24px, #ffd23f 24px 48px, #06b6d4 48px 72px, #7c3aed 72px 96px); margin: 22px 0 16px; border-radius: 2px; }
.ft-cp { font-size: 12.5px; text-align: center; color: #857c95; }

/* ===== 移动档 ===== */
@media (max-width: 768px) {
    .wp4k { width: 100%; padding: 0 16px; }
    .nv7q, .gb9k { display: none; }
    .hd8m .wp4k { height: 60px; }
    .lg3x { font-size: 18px; }
    .lg3x img { width: 35px; height: 35px; }
    .mb6t { display: block; }
    .mn5w {
        position: fixed; top: 60px; left: 0; right: 0; z-index: 99;
        background: #fffdf6; border-bottom: 3px solid #1c1726;
        flex-direction: column; max-height: 0; overflow: hidden; transition: max-height .3s ease;
    }
    .mn5w.op7 { max-height: 440px; display: flex; }
    .mn5w a { padding: 13px 20px; font-size: 16px; font-weight: 800; border-bottom: 2px dashed #d9d2c4; }
    .mn5w a:last-child { color: #e63946; border-bottom: 0; }

    .he9r { padding: 92px 0 52px; background-size: 24px 24px; }
    .he9r .wp4k { flex-direction: column; gap: 30px; }
    .hl3d h1 { font-size: 34px; }
    .hd6x { font-size: 15px; }
    .hc2p { flex-direction: column; gap: 14px; }
    .rbtn, .ybtn { width: 100%; justify-content: center; padding: 15px 20px; font-size: 16px; }
    .hx9k { font-size: 12.5px; text-align: center; }

    .hr8g { width: 300px; height: 440px; }
    .cat-phone { width: 240px; }
    .ph-sc img { height: 340px; }
    .s-dots, .s-wave { display: none; }
    .stk-live { left: -6px; font-size: 12px; }
    .stk-new { width: 50px; height: 50px; font-size: 13px; }

    .bk5x { padding: 54px 0; }
    .st9t { font-size: 25px; padding: 6px 22px; margin-bottom: 34px; }

    .sh7k { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 16px; padding: 14px 4px 16px; scroll-snap-type: x mandatory; }
    .sh-it { flex: none; width: 218px; scroll-snap-align: center; }
    .sh-it img { height: 246px; }

    .ad6q { gap: 16px; }
    .ad-it { width: 100%; padding: 23px 20px 25px; }

    .st7m { flex-direction: column; gap: 26px; }
    .st7m::before { display: none; }
    .st7m li { display: flex; align-items: center; gap: 16px; text-align: left; }
    .st-no { width: 60px; height: 60px; font-size: 26px; margin-bottom: 0; flex: none; }
    .st7m .tt9 { margin-bottom: 2px; }

    .nw3q { flex-direction: column; gap: 18px; }

    .fq-h { gap: 10px; padding: 15px 14px; }
    .fq-no { width: 36px; height: 36px; font-size: 13px; }
    .fq-h b { font-size: 14.5px; }
    .fq-b .ds9 { padding: 0 14px 18px 14px; }

    .sy-it { width: 100%; }

    .cta9x { padding: 58px 0; }
    .ct-t { font-size: 30px; }
    .ct-btn { width: 100%; justify-content: center; padding: 16px 20px; }
    .cb1 { width: 56px; height: 56px; left: 4%; }
    .cb3 { width: 46px; height: 46px; }
    .ft-row { flex-direction: column; gap: 18px; }
    .ft-nv { flex-wrap: wrap; justify-content: center; gap: 16px; }
}