/* ==========================================================================
   VPNQK — base.css
   1 Tokens
   2 Reset
   3 Typography
   4 Layout & utilities
   5 Buttons
   6 Header / navigation / mobile drawer
   7 Hero + client window device
   8 Footer
   9 Panels & section heads
   10 Reveal transition
   11 Responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* surfaces */
  --bg:#F8F7F4;
  --bg-top:#FCFBF8;
  --bg-bottom:#F2F1EB;
  --bg-panel:#FFFFFF;
  --bg-panel-2:#EFEEE8;
  --bg-head:rgba(248,247,244,.82);
  --border:#DEDCD3;
  --border-soft:#E9E7DF;

  /* accent */
  --accent:#1F5AA8;
  --accent-dark:#143C74;
  --accent-soft:#4E8AD6;

  /* text */
  --text:#16181B;
  --text-muted:#6B6B65;
  --on-ink:#FFFFFF;

  /* semantic */
  --success:#1E7A4C;
  --warn:#A9741C;
  --error:#B03A2C;

  /* accent alphas */
  --accent-a04:rgba(31,90,168,.04);
  --accent-a06:rgba(31,90,168,.06);
  --accent-a07:rgba(31,90,168,.07);
  --accent-a08:rgba(31,90,168,.08);
  --accent-a10:rgba(31,90,168,.10);
  --accent-a12:rgba(31,90,168,.12);
  --accent-a16:rgba(31,90,168,.16);
  --accent-a20:rgba(31,90,168,.20);
  --accent-a24:rgba(31,90,168,.24);
  --accent-a30:rgba(31,90,168,.30);
  --accent-a45:rgba(31,90,168,.45);
  --accent-dark-a40:rgba(20,60,116,.40);

  /* semantic alphas */
  --success-a10:rgba(30,122,76,.10);
  --success-a16:rgba(30,122,76,.16);
  --success-a24:rgba(30,122,76,.24);
  --warn-a10:rgba(169,116,28,.10);
  --warn-a16:rgba(169,116,28,.16);
  --warn-a24:rgba(169,116,28,.24);
  --error-a10:rgba(176,58,44,.10);
  --error-a24:rgba(176,58,44,.24);

  /* ink alphas */
  --ink-a04:rgba(22,24,27,.04);
  --ink-a06:rgba(22,24,27,.06);
  --ink-a08:rgba(22,24,27,.08);
  --ink-a10:rgba(22,24,27,.10);
  --ink-a14:rgba(22,24,27,.14);
  --ink-a30:rgba(22,24,27,.30);
  --ink-a45:rgba(22,24,27,.45);
  --ink-a60:rgba(22,24,27,.60);
  --on-ink-a18:rgba(255,255,255,.18);
  --on-ink-a35:rgba(255,255,255,.35);

  /* atmosphere */
  --grid-line:rgba(31,90,168,.055);
  --glow-top:rgba(31,90,168,.14);

  /* flag pigments */
  --flag-white:#FFFFFF;
  --flag-red:#B23A34;
  --flag-blue:#1B3A6B;
  --flag-edge:rgba(22,24,27,.16);

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

  /* radii */
  --r-xs:6px;
  --r-sm:8px;
  --r-md:10px;
  --r-lg:14px;
  --r-xl:20px;
  --r-pill:999px;

  /* elevation */
  --shadow-card:0 1px 0 var(--on-ink) inset,0 10px 24px -18px var(--accent-a45);
  --shadow-window:0 1px 0 var(--on-ink) inset,0 34px 70px -34px var(--accent-a45),0 6px 18px -12px var(--ink-a60);
  --shadow-float:0 1px 0 var(--on-ink) inset,0 18px 34px -20px var(--accent-a45);
  --shadow-soft:0 1px 0 var(--on-ink) inset,0 8px 18px -14px var(--ink-a30);

  /* layout rhythm */
  --wrap-max:1200px;
  --gutter:24px;
  --header-h:64px;
  --sec-y:76px;
  --gap-xs:6px;
  --gap-sm:10px;
  --gap-md:16px;
  --gap-lg:24px;
  --gap-xl:36px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,dl,dd,figure,blockquote{margin:0}
strong{font-weight:600}
button{font-family:inherit}
::selection{background:var(--accent-a16);color:var(--text)}

