/* ==========================================================================
   九博体育娱乐 · jiusports.com.cn
   共享样式表 /assets/site.css
   墨蓝基底 + 琥珀金主强调 + 电光青次强调 + 暖沙阅读纸面
   ========================================================================== */

/* ---------- 1. 变量 ---------- */
:root{
  --ink-900:#0B1B33;
  --ink-700:#14294B;
  --ink-500:#1E3A66;
  --gold-500:#F2A93B;
  --gold-300:#FFC96B;
  --cyan-400:#23D3D3;
  --cyan-600:#0E9C9C;
  --sand-200:#F0E2CE;
  --sand-50:#FAF5EE;
  --mist-300:#B9C4D4;
  --coral-500:#E4633C;

  --text:#E8EEF7;
  --text-dim:rgba(185,196,212,.74);
  --hairline:rgba(185,196,212,.16);
  --hairline-strong:rgba(185,196,212,.30);

  --font-display:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:var(--font-display);
  --font-mono:ui-monospace,"JetBrains Mono","IBM Plex Mono",SFMono-Regular,Menlo,Consolas,"Courier New",monospace;

  --shell:1180px;
  --gutter:clamp(16px,4vw,40px);
  --radius-lg:28px;
  --radius-md:20px;
  --radius-pill:999px;
  --ease:cubic-bezier(.32,.72,.35,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  min-height:100%;
  background-color:var(--ink-900);
  background-image:
    radial-gradient(circle at 84% -6%,rgba(35,211,211,.14),transparent 44%),
    radial-gradient(circle at 4% 10%,rgba(242,169,59,.10),transparent 40%);
  background-repeat:no-repeat;
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%;}
button{font:inherit;color:inherit;}
a{color:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);font-weight:800;line-height:1.18;letter-spacing:-.02em;color:#fff;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
::selection{background:var(--gold-500);color:var(--ink-900);}

/* ---------- 3. 焦点与可达性 ---------- */
:focus{outline:none;}
:focus-visible{
  outline:3px solid var(--cyan-400);
  outline-offset:3px;
  border-radius:8px;
}
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-80px;
  z-index:200;
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:12px 22px;
  border-radius:var(--radius-pill);
  background:var(--gold-500);
  color:var(--ink-900);
  font-weight:700;
  text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus-visible{top:14px;}
#main-content{scroll-margin-top:110px;}
:target{scroll-margin-top:110px;}

/* ---------- 4. 通用排版工具 ---------- */
.mono{font-family:var(--font-mono);font-weight:600;letter-spacing:.02em;}
.link{
  color:var(--cyan-400);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(35,211,211,.45);
}
.link:hover{color:var(--gold-300);text-decoration-color:rgba(255,201,107,.6);}
.surface-paper{
  background:var(--sand-50);
  color:var(--ink-900);
  border-radius:var(--radius-lg);
  padding:clamp(22px,3.4vw,44px);
}
.surface-paper h2,.surface-paper h3,.surface-paper h4{color:var(--ink-900);}
.prose{max-width:68ch;}
.prose p{color:inherit;}
.prose a{color:var(--cyan-600);text-decoration:underline;text-underline-offset:3px;}
.prose a:hover{color:var(--ink-900);}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.4em;list-style:disc;}
.prose ol{list-style:decimal;}
.prose li{margin-bottom:.5em;}
.prose code,.prose .mono{font-family:var(--font-mono);}

/* ---------- 5. 布局容器 ---------- */
.container{
  width:min(100% - 2 * var(--gutter),var(--shell));
  margin-inline:auto;
}
.section{padding-block:clamp(44px,7vw,96px);}
.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(12px,2vw,26px);
  padding-bottom:16px;
  margin-bottom:clamp(22px,3vw,40px);
  border-bottom:1px solid var(--hairline);
}
.section-kicker{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan-400);
  margin:0 0 8px;
}
.section-title{font-size:clamp(24px,3.4vw,40px);}
.section-lede{
  max-width:62ch;
  margin:0;
  color:var(--mist-300);
  font-size:16.5px;
}

/* ---------- 6. 网格 ---------- */
.grid{display:grid;gap:clamp(16px,2.2vw,26px);}
.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));}
.grid--sidebar{grid-template-columns:minmax(220px,290px) minmax(0,1fr);align-items:start;}
.offset-up{margin-top:-32px;}
.offset-down{margin-top:32px;}

