/* ============================================================
   灯塔 Lighthouse 色彩系统 — 唯一色源
   ============================================================ */


*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font);background:var(--l-bg);color:var(--l-text);
  line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;line-height:1.3;color:var(--l-heading);font-weight:700;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:var(--l-link);text-decoration:none;}
a:hover{color:var(--l-link-hover);}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--l-focus);outline-offset:3px;border-radius:4px;}
img{max-width:100%;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px;}
.dark{background:var(--d-bg);color:var(--d-text);}
.dark h1,.dark h2,.dark h3{color:var(--d-heading);}
.dark a{color:var(--d-link);}
.dark a:hover{color:var(--d-link-hover);}
.dark a:focus-visible{outline-color:var(--d-accent);}

/* 3px 渐变发丝线 —— 深浅交界 */
.hairline{height:3px;width:100%;background:var(--grad-brand);border:0;margin:0;display:block;}

/* 跳到正文 */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:#FFFFFF;color:var(--l-link);padding:10px 16px;font-weight:700;border-radius:0 0 8px 0;
}
.skip:focus{left:0;}

/* ============================================================
   4. 阅读进度条（固定顶部）
   ============================================================ */
.progress-track{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:90;
  background:transparent;pointer-events:none;
}
.progress-bar{
  height:100%;width:100%;background:var(--grad-progress);
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

/* ============================================================
   1. 顶部导航（深色，同首页）
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;background:var(--d-bg);
  border-bottom:1px solid var(--d-border);
}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;min-height:60px;
}
.logo{
  font-size:20px;font-weight:800;letter-spacing:-.02em;color:#FFFFFF;
  display:inline-flex;align-items:center;gap:9px;
}
.logo:hover{color:#FFFFFF;}
.logo-dot{
  width:10px;height:10px;border-radius:50%;background:var(--d-accent);
  flex:none;box-shadow:0 0 0 4px rgba(63,224,208,.16);
}
.nav-links{display:none;}
.nav-links a{color:var(--d-text);font-size:15px;padding:8px 0;position:relative;font-weight:500;}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--d-accent);transform:scaleX(0);transition:transform .18s ease;transform-origin:left;
}
.nav-links a:hover{color:#FFFFFF;}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a.is-here{color:#FFFFFF;}
.nav-links a.is-here::after{transform:scaleX(1);}

.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:transparent;
  border:1px solid var(--d-border-strong);border-radius:8px;cursor:pointer;
}
.burger span{display:block;height:2px;background:var(--d-text);border-radius:2px;}
#navtoggle{position:absolute;opacity:0;pointer-events:none;}
.mobile-menu{display:none;border-top:1px solid var(--d-border);background:var(--d-bg-alt);}
#navtoggle:checked ~ .mobile-menu{display:block;}
.mobile-menu ul{max-width:var(--wrap);margin:0 auto;padding:8px 20px 16px;}
.mobile-menu li{border-bottom:1px solid var(--d-border);}
.mobile-menu li:last-child{border-bottom:0;}
.mobile-menu a{display:block;padding:14px 2px;font-size:16px;color:var(--d-text);font-weight:500;}

/* ============================================================
   2. 面包屑（完整不折叠，移动端横向滚动）
   ============================================================ */
.crumbs{background:var(--l-bg-alt);border-bottom:1px solid var(--l-border);}
.crumbs-scroll{
  max-width:var(--wrap);margin:0 auto;padding:11px 20px;
  overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.crumbs ol{display:inline-flex;align-items:center;gap:0;font-size:13.5px;}
.crumbs li{display:inline-flex;align-items:center;}
.crumbs a{color:var(--l-link);font-weight:500;}
.crumbs .sep{color:var(--n-400);padding:0 8px;user-select:none;}
.crumbs [aria-current="page"]{color:var(--l-text-muted);font-weight:600;}

/* ============================================================
   3. 文章头
   ============================================================ */
.arthead{background:var(--l-bg);padding:38px 0 30px;border-bottom:1px solid var(--l-border);}
.arthead-in{max-width:46em;}
.kicker{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--l-accent);margin-bottom:12px;
}
.art-h1{
  font-size:clamp(25px,5.6vw,40px);line-height:1.32;font-weight:800;
  letter-spacing:-.015em;margin-bottom:16px;
}
.art-orig{
  font-size:14.5px;color:var(--l-text-muted);line-height:1.75;margin-bottom:18px;
}
.art-orig b{color:var(--l-text);font-weight:600;}
.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;
  font-size:13.5px;color:var(--l-text-muted);margin-bottom:24px;
}
.art-meta .dot{color:var(--n-400);padding:0 9px;}
.badge-ever{
  font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;margin-left:9px;
  background:var(--l-accent-subtle);color:var(--l-accent);border:1px solid var(--cyan-200);
}

/* 作者卡 */
.author{
  display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--l-border);border-left:3px solid var(--cyan-400);
  border-radius:12px;padding:16px 18px;background:var(--l-bg);
}
.avatar{
  width:46px;height:46px;flex:none;border-radius:50%;
  background:var(--cyan-50);border:1px solid var(--cyan-200);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:800;color:var(--l-accent);
}
.author-name{font-size:16px;font-weight:700;color:var(--l-heading);line-height:1.5;}
.author-role{font-size:13px;color:var(--l-text-muted);font-weight:600;margin-top:1px;}
.author-bio{font-size:13.5px;color:var(--l-text-muted);line-height:1.7;margin-top:6px;}

/* ============================================================
   5+6. 正文区 + TOC 布局
   ============================================================ */
.layout{
  max-width:var(--wrap);margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:1fr;gap:0;
}
.main{padding:30px 0 60px;min-width:0;}

/* 移动端 TOC：可折叠 */
.toc-m{
  border:1px solid var(--l-border);border-radius:12px;
  background:var(--l-bg-alt);margin-bottom:28px;overflow:hidden;
}
.toc-m summary{
  list-style:none;cursor:pointer;padding:13px 16px;
  font-size:14.5px;font-weight:700;color:var(--l-heading);
  display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;
}
.toc-m summary::-webkit-details-marker{display:none;}
.toc-m summary .cnt{font-size:12.5px;font-weight:600;color:var(--l-text-muted);}
.toc-m summary .caret{color:var(--l-accent);font-size:12px;transition:transform .18s ease;}
.toc-m[open] summary .caret{transform:rotate(180deg);}
.toc-m .toc-body{padding:2px 16px 16px;border-top:1px solid var(--l-border);}

/* 桌面端 TOC：右侧固定 */
.toc-d{display:none;}

.toc-title{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--l-text-muted);margin-bottom:12px;
}
.toc-list li{margin:0;}
.toc-link{
  display:block;padding:7px 0 7px 13px;font-size:14px;line-height:1.6;
  color:var(--l-text-muted);border-left:2px solid var(--l-border);font-weight:500;
}
.toc-link:hover{color:var(--l-link-hover);border-left-color:var(--cyan-300);}
.toc-link.is-active{color:var(--l-accent);border-left-color:var(--cyan-600);font-weight:700;}
.toc-list .lv3 .toc-link{padding-left:26px;font-size:13.5px;}

/* ============================================================
   正文排版
   ============================================================ */
/* 行宽 38em 由子元素承担；表格/代码块允许占满整列 */
.prose{max-width:none;}
.prose > p,.prose > .h2,.prose > .h3,
.prose > .olist,.prose > .quote,.prose > .shot{max-width:var(--prose);}
.prose > .tablewrap,.prose > .code{max-width:calc(var(--prose) + 128px);}
.prose > p{margin:0 0 1.35em;font-size:17px;line-height:1.85;color:var(--l-text);}
.prose > p:last-child{margin-bottom:0;}
.prose b,.prose strong{font-weight:700;color:var(--l-heading);}
.prose p code{
  font-family:var(--mono);font-size:.86em;padding:2px 6px;border-radius:5px;
  background:var(--l-code-bg);border:1px solid var(--l-border);color:var(--l-text);
}
.prose a{font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--cyan-300);}
.prose a:hover{text-decoration-color:var(--l-link-hover);}

.h2{
  font-size:clamp(21px,4.6vw,28px);font-weight:800;letter-spacing:-.01em;
  margin:2.2em 0 .85em;padding-top:.2em;scroll-margin-top:84px;
}
.prose > .h2:first-child{margin-top:0;}
.h3{
  font-size:clamp(17.5px,3.8vw,21px);font-weight:700;
  margin:1.9em 0 .7em;scroll-margin-top:84px;color:var(--l-heading);
}
.h3::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:2px;
  background:var(--cyan-500);margin-right:9px;vertical-align:middle;
}

/* 有序列表 */
.olist{counter-reset:st;margin:0 0 1.6em;}
.olist li{
  counter-increment:st;position:relative;padding-left:38px;margin-bottom:.85em;
  font-size:16.5px;line-height:1.8;color:var(--l-text);
}
.olist li::before{
  content:counter(st);position:absolute;left:0;top:.15em;
  width:25px;height:25px;border-radius:50%;
  background:var(--l-accent-subtle);border:1px solid var(--cyan-200);
  color:var(--l-accent);font-size:13px;font-weight:700;line-height:23px;text-align:center;
}
.olist li b{display:block;color:var(--l-heading);}

/* 引用块 */
.quote{
  margin:1.9em 0;padding:20px 22px;background:var(--l-bg-alt);
  border-left:4px solid var(--cyan-500);border-radius:0 10px 10px 0;
}
.quote p{font-size:18px;line-height:1.8;font-weight:700;color:var(--l-heading);letter-spacing:-.005em;}
.quote cite{
  display:block;margin-top:10px;font-style:normal;font-size:13.5px;
  color:var(--l-text-muted);font-weight:600;
}

/* 截图裱框 */
.shot{margin:2em 0;}
.shot-mat{
  background:var(--l-sunken);padding:16px;border-radius:12px;
}
.shot-frame{
  border:1px solid var(--l-border-strong);border-radius:6px;background:var(--l-bg);
  min-height:200px;display:flex;flex-direction:column;overflow:hidden;
}
.shot-bar{
  display:flex;align-items:center;gap:6px;padding:9px 12px;
  border-bottom:1px solid var(--l-border);background:var(--l-bg-alt);
}
.shot-dot{width:9px;height:9px;border-radius:50%;background:var(--n-300);flex:none;}
.shot-url{
  margin-left:8px;font-size:11.5px;color:var(--l-text-muted);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shot-body{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:34px 18px;text-align:center;
}
.shot-ph{font-size:13.5px;color:var(--l-text-muted);font-weight:600;line-height:1.7;}
.shot-ph small{display:block;font-size:12.5px;font-weight:500;margin-top:4px;color:var(--n-500);}
.shot figcaption{
  display:block;margin-top:11px;font-size:13px;line-height:1.75;color:var(--l-text-muted);
  border-left:2px solid var(--l-border);padding-left:11px;
}

/* 代码块 */
.code{
  margin:1.8em 0;border:1px solid var(--l-border);border-radius:10px;
  background:var(--l-code-bg);overflow:hidden;
}
.code-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;border-bottom:1px solid var(--l-border);
  font-size:12px;font-weight:700;color:var(--l-text-muted);
  letter-spacing:.05em;text-transform:uppercase;
}
.code pre{
  margin:0;padding:16px 14px;overflow-x:auto;
  font-family:var(--mono);font-size:13px;line-height:1.75;color:var(--l-text);
  -webkit-overflow-scrolling:touch;
}
.code .k{color:var(--cyan-900);font-weight:700;}
.code .c{color:var(--l-text-muted);}

