/* ============ 1. 设计令牌 ============ */
:root{
  --soil:#A83A2B;
  --soil-deep:#5E1F18;
  --forest:#1F6B4A;
  --forest-deep:#0E3B2A;
  --flash:#F2E23C;
  --tech:#2D6BE8;
  --mist:#EEF1F3;
  --graphite:#1C2226;
  --line:#C7CFD4;
  --alert:#E06A2A;
  --ink-soft:#4A565D;
  --ink-mute:#5D6A72;

  --shell:1280px;
  --gap:clamp(16px,2.4vw,32px);
  --head-h:76px;
  --head-h-scrolled:60px;

  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --r-pill:999px;

  --font-display:"Archivo Narrow","Oswald","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ============ 2. 重置 ============ */
*,*::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;padding:0}
ul,ol{list-style:none}
img,picture,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
html.nav-locked,html.nav-locked body{overflow:hidden}

/* ============ 3. 基础排版 ============ */
body{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  color:var(--graphite);
  background:var(--mist);
  -webkit-font-smoothing:antialiased;
}
#main-content{display:block}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.02}

/* ============ 4. 焦点与无障碍 ============ */
:focus-visible{outline:2px solid var(--flash);outline-offset:3px;border-radius:4px}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:50%;top:0;z-index:200;
  transform:translate(-50%,-140%);
  background:var(--flash);color:var(--graphite);
  padding:11px 22px;border-radius:0 0 var(--r-md) var(--r-md);
  font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.08em;
  transition:transform .2s ease;
}
.skip-link:focus{transform:translate(-50%,0)}

/* ============ 5. 头部 ============ */
.arena-head{
  position:fixed;
  inset:0 0 auto 0;
  z-index:90;
  color:var(--mist);
  background:linear-gradient(180deg,rgba(28,34,38,.88) 0%,rgba(28,34,38,.46) 62%,rgba(28,34,38,0) 100%);
  transition:background .28s ease,box-shadow .28s ease;
}
.arena-head[data-scrolled="true"]{
  background:var(--soil);
  box-shadow:0 12px 32px rgba(28,34,38,.3);
}
.arena-head__bar{padding:0 var(--gap)}
.arena-head__inner{
  max-width:var(--shell);
  margin:0 auto;
  height:var(--head-h);
  display:flex;
  align-items:center;
  gap:clamp(10px,1.4vw,20px);
  transition:height .28s ease;
}
.arena-head[data-scrolled="true"] .arena-head__inner{height:var(--head-h-scrolled)}

.head-progress{
  display:block;height:2px;
  background:var(--flash);
  transform:scaleX(0);transform-origin:0 50%;
  opacity:0;
  transition:opacity .2s ease;
}
.arena-head[data-scrolled="true"] .head-progress{opacity:1}

/* 品牌 */
.brand{
  display:inline-flex;align-items:center;gap:10px;
  flex:0 0 auto;min-width:0;
}
.brand__flag{
  width:26px;height:26px;flex:0 0 auto;border-radius:8px;
  background:linear-gradient(135deg,var(--flash) 0 46%,var(--soil) 46% 100%);
  box-shadow:inset 0 0 0 2px rgba(238,241,243,.3);
}
.brand__text{display:flex;flex-direction:column;line-height:1;min-width:0}
.brand__name{
  font-family:var(--font-display);font-weight:700;
  font-size:19px;letter-spacing:.06em;color:var(--mist);
}
.brand__sub{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;
  margin-top:4px;color:rgba(238,241,243,.62);
}
.brand--foot .brand__flag{width:30px;height:30px}
.brand--foot .brand__name{font-size:21px}

.head-index{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  color:rgba(238,241,243,.62);white-space:nowrap;flex:0 0 auto;
}

