/* ==========================================================================
   VPNWing — base.css
   设计令牌 / reset / 排版 / 按钮 / 头部 / 页脚 / 首屏装置 / 通用工具类
   颜色、字体、圆角、阴影一律取自 :root 令牌，组件内不出现硬编码颜色。
   ========================================================================== */

:root{
  /* ---- 基础色板 ---- */
  --bg: #F7EFE2;
  --bg-panel: #FFFCF5;
  --bg-panel-2: #EFE2CC;
  --border: #E2D3BB;
  --accent: #A61B57;
  --accent-dark: #7A0F3D;
  --accent-soft: #C9558A;
  --text: #241C15;
  --text-muted: #6B5C4E;
  --success: #2C7A4B;
  --warn: #B0761A;
  --error: #B23A2E;

  /* ---- 深墨面板层 ---- */
  --panel-ink: #241A15;
  --panel-a: #2E2119;
  --panel-b: #191210;
  --winbar-a: #F4E9D7;
  --winbar-b: #EADCC4;

  /* ---- 旗帜用色 ---- */
  --flag-white: #FFFCF5;
  --flag-red: #BF3A2E;
  --flag-navy: #233A6C;

  /* ---- 半透明工艺层 ---- */
  --hero-wash: rgba(166, 27, 87, 0.05);
  --accent-tint: rgba(166, 27, 87, 0.10);
  --success-tint: rgba(44, 122, 75, 0.16);
  --warn-tint: rgba(176, 118, 26, 0.14);
  --grain: rgba(255, 244, 228, 0.06);
  --hairline: rgba(255, 246, 232, 0.08);
  --panel-edge: rgba(255, 246, 232, 0.05);
  --hi-light: rgba(255, 246, 232, 0.16);
  --hi-white: rgba(255, 255, 255, 0.9);
  --hi-soft: rgba(255, 255, 255, 0.7);
  --btn-top: rgba(255, 246, 232, 0.3);
  --dot-top: rgba(255, 255, 255, 0.45);
  --win-shadow: rgba(12, 8, 6, 0.6);
  --win-edge: rgba(12, 8, 6, 0.28);
  --drop-dark: rgba(0, 0, 0, 0.6);
  --ink-shadow-strong: rgba(36, 26, 21, 0.8);
  --switch-shade: rgba(0, 0, 0, 0.18);
  --switch-knob: rgba(0, 0, 0, 0.28);
  --veil: rgba(36, 26, 21, 0.52);

  /* ---- 阴影 ---- */
  --shadow-accent: 0 40px 80px -40px rgba(166, 27, 87, 0.34);
  --shadow-accent-soft: 0 18px 36px -16px rgba(166, 27, 87, 0.28);
  --shadow-ink: 0 24px 50px -30px rgba(36, 26, 21, 0.5);
  --shadow-card: 0 10px 26px -14px rgba(36, 26, 21, 0.22);
  --shadow-btn: 0 14px 30px -14px rgba(166, 27, 87, 0.62);

  /* ---- 字体 ---- */
  --font-display: "Inter", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans SC", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- 圆角 ---- */
  --radius-xl: 28px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-btn: 10px;
  --radius-pill: 999px;

  /* ---- 布局尺子 ---- */
  --maxw: 1280px;
  --gutter: 40px;
  --header-h: 62px;
  --section-gap: 64px;
  --toc-top: 12px;
  --toc-reserve: 76px;
}

/* ==========================================================================
   reset
   ========================================================================== */

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
p,
li,
dd,
dt,
figcaption{ overflow-wrap: break-word; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd{ margin: 0; }

img, svg, video{ max-width: 100%; }

a{ color: inherit; }

button,
input,
select,
textarea{
  font: inherit;
  color: inherit;
}

button{ cursor: pointer; }

hr{
  border: 0;
  border-top: 1px solid var(--border);
  margin-block: 28px;
}

/* 键盘焦点可见：全站交互元素统一焦点环，严禁 outline:none 不给替代 */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection{
  background: var(--accent);
  color: var(--bg-panel);
}

/* ==========================================================================
   排版
   ========================================================================== */

h1,
.h1{
  font-family: var(--font-display);
  font-size: clamp(52px, 5.2vw, 66px);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text);
}

