/* 数痕 Digitrail · 单页站 · 零 JS / 零外部字体 / 零 CDN */
:root{
  --ink:#14202E;
  --ink-2:#2E3E50;
  --muted:#5A6A7A;
  --faint:#7E8B98;
  --line:#E7E3D9;
  --line-2:#F0ECE3;
  --bg:#FFFFFF;
  --bg-soft:#FAF8F3;
  --accent:#C8A34A;
  --accent-deep:#8A6416;
  --radius:12px;
  --wrap:1120px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:rgba(200,163,74,.28)}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:3px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media(min-width:768px){.wrap{padding:0 40px}}

/* ── 顶栏 ── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line-2)}
.hdr .wrap{display:flex;align-items:center;gap:16px;height:76px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo svg.wm{height:34px;width:auto;display:block;flex:none}
.logo i{font-style:normal;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--faint);padding-left:3px}
@media(max-width:520px){
  .hdr .wrap{height:64px}
  .logo svg.wm{height:27px}
  .logo i{font-size:11px}
  /* 手机宽度的顶栏只保留字标 + 语言切换；hero 里同一按钮就在首屏，入口不丢 */
  .hdr .tail .btn{display:none}
}
.nav{display:none;margin-left:auto;gap:30px;font-size:14px}
@media(min-width:900px){.nav{display:flex}}
.nav a{text-decoration:none;color:var(--muted);transition:color .18s}
.nav a:hover{color:var(--ink)}
.hdr .tail{margin-left:auto;display:flex;align-items:center;gap:14px}
@media(min-width:900px){.hdr .tail{margin-left:0}}
.lang{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-decoration:none;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:6px 12px;transition:border-color .18s,color .18s}
.lang:hover{border-color:var(--accent);color:var(--ink)}
.btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;
  background:var(--ink);color:#fff;border-radius:99px;padding:11px 22px;
  font-size:13.5px;font-weight:550;letter-spacing:.01em;transition:background .18s,transform .18s;
}
.btn:hover{background:#0B1520}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent);background:transparent}
.btn .arw{transition:transform .18s}
.btn:hover .arw{transform:translateX(2px)}

/* ── 通用区块 ── */
section{padding:64px 0;position:relative}
@media(min-width:768px){section{padding:92px 0}}
.sec-top{display:grid;grid-template-columns:1fr;gap:22px;margin-bottom:36px}
@media(min-width:900px){.sec-top{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;align-items:end;margin-bottom:52px}}
.pill{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-deep);background:var(--bg-soft);border:1px solid var(--line);
  border-radius:99px;padding:5px 11px;
}
h2{margin:0;font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.16;text-wrap:balance}
h2 .sub{display:block;margin-top:12px;font-size:clamp(14px,1.5vw,16px);font-weight:400;letter-spacing:0;line-height:1.7;color:var(--muted);max-width:52ch}
.sec-top > p{margin:0;color:var(--muted);font-size:15px;line-height:1.85;max-width:56ch}
@media(min-width:900px){.sec-top > p{padding-bottom:4px}}

