Delivery & Order Tracking Apps

.device-cluster { position: relative; height: 560px;  overflow: hidden; }

/* ═══════════════════════════════════════
           DESKTOP — Light Luxury Dashboard
           ═══════════════════════════════════════ */
        .cyber-desktop { position: absolute; top: 0; left: 0; width: 480px; z-index: 3; }
        .cyber-desktop .frame { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 6px 6px 0; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0,0,0,0.04); }
        .cyber-desktop .toolbar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; }
        .cyber-desktop .dot { width: 7px; height: 7px; border-radius: 50%; }
        .cyber-desktop .dot-r { background: #ff5f56; }
        .cyber-desktop .dot-y { background: #ffbd2e; }
        .cyber-desktop .dot-g { background: #27c93f; }
        .cyber-desktop .url-bar { flex: 1; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 3px 10px; font-family: 'Inter', sans-serif; font-size: 8px; color: #9ca3af; margin-left: 8px; letter-spacing: 0.3px; }
        .cyber-desktop .screen { border-radius: 0 0 8px 8px; min-height: 260px; background: #f9fafb; }
        .cyber-desktop .dk-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 10px; border-bottom: 1px solid #e5e7eb; background: #ffffff; }
        .cyber-desktop .dk-header h4 { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: #111827; letter-spacing: -0.2px; }
        .cyber-desktop .dk-add { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; background: #7c3aed; border: none; color: #ffffff; padding: 4px 12px; border-radius: 6px; }
        .cyber-desktop .dk-body { display: flex; }
        .cyber-desktop .dk-sidebar { width: 40px; background: #ffffff; padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; border-right: 1px solid #f3f4f6; }
        .cyber-desktop .dk-sidebar .si { font-size: 14px; opacity: 0.3; color: #6b7280; }
        .cyber-desktop .dk-sidebar .si.active { opacity: 1; color: #7c3aed; }
        .cyber-desktop .dk-kanban { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; overflow: hidden; }
        .cyber-desktop .dk-col { min-width: 0; }
        .cyber-desktop .glass-col-header { font-family: 'Inter', sans-serif; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; padding: 5px 6px; border-radius: 6px; margin-bottom: 5px; color: #6b7280; background: #f3f4f6; }
        .cyber-desktop .glass-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; margin-bottom: 5px; transition: box-shadow 0.2s, border-color 0.2s; }
        .cyber-desktop .glass-card:hover { border-color: #c4b5fd; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08); }
        .cyber-desktop .glass-name { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: #111827; margin-bottom: 2px; }
        .cyber-desktop .glass-price { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; color: #7c3aed; margin-bottom: 2px; }
        .cyber-desktop .glass-sub { font-family: 'Inter', sans-serif; font-size: 7px; color: #9ca3af; }
        .cyber-desktop .glass-tag { display: inline-block; font-family: 'Inter', sans-serif; font-size: 6px; font-weight: 700; padding: 2px 5px; border-radius: 4px; letter-spacing: 0.5px; margin-top: 3px; }
        .cyber-desktop .glass-tag-new { background: #ede9fe; color: #7c3aed; }
        .cyber-desktop .glass-tag-sale { background: #fce7f3; color: #db2777; }
        .cyber-desktop .glass-tag-pop { background: #fef3c7; color: #d97706; }
        .cyber-desktop .glass-tag-ok { background: #d1fae5; color: #059669; }
        .cyber-desktop .stand, .cyber-desktop .base { display: none; }

/* ═══════════════════════════════════════
           TABLET — Cyberpunk Neon (iPad style)
           ═══════════════════════════════════════ */
        .cyber-tablet { position: absolute; top: 100px; right: 30px; width: 280px; z-index: 4; }
        .cyber-tablet .frame { background: linear-gradient(160deg, #d4d4d8, #a8a8ad, #c0c0c4, #d4d4d8); border-radius: 18px; padding: 10px; box-shadow: 0 0 30px rgba(255, 0, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.3), inset 0 0.5px 0 rgba(255,255,255,0.5); position: relative; }
        .cyber-tablet .tb-camera { width: 5px; height: 5px; background: #1a1a2a; border: 1px solid rgba(0,0,0,0.1); border-radius: 50%; margin: 0 auto 6px; }
        .cyber-tablet .screen { border-radius: 8px; min-height: 320px; font-family: 'Orbitron', monospace; background: #0a0a1a; position: relative; overflow: hidden; display: flex; flex-direction: column; }
        .cyber-tablet .screen::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 240, 255, 0.015) 2px, rgba(0, 240, 255, 0.015) 4px); pointer-events: none; z-index: 2; }
        .cyber-tablet .tb-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 10px; border-bottom: 1px solid rgba(255, 0, 255, 0.1); position: relative; z-index: 3; }
        .cyber-tablet .tb-header h4 { font-family: 'Orbitron', monospace; font-size: 12px; font-weight: 700; color: #ff00ff; text-shadow: 0 0 8px rgba(255, 0, 255, 0.6); }
        .cyber-tablet .tb-header .neon-items { font-family: 'Orbitron', monospace; font-size: 10px; font-weight: 700; color: #ffcc00; text-shadow: 0 0 6px rgba(255, 204, 0, 0.5); }
        .cyber-tablet .tb-kanban { display: flex; gap: 6px; padding: 12px 10px; overflow: hidden; position: relative; z-index: 3; flex: 1; }
        .cyber-tablet .neon-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 240, 255, 0.08); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; }
        .cyber-tablet .neon-card .n-name { font-family: 'Orbitron', monospace; font-size: 9px; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 3px; }
        .cyber-tablet .neon-card .n-amount { font-family: 'Orbitron', monospace; font-size: 11px; font-weight: 700; margin-bottom: 3px; }
        .cyber-tablet .neon-card .n-contact { font-size: 8px; color: rgba(255, 255, 255, 0.3); }
        .cyber-tablet .neon-cyan { color: #00f0ff; text-shadow: 0 0 6px rgba(0, 240, 255, 0.6); }
        .cyber-tablet .neon-magenta { color: #ff00ff; text-shadow: 0 0 6px rgba(255, 0, 255, 0.6); }
        .cyber-tablet .neon-gold { color: #ffcc00; text-shadow: 0 0 6px rgba(255, 204, 0, 0.5); }
        .cyber-tablet .tb-total-row { margin-top: 6px; padding: 8px 10px; border-top: 1px solid rgba(255, 0, 255, 0.15); text-align: right; position: relative; z-index: 3; }
        .cyber-tablet .tb-total-label { font-size: 9px; color: rgba(255, 255, 255, 0.4); font-family: 'Orbitron', monospace; }
        .cyber-tablet .tb-total-amount { font-family: 'Orbitron', monospace; font-size: 13px; font-weight: 700; color: #ffcc00; text-shadow: 0 0 6px rgba(255, 204, 0, 0.5); }
        .cyber-tablet .tb-nav { display: flex; justify-content: space-around; padding: 8px 0; border-top: 1px solid rgba(255, 0, 255, 0.08); position: relative; z-index: 3; margin-top: auto; }
        .cyber-tablet .tb-nav span { font-size: 14px; opacity: 0.3; }
        .cyber-tablet .tb-nav span.active { opacity: 1; }
        .cyber-tablet .tb-home-bar { width: 40px; height: 3px; background: rgba(255,255,255,0.15); border-radius: 3px; margin: 4px auto 2px; position: relative; z-index: 3; }

/* ═══════════════════════════════════════
           PHONE — Light Native App (iPhone style)
           ═══════════════════════════════════════ */
        .cyber-phone { position: absolute; top: 190px; right: 10px; width: 180px; z-index: 5; }
        .cyber-phone .frame { background: linear-gradient(160deg, #d4d4d8, #a8a8ad, #bbbbbe, #d4d4d8); border-radius: 32px; padding: 3px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), inset 0 0.5px 0 rgba(255,255,255,0.6), inset 0 -0.5px 0 rgba(0,0,0,0.1); position: relative; }
        .cyber-phone .frame::before { content: ''; position: absolute; right: -1.5px; top: 70px; width: 2px; height: 24px; background: linear-gradient(180deg, #b0b0b4, #909094, #b0b0b4); border-radius: 0 2px 2px 0; }
        .cyber-phone .frame::after { content: ''; position: absolute; left: -1.5px; top: 60px; width: 2px; height: 16px; background: linear-gradient(180deg, #b0b0b4, #909094, #b0b0b4); border-radius: 2px 0 0 2px; }
        .cyber-phone .screen-bezel { background: #000; border-radius: 29px; overflow: hidden; }
        .cyber-phone .dynamic-island { width: 40px; height: 10px; background: #000; border-radius: 10px; margin: 0 auto; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); z-index: 5; }
        .cyber-phone .screen { border-radius: 29px; min-height: 300px; background: #ffffff; overflow: hidden; display: flex; flex-direction: column; position: relative; }
        .cyber-phone .native-status { display: flex; justify-content: space-between; padding: 6px 14px 0; font-family: -apple-system, 'Inter', sans-serif; font-size: 7px; font-weight: 600; color: #1d1d1f; }
        .cyber-phone .native-header { padding: 10px 14px 8px; }
        .cyber-phone .native-header h4 { font-family: -apple-system, 'Inter', sans-serif; font-size: 14px; font-weight: 800; color: #111827; letter-spacing: -0.4px; margin: 0 0 2px; }
        .cyber-phone .native-header .native-accent { font-family: -apple-system, 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: #059669; }
        .cyber-phone .native-progress { display: flex; gap: 0; align-items: center; margin: 0 14px 4px; }
        .cyber-phone .progress-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .cyber-phone .progress-line { flex: 1; height: 2px; border-radius: 1px; }
        .cyber-phone .native-progress-labels { display: flex; justify-content: space-between; padding: 0 14px 10px; }
        .cyber-phone .native-progress-labels span { font-family: -apple-system, 'Inter', sans-serif; font-size: 6px; color: #9ca3af; }
        .cyber-phone .native-progress-labels span.active { color: #059669; font-weight: 600; }
        .cyber-phone .native-content { padding: 0 10px; flex: 1; }
        .cyber-phone .native-card { background: #f9fafb; border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; }
        .cyber-phone .native-label { font-family: -apple-system, 'Inter', sans-serif; font-size: 7px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; }
        .cyber-phone .native-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
        .cyber-phone .native-value { font-family: -apple-system, 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: #374151; }
        .cyber-phone .native-price { font-family: -apple-system, 'Inter', sans-serif; font-size: 9px; font-weight: 700; color: #374151; text-align: right; }
        .cyber-phone .native-success { color: #059669; }
        .cyber-phone .native-pill { display: inline-block; font-family: -apple-system, 'Inter', sans-serif; font-size: 7px; font-weight: 700; padding: 3px 8px; border-radius: 10px; }
        .cyber-phone .pill-success { background: #d1fae5; color: #059669; }
        .cyber-phone .native-total { background: #059669; border-radius: 12px; padding: 10px 12px; margin: 2px 0 0; display: flex; justify-content: space-between; align-items: center; }
        .cyber-phone .native-total-label { font-family: -apple-system, 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.8); }
        .cyber-phone .native-total-amount { font-family: -apple-system, 'Inter', sans-serif; font-size: 14px; font-weight: 800; color: #ffffff; }
        .cyber-phone .native-nav { display: flex; justify-content: space-around; padding: 8px 0 6px; margin-top: auto; }
        .cyber-phone .native-nav span { font-size: 13px; opacity: 0.2; color: #6b7280; }
        .cyber-phone .native-nav span.active { opacity: 1; color: #059669; }
        .cyber-phone .home-bar { width: 50px; height: 3px; background: #1d1d1f; border-radius: 3px; margin: 2px auto 4px; }

.device-column { display: flex; flex-direction: column; }
        .store-badges { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px;  }
        .store-badges img { height: 40px; width: auto; opacity: 0.7; transition: opacity 0.3s; }
        .store-badges img:hover { opacity: 1; }

.use-case-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 169, 150, 0.1); color: #00A695; border: none; padding: 8px 20px; border-radius: 100px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 20px; }
        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        h1 { font-family: 'Work Sans', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.02em; background: linear-gradient(180deg, #006445, #00A695); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: slideUp 0.6s ease-out 0.2s both; }
        .hero-highlight { display: inline; }
        .hero-description { font-size: 16px; line-height: 1.5;  margin-bottom: 36px; color: #000;  }
        .hero-stats { display: flex; gap: 24px; flex-wrap: wrap;  }
        .stat { display: flex; flex-direction: column; }
        .stat-value { font-family: 'Work Sans', sans-serif; font-size: 36px; font-weight: 800; color: #00A695; line-height: 1; margin-bottom: 8px; }
        .stat-label { font-size: 14px; color: #424242; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
        
        /* ── CTA BUTTONS ── */
        .hero-buttons { display: flex; gap: 12px; margin-bottom: 16px; }
        .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 16px 48px; border-radius: 48px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .2s; font-family: 'Work Sans', sans-serif; text-transform: uppercase; letter-spacing: .5px; background: #00A695; color: white; border: 2px solid #00A898; }
        .btn-primary:hover { background: #00786A; border-color: #00786A; text-decoration: none; }
        .btn-outline-hero { display: inline-flex; align-items: center; gap: 8px; padding: 16px 48px; border-radius: 48px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .2s; font-family: 'Work Sans', sans-serif; text-transform: uppercase; letter-spacing: .5px; border: 2px solid #424242; color: #424242; background: transparent; }
        .btn-outline-hero:hover { border-color: #00A695; color: #00A695; text-decoration: none; }
        .hero-sub { font-size: 13px; color: #424242; margin-bottom: 20px; }
        .perks { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; margin-top: 0; margin-bottom: 24px; }
        .perks li { display: flex; align-items: center; gap: 10px; font-family: 'Work Sans', sans-serif; font-size: 16px; color: #000; font-weight: 400; margin: 0; padding: 0; }
        .perks li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #0e9e82; flex-shrink: 0; }
        .arrow { transition: transform 0.3s ease; display: inline-block; }
        .btn-primary:hover .arrow { transform: translateX(4px); }
        @media (max-width: 768px) { .hero-buttons { flex-direction: column; } .hero-buttons a { text-align: center; justify-content: center; } }

.section { padding: 80px 24px; }
        .section-light { background: var(--gray-50); }
        .section-header { max-width: 800px; margin-bottom: 60px; }
        .section-label { display: inline-block; font-size: 13px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; }
        h2 { font-family: 'Work Sans', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: var(--navy); letter-spacing: -0.01em; }
        .section-description { font-size: 18px; color: var(--gray-600); line-height: 1.7; }
        .app-types-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 48px; max-width: 1000px; margin-left: auto; margin-right: auto; }
        .app-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 2px solid var(--gray-100); border-radius: 100px; padding: 12px 24px; font-size: 15px; font-weight: 600; color: var(--navy); transition: all 0.3s ease; cursor: default; }
        .app-chip:hover { border-color: var(--teal); background: rgba(0,152,133,0.05); transform: translateY(-2px); }
        .chip-icon { font-size: 20px; } .chip-text { white-space: nowrap; }
        .problem-solution { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
        .problem-card, .solution-card { padding: 48px; border-radius: 24px; position: relative; }
        .problem-card { background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 100%); border: 2px solid #FFD5D5; }
        .problem-card::before { content: '\26A0\FE0F'; position: absolute; top: 24px; right: 24px; font-size: 32px; opacity: 0.3; }
        .solution-card { background: linear-gradient(135deg, #F0FFF4 0%, #E0F9E8 100%); border: 2px solid #B8F4CC; }
        .solution-card::before { content: '\2713'; position: absolute; top: 24px; right: 24px; font-size: 48px; color: #38A169; opacity: 0.2; font-weight: 700; }
        .card-title { font-family: 'Work Sans', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 16px; color: var(--navy); }
        .card-list { list-style: none; }
        .card-list li { padding: 12px 0 12px 32px; position: relative; color: var(--gray-800); line-height: 1.6; }
        .problem-card .card-list li::before { content: '\2715'; position: absolute; left: 0; color: #E53E3E; font-weight: 700; }
        .solution-card .card-list li::before { content: '\2713'; position: absolute; left: 0; color: #38A169; font-weight: 700; font-size: 18px; }
        .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
        .feature { background: var(--white); padding: 36px; border-radius: 20px; border: 2px solid var(--gray-100); transition: all 0.3s ease; }
        .feature:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,152,133,0.2); }
        .feature-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(0,152,133,0.35); }
        .feature h3 { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--navy); }
        .feature p { color: var(--gray-600); line-height: 1.7; }
        .workflow { background: var(--white); }
        .workflow-steps { display: grid; gap: 0; margin-top: 48px; position: relative; }
        .workflow-step { display: grid; grid-template-columns: 80px 1fr; gap: 32px; padding: 32px 0; position: relative; }
        .workflow-step:not(:last-child)::after { content: ''; position: absolute; left: 39px; top: 80px; bottom: -32px; width: 2px; background: linear-gradient(to bottom, var(--teal) 0%, var(--gray-100) 100%); }
        .step-number { width: 80px; height: 80px; background: var(--teal); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Work Sans', sans-serif; font-size: 32px; font-weight: 800; box-shadow: 0 8px 24px rgba(0,152,133,0.4); position: relative; z-index: 2; }
        .step-content h3 { font-family: 'Work Sans', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 12px; color: var(--navy); }
        .step-content p { color: var(--gray-600); line-height: 1.7; margin-bottom: 16px; }
        .step-details { background: var(--gray-50); padding: 24px; border-radius: 12px; margin-top: 16px; }
        .step-details-title { font-weight: 700; color: var(--navy); margin-bottom: 12px; font-size: 15px; }
        .columns-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
        .column-item { background: var(--white); padding: 12px 16px; border-radius: 8px; font-size: 14px; font-family: 'Courier New', monospace; color: var(--navy); border: 1px solid var(--gray-100); }
        .screens-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
        .screen-item { background: var(--white); padding: 16px; border-radius: 12px; border: 2px solid var(--gray-100); transition: border-color 0.2s; }
        .screen-item:hover { border-color: var(--teal); }
        .screen-title { font-weight: 700; color: var(--navy); margin-bottom: 8px; font-size: 15px; }
        .screen-desc { font-size: 14px; color: var(--gray-600); line-height: 1.5; }
        .benefits { background: var(--navy); color: var(--white); }
        .benefits h2 { color: var(--white); }
        .benefits .section-description { color: rgba(255,255,255,0.8); }
        .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 48px; }
        .benefit-card { background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); padding: 32px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.15); transition: all 0.3s ease; }
        .benefit-card:hover { background: rgba(255,255,255,0.12); transform: translateY(-4px); border-color: var(--gold); }
        .benefit-icon { font-size: 36px; margin-bottom: 16px; }
        .benefit-card h3 { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--gold); }
        .benefit-card p { color: rgba(255,255,255,0.85); line-height: 1.7; }
        .comparison { background: #faf6f0; }
        .comp-table { width: 100%; border-collapse: collapse; background: transparent; margin-top: 48px; }
        .comp-table th { background: transparent; padding: 18px 24px; text-align: left; font-weight: 700; font-size: 15px; color: var(--navy); border-bottom: 2px solid #e0d8ce; }
        .comp-table td { padding: 20px 24px; border-bottom: 1px solid #ebe5dc; font-size: 15px; line-height: 1.6; color: #555; vertical-align: top; }
        .comp-table tr:last-child td { border-bottom: none; }
        .comp-table td:first-child { font-weight: 700; color: var(--navy); width: 160px; }
        .best-practices { background: var(--gray-50); }
        .practices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 48px; }
        .practice-card { background: var(--white); padding: 32px; border-radius: 16px; border-left: 4px solid var(--teal); box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
        .practice-card h3 { font-family: 'Work Sans', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
        .practice-icon { font-size: 20px; }
        .practice-card p { color: var(--gray-600); line-height: 1.7; }
        .requirements { background: var(--white); }
        .requirements-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 48px; }
        .requirement-card { background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%); padding: 32px; border-radius: 16px; border: 2px solid var(--gray-100); display: flex; gap: 20px; align-items: flex-start; }
        .requirement-icon { width: 48px; height: 48px; background: var(--teal); color: var(--white); border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .requirement-content h4 { font-weight: 700; color: var(--navy); margin-bottom: 8px; }
        .requirement-content p { color: var(--gray-600); font-size: 15px; line-height: 1.6; }
        .resources-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
        .resource-card { display: block; background: var(--white); border: 2px solid var(--gray-100); border-radius: 16px; padding: 32px; text-decoration: none; transition: all 0.3s ease; }
        .resource-card:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,152,133,0.1); }
        .resource-type { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--teal); background: rgba(0,152,133,0.08); padding: 4px 12px; border-radius: 100px; margin-bottom: 16px; }
        .resource-card h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.3; }
        .resource-card p { font-size: 15px; color: var(--gray-600); line-height: 1.6; margin-bottom: 16px; }
        .resource-link { font-size: 14px; font-weight: 600; color: var(--teal); }
        @media (max-width: 768px) { .resources-grid { grid-template-columns: 1fr; } }
        .cta-section { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%); padding: 100px 24px; text-align: center; color: var(--white); position: relative; overflow: hidden; }
        .cta-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px); }
        .cta-content { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
        .cta-section h2 { color: var(--white); margin-bottom: 20px; }
        .cta-section p { font-size: 20px; margin-bottom: 40px; opacity: 0.95; line-height: 1.7; }
        .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
        .btn { padding: 18px 40px; border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; border: none; cursor: pointer; font-family: 'Work Sans', sans-serif; }
        .btn-white { background: var(--white); color: var(--teal); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
        .btn-white:hover { background: var(--gray-50); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }
        .btn-outline { background: transparent; color: var(--white); border: 2px solid var(--white); }
        .btn-outline:hover { background: var(--white); color: var(--teal); transform: translateY(-2px); }
        .faq-container { max-width: 900px; margin: 0 auto; }
        .faq-item { background: var(--white); border: 2px solid var(--gray-100); border-radius: 16px; padding: 32px; margin-bottom: 20px; transition: all 0.3s ease; }
        .faq-item:hover { border-color: var(--teal); box-shadow: 0 4px 20px rgba(0,152,133,0.1); }
        .faq-question { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 16px; }
        .faq-answer p { color: var(--gray-600); line-height: 1.7; margin: 0; }
                        @media (max-width: 1100px) { .hero-inner { grid-template-columns: 1fr 440px; } .device-cluster { height: 420px; } .cyber-desktop { width: 400px; } .cyber-tablet { width: 200px; } .cyber-phone { display: none; } }
                        @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; text-align: center; } .hero-content { max-width: 100%; } .device-cluster { height: 360px; max-width: 480px; margin: 0 auto; } .cyber-desktop { width: 100%; max-width: 480px; position: relative; } .cyber-tablet, .cyber-phone { display: none; } .store-badges { justify-content: center; } .hero-stats { justify-content: center; } .use-case-badge { margin-left: auto; margin-right: auto; } }
        @media (max-width: 768px) { .hero { padding: 60px 24px 80px; } .hero-inner { grid-template-columns: 1fr; text-align: center; } .device-cluster { display: none; } .hero-content { max-width: 100%; } .hero-stats { justify-content: center; gap: 32px; } .use-case-badge { margin-left: auto; margin-right: auto; } .comp-table th, .comp-table td { padding: 12px 14px; font-size: 13px; } .comp-table td:first-child { width: 100px; } .problem-solution { grid-template-columns: 1fr; gap: 24px; } .workflow-step { grid-template-columns: 60px 1fr; gap: 20px; } .step-number { width: 60px; height: 60px; font-size: 24px; } .workflow-step:not(:last-child)::after { left: 29px; } .screens-grid { grid-template-columns: 1fr; } .cta-buttons { flex-direction: column; } .btn { width: 100%; justify-content: center; } }
        .arrow { transition: transform 0.3s ease; } .btn:hover .arrow { transform: translateX(4px); }
    </style>
<script type="application/ld+json">
    {"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://www.adalo.com/solutions/delivery-app-builder/#webpage","url":"https://www.adalo.com/solutions/delivery-app-builder","name":"Delivery & Order Tracking Apps | Adalo","description":"Build a custom delivery app for iOS, Android, and web with Adalo's no-code app builder. See every screen on one canvas, preview on any device, and visually direct the AI to build dispatch dashboards, driver apps, and customer order tracking\u2014then publish to the Apple App Store and Google Play.","isPartOf":{"@id":"https://www.adalo.com/#website"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.adalo.com/"},{"@type":"ListItem","position":2,"name":"Solutions","item":"https://www.adalo.com/solutions"},{"@type":"ListItem","position":3,"name":"Delivery App Builder","item":"https://www.adalo.com/solutions/delivery-app-builder"}]},{"@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is Adalo?","acceptedAnswer":{"@type":"Answer","text":"Adalo is the no-code app builder that pairs AI-powered generation with a visual multi-screen canvas, so entrepreneurs and business teams can design, build, and publish custom database-driven apps to the Apple App Store, Google Play Store, and web from a single project \u2014 no code, no developers required."}},{"@type":"Question","name":"Does Adalo support real-time GPS tracking for deliveries?","acceptedAnswer":{"@type":"Answer","text":"Adalo provides status-based order tracking with push notifications at each delivery stage. For live GPS map tracking, you would integrate an external mapping API via Custom Actions. Most small delivery businesses find status-based tracking with notifications covers their needs effectively."}},{"@type":"Question","name":"Can I build a driver app and a customer app from the same project?","acceptedAnswer":{"@type":"Answer","text":"Yes. Adalo builds one version across web, iOS, and Android from a single project. You can create role-based views\u2014dispatchers see the management dashboard, drivers see their delivery queue, and customers see order tracking. All roles share the same relational database."}},{"@type":"Question","name":"How much does it cost to build a delivery app?","acceptedAnswer":{"@type":"Answer","text":"Adalo\u2019s paid plans start at $36/mo with unlimited usage\u2014no caps on orders, drivers, customers, or storage. Compare that to white-label platforms at $100\u2013500/mo plus per-order fees, or custom development at $50,000\u2013200,000 upfront. The free plan includes 500 database records. Zero per-order commissions."}},{"@type":"Question","name":"What can\u2019t an Adalo delivery app do?","acceptedAnswer":{"@type":"Answer","text":"Adalo excels at custom delivery apps with dispatch, driver management, and customer tracking, but live GPS map tracking requires external APIs, automated route optimization needs a dedicated routing service, and built-in payment processing requires connecting Stripe via Zapier. For Uber-scale operations with millions of users, custom development is the right path."}}]}]}
    </script>

<div class="hero">
        <div class="container">
            <div class="breadcrumb">
                <a href="https://www.adalo.com/">Home</a>
                <span class="breadcrumb-separator">/</span>
                <a href="https://www.adalo.com/solutions">Solutions</a>
                <span class="breadcrumb-separator">/</span>
                <span>Delivery &amp; Order Tracking</span>
            </div>
            <div class="hero-inner">
                <div class="hero-content">
                    <div class="use-case-badge">&#x1F69A; Delivery &amp; Logistics</div>
                    <h1>Build Custom <span class="hero-highlight">Delivery Apps</span> for Any Business</h1>
                    <p class="hero-description">Adalo is the no-code app builder that pairs AI-powered generation with a visual multi-screen canvas, so entrepreneurs and business teams can design, build, and publish custom database-driven apps to the Apple App Store, Google Play Store, and web from a single project &mdash; no code, no developers required. Build a delivery experience that connects dispatchers, drivers, and customers in one native app.</p>
                <div class="hero-buttons">
                    <a href="https://app.adalo.com/signup" class="btn-primary">Build Free <span class="arrow">&rarr;</span></a>
                    <a href="https://www.adalo.com/pricing" class="btn-outline-hero">View Pricing</a>
                </div>
                <ul class="perks">
                    <li>No credit card required</li>
                    <li>Hosted Postgres database included</li>
                    <li>500 records on the free plan with no time limit</li>
                    <li>Web publishing complimentary</li>
                    <li>No overages or excess usage charges</li>
                </ul>
                <div class="hero-stats">
                        <div class="stat"><div class="stat-value">3</div><div class="stat-label">Platforms from One Build</div></div>
                        <div class="stat"><div class="stat-value">$36/mo</div><div class="stat-label">Unlimited Usage</div></div>
                        <div class="stat"><div class="stat-value">500</div><div class="stat-label">Free Records to Start</div></div>
                    </div>
                </div>

<div class="device-column">
                <div class="device-cluster">
                    
                    <div class="cyber-desktop">
                        <div class="frame">
                            <div class="toolbar">
                                <span class="dot dot-r"></span>
                                <span class="dot dot-y"></span>
                                <span class="dot dot-g"></span>
                                <div class="url-bar">app.adalo.com/dispatch</div>
                            </div>
                            <div class="screen">
                                <div class="dk-header">
                                    <h4>Dispatch Board</h4>
                                    <div class="dk-add">+ New Order</div>
                                </div>
                                <div class="dk-body">
                                    <div class="dk-sidebar">
                                        <span class="si active">&#x25A0;</span>
                                        <span class="si">&#x25CB;</span>
                                        <span class="si">&#x25A1;</span>
                                        <span class="si">&#x25B3;</span>
                                        <span class="si">&#x2699;</span>
                                    </div>
                                    <div class="dk-kanban">
                                        <div class="dk-col">
                                            <div class="glass-col-header">New</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Order #1089</div>
                                                <div class="glass-price">123 Oak St</div>
                                                <span class="glass-tag glass-tag-sale">RUSH</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Order #1090</div>
                                                <div class="glass-price">456 Pine Ave</div>
                                                <div class="glass-sub">Standard</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Order #1091</div>
                                                <div class="glass-price">222 Walnut Dr</div>
                                                <span class="glass-tag glass-tag-new">EXPRESS</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Preparing</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Order #1087</div>
                                                <div class="glass-price">789 Elm Dr</div>
                                                <span class="glass-tag glass-tag-pop">READY</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Order #1088</div>
                                                <div class="glass-price">101 Ash Blvd</div>
                                                <div class="glass-sub">Packing</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">In Transit</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Order #1085</div>
                                                <div class="glass-price">321 Maple Ln</div>
                                                <span class="glass-tag glass-tag-ok">ON TIME</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Order #1086</div>
                                                <div class="glass-price">654 Cedar Rd</div>
                                                <div class="glass-sub">Driver: Carlos</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Order #1084</div>
                                                <div class="glass-price">777 Oak Ave</div>
                                                <span class="glass-tag glass-tag-pop">DELAYED</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Delivered</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Order #1083</div>
                                                <div class="glass-price">987 Birch Way</div>
                                                <span class="glass-tag glass-tag-ok">DONE</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Order #1082</div>
                                                <div class="glass-price">543 Spruce Ct</div>
                                                <span class="glass-tag glass-tag-ok">RATED</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="stand"></div>
                        <div class="base"></div>
                    </div>

<div class="cyber-tablet">
                        <div class="frame">
                            <div class="tb-camera"></div>
                            <div class="screen">
                                <div class="tb-header">
                                    <h4>Route #7</h4>
                                    <span class="neon-items">5 stops</span>
                                </div>
                                <div class="tb-kanban">
                                    <div style="flex:1;">
                                        <div class="neon-card">
                                            <div class="n-name">Stop 1</div>
                                            <div class="n-amount neon-cyan">123 Oak St</div>
                                            <div class="n-contact">ETA 10:15 AM</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Stop 2</div>
                                            <div class="n-amount neon-gold">456 Pine Ave</div>
                                            <div class="n-contact">ETA 10:40 AM</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Stop 3</div>
                                            <div class="n-amount neon-magenta">789 Elm Dr</div>
                                            <div class="n-contact">ETA 11:05 AM</div>
                                        </div>
                                        <div class="tb-total-row">
                                            <div class="tb-total-label">DISTANCE</div>
                                            <div class="tb-total-amount">12.4 mi</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tb-nav">
                                    <span>&#x25CB;</span>
                                    <span class="active" style="color:#ff00ff;">&#x25A0;</span>
                                    <span>&#x25A1;</span>
                                    <span>&#x2699;</span>
                                </div>
                                <div class="tb-home-bar"></div>
                            </div>
                        </div>
                    </div>

<div class="cyber-phone">
                        <div class="frame">
                            <div class="screen-bezel">
                            <div class="dynamic-island"></div>
                            <div class="screen">
                                <div class="native-status">
                                    <span>9:41</span>
                                    <span>&#x25CF;&#x25CF;&#x25CF;</span>
                                </div>
                                <div class="native-header">
                                    <h4>Order #1085</h4>
                                    <span class="native-accent">On the way</span>
                                </div>
                                <div class="native-progress">
                                    <div class="progress-dot" style="background:#059669;"></div>
                                    <div class="progress-line" style="background:#a7f3d0;"></div>
                                    <div class="progress-dot" style="background:#059669;"></div>
                                    <div class="progress-line" style="background:#a7f3d0;"></div>
                                    <div class="progress-dot" style="background:#059669;box-shadow:0 0 6px rgba(5,150,105,0.3);"></div>
                                    <div class="progress-line" style="background:#e5e7eb;"></div>
                                    <div class="progress-dot" style="background:#e5e7eb;"></div>
                                </div>
                                <div class="native-progress-labels">
                                    <span>Placed</span>
                                    <span>Picked Up</span>
                                    <span class="active">Transit</span>
                                    <span>Delivered</span>
                                </div>
                                <div class="native-content">
                                    <div class="native-card">
                                        <div class="native-row">
                                            <span class="native-label" style="margin:0;">Status</span>
                                            <span class="native-pill pill-success">In Transit</span>
                                        </div>
                                    </div>
                                    <div class="native-card">
                                        <div class="native-label">Details</div>
                                        <div class="native-row">
                                            <span class="native-value">Address</span>
                                            <span class="native-price">321 Maple</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">ETA</span>
                                            <span class="native-price">10:30 AM</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Driver</span>
                                            <span class="native-price">Carlos M.</span>
                                        </div>
                                    </div>
                                    <div class="native-total">
                                        <span class="native-total-label">Distance</span>
                                        <span class="native-total-amount">2.1mi</span>
                                    </div>
                                </div>
                                <div class="native-nav">
                                    <span>&#x2302;</span>
                                    <span>&#x1F50D;</span>
                                    <span class="active">&#x1F4E6;</span>
                                    <span>&#x2699;</span>
                                </div>
                                <div class="home-bar"></div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="store-badges">
                    
                    
                    
                </div>
            </div>
            </div>

</div>
            </div>

</div>
    </div>

<div class="section section-light">
        <div class="container">
            <div class="section-header" style="text-align: center; max-width: 900px; margin: 0 auto 60px;">
                <h2>Build Any Delivery App You Can Imagine</h2>
                <p class="section-description">From food delivery to courier services&mdash;describe what you need and Ada, Adalo's AI builder, generates a working delivery app with Magic Start in minutes.</p>
            </div>
            <div class="app-types-grid">
                <div class="app-chip"><div class="chip-icon">&#x1F354;</div><div class="chip-text">Food Delivery</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4E6;</div><div class="chip-text">Package Courier</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F6D2;</div><div class="chip-text">Grocery Delivery</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F48A;</div><div class="chip-text">Pharmacy Delivery</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F33F;</div><div class="chip-text">Farm-to-Table</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F6E0;&#xFE0F;</div><div class="chip-text">Field Service</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4CB;</div><div class="chip-text">Dispatch Manager</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F30D;</div><div class="chip-text">Last-Mile Delivery</div></div>
            </div>
        </div>
    </div>

<div class="section">
        <div class="container">
            <div class="section-header">
                <span class="section-label">The Challenge</span>
                <h2>Delivery Operations Shouldn't Run on Phone Calls &amp; Spreadsheets</h2>
                <p class="section-description">Most small delivery businesses juggle phone calls, WhatsApp messages, and spreadsheets to coordinate orders. Customers have no visibility, drivers have no route guidance, and dispatchers can't track anything in real time.</p>
            </div>
            <div class="problem-solution">
                <div class="problem-card">
                    <h3 class="card-title">The Delivery Management Problem</h3>
                    <ul class="card-list">
                        <li>Orders tracked in spreadsheets with no real-time status updates</li>
                        <li>Customers calling constantly to ask "where's my order?"</li>
                        <li>Drivers relying on WhatsApp for addresses and delivery instructions</li>
                        <li>No proof of delivery&mdash;disputes over what was delivered and when</li>
                        <li>Uber-style platforms taking 20&ndash;30% commission per order</li>
                        <li>Custom delivery apps quoted at $50,000+ from development agencies</li>
                    </ul>
                </div>
                <div class="solution-card">
                    <h3 class="card-title">The Adalo Delivery Solution</h3>
                    <ul class="card-list">
                        <li>Visual dispatch board shows every order status in real time on the canvas</li>
                        <li>Customer-facing tracking with status updates and push notifications</li>
                        <li>Native driver app with delivery queue, address details, and confirmation</li>
                        <li>Photo proof of delivery captured and stored in the built-in database</li>
                        <li>$36/mo with unlimited orders, drivers, and customers&mdash;zero commissions</li>
                        <li>Ada generates a working delivery app from a description in minutes</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

<div class="section section-light">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Key Features</span>
                <h2>Everything Your Delivery Operation Needs in One App</h2>
                <p class="section-description">Built for businesses that need dispatch, driver management, and customer tracking&mdash;on web, iOS (native), and Android (native) from a single build.</p>
            </div>
            <div class="features">
                <div class="feature"><div class="feature-icon">&#x1F4CB;</div><h3>Dispatch Dashboard</h3><p>Track every order from placement to delivery on a visual board. See pending, in-transit, and delivered orders at a glance. Assign drivers and update statuses from any device connected to Adalo's built-in relational database.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F69A;</div><h3>Driver App</h3><p>Drivers see their delivery queue with addresses, customer details, and special instructions. Mark deliveries as picked up, in transit, or completed. Capture photo proof of delivery and log notes&mdash;all from a native iOS or Android app.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F4CD;</div><h3>Customer Order Tracking</h3><p>Customers track their order status with step-by-step progress (Placed, Picked Up, In Transit, Delivered). Push notifications alert them at each stage so they're never left wondering where their order is.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F514;</div><h3>Push Notifications</h3><p>Native push notifications keep everyone informed. Drivers get new assignment alerts. Customers get pickup, transit, and delivery confirmations. Dispatchers get flagged when deliveries are running late.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F4F7;</div><h3>Proof of Delivery</h3><p>Drivers capture delivery confirmation photos, collect signatures, and add notes. Everything is stored in the relational database and linked to the order record&mdash;resolving disputes before they start.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F4CA;</div><h3>Delivery Analytics</h3><p>Track delivery times, driver performance, order volumes, and customer satisfaction. Build dashboards that show the metrics your operation needs to improve efficiency and reduce costs.</p></div>
            </div>
        </div>
    </div>

<div class="section workflow">
        <div class="container">
            <div class="section-header">
                <span class="section-label">How It Works</span>
                <h2>From Idea to Delivery App in Five Steps</h2>
                <p class="section-description">Adalo 3.0's infrastructure (launched late 2025) is 3&ndash;4x faster and scales to 1M+ monthly active users. Here's how to build your delivery app on it.</p>
            </div>
            <div class="workflow-steps">
                <div class="workflow-step"><div class="step-number">1</div><div class="step-content"><h3>Describe Your Delivery App to Ada</h3><p>Tell Ada, Adalo's AI builder, what your delivery operation needs. Magic Start generates a complete delivery app with screens, database, and navigation from your description&mdash;typically in under two minutes.</p><div class="step-details"><div class="step-details-title">Example prompt:</div><div style="margin-top: 8px; padding: 16px; background: var(--white); border-radius: 8px; border-left: 3px solid var(--teal);"><div style="font-size: 14px; color: var(--gray-600); line-height: 1.6; font-style: italic;">"Build me a delivery app for a local meal prep business. I need a dispatch board for the kitchen staff, a driver app with today's delivery list and photo proof of delivery, and a customer-facing order tracker with push notifications for status updates."</div></div></div></div></div>
                <div class="workflow-step"><div class="step-number">2</div><div class="step-content"><h3>Design Your Delivery Workflow</h3><p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust your order statuses, driver assignment flow, and customer tracking views. Add features with Magic Add using natural language.</p><div class="step-details"><div class="step-details-title">Typical order statuses:</div><div class="columns-list"><div class="column-item">Placed</div><div class="column-item">Preparing</div><div class="column-item">Picked Up</div><div class="column-item">In Transit</div><div class="column-item">Arriving</div><div class="column-item">Delivered</div></div></div></div></div>
                <div class="workflow-step"><div class="step-number">3</div><div class="step-content"><h3>Connect Your Data Sources</h3><p>Use Adalo's built-in relational database for orders, drivers, and customers. Connect Google Sheets via SheetBridge if you already track orders in spreadsheets. Add Zapier or Make integrations for payment processors, SMS notifications, and accounting tools.</p><div class="step-details"><div class="step-details-title">Common delivery integrations:</div><div class="screens-grid"><div class="screen-item"><div class="screen-title">SheetBridge</div><div class="screen-desc">Import existing order lists from Google Sheets as a relational database</div></div><div class="screen-item"><div class="screen-title">Zapier / Make</div><div class="screen-desc">Connect to Stripe, Twilio SMS, QuickBooks, and more</div></div><div class="screen-item"><div class="screen-title">Custom API</div><div class="screen-desc">External Collections connect to any REST API endpoint</div></div><div class="screen-item"><div class="screen-title">Webhooks</div><div class="screen-desc">Trigger actions when orders are placed or deliveries completed</div></div></div></div></div></div>
                <div class="workflow-step"><div class="step-number">4</div><div class="step-content"><h3>Test on Real Devices</h3><p>Preview your delivery app on any device form factor directly from the canvas. Test the full flow&mdash;placing an order, assigning a driver, tracking delivery, capturing proof&mdash;on iPhone, Android, tablet, and desktop before publishing.</p></div></div>
                <div class="workflow-step"><div class="step-number">5</div><div class="step-content"><h3>Publish to App Stores</h3><p>Deploy your delivery app as a native iOS app on the Apple App Store, a native Android app on Google Play, and a web app&mdash;all from a single build. Your drivers, dispatchers, and customers all get the right experience on their preferred device.</p></div></div>
            </div>
        </div>
    </div>

<div class="section benefits">
        <div class="container">
            <div class="section-header">
                <span class="section-label" style="color: var(--gold);">Why Adalo for Delivery</span>
                <h2>Own Your Delivery Experience&mdash;Without the Platform Fees</h2>
                <p class="section-description">Stop giving 20&ndash;30% of every order to third-party platforms. Build your own delivery app and keep your margins.</p>
            </div>
            <div class="benefits-grid">
                <div class="benefit-card"><div class="benefit-icon">&#x1F4B0;</div><h3>Zero Commissions</h3><p>Uber Eats, DoorDash, and other platforms take 20&ndash;30% of every order. Adalo costs $36/mo flat with unlimited orders, drivers, and customers. Every dollar of revenue stays with your business.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F4F1;</div><h3>Native Driver &amp; Customer Apps</h3><p>True native iOS and Android apps for both drivers and customers. Push notifications for delivery updates. Fast performance between stops. No web wrappers or clunky mobile sites.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F5C4;&#xFE0F;</div><h3>All Data in One Place</h3><p>Orders, drivers, customers, addresses, delivery times, and proof photos all live in Adalo's built-in relational database. No external Firebase or Supabase setup required.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F680;</div><h3>Launch in Days, Not Months</h3><p>Ada generates your delivery app from a description. Visually customize it on the canvas. Publish to three platforms from one build. Most Makers go from idea to live delivery app in under a week.</p></div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F50D;</div>
                    <h3>Design Both Apps on One Canvas</h3>
                    <p>See customer ordering, driver assignment, route views, and admin dashboards simultaneously. Adalo's multi-screen canvas lets you design multi-role flows visually with AI direction.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4CA;</div>
                    <h3>Scale as Volume Grows</h3>
                    <p>Adalo 3.0 delivers 3–4× faster performance and handles 1M+ monthly active users. Your delivery platform handles 50 orders a day or 5,000 without infrastructure changes.</p>
                </div>
            
            </div>
        </div>
    </div>

<div class="section comparison">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Compare Your Options</span>
                <h2>Custom Delivery App vs. Uber-Style Templates vs. Custom Dev</h2>
                <p class="section-description">See how building your own delivery app with Adalo compares to the alternatives.</p>
            </div>
            <table class="comp-table">
                <thead><tr><th>Factor</th><th>Adalo Delivery App</th><th>Uber-Style Templates</th><th>Custom Development</th></tr></thead>
                <tbody>
                    <tr><td>Build Time</td><td>&#x2705; Days to weeks</td><td>Immediate, but heavily limited</td><td>3&ndash;9 months</td></tr>
                    <tr><td>Monthly Cost</td><td>&#x2705; $36/mo flat (unlimited)</td><td>$100&ndash;500/mo + per-order fees</td><td>$10,000&ndash;30,000/mo (hosting + team)</td></tr>
                    <tr><td>Per-Order Fees</td><td>&#x2705; None</td><td>$0.50&ndash;2.00 per order or 5&ndash;15%</td><td>None (infrastructure cost instead)</td></tr>
                    <tr><td>Native Mobile App</td><td>&#x2705; iOS and Android (true native)</td><td>Usually web app or PWA</td><td>Yes (if budgeted separately)</td></tr>
                    <tr><td>Customization</td><td>&#x2705; Full &mdash; your screens, your workflow</td><td>Limited to template options</td><td>Full (at development cost)</td></tr>
                    <tr><td>Real-Time Tracking</td><td>&#x2705; Status-based with push notifications</td><td>Varies by platform</td><td>Full GPS (at development cost)</td></tr>
                    <tr><td>Maintenance</td><td>&#x2705; Adalo handles infrastructure</td><td>Vendor handles</td><td>Your dev team handles</td></tr>
                </tbody>
            </table>
        </div>
    </div>

<div class="section best-practices">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Best Practices</span>
                <h2>Tips for Delivery App Success</h2>
                <p class="section-description">Patterns from Makers who have built and shipped successful delivery apps with Adalo.</p>
            </div>
            <div class="practices-grid">
                <div class="practice-card"><h3><span class="practice-icon">&#x1F69A;</span> Build the Driver App First</h3><p>Your drivers are the backbone of delivery. Start with their daily experience: delivery queue, address display, status updates, and proof of delivery. Get that right, then build dispatch and customer views around it.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F4F1;</span> Keep the Customer View Simple</h3><p>Customers want one thing: "Where's my order?" Build a clean status tracker with four or five steps and push notifications at each transition. Save the detailed features for your dispatch and driver screens.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F4F7;</span> Always Capture Proof of Delivery</h3><p>Photo proof linked to each order in the database eliminates disputes. Drivers take one photo when the package is delivered. It takes five seconds and saves hours of customer service time.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F517;</span> Start Simple, Then Automate</h3><p>Begin with manual driver assignment and order entry. Once your team is comfortable, layer in Zapier automations for order intake from your website, SMS confirmations, and accounting sync.</p></div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Import Routes from Spreadsheets</h3>
                    <p>If your delivery zones or driver schedules live in Google Sheets, use SheetBridge to connect them as a relational database. Migrate operational data without manual re-entry.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F9EA;</span> Run 50 Test Deliveries</h3>
                    <p>Before public launch, complete 50 real deliveries with your team. Real-world conditions—wrong addresses, driver no-shows, weather delays—expose workflow gaps that simulated testing misses.</p>
                </div>
            </div>
        </div>
    </div>

<div class="section requirements">
        <div class="container">
            <div class="section-header">
                <span class="section-label">What's Included</span>
                <h2>Everything You Need to Build &amp; Run a Delivery App</h2>
            </div>
            <div class="requirements-cards">
                <div class="requirement-card"><div class="requirement-icon">&#x267E;&#xFE0F;</div><div class="requirement-content"><h4>Unlimited Orders on Paid Plans</h4><p>No caps on orders, drivers, or customers. Adalo paid plans include unlimited database records, users, and storage. Free plan includes 500 records to get started.</p></div></div>
                <div class="requirement-card"><div class="requirement-icon">&#x1F514;</div><div class="requirement-content"><h4>Push Notifications</h4><p>Native push notifications for driver assignment alerts, customer delivery updates, and dispatcher warnings when deliveries are running behind schedule.</p></div></div>
                <div class="requirement-card"><div class="requirement-icon">&#x1F4C4;</div><div class="requirement-content"><h4>Google Sheets via SheetBridge</h4><p>Already tracking orders in Google Sheets? SheetBridge connects your spreadsheet as a relational database so you can migrate incrementally without disruption.</p></div></div>
                <div class="requirement-card"><div class="requirement-icon">&#x26A1;</div><div class="requirement-content"><h4>Zapier &amp; Make Integrations</h4><p>Connect your delivery app to 6,000+ tools. Sync with payment processors, SMS services, accounting software, and order intake from your existing website or marketplace.</p></div></div>
            </div>
        </div>
    </div>

<div class="section" style="background: white;">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Frequently Asked Questions</span>
                <h2>Common Questions About Building Delivery Apps</h2>
            </div>
            <div class="faq-container">
                <div class="faq-item"><h3 class="faq-question">What is Adalo?</h3><div class="faq-answer"><p>Adalo is the no-code app builder that pairs AI-powered generation with a visual multi-screen canvas, so entrepreneurs and business teams can design, build, and publish custom database-driven apps to the Apple App Store, Google Play Store, and web from a single project &mdash; no code, no developers required.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">Does Adalo support real-time GPS tracking for deliveries?</h3><div class="faq-answer"><p>Adalo provides status-based order tracking with push notifications at each delivery stage (Placed, Picked Up, In Transit, Delivered). Customers see exactly what stage their order is at and receive real-time push alerts when the status changes. For live GPS map tracking (showing a moving dot on a map like Uber), you would need to integrate an external mapping API via Custom Actions. Most small delivery businesses find that status-based tracking with notifications covers their needs effectively.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">Can I build a driver app and a customer app from the same project?</h3><div class="faq-answer"><p>Yes. Adalo builds one version across web, iOS (native), and Android (native) from a single project. You can create role-based views within the same app&mdash;dispatchers see the management dashboard on web, drivers see their delivery queue on a native mobile app, and customers see order tracking on their phones. All three roles share the same relational database, so updates are reflected everywhere in real time.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">Can customers receive push notifications about their delivery?</h3><div class="faq-answer"><p>Yes. Adalo's native iOS and Android apps include built-in push notifications. You can trigger notifications when an order changes status&mdash;picked up, in transit, arriving, delivered. For SMS notifications (to reach customers who haven't downloaded the app), you can connect Twilio or similar services via Zapier.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">Can drivers use route optimization in an Adalo delivery app?</h3><div class="faq-answer"><p>Adalo doesn't include built-in route optimization. However, you can display delivery addresses in the driver's queue and link each address to open in Google Maps or Apple Maps for navigation. For automated multi-stop route optimization, you would integrate a service like Google Routes API or RouteXL via External Collections. Many small delivery operations start with manual routing and add optimization APIs as they scale.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">Can I build a multi-restaurant delivery app?</h3><div class="faq-answer"><p>You can build a multi-vendor marketplace-style delivery app with Adalo. The built-in relational database supports linking multiple restaurants (or merchants) to menus, orders, and drivers. Customers browse vendors, place orders, and track delivery. However, if you're targeting millions of concurrent users with real-time GPS tracking across thousands of drivers, that level of infrastructure requires custom development. Adalo is well-suited for local and regional delivery operations serving hundreds to thousands of active users.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">How much does it cost to build a delivery app?</h3><div class="faq-answer"><p>Adalo's paid plans start at $36/mo with unlimited usage&mdash;no caps on orders, drivers, customers, or storage. Compare that to white-label delivery platforms at $100&ndash;500/mo plus per-order fees, or custom development at $50,000&ndash;200,000 upfront. The free plan includes 500 database records so you can build and test your delivery app before committing. There are zero per-order commissions.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">What can't an Adalo delivery app do?</h3><div class="faq-answer"><p>Adalo excels at building custom delivery apps with dispatch, driver management, and customer tracking, but it has limitations for certain use cases. Live GPS map tracking (showing a moving dot) requires integrating external mapping APIs&mdash;Adalo provides status-based tracking out of the box. Automated route optimization across dozens of simultaneous drivers needs a dedicated routing service. Built-in payment processing requires connecting Stripe or similar via Zapier. For Uber-scale operations with millions of users and real-time fleet management, custom development is the right path. For local and regional delivery businesses, Adalo handles the core workflow at a fraction of the cost.</p></div></div>
            </div>
            <div style="margin-top: 60px; text-align: center; padding: 40px; background: var(--gray-50); border-radius: 16px;">
                <p style="font-size: 16px; color: var(--gray-600); margin-bottom: 20px;">Explore more solutions: <a href="https://www.adalo.com/solutions/crm-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">CRM Apps</a>, <a href="https://www.adalo.com/solutions/booking-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Booking Apps</a>, <a href="https://www.adalo.com/solutions/healthcare-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Healthcare Apps</a>, and <a href="https://www.adalo.com/solutions/internal-tools-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Internal Tools</a>. Learn more about <a href="https://www.adalo.com/" style="color: var(--teal); font-weight: 600; text-decoration: none;">Adalo's no-code app builder</a>.</p>
            </div>
        </div>
    </div>

<div class="section section-light resources">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Resources &amp; Tutorials</span>
                <h2>Learn How to Build Delivery Apps with Adalo</h2>
                <p class="section-description">Step-by-step guides, video walkthroughs, and documentation to help you build and ship your delivery app.</p>
            </div>
            <div class="resources-grid">
                <a href="https://www.adalo.com/posts/how-to-build-a-delivery-app" class="resource-card"><div class="resource-type">Tutorial</div><h3>How to Build a Delivery App Without Code</h3><p>Full walkthrough: order database, dispatch screens, driver views, customer tracking, and publishing to app stores.</p><span class="resource-link">Read guide &rarr;</span></a>
                <a href="https://help.adalo.com/integrations/external-collections" class="resource-card"><div class="resource-type">Documentation</div><h3>Connecting External APIs</h3><p>How to use External Collections and Custom Actions to connect mapping, payment, and notification services.</p><span class="resource-link">View docs &rarr;</span></a>
                <a href="https://www.adalo.com/posts/google-sheets-app-builder" class="resource-card"><div class="resource-type">Tutorial</div><h3>Google Sheets to App via SheetBridge</h3><p>Migrate your spreadsheet order tracking to a real delivery app without losing your existing data workflow.</p><span class="resource-link">Read guide &rarr;</span></a>
                <a href="https://help.adalo.com/building-your-app/database" class="resource-card"><div class="resource-type">Documentation</div><h3>Relational Database Basics</h3><p>Understand collections, relationships, and record linking&mdash;the foundation of any delivery app data model.</p><span class="resource-link">View docs &rarr;</span></a>
            </div>
        </div>
    </div>

<div class="cta-section">
        <div class="cta-content">
            <h2>Ready to Build Your Delivery App?</h2>
            <p>Join Makers who have replaced spreadsheet dispatch and third-party platform fees with custom native delivery apps built on Adalo&mdash;keeping every dollar of their revenue.</p>
            <div class="cta-buttons">
                <a href="https://www.adalo.com/signup" class="btn btn-white">Start Building Your Delivery App Free <span class="arrow">&rarr;</span></a>
                <a href="https://www.adalo.com/solutions" class="btn btn-outline">Explore More Solutions</a>
            </div>
        </div>
    </div>

Delivery & Logistics Apps