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

:root{
  --pink:#ff0080;
  --mag:#ff00ff;
  --ink:#26171f;
  --ink-0:#150c12;
  --ink-1:#1c1119;
  --fg:#f8ecf4;
  --dim:#c6a6bb;
  --line:rgba(255,0,128,.30);
  --line-soft:rgba(255,255,255,.13);
  --r:18px;
  --dock:78px;
  --font-d:'Russo One','Chakra Petch','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --font-b:'Chakra Petch','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%;
  background:var(--ink-0);
}

body{
  margin:0;
  font-family:var(--font-b);
  font-size:17px;
  line-height:1.78;
  color:var(--fg);
  background:var(--ink-0);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

a{color:var(--pink)}

::selection{background:rgba(255,0,128,.45);color:#fff}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 极光底层 ---------- */
.aurora{
  position:fixed;
  inset:-28% -22%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(34% 38% at 20% 22%, rgba(255,0,128,.62), transparent 62%),
    radial-gradient(30% 34% at 80% 16%, rgba(255,0,255,.50), transparent 64%),
    radial-gradient(44% 42% at 60% 84%, rgba(128,0,168,.55), transparent 68%),
    conic-gradient(from 205deg at 50% 52%, rgba(255,0,128,.30), rgba(38,23,31,.10), rgba(255,0,255,.34), rgba(255,0,128,.30));
  background-size:180% 180%,180% 180%,180% 180%,180% 180%;
  filter:blur(54px) saturate(128%) hue-rotate(0deg);
  opacity:.72;
  animation:auroraShift 28s ease-in-out infinite alternate;
}

@keyframes auroraShift{
  0%{background-position:0% 0%,100% 0%,50% 100%,0% 50%;filter:blur(52px) saturate(122%) hue-rotate(0deg)}
  50%{background-position:30% 20%,70% 30%,40% 60%,40% 50%;filter:blur(58px) saturate(140%) hue-rotate(18deg)}
  100%{background-position:60% 40%,20% 60%,80% 20%,0% 50%;filter:blur(50px) saturate(125%) hue-rotate(34deg)}
}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  z-index:1;
  min-height:70vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:104px 20px 72px;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--line);
}

.hero-mesh{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:24px 24px;
  opacity:.55;
  -webkit-mask-image:radial-gradient(72% 64% at 50% 44%, #000 12%, transparent 84%);
  mask-image:radial-gradient(72% 64% at 50% 44%, #000 12%, transparent 84%);
}

.hero-in{max-width:960px;margin:0 auto}

.brandline{
  margin:0 0 18px;
  font-size:16px;
  letter-spacing:.22em;
  color:var(--dim);
  text-transform:none;
}

.brandline span{
  display:inline-block;
  padding:4px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(21,12,18,.42);
}

.hero h1{
  margin:0;
  font-family:var(--font-d);
  font-weight:400;
  font-size:clamp(2.05rem, 8.2vw, 5rem);
  line-height:1.14;
  letter-spacing:.012em;
  color:#fff;
  background-image:linear-gradient(100deg,#ffe6f4 0%,var(--pink) 34%,var(--mag) 64%,#ffd7f2 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:sheen 12s linear infinite;
  text-shadow:0 0 44px rgba(255,0,128,.28);
}

@keyframes sheen{
  0%{background-position:0% 50%}
  100%{background-position:220% 50%}
}

.cue{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:48px;
  margin-top:34px;
  padding:0 22px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--fg);
  font-size:16px;
  text-decoration:none;
  background:rgba(21,12,18,.5);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}

.cue:hover,.cue:focus-visible{
  background:rgba(255,0,128,.18);
  border-color:rgba(255,0,255,.6);
  transform:translateY(-2px);
}

/* ---------- 图标 ---------- */
.ic{
  display:inline-block;
  width:16px;height:16px;
  flex:0 0 auto;
  background:linear-gradient(140deg,var(--pink),var(--mag));
}

.ic-dot,.dock-menu .ic{border-radius:50%;width:7px;height:7px}

.ic-down{
  width:9px;height:9px;
  border-radius:0;
  background:none;
  border-right:2px solid var(--pink);
  border-bottom:2px solid var(--pink);
  transform:rotate(45deg) translate(-2px,-2px);
}

.ic-bars{
  background:none;
  border-top:2px solid var(--pink);
  border-bottom:2px solid var(--mag);
  height:12px;
  border-radius:1px;
}

.ic-more{
  background:none;
  box-shadow:0 -5px 0 var(--pink), 0 0 0 var(--mag), 0 5px 0 var(--mag);
  border-radius:50%;
  height:0;
  width:0;
  margin:5px 0;
}

.ic-mail{
  background:none;
  border:2px solid var(--pink);
  border-radius:3px;
  width:15px;height:11px;
  position:relative;
}

.ic-mail::after{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;height:100%;
  border-top:2px solid var(--mag);
  clip-path:polygon(0 0,50% 62%,100% 0);
}

/* ---------- 正文区 ---------- */
.stage{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding:52px 22px 72px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 296px;
  gap:30px;
  align-items:start;
}

.prose{min-width:0}

.prose > article{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:28px 26px;
  scroll-margin-top:96px;
  background:linear-gradient(158deg, rgba(38,23,31,.88), rgba(21,12,18,.76));
  transition:border-color .3s ease, transform .3s ease;
}

.prose > article::before{
  content:"";
  position:absolute;
  top:-1px;left:26px;right:26px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,0,255,.7),transparent);
  opacity:.55;
}

