/* ==========================================================================
   VPNDX — base.css
   Design tokens, reset, typography, header, footer, cards, reveal.
   All colours / radii / shadows live in :root only.
   ========================================================================== */

:root{
  /* --- surfaces --- */
  --bg:#F2F7FD;
  --bg-top:#E9F1FC;
  --bg-bottom:#F6F9FE;
  --panel:#FFFFFF;
  --panel-2:#E4EDF8;
  --panel-3:#F7FAFE;
  --border:#D3DEEC;
  --border-soft:color-mix(in srgb, var(--border) 60%, transparent);

  /* --- ink --- */
  --text:#0B0F1A;
  --muted:#5C6678;

  /* --- accents --- */
  --accent:#5B21F5;
  --accent-dark:#3E12B8;
  --blue:#2D8CFF;
  --blue-dark:#1C63C9;
  --cyan:#6EEBF0;

  /* --- semantic --- */
  --success:#12A66B;
  --warn:#FF7A3D;
  --error:#E0284A;

  /* --- candy surfaces --- */
  --candy-blue:#D8E8FF;
  --candy-pink:#FBDDF0;
  --candy-orange:#FFDDCB;

  /* --- glass / metal --- */
  --glass-1:#C9E1FF;
  --glass-2:#EAF3FF;
  --glass-edge:#9DBEEC;
  --terminal:#12161F;
  --terminal-text:#D7E3F4;

  /* --- flag pigments --- */
  --flag-red:#D8252B;
  --flag-blue:#1F3F9E;
  --flag-green:#1F8A4C;
  --flag-white:#FFFFFF;

  /* --- radii --- */
  --r:6px;
  --r-sm:4px;
  --r-pill:999px;

  /* --- rhythm --- */
  --gutter:40px;
  --gutter-narrow:16px;
  --sec-y:72px;
  --header-h:60px;

  /* --- texture & depth --- */
  --grid:color-mix(in srgb, var(--text) 3%, transparent);
  --shadow-accent:0 28px 64px -28px color-mix(in srgb, var(--accent) 22%, transparent), 0 2px 8px -2px color-mix(in srgb, var(--accent) 10%, transparent);
  --shadow-soft:0 18px 40px -26px color-mix(in srgb, var(--accent) 24%, transparent);
  --shadow-deep:0 20px 44px -18px color-mix(in srgb, var(--text) 42%, transparent);

  /* --- type --- */
  --font-display:'Inter','Noto Sans SC','Noto Sans JP','Noto Sans KR','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --font-body:'Inter','Noto Sans SC','Noto Sans JP','Noto Sans KR','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
}

/* ---------- reset ---------- */
*{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:400 16px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:32px 32px;
}
img,svg{display:block;max-width:100%}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);letter-spacing:-.02em;line-height:1.2}
p{margin:0 0 1em}
hr{border:0;border-top:1px solid var(--border);margin:32px 0}
code{
  font-family:var(--font-mono);
  font-size:.9em;
  overflow-wrap:anywhere;
  word-break:break-word;
}
pre{
  font-family:var(--font-mono);
  overflow-x:auto;
  max-width:100%;
}
pre code{overflow-wrap:normal;word-break:normal}

/* keyboard focus — never suppressed */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- layout ---------- */
.wrap{
  max-width:1280px;
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.sec--tight{padding-top:40px;padding-bottom:40px}
.band{
  position:relative;
  z-index:1;
  overflow-x:clip;
  max-width:100%;
}
.band--top{background:linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%)}
.stack > * + *{margin-top:16px}
.center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}

/* ---------- typography ---------- */
.h-display,
h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(52px, 4.6vw, 68px);
  line-height:1.12;
  letter-spacing:-.03em;
  margin:0 0 24px;
}
h2{font-size:clamp(28px, 2.4vw, 40px);font-weight:800;letter-spacing:-.025em;margin:0 0 16px}
h3{font-size:clamp(20px, 1.5vw, 24px);font-weight:700;margin:0 0 12px}
h4{font-size:17px;font-weight:700;margin:0 0 8px}
.lede{font-size:18px;line-height:1.65;color:var(--muted);max-width:34em}
.lede strong,.prose strong{color:var(--text);font-weight:600}
.small{font-size:13px;color:var(--muted)}
.muted{color:var(--muted)}

/* monospace all-caps label system */
.mono-label{
  font:600 11px/1 var(--font-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.mono-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--panel) 55%, transparent);
  font:600 11px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text);
  max-width:100%;
  overflow:hidden;
}
.mono-tag--plain{background:var(--panel-2)}
.mono-tag--cyan{background:var(--cyan)}
.mono-tag--accent{background:color-mix(in srgb, var(--accent) 12%, var(--panel));color:var(--accent-dark)}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font:600 11px/1 var(--font-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 20px;
}
.eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