h2,
.h2{
  font-family: var(--font-display);
  font-size: clamp(26px, 2.9vw, 38px);
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text);
}

h3,
.h3{
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

h4,
.h4{
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
}

p{ font-size: 14.5px; line-height: 1.75; color: var(--text-muted); }

strong{ color: var(--text); font-weight: 700; }

small{ font-size: 12px; }

.mono{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.lead{
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 62ch;
}

/* 正文容器：长文/教程/法务页共用 */
.prose{
  max-width: 74ch;
  min-width: 0;
}

.prose > * + *{ margin-top: 16px; }

.prose h2{
  font-size: clamp(24px, 2.4vw, 30px);
  margin-top: 40px;
}

.prose h3{ margin-top: 28px; }

.prose p,
.prose li{
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-muted);
}

.prose ul,
.prose ol{
  padding-left: 22px;
  margin: 0;
}

.prose li + li{ margin-top: 8px; }

.prose a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 正文里的按钮保持自身配色，不被正文链接色覆盖 */
.prose a.btn{ text-decoration: none; }
.prose a.btn--primary,
.prose a.btn--ink{ color: var(--bg-panel); }
.prose a.btn--ghost,
.prose a.btn--paper{ color: var(--text); }

/* 超长不可断串（订阅地址、安装包文件名）防破版 */
code{
  font-family: var(--font-mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--bg-panel-2);
  color: var(--text);
}

pre{
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
}

pre code{
  background: none;
  padding: 0;
  border-radius: 0;
  overflow-wrap: normal;
  word-break: normal;
}

blockquote{
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
  font-size: 14.5px;
}

/* ==========================================================================
   布局
   ========================================================================== */

.wrap{
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section{ padding-block: var(--section-gap); }
.section--tight{ padding-block: 40px; }
.section--flush{ padding-block: 0; }

.section-head{
  display: grid;
  gap: 10px;
  max-width: 720px;
  margin-bottom: 28px;
}

.section-title{
  text-wrap: balance;
}

.section-lead{
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 62ch;
}

.kicker{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.grid{ display: grid; gap: 20px; }
.grid > *{ min-width: 0; }
.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 通用面板：白纸卡 / 深墨卡 */
.panel-card{
  padding: 26px 28px;
  border-radius: var(--radius-xl);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--hi-white), var(--shadow-card);
  min-width: 0;
}

.panel-card--ink{
  background: linear-gradient(160deg, var(--panel-a), var(--panel-b));
  border-color: transparent;
  color: var(--bg-panel);
  box-shadow: inset 0 1px 0 var(--hi-light), var(--shadow-ink);
}

.panel-card--ink p,
.panel-card--ink li{ color: var(--bg-panel-2); }

/* ==========================================================================
   工具类
   ========================================================================== */

/* 中文标题防断词：只包 2~4 个汉字的关键词 */
.no-break{ white-space: nowrap; }

.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link{
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 90;
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  background: var(--panel-ink);
  color: var(--bg-panel);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus-visible{ top: 12px; }

/* 装饰性微倾斜：≤640px 一律取消，避免长内容容器包围盒撑破视口 */
.tilt{ transform: rotate(-0.45deg); }

/* 装饰层容器：绝对定位装饰不许把页面撑宽 */
.decor-zone{
  position: relative;
  overflow-x: clip;
}

/* 线路状态组件必须夹住网格：文档流占位 + 裁切 + 与下一块普通间距 */
#server-status{
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  margin-block: 24px 32px;
  overflow: hidden;
}

#server-status *{ min-width: 0; }

/* ==========================================================================
   公告条
   ========================================================================== */

.announce{
  background: var(--panel-ink);
  color: var(--bg-panel);
  border-bottom: 1px solid var(--hairline);
}

.announce-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-block: 8px;
}

.announce-text{
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--bg-panel-2);
}

.announce-text strong{
  color: var(--bg-panel);
  font-weight: 700;
}

.announce-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.announce-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 13px;
  border-radius: var(--radius-btn);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.announce-btn--primary{
  background: var(--accent);
  color: var(--bg-panel);
  box-shadow: inset 0 1px 0 var(--btn-top), 0 6px 14px -8px var(--drop-dark);
}

