/* ================= 1. RESET ================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
:where(h1,h2,h3,h4){font-weight:800;line-height:1.12;letter-spacing:-.01em}

/* ================= 2. TOKENS ================= */
:root{
  --ink:#07120E;
  --pitch:#0C2018;
  --card:#123A2B;
  --card-hi:#14452F;
  --line:#1E5540;
  --volt:#C8FF3D;
  --glow:#E9FFB0;
  --warn:#FF7A1A;
  --paper:#F7F8F4;
  --mute:#8AA396;
  --cream:#F1ECDD;
  --sans:system-ui,-apple-system,"PingFang SC","Noto Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --wrap:1320px;
  --gut:24px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --cut:18px;
  --fs-h1:clamp(2.6rem,7vw,4.5rem);
  --fs-h2:clamp(1.6rem,3.2vw,2rem);
  --fs-h3:1.5rem;
  --fs-body:17px;
}
@media (max-width:640px){:root{--gut:18px;--fs-body:16px}}

/* ================= 3. 中文排版与页面底色 ================= */
body{
  min-height:100vh;
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--paper);
  background-color:var(--ink);
  background-image:
    linear-gradient(rgba(30,85,64,.20) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,85,64,.20) 1px,transparent 1px);
  background-size:120px 120px;
  background-position:-1px -1px;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--volt);color:var(--ink)}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.num{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.skip-link{
  position:absolute;left:16px;top:-120px;z-index:200;
  padding:10px 16px;background:var(--volt);color:var(--ink);
  font:700 14px/1 var(--sans);letter-spacing:.04em;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:12px}

/* ================= 4. HEADER ================= */
.site-head{
  position:sticky;top:0;z-index:80;
  background:transparent;
  transition:background-color .18s var(--ease),box-shadow .18s var(--ease);
}
.site-head[data-stuck]{background:var(--pitch);box-shadow:0 1px 0 var(--line)}
.head__bar{
  display:flex;align-items:center;gap:20px;
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:16px var(--gut) 10px;
}
.brand{display:inline-flex;align-items:center;gap:12px;min-width:0}
.brand__mark{
  flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;
  background:var(--volt);color:var(--ink);
  font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.02em;
  clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%);
}
.brand__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand__name{font-size:17px;font-weight:800;letter-spacing:.02em;line-height:1.2;color:var(--paper);transition:color .16s var(--ease)}
.brand__sub{font-family:var(--mono);font-size:10.5px;line-height:1.4;letter-spacing:.16em;color:var(--mute);text-transform:uppercase}
.brand:hover .brand__name{color:var(--glow)}
.head__status{
  display:flex;align-items:center;gap:16px;margin-left:auto;
  font-family:var(--mono);font-size:11.5px;line-height:1.4;letter-spacing:.06em;color:var(--mute);
}
.status__item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.status__item b{color:var(--glow);font-weight:600}
.status__item--quiet{opacity:.62}
.status__dot{
  width:7px;height:7px;background:var(--volt);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  animation:breathe 2.4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.26}}
.site-head[data-stuck] .status__item--quiet{display:none}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;
  font-family:var(--sans);font-size:14px;font-weight:700;line-height:1;letter-spacing:.04em;
  color:var(--paper);background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  transition:background-color .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease);
}
.btn:hover{background:var(--line);color:var(--glow);box-shadow:inset 0 0 0 1px var(--volt)}
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--volt),inset 0 0 0 4px var(--ink)}
.btn--volt{background:var(--volt);color:var(--ink);box-shadow:inset 0 0 0 1px var(--volt)}
.btn--volt:hover{background:var(--glow);color:var(--ink);box-shadow:inset 0 0 0 1px var(--glow)}
.btn--volt:focus-visible{box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px var(--volt)}
.head__cta{flex:0 0 auto}