.grad{
  display:inline-block;
  padding-right:.06em;
  background:linear-gradient(92deg, var(--blue) 0%, var(--accent) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.no-break{white-space:nowrap}
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:52px;
  padding:12px 26px;
  font:600 14px/1 var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  border:0;
  border-radius:var(--r-sm);
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease, transform .15s ease, color .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--text);color:var(--panel)}
.btn-primary:hover{background:var(--accent-dark);color:var(--panel)}
.btn-primary svg{width:14px;height:14px;flex:none}
.btn-secondary{background:var(--panel-2);color:var(--text)}
.btn-secondary:hover{background:var(--candy-blue)}
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
.btn-ghost:hover{background:var(--panel-2)}
.btn-sm{min-height:38px;padding:8px 16px;font-size:12px;letter-spacing:.12em}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn [aria-hidden]{flex:none}
.btn.is-current{background:var(--accent);color:var(--panel)}

/* ---------- header ---------- */
.site-head{
  position:relative;
  z-index:20;
  padding:16px var(--gutter) 0;
}
.nav{
  max-width:1360px;
  margin:0 auto;
  min-height:var(--header-h);
  padding:8px 12px 8px 20px;
  display:flex;
  align-items:center;
  gap:20px;
  background:var(--panel);
  border-radius:var(--r);
  box-shadow:var(--shadow-accent);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex:none;
}
.brand:hover{text-decoration:none}
.brand-logo{width:30px;height:30px;flex:none}
.brand-en{font:800 18px/1 var(--font-display);letter-spacing:-.02em;color:var(--text)}
.brand-zh{
  font:500 12px/1 var(--font-body);
  color:var(--muted);
  padding-left:10px;
  border-left:1px solid var(--border);
}
.nav-links{
  flex:1;
  display:flex;
  justify-content:center;
  gap:2px;
  min-width:0;
}
.nav-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 14px;
  border-radius:var(--r-pill);
  font-size:14px;
  font-weight:500;
  color:var(--muted);
  text-decoration:none;
  transition:color .15s ease, background-color .15s ease;
}
.nav-links a:hover{color:var(--text);text-decoration:none}
.nav-links a.is-active{background:var(--panel-2);color:var(--text);font-weight:600}
.nav-tools{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}
.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:8px 10px;
  background:none;
  border:0;
  cursor:pointer;
  font:500 13px/1 var(--font-body);
  color:var(--muted);
  border-radius:var(--r-sm);
}
.lang-btn:hover{color:var(--text);background:var(--panel-2)}
.lang-wrap{position:relative}
.lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:170px;
  padding:6px;
  background:var(--panel);
  border-radius:var(--r);
  box-shadow:var(--shadow-accent);
  display:none;
  z-index:40;
}
.lang-menu.is-open{display:block}
.lang-menu a{
  display:flex;
  width:100%;
  align-items:center;
  min-height:38px;
  padding:8px 12px;
  border-radius:var(--r-sm);
  font-size:14px;
  color:var(--text);
  text-decoration:none;
}
.lang-menu a:hover{background:var(--panel-2);text-decoration:none}
.lang-menu a[aria-current="true"]{color:var(--muted)}
.btn-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 18px;
  background:var(--text);
  color:var(--panel);
  font:600 13px/1 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  border-radius:var(--r-sm);
  text-decoration:none;
}
.btn-login:hover{background:var(--accent-dark);color:var(--panel);text-decoration:none}
.burger{
  display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  background:none;
  border:0;
  cursor:pointer;
  border-radius:var(--r-sm);
  color:var(--text);
}
.burger:hover{background:var(--panel-2)}
.burger svg{width:22px;height:22px}
.drawer{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:var(--panel);
  border-radius:var(--r);
  box-shadow:var(--shadow-accent);
  padding:8px;
  max-height:calc(100dvh - var(--header-h) - 48px);
  overflow-y:auto;
  overscroll-behavior:contain;
  z-index:60;
}
.drawer.is-open{display:block}
.drawer ul{display:block}
.drawer a{
  display:flex;
  align-items:center;
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border-radius:var(--r-sm);
  font-size:15px;
  font-weight:500;
  color:var(--text);
  text-decoration:none;
}
.drawer a:hover{background:var(--panel-2);text-decoration:none}
.drawer a.is-active{background:var(--panel-2);font-weight:600}
.drawer .drawer-sep{height:1px;background:var(--border);margin:8px 4px}
.nav-veil{
  display:none;
  position:fixed;
  inset:0;
  background:color-mix(in srgb, var(--text) 22%, transparent);
  z-index:15;
}
.nav-veil.is-open{display:block}
html.nav-open{overflow:hidden}

