/* 落叶工具箱 · 磨砂玻璃 / 极简 / 深色 */
:root{
  --bg:#07090d;
  --text:#eef3f9;
  --muted:#93a1b4;
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);
  --accent:#e2554f;
  --accent2:#f0a24b;
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.09);
  --radius:22px;
  --blur:22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  line-height:1.65;letter-spacing:.01em;min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:rgba(255,255,255,.08);padding:.12em .45em;border-radius:7px;color:#dbe6f5}

/* ---------- 背景光斑 ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(1200px 700px at 80% -10%, #1a2030 0%, transparent 60%),
  radial-gradient(900px 600px at -10% 10%, #241a18 0%, transparent 55%),
  var(--bg);}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.b1{width:52vw;height:52vw;left:-8vw;top:-10vw;background:linear-gradient(120deg,#e2554f,#7a2f6b)}
.b2{width:46vw;height:46vw;right:-6vw;top:12vh;background:linear-gradient(120deg,#f0a24b,#b8482f)}
.b3{width:40vw;height:40vw;left:28vw;bottom:-18vw;background:linear-gradient(120deg,#2b6cb0,#123c5c)}
.grain{position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>")}

/* ---------- 玻璃 ---------- */
.glass{
  position:relative;
  background:linear-gradient(160deg,var(--glass-2),var(--glass));
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 24px 60px -28px rgba(0,0,0,.9);
  overflow:hidden;
}
.glass::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(320px 200px at var(--mx,50%) var(--my,0%), rgba(255,255,255,.14), transparent 60%);
}
.glass:hover::after{opacity:1}

/* ---------- 顶栏 ---------- */
.nav{
  position:sticky;top:14px;z-index:20;
  display:flex;align-items:center;gap:22px;
  max-width:1080px;margin:14px auto 0;padding:12px 18px;border-radius:18px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:.02em}
.brand img{filter:drop-shadow(0 4px 12px rgba(226,85,79,.45))}
.links{display:flex;gap:22px;margin-left:auto;font-size:14px;color:var(--muted)}
.links a{transition:color .18s}
.links a:hover{color:var(--text)}
.pill{
  padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;
  color:#1b0f0d;background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 8px 24px -10px rgba(226,85,79,.9);
}

/* ---------- 主区 ---------- */
main{max-width:1080px;margin:0 auto;padding:0 20px 40px}
.hero{padding:88px 0 40px;max-width:780px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;
  padding:7px 14px;border-radius:999px;font-size:12.5px;color:#cfd9e6}
.dot{width:7px;height:7px;border-radius:50%;background:#43d18b;box-shadow:0 0 12px #43d18b}
.hero h1{
  font-size:clamp(34px,6vw,62px);line-height:1.14;margin:0 0 22px;font-weight:700;letter-spacing:-.02em;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,#fff 10%,var(--accent2) 55%,var(--accent) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{color:var(--muted);font-size:16.5px;margin:0 0 30px;max-width:640px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 22px;border-radius:14px;font-size:14.5px;font-weight:600;
  border:1px solid var(--line);transition:transform .18s, border-color .18s, background .2s;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.24)}
.btn.strong{color:#20110f;background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent;box-shadow:0 14px 34px -16px rgba(226,85,79,.95)}
.hint{color:var(--muted);font-size:13px;margin-top:16px}
.hint a{color:var(--accent2);text-decoration:underline;text-underline-offset:3px}

.section{margin-top:78px}
.head{margin-bottom:22px}
.head h2{font-size:24px;margin:0 0 6px;letter-spacing:-.01em}
.head p{color:var(--muted);margin:0;font-size:14.5px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px}
.card{padding:22px}
.card .ico{font-size:20px;margin-bottom:10px;filter:grayscale(.15)}
.card h3{margin:0 0 8px;font-size:16px;letter-spacing:.01em}
.card p{margin:0;color:var(--muted);font-size:14px}
.card b{color:#dfe8f4}

.dl{display:flex;flex-direction:column;gap:12px}
.dlrow{display:flex;align-items:center;gap:18px;padding:20px 22px}
.dlmeta{flex:1;min-width:0}
.dlmeta strong{font-size:16px}
.dlmeta p{margin:5px 0 0;color:var(--muted);font-size:13.5px}
.chip{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:999px;font-size:11.5px;
  color:#ffd6a8;background:rgba(240,162,75,.14);border:1px solid rgba(240,162,75,.28)}

.faq details{padding:16px 20px;margin-bottom:10px;border-radius:16px}
.faq summary{cursor:pointer;font-weight:600;outline:none;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";float:right;color:var(--muted)}
.faq details[open] summary::after{content:"－"}
.faq p{color:var(--muted);margin:10px 0 0;font-size:14px}

.foot{max-width:1080px;margin:60px auto 0;padding:26px 20px 50px;text-align:center;
  color:var(--muted);font-size:13px;border-top:1px solid var(--line-soft)}
.foot p{margin:4px 0}

@media (max-width:680px){
  .nav{top:8px;margin:8px 12px 0;padding:10px 14px;gap:12px}
  .links{display:none}
  .hero{padding:56px 0 24px}
  .dlrow{flex-direction:column;align-items:stretch}
  .dlrow .btn{width:100%}
  main{padding:0 14px 30px}
}