/* =============================================================
   风云体育 · 共享站点样式  /assets/site.css
   顺序：tokens → reset → 中文排版 → 容器与网格 → 通用组件
        → 头部 → 页脚 → 响应式 → 动效偏好
   ============================================================= */

:root{
  /* 色彩：暖纸 × 风暴蓝 × 电光青 × 限量橙红 */
  --ink:#12161C;
  --paper:#F6F1E7;
  --paper-2:#E7DFCF;
  --paper-card:#FFFDF8;
  --storm-deep:#0B1F3A;
  --storm:#123C6E;
  --storm-bright:#1E6BD6;
  --cyan:#17C9B8;
  --cyan-soft:#A8F5EE;
  --ember:#FF5A2B;
  --glass:rgba(255,255,255,0.62);
  --mist:#5C6673;

  /* 字体 */
  --font-display:"Archivo Black","Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-body:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono","Source Han Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* 形状与阴影 */
  --radius-pill:999px;
  --radius-card:14px;
  --radius-soft:22px;
  --shadow-pill:0 14px 34px -18px rgba(11,31,58,.55);
  --shadow-float:0 24px 48px -28px rgba(11,31,58,.8);
  --shadow-card:0 16px 30px -24px rgba(11,31,58,.85);

  /* 尺度 */
  --shell:min(1180px, calc(100% - 2.5rem));
  --gutter:clamp(1.25rem,4vw,3.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (max-width:620px){
  :root{ --shell:calc(100% - 1.5rem); }
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:8rem;
}

body{
  margin:0;
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

@media (max-width:620px){
  body{ font-size:16px; }
}

img,svg,video{ display:block; max-width:100%; }
button{ font:inherit; }

::selection{ background:var(--cyan-soft); color:var(--storm-deep); }

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

/* ---------- 中文排版 ---------- */
h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.12;
  color:var(--storm-deep);
  text-wrap:balance;
}

h1{ font-size:clamp(2.125rem, 5vw, 3.5rem); }
h2{ font-size:clamp(1.625rem, 3.4vw, 2.5rem); }
h3{ font-size:clamp(1.125rem, 2vw, 1.75rem); }
h4{ font-size:clamp(1rem, 1.4vw, 1.25rem); }

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--storm-bright); }

ul,ol{ margin:0 0 1em; padding-left:1.2em; }
li{ margin-bottom:.35em; }
li:last-child{ margin-bottom:0; }

strong{ font-weight:800; color:var(--storm-deep); }

/* ---------- 容器与网格 ---------- */
.shell{
  width:var(--shell);
  margin-inline:auto;
}

.section{
  padding-block:clamp(2.5rem,6vw,5rem);
}

.section--ink{
  background:var(--storm-deep);
  color:var(--paper);
}

.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4{ color:var(--paper); }

.section--paper2{ background:var(--paper-2); }

.grid{
  display:grid;
  gap:clamp(1rem,2.4vw,1.75rem);
}
.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)); }

@media (max-width:960px){
  .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:620px){
  .grid--2,
  .grid--3,
  .grid--4{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- 文字组件 ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--storm);
  margin:0 0 .8rem;
}
.eyebrow::before{
  content:"";
  width:18px;
  height:2px;
  background:var(--cyan);
  flex:none;
}

.lead{
  max-width:34em;
  font-size:1.125rem;
  line-height:1.7;
  color:var(--mist);
}

.prose{ max-width:34em; }
.prose p{ margin:0 0 1.2em; }
.prose p:last-child{ margin-bottom:0; }
.prose h3{ margin:1.6em 0 .6em; }
.prose ul,.prose ol{ margin:0 0 1.2em; }

.num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  letter-spacing:-.01em;
}

/* ---------- 链接组件 ---------- */
.ink-link{
  position:relative;
  display:inline-block;
  color:inherit;
  text-decoration:none;
  padding-bottom:2px;
}
.ink-link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s var(--ease);
}
.ink-link:hover::after,
.ink-link:focus-visible::after{ transform:scaleX(1); }

/* ---------- 按钮 ---------- */
.btn{
  --btn-bg:var(--storm);
  --btn-fg:var(--paper);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.78rem 1.45rem;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:.9375rem;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s var(--ease), transform .15s var(--ease), border-color .18s var(--ease);
}
.btn:hover{ --btn-bg:var(--storm-deep); }
.btn:active{ transform:scale(.98); }

