Real Estate App Builder

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

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

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

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

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

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

.section { padding: 80px 24px; }
        .section-light { background: var(--gray-50); }
        .section-header { max-width: 800px; margin-bottom: 60px; }
        .section-label { display: inline-block; font-size: 13px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; }
        h2 { font-family: 'Work Sans', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: var(--navy); letter-spacing: -0.01em; }
        .section-description { font-size: 18px; color: var(--gray-600); line-height: 1.7; }
        .app-types-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 48px; max-width: 1000px; margin-left: auto; margin-right: auto; }
        .app-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 2px solid var(--gray-100); border-radius: 100px; padding: 12px 24px; font-size: 15px; font-weight: 600; color: var(--navy); transition: all 0.3s ease; cursor: default; }
        .app-chip:hover { border-color: var(--teal); background: rgba(0, 152, 133, 0.05); transform: translateY(-2px); }
        .chip-icon { font-size: 20px; }
        .chip-text { white-space: nowrap; }
        .problem-solution { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
        .problem-card, .solution-card { padding: 48px; border-radius: 24px; position: relative; }
        .problem-card { background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 100%); border: 2px solid #FFD5D5; }
        .problem-card::before { content: '\26A0\FE0F'; position: absolute; top: 24px; right: 24px; font-size: 32px; opacity: 0.3; }
        .solution-card { background: linear-gradient(135deg, #F0FFF4 0%, #E0F9E8 100%); border: 2px solid #B8F4CC; }
        .solution-card::before { content: '\2713'; position: absolute; top: 24px; right: 24px; font-size: 48px; color: #38A169; opacity: 0.2; font-weight: 700; }
        .card-title { font-family: 'Work Sans', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 16px; color: var(--navy); }
        .card-list { list-style: none; }
        .card-list li { padding: 12px 0 12px 32px; position: relative; color: var(--gray-800); line-height: 1.6; }
        .problem-card .card-list li::before { content: '\2715'; position: absolute; left: 0; color: #E53E3E; font-weight: 700; }
        .solution-card .card-list li::before { content: '\2713'; position: absolute; left: 0; color: #38A169; font-weight: 700; font-size: 18px; }
        .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
        .feature { background: var(--white); padding: 36px; border-radius: 20px; border: 2px solid var(--gray-100); transition: all 0.3s ease; }
        .feature:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 152, 133, 0.2); }
        .feature-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(0, 152, 133, 0.35); }
        .feature h3 { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--navy); }
        .feature p { color: var(--gray-600); line-height: 1.7; }
        .workflow { background: var(--white); }
        .workflow-steps { display: grid; gap: 0; margin-top: 48px; position: relative; }
        .workflow-step { display: grid; grid-template-columns: 80px 1fr; gap: 32px; padding: 32px 0; position: relative; }
        .workflow-step:not(:last-child)::after { content: ''; position: absolute; left: 39px; top: 80px; bottom: -32px; width: 2px; background: linear-gradient(to bottom, var(--teal) 0%, var(--gray-100) 100%); }
        .step-number { width: 80px; height: 80px; background: var(--teal); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Work Sans', sans-serif; font-size: 32px; font-weight: 800; box-shadow: 0 8px 24px rgba(0, 152, 133, 0.4); position: relative; z-index: 2; }
        .step-content h3 { font-family: 'Work Sans', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 12px; color: var(--navy); }
        .step-content p { color: var(--gray-600); line-height: 1.7; margin-bottom: 16px; }
        .step-details { background: var(--gray-50); padding: 24px; border-radius: 12px; margin-top: 16px; }
        .step-details-title { font-weight: 700; color: var(--navy); margin-bottom: 12px; font-size: 15px; }
        .columns-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
        .column-item { background: var(--white); padding: 12px 16px; border-radius: 8px; font-size: 14px; font-family: 'Courier New', monospace; color: var(--navy); border: 1px solid var(--gray-100); }
        .screens-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
        .screen-item { background: var(--white); padding: 16px; border-radius: 12px; border: 2px solid var(--gray-100); transition: border-color 0.2s; }
        .screen-item:hover { border-color: var(--teal); }
        .screen-title { font-weight: 700; color: var(--navy); margin-bottom: 8px; font-size: 15px; }
        .screen-desc { font-size: 14px; color: var(--gray-600); line-height: 1.5; }
        .benefits { background: var(--navy); color: var(--white); }
        .benefits h2 { color: var(--white); }
        .benefits .section-description { color: rgba(255, 255, 255, 0.8); }
        .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 48px; }
        .benefit-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.15); transition: all 0.3s ease; }
        .benefit-card:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px); border-color: var(--gold); }
        .benefit-icon { font-size: 36px; margin-bottom: 16px; }
        .benefit-card h3 { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--gold); }
        .benefit-card p { color: rgba(255, 255, 255, 0.85); line-height: 1.7; }
        .comparison { background: #faf6f0; }
        .comp-table { width: 100%; border-collapse: collapse; background: transparent; margin-top: 48px; }
        .comp-table th { background: transparent; padding: 18px 24px; text-align: left; font-weight: 700; font-size: 15px; color: var(--navy); border-bottom: 2px solid #e0d8ce; }
        .comp-table td { padding: 20px 24px; border-bottom: 1px solid #ebe5dc; font-size: 15px; line-height: 1.6; color: #555; vertical-align: top; }
        .comp-table tr:last-child td { border-bottom: none; }
        .comp-table td:first-child { font-weight: 700; color: var(--navy); width: 160px; }
        .best-practices { background: var(--gray-50); }
        .practices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 48px; }
        .practice-card { background: var(--white); padding: 32px; border-radius: 16px; border-left: 4px solid var(--teal); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); }
        .practice-card h3 { font-family: 'Work Sans', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
        .practice-icon { font-size: 20px; }
        .practice-card p { color: var(--gray-600); line-height: 1.7; }
        .requirements { background: var(--white); }
        .requirements-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 48px; }
        .requirement-card { background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%); padding: 32px; border-radius: 16px; border: 2px solid var(--gray-100); display: flex; gap: 20px; align-items: flex-start; }
        .requirement-icon { width: 48px; height: 48px; background: var(--teal); color: var(--white); border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .requirement-content h4 { font-weight: 700; color: var(--navy); margin-bottom: 8px; }
        .requirement-content p { color: var(--gray-600); font-size: 15px; line-height: 1.6; }
        .resources-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
        .resource-card { display: block; background: var(--white); border: 2px solid var(--gray-100); border-radius: 16px; padding: 32px; text-decoration: none; transition: all 0.3s ease; }
        .resource-card:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 152, 133, 0.1); }
        .resource-type { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--teal); background: rgba(0, 152, 133, 0.08); padding: 4px 12px; border-radius: 100px; margin-bottom: 16px; }
        .resource-card h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.3; }
        .resource-card p { font-size: 15px; color: var(--gray-600); line-height: 1.6; margin-bottom: 16px; }
        .resource-link { font-size: 14px; font-weight: 600; color: var(--teal); }
        @media (max-width: 768px) { .resources-grid { grid-template-columns: 1fr; } }
        .cta-section { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%); padding: 100px 24px; text-align: center; color: var(--white); position: relative; overflow: hidden; }
        .cta-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 20px); }
        .cta-content { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
        .cta-section h2 { color: var(--white); margin-bottom: 20px; }
        .cta-section p { font-size: 20px; margin-bottom: 40px; opacity: 0.95; line-height: 1.7; }
        .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
        .btn { padding: 18px 40px; border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; border: none; cursor: pointer; font-family: 'Work Sans', sans-serif; }
        .btn-white { background: var(--white); color: var(--teal); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
        .btn-white:hover { background: var(--gray-50); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); }
        .btn-outline { background: transparent; color: var(--white); border: 2px solid var(--white); }
        .btn-outline:hover { background: var(--white); color: var(--teal); transform: translateY(-2px); }
        .faq-container { max-width: 900px; margin: 0 auto; }
        .faq-item { background: var(--white); border: 2px solid var(--gray-100); border-radius: 16px; padding: 32px; margin-bottom: 20px; transition: all 0.3s ease; }
        .faq-item:hover { border-color: var(--teal); box-shadow: 0 4px 20px rgba(0, 152, 133, 0.1); }
        .faq-question { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 16px; }
        .faq-answer p { color: var(--gray-600); line-height: 1.7; margin: 0; }
                        @media (max-width: 1100px) { .hero-inner { grid-template-columns: 1fr 440px; } .device-cluster { height: 420px; } .cyber-desktop { width: 400px; } .cyber-tablet { width: 200px; } .cyber-phone { display: none; } }
                        @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; text-align: center; } .hero-content { max-width: 100%; } .device-cluster { height: 360px; max-width: 480px; margin: 0 auto; } .cyber-desktop { width: 100%; max-width: 480px; position: relative; } .cyber-tablet, .cyber-phone { display: none; } .store-badges { justify-content: center; } .hero-stats { justify-content: center; } .use-case-badge { margin-left: auto; margin-right: auto; } }
        @media (max-width: 768px) { .hero { padding: 60px 24px 80px; } .hero-inner { grid-template-columns: 1fr; text-align: center; } .device-cluster { display: none; } .hero-content { max-width: 100%; } .hero-stats { justify-content: center; } .use-case-badge { margin-left: auto; margin-right: auto; } .comp-table th, .comp-table td { padding: 12px 14px; font-size: 13px; } .comp-table td:first-child { width: 100px; } .problem-solution { grid-template-columns: 1fr; gap: 24px; } .workflow-step { grid-template-columns: 60px 1fr; gap: 20px; } .step-number { width: 60px; height: 60px; font-size: 24px; } .workflow-step:not(:last-child)::after { left: 29px; } .screens-grid { grid-template-columns: 1fr; } .cta-buttons { flex-direction: column; } .btn { width: 100%; justify-content: center; } .hero-stats { gap: 32px; } }
        .arrow { transition: transform 0.3s ease; }
        .btn:hover .arrow { transform: translateX(4px); }
    </style>
