@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');:root{--navy:#071a33;--yellow:#ffbd19;--ink:#101828;--muted:#667085;--line:#e7e9ec;--surface:#f5f6f7;--white:#fff;font-family:'DM Sans',system-ui,sans-serif;color:var(--ink)}*{box-sizing:border-box}body{margin:0;background:#eef0f2}button,input{font:inherit}button{cursor:pointer}.app-shell{max-width:1180px;margin:auto;background:#fff;min-height:100vh;box-shadow:0 0 60px #06172b12}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #f0f1f2;background:#fff;position:sticky;top:0;z-index:30}.location{display:flex;align-items:center;gap:12px;border:0;background:none;text-align:left}.pin{width:38px;height:38px;border-radius:50%;background:#fff5d7;display:grid;place-items:center;color:#e89f00}.location span:nth-child(2){display:grid}.location small,.welcome small,.section-head span,.promo small,.bottom-sheet header small,.status-line small{font-size:10px;letter-spacing:.16em;font-weight:800;color:#8c96a3}.location strong{font-weight:800;font-size:15px}.location svg{width:18px;fill:none;stroke:currentColor;stroke-width:2}.top-actions{display:flex;gap:10px}.top-actions button{width:42px;height:42px;border-radius:50%;border:0}.top-actions svg{width:20px;fill:none;stroke:var(--ink);stroke-width:1.8}.avatar{background:var(--navy);color:#fff;font-weight:800}main{padding:40px 36px 120px}.welcome{display:flex;justify-content:space-between;align-items:center}.welcome h1{font:800 clamp(34px,5vw,58px)/1.05 Manrope;margin:6px 0;letter-spacing:-.045em}.welcome img{width:68px;height:68px;border-radius:18px}.quick-services{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:32px 0}.service-card{border:1px solid var(--line);background:#fff;border-radius:20px;padding:22px;text-align:left;display:grid;grid-template-columns:auto 1fr auto;column-gap:15px;align-items:center;transition:.2s}.service-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px #071a3312}.service-card.primary-card{background:var(--navy);color:#fff;border-color:var(--navy)}.service-icon{grid-row:1/3;width:52px;height:52px;border-radius:15px;background:var(--surface);display:grid;place-items:center;font-size:24px}.primary-card .service-icon{background:var(--yellow);color:var(--navy)}.service-card strong{font:800 18px Manrope}.service-card small{color:var(--muted);margin-top:3px}.primary-card small{color:#afbed0}.service-card i{grid-column:3;grid-row:1/3;font-style:normal;font-size:23px}.ride-panel{background:var(--surface);border-radius:26px;padding:28px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.section-head h2{font:800 25px Manrope;margin:5px 0}.section-head button{border:0;background:none;font-weight:800;color:var(--navy)}.route-card{background:#fff;border-radius:18px;padding:7px 18px}.route-row{height:70px;width:100%;border:0;background:none;display:flex;align-items:center;text-align:left;gap:14px}.route-row i{width:11px;height:11px;border:3px solid var(--navy);border-radius:50%}.route-row i.destination{border-color:var(--yellow);border-radius:2px}.route-row span{display:grid;flex:1}.route-row small{font-size:9px;letter-spacing:.13em;color:#98a2b3;font-weight:800}.route-row strong{margin-top:3px}.route-row b{font-size:24px}.route-line{height:1px;background:var(--line);margin-left:25px}.cta{margin-top:14px;border:0;border-radius:14px;background:var(--yellow);color:var(--navy);width:100%;padding:17px 20px;font-weight:800;display:flex;justify-content:space-between}.promo{margin:28px 0;background:var(--navy);color:#fff;border-radius:26px;padding:36px;position:relative;overflow:hidden}.promo h2{font:800 clamp(28px,4vw,42px)/1.1 Manrope;margin:8px 0}.promo p{color:#bdc8d5}.promo button{border:0;background:#fff;color:var(--navy);padding:13px 17px;border-radius:12px;font-weight:800}.promo-orbit{position:absolute;right:-40px;top:-80px;width:340px;height:340px;border:70px solid #102e53;border-radius:50%;display:grid;place-items:center}.promo-orbit img{width:95px;border-radius:26px;transform:rotate(-8deg);box-shadow:0 20px 50px #0005}.nearby{margin-top:32px}.merchant-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.merchant-row article{position:relative}.food-photo{height:180px;border-radius:18px;background-size:cover;background-position:center;position:relative}.food-photo.one{background-image:linear-gradient(15deg,#081a3166,transparent),url('/assets/food.jpg')}.food-photo.two{background-image:linear-gradient(15deg,#081a3166,transparent),url('/assets/food.jpg');background-position:70% center}.food-photo.three{background:linear-gradient(135deg,#ffcf58,#e49a10)}.food-photo em{position:absolute;top:12px;left:12px;background:#fff;color:var(--navy);font-style:normal;font-size:10px;font-weight:900;padding:7px 9px;border-radius:7px}.merchant-row h3{font:800 17px Manrope;margin:10px 0 2px}.merchant-row p{color:var(--muted);margin:0;font-size:13px}.merchant-row b{position:absolute;right:10px;bottom:0;font-size:12px}.bottom-nav{height:76px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:1180px;width:100%;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;z-index:40}.bottom-nav button{border:0;background:none;color:#98a2b3;display:grid;place-items:center;padding:9px 25px;font-size:20px}.bottom-nav button span{font-size:11px}.bottom-nav button.active{color:var(--navy)}#splash{position:fixed;inset:0;background:var(--navy);z-index:100;display:grid;place-content:center;text-align:center;transition:.6s}.splash-done{opacity:0;visibility:hidden;transform:scale(1.03)}#splash img{width:min(56vw,320px)}#splash span{color:var(--yellow);font-size:10px;letter-spacing:.36em;font-weight:800;margin-top:22px}.sheet-backdrop{position:fixed;inset:0;background:#071a3370;z-index:60}.bottom-sheet{position:fixed;z-index:61;bottom:0;left:50%;transform:translate(-50%,110%);width:min(680px,100%);background:#fff;border-radius:28px 28px 0 0;padding:12px 24px 30px;transition:.3s;max-height:88vh;overflow:auto}.bottom-sheet.open{transform:translate(-50%,0)}.handle,.drag{width:42px;height:5px;background:#d0d5dd;border-radius:9px;margin:0 auto 20px}.bottom-sheet header{display:flex;align-items:center;gap:14px}.bottom-sheet header div{flex:1}.bottom-sheet header h2{font:800 24px Manrope;margin:3px 0 15px}.sheet-back,.sheet-close{border:0;background:var(--surface);border-radius:50%;width:38px;height:38px;font-size:23px}.searchbox{display:flex;align-items:center;background:var(--surface);border-radius:14px;padding:0 16px;margin-bottom:16px}.searchbox input{height:58px;border:0;background:none;outline:none;width:100%}.place{width:100%;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;padding:17px 4px;display:flex;gap:14px}.place i{width:39px;height:39px;border-radius:12px;background:#fff3cc;display:grid;place-items:center;font-style:normal}.place span{display:grid}.place small{color:var(--muted)}.vehicle-option{border:2px solid transparent;background:#fff;border-radius:15px;width:100%;padding:14px;display:flex;align-items:center;gap:14px;margin:8px 0}.vehicle-option.selected{border-color:var(--yellow);background:#fffaf0}.vehicle-art{width:62px;height:48px;background:var(--navy);color:var(--yellow);border-radius:13px;display:grid;place-items:center;font-weight:900}.vehicle-option span{display:grid;text-align:left;flex:1}.vehicle-option small{color:var(--muted)}#tracking{position:fixed;inset:0;background:#e4e9e3;z-index:80}.live-map{height:58%;position:relative;overflow:hidden;background:linear-gradient(35deg,#dfe8df,#f3f0df)}.road{position:absolute;width:140%;height:50px;background:#fff;transform:rotate(-20deg);top:35%;left:-20%}.r2{transform:rotate(35deg);top:55%}.route-path{position:absolute;border:7px solid var(--navy);border-left:0;border-bottom:0;width:48%;height:45%;left:23%;top:26%;border-radius:0 80px 0 0}.map-pin{position:absolute;width:22px;height:22px;background:#fff;border:6px solid var(--navy);border-radius:50%}.map-pin.start{left:22%;top:65%}.map-pin.end{right:25%;top:25%;border-color:var(--yellow)}.driver-car{position:absolute;left:48%;top:42%;background:var(--navy);color:var(--yellow);border:4px solid #fff;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:900}.recenter{position:absolute;right:20px;bottom:20px;border:0;background:#fff;width:46px;height:46px;border-radius:50%}.tracking-card{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:min(680px,100%);background:#fff;border-radius:28px 28px 0 0;padding:12px 24px 25px}.status-line{display:flex;justify-content:space-between}.status-line h2{font:800 26px Manrope;margin:3px 0}.status-line p{color:var(--muted);margin:4px 0 18px}.eta{background:var(--yellow);width:58px;height:58px;border-radius:15px;display:grid;place-content:center;text-align:center;font:800 22px Manrope}.eta small{font-size:8px}.driver-card{display:flex;align-items:center;border:1px solid var(--line);border-radius:16px;padding:13px}.driver-avatar{width:48px;height:48px;border-radius:50%;background:var(--navy);color:white;display:grid;place-items:center;font-weight:800;margin-right:13px}.driver-card div{display:grid;flex:1}.driver-card small{color:var(--muted)}.trip-actions{display:flex;justify-content:space-between;margin-top:18px}.trip-actions button{border:0;background:none;font-size:20px;display:grid;gap:4px;place-items:center}.trip-actions span{font-size:10px}.no-scroll{overflow:hidden}@media(max-width:680px){body{background:#fff}.topbar{height:70px;padding:0 18px}.top-actions #notify{display:none}main{padding:28px 18px 100px}.welcome img{width:52px;height:52px}.quick-services{gap:8px}.service-card{display:flex;flex-direction:column;align-items:flex-start;padding:14px 12px;gap:7px}.service-icon{width:43px;height:43px}.service-card small,.service-card i{display:none}.service-card strong{font-size:15px}.ride-panel{margin:0 -5px;padding:20px;border-radius:22px}.promo{padding:26px 22px}.promo-orbit{right:-170px;opacity:.6}.merchant-row{display:flex;overflow:auto;margin-right:-18px}.merchant-row article{min-width:235px}.food-photo{height:150px}.bottom-nav button{padding:9px 15px}.welcome h1{font-size:34px}}
