/* ============================================================
   emc易倍官网 · 共享样式 /assets/site.css
   深夜球场墨绿基底 · 电子橙主强调 · 冷荧光青数据高亮
   ============================================================ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg,video{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}

/* ---------- 变量 ---------- */
:root{
  --ink:#0B1F1A;
  --ink-2:#143029;
  --ink-3:#07110F;
  --orange:#FF6A1F;
  --orange-soft:#FF8347;
  --cyan:#2FE0C8;
  --warn:#FFC53D;
  --red:#E4453A;
  --cream:#F3EDE2;
  --brown:#2A1F17;
  --mist:#8FA79E;
  --line:rgba(143,167,158,.22);
  --line-soft:rgba(143,167,158,.12);
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Inter','Helvetica Neue',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --wrap:1240px;
  --band-h:46px;
  --cut:20px;
}

/* ---------- 中文排版 ---------- */
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:500;
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.display{font-weight:900;font-size:clamp(2.6rem,7.4vw,5.5rem);line-height:.98;letter-spacing:-.02em}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.7;color:rgba(243,237,226,.86);max-width:56ch}
.num{font-family:var(--mono);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan)}
.kicker::before{content:"";width:24px;height:1px;background:currentColor;opacity:.8}
.annotation{writing-mode:vertical-rl;font-family:var(--mono);font-size:11px;letter-spacing:.32em;color:var(--mist);text-transform:uppercase}
.annotation--flip{transform:rotate(180deg)}
.slash{height:1px;border:0;background:linear-gradient(90deg,var(--orange),rgba(255,106,31,0));transform:skewY(-1.4deg)}

/* ---------- 交互基础 ---------- */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
::selection{background:var(--orange);color:var(--ink-3)}
.is-hidden{display:none !important}

.skip-link{
  position:fixed;top:10px;left:10px;z-index:300;
  transform:translateY(-180%);
  background:var(--cyan);color:var(--ink-3);
  font-weight:700;font-size:13px;letter-spacing:.06em;
  padding:11px 18px;
  clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0)}
#main-content,#main-content:target{scroll-margin-top:120px}
.section,[data-round-panel]{scroll-margin-top:118px}

/* ---------- 容器与栅格 ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.grid{display:grid;gap:clamp(16px,2.4vw,32px)}
.grid--12{grid-template-columns:repeat(12,minmax(0,1fr))}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-9{grid-column:span 9}
.col-12{grid-column:span 12}

/* ---------- 章节 ---------- */
.section{position:relative;padding:clamp(48px,7vw,96px) 0}
.section--tight{padding:clamp(28px,4vw,52px) 0}
.section__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:clamp(20px,3vw,36px);
  border-bottom:1px solid var(--line);
}
.section__title{font-weight:900;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.14;letter-spacing:-.02em}
.section__note{font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--mist)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;
  padding:13px 22px;
  background:var(--orange);color:var(--ink-3);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  transition:background .2s ease,transform .2s ease,color .2s ease;
}
.btn:hover{background:var(--orange-soft);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--cyan);border:1px solid rgba(47,224,200,.5);clip-path:none}
.btn--ghost:hover{background:rgba(47,224,200,.1);color:var(--cream);transform:translateY(-2px)}

/* ---------- 面包屑 ---------- */
.breadcrumb{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--mist);padding:20px 0 0}
.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.breadcrumb__item+.breadcrumb__item::before{content:"/";margin-right:10px;color:rgba(143,167,158,.5)}
.breadcrumb__item a:hover{color:var(--cream)}
.breadcrumb__item[aria-current="page"]{color:var(--cream)}

/* ---------- 顶部双层导航 ---------- */
.site-header{position:sticky;top:calc(-1 * var(--band-h));z-index:120}
.site-header__band{
  height:var(--band-h);display:flex;align-items:center;
  background:var(--ink-3);
  border-bottom:1px solid var(--line-soft);
  font-size:12px;
}
.band__inner{display:flex;align-items:center;justify-content:space-between;gap:16px}

