:root { --ink:#17351d; --ink-soft:#526a59; --muted:#79907f; --green:#4b9b58; --green-dark:#31733b; --green-pale:#e9f4df; --blue:#4b91cf; --orange:#e98a47; --paper:#fffef9; --line:#dbe7d8; --shadow:0 18px 42px rgba(52,98,61,.13); --shadow-small:0 8px 22px rgba(52,98,61,.10); --radius:24px; --max-width:1180px; --font:"Nunito","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { color:var(--ink); background:var(--paper); font:16px/1.75 var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
h1,h2,h3 { line-height:1.2; letter-spacing:-.045em; }
.container { width:min(var(--max-width),calc(100% - 48px)); margin:0 auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.button { border:0; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 20px; font-weight:900; transition:transform .2s,background .2s,box-shadow .2s,color .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#fff; background:var(--green); box-shadow:0 10px 20px rgba(65,143,76,.22); }
.button-primary:hover { background:var(--green-dark); }
.button-outline { color:var(--green-dark); background:rgba(255,255,255,.82); border:2px solid #76ae78; }
.button-outline:hover { background:#fff; border-color:var(--green); }
.button-ghost { color:var(--ink-soft); background:#f7fbf4; border:1px solid var(--line); }
.button-large { min-height:56px; padding:15px 27px; font-size:17px; }
.button-small { padding:8px 15px; font-size:13px; border-radius:10px; }
.button-block { width:100%; margin-top:17px; }
.button-light { color:var(--green-dark); background:#fff; box-shadow:0 8px 18px rgba(31,81,45,.15); }
.button-light:hover { background:#f4ffe9; }
.cookie-bar { position:fixed; z-index:100; left:20px; bottom:20px; width:min(430px,calc(100% - 40px)); padding:17px 19px; display:grid; gap:11px; background:#fff; border:1px solid var(--line); border-radius:17px; box-shadow:var(--shadow); color:var(--ink-soft); font-size:13px; animation:rise .35s ease both; }
.cookie-bar strong { display:block; color:var(--ink); font-size:14px; }
.cookie-actions { display:flex; align-items:center; gap:8px; }
.cookie-actions a { color:var(--green-dark); text-decoration:underline; margin-left:auto; }
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.site-header { position:sticky; top:0; z-index:50; height:78px; background:rgba(255,255,249,.92); border-bottom:1px solid #dae5d7; backdrop-filter:blur(15px); transition:box-shadow .25s; }
.site-header.scrolled { box-shadow:0 8px 20px rgba(43,88,52,.10); }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.brand-icon { width:42px; height:42px; object-fit:contain; }
.brand-title { color:#203d22; font-size:22px; font-weight:950; letter-spacing:-.07em; }
.brand-by { color:#78917a; background:var(--green-pale); border-radius:999px; padding:3px 9px; font-size:11px; font-weight:800; }
.site-nav { display:flex; align-items:center; gap:24px; margin-left:auto; }
.site-nav > a:not(.button) { color:#38543c; font-size:14px; font-weight:800; transition:color .2s; }
.site-nav > a:not(.button):hover { color:var(--green-dark); }
.nav-button { margin-left:5px; }
.menu-toggle { display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:11px; background:#fff; padding:9px; }
.menu-toggle span { display:block; height:2px; margin:5px 0; border-radius:4px; background:var(--green-dark); }
.hero { position:relative; min-height:650px; overflow:hidden; background:linear-gradient(180deg,#dff5ff 0%,#f3fcff 62%,#e7f4dc 100%); }
.hero-scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(245,253,249,.98) 0%,rgba(245,253,249,.92) 36%,rgba(245,253,249,.28) 59%,rgba(245,253,249,.03) 100%); }
.hero-inner { min-height:650px; position:relative; display:flex; align-items:center; }
.hero-copy { position:relative; z-index:2; width:54%; padding:30px 0 46px; }
.world-label,.section-kicker { color:var(--green-dark); font-size:12px; line-height:1.4; font-weight:950; letter-spacing:.13em; text-transform:uppercase; }
.world-label { margin-bottom:18px; }
.hero h1 { color:#16371f; font-size:clamp(43px,5.1vw,72px); font-weight:950; }
.hero h1 span,.section-intro h2 span,.feature-main h2 span,.privacy-copy h2 span { color:var(--green); }
.hero-lead { max-width:565px; margin-top:24px; color:#4f6957; font-size:17px; font-weight:700; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:29px; }
.hero-note { margin-top:17px; color:#5c835f; font-size:13px; font-weight:900; }
.hero-note span { color:var(--green); }
.hero-product { position:absolute; z-index:4; right:5%; bottom:34px; width:326px; padding:14px; background:rgba(255,255,255,.96); border:1px solid rgba(126,160,122,.32); border-radius:20px; box-shadow:0 20px 45px rgba(44,80,47,.22); transform:rotate(2deg); }
.product-topline,.preview-header { display:flex; align-items:center; justify-content:space-between; color:#78917c; font-size:10px; font-weight:900; }
.product-photo { position:relative; height:145px; overflow:hidden; margin-top:10px; border-radius:13px; background:#d8f1ff; }
.product-photo:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(38,75,37,.18)); }
.product-photo > img { width:100%; height:100%; object-fit:cover; object-position:55% 40%; }
.photo-stamp { position:absolute; z-index:1; left:10px; bottom:9px; color:#fff; background:rgba(53,126,63,.87); border-radius:99px; padding:3px 8px; font-size:11px; font-weight:900; }
.product-body { position:relative; z-index:2; padding:12px 4px 4px; }
.mood { color:var(--orange); font-size:11px; font-weight:900; }.mood span { font-size:16px; margin-right:4px; }
.product-body h2 { margin-top:7px; color:var(--ink); font-size:19px; }.product-body > p { margin-top:5px; color:#65796b; font-size:12px; line-height:1.65; }
.product-divider { height:1px; margin:11px 0; background:#e3eee0; }.insight { display:flex; gap:8px; padding:9px; border-radius:10px; background:#edf8e8; }.insight > span { color:var(--orange); font-size:18px; line-height:1; }.insight strong { color:#4d7654; font-size:11px; }.insight p { margin-top:1px; color:#638069; font-size:11px; line-height:1.5; }
.product-status { margin-top:9px; color:#8b9d8d; font-size:10px; font-weight:800; }.status-dot { display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:var(--green); }.product-gardener { position:absolute; z-index:3; width:75px; height:auto; left:-51px; bottom:-11px; filter:drop-shadow(0 8px 7px rgba(46,89,49,.18)); }
.hero-cloud-cloud { position:absolute; left:-4%; right:-4%; bottom:-43px; height:80px; background:var(--paper); border-radius:50% 50% 0 0/90% 90% 0 0; }
.section { padding:110px 0; }.section-paper { background:var(--paper); }.section-sky { background:#edf8ff; }
.section-intro { max-width:760px; margin-bottom:54px; }.split-intro { display:grid; grid-template-columns:1.1fr .9fr; align-items:end; gap:70px; }.split-intro > p { color:var(--ink-soft); font-size:16px; }.section-intro h2 { margin-top:13px; color:var(--ink); font-size:clamp(32px,4vw,49px); font-weight:950; }.centered { margin-right:auto; margin-left:auto; text-align:center; }.centered > p:last-child { max-width:620px; margin:16px auto 0; color:var(--ink-soft); }
.pain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.pain-card { position:relative; min-height:245px; padding:28px 27px 32px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-small); transition:transform .2s,box-shadow .2s; }.pain-card:hover,.step:hover,.price-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }.pain-icon { width:50px; height:50px; display:grid; place-items:center; margin-bottom:18px; border-radius:15px; font-size:28px; font-weight:900; }.pain-icon.blue { color:var(--blue); background:#e3f3ff; }.pain-icon.orange { color:var(--orange); background:#fff0df; }.pain-icon.green { color:var(--green); background:#eaf6df; }.pain-card h3 { font-size:20px; }.pain-card p { margin-top:10px; color:var(--ink-soft); font-size:14px; }.card-line { position:absolute; left:27px; right:27px; bottom:18px; height:2px; background:linear-gradient(90deg,var(--green),transparent); opacity:.36; }
.steps { display:grid; grid-template-columns:1fr 36px 1fr 36px 1fr; gap:14px; align-items:center; }.step { position:relative; min-height:365px; padding:28px; border:1px solid #cfe4ef; border-radius:var(--radius); background:rgba(255,255,255,.88); box-shadow:var(--shadow-small); transition:transform .2s,box-shadow .2s; }.step-number { color:#9cb8c4; font-size:13px; font-weight:950; letter-spacing:.12em; }.step-art { height:84px; display:flex; align-items:center; justify-content:flex-start; margin:5px 0 14px; }.step-art img { max-height:86px; width:auto; object-fit:contain; }.step h3 { font-size:21px; }.step p { margin-top:11px; color:var(--ink-soft); font-size:14px; }.step-foot { position:absolute; left:28px; bottom:25px; color:var(--green-dark); font-size:12px; font-weight:900; }.vine-arrow { color:var(--green); font-size:31px; font-weight:900; text-align:center; }
.roles { padding-bottom:90px; }.role-grid { display:grid; gap:22px; }.role-card { position:relative; min-height:375px; display:grid; grid-template-columns:.9fr 1.1fr; gap:25px; overflow:hidden; padding:35px 38px; border-radius:27px; }.role-child { background:linear-gradient(120deg,#eaf8ed,#f8fff6); border:1px solid #cde7d0; }.role-parent { background:linear-gradient(120deg,#fff4e3,#fffdf8); border:1px solid #f1dfc6; }.role-label { color:var(--green-dark); font-size:12px; font-weight:950; letter-spacing:.06em; }.role-parent .role-label { color:var(--orange); }.role-copy h3 { margin-top:12px; color:var(--ink); font-size:30px; }.role-copy h3 span { color:var(--green); }.role-parent .role-copy h3 span { color:var(--orange); }.role-copy > p { margin-top:12px; color:var(--ink-soft); font-size:14px; }.role-copy ul { display:grid; gap:5px; margin-top:16px; list-style:none; color:var(--ink); font-size:13px; font-weight:800; }.role-preview { position:relative; align-self:center; min-height:235px; padding:23px; border:1px solid rgba(100,144,105,.25); border-radius:18px; background:rgba(255,255,255,.83); box-shadow:0 12px 24px rgba(70,107,73,.10); }.preview-header { font-size:11px; }.preview-header strong { color:var(--ink); font-size:15px; }.timeline-item { display:flex; gap:12px; align-items:center; margin-top:15px; padding:12px; border-radius:12px; background:#f5fbf1; }.timeline-item > span { font-size:23px; }.timeline-item strong,.timeline-item small { display:block; }.timeline-item strong { font-size:13px; }.timeline-item small { color:var(--muted); font-size:11px; }.role-character { position:absolute; right:3px; bottom:-14px; width:78px; }.chart-label { display:flex; justify-content:space-between; margin-top:28px; color:var(--muted); font-size:11px; font-weight:800; }.chart-label strong { color:var(--orange); }.chart { height:90px; display:flex; align-items:end; gap:12px; padding:10px 16px 0; border-bottom:1px solid #ecdcca; }.chart i { display:block; flex:1; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#f2ad65,#f7d87c); }.todo { margin-top:15px; padding:9px 12px; border-radius:10px; background:#fff5e9; color:#946839; font-size:11px; font-weight:800; }.todo span { margin-right:5px; }.role-gardener { position:absolute; right:-6px; bottom:-15px; width:82px; }
.feature-row { display:grid; grid-template-columns:.82fr 1.18fr; gap:80px; align-items:start; margin-top:105px; padding-top:74px; border-top:1px solid var(--line); }.feature-main h2 { margin-top:13px; color:var(--ink); font-size:clamp(30px,3.7vw,44px); }.feature-main > p:not(.section-kicker) { max-width:420px; margin-top:17px; color:var(--ink-soft); }.text-link { display:inline-flex; gap:10px; margin-top:22px; color:var(--green-dark); font-weight:950; }.text-link span { transition:transform .2s; }.text-link:hover span { transform:translate(3px,-3px); }.feature-list { display:grid; grid-template-columns:1fr 1fr; column-gap:35px; row-gap:10px; }.feature-list > div { min-height:128px; padding:17px 0; border-bottom:1px solid var(--line); }.feature-number { display:block; color:#9bb99a; font-size:12px; font-weight:950; letter-spacing:.08em; }.feature-list strong { display:block; margin-top:7px; font-size:18px; }.feature-list p { margin-top:3px; color:var(--ink-soft); font-size:13px; }
.privacy-section { color:#effbe9; background:#275e36; }.privacy-inner { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }.privacy-copy .section-kicker { color:#a9dd9e; }.privacy-copy h2 { margin-top:13px; font-size:clamp(36px,4.4vw,56px); }.privacy-copy h2 span { color:#b2e46e; }.privacy-copy > p:not(.section-kicker):not(.privacy-boundary) { margin-top:19px; color:#c5e0c2; font-size:16px; }.privacy-boundary { margin-top:22px; padding-left:15px; border-left:3px solid #f2ce62; color:#f1e8c6; font-size:13px; }.privacy-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.privacy-list > div { min-height:150px; padding:22px; border:1px solid rgba(203,235,186,.25); border-radius:18px; background:rgba(255,255,255,.07); }.privacy-list span { color:#a9dd9e; font-size:12px; font-weight:900; }.privacy-list strong { display:block; margin-top:11px; font-size:18px; }.privacy-list p { margin-top:5px; color:#c1ddc0; font-size:13px; }
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }.price-card { position:relative; min-height:390px; padding:30px 27px 26px; border:1px solid #cfe4ef; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-small); transition:transform .2s,box-shadow .2s; }.price-card.featured { border:2px solid var(--green); box-shadow:var(--shadow); transform:translateY(-9px); }.price-card.featured:hover { transform:translateY(-15px); }.price-ribbon { position:absolute; top:-14px; left:50%; transform:translateX(-50%); padding:5px 16px; border-radius:99px; color:#fff; background:var(--green); font-size:12px; font-weight:950; white-space:nowrap; }.price-name { font-size:19px; font-weight:950; }.price-amount { margin-top:6px; color:var(--green-dark); font-size:38px; font-weight:950; letter-spacing:-.06em; }.price-amount small { color:var(--muted); font-size:13px; letter-spacing:0; }.price-card > p { color:var(--ink-soft); font-size:13px; }.price-card ul { display:grid; gap:8px; margin-top:23px; list-style:none; color:var(--ink); font-size:13px; font-weight:700; }
.founder-section { background:linear-gradient(180deg,#eaf6e0,#fffef9); }.founder-card { display:flex; align-items:center; gap:28px; max-width:880px; padding:38px 45px; border:1px solid #d2e5c9; border-radius:27px; background:rgba(255,255,255,.8); box-shadow:var(--shadow-small); }.founder-mark { width:94px; height:94px; display:grid; place-items:center; flex:0 0 auto; border-radius:25px; background:#eaf6df; font-size:51px; }.founder-card h2 { margin-top:12px; font-size:clamp(24px,3vw,33px); }.founder-card > div:last-child > p:not(.section-kicker) { margin-top:13px; color:var(--ink-soft); font-size:15px; }.founder-card strong { display:block; margin-top:12px; color:var(--green-dark); font-size:13px; }
.faq-container { max-width:820px; }.faq-list { display:grid; gap:11px; }.faq-item { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; }.faq-question { display:flex; align-items:center; justify-content:space-between; width:100%; padding:19px 22px; border:0; color:var(--ink); background:transparent; text-align:left; font-size:15px; font-weight:900; }.faq-question span { color:var(--green); font-size:25px; font-weight:400; transition:transform .2s; }.faq-item.open .faq-question span { transform:rotate(45deg); }.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease; }.faq-answer p { padding:0 22px 20px; color:var(--ink-soft); font-size:14px; }
.waitlist-section { position:relative; overflow:hidden; padding:115px 0 120px; color:#fff; background:linear-gradient(135deg,#55a561,#31763e); }.waitlist-section:after { content:""; position:absolute; width:380px; height:380px; right:-90px; top:-170px; border:55px solid rgba(255,255,255,.09); border-radius:50%; }.waitlist-inner { position:relative; z-index:1; display:flex; justify-content:center; gap:31px; }.waitlist-inner > div { max-width:650px; text-align:center; }.waitlist-inner .section-kicker { color:#d6efba; }.waitlist-inner h2 { margin-top:14px; font-size:clamp(34px,4.3vw,55px); }.waitlist-inner > div > p:not(.section-kicker):not(.form-message) { margin-top:16px; color:#e1f3d9; }.waitlist-form { display:flex; flex-wrap:wrap; gap:10px; max-width:540px; margin:27px auto 0; }.waitlist-form input:not([type="checkbox"]) { min-width:0; flex:1; padding:15px 19px; border:0; border-radius:13px; outline:none; color:var(--ink); background:#fff; font-size:15px; }.waitlist-form input:not([type="checkbox"]):focus { box-shadow:0 0 0 3px rgba(255,255,255,.35); }.consent-row { display:flex; align-items:flex-start; gap:8px; width:100%; color:#e1f3d9; font-size:12px; line-height:1.5; text-align:left; }.consent-row input { width:15px; height:15px; margin-top:2px; accent-color:#d6efba; }.consent-row a { color:#fff; text-decoration:underline; }.form-message { min-height:25px; margin-top:10px; color:#edffd7; font-size:13px; font-weight:900; }.waitlist-inner small { color:#d0e9ca; font-size:12px; }.waitlist-character { position:absolute; width:100px; left:calc(50% - 525px); bottom:-18px; transform:scaleX(-1); }
.site-footer { padding:65px 0 23px; color:#c8d8c5; background:#163a22; }.footer-top { display:grid; grid-template-columns:1fr 1.3fr; gap:70px; padding-bottom:44px; }.footer-brand .brand-title { color:#fff; }.footer-brand .brand-icon { width:38px; height:38px; }.footer-top > div:first-child > p { margin-top:15px; color:#91b091; font-size:14px; }.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }.footer-links strong { display:block; color:#fff; font-size:13px; }.footer-links a,.footer-links span { display:block; margin-top:8px; color:#9fb99b; font-size:13px; }.footer-links a:hover { color:#d5e999; }.footer-bottom { display:flex; justify-content:space-between; gap:10px; padding-top:20px; border-top:1px solid rgba(213,232,205,.15); color:#749476; font-size:12px; }
.reveal { opacity:0; transform:translateY(25px); transition:opacity .65s ease,transform .65s ease; }.reveal.in { opacity:1; transform:none; }.reveal-delay { transition-delay:.08s; }.reveal-delay-2 { transition-delay:.16s; }
@media (max-width:1040px) { .site-nav { gap:15px; }.site-nav > a:not(.button) { font-size:13px; }.hero-product { right:1%; }.privacy-inner { gap:45px; }.waitlist-character { left:1%; } }
@media (max-width:820px) { .site-header { height:70px; }.brand-by { display:none; }.menu-toggle { display:block; }.site-nav { position:absolute; top:69px; left:0; right:0; display:grid; gap:0; padding:10px 24px 17px; background:rgba(255,255,249,.98); border-bottom:1px solid var(--line); box-shadow:var(--shadow-small); transform:translateY(-150%); transition:transform .25s ease; }.site-nav.show { transform:none; }.site-nav > a:not(.button) { padding:10px 0; font-size:14px; }.nav-button { margin:5px 0 0; text-align:center; }.hero { min-height:880px; }.hero-inner { min-height:880px; display:block; }.hero-wash { background:linear-gradient(180deg,rgba(245,253,249,.98) 0%,rgba(245,253,249,.86) 41%,rgba(245,253,249,.05) 70%); }.hero-copy { width:100%; padding-top:70px; }.hero-product { right:50%; bottom:48px; transform:translateX(50%) rotate(2deg); }.hero-product.reveal.in { transform:translateX(50%) rotate(2deg); }.split-intro,.feature-row,.privacy-inner { grid-template-columns:1fr; gap:30px; }.steps { grid-template-columns:1fr; gap:16px; }.vine-arrow { transform:rotate(90deg); }.step { min-height:290px; }.step-foot { position:static; margin-top:20px; }.role-card { grid-template-columns:1fr; padding:29px; }.role-preview { min-height:220px; }.pain-grid,.price-grid { grid-template-columns:1fr; }.price-card.featured { transform:none; }.price-card.featured:hover { transform:translateY(-6px); }.privacy-list { gap:10px; }.waitlist-character { display:none; }.footer-top { grid-template-columns:1fr; gap:35px; } }
@media (max-width:540px) { .container { width:min(100% - 32px,var(--max-width)); }.section { padding:78px 0; }.hero { min-height:1080px; }.hero-inner { min-height:1080px; }.hero-copy { padding-top:47px; }.world-label { font-size:10px; }.hero h1 { font-size:42px; }.hero-lead { font-size:15px; }.hero-actions { display:grid; }.hero-actions .button { width:100%; }.hero-note { font-size:11px; }.hero-product { width:min(326px,calc(100% - 22px)); bottom:44px; }.section-intro { margin-bottom:37px; }.section-intro h2 { font-size:34px; }.split-intro > p { font-size:15px; }.pain-card { min-height:220px; }.role-card { padding:24px 20px; }.role-copy h3 { font-size:27px; }.role-preview { padding:17px; }.feature-row { margin-top:73px; padding-top:53px; }.feature-list { grid-template-columns:1fr; }.privacy-list { grid-template-columns:1fr; }.privacy-list > div { min-height:auto; }.founder-card { display:block; padding:28px 23px; }.founder-mark { margin-bottom:20px; }.waitlist-form { display:grid; }.waitlist-form input:not([type="checkbox"]),.waitlist-form .button { width:100%; }.footer-links { grid-template-columns:1fr 1fr; row-gap:28px; }.footer-links > div:last-child { grid-column:1 / -1; }.footer-bottom { display:block; }.footer-bottom span { display:block; }.footer-bottom span + span { margin-top:7px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }