:root{
  --void:#070B14;
  --panel:#0E1626;
  --blue:#1F6BFF;
  --cyan:#26F0D0;
  --orange:#FF7A2F;
  --violet:#7A5CFF;
  --ink:#F2F6FF;
  --mute:#93A2C0;
  --line:#1E2A42;
  --green:#37D67A;
  --mist:#E8EEF9;
  --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,"Courier New",monospace;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --shell-max:1440px;
  --gutter:clamp(16px,4vw,48px);
  --edge:linear-gradient(120deg,var(--blue),var(--cyan) 55%,var(--violet));
}
*,*::before,*::after{box-sizing:border-box}
html{margin:0;padding:0;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:-20% -10% auto -10%;
  height:70vh;
  background:
    radial-gradient(46% 60% at 14% 6%,rgba(31,107,255,.28),transparent 70%),
    radial-gradient(40% 52% at 88% 0%,rgba(122,92,255,.22),transparent 72%),
    radial-gradient(34% 44% at 60% 22%,rgba(38,240,208,.14),transparent 74%);
  pointer-events:none;
  z-index:0;
}
img,svg,video{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{
  font-weight:900;
  line-height:1.06;
  letter-spacing:-.03em;
  font-stretch:95%;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
::selection{background:rgba(31,107,255,.45);color:#fff}
.text-mute{color:var(--mute)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);vertical-align:middle;margin-right:.5em}
.wrap{
  width:100%;
  max-width:var(--shell-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ============ 按钮 ============ */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 22px;
  gap:8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--ink);
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  white-space:nowrap;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,color .25s ease;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(38,240,208,.55)}
.btn:active{transform:translateY(0)}
.btn--pulse{
  border-color:transparent;
  color:#04101A;
  background-image:var(--edge);
  background-size:160% 100%;
  background-position:0 0;
  box-shadow:0 10px 26px -14px rgba(31,107,255,.9);
  transition:background-position .45s ease,transform .25s ease,box-shadow .25s ease;
}
.btn--pulse:hover{
  background-image:linear-gradient(120deg,var(--cyan),var(--orange) 60%,var(--blue));
  background-position:100% 0;
  box-shadow:0 14px 32px -12px rgba(255,122,47,.75);
}
.btn--ghost{background:transparent;color:var(--mute)}
.btn--ghost:hover{color:var(--ink);background:rgba(31,107,255,.12)}

/* ============ 跳转链接 ============ */
.skip-link{
  position:absolute;
  left:12px;
  top:-64px;
  z-index:200;
  padding:10px 18px;
  border-radius:999px;
  background:var(--cyan);
  color:#04101A;
  font-weight:700;
  transition:top .2s ease;
}
.skip-link:focus-visible{top:12px}

/* ============ 页头 ============ */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(7,11,20,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(16px,3vw,40px);
  padding-block:clamp(12px,1.6vw,20px);
  transition:padding .3s ease;
}
.site-header[data-condensed] .site-header__inner{padding-block:8px}
.site-header__lead,
.site-header__trail{display:flex;align-items:center;gap:clamp(16px,2.6vw,44px)}
.site-header__trail{gap:clamp(14px,2vw,28px)}

.brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.brand__mark{
  width:24px;
  height:24px;
  border-radius:9px;
  background-image:var(--edge);
  box-shadow:0 0 0 1px rgba(38,240,208,.32),0 8px 22px -10px rgba(31,107,255,.9);
  position:relative;
}
.brand__mark::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:3px;
  background:#04101A;
}
.brand__text{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-size:17px;
  font-weight:900;
  letter-spacing:.06em;
  font-stretch:95%;
}
.brand__sub{
  font-family:var(--font-mono);
  font-size:10px;
  font-style:normal;
  letter-spacing:.22em;
  color:var(--mute);
  font-weight:600;
}

.nav__list{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px)}
.nav__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 2px;
  font-size:14px;
  font-weight:600;
  color:var(--mute);
  transition:color .2s ease;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:8px;
  height:2px;
  border-radius:2px;
  background-image:var(--edge);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .28s ease;
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after{transform:scaleX(.6)}
.nav__link[aria-current="page"]{color:var(--ink)}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.header-cta{flex:0 0 auto}

