@charset "utf-8";
/* ============================================================================
   VPNTA · components.css
   跨页面组件：线路核首屏 / 统计卡 / 特性切换 / 目录条 / FAQ / 套餐卡 /
   线路表 / 平台卡 / 文章卡 / callout / 推广块 / 悬浮 CTA / 缓滚带 / 演示页
   依赖 base.css 的设计令牌，本文件不定义新颜色。
   ========================================================================== */

/* ======================================================================
   1. 首屏：线路核装置（visual-left 镜像双栏）
   ====================================================================== */
.hero{
  position:relative;
  z-index:1;
  max-width:100%;
  overflow-x:clip;
  padding-top:40px;
  padding-bottom:24px;
  background:linear-gradient(180deg,var(--glass-55) 0%,var(--glass-00) 42%,var(--panel2-42) 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:760px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(660px 480px at 18% 16%,var(--accent-16),rgba(11,111,130,0) 68%),
    radial-gradient(560px 420px at 86% 2%,var(--violet-13),rgba(111,91,214,0) 72%);
}

.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:44px;
  align-items:center;
}
.hero-inner > *{min-width:0;}

.hero-visual{position:relative;width:100%;min-width:0;}

/* —— 装置舞台 —— */
.core-stage{
  position:relative;
  z-index:2;
  width:100%;
  height:512px;
}
.core-floor{
  position:absolute;
  left:50%;
  top:432px;
  width:440px;
  height:64px;
  margin-left:-220px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,var(--accent-30),rgba(11,111,130,0) 70%);
  filter:blur(10px);
  z-index:0;
}

.core-disc{
  position:absolute;
  left:50%;
  top:250px;
  width:400px;
  height:400px;
  margin:-200px 0 0 -200px;
  border-radius:50%;
  z-index:1;
  background:var(--disc-fill);
  box-shadow:var(--disc-shadow);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.core-disc::before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:50%;
  border:1px solid var(--glass-80);
}
.core-disc::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--disc-tint);
}

.core-shine{
  position:absolute;
  left:50%;
  top:250px;
  width:400px;
  height:400px;
  margin:-200px 0 0 -200px;
  border-radius:50%;
  z-index:6;
  pointer-events:none;
  background:var(--disc-shine);
}

/* —— 三片渐变金属棱片 —— */
.fin{
  position:absolute;
  left:50%;
  top:250px;
  border-radius:50%;
  transform:rotate(var(--rot)) translate(var(--tx),var(--ty));
  animation:fin-breathe 7.4s ease-in-out infinite;
}
.fin::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  mix-blend-mode:soft-light;
  background:var(--fin-sheen);
}
.fin-a{
  width:322px;height:88px;margin:-44px 0 0 -161px;
  --rot:-24deg;--tx:-6px;--ty:-58px;
  z-index:3;
  background:var(--fin-a-fill);
  box-shadow:var(--fin-shadow-a);
  animation-duration:7.2s;
}
.fin-b{
  width:300px;height:92px;margin:-46px 0 0 -150px;
  --rot:6deg;--tx:8px;--ty:6px;
  z-index:4;
  background:var(--fin-b-fill);
  box-shadow:var(--fin-shadow-b);
  animation-duration:8s;
  animation-delay:-1.6s;
}
.fin-c{
  width:262px;height:74px;margin:-37px 0 0 -131px;
  --rot:34deg;--tx:14px;--ty:66px;
  z-index:5;
  background:var(--fin-c-fill);
  box-shadow:var(--fin-shadow-c);
  animation-duration:6.6s;
  animation-delay:-2.9s;
}
@keyframes fin-breathe{
  0%,100%{transform:rotate(var(--rot)) translate(var(--tx),var(--ty)) scale(1);}
  50%{transform:rotate(var(--rot)) translate(var(--tx),var(--ty)) scale(1.018);}
}

/* —— 黑色等宽标注线 —— */
.anno{
  position:absolute;
  display:flex;
  align-items:center;
  gap:6px;
  z-index:9;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  line-height:1;
  letter-spacing:.12em;
  color:var(--text);
  white-space:nowrap;
}
.anno .sq{width:5px;height:5px;border-radius:1px;background:var(--text);flex:none;}
.anno::after{content:"";position:absolute;background:var(--ink-line);}

