@charset "UTF-8";
/* ==========================================================================
   VPNWY · components.css
   首屏装置 / 卖点浏览器 / 套餐卡 / 线路表 / 平台卡 / 文章卡 / tab / toc
   FAQ / callout / 推广块 / 悬浮 CTA / 预览辅助类
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero 布局与左栏文案
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:calc(100vh - var(--topbar-h) - 30px);
  min-height:calc(100svh - var(--topbar-h) - 30px);
  padding:54px var(--pad-x);
  border-bottom:1px solid var(--border);
  overflow-x:clip;
}
.hero-inner{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:48px;
  align-items:center;
}
/* 版心中线（设计稿痕迹） */
.hero-inner::before{
  content:"";
  position:absolute;
  top:-46px;
  bottom:-46px;
  left:calc((100% - 48px) / 2.1 + 24px);
  width:1px;
  background:repeating-linear-gradient(180deg,var(--grid-line) 0 4px,transparent 4px 10px);
  pointer-events:none;
  z-index:0;
}
.hero-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:0 14px 0 11px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:12.5px;
  font-weight:500;
  color:var(--text-muted);
  box-shadow:var(--sh-1);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}
.eyebrow svg{color:var(--success);flex-shrink:0;}

.hero-h1{
  margin-top:22px;
  font-family:var(--font-display);
  font-size:60px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--text);
}
.h1-brand{display:block;letter-spacing:-.03em;}
.h1-key{display:block;color:var(--accent);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .h1-key{
    background-image:linear-gradient(96deg,var(--accent) 0%,var(--accent-2) 58%,var(--accent-dark) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

.hero-sub{
  margin-top:22px;
  max-width:31em;
  font-size:17px;
  line-height:1.72;
  color:var(--text-muted);
}
.hero-sub strong{font-weight:600;color:var(--text);}

.hero-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:30px;
  flex-wrap:wrap;
}

.trust-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:28px;
  font-size:14px;
  color:var(--text-muted);
}
.trust-row li{
  display:inline-flex;
  align-items:center;
  gap:14px;
  white-space:nowrap;
}
.trust-row li + li::before{
  content:"";
  width:3px;
  height:3px;
  border-radius:50%;
  background:currentColor;
  opacity:.35;
  flex-shrink:0;
}

/* 首屏家具：平台行 + 国旗行 */
.hero-meta{
  width:100%;
  margin-top:32px;
  padding-top:20px;
  border-top:1px dashed var(--grid-line);
  display:grid;
  gap:12px;
}
.meta-row{display:flex;align-items:center;gap:14px;min-width:0;}
.meta-label{
  flex:0 0 58px;
  font-size:12px;
  letter-spacing:.02em;
  color:var(--text-muted);
  opacity:.9;
  white-space:nowrap;
}
.plat-list,
.flag-list{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;min-width:0;}
.plat-list li,
.flag-list li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  color:var(--text-muted);
  white-space:nowrap;
}
.plat-ico{color:var(--text-muted);flex-shrink:0;}
.flag-ico{
  width:24px;
  height:16px;
  border-radius:3px;
  overflow:hidden;
  flex-shrink:0;
  box-shadow:inset 0 0 0 1px var(--ink-a06);
}

/* --------------------------------------------------------------------------
   2. 首屏装置：客户端线路窗口
   -------------------------------------------------------------------------- */