.btn--ember{
  --btn-bg:var(--ember);
  --btn-fg:#12161C;
}
.btn--ember:hover{ --btn-bg:#E5431A; }

.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--storm);
  border-color:var(--storm);
}
.btn--ghost:hover{ --btn-bg:var(--storm); --btn-fg:var(--paper); }

/* ---------- 标签 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.22rem .65rem;
  border-radius:var(--radius-pill);
  background:var(--cyan-soft);
  color:var(--storm-deep);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
}
.tag--ember{ background:var(--ember); color:#12161C; }
.tag--storm{ background:var(--storm); color:var(--paper); }

/* ---------- 卡片 ---------- */
.card{
  background:var(--paper-card);
  border:1px solid var(--paper-2);
  border-radius:var(--radius-card);
  padding:clamp(1.1rem,2.2vw,1.6rem);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover{
  border-color:var(--storm);
  box-shadow:var(--shadow-card);
}
.card--dark{
  background:var(--storm-deep);
  border-color:rgba(168,245,238,.22);
  color:var(--paper);
}
.card--dark h3,
.card--dark h4{ color:var(--paper); }
.card--cyan{
  background:var(--cyan-soft);
  border-color:rgba(23,201,184,.42);
}

/* ---------- 图片容器（页面阶段放 <img>） ---------- */
.media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border-radius:var(--radius-card);
  background-color:var(--storm-deep);
  background-image:repeating-linear-gradient(118deg, rgba(23,201,184,.16) 0 2px, transparent 2px 26px);
}
.media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.media--wide{ aspect-ratio:21 / 9; }
.media--tall{ aspect-ratio:4 / 5; }
.media--square{ aspect-ratio:1 / 1; }
.media--radius-sm{ border-radius:10px; }

.figure{ margin:0; }
.figure figcaption{
  margin-top:.65rem;
  font-size:.8125rem;
  line-height:1.6;
  color:var(--mist);
}

/* ---------- 斜切收边 ---------- */
.edge-slash{ position:relative; }
.edge-slash::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:clamp(18px,3vw,34px);
  background:var(--paper);
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
  pointer-events:none;
}

/* ---------- 面包屑 ---------- */
.breadcrumb{
  width:var(--shell);
  margin:1.5rem auto 0;
}
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin:0;
  padding:0;
  list-style:none;
  font-size:.8125rem;
  color:var(--mist);
}
.breadcrumb li{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0;
}
.breadcrumb li:not(:last-child)::after{
  content:"/";
  color:rgba(92,102,115,.45);
}
.breadcrumb a{
  color:var(--storm);
  text-decoration:none;
}
.breadcrumb a:hover{
  color:var(--storm-bright);
  text-decoration:underline;
  text-decoration-color:var(--cyan);
  text-underline-offset:4px;
}
.breadcrumb [aria-current="page"]{ color:var(--mist); }

/* ---------- 状态点 ---------- */
.status-dot,
.strip-dot,
.strip-pulse{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cyan);
  flex:none;
  display:inline-block;
}
.status-dot{
  box-shadow:0 0 0 3px rgba(23,201,184,.22);
  animation:breathe 2.4s ease-in-out infinite;
}
.strip-dot{ width:6px; height:6px; animation:breathe 2.4s ease-in-out infinite; }
.strip-pulse{ width:5px; height:5px; animation:breathe 2.4s ease-in-out infinite; }

@keyframes breathe{
  0%,100%{ opacity:.42; }
  50%{ opacity:1; }
}

/* =============================================================
   头部：skip link · 进度条 · 玻璃胶囊 · 宽幅引导条
   ============================================================= */

.skip-link{
  position:absolute;
  left:50%;
  top:-5rem;
  transform:translateX(-50%);
  z-index:400;
  padding:.7rem 1.3rem;
  border-radius:0 0 12px 12px;
  background:var(--storm-deep);
  color:var(--paper);
  font-size:.875rem;
  font-weight:700;
  text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible{ top:0; }

.scroll-meter{
  position:fixed;
  inset:0 0 auto 0;
  height:3px;
  z-index:300;
  pointer-events:none;
  background:transparent;
}
.scroll-meter__bar{
  display:block;
  width:0;
  height:100%;
  background:var(--cyan);
}

.site-header{
  position:sticky;
  top:0;
  z-index:120;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding-top:.8rem;
  background:var(--paper);
}

/* 玻璃胶囊 */
.header-pill{
  position:relative;
  width:var(--shell);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.5rem .55rem .5rem 1.1rem;
  border-radius:var(--radius-pill);
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(11,31,58,.12);
  box-shadow:var(--shadow-pill);
}

/* 品牌签名 */
.brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  text-decoration:none;
  color:var(--storm-deep);
  min-width:0;
}
.brand-mark{
  width:15px;
  height:15px;
  flex:none;
  background:var(--storm-deep);
  clip-path:polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%);
}
.brand-mark--light{ background:var(--cyan); }

