:root{
  --arena:#070B14;
  --stand:#0E1626;
  --console:#182335;
  --ink:#F2F5F7;
  --orange:#FF6A1A;
  --cyan:#35E0D0;
  --mist:#93A4BA;
  --flag-y:#FFD24A;
  --flag-r:#E5484D;
  --win:#6EE7A8;

  --line:rgba(147,164,186,.16);
  --line-strong:rgba(147,164,186,.34);
  --field:rgba(24,35,53,.72);

  --r-lg:26px;
  --r-md:20px;
  --r-sm:14px;
  --pill:999px;

  --rail-w:276px;
  --bar-h:64px;
  --gutter:clamp(16px,4vw,40px);
  --maxw:1440px;

  --font-display:"Barlow Condensed","Oswald","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --font-num:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,"Courier New",monospace;

  --ease:cubic-bezier(.22,.68,.28,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--bar-h) + 16px);
}
body,h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; }
[hidden]{ display:none !important; }

body{
  min-height:100vh;
  background:var(--arena);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(15px,.35vw + 14px,17px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.02em;
}
p{ max-width:72ch; }
strong{ font-weight:700; }

::selection{ background:rgba(255,106,26,.34); color:#fff; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px; }

#main-content{ display:block; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#22304a; border-radius:var(--pill); }
::-webkit-scrollbar-thumb:hover{ background:#2d3f5e; }

/* ---------- utilities ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.num{
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.divider{
  height:1px;
  border:0;
  margin-block:clamp(20px,3vw,36px);
  background:linear-gradient(90deg,var(--line-strong),transparent 85%);
}
.skip-link{
  position:fixed;
  top:.6rem; left:.6rem;
  z-index:300;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.45rem 1.1rem;
  border-radius:var(--pill);
  background:var(--cyan);
  color:#04191A;
  font-size:.85rem;
  font-weight:700;
  text-decoration:none;
  transform:translateY(-180%);
  transition:transform .2s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible{ transform:none; }

/* ---------- buttons & tags ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:46px;
  padding:.55rem 1.2rem;
  border:1px solid transparent;
  border-radius:var(--pill);
  font-family:var(--font-body);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.03em;
  text-decoration:none;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--orange); color:#180A02; }
.btn--primary:hover{ background:#FF8136; }
.btn--ghost{ border-color:var(--line-strong); color:var(--ink); background:rgba(24,35,53,.35); }
.btn--ghost:hover{ border-color:var(--cyan); color:var(--cyan); }
.btn--cyan{ background:var(--cyan); color:#04191A; }
.btn--cyan:hover{ background:#5AEADC; }

.tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-height:28px;
  padding:.1rem .68rem;
  border:1px solid transparent;
  border-radius:var(--pill);
  background:rgba(147,164,186,.12);
  color:var(--mist);
  font-size:.72rem;
  letter-spacing:.06em;
  line-height:1.4;
}
.tag--orange{ background:rgba(255,106,26,.14); border-color:rgba(255,106,26,.35); color:#FFA471; }
.tag--cyan{ background:rgba(53,224,208,.12); border-color:rgba(53,224,208,.3); color:var(--cyan); }
.tag--yellow{ background:rgba(255,210,74,.14); border-color:rgba(255,210,74,.35); color:var(--flag-y); }
.tag--red{ background:rgba(229,72,77,.14); border-color:rgba(229,72,77,.35); color:#FF9094; }

/* ---------- header : fixed rail ---------- */
.site-header{
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:120;
  display:flex;
  flex-direction:column;
  width:var(--rail-w);
  background:#0B1322;
  border-right:1px solid var(--line);
  box-shadow:inset -1px 0 0 rgba(53,224,208,.06);
  overflow:visible;
}
.header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:1.15rem 1.05rem .95rem;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,106,26,.10),transparent 62%),
    transparent;
}
.brand{
  display:flex;
  align-items:center;
  gap:.68rem;
  min-height:44px;
  text-decoration:none;
}
.brand__mark{
  display:grid;
  place-items:center;
  width:38px; height:38px;
  flex:0 0 38px;
  border:1px solid rgba(255,106,26,.34);
  border-radius:var(--r-sm);
  background:rgba(255,106,26,.10);
}
.brand__text{
  display:flex;
  flex-direction:column;
  gap:.1rem;
  line-height:1.15;
  min-width:0;
}
.brand__name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.02rem;
  letter-spacing:.01em;
  color:var(--ink);
  white-space:nowrap;
}
.brand__tag{
  font-size:.7rem;
  letter-spacing:.09em;
  color:var(--mist);
  white-space:nowrap;
}

