/* ==========================================================
   777棋牌电玩 · 城市坐标 Site Kit  /assets/site.css
   共享外壳：reset / 变量 / 中文排版 / 头部 / 页脚 / 通用组件
   ========================================================== */

/* ---------- 0. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body, h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; }

/* ---------- 1. Tokens ---------- */
:root {
  --cx-ink: #0B0F14;
  --cx-card: #121A22;
  --cx-teal: #0E2B2A;
  --cx-indigo: #2A1230;
  --cx-wine: #3A1226;
  --cx-lime: #C6FF3D;
  --cx-violet: #8B5CF6;
  --cx-gold: #F5C36B;
  --cx-white: #F2F6F4;
  --cx-mute: #8FA0A8;
  --cx-coral: #FF6B84;

  --cx-line: rgba(143, 160, 168, .18);
  --cx-line-soft: rgba(143, 160, 168, .10);
  --cx-line-strong: rgba(198, 255, 61, .45);

  --cx-radius: 28px;
  --cx-radius-sm: 18px;
  --cx-pill: 999px;
  --cx-gap: 24px;
  --cx-max: 1240px;
  --cx-pad: clamp(18px, 4vw, 44px);

  --cx-font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", system-ui, sans-serif;
  --cx-font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", system-ui, sans-serif;
  --cx-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --cx-ease: cubic-bezier(.22, 1, .36, 1);
  --cx-dur: 420ms;
}

/* ---------- 2. Base ---------- */
body {
  min-height: 100vh;
  color: var(--cx-white);
  font-family: var(--cx-font-body);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .01em;
  background-color: var(--cx-ink);
  background-image:
    radial-gradient(58% 46% at 84% -6%, rgba(139, 92, 246, .22), transparent 72%),
    radial-gradient(46% 38% at 4% 2%, rgba(14, 43, 42, .85), transparent 70%),
    radial-gradient(48% 40% at 52% 106%, rgba(58, 18, 38, .70), transparent 72%),
    repeating-linear-gradient(to right, rgba(143, 160, 168, .05) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(143, 160, 168, .05) 0 1px, transparent 1px 24px);
  overflow-x: hidden;
}
::selection { background: var(--cx-lime); color: var(--cx-ink); }

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

/* ---------- 3. 排版层级 ---------- */
.cx-display {
  font-family: var(--cx-font-display);
  font-weight: 800;
  font-size: clamp(48px, 8vw, 120px);
  line-height: .98;
  letter-spacing: -.02em;
  transform: skewX(-2deg);
  transform-origin: left bottom;
  color: var(--cx-white);
}
.cx-h2 {
  font-family: var(--cx-font-display);
  font-size: clamp(28px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--cx-white);
}
.cx-h3 {
  font-family: var(--cx-font-display);
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.25;
  color: var(--cx-white);
}
.cx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cx-font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cx-lime);
}
.cx-lede {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.8;
  color: var(--cx-white);
  opacity: .84;
  max-width: 62ch;
}
.cx-mono {
  font-family: var(--cx-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* ---------- 4. 布局工具 ---------- */
.cx-container {
  width: 100%;
  max-width: var(--cx-max);
  margin-inline: auto;
  padding-inline: var(--cx-pad);
}
.cx-section { padding-block: clamp(48px, 8vw, 110px); }

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

.cx-glow {
  position: absolute;
  width: clamp(220px, 34vw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(46px);
  opacity: .5;
  background: radial-gradient(circle, rgba(198, 255, 61, .34), rgba(139, 92, 246, .16) 55%, transparent 72%);
  z-index: 0;
}

/* ---------- 5. 按钮 ---------- */
.cx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--cx-pill);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: transform .3s var(--cx-ease), box-shadow .3s var(--cx-ease), color .3s var(--cx-ease), background-color .3s var(--cx-ease);
}
.cx-btn--lime {
  color: var(--cx-ink);
  background: linear-gradient(115deg, var(--cx-lime) 0%, #A8F02A 60%, #8FE018 100%);
  box-shadow: inset 0 0 0 1px rgba(198, 255, 61, .55), 0 12px 30px -16px rgba(198, 255, 61, .95);
}
.cx-btn--lime:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(198, 255, 61, .9), 0 18px 38px -14px rgba(198, 255, 61, .85); }
.cx-btn--ghost {
  color: var(--cx-white);
  background: rgba(18, 26, 34, .82);
  box-shadow: inset 0 0 0 1px var(--cx-line);
}
.cx-btn--ghost:hover { color: var(--cx-lime); transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--cx-line-strong); }

