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

:root{
  --ink:#26171f;
  --mag:#ff0080;
  --fux:#ff00ff;
  --deep:#0d0710;
  --deep2:#1a0d17;
  --text:#faeaf5;
  --muted:#c8a3bd;
  --r:4px;
  --line:rgba(255,0,128,.42);
  --pad:clamp(1rem,5vw,3rem);
  --display:Righteous,"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;
  background:var(--deep);
  color:var(--text);
  font-family:Poppins,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px;
  line-height:1.72;
  letter-spacing:.01em;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-25%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(42% 38% at 14% 18%,rgba(255,0,128,.65),transparent 62%),
    radial-gradient(38% 42% at 82% 8%,rgba(255,0,255,.52),transparent 64%),
    radial-gradient(48% 40% at 72% 82%,rgba(255,0,128,.42),transparent 66%),
    radial-gradient(34% 34% at 22% 88%,rgba(255,0,255,.34),transparent 62%);
  filter:blur(26px) saturate(1.25);
  opacity:.5;
  animation:aurora 24s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 28%,#000,transparent 86%);
  mask-image:radial-gradient(72% 62% at 50% 28%,#000,transparent 86%);
  opacity:.45;
}

@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg);filter:blur(26px) saturate(1.15) hue-rotate(0deg)}
  50%{transform:translate3d(2%,-2%,0) scale(1.12) rotate(2deg);filter:blur(30px) saturate(1.4) hue-rotate(22deg)}
  100%{transform:translate3d(-2%,2%,0) scale(1.06) rotate(-2deg);filter:blur(28px) saturate(1.3) hue-rotate(-18deg)}
}

@keyframes rise{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

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

.skip{
  position:absolute;
  left:1rem;
  top:-4rem;
  z-index:80;
  padding:.7rem 1rem;
  background:var(--mag);
  color:#fff;
  border-radius:var(--r);
  text-decoration:none;
  transition:top .25s ease;
}
.skip:focus{top:.6rem}

/* ---------- 顶部两行 ---------- */
.top{
  position:sticky;
  top:0;
  z-index:50;
  background:linear-gradient(180deg,rgba(13,7,16,.95),rgba(13,7,16,.74));
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.brandrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem var(--pad) .45rem;
}

.brand{
  display:inline-flex;
  align-items:baseline;
  gap:.45rem;
  min-height:40px;
  text-decoration:none;
  color:var(--text);
  font-family:var(--display);
  font-size:clamp(1.35rem,4.4vw,1.75rem);
  letter-spacing:.02em;
}
.brand .mark{color:var(--fux)}
.brand:hover .brandtext{
  background:linear-gradient(90deg,var(--fux),var(--mag));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.tagline{
  margin:0;
  font-size:.76rem;
  letter-spacing:.2em;
  color:var(--muted);
  white-space:nowrap;
}

.menurow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.1rem var(--pad) .7rem;
}

.contact{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.45rem 1.05rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(255,0,128,.08);
  color:var(--text);
  text-decoration:none;
  font-size:.94rem;
  transition:background .25s ease,border-color .25s ease;
}
.contact:hover{background:rgba(255,0,128,.24);border-color:var(--fux)}

.burger{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  min-height:44px;
  padding:.45rem 1.1rem;
  border:0;
  border-radius:var(--r);
  background:linear-gradient(120deg,var(--mag),var(--fux));
  color:#fff;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
  transition:filter .25s ease,transform .2s ease;
}
.burger::before{
  content:"";
  width:18px;
  height:11px;
  border-top:2px solid #fff;
  border-bottom:2px solid #fff;
}
.burger:hover{filter:hue-rotate(-18deg) brightness(1.12)}
.burger:active{transform:translateY(1px)}

/* ---------- 全屏遮罩菜单 ---------- */
.ovelay{
  position:fixed;
  inset:0;
  z-index:70;
  display:flex;
  flex-direction:column;
  padding:var(--pad);
  overflow:auto;
  background:
    radial-gradient(60% 50% at 80% 0%,rgba(255,0,255,.5),transparent 65%),
    radial-gradient(55% 45% at 10% 100%,rgba(255,0,128,.45),transparent 65%),
    var(--deep2);
  transform:translateY(-102%);
  opacity:0;
  visibility:hidden;
  transition:transform .5s cubic-bezier(.2,.85,.2,1),opacity .35s ease,visibility .35s ease;
}
.ovelay.is-open{transform:none;opacity:1;visibility:visible}

.ovelay-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--line);
}
.ovelay-brand{font-family:var(--display);font-size:1.35rem;color:var(--fux)}

