/* ==========================================================================
   VPNDQ — base.css
   Design tokens, reset, typography, layout, buttons, header, footer, reveal.
   Palette: warm paper (bordeaux + honey gold accents).
   ========================================================================== */

:root{
  /* --- surfaces ------------------------------------------------------- */
  --bg:#F9F2E7;
  --bg-hero-top:#FCF7EE;
  --bg-hero-bot:#F4EBDA;
  --panel:#FFFBF4;
  --panel-2:#F1E6D3;
  --panel-3:#F6EEDF;
  --line:#E3D5BE;
  --line-soft:#EDE1CC;

  /* --- accent: bordeaux ------------------------------------------------ */
  --accent:#7A1F3D;
  --accent-dark:#5C1229;
  --accent-06:rgba(122,31,61,.06);
  --accent-08:rgba(122,31,61,.08);
  --accent-10:rgba(122,31,61,.10);
  --accent-12:rgba(122,31,61,.12);
  --accent-18:rgba(122,31,61,.18);
  --rose:#F4E2E8;

  /* --- accent: honey gold ---------------------------------------------- */
  --gold:#E39A2E;
  --gold-deep:#C97F17;
  --gold-16:rgba(227,154,46,.16);

  /* --- text & semantics ------------------------------------------------ */
  --ink:#2B1B1A;
  --muted:#7A6660;
  --ok:#2E7D4F;
  --warn:#C98A1A;
  --err:#B8322D;
  --white:#FFFFFF;

  /* --- chrome, elevation ----------------------------------------------- */
  --chrome-hi:rgba(255,255,255,.22);
  --chrome-slot:rgba(255,255,255,.14);
  --chrome-text:rgba(255,246,238,.82);
  --chrome-text-dim:rgba(255,246,238,.58);
  --shadow-ink:rgba(43,27,26,.22);
  --shadow-win:0 40px 90px -30px var(--accent-18),0 18px 40px -18px var(--accent-12),0 2px 6px rgba(92,18,41,.10);
  --shadow-card:0 18px 40px -16px var(--accent-12),0 4px 12px -6px var(--accent-10);
  --shadow-btn:0 10px 24px -10px var(--accent-18);

  /* --- flag fills ------------------------------------------------------ */
  --flag-red:#C8102E;
  --flag-blue:#0B3D91;
  --flag-white:#FFFFFF;
  --flag-black:#1C1C1C;
  --flag-gold:#F2C230;

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

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

  /* --- rhythm ---------------------------------------------------------- */
  --gutter:24px;
  --topbar-h:64px;
}

/* ---------- reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + 24px)}
html.nav-open{overflow:hidden}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;border-spacing:0}
code,kbd,samp,pre{font-family:var(--font-mono)}
code{font-size:.92em;overflow-wrap:anywhere;word-break:break-word}
pre{
  max-width:100%;overflow-x:auto;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;font-size:13px;line-height:1.7;
}
pre code{overflow-wrap:normal;white-space:pre}
hr{border:0;border-top:1px solid var(--line)}
::selection{background:var(--rose);color:var(--accent-dark)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.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}

/* ---------- typography -------------------------------------------------- */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--ink);font-weight:800;line-height:1.25}
p{line-height:1.7}
strong,b{font-weight:700}
.h1{font-size:60px;font-weight:900;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.h1__key{color:var(--accent)}
.h2{font-size:clamp(26px,3vw,34px);font-weight:900;line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.h3{font-size:clamp(19px,2vw,22px);font-weight:800;line-height:1.35}
.h4{font-size:17px;font-weight:800;line-height:1.4}
.lead{font-size:17px;line-height:1.65;color:var(--muted)}
.sub{margin-top:14px;max-width:760px;font-size:17px;line-height:1.55;color:var(--muted)}
.sub strong{color:var(--ink);font-weight:700}
.muted{color:var(--muted)}
.mono{font-family:var(--font-mono)}
.no-break{white-space:nowrap}
.sec-head{max-width:720px}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);
}
.sec-title{margin-top:10px}
.sec-lead{margin-top:12px;font-size:16px;line-height:1.7;color:var(--muted)}