/* ---------- 6. 卡片与胶囊 ---------- */
.cx-card {
  position: relative;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--cx-radius);
  border: 1px solid var(--cx-line);
  background: linear-gradient(158deg, rgba(18, 26, 34, .96), rgba(18, 26, 34, .70));
  overflow: hidden;
  transition: transform .35s var(--cx-ease), border-color .35s var(--cx-ease), box-shadow .35s var(--cx-ease);
}
.cx-card--teal { background: linear-gradient(158deg, rgba(14, 43, 42, .96), rgba(18, 26, 34, .84)); border-color: rgba(198, 255, 61, .22); }
.cx-card--indigo { background: linear-gradient(158deg, rgba(42, 18, 48, .96), rgba(18, 26, 34, .84)); border-color: rgba(139, 92, 246, .30); }
.cx-card--wine { background: linear-gradient(158deg, rgba(58, 18, 38, .96), rgba(18, 26, 34, .84)); border-color: rgba(255, 107, 132, .26); }
.cx-card:hover { transform: translateY(-4px); border-color: var(--cx-line-strong); }

.cx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 12px;
  border-radius: var(--cx-pill);
  border: 1px solid var(--cx-line);
  background: rgba(18, 26, 34, .70);
  color: var(--cx-mute);
  font-family: var(--cx-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
}
.cx-chip--lime { color: var(--cx-lime); border-color: rgba(198, 255, 61, .45); background: rgba(198, 255, 61, .10); }
.cx-chip--gold { color: var(--cx-gold); border-color: rgba(245, 195, 107, .40); background: rgba(245, 195, 107, .08); }
.cx-chip--coral { color: var(--cx-coral); border-color: rgba(255, 107, 132, .42); background: rgba(255, 107, 132, .08); }

/* ---------- 7. 面包屑 ---------- */
.cx-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 16px;
  font-family: var(--cx-font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--cx-mute);
}
.cx-crumbs__link { color: var(--cx-mute); transition: color .22s var(--cx-ease); }
.cx-crumbs__link:hover { color: var(--cx-lime); }
.cx-crumbs__sep { color: rgba(143, 160, 168, .45); }
.cx-crumbs__now { color: var(--cx-lime); }

/* ---------- 8. 图片容器基础规则 ---------- */
.cx-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--cx-radius);
  border: 1px solid var(--cx-line);
  background:
    radial-gradient(120% 96% at 18% 0%, rgba(139, 92, 246, .34), transparent 62%),
    radial-gradient(90% 80% at 92% 100%, rgba(198, 255, 61, .16), transparent 66%),
    linear-gradient(162deg, var(--cx-teal), var(--cx-ink) 72%);
}
.cx-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.cx-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, rgba(198, 255, 61, .12) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, rgba(198, 255, 61, .12) 0 1px, transparent 1px 48px);
  mix-blend-mode: screen;
  opacity: .45;
}
.cx-media--wide { aspect-ratio: 21 / 9; }
.cx-media--square { aspect-ratio: 1 / 1; }
.cx-media--tall { aspect-ratio: 3 / 4; }
.cx-media__tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--cx-pill);
  background: rgba(11, 15, 20, .82);
  border: 1px solid rgba(198, 255, 61, .38);
  color: var(--cx-lime);
  font-family: var(--cx-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
}

