@font-face{font-family:BVP;src:url(fonts/bvp-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:BVP;src:url(fonts/bvp-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:BVP;src:url(fonts/bvp-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:BVP,system-ui,sans-serif;color:#1a1a1a;background:#fafaf8;line-height:1.55}
a{color:inherit}img{max-width:100%;display:block}
.w{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:96px 0;border-top:1px solid #ececea}
h1,h2,h3{line-height:1.25;margin:0 0 12px;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(36px,5.6vw,64px)}h2{font-size:clamp(28px,3.6vw,42px)}h3{font-size:18px}
.sub{font-size:18px;color:#555;max-width:660px;margin:0 0 28px}
.eyebrow{font-size:14px;color:#666;margin-bottom:16px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:10px;font-weight:600;text-decoration:none;border:1px solid #1a1a1a;font-size:15px;cursor:pointer;background:none;font-family:inherit}
.btn.p{background:#1a1a1a;color:#fff}.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.micro{font-size:13px;color:#666;margin-top:14px}
nav.top{position:sticky;top:0;z-index:9;background:#fafaf8ee;backdrop-filter:blur(6px);border-bottom:1px solid #ececea}
nav.top .w{display:flex;align-items:center;gap:24px;height:60px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:20px}
.brand img{width:30px;height:30px;border-radius:8px;border:1px solid #ddd}
.brand small{font-weight:400;font-size:11px;color:#777}
.links{display:flex;gap:20px;font-size:14px;margin-left:auto}.links a{text-decoration:none;color:#444}
.lang{border:1px solid #ccc;border-radius:8px;padding:6px 10px;background:none;font:inherit;font-size:13px;cursor:pointer}
nav.top .btn{padding:8px 14px;font-size:14px}
.shot{border:1px solid #ddd;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 2px #0001}
.shot img{height:auto}
.cap{font-size:12px;color:#777;margin-top:8px}
#hero{border-top:0;padding-top:72px}#hero .shot{margin-top:48px}
.hero-m{display:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.chat{background:#fff;border:1px solid #ddd;border-radius:12px;padding:20px}
.msg{margin:0 0 14px}.who{font-size:13px;font-weight:600}.who span{font-weight:400;color:#777}
.bub{display:inline-block;background:#f0f0ee;border-radius:14px;padding:10px 14px;margin-top:4px}
.me .bub{background:#1a1a1a;color:#fff}.me{text-align:right}
.hand{font-size:12px;color:#2f7a3a;border:1px solid #cfe3d1;border-radius:99px;padding:2px 10px;display:inline-block;margin:0 0 14px 4px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.card{border:1px solid #e2e2df;border-radius:12px;background:#fff;padding:20px;display:flex;flex-direction:column;gap:6px}
.card p{margin:0 0 12px;color:#555;font-size:15px}
.card .shot{margin-top:auto;aspect-ratio:16/10}.card .shot img{width:100%;height:100%;object-fit:cover;object-position:left top}
.logos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.logos span{display:inline-flex;align-items:center;gap:6px;border:1px solid #e2e2df;border-radius:8px;padding:5px 9px;font-size:13px;background:#fff}
.logos img{width:18px;height:18px}
.logos em{font-style:normal;font-size:13px;color:#555}
ul.ck{padding:0;list-style:none;margin:0 0 24px}ul.ck li{padding-left:26px;position:relative;margin:8px 0}
ul.ck li:before{content:"";position:absolute;left:2px;top:.65em;width:6px;height:6px;border-radius:50%;background:#6D7C3D}
.zero{font-size:clamp(96px,16vw,180px);font-weight:700;line-height:1;margin:0 0 8px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:36px 0 28px}
.num{font-size:13px;color:#777}
.grid-dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:36px 0}
.dl{border:1px solid #e2e2df;border-radius:12px;padding:20px;background:#fff;display:flex;flex-direction:column;gap:10px}
.dl .hd{display:flex;align-items:center;gap:10px;font-weight:600}.dl .hd img{width:24px;height:24px}
.dl .ext{color:#777;font-size:13px}.dl .btn{align-self:flex-start;padding:8px 14px;font-size:14px}
.badge{font-size:12px;border:1px solid #ccc;border-radius:99px;padding:2px 10px;color:#555;align-self:flex-start}
ol.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0;list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;border-top:2px solid #1a1a1a;padding-top:12px}
ol.steps li:before{content:counter(s,decimal-leading-zero);display:block;font-size:13px;color:#777}
details{border-bottom:1px solid #e2e2df;padding:18px 0}summary{font-weight:600;cursor:pointer;font-size:17px}details p{margin:10px 0 0;color:#555}
.faq{max-width:780px}
#cta{text-align:center}#cta .btns{justify-content:center}
.tex{display:flex;justify-content:center;gap:10px;margin-bottom:28px;opacity:.9}.tex img{width:44px;height:44px}
footer{border-top:1px solid #ececea;padding:28px 0;font-size:14px;color:#555}
footer .w{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
:focus-visible{outline:3px solid #2f7a3a;outline-offset:2px}
@media(max-width:900px){.links a.opt{display:none}.grid3,.grid-dl{grid-template-columns:1fr 1fr}.grid4{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}}
@media(max-width:600px){section{padding:64px 0}.links{display:none}nav.top .w{gap:10px}nav.top .lang{margin-left:auto}
.grid3,.grid-dl,.grid4,ol.steps{grid-template-columns:1fr}.hero-d{display:none}.hero-m{display:block;max-width:330px;margin:40px auto 0!important}.sub{font-size:16px}.tex img{width:32px;height:32px}}
.card .shot{aspect-ratio:auto;height:220px}.card .shot img{object-fit:contain;background:#f4f4f2;object-position:center}
#team .two{align-items:center}
@font-face{font-family:BVP;src:url(fonts/bvp-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
h1,h2,.zero{font-weight:800}h1,h2{line-height:1.3;padding-top:.06em}
.logos span{color:#1a1a1a}
.row{display:grid;grid-template-columns:2fr 3fr;gap:56px;align-items:center;margin-top:64px}
.row.rev .txt{order:2}.row h3{font-size:26px;font-weight:800}.row p{font-size:17px;color:#555}
.row .shot img{width:100%}.dev{margin-top:56px;color:#555}
.primary-cta{background:#1a1a1a;color:#fff}.dlnote{font-size:14px;color:#666}
@media(max-width:900px){.row{grid-template-columns:1fr;gap:20px;margin-top:48px}.row.rev .txt{order:0}}
.row.rev{grid-template-columns:3fr 2fr}@media(max-width:900px){.row.rev{grid-template-columns:1fr}}
.row>*{min-width:0}
.btn.p[aria-disabled=true]{opacity:.75}.soon-i{color:#888}.how li strong{display:block;margin-bottom:6px}.how li .soon{margin-top:8px;display:inline-block}
.tlink{color:#1a1a1a;font-size:14px;text-decoration:underline;text-underline-offset:3px;padding:8px 4px}
nav.top .logo,nav.top a:first-child{white-space:nowrap}nav.top .btn{white-space:nowrap}
.btns .web-main{order:2}.btns .main-contact{order:1}.btns .tlink{order:3}
@media(max-width:480px){nav.top .nav-cta{display:none}}
@media(max-width:600px){nav.top .nav-login{margin-left:auto;padding:6px 10px;font-size:12px}nav.top .nav-login+.lang{margin-left:0}}
.soon-t{font-size:13px;color:#888;text-decoration:none;cursor:default;padding:4px 2px}
.btns .dl-main,.btns .cta-dl{order:3}.btns .web-main.p{order:0}

/* Wordmark leaf: switch position by changing the class on .wm (leaf-t = top-right of final 't', current per Maya / PRODUCT.md l.32; leaf-o = over 'o'). */
.wm{position:relative;display:inline-block}
.wm .lo,.wm .lt{position:relative}
.wm.leaf-o .lo::after,.wm.leaf-t .lt::after{content:"";position:absolute;width:.6em;height:.6em;background:url(img/leaf.svg) center/contain no-repeat}
.wm.leaf-o .lo::after{top:-.45em;left:.1em}
.wm.leaf-t .lt::after{top:-.12em;left:.42em;width:.42em;height:.42em}
.wm.leaf-t{padding-right:.4em}

/* Wordmark v2 (VNbot, Outfit Bold, leaf drawn in SVG). Footer 22px tall so the leaf is ~8px wide (Rex N1). */
.brand img.wmimg{width:auto;height:26px;border:0;border-radius:0}
footer img.wmimg.ft{height:22px;width:auto;vertical-align:middle}

/* Business use cases: option B (no cards, leaf rule, 2 columns) */
.usecases{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 48px;margin:28px 0}
.uc{border-left:3px solid #6D7C3D;padding-left:14px}.uc h3{margin:0 0 4px;font-size:16px}.uc p{margin:0;color:#555;font-size:14px}
@media(max-width:600px){.usecases{grid-template-columns:1fr;gap:20px}}
.links a,nav.top .lang,nav.top .nav-login,nav.top .nav-cta{white-space:nowrap}
@media(min-width:601px){nav.top .w{gap:16px}.links{gap:14px;font-size:13px}nav.top .btn{padding:7px 11px;font-size:13px}}
@media(max-width:1100px){.links a.opt:nth-child(-n+2){display:none}}

/* Nav fit: brand never shrinks and keeps a gap before the links; compact login on phones */
nav.top .brand{flex-shrink:0;margin-right:12px}
nav.top .brand img.wmimg{flex-shrink:0;min-width:max-content}
nav.top .links{flex-shrink:0;white-space:nowrap}
nav.top .btn,nav.top .lang{flex-shrink:0}
@media(min-width:601px){nav.top .brand{margin-right:8px}}
@media(max-width:600px){nav.top .brand{margin-right:0}nav.top .nav-login{padding:5px 8px;font-size:12px;flex-shrink:0}nav.top .lang{padding:5px 8px;font-size:12px;flex-shrink:0}}
@media(max-width:400px){nav.top .w{gap:6px}nav.top .brand img.wmimg{height:22px}nav.top .nav-login{padding:5px 7px;font-size:11px}nav.top .lang{padding:5px 7px;font-size:11px}}

/* Nav items must never overlap or run off-screen: drop the optional links, then the nav CTA, then all links as width shrinks */
@media(max-width:1050px){.links a.opt{display:none}}
@media(min-width:601px) and (max-width:920px){nav.top .nav-cta{display:none}}
@media(min-width:601px) and (max-width:640px){nav.top .links{display:none}nav.top .nav-login{margin-left:auto}}