/* focus ring — never remove without a replacement */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---------- 3. Typography ---------- */
h1,.h1{
  font-family:var(--font-display);
  font-size:clamp(32px,4.6vw,60px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--text);
  text-wrap:balance;
}
h2,.h2{
  font-family:var(--font-display);
  font-size:clamp(24px,3vw,36px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.025em;
  color:var(--text);
  text-wrap:balance;
}
h3,.h3{
  font-family:var(--font-display);
  font-size:clamp(18px,2vw,22px);
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.015em;
  color:var(--text);
}
h4,.h4{
  font-size:15px;
  font-weight:600;
  line-height:1.45;
  color:var(--text);
}
p{font-size:16px;line-height:1.75;color:var(--text-muted)}
small{font-size:12.5px}
code{
  font-family:var(--font-mono);
  font-size:.92em;
  padding:2px 6px;
  border:1px solid var(--border-soft);
  border-radius:var(--r-xs);
  background:var(--bg-panel-2);
  color:var(--text);
  overflow-wrap:anywhere;
  word-break:break-word;
}
pre{
  margin:0;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel-2);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}
pre code{
  display:block;
  padding:0;
  border:0;
  background:transparent;
  white-space:pre;
  overflow-wrap:normal;
  word-break:normal;
  font-size:12.5px;
  line-height:1.7;
}
hr{
  border:0;
  border-top:1px solid var(--border-soft);
  margin:var(--gap-lg) 0;
}
blockquote{
  padding:14px 18px;
  border-left:3px solid var(--accent-a30);
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--accent-a04);
  color:var(--text);
  font-size:15px;
}

/* ---------- 4. Layout & utilities ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sec{
  padding-top:var(--sec-y);
  padding-bottom:var(--sec-y);
}
.sec-tight{
  padding-top:calc(var(--sec-y) * .62);
  padding-bottom:calc(var(--sec-y) * .62);
}
.sr-only{
  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:12px;
  top:-48px;
  z-index:90;
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 14px;
  border-radius:var(--r-sm);
  background:var(--text);
  color:var(--on-ink);
  font-size:13px;
  transition:top .16s ease;
}
.skip-link:focus{top:10px}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.min-0{min-width:0}
.mono{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--text-muted);
}
.no-break{white-space:nowrap}

/* icons */
.ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic-fill{fill:currentColor}
.logo-arc{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round}
.logo-dot{fill:currentColor}
.fg-white{fill:var(--flag-white)}
.fg-red{fill:var(--flag-red)}
.fg-blue{fill:var(--flag-blue)}
.flag-edge{fill:none;stroke:var(--flag-edge);stroke-width:1}
.flag{display:block;flex:none;box-shadow:0 1px 2px var(--ink-a10)}

/* decorative tilt: neutralised on narrow screens */
.tilt-l{transform:rotate(-.45deg)}
.tilt-r{transform:rotate(.45deg)}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:50px;
  padding:0 26px;
  border:1px solid transparent;
  border-radius:var(--r-md);
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  text-align:center;
  cursor:pointer;
  flex-shrink:0;
  white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,color .16s ease,border-color .16s ease,background-color .16s ease;
}
.btn-primary{
  background:var(--text);
  color:var(--on-ink);
  box-shadow:0 14px 28px -16px var(--ink-a60),inset 0 1px 0 var(--on-ink-a18);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 32px -16px var(--ink-a60)}