.hero-stage{
  position:relative;
  z-index:1;
  width:100%;
  height:540px;
  min-width:0;
}
.stage-halo{
  position:absolute;
  inset:-34px -26px -26px -26px;
  border-radius:50%;
  background:radial-gradient(58% 54% at 50% 46%,var(--accent-a18) 0%,var(--accent-a10) 44%,transparent 74%);
  filter:blur(26px);
  pointer-events:none;
  z-index:0;
}
.stage-dots{
  position:absolute;
  inset:-22px;
  background-image:radial-gradient(circle,var(--accent-a12) 1.05px,transparent 1.05px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 60% 56% at 50% 46%,var(--text) 26%,transparent 74%);
  mask-image:radial-gradient(ellipse 60% 56% at 50% 46%,var(--text) 26%,transparent 74%);
  pointer-events:none;
  z-index:0;
}
.client-win{
  position:absolute;
  left:0;
  right:20px;
  top:56px;
  height:440px;
  display:flex;
  flex-direction:column;
  background-image:linear-gradient(180deg,var(--win-top) 0%,var(--bg-panel) 130px);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-win);
  overflow:hidden;
  z-index:2;
}
.win-bar{
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid var(--border);
}
.win-title{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
}
.win-title svg{color:var(--text-muted);flex-shrink:0;}
.win-dots{display:inline-flex;gap:6px;}
.win-dots i{width:7px;height:7px;border-radius:50%;opacity:.5;}
.win-dots i:nth-child(1){background:var(--error);}
.win-dots i:nth-child(2){background:var(--warn);}
.win-dots i:nth-child(3){background:var(--success);}

.win-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:20px 16px;
}
.route-list{display:flex;flex-direction:column;}
.route{
  height:52px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  border-bottom:1px solid var(--border);
}
.route:last-child{border-bottom:0;}
.route-flag{display:flex;flex:0 0 auto;}
.route-flag .flag-ico{width:22px;height:15px;}
.route-name{font-size:13.5px;font-weight:500;color:var(--text);white-space:nowrap;}
.route-kind{margin-left:auto;font-size:11.5px;color:var(--text-muted);white-space:nowrap;}
.route--on{
  background:var(--text);
  border-radius:var(--r-sm);
  border-bottom-color:transparent;
  box-shadow:0 10px 22px -12px var(--ink-a14);
}
.route--on .route-name{color:var(--bg-panel);font-weight:600;}
.route--on .route-kind{color:var(--on-dark-62);}
.route--on .route-state{margin-left:auto;}
.route-state{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  color:var(--on-dark-84);
  white-space:nowrap;
}
.pulse{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent-bright);
  box-shadow:0 0 0 3px var(--on-dark-14);
  animation:pulse 2.4s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.45);opacity:.6;}
}
.switch{
  position:relative;
  flex:0 0 auto;
  width:34px;
  height:19px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel-2);
}
.switch::after{
  content:"";
  position:absolute;
  left:2px;
  top:2px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--bg-panel);
  box-shadow:0 1px 2px var(--ink-a14);
}
.proto-row{
  flex:0 0 40px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 12px;
  border-top:1px solid var(--border);
}
.proto-label{font-size:11.5px;color:var(--text-muted);margin-right:2px;white-space:nowrap;}
.win-foot{
  flex:0 0 54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-top:1px solid var(--border);
  background:var(--bg-panel-2-soft);
}
.foot-plan{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--text);
}
.foot-dev{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);}
.foot-dev svg{color:var(--text-muted);flex-shrink:0;}

/* 连接状态卡（错层叠放） */
.conn-card{
  position:absolute;
  right:0;
  top:0;
  width:212px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  overflow:hidden;
  z-index:4;
}
.conn-head{
  display:flex;
  align-items:center;
  gap:7px;
  height:34px;
  padding:0 13px;
  background:var(--white-a72);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  font-size:11.5px;
  color:var(--text-muted);
}
.conn-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px var(--success-a18);
  flex-shrink:0;
}
.conn-body{display:flex;flex-direction:column;gap:2px;padding:12px 13px 15px;}
.conn-body strong{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--text);
}
.conn-body span{font-size:11.5px;color:var(--text-muted);}
.conn-card::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--accent) 42%,var(--accent-2) 58%,transparent 100%);
  transform:translateX(-100%);
  animation:sweep 5.2s linear infinite;
}
@keyframes sweep{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}

/* 左上角漂浮圆徽 */
.float-badge{
  position:absolute;
  left:-18px;
  top:4px;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background-image:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  color:var(--bg-panel);
  box-shadow:0 16px 30px -14px var(--accent-a18),0 4px 12px -5px var(--ink-a14),inset 0 1px 0 var(--white-a72);
  z-index:5;
}

