/* =============================================================================
 * HFZM 深色主题
 * 设计语言对齐参考站：近黑底 / 冷蓝灰文字 / 荧光绿点缀 / 四角细框
 * ========================================================================== */

:root{
  --bg:#05070b;
  --bg-soft:#0f1218;
  --ink:#eaf1fc;
  --ink-2:#9aaac1;
  --ink-3:#a2afc3;
  --ink-4:#a5bada;
  --line:rgba(154,170,193,.22);
  --line-strong:rgba(154,170,193,.38);
  --corner:#92a8cb;
  --btn-bg:#eaf1fc;
  --btn-ink:#10192a;
  --accent:#d8ff59;
  --brand:#2457FF;
  --brand-deep:#183FC5;
  --danger:#ff6b6b;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --maxw:1180px;
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;min-width:320px;color-scheme:dark}
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#10192a}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- 导航 ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:26px 0;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:11px;color:#fff;font-size:20px;font-weight:600;letter-spacing:-.01em}
.brand .mark{
  width:34px;height:34px;border-radius:8px;
  background:#161616;border:1px solid rgba(181,201,237,.2);
  display:grid;place-items:center;
  color:var(--brand);font-weight:700;font-size:17px;line-height:1;
  flex:none;
}
.brand small{
  display:block;font-size:9px;letter-spacing:.16em;color:var(--ink-4);
  font-weight:400;margin-top:3px;text-transform:uppercase;
}
.nav-links{display:flex;align-items:center;gap:26px;font-size:12px;color:var(--ink-2)}
.nav-links a{transition:color .18s}
.nav-links a:hover{color:var(--accent)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:11px 18px;border-radius:5px;
  font-size:12px;line-height:1;
  border:1px solid transparent;
  transition:background .18s,color .18s,border-color .18s;
  cursor:pointer;
}
.btn-primary{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg);font-weight:500}
.btn-primary:hover{background:var(--accent);border-color:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- 首页 ---------- */
.matrix-home{
  position:relative;isolation:isolate;
  min-height:100svh;display:flex;flex-direction:column;
  overflow:hidden;
}
.matrix-field{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:-2;pointer-events:none;
}
.matrix-frame{
  position:absolute;inset:24px;
  border:1px solid var(--line);
  pointer-events:none;z-index:-1;
}
.matrix-frame:before,.matrix-frame:after{
  content:"";width:6px;height:6px;position:absolute;
  border:1px solid var(--corner);background:var(--bg);
}
.matrix-frame:before{top:-4px;left:-4px}
.matrix-frame:after{bottom:-4px;right:-4px}

.matrix-nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:48px 5vw;position:relative;z-index:1;
}
.matrix-nav nav{display:flex;gap:28px;font-size:12px;color:var(--ink-2)}
.matrix-nav nav a:hover{color:var(--accent)}

.matrix-hero{
  flex:1;display:flex;align-items:center;justify-content:flex-end;
  padding:55px 12vw 100px;min-height:530px;
  position:relative;z-index:1;
}
.matrix-copy{max-width:660px}
.matrix-eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:var(--ink-4);text-transform:uppercase;
}
.matrix-copy h1{
  margin:25px 0;
  font-size:clamp(44px,5.4vw,74px);
  font-weight:450;letter-spacing:-.045em;line-height:1.24;
  color:var(--ink);
}
.matrix-copy h1>span{color:var(--ink-2)}
.matrix-copy p{font-size:14px;color:var(--ink-3);line-height:1.75;margin:0}
.matrix-actions{display:flex;gap:25px;align-items:center;margin-top:36px;font-size:12px}
.matrix-actions .btn-primary{gap:35px;padding:14px 20px}

.matrix-footer{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:0 5vw 42px;
  font-size:11px;color:var(--ink-4);
  position:relative;z-index:1;
}
.matrix-footer a:hover{color:var(--accent)}

/* ---------- 内容页（价格 / 指南 / 条款 / 错误手册） ---------- */
.page{padding-bottom:80px}
.hero{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.hero h1{
  margin:18px 0 14px;
  font-size:clamp(30px,4vw,50px);
  font-weight:450;letter-spacing:-.035em;line-height:1.25;
}
.hero p{font-size:14px;color:var(--ink-3);max-width:640px;line-height:1.75;margin:0}
.tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:var(--ink-4);text-transform:uppercase;
}

.section{padding:48px 0;border-bottom:1px solid var(--line)}
.section:last-child{border-bottom:none}
.section-head{margin-bottom:26px}
.section-head h2{
  margin:0 0 8px;font-size:19px;font-weight:500;letter-spacing:-.01em;
}
.section-head p{margin:0;font-size:13px;color:var(--ink-3)}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.tile{
  padding:22px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg-soft);
  transition:border-color .2s;
}
.tile:hover{border-color:var(--line-strong)}
.tile .num{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--brand);display:block;margin-bottom:12px;
}
.tile h3{margin:0 0 8px;font-size:14px;font-weight:500}
.tile p{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.7}

