/* ============================================================
   QINGQI HOME SERVER — styles.css
   黑白单色 · 平面风 · 科技感
   硬性规则：动画只动 transform / opacity；
   hover 不改 width/height/padding/margin；无 box-shadow 堆砌。
   ============================================================ */

/* ---------- 0.2 全局变量 ---------- */
:root{
  --bg:        #050505;
  --panel:     #0d0d0d;
  --line:      rgba(255,255,255,0.12);
  --line-2:    rgba(255,255,255,0.24);
  --fg:        #f2f2f2;
  --fg-2:      #9a9a9a;
  --fg-3:      #5a5a5a;
  --hi:        #ffffff;
  --hi-08:     rgba(255,255,255,0.08);
  --hi-04:     rgba(255,255,255,0.04);
  --hi-02:     rgba(255,255,255,0.02);

  --font-sans: "Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono: "Noto Sans Mono CJK SC",ui-monospace,"Cascadia Code",Consolas,monospace;

  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --e-hover: cubic-bezier(0.4, 0, 0.2, 1);

  --grid: 48px;
  --maxw: 1600px;
  --pad:  96px;
}

/* ---------- 0.3 reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth}
body{
  /* background 必须透明：html 已铺同色底；body 不透明底会盖住负 z-index 的图形/网格层 */
  min-height:100vh;background:transparent;color:var(--fg);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:#fff;color:#000}
.mono{font-family:var(--font-mono)}
:focus-visible{outline:1px solid #fff;outline-offset:3px}

/* ============================================================
   1. 背景氛围层
   ============================================================ */

/* 1.1 网格（z:-2） */
.bg-grid{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:
    calc(var(--grid)*8) calc(var(--grid)*8),
    calc(var(--grid)*8) calc(var(--grid)*8),
    var(--grid) var(--grid),
    var(--grid) var(--grid);
  background-position:0 0;
  animation: gridDrift 48s linear infinite;
  will-change:transform;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, rgba(0,0,0,.55) 70%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, rgba(0,0,0,.55) 70%, transparent 100%);
}
@keyframes gridDrift{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(calc(var(--grid)*8), calc(var(--grid)*8), 0)}
}

/* 1.2 噪点（z:-1） */
.bg-noise{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px);
  mix-blend-mode:screen;
}
.bg-noise::after{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.05), transparent 45%),
    radial-gradient(circle at 75% 80%, rgba(255,255,255,.03), transparent 50%);
}

/* 1.3 全局扫描线（z:50） */
.hud-global{position:fixed; inset:0; z-index:50; pointer-events:none; overflow:hidden}
.scanline{
  position:absolute; left:0; right:0; height:180px; top:-180px;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.028) 70%, rgba(255,255,255,.05) 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
  animation: scanSweep 9s linear infinite;
  animation-delay:3.2s;
  will-change:transform;
}
@keyframes scanSweep{
  0%  {transform:translate3d(0,-180px,0)}
  100%{transform:translate3d(0, calc(100vh + 180px), 0)}
}

/* 入场前的初始隐藏（仅 JS 可用时） */
html:not(.no-js) .bg-grid{opacity:0}
html:not(.no-js) .bg-noise{opacity:0}
html.is-ready .bg-grid{animation:gridIn 900ms var(--e-out) both, gridDrift 48s linear infinite 900ms}
html.is-ready .bg-noise{animation:noiseIn 900ms var(--e-out) both}
@keyframes gridIn{from{opacity:0}to{opacity:1}}
@keyframes noiseIn{from{opacity:0}to{opacity:.5}}

/* ============================================================
   2. HERO 区
   ============================================================ */
.hero{position:relative; height:100dvh; min-height:720px}
.hero-inner{
  position:relative;
  max-width:var(--maxw); margin:0 auto;
  padding:40px var(--pad) 0;
  height:100%;
  display:flex; flex-direction:column;
}