.prose > article:hover{border-color:rgba(255,0,255,.48)}

.prose > article + article{margin-top:26px}

.prose h2,.prose h3{
  font-family:var(--font-d);
  font-weight:400;
  color:#fff;
  letter-spacing:.01em;
}

.prose h2{
  font-size:clamp(1.32rem, 3.2vw, 1.85rem);
  line-height:1.36;
  margin:0 0 .62em;
}

.prose h3{
  font-size:1.12rem;
  margin:1.5em 0 .5em;
}

.prose h2 > span,.prose h3 > span{
  background-image:linear-gradient(94deg,#ffd9ee,var(--pink) 46%,var(--mag));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.prose p{margin:0 0 1.05em;color:#eddfe9}

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

.prose ul,.prose ol{margin:0 0 1.05em;padding-left:1.25em}

.prose li{margin:.32em 0}

.prose li::marker{color:var(--pink)}

.prose a{color:#ff63b3;text-decoration:underline;text-underline-offset:3px}

.prose strong{color:#fff}

.prose blockquote{
  margin:1.2em 0;
  padding:.4em 0 .4em 1.1em;
  border-left:2px solid var(--mag);
  color:var(--dim);
  font-style:normal;
}

.prose hr{border:0;height:1px;background:var(--line);margin:1.6em 0}

.prose img{border-radius:14px;border:1px solid var(--line-soft);margin:1.2em 0}

/* ---------- 右侧栏 ---------- */
.rail{
  position:sticky;
  top:24px;
  display:grid;
  gap:18px;
}

.rail-box{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:20px 18px;
  background:linear-gradient(180deg, rgba(38,23,31,.86), rgba(21,12,18,.8));
}

.rail-box h2{
  margin:0 0 12px;
  font-family:var(--font-d);
  font-weight:400;
  font-size:1rem;
  letter-spacing:.1em;
}

.rail-box h2 > span{
  background-image:linear-gradient(92deg,var(--pink),var(--mag));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

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

.rail-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:0 10px;
  border-radius:10px;
  font-size:16px;
  color:var(--fg);
  text-decoration:none;
  border-left:2px solid transparent;
  transition:background .2s ease, border-color .2s ease;
}

.rail-list a:hover,.rail-list a:focus-visible{
  background:rgba(255,0,128,.15);
  border-left-color:var(--mag);
}

.rail-line{
  margin:0 0 6px;
  font-size:16px;
  color:var(--fg);
  word-break:break-word;
}

.rail-dim{color:var(--dim)}

.rail-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin-top:10px;
  padding:0 22px;
  border-radius:999px;
  background:linear-gradient(96deg,var(--pink),var(--mag));
  color:#180b13;
  font-weight:700;
  font-size:16px;
  text-decoration:none;
}

/* ---------- 页脚 ---------- */
.foot{
  position:relative;
  z-index:1;
  margin-top:20px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(21,12,18,.62), rgba(15,8,12,.92));
  padding:52px 22px calc(var(--dock) + 30px);
}

.foot-in{max-width:1080px;margin:0 auto}

.sub{
  display:flex;
  gap:10px;
  max-width:470px;
  margin:0 auto 44px;
}

.sub input{
  flex:1 1 auto;
  min-width:0;
  min-height:50px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--fg);
  font-family:inherit;
  font-size:16px;
}

.sub input:focus-visible{outline:2px solid var(--mag);outline-offset:2px}

.sub button{
  flex:0 0 auto;
  min-height:50px;
  padding:0 28px;
  border:0;
  border-radius:999px;
  background:linear-gradient(96deg,var(--pink),var(--mag));
  color:#180b13;
  font-family:inherit;
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  transition:filter .2s ease, transform .2s ease;
}

.sub button:hover{filter:brightness(1.12);transform:translateY(-1px)}

.foot-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
}

