/* ==== 1. Reset ==== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h, 116px) + 16px);}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--cyan-deep);outline-offset:2px;border-radius:6px;}
.site-header :focus-visible,.site-footer :focus-visible{outline-color:var(--cyan);}

/* ==== 2. Tokens ==== */
:root{
  --ink:#1B2A4A;
  --ink-deep:#101B31;
  --orange:#F28C28;
  --orange-soft:#FFC078;
  --orange-deep:#B85F14;
  --cyan:#2EE6D6;
  --cyan-deep:#0E8F87;
  --paper:#FFF7EE;
  --mist:#E4E9F2;
  --slate:#5A6B85;
  --white:#FFFFFF;

  --rail-w:96px;
  --bar-h:76px;
  --header-h:76px;
  --radius:20px;
  --radius-lg:28px;
  --gutter:24px;
  --maxw:1240px;
  --ease:cubic-bezier(.22,1,.36,1);

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

  --scroll-p:0;
}

/* ==== 3. Base typography ==== */
html{background:var(--paper);}
body{
  margin:0;
  padding-top:var(--header-h);
  padding-left:var(--rail-w);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-weight:900;letter-spacing:-.02em;line-height:1.14;}
h1{font-size:clamp(34px,6vw,64px);}
h2{font-size:clamp(26px,3.6vw,40px);}
h3{font-size:clamp(19px,2vw,24px);letter-spacing:-.01em;}
p{max-width:62ch;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.num-lg{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:clamp(30px,4.6vw,52px);
  letter-spacing:-.03em;
  line-height:1;
  color:var(--orange);
  display:block;
}
.site-footer .num-lg{color:var(--orange-soft);}

/* ==== 4. Layout utilities ==== */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(18px,3vw,40px);
}
.grid-12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gutter);
}
.section{padding-block:clamp(56px,7vw,104px);}

/* ==== 5. Shared components ==== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:999px;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.btn-orange{background:var(--orange);color:var(--ink-deep);}
.btn-orange:hover{background:var(--orange-soft);}
.btn-ghost{background:transparent;color:var(--paper);border-color:rgba(255,247,238,.42);}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);}
.btn-ink{background:var(--ink);color:var(--paper);}
.btn-ink:hover{background:var(--ink-deep);}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--mist);
  background:var(--white);
  color:var(--slate);
  font-size:12px;
  letter-spacing:.04em;
  white-space:nowrap;
}
.pill-live{
  border-color:rgba(14,143,135,.35);
  background:rgba(46,230,214,.12);
  color:var(--cyan-deep);
  font-family:var(--font-mono);
}

.surface{
  background:var(--white);
  border:1px solid var(--mist);
  border-radius:var(--radius);
  padding:clamp(20px,2.4vw,30px);
}
.surface-dark{
  background:var(--ink);
  border:1px solid rgba(228,233,242,.16);
  border-radius:var(--radius);
  color:var(--paper);
  padding:clamp(20px,2.4vw,30px);
}

.breadcrumb{margin-bottom:18px;}
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:13px;
  color:var(--slate);
}
.breadcrumb li+li::before{content:"/";margin-right:8px;color:var(--mist);}
.breadcrumb a{color:var(--orange-deep);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}

.section .eyebrow,
.eyebrow{
  writing-mode:vertical-rl;
  font-size:12px;
  letter-spacing:.28em;
  color:var(--orange-deep);
  text-transform:uppercase;
}
.sec-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:clamp(12px,2vw,28px);
  margin-bottom:clamp(24px,3vw,44px);
}
.sec-num{
  font-family:var(--font-mono);
  font-size:clamp(38px,6vw,72px);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.05em;
  color:var(--orange);
}

/* 图片容器基础规则（页面阶段放 img 占位） */
.media-frame{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--ink);
  aspect-ratio:16/10;
  isolation:isolate;
}
.media-frame > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media-frame::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:52%;
  background:linear-gradient(to top,rgba(16,27,49,.82),rgba(16,27,49,0));
  pointer-events:none;
}
.media-frame.is-tall{aspect-ratio:3/4;}
.media-frame.is-wide{aspect-ratio:21/9;}
.media-caption{
  margin-top:10px;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--slate);
}

/* ==== 6. Header ==== */
.skip-link{
  position:absolute;
  top:-96px;
  left:12px;
  z-index:300;
  padding:12px 20px;
  border-radius:999px;
  background:var(--cyan);
  color:var(--ink-deep);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:12px;}

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  background:var(--ink);
  color:var(--paper);
}
.site-header::after{
  content:"";
  position:absolute;
  left:var(--rail-w);
  right:0;
  bottom:0;
  height:3px;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan) 70%,var(--orange) 100%);
  transform:scaleX(var(--scroll-p));
  transform-origin:0 50%;
  pointer-events:none;
}