.brand{display:flex;align-items:center;gap:10px;min-width:0;color:var(--cream)}
.brand__mark{
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.18em;
  padding:4px 7px;background:var(--orange);color:var(--ink-3);
  clip-path:polygon(0 0,100% 0,100% 62%,88% 100%,0 100%);
}
.brand__text{display:flex;align-items:baseline;gap:12px;min-width:0}
.brand__name{font-weight:800;font-size:14px;letter-spacing:.02em;white-space:nowrap}
.brand__claim{color:var(--mist);font-size:11px;letter-spacing:.24em;white-space:nowrap}

.status{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--cream)}
.status__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.status__dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(47,224,200,.16)}
.status__num{color:var(--cyan);font-weight:700;letter-spacing:.06em}
.status__sep{color:rgba(143,167,158,.5)}
.status__item--muted{color:var(--mist)}

.site-nav{
  position:relative;
  background:linear-gradient(180deg,rgba(20,48,41,.97),rgba(7,17,15,.97));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.site-nav__inner{position:relative;display:flex;align-items:center;gap:clamp(12px,2vw,28px);min-height:56px}
.site-nav__list{display:flex;align-items:center;gap:clamp(10px,2vw,26px);flex:1 1 auto}
.site-nav__item{display:block}
.site-nav__link{
  position:relative;display:inline-block;padding:18px 2px;
  font-size:15px;font-weight:600;color:rgba(243,237,226,.76);
  transition:color .2s ease;
}
.site-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:12px;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .24s ease;
}
.site-nav__link:hover{color:var(--cream)}
.site-nav__link:hover::after{transform:scaleX(1)}
.site-nav__link[aria-current="page"]{color:var(--cream)}
.site-nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{
  flex:0 0 auto;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;
  padding:10px 16px;background:var(--orange);color:var(--ink-3);white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:background .2s ease;
}
.nav-cta:hover{background:var(--orange-soft)}

.nav-toggle{
  display:none;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--cream);
  padding:9px 12px;border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.nav-toggle__bars{display:inline-flex;flex-direction:column;gap:3px}
.nav-toggle__bars i{display:block;width:16px;height:2px;background:var(--orange);transition:transform .2s ease,opacity .2s ease}
[data-open] .nav-toggle__bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
[data-open] .nav-toggle__bars i:nth-child(2){opacity:0}
[data-open] .nav-toggle__bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.scroll-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--orange));
  transform:scaleX(0);transform-origin:0 50%;
}

