:root{--paper:#f5f4e9;--ink:#163e2d;--pine:#103d2d;--leaf:#88aa45;--mint:#ddecbe;--soft:#eef2e4;--outline:#dbe4d6;--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth;scroll-snap-type:none}body{background:var(--paper);overflow-x:clip}h1,h2,h3{letter-spacing:-.065em}h2{letter-spacing:-.06em}.container{width:min(100% - 96px,1260px)}.section-pad{padding:clamp(85px,9vw,142px) 0}.button{transition:background .25s,color .25s,box-shadow .3s var(--ease)}.button:hover{transform:none;box-shadow:0 10px 25px #183e2e1c}.button .icon,.text-link .icon{transition:transform .3s var(--ease)}.button:hover .icon,.text-link:hover .icon{transform:translate(2px,-2px)}
.site-header{position:sticky;top:0;height:78px;background:#f5f4e9ed;backdrop-filter:blur(18px);border-bottom:1px solid #e2e6d9;z-index:30}.desktop-nav a{position:relative;padding:12px 0}.desktop-nav a:after{content:'';position:absolute;bottom:6px;left:0;right:100%;height:1px;background:#355f3d;transition:right .28s var(--ease)}.desktop-nav a:hover:after{right:0}
.hero{position:relative;background:radial-gradient(circle at 77% 45%,#e9f0d4 0%,#f5f4e9 53%,#f5f4e9 100%);min-height:calc(100svh - 78px)}.hero-grain{position:absolute;inset:0;pointer-events:none;opacity:.19;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E")}.hero-grid{min-height:calc(100svh - 78px);grid-template-columns:52% 48%;position:relative}.hero-copy{padding:45px 5% 50px 0}.eyebrow{color:#3e6a42}.hero h1{font-size:clamp(58px,5.7vw,90px);line-height:1.16;margin:29px 0 25px}.hero h1 em{color:#729b3d}.hero-description{font-size:17px;line-height:1.8;color:#405f4e}.hero-foot{margin-top:57px}.hero-index{display:flex;align-items:center;gap:13px;margin-top:36px;color:#5b775e;font-size:10px;font-weight:800;letter-spacing:.12em}.hero-index-rule{width:54px;height:1px;background:#a8bea2}.hero-art{height:min(670px,calc(100svh - 105px))}.hero-art:before{background:#dbeac1}.hero-orbit{border-color:#7d9c7180}.phone-frame{box-shadow:28px 32px 60px #254a2c35}.floating-note{box-shadow:0 18px 40px #254a2c1f}.note-left{left:0}.note-right{right:2%}
.story-transition{background:linear-gradient(to bottom,var(--paper),#fffefa);padding:21px 0 10px}.story-transition-inner{gap:16px}.transition-line{background:linear-gradient(to right,transparent,#afc7a4)}.transition-mark{width:40px;height:40px;background:#eef3e4;color:#4d7844}.intro{background:#fffefa}.intro-grid{grid-template-columns:26% 74%;gap:0}.intro h2{max-width:850px;font-size:clamp(40px,4.4vw,68px)}.intro h2 em,.section-heading h2 em,.demo-intro h2 em,.signup h2 em{color:#507a36}.intro-bottom p{color:#405e4c}.intro-stamp{border-left:1px solid #d6e4cd;padding-left:24px}.features{background:#ebf0e2}.feature-grid{gap:20px}.feature-card{min-height:440px;border:1px solid #dbe6d2;border-radius:22px;box-shadow:0 9px 24px #143e2c08;transition:translate .4s var(--ease),box-shadow .4s var(--ease)}.feature-card:hover{translate:0 -5px;box-shadow:0 22px 34px #143e2c12}.feature-card-green{background:#d6eab9}.feature-card-cream{background:#fcfbf4}.feature-card-orange{background:#f0dcc3}.feature-preview{box-shadow:0 18px 30px #1c493018}.feature-card:hover .feature-preview{transform:rotate(0deg) translateY(-3px)}.feature-card h3{font-size:24px}.feature-card p{font-size:13px;color:#405747}.features-note{color:#546957}.quote-band{min-height:300px;display:flex;align-items:center;background:#cee99c;padding:68px 0}.quote-grid{align-items:center}.quote-grid p{font-size:clamp(27px,3.5vw,52px);line-height:1.22}.quote-grid p em{color:#476d31}.quote-grid>span{color:#2f5733}.demo-section{background:#f8f9f2}.demo-app{border-color:#d4e1d0;box-shadow:0 28px 80px #24452c17}.demo-sidebar{background:#173f30}.demo-intro-side p,.section-heading>p{color:#486451}.signup{background:#d9e9c6}.signup-card{box-shadow:14px 17px 0 #bed9a4}.footer{background:#153b2d}
/* Reveal is progressive enhancement only: no JS or reduced-motion means visible content. */
.reveal{opacity:1;transform:none}.motion-ready .reveal:not(.is-visible){opacity:0;transform:translateY(22px)}.motion-ready .reveal{transition:opacity .75s var(--ease),transform .75s var(--ease)}.motion-ready .reveal.is-visible{opacity:1;transform:translateY(0)}.motion-ready .feature-card:nth-child(2){transition-delay:.08s}.motion-ready .feature-card:nth-child(3){transition-delay:.16s}
@media(prefers-reduced-motion:no-preference){.hero-copy{animation:hero-appear .8s var(--ease) both}.phone-frame{animation:phone-appear .95s .1s var(--ease) both}.floating-note{animation:note-appear .8s .45s var(--ease) both}@keyframes hero-appear{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}@keyframes phone-appear{from{opacity:0;translate:0 25px;rotate:-4deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes note-appear{from{opacity:0;scale:.94}to{opacity:1;scale:1}}}
@media(max-width:1100px){.hero-grid{grid-template-columns:53% 47%}.hero h1{font-size:clamp(50px,5.8vw,76px)}.hero-art{height:610px}.feature-card{min-height:430px}}
@media(max-width:800px){.container{width:min(100% - 40px,700px)}.hero-grid{grid-template-columns:minmax(0,1fr);min-height:0}.hero{min-height:0}.hero-copy{padding:72px 0 5px}.hero-art{height:570px}.hero-index{display:none}.feature-grid{grid-template-columns:1fr 1fr}.feature-card:last-child{grid-column:span 2}.intro-grid{grid-template-columns:1fr;gap:28px}}
@media(max-width:560px){.container{width:calc(100% - 34px)}.site-header{height:68px}.hero-copy{padding-top:58px}.hero h1{font-size:clamp(42px,10.5vw,59px)}.hero-description{font-size:15px}.hero-art{height:515px;margin:0 -17px}.feature-grid{grid-template-columns:1fr}.feature-card,.feature-card:last-child{grid-column:auto;min-height:390px}.quote-band{min-height:0;padding:70px 0}.demo-intro h2{font-size:clamp(34px,8vw,46px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-copy,.phone-frame,.floating-note{animation:none!important}.motion-ready .reveal:not(.is-visible){opacity:1;transform:none}.motion-ready .reveal{transition:none}.feature-card:hover{translate:none}.feature-card:hover .feature-preview{transform:none}}
/* Hero art direction: a quiet editorial cover rather than a generic two-column banner. */
@media(min-width:801px){.hero-grid{gap:36px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:28px;padding-bottom:28px}.hero-copy{background:radial-gradient(circle at 15% 0%,#285941 0%,#153d2e 50%,#103627 100%);border-radius:28px;min-height:min(710px,calc(100svh - 134px));height:100%;padding:clamp(42px,5vw,76px);display:flex;flex-direction:column;justify-content:center;box-shadow:0 25px 55px #15392720}.hero h1{font-size:clamp(48px,4.6vw,76px);color:#f7f7ec;line-height:1.17}.hero h1 em{color:#c6ec78}.hero .eyebrow{color:#c7e49b}.hero .eyebrow-line{background:#b1d784}.hero-description{color:#d7e5d7;max-width:530px}.hero .text-link{color:#f0f7e7;border-color:#b9d0b7}.hero .text-link:hover{color:#c8eb91}.hero-foot,.hero-index{color:#cadfca}.hero-index-rule{background:#9cba9f}.hero-art{height:min(680px,calc(100svh - 124px))}.hero-art:before{width:min(520px,100%);height:min(520px,100%);top:50%;left:50%;transform:translate(-50%,-50%)}.orbit-one{width:560px;height:560px;top:50%;transform:translateY(-50%)}.orbit-two{width:460px;height:460px;top:50%;transform:translateY(-50%)}.note-left{left:-1%;top:29%}.note-right{right:-1%;bottom:24%}}
@media(min-width:801px) and (max-width:1100px){.hero-grid{gap:22px}.hero-copy{padding:38px}.hero h1{font-size:clamp(44px,4.5vw,62px)}.hero-art:before{width:430px;height:430px}.orbit-one{width:480px;height:480px}.orbit-two{width:380px;height:380px}}
@media(max-width:800px){.hero-copy{background:radial-gradient(circle at 15% 0%,#285941,#153d2e 62%,#103627);border-radius:22px;padding:50px 36px;box-shadow:0 18px 45px #1539271c;margin-top:25px}.hero h1{color:#f7f7ec}.hero h1 em{color:#c6ec78}.hero .eyebrow{color:#c7e49b}.hero .eyebrow-line{background:#b1d784}.hero-description{color:#d7e5d7}.hero .text-link{color:#f0f7e7;border-color:#b9d0b7}.hero-foot{color:#cadfca}.hero-art{margin-top:-20px}}
@media(max-width:560px){.hero-copy{padding:36px 25px 42px;margin-top:17px}.hero h1{font-size:clamp(39px,9vw,56px)}.hero-actions{gap:16px}.hero-foot{margin-top:38px}.hero-art{height:500px;margin-top:-5px}}
/* Mobile-first app prototype embedded as a real phone, not a desktop dashboard. */
.demo-layout{display:grid;grid-template-columns:minmax(0,420px) minmax(0,430px);justify-content:center;align-items:center;gap:clamp(48px,7vw,120px)}
.demo-phone-shell{width:min(100%,390px);height: min(790px,calc(100svh - 110px));min-height:650px;background:#fbfcf7;border:8px solid #173c2d;border-radius:45px;box-shadow:24px 34px 65px #24482930,0 0 0 1px #305742;display:flex;flex-direction:column;overflow:hidden;margin-inline:auto;position:relative}
.demo-phone-shell:before{content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);width:92px;height:18px;border-radius:0 0 14px 14px;background:#173c2d;z-index:2}
.demo-statusbar{height:35px;padding:12px 23px 2px;display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:800;flex:none;color:#214632}
.status-signal .icon{width:17px;height:17px}
.demo-greeting{height:58px;display:flex;align-items:center;gap:10px;padding:4px 21px 9px;flex:none;border-bottom:1px solid #e9eee5}
.demo-greeting img{width:32px;height:38px;object-fit:contain}.demo-greeting strong,.demo-greeting small{display:block}.demo-greeting strong{font-family:'Be Vietnam Pro',sans-serif;font-size:13px}.demo-greeting small{font-size:10px;color:#607462;margin-top:2px}
.demo-phone-shell .demo-app{display:flex;flex-direction:column;min-height:0;min-width:0;flex:1;border:0;border-radius:0;box-shadow:none;background:#fbfcf7;overflow:hidden}
.demo-phone-shell .demo-sidebar{display:none}
.demo-phone-shell .demo-content{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1}
.demo-phone-shell .demo-topbar{height:31px;padding:0 20px;border:0;font-size:8px;flex:none;background:#fbfcf7}
.demo-phone-shell .demo-topbar>span:first-child{display:none}
.demo-phone-shell .demo-topbar-right{margin-left:auto;font-size:8px;color:#4b6e4d}
.demo-phone-shell .tab-panel{padding:7px 19px 25px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1;min-height:0}
.demo-phone-shell .panel-heading{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:15px}
.demo-phone-shell .panel-heading h3{font-size:23px;line-height:1.23;margin:4px 0}.demo-phone-shell .panel-heading p{font-size:11px;line-height:1.5}
.demo-phone-shell .panel-action{align-self:flex-start;min-height:38px;font-size:10px}
.demo-phone-shell .stat-grid{gap:6px;margin-bottom:15px}
.demo-phone-shell .stat-card{padding:10px 8px}.demo-phone-shell .stat-card span{font-size:9px;min-height:25px}.demo-phone-shell .stat-card strong{font-size:15px}
.demo-phone-shell .content-toolbar{flex-direction:column;align-items:stretch;gap:9px}
.demo-phone-shell .filter-chips{overflow-x:auto;scrollbar-width:none}.demo-phone-shell .chip{min-height:38px;font-size:10px;padding:7px 10px}
.demo-phone-shell .search-box{min-height:38px}.demo-phone-shell .search-box input{width:100%;font-size:11px}
.demo-phone-shell .food-list,.demo-phone-shell .recipe-list{grid-template-columns:1fr;gap:8px}
.demo-phone-shell .food-item{padding:10px}.demo-phone-shell .food-item-icon{width:36px;height:36px}.demo-phone-shell .food-item strong{font-size:11px}.demo-phone-shell .food-item small{font-size:9px}.demo-phone-shell .expiry-badge{font-size:8px}
.demo-phone-shell .recipe-card{min-height:0;padding:15px}.demo-phone-shell .recipe-card h3{font-size:16px}.demo-phone-shell .recipe-card p{font-size:11px}.demo-phone-shell .recipe-card .button{white-space:normal;text-align:left;min-height:38px}
.demo-phone-shell .recipe-highlight{font-size:9px;line-height:1.5;padding:10px 12px}
.demo-phone-shell .shopping-form,.demo-phone-shell .expense-form{flex-wrap:wrap;gap:8px}.demo-phone-shell .shopping-form input,.demo-phone-shell .expense-form input:first-child{flex-basis:100%;min-width:0}.demo-phone-shell .shopping-form .button,.demo-phone-shell .expense-form .button{width:100%;min-height:40px}.demo-phone-shell .expense-form input:nth-child(2){width:100%}
.demo-phone-shell .budget-card{padding:17px}.demo-phone-shell .budget-card strong{font-size:29px}.demo-phone-shell .budget-subtitle{font-size:13px}
.demo-phone-shell .demo-tabs{height:69px;min-height:69px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:3px 6px 8px;border-top:1px solid #e3eadd;background:#fffefa;overflow:visible}
.demo-phone-shell .demo-tabs button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:100%;height:58px;min-height:0;padding:4px 1px;border-radius:9px;background:transparent;color:#687c6d;font-size:0;line-height:1.2;text-align:center;white-space:normal}
.demo-phone-shell .demo-tabs button .icon{width:19px;height:19px}
.demo-phone-shell .demo-tabs button:after{font-size:9px;font-weight:700}
.demo-phone-shell #tab-pantry:after{content:'Tủ lạnh'}.demo-phone-shell #tab-recipes:after{content:'Món ăn'}.demo-phone-shell #tab-shopping:after{content:'Đi chợ'}.demo-phone-shell #tab-budget:after{content:'Chi tiêu'}
.demo-phone-shell .demo-tabs button[aria-selected=true]{color:#1e5631;background:#e6f2d6;box-shadow:none}
.demo-phone-shell .demo-tabs button:hover{color:#1e5631;background:#f0f7e7}
.demo-flow{align-self:center;max-width:440px}.flow-kicker{font-size:10px;letter-spacing:.14em;color:#4c7643;font-weight:800}.demo-flow h3{font-size:clamp(29px,2.8vw,43px);line-height:1.25;margin:18px 0 15px}.demo-flow>p{line-height:1.8;color:#4b6350;font-size:14px;max-width:385px}
.demo-flow ol{list-style:none;padding:0;margin:30px 0 22px}.demo-flow li{display:flex;gap:17px;padding:16px 0;border-top:1px solid #dce6d8}.demo-flow li:last-child{border-bottom:1px solid #dce6d8}.demo-flow li>span{font-family:'Be Vietnam Pro',sans-serif;font-size:12px;font-weight:800;color:#5d8d48;padding-top:2px}.demo-flow strong,.demo-flow small{display:block}.demo-flow strong{font-size:14px}.demo-flow small{font-size:12px;color:#58725e;margin-top:3px;line-height:1.5}.flow-privacy{font-size:10px;letter-spacing:.07em;color:#527353;font-weight:800}
.demo-disclaimer{max-width:660px;margin:25px auto 0;line-height:1.6}
@media(max-width:800px){.demo-layout{grid-template-columns:minmax(0,1fr);gap:40px}.demo-flow{width:min(100%,480px)}.demo-phone-shell{height:720px}.demo-flow h3{font-size:32px}}
@media(max-width:560px){.demo-layout{gap:42px}.demo-phone-shell{width:min(100%,370px);height:min(740px,calc(100svh - 95px));min-height:620px;border-width:6px;border-radius:38px}.demo-phone-shell .tab-panel{padding-inline:15px}.demo-flow{padding:0 3px}.demo-flow h3{font-size:30px}.demo-phone-shell .demo-tabs button:after{font-size:8px}}
@media(max-width:350px){.demo-phone-shell .stat-card span{font-size:8px}.demo-phone-shell .stat-card strong{font-size:13px}.demo-phone-shell .expiry-badge{font-size:7px;padding:5px 4px}}
.demo-flow li>span{color:#396539}
.account-panel { background: #fffdf6; border: 1px solid #dce4d5; border-radius: 20px; padding: 24px; margin-bottom: 24px; width: 100%; }
.account-panel form { display: grid; gap: 10px; }
.account-panel input { width: 100%; min-width: 0; box-sizing: border-box; padding: 12px; border: 1px solid #b7c6b1; border-radius: 10px; font: inherit; }
.account-panel p { margin: 12px 0; }
.account-panel .account-note { font-size: 13px; }
.account-panel button:disabled { opacity: .6; cursor: wait; }
.account-panel select { max-width: 100%; padding: 10px; margin: 10px 0; font: inherit; }
.account-panel [hidden] { display: none !important; }