Dating App Builder

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

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

.hero { position: relative; background: #F8F4EE; background-image: linear-gradient(#F7F3EE, rgba(247,243,238,0)); color: #000; padding: 80px 24px 100px; overflow: hidden; }
        .hero::before { content: none; }
        .container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
        .breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 14px; margin-bottom: 32px;   }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .breadcrumb a { color: #00A695; text-decoration: none; font-weight: 500; transition: opacity 0.2s; }
        .breadcrumb a:hover { opacity: 0.7; }
        .breadcrumb-separator { color: #424242; }
        .hero-inner { display: grid; grid-template-columns: 1fr 560px; gap: 40px; align-items: center; }
        .hero-content { max-width: 600px; }

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

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

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

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

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

.use-case-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 169, 150, 0.1); color: #00A695; border: none; padding: 8px 20px; border-radius: 100px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 20px; }
        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        h1 { font-family: 'Work Sans', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.02em; background: linear-gradient(180deg, #006445, #00A695); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: slideUp 0.6s ease-out 0.2s both; }
        .hero-highlight { display: inline; }
        .hero-description { font-size: 16px; line-height: 1.5;  margin-bottom: 36px; color: #000;  }
        .hero-stats { display: flex; gap: 24px; flex-wrap: wrap;  }
        .stat { display: flex; flex-direction: column; }
        .stat-value { font-family: 'Work Sans', sans-serif; font-size: 36px; font-weight: 800; color: #00A695; line-height: 1; margin-bottom: 8px; }
        .stat-label { font-size: 14px; color: #424242; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }

/* ── CTA BUTTONS ── */
        .hero-buttons { display: flex; gap: 12px; margin-bottom: 16px; }
        .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 16px 48px; border-radius: 48px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .2s; font-family: 'Work Sans', sans-serif; text-transform: uppercase; letter-spacing: .5px; background: #00A695; color: white; border: 2px solid #00A898; }
        .btn-primary:hover { background: #00786A; border-color: #00786A; text-decoration: none; }
        .btn-outline-hero { display: inline-flex; align-items: center; gap: 8px; padding: 16px 48px; border-radius: 48px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .2s; font-family: 'Work Sans', sans-serif; text-transform: uppercase; letter-spacing: .5px; border: 2px solid #424242; color: #424242; background: transparent; }
        .btn-outline-hero:hover { border-color: #00A695; color: #00A695; text-decoration: none; }
        .hero-sub { font-size: 13px; color: #424242; margin-bottom: 20px; }
        .perks { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; margin-top: 0; margin-bottom: 24px; }
        .perks li { display: flex; align-items: center; gap: 10px; font-family: 'Work Sans', sans-serif; font-size: 16px; color: #000; font-weight: 400; margin: 0; padding: 0; }
        .perks li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #0e9e82; flex-shrink: 0; }
        .arrow { transition: transform 0.3s ease; display: inline-block; }
        .btn-primary:hover .arrow { transform: translateX(4px); }
        @media (max-width: 768px) { .hero-buttons { flex-direction: column; } .hero-buttons a { text-align: center; justify-content: center; } }

.section { padding: 80px 24px; }
        .section-light { background: var(--gray-50); }
        .section-header { max-width: 800px; margin-bottom: 60px; }
        .section-label { display: inline-block; font-size: 13px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; }
        h2 { font-family: 'Work Sans', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: var(--navy); letter-spacing: -0.01em; }
        .section-description { font-size: 18px; color: var(--gray-600); line-height: 1.7; }

.app-types-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 48px; max-width: 1000px; margin-left: auto; margin-right: auto; }
        .app-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 2px solid var(--gray-100); border-radius: 100px; padding: 12px 24px; font-size: 15px; font-weight: 600; color: var(--navy); transition: all 0.3s ease; cursor: default; }
        .app-chip:hover { border-color: var(--teal); background: rgba(0, 152, 133, 0.05); transform: translateY(-2px); }
        .chip-icon { font-size: 20px; } .chip-text { white-space: nowrap; }

.problem-solution { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
        .problem-card, .solution-card { padding: 48px; border-radius: 24px; position: relative; }
        .problem-card { background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 100%); border: 2px solid #FFD5D5; }
        .problem-card::before { content: '\26A0\FE0F'; position: absolute; top: 24px; right: 24px; font-size: 32px; opacity: 0.3; }
        .solution-card { background: linear-gradient(135deg, #F0FFF4 0%, #E0F9E8 100%); border: 2px solid #B8F4CC; }
        .solution-card::before { content: '\2713'; position: absolute; top: 24px; right: 24px; font-size: 48px; color: #38A169; opacity: 0.2; font-weight: 700; }
        .card-title { font-family: 'Work Sans', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 16px; color: var(--navy); }
        .card-list { list-style: none; }
        .card-list li { padding: 12px 0 12px 32px; position: relative; color: var(--gray-800); line-height: 1.6; }
        .problem-card .card-list li::before { content: '\2715'; position: absolute; left: 0; color: #E53E3E; font-weight: 700; }
        .solution-card .card-list li::before { content: '\2713'; position: absolute; left: 0; color: #38A169; font-weight: 700; font-size: 18px; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
        .feature { background: var(--white); padding: 36px; border-radius: 20px; border: 2px solid var(--gray-100); transition: all 0.3s ease; }
        .feature:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 152, 133, 0.2); }
        .feature-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(0, 152, 133, 0.35); }
        .feature h3 { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--navy); }
        .feature p { color: var(--gray-600); line-height: 1.7; }

.workflow { background: var(--white); }
        .workflow-steps { display: grid; gap: 0; margin-top: 48px; position: relative; }
        .workflow-step { display: grid; grid-template-columns: 80px 1fr; gap: 32px; padding: 32px 0; position: relative; }
        .workflow-step:not(:last-child)::after { content: ''; position: absolute; left: 39px; top: 80px; bottom: -32px; width: 2px; background: linear-gradient(to bottom, var(--teal) 0%, var(--gray-100) 100%); }
        .step-number { width: 80px; height: 80px; background: var(--teal); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Work Sans', sans-serif; font-size: 32px; font-weight: 800; box-shadow: 0 8px 24px rgba(0, 152, 133, 0.4); position: relative; z-index: 2; }
        .step-content h3 { font-family: 'Work Sans', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 12px; color: var(--navy); }
        .step-content p { color: var(--gray-600); line-height: 1.7; margin-bottom: 16px; }
        .step-details { background: var(--gray-50); padding: 24px; border-radius: 12px; margin-top: 16px; }
        .step-details-title { font-weight: 700; color: var(--navy); margin-bottom: 12px; font-size: 15px; }
        .columns-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
        .column-item { background: var(--white); padding: 12px 16px; border-radius: 8px; font-size: 14px; font-family: 'Courier New', monospace; color: var(--navy); border: 1px solid var(--gray-100); }
        .screens-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
        .screen-item { background: var(--white); padding: 16px; border-radius: 12px; border: 2px solid var(--gray-100); transition: border-color 0.2s; }
        .screen-item:hover { border-color: var(--teal); }
        .screen-title { font-weight: 700; color: var(--navy); margin-bottom: 8px; font-size: 15px; }
        .screen-desc { font-size: 14px; color: var(--gray-600); line-height: 1.5; }

.benefits { background: var(--navy); color: var(--white); }
        .benefits h2 { color: var(--white); }
        .benefits .section-description { color: rgba(255, 255, 255, 0.8); }
        .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 48px; }
        .benefit-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.15); transition: all 0.3s ease; }
        .benefit-card:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px); border-color: var(--gold); }
        .benefit-icon { font-size: 36px; margin-bottom: 16px; }
        .benefit-card h3 { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--gold); }
        .benefit-card p { color: rgba(255, 255, 255, 0.85); line-height: 1.7; }

.comparison { background: #faf6f0; }
        .comp-table { width: 100%; border-collapse: collapse; background: transparent; margin-top: 48px; }
        .comp-table th { background: transparent; padding: 18px 24px; text-align: left; font-weight: 700; font-size: 15px; color: var(--navy); border-bottom: 2px solid #e0d8ce; }
        .comp-table td { padding: 20px 24px; border-bottom: 1px solid #ebe5dc; font-size: 15px; line-height: 1.6; color: #555; vertical-align: top; }
        .comp-table tr:last-child td { border-bottom: none; }
        .comp-table td:first-child { font-weight: 700; color: var(--navy); width: 160px; }

.best-practices { background: var(--gray-50); }
        .practices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 48px; }
        .practice-card { background: var(--white); padding: 32px; border-radius: 16px; border-left: 4px solid var(--teal); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); }
        .practice-card h3 { font-family: 'Work Sans', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
        .practice-icon { font-size: 20px; }
        .practice-card p { color: var(--gray-600); line-height: 1.7; }

.requirements { background: var(--white); }
        .requirements-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 48px; }
        .requirement-card { background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%); padding: 32px; border-radius: 16px; border: 2px solid var(--gray-100); display: flex; gap: 20px; align-items: flex-start; }
        .requirement-icon { width: 48px; height: 48px; background: var(--teal); color: var(--white); border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .requirement-content h4 { font-weight: 700; color: var(--navy); margin-bottom: 8px; }
        .requirement-content p { color: var(--gray-600); font-size: 15px; line-height: 1.6; }

.resources-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
        .resource-card { display: block; background: var(--white); border: 2px solid var(--gray-100); border-radius: 16px; padding: 32px; text-decoration: none; transition: all 0.3s ease; }
        .resource-card:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 152, 133, 0.1); }
        .resource-type { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--teal); background: rgba(0, 152, 133, 0.08); padding: 4px 12px; border-radius: 100px; margin-bottom: 16px; }
        .resource-card h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.3; }
        .resource-card p { font-size: 15px; color: var(--gray-600); line-height: 1.6; margin-bottom: 16px; }
        .resource-link { font-size: 14px; font-weight: 600; color: var(--teal); }
        @media (max-width: 768px) { .resources-grid { grid-template-columns: 1fr; } }

.cta-section { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%); padding: 100px 24px; text-align: center; color: var(--white); position: relative; overflow: hidden; }
        .cta-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 20px); }
        .cta-content { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
        .cta-section h2 { color: var(--white); margin-bottom: 20px; }
        .cta-section p { font-size: 20px; margin-bottom: 40px; opacity: 0.95; line-height: 1.7; }
        .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
        .btn { padding: 18px 40px; border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; border: none; cursor: pointer; font-family: 'Work Sans', sans-serif; }
        .btn-white { background: var(--white); color: var(--teal); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
        .btn-white:hover { background: var(--gray-50); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); }
        .btn-outline { background: transparent; color: var(--white); border: 2px solid var(--white); }
        .btn-outline:hover { background: var(--white); color: var(--teal); transform: translateY(-2px); }
        .faq-container { max-width: 900px; margin: 0 auto; }
        .faq-item { background: var(--white); border: 2px solid var(--gray-100); border-radius: 16px; padding: 32px; margin-bottom: 20px; transition: all 0.3s ease; }
        .faq-item:hover { border-color: var(--teal); box-shadow: 0 4px 20px rgba(0, 152, 133, 0.1); }
        .faq-question { font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 16px; }
        .faq-answer p { color: var(--gray-600); line-height: 1.7; margin: 0; }

@media (max-width: 1100px) { .hero-inner { grid-template-columns: 1fr 440px; } .device-cluster { height: 420px; } .cyber-desktop { width: 400px; } .cyber-tablet { width: 200px; } .cyber-phone { display: none; } }
                        @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; text-align: center; } .hero-content { max-width: 100%; } .device-cluster { height: 360px; max-width: 480px; margin: 0 auto; } .cyber-desktop { width: 100%; max-width: 480px; position: relative; } .cyber-tablet, .cyber-phone { display: none; } .store-badges { justify-content: center; } .hero-stats { justify-content: center; } .use-case-badge { margin-left: auto; margin-right: auto; } }
        @media (max-width: 768px) { .hero { padding: 60px 24px 80px; } .hero-inner { grid-template-columns: 1fr; text-align: center; } .device-cluster { display: none; } .hero-content { max-width: 100%; } .hero-stats { justify-content: center; gap: 32px; } .use-case-badge { margin-left: auto; margin-right: auto; } .comp-table th, .comp-table td { padding: 12px 14px; font-size: 13px; } .comp-table td:first-child { width: 100px; } .problem-solution { grid-template-columns: 1fr; gap: 24px; } .workflow-step { grid-template-columns: 60px 1fr; gap: 20px; } .step-number { width: 60px; height: 60px; font-size: 24px; } .workflow-step:not(:last-child)::after { left: 29px; } .screens-grid { grid-template-columns: 1fr; } .cta-buttons { flex-direction: column; } .btn { width: 100%; justify-content: center; } }
        .arrow { transition: transform 0.3s ease; }
        .btn:hover .arrow { transform: translateX(4px); }
    </style>
