Restaurant App Builder

.nav { background: var(--white); padding: 14px 24px; border-bottom: 1px solid var(--gray-100); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.95); }
        .nav-container { max-width: 100%; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; }
        .nav-left { display: flex; align-items: center; gap: 36px; }
        .nav-logo img { height: 28px; width: auto; }
        .nav-links { display: flex; gap: 28px; list-style: none; }
        .nav-links a { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; transition: color 0.2s; }
        .nav-links a:hover { color: var(--teal); }
        .nav-right { display: flex; align-items: center; gap: 16px; }
        .nav-login { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; transition: color 0.2s; }
        .nav-login:hover { color: var(--teal); }
        .nav-right-link { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; transition: color 0.2s; }
        .nav-right-link:hover { color: var(--teal); }
        .nav-signup { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--white); background: #00bfa5; padding: 10px 22px; border-radius: 100px; text-decoration: none; transition: background 0.2s; }
        .nav-signup:hover { background: var(--teal-dark); }
        @media (max-width: 768px) { .nav-links { display: none; } .nav-login { display: none; } }

.hero { position: relative; background: #F8F4EE; background-image: linear-gradient(#F7F3EE, rgba(247,243,238,0)); color: #000; padding: 80px 24px 100px; overflow: hidden; }
        .hero::before { content: none; }

.container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
        .breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 14px; margin-bottom: 32px;   }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .breadcrumb a { color: #00A695; text-decoration: none; font-weight: 500; transition: opacity 0.2s; }
        .breadcrumb a:hover { opacity: 0.7; }
        .breadcrumb-separator { color: #424242; }
        .hero-inner { display: grid; grid-template-columns: 1fr 560px; gap: 40px; align-items: center; }
        .hero-content { max-width: 600px; }

.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; } .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; } .hero-stats { gap: 32px; } }
        .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/restaurant-app-builder/#webpage",
                "url": "https://www.adalo.com/solutions/restaurant-app-builder",
                "name": "Restaurant App Builder | Adalo",
                "description": "Build a custom restaurant 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 create digital menus, online ordering, kitchen displays, and loyalty programs\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": "Restaurant App Builder", "item": "https://www.adalo.com/solutions/restaurant-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": "Can I accept online orders through an Adalo restaurant app?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. You can build a complete ordering flow with menu browsing, cart management, and checkout. For payment processing, connect Stripe through Zapier or Custom Actions." } },
                    { "@type": "Question", "name": "How do I manage and update my menu?", "acceptedAnswer": { "@type": "Answer", "text": "Menu items are stored in Adalo's database. You can add, edit, or remove items from the editor or through an admin screen. SheetBridge lets you manage your menu from a Google Sheet with automatic sync." } },
                    { "@type": "Question", "name": "Can I build a loyalty program with Adalo?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Use Adalo's relational database to track customer points, visits, and reward redemptions. Points are awarded automatically when orders are placed." } },
                    { "@type": "Question", "name": "Can I take table reservations through the app?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Build a reservation system where customers select date, time, party size, and special requests. Push notifications can remind customers and reduce no-shows." } },
                    { "@type": "Question", "name": "Can I use Adalo as a kitchen display system?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Build a dedicated kitchen screen as a tablet app showing incoming orders. Kitchen staff mark items as received, cooking, or ready, and the customer app updates in real time." } },
                    { "@type": "Question", "name": "How does Adalo compare to Toast or Square for restaurants?", "acceptedAnswer": { "@type": "Answer", "text": "Toast and Square are purpose-built POS platforms. Adalo's advantage is building a custom-branded ordering app that supplements your POS, letting customers order directly and bypassing delivery platform commissions. At $36/mo with no per-order fees, Adalo is an affordable complement." } },
                    { "@type": "Question", "name": "What can't Adalo do for restaurant apps?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo is not a POS replacement. It doesn't process in-person card payments, manage physical hardware terminals, handle tip calculations, or provide delivery route optimization. For a branded customer-facing ordering app alongside your existing POS, Adalo is the practical choice." } }
                ]
            }
        ]
    }
    </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>Restaurant App Builder</span>
            </div>
            <div class="hero-inner">
                <div class="hero-content">
                    <div class="use-case-badge">
                        &#x1F37D;&#xFE0F; Restaurant &amp; Food Service
                    </div>
                    <h1>
                        Build Custom <span class="hero-highlight">Restaurant Apps</span> for Ordering &amp; Operations
                    </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 restaurant app that runs your way, not a third-party platform's way.
                    </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">400+</div>
                            <div class="stat-label">Restaurant Apps Built</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">3</div>
                            <div class="stat-label">Platforms</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">$36/mo</div>
                            <div class="stat-label">Unlimited Usage</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/restaurant</div>
                            </div>
                            <div class="screen">
                                <div class="dk-header">
                                    <h4>Order 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">Table 7</div>
                                                <div class="glass-price">3 items</div>
                                                <span class="glass-tag glass-tag-new">DINE-IN</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Order #204</div>
                                                <div class="glass-price">2 items</div>
                                                <div class="glass-sub">Takeout</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Table 9</div>
                                                <div class="glass-price">4 items</div>
                                                <span class="glass-tag glass-tag-pop">VIP</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Preparing</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Table 3</div>
                                                <div class="glass-price">5 items</div>
                                                <span class="glass-tag glass-tag-sale">RUSH</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Order #203</div>
                                                <div class="glass-price">4 items</div>
                                                <div class="glass-sub">Delivery</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Table 1</div>
                                                <div class="glass-price">6 items</div>
                                                <div class="glass-sub">Large party</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Ready</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Table 12</div>
                                                <div class="glass-price">2 items</div>
                                                <span class="glass-tag glass-tag-ok">SERVE</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Order #201</div>
                                                <div class="glass-price">3 items</div>
                                                <span class="glass-tag glass-tag-pop">PICKUP</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Complete</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Table 5</div>
                                                <div class="glass-price">$87.50</div>
                                                <span class="glass-tag glass-tag-ok">PAID</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Table 2</div>
                                                <div class="glass-price">$124.00</div>
                                                <span class="glass-tag glass-tag-ok">TIPPED</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>Table 3</h4>
                                    <span class="neon-items">5 items</span>
                                </div>
                                <div class="tb-kanban">
                                    <div style="flex:1;">
                                        <div class="neon-card">
                                            <div class="n-name">Grilled Salmon</div>
                                            <div class="n-amount neon-cyan">$24.00</div>
                                            <div class="n-contact">No sauce</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Caesar Salad</div>
                                            <div class="n-amount neon-gold">$12.00</div>
                                            <div class="n-contact">Dressing side</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Pasta Primavera</div>
                                            <div class="n-amount neon-magenta">$18.00</div>
                                            <div class="n-contact">Gluten free</div>
                                        </div>
                                        <div class="tb-total-row">
                                            <div class="tb-total-label">TABLE TOTAL</div>
                                            <div class="tb-total-amount">$78.50</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>Reservation</h4>
                                    <span class="native-accent">Confirmed</span>
                                </div>
                                <div class="native-progress">
                                    <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 class="progress-line" style="background:#e5e7eb;"></div>
                                    <div class="progress-dot" style="background:#e5e7eb;"></div>
                                    <div class="progress-line" style="background:#e5e7eb;"></div>
                                    <div class="progress-dot" style="background:#e5e7eb;"></div>
                                </div>
                                <div class="native-progress-labels">
                                    <span class="active">Booked</span>
                                    <span>Seated</span>
                                    <span>Ordered</span>
                                    <span>Paid</span>
                                </div>
                                <div class="native-content">
                                    <div class="native-card">
                                        <div class="native-row">
                                            <span class="native-label" style="margin:0;">Tonight</span>
                                            <span class="native-pill pill-success">7:30 PM</span>
                                        </div>
                                    </div>
                                    <div class="native-card">
                                        <div class="native-label">Details</div>
                                        <div class="native-row">
                                            <span class="native-value">Party size</span>
                                            <span class="native-price">4 guests</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Table</span>
                                            <span class="native-price">Patio #8</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Request</span>
                                            <span class="native-price">Birthday</span>
                                        </div>
                                    </div>
                                    <div class="native-total">
                                        <span class="native-total-label">Wait</span>
                                        <span class="native-total-amount">0 min</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 Restaurant App You Can Imagine</h2>
                <p class="section-description">From digital menus to full ordering systems&mdash;describe what you need and Ada, Adalo's AI builder, generates a working restaurant app with Magic Start in minutes.</p>
            </div>
            <div class="app-types-grid">
                <div class="app-chip"><div class="chip-icon">&#x1F4CB;</div><div class="chip-text">Digital Menu</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F6D2;</div><div class="chip-text">Online Ordering</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4E6;</div><div class="chip-text">Kitchen Display</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4B3;</div><div class="chip-text">Loyalty Program</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4C5;</div><div class="chip-text">Table Reservations</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F69A;</div><div class="chip-text">Delivery Tracker</div></div>
                <div class="app-chip"><div class="chip-icon">&#x2B50;</div><div class="chip-text">Review Platform</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4CA;</div><div class="chip-text">Sales Dashboard</div></div>
            </div>
        </div>
    </div>

