Applications Marketplace et Répertoire

: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: 20px 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: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.nav-brand {
            font-family: 'Work Sans', sans-serif;
            font-size: 20px;
            font-weight: 700;
            color: var(--navy);
            text-decoration: none;
        }

.nav-tag {
            font-size: 12px;
            font-weight: 600;
            color: var(--gray-600);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.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-content {
            max-width: 600px;
        }

.hero-inner {
            display: grid;
            grid-template-columns: 1fr 560px;
            gap: 40px;
            align-items: center;
        }

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

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

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

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

@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-inner { grid-template-columns: 1fr; text-align: center; }
            .device-cluster { display: none; }
            .hero-stats { gap: 32px; }
            .hero {
                padding: 60px 24px 80px;
            }

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

.resources-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
        .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; } }
    </style>

<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>Marketplace & Directory</span>
            </div>
            <div class="hero-inner">
            <div class="hero-inner">
            <div class="hero-content">
                <div class="use-case-badge">
                    🏪 Marketplace & Directory
                </div>
                <h1>
                    Build Custom <span class="hero-highlight">Marketplace Apps</span> That Connect People
                </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 your own marketplace or directory with listings, search, user profiles, and payments&mdash;without writing code.
                </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">700+</div>
                        <div class="stat-label">Marketplace Apps</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/marketplace</div>
                            </div>
                            <div class="screen">
                                <div class="dk-header">
                                    <h4>Listings</h4>
                                    <div class="dk-add">+ New 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">Featured</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Vintage Camera</div>
                                                <div class="glass-price">$249</div>
                                                <span class="glass-tag glass-tag-new">FEATURED</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Leather Bag</div>
                                                <div class="glass-price">$89</div>
                                                <div class="glass-sub">Handcrafted</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Vinyl Player</div>
                                                <div class="glass-price">$175</div>
                                                <span class="glass-tag glass-tag-pop">TRENDING</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Popular</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Headphones</div>
                                                <div class="glass-price">$159</div>
                                                <span class="glass-tag glass-tag-sale">HOT</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Art Print</div>
                                                <div class="glass-price">$45</div>
                                                <div class="glass-sub">Limited edition</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Desk Lamp</div>
                                                <div class="glass-price">$68</div>
                                                <span class="glass-tag glass-tag-ok">12 SOLD</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">New</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Plant Pot</div>
                                                <div class="glass-price">$32</div>
                                                <span class="glass-tag glass-tag-ok">JUST IN</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Canvas Tote</div>
                                                <div class="glass-price">$28</div>
                                                <div class="glass-sub">Organic cotton</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Offers</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Watch</div>
                                                <div class="glass-price">$320</div>
                                                <span class="glass-tag glass-tag-pop">3 BIDS</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Bike Frame</div>
                                                <div class="glass-price">$450</div>
                                                <span class="glass-tag glass-tag-sale">7 BIDS</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>Vintage Camera</h4>
                                    <span class="neon-items">$249</span>
                                </div>
                                <div class="tb-kanban">
                                    <div style="flex:1;">
                                        <div class="neon-card">
                                            <div class="n-name">Seller</div>
                                            <div class="n-amount neon-cyan">PhotoPro Shop</div>
                                            <div class="n-contact">4.9 stars</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Condition</div>
                                            <div class="n-amount neon-gold">Excellent</div>
                                            <div class="n-contact">Film tested</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Shipping</div>
                                            <div class="n-amount neon-magenta">Free</div>
                                            <div class="n-contact">2-3 days</div>
                                        </div>
                                        <div class="tb-total-row">
                                            <div class="tb-total-label">VIEWS</div>
                                            <div class="tb-total-amount">1,247</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>Messages</h4>
                                    <span class="native-accent">2 new</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>Browse</span>
                                    <span class="active">Offer</span>
                                    <span>Pay</span>
                                    <span>Ship</span>
                                </div>
                                <div class="native-content">
                                    <div class="native-card">
                                        <div class="native-row">
                                            <span class="native-label" style="margin:0;">Chat</span>
                                            <span class="native-pill pill-success">Active</span>
                                        </div>
                                    </div>
                                    <div class="native-card">
                                        <div class="native-label">Conversations</div>
                                        <div class="native-row">
                                            <span class="native-value">PhotoPro Shop</span>
                                            <span class="native-price">Deal?</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">ArtHouse</span>
                                            <span class="native-price">Shipped!</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">VintageFinds</span>
                                            <span class="native-price">$200 offer</span>
                                        </div>
                                    </div>
                                    <div class="native-total">
                                        <span class="native-total-label">Inbox</span>
                                        <span class="native-total-amount">5</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 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 Marketplace or Directory You Can Imagine</h2>
                <p class="section-description">
                    From two-sided marketplaces to local business directories&mdash;describe your idea to Ada, Adalo's AI builder, and watch your marketplace take shape on the visual canvas.
                </p>
            </div>