/* ---------- 9. 跳转链接 ---------- */
.cx-skip {
  position: absolute;
  left: 14px;
  top: -80px;
  z-index: 300;
  padding: 10px 20px;
  border-radius: 0 0 16px 16px;
  background: var(--cx-lime);
  color: var(--cx-ink);
  font-weight: 700;
  font-size: 14px;
  transition: top .24s var(--cx-ease);
}
.cx-skip:focus { top: 0; }

/* ---------- 10. Header ---------- */
.cx-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: linear-gradient(180deg, #0B0F14 0%, #0B0F14 78%, #0A0E13 100%);
  border-bottom: 1px solid var(--cx-line);
  box-shadow: 0 18px 40px -34px rgba(139, 92, 246, .9);
}
.cx-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(22% 140% at 12% 0%, rgba(198, 255, 61, .10), transparent 70%),
    radial-gradient(26% 160% at 88% 0%, rgba(139, 92, 246, .16), transparent 72%);
}
.cx-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  width: 100%;
  max-width: var(--cx-max);
  margin-inline: auto;
  padding: 10px var(--cx-pad);
  min-height: 68px;
}

/* 品牌 */
.cx-brand {
  position: relative;
  z-index: 85;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  border-radius: var(--cx-pill);
  border: 1px solid transparent;
  transition: border-color .28s var(--cx-ease), background-color .28s var(--cx-ease);
}
.cx-brand:hover { border-color: var(--cx-line); background: rgba(18, 26, 34, .85); }
.cx-brand__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--cx-lime), var(--cx-violet) 58%, var(--cx-wine) 88%, var(--cx-lime));
  box-shadow: 0 0 20px rgba(198, 255, 61, .32);
  flex: 0 0 auto;
}
.cx-brand__mark::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--cx-ink);
}
.cx-brand__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cx-lime);
  box-shadow: 0 0 12px var(--cx-lime);
}
.cx-brand__name {
  font-family: var(--cx-font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .08em;
  color: var(--cx-white);
}
.cx-brand__ver {
  font-family: var(--cx-font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: var(--cx-pill);
  color: var(--cx-lime);
  background: rgba(198, 255, 61, .12);
  border: 1px solid rgba(198, 255, 61, .38);
}
.cx-brand--foot { padding-left: 0; }
.cx-brand--foot .cx-brand__name { font-size: 20px; letter-spacing: .12em; }

/* 命令栏导航 */
.cx-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.cx-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--cx-pill);
  border: 1px solid var(--cx-line);
  background: rgba(18, 26, 34, .74);
}
.cx-nav__item { display: flex; }
.cx-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--cx-pill);
  color: var(--cx-mute);
  transition: color .26s var(--cx-ease), background-color .26s var(--cx-ease), box-shadow .26s var(--cx-ease);
}
.cx-nav__idx {
  font-family: var(--cx-font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  opacity: .6;
}
.cx-nav__label {
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--cx-white);
  transition: color .26s var(--cx-ease);
}
.cx-nav__link:hover,
.cx-nav__link:focus-visible { background: rgba(139, 92, 246, .20); }
.cx-nav__link:hover .cx-nav__label { color: var(--cx-lime); }
.cx-nav__link[aria-current="page"] {
  background: rgba(198, 255, 61, .12);
  box-shadow: inset 0 0 0 1px rgba(198, 255, 61, .48);
}
.cx-nav__link[aria-current="page"] .cx-nav__label { color: var(--cx-lime); }
.cx-nav__link[aria-current="page"] .cx-nav__idx { color: var(--cx-lime); opacity: 1; }
.cx-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--cx-lime);
  box-shadow: 0 0 10px var(--cx-lime);
}
.cx-nav__cta { display: none; }

/* 状态灯 */
.cx-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 190px;
  padding: 5px 12px;
  border-radius: var(--cx-pill);
  border: 1px solid var(--cx-line-soft);
  font-family: var(--cx-font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--cx-mute);
  white-space: nowrap;
  overflow: hidden;
}
.cx-status__pulse {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cx-lime);
  box-shadow: 0 0 10px rgba(198, 255, 61, .85);
}
.cx-status__text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx-header__cta { flex: 0 0 auto; }

