/* ===========================================================
   AB SPORTS CN · /assets/site.css
   共享外壳：tokens / reset / 中文排版 / 头部 / 页脚 / 基础组件
   =========================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --ab-green:#0C2B22;
  --ab-ink:#0A0F0D;
  --ab-panel:#1C3A31;
  --ab-lime:#C6FF3D;
  --ab-orange:#FF8A3D;
  --ab-cyan:#4FE0C0;
  --ab-snow:#F2F7F4;
  --ab-muted:#9BB3A8;
  --ab-amber:#FFE7A8;
  --ab-hair:rgba(155,179,168,.22);
  --ab-hair-strong:rgba(155,179,168,.4);
  --ab-shell-w:1240px;
  --ab-gutter:clamp(18px,4vw,48px);
  --ab-radius-xl:34px;
  --ab-radius-lg:26px;
  --ab-radius-md:18px;
  --ab-radius-pill:999px;
  --ab-header-h:120px;
  --ab-font-display:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --ab-font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ab-font-mono:ui-monospace,"SFMono-Regular","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
  --ab-ease:cubic-bezier(.22,.61,.36,1);
  --ab-shadow:0 26px 64px -38px rgba(0,0,0,.92);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background-color:var(--ab-green);
  color:var(--ab-snow);
  font-family:var(--ab-font-body);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;}
h1,h2,h3,h4,p,figure{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--ab-cyan);outline-offset:3px;border-radius:6px;}
::selection{background:var(--ab-lime);color:var(--ab-ink);}

.ab-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.ab-skip{
  position:fixed;left:14px;top:-72px;z-index:200;
  display:inline-block;padding:10px 20px;
  background:var(--ab-lime);color:var(--ab-ink);
  font-weight:800;font-size:14px;
  border-radius:0 0 var(--ab-radius-md) var(--ab-radius-md);
  transition:top .18s var(--ab-ease);
}
.ab-skip:focus{top:0;}

#main-content{scroll-margin-top:calc(var(--ab-header-h) + 14px);}

/* ---------- 3. 布局容器 ---------- */
.ab-shell{width:100%;max-width:var(--ab-shell-w);margin-inline:auto;padding-inline:var(--ab-gutter);}
.ab-section{padding-block:clamp(46px,7vw,96px);}
.ab-stack{display:grid;gap:clamp(12px,1.6vw,20px);}
.ab-grid{display:grid;gap:clamp(16px,2.4vw,30px);}
.ab-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.ab-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.ab-grid--split{grid-template-columns:minmax(0,300px) minmax(0,1fr);}
.ab-sticky{position:sticky;top:calc(var(--ab-header-h) + 18px);}

/* ---------- 4. 文字层级 ---------- */
.ab-display{
  font-family:var(--ab-font-display);
  font-weight:800;
  font-size:clamp(44px,7vw,96px);
  line-height:1.02;
  letter-spacing:-.012em;
  transform:skewX(-2deg);
  transform-origin:left bottom;
  padding-right:.12em;
}
.ab-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ab-muted);
}
.ab-eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--ab-lime);}
.ab-num,.ab-mono{font-family:var(--ab-font-mono);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0;}
.ab-num{font-size:1.4em;color:var(--ab-snow);}
.ab-label{
  display:inline-block;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ab-muted);
}
.ab-prose{max-width:66ch;font-size:17px;line-height:1.8;}
.ab-prose p+p{margin-top:1em;}
.ab-prose h2{margin-top:1.5em;font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.3;}
.ab-prose h3{margin-top:1.3em;font-size:19px;font-weight:800;}
.ab-prose strong{color:var(--ab-lime);font-weight:800;}
.ab-prose a{color:var(--ab-cyan);border-bottom:1px solid rgba(79,224,192,.45);}
.ab-prose a:hover{color:var(--ab-lime);border-color:var(--ab-lime);}

