/* ══════════════════════════════════════════════════
   Perch · 栖架 — 官网样式
   视觉语言沿用 perch-demo-v3.html：深色、macOS 原生质感
   ══════════════════════════════════════════════════ */

:root{
  --bg:#08090e;
  --bg-soft:#0e1017;
  --card:rgba(255,255,255,.035);
  --card-h:rgba(255,255,255,.06);
  --text:#f2f2f7;
  --dim:rgba(242,242,247,.62);
  --faint:rgba(242,242,247,.34);
  --line:rgba(255,255,255,.09);
  --line-s:rgba(255,255,255,.14);
  --row:rgba(255,255,255,.055);
  --row-h:rgba(255,255,255,.1);
  --accent:#0a84ff;
  --image:#bf5af2;
  --textc:#ff9f0a;
  --link:#30d158;
  --danger:#ff453a;
  --radius:16px;
  --max:1080px;

  /* 中英文混排字体栈。
     注意：PingFang SC 最粗只到 Semibold(600)，字重不要超过 600，
     否则浏览器会合成加粗(faux bold)，中文笔画发糊、和英文的真 Bold 对不上。
     同理不要用 550 / 650 这类合成值——SF Pro 是可变字体能渲染，
     PingFang 不能，会取整到 600，导致同一行中英文粗细不一致。 */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",
         "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,"JetBrains Mono",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font);
  font-size:15.5px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

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

/* ── 导航 ── */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(8,9,14,.72);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;gap:28px;height:56px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;letter-spacing:.2px}
.brand .mark{
  width:24px;height:24px;border-radius:7px;background:#000;
  border:1px solid var(--line-s);position:relative;flex-shrink:0;
}
.brand .mark::after{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:13px;height:7px;background:var(--accent);border-radius:0 0 4px 4px;
}
.brand small{color:var(--faint);font-weight:400;font-size:13px}
.nav nav{display:flex;gap:22px;margin-left:auto;font-size:13.5px;color:var(--dim)}
.nav nav a{transition:color .15s}
.nav nav a:hover{color:var(--text)}
.nav .btn-sm{
  padding:6px 14px;border-radius:8px;background:var(--accent);color:#fff;
  font-size:13px;font-weight:500;transition:.15s;white-space:nowrap;
}
.nav .btn-sm:hover{background:#2b95ff}

/* ── 通用排版 ── */
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;letter-spacing:.6px;color:var(--faint);
  border:1px solid var(--line);border-radius:99px;padding:5px 13px;margin-bottom:22px;
}
.eyebrow b{color:var(--link);font-weight:500}
/* 中文是等宽方块，不加负字距；行高比纯拉丁文排版放宽一档 */
h1{font-size:clamp(33px,5.2vw,54px);line-height:1.3;letter-spacing:0;font-weight:600}
h2{font-size:clamp(23px,3.2vw,33px);line-height:1.38;letter-spacing:0;font-weight:600}
h3{font-size:16.5px;font-weight:600;letter-spacing:0;line-height:1.5}
.lead{font-size:17px;color:var(--dim);line-height:1.85;max-width:640px}
.sec{padding:88px 0;border-top:1px solid var(--line)}
.sec-head{margin-bottom:44px;max-width:660px}
.sec-head p{color:var(--dim);margin-top:12px}
.kicker{
  font-size:12px;letter-spacing:.4px;color:var(--accent);
  font-weight:600;margin-bottom:12px;
}

