/* ==========================================================================
   VPNAY — components.css
   首屏装置 / tab / 目录条 / FAQ / 套餐卡 / 线路表 / 平台卡 / 文章卡 /
   引用块 / 文末推广块 / 悬浮 CTA / 文件夹树 / 预览页示例类
   ========================================================================== */

/* ==========================================================================
   1. 首屏（visual-right：左文案 + 右侧 -8° 三设备装置）
   ========================================================================== */
.hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:64px;
  padding-bottom:72px;
  background:linear-gradient(180deg,rgba(52,68,168,.07) 0%,rgba(52,68,168,.025) 55%,rgba(52,68,168,0) 100%);
}
.hero-in{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr) 50%;
  gap:40px;
  align-items:center;
}
.copy{position:relative;z-index:2;min-width:0}
.h1{
  margin:36px 0 0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:64px;
  line-height:1.06;
  letter-spacing:-.03em;
  color:var(--ink);
}
.ins{position:relative;display:inline-block}
.ins-word{
  position:absolute;
  left:18px;
  top:-24px;
  font-family:var(--font-hand);
  font-style:normal;
  font-weight:400;
  font-size:22px;
  line-height:1;
  letter-spacing:0;
  color:var(--accent);
  transform:rotate(-8deg);
  white-space:nowrap;
}
.ins-caret{position:absolute;left:20px;top:24px;color:var(--accent);line-height:0}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.desc{margin:28px 0 0;font-size:17px;line-height:1.7;color:var(--muted);max-width:34em}
.desc strong{color:var(--ink);font-weight:600}

.trust{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 0;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
}
.trust li{display:inline-flex;align-items:center}
.trust li+li::before{
  content:'';
  display:inline-block;
  flex-shrink:0;
  width:3px;
  height:3px;
  margin:0 12px;
  border-radius:50%;
  background:var(--muted);
}

.rows{
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--border);
  display:grid;
  gap:16px;
}
.row{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.row-label{
  flex:none;
  min-width:50px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--muted);
}
.plats{display:flex;flex-wrap:wrap;gap:16px}
.plat{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
.plat svg{width:18px;height:18px;flex-shrink:0;color:var(--muted)}
.flags{display:flex;flex-wrap:wrap;gap:14px}
.flag{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ink)}
.flag svg{width:22px;height:16px;flex-shrink:0;border-radius:3px;box-shadow:0 0 0 1px var(--border)}

