/* ============ 9博平台中心 · CN·9signal 共享样式 ============ */

:root{
  --ink:#0B1B2B;
  --ink-2:#12283D;
  --paper:#F4F1EA;
  --warm:#8C8F94;
  --mist:#C7D7E2;
  --signal:#FF6A2A;
  --signal-deep:#C2410C;
  --cyan:#27D3E0;
  --amber:#F2B544;
  --green:#2BBF9A;
  --text:#101820;

  --line-dark:rgba(199,215,226,.16);
  --line-soft:rgba(199,215,226,.09);
  --line-paper:rgba(16,24,32,.14);

  --font-display:"Barlow Condensed","Oswald","HarmonyOS Sans SC","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --font-serif:"Noto Serif SC","Songti SC","Source Han Serif SC",serif;

  --header-h:74px;
  --gutter:clamp(1rem,4vw,3.25rem);
  --radius:4px;
  --radius-lg:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (max-width:700px){
  :root{ --header-h:62px; }
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 18px);
}
body{
  margin:0;
  min-height:100%;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{display:block;max-width:100%;}
h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:.015em;
  text-wrap:balance;
}
h1{font-size:clamp(2.3rem,5.4vw,4.75rem);line-height:1;}
h2{font-size:clamp(1.7rem,3.2vw,2.75rem);}
h3{font-size:clamp(1.2rem,1.9vw,1.6rem);}
h4{font-family:var(--font-body);font-size:1.05rem;font-weight:700;line-height:1.5;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0;padding:0;}
a{color:var(--cyan);text-decoration:none;transition:color .15s var(--ease),border-color .15s var(--ease);}
a:hover{color:var(--paper);}
strong,b{font-weight:700;}
hr{border:0;height:1px;background:var(--line-dark);margin:2rem 0;}
::selection{background:var(--signal);color:var(--ink);}

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

/* ---------- 布局 ---------- */
.container{
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:clamp(2.5rem,6vw,5.5rem);}
.section--tight{padding-block:clamp(1.5rem,3.5vw,3rem);}
.surface-paper{
  background:var(--paper);
  color:var(--text);
}
.surface-paper a{color:var(--signal-deep);}
.surface-paper a:hover{color:var(--text);}
.surface-deep{
  background:var(--ink-2);
  color:var(--paper);
}

.prose{
  max-width:38em;
  font-size:1.0625rem;
  line-height:1.8;
  letter-spacing:.01em;
}
.prose p{margin-bottom:1.15em;}
.prose h2,.prose h3{margin:1.9em 0 .7em;}
.prose ul,.prose ol{margin:0 0 1.2em 1.2em;padding:0;}
.prose li{margin-bottom:.5em;}

.grid{
  display:grid;
  gap:clamp(1rem,2.2vw,2rem);
}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}

/* ---------- 工具类 ---------- */
.mono{
  font-family:var(--font-mono);
  font-weight:500;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:.9rem;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:currentColor;
  flex:0 0 auto;
}
.surface-paper .eyebrow{color:var(--signal-deep);}
.rule-signal{
  height:1px;
  border:0;
  margin:0;
  background-image:repeating-linear-gradient(90deg,var(--warm) 0 1px,transparent 1px 9px);
  opacity:.55;
}