/* 表格 */
.tablewrap{
  margin:1.9em 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--l-border);border-radius:10px;
}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px;}
caption{
  caption-side:bottom;text-align:left;padding:10px 14px;
  font-size:12.5px;color:var(--l-text-muted);line-height:1.7;
}
th,td{padding:12px 14px;text-align:left;vertical-align:top;line-height:1.7;}
thead th{
  background:var(--l-sunken);color:var(--l-heading);font-weight:700;font-size:13.5px;
  border-bottom:2px solid var(--l-border-strong);white-space:nowrap;
}
tbody tr{border-bottom:1px solid var(--l-border);}
tbody tr:last-child{border-bottom:0;}
tbody th{font-weight:700;color:var(--l-heading);white-space:nowrap;}
tbody td{color:var(--l-text);}
td .no{color:var(--l-danger);font-weight:700;}
td .yes{color:var(--l-success);font-weight:700;}

/* 内容时效提示 */
.stale{
  margin:0 0 30px;padding:16px 18px;background:var(--l-sunken);
  border-left:4px solid var(--l-warning);border-radius:0 10px 10px 0;
}
.stale-t{
  font-size:14.5px;font-weight:700;color:var(--l-warning);
  display:flex;align-items:center;gap:8px;margin-bottom:7px;
}
.stale p{font-size:14.5px;line-height:1.8;color:var(--l-text);}
.stale p + p{margin-top:8px;}
.stale em{font-style:normal;color:var(--l-text-muted);}

/* ============================================================
   8. 连载导航条
   ============================================================ */
.serial{background:var(--l-bg-alt);border-top:1px solid var(--l-border);border-bottom:1px solid var(--l-border);padding:34px 0;}
.serial-head{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--l-text-muted);margin-bottom:16px;
}
.serial-head b{color:var(--l-accent);letter-spacing:.06em;}
.serial-grid{display:grid;grid-template-columns:1fr;gap:14px;}
.serial-item{
  background:var(--l-bg);border:1px solid var(--l-border);border-radius:12px;
  padding:18px 20px;display:flex;flex-direction:column;gap:7px;
  transition:border-color .18s ease,transform .18s ease;
}
.serial-item:hover{border-color:var(--cyan-300);transform:translateY(-2px);}
.serial-dir{font-size:12.5px;font-weight:700;color:var(--l-accent);letter-spacing:.04em;}
.serial-t{font-size:16.5px;font-weight:700;line-height:1.55;color:var(--l-heading);}
.serial-item:hover .serial-t{color:var(--l-link-hover);}
.serial-x{font-size:13px;color:var(--l-text-muted);line-height:1.7;}
.serial-next{text-align:right;align-items:flex-end;}

/* ============================================================
   9. 文末 CTA（深色出血）
   ============================================================ */
.cta{position:relative;background:var(--d-bg);min-height:320px;padding:60px 0 56px;overflow:hidden;}
.cta::before{content:"";position:absolute;inset:0;background:var(--grad-glow);pointer-events:none;}
.cta-in{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:1fr;gap:32px;align-items:center;}
.cta-lamp{
  color:#FFFFFF;font-weight:800;font-size:clamp(24px,5.6vw,36px);line-height:1.45;
  letter-spacing:-.01em;margin-bottom:16px;
}
.cta-lead{color:var(--d-text);font-size:16px;line-height:1.85;max-width:32em;margin-bottom:14px;}
.cta-note{color:var(--d-text-muted);font-size:14px;line-height:1.8;max-width:32em;margin-bottom:26px;}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:999px;font-size:16px;font-weight:700;
  min-height:48px;cursor:pointer;border:1px solid transparent;
  transition:transform .16s ease,box-shadow .16s ease;
}
.btn-grad{background:var(--grad-brand);color:var(--l-cta-text);box-shadow:0 6px 22px -8px rgba(63,224,208,.5);}
.btn-grad:hover{color:var(--l-cta-text);transform:translateY(-2px);box-shadow:0 10px 28px -8px rgba(63,224,208,.6);}
.btn-ghost{background:transparent;color:var(--d-text);border-color:var(--d-border-strong);}
.btn-ghost:hover{color:#FFFFFF;border-color:var(--d-accent);transform:translateY(-2px);}

/* 二维码占位 —— 深色区必须 1px 边框分层 */
.qr-card{
  background:var(--d-surface);border:1px solid var(--d-border-strong);border-radius:16px;
  padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:250px;
}
.qr-box{
  width:170px;height:170px;background:#FFFFFF;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--n-300);
}
.qr-mark{
  width:52px;height:52px;border:3px solid var(--ink-950);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
}
.qr-mark span{width:18px;height:18px;background:var(--ink-950);border-radius:2px;display:block;}
.qr-ph{font-size:12.5px;color:var(--l-text-muted);font-weight:600;}
.qr-cap{font-size:13px;color:var(--d-text);text-align:center;line-height:1.7;}
.qr-cap b{color:#FFFFFF;display:block;font-weight:700;}

/* ============================================================
   10. 相关文章
   ============================================================ */
.sec{padding:56px 0;}
.sec-white{background:var(--l-bg);}
.sec-head{margin-bottom:26px;}
.sec-kicker{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--l-accent);margin-bottom:9px;}
.sec-title{font-size:clamp(22px,5vw,30px);letter-spacing:-.01em;font-weight:800;}
.sec-desc{color:var(--l-text-muted);font-size:15px;margin-top:9px;max-width:var(--prose);}
.grid3{display:grid;grid-template-columns:1fr;gap:16px;}
.card{
  background:var(--l-bg);border:1px solid var(--l-border);border-radius:14px;
  padding:22px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.card:hover{border-color:var(--cyan-200);box-shadow:0 12px 28px -18px rgba(10,18,32,.45);transform:translateY(-2px);}
.chip{
  align-self:flex-start;font-size:12px;font-weight:700;line-height:1.5;padding:3px 10px;border-radius:999px;
  background:var(--l-accent-subtle);color:var(--l-accent);border:1px solid var(--cyan-200);
}
.card-title{font-size:17px;font-weight:700;line-height:1.55;color:var(--l-heading);}
.card:hover .card-title{color:var(--l-link-hover);}
.card-ex{
  color:var(--l-text-muted);font-size:14px;line-height:1.75;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:4px;font-size:12px;color:var(--l-text-muted);}
.tag{font-size:12px;font-weight:600;padding:2px 9px;border-radius:6px;background:var(--l-sunken);color:var(--l-text-muted);}
.tag-ever{background:var(--cyan-50);color:var(--l-accent);}

/* ============================================================
   11. 页脚
   ============================================================ */
.footer{background:var(--d-bg);padding:52px 0 40px;min-height:320px;}
.footer-lamp{color:#FFFFFF;font-weight:800;font-size:clamp(22px,5vw,34px);line-height:1.45;letter-spacing:-.01em;max-width:16em;margin-bottom:20px;}
.footer-mission{color:var(--d-text);font-size:16px;line-height:1.85;max-width:var(--prose);}
.footer-mission b{color:#FFFFFF;}
.footer-motto{color:var(--d-accent);font-size:15px;font-weight:700;font-style:italic;letter-spacing:.02em;margin-top:10px;}
.footer-rule{height:1px;background:var(--d-border);border:0;margin:32px 0 24px;}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:22px;}
.footer-nav a{font-size:14.5px;color:var(--d-text);font-weight:500;}
.footer-nav a:hover{color:var(--d-link-hover);}
.footer-sign{color:var(--d-text-muted);font-size:13.5px;line-height:1.8;}
.footer-cr{color:var(--d-text-muted);font-size:13px;margin-top:14px;}

/* ============================================================
   响应式
   ============================================================ */
@media (min-width:640px){
  .grid3{grid-template-columns:repeat(2,1fr);}
  .serial-grid{grid-template-columns:1fr 1fr;}
}
@media (min-width:860px){
  body{font-size:17px;}
  .nav-links{display:flex;align-items:center;gap:26px;}
  .burger{display:none;}
  .mobile-menu{display:none !important;}
  .nav-inner{min-height:68px;}
  .arthead{padding:52px 0 40px;}
  .grid3{grid-template-columns:repeat(3,1fr);}
  .sec{padding:72px 0;}
  .cta{padding:76px 0 70px;}
  .cta-in{grid-template-columns:1fr auto;gap:52px;align-items:center;}
  .serial{padding:44px 0;}
}
@media (min-width:1040px){
  .layout{grid-template-columns:minmax(0,1fr) 250px;gap:56px;align-items:start;}
  .main{padding:44px 0 76px;}
  .toc-m{display:none;}
  .toc-d{
    display:block;position:sticky;top:88px;padding:44px 0 0;
    max-height:calc(100vh - 110px);overflow-y:auto;
  }
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important;}
}

/* ── 其余页面样式（去重合并）── */
/* ============================================================
   灯塔 Lighthouse 色彩系统 — 唯一色源，不自创色值
   ============================================================ */


*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;font-family:var(--font);background:var(--l-bg);color:var(--l-text);
  line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}

h1,h2,h3,h4{margin:0;line-height:1.3;color:var(--l-heading);font-weight:700;}

p{margin:0;}

ul{margin:0;padding:0;list-style:none;}

a{color:var(--l-link);text-decoration:none;}

a:hover{color:var(--l-link-hover);}

a:focus-visible,button:focus-visible{outline:2px solid var(--l-focus);outline-offset:3px;border-radius:4px;}

img{max-width:100%;}

:target{scroll-margin-top:calc(var(--navh) + 12px);}

[id]{scroll-margin-top:calc(var(--navh) + 12px);}


.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px;}


/* 深色区通用：整幅出血 */
.dark{background:var(--d-bg);color:var(--d-text);}

.dark h1,.dark h2,.dark h3{color:var(--d-heading);}

.dark a{color:var(--d-link);}

.dark a:hover{color:var(--d-link-hover);}

.dark a:focus-visible,.dark button:focus-visible{outline-color:var(--d-accent);}

/* 铁律1：渐变底上只能是深墨 #0A1220。以下覆盖必须压过 .dark a。 */
.dark .btn-grad,.dark .btn-grad:hover{color:var(--l-cta-text);}

.dark .btn-ghost{color:var(--d-text);}

.dark .btn-ghost:hover{color:#FFFFFF;}

.dark .logo,.dark .logo:hover{color:#FFFFFF;}


/* 3px 渐变发丝线 */
.hairline{height:3px;width:100%;background:var(--grad-brand);border:0;margin:0;display:block;}


/* ============================================================
   1. 顶部导航（深色 sticky）
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;background:var(--d-bg);
  border-bottom:1px solid var(--d-border);
}

.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--navh);
}

.logo{
  font-size:20px;font-weight:800;letter-spacing:-.02em;color:#FFFFFF;
  display:inline-flex;align-items:center;gap:9px;
}

.logo:hover{color:#FFFFFF;}

.logo-dot{
  width:10px;height:10px;border-radius:50%;background:var(--d-accent);
  flex:none;box-shadow:0 0 0 4px rgba(63,224,208,.16);
}

.nav-links{display:none;}

.nav-links a{
  color:var(--d-text);font-size:15px;padding:8px 0;position:relative;font-weight:500;
}

.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--d-accent);transform:scaleX(0);transition:transform .18s ease;transform-origin:left;
}

.nav-links a:hover{color:#FFFFFF;}

.nav-links a:hover::after{transform:scaleX(1);}


.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:transparent;
  border:1px solid var(--d-border-strong);border-radius:8px;cursor:pointer;
}

.burger span{display:block;height:2px;background:var(--d-text);border-radius:2px;transition:transform .2s,opacity .2s;}

.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}

.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}

.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}


.mobile-menu{display:none;border-top:1px solid var(--d-border);background:var(--d-bg-alt);}

.mobile-menu.open{display:block;}

.mobile-menu ul{max-width:var(--wrap);margin:0 auto;padding:8px 20px 16px;}

.mobile-menu li{border-bottom:1px solid var(--d-border);}

.mobile-menu li:last-child{border-bottom:0;}

.mobile-menu a{display:block;padding:14px 2px;font-size:16px;color:var(--d-text);font-weight:500;}

.mobile-menu a:hover{color:var(--d-link-hover);}


/* ============================================================
   2. Hero（深色出血 + grad-glow 氛围光）
   ============================================================ */
.hero{
  position:relative;background:var(--d-bg);min-height:420px;
  padding:60px 0 54px;overflow:hidden;
}

.hero::before{
  content:"";position:absolute;inset:0;background:var(--grad-glow);pointer-events:none;
}

.hero-inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 20px;}


.hero-eyebrow-row{margin:0 0 24px;}

.hero-eyebrow{
  display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--d-text-muted);border:1px solid var(--d-border);border-radius:999px;
  padding:5px 14px;font-weight:600;
}

