/* ==========================================================================
   VPNHF · 设计系统 · base 层
   暖纸双色套印:奶油暖纸打底,紫罗兰墨为唯一主强调,玫红只作渐变伴色
   本文件只承载:令牌 / reset / 排版 / 按钮 / 头部 / 页脚 / 通用面板 / 首屏装置
   跨页面组件见 components.css
   ========================================================================== */

:root{
  /* —— 纸面与面板 —— */
  --bg:#FBF4E9;
  --bg-panel:#FFFDF8;
  --bg-panel-2:#F2E7D5;
  --bg-top:#FFFCF6;
  --bg-bottom:#F6EBD9;
  --border:#E4D6C1;

  /* —— 墨色 —— */
  --accent:#4A2F8F;
  --accent-dark:#2E1B5E;
  --accent-rose:#BF3F7A;
  --text:#2B211A;
  --text-muted:#6E5F52;
  --success:#1E7A4F;
  --warn:#A9701A;
  --error:#B23A2E;

  /* —— 半透明层(组件不得散落硬编码色值) —— */
  --accent-08:rgba(74,47,143,.08);
  --accent-10:rgba(74,47,143,.10);
  --accent-12:rgba(74,47,143,.12);
  --accent-18:rgba(74,47,143,.18);
  --accent-28:rgba(74,47,143,.28);
  --accent-45:rgba(74,47,143,.45);
  --rose-08:rgba(191,63,122,.08);
  --rose-12:rgba(191,63,122,.12);
  --rose-28:rgba(191,63,122,.28);
  --success-10:rgba(30,122,79,.10);
  --warn-10:rgba(169,112,26,.10);
  --error-10:rgba(178,58,46,.10);
  --ink-04:rgba(43,33,26,.04);
  --ink-06:rgba(43,33,26,.06);
  --ink-10:rgba(43,33,26,.10);
  --ink-16:rgba(43,33,26,.16);
  --ink-22:rgba(43,33,26,.22);
  --ink-28:rgba(43,33,26,.28);
  --grain:rgba(43,33,26,.05);
  --white-06:rgba(255,255,255,.06);
  --white-14:rgba(255,255,255,.14);
  --paper-60:rgba(255,252,246,.60);
  --paper-72:rgba(255,252,246,.72);
  --paper-90:rgba(255,252,246,.90);
  --on-ink-92:rgba(255,253,248,.92);
  --on-ink-78:rgba(255,253,248,.78);
  --on-ink-52:rgba(255,253,248,.52);
  --on-ink-14:rgba(255,253,248,.14);
  --on-ink-08:rgba(255,253,248,.08);
  --on-ink-06:rgba(255,253,248,.06);

  /* —— 旗帜专用色 —— */
  --flag-red:#C8102E;
  --flag-navy:#012169;
  --flag-ink:#22306B;
  --flag-white:#FFFDF8;

  /* —— 字体 —— */
  --font-display:"Inter","Noto Sans SC","Noto Sans JP","Noto Sans KR","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --font-body:"Inter","Noto Sans SC","Noto Sans JP","Noto Sans KR","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,"Noto Sans SC",monospace;

  /* —— 圆角 —— */
  --radius-xs:5px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-pill:999px;

  /* —— 投影 —— */
  --shadow-window:0 30px 64px -24px var(--accent-28), 0 8px 20px -14px var(--ink-22);
  --shadow-panel:26px 32px 64px -22px var(--accent-45), 0 2px 0 var(--white-14) inset, 0 0 0 1px var(--white-06) inset;
  --shadow-ticket:0 18px 38px -16px var(--ink-28);
  --shadow-btn:0 12px 24px -12px var(--accent-45);
  --shadow-chip:0 10px 22px -12px var(--ink-22);
  --shadow-card:0 16px 34px -22px var(--accent-28);
  --shadow-flag:0 1px 3px var(--ink-22);

  /* —— 尺寸与节奏 —— */
  --gutter:32px;
  --wrap-max:1320px;
  --header-h:64px;
  --section-y:76px;
  --gap-s:8px;
  --gap-m:16px;
  --gap-l:28px;
}

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

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

html.nav-open{overflow:hidden;}