<div class="section">
        <div class="container">
            <div class="section-header">
                <span class="section-label">The Challenge</span>
                <h2>Restaurants Deserve Technology That Doesn't Eat Their Margins</h2>
                <p class="section-description">Third-party platforms charge 15&ndash;30% commissions per order and own the customer relationship. Building a custom app shouldn't require a tech budget larger than your kitchen equipment.</p>
            </div>
            <div class="problem-solution">
                <div class="problem-card">
                    <h3 class="card-title">The Restaurant Tech Problem</h3>
                    <ul class="card-list">
                        <li>Delivery platforms take 15&ndash;30% commission on every order</li>
                        <li>Third parties own the customer data and relationship</li>
                        <li>Custom restaurant apps cost $30K&ndash;$150K+ to develop</li>
                        <li>PDF menus and paper order pads can't compete with digital-first competitors</li>
                        <li>Separate POS, ordering, loyalty, and reservation systems that don't talk to each other</li>
                        <li>Menu changes require calling a developer or waiting for a platform update</li>
                    </ul>
                </div>
                <div class="solution-card">
                    <h3 class="card-title">The Adalo Restaurant Solution</h3>
                    <ul class="card-list">
                        <li>Visual canvas lets you design menus, ordering flows, and kitchen displays your way</li>
                        <li>Built-in relational database connects menus, orders, customers, and loyalty points</li>
                        <li>Native iOS and Android apps with push notifications for order updates</li>
                        <li>$36/mo with unlimited orders, customers, and menu items&mdash;no per-order fees</li>
                        <li>Ada generates a working restaurant app from a description&mdash;launch in days</li>
                        <li>Update menus instantly from the visual canvas&mdash;no developer needed</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 Restaurant Needs in One App</h2>
                <p class="section-description">Built for restaurants that want to own their digital experience&mdash;on web, iOS, and Android from a single build.</p>
            </div>
            <div class="features">
                <div class="feature">
                    <div class="feature-icon">&#x1F4CB;</div>
                    <h3>Digital Menu Management</h3>
                    <p>Build a menu with categories, item photos, descriptions, prices, and dietary tags. Update items, toggle availability, and add daily specials instantly from the visual canvas&mdash;no developer calls.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F6D2;</div>
                    <h3>Online Ordering</h3>
                    <p>Customers browse your menu, add items to cart, customize orders with modifiers, and submit directly through your app. Orders flow to your kitchen in real time via Adalo's built-in database.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F4E6;</div>
                    <h3>Kitchen Order Display</h3>
                    <p>A dedicated kitchen screen shows incoming orders with item details, special requests, and order times. Staff mark items as cooking, ready, or completed. Build this as a tablet app mounted in the kitchen.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F514;</div>
                    <h3>Push Notifications</h3>
                    <p>Native push notifications alert customers when their order is being prepared, when it's ready for pickup, and when specials are running. Alert kitchen staff when new orders arrive.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F31F;</div>
                    <h3>Loyalty Program</h3>
                    <p>Build a points-based loyalty system where customers earn rewards with each order. Track points, redemptions, and repeat visits in Adalo's relational database. Drive return customers without third-party loyalty platforms.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F4C5;</div>
                    <h3>Table Reservations</h3>
                    <p>Customers book tables through your app with date, time, party size, and special requests. Staff view and manage reservations from a dedicated dashboard. Reduce no-shows with push notification reminders.</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 Restaurant 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 restaurant 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 Restaurant App to Ada</h3>
                        <p>Tell Ada, Adalo's AI builder, what your restaurant needs. Magic Start generates a complete 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 restaurant app for a pizzeria. I need a digital menu with categories (pizzas, sides, drinks, desserts), an ordering system with cart and checkout, a kitchen display that shows incoming orders, order status tracking for customers, and a loyalty points program."</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Build Your Menu &amp; Ordering Flow</h3>
                        <p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust your menu layout, item cards, and order flow. Add features like modifiers, dietary labels, and daily specials with Magic Add.</p>
                        <div class="step-details">
                            <div class="step-details-title">Typical restaurant app screens:</div>
                            <div class="columns-list">
                                <div class="column-item">Menu Browse</div>
                                <div class="column-item">Item Detail</div>
                                <div class="column-item">Cart / Checkout</div>
                                <div class="column-item">Order Status</div>
                                <div class="column-item">Kitchen Display</div>
                                <div class="column-item">Loyalty Points</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>Connect Payments &amp; Integrations</h3>
                        <p>Use Adalo's built-in relational database for menu items, orders, and customer data. Connect Google Sheets via SheetBridge if you track inventory in spreadsheets. Add Stripe via Zapier for online payments and connect to your existing POS system.</p>
                        <div class="step-details">
                            <div class="step-details-title">Common restaurant app integrations:</div>
                            <div class="screens-grid">
                                <div class="screen-item">
                                    <div class="screen-title">SheetBridge</div>
                                    <div class="screen-desc">Sync menu data from Google Sheets&mdash;update prices and availability from a spreadsheet</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">Stripe via Zapier</div>
                                    <div class="screen-desc">Accept online payments for orders and pre-payment for reservations</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">Zapier / Make</div>
                                    <div class="screen-desc">Connect to POS systems, email marketing, and SMS notification services</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">Custom API</div>
                                    <div class="screen-desc">External Collections connect to delivery logistics or existing restaurant systems</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 restaurant app on any device form factor directly from the canvas. Test the full ordering flow&mdash;browsing the menu, adding to cart, placing orders, kitchen receiving&mdash;on phone, 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 restaurant 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. Customers download your app and start ordering directly from you.</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 Restaurants</span>
                <h2>Own Your Customer Relationship &amp; Keep Your Margins</h2>
                <p class="section-description">Stop giving 15&ndash;30% of every order to third-party platforms. Build a direct channel to your customers.</p>
            </div>
            <div class="benefits-grid">
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F4B8;</div>
                    <h3>No Per-Order Commission</h3>
                    <p>Adalo charges $36/mo flat&mdash;no percentage of your orders. On $10K/mo in direct orders, a 25% delivery platform commission costs $2,500/mo. That's $30,000/year back in your pocket.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F464;</div>
                    <h3>Own Your Customer Data</h3>
                    <p>When customers order through your app, you own the relationship. Build a customer list, send push notifications about specials, and run your own loyalty program&mdash;no middleman.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F4F1;</div>
                    <h3>Your App in the App Store</h3>
                    <p>True native iOS and Android apps with your branding, not a third party's. Push notifications for order updates and daily specials. Customers find you in the App Store and Google Play.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F680;</div>
                    <h3>Launch in Days, Not Months</h3>
                    <p>Ada generates your restaurant app from a description. Update menus from the visual canvas. Publish to three platforms from one build. Most Makers go from idea to live restaurant app in under a week.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F50D;</div>
                    <h3>Design Every Screen Visually</h3>
                    <p>See your menu, cart, order tracking, and kitchen dashboard simultaneously on Adalo's multi-screen canvas. Visually direct the AI to adjust layouts—no coding or chat prompts needed.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4CA;</div>
                    <h3>Handle Rush Hour Traffic</h3>
                    <p>Adalo 3.0 delivers 3–4× faster performance and scales to 1M+ monthly active users. Your app handles Friday dinner rush and holiday surges without slowing down.</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 Restaurant App vs. Toast/Square vs. Custom Development</h2>
                <p class="section-description">See how building your own restaurant app with Adalo compares to the alternatives.</p>
            </div>
            <table class="comp-table">
                <thead>
                    <tr>
                        <th>Factor</th>
                        <th>Adalo Restaurant App</th>
                        <th>Toast / Square</th>
                        <th>Custom Development</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>Build Time</td><td>&#x2705; Days to weeks</td><td>Immediate (template)</td><td>3&ndash;6 months</td></tr>
                    <tr><td>Monthly Cost</td><td>&#x2705; $36/mo flat (unlimited)</td><td>$69&ndash;$300+/mo + processing fees</td><td>$5,000&ndash;20,000/mo (hosting + team)</td></tr>
                    <tr><td>Per-Order Fees</td><td>&#x2705; None from Adalo</td><td>2.6&ndash;3.5% + $0.15 per transaction</td><td>Only payment processor fees</td></tr>
                    <tr><td>Native Mobile App</td><td>&#x2705; iOS and Android (true native)</td><td>Branded app (limited customization)</td><td>Yes (if budgeted separately)</td></tr>
                    <tr><td>Push Notifications</td><td>&#x2705; Built-in</td><td>Limited to platform capabilities</td><td>Custom implementation required</td></tr>
                    <tr><td>Menu Customization</td><td>&#x2705; Full &mdash; your design, your layout</td><td>Constrained by platform template</td><td>Full (at development cost)</td></tr>
                    <tr><td>Customer Data</td><td>&#x2705; You own it completely</td><td>Shared with platform</td><td>You own it completely</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 Restaurant App Success</h2>
                <p class="section-description">Patterns from Makers who have built and launched successful restaurant apps with Adalo.</p>
            </div>
            <div class="practices-grid">
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Start with the Menu</h3>
                    <p>Your menu is the foundation of everything. Build the menu browsing experience first&mdash;categories, item cards with photos, prices, and dietary tags. Then layer ordering, kitchen display, and loyalty features on top.</p>
                </div>
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4F8;</span> Photograph Every Item</h3>
                    <p>Menu items with photos get significantly more orders than text-only listings. Take photos with natural light and a clean background. Upload them to Adalo and attach to each menu item in the database.</p>
                </div>
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F514;</span> Use Push Notifications Strategically</h3>
                    <p>Send push notifications for order status updates (always), daily specials (2&ndash;3x per week max), and loyalty rewards (when earned). Avoid spamming&mdash;restaurant app users uninstall quickly if notifications feel like ads.</p>
                </div>
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F3AF;</span> Launch Loyalty from Day One</h3>
                    <p>A points-based loyalty program drives repeat orders. Even a simple "buy 10, get 1 free" system in Adalo's database turns first-time customers into regulars. Build it from the start, not as an afterthought.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Import Your Menu from Sheets</h3>
                    <p>If your menu lives in a spreadsheet, use SheetBridge to connect it as a relational database. Categories, items, modifiers, and pricing import without manual re-entry.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F9EA;</span> Run a Soft Launch First</h3>
                    <p>Offer the app to 20–30 regulars before promoting broadly. Real orders during a live service shift expose workflow gaps—kitchen timing, order confusion, payment hiccups—that test orders don't.</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 Restaurant App</h2>
            </div>
            <div class="requirements-cards">
                <div class="requirement-card">
                    <div class="requirement-icon">&#x267E;&#xFE0F;</div>
                    <div class="requirement-content">
                        <h4>Unlimited Records on Paid Plans</h4>
                        <p>No caps on menu items, orders, customers, or loyalty points. 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 order updates, daily specials, and loyalty rewards. Keeps customers engaged and drives repeat orders without email marketing.</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 managing your menu in Google Sheets? SheetBridge connects your spreadsheet as a relational database so you can update prices and availability from a familiar interface.</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 restaurant app to 6,000+ tools. Process payments via Stripe, send order confirmations via SMS, sync with POS systems, and automate daily reporting.</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 Restaurant 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">Can I accept online orders through an Adalo restaurant app?</h3>
                    <div class="faq-answer">
                        <p>Yes. You can build a complete ordering flow with menu browsing, cart management, order customization (modifiers, special requests), and checkout. Orders are stored in Adalo's built-in relational database and appear on the kitchen display screen in real time. For payment processing, connect Stripe through Zapier or Custom Actions to accept credit card payments directly in your app.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">How do I manage and update my menu?</h3>
                    <div class="faq-answer">
                        <p>Menu items are stored in Adalo's database. You can add, edit, or remove items directly from the Adalo editor or through an admin screen in your app. Toggle item availability on and off for sold-out items. SheetBridge also lets you manage your menu from a Google Sheet if you prefer spreadsheet-based updates&mdash;changes sync automatically to your app.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">Can I build a loyalty program with Adalo?</h3>
                    <div class="faq-answer">
                        <p>Yes. Use Adalo's relational database to track customer points, visits, and reward redemptions. Build a loyalty dashboard where customers see their points balance and available rewards. Points are awarded automatically when orders are placed, and you define the redemption rules (e.g., 100 points = free appetizer). Many restaurant Makers find that loyalty programs built directly into their app drive significantly higher repeat visit rates than paper punch cards or third-party loyalty platforms.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">Can I take table reservations through the app?</h3>
                    <div class="faq-answer">
                        <p>Yes. Build a reservation system where customers select date, time, party size, and special requests. Reservations are stored in Adalo's database, and staff view and manage them from a dedicated dashboard. Push notifications can remind customers of upcoming reservations and reduce no-shows. For advanced table management with real-time floor plans, you'd connect to a dedicated reservation API, but basic reservation booking works natively in Adalo.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">Can I use Adalo as a kitchen display system?</h3>
                    <div class="faq-answer">
                        <p>Yes. Build a dedicated kitchen screen as a tablet app that shows incoming orders with item details, modifiers, special requests, and timestamps. Kitchen staff mark items as received, cooking, or ready, and the customer-facing app updates the order status in real time. Many restaurant Makers mount a tablet in the kitchen running the Adalo app to replace paper ticket printers.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">How does Adalo compare to Toast or Square for restaurants?</h3>
                    <div class="faq-answer">
                        <p>Toast and Square are purpose-built POS and restaurant management platforms with integrated hardware, payment processing, and restaurant-specific features. If you need a full POS system with physical terminals, tip management, and employee scheduling, Toast or Square is the more complete solution. Adalo's advantage is building a custom-branded ordering app that supplements your POS&mdash;letting customers order directly from your app (bypassing delivery platform commissions) while keeping your existing POS for in-house operations. At $36/mo with no per-order fees, Adalo is an affordable complement, not a POS replacement.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">What can't Adalo do for restaurant apps?</h3>
                    <div class="faq-answer">
                        <p>Adalo is not a POS replacement. It doesn't process in-person card payments, manage physical hardware terminals, handle tip calculations, or provide employee time tracking. It also doesn't include built-in delivery route optimization or integration with delivery driver networks. For restaurants that want a branded customer-facing ordering app with loyalty programs and push notifications&mdash;while keeping their existing POS for in-house operations&mdash;Adalo is the practical choice. For a complete POS overhaul, Toast or Square is the right path.</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/marketplace-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Marketplace Apps</a>, <a href="https://www.adalo.com/solutions/social-media-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Social Media Apps</a>, <a href="https://www.adalo.com/solutions/crm-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">CRM 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 Restaurant Apps with Adalo</h2>
                <p class="section-description">Step-by-step guides, video walkthroughs, and documentation to help you build and ship your restaurant app.</p>
            </div>
            <div class="resources-grid">
                <a href="https://www.adalo.com/posts/how-to-build-a-restaurant-app" class="resource-card">
                    <div class="resource-type">Tutorial</div>
                    <h3>How to Build a Restaurant Ordering App Without Code</h3>
                    <p>Full walkthrough: menu database, ordering flow, kitchen display, 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 Payment &amp; POS APIs</h3>
                    <p>How to use External Collections and Custom Actions to connect your app to Stripe, Square, and POS systems.</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>Manage your menu from a spreadsheet and sync changes automatically to your restaurant app.</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 restaurant 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 Restaurant's Own App?</h2>
            <p>Join Makers who have replaced third-party delivery commissions with their own branded ordering apps built on Adalo&mdash;keeping more of every dollar.</p>
            <div class="cta-buttons">
                <a href="https://www.adalo.com/signup" class="btn btn-white">Start Building Your Restaurant 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>

Restaurant & Food Service Apps