/* ---------- 5. 头部 ---------- */
.ab-header{
  position:sticky;top:0;z-index:80;
  background:var(--ab-ink);
  border-bottom:1px solid var(--ab-hair);
}
.ab-progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(155,179,168,.18);pointer-events:none;overflow:hidden;
}
.ab-progress__bar{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--ab-cyan),var(--ab-lime));
  transform:scaleX(0);transform-origin:0 50%;
}

.ab-topbar{background:var(--ab-ink);}
.ab-topbar__inner{
  display:flex;align-items:center;gap:clamp(12px,2vw,26px);
  min-height:68px;padding-block:10px;
  transition:min-height .24s var(--ab-ease);
}

.ab-brand{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;}
.ab-brand__mark{display:inline-flex;align-items:flex-end;gap:3px;height:24px;}
.ab-brand__mark i{display:block;width:4px;height:100%;border-radius:2px;background:var(--ab-lime);}
.ab-brand__mark i:nth-child(2){height:58%;background:var(--ab-cyan);}
.ab-brand__mark i:nth-child(3){height:80%;background:var(--ab-orange);}
.ab-brand__text{display:block;line-height:1.2;}
.ab-brand__name{display:block;font-family:var(--ab-font-display);font-weight:800;font-size:17px;letter-spacing:.02em;}
.ab-brand__sub{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ab-muted);}

.ab-status{
  display:none;align-items:center;gap:9px;margin:0;
  font-size:13px;color:var(--ab-muted);white-space:nowrap;
}
.ab-status__dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--ab-lime);box-shadow:0 0 0 4px rgba(198,255,61,.14);
}

.ab-topbar__actions{margin-left:auto;display:flex;align-items:center;gap:10px;}

.ab-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 20px;border-radius:var(--ab-radius-pill);
  border:1px solid transparent;
  font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1.2;
  cursor:pointer;
  transition:transform .18s var(--ab-ease),background-color .18s var(--ab-ease),color .18s var(--ab-ease),border-color .18s var(--ab-ease);
}
.ab-btn--primary{background:var(--ab-lime);color:var(--ab-ink);}
.ab-btn--primary:hover{background:#d9ff7a;transform:translateY(-2px);}
.ab-btn--ghost{background:rgba(155,179,168,.1);color:var(--ab-snow);border-color:var(--ab-hair);}
.ab-btn--ghost:hover{border-color:var(--ab-cyan);color:var(--ab-cyan);transform:translateY(-2px);}
.ab-btn__dual{display:inline-flex;flex-direction:column;gap:2px;width:15px;}
.ab-btn__dual i{display:block;height:2px;border-radius:2px;background:currentColor;}
.ab-btn__dual i:first-child{width:100%;opacity:.9;}
.ab-btn__dual i:last-child{width:58%;opacity:.6;}

.ab-navtoggle{
  margin-left:auto;display:none;place-items:center;
  width:46px;height:46px;border-radius:var(--ab-radius-md);
  background:rgba(155,179,168,.1);border:1px solid var(--ab-hair);
  cursor:pointer;
}
.ab-navtoggle__box{display:grid;gap:5px;width:18px;}
.ab-navtoggle__box i{display:block;height:2px;border-radius:2px;background:var(--ab-snow);transition:transform .2s var(--ab-ease),opacity .2s var(--ab-ease);}
.ab-header[data-open="true"] .ab-navtoggle__box i:nth-child(1){transform:translateY(7px) rotate(45deg);}
.ab-header[data-open="true"] .ab-navtoggle__box i:nth-child(2){opacity:0;}
.ab-header[data-open="true"] .ab-navtoggle__box i:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.ab-nav{background:var(--ab-green);border-top:1px solid rgba(155,179,168,.14);}
.ab-nav__inner{
  display:flex;align-items:center;gap:18px;
  min-height:52px;
  transition:min-height .24s var(--ab-ease);
}
.ab-nav__list{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.ab-nav__link{
  position:relative;display:inline-flex;align-items:center;
  padding:12px 15px;border-radius:var(--ab-radius-pill);
  font-size:15px;color:var(--ab-muted);
  transition:color .18s var(--ab-ease),background-color .18s var(--ab-ease),transform .18s var(--ab-ease);
}
.ab-nav__link:hover{color:var(--ab-snow);background:rgba(79,224,192,.1);transform:translateY(-2px);}
.ab-nav__link::after{
  content:"";position:absolute;left:15px;right:15px;bottom:7px;height:2px;
  border-radius:2px;background:transparent;
  transition:background-color .18s var(--ab-ease);
}
.ab-nav__link[aria-current="page"]{color:var(--ab-lime);background:rgba(198,255,61,.13);font-weight:700;}
.ab-nav__link[aria-current="page"]::after{background:var(--ab-lime);}
.ab-nav__meta{
  margin:0 0 0 auto;white-space:nowrap;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ab-muted);
}
.ab-nav__quick{display:none;}

.ab-header[data-scrolled="true"] .ab-topbar__inner{min-height:58px;}
.ab-header[data-scrolled="true"] .ab-nav__inner{min-height:44px;}
.ab-header[data-scrolled="true"] .ab-nav__link{padding-block:9px;}

/* ---------- 6. 页脚 ---------- */
.ab-footer{background:var(--ab-ink);border-top:1px solid var(--ab-hair);color:var(--ab-muted);}
.ab-footer__inner{padding-block:clamp(40px,6vw,72px) 22px;}
.ab-footer__grid{
  display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));
  gap:clamp(22px,3vw,40px);
  padding-bottom:clamp(26px,4vw,42px);
}
.ab-footer__brand{min-width:0;}
.ab-footer__note{margin-top:16px;max-width:34ch;font-size:14px;line-height:1.7;color:var(--ab-muted);}
.ab-footer__coltitle{
  margin:0 0 14px;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ab-cyan);
}
.ab-footer__list{display:grid;gap:10px;}
.ab-footer__link{
  display:inline-block;font-size:15px;color:var(--ab-muted);
  transition:color .18s var(--ab-ease),transform .18s var(--ab-ease);
}
.ab-footer__link:hover{color:var(--ab-lime);transform:translateX(2px);}

