/* ========== 万象体育 共享样式 /assets/site.css ========== */
:root{
  --desert-gold:#D4A24E;
  --oasis:#2A7F6C;
  --snow:#F8F9F7;
  --sunset:#F27E4D;
  --night:#1A2B4C;
  --ink:#0E1624;
  --sky:#6BB5C9;
  --rock:#C2A37A;
  --font-display:'Impact','Arial Black','Microsoft YaHei',sans-serif;
  --font-body:'Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'Roboto Mono','SFMono-Regular',monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--snow);
  -webkit-font-smoothing:antialiased;
}
main{display:block}
#main-content{scroll-margin-top:96px}
img{max-width:100%;display:block}
a{color:var(--sky);text-decoration:none}
a:hover{color:var(--night)}
::selection{background:var(--desert-gold);color:var(--night)}
:focus-visible{outline:3px solid var(--desert-gold);outline-offset:2px;border-radius:2px}

/* ---- 跳转与滚动进度 ---- */
.skip-link{
  position:fixed;top:8px;left:8px;z-index:300;
  padding:10px 18px;
  font-weight:700;font-size:14px;letter-spacing:1px;
  background:var(--night);color:var(--snow);
  border:2px solid var(--desert-gold);
  transform:translateY(-180%);
  transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0)}
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:4px;z-index:250;
  background:linear-gradient(90deg,var(--desert-gold),var(--sunset),var(--oasis));
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .12s linear;
  pointer-events:none;
}

/* ---- 框架式头部 ---- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--night);
  border-top:4px solid var(--desert-gold);
  box-shadow:0 8px 28px rgba(14,22,36,.22);
}
.header-frame{
  position:relative;
  max-width:1280px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  gap:18px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--snow);
  line-height:1.1;
}
.brand:hover{color:var(--desert-gold)}
.brand-mark{
  position:relative;
  flex:0 0 36px;
  width:36px;height:36px;
  background:linear-gradient(135deg,var(--desert-gold) 0 50%,var(--sunset) 50% 100%);
  transform:rotate(45deg);
  box-shadow:2px 2px 0 rgba(212,162,78,.35);
  transition:box-shadow .2s;
}
.brand-mark-inner{
  position:absolute;inset:6px;
  background:var(--night);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.brand:hover .brand-mark{box-shadow:0 0 0 3px rgba(242,126,77,.35)}
.brand-text{display:flex;flex-direction:column}
.brand-name{
  font-family:var(--font-display);
  font-size:23px;
  letter-spacing:.5px;
  text-transform:uppercase;
  line-height:1;
}
.brand-sub{
  margin-top:3px;
  font-size:11px;
  letter-spacing:2.2px;
  white-space:nowrap;
  color:rgba(248,249,247,.62);
  transition:color .2s;
}
.brand:hover .brand-sub{color:var(--rock)}

.site-nav{margin-left:auto}
.nav-list{
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-list a{
  display:block;
  position:relative;
  padding:10px 13px;
  font-size:14px;
  font-weight:700;
  letter-spacing:1.2px;
  color:var(--snow);
  transition:color .2s,background .2s;
}
.nav-list a::after{
  content:"";
  position:absolute;
  left:13px;right:13px;bottom:4px;
  height:2px;
  background:var(--desert-gold);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .25s ease;
}
.nav-list a:hover{color:var(--desert-gold)}
.nav-list a:hover::after{transform:scaleX(1)}
.nav-list a[aria-current="page"]{
  color:var(--desert-gold);
  background:rgba(212,162,78,.12);
}
.nav-list a[aria-current="page"]::after{transform:scaleX(1)}

.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 18px;
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--sunset);
  border:2px solid var(--sunset);
  transition:background .2s,color .2s,box-shadow .2s;
}
.header-cta:hover{
  background:var(--sunset);
  color:var(--night);
  box-shadow:0 0 0 3px rgba(242,126,77,.25);
}

.nav-toggle{
  display:none;
  width:46px;height:42px;
  padding:0;
  border:1px solid var(--rock);
  background:rgba(248,249,247,.04);
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.nav-toggle-bar{
  width:20px;height:2px;
  background:var(--snow);
  transition:transform .25s ease,opacity .25s ease;
}
.nav-toggle.is-active{border-color:var(--desert-gold)}
.nav-toggle.is-active .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-active .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle.is-active .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- 页脚 ---- */
.site-footer{
  position:relative;
  background-color:var(--night);
  background-image:
    linear-gradient(45deg,rgba(212,162,78,.045) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(212,162,78,.045) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(212,162,78,.045) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(212,162,78,.045) 75%);
  background-size:48px 48px;
  background-position:0 0,0 24px,24px -24px,-24px 0;
  color:rgba(248,249,247,.78);
  border-top:4px solid var(--desert-gold);
}
.site-footer a{color:rgba(248,249,247,.82)}
.site-footer a:hover{color:var(--desert-gold)}
.footer-grid{
  position:relative;
  max-width:1280px;
  margin:0 auto;
  padding:56px 24px 36px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:48px;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.brand--footer .brand-name{color:var(--desert-gold)}
.brand--footer .brand-sub{color:rgba(248,249,247,.55)}
.brand--footer .brand-mark{
  background:linear-gradient(135deg,var(--desert-gold) 0 50%,var(--oasis) 50% 100%);
}
.footer-tagline{
  margin:0;
  font-family:var(--font-display);
  font-size:18px;
  letter-spacing:1px;
  color:var(--snow);
  text-transform:uppercase;
}
.footer-trust{
  margin:0;
  max-width:36em;
  font-size:14px;
  line-height:1.8;
  color:rgba(248,249,247,.58);
  border-left:3px solid var(--rock);
  padding-left:12px;
}
.footer-nav-title{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--snow);
}
.footer-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 16px;
}
.footer-links a{
  padding:5px 0;
  font-size:14px;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s,padding-left .2s;
}
.footer-links a::before{content:"›";color:var(--rock);margin-right:6px}
.footer-links a:hover{
  color:var(--desert-gold);
  padding-left:4px;
  border-bottom-color:rgba(212,162,78,.25);
}
.footer-bottom{
  position:relative;
  max-width:1280px;
  margin:0 auto;
  padding:18px 24px;
  border-top:1px solid rgba(248,249,247,.12);
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  align-items:center;
  font-size:13px;
  color:rgba(248,249,247,.55);
}
.footer-bottom p{margin:0}
.footer-copyright{color:rgba(248,249,247,.7)}
.footer-contact-line{font-family:var(--font-mono);font-size:12.5px}
.footer-address{color:rgba(248,249,247,.45)}
.footer-icp{color:rgba(248,249,247,.4)}

