/* ============ A8体育 · 共享 Site Kit ============ */
:root{
  --ink:#07110F;
  --green:#0D2420;
  --panel:#171A1C;
  --cyan:#35F2D0;
  --amber:#FFB347;
  --red:#D64545;
  --muted:#A8C7BD;
  --bone:#F2F7F4;
  --teal-grad:linear-gradient(150deg,#1B6B5E 0%,#0A1F1B 100%);
  --line:rgba(168,199,189,.22);
  --line-soft:rgba(168,199,189,.12);
  --line-cyan:rgba(53,242,208,.42);
  --r-lg:28px;
  --r-md:18px;
  --r-sm:12px;
  --pill:999px;
  --float-shadow:0 30px 64px -34px rgba(53,242,208,.5),inset 0 1px 0 rgba(53,242,208,.14);
  --container:1200px;
  --gutter:clamp(1rem,3.2vw,2.5rem);
  --font-display:"Barlow Condensed","Noto Sans SC","PingFang SC",sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-num:"JetBrains Mono","IBM Plex Mono","SFMono-Regular",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,time{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0}
a{color:inherit}
time{font-variant-numeric:tabular-nums}

body{
  margin:0;
  background:
    radial-gradient(1100px 560px at 88% -8%,rgba(27,107,94,.42),transparent 62%),
    radial-gradient(760px 520px at -10% 30%,rgba(53,242,208,.07),transparent 70%),
    var(--ink);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- 容器与节奏 ---------- */
.container,
.header-inner{
  width:min(calc(100% - var(--gutter) * 2),var(--container));
  margin-inline:auto;
}
.section{padding-block:clamp(2.6rem,6vw,5rem)}
.section--tight{padding-block:clamp(1.6rem,3.5vw,2.6rem)}

/* ---------- 跳转链接 ---------- */
.skip-link{
  position:absolute;
  top:.4rem;
  left:.4rem;
  z-index:120;
  padding:.6rem 1.1rem;
  border-radius:var(--pill);
  background:var(--cyan);
  color:#041714;
  font-size:.86rem;
  font-weight:700;
  text-decoration:none;
  transform:translateY(-220%);
  transition:transform .2s ease;
}
.skip-link:focus,
.skip-link:focus-visible{transform:translateY(0)}

/* ---------- 头部 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:linear-gradient(180deg,rgba(7,17,15,.98),rgba(10,26,23,.94));
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(12px);
}
.header-top{
  background:linear-gradient(100deg,rgba(13,36,32,.92),rgba(7,17,15,.72));
  border-bottom:1px solid var(--line-soft);
}
.header-top-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-block:.55rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:var(--bone);
}
.brand-mark{
  display:grid;
  place-items:center;
  width:2.35rem;
  height:2.35rem;
  flex:0 0 auto;
  border-radius:var(--r-sm);
  background:var(--teal-grad);
  border:1px solid var(--line-cyan);
  color:var(--cyan);
  font-family:var(--font-num);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.04em;
  box-shadow:inset 0 0 18px rgba(53,242,208,.18);
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.08em;
}
.brand-tag{
  font-size:.66rem;
  letter-spacing:.24em;
  color:var(--muted);
}
.header-meta{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.status-line{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.76rem;
  color:var(--muted);
  letter-spacing:.06em;
}
.status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
  flex:0 0 auto;
  animation:a8-breathe 2s ease-in-out infinite;
}
.status-time{font-family:var(--font-num);color:var(--cyan)}
.header-links{display:flex;align-items:center;gap:.5rem}
.header-link{
  display:inline-block;
  padding:.34rem .9rem;
  border-radius:var(--pill);
  border:1px solid var(--line-cyan);
  color:var(--cyan);
  font-size:.76rem;
  letter-spacing:.1em;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
.header-link:hover{background:rgba(53,242,208,.14);color:var(--bone)}
@keyframes a8-breathe{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(53,242,208,.45)}
  50%{opacity:.55;box-shadow:0 0 0 6px rgba(53,242,208,0)}
}

.header-nav-bar{padding-block:.5rem}
.nav-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  justify-content:space-between;
}
.site-nav{flex:1 1 auto;min-width:0}
.nav-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.3rem;
}
.nav-link{
  position:relative;
  display:inline-block;
  padding:.5rem 1rem .62rem;
  border-radius:var(--pill);
  border:1px solid transparent;
  color:var(--muted);
  font-size:.9rem;
  letter-spacing:.06em;
  text-decoration:none;
  transition:color .2s ease,background-color .2s ease,border-color .2s ease;
}
.nav-link:hover{
  color:var(--bone);
  background:rgba(53,242,208,.09);
  border-color:rgba(53,242,208,.26);
}
.nav-link[aria-current="page"]{
  color:var(--bone);
  background:rgba(53,242,208,.11);
  border-color:rgba(53,242,208,.28);
}
.nav-link[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:.28rem;
  width:1.2rem;
  height:2px;
  border-radius:2px;
  transform:translateX(-50%);
  background:var(--cyan);
  box-shadow:0 0 10px rgba(53,242,208,.85);
}
.nav-toggle{
  display:none;
  align-items:center;
  gap:.55rem;
  padding:.48rem .95rem;
  border-radius:var(--pill);
  border:1px solid var(--line-cyan);
  background:rgba(13,36,32,.9);
  color:var(--bone);
  font-size:.82rem;
  letter-spacing:.12em;
  cursor:pointer;
}
.nav-toggle-bars{display:grid;gap:4px;width:16px}
.nav-toggle-bars span{
  display:block;
  height:2px;
  border-radius:2px;
  background:var(--cyan);
  transition:transform .25s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-toggle-label{line-height:1}

.scroll-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:rgba(53,242,208,.08);
  overflow:hidden;
}
.scroll-progress-bar{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--cyan),var(--amber));
  transition:width .12s linear;
}

/* ---------- 页脚 ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(2.5rem,6vw,5rem);
  padding-block:clamp(2.4rem,5vw,3.8rem) 1.4rem;
  background:linear-gradient(180deg,#0A1F1B 0%,#07110F 72%);
  border-top:1px solid rgba(53,242,208,.2);
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute;
  top:-140px;
  right:-80px;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(53,242,208,.16),transparent 68%);
  pointer-events:none;
}
.site-footer::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,179,71,.5),transparent);
  pointer-events:none;
}
.footer-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.6fr;
  gap:clamp(1.4rem,3vw,2.6rem);
}
.footer-brand{display:flex;flex-direction:column;gap:.65rem}
.footer-brand-name{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.1em;
}
.footer-brand-name .brand-mark{width:2.1rem;height:2.1rem;font-size:.82rem}
.footer-brand-note{
  color:var(--muted);
  font-size:.85rem;
  line-height:1.8;
  max-width:30ch;
}
.footer-icp{
  align-self:flex-start;
  padding:.2rem .7rem;
  border-radius:var(--pill);
  border:1px solid rgba(255,179,71,.4);
  color:var(--amber);
  font-family:var(--font-num);
  font-size:.72rem;
  letter-spacing:.05em;
}
.footer-legal{
  color:rgba(168,199,189,.82);
  font-size:.76rem;
  letter-spacing:.04em;
}
.footer-col{display:flex;flex-direction:column}
.footer-col-title{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.9rem;
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.24em;
  color:var(--cyan);
}
.footer-col-title::before{
  content:"";
  width:14px;
  height:1px;
  background:var(--cyan);
  opacity:.8;
}
.footer-nav-list{display:grid;gap:.45rem}
.footer-nav-link{
  display:inline-block;
  color:var(--muted);
  font-size:.9rem;
  text-decoration:none;
  padding-block:.1rem;
  transition:color .2s ease,transform .2s ease;
}
.footer-nav-link:hover{color:var(--bone);transform:translateX(3px)}
.footer-contact{gap:.1rem}
.footer-contact-row{
  display:flex;
  flex-direction:column;
  gap:.1rem;
  padding-block:.45rem;
  border-bottom:1px solid var(--line-soft);
}
.footer-contact-row:last-child{border-bottom:0}
.footer-contact-label{
  font-size:.68rem;
  letter-spacing:.22em;
  color:rgba(168,199,189,.78);
}
.footer-contact-value{
  color:var(--bone);
  font-size:.9rem;
  line-height:1.6;
  word-break:break-word;
}
.footer-contact-value--mail{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-num);
  font-size:.82rem;
  color:var(--cyan);
}
.footer-copy{
  padding:.12rem .6rem;
  border-radius:var(--pill);
  border:1px solid var(--line);
  color:var(--muted);
  font-family:var(--font-body);
  font-size:.7rem;
  letter-spacing:.1em;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.footer-copy:hover{color:var(--cyan);border-color:var(--line-cyan)}
.footer-copy.is-copied{
  color:#20140A;
  background:var(--amber);
  border-color:var(--amber);
}
.footer-bottom{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-top:clamp(1.6rem,3vw,2.4rem);
  padding-top:1.1rem;
  border-top:1px solid var(--line-soft);
}
.footer-legal-links{display:flex;flex-wrap:wrap;gap:1.2rem}
.footer-legal-link{
  color:var(--muted);
  font-size:.78rem;
  letter-spacing:.06em;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.footer-legal-link:hover{color:var(--bone);border-bottom-color:var(--cyan)}

/* ---------- 排版组件 ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.26em;
  color:var(--cyan);
}
.eyebrow::before{
  content:"";
  width:18px;
  height:1px;
  background:var(--cyan);
}
.title-xl,
.title-lg,
.title-md{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.015em;
  color:var(--bone);
}
.title-xl{font-size:clamp(2.6rem,6.4vw,4.5rem)}
.title-lg{font-size:clamp(1.9rem,4vw,3rem)}
.title-md{font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.2}
.lede{
  font-size:1.02rem;
  line-height:1.85;
  color:var(--muted);
  max-width:62ch;
}
.muted-text{color:var(--muted)}
.rot-note{
  writing-mode:vertical-rl;
  font-size:.7rem;
  letter-spacing:.32em;
  color:rgba(168,199,189,.7);
  align-self:flex-start;
}
.data-num{
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.data-label{
  display:block;
  font-size:.68rem;
  letter-spacing:.22em;
  color:var(--muted);
  line-height:1.2;
}

/* ---------- 按钮与标签 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.74rem 1.4rem;
  border-radius:var(--pill);
  border:1px solid transparent;
  font-family:var(--font-body);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{
  background:var(--amber);
  color:#20140A;
  box-shadow:0 14px 30px -18px rgba(255,179,71,.95);
}
.btn--primary:hover{background:#FFC56E}
.btn--ghost{
  background:rgba(53,242,208,.06);
  border-color:var(--line-cyan);
  color:var(--cyan);
}
.btn--ghost:hover{background:rgba(53,242,208,.15);color:var(--bone)}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.26rem .8rem;
  border-radius:var(--pill);
  border:1px solid var(--line);
  background:rgba(23,26,28,.65);
  color:var(--muted);
  font-size:.72rem;
  letter-spacing:.1em;
  line-height:1.6;
}
.pill--cyan{color:var(--cyan);border-color:var(--line-cyan);background:rgba(53,242,208,.08)}
.pill--amber{color:var(--amber);border-color:rgba(255,179,71,.45);background:rgba(255,179,71,.1)}
.pill--red{color:#FF9A9A;border-color:rgba(214,69,69,.55);background:rgba(214,69,69,.14);font-weight:700}

/* ---------- 面板、卡片、数据 ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.1rem,2.2vw,1.8rem);
}
.card{
  background:linear-gradient(180deg,rgba(13,36,32,.92),rgba(23,26,28,.92));
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:clamp(1rem,2vw,1.5rem);
}
.card--float{
  border-color:rgba(53,242,208,.32);
  box-shadow:var(--float-shadow);
  transform:translateY(-16px);
}
.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  overflow:hidden;
}
.stat{background:rgba(13,36,32,.9);padding:.85rem 1rem}
.stat-value{
  display:block;
  font-family:var(--font-num);
  font-size:1.55rem;
  line-height:1.15;
  color:var(--bone);
  letter-spacing:-.02em;
}
.stat-label{
  display:block;
  margin-top:.3rem;
  font-size:.68rem;
  letter-spacing:.2em;
  color:var(--muted);
}
.trend-up{color:var(--cyan)}
.trend-down{color:var(--red)}

/* ---------- 标签页 ---------- */
.tabs{display:block}
.tabs-list{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  padding:.35rem;
  border-radius:var(--pill);
  border:1px solid var(--line-soft);
  background:rgba(23,26,28,.7);
  margin-bottom:1.2rem;
}
.tab-btn{
  padding:.5rem 1.1rem;
  border-radius:var(--pill);
  color:var(--muted);
  font-size:.86rem;
  letter-spacing:.06em;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.tab-btn:hover{color:var(--bone);background:rgba(53,242,208,.08)}
.tab-btn[aria-selected="true"]{
  background:var(--cyan);
  color:#041714;
  font-weight:700;
}
.tab-panel[hidden]{display:none}
.tab-panel{
  animation:none;
}
.tab-panel.is-active{
  animation:a8-panel-in .35s ease both;
}
@keyframes a8-panel-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

/* ---------- 面包屑 ---------- */
.breadcrumb{margin-bottom:1.2rem}
.breadcrumb-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  font-size:.74rem;
  letter-spacing:.12em;
  color:var(--muted);
}
.breadcrumb-list li+li::before{content:"/";color:rgba(168,199,189,.45)}
.breadcrumb-link{color:var(--muted);text-decoration:none;transition:color .2s ease}
.breadcrumb-link:hover{color:var(--cyan)}
.breadcrumb-current{color:var(--bone)}

/* ---------- 网格 ---------- */
.grid{display:grid;gap:clamp(1rem,2.2vw,1.75rem)}
.grid--split{grid-template-columns:5fr 7fr}
.grid--split-rev{grid-template-columns:7fr 5fr}
.grid--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- 图片容器基础 ---------- */
.media-frame{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--teal-grad);
  aspect-ratio:16/9;
}
.media-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(rgba(53,242,208,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(53,242,208,.1) 1px,transparent 1px);
  background-size:46px 46px;
  opacity:.75;
  pointer-events:none;
}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--square{aspect-ratio:1/1}
.media-frame--tall{aspect-ratio:4/5}
.media-frame__img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}
.media-frame__caption{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  padding:1rem 1.15rem .9rem;
  font-size:.76rem;
  letter-spacing:.06em;
  color:var(--bone);
  background:linear-gradient(0deg,rgba(7,17,15,.94),rgba(7,17,15,0));
}

/* ---------- 显现 ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease;
}
[data-reveal].is-visible{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .grid--split,.grid--split-rev{grid-template-columns:1fr}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-contact{grid-column:1 / -1}
}

@media (max-width:860px){
  .header-top-inner{padding-block:.5rem}
  .brand-tag{letter-spacing:.18em}
  .nav-inner{flex-direction:column;align-items:stretch;gap:0}
  .nav-toggle{display:inline-flex;align-self:flex-start;margin-block:.35rem}
  .site-nav{
    max-height:0;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    transition:max-height .35s ease,opacity .25s ease,visibility .25s ease;
  }
  .site-nav[data-open]{
    max-height:34rem;
    opacity:1;
    visibility:visible;
    margin-top:.5rem;
    overflow:visible;
  }
  .nav-list{flex-direction:column;align-items:stretch;gap:.2rem}
  .nav-link{
    display:block;
    padding:.72rem .95rem;
    font-size:1rem;
    border-radius:var(--r-sm);
  }
  .nav-link[aria-current="page"]::after{
    left:auto;
    right:1rem;
    bottom:50%;
    width:6px;
    height:6px;
    border-radius:50%;
    transform:translateY(50%);
  }
  .footer-grid{grid-template-columns:1fr}
  .footer-contact{grid-column:auto}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

@media (max-width:640px){
  .header-meta{gap:.6rem}
  .status-line{font-size:.7rem}
  .header-link{font-size:.72rem;padding:.3rem .75rem}
  .grid--even,.grid--3{grid-template-columns:1fr}
  .rot-note{display:none}
  .card--float{transform:none}
  .media-frame__caption{font-size:.72rem;padding:.8rem .9rem}
}

@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 !important;transform:none !important}
  .status-dot{animation:none !important;opacity:1 !important}
  .tab-panel.is-active{animation:none !important}
}