*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#02071d;overflow:hidden;font-family:"Microsoft YaHei","PingFang SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}.scene{position:relative;width:100vw;height:100vh;overflow:hidden;background:#02071d;isolation:isolate}.bg-wrap{position:absolute;inset:0;z-index:0;overflow:hidden}.bg-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:contrast(1.045) saturate(1.04);transform:translateZ(0);backface-visibility:hidden}.clarity-overlay{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 42%,rgba(255,255,255,.012),transparent 28%),radial-gradient(circle at 77% 43%,rgba(58,89,255,.035),transparent 28%);mix-blend-mode:screen}.dynamic-area{position:absolute;top:0;right:0;width:55%;height:91%;overflow:hidden;z-index:2;pointer-events:none;transform-style:preserve-3d;will-change:transform}#particleCanvas,.network{position:absolute;inset:0;width:100%;height:100%}#particleCanvas{opacity:.7}.network{overflow:visible;opacity:.64;filter:drop-shadow(0 0 6px rgba(53,105,255,.5))}.flow-line{fill:none;stroke:url(#lineGrad);stroke-width:2.05;stroke-dasharray:5 18;animation:dash 3.6s linear infinite}.flow-line.slow{animation-duration:5.2s}.flow-line.slower{animation-duration:7s}.runner{filter:url(#glow)}.runner-cyan{fill:#61eaff}.runner-violet{fill:#9276ff}.runner-pink{fill:#ff71f6}.node{fill:#72e9ff;filter:url(#glow);animation:nodePulse 1.8s ease-in-out infinite}.node:nth-child(2n){animation-delay:-.6s}.node:nth-child(3n){animation-delay:-1.1s}.aurora{position:absolute;border-radius:50%;filter:blur(42px);opacity:.18;mix-blend-mode:screen;will-change:transform,opacity}.aurora-a{width:34vw;height:16vw;right:-8vw;top:6vh;background:rgba(32,105,255,.58);animation:auroraA 8s ease-in-out infinite alternate}.aurora-b{width:27vw;height:14vw;right:8vw;bottom:8vh;background:rgba(150,61,255,.48);animation:auroraB 10s ease-in-out infinite alternate}.orbit{position:absolute;border:1px solid rgba(87,124,255,.34);border-radius:50%;box-shadow:0 0 10px rgba(46,126,255,.14),inset 0 0 10px rgba(105,46,255,.08);transform-origin:center;mix-blend-mode:screen}.orbit::before,.orbit::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#7bdcff;box-shadow:0 0 14px 4px rgba(90,221,255,.6)}.orbit::before{top:3%;left:50%}.orbit::after{bottom:9%;right:12%;background:#c96cff;box-shadow:0 0 14px 4px rgba(201,108,255,.52)}.orbit-a{width:59%;aspect-ratio:1;right:1%;top:-22%;transform:rotateX(63deg) rotateZ(8deg);animation:orbitSpinA 14s linear infinite}.orbit-b{width:46%;aspect-ratio:1;right:8%;top:-13%;transform:rotateX(66deg) rotateZ(-12deg);animation:orbitSpinB 18s linear infinite reverse;opacity:.7}.orbit-c{width:58%;aspect-ratio:1;right:-13%;bottom:-21%;transform:rotateX(69deg) rotateZ(18deg);animation:orbitSpinC 12s linear infinite;opacity:.5}.phone-glow{position:absolute;border-radius:48%;border:1px solid rgba(74,191,255,.14);mix-blend-mode:screen;filter:blur(.25px);will-change:transform,opacity}.phone-glow::after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:1px solid rgba(119,82,255,.09);box-shadow:0 0 20px rgba(24,180,255,.13),0 0 34px rgba(139,65,255,.08)}.phone-glow-main{width:32%;height:66%;left:43%;top:12%;animation:phoneFloatMain 4.2s ease-in-out infinite}.phone-glow-left{width:18%;height:43%;left:30%;top:38%;animation:phoneFloatLeft 5s ease-in-out infinite;opacity:.6}.phone-glow-right{width:17%;height:43%;right:6%;top:29%;animation:phoneFloatRight 4.7s ease-in-out infinite;opacity:.58}.scan{position:absolute;height:8%;background:linear-gradient(to bottom,rgba(79,210,255,0),rgba(79,210,255,.09),rgba(158,99,255,.17),rgba(79,210,255,0));filter:blur(2px);mix-blend-mode:screen;transform:rotate(-5deg);opacity:.62}.scan-main{width:34%;left:42%;top:8%;animation:scanMain 4.8s ease-in-out infinite}.scan-left{width:19%;left:29%;top:31%;animation:scanLeft 6.2s ease-in-out infinite -1.2s}.scan-right{width:18%;right:5%;top:24%;animation:scanRight 5.6s ease-in-out infinite -2s}.chat-layer,.reaction-layer{position:absolute;inset:0;overflow:hidden}.chat-bubble{position:absolute;min-width:88px;max-width:205px;padding:6px 10px;border:1px solid rgba(123,135,255,.36);border-radius:9px;color:rgba(246,249,255,.96);background:linear-gradient(135deg,rgba(23,117,255,.55),rgba(113,46,228,.48));box-shadow:0 0 11px rgba(40,137,255,.18),inset 0 0 12px rgba(255,255,255,.035);backdrop-filter:blur(5px);font-size:clamp(10px,.68vw,14px);white-space:nowrap;opacity:0;transform:translate3d(0,22px,0) scale(.9);animation:bubbleLife var(--life,5s) ease-out forwards}.chat-bubble::after{content:"";position:absolute;right:14px;bottom:-5px;width:8px;height:8px;border-right:1px solid rgba(123,135,255,.36);border-bottom:1px solid rgba(123,135,255,.36);background:rgba(84,56,199,.42);transform:rotate(45deg)}.reaction{position:absolute;width:var(--size,32px);height:var(--size,32px);display:grid;place-items:center;border-radius:50%;color:#fff;font-size:calc(var(--size,32px)*.54);background:linear-gradient(135deg,rgba(21,120,255,.74),rgba(157,57,238,.77));box-shadow:0 0 12px rgba(83,100,255,.42),0 0 22px rgba(146,60,255,.2);animation:reactionRise var(--life,4.3s) cubic-bezier(.18,.75,.26,1) forwards;opacity:0}.signal-burst{position:absolute;width:18px;height:18px;border-radius:50%;border:1px solid rgba(90,210,255,.64);opacity:0;animation:signalBurst 3.2s ease-out infinite}.burst-a{left:45%;top:57%;animation-delay:.4s}.burst-b{left:69%;top:30%;animation-delay:1.6s}.burst-c{left:81%;top:62%;animation-delay:2.4s}.globe-pulse{position:absolute;width:42%;aspect-ratio:1;right:-4%;bottom:-10%;border-radius:50%;background:radial-gradient(circle,rgba(45,171,255,.075) 0 45%,rgba(59,88,255,0) 68%);box-shadow:inset 0 0 34px rgba(61,205,255,.06),0 0 45px rgba(56,143,255,.07);animation:globePulse 4.4s ease-in-out infinite;mix-blend-mode:screen}.login-hotspots{position:absolute;inset:0;z-index:5;pointer-events:none}.hotspot-input{position:absolute;left:9.55%;width:23.05%;height:6.15%;border:0;outline:0;color:transparent;caret-color:#8ddcff;background:transparent;border-radius:10px;pointer-events:auto}.hotspot-input:focus{box-shadow:0 0 0 1px rgba(103,200,255,.64),0 0 17px rgba(67,115,255,.30)}.account-hotspot{top:40.55%}.password-hotspot{top:49.8%}.login-hotspot{position:absolute;left:9.55%;top:59.45%;width:23.05%;height:6.05%;border:0;background:transparent;border-radius:11px;cursor:pointer;pointer-events:auto}.login-hotspot:hover,.login-hotspot:focus-visible{outline:1px solid rgba(154,222,255,.76);box-shadow:0 0 16px rgba(45,182,255,.39),0 0 25px rgba(151,73,255,.24)}.login-hotspot:active{background:rgba(255,255,255,.04)}.feature-bar{
position:absolute;
left:3.25%;
right:3.25%;
bottom:7.55%;
height:9.55%;
z-index:8;
display:grid;
grid-template-columns:repeat(7,1fr);
align-items:stretch;
border-radius:22px;
overflow:visible;
padding:0 1.4%;
/* V3: 用接近实色的重新绘制面板彻底盖住背景图中原有的那一层文字和图标 */
background:
linear-gradient(180deg,rgba(10,25,82,.985) 0%,rgba(7,20,67,.988) 45%,rgba(9,22,75,.99) 100%);
border:1px solid rgba(87,130,255,.72);
box-shadow:
0 0 22px rgba(35,110,255,.24),
0 0 34px rgba(138,59,255,.14),
inset 0 1px 0 rgba(151,222,255,.26),
inset 0 -1px 0 rgba(145,75,255,.28),
inset 0 0 26px rgba(35,85,210,.18);
pointer-events:auto;
}
.feature-bar::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:
linear-gradient(90deg,rgba(35,183,255,.055),transparent 22%,transparent 78%,rgba(174,65,255,.055)),
radial-gradient(circle at 10% 50%,rgba(28,188,255,.06),transparent 20%),
radial-gradient(circle at 90% 50%,rgba(142,57,255,.08),transparent 20%);
}
.feature-bar::after{
content:"";
position:absolute;
left:2.5%;
right:2.5%;
bottom:2px;
height:1px;
pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(46,219,255,.7) 25%,rgba(117,98,255,.62) 58%,rgba(208,71,255,.65) 85%,transparent);
box-shadow:0 0 7px rgba(60,157,255,.32);
}
.feature-item{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:.62vw;text-decoration:none;color:#eef7ff;font-size:clamp(13px,1.1vw,22px);font-weight:500;text-shadow:0 0 9px rgba(85,168,255,.22);border-radius:14px;transform-origin:center;transition:transform .22s cubic-bezier(.2,.75,.2,1),background .22s ease,box-shadow .22s ease,color .22s ease;will-change:transform}.feature-item:not(:last-child)::after{content:"";position:absolute;right:-1px;width:4px;height:4px;border-radius:50%;background:#9cdcff;box-shadow:0 0 8px rgba(83,202,255,.62);opacity:.88}.feature-item:hover,.feature-item:focus-visible{transform:translateY(-3px) scale(1.065);background:linear-gradient(180deg,rgba(32,108,255,.13),rgba(106,48,217,.13));box-shadow:0 0 18px rgba(44,146,255,.19),inset 0 0 0 1px rgba(123,181,255,.10);color:#fff;outline:none}.feature-item:active{transform:translateY(-1px) scale(1.035)}.feature-icon{width:2.15vw;min-width:24px;max-width:39px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:#89e8ff;border:1px solid rgba(99,188,255,.42);background:radial-gradient(circle at 35% 30%,rgba(42,168,255,.22),rgba(56,52,183,.18));box-shadow:0 0 12px rgba(47,159,255,.25),inset 0 0 9px rgba(81,120,255,.10);transition:transform .22s ease,box-shadow .22s ease,color .22s ease}.feature-icon svg{width:61%;height:61%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.feature-item:nth-child(4) .feature-icon{color:#d582ff;border-color:rgba(184,102,255,.42)}.feature-item:nth-child(7) .feature-icon{color:#aac8ff}.feature-item:hover .feature-icon,.feature-item:focus-visible .feature-icon{transform:scale(1.12) rotate(-2deg);box-shadow:0 0 17px rgba(50,190,255,.38),0 0 29px rgba(119,69,255,.17);color:#e8fbff}.toast{position:absolute;left:21.1%;top:68.2%;transform:translateX(-50%) translateY(10px);z-index:12;color:#eaf8ff;background:rgba(6,18,55,.88);border:1px solid rgba(90,180,255,.34);border-radius:999px;padding:7px 14px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;box-shadow:0 0 20px rgba(81,99,255,.22)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.motion-toggle{position:absolute;right:14px;top:14px;z-index:20;border:1px solid rgba(110,166,255,.20);border-radius:999px;padding:8px 11px;color:rgba(226,241,255,.70);background:rgba(6,18,53,.40);backdrop-filter:blur(6px);cursor:pointer;opacity:.25;transition:opacity .2s ease,background .2s ease}.motion-toggle:hover,.motion-toggle:focus-visible{opacity:.9;background:rgba(8,25,75,.72)}.scene.motion-off .dynamic-area *,.scene.motion-off .clarity-overlay{animation-play-state:paused!important}.scene.motion-off .dynamic-area{opacity:.42}.visually-hidden{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}@keyframes dash{to{stroke-dashoffset:-92}}@keyframes nodePulse{0%,100%{opacity:.28;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}@keyframes auroraA{0%{transform:translate3d(0,0,0) scale(1);opacity:.12}100%{transform:translate3d(-5%,7%,0) scale(1.14);opacity:.27}}@keyframes auroraB{0%{transform:translate3d(0,2%,0) scale(.95);opacity:.10}100%{transform:translate3d(-8%,-5%,0) scale(1.14);opacity:.24}}@keyframes orbitSpinA{from{transform:rotateX(63deg) rotateZ(8deg) rotate(0deg)}to{transform:rotateX(63deg) rotateZ(8deg) rotate(360deg)}}@keyframes orbitSpinB{from{transform:rotateX(66deg) rotateZ(-12deg) rotate(0deg)}to{transform:rotateX(66deg) rotateZ(-12deg) rotate(360deg)}}@keyframes orbitSpinC{from{transform:rotateX(69deg) rotateZ(18deg) rotate(0deg)}to{transform:rotateX(69deg) rotateZ(18deg) rotate(360deg)}}@keyframes phoneFloatMain{0%,100%{transform:translate3d(0,-2px,0) rotate(-.25deg);opacity:.35}50%{transform:translate3d(5px,8px,0) rotate(.3deg);opacity:.8}}@keyframes phoneFloatLeft{0%,100%{transform:translate3d(-2px,2px,0) rotate(.4deg)}50%{transform:translate3d(5px,-7px,0) rotate(-.5deg)}}@keyframes phoneFloatRight{0%,100%{transform:translate3d(0,-4px,0) rotate(-.45deg)}50%{transform:translate3d(-6px,8px,0) rotate(.5deg)}}@keyframes scanMain{0%,15%{transform:translateY(0) rotate(-5deg);opacity:0}23%{opacity:.58}72%{opacity:.42}85%,100%{transform:translateY(470%) rotate(-5deg);opacity:0}}@keyframes scanLeft{0%,18%{transform:translateY(0) rotate(-6deg);opacity:0}28%{opacity:.40}78%{opacity:.30}92%,100%{transform:translateY(440%) rotate(-6deg);opacity:0}}@keyframes scanRight{0%,15%{transform:translateY(0) rotate(-4deg);opacity:0}26%{opacity:.44}80%{opacity:.28}94%,100%{transform:translateY(455%) rotate(-4deg);opacity:0}}@keyframes bubbleLife{0%{opacity:0;transform:translate3d(0,28px,0) scale(.88);filter:blur(1.7px)}12%{opacity:.9;filter:blur(0)}72%{opacity:.84}100%{opacity:0;transform:translate3d(var(--drift,-42px),-105px,0) scale(1.03);filter:blur(.4px)}}@keyframes reactionRise{0%{opacity:0;transform:translate3d(0,15px,0) scale(.45) rotate(0deg)}10%{opacity:.92}65%{opacity:.86}100%{opacity:0;transform:translate3d(var(--x,-55px),-260px,0) scale(1.18) rotate(var(--rot,12deg))}}@keyframes signalBurst{0%{opacity:.8;transform:scale(.25)}65%{opacity:.24}100%{opacity:0;transform:scale(5.8)}}@keyframes globePulse{0%,100%{transform:scale(.985);opacity:.48}50%{transform:scale(1.04);opacity:.84}}@media(max-width:900px){.dynamic-area{width:58%}.feature-bar{left:3.5%;right:3.5%}.feature-item{font-size:12px;gap:4px}.feature-icon{min-width:20px}.motion-toggle{display:none}}@media(prefers-reduced-motion:reduce){.dynamic-area *{animation-duration:.001ms!important;animation-iteration-count:1!important}.feature-item,.feature-icon{transition:none!important}}