/* ==========================================================================
   VPN31 · base.css
   设计令牌 / reset / 排版 / 版心 / 按钮 / 头部 / 页脚 / 首屏装置 / reveal
   基底层为 porcelain-light:纯中性近白瓷底 + 紫粉天空雾氛围 + 白面板三级海拔
   ========================================================================== */

:root{
  /* —— 表面层 —— */
  --bg:#FCFCFE;
  --panel:#FFFFFF;
  --panel-2:#F3F1FC;
  --border:#E8E4F4;

  /* —— 文字 —— */
  --text:#17141F;
  --muted:#6B6579;

  /* —— 品牌 —— */
  --accent:#7A2BE8;
  --accent-dark:#5A17B5;
  --on-accent:#FFFFFF;

  /* —— 语义 —— */
  --success:#0E9F6E;
  --warn:#D97706;
  --error:#DC2626;

  /* —— 伴色(渐变伴色,不单独做强调) —— */
  --pink:#FF8FD0;
  --sky:#7FC4FF;
  --mint:#9BE7D6;

  /* —— 浅色面(糖果渐变卡底) —— */
  --tint-pink:#FFEFF8;
  --tint-violet:#F1EAFF;
  --tint-sky:#E8F4FF;

  /* —— 旗帜用色 —— */
  --flag-red:#D8232A;
  --flag-blue:#1F3A8A;
  --flag-gold:#F0C24B;
  --flag-ink:#1B1B1B;

  /* —— 透明度派生 —— */
  --accent-a04:rgba(122,43,232,.04);
  --accent-a08:rgba(122,43,232,.08);
  --accent-a12:rgba(122,43,232,.12);
  --accent-a18:rgba(122,43,232,.18);
  --accent-a24:rgba(122,43,232,.24);
  --accent-a32:rgba(122,43,232,.32);
  --pink-a08:rgba(255,143,208,.08);
  --sky-a08:rgba(127,196,255,.08);
  --mint-a08:rgba(155,231,214,.08);
  --ink-a05:rgba(23,20,31,.05);
  --ink-a08:rgba(23,20,31,.08);
  --ink-a12:rgba(23,20,31,.12);
  --white-a24:rgba(255,255,255,.24);
  --white-a40:rgba(255,255,255,.40);

  /* —— 字体 —— */
  --font-display:"Iowan Old Style", Georgia, "Songti SC", SimSun, "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --font-body:Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* —— 圆角 —— */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:24px;
  --r-pill:999px;

  /* —— 间距(8px 网格) —— */
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-5:48px;
  --sp-6:64px;
  --sp-7:96px;

  /* —— 版心 —— */
  --maxw:1240px;
  --gutter:clamp(16px, 4vw, 32px);
  --nav-h:77px;

  /* —— 海拔 —— */
  --shadow-soft:0 6px 16px -8px var(--accent-a24);
  --shadow-card:0 18px 36px -18px var(--accent-a24), 0 6px 14px -8px var(--accent-a12);
  --shadow-panel:0 34px 68px -26px var(--accent-a24), 0 14px 30px -16px var(--accent-a12);

  /* —— 渐变 —— */
  --grad-title:linear-gradient(96deg, var(--accent) 10%, var(--pink) 90%);
  --grad-bar:linear-gradient(100deg, var(--accent) 0%, var(--pink) 62%, var(--sky) 100%);
  --grad-proto:linear-gradient(138deg, var(--accent) 0%, var(--pink) 100%);
  --grad-candy:linear-gradient(150deg, var(--tint-pink) 0%, var(--tint-violet) 46%, var(--tint-sky) 100%);
}

/* ==========================================================================
   1. reset
   ========================================================================== */

*,
*::before,
*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}