/* ---------- footer ---------- */
.site-foot{
  position:relative;
  z-index:1;
  margin-top:80px;
  padding-top:56px;
  padding-bottom:32px;
  background:var(--panel);
  border-top:1px solid var(--border);
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{font-size:14px;line-height:1.7;color:var(--muted);max-width:32em}
.foot-col h3{
  font:600 11px/1 var(--font-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
}
.foot-col li{margin-bottom:10px}
.foot-col a{font-size:14px;color:var(--text);text-decoration:none}
.foot-col a:hover{color:var(--accent-dark);text-decoration:underline}
.foot-col--kw{display:flex;flex-wrap:wrap;gap:8px}
.foot-col--kw li{margin:0}
.foot-col--kw a{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:var(--r-pill);
  background:var(--panel-2);
  font-size:13px;
  color:var(--text);
}
.foot-col--kw a:hover{background:var(--candy-blue);text-decoration:none}
.foot-langs{display:flex;flex-wrap:wrap;gap:10px}
.foot-langs a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 12px;
  border-radius:var(--r-pill);
  background:var(--panel-2);
  font-size:13px;
  color:var(--text);
}
.foot-langs a:hover{background:var(--candy-blue);text-decoration:none}
.foot-bottom{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  color:var(--muted);
}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-legal a{color:var(--muted);text-decoration:none}
.foot-legal a:hover{color:var(--accent-dark);text-decoration:underline}

/* ---------- generic card / panel ---------- */
.card{
  position:relative;
  background:var(--panel);
  border-radius:var(--r);
  padding:28px;
  box-shadow:var(--shadow-soft);
  min-width:0;
}
.card--topline::before{
  content:"";
  position:absolute;
  top:0;
  left:28px;
  width:72px;
  height:3px;
  border-radius:0 0 2px 2px;
  background:var(--accent);
}
.card--blue{background:var(--candy-blue)}
.card--pink{background:var(--candy-pink)}
.card--orange{background:var(--candy-orange)}
.card--flat{box-shadow:none;box-shadow:inset 0 0 0 1px var(--border)}
.card-title{margin:0 0 10px;font-size:20px;font-weight:700}
.card p{font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 16px}
.card p:last-child{margin-bottom:0}

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

/* ---------- reveal ---------- */
.reveal{transition:opacity .55s ease, transform .55s ease}
.reveal.pending{opacity:0;transform:translateY(16px)}
.reveal.shown{opacity:1;transform:none}

/* ---------- tilt defence ---------- */
.tilt{transform:rotate(-.45deg)}
.tilt-r{transform:rotate(.45deg)}

/* ---------- table baseline ---------- */
.table-scroll{
  overflow-x:auto;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}
.table-scroll table{min-width:640px;width:100%;border-collapse:collapse}
.table-scroll th,
.table-scroll td{
  padding:12px 14px;
  text-align:left;
  font-size:14px;
  border-bottom:1px solid var(--border);
  word-break:keep-all;
  color:var(--text);
}
.table-scroll th{
  font:600 12px/1.4 var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.table-scroll tbody tr:hover{background:var(--panel-3)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  h1,.h-display{font-size:clamp(44px, 4.6vw, 56px)}
}
@media (max-width:960px){
  :root{--gutter:24px}
  .site-head{padding:12px 20px 0}
  .nav{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    padding:8px 12px;
  }
  .nav-links{display:none}
  .nav-tools{margin-left:auto;justify-self:end;grid-column:3}
  .burger{display:inline-flex}
  .foot-grid{grid-template-columns:1fr 1fr}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  h1,.h-display{font-size:clamp(28px, 7.4vw, 40px);line-height:1.15;letter-spacing:-.02em}
  h2{font-size:clamp(24px, 5.4vw, 30px)}
  .lede{font-size:17px}
  .brand-zh{display:none}
  .sec{padding-top:48px;padding-bottom:48px}
  .btn{width:100%;justify-content:center}
  .btn-row .btn{width:auto}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--gutter:var(--gutter-narrow)}
  .no-break{white-space:normal}
  .tilt,.tilt-r{transform:none}
  .foot-grid{grid-template-columns:1fr}
  .table-scroll th,.table-scroll td{padding:10px 12px}
  /* narrow screens: language switch lives in the drawer, keep the bar on one line */
  .nav-tools .lang-wrap{display:none}
  .btn-login{min-height:34px;padding:8px 12px;font-size:12px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.pending{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
}

/* keep decorative absolute layers inside the viewport */
.hero,
.stats,
.dec-stage{overflow-x:clip}