body{
  margin:0;
  min-height:100%;
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  background-color:var(--bg);
  background-image:
    radial-gradient(1180px 620px at 78% -10%, var(--accent-10), transparent 64%),
    radial-gradient(900px 520px at 6% 2%, var(--paper-90), transparent 62%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 46%, var(--bg-bottom) 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(var(--grain) 0.5px, transparent 0.6px);
  background-size:3px 3px;
  opacity:.55;
}

main{
  position:relative;
  z-index:1;
  display:block;
}

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

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

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}

.sprite{position:absolute;width:0;height:0;overflow:hidden;}

.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-60px;
  z-index:60;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  background:var(--text);
  color:var(--bg-top);
  font-size:13px;
  text-decoration:none;
  transition:top .18s ease;
}

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

/* --------------------------------------------------------------------------
   版心与区块
   -------------------------------------------------------------------------- */

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

.sec{
  position:relative;
  padding-top:var(--section-y);
  padding-bottom:var(--section-y);
}

.sec--tight{
  padding-top:calc(var(--section-y) * .6);
  padding-bottom:calc(var(--section-y) * .6);
}

.sec--line{
  border-top:1px dashed var(--border);
}

.sec-head{
  max-width:720px;
  margin:0 auto 34px;
  text-align:center;
}

.sec-head--left{
  margin-inline:0;
  text-align:left;
}

.sec-marker{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  margin:0 auto 16px;
  border-radius:var(--radius-xs);
  background:linear-gradient(140deg, var(--accent) 0%, var(--accent-rose) 100%);
  color:var(--bg-top);
  box-shadow:0 10px 20px -12px var(--accent-45);
}

.sec-marker svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.sec-kicker{
  display:block;
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.sec-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(26px, 3.1vw, 40px);
  line-height:1.14;
  letter-spacing:-.025em;
  color:var(--text);
  text-wrap:balance;
}

.sec-sub{
  margin:14px 0 0;
  font-size:15.5px;
  line-height:1.72;
  color:var(--text-muted);
}

.sec-rule{
  width:3.6em;
  height:3px;
  margin:18px auto 0;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--accent), var(--accent-rose));
}

.sec-head--left .sec-rule{margin-inline:0;}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-l);
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap-m);
}

.grid-2 > *,
.grid-3 > *{min-width:0;}

/* --------------------------------------------------------------------------
   排版
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.02em;
  color:var(--text);
  text-wrap:balance;
}

h1{
  font-size:clamp(30px, 3.6vw, 46px);
  font-weight:900;
}

h2{font-size:clamp(24px, 2.8vw, 34px);}
h3{font-size:clamp(17px, 1.9vw, 21px);}
h4{font-size:16px;}

p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}

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

.lead{
  font-size:18px;
  line-height:1.7;
  color:var(--text-muted);
}

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

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

.count{
  display:inline-block;
  min-width:2.4ch;
  font-variant-numeric:tabular-nums;
  text-align:left;
}

code,
kbd,
samp{
  font-family:var(--font-mono);
  font-size:.92em;
  overflow-wrap:anywhere;
  word-break:break-word;
}

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

pre code{overflow-wrap:normal;}

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

/* 中文关键词防断词:只给 2~4 个汉字用,窄屏放开折行 */
.no-break{white-space:nowrap;}

.tilt{transform:rotate(-1.2deg);}

/* --------------------------------------------------------------------------
   按钮语汇:纯色实心 + 细描边
   -------------------------------------------------------------------------- */

.btn,
.btn-primary,
.btn-ghost,
.btn-solid,
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  height:48px;
  padding:0 22px;
  border:0;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  flex-shrink:0;
  white-space:nowrap;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.btn svg,
.btn-primary svg,
.btn-ghost svg,
.btn-solid svg,
.btn-outline svg{
  width:16px;
  height:16px;
  flex:none;
}

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

.btn-primary:hover{
  background:var(--accent-dark);
  transform:translateY(-1px);
}

.btn-ghost{
  padding:0 20px;
  border:1px solid var(--border);
  background:var(--bg-panel);
  color:var(--text);
  font-weight:500;
}

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

.btn-solid{
  background:var(--text);
  color:var(--bg-top);
  box-shadow:0 1px 0 var(--white-14) inset;
}

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

.btn-outline{
  border:1px solid var(--ink-22);
  background:transparent;
  color:var(--text);
}

