:root{
  --deep:#05121F;
  --tactic:#0B2436;
  --line:#16374F;
  --cyan:#3FE0D0;
  --mist:#9FF0E6;
  --mid:#0E3A5C;
  --coral:#FF7A59;
  --card-red:#C25A50;
  --card-yellow:#D6B24C;
  --text:#E8F3F8;
  --muted:#8AA3B8;
  --paper:#F2F7FA;

  --mast-h:64px;
  --rail-w:112px;
  --gutter:clamp(18px,4vw,56px);
  --shell:1280px;

  --font-display:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (max-width:1023px){
  :root{ --rail-w:0px; --mast-h:58px; }
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding-left:var(--rail-w);
  padding-top:var(--mast-h);
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.7;
  color:var(--text);
  background-color:var(--deep);
  background-image:
    repeating-linear-gradient(90deg, rgba(63,224,208,.024) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(63,224,208,.016) 0 1px, transparent 1px 96px),
    radial-gradient(1200px 720px at 84% -10%, rgba(14,58,92,.6), transparent 62%),
    radial-gradient(900px 620px at 6% 108%, rgba(63,224,208,.075), transparent 66%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--mist)}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.01em}
table{border-collapse:collapse}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
  border-radius:2px;
}

/* ===== 外壳 ===== */
.site-header{
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
}
.site-header > *{pointer-events:auto}

.skip-link{
  position:absolute;
  top:10px;
  left:10px;
  z-index:400;
  padding:10px 18px;
  border-radius:3px;
  background:var(--cyan);
  color:#03211E;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  transform:translateY(-200%);
  transition:transform .22s var(--ease);
}
.skip-link:focus{transform:translateY(0);color:#03211E}

/* ===== 顶部信息条 ===== */
.mast{
  position:absolute;
  top:0;left:0;right:0;
  height:var(--mast-h);
  display:flex;
  align-items:center;
  gap:clamp(14px,2.2vw,32px);
  padding:0 var(--gutter);
  background:rgba(5,18,31,.84);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(63,224,208,.16), 0 22px 44px -34px rgba(63,224,208,.55);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-right:auto;
  color:var(--text);
}
.brand:hover{color:var(--text)}

.brand__mark{
  flex:none;
  width:36px;height:36px;
  display:grid;place-items:center;
  border:1px solid rgba(63,224,208,.5);
  border-radius:3px;
  background:linear-gradient(150deg, rgba(63,224,208,.2), rgba(14,58,92,.45));
  color:var(--mist);
  font-size:17px;
  font-weight:800;
}
.brand__text{display:flex;flex-direction:column;line-height:1.16}
.brand__name{font-size:15.5px;font-weight:800;letter-spacing:.14em}
.brand__sub{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.2em;
  color:var(--muted);
}

.mast__live{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--mist);
  white-space:nowrap;
}
.live-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--cyan);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(63,224,208,.5)}
  70%{box-shadow:0 0 0 12px rgba(63,224,208,0)}
  100%{box-shadow:0 0 0 0 rgba(63,224,208,0)}
}

.mast__contact{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:12.5px;
  color:var(--muted);
  white-space:nowrap;
}
.mast__label{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.22em;
  color:rgba(138,163,184,.62);
}
.mast__value{
  font-family:var(--font-mono);
  color:var(--text);
  letter-spacing:.03em;
}
.mast__value + .mast__value{
  padding-left:14px;
  border-left:1px solid var(--line);
}
.mast__value--mail{color:var(--cyan)}

.mast__cta{flex:none}

.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:3px;
  background:rgba(11,36,54,.85);
  color:var(--text);
  font-size:12.5px;
  letter-spacing:.1em;
  cursor:pointer;
  transition:border-color .22s var(--ease), color .22s var(--ease);
}
.nav-toggle:hover{border-color:rgba(63,224,208,.5);color:var(--cyan)}
.nav-toggle__bars{display:grid;gap:3px;width:16px}
.nav-toggle__bars i{
  display:block;
  height:1.5px;
  border-radius:2px;
  background:var(--cyan);
  transition:transform .26s var(--ease), opacity .2s var(--ease);
}