.a1{left:200px;top:10px;transform:translateX(-50%);}
.a1::after{left:50%;top:22px;width:1px;height:74px;}
.a2{left:480px;top:10px;transform:translateX(-50%);}
.a2::after{left:50%;top:22px;width:1px;height:70px;}
.a3{left:100px;top:190px;transform:translate(-100%,-50%);}
.a3::after{left:100%;top:50%;width:45px;height:1px;}
.a4{left:100px;top:310px;transform:translate(-100%,-50%);}
.a4::after{left:100%;top:50%;width:45px;height:1px;}
.a5{left:560px;top:150px;transform:translateY(-50%);}
.a5::after{right:100%;top:50%;width:40px;height:1px;}
.a6{left:560px;top:330px;transform:translateY(-50%);}
.a6::after{right:100%;top:50%;width:34px;height:1px;}
.a7{left:470px;top:486px;transform:translateX(-50%);}
.a7::after{left:50%;bottom:100%;width:1px;height:74px;}
.a8{left:300px;top:486px;transform:translateX(-50%);}
.a8::after{left:50%;bottom:100%;width:1px;height:32px;}

/* —— 漂浮元素一：浅色客户端窗口 —— */
.win-card{
  position:absolute;
  left:0;
  top:310px;
  width:262px;
  z-index:12;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--glass-95);
  background:linear-gradient(180deg,var(--glass-98),var(--panel-88));
  box-shadow:var(--shadow-panel),0 0 0 1px var(--border-50);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.win-bar{
  display:flex;
  align-items:center;
  gap:5px;
  height:30px;
  padding:0 11px;
  border-bottom:1px solid var(--hairline);
  background:linear-gradient(180deg,var(--glass-95),var(--bg-panel-2));
}
.dot{width:7px;height:7px;border-radius:50%;flex:none;}
.dot-r{background:var(--error);}
.dot-y{background:var(--warn);}
.dot-g{background:var(--success);}
.win-title{
  margin-left:6px;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.1em;
  color:var(--text-muted);
}
.win-rows{padding:7px 9px;}
.win-row{
  display:flex;
  align-items:center;
  gap:7px;
  height:24px;
  padding:0 6px;
  border-radius:var(--r-xs);
  font-size:11px;
  color:var(--text);
}
.win-row.is-on{background:var(--accent-09);}
.wr-led{width:5px;height:5px;border-radius:50%;background:var(--border);flex:none;}
.win-row.is-on .wr-led{background:var(--success);box-shadow:0 0 0 3px var(--success-16);}
.wr-state{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.1em;
  color:var(--accent-dark);
}
.win-chips{display:flex;gap:5px;padding:0 9px 10px;}
.win-chips span{
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.06em;
  color:var(--text-muted);
  padding:3px 6px;
  border-radius:4px;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
}

/* —— 漂浮元素二：深色线路状态终端 —— */
.term{
  position:absolute;
  left:6px;
  top:428px;
  width:196px;
  z-index:14;
  padding:11px 12px 12px;
  border-radius:var(--r-sm);
  background:var(--term-fill);
  box-shadow:var(--term-shadow);
  font-family:var(--font-mono);
  font-size:10px;
  line-height:1;
}
.term-head{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--flag-gold);
  font-size:10px;
  letter-spacing:.14em;
  padding-bottom:8px;
  border-bottom:1px solid var(--on-ink-line);
}
.term-led{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px var(--success-16);
  flex:none;
}
.term-line{display:flex;align-items:center;gap:8px;padding-top:8px;}
.term-k{color:var(--on-ink-muted);letter-spacing:.12em;}
.term-v{color:var(--on-ink);letter-spacing:.04em;}

/* —— 文案列 —— */
.hero-copy{
  position:relative;
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:28px;
  max-width:100%;
  padding:0 13px;
  border-radius:var(--r-pill);
  border:1px solid var(--glass-95);
  background:var(--glass-80);
  box-shadow:var(--shadow-soft),inset 0 1px 0 var(--surface);
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--accent-dark);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pulse{position:relative;width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;}
.pulse::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid var(--accent);
  opacity:.6;
  animation:pulse-ring 3.4s ease-out infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(.6);opacity:.7;}
  70%{transform:scale(1.6);opacity:0;}
  100%{transform:scale(1.6);opacity:0;}
}