.btn-outline:hover{
  background:var(--text);
  border-color:var(--text);
  color:var(--bg-top);
}

.btn-sm{
  height:auto;
  min-height:36px;
  padding:7px 14px;
  font-size:13px;
  font-weight:600;
}

.btn-block{width:100%;}

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

/* --------------------------------------------------------------------------
   顶部导航(header.js 注入)
   -------------------------------------------------------------------------- */

.site-header{
  position:relative;
  z-index:70;
  border-bottom:1px solid var(--ink-10);
  background:var(--paper-72);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.header-inner{
  display:flex;
  align-items:center;
  gap:18px;
  height:var(--header-h);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:none;
  text-decoration:none;
  color:var(--text);
}

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

.brand-word{
  display:flex;
  align-items:baseline;
  gap:7px;
  white-space:nowrap;
}

.brand-en{
  font-family:var(--font-display);
  font-weight:800;
  font-size:17px;
  letter-spacing:-.015em;
  color:var(--text);
}

.brand-zh{
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--text-muted);
}

.main-nav{
  display:flex;
  align-items:center;
  margin-left:auto;
  min-width:0;
}

.main-nav > ul,
.nav-list{
  display:flex;
  align-items:center;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}

.nav-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border-radius:var(--radius-sm);
  font-size:13px;
  line-height:1.2;
  color:var(--text-muted);
  text-decoration:none;
  white-space:nowrap;
  transition:color .16s ease, background-color .16s ease;
}

.nav-item svg{
  width:14px;
  height:14px;
  flex:none;
  opacity:.85;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-item:hover{
  color:var(--text);
  background:var(--accent-08);
}

.nav-item.is-active{
  color:var(--accent);
  background:var(--accent-08);
  font-weight:600;
}

.nav-item.is-active svg{opacity:1;}

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

.lang-wrap{position:relative;}

.lang-switch{
  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:transparent;
  font-family:var(--font-body);
  font-size:12.5px;
  color:var(--text-muted);
  cursor:pointer;
  white-space:nowrap;
  transition:color .16s ease, border-color .16s ease;
}

.lang-switch svg{
  width:10px;
  height:10px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.lang-switch:hover{
  color:var(--text);
  border-color:var(--border);
}

.lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:50;
  display:none;
  min-width:168px;
  margin:0;
  padding:6px;
  list-style:none;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
  box-shadow:var(--shadow-chip);
}

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

.lang-menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:36px;
  padding:8px 10px;
  border-radius:var(--radius-xs);
  font-size:13px;
  color:var(--text-muted);
  text-decoration:none;
  white-space:nowrap;
}

.lang-menu a:hover{
  background:var(--accent-08);
  color:var(--text);
}

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

.lang-menu .lang-code{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--text-muted);
}

.btn-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 16px;
  border:1px solid var(--ink-22);
  border-radius:var(--radius-sm);
  font-size:13px;
  font-weight:600;
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}

.btn-login:hover{
  background:var(--text);
  border-color:var(--text);
  color:var(--bg-top);
}

.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);
  cursor:pointer;
}

.nav-toggle svg{
  width:20px;
  height:20px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.;
  stroke-linecap:round;
}

.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}

.nav-drawer{
  display:none;
  position:fixed;
  top:var(--header-h);
  left:0;
  right:0;
  z-index:95;
  max-height:calc(100dvh - var(--header-h));
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:6px 0 16px;
  border-bottom:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-ticket);
}

.nav-drawer.is-open{display:block;}

.nav-drawer .drawer-label{
  display:block;
  padding:14px var(--gutter) 6px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
}

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

.nav-drawer a{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:48px;
  padding:12px var(--gutter);
  border-bottom:1px solid var(--ink-06);
  font-size:15px;
  color:var(--text);
  text-decoration:none;
}

.nav-drawer a svg{
  width:16px;
  height:16px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.8;
}

.nav-drawer a:hover,
.nav-drawer a.is-active{
  background:var(--accent-08);
  color:var(--accent);
}

.nav-drawer .drawer-login{
  margin:14px var(--gutter) 0;
  justify-content:center;
  min-height:44px;
  border:1px solid var(--ink-22);
  border-radius:var(--radius-sm);
  font-weight:600;
  background:var(--bg-panel-2);
}

