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

/* ---------- 0.2 全局变量 ---------- */
:root{
  --bg:        #050505;
  --panel:     #0d0d0d;
  --line:      rgba(var(--ink),0.12);
  --line-2:    rgba(var(--ink),0.24);
  --fg:        #f2f2f2;
  --fg-2:      #9a9a9a;
  --fg-3:      #5a5a5a;
  --hi:        #ffffff;
  --ink:       255,255,255;
  --hi-08:     rgba(var(--ink),0.08);
  --hi-04:     rgba(var(--ink),0.04);
  --hi-02:     rgba(var(--ink),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.4 主题令牌（日间 / 夜间）
   ============================================================ */
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{
  color-scheme: light;
  --bg:      #f4f2ee;
  --panel:   #ffffff;
  --line:    rgba(10,10,10,0.14);
  --line-2:  rgba(10,10,10,0.28);
  --fg:      #14120f;
  --fg-2:    #55504a;
  --fg-3:    #8d867e;
  --hi:      #000000;
  --ink:     18,16,14;
  --hi-08:   rgba(10,10,10,0.07);
  --hi-04:   rgba(10,10,10,0.035);
  --hi-02:   rgba(10,10,10,0.02);
}
html[data-theme="light"] ::selection{background:#14120f;color:#f4f2ee}
html.theme-anim,
html.theme-anim body,
html.theme-anim .card,
html.theme-anim .hud-item,
html.theme-anim .sec-title{
  transition: background-color .45s cubic-bezier(0.65,0,0.35,1), color .45s cubic-bezier(0.65,0,0.35,1),
              border-color .45s cubic-bezier(0.65,0,0.35,1);
}

/* ---------- 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:var(--hi);color:var(--bg)}
.mono{font-family:var(--font-mono)}
:focus-visible{outline:1px solid var(--hi);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(var(--ink),.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink),.045) 1px, transparent 1px),
    linear-gradient(to right, rgba(var(--ink),.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink),.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(var(--ink),.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(var(--ink),.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(var(--ink),.05), transparent 45%),
    radial-gradient(circle at 75% 80%, rgba(var(--ink),.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(var(--ink),.028) 70%, rgba(var(--ink),.05) 100%);
  border-bottom:1px solid rgba(var(--ink),.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:var(--hi)}}

/* 入场：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; padding-bottom:.14em; margin-bottom:-.14em}
.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(var(--ink),.06);
  border-right:1px solid var(--hi);
  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(var(--ink),.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink),.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:var(--hi)}
.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(var(--ink),.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:var(--hi)}
.card:hover .card-go{color:var(--hi)}
.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(var(--ink),.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink),.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(var(--ink),.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:var(--hi)}
.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(var(--ink),.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(var(--ink),.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(var(--ink),.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(var(--ink),.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(var(--ink),.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(var(--ink),.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(var(--ink),.4); animation:orbD 110s linear infinite}
.fx-glow{width:56vmin; height:56vmin; right:14%; bottom:-12%; border-radius:50%; background:radial-gradient(circle, rgba(var(--ink),.11), rgba(var(--ink),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(var(--ink),.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink),.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(var(--ink),.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(var(--ink),.42);
  border-bottom:1px solid rgba(var(--ink),.1); padding-bottom:10px;
}
.boot-brand{color:rgba(var(--ink),.86)}
.boot-log{
  height:132px; overflow:hidden;
  font:400 10.5px/1.85 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:rgba(var(--ink),.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(var(--ink),.3)}
.boot-foot{display:flex; flex-direction:column; gap:9px}
.boot-bar{
  height:2px; width:100%; background:rgba(var(--ink),.1); overflow:hidden;
}
.boot-bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, rgba(var(--ink),.5), #fff);
  box-shadow:0 0 14px rgba(var(--ink),.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(var(--ink),.46);
}
#bootPct{color:rgba(var(--ink),.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(var(--ink),.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}
}

/* ============================================================
   14. 顶栏控制区：主题切换 + 私人入口
   ============================================================ */
.topbar{
  position:fixed; top:18px; right:22px; z-index:60;
  display:flex; align-items:center; gap:10px;
}
.tb-btn{
  position:relative; display:grid; place-items:center;
  width:46px; height:26px; border-radius:20px;
  background:var(--hi-04); border:1px solid var(--line);
  cursor:pointer; color:var(--fg-2);
  transition:border-color .3s var(--e-hover), background-color .3s var(--e-hover);
}
.tb-btn:hover{border-color:var(--line-2); background:var(--hi-08)}

/* 主题开关：滑块 + 双图标 */
.tb-theme{width:62px; justify-items:start; padding:0 4px}
.tb-knob{
  position:absolute; top:3px; left:3px; width:30px; height:18px; border-radius:20px;
  background:var(--fg-3);
  transition:transform .42s var(--e-out), background-color .3s var(--e-hover);
}
html[data-theme="light"] .tb-knob{transform:translateX(28px); background:var(--fg)}
.tb-ico{position:absolute; width:11px; height:11px; border-radius:50%; transition:opacity .3s var(--e-hover), transform .42s var(--e-out)}
.tb-ico-moon{left:9px; background:var(--bg); box-shadow:inset -4px 0 0 0 var(--bg)}
.tb-ico-sun{right:9px; background:var(--bg); opacity:.35}
html[data-theme="light"] .tb-ico-moon{opacity:.35}
html[data-theme="light"] .tb-ico-sun{opacity:1}
html[data-theme="dark"] .tb-ico-sun{opacity:.35}

/* 私人入口：小锁 */
.tb-private{width:34px; height:26px}
.tb-lock{
  position:relative; width:11px; height:9px; border-radius:2px;
  background:currentColor; top:2px;
}
.tb-lock::before{
  content:""; position:absolute; left:1.5px; bottom:100%;
  width:8px; height:6px; border:1.5px solid currentColor; border-bottom:0;
  border-radius:5px 5px 0 0;
}
.tb-btn:active{transform:scale(.94)}

@media (max-width:767px){
  .topbar{top:12px; right:12px; gap:8px}
  .tb-theme{width:54px}
  .tb-knob{width:24px}
  html[data-theme="light"] .tb-knob{transform:translateX(22px)}
}

/* ============================================================
   15. 滚动走马灯
   ============================================================ */
.ticker{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:14px 0; background:var(--hi-02);
}
.ticker::before,.ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.ticker::before{left:0; background:linear-gradient(90deg,var(--bg),transparent)}
.ticker::after{right:0; background:linear-gradient(270deg,var(--bg),transparent)}
.ticker-track{
  display:flex; align-items:center; gap:0; width:max-content;
  font-size:11px; letter-spacing:.24em; color:var(--fg-3);
  animation:tickerMove 46s linear infinite;
  will-change:transform;
}
.ticker-track span{padding:0 26px; white-space:nowrap}
.ticker-track i{width:4px; height:4px; background:var(--fg-3); display:block; flex:none; transform:rotate(45deg)}
@keyframes tickerMove{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ============================================================
   16. 通用内容区块
   ============================================================ */
.block{position:relative; padding:var(--pad) 0; border-bottom:1px solid var(--line)}
.block-inner{max-width:var(--maxw); margin:0 auto; padding:0 48px}

/* ---------- 16.1 数据面板 ---------- */
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:64px; background:var(--line);
  border:1px solid var(--line);
}
.stat{
  position:relative; background:var(--bg);
  padding:38px 30px 34px; overflow:hidden;
}
.stat::after{
  content:""; position:absolute; inset:0;
  background:var(--hi-04); opacity:0;
  transition:opacity .45s var(--e-hover); pointer-events:none;
}
.stat:hover::after{opacity:1}
.stat-num{
  font-size:clamp(38px,4.6vw,64px); line-height:.95; font-weight:600;
  color:var(--fg); letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:6px;
}
.stat-num em{font-style:normal; font-size:.30em; color:var(--fg-3); letter-spacing:.1em}
.stat-label{margin-top:16px; font-size:10px; letter-spacing:.2em; color:var(--fg-3)}
.stat-bar{
  display:block; height:2px; margin-top:22px; background:var(--hi-08); overflow:hidden;
}
.stat-bar i{
  display:block; height:100%; width:0; background:var(--fg-2);
  transition:width 1.1s var(--e-out) .15s;
}
.stat.is-in .stat-bar i{width:100%}

/* ---------- 16.2 时间线 ---------- */
.tl{list-style:none; margin-top:64px; position:relative; padding-left:0}
.tl::before{
  content:""; position:absolute; left:86px; top:8px; bottom:8px; width:1px;
  background:var(--line);
}
.tl-item{
  position:relative; display:grid; grid-template-columns:86px 1fr;
  gap:44px; padding:26px 0;
}
.tl-node{
  position:absolute; left:81px; top:34px;
  width:11px; height:11px; background:var(--bg);
  border:1px solid var(--fg-3); transform:rotate(45deg);
  transition:border-color .4s var(--e-hover), background-color .4s var(--e-hover);
}
.tl-item:hover .tl-node{border-color:var(--fg); background:var(--fg)}
.tl-year{font-size:12px; letter-spacing:.16em; color:var(--fg-3); padding-top:26px; text-align:right; padding-right:34px}
.tl-body h3{font-size:19px; font-weight:600; letter-spacing:.01em; margin-bottom:12px}
.tl-body p{font-size:14px; line-height:1.85; color:var(--fg-2); max-width:62ch}

/* ---------- 16.3 关于 ---------- */
.block-about{border-bottom:0}
.about-inner{display:grid; grid-template-columns:180px 1fr; gap:64px; align-items:start}
.about-mark{
  font-size:44px; letter-spacing:-.04em; color:var(--fg-3); margin-top:18px;
  line-height:1;
}
.about-title{
  font-size:clamp(34px,5vw,72px); line-height:1.06;
  font-weight:600; letter-spacing:-.02em; margin-bottom:40px;
}
.about-title .outline{
  color:transparent; -webkit-text-stroke:1px var(--fg-2);
}
.about-copy p{
  font-size:15px; line-height:2; color:var(--fg-2);
  max-width:56ch; margin-bottom:20px;
}
.about-sig{display:flex; align-items:center; gap:16px; margin-top:36px; font-size:10px; letter-spacing:.22em; color:var(--fg-3)}
.sig-line{display:block; width:64px; height:1px; background:var(--line-2)}

/* ---------- 16.4 响应式 ---------- */
@media (max-width:1023px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .about-inner{grid-template-columns:1fr; gap:32px}
  .about-mark{margin-top:0; font-size:32px}
}
@media (max-width:767px){
  .block{padding:72px 0}
  .block-inner{padding:0 22px}
  .stat-grid{margin-top:44px}
  .stat{padding:26px 20px 24px}
  .tl{margin-top:44px}
  .tl::before{left:0}
  .tl-item{grid-template-columns:1fr; gap:8px; padding-left:26px}
  .tl-node{left:-5px; top:8px}
  .tl-year{text-align:left; padding:0; padding-top:0}
}

@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .stat-bar i{transition:none}
}

/* ============================================================
   17. SERVICES：整屏双分屏舞台
   ============================================================ */
.services{
  position:relative; border-bottom:1px solid var(--line);
}
.services-head{
  max-width:var(--maxw); margin:0 auto; padding:96px 48px 0;
}
.services-head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap; margin-top:18px;
}
.services-head .sec-meta{display:flex; gap:22px; align-items:center}
.live-dot{
  display:inline-block; width:5px; height:5px; margin-right:9px;
  background:var(--fg); border-radius:50%; vertical-align:middle;
  animation:livePulse 2.2s var(--e-inout) infinite;
}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* ---------- 17.1 舞台容器 ---------- */
.services-stage{
  position:relative;
  max-width:var(--maxw); margin:56px auto 96px;
  display:grid; grid-template-columns:58% 42%;
  border:1px solid var(--line);
  min-height:620px;
  background:var(--bg);
}
/* 中央分界线 */
.services-stage::before{
  content:""; position:absolute; left:58%; top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom,
    transparent 0%, var(--line-2) 18%, var(--fg-3) 50%, var(--line-2) 82%, transparent 100%);
  opacity:.55; z-index:5; pointer-events:none;
  animation:dividerPulse 3.6s var(--e-inout) infinite;
}
@keyframes dividerPulse{0%,100%{opacity:.35}50%{opacity:.75}}
/* 分界节点 */
.services-stage::after{
  content:""; position:absolute; left:calc(58% - 5px); top:50%;
  width:10px; height:10px; transform:translateY(-50%) rotate(45deg);
  border:1px solid var(--fg-3); background:var(--bg);
  z-index:6; pointer-events:none;
  transition:border-color .5s var(--e-hover), transform .5s var(--e-out);
}
.services-stage:hover::after{border-color:var(--fg); transform:translateY(-50%) rotate(225deg)}

/* ---------- 17.2 面板 ---------- */
.service-panel{
  position:relative; display:flex; flex-direction:column;
  padding:64px 52px 48px;
  overflow:hidden; isolation:isolate;
  color:inherit; text-decoration:none;
  background:transparent;
  transition:background-color .55s var(--e-hover);
}
.service-panel:last-child{padding-left:44px}
.service-panel:hover{background:var(--hi-02)}
.service-panel:focus-visible{outline:1px solid var(--fg); outline-offset:-6px}

.panel-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.grid-layer{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--hi-04) 1px, transparent 1px),
                   linear-gradient(90deg, var(--hi-04) 1px, transparent 1px);
  background-size:38px 38px;
  opacity:.5;
  transition:opacity .6s var(--e-hover), transform .9s var(--e-out);
  transform:scale(1.02);
}
.service-panel:hover .grid-layer{opacity:1; transform:scale(1)}
.scanline-layer{
  position:absolute; left:0; right:0; height:120px; top:-140px;
  background:linear-gradient(to bottom, transparent, var(--hi-08), transparent);
  transition:none;
}
.service-panel:hover .scanline-layer{animation:scanSweep 1.8s var(--e-inout) .1s both}
@keyframes scanSweep{from{transform:translateY(0)} to{transform:translateY(760px)}}

