/* 首屏 3D 场景：黑色舞台，玻璃罩里是新加坡机房与国内城市的远程桌面。脚本见 hero3d.js（源码 tools/hero3d/）。 */
.h3d{
  --h3d-fg:#f5f5f7;--h3d-dim:#86868b;--h3d-faint:#6e6e73;--h3d-hair:rgba(255,255,255,.14);--h3d-sg:#6fe3ff;--h3d-cn:#8d8bff;
  --h3d-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  position:relative;isolation:isolate;overflow:hidden;height:calc(100svh - 77px);min-height:640px;padding:0!important;
  background:#000!important;color:var(--h3d-fg);color-scheme:dark;-webkit-font-smoothing:antialiased;
}
.h3d-stage,.h3d-labels,.h3d-hud{position:absolute;inset:0}
.h3d-stage canvas{display:block;width:100%;height:100%;cursor:grab;visibility:visible!important}
.h3d-stage canvas:active{cursor:grabbing}
.h3d-nogl{position:absolute;inset:0;display:none;place-items:center;color:var(--h3d-dim);text-align:center;padding:24px}
.h3d-frame{position:absolute;inset:14px;pointer-events:none}
.h3d-frame i{position:absolute;width:14px;height:14px;border:0 solid rgba(255,255,255,.28)}
.h3d-frame i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.h3d-frame i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.h3d-frame i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.h3d-frame i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}

