Applications CRM et pipeline commercial

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

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

.nav {
            background: var(--white);
            padding: 14px 24px;
            border-bottom: 1px solid var(--gray-100);
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.95);
        }

.nav-container {
            max-width: 100%;
            padding: 0 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.nav-left {
            display: flex;
            align-items: center;
            gap: 36px;
        }

.nav-logo img {
            height: 28px;
            width: auto;
        }

.nav-links {
            display: flex;
            gap: 28px;
            list-style: none;
        }

.nav-links a {
            font-size: 14px;
            font-weight: 500;
            color: var(--navy);
            text-decoration: none;
            transition: color 0.2s;
        }

.nav-links a:hover {
            color: var(--teal);
        }

.nav-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }

.nav-login {
            font-size: 14px;
            font-weight: 500;
            color: var(--navy);
            text-decoration: none;
            transition: color 0.2s;
        }

.nav-login:hover {
            color: var(--teal);
        }

.nav-right-link {
            font-size: 14px;
            font-weight: 500;
            color: var(--navy);
            text-decoration: none;
            transition: color 0.2s;
        }

.nav-right-link:hover {
            color: var(--teal);
        }

.nav-signup {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: var(--white);
            background: #00bfa5;
            padding: 10px 22px;
            border-radius: 100px;
            text-decoration: none;
            transition: background 0.2s;
        }

.nav-signup:hover {
            background: var(--teal-dark);
        }

@media (max-width: 768px) {
            .nav-links { display: none; }
            .nav-login { display: none; }
        }

.hero {
            position: relative;
            background: #F8F4EE; background-image: linear-gradient(#F7F3EE, rgba(247,243,238,0));
            color: #000;
            padding: 80px 24px 100px;
            overflow: hidden;
        }

.hero::before { content: none; }

.container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

.breadcrumb {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            margin-bottom: 32px;
            
            
        }

@keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

.breadcrumb a { color: #00A695; text-decoration: none; font-weight: 500; transition: opacity 0.2s; }

.breadcrumb a:hover { opacity: 0.7; }

.breadcrumb-separator { color: #424242; }

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

.hero-content {
            max-width: 600px;
        }

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

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

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

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

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

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

.use-case-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 169, 150, 0.1); color: #00A695; border: none; padding: 8px 20px; border-radius: 100px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 20px; }

@keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

h1 {
            font-family: 'Work Sans', sans-serif;
            font-size: 40px;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 20px;
            letter-spacing: -0.02em; background: linear-gradient(180deg, #006445, #00A695); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            animation: slideUp 0.6s ease-out 0.2s both;
        }

.hero-highlight { display: inline; }

.hero-description {
            font-size: 16px;
            line-height: 1.5;
            
            margin-bottom: 36px; color: #000;
            
        }

.hero-stats {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            
        }

.stat {
            display: flex;
            flex-direction: column;
        }

.stat-value {
            font-family: 'Work Sans', sans-serif;
            font-size: 36px;
            font-weight: 800;
            color: #00A695;
            line-height: 1;
            margin-bottom: 8px;
        }

.stat-label {
            font-size: 14px;
            color: #424242; text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
        }

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

.section {
            padding: 80px 24px;
        }

.section-light {
            background: var(--gray-50);
        }

.section-header {
            max-width: 800px;
            margin-bottom: 60px;
        }

.section-label {
            display: inline-block;
            font-size: 13px;
            font-weight: 700;
            color: var(--teal);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 16px;
        }

h2 {
            font-family: 'Work Sans', sans-serif;
            font-size: 40px;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 16px;
            color: var(--navy);
            letter-spacing: -0.01em;
        }

.section-description {
            font-size: 18px;
            color: var(--gray-600);
            line-height: 1.7;
        }

.app-types-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            margin-top: 48px;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

.app-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--white);
            border: 2px solid var(--gray-100);
            border-radius: 100px;
            padding: 12px 24px;
            font-size: 15px;
            font-weight: 600;
            color: var(--navy);
            transition: all 0.3s ease;
            cursor: default;
        }

.app-chip:hover {
            border-color: var(--teal);
            background: rgba(0, 152, 133, 0.05);
            transform: translateY(-2px);
        }

.chip-icon {
            font-size: 20px;
        }

.chip-text {
            white-space: nowrap;
        }

.problem-solution {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            margin-top: 48px;
        }