/* ============ 移动开关与抽屉 ============ */
.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
}
.nav-toggle__bars{
  position:relative;
  width:18px;height:2px;
  background:var(--cyan);
  border-radius:2px;
  box-shadow:0 6px 0 0 var(--ink),0 -6px 0 0 var(--ink);
}
.nav-panel{
  display:none;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,22,38,.98),rgba(7,11,20,.99));
  padding-block:10px 22px;
}
.site-header[data-open] .nav-panel{display:block;animation:panelIn .28s ease both}
@keyframes panelIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nav-panel__list{display:grid;gap:0}
.nav-panel__item{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line)}
.nav-panel__item:last-child{border-bottom:0}
.nav-panel__index{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--cyan);
  flex:0 0 auto;
  min-width:24px;
}
.nav-panel__link{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  min-height:52px;
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--ink);
}
.nav-panel__link[aria-current="page"]{color:var(--cyan)}
.nav-panel__cta{display:flex;width:100%;margin-top:18px}

.scroll-progress{
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  overflow:hidden;
  background:transparent;
}
.scroll-progress span{
  display:block;
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--blue),var(--cyan) 60%,var(--orange));
}

/* ============ 章节与面板 ============ */
.section{padding-block:clamp(52px,8vw,120px);position:relative;z-index:1}
.section__head{margin-bottom:clamp(22px,3vw,42px)}
.section__index{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(56px,10vw,148px);
  line-height:.84;
  font-weight:800;
  letter-spacing:-.05em;
  background-image:var(--edge);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:clamp(6px,1vw,14px);
}
.section__title{font-size:clamp(26px,3.6vw,52px);max-width:22ch}
.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:12px;
}
.lede{
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.7;
  color:var(--mute);
  max-width:54ch;
}
.panel{
  position:relative;
  background:linear-gradient(158deg,var(--panel),#0A1120 78%);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(20px,2.6vw,38px);
  overflow:hidden;
}
.panel::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(38,240,208,.75),rgba(122,92,255,.7),transparent);
  opacity:.9;
}
.panel--raised{box-shadow:0 30px 70px -50px rgba(31,107,255,.85)}
.panel--offset{margin-left:clamp(0px,4vw,64px)}
.panel + .panel{margin-top:clamp(14px,2vw,24px)}

/* ============ 栅格 ============ */
.grid{display:grid;gap:clamp(16px,2vw,28px)}
.grid--split{grid-template-columns:minmax(0,1fr)}
.grid--cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media (min-width:900px){
  .grid--split{grid-template-columns:minmax(0,2.05fr) minmax(0,1fr)}
  .grid--split.grid--reverse{grid-template-columns:minmax(0,1fr) minmax(0,2.05fr)}
}

/* ============ 焦点数字 ============ */
.stat{display:flex;flex-direction:column;gap:6px}
.stat__value{
  font-family:var(--font-mono);
  font-size:clamp(44px,8vw,118px);
  line-height:.92;
  font-weight:700;
  letter-spacing:-.04em;
  color:var(--orange);
}
.stat__value--cyan{color:var(--cyan)}
.stat__value--orange{color:var(--orange)}
.stat__unit{
  font-family:var(--font-sans);
  font-size:.3em;
  font-weight:700;
  letter-spacing:.04em;
  margin-left:.18em;
  color:var(--mute);
}
.stat__label{
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mute);
}
@keyframes pulseNum{
  0%{filter:brightness(1)}
  45%{filter:brightness(1.75)}
  100%{filter:brightness(1)}
}
.stat__value.is-pulsing{animation:pulseNum .4s ease-out 1}

/* ============ 标签与状态 ============ */
.tag{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(31,107,255,.1);
  color:var(--mute);
  font-size:12px;
  letter-spacing:.08em;
}
.status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mute);
}
.status::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:var(--mute);
}
.status--live{color:var(--green)}
.status--live::before{background:var(--green);box-shadow:0 0 0 0 rgba(55,214,122,.7);animation:livePulse 2.4s ease-out infinite}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(55,214,122,.65)}
  100%{box-shadow:0 0 0 12px rgba(55,214,122,0)}
}