/* 渐变文字：仅英文、≥48px、字重≥700。中文一律不上渐变。 */
.hero-en{
  font-size:clamp(48px,10.5vw,86px);
  line-height:1.05;font-weight:800;font-style:italic;letter-spacing:-.035em;
  color:var(--cyan-300);
  margin:0 0 20px;padding-right:.08em;display:inline-block;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-en{
    background:var(--grad-brand);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }

.hero-cn{
  color:#FFFFFF;font-weight:800;letter-spacing:.01em;
  font-size:clamp(26px,6.2vw,44px);line-height:1.35;margin:0 0 14px;
}

.hero-sub{
  color:var(--d-text-muted);font-size:clamp(12px,2.9vw,15px);
  letter-spacing:.24em;text-transform:uppercase;font-weight:600;line-height:1.7;
  margin:0 0 26px;
}

.hero-id{
  color:var(--d-text);font-size:16px;line-height:1.8;max-width:var(--prose);margin:0 0 34px;
}

.hero-id b{color:#FFFFFF;font-weight:700;}

.dotsep{color:var(--d-accent);padding:0 6px;}


.cta-row{display:flex;flex-wrap:wrap;gap:14px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:999px;font-size:16px;font-weight:700;
  min-height:48px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
  border:1px solid transparent;
}

/* 渐变按钮：渐变底 + 深墨字 #0A1220（11.41–13.43:1） */
.btn-grad{
  background:var(--grad-brand);color:var(--l-cta-text);
  box-shadow:0 6px 22px -8px rgba(63,224,208,.5);
}

.btn-grad:hover{color:var(--l-cta-text);transform:translateY(-2px);box-shadow:0 10px 28px -8px rgba(63,224,208,.6);}

.btn-ghost{background:transparent;color:var(--d-text);border-color:var(--d-border-strong);}

.btn-ghost:hover{color:#FFFFFF;border-color:var(--d-accent);transform:translateY(-2px);}


/* ============================================================
   4. 数据陈述条（深色，与 hero 同属一整幅深色区）
   ============================================================ */
.stats{
  background:var(--d-bg);padding:40px 0 48px;
  min-height:320px;display:flex;align-items:center; /* 铁律9：深色出血区高≥320px */
}

.stats-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px 16px;
  width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px;
}

.stat-num{
  color:var(--d-accent);font-size:clamp(24px,6vw,34px);font-weight:800;
  line-height:1.15;letter-spacing:-.02em;display:block;
}

.stat-num small{font-size:.55em;font-weight:700;margin-left:2px;letter-spacing:0;}

.stat-lb{color:var(--d-text-muted);font-size:13px;line-height:1.6;margin-top:6px;display:block;}


/* ============================================================
   5. 精选文章（浅色阅读场景）
   ============================================================ */
.sec{padding:60px 0;}

.sec-white{background:var(--l-bg);}

.sec-alt{background:var(--l-bg-alt);}


.sec-head{margin-bottom:32px;}

.sec-kicker{
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--l-accent);margin-bottom:10px;
}

.sec-title{font-size:clamp(24px,5.4vw,34px);letter-spacing:-.01em;font-weight:800;}

.sec-desc{color:var(--l-text-muted);font-size:15px;margin-top:10px;max-width:var(--prose);}


.grid2{display:grid;grid-template-columns:1fr;gap:18px;}


.card{
  background:var(--l-bg);border:1px solid var(--l-border);border-radius:14px;
  padding:22px;display:flex;flex-direction:column;gap:11px;color:var(--l-text);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.card:hover{border-color:var(--cyan-200);box-shadow:0 12px 28px -18px rgba(10,18,32,.45);transform:translateY(-2px);color:var(--l-text);}

.sec-alt .card{background:#FFFFFF;}


.chip{
  align-self:flex-start;font-size:12px;font-weight:700;line-height:1.5;
  padding:3px 10px;border-radius:999px;
  background:var(--l-accent-subtle);color:var(--l-accent);border:1px solid var(--cyan-200);
}

.card-title{font-size:18px;font-weight:700;line-height:1.55;color:var(--l-heading);letter-spacing:-.005em;}

.card:hover .card-title{color:var(--l-link-hover);}

.card-ex{
  color:var(--l-text-muted);font-size:14.5px;line-height:1.75;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.card-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:4px;
  font-size:12px;color:var(--l-text-muted);
}

.tag{font-size:12px;font-weight:600;padding:2px 9px;border-radius:6px;background:var(--l-sunken);color:var(--l-text-muted);}

.tag-ever{background:var(--cyan-50);color:var(--l-accent);}

.tag-long{background:transparent;color:var(--l-text-muted);border:1px solid var(--l-border-strong);}

.card-first{border-color:var(--cyan-300);}

.card-first .card-title{font-size:20px;}


/* ============================================================
   6. 两大系列入口
   ============================================================ */
.series{display:grid;grid-template-columns:1fr;gap:20px;}

.series-card{
  background:#FFFFFF;border:1px solid var(--l-border);border-radius:16px;padding:28px 24px;
  display:flex;flex-direction:column;gap:16px;
}

.series-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}

.series-name{font-size:22px;font-weight:800;letter-spacing:-.01em;}

.series-count{font-size:13px;color:var(--l-text-muted);font-weight:600;white-space:nowrap;}

.series-lead{color:var(--l-text-muted);font-size:14.5px;line-height:1.8;}

.subs{display:flex;flex-wrap:wrap;gap:8px;}

.sub{
  font-size:13px;padding:6px 12px;border-radius:8px;background:var(--l-sunken);
  color:var(--l-text);font-weight:500;border:1px solid transparent;
}

.sub b{color:var(--l-accent);font-weight:700;margin-left:4px;}

.sub-wip{background:#FFFFFF;border-color:var(--l-border-strong);color:var(--l-text-muted);}

.sub-wip b{color:var(--l-warning);}

.wip-note{font-size:13px;color:var(--l-warning);line-height:1.7;border-left:3px solid var(--l-warning);padding-left:12px;}

.series-link{font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:6px;margin-top:auto;}


/* ============================================================
   7. 蕾蕾的故事
   ============================================================ */
.story-grid{display:grid;grid-template-columns:1fr;gap:16px;}

.story{
  border:1px solid var(--l-border);border-left:3px solid var(--cyan-400);
  border-radius:12px;padding:20px 22px;background:#FFFFFF;display:block;
  transition:border-color .18s,transform .18s;
}

.story:hover{transform:translateY(-2px);border-color:var(--cyan-300);border-left-color:var(--lime-500);}

.story-t{font-size:17px;font-weight:700;line-height:1.5;margin-bottom:8px;}

.story:hover .story-t{color:var(--l-link-hover);}

.story-x{font-size:14px;color:var(--l-text-muted);line-height:1.75;}

.sec-more{margin-top:24px;}

.sec-more a{font-weight:700;font-size:15px;}


/* ============================================================
   8. 社会证明条
   ============================================================ */
.proof{
  background:var(--l-sunken);border-top:1px solid var(--l-border);border-bottom:1px solid var(--l-border);
  padding:36px 0;
}

.proof-grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:var(--wrap);margin:0 auto;padding:0 20px;}

.proof-item{display:flex;gap:14px;align-items:flex-start;}

.proof-n{font-size:26px;font-weight:800;color:var(--l-accent);line-height:1.2;flex:none;min-width:62px;}

.proof-n small{font-size:.55em;font-weight:700;}

.proof-t{display:block;font-size:15px;font-weight:700;color:var(--l-heading);line-height:1.5;}

.proof-d{display:block;font-size:13.5px;color:var(--l-text-muted);line-height:1.7;margin-top:2px;}

.proof-cta{max-width:var(--wrap);margin:22px auto 0;padding:0 20px;}

.proof-cta a{font-weight:700;}


/* ============================================================
   9. 页脚（深色出血）
   ============================================================ */
.footer{background:var(--d-bg);padding:56px 0 40px;min-height:320px;}

.footer-lamp{
  color:#FFFFFF;font-weight:800;font-size:clamp(23px,5.4vw,38px);line-height:1.45;
  letter-spacing:-.01em;max-width:16em;margin-bottom:22px;
}

.footer-mission{color:var(--d-text);font-size:16px;line-height:1.85;max-width:var(--prose);}

.footer-mission b{color:#FFFFFF;}

.footer-motto{color:var(--d-accent);font-size:15px;font-weight:700;font-style:italic;letter-spacing:.02em;margin-top:10px;}

.footer-rule{height:1px;background:var(--d-border);border:0;margin:34px 0 26px;}

.footer-nav{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:24px;}

.footer-nav a{font-size:14.5px;color:var(--d-text);font-weight:500;}

.footer-nav a:hover{color:var(--d-link-hover);}

.footer-sign{color:var(--d-text-muted);font-size:13.5px;line-height:1.8;}

.footer-cr{color:var(--d-text-muted);font-size:13px;margin-top:14px;}


/* ============================================================
   响应式（手机优先）
   ============================================================ */
@media (min-width:600px){
  .stats-grid{grid-template-columns:repeat(3,1fr);}

  .story-grid{grid-template-columns:repeat(3,1fr);}

@media (min-width:860px){
  
  body{font-size:17px;}

  .sec{padding:84px 0;}

  .hero{padding:96px 0 72px;min-height:520px;}

  .series{grid-template-columns:1fr 1fr;gap:24px;}

  .card-first .card-ex{font-size:15.5px;}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important;}

ul,ol{margin:0;padding:0;list-style:none;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:#FFFFFF;color:var(--l-link);padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;
}

.skip:focus{left:0;}

/* 铁律1 + 层叠陷阱：.dark a{color:cyan}
 会覆盖 .btn-grad{color:ink}
。
   下面各条特异性 0-2-0，显式压过 .dark a（0-1-1），保证渐变底上永远是深墨。 */
.dark .btn-grad,.dark .btn-grad:hover{color:var(--l-cta-text);}

.dark .cta-card,.dark .cta-card:hover{color:var(--d-text);}

.dark .cta-card .cta-card-t{color:#FFFFFF;}


/* 3px 渐变发丝线（铁律5：深浅交界） */
.hairline{height:3px;width:100%;background:var(--grad-brand);border:0;margin:0;display:block;}


/* ============================================================
   1. 顶部导航（深色 sticky）— 新 5 项
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;background:var(--d-bg);
  border-bottom:1px solid var(--d-border);
}

/* 当前页高亮 */
.nav-links a[aria-current="page"]{color:#FFFFFF;font-weight:700;}

.nav-links a[aria-current="page"]::after{transform:scaleX(1);}

.mobile-menu a[aria-current="page"]{color:#FFFFFF;font-weight:700;}


/* ============================================================
   2. Hero（深色出血 ≥320px + grad-glow）
   本屏渐变用量 = grad-glow(1) + 英文渐变字(1) = 2，不设渐变按钮。
   ============================================================ */
.hero{
  position:relative;background:var(--d-bg);min-height:420px;
  padding:56px 0 52px;overflow:hidden;
}

/* 铁律2：渐变文字仅限英文、≥40px、字重≥700。中文任何字号都不上渐变。 */
.hero-en{
  font-size:clamp(40px,9vw,76px);
  line-height:1.08;font-weight:800;font-style:italic;letter-spacing:-.035em;
  color:var(--cyan-300);
  margin:0 0 18px;padding-right:.08em;display:inline-block;
}

.hero-realname{
  color:var(--d-text-muted);font-size:clamp(13.5px,3vw,15px);
  letter-spacing:.04em;font-weight:600;line-height:1.9;margin:0 0 24px;
  display:flex;flex-wrap:wrap;gap:4px 18px;
}

.hero-realname span{white-space:nowrap;}

.hero-realname b{color:var(--d-accent);font-weight:800;letter-spacing:.02em;}


/* ============================================================
   通用浅色区
   ============================================================ */
.sec{padding:56px 0;}


/* ============================================================
   4. 身份三件套（搜索消歧：本名 / 人称 / 英文名）
   ============================================================ */
.names{display:grid;grid-template-columns:1fr;gap:14px;}

.name-card{
  background:#FFFFFF;border:1px solid var(--l-border);border-radius:14px;
  padding:22px;display:flex;flex-direction:column;gap:6px;
}

.name-kind{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--l-accent);
}

.name-val{font-size:clamp(26px,6vw,32px);font-weight:800;color:var(--l-heading);letter-spacing:-.01em;line-height:1.25;}

.name-note{font-size:14px;color:var(--l-text-muted);line-height:1.75;}

.names-foot{
  margin-top:18px;font-size:14.5px;color:var(--l-text-muted);line-height:1.8;
  max-width:var(--prose);
}


/* ============================================================
   5. 可验证成果
   ============================================================ */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}

.fact{
  background:#FFFFFF;border:1px solid var(--l-border);border-radius:14px;padding:20px;
  display:flex;flex-direction:column;gap:4px;
}

.fact-n{
  font-size:clamp(24px,6vw,32px);font-weight:800;color:var(--l-accent);
  line-height:1.15;letter-spacing:-.02em;
}

.fact-n small{font-size:.5em;font-weight:700;margin-left:2px;letter-spacing:0;}

.fact-t{font-size:14.5px;font-weight:700;color:var(--l-heading);line-height:1.55;}

.fact-d{font-size:13px;color:var(--l-text-muted);line-height:1.7;}

.facts-note{
  margin-top:18px;font-size:13.5px;color:var(--l-text-muted);line-height:1.8;
  border-left:3px solid var(--l-border-strong);padding-left:14px;max-width:var(--prose);
}


/* ============================================================
   6. 职业线
   ============================================================ */
.path{border-left:2px solid var(--l-border);padding-left:22px;display:flex;flex-direction:column;gap:24px;}

.step{position:relative;}

.step::before{
  content:"";position:absolute;left:-29px;top:9px;width:11px;height:11px;border-radius:50%;
  background:var(--l-bg-alt);border:2px solid var(--cyan-500);
}

.step-now::before{background:var(--cyan-400);border-color:var(--cyan-700);}

.step-y{
  font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--l-accent);
  display:block;margin-bottom:3px;
}

.step-t{font-size:17px;font-weight:700;color:var(--l-heading);line-height:1.5;}

.step-d{font-size:14.5px;color:var(--l-text-muted);line-height:1.8;margin-top:5px;max-width:var(--prose);}

.path-kicker{
  margin-top:26px;background:var(--l-accent-subtle);border:1px solid var(--cyan-200);
  border-radius:12px;padding:18px 20px;font-size:15px;line-height:1.8;color:var(--l-text);
  max-width:var(--prose);
}

.path-kicker b{color:var(--l-accent);font-weight:700;}


/* ============================================================
   7. 我相信什么
   ============================================================ */
.quote{
  border-left:3px solid var(--cyan-400);padding:2px 0 2px 22px;
  font-size:clamp(19px,4.4vw,25px);line-height:1.65;font-weight:700;color:var(--l-heading);
  max-width:22em;letter-spacing:-.005em;
}

.quote-by{
  margin-top:14px;font-size:13.5px;color:var(--l-text-muted);font-weight:600;letter-spacing:.04em;
}

.believe-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:34px;}

.believe{
  background:#FFFFFF;border:1px solid var(--l-border);border-radius:14px;padding:22px;
}

.believe-en{
  font-size:15px;font-weight:800;font-style:italic;color:var(--l-accent);
  letter-spacing:.01em;line-height:1.5;
}

.believe-cn{font-size:17px;font-weight:700;color:var(--l-heading);margin-top:6px;line-height:1.55;}

.believe-d{font-size:14px;color:var(--l-text-muted);line-height:1.8;margin-top:8px;}


/* ============================================================
   8. 蕾蕾的故事
   ============================================================ */
.subs{display:grid;grid-template-columns:1fr;gap:14px;}

.sub:hover{transform:translateY(-2px);border-color:var(--cyan-300);border-left-color:var(--lime-500);box-shadow:0 12px 28px -18px rgba(10,18,32,.45);}

.sub-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}

.sub-n{font-size:17px;font-weight:700;color:var(--l-heading);line-height:1.5;}

.sub:hover .sub-n{color:var(--l-link-hover);}

.sub-c{font-size:13px;font-weight:700;color:var(--l-accent);white-space:nowrap;}

.sub-d{font-size:14px;color:var(--l-text-muted);line-height:1.75;}

/* 内容少的系列：用她的调性直说，不写"建设中/敬请期待" */
.sub-thin{border-left-color:var(--n-500);}

.sub-thin .sub-c{color:var(--l-text-muted);}


.picks{margin-top:34px;}

.picks-h{
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--l-accent);margin-bottom:16px;
}

.pick-grid{display:grid;grid-template-columns:1fr;gap:14px;}

.pick{
  background:var(--l-bg-alt);border:1px solid var(--l-border);border-radius:12px;padding:20px;
  display:block;transition:border-color .18s ease,transform .18s ease;
}

.pick:hover{transform:translateY(-2px);border-color:var(--cyan-300);}

.pick-t{font-size:16.5px;font-weight:700;color:var(--l-heading);line-height:1.55;}

.pick:hover .pick-t{color:var(--l-link-hover);}

.pick-x{font-size:14px;color:var(--l-text-muted);line-height:1.75;margin-top:7px;}

.story-all{margin-top:28px;font-weight:700;font-size:15.5px;display:inline-flex;align-items:center;gap:6px;}


/* ============================================================
   9. 在哪里能找到我（sameAs 占位）
   ============================================================ */
.chan{display:grid;grid-template-columns:1fr;gap:14px;}

.chan-item{
  background:#FFFFFF;border:1px solid var(--l-border);border-radius:12px;padding:18px 20px;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
}

.chan-n{font-size:16px;font-weight:700;color:var(--l-heading);line-height:1.5;}

.chan-h{font-size:13.5px;color:var(--l-text-muted);line-height:1.7;}

.chan-s{
  font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--l-text-muted);
  border:1px dashed var(--l-border-strong);border-radius:999px;padding:3px 11px;white-space:nowrap;
}

