/* =========================================================
   浩瀚体育网页 · 共享外壳 Site Kit
   文件：/assets/site.css
   负责：reset / 变量 / 中文排版 / 悬浮胶囊头部 / 斜切页脚
        通用按钮 / 面包屑 / 正文容器 / 网格 / 基础组件
   ========================================================= */

/* ---------- 01 · 设计令牌 ---------- */
:root{
  --hx-ink:#070B14;
  --hx-panel:#0E1626;
  --hx-panel-2:#121D31;
  --hx-line:#1C2940;
  --hx-line-strong:#2C3F60;
  --hx-orange:#FF5A1F;
  --hx-cyan:#22D3EE;
  --hx-gold:#D9A94A;
  --hx-white:#F2F5F9;
  --hx-mist:#8A97AB;
  --hx-paper:#FFFFFF;

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

  --hx-shell:min(1320px,100% - 32px);
  --hx-shell-wide:min(1600px,100% - 32px);
  --hx-shell-narrow:min(760px,100% - 32px);

  --hx-radius:14px;
  --hx-radius-sm:10px;
  --hx-gap:24px;

  --hx-shadow-card:0 16px 36px rgba(0,0,0,.42);
  --hx-shadow-lift:0 20px 44px rgba(0,0,0,.52);
  --hx-stack:6px 6px 0 0 rgba(28,41,64,.85), 12px 12px 0 0 rgba(28,41,64,.38);

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

/* ---------- 02 · reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:112px;
}
body{
  margin:0;
  background:var(--hx-ink);
  color:var(--hx-white);
  font-family:var(--hx-font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(900px 460px at 10% -10%, rgba(34,211,238,.13), transparent 62%),
    radial-gradient(760px 420px at 94% 2%, rgba(255,90,31,.11), transparent 64%),
    repeating-linear-gradient(90deg, rgba(28,41,64,.22) 0 1px, transparent 1px 96px);
  background-size:auto,auto,96px 100%;
}
img,svg,picture{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,dl,dd,dt,figure{margin:0}
i{font-style:normal}
table{border-collapse:collapse}

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

/* ---------- 03 · 跳转与进度 ---------- */
.hx-skip{
  position:fixed;
  left:18px;
  top:-90px;
  z-index:220;
  padding:10px 18px;
  border-radius:999px;
  background:var(--hx-orange);
  color:#0A0A0A;
  font-weight:700;
  font-size:14px;
  transition:top .22s var(--hx-ease);
}
.hx-skip:focus{top:18px}

.hx-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:2px;
  z-index:210;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--hx-orange),var(--hx-cyan));
  box-shadow:0 0 12px rgba(34,211,238,.5);
  pointer-events:none;
}

/* ---------- 04 · 悬浮胶囊头部 ---------- */
.hx-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:200;
  padding:20px 0 0;
  pointer-events:none;
}
.hx-header__inner{
  width:var(--hx-shell);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:auto;
}

.hx-brand,
.hx-nav,
.hx-readouts{
  background:rgba(14,22,38,.78);
  border:1px solid var(--hx-line);
  border-radius:999px;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 16px 34px rgba(0,0,0,.42);
}

.hx-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 16px 9px 10px;
  flex:0 0 auto;
}
.hx-brand__mark{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:8px;
  background:linear-gradient(140deg,var(--hx-orange),#B93208);
  color:#0A0A0A;
  font-family:var(--hx-font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
}
.hx-brand__text{
  font-family:var(--hx-font-display);
  font-size:17px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--hx-white);
}
.hx-brand__dot{
  position:relative;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--hx-cyan);
  box-shadow:0 0 10px rgba(34,211,238,.8);
}
.hx-brand__pulse{
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid rgba(34,211,238,.55);
  animation:hxPulse 2.4s var(--hx-ease) infinite;
}
@keyframes hxPulse{
  0%{transform:scale(.7);opacity:.9}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}

