/* ============ 6676网页品牌 · 北境数字门户 · 共享样式 ============ */

:root{
  --ink:#070B12;
  --ink-2:#0E1A2B;
  --ink-3:#132539;
  --white:#F4FAFF;
  --steel:#9AAFC4;
  --ice:#8FD8FF;
  --aurora:#2EF2C8;
  --signal:#FF7A3D;
  --glacier:#2E7DFF;
  --grid:#1E3550;
  --amber:#FFC857;

  --bar-h:62px;
  --rail-w:236px;
  --gap:clamp(14px,2vw,28px);
  --pad:clamp(18px,4vw,52px);
  --radius:18px;

  --font-head:"HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",SFMono-Regular,Consolas,"Liberation Mono",monospace;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100%;
  padding-top:var(--bar-h);
  background-color:var(--ink);
  background-image:
    radial-gradient(120% 80% at 92% -12%, rgba(46,242,200,.09), transparent 58%),
    radial-gradient(100% 70% at -10% 105%, rgba(46,125,255,.12), transparent 62%);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

#main-content{ display:block; min-height:60vh; }

img,svg,video{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{
  margin:0 0 .5em;
  font-family:var(--font-head);
  font-weight:800;
  line-height:1.16;
  letter-spacing:.06em;
  color:var(--white);
  text-wrap:balance;
}
h1{ font-size:clamp(34px,5.4vw,60px); letter-spacing:.09em; }
h2{ font-size:clamp(26px,3.4vw,38px); letter-spacing:.07em; }
h3{ font-size:clamp(20px,2.2vw,26px); }
h4{ font-size:18px; letter-spacing:.04em; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--ice); text-decoration:none; }
a:hover{ color:var(--white); }

ul,ol{ margin:0 0 1.1em; padding-left:1.2em; }
li{ margin-bottom:.35em; }

::selection{ background:rgba(46,242,200,.28); color:var(--white); }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--aurora);
  outline-offset:3px;
  border-radius:6px;
}

.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

.link-ice{
  color:var(--ice);
  border-bottom:1px solid rgba(143,216,255,.4);
  padding-bottom:1px;
}
.link-ice:hover{ color:var(--aurora); border-bottom-color:var(--aurora); }

/* ---------- 头部：门户横梁 ---------- */
.site-header{ position:relative; z-index:90; }

.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:200;
  transform:translateY(-220%);
  padding:10px 20px;
  border-radius:999px;
  background:var(--aurora);
  color:#04120F;
  font-weight:700;
  font-size:14px;
  letter-spacing:.04em;
  transition:transform .22s ease;
}
.skip-link:focus{ transform:translateY(0); color:#04120F; }

.site-bar{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--bar-h);
  z-index:80;
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,28px);
  padding:0 clamp(14px,3vw,28px);
  background:rgba(7,11,18,.9);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--grid);
}
.site-bar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--ice) 12%,var(--aurora) 38%,transparent 72%);
  opacity:.55;
  pointer-events:none;
}

.site-bar__mark{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.site-bar__glyph{
  flex:none;
  width:11px; height:11px;
  border-radius:3px;
  background:var(--aurora);
  transform:rotate(45deg);
  box-shadow:0 0 14px rgba(46,242,200,.7);
}
.site-bar__name{
  font-family:var(--font-head);
  font-weight:800;
  font-size:15px;
  letter-spacing:.1em;
  color:var(--white);
  white-space:nowrap;
}
.site-bar__sep{
  flex:none;
  width:1px; height:16px;
  background:var(--grid);
}
.site-bar__sub{
  font-size:12px;
  letter-spacing:.26em;
  color:var(--steel);
  white-space:nowrap;
}

.site-bar__meta{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}
.status-dot{
  flex:none;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--aurora);
  animation:pulse 3.2s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(46,242,200,.5); }
  70%{ box-shadow:0 0 0 10px rgba(46,242,200,0); }
  100%{ box-shadow:0 0 0 0 rgba(46,242,200,0); }
}
.site-bar__ver{
  font-size:12px;
  letter-spacing:.12em;
  color:var(--ice);
  border:1px solid var(--grid);
  border-radius:999px;
  padding:3px 10px;
  white-space:nowrap;
}
.site-bar__utilities{ display:flex; gap:6px; }
.util-link{
  display:inline-block;
  font-size:13px;
  color:var(--steel);
  padding:5px 11px;
  border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s;
}
.util-link:hover{ color:var(--white); border-color:var(--grid); }
.util-link--accent{
  color:var(--signal);
  border-color:rgba(255,122,61,.35);
}
.util-link--accent:hover{
  color:var(--signal);
  border-color:var(--signal);
  background:rgba(255,122,61,.12);
}

