/* ============================================================
   VPNTea · base.css
   「一泡即通」:纯白零染色纸面 · 近黑极粗 display 标题
   全站唯一强调色 = 茶青绿,只落在水流/涟漪/主按钮/徽章描边
   小圆角 · 1px 细描边 · 无重投影 · 协议名/地区码走等宽字体
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  /* 色彩 */
  --bg:#FFFFFF;
  --bg-panel:#F7F9F6;
  --bg-panel-2:#EFF3EC;
  --border:#E2E7DF;
  --accent:#4F9D2F;
  --accent-dark:#3B7B22;
  --ink:#171B17;
  --muted:#5C645C;
  --success:#2F9E62;
  --warn:#C7862B;
  --error:#C94F3D;
  /* 旗徽专用(仅首屏装置小旗) */
  --flag-red:#C94F3D;
  --flag-blue:#33549C;
  --flag-white:#FFFFFF;
  /* 字体 */
  --font-display:'Inter','Noto Sans SC',-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-body:'Inter','Noto Sans SC',-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular','Menlo','Consolas','Courier New',monospace;
  /* 形状与节奏 */
  --r:8px;
  --r-s:6px;
  --gutter:clamp(16px,4vw,32px);
  --header-h:68px;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
img,svg{max-width:100%}
img{height:auto}
table{border-collapse:collapse}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 行内长串(订阅 URL/文件名)必须可断行 —— 窄屏溢出惯犯 */
code{
  font-family:var(--font-mono);
  font-size:.9em;
  overflow-wrap:anywhere;
  word-break:break-word;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-s);
  padding:1px 6px;
}
pre{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:16px 18px;
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.7;
  max-width:100%;
}
pre code{background:none;border:0;padding:0;overflow-wrap:normal;word-break:normal;white-space:pre}

/* ---------- 排版 ---------- */
h1,h2,h3{text-wrap:balance;line-height:1.15;letter-spacing:-.015em;font-family:var(--font-display)}
h1{font-weight:900;font-size:clamp(34px,4.2vw,56px)}
h2{font-weight:800;font-size:clamp(24px,2.8vw,38px)}
h3{font-weight:700;font-size:19px;letter-spacing:-.01em}
h4{font-weight:700;font-size:16px}
.mono{font-family:var(--font-mono)}
.nowrap{white-space:nowrap}
.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* 装饰性微倾斜:只许用在小装饰元素,窄屏一律回正 */
.tilt{transform:rotate(-.5deg)}
@media (max-width:640px){.tilt{transform:none}}

/* ---------- 版心与区块节奏 ---------- */
.wrap{
  max-width:1400px;
  margin-inline:auto;
  padding-inline:var(--gutter); /* 任何断点都不许清零 */
}
.wrap-md{max-width:1160px}
.wrap-sm{max-width:880px}
/* 区块间距只声明纵向,严禁 padding:Y 0 简写覆盖版心留白 */
.sec{
  padding-top:clamp(56px,8vw,96px);
  padding-bottom:clamp(56px,8vw,96px);
  position:relative;
  overflow-x:clip; /* 绝对定位装饰不许伸出视口 */
}
.sec-tint{background:var(--bg-panel)}
.sec-head{margin-bottom:40px;max-width:760px}
.sec-head>*{min-width:0}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-dark);
  margin-bottom:14px;
}
.kicker::before{
  content:"";width:18px;height:1px;background:var(--accent);flex-shrink:0;
}
.sec-title{font-size:clamp(26px,3vw,40px);font-weight:900}
.sec-title em{font-style:normal;color:var(--accent)}
.sec-desc{margin-top:14px;color:var(--muted);font-size:15.5px;line-height:1.8}

/* 通用面板 */
.panel{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:calc(var(--r) + 2px);
}
.panel-2{background:var(--bg-panel-2)}

/* 通用网格防溢出 */
.grid{display:grid;gap:18px}
.grid>*{min-width:0}

/* ---------- 按钮 ---------- */
.btn-main{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--accent);color:var(--bg);
  padding:14px 28px;border-radius:calc(var(--r) + 2px);
  font-size:16px;font-weight:700;
  transition:background .15s;
}
.btn-main:hover{background:var(--accent-dark)}
.btn-main svg{display:block;flex-shrink:0}
.btn-plans{
  display:inline-flex;align-items:center;
  padding:13px 26px;border-radius:calc(var(--r) + 2px);
  border:1px solid var(--border);
  font-size:16px;font-weight:600;color:var(--ink);
  transition:border-color .15s;
}
.btn-plans:hover{border-color:var(--accent)}
.btn-login{
  display:inline-block;padding:8px 18px;
  border:1px solid var(--accent);border-radius:var(--r);
  color:var(--accent-dark);font-size:14px;font-weight:600;
  white-space:nowrap;
  transition:background .15s,color .15s;
}
.btn-login:hover{background:var(--accent);color:var(--bg)}