/* ---------- 涂鸦（经纬刻度 / 线路箭头） ---------- */
.doodle{position:absolute;z-index:0;color:var(--doodle);pointer-events:none}
.doodle svg{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.d1{left:44px;top:88px;width:26px;height:22px}
.d2{left:88px;top:262px;width:22px;height:22px}
.d3{left:52px;top:436px;width:24px;height:24px}
.d4{left:34px;bottom:96px;width:40px;height:24px}
.d5{right:36px;top:64px;width:24px;height:24px}
.d6{right:44px;bottom:170px;width:24px;height:24px}
.d7{right:60px;top:52%;width:40px;height:24px}

/* ---------- 装置 ---------- */
.stage{position:relative;z-index:1;width:100%;height:580px}
.stage::before{
  content:'';
  position:absolute;
  inset:8% -6% 4% 10%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(94,108,224,.12),rgba(94,108,224,0));
  filter:blur(24px);
  pointer-events:none;
}
.desk{position:absolute;inset:0;transform:rotate(-3deg);transform-origin:50% 50%}
.desk-pad{
  position:absolute;
  left:6%;
  right:-8%;
  top:2%;
  bottom:4%;
  border-radius:var(--r-xl);
  background:linear-gradient(160deg,var(--bg-panel) 0%,var(--bg-panel-tint) 100%);
  border:1px solid var(--border);
  box-shadow:var(--shadow-accent);
}
.tablet{
  position:absolute;
  z-index:3;
  top:12px;
  right:-50px;
  width:490px;
  height:350px;
  padding:10px;
  background:var(--ink-deep);
  border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),var(--shadow-device);
}
.screen{
  position:relative;
  height:100%;
  background:var(--bg-panel);
  border-radius:var(--r-md);
  overflow:hidden;
  display:grid;
  grid-template-rows:34px 1fr;
}
.screen::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:38%;
  background:linear-gradient(180deg,rgba(94,108,224,.06),rgba(94,108,224,0));
  pointer-events:none;
}
.chrome{display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--border);background:var(--bg-panel-2)}
.chrome i{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.c-r{background:var(--error)}
.c-y{background:var(--warn)}
.c-g{background:var(--success)}
.chrome-title{margin:0 auto;font-size:11px;font-weight:600;color:var(--muted)}
.chrome-id{font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}
.tbody{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:0}
.dir{padding:10px 8px;border-right:1px solid var(--border);background:var(--bg);min-width:0}
.dir-h{padding:2px 8px 14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.dir-row{
  display:flex;
  align-items:center;
  gap:8px;
  height:38px;
  margin-bottom:2px;
  padding:0 8px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  font-size:13px;
  font-weight:600;
  color:var(--ink);
}
.dir-row.is-cur{background:var(--accent-08);border-color:var(--accent-22)}
.reg{flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(29,30,34,.08)}
.reg-hk{background:var(--reg-hk)}
.reg-us{background:var(--reg-us)}
.reg-sg{background:var(--reg-sg)}
.reg-jp{background:var(--reg-jp)}
.reg-ca{background:var(--reg-ca)}
.reg-nl{background:var(--reg-nl)}
.dir-row .tag{margin-left:auto}
.detail{padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.kicker{margin:0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.detail .kicker{margin-bottom:8px}
.d-title{margin:0;font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg);
}
.live{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink)}
.live i{position:relative;flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--success)}
.live i::after{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid var(--success);
  opacity:.6;
  animation:ping 2.4s ease-out infinite;
}
.status .mono{font-size:18px;letter-spacing:-.02em}
.kv{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:12px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right;font-weight:600;color:var(--ink)}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{
  padding:4px 9px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:11px;
  font-weight:600;
  color:var(--ink);
  max-width:100%;
  overflow:hidden;
}
.phone{
  position:absolute;
  z-index:4;
  left:-20px;
  top:220px;
  width:172px;
  height:340px;
  padding:7px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow-device);
}
.p-screen{
  position:relative;
  height:100%;
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(180deg,var(--bg),var(--bg-panel));
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.island{width:38px;height:8px;border-radius:var(--r-pill);background:var(--ink-deep);margin-bottom:12px;flex-shrink:0}
.p-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}
.connect{
  position:relative;
  width:84px;
  height:84px;
  margin:auto 0 8px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--bg-panel);
  background:linear-gradient(145deg,var(--accent),var(--accent-2));
  box-shadow:0 12px 24px rgba(52,68,168,.28);
  animation:breathe 3s ease-in-out infinite;
}
.connect::before{
  content:'';
  position:absolute;
  inset:-9px;
  border-radius:50%;
  border:1px solid var(--accent-2);
  opacity:.45;
  animation:ring 3s ease-in-out infinite;
}
.connect svg{width:30px;height:30px}
.p-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:auto}
.p-status i{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--success)}
.p-list{width:100%;display:grid;gap:5px}
.p-lh{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--muted);padding:0 2px 2px}
.p-item{
  display:flex;
  align-items:center;
  gap:7px;
  height:28px;
  padding:0 8px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-panel);
  font-size:11px;
  font-weight:600;
  color:var(--ink);
}
.p-item svg{width:12px;height:12px;flex-shrink:0;color:var(--muted)}
.p-item em{margin-left:auto;font-style:normal;font-size:10px;font-weight:600;color:var(--success)}
.keyboard{
  position:absolute;
  z-index:2;
  right:-30px;
  top:290px;
  width:340px;
  height:130px;
  padding:8px;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 16px 32px rgba(29,30,34,.10);
}
.keys{display:grid;grid-template-columns:repeat(13,1fr);grid-auto-rows:24px;gap:4px}
.keys i{display:block;border-radius:4px;background:var(--key);border:1px solid var(--key-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.keys i:nth-child(43){grid-column:span 7}
.aux{
  position:absolute;
  z-index:6;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--glass);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-panel);
  white-space:nowrap;
}
.aux-ico{
  flex:none;
  width:28px;
  height:28px;
  border-radius:var(--r-sm);
  display:grid;
  place-items:center;
  background:var(--accent-08);
  color:var(--accent);
}
.aux-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.aux b{display:block;font-size:12.5px;font-weight:700;line-height:1.2;color:var(--ink)}
.aux span{display:block;margin-top:3px;font-size:11px;line-height:1.2;color:var(--muted)}
.aux-a{left:-16px;top:176px}
.aux-b{right:80px;bottom:80px}