.fcol h2{
  margin:0 0 14px;
  font-family:var(--font-d);
  font-weight:400;
  font-size:1rem;
  letter-spacing:.14em;
  color:#fff;
}

.fcol h2 > span{
  display:inline-block;
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
}

.fcol dl{margin:0}

.fcol dt{
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:16px;
  color:var(--dim);
}

.fcol dt a{color:var(--fg);text-decoration:none}

.fcol dt a:hover,.fcol dt a:focus-visible{color:#ff63b3}

.fcol dd{margin:0 0 10px;font-size:16px;color:var(--dim);word-break:break-word}

.fcol dd a{color:var(--pink)}

.foot-bar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin-top:44px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
}

.copy{
  margin:0;
  font-size:16px;
  color:var(--dim);
  letter-spacing:.06em;
  text-align:center;
}

.totop{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  justify-self:start;
  padding:0 14px;
  border:1px solid var(--line-soft);
  border-radius:999px;
  font-size:16px;
  color:var(--fg);
  text-decoration:none;
}

.totop:hover{border-color:var(--pink)}

/* ---------- 底部固定条 ---------- */
.dock{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  min-height:var(--dock);
  background:rgba(18,10,15,.9);
  border-top:1px solid var(--line);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.dock-menu{position:relative;flex:0 0 auto}

.dock-menu > summary{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--line-soft);
  border-radius:999px;
  font-size:16px;
  color:var(--fg);
  cursor:pointer;
  list-style:none;
  background:rgba(255,255,255,.04);
  transition:border-color .2s ease, background .2s ease;
}

.dock-menu > summary::-webkit-details-marker{display:none}

.dock-menu > summary:hover,
.dock-menu[open] > summary{
  border-color:var(--mag);
  background:rgba(255,0,128,.16);
}

.dock-menu menu{
  position:absolute;
  bottom:calc(100% + 12px);
  left:0;
  margin:0;
  padding:8px;
  width:max-content;
  min-width:196px;
  list-style:none;
  display:grid;
  gap:2px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(20,11,16,.98);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}

.dock-menu--end menu{left:auto;right:0}

.dock-menu menu a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 12px;
  border-radius:12px;
  font-size:16px;
  color:var(--fg);
  text-decoration:none;
}

.dock-menu menu a:hover,
.dock-menu menu a:focus-visible{background:rgba(255,0,128,.18)}

.brand{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 8px;
  text-decoration:none;
  color:var(--fg);
  font-family:var(--font-d);
  font-size:16px;
  letter-spacing:.04em;
}

.brand-mark{
  width:26px;height:26px;
  flex:0 0 auto;
  border-radius:9px;
  object-fit:cover;
  background:conic-gradient(from 40deg,var(--pink),var(--mag),#7b2bff,var(--pink));
}

.brand-txt{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  background-image:linear-gradient(92deg,#fff,var(--pink) 70%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.contact{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(96deg,rgba(255,0,128,.22),rgba(255,0,255,.16));
  color:var(--fg);
  font-size:16px;
  text-decoration:none;
}

.contact:hover{border-color:var(--mag)}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .stage{grid-template-columns:minmax(0,1fr);padding-top:38px}
  .rail{position:static;grid-template-columns:minmax(0,1fr);grid-auto-flow:row}
  .foot-cols{grid-template-columns:minmax(0,1fr);gap:8px}
  .fcol{padding-bottom:14px}
  .foot-bar{grid-template-columns:1fr;justify-items:center;gap:8px}
  .totop{justify-self:center;order:2}
}

@media (max-width:520px){
  body{font-size:16px}
  .hero{padding:84px 18px 56px;min-height:68vh}
  .prose > article{padding:22px 18px}
  .prose > article::before{left:18px;right:18px}
  .dock{padding:8px 9px calc(8px + env(safe-area-inset-bottom))}
  .dock-menu > summary{padding:0 11px;font-size:15px}
  .contact{padding:0 11px;font-size:15px}
  .brand{font-size:15px}
  .dock-menu menu{min-width:184px}
  .sub{flex-wrap:wrap}
  .sub button{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aurora,.hero h1{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important}
}

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