:root {
  --ink: #20382e;
  --ink-soft: #52675d;
  --forest: #234d3b;
  --leaf: #86ab45;
  --leaf-light: #bfd77d;
  --amber: #dfa94c;
  --paper: #f8f4e9;
  --paper-deep: #efe7d3;
  --white: #fffdf7;
  --line: rgba(32, 56, 46, 0.14);
  --shadow: 0 20px 55px rgba(38, 63, 41, 0.12);
  --radius-lg: 30px;
  --radius-md: 18px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
  line-height: 1.6;
}
button, a { font: inherit; }
a { color: inherit; }
.skip-link {
  position: fixed;
  z-index: 20;
  top: -4rem;
  left: 1rem;
  padding: 0.65rem 0.9rem;
  background: var(--forest);
  color: white;
  border-radius: 0 0 8px 8px;
}
.skip-link:focus { top: 0; }

.site-header {
  width: min(1180px, calc(100% - 3rem));
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; font-weight: 750; letter-spacing: 0.03em; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50% 50% 46% 54%; background: var(--leaf); color: var(--forest); font-size: 0.86rem; font-weight: 800; transform: rotate(-12deg); }
nav { display: flex; align-items: center; gap: 1.4rem; font-size: 0.9rem; color: var(--ink-soft); }
nav a { text-decoration: none; }
nav a:hover, nav a:focus-visible { color: var(--forest); text-decoration: underline; text-underline-offset: 0.28rem; }

