/* Motion direction: flowing connections, calm depth, clear feedback. */
header{position:sticky;top:0;transition:box-shadow .35s,background .35s;isolation:isolate}header.is-scrolled{background:#080f29f5;box-shadow:0 8px 30px #050d2825}nav a{position:relative;padding:7px 0}nav a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:#7c9fff;transform:scaleX(0);transform-origin:left;transition:transform .3s}nav a:hover:after,nav a.current:after{transform:scaleX(1)}
.reading-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:linear-gradient(90deg,#4d8fff,#b489ec,#ffa55f);z-index:30;transform:scaleX(var(--read,0));transform-origin:left;pointer-events:none}.button{position:relative;overflow:hidden;isolation:isolate}.button:before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 10%,#fff4 50%,transparent 90%);translate:-130% 0;transition:translate .65s;z-index:-1}.button:hover:before{translate:130% 0}.button span,.card-link b,.text-link span,.inline-link{transition:transform .3s cubic-bezier(.2,.8,.2,1)}.button:hover span,.card-link:hover b{transform:translate(3px,-3px)}.service-card:hover .card-link b{transform:translate(3px,-3px)}.text-link:hover span{display:inline-block;transform:translateY(4px)}.service-card{position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .35s,box-shadow .35s,border-color .35s}.service-card:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#668cff15,transparent 70%);opacity:0;transition:opacity .35s}.service-card:hover:before{opacity:1}.service-icon{transition:transform .4s,background .4s}.service-card:hover .service-icon{transform:translateY(-3px) rotate(-7deg);background:#eaf0ff}.card-link{position:relative}.channel,.orbit,.core,.hero-glow{will-change:transform}.channel{transition:border-color .4s,box-shadow .4s}.channel:hover{border-color:#719bfb;box-shadow:0 0 28px #406dff33}.core:before{content:'';position:absolute;inset:-13px;border:1px solid #749bff44;border-radius:26px;pointer-events:none}.orbit:after{content:'';width:8px;height:8px;border-radius:50%;background:#7a9fff;box-shadow:0 0 20px #4174ff;position:absolute;left:50%;top:-4px}.orbit-two:after{background:#ffb26c;box-shadow:0 0 20px #ff913d}.platforms{overflow:hidden}.platforms>div.marquee-window{display:block;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.channel-track{display:flex;width:max-content;gap:0}.channel-group{display:flex;align-items:center;gap:70px;padding-right:70px;flex-shrink:0}.channel-group b{white-space:nowrap;display:flex;align-items:center;gap:17px}.channel-group b:after{content:'✦';font-size:11px;color:#b2beda;margin-left:25px}.solution-art .path-line:before{content:'';position:absolute;width:8px;height:8px;background:#7595e6;box-shadow:0 0 15px #628aff80;border-radius:50%;top:0;left:50%}.accordions details[open]{border-bottom-color:#98b2f6}.accordions summary b{transition:transform .35s}.about-mark:after{pointer-events:none}html h1 em,html .gradient{background-size:200% 100%;animation:color-flow 9s ease-in-out infinite alternate}html .hero-glow{animation:glow-breathe 9s ease-in-out infinite alternate}html .channel{animation:levitate 6s ease-in-out infinite}html .c2{animation-delay:-1.5s;animation-duration:7s}html .c3{animation-delay:-3s;animation-duration:7.5s}html .c4{animation-delay:-4.5s;animation-duration:6.5s}html .core:before{animation:core-pulse 5s ease-in-out infinite}html .orbit-one{animation:orbital-one 35s linear infinite}html .orbit-two{animation:orbital-two 43s linear infinite}html .channel-track{animation:channel-flow 30s linear infinite}html .path-line{animation:path-turn 38s linear infinite}html .art-center{animation:levitate 7s ease-in-out infinite}html .about-mark:after{animation:ring-turn 70s linear infinite}html .eyebrow>span{animation:beacon 3s ease-in-out infinite}.motion-paused *, .motion-paused *:before, .motion-paused *:after, .tab-hidden *, .tab-hidden *:before, .tab-hidden *:after, .motion-offscreen *, .motion-offscreen *:before, .motion-offscreen *:after{animation-play-state:paused!important}.motion-paused{scroll-behavior:auto}.ecosystem{perspective:900px}.ecosystem .core{translate:var(--px,0) var(--py,0);transition:translate .35s ease-out}.hero .diagram-caption{position:relative}.service-card.tilt-active{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
@keyframes color-flow{from{background-position:0% 50%}to{background-position:100% 50%}}@keyframes glow-breathe{from{transform:translate(-5%,-3%) scale(.95);opacity:.65}to{transform:translate(5%,4%) scale(1.2);opacity:1}}@keyframes levitate{0%,100%{translate:0 0}50%{translate:0 -10px}}@keyframes core-pulse{0%,100%{opacity:.3;scale:1}50%{opacity:1;scale:1.035}}@keyframes orbital-one{from{transform:translate(-50%,-50%) rotate(-12deg)}to{transform:translate(-50%,-50%) rotate(348deg)}}@keyframes orbital-two{from{transform:translate(-50%,-50%) rotate(18deg)}to{transform:translate(-50%,-50%) rotate(-342deg)}}@keyframes channel-flow{to{transform:translateX(-50%)}}@keyframes path-turn{from{transform:rotate(-20deg)}to{transform:rotate(340deg)}}@keyframes ring-turn{to{transform:rotate(360deg)}}@keyframes beacon{0%,100%{opacity:.45}50%{opacity:1}}
@media(max-width:720px){header{top:0}nav{display:flex;visibility:hidden;opacity:0;transform:translateY(-12px);transition:opacity .25s,transform .25s,visibility .25s;pointer-events:none}nav.open{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto}.channel-group{gap:32px;padding-right:32px}.channel-group b:after{margin-left:14px;font-size:8px}html .orbit-one{animation-duration:50s}html .orbit-two{animation:none}html .channel{animation-duration:8s}html .hero-glow{animation:none}.service-card.tilt-active{transform:none}html{scroll-padding-top:90px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}.reading-progress{display:none}.channel-track{transform:none!important}.ecosystem .core{translate:0 0!important}.service-card.tilt-active{transform:none!important}}


/* Audit fixes: keep hub outline circular and all channels visible without motion. */
.core.circular-core:before{border-radius:50%}@media(prefers-reduced-motion:reduce){.platforms>div.marquee-window{overflow:visible;mask-image:none}.channel-track{width:100%;display:block;transform:none!important}.channel-group{width:100%;display:flex;flex-wrap:wrap;justify-content:space-around;gap:16px 24px;padding-right:0}.channel-group[aria-hidden="true"]{display:none}.channel-group b:after{display:none}}

/* Monochrome platform marks: equally sized cells make the two groups loop seamlessly. */
.platforms>div:not(.marquee-window){flex-wrap:wrap;justify-content:center;gap:28px 48px}
.platform-icon{display:flex;align-items:center;justify-content:center;flex:0 0 112px;width:112px;height:48px;color:#646464}
.platform-icon svg{display:block;width:36px;height:36px;fill:currentColor}
.platform-icon[data-platform="小红书"] svg{width:68px;height:48px}
.platforms .channel-group{gap:88px;padding-right:88px;width:1600px;justify-content:flex-start}
.platforms .channel-track{width:max-content}
@media(max-width:720px){.platform-icon{flex-basis:88px;width:88px;height:40px}.platform-icon svg{width:30px;height:30px}.platform-icon[data-platform="小红书"] svg{width:58px;height:40px}.platforms .channel-group{width:1152px;gap:56px;padding-right:56px}}
@media(prefers-reduced-motion:reduce){.platforms .channel-track{min-width:0;width:100%}.platforms .channel-group{width:100%;min-width:0;gap:16px 20px;padding-right:0;justify-content:center}.platforms .channel-group[aria-hidden="true"]{display:none}}

/* Dark connection core: layered vector orbital motion, no opaque white disc. */
.core.circular-core{background:radial-gradient(ellipse at 50% 35%,#15336c88 0%,#0b183766 55%,#080f2800 76%);border-color:#6ba5ff20;box-shadow:0 0 50px #2364ee18;color:#eef5ff;padding-top:10px}
.core.circular-core:before{border-color:#6cafff40;box-shadow:0 0 20px #367bff12}
.core.circular-core h2{color:#f0f6ff;text-shadow:0 0 20px #779cff40;margin-top:0}
.core.circular-core p{color:#b4c8eb}
.core.circular-core .core-label{color:#91a9d0;border-top-color:#88b9ff26}
.energy-core-art{display:block;width:220px;height:156px;flex-shrink:0;overflow:visible;pointer-events:none}
.energy-halo,.energy-loop,.energy-heart{transform-origin:120px 85px}
.energy-halo{animation:energy-turn 18s linear infinite}
.energy-loop-a{animation:energy-turn 12s linear infinite}
.energy-loop-b{animation:energy-turn 17s linear infinite reverse}
.energy-heart{animation:energy-heartbeat 4s ease-in-out infinite}
.energy-streams{stroke-dasharray:45 28;animation:energy-flow 3s linear infinite}
@keyframes energy-turn{to{transform:rotate(360deg)}}
@keyframes energy-flow{to{stroke-dashoffset:-146}}
@keyframes energy-heartbeat{0%,100%{transform:translateY(2px);opacity:.85}50%{transform:translateY(-3px);opacity:1}}
@media(max-width:720px){.energy-core-art{width:166px;height:112px}.core.circular-core{padding-top:7px}.energy-loop-a{animation-duration:16s}.energy-loop-b{animation-duration:22s}}
@media(prefers-reduced-motion:reduce){.energy-halo,.energy-loop,.energy-heart,.energy-streams{animation:none!important}}

/* Original generated glass sculpture; independent native ring/flow layers. */
.generated-energy{position:relative;width:224px;height:164px;flex-shrink:0;isolation:isolate}
.generated-energy-halo{position:absolute;inset:10px 25px;background:radial-gradient(ellipse,#397cff3b,transparent 68%);animation:generated-glow 5s ease-in-out infinite alternate}
.generated-energy-image{position:absolute;width:154px;height:154px;object-fit:contain;left:35px;top:3px;animation:generated-float 6s ease-in-out infinite;filter:drop-shadow(0 0 10px #3c86ff44)}
.generated-energy-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.generated-ring-a,.generated-ring-b{transform-origin:120px 90px;animation:energy-turn 16s linear infinite}.generated-ring-b{animation-duration:23s;animation-direction:reverse}
.generated-energy-flow{animation:energy-flow 3s linear infinite}
@keyframes generated-float{0%,100%{transform:translateY(2px) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes generated-glow{from{opacity:.45;transform:scale(.92)}to{opacity:.9;transform:scale(1.08)}}
@media(max-width:720px){.generated-energy{width:164px;height:114px}.generated-energy-image{width:108px;height:108px;left:28px;top:0}.generated-ring-a{animation-duration:20s}.generated-ring-b{animation-duration:28s}}
@media(prefers-reduced-motion:reduce){.generated-energy *{animation:none!important}}

/* Full-hero flow field: sweeping light runs across the whole visual, behind copy. */
.hero-flow-field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:hidden;mask-image:linear-gradient(180deg,#0003,#0007 35%,#000 70%)}
.hero-rays-base,.hero-rays-moving{fill:none;stroke:url(#hero-ray-color);stroke-width:1.2}
.hero-rays-moving{stroke-width:2;stroke-dasharray:100 440;animation:hero-ray-travel 9s linear infinite}
.hero-rays-moving path:nth-child(2n){stroke-dasharray:170 580;stroke-width:1}
@keyframes hero-ray-travel{to{stroke-dashoffset:-2160}}
.hero .core.circular-core{width:300px;height:300px;border:0;background:transparent;box-shadow:none;padding:0 18px}
.hero .core.circular-core:before{display:none}
.hero .generated-energy{width:270px;height:210px}
.hero .generated-energy-image{width:200px;height:200px;left:35px;top:3px}
.hero .core.circular-core h2{margin-top:0}
@media(max-width:720px){.hero .core.circular-core{width:210px;height:220px;padding:0 10px}.hero .generated-energy{width:190px;height:140px}.hero .generated-energy-image{width:136px;height:136px;left:27px;top:0}.hero-flow-field{width:160%;left:-30%}.hero-rays-moving{animation-duration:12s;stroke-width:1.4}}
@media(prefers-reduced-motion:reduce){.hero-rays-moving{animation:none!important}}

/* Genuine alpha artwork: no circular/rectangular crop or backdrop. */
.approved-subject-frame{position:absolute;width:200px;height:200px;left:35px;top:3px;overflow:visible;animation:generated-float 6s ease-in-out infinite}
.approved-subject-frame img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 7px #75caff40) drop-shadow(0 0 15px #387dff26)}
@media(max-width:720px){.approved-subject-frame{width:136px;height:136px;left:27px;top:0}}
@media(prefers-reduced-motion:reduce){.approved-subject-frame{animation:none!important}}

/* Commerce components: each visible object is independently composited and animated. */
.commerce-stage{position:absolute;inset:0 0 48px;background:radial-gradient(ellipse at 50% 48%,#f7fbff,#e6f0ff 75%);overflow:hidden;isolation:isolate}
.commerce-piece{position:absolute;display:block;overflow:hidden;transform-origin:50% 60%;animation:commerce-drift 6s ease-in-out infinite;will-change:transform}
.commerce-tablet{width:35%;height:67%;left:33%;top:12%;z-index:4;animation-duration:7.5s}
.commerce-streamer{width:30%;height:39%;left:4%;top:4%;z-index:3;animation-duration:6.1s;animation-delay:-2s}
.commerce-store{width:29%;height:38%;left:2%;top:49%;z-index:5;animation-duration:6.8s;animation-delay:-3.2s}
.commerce-bag{width:23%;height:32%;left:65%;top:1%;z-index:2;animation-duration:5.5s;animation-delay:-1s}
.commerce-chat{width:18%;height:26%;left:82%;top:25%;z-index:3;animation-name:commerce-chat;animation-duration:4.5s;animation-delay:-1.4s}
.commerce-customer{width:26%;height:36%;left:73%;top:47%;z-index:5;animation-duration:6.4s;animation-delay:-4.3s}
.commerce-chart{width:24%;height:29%;left:61%;top:70%;z-index:6;animation-name:commerce-chart;animation-duration:5.7s;animation-delay:-2.6s}
.commerce-coin-a,.commerce-coin-b{width:7%;height:10%;z-index:6;animation:commerce-coin 6s ease-in-out infinite}
.commerce-coin-a{left:21%;top:41%;animation-delay:-1s}.commerce-coin-b{left:70%;top:40%;animation-delay:-3.8s}
.commerce-ball-a,.commerce-ball-b,.commerce-ball-c{width:5%;height:7%;z-index:2;animation:commerce-ball 5s ease-in-out infinite}
.commerce-ball-a{left:53%;top:1%}.commerce-ball-b{left:30%;top:73%;animation-delay:-2s}.commerce-ball-c{left:89%;top:77%;animation-delay:-3.5s}
.commerce-orbits{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#91baff;stroke-width:9;opacity:.6;z-index:1}
.commerce-ring-back{transform-origin:600px 410px;animation:commerce-ring 16s ease-in-out infinite}.commerce-ring-front{transform-origin:600px 440px;animation:commerce-ring 21s ease-in-out infinite reverse;stroke:#fff;stroke-width:6}
.commerce-connections{stroke:#2e67eb;stroke-width:3;stroke-dasharray:3 12;animation:commerce-flow 22s linear infinite}
.commerce-visual figcaption{z-index:10}
@keyframes commerce-drift{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes commerce-chat{0%,100%{transform:translateY(1px) scale(.97)}50%{transform:translateY(-4px) scale(1.03)}}
@keyframes commerce-chart{0%,100%{transform:translateY(1px) rotate(1deg)}50%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes commerce-coin{0%,100%{transform:translateY(0) rotate(-12deg) scaleX(.9)}50%{transform:translateY(-7px) rotate(12deg) scaleX(1)}}
@keyframes commerce-ball{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-7px)}}
@keyframes commerce-ring{0%,100%{transform:rotate(-3deg) scale(.99)}50%{transform:rotate(3deg) scale(1.015)}}
@keyframes commerce-flow{to{stroke-dashoffset:-600}}
@media(max-width:720px){.commerce-piece{will-change:auto}.commerce-stage{bottom:40px}}
@media(prefers-reduced-motion:reduce){.commerce-stage *{animation:none!important;will-change:auto}}

.channel-tooltip{position:fixed;z-index:1000;max-width:calc(100vw - 16px);padding:9px 13px;border-radius:8px;background:#15203a;color:#fff;font-size:12px;line-height:1.5;box-shadow:0 5px 18px #07102424;pointer-events:none;overflow-wrap:anywhere}.platform-icon:focus-visible{outline:2px solid #7893c8;outline-offset:4px;border-radius:6px}