.btn-primary svg{transition:transform .16s ease}
.btn-primary:hover svg{transform:translateX(2px)}
.btn-ghost,
.btn-secondary{
  background:var(--bg-panel);
  border:1px solid var(--border);
  color:var(--text);
  box-shadow:var(--shadow-card);
}
.btn-ghost:hover,
.btn-secondary:hover{
  transform:translateY(-1px);
  border-color:var(--accent-a30);
  color:var(--accent-dark);
}
.btn-accent{
  background:linear-gradient(160deg,var(--accent-soft),var(--accent) 58%,var(--accent-dark));
  color:var(--on-ink);
  box-shadow:0 14px 28px -18px var(--accent-a45),inset 0 1px 0 var(--on-ink-a35);
}
.btn-accent:hover{transform:translateY(-1px)}
.btn-sm{height:38px;padding:0 16px;font-size:13px;border-radius:var(--r-sm)}
.btn-block{width:100%}
.btn[disabled],
.btn[aria-disabled="true"]{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.btn svg{flex:none}

/* ---------- 6. Header ---------- */
.site-head{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--bg-head);
  border-bottom:1px solid var(--border-soft);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
}
.head-inner{
  display:flex;
  align-items:center;
  gap:22px;
  max-width:var(--wrap-max);
  height:var(--header-h);
  margin:0 auto;
  padding:0 var(--gutter);
}
.brand{display:inline-flex;align-items:center;gap:9px;flex:none}
.brand-logo{
  display:block;
  flex:none;
  width:27px;
  height:27px;
  border-radius:var(--r-sm);
  box-shadow:0 6px 12px -6px var(--accent-a45);
}
.brand-mark{
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:var(--r-sm);
  color:var(--on-ink);
  background:linear-gradient(150deg,var(--accent-soft),var(--accent) 58%,var(--accent-dark));
  box-shadow:0 6px 12px -6px var(--accent-a45),inset 0 1px 0 var(--on-ink-a35);
}
.brand-en{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text);
}
.brand-zh{
  padding-left:9px;
  border-left:1px solid var(--border);
  font-size:12.5px;
  font-weight:500;
  line-height:1.2;
  color:var(--text-muted);
}
.main-nav{display:flex;align-items:center;gap:1px;margin-left:auto}
.main-nav ul{
  display:flex;
  align-items:center;
  gap:1px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-link{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:9px 12px;
  border-radius:var(--r-pill);
  font-size:13.5px;
  line-height:1;
  color:var(--text-muted);
  white-space:nowrap;
  transition:color .16s ease,background-color .16s ease;
}
.nav-link:hover{color:var(--text);background:var(--ink-a06)}
.nav-link.is-active{
  color:var(--accent-dark);
  font-weight:600;
  background:var(--accent-a08);
  box-shadow:inset 0 0 0 1px var(--accent-a16);
}
.head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
  margin-left:2px;
  padding-left:16px;
  border-left:1px solid var(--border-soft);
}
.lang-wrap{position:relative;display:inline-flex}
.lang-switch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:34px;
  padding:6px 8px;
  border:0;
  border-radius:var(--r-sm);
  background:transparent;
  font-family:inherit;
  font-size:12.5px;
  color:var(--text-muted);
  cursor:pointer;
  transition:color .16s ease,background-color .16s ease;
}
.lang-switch:hover{color:var(--text);background:var(--ink-a06)}
.lang-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:60;
  display:none;
  min-width:158px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:0 1px 0 var(--on-ink) inset,0 24px 42px -28px var(--ink-a60);
}
.lang-menu.is-open{display:block}
.lang-menu a{
  display:flex;
  align-items:center;
  min-height:38px;
  padding:6px 10px;
  border-radius:var(--r-sm);
  font-size:13px;
  color:var(--text);
}
.lang-menu a:hover{background:var(--ink-a06)}
.lang-menu a[aria-current="true"]{
  color:var(--accent-dark);
  font-weight:600;
  background:var(--accent-a08);
}
.btn-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  padding:0 16px;
  border-radius:var(--r-pill);
  background:var(--text);
  color:var(--on-ink);
  font-size:13px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  flex:none;
  box-shadow:0 8px 16px -10px var(--ink-a60),inset 0 1px 0 var(--on-ink-a18);
  transition:transform .16s ease,box-shadow .16s ease;
}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 12px 20px -12px var(--ink-a60)}

/* hamburger — hidden on desktop */
.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(--r-sm);
  background:var(--bg-panel);
  color:var(--text);
  cursor:pointer;
}
.nav-toggle-bars{position:relative;display:block;width:18px;height:2px;background:currentColor;border-radius:2px}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:currentColor;
  border-radius:2px;
}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}