@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes ring{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.08);opacity:.15}}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.8);opacity:0}}

/* ==========================================================================
   2. 数据条（等宽字体事实带）
   ========================================================================== */
.databar{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-panel);
  padding-top:18px;
  padding-bottom:18px;
}
.databar-in{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  display:flex;
  flex-wrap:wrap;
  gap:12px 32px;
  align-items:center;
  justify-content:space-between;
}
.databar-item{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.databar-item .mono{font-size:14px;color:var(--ink)}
.databar-item i{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--accent-2)}

/* ==========================================================================
   3. 卖点区：文件夹树侧栏 + 详情面板（featuresLayout）
   ========================================================================== */
.features{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.folder-tree{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  padding:10px;
  display:grid;
  gap:4px;
}
.folder-item{
  display:flex;
  width:100%;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  font-size:14.5px;
  font-weight:600;
  color:var(--ink);
  text-align:left;
  transition:transform .16s,background .16s,border-color .16s;
}
.folder-item:hover{transform:translateX(2px);background:var(--bg-panel-2)}
.folder-item[aria-selected="true"]{
  background:var(--accent-08);
  border-color:var(--accent-22);
  color:var(--accent-2);
}
.folder-item .fi{flex:none;width:22px;height:22px}
.folder-item .fi svg{width:22px;height:22px}
.fi-line{color:var(--accent)}
.fi-priv{color:var(--reg-ca)}
.fi-dev{color:var(--reg-us)}
.fi-ai{color:var(--reg-jp)}
.fi-media{color:var(--reg-sg)}
.fi-refund{color:var(--reg-hk)}
.fi-nl{color:var(--reg-nl)}

.feature-panel{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  padding:28px;
  min-width:0;
}
.feature-panel[hidden]{display:none}
.feature-panel h3{margin-top:0}
.feature-panel p{margin-top:12px;font-size:15px;color:var(--muted);line-height:1.75}
.feature-fact{
  margin-top:20px;
  padding-top:14px;
  border-top:1px dashed var(--border-strong);
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--muted);
}

/* ==========================================================================
   4. TOC 目录条（长页分类跳转，吸顶跟随由 reveal.js 负责）
   ========================================================================== */
.toc-tabs{
  position:sticky;
  top:var(--header-h);
  z-index:12;
  display:flex;
  gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:10px 0;
  margin:0 0 28px;
  background:linear-gradient(180deg,var(--bg) 70%,rgba(247,247,245,0));
  border-bottom:1px solid var(--border);
}
.toc-tabs::-webkit-scrollbar{display:none}
.toc-tabs a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 14px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
}
.toc-tabs a:hover{border-color:var(--border-strong);color:var(--ink)}
.toc-tabs a.is-current,
.toc-tabs a[aria-current="true"]{
  color:var(--bg-panel);
  background:var(--accent);
  border-color:var(--accent);
}
body:has(.toc-tabs) section[id],
body:has(.toc-tabs) [data-toc-target]{scroll-margin-top:calc(var(--header-h) + 78px)}

/* ==========================================================================
   5. FAQ 折叠项（原生 details）
   ========================================================================== */
.faq{display:grid;gap:10px}
.faq-item{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.faq-item summary{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:14px 18px;
  font-size:15.5px;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'';
  flex:none;
  margin-left:auto;
  width:9px;
  height:9px;
  border-right:1.6px solid var(--muted);
  border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .2s;
}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-item[open] summary{color:var(--accent-2)}
.faq-body{padding:0 18px 18px;font-size:14.5px;line-height:1.75;color:var(--muted)}
.faq-body p+p{margin-top:10px}

/* ==========================================================================
   6. 套餐卡片
   ========================================================================== */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  align-items:stretch;
}
.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  padding:26px 22px 22px;
  min-width:0;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.plan-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-panel)}