/* ---------- 顶部导航(pill 高亮形态) ---------- */
.site-top{
  position:sticky;top:0;z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.top-wrap{
  max-width:1400px;margin:0 auto;
  height:var(--header-h);
  padding-inline:var(--gutter);
  display:flex;align-items:center;gap:28px;
}
.brand{display:flex;align-items:center;gap:9px;flex:none;min-width:0}
.brand img{display:block;flex-shrink:0}
.brand-en{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.brand-zh{font-weight:500;font-size:14px;color:var(--muted);white-space:nowrap}
.top-nav{display:flex;align-items:center;gap:2px;margin-left:8px;min-width:0}
.top-nav a{
  padding:8px 13px;border-radius:var(--r);
  font-size:14px;font-weight:500;color:var(--muted);
  transition:color .15s,background .15s;
  white-space:nowrap;
}
.top-nav a:hover{color:var(--ink)}
.top-nav a.is-here{
  background:var(--bg-panel-2);
  color:var(--ink);font-weight:600;
}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}

/* 语言切换下拉 */
.lang-box{position:relative}
.lang-pick{font-size:13px;color:var(--muted);padding:6px 4px;white-space:nowrap}
.lang-pick:hover{color:var(--ink)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 10px);
  min-width:152px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:6px;
  z-index:60;
}
.lang-menu[hidden]{display:none}
.lang-menu a{
  display:block;padding:9px 12px;border-radius:var(--r-s);
  font-size:13.5px;color:var(--muted);
  transition:background .15s,color .15s;
}
.lang-menu a:hover{background:var(--bg-panel);color:var(--ink)}
.lang-menu a.lang-now{background:var(--bg-panel-2);color:var(--ink);font-weight:600}

/* 汉堡按钮:桌面隐藏,触达面积 ≥44px */
.nav-burger{
  display:none;
  min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--bg);color:var(--ink);
}
.nav-burger svg{display:block}

/* 移动端抽屉:实色背景,整行可点 */
.drawer{display:none}
html.nav-open{overflow:hidden}

/* ---------- Hero 分屏(用户拍板首屏,视觉逐字兑现) ---------- */
.hero{
  display:grid;
  grid-template-columns:53% 47%;
  height:calc(100vh - 69px - 52px);
  min-height:720px;
}
.hero>*{min-width:0}
.hero-copy{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:12px;
  padding-bottom:24px;
  padding-right:56px;
  padding-left:max(var(--gutter),calc((100vw - 1400px)/2 + 32px));
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  align-self:flex-start;
  border:1px solid var(--border);border-radius:999px;
  padding:6px 14px;
  font-size:13px;color:var(--muted);
  max-width:100%;
}
.hero-eyebrow .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex-shrink:0;
}
.hero-eyebrow .mono{font-family:var(--font-mono);font-size:12px;color:var(--ink)}
.hero h1{
  margin:22px 0 18px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(46px,4.6vw,66px);
  line-height:1.06;
  letter-spacing:-.015em;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-sub{
  max-width:520px;
  font-size:16.5px;line-height:1.75;color:var(--muted);
}
.hero-sub strong{color:var(--ink);font-weight:700}
.hero-cta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:28px 0 26px}
.trust-row{
  display:flex;flex-wrap:wrap;gap:10px 22px;
  padding-bottom:24px;margin-bottom:24px;
  border-bottom:1px solid var(--border);
  max-width:560px;
}
.trust-row li{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted)}
.trust-row svg{flex-shrink:0}
.plat-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}
.plat-cap{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;
  padding-right:12px;border-right:1px solid var(--border);
  flex-shrink:0;
}
.plat{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.plat svg{color:var(--muted);display:block;flex-shrink:0}
.plat:hover svg,.plat:hover{color:var(--ink)}

/* ---------- Hero 右侧冲泡装置面板 ---------- */
.hero-stage{
  position:relative;
  border-left:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg-panel) 0%,var(--bg-panel-2) 100%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.stage-stamp{
  position:absolute;top:26px;left:32px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--muted);
}
.stage-stamp b{color:var(--accent-dark);font-weight:600}
.brew-svg{width:min(660px,94%);height:auto;display:block}

/* 装置 SVG 内部样式 */
.etch{
  font-family:var(--font-mono);font-size:9px;font-weight:600;
  letter-spacing:.08em;fill:var(--muted);text-anchor:middle;
}
.flag-name{
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  fill:var(--muted);text-anchor:middle;letter-spacing:.04em;
}
.pot-line{stroke:var(--ink);stroke-width:1.3;fill:none;stroke-linecap:round}
.ripple{
  transform-box:fill-box;transform-origin:center;
  animation:brew-ripple 3.6s ease-out infinite;
}
.ripple.d1{animation-delay:1.2s}
.ripple.d2{animation-delay:2.4s}
@keyframes brew-ripple{
  0%{transform:scale(.4);opacity:.85}
  100%{transform:scale(1.3);opacity:0}
}
.stream{animation:brew-pour .8s linear infinite}
@keyframes brew-pour{
  from{transform:translateY(0)}
  to{transform:translateY(11px)}
}
@media (prefers-reduced-motion:reduce){
  .ripple,.stream{animation:none}
  .ripple{opacity:.5}
}