/* 预览稿构建标注 —— 上线前删除 */
.buildnote{
  margin-top:20px;border:1px dashed var(--l-warning);border-radius:10px;
  padding:14px 16px;font-size:13.5px;line-height:1.8;color:var(--l-warning);
  max-width:var(--prose);background:#FFFFFF;
}

.buildnote b{font-weight:800;}


/* ============================================================
   10. 深色 CTA 出血区（≥320px）
   本屏渐变用量 = 渐变按钮(1)。cta-card 用 border-strong 分层（铁律4）。
   ============================================================ */
.cta{background:var(--d-bg);padding:56px 0;min-height:320px;display:flex;align-items:center;}

.cta-inner{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px;}

.cta-lamp{
  color:#FFFFFF;font-weight:800;font-size:clamp(24px,5.6vw,40px);line-height:1.45;
  letter-spacing:-.01em;max-width:15em;margin-bottom:16px;
}

.cta-sub{color:var(--d-text);font-size:15.5px;line-height:1.85;max-width:var(--prose);margin-bottom:30px;}

.cta-grid{display:grid;grid-template-columns:1fr;gap:16px;}

/* 铁律4：深色卡片必须 1px border-strong 分层（surface 与 bg 仅 1.48:1） */
.cta-card{
  background:var(--d-surface);border:1px solid var(--d-border-strong);border-radius:14px;
  padding:24px;display:flex;flex-direction:column;gap:9px;color:var(--d-text);
  transition:border-color .18s ease,transform .18s ease;
}

.cta-card:hover{border-color:var(--d-accent);transform:translateY(-2px);}

.cta-card-t{font-size:19px;font-weight:800;color:#FFFFFF;line-height:1.45;}

.cta-card-d{font-size:14.5px;color:var(--d-text);line-height:1.8;}

.cta-card-go{font-size:14.5px;font-weight:700;color:var(--d-accent);margin-top:6px;}

.cta-card:hover .cta-card-go{color:var(--d-link-hover);}

.cta-btns{margin-top:30px;}


/* ============================================================
   11. 页脚（深色出血）— 新 5 项
   ============================================================ */
.footer{background:var(--d-bg);padding:52px 0 40px;min-height:320px;border-top:1px solid var(--d-border);}

  .facts{grid-template-columns:repeat(3,1fr);}

  .chan{grid-template-columns:repeat(2,1fr);}

  .cta{padding:80px 0;}

  .cta-card{padding:28px;}
（0-1-1）会覆盖 .btn-grad{color:ink}
（0-1-0）。
   下面各条特异性 0-2-0，显式压过它，保证渐变底上永远是深墨 #0A1220。 */
.dark .btn-grad,.dark .btn-grad:hover{color:var(--l-cta-text);}


/* 3px 渐变发丝线（铁律10：深浅交界） */
.hairline{height:3px;width:100%;background:var(--grad-brand);border:0;margin:0;display:block;}


/* ============================================================
   1. 顶部导航（深色 sticky）— 全站 5 项，与 /about 完全一致
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;background:var(--d-bg);
  border-bottom:1px solid var(--d-border);
}


/* ============================================================
   2+3. 面包屑 & 分类头（同一幅深色出血区 ≥320px + grad-glow）
   本屏渐变用量 = grad-glow(1) + 英文渐变字(1) = 2（铁律5 上限）
   ============================================================ */
.cat{
  position:relative;background:var(--d-bg);min-height:420px;
  padding:0 0 54px;overflow:hidden;
}

.cat::before{content:"";position:absolute;inset:0;background:var(--grad-glow);pointer-events:none;}

.cat-inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 20px;}


.crumbs{padding:18px 0 0;font-size:13.5px;line-height:1.7;}

.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}

.crumbs a{color:var(--d-text-muted);}

.crumbs a:hover{color:var(--d-link);}

.crumbs .sep{color:var(--ink-600);}

.crumbs [aria-current="page"]{color:var(--d-text);font-weight:600;}