/* 主导航 */
.arena-nav{margin-left:auto;display:block}
.arena-nav__list{display:flex;align-items:center;gap:clamp(6px,1.2vw,18px)}
.arena-nav__link{
  display:inline-block;
  padding:8px 8px;
  font-family:var(--font-display);font-weight:300;
  font-size:15.5px;letter-spacing:.04em;
  color:rgba(238,241,243,.84);
  border-radius:var(--r-pill);
  transition:color .18s ease,background .18s ease;
}
.arena-nav__link:hover{color:var(--flash)}
.arena-nav__link[aria-current="page"]{
  color:var(--graphite);background:var(--flash);font-weight:700;
  padding:6px 13px;
}
.arena-nav__status{display:none}
.arena-nav__status-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  color:rgba(238,241,243,.58);
}
.arena-nav__status-row{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:700;font-size:15px;
  color:var(--mist);letter-spacing:.03em;
}
.dot{
  width:8px;height:8px;flex:0 0 auto;border-radius:50%;
  background:var(--forest);box-shadow:0 0 0 3px rgba(31,107,74,.28);
}
.dot--alert{background:var(--alert);box-shadow:0 0 0 3px rgba(224,106,42,.26)}
.dot--flash{background:var(--flash);box-shadow:0 0 0 3px rgba(242,226,60,.24)}

/* 右侧操作区 */
.arena-head__actions{
  margin-left:clamp(6px,1vw,14px);
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
}
.head-search{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;
  border:1.5px solid rgba(238,241,243,.42);
  color:var(--mist);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.head-search:hover{border-color:var(--flash);color:var(--flash)}
.head-search[aria-expanded="true"]{background:var(--flash);color:var(--graphite);border-color:var(--flash)}
.head-search__glyph{position:relative;width:13px;height:13px;border:2px solid currentColor;border-radius:50%}
.head-search__glyph::after{
  content:"";position:absolute;top:11px;left:9px;
  width:8px;height:2px;background:currentColor;transform:rotate(45deg);
}
.nav-toggle{
  display:none;
  position:relative;width:40px;height:40px;flex:0 0 auto;
  border-radius:12px;border:1.5px solid rgba(238,241,243,.42);
  color:var(--mist);
  transition:border-color .2s ease;
}
.nav-toggle:hover{border-color:var(--flash)}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  position:absolute;left:50%;width:16px;height:2px;border-radius:2px;
  background:currentColor;transform:translateX(-50%);
}
.nav-toggle__bars{top:50%;margin-top:-1px;transition:background .2s ease}
.nav-toggle__bars::before{content:"";top:-5px;left:0;transform:none;transition:transform .22s ease,top .22s ease}
.nav-toggle__bars::after{content:"";top:5px;left:0;transform:none;transition:transform .22s ease,top .22s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:0;transform:rotate(-45deg)}

/* 检索面板 */
.head-search-panel{
  max-width:var(--shell);
  margin:0 auto;
  padding:18px clamp(16px,2vw,26px) 22px;
  background:rgba(28,34,38,.95);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:0 22px 44px rgba(28,34,38,.34);
}
.head-search-panel[hidden]{display:none}
.head-search-panel__field{
  display:flex;align-items:center;gap:14px;
  padding:11px 20px;
  border:1.5px solid rgba(238,241,243,.32);
  border-radius:var(--r-pill);
  transition:border-color .2s ease;
}
.head-search-panel__field:focus-within{border-color:var(--flash)}
.head-search-panel__hint{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  color:var(--flash);flex:0 0 auto;
}
.head-search-panel__field input{
  flex:1 1 auto;min-width:0;
  background:none;border:0;outline:none;
  color:var(--mist);
  font-family:var(--font-mono);font-size:14px;letter-spacing:.05em;
}
.head-search-panel__field input::placeholder{color:rgba(238,241,243,.45)}
.head-search-panel__note{
  margin-top:12px;font-size:13.5px;color:rgba(238,241,243,.6);
}
.head-search-panel__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ============ 6. 页脚 ============ */
.arena-foot{
  margin-top:clamp(48px,7vw,96px);
  color:rgba(238,241,243,.8);
  border-top:3px solid var(--soil);
  background:
    radial-gradient(120% 90% at 6% 0%,rgba(168,58,43,.5) 0%,rgba(94,31,24,0) 58%),
    linear-gradient(160deg,var(--forest-deep) 0%,#08231a 100%);
}
.arena-foot__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(40px,5vw,74px) var(--gap) clamp(28px,4vw,50px);
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.5fr;
  gap:clamp(26px,3.4vw,46px);
}
.foot-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.foot-col--brand{gap:16px}
.foot-col--contact{gap:16px}
.foot-col__title{
  font-family:var(--font-mono);font-weight:400;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--flash);
}
.foot-list{display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot-list a{color:rgba(238,241,243,.78);transition:color .18s ease}
.foot-list a:hover{color:var(--flash)}
.foot-list span{color:rgba(238,241,243,.7);line-height:1.6;word-break:break-word}
.foot-note{
  font-size:13.5px;line-height:1.7;
  color:rgba(238,241,243,.58);max-width:36em;
}
.arena-foot__bar{
  border-top:1px solid rgba(238,241,243,.14);
  background:rgba(6,29,21,.6);
}
.arena-foot__bar-inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:16px var(--gap);
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:rgba(238,241,243,.55);
}