.announce-btn--ghost{
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--hi-white), 0 6px 14px -8px var(--drop-dark);
}

/* ==========================================================================
   顶部导航
   ========================================================================== */

.site-header{
  position: relative;
  z-index: 70;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.header-inner{
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 12px;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
  min-height: 34px;
}

.brand-mark{
  width: 34px;
  height: 34px;
  display: block;
  flex: none;
}

.brand-name{
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.brand-en{
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text);
}

.brand-zh{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.nav{
  display: flex;
  align-items: center;
  margin-left: 6px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar{ display: none; }

/* ul 自身必须是 flex，否则 li 逐行堆成竖列 */
.nav-list{
  display: flex;
  align-items: center;
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  min-height: 32px;
}

.nav-link svg{
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--text-muted);
}

.nav-link:hover{ background: var(--bg-panel-2); }

.nav-link[aria-current="page"],
.nav-link.is-active{
  background: var(--bg-panel-2);
  font-weight: 700;
}

.nav-link[aria-current="page"] svg,
.nav-link.is-active svg{ color: var(--accent); }

.header-tools{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: none;
}

/* header.js 注入的工具区：层级压在抽屉之上，汉堡/关闭按钮始终可点 */
.header-right{
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: none;
}

.lang{ position: relative; }

.lang-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.lang-btn svg{
  width: 11px;
  height: 11px;
  flex: none;
}

.lang-btn:hover{
  border-color: var(--border);
  background: var(--bg-panel);
}

.lang-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: none;
  min-width: 156px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  box-shadow: var(--shadow-card);
}

.lang-menu.is-open{ display: block; }

.lang-menu a{
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.lang-menu a:hover{ background: var(--bg-panel-2); }

.lang-menu a[aria-current="true"]{
  color: var(--accent);
  background: var(--accent-tint);
}

.login-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 18px;
  border-radius: var(--radius-btn);
  background: var(--panel-ink);
  color: var(--bg-panel);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--hi-light), 0 10px 20px -12px var(--ink-shadow-strong);
}

.nav-toggle{
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
}

.nav-toggle svg{
  width: 18px;
  height: 18px;
  flex: none;
}

/* 抽屉锚在页头下沿（top:100% 相对 .site-header），不写死页头高度，
   保证任何页头高度下都不会盖住汉堡按钮 */
.nav-drawer{
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 2;
  max-height: calc(100dvh - var(--header-h));
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px var(--gutter) 24px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.nav-drawer.is-open{
  opacity: 1;
  visibility: visible;
  transform: none;
}

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

/* 抽屉内链接整行可点 */
.nav-drawer a{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.nav-drawer a svg{
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--text-muted);
}

.nav-drawer a[aria-current="page"]{
  background: var(--bg-panel-2);
  color: var(--text);
}

.nav-drawer a[aria-current="page"] svg{ color: var(--accent); }

.nav-drawer-foot{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.nav-veil{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--veil);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.nav-veil.is-open{
  opacity: 1;
  visibility: visible;
}

html.nav-open{ overflow: hidden; }

/* ==========================================================================
   按钮
   ========================================================================== */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn--primary{
  background: var(--accent);
  color: var(--bg-panel);
  box-shadow: inset 0 1px 0 var(--btn-top), var(--shadow-btn);
}

.btn--primary:hover{ background: var(--accent-dark); }

.btn--ink{
  background: var(--panel-ink);
  color: var(--bg-panel);
  box-shadow: inset 0 1px 0 var(--hi-light), 0 16px 30px -18px var(--ink-shadow-strong);
}

.btn--ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--hi-soft);
}

.btn--ghost:hover{
  background: var(--bg-panel);
  border-color: var(--accent);
}

.btn--paper{
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--hi-white), var(--shadow-card);
}

.btn--sm{
  min-height: 36px;
  padding: 9px 18px;
  font-size: 13px;
}

.btn--block{
  width: 100%;
  flex-shrink: 1;
}

.btn-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* ==========================================================================
   首屏
   ========================================================================== */

.hero{
  position: relative;
  overflow-x: clip;
  padding-block: 34px 46px;
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--hero-wash) 0%, transparent 62%);
  pointer-events: none;
}

