:root{
  --header-h: 44px;
  --bg: #FFFDF5;
  --text: #333;
  --muted: #4A4A4A;
  --accent: #E74C3C;
  --accent-hover: #C0392B;
  --btn-bg: #F2D5D0;
  --btn-bg-hover: #E6B8AF;
  --btn-border: #E1C9C3;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none;transition:color .18s ease;}
a:focus{outline:2px solid rgba(0,0,0,0.08);outline-offset:2px}

/* ---------- 顶部导航 ---------- */
header{
  --h: var(--header-h);
  position:fixed;
  top:0;left:0;right:0;
  height:var(--h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  background:var(--bg);
  border-bottom:1px solid #CCC;
  z-index:1000;
}

.logo {
  font-weight: 600;
  font-size: 1.08rem;
  color: #111;
  height: var(--h);
  display: flex;
  align-items: center;
}

.logo img {
  height: 28px;
  width: auto;
  margin-right: 8px;
  display: block;
}

nav{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}

nav .nav-links{
  list-style:none;
  display:flex;
  gap:20px;
  align-items:center;
  height:var(--h);
  margin:0;
  padding:0;
}

nav .nav-links > li{
  display:flex;
  align-items:center;
  height:var(--h);
}

nav .nav-links a{
  display:inline-block;
  height:var(--h);
  line-height:var(--h);
  padding:0 4px;
  font-size:0.92rem;
  font-weight:500;
  color:#111;
  white-space:nowrap;
}

/* 导航按钮 */
.nav-links .nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  line-height:34px;
  padding:0 14px;
  background:var(--btn-bg);
  color:#111;
  font-size:0.9rem;
  font-weight:600;
  border-radius:6px;
  border:1px solid var(--btn-border);
  transition:all .18s ease;
}
.nav-links .nav-btn:hover{
  background:var(--btn-bg-hover);
  border-color:#D99A8F;
}

/* 汉堡按钮 */
.hamburger{
  display:none;
  width:22px;height:16px;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
}
.hamburger span{
  display:block;height:2px;background:#111;border-radius:1px;
  transition:transform .18s ease,opacity .18s ease;
}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(3px,4px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(3px,-4px);}

/* ---------- 移动端 ---------- */
@media (max-width:768px){
  .hamburger{display:flex;}
  nav .nav-links{
    position:fixed;
    top:var(--header-h);
    right:-100%;
    width:220px;
    height:calc(100vh - var(--header-h));
    flex-direction:column;
    gap:12px;
    padding:18px;
    background:var(--bg);
    box-sizing:border-box;
    transition:right .25s ease;
    align-items:flex-start;
  }
  nav .nav-links.active{ right:0; }
  nav .nav-links li{ height:auto; width:100%; }
  nav .nav-links a{
    height:auto;
    line-height:normal;
    padding:8px 6px;
    display:block;
    width:100%;
  }
  .nav-links .nav-btn {
    width:100%;
    text-align:center;
    height:40px;
    line-height:40px;
    margin-top:8px;
  }
}

/* ---------- 主体内容 ---------- */
main{
  flex:1;
  max-width:880px;
  margin:0 auto;
  padding:92px 20px 60px;
}
.btn-wrapper { text-align: center; }
.btn-wrapper .btn { display: inline-flex; }

section{margin-bottom:64px;}
h1{font-size:2.1rem;text-align:center;color:#111;margin-bottom:14px;line-height:1.2;}
h2{font-size:1.7rem;color:#111;margin-bottom:12px;}
p{
  color: var(--muted);
  font-size: 1.02rem;
  margin-bottom: 12px;
  display:block;
  text-indent: 2em;
}
.highlight{color:#111;font-weight:600;display:inline;}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  line-height:40px;
  padding:0 20px;
  background:#E96A5C;
  color:#fff;
  border-radius:8px;
  border:none;
  font-size:1rem;
  font-weight:600;
  transition:all .2s ease;
}
.btn:hover{ background:#C94B3A; }

ul{list-style:disc inside;margin-bottom:12px;color:var(--muted);}
footer{
  text-align:center;
  font-size:.95rem;
  color:#999;
  padding:28px 20px;
  margin-top:auto;
}

/* 淡入动效 */
.fade-in{opacity:0;transform:translateY(12px);transition:all .7s ease-out;}
.fade-in.visible{opacity:1;transform:none;}