/* ---------- layout ------------------------------------------------------ */
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-top:72px;padding-bottom:72px}
.sec--tight{padding-top:44px;padding-bottom:44px}
.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))}

/* ---------- buttons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 26px;border-radius:12px;
  font-size:15px;font-weight:700;letter-spacing:.01em;
  flex-shrink:0;white-space:nowrap;max-width:100%;
  transition:transform .15s,box-shadow .15s,background .15s,color .15s;
}
.btn svg{width:16px;height:16px;flex:none}
.btn--primary{
  color:var(--white);
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent-dark) 100%);
  box-shadow:var(--shadow-btn),inset 0 1px 0 var(--chrome-hi);
}
.btn--primary:hover{
  transform:translateY(-2px);
  background:linear-gradient(120deg,var(--accent) 0%,var(--accent-dark) 60%,var(--gold-deep) 140%);
  box-shadow:0 16px 30px -12px var(--accent-18),inset 0 1px 0 var(--chrome-hi);
}
.btn--ghost{color:var(--accent);background:var(--panel);border:1.5px solid var(--accent)}
.btn--ghost:hover{transform:translateY(-2px);background:var(--rose)}
.btn--sm{height:38px;padding:0 18px;font-size:13.5px;border-radius:var(--r-sm)}
.btn--block{width:100%}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- cards / panels ---------------------------------------------- */
.card{
  min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);padding:24px;
}
.card--flat{box-shadow:none}
.card--tint{background:var(--panel-3)}
.card__title{font-size:18px;font-weight:800}
.card__text{margin-top:8px;font-size:14.5px;line-height:1.7;color:var(--muted)}

/* ---------- header ------------------------------------------------------ */
.topbar{position:relative;z-index:40;background:var(--bg-hero-top)}
.topbar__in{position:relative;height:var(--topbar-h);display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand__logo{width:32px;height:32px;border-radius:34%;flex:none}
.brand__name{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.brand__zh{font-size:14.5px;font-weight:600;color:var(--muted);letter-spacing:0}

.nav{margin-left:auto;margin-right:auto}
.nav__list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav__list li{flex:none}
.nav__list a{
  display:inline-flex;align-items:center;
  font-size:14.5px;font-weight:500;color:var(--muted);
  padding:6px 0;position:relative;transition:color .15s;
}
.nav__list a:hover{color:var(--ink)}
.nav__list a.is-active{color:var(--ink);font-weight:700}
.nav__list a.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--accent);
}

.topbar__end{display:flex;align-items:center;gap:12px;flex:none}
.lang{position:relative}
.lang__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:38px;padding:8px 10px;border-radius:var(--r-sm);
  font-size:13.5px;color:var(--muted);transition:background .15s,color .15s;
}
.lang__btn svg{width:15px;height:15px;flex:none}
.lang__btn:hover{background:var(--panel-2);color:var(--ink)}
.lang__menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:70;
  min-width:180px;padding:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
}
.lang__menu.is-open{display:block}
.lang__menu a{
  display:flex;align-items:center;width:100%;min-height:38px;padding:9px 12px;
  border-radius:var(--r-sm);font-size:14px;color:var(--ink);
}
.lang__menu a:hover{background:var(--panel-2)}
.lang__menu a[aria-current="true"]{background:var(--rose);color:var(--accent);font-weight:700}

.btn-login{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:9px 18px;border-radius:var(--r-sm);
  font-size:14px;font-weight:700;color:var(--accent);
  background:var(--panel);border:1.5px solid var(--accent);
  transition:background .15s,color .15s,transform .15s;
}
.btn-login:hover{background:var(--accent);color:var(--white);transform:translateY(-1px)}