.plan-card.is-featured{
  border-color:var(--accent-22);
  box-shadow:0 1px 2px rgba(29,30,34,.03),0 18px 40px rgba(52,68,168,.14);
}
.plan-card.is-current{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),var(--shadow-panel);
}
.plan-badge{
  position:absolute;
  top:-12px;
  left:22px;
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:2px 10px;
  border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:var(--bg-panel);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.02em;
}
.plan-name{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--ink)}
.plan-price{
  margin-top:14px;
  display:flex;
  align-items:baseline;
  gap:6px;
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--ink);
}
.plan-price .num{font-size:38px;line-height:1}
.plan-price .unit{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.plan-traffic{margin-top:8px;font-size:14px;font-weight:600;color:var(--accent-2)}
.plan-list{list-style:none;margin:18px 0 0;display:grid;gap:9px;font-size:13.5px;color:var(--muted)}
.plan-list li{display:flex;align-items:flex-start;gap:8px}
.plan-list li::before{
  content:'';
  flex:none;
  margin-top:7px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent-2);
}
.plan-card .btn{margin-top:auto;margin-top:22px}
.plan-note{margin-top:20px;font-size:13px;color:var(--muted)}

.cycle-tabs{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  box-shadow:0 1px 2px var(--ink-04);
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.cycle-tabs [role="tab"]{
  flex:0 0 auto;
  min-height:34px;
  padding:6px 16px;
  border-radius:var(--r-pill);
  font-size:13.5px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
}
.cycle-tabs [role="tab"][aria-selected="true"]{
  color:var(--bg-panel);
  background:var(--accent);
}

/* ==========================================================================
   7. 宽表格 + 横滑包装（严禁撑破 body）
   ========================================================================== */
.table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
}
.data-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:13.5px;
}
.data-table caption{
  caption-side:top;
  text-align:left;
  padding:14px 16px 0;
  font-size:12.5px;
  color:var(--muted);
}
.data-table th,
.data-table td{
  padding:12px 16px;
  text-align:left;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  color:var(--ink);
}
.data-table th{
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--muted);
  background:var(--bg-panel-2);
  white-space:nowrap;
}
.data-table td{word-break:keep-all}
.data-table tbody tr:hover{background:var(--bg-panel-2)}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table .col-name{font-weight:700;white-space:nowrap}
.data-table .col-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.data-table .cell-flags{display:flex;flex-wrap:wrap;gap:6px}
/* 博客文章里可能出现的裸表：components.css 自带兜底 */
.prose > .data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}

/* 线路表分组标题行 */
.data-table tr.group-row td{
  background:var(--bg-panel-2);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--muted);
  font-weight:600;
}

/* ==========================================================================
   8. 平台卡片（客户端下载）
   ========================================================================== */
.plat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
}
.plat-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  padding:22px 20px;
  min-width:0;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.plat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-panel);border-color:var(--border-strong)}
.plat-card-ico{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:var(--r-sm);
  background:var(--accent-08);
  color:var(--accent);
}
.plat-card-ico svg{width:22px;height:22px}
.plat-card h3{font-size:15.5px}
.plat-card .small{font-size:12.5px}
.plat-card .btn{margin-top:auto}

/* ==========================================================================
   9. 文章卡片（博客列表 / 首页预览）
   ========================================================================== */
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.post-card{
  display:flex;
  flex-direction:column;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  padding:22px;
  min-width:0;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-panel);border-color:var(--border-strong)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.post-card h3{margin-top:12px;font-size:16.5px;line-height:1.4}
.post-card h3 a:hover{color:var(--accent)}
.post-card p{margin-top:10px;font-size:13.5px;line-height:1.7;color:var(--muted)}
.post-more{margin-top:auto;padding-top:16px;font-size:13px;font-weight:600;color:var(--accent)}
.post-tag{
  display:inline-flex;
  align-items:center;
  padding:2px 9px;
  border-radius:var(--r-pill);
  background:var(--accent-08);
  color:var(--accent-2);
  font-size:11.5px;
  font-weight:600;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}
