/* 迅川 — 深墨仪表盘
   所有仪表用 SVG + CSS 画，数字靠等宽数字对齐 */

:root{
  --void:#07090c;
  --panel:#0c1218;
  --cyan:#3ddad7;
  --cyan-soft:rgba(61,218,215,.14);
  --txt:#e8f1f2;
  --dim:rgba(232,241,242,.58);
  --line:rgba(232,241,242,.1);
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--void);
  color:var(--txt);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,p{margin:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px}

/* ── 导航 ────────────────────────── */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:40;
  display:flex;
  align-items:center;
  gap:30px;
  padding:22px clamp(20px,4vw,56px);
  transition:padding .35s ease;
}
.nav.solid{padding:13px clamp(20px,4vw,56px)}
.nav.solid::before{
  content:"";
  position:absolute;inset:0;
  z-index:-1;
  background:rgba(7,9,12,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-size:16px;letter-spacing:.14em;font-weight:500}
.brand svg{width:19px;height:19px;color:var(--cyan)}
.nav nav{margin-left:auto}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:14px}
.nav ul a{color:var(--dim);padding-bottom:3px;border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease}
.nav ul a:hover,.nav ul a.on{color:var(--txt);border-bottom-color:var(--cyan)}
.cta{
  font-size:13px;
  letter-spacing:.05em;
  padding:9px 20px;
  border-radius:100px;
  border:1px solid rgba(61,218,215,.45);
  color:var(--cyan);
  transition:background .25s ease,color .25s ease;
}
.cta:hover{background:var(--cyan);color:#04100f}

/* ── Hero ────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(28px,5vw,72px);
  padding:clamp(110px,15vh,150px) clamp(20px,4vw,56px) clamp(50px,7vh,80px);
}
.grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(61,218,215,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,218,215,.085) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(72% 68% at 32% 42%,#000,transparent 82%);
  mask-image:radial-gradient(72% 68% at 32% 42%,#000,transparent 82%);
  pointer-events:none;
}

/* ── 仪表 ────────────────────────── */
.gauges{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.4vw,16px);
}
.g-card{
  position:relative;
  padding:clamp(18px,2.2vw,26px);
  border-radius:16px;
  background:linear-gradient(160deg,rgba(20,30,38,.92),rgba(9,14,19,.92));
  border:1px solid var(--line);
  overflow:hidden;
}
.g-big{grid-column:1 / -1}
.g-label{
  font-size:11.5px;
  letter-spacing:.16em;
  color:rgba(232,241,242,.44);
  margin-bottom:10px;
}
.g-num{
  font-family:var(--mono);
  font-size:clamp(2.6rem,5.4vw,4.1rem);
  line-height:1;
  font-weight:500;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.g-num i{
  font-style:normal;
  font-size:.34em;
  margin-left:.24em;
  color:var(--cyan);
  letter-spacing:0;
  vertical-align:.28em;
}
.g-note{
  font-size:12px;
  color:rgba(232,241,242,.4);
  margin-top:12px;
}

.g-ring{display:flex;flex-direction:column;align-items:flex-start}
.ring-wrap{position:relative;width:clamp(96px,11vw,124px);aspect-ratio:1}
.ring-wrap svg{width:100%;height:100%;display:block}
.ring-fill{
  stroke-dasharray:327;
  stroke-dashoffset:327;
  animation:dash 1.7s cubic-bezier(.3,.85,.3,1) .35s forwards;
}
@keyframes dash{to{stroke-dashoffset:190}}
.ring-num{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--mono);
  font-size:clamp(1.5rem,2.4vw,1.85rem);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}

.g-pct{position:relative}
.dot-pulse{
  position:absolute;
  top:clamp(18px,2.2vw,26px);
  right:clamp(18px,2.2vw,26px);
  width:8px;height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 0 rgba(61,218,215,.55);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(61,218,215,.5)}
  70%{box-shadow:0 0 0 11px rgba(61,218,215,0)}
  100%{box-shadow:0 0 0 0 rgba(61,218,215,0)}
}