<div class="app-types-grid">
                <div class="app-chip">
                    <div class="chip-icon">🛒</div>
                    <div class="chip-text">Two-Sided Marketplace</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">📋</div>
                    <div class="chip-text">Service Directory</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">💼</div>
                    <div class="chip-text">Job Board</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">🏘️</div>
                    <div class="chip-text">Rental Platform</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">📍</div>
                    <div class="chip-text">Local Business Directory</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">📰</div>
                    <div class="chip-text">Classifieds</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">👩‍💻</div>
                    <div class="chip-text">Freelancer Marketplace</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">🎉</div>
                    <div class="chip-text">Event Marketplace</div>
                </div>
            </div>
        </div>
    </div>

<div class="section">
        <div class="container">
            <div class="section-header">
                <span class="section-label">The Challenge</span>
                <h2>Building a Marketplace Shouldn't Cost a Fortune</h2>
                <p class="section-description">
                    Existing marketplace platforms take a cut of every transaction, lock you into their ecosystem, and give you limited control over the experience. There's a better way.
                </p>
            </div>

<div class="problem-solution">
                <div class="problem-card">
                    <h3 class="card-title">The Platform Trap</h3>
                    <ul class="card-list">
                        <li>Marketplace platforms charge 15&ndash;30% commissions on every sale</li>
                        <li>Limited customization&mdash;your app looks like everyone else's</li>
                        <li>No native mobile apps, only web-based or PWA wrappers</li>
                        <li>Vendor lock-in makes it painful to switch or migrate data</li>
                        <li>You don't own your user data or customer relationships</li>
                        <li>Custom development costs $50K&ndash;$200K+ and takes 6&ndash;12 months</li>
                    </ul>
                </div>

<div class="solution-card">
                    <h3 class="card-title">The Adalo Advantage</h3>
                    <ul class="card-list">
                        <li>Zero platform commissions&mdash;keep 100% of your revenue</li>
                        <li>Fully custom design on a visual canvas you control</li>
                        <li>True native iOS (IPA) and Android (APK) apps, plus web</li>
                        <li>Built-in relational database&mdash;your data stays yours</li>
                        <li>Full ownership of user data, listings, and transactions</li>
                        <li>Launch in weeks at $36/mo with unlimited usage</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 You Need to Run a Marketplace</h2>
                <p class="section-description">
                    Built for Makers who want to connect buyers and sellers, service providers and clients, or listers and browsers&mdash;on every platform.
                </p>
            </div>

<div class="features">
                <div class="feature">
                    <div class="feature-icon">🔍</div>
                    <h3>Listings & Search</h3>
                    <p>Let users create rich listings with photos, descriptions, prices, and categories. Built-in filtering and search help buyers find exactly what they need, fast.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">👤</div>
                    <h3>User Profiles & Ratings</h3>
                    <p>Separate buyer and seller roles with custom profiles. A review and rating system builds trust and helps the best providers rise to the top.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">💬</div>
                    <h3>In-App Messaging</h3>
                    <p>Buyers and sellers communicate directly within the app. Keep negotiations, questions, and coordination in one place instead of scattered across email and text.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">💳</div>
                    <h3>Payment Integration</h3>
                    <p>Connect Stripe or PayPal through Adalo's integration options. Process payments securely and manage transactions without building payment infrastructure from scratch.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">🔔</div>
                    <h3>Push Notifications</h3>
                    <p>Alert sellers about new inquiries, notify buyers about price drops, and keep everyone engaged. Native push notifications drive higher engagement than email or SMS.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">📊</div>
                    <h3>Admin Dashboard</h3>
                    <p>Monitor listings, manage users, review flagged content, and track marketplace activity from a dedicated admin panel. Full control over your platform.</p>
                </div>
            </div>
        </div>
    </div>

<div class="section workflow">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Implementation</span>
                <h2>From Idea to Marketplace App in Five Steps</h2>
                <p class="section-description">
                    Use Ada, Adalo's AI builder, to generate your marketplace with Magic Start&mdash;then refine every detail on the visual canvas.
                </p>
            </div>

<div class="workflow-steps">
                <div class="workflow-step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h3>Describe Your Marketplace</h3>
                        <p>Tell Ada what kind of marketplace you're building. Magic Start generates a complete multi-screen app with database tables, user roles, and listing flows&mdash;all visible on one canvas.</p>