/* 滚动进度 */
.cx-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: rgba(143, 160, 168, .14);
  overflow: hidden;
}
.cx-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cx-violet), var(--cx-lime));
  box-shadow: 0 0 12px rgba(198, 255, 61, .75);
  transition: transform .12s linear;
}

/* 移动端悬浮坐标点 */
.cx-navtoggle {
  position: relative;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 15px;
  border-radius: var(--cx-pill);
  border: 1px solid rgba(198, 255, 61, .38);
  background: rgba(18, 26, 34, .92);
  color: var(--cx-white);
  font-family: var(--cx-font-mono);
  font-size: 12px;
  letter-spacing: .12em;
}
.cx-navtoggle__bars { display: grid; gap: 3px; width: 16px; }
.cx-navtoggle__bars i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--cx-lime);
  transition: transform .3s var(--cx-ease), opacity .3s var(--cx-ease);
}
.cx-navtoggle[aria-expanded="true"] .cx-navtoggle__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.cx-navtoggle[aria-expanded="true"] .cx-navtoggle__bars i:nth-child(2) { opacity: 0; }
.cx-navtoggle[aria-expanded="true"] .cx-navtoggle__bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- 11. Footer ---------- */
.cx-footer {
  position: relative;
  margin-top: clamp(56px, 9vw, 120px);
  overflow: hidden;
  border-top: 1px solid rgba(245, 195, 107, .18);
  background:
    radial-gradient(96% 130% at 10% -16%, rgba(58, 18, 38, .96), transparent 62%),
    radial-gradient(76% 110% at 94% -6%, rgba(42, 18, 48, .92), transparent 64%),
    linear-gradient(180deg, #0B0F14 0%, #080B0F 100%);
}
.cx-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, rgba(143, 160, 168, .06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(143, 160, 168, .06) 0 1px, transparent 1px 24px);
  opacity: .8;
}
.cx-footer__aura {
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(198, 255, 61, .20), rgba(139, 92, 246, .12) 52%, transparent 70%);
  filter: blur(10px);
}
.cx-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1.25fr 1fr 1.15fr;
  gap: clamp(22px, 3vw, 44px);
  width: 100%;
  max-width: var(--cx-max);
  margin-inline: auto;
  padding: clamp(38px, 6vw, 74px) var(--cx-pad) 30px;
}
.cx-footer__brand {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 20px;
  margin-bottom: 6px;
  border-bottom: 1px dashed rgba(245, 195, 107, .22);
}
.cx-footer__coord {
  font-family: var(--cx-font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--cx-gold);
  opacity: .78;
}
.cx-footer__group { min-width: 0; }
.cx-footer__title {
  font-family: var(--cx-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cx-gold);
  margin-bottom: 16px;
}
.cx-footer__list { display: grid; gap: 9px; }
.cx-footer__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-size: 14px;
  color: var(--cx-white);
  opacity: .84;
  transition: color .24s var(--cx-ease), opacity .24s var(--cx-ease), padding-left .24s var(--cx-ease);
}
.cx-footer__link::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cx-violet);
  opacity: .6;
  transition: background-color .24s var(--cx-ease), box-shadow .24s var(--cx-ease);
}
.cx-footer__link:hover,
.cx-footer__link:focus-visible { color: var(--cx-lime); opacity: 1; padding-left: 4px; }
.cx-footer__link:hover::before { background: var(--cx-lime); box-shadow: 0 0 10px var(--cx-lime); }

.cx-footer__item { display: grid; gap: 2px; }
.cx-footer__key {
  font-family: var(--cx-font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--cx-mute);
  text-transform: uppercase;
}
.cx-footer__data {
  font-family: var(--cx-font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--cx-white);
  word-break: break-word;
}
.cx-footer__text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--cx-mute);
  max-width: 26ch;
}