.burger{
  display:none;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;border-radius:var(--r-sm);color:var(--ink);
}
.burger svg{width:22px;height:22px}
.burger__x{display:none}
.burger.is-open .burger__m{display:none}
.burger.is-open .burger__x{display:block}

.nav-veil{display:none;position:fixed;inset:var(--topbar-h) 0 0;z-index:55;background:var(--shadow-ink)}
.nav-veil.is-open{display:block}
.nav-drawer{
  display:none;position:fixed;left:0;right:0;top:var(--topbar-h);z-index:60;
  background:var(--panel);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-card);
  max-height:calc(100dvh - var(--topbar-h));
  overflow-y:auto;overscroll-behavior:contain;
  padding:10px var(--gutter) 22px;
}
.nav-drawer a{
  display:flex;align-items:center;width:100%;
  min-height:48px;padding:12px 2px;
  font-size:16px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line-soft);
}
.nav-drawer a.is-active{color:var(--accent)}
.nav-drawer__label{
  display:block;padding:18px 2px 6px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.nav-drawer__langs a{min-height:44px;font-size:15px;font-weight:500;color:var(--muted)}

/* ---------- footer ------------------------------------------------------ */
.foot{
  margin-top:56px;padding-top:48px;padding-bottom:28px;
  background:var(--panel);border-top:1px solid var(--line);
}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot__grid > *{min-width:0}
.foot__brandcol{display:flex;flex-direction:column;gap:12px}
.foot__desc{font-size:13.5px;line-height:1.75;color:var(--muted);max-width:36ch}
.foot__note{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:6px 12px;border-radius:var(--r-pill);
  background:var(--rose);color:var(--accent);font-size:12.5px;font-weight:700;
}
.foot__title{
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.foot__list{margin-top:14px;display:flex;flex-direction:column;gap:4px}
.foot__list a{display:inline-flex;align-items:center;min-height:32px;font-size:14px;color:var(--ink);transition:color .15s}
.foot__list a:hover{color:var(--accent)}
.foot__kwrow{margin-top:40px;padding-top:24px;border-top:1px solid var(--line-soft)}
.foot__kw{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.foot__kw a{
  display:inline-flex;align-items:center;min-height:28px;
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--panel-2);border:1px solid var(--line);
  font-size:12.5px;color:var(--ink);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:background .15s,color .15s;
}
.foot__kw a:hover{background:var(--rose);color:var(--accent)}
.foot__bottom{
  margin-top:32px;padding-top:18px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  font-size:12.5px;color:var(--muted);
}
.foot__legal,.foot__langs{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot__legal a,.foot__langs a{display:inline-flex;align-items:center;min-height:28px;color:var(--muted)}
.foot__legal a:hover,.foot__langs a:hover{color:var(--accent)}

/* ---------- server status clamp ---------------------------------------- */
#server-status{display:block;width:100%;max-width:100%;overflow:hidden;margin-block:28px}

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

/* ---------- responsive -------------------------------------------------- */
@media (max-width:1180px){
  .nav__list{gap:18px}
  .nav__list a{font-size:13.5px}
}
@media (max-width:1024px){
  .nav{display:none}
  .topbar__end{margin-left:auto}
  .burger{display:inline-flex}
  .nav-drawer.is-open{display:block}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
}
@media (max-width:900px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h1{font-size:52px}
}
@media (max-width:768px){
  .sec{padding-top:56px;padding-bottom:56px}
}
@media (max-width:640px){
  :root{--gutter:16px}
  .wrap{padding-inline:16px}
  .no-break{white-space:normal}
  .h1{font-size:38px;letter-spacing:-.02em}
  .sub{font-size:15px}
  .lead{font-size:15.5px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
  .foot__grid{grid-template-columns:minmax(0,1fr)}
  .btn{width:100%}
  .btn--sm{width:auto}
  .topbar__end .lang{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  .reveal,.reveal.pending{opacity:1;transform:none}
}