.card{
  border:1px solid var(--line);border-radius:8px;
  background:var(--bg-soft);padding:22px;
}
.hint{font-size:12px;color:var(--ink-4);line-height:1.75}
.hint strong{color:var(--ink-2);font-weight:500}

table{width:100%;border-collapse:collapse;font-size:13px}
th{color:var(--ink-2);font-weight:500;text-align:left}
td,th{padding:13px 16px}
tbody tr{border-top:1px solid var(--line)}
code{
  font-family:var(--mono);font-size:12.5px;
  background:rgba(181,201,237,.08);
  border:1px solid var(--line);
  padding:2px 6px;border-radius:4px;color:var(--ink);
}

/* 文档页 */
.doc{display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px;padding:56px 0}
.toc{position:sticky;top:28px;align-self:start;display:flex;flex-direction:column;gap:11px}
.toc strong{font-size:10px;letter-spacing:.18em;color:var(--ink-4);text-transform:uppercase;font-weight:400;margin-bottom:4px}
.toc a{font-size:12.5px;color:var(--ink-3);transition:color .18s}
.toc a:hover{color:var(--accent)}
.doc article h1{margin:14px 0 26px;font-size:clamp(28px,3.4vw,42px);font-weight:450;letter-spacing:-.03em}
.doc article h2{
  margin:40px 0 12px;font-size:16px;font-weight:500;
  padding-top:22px;border-top:1px solid var(--line);
}
.doc article h2:first-of-type{border-top:none;padding-top:0}
.doc article p,.doc article li{font-size:13.5px;color:var(--ink-3);line-height:1.85}
.doc article ul{padding-left:20px}
.doc article a{color:var(--accent);border-bottom:1px solid rgba(216,255,89,.3)}
.doc article a.btn{color:var(--btn-ink);border-bottom:none}
.doc article a.btn-ghost{color:var(--ink);border-bottom:none}

pre{
  background:#0a0e15;border:1px solid var(--line);border-radius:8px;
  padding:16px 18px;overflow:auto;margin:14px 0;
}
pre code{background:none;border:none;padding:0;font-size:12.5px;line-height:1.7;color:var(--ink-2)}

.copy{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#0a0e15;border:1px solid var(--line);border-radius:6px;
  padding:12px 16px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);
  margin:12px 0;
}
.copy button{
  background:transparent;border:1px solid var(--line-strong);color:var(--ink-2);
  padding:5px 11px;border-radius:4px;font-size:11px;cursor:pointer;
  font-family:var(--sans);transition:all .18s;
}
.copy button:hover{border-color:var(--accent);color:var(--accent)}

.err{
  border-left:2px solid var(--brand);
  background:rgba(36,87,255,.06);
  padding:12px 16px;border-radius:0 6px 6px 0;
  font-size:12.5px;color:var(--ink-3);line-height:1.75;
  margin:12px 0;
}
.err strong{color:var(--ink)}

/* ---------- 表单 ---------- */
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:11px;color:var(--ink-4);margin-bottom:7px;letter-spacing:.04em}
.field input{
  width:100%;padding:11px 13px;border-radius:5px;
  background:#0a0e15;border:1px solid var(--line-strong);
  color:var(--ink);font-size:13px;font-family:var(--sans);
  transition:border-color .18s;
}
.field input:focus{outline:none;border-color:var(--brand)}
.field input::placeholder{color:#4a5668}
.check{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--ink-4);line-height:1.6;margin:14px 0}
.check input{margin-top:2px}
.check a{color:var(--accent)}
.foot{font-size:12px;color:var(--ink-4);margin:14px 0 0}
.foot a{color:var(--accent)}

/* ---------- 页脚 ---------- */
.footer{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px 0;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink-4);
}
.footer a{transition:color .18s}
.footer a:hover{color:var(--accent)}

/* ---------- 响应式 ---------- */
@media (max-width:860px){
  .doc{grid-template-columns:1fr;gap:28px}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;gap:14px}
  .toc strong{width:100%}
}
@media (max-width:720px){
  .matrix-nav{flex-direction:column;align-items:flex-start;gap:16px;padding:26px 24px}
  .matrix-nav nav{width:100%;flex-wrap:wrap;gap:20px;font-size:11.5px}
  .matrix-hero{justify-content:flex-start;padding:40px 24px 80px;min-height:auto}
  .matrix-copy h1{font-size:clamp(38px,10vw,56px)}
  .matrix-frame{inset:12px}
  .matrix-footer{padding:0 24px 28px;flex-direction:column;align-items:flex-start;gap:8px}
  .nav{flex-direction:column;align-items:flex-start;gap:16px}
  .nav-links{flex-wrap:wrap;gap:16px}
  .hero{padding:40px 0 28px}
}