/* ---------- 7. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:11px 22px;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.btn--primary{background:var(--gold-500);color:var(--ink-900);}
.btn--primary:hover{background:var(--gold-300);}
.btn--primary:active{transform:translateY(1px);}
.btn--ghost{
  background:rgba(185,196,212,.08);
  color:var(--text);
  border-color:var(--hairline-strong);
}
.btn--ghost:hover{
  background:rgba(35,211,211,.14);
  border-color:rgba(35,211,211,.44);
  color:#fff;
}

/* ---------- 8. 标签 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-pill);
  background:rgba(185,196,212,.10);
  color:var(--mist-300);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  line-height:1.6;
  white-space:nowrap;
}
.tag--gold{background:rgba(242,169,59,.14);border-color:rgba(242,169,59,.36);color:var(--gold-300);}
.tag--cyan{background:rgba(35,211,211,.12);border-color:rgba(35,211,211,.34);color:var(--cyan-400);}
.tag--coral{background:rgba(228,99,60,.14);border-color:rgba(228,99,60,.36);color:#F2A088;}

/* ---------- 9. 卡片 ---------- */
.card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:clamp(18px,2.2vw,26px);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  background:var(--ink-700);
}
.card-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.card-title{font-size:clamp(18px,2vw,22px);}
.card-text{margin:0;color:var(--mist-300);font-size:15.5px;}
.card-meta{
  margin:0;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  color:var(--cyan-400);
}
.card--sand{background:var(--sand-50);border-color:rgba(11,27,51,.10);color:var(--ink-900);}
.card--sand .card-title{color:var(--ink-900);}
.card--sand .card-text{color:var(--ink-500);}
.card--sand .card-meta{color:var(--cyan-600);}

/* ---------- 10. 时间轴 ---------- */
.timeline{
  display:grid;
  gap:26px;
  margin:0;
  padding:0 0 0 26px;
  border-left:2px solid rgba(35,211,211,.30);
}
.timeline-item{position:relative;}
.timeline-item::before{
  content:"";
  position:absolute;
  left:-35px;
  top:9px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--cyan-600);
  box-shadow:0 0 0 4px rgba(35,211,211,.16);
}
.timeline-date{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--gold-300);
}
.timeline-body{margin-top:6px;color:var(--mist-300);}

/* ---------- 11. 折叠面板 ---------- */
.accordion{display:grid;gap:10px;}
.accordion-item{
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
  background:var(--ink-700);
  overflow:hidden;
}
.accordion-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  min-height:52px;
  padding:16px 20px;
  border:0;
  background:none;
  color:#fff;
  font-weight:700;
  font-size:16px;
  text-align:left;
  cursor:pointer;
}
.accordion-btn::after{
  content:"";
  flex:none;
  width:14px;
  height:14px;
  background:
    linear-gradient(var(--gold-300),var(--gold-300)) center / 100% 2px no-repeat,
    linear-gradient(var(--gold-300),var(--gold-300)) center / 2px 100% no-repeat;
  transition:transform .2s var(--ease);
}
.accordion-btn[aria-expanded="true"]{color:var(--gold-300);}
.accordion-btn[aria-expanded="true"]::after{transform:rotate(45deg);}
.accordion-panel{padding:0 20px 18px;color:var(--mist-300);}

/* ---------- 12. 数据条 ---------- */
.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(12px,2vw,22px);
}
.stat{
  padding:16px 18px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
  background:linear-gradient(160deg,rgba(30,58,102,.9),rgba(20,41,75,.7));
}
.stat-value{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(24px,3vw,34px);
  font-weight:600;
  line-height:1.1;
  color:var(--gold-500);
}
.stat-label{
  display:block;
  margin-top:6px;
  font-size:13px;
  color:var(--mist-300);
}

/* ---------- 13. 图片容器 ---------- */
.media{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:16 / 9;
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(135deg,rgba(35,211,211,.16),rgba(242,169,59,.08)),
    var(--ink-700);
}
.media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.media::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 57%,rgba(35,211,211,.16) 57%,rgba(35,211,211,.16) 61%,transparent 61%),
    linear-gradient(115deg,transparent 71%,rgba(242,169,59,.18) 71%,rgba(242,169,59,.18) 73%,transparent 73%);
}
.media--wide{aspect-ratio:21 / 9;}
.media--tall{aspect-ratio:4 / 5;}
.media--square{aspect-ratio:1 / 1;}
.media--paper{
  border-color:rgba(11,27,51,.12);
  background:
    linear-gradient(135deg,rgba(35,211,211,.20),rgba(242,169,59,.20)),
    var(--sand-200);
}
.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(14px,2vw,22px);
}
.media-caption{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--mist-300);
}