.frame-bar{
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,26px);
  height:var(--bar-h);
  padding-inline:clamp(16px,2.4vw,34px);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--paper);
  flex:0 0 auto;
}
.brand-name{
  font-size:clamp(19px,2vw,23px);
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1;
}
.brand-sep{
  width:1px;
  height:28px;
  background:rgba(255,247,238,.26);
}
.brand-tag{
  writing-mode:vertical-rl;
  font-size:10px;
  line-height:1;
  letter-spacing:.24em;
  color:var(--orange-soft);
  height:28px;
  display:flex;
  align-items:center;
}

.live-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  max-width:none;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(46,230,214,.34);
  background:rgba(46,230,214,.08);
  font-size:12px;
  letter-spacing:.04em;
  white-space:nowrap;
}
.live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
  flex:0 0 auto;
}
.live-label{color:rgba(255,247,238,.66);}
.live-time{color:var(--cyan);font-size:13px;font-weight:700;letter-spacing:.02em;}

.bar-cta{flex:0 0 auto;}

.nav-toggle{
  display:none;
  align-items:center;
  gap:8px;
  min-height:44px;
  min-width:44px;
  padding:0 14px;
  background:transparent;
  border:1px solid rgba(228,233,242,.32);
  border-radius:999px;
  color:var(--paper);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.nav-toggle-bars{position:relative;display:block;width:16px;height:10px;flex:0 0 auto;}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:16px;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform .2s var(--ease);
}
.nav-toggle-bars::before{top:0;}
.nav-toggle-bars::after{bottom:0;}

/* 桌面：左侧框架竖条导航 */
.rail-label{
  display:block;
  align-self:center;
  margin-bottom:14px;
  writing-mode:vertical-rl;
  font-size:10px;
  letter-spacing:.32em;
  color:rgba(255,247,238,.34);
}

.frame-nav{
  background:var(--ink-deep);
  border-right:1px solid rgba(228,233,242,.14);
}
.nav-list{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin:0;
  padding:0;
  list-style:none;
}
.nav-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-height:44px;
  padding:8px 4px;
  border-radius:14px;
  color:rgba(255,247,238,.74);
  font-size:13px;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
.nav-link:hover{background:rgba(242,140,40,.15);color:var(--paper);}
.nav-idx{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.12em;
  color:rgba(255,247,238,.42);
}
.nav-link[aria-current="page"]{
  background:var(--orange);
  color:var(--ink-deep);
}
.nav-link[aria-current="page"] .nav-idx{color:rgba(27,42,74,.62);}
.nav-link[aria-current="page"]:hover{background:var(--orange-soft);}

@media (min-width:900px){
  .frame-nav{
    position:fixed;
    left:0;
    top:var(--bar-h);
    bottom:0;
    width:var(--rail-w);
    z-index:40;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:18px 0;
    overflow-y:auto;
    scrollbar-width:thin;
  }
}

