/* ============================================
 *    WestWetlandTech — Unified Site Styles (Health Theme)
 *       ============================================ */

/* -------- Color Variables -------- */
:root {
	  --bg: #ffffff;
	    --text: #1c1c1c;
	      --primary: #2fa58a;     /* Teal-green health tone */
	        --primary-dark: #1e7864;
		  --accent: #4bb5ff;      /* Soft blue accent */
		    --card-bg: #f7fdfc;
		      --border: #e5e5e5;
		        --nav-bg: #ffffff;
			  --nav-link: #333;
			    --nav-link-active: var(--primary);
		    }

		    @media (prefers-color-scheme: dark) {
			      :root {
				          --bg: #0f1412;
					      --text: #f2f2f2;
					          --card-bg: #12201c;
						      --border: #2a2a2a;
						          --nav-bg: #111815;
							      --nav-link: #d8d8d8;
							          --nav-link-active: #5adbb5;
								    }
							    }

							    /* -------- Global Reset -------- */
							    body {
								      margin: 0;
								        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Arial, sans-serif;
									  background: var(--bg);
									    color: var(--text);
									      line-height: 1.65;
								      }

								      /* -------- Navigation -------- */
								      header {
									        background: var(--nav-bg);
										  position: sticky;
										    top: 0;
										      z-index: 99;
										        padding: 20px 40px;
											  border-bottom: 1px solid var(--border);
											    display: flex;
											      justify-content: space-between;
											        align-items: center;
											}

											header nav a {
												  margin-left: 20px;
												    color: var(--nav-link);
												      text-decoration: none;
												        font-weight: 500;
												}

												header nav a.active {
													  color: var(--nav-link-active);
													    border-bottom: 2px solid var(--nav-link-active);
													      padding-bottom: 4px;
												      }

												      /* -------- Hero Section -------- */
												      .hero {
													        padding: 80px 40px;
														  text-align: center;
														    max-width: 900px;
														      margin: auto;
													      }

													      h1 {
														        font-size: 46px;
															  margin-bottom: 20px;
															    font-weight: 700;
														    }

														    .hero p {
															      font-size: 18px;
															        opacity: 0.9;
															}

															/* -------- Buttons -------- */
															button, .btn {
																  background: linear-gradient(135deg, var(--primary), var(--accent));
																    color: #fff;
																      padding: 14px 28px;
																        font-size: 16px;
																	  border: none;
																	    border-radius: 10px;
																	      cursor: pointer;
																	        margin-top: 25px;
																		  transition: transform 0.2s ease, opacity 0.25s ease;
																	  }

																	  button:hover, .btn:hover {
																		    transform: translateY(-3px);
																		      opacity: 0.92;
																	      }

																	      /* -------- Sections -------- */
																	      section {
																		        padding: 60px 40px;
																			  max-width: 900px;
																			    margin: auto;
																		    }

																		    h2 {
																			      font-size: 32px;
																			        margin-bottom: 20px;
																				  font-weight: 600;
																			  }

																			  .feature-block {
																				    background: var(--card-bg);
																				      padding: 24px;
																				        border-radius: 14px;
																					  margin-bottom: 32px;
																					    border: 1px solid var(--border);
																					      transition: transform 0.25s ease, box-shadow 0.25s ease;
																				      }

																				      .feature-block:hover {
																					        transform: translateY(-4px);
																						  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
																					  }

																					  /* -------- Footer -------- */
																					  footer {
																						    padding: 40px;
																						      text-align: center;
																						        border-top: 1px solid var(--border);
																							  font-size: 14px;
																						  }

																						  footer a {
																							    display: block;
																							      margin: 6px 0;
																							        color: var(--accent);
																								  text-decoration: none;
																							  }

																							  footer a:hover {
																								    text-decoration: underline;
																							    }

																							    /* -------- SVG Illustration -------- */
																							    .illustration {
																								      max-width: 220px;
																								        margin: 0 auto 40px auto;
																									  display: block;
																									    opacity: 0.95;
																								    }

																								    /* -------- Fade-in Animation -------- */
																								    .fade-in {
																									      opacity: 0;
																									        transform: translateY(18px);
																										  animation: fadeInUp 0.8s ease forwards;
																									  }

																									  @keyframes fadeInUp {
																										    to {
																											        opacity: 1;
																												    transform: translateY(0);
																												      }
																											      }

																											      /* -------- Responsive -------- */
																											      @media (max-width: 600px) {
																												        h1 { font-size: 34px; }
																													  h2 { font-size: 26px; }
																													    header { padding: 15px 20px; }
																													      button { width: 100%; }
																												      }
																												      🧩 assets/script.js（自动导航高亮 + 动画 + Smooth Scroll）
																												      javascript
																												      复制代码
																												      /* =====================================================
																												       *    WestWetlandTech — Site Script
																												       *       ===================================================== */

/* -------- Smooth Scroll for "Get Started" -------- */
document.addEventListener("DOMContentLoaded", function() {
	  const btn = document.querySelector("#get-started");
	    const features = document.querySelector("#features");

	      if (btn && features) {
		          btn.addEventListener("click", () => {
				        features.scrollIntoView({ behavior: "smooth" });
					    });
					      }
				      });

				      /* -------- Navigation Active State -------- */
				      (function highlightNav() {
					        const current = window.location.pathname;
						  document.querySelectorAll("header nav a").forEach(a => {
							      if (a.getAttribute("href") === current) {
								            a.classList.add("active");
									        }
										  });
									  })();

									  /* -------- Fade-in Animation on Scroll -------- */
									  const faders = document.querySelectorAll('.fade-in');

									  const obs = new IntersectionObserver(entries => {
										    entries.forEach(entry => {
											        if (entry.isIntersecting) {
													      entry.target.classList.add("visible");
													            entry.target.style.animationDelay = "0s";
														          entry.target.classList.add("fade-in");
															      }
															        });
															});

															faders.forEach(el => obs.observe(el));