/* ==========================================================================
   AOA赛场 · /assets/site.css
   夜场球场灯光下的数据实验室 —— 深空蓝底 / 荧光绿主线 / 琥珀橙高亮
   ========================================================================== */

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

/* --- 2. Tokens ---------------------------------------------------------- */
:root{
  --c-void:#0A1A2F;
  --c-night:#12294A;
  --c-stand:#143A2C;
  --c-green:#38E07B;
  --c-green-soft:#8CF2B4;
  --c-amber:#FFA630;
  --c-paper:#F4F6F8;
  --c-ink:#0B0E13;
  --c-steel:#7C8DA3;
  --c-white:#FFFFFF;

  --font-display:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;

  --fs-12:0.75rem;
  --fs-14:0.875rem;
  --fs-16:1rem;
  --fs-20:1.25rem;
  --fs-28:1.75rem;
  --fs-40:2.5rem;
  --fs-64:4rem;
  --fs-96:6rem;

  --maxw:1280px;
  --gutter:24px;
  --rule:rgba(244,246,248,0.14);
  --rule-strong:rgba(244,246,248,0.30);
  --body-text:rgba(244,246,248,0.82);
  --dur:200ms;
}

/* --- 3. Base ------------------------------------------------------------ */
body{
  background:var(--c-void);
  color:var(--c-paper);
  font-family:var(--font-body);
  font-size:var(--fs-16);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.2;letter-spacing:0.01em;}
h1{font-size:clamp(2.25rem,5vw,var(--fs-64));}
h2{font-size:clamp(1.75rem,3.4vw,var(--fs-40));}
h3{font-size:var(--fs-28);}
h4{font-size:var(--fs-20);}
strong{color:var(--c-white);font-weight:700;}
::selection{background:var(--c-green);color:var(--c-ink);}
:focus-visible{outline:2px solid var(--c-green);outline-offset:3px;}
#main-content{scroll-margin-top:140px;}

/* --- 4. Layout ---------------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.section{padding-block:72px;}
.section--tight{padding-block:40px;}
.section--flush-top{padding-block:0 72px;}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);}
.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-12{grid-column:span 12;}
.stack-sm{display:flex;flex-direction:column;gap:12px;}
.stack-md{display:flex;flex-direction:column;gap:24px;}

/* --- 5. Typography helpers --------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:0.24em;text-transform:uppercase;color:var(--c-green);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--c-green);flex:none;}
.tag{
  display:inline-flex;align-items:center;gap:0.45em;
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--c-steel);
  border:1px solid var(--rule-strong);
  padding:0.32em 0.7em;
  transition:transform var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease;
}
.tag:hover{transform:translateY(-1px);color:var(--c-green-soft);border-color:rgba(56,224,123,0.55);}
.tag--green{color:var(--c-green);border-color:rgba(56,224,123,0.5);}
.tag--amber{color:var(--c-amber);border-color:rgba(255,166,48,0.5);}
.rule{height:1px;border:0;margin:0;background:var(--rule);}
.rule--green{background:linear-gradient(90deg,var(--c-green),rgba(56,224,123,0));}
.data-num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:700;letter-spacing:-0.02em;line-height:1;
}
.data-num--green{color:var(--c-green);}
.data-num--amber{color:var(--c-amber);}
.prose{
  font-family:var(--font-body);font-size:var(--fs-16);
  line-height:1.75;color:var(--body-text);max-width:68ch;
}
.prose p+p{margin-top:1em;}
.prose h2,.prose h3{color:var(--c-white);margin-block:1.4em 0.5em;}
.prose a{color:var(--c-green-soft);border-bottom:1px solid rgba(140,242,180,0.45);}
.prose a:hover{color:var(--c-green);}
.lead{font-size:var(--fs-20);line-height:1.65;color:rgba(244,246,248,0.9);max-width:56ch;}
.text-steel{color:var(--c-steel);}
.text-amber{color:var(--c-amber);}

/* --- 6. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;
  font-family:var(--font-body);font-size:var(--fs-14);
  letter-spacing:0.06em;white-space:nowrap;
  border:1px solid transparent;
  transition:transform var(--dur) ease,background-color var(--dur) ease,
             color var(--dur) ease,border-color var(--dur) ease,box-shadow var(--dur) ease;
}
.btn-primary{
  background:var(--c-green);color:var(--c-ink);border-color:var(--c-green);
  box-shadow:4px 4px 0 rgba(56,224,123,0.16);
}
.btn-primary:hover{
  background:var(--c-green-soft);border-color:var(--c-green-soft);
  transform:translate(-1px,-1px);box-shadow:6px 6px 0 rgba(56,224,123,0.22);
}
.btn-ghost{background:transparent;color:var(--c-paper);border-color:var(--rule-strong);}
.btn-ghost:hover{border-color:var(--c-green);color:var(--c-green);}

/* --- 7. Breadcrumbs ----------------------------------------------------- */
.breadcrumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:0.08em;color:var(--c-steel);
}
.breadcrumbs li{display:flex;align-items:center;gap:10px;}
.breadcrumbs li+li::before{content:"/";color:rgba(124,141,163,0.55);}
.breadcrumbs a:hover{color:var(--c-green);}
.breadcrumbs [aria-current="page"]{color:var(--c-paper);}