/* mobile drawer — solid background, full-row links */
.nav-drawer{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:50;
  max-height:calc(100dvh - var(--header-h));
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:10px var(--gutter) 18px;
  border-bottom:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:0 26px 44px -30px var(--ink-a60);
}
.nav-drawer.is-open{display:block}
.nav-drawer ul{display:flex;flex-direction:column;gap:2px}
.nav-drawer a{
  display:flex;
  align-items:center;
  width:100%;
  min-height:46px;
  padding:10px 12px;
  border-radius:var(--r-sm);
  font-size:15px;
  color:var(--text);
}
.nav-drawer a:hover{background:var(--ink-a06)}
.nav-drawer a.is-active{
  color:var(--accent-dark);
  font-weight:600;
  background:var(--accent-a08);
}
.nav-drawer .drawer-link{
  display:flex;
  align-items:center;
  width:100%;
  min-height:46px;
  padding:10px 12px;
  border-radius:var(--r-sm);
  font-size:15px;
  color:var(--text);
}
.nav-drawer .drawer-lang{font-size:14px}
.lang-menu .lang-item{
  display:flex;
  align-items:center;
  width:100%;
  min-height:38px;
  padding:6px 10px;
  border-radius:var(--r-sm);
  font-size:13px;
  color:var(--text);
}
/* veil behind the mobile drawer — anchored to the sticky header box */
.nav-veil{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  height:100vh;
  z-index:45;
  background:var(--ink-a60);
}
.nav-veil.is-open{display:block}
.drawer-sep{
  margin:10px 0;
  border:0;
  border-top:1px solid var(--border-soft);
}
.drawer-label{
  padding:4px 12px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--text-muted);
}
html.nav-open{overflow:hidden}

/* ---------- 7. Hero + client window device ---------- */
.hero{
  position:relative;
  max-width:100%;
  overflow:clip;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 44%,var(--bg-bottom) 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.28) 58%,transparent 88%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.28) 58%,transparent 88%);
}
.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-320px;
  height:720px;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(58% 58% at 50% 50%,var(--glow-top),transparent 72%);
}
.hero-inner{
  position:relative;
  z-index:1;
  max-width:var(--wrap-max);
  margin:0 auto;
  padding:26px var(--gutter) 60px;
}
.hero-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:28px;
  margin-bottom:18px;
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:12px;
  color:var(--text-muted);
  box-shadow:var(--shadow-card);
}
.eyebrow .dot{
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-a16);
}
.eyebrow b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.hero-title{
  margin-bottom:18px;
  font-family:var(--font-display);
  font-size:68px;
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--text);
  text-wrap:balance;
}
.hero-title .num{
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.hero-sub{
  max-width:820px;
  margin-bottom:22px;
  font-size:16px;
  line-height:1.7;
  color:var(--text-muted);
}
.hero-sub strong{color:var(--text);font-weight:600}
.hero-cta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}
.trust-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.trust-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 15px;
  border-left:1px solid var(--border-soft);
  font-size:12.5px;
  line-height:1.4;
  color:var(--text-muted);
}
.trust-item:first-child{border-left:0;padding-left:0}
.trust-item:last-child{padding-right:0}
.trust-item svg{color:var(--accent);opacity:.9;flex:none}
.trust-item b{font-weight:600;color:var(--text)}
.region-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-bottom:34px;
}
.rr-label{
  font-size:11px;
  letter-spacing:.06em;
  color:var(--text-muted);
}
.rr-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--text);
}
.rr-item .flag{width:19px;height:14.25px;border-radius:3px}

/* device */
.device-wrap{
  position:relative;
  width:86%;
  max-width:100%;
  margin:0 auto;
}
.iso-deco{
  position:absolute;
  left:-92px;
  top:50%;
  width:88px;
  color:var(--accent);
  opacity:.34;
  transform:translateY(-50%);
  pointer-events:none;
}
.iso-stroke{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.device{position:relative}
.device-plate{
  position:absolute;
  left:-12px;
  right:-12px;
  top:16px;
  bottom:-18px;
  z-index:0;
  border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--accent-a20),var(--accent-a07));
  filter:blur(16px);
}
.window{
  position:relative;
  z-index:1;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--bg-panel);
  box-shadow:var(--shadow-window);
}
.win-chrome{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  height:44px;
  padding:0 16px;
  border-bottom:1px solid var(--border-soft);
  background:linear-gradient(180deg,var(--accent-a12),var(--accent-a04) 62%,transparent);
}
.win-chrome::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-a30) 28%,var(--accent-a30) 72%,transparent);
}
.win-dots{display:flex;gap:6px;flex:none}
.win-dot{display:block;width:9px;height:9px;border-radius:50%;flex:none}
.win-dot.d1{background:var(--error);opacity:.72}
.win-dot.d2{background:var(--warn);opacity:.72}
.win-dot.d3{background:var(--success);opacity:.72}
.win-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
}
.win-title svg{color:var(--accent);flex:none}
.win-title .sep{color:var(--border);font-weight:400}
.win-title-sub{font-weight:500;color:var(--text-muted)}
.win-state{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  padding:3px 9px;
  border:1px solid var(--border-soft);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-muted);
  white-space:nowrap;
}
.win-body{
  display:grid;
  grid-template-columns:280px minmax(0,1fr) 300px;
  min-height:262px;
}
.col{min-width:0;padding:14px 16px 16px}
.col + .col{border-left:1px solid var(--border-soft)}
.col-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.col-kicker{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--text)}
.col-meta{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.02em;color:var(--text-muted)}

