/* TJ NOVA LTD · v2「仪器」
   概念：整站是一台仪器。横向移动鼠标 = 扫描系统剖面；数字不是展示，是读数。
   与 v1 的分野：v1 杂志式（Fraunces 衬线 + 图文网格）｜v2 仪表式（全无衬线 + 扫描 + 等宽读数）
   硬红线：不黑底霓虹 · 不套 TJ·MO · 饱和度孤立(只有电光蓝满饱和) · 同时动的不超 1 个 · 光学一致 */

:root{
  --paper:#FFFFFF;
  --ink:#000000;
  --ink-2:#1C1C1F;
  --ink-3:#5A5A61;
  --ink-4:#9B9BA3;
  --line:#E4E4E8;
  --line-2:#CFCFD6;
  --acc:#1F3BFF;              /* 全站唯一满饱和 */
  --acc-wash:#F0F2FF;

  --sans:'Inter Tight','Inter',ui-sans-serif,system-ui,-apple-system,'PingFang SC',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --w:1340px;
  --gut:clamp(20px,3.4vw,52px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 var(--gut)}

/* ── 仪器通用零件 ────────────────────── */
.rd{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tick{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-4);
}
.tick-b{display:flex;align-items:center;gap:10px}
.tick-b::before{content:'';width:18px;height:1px;background:var(--acc);flex:none}
.hair{height:1px;background:var(--line);border:0;margin:0}

/* ── 顶栏：固定，像仪器铭牌 ──────────── */
.top{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gut);mix-blend-mode:difference;color:#fff;
  pointer-events:none;
}
.top *{pointer-events:auto}
.top-l{display:flex;align-items:center;gap:12px}
.top-l b{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.06em}
.top-r{display:flex;align-items:center;gap:22px}
.top-r a{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  opacity:.72;transition:opacity .2s}
.top-r a:hover{opacity:1}
@media(max-width:760px){.top-r a:not(.keep){display:none}}

/* ── HERO：全屏擦洗视频 ───────────────── */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--paper)}
.hero video,.hero .poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% center;
}
.hero .poster{z-index:0}
.hero video{z-index:1;opacity:0;transition:opacity .6s var(--ease)}
.hero video.ready{opacity:1}
/* 白色渐隐，让左下文字压得住 */
.hero::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.72) 26%,
             rgba(255,255,255,0) 56%);
}
.hero-in{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:0 var(--gut) clamp(28px,5vh,64px)}
.hero-kicker{margin:0 0 18px}
h1{
  font-size:clamp(38px,7.4vw,104px);line-height:.94;letter-spacing:-.045em;font-weight:600;
  margin:0 0 22px;max-width:15ch;
}
h1 em{font-style:normal;color:var(--acc)}
.hero-sub{font-size:clamp(14.5px,1.5vw,17px);line-height:1.55;color:var(--ink-2);
  max-width:46ch;margin:0 0 30px}

/* 擦洗提示 + 进度 —— 这是仪器的刻度尺 */
.scrub{display:flex;align-items:center;gap:16px;max-width:560px}
.scrub-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.scrub-bar{position:relative;flex:1;height:2px;background:var(--line-2)}
.scrub-bar i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--acc);
  display:block;transition:width .08s linear}
.scrub-bar::after{content:'';position:absolute;inset:-7px 0;}
.scrub-val{font-family:var(--mono);font-size:11px;color:var(--ink);width:42px;text-align:right;
  font-variant-numeric:tabular-nums}

/* 右下角实时读数：像示波器角标 */
.hud{
  position:absolute;right:var(--gut);bottom:clamp(28px,5vh,64px);z-index:3;
  text-align:right;display:grid;gap:7px;
}
@media(max-width:760px){.hud{display:none}}
.hud div{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3)}
.hud b{color:var(--ink);font-weight:600}