body{
  margin:0;
  background-color:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,
svg,
video{max-width:100%;}

img{height:auto;}

svg{display:block;}

a{color:inherit;text-decoration:none;}

button,
input,
select,
textarea{font:inherit;color:inherit;}

button{cursor:pointer;}

code,
kbd,
samp{
  font-family:var(--font-mono);
  font-size:.92em;
  overflow-wrap:anywhere;
}

pre{
  margin:0;
  font-family:var(--font-mono);
  overflow-x:auto;
  max-width:100%;
}

pre code{overflow-wrap:normal;}

/* 键盘焦点环 —— 全站统一,不许 outline:none 不给替代 */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

::selection{
  background-color:var(--accent-a18);
  color:var(--text);
}

/* ==========================================================================
   2. 排版
   ========================================================================== */

h1,
h2,
h3,
h4{
  margin:0;
  color:var(--text);
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.02em;
  text-wrap:balance;
}

h1{font-size:clamp(2.25rem, 4.7vw, 4.25rem);line-height:1.04;letter-spacing:-.032em;}
h2{font-size:clamp(1.6rem, 2.7vw, 2.4rem);}
h3{
  font-family:var(--font-body);
  font-size:clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight:650;
  line-height:1.36;
  letter-spacing:-.012em;
}
h4{
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:650;
  letter-spacing:-.008em;
}

p{margin:0 0 var(--sp-2);}
p:last-child{margin-bottom:0;}

strong{font-weight:650;}

.lead{
  font-size:17px;
  line-height:1.78;
  color:var(--muted);
  max-width:38em;
}

.muted{color:var(--muted);}
.mono{font-family:var(--font-mono);letter-spacing:-.01em;}
.small{font-size:13px;}
.center{text-align:center;}

.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;
}

/* ==========================================================================
   3. 版心与区块节奏
   ========================================================================== */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* 区块只声明纵向节奏,严禁 padding 简写覆盖版心左右留白 */
.section{
  padding-block:clamp(48px, 7vw, 96px);
}

.section--tight{
  padding-block:clamp(32px, 4vw, 56px);
}

.section-head{
  max-width:46rem;
  margin-bottom:clamp(24px, 3vw, 40px);
}

.section-head h2{margin-bottom:12px;}

.section-head .lead{font-size:16.5px;}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--accent-dark);
}

.kicker::before{
  content:"";
  width:18px;
  height:2px;
  border-radius:2px;
  background-image:var(--grad-bar);
  flex:none;
}

/* 服务端状态网格容器:文档流占位 + 夹住溢出,禁止绝对定位/负 margin */
#server-status{
  display:block;
  position:relative;
  overflow:hidden;
  margin:0 0 var(--sp-3);
  min-height:0;
}

#server-status > *{max-width:100%;}

/* ==========================================================================
   4. 徽标 / 胶囊 / 事实带
   ========================================================================== */

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:30px;
  padding:0 13px 0 10px;
  margin-bottom:22px;
  border-radius:var(--r-pill);
  background-color:var(--panel);
  border:1px solid var(--border);
  box-shadow:0 6px 16px -8px var(--accent-a24);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--muted);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}

.eyebrow svg{
  width:14px;
  height:14px;
  flex:none;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:2px 10px;
  border-radius:var(--r-pill);
  background-color:var(--panel-2);
  border:1px solid var(--border);
  font-size:12px;
  font-weight:500;
  color:var(--accent-dark);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ell;
  flex:none;
}

.chip{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:2px 9px;
  border-radius:var(--r-pill);
  background-color:var(--panel-2);
  border:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--muted);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}

.dot{
  display:inline-block;
  width:7px;
  height:7px;
  flex:none;
  border-radius:50%;
  background-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-a12);
}

.dot--mint{background-color:var(--success);box-shadow:0 0 0 3px rgba(14,159,110,.14);}
.dot--warn{background-color:var(--warn);box-shadow:0 0 0 3px rgba(217,119,6,.14);}

.facts-band{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 22px;
  padding:12px 18px;
  border-radius:var(--r-md);
  background-color:var(--panel-2);
  border:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:-.01em;
  color:var(--muted);
}

.facts-band span{white-space:nowrap;}

/* ==========================================================================
   5. 按钮
   ========================================================================== */

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:50px;
  padding:0 28px;
  border:0;
  border-radius:var(--r-sm);
  background-color:var(--accent);
  color:var(--on-accent);
  font-size:15.5px;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  box-shadow:0 14px 28px -14px var(--accent-a32);
  transition:transform .22s ease, background-color .2s ease;
}

.btn-primary:hover{transform:translateY(-2px);}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:50px;
  padding:0 24px;
  border-radius:var(--r-sm);
  background-color:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  font-size:15.5px;
  font-weight:500;
  text-decoration:none;
  transition:transform .22s ease, border-color .2s ease;
}

.btn-ghost:hover{transform:translateY(-2px);border-color:var(--accent-a24);}

