*{margin:0;padding:0;box-sizing:border-box}
html{font-family:'Karla',sans-serif;line-height:1.6;font-size:16px;background:#f8f9fa}
body{color:#333;background:#f8f9fa;padding:0}
.container{margin:0 auto;padding:0;max-width:100%}

.site-header{
  background:#2c7744;
  color:#fff;
  padding:1.5rem 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  position:relative;
  overflow:hidden
}

.site-header:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,50 Q80,40 50,50 Q20,60 0,50 L0,0 Z"></path></svg>');
  background-size:100% 150px;
  background-repeat:no-repeat;
  background-position:bottom;
  pointer-events:none
}

.logo{
  font-size:1.8rem;
  font-weight:700;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.2);
  display:flex;
  align-items:center;
  gap:0.8rem
}

.logo:before{
  content:"🌿";
  font-size:1.2em
}

.nav-links{
  display:flex;
  gap:1.5rem
}

.nav-links a{
  color:#e0f7e0;
  text-decoration:none;
  font-weight:600;
  padding:0.5rem 1rem;
  border-radius:4px;
  transition:all 0.3s
}

.nav-links a:hover{
  background:rgba(255,255,255,0.2);
  color:#fff
}

.content{
  padding:4rem 2rem;
  background:linear-gradient(to bottom,#f8f9fa,#e9ecef);
  min-height:calc(100vh - 300px)
}

.content-wrapper{
  max-width:1200px;
  margin:0 auto;
  background:#fff;
  padding:3rem;
  border-radius:12px;
  box-shadow:0 5px 15px rgba(0,0,0,0.05);
  border:1px solid #e0e0e0;
  position:relative
}

.content-wrapper:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:8px;
  background:linear-gradient(to right,#4CAF50,#8BC34A,#CDDC39);
  border-radius:12px 12px 0 0
}

.content p{
  margin-bottom:1.5rem;
  font-size:1.1rem;
  line-height:1.8;
  color:#333
}

.content img{
  max-width:100%;
  height:auto;
  margin:2rem auto;
  display:block;
  border-radius:8px;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
  border:3px solid #fff
}

.content h1,.content h2,.content h3{
  color:#2c7744;
  margin:2rem 0 1.5rem;
  font-weight:700
}

.site-footer{
  background:#2c7744;
  color:#fff;
  padding:3rem 2rem;
  text-align:center;
  position:relative
}

.site-footer:before{
  content:"";
  position:absolute;
  top:-20px;
  left:0;
  width:100%;
  height:40px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path fill="%232c7744" d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity="0.25"></path><path fill="%232c7744" d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity="0.5"></path><path fill="%232c7744" d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"></path></svg>');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat
}

.footer-links{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin-bottom:2rem;
  flex-wrap:wrap
}

.links a{
  color:#fff;
  margin:0 10px;
  text-decoration:none;
}

.footer-links a{
  color:#c8e6c9;
  text-decoration:none;
  transition:all 0.3s;
  padding:0.5rem;
  border-radius:4px;
  display:flex;
  align-items:center;
  gap:0.5rem
}

.footer-links a:before{
  content:"→";
  font-size:0.9em
}

.footer-links a:hover{
  color:#fff;
  background:rgba(255,255,255,0.1)
}

.copyright{
  font-size:0.9rem;
  color:#a5d6a7;
  margin-top:1.5rem
}

/* 响应式设计 */
@media (max-width:768px){
  .site-header{
    flex-direction:column;
    gap:1rem;
    padding:1rem
  }
  
  .content{
    padding:2rem 1rem
  }
  
  .content-wrapper{
    padding:2rem
  }
  
  .footer-links{
    flex-direction:column;
    gap:1rem
  }
}

/* 自然元素装饰 */
.leaf-decoration{
  position:fixed;
  z-index:-1;
  opacity:0.1;
  font-size:150px
}

.leaf-1{top:10%;left:5%;transform:rotate(15deg)}
.leaf-2{bottom:20%;right:10%;transform:rotate(-30deg)}