.nav-toggle{
  display:none;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--grid);
  background:transparent;
  color:var(--steel);
  font:inherit;
  font-size:13px;
  letter-spacing:.06em;
  cursor:pointer;
  transition:color .2s,border-color .2s;
}
.nav-toggle:hover{ color:var(--white); border-color:var(--ice); }
.nav-toggle[aria-expanded="true"]{ color:var(--aurora); border-color:var(--aurora); }
.nav-toggle__bars{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  width:16px;
}
.nav-toggle__bars i{
  display:block;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child{ transform:translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child{ transform:translateY(-3px) rotate(-45deg); }
.nav-toggle__label{ line-height:1; }

/* ---------- 头部：左侧灯带导航 ---------- */
.site-rail{
  position:fixed;
  top:var(--bar-h);
  left:0;
  bottom:0;
  width:var(--rail-w);
  z-index:70;
  display:flex;
  flex-direction:column;
  padding:22px 18px 18px;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:linear-gradient(180deg,var(--ink-2) 0%,#0A1420 58%,var(--ink) 100%);
  border-right:1px solid var(--grid);
}
.site-rail::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:220px;
  background:radial-gradient(90% 100% at 0% 100%,rgba(46,242,200,.16),transparent 70%);
  pointer-events:none;
}
.site-rail::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width:6px; height:100%;
  background:repeating-linear-gradient(180deg,var(--grid) 0 1px,transparent 1px 14px);
  opacity:.75;
  pointer-events:none;
}

.rail-brand{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:0 6px 18px;
  border-bottom:1px solid var(--grid);
  color:var(--white);
  text-decoration:none;
}
.rail-brand:hover{ color:var(--white); }
.rail-brand__no{
  font-size:26px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.14em;
  color:var(--white);
}
.rail-brand:hover .rail-brand__no{ color:var(--aurora); }
.rail-brand__txt{
  font-size:12px;
  letter-spacing:.28em;
  color:var(--steel);
}

.rail-nav{
  position:relative;
  flex:1 1 auto;
  margin-top:16px;
}
.rail-nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rail-nav__list li{ margin:0; }
.rail-nav__link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px 10px 14px;
  border-left:2px solid transparent;
  border-radius:10px;
  color:var(--steel);
  font-size:15px;
  font-weight:500;
  letter-spacing:.03em;
  transition:color .22s,background .22s,border-color .22s;
}
.rail-nav__link:hover{
  color:var(--white);
  background:rgba(143,216,255,.06);
}
.rail-nav__link[aria-current="page"]{
  color:var(--aurora);
  font-weight:700;
  border-left-color:var(--aurora);
  background:linear-gradient(90deg,rgba(46,242,200,.13),transparent 82%);
}
.rail-nav__num{
  font-size:11px;
  letter-spacing:.1em;
  color:#33506F;
  transition:color .22s;
}
.rail-nav__link:hover .rail-nav__num{ color:var(--ice); }
.rail-nav__link[aria-current="page"] .rail-nav__num{ color:var(--aurora); }

.rail-foot{
  position:relative;
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid var(--grid);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.rail-foot__line{
  margin:0;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--ice);
  opacity:.85;
}
.rail-foot__note{
  margin:0;
  font-size:12px;
  color:var(--steel);
}
.rail-foot__cta{
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,122,61,.45);
  background:rgba(255,122,61,.14);
  color:var(--signal);
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  transition:background .2s,color .2s,border-color .2s;
}
.rail-foot__cta:hover{
  background:var(--signal);
  border-color:var(--signal);
  color:#1A0700;
}

.rail-veil{ display:none; }

/* ---------- 滚动进度 ---------- */
.scroll-meter{
  position:absolute;
  left:0; bottom:-1px;
  width:100%;
  height:2px;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--glacier),var(--aurora));
  pointer-events:none;
  z-index:2;
}