/* 右下角三枚事实徽标 */
.fact-badges{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  z-index:3;
}
.fact-badges li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:12px;
  color:var(--text);
  white-space:nowrap;
  box-shadow:0 10px 20px -14px var(--ink-a14),0 2px 6px -4px var(--ink-a06);
}
.fact-badges svg{color:var(--text-muted);flex-shrink:0;}

/* --------------------------------------------------------------------------
   3. 三步白卡（灰底序号 01/02/03）
   -------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.step{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:var(--sp-6);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--sh-1);
  min-width:0;
}
.step-h{
  margin-top:var(--sp-4);
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  letter-spacing:-.015em;
}
.step-p{margin-top:var(--sp-2);font-size:14.5px;line-height:1.7;color:var(--text-muted);}

/* --------------------------------------------------------------------------
   4. 卖点资料浏览器（竖排 tab + 详情面板）
   -------------------------------------------------------------------------- */
.feature-browser{
  display:grid;
  grid-template-columns:290px 1fr;
  gap:24px;
  align-items:start;
}
.feature-tabs{display:flex;flex-direction:column;gap:6px;min-width:0;}
.feature-tab{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:52px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-panel);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:500;
  color:var(--text-muted);
  text-align:left;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.feature-tab .num-tag{background:var(--bg-panel-2);}
.feature-tab:hover{color:var(--text);border-color:var(--text-muted);}
.feature-tab[aria-selected="true"]{
  background:var(--text);
  border-color:var(--text);
  color:var(--bg-panel);
  font-weight:600;
}
.feature-tab[aria-selected="true"] .num-tag{background:var(--on-dark-14);color:var(--bg-panel);}
.feature-panel{
  padding:var(--sp-7);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--sh-2);
  min-width:0;
}
.feature-panel h3{font-size:22px;}
.feature-panel .feature-figure{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  margin-bottom:var(--sp-4);
  border-radius:var(--r-sm);
  background:var(--accent-a05);
  color:var(--accent);
}
.feature-panel p{margin-top:var(--sp-3);font-size:15px;line-height:1.75;color:var(--text-muted);}
.feature-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-5);}

/* --------------------------------------------------------------------------
   5. 通用 tab（role=tablist）
   -------------------------------------------------------------------------- */
.tablist{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel-2-soft);
  max-width:100%;
  overflow-x:auto;
}
.tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 18px;
  border-radius:var(--r-pill);
  font-size:13.5px;
  font-weight:600;
  color:var(--text-muted);
  white-space:nowrap;
  transition:background-color .18s ease,color .18s ease;
}
.tab:hover{color:var(--text);}
.tab[aria-selected="true"]{background:var(--text);color:var(--bg-panel);}
.tabpanel{display:none;min-width:0;}
.tabpanel.is-current{display:block;}

/* --------------------------------------------------------------------------
   6. 长页分类跳转导航（toc）
   -------------------------------------------------------------------------- */
.toc-tabs{
  position:sticky;
  top:var(--topbar-h);
  z-index:20;
  display:flex;
  gap:6px;
  margin-block:0 var(--sp-6);
  padding-block:10px;
  padding-inline:0;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.toc-tabs::-webkit-scrollbar{display:none;}
.toc-tabs a{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:13px;
  color:var(--text-muted);
  white-space:nowrap;
  flex-shrink:0;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.toc-tabs a:hover{color:var(--text);border-color:var(--text-muted);}
.toc-tabs a.is-current{
  background:var(--text);
  border-color:var(--text);
  color:var(--bg-panel);
  font-weight:600;
}
body:has(.toc-tabs) section[id]{scroll-margin-top:calc(var(--topbar-h) + 64px);}

/* --------------------------------------------------------------------------
   7. FAQ 折叠项
   -------------------------------------------------------------------------- */
.faq{
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--sh-1);
  overflow:hidden;
}
.faq + .faq{margin-top:10px;}
.faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:56px;
  padding:14px 18px;
  cursor:pointer;
  font-size:15.5px;
  font-weight:600;
  color:var(--text);
  list-style:none;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q::after{
  content:"";
  width:9px;
  height:9px;
  margin-right:4px;
  border-right:2px solid var(--text-muted);
  border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg);
  transition:transform .2s ease;
  flex-shrink:0;
}
.faq[open] .faq-q::after{transform:rotate(-135deg);}
.faq-a{padding:0 18px 18px;font-size:15px;line-height:1.75;color:var(--text-muted);}
.faq-a p + p{margin-top:.8em;}