.problem-card,
        .solution-card {
            padding: 48px;
            border-radius: 24px;
            position: relative;
        }

.problem-card {
            background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 100%);
            border: 2px solid #FFD5D5;
        }

.problem-card::before {
            content: '⚠️';
            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: '✓';
            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: '✕';
            position: absolute;
            left: 0;
            color: #E53E3E;
            font-weight: 700;
        }

.solution-card .card-list li::before {
            content: '✓';
            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 TABLE === */
        .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 & Tutorials */
        .resources-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

.resource-card {
            display: block;
            background: var(--white);
            border: 2px solid var(--gray-100);
            border-radius: 16px;
            padding: 32px;
            text-decoration: none;
            transition: all 0.3s ease;
        }

.resource-card:hover {
            border-color: var(--teal);
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(0, 152, 133, 0.1);
        }

.resource-type {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--teal);
            background: rgba(0, 152, 133, 0.08);
            padding: 4px 12px;
            border-radius: 100px;
            margin-bottom: 16px;
        }

.resource-card h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 8px;
            line-height: 1.3;
        }

.resource-card p {
            font-size: 15px;
            color: var(--gray-600);
            line-height: 1.6;
            margin-bottom: 16px;
        }

.resource-link {
            font-size: 14px;
            font-weight: 600;
            color: var(--teal);
        }

@media (max-width: 768px) {
            .resources-grid {
                grid-template-columns: 1fr;
            }
        }

.cta-section {
            background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
            padding: 100px 24px;
            text-align: center;
            color: var(--white);
            position: relative;
            overflow: hidden;
        }

.cta-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background:
                repeating-linear-gradient(
                    45deg,
                    transparent,
                    transparent 10px,
                    rgba(255, 255, 255, 0.03) 10px,
                    rgba(255, 255, 255, 0.03) 20px
                );
        }

