*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --night-blue:#0A1F3C;
  --deep-blue:#061224;
  --card-blue:#112B4F;
  --fluoro-green:#39FF14;
  --metal-silver:#C0C0C0;
  --signal-red:#FF3B30;
  --light-blue:#E8EDF2;
  --muted-blue:#8A9BAB;
  --cream:#F5EFE1;
  --dark-brown:#2B1D14;

  --bg-main:var(--night-blue);
  --bg-deep:var(--deep-blue);
  --bg-card:var(--card-blue);
  --accent:var(--fluoro-green);
  --red:var(--signal-red);
  --silver:var(--metal-silver);
  --text-main:var(--light-blue);
  --text-muted:var(--muted-blue);

  --font-display:'Rajdhani','Oswald','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','Roboto Mono','SFMono-Regular','Consolas',monospace;

  --sidebar-width:300px;
  --topbar-height:44px;
  --container-max:1120px;
  --radius-sm:4px;
  --radius-md:10px;
  --radius-lg:16px;
  --ease:.2s ease;
  --ease-slow:.45s cubic-bezier(.4,0,.2,1);
}

html{scroll-behavior:smooth;}

body{
  background:
    linear-gradient(rgba(192,192,192,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192,192,192,.035) 1px, transparent 1px),
    var(--bg-main);
  background-size:36px 36px,36px 36px,auto;
  color:var(--text-main);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
ul,ol{list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.2;letter-spacing:.02em;}
h1{font-size:clamp(2.1rem,4.5vw,3.4rem);}
h2{font-size:clamp(1.6rem,3vw,2.4rem);}
h3{font-size:1.2rem;}

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

.skip-link{
  position:fixed;
  top:8px;
  left:8px;
  z-index:300;
  background:var(--cream);
  color:var(--dark-brown);
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:700;
  padding:.5rem 1rem;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transform:translateY(-200%);
  transition:transform var(--ease-slow);
}
.skip-link:focus{
  transform:translateY(0);
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:var(--sidebar-width);
  background:
    linear-gradient(180deg, rgba(57,255,20,.06), transparent 32%),
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(192,192,192,.04) 32px 33px),
    var(--bg-deep);
  border-right:1px solid rgba(192,192,192,.16);
  display:flex;
  flex-direction:column;
  z-index:120;
}

.header-topbar{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:.55rem;
  height:var(--topbar-height);
  padding:0 .9rem;
  background:rgba(10,31,60,.92);
  border-bottom:1px solid rgba(57,255,20,.2);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.08em;
}