/* 导航胶囊 */
.hx-nav{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px;
  flex:0 0 auto;
}
.hx-nav__list{
  display:flex;
  align-items:center;
  gap:2px;
}
.hx-nav__link{
  display:inline-block;
  padding:9px 15px;
  border-radius:999px;
  font-family:var(--hx-font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.05em;
  color:#C3CDDB;
  transition:background .22s var(--hx-ease),color .22s var(--hx-ease);
}
.hx-nav__link:hover{background:rgba(34,211,238,.12);color:var(--hx-white)}
.hx-nav__link[aria-current="page"]{
  background:var(--hx-orange);
  color:#0A0A0A;
  box-shadow:0 8px 20px rgba(255,90,31,.32);
}
.hx-nav__current{
  display:none;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  font-family:var(--hx-font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--hx-white);
}
.hx-nav__current-icon{
  position:relative;
  width:12px;
  height:12px;
  border:2px solid var(--hx-cyan);
  border-radius:3px;
  flex:0 0 auto;
}
.hx-nav__current-icon::after{
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  top:3px;
  height:2px;
  background:var(--hx-cyan);
}

/* 状态读数 */
.hx-readouts{
  display:inline-flex;
  align-items:center;
  margin-left:auto;
  padding:8px 6px;
}
.hx-readout{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:0 14px;
}
.hx-readout + .hx-readout{border-left:1px solid var(--hx-line)}
.hx-readout__label{
  font-size:11px;
  letter-spacing:.14em;
  color:var(--hx-mist);
}
.hx-readout__value{
  font-family:var(--hx-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:14px;
  font-weight:700;
  color:var(--hx-cyan);
}

/* 头部行动按钮 */
.hx-header__cta{
  flex:0 0 auto;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* 移动导航按钮 */
.hx-nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  margin-left:auto;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(14,22,38,.82);
  border:1px solid var(--hx-line);
  color:var(--hx-white);
  font-family:var(--hx-font-mono);
  font-size:12px;
  letter-spacing:.12em;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 16px 34px rgba(0,0,0,.42);
}
.hx-nav-toggle__bars{display:grid;gap:5px;width:18px}
.hx-nav-toggle__bars i{
  display:block;
  height:2px;
  border-radius:2px;
  background:var(--hx-cyan);
  transition:transform .24s var(--hx-ease),opacity .24s var(--hx-ease);
}
.hx-nav-toggle[aria-expanded="true"] .hx-nav-toggle__bars i:first-child{transform:translateY(3.5px) rotate(45deg)}
.hx-nav-toggle[aria-expanded="true"] .hx-nav-toggle__bars i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- 05 · 页面容器与网格 ---------- */
.hx-main{
  position:relative;
  z-index:1;
  padding-top:114px;
  min-height:60vh;
}
.hx-container,
.hx-container--wide,
.hx-container--narrow{
  width:var(--hx-shell);
  margin-inline:auto;
}
.hx-container--wide{width:var(--hx-shell-wide)}
.hx-container--narrow{width:var(--hx-shell-narrow)}

.hx-section{padding:72px 0}
.hx-section--tight{padding:40px 0}
.hx-section--flush-top{padding-top:0}
.hx-section__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:34px;
}
.hx-section__head--stack{align-items:flex-start;flex-direction:column;gap:14px}

.hx-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--hx-gap);
}
.hx-span-3{grid-column:span 3}
.hx-span-4{grid-column:span 4}
.hx-span-6{grid-column:span 6}
.hx-span-8{grid-column:span 8}
.hx-span-12{grid-column:span 12}

.hx-divider{
  height:1px;
  border:0;
  margin:48px 0;
  background:linear-gradient(90deg,var(--hx-line),rgba(28,41,64,.15));
}

/* ---------- 06 · 排版 ---------- */
.hx-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--hx-font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--hx-cyan);
}
.hx-eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  background:var(--hx-cyan);
  border-radius:2px;
}
.hx-eyebrow--gold{color:var(--hx-gold)}
.hx-eyebrow--gold::before{background:var(--hx-gold)}

