:root{--coral:#ff6f61;--orange:#ff9a62;--peach:#ffc0a8;--pink:#ef7893;--purple:#8b5b83;--ink:#1d1118;--bg:#2a151d}.sns-page{background:var(--ink);color:#fff;font-family:inherit;overflow:hidden}.sns-wrap{width:min(1180px,calc(100% - 48px));margin:auto}.sns-hero{min-height:700px;padding:150px 0 90px;background:radial-gradient(circle at 78% 28%,#8b3d4d 0,transparent 34%),linear-gradient(135deg,#1d1118,#381820 60%,#211018)}.sns-kicker,.sns-heading>span{color:var(--peach);letter-spacing:.2em;font-size:12px}.sns-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:38px}.sns-hero h1{font-size:clamp(48px,6vw,82px);line-height:1.05;margin:0 0 28px}.sns-hero em{font-style:normal;color:var(--coral)}.sns-hero p{color:#e8cdd0;font-size:19px;line-height:1.8;max-width:500px}.sns-btn{display:inline-flex;margin-top:22px;padding:16px 22px;border-radius:40px;background:var(--coral);color:#fff;text-decoration:none;box-shadow:0 10px 35px #ff6f6155}.sns-phone{width:310px;height:500px;margin:auto;border:1px solid #ffc0a866;border-radius:34px;padding:18px;background:#2e1823;box-shadow:0 25px 80px #0008;transform:rotate(4deg);position:relative}.phone-top{font-size:11px;color:#ffd6cc}.phone-top span{float:right}.sns-phone article{margin-top:24px;background:#4b2430;border-radius:20px;padding:18px}.sns-phone h3{font-size:25px}.post-art{height:190px;border-radius:15px;background:linear-gradient(135deg,var(--coral),var(--purple));position:relative;overflow:hidden}.post-art i{position:absolute;border-radius:50%;background:#ffd2a4aa;width:140px;height:140px;filter:blur(2px)}.post-art i:nth-child(1){left:-20px;bottom:-30px}.post-art i:nth-child(2){right:-30px;top:-35px;background:#8ed5d0aa}.post-art i:nth-child(3){left:90px;top:60px;background:#fff5a855;width:70px;height:70px}.sns-phone footer{margin-top:16px;color:#ffc0a8}.sns-float{position:absolute;padding:10px 14px;background:#fff;color:var(--ink);border-radius:10px;font-size:12px;box-shadow:0 12px 30px #0005;animation:float 4s ease-in-out infinite}.f1{right:-60px;top:100px}.f2{left:-55px;bottom:120px;animation-delay:1s}@keyframes float{50%{transform:translateY(-10px)}}.sns-section{padding:110px 0;background:var(--bg)}.sns-section:nth-child(even){background:#321923}.sns-heading h2{font-size:clamp(32px,4vw,54px);line-height:1.2;margin:16px 0 40px}.sns-need-grid,.sns-platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.sns-need,.sns-platform{padding:26px;border:1px solid #ffb09b33;border-radius:18px;background:#ffffff09;transition:.3s}.sns-need:hover,.sns-platform:hover{transform:translateY(-8px);border-color:var(--coral);background:#ff6f6118}.sns-need b{color:var(--coral);font-size:13px}.sns-need strong{display:block;font-size:20px;margin:28px 0 12px}.sns-need p,.sns-rich p{color:#d9bfc3;line-height:1.8}.sns-platform{min-height:130px;position:relative}.sns-platform>span{font-size:28px;color:var(--peach)}.sns-platform h3{margin:16px 0 4px}.sns-platform p{color:#d9bfc3}.sns-platform i{position:absolute;right:20px;top:20px;color:var(--coral)}.sns-block .sns-wrap{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.sns-rich{padding:36px;border-left:2px solid var(--coral);background:linear-gradient(120deg,#ff6f6112,transparent);border-radius:0 22px 22px 0}.sns-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}.sns-chip-row b{padding:9px 13px;border:1px solid #ffc0a855;border-radius:20px;color:var(--peach);font-size:13px}.sns-link{color:var(--peach);text-decoration:none}.sns-consult{background:linear-gradient(120deg,#7f3040,#ff6f61)}@media(max-width:760px){.sns-wrap{width:min(100% - 32px,600px)}.sns-hero-grid,.sns-block .sns-wrap{grid-template-columns:1fr;gap:40px}.sns-hero{padding-top:110px}.sns-phone{transform:none}.sns-need-grid,.sns-platform-grid{grid-template-columns:1fr 1fr}.sns-section{padding:75px 0}}@media(max-width:480px){.sns-need-grid,.sns-platform-grid{grid-template-columns:1fr}.sns-hero h1{font-size:48px}}
/* SNS 首屏按钮交互 */
.sns-page .sns-btn{transition:background-color .28s ease, color .28s ease, box-shadow .28s ease, transform .28s ease}
.sns-page .sns-btn:hover,.sns-page .sns-btn:focus-visible{background:#fff;color:#d94f57;box-shadow:0 14px 38px #ffb39a88, inset 0 0 0 2px #ff6f61;transform:translateY(-3px)}
.sns-page .sns-btn:hover b,.sns-page .sns-btn:focus-visible b{color:#d94f57}
.sns-phone .post-art img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit;filter:saturate(.92) contrast(1.02)}
/* 痛点区：珊瑚树群轻量 3D 背景 */
.sns-needs{position:relative;isolation:isolate;overflow:hidden}
.sns-needs:before{content:"";position:absolute;z-index:-1;right:-5%;bottom:-24%;width:58%;height:78%;opacity:.32;filter:blur(.2px);background:radial-gradient(ellipse at 50% 100%,#ff6f6140 0 18%,transparent 19%),linear-gradient(78deg,transparent 46%,#ff806666 47% 49%,transparent 50%),linear-gradient(102deg,transparent 42%,#ef789355 43% 45%,transparent 46%),linear-gradient(65deg,transparent 56%,#ffb08a44 57% 59%,transparent 60%),radial-gradient(ellipse at 50% 96%,#ff6f6177 0 5%,transparent 6%);transform:perspective(500px) rotateX(16deg) rotateZ(-4deg);animation:coralSway 9s ease-in-out infinite alternate}
.sns-needs:after{content:"";position:absolute;z-index:-1;right:7%;bottom:8%;width:42%;height:30%;background:radial-gradient(ellipse,#ff9a6240,transparent 68%);filter:blur(24px);animation:coralGlow 6s ease-in-out infinite alternate}
@keyframes coralSway{from{transform:perspective(500px) rotateX(16deg) rotateZ(-4deg) translate3d(0,8px,0) scale(1)}to{transform:perspective(500px) rotateX(16deg) rotateZ(-1deg) translate3d(-14px,-8px,20px) scale(1.05)}}
@keyframes coralGlow{to{opacity:.55;transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.sns-needs:before,.sns-needs:after{animation:none}}
/* 平台矩阵浅色品牌展示区，等待替换为客户提供的正式 logo */
.sns-platforms{background:#fff7f1;color:#2b1720}
.sns-platforms .sns-heading h2{color:#2b1720}
.sns-platforms .sns-heading>span{color:#d95b52}
.sns-platforms .sns-platform{background:#fff;border-color:#e9c9bd;box-shadow:0 12px 30px #6b27300d}
.sns-platforms .sns-platform p{color:#765d62}
.sns-platforms .sns-platform>span,.sns-platforms .sns-platform i{color:#e45d55}
.sns-platforms .sns-platform:hover{background:#fff0e9;border-color:#ff796b;box-shadow:0 16px 34px #e45d5526}
.sns-platform-logo{width:48px;height:48px;object-fit:contain;display:block;border-radius:12px;background:#fff}.sns-platform:nth-child(6) .sns-platform-logo,.sns-platform:nth-child(5) .sns-platform-logo{background:#1d1118;padding:4px}.sns-platform-logo+h3{margin-top:14px}
.sns-platform-logo{width:56px;height:56px;padding:8px;box-sizing:border-box;object-fit:contain;border-radius:14px}
/* 视觉比例统一：裁切各品牌原图的外部留白，让图标主体同等存在感 */
.sns-platform-logo{width:56px;height:56px;padding:0;object-fit:cover;border-radius:14px;background:#fff}
.sns-path{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:18px}.sns-path>div{padding:24px;border-top:2px solid var(--coral);background:#ffffff0b}.sns-path b{color:var(--coral);display:block}.sns-path strong{display:block;font-size:20px;margin:14px 0 6px}.sns-path small{color:#d9bfc3}.sns-path>i{color:var(--peach);font-size:24px}.sns-strategy em{color:var(--coral);font-style:normal}@media(max-width:760px){.sns-path{grid-template-columns:1fr 1fr}.sns-path>i{display:none}}
.sns-platform:nth-child(1) .sns-platform-logo,.sns-platform:nth-child(2) .sns-platform-logo,.sns-platform:nth-child(3) .sns-platform-logo,.sns-platform:nth-child(4) .sns-platform-logo{background:#fff}
.sns-platform:nth-child(5) .sns-platform-logo,.sns-platform:nth-child(6) .sns-platform-logo{background:#1d1118;padding:5px;object-fit:contain}
.sns-section{padding:clamp(82px,10vw,150px) 0}
.sns-heading h2{font-size:clamp(36px,4.5vw,64px);line-height:1.16}
.sns-need,.sns-platform{padding:30px}
/* 内容区统一互动层：进入、悬停、选择 */
.sns-reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}.sns-reveal.sns-visible{opacity:1;transform:none}.sns-rich{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;position:relative;overflow:hidden}.sns-rich:after{content:"";position:absolute;inset:-60% auto auto -30%;width:45%;height:220%;background:linear-gradient(90deg,transparent,#ffb89a18,transparent);transform:rotate(18deg) translateX(-180%);transition:transform .8s ease;pointer-events:none}.sns-rich:hover{transform:translateY(-8px);box-shadow:0 20px 55px #0003;border-color:var(--peach)}.sns-rich:hover:after{transform:rotate(18deg) translateX(430%)}.sns-chip-row b{cursor:pointer;transition:background .25s ease,color .25s ease,transform .25s ease}.sns-chip-row b:hover,.sns-chip-row b.is-active{background:var(--coral);color:#fff;transform:translateY(-3px)}.sns-strategy .sns-path>div{transition:transform .3s ease,background .3s ease,box-shadow .3s ease}.sns-strategy .sns-path>div:hover{transform:translateY(-7px);background:#ff6f611c;box-shadow:0 14px 30px #0003}.sns-process .sns-rich,.sns-analytics .sns-rich{background:linear-gradient(135deg,#ff6f6120,#ffffff08)}
@media(prefers-reduced-motion:reduce){.sns-reveal{opacity:1;transform:none}.sns-rich,.sns-chip-row b{transition:none}}
.sns-social-orbit{height:290px;max-width:560px;margin:0 auto 55px;position:relative;perspective:900px;display:grid;place-items:center}.orbit-ring{position:absolute;border:1px solid #ff9a6266;border-radius:50%;transform:rotateX(64deg) rotateZ(-12deg);animation:orbitSpin 16s linear infinite}.ring-a{width:260px;height:150px}.ring-b{width:430px;height:220px;border-color:#ef789344;animation-duration:23s;animation-direction:reverse}.orbit-core{width:110px;height:110px;border-radius:50%;display:grid;place-items:center;align-content:center;background:radial-gradient(circle at 35% 28%,#ffc0a8,#ff6f61 48%,#7e3048);box-shadow:0 0 55px #ff6f6177, inset 0 0 25px #fff5;z-index:2;font-size:14px;letter-spacing:.12em;font-weight:700}.orbit-core span{font-size:11px;letter-spacing:0;color:#fff;margin-top:6px}.orbit-node{position:absolute;z-index:3;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#c64f55;font-size:22px;box-shadow:0 8px 24px #0004;animation:nodeFloat 4s ease-in-out infinite}.orbit-node small{position:absolute;top:64px;color:#ffc0a8;font-size:11px;white-space:nowrap}.node-like{left:8%;top:35%}.node-share{right:9%;top:24%;animation-delay:1s}.node-comment{left:22%;bottom:2%;animation-delay:2s}.node-dm{right:22%;bottom:0;animation-delay:3s}@keyframes orbitSpin{to{transform:rotateX(64deg) rotateZ(348deg)}}@keyframes nodeFloat{50%{translate:0 -9px}}@media(max-width:760px){.sns-social-orbit{height:240px;transform:scale(.8);margin:-15px auto 20px}.sns-path{margin-top:10px}}
/* 后续模块使用明显的色阶，避免相邻区块融成一片 */
.sns-page .sns-cases{background:linear-gradient(135deg,#381722 0%,#51202d 52%,#2c1420 100%)}
.sns-page .sns-engagement{background:linear-gradient(120deg,#241a2d 0%,#40213b 55%,#1d1728 100%)}
.sns-page .sns-conversion{background:linear-gradient(120deg,#172b32 0%,#214c50 55%,#132227 100%)}
.sns-page .sns-analytics{background:linear-gradient(120deg,#321d31 0%,#6a3042 52%,#281724 100%)}
.sns-page .sns-process{background:linear-gradient(120deg,#1d2635 0%,#2f4860 55%,#17202b 100%)}
.sns-page .sns-packages{background:linear-gradient(120deg,#43231d 0%,#75402d 55%,#2b181b 100%)}
.sns-page .sns-faq{background:#f8eee7;color:#2b1720}.sns-page .sns-faq .sns-heading h2{color:#2b1720}.sns-page .sns-faq .sns-heading>span{color:#d95b52}.sns-page .sns-faq .sns-rich{background:#fff;border-color:#e7c9bd}.sns-page .sns-faq .sns-rich p{color:#765d62}
.sns-page .sns-consult{background:linear-gradient(120deg,#ff6f61,#bd4058 55%,#692841)}
.sns-page .sns-consult{position:relative;isolation:isolate;overflow:hidden}
.sns-page .sns-consult:before{content:"";position:absolute;z-index:-1;right:-8%;top:4%;width:min(62vw,760px);height:min(62vw,760px);border-radius:50%;opacity:.22;background:repeating-radial-gradient(ellipse at center,transparent 0 34px,#ffe0cf 35px 36px),repeating-linear-gradient(0deg,transparent 0 44px,#ffe0cf 45px 46px),repeating-linear-gradient(90deg,transparent 0 44px,#ffe0cf 45px 46px);transform:rotate(-18deg) perspective(700px) rotateY(-25deg);animation:earthGridDrift 18s linear infinite;pointer-events:none}
.sns-page .sns-consult:after{content:"";position:absolute;z-index:-1;right:10%;top:20%;width:36%;height:55%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3 0 3%,transparent 4%),radial-gradient(circle at 65% 58%,#fff2 0 2%,transparent 3%),radial-gradient(circle,#ffb99722,transparent 68%);filter:blur(2px);pointer-events:none}
@keyframes earthGridDrift{to{transform:rotate(-18deg) perspective(700px) rotateY(25deg) rotateZ(360deg)}}
@media(max-width:760px){.sns-page .sns-consult:before{right:-35%;top:28%;width:115vw;height:115vw;opacity:.14}.sns-page .sns-consult:after{right:0;width:70%}}
/* 转化流程横屏衬底：先用低对比度全球光带占位，后续可直接替换为真实宽幅图 */
.sns-page .sns-strategy{position:relative;isolation:isolate;overflow:hidden;background:#24131c}
.sns-page .sns-strategy:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#24131cf2 0%,#24131cb8 42%,#24131c66 72%,#24131cf0 100%),radial-gradient(ellipse at 74% 62%,#ff6f6133 0,transparent 34%),linear-gradient(115deg,transparent 25%,#b34c6540 48%,transparent 70%);opacity:.9;pointer-events:none}
.sns-page .sns-strategy:after{content:"";position:absolute;z-index:-1;left:48%;right:-8%;bottom:-20%;height:76%;border:1px solid #ffc0a822;border-radius:50%;transform:rotate(-12deg);box-shadow:0 0 0 22px #ffc0a80b,0 0 0 48px #ffc0a806;animation:strategyBackdrop 18s ease-in-out infinite alternate;pointer-events:none}
@keyframes strategyBackdrop{to{transform:rotate(-5deg) translateY(-12px) scale(1.05)}}
/* 横屏商业金融中心背景图 */
.sns-page .sns-strategy{background-image:linear-gradient(90deg,rgba(36,19,28,.22),rgba(36,19,28,.08)),url('/static/images/sns/sns-finance-center.webp');background-size:cover;background-position:center;background-repeat:no-repeat}
.sns-page .sns-strategy:before{background:linear-gradient(90deg,#24131ccf 0%,#24131c82 38%,#24131c30 75%,#24131c88 100%),radial-gradient(ellipse at 74% 62%,#ff6f6126 0,transparent 34%)}
@media(max-width:760px){.sns-page .sns-strategy{background-position:64% center}}
/* 提高背景压暗度，确保标题和流程文字清晰 */
.sns-page .sns-strategy{background-image:linear-gradient(90deg,rgba(24,10,17,.58),rgba(24,10,17,.32)),url('/static/images/sns/sns-finance-center.webp')}
.sns-page .sns-strategy:before{background:linear-gradient(90deg,#180a11ed 0%,#180a11b8 42%,#180a1166 76%,#180a11b5 100%),radial-gradient(ellipse at 74% 62%,#ff6f6118 0,transparent 34%)}