/* --- 8. Panels & disclosure -------------------------------------------- */
.panel{
  position:relative;
  background:var(--c-night);
  border:1px solid var(--rule);
  box-shadow:6px 6px 0 rgba(11,14,19,0.55);
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--rule);
}
.panel-title{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:0.2em;text-transform:uppercase;color:var(--c-green);}
.panel-body{padding:20px;}
.panel--stand{background:var(--c-stand);}

.disclosure{border:1px solid var(--rule);background:var(--c-night);}
.disclosure+.disclosure{border-top:0;}
.disclosure-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;text-align:left;
  font-family:var(--font-body);font-size:var(--fs-16);color:var(--c-paper);
  transition:background-color var(--dur) ease,color var(--dur) ease;
}
.disclosure-trigger:hover{background:rgba(56,224,123,0.06);color:var(--c-white);}
.disclosure-trigger::after{
  content:"＋";flex:none;
  font-family:var(--font-mono);font-size:var(--fs-16);color:var(--c-green);
  transition:transform var(--dur) ease;
}
.disclosure-trigger[aria-expanded="true"]::after{transform:rotate(45deg);}
.disclosure-panel{display:none;padding:0 20px 20px;border-top:1px solid var(--rule);}
.disclosure-panel[data-open]{display:block;}

/* --- 9. State bar ------------------------------------------------------- */
.state-bar{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:0.1em;color:var(--c-steel);
}
.state-bar-dot{width:8px;height:8px;flex:none;background:var(--c-steel);border-radius:50%;}
.state-bar[data-state="synced"]{color:var(--c-green);}
.state-bar[data-state="synced"] .state-bar-dot{background:var(--c-green);box-shadow:0 0 0 3px rgba(56,224,123,0.16);}
.state-bar[data-state="syncing"]{color:var(--c-amber);}
.state-bar[data-state="syncing"] .state-bar-dot{background:var(--c-amber);animation:state-pulse 1.2s ease-in-out infinite;}
.state-bar[data-state="expired"]{color:var(--c-amber);}
.state-bar[data-state="expired"] .state-bar-dot{background:transparent;border:1.5px solid var(--c-amber);}
@keyframes state-pulse{0%,100%{opacity:1;}50%{opacity:0.25;}}

/* --- 10. Media frames --------------------------------------------------- */
.media-frame{
  position:relative;overflow:hidden;display:block;
  background:var(--c-night);
  border:1px solid var(--rule);
  box-shadow:6px 6px 0 rgba(11,14,19,0.5);
}
.media-frame img{width:100%;height:100%;object-fit:cover;}
.media-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(56,224,123,0.09) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(56,224,123,0.09) 1px,transparent 1px);
  background-size:44px 44px;
}
.media-frame--16x9{aspect-ratio:16/9;}
.media-frame--4x3{aspect-ratio:4/3;}
.media-frame--1x1{aspect-ratio:1/1;}
.media-frame--21x9{aspect-ratio:21/9;}
.media-frame--tall{aspect-ratio:3/4;}