.closer{
  min-height:44px;
  padding:.45rem 1.1rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:transparent;
  color:var(--text);
  font:inherit;
  cursor:pointer;
}

.ovelay-list{
  list-style:none;
  margin:1.4rem 0 2rem;
  padding:0;
  display:grid;
}
.ovelay-list li{opacity:0;transform:translateY(14px)}
.ovelay.is-open .ovelay-list li{animation:rise .5s ease forwards}
.ovelay.is-open .ovelay-list li:nth-child(1){animation-delay:.05s}
.ovelay.is-open .ovelay-list li:nth-child(2){animation-delay:.1s}
.ovelay.is-open .ovelay-list li:nth-child(3){animation-delay:.15s}
.ovelay.is-open .ovelay-list li:nth-child(4){animation-delay:.2s}
.ovelay.is-open .ovelay-list li:nth-child(5){animation-delay:.25s}
.ovelay.is-open .ovelay-list li:nth-child(6){animation-delay:.3s}
.ovelay.is-open .ovelay-list li:nth-child(7){animation-delay:.35s}

.ovelay-list a{
  display:flex;
  align-items:baseline;
  gap:.9rem;
  min-height:54px;
  padding:.7rem 0;
  border-bottom:1px solid rgba(255,255,255,.09);
  color:var(--text);
  text-decoration:none;
  font-family:var(--display);
  font-size:clamp(1.25rem,4.4vw,1.9rem);
  transition:color .2s ease,padding-left .25s ease;
}
.ovelay-list a:hover{color:var(--fux);padding-left:.5rem}
.ovelay-list .num{
  font-family:var(--display);
  font-size:.78rem;
  letter-spacing:.12em;
  color:var(--mag);
}

/* ---------- 主体 ---------- */
main{position:relative;z-index:1}
.top,.foot{position:relative;z-index:1}
.top{z-index:50}

.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:45vh;
  max-width:80rem;
  margin-inline:auto;
  padding:clamp(1.5rem,5vw,3rem) var(--pad) clamp(.9rem,3vw,1.8rem);
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(1.2rem,4vw,3rem);
  align-items:end;
}

