/* ============================================================
   VPNHP 设计系统 · 基础层
   「晨间调度台」暖纸体系:米白暖纸底 + 曦橙日出渐变
   ============================================================ */

:root{
  /* ---- 调色板 ---- */
  --bg:#FBF6ED;
  --bg-panel:#FFFDF8;
  --bg-panel2:#F3EAD9;
  --border:#E6D9C3;
  --accent:#E86A28;
  --accent-dark:#C5511B;
  --accent-2:#F2B04A;
  --text:#33261A;
  --text-muted:#7A6B58;
  --success:#3E8E5A;
  --warn:#C9930F;
  --error:#C23B2E;

  /* ---- 派生淡色 ---- */
  --accent-soft:rgba(232,106,40,.10);
  --accent-line:rgba(232,106,40,.28);
  --success-soft:rgba(62,142,90,.10);
  --success-line:rgba(62,142,90,.30);
  --success-ring:rgba(62,142,90,.18);
  --line-soft:rgba(230,217,195,.55);
  --head-bg:rgba(251,246,237,.82);
  --chrome-2:#FBF5EA;
  --chrome-3:#F7EFE0;

  /* ---- 旗帜用色(真实国旗特征色,仅限旗帜 SVG) ---- */
  --flag-jp:#D8002A;
  --flag-sg:#ED2939;
  --flag-us-blue:#3C3B6E;
  --flag-us-red:#B22234;
  --flag-hk:#DE2910;
  --flag-de-black:#2B2B2B;
  --flag-de-red:#DD0000;
  --flag-de-gold:#FFCE00;
  --flag-au-blue:#012169;

  /* ---- 渐变 ---- */
  --grad-sunrise:linear-gradient(135deg,var(--accent-2) 0%,var(--accent) 100%);

  /* ---- 字体 ---- */
  --font-display:'Inter','Noto Sans SC','Noto Sans JP','Noto Sans KR',-apple-system,'PingFang SC','Hiragino Sans','Malgun Gothic',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,'SF Mono',Consolas,'Courier New',monospace;

  /* ---- 圆角 ---- */
  --radius-s:8px;
  --radius-m:12px;
  --radius-l:18px;

  /* ---- 投影 ---- */
  --shadow-window:0 1px 2px rgba(51,38,26,.05),0 8px 20px rgba(51,38,26,.07),0 28px 60px rgba(197,81,27,.12);
  --shadow-card:0 1px 2px rgba(51,38,26,.05),0 3px 8px rgba(51,38,26,.05);
  --shadow-pop:0 1px 2px rgba(51,38,26,.05),0 3px 8px rgba(51,38,26,.05),0 16px 36px rgba(51,38,26,.10);
  --shadow-cta:0 2px 6px rgba(197,81,27,.28),0 8px 20px rgba(232,106,40,.24);
  --shadow-cta-hover:0 4px 10px rgba(197,81,27,.32),0 12px 26px rgba(232,106,40,.28);

  /* ---- 布局 ---- */
  --nav-h:76px;
  --gutter:36px;
  --content-w:1280px;
}