/* ===== 左侧边线导航 ===== */
.rail{
  position:absolute;
  top:var(--mast-h);left:0;bottom:0;
  width:var(--rail-w);
  display:flex;
  flex-direction:column;
  padding:24px 0 20px;
  background:linear-gradient(180deg, rgba(11,36,54,.94), rgba(5,18,31,.97));
  border-right:1px solid var(--line);
}
.rail::after{
  content:"";
  position:absolute;
  top:0;right:-1px;
  width:1px;height:100%;
  background:linear-gradient(180deg, rgba(63,224,208,.55), rgba(63,224,208,0) 62%);
  pointer-events:none;
}

.rail__caption{
  padding:0 16px;
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.26em;
  color:rgba(138,163,184,.6);
}

.rail__list{display:flex;flex-direction:column}

.rail__list a{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:13px 16px;
  color:var(--muted);
  border-left:2px solid transparent;
  transition:color .24s var(--ease), background .24s var(--ease), border-color .24s var(--ease);
}
.rail__list a:hover{
  color:var(--text);
  background:rgba(63,224,208,.07);
}
.rail__list a[aria-current="page"]{
  color:var(--cyan);
  border-left-color:var(--cyan);
  background:linear-gradient(90deg, rgba(63,224,208,.16), rgba(63,224,208,0));
}
.rail__num{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.2em;
  color:rgba(138,163,184,.62);
}
.rail__list a[aria-current="page"] .rail__num{color:var(--cyan)}
.rail__label{font-size:13px;font-weight:600;letter-spacing:.06em}

.rail__foot{
  margin-top:auto;
  padding:18px 16px 0;
  border-top:1px solid rgba(22,55,79,.7);
  display:grid;
  gap:11px;
}
.rail__note{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.22em;
  color:rgba(138,163,184,.65);
}
.rail__meter{
  height:3px;
  border-radius:2px;
  background:rgba(22,55,79,.9);
  overflow:hidden;
}
.rail__meter span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--cyan), var(--coral));
}
.rail__contact{display:none}
.rail__cta{display:none}

/* ===== 平板 / 移动：抽屉式栏目索引 ===== */
@media (max-width:1023px){
  .mast{height:auto;min-height:var(--mast-h);flex-wrap:nowrap;padding-block:10px}
  .mast__contact,.mast__cta{display:none}
  .nav-toggle{display:inline-flex;margin-left:auto}

  .site-header[data-nav-open] .nav-toggle__bars i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
  .site-header[data-nav-open] .nav-toggle__bars i:nth-child(2){opacity:0}
  .site-header[data-nav-open] .nav-toggle__bars i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

  .rail{
    top:var(--mast-h);left:0;right:0;bottom:auto;
    width:auto;
    max-height:calc(100vh - var(--mast-h));
    overflow-y:auto;
    padding:18px var(--gutter) 26px;
    border-right:0;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, rgba(11,36,54,.985), rgba(5,18,31,.99) 72%);
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    transition:transform .28s var(--ease), opacity .28s var(--ease), visibility 0s linear .28s;
  }
  .rail::after{display:none}
  .site-header[data-nav-open] .rail{
    transform:none;
    opacity:1;
    visibility:visible;
    transition:transform .28s var(--ease), opacity .28s var(--ease), visibility 0s;
  }

  .rail__caption{padding:0 4px;margin-bottom:10px}

  .rail__list a{
    flex-direction:row;
    align-items:baseline;
    gap:16px;
    padding:14px 4px;
    border-left:0;
    border-bottom:1px solid rgba(22,55,79,.6);
  }
  .rail__list a[aria-current="page"]{
    background:linear-gradient(90deg, rgba(63,224,208,.14), rgba(63,224,208,0));
    border-left:0;
  }
  .rail__label{font-size:15px}

  .rail__foot{margin-top:20px;padding:18px 4px 0}
  .rail__contact{
    display:grid;
    gap:5px;
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--muted);
  }
  .rail__cta{
    display:inline-flex;
    justify-content:center;
    padding:12px 20px;
    margin-top:4px;
    border-radius:3px;
    background:linear-gradient(135deg, var(--coral), #FF9A6E);
    color:#2A0F07;
    font-size:13.5px;
    font-weight:700;
    letter-spacing:.08em;
  }
}