/* 铁律2/3：渐变文字仅限英文、≥40px、字重≥700。中文任何字号都不上渐变。 */
.cat-en{
  font-size:clamp(40px,8.6vw,64px);
  line-height:1.06;font-weight:800;font-style:italic;letter-spacing:-.035em;
  color:var(--cyan-300);
  margin:34px 0 14px;padding-right:.08em;display:inline-block;
}

.cat-h1{
  color:#FFFFFF;font-weight:800;letter-spacing:.01em;
  font-size:clamp(30px,7vw,50px);line-height:1.26;margin:0 0 16px;
}

.cat-lead{
  color:var(--d-text);font-size:clamp(15px,3.6vw,18px);line-height:1.8;
  max-width:var(--prose);margin:0 0 22px;
}

.cat-lead b{color:#FFFFFF;font-weight:700;}


.cat-stats{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;
  font-size:14px;color:var(--d-text-muted);margin:0 0 30px;
}

.cat-stats b{color:var(--d-accent);font-weight:700;font-size:17px;letter-spacing:-.01em;}

.cat-stats .dotsep{color:var(--ink-600);padding:0 12px;}


.manifesto{border-left:3px solid var(--d-accent);padding:4px 0 4px 20px;max-width:34em;}

.manifesto p{
  color:#FFFFFF;font-size:clamp(16px,4vw,21px);font-weight:700;line-height:1.65;letter-spacing:.005em;
}

.manifesto cite{
  display:block;margin-top:10px;font-style:normal;font-size:13.5px;
  color:var(--d-text-muted);font-weight:500;line-height:1.75;
}


/* ============================================================
   5a. EDM 特写卡（通栏 · 最大池）
   ============================================================ */
.feat{
  display:block;background:#FFFFFF;border:1px solid var(--l-border);
  border-left:4px solid var(--cyan-500);border-radius:16px;padding:24px;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}

.feat:hover{
  transform:translateY(-2px);border-color:var(--cyan-300);border-left-color:var(--lime-500);
  box-shadow:0 16px 36px -22px rgba(10,18,32,.5);
}

.feat-flag{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--l-accent);background:var(--l-accent-subtle);border:1px solid var(--cyan-200);
  border-radius:999px;padding:4px 12px;margin-bottom:14px;
}

.feat-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;}

.feat-n{font-size:clamp(22px,5vw,30px);font-weight:800;color:var(--l-heading);line-height:1.35;letter-spacing:-.01em;}

.feat:hover .feat-n{color:var(--l-link-hover);}

.feat-c{font-size:15px;font-weight:800;color:var(--l-accent);white-space:nowrap;}

.feat-d{font-size:15.5px;color:var(--l-text-muted);line-height:1.8;margin-top:10px;max-width:var(--prose);}

.feat-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}

.feat-tag{
  font-size:13px;font-weight:600;color:var(--l-text);background:var(--l-sunken);
  border:1px solid var(--l-border);border-radius:999px;padding:4px 12px;line-height:1.6;
}

.feat-tag b{color:var(--l-accent);font-weight:800;margin-left:4px;}

.feat-go{display:inline-block;margin-top:16px;font-size:15px;font-weight:700;color:var(--l-link);}

.feat:hover .feat-go{color:var(--l-link-hover);}


/* ============================================================
   5b. 其余 8 个子类卡片
   ============================================================ */
.cards{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px;}

.card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}

.card-n{font-size:17.5px;font-weight:700;color:var(--l-heading);line-height:1.5;}

.card:hover .card-n{color:var(--l-link-hover);}

.card-c{font-size:13.5px;font-weight:800;color:var(--l-accent);white-space:nowrap;}

.card-d{font-size:14.5px;color:var(--l-text-muted);line-height:1.75;}

/* 诚实标注：不写"建设中/敬请期待"，直说做得少 */
.card-note{
  font-size:13px;line-height:1.7;color:var(--l-warning);
  border-top:1px dashed var(--l-border);padding-top:9px;margin-top:2px;
}

/* 内容单薄的池子：左侧改中性色，数字不给强调色，视觉上不装大 */
.card-thin{border-left-color:var(--n-500);}

.card-thin .card-c{color:var(--l-text-muted);}

.card-thin:hover{border-left-color:var(--n-600);}


/* ============================================================
   6. 诚实说明块
   ============================================================ */
.honest{
  margin-top:26px;background:#FFFFFF;border:1px solid var(--l-border);
  border-left:3px solid var(--l-border-strong);border-radius:12px;
  padding:20px 22px;max-width:var(--prose);
}

.honest-h{font-size:15.5px;font-weight:800;color:var(--l-heading);line-height:1.6;margin-bottom:8px;}

.honest-p{font-size:14.5px;color:var(--l-text-muted);line-height:1.8;}

.honest-p + .honest-p{margin-top:10px;}

.honest-p b{color:var(--l-text);font-weight:700;}


/* ============================================================
   7. 从这里开始读
   ============================================================ */
.picks{display:grid;grid-template-columns:1fr;gap:14px;}

.pick-k{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--l-accent);}


/* ============================================================
   8. 深色 CTA 出血区（≥320px）
   本屏渐变用量 = 渐变按钮(1)。cta-card 用 border-strong 分层（铁律6）。
   ============================================================ */
.cta{background:var(--d-bg);padding:56px 0;min-height:320px;display:flex;align-items:center;}

.cta-h{
  color:#FFFFFF;font-weight:800;font-size:clamp(24px,5.6vw,40px);line-height:1.45;
  letter-spacing:-.01em;max-width:16em;margin-bottom:16px;
}

.cta-p{color:var(--d-text);font-size:15.5px;line-height:1.85;max-width:var(--prose);margin-bottom:14px;}