.header__panel{
  display:flex;
  flex-direction:column;
  gap:1.05rem;
  flex:1 1 auto;
  min-height:0;
  padding:1.05rem 1rem 1.15rem;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.squad-picker__label{
  font-family:var(--font-num);
  font-size:.68rem;
  letter-spacing:.18em;
  color:var(--mist);
  margin-bottom:.5rem;
}
.squad-picker__list{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.squad-chip{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.3rem .82rem;
  border:1px solid var(--line-strong);
  border-radius:var(--pill);
  background:rgba(24,35,53,.62);
  color:var(--mist);
  font-size:.8rem;
  letter-spacing:.04em;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.squad-chip:hover{ color:var(--ink); border-color:rgba(53,224,208,.55); }
.squad-chip[aria-pressed="true"]{
  background:var(--orange);
  border-color:var(--orange);
  color:#180A02;
  font-weight:700;
}

.rail-nav{ margin-top:.1rem; }
.rail-nav__list{
  display:flex;
  flex-direction:column;
  gap:.12rem;
}
.nav-link{
  position:relative;
  display:flex;
  align-items:center;
  min-height:44px;
  padding:.35rem .85rem .35rem 1.15rem;
  border-radius:var(--r-sm);
  color:var(--mist);
  font-size:.95rem;
  letter-spacing:.02em;
  text-decoration:none;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.nav-link::before{
  content:"";
  position:absolute;
  left:.32rem;
  top:50%;
  translate:0 -50%;
  width:3px;
  height:6px;
  border-radius:var(--pill);
  background:var(--orange);
  opacity:0;
  transition:height .2s var(--ease),opacity .2s var(--ease);
}
.nav-link:hover{
  color:var(--ink);
  background:rgba(53,224,208,.07);
}
.nav-link:hover::before{ opacity:.65; height:13px; }
.nav-link[aria-current="page"]{
  color:var(--ink);
  font-weight:700;
  background:rgba(255,106,26,.15);
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.28);
}
.nav-link[aria-current="page"]::before{ opacity:1; height:22px; }

.header__meta{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  padding-top:.9rem;
  border-top:1px solid var(--line);
}
.lang-tag{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:.15rem .62rem;
  border:1px solid var(--line-strong);
  border-radius:var(--pill);
  font-family:var(--font-num);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--mist);
}
.copy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  min-height:44px;
  padding:.35rem .82rem;
  border:1px solid rgba(53,224,208,.42);
  border-radius:var(--pill);
  background:rgba(53,224,208,.08);
  color:var(--cyan);
  font-size:.78rem;
  letter-spacing:.04em;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.copy-btn:hover{ background:rgba(53,224,208,.17); border-color:var(--cyan); }
.copy-btn.is-copied{
  background:var(--win);
  border-color:var(--win);
  color:#04140C;
  font-weight:700;
}
.copy-btn.is-failed{
  background:rgba(229,72,77,.18);
  border-color:var(--flag-r);
  color:#FF9094;
}
.copy-btn--block{ width:100%; }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  place-items:center;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:rgba(24,35,53,.72);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.nav-toggle:hover{ border-color:var(--cyan); }
.nav-toggle__bars{ display:block; width:18px; }
.nav-toggle__bars span{
  display:block;
  height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.nav-toggle__bars span + span{ margin-top:4px; }
.nav-toggle[aria-expanded="true"]{ border-color:var(--orange); background:rgba(255,106,26,.16); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- generic surfaces ---------- */
.section{ padding-block:clamp(28px,4.6vw,58px); }
.section__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:clamp(16px,2.4vw,28px);
}
.section__eyebrow{
  font-family:var(--font-num);
  font-size:.72rem;
  letter-spacing:.2em;
  color:var(--cyan);
}
.section__title{ font-size:clamp(1.5rem,3vw,2.4rem); }
.section__desc{
  max-width:58ch;
  color:var(--mist);
  font-size:.95rem;
}
.grid{
  display:grid;
  gap:clamp(14px,2vw,24px);
}
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); }
.grid--12{ grid-template-columns:repeat(12,minmax(0,1fr)); }

.card{
  padding:clamp(16px,2vw,24px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(24,35,53,.92),rgba(14,22,38,.94));
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.card:hover{ border-color:rgba(53,224,208,.34); }
.card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  margin-bottom:.75rem;
}
.card__title{
  font-family:var(--font-display);
  font-size:1.12rem;
  font-weight:800;
  letter-spacing:-.01em;
}
.card__text{
  color:var(--mist);
  font-size:.92rem;
  line-height:1.72;
}

.breadcrumb{ padding-block:.85rem; }
.breadcrumb__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.3rem;
  font-size:.8rem;
  color:var(--mist);
}
.breadcrumb__item{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
}
.breadcrumb__item + .breadcrumb__item::before{
  content:"/";
  color:rgba(147,164,186,.45);
}
.breadcrumb__link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--mist);
  text-decoration:none;
  transition:color .18s var(--ease);
}
.breadcrumb__link:hover{ color:var(--cyan); }
.breadcrumb__current{ color:var(--ink); font-weight:700; }

