:root{color-scheme:light;--ink:#080808;--heading:#35445f;--muted:#8c929d;--blue:#2878ff}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:#fff;color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{display:block;max-width:100%}.wrap{width:1200px;max-width:calc(100% - 80px);margin-inline:auto}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.skip-link{position:fixed;top:10px;left:10px;z-index:10;background:white;padding:12px;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.skip-link:focus{clip-path:none;width:auto;height:auto}
.hero-background{position:absolute;inset:0 0 auto;height:1020px;overflow:hidden;isolation:isolate;z-index:-1;background:linear-gradient(180deg,#9cc1e7 0%,rgba(255,255,255,0) 100%);pointer-events:none}
.webgl-layer,.grid-layer{position:absolute;inset:0;overflow:hidden;-webkit-mask:linear-gradient(#000000fc 0%,#000000e8 8.98%,transparent 100%);mask:linear-gradient(#000000fc 0%,#000000e8 8.98%,transparent 100%)}
.webgl-layer{z-index:0}.grid-layer{z-index:5}canvas{display:block;width:100%;height:100%;position:absolute;inset:0;background:transparent;pointer-events:none}

.header{height:74px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:20px;font-weight:600;color:#4c7cff;white-space:nowrap}.header nav{display:flex;align-items:center;gap:48px;font-size:16px;color:#515b6d}.header nav a{display:flex;align-items:center;gap:5px;min-height:44px;transition:color .2s}.header nav a:hover,.header nav a[aria-current="location"]{color:#000}.header nav a[aria-current="location"]{font-weight:500}
.hero{text-align:center;padding:120px 0 64px}.hero h1{margin:0;font-size:48px;line-height:1.35;font-weight:500;letter-spacing:1px;color:var(--heading)}.hero-description{margin:23px auto 0;font-size:16px;line-height:28px;letter-spacing:.5px;color:#737f91}.button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:127px;height:40px;padding:0 24px;border:1px solid #000;border-radius:99px;background:#000;color:#fff;font-size:14px;line-height:1;white-space:nowrap;transition:background .18s,color .18s,box-shadow .18s}.button:hover{background:#262626;box-shadow:0 4px 12px #00000014}.button:active{background:#424242}.hero-button{gap:7px;height:46px;margin-top:36px;min-width:184px;padding-inline:28px}.product{scroll-margin-top:30px}.section-heading{text-align:center}.section-heading h2{font-size:36px;line-height:50px;font-weight:500;color:#191919;margin:0}.section-heading>p{color:#626262;font-size:16px;line-height:28px;margin:5px 0 0;letter-spacing:.3px}.product-body{display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;margin-top:35px;min-height:468px}.product-copy{width:520px;max-width:100%}.features{display:flex;flex-direction:column;gap:58px}.features h3{color:#333333;display:flex;align-items:center;gap:14px;font-size:24px;line-height:34px;font-weight:500;margin:0 0 12px}.features h3:before{content:"";flex:none;width:12px;height:13px;background:var(--blue);clip-path:path("M 1 12 L 1 5 C 1 0 7 0 7 5 C 12 4 14 10 10 12 Z")}.features p{font-size:15px;line-height:25px;color:#626262;letter-spacing:.2px;margin:0}.actions{display:flex;gap:15px;margin-top:46px}.button-outline{background:#fff;color:#000}.button-outline:hover{background:#f4f6fa}.product-art{width:636px;max-width:none;height:auto;justify-self:end;transform:translateY(18px)}.product+.product{margin-top:155px}.product-reverse .product-copy{grid-column:2;grid-row:1;justify-self:end;width:488px}.product-reverse .product-art{grid-column:1;grid-row:1;justify-self:start}.product-reverse .features{gap:56px}.product-reverse .actions{margin-top:49px}.product:last-child{margin-top:151px}.products{padding-bottom:298px}
dialog{border:1px solid #e4e9f2;border-radius:18px;padding:36px;max-width:min(440px,calc(100% - 40px));color:var(--heading);box-shadow:0 24px 90px #192a4433}dialog::backdrop{background:#15203955;backdrop-filter:blur(5px)}dialog h2{font-size:24px;font-weight:500;margin:18px 0 12px}dialog p{font-size:15px;line-height:1.8;color:#687080}.dialog-note{margin-bottom:24px}.dialog-close{position:absolute;top:10px;right:12px;font-size:28px;width:40px;height:40px;background:none;border:0;color:#687080}
@media(min-width:1600px){.product-body{margin-top:35px}}
@media(max-width:1100px){.wrap{max-width:calc(100% - 64px)}.header nav{gap:24px}.hero{padding-top:100px}.hero h1{font-size:40px}.product-copy{width:92%}.product-art{width:110%;max-width:110%}.product-reverse .product-copy{width:88%}.features h3{font-size:22px}.features{gap:38px}.product+.product{margin-top:130px}.products{padding-bottom:160px}}
@media(max-width:700px){.wrap{max-width:calc(100% - 40px)}.header{height:auto;min-height:100px;align-items:flex-start;flex-direction:column;justify-content:center;gap:8px}.brand{font-size:17px}.header nav{width:100%;justify-content:space-between;gap:8px;font-size:12px}.header nav img{width:18px;height:18px}.header nav a{gap:3px}.hero{height:auto;padding:68px 20px 64px}.hero h1{font-size:30px;line-height:1.5;letter-spacing:0;max-width:370px;margin:auto}.hero-description{font-size:13px;line-height:24px;margin-top:18px;max-width:440px;letter-spacing:0}.hero-description br{display:none}.hero-button{margin-top:26px;font-size:13px;height:44px}.hero-background{height:670px}.section-heading h2{font-size:27px;line-height:40px}.section-heading>p{font-size:13px;line-height:23px;max-width:330px;margin:6px auto 0}.product-body{grid-template-columns:1fr;margin-top:35px;gap:30px;min-height:0}.product-copy,.product-reverse .product-copy{grid-column:1;grid-row:2;width:100%}.product-art,.product-reverse .product-art{grid-column:1;grid-row:1;width:100%;max-width:100%;transform:none;justify-self:center}.features,.product-reverse .features{gap:30px}.features h3{font-size:20px;line-height:30px;margin-bottom:10px;gap:10px}.features p{font-size:14px;line-height:25px;letter-spacing:0}.actions,.product-reverse .actions{margin-top:30px}.button{height:42px;min-width:127px}.product+.product,.product:last-child{margin-top:100px}.products{padding-bottom:100px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
#contact-form label{display:block;color:#35445f;font-size:14px;margin:18px 0 8px}#contact-form label span{color:var(--blue)}#contact-form input{display:block;width:100%;height:44px;border:1px solid #dbe1eb;border-radius:8px;padding:0 13px;font:inherit;font-size:14px;background:white;color:#26364c}#contact-form input:focus{outline:2px solid #2878ff55;border-color:var(--blue)}#contact-form input::placeholder{color:#a2a8b1}dialog{width:440px}.form-submit{width:100%;height:44px;margin-top:24px}#form-success{text-align:center;padding-top:20px}#form-success h3{font-weight:500}.success-mark{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#edf4ff;color:var(--blue);font-size:28px;margin:auto}#form-success .button{margin-top:12px}

html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
/* Desktop positions follow the supplied 1920px design proportions. */
@media(min-width:1101px){
  .hero{padding-top:116px}
  .hero h1{letter-spacing:0}
  .hero-description{margin-top:19px}
  .hero-button{margin-top:30px}

  .product-body{margin-top:30px}
  .product-art{transform:none}
  #yuntuke .product-art{width:690px;margin-right:-24px}
  .product+.product{margin-top:141px}
  .product-reverse .product-body{margin-top:60px}
  .product-reverse .product-art{transform:translate(10px,7px)}
  .product:last-child{margin-top:143px}
  .product:last-child .product-body{margin-top:59px}
  .product:last-child .product-art{transform:translateY(3px)}
  .products{padding-bottom:287px}
}

/* Local inversion cursor from the supplied demo, enabled on the hero title. */
#cursor-canvas{position:fixed;inset:0;z-index:9999;display:block;width:100vw;height:100vh;pointer-events:none;mix-blend-mode:difference}
@media(prefers-reduced-motion:reduce){#cursor-canvas{display:none}}

/* Content gathers first; the glass surface follows with a slower contraction. */
html{scroll-padding-top:120px}
.header{position:sticky;top:6px;z-index:100;padding-inline:0;transition:padding 520ms cubic-bezier(.22,1,.36,1)}
.header> .brand,.header>nav{position:relative;z-index:1}
.header.is-scrolled{padding-inline:80px}
.header-glass{position:fixed;top:5px;left:50%;transform:translateX(-50%);width:min(1264px,calc(100% - 16px));height:54px;z-index:99;border:1px solid rgba(180,192,211,.55);border-radius:999px;background:rgba(255,255,255,.48);-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);opacity:0;transition:width 620ms cubic-bezier(.22,1,.36,1),opacity 260ms ease;pointer-events:none}
.header.is-scrolled+.header-glass{width:min(1104px,calc(100% - 176px));opacity:1;transition-delay:80ms}
@media(min-width:701px){.header{height:52px;margin-bottom:22px}}
@media(min-width:701px) and (max-width:1100px){.header.is-scrolled{padding-inline:24px}.header-glass{width:100%}.header.is-scrolled+.header-glass{width:calc(100% - 48px)}}
@media(max-width:700px){html{scroll-padding-top:148px}.header{top:8px}.header.is-scrolled{padding-inline:4px}.header-glass{top:4px;height:108px;width:calc(100% - 16px);border-radius:24px}.header.is-scrolled+.header-glass{width:calc(100% - 24px)}}

.hero-carousel{--slide-width:min(960px,62vw);width:100%;margin-top:28px;overflow:hidden;touch-action:pan-y}
.carousel-scene{height:clamp(280px,39vw,650px);position:relative;perspective:1400px;perspective-origin:50% 48%}
.carousel-slide{position:absolute;left:50%;top:50%;width:var(--slide-width);aspect-ratio:1839/1035;padding:0;border:0;background:none;border-radius:14px;box-shadow:0 8px 24px rgba(31,49,75,.09);transform:translate(-50%,-50%);transition:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.carousel-slide img{width:100%;height:100%;border-radius:inherit;object-fit:contain;pointer-events:none;user-select:none}
.carousel-slide.is-active{z-index:3;transform:translate(-50%,-50%) translateZ(0);opacity:1;filter:brightness(1)}
.carousel-slide.is-prev{z-index:1;transform:translate(-50%,-50%) translateX(calc(var(--slide-width) * -.77 - 56px)) translateZ(-140px) rotateY(-26deg) scale(.72);opacity:.8;filter:brightness(.83)}
.carousel-slide.is-next{z-index:1;transform:translate(-50%,-50%) translateX(calc(var(--slide-width) * .77 + 56px)) translateZ(-140px) rotateY(26deg) scale(.72);opacity:.8;filter:brightness(.83)}
.carousel-scene,.carousel-slide{cursor:grab}
.carousel-scene.is-dragging,.carousel-scene.is-dragging .carousel-slide{cursor:grabbing}
.carousel-scene.is-dragging .carousel-slide{transition:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:700px){.hero-carousel{--slide-width:80vw;width:calc(100% + 40px);margin-left:-20px;margin-top:26px}.carousel-scene{height:clamp(220px,65vw,430px);perspective:800px}.carousel-slide{border-radius:14px}.carousel-slide.is-prev{transform:translate(-50%,-50%) translateX(calc(var(--slide-width) * -.8 - 24px)) translateZ(-80px) rotateY(-28deg) scale(.7)}.carousel-slide.is-next{transform:translate(-50%,-50%) translateX(calc(var(--slide-width) * .8 + 24px)) translateZ(-80px) rotateY(28deg) scale(.7)}}

/* Galaxy background, below the final product section. */
.products{padding-bottom:64px}
.footer-galaxy{position:relative;width:100%;height:clamp(300px,28vw,460px);overflow:hidden;background:#000;isolation:isolate}
.footer-galaxy canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.galaxy-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px 24px;gap:12px;text-align:center;color:#fff;pointer-events:none}
.galaxy-copy h2,.galaxy-copy p{margin:0;font-size:clamp(24px,2.3vw,36px);line-height:1.6;font-weight:600;letter-spacing:1px;text-wrap:balance}
@media(max-width:700px){.galaxy-copy{gap:10px}.galaxy-copy h2{font-size:23px}.galaxy-copy p{max-width:340px;font-size:19px;line-height:1.8}}

.site-footer{background:#f7f8fa;padding:25px 24px;color:#777;font-size:14px;line-height:1.9;text-align:center}
.footer-links{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0 7px;max-width:1400px;margin:auto}
.site-footer button{padding:0;border:0;background:none;color:inherit;font:inherit;line-height:inherit}
.site-footer a,.site-footer button{transition:color .2s}
.site-footer a:hover,.site-footer button:hover{color:#191919}
.info-page{min-height:100vh;display:flex;flex-direction:column;background:#f7f8fa}
.info-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px;font-size:14px;color:#626262}
.info-content{width:800px;max-width:calc(100% - 40px);margin:48px auto 80px;padding:40px;background:#fff;border:1px solid #e9edf2;border-radius:16px;flex:1}
.info-content h1{font-size:30px;font-weight:500;margin:0 0 28px;color:#191919}
.info-content h2{font-size:19px;font-weight:500;color:#333;margin:28px 0 10px}
.info-content p{font-size:15px;color:#626262;line-height:1.9;margin:12px 0}
.info-content a{color:#4c7cff}
@media(max-width:700px){.site-footer{font-size:12px;padding:20px}.footer-links>span:first-child{flex-basis:100%;margin-bottom:4px}.info-header{align-items:flex-start;flex-direction:column;gap:12px}.info-content{padding:24px;margin-top:20px}.info-content h1{font-size:26px}}

.galaxy-footer{position:absolute;bottom:0;left:0;width:100%;z-index:2;background:transparent;color:rgba(255,255,255,.45);padding:14px 24px;font-size:12px;line-height:1.8}
.galaxy-footer a:hover,.galaxy-footer button:hover{color:rgba(255,255,255,.85)}
.footer-galaxy .galaxy-copy{padding-bottom:78px}
@media(max-width:700px){.galaxy-footer{padding:12px 20px;font-size:11px}.footer-galaxy .galaxy-copy{padding-bottom:100px}}

/* Keep the footer readable while WebGL initializes or recovers. */
.footer-galaxy{background:#000 url('assets/galaxy-fallback.svg') center/cover no-repeat}
.footer-galaxy[data-galaxy-state="running"]{background-image:none}
.footer-galaxy[data-galaxy-state="context-lost"] #galaxy-canvas{visibility:hidden}