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

/* ===== 02. Tokens ===== */
:root{
  --ink:#0B1B3A;
  --panel:#122A4F;
  --panel-hi:#16325C;
  --cyan:#2EF2D0;
  --orange:#FF6B2C;
  --saffron:#C8102E;
  --snow:#F7FAFF;
  --mist:#8FA3BF;
  --violet:#7B61FF;
  --void:#050B18;

  --line:rgba(143,163,191,.26);
  --line-strong:rgba(143,163,191,.52);
  --cyan-line:rgba(46,242,208,.55);
  --orange-line:rgba(255,107,44,.55);

  --wrap:1200px;
  --pad-x:clamp(16px,4vw,40px);
  --gap:clamp(16px,2.4vw,28px);

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

/* ===== 03. Base ===== */
body{
  min-height:100%;
  background-color:var(--ink);
  background-image:
    linear-gradient(180deg,rgba(46,242,208,.07),rgba(46,242,208,0) 42%),
    repeating-linear-gradient(90deg,rgba(143,163,191,.08) 0 1px,transparent 1px 84px);
  color:var(--snow);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
#main-content{display:block;outline:none;}

:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}
.site-foot :focus-visible{outline-color:var(--orange);}

::selection{background:var(--cyan);color:var(--void);}

.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ===== 04. Header / Masthead ===== */
.site-head{
  position:sticky;
  top:0;
  z-index:60;
  background:linear-gradient(180deg,rgba(11,27,58,.97),rgba(11,27,58,.9));
  border-bottom:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.site-head::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--cyan) 0 34%,var(--violet) 34% 52%,var(--orange) 52% 84%,var(--saffron) 84% 100%);
}
.mast{
  position:relative;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:16px var(--pad-x) 0;
}
.mast__grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
}
.mast__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mast__meta--end{justify-content:flex-end;}

.stamp{
  display:inline-block;
  padding:3px 9px;
  border:1px solid var(--line-strong);
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.5;
  white-space:nowrap;
}
.stamp--mono{color:var(--cyan);border-color:var(--cyan-line);}

.mast__brand{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--snow);
}
.brand__mark{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  background:var(--cyan);
  color:var(--void);
  font-family:var(--font-mono);
  font-size:19px;
  font-weight:700;
  line-height:1;
  transition:background-color .2s ease,color .2s ease;
}
.brand:hover .brand__mark{background:var(--orange);}
.brand__text{
  font-size:clamp(1.2rem,2.3vw,1.7rem);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.1;
}
.brand__sub{
  margin-top:6px;
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.nav{margin-top:14px;border-top:1px solid var(--line);}
.nav__list{
  counter-reset:navi;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}
.nav__item{position:relative;counter-increment:navi;}
.nav__item::before{display:none;}
.nav__link{
  position:relative;
  display:block;
  padding:13px 20px;
  color:var(--mist);
  font-size:13.5px;
  letter-spacing:.12em;
  text-decoration:none;
  transition:color .2s ease;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:7px;
  height:2px;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav__link:hover{color:var(--snow);}
.nav__link:hover::after{transform:scaleX(1);}
.nav__item+.nav__item{border-left:1px solid var(--line);}
.nav__link[aria-current="page"]{color:var(--cyan);}
.nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--orange);}

.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--snow);
  font-size:13px;
  letter-spacing:.14em;
  cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan);}
.nav-toggle__label{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;}
.nav-toggle__bars{display:inline-flex;flex-direction:column;gap:3px;width:16px;}
.nav-toggle__bars i{display:block;height:1.5px;background:currentColor;transition:opacity .2s ease;}
.nav-toggle[aria-expanded="true"]{border-color:var(--orange);color:var(--orange);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){opacity:.3;}

/* ===== 05. Footer ===== */
.site-foot{
  margin-top:clamp(48px,8vw,104px);
  background:var(--void);
  border-top:2px solid var(--line-strong);
}
.foot-panel{
  background:linear-gradient(180deg,rgba(18,42,79,.9),rgba(5,11,24,0));
  border-bottom:1px solid var(--line);
}
.foot-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr 1.45fr;
  gap:clamp(24px,3vw,44px);
  padding-top:clamp(34px,5vw,60px);
  padding-bottom:clamp(34px,5vw,60px);
  align-items:start;
}
.foot-brand{display:flex;flex-direction:column;gap:14px;}
.foot-brand__desc{color:var(--mist);font-size:14px;line-height:1.8;max-width:34ch;}
.foot-col,.foot-contact,.foot-nav{display:flex;flex-direction:column;gap:14px;}
.foot-col__title{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--snow);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.foot-col__title::before{content:"";width:22px;height:2px;background:var(--orange);}
.foot-nav__list{display:flex;flex-direction:column;gap:9px;}
.foot-nav__link{
  display:inline-block;
  color:var(--mist);
  font-size:14.5px;
  text-decoration:none;
  background-image:linear-gradient(var(--cyan),var(--cyan));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  padding-bottom:2px;
  transition:color .2s ease,background-size .25s ease;
}
.foot-nav__link:hover{color:var(--cyan);background-size:100% 1px;}