@media (max-width:640px){
  .brand__sub{display:none}
  .mast__live{font-size:10px;letter-spacing:.04em}
}

/* ===== 页脚 ===== */
.site-footer{
  position:relative;
  margin-top:clamp(64px,10vw,124px);
  background:linear-gradient(180deg, rgba(11,36,54,.6), rgba(5,18,31,.99) 58%);
  border-top:1px solid var(--line);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:-1px;left:0;
  width:min(440px,64%);
  height:1px;
  background:linear-gradient(90deg, var(--cyan), transparent);
}

.footer__grid{
  width:min(var(--shell), calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  padding-block:clamp(44px,6vw,80px);
  display:grid;
  grid-template-columns:1.5fr 1fr 1.15fr 1.35fr;
  gap:clamp(26px,3.6vw,56px);
}

.footer__logo{
  font-size:22px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--text);
}
.footer__desc{
  margin-top:14px;
  max-width:34ch;
  font-size:13.5px;
  line-height:1.85;
  color:var(--muted);
}
.footer__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.footer__tag{
  padding:5px 10px;
  border:1px solid rgba(63,224,208,.32);
  border-radius:2px;
  background:rgba(63,224,208,.06);
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.14em;
}

.footer__title{
  margin-bottom:18px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.26em;
  color:var(--muted);
}

.footer__list{display:grid;gap:11px}
.footer__list a{
  color:var(--text);
  font-size:13.5px;
  opacity:.86;
  transition:color .2s var(--ease), opacity .2s var(--ease);
}
.footer__list a:hover{color:var(--cyan);opacity:1}

.footer__text{
  margin-bottom:16px;
  font-size:13.5px;
  line-height:1.85;
  color:var(--muted);
}
.footer__text--note{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid rgba(22,55,79,.7);
  font-size:12.5px;
  line-height:1.75;
}

.footer__meta{display:grid;gap:13px}
.footer__meta li{display:grid;gap:4px}
.footer__meta-key{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.22em;
  color:rgba(138,163,184,.6);
}
.footer__meta-val{
  font-size:13.5px;
  line-height:1.7;
  color:var(--text);
}

.footer__base{
  width:min(var(--shell), calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  border-top:1px solid var(--line);
  padding-block:22px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 26px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.05em;
  color:var(--muted);
}
.footer__copy{margin:0}
.footer__region{margin:0}
.footer__legal{
  margin-left:auto;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}
.footer__legal a{color:var(--muted)}
.footer__legal a:hover{color:var(--cyan)}

@media (max-width:1023px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .footer__grid{grid-template-columns:1fr}
  .footer__base{flex-direction:column;align-items:flex-start}
  .footer__legal{margin-left:0}
}

/* ===== 通用排版与容器 ===== */
.shell{
  width:min(var(--shell), calc(100% - var(--gutter) * 2));
  margin-inline:auto;
}

.prose{
  max-width:44ch;
  line-height:1.85;
  color:var(--text);
}
.prose p{margin-bottom:1.25em}
.prose p:last-child{margin-bottom:0}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.26em;
  color:var(--cyan);
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:26px;
  height:1px;
  background:currentColor;
  opacity:.72;
}

.title-xl{
  font-size:clamp(38px,7vw,86px);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.025em;
}
.title-lg{
  font-size:clamp(26px,3.4vw,42px);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.015em;
}
.title-md{
  font-size:clamp(19px,2vw,24px);
  font-weight:700;
  line-height:1.35;
}

.data-num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

.section{padding-block:clamp(48px,7vw,96px)}

.turf{
  background-image:
    repeating-linear-gradient(90deg, rgba(63,224,208,.035) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(0deg, rgba(63,224,208,.02) 0 1px, transparent 1px 54px);
}

/* ===== 说明牌 / 标签 / 按钮 ===== */
.plate{
  position:relative;
  padding:22px 22px 24px;
  border:1px solid var(--line);
  border-radius:4px;
  background:linear-gradient(160deg, rgba(11,36,54,.92), rgba(5,18,31,.88));
}
.plate::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(242,247,250,.07);
  border-radius:2px;
  pointer-events:none;
}
.plate--paper{
  background:var(--paper);
  border-color:rgba(5,18,31,.22);
  color:#05121F;
}
.plate--paper::before{border-color:rgba(5,18,31,.1)}

