:root{
  --font-sans-cn: 'Noto Sans SC', 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --brand-ink: #0c2b1e;
  --brand-forest: #0f5132;
  --brand-leaf: #2bb673;
  --brand-leaf-2: #6bd696;
  --brand-sun: #ffd782;
  --brand-dawn: #ffefc2;
  --brand-sky: #bfe8ff;
  --brand-water: #4cb3ff;
  --ink-900:#0b1b14; --ink-800:#132820; --ink-700:#1f3a2f; --ink-600:#2a4a3c; --ink-500:#416f5a;
  --ink-400:#6a9c85; --ink-300:#94b6a6; --ink-200:#bcd4c8; --ink-100:#e5efe9; --ink-050:#f4faf7;
  --bg-dark: #0f1412;
  --glass: rgba(16,24,20,0.45);
  --glass-2: rgba(255,255,255,0.06);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15);
  --shadow-soft: 0 6px 20px rgba(0,0,0,.12);
  --radius-3: 1rem; --radius-4: 1.25rem; --radius-5: 1.75rem;
}

html,body{font-family:var(--font-sans-cn); background:#09120f; color:#e7f1eb;}
.theme-nature{min-height:100vh;}
.page{z-index:3;}

/* Background layers */
.bg-layer{position:fixed; inset:0; z-index:0; pointer-events:none}
.bg-gradient{background: radial-gradient(1200px 600px at 20% -10%, rgba(88,176,126,.35), transparent),
                        radial-gradient(1100px 700px at 110% 10%, rgba(76,179,255,.20), transparent),
                        linear-gradient(180deg, #0a1713 0%, #0d1f19 50%, #0a1512 100%)}
.bg-texture{background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><g fill="%23ffffff" fill-opacity="0.015"><circle cx="10" cy="10" r="1"/><circle cx="40" cy="20" r="1"/><circle cx="90" cy="15" r="1"/><circle cx="70" cy="70" r="1"/><circle cx="25" cy="90" r="1"/></g></svg>'); mix-blend-mode: overlay}
.bg-mountains{mask-image: linear-gradient(to top, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 95%);
  background: bottom/cover no-repeat;
  background-image: linear-gradient( to top, rgba(12,27,22,0.8) 0%, rgba(12,27,22,0.0) 35%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" preserveAspectRatio="none"><defs><linearGradient id="g" x1="0" x2="0" y1="1" y2="0"><stop offset="0%" stop-color="%230c1b16"/><stop offset="100%" stop-color="%230f241e"/></linearGradient></defs><path d="M0,260 L120,220 L220,260 L360,210 L460,240 L600,220 L720,250 L880,230 L980,260 L1200,240 L1200,300 L0,300 Z" fill="url(%23g)"/></svg>');
}

/* 让两个canvas覆盖页面（不挡交互） */
.fx-canvas{position:fixed; inset:0; z-index:1; pointer-events:none}

/* Glassy nav */
.glassy{background:linear-gradient(180deg, rgba(14,22,18,.55), rgba(14,22,18,.35)); backdrop-filter: blur(10px)}
.brand-logo{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:12px; background:rgba(43,182,115,.15); color:#9ef3c7}
.navbar .nav-link{letter-spacing:.2px}
.nav-pill{border-radius:999px; padding:.45rem .9rem}
.navbar .nav-link.active{background:rgba(43,182,115,.18); color:#eafff6}
.dropdown-menu-theme{border-radius:14px; background: #0f1a15; border:1px solid rgba(255,255,255,.06); box-shadow: var(--shadow-xl)}
.dropdown-menu-theme .dropdown-item{color:#d9eee4}
.dropdown-menu-theme .dropdown-item.active, .dropdown-menu-theme .dropdown-item:active{background:rgba(43,182,115,.18); color:#eafff6}

/* Hero + glow */
.hero-nature{position:relative; background: radial-gradient(900px 400px at 10% 0%, rgba(43,182,115,.18), rgba(43,182,115,0) 60%),
 linear-gradient(180deg, rgba(255,215,130,.08), rgba(255,215,130,0) 50%),
 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 560"><defs><linearGradient id="gg" x1="0" x2="0" y1="1" y2="0"><stop offset="0%" stop-color="%230b1511"/><stop offset="100%" stop-color="%23121e18"/></linearGradient></defs><rect x="0" y="0" width="1400" height="560" fill="url(%23gg)"/><g fill="%23152a22" opacity=".65"><path d="M0 480 L 80 420 L 180 470 L 320 410 L 460 450 L 620 430 L 760 460 L 900 440 L 1040 470 L 1200 450 L 1400 470 L 1400 560 L 0 560 Z"/></g><g fill="%231a342a" opacity=".8"><path d="M0 500 L 140 460 L 260 510 L 420 470 L 560 495 L 700 480 L 860 510 L 1000 490 L 1160 515 L 1400 500 L 1400 560 L 0 560 Z"/></g></svg>');
  background-size:cover; background-position:center; border:1px solid rgba(255,255,255,.06)}
.hero-explosive .glow{filter: drop-shadow(0 0 20px rgba(107,214,150,.45)) drop-shadow(0 0 50px rgba(43,182,115,.15));}
.hero-sheen{position:absolute; inset:0; background: radial-gradient(600px 200px at 35% 0%, rgba(255,255,255,.12), transparent 60%); pointer-events:none}
.hero .hero-kicker{letter-spacing: .28em; text-transform: uppercase; color:#b7e7d1; font-weight:700}
.text-hero{color:#d7efe4}

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform:none}

/* Section title */
.section-title .dot{width:12px;height:12px;border-radius:50%;display:inline-block;background:linear-gradient(145deg,#2bb673,#6bd696); box-shadow:0 0 0 6px rgba(43,182,115,.15)}

/* Cards + tilt */
.card-gear{background: linear-gradient(180deg, rgba(16,24,20,.55), rgba(16,24,20,.35)); transform-style: preserve-3d; will-change: transform}
.tilt{transition: transform .15s ease}
.bg-cover{background-image: var(--bg); background-size: cover; background-position: center; border-bottom:1px solid rgba(255,255,255,.06)}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Buttons + ripple */
.btn-camp{--bs-btn-bg: #2bb673; --bs-btn-border-color:#27a566; --bs-btn-hover-bg:#25a161; --bs-btn-hover-border-color:#248c56; --bs-btn-color:#0f231b; font-weight:700; border-radius:14px; position:relative; overflow:hidden}
.btn-outline-camp{--bs-btn-color:#9be8c7; --bs-btn-border-color:#2bb673; --bs-btn-hover-bg:rgba(43,182,115,.15); --bs-btn-hover-border-color:#2bb673; border-radius:14px; font-weight:700; position:relative; overflow:hidden}
.ripple::after{content:""; position:absolute; border-radius:50%; transform:scale(0); opacity:.5; background:radial-gradient(circle, rgba(255,255,255,.45), transparent 60%); animation: none; pointer-events:none}
.ripple:active::after{animation:ripple .6s ease-out forwards}
@keyframes ripple{to{transform:scale(8); opacity:0}}

/* Subtle animations */
.hover-rise{transition: transform .2s ease, box-shadow .2s ease}
.hover-rise:hover{transform: translateY(-4px); box-shadow: var(--shadow-xl)}
.shadow-soft{box-shadow: var(--shadow-soft)}
.shadow-xl{box-shadow: var(--shadow-xl)}
.pill-soft{border-radius:999px; backdrop-filter: blur(2px)}

/* Footer */
.footer-divider{height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent)}

/* Alerts */
.alert-info{background: rgba(191,232,255,.08); color:#d6f0ff; border-color: rgba(191,232,255,.25)}

/* Scrollbar */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2bb673,#1e8b59); border-radius:10px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}