/* --------------------------------------------------------------------------
   Hero:左文右窗(已拍板首屏)
   -------------------------------------------------------------------------- */

.hero{
  position:relative;
  z-index:1;
  overflow-x:clip;
  max-width:100%;
  min-height:780px;
  display:flex;
  align-items:center;
  padding:36px 0 44px;
}

.hero::before{
  content:"";
  position:absolute;
  top:-14%;
  right:-8%;
  left:-8%;
  height:118%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 74% 44%, var(--accent-12), transparent 72%),
    radial-gradient(closest-side at 18% 12%, var(--paper-90), transparent 74%);
}

.hero > .wrap{
  position:relative;
  z-index:1;
  width:100%;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 620px;
  gap:52px;
  align-items:center;
}

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

.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 12px 5px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--bg-panel);
  box-shadow:0 1px 0 var(--white-06) inset;
  font-size:11.5px;
  letter-spacing:.05em;
  color:var(--text-muted);
}

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

.hero-title{
  margin:18px 0 0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:68px;
  line-height:.98;
  letter-spacing:-.025em;
  color:var(--text);
}

.title-brand{
  display:block;
  color:var(--accent);
}

.title-line{display:block;}

.hl{
  display:inline-block;
  margin-left:.04em;
  padding:0 .10em .03em;
  border-radius:var(--radius-md);
  background:linear-gradient(132deg, var(--accent) 0%, var(--accent-rose) 100%);
  color:var(--bg-top);
  box-shadow:0 10px 22px -12px var(--accent-45);
}

.hero-sub{
  margin:20px 0 0;
  max-width:520px;
  font-size:16px;
  line-height:1.72;
  color:var(--text-muted);
}

.hero-sub strong{
  color:var(--text);
  font-weight:600;
}

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

.trust-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  margin:24px 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:6px;
  white-space:nowrap;
}

.trust-row li::before{
  content:"";
  width:4px;
  height:4px;
  flex:none;
  border-radius:50%;
  background:var(--accent);
  opacity:.5;
}

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

.trust-row .is-key::before{
  opacity:1;
  box-shadow:0 0 0 3px var(--accent-12);
}

.hero-meta{
  margin-top:22px;
  padding-top:18px;
  border-top:1px dashed var(--border);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.meta-row{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  align-items:center;
  gap:12px;
}

.meta-label{
  font-size:11px;
  letter-spacing:.12em;
  color:var(--text-muted);
  white-space:nowrap;
}

.platform-row,
.region-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px 13px;
}

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

.pi-box{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:none;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--bg-panel);
  color:var(--text);
}

.pi-box svg{
  width:13px;
  height:13px;
  fill:currentColor;
}

.pi-box svg[data-pi="linux"]{
  background:var(--bg-panel-2);
  border-radius:2px;
}

.region-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  color:var(--text-muted);
  white-space:nowrap;
}

.flag-badge{
  display:block;
  width:20px;
  height:20px;
  flex:none;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 1px var(--ink-10) inset, var(--shadow-flag);
}

.flag-badge svg{
  display:block;
  width:100%;
  height:100%;
}

.f-red{fill:var(---red,#C8102E);fill:var(--flag-red);}
.f-navy{fill:var(--flag-navy);}
.f-inkblue{fill:var(--flag-ink);}
.f-white{fill:var(--flag-white);}
.f-stroke{stroke:var(--flag-white);stroke-width:1.6;fill:none;}
.f-stroke-red{stroke:var(--flag-red);stroke-width:.9;fill:none;}

/* —— 线路索引窗装置 —— */

.hero-visual{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:flex-end;
  min-width:0;
}

.index-window{
  position:relative;
  width:528px;
  max-width:100%;
}

.window-card{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  min-height:400px;
  padding:12px 14px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  box-shadow:var(--shadow-window), 0 1px 0 var(--white-14) inset;
}

.win-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 4px 10px 92px;
  border-bottom:1px solid var(--ink-10);
}

.win-title{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
}

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

.win-dots i{
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
}

.win-dots i:first-child{background:var(--accent);opacity:.7;}
.win-dots i:last-child{background:var(--accent-rose);opacity:.55;}

.route-list{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4px 0 4px 92px;
}

.route-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:11px 10px;
  border-bottom:1px dashed var(--border);
}

