*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:#1f2328;background:#f7f8fa;line-height:1.75;
background-image:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(124,58,237,.06),transparent),radial-gradient(ellipse 60% 40% at 100% 0%,rgba(37,99,235,.04),transparent)}
a{color:#2563eb;text-decoration:none}
a:hover{text-decoration:underline}
.w{max-width:1120px;margin:0 auto;padding:0 20px}
header{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:9}
header .w{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:14px 20px}
.logo{font-weight:800;font-size:1.35em;color:#111}
.logo span{color:#7c3aed}
nav a{margin-left:16px;color:#374151;font-weight:500}
nav a:hover{color:#7c3aed}
main{padding:28px 0 36px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 20px;margin-bottom:14px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.03);transition:border-color .18s,box-shadow .18s,transform .18s}
.card:hover{border-color:#ddd6fe;box-shadow:0 4px 8px rgba(124,58,237,.08),0 12px 28px rgba(15,23,42,.06);transform:translateY(-2px)}
.card h3{margin:.2em 0}
.meta{color:#6b7280;font-size:.85em}
.tagn{background:#ede9fe;color:#6d28d9;border-radius:6px;padding:1px 8px;font-size:.8em;margin-right:6px}
.ad{border:2px dashed #cbd5e1;color:#94a3b8;text-align:center;padding:22px;border-radius:12px;margin:18px 0;font-size:.85em}
.nl{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;border-radius:14px;padding:24px 26px;margin:28px 0;box-shadow:0 8px 24px rgba(124,58,237,.2)}
.nl input{padding:10px;border-radius:8px;border:0;width:60%;max-width:300px}
.nl button{padding:10px 16px;border:0;border-radius:8px;background:#111;color:#fff;margin-left:6px;cursor:pointer}
.nl button:hover{background:#1f2937}

/* home hero */
.hero{background:linear-gradient(135deg,#faf5ff 0%,#eff6ff 55%,#f8fafc 100%);border:1px solid #e9d5ff;border-radius:16px;padding:28px 32px;margin:0 0 28px;box-shadow:0 1px 3px rgba(124,58,237,.06),0 10px 28px rgba(37,99,235,.05);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.12),transparent 70%);pointer-events:none}
.hero h1{margin:0 0 .35em;font-size:1.85em;font-weight:800;letter-spacing:-.02em;color:#111827;line-height:1.25}
.hero .hero-sub{margin:0;color:#4b5563;font-size:1.05em;line-height:1.6;max-width:36em}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hero-badges span{background:#fff;border:1px solid #e9d5ff;color:#6d28d9;border-radius:999px;padding:4px 12px;font-size:.8em;font-weight:600}


/* === home tabs + card grid === */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:4px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;width:fit-content;max-width:100%;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.tab{appearance:none;border:0;background:transparent;color:#4b5563;font:inherit;font-weight:600;font-size:.92em;padding:8px 16px;border-radius:8px;cursor:pointer;line-height:1.2;transition:background .15s,color .15s}
.tab:hover{color:#6d28d9;background:#f5f3ff}
.tab.is-active{background:#7c3aed;color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.25)}
.tab.is-active:hover{background:#6d28d9;color:#fff}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 8px;align-items:stretch}
.card-grid .card{display:flex;flex-direction:column;margin-bottom:0;height:100%;min-height:0}
.card-top{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin-bottom:6px}
.card-grid .card h3{margin:.15em 0 .5em;font-size:1.05em;line-height:1.4;flex:0 0 auto}
.card-grid .card h3 a{color:#111827}
.card-grid .card h3 a:hover{color:#7c3aed}
.card-excerpt{margin:0;color:#6b7280;font-size:.88em;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;flex:1 1 auto}
.filter-empty{color:#6b7280;text-align:center;padding:28px 12px;margin:0 0 16px}
.card[hidden]{display:none!important}

@media(max-width:900px){
  .card-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:600px){
  .card-grid{grid-template-columns:1fr;gap:12px}
  .tabs{width:100%;justify-content:stretch}
  .tab{flex:1 1 auto;text-align:center;padding:8px 10px}
}

/* === article typography & visual rhythm === */
article{background:#fff;border-radius:14px;padding:32px 36px 36px;border:1px solid #e5e7eb;box-shadow:0 1px 3px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.04);max-width:1000px;margin:0 auto}
.article-shell{max-width:1000px;margin:0 auto}
article h1{line-height:1.3;font-size:1.75em;font-weight:800;color:#111827;margin:.35em 0 .55em;letter-spacing:-.01em;max-width:720px}
article h2{font-size:1.22em;font-weight:700;color:#1f2937;margin:1.55em 0 .55em;padding-bottom:.28em;border-bottom:1px solid #f3e8ff;line-height:1.4;max-width:720px}
article h3{font-size:1.05em;font-weight:650;color:#374151;margin:1.2em 0 .4em;max-width:720px}
article p{margin:.65em 0;max-width:720px}
article ul,article ol{margin:.55em 0 .9em;padding-left:1.35em;max-width:720px}
article li{margin:.28em 0}
article li::marker{color:#7c3aed}
.lead{font-size:1.08em;line-height:1.7;color:#374151;margin:.2em 0 .85em;max-width:720px}
.lead b,.lead strong{color:#111827}

/* callout: 先看结论 */
aside.callout,.callout{background:linear-gradient(135deg,#faf5ff 0%,#f8fafc 100%);border:1px solid #e9d5ff;border-left:4px solid #7c3aed;border-radius:10px;padding:14px 16px 14px 18px;margin:1em 0 1.35em;color:#374151;max-width:720px}
aside.callout>.callout-title,.callout>.callout-title,aside.callout>b:first-child,.callout>b:first-child{display:block;font-size:.92em;font-weight:700;color:#6d28d9;margin:0 0 .45em;letter-spacing:.02em}
aside.callout ul,.callout ul{margin:.35em 0 0;padding-left:1.2em}
aside.callout li,.callout li{margin:.22em 0;line-height:1.55}

/* pull quote */
blockquote.pull{margin:1.4em 0;padding:14px 18px 14px 22px;border-left:4px solid #2563eb;background:#eff6ff;border-radius:0 10px 10px 0;font-size:1.12em;line-height:1.55;color:#1e3a5f;font-weight:600;quotes:none;max-width:720px}
blockquote.pull p{margin:0;max-width:none}

/* comparison table polish */
article table{border-collapse:collapse;width:100%;max-width:720px;margin:1em 0 1.2em;font-size:.95em;overflow:hidden;border-radius:10px;border:1px solid #e5e7eb}
article th{background:#f5f3ff;color:#4c1d95;font-weight:650;text-align:left}
article td,article th{border:1px solid #e5e7eb;padding:8px 12px}
article tr:nth-child(even) td{background:#fafafa}

pre{background:#0f172a;color:#e2e8f0;padding:14px;border-radius:10px;overflow:auto;white-space:pre-wrap;margin:1em 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);max-width:720px}
code{background:#f1f5f9;padding:1px 5px;border-radius:4px;font-size:.92em}
pre code{background:none;padding:0;font-size:.9em}
.src{background:#f8fafc;border-left:4px solid #7c3aed;padding:12px 16px;margin-top:24px;border-radius:0 8px 8px 0;max-width:720px}
.src ul{margin:.4em 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.grid .card{margin-bottom:0;height:100%}
footer{color:#6b7280;text-align:center;font-size:.85em;padding:36px 0 40px}
footer .w{padding:0 20px}
main.w>h2{margin:1.6em 0 .75em;font-size:1.35em;color:#111827;letter-spacing:-.01em}

@media(max-width:600px){
  .w{padding:0 16px}
  header .w{padding:12px 16px}
  nav a{margin:0 12px 0 0}
  .hero{padding:20px 18px;margin-bottom:20px}
  .hero h1{font-size:1.4em}
  article{padding:18px 16px 22px}
  article h1{font-size:1.4em}
  article h2{font-size:1.12em}
  blockquote.pull{font-size:1.02em;padding:12px 14px}
  .lead{font-size:1.02em}
  .nl input{width:100%;max-width:none;margin-bottom:8px}
  .nl button{margin-left:0;width:100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
}

/* desktop comfort: slightly more side padding on mid widths */
@media(min-width:1024px){
  .w{padding:0 28px}
  header .w{padding:14px 28px}
}

/* === announcement bar === */
.announce{background:linear-gradient(90deg,#ede9fe,#eff6ff);border-bottom:1px solid #ddd6fe;font-size:.9em}
.announce[hidden]{display:none}
.announce-inner{display:flex;align-items:center;gap:10px;padding:10px 20px}
.announce-badge{flex-shrink:0;background:#7c3aed;color:#fff;border-radius:6px;padding:2px 8px;font-size:.75em;font-weight:600;letter-spacing:.02em}
.announce-text{margin:0;flex:1;color:#374151;line-height:1.5}
.announce-text a{color:#6d28d9;font-weight:600}
.announce-close{flex-shrink:0;border:0;background:transparent;color:#6b7280;font-size:1.25em;cursor:pointer;padding:0 4px;line-height:1;border-radius:4px}
.announce-close:hover{color:#111;background:#e9d5ff}
@media(max-width:600px){.announce-inner{padding:8px 16px;gap:8px}.announce-text{font-size:.92em}}

/* === advertise / ad-slots === */
.ad-slot,.ad{border:2px dashed #cbd5e1;color:#94a3b8;text-align:center;padding:22px;border-radius:12px;margin:18px 0;font-size:.85em;transition:border-color .15s,background .15s;min-height:48px}
.ad-slot a,.ad a{color:#7c3aed;font-weight:600;text-decoration:none}
.ad-slot a:hover,.ad a:hover{text-decoration:underline}
.ad-slot:hover,.ad:hover{border-color:#a78bfa;background:#faf5ff}
.ad-slot.ad-slot--live{border-style:solid;border-color:#e5e7eb;background:#fff;color:inherit;padding:8px;min-height:0}
.btn-contact{display:inline-block;background:#7c3aed;color:#fff!important;padding:10px 18px;border-radius:8px;font-weight:600;text-decoration:none!important}
.btn-contact:hover{background:#6d28d9;text-decoration:none!important}
/* === ad-slots: live network units === */
.ad-slot.ad-slot--live{padding:8px 8px 10px;overflow:hidden;max-width:100%}
.ad-slot.ad-slot--live:hover{border-color:#e5e7eb;background:#fff}
.ad-label{font-size:12px;line-height:1.4;color:#9ca3af;text-align:left;margin:0 0 6px;letter-spacing:.1em}
.ad-banner-wrap{width:100%;height:90px;margin:0 auto;overflow:hidden;position:relative}
.ad-banner{transform-origin:0 0}
.ad-banner iframe{max-width:none;border:0}
.ad-native{width:100%;max-width:100%;overflow:hidden}
.ad-native iframe,.ad-native img{max-width:100%}
@media (max-width:759px){.ad-banner{transform:scale(.45)}.ad-banner-wrap{height:41px}}
/* === ad-slots: empty slots take no space === */
.ad-slot:empty,.ad:empty{display:none!important}