/* ---------- 页脚 ---------- */
.site-footer{position:relative;overflow:hidden;background:var(--ink-3);color:var(--mist);border-top:1px solid var(--line)}
.site-footer__terrain{
  position:absolute;left:0;right:0;bottom:0;height:130px;pointer-events:none;opacity:.55;
  background:linear-gradient(180deg,rgba(143,167,158,.05),rgba(143,167,158,.13));
  clip-path:polygon(0 64%,7% 44%,13% 58%,21% 30%,28% 52%,36% 36%,44% 58%,52% 32%,60% 55%,68% 26%,76% 50%,84% 34%,92% 57%,100% 40%,100% 100%,0 100%);
}
.site-footer__inner{
  position:relative;z-index:1;
  display:grid;gap:clamp(24px,3.4vw,56px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1fr);
  padding-top:clamp(40px,6vw,74px);padding-bottom:clamp(32px,4vw,52px);
}
.foot-block__title{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px}
.foot-lines{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.foot-line__link{
  display:flex;flex-direction:column;gap:4px;
  padding:12px 14px;border:1px solid var(--line);background:rgba(20,48,41,.6);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.foot-line__link:hover{border-color:var(--orange);background:rgba(255,106,31,.08);transform:translateY(-2px)}
.foot-line__key{font-size:14px;font-weight:700;color:var(--cream)}
.foot-line__say{font-size:11px;letter-spacing:.1em;color:var(--mist)}
.foot-brand{font-size:18px;font-weight:900;letter-spacing:.01em;color:var(--cream)}
.foot-note{font-size:13px;line-height:1.7;margin-top:10px}
.foot-note--dim{font-size:12px;color:rgba(143,167,158,.8)}
.foot-contact{display:grid;gap:10px}
.foot-contact__item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;font-size:13px;line-height:1.6}
.foot-contact__k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:rgba(143,167,158,.75);padding-top:2px}
.foot-contact__v{color:var(--cream);word-break:break-word}
.site-footer__base{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:18px;padding-bottom:26px;border-top:1px solid var(--line-soft);
}
.foot-copy{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mist)}
.foot-legal{display:flex;flex-wrap:wrap;gap:22px}
.foot-legal a{font-size:12px;letter-spacing:.14em;color:var(--mist);border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.foot-legal a:hover{color:var(--cream);border-bottom-color:var(--orange)}

/* ---------- 面板 / 数据卡 ---------- */
.panel{position:relative;background:var(--ink-2);border:1px solid var(--line);padding:clamp(18px,2.4vw,32px)}
.panel--cut{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.panel--ink{background:var(--ink-3)}
.panel__label{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mist)}
.panel__value{font-family:var(--mono);font-weight:700;font-size:clamp(2rem,5vw,3.4rem);line-height:1;letter-spacing:-.02em;color:var(--cream)}
.panel__unit{font-size:.42em;margin-left:.15em;letter-spacing:.08em;color:var(--mist)}
.panel__note{font-size:12px;line-height:1.65;color:var(--mist)}

.data-card{
  --accent:var(--cyan);
  position:relative;background:var(--ink-2);border:1px solid var(--line);
  padding:clamp(16px,2.2vw,26px);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  transition:border-color .2s ease,transform .2s ease;
}
.data-card::before{content:"";position:absolute;left:0;top:0;width:3px;height:38%;background:var(--accent)}
.data-card:hover{border-color:rgba(143,167,158,.42);transform:translateY(-2px)}
.data-card--away{--accent:var(--orange)}
.data-card--control{--accent:var(--cyan)}
.data-card--transfer{background:var(--cream);color:var(--brown);--accent:var(--orange);border-color:rgba(42,31,23,.12)}
.data-card--discipline{--accent:var(--warn);border-color:rgba(255,197,61,.35);background:linear-gradient(150deg,rgba(255,197,61,.14),rgba(228,69,58,.16) 60%,var(--ink-2))}
.data-card__num{font-family:var(--mono);font-weight:700;font-size:clamp(2.4rem,6vw,4rem);line-height:1;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.data-card--transfer .data-card__num{color:var(--orange)}
.data-card__unit{font-size:.4em;margin-left:.15em;letter-spacing:.1em;color:var(--mist)}
.data-card--transfer .data-card__unit{color:rgba(42,31,23,.62)}
.data-card__label{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mist);margin-top:12px}
.data-card--transfer .data-card__label{color:rgba(42,31,23,.66)}
.data-card__meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mist);margin-top:8px}
.data-card--transfer .data-card__meta{color:rgba(42,31,23,.58)}
.data-card__body{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:14px;line-height:1.75}
.data-card--transfer .data-card__body{border-top-color:rgba(42,31,23,.14)}
.data-card__toggle{
  margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--cyan);border-bottom:1px solid rgba(47,224,200,.4);padding-bottom:2px;
}
.data-card--transfer .data-card__toggle{color:#B23A12;border-bottom-color:rgba(178,58,18,.4)}
.data-card[data-open] .data-card__body{display:block}
.data-card:not([data-open]) .data-card__body{display:none}
@supports (height:0px){
  .data-card__body{transition:opacity .32s ease}
}

/* ---------- 筛选 ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filter-btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  padding:8px 14px;border:1px solid rgba(143,167,158,.35);color:var(--mist);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.filter-btn:hover{color:var(--cream);border-color:rgba(47,224,200,.6)}
.filter-btn.is-active,.filter-btn[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--ink-3);font-weight:700}
.filter-count{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--mist);margin-left:6px}

/* ---------- 轮次时间轴 ---------- */
.rail{position:relative;padding-left:26px}
.rail__track{position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:var(--line)}
.rail__node{
  position:relative;display:block;width:100%;text-align:left;
  padding:7px 0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--mist);transition:color .2s ease;
}
.rail__node::before{
  content:"";position:absolute;left:-24px;top:50%;width:7px;height:7px;margin-top:-3.5px;
  border-radius:50%;background:var(--mist);transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.rail__node:hover{color:var(--cream)}
.rail__node.is-active{color:var(--cream)}
.rail__node.is-active::before{background:var(--orange);transform:scale(1.45);box-shadow:0 0 0 5px rgba(255,106,31,.16)}

/* ---------- 图片容器（页面阶段放置图片占位） ---------- */
.figure{position:relative;margin:0}
.figure__frame{
  position:relative;overflow:hidden;width:100%;
  background-color:var(--ink-2);
  background-image:linear-gradient(rgba(143,167,158,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(143,167,158,.13) 1px,transparent 1px);
  background-size:28px 28px;
  border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}
.figure__frame img{width:100%;height:100%;object-fit:cover}
.figure__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,106,31,.15),transparent 44%,rgba(47,224,200,.13));
}
.figure--wide .figure__frame{aspect-ratio:16/9}
.figure--std .figure__frame{aspect-ratio:3/2}
.figure--tall .figure__frame{aspect-ratio:4/5}
.figure--square .figure__frame{aspect-ratio:1/1}
.figure__cap{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--mist);
}
.figure__tag{color:var(--cyan)}

