@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap');

:root{
  --neon:#87ff71;
  --cyan:#01cdfe;
  --pink:#ff7ad9;
  --ink:#192617;
  --bg:#0a130e;
  --glass:rgba(20,34,25,.66);
  --line:rgba(135,255,113,.22);
  --text:#dff3e2;
  --muted:#a3c2ae;
  --rail:288px;
}

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

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

body{
  margin:0;
  font-family:"Exo 2","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px;
  line-height:1.75;
  color:var(--text);
  background:
    radial-gradient(720px 430px at 84% -6%,rgba(255,122,217,.20),transparent 64%),
    radial-gradient(640px 400px at 6% 2%,rgba(1,205,254,.18),transparent 62%),
    radial-gradient(560px 380px at 50% 100%,rgba(135,255,113,.12),transparent 70%),
    linear-gradient(180deg,#0b1710 0%,#0a130e 46%,#070f0b 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:70;
  pointer-events:none;
  opacity:.32;
  mix-blend-mode:overlay;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px);
}

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

a{color:var(--cyan)}
a:focus-visible,.btn:focus-visible,.rail-link:focus-visible{outline:2px solid var(--neon);outline-offset:3px}

::selection{background:rgba(135,255,113,.35);color:#04120a}

.shell{max-width:1180px;margin:0 auto}

/* ---------- 左侧竖排导航（移动端先落成顶栏） ---------- */
.rail{
  position:sticky;
  top:0;
  z-index:50;
  padding:0 0 10px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,20,14,.97),rgba(10,19,14,.86));
  backdrop-filter:blur(12px);
}

.ticker{
  margin:0 0 10px;
  padding:7px 16px;
  font-size:14px;
  line-height:1.5;
  letter-spacing:.18em;
  font-weight:600;
  color:#07130c;
  background:linear-gradient(90deg,var(--neon),var(--cyan) 58%,var(--pink));
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  min-height:44px;
  text-decoration:none;
  color:var(--text);
}

.brand-mark{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:4px;
  font-weight:700;
  font-size:17px;
  color:#07130c;
  background:linear-gradient(135deg,var(--neon),var(--cyan));
  box-shadow:0 0 16px rgba(135,255,113,.45);
}

.brand-name{
  font-family:Orbitron,"PingFang SC",sans-serif;
  font-size:16px;
  letter-spacing:.03em;
  line-height:1.25;
}

.rail-links{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:8px 16px 2px;
  scrollbar-width:none;
}
.rail-links::-webkit-scrollbar{display:none}

.rail-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 14px;
  white-space:nowrap;
  font-size:16px;
  text-decoration:none;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:4px;
  background:rgba(135,255,113,.06);
  transition:background .2s,color .2s,border-color .2s;
}