/* ---------- 头部 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--ink);
  color:var(--paper);
  border-bottom:1px solid var(--line-soft);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.is-scrolled{
  background:#0A1826;
  box-shadow:0 18px 34px -22px rgba(0,0,0,.95);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:clamp(.75rem,2vw,2rem);
  min-height:var(--header-h);
}
.skip-link{
  position:absolute;
  left:1rem;
  top:-120%;
  z-index:120;
  padding:.6rem 1.05rem;
  background:var(--signal);
  color:var(--ink);
  font-weight:700;
  font-size:.85rem;
  border-radius:2px;
  transition:top .18s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible{ top:.75rem; color:var(--ink); }

.brand{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  flex:0 0 auto;
  padding:.3rem 0;
  color:inherit;
  text-decoration:none;
}
.brand:hover{color:inherit;}
.brand-glyph{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:0 0 auto;
  background:var(--signal);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:1.05rem;
  font-weight:700;
  line-height:1;
  border-radius:4px 14px 4px 14px;
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.brand-call{
  font-family:var(--font-mono);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan);
}
.brand-name{
  font-family:var(--font-body);
  font-size:.96rem;
  font-weight:700;
  letter-spacing:.06em;
}
.brand--footer .brand-glyph{width:42px;height:42px;font-size:1.15rem;}
.brand--footer .brand-name{font-size:1.08rem;}

.header-scale{
  flex:1 1 auto;
  min-width:1.5rem;
  height:1px;
  background-image:repeating-linear-gradient(90deg,rgba(199,215,226,.38) 0 1px,transparent 1px 9px);
}

.site-nav{
  display:flex;
  align-items:center;
  margin-left:auto;
}
.nav-list{
  display:flex;
  align-items:center;
  gap:clamp(.3rem,1.1vw,1.2rem);
  list-style:none;
  margin:0;
  padding:0;
}
.nav-list a{
  display:inline-block;
  padding:.42rem .2rem;
  font-size:.86rem;
  font-weight:500;
  letter-spacing:.045em;
  color:var(--mist);
  border-bottom:2px solid transparent;
}
.nav-list a:hover,
.nav-list a:focus-visible{
  color:var(--paper);
  border-bottom-color:var(--cyan);
}
.nav-list a[aria-current="page"]{
  color:var(--paper);
  border-bottom-color:var(--signal);
}

.nav-toggle{
  display:none;
  align-items:center;
  gap:.55rem;
  margin-left:auto;
  padding:.5rem .7rem;
  background:transparent;
  color:var(--paper);
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  border:1px solid rgba(199,215,226,.35);
  border-radius:3px;
  cursor:pointer;
  transition:border-color .15s var(--ease),background-color .15s var(--ease);
}
.nav-toggle:hover{border-color:var(--cyan);}
.nav-toggle-bars{
  display:flex;
  flex-direction:column;
  gap:3px;
  width:18px;
}
.nav-toggle-bars span{
  display:block;
  height:2px;
  width:100%;
  background:var(--cyan);
  transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
.nav-toggle-label{line-height:1;}

.header-meter{
  position:relative;
  height:7px;
  overflow:hidden;
}
.header-ticks{
  height:100%;
  background-image:
    repeating-linear-gradient(90deg,rgba(199,215,226,.30) 0 1px,transparent 1px 10px),
    repeating-linear-gradient(90deg,var(--signal) 0 1px,transparent 1px 130px);
  opacity:.75;
}
.scroll-progress{
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:100%;
  background:var(--signal);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .12s linear;
}

/* ---------- 页脚 ---------- */
.site-footer{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  border-top:1px solid var(--line-dark);
  padding-top:clamp(2.5rem,5vw,4rem);
  padding-bottom:1.75rem;
}
.footer-inner{
  display:grid;
  grid-template-columns:minmax(240px,1.5fr) minmax(140px,.7fr) minmax(140px,.7fr) minmax(220px,1.15fr);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.footer-line{
  margin:0;
  max-width:24em;
  font-size:.9rem;
  line-height:1.7;
  color:var(--mist);
}
.footer-batch{
  margin:0;
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--signal);
}
.footer-title{
  margin:0 0 .95rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--warm);
}
.footer-links ul{
  display:grid;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
}
.footer-links a{
  display:inline-block;
  font-size:.88rem;
  color:var(--mist);
  border-bottom:1px solid transparent;
  padding-bottom:1px;
}
.footer-links a:hover{
  color:var(--paper);
  border-bottom-color:var(--signal);
}
.footer-links--legal a{color:var(--warm);}
.footer-links--legal a:hover{color:var(--paper);}

