:root{
  --ink:#1c2430;--soft:#66717d;--line:rgba(255,255,255,.72);
  --accent:#1b6bc7;--green:#2e9a5c;--sky:#7cc6f5;--mint:#9fe3c8;--pink:#f6c1d6;
  --glass:rgba(255,255,255,.58);--glass-strong:rgba(255,255,255,.78);
  --r:24px;--shadow:0 24px 70px rgba(30,60,90,.10),0 2px 6px rgba(30,60,90,.05);
  --font:-apple-system,"SF Pro Text","PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans SC","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:#f4f6f9;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:0;font-weight:600;margin:0}
h1{font-size:clamp(32px,4.6vw,52px);line-height:1.16}
h2{font-size:clamp(26px,3.6vw,38px);line-height:1.2}
h3{font-size:18px}
p{margin:0}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}

/* 背景：柔和渐变 + 三块模糊色斑，和 App 玻璃主题同一套语言 */
.bg{position:fixed;inset:0;z-index:-1;background:linear-gradient(160deg,#f7f8fb 0%,#eef2f7 60%,#f4f0f7 100%);overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;animation:float 18s ease-in-out infinite}
.b1{width:520px;height:520px;left:-160px;top:-180px;background:var(--sky)}
.b2{width:560px;height:560px;right:-200px;top:260px;background:var(--mint);animation-delay:-6s}
.b3{width:480px;height:480px;left:20%;bottom:-260px;background:var(--pink);animation-delay:-12s}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-24px)}}

/* 顶栏 */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;padding:12px max(20px,4vw);
  background:rgba(247,248,250,.62);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid rgba(255,255,255,.6)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px}
.brand img{width:30px;height:30px}
.brand em{font-style:normal;color:var(--soft);font-weight:400;font-size:13px;margin-left:-2px}
.nav nav{display:flex;gap:22px;margin-left:auto;font-size:14px;color:var(--soft)}
.nav nav a:hover{color:var(--ink)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:14px;font-weight:600;font-size:15px;border:1px solid transparent;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 10px 26px rgba(27,107,199,.28)}
.btn.primary .ver{font-weight:400;opacity:.8;font-size:13px}
.btn.ghost{background:var(--glass);border-color:var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn.small{padding:8px 14px;font-size:13px;background:var(--glass-strong);border-color:var(--line)}

main{max-width:1120px;margin:0 auto;padding:0 max(20px,4vw)}

/* 首屏 */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:72px 0 40px;min-height:78vh}
.eyebrow{font-size:13px;color:var(--accent);font-weight:600;margin-bottom:14px}
.lead{font-size:18px;color:var(--soft);margin:22px 0 30px;max-width:520px}
.lead strong{color:var(--ink);font-weight:600}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.trust{list-style:none;padding:0;margin:26px 0 0;display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--soft)}
.trust li::before{content:"✓";color:var(--green);margin-right:6px;font-weight:700}

.hero-visual{position:relative;display:flex;justify-content:center}
.phone{width:min(320px,80vw);aspect-ratio:9/19.2;border-radius:44px;padding:10px;background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.55));
  border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:36px;display:block;background:#fff}
.chip{position:absolute;padding:12px 16px;border-radius:18px;background:var(--glass-strong);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:bob 6s ease-in-out infinite}
.chip b{display:block;font-size:15px}
.chip span{font-size:12px;color:var(--soft)}
.c1{left:-8px;top:18%}
.c2{right:-10px;bottom:20%;animation-delay:-3s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* 数字条 */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px 0 90px}
.strip-item{padding:18px 20px;border-radius:18px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.strip-item b{display:block;font-size:22px;font-weight:600}
.strip-item span{font-size:13px;color:var(--soft)}

/* 功能 */
.features{padding:20px 0 80px;text-align:center}
.sub{color:var(--soft);font-size:16px;margin:12px auto 36px;max-width:560px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.card{position:relative;overflow:hidden;padding:24px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);min-height:180px;display:flex;flex-direction:column;gap:10px}
.card p{color:var(--soft);font-size:14px}
.card img{margin-top:auto;width:100%;border-radius:16px;border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 30px rgba(30,60,90,.12);display:block}
.card.wide{grid-column:span 2;flex-direction:row;align-items:flex-end;gap:24px}
.card.wide .card-text{flex:1;align-self:center}
.card.wide img{width:44%;margin:0}
.card:nth-child(6) img{max-height:220px;object-fit:cover;object-position:top}

/* 原则 / 自托管 */
.principle,.selfhost{padding:20px 0 80px}
.glass{padding:40px;border-radius:32px;background:var(--glass-strong);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:28px}
.cols b{display:block;margin-bottom:6px}
.cols p{font-size:14px;color:var(--soft)}
.selfhost p{color:var(--soft);margin:12px 0 18px;max-width:720px}
.selfhost pre{margin:0;padding:18px 20px;border-radius:16px;background:#1c2430;color:#e6edf3;overflow:auto}

/* 下载 */
.download{padding:20px 0 80px;text-align:center}
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
.dl{display:block;padding:20px;border-radius:20px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .15s,box-shadow .15s}
.dl:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.dl b{display:block;font-size:16px}
.dl span{font-size:13px;color:var(--soft)}
.notes{margin:26px auto 0;max-width:720px;text-align:left}
.notes summary{cursor:pointer;color:var(--soft);font-size:14px}
.notes pre{white-space:pre-wrap;font-family:var(--font);font-size:14px;color:var(--soft);padding:16px 18px;border-radius:16px;background:var(--glass);border:1px solid var(--line)}

footer{max-width:1120px;margin:0 auto;padding:30px max(20px,4vw) 50px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--soft);font-size:13px;border-top:1px solid rgba(255,255,255,.7)}
footer div{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
footer img{width:22px;height:22px}
footer nav{margin-left:auto;display:flex;gap:16px}

/* 进场 */
.js .card,.js .strip-item,.js .dl,.js .glass{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.card.in,.strip-item.in,.dl.in,.glass.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.blob,.chip{animation:none}.card,.strip-item,.dl,.glass{opacity:1;transform:none;transition:none}}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:36px;min-height:0}
  .hero-visual{margin-top:16px}
  .strip,.grid,.dl-grid{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr 1fr}
  .card.wide{grid-column:span 2;flex-direction:column;align-items:stretch}
  .card.wide img{width:100%}
  .nav nav{display:none}
}
@media (max-width:560px){
  .strip,.grid,.dl-grid,.cols{grid-template-columns:1fr}
  .card.wide{grid-column:span 1}
  .glass{padding:26px 20px}
  .c1{left:0}.c2{right:0}
}