.rail-link:hover{background:rgba(1,205,254,.16);border-color:var(--cyan);color:#eafcff}

.rail-idx{
  font-family:Orbitron,sans-serif;
  font-size:13px;
  color:var(--cyan);
  letter-spacing:.06em;
}

.rail-note{
  margin:8px 16px 0;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}

/* ---------- 首屏 ---------- */
main{padding:0 16px 24px}

.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:45vh;
  padding:36px 14px 62px;
  text-align:center;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:62%;
  pointer-events:none;
  opacity:.5;
  background:
    repeating-linear-gradient(90deg,rgba(135,255,113,.18) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(0deg,rgba(1,205,254,.16) 0 1px,transparent 1px 36px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 72%);
  mask-image:linear-gradient(180deg,transparent,#000 72%);
}

.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px}

.eyebrow{
  margin:0;
  font-size:16px;
  letter-spacing:.26em;
  color:var(--cyan);
  text-shadow:0 0 14px rgba(1,205,254,.65);
}

.hero h1{
  margin:0;
  font-family:Orbitron,"PingFang SC",sans-serif;
  font-size:clamp(28px,6.4vw,50px);
  line-height:1.24;
  letter-spacing:.015em;
  color:#f2fff5;
  text-shadow:0 0 18px rgba(135,255,113,.5),0 0 44px rgba(1,205,254,.32);
}

.lead{
  margin:0;
  max-width:56ch;
  font-size:17px;
  line-height:1.75;
  color:var(--muted);
}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:4px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 22px;
  border-radius:4px;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  color:#07130c;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(120deg,var(--neon),var(--cyan));
  box-shadow:0 0 22px rgba(135,255,113,.32);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

.btn:hover{transform:translateY(-2px);box-shadow:0 0 32px rgba(1,205,254,.5);filter:hue-rotate(-14deg)}

.btn.ghost{
  color:var(--text);
  background:rgba(135,255,113,.08);
  border-color:var(--line);
  box-shadow:none;
}
.btn.ghost:hover{background:rgba(1,205,254,.14);border-color:var(--cyan)}

.hero-fig{
  position:relative;
  z-index:2;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.hero-fig svg{filter:drop-shadow(0 0 18px rgba(1,205,254,.55))}

.hero-fig figcaption{font-size:14px;letter-spacing:.18em;color:var(--muted)}

.hero-slice{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:54px;
  opacity:.9;
  background:linear-gradient(90deg,var(--neon),var(--cyan) 52%,var(--pink));
  clip-path:polygon(0 62%,100% 6%,100% 100%,0 100%);
}

/* ---------- 正文与右侧栏 ---------- */
.stage{display:grid;gap:28px;padding-top:30px}

.paper{
  counter-reset:sec;
  padding:4px 18px 22px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--glass);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  min-width:0;
}

.paper > article{
  counter-increment:sec;
  position:relative;
  padding:26px 0 6px;
  border-top:1px dashed rgba(135,255,113,.18);
  scroll-margin-top:132px;
}

.paper > article:first-child{border-top:0;padding-top:14px}

.paper > article::before{
  content:"第 " counter(sec) " 部分";
  display:block;
  margin-bottom:8px;
  font-size:13px;
  letter-spacing:.24em;
  color:var(--cyan);
}

.paper h2{
  margin:.35em 0 .5em;
  font-family:Orbitron,"PingFang SC",sans-serif;
  font-size:clamp(21px,3.6vw,27px);
  line-height:1.36;
  color:#eafff0;
  text-shadow:0 0 16px rgba(135,255,113,.25);
}

.paper h3{
  margin:1.1em 0 .4em;
  font-size:19px;
  line-height:1.45;
  color:#d8ffe2;
}

.paper p{margin:.7em 0}

.paper ul,.paper ol{margin:.7em 0;padding-left:1.3em}
.paper li{margin:.35em 0}

.paper a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.paper a:hover{color:var(--neon)}

.paper blockquote{
  margin:1em 0;
  padding:12px 16px;
  border-left:3px solid var(--neon);
  border-radius:0 4px 4px 0;
  background:rgba(135,255,113,.08);
  color:#e4f8e8;
}

.paper figure{margin:1em 0}
.paper figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.paper strong{color:#f0fff2}
.paper code{
  font-family:"Exo 2",ui-monospace,monospace;
  font-size:.95em;
  padding:.1em .35em;
  border-radius:4px;
  background:rgba(1,205,254,.14);
}
.paper table{width:100%;border-collapse:collapse;margin:1em 0;font-size:16px}
.paper th,.paper td{border:1px solid var(--line);padding:9px 11px;text-align:left}
.paper th{background:rgba(135,255,113,.1)}

.side{display:flex;flex-direction:column;gap:16px;min-width:0}

.side-card{
  padding:16px 16px 18px;
  border:1px solid var(--line);
  border-left:3px solid var(--neon);
  border-radius:4px;
  background:var(--glass);
  backdrop-filter:blur(10px);
}

.side-card h2{
  margin:0 0 6px;
  font-family:Orbitron,"PingFang SC",sans-serif;
  font-size:19px;
  line-height:1.4;
  color:#eafff0;
}

.subtitle{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}

.side-links{display:flex;flex-direction:column;gap:2px;margin-top:10px}

.side-links a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 10px;
  font-size:16px;
  text-decoration:none;
  color:var(--text);
  border:1px solid transparent;
  border-radius:4px;
  transition:background .2s,color .2s,border-color .2s,padding-left .2s;
}
.side-links a:hover{
  padding-left:14px;
  color:var(--cyan);
  border-color:var(--line);
  background:rgba(1,205,254,.11);
}

.tip-text{margin:10px 0 0;font-size:16px;line-height:1.7;color:#cfe8d6}

.shots{display:grid;gap:10px;margin-top:12px}
.shots .shot{width:100%;border:1px solid var(--line);border-radius:4px}

/* ---------- 页脚 ---------- */
.foot{
  display:grid;
  gap:0;
  margin-top:44px;
  padding:0 16px 34px;
}

.foot-cta{
  padding:34px 20px;
  border:1px solid var(--line);
  border-radius:4px;
  background:
    linear-gradient(135deg,rgba(135,255,113,.16),rgba(1,205,254,.13) 56%,rgba(255,122,217,.16));
  box-shadow:0 0 40px rgba(1,205,254,.14) inset;
}

.foot-cta h2{
  margin:0 0 8px;
  font-family:Orbitron,"PingFang SC",sans-serif;
  font-size:clamp(22px,4.2vw,33px);
  line-height:1.32;
  color:#f2fff5;
  text-shadow:0 0 20px rgba(135,255,113,.35);
}

.foot-cta .btn{margin-top:18px}

.foot-map{padding:26px 0 4px;border-bottom:1px solid var(--line)}

.foot-nav dl{display:grid;gap:2px;margin:0;padding:0}

.foot-nav dt{
  font-family:Orbitron,"PingFang SC",sans-serif;
  font-size:15px;
  letter-spacing:.2em;
  color:var(--cyan);
  margin-bottom:8px;
}

.foot-nav dd{margin:0}

.foot-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:16px;
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}

.foot-nav a:hover{color:var(--neon);border-bottom-color:var(--neon)}

.foot-end{padding:16px 0 0}
.foot-end p{margin:0;font-size:16px;color:var(--muted)}

/* ---------- 滚动出现 ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
}

/* ---------- 宽屏 ---------- */
@media (min-width:960px){
  body{padding-left:var(--rail)}

  .rail{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--rail);
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:0 0 20px;
    border-bottom:0;
    border-right:1px solid var(--line);
    overflow-y:auto;
  }

  .ticker{margin:0;padding:9px 18px;font-size:14px}

  .brand{padding:18px 18px 0}

  .rail-links{flex-direction:column;overflow:visible;padding:0 18px;gap:2px}

  .rail-link{
    justify-content:flex-start;
    border:0;
    border-left:2px solid transparent;
    border-radius:0;
    padding:0 12px;
    min-height:46px;
    background:none;
    transition:border-color .2s,background .2s,color .2s,padding-left .2s;
  }

  .rail-link:hover{
    padding-left:18px;
    border-left-color:var(--neon);
    background:linear-gradient(90deg,rgba(135,255,113,.14),transparent);
    color:#f2fff5;
  }

  .rail-note{margin:auto 18px 0;padding-top:16px;border-top:1px solid rgba(135,255,113,.14)}

  main{padding:0 0 28px}

  .hero{padding:44px 40px 70px}

  .hero-copy{align-items:center}

  .hero-fig{position:absolute;right:6%;top:50%;transform:translateY(-50%);z-index:2}

  .stage{grid-template-columns:minmax(0,1fr) 312px;gap:34px;align-items:start;padding-top:36px}

  .paper{padding:8px 30px 26px}

  .side{position:sticky;top:24px}

  .foot{padding-bottom:46px}

  .foot-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 28px;padding:40px 34px}
  .foot-cta h2{grid-column:1}
  .foot-cta .subtitle{grid-column:1}
  .foot-cta .btn{grid-column:2;grid-row:1/3;align-self:center;margin-top:0}

  .foot-nav dl{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 18px}
  .foot-nav dt{grid-column:1/-1}
}

@media (min-width:1200px){
  .hero-fig svg{width:120px;height:120px}
}

button[aria-expanded]{min-width:44px;min-height:44px}