.topbar-live{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--accent);
}
.topbar-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px rgba(255,59,48,.9);
}
.topbar-live-text{
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.12em;
}
.topbar-round{
  color:var(--text-main);
}
.topbar-update{
  margin-left:auto;
  color:var(--text-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.header-sidebar{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:1.6rem 1.1rem 1.1rem;
  position:relative;
}
.header-sidebar::before{
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:2px;
  background:repeating-linear-gradient(180deg, rgba(57,255,20,.35) 0 5px, transparent 5px 10px);
  opacity:.3;
}

.brand-block{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding-bottom:1.2rem;
  border-bottom:1px solid rgba(192,192,192,.16);
}
.brand-mark{
  --cut:6px;
  flex-shrink:0;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:var(--dark-brown);
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.05em;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  box-shadow:0 0 18px rgba(57,255,20,.35);
}
.brand-mark-text{
  transform:skewX(-4deg);
}
.brand-text{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.brand-name{
  color:var(--text-main);
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  line-height:1.25;
  letter-spacing:.04em;
}
.brand-tagline{
  color:var(--text-muted);
  font-size:.68rem;
  letter-spacing:.16em;
  margin-top:.15rem;
}

.nav-toggle{
  display:none;
  align-items:center;
  gap:.6rem;
  margin-top:1rem;
  padding:.55rem .8rem;
  border:1px solid rgba(192,192,192,.25);
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  background:rgba(6,18,36,.4);
}
.nav-toggle-line{
  width:16px;
  height:2px;
  background:var(--text-main);
  display:block;
  margin:2px 0;
  transition:transform var(--ease), background var(--ease);
}
.nav-toggle-label{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  color:var(--text-main);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:first-child{
  transform:translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:last-child{
  transform:translateY(-5px) rotate(-45deg);
}

.site-nav{
  margin-top:1.4rem;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.nav-legend{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent);
  border-left:2px solid var(--accent);
  padding-left:.6rem;
  margin-bottom:.8rem;
}
.nav-list{
  counter-reset:nav-counter;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.nav-item{
  counter-increment:nav-counter;
}
.nav-link{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.58rem .7rem;
  color:var(--text-main);
  font-size:.9rem;
  letter-spacing:.03em;
  border-left:2px solid transparent;
  transition:background var(--ease), color var(--ease), border-color var(--ease);
}
.nav-link::before{
  content:counter(nav-counter, decimal-leading-zero);
  font-family:var(--font-mono);
  font-size:.62rem;
  color:var(--text-muted);
  letter-spacing:.05em;
  width:1.6em;
}
.nav-link:hover{
  background:rgba(57,255,20,.06);
  border-left-color:var(--accent);
  color:var(--accent);
}
.nav-link[aria-current="page"]{
  background:linear-gradient(90deg, rgba(57,255,20,.12), transparent);
  border-left-color:var(--accent);
  color:var(--accent);
}
.nav-link[aria-current="page"]::before{
  color:var(--accent);
}
.nav-footer{
  margin-top:auto;
  padding-top:1rem;
  border-top:1px solid rgba(192,192,192,.12);
  display:flex;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:.62rem;
  color:var(--text-muted);
  letter-spacing:.12em;
}
.nav-footer-label{
  letter-spacing:.14em;
}
.nav-footer-index{
  color:var(--accent);
}

.scroll-progress{
  position:fixed;
  top:0;
  left:var(--sidebar-width);
  right:0;
  height:3px;
  z-index:150;
  pointer-events:none;
}
.scroll-progress::before{
  content:'';
  display:block;
  height:100%;
  width:var(--progress, 0%);
  background:linear-gradient(90deg, var(--accent), rgba(57,255,20,.35));
}

#main-content{
  margin-left:var(--sidebar-width);
  min-height:70vh;
  outline:none;
}
#main-content:focus{
  outline:none;
}

.site-footer{
  margin-left:var(--sidebar-width);
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(192,192,192,.03) 30px 31px),
    var(--bg-deep);
  border-top:1px solid rgba(192,192,192,.14);
  position:relative;
  z-index:20;
}
.site-footer::before{
  content:'';
  position:absolute;
  top:-1px;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg, var(--accent) 0%, rgba(57,255,20,.25) 24%, transparent 40%);
}

.footer-inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding:3rem 1.5rem 1.4rem;
}
.footer-overview{
  max-width:460px;
  display:flex;
  flex-direction:column;
  gap:.2rem;
  margin-bottom:2.2rem;
}
.footer-brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.45rem;
  color:var(--text-main);
}
.footer-slogan{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
}
.footer-trust{
  margin-top:.7rem;
  padding-left:.8rem;
  border-left:2px solid rgba(192,192,192,.35);
  font-size:.8rem;
  color:var(--text-muted);
}
.footer-columns{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:2rem;
  padding:2rem 0;
  border-top:1px solid rgba(192,192,192,.14);
  border-bottom:1px solid rgba(192,192,192,.14);
}
.footer-heading{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--silver);
  margin-bottom:1rem;
}
.footer-heading::after{
  content:'';
  width:24px;
  height:1px;
  background:var(--accent);
}
.footer-nav{
  display:flex;
  flex-direction:column;
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.footer-links a{
  color:var(--text-muted);
  font-size:.875rem;
  transition:color var(--ease), padding-left var(--ease);
}
.footer-links a:hover{
  color:var(--accent);
  padding-left:.3rem;
}
.footer-legal{
  display:flex;
  flex-direction:column;
}
.footer-contact{
  display:flex;
  flex-direction:column;
}
.footer-contact-list{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  color:var(--text-muted);
  font-size:.875rem;
}
.footer-service-time{
  margin-top:.6rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--text-muted);
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:1.4rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--text-muted);
}
.footer-copyright{
  color:var(--text-muted);
}
.footer-icp{
  color:var(--text-muted);
}

.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding:2rem 1.5rem;
}

.page-header{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:3.5rem 0 2rem;
}
.page-header::after{
  content:'';
  width:64px;
  height:3px;
  background:var(--accent);
  margin-top:.5rem;
}
.page-title{
  font-size:clamp(2.2rem,4vw,3.2rem);
  text-transform:uppercase;
}
.page-lead{
  max-width:640px;
  color:var(--text-muted);
  font-size:1.05rem;
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin-bottom:1.2rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.05em;
  color:var(--text-muted);
}
.breadcrumb-link{
  color:var(--silver);
  transition:color var(--ease);
}
.breadcrumb-link:hover{
  color:var(--accent);
}
.breadcrumb-sep{
  color:rgba(192,192,192,.4);
}
.breadcrumb-current{
  color:var(--accent);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.7rem 1.4rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.88rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid transparent;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition:background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}
.btn-primary{
  background:var(--accent);
  color:var(--dark-brown);
}
.btn-primary:hover{
  background:var(--text-main);
}
.btn-ghost{
  background:transparent;
  border-color:var(--silver);
  color:var(--text-main);
}
.btn-ghost:hover{
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-2px);
}