/* ---------- 页脚 ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(56px,8vw,120px);
  padding:clamp(26px,4vw,48px) clamp(18px,4vw,52px) 0;
  background:linear-gradient(180deg,#0A131F 0%,var(--ink) 72%);
  border-top:1px solid var(--grid);
  color:var(--steel);
  font-size:14px;
}
.site-footer::before{
  content:"";
  position:absolute;
  top:-1px; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,var(--aurora),var(--ice) 28%,transparent 68%);
  opacity:.7;
}

.footer-ticker{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  padding-bottom:16px;
  border-bottom:1px solid var(--grid);
  font-size:11px;
  letter-spacing:.18em;
  color:#557093;
}
.footer-ticker > span{ white-space:nowrap; }
.footer-ticker > span:first-child{ color:var(--aurora); }

.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.4fr;
  gap:clamp(20px,3vw,44px);
  padding:clamp(26px,4vw,48px) 0;
}

.footer-brand__mark{
  margin:0 0 12px;
  font-family:var(--font-head);
  font-size:22px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--white);
}
.footer-brand__sum{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.85;
  color:var(--steel);
  max-width:34ch;
}
.footer-brand__stamp{
  margin:0;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--ice);
  opacity:.75;
}

.footer-col{ min-width:0; }
.footer-col__title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 4px;
  font-family:var(--font-head);
  font-size:12px;
  font-weight:700;
  letter-spacing:.24em;
  color:var(--white);
}
.footer-col__title::before{
  content:"";
  width:5px; height:5px;
  border-radius:1px;
  background:var(--aurora);
  flex:none;
}
.footer-col__list{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.footer-col__list li{ margin:0; }
.footer-col__link{
  display:inline-block;
  font-size:14px;
  color:var(--steel);
  transition:color .2s,transform .2s;
}
.footer-col__link:hover{
  color:var(--ice);
  transform:translateX(3px);
}

.footer-contact{ min-width:0; }
.footer-contact__list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-contact__list li{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:10px;
  align-items:start;
  margin:0;
}
.footer-contact__key{
  padding-top:3px;
  font-size:10px;
  letter-spacing:.14em;
  color:var(--ice);
}
.footer-contact__val{
  font-size:14px;
  color:var(--white);
  word-break:break-word;
  line-height:1.6;
}
.footer-contact__note{
  margin:14px 0 0;
  padding-left:12px;
  border-left:1px solid var(--grid);
  font-size:13px;
  line-height:1.75;
  color:var(--steel);
}

.footer-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 24px;
  padding:16px 0 22px;
  border-top:1px solid var(--grid);
  font-size:12px;
}
.footer-base__legal{ margin:0; color:var(--steel); }
.footer-base__meta{
  margin:0;
  margin-left:auto;
  font-size:11px;
  letter-spacing:.1em;
  color:#557093;
}
.footer-top{
  padding:6px 16px;
  border-radius:999px;
  border:1px solid var(--grid);
  background:transparent;
  color:var(--ice);
  font:inherit;
  font-size:12px;
  letter-spacing:.08em;
  cursor:pointer;
  transition:color .2s,border-color .2s;
}
.footer-top:hover{ color:var(--aurora); border-color:var(--aurora); }

/* ---------- 通用容器与网格 ---------- */
.wrap{
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{ padding-block:clamp(36px,6vw,88px); }
.section--tight{ padding-block:clamp(22px,3vw,44px); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ice);
}
.eyebrow::before{
  content:"";
  width:18px; height:1px;
  background:var(--aurora);
  flex:none;
}

.grid-16{
  display:grid;
  grid-template-columns:repeat(16,minmax(0,1fr));
  gap:var(--gap);
}
.span-3{ grid-column:span 3; }
.span-4{ grid-column:span 4; }
.span-5{ grid-column:span 5; }
.span-6{ grid-column:span 6; }
.span-7{ grid-column:span 7; }
.span-8{ grid-column:span 8; }
.span-9{ grid-column:span 9; }
.span-10{ grid-column:span 10; }
.span-11{ grid-column:span 11; }
.span-12{ grid-column:span 12; }

