:root{
  --primary:#0b6fd6; --primary-2:#14b8c4; --accent-grad:linear-gradient(120deg,#0b6fd6,#14b8c4);
  --bg:#ffffff; --bg-soft:#f4f9fd; --bg-soft-2:#eef5fb;
  --ink:#10263f; --muted:#65768a; --line:#d6e2ee;
  --ok:#0a8f3c; --warn:#d98a00; --err:#c0392b;
  --radius:14px; --shadow:0 10px 30px rgba(16,38,63,.08); --shadow-sm:0 4px 14px rgba(16,38,63,.06);
  --header-h:72px; --maxw:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; padding-top:var(--header-h); color:var(--ink); background:var(--bg);
  font-family:"PingFang SC","Microsoft YaHei",sans-serif; font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary); text-decoration:none; text-underline-offset:.22em;}
a:hover{text-decoration:underline;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #925900; outline-offset:3px;}
img{max-width:100%; height:auto;}
.container{width:min(var(--maxw),calc(100% - 40px)); margin-inline:auto;}
.skip{position:absolute; left:16px; top:-120px; z-index:50; background:#fff; padding:10px 14px; border-radius:8px; box-shadow:var(--shadow-sm);}
.skip:focus{top:10px;}

/* ===== 顶栏（固定） ===== */
.site-header{position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:40;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--header-h);}
.brand{font-weight:700; font-size:1.15rem; color:var(--ink); letter-spacing:.01em;}
.brand:hover{text-decoration:none;}
.site-nav{display:flex; align-items:center; gap:22px;}
.site-nav>a, .nav-toggle{color:var(--ink); font-size:.96rem; background:none; border:none; cursor:pointer; font-family:inherit; padding:6px 2px;}
.nav-group{position:relative;}
.nav-sub{list-style:none; margin:0; padding:10px 6px; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); min-width:140px; display:none; flex-direction:column; gap:2px;}
.nav-sub li a{display:block; padding:7px 12px; border-radius:8px; color:var(--ink);}
.nav-sub li a:hover{background:var(--bg-soft); text-decoration:none;}
.nav-group:hover .nav-sub, .nav-group.open .nav-sub{display:flex;}
#menu-toggle{display:none; border:1px solid var(--line); background:#fff; color:var(--ink); padding:9px 16px; border-radius:8px; cursor:pointer; font-family:inherit; font-size:.95rem;}

/* ===== 面包屑（左缘对齐 H2） ===== */
.bc-wrap{}
.breadcrumb{padding-left:var(--h2-inset,0); margin:18px 0 8px; font-size:.9rem; color:var(--muted);}
.breadcrumb ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; align-items:center;}
.breadcrumb li:not(:last-child)::after{content:"›"; margin-left:8px; color:var(--line);}
.breadcrumb a{color:var(--muted);}
.breadcrumb [aria-current="page"]{color:var(--ink); font-weight:600;}

/* ===== 文章 / 产品详情布局 ===== */
.article-layout{display:grid; grid-template-columns:minmax(0,760px) 240px; gap:40px; align-items:start; padding-bottom:48px;}
.article-main{min-width:0;}
.article-layout h1{font-size:clamp(1.8rem,3.4vw,2.5rem); line-height:1.3; margin:6px 0 10px; letter-spacing:-.01em;}
.article-cat{color:var(--muted); font-size:.9rem; margin:0 0 18px;}
.article-cat a{color:var(--primary);}
.summary-block{background:var(--bg-soft); border-left:4px solid var(--primary); padding:16px 18px; border-radius:0 12px 12px 0; color:var(--ink); margin:0 0 18px; font-size:1.02rem;}
.article-keywords{font-size:.92rem; color:var(--muted); margin:0 0 6px;}
.article-time{font-size:.85rem; color:var(--muted); margin:0 0 22px;}
.article-body{font-size:1.02rem;}
.article-body h2{font-size:1.5rem; margin:34px 0 14px; padding-top:6px; scroll-margin-top:90px;}
.article-body h3{font-size:1.2rem; margin:24px 0 10px; scroll-margin-top:90px;}
.article-body p{margin:0 0 16px;}
.article-body ul,.article-body ol{margin:0 0 16px; padding-left:1.4em;}
.article-body li{margin:6px 0;}
.article-body blockquote{margin:18px 0; padding:12px 16px; background:var(--bg-soft-2); border-left:4px solid var(--primary-2); border-radius:0 10px 10px 0; color:var(--ink);}
.article-body code{background:var(--bg-soft); padding:2px 6px; border-radius:6px; font-size:.92em;}
.article-body table{width:100%;}
.tag-text{display:inline-block; background:var(--bg-soft-2); color:var(--primary); border:1px solid var(--line); border-radius:999px; padding:2px 10px; font-size:.8rem;}