.contact-list{display:flex;flex-direction:column;gap:12px;}
.contact-line{
  display:grid;
  grid-template-columns:82px 1fr;
  gap:10px;
  align-items:baseline;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.contact-line__k{color:var(--mist);font-size:12.5px;letter-spacing:.1em;}
.contact-line__v{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:var(--snow);
  font-size:14px;
  word-break:break-all;
}
.copy-btn{
  padding:2px 8px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.copy-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.copy-btn.is-copied{background:var(--cyan);border-color:var(--cyan);color:var(--void);}

.foot-bar{background:var(--void);}
.foot-bar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:18px;
  padding-bottom:18px;
}
.foot-copy{color:var(--mist);font-size:12.5px;letter-spacing:.04em;}
.foot-legal{display:flex;flex-wrap:wrap;gap:18px;}
.foot-legal__link{
  color:var(--mist);
  font-size:12.5px;
  letter-spacing:.06em;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.foot-legal__link:hover{color:var(--cyan);border-bottom-color:var(--cyan);}
.foot-icp{color:var(--mist);font-size:12px;letter-spacing:.08em;}

/* ===== 06. Layout primitives ===== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x);}
.section{padding-block:clamp(44px,7vw,92px);}
.section--tight{padding-block:clamp(24px,4vw,52px);}
.section--flush{padding-block:0;}

.rule{height:1px;border:0;background:var(--line);}
.rule--strong{height:2px;background:var(--line-strong);}

.grid{display:grid;gap:var(--gap);}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid--offset{grid-template-columns:repeat(12,minmax(0,1fr));}

/* ===== 07. Type ===== */
.display-1{
  font-size:clamp(2.4rem,7vw,5.5rem);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.04em;
}
.display-2{
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.03em;
}
.h3{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:800;line-height:1.3;letter-spacing:-.01em;}
.lead{font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.85;max-width:64ch;color:rgba(247,250,255,.9);}
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--cyan);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--orange);flex:none;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.muted{color:var(--mist);}
.is-current{color:var(--cyan);}

/* ===== 08. Panel / Card ===== */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:0;
}
.panel--ghost{background:transparent;}
.panel__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:15px clamp(16px,2vw,26px);
  border-bottom:1px solid var(--line);
}
.panel__title{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--snow);
}
.panel__body{padding:clamp(18px,2.4vw,30px);}

.card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  padding:clamp(18px,2.4vw,26px);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:border-color .25s ease,background-color .25s ease,transform .25s ease;
}
.card:hover{border-color:var(--cyan);background:var(--panel-hi);transform:translateY(-3px);}
.card__tag{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
}
.card__title{font-size:1.08rem;font-weight:800;line-height:1.4;letter-spacing:-.01em;}
.card__meta{font-family:var(--font-mono);font-size:12px;color:var(--mist);letter-spacing:.06em;}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border:1px solid var(--line-strong);
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.4;
}
.tag--cyan{color:var(--cyan);border-color:var(--cyan-line);}
.tag--orange{color:var(--orange);border-color:var(--orange-line);}
.tag--red{background:var(--saffron);border-color:var(--saffron);color:var(--snow);}

/* ===== 09. Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 24px;
  border:1px solid var(--cyan);
  background:transparent;
  color:var(--cyan);
  font-size:14px;
  font-weight:600;
  letter-spacing:.1em;
  text-decoration:none;
  cursor:pointer;
  border-radius:0;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn:hover{background:var(--cyan);color:var(--void);}
.btn--solid{background:var(--cyan);color:var(--void);font-weight:800;}
.btn--solid:hover{background:var(--snow);border-color:var(--snow);color:var(--void);}
.btn--energy{border-color:var(--orange);color:var(--orange);}
.btn--energy:hover{background:var(--orange);color:var(--void);}
.btn--ghost{border-color:var(--line-strong);color:var(--snow);}
.btn--ghost:hover{border-color:var(--snow);background:rgba(247,250,255,.08);color:var(--snow);}
.btn--block{width:100%;}

/* ===== 10. Breadcrumbs ===== */
.crumbs{padding-block:18px;}
.crumbs__list{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;}
.crumbs__item{color:var(--mist);}
.crumbs__item+.crumbs__item::before{content:"/";margin-right:8px;color:var(--line-strong);}
.crumbs__item[aria-current="page"]{color:var(--snow);}
.crumbs__link{color:var(--mist);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;}
.crumbs__link:hover{color:var(--cyan);border-bottom-color:var(--cyan);}

