:root { --forest:#173e32; --muted:#68746b; --paper:#f5f4ed; --lime:#d1ed8d; --line:#d9dfd2; color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; background:var(--paper); color:var(--forest); font-family:'DM Sans',sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p { margin:0; } h1,h2,h3,.brand { font-family:Manrope,sans-serif; } a { color:inherit; } button,input { font:inherit; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; } a { text-underline-offset:5px; } :focus-visible { outline:3px solid #a06618; outline-offset:5px; }
.wrap { width:min(1280px,calc(100% - 96px)); margin-inline:auto; } .header { height:102px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); gap:20px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:23px; letter-spacing:-1px; text-decoration:none; }.brand-dot { margin-left:-9px; }
.brand-leaf { display:grid; place-items:center; background:var(--forest); color:var(--lime); width:34px; height:36px; border-radius:5px 20px 5px 20px; font-size:24px; }
.desktop-nav { display:flex; gap:34px; font-size:14px; font-weight:500; }.desktop-nav a,.login-link { text-decoration:none; }.desktop-nav a:hover { text-decoration:underline; }.login-link { display:flex; align-items:center; gap:26px; padding:12px 20px; border:1px solid var(--line); border-radius:40px; font-size:14px; font-weight:700; }.login-link:hover { background:#e8ecdf; }
.mobile-menu { display:none; }.hero { display:grid; grid-template-columns:.95fr 1.1fr; align-items:center; min-height:740px; padding-top:55px; padding-bottom:55px; position:relative; }.hero-copy { z-index:2; }.eyebrow { font-size:10px; letter-spacing:2px; font-weight:700; display:flex; align-items:center; gap:9px; margin-bottom:26px; line-height:1.8; }.live-dot { height:7px; width:7px; border-radius:50%; background:#739843; display:inline-block; flex-shrink:0; box-shadow:0 0 0 4px #73984315; }
h1 { font-size:clamp(52px,5.5vw,80px); letter-spacing:-4.8px; font-weight:500; line-height:1.08; } h1 span { color:#658163; }.intro { max-width:390px; line-height:1.85; font-size:16px; color:var(--muted); margin-top:26px; }.intro strong { color:var(--forest); font-weight:500; }.actions { display:flex; flex-wrap:wrap; align-items:center; gap:26px; margin-top:30px; }.button { display:inline-flex; align-items:center; justify-content:space-between; gap:36px; padding:18px 24px; border-radius:40px; font-size:14px; font-weight:600; text-decoration:none; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-3px); }.button-dark { background:var(--forest); color:white; }.button-lime { background:var(--lime); color:var(--forest); }.button span { font-size:20px; }.text-link { font-size:13px; font-weight:600; text-decoration:none; border:0; background:none; cursor:pointer; color:inherit; padding:8px 0; display:inline-flex; gap:12px; }.text-link:hover { text-decoration:underline; }.hero-note { margin-top:17px; font-size:11px; color:var(--muted); }
.hero-art { position:relative; width:111%; margin-left:-6%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }.hero-island { display:block; width:100%; height:auto; position:relative; z-index:1; filter:drop-shadow(0 26px 22px #173e3210); animation:float 9s ease-in-out infinite; }.orbit { position:absolute; border:1px solid #bbc8aa70; border-radius:50%; width:90%; height:66%; transform:rotate(-25deg); }.orbit-two { width:102%; height:83%; transform:rotate(25deg); opacity:.5; }.art-caption { position:absolute; right:10%; top:0; font-size:9px; letter-spacing:2px; }.art-coordinate { position:absolute; bottom:0; font-size:8px; letter-spacing:2px; right:8%; }.floating-note { display:flex; gap:12px; align-items:center; background:#fffef8eb; border:1px solid white; border-radius:14px; padding:16px 20px; position:absolute; right:-1%; bottom:13%; z-index:3; box-shadow:0 16px 40px #173e3212; }.floating-note strong { display:block; font-size:12px; }.floating-note small { display:block; font-size:10px; color:var(--muted); margin-top:5px; }.note-icon { width:34px; height:34px; display:grid; place-items:center; background:#dfedcc; border-radius:50%; font-size:20px; }
.facts-strip { border-block:1px solid var(--line); }.facts { display:grid; grid-template-columns:repeat(4,1fr); padding-block:26px; gap:20px; }.facts p { display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; color:var(--muted); border-right:1px solid var(--line); }.facts p:last-child { border:0; }.facts strong { font-size:27px; font-family:Manrope,sans-serif; font-weight:500; color:var(--forest); }.section { padding-block:100px; } h2 { font-size:clamp(32px,3.6vw,48px); font-weight:500; line-height:1.18; letter-spacing:-2px; } h2 span { color:#738770; }.section-head { max-width:600px; }.section-head>p:last-child { font-size:15px; line-height:1.85; color:var(--muted); margin-top:22px; max-width:460px; }
.demo-panel { display:grid; grid-template-columns:1.15fr 1fr; border:1px solid var(--line); border-radius:24px; overflow:hidden; margin-top:42px; background:#fafaf5; --gray:1; --saturation:.25; --brightness:.66; --glow:.06; }.demo-scene { position:relative; background:#e3e6da; display:flex; justify-content:center; align-items:center; overflow:hidden; }.demo-scene img { width:96%; height:auto; position:relative; z-index:1; filter:grayscale(var(--gray)) saturate(var(--saturation)) brightness(var(--brightness)); transition:filter 1.5s ease,transform 1.5s ease; }.demo-sun { position:absolute; inset:0; opacity:var(--glow); background:radial-gradient(ellipse at 45% 25%,#ffe9a9,transparent 70%); transition:opacity 1.5s; }.demo-caption { position:absolute; bottom:22px; left:24px; z-index:2; display:flex; gap:10px; align-items:center; padding:10px 15px; background:#fbfcf0ee; border-radius:30px; font-size:11px; }.demo-controls { padding:40px; }.mini-label { font-size:9px; letter-spacing:1.5px; font-weight:700; } h3 { font-size:28px; font-weight:500; letter-spacing:-1px; line-height:1.25; }.demo-controls h3 { margin-top:14px; }.demo-controls>p { font-size:13px; line-height:1.75; color:var(--muted); margin-top:14px; }.demo-controls fieldset { padding:0; border:0; margin:22px 0; }.demo-task { position:relative; display:flex; gap:12px; align-items:center; padding:16px 0; cursor:pointer; border-bottom:1px solid var(--line); }.demo-task strong { font-size:12px; font-weight:600; display:block; }.demo-task small { font-size:10px; display:block; color:var(--muted); margin-top:4px; }.demo-task input { position:absolute; opacity:0; width:22px; height:22px; left:0; }.demo-check { height:22px; width:22px; border:1px solid #a5b09c; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }.demo-task input:checked+.demo-check { background:var(--forest); border-color:var(--forest); color:white; }.demo-task input:checked+.demo-check::after { content:'✓'; font-size:12px; }.demo-task input:focus-visible+.demo-check { outline:3px solid #a06618; outline-offset:4px; }.task-number { margin-left:auto; font-size:10px; color:#83917c; }.demo-progress>div { display:flex; justify-content:space-between; font-size:11px; }.demo-progress progress { width:100%; height:5px; border:0; border-radius:5px; overflow:hidden; appearance:none; margin-top:12px; accent-color:var(--forest); }.demo-progress progress::-webkit-progress-bar { background:#e2e8da; }.demo-progress progress::-webkit-progress-value { background:var(--forest); transition:width .6s; }.demo-progress progress::-moz-progress-bar { background:var(--forest); }.demo-controls .fine-print { font-size:10px; line-height:1.8; }.reset-demo { font-size:10px; margin-top:8px; }
.discovery { background:#edf0e5; }.split-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; max-width:none; margin-bottom:42px; }.split-head>p:last-child { max-width:345px; margin-bottom:3px; }.discovery-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:18px; }.feature { display:flex; flex-direction:column; padding:34px; border-radius:18px; background:#fafaf4; min-height:340px; }.feature-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; }.feature p { font-size:13px; line-height:1.9; max-width:390px; margin-top:18px; color:var(--muted); }.feature-link { font-size:12px; font-weight:600; display:flex; justify-content:space-between; margin-top:auto; padding-top:28px; text-decoration:none; }.feature-link:hover { text-decoration:underline; }.feature-tasks { background:#173e32; color:#f4f8eb; }.feature-tasks p { color:#bbcbb8; }.category-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; max-width:440px; }.category-list span { font-size:10px; border:1px solid #456657; padding:9px 12px; border-radius:30px; }.feature-learn { background:#dce7bd; }.sdg-numbers { display:flex; gap:30px; margin-bottom:23px; }.sdg-numbers>span { font-size:45px; line-height:1; font-family:Manrope,sans-serif; letter-spacing:-2px; }.sdg-numbers small { display:block; letter-spacing:1px; font-size:7px; margin-top:9px; }.feature-food { background:#ece1cd; }.food-mark { font-size:50px; line-height:.7; color:#a67937; }.bin-illustration { display:flex; gap:10px; margin-bottom:25px; }.bin-illustration span { width:60px; height:68px; display:grid; place-items:center; border-radius:4px 4px 13px 13px; border-top:6px solid #78a0b4; background:#d1e0e4; font-size:7px; letter-spacing:1px; transform:rotate(-5deg); }.bin-illustration span:nth-child(2) { background:#d5e5c6; border-color:#93ad72; transform:rotate(4deg); }.bin-illustration span:nth-child(3) { background:#f1e6b9; border-color:#d4bd65; transform:rotate(-3deg); }
.research { display:grid; grid-template-columns:1.1fr 1fr; gap:95px; border-bottom:1px solid var(--line); }.research-copy>p:not(.eyebrow) { font-size:14px; line-height:1.9; color:var(--muted); margin-top:23px; }.research-note { background:#eeeadd; padding:18px 20px; border-radius:12px; margin:24px 0 12px; }.research-note strong { font-size:12px; }.research-note p { font-size:11px; line-height:1.8; margin-top:7px; color:#6e6a59; }.research-steps { list-style:none; padding:0; margin:0; align-self:center; }.research-steps li { display:flex; gap:24px; padding:28px 0; border-bottom:1px solid var(--line); }.research-steps li:first-child { padding-top:0; }.research-steps li:last-child { border:0; }.research-steps li>span { font-size:12px; color:#819477; padding-top:4px; }.research-steps h3 { font-size:21px; letter-spacing:-.7px; }.research-steps p { font-size:13px; color:var(--muted); line-height:1.8; margin-top:10px; }
.faq { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; }.faq-items details { border-bottom:1px solid var(--line); padding-block:22px; }.faq-items details:first-child { padding-top:5px; }.faq-items summary { cursor:pointer; list-style:none; font-size:14px; display:flex; justify-content:space-between; gap:20px; font-weight:500; }.faq-items summary::after { content:'+'; font-size:20px; font-weight:400; }.faq-items details[open] summary::after { content:'−'; }.faq-items summary::-webkit-details-marker { display:none; }.faq-items p { font-size:13px; line-height:1.85; color:var(--muted); margin-top:16px; max-width:540px; }
.closing { background:var(--forest); color:var(--paper); padding:56px; border-radius:24px; display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:75px; }.closing h2 { font-size:36px; letter-spacing:-1.7px; }.closing h2 span { color:#c6dbb2; }.closing .eyebrow { color:#b8cba9; margin-bottom:18px; font-size:9px; }.closing .button { flex-shrink:0; }
.footer { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:35px; }.footer .brand { font-size:20px; }.footer p { margin-top:18px; font-size:11px; line-height:1.9; color:var(--muted); }.footer strong { display:block; font-size:12px; padding-top:8px; }.footer>div>a:not(.brand) { display:block; font-size:11px; margin-top:20px; text-decoration:none; }.footer>div>a:hover { text-decoration:underline; }.footer-bottom { grid-column:1/-1; border-top:1px solid var(--line); display:flex; justify-content:space-between; padding:24px 0; font-size:9px; letter-spacing:.5px; color:var(--muted); }
.skip-link { position:absolute; left:12px; top:-90px; background:white; padding:14px; z-index:10; }.skip-link:focus { top:12px; }.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; }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@media(min-width:1500px) { .hero { min-height:800px; } }
@media(max-width:1100px) { .wrap { width:calc(100% - 64px); }.hero { min-height:650px; }h1 { font-size:58px; letter-spacing:-3px; }.hero-art { width:105%; margin-left:-5%; }.floating-note { padding:12px; bottom:7%; right:0; }.art-coordinate { display:none; }.demo-controls { padding:28px; }.research { gap:50px; }.closing { padding:40px; }.closing h2 { font-size:30px; } }
@media(max-width:800px) { .wrap { width:calc(100% - 40px); }.header { height:80px; }.desktop-nav { gap:20px; font-size:12px; }.brand { font-size:21px; }.hero { grid-template-columns:1fr; padding-top:45px; padding-bottom:24px; }.hero-copy { max-width:560px; }h1 { font-size:clamp(52px,9vw,76px); }.hero-art { width:min(590px,100%); margin:20px auto 0; }.hero-island { width:94%; }.art-caption { top:3%; }.floating-note { bottom:12%; }.intro { max-width:430px; }.facts { grid-template-columns:repeat(2,1fr); gap:20px; }.facts p:nth-child(2) { border:0; }.section { padding-block:65px; }.demo-panel { grid-template-columns:1fr; }.demo-scene { min-height:350px; max-height:470px; }.demo-scene img { width:min(90%,440px); }.demo-controls { padding:30px; }.split-head { display:block; }.split-head>p:last-child { margin-top:20px; }.feature { padding:26px; }h3 { font-size:25px; }.research { gap:40px; grid-template-columns:1fr; }.research-copy { max-width:620px; }.research-steps li { padding-block:22px; }.faq { grid-template-columns:1fr; gap:30px; }.closing { display:block; padding:35px; margin-bottom:55px; }.closing .button { margin-top:30px; }.footer { grid-template-columns:1fr 1fr; }.footer>div:first-child { grid-column:1/-1; } }
@media(max-width:540px) { .header { gap:12px; }.brand { font-size:19px; gap:7px; }.brand-leaf { width:27px; height:29px; font-size:20px; }.desktop-nav { display:none; }.login-link { margin-left:auto; font-size:11px; gap:12px; padding:10px 13px; }.mobile-menu { display:block; position:relative; font-size:11px; }.mobile-menu summary { cursor:pointer; list-style:none; padding:10px 0 10px 5px; }.mobile-menu nav { position:absolute; z-index:9; right:0; top:38px; background:#fafcf5; width:170px; border:1px solid var(--line); box-shadow:0 10px 30px #173e3210; border-radius:12px; padding:12px; }.mobile-menu nav a { display:block; padding:12px; text-decoration:none; }.eyebrow { font-size:8px; letter-spacing:1.5px; margin-bottom:21px; }h1 { font-size:54px; line-height:1.1; letter-spacing:-3.3px; }.intro { font-size:14px; margin-top:22px; }.actions { gap:18px; margin-top:24px; }.button { padding:15px 20px; font-size:12px; gap:25px; }.text-link { font-size:11px; }.hero-note { font-size:10px; }.hero-art { margin-top:35px; }.floating-note strong { font-size:10px; }.floating-note small { font-size:9px; }.floating-note { bottom:6%; }.art-caption { top:-8px; font-size:7px; }.facts p { justify-content:flex-start; font-size:10px; gap:9px; }.facts strong { font-size:25px; }.section { padding-block:54px; }h2 { font-size:33px; letter-spacing:-1.7px; }.section-head>p:last-child { font-size:13px; }.demo-panel { margin-top:28px; border-radius:18px; }.demo-scene { min-height:320px; }.demo-controls { padding:25px; }.discovery-grid { grid-template-columns:1fr; }.feature { min-height:310px; }.research-steps h3 { font-size:20px; }.research-steps p { font-size:12px; }.faq-items summary { font-size:13px; }.closing { padding:30px 24px; border-radius:18px; }.closing h2 { font-size:28px; }.footer { gap:25px; }.footer strong { font-size:11px; }.footer p,.footer>div>a:not(.brand) { font-size:10px; overflow-wrap:anywhere; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { animation:none!important; transition:none!important; } }