.panel-highlight{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), var(--hi-08), transparent 70%);
  opacity:0; transition:opacity .5s var(--e-hover);
}
.service-panel:hover .panel-highlight{opacity:1}

.panel-content{
  position:relative; z-index:3; flex:1;
  display:flex; flex-direction:column;
}

/* 编号 */
.service-label{display:flex; align-items:center; gap:14px; margin-bottom:0}
.label-num{font-size:11px; letter-spacing:.2em; color:var(--fg-3)}
.label-line{display:block; width:46px; height:1px; background:var(--line-2);
  transition:width .6s var(--e-out), background-color .4s var(--e-hover)}
.service-panel:hover .label-line{width:96px; background:var(--fg-2)}

/* 标题 */
.service-title{margin:36px 0 0; display:flex; flex-direction:column; gap:10px}
.title-main{
  font-size:clamp(40px,5.2vw,84px); line-height:.92; font-weight:600;
  letter-spacing:-.03em;
  transition:transform .7s var(--e-out);
}
.service-panel:hover .title-main{transform:translateX(6px)}
.title-en{font-size:11px; letter-spacing:.32em; color:var(--fg-3)}
.service-desc{
  margin:22px 0 0; font-size:13.5px; line-height:1.9; color:var(--fg-2);
  max-width:38ch;
}

