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

:root{
  --red:#ff0000;
  --pink:#ff1493;
  --ink:#261717;
  --bg:#fff8f8;
  --line:rgba(38,23,23,.14);
  --muted:rgba(38,23,23,.68);
  --radius:10px;
}

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

html{
  background:var(--bg);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:'Be Vietnam Pro','Noto Sans',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  font-size:17px;
  line-height:1.75;
  color:var(--ink);
  background:transparent;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-25vmax;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 14%,rgba(255,0,0,.30),transparent 62%),
    radial-gradient(34% 38% at 84% 22%,rgba(255,20,147,.30),transparent 64%),
    radial-gradient(44% 46% at 66% 84%,rgba(255,20,147,.16),transparent 68%),
    radial-gradient(40% 40% at 24% 76%,rgba(255,0,0,.14),transparent 70%);
  filter:saturate(1.25) blur(26px);
  opacity:.55;
  animation:aurora 12s ease-in-out infinite alternate;
  will-change:transform;
}

@keyframes aurora{
  0%{transform:translate3d(-1.5%,-1%,0) scale(1.02)}
  50%{transform:translate3d(1.5%,1.5%,0) scale(1.09)}
  100%{transform:translate3d(-1%,2%,0) scale(1.04)}
}

/* 顶部：品牌行 + 菜单行 */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  padding:.55rem clamp(1rem,4vw,2.5rem) 0;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--line);
}

.brandrow{display:flex;align-items:center;min-height:44px}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.02em;
}

.brand-logo{height:32px;width:auto;display:block}

.brand-word{
  background:linear-gradient(100deg,var(--red),var(--pink));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.menu ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.15rem;
  margin:0;
  padding:0 0 .4rem;
}

.menu a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.3rem .7rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  color:var(--muted);
  text-decoration:none;
  font-size:.95rem;
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
}

.menu a:hover,
.menu a:focus-visible{
  color:var(--ink);
  border-color:var(--line);
  background:rgba(255,255,255,.9);
  transform:translateY(-1px);
}

/* 主体：左侧栏 + 内容 */
.shell{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,218px) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  max-width:1180px;
  margin:0 auto;
  padding:clamp(1.4rem,3vw,2.4rem) clamp(1rem,4vw,2.5rem) 3rem;
}

.side{
  position:sticky;
  top:8.4rem;
  align-self:start;
  font-size:.95rem;
}

.side small{
  display:block;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--pink);
  margin-bottom:.3rem;
}

.side h2{
  font-size:1.05rem;
  line-height:1.4;
  margin:0 0 .7rem;
}

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

.side li{animation:rise .5s cubic-bezier(.2,.7,.3,1) backwards}
.side li:nth-child(1){animation-delay:.02s}
.side li:nth-child(2){animation-delay:.07s}
.side li:nth-child(3){animation-delay:.12s}
.side li:nth-child(4){animation-delay:.17s}
.side li:nth-child(5){animation-delay:.22s}
.side li:nth-child(6){animation-delay:.27s}
.side li:nth-child(7){animation-delay:.32s}

@keyframes rise{
  from{opacity:0;transform:translateX(-6px)}
  to{opacity:1;transform:none}
}

.side a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:.4rem .6rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  color:var(--muted);
  text-decoration:none;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}

.side a:hover,
.side a:focus-visible,
.side a.is-active{
  color:var(--ink);
  border-color:var(--line);
  background:rgba(255,255,255,.85);
}

.side a.is-active{font-weight:600}

main{min-width:0}

main > div{
  padding-block:clamp(1.6rem,3vw,2.4rem);
  scroll-margin-top:9rem;
}

main > div + div{border-top:1px solid var(--line)}

/* 首屏 */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,236px);
  align-items:center;
  gap:clamp(1.5rem,4vw,3rem);
  min-height:min(70vh,600px);
  padding-block:clamp(1rem,3vw,2rem);
}