.tag-guide{background:var(--accent-08);color:var(--accent-2)}
.tag-streaming{background:var(--warn-12);color:var(--warn)}
.tag-ai{background:rgba(94,108,224,.12);color:var(--accent-2)}
.tag-security{background:var(--success-12);color:var(--success)}
.tag-network{background:var(--bg-panel-2);color:var(--muted)}
.tag-news{background:var(--error-12);color:var(--error)}

/* ==========================================================================
   10. 引用块 / 提示块
   ========================================================================== */
.callout{
  position:relative;
  margin:20px 0;
  padding:16px 18px 16px 20px;
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--r-sm);
  background:var(--bg-panel);
  font-size:14.5px;
  line-height:1.75;
  color:var(--ink);
}
.callout p+p{margin-top:10px}
.callout-title{font-weight:700;color:var(--accent-2)}
.callout-warn{border-left-color:var(--warn)}
.callout-warn .callout-title{color:var(--warn)}
.callout-tip{border-left-color:var(--success)}
.callout-tip .callout-title{color:var(--success)}
blockquote{
  margin:20px 0;
  padding:14px 18px;
  border-left:3px solid var(--border-strong);
  background:var(--bg-panel-2);
  border-radius:var(--r-sm);
  font-size:14.5px;
  line-height:1.75;
  color:var(--muted);
}

/* ==========================================================================
   11. 文末推广块（博客文章页）
   ========================================================================== */
.promo-block{
  position:relative;
  overflow:hidden;
  margin:40px 0 0;
  padding:28px 26px;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:linear-gradient(140deg,var(--bg-panel) 0%,var(--bg-panel-tint) 100%);
  box-shadow:var(--shadow-panel);
}
.promo-block::before{
  content:'';
  position:absolute;
  right:-90px;
  top:-90px;
  width:240px;
  height:240px;
  border:1px dashed var(--accent-22);
  border-radius:50%;
  pointer-events:none;
}
.promo-brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--muted);
}
.promo-brand i{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--accent-2)}
.promo-block h3{margin-top:12px;font-size:20px}
.promo-block p{margin-top:10px;font-size:14px;color:var(--muted);max-width:52em}
.promo-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.promo-block .btn{flex-shrink:0;white-space:nowrap}

/* ==========================================================================
   12. 悬浮 CTA（全站常驻）
   ========================================================================== */
.float-cta{
  position:fixed;
  right:28px;
  bottom:calc(28px + env(safe-area-inset-bottom,0px));
  z-index:30;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:46px;
  padding:0 18px 0 20px;
  border-radius:var(--r-pill);
  background:var(--ink);
  color:var(--bg-panel);
  font-size:14px;
  font-weight:600;
  box-shadow:var(--shadow-float);
  transition:transform .15s;
}
.float-cta:hover{transform:translateY(-1px)}
.float-cta svg{width:14px;height:14px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   13. 底部 CTA 带（深墨局部深块 + 虚线弧）
   ========================================================================== */
.cta-band{
  position:relative;
  overflow:hidden;
  background:var(--ink-deep);
  color:var(--deep-text);
  padding-top:56px;
  padding-bottom:56px;
}
.cta-band::before{
  content:'';
  position:absolute;
  left:50%;
  top:-160px;
  transform:translateX(-50%);
  width:min(900px,140%);
  height:360px;
  border:1px dashed var(--deep-line);
  border-radius:50%;
  pointer-events:none;
}
.cta-band-in{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
}
.cta-band h2{color:var(--deep-text);font-size:clamp(22px,2.6vw,30px)}
.cta-band p{margin-top:10px;font-size:14.5px;color:var(--deep-muted);max-width:46em}
.cta-band .cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-left:auto}
.cta-band .btn-ghost-light{
  color:var(--deep-text);
  background:transparent;
  border:1px solid rgba(255,255,255,.5);
}
.cta-band .btn-ghost-light:hover{background:var(--deep-hover)}