/* ---------- 14. 面包屑 ---------- */
.breadcrumb{
  padding-block:18px 4px;
  font-size:13px;
  color:var(--mist-300);
}
.breadcrumb-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.breadcrumb-item{display:inline-flex;align-items:center;gap:8px;}
.breadcrumb-item + .breadcrumb-item::before{
  content:"/";
  color:rgba(185,196,212,.45);
  font-family:var(--font-mono);
}
.breadcrumb-link{color:var(--mist-300);text-decoration:none;}
.breadcrumb-link:hover{color:var(--cyan-400);}
.breadcrumb-current{color:#fff;font-weight:600;}

/* ---------- 15. 滚动协议 ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.js [data-reveal].is-visible{opacity:1;transform:none;}
[data-spy-link][data-spy-current="true"]{
  color:var(--gold-300);
  background:rgba(242,169,59,.14);
}

/* ==========================================================================
   16. 站点头部：悬浮胶囊导航
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  padding-block:12px 14px;
}
.header-shell{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(10px,1.5vw,22px);
  width:min(100% - 2 * var(--gutter),var(--shell));
  margin-inline:auto;
  padding:8px 8px 8px 16px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-pill);
  background:rgba(20,41,75,.82);
  box-shadow:0 22px 46px -28px rgba(3,8,18,.95);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  transition:background-color .2s var(--ease),box-shadow .2s var(--ease);
}
.site-header[data-shrink="true"] .header-shell{
  background:rgba(11,27,51,.94);
  box-shadow:0 26px 50px -30px rgba(3,8,18,1);
}

/* 品牌 */
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  text-decoration:none;
  color:#fff;
}
.brand-mark{
  display:grid;
  place-items:center;
  flex:none;
  width:38px;
  height:38px;
  border:1.5px solid var(--gold-500);
  border-radius:12px;
  background:linear-gradient(140deg,rgba(242,169,59,.22),rgba(35,211,211,.16));
  box-shadow:0 0 0 3px rgba(242,169,59,.08);
  color:var(--gold-300);
  font-family:var(--font-display);
  font-size:18px;
  font-weight:900;
  line-height:1;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-name{
  font-family:var(--font-display);
  font-size:15.5px;
  font-weight:900;
  letter-spacing:-.01em;
}
.brand-sub{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--mist-300);
}