.cta-p b{color:#FFFFFF;font-weight:700;}

.cta-fine{color:var(--d-text-muted);font-size:14px;line-height:1.85;max-width:var(--prose);margin-bottom:28px;}

.footer-nav a[aria-current="page"]{color:#FFFFFF;font-weight:700;}

  .feat{padding:28px;}

@media (min-width:900px){
  
  body{font-size:17px;}

  .cat{min-height:520px;padding:0 0 72px;}

  .cards{grid-template-columns:repeat(3,1fr);}


/* ============================================================
   1. 顶部导航（深色 sticky）— 全站 5 项，与 about 页完全一致
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;background:var(--d-bg);
  border-bottom:1px solid var(--d-border);
}

.nav-links a[aria-current="page"]{color:#FFFFFF;font-weight:700;}


/* ============================================================
   2. 面包屑（浅色，移动端横向滚动）
   ============================================================ */
.crumbs{background:var(--l-bg-alt);border-bottom:1px solid var(--l-border);}

.crumbs-scroll{
  max-width:var(--wrap);margin:0 auto;padding:11px 20px;
  overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}

.crumbs li{display:inline-flex;align-items:center;}


/* ============================================================
   3. 分类头（深色出血 ≥320px + grad-glow）
   本屏渐变用量 = grad-glow(1) + 英文渐变字(1) = 2（铁律5上限）
   ============================================================ */
.chead{
  position:relative;background:var(--d-bg);min-height:420px;
  padding:52px 0 48px;overflow:hidden;
}

.chead::before{content:"";position:absolute;inset:0;background:var(--grad-glow);pointer-events:none;}

.chead-inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 20px;}


.chead-eyebrow-row{margin:0 0 20px;}

.chead-eyebrow{
  display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--d-text-muted);border:1px solid var(--d-border);border-radius:999px;
  padding:5px 14px;font-weight:600;
}

/* 铁律2/3：渐变文字仅限英文、≥40px、字重≥700。中文任何字号都不上渐变。 */
.chead-en{
  font-size:clamp(40px,8.6vw,72px);
  line-height:1.08;font-weight:800;font-style:italic;letter-spacing:-.035em;
  color:var(--cyan-300);
  margin:0 0 16px;padding-right:.08em;display:inline-block;
}

.chead-cn{
  color:#FFFFFF;font-weight:800;letter-spacing:.01em;
  font-size:clamp(28px,6.4vw,46px);line-height:1.32;margin:0 0 16px;
}

.chead-lead{
  color:var(--d-text);font-size:16.5px;line-height:1.8;max-width:var(--prose);margin:0 0 26px;
}

.chead-lead b{color:#FFFFFF;font-weight:700;}


/* 数据条 */
.stats{
  display:flex;flex-wrap:wrap;gap:10px 0;
  border-top:1px solid var(--d-border);border-bottom:1px solid var(--d-border);
  padding:18px 0;margin:0 0 26px;max-width:var(--prose);
}

.stat{flex:1 1 auto;min-width:104px;display:flex;flex-direction:column;gap:2px;padding-right:18px;}

.stat-n{font-size:clamp(24px,6vw,30px);font-weight:800;color:var(--d-accent);line-height:1.15;letter-spacing:-.02em;}

.stat-n small{font-size:.5em;font-weight:700;margin-left:2px;letter-spacing:0;}

.stat-t{font-size:13px;color:var(--d-text-muted);line-height:1.6;font-weight:600;}


/* 诚实说明段 —— 这一页的核心。用 surface + border-strong 分层（铁律6） */
.honest{
  background:var(--d-surface);border:1px solid var(--d-border-strong);
  border-left:3px solid var(--d-accent);border-radius:14px;
  padding:22px 22px;max-width:var(--prose);
}

.honest p{color:var(--d-text);font-size:15.5px;line-height:1.85;}

.honest p + p{margin-top:12px;}

.honest b{color:#FFFFFF;font-weight:700;}


/* ============================================================
   5. 5 个子系列卡片
   ============================================================ */
.subs{display:grid;grid-template-columns:1fr;gap:16px;}

/* 收录清单 */
.sub-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px;}

.sub-tag{
  font-size:12.5px;font-weight:600;color:var(--l-text-muted);
  background:var(--l-sunken);border:1px solid var(--l-border);
  border-radius:999px;padding:3px 11px;line-height:1.6;
}

.sub-go{font-size:14px;font-weight:700;color:var(--l-accent);margin-top:4px;}

.sub:hover .sub-go{color:var(--l-link-hover);}


/* 偏薄的系列：⚠ 明说，不美化 */
.sub-thin{border-left-color:var(--l-border-strong);}

.sub-warn{
  font-size:13.5px;line-height:1.8;color:var(--l-warning);
  background:#FFFFFF;border:1px dashed var(--l-warning);border-radius:10px;
  padding:11px 13px;margin-top:2px;
}

.sub-warn b{font-weight:800;}


/* 本土化那张：缺口即方向，单独强调但不吹 */
.sub-gap{grid-column:1/-1;}


/* ============================================================
   6. 从这里开始读
   ============================================================ */
.picks{display:grid;grid-template-columns:1fr;gap:16px;}

.pick-why{font-size:13.5px;color:var(--l-text);line-height:1.75;border-top:1px solid var(--l-border);padding-top:9px;margin-top:2px;}

.pick-why b{color:var(--l-accent);font-weight:700;}


/* ============================================================
   7. 适合谁 / 不适合谁 + 交叉引导
   ============================================================ */
.fit{display:grid;grid-template-columns:1fr;gap:16px;}

.fit-card{
  background:#FFFFFF;border:1px solid var(--l-border);border-radius:14px;padding:22px;
}

.fit-yes{border-top:3px solid var(--cyan-500);}

.fit-no{border-top:3px solid var(--l-border-strong);}

.fit-h{font-size:17px;font-weight:800;color:var(--l-heading);margin-bottom:12px;line-height:1.5;}

.fit-list li{
  font-size:14.5px;color:var(--l-text);line-height:1.8;padding-left:20px;position:relative;
}

.fit-list li + li{margin-top:10px;}

.fit-list li::before{
  content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;
  background:var(--cyan-600);
}

.fit-no .fit-list li::before{background:var(--n-500);}


.crossref{
  margin-top:22px;background:var(--l-accent-subtle);border:1px solid var(--cyan-200);
  border-radius:14px;padding:22px;
}

.crossref-h{font-size:17px;font-weight:800;color:var(--l-heading);line-height:1.5;margin-bottom:8px;}

.crossref-d{font-size:14.5px;color:var(--l-text);line-height:1.8;max-width:var(--prose);}

.crossref-d b{color:var(--l-accent);font-weight:700;}

.crossref-go{display:inline-flex;align-items:center;gap:6px;font-size:15.5px;font-weight:700;margin-top:12px;}


/* ============================================================
   8. 深色 CTA 出血区（≥320px）
   本屏渐变用量 = 渐变按钮(1)。深色卡片一律 border-strong 分层（铁律6）。
   ============================================================ */
.cta{background:var(--d-bg);padding:56px 0;min-height:320px;display:flex;align-items:center;}


/* 微信二维码（站上零支付，主留资是静态二维码图，不是表单） */
.wechat{
  margin-top:28px;background:var(--d-surface);border:1px solid var(--d-border-strong);
  border-radius:14px;padding:22px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;
}

.qr-slot{
  width:132px;height:132px;flex:none;border-radius:12px;
  border:1px dashed var(--d-border-strong);background:var(--d-bg-alt);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:12.5px;color:var(--d-text-muted);line-height:1.6;padding:10px;font-weight:600;
}

.wechat-txt{flex:1 1 240px;min-width:0;}

.wechat-t{font-size:17px;font-weight:800;color:#FFFFFF;line-height:1.5;margin-bottom:7px;}

.wechat-d{font-size:14.5px;color:var(--d-text);line-height:1.8;}

/* 渐变按钮：渐变底 + 深墨字 #0A1220（11.41–13.43:1），绝不白字 */
.btn-grad{
  background:var(--grad-brand);color:var(--l-cta-text);
  box-shadow:0 6px 22px -8px rgba(63,224,208,.5);
}


/* ============================================================
   9. 页脚（深色出血）— 5 项 + 第 6 项动态与现场
   ============================================================ */
.footer{background:var(--d-bg);padding:52px 0 40px;min-height:320px;border-top:1px solid var(--d-border);}

  .fit{grid-template-columns:repeat(2,1fr);}

  .chead{padding:84px 0 68px;min-height:520px;}
（0-1-1）会覆盖 .btn-grad（0-1-0）。
   下面各条特异性 0-2-0，显式压过它，保证渐变底上永远是深墨 #0A1220。 */
.dark .btn-grad,.dark .btn-grad:hover{color:var(--l-cta-text);}


/* ============================================================
   2. 分类头（深色出血 ≥320px + 氛围光）
   本屏渐变用量 = grad-glow(1) + 英文渐变字(1) = 2（铁律5）
   ============================================================ */
.hero{
  position:relative;background:var(--d-bg);min-height:420px;
  padding:56px 0 52px;overflow:hidden;
}

/* 铁律2/3：渐变文字仅限英文、≥40px、字重≥700。中文任何字号都不上渐变。 */
.hero-en{
  font-size:clamp(40px,9vw,72px);
  line-height:1.08;font-weight:800;font-style:italic;letter-spacing:-.035em;
  color:var(--cyan-300);
  margin:0 0 18px;padding-right:.08em;display:inline-block;
}


/* 筛选声明 —— 放在任何产品之前 */
.screen-note{
  border-left:3px solid var(--d-accent);padding:2px 0 2px 20px;
  max-width:var(--prose);margin:0 0 28px;
}

.screen-q{
  color:#FFFFFF;font-size:clamp(17px,3.8vw,21px);font-weight:700;line-height:1.65;letter-spacing:-.005em;
}

.screen-by{color:var(--d-text-muted);font-size:13.5px;font-weight:600;letter-spacing:.04em;margin-top:10px;}

.screen-x{color:var(--d-text);font-size:15px;line-height:1.85;margin-top:14px;}

.screen-x b{color:#FFFFFF;font-weight:700;}


/* ============================================================
   4. ⭐「这些人我建议别来」（放在产品之前）
   ============================================================ */
.nofit{display:grid;grid-template-columns:1fr;gap:14px;}

.nofit-item{
  background:#FFFFFF;border:1px solid var(--l-border);border-left:3px solid var(--n-500);
  border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;
}

.nofit-t{font-size:16.5px;font-weight:700;color:var(--l-heading);line-height:1.5;}

.nofit-d{font-size:14.5px;color:var(--l-text-muted);line-height:1.8;}

.nofit-sub{
  margin-top:30px;padding-top:26px;border-top:1px solid var(--l-border);
}

.nofit-sub-h{
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--l-text-muted);margin-bottom:16px;
}

.nofit-foot{
  margin-top:26px;background:#FFFFFF;border:1px solid var(--l-border-strong);
  border-radius:12px;padding:18px 20px;font-size:15px;line-height:1.85;
  color:var(--l-text);max-width:var(--prose);
}

.nofit-foot b{font-weight:700;color:var(--l-heading);}


/* ============================================================
   5. 谁适合
   ============================================================ */
.fit{display:grid;grid-template-columns:1fr;gap:16px;}

.fit-item{
  background:var(--l-accent-subtle);border:1px solid var(--cyan-200);
  border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:7px;
}

.fit-n{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--l-accent);
}

.fit-t{font-size:17px;font-weight:700;color:var(--l-heading);line-height:1.5;}

.fit-d{font-size:14.5px;color:var(--l-text-muted);line-height:1.8;}


/* ============================================================
   6. 产品卡片（明码标价）
   ============================================================ */
.prods{display:grid;grid-template-columns:1fr;gap:20px;}

.prod{
  background:#FFFFFF;border:1px solid var(--l-border);border-radius:16px;
  padding:24px;display:flex;flex-direction:column;
}

.prod-tag{
  align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.5;
  padding:3px 11px;border-radius:999px;
  background:var(--l-accent-subtle);color:var(--l-accent);border:1px solid var(--cyan-200);
  margin-bottom:12px;
}

.prod-t{font-size:20px;font-weight:800;color:var(--l-heading);line-height:1.45;letter-spacing:-.01em;}

.prod-price{
  margin-top:14px;padding-bottom:16px;border-bottom:1px solid var(--l-border);
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
}

.prod-num{font-size:clamp(28px,7vw,36px);font-weight:800;color:var(--l-accent);line-height:1.15;letter-spacing:-.02em;}

.prod-num small{font-size:.42em;font-weight:700;margin-left:2px;letter-spacing:0;}

.prod-unit{font-size:14px;font-weight:600;color:var(--l-text-muted);}

.prod-price2{font-size:14.5px;color:var(--l-text-muted);font-weight:600;width:100%;}

.prod-price2 b{color:var(--l-text);font-weight:700;}

.prod-form{
  font-size:14px;color:var(--l-text-muted);line-height:1.8;margin-top:16px;
}

.prod-form b{color:var(--l-text);font-weight:700;}

.prod-h{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--l-text-muted);margin-top:20px;margin-bottom:10px;
}

.prod-list{display:flex;flex-direction:column;gap:7px;}

.prod-list li{
  font-size:14.5px;color:var(--l-text);line-height:1.7;padding-left:18px;position:relative;
}

.prod-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--cyan-600);
}

.prod-when{
  margin-top:18px;background:var(--l-sunken);border-radius:10px;padding:14px 16px;
  font-size:14px;line-height:1.8;color:var(--l-text);
}

.prod-when b{display:block;font-weight:700;color:var(--l-heading);margin-bottom:4px;}

.prod-when .dates{color:var(--l-text-muted);font-weight:600;}

.prod-cta{
  margin-top:auto;padding-top:22px;font-size:15.5px;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
}

.prods-note{
  margin-top:24px;font-size:14px;color:var(--l-text-muted);line-height:1.85;
  border-left:3px solid var(--l-border-strong);padding-left:14px;max-width:var(--prose);
}


/* ============================================================
   7. 定位澄清
   ============================================================ */
.quote{
  border-left:3px solid var(--cyan-400);padding:2px 0 2px 22px;
  font-size:clamp(19px,4.4vw,25px);line-height:1.65;font-weight:700;color:var(--l-heading);
  max-width:22em;letter-spacing:-.005em;
}

.clar{margin-top:30px;display:grid;grid-template-columns:1fr;gap:16px;}

.clar-card{
  background:#FFFFFF;border:1px solid var(--l-border);border-radius:14px;padding:22px;
  display:flex;flex-direction:column;gap:8px;
}

.clar-t{font-size:16.5px;font-weight:700;color:var(--l-heading);line-height:1.5;}

.clar-d{font-size:14.5px;color:var(--l-text-muted);line-height:1.8;}


/* ============================================================
   8. 常见问题
   ============================================================ */
.faq{display:flex;flex-direction:column;gap:14px;max-width:52em;}

.faq-item{
  background:#FFFFFF;border:1px solid var(--l-border);border-radius:12px;padding:20px 22px;
}

.faq-q{font-size:16.5px;font-weight:700;color:var(--l-heading);line-height:1.55;}

.faq-a{font-size:14.5px;color:var(--l-text-muted);line-height:1.85;margin-top:8px;}

.faq-a b{color:var(--l-text);font-weight:700;}

.faq-todo{border-color:var(--l-warning);border-style:dashed;}

.faq-todo .faq-a{color:var(--l-warning);}

.buildnote ul{margin-top:8px;display:flex;flex-direction:column;gap:5px;}

.buildnote li{padding-left:14px;position:relative;}

.buildnote li::before{content:"—";position:absolute;left:0;}


/* ============================================================
   9. 深色 CTA 出血区（≥320px）— 渐变用量 = 渐变按钮(1)
   ============================================================ */
.cta{background:var(--d-bg);padding:56px 0;min-height:320px;}

.cta-note{color:var(--d-text-muted);font-size:14px;line-height:1.8;max-width:var(--prose);margin-bottom:28px;}

/* 铁律6：深色卡片必须 1px border-strong 分层（surface 与 bg 仅 1.48:1） */
.qr-card{
  background:var(--d-surface);border:1px solid var(--d-border-strong);border-radius:16px;
  padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:250px;
}

.qr-box{
  width:170px;height:170px;background:#FFFFFF;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--n-300);
}

.qr-mark{
  width:52px;height:52px;border:3px solid var(--ink-950);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
}

.qr-mark span{width:18px;height:18px;background:var(--ink-950);border-radius:2px;display:block;}

.qr-ph{font-size:12.5px;color:var(--l-text-muted);font-weight:600;}

.qr-cap{font-size:13px;color:var(--d-text);text-align:center;line-height:1.7;}