<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@graph": [
            {
                "@type": "WebPage",
                "@id": "https://www.adalo.com/solutions/dating-app-builder#webpage",
                "url": "https://www.adalo.com/solutions/dating-app-builder",
                "name": "Dating App Builder | Adalo",
                "description": "Build a custom dating app for iOS, Android, and web with Adalo's no-code app builder. See every screen on one canvas, preview on any device, and visually direct the AI to create user profiles, matching, and in-app chat\u2014then publish to the Apple App Store and Google Play.",
                "isPartOf": { "@id": "https://www.adalo.com/#website" },
                "about": { "@id": "https://www.adalo.com/#software" }
            },
            {
                "@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": "Dating App Builder", "item": "https://www.adalo.com/solutions/dating-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 matching algorithm in Adalo?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Build interest-based matching using Adalo's relational database and filtering. Create compatibility scores based on shared interests, location, and custom criteria. For ML-based matching, connect an external API via Custom Actions." } },
                    { "@type": "Question", "name": "Does Adalo support real-time chat?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo includes built-in chat components for one-to-one messaging with push notifications. For high-frequency real-time chat, connect a dedicated service like Stream via Custom Actions as your user base grows." } },
                    { "@type": "Question", "name": "Can users upload photos to their profiles?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo supports image upload and storage. Users can upload multiple profile photos displayed on profile screens." } },
                    { "@type": "Question", "name": "How do I handle user safety and privacy?", "acceptedAnswer": { "@type": "Answer", "text": "Build report and block functionality using Adalo's database and conditional visibility. Create an admin moderation dashboard to review flagged profiles." } },
                    { "@type": "Question", "name": "Will push notifications work for match alerts?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo builds true native apps with push notification support. Trigger notifications for mutual matches, new messages, and profile views." } },
                    { "@type": "Question", "name": "How much does it cost to build a dating app with Adalo?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo's paid plans start at $36/mo with unlimited usage. Custom dating app development typically costs $50,000\u2013$200,000+. The free plan includes 500 records to prototype." } },
                    { "@type": "Question", "name": "What can't Adalo do for dating apps?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo doesn't include built-in AI matching algorithms, live video calling, real-time typing indicators, or geofencing. For apps needing millions of concurrent users, a custom backend will eventually be necessary. For validating concepts and launching, Adalo is the practical starting point." } }
                ]
            }
        ]
    }
    </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>Dating App Builder</span>
            </div>
            <div class="hero-inner">
                <div class="hero-content">
                    <div class="use-case-badge">&#x1F495; Dating &amp; Matching</div>
                    <h1>Build Custom <span class="hero-highlight">Dating Apps</span> for Any Community</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 dating app that serves your specific audience, not a generic swipe clone.</p>
                <div class="hero-buttons">
                    <a href="https://app.adalo.com/signup" class="btn-primary">Build Free <span class="arrow">&rarr;</span></a>
                    <a href="https://www.adalo.com/pricing" class="btn-outline-hero">View Pricing</a>
                </div>
                <ul class="perks">
                    <li>No credit card required</li>
                    <li>Hosted Postgres database included</li>
                    <li>500 records on the free plan with no time limit</li>
                    <li>Web publishing complimentary</li>
                    <li>No overages or excess usage charges</li>
                </ul>
                <div class="hero-stats">
                        <div class="stat"><div class="stat-value">3</div><div class="stat-label">Platforms, One Build</div></div>
                        <div class="stat"><div class="stat-value">$36/mo</div><div class="stat-label">Unlimited Usage</div></div>
                        <div class="stat"><div class="stat-value">500</div><div class="stat-label">Free Plan Records</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/matches</div>
                            </div>
                            <div class="screen">
                                <div class="dk-header">
                                    <h4>Match Dashboard</h4>
                                    <div class="dk-add">+ Discover</div>
                                </div>
                                <div class="dk-body">
                                    <div class="dk-sidebar">
                                        <span class="si active">&#x25A0;</span>
                                        <span class="si">&#x25CB;</span>
                                        <span class="si">&#x25A1;</span>
                                        <span class="si">&#x25B3;</span>
                                        <span class="si">&#x2699;</span>
                                    </div>
                                    <div class="dk-kanban">
                                        <div class="dk-col">
                                            <div class="glass-col-header">New</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Emma, 28</div>
                                                <div class="glass-price">92% match</div>
                                                <span class="glass-tag glass-tag-new">NEW</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Sofia, 25</div>
                                                <div class="glass-price">89% match</div>
                                                <div class="glass-sub">3 mi away</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Olivia, 24</div>
                                                <div class="glass-price">87% match</div>
                                                <span class="glass-tag glass-tag-ok">VERIFIED</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Liked You</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Mia, 27</div>
                                                <div class="glass-price">95% match</div>
                                                <span class="glass-tag glass-tag-ok">MUTUAL</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Ava, 30</div>
                                                <div class="glass-price">88% match</div>
                                                <div class="glass-sub">5 shared</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Lily, 26</div>
                                                <div class="glass-price">91% match</div>
                                                <span class="glass-tag glass-tag-new">NEW</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Chatting</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Luna, 26</div>
                                                <div class="glass-price">Active now</div>
                                                <span class="glass-tag glass-tag-ok">ONLINE</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Ella, 28</div>
                                                <div class="glass-price">Last msg 2h</div>
                                                <div class="glass-sub">Your turn</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Dates</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Zoe, 29</div>
                                                <div class="glass-price">Sat 7 PM</div>
                                                <span class="glass-tag glass-tag-pop">PLANNED</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Aria, 27</div>
                                                <div class="glass-price">Sun 2 PM</div>
                                                <div class="glass-sub">Coffee date</div>
                                            </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>Profile</h4>
                                    <span class="neon-items">95%</span>
                                </div>
                                <div class="tb-kanban">
                                    <div style="flex:1;">
                                        <div class="neon-card">
                                            <div class="n-name">Mia, 27</div>
                                            <div class="n-amount neon-magenta">New York</div>
                                            <div class="n-contact">2 miles away</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Interests</div>
                                            <div class="n-amount neon-cyan">Hiking, Art</div>
                                            <div class="n-contact">4 shared</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Bio</div>
                                            <div class="n-amount neon-gold">"Love adventures"</div>
                                            <div class="n-contact">Verified</div>
                                        </div>
                                        <div class="tb-total-row">
                                            <div class="tb-total-label">MATCH</div>
                                            <div class="tb-total-amount">95%</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>Mia</h4>
                                    <span class="native-accent">Online now</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>Match</span>
                                    <span class="active">Chat</span>
                                    <span>Plan</span>
                                    <span>Meet</span>
                                </div>
                                <div class="native-content">
                                    <div class="native-card">
                                        <div class="native-row">
                                            <span class="native-label" style="margin:0;">Status</span>
                                            <span class="native-pill pill-success">Chatting</span>
                                        </div>
                                    </div>
                                    <div class="native-card">
                                        <div class="native-label">Messages</div>
                                        <div class="native-row">
                                            <span class="native-value">Mia</span>
                                            <span class="native-price">Hey! How...</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">You</span>
                                            <span class="native-price">I'm great!</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Mia</span>
                                            <span class="native-price">Coffee Sat?</span>
                                        </div>
                                    </div>
                                    <div class="native-total">
                                        <span class="native-total-label">Messages</span>
                                        <span class="native-total-amount">12</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 Matching App You Can Imagine</h2>
                <p class="section-description">From niche community dating to professional networking&mdash;describe what you need and Ada, Adalo's AI builder, generates a working matching app with Magic Start in minutes.</p>
            </div>
            <div class="app-types-grid">
                <div class="app-chip"><div class="chip-icon">&#x1F495;</div><div class="chip-text">Dating App</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F91D;</div><div class="chip-text">Friend Finder</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F3AF;</div><div class="chip-text">Niche Community</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4AC;</div><div class="chip-text">Chat &amp; Messaging</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4CD;</div><div class="chip-text">Location-Based</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F465;</div><div class="chip-text">Social Network</div></div>
                <div class="app-chip"><div class="chip-icon">&#x2B50;</div><div class="chip-text">Interest Matching</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4F1;</div><div class="chip-text">Event Meetups</div></div>
            </div>
        </div>
    </div>