/* 导航 */
.site-nav{min-width:0;}
.nav-list{
  display:flex;
  align-items:center;
  gap:2px;
  flex-wrap:nowrap;
}
.nav-link{
  display:inline-flex;
  align-items:center;
  padding:9px 13px;
  border-radius:var(--radius-pill);
  color:var(--mist-300);
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  text-decoration:none;
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
.nav-link:hover{background:rgba(242,169,59,.14);color:#fff;}
.nav-link[aria-current="page"]{
  background:var(--gold-500);
  color:var(--ink-900);
  font-weight:700;
}

/* 操作区 */
.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.header-cta{padding-inline:18px;font-size:14.5px;}
.header-cta-arrow{font-family:var(--font-mono);transform:translateY(-1px);}
.icon-btn{
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  height:44px;
  border:1px solid var(--hairline-strong);
  border-radius:var(--radius-pill);
  background:rgba(185,196,212,.08);
  color:var(--text);
  cursor:pointer;
  transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.icon-btn:hover{background:rgba(35,211,211,.14);border-color:rgba(35,211,211,.42);}
.icon-btn-dots{display:flex;gap:3px;}
.icon-btn-dots i{display:block;width:4px;height:4px;border-radius:50%;background:currentColor;}

/* 移动端导航按钮 */
.nav-toggle{
  display:none;
  place-items:center;
  flex:none;
  width:44px;
  height:44px;
  border:1px solid var(--hairline-strong);
  border-radius:14px;
  background:rgba(185,196,212,.08);
  color:var(--text);
  cursor:pointer;
}
.nav-toggle-bars{display:grid;gap:4px;}
.nav-toggle-bars i{
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* 设置浮层 */
.settings-panel{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  z-index:90;
  width:min(304px,calc(100vw - 2 * var(--gutter)));
  padding:18px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
  background:rgba(20,41,75,.98);
  box-shadow:0 28px 54px -26px rgba(3,8,18,.96);
}
.settings-panel[hidden]{display:none;}
.settings-title{
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-300);
}
.settings-list{display:grid;gap:4px;}
.settings-link{
  display:block;
  padding:11px 12px;
  border-radius:12px;
  color:var(--text);
  font-size:14.5px;
  text-decoration:none;
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.settings-link:hover{background:rgba(35,211,211,.14);color:#fff;}

/* 顶部阅读进度 */
.progress-wrap{
  position:absolute;
  left:50%;
  bottom:4px;
  transform:translateX(-50%);
  width:min(100% - 2 * var(--gutter),var(--shell));
  height:2px;
  border-radius:var(--radius-pill);
  background:rgba(185,196,212,.14);
  overflow:hidden;
  pointer-events:none;
}
.progress-fill{
  display:block;
  width:0;
  height:100%;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300));
}

/* ==========================================================================
   17. 站点页脚：横向色带 + 四栏公告索引
   ========================================================================== */
.site-footer{
  margin-top:clamp(56px,8vw,110px);
  border-top:1px solid var(--hairline);
  background:linear-gradient(180deg,var(--ink-900),#081324 72%);
  color:var(--mist-300);
}
.footer-rule{
  height:6px;
  background:linear-gradient(90deg,
    var(--gold-500) 0 22%,
    var(--gold-300) 22% 26%,
    var(--cyan-600) 26% 48%,
    var(--cyan-400) 48% 52%,
    rgba(185,196,212,.20) 52% 100%);
}
.footer-inner{
  width:min(100% - 2 * var(--gutter),var(--shell));
  margin-inline:auto;
  padding-block:clamp(34px,5vw,58px) clamp(22px,3vw,34px);
}
.footer-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-bottom:26px;
  border-bottom:1px solid var(--hairline);
}
.footer-brand{display:flex;align-items:center;gap:12px;}
.footer-mark{
  display:grid;
  place-items:center;
  flex:none;
  width:42px;
  height:42px;
  border:1.5px solid var(--gold-500);
  border-radius:14px;
  background:linear-gradient(140deg,rgba(242,169,59,.20),rgba(35,211,211,.14));
  color:var(--gold-300);
  font-family:var(--font-display);
  font-size:19px;
  font-weight:900;
  line-height:1;
}
.footer-brand-text{display:flex;flex-direction:column;line-height:1.2;}
.footer-brand-name{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:800;
  color:#fff;
}
.footer-brand-domain{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--mist-300);
}
.footer-chips{display:flex;flex-wrap:wrap;gap:8px;}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,36px);
  padding-block:clamp(26px,3.6vw,42px);
}
.footer-col{min-width:0;}
.footer-col-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
  color:#fff;
}
.footer-col-title::before{
  content:"";
  flex:none;
  width:16px;
  height:2px;
  border-radius:2px;
  background:var(--gold-500);
}
.footer-list{display:grid;gap:10px;}
.footer-list li{font-size:13.5px;line-height:1.65;color:var(--mist-300);}
.footer-link{
  color:var(--mist-300);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.footer-link:hover{color:var(--cyan-400);border-bottom-color:rgba(35,211,211,.5);}
.footer-static{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-dim);
  word-break:break-word;
}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:22px;
  border-top:1px solid var(--hairline);
}
.legal-links{display:flex;flex-wrap:wrap;gap:18px;}
.legal-link{
  font-size:13.5px;
  color:var(--mist-300);
  text-decoration:none;
  transition:color .16s var(--ease);
}
.legal-link:hover{color:var(--gold-300);}
.footer-meta{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  color:rgba(185,196,212,.68);
}

/* ==========================================================================
   18. 响应式
   ========================================================================== */

/* 平板横屏 / 小笔记本：内容区收窄，网格降列 */
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--sidebar{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* 平板竖屏 / 手机：导航收进抽屉 */
@media (max-width:980px){
  .site-header{padding-block:10px 12px;}
  .header-shell{
    grid-template-columns:minmax(0,1fr) auto;
    padding:8px 8px 8px 14px;
    border-radius:26px;
  }
  .brand-sub{display:none;}
  .site-nav{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    padding:12px;
    border:1px solid var(--hairline);
    border-radius:24px;
    background:rgba(20,41,75,.98);
    box-shadow:0 28px 52px -26px rgba(3,8,18,.96);
    transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s var(--ease);
  }
  .site-nav[data-open="false"]{
    visibility:hidden;
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
  }
  .site-nav[data-open="true"]{
    visibility:visible;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .nav-list{flex-direction:column;align-items:stretch;gap:4px;}
  .nav-link{padding:13px 16px;border-radius:14px;font-size:15px;}
  .nav-toggle{display:grid;}
  .settings-panel{right:0;}
  .offset-up,.offset-down{margin-top:0;}
  .section-head{align-items:flex-start;}
}

@media (max-width:720px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{align-items:flex-start;}
}

@media (max-width:520px){
  .header-cta{padding-inline:14px;font-size:13.5px;}
  .header-cta-arrow{display:none;}
  .brand-name{font-size:14.5px;}
}

@media (max-width:400px){
  .icon-btn{display:none;}
  .brand-mark{width:34px;height:34px;font-size:16px;border-radius:10px;}
}

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