@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

:root{
  --ink:#1a1a2e;
  --ink-2:#12121f;
  --ink-3:#08080f;
  --red:#ff0000;
  --pink:#ff006e;
  --cyan:#00f0ff;
  --text:#d8dbf4;
  --dim:#a5a8cf;
  --hair:rgba(255,0,110,.34);
  --radius:18px;
  --shadow:0 20px 44px rgba(0,0,0,.55);
  --font:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
}

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

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

body{
  margin:0;
  padding:0 0 112px;
  background:
    radial-gradient(1200px 620px at 78% -12%, rgba(255,0,110,.20), transparent 62%),
    radial-gradient(900px 520px at 4% 6%, rgba(255,0,0,.16), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 46%, var(--ink-3) 100%);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:40;
  pointer-events:none;
  opacity:.62;
  mix-blend-mode:multiply;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:39;
  pointer-events:none;
  opacity:.15;
  background-image:
    linear-gradient(rgba(0,240,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,110,.14) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 18%, #000, transparent 76%);
  mask-image:radial-gradient(circle at 50% 18%, #000, transparent 76%);
}

main{
  max-width:1180px;
  margin:0 auto;
  padding:2rem 1.25rem 1rem;
}

.wrap{
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
  gap:2.25rem;
  align-items:start;
}

/* ---------- 左侧栏 ---------- */
.rail{
  position:sticky;
  top:1.5rem;
  padding:1.1rem 1rem 1.2rem;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(28,28,52,.92), rgba(14,14,26,.94));
  box-shadow:var(--shadow);
  max-height:calc(100vh - 150px);
  overflow:auto;
}

.rail-title{
  margin:0;
  font-size:18px;
  letter-spacing:.14em;
  color:#fff;
  text-shadow:0 0 12px rgba(255,0,110,.7);
}

.rail-rule{
  border:0;
  height:2px;
  margin:.7rem 0 .9rem;
  background:linear-gradient(90deg, var(--pink), var(--red), transparent);
  box-shadow:0 0 12px rgba(255,0,110,.6);
}

.rail-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.12rem;
}

.rail-list a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:.25rem .55rem;
  font-size:16px;
  color:var(--dim);
  text-decoration:none;
  border-left:2px solid transparent;
  border-radius:8px;
  transition:color .2s ease, background .2s ease, border-color .2s ease;
}

.rail-list a:hover,
.rail-list a:focus-visible,
.rail-list a.is-cur{
  color:#fff;
  border-left-color:var(--pink);
  background:rgba(255,0,110,.1);
  text-shadow:0 0 10px rgba(255,0,110,.7);
}

/* ---------- 主内容 ---------- */
.stage{min-width:0}

.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.6rem;
  align-items:center;
  min-height:45vh;
  padding:1.2rem 0 1.8rem;
  text-align:center;
}

.hero:has(.hero-fig){
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
}

.hero-fig{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--hair);
  box-shadow:0 0 0 1px rgba(0,240,255,.18), var(--shadow);
  will-change:transform;
}

.hero-img{
  display:block;
  width:100%;
  height:auto;
  max-height:42vh;
  object-fit:cover;
}

.hero-badge{
  display:inline-block;
  margin:0 0 .8rem;
  padding:.3rem .9rem;
  font-size:16px;
  letter-spacing:.2em;
  color:var(--cyan);
  border:1px solid rgba(0,240,255,.5);
  border-radius:999px;
  background:rgba(0,240,255,.08);
  box-shadow:0 0 18px rgba(0,240,255,.32);
  animation:floaty 4.6s ease-in-out infinite;
}

.hero-h1{
  margin:0;
  font-size:clamp(2rem, 5.4vw, 3.4rem);
  line-height:1.14;
  letter-spacing:.02em;
  color:#fff;
  text-shadow:0 0 14px rgba(255,0,110,.8), 0 0 44px rgba(255,0,0,.4);
  animation:glitch 7s infinite steps(1);
}

@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