.brand-text{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.brand-name{
  font-family:var(--font-display);
  font-size:1.0625rem;
  font-weight:800;
  letter-spacing:.01em;
  white-space:nowrap;
}
.brand-sub{
  font-family:var(--font-mono);
  font-size:.5625rem;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--mist);
  white-space:nowrap;
  margin-top:.18rem;
}

/* 桌面导航 */
.site-nav{ display:flex; align-items:center; }
.nav-list{
  display:flex;
  align-items:center;
  gap:.1rem;
  margin:0;
  padding:0;
  list-style:none;
}
.nav-list > li{ margin:0; }

.nav-link{
  position:relative;
  display:inline-block;
  padding:.52rem .78rem;
  border-radius:var(--radius-pill);
  color:var(--storm-deep);
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.nav-link::after{
  content:"";
  position:absolute;
  left:.78rem; right:.78rem; bottom:.3rem;
  height:2px;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s var(--ease);
}
.nav-link:hover::after,
.nav-link:focus-visible::after{ transform:scaleX(1); }

.nav-link[aria-current="page"]{
  background:var(--storm);
  color:var(--paper);
}
.nav-link[aria-current="page"]::after{ display:none; }

/* 移动端按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:.55rem;
  padding:.55rem .95rem;
  border-radius:var(--radius-pill);
  border:1px solid rgba(11,31,58,.18);
  background:var(--storm-deep);
  color:var(--paper);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.08em;
  cursor:pointer;
  flex:none;
  transition:background-color .18s var(--ease);
}
.nav-toggle:hover{ background:var(--storm); }

.nav-toggle-icon{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:4px;
  width:14px;
  height:12px;
}
.nav-toggle-icon span{
  display:block;
  height:2px;
  width:14px;
  border-radius:2px;
  background:var(--cyan);
  transition:transform .2s var(--ease), width .2s var(--ease);
}
.nav-toggle-icon span:last-child{ width:9px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:first-child{ transform:translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:last-child{ width:14px; transform:translateY(-3px) rotate(-45deg); }

/* 宽幅引导条 */
.header-strip{
  background:var(--storm-deep);
  color:var(--paper);
  border-top:1px solid rgba(168,245,238,.24);
}
.strip-inner{
  width:var(--shell);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:2.6rem;
}
.strip-list{
  display:flex;
  align-items:center;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
}
.strip-list::-webkit-scrollbar{ display:none; }
.strip-item{
  flex:none;
  margin:0;
  border-right:1px solid rgba(168,245,238,.16);
}
.strip-item:last-child{ border-right:0; }

.strip-link{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.62rem 1.15rem;
  color:var(--paper);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.03em;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.strip-link:hover,
.strip-link:focus-visible{
  background:rgba(30,107,214,.4);
  color:#fff;
}
.strip-text{ display:inline-block; }
.strip-tag{
  display:inline-block;
  padding:.1rem .4rem;
  border-radius:4px;
  background:var(--ember);
  color:#12161C;
  font-family:var(--font-mono);
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.1em;
}

.strip-meta{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0;
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.06em;
  color:rgba(246,241,231,.68);
  white-space:nowrap;
}

/* =============================================================
   页脚
   ============================================================= */

.site-footer{
  position:relative;
  margin-top:clamp(3rem,7vw,6rem);
  background:var(--storm-deep);
  color:var(--paper);
  padding-top:clamp(2.5rem,5vw,4rem);
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:var(--cyan);
}

.footer-inner{
  width:var(--shell);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1.45fr 1fr 1.15fr;
  gap:clamp(1.75rem,4vw,3.5rem);
  padding-bottom:2.5rem;
}

.footer-col{ min-width:0; }

.footer-brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:var(--paper);
}
.footer-brand-name{
  font-family:var(--font-display);
  font-size:1.125rem;
  font-weight:800;
  letter-spacing:.01em;
}

.footer-line{
  margin:.9rem 0 0;
  max-width:26em;
  font-size:.9375rem;
  line-height:1.72;
  color:rgba(246,241,231,.74);
}

.footer-nav-wrap{ margin-top:1.35rem; }
.footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.15rem;
  margin:0;
  padding:0;
  list-style:none;
  font-size:.875rem;
}
.footer-nav li{ margin:0; }
.footer-nav .ink-link{ color:var(--paper); }