.route-row:last-child{border-bottom:0;}

.route-row.is-current{
  background:var(--accent-08);
  border-radius:var(--radius-xs);
  box-shadow:inset 2px 0 0 var(--accent);
}

.route-city{
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.route-type{
  display:inline-flex;
  align-items:center;
  padding:3px 7px;
  border-radius:var(--radius-xs);
  font-size:10.5px;
  line-height:1.2;
  white-space:nowrap;
  background:var(--bg-panel-2);
  color:var(--text-muted);
}

.route-type.is-iepl{
  background:var(--accent-12);
  color:var(--accent-dark);
  font-weight:600;
}

.route-type.is-direct{
  background:var(--success-10);
  color:var(--success);
}

.route-plats{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--text-muted);
}

.route-plats svg{
  width:13px;
  height:13px;
  flex:none;
  fill:currentColor;
}

.route-plats svg[data-pi="linux"]{
  background:var(--bg-panel-2);
  border-radius:2px;
}

.win-status{
  display:flex;
  align-items:center;
  gap:7px;
  margin:6px 0 0 92px;
  padding:7px 11px;
  border-radius:var(--radius-xs);
  background:var(--accent-08);
  font-size:10.5px;
  font-weight:600;
  color:var(--accent-dark);
  white-space:nowrap;
}

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

.win-plan{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel-2);
}

.plan-tag{
  padding:2px 6px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--bg-panel);
  font-size:9.5px;
  letter-spacing:.06em;
  color:var(--text-muted);
  white-space:nowrap;
}

.plan-price{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
  white-space:nowrap;
}

.plan-per{
  margin-left:1px;
  font-size:10px;
  font-weight:400;
  color:var(--text-muted);
}

.plan-sep{
  width:1px;
  height:14px;
  flex:none;
  background:var(--border);
}

.plan-quota{
  font-size:10.5px;
  color:var(--text-muted);
  white-space:nowrap;
}

.plan-btn{
  margin-left:auto;
  padding:7px 13px;
  border-radius:6px;
  background:var(--text);
  color:var(--bg-top);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
  box-shadow:0 1px 0 var(--white-14) inset;
}

.filter-panel{
  position:absolute;
  top:-24px;
  bottom:64px;
  left:-92px;
  z-index:4;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:168px;
  padding:12px;
  border-radius:var(--radius-md);
  background:var(--text);
  color:var(--bg-top);
  box-shadow:var(--shadow-panel);
}

.fp-label{
  display:block;
  margin-bottom:6px;
  font-size:10px;
  letter-spacing:.16em;
  color:var(--on-ink-52);
}

.fp-regions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}

.fp-region{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 5px;
  border-radius:var(--radius-xs);
  background:var(--on-ink-06);
  font-size:10px;
  line-height:1.2;
  color:var(--on-ink-78);
  white-space:nowrap;
}

.fp-region .flag-badge{
  width:14px;
  height:14px;
  box-shadow:0 0 0 1px var(--on-ink-14);
}

.fp-region.is-on{
  background:var(--accent);
  color:var(--bg-top);
  font-weight:600;
}

.fp-col{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.fp-plats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}

.fp-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 7px;
  border-radius:var(--radius-xs);
  background:var(--on-ink-08);
  font-size:10px;
  line-height:1.2;
  color:var(--on-ink-78);
  white-space:nowrap;
}

.fp-chip svg{
  width:11px;
  height:11px;
  flex:none;
  fill:currentColor;
}

.fp-chip svg[data-pi="linux"]{
  background:var(--on-ink-14);
  border-radius:2px;
}

.fp-chip.is-on{
  background:var(--accent);
  color:var(--bg-top);
  font-weight:600;
  box-shadow:0 6px 12px -6px var(--accent-45);
}

.float-flags{
  position:absolute;
  top:-34px;
  left:96px;
  z-index:5;
  display:flex;
  filter:drop-shadow(0 8px 12px var(--ink-22));
}

.float-flags .flag-badge{
  width:26px;
  height:26px;
  border:2px solid var(--bg-panel);
  box-shadow:none;
}

.float-flags .flag-badge + .flag-badge{margin-left:-9px;}