.ab-footer__meta{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(18px,3vw,34px);
  padding:clamp(20px,3vw,32px);
  margin-block:clamp(20px,3vw,34px);
  background:rgba(12,43,34,.72);
  border-radius:var(--ab-radius-lg);
}
.ab-footer__service{margin:0;font-size:14px;line-height:1.7;color:var(--ab-amber);max-width:40ch;}
.ab-footer__contact{display:grid;gap:12px;}
.ab-footer__contact li{
  display:grid;grid-template-columns:82px minmax(0,1fr);
  gap:12px;align-items:baseline;
  font-size:15px;color:var(--ab-snow);
}
.ab-footer__base{
  display:flex;flex-wrap:wrap;gap:8px 24px;
  justify-content:space-between;align-items:center;
  font-size:13px;color:var(--ab-muted);
}
.ab-footer__legal{margin:0;}
.ab-footer__legal .ab-mono{color:var(--ab-muted);}

/* ---------- 7. 基础组件 ---------- */
.ab-panel{
  position:relative;
  background:var(--ab-panel);
  border-radius:var(--ab-radius-lg);
  padding:clamp(18px,2.4vw,30px);
  box-shadow:var(--ab-shadow);
}
.ab-panel--dark{background:var(--ab-ink);}

.ab-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:var(--ab-radius-pill);
  background:rgba(79,224,192,.12);color:var(--ab-cyan);
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.ab-tag--lime{background:rgba(198,255,61,.14);color:var(--ab-lime);}
.ab-tag--orange{background:rgba(255,138,61,.16);color:var(--ab-orange);}