.hx-h1{
  font-family:var(--hx-font-display);
  font-size:clamp(32px,4.6vw,64px);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.01em;
  font-stretch:condensed;
}
.hx-h2{
  font-family:var(--hx-font-display);
  font-size:clamp(26px,3.2vw,44px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.005em;
  font-stretch:condensed;
}
.hx-h3{
  font-family:var(--hx-font-display);
  font-size:clamp(19px,2vw,24px);
  line-height:1.28;
  font-weight:700;
  letter-spacing:.01em;
}
.hx-lede{
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.72;
  color:#C6D0DE;
  max-width:64ch;
}
.hx-muted{color:var(--hx-mist);font-size:14px;line-height:1.7}
.hx-mono{
  font-family:var(--hx-font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

/* ---------- 07 · 卡片与材质 ---------- */
.hx-card{
  position:relative;
  background:var(--hx-panel);
  border:1px solid var(--hx-line);
  border-radius:var(--hx-radius);
  padding:26px;
  transition:transform .28s var(--hx-ease),box-shadow .28s var(--hx-ease),border-color .28s var(--hx-ease);
}
.hx-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--hx-shadow-lift);
  border-color:var(--hx-line-strong);
}
.hx-card--quiet{background:rgba(14,22,38,.55)}
.hx-card--focus{
  background:linear-gradient(150deg,#111C30 0%,#0A1220 72%);
  border-color:#26385A;
  padding-top:32px;
}
.hx-card--focus::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  border-radius:var(--hx-radius) var(--hx-radius) 0 0;
  background:linear-gradient(90deg,var(--hx-orange),var(--hx-cyan));
}
.hx-card--paper{
  background:var(--hx-paper);
  color:#0B1018;
  border-color:var(--hx-paper);
}
.hx-card--paper .hx-muted{color:#5A6678}
.hx-card--paper .hx-h3{color:#0B1018}

.hx-stack{box-shadow:var(--hx-stack),var(--hx-shadow-card)}

.hx-cut{clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%)}
.hx-cut--sm{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}

/* ---------- 08 · 焦点数字 ---------- */
.hx-metric{
  display:grid;
  gap:6px;
  padding:32px;
}
.hx-metric__value{
  font-family:var(--hx-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(44px,6.2vw,112px);
  line-height:.94;
  font-weight:700;
  letter-spacing:-.04em;
  color:var(--hx-white);
}
.hx-metric__unit{
  font-family:var(--hx-font-mono);
  font-size:20px;
  color:var(--hx-cyan);
  margin-left:8px;
}
.hx-metric__label{
  font-family:var(--hx-font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--hx-mist);
}
.hx-metric__rule{
  width:52px;
  height:3px;
  border-radius:3px;
  margin:10px 0 4px;
  background:var(--hx-cyan);
}
.hx-metric--gold .hx-metric__rule{background:var(--hx-gold)}
.hx-metric--gold .hx-metric__unit{color:var(--hx-gold)}

/* ---------- 09 · 标签、按钮 ---------- */
.hx-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border-radius:5px;
  border:1px solid var(--hx-line);
  background:rgba(242,245,249,.04);
  font-family:var(--hx-font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--hx-mist);
  white-space:nowrap;
}
.hx-tag--orange{border-color:rgba(255,90,31,.5);color:var(--hx-orange);background:rgba(255,90,31,.1)}
.hx-tag--cyan{border-color:rgba(34,211,238,.5);color:var(--hx-cyan);background:rgba(34,211,238,.1)}
.hx-tag--gold{border-color:rgba(217,169,74,.5);color:var(--hx-gold);background:rgba(217,169,74,.1)}
.hx-tag--paper{background:var(--hx-paper);color:#0B1018;border-color:var(--hx-paper)}

.hx-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 22px;
  border-radius:999px;
  border:1px solid transparent;
  font-family:var(--hx-font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  transition:transform .24s var(--hx-ease),box-shadow .24s var(--hx-ease),background .24s var(--hx-ease),color .24s var(--hx-ease),border-color .24s var(--hx-ease);
}
.hx-btn--primary{
  background:var(--hx-orange);
  color:#0A0A0A;
  box-shadow:0 12px 26px rgba(255,90,31,.3);
}
.hx-btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(255,90,31,.42)}
.hx-btn--ghost{
  background:rgba(242,245,249,.03);
  border-color:var(--hx-line-strong);
  color:var(--hx-white);
}
.hx-btn--ghost:hover{
  transform:translateY(-2px);
  border-color:var(--hx-cyan);
  color:var(--hx-cyan);
  box-shadow:0 12px 26px rgba(34,211,238,.18);
}
.hx-btn--small{padding:9px 16px;font-size:12px;letter-spacing:.06em}

/* ---------- 10 · 面包屑 ---------- */
.hx-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-family:var(--hx-font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--hx-mist);
}
.hx-breadcrumb li{display:inline-flex;align-items:center}
.hx-breadcrumb li + li::before{
  content:"/";
  margin-right:10px;
  color:var(--hx-line-strong);
}
.hx-breadcrumb a:hover{color:var(--hx-cyan)}
.hx-breadcrumb [aria-current="page"]{color:var(--hx-white)}

/* ---------- 11 · 胶囊筛选 ---------- */
.hx-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.hx-pill{
  padding:8px 15px;
  border-radius:999px;
  border:1px solid var(--hx-line);
  background:rgba(14,22,38,.6);
  font-family:var(--hx-font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--hx-mist);
  transition:background .22s var(--hx-ease),color .22s var(--hx-ease),border-color .22s var(--hx-ease);
}
.hx-pill:hover{border-color:var(--hx-line-strong);color:var(--hx-white)}
.hx-pill[aria-pressed="true"]{
  background:var(--hx-cyan);
  border-color:var(--hx-cyan);
  color:#04222A;
  font-weight:700;
}

/* ---------- 12 · 横向赛季时间轴 ---------- */
.hx-rail{
  display:flex;
  overflow-x:auto;
  border-top:1px solid var(--hx-line);
  border-bottom:1px solid var(--hx-line);
  scrollbar-width:thin;
}
.hx-rail__item{
  position:relative;
  flex:1 0 auto;
  min-width:148px;
  padding:20px 20px 18px;
  border-left:1px solid var(--hx-line);
  transition:background .24s var(--hx-ease);
}
.hx-rail__item:last-child{border-right:1px solid var(--hx-line)}
.hx-rail__item:hover{background:rgba(34,211,238,.06)}
.hx-rail__item::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:3px;
  background:transparent;
}
.hx-rail__item[data-active="true"]::before{background:var(--hx-gold)}
.hx-rail__num{
  display:block;
  font-family:var(--hx-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:22px;
  font-weight:700;
  color:var(--hx-cyan);
  letter-spacing:-.02em;
}
.hx-rail__label{
  display:block;
  margin-top:4px;
  font-size:13px;
  color:var(--hx-mist);
}

/* ---------- 13 · 页内索引与列表 ---------- */
.hx-review{
  position:sticky;
  top:118px;
  display:grid;
  gap:2px;
}
.hx-review__link{
  display:block;
  padding:9px 12px;
  border-left:2px solid var(--hx-line);
  font-size:14px;
  color:var(--hx-mist);
  transition:color .22s var(--hx-ease),border-color .22s var(--hx-ease),background .22s var(--hx-ease);
}
.hx-review__link:hover{color:var(--hx-white);border-color:var(--hx-line-strong)}
.hx-review__link[aria-current="true"]{
  color:var(--hx-white);
  border-color:var(--hx-orange);
  background:rgba(255,90,31,.09);
}

.hx-list{display:grid}
.hx-list__item{
  display:grid;
  gap:10px;
  padding:22px 0;
  border-bottom:1px solid var(--hx-line);
  transition:border-color .24s var(--hx-ease);
}
.hx-list__item:hover{border-color:var(--hx-line-strong)}
.hx-list__item:hover .hx-h3{color:var(--hx-cyan)}
.hx-list__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  font-family:var(--hx-font-mono);
  font-size:12px;
  color:var(--hx-mist);
  letter-spacing:.06em;
}