h1{
  margin:0;
  font-family:var(--display);
  font-size:clamp(2.3rem,8.4vw,5.4rem);
  line-height:1.04;
  letter-spacing:-.01em;
  background:linear-gradient(100deg,#ffffff 8%,var(--fux) 48%,var(--mag) 86%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lede{
  margin:1rem 0 0;
  max-width:46ch;
  color:var(--muted);
  font-size:1.02rem;
}

.prism{
  position:relative;
  padding:1.05rem 1.15rem 1.2rem;
  border:1px solid var(--line);
  border-bottom:3px solid var(--mag);
  border-radius:var(--r);
  background:linear-gradient(160deg,rgba(255,0,255,.16),rgba(255,0,128,.07) 48%,rgba(38,23,31,.55));
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.prism h2{margin:.05rem 0 .75rem;font-size:1.06rem;line-height:1.4}
.prism ol{list-style:none;margin:0;padding:0;display:grid;counter-reset:navi}
.prism li a{
  counter-increment:navi;
  display:flex;
  align-items:baseline;
  gap:.65rem;
  min-height:40px;
  padding:.34rem 0;
  border-top:1px dashed rgba(255,255,255,.12);
  color:var(--text);
  text-decoration:none;
  font-size:.94rem;
  transition:color .2s ease;
}
.prism li:first-child a{border-top:0}
.prism li a::before{
  content:counter(navi,decimal-leading-zero);
  font-family:var(--display);
  font-size:.72rem;
  color:var(--mag);
}
.prism li a:hover{color:var(--fux)}

.band{
  margin:clamp(1.1rem,4vw,2.2rem) 0 0;
  height:clamp(26px,6vw,52px);
  border-radius:var(--r);
  background:linear-gradient(90deg,var(--mag),var(--fux) 42%,#7a1b4d 72%,rgba(255,0,128,.15));
  -webkit-clip-path:polygon(0 0,100% 0,96% 100%,0 100%);
  clip-path:polygon(0 0,100% 0,96% 100%,0 100%);
  opacity:.92;
  animation:fadeUp .7s ease both;
}

small{
  display:block;
  margin-bottom:.35rem;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.28em;
  color:var(--fux);
}

/* ---------- 正文区块（来自 page.content） ---------- */
main > div[id]{
  position:relative;
  max-width:80rem;
  margin-inline:auto;
  padding:clamp(2rem,6vw,4rem) var(--pad);
  border-top:1px solid rgba(255,255,255,.09);
  scroll-margin-top:148px;
  animation:fadeUp .6s ease both;
}
main > div[id]::before{
  content:"";
  position:absolute;
  top:-1px;
  left:var(--pad);
  width:64px;
  height:2px;
  background:linear-gradient(90deg,var(--mag),var(--fux));
}
main > div[id]:nth-of-type(odd){background:linear-gradient(180deg,rgba(255,0,255,.05),transparent 70%)}

main > div[id] h2{
  margin:.1rem 0 1rem;
  font-size:clamp(1.45rem,3.6vw,2.25rem);
  line-height:1.26;
  color:#fff;
}
main > div[id] h3{
  margin:1.6rem 0 .45rem;
  font-size:1.14rem;
  line-height:1.4;
  color:var(--fux);
}
main > div[id] p{margin:0 0 1rem;max-width:70ch;color:#eedbe8}
main > div[id] ul,
main > div[id] ol{max-width:70ch;padding-left:1.25rem}
main > div[id] li{margin:.35rem 0}
main > div[id] a{color:var(--fux);text-underline-offset:3px}
main > div[id] strong{color:#fff}
main > div[id] figure{margin:1.4rem 0}
main > div[id] blockquote{
  margin:1.4rem 0;
  padding:.9rem 1.1rem;
  border-left:3px solid var(--mag);
  border-radius:var(--r);
  background:rgba(255,0,128,.08);
  color:#f6e2ee;
}
main img{max-width:100%;height:auto;display:block;border-radius:var(--r)}
main figure figcaption{font-size:.84rem;color:var(--muted);margin-top:.4rem}

/* ---------- 页脚 ---------- */
.foot{
  margin-top:clamp(2rem,6vw,4rem);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(38,23,31,.7),rgba(13,7,16,.96));
  padding:clamp(1.6rem,4vw,2.6rem) var(--pad) 1.2rem;
}

.foot-mark{
  margin:0 0 1.3rem;
  font-family:var(--display);
  font-size:clamp(2.5rem,13vw,6.6rem);
  line-height:.92;
  letter-spacing:-.02em;
  background:linear-gradient(92deg,var(--fux),var(--mag) 55%,#7a1b4d);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.foot-grid{
  display:grid;
  grid-template-columns:1.35fr 1.25fr 1fr .85fr;
  gap:clamp(1rem,3vw,2rem);
  padding-bottom:1.3rem;
}

.foot-col--addr address{
  font-style:normal;
  display:grid;
  gap:.25rem;
  align-content:start;
}
.addr-brand{font-weight:600}
.addr-host{color:var(--muted);font-size:.88rem;word-break:break-all}

.foot-map dl{
  margin:0;
  display:grid;
  grid-template-columns:auto auto;
  gap:.05rem .7rem;
  align-items:center;
  justify-content:start;
}
.foot-map dt{margin:0;font-size:.94rem}
.foot-map dt a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:var(--text);
  text-decoration:none;
}
.foot-map dt a:hover{color:var(--fux)}
.foot-map dd{margin:0}
.foot-map dd a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding-left:.2rem;
  color:var(--mag);
  text-decoration:none;
}
.foot-map dd a:hover{color:var(--fux)}

.foot-list{list-style:none;margin:0;padding:0;display:grid}
.foot-list a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:var(--muted);
  text-decoration:none;
  font-size:.94rem;
}
.foot-list a:hover{color:var(--fux)}

.totop{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.4rem .9rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--text);
  text-decoration:none;
  font-size:.9rem;
  background:rgba(255,0,128,.1);
}
.totop:hover{background:rgba(255,0,128,.26)}

.foot-base{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.1);
}
.copy{margin:0;font-size:.85rem;color:var(--muted)}
.foot-legal{list-style:none;display:flex;gap:1.2rem;margin:0;padding:0}
.foot-legal a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:var(--muted);
  text-decoration:none;
  font-size:.85rem;
}
.foot-legal a:hover{color:var(--fux)}

body.locked{overflow:hidden}

/* ---------- 断点 ---------- */
@media (max-width:900px){
  .hero{min-height:42vh}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .prism{order:2}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-col--addr{grid-column:1/-1}
}

@media (max-width:600px){
  body{font-size:16px}
  .brandrow{flex-wrap:wrap;row-gap:.2rem}
  .tagline{font-size:.7rem;letter-spacing:.14em}
  h1{font-size:clamp(1.95rem,10vw,3rem)}
  .foot-grid{grid-template-columns:1fr}
  .foot-mark{font-size:clamp(2.3rem,16vw,4rem)}
  .foot-base{flex-direction:column;align-items:flex-start;gap:.4rem}
  main > div[id]{scroll-margin-top:170px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .ovelay-list li{opacity:1;transform:none}
}

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