/* --- 11. Reveal motion -------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(18px);}
[data-reveal].is-revealed{
  opacity:1;transform:none;
  transition:opacity 560ms ease,transform 560ms cubic-bezier(0.22,0.61,0.36,1);
}

/* --- 12. Header -------------------------------------------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;
  padding:12px 20px;
  background:var(--c-green);color:var(--c-ink);
  font-family:var(--font-mono);font-size:var(--fs-14);letter-spacing:0.08em;
}
.skip-link:focus{left:0;}

.site-header{
  position:sticky;top:0;z-index:80;
  background:var(--c-void);
  border-bottom:1px solid var(--rule);
}

.header-rail{
  background:var(--c-ink);
  border-bottom:1px solid rgba(56,224,123,0.18);
  overflow:hidden;
  max-height:36px;
  transition:max-height var(--dur) ease,opacity var(--dur) ease,border-color var(--dur) ease;
}
.site-header[data-condensed] .header-rail{max-height:0;opacity:0;border-bottom-color:transparent;}
.header-rail-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:35px;
}
.header-rail-note{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:0.1em;color:var(--c-steel);
}
.rail-dot{
  width:6px;height:6px;flex:none;border-radius:50%;
  background:var(--c-green);box-shadow:0 0 0 3px rgba(56,224,123,0.16);
}
.nav-utility{display:flex;align-items:center;gap:20px;}
.utility-link{
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:0.08em;color:var(--c-steel);
  transition:color var(--dur) ease;
}
.utility-link:hover{color:var(--c-green-soft);}

.masthead{padding:26px 0 16px;transition:padding var(--dur) ease;}
.masthead-inner{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;}
.masthead-brand{display:block;}
.masthead-name{
  display:block;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,5.2vw,3.5rem);
  line-height:1;letter-spacing:0.16em;text-indent:0.16em;
  color:var(--c-white);
  transition:font-size var(--dur) ease,color var(--dur) ease;
}
.masthead-brand:hover .masthead-name{color:var(--c-green-soft);}
.masthead-note{
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:0.26em;text-indent:0.26em;
  color:var(--c-green);text-transform:uppercase;
  transition:opacity var(--dur) ease;
  max-height:20px;
  overflow:hidden;
}
.site-header[data-condensed] .masthead{padding:9px 0;}
.site-header[data-condensed] .masthead-name{font-size:1.25rem;letter-spacing:0.24em;text-indent:0.24em;}
.site-header[data-condensed] .masthead-note{opacity:0;max-height:0;}

.nav-bar{
  position:relative;
  border-top:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(18,41,74,0.92),rgba(10,26,47,0.98));
}
.nav-bar-inner{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  gap:16px;min-height:56px;
}
.nav-list{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;}
.nav-link{
  position:relative;display:block;
  padding:11px 14px;
  font-size:var(--fs-14);letter-spacing:0.06em;
  color:rgba(244,246,248,0.86);
  transition:color var(--dur) ease;
}
.nav-link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;
  background:var(--c-green);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur) ease;
}
.nav-link:hover{color:var(--c-green);}
.nav-link:hover::after{transform:scaleX(1);}
.nav-link[aria-current="page"]{color:var(--c-green);}
.nav-link[aria-current="page"]::after{transform:scaleX(1);}

.nav-toggle{
  display:none;align-items:center;gap:10px;
  padding:9px 13px;
  border:1px solid var(--rule-strong);
  color:var(--c-paper);
  font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:0.16em;
  transition:border-color var(--dur) ease,color var(--dur) ease;
}
.nav-toggle:hover{border-color:var(--c-green);color:var(--c-green);}
.nav-toggle-bars{position:relative;width:16px;height:10px;flex:none;}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;
  background:currentColor;
  transition:transform var(--dur) ease,top var(--dur) ease;
}
.nav-toggle-bars::before{top:1px;}
.nav-toggle-bars::after{top:8px;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{top:4.5px;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{top:4.5px;transform:rotate(-45deg);}
.nav-toggle-label{display:inline-block;}

.nav-cta{z-index:2;}

.scroll-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--c-green),var(--c-green-soft));
  transform:scaleX(0);transform-origin:left center;
  pointer-events:none;
}

/* 移动 / 平板：折叠导航 */
@media (max-width:959px){
  .nav-bar-inner{justify-content:space-between;min-height:52px;}
  .nav-toggle{display:inline-flex;}
  .nav-primary{
    position:absolute;left:0;right:0;top:100%;
    display:none;
    background:var(--c-ink);
    border-top:1px solid var(--rule);
    border-bottom:1px solid rgba(56,224,123,0.28);
    max-height:70vh;overflow-y:auto;
  }
  .nav-primary[data-open]{display:block;}
  .nav-list{flex-direction:column;flex-wrap:nowrap;gap:0;padding:6px 0;}
  .nav-list li{width:100%;}
  .nav-link{padding:15px var(--gutter);border-bottom:1px solid rgba(244,246,248,0.06);}
  .nav-link::after{display:none;}
  .nav-link[aria-current="page"]{background:rgba(56,224,123,0.08);box-shadow:inset 3px 0 0 var(--c-green);}
}