.region-list{display:flex;flex-direction:column;gap:2px}
.region-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 8px;
  border-radius:var(--r-sm);
}
.region-item .flag{width:22px;height:16.5px;border-radius:3px}
.region-name{font-size:12.5px;color:var(--text);white-space:nowrap}
.region-item .line-tag{margin-left:auto}
.region-item.is-active{background:var(--accent-a08)}
.region-item.is-active::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:2.5px;
  border-radius:var(--r-pill);
  background:var(--accent);
}
.region-item.is-active .region-name{color:var(--accent-dark);font-weight:600}
.line-tag{
  padding:3px 7px;
  border:1px solid var(--accent-a16);
  border-radius:var(--r-pill);
  background:var(--accent-a08);
  font-family:var(--font-mono);
  font-size:9.5px;
  line-height:1;
  color:var(--accent-dark);
  white-space:nowrap;
}
.line-tag.is-relay{background:var(--warn-a10);border-color:var(--warn-a24);color:var(--warn)}
.line-tag.is-direct{background:var(--bg-panel-2);border-color:var(--border);color:var(--text-muted)}
.region-more{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
  padding-top:8px;
  border-top:1px dashed var(--border-soft);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.01em;
  color:var(--accent-dark);
}

.col-status{display:flex}
.status-card{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:13px 14px 12px;
  border:1px solid var(--accent-a16);
  border-radius:var(--r-md);
  background:linear-gradient(168deg,var(--accent-a08),var(--bg-panel) 58%);
  box-shadow:inset 0 1px 0 var(--on-ink),0 14px 26px -22px var(--accent-a45);
}
.status-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:12px;
}
.badge-ok{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 8px;
  border:1px solid var(--success-a24);
  border-radius:var(--r-pill);
  background:var(--success-a10);
  font-size:10.5px;
  font-weight:600;
  color:var(--success);
  white-space:nowrap;
}
.dot-ok{
  display:block;
  width:5px;
  height:5px;
  flex:none;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 2.5px var(--success-a10);
}
.status-main{display:flex;align-items:center;gap:11px}
.status-main .flag{width:30px;height:22.5px;border-radius:4px;box-shadow:0  6px -2px var(--ink-a14);box-shadow:0 2px 6px -2px var(--ink-a14)}
.status-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.status-name strong{font-size:15px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--text)}
.status-name span{font-family:var(--font-mono);font-size:10px;line-height:1.3;color:var(--text-muted)}
.switch{
  position:relative;
  flex:none;
  width:44px;
;
  height:25px;
  margin-left:auto;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--accent-soft),var(--accent));
  box-shadow:inset 0 1px 2px var(--accent-dark-a40),0 6px 12px -6px var(--accent-a45);
}
.switch::after{
  content:"";
  position:absolute;
  top:3px;
  right:3px;
  width:19px;
  height:19px;
  border-radius:50%;
  background:var(--on-ink);
  box-shadow:0 1px 3px var(--ink-a60);
}
.status-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  max-width:100%;
  padding:3px 8px;
  border:1px solid var(--border-soft);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:11px;
  color:var(--text);
}
.meta-chip svg{color:var(--accent);flex:none}
.quick-switch{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed var(--border);
}
.quick-label{
  display:block;
  margin-bottom:7px;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.06em;
  color:var(--text-muted);
}
.quick-list{display:flex;flex-wrap:wrap;gap:6px}
.quick-chip{
  padding:3px 9px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:10.5px;
  color:var(--text-muted);
}
.quick-chip.is-on{
  border-color:var(--accent-a30);
  background:var(--accent-a08);
  color:var(--accent-dark);
  font-weight:600;
}
.status-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  padding-top:12px;
  border-top:1px dashed var(--border);
  font-size:11px;
  color:var(--text-muted);
}
.status-foot em{
  margin-right:4px;
  font-family:var(--font-mono);
  font-size:9.5px;
  font-style:normal;
  letter-spacing:.04em;
  color:var(--text-muted);
}
.status-foot b{font-weight:600;color:var(--text)}