<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@graph": [
            {
                "@type": "WebPage",
                "@id": "https://www.adalo.com/solutions/real-estate-app-builder/#webpage",
                "url": "https://www.adalo.com/solutions/real-estate-app-builder",
                "name": "Real Estate App Builder | Adalo",
                "description": "Build a custom real estate 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 refine your property listing and agent management app before publishing 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": "Real Estate App Builder", "item": "https://www.adalo.com/solutions/real-estate-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 build a real estate 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 brokerage needs and Magic Start generates a complete app with property listings, search, and agent tools. Makers routinely build and publish real estate apps to the App Store and Google Play without writing a single line of code." } },
                    { "@type": "Question", "name": "How much does a custom real estate app cost?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo's paid plans start at $36/mo with unlimited usage\u2014no caps on listings, leads, agents, or storage. Compare that to custom development at $80,000\u2013$250,000. A 20-agent brokerage on Adalo pays $36/mo total. The free plan includes 500 database records so you can prototype before committing." } },
                    { "@type": "Question", "name": "Can I connect to MLS listing data?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo can connect to MLS feeds via External Collections if your MLS provider offers a REST API. However, MLS access varies by region and provider\u2014many require IDX agreements and approved vendor status. For brokerages without API access, you can manually enter listings or import from Google Sheets via SheetBridge." } },
                    { "@type": "Question", "name": "What can't Adalo do for a real estate app?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo excels at building custom property listing and agent management apps, but built-in map views with pins, automated MLS sync, in-app document signing, virtual tour embedding, and mortgage calculators require additional tools or custom API integrations. Adalo also doesn't provide direct MLS access\u2014you need your own IDX agreement." } }
                ]
            }
        ]
    }
    </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>Real Estate App Builder</span>
            </div>
            <div class="hero-inner">
                <div class="hero-content">
                    <div class="use-case-badge">&#x1F3E0; Real Estate</div>
                    <h1>Build Custom <span class="hero-highlight">Real Estate Apps</span> for Any Brokerage</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 property app that fits your brokerage, your agents, and your market.</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">500+</div><div class="stat-label">Property Apps Built</div></div>
                        <div class="stat"><div class="stat-value">3</div><div class="stat-label">Platforms</div></div>
                        <div class="stat"><div class="stat-value">$36/mo</div><div class="stat-label">Unlimited Usage</div></div>
                    </div>
                </div>
                
                <div class="device-column">
                <div class="device-cluster">
                    
                    <div class="cyber-desktop">
                        <div class="frame">
                            <div class="toolbar">
                                <span class="dot dot-r"></span>
                                <span class="dot dot-y"></span>
                                <span class="dot dot-g"></span>
                                <div class="url-bar">app.adalo.com/properties</div>
                            </div>
                            <div class="screen">
                                <div class="dk-header">
                                    <h4>Property Listings</h4>
                                    <div class="dk-add">+ Add Listing</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">Active</div>
                                            <div class="glass-card">
                                                <div class="glass-name">123 Oak Lane</div>
                                                <div class="glass-price">$425,000</div>
                                                <span class="glass-tag glass-tag-new">NEW</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">456 Elm Court</div>
                                                <div class="glass-price">$389,000</div>
                                                <div class="glass-sub">3 bed / 2 bath</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">210 River Rd</div>
                                                <div class="glass-price">$515,000</div>
                                                <span class="glass-tag glass-tag-sale">REDUCED</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Pending</div>
                                            <div class="glass-card">
                                                <div class="glass-name">789 Maple Dr</div>
                                                <div class="glass-price">$550,000</div>
                                                <span class="glass-tag glass-tag-pop">OFFER</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">112 Lake View</div>
                                                <div class="glass-price">$620,000</div>
                                                <div class="glass-sub">Under contract</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Showings</div>
                                            <div class="glass-card">
                                                <div class="glass-name">321 Pine St</div>
                                                <div class="glass-price">$315,000</div>
                                                <span class="glass-tag glass-tag-sale">TODAY</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">654 Cedar Ave</div>
                                                <div class="glass-price">$478,000</div>
                                                <div class="glass-sub">4 bed / 3 bath</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">88 Hillcrest</div>
                                                <div class="glass-price">$350,000</div>
                                                <span class="glass-tag glass-tag-pop">OPEN HOUSE</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Sold</div>
                                            <div class="glass-card">
                                                <div class="glass-name">987 Birch Rd</div>
                                                <div class="glass-price">$412,000</div>
                                                <span class="glass-tag glass-tag-ok">CLOSED</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">555 Ash Ct</div>
                                                <div class="glass-price">$298,000</div>
                                                <span class="glass-tag glass-tag-ok">CLOSED</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>123 Oak Lane</h4>
                                    <span class="neon-items">$425K</span>
                                </div>
                                <div class="tb-kanban">
                                    <div style="flex:1;">
                                        <div class="neon-card">
                                            <div class="n-name">Details</div>
                                            <div class="n-amount neon-cyan">3 bed / 2 bath</div>
                                            <div class="n-contact">1,850 sq ft</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Listed</div>
                                            <div class="n-amount neon-gold">Mar 1, 2026</div>
                                            <div class="n-contact">12 showings</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Agent</div>
                                            <div class="n-amount neon-magenta">Lisa Chen</div>
                                            <div class="n-contact">(555) 123-4567</div>
                                        </div>
                                        <div class="tb-total-row">
                                            <div class="tb-total-label">DAYS ON MKT</div>
                                            <div class="tb-total-amount">3</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>Viewings</h4>
                                    <span class="native-accent">3 scheduled</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>Request</span>
                                    <span class="active">Confirmed</span>
                                    <span>Viewed</span>
                                    <span>Offer</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">Today</span>
                                        </div>
                                    </div>
                                    <div class="native-card">
                                        <div class="native-label">Upcoming Tours</div>
                                        <div class="native-row">
                                            <span class="native-value">123 Oak Ln</span>
                                            <span class="native-price">2:00 PM</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">321 Pine St</span>
                                            <span class="native-price">4:00 PM</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">456 Elm Ct</span>
                                            <span class="native-price">Sat 10 AM</span>
                                        </div>
                                    </div>
                                    <div class="native-total">
                                        <span class="native-total-label">Tours</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 Real Estate App You Can Imagine</h2>
                <p class="section-description">From independent agents to multi-office brokerages&mdash;describe what you need and Ada, Adalo's AI builder, generates a working property app with Magic Start in minutes.</p>
            </div>
            <div class="app-types-grid">
                <div class="app-chip"><div class="chip-icon">&#x1F3E0;</div><div class="chip-text">Property Listings</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F50D;</div><div class="chip-text">Buyer Search</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4C5;</div><div class="chip-text">Viewing Scheduler</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F464;</div><div class="chip-text">Agent Dashboard</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4CA;</div><div class="chip-text">Lead Tracker</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4F8;</div><div class="chip-text">Photo Gallery</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4DD;</div><div class="chip-text">Offer Manager</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F5FA;&#xFE0F;</div><div class="chip-text">Neighborhood Guide</div></div>
            </div>
        </div>
    </div>