.cta-content {
            max-width: 700px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

.cta-section h2 {
            color: var(--white);
            margin-bottom: 20px;
        }

.cta-section p {
            font-size: 20px;
            margin-bottom: 40px;
            opacity: 0.95;
            line-height: 1.7;
        }

.cta-buttons {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
        }

.btn {
            padding: 18px 40px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-family: 'Work Sans', sans-serif;
        }

.btn-white {
            background: var(--white);
            color: var(--teal);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

.btn-white:hover {
            background: var(--gray-50);
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
        }

.btn-outline {
            background: transparent;
            color: var(--white);
            border: 2px solid var(--white);
        }

.btn-outline:hover {
            background: var(--white);
            color: var(--teal);
            transform: translateY(-2px);
        }

.faq-container {
            max-width: 900px;
            margin: 0 auto;
        }

.faq-item {
            background: var(--white);
            border: 2px solid var(--gray-100);
            border-radius: 16px;
            padding: 32px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

.faq-item:hover {
            border-color: var(--teal);
            box-shadow: 0 4px 20px rgba(0, 152, 133, 0.1);
        }

.faq-question {
            font-family: 'Work Sans', sans-serif;
            font-size: 20px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 16px;
        }

.faq-answer p {
            color: var(--gray-600);
            line-height: 1.7;
            margin: 0;
        }

@media (max-width: 1100px) { .hero-inner { grid-template-columns: 1fr 440px; } .device-cluster { height: 420px; } .cyber-desktop { width: 400px; } .cyber-tablet { width: 200px; } .cyber-phone { display: none; } }

@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; text-align: center; } .hero-content { max-width: 100%; } .device-cluster { height: 360px; max-width: 480px; margin: 0 auto; } .cyber-desktop { width: 100%; max-width: 480px; position: relative; } .cyber-tablet, .cyber-phone { display: none; } .store-badges { justify-content: center; } .hero-stats { justify-content: center; } .use-case-badge { margin-left: auto; margin-right: auto; } }

@media (max-width: 768px) {
            .hero {
                padding: 60px 24px 80px;
            }

.hero-inner {
                grid-template-columns: 1fr;
                text-align: center;
            }

.device-cluster {
                display: none;
            }

.hero-content {
                max-width: 100%;
            }

.hero-stats {
                justify-content: center;
            }

.use-case-badge {
                margin-left: auto;
                margin-right: auto;
            }

.comp-table th,
            .comp-table td {
                padding: 12px 14px;
                font-size: 13px;
            }

.comp-table td:first-child {
                width: 100px;
            }

.problem-solution {
                grid-template-columns: 1fr;
                gap: 24px;
            }

.workflow-step {
                grid-template-columns: 60px 1fr;
                gap: 20px;
            }

.step-number {
                width: 60px;
                height: 60px;
                font-size: 24px;
            }

.workflow-step:not(:last-child)::after {
                left: 29px;
            }

.screens-grid {
                grid-template-columns: 1fr;
            }

.cta-buttons {
                flex-direction: column;
            }

.btn {
                width: 100%;
                justify-content: center;
            }

.hero-stats {
                gap: 32px;
            }
        }

.arrow {
            transition: transform 0.3s ease;
        }

.btn:hover .arrow {
            transform: translateX(4px);
        }
    </style>

<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>CRM &amp; Sales Pipeline</span>
            </div>
            <div class="hero-inner">
                <div class="hero-content">
                    <div class="use-case-badge">
                        &#x1F4BC; CRM &amp; Sales
                    </div>
                    <h1>
                        Build Custom <span class="hero-highlight">CRM Apps</span> for Any Sales Team
                    </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 CRM that fits your sales process, not the other way around.
                    </p>
                <div class="hero-buttons">
                    <a href="https://app.adalo.com/signup" class="btn-primary">Build Free <span class="arrow">&rarr;</span></a>
                    <a href="https://www.adalo.com/pricing" class="btn-outline-hero">View Pricing</a>
                </div>
                <ul class="perks">
                    <li>No credit card required</li>
                    <li>Hosted Postgres database included</li>
                    <li>500 records on the free plan with no time limit</li>
                    <li>Web publishing complimentary</li>
                    <li>No overages or excess usage charges</li>
                </ul>
                <div class="hero-stats">
                        <div class="stat">
                            <div class="stat-value">500+</div>
                            <div class="stat-label">CRM Apps Built</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">3</div>
                            <div class="stat-label">Platforms</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">$36/mo</div>
                            <div class="stat-label">Unlimited Usage</div>
                        </div>
                    </div>
                </div>

<div class="device-column">
                <div class="device-cluster">
                    
                    <div class="cyber-desktop">
                        <div class="frame">
                            <div class="toolbar">
                                <span class="dot dot-r"></span>
                                <span class="dot dot-y"></span>
                                <span class="dot dot-g"></span>
                                <div class="url-bar">app.adalo.com/crm-pipeline</div>
                            </div>
                            <div class="screen">
                                <div class="dk-header">
                                    <h4>Sales Pipeline</h4>
                                    <div class="dk-add">+ New Deal</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">Lead</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Acme Corp</div>
                                                <div class="glass-price">$45,000</div>
                                                <span class="glass-tag glass-tag-sale">HOT</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">TechStart Inc</div>
                                                <div class="glass-price">$12,000</div>
                                                <span class="glass-tag glass-tag-new">NEW</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Bloom Design</div>
                                                <div class="glass-price">$18,500</div>
                                                <div class="glass-sub">Inbound</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Qualified</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Global Retail</div>
                                                <div class="glass-price">$78,000</div>
                                                <span class="glass-tag glass-tag-pop">WARM</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">CloudSync</div>
                                                <div class="glass-price">$24,000</div>
                                                <div class="glass-sub">Demo done</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">DataVault</div>
                                                <div class="glass-price">$31,000</div>
                                                <span class="glass-tag glass-tag-new">FOLLOW UP</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Proposal</div>
                                            <div class="glass-card">
                                                <div class="glass-name">MedHealth</div>
                                                <div class="glass-price">$65,000</div>
                                                <span class="glass-tag glass-tag-sale">HOT</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">NexGen Labs</div>
                                                <div class="glass-price">$42,000</div>
                                                <div class="glass-sub">Sent Mar 1</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Won</div>
                                            <div class="glass-card">
                                                <div class="glass-name">FreshBake Co</div>
                                                <div class="glass-price">$60,000</div>
                                                <span class="glass-tag glass-tag-ok">CLOSED</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">UrbanFit</div>
                                                <div class="glass-price">$27,500</div>
                                                <span class="glass-tag glass-tag-ok">CLOSED</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="stand"></div>
                        <div class="base"></div>
                    </div>

<div class="cyber-tablet">
                        <div class="frame">
                            <div class="tb-camera"></div>
                            <div class="screen">
                                <div class="tb-header">
                                    <h4>Deal Detail</h4>
                                    <span class="neon-items">$78K</span>
                                </div>
                                <div class="tb-kanban">
                                    <div style="flex:1;">
                                        <div class="neon-card">
                                            <div class="n-name">Global Retail</div>
                                            <div class="n-amount neon-cyan">$78,000</div>
                                            <div class="n-contact">James L.</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Stage</div>
                                            <div class="n-amount neon-gold">Qualified</div>
                                            <div class="n-contact">Since Mar 1</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Next Step</div>
                                            <div class="n-amount neon-magenta">Send proposal</div>
                                            <div class="n-contact">Due Friday</div>
                                        </div>
                                        <div class="tb-total-row">
                                            <div class="tb-total-label">PIPELINE</div>
                                            <div class="tb-total-amount">$284K</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>Acme Corp</h4>
                                    <span class="native-accent">$45,000</span>
                                </div>
                                <div class="native-progress">
                                    <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 class="progress-line" style="background:#e5e7eb;"></div>
                                    <div class="progress-dot" style="background:#e5e7eb;"></div>
                                </div>
                                <div class="native-progress-labels">
                                    <span class="active">Lead</span>
                                    <span>Qualified</span>
                                    <span>Proposal</span>
                                    <span>Won</span>
                                </div>
                                <div class="native-content">
                                    <div class="native-card">
                                        <div class="native-row">
                                            <span class="native-label" style="margin:0;">Stage</span>
                                            <span class="native-pill pill-success">Lead</span>
                                        </div>
                                    </div>
                                    <div class="native-card">
                                        <div class="native-label">Contact Info</div>
                                        <div class="native-row">
                                            <span class="native-value">Contact</span>
                                            <span class="native-price">Sarah Chen</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Email</span>
                                            <span class="native-price">sarah@acme.co</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Last Call</span>
                                            <span class="native-price">Yesterday</span>
                                        </div>
                                    </div>
                                    <div class="native-total">
                                        <span class="native-total-label">Deal Value</span>
                                        <span class="native-total-amount">$45K</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 CRM App You Can Imagine</h2>
                <p class="section-description">
                    From simple contact managers to full deal pipelines&mdash;describe what you need and Ada, Adalo's AI builder, generates a working CRM with Magic Start in minutes.
                </p>
            </div>

<div class="app-types-grid">
                <div class="app-chip">
                    <div class="chip-icon">&#x1F464;</div>
                    <div class="chip-text">Contact Manager</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">&#x1F4C8;</div>
                    <div class="chip-text">Deal Pipeline</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">&#x1F3AF;</div>
                    <div class="chip-text">Lead Tracker</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">&#x1F4CA;</div>
                    <div class="chip-text">Sales Dashboard</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">&#x1F465;</div>
                    <div class="chip-text">Client Portal</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">&#x1F4DD;</div>
                    <div class="chip-text">Quote Generator</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">&#x1F4B0;</div>
                    <div class="chip-text">Commission Tracker</div>
                </div>
                <div class="app-chip">
                    <div class="chip-icon">&#x1F5FA;&#xFE0F;</div>
                    <div class="chip-text">Territory Manager</div>
                </div>
            </div>
        </div>
    </div>

<div class="section">
        <div class="container">
            <div class="section-header">
                <span class="section-label">The Challenge</span>
                <h2>Sales Teams Deserve Better Than Spreadsheets &amp; Overpriced Software</h2>
                <p class="section-description">
                    Most small and mid-size teams are stuck between clunky spreadsheets and enterprise CRMs that cost $75+ per user per month. There's a better way to manage your pipeline.
                </p>
            </div>

<div class="problem-solution">
                <div class="problem-card">
                    <h3 class="card-title">The Sales Management Problem</h3>
                    <ul class="card-list">
                        <li>Deals tracked in spreadsheets with no real-time visibility</li>
                        <li>Contact data scattered across email, phones, and sticky notes</li>
                        <li>No mobile access for field sales teams between meetings</li>
                        <li>Salesforce and HubSpot licenses eating $75&ndash;$150+ per user per month</li>
                        <li>Weeks of setup and admin training before anyone uses the CRM</li>
                        <li>Generic CRM workflows that don't match your actual sales process</li>
                    </ul>
                </div>

<div class="solution-card">
                    <h3 class="card-title">The Adalo CRM Solution</h3>
                    <ul class="card-list">
                        <li>Visual canvas lets you design your exact pipeline stages and deal flow</li>
                        <li>Built-in relational database keeps contacts, deals, and activities connected</li>
                        <li>Native iOS and Android apps give field sales real-time pipeline access</li>
                        <li>$36/mo with unlimited users, records, and storage&mdash;no per-seat charges</li>
                        <li>Ada generates a working CRM from a description&mdash;ship in days, not months</li>
                        <li>Your sales process becomes the app, not the other way around</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

<div class="section section-light">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Key Features</span>
                <h2>Everything Your Sales Team Needs in One App</h2>
                <p class="section-description">
                    Built for teams that need a CRM tailored to how they actually sell&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>Contact &amp; Lead Management</h3>
                    <p>Store contacts, companies, and leads in Adalo's built-in relational database. Link contacts to deals, activities, and notes&mdash;all connected automatically with no external database setup required.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F4C8;</div>
                    <h3>Deal Pipeline Tracking</h3>
                    <p>Build visual pipeline stages that match your sales process. Track deal values, expected close dates, and probability. Move deals between stages with a tap on any device.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F552;</div>
                    <h3>Activity Timeline</h3>
                    <p>Log calls, meetings, emails, and notes against every contact and deal. Your team sees the full history of every relationship at a glance, whether on desktop or mobile.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F514;</div>
                    <h3>Push Notifications</h3>
                    <p>Native push notifications alert reps when deals move stages, new leads come in, or follow-ups are due. Critical for field sales teams who can't check dashboards between meetings.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F4F1;</div>
                    <h3>Offline Access</h3>
                    <p>Field sales reps can view contacts and deal info even in areas with limited connectivity. Native iOS and Android apps keep key data available when your team is on the road.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F4CA;</div>
                    <h3>Custom Dashboards</h3>
                    <p>Build dashboards showing pipeline value, conversion rates, rep activity, and revenue forecasts. Filter by team, territory, time period, or any custom field your sales process requires.</p>
                </div>
            </div>
        </div>
    </div>

<div class="section workflow">
        <div class="container">
            <div class="section-header">
                <span class="section-label">How It Works</span>
                <h2>From Idea to CRM 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 CRM 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 CRM to Ada</h3>
                        <p>Tell Ada, Adalo's AI builder, what your sales team needs. Magic Start generates a complete CRM app with screens, database, and navigation from your description&mdash;typically in under two minutes.</p>

<div class="step-details">
                            <div class="step-details-title">Example prompt:</div>
                            <div style="margin-top: 8px; padding: 16px; background: var(--white); border-radius: 8px; border-left: 3px solid var(--teal);">
                                <div style="font-size: 14px; color: var(--gray-600); line-height: 1.6; font-style: italic;">
                                    "Build me a CRM app for a real estate sales team. I need a contact list, a deal pipeline with stages Lead, Showing, Offer, Negotiation, and Closed, an activity log for each deal, and a dashboard showing monthly pipeline value."
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Customize Pipeline Stages</h3>
                        <p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust your pipeline stages, custom fields, and deal properties. Add features with Magic Add using natural language.</p>

<div class="step-details">
                            <div class="step-details-title">Typical pipeline stages:</div>
                            <div class="columns-list">
                                <div class="column-item">New Lead</div>
                                <div class="column-item">Qualified</div>
                                <div class="column-item">Proposal Sent</div>
                                <div class="column-item">Negotiation</div>
                                <div class="column-item">Closed Won</div>
                                <div class="column-item">Closed Lost</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="workflow-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>Connect Data Sources</h3>
                        <p>Use Adalo's built-in relational database for your primary CRM data, or connect Google Sheets via SheetBridge if your team already tracks leads in spreadsheets. Add Zapier or Make integrations for email, calendars, and marketing tools.</p>

<div class="step-details">
                            <div class="step-details-title">Common CRM integrations:</div>
                            <div class="screens-grid">
                                <div class="screen-item">
                                    <div class="screen-title">SheetBridge</div>
                                    <div class="screen-desc">Import existing lead lists from Google Sheets as a relational database</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">Zapier / Make</div>
                                    <div class="screen-desc">Connect to email marketing, calendar, and invoicing tools</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">Custom API</div>
                                    <div class="screen-desc">External Collections connect to any REST API endpoint</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">Webhooks</div>
                                    <div class="screen-desc">Trigger automations when deals close or contacts are added</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 CRM on any device form factor directly from the canvas. Test the full deal flow&mdash;adding contacts, moving deals through stages, logging activities&mdash;on iPhone, Android, tablet, and desktop before publishing.</p>
                    </div>
                </div>

<div class="workflow-step">
                    <div class="step-number">5</div>
                    <div class="step-content">
                        <h3>Publish to App Stores</h3>
                        <p>Deploy your CRM 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 sales team downloads the app and starts closing deals immediately.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="section benefits">
        <div class="container">
            <div class="section-header">
                <span class="section-label" style="color: var(--gold);">Why Adalo for CRM</span>
                <h2>The CRM That Fits Your Budget &amp; Your Process</h2>
                <p class="section-description">
                    Stop paying per seat for features you don't use. Build exactly the CRM your team needs.
                </p>
            </div>

<div class="benefits-grid">
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F4B8;</div>
                    <h3>10x Cheaper Than Salesforce</h3>
                    <p>Adalo costs $36/mo with unlimited users, records, and storage. No per-seat licensing. A 10-person sales team on Salesforce pays $750+/mo&mdash;on Adalo, it's still $36/mo.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F6E3;&#xFE0F;</div>
                    <h3>Field Sales Mobility</h3>
                    <p>True native iOS and Android apps with push notifications and offline access. Your field reps update deals between meetings from their phones, not just when they're back at a desk.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F5C4;&#xFE0F;</div>
                    <h3>One Database for Everything</h3>
                    <p>Adalo's built-in relational database connects contacts, companies, deals, activities, and notes without configuring external services. No Firebase setup. No Supabase. It just works.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F680;</div>
                    <h3>Ship in Days, Not Months</h3>
                    <p>Ada generates your CRM from a description. Visually customize it on the canvas. Publish to three platforms from one build. Most Makers go from idea to live CRM in under a week.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F50D;</div>
                    <h3>See Your Entire CRM at a Glance</h3>
                    <p>Adalo's multi-screen canvas lets you design pipeline views, contact details, activity logs, and dashboards simultaneously. Point at any element and visually direct the AI to refine it.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4CA;</div>
                    <h3>Scale with Your Sales Team</h3>
                    <p>Adalo 3.0 handles 1M+ monthly active users with 3–4× faster performance. Whether your team is 5 reps or 500, the infrastructure grows with you—no migration, no per-seat pricing surprises.</p>
                </div>
            
            </div>
        </div>
    </div>

<div class="section comparison">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Compare Your Options</span>
                <h2>Custom CRM App vs. Off-the-Shelf vs. Custom Development</h2>
                <p class="section-description">
                    See how building your own CRM with Adalo compares to the alternatives.
                </p>
            </div>
            <table class="comp-table">
                <thead>
                    <tr>
                        <th>Factor</th>
                        <th>Adalo CRM App</th>
                        <th>Salesforce / HubSpot</th>
                        <th>Custom Development</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Build Time</td>
                        <td>&#x2705; Days to weeks</td>
                        <td>Immediate, but customization takes months</td>
                        <td>3&ndash;6 months</td>
                    </tr>
                    <tr>
                        <td>Monthly Cost</td>
                        <td>&#x2705; $36/mo flat (unlimited users)</td>
                        <td>$25&ndash;300 per seat per month</td>
                        <td>$5,000&ndash;20,000/mo (hosting + team)</td>
                    </tr>
                    <tr>
                        <td>Native Mobile App</td>
                        <td>&#x2705; iOS and Android (true native)</td>
                        <td>Web app or mobile wrapper</td>
                        <td>Yes (if budgeted separately)</td>
                    </tr>
                    <tr>
                        <td>Push Notifications</td>
                        <td>&#x2705; Built-in</td>
                        <td>Limited on mobile</td>
                        <td>Custom implementation required</td>
                    </tr>
                    <tr>
                        <td>Customization</td>
                        <td>&#x2705; Full &mdash; your screens, your fields</td>
                        <td>Constrained by platform configuration</td>
                        <td>Full (at development cost)</td>
                    </tr>
                    <tr>
                        <td>Maintenance</td>
                        <td>&#x2705; Adalo handles infrastructure</td>
                        <td>Vendor handles</td>
                        <td>Your dev team handles</td>
                    </tr>
                    <tr>
                        <td>Time to Change</td>
                        <td>&#x2705; Minutes</td>
                        <td>Days to weeks (admin config)</td>
                        <td>Sprint cycle (1&ndash;2 weeks)</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

<div class="section best-practices">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Best Practices</span>
                <h2>Tips for CRM Success</h2>
                <p class="section-description">
                    Patterns from Makers who have built and shipped successful CRM apps with Adalo.
                </p>
            </div>

<div class="practices-grid">
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4C8;</span> Start with the Deal Pipeline</h3>
                    <p>Your pipeline is the core of any sales CRM. Define your stages first (Lead, Qualified, Proposal, Closed), build the pipeline view, then expand outward to contacts, activities, and dashboards.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F464;</span> Link Contacts to Deals</h3>
                    <p>Use Adalo's relational database to connect contacts to deals and companies. This way, when a rep opens a deal, they see every related contact, past activity, and note in one place.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CA;</span> Build Dashboards Last</h3>
                    <p>Get your data model and core workflows right before building dashboards. A dashboard built on clean data is powerful. A dashboard built on messy data just visualizes the mess.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F517;</span> Add Integrations Gradually</h3>
                    <p>Start with Adalo's built-in database. Once your team is using the CRM daily, layer in Zapier automations for email sync, calendar integration, and lead capture from web forms.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F9EA;</span> Test with Real Deal Data</h3>
                    <p>Import a sample of your actual pipeline before launching. Real deals expose edge cases—stale leads, multi-contact companies, deals stuck in stages—that dummy data won't reveal.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Migrate from Spreadsheets with SheetBridge</h3>
                    <p>If your pipeline lives in Google Sheets, use SheetBridge to connect it directly as a database. Run both systems in parallel until your sales team is fully onboarded.</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 CRM</h2>
            </div>

<div class="requirements-cards">
                <div class="requirement-card">
                    <div class="requirement-icon">&#x267E;&#xFE0F;</div>
                    <div class="requirement-content">
                        <h4>Unlimited Records on Paid Plans</h4>
                        <p>No caps on contacts, deals, or activities. Adalo paid plans include unlimited database records, users, and storage. Free plan includes 500 records to get started.</p>
                    </div>
                </div>

<div class="requirement-card">
                    <div class="requirement-icon">&#x1F514;</div>
                    <div class="requirement-content">
                        <h4>Push Notifications</h4>
                        <p>Native push notifications for deal updates, new lead alerts, and follow-up reminders. Keeps your sales team engaged without requiring them to open the app.</p>
                    </div>
                </div>

<div class="requirement-card">
                    <div class="requirement-icon">&#x1F4C4;</div>
                    <div class="requirement-content">
                        <h4>Google Sheets via SheetBridge</h4>
                        <p>Already tracking leads in Google Sheets? SheetBridge connects your spreadsheet as a relational database so you can migrate incrementally without disruption.</p>
                    </div>
                </div>

<div class="requirement-card">
                    <div class="requirement-icon">&#x26A1;</div>
                    <div class="requirement-content">
                        <h4>Zapier &amp; Make Integrations</h4>
                        <p>Connect your CRM to 6,000+ tools. Sync with email marketing platforms, calendar apps, invoicing software, and lead capture forms via Zapier or Make.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="section" style="background: white;">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Frequently Asked Questions</span>
                <h2>Common Questions About Building CRM 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 CRM without coding?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo's no-code app builder requires zero coding. Tell Ada (Adalo's AI builder) what your CRM needs and Magic Start generates a complete app with a database, screens, and navigation. Then visually customize everything on the canvas by pointing at elements and directing changes. Makers routinely build and publish complete CRM apps to the App Store and Google Play without writing a single line of code.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">How much does a custom CRM app cost?</h3>
                    <div class="faq-answer">
                        <p>Adalo's paid plans start at $36/mo with unlimited usage&mdash;no caps on users, records, actions, or storage. Compare that to Salesforce at $75+/user/month or HubSpot's Sales Hub at $90+/user/month. A 10-person team on Salesforce costs $750+/mo. That same team on Adalo costs $36/mo total, with native iOS and Android apps included. The free plan includes 500 database records so you can prototype your CRM before committing.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Can my sales team use the CRM on their phones?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo builds true native iOS and Android apps&mdash;not web wrappers. Your sales team downloads the CRM from the Apple App Store or Google Play like any other app. Native apps mean push notifications for deal updates, faster performance, and the ability to view contact information even in areas with limited connectivity. This is critical for field sales teams who work between meetings, not just at a desk.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Does Adalo CRM work offline?</h3>
                    <div class="faq-answer">
                        <p>Adalo's native apps cache previously viewed data, so your team can reference contacts and deal details in areas with poor connectivity. Full offline editing with sync-on-reconnect is on the product roadmap. For field sales teams, the native app experience is significantly more reliable than web-based CRMs in low-connectivity environments like trade shows, construction sites, or rural areas.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Can I import data from spreadsheets?</h3>
                    <div class="faq-answer">
                        <p>Yes, in two ways. SheetBridge lets you connect a Google Sheet directly as a relational database&mdash;ideal for teams that want to keep their spreadsheet as the data source during migration. Alternatively, you can import CSV data into Adalo's built-in database for a clean start. Many Makers use SheetBridge initially and transition to the built-in database once the CRM is established.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">How does Adalo compare to Salesforce for small teams?</h3>
                    <div class="faq-answer">
                        <p>Salesforce is the industry standard for enterprise CRM with deep customization, extensive integrations, and advanced reporting. For small and mid-size sales teams, though, Salesforce often means paying $75+/user/month for features you'll never use and spending weeks configuring workflows. Adalo lets you build exactly the CRM features your team needs at $36/mo total (not per user), with native mobile apps included. The trade-off: Adalo won't match Salesforce's depth in advanced reporting, complex workflow automation, or enterprise integrations. If you need those, Salesforce is the right choice.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">What can't Adalo CRM do?</h3>
                    <div class="faq-answer">
                        <p>Adalo excels at building custom CRM apps that fit your specific sales process, but it's not a drop-in replacement for enterprise CRM platforms. Advanced features like AI-powered lead scoring, built-in email sequencing, territory-level permission hierarchies, and complex multi-object reporting require Salesforce, HubSpot, or similar platforms. Adalo also doesn't include a built-in email client&mdash;you'd connect email via Zapier or Make. For teams that need a CRM tailored to their workflow with native mobile apps at a fraction of enterprise pricing, Adalo is the practical choice.</p>
                    </div>
                </div>
            </div>

