/* =========================================================
   壹号品牌站 — 共享样式 /assets/site.css
   ========================================================= */

/* ---------- 1. 变量 ---------- */
:root{
  --ink-0:#0A1826;
  --ink-1:#102A43;
  --ink-2:#1B3A54;
  --cyan:#35E0D6;
  --orange:#FF8A3D;
  --violet:#7C8CFF;
  --paper:#F1F5F9;
  --mist:#9FB3C8;
  --rule:#2E4256;
  --green:#3DD68C;
  --amber:#FFC24B;

  --accent:var(--cyan);

  --font-sans:"Noto Sans SC","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --rail:88px;
  --brandbar-h:56px;
  --entrybar-h:48px;
  --pad-x:clamp(16px,4vw,40px);
  --rad:2px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:220ms;
  --maxw:1240px;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--ink-0);
  color:var(--mist);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.8;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{margin:0;color:var(--paper);font-weight:700;line-height:1.25;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0}
li{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img,svg,video{max-width:100%;display:block}
h1{font-size:clamp(40px,7vw,96px);font-weight:900;letter-spacing:-.03em;line-height:1.05}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:clamp(19px,2.1vw,24px)}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a:focus-visible,
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- 3. 桌面端框架留白 ---------- */
@media (min-width:1024px){
  body{
    padding-top:calc(var(--brandbar-h) + var(--entrybar-h));
    padding-left:var(--rail);
    padding-right:var(--pad-x);
  }
}

/* ---------- 4. 通用排版组件 ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
@media (min-width:1024px){
  .container{padding-inline:0}
}

.section{
  padding-block:clamp(48px,7vw,96px);
  border-top:1px solid var(--rule);
}
.section:first-of-type{border-top:0}

.h-sec{
  position:relative;
  padding-left:18px;
  font-size:clamp(24px,3vw,34px);
  font-weight:700;
  letter-spacing:-.01em;
}
.h-sec::before{
  content:"";
  position:absolute;
  left:0;
  top:.32em;
  width:2px;
  height:1em;
  background:var(--accent);
}

.h-sub{
  font-size:clamp(17px,1.6vw,20px);
  font-weight:700;
  color:var(--paper);
  letter-spacing:-.005em;
}

.lede{
  font-size:clamp(17px,1.8vw,20px);
  line-height:1.8;
  color:var(--paper);
  max-width:60ch;
}

.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}

.annot{
  font-size:12px;
  letter-spacing:.18em;
  color:var(--mist);
  writing-mode:vertical-rl;
}

/* ---------- 5. 标签 / 按钮 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.6;
  letter-spacing:.08em;
  color:var(--mist);
  border:1px solid var(--rule);
  border-radius:var(--rad);
  white-space:nowrap;
}
.tag--cyan{color:var(--cyan);border-color:rgba(53,224,214,.42)}
.tag--orange{color:var(--orange);border-color:rgba(255,138,61,.45)}
.tag--violet{color:var(--violet);border-color:rgba(124,140,255,.45)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 20px;
  font-family:var(--font-sans);
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  color:var(--accent);
  background:transparent;
  border:1px solid var(--accent);
  border-radius:var(--rad);
  cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:hover{background:var(--accent);color:var(--ink-0)}

.btn--solid{background:var(--accent);color:var(--ink-0)}
.btn--solid:hover{background:transparent;color:var(--accent)}

.btn--ghost{border-color:var(--rule);color:var(--paper)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}

/* ---------- 6. 框景 / 面板 ---------- */
.frame{
  position:relative;
  border:1px solid var(--rule);
  border-radius:var(--rad);
  background:var(--ink-1);
}
.frame::before,
.frame::after{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  pointer-events:none;
}
.frame::before{
  top:-1px;
  left:-1px;
  border-top:2px solid var(--accent);
  border-left:2px solid var(--accent);
}
.frame::after{
  right:-1px;
  bottom:-1px;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
}

.panel{
  position:relative;
  padding:20px;
  background:var(--ink-1);
  border:1px solid var(--rule);
  border-radius:var(--rad);
}

/* ---------- 7. 图片容器 ---------- */
.figure{
  position:relative;
  margin:0;
  overflow:hidden;
  background:var(--ink-2);
  border:1px solid var(--rule);
  border-radius:var(--rad);
  aspect-ratio:16 / 10;
}
.figure::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:32px 32px;
  opacity:.28;
}
.figure__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.figure--wide{aspect-ratio:16 / 9}
.figure--tall{aspect-ratio:4 / 5}
.figure--square{aspect-ratio:1 / 1}

.figure__cap{
  display:block;
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--mist);
}