.grid{
  display:grid;
  gap:1.5rem;
}
.grid-cols-2{
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.grid-cols-3{
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.card{
  display:block;
  background:linear-gradient(145deg, rgba(17,43,79,.9), rgba(6,18,36,.85));
  border:1px solid rgba(192,192,192,.16);
  border-radius:var(--radius-md);
  padding:1.4rem 1.5rem;
  position:relative;
  transition:transform var(--ease-slow), border-color var(--ease-slow), box-shadow var(--ease-slow);
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(57,255,20,.5);
  box-shadow:0 14px 34px rgba(0,0,0,.3);
}
.card-title{
  font-size:1.12rem;
  margin-bottom:.4rem;
}
.card-meta{
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--text-muted);
  letter-spacing:.06em;
}
.card-body{
  margin-top:.8rem;
  font-size:.9rem;
  color:var(--text-muted);
}

.badge{
  display:inline-block;
  padding:.24rem .55rem;
  border:1px solid rgba(192,192,192,.35);
  background:rgba(6,18,36,.55);
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--silver);
}
.tag{
  display:inline-block;
  padding:.14rem .5rem;
  background:var(--cream);
  color:var(--dark-brown);
  font-family:var(--font-mono);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.06em;
  clip-path:polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.data-line{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  padding:.38rem 0;
  border-bottom:1px dashed rgba(192,192,192,.14);
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--text-main);
}
.data-value{
  margin-left:auto;
  color:var(--accent);
  font-weight:700;
}
.data-value--red{
  color:var(--red);
}

.media-frame{
  position:relative;
  min-height:180px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(17,43,79,.7), rgba(6,18,36,.9));
  border:1px solid rgba(192,192,192,.18);
  padding:.6rem;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
}
.media-frame::before{
  content:'';
  position:absolute;
  top:20px;
  right:20px;
  width:28px;
  height:28px;
  border-top:2px solid var(--accent);
  border-right:2px solid var(--accent);
  opacity:.65;
}
.media-frame::after{
  content:'';
  position:absolute;
  bottom:20px;
  left:20px;
  width:28px;
  height:28px;
  border-bottom:2px solid var(--accent);
  border-left:2px solid var(--accent);
  opacity:.65;
}

.section-heading{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:1.4rem;
}
.section-heading::before{
  content:'';
  width:28px;
  height:2px;
  background:var(--accent);
  flex-shrink:0;
}
.section-heading-text{
  font-family:var(--font-display);
  font-size:1.08rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-main);
}

.news-list{
  border-top:1px solid rgba(192,192,192,.14);
}
.news-list-item{
  border-bottom:1px solid rgba(192,192,192,.14);
}
.news-list-link{
  display:flex;
  align-items:baseline;
  gap:1rem;
  padding:1rem .3rem;
  transition:background var(--ease), padding-left var(--ease), color var(--ease);
}
.news-list-link:hover{
  background:rgba(57,255,20,.05);
  color:var(--accent);
  padding-left:.75rem;
}
.news-list-meta{
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--text-muted);
}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.1em;
}
.link-arrow::after{
  content:'→';
  transition:transform var(--ease);
}
.link-arrow:hover::after{
  transform:translateX(4px);
}

.stat-block{
  padding:1.2rem 1.3rem;
  background:linear-gradient(135deg, rgba(17,43,79,.75), rgba(6,18,36,.9));
  border-left:3px solid var(--accent);
}
.stat-number{
  font-family:var(--font-mono);
  font-size:2.2rem;
  font-weight:700;
  line-height:1;
  color:var(--text-main);
}
.stat-label{
  margin-top:.4rem;
  font-size:.75rem;
  letter-spacing:.1em;
  color:var(--text-muted);
}

html.js-enabled [data-reveal]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .55s ease, transform .55s ease;
}
html.js-enabled [data-reveal].is-revealed{
  opacity:1;
  transform:none;
}

@media (max-width:920px){
  body{
    background-size:24px 24px,24px 24px,auto;
  }
  .site-header{
    position:relative;
    width:100%;
    height:auto;
    overflow:visible;
  }
  .header-sidebar{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand toggle"
      "nav nav";
    align-items:center;
    padding:1rem 1.1rem .9rem;
  }
  .brand-block{
    grid-area:brand;
    border-bottom:none;
    padding-bottom:.25rem;
  }
  .nav-toggle{
    grid-area:toggle;
    display:inline-flex;
    margin-top:0;
  }
  .site-nav{
    grid-area:nav;
    display:none;
    margin-top:.6rem;
  }
  .site-nav[data-open]{
    display:flex;
  }
  .header-sidebar::before{
    display:none;
  }
  .nav-footer{
    margin-top:.8rem;
  }
  #main-content{
    margin-left:0;
  }
  .site-footer{
    margin-left:0;
  }
  .scroll-progress{
    left:0;
  }
  .footer-columns{
    grid-template-columns:1fr;
    gap:1.6rem;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:.4rem;
  }
  .grid-cols-2,
  .grid-cols-3{
    grid-template-columns:1fr;
  }
  .container{
    padding:1.5rem 1rem;
  }
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
  }
  html.js-enabled [data-reveal]{
    opacity:1;
    transform:none;
  }
  .scroll-progress::before{
    transition:none;
  }
}