/* 状态条 */
.status-compact{
  display:flex; align-items:center; gap:12px; margin-top:26px;
  font-size:10px; letter-spacing:.18em; color:var(--fg-3);
}
.sc-item{display:inline-flex; align-items:center; gap:8px}
.status-dot{
  width:5px; height:5px; border-radius:50%; background:var(--fg-2);
  animation:dotBlink 2.4s var(--e-inout) infinite;
}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.25}}
.sc-sep{width:1px; height:10px; background:var(--line)}

/* 展开信息层：常驻占位，避免 hover 时重排 */
.info-extended{
  margin-top:22px; min-height:168px;
  opacity:.34; transform:none;
  transition:opacity .55s var(--e-hover), transform .65s var(--e-out);
  pointer-events:none;
}
.service-panel:hover .info-extended{opacity:1; transform:none}

.info-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.info-cell{background:var(--bg); padding:11px 13px; display:flex; flex-direction:column; gap:5px}
.ik{font-size:9px; letter-spacing:.2em; color:var(--fg-3)}
.iv{font-size:11px; letter-spacing:.04em; color:var(--fg-2)}

.log-stream{
  margin-top:12px; padding:11px 13px;
  border:1px solid var(--line); background:var(--hi-02);
  display:flex; flex-direction:column; gap:5px;
}
.log-line{font-size:10px; line-height:1.6; color:var(--fg-3); letter-spacing:.02em;
  opacity:.55; transform:none;
  transition:opacity .4s var(--e-hover), transform .4s var(--e-out)}