.h3d-hud{pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:max(5vh,30px) 34px 30px}
.h3d-head{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:100%;min-width:0}
.h3d-pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--h3d-dim);letter-spacing:.01em;border:1px solid var(--h3d-hair);border-radius:999px;padding:6px 13px 6px 11px;background:rgba(255,255,255,.03)}
.h3d-pill b{color:var(--h3d-fg);font-weight:500}
.h3d-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--h3d-sg);box-shadow:0 0 0 3px rgba(111,227,255,.18),0 0 12px var(--h3d-sg)}
.h3d h1{margin:0;font-weight:600;font-size:clamp(28px,5.2vw,58px);line-height:1.12;letter-spacing:-.022em;text-wrap:balance;color:var(--h3d-dim)}
.h3d h1 em{font-style:normal;color:var(--h3d-fg);background:linear-gradient(100deg,#fff 20%,#bfe9ff 60%,#c9c6ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.h3d-sub{margin:0;font-size:clamp(14px,1.6vw,18px);line-height:1.5;color:#a1a1a6;max-width:34em;text-wrap:balance}
.h3d-sub b{color:var(--h3d-fg);font-weight:500}
.h3d-ctas{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:4px;pointer-events:auto}
.h3d-more{color:var(--h3d-fg);font-size:15px;text-decoration:none;border-bottom:1px solid var(--h3d-hair);padding-bottom:2px}
.h3d-more:hover{border-color:var(--h3d-fg)}

.h3d-base{text-shadow:0 0 10px #000,0 0 22px #000;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px}
.h3d-mid{display:grid;gap:10px;justify-items:center;min-width:0}
.h3d-facts{margin:0;display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 10px;font-size:14px;color:#a1a1a6}
.h3d-facts b{color:var(--h3d-fg);font-weight:600;font-size:20px;letter-spacing:-.01em}
.h3d-facts .h3d-dot{align-self:center;width:6px;height:6px;border-radius:50%;background:#5ee08a;box-shadow:0 0 10px #5ee08a;margin-left:10px}
.h3d-facts [hidden]{display:none}
.h3d-cap{font-family:var(--h3d-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--h3d-faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.h3d-cap b{color:#c7c7cc;font-weight:500}
.h3d-cap.l{text-align:left}
.h3d-cap.r{text-align:right}
.h3d-cap.r::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--h3d-cn);box-shadow:0 0 10px var(--h3d-cn);margin-right:8px;vertical-align:1px;animation:h3d-blink 1.8s infinite}
.h3d-foot{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 20px;font-size:12px;color:var(--h3d-faint)}
.h3d-foot span:first-child{padding-right:20px;border-right:1px solid var(--h3d-hair)}
.h3d-foot span + span{color:var(--h3d-dim)}

.h3d-labels{pointer-events:none;overflow:hidden}
.h3d-lbl{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;font-weight:500;white-space:nowrap;color:var(--h3d-fg);will-change:transform,opacity;opacity:0;text-shadow:0 0 14px rgba(0,0,0,.9)}
.h3d-lbl small{font-size:11px;font-weight:400;color:var(--h3d-dim);margin-left:7px;letter-spacing:.04em}
.h3d-lbl code{font-family:var(--h3d-mono);font-size:9.5px;letter-spacing:.14em;font-weight:400;background:none;padding:0}
.h3d-lbl.sg code{color:var(--h3d-sg)}
.h3d-lbl.city{font-size:11px;gap:0;flex-direction:row;align-items:center}
.h3d-lbl.city::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--h3d-cn);box-shadow:0 0 8px var(--h3d-cn);margin-right:6px}
.h3d-lbl::after{content:"";width:1px;height:16px;margin-top:3px;background:linear-gradient(var(--h3d-hair),transparent)}
.h3d-lbl.city::after{display:none}

.h3d-head > *{animation:h3d-rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.h3d-head > :nth-child(2){animation-delay:.12s}
.h3d-head > :nth-child(3){animation-delay:.24s}
.h3d-head > :nth-child(4){animation-delay:.36s}
.h3d-base{animation:h3d-rise 1.1s .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes h3d-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes h3d-blink{0%,100%{opacity:1}50%{opacity:.3}}
@media (max-width:820px){
  .h3d-base{grid-template-columns:1fr}
  .h3d-cap{display:none}
}
@media (max-width:560px){
  .h3d{min-height:600px}
  .h3d-foot span:first-child{display:none}
  .h3d-lbl{font-size:12px}
  .h3d-hud{padding-inline:20px}
}
@media (prefers-reduced-motion:reduce){.h3d-head > *,.h3d-base,.h3d-cap.r::before{animation:none}}

/* 其余区块的小型 3D 点缀（方案、交付、结尾），脚本同在 hero3d.js */
#plans>.wrap,#relay>.wrap{position:relative}
.finale{position:relative}
.s3d{position:absolute;pointer-events:none}
.s3d canvas{display:block;width:100%;height:100%;visibility:visible!important}
.s3d-side{top:-24px;right:22px;width:min(40%,480px);height:280px}
.s3d-bg{inset:0;z-index:-1}
@media (max-width:980px){.s3d-side{display:none}}

/* 「立即租用」按钮：首屏用流光描边（青 → 紫，与场景链路同色），浅色区用带扫光的蓝色实心 */
@property --h3d-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
#hero .btn.btn-flow{position:relative;isolation:isolate;min-height:54px;padding:0 30px;border:0;border-radius:999px;background:transparent;color:#fff!important;font-size:17px;font-weight:600;letter-spacing:.01em;box-shadow:none;gap:10px}
#hero .btn.btn-flow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--h3d-ang),var(--h3d-sg),var(--h3d-cn),rgba(255,255,255,.08) 55%,var(--h3d-sg));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:h3d-spin 3.6s linear infinite;z-index:-1}
#hero .btn.btn-flow::after{content:"";position:absolute;inset:1.5px;border-radius:inherit;background:linear-gradient(180deg,rgba(26,34,64,.92),rgba(8,12,28,.92));z-index:-2;box-shadow:0 0 28px rgba(111,227,255,.22),0 0 60px rgba(141,139,255,.18);transition:box-shadow .35s}
#hero .btn.btn-flow:hover{background:transparent;box-shadow:none}
#hero .btn.btn-flow:hover::after{box-shadow:0 0 36px rgba(111,227,255,.42),0 0 80px rgba(141,139,255,.34)}
.btn.btn-flow .arr,.btn.btn-sheen .arr{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn.btn-flow:hover .arr,.btn.btn-sheen:hover .arr{transform:translateX(5px)}
@keyframes h3d-spin{to{--h3d-ang:360deg}}
html .btn.btn-sheen{position:relative;overflow:hidden;background:linear-gradient(180deg,#1a7af0,#0858c4);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 24px -8px rgba(10,120,245,.7);transition:transform .25s,box-shadow .3s}
html .btn.btn-sheen::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);animation:h3d-sheen 4.2s ease-in-out infinite;pointer-events:none}
html .btn.btn-sheen:hover{background:linear-gradient(180deg,#1a7af0,#0858c4);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 14px 30px -8px rgba(10,120,245,.85)}
html .btn.btn-sheen:active{transform:translateY(0) scale(.98)}
@keyframes h3d-sheen{0%,62%{left:-60%}100%{left:130%}}

/* 顶栏语言选择 */
.lang{position:relative;flex-shrink:0}
.lang-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--text-2);font:13px inherit;white-space:nowrap;cursor:pointer}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{color:var(--text);border-color:var(--line-2)}
.lang-btn svg{width:16px;height:16px;flex:none}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;margin:0;padding:6px;list-style:none;min-width:168px;max-height:min(70vh,460px);overflow:auto;background:var(--bg-1);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -16px rgba(22,43,69,.35)}
.lang-menu li{padding:9px 12px;border-radius:8px;font-size:14px;line-height:1.3;color:var(--text);cursor:pointer;white-space:nowrap}
.lang-menu li:hover,.lang-menu li:focus-visible{background:var(--bg-2);outline:none}
.lang-menu li[aria-selected="true"]{color:var(--link);font-weight:600}
@media (max-width:1100px){.lang-btn span{display:none}.lang-btn{padding:0;width:44px;justify-content:center}}
/* 顶栏在多语言下的排布：语言选择靠右挨着登录；动效开关收成图标，给导航留出位置 */
.top .lang{order:5;margin-left:auto}
.top .wrap .acct{order:6;margin-left:0}
.top .wrap>.btn{order:7}
.top .motion-toggle{font-size:0;width:44px;padding:0;gap:0}
.top .motion-toggle::before{content:"";box-sizing:border-box;width:11px;height:12px;border-inline:3.5px solid currentColor}
html[data-motion="paused"] .top .motion-toggle::before{width:0;height:0;border:0;border-left:11px solid currentColor;border-block:7px solid transparent}
@media (max-width:760px){.top .lang-btn,.top .theme-toggle,.top .motion-toggle{width:38px;height:38px;min-height:38px}}
/* 非中文时文字更长：手机上让出首屏机房标签的位置，方案卡标题避开「推荐」角标 */
@media (max-width:560px){html:not([lang^="zh"]) .h3d-lbl.sg{display:none}}
html:not([lang^="zh"]) .plan h3{padding-right:0;margin-top:26px}
/* 语言菜单排成两列，高度不超过顶栏下方的可见范围；手机上横向铺满 */
.lang-menu{display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:300px;max-height:none;overflow:visible}
@media (max-width:560px){.lang-menu{position:fixed;left:12px;right:12px;top:calc(60px + env(safe-area-inset-top,0px));min-width:0}}