:root{
  --bg:#0b0f17; --bg-alt:#0f1520; --card:#131a26; --line:#1f2a3a;
  --text:#e6edf6; --muted:#93a1b5; --brand:#4f8cff; --brand-2:#31d0aa;
  --radius:14px; --max:1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}
h1,h2,h3{line-height:1.25; margin:0 0 .5em}
.lead{color:var(--muted); font-size:1.1rem}

.site-header{position:sticky; top:0; z-index:20; background:rgba(11,15,23,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.site-header .container{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); font-weight:700}
.brand:hover{text-decoration:none}
.brand-mark{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#08111f; font-weight:800}
.nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.nav a{color:var(--muted)}
.nav a:hover,.nav a.active{color:var(--text); text-decoration:none}

.hero{padding:84px 0 56px; background:radial-gradient(1200px 500px at 50% -10%,rgba(79,140,255,.22),transparent)}
.hero h1{font-size:2.6rem; max-width:18ch}
.hero-actions{display:flex; gap:12px; margin:22px 0 34px}
.hero-stats{display:flex; gap:40px; list-style:none; padding:0; margin:0; flex-wrap:wrap}
.hero-stats strong{display:block; font-size:1.6rem}
.hero-stats span{color:var(--muted); font-size:.9rem}

.btn{display:inline-block; padding:10px 16px; border-radius:10px; border:1px solid var(--line); color:var(--text); background:transparent; cursor:pointer}
.btn:hover{text-decoration:none; border-color:#33465f}
.btn-sm{padding:7px 12px; font-size:.92rem}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#08111f; border:none; font-weight:700}

.section{padding:56px 0}
.section-alt{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-title{font-size:1.6rem; margin-bottom:26px}
.page-head{padding:60px 0 24px; border-bottom:1px solid var(--line); background:var(--bg-alt)}
.page-head h1{font-size:2.1rem}

.grid{display:grid; gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.card h3{margin-top:0}
.card.featured{border-color:var(--brand); box-shadow:0 0 0 1px rgba(79,140,255,.35) inset}
.ticks{list-style:none; padding:0; margin:12px 0 0}
.ticks li{position:relative; padding-left:22px; color:var(--muted); margin:6px 0}
.ticks li::before{content:"✓"; position:absolute; left:0; color:var(--brand-2)}
.price{font-size:1.8rem; margin:.2em 0 .4em}
.price span{font-size:.9rem; color:var(--muted); font-weight:400}
.tag{display:inline-block; font-size:.78rem; color:var(--brand-2); border:1px solid var(--line); border-radius:999px; padding:2px 10px; margin-bottom:10px}
.post h3{margin:.2em 0}
.logos{display:flex; gap:34px; flex-wrap:wrap; color:var(--muted); font-weight:600; opacity:.85}
.steps{counter-reset:s; list-style:none; padding:0; display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.steps li{counter-increment:s; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.steps li::before{content:counter(s); display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; border-radius:50%; background:var(--brand); color:#08111f; font-weight:800; margin-bottom:10px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.prose p{color:var(--muted)}
.prose h2{margin-top:1.6em}
.prose ul{color:var(--muted)}
.notfound{text-align:center; padding:60px 0}
.notfound h1{font-size:5rem; margin:0; background:linear-gradient(135deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.notfound .hero-actions{justify-content:center}

.site-footer{border-top:1px solid var(--line); background:var(--bg-alt); padding:44px 0 20px; margin-top:40px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px}
.footer-grid h4{margin:0 0 10px}
.footer-grid a{display:block; color:var(--muted); margin:6px 0}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
.copyright{color:var(--muted); font-size:.85rem; border-top:1px solid var(--line); margin-top:24px; padding-top:16px}

/* 隐藏页 */
.panel-body{background:var(--bg)}
.panel-wrap{max-width:640px; margin:8vh auto; padding:24px}
.panel-title{font-size:1.3rem; color:var(--muted); font-weight:600}
.panel-form{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.panel-captcha{display:block; border-radius:10px; background:#fff; padding:6px; width:240px; height:auto}
.panel-hint{font-size:.82rem; margin-top:12px}
.panel-input{flex:1; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--text); outline:none}
.panel-input:focus{border-color:var(--brand)}
.panel-error{color:#ff7b7b; margin-top:12px}
.link-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin:14px 0; text-align:center}
.link-qr img{border-radius:10px; background:#fff; padding:8px}
.link-uri{margin-top:12px; word-break:break-all}
.link-uri code{font-size:.82rem; color:var(--muted)}