Healthcare App Builder

:root {
            --teal: #009885;
            --teal-dark: #007D6E;
            --gold: #FFBB00;
            --red: #EF4D30;
            --navy: #333333;
            --navy-light: #121212;
            --gray-50: #F7F9FC;
            --gray-100: #E8ECF4;
            --gray-600: #6C757D;
            --gray-800: #121212;
            --white: #FFFFFF;
            --cream: #F8F4EE;
            --cream-light: #F7F3EE;
        }

body {
            font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.6;
            color: var(--gray-800);
            background: var(--white);
            overflow-x: hidden;
        }

.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;
        }

/* =============================
           CYBERPUNK DEVICE CLUSTER
           ============================= */

.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/healthcare-app-builder/#webpage",
                "url": "https://www.adalo.com/solutions/healthcare-app-builder",
                "name": "Healthcare App Builder | Adalo",
                "description": "Build a custom healthcare 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 scheduling, wellness tracking, and patient communication tools. Publish to the Apple App Store and Google Play.",
                "isPartOf": { "@id": "https://www.adalo.com/#website" },
                "breadcrumb": { "@id": "https://www.adalo.com/solutions/healthcare-app-builder/#breadcrumb" }
            },
            {
                "@type": "BreadcrumbList",
                "@id": "https://www.adalo.com/solutions/healthcare-app-builder/#breadcrumb",
                "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": "Healthcare 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": "Is Adalo HIPAA compliant?", "acceptedAnswer": { "@type": "Answer", "text": "No. Adalo is not HIPAA-certified and should not be used for storing or transmitting protected health information (PHI). Adalo is well-suited for non-clinical healthcare applications: appointment scheduling, wellness tracking, patient communication, and health education platforms. For clinical EHR data or diagnostic information, use a HIPAA-compliant platform." } },
                    { "@type": "Question", "name": "Can I build a patient scheduling app without coding?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo's no-code app builder requires zero coding. Tell Ada (Adalo's AI builder) what your scheduling app needs and Magic Start generates a complete app with a database, screens, and navigation. Makers routinely build and publish scheduling apps to the App Store and Google Play without writing code." } },
                    { "@type": "Question", "name": "How much does a custom healthcare app cost?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo's paid plans start at $36/mo with unlimited usage\u2014no caps on users, records, actions, or storage. Compare that to enterprise EHR portals at $300\u2013$700+/provider/month or custom development starting at $100,000+. The free plan includes 500 database records so you can prototype before committing." } },
                    { "@type": "Question", "name": "Can patients use the app on their phones?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo builds true native iOS and Android apps\u2014not web wrappers. Patients download your app from the Apple App Store or Google Play. Native apps mean push notifications for appointment reminders and medication alerts, fast performance, and an experience patients actually want to use." } },
                    { "@type": "Question", "name": "What types of healthcare apps can I build with Adalo?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo works well for patient-facing engagement apps: appointment scheduling, wellness tracking, medication reminders, care team messaging, digital intake forms, and clinic management dashboards. These are non-clinical applications that improve patient engagement without handling protected health information." } },
                    { "@type": "Question", "name": "Can I import data from spreadsheets?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. SheetBridge lets you connect a Google Sheet directly as a relational database\u2014ideal for practices that track schedules or patient lists in spreadsheets. Alternatively, you can import CSV data into Adalo's built-in database." } },
                    { "@type": "Question", "name": "What can't Adalo do for healthcare apps?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo is not HIPAA-certified, so it should not be used for storing protected health information (PHI), clinical records, lab results, or diagnostic data. It also does not include native integrations with EHR systems (Epic, Cerner, Athena), medical device data feeds, or e-prescribing services. For scheduling, wellness tracking, and patient communication, Adalo is a practical and affordable 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>Healthcare App Builder</span>
            </div>
            <div class="hero-inner">
                <div class="hero-content">
                    <div class="use-case-badge">
                        &#x1FA7A; Healthcare &amp; Wellness
                    </div>
                    <h1>
                        Build Custom <span class="hero-highlight">Healthcare Apps</span> for Patient Engagement
                    </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 scheduling, wellness tracking, and patient communication tools that improve care coordination.
                    </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/patients</div>
                            </div>
                            <div class="screen">
                                <div class="dk-header">
                                    <h4>Patient Records</h4>
                                    <div class="dk-add">+ New Patient</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">Today</div>
                                            <div class="glass-card">
                                                <div class="glass-name">J. Smith, 45</div>
                                                <div class="glass-price">9:00 AM</div>
                                                <span class="glass-tag glass-tag-new">CHECK-UP</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">M. Garcia, 32</div>
                                                <div class="glass-price">10:30 AM</div>
                                                <div class="glass-sub">Follow-up</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">P. Wilson, 55</div>
                                                <div class="glass-price">1:00 PM</div>
                                                <span class="glass-tag glass-tag-pop">NEW PT</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Pending</div>
                                            <div class="glass-card">
                                                <div class="glass-name">A. Johnson</div>
                                                <div class="glass-price">Lab results</div>
                                                <span class="glass-tag glass-tag-sale">URGENT</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">R. Lee, 58</div>
                                                <div class="glass-price">Referral</div>
                                                <div class="glass-sub">Cardiology</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">K. Davis, 40</div>
                                                <div class="glass-price">Imaging</div>
                                                <div class="glass-sub">X-ray results</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">In Progress</div>
                                            <div class="glass-card">
                                                <div class="glass-name">S. Patel, 41</div>
                                                <div class="glass-price">Exam Room 3</div>
                                                <span class="glass-tag glass-tag-ok">ACTIVE</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">L. Nguyen, 29</div>
                                                <div class="glass-price">Exam Room 1</div>
                                                <div class="glass-sub">Vitals done</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Complete</div>
                                            <div class="glass-card">
                                                <div class="glass-name">T. Brown, 67</div>
                                                <div class="glass-price">8:30 AM</div>
                                                <span class="glass-tag glass-tag-ok">DONE</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">W. Kim, 52</div>
                                                <div class="glass-price">9:15 AM</div>
                                                <span class="glass-tag glass-tag-ok">BILLED</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>Visit Note</h4>
                                    <span class="neon-items">J. Smith</span>
                                </div>
                                <div class="tb-kanban">
                                    <div style="flex:1;">
                                        <div class="neon-card">
                                            <div class="n-name">Chief Complaint</div>
                                            <div class="n-amount neon-cyan">Annual Exam</div>
                                            <div class="n-contact">Age: 45</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Vitals</div>
                                            <div class="n-amount neon-gold">BP 120/80</div>
                                            <div class="n-contact">HR: 72 bpm</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Assessment</div>
                                            <div class="n-amount neon-magenta">Healthy</div>
                                            <div class="n-contact">No concerns</div>
                                        </div>
                                        <div class="tb-total-row">
                                            <div class="tb-total-label">NEXT VISIT</div>
                                            <div class="tb-total-amount">6 months</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>Medications</h4>
                                    <span class="native-accent">3 active</span>
                                </div>
                                <div class="native-progress">
                                    <div class="progress-dot" style="background:#059669;"></div>
                                    <div class="progress-line" style="background:#a7f3d0;"></div>
                                    <div class="progress-dot" style="background:#059669;"></div>
                                    <div class="progress-line" style="background:#a7f3d0;"></div>
                                    <div class="progress-dot" style="background:#059669;box-shadow:0 0 6px rgba(5,150,105,0.3);"></div>
                                    <div class="progress-line" style="background:#e5e7eb;"></div>
                                    <div class="progress-dot" style="background:#e5e7eb;"></div>
                                </div>
                                <div class="native-progress-labels">
                                    <span>Prescribed</span>
                                    <span>Filled</span>
                                    <span class="active">Taking</span>
                                    <span>Refill</span>
                                </div>
                                <div class="native-content">
                                    <div class="native-card">
                                        <div class="native-row">
                                            <span class="native-label" style="margin:0;">Next Dose</span>
                                            <span class="native-pill pill-success">8:00 PM</span>
                                        </div>
                                    </div>
                                    <div class="native-card">
                                        <div class="native-label">Active Rx</div>
                                        <div class="native-row">
                                            <span class="native-value">Lisinopril 10mg</span>
                                            <span class="native-price">1x daily</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Vitamin D</span>
                                            <span class="native-price">1x daily</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Metformin</span>
                                            <span class="native-price">2x daily</span>
                                        </div>
                                    </div>
                                    <div class="native-total">
                                        <span class="native-total-label">Refill In</span>
                                        <span class="native-total-amount">14d</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 Healthcare App You Can Imagine</h2>
                <p class="section-description">
                    From appointment schedulers to wellness platforms&mdash;describe what you need and Ada, Adalo's AI builder, generates a working healthcare app with Magic Start in minutes.
                </p>
            </div>

<div class="app-types-grid">
                <div class="app-chip"><div class="chip-icon">&#x1F4C5;</div><div class="chip-text">Appointment Scheduler</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F464;</div><div class="chip-text">Patient Portal</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4CA;</div><div class="chip-text">Health Tracker</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F48A;</div><div class="chip-text">Medication Reminders</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4AC;</div><div class="chip-text">Care Messaging</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F3E5;</div><div class="chip-text">Clinic Management</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F9D8;</div><div class="chip-text">Wellness Programs</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4CB;</div><div class="chip-text">Intake Forms</div></div>
            </div>
        </div>
    </div>

<div class="section">
        <div class="container">
            <div class="section-header">
                <span class="section-label">The Challenge</span>
                <h2>Healthcare Teams Deserve Better Than Paper Forms &amp; Disconnected Systems</h2>
                <p class="section-description">Most small practices, wellness programs, and care coordinators are stuck between expensive EHR platforms and fragmented tools that don't talk to each other. There's a better way to engage patients.</p>
            </div>
            <div class="problem-solution">
                <div class="problem-card">
                    <h3 class="card-title">The Healthcare App Problem</h3>
                    <ul class="card-list">
                        <li>Appointment scheduling managed via phone calls, paper calendars, or generic tools</li>
                        <li>Patient intake forms still on paper clipboards, manually entered into systems</li>
                        <li>No mobile app for patients to view appointments, track health, or message providers</li>
                        <li>EHR systems cost $300&ndash;$700+/provider/month with complex implementations</li>
                        <li>Wellness and care coordination tracked in spreadsheets with no patient visibility</li>
                        <li>Off-the-shelf patient portals are generic and don't match your care workflow</li>
                    </ul>
                </div>
                <div class="solution-card">
                    <h3 class="card-title">The Adalo Healthcare Solution</h3>
                    <ul class="card-list">
                        <li>Visual canvas lets you design scheduling, intake, and communication screens your way</li>
                        <li>Built-in relational database connects patients, appointments, providers, and records</li>
                        <li>Native iOS and Android apps give patients real-time access to appointments and health data</li>
                        <li>$36/mo with unlimited users, records, and storage&mdash;no per-provider charges</li>
                        <li>Ada generates a working healthcare app from a description&mdash;launch in days</li>
                        <li>Your care workflow becomes the app, not the other way around</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 Healthcare App Needs in One Platform</h2>
                <p class="section-description">Built for practices, wellness programs, and care teams that need a custom patient engagement app&mdash;on web, iOS, and Android from a single build.</p>
            </div>
            <div class="features">
                <div class="feature"><div class="feature-icon">&#x1F4C5;</div><h3>Appointment Scheduling</h3><p>Build booking screens with available time slots, provider selection, and appointment types. Patients book directly from the app and receive confirmation notifications. Staff see the full schedule on the web dashboard.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F464;</div><h3>Patient Profiles</h3><p>Store patient information, visit history, and care notes in Adalo's built-in relational database. Providers see the full patient timeline at a glance&mdash;appointments, notes, and communications all connected automatically.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F4CA;</div><h3>Health &amp; Wellness Tracking</h3><p>Patients log daily health metrics&mdash;blood pressure, weight, mood, symptoms, or custom measurements. Providers and patients both see trends over time, enabling proactive care conversations.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F48A;</div><h3>Medication Reminders</h3><p>Native push notifications remind patients to take medications, attend appointments, or complete wellness tasks. Critical for medication adherence and chronic condition management.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F4AC;</div><h3>Secure Messaging</h3><p>Build in-app messaging between patients and care teams. Patients ask questions, share updates, and receive guidance without phone tag. All messages are stored within the app's database.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F4CB;</div><h3>Digital Intake Forms</h3><p>Replace paper clipboards with digital intake forms patients complete on their phones before arriving. Data flows directly into the patient database&mdash;no manual data entry required.</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 Healthcare 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 healthcare 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 Healthcare App to Ada</h3>
                        <p>Tell Ada, Adalo's AI builder, what your practice or wellness program 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 patient engagement app for a chiropractic clinic. I need appointment scheduling with provider selection, a patient portal showing upcoming visits and health notes, a symptom tracker where patients log daily pain levels, and a messaging screen to communicate with the care team."</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Design Your Patient Experience</h3>
                        <p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust scheduling flows, patient profiles, and health tracking screens. Add features with Magic Add using natural language.</p>
                        <div class="step-details">
                            <div class="step-details-title">Core database collections:</div>
                            <div class="columns-list">
                                <div class="column-item">Patients</div>
                                <div class="column-item">Providers</div>
                                <div class="column-item">Appointments</div>
                                <div class="column-item">Health Logs</div>
                                <div class="column-item">Messages</div>
                                <div class="column-item">Intake Forms</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>Connect Data Sources</h3>
                        <p>Use Adalo's built-in relational database for patient and appointment data, or connect Google Sheets via SheetBridge if your practice already tracks schedules in spreadsheets. Add Zapier or Make integrations for email confirmations, calendar sync, and payment processing.</p>
                        <div class="step-details">
                            <div class="step-details-title">Common healthcare app integrations:</div>
                            <div class="screens-grid">
                                <div class="screen-item"><div class="screen-title">SheetBridge</div><div class="screen-desc">Import existing patient lists from Google Sheets as a relational database</div></div>
                                <div class="screen-item"><div class="screen-title">Zapier / Make</div><div class="screen-desc">Connect to email, calendar, and billing tools for appointment confirmations</div></div>
                                <div class="screen-item"><div class="screen-title">Custom API</div><div class="screen-desc">External Collections connect to scheduling or billing system APIs</div></div>
                                <div class="screen-item"><div class="screen-title">Webhooks</div><div class="screen-desc">Trigger automations when appointments are booked or forms are submitted</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 healthcare app on any device form factor directly from the canvas. Test the full patient flow&mdash;booking appointments, completing intake forms, logging health data, sending messages&mdash;on iPhone, Android, tablet, and desktop before publishing.</p>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">5</div>
                    <div class="step-content">
                        <h3>Publish to App Stores</h3>
                        <p>Deploy your healthcare 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. Patients download the app and start engaging with their care team immediately.</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 Healthcare</span>
                <h2>Patient Engagement That Fits Your Budget &amp; Your Workflow</h2>
                <p class="section-description">Stop paying per provider for features you don't use. Build exactly the patient engagement tools your practice needs.</p>
            </div>
            <div class="benefits-grid">
                <div class="benefit-card"><div class="benefit-icon">&#x1F4B8;</div><h3>Fraction of EHR Portal Costs</h3><p>Adalo costs $36/mo with unlimited users, records, and storage. No per-provider fees. Enterprise patient portals from EHR vendors cost $300&ndash;$700+/provider/month&mdash;Adalo is $36/mo total for scheduling, communication, and wellness tracking.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F4F1;</div><h3>Native Patient Experience</h3><p>True native iOS and Android apps with push notifications for appointment reminders and medication alerts. Patients engage through a branded app on their phones, not a clunky web portal they'll forget about.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F5C4;&#xFE0F;</div><h3>One Database for Everything</h3><p>Adalo's built-in relational database connects patients, providers, appointments, health logs, and messages without configuring external services. No Firebase setup. No Supabase. It just works.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F680;</div><h3>Ship in Days, Not Months</h3><p>Ada generates your healthcare app from a description. Visually customize it on the canvas. Publish to three platforms from one build. Most Makers go from idea to live patient app in under a week.</p></div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F50D;</div>
                    <h3>Design Patient Flows Visually</h3>
                    <p>See scheduling, patient intake, provider dashboards, and record views simultaneously on Adalo's canvas. Visually direct the AI to refine workflows—no coding or chat prompts needed.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4CA;</div>
                    <h3>Infrastructure That Scales</h3>
                    <p>Adalo 3.0 handles 1M+ monthly active users with 3–4× faster performance. Whether your practice sees 50 patients a week or 5,000, the platform scales without migration.</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 Healthcare App vs. Epic / Custom EHR vs. Custom Development</h2>
                <p class="section-description">See how building your own patient engagement app with Adalo compares to the alternatives.</p>
            </div>
            <table class="comp-table">
                <thead>
                    <tr>
                        <th>Factor</th>
                        <th>Adalo Healthcare App</th>
                        <th>Epic / Custom EHR Portal</th>
                        <th>Custom Development</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>Build Time</td><td>&#x2705; Days to weeks</td><td>6&ndash;18 months implementation</td><td>4&ndash;8 months</td></tr>
                    <tr><td>Monthly Cost</td><td>&#x2705; $36/mo flat (unlimited users)</td><td>$300&ndash;700+ per provider per month</td><td>$10,000&ndash;30,000/mo (hosting + team)</td></tr>
                    <tr><td>Native Mobile App</td><td>&#x2705; iOS and Android (true native)</td><td>Web portal or limited mobile</td><td>Yes (if budgeted separately)</td></tr>
                    <tr><td>Scheduling</td><td>&#x2705; Fully custom booking flow</td><td>Integrated but rigid</td><td>Custom implementation required</td></tr>
                    <tr><td>Customization</td><td>&#x2705; Full &mdash; your screens, your workflow</td><td>Limited by vendor configuration</td><td>Full (at development cost)</td></tr>
                    <tr><td>HIPAA Compliance</td><td>Not HIPAA-certified (non-clinical use)</td><td>&#x2705; HIPAA-compliant</td><td>Must be built to spec</td></tr>
                    <tr><td>Time to Change</td><td>&#x2705; Minutes</td><td>Weeks to months (vendor support)</td><td>Sprint cycle (2&ndash;4 weeks)</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 Healthcare App Success</h2>
                <p class="section-description">Patterns from Makers who have built and shipped successful healthcare and wellness apps with Adalo.</p>
            </div>
            <div class="practices-grid">
                <div class="practice-card"><h3><span class="practice-icon">&#x1F4C5;</span> Start with Scheduling</h3><p>Appointment scheduling is the single highest-value feature for patient engagement. Build the booking flow first (available slots, provider selection, confirmation), then expand to intake forms, messaging, and health tracking.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F464;</span> Separate Staff and Patient Views</h3><p>Build role-based access using Adalo's user roles. Staff see the full schedule, patient records, and admin tools. Patients see only their own appointments, health data, and messages. One app, two experiences.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F514;</span> Use Push Notifications Strategically</h3><p>Appointment reminders 24 hours before, medication alerts at scheduled times, and new message notifications. Avoid over-notifying&mdash;patients will disable notifications if the app is too noisy.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F512;</span> Understand Compliance Boundaries</h3><p>Adalo is not HIPAA-certified. Use it for scheduling, wellness tracking, and general communication. For clinical data, lab results, or protected health information, work with a compliance-reviewed platform or consult your compliance officer.</p></div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Migrate Patient Lists with SheetBridge</h3>
                    <p>If your patient records live in spreadsheets, use SheetBridge to connect them as a relational database. Import demographics, appointment history, and notes without manual data entry.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F9EA;</span> Pilot with One Department</h3>
                    <p>Roll out to a single department or location before expanding. Real clinical workflows—appointment overlap, walk-ins, provider handoffs—expose edge cases that lab testing misses.</p>
                </div>
            </div>
        </div>
    </div>

<div class="section requirements">
        <div class="container">
            <div class="section-header">
                <span class="section-label">What's Included</span>
                <h2>Everything You Need to Build &amp; Run a Healthcare 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 patients, appointments, or health logs. 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, medication alerts, and new message notifications. Keeps patients engaged and improves care adherence.</p></div></div>
                <div class="requirement-card"><div class="requirement-icon">&#x1F4C4;</div><div class="requirement-content"><h4>Google Sheets via SheetBridge</h4><p>Already tracking patient 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 healthcare app to 6,000+ tools. Sync with calendar apps, email for appointment confirmations, billing platforms, and communication tools via Zapier or Make.</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 Healthcare 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">Is Adalo HIPAA compliant?</h3>
                    <div class="faq-answer">
                        <p>No. Adalo is not HIPAA-certified and should not be used for storing or transmitting protected health information (PHI) as defined by HIPAA. Adalo is well-suited for non-clinical healthcare applications: appointment scheduling, wellness tracking, patient communication, care coordination tools, and health education platforms. For clinical EHR data, lab results, or diagnostic information that qualifies as PHI, use a HIPAA-compliant platform. Consult your compliance officer to determine which data in your specific use case qualifies as PHI.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Can I build a patient scheduling app without coding?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo's no-code app builder requires zero coding. Tell Ada (Adalo's AI builder) what your scheduling app needs and Magic Start generates a complete app with a database, screens, and navigation. Then visually customize everything on the canvas by pointing at elements and directing changes. Makers routinely build and publish appointment scheduling apps to the App Store and Google Play without writing code.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">How much does a custom healthcare app cost?</h3>
                    <div class="faq-answer">
                        <p>Adalo's paid plans start at $36/mo with unlimited usage&mdash;no caps on users, records, actions, or storage. Compare that to enterprise EHR patient portals at $300&ndash;$700+/provider/month or custom healthcare app development starting at $100,000+. The free plan includes 500 database records so you can prototype your healthcare app before committing.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Can patients use the app on their phones?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo builds true native iOS and Android apps&mdash;not web wrappers. Patients download your app from the Apple App Store or Google Play. Native apps mean push notifications for appointment reminders and medication alerts, fast performance, and an experience patients actually want to use. This is a significant upgrade over web-based patient portals that most patients never log into.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">What types of healthcare apps can I build with Adalo?</h3>
                    <div class="faq-answer">
                        <p>Adalo works well for patient-facing engagement apps: appointment scheduling, wellness and symptom tracking, medication reminders, care team messaging, digital intake forms, health education, chronic condition management tools, and clinic management dashboards. These are non-clinical applications that improve patient engagement without handling protected health information. For clinical systems that store PHI (electronic health records, diagnostic data, lab results), a HIPAA-compliant platform is required.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Can I import data from spreadsheets?</h3>
                    <div class="faq-answer">
                        <p>Yes, in two ways. SheetBridge lets you connect a Google Sheet directly as a relational database&mdash;ideal for practices that track schedules or patient lists in spreadsheets. Alternatively, you can import CSV data into Adalo's built-in database. Many Makers use SheetBridge initially and transition to the built-in database once the app is established.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">What can't Adalo do for healthcare apps?</h3>
                    <div class="faq-answer">
                        <p>Adalo is not HIPAA-certified, so it should not be used for storing protected health information (PHI), clinical records, lab results, or diagnostic data. It also does not include native integrations with EHR systems (Epic, Cerner, Athena), medical device data feeds, or e-prescribing services. For practices that need a patient engagement layer alongside their clinical systems&mdash;scheduling, wellness tracking, communication, intake forms&mdash;Adalo is a practical and affordable choice. For anything involving PHI, use a HIPAA-compliant platform.</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/fitness-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Fitness Apps</a>, <a href="https://www.adalo.com/solutions/booking-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Booking Apps</a>, 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 Healthcare Apps with Adalo</h2>
                <p class="section-description">Step-by-step guides, video walkthroughs, and documentation to help you build and ship your healthcare app.</p>
            </div>
            <div class="resources-grid">
                <a href="https://www.adalo.com/posts/how-to-build-a-healthcare-app" class="resource-card"><div class="resource-type">Tutorial</div><h3>How to Build a Patient Engagement App</h3><p>Full walkthrough: scheduling database, patient profiles, health tracking, and publishing to app stores.</p><span class="resource-link">Read guide &rarr;</span></a>
                <a href="https://help.adalo.com/integrations/external-collections" class="resource-card"><div class="resource-type">Documentation</div><h3>Connecting External Data Sources</h3><p>How to use External Collections and Custom Actions to connect your healthcare app to scheduling and billing APIs.</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 patient schedule spreadsheet to a real healthcare app without losing your existing 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 healthcare 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 Healthcare App?</h2>
            <p>Join Makers who have replaced paper forms and disconnected systems with custom native healthcare apps built on Adalo&mdash;at a fraction of the cost of enterprise patient portals.</p>
            <div class="cta-buttons">
                <a href="https://www.adalo.com/signup" class="btn btn-white">Start Building Your Healthcare 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>

Healthcare & Medical Apps