.footer-legal{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.15rem;
  margin:1rem 0 0;
  padding:0;
  list-style:none;
  font-size:.8125rem;
}
.footer-legal li{ margin:0; }
.footer-legal .ink-link{ color:rgba(168,245,238,.85); }

.footer-title{
  margin:0 0 .9rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan);
}

.footer-text{
  margin:0 0 1.1rem;
  font-size:.9375rem;
  line-height:1.72;
  color:rgba(246,241,231,.74);
}

.footer-col--feedback .btn{ width:100%; max-width:15rem; }

.footer-meta{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:1rem 0 0;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.05em;
  color:rgba(246,241,231,.66);
}

.footer-contact{
  display:grid;
  gap:.9rem;
  margin:0;
  padding:0;
  list-style:none;
}
.footer-contact li{
  display:grid;
  gap:.2rem;
  margin:0;
}
.footer-key{
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.16em;
  color:rgba(168,245,238,.85);
}
.footer-value{
  font-family:var(--font-mono);
  font-size:.875rem;
  line-height:1.6;
  color:var(--paper);
  word-break:break-word;
}
.footer-value--text{
  font-family:var(--font-body);
  font-size:.9375rem;
}

.footer-note{
  margin:1.1rem 0 0;
  font-size:.8125rem;
  line-height:1.7;
  color:rgba(246,241,231,.6);
}

.footer-icp{
  display:inline-block;
  margin:1rem 0 0;
  padding:.3rem .75rem;
  border-radius:var(--radius-pill);
  border:1px solid rgba(168,245,238,.34);
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.03em;
  color:rgba(246,241,231,.88);
}

.footer-base{
  width:var(--shell);
  margin-inline:auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:.5rem 1.5rem;
  padding:1.15rem 0 1.6rem;
  border-top:1px solid rgba(168,245,238,.16);
  font-size:.8125rem;
  color:rgba(246,241,231,.6);
}
.footer-copy{ margin:0; }
.footer-copy--soft{ font-family:var(--font-mono); letter-spacing:.04em; }

/* =============================================================
   响应式
   ============================================================= */

@media (max-width:1080px){
  .nav-link{ padding:.5rem .6rem; font-size:.8125rem; }
  .nav-link::after{ left:.6rem; right:.6rem; }
}

@media (max-width:880px){
  .header-pill{
    padding:.5rem .5rem .5rem .9rem;
    gap:.75rem;
  }
  .brand-sub{ display:none; }

  .nav-toggle{ display:inline-flex; }

  .site-nav{
    position:absolute;
    top:calc(100% + .55rem);
    left:0;
    right:0;
    display:none;
    z-index:30;
    max-height:min(70vh,420px);
    overflow-y:auto;
    padding:.5rem;
    border-radius:var(--radius-soft);
    background:var(--paper);
    border:1px solid rgba(11,31,58,.14);
    box-shadow:var(--shadow-float);
  }
  .site-nav[data-open="true"]{ display:block; }

  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:.15rem;
  }
  .nav-link{
    display:block;
    padding:.72rem .9rem;
    border-radius:14px;
    font-size:1rem;
  }
  .nav-link::after{ display:none; }
  .nav-link[aria-current="page"]{ background:var(--storm); color:var(--paper); }
}

@media (max-width:900px){
  .strip-meta{ display:none; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .footer-col:first-child{ grid-column:1 / -1; }
}

@media (max-width:620px){
  .header-pill{ border-radius:var(--radius-soft); }
  .brand-name{ font-size:1rem; }
  .strip-link{ padding:.58rem .95rem; font-size:.78rem; }
  .strip-tag{ display:none; }

  .footer-inner{ grid-template-columns:1fr; }
  .footer-col:first-child{ grid-column:auto; }
  .footer-base{ flex-direction:column; align-items:flex-start; }
}

/* =============================================================
   动效偏好
   ============================================================= */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  .status-dot,
  .strip-dot,
  .strip-pulse{
    animation:none !important;
    opacity:1 !important;
  }

  .scroll-meter__bar{ transition:none !important; }
}