<div class="section">
        <div class="container">
            <div class="section-header">
                <span class="section-label">The Challenge</span>
                <h2>Niche Communities Deserve Their Own Matching Platforms</h2>
                <p class="section-description">The big dating apps serve everyone and no one. Specific communities&mdash;hobbyists, faith groups, professionals, and interest-based networks&mdash;need platforms built for them.</p>
            </div>
            <div class="problem-solution">
                <div class="problem-card">
                    <h3 class="card-title">The Dating App Problem</h3>
                    <ul class="card-list">
                        <li>Generic dating apps drown niche communities in a sea of irrelevant profiles</li>
                        <li>Template-based dating app builders produce cookie-cutter experiences</li>
                        <li>Custom development for a dating app starts at $50,000+ and takes 6+ months</li>
                        <li>Chat features alone require real-time infrastructure that's expensive to build</li>
                        <li>Push notifications for matches require native apps, not web wrappers</li>
                        <li>User safety features like reporting and blocking need careful implementation</li>
                    </ul>
                </div>
                <div class="solution-card">
                    <h3 class="card-title">The Adalo Dating Solution</h3>
                    <ul class="card-list">
                        <li>Build matching logic tailored to your community's specific interests and values</li>
                        <li>Built-in relational database connects profiles, matches, messages, and preferences</li>
                        <li>Native iOS and Android apps with push notifications for new matches and messages</li>
                        <li>$36/mo with unlimited users, records, and storage&mdash;no per-user charges</li>
                        <li>Ada generates a working matching app from a description&mdash;ship in days</li>
                        <li>Build in user safety: reporting, blocking, and profile verification flows</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 Launch a Matching Platform</h2>
                <p class="section-description">Built for founders who want to create a dating or matching app for a specific community&mdash;on web, iOS, and Android from a single build.</p>
            </div>
            <div class="features">
                <div class="feature">
                    <div class="feature-icon">&#x1F464;</div>
                    <h3>Rich User Profiles</h3>
                    <p>Photo uploads, bio fields, interest tags, and custom profile questions stored in Adalo's built-in relational database. Users build profiles that reflect your community's unique matching criteria.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F495;</div>
                    <h3>Matching &amp; Discovery</h3>
                    <p>Build discovery feeds with filters for age, location, interests, and custom criteria. Create like/pass mechanics, mutual match detection, and compatibility scoring based on shared interests.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F4AC;</div>
                    <h3>In-App Chat</h3>
                    <p>One-to-one messaging between matched users using Adalo's built-in chat components. Messages are stored in the relational database with read receipts and conversation history.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F514;</div>
                    <h3>Push Notifications</h3>
                    <p>Native push notifications alert users to new matches, incoming messages, and profile views. Critical for engagement&mdash;dating apps live or die on notification-driven re-engagement.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F6E1;&#xFE0F;</div>
                    <h3>Safety &amp; Moderation</h3>
                    <p>Build report and block functionality, photo verification flows, and admin moderation dashboards. User safety is the foundation of any responsible matching platform.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F4F8;</div>
                    <h3>Photo Management</h3>
                    <p>Multi-photo upload support with image display on profile screens. Adalo handles image storage and delivery. Users can reorder, add, and remove photos from their profiles.</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 Concept to Live Dating 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 matching 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 Community to Ada</h3>
                        <p>Tell Ada, Adalo's AI builder, who your community is and how matching should work. Magic Start generates a complete dating app with profiles, discovery, matching, chat, and database&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 dating app for outdoor enthusiasts. I need user profiles with hiking/camping/climbing interests, photo uploads, a discovery feed filtered by activity and location, like/pass matching, in-app chat for matches, and push notifications for new matches."</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Design Your Matching Experience</h3>
                        <p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust profile layouts, matching criteria, and discovery filters. Add features with Magic Add using natural language.</p>
                        <div class="step-details">
                            <div class="step-details-title">Typical dating app screens:</div>
                            <div class="columns-list">
                                <div class="column-item">Profile Setup</div>
                                <div class="column-item">Discovery Feed</div>
                                <div class="column-item">Match Queue</div>
                                <div class="column-item">Chat / Messages</div>
                                <div class="column-item">Settings</div>
                                <div class="column-item">Safety / Report</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>Set Up User Authentication &amp; Data</h3>
                        <p>Adalo's built-in user authentication handles sign-up, login, and profile management. The relational database connects users to matches, messages, preferences, and reports. If you're migrating from a spreadsheet-based waitlist or beta group, SheetBridge lets you import user data from Google Sheets directly. For community-specific features, connect external APIs via Custom Actions.</p>
                        <div class="step-details">
                            <div class="step-details-title">Key data relationships:</div>
                            <div class="screens-grid">
                                <div class="screen-item"><div class="screen-title">User Profiles</div><div class="screen-desc">Photos, bio, interests, preferences, and verification status</div></div>
                                <div class="screen-item"><div class="screen-title">Matches</div><div class="screen-desc">Mutual likes stored as relationships between user records</div></div>
                                <div class="screen-item"><div class="screen-title">Messages</div><div class="screen-desc">Chat messages linked to match pairs with timestamps</div></div>
                                <div class="screen-item"><div class="screen-title">Reports</div><div class="screen-desc">User reports and blocks for moderation workflows</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 dating app on any device form factor directly from the canvas. Test the full flow&mdash;creating a profile, discovering matches, liking profiles, chatting&mdash;on iPhone, Android, tablet, and desktop.</p>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">5</div>
                    <div class="step-content">
                        <h3>Publish to App Stores</h3>
                        <p>Deploy your dating 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. Your community downloads the app and starts connecting.</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 Dating Apps</span>
                <h2>Build the Matching Platform Your Community Deserves</h2>
                <p class="section-description">Stop waiting for the big apps to serve your niche. Build something purpose-built and own it.</p>
            </div>
            <div class="benefits-grid">
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F3AF;</div>
                    <h3>Built for Your Niche</h3>
                    <p>Generic dating apps serve everyone poorly. Build matching criteria specific to your community&mdash;outdoor enthusiasts, faith groups, professionals, hobbyists&mdash;so every profile is relevant.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F4F1;</div>
                    <h3>Native App Store Presence</h3>
                    <p>Your dating app lives in the Apple App Store and Google Play as a real native app. Push notifications for matches and messages keep users engaged&mdash;critical for retention.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F4B0;</div>
                    <h3>Fraction of the Cost</h3>
                    <p>Custom dating app development runs $50,000&ndash;$200,000+. Adalo costs $36/mo with unlimited users, records, and storage. Test your concept before committing six figures.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F680;</div>
                    <h3>Launch Fast, Iterate Faster</h3>
                    <p>Ada generates your app from a description. Visually customize on the canvas. Publish to three platforms. Collect user feedback and iterate daily&mdash;no dev cycles or sprint planning.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F50D;</div>
                    <h3>Design Every Interaction Visually</h3>
                    <p>See profiles, matching, chat, and settings screens all at once on Adalo's multi-screen canvas. Visually direct the AI to adjust layouts, flows, and interactions—no chat prompts needed.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4CA;</div>
                    <h3>Scale with Your User Base</h3>
                    <p>Adalo 3.0 handles 1M+ monthly active users with 3–4× faster performance. As your community grows from hundreds to thousands, the infrastructure scales automatically.</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 Dating App vs. Dating Templates vs. Custom Development</h2>
                <p class="section-description">See how building your own dating app with Adalo compares to the alternatives.</p>
            </div>
            <table class="comp-table">
                <thead><tr><th>Factor</th><th>Adalo Dating App</th><th>Dating App Templates</th><th>Custom Development</th></tr></thead>
                <tbody>
                    <tr><td>Build Time</td><td>&#x2705; Days to weeks</td><td>Hours (but extremely limited)</td><td>6&ndash;12 months</td></tr>
                    <tr><td>Monthly Cost</td><td>&#x2705; $36/mo flat (unlimited users)</td><td>$49&ndash;199/mo + per-user fees</td><td>$10,000&ndash;50,000/mo (servers + team)</td></tr>
                    <tr><td>Native Mobile App</td><td>&#x2705; iOS and Android (true native)</td><td>Web wrapper or PWA</td><td>Yes (if budgeted separately)</td></tr>
                    <tr><td>Custom Matching</td><td>&#x2705; Build your own matching logic</td><td>Pre-built, limited customization</td><td>Full (at development cost)</td></tr>
                    <tr><td>Push Notifications</td><td>&#x2705; Built-in native</td><td>Limited or web-only</td><td>Custom implementation required</td></tr>
                    <tr><td>User Ownership</td><td>&#x2705; Your database</td><td>Template provider's platform</td><td>Your infrastructure</td></tr>
                    <tr><td>Scalability</td><td>&#x2705; 1M+ MAU (Adalo 3.0)</td><td>Varies, often limited</td><td>Depends on architecture</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 Dating App Success</h2>
                <p class="section-description">Patterns from founders who have launched successful matching platforms.</p>
            </div>
            <div class="practices-grid">
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F3AF;</span> Start Hyper-Niche</h3>
                    <p>The most successful dating apps start with a very specific community. Build for outdoor enthusiasts, book lovers, or fitness enthusiasts first. A small, engaged community beats a large, inactive one.</p>
                </div>
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F6E1;&#xFE0F;</span> Build Safety First</h3>
                    <p>Implement report and block features from day one. Build a moderation dashboard. User trust is the foundation of any successful dating platform&mdash;cutting corners on safety destroys communities.</p>
                </div>
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F514;</span> Nail Notifications</h3>
                    <p>Push notifications for new matches and messages are the single most important retention mechanism. Users who don't get notified within minutes of a match lose interest and never return.</p>
                </div>
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4F8;</span> Require Quality Photos</h3>
                    <p>Profiles with clear, recent photos get dramatically more engagement. Guide users through photo upload with examples and minimum requirements. Consider implementing photo verification.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Plan Your Data Model Carefully</h3>
                    <p>Dating apps need relationships between users, preferences, matches, conversations, and reports. Map these connections in Adalo's relational database before building screens.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F9EA;</span> Beta Test with a Small Community</h3>
                    <p>Launch with 50–100 users in your niche before opening broadly. Small groups surface UX friction, matching issues, and safety gaps that are harder to fix after a public launch.</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 Matching Platform</h2>
            </div>
            <div class="requirements-cards">
                <div class="requirement-card">
                    <div class="requirement-icon">&#x267E;&#xFE0F;</div>
                    <div class="requirement-content">
                        <h4>Unlimited Users on Paid Plans</h4>
                        <p>No caps on user profiles, matches, or messages. Adalo paid plans include unlimited database records, users, and storage. Free plan includes 500 records to prototype your app.</p>
                    </div>
                </div>
                <div class="requirement-card">
                    <div class="requirement-icon">&#x1F514;</div>
                    <div class="requirement-content">
                        <h4>Push Notifications</h4>
                        <p>Native push for new matches, messages, and profile views. The most critical engagement channel for dating apps&mdash;without it, users forget about your platform.</p>
                    </div>
                </div>
                <div class="requirement-card">
                    <div class="requirement-icon">&#x1F512;</div>
                    <div class="requirement-content">
                        <h4>Built-in User Authentication</h4>
                        <p>Secure sign-up, login, and session management included. User accounts are linked to profiles, matches, and message history in the relational database automatically.</p>
                    </div>
                </div>
                <div class="requirement-card">
                    <div class="requirement-icon">&#x26A1;</div>
                    <div class="requirement-content">
                        <h4>Zapier, Make &amp; SheetBridge</h4>
                        <p>Connect to email services for welcome messages, analytics for usage tracking, and moderation tools via Zapier or Make. Use SheetBridge to import beta tester lists or seed profiles from Google Sheets into Adalo's relational database.</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 Dating 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 matching algorithm in Adalo?</h3>
                    <div class="faq-answer">
                        <p>Yes. You can build interest-based matching using Adalo's relational database and filtering. Create compatibility scores based on shared interests, location proximity, and custom criteria. For more sophisticated algorithms (machine-learning-based matching), you would connect an external API via Custom Actions. Most successful niche dating apps start with simple interest-based matching and add complexity based on user feedback.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">Does Adalo support real-time chat?</h3>
                    <div class="faq-answer">
                        <p>Adalo includes built-in chat components for one-to-one messaging. Messages are stored in the relational database and displayed in conversation views. Combined with native push notifications for new messages, this creates a functional messaging experience. For high-frequency real-time chat (typing indicators, instant delivery), you might connect a dedicated chat service like Stream or Sendbird via Custom Actions as your user base grows.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">Can users upload photos to their profiles?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo supports image upload and storage. Users can upload multiple profile photos, and you can display them on profile screens using image components. The images are stored and served by Adalo's infrastructure, so you don't need to set up external image hosting.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">How do I handle user safety and privacy?</h3>
                    <div class="faq-answer">
                        <p>Build report and block functionality using Adalo's database and conditional visibility. When a user blocks someone, filter that person out of their discovery feed. Create a reports collection in the database and build an admin moderation dashboard to review flagged profiles. Adalo's user authentication handles secure account management. For GDPR or data privacy compliance, consult a legal professional about your specific obligations.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">Will push notifications work for match alerts?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo builds true native iOS and Android apps with built-in push notification support. You can trigger push notifications when a mutual match occurs, a new message arrives, or someone views a profile. This is the single most important feature for dating app retention&mdash;users who get timely match notifications are dramatically more likely to return and engage.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">How much does it cost to build a dating app with Adalo?</h3>
                    <div class="faq-answer">
                        <p>Adalo's paid plans start at $36/mo with unlimited usage&mdash;no caps on users, records, actions, or storage. Custom dating app development typically costs $50,000&ndash;$200,000+ and takes 6&ndash;12 months. The free plan includes 500 database records so you can prototype your matching concept before committing.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">What can't Adalo do for dating apps?</h3>
                    <div class="faq-answer">
                        <p>Adalo excels at building custom dating apps for specific communities, but it doesn't include built-in AI-powered matching algorithms, live video calling, real-time typing indicators, or geofencing for location-based discovery. Highly interactive features like swipe animations require creative use of Adalo's components. For apps that need millions of concurrent users with sub-second message delivery, a custom-built backend (Firebase, AWS) will eventually be necessary. For validating your concept, building your community, and launching a fully functional matching app at a fraction of custom development cost, Adalo is the practical starting point.</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/ecommerce-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">eCommerce Apps</a>, <a href="https://www.adalo.com/solutions/fitness-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Fitness Apps</a>, and <a href="https://www.adalo.com/solutions/marketplace-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Marketplace Apps</a>. Learn more about <a href="https://www.adalo.com/" style="color: var(--teal); font-weight: 600; text-decoration: none;">Adalo's no-code app builder</a>.
                </p>
            </div>
        </div>
    </div>