.section-wrap { width: min(1180px, calc(100% - 3rem)); margin: 0 auto; }
.hero { min-height: 620px; display: grid; grid-template-columns: 1.04fr 0.96fr; align-items: center; gap: clamp(2.5rem, 8vw, 8rem); padding: 4.5rem 0 5.5rem; }
.eyebrow { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; color: #698941; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.16em; }
.eyebrow span { display: block; width: 1.8rem; height: 1px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.17; letter-spacing: -0.035em; }
h1 { max-width: 680px; margin-bottom: 1.5rem; font-size: clamp(2.65rem, 5.6vw, 5.4rem); font-weight: 800; }
.hero-lead { max-width: 555px; margin-bottom: 2rem; color: var(--ink-soft); font-size: clamp(1rem, 1.35vw, 1.16rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.72rem 1.2rem; border: 1px solid transparent; border-radius: 99px; text-decoration: none; font-weight: 700; font-size: 0.93rem; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .demo-tab:focus-visible { outline: 3px solid #e3b85f; outline-offset: 3px; }
.button-primary { background: var(--forest); color: var(--white); box-shadow: 0 12px 22px rgba(35, 77, 59, 0.2); }
.button-primary:hover { background: #183f30; }
.button-quiet { border-color: var(--line); color: var(--forest); background: rgba(255,255,255,.32); }
.quiet-note { margin: 1.25rem 0 0; color: #7a867d; font-size: 0.78rem; }

.hero-visual { position: relative; isolation: isolate; min-height: 440px; overflow: hidden; border: 1px solid rgba(255,255,255,.58); border-radius: 55% 45% 48% 52% / 48% 47% 53% 52%; background: linear-gradient(150deg, #e9e1bd 0%, #b8d5cf 42%, #8eae8d 100%); box-shadow: var(--shadow); }
.sun { position: absolute; z-index: -1; top: 12%; right: 14%; width: 96px; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 242, 188, 0.82); box-shadow: 0 0 0 13px rgba(255, 242, 188, .12); }
.hill { position: absolute; z-index: -1; width: 130%; border-radius: 50% 50% 0 0; }
.hill-back { height: 44%; bottom: 30%; left: -26%; background: #86a478; transform: rotate(-6deg); }
.hill-front { height: 38%; bottom: 24%; right: -42%; background: #507b62; transform: rotate(8deg); }
.water { position: absolute; z-index: -1; right: -9%; bottom: -2%; left: -8%; height: 36%; background: linear-gradient(#638f8c, #3c756d); transform: rotate(-2deg); }
.water i { position: absolute; display: block; width: 120px; height: 20px; border: 2px solid rgba(235,247,225,.48); border-radius: 50%; }
.water i:nth-child(1) { top: 28%; left: 19%; }
.water i:nth-child(2) { top: 44%; left: 31%; width: 175px; height: 27px; opacity: .65; }
.water i:nth-child(3) { top: 20%; right: 8%; width: 80px; opacity: .45; }
.leaf-character { position: absolute; bottom: 19%; left: 32%; width: 125px; height: 190px; filter: drop-shadow(0 13px 10px rgba(30,56,38,.15)); }
.leaf-body { position: absolute; z-index: 2; top: 3px; left: 15px; width: 98px; height: 124px; border: 3px solid #536a25; border-radius: 54% 42% 50% 44% / 58% 46% 56% 41%; background: linear-gradient(145deg, #c6dd6f, #8eb44b 70%); transform: rotate(-6deg); }
.leaf-notch { position: absolute; top: -3px; right: 14px; width: 23px; height: 14px; border-radius: 0 0 100% 100%; background: #dfe9ad; border-bottom: 2px solid #536a25; }
.eye { position: absolute; top: 54px; width: 7px; height: 11px; border-radius: 50%; background: #30462a; }
.eye.left { left: 34px; }.eye.right { right: 32px; }.mouth { position: absolute; top: 75px; left: 42px; width: 18px; height: 10px; border-bottom: 2px solid #30462a; border-radius: 0 0 50% 50%; }
.arm, .leg { position: absolute; z-index: 1; display: block; background: #536a25; border-radius: 50px; }
.arm { top: 98px; width: 37px; height: 6px; }.arm-left { left: 1px; transform: rotate(-32deg); }.arm-right { right: -1px; transform: rotate(35deg); }
.leg { top: 123px; width: 7px; height: 48px; }.leg-left { left: 44px; transform: rotate(8deg); }.leg-right { right: 40px; transform: rotate(-10deg); }
.visual-caption { position: absolute; right: 8%; bottom: 7%; margin: 0; color: rgba(255,255,255,.9); font-size: clamp(.9rem, 1.45vw, 1.1rem); font-weight: 700; line-height: 1.5; text-shadow: 0 1px 8px rgba(21,58,54,.25); }

.trust-strip { display: flex; justify-content: center; width: min(1180px, calc(100% - 3rem)); margin: 0 auto; padding: 1.15rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-strip div { min-width: min(30%, 220px); display: flex; justify-content: center; align-items: baseline; gap: 0.55rem; padding: .2rem clamp(1rem,4vw,3rem); border-right: 1px solid var(--line); }.trust-strip div:last-child { border-right: 0; }.trust-strip strong { color: var(--forest); font-size: 1.2rem; }.trust-strip span { color: var(--ink-soft); font-size: .82rem; }

.demo-section, .abilities-section, .delivery-section { padding: clamp(5.5rem, 10vw, 9rem) 0; }.section-intro { max-width: 630px; margin-bottom: 2.8rem; }.section-intro.narrow { max-width: 510px; }.section-intro h2, .boundary-copy h2, .privacy-card h2 { margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 3.75rem); font-weight: 800; }.section-intro > p:last-child, .boundary-copy > p { color: var(--ink-soft); }
.demo-shell { display: grid; grid-template-columns: 0.79fr 1.35fr .88fr; min-height: 415px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 15px 35px rgba(56, 74, 49, .08); }
.demo-tabs { display: flex; flex-direction: column; padding: 1rem; background: #f0ecdE; gap: .35rem; }.demo-tab { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .85rem; border: 0; border-radius: 10px; background: transparent; color: var(--ink-soft); text-align: left; cursor: pointer; transition: color 160ms ease, background 160ms ease; }.demo-tab span { color: #8e9e81; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; }.demo-tab:hover, .demo-tab.is-active { background: rgba(255,255,255,.76); color: var(--forest); font-weight: 750; }.demo-tab.is-active span { color: var(--amber); }
.demo-panel { padding: clamp(1.8rem, 4vw, 3.2rem); border-right: 1px solid var(--line); }.demo-status { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 2.2rem; color: #718444; font-size: .78rem; font-weight: 750; }.status-dot { width: .52rem; height: .52rem; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 5px rgba(134,171,69,.14); }.demo-index { margin-bottom: .7rem; color: #9ba69d; font-size: .68rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }.demo-panel h3 { margin-bottom: .9rem; font-size: clamp(1.45rem, 2vw, 2rem); }.demo-panel > p:not(.demo-index):not(.demo-disclaimer) { color: var(--ink-soft); }.demo-checklist { display: grid; gap: .48rem; margin: 1.45rem 0; padding: 0; list-style: none; }.demo-checklist li { padding-left: 1.35rem; position: relative; font-size: .9rem; }.demo-checklist li::before { content: ""; position: absolute; top: .5rem; left: 0; width: .45rem; height: .45rem; border: 1px solid var(--leaf); border-radius: 50%; }.demo-disclaimer { padding-top: 1rem; border-top: 1px dashed var(--line); color: #7b877e; font-size: .75rem; }
.deliverable-card { align-self: center; margin: 1.25rem; padding: 1.2rem; border-radius: 18px; background: #284d3d; color: #f7f6df; box-shadow: 0 15px 25px rgba(35,77,59,.2); }.deliverable-head { display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: .78rem; font-weight: 750; }.mini-lock { color: #c8dd9c; font-size: .65rem; }.sample-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }.sample-card { position: relative; min-height: 92px; overflow: hidden; border-radius: 7px; background: #b4c782; }.sample-card::after { content:""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: rgba(248,244,233,.82); }.sample-card i { position: absolute; z-index: 1; left: 40%; bottom: 14%; width: 19px; height: 31px; border: 1px solid #526b27; border-radius: 55% 40% 50% 45%; background: #c3d85e; }.sample-card b { position: absolute; z-index: 2; top: 13%; left: 12%; width: 70%; height: 5px; border-radius: 7px; background: rgba(255,255,255,.78); }.card-b { background: #80a59d; }.card-c { background: #d8c972; }.deliverable-list { margin: 1rem 0 .8rem; font-size: .75rem; }.deliverable-list p { margin: .4rem 0; }.check { color: #c9e881; margin-right: .36rem; }.deliverable-foot { margin: 0; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.15); color: rgba(247,246,223,.64); font-size: .65rem; }

.abilities-section { border-top: 1px solid rgba(32,56,46,.07); }.ability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }.ability-card { min-height: 235px; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,253,247,.55); transition: transform 180ms ease, box-shadow 180ms ease; }.ability-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }.ability-no { color: #a9b95c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }.ability-card h3 { margin: 2.5rem 0 .75rem; font-size: 1.28rem; }.ability-card p { color: var(--ink-soft); font-size: .9rem; }

.boundary-section { width: min(1260px, 100%); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) max(1.5rem, calc((100vw - 1180px)/2)); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 8vw, 7rem); background: var(--forest); color: #f8f5e9; }.eyebrow-light { color: #c3db82; }.boundary-copy > p { color: rgba(248,245,233,.7); }.boundary-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.boundary-columns article { padding: 1.6rem; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-md); }.column-label { margin-bottom: 1.3rem; font-size: .82rem; font-weight: 800; }.column-label.can { color: #cce986; }.column-label.cannot { color: #eec46b; }.boundary-columns ul { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; font-size: .92rem; }.boundary-columns li { position: relative; padding-left: 1rem; }.boundary-columns li::before { content: "·"; position: absolute; left: 0; color: #a8c96b; font-weight: 900; }

.delivery-list { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 3.5rem; margin: 0; padding: 0; list-style: none; counter-reset: delivery; }.delivery-list li { display: grid; grid-template-columns: 50px 1fr; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }.delivery-list > li > span { color: #92ab57; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }.delivery-list h3 { margin-bottom: .3rem; font-size: 1.18rem; }.delivery-list p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.privacy-section { padding: clamp(4rem, 8vw, 7rem) 1.5rem; background: #e9e1cd; }.privacy-card { width: min(860px, 100%); margin: 0 auto; padding: clamp(2rem, 6vw, 5rem); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 20px 50px rgba(59,62,36,.1); text-align: center; }.privacy-card .eyebrow { justify-content: center; }.privacy-points { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin: 2.8rem 0; text-align: left; }.privacy-points p { margin: 0; color: var(--ink-soft); font-size: .89rem; }.privacy-points span { display: block; margin-bottom: .55rem; color: var(--leaf); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; }.privacy-end { margin-bottom: 0; color: var(--forest); font-weight: 750; }.site-footer { display: flex; justify-content: space-between; gap: 1rem; width: min(1180px, calc(100% - 3rem)); margin: 0 auto; padding: 1.5rem 0 2rem; color: #758078; font-size: .75rem; }

@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 2.5rem; }.hero-visual { min-height: 360px; max-width: 630px; width: 100%; }.demo-shell { grid-template-columns: 190px 1fr; }.deliverable-card { grid-column: 1 / -1; margin-top: 0; }.ability-grid { grid-template-columns: repeat(2,1fr); }.boundary-section { grid-template-columns: 1fr; }.delivery-list { gap: .6rem 2rem; }.privacy-points { gap: 1rem; } }
@media (max-width: 620px) { .site-header { min-height: 72px; width: min(100% - 2rem, 1180px); }.site-header nav { display: none; }.section-wrap { width: min(100% - 2rem, 1180px); }.hero { min-height: auto; padding: 3rem 0 4.5rem; }.hero-visual { min-height: 315px; }.leaf-character { transform: scale(.84); transform-origin: bottom left; left: 25%; }.trust-strip { width: min(100% - 2rem, 1180px); padding: .9rem 0; }.trust-strip div { flex-direction: column; gap: .1rem; padding: .2rem .8rem; }.trust-strip strong { font-size: 1rem; }.trust-strip span { font-size: .68rem; text-align: center; }.demo-shell { grid-template-columns: 1fr; }.demo-tabs { display: grid; grid-template-columns: 1fr 1fr; }.demo-tab { padding: .65rem; font-size: .83rem; }.demo-panel { border-right: 0; border-bottom: 1px solid var(--line); }.boundary-section { padding-left: 1.5rem; padding-right: 1.5rem; }.boundary-columns, .delivery-list, .privacy-points { grid-template-columns: 1fr; }.ability-grid { grid-template-columns: 1fr; }.ability-card { min-height: auto; }.ability-card h3 { margin-top: 1.5rem; }.site-footer { flex-direction: column; width: min(100% - 2rem, 1180px); }.privacy-card { padding: 2.2rem 1.3rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }