*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,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}
:focus-visible{outline:2px solid var(--blaze-300);outline-offset:2px}

:root{
  --ink-900:#0D1524;
  --indigo-800:#16233A;
  --paper-50:#F4EFE3;
  --paper-200:#DFD6C4;
  --army-700:#2E4A33;
  --army-500:#4F6B48;
  --blaze-500:#F2621F;
  --blaze-300:#FF9C5B;
  --card-red:#D42B2B;
  --card-yellow:#F0C000;
  --field-white:#FDFBF6;
  --line-dark:rgba(247,243,232,.18);
  --line-light:rgba(13,21,36,.16);
  --ink-muted:rgba(13,21,36,.62);
  --white-muted:rgba(253,251,246,.64);
  --font-display:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  --maxw:1280px;
  --gutter:24px;
}

@media (min-width:640px){:root{--gutter:32px}}
@media (min-width:1024px){:root{--gutter:48px}}

body{
  background:var(--paper-50);
  color:var(--ink-900);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  letter-spacing:.01em;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (max-width:640px){body{font-size:16px}}

/* ============ 通用布局 ============ */
.cmp-container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.cmp-section{
  position:relative;
  padding-block:clamp(48px,7vw,96px);
}
.cmp-section--paper{
  background-color:var(--paper-50);
  color:var(--ink-900);
  background-image:
    repeating-linear-gradient(90deg,var(--line-light) 0 1px,transparent 1px 64px);
  background-position:0 0;
}
.cmp-section--dark{
  background-color:var(--ink-900);
  color:var(--field-white);
  background-image:
    repeating-linear-gradient(90deg,rgba(253,251,246,.06) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(253,251,246,.06) 0 1px,transparent 1px 64px);
}
.cmp-grid{display:grid;gap:clamp(16px,2vw,24px)}
.cmp-grid--12{grid-template-columns:repeat(12,minmax(0,1fr))}
@media (max-width:900px){.cmp-grid--12{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:560px){.cmp-grid--12{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============ 文字 ============ */
.cmp-display{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(44px,7vw,108px);
  line-height:.94;
  letter-spacing:-.02em;
}
.cmp-h2{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.12;
  letter-spacing:-.01em;
}
.cmp-h3{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(19px,2vw,24px);
  line-height:1.28;
}
.cmp-lead{
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.75;
  max-width:46ch;
}
.cmp-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--army-700);
}
.cmp-eyebrow::before{content:"";width:24px;height:2px;background:var(--blaze-500)}
.cmp-section--dark .cmp-eyebrow{color:var(--blaze-300)}
.cmp-mono{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}
.cmp-vertical{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.35em;
  color:var(--ink-muted);
}
.cmp-section--dark .cmp-vertical{color:var(--white-muted)}
.cmp-slab{
  display:inline-block;
  padding:.04em .26em .1em;
  background:var(--ink-900);
  color:var(--field-white);
  clip-path:polygon(0 0,100% 2%,calc(100% - 14px) 100%,0 96%);
}
.cmp-section--dark .cmp-slab{background:var(--blaze-500);color:var(--ink-900)}
.cmp-rule{height:1px;border:0;margin:0;background:var(--paper-200)}
.cmp-section--dark .cmp-rule{background:var(--line-dark)}

/* ============ 按钮 ============ */
.cmp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  border:1px solid transparent;
  border-radius:2px;
  background:transparent;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.2;
  cursor:pointer;
  transition:background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.cmp-btn--sm{padding:8px 14px;font-size:13px}
.cmp-btn--blaze{
  background:var(--blaze-500);
  color:var(--ink-900);
  clip-path:polygon(0 0,100% 0,100% 72%,88% 100%,0 100%);
}
.cmp-btn--blaze:hover{background:var(--blaze-300)}
.cmp-btn--line{
  border-color:currentColor;
  color:inherit;
  background:transparent;
}
.cmp-btn--line:hover{background:var(--blaze-500);border-color:var(--blaze-500);color:var(--ink-900)}
.cmp-btn--ink{
  background:var(--ink-900);
  color:var(--field-white);
}
.cmp-btn--ink:hover{background:var(--army-700)}
.cmp-btn:active{transform:translateY(1px)}

/* ============ 卡片 / 标签 / 红黄牌 ============ */
.cmp-card{
  position:relative;
  background:var(--field-white);
  border:1px solid var(--paper-200);
  border-left:3px solid var(--army-700);
  border-radius:2px;
  padding:clamp(20px,2.4vw,28px);
  transition:border-left-color .24s var(--ease),transform .24s var(--ease);
}
.cmp-card:hover{border-left-color:var(--blaze-500);transform:translateY(-2px)}
.cmp-card--dark{
  background:var(--indigo-800);
  color:var(--field-white);
  border-color:rgba(253,251,246,.16);
  border-left-color:var(--blaze-500);
}
.cmp-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 14px 3px 8px;
  background:var(--army-700);
  color:var(--field-white);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);
}
.cmp-tag--blaze{background:var(--blaze-500);color:var(--ink-900)}
.cmp-tag--red{background:var(--card-red);color:var(--field-white)}
.cmp-tag--yellow{background:var(--card-yellow);color:var(--ink-900)}
.cmp-flag{
  display:inline-block;
  width:12px;
  height:16px;
  border-radius:1px;
  vertical-align:middle;
}
.cmp-flag--red{background:var(--card-red)}
.cmp-flag--yellow{background:var(--card-yellow)}

/* ============ 面包屑 / 刻度索引条 ============ */
.cmp-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.cmp-breadcrumb__item{display:inline-flex;align-items:center;gap:8px}
.cmp-breadcrumb__link{border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)}
.cmp-breadcrumb__link:hover{color:var(--blaze-500);border-bottom-color:var(--blaze-500)}
.cmp-breadcrumb__sep{color:var(--blaze-500)}
.cmp-section--dark .cmp-breadcrumb{color:var(--white-muted)}
.cmp-indexbar{
  display:flex;
  flex-wrap:wrap;
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  background:var(--paper-50);
}
.cmp-indexbar__link{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border-right:1px solid var(--paper-200);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--ink-900);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.cmp-indexbar__link:hover{background:var(--army-700);color:var(--field-white)}
.cmp-indexbar__link[aria-current="true"]{background:var(--blaze-500);color:var(--ink-900)}

/* ============ 图片容器 ============ */
.cmp-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  border:1px solid var(--paper-200);
  border-radius:2px;
  background:var(--indigo-800);
}
.cmp-media--wide{aspect-ratio:21/9}
.cmp-media--square{aspect-ratio:1/1}
.cmp-media--portrait{aspect-ratio:4/5}
.cmp-media img,.cmp-media video{width:100%;height:100%;object-fit:cover}
.cmp-media__ph{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(253,251,246,.52);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  background-image:
    linear-gradient(to right,rgba(253,251,246,.14) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(253,251,246,.14) 1px,transparent 1px);
  background-size:32px 32px;
}
.cmp-figure{display:grid;gap:10px}
.cmp-figcaption{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--ink-muted);
}
.cmp-section--dark .cmp-figcaption{color:var(--white-muted)}