.hero-h1{
  margin-top:22px;
  font-family:var(--font-display);
  font-size:64px;
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.035em;
  max-width:100%;
}
.h1-brand{
  display:block;
  background:linear-gradient(100deg,var(--accent) 0%,var(--grad-blue-2) 48%,var(--violet) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.h1-line{display:block;color:var(--text);}
html[lang|="ja"] .hero-h1{overflow-wrap:anywhere;}

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

.hero-desc{
  margin-top:26px;
  max-width:520px;
  font-size:16px;
  line-height:1.72;
  color:var(--text-muted);
}
.hero-desc strong{
  font-weight:600;
  color:var(--text);
  background:linear-gradient(180deg,transparent 62%,var(--accent-16) 62%);
  padding:0 1px;
}

.trust-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,max-content));
  gap:10px 30px;
  margin-top:24px;
}
.trust-grid li{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--text-muted);
  white-space:nowrap;
}
.trust-grid .tick{width:13px;height:13px;}

.pay-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px;}
.pay-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--text-muted);
  margin-right:2px;
}

/* —— 品牌墙 —— */
.brandwall{
  position:relative;
  z-index:4;
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid var(--hairline);
}
.bw-row{display:flex;align-items:center;gap:26px;padding:9px 0;flex-wrap:wrap;}
.bw-label{
  flex:none;
  width:86px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--text-muted);
}
.bw-list{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.bw-list li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text);}
.flag-slot{width:24px;height:18px;display:grid;place-items:center;flex:none;}
.flag-slot svg{width:24px;height:18px;filter:drop-shadow(0 1px 1px rgba(12,26,40,.22));}
.pi{width:15px;height:15px;flex:none;color:var(--text-muted);}
.bw-list li .pi{color:var(--text-muted);}

/* —— 首屏下方统计卡露边 —— */
.peek{position:relative;z-index:1;padding-top:26px;}
.peek-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.peek-grid > *{min-width:0;}

/* ======================================================================
   2. 统计卡（蓝 / 粉 / 橙 + 顶部细紫条 + 等宽大号数字）
   ====================================================================== */
.stat-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:200px;
  padding:22px 24px 26px;
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--card-blue);
  box-shadow:var(--shadow-card);
}
.stat-card.is-pink{background:var(--card-pink);}
.stat-card.is-orange{background:var(--card-orange);}
.stat-bar{
  position:absolute;
  left:24px;
  top:0;
  width:46px;
  height:4px;
  border-radius:0 0 3px 3px;
  background:var(--violet);
}
.stat-tag{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  max-width:100%;
  height:24px;
  padding:0 10px;
  border-radius:var(--r-xs);
  background:var(--glass-55);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stat-num{
  display:block;
  margin-top:14px;
  font-family:var(--font-display);
  font-size:clamp(40px,4.6vw,56px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--text);
}
.stat-note{
  margin-top:auto;
  padding-top:14px;
  font-size:13px;
  line-height:1.6;
  color:var(--text-muted);
}

/* 事实数字滚动容器：等宽数字 + 定宽，防逐帧抖动 */
.counter{
  display:inline-block;
  min-width:2.6ch;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  text-align:left;
}

/* 事实数据条（窄横条） */
.stat-band{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 28px;
  padding:14px 20px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--glass-72);
  box-shadow:var(--shadow-soft);
}
.stat-band-item{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--text-muted);
  white-space:nowrap;
}
.stat-band-item b{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text);
}

/* ======================================================================
   3. Tab 切换（特性切换栏 / 通用 tab / 套餐周期）
   ====================================================================== */
.feature-tabs{
  display:flex;
  gap:8px;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:6px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-soft);
  scrollbar-width:none;
}
.feature-tabs::-webkit-scrollbar{display:none;}

.feature-tabs [role="tab"]{
  flex:1 1 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 18px;
  border:0;
  border-radius:var(--r-sm);
  background:transparent;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--text-muted);
  white-space:nowrap;
  cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.feature-tabs [role="tab"]:hover{color:var(--text);}
.feature-tabs [role="tab"][aria-selected="true"]{
  background:var(--teal-bright);
  color:var(--text);
  font-weight:700;
  box-shadow:0 12px 24px -18px var(--accent);
}