h1{
  font-size:clamp(1.8rem,4.6vw,2.9rem);
  line-height:1.28;
  letter-spacing:-.01em;
  margin:0 0 .9rem;
  color:var(--ink);
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h1{
    background:linear-gradient(102deg,var(--red),var(--pink) 56%,var(--ink) 98%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}

.hero .lead{
  font-size:1.05rem;
  color:var(--muted);
  max-width:34em;
  margin:0 0 1.1rem;
}

.cta{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.5rem 1.4rem;
  border-radius:var(--radius);
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.02em;
  transition:transform .25s ease,background .25s ease;
}

.cta:hover,
.cta:focus-visible{
  background:linear-gradient(100deg,var(--red),var(--pink));
  transform:translateY(-2px);
}

.hero-art{margin:0}

.hero-art svg{
  display:block;
  width:100%;
  height:auto;
  filter:saturate(1.15);
  animation:float 11s ease-in-out infinite;
}

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

/* 正文通用 */
h2{
  font-size:clamp(1.28rem,2.4vw,1.65rem);
  line-height:1.38;
  margin:.1rem 0 .9rem;
}

main small{
  display:block;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--pink);
  margin-bottom:.35rem;
}

h3{
  font-size:1.12rem;
  line-height:1.45;
  margin:1.4rem 0 .6rem;
}

main p{margin:0 0 1.05rem;max-width:66ch}
main ul,
main ol{margin:0 0 1.1rem;padding-left:1.35rem;max-width:66ch}
main li{margin:.35rem 0}
main strong{font-weight:600}

main a{
  color:#c4003e;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s ease;
}

main a:hover{color:var(--pink)}

main img{
  display:block;
  max-width:100%;
  height:auto;
  margin:1.1rem 0;
  border-radius:var(--radius);
  border:1px solid var(--line);
}

main figure{margin:1.2rem 0}

main blockquote{
  margin:1.2rem 0;
  padding:.85rem 1.1rem;
  border-left:3px solid var(--pink);
  border-radius:0 var(--radius) var(--radius) 0;
  background:rgba(255,255,255,.62);
}

/* 页脚 */
footer{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr 1fr 1.15fr;
  gap:clamp(1.5rem,4vw,3rem);
  margin-top:2rem;
  padding:clamp(2rem,5vw,3.2rem) clamp(1rem,4vw,2.5rem) 1.4rem;
  background:linear-gradient(180deg,#2d1a1a,#261717);
  color:#ffeef2;
}

footer h3{
  margin:0 0 .7rem;
  font-size:.98rem;
  letter-spacing:.14em;
  color:#ffb7ce;
}

footer p{margin:0 0 .6rem;font-size:.95rem;color:rgba(255,238,242,.8);max-width:32em}

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

footer li{animation:rise .5s cubic-bezier(.2,.7,.3,1) backwards}
footer li:nth-child(2){animation-delay:.05s}
footer li:nth-child(3){animation-delay:.1s}
footer li:nth-child(4){animation-delay:.15s}
footer li:nth-child(5){animation-delay:.2s}

footer a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.25rem .5rem;
  margin-left:-.5rem;
  border-radius:var(--radius);
  color:#ffc9dd;
  text-decoration:none;
  transition:color .2s ease,background .2s ease,transform .2s ease;
}

footer a:hover,
footer a:focus-visible{
  color:#fff;
  background:rgba(255,255,255,.1);
  transform:translateX(2px);
}

.sub{display:grid;gap:.45rem;max-width:320px}

.sub label{font-size:.85rem;color:rgba(255,238,242,.72)}

.sub input{
  min-height:44px;
  padding:.5rem .8rem;
  border-radius:var(--radius);
  border:1px solid rgba(255,238,242,.34);
  background:rgba(255,255,255,.08);
  color:#fff;
  font:inherit;
  font-size:.95rem;
}

.sub input::placeholder{color:rgba(255,238,242,.5)}

.sub button{
  min-height:44px;
  border:0;
  border-radius:var(--radius);
  background:linear-gradient(100deg,var(--red),var(--pink));
  color:#fff;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  transition:filter .25s ease,transform .25s ease;
}

.sub button:hover,
.sub button:focus-visible{filter:brightness(1.14);transform:translateY(-1px)}

.foot-bar{
  grid-column:1 / -1;
  border-top:1px solid rgba(255,238,242,.18);
  padding-top:1rem;
  text-align:center;
}

.foot-bar p{
  margin:0;
  font-size:.85rem;
  color:rgba(255,238,242,.7);
  max-width:none;
}

/* 回到顶部 */
.to-top{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:30;
  min-height:44px;
  padding:.45rem 1rem;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:rgba(255,255,255,.94);
  color:var(--ink);
  font:inherit;
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease,background .25s ease;
}

.to-top.is-on{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:#fff}

@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr);padding-top:1rem}
  .side{position:static;margin-bottom:.4rem}
  .side ul,
  .side-nav ul{display:flex;overflow-x:auto;gap:.3rem;padding-bottom:.2rem}
  .side a{white-space:nowrap}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-art{max-width:180px}
  footer{grid-template-columns:minmax(0,1fr)}
  .foot-bar{grid-column:auto}
}

@media (max-width:620px){
  body{font-size:16px}
  .menu ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .menu ul::-webkit-scrollbar{display:none}
  .menu a{white-space:nowrap}
  .topbar{padding-left:.9rem;padding-right:.9rem}
  main > div{scroll-margin-top:7.6rem}
}

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

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