/* ── 读数带：贴着 Hero 底的仪表条 ────── */
.gauge{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);background:var(--paper)}
.gauge-in{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.gauge-in{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.gauge-in{grid-template-columns:1fr}}
.g{padding:26px var(--gut) 22px;border-right:1px solid var(--line);position:relative}
.g:last-child{border-right:0}
/* 顶部刻度：仪器感来自这些小刻度 */
.g::before{
  content:'';position:absolute;left:var(--gut);top:0;width:26px;height:3px;background:var(--acc);
}
.g-v{font-family:var(--mono);font-size:clamp(26px,3.1vw,40px);font-weight:700;line-height:1;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.08em}
.g-v small{font-size:.4em;font-weight:600;color:var(--acc);letter-spacing:0}
.g-k{font-size:12.5px;font-weight:550;margin-top:11px;letter-spacing:-.005em}
.g-n{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);margin-top:5px;line-height:1.45}

/* ── 通用区块 ───────────────────────── */
section{padding:clamp(72px,10vw,150px) 0}
.sec-h{font-size:clamp(26px,4vw,54px);line-height:1.04;letter-spacing:-.038em;font-weight:600;
  margin:16px 0 20px;max-width:22ch}
.sec-h em{font-style:normal;color:var(--acc)}
.sec-p{font-size:clamp(14.5px,1.45vw,16.5px);line-height:1.68;color:var(--ink-3);max-width:58ch;margin:0}

/* ── 97% 那一屏：canvas 点阵装置 ────── */
.deep{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.deep .tick{color:rgba(255,255,255,.5)}
.deep .tick-b::before{background:var(--acc)}
.deep .sec-h{color:var(--paper)}
.deep .sec-p{color:rgba(255,255,255,.66)}
.dots{width:100%;height:clamp(200px,32vh,340px);margin:44px 0 0;display:block}
.dots-legend{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px;
  font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.6)}
.dots-legend span{display:flex;align-items:center;gap:8px}
.dots-legend i{width:9px;height:9px;display:block}

/* ── 能力：横向传送带 ────────────────── */
.belt{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:0;background:var(--paper)}
.belt-track{display:flex;gap:0;width:max-content;animation:belt 46s linear infinite}
@keyframes belt{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.belt:hover .belt-track{animation-play-state:paused}
.b-cell{
  flex:none;width:clamp(230px,24vw,320px);padding:30px 28px;border-right:1px solid var(--line);
}
.b-i{width:26px;height:26px;color:var(--acc);margin-bottom:18px}
.b-t{font-size:15px;font-weight:600;letter-spacing:-.012em;margin-bottom:7px}
.b-d{font-size:13px;line-height:1.55;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.belt-track{animation:none}}

/* ── 台账/排期：仪表读数表 ───────────── */
.rows{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line)}
.row-k{font-size:15px;font-weight:550;letter-spacing:-.008em}
.row-n{font-family:var(--mono);font-size:11px;color:var(--ink-4);margin-top:5px;line-height:1.45}
.row-v{font-family:var(--mono);font-size:clamp(19px,2.4vw,30px);font-weight:700;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.row-v.hot{color:var(--acc)}

/* ── 案例：黑底读数 ─────────────────── */
.case{background:var(--ink);color:var(--paper)}
.case .tick{color:rgba(255,255,255,.5)}
.case .sec-h{color:var(--paper)}
.case .sec-p{color:rgba(255,255,255,.66)}
.case-g{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.2);
  margin-top:44px}
@media(max-width:820px){.case-g{grid-template-columns:repeat(2,1fr)}}
.case-c{padding:26px 22px 24px;border-right:1px solid rgba(255,255,255,.14)}
.case-c:last-child{border-right:0}
.case-v{font-family:var(--mono);font-size:clamp(22px,2.8vw,34px);font-weight:700;letter-spacing:-.04em;
  color:var(--acc);margin-bottom:9px}
.case-t{font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.5}
.case-note{margin-top:32px;padding-left:18px;border-left:2px solid var(--acc);
  font-size:14px;line-height:1.68;color:rgba(255,255,255,.58);max-width:62ch}

/* ── CTA ────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border:1px solid var(--ink);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s,color .2s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-acc{border-color:var(--acc);color:var(--acc)}
.btn-acc:hover{background:var(--acc);color:#fff}

/* ── 揭示（渐进增强：默认可见）───────── */
.rv{opacity:1;transform:none}
html.js-rv .rv{opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js-rv .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js-rv .rv{opacity:1;transform:none;transition:none}}