.feature-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(24px,3.4vw,44px);
  align-items:start;
  margin-top:clamp(20px,2.6vw,32px);
}
.feature-split > *{min-width:0;}
.feature-panel h3{margin-bottom:12px;}
.feature-panel p{font-size:15px;line-height:1.8;color:var(--text-muted);}
.feature-list{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.feature-list li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:14px;
  line-height:1.6;
  color:var(--text);
}
.feature-list .tick{width:14px;height:14px;margin-top:3px;}

/* 通用 tab（小型，用于对比表/平台切换） */
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:100%;
}
.tabs [role="tab"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--r-xs);
  background:var(--glass-72);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--text-muted);
  white-space:nowrap;
  cursor:pointer;
}
.tabs [role="tab"][aria-selected="true"]{
  background:var(--text);
  border-color:var(--text);
  color:var(--flag-white);
  font-weight:600;
}
.tab-panel[hidden]{display:none;}

/* 客户端窗口卡（特性区右栏） */
.client-window{
  position:relative;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--glass-95);
  background:linear-gradient(180deg,var(--glass-98),var(--bg-panel));
  box-shadow:var(--shadow-panel),0 0 0 1px var(--border-50);
}
.cw-bar{
  display:flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 12px;
  border-bottom:1px solid var(--hairline);
  background:linear-gradient(180deg,var(--glass-95),var(--bg-panel-2));
}
.cw-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.cw-dot.r{background:var(--error);}
.cw-dot.y{background:var(--warn);}
.cw-dot.g{background:var(--success);}
.cw-title{
  margin-left:8px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  color:var(--text-muted);
}
.cw-body{display:flex;flex-direction:column;gap:10px;padding:14px 16px 18px;}
.cw-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--r-xs);
  border:1px solid var(--hairline);
  background:var(--glass-72);
  font-size:13px;
  color:var(--text);
}
.cw-row.is-on{background:var(--accent-09);border-color:var(--accent-16);}
.cw-led{width:6px;height:6px;border-radius:50%;background:var(--border);flex:none;}
.cw-row.is-on .cw-led{background:var(--success);box-shadow:0 0 0 3px var(--success-16);}
.cw-state{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--accent-dark);
  white-space:nowrap;
}
.cw-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}

/* ======================================================================
   4. 长页目录条（toc）：吸顶 + 当前章节高亮
   ====================================================================== */
.toc-tabs{
  position:sticky;
  top:0;
  z-index:12;
  display:flex;
  gap:8px;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 0;
  background:linear-gradient(180deg,var(--bg) 72%,var(--panel2-42));
  border-bottom:1px solid var(--hairline);
  scrollbar-width:none;
}
.toc-tabs::-webkit-scrollbar{display:none;}
.toc-tabs a{
  flex:none;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:var(--r-xs);
  border:1px solid var(--border);
  background:var(--glass-72);
  font-size:12.5px;
  color:var(--text-muted);
  white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.toc-tabs a:hover{color:var(--text);border-color:var(--accent);}
.toc-tabs a.is-active{
  background:var(--text);
  border-color:var(--text);
  color:var(--flag-white);
  font-weight:600;
}
body:has(.toc-tabs) section[id]{scroll-margin-top:calc(var(--head-h) + 72px);}

/* ======================================================================
   5. FAQ 折叠项
   ====================================================================== */
.faq{display:flex;flex-direction:column;gap:10px;}
.faq-item{
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--shadow-soft),inset 0 1px 0 var(--surface);
  overflow:hidden;
}
.faq-item summary{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:56px;
  padding:14px 18px;
  font-size:15.5px;
  font-weight:600;
  line-height:1.5;
  color:var(--text);
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"";
  flex:none;
  width:9px;
  height:9px;
  margin-left:auto;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(45deg);
  transition:transform .2s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(-135deg);}
.faq-item[open] summary{color:var(--accent-dark);}
.faq-body{
  padding:0 18px 18px;
  font-size:14.5px;
  line-height:1.78;
  color:var(--text-muted);
}
.faq-body p + p{margin-top:10px;}

/* ======================================================================
   6. 套餐卡
   ====================================================================== */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
  padding-top:14px;
}
.plan-grid > *{min-width:0;}

