@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{--blue:#0755ff;--navy:#081744;--text:#52688d;--line:#e2ecfa;--pale:#eaf7ff}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;font:14px/1.7 'Be Vietnam Pro',Arial,sans-serif;color:var(--navy)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}img{max-width:100%}svg{width:22px;height:22px;flex-shrink:0}h1,h2,h3,h4,h5,p{margin:0}h1,h2,h3,h4{line-height:1.28;letter-spacing:-.04em}h2{font-size:32px;font-weight:800}p{color:var(--text)}.container{width:min(1440px,92%);margin:auto}.section{padding:40px 0}.center{text-align:center}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:7px;border:1px solid transparent;padding:12px 21px;min-height:47px;font-size:13px;font-weight:600;transition:transform .18s,box-shadow .18s;white-space:nowrap}.button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0755ff26}.button svg{width:18px;height:18px}.blue{background:var(--blue);color:white}.outline{border-color:var(--blue);background:#ffffffda;color:var(--blue)}.white{background:white;color:var(--blue)}.header{position:absolute;inset:0 0 auto;height:91px;z-index:10}.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:block;flex-shrink:0}.brand img{display:block;width:205px;height:72px;object-fit:contain}.nav nav{display:flex;align-items:center;gap:27px;font-size:13px;font-weight:500}.nav nav a:hover{color:var(--blue)}.nav-actions{display:flex;gap:12px}.nav-actions .button{font-size:12px;padding:8px 17px;min-height:40px}.menu-button{display:none}.hero{position:relative;overflow:hidden;background:#f5fbff}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#fffffffc 27%,#ffffff50 52%,#ffffff00 76%),url('assets/backgrounds/hero-grocery-background.webp') center/cover}.hero-grid{position:relative;display:grid;grid-template-columns:44% 56%;min-height:680px;padding-top:95px}.hero-copy{z-index:4;align-self:center;padding:30px 0 65px}.eyebrow{display:inline-block;color:#0755de;background:#d9eaff;border-radius:30px;padding:7px 14px;font-size:11px;font-weight:700;margin-bottom:18px}h1{font-size:clamp(34px,3.5vw,54px);line-height:1.13;font-weight:800;letter-spacing:-.06em}h1 span{color:var(--blue)}.hero-copy>p{font-size:16px;color:#102855;margin-top:21px;max-width:500px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.trust{display:flex;gap:20px;margin-top:27px;font-size:12px}.trust span{display:flex;align-items:center;gap:7px}.trust svg,.check-list svg{color:#fff;background:#02ad70;border-radius:50%;padding:3px;width:23px;height:23px}.hero-art{position:relative;min-width:0}.hero-person{position:absolute;left:-78px;bottom:0;height:600px;width:400px;object-fit:contain;object-position:bottom;z-index:2}.hero-dashboard{position:absolute;width:650px;right:-80px;top:76px;transform:perspective(1200px) rotateY(-8deg) rotateZ(1deg);z-index:1}.dashboard{display:flex;background:white;border:7px solid #283541;border-radius:13px;box-shadow:0 10px 25px #224e8627;overflow:hidden;min-width:0}.dashboard aside{width:112px;background:#07427e;color:#e4effe;flex-shrink:0;padding:14px 0;font-size:8px}.dash-logo{font-size:8px;font-weight:800;padding:0 8px 16px;color:white}.dashboard aside>span{display:block;padding:8px 7px}.dashboard aside>span.active{background:#0755ff}.dash-content{flex:1;min-width:0;background:#f8faff;padding:0 10px 12px}.dash-toolbar{height:35px;border-bottom:1px solid #e6ecf4;font-size:8px;color:#9aaac0;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.dash-toolbar span{color:#366bd6}.dash-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;gap:10px;font-size:13px}.demo-tag{font-size:6px;letter-spacing:1px;background:#edf2fc;color:#8b9ab0;padding:2px 4px;border-radius:3px}.dash-grid{display:grid;grid-template-columns:43% 57%;min-height:280px;background:white;border:1px solid #edf2fa;border-radius:5px;overflow:hidden}.outlet-list{padding:10px 6px;min-width:0}.outlet-list>b{display:block;font-size:9px;margin-bottom:7px}.outlet{display:flex;align-items:center;gap:5px;border:0;border-radius:5px;padding:9px 4px;width:100%;background:transparent;color:#243d65;text-align:left;min-width:0}.outlet:hover,.outlet.current{background:#f0f6ff}.number{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;color:white;background:#075aff;font-size:10px;flex-shrink:0}.outlet>span:nth-child(2){flex:1;min-width:0}.outlet strong{font-size:7px;display:block;white-space:nowrap}.outlet small{font-size:6px;color:#7a8eac;display:block;margin-top:3px}.outlet em{font-style:normal;font-size:5px;color:#7f90a9;white-space:nowrap;background:#f1f5fb;padding:3px;border-radius:3px}.outlet em.done{background:#dff8ed;color:#039b65}.map-panel{position:relative;background:#e8edf0;overflow:hidden}.map-panel>img{width:100%;height:100%;object-fit:cover;display:block}.selected-place{position:absolute;bottom:10px;left:10px;right:10px;background:#fffffff2;box-shadow:0 3px 9px #26395312;border-radius:6px;padding:8px;display:flex;align-items:center;gap:5px;font-size:7px}.selected-place svg{width:14px;height:14px;color:var(--blue)}.selected-place b{margin-left:auto;color:#00a96c;font-size:6px}.float-stat{position:absolute;bottom:45px;display:flex;align-items:center;gap:12px;padding:14px;background:white;border-radius:13px;box-shadow:0 8px 25px #09385f24;z-index:5;min-width:228px}.float-stat i{height:48px;width:48px;border-radius:11px;background:linear-gradient(135deg,#28dfdf,#009ace);color:#fff;display:grid;place-items:center}.float-stat>div{flex:1}.float-stat small{display:block;font-size:10px;font-weight:600}.float-stat b{font-size:20px;display:block;line-height:1.5}.progress{left:155px}.revenue{right:-30px}.revenue i{background:linear-gradient(135deg,#9b55ff,#4439e8)}.progress-track{display:block;height:6px;width:100%;background:#e7ecee;border-radius:4px}.progress-track>span{display:block;width:60%;background:#00be7d;height:100%;border-radius:4px}.pale{background:#e9f7ff}.features{background:linear-gradient(110deg,#e3f4ff,#edf9ff)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:25px}.feature-grid article{display:flex;gap:17px;align-items:center;min-width:0;background:white;border-radius:16px;padding:20px 19px;min-height:112px}.feature-grid img{width:74px;height:74px;object-fit:contain;flex-shrink:0}.feature-grid h3{font-size:16px;font-weight:700;letter-spacing:-.03em}.feature-grid p{font-size:13px;margin-top:5px}.workflow-grid{display:grid;grid-template-columns:57% 1fr;align-items:center;gap:45px}.workflow-screen{min-width:0}.workflow-screen .dashboard{border-color:#8fa3bc;border-width:6px}.workflow-screen .dashboard aside{width:102px}.workflow-screen .dash-grid{min-height:315px;grid-template-columns:42% 58%}.workflow-screen .dash-heading{font-size:13px}.filters{display:flex;align-items:end;gap:8px;margin:5px 0 10px}.filters label{font-size:8px;color:#5f7393;min-width:0;flex:1}.filters select,.filters input{display:block;width:100%;height:27px;min-width:0;border:1px solid #dfe7f4;border-radius:4px;color:#536b92;background:#fff;padding:2px 5px;font-size:8px}.filter-button{border:0;background:var(--blue);color:white;border-radius:4px;padding:5px 10px;height:27px;font-size:8px}.demo-note{display:block;font-size:9px;color:#8192ac;margin:7px 8px 0}#filter-result{font-size:11px;padding:5px 8px;min-height:21px}.workflow-copy h2{font-size:40px;margin-bottom:23px}.steps{margin:0;padding:0;list-style:none;counter-reset:step}.steps li{position:relative;padding:0 0 30px 62px;counter-increment:step}.steps li:before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:#dbf3ff;display:grid;place-items:center;color:#075aff;font-weight:700;font-size:18px}.steps li h3{font-size:17px;margin-bottom:8px}.steps p{font-size:13px}.steps li:last-child{padding-bottom:0}.mobile-section{overflow:hidden;background:linear-gradient(120deg,#e8f7ff,#eefaff);position:relative}.mobile-section:before{content:'';position:absolute;left:-15%;top:60%;width:130%;height:400px;border:40px solid #bce9ff38;border-radius:50%;transform:rotate(-17deg)}.mobile-grid{display:grid;grid-template-columns:44% 56%;gap:35px;position:relative;min-height:470px;align-items:center}.mobile-copy{padding:35px 0}.mobile-copy h2{font-size:40px}.mobile-copy>p{font-size:15px;margin:22px 0;max-width:520px}.check-list{list-style:none;padding:0;margin:0}.check-list li{display:flex;align-items:center;gap:9px;margin:9px 0;font-size:14px}.phones{display:flex;align-self:end;justify-content:center;gap:20px;transform:translateY(25px);height:490px;padding-top:16px}.phone{position:relative;width:270px;height:520px;flex-shrink:0;border:6px solid #262b30;border-radius:35px;background:#fff;box-shadow:0 0 0 2px #a0abb5,0 8px 25px #2c4f6b2b;overflow:hidden;font-size:10px;padding:11px 12px}.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100px;height:15px;background:#171e24;border-radius:0 0 12px 12px}.phone-status{display:flex;justify-content:space-between;font-size:8px;font-weight:600;margin-bottom:19px}.phone h4{font-size:12px;text-align:center;margin-bottom:12px}.shop-photo{display:block;width:100%;height:125px;object-fit:cover;object-position:right;border-radius:5px}.phone-content{padding-top:10px}.green-tag{background:#dff9ed;color:#009e5d;font-size:8px;border-radius:4px;padding:2px 5px;display:inline-block}.phone-content>b{display:block;margin:6px 0 3px;font-size:12px}.phone-content>small{color:#7990ac;font-size:8px}.phone-tools{display:flex;margin:14px 0;gap:8px}.phone-tools>span{border:1px solid #e5edf8;padding:7px 5px;border-radius:6px;flex:1;text-align:center;color:var(--blue);font-size:17px}.phone-tools small{display:block;font-size:7px}.phone h5{font-size:9px;margin-bottom:8px}.phone h5 span{color:#8196b2}.shop-thumbs{display:flex;gap:8px}.shop-thumbs img{width:calc(50% - 4px);height:70px;object-fit:cover;object-position:right;border-radius:5px}.phone-info{display:flex;justify-content:space-between;font-size:8px;margin-top:13px;border-top:1px solid #edf2fa;padding-top:9px}.phone-info span,.phone-bottom{color:#8798ac}.phone-bottom{text-align:center;font-size:7px;margin-top:10px}.product-search input{border:0;background:#f1f5fb;color:#314c74;border-radius:4px;width:100%;font-size:8px;padding:6px}.categories{display:flex;gap:5px;margin:10px 0}.categories span{background:#f1f5fb;padding:4px 9px;border-radius:4px;color:#617798;font-size:7px}.categories span:first-child{background:var(--blue);color:white}.product{display:flex;align-items:center;gap:5px;border-bottom:1px solid #edf2fa;padding:12px 0}.product-pic{font-size:29px;display:block;width:35px}.product-text{flex:1;min-width:0}.product-text b{font-size:8px;display:block}.product-text small{font-size:7px;color:#8798ad;display:block;margin:3px 0}.product-text strong{font-size:8px;color:#ed466d}.quantity{display:flex;align-items:center;gap:5px}.quantity button{border:1px solid #dae4f2;background:#f4f7fc;color:#3563a4;border-radius:3px;width:19px;height:21px;line-height:1;font-size:12px;padding:0}.quantity output{font-size:8px;width:10px;text-align:center}.order-total{display:flex;justify-content:space-between;margin:17px 0 10px;align-items:center;font-size:9px}.order-total b{color:var(--blue);font-size:13px}.phone-action{display:block;width:100%;border:0;border-radius:5px;background:var(--blue);color:white;padding:8px;font-size:10px}.phone-demo{display:block;text-align:center;font-size:7px;color:#8a98b0;margin-top:9px}.order-feedback{color:#009f6b;font-size:8px;min-height:14px;margin-top:8px}.benefits{padding:25px 0}.benefits h2{font-size:27px;margin-bottom:22px}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.benefit-grid article{display:flex;gap:10px;align-items:center}.benefit-grid img{width:70px;height:70px;object-fit:contain;flex-shrink:0}.benefit-grid h3{font-size:13px;letter-spacing:-.03em}.benefit-grid p{font-size:11px;margin-top:5px;line-height:1.7}.faq{padding-top:20px}.faq .container{max-width:900px}.faq h2{font-size:26px;text-align:center;margin-bottom:22px}details{padding:15px 0;border-bottom:1px solid var(--line)}summary{font-weight:600;cursor:pointer;font-size:14px}details p{font-size:13px;margin-top:12px}.cta{position:relative;background:#034da8 url('assets/backgrounds/cta-grocery-background.webp') center/cover;color:#fff;overflow:hidden}.cta-inner{position:relative;display:flex;align-items:center;min-height:230px}.cta-copy{position:relative;z-index:2;width:67%;padding:25px 0}.cta h2{font-size:31px}.cta p{color:#e0eaff;font-size:13px;margin-top:9px;max-width:620px}.cta .button{font-size:12px;margin-top:18px;padding:9px 18px;min-height:39px}.cta-people{position:absolute;bottom:-25px;right:-15px;height:285px;width:430px;object-fit:contain;object-position:bottom}.footer{padding:42px 0 18px;background:#fff}.footer-grid{display:grid;grid-template-columns:1.3fr 1.3fr 1fr 2fr;gap:30px}.eco-links{display:grid;grid-template-columns:repeat(2,max-content);grid-auto-flow:column;grid-template-rows:repeat(5,auto);column-gap:44px;row-gap:8px;padding-top:8px}.eco-links a{display:block;color:#6d82a4;font-size:13px;margin:0;white-space:nowrap}.eco-links a:before{content:"- "}.eco-links a:hover{color:var(--blue)}.footer .brand img{width:190px;height:68px;object-position:left}.footer h3{font-size:15px;margin:10px 0 15px;letter-spacing:-.015em}.footer-grid>div>a{display:block;color:#6d82a4;font-size:13px;margin:8px 0}.footer-grid>div>a:hover{color:var(--blue)}.footer-brand p{font-size:13px;max-width:210px;margin-top:10px}.contact p{display:flex;gap:12px;align-items:flex-start;font-size:13px;margin:13px 0}.contact svg{color:var(--blue);width:19px;height:19px;margin-top:3px}.contact strong{font-weight:600;color:#0c2d5c}.footer-bottom{border-top:1px solid #dce7f9;display:flex;justify-content:space-between;gap:20px;padding-top:20px;margin-top:35px;font-size:11px;color:#7489aa}.footer-bottom>a{color:var(--blue);white-space:nowrap}.skip{position:absolute;top:-100px;padding:10px;background:white;z-index:30}.skip:focus{top:5px}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}:focus-visible{outline:3px solid #ffbc2e;outline-offset:4px}
@media(min-width:1600px){.hero-grid{min-height:720px}.hero-person{height:635px;width:424px;left:-80px}.hero-dashboard{width:710px;right:-80px;top:80px}.hero-dashboard .dash-grid{min-height:320px}.hero-dashboard .dashboard{border-width:8px}.hero-dashboard .outlet{padding:12px 4px}.float-stat{bottom:45px}.progress{left:210px}.revenue{right:-45px}}
@media(max-width:1200px){.brand img{width:170px}.nav{gap:15px}.nav nav{gap:16px;font-size:12px}.nav-actions{gap:8px}.nav-actions .button{padding:8px 12px;font-size:10px}.hero-grid{min-height:610px}.eyebrow{font-size:9px}.hero-copy>p{font-size:14px}.hero-actions .button{font-size:11px;padding:10px 13px}.hero-person{height:530px;width:353px;left:-68px}.hero-dashboard{width:550px;top:75px;right:-70px}.hero-dashboard .dashboard aside{width:94px}.hero-dashboard .dash-grid{min-height:250px;grid-template-columns:42% 58%}.float-stat{min-width:185px;padding:11px;gap:8px;bottom:35px}.float-stat i{height:38px;width:38px}.float-stat b{font-size:16px}.float-stat small{font-size:8px}.progress{left:120px}.revenue{right:-10px}.trust{gap:14px;font-size:10px}.feature-grid article{padding:17px 13px;gap:10px}.feature-grid h3{font-size:14px}.feature-grid p{font-size:11px}.feature-grid img{width:65px;height:65px}.workflow-grid{gap:25px}.workflow-copy h2,.mobile-copy h2{font-size:32px}.steps li{padding-left:52px;padding-bottom:24px}.steps h3{font-size:15px!important}.steps p{font-size:12px}.workflow-screen .dashboard aside{width:87px}.workflow-screen .dash-grid{min-height:290px}.workflow-screen .outlet{flex-wrap:wrap}.workflow-screen .outlet em{margin-left:24px}.phones{gap:15px;height:450px}.phone{width:235px;height:490px}.mobile-grid{gap:20px;min-height:430px}.mobile-copy>p{font-size:13px}.check-list li{font-size:12px}.shop-photo{height:105px}.product-pic{font-size:23px;width:27px}.quantity{gap:3px}.quantity button{width:17px}.benefit-grid{gap:12px}.benefit-grid img{width:58px;height:58px}.benefit-grid h3{font-size:11px}.benefit-grid p{font-size:10px}.cta h2{font-size:25px}.cta-people{right:-20px;width:350px;height:250px}.cta-copy{width:66%}.cta p{font-size:12px}.footer-grid{gap:20px;grid-template-columns:1.2fr 1.5fr .8fr 1.9fr}.eco-links{column-gap:28px}.eco-links a{font-size:11px}.footer .brand img{width:150px}.footer h3{font-size:13px}.footer-grid>div>a,.footer p{font-size:11px}}
@media(max-width:960px){.header{height:76px;background:#ffffffed}.nav nav{display:none;position:absolute;top:76px;left:0;right:0;background:white;padding:20px 5%;box-shadow:0 12px 20px #1c335b1a}.nav nav.open{display:flex;flex-direction:column;align-items:flex-start}.menu-button{display:flex;border:0;background:transparent;color:var(--blue);padding:8px;margin-left:auto}.nav-actions .outline{display:none}.brand img{height:63px}.hero-grid{grid-template-columns:1fr;min-height:0;padding-top:76px}.hero-copy{padding:32px 0 20px;text-align:center}.hero-bg{background:linear-gradient(180deg,#fff 15%,#ffffffde 44%,#ffffff10 100%),url('assets/backgrounds/hero-grocery-background.webp') center bottom/cover}.hero-copy>p{margin:18px auto 0}.desktop-br{display:none}h1{font-size:43px;line-height:1.2}.hero-actions,.trust{justify-content:center}.hero-art{width:700px;max-width:100%;margin:auto;height:465px}.hero-person{left:0;height:490px;width:327px}.hero-dashboard{right:-15px;top:35px;width:520px}.hero-dashboard .dash-grid{min-height:260px}.progress{left:240px;bottom:30px}.revenue{right:-10px;bottom:30px}.hero-copy .eyebrow{font-size:10px}.feature-grid{gap:12px}.feature-grid article{align-items:flex-start;flex-direction:column}.feature-grid h3{font-size:14px}.feature-grid p{font-size:12px}.workflow-grid{grid-template-columns:1fr}.workflow-copy{order:-1}.workflow-copy h2 br{display:none}.workflow-copy h2{text-align:center;font-size:32px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.steps li{padding:56px 0 0}.workflow-screen{width:100%;max-width:750px;margin:auto}.workflow-screen .dash-grid{min-height:330px}.workflow-screen .outlet{flex-wrap:nowrap;padding:12px 4px}.workflow-screen .outlet em{margin:0}.mobile-grid{grid-template-columns:40% 60%;gap:15px}.mobile-copy h2{font-size:28px}.mobile-copy>p{font-size:12px}.phones{transform:scale(.86) translateY(58px);transform-origin:bottom center;width:485px;position:relative;left:50%;margin-left:-242px;height:450px}.benefit-grid{grid-template-columns:repeat(2,1fr);gap:20px}.benefit-grid h3{font-size:14px}.benefit-grid p{font-size:12px}.benefit-grid img{height:65px;width:65px}.cta-copy{width:65%;padding:30px 0}.cta h2{font-size:25px}.cta-people{right:-55px;width:325px;height:240px}.cta p{max-width:400px;font-size:11px}.footer-grid{grid-template-columns:1.2fr 1fr 1fr;gap:20px 30px}.footer-grid .contact{grid-column:2/4}.footer-grid .footer-brand{grid-row:1/3}.footer .brand img{width:170px}.footer h3{font-size:14px}.footer-grid>div>a,.footer p,.eco-links a{font-size:12px}.footer-bottom{flex-wrap:wrap;font-size:10px}}
@media(max-width:640px){body{font-size:14px}.container{width:90%}.header{height:70px}.nav nav{top:70px}.brand img{width:160px;height:60px}.nav-actions{display:none}.hero-grid{padding-top:70px}.hero-copy{padding:24px 0 8px}.hero-copy .eyebrow{font-size:8px;padding:6px 10px;margin-bottom:15px}h1{font-size:clamp(28px,8vw,42px);letter-spacing:-.06em}.hero-copy>p{font-size:13px;max-width:350px;margin-top:15px}.hero-actions{gap:10px;margin-top:20px}.hero-actions .button{font-size:10px;padding:10px 11px;min-height:44px}.trust{font-size:9px;gap:12px;margin-top:18px}.trust svg{width:20px;height:20px}.hero-art{height:340px;width:100%;max-width:440px}.hero-person{height:344px;width:229px;left:-24px}.hero-dashboard{width:430px;top:34px;right:-85px;transform:scale(.76) perspective(1000px) rotateY(-8deg);transform-origin:top right}.hero-dashboard .dash-grid{min-height:260px}.hero-dashboard .dashboard{border-width:5px}.float-stat{padding:8px;gap:6px;min-width:135px;border-radius:8px;bottom:16px}.float-stat i{width:28px;height:28px;border-radius:7px}.float-stat i svg{width:18px;height:18px}.float-stat b{font-size:12px}.float-stat small{font-size:6px}.progress{left:105px;bottom:15px}.revenue{right:-5px;bottom:75px;min-width:143px}.section{padding:28px 0}h2{font-size:25px}.feature-grid{grid-template-columns:1fr;margin-top:20px;gap:11px}.feature-grid article{flex-direction:row;align-items:center;padding:15px 14px;gap:14px;min-height:90px;border-radius:12px}.feature-grid h3{font-size:15px}.feature-grid p{font-size:12px}.feature-grid img{width:65px;height:65px}.workflow-grid{gap:25px}.workflow-copy h2{font-size:29px;text-align:left}.workflow-copy h2 br{display:block}.steps{display:block;margin-top:22px}.steps li{padding:0 0 23px 52px}.steps li:before{width:37px;height:37px;font-size:16px}.steps li:last-child{padding-bottom:0}.steps p{font-size:13px}.workflow-screen .dashboard{border-width:4px;border-radius:9px}.workflow-screen .dashboard aside{width:59px;font-size:6px;padding-top:10px}.dash-logo{font-size:5px;padding:0 5px 10px}.workflow-screen .dashboard aside>span{padding:8px 4px;white-space:nowrap;font-size:5px}.workflow-screen .dash-content{padding:0 5px 7px}.dash-heading{font-size:9px!important;margin-bottom:7px}.dash-toolbar{height:25px;font-size:6px;margin-bottom:8px}.demo-tag{font-size:4px;letter-spacing:0}.filters{flex-wrap:wrap;gap:5px}.filters label{font-size:6px}.filters select,.filters input{font-size:6px;padding:1px;height:23px}.filter-button{height:23px;font-size:6px;padding:3px 7px}.workflow-screen .dash-grid{grid-template-columns:1fr;min-height:0}.workflow-screen .outlet-list{padding:5px}.workflow-screen .outlet-list>b{font-size:8px}.workflow-screen .outlet{padding:6px 4px}.workflow-screen .outlet strong{font-size:7px}.workflow-screen .outlet small{font-size:6px}.workflow-screen .outlet em{font-size:6px}.workflow-screen .map-panel{height:225px}.demo-note{font-size:8px;margin-left:0}#filter-result{font-size:10px;padding-left:0}.mobile-grid{grid-template-columns:1fr;gap:0;min-height:0}.mobile-copy{padding:28px 0 0}.mobile-copy h2{font-size:29px}.mobile-copy>p{font-size:13px;margin:17px 0}.check-list li{font-size:12px}.phones{height:440px;transform:scale(.76) translateY(38px);width:540px;margin-left:-270px}.phone{width:258px}.mobile-section{padding-bottom:0}.benefits h2{font-size:24px}.benefit-grid{gap:15px 10px}.benefit-grid article{align-items:flex-start;gap:7px;flex-direction:column}.benefit-grid img{height:60px;width:60px}.benefit-grid h3{font-size:12px}.benefit-grid p{font-size:11px}.faq{padding-top:10px}.faq h2{font-size:24px}summary{font-size:13px}details p{font-size:12px}.cta-inner{min-height:430px;align-items:flex-start}.cta-copy{width:100%;padding-top:28px;text-align:center}.cta h2{font-size:25px}.cta p{font-size:12px;margin-left:auto;margin-right:auto}.cta-people{right:-10px;height:230px;width:345px;bottom:-25px;max-width:95%}.cta{background-position:65% center}.cta:before{content:'';position:absolute;inset:0;background:linear-gradient(#0653b0 25%,#0755a490 65%,transparent)}.footer{padding-top:25px}.footer-grid{grid-template-columns:repeat(2,1fr);gap:25px 20px}.footer-grid .footer-brand{grid-column:1/-1;grid-row:auto}.footer-brand p{max-width:none;margin-top:6px}.footer .brand img{width:175px;height:62px}.footer-grid .contact{grid-column:1/-1}.footer-grid .footer-eco{grid-column:1/-1}.eco-links{column-gap:48px}.footer h3{font-size:14px;margin:0 0 12px}.footer-grid>div>a,.footer p{font-size:12px}.contact p{margin:10px 0}.footer-bottom{margin-top:20px;padding-top:17px;gap:10px;display:flex;flex-direction:column}.footer-bottom>span{font-size:10px}}
@media(max-width:360px){h1{font-size:28px}.hero-art{height:315px}.hero-person{height:320px;width:213px}.hero-dashboard{right:-100px;transform:scale(.68)}.progress{left:92px}.float-stat{min-width:125px}.hero-actions{flex-direction:column;align-items:center}.phones{transform:scale(.67) translateY(35px);height:390px}.trust{gap:8px;font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Product imagery requested by client: standalone transparent PNG assets. */
.hero-dashboard>img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 15px #10295325)}
.workflow-screen>img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 14px #10376c20)}
.phone-images{height:490px;transform:none;align-items:flex-start;padding-top:15px;gap:14px;overflow:hidden}
.phone-images>img{display:block;width:calc(50% - 7px);height:auto;max-height:580px;object-fit:contain;object-position:top}
@media(max-width:1200px){.phone-images{height:450px}.phone-images>img{max-height:520px}}
@media(max-width:960px){.phone-images{height:405px;width:100%;left:auto;margin-left:0;transform:none;gap:10px}.phone-images>img{width:calc(50% - 5px);max-height:none}}
@media(max-width:640px){.phone-images{height:auto;width:100%;left:auto;margin-left:0;transform:none;padding-top:20px;gap:10px;max-height:465px}.phone-images>img{width:calc(50% - 5px);max-height:none}.hero-dashboard{width:440px;top:40px;right:-80px;transform:scale(.78) perspective(1200px) rotateY(-8deg)}.workflow-screen>img{width:100%}}
@media(max-width:360px){.phone-images{height:auto;max-height:400px}.hero-dashboard{right:-95px;transform:scale(.70)}}

/* Section mới: nữ nhân viên thị trường — ảnh người và nền là hai lớp riêng. */
.field-team-section{padding:58px 0;background:#fff;overflow:hidden}
.field-team-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.field-team-visual{position:relative;min-height:640px;isolation:isolate}
.field-team-scene{position:absolute;inset:35px 0 30px;border-radius:26px;background:linear-gradient(180deg,#e8f7ff77 0%,#edf8ff33 42%,#dcefffaa 100%),url('assets/backgrounds/hero-grocery-background.webp') 72% center/cover;z-index:-1}
.field-team-person{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:410px;height:615px;object-fit:contain;object-position:bottom;max-width:94%}
.field-checkin-card,.field-order-card{position:absolute;display:flex;align-items:center;gap:9px;background:#fffffff5;border:1px solid #e4eff9;border-radius:13px;box-shadow:0 10px 28px #16426e15;padding:12px;z-index:2}
.field-checkin-card{top:62px;left:-15px;max-width:320px}.field-order-card{bottom:105px;right:-18px;max-width:330px}
.field-checkin-card img,.field-order-card img{object-fit:contain;flex-shrink:0}
.field-checkin-card strong,.field-order-card strong{display:block;font-size:13px;line-height:1.5;letter-spacing:-.025em}
.field-checkin-card span:not(.field-checkmark),.field-order-card span{display:block;font-size:10px;color:#617c9f;margin-top:3px}
.field-checkmark{height:25px;width:25px;border-radius:50%;background:#00ad75;color:#fff;display:grid;place-items:center;font-size:16px;margin-left:4px;flex-shrink:0}
.field-workflow{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;padding:12px 20px;border-radius:30px;background:#fff;box-shadow:0 6px 24px #16426e15;border:1px solid #e5f0fb;white-space:nowrap;font-size:11px;color:#174a97;font-weight:600}
.field-workflow i{font-style:normal;color:#62a0ff}
.field-team-copy .eyebrow{font-size:10px;margin-bottom:17px}.field-team-copy h2{font-size:37px;line-height:1.3;letter-spacing:-.045em}.field-team-copy h2 span{color:var(--blue)}
.field-team-intro{font-size:14px;line-height:1.85;margin:18px 0 25px}
.field-team-points{display:grid;gap:20px;margin-bottom:26px}
.field-team-points article{display:flex;gap:14px;align-items:flex-start}
.field-point-number{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#eaf4ff;color:#0755ff;font-size:12px;font-weight:700;flex-shrink:0}
.field-team-points h3{font-size:15px;line-height:1.5;letter-spacing:-.025em;margin-bottom:5px}
.field-team-points p{font-size:13px;line-height:1.8}.field-team-caption{font-size:10px;color:#7a91ad;margin-top:13px}
@media(max-width:1200px){.field-team-grid{gap:35px}.field-team-copy h2{font-size:31px}.field-team-visual{min-height:610px}.field-team-person{height:585px;width:390px}.field-checkin-card{left:-5px;top:45px}.field-order-card{right:-8px;bottom:100px}.field-checkin-card strong,.field-order-card strong{font-size:11px}.field-team-intro{font-size:13px}.field-team-points p{font-size:12px}}
@media(max-width:960px){.field-team-grid{gap:25px}.field-team-copy h2{font-size:28px}.field-team-copy .eyebrow{font-size:8px}.field-team-visual{min-height:640px}.field-team-person{height:570px;width:380px;max-width:100%;bottom:30px}.field-order-card{bottom:80px;right:-5px;padding:10px;max-width:260px}.field-checkin-card{top:70px;left:-5px;padding:10px;max-width:260px}.field-checkin-card img,.field-order-card img{width:38px;height:38px}.field-team-points{gap:15px}.field-team-points h3{font-size:14px}.field-team-points article{gap:10px}.field-point-number{width:29px;height:29px;font-size:11px}.field-team-caption{font-size:9px}.field-workflow{gap:9px;padding:11px 15px;font-size:10px}}
@media(max-width:640px){.field-team-section{padding:30px 0}.field-team-grid{grid-template-columns:1fr;gap:27px}.field-team-visual{min-height:505px;order:2}.field-team-person{height:490px;width:327px;max-width:95%}.field-team-scene{inset:20px 0 28px;border-radius:20px}.field-checkin-card{top:40px;left:-5px;max-width:240px}.field-order-card{bottom:85px;right:-5px;max-width:255px}.field-team-copy h2{font-size:29px}.field-team-copy .eyebrow{font-size:8px}.field-team-intro{font-size:13px;margin:15px 0 21px}.field-team-points p{font-size:12px}.field-team-points h3{font-size:14px}.field-team-points{gap:17px}.field-team-copy .button{font-size:12px}.field-team-caption{font-size:9px}.field-workflow{bottom:5px}}

/* ===== Hiệu ứng: rê chuột + bay vào khi cuộn (thêm 31/10) ===== */
:root{--ease:cubic-bezier(.2,.75,.25,1)}
.feature-grid article{border:1px solid transparent;transition:translate .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.feature-grid article:hover{translate:0 -6px;border-color:#cfe2ff;box-shadow:0 14px 32px #0755ff1f}
.feature-grid img,.benefit-grid img{transition:scale .45s var(--ease),rotate .45s var(--ease),filter .45s}
.feature-grid article:hover img,.benefit-grid article:hover img{scale:1.12;rotate:-6deg;filter:drop-shadow(0 8px 12px #0755ff33)}
.feature-grid article h3,.benefit-grid h3{transition:color .25s}
.feature-grid article:hover h3,.benefit-grid article:hover h3{color:var(--blue)}
.benefit-grid article{border-radius:14px;padding:8px;margin:-8px;transition:translate .35s var(--ease),background .35s}
.benefit-grid article:hover{translate:0 -4px;background:#f2f8ff}
.steps li:before{transition:background .3s,color .3s,scale .35s var(--ease),box-shadow .3s}
.steps li:hover:before{background:var(--blue);color:#fff;scale:1.1;box-shadow:0 8px 18px #0755ff40}
.steps li h3{transition:color .25s}.steps li:hover h3{color:var(--blue)}
.hero-dashboard,.workflow-screen{transition:translate .5s var(--ease),scale .5s var(--ease)}
.hero-dashboard:hover{scale:1.02}
.workflow-screen:hover{scale:1.015}
.phone-images>img{transition:translate .4s var(--ease),filter .4s}
.phone-images>img:hover{translate:0 -8px;filter:drop-shadow(0 14px 18px #10376c30)}
.float-stat{transition:scale .3s var(--ease),box-shadow .3s}
.float-stat:hover{scale:1.06;box-shadow:0 14px 34px #09385f38}
.float-stat i{transition:rotate .45s var(--ease)}.float-stat:hover i{rotate:-10deg}
.trust span svg{transition:scale .3s var(--ease)}.trust span:hover svg{scale:1.18}
summary{transition:color .2s}summary:hover{color:var(--blue)}
.footer-grid>div>a,.eco-links a{transition:color .2s,translate .25s var(--ease)}
.footer-grid>div>a:hover,.eco-links a:hover{translate:4px 0}
.contact svg{transition:scale .3s var(--ease)}.contact p:hover svg{scale:1.18}
.nav nav a{position:relative}.nav nav a:after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--blue);scale:0 1;transition:scale .3s var(--ease)}
.nav nav a:hover:after{scale:1 1}
.brand img{transition:scale .3s var(--ease)}.brand:hover img{scale:1.04}

main,.footer{overflow-x:clip}
/* Bay vào khi cuộn: script.js gắn .reveal và thêm .in khi khối vào màn hình */
.js .reveal{opacity:0;transform:translate3d(var(--rx,0),var(--ry,40px),0) scale(var(--rs,1));transition:opacity .75s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s),translate .35s var(--ease),scale .35s var(--ease),rotate .35s var(--ease),box-shadow .35s,border-color .35s,background .35s}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.from-left{--rx:-70px;--ry:0}
.js .reveal.from-right{--rx:70px;--ry:0}
.js .reveal.zoom{--ry:24px;--rs:.92}

/* Đầu trang hiện dần khi vừa mở */
@keyframes rise{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@keyframes slide-in{from{opacity:0;translate:-60px 0}to{opacity:1;translate:0 0}}
@keyframes pop{0%{opacity:0;scale:.6}70%{opacity:1;scale:1.06}100%{opacity:1;scale:1}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
.hero-copy>*{animation:rise .8s var(--ease) backwards}
.hero-copy>:nth-child(2){animation-delay:.1s}.hero-copy>:nth-child(3){animation-delay:.2s}.hero-copy>:nth-child(4){animation-delay:.3s}.hero-copy>:nth-child(5){animation-delay:.4s}
.hero-person{animation:slide-in 1s var(--ease) .2s backwards}
.hero-dashboard{animation:rise 1s var(--ease) .35s backwards}
.float-stat{animation:pop .7s var(--ease) .9s backwards,bob 4s ease-in-out 1.8s infinite}
.float-stat.revenue{animation:pop .7s var(--ease) 1.1s backwards,bob 4.6s ease-in-out 2s infinite}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

/* Section "Đồng hành cùng đội ngũ thị trường" */
.js .reveal-t{opacity:0;translate:var(--tx,0) 50px;transition:opacity .8s var(--ease) var(--d,0s),translate .9s var(--ease) var(--d,0s),scale .6s var(--ease)}
.js .reveal-t.in{opacity:1;translate:0 0}
.field-checkin-card,.field-order-card{transition:scale .35s var(--ease),box-shadow .35s,opacity .75s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.field-checkin-card:hover,.field-order-card:hover{scale:1.05;box-shadow:0 16px 36px #16426e2b}
.field-checkin-card img,.field-order-card img{transition:rotate .45s var(--ease),scale .45s var(--ease)}
.field-checkin-card:hover img,.field-order-card:hover img{rotate:-10deg;scale:1.1}
.field-checkin-card.in,.field-order-card.in{animation:bob 4.4s ease-in-out 1.2s infinite}
.field-order-card.in{animation-duration:5s;animation-delay:1.6s}
.field-checkin-card.in .field-checkmark{animation:pop .6s var(--ease) .9s backwards}
.field-team-person{transition:scale .6s var(--ease),opacity .8s var(--ease) var(--d,0s),translate .9s var(--ease) var(--d,0s)}
.field-team-visual:hover .field-team-person{scale:1.025}
.field-team-scene{transition:opacity .75s var(--ease),transform .9s var(--ease),box-shadow .4s}
.field-team-visual:hover .field-team-scene{box-shadow:0 18px 40px #0755ff1a}
@keyframes nudge{0%,100%{translate:0 0}50%{translate:4px 0}}
.field-workflow i{display:inline-block;animation:nudge 1.6s ease-in-out infinite}
.field-workflow i:nth-of-type(2){animation-delay:.3s}
.field-workflow span{transition:color .2s}.field-workflow span:hover{color:var(--blue)}
.field-team-points article{transition:translate .3s var(--ease),opacity .75s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.field-team-points article:hover{translate:4px 0}
.field-point-number{transition:background .3s,color .3s,scale .35s var(--ease),box-shadow .3s}
.field-team-points article:hover .field-point-number{background:var(--blue);color:#fff;scale:1.1;box-shadow:0 8px 18px #0755ff40}
.field-team-points h3{transition:color .25s}.field-team-points article:hover h3{color:var(--blue)}
@media(max-width:640px){.field-checkin-card{top:200px}}
@media(prefers-reduced-motion:reduce){.js .reveal-t{opacity:1;translate:none}}