/* ---------- 14 · 手风琴 ---------- */
.hx-acc{
  border:1px solid var(--hx-line);
  border-radius:var(--hx-radius);
  background:var(--hx-panel);
  overflow:hidden;
  transition:border-color .24s var(--hx-ease);
}
.hx-acc + .hx-acc{margin-top:12px}
.hx-acc[open]{border-color:var(--hx-line-strong)}
.hx-acc__head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 22px;
  cursor:pointer;
  list-style:none;
}
.hx-acc__head::-webkit-details-marker{display:none}
.hx-acc__head::after{
  content:"";
  width:9px;
  height:9px;
  margin-left:auto;
  border-right:2px solid var(--hx-cyan);
  border-bottom:2px solid var(--hx-cyan);
  transform:rotate(45deg);
  transition:transform .26s var(--hx-ease);
  flex:0 0 auto;
}
.hx-acc[open] .hx-acc__head::after{transform:rotate(-135deg)}
.hx-acc__idx{
  font-family:var(--hx-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:13px;
  color:var(--hx-cyan);
  letter-spacing:.08em;
}
.hx-acc__title{
  font-family:var(--hx-font-display);
  font-size:17px;
  font-weight:700;
  letter-spacing:.02em;
}
.hx-acc__body{
  padding:0 22px 22px 58px;
  color:#C6D0DE;
  font-size:15px;
}

/* ---------- 15 · 图片容器基础规则 ---------- */
.hx-media{
  position:relative;
  overflow:hidden;
  border-radius:var(--hx-radius);
  border:1px solid var(--hx-line);
  background:linear-gradient(150deg,#101B2E,#0A1120);
  isolation:isolate;
}
.hx-media > img,
.hx-media > svg,
.hx-media > picture > img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hx-media--16x9{aspect-ratio:16/9}
.hx-media--4x3{aspect-ratio:4/3}
.hx-media--1x1{aspect-ratio:1/1}
.hx-media--3x4{aspect-ratio:3/4}
.hx-media--free{min-height:220px}
.hx-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(242,245,249,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,245,249,.05) 1px,transparent 1px);
  background-size:34px 34px;
}
.hx-media--empty::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:repeating-linear-gradient(135deg,rgba(34,211,238,.09) 0 10px,transparent 10px 20px);
}
.hx-media__layer{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(7,11,20,.12),rgba(7,11,20,.78));
}
.hx-media__cap{
  position:absolute;
  left:16px;
  right:16px;
  bottom:14px;
  z-index:3;
  font-family:var(--hx-font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--hx-mist);
}