.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px 24px;
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card),inset 0 1px 0 var(--surface);
}
.plan-card.is-featured{
  border-color:var(--accent);
  background:linear-gradient(180deg,var(--glass-98),var(--bg-panel));
  box-shadow:0 34px 60px -30px var(--accent-45),inset 0 1px 0 var(--surface);
}
.plan-card.is-current{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.plan-flag{
  position:absolute;
  top:0;
  right:20px;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 12px;
  border-radius:var(--r-pill);
  background:var(--violet);
  color:var(--flag-white);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  white-space:nowrap;
}
.plan-name{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.plan-price{
  display:flex;
  align-items:baseline;
  gap:6px;
  font-family:var(--font-display);
  font-size:40px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.05;
  color:var(--text);
}
.plan-price small{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--text-muted);
}
.plan-traffic{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  min-height:26px;
  padding:0 10px;
  border-radius:var(--r-xs);
  background:var(--accent-09);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--accent-dark);
  white-space:nowrap;
}
.plan-list{display:flex;flex-direction:column;gap:9px;}
.plan-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--text-muted);
}
.plan-list .tick{width:13px;height:13px;margin-top:3px;}
.plan-card .btn{margin-top:auto;width:100%;}

/* ======================================================================
   7. 表格（线路表 / 套餐对比表）—— 窄屏横滑容器
   ====================================================================== */
.table-scroll{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--shadow-soft);
}
.table-scroll table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
  font-size:13.5px;
}
.table-scroll caption{
  padding:14px 16px 0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-align:left;
  color:var(--text-muted);
}
.table-scroll th,
.table-scroll td{
  padding:12px 16px;
  text-align:left;
  border-bottom:1px solid var(--hairline);
  word-break:keep-all;
  vertical-align:middle;
}
.table-scroll th{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--text);
  background:var(--bg-panel-2);
  white-space:nowrap;
}
.table-scroll tbody tr:last-child td{border-bottom:0;}
.table-scroll tbody tr:hover td{background:var(--accent-06);}
.table-scroll .region-head th{
  background:var(--accent-06);
  color:var(--accent-dark);
  font-size:10.5px;
  letter-spacing:.18em;
}
.table-scroll .cell-flag{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.table-scroll .cell-flag svg{width:20px;height:15px;flex:none;}
.table-scroll .cell-type{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--accent-dark);
  white-space:nowrap;
}
.table-scroll .cell-media{color:var(--text-muted);}

/* 博客正文里可能出现的裸表格防御 */
.prose > .data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}

/* ======================================================================
   8. 平台卡
   ====================================================================== */
.platform-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}
.platform-grid > *{min-width:0;}
.platform-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-soft),inset 0 1px 0 var(--surface);
}
.platform-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:none;
  border-radius:var(--r-sm);
  background:var(--accent-09);
  color:var(--accent-dark);
}
.platform-icon svg{width:20px;height:20px;}
.platform-name{font-size:14px;font-weight:600;color:var(--text);}
.platform-note{font-size:12px;line-height:1.6;color:var(--text-muted);}
.platform-card .btn{width:100%;margin-top:auto;}

/* ======================================================================
   9. 文章卡 + 博客分栏 hero
   ====================================================================== */
.post-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.post-grid > *{min-width:0;}

.post-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px;
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card),inset 0 1px 0 var(--surface);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-panel),inset 0 1px 0 var(--surface);}
.post-tag{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:24px;
  padding:0 10px;
  border-radius:var(--r-xs);
  background:var(--accent-09);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  color:var(--accent-dark);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.post-date{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--text-muted);
}
.post-title{font-size:17px;font-weight:700;line-height:1.45;color:var(--text);}
.post-excerpt{font-size:13.5px;line-height:1.72;color:var(--text-muted);}
.post-more{
  margin-top:auto;
  padding-top:8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--accent-dark);
}