/* ============ 面包屑 ============ */
.breadcrumbs{padding-top:clamp(18px,2.6vw,34px);font-size:13px;color:var(--mute)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.breadcrumbs li{display:inline-flex;align-items:center;gap:8px}
.breadcrumbs li + li::before{content:"/";color:var(--line)}
.breadcrumbs a{color:var(--mute)}
.breadcrumbs a:hover{color:var(--cyan)}
.breadcrumbs [aria-current="page"]{color:var(--ink)}

/* ============ 标签页 ============ */
.tabs{display:block}
.tabs__list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(14,22,38,.7);
  margin-bottom:clamp(16px,2vw,26px);
}
.tabs__tab{
  min-height:44px;
  padding:0 20px;
  border-radius:999px;
  color:var(--mute);
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  transition:color .2s ease,background .2s ease;
}
.tabs__tab:hover{color:var(--ink)}
.tabs__tab[aria-selected="true"]{
  color:#04101A;
  background-image:var(--edge);
  box-shadow:0 10px 24px -16px rgba(31,107,255,.95);
}
.tabs__panel{animation:panelIn .3s ease both}
.tabs__panel[hidden]{display:none}

/* ============ 步骤路径 ============ */
.steps{display:grid;gap:clamp(14px,2vw,20px);counter-reset:step}
.steps__item{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:16px;
  padding:clamp(16px,2vw,22px);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:linear-gradient(150deg,rgba(14,22,38,.95),rgba(10,17,32,.95));
}
.steps__item + .steps__item::before{
  content:"";
  position:absolute;
  left:37px;
  top:calc(-1 * clamp(14px,2vw,20px) - 2px);
  width:2px;
  height:clamp(14px,2vw,20px);
  background:linear-gradient(180deg,var(--cyan),transparent);
}
.steps__dot{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(38,240,208,.4);
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  color:var(--cyan);
  background:rgba(38,240,208,.08);
}
.steps__body{display:block}
.steps__title{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
.steps__text{font-size:15px;color:var(--mute);line-height:1.7}

/* ============ 图片容器 ============ */
.media{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(70% 80% at 20% 10%,rgba(31,107,255,.35),transparent 70%),
    radial-gradient(60% 70% at 85% 90%,rgba(38,240,208,.22),transparent 72%),
    linear-gradient(140deg,#0E1626,#070B14);
}
.media img{width:100%;height:100%;object-fit:cover}
.media--wide{aspect-ratio:21 / 9}
.media--square{aspect-ratio:1 / 1}
.media--tall{aspect-ratio:3 / 4}

/* ============ 显现 ============ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ============ 页脚 ============ */
.site-footer{
  position:relative;
  z-index:1;
  margin-top:clamp(40px,6vw,90px);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,22,38,.75),rgba(7,11,20,.98));
}
.site-footer__inner{padding-block:clamp(38px,5vw,72px) clamp(18px,2vw,26px)}
.site-footer__grid{
  display:grid;
  gap:clamp(24px,3vw,40px);
  grid-template-columns:minmax(0,1fr);
}
.footer-col{display:block}
.footer-col--brand{max-width:34ch}
.footer-brand{
  font-size:clamp(22px,2.4vw,30px);
  font-weight:900;
  letter-spacing:.04em;
  font-stretch:95%;
  background-image:var(--edge);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.footer-claim{margin-top:10px;font-size:15px;color:var(--mute)}
.footer-region{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--cyan);
}
.footer-col__title{
  font-size:13px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:14px;
}
.footer-list{display:grid;gap:10px;font-size:15px}
.footer-list a{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  color:var(--mute);
  transition:color .2s ease,transform .2s ease;
}
.footer-list a:hover{color:var(--cyan);transform:translateX(3px)}
.footer-list--plain li{
  display:grid;
  gap:2px;
  color:var(--mute);
  font-size:15px;
  line-height:1.6;
}
.footer-key{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan);
}
.footer-note{margin-top:14px;font-size:13px;line-height:1.7;color:var(--mute);max-width:44ch}
.footer-bottom{
  margin-top:clamp(28px,3vw,46px);
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  align-items:center;
  justify-content:space-between;
}
.footer-legal{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--mute);
}

/* ============ 响应式 ============ */
@media (max-width:1079px){
  .nav,.header-cta{display:none}
  .nav-toggle{display:inline-flex}
  .site-header__inner{justify-content:space-between}
}
@media (min-width:760px){
  .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1080px){
  .nav-panel{display:none !important}
  .site-footer__grid{grid-template-columns:1.25fr .85fr 1.2fr .85fr}
}
@media (max-width:560px){
  .section__index{font-size:clamp(56px,17vw,84px)}
  .brand__sub{display:none}
  .tabs__list{border-radius:20px}
  .tabs__tab{padding:0 14px;font-size:13px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:6px}
}

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