/* ---------- 奶油纸阅读区 ---------- */
.sheet{
  background:var(--cream);color:var(--brown);
  padding:clamp(24px,4vw,56px);
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px));
}
.sheet h2,.sheet h3{color:var(--brown);letter-spacing:-.01em;font-weight:800}
.sheet a{color:#B23A12;text-decoration:underline;text-underline-offset:3px}
.prose{max-width:64ch;font-size:1rem;line-height:1.75}
.prose p+p{margin-top:1.15em}
.prose h2{margin-top:1.6em;margin-bottom:.5em;font-size:1.35rem}
.prose h3{margin-top:1.3em;margin-bottom:.4em;font-size:1.1rem}
.prose ul{margin-top:.8em;display:grid;gap:.5em}
.prose ul li{padding-left:16px;position:relative}
.prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--orange)}

/* ---------- 显现动效 ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .site-footer__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-block--contact{grid-column:span 2}
}
@media (max-width:960px){
  :root{--band-h:42px}
  .grid--12{grid-template-columns:repeat(6,minmax(0,1fr))}
  .col-3,.col-4,.col-5{grid-column:span 3}
  .col-6,.col-7,.col-8,.col-9,.col-12{grid-column:span 6}
  .filter-bar{margin-top:4px}
}
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .site-nav__inner{min-height:52px;justify-content:space-between}
  .nav-cta{display:none}
  .site-nav__list{
    position:absolute;left:0;right:0;top:100%;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink-3);
    border-bottom:1px solid var(--line);
    box-shadow:0 26px 44px rgba(0,0,0,.5);
    padding:6px clamp(16px,4vw,40px) 18px;
  }
  [data-nav][data-open] .site-nav__list{display:flex}
  .site-nav__link{display:block;padding:15px 0;font-size:16px;border-bottom:1px solid var(--line-soft)}
  .site-nav__link::after{bottom:8px;right:auto;width:30px}
}
@media (max-width:760px){
  .site-footer__inner{grid-template-columns:minmax(0,1fr)}
  .foot-block--contact{grid-column:span 1}
  .foot-lines{grid-template-columns:1fr}
  .site-footer__base{flex-direction:column;align-items:flex-start;gap:12px}
  .brand__claim{display:none}
  .status{font-size:10px;letter-spacing:.1em}
}
@media (max-width:640px){
  .grid--12{grid-template-columns:minmax(0,1fr)}
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-12{grid-column:span 1}
  .section__head{align-items:flex-start;flex-direction:column;gap:10px}
  .foot-contact__item{grid-template-columns:1fr;gap:2px}
}

@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}
  [data-reveal]{opacity:1;transform:none}
}