/* ============ reset ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
html.nav-open{overflow:hidden}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* 纸感噪点(全局极淡) */
body::after{
  content:"";
  position:fixed;inset:0;z-index:60;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size:180px 180px;
  opacity:.045;
  mix-blend-mode:multiply;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
ul,ol{list-style-position:inside}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
::selection{background:var(--accent-2);color:var(--text)}

/* ============ 通用工具 ============ */
.no-break{white-space:nowrap}
.container,.wrap{
  max-width:var(--content-w);
  margin:0 auto;
  padding-inline:var(--gutter);
}
/* 区块节奏:只声明纵向,严禁横向清零简写 */
.sec{padding-top:72px;padding-bottom:72px}
.sec-tight{padding-top:44px;padding-bottom:44px}

/* ============ 排版 ============ */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.015em;line-height:1.18}
h1{font-size:62px;line-height:1.12;letter-spacing:-.022em}
h2{font-size:34px}
h3{font-size:21px;letter-spacing:-.01em}
h4{font-size:17px;letter-spacing:0}
p{overflow-wrap:break-word}
strong{color:var(--text);font-weight:700}
.small{font-size:13px;color:var(--text-muted)}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-muted)}
/* 标题渐变强调词 */
.kw{
  background:var(--grad-sunrise);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* 行内代码:超长订阅串防溢出 */
code{
  font-family:var(--font-mono);
  font-size:.88em;
  background:var(--bg-panel2);
  border:1px solid var(--border);
  border-radius:5px;
  padding:.1em .38em;
  overflow-wrap:anywhere;
  word-break:break-word;
}
pre{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  padding:16px 18px;
  overflow-x:auto;
  max-width:100%;
  font-size:13.5px;
  line-height:1.7;
}
pre code{background:none;border:none;padding:0;white-space:pre}

/* ============ 按钮 ============ */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:15px 36px;border-radius:10px;
  background:var(--grad-sunrise);color:var(--bg-panel);
  font-size:16.5px;font-weight:700;letter-spacing:.02em;
  box-shadow:var(--shadow-cta);
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-cta-hover)}
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:14px 30px;border-radius:10px;
  background:var(--bg-panel);border:1.5px solid var(--border);
  font-size:16px;font-weight:600;color:var(--text);
  transition:border-color .15s ease,background .15s ease;
}
.btn-secondary:hover{border-color:var(--accent);background:var(--bg-panel)}
/* 登录按钮(导航右端常驻) */
.btn-login{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:9px 22px;border-radius:var(--radius-s);
  font-size:14.5px;font-weight:600;color:var(--accent-dark);
  background:var(--bg-panel);border:1.5px solid var(--accent);
  transition:background .15s ease,color .15s ease;
}
.btn-login:hover{background:var(--accent);color:var(--bg-panel)}
/* 套餐卡中性按钮(比价场景,不用拉新词) */
.btn-plan{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:11px 22px;border-radius:10px;
  background:var(--bg-panel2);border:1.5px solid var(--border);
  font-size:14.5px;font-weight:600;color:var(--text);
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.btn-plan:hover{border-color:var(--accent);color:var(--accent-dark);background:var(--bg-panel)}
.plan-card.is-featured .btn-plan{
  background:var(--grad-sunrise);color:var(--bg-panel);border-color:transparent;
  box-shadow:var(--shadow-cta);
}
.plan-card.is-featured .btn-plan:hover{transform:translateY(-1px);box-shadow:var(--shadow-cta-hover)}
/* 小型获取按钮(平台卡等) */
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:7px 16px;border-radius:999px;
  border:1px solid var(--accent-line);color:var(--accent-dark);
  font-size:13px;font-weight:600;background:var(--bg-panel);
  transition:background .15s ease,color .15s ease;
}
.btn-ghost:hover{background:var(--accent);color:var(--bg-panel)}

/* ============ 顶部导航 ============ */
.site-head,
#site-header{
  position:relative;z-index:20;
  border-bottom:1px solid var(--line-soft);
  background:var(--head-bg);
  backdrop-filter:blur(8px);
}
.nav-bar{height:var(--nav-h);display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{display:block;width:30px;height:30px;flex:none}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.01em}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:24px}
.nav-links a{
  display:inline-flex;align-items:center;min-height:34px;
  padding:8px 14px;border-radius:var(--radius-s);
  font-size:14.5px;color:var(--text-muted);
  transition:color .15s ease,background .15s ease;
}
.nav-links a:hover{color:var(--text);background:var(--bg-panel2)}
.nav-links a.is-active{color:var(--text);font-weight:600}
.nav-more{position:relative}
.nav-more > a::after{content:" ▾";font-size:11px;color:var(--text-muted)}
.nav-more .dropdown{
  position:absolute;top:calc(100% + 6px);left:0;min-width:172px;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-m);
  box-shadow:var(--shadow-pop);
  padding:6px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
