:root { color-scheme: light; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: #18372b; background: #f3f8f4; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 85% 8%, #dff4e7 0 12%, transparent 36%), radial-gradient(circle at 4% 96%, #fff2c7 0 10%, transparent 31%), #f6faf7; }
.shell { width: min(920px, calc(100% - 32px)); margin: 0 auto; padding: clamp(64px, 10vw, 110px) 0 32px; }
.hero { max-width: 720px; }
.eyebrow { display: block; color: #17845b; font-size: 13px; font-weight: 800; letter-spacing: .22em; }
h1 { margin: 16px 0 12px; font-size: clamp(38px, 7vw, 68px); line-height: 1.05; letter-spacing: -.04em; }
.hero p { margin: 0; color: #658074; font-size: clamp(16px, 2.5vw, 20px); line-height: 1.8; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(42px, 8vw, 72px); }
.card { display: flex; gap: 18px; min-height: 210px; padding: 26px; border: 1px solid rgba(30,113,79,.13); border-radius: 28px; background: rgba(255,255,255,.84); box-shadow: 0 18px 50px rgba(39,91,66,.08); }
.mark { display: grid; flex: 0 0 50px; height: 50px; place-items: center; border-radius: 17px; color: #fff; background: linear-gradient(145deg,#168258,#6fbd8b); font-weight: 900; font-size: 14px; }
.card small { color: #19835c; font-weight: 800; letter-spacing: .08em; }
.card h2 { margin: 10px 0 9px; font-size: 22px; }
.card p { margin: 0; color: #70877d; line-height: 1.65; }
.muted { opacity: .78; }
footer { margin-top: 56px; padding: 24px 0 8px; border-top: 1px solid rgba(31,91,66,.12); color: #74877f; font-size: 13px; text-align: center; }
footer p { margin: 0 0 8px; }
footer a { color: #487061; text-decoration: none; }
@media (max-width: 760px) { .shell { width: min(100% - 24px, 560px); padding-top: 56px; } .grid { grid-template-columns: 1fr; } .card { min-height: 0; padding: 22px; border-radius: 24px; } }