.qr-cap b{color:#FFFFFF;display:block;font-weight:700;}


/* ============================================================
   10. 页脚（深色出血）— 5 项 + 动态与现场
   ============================================================ */
.footer{background:var(--d-bg);padding:52px 0 40px;min-height:320px;border-top:1px solid var(--d-border);}

  .nofit{grid-template-columns:repeat(3,1fr);}

  .prods{grid-template-columns:repeat(3,1fr);}
/* ============================================================
   灯塔 Lighthouse 色彩系统 — 唯一色源，不自创色值
   与 demo-about.html 完全一致
   ============================================================ */


*,*::before,*::after{box-sizing:border-box;}
（0-1-1）会覆盖 .btn-grad（0-1-0）。
   下面各条特异性 0-2-0，显式压过，保证渐变底上永远是深墨 #0A1220。 */
.dark .btn-grad,.dark .btn-grad:hover{color:var(--l-cta-text);}


/* ============================================================
   1. 顶部导航（深色 sticky）— 全站 5 项，与 about 页一致
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;background:var(--d-bg);
  border-bottom:1px solid var(--d-border);
}


/* ============================================================
   2. 分类头（深色出血 ≥320px + grad-glow）
   本屏渐变用量 = grad-glow(1) + 英文渐变字(1) = 2，不设渐变按钮。
   ============================================================ */
.hero{
  position:relative;background:var(--d-bg);min-height:420px;
  padding:56px 0 52px;overflow:hidden;
}

/* 分类头直接接她的原话 */
.hero-quote{
  border-left:3px solid var(--d-accent);padding:4px 0 4px 20px;
  color:var(--d-text);font-size:clamp(15.5px,3.4vw,17.5px);line-height:1.85;
  max-width:var(--prose);margin:0 0 22px;
}

.hero-quote b{color:#FFFFFF;font-weight:700;}

.hero-quote-by{
  margin-top:12px;color:var(--d-text-muted);font-size:13.5px;font-weight:600;letter-spacing:.04em;
}

.hero-meta{
  color:var(--d-text-muted);font-size:14px;line-height:1.9;font-weight:600;letter-spacing:.03em;
  display:flex;flex-wrap:wrap;gap:2px 16px;margin:0 0 28px;
}

.hero-meta span{white-space:nowrap;}

.hero-meta b{color:var(--d-accent);font-weight:800;}


/* 通用引言块（浅色） */
.note{
  font-size:14.5px;color:var(--l-text-muted);line-height:1.8;
  border-left:3px solid var(--l-border-strong);padding-left:14px;max-width:var(--prose);
}

.note b{color:var(--l-text);font-weight:700;}


/* ============================================================
   3. ⭐ 入圈要回答的 5 个问题
   ============================================================ */
.qs{display:grid;grid-template-columns:1fr;gap:14px;counter-reset:q;}

.q{
  background:#FFFFFF;border:1px solid var(--l-border);border-radius:14px;
  padding:20px 22px;display:flex;gap:16px;align-items:flex-start;
}

.q-n{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--l-accent-subtle);border:1px solid var(--cyan-200);
  color:var(--l-accent);font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:center;line-height:1;
}

.q-body{display:flex;flex-direction:column;gap:5px;min-width:0;}

.q-t{font-size:16.5px;font-weight:700;color:var(--l-heading);line-height:1.6;}

.q-d{font-size:14px;color:var(--l-text-muted);line-height:1.75;}

.qs-foot{margin-top:22px;}


/* ============================================================
   4. ⭐ 这 6 类可能不太适合
   中性视觉：border-strong 灰边框 + sunken 底。不用红色警告色。
   ============================================================ */
.nofit{display:grid;grid-template-columns:1fr;gap:12px;}

.nf{
  background:var(--l-sunken);border:1px solid var(--l-border);
  border-left:3px solid var(--l-border-strong);border-radius:12px;
  padding:16px 18px;display:flex;flex-direction:column;gap:5px;
}

.nf-t{font-size:16px;font-weight:700;color:var(--l-heading);line-height:1.55;}

.nf-d{font-size:13.5px;color:var(--l-text-muted);line-height:1.75;}

.nofit-quote{
  margin-top:24px;border-left:3px solid var(--l-border-strong);padding:2px 0 2px 20px;
  font-size:clamp(17px,3.8vw,21px);line-height:1.7;font-weight:700;color:var(--l-heading);
  max-width:24em;
}

.nofit-quote-by{
  margin-top:12px;font-size:13.5px;color:var(--l-text-muted);font-weight:600;letter-spacing:.04em;
}


/* ============================================================
   5. 两个社群（并列卡片）
   ============================================================ */
.grp{display:grid;grid-template-columns:1fr;gap:18px;}

.g{
  background:#FFFFFF;border:1px solid var(--l-border);border-left:3px solid var(--cyan-400);
  border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:10px;
}

.g-tag{
  align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--l-accent);background:var(--l-accent-subtle);border:1px solid var(--cyan-200);
  border-radius:999px;padding:4px 12px;line-height:1.5;
}

.g-tag-new{color:var(--l-text-muted);background:var(--l-sunken);border-color:var(--l-border-strong);}

.g-n{font-size:clamp(19px,4.4vw,23px);font-weight:800;color:var(--l-heading);line-height:1.45;letter-spacing:-.01em;}

.g-d{font-size:15px;color:var(--l-text-muted);line-height:1.8;}

.g-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}

.g-fact{
  font-size:13px;font-weight:700;color:var(--l-text);background:var(--l-bg-alt);
  border:1px solid var(--l-border);border-radius:8px;padding:5px 11px;line-height:1.5;
}

.g-list{display:flex;flex-direction:column;gap:6px;margin-top:4px;}

.g-list li{
  font-size:14px;color:var(--l-text-muted);line-height:1.75;padding-left:16px;position:relative;
}

.g-list li::before{
  content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;
  background:var(--cyan-600);
}

/* 事实澄清条：两者并存，不是改名 */
.coexist{
  margin-top:22px;background:var(--l-accent-subtle);border:1px solid var(--cyan-200);
  border-radius:12px;padding:18px 20px;font-size:15px;line-height:1.8;color:var(--l-text);
  max-width:var(--prose);
}

.coexist b{color:var(--l-accent);font-weight:800;}


/* ============================================================
   6. 线下：杭州卖家下午茶
   ============================================================ */
.tea{display:grid;grid-template-columns:1fr;gap:16px;}

.tea-card{
  background:#FFFFFF;border:1px solid var(--l-border);border-radius:14px;padding:24px;
  display:flex;flex-direction:column;gap:12px;
}

.tea-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}

.tf{
  background:var(--l-bg-alt);border:1px solid var(--l-border);border-radius:12px;padding:18px;
  display:flex;flex-direction:column;gap:3px;
}

.tf-n{font-size:clamp(21px,5vw,28px);font-weight:800;color:var(--l-accent);line-height:1.2;letter-spacing:-.02em;}

.tf-n small{font-size:.5em;font-weight:700;margin-left:2px;letter-spacing:0;}

.tf-t{font-size:14px;font-weight:700;color:var(--l-heading);line-height:1.55;}

.tea-q{
  font-size:16.5px;line-height:1.85;color:var(--l-text);max-width:var(--prose);
  border-left:3px solid var(--cyan-400);padding-left:18px;
}


/* ============================================================
   7. 社会证明
   ============================================================ */
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}

.pf{
  background:#FFFFFF;border:1px solid var(--l-border);border-radius:14px;padding:20px;
  display:flex;flex-direction:column;gap:4px;
}

.pf-n{font-size:clamp(24px,6vw,32px);font-weight:800;color:var(--l-accent);line-height:1.15;letter-spacing:-.02em;}

.pf-n small{font-size:.5em;font-weight:700;margin-left:2px;letter-spacing:0;}

.pf-t{font-size:14.5px;font-weight:700;color:var(--l-heading);line-height:1.55;}

.pf-d{font-size:13px;color:var(--l-text-muted);line-height:1.7;}

.proof-go{margin-top:24px;font-weight:700;font-size:15.5px;display:inline-flex;align-items:center;gap:6px;}


/* ============================================================
   8. 深色 CTA 出血区（≥320px）
   本屏渐变用量 = 渐变按钮(1)。深色卡片用 border-strong 分层（铁律6）。
   ============================================================ */
.cta{background:var(--d-bg);padding:56px 0;min-height:320px;display:flex;align-items:center;}

/* 铁律6：深色卡片必须 1px border-strong 分层（surface 与 bg 仅 1.48:1） */
.cta-card{
  background:var(--d-surface);border:1px solid var(--d-border-strong);border-radius:14px;
  padding:24px;display:flex;flex-direction:column;gap:9px;color:var(--d-text);
  transition:border-color .18s ease,transform .18s ease;
}

/* 微信二维码卡（主留资：静态图，不是表单） */
.qr-card{
  background:var(--d-surface);border:1px solid var(--d-border-strong);border-radius:14px;
  padding:24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
}

.qr-box-t{font-size:13px;font-weight:700;color:var(--d-text-muted);letter-spacing:.06em;line-height:1.6;}

.qr-box-s{font-size:12px;color:var(--d-text-muted);line-height:1.6;}

.qr-t{font-size:17px;font-weight:800;color:#FFFFFF;line-height:1.5;}

.qr-d{font-size:14px;color:var(--d-text);line-height:1.8;max-width:22em;}


/* ============================================================
   9. 页脚（深色出血）— 5 项 + 第 6 项 动态与现场
   ============================================================ */
.footer{background:var(--d-bg);padding:52px 0 40px;min-height:320px;border-top:1px solid var(--d-border);}

  .grp{grid-template-columns:repeat(2,1fr);}

  .proof{grid-template-columns:repeat(3,1fr);}

  .cta-card,.qr-card{padding:28px;}

a:focus-visible,button:focus-visible,label:focus-within{outline:2px solid var(--l-focus);outline-offset:3px;border-radius:4px;}


/* 深色区通用 */
.dark{background:var(--d-bg);color:var(--d-text);}

.dark a:focus-visible{outline-color:var(--d-accent);}


/* 3px 渐变发丝线 —— 深浅交界 */
.hairline{height:3px;width:100%;background:var(--grad-brand);border:0;margin:0;display:block;}


/* ============================================================
   1. 顶部导航（深色）
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;background:var(--d-bg);
  border-bottom:1px solid var(--d-border);
}

.nav-links a[aria-current="true"]{color:#FFFFFF;}

.nav-links a[aria-current="true"]::after{transform:scaleX(1);}

#navtoggle{position:absolute;opacity:0;pointer-events:none;}

#navtoggle:checked ~ .mobile-menu{display:block;}


/* ============================================================
   2. 面包屑（深色，接在分类头顶部同一幅深色区）
   ============================================================ */
.crumbs{
  position:relative;z-index:2;background:transparent;
  padding:18px 0 0;font-size:13.5px;line-height:1.7;
}


/* ============================================================
   3. 分类头（深色出血 · --grad-glow · ≥320px）
   ============================================================ */
.cat{
  position:relative;background:var(--d-bg);min-height:400px;
  padding:0 0 52px;overflow:hidden;
}


.cat-eyebrow{
  display:inline-block;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--d-text-muted);border:1px solid var(--d-border);border-radius:999px;
  padding:5px 14px;margin:30px 0 20px;font-weight:600;
}


/* 栏目宣言 */
.manifesto{
  border-left:3px solid var(--d-accent);padding:4px 0 4px 20px;
  max-width:34em;
}


/* ============================================================
   5. 二级标签分面导航（浅色 · 本页核心）
   ============================================================ */
.facet-bar{
  position:sticky;top:60px;z-index:40;
  background:var(--l-bg);border-bottom:1px solid var(--l-border);
}