/* 移动导航按钮 */
.nav-toggle{
  display:none;align-items:center;gap:8px;
  padding:9px 12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
  transition:color .16s var(--ease),background-color .16s var(--ease),box-shadow .16s var(--ease);
}
.nav-toggle:hover{color:var(--volt);box-shadow:inset 0 0 0 1px var(--volt)}
.nav-toggle:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--volt),inset 0 0 0 4px var(--ink)}
.nav-toggle__bars{display:block;width:18px}
.nav-toggle__bars i{display:block;width:18px;height:2px;background:currentColor;transition:transform .18s var(--ease)}
.nav-toggle__bars i + i{margin-top:5px}
.nav-toggle__label{font-weight:600}
.nav-toggle[aria-expanded="true"]{background:var(--volt);color:var(--ink);box-shadow:inset 0 0 0 1px var(--volt)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* 导航 */
.site-nav{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.site-nav__head{display:none}
.site-nav__list{display:flex;flex-wrap:wrap;align-items:stretch;border-top:1px solid var(--line)}
.site-nav__item{display:flex}
.site-nav__link{
  position:relative;display:inline-flex;align-items:baseline;gap:8px;
  padding:13px 20px;
  font-size:14px;font-weight:700;letter-spacing:.05em;color:var(--paper);
  border-right:1px solid var(--line);
  transition:color .16s var(--ease),background-color .16s var(--ease);
}
.site-nav__item:first-child .site-nav__link{border-left:1px solid var(--line)}
.site-nav__num{font-size:11px;letter-spacing:.06em;color:var(--mute);transition:color .16s var(--ease)}
.site-nav__link:hover{color:var(--glow);background:rgba(30,85,64,.42)}
.site-nav__link:hover .site-nav__num{color:var(--volt)}
.site-nav__link[aria-current="page"]{color:var(--volt);background:rgba(200,255,61,.07)}
.site-nav__link[aria-current="page"] .site-nav__num{color:var(--volt)}
.site-nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--volt);
}
.scroll-rail{width:100%;height:2px;background:transparent}
.scroll-rail__fill{display:block;height:100%;width:0;background:var(--volt);transition:width .12s linear}

/* 头部与导航：移动 / 平板 */
@media (max-width:900px){
  .head__bar{flex-wrap:wrap;row-gap:10px;padding:12px var(--gut) 8px}
  .brand__mark{width:34px;height:34px;font-size:12px}
  .brand__name{font-size:15px}
  .brand__sub{display:none}
  .head__cta{order:2;margin-left:auto;padding:9px 12px;font-size:12px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
  .nav-toggle{display:inline-flex;order:3}
  .head__status{
    order:4;width:100%;margin-left:0;gap:14px;font-size:11px;
    padding-top:9px;box-shadow:inset 0 1px 0 var(--line);
  }
  .site-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    max-width:100%;max-height:78vh;overflow-y:auto;
    padding:0 var(--gut) calc(20px + env(safe-area-inset-bottom));
    background:var(--pitch);
    box-shadow:inset 0 1px 0 var(--line),0 -18px 40px rgba(7,18,14,.55);
    transform:translateY(101%);
    transition:transform .26s var(--ease);
  }
  .site-nav[data-open]{transform:translateY(0)}
  .site-nav__head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 0;position:sticky;top:0;background:var(--pitch);
    box-shadow:inset 0 -1px 0 var(--line);
  }
  .site-nav__label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--volt)}
  .site-nav__close{
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mute);
    padding:7px 12px;box-shadow:inset 0 0 0 1px var(--line);
  }
  .site-nav__close:hover{color:var(--volt);box-shadow:inset 0 0 0 1px var(--volt)}
  .site-nav__list{flex-direction:column;border-top:0}
  .site-nav__item{width:100%}
  .site-nav__link{width:100%;padding:15px 4px;font-size:15px;border-right:0;box-shadow:inset 0 -1px 0 var(--line)}
  .site-nav__item:first-child .site-nav__link{border-left:0}
  .site-nav__link[aria-current="page"]::after{display:none}
}
body.nav-open{overflow:hidden}

