@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --black: #090b0f; --ink: #11141a; --white: #f5f4ef; --muted: #9a9da4; --line: rgba(255,255,255,.18); --cyan: #55e8ff; --orange: #ff9c6a; --purple: #aa91ff; --paper: #efeee9; --paper-ink: #16181c; --paper-muted: #686c72; --mono: 'DM Mono', ui-monospace, SFMono-Regular, Consolas, monospace; --display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; --body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; min-width: 320px; background: var(--black); color: var(--white); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }

.xp-site { overflow: hidden; }
.xp-header { position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 4.2vw; border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease; }
.xp-header.scrolled, .xp-header.open { background: rgba(7, 9, 13, .9); border-color: rgba(255,255,255,.12); backdrop-filter: blur(15px); }
.xp-logo { display: flex; align-items: center; gap: 11px; min-width: 205px; }
.xp-logo > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.xp-logo strong { font-size: 13px; font-weight: 600; letter-spacing: .07em; }
.xp-logo small { color: rgba(255,255,255,.46); font: 8px var(--mono); letter-spacing: .12em; }
.logo-ring { width: 36px; height: 36px; display: grid; place-items: center; position: relative; border: 1px solid var(--cyan); color: var(--cyan); font: 600 12px var(--display); }
.logo-ring:before, .logo-ring:after { content: ''; position: absolute; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; transform: rotate(35deg); }
.logo-ring:after { width: 9px; height: 9px; border-color: var(--cyan); transform: rotate(-35deg); }
.logo-ring b { position: relative; z-index: 1; }
.xp-nav { display: flex; align-items: center; gap: 2.3vw; color: rgba(255,255,255,.72); font-size: 12px; }
.xp-nav a { transition: color .2s ease; }
.xp-nav a:hover { color: var(--cyan); }
.header-order, .scene-order { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 42px; padding: 0 17px; color: var(--black); background: var(--white); font-size: 12px; font-weight: 600; transition: transform .25s ease, background .25s ease; }
.header-order:hover, .scene-order:hover { transform: translateY(-2px); background: var(--cyan); }
.header-order span, .scene-order span { font-size: 16px; }
.mobile-menu { display: none; width: 36px; height: 36px; flex-direction: column; justify-content: center; gap: 6px; background: transparent; }
.mobile-menu i { display: block; width: 25px; height: 1px; background: var(--white); }

.scene-screen, .vision-screen, .visitor-screen, .advantage-screen, .process-screen, .service-screen, .works-screen, .founder-screen, .news-screen, .contact-screen { position: relative; min-height: 100svh; overflow: hidden; }
.scene-screen { display: flex; align-items: center; padding: 120px 8vw 90px; background: var(--black); }
.scene-image { position: absolute; inset: 0; background-position: center; background-size: cover; filter: saturate(.73) contrast(1.06); transition: transform 7s ease; transform: scale(1.03); }
.scene-screen:hover .scene-image { transform: scale(1.06); }
.scene-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,13,.93) 0%, rgba(5,8,13,.63) 39%, rgba(5,8,13,.1) 83%), linear-gradient(0deg, rgba(5,8,13,.8), transparent 38%); }
.scene-grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(90deg, transparent 0, transparent calc(50% - .5px), rgba(255,255,255,.35) 50%, transparent calc(50% + .5px)), linear-gradient(0deg, transparent 0, transparent calc(75% - .5px), rgba(255,255,255,.28) 75%, transparent calc(75% + .5px)); pointer-events: none; }
.scene-copy { position: relative; z-index: 1; max-width: 670px; margin-top: 4vh; }
.scene-kicker, .screen-label, .mini-label { display: flex; align-items: center; gap: 11px; color: var(--cyan); font: 10px var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.scene-kicker i { width: 54px; height: 1px; background: var(--cyan); }
.scene-kicker b { color: rgba(255,255,255,.72); font-weight: 400; }
.scene-slogan { margin: 0 0 4px !important; color: var(--cyan) !important; font: 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; max-width: none !important; }
.scene-copy h1 { max-width: 700px; margin: 27px 0 22px; font-size: clamp(53px, 7vw, 112px); line-height: .94; letter-spacing: -.09em; font-weight: 500; white-space: pre-line; }
.scene-copy > p:not(.scene-slogan) { max-width: 430px; margin: 0; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.8; }
.scene-cta { display: flex; align-items: center; gap: 26px; margin-top: 36px; flex-wrap: wrap; }
.scene-order { min-width: 148px; }
.scene-cta .line-button { margin-top: 0; }
.scene-bottom { position: absolute; z-index: 2; left: 8vw; right: 8vw; bottom: 31px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 30px; border-top: 1px solid rgba(255,255,255,.22); padding-top: 17px; }
.scene-industry { display: flex; flex-direction: column; gap: 6px; }
.scene-industry span, .scene-scroll, .scene-caption, .section-tail { color: rgba(255,255,255,.48); font: 9px var(--mono); letter-spacing: .1em; }
.scene-industry strong { color: var(--white); font: 17px var(--display); font-weight: 500; }
.scene-controls { display: flex; align-items: center; gap: 17px; }
.scene-controls button, .founder-controls button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--white); background: transparent; border: 1px solid rgba(255,255,255,.32); font-size: 17px; transition: background .2s ease, border-color .2s ease; }
.scene-controls button:hover, .founder-controls button:hover { background: rgba(255,255,255,.12); border-color: var(--cyan); }
.scene-dots { display: flex; align-items: center; gap: 7px; }
.scene-dots button { width: 18px; height: 2px; padding: 0; background: rgba(255,255,255,.3); border: 0; }
.scene-dots button.active { background: var(--cyan); }
.scene-scroll { justify-self: end; }
.scene-scroll span { margin-left: 12px; color: var(--cyan); font-size: 15px; }
.scene-caption { position: absolute; top: 105px; right: 4.2vw; writing-mode: vertical-rl; color: rgba(255,255,255,.4); }