.facet-scroll{
  max-width:var(--wrap);margin:0 auto;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

.facet-scroll::-webkit-scrollbar{height:3px;}

.facet-scroll::-webkit-scrollbar-thumb{background:var(--n-300);border-radius:3px;}

.facets{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:14px 20px;min-width:max-content;
}

.facet{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:8px 15px;min-height:40px;border-radius:999px;cursor:pointer;
  font-size:14.5px;font-weight:600;line-height:1.4;
  color:var(--l-text);background:var(--l-bg);
  border:1px solid var(--l-border-strong);
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
  -webkit-tap-highlight-color:transparent;
}

.facet:hover{background:var(--l-accent-subtle);border-color:var(--cyan-700);color:var(--l-link-hover);}

.facet .n{
  font-size:12.5px;font-weight:700;color:var(--l-text-muted);
  background:var(--l-sunken);border-radius:999px;padding:1px 7px;
}

.facet .dot{width:7px;height:7px;border-radius:50%;flex:none;}

.d-all{background:var(--n-500);}

.d-tools{background:var(--cyan-600);}

.d-flows{background:var(--cyan-400);}

.d-copy{background:var(--lime-500);}

.d-design{background:var(--cyan-800);}

.d-camp{background:var(--lime-600);}

.d-metrics{background:var(--cyan-300);}


/* 分面 radio（视觉隐藏，保留键盘可达） */
.facet-input{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 选中态：cyan-800 底 + 白字 = 7.15:1 */
#f-all:checked    ~ .facet-bar label[for="f-all"],
#f-tools:checked  ~ .facet-bar label[for="f-tools"],
#f-flows:checked  ~ .facet-bar label[for="f-flows"],
#f-copy:checked   ~ .facet-bar label[for="f-copy"],
#f-design:checked ~ .facet-bar label[for="f-design"],
#f-camp:checked   ~ .facet-bar label[for="f-camp"],
#f-metrics:checked ~ .facet-bar label[for="f-metrics"]{
  background:var(--cyan-800);border-color:var(--cyan-800);color:#FFFFFF;
}

#f-all:checked    ~ .facet-bar label[for="f-all"] .n,
#f-tools:checked  ~ .facet-bar label[for="f-tools"] .n,
#f-flows:checked  ~ .facet-bar label[for="f-flows"] .n,
#f-copy:checked   ~ .facet-bar label[for="f-copy"] .n,
#f-design:checked ~ .facet-bar label[for="f-design"] .n,
#f-camp:checked   ~ .facet-bar label[for="f-camp"] .n,
#f-metrics:checked ~ .facet-bar label[for="f-metrics"] .n{
  background:rgba(255,255,255,.18);color:#FFFFFF;
}

/* JS 增强的选中态（无JS时由上面的 :checked 规则兜底） */
.facet.is-active{background:var(--cyan-800);border-color:var(--cyan-800);color:#FFFFFF;}

.facet.is-active .n{background:rgba(255,255,255,.18);color:#FFFFFF;}

/* 键盘焦点环 */
#f-all:focus-visible    ~ .facet-bar label[for="f-all"],
#f-tools:focus-visible  ~ .facet-bar label[for="f-tools"],
#f-flows:focus-visible  ~ .facet-bar label[for="f-flows"],
#f-copy:focus-visible   ~ .facet-bar label[for="f-copy"],
#f-design:focus-visible ~ .facet-bar label[for="f-design"],
#f-camp:focus-visible   ~ .facet-bar label[for="f-camp"],
#f-metrics:focus-visible ~ .facet-bar label[for="f-metrics"]{
  outline:2px solid var(--l-focus);outline-offset:3px;
}


/* 过滤逻辑 */
#f-tools:checked   ~ .listsec .item:not([data-t="tools"]),
#f-flows:checked   ~ .listsec .item:not([data-t="flows"]),
#f-copy:checked    ~ .listsec .item:not([data-t="copy"]),
#f-design:checked  ~ .listsec .item:not([data-t="design"]),
#f-camp:checked    ~ .listsec .item:not([data-t="camp"]),
#f-metrics:checked ~ .listsec .item:not([data-t="metrics"]){display:none;}


/* 当前分面名回显 */
.cur{display:none;}

#f-all:checked    ~ .listsec .cur-all,
#f-tools:checked  ~ .listsec .cur-tools,
#f-flows:checked  ~ .listsec .cur-flows,
#f-copy:checked   ~ .listsec .cur-copy,
#f-design:checked ~ .listsec .cur-design,
#f-camp:checked   ~ .listsec .cur-camp,
#f-metrics:checked ~ .listsec .cur-metrics{display:inline;}


/* 支柱卡在筛选态下隐藏（它属于流程设计，全部/流程设计时可见） */
#f-tools:checked   ~ .pillarsec,
#f-copy:checked    ~ .pillarsec,
#f-design:checked  ~ .pillarsec,
#f-camp:checked    ~ .pillarsec,
#f-metrics:checked ~ .pillarsec{display:none;}


/* ============================================================
   6. 支柱文章特写卡（浅色，通栏）
   ============================================================ */
.sec{padding:56px 0;}


.pillar{
  background:var(--l-bg);border:1px solid var(--cyan-300);border-radius:18px;
  padding:26px 22px;position:relative;display:block;
  box-shadow:0 18px 40px -32px rgba(10,18,32,.55);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.pillar:hover{transform:translateY(-3px);border-color:var(--cyan-500);box-shadow:0 22px 46px -30px rgba(10,18,32,.6);}

.pillar-flag{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:800;letter-spacing:.02em;
  background:var(--cyan-800);color:#FFFFFF;
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
}

.pillar-flag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan-300);flex:none;}

.pillar-t{
  font-size:clamp(21px,4.6vw,30px);font-weight:800;line-height:1.45;
  letter-spacing:-.01em;color:var(--l-heading);margin-bottom:14px;
}

.pillar:hover .pillar-t{color:var(--l-link-hover);}

.pillar-ex{color:var(--l-text-muted);font-size:15.5px;line-height:1.8;max-width:var(--prose);margin-bottom:18px;}

.pillar-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;}

.pillar-more{font-size:15px;font-weight:700;color:var(--l-link);display:inline-flex;align-items:center;gap:6px;}

.pillar:hover .pillar-more{color:var(--l-link-hover);}

.pillar-toc{
  border-top:1px solid var(--l-border);margin-top:18px;padding-top:16px;
  display:flex;flex-wrap:wrap;gap:8px 10px;
}

.pillar-toc span{
  font-size:13px;color:var(--l-text-muted);background:var(--l-sunken);
  border-radius:7px;padding:4px 11px;line-height:1.6;
}


/* ============================================================
   7. 文章列表（浅色）
   ============================================================ */
.listhead{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:26px;
}

.listhead-note{font-size:14px;color:var(--l-text-muted);}

.listhead-note b{color:var(--l-accent);font-weight:700;}


.list{display:grid;grid-template-columns:1fr;gap:16px;}

.item{
  background:var(--l-bg);border:1px solid var(--l-border);border-radius:14px;
  padding:20px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.item:hover{border-color:var(--cyan-200);box-shadow:0 12px 28px -18px rgba(10,18,32,.45);transform:translateY(-2px);}

.sec-alt .item{background:#FFFFFF;}

.item-t{font-size:17px;font-weight:700;line-height:1.6;color:var(--l-heading);letter-spacing:-.003em;}

.item:hover .item-t{color:var(--l-link-hover);}

.item-m{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:auto;padding-top:2px;}

.chip .dot{width:6px;height:6px;border-radius:50%;flex:none;}

.tag-seo{background:transparent;color:var(--l-text-muted);border:1px solid var(--l-border-strong);}


.empty-note{
  display:none;border:1px dashed var(--l-border-strong);border-radius:12px;
  padding:20px;color:var(--l-text-muted);font-size:14.5px;line-height:1.8;
}


/* ============================================================
   8. 相关系列（浅色）
   ============================================================ */
.series{display:grid;grid-template-columns:1fr;gap:18px;}


/* ============================================================
   9. 文末 CTA（深色出血 ≥320px）
   ============================================================ */
/* 注：此处不叠 --grad-glow。发丝线 + 渐变按钮已占满"单屏最多2处渐变"的额度，
   glow 只保留给分类头。 */
.cta{
  position:relative;background:var(--d-bg);min-height:340px;
  padding:60px 0;overflow:hidden;display:flex;align-items:center;
}

.btn-grad{background:var(--grad-brand);color:var(--l-cta-text);box-shadow:0 6px 22px -8px rgba(63,224,208,.5);}


/* ============================================================
   10. 页脚（深色）
   ============================================================ */
.footer{background:var(--d-bg-alt);padding:52px 0 40px;min-height:320px;border-top:1px solid var(--d-border);}


/* ============================================================
   响应式
   ============================================================ */
@media (min-width:640px){
  .series{grid-template-columns:1fr 1fr;}

  .facet-bar{top:68px;}

@media (min-width:1060px){
  .list{grid-template-columns:repeat(3,1fr);}

/* 铁律1：.dark a 的 0-1-1 会盖掉 .btn-grad 的 0-1-0，渐变按钮文字掉到 1.10:1 */
.dark .btn-grad,.dark .btn-grad:hover{color:var(--l-cta-text);}

/* 无目录时正文占满，不留 250px 空白 */
@media (min-width:1040px){.layout.no-toc{grid-template-columns:minmax(0,1fr);}.layout.no-toc .art-main{max-width:38em;margin-inline:auto;}}

/* 空分类的诚实说明，不是「建设中」占位 */
.empty-note{padding:3rem 0;max-width:34em;color:var(--l-text-muted);line-height:1.9;}
.empty-note p{margin:0 0 .8rem;}

/* 编者按：文章写于不同年份，这是给读者的时间路标。
   浅色块，不打断正文节奏，视觉上明确区别于正文。 */
.editor-note{
  margin:1.6rem 0 2rem;padding:1rem 1.2rem;
  background:var(--l-bg-alt);
  border-left:3px solid var(--l-border-strong);
  border-radius:2px;
}
.editor-note-tag{
  display:inline-block;font-size:.78rem;letter-spacing:.05em;
  color:var(--l-text-muted);margin-bottom:.4rem;
}
.editor-note p{
  margin:0;font-size:.92rem;line-height:1.75;
  color:var(--l-text-muted);
}

/* 体系页 */
.wrap.narrow{max-width:44em;}
.lead{font-size:1.05rem;line-height:1.9;color:var(--l-text);margin:0 0 1.6rem;}
.sec-note{font-size:.88rem;color:var(--l-text-muted);line-height:1.75;margin:.6rem 0 0;}
.fit-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;margin:1.4rem 0 0;}
@media(min-width:760px){.fit-grid{grid-template-columns:1fr 1fr;gap:2.4rem;}}
.fit-h{font-size:1rem;margin:0 0 .7rem;color:var(--l-heading);}
.fit-list{margin:0;padding-left:1.1rem;line-height:1.9;color:var(--l-text-muted);font-size:.94rem;}
.fit-list li{margin-bottom:.4rem;}
/* 缺口公示：这一节是资产不是免责，排版上要好读，不能像小字附注 */
.gap-list{margin:1.2rem 0 0;padding-left:1.1rem;line-height:1.95;color:var(--l-text);}
.gap-list li{margin-bottom:.7rem;}
.gap-list b{color:var(--l-heading);}
.gap-foot{margin:1.4rem 0 0;font-size:.96rem;color:var(--l-text-muted);}

/* 分类页顶部的体系页入口 */
.pillar-entry{
  display:block;padding:1.4rem 1.6rem;text-decoration:none;
  background:var(--l-bg-alt);border:1px solid var(--l-border-strong);
  border-radius:3px;transition:border-color .15s;
}
.pillar-entry:hover{border-color:var(--l-link);}
.pillar-kicker{display:block;font-size:.8rem;letter-spacing:.06em;color:var(--l-text-muted);margin-bottom:.4rem;}
.pillar-title{display:block;font-size:1.15rem;font-weight:700;color:var(--l-heading);margin-bottom:.5rem;}
.pillar-desc{display:block;font-size:.92rem;line-height:1.8;color:var(--l-text-muted);}