/* ================= 5. FOOTER ================= */
.site-foot{
  position:relative;margin-top:96px;
  padding:56px 0 24px;
  background:var(--pitch);color:var(--paper);
  box-shadow:inset 0 1px 0 var(--line);
}
.site-foot::before{
  content:"";position:absolute;top:0;left:0;
  width:min(320px,42%);height:3px;background:var(--volt);
}
.foot__grid{
  display:grid;grid-template-columns:1.05fr 1fr 1.35fr 1.2fr;gap:40px 32px;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
}
.foot__col{min-width:0}
.foot__kicker{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--volt);
}
.foot__kicker::before{content:"";width:14px;height:2px;background:var(--volt)}
.foot__title{font-size:15px;font-weight:800;letter-spacing:.06em;margin-bottom:14px;color:var(--paper)}
.foot__list{display:grid;gap:9px}
.foot__link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;line-height:1.6;color:var(--mute);
  transition:color .16s var(--ease);
}
.foot__link::before{content:"";width:5px;height:5px;flex:0 0 auto;background:var(--line);transition:background-color .16s var(--ease)}
.foot__link:hover{color:var(--glow)}
.foot__link:hover::before{background:var(--volt)}
.foot__meta{display:grid;gap:9px;font-size:14px;line-height:1.7;color:var(--mute)}
.foot__meta b{font-family:var(--mono);font-weight:600;color:var(--paper)}
.foot__col--brand p{max-width:34ch;font-size:14px;line-height:1.75;color:var(--mute)}
.foot__swatches{display:flex;gap:6px;margin-top:16px}
.foot__swatch{width:22px;height:6px}
.foot__swatch:nth-child(1){background:var(--volt)}
.foot__swatch:nth-child(2){background:var(--card)}
.foot__swatch:nth-child(3){background:var(--line)}
.foot__swatch:nth-child(4){background:var(--warn)}
.foot__swatch:nth-child(5){background:var(--cream)}
.foot__base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;
  width:100%;max-width:var(--wrap);margin:40px auto 0;padding:18px var(--gut) 0;
  box-shadow:inset 0 1px 0 var(--line);
  font-family:var(--mono);font-size:11.5px;line-height:1.6;letter-spacing:.04em;color:var(--mute);
}
.foot__legal{color:var(--mute)}
.foot__copy{color:var(--mute)}
.foot__note{
  width:100%;margin-top:2px;
  font-family:var(--sans);font-size:12.5px;line-height:1.7;letter-spacing:0;color:#6f8a7c;
}
@media (max-width:1000px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .site-foot{margin-top:64px;padding-top:44px}
  .foot__grid{grid-template-columns:1fr;gap:32px}
  .foot__base{flex-direction:column;align-items:flex-start}
}

/* ================= 6. 通用版式 ================= */
.section{padding:72px 0}
@media (max-width:640px){.section{padding:48px 0}}
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@media (max-width:900px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid--2,.grid--3{grid-template-columns:1fr}}
.prose{max-width:38em;line-height:1.8;color:var(--paper)}
.prose p + p{margin-top:1em}
.prose h2{font-size:var(--fs-h2);margin:2em 0 .6em}
.prose h3{font-size:var(--fs-h3);margin:1.6em 0 .5em}
.prose ul{display:grid;gap:.5em;margin:1em 0;padding-left:1.2em}
.prose li{position:relative}
.prose li::before{content:"";position:absolute;left:-1.1em;top:.72em;width:6px;height:6px;background:var(--volt)}

/* ================= 7. 面包屑 ================= */
.breadcrumb{width:100%;max-width:var(--wrap);margin-inline:auto;padding:20px var(--gut) 0}
.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--mute)}
.breadcrumb__item{display:inline-flex;align-items:center;gap:8px}
.breadcrumb__item + .breadcrumb__item::before{content:"/";color:var(--line)}
.breadcrumb__link{color:var(--mute);transition:color .16s var(--ease)}
.breadcrumb__link:hover{color:var(--volt)}
.breadcrumb__item[aria-current="page"]{color:var(--paper)}