.ab-runway{
  display:grid;gap:14px;
  padding:clamp(16px,2vw,26px);
  background:rgba(10,15,13,.55);
  border-radius:var(--ab-radius-lg);
}
.ab-runway__row{
  display:grid;
  grid-template-columns:minmax(74px,auto) minmax(0,1fr) auto;
  align-items:center;gap:clamp(10px,1.6vw,20px);
}
.ab-runway__label{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ab-muted);white-space:nowrap;
}
.ab-runway__track{
  position:relative;height:10px;border-radius:var(--ab-radius-pill);
  background:rgba(155,179,168,.16);overflow:hidden;
}
.ab-runway__fill{
  display:block;height:100%;width:var(--ab-fill,50%);
  border-radius:inherit;
  background:linear-gradient(90deg,var(--ab-cyan),var(--ab-lime));
  transition:width .5s var(--ab-ease);
}
.ab-runway__fill--alt{background:linear-gradient(90deg,#FFC089,var(--ab-orange));}
.ab-runway__value{
  font-family:var(--ab-font-mono);font-weight:700;font-size:18px;
  font-variant-numeric:tabular-nums;color:var(--ab-snow);
}

.ab-media{
  position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:16 / 9;
  border-radius:var(--ab-radius-lg);
  background:linear-gradient(150deg,#0F3227 0%,#0A0F0D 72%);
}
.ab-media--wide{aspect-ratio:21 / 9;}
.ab-media--square{aspect-ratio:1 / 1;}
.ab-media--tall{aspect-ratio:4 / 5;}
.ab-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.06) brightness(.92);}
.ab-media__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(79,224,192,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,224,192,.16) 1px,transparent 1px);
  background-size:64px 64px;
  mix-blend-mode:screen;
}
.ab-media__caption{
  position:absolute;left:16px;bottom:14px;right:16px;
  font-size:12px;letter-spacing:.08em;color:var(--ab-snow);
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}

.ab-breadcrumb{font-size:13px;color:var(--ab-muted);}
.ab-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.ab-breadcrumb a{color:var(--ab-muted);}
.ab-breadcrumb a:hover{color:var(--ab-cyan);}
.ab-breadcrumb li+li::before{content:"/";margin-right:6px;color:rgba(155,179,168,.5);}
.ab-breadcrumb [aria-current="page"]{color:var(--ab-snow);}

/* ---------- 8. 滚动显现 ---------- */
.ab-js [data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ab-ease),transform .5s var(--ab-ease);
}
.ab-js [data-reveal].is-visible{opacity:1;transform:none;}

/* ---------- 9. 响应式 ---------- */
@media (max-width:1080px){
  .ab-status{display:none;}
  .ab-nav__meta{display:none;}
  .ab-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ab-footer__brand{grid-column:1 / -1;}
  .ab-footer__meta{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:900px){
  :root{--ab-header-h:96px;}
  .ab-topbar__actions{display:none;}
  .ab-navtoggle{display:grid;}

  .ab-nav{
    position:absolute;left:0;right:0;top:100%;
    max-height:0;overflow:hidden;
    border-top:1px solid var(--ab-hair);
    box-shadow:var(--ab-shadow);
    transition:max-height .34s var(--ab-ease);
  }
  .ab-header[data-open="true"] .ab-nav{max-height:min(78vh,620px);overflow-y:auto;}
  .ab-nav__inner{display:block;min-height:0;padding-block:18px 24px;}
  .ab-nav__list{display:grid;gap:6px;}
  .ab-nav__link{width:100%;justify-content:flex-start;padding:14px 16px;font-size:16px;}
  .ab-nav__link::after{left:16px;right:auto;width:26px;bottom:9px;}
  .ab-nav__meta{display:block;margin:16px 0 0;}
  .ab-nav__quick{display:grid;gap:10px;margin-top:18px;}
  .ab-nav__quick .ab-btn{width:100%;}

  .ab-grid--split,
  .ab-grid--2,
  .ab-grid--3{grid-template-columns:minmax(0,1fr);}
  .ab-sticky{position:static;top:auto;}
  .ab-display{transform:skewX(-1.4deg);}
}

@media (max-width:640px){
  body{font-size:15.5px;}
  .ab-footer__grid{grid-template-columns:minmax(0,1fr);}
  .ab-footer__contact li{grid-template-columns:minmax(0,1fr);gap:2px;}
  .ab-footer__base{flex-direction:column;align-items:flex-start;}
  .ab-runway__row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px;}
  .ab-runway__track{grid-column:1 / -1;}
}

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