/* --------------------------------------------------------------------------
   8. 套餐卡片
   -------------------------------------------------------------------------- */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.plan{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:var(--sp-6);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--sh-1);
  min-width:0;
}
.plan--pick{
  border-color:var(--text);
  box-shadow:var(--sh-3);
}
.plan--current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-a18),var(--sh-2);}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.plan-name{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-.015em;}
.plan-tag{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:var(--r-pill);
  background:var(--accent-a10);
  color:var(--accent-dark);
  font-size:11.5px;
  font-weight:600;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}
.plan-price{
  display:flex;
  align-items:baseline;
  gap:3px;
  margin-top:var(--sp-5);
  font-family:var(--font-display);
  font-size:40px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--text);
  line-height:1.1;
}
.plan-price .cur{font-size:20px;font-weight:700;color:var(--text-muted);}
.plan-price .per{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--text-muted);letter-spacing:0;}
.plan-quota{margin-top:6px;font-size:13.5px;color:var(--text-muted);}
.plan-list{margin-top:var(--sp-5);display:grid;gap:10px;font-size:14px;color:var(--text-muted);}
.plan-list li{display:flex;align-items:flex-start;gap:9px;line-height:1.6;}
.plan-list svg{color:var(--success);flex-shrink:0;margin-top:4px;}
.plan-cta{margin-top:auto;padding-top:var(--sp-6);}
.plan-note{margin-top:10px;font-size:12px;color:var(--text-muted);text-align:center;}
.plan-foot{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin-top:var(--sp-6);
  padding-top:var(--sp-5);
  border-top:1px dashed var(--grid-line);
  font-size:13.5px;
  color:var(--text-muted);
}
.plan-foot li{display:inline-flex;align-items:center;gap:7px;}

/* --------------------------------------------------------------------------
   9. 表格：线路表 / 对比表 / 文章裸表
   -------------------------------------------------------------------------- */
.table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
}
.table-scroll table{
  width:100%;
  min-width:660px;
  border-collapse:collapse;
  font-size:14px;
}
.table-scroll caption{
  padding:14px 16px;
  text-align:left;
  font-size:13px;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
}
.table-scroll th,
.table-scroll td{
  padding:13px 16px;
  text-align:left;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  word-break:keep-all;
}
.table-scroll th{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text);
  background:var(--bg-panel-2-soft);
  white-space:nowrap;
}
.table-scroll td{color:var(--text-muted);}
.table-scroll tbody tr:last-child td{border-bottom:0;}
.table-scroll tbody tr:hover td{background:var(--accent-a03);}
.table-scroll .cell-name{color:var(--text);font-weight:600;white-space:nowrap;}
.table-scroll .cell-mono{font-family:var(--font-mono);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap;}

/* 线路类型标签 */
.lk{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--bg-panel-2-soft);
  font-size:11.5px;
  font-weight:600;
  color:var(--text-muted);
  white-space:nowrap;
}
.lk--iepl{border-color:var(--accent-a18);background:var(--accent-a05);color:var(--accent-dark);}
.lk--relay{border-color:var(--border);background:var(--bg-panel-2);color:var(--text-muted);}
.lk--direct{border-color:var(--success-a18);background:rgba(18,161,80,.08);color:var(--success);}

/* 文章正文里可能出现的裸表格：必须自带横滑容器 */
.prose > .data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}
.prose table{
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.prose th,
.prose td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  word-break:keep-all;
}
.prose th{background:var(--bg-panel-2-soft);font-size:13px;white-space:nowrap;}

/* --------------------------------------------------------------------------
   10. 平台卡片
   -------------------------------------------------------------------------- */