/* 通用中性按钮(套餐卡 / 推广块 / 次要操作) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 20px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background-color:var(--panel);
  color:var(--text);
  font-size:14.5px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:transform .22s ease, border-color .2s ease, background-color .2s ease;
}

.btn:hover{transform:translateY(-2px);border-color:var(--accent-a24);}

.btn--accent{
  background-color:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
  box-shadow:0 14px 28px -14px var(--accent-a32);
}

.btn--quiet{
  background-color:var(--panel-2);
  color:var(--accent-dark);
}

.btn--sm{
  min-height:36px;
  padding:0 14px;
  font-size:13px;
}

.btn--block{
  width:100%;
}

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  font-size:14px;
  font-weight:600;
  color:var(--accent-dark);
}

.link-arrow svg{
  width:14px;
  height:14px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ==========================================================================
   6. 头部导航(header.js 运行时注入,DOM 结构见 design-summary)
   ========================================================================== */

.site-header{
  position:relative;
  z-index:30;
  background-color:var(--bg);
  border-bottom:1px solid var(--border);
}

.header-inner{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  height:76px;
  display:flex;
  align-items:center;
  gap:30px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:none;
  text-decoration:none;
  color:var(--text);
  font-weight:650;
  font-size:17px;
  letter-spacing:-.015em;
}

.brand-mark{
  width:30px;
  height:30px;
  flex:none;
  display:block;
  border-radius:10px;
}

.brand-name{white-space:nowrap;}

.brand-zh{
  font-weight:500;
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
}

.primary-nav{min-width:0;}

.nav-list{
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
  margin:0;
  padding:0;
}

.nav-item{position:relative;}

.nav-link,
.more-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:36px;
  padding:8px 12px;
  border:0;
  border-radius:var(--r-sm);
  background-color:transparent;
  font-family:inherit;
  font-size:14.5px;
  font-weight:500;
  line-height:1.2;
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:color .18s ease, background-color .18s ease;
}

.nav-link:hover,
.more-btn:hover,
.nav-more:focus-within .more-btn,
.nav-more.is-open .more-btn{
  color:var(--text);
  background-color:var(--panel-2);
}

.nav-link[aria-current="page"]{
  color:var(--accent-dark);
  background-color:var(--panel-2);
}

.chev{
  width:10px;
  height:10px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-more{position:relative;}

.nav-more-panel{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:;
  z-index:40;
  min-width:176px;
  padding:7px;
  display:grid;
  gap:2px;
  background-color:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:0 18px 40px -18px var(--accent-a24), 0 6px 14px -8px var(--accent-a12);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}

.nav-more:hover .nav-more-panel,
.nav-more:focus-within .nav-more-panel,
.nav-more.is-open .nav-more-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.nav-more-panel a{
  display:flex;
  align-items:center;
  min-height:36px;
  padding:8px 10px;
  border-radius:var(--r-xs);
  font-size:14px;
  color:var(--muted);
}

.nav-more-panel a:hover{
  color:var(--text);
  background-color:var(--panel-2);
}

.header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}

.lang-switch{position:relative;}

.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:7px 9px;
  border:0;
  border-radius:var(--r-xs);
  background-color:transparent;
  font-family:inherit;
  font-size:13.5px;
  color:var(--muted);
  cursor:pointer;
}

.lang-btn:hover{color:var(--text);}

.lang-btn .globe{
  width:14px;
  height:14px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.lang-btn .lang-label{white-space:nowrap;}

.lang-panel{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:40;
  min-width:160px;
  padding:7px;
  display:grid;
  gap:2px;
  background-color:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:0 18px 40px -18px var(--accent-a24), 0 6px 14px -8px var(--accent-a12);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}

.lang-switch.is-open .lang-panel,
.lang-switch:focus-within .lang-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.lang-panel a{
  display:flex;
  align-items:center;
  min-height:36px;
  padding:8px 10px;
  border-radius:var(--r-xs);
  font-size:14px;
  color:var(--muted);
  white-space:nowrap;
}

.lang-panel a:hover{color:var(--text);background-color:var(--panel-2);}

.lang-panel a[aria-current="true"]{
  color:var(--accent-dark);
  background-color:var(--panel-2);
  font-weight:600;
}

.btn-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 18px;
  border-radius:var(--r-sm);
  background-color:var(--panel-2);
  border:1px solid var(--border);
  color:var(--accent-dark);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .22s ease, border-color .2s ease;
}

.btn-login:hover{transform:translateY(-1px);border-color:var(--accent-a24);}

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background-color:var(--panel);
  color:var(--text);
}

.nav-toggle-bars{
  display:grid;
  gap:4px;
  width:18px;
}

.nav-toggle-bars i{
  display:block;
  height:2px;
  border-radius:2px;
  background-color:currentColor;
  transition:transform .2s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* 移动抽屉:实色底、整行可点、独立滚动 */
.mobile-drawer{display:none;}

.drawer-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}