<div style="margin-top: 60px; text-align: center; padding: 40px; background: var(--gray-50); border-radius: 16px;">
                <p style="font-size: 16px; color: var(--gray-600); margin-bottom: 20px;">
                    Explore more solutions: <a href="https://www.adalo.com/solutions/marketplace-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Marketplace 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>. 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 CRM Apps with Adalo</h2>
                <p class="section-description">
                    Step-by-step guides, video walkthroughs, and documentation to help you build and ship your CRM.
                </p>
            </div>

<div class="resources-grid">
                <a href="https://www.adalo.com/posts/how-to-build-a-crm-app" class="resource-card">
                    <div class="resource-type">Tutorial</div>
                    <h3>How to Build a CRM App Without Code</h3>
                    <p>Full walkthrough: database schema, pipeline screens, contact views, and publishing to app stores.</p>
                    <span class="resource-link">Read guide &rarr;</span>
                </a>

<a href="https://help.adalo.com/integrations/external-collections" class="resource-card">
                    <div class="resource-type">Documentation</div>
                    <h3>Connecting External Data Sources</h3>
                    <p>How to use External Collections and Custom Actions to connect your CRM to existing APIs and tools.</p>
                    <span class="resource-link">View docs &rarr;</span>
                </a>

<a href="https://www.adalo.com/posts/google-sheets-app-builder" class="resource-card">
                    <div class="resource-type">Tutorial</div>
                    <h3>Google Sheets to CRM via SheetBridge</h3>
                    <p>Migrate your spreadsheet pipeline to a real CRM app without losing your existing data workflow.</p>
                    <span class="resource-link">Read guide &rarr;</span>
                </a>

<a href="https://help.adalo.com/building-your-app/database" class="resource-card">
                    <div class="resource-type">Documentation</div>
                    <h3>Relational Database Basics</h3>
                    <p>Understand collections, relationships, and record linking &mdash; the foundation of any CRM data model.</p>
                    <span class="resource-link">View docs &rarr;</span>
                </a>
            </div>
        </div>
    </div>

<div class="cta-section">
        <div class="cta-content">
            <h2>Ready to Build Your Sales Team's CRM?</h2>
            <p>
                Join Makers who have replaced spreadsheet pipelines and overpriced CRM licenses with custom native apps built on Adalo&mdash;at a fraction of the cost.
            </p>
            <div class="cta-buttons">
                <a href="https://www.adalo.com/signup" class="btn btn-white">
                    Start Building Your CRM 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>