/* ── 文案 ────────────────────────── */
.copy{position:relative}
.tag{
  font-size:12.5px;
  letter-spacing:.22em;
  color:var(--cyan);
  margin-bottom:22px;
}
.copy h1{
  font-size:clamp(2.2rem,4.7vw,3.9rem);
  line-height:1.12;
  font-weight:500;
  letter-spacing:-.035em;
  margin-bottom:.5em;
}
.lede{
  max-width:27em;
  color:var(--dim);
  font-size:clamp(.94rem,1.35vw,1.02rem);
  line-height:1.9;
  margin-bottom:2em;
}
.acts{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:13px 24px;
  border-radius:100px;
  font-size:14.5px;
  letter-spacing:.02em;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background .25s ease,border-color .25s ease,color .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.fill{background:var(--cyan);color:#04100f;font-weight:500}
.btn.fill:hover{background:#5eebe8}
.btn.line{border:1px solid rgba(232,241,242,.24);color:var(--txt)}
.btn.line:hover{border-color:rgba(232,241,242,.5);background:rgba(232,241,242,.06)}
.arw{display:inline-flex;transition:transform .3s ease}
.btn:hover .arw{transform:translateX(3px)}
.arw svg{width:12px;height:12px}

/* ── 三特性 ──────────────────────── */
.band{
  border-top:1px solid var(--line);
  background:linear-gradient(to bottom,var(--void),#050709);
  padding:clamp(56px,9vh,104px) clamp(20px,4vw,56px);
}
.band-in{max-width:1160px;margin:0 auto}
.eyebrow{
  font-size:12.5px;
  letter-spacing:.24em;
  color:var(--cyan);
  margin-bottom:38px;
}
.trio{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,4vw,54px);
}
.trio article{border-top:1px solid var(--line);padding-top:22px}
.trio b{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  color:rgba(232,241,242,.36);
  font-weight:400;
  margin-bottom:14px;
}
.trio h2{font-size:1.28rem;font-weight:500;margin-bottom:.5em;letter-spacing:-.01em}
.trio p{font-size:14.5px;line-height:1.9;color:var(--dim)}

/* ── 页脚 ────────────────────────── */
.foot{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px 32px;
  padding:30px clamp(20px,4vw,56px);
  border-top:1px solid var(--line);
}
.fbrand{font-size:14px;letter-spacing:.14em}
.fmeta{font-size:12.5px;color:rgba(232,241,242,.32);letter-spacing:.04em}
.fmeta:last-child{margin-left:auto}
.fmeta a:hover{color:var(--txt)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ── 响应式 ──────────────────────── */
@media (max-width:960px){
  .hero{grid-template-columns:1fr;align-items:start;gap:40px}
  .gauges{order:2}
  .copy{order:1}
  .nav ul{display:none}
  .cta{margin-left:auto}
  .trio{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .g-num{font-size:2.6rem}
  .head{grid-template-columns:1fr}
  .foot{flex-direction:column;gap:8px}
  .fmeta:last-child{margin-left:0}
}

/* ══ 子页 ═══════════════════════════ */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.sheet{
  max-width:1060px;
  margin:0 auto;
  padding:clamp(118px,16vh,176px) clamp(20px,4vw,56px) clamp(60px,9vh,104px);
}
.sheet .eyebrow{margin-bottom:20px}
.ph{
  font-size:clamp(1.95rem,4.2vw,3.05rem);
  line-height:1.16;
  font-weight:500;
  letter-spacing:-.035em;
  margin-bottom:.55em;
}
.sheet .lede{max-width:44em;margin-bottom:clamp(42px,6vh,70px)}
.sh{
  font-size:12.5px;
  letter-spacing:.22em;
  color:var(--cyan);
  font-weight:400;
  margin-bottom:24px;
}

/* 测速面板 */
.speed-board{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(160deg,rgba(20,30,38,.9),rgba(9,14,19,.9));
  padding:clamp(24px,3vw,38px);
  margin-bottom:22px;
}
.sb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:26px}
.sb-item{padding-right:20px}
.sb-item + .sb-item{border-left:1px solid var(--line);padding-left:clamp(16px,2.4vw,28px)}
.sb-item dt{
  font-size:11.5px;
  letter-spacing:.16em;
  color:rgba(232,241,242,.44);
  margin-bottom:12px;
}
.sb-item dd{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:6px;
  font-family:var(--mono);
  font-size:clamp(1.7rem,3.4vw,2.5rem);
  font-weight:500;
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.sb-item dd em{
  font-style:normal;
  font-size:.4em;
  color:var(--cyan);
  letter-spacing:0;
}
.sb-track{
  height:3px;
  border-radius:2px;
  background:rgba(232,241,242,.09);
  overflow:hidden;
  margin-bottom:22px;
}
.sb-track i{
  display:block;
  height:100%;
  width:0;
  background:var(--cyan);
  transition:width .45s cubic-bezier(.3,.8,.3,1);
}
.sb-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.sb-stage{
  font-size:12.5px;
  letter-spacing:.06em;
  color:rgba(232,241,242,.5);
  font-family:var(--mono);
}
button.btn{
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-size:14.5px;
}
button.btn:disabled{opacity:.6;cursor:default;transform:none}

/* 表格 */
table{width:100%;border-collapse:collapse;font-size:14.5px}
thead th{
  text-align:left;
  font-weight:400;
  font-size:11.5px;
  letter-spacing:.12em;
  color:rgba(232,241,242,.42);
  padding:0 14px 12px 0;
  border-bottom:1px solid var(--line);
}
tbody th{
  text-align:left;
  font-weight:500;
  padding:16px 14px 16px 0;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
tbody td{
  padding:16px 14px 16px 0;
  border-bottom:1px solid var(--line);
  color:var(--dim);
  font-variant-numeric:tabular-nums;
}
tbody tr:hover{background:rgba(61,218,215,.04)}
.lat{
  display:inline-block;
  min-width:130px;
  padding:4px 10px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--txt);
  border-left:2px solid var(--cyan);
  background:linear-gradient(90deg,rgba(61,218,215,.14) var(--w),transparent var(--w));
}
.footnote{
  max-width:44em;
  font-size:13px;
  line-height:1.9;
  color:rgba(232,241,242,.44);
  margin:20px 0 clamp(50px,8vh,88px);
  padding-left:16px;
  border-left:2px solid rgba(61,218,215,.3);
}

/* 三步 / 路标 */
.tips{margin-bottom:0}
.flow{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3.6vw,46px);
}
.flow li{border-top:1px solid var(--line);padding-top:20px}
.flow b{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  color:rgba(232,241,242,.34);
  font-weight:400;
  margin-bottom:12px;
}
.flow h3{font-size:1.14rem;font-weight:500;margin-bottom:.45em}
.flow p{font-size:14px;line-height:1.9;color:var(--dim)}

.plan{margin-top:clamp(50px,8vh,90px)}
.roadmap{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.roadmap li{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:clamp(14px,3vw,32px);
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.roadmap b{
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--cyan);
  font-weight:400;
  padding-top:2px;
}
.roadmap span{font-size:14.5px;line-height:1.8;color:var(--dim)}

@media (max-width:820px){
  .flow{grid-template-columns:1fr;gap:26px}
  .sb-grid{grid-template-columns:1fr;gap:22px}
  .sb-item{padding-right:0}
  .sb-item + .sb-item{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:22px}
  .roadmap li{grid-template-columns:1fr;gap:6px}
  .lat{min-width:0;width:100%}
}