@keyframes glitch{
  0%,91%,100%{transform:translate(0,0) skewX(0);text-shadow:0 0 14px rgba(255,0,110,.8), 0 0 44px rgba(255,0,0,.4)}
  92%{transform:translate(-2px,1px) skewX(-3deg);text-shadow:-2px 0 var(--cyan), 2px 0 var(--pink)}
  94%{transform:translate(2px,-1px) skewX(2deg);text-shadow:2px 0 var(--cyan), -2px 0 var(--red)}
  97%{transform:translate(-1px,0) skewX(0)}
}

/* ---------- 正文排版 ---------- */
.prose{max-width:72ch}

.prose > div{
  padding:2rem 0;
  border-top:1px dashed rgba(255,0,110,.22);
  scroll-margin-top:1.5rem;
}

.prose > div:first-child{border-top:0;padding-top:.5rem}

.prose h2{
  margin:0 0 .55rem;
  font-size:clamp(1.45rem, 3.6vw, 2.05rem);
  line-height:1.24;
  letter-spacing:.01em;
  color:#fff;
  text-shadow:0 0 16px rgba(255,0,110,.55), 0 0 40px rgba(255,0,0,.25);
}

.prose h3{
  margin:1.4rem 0 .5rem;
  font-size:1.16rem;
  line-height:1.35;
  color:#ffe7f2;
  text-shadow:0 0 10px rgba(255,0,110,.45);
}

.prose hr{
  border:0;
  height:2px;
  margin:.9rem 0 1.3rem;
  background:linear-gradient(90deg, var(--pink), rgba(255,0,0,.55), transparent);
  box-shadow:0 0 14px rgba(255,0,110,.5);
}

.prose p{
  margin:0 0 1rem;
  color:var(--text);
  line-height:1.8;
}

.prose ul,
.prose ol{
  margin:0 0 1rem;
  padding-left:1.25rem;
  line-height:1.8;
}

.prose li{margin:.25rem 0}

.prose a{
  color:var(--cyan);
  text-decoration:underline;
  text-decoration-color:rgba(0,240,255,.45);
  text-underline-offset:3px;
}

.prose a:hover{color:#fff}

.prose strong{color:#fff}

.prose blockquote{
  margin:1.1rem 0;
  padding:.8rem 1rem;
  border-left:3px solid var(--pink);
  border-radius:0 var(--radius) var(--radius) 0;
  background:rgba(255,0,110,.08);
  box-shadow:inset 0 0 30px rgba(255,0,110,.08);
}

.prose blockquote p:last-child{margin-bottom:0}

.prose img{
  max-width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid var(--hair);
}

.prose figure{margin:1.2rem 0}

.prose table{
  width:100%;
  border-collapse:collapse;
  margin:1rem 0;
  font-size:16px;
}

.prose th,
.prose td{
  padding:.55rem .6rem;
  border:1px solid rgba(255,0,110,.22);
  text-align:left;
}

.prose th{background:rgba(255,0,110,.1);color:#fff}

/* ---------- 滚动揭示 / 视差 ---------- */
.js .prose > div{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}

.js .prose > div.is-in{
  opacity:1;
  transform:none;
}

/* ---------- 页脚 ---------- */
.foot{
  margin-top:3rem;
  padding:2.5rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(20,20,36,.72), rgba(8,8,16,.96));
  box-shadow:inset 0 1px 0 rgba(255,0,110,.18);
}

.foot-belt{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.5rem;
  align-items:start;
}

.foot-addr{
  font-style:normal;
  font-size:16px;
  letter-spacing:.08em;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(0,240,255,.45);
  word-break:break-all;
}

.foot-links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.1rem;
}

.foot-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.25rem .1rem;
  font-size:16px;
  color:var(--dim);
  text-decoration:none;
}

.foot-links a:hover,
.foot-links a:focus-visible{
  color:#fff;
  text-shadow:0 0 10px var(--pink);
}