@media (min-width:960px){
  .nav-cta{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);}
}
@media (min-width:960px){
  .nav-cta:hover{transform:translate(calc(-50% + 0px) , -50%);}
}

/* --- 13. Footer --------------------------------------------------------- */
.site-footer{
  background:var(--c-ink);
  border-top:1px solid rgba(56,224,123,0.35);
  padding-block:64px 28px;
  margin-top:24px;
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:48px;
  padding-bottom:44px;
}
.footer-brand-name{
  font-family:var(--font-display);font-size:var(--fs-28);font-weight:700;
  letter-spacing:0.14em;text-indent:0.14em;color:var(--c-white);
}
.footer-brand-note{
  margin-top:10px;
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:0.16em;color:var(--c-green);
}
.footer-brand-line{
  margin-top:18px;max-width:34ch;
  font-size:var(--fs-14);line-height:1.8;color:var(--c-steel);
}
.footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;}
.footer-col-title{
  padding-bottom:12px;margin-bottom:14px;
  border-bottom:1px solid var(--rule);
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:0.2em;text-transform:uppercase;color:var(--c-green);
}
.footer-links{display:flex;flex-direction:column;gap:10px;}
.footer-link{
  font-size:var(--fs-14);color:rgba(244,246,248,0.72);
  transition:color var(--dur) ease,padding-left var(--dur) ease;
}
.footer-link:hover{color:var(--c-green-soft);padding-left:4px;}

.footer-contact{
  padding:28px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.footer-contact-title{
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:0.2em;text-transform:uppercase;color:var(--c-green);
  margin-bottom:18px;
}
.footer-contact-list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 24px;
}
.footer-contact-item{display:flex;flex-direction:column;gap:6px;}
.footer-contact-label{
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:0.14em;color:var(--c-steel);
}
.footer-contact-value{font-size:var(--fs-16);color:var(--c-white);word-break:break-word;}
.footer-note{
  margin-top:20px;max-width:80ch;
  font-size:var(--fs-14);line-height:1.8;color:var(--c-steel);
}

.footer-legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;padding-top:22px;
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:0.08em;color:var(--c-steel);
}
.footer-icp{color:var(--c-steel);}

/* --- 14. Responsive ----------------------------------------------------- */
@media (max-width:960px){
  .footer-top{grid-template-columns:1fr;gap:36px;}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-contact-list{grid-template-columns:1fr;}
  .section{padding-block:56px;}
  .section--tight{padding-block:32px;}
}
@media (max-width:899px){
  .grid-12{grid-template-columns:1fr;gap:32px;}
  .col-4,.col-5,.col-6,.col-7,.col-8,.col-12{grid-column:1/-1;}
}
@media (max-width:640px){
  :root{--gutter:18px;}
  body{font-size:15px;}
  .section{padding-block:44px;}
  .masthead{padding:20px 0 12px;}
  .header-rail-inner{min-height:32px;}
  .nav-utility{gap:14px;}
  .utility-link{font-size:11px;letter-spacing:0.04em;}
  .footer-cols{grid-template-columns:1fr;gap:26px;}
  .footer-contact-value{font-size:var(--fs-14);}
  .footer-legal{flex-direction:column;align-items:flex-start;}
}
@media (max-width:400px){
  .nav-cta{padding:9px 12px;font-size:var(--fs-12);letter-spacing:0.02em;}
  .nav-toggle{padding:9px 10px;}
  .nav-toggle-label{display:none;}
}

/* --- 15. Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none;}
}