.nav-more:hover .dropdown,.nav-more:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.nav-more .dropdown a{display:block;min-height:36px;padding:9px 12px;border-radius:var(--radius-s);font-size:14px}
.nav-tools{margin-left:auto;display:flex;align-items:center;gap:12px}
/* 语言切换 */
.lang-switch{position:relative}
.lang-pick{
  display:inline-flex;align-items:center;gap:6px;
  min-height:36px;padding:8px 13px;border-radius:999px;
  border:1px solid var(--border);border-radius:999px;
  font-size:13.5px;color:var(--text-muted);background:var(--bg-panel);
}
.lang-pick .caret{font-size:10px;line-height:1}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:152px;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-m);
  box-shadow:var(--shadow-pop);
  padding:6px;display:none;flex-direction:column;gap:2px;z-index:30;
}
.lang-switch.open .lang-menu,.lang-switch:focus-within .lang-menu{display:flex}
.lang-menu a{display:block;min-height:36px;padding:9px 12px;border-radius:var(--radius-s);font-size:14px;color:var(--text)}
.lang-menu a:hover{background:var(--bg-panel2)}
.lang-menu a.is-cur{color:var(--accent-dark);font-weight:600;background:var(--bg-panel2)}
/* 汉堡按钮(窄屏) */
.nav-burger{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  min-width:44px;min-height:44px;
  border:1px solid var(--border);border-radius:var(--radius-s);
  background:var(--bg-panel);
}
.nav-burger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
html.nav-open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
html.nav-open .nav-burger span:nth-child(2){opacity:0}
html.nav-open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* 抽屉(窄屏,实色背景,nav 元素) */
.nav-drawer{display:none}
.nav-drawer .drawer-h{
  font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--text-muted);
  padding:16px 4px 8px;
}
.nav-drawer ul{list-style:none}
.nav-drawer ul a{
  display:block;min-height:44px;padding:12px 4px;
  font-size:15px;line-height:1.4;
  border-bottom:1px dashed var(--border);
}
.nav-drawer ul a.is-active{color:var(--accent-dark);font-weight:600}

/* ============ 页脚 ============ */
.site-foot{
  background:var(--bg-panel2);
  border-top:1px solid var(--border);
  padding-top:52px;padding-bottom:26px;
  margin-top:88px;
}
.foot-grid{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,.9fr);gap:36px}
.foot-brand .brand{margin-bottom:10px}
.foot-intro{font-size:13.5px;color:var(--text-muted);line-height:1.7;max-width:34em}
.foot-h{font-size:12px;letter-spacing:.12em;font-weight:700;color:var(--text);margin-bottom:12px}
.foot-col a{display:block;min-height:30px;padding:5px 0;font-size:14px;color:var(--text-muted);transition:color .15s ease}
.foot-col a:hover{color:var(--accent-dark)}
.foot-hot{display:flex;flex-wrap:wrap;gap:8px}
.foot-hot a{
  display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:5px 11px;border:1px solid var(--border);border-radius:999px;
  background:var(--bg-panel);font-size:12.5px;color:var(--text-muted);
  transition:color .15s ease,border-color .15s ease;
}
.foot-hot a:hover{color:var(--accent-dark);border-color:var(--accent-line)}
.foot-lang a{display:block;min-height:30px;padding:5px 0;font-size:14px;color:var(--text-muted)}
.foot-lang a:hover{color:var(--accent-dark)}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;
  margin-top:38px;padding-top:20px;border-top:1px dashed var(--border);
  font-size:13px;color:var(--text-muted);
}
.foot-legal{display:flex;gap:20px}
.foot-legal a{color:var(--text-muted);transition:color .15s ease}
.foot-legal a:hover{color:var(--accent-dark)}

/* ============ 滚动淡入(默认可见,pending 才隐藏) ============ */
.reveal{transition:opacity .55s ease,transform .55s ease}
.reveal.pending{opacity:0;transform:translateY(16px)}
.reveal.shown{opacity:1;transform:translateY(0)}

/* ============ 响应式 ============ */
@media (max-width:1180px){
  h1{font-size:52px}
}
@media (max-width:960px){
  :root{--nav-h:64px}
  .nav-links{display:none}
  .nav-burger{display:inline-flex}
  html.nav-open .nav-drawer{
    display:block;position:absolute;top:100%;left:0;right:0;
    background:var(--bg-panel);border-bottom:1px solid var(--border);
    box-shadow:0 24px 44px rgba(51,38,26,.16);
    max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;
    padding:6px var(--gutter) 26px;
  }
  h1{font-size:40px}
  h2{font-size:28px}
  .sec{padding-top:52px;padding-bottom:52px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .btn-primary{padding:14px 30px;font-size:16px}
}
@media (max-width:640px){
  :root{--gutter:18px}
  h1{font-size:34px}
  h2{font-size:24px}
  h3{font-size:18px}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  /* 窄屏导航:压缩间距,防 375px 溢出 */
  .nav-bar{gap:14px}
  .nav-tools{gap:8px}
  .lang-pick{padding:8px 9px;font-size:12.5px}
  .btn-login{padding:9px 12px;font-size:13.5px}
}
@media (max-width:400px){
  h1{font-size:30px}
}

/* ============ 动效偏好 ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.pending{transition:none;opacity:1;transform:none}
  *{transition:none !important}
}