.service-panel:hover .log-line{opacity:1; transform:none}
.service-panel:hover .log-line:nth-child(1){transition-delay:.12s}
.service-panel:hover .log-line:nth-child(2){transition-delay:.24s}
.service-panel:hover .log-line:nth-child(3){transition-delay:.36s}
.log-caret{
  display:inline-block; width:5px; height:9px; margin-left:3px;
  background:var(--fg-3); vertical-align:middle;
  animation:caretBlink 1.1s steps(2,end) infinite;
}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* CTA */
.service-cta{
  margin-top:auto; padding-top:30px;
  display:inline-flex; align-items:center; gap:12px;
  font-size:11px; letter-spacing:.24em; color:var(--fg-2);
  transition:color .4s var(--e-hover);
}
.service-panel:hover .service-cta{color:var(--fg)}
.cta-arrow{
  display:inline-block; font-size:14px; letter-spacing:0;
  transition:transform .5s var(--e-out);
}
.service-panel:hover .cta-arrow{transform:translateX(8px)}

/* 四角框 */
.panel-frame{position:absolute; inset:18px; z-index:4; pointer-events:none}
.fc{position:absolute; width:14px; height:14px; border:1px solid var(--line-2);
  transition:width .5s var(--e-out), height .5s var(--e-out), border-color .4s var(--e-hover)}
.fc.tl{top:0; left:0; border-right:0; border-bottom:0}
.fc.tr{top:0; right:0; border-left:0; border-bottom:0}
.fc.bl{bottom:0; left:0; border-right:0; border-top:0}
.fc.br{bottom:0; right:0; border-left:0; border-top:0}
.service-panel:hover .fc{width:26px; height:26px; border-color:var(--fg-3)}

/* ---------- 17.3 响应式 ---------- */
@media (max-width:1023px){
  .services-head{padding:72px 24px 0}
  .services-stage{
    grid-template-columns:1fr; min-height:0;
    margin:40px 24px 72px;
  }
  .services-stage::before{
    left:0; right:0; top:0; bottom:auto; width:auto; height:1px;
    background:linear-gradient(to right, transparent, var(--line-2) 18%, var(--fg-3) 50%, var(--line-2) 82%, transparent);
  }
  .services-stage::after{
    left:50%; top:-5px; transform:translateX(-50%) rotate(45deg);
  }
  .services-stage:hover::after{transform:translateX(-50%) rotate(225deg)}
  .service-panel{padding:52px 28px 42px}
  .service-panel:last-child{padding-left:28px; border-top:1px solid var(--line)}
  .info-extended{min-height:0; opacity:1; transform:none}
  .log-line{opacity:1; transform:none}
}
@media (max-width:600px){
  .title-main{font-size:clamp(34px,11vw,52px)}
  .service-desc{font-size:13px; max-width:none}
  .info-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .services-stage::before,
  .live-dot, .status-dot, .log-caret{animation:none}
  .service-panel:hover .scanline-layer{animation:none}
}

/* ============================================================
   18. 日间模式：背景装饰层专项校正
   ============================================================ */
html[data-theme="light"] .bg-shapes i{mix-blend-mode:normal}
html[data-theme="light"] .bg-grid{opacity:1}
html[data-theme="light"] .bg-noise{opacity:1}
html[data-theme="light"] .scanline{opacity:.75}
html[data-theme="light"] .fx-ring{border-color:rgba(var(--ink),.38)}
html[data-theme="light"] .fx-tri{border-bottom-color:rgba(var(--ink),.12)}
html[data-theme="light"] .fx-plus,html[data-theme="light"] .fx-sq{color:rgba(var(--ink),.22)}
html[data-theme="light"] .fx-glow{background:radial-gradient(circle, rgba(var(--ink),.05), transparent 65%)}
html[data-theme="light"] .corner{color:var(--fg-2)}
html[data-theme="light"] .hud-item{color:var(--fg-2)}
html[data-theme="light"] .sec-title span{color:var(--fg-3)}
html[data-theme="light"] .about-title .outline{-webkit-text-stroke:1px var(--fg)}