/* ---------- 8. 网格 / 列表 / 数据 ---------- */
.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.list li{
  position:relative;
  padding-left:20px;
  margin-block:10px;
  font-size:16px;
  line-height:1.8;
}
.list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:8px;
  height:1px;
  background:var(--accent);
}

.stat{display:grid;gap:4px}
.stat__num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(24px,3.4vw,40px);
  font-weight:500;
  line-height:1;
  color:var(--paper);
}
.stat__label{
  font-size:12px;
  letter-spacing:.14em;
  color:var(--mist);
}

/* ---------- 9. 分屏 / 面包屑 ---------- */
.split{
  display:grid;
  gap:clamp(20px,3vw,40px);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .split{grid-template-columns:5fr 7fr}
  .split--flip{grid-template-columns:7fr 5fr}
}

.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--mist);
}
.crumbs a{color:var(--mist);transition:color var(--dur) var(--ease)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current="page"]{color:var(--paper)}
.crumbs__sep{color:var(--rule)}

/* ---------- 10. 滚入显现协议 ---------- */
[data-js="on"] [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 320ms var(--ease),transform 320ms var(--ease);
}
[data-js="on"] [data-reveal="in"]{
  opacity:1;
  transform:none;
}

/* =========================================================
   11. 头部
   ========================================================= */
.site-header{position:relative}

.skip-link{
  position:fixed;
  left:12px;
  top:8px;
  z-index:200;
  padding:10px 18px;
  background:var(--accent);
  color:var(--ink-0);
  font-size:14px;
  font-weight:700;
  border-radius:var(--rad);
  transform:translateY(-260%);
  transition:transform 180ms var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* --- 品牌栏 --- */
.brandbar{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:var(--brandbar-h);
  padding-inline:var(--pad-x);
  background:var(--ink-0);
  border-bottom:1px solid var(--rule);
  z-index:95;
}
@media (min-width:1024px){
  .brandbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
  }
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--paper);
  flex:none;
}
.brand__mark{
  position:relative;
  width:16px;
  height:16px;
  flex:none;
  border:1px solid var(--accent);
  border-radius:var(--rad);
}
.brand__mark::after{
  content:"";
  position:absolute;
  inset:4px;
  background:var(--accent);
}
.brand__name{
  font-size:17px;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--paper);
  white-space:nowrap;
}
.brand__domain{
  display:none;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0;
  color:var(--mist);
  white-space:nowrap;
}
@media (min-width:600px){
  .brand__domain{display:inline}
}

.brandbar__note{
  display:none;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--mist);
  padding-left:16px;
  border-left:1px solid var(--rule);
  white-space:nowrap;
}
@media (min-width:900px){
  .brandbar__note{display:block}
}

.brandbar__tools{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}

.tool{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 12px;
  font-size:12.5px;
  font-weight:500;
  color:var(--mist);
  background:transparent;
  border:1px solid var(--rule);
  border-radius:var(--rad);
  cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.tool:hover{color:var(--paper);border-color:var(--mist)}
.tool[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.tool__dot{
  width:6px;
  height:6px;
  flex:none;
  background:var(--rule);
  transition:background var(--dur) var(--ease);
}
.tool[aria-pressed="true"] .tool__dot{background:var(--accent)}
.tool__label{white-space:nowrap}
@media (max-width:520px){
  .tool__label{display:none}
  .tool{padding:0 10px}
}

.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:32px;
  padding:0 13px;
  font-size:13px;
  font-weight:700;
  color:var(--ink-0);
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:var(--rad);
  cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav-toggle:hover{background:transparent;color:var(--accent)}
.nav-toggle__bars{
  position:relative;
  width:13px;
  height:2px;
  flex:none;
  background:currentColor;
  transition:transform var(--dur) var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute;
  left:0;
  width:13px;
  height:2px;
  background:currentColor;
  transition:transform var(--dur) var(--ease);
}
.nav-toggle__bars::before{top:-5px}
.nav-toggle__bars::after{top:5px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(5px) rotate(-90deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-5px) rotate(-90deg);opacity:0}
.nav-toggle__label{white-space:nowrap}
@media (min-width:1024px){
  .nav-toggle{display:none}
}

.rollbar{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:0 50%;
  pointer-events:none;
  transition:transform 90ms linear;
}

/* --- 页首第二栏：入口指示带 --- */
.entrybar{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:var(--entrybar-h);
  padding:8px var(--pad-x);
  background:var(--ink-1);
  border-bottom:1px solid var(--rule);
  z-index:94;
}
@media (min-width:1024px){
  .entrybar{
    position:fixed;
    top:var(--brandbar-h);
    left:var(--rail);
    right:0;
  }
}

.entrybar__dot{
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(255,138,61,.16);
}
.entrybar__label{
  font-size:14px;
  font-weight:700;
  color:var(--paper);
  white-space:nowrap;
}
.entrybar__meta{
  display:none;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--mist);
  white-space:nowrap;
}
@media (min-width:768px){
  .entrybar__meta{display:inline}
}
.entrybar__cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  padding:6px 14px;
  font-size:13px;
  font-weight:700;
  color:var(--orange);
  border:1px solid rgba(255,138,61,.5);
  border-radius:var(--rad);
  white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.entrybar__cta:hover{background:var(--orange);color:var(--ink-0)}

/* --- 主导航：框架式侧边框 --- */
.sitenav{
  background:var(--ink-0);
  border-bottom:1px solid var(--rule);
  max-height:0;
  overflow:hidden;
  transition:max-height 280ms var(--ease);
}
.sitenav[data-open]{max-height:560px}

.sitenav__list{
  padding:6px 0;
}
.sitenav__list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px var(--pad-x);
  font-size:15px;
  color:var(--paper);
  border-left:2px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.sitenav__list a::after{
  content:attr(data-idx);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--rule);
}
.sitenav__list a:hover{
  color:var(--accent);
  border-left-color:var(--accent);
  background:rgba(241,245,249,.05);
}
.sitenav__list a[aria-current="page"]{
  color:var(--accent);
  border-left-color:var(--accent);
  background:rgba(241,245,249,.07);
}