/* ===== 11. Index list / Stat ===== */
.index-list{border-top:2px solid var(--line-strong);}
.index-list__row{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  gap:clamp(12px,2vw,24px);
  align-items:baseline;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  transition:background-color .2s ease;
}
.index-list__row:hover{background:rgba(46,242,208,.05);}
.index-list__num{font-family:var(--font-mono);font-size:12px;color:var(--orange);letter-spacing:.06em;}
.index-list__label{font-size:1rem;font-weight:700;letter-spacing:-.005em;transition:color .2s ease;}
.index-list__row:hover .index-list__label{color:var(--cyan);}
.index-list__meta{font-family:var(--font-mono);font-size:12px;color:var(--mist);letter-spacing:.06em;}

.stat{border-top:2px solid var(--cyan);padding-top:12px;display:flex;flex-direction:column;gap:4px;}
.stat__num{font-family:var(--font-mono);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.1;color:var(--snow);}
.stat__label{font-size:12px;letter-spacing:.14em;color:var(--mist);text-transform:uppercase;}

/* ===== 12. Image frames ===== */
.img-frame{
  position:relative;
  overflow:hidden;
  background:#0E2244;
  border:1px solid var(--line);
}
.img-frame>img{width:100%;height:100%;object-fit:cover;display:block;}
.img-frame--tall{aspect-ratio:9/16;}
.img-frame--portrait{aspect-ratio:3/4;}
.img-frame--wide{aspect-ratio:16/9;}
.img-frame--banner{aspect-ratio:21/9;}
.img-frame--empty{
  background-image:repeating-linear-gradient(135deg,rgba(143,163,191,.16) 0 1px,transparent 1px 10px);
  background-color:#0E2244;
}
.img-frame__cap{
  position:absolute;
  inset:auto 0 0 0;
  padding:10px 14px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--snow);
  background:linear-gradient(180deg,rgba(5,11,24,0),rgba(5,11,24,.88));
}

/* ===== 13. Utilities / Motion ===== */
.skip-link{
  position:absolute;
  left:12px;
  top:-72px;
  z-index:99;
  padding:11px 18px;
  background:var(--cyan);
  color:var(--void);
  font-size:14px;
  font-weight:800;
  letter-spacing:.06em;
  text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{top:14px;}

.scroll-meter{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:4px;
  z-index:80;
  pointer-events:none;
  transform:scaleX(0);
  transform-origin:0 50%;
  background-image:linear-gradient(90deg,var(--cyan),var(--violet) 46%,var(--orange));
}

.js [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1);
}
.js [data-reveal].is-visible{opacity:1;transform:none;}

/* ===== 14. Responsive ===== */
@media (max-width:1024px){
  .foot-grid{grid-template-columns:1fr 1fr;}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:820px){
  .mast{padding-top:18px;}
  .mast__grid{grid-template-columns:1fr;justify-items:center;gap:8px;}
  .mast__meta{justify-content:center;}
  .mast__meta--end{display:none;}
  .nav-toggle{
    display:inline-flex;
    position:absolute;
    top:18px;
    right:var(--pad-x);
  }
  .nav{
    display:none;
    margin-top:16px;
    border-top:1px solid var(--line);
  }
  .nav[data-open]{display:block;}
  .nav__list{flex-direction:column;}
  .nav__item+.nav__item{border-left:0;border-top:1px solid var(--line);}
  .nav__item::before{
    display:block;
    position:absolute;
    left:6px;
    top:16px;
    content:counter(navi,decimal-leading-zero);
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.1em;
    color:var(--orange);
  }
  .nav__link{padding:14px 8px 14px 46px;font-size:15.5px;letter-spacing:.06em;}
  .nav__link::after{left:46px;right:auto;width:44px;bottom:9px;}
}
@media (max-width:640px){
  body{font-size:16px;}
  .mast__meta{display:none;}
  .foot-grid{grid-template-columns:1fr;gap:28px;}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}
  .index-list__row{grid-template-columns:44px minmax(0,1fr);}
  .index-list__meta{grid-column:2;}
  .contact-line{grid-template-columns:1fr;gap:4px;}
  .foot-bar__inner{flex-direction:column;align-items:flex-start;gap:10px;}
  .img-frame--tall{aspect-ratio:4/5;}
}

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