.plat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.plat-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:var(--sp-5);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--sh-1);
  min-width:0;
  transition:transform .18s ease,box-shadow .22s ease,border-color .18s ease;
}
.plat-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--text-muted);}
.plat-card-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:var(--r-sm);
  background:var(--bg-panel-2-soft);
  color:var(--text);
}
.plat-card-name{margin-top:var(--sp-4);font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.015em;}
.plat-card-note{margin-top:4px;font-size:12.5px;line-height:1.6;color:var(--text-muted);}
.plat-card .btn{margin-top:var(--sp-5);}

/* --------------------------------------------------------------------------
   11. 博客文章卡
   -------------------------------------------------------------------------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.post-card{
  display:flex;
  flex-direction:column;
  padding:var(--sp-6);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--sh-1);
  min-width:0;
  transition:transform .18s ease,box-shadow .22s ease;
}
.post-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;color:var(--text-muted);}
.post-tag{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:var(--r-pill);
  background:var(--bg-panel-2);
  font-size:11.5px;
  font-weight:600;
  color:var(--text-muted);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}
.post-title{margin-top:var(--sp-4);font-family:var(--font-display);font-size:17px;font-weight:700;line-height:1.45;letter-spacing:-.015em;}
.post-title a:hover{color:var(--accent);}
.post-sum{margin-top:10px;font-size:14px;line-height:1.7;color:var(--text-muted);}
.post-card .link-more{margin-top:auto;padding-top:var(--sp-5);}

/* --------------------------------------------------------------------------
   12. callout 引用块
   -------------------------------------------------------------------------- */
.callout{
  position:relative;
  padding:var(--sp-5) var(--sp-5) var(--sp-5) 22px;
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--r-sm);
  background:var(--bg-panel);
  font-size:15px;
  line-height:1.75;
  color:var(--text-muted);
}
.callout strong{color:var(--text);font-weight:600;}
.callout--warn{border-left-color:var(--warn);}
.callout--plain{border-left-color:var(--border);background:var(--bg-panel-2-soft);}
.callout + .callout{margin-top:var(--sp-4);}

/* --------------------------------------------------------------------------
   13. 文末推广块
   -------------------------------------------------------------------------- */
.promo-block{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
  padding:var(--sp-6);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background-color:var(--bg-panel);
  background-image:linear-gradient(118deg,var(--accent-a07) 0%,var(--accent-a03) 52%,var(--bg-panel) 100%);
  box-shadow:var(--sh-2);
  overflow:hidden;
}
.promo-block h2,
.promo-block h3{font-size:20px;}
.promo-block p{margin-top:6px;font-size:14.5px;line-height:1.7;color:var(--text-muted);max-width:46em;}
.promo-block .promo-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.promo-block .btn{flex-shrink:0;white-space:nowrap;}

/* --------------------------------------------------------------------------
   14. 右下角常驻悬浮 CTA
   -------------------------------------------------------------------------- */
.float-cta{
  position:fixed;
  right:22px;
  bottom:calc(22px + env(safe-area-inset-bottom,0px));
  z-index:20;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:0 20px;
  border-radius:var(--r-pill);
  background:var(--text);
  color:var(--bg-panel);
  font-size:14.5px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 18px 34px -16px var(--ink-a14),0 4px 12px -6px var(--ink-a10);
  transition:transform .18s ease,box-shadow .22s ease;
}
.float-cta:hover{transform:translateY(-1px);box-shadow:0 22px 40px -18px var(--ink-a14);}
.float-cta svg{color:var(--bg-panel);flex-shrink:0;}
/* 页尾避让垫块：滚到底时浮标不压正文与页脚法律链 */
body:has(.float-cta)::after{
  content:"";
  display:block;
  height:calc(88px + env(safe-area-inset-bottom,0px));
}

/* --------------------------------------------------------------------------
   15. 预览辅助类（design-preview 专用排版，正式页面不使用）
   -------------------------------------------------------------------------- */
