/* ==========================================================================
   赢宝服务 · 共享外壳与基础系统  /assets/site.css
   轨道导航 · 框景 · 档案卡 · 等宽索引
   ========================================================================== */

:root{
  --ink:#0A1B2E;
  --navy-700:#12293F;
  --paper:#F5F2EC;
  --warm-200:#E7E2D8;
  --amber:#C9A227;
  --amber-l:#E8C766;
  --celadon:#2E7D6B;
  --cyan:#3FA9A0;
  --slate:#6B7A8C;
  --body-ink:#3A4A5C;

  --rail-w:96px;
  --top-h:56px;
  --ease:cubic-bezier(.2,.7,.3,1);

  --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.85;
  font-weight:400;
  color:var(--body-ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(0deg, rgba(10,27,46,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,27,46,.035) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,picture,svg,video{ max-width:100%; }
img{ height:auto; }

h1,h2,h3,h4{ margin:0; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.15; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; }

a{ color:var(--navy-700); text-decoration:none; }
a:hover{ color:var(--ink); }

button{ font:inherit; }

::selection{ background:rgba(201,162,39,.28); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:2px;
}
.site-header :focus-visible,
.site-footer :focus-visible{ outline-color:var(--amber-l); }

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
@media (max-width:899px){
  html{ scroll-padding-top:calc(var(--top-h) + 14px); }
}

/* ---------- 主体避让轨道 ---------- */
@media (min-width:900px){
  body{ padding-left:var(--rail-w); }
}
@media (max-width:899px){
  body{ padding-top:var(--top-h); }
}

/* ---------- 跳转链接 ---------- */
.skip-link{
  position:absolute;
  top:-120px; left:10px;
  z-index:1200;
  display:inline-block;
  padding:10px 18px;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  background:var(--amber);
  border-radius:0 0 4px 4px;
  text-decoration:none;
  transition:top 200ms var(--ease);
}
.skip-link:focus{ top:0; }

/* ==========================================================================
   头部 · 侧边轨道 / 移动顶栏 + 抽屉
   ========================================================================== */
.site-header{
  position:fixed;
  top:0; right:auto; bottom:0; left:0;
  z-index:100;
  width:var(--rail-w);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  background:var(--ink);
  color:#fff;
  border-right:1px solid rgba(255,255,255,.10);
  padding:20px 0 16px;
}

/* 品牌 */
.header__brand{
  display:flex;
  justify-content:center;
  padding:0 6px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header__mark{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:9px;
  text-decoration:none;
  color:#fff;
}
.header__name{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:16px;
  font-weight:800;
  letter-spacing:.22em;
  line-height:1.1;
  color:#fff;
}
.header__tagline{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  line-height:1.1;
  color:var(--amber);
}

/* 导航 */
.header__nav{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 6px;
  overflow-y:auto;
  scrollbar-width:none;
}
.header__nav::-webkit-scrollbar{ width:0; height:0; }

.header__list{
  list-style:none;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:0;
}
.header__item{ display:flex; }
.header__link{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:9px 3px;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  border-left:2px solid transparent;
  transition:color 200ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.header__num{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  line-height:1;
  color:var(--slate);
  transition:color 200ms var(--ease);
}
.header__label{
  font-size:12px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.02em;
  text-align:center;
}
.header__link:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}
.header__link:hover .header__num{ color:var(--amber-l); }
.header__link[aria-current="page"]{
  color:#fff;
  background:rgba(201,162,39,.14);
  border-left-color:var(--amber);
}
.header__link[aria-current="page"] .header__num{ color:var(--amber); }

/* 轨道底部 CTA */
.header__foot{
  padding:16px 8px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.header__cta{
  display:block;
  padding:10px 6px;
  font-size:11px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:.02em;
  text-align:center;
  text-decoration:none;
  color:var(--ink);
  background:var(--amber);
  border-radius:4px;
  transition:background-color 200ms var(--ease), color 200ms var(--ease);
}
.header__cta:hover{ background:var(--amber-l); color:var(--ink); }

/* 移动按钮（桌面隐藏） */
.header__toggle{ display:none; }

/* 遮罩（桌面隐藏） */
.header__scrim{
  position:fixed;
  inset:0;
  z-index:110;
  background:rgba(10,27,46,.62);
  opacity:0;
  visibility:hidden;
  cursor:pointer;
  transition:opacity 240ms var(--ease), visibility 240ms var(--ease);
}
.site-header[data-open] .header__scrim{ opacity:1; visibility:visible; }
@media (min-width:900px){
  .header__scrim{ display:none; }
}

/* 滚动刻度 */
.header__progress{
  position:absolute;
  top:0; right:-1px; bottom:0;
  width:2px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}
.header__progress span{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(180deg,var(--amber-l),var(--cyan));
  transform:scaleY(0);
  transform-origin:center top;
  transition:transform 120ms linear;
}

/* ---------- 移动端 ---------- */
@media (max-width:899px){
  .site-header{
    top:0; right:0; bottom:auto; left:0;
    width:auto;
    height:var(--top-h);
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);
    z-index:130;
  }
  .header__brand{ padding:0; border-bottom:0; justify-content:flex-start; }
  .header__mark{ flex-direction:row; align-items:baseline; gap:9px; }
  .header__name{ writing-mode:horizontal-tb; font-size:16px; letter-spacing:.08em; }
  .header__tagline{ writing-mode:horizontal-tb; font-size:10px; letter-spacing:.16em; }

  .header__toggle{
    display:inline-flex;
    align-items:center;
    gap:9px;
    position:relative;
    z-index:140;
    padding:7px 10px;
    color:#fff;
    background:transparent;
    border:1px solid rgba(255,255,255,.24);
    border-radius:4px;
    cursor:pointer;
    transition:border-color 200ms var(--ease), background-color 200ms var(--ease);
  }
  .header__toggle:hover{ border-color:var(--amber-l); background:rgba(255,255,255,.06); }
  .header__toggle-num{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.12em;
    color:var(--amber);
  }
  .header__bars{ display:flex; flex-direction:column; gap:3px; width:16px; }
  .header__bars span{
    display:block;
    height:1.5px;
    width:100%;
    background:currentColor;
    transition:transform 220ms var(--ease), opacity 220ms var(--ease);
  }
  .site-header[data-open] .header__bars span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
  .site-header[data-open] .header__bars span:nth-child(2){ opacity:0; }
  .site-header[data-open] .header__bars span:nth-child(3){ transform:translateY(-4.5px) rotate(-45deg); }

  .header__nav{
    position:fixed;
    top:0; bottom:0; left:0; right:auto;
    width:min(84vw, 320px);
    z-index:120;
    display:block;
    align-items:stretch;
    justify-content:flex-start;
    padding:72px 16px 28px;
    background:var(--ink);
    border-right:1px solid rgba(255,255,255,.12);
    transform:translateX(-104%);
    transition:transform 260ms var(--ease);
    overflow-y:auto;
    overflow-x:hidden;
  }
  .site-header[data-open] .header__nav{ transform:translateX(0); }

  .header__list{ gap:0; }
  .header__link{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    padding:13px 12px;
    border-left:2px solid transparent;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .header__num{ font-size:11px; }
  .header__label{ font-size:15px; text-align:left; }

  .header__foot{ margin-top:18px; padding:18px 10px 0; }
  .header__cta{ font-size:13px; padding:12px 8px; }

  .header__progress{
    top:auto; bottom:-1px; left:0; right:0;
    width:auto;
    height:2px;
  }
  .header__progress span{ transform:scaleX(0); transform-origin:left center; }
}

@media (max-width:420px){
  .header__tagline{ display:none; }
}

/* ==========================================================================
   页脚
   ========================================================================== */
.site-footer{
  position:relative;
  margin-top:clamp(48px,7vw,96px);
  padding:clamp(46px,6vw,78px) clamp(20px,4vw,56px) 30px;
  background:var(--ink);
  color:rgba(255,255,255,.76);
  border-top:1px solid rgba(255,255,255,.08);
  font-size:14px;
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,var(--amber) 0%, var(--celadon) 38%, rgba(63,169,160,0) 76%);
}
.site-footer a:hover{ color:var(--amber-l); }

.footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,4vw,48px);
  max-width:1180px;
  margin:0 auto;
}
@media (min-width:720px){
  .footer__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1000px){
  .footer__grid{ grid-template-columns:1.7fr 1fr 1fr 1fr; }
}

.footer__mark{
  display:inline-block;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.01em;
  color:#fff;
  text-decoration:none;
}
.footer__tagline{
  margin:10px 0 16px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  color:var(--amber);
}
.footer__intro{
  max-width:32em;
  margin:0;
  font-size:14px;
  line-height:1.85;
  color:rgba(255,255,255,.62);
}

.footer__col-title{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 16px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--slate);
  line-height:1.4;
}
.footer__col-title::before{
  content:"";
  width:14px;
  height:1px;
  flex:0 0 auto;
  background:var(--amber);
}
.footer__links{
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.footer__links a{
  font-size:14px;
  color:rgba(255,255,255,.78);
  text-decoration:none;
  transition:color 180ms var(--ease);
}

.footer__contact{
  max-width:1180px;
  margin:clamp(30px,4vw,52px) auto 0;
  padding-top:clamp(24px,3vw,34px);
  border-top:1px solid rgba(255,255,255,.10);
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}
@media (min-width:760px){
  .footer__contact{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.footer__contact-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.footer__contact-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  color:var(--slate);
}
.footer__contact-value{
  font-size:15px;
  font-weight:500;
  color:#fff;
  overflow-wrap:anywhere;
}
.footer__note{
  grid-column:1 / -1;
  margin:0;
  max-width:60em;
  font-size:13px;
  line-height:1.8;
  color:var(--slate);
}

.copy-btn{
  margin-top:2px;
  padding:4px 9px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--amber-l);
  background:transparent;
  border:1px solid rgba(232,199,102,.42);
  border-radius:3px;
  cursor:pointer;
  transition:background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.copy-btn:hover{ background:rgba(232,199,102,.14); border-color:var(--amber-l); }
.copy-btn.is-copied{
  color:#fff;
  background:var(--celadon);
  border-color:var(--celadon);
}

.footer__legal{
  max-width:1180px;
  margin:clamp(28px,3vw,40px) auto 0;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--slate);
}
.footer__legal-item{ display:inline-block; }

/* ==========================================================================
   通用内容组件
   ========================================================================== */
.wrap{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,48px);
}

.section{
  padding-block:clamp(44px,6vw,84px);
}
.section + .section{
  border-top:1px solid var(--warm-200);
}

.divider{
  height:1px;
  border:0;
  margin:0;
  background:var(--warm-200);
}

.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:20px 0 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--slate);
}
.breadcrumbs a{
  color:var(--slate);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color 180ms var(--ease), border-color 180ms var(--ease);
}
.breadcrumbs a:hover{ color:var(--navy-700); border-bottom-color:var(--amber); }
.breadcrumbs [aria-current="page"]{ color:var(--navy-700); }
.breadcrumbs__sep{ color:var(--slate); opacity:.5; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--slate);
}
.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--amber);
}