/* 移动：横向滑动胶囊条 + 展开面板 */
@media (max-width:899px){
  :root{
    --rail-w:0px;
    --bar-h:64px;
    --header-h:116px;
  }
  .frame-bar{gap:10px;padding-inline:16px;}
  .brand-sep,.brand-tag{display:none;}
  .live-chip{padding:5px 10px;font-size:11px;}
  .live-time{font-size:12px;}
  .bar-cta{display:none;}
  .nav-toggle{display:inline-flex;}
  .site-header[data-open] .nav-toggle-bars::before{transform:translateY(4px) rotate(45deg);}
  .site-header[data-open] .nav-toggle-bars::after{transform:translateY(-4px) rotate(-45deg);}

  .rail-label{display:none;}
  .frame-nav{
    height:calc(var(--header-h) - var(--bar-h));
    border-top:1px solid rgba(228,233,242,.14);
    border-right:0;
    background:var(--ink);
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  .frame-nav::-webkit-scrollbar{display:none;}
  .nav-list{
    flex-direction:row;
    gap:8px;
    width:max-content;
    padding:6px 16px;
  }
  .nav-link{
    flex-direction:row;
    gap:8px;
    padding:0 16px;
    border:1px solid rgba(228,233,242,.18);
    border-radius:999px;
    font-size:14px;
    white-space:nowrap;
    min-height:40px;
  }
  .nav-idx{font-size:10px;}

  .site-header[data-open] .frame-nav{
    position:fixed;
    top:var(--bar-h);
    left:0;
    right:0;
    bottom:0;
    height:auto;
    z-index:60;
    overflow-y:auto;
    overflow-x:hidden;
    background:var(--ink-deep);
    border-top:1px solid rgba(242,140,40,.4);
    padding:20px 18px 40px;
  }
  .site-header[data-open] .nav-list{
    flex-direction:column;
    width:auto;
    padding:0;
    gap:8px;
  }
  .site-header[data-open] .nav-link{
    justify-content:flex-start;
    gap:14px;
    padding:16px 20px;
    border-radius:18px;
    font-size:20px;
    font-weight:900;
    letter-spacing:-.01em;
    border-color:rgba(228,233,242,.14);
  }
  .site-header[data-open] .nav-idx{font-size:12px;}
}

@media (max-width:520px){
  .live-chip .live-label{display:none;}
}

/* ==== 7. Footer ==== */
.site-footer{
  position:relative;
  background:var(--ink-deep);
  color:#D7DEEE;
  padding-top:clamp(52px,7vw,88px);
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:150px;
  background:linear-gradient(104deg,rgba(242,140,40,.24) 0 44%,rgba(242,140,40,0) 44.2%);
  pointer-events:none;
}
.site-footer::after{
  content:"";
  position:absolute;
  inset:auto auto 0 0;
  width:38%;
  height:4px;
  background:linear-gradient(90deg,var(--orange),rgba(242,140,40,0));
}
.footer-inner{
  position:relative;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:0 clamp(18px,3vw,40px);
  display:grid;
  grid-template-columns:1.25fr .75fr .85fr 1.5fr;
  gap:clamp(28px,4vw,56px);
}
.footer-brand{max-width:340px;}
.footer-logo{
  font-size:26px;
  font-weight:900;
  letter-spacing:-.01em;
  color:var(--paper);
  line-height:1.1;
}
.footer-tag{
  margin-top:10px;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--orange-soft);
}
.footer-note{
  margin-top:14px;
  font-size:14px;
  line-height:1.7;
  color:rgba(215,222,238,.72);
  max-width:32ch;
}
.footer-cta{margin-top:22px;}

.footer-title{
  font-size:12px;
  font-weight:900;
  letter-spacing:.22em;
  color:var(--orange-soft);
  margin-bottom:16px;
}
.footer-col ul{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.footer-col a{
  font-size:14px;
  line-height:1.5;
  color:#C9D3E4;
  text-decoration:none;
  transition:color .18s var(--ease);
}
.footer-col a:hover{color:var(--orange-soft);}

.contact-list{display:grid;gap:12px;}
.contact-list li{
  display:grid;
  gap:3px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(228,233,242,.12);
}
.contact-list li:last-child{border-bottom:0;padding-bottom:0;}
.contact-key{
  font-size:11px;
  letter-spacing:.18em;
  color:rgba(215,222,238,.52);
}
.contact-val{
  font-size:14px;
  line-height:1.6;
  color:#E8EDF7;
  word-break:break-word;
}
.footer-contact .contact-val.mono{font-size:15px;letter-spacing:.04em;color:var(--cyan);}

.footer-base{
  position:relative;
  width:100%;
  max-width:var(--maxw);
  margin:clamp(40px,5vw,64px) auto 0;
  padding:20px clamp(18px,3vw,40px) 28px;
  border-top:1px solid rgba(228,233,242,.14);
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  letter-spacing:.03em;
  color:rgba(215,222,238,.6);
}
.footer-base p{max-width:none;}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.footer-legal a{color:rgba(215,222,238,.8);text-decoration:none;}
.footer-legal a:hover{color:var(--orange-soft);text-decoration:underline;}
.footer-legal .mono{color:rgba(215,222,238,.5);}

@media (max-width:1023px){
  .footer-inner{grid-template-columns:1fr 1fr;}
  .footer-brand{max-width:none;grid-column:1 / -1;}
}
@media (max-width:639px){
  .footer-inner{grid-template-columns:1fr;}
  .footer-base{flex-direction:column;align-items:flex-start;}
}

/* ==== 8. Motion ==== */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(12px);
}
@media (prefers-reduced-motion: no-preference){
  html.js [data-reveal]{
    transition:opacity .26s var(--ease),transform .26s var(--ease);
  }
  html.js [data-reveal].is-in{
    opacity:1;
    transform:none;
  }
  .site-header::after{
    transition:transform .1s linear;
  }
}
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{opacity:1;transform:none;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==== 9. Tablet tweaks ==== */
@media (min-width:900px) and (max-width:1099px){
  :root{--rail-w:84px;}
  .nav-link{font-size:12px;}
}