/* ==========================================================================
   14. 步骤列表（教程页 / 深度指南）
   ========================================================================== */
.steps{list-style:none;counter-reset:step;display:grid;gap:18px}
.steps > li{
  position:relative;
  counter-increment:step;
  padding-left:52px;
  min-width:0;
}
.steps > li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--accent-22);
  border-radius:50%;
  background:var(--accent-08);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  color:var(--accent-2);
}
.steps > li h3{font-size:16.5px}
.steps > li p{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.75}

/* ==========================================================================
   15. 事实胶囊行 / 统计小格
   ========================================================================== */
.fact-row{display:flex;flex-wrap:wrap;gap:10px}
.fact-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:6px 14px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  box-shadow:0 1px 2px var(--ink-04);
  max-width:100%;
}
.fact-chip .mono{font-size:12.5px}

/* ==========================================================================
   16. 预览页示例类（design-preview 专用，勿用于正式页面）
   ========================================================================== */
.preview-sec{padding-top:56px;padding-bottom:56px;border-top:1px solid var(--border)}
.preview-sec:first-of-type{border-top:0}
.preview-sec-title{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}
.swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:14px;
}
.swatch{
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  overflow:hidden;
  min-width:0;
}
.swatch-color{height:56px;border-bottom:1px solid var(--border)}
.swatch-meta{padding:10px 12px}
.swatch-name{font-size:12.5px;font-weight:700;color:var(--ink)}
.swatch-var{font-family:var(--font-mono);font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.type-sample{display:grid;gap:20px}
.type-row{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:20px;
  align-items:baseline;
  padding-bottom:18px;
  border-bottom:1px dashed var(--border);
}
.type-row:last-child{border-bottom:0;padding-bottom:0}
.type-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.demo-note{font-size:13px;color:var(--muted);margin-top:10px}

/* ==========================================================================
   17. 响应式
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .connect,.connect::before,.live i::after{animation:none}
  .folder-item:hover{transform:none}
  .plan-card:hover,.plat-card:hover,.post-card:hover{transform:none}
}

@media (max-width:1100px){
  .h1{font-size:56px}
  .hero-in{grid-template-columns:minmax(0,1fr) 46%}
  .tablet{width:440px;height:330px;right:-40px}
  .features{grid-template-columns:240px minmax(0,1fr)}
}

@media (max-width:900px){
  .hero{padding-top:48px;padding-bottom:56px}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .stage{height:auto}
  .stage::before{display:none}
  .desk{position:relative;inset:auto;transform:none}
  .desk-pad,.phone,.keyboard,.aux{display:none}
  .tablet{position:relative;top:auto;right:auto;width:100%;max-width:560px;height:auto;margin:0 auto}
  .screen{height:auto}
  .tbody{grid-template-columns:170px minmax(0,1fr)}
  .features{grid-template-columns:minmax(0,1fr);gap:18px}
  .folder-tree{
    display:flex;
    gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:8px;
  }
  .folder-tree::-webkit-scrollbar{display:none}
  .folder-item{
    flex:0 0 auto;
    width:auto;
    min-height:40px;
    padding:8px 14px;
    border:1px solid var(--border);
    border-radius:var(--r-pill);
    white-space:nowrap;
  }
  .folder-item:hover{transform:none}
  .cta-band-in{flex-direction:column;align-items:flex-start}
  .cta-band .cta-actions{margin-left:0}
}

@media (max-width:768px){
  .doodle{display:none}
  .type-row{grid-template-columns:minmax(0,1fr);gap:8px}
}

@media (max-width:640px){
  .h1{font-size:40px}
  .ins-word{font-size:16px;top:-16px;left:10px}
  .ins-caret{left:12px;top:14px}
  .tbody{grid-template-columns:minmax(0,1fr)}
  .dir{border-right:0;border-bottom:1px solid var(--border)}
  .desc{font-size:16px}
  .feature-panel{padding:20px}
  .float-cta{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));min-height:44px;padding:0 16px;font-size:13.5px}
  .promo-block{padding:22px 18px}
  .data-table{min-width:560px}
}