.detail-list{display:flex;flex-direction:column}
.detail-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6.5px 0;
  border-bottom:1px dashed var(--border-soft);
}
.detail-row:last-child{border-bottom:0}
.detail-row dt{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
}
.detail-row dd{font-size:12px;font-weight:500;color:var(--text);text-align:right}
.detail-row.is-key dd{
  padding:1px 8px;
  border:1px solid var(--accent-a16);
  border-radius:var(--r-pill);
  background:var(--accent-a08);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  color:var(--accent-dark);
  white-space:nowrap;
}
.win-foot{
  display:flex;
  align-items:center;
  gap:14px;
  padding:9px 16px;
  border-top:1px solid var(--border-soft);
  background:var(--bg-panel-2);
}
.pay-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.foot-kicker{
  margin-right:2px;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.06em;
  color:var(--text-muted);
}
.pay-chip{
  padding:2px 9px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:11px;
  color:var(--text);
  white-space:nowrap;
}
.foot-state{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  font-size:11px;
  color:var(--text-muted);
}
.foot-state b{font-weight:600;color:var(--text)}
.foot-sep{width:1px;height:11px;background:var(--border)}

.float-pill{
  position:absolute;
  z-index:3;
  left:-18px;
  top:-16px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:12px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  box-shadow:var(--shadow-float);
}
.float-pill svg{color:var(--success);flex:none}
.float-platforms{
  position:absolute;
  z-index:3;
  right:-6px;
  bottom:-46px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:9px 16px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--shadow-float);
}
.plat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  color:var(--text-muted);
  white-space:nowrap;
}
.plat svg{color:var(--text);opacity:.82;flex:none}

/* inner page hero (non-home) */
.page-hero{
  position:relative;
  overflow-x:clip;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 74%);
  border-bottom:1px solid var(--border-soft);
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 84%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 84%);
}
.page-hero-inner{
  position:relative;
  z-index:1;
  max-width:var(--wrap-max);
  margin-inline:auto;
  padding:56px var(--gutter) 44px;
  text-align:center;
}
.page-hero .eyebrow{margin-bottom:16px}
.page-lede{
  max-width:720px;
  margin:14px auto 0;
  font-size:16px;
  line-height:1.8;
  color:var(--text-muted);
}
.page-lede strong{color:var(--text);font-weight:600}

/* ---------- 8. Footer ---------- */
.site-foot{
  position:relative;
  overflow-x:clip;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-bottom) 100%);
}
.foot-inner{
  max-width:var(--wrap-max);
  margin-inline:auto;
  padding:52px var(--gutter) 26px;
}
.foot-top{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);
  gap:44px;
}
.foot-brand{min-width:0}
.foot-brand .brand{margin-bottom:14px}
.foot-desc{
  max-width:36ch;
  font-size:13.5px;
  line-height:1.85;
  color:var(--text-muted);
}
.foot-fact{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  padding:5px 11px;
  border:1px solid var(--accent-a16);
  border-radius:var(--r-pill);
  background:var(--accent-a06);
  font-size:12px;
  color:var(--accent-dark);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}
.foot-fact svg{flex:none}
.foot-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
.foot-col{min-width:0}
.foot-title{
  margin-bottom:12px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text);
}
.foot-links{display:flex;flex-direction:column;gap:2px}
.foot-links a{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:2px 0;
  font-size:13px;
  color:var(--text-muted);
  transition:color .16s ease;
}
.foot-links a:hover{color:var(--accent-dark)}
.foot-hot a{font-size:12.5px}
.foot-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 22px;
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid var(--border-soft);
}
.foot-copy{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--text-muted);
}
.foot-legal{
  display:flex;
  flex-wrap:wrap;
  gap:4px 18px;
  margin-left:auto;
}
.foot-legal a{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  font-size:12.5px;
  color:var(--text-muted);
}
.foot-legal a:hover{color:var(--accent-dark)}