/* ---------- 16 · 显现与回到顶部 ---------- */
.hx-reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--hx-ease),transform .5s var(--hx-ease);
}
.hx-reveal[data-inview="true"]{opacity:1;transform:none}

.hx-toTop{
  position:fixed;
  right:20px;
  bottom:24px;
  z-index:190;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 18px;
  border-radius:999px;
  background:rgba(14,22,38,.86);
  border:1px solid var(--hx-line-strong);
  color:var(--hx-white);
  font-family:var(--hx-font-mono);
  font-size:12px;
  letter-spacing:.1em;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 16px 34px rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .26s var(--hx-ease),transform .26s var(--hx-ease),visibility .26s;
}
.hx-toTop[data-visible="true"]{opacity:1;visibility:visible;transform:none}
.hx-toTop:hover{border-color:var(--hx-cyan);color:var(--hx-cyan)}
.hx-toTop__arrow{
  width:9px;
  height:9px;
  border-left:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:rotate(45deg);
}

/* ---------- 17 · 斜切三段式页脚 ---------- */
.hx-footer{
  position:relative;
  z-index:1;
  margin-top:96px;
  background:linear-gradient(180deg,#0A1120 0%,#070B14 100%);
  border-top:1px solid var(--hx-line);
}
.hx-footer::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,var(--hx-orange),var(--hx-cyan) 46%,rgba(7,11,20,0) 88%);
}
.hx-footer__inner{width:var(--hx-shell);margin-inline:auto}

