/* V1.3.1：仅修复“AI智能源头守护”流程在宽屏下的文字折行与光效遮挡。 */
html, body { max-width: 100%; overflow-x: clip; }
@media (min-width: 901px) {
.source-guard { grid-template-columns: .78fr 1.48fr; gap: 34px; }
.guard-flow { justify-content: flex-start; padding-right: 58px; }
.guard-flow article { width: 142px; min-width: 142px; padding: 19px 13px; }
.guard-flow article b { font-size: 14px; letter-spacing: -.05em; white-space: nowrap; }
.guard-flow > i { width: 14px; min-width: 14px; }
.mic-shield { width: 70px; height: 70px; right: 0; bottom: 21px; font-size: 34px; }
}
/* V1.3.2：Logo 改为蓝色盾牌声波，并为后台换标预留图片容器。 */
.brand { gap: 13px; letter-spacing: .1em; }
.brand-mark { width: 37px; height: 42px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.brand-mark svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 7px rgba(49, 179, 255, .52)); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 7px rgba(49, 179, 255, .52)); }
.shield-fill { fill: #07366c; opacity: .95; }
.shield-stroke { fill: none; stroke: #199deb; stroke-width: 1.5; }
.wave { fill: none; stroke: #6af4ef; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.bar { fill: none; stroke: #38aefa; stroke-width: 1.6; stroke-linecap: round; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand-copy > span { font-size: 21px; font-weight: 700; color: #f3f8ff; letter-spacing: .12em; }
.brand-copy small { font-size: 7px; font-weight: 600; letter-spacing: .2em; color: #54b9ef; }
.nav-account { display: flex; align-items: center; gap: 16px; }
.nav-account > a:first-child { color: #b7cbe0; text-decoration: none; font-size: 13px; }
.nav-account .nav-cta { display: inline-flex; }
.nav-panel { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 34px; }
.nav-menu-toggle { display: none; }
/* V1.5.1：套餐层级与全站导航交互。 */
.nav { position: sticky; top: 0; z-index: 30; transition: background .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease; }
.nav.is-scrolled { background: rgba(3, 13, 27, .78); border-color: rgba(107, 198, 255, .28); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 0 0 13px 13px; }
.nav nav a { position: relative; transition: color .2s ease; }
.nav nav a.active { color: #76ede6; }
.nav nav a.active:after { content: ''; position: absolute; left: 0; right: 0; bottom: -11px; height: 2px; border-radius: 4px; background: linear-gradient(90deg, #48e2de, #7e75ff); box-shadow: 0 0 10px #48e2de; }
.annual-mark { position: absolute; top: 16px; right: 16px; padding: 5px 8px; color: #e6dcff; background: rgba(127, 101, 250, .28); border: 1px solid rgba(181, 151, 255, .34); border-radius: 6px; font-size: 11px; }
.promo-mark { position: absolute; top: 16px; right: 16px; padding: 5px 8px; color: #8ff7eb; background: rgba(71, 222, 207, .12); border: 1px solid rgba(92, 235, 218, .3); border-radius: 6px; font-size: 11px; }
.price-stack { display: block !important; margin: 12px 0 16px; letter-spacing: 0 !important; }
.price-stack del { display: block; margin-bottom: 5px; color: #6f859d; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.price-stack .current-price { display: block; color: #f0fbff; font-size: 45px; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.price-stack .current-price i { color: #a6bfd6; font-size: 14px; font-style: normal; font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.price-grid > article.featured .current-price { color: #c6d3ff; text-shadow: 0 0 22px rgba(136, 123, 255, .25); }
.price-grid > article:nth-child(3) .current-price { color: #9ff5eb; text-shadow: 0 0 25px rgba(78, 230, 221, .23); }
.pricing-lead { max-width: 760px; margin: 12px auto 0; color: #9db7ce; font-size: 13px; line-height: 1.7; }
/* V1.5.4：年度顶配版使用独立的深海军蓝与玉石青绿体系。 */
.price-grid > article:nth-child(3) { overflow: hidden; border-color: rgba(87, 225, 211, .62); background: radial-gradient(310px 210px at 83% 9%, rgba(64, 222, 205, .19), transparent 61%), radial-gradient(230px 190px at 0 100%, rgba(28, 95, 146, .3), transparent 70%), linear-gradient(145deg, #0a2944 0%, #061c33 50%, #041426 100%); box-shadow: 0 20px 55px rgba(1, 11, 27, .55), inset 0 1px 0 rgba(141, 255, 238, .13); }
.price-grid > article:nth-child(3):before { content: ''; position: absolute; width: 260px; height: 260px; right: -150px; top: 32%; border-radius: 50%; background: radial-gradient(circle, rgba(64, 246, 224, .18), transparent 68%); pointer-events: none; }
.price-grid > article:nth-child(3) > * { position: relative; z-index: 1; }
.price-grid > article:nth-child(3) .annual-mark { color: #c9fff9; background: linear-gradient(110deg, rgba(26, 159, 159, .37), rgba(52, 112, 205, .34)); border-color: rgba(112, 252, 235, .58); box-shadow: 0 0 16px rgba(70, 227, 214, .16); }
.price-grid > article.monthly-glow {
border-color: rgba(122, 182, 255, .42);
background:
radial-gradient(360px 180px at 82% 0%, rgba(56, 166, 255, .18), transparent 64%),
radial-gradient(180px 120px at 0% 100%, rgba(98, 233, 255, .16), transparent 66%),
linear-gradient(145deg, #081f37 0%, #041a34 49%, #02132a 100%);
box-shadow: 0 18px 42px rgba(0, 70, 168, .25), inset 0 1px 0 rgba(155, 235, 255, .12);
animation: monthly-glow 6.4s ease-in-out infinite;
}
.price-grid > article.monthly-glow::before,
.price-grid > article.monthly-glow::after {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
pointer-events: none;
z-index: 0;
border: 1px solid rgba(94, 212, 255, .26);
}
.price-grid > article.monthly-glow::after {
inset: 8px;
border: 1px dashed rgba(123, 233, 255, .28);
opacity: .75;
animation: monthly-arc 3.2s linear infinite;
}
.price-grid > article.monthly-glow > * { position: relative; z-index: 1; }
.price-grid > article.monthly-glow .current-price { color: #d4e7ff; text-shadow: 0 0 22px rgba(114, 184, 255, .36); }
.price-grid > article.monthly-glow .button { border-color: rgba(130, 218, 255, .52); color: #eff8ff; background: linear-gradient(135deg, rgba(4, 56, 102, .95), rgba(8, 24, 46, .95)); box-shadow: inset 0 1px 0 rgba(165, 225, 255, .15), 0 9px 20px rgba(27, 126, 206, .19); }
@keyframes monthly-glow {
0%, 100% { box-shadow: 0 18px 42px rgba(0, 70, 168, .25), inset 0 1px 0 rgba(155, 235, 255, .12); }
50% { box-shadow: 0 22px 48px rgba(31, 112, 231, .33), inset 0 1px 0 rgba(186, 240, 255, .22); }
}
@keyframes monthly-arc {
0% { transform: rotate(0deg); opacity: .5; }
50% { opacity: .85; }
100% { transform: rotate(360deg); opacity: .5; }
}
.price-grid > article:nth-child(3) .current-price { color: #78f4df; text-shadow: 0 0 28px rgba(75, 238, 219, .34); }
.price-grid > article:nth-child(3) .price-stack del { color: #7997ac; }
.price-grid > article:nth-child(3) .annual-benefits { border-top-color: rgba(91, 231, 217, .25); }
.price-grid > article:nth-child(3) .annual-benefits li { color: #c0e7e9; }
.price-grid > article:nth-child(3) .annual-benefits li:before { color: #74f3df; text-shadow: 0 0 9px rgba(99, 247, 224, .55); }
.price-grid > article:nth-child(3) .button { color: #d9fffb; border-color: rgba(105, 245, 226, .62); background: linear-gradient(135deg, rgba(8, 56, 78, .94), rgba(5, 34, 64, .94)); box-shadow: inset 0 1px 0 rgba(173, 255, 248, .15), 0 9px 20px rgba(4, 154, 161, .13); }
.price-grid > article:nth-child(3) .button:hover { background: linear-gradient(135deg, #0c6676, #0a3d6a); box-shadow: 0 12px 27px rgba(27, 216, 202, .22), inset 0 1px 0 rgba(203, 255, 250, .25); }
.annual-benefits { margin: 14px 0 5px; padding: 0; list-style: none; border-top: 1px solid rgba(115, 203, 255, .14); }
.annual-benefits li { position: relative; padding: 6px 0 0 18px; color: #a9c5db; font-size: 11px; line-height: 1.45; }
.annual-benefits li:before { content: '✓'; position: absolute; left: 0; color: #62e6db; }
.price-grid > article:nth-child(3) > p { min-height: auto; }
.risk-estimate { margin: 18px 0 14px; padding: 15px 0 13px; border-block: 1px solid rgba(107, 214, 255, .16); }
.risk-estimate strong { display: block; color: #62e8df; font-size: 37px; line-height: 1; letter-spacing: -.06em; text-shadow: 0 0 20px rgba(82, 231, 223, .23); }
.price-grid > article.featured .risk-estimate strong { color: #bdc6ff; text-shadow: 0 0 22px rgba(141, 125, 255, .32); }
.risk-estimate b { display: block; margin-top: 8px; color: #e5f6ff; font-size: 12px; line-height: 1.55; }
.risk-estimate small { display: block; margin-top: 7px; color: #7f9db6; font-size: 10px; line-height: 1.6; }
.pricing-disclaimer { max-width: 760px; margin: 20px auto 0; color: #758fa8; text-align: center; font-size: 11px; line-height: 1.7; }
#back-to-top { position: fixed; right: 28px; bottom: 30px; z-index: 25; width: 46px; height: 46px; border: 1px solid rgba(118, 221, 255, .58); border-radius: 14px; color: white; background: linear-gradient(135deg, #3b87ff, #7a67f8); box-shadow: 0 12px 28px rgba(62, 117, 255, .34), 0 0 18px rgba(79, 226, 222, .16); font: 700 24px/1 var(--sans); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(14px) scale(.94); transition: .25s ease; }
#back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
#back-to-top:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 35px rgba(62, 117, 255, .52), 0 0 22px rgba(79, 226, 222, .32); }
@media (max-width: 900px), (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
body.nav-menu-open { overflow: hidden; }
body.nav-menu-open:before { content: ''; position: fixed; inset: 70px 0 0; z-index: 27; background: rgba(2, 8, 17, .66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.nav { min-height: 70px; height: 70px; padding-block: 8px; flex-wrap: nowrap; }
.nav-menu-toggle { display: grid; place-content: center; gap: 5px; order: 3; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid rgba(0, 198, 255, .36); border-radius: 13px; color: #e6e8eb; background: linear-gradient(145deg, rgba(0, 102, 255, .18), rgba(10, 15, 23, .92)); box-shadow: inset 0 1px 0 rgba(230, 232, 235, .08); cursor: pointer; }
.nav-menu-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #0066ff, #00c6ff); transition: transform .2s ease, opacity .2s ease; }
.nav-menu-toggle:focus-visible { outline: 2px solid #00c6ff; outline-offset: 3px; }
.nav.is-menu-open .nav-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-menu-open .nav-menu-toggle span:nth-child(2) { opacity: 0; }
.nav.is-menu-open .nav-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 31; display: grid; align-items: stretch; justify-content: stretch; gap: 12px; max-height: calc(100dvh - 92px); padding: 13px; overflow-y: auto; border: 1px solid rgba(0, 198, 255, .24); border-radius: 16px; background: linear-gradient(160deg, rgba(10, 15, 23, .98), rgba(4, 23, 43, .98)); box-shadow: 0 24px 60px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(230, 232, 235, .06); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px) scale(.985); transform-origin: top; transition: opacity .2s ease, visibility .2s ease, transform .2s ease; }
.nav.is-menu-open .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.nav-panel nav { display: grid; width: 100%; gap: 4px; padding: 0; overflow: visible; }
.nav-panel nav a { min-height: 46px; display: flex; align-items: center; padding: 0 14px; border-radius: 11px; color: #a9bfd3; font-size: 14px; }
.nav-panel nav a:hover, .nav-panel nav a.active { color: #e6e8eb; background: linear-gradient(90deg, rgba(0, 102, 255, .2), rgba(0, 198, 255, .07)); }
.nav-panel nav a.active:after { left: 4px; right: auto; top: 13px; bottom: 13px; width: 2px; height: auto; background: #00c6ff; }
.nav-account { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding-top: 12px; border-top: 1px solid rgba(230, 232, 235, .09); }
.nav-account > a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; }
.nav-account > a:first-child { border: 1px solid rgba(0, 198, 255, .2); background: rgba(0, 102, 255, .08); }
.nav-account .nav-cta { padding: 8px 10px; }
.nav:not(.nav-ready) { height: auto; flex-wrap: wrap; }
.nav:not(.nav-ready) .nav-menu-toggle { display: none; }
.nav:not(.nav-ready) .nav-panel { position: static; width: 100%; max-height: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.brand-copy small { display: none; }
#back-to-top { right: 16px; bottom: 18px; width: 42px; height: 42px; border-radius: 13px; }
}
.guard-slogan { color: #aeefff !important; font-size: 17px; font-weight: 700; line-height: 1.65 !important; margin-bottom: 15px !important; }
.guard-secondary { color: #a6bfd6 !important; font-size: 13px; line-height: 1.75 !important; margin-top: 15px !important; }
.guard-footnote { position: absolute; z-index: 2; left: 66px; bottom: 30px; right: 66px; margin: 0; color: #7694b0; font-size: 11px; line-height: 1.65; }
@media (min-width: 901px) { .source-guard { padding-bottom: 92px; } .guard-flow article { min-height: 164px; } .guard-flow article small { line-height: 1.55; } }
@media (max-width: 900px) {
.guard-flow { padding-right: 0; gap: 10px; }
.guard-flow article { width: calc(50% - 5px); min-width: 0; }
.guard-flow article b { word-break: keep-all; }
.mic-shield { right: 2px; bottom: -34px; }
.guard-footnote { position: relative; left: auto; right: auto; bottom: auto; grid-column: 1 / -1; margin-top: -15px; }
}
/* V1.4：从“工具介绍”升级为“直播风险源头防护系统”。 */
.pain-entry { margin: 12px auto 88px; padding: 44px 0; display: grid; grid-template-columns: .7fr 1.3fr; gap: 56px; border-block: 1px solid var(--line); }
.pain-entry h2 { margin: 0 0 15px; font-size: clamp(30px, 3.5vw, 46px); line-height: 1.15; letter-spacing: -.05em; }
.pain-entry-copy > p:not(.eyebrow) { color: #a9c1d7; line-height: 1.8; margin: 0; }
.pain-entry-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pain-entry-list article { padding: 18px; border: 1px solid rgba(93, 190, 255, .2); border-radius: 13px; background: linear-gradient(145deg, rgba(10, 35, 61, .8), rgba(4, 15, 28, .55)); }
.pain-entry-list span { display: block; color: #63dfdc; font-size: 11px; margin-bottom: 23px; }
.pain-entry-list b { display: block; font-size: 15px; line-height: 1.5; }
.pain-entry-list small { display: block; margin-top: 12px; color: #819eb8; font-size: 11px; line-height: 1.7; }
.source-guard { display: block; padding: 60px 66px 82px; }
.guard-heading { position: relative; z-index: 2; text-align: center; max-width: 630px; margin: 0 auto 46px; }
.guard-heading .eyebrow { justify-content: center; }
.guard-heading h2 { margin: 17px 0 9px; font-size: clamp(46px, 5vw, 67px); letter-spacing: -.06em; line-height: 1.03; }
.guard-heading > p:last-child { margin: 0; color: #a5dfea; font-size: 16px; font-weight: 700; letter-spacing: .16em; }
.guard-main { position: relative; z-index: 2; display: block; }
.guard-main .guard-copy { max-width: 720px; margin: 0 auto; text-align: center; }
.guard-main .guard-copy h3 { margin: 0 0 16px; font-size: 32px; line-height: 1.15; letter-spacing: -.045em; }
.guard-main .guard-copy h3 em { font-style: normal; color: #79ede6; }
.guard-main .guard-copy > p:not(.guard-secondary) { color: #bed2e4; line-height: 1.8; font-size: 14px; }
.guard-main .guard-flow { padding-right: 0; justify-content: flex-start; }
.guard-main .guard-flow article { width: 144px; min-width: 144px; min-height: 172px; }
.guard-main .guard-flow article b { font-size: 14px; white-space: normal; line-height: 1.35; }
.guard-main .guard-flow article small { font-size: 10px; line-height: 1.55; }
.guard-main .guard-flow > i { width: 13px; min-width: 13px; }
.intercept-lab { position: relative; z-index: 2; margin-top: 40px; min-height: 174px; display: grid; grid-template-columns: 1fr 40px .7fr 40px 1fr; align-items: center; gap: 10px; padding: 25px 32px; border: 1px solid rgba(91, 225, 220, .28); border-radius: 17px; background: radial-gradient(300px 150px at 50% 50%, rgba(47, 128, 242, .18), transparent 70%), rgba(3, 17, 33, .65); }
.intercept-mic, .intercept-scan, .intercept-result { position: relative; min-height: 112px; border: 1px solid rgba(112, 195, 255, .2); border-radius: 12px; background: rgba(6, 24, 45, .72); padding: 17px; }
.intercept-mic > span { color: #6ce8e1; font-size: 10px; letter-spacing: .15em; }.intercept-mic b { display: block; margin-top: 12px; font-size: 14px; }.intercept-wave { display: flex; gap: 4px; align-items: center; height: 42px; margin-top: 5px; }.intercept-wave i { width: 4px; border-radius: 4px; background: #61e6df; animation: wave 1.15s ease-in-out infinite; }.intercept-wave i:nth-child(2n) { animation-delay: .17s; }.intercept-wave i:nth-child(3n) { animation-delay: .33s; }
.intercept-arrow { color: #73b9ff; font-style: normal; font-size: 27px; text-align: center; text-shadow: 0 0 15px #479cff; }.intercept-scan { display: flex; flex-direction: column; justify-content: center; text-align: center; overflow: hidden; }.intercept-scan:before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(90, 245, 233, .22), transparent); animation: scan 2.2s ease-in-out infinite; }.intercept-scan span, .intercept-scan b, .intercept-scan small { position: relative; z-index: 1; }.intercept-scan span { color: #77f5ec; font-weight: 800; font-size: 22px; }.intercept-scan b { margin-top: 9px; font-size: 15px; }.intercept-scan small { margin-top: 6px; color: #86a9c3; font-size: 10px; }@keyframes scan { from { transform: translateY(-110%); } to { transform: translateY(110%); } }
.intercept-result { border-color: rgba(115, 125, 255, .52); display: flex; flex-direction: column; gap: 5px; }.intercept-result small { color: #879fba; font-size: 10px; }.intercept-result del { color: #ff9aa7; font-size: 14px; }.intercept-result > i { color: #67e7df; font-style: normal; line-height: 1; }.intercept-result strong { color: #f5feff; font-size: 24px; letter-spacing: .1em; }.intercept-result b { color: #63ead2; font-size: 11px; }
.source-guard .guard-footnote { position: relative; left: auto; right: auto; bottom: auto; z-index: 2; margin: 20px 0 0; text-align: center; }
@media (max-width: 900px) { .pain-entry, .guard-main { grid-template-columns: 1fr; }.pain-entry-list { grid-template-columns: 1fr; }.source-guard { padding: 40px 28px 52px; }.intercept-lab { grid-template-columns: 1fr; padding: 20px; }.intercept-arrow { transform: rotate(90deg); }.guard-main .guard-flow article { width: calc(50% - 5px); min-width: 0; }.guard-main .guard-flow > i { display: none; } }
/* 性能保护：保留科技感，但避免在移动端持续重绘大面积光效。 */
@media (max-width: 900px) {
.ambient { filter: blur(64px); opacity: .12; }
.grid { opacity: .14; }
.source-guard:after { animation: none; }
.ring-two { animation-duration: 38s; }
.intercept-scan:before { animation-duration: 3.4s; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}
/* V1.2 手机端价值卡：以低透明度的主题数据图形补足空间，文字始终优先。 */
.outcome-metrics article { position: relative; isolation: isolate; overflow: hidden; }
.outcome-metrics article::before,
.outcome-metrics article::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
/* 01：声波与风险扫描 */
.outcome-metrics article:nth-child(1)::before { width: 116px; height: 116px; right: -25px; bottom: -34px; border: 1px solid rgba(86, 239, 233, .28); border-radius: 50%; box-shadow: 0 0 0 15px rgba(86, 239, 233, .045), 0 0 0 31px rgba(86, 239, 233, .035); }
.outcome-metrics article:nth-child(1)::after { width: 88px; height: 42px; right: 1px; bottom: 23px; opacity: .14; background: repeating-linear-gradient(90deg, transparent 0 7px, #63ede1 7px 11px, transparent 11px 17px); clip-path: polygon(0 47%, 7% 35%, 14% 60%, 21% 18%, 28% 70%, 35% 38%, 42% 54%, 49% 15%, 56% 70%, 63% 37%, 70% 58%, 77% 24%, 84% 62%, 91% 43%, 100% 50%, 100% 100%, 0 100%); }
/* 02：录屏回放时间轴 */
.outcome-metrics article:nth-child(2)::before { width: 122px; height: 74px; right: -10px; bottom: 15px; opacity: .15; border: 1px solid rgba(119, 163, 255, .58); border-radius: 11px; background: linear-gradient(180deg, transparent 0 41%, rgba(125, 158, 255, .6) 42% 44%, transparent 45%), radial-gradient(circle at 68% 43%, #f5b959 0 5px, transparent 6px), radial-gradient(circle at 30% 43%, #68e8e3 0 3px, transparent 4px); box-shadow: inset 0 0 26px rgba(84, 128, 255, .18); }
.outcome-metrics article:nth-child(2)::after { right: 0; bottom: 25px; width: 88px; height: 17px; opacity: .18; border-block: 1px dashed rgba(144, 206, 255, .55); }
/* 03：个人模型的神经网络 */
.outcome-metrics article:nth-child(3)::before { width: 135px; height: 135px; right: -31px; bottom: -47px; opacity: .17; background: radial-gradient(circle at 24% 28%, #70f1e5 0 3px, transparent 4px), radial-gradient(circle at 68% 20%, #8b8cff 0 4px, transparent 5px), radial-gradient(circle at 77% 63%, #6be4fa 0 3px, transparent 4px), radial-gradient(circle at 31% 74%, #65f1dd 0 3px, transparent 4px), linear-gradient(29deg, transparent 45%, rgba(107, 234, 229, .9) 46% 47%, transparent 48%), linear-gradient(-35deg, transparent 48%, rgba(131, 143, 255, .8) 49% 50%, transparent 51%); filter: blur(.15px); }
.outcome-metrics article:nth-child(3)::after { width: 83px; height: 83px; right: -12px; bottom: -17px; border: 1px solid rgba(104, 239, 228, .26); border-radius: 50%; box-shadow: 0 0 22px rgba(88, 229, 220, .12); }
.outcome-metrics article strong { position: relative; z-index: 1; }
.outcome-metrics article span { position: relative; z-index: 1; font-weight: 700; }
@media (max-width: 900px) {
.outcome-metrics { gap: 13px; }
.outcome-metrics article { min-height: 142px; padding: 23px 22px; border-color: rgba(109, 202, 255, .27); box-shadow: inset 0 1px 0 rgba(176, 240, 255, .05), 0 16px 28px rgba(0, 0, 0, .12); background: linear-gradient(135deg, rgba(17, 48, 81, .82), rgba(4, 17, 33, .74)); }
.outcome-metrics article b { color: #75efe8; }
.outcome-metrics article strong { margin: 18px 0 8px; font-size: 23px; letter-spacing: -.02em; }
.outcome-metrics article span { color: #b8cce1; font-size: 14px; }
.outcome-metrics article:nth-child(3) { border-color: rgba(92, 233, 220, .39); background: radial-gradient(180px 100px at 100% 100%, rgba(75, 202, 212, .13), transparent 70%), linear-gradient(135deg, rgba(18, 56, 84, .86), rgba(6, 20, 40, .78)); }
}
/* V1.2 正式品牌与在线客服：沿用播盾深色 VI，动态内容由脚本以 textContent 写入。 */
.brand { min-width: 146px; }
.brand-lockup { display: block; width: 146px; height: auto; max-height: 52px; object-fit: contain; }
.footer-brand img { display: block; width: 132px; height: auto; max-height: 46px; object-fit: contain; }
.shield-core { width: 188px; height: 188px; border-radius: 34px; background: radial-gradient(circle at 50% 22%, rgba(0, 198, 255, .3), rgba(6, 23, 48, .96) 68%); }
.shield-vi-icon { display: block; width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0, 102, 255, .36)); }
.shield-core b { margin-top: 10px; }
.official-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px auto 10px; }
.official-contact > span,
.official-contact > a { min-width: 168px; min-height: 54px; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 9px 14px; border: 1px solid rgba(0, 198, 255, .2); border-radius: 11px; color: #edf6ff; background: rgba(5, 25, 49, .62); text-align: left; text-decoration: none; }
.official-contact small { color: #789cb9; font-size: 10px; letter-spacing: .08em; }
.official-contact b { color: #dffcff; font-size: 14px; letter-spacing: .03em; }
.official-contact > a:hover { border-color: rgba(0, 198, 255, .55); background: rgba(8, 44, 78, .76); }
body.support-dialog-open { overflow: hidden; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.support-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 70; min-width: 174px; min-height: 60px; display: grid; grid-template-columns: 40px 1fr 8px; align-items: center; gap: 10px; padding: 8px 13px 8px 9px; border: 1px solid rgba(0, 198, 255, .4); border-radius: 17px; color: #f4fbff; background: linear-gradient(135deg, rgba(9, 42, 79, .97), rgba(6, 17, 37, .98)); box-shadow: 0 18px 45px rgba(0, 0, 0, .38), 0 0 24px rgba(0, 102, 255, .15); font-family: var(--sans); text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, opacity .2s ease; }
.support-launcher:hover { transform: translateY(-2px); border-color: rgba(0, 198, 255, .75); }
.support-launcher img { width: 40px; height: 40px; border-radius: 11px; object-fit: contain; }
.support-launcher span { display: flex; flex-direction: column; gap: 3px; }
.support-launcher b { font-size: 14px; }
.support-launcher small { color: #83a9c5; font-size: 10px; }
.support-launcher > i { width: 8px; height: 8px; border-radius: 50%; background: #42e4bd; box-shadow: 0 0 10px rgba(66, 228, 189, .8); }
body.support-dialog-open .support-launcher { opacity: 0; pointer-events: none; }
#back-to-top.visible { bottom: 98px; }
.ambient-audio-control { position: fixed; left: 24px; bottom: 24px; z-index: 24; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(86, 209, 227, .34); border-radius: 999px; color: #cbeafb; background: rgba(4, 18, 35, .84); box-shadow: 0 12px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(221, 255, 255, .08); font: 700 11px var(--sans); letter-spacing: .04em; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.ambient-audio-control:hover { transform: translateY(-2px); border-color: rgba(82, 231, 223, .76); background: rgba(6, 35, 61, .94); }
.ambient-audio-control.is-playing { border-color: rgba(90, 238, 218, .78); color: #efffff; background: linear-gradient(120deg, rgba(0, 102, 255, .65), rgba(0, 167, 194, .65)); box-shadow: 0 12px 30px rgba(0, 102, 255, .22), 0 0 17px rgba(75, 232, 220, .16); }
.ambient-audio-control.is-unavailable { color: #7c99ae; cursor: default; }
.ambient-audio-control:disabled { opacity: .72; }
.ambient-audio-icon { display: grid; place-items: center; width: 18px; height: 18px; color: #63eee1; font-size: 17px; line-height: 1; }
.ambient-audio-control.is-playing .ambient-audio-icon { animation: ambient-audio-pulse 1.6s ease-in-out infinite; }
@keyframes ambient-audio-pulse { 50% { transform: scale(1.18); filter: drop-shadow(0 0 6px rgba(91, 242, 225, .88)); } }
.support-layer[hidden] { display: none !important; }
.support-layer { position: fixed; inset: 0; z-index: 120; display: grid; align-items: end; justify-items: end; padding: 20px; }
.support-backdrop { position: absolute; inset: 0; background: rgba(0, 7, 18, .54); backdrop-filter: blur(5px); }
.support-dialog { position: relative; width: min(430px, calc(100vw - 40px)); height: min(710px, calc(100dvh - 40px)); max-height: 710px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(0, 198, 255, .32); border-radius: 22px; outline: none; color: #edf6ff; background: radial-gradient(360px 210px at 100% 0, rgba(0, 102, 255, .18), transparent 70%), linear-gradient(160deg, #0a1b31, #050e1d 72%); box-shadow: 0 28px 80px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(230, 232, 235, .07); opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .2s ease, transform .2s ease; }
.support-layer.is-open .support-dialog { opacity: 1; transform: translateY(0) scale(1); }
.support-header { min-height: 78px; display: grid; grid-template-columns: 46px 1fr 44px; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(114, 194, 255, .15); background: rgba(4, 15, 31, .46); }
.support-header > img { width: 46px; height: 46px; border-radius: 13px; object-fit: contain; box-shadow: 0 8px 22px rgba(0, 102, 255, .22); }
.support-header h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.support-header p { display: flex; align-items: center; gap: 7px; margin: 5px 0 0; color: #85a5bf; font-size: 11px; }
.support-presence-dot { width: 7px; height: 7px; border-radius: 50%; background: #6f8297; box-shadow: 0 0 0 3px rgba(111, 130, 151, .12); }
.support-presence-dot.is-online { background: #42e4bd; box-shadow: 0 0 10px rgba(66, 228, 189, .8); }
.support-dismiss { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; color: #a9c0d5; background: rgba(112, 164, 209, .08); font: 300 28px/1 var(--sans); cursor: pointer; }
.support-dismiss:hover { color: #fff; background: rgba(112, 164, 209, .16); }
.support-direct { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(114, 194, 255, .12); color: #789bb7; background: rgba(2, 12, 25, .3); font-size: 10px; }
.support-direct span,
.support-direct a { min-height: 44px; display: flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.support-direct a { grid-column: 1 / -1; }
.support-direct b { color: #d5f5ff; font-size: 11px; }
.support-start-panel { flex: 1; overflow-y: auto; padding: 22px 20px 20px; scrollbar-color: rgba(80, 169, 226, .45) transparent; }
.support-intro small { color: #00c6ff; font-size: 9px; letter-spacing: .15em; }
.support-intro h3 { margin: 10px 0 8px; font-size: 21px; line-height: 1.35; }
.support-intro p { margin: 0 0 19px; color: #86a3bc; font-size: 12px; line-height: 1.65; }
.support-start-form { position: relative; display: flex; flex-direction: column; }
.support-start-form > label { margin: 13px 0 7px; color: #c9dceb; font-size: 12px; font-weight: 700; }
.support-start-form label em { color: #52e6dc; font-size: 10px; font-style: normal; font-weight: 500; }
.support-start-form label span { color: #6f91aa; font-size: 10px; font-weight: 500; }
.support-start-form input,
.support-start-form textarea,
.support-message-form textarea { width: 100%; min-height: 48px; border: 1px solid rgba(112, 195, 255, .2); border-radius: 11px; outline: 0; color: #edf6ff; background: rgba(3, 14, 29, .78); font: 13px/1.55 var(--sans); transition: border-color .2s ease, box-shadow .2s ease; }
.support-start-form input { padding: 0 13px; }
.support-start-form textarea { min-height: 96px; resize: vertical; padding: 11px 13px; }
.support-start-form input::placeholder,
.support-start-form textarea::placeholder,
.support-message-form textarea::placeholder { color: #58728a; }
.support-start-form input:focus,
.support-start-form textarea:focus,
.support-message-form textarea:focus { border-color: rgba(0, 198, 255, .7); box-shadow: 0 0 0 3px rgba(0, 198, 255, .09); }
.support-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.support-form-status,
.support-chat-status { min-height: 19px; margin: 9px 0 0; color: #8eabc2; font-size: 11px; line-height: 1.55; }
.support-form-status.is-error,
.support-chat-status.is-error { color: #ff9ead; }
.support-submit { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(105deg, #0066ff, #00aeea); box-shadow: 0 13px 28px rgba(0, 102, 255, .24); font: 700 13px var(--sans); cursor: pointer; }
.support-submit:disabled,
.support-message-form button:disabled,
.support-session-bar button:disabled { cursor: wait; opacity: .55; }
.support-chat-panel { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.support-chat-panel[hidden] { display: none !important; }
.support-session-bar { min-height: 47px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid rgba(114, 194, 255, .11); color: #7595ad; font-size: 10px; }
.support-session-bar button { min-width: 82px; min-height: 44px; border: 0; color: #91adc2; background: transparent; font: 11px var(--sans); cursor: pointer; }
.support-session-bar button:hover { color: #fff; }
.support-messages { min-height: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; padding: 17px 15px; scroll-behavior: smooth; scrollbar-color: rgba(80, 169, 226, .45) transparent; }
.support-empty { margin: auto; max-width: 260px; color: #6e8aa2; font-size: 12px; line-height: 1.7; text-align: center; }
.support-message { display: flex; align-items: flex-end; gap: 8px; }
.support-message.is-visitor { justify-content: flex-end; }
.support-message article { max-width: 82%; padding: 10px 12px; border: 1px solid rgba(112, 195, 255, .16); border-radius: 5px 15px 15px; background: rgba(10, 35, 61, .86); }
.support-message.is-visitor article { order: -1; border-color: rgba(0, 198, 255, .22); border-radius: 15px 5px 15px 15px; background: linear-gradient(135deg, rgba(0, 102, 255, .78), rgba(0, 143, 203, .68)); }
.support-message-name { display: block; margin-bottom: 5px; color: #78ddeb; font-size: 9px; font-weight: 700; }
.support-message.is-visitor .support-message-name { color: rgba(255, 255, 255, .75); }
.support-message-body { margin: 0; color: #ebf7ff; font-size: 13px; line-height: 1.58; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-message-time { display: block; margin-top: 6px; color: #6e8da7; font-size: 9px; text-align: right; }
.support-message.is-visitor .support-message-time { color: rgba(255, 255, 255, .65); }
.support-chat-status { margin: 0; padding: 0 15px 7px; }
.support-message-form { display: grid; grid-template-columns: 1fr 66px; gap: 9px; align-items: end; padding: 11px 13px 13px; border-top: 1px solid rgba(114, 194, 255, .13); background: rgba(3, 12, 25, .56); }
.support-message-form textarea { min-height: 52px; max-height: 112px; resize: none; padding: 9px 11px; }
.support-message-form button { min-width: 66px; min-height: 52px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #0066ff, #00aeea); font: 700 12px var(--sans); cursor: pointer; }
.support-launcher:focus-visible,
.support-dialog button:focus-visible,
.support-dialog a:focus-visible,
.official-contact a:focus-visible { outline: 2px solid #59eee8; outline-offset: 3px; }
@media (max-width: 600px) {
.brand { min-width: 112px; }
.brand-lockup { width: 112px; max-height: 42px; }
.official-contact { display: grid; grid-template-columns: 1fr; }
.official-contact > span, .official-contact > a { width: 100%; min-height: 52px; }
.footer-brand img { margin-inline: auto; }
.support-launcher { right: 14px; bottom: 14px; min-width: 58px; width: 58px; height: 58px; grid-template-columns: 1fr; padding: 8px; border-radius: 17px; }
.support-launcher img { width: 42px; height: 42px; margin: auto; }
.support-launcher span, .support-launcher > i { position: absolute; }
.support-launcher span { width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.support-launcher > i { right: 5px; top: 5px; border: 2px solid #061121; }
#back-to-top.visible { right: 17px; bottom: 84px; }
.ambient-audio-control { left: 14px; bottom: max(14px, env(safe-area-inset-bottom)); min-height: 44px; padding: 0 11px; }
.support-layer { padding: 0; }
.support-backdrop { display: none; }
.support-dialog { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
.support-header { padding-top: max(14px, env(safe-area-inset-top)); }
.support-direct { grid-template-columns: 1fr; }
.support-direct a { grid-column: auto; }
.support-start-panel { padding: 20px 18px max(22px, env(safe-area-inset-bottom)); }
.support-message-form { padding-bottom: max(13px, env(safe-area-inset-bottom)); }
}
/* 横屏手机的 CSS 宽度常超过 600px，仍使用完整客服工作区。 */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
.nav-panel nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-panel { max-height: calc(100dvh - 86px); }
.support-layer { padding: 0; }
.support-backdrop { display: none; }
.support-dialog { width: 100%; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
.support-header { padding-top: max(10px, env(safe-area-inset-top)); }
.support-message-form { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
.support-dialog,
.support-launcher,
.ambient-audio-control { transform: none !important; }
.support-messages { scroll-behavior: auto; }
.ambient-audio-control.is-playing .ambient-audio-icon { animation: none; }
}
/* 官网核心能力：从单一风控介绍扩展为播盾直播间六大工具能力。 */
.capability-item { min-height: 208px; grid-template-columns: 76px minmax(0, 1fr) 390px; gap: 30px; padding-block: 34px; }
.capability-copy { max-width: 560px; }
.capability-copy .ability-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #67e8e0; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.capability-copy .ability-kicker::before { width: 16px; height: 1px; content: ""; background: linear-gradient(90deg, #52ede3, transparent); }
.capability-copy h3 { margin-bottom: 10px; }
.capability-copy p { max-width: 590px; }
.capability-item .visual { height: 132px; box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 16px 45px rgba(0, 0, 0, .16); }
.realtime-guard-visual { padding: 20px 22px; }
.guard-signal { display: flex; align-items: center; gap: 8px; color: #83a8c0; font-size: 10px; }
.guard-signal i { width: 7px; height: 7px; border-radius: 50%; background: #5ff4df; box-shadow: 0 0 14px #5ff4df; animation: ability-pulse 1.6s ease-in-out infinite; }
.guard-risk-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.guard-risk-row b { color: #eaf8ff; font-size: 14px; }
.guard-risk-row strong { padding: 6px 10px; border: 1px solid rgba(255, 190, 92, .45); border-radius: 7px; color: #ffd078; background: rgba(255, 158, 43, .08); font-size: 10px; }
.guard-mini-wave { position: absolute; right: 22px; bottom: 18px; left: 22px; height: 27px; display: flex; align-items: flex-end; gap: 5px; }
.guard-mini-wave::before { position: absolute; right: 0; bottom: 2px; left: 0; height: 1px; content: ""; background: linear-gradient(90deg, rgba(85, 231, 222, .07), rgba(85, 231, 222, .48), rgba(107, 125, 255, .09)); }
.guard-mini-wave i { flex: 1; height: 18%; border-radius: 4px 4px 0 0; background: linear-gradient(#6f82ff, #54e9df); animation: ability-wave 1.8s ease-in-out infinite; }
.guard-mini-wave i:nth-child(2), .guard-mini-wave i:nth-child(7) { height: 44%; animation-delay: .2s; }
.guard-mini-wave i:nth-child(3), .guard-mini-wave i:nth-child(6) { height: 74%; animation-delay: .35s; }
.guard-mini-wave i:nth-child(4) { height: 100%; animation-delay: .45s; }
.guard-mini-wave i:nth-child(5) { height: 60%; animation-delay: .55s; }
.score-feature { min-height: 400px; grid-template-columns: 76px minmax(280px, .78fr) minmax(520px, 1.22fr); }
.score-feature .skin-showcase { height: auto; min-height: 314px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 13px; padding: 35px 14px 14px; overflow: visible; border-color: rgba(130, 110, 255, .25); background: radial-gradient(circle at 50% 0, rgba(91, 66, 180, .18), transparent 46%), rgba(7, 16, 32, .75); }
.skin-real-badge { position: absolute; top: 10px; right: 12px; z-index: 4; padding: 4px 8px; border: 1px solid rgba(96, 232, 222, .26); border-radius: 999px; color: #73e8e2; background: rgba(8, 34, 49, .78); font-size: 9px; letter-spacing: .08em; }
.skin-card { position: relative; aspect-ratio: 520 / 168; margin: 0; filter: drop-shadow(0 8px 15px rgba(0, 0, 0, .32)); transition: transform .25s ease, filter .25s ease; }
.skin-card:hover { z-index: 3; transform: translateY(-4px) scale(1.025); filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .44)); }
.skin-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.skin-avatar { position: absolute; top: 50%; left: 17.8%; z-index: 2; width: 20%; aspect-ratio: 1; display: grid; place-items: center; translate: -50% -50%; border: 2px solid rgba(255, 255, 255, .75); border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #7d9fff, #253074 55%, #0a102e); box-shadow: inset 0 0 12px rgba(255, 255, 255, .25); font-size: clamp(10px, 1.1vw, 15px); font-style: normal; font-weight: 800; }
.skin-card figcaption { position: absolute; top: 50%; left: 37%; z-index: 2; width: 48%; translate: 0 -50%; display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #fff; white-space: nowrap; }
.skin-card figcaption b { overflow: hidden; font-size: clamp(9px, .95vw, 13px); text-overflow: ellipsis; }
.skin-card figcaption small { padding: 4px 7px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: rgba(24, 10, 40, .26); font-size: clamp(7px, .7vw, 10px); }
.skin-gold figcaption { color: #fff7db; }
.skin-gold .skin-avatar { background: radial-gradient(circle at 35% 30%, #ffd77b, #a25e19 58%, #4c2709); }
.skin-pink .skin-avatar { background: radial-gradient(circle at 35% 30%, #ffc5ef, #8e51bc 58%, #34134f); }
.skin-black figcaption { color: #ffe6a4; }
.skin-black .skin-avatar { background: radial-gradient(circle at 35% 30%, #f6d083, #64502c 58%, #0d1016); }
.skin-ice figcaption { color: #dafbff; }
.skin-ice .skin-avatar { background: radial-gradient(circle at 35% 30%, #95f8ff, #3285ae 58%, #082b48); }
.local-review-visual { padding: 14px; }
.review-screen { width: 44%; height: 67px; display: grid; place-items: center; border: 1px solid rgba(91, 205, 255, .2); border-radius: 9px; background: linear-gradient(145deg, #0b2945, #071422); }
.review-screen span { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(91, 238, 229, .65); border-radius: 50%; color: #70eee6; font-size: 9px; }
.review-screen small { margin-top: -11px; color: #7898b0; font-size: 9px; }
.review-timeline { position: absolute; right: 18px; bottom: 33px; left: 49%; height: 2px; background: rgba(93, 168, 210, .22); }
.review-timeline i { position: absolute; top: 50%; left: 46%; width: 10px; height: 10px; translate: -50% -50%; border: 2px solid #ffbd4a; border-radius: 50%; background: #10223a; box-shadow: 0 0 13px rgba(255, 183, 68, .58); }
.review-timeline b { position: absolute; top: -28px; left: 46%; translate: -50%; padding: 5px 7px; border-radius: 5px; color: #ffc85e; background: rgba(111, 69, 6, .28); font-size: 9px; white-space: nowrap; }
.local-review-visual > em { position: absolute; right: 18px; bottom: 11px; color: #5be9e0; font-size: 9px; font-style: normal; letter-spacing: .1em; }
.spiderweb-visual { isolation: isolate; }
.spiderweb-visual::before, .spiderweb-visual::after { position: absolute; top: 50%; left: 50%; z-index: -1; content: ""; border: 1px solid rgba(79, 214, 225, .14); border-radius: 50%; translate: -50% -50%; }
.spiderweb-visual::before { width: 160px; height: 88px; }
.spiderweb-visual::after { width: 238px; height: 112px; }
.spiderweb-visual > b { position: absolute; top: 50%; left: 50%; translate: -50% -58%; color: #e7fbff; font-size: 14px; text-shadow: 0 0 18px #36d8df; }
.spiderweb-visual > small { position: absolute; top: 61%; left: 50%; translate: -50%; color: #52e5df; font-size: 8px; letter-spacing: .12em; }
.web-node { position: absolute; z-index: 2; min-width: 42px; padding: 5px 7px; border: 1px solid rgba(105, 223, 225, .3); border-radius: 6px; color: #8dcbd2; background: rgba(5, 23, 39, .9); font-size: 8px; text-align: center; }
.web-node.n1 { top: 16px; left: 24px; }.web-node.n2 { top: 17px; right: 24px; }.web-node.n3 { bottom: 15px; left: 35px; }.web-node.n4 { right: 35px; bottom: 15px; }
.web-line { position: absolute; top: 50%; left: 50%; z-index: 0; width: 128px; height: 1px; transform-origin: left; background: linear-gradient(90deg, rgba(83, 234, 225, .62), transparent); }
.web-line.l1 { rotate: 208deg; }.web-line.l2 { rotate: -28deg; }.web-line.l3 { rotate: 151deg; }.web-line.l4 { rotate: 29deg; }
.shake-machine-visual { display: grid; place-items: center; }
.shake-orbit { position: relative; width: 92px; height: 92px; display: grid; place-items: center; border: 1px solid rgba(100, 235, 226, .55); border-radius: 50%; box-shadow: inset 0 0 23px rgba(60, 195, 224, .1), 0 0 24px rgba(73, 226, 226, .08); animation: shake-orbit 4s linear infinite; }
.shake-orbit::before, .shake-orbit::after { position: absolute; content: ""; border: 1px dashed rgba(119, 116, 255, .32); border-radius: 50%; }
.shake-orbit::before { inset: -8px; }.shake-orbit::after { inset: 15px; }
.shake-orbit i { position: absolute; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #6af1df; box-shadow: 0 0 15px #5df1e2; }
.shake-orbit b { color: #f4fbff; font-size: 11px; letter-spacing: .1em; }
.shake-orbit small { position: absolute; top: 57%; color: #6ddedc; font-size: 8px; }
.shake-controls { position: absolute; right: 13px; display: grid; gap: 6px; }
.shake-controls span { min-width: 45px; padding: 5px 7px; border: 1px solid rgba(91, 213, 219, .2); border-radius: 5px; color: #82adb9; background: rgba(3, 18, 34, .58); font-size: 8px; text-align: center; }
.shake-machine-visual > em { position: absolute; bottom: 10px; left: 14px; color: #64e6df; font-size: 8px; font-style: normal; }
.soundboard-visual { padding: 14px 18px; }
.sound-bars { height: 62px; display: flex; align-items: center; gap: 7px; }
.sound-bars i { width: 8px; height: 24%; border-radius: 6px; background: linear-gradient(#7d79ff, #51e9df); box-shadow: 0 0 10px rgba(84, 229, 222, .12); animation: sound-bars 1.4s ease-in-out infinite; }
.sound-bars i:nth-child(2), .sound-bars i:nth-child(6) { height: 58%; animation-delay: .16s; }.sound-bars i:nth-child(3), .sound-bars i:nth-child(5) { height: 88%; animation-delay: .32s; }.sound-bars i:nth-child(4) { height: 100%; animation-delay: .48s; }
.sound-triggers { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 5px; }
.sound-triggers span { padding: 6px 7px; border: 1px solid rgba(91, 226, 222, .24); border-radius: 6px; color: #8dd3d1; background: rgba(7, 27, 44, .65); font-size: 8px; }
.soundboard-visual > b { position: absolute; top: 18px; right: 17px; color: #e7f8ff; font-size: 10px; letter-spacing: .14em; }
@keyframes ability-pulse { 50% { opacity: .42; box-shadow: 0 0 4px #5ff4df; } }
@keyframes ability-wave { 50% { scale: 1 .48; opacity: .58; } }
@keyframes shake-orbit { to { rotate: 360deg; } }
@keyframes sound-bars { 50% { scale: 1 .42; opacity: .6; } }
@media (max-width: 1050px) {
.capability-item, .score-feature { grid-template-columns: 56px minmax(0, 1fr) 350px; }
.score-feature { min-height: 360px; }
.score-feature .skin-showcase { min-height: 280px; }
}
@media (max-width: 900px) {
.capability-item, .score-feature { min-height: 0; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; }
.capability-item .visual { grid-column: 2; width: 100%; }
.score-feature .skin-showcase { min-height: 0; }
}
@media (max-width: 560px) {
.capability-item, .score-feature { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding-block: 27px; }
.capability-copy .ability-kicker { font-size: 9px; line-height: 1.6; letter-spacing: .04em; }
.capability-copy p { font-size: 13px; line-height: 1.75; }
.score-feature .skin-showcase { grid-template-columns: 1fr; gap: 10px; padding: 36px 10px 12px; }
.skin-card figcaption b { font-size: 13px; }
.skin-card figcaption small { font-size: 9px; }
.skin-avatar { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
.guard-signal i, .guard-mini-wave i, .shake-orbit, .sound-bars i { animation: none !important; }
.skin-card { transition: none; }
}
/* 存分卡头像与数字：对齐原始皮肤的空白头像框和信息区。 */
.skin-avatar { left: 26.6%; width: 17.2%; overflow: hidden; border-width: 2px; background: #0b1a31; }
.skin-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.skin-card figcaption { left: 40%; width: 53%; gap: 8px; }
.skin-card figcaption b { flex: 1 1 auto; min-width: 0; }
.skin-card figcaption small { flex: 0 0 auto; }
/* 头像摇一摇直接复用真实宣传动画，并裁出小猫、头像与按钮的演示区域。 */
.shake-feature { min-height: 430px; }
.shake-feature .visual.shake-avatar-machine-visual { width: min(100%, 300px); height: auto; aspect-ratio: 7 / 9; justify-self: center; border: 1px solid rgba(83, 204, 255, .55); border-radius: 20px; background: #050914; box-shadow: inset 0 0 0 1px rgba(93, 111, 255, .16), 0 20px 55px rgba(0, 0, 0, .38); overflow: hidden; }
.shake-avatar-machine-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
/* 使用完整透明 VI 标志，避免圆角图标素材在卡片边界处产生裁切错觉。 */
.shield-core { overflow: visible; }
.shield-vi-icon { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0, 102, 255, .36)); }
@media (max-width: 1050px) {
.shake-feature { min-height: 410px; }
}
@media (max-width: 900px) {
.shake-feature { min-height: 0; }
.shake-feature .visual.shake-avatar-machine-visual { width: min(100%, 300px); }
}
@media (max-width: 560px) {
.skin-card figcaption { left: 40%; width: 53%; }
.shake-feature .visual.shake-avatar-machine-visual { width: min(78vw, 300px); }
}
/* 存分卡最终锁定版：四张卡共用同一套坐标，不受姓名或分值长度影响。 */
.skin-card { aspect-ratio: 3 / 1; }
.skin-card > img { object-fit: fill; }
.skin-card figcaption { inset: 0; width: auto; height: auto; display: block; translate: none; }
.skin-card figcaption b { position: absolute; top: 50%; left: 40.2%; width: 20%; margin: 0; overflow: hidden; translate: 0 -50%; color: inherit; font-size: clamp(9px, .95vw, 13px); line-height: 1.2; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.skin-card figcaption small { position: absolute; top: 50%; right: 8.8%; width: 18%; min-width: 0; margin: 0; padding: 4px 2px; translate: 0 -50%; box-sizing: border-box; font-size: clamp(7px, .7vw, 10px); line-height: 1.2; text-align: center; white-space: nowrap; }
@media (max-width: 560px) {
.skin-card figcaption { left: 0; width: auto; }
.skin-card figcaption b { left: 40.2%; width: 20%; font-size: 13px; }
.skin-card figcaption small { right: 8.8%; width: 18%; font-size: 9px; }
}
/* Logo 旁的品牌签名：轻字重、冷白微渐变与极细分隔线，接近发布会视觉。 */
.nav-manifesto {
position: relative;
display: grid;
align-content: center;
align-self: center;
gap: 4px;
min-width: 188px;
margin: 0 auto 0 20px;
padding: 3px 0 3px 20px;
border-left: 1px solid rgba(164, 199, 224, .18);
white-space: nowrap;
}
.nav-manifesto::before {
position: absolute;
top: 3px;
bottom: 3px;
left: -1px;
width: 1px;
content: "";
opacity: .55;
background: linear-gradient(180deg, transparent, #7de9e0 46%, transparent);
animation: nav-manifesto-pulse 4.8s ease-in-out infinite;
}
.nav-manifesto strong {
color: transparent;
font-family: "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "PingFang SC", "Microsoft YaHei UI", sans-serif;
font-size: 12px;
font-weight: 300;
line-height: 1.15;
letter-spacing: .16em;
background: linear-gradient(96deg, #f3f7fb 0%, #c4d4e2 55%, #8fb0c8 100%);
-webkit-background-clip: text;
background-clip: text;
}
.nav-manifesto small {
color: rgba(127, 159, 183, .7);
font-family: "SF Pro Text", "Segoe UI Variable Text", "Inter", Arial, sans-serif;
font-size: 6px;
font-weight: 500;
line-height: 1;
letter-spacing: .31em;
}
@keyframes nav-manifesto-pulse { 0%, 100% { opacity: .22; } 50% { opacity: .8; } }
@media (max-width: 1160px) {
.nav-manifesto { min-width: 145px; margin-left: 14px; padding-left: 14px; }
.nav-manifesto strong { font-size: 10px; letter-spacing: .1em; }
.nav-manifesto small { font-size: 5px; letter-spacing: .23em; }
}
@media (max-width: 900px) {
.nav-manifesto { min-width: 0; margin-right: auto; }
}
@media (max-width: 560px) {
.nav-manifesto { gap: 3px; margin-left: 9px; padding-left: 9px; }
.nav-manifesto strong { font-size: 8px; letter-spacing: .04em; }
.nav-manifesto small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.nav-manifesto::before { animation: none !important; }
}
/* 贵宾灯牌重点宣传：把存分、身份感与三段成长做成独立体验模块。 */
.vip-growth {
position: relative;
isolation: isolate;
margin-block: 46px 116px;
padding: clamp(34px, 5vw, 68px);
overflow: hidden;
border: 1px solid rgba(105, 185, 255, .24);
border-radius: 28px;
background:
radial-gradient(640px 390px at 100% 0, rgba(94, 72, 214, .2), transparent 70%),
radial-gradient(540px 360px at 0 42%, rgba(0, 197, 218, .12), transparent 72%),
linear-gradient(145deg, rgba(7, 25, 45, .98), rgba(5, 12, 28, .98));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 34px 90px rgba(0, 0, 0, .24);
}
.vip-growth::before {
position: absolute;
inset: 0;
z-index: -1;
content: "";
opacity: .22;
background-image: linear-gradient(rgba(104, 186, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(104, 186, 255, .055) 1px, transparent 1px);
background-size: 54px 54px;
mask-image: linear-gradient(120deg, black, transparent 76%);
}
.vip-growth-hero { display: grid; grid-template-columns: minmax(0, .88fr) minmax(480px, 1.12fr); align-items: center; gap: clamp(34px, 5vw, 70px); }
.vip-growth-copy { min-width: 0; }
.vip-growth-badge { display: inline-flex; align-items: center; min-height: 29px; margin-bottom: 19px; padding: 0 11px; border: 1px solid rgba(86, 231, 224, .3); border-radius: 999px; color: #85eee7; background: rgba(15, 67, 80, .28); font-size: 10px; letter-spacing: .1em; }
.vip-growth-copy h2 { margin-bottom: 20px; color: #f3f8fc; font-size: clamp(42px, 4.8vw, 66px); font-weight: 650; line-height: 1.06; letter-spacing: -.055em; }
.vip-growth-copy h2 em { font-style: normal; background: linear-gradient(100deg, #70ede6, #8ba2ff 56%, #d9c0ff); background-clip: text; color: transparent; }
.vip-growth-lead { max-width: 580px; margin-bottom: 27px; color: #a8c0d6; font-size: 15px; line-height: 1.9; }
.vip-value-list { display: grid; gap: 8px; }
.vip-value-list article { min-height: 67px; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 13px; padding: 10px 13px; border: 1px solid rgba(102, 182, 236, .13); border-radius: 12px; background: rgba(5, 20, 37, .5); }
.vip-value-list article > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(95, 236, 226, .26); border-radius: 50%; color: #68e8df; font-size: 9px; }
.vip-value-list b { display: block; margin-bottom: 5px; color: #e9f7ff; font-size: 13px; }
.vip-value-list small { display: block; color: #7595af; font-size: 10px; line-height: 1.55; }
.vip-feature-stage { position: relative; min-height: 440px; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4vw, 48px); overflow: hidden; border: 1px solid rgba(124, 116, 255, .28); border-radius: 22px; background: radial-gradient(circle at 50% 28%, rgba(127, 89, 240, .22), transparent 55%), rgba(6, 13, 31, .74); }
.vip-feature-stage::before, .vip-feature-stage::after { position: absolute; top: 49%; left: 50%; content: ""; translate: -50% -50%; border: 1px solid rgba(111, 208, 237, .1); border-radius: 50%; pointer-events: none; }
.vip-feature-stage::before { width: 520px; height: 260px; rotate: -8deg; }
.vip-feature-stage::after { width: 430px; height: 330px; border-style: dashed; rotate: 18deg; }
.vip-stage-label { position: relative; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.vip-stage-label span { color: #668aa7; font-size: 9px; letter-spacing: .19em; }
.vip-stage-label b { color: #e9f6ff; font-size: 15px; font-weight: 500; letter-spacing: .03em; }
.vip-fixed-card { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: contain; }
.vip-feature-card { position: relative; z-index: 2; filter: drop-shadow(0 20px 32px rgba(0, 0, 0, .48)); }
.vip-next-tier { position: relative; z-index: 2; margin-top: 28px; }
.vip-next-tier > div:first-child { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.vip-next-tier span { color: #83a1bb; font-size: 10px; }
.vip-next-tier b { color: #e8f6ff; font-size: 11px; }
.vip-progress { height: 4px; overflow: hidden; border-radius: 99px; background: rgba(101, 145, 184, .18); }
.vip-progress i { display: block; width: 76%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #48e7dc, #727cff 62%, #d7a9ff); box-shadow: 0 0 16px rgba(91, 217, 235, .48); }
.vip-next-tier > small { display: block; margin-top: 10px; color: #6f90ab; font-size: 9px; letter-spacing: .06em; }
.vip-tier-section { margin-top: clamp(54px, 7vw, 82px); padding-top: clamp(40px, 5vw, 60px); border-top: 1px solid rgba(118, 193, 244, .15); }
.vip-tier-heading { max-width: 770px; margin: 0 auto 34px; text-align: center; }
.vip-tier-heading > span, .vip-skin-wall-head span { color: #63ddd9; font-size: 9px; letter-spacing: .2em; }
.vip-tier-heading h3 { margin: 13px 0; color: #eff8ff; font-size: clamp(27px, 3.2vw, 41px); letter-spacing: -.04em; }
.vip-tier-heading h3 em { color: #a8a2ff; font-style: normal; }
.vip-tier-heading p { margin: 0; color: #88a4bb; font-size: 13px; line-height: 1.8; }
.vip-tier-track { display: grid; grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) 42px minmax(0, 1fr); align-items: center; }
.vip-tier-card { position: relative; min-height: 235px; padding: 25px 24px; overflow: hidden; border: 1px solid rgba(104, 177, 229, .17); border-radius: 17px; background: linear-gradient(145deg, rgba(11, 35, 58, .78), rgba(4, 15, 29, .78)); }
.vip-tier-card::after { position: absolute; right: -45px; bottom: -65px; width: 150px; height: 150px; content: ""; border: 1px solid currentColor; border-radius: 50%; opacity: .1; box-shadow: 0 0 54px currentColor; }
.vip-tier-card > span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 22px; border: 1px solid currentColor; border-radius: 13px; font: 500 15px/1 "SF Pro Display", "Segoe UI Variable Display", Arial, sans-serif; }
.vip-tier-card > small { position: absolute; top: 29px; right: 23px; color: #7795ad; font-size: 9px; letter-spacing: .08em; }
.vip-tier-card > b { display: block; margin-bottom: 7px; color: #eff8ff; font-size: 20px; }
.vip-tier-card > em { display: inline-block; margin-bottom: 14px; padding: 5px 8px; border-radius: 6px; color: currentColor; background: rgba(113, 163, 210, .08); font-size: 9px; font-style: normal; letter-spacing: .08em; }
.vip-tier-card > p { margin: 0; color: #7898b2; font-size: 11px; line-height: 1.7; }
.tier-new { color: #61ddd8; }
.tier-star { color: #8795ff; border-color: rgba(125, 137, 255, .28); background: linear-gradient(145deg, rgba(31, 47, 91, .78), rgba(8, 17, 40, .8)); }
.tier-royal { color: #ffd37f; border-color: rgba(255, 198, 91, .3); background: radial-gradient(circle at 82% 12%, rgba(255, 196, 80, .14), transparent 38%), linear-gradient(145deg, rgba(50, 38, 29, .78), rgba(11, 16, 31, .82)); }
.vip-tier-link { height: 1px; background: linear-gradient(90deg, rgba(85, 230, 221, .16), #7385fa, rgba(255, 201, 106, .18)); }
.vip-skin-wall { margin-top: clamp(54px, 7vw, 82px); padding-top: clamp(40px, 5vw, 60px); border-top: 1px solid rgba(118, 193, 244, .15); }
.vip-skin-wall-head { display: block; max-width: 760px; margin-bottom: 30px; }
.vip-skin-wall-head h3 { margin: 12px 0 0; color: #eff8ff; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.04em; }
.vip-skin-wall-head p { margin: 0; color: #83a0b8; font-size: 12px; line-height: 1.75; }
.vip-skin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: clamp(20px, 3vw, 34px); border: 1px solid rgba(121, 116, 255, .2); border-radius: 20px; background: radial-gradient(circle at 50% 0, rgba(92, 67, 186, .13), transparent 50%), rgba(5, 12, 27, .62); }
.vip-skin-grid .vip-fixed-card { border-radius: 10px; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .42)); }
.vip-skin-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.vip-skin-notes span { padding: 8px 11px; border: 1px solid rgba(83, 220, 214, .16); border-radius: 999px; color: #83aaa9; background: rgba(8, 34, 47, .5); font-size: 9px; letter-spacing: .04em; }
@media (max-width: 980px) {
.vip-growth-hero { grid-template-columns: 1fr; }
.vip-growth-copy { max-width: 720px; }
.vip-value-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vip-value-list article { grid-template-columns: 1fr; align-content: start; }
.vip-feature-stage { min-height: 0; }
.vip-tier-track { grid-template-columns: 1fr; gap: 10px; }
.vip-tier-link { width: 1px; height: 26px; justify-self: center; background: linear-gradient(#56ded8, #7888fa); }
.vip-skin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.vip-growth { margin-block: 28px 78px; padding: 24px 18px; border-radius: 21px; }
.vip-growth-copy h2 { font-size: 39px; }
.vip-growth-lead { font-size: 13px; line-height: 1.8; }
.vip-value-list { grid-template-columns: 1fr; }
.vip-value-list article { grid-template-columns: 38px 1fr; }
.vip-feature-stage { padding: 24px 14px; border-radius: 17px; }
.vip-stage-label { margin-bottom: 22px; }
.vip-stage-label b { font-size: 12px; }
.vip-next-tier > div:first-child { align-items: flex-end; }
.vip-next-tier b { max-width: 150px; text-align: right; }
.vip-tier-heading { text-align: left; }
.vip-tier-card { min-height: 0; }
.vip-skin-wall-head { max-width: none; }
.vip-skin-grid { grid-template-columns: 1fr; gap: 14px; padding: 16px 10px; }
.vip-skin-notes { justify-content: flex-start; }
}
/* 真实直播间场景：用单张焊死灯牌图说明播盾在直播画面里究竟卖什么。 */
.live-room-demo {
display: grid;
grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr);
align-items: center;
gap: clamp(42px, 6vw, 86px);
margin-block: 0 116px;
padding: clamp(36px, 5vw, 66px);
border: 1px solid rgba(72, 226, 218, .2);
border-radius: 28px;
background:
radial-gradient(520px 360px at 92% 8%, rgba(78, 83, 222, .17), transparent 72%),
linear-gradient(145deg, rgba(5, 26, 43, .97), rgba(5, 12, 27, .98));
box-shadow: 0 34px 90px rgba(0, 0, 0, .23);
}
.live-room-copy { min-width: 0; }
.live-room-badge { display: inline-flex; margin: 4px 0 18px; padding: 7px 10px; border: 1px solid rgba(91, 231, 222, .28); border-radius: 999px; color: #7eebe3; background: rgba(14, 73, 78, .24); font-size: 9px; letter-spacing: .08em; }
.live-room-copy h2 { margin: 0 0 20px; color: #eff9ff; font-size: clamp(35px, 4vw, 54px); line-height: 1.08; letter-spacing: -.055em; }
.live-room-copy h2 em { color: transparent; font-style: normal; background: linear-gradient(100deg, #64e9df, #8399ff 58%, #d0b4ff); background-clip: text; }
.live-room-copy > p:not(.eyebrow) { max-width: 570px; margin: 0 0 26px; color: #9bb5cb; font-size: 14px; line-height: 1.9; }
.live-room-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.live-room-steps li { min-height: 78px; display: grid; grid-template-columns: 30px 1fr; align-content: center; gap: 2px 11px; padding: 12px 13px; border: 1px solid rgba(105, 189, 231, .14); border-radius: 12px; background: rgba(4, 17, 32, .58); }
.live-room-steps span { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(99, 230, 222, .25); border-radius: 50%; color: #68e5dd; font-size: 8px; }
.live-room-steps b { color: #edf8ff; font-size: 11px; }
.live-room-steps small { color: #6e91ad; font-size: 9px; line-height: 1.5; }
.live-room-phone { position: relative; min-height: 680px; overflow: hidden; border: 1px solid rgba(114, 128, 255, .35); border-radius: 34px; background: #030712; box-shadow: 0 28px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); }
.live-room-phone::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(180deg, rgba(2, 6, 17, .1), transparent 42%, rgba(2, 6, 17, .8) 78%, #030712); pointer-events: none; }
.live-room-host { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.live-room-top { position: absolute; top: 24px; left: 24px; right: 24px; z-index: 3; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 9px; color: #edf8ff; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgba(255, 55, 100, .9); font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.live-pill i { width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; }
.live-room-top b { font-size: 10px; }
.live-room-top small { justify-self: end; color: #d8e8f4; font-size: 9px; }
.live-room-card { position: absolute; top: 27%; left: 5%; z-index: 4; width: 90%; height: auto; aspect-ratio: 3 / 1; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .58)); }
.live-room-toast { position: absolute; top: 47%; right: 24px; z-index: 4; min-width: 220px; padding: 12px 15px; border: 1px solid rgba(91, 229, 220, .3); border-radius: 13px; background: rgba(5, 22, 38, .86); backdrop-filter: blur(14px); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.live-room-toast span { color: #67e3dc; font-size: 7px; letter-spacing: .2em; }
.live-room-toast b, .live-room-toast small { display: block; }
.live-room-toast b { margin: 5px 0 3px; color: #f1f9ff; font-size: 12px; }
.live-room-toast small { color: #8ea9bf; font-size: 9px; }
.live-room-comments { position: absolute; left: 24px; bottom: 76px; z-index: 4; width: min(74%, 390px); }
.live-room-comments p { width: fit-content; margin: 7px 0; padding: 7px 10px; border-radius: 8px; color: #dceaf4; background: rgba(3, 10, 22, .62); backdrop-filter: blur(8px); font-size: 9px; }
.live-room-comments b { margin-right: 6px; color: #83e9e3; }
.live-room-bottom { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 4; display: grid; grid-template-columns: 1fr repeat(3, 34px); align-items: center; gap: 8px; }
.live-room-bottom span { padding: 10px 13px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; color: #91a7ba; background: rgba(1, 6, 15, .48); font-size: 9px; }
.live-room-bottom i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: linear-gradient(140deg, #28d7ce, #7272f5); font-style: normal; }
@media (max-width: 980px) {
.live-room-demo { grid-template-columns: 1fr; }
.live-room-copy { max-width: 760px; }
.live-room-phone { width: min(100%, 680px); justify-self: center; }
}
@media (max-width: 680px) {
.live-room-demo { margin-block: 0 78px; padding: 25px 18px; border-radius: 21px; }
.live-room-copy h2 { font-size: 35px; }
.live-room-steps { grid-template-columns: 1fr; }
.live-room-phone { min-height: 520px; border-radius: 22px; }
.live-room-card { top: 28%; left: 2%; width: 96%; }
.live-room-toast { top: 48%; right: 14px; min-width: 190px; }
.live-room-comments { left: 14px; bottom: 68px; width: 86%; }
}
/* 本地功能动图：单个 7:16 实拍式画面承接直播场景，再进入皮肤阶梯。 */
.vip-growth:not(.vip-growth-detail) { margin-bottom: 32px; }
.live-room-demo { margin-bottom: 32px; }
.feature-motion-demo {
position: relative;
display: grid;
grid-template-columns: minmax(320px, 1fr) minmax(300px, 390px);
align-items: center;
gap: clamp(42px, 8vw, 112px);
margin-bottom: 32px;
padding: clamp(34px, 5vw, 64px);
overflow: hidden;
border: 1px solid rgba(110, 129, 255, .24);
border-radius: 28px;
background:
radial-gradient(480px 520px at 85% 18%, rgba(116, 80, 238, .2), transparent 72%),
radial-gradient(420px 360px at 0 80%, rgba(36, 216, 207, .11), transparent 74%),
linear-gradient(145deg, rgba(6, 22, 40, .98), rgba(5, 10, 25, .99));
box-shadow: 0 34px 90px rgba(0, 0, 0, .24);
}
.feature-motion-copy { max-width: 590px; }
.feature-motion-copy h2 { margin: 0 0 19px; color: #eff8ff; font-size: clamp(38px, 4.4vw, 59px); line-height: 1.06; letter-spacing: -.055em; }
.feature-motion-copy h2 em { color: transparent; font-style: normal; background: linear-gradient(100deg, #62e9e0, #8598ff 58%, #d1b7ff); background-clip: text; }
.feature-motion-copy > p:not(.eyebrow) { max-width: 510px; margin: 0; color: #91adc3; font-size: 14px; line-height: 1.9; }
.feature-motion-media {
display: block;
width: min(100%, 360px);
aspect-ratio: 7 / 16;
justify-self: center;
padding: 8px;
overflow: hidden;
border: 1px solid rgba(116, 130, 255, .38);
border-radius: 31px;
background: linear-gradient(160deg, rgba(86, 225, 216, .16), rgba(94, 78, 222, .2));
box-shadow: 0 30px 76px rgba(0, 0, 0, .48), 0 0 42px rgba(85, 111, 242, .12);
}
.feature-motion-media img { display: block; width: 100%; height: 100%; border-radius: 23px; object-fit: cover; }
.vip-growth-detail { margin-block: 0 116px; }
.vip-growth-detail .vip-tier-section { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 860px) {
.feature-motion-demo { grid-template-columns: 1fr; }
.feature-motion-copy { max-width: 680px; }
.feature-motion-media { width: min(82vw, 340px); }
}
@media (max-width: 680px) {
.vip-growth:not(.vip-growth-detail), .live-room-demo, .feature-motion-demo { margin-bottom: 22px; }
.feature-motion-demo { padding: 25px 18px; border-radius: 21px; }
.feature-motion-copy h2 { font-size: 36px; }
.feature-motion-copy > p:not(.eyebrow) { font-size: 13px; }
.feature-motion-media { width: min(88vw, 310px); border-radius: 26px; }
.feature-motion-media img { border-radius: 19px; }
.vip-growth-detail { margin-block: 0 78px; }
}
/* V3：风险守护后直接承接案例依据，形成“识别风险 → 案例沉淀 → 提前提醒”的完整叙事。 */
.source-guard { margin-bottom: 42px; }
.source-guard + .case-section { padding-top: 26px; padding-bottom: 92px; }
.source-guard + .case-section .section-title { max-width: 720px; }
.source-guard + .case-section .section-title h2 em { font-style: normal; }
/* 六项核心功能：语音存分卡片与页面叙事共用同一套科技面板语言。 */
.voice-score-visual { display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 5px 15px; padding: 16px 20px; }
.voice-score-visual > span { grid-row: 1 / 3; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(82, 233, 225, .46); border-radius: 50%; color: #8df8ef; background: radial-gradient(circle, rgba(58, 219, 210, .18), rgba(5, 24, 42, .9) 68%); box-shadow: 0 0 25px rgba(54, 223, 213, .13), inset 0 0 18px rgba(90, 235, 226, .08); font: 700 8px/1 "SF Pro Text", "Segoe UI", sans-serif; letter-spacing: .15em; }
.voice-score-visual > b { align-self: end; color: #effaff; font-size: 12px; line-height: 1.35; }
.voice-score-visual > small { align-self: start; color: #65ddd7; font-size: 9px; letter-spacing: .04em; }
.voice-score-wave { position: absolute; top: 17px; right: 18px; display: flex; align-items: center; gap: 3px; height: 18px; }
.voice-score-wave i { width: 3px; height: 35%; border-radius: 4px; background: linear-gradient(#7d7cff, #51e9df); animation: sound-bars 1.35s ease-in-out infinite; }
.voice-score-wave i:nth-child(2), .voice-score-wave i:nth-child(4) { height: 70%; animation-delay: .18s; }
.voice-score-wave i:nth-child(3) { height: 100%; animation-delay: .36s; }
/* 首屏标题：两行锁定为“直播违规 / AI守护助手”，强化主次关系并避免拥挤换行。 */
.hero-copy h1 { max-width: 650px; font-size: clamp(56px, 5.7vw, 82px); line-height: .98; letter-spacing: -.065em; }
.hero-copy h1 em { display: inline-block; white-space: nowrap; }
.hero-copy .hero-lead { max-width: 610px; margin-bottom: 0; }
/* 两档 SVIP：同一套核心功能，差异只保留使用周期和年卡一对一售后调试。 */
.pricing .price-grid { width: min(980px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-inline: auto; }
.pricing .price-grid > article { display: flex; flex-direction: column; min-height: 680px; padding: clamp(26px, 3vw, 38px); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.pricing .price-grid > article:hover { transform: translateY(-4px); border-color: rgba(255, 98, 92, .5); box-shadow: 0 24px 62px rgba(2, 9, 23, .48), 0 0 36px rgba(255, 48, 73, .09); }
.pricing .price-grid > article.svip-year { overflow: hidden; border-color: rgba(87, 225, 211, .5); background: radial-gradient(340px 230px at 90% 0, rgba(64, 222, 205, .18), transparent 65%), linear-gradient(145deg, #092641 0%, #061b32 54%, #041425 100%); box-shadow: 0 20px 55px rgba(1, 11, 27, .48), inset 0 1px 0 rgba(141, 255, 238, .1); }
.pricing .price-grid > article.svip-year > :not(.annual-mark) { position: relative; z-index: 1; }
.pricing .price-grid > article.monthly-glow { animation: none; }
.pricing .price-grid > article.monthly-glow::before,
.pricing .price-grid > article.monthly-glow::after { display: none; }
.pricing .price-grid .promo-mark,
.pricing .price-grid .annual-mark { position: absolute !important; top: 16px; right: 16px; left: auto; z-index: 3; width: auto; display: inline-flex; }
.pricing .price-grid > article > small:not(.purchase-note) { display: block; padding-right: 110px; }
.pricing .price-grid > article.svip-year .current-price { color: #78f4df; text-shadow: 0 0 28px rgba(75, 238, 219, .3); }
.pricing .price-grid > article.svip-year .button { color: #d9fffb; border-color: rgba(105, 245, 226, .58); background: linear-gradient(135deg, rgba(8, 73, 88, .94), rgba(5, 38, 68, .94)); }
.pricing .price-grid > article > p { min-height: 46px; }
.plan-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 4px 0 18px; padding: 0; list-style: none; }
.plan-feature-grid li { position: relative; min-height: 39px; display: flex; align-items: center; padding: 8px 9px 8px 27px; border: 1px solid rgba(107, 195, 235, .12); border-radius: 9px; color: #b8d2e5; background: rgba(4, 18, 33, .4); font-size: 10px; line-height: 1.45; }
.plan-feature-grid li::before { position: absolute; left: 10px; content: "✓"; color: #64e8df; font-weight: 800; text-shadow: 0 0 10px rgba(91, 239, 227, .4); }
.plan-support { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 5px; padding: 11px 13px; border: 1px solid rgba(255, 199, 92, .28); border-radius: 10px; background: linear-gradient(90deg, rgba(109, 69, 14, .2), rgba(14, 44, 60, .42)); }
.plan-support span { color: #d0a958; font-size: 9px; letter-spacing: .08em; }
.plan-support b { color: #fff0c7; font-size: 12px; }
.pricing .price-grid .button { margin-top: auto; }
.pricing .price-grid .promo-mark,
.pricing .price-grid .annual-mark { color: #fff; border-color: rgba(255, 163, 133, .72); background: linear-gradient(120deg, #ff244f, #ff5b2f 72%, #ff862f); box-shadow: 0 9px 22px rgba(255, 38, 76, .24), inset 0 1px 0 rgba(255, 255, 255, .2); font-weight: 800; letter-spacing: .04em; }
.pricing .price-grid .annual-mark { color: #fff8e8; background: linear-gradient(120deg, #ff3848, #ff7a24); }
.deal-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -3px 0 14px; padding: 10px 12px; border: 1px solid rgba(255, 88, 83, .25); border-radius: 10px; background: linear-gradient(90deg, rgba(125, 18, 37, .3), rgba(255, 99, 44, .08)); }
.deal-strip strong { color: #ff7881; font-size: 11px; letter-spacing: .04em; }
.deal-strip span { color: #ffd18b; font-size: 12px; font-weight: 800; }
.pricing .price-grid .purchase-hot,
.pricing .price-grid > article.monthly-glow .purchase-hot,
.pricing .price-grid > article.svip-year .purchase-hot { min-height: 50px; color: #fff; border: 1px solid rgba(255, 143, 116, .72); background: linear-gradient(100deg, #ff244f, #ff5533 55%, #ff862f); box-shadow: 0 15px 34px rgba(255, 38, 76, .25), inset 0 1px 0 rgba(255, 255, 255, .2); font-weight: 800; letter-spacing: .04em; }
.pricing .price-grid .purchase-hot:hover,
.pricing .price-grid > article.monthly-glow .purchase-hot:hover,
.pricing .price-grid > article.svip-year .purchase-hot:hover { transform: translateY(-2px); filter: brightness(1.08); background: linear-gradient(100deg, #ff3159, #ff653a 55%, #ff953b); box-shadow: 0 19px 42px rgba(255, 38, 76, .34), inset 0 1px 0 rgba(255, 255, 255, .24); }
.purchase-note { display: block !important; margin: 0 !important; padding: 9px 0 0 !important; color: #809bb3 !important; font-size: 9px !important; line-height: 1.5 !important; letter-spacing: .03em; text-align: center; }
@media (max-width: 900px) {
.pricing .price-grid { grid-template-columns: 1fr; width: min(620px, 100%); }
.pricing .price-grid > article { min-height: 0; }
}
@media (max-width: 560px) {
.source-guard { margin-bottom: 24px; }
.source-guard + .case-section { padding-top: 10px; padding-bottom: 64px; }
.hero-copy h1 { font-size: 43px; line-height: 1.02; letter-spacing: -.055em; }
.voice-score-visual { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 10px; padding-inline: 13px; }
.voice-score-visual > span { width: 50px; height: 50px; }
.plan-feature-grid { grid-template-columns: 1fr; }
.pricing .price-grid > article { padding: 25px 20px; }
.deal-strip { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
.voice-score-wave i { animation: none !important; }
.pricing .price-grid > article { transition: none; }
}
.campaign-countdown{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0 2px;padding:10px 12px;border:1px solid rgba(255,91,71,.5);border-radius:10px;background:linear-gradient(100deg,rgba(88,20,41,.72),rgba(65,31,28,.65));color:#ffc7b7}.campaign-countdown span{font-size:12px;font-weight:700}.campaign-countdown strong{font:800 18px ui-monospace,SFMono-Regular,Consolas,monospace;color:#fff;letter-spacing:.04em}.purchase-hot{animation:purchase-cta-pulse 1.8s ease-in-out infinite}@keyframes purchase-cta-pulse{0%,100%{box-shadow:0 12px 32px rgba(255,50,83,.35)}50%{box-shadow:0 16px 46px rgba(255,78,55,.66)}}@media(prefers-reduced-motion:reduce){.purchase-hot{animation:none}}
/* V2.3.10.35：真实轻量工作台展示与单一完整版下载。 */
.workspace-showcase{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.78fr);gap:72px;align-items:center;margin-block:72px 116px;padding:64px 76px;overflow:hidden;border:1px solid rgba(115,203,255,.24);border-radius:30px;background:radial-gradient(540px 430px at 82% 45%,rgba(84,101,255,.22),transparent 68%),linear-gradient(140deg,rgba(10,35,62,.96),rgba(6,17,34,.96));box-shadow:0 34px 90px rgba(0,0,0,.28)}
.workspace-showcase:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(110,237,235,.06),transparent 67%)}
.workspace-showcase-copy,.workspace-product-shot{position:relative;z-index:1}
.workspace-showcase-copy h2{font-size:clamp(34px,4.3vw,58px);line-height:1.12;letter-spacing:-.045em;margin-bottom:22px}
.workspace-showcase-copy>p:not(.eyebrow){max-width:620px;color:#aec6dc;font-size:16px;line-height:1.9}
.workspace-showcase-copy ul{display:grid;gap:12px;margin:28px 0 32px;padding:0;list-style:none}
.workspace-showcase-copy li{display:flex;align-items:center;gap:12px;color:#d8ecff;font-size:14px}
.workspace-showcase-copy li:before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#54f1dc,#728cff);box-shadow:0 0 18px rgba(85,229,227,.75)}
.workspace-product-shot{justify-self:center;width:min(100%,410px);margin:0;padding:24px 30px 18px;border:1px solid rgba(169,218,255,.22);border-radius:30px;background:linear-gradient(160deg,rgba(22,49,82,.9),rgba(8,19,38,.94));box-shadow:0 35px 70px rgba(0,0,0,.38)}
.workspace-shot-viewport{position:relative;z-index:2;width:100%;aspect-ratio:376/713;overflow:hidden;border-radius:22px;box-shadow:0 20px 48px rgba(0,0,0,.32)}
.workspace-product-shot img{display:block;width:108.51%;max-width:none;height:auto}
.workspace-version-pill{position:absolute;right:16px;top:16px;z-index:3;padding:8px 11px;border:1px solid rgba(100,229,220,.34);border-radius:999px;background:rgba(4,22,42,.88);color:#8af2e9;font-size:10px;letter-spacing:.08em;box-shadow:0 10px 25px rgba(0,0,0,.25)}
.workspace-shot-halo{position:absolute;z-index:0;inset:15% -18%;border-radius:50%;background:radial-gradient(circle,rgba(94,111,255,.32),transparent 67%);filter:blur(12px)}
.workspace-product-shot figcaption{margin-top:14px;text-align:center;color:#7898b6;font-size:11px;line-height:1.6}
.workspace-live-simulation{position:relative;z-index:2;overflow:hidden;width:100%;border:1px solid rgba(168,215,255,.22);border-radius:22px;background:linear-gradient(160deg,#0b1c32,#071322 78%);box-shadow:0 20px 48px rgba(0,0,0,.38);color:#dceeff;font-family:"Segoe UI","Microsoft YaHei",sans-serif}
.workspace-live-simulation:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 25%,rgba(110,238,227,.07) 52%,transparent 78%);transform:translateX(-100%);animation:sim-sheen 6s ease-in-out infinite}
.sim-window-bar{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid rgba(165,210,244,.14);font-size:10px;letter-spacing:.04em;color:#cfe8ff}.sim-window-lights{display:flex;gap:4px}.sim-window-lights i{width:6px;height:6px;border-radius:50%;background:#5fe6da;box-shadow:0 0 10px rgba(95,230,218,.45)}.sim-window-lights i:nth-child(2){background:#f5c966;box-shadow:none}.sim-window-lights i:nth-child(3){background:#fb7185;box-shadow:none}.sim-version{margin-left:auto;color:#76a8ca;font-size:9px}
.sim-status-row{display:flex;align-items:flex-end;justify-content:space-between;padding:15px 16px 12px}.sim-status-row small{display:block;color:#7393b0;font-size:9px;margin-bottom:5px}.sim-status-row strong{font-size:21px;letter-spacing:-.03em;color:#f3fbff}.sim-status-row strong i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#43e5a2;box-shadow:0 0 11px rgba(67,229,162,.78)}.sim-clock{font:700 11px ui-monospace,SFMono-Regular,Consolas,monospace;color:#7da4c2}
.sim-alert{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:9px;margin:0 14px 13px;padding:10px 11px;border:1px solid rgba(255,112,127,.46);border-radius:12px;background:linear-gradient(115deg,rgba(104,28,52,.72),rgba(74,29,44,.34));animation:sim-alert-pulse 3.5s ease-in-out infinite}.sim-alert-icon{display:grid;place-items:center;width:23px;height:23px;border-radius:8px;background:#ff617e;color:#fff;font-weight:800;font-size:14px;box-shadow:0 0 18px rgba(255,97,126,.4)}.sim-alert b{display:block;font-size:11px;color:#ffd9e1}.sim-alert small{display:block;margin-top:3px;color:#eaa9b7;font-size:9px}.sim-alert-tag{padding:4px 6px;border-radius:5px;background:rgba(255,97,126,.15);color:#ff91a4;font-size:9px}
.sim-section-head{display:flex;align-items:center;justify-content:space-between;padding:11px 16px 8px;border-top:1px solid rgba(165,210,244,.11);color:#eaf5ff;font-size:12px;font-weight:700}.sim-section-head em{display:flex;align-items:center;gap:5px;color:#62e6bd;font-size:9px;font-style:normal;font-weight:500}.sim-section-head em i{width:5px;height:5px;border-radius:50%;background:#62e6bd;box-shadow:0 0 8px rgba(98,230,189,.8)}
.sim-guest-list{display:grid;gap:6px;padding:0 12px 13px}.sim-guest{display:grid;grid-template-columns:29px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px;border:1px solid rgba(155,201,235,.12);border-radius:10px;background:rgba(25,51,79,.54)}.sim-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:12px;font-weight:800;color:#10233b;border:2px solid rgba(255,255,255,.68);box-shadow:0 3px 10px rgba(0,0,0,.2)}.avatar-a{background:linear-gradient(140deg,#ffc8b7,#ffe9a9)}.avatar-b{background:linear-gradient(140deg,#a8e7ff,#8b9bff)}.avatar-c{background:linear-gradient(140deg,#b9b4fa,#596b9c);color:#f5f8ff}.sim-guest b{display:block;font-size:10px;color:#f0f7ff}.sim-guest small{display:block;margin-top:2px;color:#7fa1bc;font-size:8px}.sim-guest>strong{padding:4px 6px;border-radius:999px;background:rgba(111,142,255,.22);color:#bfcaff;font-size:9px}
.sim-review{margin:0 12px 12px;padding:10px 11px;border:1px solid rgba(94,224,210,.2);border-radius:11px;background:linear-gradient(115deg,rgba(24,74,91,.45),rgba(18,42,72,.32))}.sim-review-head{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#d9f6f0}.sim-review-head em{color:#6ee4d2;font-style:normal;font-size:9px}.sim-progress{height:5px;margin:8px 0 6px;overflow:hidden;border-radius:99px;background:rgba(123,167,192,.18)}.sim-progress i{display:block;width:82%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5ce8da,#778bff);box-shadow:0 0 12px rgba(91,232,218,.55);animation:sim-progress 4.5s ease-in-out infinite}.sim-review small{color:#85a8bd;font-size:8px}
.sim-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:11px 12px 13px;border-top:1px solid rgba(165,210,244,.12)}.sim-footer button{border:0;border-radius:8px;padding:9px 8px;background:linear-gradient(100deg,#3f86ff,#7566f5);color:#fff;font:700 10px "Segoe UI","Microsoft YaHei",sans-serif;box-shadow:0 8px 20px rgba(61,111,247,.25)}.sim-footer span,.sim-footer em{grid-column:1/-1;color:#7d9bb5;font-size:8px;font-style:normal}.sim-footer em{display:flex;align-items:center;gap:5px;margin-top:-3px;color:#65e6bf}.sim-footer em i{width:5px;height:5px;border-radius:50%;background:#65e6bf;box-shadow:0 0 8px rgba(101,230,191,.8)}
@keyframes sim-sheen{0%,45%{transform:translateX(-100%)}75%,100%{transform:translateX(100%)}}@keyframes sim-alert-pulse{0%,100%{box-shadow:0 0 0 rgba(255,97,126,0)}50%{box-shadow:0 0 20px rgba(255,97,126,.12)}}@keyframes sim-progress{0%,100%{width:74%}50%{width:88%}}
.download-options{grid-template-columns:1fr}
.download-card{max-width:560px}
@media(max-width:900px){.workspace-showcase{grid-template-columns:1fr;gap:44px;padding:46px 34px}.workspace-showcase-copy{text-align:center}.workspace-showcase-copy>p:not(.eyebrow){margin-inline:auto}.workspace-showcase-copy .eyebrow,.workspace-showcase-copy li{justify-content:center}.workspace-showcase-copy .button{width:auto}.workspace-product-shot{width:min(100%,390px)}}
@media(max-width:560px){.workspace-showcase{width:min(100% - 24px,1180px);margin-block:48px 80px;padding:36px 18px;border-radius:22px}.workspace-showcase-copy h2{font-size:34px}.workspace-showcase-copy>p:not(.eyebrow){font-size:14px}.workspace-showcase-copy li{align-items:flex-start;text-align:left;justify-content:flex-start}.workspace-showcase-copy .button{width:100%}.workspace-product-shot{padding:18px 16px 14px;border-radius:22px}.workspace-shot-viewport{border-radius:16px}.workspace-version-pill{right:8px;top:8px}}
/* V1.6：¥98 头像摇一摇为独立商品，展示和下载均与完整播盾明确隔离。 */
.full-bundle-scope { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 15px; padding: 10px 12px; border: 1px solid rgba(93, 228, 216, .22); border-radius: 10px; background: rgba(15, 77, 90, .18); }
.full-bundle-scope strong { color: #dffef9; font-size: 11px; }
.full-bundle-scope span { color: #65e5da; font-size: 10px; }
.avatar-plan-grid { width: min(980px, 100%); margin: 18px auto 0; }
.avatar-product-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(235px, .42fr); gap: clamp(24px, 5vw, 68px); align-items: center; padding: clamp(25px, 3.4vw, 40px); border: 1px solid rgba(151, 125, 255, .52); border-radius: 18px; background: radial-gradient(400px 210px at 12% 20%, rgba(89, 103, 255, .2), transparent 68%), linear-gradient(115deg, rgba(15, 31, 68, .97), rgba(7, 21, 42, .96)); box-shadow: 0 22px 58px rgba(2, 8, 23, .46), inset 0 1px 0 rgba(188, 176, 255, .1); }
.avatar-product-card::after { content: ""; position: absolute; width: 280px; height: 280px; right: -130px; top: -155px; border-radius: 50%; background: radial-gradient(circle, rgba(123, 104, 255, .25), transparent 69%); pointer-events: none; }
.avatar-product-card > * { position: relative; z-index: 1; }
.avatar-plan-copy small { color: #a99cff; font: 700 10px/1.4 "SF Pro Text", "Segoe UI", sans-serif; letter-spacing: .14em; }
.avatar-plan-copy h3 { margin: 10px 0 9px; font-size: clamp(24px, 3vw, 34px); }
.avatar-plan-copy > p { margin: 0 0 17px; color: #a9c0d8; font-size: 13px; line-height: 1.75; }
.avatar-plan-boundary { display: flex; flex-wrap: wrap; gap: 7px 16px; align-items: center; padding: 11px 13px; border: 1px solid rgba(255, 177, 102, .32); border-radius: 10px; background: rgba(87, 50, 20, .2); }
.avatar-plan-boundary strong { color: #ffe1ad; font-size: 12px; }
.avatar-plan-boundary span { color: #c0a783; font-size: 11px; }
.avatar-plan-action { display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.avatar-plan-price { display: flex; justify-content: center; align-items: baseline; gap: 6px; color: #c5bcff; text-shadow: 0 0 25px rgba(135, 112, 255, .28); }
.avatar-plan-price span { font-size: clamp(48px, 6vw, 68px); line-height: 1; letter-spacing: -.06em; }
.avatar-plan-price i { color: #9fb8d1; font-size: 14px; font-style: normal; }
.avatar-plan-action > small { margin: 8px 0 16px; color: #7895b0; font-size: 10px; line-height: 1.6; }
.avatar-plan-action .button { width: 100%; color: #efeaff; border-color: rgba(160, 139, 255, .62); background: linear-gradient(120deg, rgba(68, 65, 159, .9), rgba(35, 43, 91, .95)); }
.download { grid-template-columns: .72fr 1.28fr; gap: clamp(38px, 6vw, 80px); }
.download-options { display: grid; gap: 16px; }
.avatar-download-card { border-color: rgba(153, 128, 255, .38); background: radial-gradient(260px 150px at 100% 0, rgba(117, 94, 255, .15), transparent 68%), linear-gradient(145deg, rgba(24, 35, 76, .82), rgba(7, 18, 39, .92)); }
.avatar-download-icon { background: linear-gradient(145deg, #7f71ff, #53c8df); }
.avatar-client-download[aria-disabled="true"] { opacity: .58; cursor: not-allowed; pointer-events: auto; }
.avatar-download-note { display: block; min-height: 17px; line-height: 1.55; }
@media (max-width: 900px) {
.avatar-plan-grid { width: min(620px, 100%); }
.avatar-product-card { grid-template-columns: 1fr; gap: 24px; }
.download { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.full-bundle-scope { align-items: flex-start; flex-direction: column; gap: 4px; }
.avatar-product-card { padding: 25px 20px; }
.avatar-plan-boundary { align-items: flex-start; flex-direction: column; }
.download-card dl div { align-items: flex-start; gap: 18px; }
.download-card dd { max-width: 62%; text-align: right; }
}
@media (max-width: 560px) {
.sim-window-bar { padding-inline: 12px; }
.sim-status-row { padding-inline: 13px; }
.sim-alert { margin-inline: 11px; }
.sim-guest-list { padding-inline: 10px; }
.sim-review { margin-inline: 10px; }
.sim-footer { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.workspace-live-simulation:after,
.sim-alert,
.sim-progress i { animation: none !important; }
}
/* V2.1：将存分与语音助手收敛为一个完整的直播工作流模块。 */
.vip-growth-unified { padding-block: clamp(34px, 5vw, 60px); }
.unified-heading { max-width: 790px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.unified-heading .eyebrow { justify-content: center; }
.unified-heading .vip-growth-badge { margin-bottom: 17px; }
.unified-heading h2 { margin: 0 0 18px; color: #f3f8fc; font-size: clamp(42px, 4.8vw, 66px); font-weight: 650; line-height: 1.06; letter-spacing: -.055em; }
.unified-heading h2 em { color: transparent; font-style: normal; background: linear-gradient(100deg, #70ede6, #8ba2ff 56%, #d9c0ff); background-clip: text; }
.unified-heading > p:last-child { max-width: 650px; margin: 0 auto; color: #a8c0d6; font-size: 15px; line-height: 1.9; }
.unified-visuals { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: stretch; gap: clamp(18px, 3vw, 32px); }
.unified-visuals .vip-feature-stage { min-height: 460px; padding: clamp(25px, 3vw, 38px); }
.unified-visuals .live-room-phone { min-height: 460px; border-radius: 22px; }
.unified-visuals .live-room-card { top: 25%; }
.unified-visuals .live-room-toast { top: 45%; right: 18px; min-width: 190px; }
.unified-visuals .live-room-comments { left: 18px; bottom: 68px; }
.unified-bottom { display: grid; grid-template-columns: minmax(245px, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(25px, 4vw, 55px); margin-top: clamp(32px, 4vw, 50px); padding-top: clamp(27px, 3vw, 38px); border-top: 1px solid rgba(118, 193, 244, .15); }
.unified-bottom-copy { min-width: 0; }
.unified-bottom-copy .eyebrow { margin-bottom: 10px; }
.unified-bottom-copy .live-room-badge { margin: 0 0 13px; }
.unified-bottom-copy h3 { margin: 0 0 12px; color: #eff9ff; font-size: clamp(25px, 3vw, 36px); line-height: 1.12; letter-spacing: -.045em; }
.unified-bottom-copy > p:last-child { max-width: 450px; margin: 0; color: #9bb5cb; font-size: 13px; line-height: 1.85; }
.unified-bottom .live-room-steps { margin: 0; }
@media (max-width: 980px) {
.unified-visuals { grid-template-columns: 1fr; }
.unified-visuals .vip-feature-stage { min-height: 390px; }
.unified-visuals .live-room-phone { width: min(100%, 680px); min-height: 560px; justify-self: center; }
.unified-bottom { grid-template-columns: 1fr; }
.unified-bottom-copy { max-width: 760px; }
}
@media (max-width: 680px) {
.vip-growth-unified { padding-block: 28px 32px; }
.unified-heading { margin-bottom: 28px; text-align: left; }
.unified-heading .eyebrow { justify-content: flex-start; }
.unified-heading h2 { font-size: 39px; }
.unified-heading > p:last-child { font-size: 13px; line-height: 1.8; }
.unified-visuals .vip-feature-stage { min-height: 0; padding: 24px 14px; }
.unified-visuals .live-room-phone { min-height: 520px; border-radius: 19px; }
.unified-visuals .live-room-card { top: 27%; left: 2%; width: 96%; }
.unified-visuals .live-room-toast { top: 48%; right: 14px; min-width: 185px; }
.unified-visuals .live-room-comments { left: 14px; bottom: 68px; width: 86%; }
.unified-bottom { gap: 22px; margin-top: 30px; padding-top: 27px; }
.unified-bottom-copy h3 { font-size: 29px; }
.unified-bottom .live-room-steps { grid-template-columns: 1fr; }
}