/* ── 按钮 ── */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:11px;
  font-size:14.5px;font-weight:500;transition:.16s;border:1px solid transparent;
}
.btn-p{background:var(--accent);color:#fff;box-shadow:0 6px 24px rgba(10,132,255,.28)}
.btn-p:hover{background:#2b95ff;transform:translateY(-1px)}
.btn-g{background:var(--card);border-color:var(--line-s);color:var(--text)}
.btn-g:hover{background:var(--card-h)}
.btn .sz{font-size:12px;color:rgba(255,255,255,.6);font-weight:400}

/* ── Hero ── */
.hero{padding:78px 0 0;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-200px 0 auto 0;height:900px;z-index:-1;
  background:
    radial-gradient(760px 460px at 22% 10%,rgba(43,58,103,.55) 0%,transparent 62%),
    radial-gradient(680px 420px at 84% 26%,rgba(92,42,94,.42) 0%,transparent 64%);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-meta{
  margin-top:16px;font-size:13px;color:var(--faint);
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
}
.hero-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--faint)}

/* ── 桌面模拟 ── */
.stage{
  margin-top:62px;position:relative;border-radius:18px 18px 0 0;overflow:hidden;
  border:1px solid var(--line);border-bottom:none;
  background:
    radial-gradient(1100px 760px at 18% 8%,#2b3a67 0%,transparent 58%),
    radial-gradient(880px 680px at 88% 84%,#5c2a5e 0%,transparent 60%),
    linear-gradient(158deg,#101427,#1a1230 55%,#0b0d14);
  height:428px;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
}
.stage::after{
  content:"";position:absolute;inset:auto 0 0 0;height:130px;
  background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none;
}
.menubar{
  height:28px;background:rgba(0,0,0,.32);backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:space-between;padding:0 14px;
  font-size:11.5px;color:rgba(255,255,255,.72);
}
.menubar .l{display:flex;gap:15px}
.menubar .l b{font-weight:600}
.menubar .r{display:flex;gap:13px;font-variant-numeric:tabular-nums}

.perch{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:20;width:640px}
.hot{
  width:640px;height:28px;background:#000;display:flex;align-items:center;
  justify-content:center;gap:8px;
}
.hot .lbl{font-size:10.5px;color:rgba(255,255,255,.42);letter-spacing:.5px}
.hot .cnt{
  min-width:16px;height:16px;padding:0 5px;border-radius:8px;background:var(--accent);
  font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.panel{
  width:640px;background:rgba(24,24,27,.9);backdrop-filter:blur(40px) saturate(180%);
  border:1px solid var(--line);border-top:none;border-radius:0 0 18px 18px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);overflow:hidden;
  /* 面板内是 App 界面的复刻，用 App 自己的紧凑行高，不跟随正文的 1.75 */
  font-size:13px;line-height:1.45;
}
.p-head{display:flex;align-items:center;gap:8px;padding:9px 13px;border-bottom:1px solid var(--line)}
.p-head .t{font-size:12px;font-weight:600;letter-spacing:.3px}
.p-head .s{color:var(--faint);font-size:10.5px;margin-right:auto}
.ibtn{
  width:25px;height:25px;border-radius:7px;background:var(--row);color:var(--dim);
  font-size:11px;display:flex;align-items:center;justify-content:center;
}
.p-sec{padding:9px 13px 11px}
.p-sec+.p-sec{border-top:1px solid var(--line)}
.p-sec-hd{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.p-sec-hd h4{font-size:10.5px;font-weight:600;color:var(--dim);letter-spacing:.7px;text-transform:uppercase}
.p-sec-hd .n{font-size:10px;color:var(--faint)}
.p-sec-hd .sp{flex:1}
.p-sec-hd .a{font-size:10.5px;color:var(--faint)}

.crow{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;margin-bottom:2px;position:relative}
.crow.hl{background:var(--row-h)}
.crow.ok{background:rgba(48,209,88,.15);box-shadow:inset 0 0 0 1px rgba(48,209,88,.38)}
.crow .idx{width:22px;font-size:9.5px;color:var(--faint);text-align:center;flex-shrink:0}
.crow .ic{
  width:26px;height:26px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-size:12px;flex-shrink:0;
}
.ic.text{background:rgba(255,159,10,.16);color:#ffc266}
.ic.link{background:rgba(48,209,88,.16);color:#7ee39a}
.ic.image{background:rgba(191,90,242,.16);color:#d99cf7}
.crow .txt{flex:1;min-width:0}
.crow .p{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .p.lk{color:#7ee39a;font-size:11.5px}
.crow .m{font-size:9.5px;color:var(--faint);margin-top:2px}
.chip{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);background:var(--link);
  color:#06240f;font-size:10px;font-weight:600;padding:3px 8px;border-radius:11px;
}
.fgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.fcell{
  background:var(--row);border:1px solid transparent;border-radius:9px;padding:8px 5px;
  text-align:center;font-size:9.5px;color:var(--faint);
}
.fcell.sel{border-color:var(--accent);background:rgba(10,132,255,.14)}
.fcell .fi{font-size:19px;margin-bottom:4px;display:block}
.fcell .fn{color:var(--dim);font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-foot{
  display:flex;align-items:center;gap:7px;padding:7px 13px;border-top:1px solid var(--line);
  font-size:10px;color:var(--faint);
}
.p-foot .live{width:6px;height:6px;border-radius:50%;background:var(--link)}
.p-foot .sp{flex:1}

/* ── 卡片网格 ── */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;transition:.18s;
}
.card:hover{background:var(--card-h);border-color:var(--line-s)}
.card .ico{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:17px;margin-bottom:16px;
}
.i-blue{background:rgba(10,132,255,.14);color:#6ab4ff}
.i-green{background:rgba(48,209,88,.14);color:#7ee39a}
.i-purple{background:rgba(191,90,242,.14);color:#d99cf7}
.i-orange{background:rgba(255,159,10,.14);color:#ffc266}
.card p{color:var(--dim);font-size:14px;margin-top:9px;line-height:1.65}
.card .tag{
  display:inline-block;margin-top:14px;font-size:11.5px;color:var(--faint);
  border:1px solid var(--line);border-radius:6px;padding:2px 8px;
}

/* 取出路径 */
.path{display:flex;gap:16px;align-items:flex-start}
.path .k{
  flex-shrink:0;min-width:52px;height:30px;padding:0 10px;border-radius:8px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-s);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;font-family:var(--font-mono);
}
.path h3{margin-bottom:5px}
.path p{color:var(--dim);font-size:14px}

/* ── 表格 ── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:12.5px;color:var(--faint);font-weight:600;letter-spacing:.2px;background:rgba(255,255,255,.02)}
tr:last-child td{border-bottom:none}
td.me{color:var(--text);font-weight:500}
col.hi,th.hi,td.hi{background:rgba(10,132,255,.07)}
.yes{color:var(--link)}
.no{color:rgba(255,69,58,.75)}
.mid{color:var(--textc)}
tbody tr:hover td{background:rgba(255,255,255,.022)}

/* ── 隐私块 ── */
.notice{
  border:1px solid rgba(255,159,10,.3);background:rgba(255,159,10,.06);
  border-radius:var(--radius);padding:28px 30px;
}
.notice h3{color:#ffc266;display:flex;align-items:center;gap:9px;margin-bottom:12px}
.notice p{color:var(--dim);font-size:14.5px}
.notice p+p{margin-top:10px}
.notice b{color:var(--text);font-weight:600}

.list{display:grid;gap:11px;margin-top:6px}
.list li{
  list-style:none;display:flex;gap:11px;align-items:flex-start;
  font-size:14px;color:var(--dim);line-height:1.6;
}
.list li .m{flex-shrink:0;font-size:13px;margin-top:2px}
.list li b{color:var(--text);font-weight:500}

/* ── 下载 ── */
.dl{
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  background:linear-gradient(160deg,rgba(10,132,255,.08),transparent 60%),var(--card);
}
.dl h3{margin-bottom:6px}
.dl p{color:var(--dim);font-size:13.5px;margin-bottom:18px}
code,.code{
  font-family:var(--font-mono);font-size:12.5px;
  background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:8px;
  padding:10px 13px;display:block;color:#a8d4ff;overflow-x:auto;white-space:nowrap;
}
.req{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;
  font-size:13px;color:var(--faint);
}
.req span b{color:var(--dim);font-weight:500}

/* ── FAQ ── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{
  cursor:pointer;font-size:15.5px;font-weight:500;list-style:none;
  display:flex;align-items:center;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--accent);font-size:17px;width:14px}
.faq details[open] summary::before{content:"−"}
.faq details p{color:var(--dim);font-size:14px;margin-top:11px;padding-left:26px;max-width:760px}

/* ── CTA ── */
.cta{text-align:center;padding:96px 0}
.cta h2{margin-bottom:14px}
.cta p{color:var(--dim);margin-bottom:28px}
.cta .hero-cta{justify-content:center}

/* ── 页脚 ── */
footer{border-top:1px solid var(--line);padding:36px 0;font-size:13px;color:var(--faint)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:20px;margin-left:auto}
footer a:hover{color:var(--text)}
/* 备案号依法必须展示，独占一行，不参与上面那行的挤压 */
footer .beian{
  width:100%;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;
}
footer .beian a{color:var(--faint)}
footer .police{display:inline-flex;align-items:center;gap:6px}
footer .police img{display:block;width:18px;height:18px}

/* ── 政策 / 文档页 ── */
.doc{max-width:760px;margin:0 auto;padding:56px 0 40px}
.doc h1{font-size:clamp(28px,4vw,38px);margin-bottom:10px}
.doc .updated{color:var(--faint);font-size:13px;margin-bottom:12px}
.doc h2{
  font-size:20px;font-weight:600;margin:46px 0 14px;
  padding-top:26px;border-top:1px solid var(--line);
}
.doc h3{font-size:16px;margin:26px 0 8px}
.doc p{color:var(--dim);margin-bottom:14px}
.doc ul{margin:0 0 18px}
.doc li{
  list-style:none;display:flex;gap:10px;align-items:flex-start;
  color:var(--dim);margin-bottom:9px;
}
.doc li::before{content:"·";color:var(--accent);flex-shrink:0;font-weight:600}
.doc b,.doc strong{color:var(--text);font-weight:600}
.doc a{color:var(--accent)}
.doc a:hover{text-decoration:underline}
.doc code{
  display:inline;padding:1px 6px;background:rgba(0,0,0,.42);
  border:1px solid var(--line);border-radius:5px;color:#a8d4ff;white-space:normal;
}
.doc .tree{margin:0 0 18px;white-space:pre-wrap}
.doc .tbl-wrap{margin-bottom:18px}
.doc-box{
  border:1px solid var(--line-s);background:var(--card);
  border-radius:var(--radius);padding:24px 26px;margin:0 0 8px;
}
.doc-box.warn{border-color:rgba(255,159,10,.32);background:rgba(255,159,10,.06)}
.doc-box.warn h3{color:#ffc266}
.doc-box h3{margin:0 0 12px}
.doc-box p:last-child{margin-bottom:0}

/* ── 介绍页专用 ── */
.anno{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start}
.anno .steps{display:grid;gap:20px}
.anno .step{display:flex;gap:14px}
.anno .step .n{
  flex-shrink:0;width:24px;height:24px;border-radius:7px;background:rgba(10,132,255,.16);
  color:#6ab4ff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.anno .step h3{font-size:15px;margin-bottom:3px}
.anno .step p{color:var(--dim);font-size:13.5px}
.mini-panel{
  background:rgba(24,24,27,.94);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;font-size:13px;position:sticky;top:80px;
}
.mini-panel .panel{width:100%;border:none;border-radius:0;box-shadow:none}
.mini-panel .fgrid{grid-template-columns:repeat(4,1fr)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pane{border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.pane.good{border-color:rgba(48,209,88,.25);background:rgba(48,209,88,.04)}
.pane.bad{border-color:rgba(255,69,58,.22);background:rgba(255,69,58,.035)}
.pane h3{margin-bottom:14px;display:flex;align-items:center;gap:8px}
.pane.good h3{color:#7ee39a}
.pane.bad h3{color:#ff8e85}

.kbd{
  display:inline-block;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.08);
  border:1px solid var(--line-s);font-family:var(--font-mono);
  font-size:12.5px;
}

.tree{
  font-family:var(--font-mono);font-size:12.5px;line-height:1.9;
  background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;color:var(--dim);white-space:pre;overflow-x:auto;
}
.tree b{color:var(--text);font-weight:500}
.tree i{color:var(--faint);font-style:normal}

.page-head{padding:64px 0 8px;position:relative}
.page-head::before{
  content:"";position:absolute;inset:-120px 0 auto 0;height:520px;z-index:-1;
  background:radial-gradient(760px 380px at 30% 0%,rgba(43,58,103,.42) 0%,transparent 64%);
}

/* ── 响应式 ── */
@media (max-width:960px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .anno{grid-template-columns:1fr}
  .mini-panel{position:static;max-width:420px}
  .stage{height:auto;padding-bottom:40px}
  .perch{width:100%;max-width:640px}
  .perch .hot,.perch .panel{width:100%}
}
@media (max-width:680px){
  .nav nav{display:none}
  .g3,.g4,.g2,.split{grid-template-columns:1fr}
  .sec{padding:64px 0}
  .hero{padding:52px 0 0}
  .stage{margin-top:44px;transform:scale(1);overflow-x:auto}
  .fgrid{grid-template-columns:repeat(4,1fr)}
}