/* ================= 8. 组件 ================= */
.card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:20px;
  background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  transition:background-color .18s var(--ease),box-shadow .18s var(--ease);
}
.card:hover{background:var(--card-hi);box-shadow:inset 0 0 0 1px var(--volt)}
.card__title{font-size:19px;font-weight:800;line-height:1.35;letter-spacing:-.01em}
.card__text{font-size:15px;line-height:1.7;color:rgba(247,248,244,.74)}
.card__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--mute)}
.card__foot{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;gap:8px;box-shadow:inset 0 1px 0 var(--line)}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;
  font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.06em;
  color:var(--glow);background:rgba(200,255,61,.10);
  box-shadow:inset 0 0 0 1px rgba(200,255,61,.32);
}
.tag--warn{color:var(--warn);background:rgba(255,122,26,.10);box-shadow:inset 0 0 0 1px rgba(255,122,26,.36)}
.tag--mute{color:var(--mute);background:transparent;box-shadow:inset 0 0 0 1px var(--line)}

.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--mute);
  background:transparent;box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
  transition:color .16s var(--ease),background-color .16s var(--ease),box-shadow .16s var(--ease);
}
.chip:hover{color:var(--glow);box-shadow:inset 0 0 0 1px var(--volt)}
.chip[aria-pressed="true"]{background:var(--volt);color:var(--ink);box-shadow:inset 0 0 0 1px var(--volt)}
.chip:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--volt),inset 0 0 0 4px var(--ink)}
.chip[aria-pressed="true"]:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}

.note{
  position:relative;padding:14px 18px 14px 22px;
  font-size:15px;line-height:1.75;color:rgba(247,248,244,.84);
  background:rgba(30,85,64,.30);
  box-shadow:inset 0 0 0 1px var(--line);
}
.note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--volt)}
.note--warn::before{background:var(--warn)}

.block-num{display:flex;align-items:flex-start;gap:14px}
.block-num__digit{font-family:var(--mono);font-weight:600;font-size:28px;line-height:1;letter-spacing:-.02em;color:var(--volt)}
.block-num__label{padding-top:5px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}

.split{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line);
}
.split__col{padding:24px;min-width:0}
.split__col + .split__col{box-shadow:inset 1px 0 0 var(--line)}
@media (max-width:640px){
  .split{grid-template-columns:1fr}
  .split__col + .split__col{box-shadow:inset 0 1px 0 var(--line)}
}

.media{
  position:relative;overflow:hidden;
  aspect-ratio:16/9;
  background:var(--pitch);
  box-shadow:inset 0 0 0 1px var(--line);
}
.media img,.media picture img{width:100%;height:100%;object-fit:cover;opacity:.74;filter:saturate(.85)}
.media--wide{aspect-ratio:21/9}
.media--square{aspect-ratio:1/1}
.media--thumb{aspect-ratio:4/3}
.media__caption{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--mute)}

.stat{display:grid;gap:5px}
.stat__value{font-family:var(--mono);font-weight:600;font-size:32px;line-height:1;letter-spacing:-.02em;color:var(--volt)}
.stat__label{font-size:12px;letter-spacing:.08em;color:var(--mute)}

.inverse{background:var(--cream);color:var(--ink);padding:56px 0}
.inverse :where(h1,h2,h3,h4){color:var(--ink)}
.inverse .note{background:rgba(7,18,14,.05);color:#25352c;box-shadow:inset 0 0 0 1px rgba(7,18,14,.14)}
.inverse a:hover{color:var(--card)}
.inverse :focus-visible{outline-color:var(--ink)}

/* ================= 9. 动效 ================= */
[data-reveal]{
  opacity:0;
  transform:translate3d(12px,12px,0);
  transition:opacity .26s var(--ease),transform .26s var(--ease);
}
[data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
}