.vision-screen { background: radial-gradient(circle at 50% 45%, #1d2a36, #091017 48%, #030609 90%); }
.screen-label { position: absolute; z-index: 2; top: 108px; left: 8vw; }
.screen-label.light { color: rgba(255,255,255,.55); }
.screen-label.light:before, .screen-label:not(.light):before { content: ''; width: 27px; height: 1px; background: currentColor; }
.vision-copy { position: absolute; z-index: 2; top: 22%; left: 8vw; max-width: 335px; }
.mini-label { margin: 0 0 17px; color: var(--cyan); font-size: 9px; }
.vision-copy h2, .split-heading h2, .founder-intro h2, .contact-center h2 { margin: 0; font-size: clamp(42px, 5.5vw, 86px); line-height: .96; font-weight: 500; letter-spacing: -.085em; }
.vision-copy h2 em, .split-heading h2 em, .founder-intro h2 em, .contact-center h2 em { color: var(--cyan); font-style: normal; }
.vision-copy > p:not(.mini-label), .split-heading > p, .founder-intro > p, .contact-center > p:not(.mini-label) { color: var(--muted); font-size: 14px; line-height: 1.85; }
.vision-copy > p:not(.mini-label) { margin: 25px 0; }
.vision-tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 26px; }
.vision-tabs-title { margin: 0 0 4px; color: var(--cyan); font: 10px var(--mono); letter-spacing: .14em; }
.vision-tab { padding: 9px 18px; color: rgba(255,255,255,.62); background: transparent; border: 1px solid rgba(255,255,255,.28); font-size: 12px; letter-spacing: .04em; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.vision-tab:hover { color: var(--white); border-color: rgba(255,255,255,.6); }
.vision-tab.active { color: var(--black); background: var(--cyan); border-color: var(--cyan); font-weight: 600; }
.line-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 27px; min-height: 42px; padding: 0 0 9px; color: var(--paper-ink); background: transparent; border-bottom: 1px solid currentColor; font-size: 12px; }
.line-button span { font-size: 15px; }
.light-button { color: var(--white); }
.xr-glasses { position: absolute; left: 58%; top: 55%; width: min(64vw, 940px); display: flex; align-items: center; justify-content: center; gap: 1.6vw; transform: translate(-40%, -46%) rotate(-4deg); filter: drop-shadow(0 42px 70px rgba(0,0,0,.55)); }
.xr-glasses:before { content: ''; position: absolute; z-index: 0; inset: -5% -3% -9%; background: linear-gradient(160deg, #34414d 0%, #1a242e 42%, #0a1016 100%); border-radius: 44% 44% 36% 36% / 40% 40% 44% 44%; box-shadow: inset 0 3px 0 rgba(255,255,255,.16), inset 0 -22px 46px rgba(0,0,0,.75), inset 22px 0 38px rgba(0,0,0,.35), inset -22px 0 38px rgba(0,0,0,.35); }
.glasses-strap { position: absolute; z-index: -1; left: 7%; right: 7%; top: -11%; height: 12%; border-radius: 999px; background: linear-gradient(180deg, #26323d, #0b1117); box-shadow: 0 12px 26px rgba(0,0,0,.5); }
.glasses-lens { position: relative; z-index: 1; width: min(31vw, 440px); aspect-ratio: 1.45; overflow: hidden; border: 15px solid #0c1319; border-radius: 34% 34% 28% 28% / 38% 38% 32% 32%; background: #061018; box-shadow: inset 0 0 0 5px rgba(110,190,214,.32), inset 0 0 54px rgba(0,0,0,.85), 0 0 0 2px rgba(255,255,255,.10), 0 16px 34px rgba(0,0,0,.5); }
.glasses-lens video { width: 100%; height: 100%; object-fit: cover; opacity: .84; filter: saturate(.95) contrast(1.08); }
.glasses-lens:after { content: ''; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(120,235,255,.30) 0%, rgba(120,235,255,.06) 18%, transparent 42%), radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.5) 100%); pointer-events: none; }
.glasses-lens span { position: absolute; z-index: 1; left: 26px; bottom: 22px; color: var(--white); font: 10px var(--mono); letter-spacing: .08em; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.lens-audio { position: absolute; z-index: 3; right: 8px; top: 8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.18); font-size: 15px; cursor: pointer; transition: transform .15s ease, background .15s ease; }.lens-audio:hover { background: rgba(0,0,0,.85); transform: scale(1.08); }
.glasses-bridge { position: absolute; z-index: 2; left: 50%; bottom: 1%; transform: translateX(-50%); width: 11%; min-width: 62px; height: 8%; min-height: 32px; background: #04080b; border-radius: 0 0 999px 999px; box-shadow: inset 0 10px 14px rgba(0,0,0,.95); }
.glasses-arm { position: absolute; z-index: 0; top: 33%; width: 10%; height: 22%; border-radius: 999px; background: linear-gradient(90deg, transparent, #1b252f 45%, #0b1117); }
.glasses-arm.left { left: -9%; transform: rotate(6deg); }.glasses-arm.right { right: -9%; transform: rotate(-6deg); background: linear-gradient(90deg, #0b1117, #1b252f 55%, transparent); }
.vision-foot { position: absolute; left: 8vw; right: 8vw; bottom: 32px; display: flex; justify-content: space-between; color: rgba(255,255,255,.44); font: 9px var(--mono); letter-spacing: .12em; }

.vision-library { position: absolute; z-index: 2; left: 0; right: 0; bottom: 66px; display: flex; align-items: center; gap: 30px; padding-right: 8vw; }
.lib-label { flex: none; display: flex; flex-direction: column; gap: 7px; padding-left: 8vw; }
.lib-label span { color: var(--cyan); font: 9px var(--mono); letter-spacing: .14em; }
.lib-label strong { color: var(--white); font-size: 14px; font-weight: 500; white-space: nowrap; }
.lib-label:after { content: ''; width: 42px; height: 1px; margin-top: 2px; background: rgba(255,255,255,.3); }
.lib-viewport { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.lib-track { display: flex; width: max-content; animation: libScroll 75s linear infinite; }
.lib-viewport:hover .lib-track { animation-play-state: paused; }
.lib-track span { margin-right: 38px; color: rgba(255,255,255,.68); font-size: 12.5px; white-space: nowrap; }
.lib-track .has-promo { color: rgba(255,255,255,.95); cursor: pointer; }
.lib-track .has-promo:after { content: ' ▸'; color: var(--cyan); font-size: 10px; }
.promo-bubble { position: fixed; z-index: 60; top: -999px; left: -999px; width: 248px; padding: 6px 6px 0; color: var(--white); background: #101a26; border: 1px solid rgba(120,224,232,.4); box-shadow: 0 18px 55px rgba(0,0,0,.55); opacity: 0; pointer-events: none; transform: translateY(6px) scale(.96); transform-origin: 50% 100%; transition: opacity .18s ease, transform .18s ease; }
.promo-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.promo-bubble.below { transform-origin: 50% 0; }
.promo-bubble video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.promo-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 3px 9px; }
.promo-meta span { font-size: 12px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-meta i { flex: none; color: var(--cyan); font: 8px var(--mono); font-style: normal; letter-spacing: .14em; }
.promo-caret { position: absolute; left: 50%; bottom: -6px; width: 11px; height: 11px; background: #101a26; border-right: 1px solid rgba(120,224,232,.4); border-bottom: 1px solid rgba(120,224,232,.4); transform: translateX(-50%) rotate(45deg); }
.promo-bubble.below .promo-caret { top: -6px; bottom: auto; border-right: 0; border-bottom: 0; border-left: 1px solid rgba(120,224,232,.4); border-top: 1px solid rgba(120,224,232,.4); }
@keyframes libScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lib-track { animation: none; } }

.visitor-screen, .works-screen, .news-screen { padding: 145px 8vw 90px; color: var(--paper-ink); background: var(--paper); }
.visitor-screen .screen-label, .works-screen .screen-label, .news-screen .screen-label { position: static; color: var(--paper-muted); }.visitor-screen .screen-label:before, .works-screen .screen-label:before, .news-screen .screen-label:before { background: var(--paper-muted); }
.split-heading, .founder-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 45px; margin: 58px 0 55px; }.split-heading h2 em { color: #737b84; }.split-heading > p { max-width: 350px; margin: 0; color: var(--paper-muted); }.visitor-screen .mini-label, .works-screen .mini-label, .news-screen .mini-label { color: #737b84; }
.visitor-grid { display: grid; grid-template-columns: 1.25fr .75fr .75fr 1fr; grid-auto-rows: 170px; gap: 12px; }.visitor-card { position: relative; overflow: hidden; background: #d6d5d0; }.visitor-card.large { grid-row: span 2; }.visitor-card:nth-child(4) { grid-row: span 2; }.visitor-card img, .visitor-card video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); transition: transform .45s ease, filter .45s ease; }.visitor-card:hover img, .visitor-card:hover video { transform: scale(1.06); filter: saturate(1); }.visitor-card:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent 60%); }.visitor-card div { position: absolute; z-index: 1; left: 15px; right: 10px; bottom: 14px; display: flex; flex-direction: column; gap: 5px; color: var(--white); }.visitor-card span { color: var(--cyan); font: 9px var(--mono); }.visitor-card strong { font-size: 13px; font-weight: 500; }.section-tail { display: flex; justify-content: space-between; padding-top: 18px; color: var(--paper-muted); border-top: 1px solid rgba(0,0,0,.15); margin-top: 20px; }

.service-screen, .founder-screen { padding: 145px 8vw 90px; background: radial-gradient(circle at 80% 40%, rgba(25,81,112,.23), transparent 34rem), #0c151f; }.service-screen .screen-label, .founder-screen .screen-label { position: static; }.light-heading h2, .founder-intro h2 { color: var(--white); }.light-heading h2 em { color: var(--orange); }.light-heading > p, .founder-intro > p { max-width: 350px; margin: 0; }.service-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 8vw; align-items: start; }.service-rule { border-top: 1px solid rgba(255,255,255,.36); }.rule-head { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; color: var(--white); font-size: 15px; }.rule-head small { color: var(--cyan); font: 9px var(--mono); }.rule-row { display: grid; grid-template-columns: 100px 1fr; gap: 25px; padding: 18px 0; border-top: 1px solid var(--line); }.rule-row b { color: var(--orange); font-size: 12px; font-weight: 500; }.rule-row span { color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.7; }.service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }.service-list article { padding: 17px 0; border-top: 1px solid var(--line); }.service-list span { color: var(--cyan); font: 10px var(--mono); }.service-list strong { display: block; margin-top: 20px; font-size: 15px; font-weight: 500; }.service-list p { min-height: 60px; margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }

.advantage-screen { padding: 145px 8vw 90px; background: radial-gradient(circle at 18% 22%, rgba(25,81,112,.28), transparent 34rem), #0c151f; }
.advantage-screen .screen-label { position: static; }
.advantage-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: 5vw; align-items: start; }
.advantage-points { display: flex; flex-direction: column; }
.advantage-points article { padding: 24px 0; border-top: 1px solid var(--line); }
.advantage-points article:last-child { border-bottom: 1px solid var(--line); }
.advantage-points article > span { color: var(--cyan); font: 10px var(--mono); letter-spacing: .12em; }
.advantage-points h3 { margin: 14px 0 10px; color: var(--white); font-size: 20px; font-weight: 500; letter-spacing: -.03em; }
.advantage-points p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.85; }
.cost-panel { padding: 28px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.cost-panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.cost-panel-head > span { color: var(--white); font-size: 14px; }
.cost-panel-head small { color: var(--cyan); font: 9px var(--mono); letter-spacing: .12em; }
.cost-plan { padding: 18px 20px; border: 1px solid var(--line); }
.cost-plan.ours { margin-top: 16px; border-color: rgba(85,232,255,.55); background: rgba(85,232,255,.08); }
.cost-plan > b { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: rgba(255,255,255,.78); font-size: 13px; font-weight: 500; }
.cost-plan > b em { font-style: normal; color: var(--muted); font: 9px var(--mono); }
.cost-line { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 13px; }
.cost-line > span { color: rgba(255,255,255,.85); font-size: 12px; }
.cost-line > span small { display: block; margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.cost-line i { color: rgba(255,255,255,.92); font-style: normal; font: 15px var(--display); white-space: nowrap; }
.cost-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 15px; padding-top: 15px; border-top: 1px dashed rgba(255,255,255,.28); }
.cost-sum > span { color: var(--white); font-size: 13px; }
.cost-sum strong { font: 27px var(--display); font-weight: 500; color: rgba(255,255,255,.55); }
.cost-plan.ours .cost-sum strong { color: var(--cyan); }
.cost-save { margin-top: 16px; padding: 15px 18px; background: linear-gradient(90deg, rgba(255,156,106,.17), rgba(255,156,106,.04)); border: 1px solid rgba(255,156,106,.5); }
.cost-save b { display: block; color: var(--orange); font-size: 15px; font-weight: 500; }
.cost-save span { display: block; margin-top: 5px; color: rgba(255,255,255,.66); font-size: 10.5px; line-height: 1.6; }

.process-screen { display: flex; flex-direction: column; padding: 145px 8vw 90px; color: var(--paper-ink); background: var(--paper); }
.process-screen .screen-label { position: static; color: var(--paper-muted); }
.process-screen .screen-label:before { background: var(--paper-muted); }
.process-screen .split-heading { margin-bottom: 48px; }
.process-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.process-steps li { position: relative; padding-top: 26px; border-top: 1px solid rgba(0,0,0,.22); }
.process-steps li:before { content: ''; position: absolute; top: -1px; left: 0; width: 48px; height: 1px; background: var(--paper-ink); }
.step-no { color: #737b83; font: 10px var(--mono); letter-spacing: .14em; }
.process-steps h3 { margin: 22px 0 13px; font-size: 19px; font-weight: 500; letter-spacing: -.03em; }
.process-steps h3 em { display: inline-block; margin-left: 9px; padding: 3px 9px; font-style: normal; font: 9px var(--mono); letter-spacing: .06em; color: #0a6b73; background: rgba(85,232,255,.28); white-space: nowrap; }
.process-steps p { margin: 0; color: var(--paper-muted); font-size: 12px; line-height: 1.85; }
.process-cta { display: flex; align-items: center; gap: 24px; margin: auto 0 0; padding-top: 60px; flex-wrap: wrap; }
.process-cta .line-button { color: var(--paper-ink); }

.works-screen .split-heading { margin-bottom: 60px; }.works-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }.work-video { position: relative; overflow: hidden; height: 400px; background: #202126; }.work-video video { width: 100%; height: 100%; object-fit: cover; }.work-video:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent 48%); }.work-video > span { position: absolute; z-index: 1; bottom: 17px; left: 18px; color: var(--cyan); font: 10px var(--mono); }.works-pair h3 { margin: 20px 0 8px; font-size: 21px; line-height: 1.35; font-weight: 500; letter-spacing: -.04em; }.works-pair article > p { margin: 0; color: var(--paper-muted); font: 10px var(--mono); }

.founder-intro { margin-bottom: 55px; }.founder-intro h2 em { color: var(--purple); }.founder-carousel { display: grid; grid-template-columns: 1.12fr .88fr; min-height: 455px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.founder-photo { position: relative; overflow: hidden; background: #182532; }.founder-photo img { width: 100%; height: 455px; object-fit: cover; filter: saturate(.7); transition: opacity .25s ease; }.founder-photo img.switching { opacity: 0; }.photo-index { position: absolute; left: 18px; bottom: 16px; color: var(--cyan); font: 10px var(--mono); }.founder-card { display: flex; flex-direction: column; justify-content: center; padding: 45px; background: rgba(255,255,255,.05); }.founder-card h3 { max-width: 390px; margin: 0 0 22px; font-size: clamp(26px, 3vw, 47px); line-height: 1.05; font-weight: 500; letter-spacing: -.07em; }.founder-name { display: block; }.founder-subtitle { display: block; margin-top: 12px; color: var(--cyan); font-size: 15px; font-weight: 400; letter-spacing: .02em; }.founder-line { display: block; margin-bottom: 9px; }.founder-line:last-child { margin-bottom: 0; }.founder-card > p:not(.mini-label) { max-width: 390px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }.founder-controls { display: flex; align-items: center; gap: 15px; margin-top: auto; }.founder-progress { width: 160px; height: 1px; background: rgba(255,255,255,.25); }.founder-progress span { display: block; height: 1px; background: var(--cyan); transition: width .25s ease; }.founder-strip { display: grid; grid-template-columns: repeat(9, 1fr); gap: 9px; margin-top: 13px; }.founder-strip button { height: 72px; position: relative; overflow: hidden; padding: 0; opacity: .43; background: transparent; }.founder-strip button.active { opacity: 1; outline: 1px solid var(--cyan); }.founder-strip img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.63); }.founder-strip span { position: absolute; left: 7px; bottom: 5px; color: var(--white); font: 9px var(--mono); }

.article-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.news-video { min-width: 0; }.news-video-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #10161f; }.news-video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }.news-video-frame span { position: absolute; top: 11px; left: 11px; padding: 3px 7px; color: var(--cyan); background: rgba(7,12,19,.55); font: 9px var(--mono); letter-spacing: .08em; }.news-video h3 { margin: 13px 0 0; font-size: 15px; line-height: 1.5; font-weight: 500; letter-spacing: -.02em; }.article-card { min-width: 0; cursor: pointer; }.article-image { position: relative; overflow: hidden; height: 225px; background: #d6d5d0; }.article-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); transition: transform .4s ease; }.article-card:hover .article-image img { transform: scale(1.06); }.article-image span { position: absolute; top: 12px; left: 12px; color: var(--cyan); font: 10px var(--mono); }.article-card > p { margin: 16px 0 9px; color: #757b83; font: 9px var(--mono); }.article-card h3 { min-height: 58px; margin: 0; font-size: 18px; line-height: 1.35; font-weight: 500; letter-spacing: -.04em; }.article-card small { display: block; min-height: 58px; margin-top: 12px; color: var(--paper-muted); font-size: 11px; line-height: 1.7; }.article-card a { display: inline-flex; gap: 12px; margin-top: 19px; padding-bottom: 6px; color: var(--paper-ink); border-bottom: 1px solid var(--paper-ink); font: 10px var(--mono); }.article-card a span { color: #737b84; font-size: 14px; }

.contact-screen { display: flex; flex-direction: column; justify-content: space-between; padding: 145px 8vw 30px; background: #0a1019; }.contact-bg { position: absolute; inset: 0; opacity: .45; background: linear-gradient(90deg, rgba(7,12,19,.96), rgba(7,12,19,.45)), url('/media/duku-redrock.jpg') center / cover; filter: saturate(.65); }.contact-screen .screen-label, .contact-center, .contact-footer { position: relative; z-index: 1; }.contact-center { align-self: center; width: min(760px, 100%); text-align: center; }.contact-center .mini-label { justify-content: center; }.contact-center h2 { margin: 20px 0 26px; }.contact-center h2 em { color: var(--orange); }.contact-center > p:not(.mini-label) { max-width: 480px; margin: 0 auto; color: rgba(255,255,255,.68); }.contact-actions { display: flex; justify-content: center; gap: 18px; margin-top: 34px; }.contact-footer { display: flex; justify-content: space-between; color: rgba(255,255,255,.46); font: 9px var(--mono); letter-spacing: .08em; border-top: 1px solid var(--line); padding-top: 17px; }

.floating-chat { position: fixed; z-index: 30; right: 25px; bottom: 23px; display: flex; align-items: center; gap: 9px; padding: 13px 16px; color: var(--black); background: var(--cyan); box-shadow: 0 9px 30px rgba(0,0,0,.24); font-size: 11px; font-weight: 700; transition: opacity .25s ease, transform .25s ease; }.floating-chat:hover { transform: translateY(-3px); }.floating-chat.hidden { opacity: 0; pointer-events: none; transform: translateY(14px); }.floating-chat span { font-size: 17px; }.floating-chat i { width: 6px; height: 6px; border-radius: 50%; background: #006e75; }
.order-drawer { position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; width: min(540px, 100%); overflow-y: auto; transform: translateX(101%); color: var(--white); background: #111b27; border-left: 1px solid rgba(255,255,255,.23); transition: transform .38s cubic-bezier(.22,.85,.25,1); }.order-drawer.open { transform: translateX(0); }.drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.68); opacity: 0; pointer-events: none; backdrop-filter: blur(7px); transition: opacity .3s ease; }.drawer-backdrop.open { opacity: 1; pointer-events: auto; }.drawer-top { display: flex; justify-content: space-between; align-items: center; padding: 20px 27px; border-bottom: 1px solid var(--line); color: var(--cyan); font: 10px var(--mono); }.drawer-top button, .chat-head button { color: var(--white); background: transparent; font-size: 23px; }.drawer-content { padding: 52px 34px 35px; }.drawer-content h2 { margin: 0 0 29px; font-size: 51px; line-height: .95; font-weight: 500; letter-spacing: -.08em; }.drawer-content h2 em { color: var(--cyan); font-style: normal; }.plan-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.plan-option { min-height: 76px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; color: rgba(255,255,255,.7); text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--line); }.plan-option.active { color: var(--white); border-color: var(--cyan); background: rgba(85,232,255,.09); }.plan-option span { font-size: 14px; }.plan-option small, .plan-option b { color: var(--muted); font: 9px var(--mono); font-weight: 400; }.plan-option.active b { color: var(--cyan); }.order-summary { margin: 18px 0 22px; padding: 16px; background: rgba(255,255,255,.05); border-top: 1px solid var(--cyan); border-bottom: 1px solid var(--line); }.order-summary > div:first-child { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }.order-summary span, .order-summary small { color: var(--muted); font-size: 10px; }.order-summary strong { font-size: 14px; font-weight: 500; }.order-summary b { color: var(--cyan); font: 19px var(--display); }.order-summary small { display: block; line-height: 1.6; }
.cost-break { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.cost-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cost-row > span { display: flex; flex-direction: column; gap: 2px; color: #d5dde4 !important; font-size: 12px !important; }
.cost-row em { color: var(--cyan); font-style: normal; font-size: 9px; letter-spacing: .04em; }
.cost-row b { color: var(--white); font: 17px var(--display); }
.cost-row b small { display: inline; color: var(--muted); font: 9px var(--mono); margin-left: 3px; }
.cost-row.deposit { padding-top: 10px; border-top: 1px dashed var(--line); }
.cost-row.deposit b { color: #9fb3c4; }
.cost-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding: 12px 14px; background: rgba(85,232,255,.08); border: 1px solid rgba(85,232,255,.45); }
.cost-total > span { display: flex; flex-direction: column; color: #d5dde4 !important; font-size: 12px !important; }
.cost-total small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.cost-total b { font-size: 24px !important; }
.cost-perks { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.perk { padding: 10px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.perk b { display: block; color: var(--white); font-size: 12px; margin-bottom: 3px; }
.perk span { color: var(--muted); font-size: 10px !important; line-height: 1.6; }
.perk.highlight { border-color: rgba(85,232,255,.6); background: linear-gradient(90deg, rgba(85,232,255,.14), rgba(85,232,255,.04)); }
.perk.highlight b { color: var(--cyan); font-size: 13px; }.device-kit { margin: 24px 0; padding: 17px 16px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }.kit-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 14px; }.kit-caption span { color: var(--white); font-size: 12.5px; font-weight: 500; }.kit-caption i { color: var(--cyan); font: 8px var(--mono); font-style: normal; letter-spacing: .12em; }.kit-group + .kit-group { margin-top: 15px; }.kit-group-label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 10px; }.kit-group-label b { color: var(--cyan); font-weight: 500; }.kit-grid { display: grid; gap: 9px; }.kit-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }.kit-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }.device-kit figure { margin: 0; text-align: center; min-width: 0; }.kit-thumb { display: grid; place-items: center; aspect-ratio: 1; padding: 7px; background: linear-gradient(160deg, #f7f9fb, #e6ebf0); border: 1px solid rgba(255,255,255,.12); }.kit-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }.device-kit figcaption { margin-top: 6px; color: rgba(255,255,255,.72); font-size: 9px; line-height: 1.4; }.device-kit figcaption em { display: block; color: var(--cyan); font-style: normal; font: 9px var(--mono); }.order-drawer form { display: flex; flex-direction: column; gap: 14px; }.order-drawer label { display: flex; flex-direction: column; gap: 7px; color: #bdc8d1; font-size: 11px; }.order-drawer input, .order-drawer textarea { width: 100%; padding: 12px; resize: vertical; outline: 0; border: 1px solid var(--line); border-radius: 0; color: var(--white); background: rgba(0,0,0,.22); font-size: 12px; }.order-drawer input:focus, .order-drawer textarea:focus { border-color: var(--cyan); }.ip-picker { position: relative; }.ip-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; color: var(--white); text-align: left; background: rgba(0,0,0,.22); border: 1px solid var(--line); cursor: pointer; font-size: 12px; }.ip-trigger b { color: var(--cyan); font-size: 10px; font-weight: 400; transition: transform .2s ease; }.ip-picker.open .ip-trigger { border-color: var(--cyan); }.ip-picker.open .ip-trigger b { transform: rotate(180deg); }.ip-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ip-options { display: none; position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); padding: 10px; background: #131d2a; border: 1px solid rgba(120,224,232,.35); box-shadow: 0 18px 50px rgba(0,0,0,.5); }.ip-picker.open .ip-options { display: block; }.ip-options > small { display: block; margin-bottom: 8px; color: var(--muted); font-size: 9px; }.ip-options > small em { color: var(--cyan); font-style: normal; }.ip-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; max-height: 228px; overflow-y: auto; padding-right: 4px; }.ip-list .ip-option { display: flex; flex-direction: row; align-items: center; gap: 7px; padding: 6px 4px; color: rgba(255,255,255,.78); font-size: 11px; line-height: 1.35; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.06); }.ip-option input { width: 13px; height: 13px; flex: none; accent-color: var(--cyan); }.ip-list .ip-option.disabled { opacity: .35; cursor: not-allowed; }.ip-list .ip-option.disabled input { pointer-events: none; }.ip-list .ip-any { grid-column: 1 / -1; margin-bottom: 5px; padding-bottom: 9px; border-bottom: 1px solid rgba(120,224,232,.3); }.ip-list .ip-any span { color: var(--cyan); font-weight: 500; }.ip-list .ip-any.active span::after { content: ' ✓'; }.scene-order.full { width: 100%; margin-top: 7px; }.order-drawer form > small { color: #718594; font-size: 9px; line-height: 1.7; }.order-result { padding-top: 24px; }.result-check { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 24px; color: var(--black); border-radius: 50%; background: var(--cyan); font-size: 22px; }.order-result h3 { margin: 13px 0 17px; font-size: 33px; line-height: 1; letter-spacing: -.08em; font-weight: 500; }.order-result h3 em { color: var(--cyan); font-style: normal; }.order-result > p:not(.mini-label) { color: var(--muted); font-size: 13px; line-height: 1.8; }.result-total { display: flex; justify-content: space-between; padding: 15px 0; margin: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }.result-total b { color: var(--cyan); font: 18px var(--display); }
.chat-panel { position: fixed; z-index: 80; right: 25px; bottom: 23px; width: min(400px, calc(100% - 30px)); height: min(570px, calc(100vh - 40px)); display: flex; flex-direction: column; opacity: 0; pointer-events: none; transform: translateY(16px) scale(.97); color: var(--white); background: #111b27; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 20px 75px rgba(0,0,0,.45); transition: opacity .25s ease, transform .25s ease; }.chat-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-bottom: 1px solid var(--line); }.chat-head > div { display: flex; flex-direction: column; gap: 5px; }.chat-head strong { font-size: 12px; font-weight: 500; }.chat-head small { color: var(--muted); font-size: 9px; }.status-dot { width: 7px; height: 7px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); }.chat-messages { flex: 1; overflow-y: auto; padding: 17px; }.chat-line { display: grid; grid-template-columns: 26px 1fr; gap: 9px; margin-bottom: 16px; }.chat-line > span { color: var(--cyan); font: 9px var(--mono); }.chat-line.user > span { color: var(--purple); }.chat-line p { min-height: 19px; margin: 0; color: #c4d1db; font-size: 12px; line-height: 1.7; }.chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); }.chat-form textarea { flex: 1; resize: none; padding: 8px; color: var(--white); background: rgba(0,0,0,.25); border: 1px solid var(--line); outline: 0; font-size: 12px; }.chat-form textarea:focus { border-color: var(--cyan); }.chat-form button { width: 34px; height: 34px; color: var(--black); background: var(--cyan); font-size: 18px; }.chat-note { margin: 0; padding: 0 12px 11px; color: #607586; font-size: 9px; }.toast { position: fixed; z-index: 100; left: 50%; bottom: 25px; padding: 12px 17px; color: var(--white); background: #182536; border: 1px solid var(--line); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; font-size: 12px; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1040px) { .xp-nav { gap: 1.3vw; }.xp-logo { min-width: 175px; }.header-order { padding: 0 12px; }.scene-copy h1 { font-size: clamp(53px, 8vw, 86px); }.xr-glasses { width: 72vw; left: 62%; top: 56%; transform: translate(-38%, -46%) rotate(-4deg); }.glasses-lens { width: min(34vw, 400px); }.advantage-layout { grid-template-columns: 1fr; gap: 44px; }.process-steps { grid-template-columns: 1fr 1fr; gap: 30px 26px; }.visitor-grid { grid-template-columns: 1.2fr 1fr 1fr; }.visitor-card:nth-child(4) { grid-row: span 1; }.visitor-card:nth-child(6) { grid-row: span 2; }.article-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } }
@media (max-width: 760px) { .xp-header { height: 68px; padding: 0 17px; }.xp-logo { min-width: auto; }.xp-logo small { display: none; }.xp-nav { position: absolute; top: 68px; left: 17px; right: 17px; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 7px 15px 15px; opacity: 0; pointer-events: none; transform: translateY(-5px); background: rgba(7,9,13,.96); border: 1px solid var(--line); border-top: 0; transition: opacity .25s ease, transform .25s ease; }.xp-header.open .xp-nav { opacity: 1; pointer-events: auto; transform: translateY(0); }.xp-nav a { padding: 13px 0; border-bottom: 1px solid var(--line); }.header-order { display: none; }.mobile-menu { display: flex; }.scene-screen { min-height: 760px; padding: 130px 21px 120px; }.scene-shade { background: linear-gradient(90deg, rgba(5,8,13,.94), rgba(5,8,13,.38)), linear-gradient(0deg, rgba(5,8,13,.87), transparent 52%); }.scene-copy { margin-top: 0; }.scene-copy h1 { margin-top: 22px; font-size: clamp(50px, 14vw, 78px); }.scene-copy p { font-size: 13px; }.scene-bottom { left: 21px; right: 21px; bottom: 23px; grid-template-columns: 1fr auto; gap: 16px; }.scene-controls { grid-column: 2; grid-row: 1; }.scene-scroll { display: none; }.scene-caption { top: 91px; right: 17px; }.screen-label { top: 87px; left: 21px; }.vision-screen, .visitor-screen, .advantage-screen, .process-screen, .service-screen, .works-screen, .founder-screen, .news-screen, .contact-screen { min-height: auto; padding: 115px 21px 72px; }.vision-screen { min-height: 800px; }.vision-copy { top: 145px; left: 21px; right: 21px; max-width: 300px; }.vision-copy h2, .split-heading h2, .founder-intro h2, .contact-center h2 { font-size: clamp(42px, 12vw, 65px); }.xr-glasses { top: 63%; left: 50%; width: 98vw; gap: 1.4vw; transform: translate(-50%, -50%) rotate(-3deg); }.glasses-lens { width: 46vw; border-width: 9px; }.glasses-bridge { width: 13%; min-width: 0; height: 9%; min-height: 0; }.glasses-arm { width: 9%; height: 18%; }.glasses-arm.left { left: -7%; }.glasses-arm.right { right: -7%; }.vision-foot { left: 21px; right: 21px; bottom: 23px; font-size: 8px; }.vision-foot span:last-child { display: none; }.vision-library { bottom: 52px; gap: 15px; padding-right: 21px; }.lib-label { padding-left: 21px; gap: 4px; }.lib-label span { font-size: 8px; }.lib-label strong { font-size: 11px; }.lib-label:after { display: none; }.lib-track span { margin-right: 24px; font-size: 11px; }.split-heading, .founder-intro { display: block; margin: 40px 0 38px; }.split-heading > p, .founder-intro > p { margin-top: 25px; }.visitor-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; gap: 8px; }.visitor-card.large, .visitor-card:nth-child(4), .visitor-card:nth-child(6), .visitor-card:nth-child(9) { grid-row: span 2; }.service-layout { grid-template-columns: 1fr; gap: 46px; }.cost-panel { padding: 20px 16px; }.process-steps { grid-template-columns: 1fr; gap: 0; }.process-steps li { padding: 22px 0 24px; }.process-cta { align-items: stretch; flex-direction: column; max-width: 270px; }.process-cta .scene-order { justify-content: center; }.rule-row { grid-template-columns: 82px 1fr; gap: 14px; padding: 15px 0; }.service-list { gap: 0 14px; }.service-list strong { margin-top: 14px; }.service-list p { min-height: auto; }.works-pair { grid-template-columns: 1fr; gap: 39px; }.work-video { height: 280px; }.founder-carousel { grid-template-columns: 1fr; }.founder-photo, .founder-photo img { height: 340px; min-height: 340px; }.founder-card { min-height: 300px; padding: 27px 21px; }.founder-strip { grid-template-columns: repeat(9, 1fr); gap: 5px; }.founder-strip button { height: 47px; }.article-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.news-video h3 { font-size: 13px; }.article-image { height: 250px; }.contact-screen { min-height: 680px; }.contact-center { margin: auto 0; }.contact-actions { align-items: stretch; flex-direction: column; max-width: 270px; margin: 30px auto 0; }.contact-footer { flex-direction: column; gap: 10px; }.floating-chat { right: 15px; bottom: 15px; }.chat-panel { right: 15px; bottom: 15px; width: calc(100% - 30px); height: min(570px, calc(100vh - 30px)); }.drawer-content { padding: 39px 20px 28px; }.drawer-content h2 { font-size: 43px; }.plan-picker { grid-template-columns: 1fr; }.plan-option { min-height: 63px; } }
.contact-info { display: flex; flex-direction: column; gap: 9px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.62); font-size: 12px; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

/* 石元彬客服：快捷操作与动作按钮 */
.chat-line { align-items: flex-start; }
.chat-bubble { max-width: 78%; }
.chat-line.assistant .chat-bubble { margin-right: auto; }
.chat-line.user .chat-bubble { margin-left: auto; }
.chat-bubble p { margin: 0; }
.chat-bubble .chat-action { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 7px 13px; font-size: 11px; letter-spacing: .04em; color: #08111a; background: var(--cyan, #78e0e8); border: none; cursor: pointer; font-family: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.chat-bubble .chat-action:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(120,224,232,.35); }
.chat-quick { display: flex; flex-wrap: wrap; gap: 7px; padding: 9px 16px 2px; }
.chat-quick button { padding: 7px 12px; font-size: 11px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); cursor: pointer; font-family: inherit; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.chat-quick button:hover { color: var(--cyan, #78e0e8); border-color: var(--cyan, #78e0e8); background: rgba(120,224,232,.08); }
.sandbox-pay { width: 100%; margin-top: 8px; padding: 10px; font-size: 11px; color: rgba(255,255,255,.55); background: transparent; border: 1px dashed rgba(255,255,255,.28); cursor: pointer; font-family: inherit; }
.sandbox-pay:hover { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.5); }

/* 微信扫码支付 */
.pay-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 14px 0 6px; padding: 14px; background: rgba(255,255,255,.06); }
.pay-qr img { width: 220px; height: 220px; display: block; background: #fff; padding: 8px; }
.qr-wechat { font-size: 12px; letter-spacing: .12em; color: #1aad19; }
.qr-loading, .qr-error { padding: 26px 10px; font-size: 12px; color: rgba(255,255,255,.65); text-align: center; }
.qr-error { color: #ff9d9d; }
.paid-badge { width: 100%; padding: 22px 10px; text-align: center; color: #1aad19; font-size: 17px; letter-spacing: .08em; border: 1px solid rgba(26,173,25,.4); background: rgba(26,173,25,.08); }
.pay-tip { font-size: 11px; color: rgba(255,255,255,.6); text-align: center; margin: 0 0 6px; min-height: 16px; }