.lede{
  max-width:34em;
  font-size:clamp(16px,1.5vw,18px);
  line-height:1.8;
  font-weight:400;
  color:var(--slate);
}

.prose{
  max-width:34em;
  font-size:16px;
  line-height:1.85;
  color:var(--body-ink);
}
.prose p:last-child{ margin-bottom:0; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:4px;
  cursor:pointer;
  transition:background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.btn--primary{ background:var(--amber); color:var(--ink); }
.btn--primary:hover{ background:var(--amber-l); color:var(--ink); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--navy-700); border-color:var(--warm-200); }
.btn--ghost:hover{ border-color:var(--amber); color:var(--ink); }
.btn--on-dark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.btn--on-dark:hover{ color:var(--amber-l); border-color:var(--amber-l); }

.tag{
  display:inline-block;
  padding:4px 10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  line-height:1.4;
  color:var(--slate);
  background:rgba(255,255,255,.6);
  border:1px solid var(--warm-200);
  border-radius:999px;
}
.tag--amber{
  color:#7A6112;
  background:rgba(232,199,102,.2);
  border-color:rgba(201,162,39,.45);
}
.tag--celadon{
  color:#fff;
  background:var(--celadon);
  border-color:var(--celadon);
}

.card{
  position:relative;
  padding:clamp(18px,2.4vw,28px);
  background:#fff;
  border:1px solid var(--warm-200);
  border-radius:6px;
}
.card--glass{
  background:rgba(255,255,255,.62);
  border-color:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.card--dark{
  background:var(--navy-700);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.82);
}
.card--dark h2,
.card--dark h3{ color:#fff; }

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(20px,3vw,36px);
}
@media (min-width:760px){
  .grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.grid--split{ grid-template-columns:1fr; }
@media (min-width:960px){
  .grid--split{ grid-template-columns:3fr 7fr; align-items:start; }
}

/* ---------- 图片容器 ---------- */
.media{
  position:relative;
  display:block;
  overflow:hidden;
  width:100%;
  aspect-ratio:16 / 10;
  border:1px solid var(--warm-200);
  border-radius:6px;
  background:
    linear-gradient(135deg, rgba(10,27,46,.06), rgba(63,169,160,.12)),
    var(--warm-200);
}
.media > img,
.media > picture > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.media--tall{ aspect-ratio:3 / 4; }
.media--phone{ aspect-ratio:9 / 18; max-width:300px; }
.media--tilt{ transform:rotate(-1.8deg); }
.media--framed::before,
.media--framed::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  border:1px solid var(--amber);
  pointer-events:none;
}
.media--framed::before{ top:10px; left:10px; border-right:0; border-bottom:0; }
.media--framed::after{ bottom:10px; right:10px; border-left:0; border-top:0; }

.media__caption{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
  margin-top:10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  line-height:1.6;
  color:var(--slate);
}

/* ---------- 无障碍 / 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .media--tilt{ transform:none; }
  .btn--primary:hover{ transform:none; }
}

body.nav-locked{ overflow:hidden; }