.hero-inner{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46%;
  gap: 56px;
  align-items: center;
}

.hero-copy{
  position: relative;
  z-index: 2;
  min-width: 0;
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  box-shadow: var(--shadow-card);
  max-width: 100%;
}

.eyebrow-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
  flex: none;
}

.hero-title{
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-size: clamp(52px, 5.2vw, 66px);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}

.hero-title > span{ display: block; }

.hero-title .hl{
  display: inline-block;
  padding: 0.02em 0.08em 0.05em;
  margin-left: 0.02em;
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: var(--bg-panel);
  box-shadow: var(--shadow-btn);
}

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

.hero-lead{
  margin: 22px 0 0;
  max-width: 545px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--text-muted);
}

.hero-lead strong{
  color: var(--text);
  font-weight: 700;
}

.trust-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--text-muted);
}

.trust-row li{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.trust-row li + li::before{
  content: "";
  width: 3px;
  height: 3px;
  margin: 0 9px;
  border-radius: 50%;
  background: var(--border);
  flex: none;
}

.trust-row svg{
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex: none;
}

.trust-row .is-key{
  color: var(--text);
  font-weight: 700;
}

.platform-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 24px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.platform{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.platform svg{
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--text-muted);
}

.flag-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 16px;
}

.flag-label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.flag-item{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.flag{
  width: 21px;
  height: 21px;
  display: block;
  flex: none;
}

.flag-ring{
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
}

.f-white{ fill: var(--flag-white); }
.f-red{ fill: var(--flag-red); }
.f-navy{ fill: var(--flag-navy); }
.hk-flower ellipse,
.hk-flower circle{ fill: var(--flag-white); }
.sg-stars path{ fill: var(--flag-white); }
.us-stripes rect{ fill: var(--flag-red); }
.us-stars circle{ fill: var(--flag-white); }

/* ---- 首屏装置：深墨舷窗面板 ---- */

.hero-visual{
  position: relative;
  height: 520px;
  z-index: 1;
  min-width: 0;
}

.panel{
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  background: linear-gradient(148deg, var(--panel-a) 0%, var(--panel-b) 100%);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 var(--hi-light),
    inset 0 0 0 1px var(--panel-edge),
    var(--shadow-accent),
    var(--shadow-ink);
}

.panel-grain{
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--grain) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.6;
  pointer-events: none;
}

.wing-arc{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.arc-stop{ stop-color: var(--accent); }

.arc-line,
.arc-line-soft{ fill: none; }

.arc-spark{
  fill: var(--accent);
  filter: drop-shadow(0 0 7px var(--accent));
  animation: arc-travel 8s linear infinite;
}

@keyframes arc-travel{
  0%{ transform: translate(-6px, 480px); opacity: 0; }
  6%{ opacity: 1; }
  25%{ transform: translate(130px, 461px); }
  50%{ transform: translate(300px, 453px); }
  75%{ transform: translate(470px, 460px); }
  94%{ opacity: 1; }
  100%{ transform: translate(606px, 478px); opacity: 0; }
}

/* ---- 内嵌客户端窗口 ---- */

.app-window{
  position: absolute;
  left: 26px;
  top: 26px;
  width: 380px;
  max-width: calc(100% - 52px);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  overflow: hidden;
  z-index: 2;
  box-shadow:
    inset 0 1px 0 var(--hi-white),
    0 26px 46px -22px var(--win-shadow),
    0 3px 0 -1px var(--win-edge);
}

.win-bar{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  background: linear-gradient(180deg, var(--winbar-a), var(--winbar-b));
  border-bottom: 1px solid var(--border);
}

.win-dots{
  display: inline-flex;
  gap: 5px;
  flex: none;
}

.win-dots i{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
  box-shadow: inset 0 1px 0 var(--dot-top);
}

.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-title{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.win-menu{
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex: none;
}

.win-body{ padding: 11px 13px 13px; }

.cur-line{
  padding: 8px 10px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  box-shadow: inset 0 1px 0 var(--hi-white);
}

.cur-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cur-label{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cur-live{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--success);
  white-space: nowrap;
}

.live-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-tint);
  animation: breathe 2.4s ease-in-out infinite;
  flex: none;
}