.hx-footer__strip{
  background:rgba(14,22,38,.7);
  border-bottom:1px solid var(--hx-line);
  clip-path:polygon(0 16px,100% 0,100% 100%,0 100%);
  padding:32px 0 24px;
}
.hx-footer__strip-row{
  display:grid;
  gap:20px;
  align-items:center;
}
.hx-footer__strip-title{
  font-family:var(--hx-font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--hx-mist);
}
.hx-footer__stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:18px;
}
.hx-footer__stat dt{
  font-family:var(--hx-font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--hx-mist);
}
.hx-footer__stat dd{
  font-family:var(--hx-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:26px;
  font-weight:700;
  color:var(--hx-cyan);
  letter-spacing:-.02em;
}
.hx-footer__stat:nth-child(3) dd{color:var(--hx-white)}
.hx-footer__stat:nth-child(4) dd{color:var(--hx-orange)}

.hx-footer__main{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:36px;
  padding:54px 0 40px;
}
.hx-footer__brand{display:grid;gap:16px;justify-items:start}
.hx-brand--footer{padding:9px 16px 9px 10px}
.hx-footer__note{
  max-width:34ch;
  font-size:14px;
  line-height:1.7;
  color:var(--hx-mist);
}
.hx-footer__note--tight{margin-top:12px;font-size:13px}
.hx-footer__col-title{
  font-family:var(--hx-font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--hx-white);
  margin-bottom:16px;
}
.hx-footer__links{display:grid;gap:10px;font-size:14px}
.hx-footer__links a{color:var(--hx-mist);transition:color .22s var(--hx-ease)}
.hx-footer__links a:hover{color:var(--hx-cyan)}
.hx-footer__links--plain span{color:var(--hx-mist);font-size:14px;line-height:1.7}

.hx-footer__legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 0 34px;
  border-top:1px solid var(--hx-line);
  font-family:var(--hx-font-mono);
  font-size:12px;
  letter-spacing:.05em;
  color:var(--hx-mist);
}

/* ---------- 18 · 平板 ---------- */
@media (max-width:1024px){
  :root{--hx-gap:20px}
  .hx-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hx-span-3,.hx-span-4{grid-column:span 3}
  .hx-span-6,.hx-span-8,.hx-span-12{grid-column:span 6}
  .hx-footer__main{grid-template-columns:1fr 1fr;gap:32px}
  .hx-review{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto}
  .hx-section{padding:56px 0}
}

/* ---------- 19 · 手机与移动导航 ---------- */
@media (max-width:959px){
  .hx-header{padding-top:12px}
  .hx-header__inner{gap:8px}
  .hx-readouts,
  .hx-header__cta{display:none}
  .hx-nav-toggle{display:inline-flex}

  .hx-nav{
    position:fixed;
    left:16px;
    right:16px;
    top:78px;
    display:block;
    padding:12px;
    border-radius:20px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .22s var(--hx-ease),transform .22s var(--hx-ease),visibility .22s linear;
  }
  .hx-nav[data-open="true"]{opacity:1;visibility:visible;transform:none}
  .hx-nav__list{display:grid;gap:4px}
  .hx-nav__link{
    display:block;
    padding:12px 16px;
    border-radius:12px;
    font-size:15px;
    color:var(--hx-white);
  }
  .hx-nav__link[aria-current="page"]{color:#0A0A0A}
  .hx-nav__current{display:none !important}
  .hx-main{padding-top:96px}
  .hx-toTop{right:14px;bottom:16px;padding:10px 14px}
}

@media (min-width:960px){
  .hx-nav__current{display:none}
  [data-condensed="true"] .hx-nav__list{display:none}
  [data-condensed="true"] .hx-nav:hover .hx-nav__list,
  [data-condensed="true"] .hx-nav:focus-within .hx-nav__list{display:flex}
  [data-condensed="true"] .hx-nav:hover .hx-nav__current,
  [data-condensed="true"] .hx-nav:focus-within .hx-nav__current{display:none}
  [data-condensed="true"] .hx-nav__current{display:inline-flex}
  [data-condensed="true"] .hx-readouts{display:none}
}

@media (max-width:640px){
  :root{--hx-gap:16px}
  .hx-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  [class*="hx-span-"]{grid-column:1 / -1}
  .hx-card{padding:20px}
  .hx-metric{padding:24px}
  .hx-section{padding:44px 0}
  .hx-footer__main{grid-template-columns:1fr;gap:28px;padding:40px 0 28px}
  .hx-footer__legal{padding-bottom:26px}
  .hx-acc__body{padding:0 18px 20px 18px}
}

/* ---------- 20 · 动效降级 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hx-reveal{opacity:1;transform:none}
  .hx-card:hover,
  .hx-btn:hover,
  .hx-toTop{transform:none}
}