.drawer-list a{
  display:flex;
  align-items:center;
  width:100%;
  min-height:46px;
  padding:10px 12px;
  border-radius:var(--r-sm);
  font-size:15px;
  font-weight:500;
  color:var(--text);
}

.drawer-list a:hover,
.drawer-list a:focus-visible{background-color:var(--panel-2);}

.drawer-list a[aria-current="page"]{
  color:var(--accent-dark);
  background-color:var(--panel-2);
}

.drawer-lang{
  display:grid;
  gap:2px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
}

.drawer-lang a{
  display:flex;
  align-items:center;
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:var(--r-sm);
  font-size:14px;
  color:var(--muted);
}

.drawer-lang a:hover{background-color:var(--panel-2);color:var(--text);}

html.nav-open{overflow:hidden;}

/* ==========================================================================
   7. 页脚
   ========================================================================== */

.site-footer{
  margin-top:clamp(48px, 7vw, 96px);
  background-color:var(--panel);
  border-top:1px solid var(--border);
}

.footer-inner{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-block:clamp(40px, 5vw, 64px) 22px;
}

.footer-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap:32px 28px;
}

.footer-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:650;
  font-size:16px;
  letter-spacing:-.012em;
}

.footer-brand .brand-mark{width:28px;height:28px;border-radius:9px;}

.f .footer-desc{
  margin:12px 0 0;
  max-width:34ch;
  font-size:13.5px;
  line-height:1.72;
  color:var(--muted);
}

.footer-title{
  margin:0 0 12px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--muted);
}

.footer-links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}

.footer-links a{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  font-size:13.5px;
  color:var(--text);
  transition:color .18s ease;
}

.footer-links a:hover{color:var(--accent-dark);}

.hot-words{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.hot-word{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:3px 10px;
  border-radius:var(--r-pill);
  background-color:var(--panel-2);
  border:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hot-word:hover{color:var(--accent-dark);border-color:var(--accent-a24);}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  margin-top:32px;
  padding-top:18px;
  border-top:1px solid var(--border);
  font-size:12.5px;
  color:var(--muted);
}

.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 18px;
}

.footer-legal a{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  color:var(--muted);
}

.footer-legal a:hover{color:var(--accent-dark);}

/* ==========================================================================
   8. 通用面板 / 卡片
   ========================================================================== */

.card{
  background-color:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:clamp(20px, 2.4vw, 28px);
  min-width:0;
}

.card-title{
  margin-bottom:10px;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:650;
  letter-spacing:-.01em;
}

.card-text{
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
}

/* ==========================================================================
   9. 首屏 Hero 与装置(已拍板首屏稿的工程化落地,视觉逐字保留)
   ========================================================================== */

.hero{
  position:relative;
  isolation:isolate;
  overflow-x:clip;
  max-width:100%;
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
  display:flex;
  align-items:center;
  padding-block:40px 48px;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    radial-gradient(58% 54% at 14% 6%, var(--accent-a08), transparent 68%),
    radial-gradient(50% 46% at 90% 20%, var(--pink-a08), transparent 70%),
    radial-gradient(66% 58% at 64% 106%, var(--sky-a08), transparent 68%);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(var(--ink-a05) .5px, transparent .5px);
  background-size:3px 3px;
  opacity:.45;
}

.hero-inner{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0, 1fr) 600px;
  gap:48px;
  align-items:center;
}

.hero-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}

.hero-title{
  margin:0 0 26px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.25rem, 4.7vw, 4.25rem);
  line-height:1.04;
  letter-spacing:-.032em;
  color:var(--text);
}

.hero-title .t-brand,
.hero-title .t-value{display:block;}

.hero-title .t-value{
  background-image:var(--grad-title);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

.hero-sub{
  margin:0 0 26px;
  max-width:31em;
  font-size:16.5px;
  line-height:1.75;
  color:var(--muted);
}

.hero-sub strong{
  color:var(--text);
  font-weight:600;
}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
}

.trust-row{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
}

.trust-row li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  line-height:1.4;
  color:var(--muted);
  white-space:nowrap;
}

.trust-row svg{
  width:13px;
  height:13px;
  flex:none;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.meta-strips{
  width:100%;
  border-top:1px solid var(--border);
}

.meta-strip{
  display:flex;
  align-items:center;
  gap:14px;
  padding-block:9px;
}

.meta-strip + .meta-strip{border-top:1px solid var(--border);}

.meta-label{
  flex:none;
  width:52px;
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--muted);
  white-space:nowrap;
}