/* ---------- 首屏下缘露边条 ---------- */
.next-peek{
  border-top:1px solid var(--border);
  min-height:220px;
}
.peek-wrap{
  max-width:1400px;margin:0 auto;
  padding-top:20px;padding-bottom:0;
  padding-inline:var(--gutter);
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
}
.peek-no{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--accent-dark);flex-shrink:0}
.peek-t{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.01em}
.peek-d{font-size:13px;color:var(--muted)}

/* ---------- 页脚 ---------- */
.site-foot{
  border-top:1px solid var(--border);
  background:var(--bg-panel);
  margin-top:64px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.1fr .8fr;
  gap:40px;
  padding-top:56px;padding-bottom:40px;
}
.foot-grid>*{min-width:0}
.foot-brand{display:flex;flex-direction:column;gap:12px}
.foot-brand-line{display:flex;align-items:center;gap:9px}
.foot-brand-line img{flex-shrink:0}
.foot-brand-line b{font-family:var(--font-display);font-weight:800;font-size:17px}
.foot-brand-line span{font-size:13px;color:var(--muted)}
.foot-brand p{font-size:13.5px;line-height:1.8;color:var(--muted);max-width:340px}
.foot-pay{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--muted);
}
.foot-cap{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-dark);
  margin-bottom:14px;
}
.foot-col a{
  display:block;
  padding-top:5px;padding-bottom:5px;
  font-size:13.5px;color:var(--muted);
  transition:color .15s;
}
.foot-col a:hover{color:var(--ink)}
.foot-hot{display:flex;flex-wrap:wrap;gap:8px}
.foot-hot a{
  display:inline-block;
  border:1px solid var(--border);border-radius:999px;
  padding:5px 13px;
  font-size:12.5px;color:var(--muted);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:border-color .15s,color .15s;
}
.foot-hot a:hover{border-color:var(--accent);color:var(--accent-dark)}
.foot-base{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;
  border-top:1px solid var(--border);
  padding-top:18px;padding-bottom:26px;
  font-size:13px;color:var(--muted);
}
.foot-base a{color:var(--muted)}
.foot-base a:hover{color:var(--ink)}
.foot-base .foot-legal{display:flex;gap:18px;flex-wrap:wrap}
.foot-base .foot-copy{margin-left:auto;font-family:var(--font-mono);font-size:12px}

/* ---------- 滚动淡入(可见性反转:默认可见,pending 才隐藏) ---------- */
.reveal{transition:opacity .55s ease,transform .55s ease}
.reveal.pending{opacity:0;transform:translateY(16px)}
.reveal.shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.pending{opacity:1;transform:none;transition:none}
}

/* ---------- 响应式 ---------- */
@media (max-width:1160px){
  .top-nav a{padding:8px 9px;font-size:13px}
  .hero{grid-template-columns:1fr;height:auto}
  .hero-copy{padding-top:56px;padding-bottom:40px;padding-left:var(--gutter);padding-right:var(--gutter)}
  .hero-stage{border-left:0;border-top:1px solid var(--border);min-height:560px}
  .hero h1{font-size:clamp(34px,7vw,40px)}
}

@media (max-width:1020px){
  /* 桌面导航与桌面语言下拉收进抽屉,汉堡出现 */
  .top-nav{display:none}
  .lang-box{display:none}
  .nav-burger{display:inline-flex}
  /* 抽屉收起后 auto 边距失效,工具区自己补 —— 防悬在页中间 */
  .top-actions{margin-left:auto;gap:10px}
  .drawer{
    display:block;
    position:absolute;top:100%;left:0;right:0;
    background:var(--bg); /* 实色,不许半透明 */
    border-bottom:1px solid var(--border);
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:45;
  }
  .drawer[hidden]{display:none}
  .drawer a{
    display:block;width:100%;
    padding:14px var(--gutter);
    font-size:15px;font-weight:600;color:var(--ink);
    border-bottom:1px solid var(--border);
  }
  .drawer a:last-child{border-bottom:0}
  .drawer a.is-here{background:var(--bg-panel-2)}
  .drawer a.lang-now{background:var(--bg-panel);color:var(--accent-dark)}
  .drawer-cap{
    padding:16px var(--gutter) 6px;
    font-family:var(--font-mono);font-size:11px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);
    border-bottom:1px solid var(--border);
  }
}

@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-base .foot-copy{margin-left:0}
}

@media (max-width:768px){
  h1{font-size:clamp(28px,7.5vw,40px)}
  /* 绝对定位装饰字窄屏显式处理,防与正文/徽标相撞 */
  .stage-stamp{position:static;display:block;width:auto;min-width:0;margin-inline:var(--gutter);padding:20px 0 0;align-self:stretch;overflow-wrap:anywhere}
  .hero-stage{flex-direction:column;align-items:stretch;min-width:0}
  .brew-svg{align-self:center;max-width:94%;margin-top:auto;margin-bottom:auto}
}

@media (max-width:640px){
  .brand-zh{display:none}
  .hero-stage{min-height:440px}
  .hero-sub{font-size:15.5px}
  .btn-main,.btn-plans{padding:12px 22px;font-size:15px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .peek-t{font-size:17px}
}