/* ============ 7. 按钮与标签 ============ */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--graphite);
  --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;
  border-radius:var(--r-pill);
  border:1.5px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--font-display);font-weight:700;
  font-size:15px;letter-spacing:.06em;line-height:1;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--flash{--btn-bg:var(--flash);--btn-fg:var(--graphite)}
.btn--flash:hover{--btn-bg:#fff06a}
.btn--soil{--btn-bg:var(--soil);--btn-fg:var(--mist)}
.btn--soil:hover{--btn-bg:#8f3124}
.btn--forest{--btn-bg:var(--forest);--btn-fg:var(--mist)}
.btn--forest:hover{--btn-bg:#17573b}
.btn--tech{--btn-bg:var(--tech);--btn-fg:var(--mist)}
.btn--tech:hover{--btn-bg:#2258c9}
.btn--ghost{--btn-fg:var(--mist);--btn-bd:rgba(238,241,243,.5)}
.btn--ghost:hover{--btn-bd:var(--flash);--btn-fg:var(--flash)}
.btn--line{--btn-fg:var(--graphite);--btn-bd:var(--line)}
.btn--line:hover{--btn-bd:var(--soil);--btn-fg:var(--soil)}
.btn--sm{padding:9px 16px;font-size:13.5px}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:rgba(255,255,255,.6);
  color:var(--graphite);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.tag--flash{border-color:var(--flash);background:var(--flash);color:var(--graphite)}
.tag--soil{border-color:var(--soil);color:var(--soil);background:transparent}
.tag--forest{border-color:var(--forest);color:var(--forest);background:transparent}
.tag--tech{border-color:var(--tech);color:var(--tech);background:transparent}
.tag--dark{
  border-color:rgba(238,241,243,.3);
  background:rgba(238,241,243,.07);
  color:var(--mist);
}
.tag--dark:hover{border-color:var(--flash);color:var(--flash)}

/* ============ 8. 布局容器与栅格 ============ */
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--gap)}
.shell--narrow{max-width:920px}
.page-body{
  padding-top:clamp(104px,11vw,142px);
  padding-bottom:clamp(40px,5vw,72px);
}
.prose{max-width:38em;font-size:17px;line-height:1.75;color:var(--graphite)}
.prose p + p{margin-top:1.05em}

.grid{display:grid;gap:var(--gap)}
.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))}
.grid--asym{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.grid--asym-rev{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}

/* ============ 9. 通用内容组件 ============ */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  color:var(--ink-mute);
}
.crumb li{display:flex;align-items:center;gap:8px}
.crumb li + li::before{content:"/";color:var(--line)}
.crumb a:hover{color:var(--soil)}
.crumb [aria-current="page"]{color:var(--soil)}

.sec-head{display:flex;flex-direction:column;gap:12px}
.sec-index{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;
  color:var(--soil);
}
.sec-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,4.2vw,48px);line-height:.95;letter-spacing:.01em;
  color:var(--graphite);
}
.sec-lede{max-width:36em;font-size:16.5px;color:var(--ink-soft)}

.display-xl{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(44px,8.5vw,112px);line-height:.85;letter-spacing:-.005em;
}
.display-l{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,5vw,64px);line-height:.9;letter-spacing:-.004em;
}
.display-thin{font-weight:300}