.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 11px;
  border:1px solid rgba(63,224,208,.32);
  border-radius:999px;
  background:rgba(63,224,208,.07);
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 26px;
  border:1px solid transparent;
  border-radius:3px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.06em;
  cursor:pointer;
  transition:transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn--sm{padding:9px 18px;font-size:12.5px}
.btn--coral{
  background:linear-gradient(135deg, var(--coral), #FF9A6E);
  color:#2A0F07;
  box-shadow:0 16px 32px -20px rgba(255,122,89,.95);
}
.btn--coral:hover{transform:translateY(-2px);color:#2A0F07}
.btn--ghost{
  border-color:var(--line);
  background:rgba(11,36,54,.6);
  color:var(--text);
}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* ===== 面包屑 ===== */
.breadcrumb{
  margin-bottom:26px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--muted);
}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.breadcrumb li+li::before{
  content:"/";
  margin-right:8px;
  color:var(--line);
}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--cyan)}
.breadcrumb [aria-current="page"]{color:var(--text)}

/* ===== 图片容器 ===== */
.media-frame{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:4px;
  background:linear-gradient(150deg, var(--mid), var(--deep) 72%);
}
.media-frame > img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.media-frame[data-placeholder]::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(63,224,208,.09) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(63,224,208,.05) 0 1px, transparent 1px 44px),
    radial-gradient(60% 70% at 50% 50%, rgba(63,224,208,.12), transparent 70%);
  pointer-events:none;
}
.media-frame--wide{aspect-ratio:16/9}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--square{aspect-ratio:1/1}
.media-frame--banner{aspect-ratio:21/9}

/* ===== 网格 ===== */
.grid{display:grid;gap:clamp(18px,2.4vw,32px)}
.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))}

@media (max-width:1023px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
}

/* ===== 筛选标签 ===== */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:26px;
}
.filter-chip{
  padding:8px 15px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(11,36,54,.7);
  color:var(--muted);
  font-size:12.5px;
  letter-spacing:.06em;
  cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.filter-chip:hover{color:var(--text);border-color:rgba(63,224,208,.45)}
.filter-chip[aria-pressed="true"]{
  color:#03211E;
  font-weight:600;
  border-color:transparent;
  background:linear-gradient(135deg, var(--cyan), var(--mist));
}

[data-filter-item][hidden]{display:none !important}

/* ===== 展开组 ===== */
.expand{border-bottom:1px solid rgba(22,55,79,.75)}
.expand__trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 4px;
  border:0;
  background:transparent;
  color:var(--text);
  font-size:15.5px;
  font-weight:600;
  letter-spacing:.02em;
  text-align:left;
  cursor:pointer;
  transition:color .22s var(--ease);
}
.expand__trigger:hover{color:var(--cyan)}
.expand__sign{position:relative;flex:none;width:14px;height:14px}
.expand__sign::before,
.expand__sign::after{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:14px;height:1.5px;
  background:var(--cyan);
  transition:transform .3s var(--ease);
}
.expand__sign::after{transform:rotate(90deg)}
.expand[data-open] .expand__sign::after{transform:rotate(0deg)}

.expand__panel{
  display:grid;
  grid-template-rows:0fr;
  visibility:hidden;
  transition:grid-template-rows .34s var(--ease), visibility 0s linear .34s;
}
.expand[data-open] .expand__panel{
  grid-template-rows:1fr;
  visibility:visible;
  transition:grid-template-rows .34s var(--ease), visibility 0s;
}
.expand__panel > *{
  overflow:hidden;
  min-height:0;
}
.expand__inner{
  padding:2px 4px 24px;
  max-width:62ch;
  font-size:14.5px;
  line-height:1.85;
  color:var(--muted);
}
.expand__inner p{margin-bottom:1em}
.expand__inner p:last-child{margin-bottom:0}

/* ===== 进场显现 ===== */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
[data-reveal].is-visible{
  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}
  .live-dot{animation:none}
  body{background-attachment:scroll}
}