.float-chip{
  position:absolute;
  top:-18px;
  right:-16px;
  z-index:5;
  padding:7px 13px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--bg-panel);
  box-shadow:var(--shadow-chip);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--text);
  white-space:nowrap;
}

.float-ticket{
  position:absolute;
  right:-26px;
  bottom:-34;
  z-index:5;
  width:176px;
  padding:11px 13px 13px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
  box-shadow:var(--shadow-ticket);
  transform:rotate(-4deg);
}

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

.ticket-label{
  font-size:9.5px;
  letter-spacing:.16em;
  color:var(--text-muted);
  white-space:nowrap;
}

.ticket-stamp{
  display:grid;
  place-items:center;
  width:44px;
  height:26px;
  flex:none;
  border:1.5px solid var(--accent-rose);
  border-radius:50%;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--accent-rose);
  opacity:.85;
  transform:rotate(-12deg);
}

.ticket-main{
  display:block;
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
  white-space:nowrap;
}

/* —— 首屏下方事实带 —— */

.facts-strip{
  position:relative;
  z-index:1;
  padding-top:26px;
  padding-bottom:48px;
  border-top:1px dashed var(--border);
  background:linear-gradient(180deg, var(--paper-90), transparent 82%);
}

.facts-list{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:12px 44px;
  margin:0;
  padding:0;
  list-style:none;
}

.facts-list li{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.fact-num{
  font-family:var(--font-mono);
  font-size:18px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}

.fact-label{
  font-size:12px;
  color:var(--text-muted);
}

/* --------------------------------------------------------------------------
   通用卡片 / 面板
   -------------------------------------------------------------------------- */

.card{
  position:relative;
  min-width:0;
  padding:22px 20px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
}

.card--flat{box-shadow:none;}

.card--paper{background:var(--bg-panel-2);}

.card--grad{
  border-color:transparent;
  border-radius:var(--radius-lg);
  background:linear-gradient(150deg, var(--accent) 0%, var(--accent-rose) 100%);
  color:var(--bg-top);
  box-shadow:var(--shadow-window);
}

.card--grad h3,
.card--grad h2,
.card--grad strong{color:var(--bg-top);}

.card--grad p{color:var(--on-ink-78);}

.card-title{
  margin:0 0 8px;
  font-size:17px;
  font-weight:700;
}

.card-text{
  margin:0;
  font-size:14px;
  line-height:1.72;
  color:var(--text-muted);
}

.card--grad .card-text{color:var(--on-ink-78);}

.panel{
  min-width:0;
  padding:20px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  box-shadow:var(--shadow-window), 0 1px 0 var(--white-14) inset;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  overflow:hidden;
  padding:3px 9px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--bg-panel);
  font-size:11.5px;
  line-height:1.5;
  color:var(--text-muted);
  white-space:nowrap;
}

.badge--accent{
  border-color:transparent;
  background:var(--accent-08);
  color:var(--accent-dark);
  font-weight:600;
}

.badge--grad{
  border-color:transparent;
  background:linear-gradient(120deg, var(--accent), var(--accent-rose));
  color:var(--bg-top);
  font-weight:600;
}

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

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  overflow:hidden;
  padding:6px 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;
}

.chip:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.chip.is-active{
  border-color:transparent;
  background:var(--accent);
  color:var(--bg-top);
  font-weight:600;
}

.chip svg{
  width:13px;
  height:13px;
  flex:none;
  fill:currentColor;
}

/* --------------------------------------------------------------------------
   #server-status 容器夹持(文档流占位,禁止绝对定位/负 margin)
   -------------------------------------------------------------------------- */

#server-status{
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  overflow:hidden;
  margin:0 0 var(--gap-l);
  padding:0;
}

#server-status > *{max-width:100%;}

/* --------------------------------------------------------------------------
滚动淡入:默认可见,只有 .pending 才隐藏
   -------------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,
  .reveal.pending{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* --------------------------------------------------------------------------
   页脚
   -------------------------------------------------------------------------- */

.site-footer{
  position:relative;
  z-index:1;
  margin-top:var(--section-y);
  border-top:1px solid var(--border);
  background:
    linear-gradient(180deg, var(--paper-90), var(--bg-panel-2) 62%, var(--bg-bottom));
}

.footer-inner{
  padding-top:46px;
  padding-bottom:26px;
}