<div class="section section-light resources">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Resources &amp; Tutorials</span>
                <h2>Learn How to Build Dating &amp; Social Apps with Adalo</h2>
                <p class="section-description">Guides, documentation, and tutorials to help you build and launch your matching platform.</p>
            </div>
            <div class="resources-grid">
                <a href="https://www.adalo.com/posts/how-to-build-a-social-app" class="resource-card">
                    <div class="resource-type">Tutorial</div>
                    <h3>How to Build a Social App Without Code</h3>
                    <p>Full walkthrough: user profiles, feeds, messaging, and publishing to app stores.</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 for User Matching</h3>
                    <p>How to structure collections for users, matches, messages, and interests in Adalo's relational database.</p>
                    <span class="resource-link">View docs &rarr;</span>
                </a>
                <a href="https://help.adalo.com/building-your-app/user-accounts-and-login" class="resource-card">
                    <div class="resource-type">Documentation</div>
                    <h3>User Authentication &amp; Account Management</h3>
                    <p>Set up secure sign-up, login, and profile management for your dating app users.</p>
                    <span class="resource-link">View docs &rarr;</span>
                </a>
                <a href="https://help.adalo.com/integrations/external-collections" class="resource-card">
                    <div class="resource-type">Documentation</div>
                    <h3>Connecting Real-Time Chat APIs</h3>
                    <p>How to use External Collections and Custom Actions to connect advanced chat and notification services.</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 Community's Matching Platform?</h2>
            <p>Join founders who have launched niche dating and matching apps on iOS, Android, and web&mdash;at a fraction of custom development cost.</p>
            <div class="cta-buttons">
                <a href="https://www.adalo.com/signup" class="btn btn-white">Start Building Your Dating 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>