/* ============ 页头 ============ */
.cmp-header{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--ink-900);
  color:var(--field-white);
  border-bottom:1px solid var(--line-dark);
}
.cmp-header__inner{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:var(--maxw);
  min-height:64px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.cmp-skip{
  position:absolute;
  left:12px;
  top:-120px;
  z-index:120;
  padding:10px 18px;
  background:var(--blaze-500);
  color:var(--ink-900);
  font-weight:700;
  font-size:14px;
  border-radius:2px;
  transition:top .2s var(--ease);
}
.cmp-skip:focus{top:8px}
.cmp-lockup{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  padding-block:10px;
  color:inherit;
}
.cmp-lockup__mark{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  background:var(--blaze-500);
  color:var(--ink-900);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  clip-path:polygon(0 0,100% 0,100% 74%,76% 100%,0 100%);
}
.cmp-lockup__text{display:flex;flex-direction:column;line-height:1.15}
.cmp-lockup__name{font-family:var(--font-display);font-weight:900;font-size:17px;letter-spacing:.02em}
.cmp-lockup__meta{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--white-muted);
}
.cmp-lockup:hover .cmp-lockup__name{color:var(--blaze-300)}
.cmp-navtoggle{
  display:none;
  align-items:center;
  gap:8px;
  margin-left:auto;
  padding:8px 12px;
  border:1px solid rgba(253,251,246,.28);
  border-radius:2px;
  color:var(--field-white);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
}
.cmp-navtoggle:hover{border-color:var(--blaze-300)}
.cmp-navtoggle__bars{display:grid;gap:3px;width:16px}
.cmp-navtoggle__bars i{display:block;height:2px;background:var(--blaze-500);transition:transform .24s var(--ease),opacity .24s var(--ease)}
.cmp-navtoggle__label{display:inline-block}
.cmp-header[data-open] .cmp-navtoggle__bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.cmp-header[data-open] .cmp-navtoggle__bars i:nth-child(2){opacity:0}
.cmp-header[data-open] .cmp-navtoggle__bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.cmp-nav{
  display:flex;
  align-items:center;
  gap:16px;
  margin-left:auto;
}
.cmp-nav__list{display:flex;align-items:center;gap:2px}
.cmp-nav__item{display:block}
.cmp-nav__link{
  display:flex;
  align-items:baseline;
  gap:6px;
  padding:10px 12px;
  color:rgba(253,251,246,.78);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  transition:background-color .22s var(--ease),color .22s var(--ease);
}
.cmp-nav__idx{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--blaze-300);
}
.cmp-nav__name{display:inline-block}
.cmp-nav__link:hover{background:var(--indigo-800);color:var(--field-white)}
.cmp-nav__link[aria-current="page"]{background:var(--blaze-500);color:var(--ink-900)}
.cmp-nav__link[aria-current="page"] .cmp-nav__idx{color:var(--ink-900)}
.cmp-nav__actions{
  display:flex;
  align-items:center;
  gap:8px;
  padding-left:14px;
  border-left:1px solid var(--line-dark);
}
.cmp-progress{
  height:3px;
  background:rgba(253,251,246,.14);
}
.cmp-progress__bar{
  display:block;
  width:0;
  height:100%;
  background:var(--blaze-500);
}

@media (max-width:1023px){
  .cmp-navtoggle{display:inline-flex}
  .cmp-nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    display:block;
    margin-left:0;
    padding:10px var(--gutter) 18px;
    background:var(--indigo-800);
    border-bottom:1px solid var(--line-dark);
    max-height:0;
    overflow:hidden;
    visibility:hidden;
    transition:max-height .3s var(--ease),visibility .3s var(--ease);
  }
  .cmp-header[data-open] .cmp-nav{
    max-height:min(78vh,640px);
    overflow-y:auto;
    visibility:visible;
  }
  .cmp-nav__list{flex-direction:column;align-items:stretch;width:100%}
  .cmp-nav__item{width:100%;border-bottom:1px solid rgba(253,251,246,.12)}
  .cmp-nav__link{width:100%;padding:14px 4px;font-size:15px}
  .cmp-nav__actions{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:16px 0 0;
    border-left:0;
  }
  .cmp-nav__actions .cmp-btn{width:100%}
}

/* ============ 页脚 ============ */
.cmp-footer{
  position:relative;
  background:var(--ink-900);
  color:var(--field-white);
  border-top:3px solid var(--blaze-500);
  overflow:hidden;
}
.cmp-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(253,251,246,.05) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(253,251,246,.05) 0 1px,transparent 1px 64px);
}
.cmp-footer__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(36px,5vw,68px) var(--gutter) 24px;
}
.cmp-footer__brand{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px 32px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line-dark);
}
.cmp-footer__tagline{
  margin-top:14px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(20px,2.2vw,26px);
  line-height:1.2;
  letter-spacing:-.01em;
}
.cmp-footer__flags{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--white-muted);
}
.cmp-footer__cols{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,32px);
  padding-block:clamp(26px,4vw,44px);
}
.cmp-footer__col{min-width:0}
.cmp-footer__title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blaze-300);
}
.cmp-footer__title::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--line-dark);
}
.cmp-footer__list{display:grid;gap:10px}
.cmp-footer__link{
  display:inline-block;
  font-size:15px;
  color:rgba(253,251,246,.78);
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.cmp-footer__link:hover{color:var(--field-white);border-bottom-color:var(--blaze-500)}
.cmp-footer__meta{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.04em;
  line-height:1.6;
  color:rgba(253,251,246,.66);
  word-break:break-word;
}
.cmp-footer__legal{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 28px;
  padding-top:20px;
  border-top:1px solid var(--line-dark);
}
.cmp-footer__legaltext{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  line-height:1.7;
  color:rgba(253,251,246,.52);
}
@media (max-width:900px){
  .cmp-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .cmp-footer__cols{grid-template-columns:minmax(0,1fr)}
  .cmp-footer__legal{flex-direction:column}
}

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

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