.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.9fr);
  gap:34px;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.footer-brand .brand{margin-bottom:2px;}

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

.footer-note{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--text-muted);
}

.footer-note .status-dot{flex:none;}

.footer-col{min-width:0;}

.footer-head{
  margin:0 0 12px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}

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

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

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

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

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

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

.footer-langs a{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:3px 8px;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--bg-panel);
  font-size:11.5px;
  color:var(--text-muted);
  text-decoration:none;
  white-space:nowrap;
}

.footer-langs a[aria-current="true"]{
  border-color:var(--accent);
  color:var(--accent);
  font-weight:600;
}

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

.footer-copy{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.02em;
}

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

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

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

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */

@media (max-width:1180px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr) 560px;
    gap:36px;
  }
  .hero-title{font-size:58px;}
  .index-window{width:100%;}
  .footer-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);}
  .footer-col--langs{grid-column:1 / -1;}
}

@media (max-width:1040px){
  .main-nav{display:none;}
  .header-actions{margin-left:auto;}
  .nav-toggle{display:inline-flex;}
  .hero{min-height:0;padding:30px 0 40px;}
  .hero-grid{
    grid-template-columns:minmax(0,1fr);
    gap:34px;
  }
  .hero-copy{max-width:640px;}
  .hero-visual{justify-content:center;}
  .index-window{max-width:560px;margin:0 auto;}
  .filter-panel{
    position:relative;
    top:auto;
    bottom:auto;
    left:auto;
    width:100%;
    margin-bottom:12px;
    justify-content:flex-start;
    gap:12px;
  }
  .win-head{padding-left:4px;}
  .route-list{padding-left:0;}
  .win-status{margin-left:0;}
  .float-flags{left:10px;top:-16px;}
  .float-chip{right:0;top:-14px;}
}

@media (max-width:900px){
  :root{
    --section-y:56px;
    --gutter:24px;
  }
  .grid-2,
  .grid-3{grid-template-columns:minmax(0,1fr);}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
  .footer-col--langs{grid-column:auto;}
  .hero-title{font-size:52px;}
}

@media (max-width:768px){
  .hero-title{
    font-size:38px;
    line-height:1.06;
    letter-spacing:-.02em;
  }
  h1{font-size:30px;}
  .hero-sub{font-size:15px;}
  .hero-cta{gap:10px;}
  .btn,
  .btn-primary,
  .btn-ghost,
  .btn-solid,
  .btn-outline{
    height:46px;
    padding:0 18px;
    font-size:14px;
  }
  .meta-row{
    grid-template-columns:minmax(0,1fr);
    gap:6px;
  }
  .float-ticket{
    right:0;
    bottom:-24px;
    width:158px;
    transform:none;
  }
  .facts-strip{padding-bottom:32px;}
  .facts-list{gap:10px 26px;}
  .fact-num{font-size:16px;}
}

@media (max-width:640px){
  :root{
    --gutter:18px;
    --section-y:46px;
  }
  body{font-size:15.5px;}
  .no-break{white-space:normal;}
  .tilt{transform:none;}
  .brand-zh{display:none;}
  .header-inner{gap:10px;}
  .header-actions{gap:6px;margin-left:auto;}
  .lang-switch{padding:6px;}
  .btn-login{padding:8px 12px;font-size:12.5px;}
  .hero{padding:22px 0 32px;}
  .hero-title{font-size:34px;}
  .kicker{font-size:11px;}
  .trust-row{font-size:12px;gap:8px 12px;}
  .win-plan{flex-wrap:wrap;row-gap:6px;}
  .plan-btn{margin-left:0;}
  .float-chip{position:static;display:inline-flex;margin-bottom:10px;}
  .float-flags{position:static;margin-bottom:10px;filter:none;}
  .float-ticket{
    position:relative;
    right:auto;
    bottom:auto;
    width:100%;
    margin-top:12px;
    transform:none;
  }
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:24px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  .nav-drawer{max-height:calc(100dvh - var(--header-h));}
}

@media (max-width:380px){
  :root{--gutter:16px;}
  .hero-title{font-size:30px;}
  .btn,
  .btn-primary,
  .btn-ghost,
  .btn-solid,
  .btn-outline{padding:0 14px;}
}

/* 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 */