.blog-hero{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,1fr);
  gap:2rem;
  align-items:start;
}
.blog-hero > *{min-width:0;}
.blog-meta-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-soft),inset 0 1px 0 var(--surface);
}
.blog-meta-row{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-bottom:10px;
  border-bottom:1px solid var(--hairline);
}
.blog-meta-row:last-child{padding-bottom:0;border-bottom:0;}
.blog-meta-k{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.blog-meta-v{font-size:13.5px;color:var(--text);}

/* ======================================================================
   10. callout 引用块
   ====================================================================== */
.callout{
  position:relative;
  padding:16px 18px 16px 20px;
  border-radius:var(--r-sm);
  border-left:3px solid var(--accent);
  background:var(--accent-06);
  font-size:14px;
  line-height:1.78;
  color:var(--text);
}
.callout p + p{margin-top:8px;}
.callout.is-warn{background:var(--warn-09);border-left-color:var(--warn);}
.callout.is-error{background:var(--error-09);border-left-color:var(--error);}
.callout strong{font-weight:600;}

/* ======================================================================
   11. 文末推广块（博客文章页）
   ====================================================================== */
.promo-block{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  padding:clamp(20px,3vw,30px);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:linear-gradient(120deg,var(--bg-panel-2),var(--glass-95));
  box-shadow:var(--shadow-card),inset 0 1px 0 var(--surface);
}
.promo-block .promo-body{flex:1 1 260px;min-width:0;}
.promo-block .promo-brand{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--text);
}
.promo-block .promo-line{
  margin-top:6px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-muted);
}
.promo-block .btn{flex-shrink:0;white-space:nowrap;}

/* ======================================================================
   12. 右下角常驻悬浮 CTA
   ====================================================================== */
.float-cta{
  position:fixed;
  right:22px;
  bottom:calc(22px + env(safe-area-inset-bottom,0px));
  z-index:40;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 18px;
  border-radius:var(--r-pill);
  background:var(--text);
  color:var(--flag-white);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  white-space:nowrap;
  box-shadow:var(--shadow-cta);
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.float-cta:hover{background:var(--accent-dark);transform:translateY(-1px);}
.float-cta svg{width:14px;height:14px;flex:none;}

/* 页尾避让：与浮标等高的垫块，防止压住正文段尾与页脚法律链 */
body:has(.float-cta)::after{
  content:"";
  display:block;
  height:calc(88px + env(safe-area-inset-bottom,0px));
}

/* ======================================================================
   13. 横向缓滚带（动效层标记，静态时也完整可读）
   ====================================================================== */
.ticker{
  position:relative;
  max-width:100%;
  overflow:hidden;
  padding:12px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-panel);
}
.ticker-track{
  display:flex;
  width:max-content;
  align-items:center;
  will-change:transform;
}
.ticker-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 22px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  color:var(--text-muted);
  white-space:nowrap;
}
.ticker-item::after{
  content:"";
  width:4px;
  height:4px;
  margin-left:16px;
  border-radius:50%;
  background:var(--border);
  flex:none;
}
.ticker-item b{color:var(--text);font-weight:600;}

/* ======================================================================
   14. 步骤列表（教程页 / 手册页）
   ====================================================================== */
.steps{
  counter-reset:step;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.steps > li{
  position:relative;
  padding-left:52px;
  counter-increment:step;
  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-radius:50%;
  border:1px solid var(--border);
  background:var(--accent-09);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  color:var(--accent-dark);
}
.steps > li h3{margin-bottom:8px;font-size:16px;}
.steps > li p{font-size:14.5px;line-height:1.8;color:var(--text-muted);}

/* ======================================================================
   15. 演示页专用示例类（design-preview.html 使用，勿在正式页引用）
   ====================================================================== */
.pv-section{
  padding-top:clamp(32px,4vw,56px);
  padding-bottom:clamp(32px,4vw,56px);
  border-top:1px solid var(--hairline);
}
.pv-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:12px;
  margin-bottom:20px;
}
.pv-head h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);}
.pv-note{font-size:12.5px;line-height:1.7;color:var(--text-muted);}
.pv-stack{display:flex;flex-direction:column;gap:16px;}
.pv-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}

.pv-swatches{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:12px;
}
.pv-swatch{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:var(--bg-panel);
}
.pv-swatch-chip{
  height:52px;
  border-radius:var(--r-xs);
  border:1px solid var(--hairline);
}
.pv-swatch-name{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--text);
  overflow-wrap:anywhere;
}
.pv-swatch-val{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.02em;
  color:var(--text-muted);
  overflow-wrap:anywhere;
}