.pv-block{margin-top:var(--sp-6);}
.pv-note{font-size:13.5px;color:var(--text-muted);}
.pv-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.pv-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;}
.pv-swatch{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-panel);
  min-width:0;
}
.pv-swatch code{font-size:11.5px;color:var(--text);min-width:0;}
.pv-swatch .pv-val{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);white-space:nowrap;}
.pv-chip{width:26px;height:26px;border-radius:8px;border:1px solid var(--border);flex-shrink:0;}
.pv-chip--bg{background:var(--bg);}
.pv-chip--panel{background:var(--bg-panel);}
.pv-chip--panel2{background:var(--bg-panel-2);}
.pv-chip--border{background:var(--border);}
.pv-chip--grid{background:var(--grid-line);}
.pv-chip--win{background:var(--win-top);}
.pv-chip--accent{background:var(--accent);}
.pv-chip--accent-dark{background:var(--accent-dark);}
.pv-chip--accent-2{background:var(--accent-2);}
.pv-chip--accent-bright{background:var(--accent-bright);}
.pv-chip--text{background:var(--text);}
.pv-chip--muted{background:var(--text-muted);}
.pv-chip--success{background:var(--success);}
.pv-chip--warn{background:var(--warn);}
.pv-chip--error{background:var(--error);}
.pv-types{display:grid;gap:var(--sp-5);}
.pv-type{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:var(--sp-5);
  align-items:baseline;
  padding-bottom:var(--sp-5);
  border-bottom:1px dashed var(--grid-line);
  min-width:0;
}
.pv-type:last-child{border-bottom:0;padding-bottom:0;}
.pv-type-label{font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);}
.pv-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.pv-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pv-checks{display:grid;gap:10px;font-size:14px;color:var(--text-muted);}
.pv-checks li{display:flex;gap:9px;align-items:flex-start;}

/* --------------------------------------------------------------------------
   16. 组件响应式
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .hero{padding:40px var(--pad-x);}
  .hero-inner{grid-template-columns:1fr;gap:56px;}
  .hero-inner::before{display:none;}
  .hero-h1{font-size:46px;}
  .hero-stage{max-width:560px;width:100%;margin:0 auto;}
  .feature-browser{grid-template-columns:1fr;}
  .feature-tabs{flex-direction:row;overflow-x:auto;padding-bottom:4px;}
  .feature-tab{width:auto;flex:0 0 auto;}
  .plat-grid{grid-template-columns:repeat(3,1fr);}
  .post-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:768px){
  .plan-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .pv-grid-2,.pv-grid-3{grid-template-columns:1fr;}
  .pv-type{grid-template-columns:1fr;gap:var(--sp-2);}
  .feature-panel{padding:var(--sp-6);}
}

@media (max-width:680px){
  .hero-h1{font-size:34px;}
  .hero-sub{font-size:16px;}
  .hero-actions{flex-wrap:wrap;}
  .hero-meta .meta-row{align-items:flex-start;flex-direction:column;gap:8px;}
  .meta-label{flex:0 0 auto;}
  .hero-stage{height:auto;padding-bottom:0;}
  .stage-halo,.stage-dots,.float-badge{display:none;}
  .conn-card{position:relative;right:auto;top:auto;width:100%;margin-bottom:14px;}
  .client-win{position:relative;left:auto;right:auto;top:auto;height:auto;}
  .win-body{padding:14px 12px;}
  .route{height:auto;min-height:48px;padding:8px 10px;}
  .route-kind{display:none;}
  .proto-row{flex-wrap:wrap;height:auto;padding:10px 12px;gap:6px;}
  .fact-badges{position:relative;bottom:auto;justify-content:flex-start;flex-wrap:wrap;margin-top:14px;}
  .plat-grid{grid-template-columns:repeat(2,1fr);}
  .post-grid{grid-template-columns:1fr;}
  .float-cta{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));min-height:44px;padding:0 16px;font-size:13.5px;}
  .promo-block{padding:var(--sp-5);}
  .promo-block .promo-actions{width:100%;}
}

@media (max-width:420px){
  .plat-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .pulse,.conn-card::after{animation:none;}
  .pulse{opacity:1;transform:none;}
  .conn-card::after{transform:none;opacity:.5;}
  .plat-card:hover,.post-card:hover,.float-cta:hover{transform:none;}
}