<div class="step-details">
                            <div class="step-details-title">Example Prompts:</div>
                            <div class="screens-grid">
                                <div class="screen-item">
                                    <div class="screen-title">"Build a pet sitting marketplace"</div>
                                    <div class="screen-desc">Sitter profiles, booking requests, reviews, payment</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">"Create a local services directory"</div>
                                    <div class="screen-desc">Business listings, categories, search, contact info</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">"Make a freelancer hiring platform"</div>
                                    <div class="screen-desc">Portfolios, proposals, messaging, payments</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">"Build a rental marketplace app"</div>
                                    <div class="screen-desc">Availability calendar, photos, pricing, reviews</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Design Listing Pages</h3>
                        <p>Customize how listings look and what information they display. Add image galleries, pricing fields, location data, category tags, and any custom attributes your marketplace needs. Preview on any device form factor as you build.</p>
                    </div>
                </div>

<div class="workflow-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>Set Up User Roles</h3>
                        <p>Configure buyer and seller experiences with Adalo's built-in relational database. Define what each role can see, create, and edit. Add admin roles for marketplace moderation.</p>

<div class="step-details">
                            <div class="step-details-title">Typical User Roles:</div>
                            <div class="columns-list">
                                <div class="column-item">Buyer / Browser</div>
                                <div class="column-item">Seller / Provider</div>
                                <div class="column-item">Admin / Moderator</div>
                            </div>
                            <div style="margin-top: 16px; padding: 16px; background: var(--white); border-radius: 8px; border-left: 3px solid var(--teal);">
                                <div style="font-weight: 600; margin-bottom: 8px; color: var(--navy);">Data Import Tip:</div>
                                <div style="font-size: 14px; color: var(--gray-600); line-height: 1.6;">
                                    Already have listings in a spreadsheet? Use SheetBridge to connect your Google Sheets data as an external collection&mdash;import existing inventory, vendor details, or directory entries instantly.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="workflow-step">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <h3>Add Payments & Messaging</h3>
                        <p>Integrate payment processing via Stripe or PayPal and enable in-app messaging between marketplace participants. Set up push notifications for new inquiries, order updates, and review requests.</p>
                    </div>
                </div>

<div class="workflow-step">
                    <div class="step-number">5</div>
                    <div class="step-content">
                        <h3>Publish to App Stores</h3>
                        <p>Adalo generates true native iOS (IPA) and Android (APK) builds. Publish your marketplace to the Apple App Store and Google Play with one click&mdash;plus a web version automatically. Built on Adalo 3.0, your app is 3&ndash;4x faster and scales to 1M+ monthly active users.</p>

<div class="step-details">
                            <div class="step-details-title">What Gets Published:</div>
                            <div class="screens-grid">
                                <div class="screen-item">
                                    <div class="screen-title">iOS App (IPA)</div>
                                    <div class="screen-desc">True native build for Apple App Store</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">Android App (APK)</div>
                                    <div class="screen-desc">True native build for Google Play</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">Web App</div>
                                    <div class="screen-desc">Responsive web version, same codebase</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">One Version</div>
                                    <div class="screen-desc">Maintain a single build across all platforms</div>
                                </div>
                            </div>
                        </div>
                    </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 Build with Adalo</span>
                <h2>The Marketplace Advantages</h2>
                <p class="section-description">
                    Own your platform, keep your revenue, and launch faster than with any other approach.
                </p>
            </div>

<div class="benefits-grid">
                <div class="benefit-card">
                    <div class="benefit-icon">💰</div>
                    <h3>Zero Platform Commission</h3>
                    <p>Unlike Sharetribe, Etsy, or other marketplace platforms, Adalo charges a flat $36/mo. You keep 100% of your transaction revenue&mdash;no per-sale fees, no revenue sharing.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">📱</div>
                    <h3>Native Mobile Experience</h3>
                    <p>True native iOS and Android apps with push notifications, smooth animations, and offline capabilities. Not web wrappers or PWAs&mdash;real App Store and Google Play presence.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">🔒</div>
                    <h3>Full Data Ownership</h3>
                    <p>Your user data, listings, reviews, and transaction history live in your own relational database. No vendor lock-in&mdash;export anytime and keep complete control.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">🚀</div>
                    <h3>Launch in Weeks</h3>
                    <p>Custom marketplace development takes 6&ndash;12 months and costs $50K+. With Adalo, Makers routinely launch marketplace apps in 2&ndash;6 weeks without hiring developers.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F50D;</div>
                    <h3>Design Both Sides on One Canvas</h3>
                    <p>See buyer listings, seller dashboards, messaging, and admin panels simultaneously. Adalo's multi-screen canvas lets you design two-sided flows visually and refine them with AI direction.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4CA;</div>
                    <h3>Scale Without Re-Platforming</h3>
                    <p>Adalo 3.0 handles 1M+ monthly active users with 3–4× faster performance. Your marketplace scales from early listings to thousands of transactions without infrastructure migration.</p>
                </div>
            
            </div>
        </div>
    </div>