/* ── Hero ── */
.hero{padding:56px 0 0;overflow:hidden}
@media(min-width:768px){.hero{padding:84px 0 0}}
.hero h1{margin:0;font-size:clamp(34px,6.2vw,68px);font-weight:800;letter-spacing:-.045em;line-height:1.1;max-width:20ch;text-wrap:balance}
.hero .lede{margin:26px 0 0;max-width:44ch;font-size:clamp(15px,1.6vw,17px);line-height:1.85;color:var(--ink-2)}
.hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:34px 0 0}
.hero .cta .txt{font-size:13.5px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.hero .cta .txt:hover{border-bottom-color:var(--accent)}
/* 纸堆视觉：三层卡片错位，象征「一叠截图」 */
.stack{position:relative;margin:52px 0 0;height:clamp(150px,22vw,230px);border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(180deg,#FCFAF5,#F6F2E9);border:1px solid var(--line);border-bottom:0;overflow:hidden}
.stack::before,.stack::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border:1px solid var(--line);border-radius:6px;background:#fff}
.stack::before{width:min(74%,560px);height:76%;top:16%;box-shadow:0 18px 44px -26px rgba(20,32,46,.28)}
.stack::after{width:min(56%,420px);height:60%;top:26%;background:linear-gradient(180deg,#fff,#FCFAF5);box-shadow:0 12px 30px -22px rgba(20,32,46,.3)}
.stack .lines{position:absolute;left:50%;top:26%;transform:translateX(-50%);width:min(56%,420px);height:60%;z-index:1;padding:16px 18px;display:flex;flex-direction:column;gap:9px}
.stack .lines i{display:block;height:1px;background:var(--line);border-radius:1px}
.stack .lines i:nth-child(2){width:72%}
.stack .lines i:nth-child(4){width:86%}
.stack .lines i:nth-child(6){width:64%}
.stack .lines i:nth-child(8){width:78%}
.stack .lines i.gold{height:2px;background:linear-gradient(90deg,var(--accent),rgba(200,163,74,.15));width:46%}
@media(max-width:620px){
  .stack{height:132px}
  .stack .lines{gap:7px;padding:13px 15px}
  .stack .lines i:nth-child(n+7){display:none}
}

/* ── 卡片网格 ── */
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:720px){.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:860px){.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:26px 24px 28px;transition:border-color .2s,box-shadow .2s,transform .2s;
}
.card:hover{border-color:#DCD5C4;box-shadow:0 16px 40px -30px rgba(20,32,46,.4);transform:translateY(-2px)}
.card .ic{width:34px;height:34px;border-radius:9px;background:var(--bg-soft);border:1px solid var(--line);display:grid;place-items:center;color:var(--accent-deep)}
.card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint);margin-bottom:14px}
.card h3{margin:18px 0 8px;font-size:16.5px;font-weight:650;letter-spacing:-.015em}
.card p{margin:0;font-size:14px;line-height:1.75;color:var(--muted)}
/* 点阵装饰（照模板的进度点，换成品牌金） */
.dots{display:flex;gap:5px;margin-bottom:16px}
.dots b{width:14px;height:7px;border-radius:99px;background:var(--accent);opacity:.9}
.dots b.dim{background:var(--line);opacity:1}

/* ── 为什么（4 卡，密一点） ── */
.why .card{padding:24px 22px 26px}
.why .card h3{margin-top:16px}
.why .card .num{font-family:var(--mono);font-size:11px;color:var(--accent-deep);letter-spacing:.08em}

/* ── 步骤 ── */
.steps{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{padding:26px 0;border-bottom:1px solid var(--line);position:relative}
@media(min-width:860px){
  .step{padding:30px 30px 30px 0;border-bottom:0;border-right:1px solid var(--line)}
  .step:last-child{border-right:0;padding-right:0}
  .step + .step{padding-left:30px}
}
.step .n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent-deep)}
.step h3{margin:12px 0 8px;font-size:17px;font-weight:650;letter-spacing:-.015em}
.step p{margin:0;font-size:14px;line-height:1.78;color:var(--muted);max-width:34ch}
.step code{font-family:var(--mono);font-size:12.5px;background:var(--bg-soft);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--ink-2)}

/* ── FAQ ── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 34px 20px 0;position:relative;
  font-size:15.5px;font-weight:550;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{padding:0 34px 22px 0;font-size:14.5px;line-height:1.85;color:var(--muted);max-width:70ch}
.faq .a code{font-family:var(--mono);font-size:12.5px;background:var(--bg-soft);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--ink-2)}

/* ── 底部 CTA ── */
.cta-band{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-band .wrap{padding-top:56px;padding-bottom:56px;text-align:center}
@media(min-width:768px){.cta-band .wrap{padding-top:76px;padding-bottom:76px}}
.cta-band h2{max-width:32ch;margin:0 auto}
.cta-band p{margin:18px auto 0;max-width:52ch;color:var(--muted);font-size:15px;line-height:1.8}
.cta-band .btn{margin-top:30px}
#faq{padding-bottom:56px}

/* ── 页脚 ── */
footer{border-top:1px solid var(--line);padding:56px 0 40px}
.f-top{display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:860px){.f-top{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px}}
.f-brand b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em}
.f-brand .en{display:block;margin-top:4px;font-size:12.5px;color:var(--faint);letter-spacing:.005em}
.f-meta{margin-top:18px;font-size:13px;color:var(--muted);line-height:1.85}
.f-meta .lab{display:inline-block;min-width:64px;color:var(--faint);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.f-meta a{color:var(--accent-deep);text-decoration:none;border-bottom:1px solid rgba(138,100,22,.25)}
.f-links{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13.5px;align-content:start}
.f-links a{color:var(--muted);text-decoration:none}
.f-links a:hover{color:var(--ink)}
.f-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.02em}