/* ---------- media placeholders ---------- */
.media{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  aspect-ratio:16 / 10;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:
    radial-gradient(120% 100% at 12% 0%,rgba(53,224,208,.16),transparent 58%),
    radial-gradient(90% 90% at 100% 100%,rgba(255,106,26,.14),transparent 62%),
    #0B1424;
}
.media__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media--wide{ aspect-ratio:21 / 9; }
.media--tall{ aspect-ratio:3 / 4; }
.media--square{ aspect-ratio:1 / 1; }
.media__caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:.7rem 1rem;
  font-size:.78rem;
  letter-spacing:.03em;
  color:var(--mist);
  background:linear-gradient(180deg,transparent,rgba(7,11,20,.9));
}

/* ---------- footer ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(44px,7vw,90px);
  background:#0A1120;
  border-top:1px solid var(--line);
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--orange),var(--cyan) 42%,rgba(53,224,208,0) 88%);
}
.footer__grid{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(30px,4.6vw,56px) var(--gutter) 0;
  display:grid;
  gap:clamp(24px,4vw,48px);
  grid-template-columns:1fr;
}
.footer__brand{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.footer__mark{
  display:grid;
  place-items:center;
  width:52px; height:52px;
  border:1px solid rgba(53,224,208,.26);
  border-radius:var(--r-md);
  background:rgba(53,224,208,.07);
}
.footer__name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:.01em;
}
.footer__tag{
  max-width:34ch;
  color:var(--mist);
  font-size:.9rem;
  line-height:1.7;
}
.footer__cta{ align-self:flex-start; margin-top:.35rem; }

.footer__cols{
  display:grid;
  gap:clamp(20px,3vw,34px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.footer__col-title{
  position:relative;
  margin-bottom:.65rem;
  padding-left:.85rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--mist);
}
.footer__col-title::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:8px; height:8px;
  border-radius:2px;
  background:var(--orange);
}
.footer__list{ display:flex; flex-direction:column; }
.footer__link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--mist);
  font-size:.9rem;
  text-decoration:none;
  transition:color .18s var(--ease);
}
.footer__link:hover,
.footer__link:focus-visible{ color:var(--cyan); }

.footer__contact{
  max-width:var(--maxw);
  margin:clamp(22px,3.4vw,38px) auto 0;
  padding:clamp(18px,2.6vw,26px) var(--gutter);
  display:grid;
  gap:.9rem 1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  align-items:start;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.footer__contact-item{ min-width:0; }
.footer__contact-item--wide{ grid-column:1 / -1; }
.footer__contact-label{
  display:block;
  font-family:var(--font-num);
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--mist);
  margin-bottom:.2rem;
}
.footer__contact-value{
  display:block;
  color:var(--ink);
  font-size:.92rem;
  line-height:1.6;
  overflow-wrap:anywhere;
}
.footer__contact-action{ display:flex; align-items:flex-end; }

.footer__note{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:.95rem var(--gutter) 0;
  color:var(--mist);
  font-size:.8rem;
  line-height:1.75;
}
.footer__bottom{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:1rem var(--gutter) 1.7rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem 1.2rem;
  font-size:.8rem;
  color:var(--mist);
}
.footer__legal{ font-variant-numeric:tabular-nums; }
.footer__icp{ font-family:var(--font-num); font-size:.76rem; letter-spacing:.02em; }
.footer__legal-links{
  display:flex;
  flex-wrap:wrap;
  gap:0 1rem;
  margin-left:auto;
}

/* ---------- reveal ---------- */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .42s var(--ease) var(--reveal-delay,0ms),transform .42s var(--ease) var(--reveal-delay,0ms);
}
html.js [data-reveal].is-visible{
  opacity:1;
  transform:none;
}

/* ---------- responsive ---------- */
@media (min-width:768px){
  .footer__grid{ grid-template-columns:minmax(220px,1fr) 1.7fr; }
  .footer__cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (min-width:1024px){
  body{ padding-left:var(--rail-w); }
}

@media (max-width:1023px){
  body{ padding-top:var(--bar-h); }

  .site-header{
    inset:0 0 auto 0;
    width:100%;
    height:auto;
    flex-direction:column;
    border-right:0;
    border-bottom:1px solid var(--line);
    overflow:visible;
    box-shadow:0 10px 30px rgba(3,7,14,.55);
  }
  .header__bar{
    min-height:var(--bar-h);
    padding:.5rem var(--gutter);
    border-bottom:1px solid var(--line);
  }
  .nav-toggle{ display:grid; }

  .header__panel{
    position:fixed;
    top:var(--bar-h);
    left:0; right:0;
    width:100%;
    max-height:calc(100vh - var(--bar-h));
    flex:0 0 auto;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:1rem var(--gutter) 1.4rem;
    gap:.95rem;
    background:#0B1322;
    border-bottom:1px solid var(--line-strong);
    box-shadow:0 26px 52px rgba(0,0,0,.5);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s var(--ease);
  }
  .header__panel[data-open="true"]{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .header__meta{ margin-top:.4rem; }

  .footer__legal-links{ margin-left:0; }
}

@media (max-width:520px){
  .brand__name{ font-size:.95rem; }
  .brand__tag{ font-size:.66rem; }
  .footer__contact{ grid-template-columns:1fr; }
  .footer__contact-item--wide{ grid-column:auto; }
}

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