<div class="section best-practices">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Best Practices</span>
                <h2>Tips for Marketplace Success</h2>
                <p class="section-description">
                    Proven patterns from Makers who've built successful marketplace and directory apps with Adalo.
                </p>
            </div>

<div class="practices-grid">
                <div class="practice-card">
                    <h3><span class="practice-icon">🎯</span> Start with the Core Listing Flow</h3>
                    <p>Get listing creation, browsing, and basic buyer-seller matching working first. A marketplace with a tight core loop is more valuable than one with dozens of half-built features.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">🔍</span> Add Search & Filtering Early</h3>
                    <p>Once you have listings, make them findable. Add category filters, keyword search, location-based sorting, and price ranges so buyers can quickly discover what they want.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">💬</span> Implement Messaging Before Payments</h3>
                    <p>Let buyers and sellers communicate first. In-app messaging builds trust and helps you understand how users negotiate before you commit to a specific payment flow.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">💳</span> Add Payments Last</h3>
                    <p>Validate that people want to transact on your platform before integrating payments. Start with inquiry-based connections, then layer in Stripe or PayPal when demand is proven.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Seed Supply Before Demand</h3>
                    <p>A marketplace with no listings is a dead marketplace. Manually onboard 20–50 quality providers before marketing to buyers. Quality supply attracts demand; empty shelves don't.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F9EA;</span> Test the Full Transaction Loop</h3>
                    <p>Complete 10–20 end-to-end transactions yourself—from listing creation through purchase to review. Each step should feel natural. Fix friction before scaling.</p>
                </div>
            </div>
        </div>
    </div>

<div class="section requirements">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Requirements</span>
                <h2>What You Need to Get Started</h2>
            </div>

<div class="requirements-cards">
                <div class="requirement-card">
                    <div class="requirement-icon">🗄️</div>
                    <div class="requirement-content">
                        <h4>Unlimited Records</h4>
                        <p>Adalo's paid plans include unlimited database records, users, and storage&mdash;no caps as your marketplace grows. Free plan includes 500 records to start.</p>
                    </div>
                </div>

<div class="requirement-card">
                    <div class="requirement-icon">🔔</div>
                    <div class="requirement-content">
                        <h4>Push Notifications</h4>
                        <p>Native push notifications for new messages, order updates, and listing alerts&mdash;included with Adalo's native iOS and Android builds.</p>
                    </div>
                </div>

<div class="requirement-card">
                    <div class="requirement-icon">💳</div>
                    <div class="requirement-content">
                        <h4>Stripe/PayPal via Integrations</h4>
                        <p>Connect payment providers through Adalo's Custom Actions and integration options. Process marketplace transactions securely.</p>
                    </div>
                </div>