/* 2.1 顶栏 HUD */
.hud-top{
  position:relative;
  height:48px;
  display:flex; justify-content:space-between; align-items:flex-start;
  font:500 11px/1 var(--font-mono);
  letter-spacing:.14em;
  color:var(--fg-3);
}
.hud-top::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--line);
  transform:scaleX(1); transform-origin:left;
}
html:not(.no-js) .hud-top::after{transform:scaleX(0)}
html.is-ready .hud-top::after{animation:lineX 700ms var(--e-out) 200ms both}
@keyframes lineX{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hud-item{display:flex; align-items:center; gap:10px}
.hud-item .dot{
  width:8px; height:8px;
  border:1px solid var(--line-2);
  background:transparent;
}
html.is-ready .hud-item[data-hud="2"] .dot{animation:dotOn 200ms linear 800ms both}
@keyframes dotOn{to{background:#fff}}

/* 入场：HUD 项错峰 */
html:not(.no-js) .hud-item{opacity:0}
html.is-ready .hud-item[data-hud="0"]{animation:fadeUp 500ms var(--e-out) 400ms both}
html.is-ready .hud-item[data-hud="1"]{animation:fadeUp 500ms var(--e-out) 500ms both}
html.is-ready .hud-item[data-hud="2"]{animation:fadeUp 500ms var(--e-out) 600ms both}
@keyframes fadeUp{
  from{opacity:0; transform:translate3d(0,8px,0)}
  to  {opacity:1; transform:none}
}

/* 2.2 主标题 */
.hero-title-wrap{margin:auto 0; padding-bottom:80px}

.hero-meta{
  font:500 12px/1 var(--font-mono);
  letter-spacing:.28em;
  color:var(--fg-3);
  margin-bottom:28px;
}
.hero-meta .bracket{color:var(--fg-2)}
html:not(.no-js) .hero-meta{opacity:0}
html.is-ready .hero-meta{animation:metaIn 600ms var(--e-out) 700ms both}
@keyframes metaIn{
  from{opacity:0; letter-spacing:.42em}
  to  {opacity:1; letter-spacing:.28em}
}

.hero-title{
  position:relative;
  font:700 clamp(64px, 8.2vw, 168px)/0.92 var(--font-sans);
  letter-spacing:-0.035em;
  text-transform:uppercase;
  color:var(--fg);
}
.hero-title .line{display:block; overflow:hidden; white-space:nowrap}
.hero-title .line-2{font-size:.72em; letter-spacing:.01em; color:var(--fg-2)}
.hero-title .ch{display:inline-block; will-change:transform,opacity}
.hero-title .ch.sp{color:var(--hi); margin:0 .18em; font-weight:300}

/* 逐字入场：行1 延迟 0.9s、行2 延迟 1.2s，字距 28ms */
html:not(.no-js) .hero-title .ch{opacity:0; transform:translate3d(0,110%,0) rotateX(-8deg)}
html.is-ready .hero-title .ch{animation:chUp 1000ms var(--e-out) both}
@keyframes chUp{
  from{opacity:0; transform:translate3d(0,110%,0) rotateX(-8deg)}
  to  {opacity:1; transform:none}
}
.line-1 .ch:nth-child(1){animation-delay:.900s} .line-1 .ch:nth-child(2){animation-delay:.928s}
.line-1 .ch:nth-child(3){animation-delay:.956s} .line-1 .ch:nth-child(4){animation-delay:.984s}
.line-1 .ch:nth-child(5){animation-delay:1.012s} .line-1 .ch:nth-child(6){animation-delay:1.040s}
.line-2 .ch:nth-child(1){animation-delay:1.200s} .line-2 .ch:nth-child(2){animation-delay:1.228s}
.line-2 .ch:nth-child(3){animation-delay:1.256s} .line-2 .ch:nth-child(4){animation-delay:1.284s}
.line-2 .ch:nth-child(5){animation-delay:1.312s} .line-2 .ch:nth-child(6){animation-delay:1.340s}
.line-2 .ch:nth-child(7){animation-delay:1.368s} .line-2 .ch:nth-child(8){animation-delay:1.396s}
.line-2 .ch:nth-child(9){animation-delay:1.424s} .line-2 .ch:nth-child(10){animation-delay:1.452s}
.line-2 .ch:nth-child(11){animation-delay:1.480s}

/* 扫描揭示条 */
.reveal-bar{
  position:absolute; inset:0;
  background:rgba(255,255,255,.06);
  border-right:1px solid #fff;
  pointer-events:none;
  opacity:0;
}
html.is-ready .reveal-bar{animation:barSweep 1300ms var(--e-out) 850ms both}
@keyframes barSweep{
  0%  {transform:translateX(-100%); opacity:1}
  85% {transform:translateX(0);     opacity:1}
  100%{transform:translateX(0);     opacity:0}
}

/* 副标题 */
html:not(.no-js) .hero-sub{opacity:0}
html.is-ready .hero-sub{animation:fadeUp 700ms var(--e-out) 1700ms both}
.hero-sub{
  margin-top:40px;
  font:400 18px/1.6 var(--font-sans);
  letter-spacing:.04em;
  color:var(--fg-2);
}

/* SCROLL 提示 */
html:not(.no-js) .hero-scroll{opacity:0}
html.is-ready .hero-scroll{animation:fadeUp 500ms var(--e-out) 2350ms both}
.hero-scroll{
  margin-top:72px;
  font:500 10px/1 var(--font-mono);
  letter-spacing:.3em;
  color:var(--fg-3);
  display:flex; align-items:center; gap:12px;
}
.scroll-line{
  width:56px; height:1px; background:var(--line-2);
  transform-origin:left;
  animation: scrollPulse 4s var(--e-inout) infinite;
}
@keyframes scrollPulse{
  0%,100%{transform:scaleX(1)}
  50%    {transform:scaleX(0)}
}

/* 四角角标 */
.corner{
  position:absolute;
  font:500 10px/1 var(--font-mono);
  letter-spacing:.12em;
  color:var(--fg-3);
}
.corner::before{
  content:""; position:absolute;
  width:14px; height:14px;
  border-color:var(--line-2); border-style:solid; border-width:0;
}
.c-tl{top:104px; left:var(--pad)}
.c-tl::before{left:-22px; top:-10px; border-left-width:1px; border-top-width:1px}
.c-tr{top:104px; right:var(--pad); text-align:right}
.c-tr::before{right:-22px; top:-10px; border-right-width:1px; border-top-width:1px}
.c-bl{bottom:40px; left:var(--pad)}
.c-bl::before{left:-22px; bottom:-10px; border-left-width:1px; border-bottom-width:1px}
.c-br{bottom:40px; right:var(--pad); text-align:right}
.c-br::before{right:-22px; bottom:-10px; border-right-width:1px; border-bottom-width:1px}

html:not(.no-js) .corner{opacity:0}
html.is-ready .c-tl{animation:cornerIn 400ms var(--e-out) 2100ms both}
html.is-ready .c-tr{animation:cornerIn 400ms var(--e-out) 2180ms both}
html.is-ready .c-bl{animation:cornerIn 400ms var(--e-out) 2260ms both}
html.is-ready .c-br{animation:cornerIn 400ms var(--e-out) 2340ms both}
@keyframes cornerIn{
  from{opacity:0; transform:scale(.9)}
  to  {opacity:1; transform:scale(1)}
}

/* ============================================================
   3. 服务区
   ============================================================ */
.services{
  padding:160px 0 200px;
  border-top:1px solid var(--line);
  position:relative;
}
.services-inner{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}

.sec-head{margin-bottom:72px; will-change:transform}
.sec-tag{
  font:500 11px/1 var(--font-mono);
  letter-spacing:.28em;
  color:var(--fg-3);
}
.sec-title{
  margin-top:20px;
  font:700 56px/1 var(--font-sans);
  letter-spacing:-.02em;
  color:var(--fg);
}
.sec-title span{color:var(--fg-3); font-weight:300; margin:0 .12em}
.sec-rule{height:1px; background:var(--line); margin-top:32px}
.sec-meta{
  margin-top:16px;
  display:flex; gap:40px;
  font:500 10px/1 var(--font-mono);
  letter-spacing:.18em;
  color:var(--fg-3);
}

/* 6.1 滚动 reveal */
.reveal{opacity:0; transform:translate3d(0,24px,0);
  transition:opacity 800ms var(--e-out), transform 800ms var(--e-out);
  transition-delay:var(--d, 0ms);}
.reveal.is-in{opacity:1; transform:none}
.reveal-line{transform:scaleX(0); transform-origin:left;
  transition:transform 900ms var(--e-out);
  transition-delay:var(--d, 0ms);}
.reveal-line.is-in{transform:scaleX(1)}
html.no-js .reveal, html.no-js .reveal-line{opacity:1; transform:none}

/* 卡片网格 */
.cards{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
}
.card{
  position:relative;
  min-height:360px;
  padding:32px 28px 28px;
  background:var(--panel);
  border:1px solid var(--line);
  margin-left:-1px;
  display:flex; flex-direction:column;
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  transition:transform 420ms var(--e-out), border-color 240ms var(--e-hover);
}
.card:first-child{margin-left:0}
html:not(.no-js) .cards .card{opacity:0; transform:translate3d(0,28px,0)}
html .cards.is-in .card{animation:cardIn 800ms var(--e-out) both; animation-delay:calc(var(--i) * 90ms)}
@keyframes cardIn{
  from{opacity:0; transform:translate3d(0,28px,0)}
  to  {opacity:1; transform:none}
}

/* 卡片内网格（hover 提亮） */
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:24px 24px;
  opacity:0;
  transition:opacity 400ms var(--e-hover);
}
.card:hover::before{opacity:1}

/* 四角 L 角标 */
.card-corner{
  position:absolute;
  width:8px; height:8px;
  border-color:var(--line-2); border-style:solid; border-width:0;
  transition:transform 380ms var(--e-out), border-color 380ms var(--e-out);
  z-index:2;
}
.card-corner.tl{top:6px; left:6px; border-left-width:1px; border-top-width:1px; transform-origin:top left}
.card-corner.tr{top:6px; right:6px; border-right-width:1px; border-top-width:1px; transform-origin:top right}
.card-corner.bl{bottom:6px; left:6px; border-left-width:1px; border-bottom-width:1px; transform-origin:bottom left}
.card-corner.br{bottom:6px; right:6px; border-right-width:1px; border-bottom-width:1px; transform-origin:bottom right}
.cards.is-in .card .card-corner{animation:cornerPop 380ms var(--e-out) both}
.cards.is-in .card .tl{animation-delay:calc(var(--i)*90ms + 450ms)}
.cards.is-in .card .tr{animation-delay:calc(var(--i)*90ms + 490ms)}
.cards.is-in .card .bl{animation-delay:calc(var(--i)*90ms + 530ms)}
.cards.is-in .card .br{animation-delay:calc(var(--i)*90ms + 570ms)}
@keyframes cornerPop{from{transform:scale(0)}to{transform:scale(1)}}
.card:hover .card-corner{transform:scale(1.6); border-color:#fff}
.card:hover .card-corner.tl{transition-delay:0ms}
.card:hover .card-corner.tr{transition-delay:40ms}
.card:hover .card-corner.bl{transition-delay:80ms}
.card:hover .card-corner.br{transition-delay:120ms}

/* 流光 */
.card-shine{
  position:absolute; top:0; bottom:0; left:0;
  width:40%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.09), transparent);
  transform:translateX(-120%);
  pointer-events:none;
  z-index:1;
}
.card-shine.shine{animation:shineSweep 900ms var(--e-out) both}
@keyframes shineSweep{
  from{transform:translateX(-120%)}
  to  {transform:translateX(220%)}
}

/* 卡片内容 */
.card-top{
  display:flex; justify-content:space-between; align-items:center;
}
.card-num{
  font:600 14px/1 var(--font-mono);
  color:var(--fg-3);
  letter-spacing:.1em;
  transition:color 200ms var(--e-hover);
}
.card-status{
  font:500 10px/1 var(--font-mono);
  letter-spacing:.16em;
  color:var(--fg-3);
  display:flex; gap:8px; align-items:center;
}
.status-dot{
  width:6px; height:6px;
  background:var(--fg-2);
  animation:statusPulse 2.4s var(--e-inout) infinite;
}
@keyframes statusPulse{
  0%,100%{opacity:1}
  50%    {opacity:.25}
}

.card-name{
  margin-top:auto;
  font:700 30px/1.15 var(--font-sans);
  color:var(--fg);
}
.card-name-en{
  display:block; margin-top:6px;
  font:500 12px/1 var(--font-mono);
  letter-spacing:.16em;
  color:var(--fg-3);
}
.card-desc{
  margin-top:16px;
  font:400 14px/1.7 var(--font-sans);
  color:var(--fg-2);
  max-width:260px;
}
.card-foot{
  margin-top:28px;
  display:flex; justify-content:space-between; align-items:center;
  font:500 11px/1 var(--font-mono);
  letter-spacing:.06em;
  color:var(--fg-3);
  position:relative;
  padding-top:14px;
}
.card-host{
  max-width:60%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-go{
  color:var(--fg-2);
  transition:color 200ms var(--e-hover);
  white-space:nowrap;
}
.go-arrow{
  display:inline-block;
  transition:transform 320ms var(--e-out);
}
.card-foot-line{
  position:absolute; left:0; right:0; bottom:34px;
  height:1px; background:var(--line);
}
.card-foot-line::after{
  content:""; position:absolute; inset:0;
  background:#fff;
  transform:scaleX(0); transform-origin:left;
  transition:transform 300ms var(--e-hover);
}

/* 卡片 hover / active */
.card:hover{transform:translate3d(0,-6px,0); border-color:var(--line-2)}
.card:hover .card-foot-line::after{transform:scaleX(1)}
.card:hover .go-arrow{transform:translate(3px,-3px)}
.card:hover .card-num{color:#fff}
.card:hover .card-go{color:#fff}
.card:active{transform:translate3d(0,-2px,0) scale(0.995); transition-duration:80ms}

/* ============================================================
   4. LIVE 2D 预留槽
   ============================================================ */
.vt-wrap{
  position:fixed; right:24px; bottom:24px; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
.vt-mount{
  width:220px; height:300px;
  background:var(--panel);
  border:1px solid var(--line);
  position:relative; overflow:hidden;
  transition:opacity 420ms var(--e-out), transform 420ms var(--e-out), visibility 0s linear 0s;
}
.vt-mount.is-collapsed{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.96);
  visibility:hidden;
  transition:opacity 420ms var(--e-out), transform 420ms var(--e-out), visibility 0s linear 420ms;
}
.vt-mount::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:16px 16px;
}
/* 槽内扫描线 */
.vt-mount::after{
  content:""; position:absolute; left:0; right:0; top:0; height:41px;
  background:linear-gradient(to bottom, transparent 90%, rgba(255,255,255,.25));
  pointer-events:none;
  animation:vtScan 5.4s linear infinite;
}
@keyframes vtScan{
  from{transform:translate3d(0,-41px,0)}
  to  {transform:translate3d(0,300px,0)}
}

.vt-figure{
  position:absolute; left:50%; top:18px;
  width:120px; height:160px;
  transform:translateX(-50%);
  color:var(--fg-3);
  animation:vtBreathe 4.2s var(--e-inout) infinite;
}
@keyframes vtBreathe{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%    {transform:translateX(-50%) scale(1.012)}
}
.vt-orbit{
  transform-origin:60px 38px;
  animation:vtOrbit 12s linear infinite;
}
@keyframes vtOrbit{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}

.vt-label{
  position:absolute; left:14px; right:14px; bottom:34px;
  font:500 9.5px/1.5 var(--font-mono);
  letter-spacing:.12em;
  color:var(--fg-2);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.vt-live-dot{
  width:6px; height:6px;
  background:#fff;
  animation:statusPulse 1.6s var(--e-inout) infinite;
}
.vt-soon{color:var(--fg-3)}
.vt-sep{color:var(--fg-3); margin:0 2px}
.vt-coord{
  position:absolute; left:14px; bottom:12px;
  font:500 9px/1 var(--font-mono);
  color:var(--fg-3);
  letter-spacing:.1em;
}

/* 开关按钮 */
.vt-toggle{
  height:32px; padding:0 12px;
  display:flex; align-items:center; gap:8px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--fg-2);
  font:500 10px/1 var(--font-mono);
  letter-spacing:.18em;
  cursor:pointer;
  transition:border-color 200ms var(--e-hover), color 200ms var(--e-hover);
}
.vt-toggle:hover{border-color:var(--line-2); color:#fff}
.vt-toggle-icon{
  width:10px; height:10px;
  border:1px solid currentColor;
  position:relative;
}
.vt-toggle-icon::after{
  content:""; position:absolute; left:50%; top:50%;
  width:2px; height:2px; margin:-1px 0 0 -1px;
  background:currentColor;
}
.vt-toggle[aria-expanded="false"] .vt-toggle-icon{
  border-color:transparent;
}
.vt-toggle[aria-expanded="false"] .vt-toggle-icon::before,
.vt-toggle[aria-expanded="false"] .vt-toggle-icon::after{
  content:""; position:absolute; left:-1px; top:4px;
  width:12px; height:1px; background:currentColor;
}
.vt-toggle[aria-expanded="false"] .vt-toggle-icon::before{transform:rotate(45deg)}
.vt-toggle[aria-expanded="false"] .vt-toggle-icon::after{transform:rotate(-45deg)}

/* 真实 iframe 接入后 */
.vt-frame-holder iframe{width:100%; height:100%; border:0}

/* ============================================================
   5. 页脚
   ============================================================ */
.footer{
  position:relative; height:120px;
  border-top:1px solid var(--line);
  overflow:hidden;
  background:var(--bg);
}
.footer-inner{
  height:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  font:400 11px/1 var(--font-mono);
  letter-spacing:.14em;
  color:var(--fg-3);
}
.f-left{color:var(--fg-2)}
.f-dot{
  width:6px; height:6px;
  background:var(--fg-2);
  margin-right:8px;
  display:inline-block;
  vertical-align:1px;
}
.footer-beam{position:absolute; inset:0; pointer-events:none}
.footer-beam::before{
  content:""; position:absolute; top:-1px; left:0;
  width:45%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation:beamA 6s linear infinite;
}
.footer-beam::after{
  content:""; position:absolute; bottom:-1px; right:0;
  width:30%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation:beamB 9s linear infinite;
  animation-delay:1.8s;
}
@keyframes beamA{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(320%,0,0)}}
@keyframes beamB{from{transform:translate3d(100%,0,0)}to{transform:translate3d(-250%,0,0)}}

/* ============================================================
   10. 响应式断点
   ============================================================ */

/* 10.2 ≤1440 */
@media (max-width:1439px){
  :root{--pad:64px; --maxw:1320px}
  .hero-title{font-size:clamp(56px, 8.6vw, 132px)}
  .line-2{font-size:.74em}
  .card{padding:28px 22px 24px; min-height:330px}
  .card-name{font-size:26px}
  .card-desc{max-width:100%}
  .corner{font-size:9px}
  .vt-mount{width:192px; height:260px}
  .vt-wrap{right:20px; bottom:20px}
}

/* 10.3 ≤1024 */
@media (max-width:1023px){
  .cards{grid-template-columns:repeat(2, 1fr)}
  .card{margin-left:0; margin-top:-1px}
  .card:nth-child(even){margin-left:-1px}
}

/* 10.4 ≤768 */
@media (max-width:767px){
  :root{--pad:24px; --grid:32px}
  .hero{min-height:100svh; padding-top:16px}
  .hud-top{flex-wrap:wrap; gap:8px; height:auto; padding:12px 0}
  .hud-item:nth-child(2){display:none}
  .hero-title{font-size:clamp(38px, 13.5vw, 64px); letter-spacing:-.02em}
  .line-2{font-size:.62em; letter-spacing:.02em}
  .hero-sub{font-size:14px; margin-top:24px; max-width:90%}
  .hero-scroll{margin-top:40px}
  .corner{display:none}
  .c-br{display:block; bottom:20px; font-size:9px}
  .services{padding:96px 0 120px}
  .sec-title{font-size:32px}
  .sec-meta{gap:16px; flex-wrap:wrap; font-size:9px}
  .cards{grid-template-columns:1fr}
  .card{min-height:auto; padding:24px 20px 20px; margin-left:0; margin-top:-1px}
  .card-name{font-size:24px; margin-top:24px}
  .footer{height:88px}
  .footer-inner{flex-direction:column; justify-content:center; gap:8px; font-size:9.5px}
  .f-mid{order:2}
  .vt-mount{width:min(76vw, 260px); height:340px}
  .vt-wrap{right:16px; bottom:16px}
}

/* 10.5 触摸设备：取消位移类 hover */
@media (hover:none){
  .card:hover{transform:none}
  .card:hover::before{opacity:0}
  .card:hover .card-corner{transform:none; border-color:var(--line-2)}
}

/* ============================================================
   11. 无障碍降级
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .bg-grid{opacity:1 !important; animation:none !important}
  .bg-noise{opacity:.35 !important}
  .scanline,
  .footer-beam::before,
  .footer-beam::after,
  .vt-figure,.vt-orbit,.vt-mount::after,
  .scroll-line{display:none}
  .reveal,.reveal-line,
  html:not(.no-js) .hud-item,
  html:not(.no-js) .hero-meta,
  html:not(.no-js) .hero-title .ch,
  html:not(.no-js) .hero-sub,
  html:not(.no-js) .hero-scroll,
  html:not(.no-js) .corner,
  html:not(.no-js) .cards .card{
    opacity:1 !important; transform:none !important; letter-spacing:normal !important;
  }
  .reveal-bar{display:none}
  .status-dot,.vt-live-dot{animation:none; opacity:1}
}

/* Live2D 实际挂载层 */
.vt-frame-holder{position:absolute;inset:0;z-index:3;width:100%;height:100%}
.vt-frame-holder[hidden]{display:none}
.vt-frame-holder iframe{width:100%;height:100%;border:0;display:block;background:transparent}
.vt-mount.has-live .vt-placeholder{opacity:0;pointer-events:none;transition:opacity 400ms cubic-bezier(0.22,1,0.36,1)}

/* ===== Live2D 实挂载：覆盖式布局（!important 确保压过断点规则）===== */
.vt-mount.has-live{
  width:260px !important; height:380px !important;
  background:transparent !important;
  border:1px solid rgba(255,255,255,.16) !important;
}
/* 桌面端：让站位规则接管尺寸（此块在文件后部，需同选择器+同优先级覆盖回来） */
@media (min-width:768px){
  .vt-mount.has-live{
    pointer-events:auto !important;   /* 父级 vt-wrap 是 none，这里必须显式打开 */
    width:auto !important;
    height:66vh !important;
    max-height:820px !important;
    min-height:420px !important;
    aspect-ratio:2 / 3 !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
}
.vt-mount.has-live .vt-placeholder{display:none !important}
.vt-mount.has-live::before,
.vt-mount.has-live::after{display:none !important}
.vt-mount.has-live .vt-frame-holder{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  z-index:3 !important;
}
.vt-mount.has-live .vt-frame-holder iframe{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
  background:transparent !important;
  color-scheme:light;
}
@media (max-width:767px){
  .vt-mount.has-live{width:min(76vw,260px) !important;height:340px !important}
}

/* ===== 12. 背景基本图形层 + 光标引力网格（J11）===== */
.bg-shapes{position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden}
html:not(.no-js) .bg-shapes{opacity:0}
html.is-ready .bg-shapes{animation:gridIn 900ms var(--e-out) both}
.bg-shapes i{position:absolute; display:block; will-change:transform; mix-blend-mode:difference}
.fx-ring{width:44vmin; height:44vmin; left:5%; top:12%; border:1px solid rgba(255,255,255,.5); border-radius:50%; animation:orbA 76s linear infinite}
.fx-tri{right:8%; top:10%; width:0; height:0; border-left:19vmin solid transparent; border-right:19vmin solid transparent; border-bottom:33vmin solid rgba(255,255,255,.14); animation:orbB 94s linear infinite reverse}
.fx-plus{width:26vmin; height:26vmin; left:62%; bottom:14%; animation:orbC 68s linear infinite}
.fx-plus::before,.fx-plus::after{content:""; position:absolute; background:rgba(255,255,255,.34)}
.fx-plus::before{left:50%; top:0; width:1px; height:100%}
.fx-plus::after{top:50%; left:0; height:1px; width:100%}
.fx-sq{width:22vmin; height:22vmin; left:34%; top:54%; border:1px solid rgba(255,255,255,.4); animation:orbD 110s linear infinite}
.fx-glow{width:56vmin; height:56vmin; right:14%; bottom:-12%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.11), rgba(255,255,255,0) 68%); animation:orbE 52s ease-in-out infinite alternate}
.bg-shapes .fx-glow{mix-blend-mode:screen}
@keyframes orbA{0%{transform:translate3d(0,0,0) rotate(0deg)}25%{transform:translate3d(36vmin,14vmin,0) rotate(90deg)}50%{transform:translate3d(64vmin,-8vmin,0) rotate(180deg)}75%{transform:translate3d(28vmin,-22vmin,0) rotate(270deg)}100%{transform:translate3d(0,0,0) rotate(360deg)}}
@keyframes orbB{0%{transform:translate3d(0,0,0) rotate(0deg)}33%{transform:translate3d(-30vmin,26vmin,0) rotate(-120deg)}66%{transform:translate3d(-56vmin,8vmin,0) rotate(-240deg)}100%{transform:translate3d(0,0,0) rotate(-360deg)}}
@keyframes orbC{0%{transform:translate3d(0,0,0) rotate(45deg)}50%{transform:translate3d(-34vmin,-30vmin,0) rotate(225deg)}100%{transform:translate3d(0,0,0) rotate(405deg)}}
@keyframes orbD{0%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(30vmin,-26vmin,0) rotate(200deg)}100%{transform:translate3d(0,0,0) rotate(400deg)}}
@keyframes orbE{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-24vmin,-16vmin,0) scale(1.25)}100%{transform:translate3d(10vmin,4vmin,0) scale(.95)}}
#bgCanvas{position:fixed; inset:0; z-index:-2; pointer-events:none; width:100%; height:100%}
html:not(.no-js) #bgCanvas{opacity:0}
html.is-ready #bgCanvas{animation:gridIn 900ms var(--e-out) 150ms both}
html.fx-grid .bg-grid{display:none}
@media (hover:none){#bgCanvas{display:none}}
@media (prefers-reduced-motion: reduce){.bg-shapes, #bgCanvas{display:none}}

/* ===== 13. 桌面端 Live2D 站位：直接站进背景右侧 ===== */
/* 手机端（<=767px）完全不受影响：所有覆盖都限定在 min-width:768px */
@media (min-width:768px){
  .vt-wrap{
    position:absolute !important;
    right:max(2vw, 12px) !important;
    bottom:0 !important;
    top:auto !important;
    height:auto !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:flex-end !important;
    z-index:4 !important;
    pointer-events:none !important;
    gap:0 !important;
  }
  .vt-wrap .vt-toggle{display:none !important}
  .vt-mount,
  .vt-mount.has-live{
    width:auto !important;
    height:66vh !important;
    max-height:820px !important;
    min-height:420px !important;
    aspect-ratio:2 / 3 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    pointer-events:auto !important;
    opacity:1 !important;
    transform:none !important;
    visibility:visible !important;
  }
  .vt-mount::before,
  .vt-mount::after{display:none !important}
  .vt-mount .vt-placeholder{display:none !important}
  .vt-mount .vt-frame-holder{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    z-index:3 !important;
  }
  .vt-mount .vt-frame-holder iframe{
    width:100% !important;
    height:100% !important;
    border:0 !important;
    display:block !important;
    background:transparent !important;
  }
}

/* 桌面端：角色与首屏同参考系（随页面滚走），保留 hero 原有排版 */
@media (min-width:768px){
  .hero{position:relative}
  .vt-wrap{
    position:absolute !important;
    right:max(2vw, 12px) !important;
    bottom:0 !important;
    top:auto !important;
    height:auto !important;
    z-index:4 !important;
  }
  .vt-mount,
  .vt-mount.has-live{
    height:66vh !important;
  }
}

/* ===== 14. 启动加载屏（代码风） ===== */
#boot{
  position:fixed; inset:0; z-index:9999;
  background:#050505;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:transform .78s cubic-bezier(.76,0,.24,1), opacity .5s ease .3s;
}
#boot::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 78%);
}
#boot.gone{transform:translate3d(0,-100%,0); opacity:0; pointer-events:none}
html.no-js #boot{display:none}
.boot-scan{
  position:absolute; left:0; right:0; height:22vh; top:-22vh;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.045), transparent);
  animation:bootScan 2.4s linear infinite;
}
@keyframes bootScan{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,140vh,0)}}
.boot-inner{
  position:relative; width:min(760px, 88vw);
  display:flex; flex-direction:column; gap:18px;
}
.boot-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:10px; letter-spacing:.24em; color:rgba(255,255,255,.42);
  border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:10px;
}
.boot-brand{color:rgba(255,255,255,.86)}
.boot-log{
  height:132px; overflow:hidden;
  font:400 10.5px/1.85 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:rgba(255,255,255,.5); letter-spacing:.02em;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.boot-log .ln{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; animation:lnIn .18s ease forwards}
@keyframes lnIn{to{opacity:1}}
.boot-log .ok{color:rgba(190,255,220,.86)}
.boot-log .warn{color:rgba(255,214,150,.86)}
.boot-log .dim{color:rgba(255,255,255,.3)}
.boot-foot{display:flex; flex-direction:column; gap:9px}
.boot-bar{
  height:2px; width:100%; background:rgba(255,255,255,.1); overflow:hidden;
}
.boot-bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, rgba(255,255,255,.5), #fff);
  box-shadow:0 0 14px rgba(255,255,255,.7);
  transition:width .28s cubic-bezier(.22,1,.36,1);
}
.boot-meta{
  display:flex; justify-content:space-between;
  font-size:10px; letter-spacing:.2em; color:rgba(255,255,255,.46);
}
#bootPct{color:rgba(255,255,255,.9); font-variant-numeric:tabular-nums}
#bootState{transition:color .2s}
#bootState.done{color:rgba(190,255,220,.95)}
@media (max-width:767px){
  .boot-log{height:110px; font-size:9.5px}
  .boot-inner{gap:14px}
}
@media (prefers-reduced-motion: reduce){
  #boot{display:none}
  .boot-scan{display:none}
}

/* ---- 字符动画铺满全屏 ---- */
.boot-inner{
  position:absolute !important; inset:0 !important;
  width:auto !important; max-width:none !important;
  padding:0 !important; gap:0 !important;
  display:block !important;
}
.boot-stage{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.boot-geom{position:absolute; inset:0; display:block; width:100%; height:100%}
.boot-head{
  position:absolute !important; top:4.2vh !important; left:5vw !important; right:5vw !important;
  z-index:3;
}
.boot-log{
  position:absolute !important; left:5vw !important; bottom:16vh !important;
  width:min(560px, 62vw) !important;
  z-index:3; opacity:.82;
  height:150px !important;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 42%);
  mask-image:linear-gradient(to bottom, transparent, #000 42%);
}
.boot-foot{
  position:absolute !important; left:5vw !important; right:5vw !important; bottom:7vh !important;
  z-index:3;
}
.boot-foot .boot-bar{height:1px}
.boot-foot .boot-bar span{box-shadow:0 0 18px rgba(255,255,255,.85)}
#boot::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(5,5,5,.78) 100%);
}
@media (max-width:767px){
  .boot-log{width:80vw !important; bottom:14vh !important; height:110px !important}
}