<div class="section">
        <div class="container">
            <div class="section-header">
                <span class="section-label">The Challenge</span>
                <h2>Agents &amp; Brokerages Deserve Better Than Portal Listings &amp; Spreadsheet Leads</h2>
                <p class="section-description">Most real estate teams rely on portal sites for listings and spreadsheets for leads. Your brand disappears, your data is scattered, and clients have no reason to stay loyal. There's a better approach.</p>
            </div>
            <div class="problem-solution">
                <div class="problem-card">
                    <h3 class="card-title">The Real Estate App Problem</h3>
                    <ul class="card-list">
                        <li>Listings live on third-party portals where your brand competes with every other agent</li>
                        <li>Leads tracked in spreadsheets with no follow-up automation</li>
                        <li>Clients can't search your exclusive listings or schedule viewings from their phones</li>
                        <li>No push notifications for new properties matching buyer criteria</li>
                        <li>Custom app development costs $80,000&ndash;$250,000 for a real estate platform</li>
                        <li>Viewing scheduling done via phone calls, texts, and email chains</li>
                    </ul>
                </div>
                <div class="solution-card">
                    <h3 class="card-title">The Adalo Real Estate Solution</h3>
                    <ul class="card-list">
                        <li>Your own branded property app on the App Store and Google Play</li>
                        <li>Visual canvas lets you design listing views, search filters, and agent profiles your way</li>
                        <li>Built-in relational database connects properties, leads, viewings, and agents</li>
                        <li>Native iOS and Android apps let buyers search and schedule viewings on the go</li>
                        <li>$36/mo with unlimited listings, leads, and agents&mdash;no per-seat charges</li>
                        <li>Self-service viewing scheduler with push notification confirmations</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 Real Estate App Needs in One Build</h2>
                <p class="section-description">Built for agents and brokerages who want their own property app on web, iOS, and Android from a single build&mdash;with their brand front and center.</p>
            </div>
            <div class="features">
                <div class="feature"><div class="feature-icon">&#x1F3E0;</div><h3>Property Listings &amp; Search</h3><p>Display properties with photos, specs, pricing, and descriptions. Buyers search by price range, bedrooms, location, and property type. All listing data lives in Adalo's built-in relational database&mdash;no external database setup required.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F4C5;</div><h3>Viewing Scheduler</h3><p>Buyers request viewings directly in the app by selecting available time slots. Agents see all scheduled viewings on their dashboard and receive push notification reminders. No more phone tag or email chains.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F464;</div><h3>Agent Dashboard &amp; Lead Pipeline</h3><p>Agents track their active listings, upcoming viewings, and lead pipeline from one screen. See which properties are getting the most interest and which leads need follow-up.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F4F8;</div><h3>Photo Galleries</h3><p>Each listing includes a scrollable photo gallery. Upload multiple images per property directly from the app. Buyers swipe through photos on their phones just like they do on major real estate platforms.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F514;</div><h3>Push Notifications</h3><p>Native push notifications alert buyers when new listings match their saved search criteria. Agents receive notifications when viewings are booked or leads submit inquiries. Critical for staying ahead in competitive markets.</p></div>
                <div class="feature"><div class="feature-icon">&#x2764;&#xFE0F;</div><h3>Saved Properties &amp; Favorites</h3><p>Buyers save properties they're interested in and compare them side by side. Agents see which properties each lead has favorited, giving them insight into buyer preferences before the first conversation.</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 Property 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 real estate 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 App to Ada</h3>
                        <p>Tell Ada, Adalo's AI builder, what your brokerage needs. Magic Start generates a complete real estate app with property listings, search, viewing scheduler, and agent dashboard 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 real estate app for a residential brokerage. I need property listings with photos, price, bedrooms, and bathrooms. Buyers should be able to search by price range and location, save favorites, and schedule viewings. Agents need a dashboard showing their listings, upcoming viewings, and lead pipeline."</div></div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Design Your Listing Layout</h3>
                        <p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust your property cards, search filters, and detail pages. Use Magic Add to add features like a mortgage calculator or neighborhood guide with natural language.</p>
                        <div class="step-details">
                            <div class="step-details-title">Typical database collections:</div>
                            <div class="columns-list">
                                <div class="column-item">Properties</div><div class="column-item">Agents</div><div class="column-item">Leads</div><div class="column-item">Viewings</div><div class="column-item">Favorites</div><div class="column-item">Inquiries</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 your property and lead data, or connect existing listing spreadsheets via SheetBridge. Add Zapier or Make integrations for email marketing, calendar sync, and CRM tools.</p>
                        <div class="step-details">
                            <div class="step-details-title">Common real estate integrations:</div>
                            <div class="screens-grid">
                                <div class="screen-item"><div class="screen-title">SheetBridge</div><div class="screen-desc">Import existing listing data 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 marketing, Google Calendar, and CRM tools</div></div>
                                <div class="screen-item"><div class="screen-title">Custom API</div><div class="screen-desc">External Collections connect to property data feeds or third-party services</div></div>
                                <div class="screen-item"><div class="screen-title">Webhooks</div><div class="screen-desc">Trigger automations when viewings are booked or leads submit inquiries</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 property app on any device form factor directly from the canvas. Test the full buyer flow&mdash;searching properties, viewing photos, scheduling viewings, and saving favorites&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 real estate 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. Agents and buyers download the app and start connecting 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 Real Estate</span>
                <h2>Your Brand, Your Listings, Your Client Relationships</h2>
                <p class="section-description">Stop losing clients to portal sites. Build a branded property app that keeps buyers coming back to you.</p>
            </div>
            <div class="benefits-grid">
                <div class="benefit-card"><div class="benefit-icon">&#x1F4B8;</div><h3>Fraction of Custom Dev Cost</h3><p>Custom real estate app development costs $80,000&ndash;$250,000. Adalo costs $36/mo with unlimited listings, leads, agents, and storage. A 20-agent brokerage pays $36/mo total, not per seat.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F3F7;&#xFE0F;</div><h3>Your Brand in Clients' Pockets</h3><p>Your own branded app on the App Store and Google Play. When buyers search for properties, they open your app&mdash;not a portal where they see competing agents' listings.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F5C4;&#xFE0F;</div><h3>One Database for Everything</h3><p>Properties, agents, leads, viewings, and favorites in Adalo's built-in relational database. No Firebase setup. No Supabase. Everything connected automatically.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F680;</div><h3>Ship in Days, Not Months</h3><p>Ada generates your property app from a description. Visually customize it on the canvas. Publish to three platforms from one build. Most Makers go from idea to live app in under a week.</p></div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F50D;</div>
                    <h3>Design Every Screen Visually</h3>
                    <p>See listing pages, search results, agent dashboards, and lead forms simultaneously on Adalo's canvas. Visually direct the AI to refine layouts—no coding or chat prompts needed.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4CA;</div>
                    <h3>Scale with Your Portfolio</h3>
                    <p>Adalo 3.0 handles 1M+ monthly active users with 3–4× faster performance. Whether you manage 50 listings or 5,000, the app stays fast as your portfolio and client base grow.</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>Adalo Real Estate App vs. Zillow-Style Platforms vs. Custom Development</h2>
                <p class="section-description">See how building your own property app with Adalo compares to the alternatives.</p>
            </div>
            <table class="comp-table">
                <thead><tr><th>Factor</th><th>Adalo Real Estate App</th><th>Zillow-Style Platforms</th><th>Custom Development</th></tr></thead>
                <tbody>
                    <tr><td>Build Time</td><td>&#x2705; Days to weeks</td><td>Immediate (but you're on their platform)</td><td>6&ndash;12 months</td></tr>
                    <tr><td>Monthly Cost</td><td>&#x2705; $36/mo flat (unlimited agents)</td><td>$500&ndash;3,000/mo for premium placement</td><td>$10,000&ndash;30,000/mo (hosting + team)</td></tr>
                    <tr><td>Branding</td><td>&#x2705; Your own app in stores</td><td>Portal branding with your listing</td><td>Fully custom</td></tr>
                    <tr><td>Native Mobile App</td><td>&#x2705; iOS and Android (true native)</td><td>Their app, your listing</td><td>Yes (if budgeted separately)</td></tr>
                    <tr><td>Lead Ownership</td><td>&#x2705; You own all lead data</td><td>Leads shared with competing agents</td><td>You own all data</td></tr>
                    <tr><td>Push Notifications</td><td>&#x2705; Built-in</td><td>Platform controls notifications</td><td>Custom implementation required</td></tr>
                    <tr><td>Viewing Scheduler</td><td>&#x2705; Built into your app</td><td>Through portal or external calendar</td><td>Custom build required</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 Real Estate App Success</h2>
                <p class="section-description">Patterns from Makers who have built and shipped successful real estate apps with Adalo.</p>
            </div>
            <div class="practices-grid">
                <div class="practice-card"><h3><span class="practice-icon">&#x1F4F8;</span> Lead with Great Photos</h3><p>Property photos are the single biggest driver of engagement in real estate apps. Invest in professional photography for your top listings. Each listing should have at least 8&ndash;12 high-quality images.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F50D;</span> Make Search Simple</h3><p>Don't overload buyers with filters. Start with the essentials: price range, bedrooms, and location. Add secondary filters (square footage, year built, property type) as expandable options.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F514;</span> Use Push Notifications Wisely</h3><p>Notify buyers about new listings matching their saved searches and viewing reminders. Don't over-notify&mdash;one or two relevant alerts per week keeps engagement high without causing uninstalls.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F517;</span> Connect Your Calendar</h3><p>Use Zapier to sync viewing requests with Google Calendar or Outlook. When a buyer books a viewing in the app, it should appear on the agent's calendar automatically.</p></div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Import Listings from Spreadsheets</h3>
                    <p>If your property data lives in Google Sheets, use SheetBridge to connect it as a relational database. Listings, prices, status, and agent assignments sync without manual re-entry.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F9EA;</span> Test with Active Clients</h3>
                    <p>Have 5–10 clients use the app for property searches and saved listings before promoting broadly. Real buyer behavior reveals search friction and notification preferences that internal 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 Real Estate 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 listings, leads, or agents. 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 new listing alerts, viewing confirmations, and lead inquiries. Keeps agents responsive and buyers engaged with your properties.</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 listings 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 real estate app to 6,000+ tools. Sync with email marketing, calendar apps, CRM platforms, and document signing 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 Real Estate 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 build a real estate 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 brokerage needs and Magic Start generates a complete app with property listings, search, and agent tools. Then visually customize everything on the canvas by pointing at elements and directing changes. Makers routinely build and publish real estate apps to the App Store and Google Play without writing a single line of code.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">How much does a custom real estate app cost?</h3><div class="faq-answer"><p>Adalo's paid plans start at $36/mo with unlimited usage&mdash;no caps on listings, leads, agents, or storage. Compare that to custom development at $80,000&ndash;$250,000 or Zillow-style premium placement at $500&ndash;$3,000/mo. A 20-agent brokerage on Adalo pays $36/mo total (not per agent), with native iOS and Android apps included. The free plan includes 500 database records so you can prototype your property app before committing.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">Can I connect to MLS listing data?</h3><div class="faq-answer"><p>Adalo can connect to MLS feeds via External Collections if your MLS provider offers a REST API (RETS or RESO Web API). However, MLS access varies significantly by region and provider&mdash;many require IDX agreements, specific compliance requirements, and approved vendor status. For brokerages with direct MLS API access, Adalo can display that data. For those without API access, you can manually enter your own listings or import them from Google Sheets via SheetBridge.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">Can buyers schedule viewings through the app?</h3><div class="faq-answer"><p>Yes. You can build a viewing scheduler where buyers select available time slots and agents receive push notifications for each booking. Connect to Google Calendar or Outlook via Zapier so that confirmed viewings automatically appear on the agent's calendar. This eliminates the back-and-forth of scheduling by phone and email.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">Can my agents update listings from their phones?</h3><div class="faq-answer"><p>Yes. Adalo builds true native iOS and Android apps. Agents can add new listings, upload photos, update pricing and status, and manage their lead pipeline directly from their phones. This is particularly valuable for agents who spend most of their day at showings and open houses rather than at a desk.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">How does this compare to having a listing on Zillow or Realtor.com?</h3><div class="faq-answer"><p>Portal sites give you visibility but at a cost: your listings appear alongside competing agents, leads are often shared or sold to multiple agents, and buyers associate the experience with the portal brand rather than yours. With Adalo, you build your own branded app where buyers interact exclusively with your brokerage's properties and agents. The trade-off: you don't get the portal's existing traffic. Most successful agents use both&mdash;portals for visibility and their own app for client retention and referrals.</p></div></div>
                <div class="faq-item"><h3 class="faq-question">What can't Adalo do for a real estate app?</h3><div class="faq-answer"><p>Adalo excels at building custom property listing and agent management apps, but it's not a replacement for enterprise real estate platforms. Built-in map views with property pins, automated MLS synchronization, in-app document signing (like DocuSign), virtual tour embedding, and mortgage pre-qualification calculators require additional tools or custom API integrations. Adalo also doesn't provide direct MLS access&mdash;you need your own IDX agreement. For brokerages that want a branded client-facing app with listings, search, and viewing scheduling at a fraction of custom development costs, Adalo is the practical choice.</p></div></div>
            </div>
            <div style="margin-top: 60px; text-align: center; padding: 40px; background: var(--gray-50); border-radius: 16px;">
                <p style="font-size: 16px; color: var(--gray-600); margin-bottom: 20px;">Explore more solutions: <a href="https://www.adalo.com/solutions/crm-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">CRM Apps</a>, <a href="https://www.adalo.com/solutions/booking-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Booking Apps</a>, <a href="https://www.adalo.com/solutions/marketplace-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Marketplace Apps</a>, and <a href="https://www.adalo.com/solutions/business-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Business 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 Real Estate Apps with Adalo</h2><p class="section-description">Step-by-step guides, video walkthroughs, and documentation to help you build and ship your property app.</p></div>
            <div class="resources-grid">
                <a href="https://www.adalo.com/posts/how-to-build-a-real-estate-app" class="resource-card"><div class="resource-type">Tutorial</div><h3>How to Build a Real Estate App Without Code</h3><p>Full walkthrough: listings database, search filters, viewing scheduler, 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 app to MLS feeds and CRM tools.</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 listing spreadsheet to a real 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 property and lead 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 Brokerage's Property App?</h2>
            <p>Join Makers who have built branded real estate apps that keep buyers coming back to their brokerage&mdash;at a fraction of the cost of custom development.</p>
            <div class="cta-buttons">
                <a href="https://www.adalo.com/signup" class="btn btn-white">Start Building Your Property 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>