.meta-items{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  min-width:0;
}

.meta-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  line-height:1.4;
  color:var(--muted);
  white-space:nowrap;
}

.meta-item svg{
  width:15px;
  height:15px;
  flex:none;
  color:var(--muted);
  fill:currentColor;
}

/* 简化小旗容器:图形一律裁进圆角盒 */
.flag{
  display:inline-flex;
  flex:none;
  width:22px;
  height:15px;
  border-radius:3px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--ink-a08);
}

.flag svg{width:100%;height:100%;display:block;}

.flag .c-red{fill:var(--flag-red);}
.flag .c-white{fill:var(--panel);}
.flag .c-blue{fill:var(--flag-blue);}
.flag .c-gold{fill:var(--flag-gold);}
.flag .c-ink{fill:var(--flag-ink);}

/* ---------- 装置 ---------- */

.hero-visual{
  position:relative;
  z-index:1;
  min-width:0;
}

.stage-wrap{
  position:relative;
  width:100%;
  max-width:600px;
  height:540px;
  margin-inline:auto;
}

.stage{
  position:absolute;
  top:0;
  left:0;
  width:600px;
  height:540px;
}

.ribbons{
  position:absolute;
  inset:0;
  z-index:1;
  width:600px;
  height:540px;
  pointer-events:none;
}

.ribbons path{
  fill:none;
  stroke-linecap:round;
}

.ribbon-pink{stroke:var(--pink);stroke-width:6;}
.ribbon-sky{stroke:var(--sky);stroke-width:5.5;}
.ribbon-mint{stroke:var(--mint);stroke-width:6.5;}

.panel{
  position:absolute;
  left:56px;
  top:54px;
  z-index:3;
  width:490px;
  height:380px;
  display:flex;
  flex-direction:column;
  border-radius:var(--r-xl);
  background-color:var(--panel);
  box-shadow:
    0 0 0 1px var(--border),
    0 34px 68px -26px var(--accent-a24),
    0 14px 30px -16px var(--accent-a12);
  overflow:hidden;
  transform:rotate(-4deg);
  animation:panelFloat 6s ease-in-out infinite;
  will-change:transform;
}

@keyframes panelFloat{
  0%,100%{transform:rotate(-4deg) translateY(0);}
  50%{transform:rotate(-4deg) translateY(-10px);}
}

.panel-top{
  position:relative;
  flex:none;
  height:62px;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:10px;
  background-image:var(--grad-bar);
  color:var(--on-accent);
}

.panel-top::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(var(--white-a24) .6px, transparent .6px);
  background-size:4px 4px;
  opacity:.6;
}

.win-dots{
  position:relative;
  z-index:1;
  display:inline-flex;
  gap:6px;
  margin-right:2px;
}

.win-dots i{
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  box-shadow:0 0 0 1.5px var(--white-a24);
}

.win-dots i:nth-child(1){background-color:var(--pink);}
.win-dots i:nth-child(2){background-color:var(--mint);}
.win-dots i:nth-child(3){background-color:var(--sky);}

.panel-title{
  position:relative;
  z-index:1;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
}

.panel-tag{
  position:relative;
  z-index:1;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 9px;
  border-radius:var(--r-pill);
  background-color:var(--white-a24);
  font-size:11px;
  font-weight:500;
  color:var(--on-accent);
  white-space:nowrap;
}

.route-list{
  flex:1;
  list-style:none;
  margin:0;
  padding:5px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.route-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  height:44px;
  padding:0 20px;
}

.route-row + .route-row::before{
  content:"";
  position:absolute;
  top:0;
  left:20px;
  right:20px;
  height:1px;
  background-color:var(--border);
}

.route-city{
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  letter-spacing:-.01em;
  white-space:nowrap;
}

.route-en{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--muted);
  letter-spacing:-.02em;
  white-space:nowrap;
}

.route-type{
  margin-left:auto;
  flex:none;
  padding:2px 8px;
  border-radius:var(--r-pill);
  background-color:var(--panel-2);
  border:1px solid var(--border);
  font-size:10.5px;
  font-weight:500;
  color:var(--accent-dark);
  white-space:nowrap;
}

.route-dot{
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-a12);
}

.panel-facts{
  flex:none;
  height:44px;
  display:flex;
  align-items:center;
  padding:0 20px;
  background-color:var(--panel-2);
  border-top:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:-.02em;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
}