.panel{
  padding:clamp(18px,2.4vw,30px);
  border:1px solid var(--grid);
  border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(19,37,57,.92),rgba(10,19,31,.92));
}
.panel--flush{ padding:0; overflow:hidden; }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:999px;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  letter-spacing:.03em;
  line-height:1.2;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s,color .2s,border-color .2s,transform .18s;
}
.btn:hover{ transform:translateY(-1px); }
.btn--signal{ background:var(--signal); color:#180800; }
.btn--signal:hover{ background:#FF9260; color:#180800; }
.btn--ghost{ background:transparent; border-color:var(--grid); color:var(--white); }
.btn--ghost:hover{ border-color:var(--aurora); color:var(--aurora); }
.btn--ice{
  background:rgba(143,216,255,.12);
  border-color:rgba(143,216,255,.4);
  color:var(--ice);
}
.btn--ice:hover{ background:rgba(143,216,255,.2); color:var(--white); }

/* ---------- 标签 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--grid);
  background:rgba(14,26,43,.7);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--steel);
}
.tag--aurora{ color:var(--aurora); border-color:rgba(46,242,200,.4); background:rgba(46,242,200,.08); }
.tag--signal{ color:var(--signal); border-color:rgba(255,122,61,.4); background:rgba(255,122,61,.08); }
.tag--amber{ color:var(--amber); border-color:rgba(255,200,87,.4); background:rgba(255,200,87,.08); }

/* ---------- 面包屑 ---------- */
.crumbs{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--steel);
}
.crumbs__list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
}
.crumbs__list li{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
}
.crumbs__list li + li::before{
  content:"/";
  color:#33506F;
}
.crumbs__link{
  color:var(--steel);
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.crumbs__link:hover{ color:var(--ice); border-bottom-color:var(--ice); }
.crumbs__here{ color:var(--ice); }

/* ---------- 图片容器基础规则 ---------- */
.media-frame{
  position:relative;
  display:block;
  overflow:hidden;
  width:100%;
  aspect-ratio:16 / 10;
  border:1px solid var(--grid);
  border-radius:var(--radius);
  background:
    radial-gradient(120% 120% at 18% 0%,rgba(46,125,255,.28),transparent 62%),
    radial-gradient(90% 90% at 100% 100%,rgba(46,242,200,.18),transparent 62%),
    linear-gradient(160deg,var(--ink-2),var(--ink));
}
.media-frame img,
.media-frame__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media-frame--wide{ aspect-ratio:21 / 9; }
.media-frame--tall{ aspect-ratio:4 / 5; }
.media-frame--square{ aspect-ratio:1 / 1; }
.media-frame__cap{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:14px 16px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--ice);
  background:linear-gradient(180deg,transparent,rgba(7,11,18,.92));
}

/* ---------- 入场显现 ---------- */
[data-reveal]{
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);
}
html.js [data-reveal]{
  opacity:0;
  transform:translateY(16px);
}
html.js [data-reveal].is-in{
  opacity:1;
  transform:none;
}

/* ---------- 响应式 ---------- */
@media (min-width:1024px){
  body{
    padding-left:var(--rail-w);
    font-size:17px;
  }
}

@media (max-width:1023px){
  .nav-toggle{ display:inline-flex; }
  .site-bar__utilities{ display:none; }

  .site-rail{
    width:min(302px,86vw);
    transform:translateX(-102%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow:24px 0 60px rgba(0,0,0,.55);
  }
  .site-rail[data-open="true"]{ transform:translateX(0); }

  .rail-veil{
    display:block;
    position:fixed;
    top:var(--bar-h); left:0; right:0; bottom:0;
    z-index:65;
    background:rgba(4,7,12,.66);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
  }
  .rail-veil[data-open="true"]{
    opacity:1;
    pointer-events:auto;
  }

  html.nav-open,
  html.nav-open body{ overflow:hidden; }

  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-base__meta{ margin-left:0; }
}

@media (max-width:960px){
  .grid-16{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .span-3,.span-4{ grid-column:span 3; }
  .span-5,.span-6,.span-7,.span-8,
  .span-9,.span-10,.span-11,.span-12{ grid-column:span 6; }
}

@media (max-width:720px){
  .site-bar__sep,
  .site-bar__sub{ display:none; }
  .site-bar__ver{ font-size:11px; padding:2px 8px; }
  .status-dot{ display:none; }
  .site-bar__name{ font-size:14px; letter-spacing:.06em; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-contact__note{ border-left:none; padding-left:0; }
}

@media (max-width:560px){
  .grid-16{ grid-template-columns:1fr; }
  .grid-16 > *{ grid-column:1 / -1 !important; }
  .footer-base{ flex-direction:column; align-items:flex-start; }
  .footer-top{ margin-top:4px; }
}

@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 !important;
    transform:none !important;
  }
  .site-rail{ transition:none; }
}