.footer-contact-list{
  display:grid;
  gap:.55rem;
  list-style:none;
  margin:0;
  padding:0;
}
.footer-contact-list li{
  display:flex;
  flex-wrap:wrap;
  gap:.25rem .7rem;
  align-items:baseline;
  font-size:.88rem;
}
.footer-label{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--warm);
  text-transform:uppercase;
  min-width:2.6em;
}
.footer-value{
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.02em;
  word-break:break-all;
}
.footer-address{
  margin-top:1rem;
  font-style:normal;
  font-size:.84rem;
  line-height:1.7;
  color:var(--mist);
  padding-left:.75rem;
  border-left:1px solid rgba(255,106,42,.55);
}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem 1.75rem;
  margin-top:clamp(1.75rem,4vw,3rem);
  padding-top:1.25rem;
  border-top:1px solid var(--line-soft);
  font-size:.76rem;
  color:var(--warm);
}
.footer-bottom-note{margin:0;letter-spacing:.03em;}
.footer-icp{
  margin:0;
  font-family:var(--font-mono);
  letter-spacing:.06em;
  color:var(--warm);
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.7rem 1.15rem;
  font-family:var(--font-body);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.3;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:3px;
  cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.btn:hover{transform:translateY(-1px);}
.btn--signal{
  background:var(--signal);
  color:var(--ink);
}
.btn--signal:hover{background:#FF8149;color:var(--ink);}
.btn--ghost{
  background:transparent;
  color:var(--paper);
  border-color:rgba(199,215,226,.4);
}
.btn--ghost:hover{
  color:var(--paper);
  border-color:var(--cyan);
  background:rgba(39,211,224,.08);
}
.btn--light{
  background:var(--paper);
  color:var(--text);
}
.btn--light:hover{background:#fff;color:var(--text);}
.btn--sm{
  padding:.42rem .8rem;
  font-size:.8rem;
}

/* ---------- 状态标签 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.14rem .45rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--mist);
  background:transparent;
  border:1px solid currentColor;
  border-radius:2px;
}
.tag--live{color:var(--cyan);}
.tag--ok{color:var(--green);}
.tag--warn{color:var(--amber);}
.tag--signal{color:var(--signal);}
.surface-paper .tag{color:var(--text);}
.surface-paper .tag--live{color:#0E7F8B;}
.surface-paper .tag--ok{color:#1A7A62;}
.surface-paper .tag--warn{color:#9A6A0A;}
.surface-paper .tag--signal{color:var(--signal-deep);}

/* ---------- 面包屑 ---------- */
.breadcrumb{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--warm);
}
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  list-style:none;
  margin:0;
  padding:0;
}
.breadcrumb li{
  display:flex;
  align-items:center;
  gap:.4rem;
}
.breadcrumb li + li::before{
  content:"›";
  color:var(--warm);
  opacity:.7;
}
.breadcrumb a{
  color:inherit;
  border-bottom:1px solid transparent;
}
.breadcrumb a:hover{
  color:var(--paper);
  border-bottom-color:var(--cyan);
}
.surface-paper .breadcrumb a:hover{
  color:var(--text);
  border-bottom-color:var(--signal-deep);
}

/* ---------- 卡片 ---------- */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.8rem;
  padding:clamp(1.1rem,2vw,1.75rem);
  background:var(--ink-2);
  color:var(--paper);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.card:hover{
  border-color:rgba(39,211,224,.45);
  transform:translateY(-2px);
}
.card a{color:inherit;}
.surface-paper .card{
  background:#FFFFFF;
  color:var(--text);
  border-color:var(--line-paper);
}
.surface-paper .card:hover{border-color:rgba(194,65,12,.4);}
.surface-paper .card a{color:var(--signal-deep);}

/* ---------- 图像容器 ---------- */
.media-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 9;
  background:var(--ink-2);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);
}
.media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.03);
}
.media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(244,241,234,.055) 0 1px,transparent 1px 3px);
}
.media-frame--wide{aspect-ratio:21 / 9;}
.media-frame--tall{aspect-ratio:4 / 5;}
.media-frame--square{aspect-ratio:1 / 1;}
.surface-paper .media-frame{
  background:#E4E7E8;
  border-color:var(--line-paper);
}

/* ---------- 有机形状 ---------- */
.shape-organic{
  overflow:hidden;
  border-radius:42% 58% 55% 45% / 52% 42% 58% 48%;
  background:var(--ink-2);
  border:1px solid var(--line-dark);
}
.surface-paper .shape-organic{
  background:#E7E4DC;
  border-color:var(--line-paper);
}

/* ---------- 揭示动效 ---------- */
@media (prefers-reduced-motion:no-preference){
  html.has-reveal [data-reveal]{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s var(--ease),transform .6s var(--ease);
    transition-delay:var(--reveal-delay,0ms);
    will-change:opacity,transform;
  }
  html.has-reveal [data-reveal].is-visible{
    opacity:1;
    transform:none;
  }
}

/* ---------- 响应式：头部 ---------- */
@media (max-width:960px){
  .nav-toggle{display:inline-flex;}
  .header-scale{display:none;}
  .site-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    margin-left:0;
    padding:.6rem var(--gutter) 1.3rem;
    background:var(--ink-2);
    border-bottom:1px solid var(--line-dark);
    box-shadow:0 26px 44px -26px rgba(0,0,0,.95);
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
  }
  .site-nav[data-open]{display:flex;}
  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .nav-list a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.9rem .15rem;
    font-size:.98rem;
    border-bottom:1px solid var(--line-soft);
    border-radius:0;
  }
  .nav-list a:hover,
  .nav-list a:focus-visible{
    border-bottom-color:var(--cyan);
    background:rgba(39,211,224,.06);
  }
  .nav-list a[aria-current="page"]{
    border-bottom-color:var(--signal);
    color:var(--paper);
  }
  .nav-list a::after{
    content:"→";
    font-family:var(--font-mono);
    color:var(--warm);
    opacity:.7;
  }
}

/* ---------- 响应式：页脚 ---------- */
@media (max-width:1080px){
  .footer-inner{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:620px){
  .footer-inner{
    grid-template-columns:minmax(0,1fr);
    gap:1.75rem;
  }
  .footer-bottom{
    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;
    scroll-behavior:auto !important;
  }
  .btn:hover,
  .card:hover{transform:none;}
  .scroll-progress{transition:none;}
  html.has-reveal [data-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
}