/* 色块取样类：每个令牌一个类，演示页无需内联样式 */
.pv-c-bg{background:var(--bg);}
.pv-c-panel{background:var(--bg-panel);}
.pv-c-panel2{background:var(--bg-panel-2);}
.pv-c-border{background:var(--border);}
.pv-c-accent{background:var(--accent);}
.pv-c-accent-dark{background:var(--accent-dark);}
.pv-c-text{background:var(--text);}
.pv-c-muted{background:var(--text-muted);}
.pv-c-success{background:var(--success);}
.pv-c-warn{background:var(--warn);}
.pv-c-error{background:var(--error);}
.pv-c-violet{background:var(--violet);}
.pv-c-violet-soft{background:var(--violet-soft);}
.pv-c-teal{background:var(--teal-bright);}
.pv-c-card-blue{background:var(--card-blue);}
.pv-c-card-pink{background:var(--card-pink);}
.pv-c-card-orange{background:var(--card-orange);}
.pv-c-ink{background:var(--ink-900);}
.pv-c-grad{
  background:linear-gradient(104deg,var(--teal-bright) 0%,var(--accent) 26%,var(--grad-blue) 56%,var(--violet) 84%,var(--violet-soft) 100%);
}

.pv-type-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:16px;
  padding-top:14px;
  padding-bottom:14px;
  border-bottom:1px dashed var(--border);
}
.pv-type-label{
  flex:none;
  width:96px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--text-muted);
}

/* ======================================================================
   16. 组件响应式
   ====================================================================== */
@media (max-width:1180px){
  .hero-h1{font-size:56px;}
}

@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr;gap:36px;}
  .hero-copy{order:-1;}
  .core-stage{margin-inline:auto;}
  .hero-desc{max-width:640px;}
  .feature-split{grid-template-columns:1fr;}
  .blog-hero{grid-template-columns:1fr;}
  .blog-meta-card{order:-1;flex-direction:row;flex-wrap:wrap;gap:16px;}
  .blog-meta-row{padding-bottom:0;border-bottom:0;padding-right:16px;border-right:1px solid var(--hairline);}
  .blog-meta-row:last-child{border-right:0;padding-right:0;}
}

@media (max-width:980px){
  .peek-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .platform-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:900px){
  .core-stage{height:430px;transform:scale(.82);transform-origin:top center;}
  .anno{font-size:9.5px;}
  .core-disc{width:330px;height:330px;margin:-165px 0 0 -165px;top:220px;}
  .core-shine{width:330px;height:330px;margin:-165px 0 0 -165px;top:220px;}
  .fin{top:220px;}
  .fin-a{width:266px;height:74px;margin:-37px 0 0 -133px;--tx:-4px;--ty:-48px;}
  .fin-b{width:248px;height:76px;margin:-38px 0 0 -124px;--ty:4px;}
  .fin-c{width:216px;height:62px;margin:-31px 0 0 -108px;--ty:54px;}
  .core-floor{top:376px;width:360px;margin-left:-180px;}
  .win-card{top:262px;width:238px;}
  .term{left:2px;top:382px;width:184px;}
  .hero-h1{font-size:52px;}
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;}
}

@media (max-width:768px){
  .hero-h1{font-size:clamp(1.75rem,1.2rem + 2.6vw,2.5rem);line-height:1.12;letter-spacing:-.02em;}
  .hero-desc{font-size:15px;}
  .bw-row{gap:14px;}
  .bw-label{width:auto;}
}

@media (max-width:640px){
  .hero{padding-top:26px;padding-bottom:18px;}
  .hero-cta{width:100%;}
  .hero-cta .btn{flex:1 1 100%;}

  .core-stage{height:340px;transform:scale(.62);transform-origin:top center;}
  .anno{display:none;}

  .peek-grid{grid-template-columns:1fr;}
  .stat-card{min-height:170px;}

  .plan-grid{grid-template-columns:1fr;}
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .post-grid{grid-template-columns:1fr;}

  .feature-tabs [role="tab"]{min-height:46px;padding:0 14px;font-size:11px;}

  .toc-tabs a{font-size:12px;}

  .float-cta{
    right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    min-height:40px;
    padding:0 14px;
    font-size:11px;
    letter-spacing:.1em;
  }

  .steps > li{padding-left:46px;}
}

@media (prefers-reduced-motion:reduce){
  .fin{animation:none;}
  .pulse::after{animation:none;opacity:0;}
  .post-card:hover{transform:none;}
  .float-cta:hover{transform:none;}
}