/* ---------- 9. Panels & section heads ---------- */
.panel{
  min-width:0;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
}
.panel-pad{padding:24px}
.panel-soft{background:var(--bg-panel-2)}
.card{
  display:block;
  min-width:0;
  padding:22px;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
a.card:hover{
  transform:translateY(-2px);
  border-color:var(--accent-a30);
  box-shadow:0 1px 0 var(--on-ink) inset,0 24px 40px -30px var(--accent-a45);
}
.sec-head{max-width:720px;margin:0 auto 34px;text-align:center}
.sec-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--accent-dark);
}
.sec-kicker::before{
  content:"";
  width:14px;
  height:1px;
  background:var(--accent-a45);
}
.sec-title{
  font-family:var(--font-display);
  font-size:clamp(26px,3.4vw,40px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.025em;
  color:var(--text);
  text-wrap:balance;
}
.sec-lede{
  margin-top:12px;
  font-size:15px;
  line-height:1.8;
  color:var(--text-muted);
}
.sec-foot{
  display:flex;
  justify-content:center;
  margin-top:30px;
}

/* server status scaffold container — always in normal flow */
#server-status,
.server-status{
  position:relative;
  display:block;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  margin:0 0 var(--gap-lg);
}
#server-status:last-child{margin-bottom:0}

/* ---------- 10. Reveal ---------- */
.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}
}

/* ---------- 11. Responsive ---------- */
@media (max-width:1200px){
  .iso-deco{display:none}
  .hero-title{font-size:60px}
  .win-body{grid-template-columns:252px minmax(0,1fr) 274px}
}
@media (max-width:1024px){
  .nav-link{padding:9px 9px;font-size:13px}
  .hero-title{font-size:52px}
  .col{padding:12px 13px 14px}
  .win-body{grid-template-columns:236px minmax(0,1fr) 252px}
  .float-platforms{gap:12px;padding:8px 13px}
}
@media (max-width:920px){
  .main-nav{display:none}
  .head-inner{gap:12px}
  .head-actions{margin-left:auto}
  .nav-toggle{display:inline-flex}
  .hero-title{font-size:44px}
  .hero-inner{padding:22px 20px 48px}
  .win-body{grid-template-columns:1fr;min-height:0}
  .col + .col{border-left:0;border-top:1px solid var(--border-soft)}
  .region-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
  .float-pill{
    position:static;
    left:auto;
    top:auto;
    margin:0 0 12px;
  }
  .float-platforms{
    position:static;
    right:auto;
    bottom:auto;
    margin:14px auto 0;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 16px;
  }
  .foot-top{grid-template-columns:1fr;gap:32px}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .page-hero-inner{padding:40px var(--gutter) 34px}
  .sec-head{margin-bottom:26px}
}
@media (max-width:640px){
  :root{--gutter:16px;--sec-y:52px;--header-h:60px}
  body{font-size:15.5px}
  .site-head .brand-zh{display:none}
  .site-head .lang-switch{display:none}
  .site-head .head-inner{gap:8px}
  .site-head .head-actions{gap:6px;padding-left:10px}
  .site-head .btn-login{height:30px;padding:0 12px;font-size:12.5px}
  .no-break{white-space:normal}
  .tilt-l,.tilt-r{transform:none}
  .hero-title{font-size:34px;line-height:1.1}
  .hero-sub{font-size:14.5px;line-height:1.75}
  .hero-cta{width:100%;flex-direction:column;align-items:stretch;gap:10px}
  .hero-cta .btn{width:100%}
  .trust-item,
  .trust-item{border-left:0;padding:2px 10px}
  .region-row{gap:6px 12px;margin-bottom:26px}
  .device-wrap{width:100%}
  .win-chrome{height:40px;padding:0 12px;gap:8px}
  .win-title{font-size:11.5px}
  .win-title-sub{display:none}
  .win-state{font-size:9.5px}
  .win-foot{flex-wrap:wrap;gap:8px 10px}
  .foot-state{margin-left:0}
  .btn{height:46px;padding:0 20px;font-size:14px}
  .btn-sm{height:38px;padding:0 14px;font-size:12.5px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:22px}
  .foot-bottom{gap:10px 16px}
  .foot-legal{margin-left:0}
}
@media (max-width:480px){
  .region-list{grid-template-columns:1fr}
  .hero-title{font-size:30px}
  .page-hero-inner{padding:32px var(--gutter) 28px}
  .foot-cols{grid-template-columns:1fr}
  .panel-pad{padding:18px}
}

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