.card{
  position:relative;
  padding:clamp(18px,2.2vw,28px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:#fff;
  transition:transform .2s ease,box-shadow .25s ease,border-color .2s ease,background .25s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-color:#a6b2b9;
  box-shadow:0 18px 40px rgba(28,34,38,.13);
}
.card--dark{
  border-color:transparent;color:var(--mist);
  background:linear-gradient(158deg,var(--soil-deep) 0%,#3a140f 100%);
}
.card--dark:hover{box-shadow:0 20px 44px rgba(94,31,24,.36)}
.card--forest{
  border-color:transparent;color:var(--mist);
  background:linear-gradient(158deg,var(--forest) 0%,var(--forest-deep) 100%);
}
.card--mist{background:var(--mist);border-color:var(--line)}
.card__label{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--soil);
}
.card--dark .card__label,.card--forest .card__label{color:var(--flash)}
.card__title{
  margin-top:8px;
  font-family:var(--font-display);font-weight:700;
  font-size:22px;line-height:1.06;
}

.mono{font-family:var(--font-mono);font-size:13.5px;letter-spacing:.08em}
.stat{display:flex;flex-direction:column;gap:4px;min-width:0}
.stat__num{
  font-family:var(--font-mono);font-weight:600;
  font-size:clamp(24px,3.4vw,36px);line-height:1;letter-spacing:-.01em;
  color:var(--soil);
}
.stat__num--flash{color:var(--flash)}
.stat__num--tech{color:var(--tech)}
.stat__num--forest{color:var(--forest)}
.stat__key{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;
  color:var(--ink-mute);
}
.card--dark .stat__key,.card--forest .stat__key{color:rgba(238,241,243,.62)}

.rows{display:flex;flex-direction:column}
.row{
  display:flex;align-items:center;gap:14px;
  padding:14px 6px;
  border-bottom:1px solid var(--line);
  transition:background .18s ease,padding-left .18s ease;
}
.row:hover{background:rgba(168,58,43,.06);padding-left:12px}

/* ============ 10. 图片容器 ============ */
.media{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:linear-gradient(140deg,var(--soil-deep) 0%,var(--forest-deep) 100%);
  isolation:isolate;
}
.media > img,
.media > picture > img,
.media > video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--1x1{aspect-ratio:1/1}
.media--tall{aspect-ratio:3/4}
.media--cut{clip-path:polygon(0 6%,100% 0,100% 94%,0 100%)}
.media--cut-l{clip-path:polygon(0 0,100% 5%,100% 100%,0 95%)}
.media__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:16px 16px 14px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--mist);
  background:linear-gradient(transparent,rgba(28,34,38,.82));
}
.media__badge{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:5px 11px;border-radius:var(--r-pill);
  background:var(--flash);color:var(--graphite);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
}

/* ============ 11. 显现动效 ============ */
html.is-js [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;
}
html.is-js [data-reveal].is-in{opacity:1;transform:none}

/* ============ 12. 响应式 ============ */
@media (max-width:1180px){
  .head-index{display:none}
  .arena-nav__list{gap:4px}
  .arena-nav__link{font-size:15px}
}
@media (max-width:1080px){
  .nav-toggle{display:block}
  .arena-nav{
    position:fixed;
    top:0;right:0;bottom:0;
    width:min(85vw,368px);
    margin-left:0;
    padding:calc(var(--head-h-scrolled) + 24px) 22px 40px;
    overflow-y:auto;
    background:linear-gradient(180deg,var(--forest-deep) 0%,#08231a 100%);
    box-shadow:-26px 0 54px rgba(8,35,26,.45);
    transform:translateX(102%);
    transition:transform .28s ease;
  }
  .arena-nav[data-open="true"]{transform:translateX(0)}
  .arena-nav__status{
    display:flex;flex-direction:column;gap:10px;
    margin:0 0 22px;
    padding:16px;
    border-radius:var(--r-md);
    border:1px solid rgba(238,241,243,.18);
    background:rgba(238,241,243,.06);
  }
  .arena-nav__list{flex-direction:column;align-items:stretch;gap:2px}
  .arena-nav__link{
    display:block;padding:13px 14px;
    font-size:18px;font-weight:300;border-radius:var(--r-sm);
  }
  .arena-nav__link:hover{background:rgba(238,241,243,.08)}
  .arena-nav__link[aria-current="page"]{
    padding:13px 14px;border-radius:var(--r-sm);
  }
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--asym,.grid--asym-rev{grid-template-columns:minmax(0,1fr)}
  .arena-foot__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  body{font-size:16.5px}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  :root{--head-h:66px;--head-h-scrolled:58px}
  .brand__sub{display:none}
  .head-search{width:36px;height:36px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
  .arena-foot__inner{grid-template-columns:minmax(0,1fr);gap:30px}
  .arena-foot__bar-inner{flex-direction:column;gap:6px}
  .page-body{padding-top:clamp(88px,18vw,116px)}
}

/* ============ 13. 减弱动效 ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.is-js [data-reveal]{opacity:1;transform:none}
  .arena-nav{transition:none}
  .btn:hover,.card:hover,.row:hover{transform:none}
}