<div class="requirement-card">
                    <div class="requirement-icon">👥</div>
                    <div class="requirement-content">
                        <h4>Custom User Roles</h4>
                        <p>Define buyer, seller, and admin roles with different permissions and screens. Adalo's relational database handles role-based access natively.</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 Marketplace 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 for database-driven web apps and native iOS and Android apps&mdash;one version across all three platforms. Makers see every screen on one canvas, preview on any device, and visually direct the AI to refine their app before publishing to the Apple App Store and Google Play. Marketplace apps are one of the most popular use cases, with hundreds of Makers building two-sided platforms, directories, and service marketplaces on Adalo.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Can I build a marketplace app without coding?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo is designed for Makers with no coding experience. Describe your marketplace idea to Ada, Adalo's AI builder, and Magic Start generates a full multi-screen app with database tables, user roles, and listing flows. Then visually direct changes on the canvas&mdash;point at elements to adjust layouts, add features, or redesign screens. No programming, no command line, no code to maintain.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">How do I handle payments in my marketplace?</h3>
                    <div class="faq-answer">
                        <p>Adalo supports payment processing through integrations with Stripe and PayPal via Custom Actions. You can set up buyer payments, seller payouts, and transaction tracking within your app. For simpler marketplaces, many Makers start with an inquiry-based model (buyers contact sellers directly) and add payment processing once transaction volume justifies it.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Can users message each other in the app?</h3>
                    <div class="faq-answer">
                        <p>Yes. You can build in-app messaging between buyers and sellers using Adalo's built-in relational database. Create a messages collection that links to both users and the listing, then build chat screens that filter by conversation. Push notifications alert users when they receive new messages, keeping communication within your marketplace.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">How does search and filtering work?</h3>
                    <div class="faq-answer">
                        <p>Adalo includes built-in search and filter components that work with your database. You can filter listings by category, price range, location, ratings, or any custom field you define. Search works across text fields like titles and descriptions. For more advanced filtering, combine multiple filter conditions to let users narrow results precisely.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Can I build an Airbnb-like app with Adalo?</h3>
                    <div class="faq-answer">
                        <p>You can build a rental marketplace with core Airbnb-style features: property listings with photos and descriptions, availability management, booking requests, user profiles with reviews, in-app messaging, and payment processing. Adalo handles the relational database (properties, bookings, users, reviews) and publishes native iOS and Android apps alongside a web version&mdash;all from a single build.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">How does Adalo compare to Sharetribe for marketplace apps?</h3>
                    <div class="faq-answer">
                        <p>Sharetribe is a dedicated marketplace platform that provides a pre-built marketplace template with transaction management. Adalo takes a different approach: you build a fully custom marketplace from scratch on a visual canvas, with complete control over every screen, feature, and user flow. Adalo publishes true native iOS and Android apps (Sharetribe is web-only), costs $36/mo with unlimited usage (Sharetribe starts at $99/mo), and charges zero transaction commissions. The trade-off is that Adalo requires more setup time since you're building custom rather than configuring a template.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">What marketplace features can't Adalo do?</h3>
                    <div class="faq-answer">
                        <p>Adalo doesn't include built-in escrow payment handling, real-time map views with live location tracking, or complex algorithmic matching (like Uber's driver-rider matching). For marketplaces that require sophisticated payment splitting (holding funds until delivery confirmation), you'll need to integrate a service like Stripe Connect via Custom Actions. Video calling between users also requires a third-party integration. For most marketplace use cases&mdash;listings, search, messaging, profiles, reviews, and standard payments&mdash;Adalo handles it natively.</p>
                    </div>
                </div>
            </div>

<div class="resources-grid" style="margin-top: 60px;">
                <a href="https://www.adalo.com/posts/how-to-build-a-marketplace-app" class="resource-card"><div class="resource-type">Tutorial</div><h3>How to Build a Marketplace App Without Code</h3><p>Full walkthrough: seller listings, buyer search, messaging, reviews, and publishing to app stores.</p><span class="resource-link">Read guide &rarr;</span></a>
                <a href="https://help.adalo.com/integrations/external-collections" class="resource-card"><div class="resource-type">Documentation</div><h3>Connecting Payment &amp; Messaging APIs</h3><p>How to use External Collections and Custom Actions for Stripe Connect, in-app chat, and notifications.</p><span class="resource-link">View docs &rarr;</span></a>
                <a href="https://www.adalo.com/posts/google-sheets-app-builder" class="resource-card"><div class="resource-type">Tutorial</div><h3>Google Sheets to App via SheetBridge</h3><p>Migrate your spreadsheet inventory or directory to a real marketplace app without losing your data.</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 marketplace data model.</p><span class="resource-link">View docs &rarr;</span></a>
            </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/ai-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">AI-Powered Apps</a>, and <a href="https://www.adalo.com/solutions/internal-tools-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Internal Tools</a>. Or learn about <a href="https://www.adalo.com/" style="color: var(--teal); font-weight: 600; text-decoration: none;">Adalo's no-code app builder</a> and publishing to the <a href="https://www.adalo.com/platform/app-store-publishing" style="color: var(--teal); font-weight: 600; text-decoration: none;">App Store</a> and <a href="https://www.adalo.com/platform/google-play-publishing" style="color: var(--teal); font-weight: 600; text-decoration: none;">Google Play</a>.
                </p>
            </div>
        </div>
    </div>

<div class="cta-section">
        <div class="cta-content">
            <h2>Ready to Build Your Marketplace?</h2>
            <p>
                Join hundreds of Makers who've launched marketplace and directory apps on Adalo&mdash;with zero commissions, native mobile apps, and full data ownership. Start free with 500 database records.
            </p>
            <div class="cta-buttons">
                <a href="https://www.adalo.com/signup" class="btn btn-white">
                    Start Building 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>