/* ---- 返回顶部 ---- */
.back-to-top{
  position:fixed;
  right:22px;bottom:22px;
  z-index:80;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--desert-gold);
  background:var(--night);
  border:2px solid var(--desert-gold);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .25s ease,visibility .25s ease,transform .25s ease,background .2s,color .2s;
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--desert-gold);color:var(--night)}
.back-to-top-arrow{font-size:16px;line-height:1}
.back-to-top-text{font-size:12px;letter-spacing:2px}

/* ---- 通用布局与内容组件 ---- */
.container{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}
.section{padding:64px 0}
.section--tight{padding:40px 0}
.display-hero{
  font-family:var(--font-display);
  font-size:clamp(42px,8vw,64px);
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin:0 0 16px;
}
.eyebrow{
  margin:0 0 8px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--oasis);
}
.section-title{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,36px);
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--ink);
}
.lead{
  margin:0 0 24px;
  font-size:18px;
  line-height:1.8;
  color:rgba(14,22,36,.75);
}
.breadcrumb{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 24px;
  padding:0;
  font-size:14px;
}
.breadcrumb a{color:var(--sky)}
.breadcrumb a:hover{color:var(--night);text-decoration:underline}
.breadcrumb li+li::before{content:"/";color:var(--rock);margin-right:6px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 26px;
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  border:2px solid var(--night);
  background:transparent;
  color:var(--night);
  box-shadow:4px 4px 0 rgba(26,43,76,.2);
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s;
}
.btn:hover{background:var(--night);color:var(--snow);box-shadow:6px 6px 0 rgba(26,43,76,.3)}
.btn-solid{
  background:var(--sunset);
  border-color:var(--sunset);
  color:var(--night);
}
.btn-solid:hover{
  background:var(--night);
  border-color:var(--night);
  color:var(--sunset);
}
.btn-outline{
  background:transparent;
  border-color:var(--desert-gold);
  color:var(--desert-gold);
  box-shadow:4px 4px 0 rgba(212,162,78,.25);
}
.btn-outline:hover{
  background:var(--desert-gold);
  color:var(--night);
  border-color:var(--desert-gold);
}

.data-card{
  background:var(--snow);
  border:2px solid var(--rock);
  box-shadow:6px 6px 0 rgba(26,43,76,.1);
  padding:24px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.data-card:hover{
  transform:translateY(-4px);
  box-shadow:10px 12px 0 rgba(26,43,76,.16);
  border-color:var(--desert-gold);
}
.stat-number{
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:28px;
  line-height:1;
  color:var(--night);
}
.label-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:4px 10px;
  border:1px solid var(--rock);
  color:var(--oasis);
  background:rgba(42,127,108,.06);
}

.image-frame{
  position:relative;
  display:block;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(212,162,78,.16),rgba(26,43,76,.05));
  border:1px solid var(--rock);
}
.image-frame::before{
  content:"";
  display:block;
  padding-top:75%;
}
.image-frame::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(194,163,122,.45);
  pointer-events:none;
  z-index:2;
}
.image-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.image-frame--hero::before{padding-top:56.25%}
.image-frame--wide::before{padding-top:42.85%}
.image-frame--portrait::before{padding-top:133.33%}

.mountain-stripes{
  height:10px;
  border:0;
  background:repeating-linear-gradient(135deg,var(--night) 0 10px,var(--desert-gold) 10px 22px);
}
.divider-rule{
  height:2px;
  border:0;
  margin:32px 0;
  background:linear-gradient(90deg,var(--desert-gold),rgba(212,162,78,.1));
}

/* ---- 响应式 ---- */
@media (max-width:920px){
  .nav-toggle{display:inline-flex}
  .site-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin-left:0;
    display:none;
    background:var(--night);
    border-top:1px solid rgba(212,162,78,.25);
    box-shadow:0 18px 32px rgba(14,22,36,.4);
    max-height:calc(100vh - 76px);
    overflow-y:auto;
  }
  .site-nav[data-open]{display:block}
  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px 16px 16px;
  }
  .nav-list a{
    padding:14px 12px;
    border-bottom:1px solid rgba(248,249,247,.07);
  }
  .nav-list a::after{left:12px;right:auto;width:34px}
}
@media (max-width:800px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:32px;
    padding-top:44px;
  }
  .footer-links{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .header-frame{padding:10px 16px}
  .brand-sub{display:none}
  .brand-name{font-size:20px}
  .header-cta{display:none}
  .back-to-top{right:14px;bottom:14px}
}

/* ---- 动效偏好 ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
}