Booking & Appointment 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/booking-app-builder/#webpage","url":"https://www.adalo.com/solutions/booking-app-builder","name":"Booking & Appointment Apps | Adalo","description":"Build a custom booking 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 appointment calendars, booking forms, and client management\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":"Booking App Builder","item":"https://www.adalo.com/solutions/booking-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 set up recurring bookings?","acceptedAnswer":{"@type":"Answer","text":"Yes. You can build recurring booking logic using Adalo\u2019s relational database, creating templates that automatically generate future appointments at set intervals."}},{"@type":"Question","name":"Can I accept payments through the booking app?","acceptedAnswer":{"@type":"Answer","text":"Adalo doesn\u2019t have built-in payment processing, but you can connect Stripe or other payment providers via Zapier or Custom Actions. Payment records link to bookings in your relational database."}},{"@type":"Question","name":"How much does it cost to build a booking app?","acceptedAnswer":{"@type":"Answer","text":"Adalo\u2019s paid plans start at $36/mo with unlimited usage. Compare that to Calendly at $16\u201333/user/month or custom development at $30,000\u2013100,000 upfront. Free plan includes 500 records."}},{"@type":"Question","name":"What can\u2019t an Adalo booking app do?","acceptedAnswer":{"@type":"Answer","text":"Native Google Calendar two-way sync requires Zapier. Complex resource scheduling takes careful database design. Built-in payment processing requires a Stripe integration. For advanced features like automated waitlists or insurance verification, a purpose-built platform may be more appropriate."}}]}]}
    </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>Booking &amp; Appointments</span></div>
            <div class="hero-inner">
                <div class="hero-content">
                    <div class="use-case-badge">&#x1F4C5; Booking &amp; Scheduling</div>
                    <h1>Build Custom <span class="hero-highlight">Booking Apps</span> for Any Service</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 booking system that fits your service, not someone else's template.</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/bookings</div>
                            </div>
                            <div class="screen">
                                <div class="dk-header">
                                    <h4>Weekly Calendar</h4>
                                    <div class="dk-add">+ New Booking</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">Monday</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Sarah M.</div>
                                                <div class="glass-price">9:00 AM</div>
                                                <div class="glass-sub">Consultation</div>
                                                <span class="glass-tag glass-tag-ok">CONFIRMED</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Tom K.</div>
                                                <div class="glass-price">11:30 AM</div>
                                                <div class="glass-sub">Follow-up</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Nina P.</div>
                                                <div class="glass-price">3:00 PM</div>
                                                <span class="glass-tag glass-tag-new">NEW</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Tuesday</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Priya R.</div>
                                                <div class="glass-price">10:00 AM</div>
                                                <span class="glass-tag glass-tag-pop">PENDING</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Alex D.</div>
                                                <div class="glass-price">2:00 PM</div>
                                                <div class="glass-sub">Intake</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Raj K.</div>
                                                <div class="glass-price">4:30 PM</div>
                                                <div class="glass-sub">Coaching</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Wednesday</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Dana L.</div>
                                                <div class="glass-price">1:00 PM</div>
                                                <span class="glass-tag glass-tag-ok">CONFIRMED</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">James T.</div>
                                                <div class="glass-price">3:30 PM</div>
                                                <div class="glass-sub">Assessment</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Thursday</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Mike B.</div>
                                                <div class="glass-price">9:30 AM</div>
                                                <div class="glass-sub">Training</div>
                                                <span class="glass-tag glass-tag-ok">CONFIRMED</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Chen W.</div>
                                                <div class="glass-price">1:00 PM</div>
                                                <span class="glass-tag glass-tag-pop">WAITLIST</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>Monday</h4>
                                    <span class="neon-items">6 slots</span>
                                </div>
                                <div class="tb-kanban">
                                    <div style="flex:1;">
                                        <div class="neon-card">
                                            <div class="n-name">9:00 AM</div>
                                            <div class="n-amount neon-magenta">Sarah M.</div>
                                            <div class="n-contact">Consultation</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">10:00 AM</div>
                                            <div class="n-amount neon-cyan">Available</div>
                                            <div class="n-contact">Open slot</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">11:30 AM</div>
                                            <div class="n-amount neon-gold">Tom K.</div>
                                            <div class="n-contact">Follow-up</div>
                                        </div>
                                        <div class="tb-total-row">
                                            <div class="tb-total-label">BOOKED</div>
                                            <div class="tb-total-amount">4 / 6</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>My Appointments</h4>
                                    <span class="native-accent">3 upcoming</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;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>
                                <div class="native-progress-labels">
                                    <span>Booked</span>
                                    <span class="active">Confirmed</span>
                                    <span>Today</span>
                                    <span>Done</span>
                                </div>
                                <div class="native-content">
                                    <div class="native-card">
                                        <div class="native-row">
                                            <span class="native-label" style="margin:0;">Next</span>
                                            <span class="native-pill pill-success">Tomorrow</span>
                                        </div>
                                    </div>
                                    <div class="native-card">
                                        <div class="native-label">Upcoming</div>
                                        <div class="native-row">
                                            <span class="native-value">Mon 9:00 AM</span>
                                            <span class="native-price">Consult</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Tue 10:00 AM</span>
                                            <span class="native-price">Assess</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Thu 9:30 AM</span>
                                            <span class="native-price">Training</span>
                                        </div>
                                    </div>
                                    <div class="native-total">
                                        <span class="native-total-label">This Week</span>
                                        <span class="native-total-amount">3</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 Booking App You Can Imagine</h2><p class="section-description">From salon appointments to fitness classes&mdash;describe what you need and Ada, Adalo's AI builder, generates a working booking app with Magic Start in minutes.</p></div>
        <div class="app-types-grid">
            <div class="app-chip"><div class="chip-icon">&#x2702;&#xFE0F;</div><div class="chip-text">Salon &amp; Spa</div></div>
            <div class="app-chip"><div class="chip-icon">&#x1F3CB;&#xFE0F;</div><div class="chip-text">Fitness Classes</div></div>
            <div class="app-chip"><div class="chip-icon">&#x1FA7A;</div><div class="chip-text">Medical Appointments</div></div>
            <div class="app-chip"><div class="chip-icon">&#x1F3E0;</div><div class="chip-text">Property Viewings</div></div>
            <div class="app-chip"><div class="chip-icon">&#x1F4DA;</div><div class="chip-text">Tutoring Sessions</div></div>
            <div class="app-chip"><div class="chip-icon">&#x1F6E0;&#xFE0F;</div><div class="chip-text">Service Appointments</div></div>
            <div class="app-chip"><div class="chip-icon">&#x1F3A4;</div><div class="chip-text">Event Registration</div></div>
            <div class="app-chip"><div class="chip-icon">&#x1F4BC;</div><div class="chip-text">Consulting Calls</div></div>
        </div>
    </div></div>