.proto-card{
  position:absolute;
  left:0;
  top:0;
  z-index:6;
  padding:10px 12px;
  border-radius:var(--r-md);
  background-image:var(--grad-proto);
  box-shadow:0 18px 36px -16px var(--accent-a32), 0 6px 14px -8px var(--accent-a18);
  color:var(--on-accent);
  transform:rotate(-2deg);
  transition:transform .25s ease;
}

.proto-card:hover{transform:rotate(-2deg) translateY(-4px);}

.proto-title{
  display:block;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.08em;
  opacity:.82;
  margin-bottom:7px;
}

.proto-chips{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  max-width:136px;
}

.proto-chips span{
  padding:3px 7px;
  border-radius:var(--r-pill);
  background-color:var(--white-a24);
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:-.01em;
  white-space:nowrap;
}

.client-card{
  position:absolute;
  right:6px;
  bottom:0;
  z-index:6;
  padding:10px 12px;
  border-radius:var(--r-md);
  background-color:var(--panel);
  border:1px solid var(--border);
  box-shadow:0 18px 36px -18px var(--accent-a24), 0 6px 14px -8px var(--accent-a12);
  transform:rotate(2deg);
  transition:transform .25s ease;
}

.client-card:hover{transform:rotate() translateY(-4px);transform:rotate(2deg) translateY(-4px);}

.client-title{
  display:block;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:6px;
}

.client-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:5px;
}

.client-list li{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10.5px;
  color:var(--text);
  white-space:nowrap;
}

.client-list svg{
  width:12px;
  height:12px;
  flex:none;
  color:var(--muted);
  fill:currentColor;
}

.bird{
  position:absolute;
  right:22px;
  top:0;
  z-index:7;
  width:60px;
  height:50px;
  color:var(--text);
}

.bird .b-body{fill:var(--panel);stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;}
.bird .b-line{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.bird .b-eye{fill:currentColor;}

/* ==========================================================================
   10. 滚动淡入(可见性默认可见,隐藏态只由 .pending 承担)
   ========================================================================== */

.reveal{
  transition:opacity .55s ease, transform .55s ease;
}

.reveal.pending{
  opacity:0;
  transform:translateY(16px);
}

.reveal.shown{
  opacity:1;
  transform:none;
}

/* ==========================================================================
   11. 响应式
   ========================================================================== */

@media (max-width:1120px){
  .hero{min-height:0;padding-block:52px 64px;}
  .hero-inner{grid-template-columns:minmax(0, 1fr);gap:56px;}
  .hero-copy{max-width:640px;}
}

@media (max-width:900px){
  :root{--nav-h:67px;}
  .primary-nav{display:none;}
  .header-inner{height:66px;gap:16px;}
  .header-actions{margin-left:auto;}
  .nav-toggle{display:inline-flex;}
  .mobile-drawer{
    position:fixed;
    left:0;
    right:0;
    top:var(--nav-h);
    z-index:40;
    display:none;
    background-color:var(--panel);
    border-top:1px solid var(--border);
    box-shadow:0 24px 44px -26px var(--accent-a24);
    max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:10px var(--gutter) 22px;
  }
  .mobile-drawer.is-open{display:block;}
  .footer-grid{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);}
}

@media (max-width:680px){
  :root{--nav-h:63px;}
  .header-inner{height:62px;padding-inline:var(--gutter);}
  .hero-inner{gap:44px;}
  .hero{padding-block:36px 52px;}
  .hero-sub{font-size:15px;}
  .btn-primary,
  .btn-ghost{height:46px;padding:0 20px;font-size:14.5px;}
  .meta-label{width:44px;}
  .trust-row{gap:8px 14px;}
  .stage-wrap{height:440px;}
  .stage{left:50%;margin-left:-300px;transform:scale(.78);transform-origin:top center;}
  .footer-grid{grid-template-columns:minmax(0, 1fr);}
}

@media (max-width:520px){
  .stage-wrap{height:372px;}
  .stage{transform:scale(.66);}
  .eyebrow{font-size:11.5px;}
}

@media (max-width:420px){
  .stage-wrap{height:322px;}
  .stage{transform:scale(.56);}
}

/* 窄屏允许关键词折行,桌面仍防断词 */
@media (max-width:640px){
  .no-break{white-space:normal;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .panel{animation:none;transform:rotate(-4deg);}
  .proto-card:hover,
  .client-card:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .btn:hover,
  .btn-login:hover{transform:none;}
  .nav-more-panel,
  .lang-panel{transition:none;}
  .reveal,
  .reveal.pending{opacity:1;transform:none;transition:none;}
}

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