.cx-footer__legal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  width: 100%;
  max-width: var(--cx-max);
  margin-inline: auto;
  padding: 18px var(--cx-pad) 36px;
  border-top: 1px solid var(--cx-line);
  font-family: var(--cx-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--cx-mute);
}
.cx-footer__copy { color: var(--cx-white); opacity: .8; }
.cx-footer__icp { color: var(--cx-mute); }
.cx-footer__note { color: var(--cx-mute); }

/* ---------- 12. 显现动效协议 ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cx-js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--cx-dur) var(--cx-ease),
      transform var(--cx-dur) var(--cx-ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .cx-js [data-reveal].cx-in {
    opacity: 1;
    transform: none;
  }
  .cx-card:hover { box-shadow: 0 24px 48px -34px rgba(198, 255, 61, .55); }
  .cx-status__pulse { animation: cx-breathe 7s ease-in-out infinite; }
  .cx-brand__dot { animation: cx-breathe 9s ease-in-out infinite; }
}
@keyframes cx-breathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* ---------- 13. 响应式 ---------- */
@media (max-width: 1180px) {
  .cx-nav__idx { display: none; }
  .cx-nav__link { padding: 0 11px; }
  .cx-status { display: none; }
}

@media (max-width: 980px) {
  html.cx-lock,
  html.cx-lock body { overflow: hidden; }

  .cx-header__inner { justify-content: space-between; gap: 10px; min-height: 64px; }
  .cx-navtoggle { display: inline-flex; }
  .cx-header__cta { display: none; }
  .cx-brand__ver { display: none; }

  .cx-nav {
    position: fixed;
    inset: 0;
    z-index: 75;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 18px;
    padding: calc(74px + env(safe-area-inset-top, 0px)) var(--cx-pad) calc(40px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(60% 46% at 84% 0%, rgba(139, 92, 246, .28), transparent 70%),
      radial-gradient(52% 40% at 6% 8%, rgba(14, 43, 42, .95), transparent 72%),
      radial-gradient(60% 42% at 50% 104%, rgba(58, 18, 38, .9), transparent 74%),
      #0B0F14;
    border-bottom: 1px solid var(--cx-line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .3s var(--cx-ease), transform .3s var(--cx-ease), visibility .3s linear;
  }
  .cx-nav[data-open] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .cx-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .cx-nav__item { display: block; }
  .cx-nav__link {
    display: flex;
    justify-content: flex-start;
    min-height: 60px;
    padding: 0 18px;
    border-radius: 20px;
    border: 1px solid var(--cx-line);
    background: rgba(18, 26, 34, .74);
  }
  .cx-nav__idx { display: inline; font-size: 11px; opacity: .7; }
  .cx-nav__label { font-size: 16px; letter-spacing: .04em; }
  .cx-nav__link[aria-current="page"]::after { left: 18px; bottom: auto; top: 50%; margin-left: 0; margin-top: -3px; }
  .cx-nav__link[aria-current="page"] { padding-left: 32px; }
  .cx-nav__cta { display: inline-flex; width: 100%; margin-top: 6px; }
}

@media (max-width: 900px) {
  .cx-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-footer__brand { grid-column: 1 / -1; }
  .cx-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cx-span-4 { grid-column: span 3; }
  .cx-span-6 { grid-column: span 6; }
  .cx-span-8 { grid-column: span 6; }
}

@media (max-width: 600px) {
  body { font-size: 15.5px; }
  .cx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .cx-span-4,
  .cx-span-6,
  .cx-span-8 { grid-column: span 4; }
  .cx-footer__inner { grid-template-columns: 1fr; gap: 26px; }
  .cx-footer__brand { align-items: flex-start; }
  .cx-footer__coord { letter-spacing: .12em; }
  .cx-footer__legal { gap: 6px 16px; font-size: 11.5px; }
  .cx-card { border-radius: 22px; }
  .cx-media { border-radius: 20px; }
}

/* ---------- 14. 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .cx-progress__bar { transition: none; }
  .cx-card:hover,
  .cx-btn--lime:hover,
  .cx-btn--ghost:hover { transform: none; }
  .cx-footer__link:hover { padding-left: 0; }
}