@keyframes breathe{
  0%, 100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.35); opacity: 0.5; }
}

.cur-main{
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
}

.cur-name{
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cur-main .switch{ margin-left: auto; }

.tag{
  display: inline-flex;
  align-items: center;
  padding: 1.5px 6px;
  border-radius: 5px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.tag--neutral{
  background: var(--bg-panel-2);
  color: var(--text-muted);
}

.switch{
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: inset 0 1px 2px var(--switch-shade);
  flex: none;
}

.switch i{
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-panel);
  box-shadow: 0 1px 2px var(--switch-knob);
}

.line-list{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.line-list li{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 2px;
  font-size: 11px;
  border-bottom: 1px solid var(--bg-panel-2);
}

.line-list li:last-child{ border-bottom: 0; }

.line-dot{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  flex: none;
}

.line-name{
  flex: 1;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
}

.plan-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--panel-ink);
  color: var(--bg-panel);
  box-shadow: inset 0 1px 0 var(--hi-light);
}

.plan-label{
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--bg-panel-2);
  white-space: nowrap;
}

.plan-value{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.fact-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.fact-mono{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.badge{
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.badge--neutral{
  background: var(--bg-panel-2);
  color: var(--text-muted);
}

.badge--success{
  background: var(--success-tint);
  color: var(--success);
}

.win-plat{
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.win-plat span{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  border-radius: 6px;
  background: var(--bg);
  font-size: 8px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.win-plat svg{
  width: 10px;
  height: 10px;
  flex: none;
  color: var(--text-muted);
}

.traffic{ margin-top: 8px; }

.traffic-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
}

.traffic-head b{
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.traffic-bar{
  margin-top: 4px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--bg-panel-2);
  overflow: hidden;
}

.traffic-bar i{
  display: block;
  width: 34%;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}

/* ---- 浮层卡 ---- */

.float-card{
  position: absolute;
  z-index: 3;
  border-radius: 14px;
  background: var(--bg-panel);
  box-shadow:
    inset 0 1px 0 var(--hi-white),
    var(--shadow-accent-soft),
    var(--shadow-card);
}

.float-status{
  top: 58px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  transform: rotate(-3deg);
}

.float-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
  flex: none;
}

.float-k{
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.float-v{
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.float-refund{
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
}

.float-refund svg{
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex: none;
}

.float-refund strong{
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.float-refund span{
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   下一屏边缘
   ========================================================================== */

.next-peek{
  padding-block: 32px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.peek-eyebrow{
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.peek-title{
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}

.peek-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}

.peek-card{
  min-height: 320px;
  padding: 26px 28px;
  border-radius: var(--radius-xl);
}

.peek-card--dark{
  background: linear-gradient(160deg, var(--panel-a), var(--panel-b));
  box-shadow: inset 0 1px 0 var(--hi-light), var(--shadow-ink);
  color: var(--bg-panel);
}

.peek-card--light{
  background: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--hi-white), var(--shadow-card);
}

.peek-tag{
  display: inline-block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bg-panel);
}

.peek-tag--ink{ color: var(--text); }

/* ==========================================================================
   页脚
   ========================================================================== */

.site-footer{
  background: var(--bg-panel-2);
  border-top: 1px solid var(--border);
  padding-block: 46px 22px;
  margin-top: 0;
}

.footer-top{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
}

.footer-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 12px;
}

.footer-logo{
  width: 30px;
  height: 30px;
  display: block;
  flex: none;
}

.footer-brand-name{
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text);
}

.footer-tagline{
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 34ch;
}

.footer-col h2{
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text);
  margin-bottom: 12px;
}

.footer-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.footer-links a{
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
}

.footer-links a:hover{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-hot{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-hot a{
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-hot a:hover{
  border-color: var(--accent);
  color: var(--accent);
}

.footer-bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.footer-legal{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-legal a{
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  color: var(--text-muted);
  text-decoration: none;
}

.footer-legal a:hover{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   滚动淡入（可见性默认可见，隐藏态只由 .pending 施加）
   ========================================================================== */

.reveal{
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.pending{
  opacity: 0;
  transform: translateY(16px);
}

/* ==========================================================================
   响应式
   ========================================================================== */

@media (max-width: 1240px){
  :root{ --gutter: 24px; }
  .hero-title{ font-size: 58px; }
  .nav-link{ padding: 7px 6px; font-size: 12px; }
  .hero-inner{ gap: 40px; }
  .footer-top{ grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (max-width: 1080px){
  .hero-inner{
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .hero-copy{ max-width: 660px; }
  .hero-visual{
    max-width: 620px;
    width: 100%;
    margin-inline: auto;
  }
  .hero-title{ font-size: 54px; }
  .peek-grid{ grid-template-columns: minmax(0, 1fr); }
}

/* 导航收进抽屉：工具区自己补 margin-left:auto 贴最右 */
@media (max-width: 980px){
  .nav{ display: none; }
  .nav-toggle{ display: inline-flex; }
  .nav-drawer{ display: block; }
  .nav-veil{ display: block; }
  .header-tools{ margin-left: auto; }
  .footer-top{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

@media (max-width: 860px){
  .announce-text{ font-size: 11.5px; }
  .brand-zh{ display: none; }
  .header-inner{ gap: 10px; }
  .hero-title{ font-size: 46px; }
  .peek-title{ font-size: 30px; }
  .grid-3,
  .grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px){
  .hero-title,
  h1,
  .h1{ font-size: clamp(30px, 7.4vw, 40px); line-height: 1.12; letter-spacing: -0.02em; }
  h2,
  .h2{ font-size: clamp(24px, 6vw, 30px); }
  .hero-lead{ font-size: 14px; }
  .panel-card{ padding: 22px 20px; }
}

@media (max-width: 720px){
  :root{ --gutter: 16px; --section-gap: 44px; }
  .hero{ padding-block: 24px 32px; }
  .hero-visual{
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
  }
  .panel{
    position: relative;
    inset: auto;
    padding: 16px 16px 20px;
    border-radius: 22px;
  }
  .app-window{
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
  }
  .float-card{
    position: relative;
    inset: auto;
    transform: none;
    width: max-content;
    max-width: 100%;
  }
  .float-status{ align-self: flex-start; }
  .float-refund{ align-self: flex-end; }
  .peek-card{ min-height: 0; padding: 22px 20px; }
  .grid-2,
  .grid-3,
  .grid-4{ grid-template-columns: minmax(0, 1fr); }
  .footer-top{ grid-template-columns: minmax(0, 1fr); }
  .footer-bottom{ justify-content: flex-start; }
}

@media (max-width: 640px){
  /* 窄屏允许关键词折行，避免长 nowrap 撑破视口 */
  .no-break{ white-space: normal; }
  .tilt{ transform: none; }
  .hero-cta .btn{ flex: 1 1 100%; }
  .announce-inner{ padding-block: 7px; }
  .announce-actions{ width: 100%; justify-content: center; }
}

@media (max-width: 420px){
  .hero-title,
  h1,
  .h1{ font-size: clamp(28px, 8.4vw, 34px); }
  .brand-en{ font-size: 18px; }
  .login-btn{ padding: 8px 13px; }
  .trust-row li + li::before{ margin: 0 6px; }
}

/* ==========================================================================
   动效与可访问性降级
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .live-dot,
  .arc-spark{ animation: none; }
  .reveal,
  .reveal.pending{
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav-drawer,
  .nav-veil{ transition: none; }
}

/* lh:local-harden:start */
:is(h1,h2,h3,h4){text-wrap:balance}
:is(p,li,dd,dt,figcaption,blockquote,td,th){text-wrap:pretty}
html[lang|="ko"] body{word-break:keep-all;overflow-wrap:break-word}
html[lang|="ja"] :is(h1,h2,h3,h4){word-break:auto-phrase}
.lh-tscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
@media (max-width:640px){.lh-tscroll :is(th,td){min-width:5.5em}}
@supports (animation-timeline:scroll()){
  .float-cta{animation:lh-fab-in linear both;animation-timeline:scroll(root);animation-range:0 70vh}
}
@keyframes lh-fab-in{0%,45%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}}
/* lh:local-harden:end */