@media (min-width:1024px){
  .sitenav{
    position:fixed;
    top:var(--brandbar-h);
    bottom:0;
    left:0;
    width:var(--rail);
    display:flex;
    justify-content:center;
    max-height:none;
    overflow:visible;
    border-bottom:0;
    border-right:1px solid var(--rule);
    background:var(--ink-0);
    z-index:90;
  }
  .sitenav__list{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:32px 0;
  }
  .sitenav__list a{
    display:block;
    padding:16px 10px;
    writing-mode:vertical-rl;
    font-size:13px;
    letter-spacing:.14em;
    border-left:0;
    border-top:1px solid transparent;
    border-radius:var(--rad);
  }
  .sitenav__list a::after{display:none}
  .sitenav__list a:hover{
    border-left-color:transparent;
    border-top-color:var(--accent);
    background:rgba(241,245,249,.06);
  }
  .sitenav__list a[aria-current="page"]{
    border-left-color:transparent;
    border-top:2px solid var(--accent);
    background:rgba(241,245,249,.09);
    color:var(--accent);
  }
}

/* --- 右侧竖排刻度注解 --- */
.edge-note{display:none}
@media (min-width:1024px){
  .edge-note{
    display:block;
    position:fixed;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    writing-mode:vertical-rl;
    font-size:11px;
    letter-spacing:.22em;
    color:var(--rule);
    pointer-events:none;
    z-index:80;
  }
}

/* =========================================================
   12. 页脚
   ========================================================= */
.site-footer{
  position:relative;
  margin-top:clamp(56px,8vw,120px);
  background:var(--ink-1);
  border-top:1px solid var(--rule);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:120px;
  height:2px;
  background:var(--accent);
}

.footer__grid{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(32px,5vw,56px) var(--pad-x) 24px;
  display:grid;
  gap:32px 24px;
  grid-template-columns:1fr;
}
@media (min-width:720px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .footer__grid{
    grid-template-columns:1.7fr .9fr .9fr .9fr 1.5fr;
    gap:24px;
  }
}

.footer__brand .brand{gap:10px}
.footer__domain{
  margin-top:12px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--mist);
  letter-spacing:0;
}
.footer__note{
  margin-top:12px;
  max-width:30ch;
  font-size:13px;
  line-height:1.7;
  color:var(--mist);
}

.footer__col{min-width:0}
.footer__col--wide{grid-column:span 1}

.footer__title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--paper);
}
.footer__title::before{
  content:"";
  width:8px;
  height:8px;
  flex:none;
  background:var(--accent);
}

.footer__list{
  display:grid;
  gap:9px;
}
.footer__list a{
  font-size:14px;
  color:var(--mist);
  transition:color var(--dur) var(--ease);
}
.footer__list a:hover{color:var(--accent)}

.footer__list--contact li{
  font-size:13px;
  line-height:1.7;
  color:var(--mist);
  word-break:break-word;
}
.footer__list--contact .mono{
  display:inline-block;
  min-width:44px;
  margin-right:6px;
  font-size:12px;
  color:var(--rule);
}

.footer__bottom{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:16px var(--pad-x) 28px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 24px;
  font-size:12px;
  color:var(--mist);
}
.footer__legal{color:var(--mist)}
.footer__copy{margin-left:auto}

/* =========================================================
   13. 偏好与降级
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-js="on"] [data-reveal]{
    opacity:1;
    transform:none;
  }
  .rollbar{transition:none}
}