.foot-huge{
  max-width:1180px;
  margin:2rem auto .5rem;
  overflow:hidden;
  white-space:nowrap;
  font-size:clamp(2rem, 9vw, 6.2rem);
  line-height:.98;
  font-weight:700;
  letter-spacing:.03em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,0,110,.75);
  text-shadow:0 0 34px rgba(255,0,0,.3);
}

.foot-copy{
  max-width:1180px;
  margin:0 auto;
  font-size:16px;
  color:var(--dim);
}

/* ---------- 回到顶部 ---------- */
.to-top{
  position:fixed;
  right:1rem;
  bottom:calc(82px + env(safe-area-inset-bottom));
  z-index:55;
  min-height:44px;
  padding:.55rem 1rem;
  font-family:inherit;
  font-size:16px;
  color:#fff;
  cursor:pointer;
  border:1px solid var(--hair);
  border-radius:999px;
  background:rgba(20,20,38,.94);
  box-shadow:0 0 18px rgba(255,0,110,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

.to-top.is-on{opacity:1;pointer-events:auto}

/* ---------- 底部固定导航 ---------- */
.dock{
  position:fixed;
  inset:auto 0 0 0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:.3rem;
  padding:.45rem clamp(.4rem, 2vw, 1.4rem);
  padding-bottom:calc(.45rem + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(18,18,32,.88), rgba(8,8,16,.98));
  border-top:1px solid var(--hair);
  box-shadow:0 -14px 40px rgba(255,0,110,.16);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}

.dock::-webkit-scrollbar{display:none}

.dock-menu{
  display:flex;
  align-items:center;
  gap:.1rem;
  flex:1 1 0;
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
}

.dock-menu--l{justify-content:flex-end}
.dock-menu--r{justify-content:flex-start}

.dock-menu a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.45rem .6rem;
  font-size:16px;
  white-space:nowrap;
  color:#cfd3f5;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:10px;
  transition:color .2s ease, background .2s ease, border-color .2s ease;
}

.dock-menu a:hover,
.dock-menu a:focus-visible,
.dock-menu a.is-cur{
  color:#fff;
  border-color:var(--hair);
  background:rgba(255,0,110,.14);
  text-shadow:0 0 10px var(--pink);
}

.dock-brand{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.4rem .9rem;
  white-space:nowrap;
  font-weight:700;
  letter-spacing:.12em;
  color:#fff;
  text-decoration:none;
  border:1px solid var(--hair);
  border-radius:999px;
  box-shadow:0 0 18px rgba(255,0,110,.35);
  text-shadow:0 0 12px rgba(255,0,110,.8);
}

.dock-cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.45rem 1rem;
  font-size:16px;
  white-space:nowrap;
  color:#16000a;
  font-weight:700;
  text-decoration:none;
  border-radius:999px;
  background:linear-gradient(100deg, var(--red), var(--pink));
  box-shadow:0 0 22px rgba(255,0,110,.55);
}

.dock-cta:hover{filter:hue-rotate(-12deg) brightness(1.1)}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .wrap{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .rail{position:static;max-height:none;order:-1}
  .stage{order:0}
  .hero:has(.hero-fig){grid-template-columns:minmax(0,1fr)}
  .hero{min-height:0;padding-top:.5rem}
  .hero-img{max-height:36vh}
}

@media (max-width:900px){
  .dock-menu{flex:0 0 auto}
  .dock-brand{order:-1}
  .foot-belt{grid-template-columns:repeat(2, minmax(0,1fr))}
  .foot-addr{grid-column:1 / -1}
}

@media (max-width:560px){
  body{padding-bottom:124px;font-size:16px}
  main{padding:1.25rem 1rem .5rem}
  .dock{gap:.15rem}
  .dock-menu a{padding:.4rem .5rem}
  .hero-h1{font-size:clamp(1.85rem, 8vw, 2.4rem)}
  .foot-belt{grid-template-columns:minmax(0,1fr)}
  .foot-huge{font-size:clamp(1.9rem, 13vw, 3rem)}
  .to-top{right:.75rem}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero-badge,.hero-h1{animation:none}
  .js .prose > div{opacity:1;transform:none;transition:none}
  .to-top{transition:none}
}

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