<div class="section"><div class="container"><div class="section-header"><span class="section-label">The Challenge</span><h2>Appointment Scheduling Shouldn't Mean Phone Tag &amp; Double-Bookings</h2><p class="section-description">Most service businesses manage bookings through phone calls, text messages, and shared calendars. The result: double-bookings, no-shows, and hours spent on scheduling instead of serving clients.</p></div>
        <div class="problem-solution">
            <div class="problem-card"><h3 class="card-title">The Booking Management Problem</h3><ul class="card-list">
                <li>Appointments managed through phone calls, texts, and paper calendars</li>
                <li>Double-bookings when multiple staff members share one calendar</li>
                <li>No automated reminders&mdash;high no-show rates costing revenue</li>
                <li>Calendly and Acuity charge $16&ndash;33/user/month with limited customization</li>
                <li>No branded mobile app&mdash;clients book through a generic web link</li>
                <li>No connection between bookings, client records, and payment history</li>
            </ul></div>
            <div class="solution-card"><h3 class="card-title">The Adalo Booking Solution</h3><ul class="card-list">
                <li>Visual calendar with available time slots that clients book directly</li>
                <li>Built-in relational database prevents conflicts across providers</li>
                <li>Push notification reminders reduce no-shows without manual follow-up</li>
                <li>$36/mo flat for unlimited bookings, clients, and providers&mdash;no per-seat fees</li>
                <li>Your own branded native iOS and Android app on the App Store and Google Play</li>
                <li>Client profiles linked to booking history, notes, and payment records</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 Service Business Needs to Manage Bookings</h2><p class="section-description">Built for businesses that need scheduling, client management, and reminders&mdash;on web, iOS (native), and Android (native) from a single build.</p></div>
        <div class="features">
            <div class="feature"><div class="feature-icon">&#x1F4C5;</div><h3>Calendar &amp; Time Slots</h3><p>Display available time slots by day, week, or month. Clients pick their preferred time and book instantly. Adalo's built-in relational database ensures no double-bookings across providers or locations.</p></div>
            <div class="feature"><div class="feature-icon">&#x1F4DD;</div><h3>Booking Form</h3><p>Collect the information you need at booking time&mdash;service type, provider preference, notes, contact details. Custom fields let you tailor the form to your specific workflow.</p></div>
            <div class="feature"><div class="feature-icon">&#x1F514;</div><h3>Push Notification Reminders</h3><p>Native push notifications remind clients before their appointment. Reduce no-shows by 30&ndash;50% without manual phone calls or text messages. Configurable timing (24 hours, 1 hour, etc.).</p></div>
            <div class="feature"><div class="feature-icon">&#x1F465;</div><h3>Multi-Provider Scheduling</h3><p>Support multiple service providers with individual availability schedules. Clients choose their preferred provider or get assigned to the next available slot. Each provider sees only their own calendar.</p></div>
            <div class="feature"><div class="feature-icon">&#x1F4B3;</div><h3>Payment Integration</h3><p>Collect deposits or full payment at booking time by connecting Stripe or other payment processors via Zapier. Link payments to booking records so you always know who has paid.</p></div>
            <div class="feature"><div class="feature-icon">&#x1F464;</div><h3>Client Profiles</h3><p>Every client has a profile with booking history, notes, preferences, and contact info. Service providers see everything they need about a client before the appointment starts.</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 Booking 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 booking 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 Booking App to Ada</h3><p>Tell Ada, Adalo's AI builder, what your service business needs. Magic Start generates a complete booking 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 booking app for a dog grooming business with 3 groomers. I need a calendar where clients pick a time slot, a booking form for pet details and service type, a groomer dashboard showing today's appointments, and push notification reminders 24 hours before each appointment."</div></div></div></div></div>
            <div class="workflow-step"><div class="step-number">2</div><div class="step-content"><h3>Set Up Your Calendar &amp; Services</h3><p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to configure your service types, time slots, provider availability, and booking rules. Add features with Magic Add using natural language.</p><div class="step-details"><div class="step-details-title">Typical booking statuses:</div><div class="columns-list"><div class="column-item">Available</div><div class="column-item">Requested</div><div class="column-item">Confirmed</div><div class="column-item">In Progress</div><div class="column-item">Completed</div><div class="column-item">Cancelled</div></div></div></div></div>
            <div class="workflow-step"><div class="step-number">3</div><div class="step-content"><h3>Connect Data Sources &amp; Payments</h3><p>Use Adalo's built-in relational database for bookings, clients, and providers. Connect Google Sheets via SheetBridge if you already manage schedules in spreadsheets. Add Stripe for payments and Google Calendar sync via Zapier.</p><div class="step-details"><div class="step-details-title">Common booking integrations:</div><div class="screens-grid"><div class="screen-item"><div class="screen-title">SheetBridge</div><div class="screen-desc">Import existing client and schedule data from Google Sheets</div></div><div class="screen-item"><div class="screen-title">Stripe via Zapier</div><div class="screen-desc">Accept deposits and payments at booking time</div></div><div class="screen-item"><div class="screen-title">Google Calendar</div><div class="screen-desc">Sync bookings to staff Google Calendars via Zapier</div></div><div class="screen-item"><div class="screen-title">Webhooks</div><div class="screen-desc">Trigger automations when bookings are created or cancelled</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 booking app on any device form factor directly from the canvas. Test the full flow&mdash;browsing available times, submitting a booking, receiving a confirmation, getting a reminder notification&mdash;on iPhone, Android, tablet, and desktop.</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 booking 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. Clients download your branded app and book appointments directly from their phones.</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 Booking</span><h2>Your Brand, Your App&mdash;Not a Generic Scheduling Link</h2><p class="section-description">Stop sending clients to a Calendly page. Give them a native app with your name on it.</p></div>
        <div class="benefits-grid">
            <div class="benefit-card"><div class="benefit-icon">&#x1F3F7;&#xFE0F;</div><h3>Your Branded App</h3><p>Clients download your app from the App Store and Google Play&mdash;not a generic scheduling page. Your brand, your experience, your relationship with the customer.</p></div>
            <div class="benefit-card"><div class="benefit-icon">&#x1F4B8;</div><h3>Flat-Rate Pricing</h3><p>Calendly charges $16&ndash;33/user/month. A 5-person team costs $80&ndash;165/mo. Adalo costs $36/mo total with unlimited bookings, providers, and clients. No per-seat fees.</p></div>
            <div class="benefit-card"><div class="benefit-icon">&#x1F514;</div><h3>Reduce No-Shows</h3><p>Native push notifications remind clients before appointments. Industry data shows automated reminders reduce no-shows by 30&ndash;50%. No need for third-party SMS services for basic reminders.</p></div>
            <div class="benefit-card"><div class="benefit-icon">&#x1F5C4;&#xFE0F;</div><h3>Connected Client Data</h3><p>Bookings, client profiles, payment history, and service notes all live in one relational database. No more switching between Calendly, a spreadsheet, and an invoicing tool.</p></div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F50D;</div>
                    <h3>Design Every Flow on One Canvas</h3>
                    <p>See client booking, provider calendars, confirmation screens, and admin dashboards simultaneously. Adalo's multi-screen canvas lets you design scheduling flows visually with AI direction.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4CA;</div>
                    <h3>Scale with Your Client Base</h3>
                    <p>Adalo 3.0 handles 1M+ monthly active users with 3–4× faster performance. Whether you manage 100 bookings a week or 10,000, the infrastructure grows with your business.</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 Booking App vs. Calendly/Acuity vs. Custom Dev</h2><p class="section-description">See how building your own booking app with Adalo compares to the alternatives.</p></div>
        <table class="comp-table">
            <thead><tr><th>Factor</th><th>Adalo Booking App</th><th>Calendly / Acuity</th><th>Custom Development</th></tr></thead>
            <tbody>
                <tr><td>Build Time</td><td>&#x2705; Days to weeks</td><td>Immediate (template-based)</td><td>2&ndash;6 months</td></tr>
                <tr><td>Monthly Cost</td><td>&#x2705; $36/mo flat (unlimited)</td><td>$16&ndash;33 per user per month</td><td>$5,000&ndash;15,000/mo (hosting + team)</td></tr>
                <tr><td>Native Mobile App</td><td>&#x2705; iOS and Android (true native)</td><td>Web only (booking page)</td><td>Yes (if budgeted separately)</td></tr>
                <tr><td>Push Notifications</td><td>&#x2705; Built-in</td><td>Email and SMS only</td><td>Custom implementation required</td></tr>
                <tr><td>Customization</td><td>&#x2705; Full &mdash; your screens, your workflow</td><td>Limited to theme options</td><td>Full (at development cost)</td></tr>
                <tr><td>Client Profiles</td><td>&#x2705; Full profiles with history</td><td>Basic contact info</td><td>Full (at development cost)</td></tr>
                <tr><td>Branding</td><td>&#x2705; Your app name on App Store</td><td>Calendly-branded page</td><td>Fully custom</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 Booking App Success</h2><p class="section-description">Patterns from Makers who have built and shipped successful booking apps with Adalo.</p></div>
        <div class="practices-grid">
            <div class="practice-card"><h3><span class="practice-icon">&#x1F4C5;</span> Start with the Client Booking Flow</h3><p>Build the experience your clients see first: browse available times, select a slot, fill in details, confirm. Make it frictionless. Two or three taps from opening the app to a confirmed booking.</p></div>
            <div class="practice-card"><h3><span class="practice-icon">&#x1F514;</span> Enable Reminders Immediately</h3><p>Push notification reminders are your biggest ROI feature. Set them up on day one. A 24-hour reminder alone can cut no-shows dramatically and pays for the entire app subscription in saved revenue.</p></div>
            <div class="practice-card"><h3><span class="practice-icon">&#x1F465;</span> Add Provider Views Second</h3><p>Once your client booking flow works, build the provider dashboard. Show each provider only their own appointments, with client details and notes. Keep it simple&mdash;providers need a clean daily schedule, not a complex admin panel.</p></div>
            <div class="practice-card"><h3><span class="practice-icon">&#x1F4B3;</span> Add Payments After Validation</h3><p>Get your booking flow working and validated with real clients before adding payment collection. Stripe integration via Zapier is straightforward, but it's one more thing to test. Prove the booking flow first.</p></div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Import Clients from Spreadsheets</h3>
                    <p>If your client list lives in Google Sheets, use SheetBridge to connect it as a relational database. Migrate contacts, booking history, and preferences without manual re-entry.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F9EA;</span> Book 20 Real Appointments</h3>
                    <p>Before launching to clients, complete 20 real bookings with your team—including rescheduling and cancellations. Real scheduling behavior exposes edge cases that test data won't reveal.</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 Booking App</h2></div>
        <div class="requirements-cards">
            <div class="requirement-card"><div class="requirement-icon">&#x267E;&#xFE0F;</div><div class="requirement-content"><h4>Unlimited Bookings on Paid Plans</h4><p>No caps on bookings, clients, or providers. 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 appointment reminders, new booking alerts, and cancellation notices. Keeps clients and providers in sync without manual follow-up.</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 schedules 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 booking app to 6,000+ tools. Sync with Stripe, Google Calendar, Mailchimp, Twilio SMS, and more.</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 Booking 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 set up recurring bookings?</h3><div class="faq-answer"><p>Yes. You can build recurring booking logic using Adalo's relational database. Create a booking template that automatically generates future appointments at set intervals (weekly, biweekly, monthly). Clients see their recurring series in the app, and providers see them on their calendar. For complex recurrence rules (e.g., every third Tuesday), you may want to handle the generation logic via a Zapier automation that creates records on a schedule.</p></div></div>
            <div class="faq-item"><h3 class="faq-question">Can I accept payments through the booking app?</h3><div class="faq-answer"><p>Adalo doesn't have built-in payment processing, but you can connect Stripe or other payment providers via Zapier or Custom Actions. Collect deposits at booking time, full payment before the appointment, or invoice after the service. Payment records link to the booking in your relational database so you always know the payment status for each appointment.</p></div></div>
            <div class="faq-item"><h3 class="faq-question">How do appointment reminders work?</h3><div class="faq-answer"><p>Adalo's native iOS and Android apps support built-in push notifications. You can trigger reminders based on time before the appointment&mdash;24 hours, 2 hours, or any interval you configure. Clients receive the reminder on their phone even if the app isn't open. For SMS reminders (to reach clients who haven't downloaded the app), connect Twilio via Zapier.</p></div></div>
            <div class="faq-item"><h3 class="faq-question">Can I manage multiple providers with separate schedules?</h3><div class="faq-answer"><p>Yes. Adalo's relational database links providers to their individual availability slots and bookings. Each provider sets their own working hours. Clients see only available times when browsing. The database prevents double-bookings across all providers automatically. Providers log in and see only their own schedule&mdash;not everyone else's appointments.</p></div></div>
            <div class="faq-item"><h3 class="faq-question">Does the booking app sync with Google Calendar?</h3><div class="faq-answer"><p>Adalo doesn't have native Google Calendar integration, but you can sync bookings to Google Calendar via Zapier or Make. When a booking is created in Adalo, a Zapier automation creates a corresponding Google Calendar event for the provider. Changes and cancellations can trigger updates to the calendar event. This keeps providers' existing calendar workflow intact while adding the Adalo booking experience for clients.</p></div></div>
            <div class="faq-item"><h3 class="faq-question">How much does it cost to build a booking app?</h3><div class="faq-answer"><p>Adalo's paid plans start at $36/mo with unlimited usage&mdash;no caps on bookings, clients, providers, or storage. Compare that to Calendly at $16&ndash;33/user/month (a 5-person team costs $80&ndash;165/mo) or Acuity at similar per-user pricing. Custom development typically costs $30,000&ndash;100,000 upfront. The free plan includes 500 database records so you can prototype your booking app before committing.</p></div></div>
            <div class="faq-item"><h3 class="faq-question">What can't an Adalo booking app do?</h3><div class="faq-answer"><p>Adalo builds great booking apps for service businesses, but it has limitations compared to specialized scheduling platforms. Native Google Calendar two-way sync requires Zapier (not built-in). Complex resource scheduling (rooms + equipment + providers simultaneously) takes careful database design. Built-in payment processing requires a Stripe integration. If you need advanced features like automated waitlists, insurance verification, or group booking with capacity management out of the box, a purpose-built platform like Mindbody or Jane App may be more appropriate. For most service businesses that need branded booking with client profiles and mobile apps, Adalo covers 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/delivery-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Delivery 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/marketplace-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Marketplace Apps</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 Booking Apps with Adalo</h2><p class="section-description">Step-by-step guides, video walkthroughs, and documentation to help you build and ship your booking app.</p></div>
        <div class="resources-grid">
            <a href="https://www.adalo.com/posts/how-to-build-a-booking-app" class="resource-card"><div class="resource-type">Tutorial</div><h3>How to Build a Booking App Without Code</h3><p>Full walkthrough: availability calendar, booking form, provider dashboard, 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; Calendar APIs</h3><p>How to use External Collections and Custom Actions for Stripe payments and calendar sync.</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 schedule to a real booking 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 booking 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 Booking App?</h2><p>Join Makers who have replaced generic scheduling links and per-seat fees with custom branded booking apps built on Adalo&mdash;giving clients a native app experience.</p><div class="cta-buttons"><a href="https://www.adalo.com/signup" class="btn btn-white">Start Building Your Booking 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>

Booking & Scheduling Apps