/* 表格 spec */
table.spec{border-collapse:collapse; width:100%; margin:14px 0 22px; font-size:.96rem; box-shadow:var(--shadow-sm); border-radius:12px; overflow:hidden;}
table.spec th, table.spec td{border:1px solid var(--line); padding:11px 14px; text-align:left; vertical-align:top;}
table.spec thead th{background:var(--accent-grad); color:#fff; font-weight:600;}
table.spec tbody tr:nth-child(even){background:var(--bg-soft);}

/* 结论 / 实践经验 callout */
.callout{margin:20px 0; padding:14px 18px; border-radius:12px; background:var(--bg-soft); border:1px solid var(--line);}
.callout.case{border-left:4px solid var(--primary-2);}
.callout-tag{display:inline-block; font-weight:700; color:var(--primary-2); margin-right:8px;}

/* FAQ 裸 details */
.faq{margin:26px 0;}
.faq details{border:1px solid var(--line); border-radius:12px; padding:0 16px; margin:10px 0; background:#fff; transition:box-shadow .2s ease;}
.faq details[open]{box-shadow:var(--shadow-sm);}
.faq summary{cursor:pointer; font-weight:600; padding:14px 0; list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"+"; color:var(--primary); font-weight:700; margin-right:10px; transition:transform .2s ease;}
.faq details[open] summary::before{content:"\2212";}
.faq .faq-a{padding:0 0 14px; color:var(--ink);}

/* 相关阅读 */
.related{margin:30px 0; padding:18px; background:var(--bg-soft); border-radius:14px;}
.related-title{font-size:1.2rem; margin:0 0 10px;}
.related-list{margin:0; padding-left:1.2em;}
.related-list li{margin:8px 0;}

/* TOC */
.toc-aside{position:sticky; top:calc(var(--header-h) + 16px); align-self:start; max-height:calc(100vh - var(--header-h) - 30px); overflow:auto;
  border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:#fff; box-shadow:var(--shadow-sm);}
.toc-title{font-size:.85rem; color:var(--muted); margin:0 0 8px; text-transform:uppercase; letter-spacing:.08em;}
.toc-nav{display:flex; flex-direction:column; gap:6px;}
.toc-nav a{color:var(--muted); font-size:.9rem; line-height:1.4; border-left:2px solid transparent; padding-left:8px;}
.toc-nav a:hover{color:var(--primary); border-left-color:var(--primary); text-decoration:none;}
.toc-l3{padding-left:20px; font-size:.85rem;}

/* ===== 列表页 ===== */
.list-layout{display:grid; grid-template-columns:240px minmax(0,1fr); gap:40px; padding-bottom:48px;}
.cat-side{position:sticky; top:calc(var(--header-h) + 16px); align-self:start; border:1px solid var(--line); border-radius:14px; padding:16px; background:#fff; box-shadow:var(--shadow-sm);}
.cat-side-title{font-weight:700; margin:0 0 10px; color:var(--ink);}
.category-list{list-style:none; margin:0; padding:0;}
.category-list li{margin:2px 0;}
.category-list a{display:block; padding:9px 12px; border-radius:9px; color:var(--ink);}
.category-list a:hover{background:var(--bg-soft); text-decoration:none;}
.category-list a.active{background:var(--accent-grad); color:#fff;}
.cat-content h1{font-size:clamp(1.7rem,3vw,2.3rem); margin:4px 0 14px;}
.cat-desc{color:var(--muted);}
.post-list{list-style:none; margin:18px 0 0; padding:0;}
.post-item{padding:18px 0; border-bottom:1px solid var(--line);}
.post-title{font-size:1.15rem; font-weight:600; color:var(--ink);}
.post-title:hover{color:var(--primary);}
.post-meta{display:flex; gap:12px; align-items:center; margin:6px 0; color:var(--muted); font-size:.85rem;}
.post-summary{color:var(--muted); margin:6px 0 0;}
.empty{color:var(--muted);}

/* ===== 首页 ===== */
.hero{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px; align-items:center; padding:54px 0 40px;}
.hero-copy{min-width:0;}
.eyebrow{color:var(--primary); font-size:.82rem; letter-spacing:.12em; font-weight:700; margin:0 0 12px;}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.2; margin:0 0 18px; letter-spacing:-.02em;}
.lead{color:var(--muted); max-width:40em; font-size:1.08rem; margin:0 0 26px;}
.actions{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.primary{display:inline-block; padding:13px 24px; color:#fff; background:var(--accent-grad); border-radius:10px; font-weight:600; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;}
.primary:hover{transform:translateY(-2px); box-shadow:var(--shadow); text-decoration:none;}
.secondary{color:var(--primary); font-weight:600; border-bottom:2px solid transparent;}
.secondary:hover{border-bottom-color:var(--primary); text-decoration:none;}
.hero-fig{margin:0; background:var(--bg-soft); padding:22px; border-radius:18px; box-shadow:var(--shadow-sm);}
.hero-fig svg{display:block; width:100%; height:auto;}
.figcaption{color:var(--muted); font-size:.85rem; margin-top:12px;}

.capabilities,.baseline,.scenes,.latest{padding:46px 0; border-top:1px solid var(--line);}
.capabilities h2,.baseline h2,.scenes h2,.latest h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:6px 0 22px;}
.cap-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.cap-list li{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;}
.cap-list li:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.cap-list h3{margin:0 0 8px; font-size:1.12rem; color:var(--ink);}
.cap-list p{margin:0; color:var(--muted); font-size:.95rem;}
.baseline .note{color:var(--muted); font-size:.88rem; margin-top:10px;}
.scene-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.scene-grid>div{background:var(--bg-soft); border-radius:14px; padding:18px; border:1px solid var(--line);}
.scene-grid h3{margin:0 0 6px; font-size:1.05rem;}
.scene-grid p{margin:0; color:var(--muted); font-size:.92rem;}
.latest-list{list-style:none; margin:10px 0 26px; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.latest-list li{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow-sm);}
.latest-list .tag-text{margin-left:8px;}
.latest-list p{margin:8px 0 0; color:var(--muted); font-size:.92rem;}

/* ===== 页脚 ===== */
.site-footer{background:var(--bg-soft); border-top:1px solid var(--line); margin-top:40px; padding:34px 0;}
.footer-inner{display:grid; grid-template-columns:1.2fr 1fr 1.2fr; gap:30px;}
.footer-brand{font-weight:700; color:var(--ink); margin:0 0 4px;}
.footer-sub{color:var(--muted); font-size:.9rem; margin:0;}
.footer-col nav{display:flex; flex-wrap:wrap; gap:10px 18px;}
.footer-col a{color:var(--ink); font-size:.92rem;}
.footer-col p{color:var(--muted); font-size:.9rem; margin:4px 0;}

/* ===== 悬浮胶囊 ===== */
.float-capsule{position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:35;
  display:flex; flex-direction:column; gap:10px; padding:10px; border-radius:999px;
  background:var(--accent-grad); box-shadow:0 12px 30px rgba(11,111,214,.35);}
.cap-btn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:54px; height:54px; border-radius:999px; background:rgba(255,255,255,.16); color:#fff; border:none; cursor:pointer; font-size:.72rem; font-family:inherit; text-decoration:none;}
.cap-btn:hover{background:rgba(255,255,255,.3); text-decoration:none; color:#fff;}
.cap-btn svg{display:block;}

/* 名片弹层 */
.wechat-modal[hidden]{display:none;}
.wechat-modal{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;}
.wechat-modal-backdrop{position:absolute; inset:0; background:rgba(16,38,63,.55);}
.wechat-modal-panel{position:relative; background:#fff; border-radius:16px; padding:14px; box-shadow:var(--shadow);}
.wechat-close{position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:999px; border:none; background:#fff; color:var(--ink); font-size:20px; line-height:1; cursor:pointer; box-shadow:var(--shadow-sm);}
.wechat-card{display:block; width:300px; height:500px; object-fit:contain; border-radius:8px;}
@media (max-width:380px){ .wechat-card{width:260px; height:433px;} }

/* 404 */
.notfound{padding:80px 0; text-align:center;}
.notfound h1{font-size:4rem; margin:0; color:var(--primary);}

/* ===== 响应式 ===== */
@media (max-width:900px){
  .article-layout{grid-template-columns:minmax(0,1fr);}
  .toc-aside{position:static; max-height:none; margin-top:18px;}
  .list-layout{grid-template-columns:minmax(0,1fr);}
  .cat-side{position:static;}
  .hero{grid-template-columns:minmax(0,1fr); gap:30px; padding:34px 0 24px;}
  .cap-list,.scene-grid,.latest-list{grid-template-columns:1fr 1fr;}
  .footer-inner{grid-template-columns:1fr;}
  #menu-toggle{display:block;}
  .js .site-nav{display:none; flex-direction:column; align-items:flex-start; gap:6px; width:100%;
    position:absolute; top:var(--header-h); left:0; right:0; background:#fff; border-bottom:1px solid var(--line); padding:14px 20px; box-shadow:var(--shadow);}
  .js .site-nav.open{display:flex;}
  .nav-group{width:100%;}
  .nav-sub{position:static; transform:none; box-shadow:none; border:none; padding:4px 0 4px 14px; min-width:0; background:transparent;}
  .nav-group:hover .nav-sub{display:none;}
  .nav-group.open .nav-sub{display:flex;}
  .float-capsule{right:10px;}
}
@media (max-width:560px){
  .cap-list,.scene-grid,.latest-list{grid-template-columns:1fr;}
  .container{width:calc(100% - 32px);}
}
@media (prefers-reduced-motion:no-preference){
  .cap-list li,.primary{animation:rise .5s ease both;}
  @keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}